You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
2.8 KiB
130 lines
2.8 KiB
<template>
|
|
<div class="btns">
|
|
<div class="item" v-for="item in items" :class="{ 'item-active': activeText === item.text }" @click="btnClick(item)">
|
|
<div class="item__icon">
|
|
<SvgIcon :icon-class="item.icon"></SvgIcon>
|
|
</div>
|
|
|
|
<div class="item__text">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 60" preserveAspectRatio="xMinYMin meet">
|
|
<defs>
|
|
<linearGradient id="active-item-color" x1="50%" y1="0%" x2="50%" y2="100%">
|
|
<stop offset="0%" stop-color="#00000066"></stop>
|
|
<stop offset="100%" stop-color="#3eb29caa"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M 0 0 L 165 0 Q 180 0 180 15 L 180 45 Q 180 60 165 60 L 0 60 Q 30 30 0 0 z" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
|
|
</svg>
|
|
<p>{{ item.text }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SvgIcon from "@/components/SvgIcon"
|
|
export default {
|
|
components: {
|
|
SvgIcon
|
|
},
|
|
data() {
|
|
return {
|
|
activeText: "资产总览",
|
|
items: [
|
|
{ text: "资产总览", icon: "house", type: 1 },
|
|
{ text: "租赁数据", icon: "qiandai", type: 2 },
|
|
{ text: "安全巡检", icon: "weixiu", type: 3 },
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
btnClick (item) {
|
|
this.activeText = item.text
|
|
this.$store.commit("bigdata/SET_TYPE", item.type)
|
|
}
|
|
},
|
|
computed: {}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.btns {
|
|
position: absolute;
|
|
top: 20%;
|
|
left: 8px;
|
|
|
|
.item {
|
|
transition: all .2s;
|
|
cursor: pointer;
|
|
color: #8ecec2;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&__icon {
|
|
color: currentColor;
|
|
border-radius: 100%;
|
|
border: 2px dashed currentColor;
|
|
width: 50px;
|
|
height: 50px;
|
|
padding: 10px;
|
|
position: relative;
|
|
|
|
& > svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 100%;
|
|
border: 2px solid currentColor;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
&__text {
|
|
height: 60px;
|
|
line-height: 60px;
|
|
width: 180px;
|
|
letter-spacing: 1px;
|
|
color: currentColor;
|
|
position: relative;
|
|
& > svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: -2%;
|
|
bottom: 0;
|
|
}
|
|
& > p {
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
&-active {
|
|
color: #3eb29c;
|
|
|
|
& > .item__text svg {
|
|
transition: all .2s;
|
|
fill: url(#active-item-color);
|
|
}
|
|
}
|
|
}
|
|
.item + .item {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
</style>
|