|
|
|
|
@ -1,78 +1,79 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-row :gutter="40" class="panel-group">
|
|
|
|
|
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="margin-right:3%;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+ */
|
|
|
|
|
<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+ */
|
|
|
|
|
">
|
|
|
|
|
<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" />
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-panel-description">
|
|
|
|
|
<div class="card-panel-text">
|
|
|
|
|
预约参观
|
|
|
|
|
234
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;">
|
|
|
|
|
总 234 人次
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;font-size:18px">
|
|
|
|
|
预约参观总人次
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="margin-right:10.5%;background: #FFE000; /* fallback for old browsers */
|
|
|
|
|
background: -webkit-linear-gradient(to right, #799F0C, #FFE000); /* Chrome 10-25, Safari 5.1-6 */
|
|
|
|
|
background: linear-gradient(to right, #799F0C, #FFE000); /* 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: #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+ */
|
|
|
|
|
">
|
|
|
|
|
<div class="card-panel" style="background-color: transparent;" @click="handleRoute('box')">
|
|
|
|
|
<!-- <div class="card-panel-icon-wrapper icon-message">
|
|
|
|
|
<svg-icon icon-class="toolbox" class-name="card-panel-icon" />
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="card-panel-description">
|
|
|
|
|
<div class="card-panel-text" >
|
|
|
|
|
实际入场参观
|
|
|
|
|
<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">
|
|
|
|
|
204
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;">
|
|
|
|
|
总 194 人次
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;font-size:18px">
|
|
|
|
|
入场参观总人次
|
|
|
|
|
</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="margin-right:3%;background: #F2994A; /* fallback for old browsers */
|
|
|
|
|
background: -webkit-linear-gradient(to right, #F2C94C, #F2994A); /* Chrome 10-25, Safari 5.1-6 */
|
|
|
|
|
background: linear-gradient(to right, #F2C94C, #F2994A); /* 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: #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+ */
|
|
|
|
|
">
|
|
|
|
|
<div class="card-panel" @click="handleRoute('tool')">
|
|
|
|
|
<!-- <div class="card-panel-icon-wrapper icon-money">
|
|
|
|
|
<svg-icon icon-class="tool" class-name="card-panel-icon" />
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="card-panel-description">
|
|
|
|
|
<div class="card-panel-text">
|
|
|
|
|
预约活动
|
|
|
|
|
<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">
|
|
|
|
|
305
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;">
|
|
|
|
|
总 305 人次
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;font-size:18px">
|
|
|
|
|
预约活动总人次
|
|
|
|
|
</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: #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+ */
|
|
|
|
|
<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+ */
|
|
|
|
|
">
|
|
|
|
|
<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-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">
|
|
|
|
|
267
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;">
|
|
|
|
|
总 267 人次
|
|
|
|
|
<div class="card-panel-text" style="color: #fff;font-size:18px">
|
|
|
|
|
参与活动总人次
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" /> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
@ -101,16 +102,16 @@ background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, F
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
|
|
|
|
.panel-group {
|
|
|
|
|
margin-top: 18px;
|
|
|
|
|
margin-left:0px!important;
|
|
|
|
|
margin-right:0px!important;
|
|
|
|
|
// margin-top: 18px;
|
|
|
|
|
margin-left:-2%!important;
|
|
|
|
|
margin-right:-3%!important;
|
|
|
|
|
.card-panel-col {
|
|
|
|
|
// margin:0 2%;
|
|
|
|
|
margin-bottom: 32px;
|
|
|
|
|
margin: 32px 2%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-panel {
|
|
|
|
|
height: 108px;
|
|
|
|
|
height: 130px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
position: relative;
|
|
|
|
|
@ -126,21 +127,21 @@ background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, F
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-people {
|
|
|
|
|
background: #40c9c6;
|
|
|
|
|
}
|
|
|
|
|
// .icon-people {
|
|
|
|
|
// background: #40c9c6;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
.icon-message {
|
|
|
|
|
background: #36a3f7;
|
|
|
|
|
}
|
|
|
|
|
// .icon-message {
|
|
|
|
|
// background: #36a3f7;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
.icon-money {
|
|
|
|
|
background: #f4516c;
|
|
|
|
|
}
|
|
|
|
|
// .icon-money {
|
|
|
|
|
// background: #f4516c;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
.icon-shopping {
|
|
|
|
|
background: #34bfa3
|
|
|
|
|
}
|
|
|
|
|
// .icon-shopping {
|
|
|
|
|
// background: #34bfa3
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-people {
|
|
|
|
|
@ -160,8 +161,8 @@ background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, F
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-panel-icon-wrapper {
|
|
|
|
|
float: left;
|
|
|
|
|
margin: 14px 0 0 14px;
|
|
|
|
|
float: right;
|
|
|
|
|
margin: 22px 0 0 14px;
|
|
|
|
|
padding: 16px;
|
|
|
|
|
transition: all 0.38s ease-out;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
@ -175,13 +176,12 @@ background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, F
|
|
|
|
|
.card-panel-description {
|
|
|
|
|
// float: right;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin: 26px;
|
|
|
|
|
margin-left: 0px;
|
|
|
|
|
margin: 33px 0;
|
|
|
|
|
|
|
|
|
|
.card-panel-text {
|
|
|
|
|
line-height: 25px;
|
|
|
|
|
color: rgba(0, 0, 0, 0.45);
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
color: rgb(255, 255, 255);
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
font-family: "微软雅黑";
|
|
|
|
|
}
|
|
|
|
|
|