实现内容切换,根据字体的多少适应
<template>
<div class="switch_list switch_bkgrd" style="padding:96px 0 0 167px;">
<ul class="tab-tilte__box">
<li @click="cur1=0" :class="{active:cur1==0}"><p>First section</p></li>
<li @click="cur1=1" :class="{active:cur1==1}"><p>Second section</p></li>
<li @click="cur1=2" :class="{active:cur1==2}"><p>Third section</p></li>
<li @click="cur1=3" :class="{active:cur1==3}"><p>Forth section</p></li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
cur1:0,
}
}
}
</script>
<style lang="scss">
.tab-tilte__box{
display: flex;
li{
height:28px;
margin-right:48px;
font-size: 14px;
color: #21252E;
cursor: pointer;
p{
height:28px;
border-bottom:3px solid transparent;
}
}
.active{
color: #00B259;
p{
border-bottom:3px solid #00B259;
}
}
}
</style>