vue tab切换显示内容

<template><!-- 数智会务中心 --><div id="clubCenter"><div class="technicalSupport clubCenterItem5"><img src="../images/szhwzx/szhwzx5.png" class="technicalSupportImg" /><div class="technicalSupportPanel"><div class="technicalSupportContent"><!-- 选项卡 --><div class="technicalSupportTabPanel flex-start-between"><divclass="technicalSupportTabBorder "v-for="(item,index) in technicalSupportTabLiat":key="index" :class="{tstActive : idx == index}" @click="changeNav(index)"><div class="technicalSupportTab"><div class="flex-center-start technicalSupportTabTitle"><img class="technicalSupportTabImg" :src="item.img" alt /><span class="technicalSupportTabIext">{{item.title}}</span></div><divclass="flex-center-start technicalSupportTabContent"v-for="(item1,index1) in item.contentList":key="index1"><img class="subTechnicalSupportTabImg" src="@/images/szhwzx/jsbz4.png" alt /><span class="subTechnicalSupportTabIext">{{item1}}</span></div><img src="@/images/szhwzx/jsbz5.png" class="bottomRightCornerIcon" alt /></div></div></div><!-- 内容 --><div class="technicalSupportItemPanel"><divclass="technicalSupportItem"v-for="(item,index) in technicalSupportItemImg":key="index"   :class="{tSItemActive : idx == index}" ><img :src="item.img" alt /></div></div></div></div></div></div>
</template>
<script>
export default {name: "clubCenter",data() {return {idx:0,technicalSupportTabLiat: [{title: "会前",img: require("@/images/szhwzx/jsbz1.png"),contentList: ["活动营销", "注册报名", "活动邀约"],},{title: "会中",img: require("@/images/szhwzx/jsbz2.png"),contentList: ["现场注册", "电子签到", "趣味互动", "商务社交"],},{title: "会后",img: require("@/images/szhwzx/jsbz3.png"),contentList: ["数据统计"],},],technicalSupportItemImg: [{ img: require("@/images/szhwzx/jsbzC1.png") },{ img: require("@/images/szhwzx/jsbzC2.png") },{ img: require("@/images/szhwzx/jsbzC3.png") },],};},methods:{changeNav(index){this.idx=index}}
};
</script>
<style>
#clubCenter {font-family: PingFangSC-Medium, PingFang SC;
}
#clubCenter .technicalSupportItem img {width: 100%;height: 100%;
}/* 技术保障样式开始 */
#clubCenter .clubCenterItem4 {margin-bottom: 1rem;
}
#clubCenter .technicalSupportPanel {margin: 0.4rem 0 1.5rem 0;padding: 0 0.4rem;
}
#clubCenter .technicalSupportContent {background: rgba(255, 255, 255, 1);box-shadow: 0rem 0.04rem 0.08rem 0rem rgba(203, 219, 243, 0.16);border-radius: 0.04rem;border: 1px solid rgba(215, 231, 255, 1);padding: 0.38rem 0 0.48rem 0;
}
#clubCenter .technicalSupportTabPanel {padding: 0 0.3rem;
}
#clubCenter .technicalSupportItemPanel {border-top: 0.08rem solid rgba(247, 248, 253, 1);padding: 0.55rem 0.22rem 0 0.22rem;
}
#clubCenter .technicalSupportTabImg {width: 0.42rem;height: 0.48rem;
}
#clubCenter .technicalSupportTabIext {font-size: 0.28rem;font-weight: 500;color: rgba(13, 18, 55, 1);padding-left: 0.16rem;
}
#clubCenter .subTechnicalSupportTabImg {width: 0.2rem;height: 0.2rem;
}
#clubCenter .subTechnicalSupportTabIext {font-size: 0.24rem;font-weight: 400;color: rgba(13, 18, 55, 1);padding-left: 0.15rem;
}
#clubCenter .technicalSupportTab {width: 1.9rem;height: 3.2rem;background: rgba(255, 255, 255, 1);box-shadow: 0px 4px 8px 0px rgba(203, 219, 243, 0.16);border-radius: 4px;border: 1px solid rgba(215, 231, 255, 1);padding: 0.24rem 0 0 0.25rem;position: relative;
}
#clubCenter .bottomRightCornerIcon {width: 0.56rem;height: 0.56rem;position: absolute;right: 0;bottom: 0;display: none;
}
#clubCenter .technicalSupportTab:nth-child(2) {margin: 0 0.2px;
}
#clubCenter .technicalSupportTabTitle {margin-bottom: 0.32rem;
}
#clubCenter .technicalSupportTabContent {margin-bottom: 0.14rem;
}#clubCenter .technicalSupportTabBorder {padding: 0 0 0.4rem 0;border-bottom: 0.08rem solid transparent;
}
#clubCenter .tstActive {border-bottom: 0.08rem solid rgba(0, 100, 255, 1);
}
#clubCenter .tstActive .technicalSupportTab {box-shadow: -0.01rem 0.25rem 0.17rem -0.18rem rgba(160, 175, 198, 0.45);border: 1px solid rgba(0, 100, 255, 1);
}
#clubCenter .tstActive  .bottomRightCornerIcon{display: block;
}
#clubCenter .technicalSupportItem{display: none;
}
#clubCenter .tSItemActive{display: block;
}
/* 技术保障样式结束 */
</style>