vue 带图标的tab切换

<template>
  <div id="hItem4">
    <el-row>
      <el-col :span="24">
        <el-col :span="24">
          <div class="conferenceSchedulePanel">
            <div class="itemTitlePanel">
              <div class="itemTitle font-size-46">CONFERENCE SCHEDULE</div>
              <div class="itemSubTitle font-size-24">大会日程（直播间）</div>
            </div>
            <div class="conferenceScheduleContentPanel flex-start-start">
              <div class="conferenceScheduleContentLeft">
                <div class="left-top-line"></div>
                <div class="conferenceScheduleTabPanel">
                  <div
                    class="conferenceScheduleTabItem"
                    :class="{csActive : idx==index}"
                    v-for="(item,index) in csTabItem"
                    :key="index"
                    @click="changeTab(index)"
                  >
                    <div class="conferenceScheduleTabImgPanel flex-center-center">
     <!-- 图标切换显示 -->
                      <img class="conferenceScheduleTabImg" v-if="idx==index" :src="item.activeImg" alt />
                      <img class="conferenceScheduleTabImg" v-else :src="item.img" alt />
                    </div>
                    <div class="conferenceScheduleTabTextPanel flex-center-between">
                      <div class="conferenceScheduleTabArrowPanel flex-center-center">
                        <img
                          class="conferenceScheduleTabArrow conferenceScheduleTabArrowLeft"
                          src="@/images/home/item4/right_mint_green_arrow.png"
                          alt
                        />
                      </div>
                      <span class="conferenceScheduleTabText">{{item.text}}</span>
                      <div class="conferenceScheduleTabArrowPanel flex-center-center">
                        <img
                          class="conferenceScheduleTabArrow conferenceScheduleTabArrowRight"
                          src="@/images/home/item4/left_mint_green_arrow.png"
                          alt
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="conferenceScheduleContentRight">
                <div class="right-top-line"></div>
              </div>
            </div>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "hItem4",
  data() {
    return {
      idx: 0,
      csTabItem: [
        {
          img: require("@/images/home/item4/tab1.png"),
          activeImg: require("@/images/home/item4/active_tab1.png"),
          text: "大会日程",
        },
        {
          img: require("@/images/home/item4/tab2.png"),
          activeImg: require("@/images/home/item4/active_tab2.png"),
          text: "直播间",
        },
        {
          img: require("@/images/home/item4/tab3.png"),
          activeImg: require("@/images/home/item4/active_tab3.png"),
          text: "大会精彩视频",
        },
      ],
    };
  },
  methods: {
    changeTab(index) {
      this.idx = index;
    },
  },
};
</script>
<style lang="scss" scoped>
#hItem4 {
  .conferenceSchedulePanel {
    width: 10rem;
    margin: 0 auto;
  }
  .conferenceScheduleContentPanel {
    width: 100%;
    background: rgba(10, 24, 93, 1);
  }
  .conferenceScheduleContentLeft {
    width: 2rem;
    height: 100%;
    border-right: 1px solid rgba(235, 238, 245, 0.1);
  }
  .conferenceScheduleContentRight {
    width: 8rem;
    height: 100%;
  }
  .left-top-line,
  .right-top-line {
    width: 100%;
    height: 0.06rem;
    position: sticky;
    left: 0;
    top: 0;
  }
  .left-top-line {
    background: linear-gradient(
      270deg,
      rgba(43, 250, 211, 1) 0%,
      rgba(43, 250, 211, 1) 50%,
      rgba(255, 171, 79, 1) 100%
    );
  }
  .right-top-line {
    background: rgba(255, 171, 79, 1);
  }
  //   左侧样式
  .conferenceScheduleTabItem {
    width: 100%;
    height: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .conferenceScheduleTabItem:nth-child(2) {
    border-top: 0.01rem solid rgba(235, 238, 245, 0.1);
    border-bottom: 0.01rem solid rgba(235, 238, 245, 0.1);
  }

  .conferenceScheduleTabImg {
    width: 0.4rem;
    height: 0.4rem;
  }
  .conferenceScheduleTabTextPanel {
    width: 100%;
    padding-top: 0.14rem;
  }
  .conferenceScheduleTabArrowLeft {
    padding-left: 0.1rem;
  }
  .conferenceScheduleTabArrowRight {
    padding-right: 0.1rem;
  }
  .conferenceScheduleTabArrow {
    width: 0.08rem;
    height: 0.11rem;
    display: none;
  }
  .conferenceScheduleTabText {
    font-size: 0.24rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
  }
  //   tab选中
  .csActive .conferenceScheduleTabText {
    color: rgba(43, 250, 211, 1);
  }
  .csActive .conferenceScheduleTabArrow {
    display: block;
  }
}
</style>