css - 使用 css 和 vue 进行设置

Question

我对此真的很陌生，我正在学习，但我很难赋予它我正在使用的风格。

在网上搜索我找到了一些例子，但到目前为止没有任何帮助

我的代码

<div class="panel-group" id="accordion-mbl-menu">
      <div class="panel">
        <b-navbar-toggle target="collapse-cat-lvl1-469">
          Accesorios
          <img src="@/assets/images/layout/menu/chevron.svg" class="icon">
        </b-navbar-toggle>
        <div style="background-color:white;">
          <b-collapse id="collapse-cat-lvl1-469">
            <div data-cat-acc="473" class="grid-item parent-lvl-2">
              <a class="link sty-1 grid-sty-1" href="#" target="_self" data-menu-item-id="473">
                <span class="text">GTI</span>
              </a>
            </div>
            <div data-cat-acc="474" class="grid-item parent-lvl-2">
              <a class="link sty-1 grid-sty-1" href="#" target="_self" data-menu-item-id="474">
                <span class="text">Pets</span>
              </a>
            </div>
            <div data-cat-acc="475" class="grid-item parent-lvl-2">
              <a class="link sty-1 grid-sty-1" href="#" target="_self" data-menu-item-id="475">
                <span class="text">Vintage</span>
              </a>
            </div>
            <div data-cat-acc="490" class="grid-item parent-lvl-2">
              <a class="link sty-1 grid-sty-1" href="#" target="_self" data-menu-item-id="490">
                <span class="text">Colaboraciones especiales</span>
              </a>
            </div>
          </b-collapse>
        </div>
      </div>
      <div class="panel">
        <b-navbar-toggle target="collapse-cat-lvl1-471">
          Colecciones
          <img src="@/assets/images/layout/menu/chevron.svg" class="icon">
        </b-navbar-toggle>
      </div>
      <div class="panel">
        <button type="button" class="navbar-toggler collapsed"> ¿Necesitas ayuda? </button>
      </div>
    </div>

我的 CSS

        @media (min-width: 829px) {
      .navbar-greetings, .login-section{display: none}

      #menu-header.collapse:not(.show){
        display: block;
      }

      #menu-header{
        position: fixed;
        top: 25px;
        max-width: 83%;
        margin: 0 auto;
        left: 8.32%;
        .panel{
          button{
            display: block;
            color: white;
            font-size: 13px;
            font-family: 'VWHead-Bold';
          }
        }
        #accordion-mbl-menu{
          display: flex;
        }
      }
    }
    /**
      estilos del menu desplegable
    **/
    @media (max-width: 828px) {
      #menu-header.show {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
      }
      #menu-header {
        display: block ;
        position: fixed;
        z-index: 1;
        background-color: #FFF;
        left: 0;
        top: 100px;
        height: -webkit-calc(100% - 50px);
        height: -moz-calc(100% - 50px);
        height: calc(100% - 50px);
        width: 90%;
        padding: 20px 20px;
        max-width: 87.5%;
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: all 350ms ease;
        -moz-transition: all 350ms ease;
        -ms-transition: all 350ms ease;
        -o-transition: all 350ms ease;
        transition: all 350ms ease;

        .grid-sty-1 {
            height: 55px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: -moz-box;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            -moz-box-align: center;
            align-items: center;
            height: 40px;
            font-size: 16px;
            font-family: "VWHead-Bold", sans-serif;
            position: relative;

            a{
                text-decoration: none;
                outline: none !important;
                padding-right: 15px;
                position: relative;
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -moz-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

            > .text {
                padding-left: 15px;
                color: #001E50;
            }
        }

        .navbar-greetings{
          font-family: 'VWHead-Regular';
          font-size: 24px;
          line-height: 29px;
          display: flex;
          align-items: center;
          color: #001E50;
        }

        .scroll-outer{
            height: auto;
            margin-bottom: 0px;
            margin-right: 0px;
            max-height: 404px;

            .scroll-content.scroll-scrolly_visible {
              left: -12px;
              margin-left: 12px;
            }
        }

        .scroll-wrapper {
            overflow: hidden!important;
            padding: 0!important;
            position: relative;

            > .scroll-content {
                border: none!important;
                box-sizing: content-box!important;
                height: auto;
                left: 0;
                margin: 0;
                max-height: none;
                max-width: none!important;
                overflow: scroll!important;
                padding: 0;
                position: relative!important;
                top: 0;
                width: auto!important;
            }
        }

        #accordion-mbl-menu {
          margin: 0;

          .panel {
            box-shadow: none !important;
            background-color: transparent;
            border-radius: 0;
            border: 0;
            margin-bottom: 0;

            > button.collapsed {
              color: #001e50;

              > .icon{
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
              }
            }

            > button.not-collapsed > .icon {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            > button {
              margin: 0px;
              padding: 0px;
              width: 100%;
              height: 55px;
              font-size: 20px;
              font-family: "VWHead-Bold";
              font-weight: normal;
              color: #2f3538;
              text-decoration: none;
              outline: none !important;
              border-bottom: 1px solid #dee1e3;
              padding-right: 15px;
              position: relative;
              display: -webkit-box;
              display: -webkit-flex;
              display: -moz-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
              -moz-box-align: center;
              -ms-flex-align: center;
              align-items: center;

              > .icon {
                width: 20px;
                height: 20px;
                fill: currentColor;
                -webkit-transition: all 350ms ease;
                transition: all 350ms ease;
                position: absolute;
                right: 15px;
                top: auto;
              }

              .collapse.in {
                display: block;
              }
            }
          }
        }

        .login-section {
            height: 36px;
            position: fixed;
            bottom: 56px;
            width: 100%;

            a {
                font-family: "VWText-Regular";
                color: #000000;
                font-size: 14px;
                height: 100%;
                width: 100%;

                img.icon {
                  position: relative;
                  top: -5px;
                  width: 24px;
                  height: 24px;
                }

                .text-account {
                  padding-left: 5px;
                  position: relative;
                  top: 2px;
                }
            }
        }
      }

      #remove-fears-header ~ #menu-header {
        height: -webkit-calc(100% - 85px);
        height: -moz-calc(100% - 85px);
        height: calc(100% - 85px);
      }

      #menu-header.scroll-content.scroll-scrolly_visible {
        padding-right: 8px;
      }
    }

我知道我放了很多代码，但如果有人能指导我怎么做，我真的有这个：

在此处输入图像描述

但我想做到这一点：

在此处输入图像描述

另外我无法做的是所选菜单带有下划线

非常感谢您提前

标签： cssvue.js