|
|
|
|
@ -1,74 +1,70 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-row :gutter="40" class="panel-group">
|
|
|
|
|
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #8163f9; /* fallback for old browsers */
|
|
|
|
|
background: -webkit-linear-gradient(to right, #5565ec, #8163f9); /* Chrome 10-25, Safari 5.1-6 */
|
|
|
|
|
background: linear-gradient(to right, #5565ec, #8163f9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
|
|
">
|
|
|
|
|
<el-col :xs="12" :sm="12" :lg="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">
|
|
|
|
|
<div class="card-panel-text" style="font-family: '微软雅黑'">
|
|
|
|
|
234
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;font-size:18px">
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;font-size:16px">
|
|
|
|
|
预约参观总人次
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #02d2b0; /* fallback for old browsers */
|
|
|
|
|
background: -webkit-linear-gradient(to right, #0fc4cb, #02d2b0); /* Chrome 10-25, Safari 5.1-6 */
|
|
|
|
|
background: linear-gradient(to right, #0fc4cb, #02d2b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
|
|
">
|
|
|
|
|
<el-col :xs="12" :sm="12" :lg="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">
|
|
|
|
|
<div class="card-panel-text" style="font-family: '微软雅黑'">
|
|
|
|
|
204
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;font-size:18px">
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;font-size:16px">
|
|
|
|
|
入场参观总人次
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" /> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #3464ec; /* fallback for old browsers */
|
|
|
|
|
background: -webkit-linear-gradient(to right, #3f86fa, #3464ec); /* Chrome 10-25, Safari 5.1-6 */
|
|
|
|
|
background: linear-gradient(to right, #3f86fa, #3464ec); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
|
|
">
|
|
|
|
|
<el-col :xs="12" :sm="12" :lg="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">
|
|
|
|
|
<div class="card-panel-text" style="font-family: '微软雅黑'">
|
|
|
|
|
305
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;font-size:18px">
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;font-size:16px">
|
|
|
|
|
预约活动总人次
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" /> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #1289d9; /* fallback for old browsers */
|
|
|
|
|
background: -webkit-linear-gradient(to right, #17b8ee, #1289d9); /* Chrome 10-25, Safari 5.1-6 */
|
|
|
|
|
background: linear-gradient(to right, #17b8ee, #1289d9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
|
|
">
|
|
|
|
|
<el-col :xs="12" :sm="12" :lg="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">
|
|
|
|
|
<div class="card-panel-text" style="font-family: '微软雅黑'">
|
|
|
|
|
267
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;font-size:18px">
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;font-size:16px">
|
|
|
|
|
参与活动总人次
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" /> -->
|
|
|
|
|
@ -146,19 +142,19 @@ background: linear-gradient(to right, #17b8ee, #1289d9); /* W3C, IE 10+/ Edge, F
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-people {
|
|
|
|
|
color: #40c9c6;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-message {
|
|
|
|
|
color: #36a3f7;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-money {
|
|
|
|
|
color: #f4516c;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-shopping {
|
|
|
|
|
color: #34bfa3
|
|
|
|
|
color: #fff
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-panel-icon-wrapper {
|
|
|
|
|
@ -171,7 +167,7 @@ background: linear-gradient(to right, #17b8ee, #1289d9); /* W3C, IE 10+/ Edge, F
|
|
|
|
|
|
|
|
|
|
.card-panel-icon {
|
|
|
|
|
float: left;
|
|
|
|
|
font-size: 48px;
|
|
|
|
|
font-size: 42px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-panel-description {
|
|
|
|
|
@ -182,9 +178,9 @@ background: linear-gradient(to right, #17b8ee, #1289d9); /* W3C, IE 10+/ Edge, F
|
|
|
|
|
.card-panel-text {
|
|
|
|
|
line-height: 25px;
|
|
|
|
|
color: rgb(255, 255, 255);
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
font-family: "微软雅黑";
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-panel-num {
|
|
|
|
|
|