157 lines
3.1 KiB
Vue
157 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<div class="content">
|
||
|
|
<div class="tab-box">
|
||
|
|
<div class="tab_" :class="{active:index== tabindex }" @click="getindex(index)" v-for="(item,index) in tabs"
|
||
|
|
:key="index">
|
||
|
|
{{ item.name }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="top-box">
|
||
|
|
<div class="crad-box" id="d1">
|
||
|
|
<div class="number_">会员人数</div>
|
||
|
|
<div class="title_">888888</div>
|
||
|
|
</div>
|
||
|
|
<div class="crad-box" id="d2">
|
||
|
|
<div class="number_">注销会员数</div>
|
||
|
|
<div class="title_">888888</div>
|
||
|
|
</div>
|
||
|
|
<div class="crad-box" id="d3">
|
||
|
|
<div class="number_">会员总积分</div>
|
||
|
|
<div class="title_">888888</div>
|
||
|
|
</div>
|
||
|
|
<div class="crad-box" id="d4">
|
||
|
|
<div class="number_">消耗积分</div>
|
||
|
|
<div class="title_">888888</div>
|
||
|
|
</div>
|
||
|
|
<div class="crad-box" id="d5">
|
||
|
|
<div class="number_">会员累计充值</div>
|
||
|
|
<div class="title_">888888</div>
|
||
|
|
</div>
|
||
|
|
<div class="crad-box" id="d6">
|
||
|
|
<div class="number_">会员总余额</div>
|
||
|
|
<div class="title_">888888</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="conton-box">
|
||
|
|
<div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
tabindex: 0,
|
||
|
|
tabs: [
|
||
|
|
{
|
||
|
|
name: "会员统计",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "会员画像",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
getindex(index) {
|
||
|
|
this.tabindex = index
|
||
|
|
if (index == 0) {
|
||
|
|
|
||
|
|
} else if (index == 1) {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
|
||
|
|
.content {
|
||
|
|
background: #f5f7f8;
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-box {
|
||
|
|
width: 100%;
|
||
|
|
height: 40px;
|
||
|
|
background: #fff;
|
||
|
|
display: flex;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.top-box{
|
||
|
|
width: 98%;
|
||
|
|
border-radius: 10px;
|
||
|
|
background: #fff;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 15px;
|
||
|
|
margin: 15px auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab_ {
|
||
|
|
width: 75px;
|
||
|
|
height: 100%;
|
||
|
|
//border-bottom: 2px solid #FF770F;
|
||
|
|
display: flex;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #999999;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-left: 50px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active {
|
||
|
|
border-bottom: 2px solid #FF770F !important;
|
||
|
|
color: #FF770F !important;
|
||
|
|
}
|
||
|
|
.crad-box{
|
||
|
|
width: 258px;
|
||
|
|
height: 80px;
|
||
|
|
margin-right: 20px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 15px;
|
||
|
|
}
|
||
|
|
.number_{
|
||
|
|
font-size: 14px;
|
||
|
|
color: #333333;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
.title_{
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
#d1{
|
||
|
|
background: url(../../assets/images/bz1.png) no-repeat;
|
||
|
|
background-size:100% 100%;
|
||
|
|
}
|
||
|
|
#d2{
|
||
|
|
background: url(../../assets/images/bz2.png) no-repeat;
|
||
|
|
background-size:100% 100%;
|
||
|
|
}
|
||
|
|
#d3{
|
||
|
|
background: url(../../assets/images/bz3.png) no-repeat;
|
||
|
|
background-size:100% 100%;
|
||
|
|
}
|
||
|
|
#d4{
|
||
|
|
background: url(../../assets/images/bz4.png) no-repeat;
|
||
|
|
background-size:100% 100%;
|
||
|
|
}
|
||
|
|
#d5{
|
||
|
|
background: url(../../assets/images/bz5.png) no-repeat;
|
||
|
|
background-size:100% 100%;
|
||
|
|
}
|
||
|
|
#d6{
|
||
|
|
background: url(../../assets/images/bz6.png) no-repeat;
|
||
|
|
background-size:100% 100%;
|
||
|
|
}
|
||
|
|
</style>
|