<!--
|
* @Author: zxq
|
* @Date: 2022-01-20 11:01:35
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-01-20 17:31:07
|
* @Description: Description
|
* @FilePath: \ebike_plat\src\components\fl-tabs.vue
|
-->
|
<template>
|
<div class='tabs_page'>
|
<div class="container">
|
<div class="tabs" :style='{"min-width":minWidth}'>
|
<div :class='{"tabs_item":true,"tabs_item_active":currentID==item.id}' v-for='item in containerList' @click='tabsClick(item.id)' :key='item.id'>
|
{{item.name}}
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props:{
|
containerList:{
|
type:Array,
|
default:()=>{
|
return [
|
{id:1,name:'业务指标'},
|
{id:2,name:'财务指标'},
|
]
|
}
|
},
|
value:'',
|
'minWidth':{
|
type:Number,
|
default:222
|
}
|
},
|
watch: {
|
value(value) {
|
this.setCurrentName(value);
|
},
|
},
|
data() {
|
return {
|
currentID:this.value
|
};
|
},
|
created() {
|
|
},
|
mounted() {
|
if(this.currentID){
|
this.activeID =this.containerList[0].id;
|
}
|
|
},
|
methods: {
|
tabsClick(id){
|
this.setCurrentName(id)
|
this.$emit('tab-click',id);
|
},
|
setCurrentName(value) {
|
this.currentID = value;
|
this.$emit('input', value);
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.tabs_page{
|
.tabs {
|
width: 222px;
|
height: 44px;
|
padding: 4px 10px;
|
background: #FFFFFF;
|
box-shadow: 0px 6px 20px 0px rgba(19, 23, 169, 0.1);
|
border-radius: 22px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
cursor: pointer;
|
}
|
.tabs_item{
|
width: 96px;
|
height: 36px;
|
text-align: center;
|
line-height: 36px;
|
font-size: 16px;
|
color: rgba(0, 0, 0, 0.85);
|
}
|
.tabs_item_active{
|
width: 96px;
|
height: 36px;
|
text-align: center;
|
line-height: 36px;
|
color: #fff;
|
background: #207EFF;
|
border-radius: 18px;
|
}
|
.tab {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 54px;
|
width: 200px;
|
font-size: 1.25rem;
|
font-weight: 500;
|
border-radius: 99px;
|
cursor: pointer;
|
transition: color 0.15s ease-in;
|
}
|
|
.notification {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 2rem;
|
height: 2rem;
|
margin-left: 0.75rem;
|
border-radius: 50%;
|
background-color: var(--secondary-color);
|
transition: 0.15s ease-in;
|
}
|
|
input[type=radio]:checked + label {
|
color: var(--primary-color);
|
}
|
input[type=radio]:checked + label > .notification {
|
background-color: var(--primary-color);
|
color: #fff;
|
}
|
|
input[id=radio-1]:checked ~ .glider {
|
transform: translateX(0);
|
}
|
|
input[id=radio-2]:checked ~ .glider {
|
transform: translateX(100%);
|
}
|
|
input[id=radio-3]:checked ~ .glider {
|
transform: translateX(200%);
|
}
|
|
|
.glider {
|
position: absolute;
|
display: flex;
|
height: 54px;
|
width: 200px;
|
background-color: var(--secondary-color);
|
z-index: 1;
|
border-radius: 99px;
|
transition: 0.25s ease-out;
|
}
|
|
@media (max-width: 700px) {
|
.tabs {
|
transform: scale(0.6);
|
}
|
}
|
}
|
</style>
|
