AntonBrock
@AntonBrock
screen light

Как заставить работать стили?

Привет, возникла проблема, с которой я не могу разобраться в одиночку, поэтому надеюсь на вашу помощь! Заранее извиняюсь, что только так код.
Итак, у меня есть верстка:
.choicePrice(v-for="item in getCheckouts")
  p {{item.text + ' ' + item.price}}
.priceOne
   input(type="radio" id="priceChoice" name="choicePrice" class="inputMoney")
   label(class="labelMoney" for="choicePrice")


Как видно из state, я беру только текст и цену.
Далее идет контейнер со стилями. Input по умолчанию отсутствует, он скрыт, и я делаю кастомный label со стилями(обычное дело когда нужно кастомизировать input)

Ниже его стиль:
.priceOne
  position absolute
  width 180px
  left 18.5px
  bottom -91px
  height 180px
  background #eddcc4
  z-index 1
  transform rotate(-45deg)
  border-bottom-left-radius 30%
  border-top-right-radius 30%
  display flex
  align-items flex-end
  margin-left 20px


Когда я нажимаю на него(label), появляется :: after и фон меняется
#priceChoice:checked+label:after
  background #f4c94f !important


Также вот стили для labelMoney
.labelMoney
  display inline-block
  position relative
  line-height 20px
  cursor pointer
  &::before
    content ""
    position absolute
    top -76px
    right -80px
    width 50px
    height 50px
    border-radius 50%
    background-color #fff
    z-index 5
   &:after
   z-index 10
   content ""
   position absolute
   left 37px
   top -68px
   width 35px
   height 35px
   border-radius 50%
   background #ffffff


Проблема в том, что это не работает. Те. У меня есть похожие стили ниже, но без vuex( в разных контейнерах), и все работает (метка :: after заменяет фон). Ничто не помогает ни z-index, ни изменение позиции, даже если style сделать без scoped :checked. Пожалуйста, укажите ошибку!

Еще скрин, чтобы точно понять о чем я:

5d00ab0df07c8178533197.jpeg5d00ab14e8f29436468444.jpeg
  • Вопрос задан
  • 150 просмотров
Пригласить эксперта
Ответы на вопрос 1
AntonBrock
@AntonBrock Автор вопроса
screen light
Как я понял, у меня либо жесткое наложение, либо просто не видно куда и что тыкается. (не работает другими словами) После разбора всех атрибутов, я дошел до того что 1 кружок ставится НЕ зависимо куда ты тыкнешь. Тут уже было понятно, что это :after вешается по id (как мы и писали) и только на первый элемент. Поэтому решение нашел стремное, а именно я динамически передаю новые id, на каждую итерацию цикла. Т.е. 4 id из state, после уже в стили делаю такие как и были :after+label и тд. Нужный функционал то я получил, но весь дерьмо код - вижу. Если у вас будут лучшее решение, чем мое - с радостью узнаю и попробую!

Зачем вообще мне нужен был state? Дело в том, что именно вот эти цифры ( цена) отправляется к нам в базу, и по клику динамически (там еще есть ниже верстка) перемещаем туда тоже. Т.е. можно было без state, но писать доп.кода нет смысла, да и ошибки будут 100%.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы