可直接拿来用
<template>
<div class="tips">
<ul class="tab">
<li
v-for="(tabItem, index) of tabContent"
:key="'tabItem' + index"
:class="[
index === tabActiveItem ? 'tabActive' : '',
{ oneTab: isTab },
]"
@click="tabClick(index)"
>
{{ tabItem }}
</li>
</ul>
<div v-if="tabActiveItem === 0">左边的页签</div>
<div v-if="tabActiveItem === 1">右边的页签</div>
<div class="button-box">
<div @click="next()" class="button link-button">下一步</div>
</div>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
// 页签名称
tabContent: ["左边页签", "右边页签"],
// 页签活动下标
tabActiveItem: 0,
isTab: false, //标签为1时,为true(nice!)
};
},
methods: {
// 切换页签
tabClick(index) {
this.tabActiveItem = index;
},
},
};
</script>
<style lang='scss' scoped>
.tips {
.bai {
height: 2rem;
}
.tab {
width: 100%;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
// padding-top: 1rem;
// padding-bottom: 1rem;
li {
width: 50%;
height: 1.43rem;
font-size: 0.48rem;
font-weight: 500;
color: #666666;
display: flex;
justify-content: center;
align-items: center;
}
.tabActive {
color: #e60027;
font-weight: bold;
position: relative;
}
.oneTab {
left: -25%;
}
.tabActive::after {
content: "";
display: block;
clear: both;
position: absolute;
bottom: 1px;
left: 50%;
transform: translateX(-0.36rem);
width: 0.72rem;
height: 0.09rem;
background-color: #e60027;
border-radius: 0.09rem 0.09rem 0 0;
}
}
/* 下一步 */
.button-box {
position: fixed;
height: 1.44rem;
position: fixed;
z-index: 999;
bottom: 0rem;
background-color: #fff;
padding-top: 0.2rem;
width: 100%;
border: 1px solid #fff;
}
.button {
width: 9.87rem;
height: 1.23rem;
background: #ccc;
border-radius: 0.6rem;
line-height: 1.23rem;
text-align: center;
font-size: 0.5rem;
color: #f9f9f9;
font-size: 500;
margin: 0 auto;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.link-button {
text-decoration: none;
display: block;
background: #e60027;
color: #fff;
}
}
</style>