<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>
vue 带图标的tab切换
最新推荐文章于 2024-04-30 17:28:38 发布