|
@ -1,9 +1,9 @@ |
|
|
<template> |
|
|
<template> |
|
|
<el-row :gutter="40" class="panel-group"> |
|
|
|
|
|
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
|
|
|
|
|
<div class="card-panel" @click="handleSetLineChartData('newVisitis')"> |
|
|
|
|
|
|
|
|
<el-row :gutter="20" class="panel-group" type="flex" justify="space-between"> |
|
|
|
|
|
<el-col class="card-panel-col"> |
|
|
|
|
|
<div class="card-panel danganzongliang" @click="handleSetLineChartData('newVisitis')"> |
|
|
<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="danganzongliang" 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"> |
|
@ -13,10 +13,10 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-col> |
|
|
</el-col> |
|
|
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
|
|
|
|
|
<div class="card-panel" @click="handleSetLineChartData('messages')"> |
|
|
|
|
|
|
|
|
<el-col class="card-panel-col"> |
|
|
|
|
|
<div class="card-panel danganhezongliang" @click="handleSetLineChartData('messages')"> |
|
|
<div class="card-panel-icon-wrapper icon-message"> |
|
|
<div class="card-panel-icon-wrapper icon-message"> |
|
|
<svg-icon icon-class="message" class-name="card-panel-icon" /> |
|
|
|
|
|
|
|
|
<svg-icon icon-class="danganhezongliang" 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"> |
|
@ -26,10 +26,10 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-col> |
|
|
</el-col> |
|
|
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
|
|
|
|
|
<div class="card-panel" @click="handleSetLineChartData('purchases')"> |
|
|
|
|
|
|
|
|
<el-col class="card-panel-col"> |
|
|
|
|
|
<div class="card-panel quanbushebei" @click="handleSetLineChartData('purchases')"> |
|
|
<div class="card-panel-icon-wrapper icon-money"> |
|
|
<div class="card-panel-icon-wrapper icon-money"> |
|
|
<svg-icon icon-class="money" class-name="card-panel-icon" /> |
|
|
|
|
|
|
|
|
<svg-icon icon-class="quanbushebei" 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"> |
|
@ -39,10 +39,23 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-col> |
|
|
</el-col> |
|
|
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
|
|
|
|
|
<div class="card-panel" @click="handleSetLineChartData('shoppings')"> |
|
|
|
|
|
|
|
|
<el-col class="card-panel-col"> |
|
|
|
|
|
<div class="card-panel zaixianshebei" @click="handleSetLineChartData('shoppings')"> |
|
|
<div class="card-panel-icon-wrapper icon-shopping"> |
|
|
<div class="card-panel-icon-wrapper icon-shopping"> |
|
|
<svg-icon icon-class="shopping" class-name="card-panel-icon" /> |
|
|
|
|
|
|
|
|
<svg-icon icon-class="zaixianshebei" class-name="card-panel-icon" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="card-panel-description"> |
|
|
|
|
|
<div class="card-panel-text"> |
|
|
|
|
|
Shoppings |
|
|
|
|
|
</div> |
|
|
|
|
|
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
<el-col class="card-panel-col"> |
|
|
|
|
|
<div class="card-panel lixianshebei" @click="handleSetLineChartData('shoppings')"> |
|
|
|
|
|
<div class="card-panel-icon-wrapper icon-shopping"> |
|
|
|
|
|
<svg-icon icon-class="lixianshebei" 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"> |
|
@ -72,50 +85,53 @@ export default { |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.panel-group { |
|
|
.panel-group { |
|
|
margin-top: 18px; |
|
|
|
|
|
|
|
|
|
|
|
.card-panel-col { |
|
|
.card-panel-col { |
|
|
margin-bottom: 32px; |
|
|
margin-bottom: 32px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.card-panel { |
|
|
.card-panel { |
|
|
height: 108px; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
height: 100px; |
|
|
|
|
|
// height: 108px; |
|
|
|
|
|
// cursor: pointer; |
|
|
font-size: 12px; |
|
|
font-size: 12px; |
|
|
position: relative; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
color: #666; |
|
|
color: #666; |
|
|
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: #40c9c6; |
|
|
|
|
|
|
|
|
// background: #fff; |
|
|
|
|
|
background: linear-gradient(180deg, rgba(51,159,210,0.5000) 0%, rgba(56,158,225,0) 100%); |
|
|
|
|
|
border-top: 2px #21AAE1 solid; |
|
|
|
|
|
opacity: 0.86; |
|
|
|
|
|
// 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-danganzongliang { |
|
|
|
|
|
color: #21AAE1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.icon-message { |
|
|
|
|
|
|
|
|
.icon-danganhezongliang { |
|
|
color: #36a3f7; |
|
|
color: #36a3f7; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|