|
|
<template>
|
|
|
|
|
|
|
|
|
|
|
|
<el-row class="panel-group">
|
|
|
|
|
|
<el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
|
|
|
style="background: #FDC830; /* fallback for old browsers */
|
|
|
background: -webkit-linear-gradient(to right, #F37335, #FDC830); /* Chrome 10-25, Safari 5.1-6 */
|
|
|
background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
|
|
|
<div class="card-panel">
|
|
|
<div class="card-panel-icon-wrapper icon-people">
|
|
|
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
|
|
</div>
|
|
|
<div class="card-panel-description">
|
|
|
<div class="card-panel-text" style="font-family: '微软雅黑'">
|
|
|
预约参观人次
|
|
|
</div>
|
|
|
<div class="card-panel-text">
|
|
|
<p>总人数：{{totaldata.visit_total.total}}</p>
|
|
|
<p>今 日：{{totaldata.visit_total.today}}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
|
|
|
style="background: #FFB75E; /* fallback for old browsers */
|
|
|
background: -webkit-linear-gradient(to right, #ED8F03, #FFB75E); /* Chrome 10-25, Safari 5.1-6 */
|
|
|
background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
|
|
|
<div class="card-panel" style="background-color: transparent;" @click="handleRoute('box')">
|
|
|
<div class="card-panel-icon-wrapper icon-message">
|
|
|
<svg-icon icon-class="user-group" class-name="card-panel-icon" />
|
|
|
</div>
|
|
|
<div class="card-panel-description">
|
|
|
<div class="card-panel-text" style="font-family: '微软雅黑';margin-bottom:5px">
|
|
|
入场参观人次
|
|
|
</div>
|
|
|
<div class="card-panel-text">
|
|
|
<p>总人数：{{totaldata.visit_enter.total}}</p>
|
|
|
<p>今 日：{{totaldata.visit_enter.today}}</p>
|
|
|
<p>当日核销比：{{totaldata.visit_enter.per}}</p>
|
|
|
</div>
|
|
|
<!-- <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
|
|
|
style="background: #ffe259; /* fallback for old browsers */
|
|
|
background: -webkit-linear-gradient(to right, #ffa751, #ffe259); /* Chrome 10-25, Safari 5.1-6 */
|
|
|
background: linear-gradient(to right, #ffa751, #ffe259); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
|
|
|
<div class="card-panel" @click="handleRoute('tool')">
|
|
|
<div class="card-panel-icon-wrapper icon-money">
|
|
|
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
|
|
</div>
|
|
|
<div class="card-panel-description">
|
|
|
<div class="card-panel-text" style="font-family: '微软雅黑'">
|
|
|
预约活动人次
|
|
|
</div>
|
|
|
<div class="card-panel-text" style="color: #fff;font-size:16px">
|
|
|
<p>总人数：{{totaldata.activity_total.total}}</p>
|
|
|
<p>今 日：{{totaldata.activity_total.today}}</p>
|
|
|
</div>
|
|
|
<!-- <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
|
|
|
style="background: #fe8c00; /* fallback for old browsers */
|
|
|
background: -webkit-linear-gradient(to right, #f83600, #fe8c00); /* Chrome 10-25, Safari 5.1-6 */
|
|
|
background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
|
|
|
<div class="card-panel" @click="handleRoute('user')">
|
|
|
<div class="card-panel-icon-wrapper icon-shopping">
|
|
|
<svg-icon icon-class="user-group" class-name="card-panel-icon" />
|
|
|
</div>
|
|
|
<div class="card-panel-description">
|
|
|
<div class="card-panel-text" style="font-family: '微软雅黑'">
|
|
|
预约活动人次
|
|
|
</div>
|
|
|
<div class="card-panel-text" style="color: #fff;font-size:16px">
|
|
|
<p>总人数：{{totaldata.activity_enter.total}}</p>
|
|
|
<p>今 日：{{totaldata.activity_enter.today}}</p>
|
|
|
</div>
|
|
|
<!-- <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" /> -->
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import CountTo from 'vue-count-to'
|
|
|
|
|
|
export default {
|
|
|
props: {
|
|
|
countsData: {
|
|
|
type: Object
|
|
|
},
|
|
|
totaldata: {
|
|
|
type: Object,
|
|
|
default: {
|
|
|
"visit_total": {
|
|
|
"total": 0,
|
|
|
"today": 0
|
|
|
},
|
|
|
"visit_enter": {
|
|
|
"total": 0,
|
|
|
"today": 0,
|
|
|
"per": 0
|
|
|
},
|
|
|
"activity_total": {
|
|
|
"total": 0,
|
|
|
"today": 0
|
|
|
},
|
|
|
"activity_enter": {
|
|
|
"total": 0,
|
|
|
"today": 0
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
CountTo
|
|
|
},
|
|
|
methods: {
|
|
|
handleRoute(type) {
|
|
|
this.$emit('handleRoute', type)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.panel-group {
|
|
|
// margin-top: 18px;
|
|
|
margin-left: -2% !important;
|
|
|
margin-right: -3% !important;
|
|
|
|
|
|
.card-panel-col {
|
|
|
margin: 0 2%;
|
|
|
|
|
|
margin-bottom: 32px;
|
|
|
}
|
|
|
|
|
|
.card-panel {
|
|
|
height: 130px;
|
|
|
cursor: pointer;
|
|
|
font-size: 12px;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
color: #666;
|
|
|
text-align: center;
|
|
|
// background: #fff;
|
|
|
// box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
|
|
// border-color: rgba(0, 0, 0, .05);
|
|
|
|
|
|
&:hover {
|
|
|
.card-panel-icon-wrapper {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
// .icon-people {
|
|
|
// background: #40c9c6;
|
|
|
// }
|
|
|
|
|
|
// .icon-message {
|
|
|
// background: #36a3f7;
|
|
|
// }
|
|
|
|
|
|
// .icon-money {
|
|
|
// background: #f4516c;
|
|
|
// }
|
|
|
|
|
|
// .icon-shopping {
|
|
|
// background: #34bfa3
|
|
|
// }
|
|
|
}
|
|
|
|
|
|
.icon-people {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.icon-message {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.icon-money {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.icon-shopping {
|
|
|
color: #fff
|
|
|
}
|
|
|
|
|
|
.card-panel-icon-wrapper {
|
|
|
float: right;
|
|
|
margin: 22px 0 0 14px;
|
|
|
padding: 16px;
|
|
|
transition: all 0.38s ease-out;
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
|
|
|
.card-panel-icon {
|
|
|
float: left;
|
|
|
font-size: 42px;
|
|
|
}
|
|
|
|
|
|
.card-panel-description {
|
|
|
// float: right;
|
|
|
font-weight: bold;
|
|
|
margin: 16px 12px;
|
|
|
|
|
|
.card-panel-text {
|
|
|
line-height: 25px;
|
|
|
color: rgb(255, 255, 255);
|
|
|
font-size: 26px;
|
|
|
margin-bottom: 20px;
|
|
|
width: 70%;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
text-align: left;
|
|
|
font-size: 19px;
|
|
|
}
|
|
|
|
|
|
.card-panel-num {
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width:550px) {
|
|
|
.card-panel-description {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.card-panel-icon-wrapper {
|
|
|
float: none !important;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
margin: 0 !important;
|
|
|
|
|
|
.svg-icon {
|
|
|
display: block;
|
|
|
margin: 14px auto !important;
|
|
|
float: none !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
