lg_frontend/components/TabItem.vue

61 lines
999 B
Vue

<template>
<div class="TabItem" :class="{ selected }" v-on="$listeners" v-bind="$attrs">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'TabItem',
components: {},
mixins: [],
props: {
selected: {
type: Boolean,
default: false
}
},
data() {
return {}
},
computed: {},
watch: {},
created() {
},
beforeDestroy() {
},
mounted() {
},
methods: {},
}
</script>
<style lang='less' scoped>
@import "../assets/styles/mixin";
.TabItem {
.bg("~/assets/images/sel.png");
width: 64px;
height: 23px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.7;
font-family: MicrosoftYaHei;
font-size: 12px;
color: #08EBF5;
letter-spacing: 0;
text-align: center;
font-weight: 400;
line-height: 23px;
cursor: pointer;
&.selected {
.bg("~/assets/images/sel备份.png");
color: #08EBF5;
}
&:hover {
.bg("~/assets/images/sel备份.png");
color: #08EBF5;
}
}
</style>