tab 切换样式

 

<ul>

          <li v-for="(item, index) in titleList0" :key="index">

            <div class="liName" :class="{activeLiName: showLiName == index}" @click="clickLiName(index)">{{ item.name }}</div>

          </li>

        </ul>

titleList0: [

        {

          name: "总平面图",

        },

        {

          name: "层平面图",

        },

        {

          name: "水源分布图",

        },

        {

          name: "方位及行车路线",

        },

        {

          name: "战斗部署图",

        },

      ],

ul {

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        align-items: center;

        li {

          // width: 79px;

          height: 18px;

          font-size: 20px;

          line-height: 18px;

          font-family: Source Han Sans CN, Source Han Sans CN-Medium;

          font-weight: 500;

          color: #5d7990;

          padding: 0px 10px;

          display: flex;

          flex-direction: row;

          justify-content: space-between;

          align-items: center;

          border-right: 2px solid #015d8d;

          .liName {

            padding: 4px 0;

            cursor: pointer;

          }

          .line {

            margin-left: 10px;

            width: 2px;

            height: 18px;

            background: #015d8d;

          }

        }

        li:last-child {

          border:none;

        }

        .activeLiName {

          color: #94C5FF;

          border-bottom: 1px solid #94C5FF;

        }

      }