master
lion 3 years ago
parent a191f0c985
commit b56635c199

@ -1,74 +1,70 @@
<template> <template>
<el-row :gutter="40" class="panel-group"> <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 */ <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, #5565ec, #8163f9); /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(to right, #F37335, #FDC830); /* 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+ */ 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">
<div class="card-panel-icon-wrapper icon-people"> <div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" /> <svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text"> <div class="card-panel-text" style="font-family: '微软雅黑'">
234 234
</div> </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> </div>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #02d2b0; /* fallback for old browsers */ <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, #0fc4cb, #02d2b0); /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(to right, #ED8F03, #FFB75E); /* 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+ */ 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" style="background-color: transparent;" @click="handleRoute('box')">
<div class="card-panel-icon-wrapper icon-message"> <div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="user-group" class-name="card-panel-icon" /> <svg-icon icon-class="user-group" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text"> <div class="card-panel-text" style="font-family: '微软雅黑'">
204 204
</div> </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>
<!-- <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" /> --> <!-- <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" /> -->
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #3464ec; /* fallback for old browsers */ <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, #3f86fa, #3464ec); /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(to right, #ffa751, #ffe259); /* 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+ */ 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" @click="handleRoute('tool')">
<div class="card-panel-icon-wrapper icon-money"> <div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="peoples" class-name="card-panel-icon" /> <svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text"> <div class="card-panel-text" style="font-family: '微软雅黑'">
305 305
</div> </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>
<!-- <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" /> --> <!-- <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" /> -->
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #1289d9; /* fallback for old browsers */ <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, #17b8ee, #1289d9); /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(to right, #f83600, #fe8c00); /* 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+ */ 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" @click="handleRoute('user')">
<div class="card-panel-icon-wrapper icon-shopping"> <div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="user-group" class-name="card-panel-icon" /> <svg-icon icon-class="user-group" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text"> <div class="card-panel-text" style="font-family: '微软雅黑'">
267 267
</div> </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>
<!-- <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" /> --> <!-- <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 { .icon-people {
color: #40c9c6; color: #fff;
} }
.icon-message { .icon-message {
color: #36a3f7; color: #fff;
} }
.icon-money { .icon-money {
color: #f4516c; color: #fff;
} }
.icon-shopping { .icon-shopping {
color: #34bfa3 color: #fff
} }
.card-panel-icon-wrapper { .card-panel-icon-wrapper {
@ -171,7 +167,7 @@ background: linear-gradient(to right, #17b8ee, #1289d9); /* W3C, IE 10+/ Edge, F
.card-panel-icon { .card-panel-icon {
float: left; float: left;
font-size: 48px; font-size: 42px;
} }
.card-panel-description { .card-panel-description {
@ -182,9 +178,9 @@ background: linear-gradient(to right, #17b8ee, #1289d9); /* W3C, IE 10+/ Edge, F
.card-panel-text { .card-panel-text {
line-height: 25px; line-height: 25px;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 22px; font-size: 28px;
margin-bottom: 12px; margin-bottom: 12px;
font-family: "微软雅黑";
} }
.card-panel-num { .card-panel-num {

@ -125,7 +125,7 @@
name: '25岁以上' name: '25岁以上'
} }
], ],
radiusArr: ['30%', '60%'], radiusArr: ['30%', '50%'],
dateRange: [{ dateRange: [{
checked: true, checked: true,
type: "week", type: "week",

Loading…
Cancel
Save