cxc/yshopb2c-qd
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改首页样式

Browse Source
This commit is contained in:
Gao xiaosong
2021-01-16 23:55:37 +08:00
committed by xuwenbo
parent 9a6d2305f7
commit d28acf2829
5 changed files with 648 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/views/dashboard/PanelGroupT.vue
View File

@ -1,50 +1,72 @@
<template>
<el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="today" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">今日订单数</div>
<count-to :start-val="0" :end-val="count.todayCount" :duration="2600" class="card-panel-num" />
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="ic-yesterday" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">昨日订单数</div>
<count-to :start-val="0" :end-val="count.proCount" :duration="3000" class="card-panel-num" />
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="seven" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">近七天订单数</div>
<count-to :start-val="0" :end-val="count.lastWeekCount" :duration="3200" class="card-panel-num" />
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="monthlyview" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">本月订单数</div>
<count-to :start-val="0" :end-val="count.monthCount" :duration="3600" class="card-panel-num" />
</div>
</div>
</el-col>
</el-row>
<div class="divBox">
<el-row :gutter="24" class="dashboard-console-grid">
<el-col v-bind="grid" class="ivu-mb">
<el-card :bordered="false">
<router-link :to="{ path: '/user/index' }">
<i class="el-icon-user" style="color: #69c0ff" />
<p>会员总数</p>
</router-link>
</el-card>
</el-col>
<el-col v-bind="grid" class="ivu-mb">
<el-card :bordered="false">
<router-link :to="{ path: '/user/index' }">
<i class="el-icon-setting" style="color: #95de64" />
<p>订单总数</p>
</router-link>
</el-card>
</el-col>
<el-col v-bind="grid" class="ivu-mb">
<el-card :bordered="false">
<router-link :to="{ path: '/user/index' }">
<i class="el-icon-goods" style="color: #ff9c6e" />
<p>总金额</p>
</router-link>
</el-card>
</el-col>
<el-col v-bind="grid" class="ivu-mb">
<el-card :bordered="false">
<router-link :to="{ path: '/user/index' }">
<i class="el-icon-s-order" style="color: #b37feb" />
<p>商品总数</p>
</router-link>
</el-card>
</el-col>
<el-col v-bind="grid" class="ivu-mb">
<el-card :bordered="false">
<router-link :to="{ path: '/user/index' }">
<i class="el-icon-message" style="color: #ffd666" />
<p>今日订单数</p>
</router-link>
</el-card>
</el-col>
<el-col v-bind="grid" class="ivu-mb">
<el-card :bordered="false">
<router-link :to="{ path: '/user/index' }">
<i class="el-icon-notebook-1" style="color: #5cdbd3" />
<p>昨日订单数</p>
</router-link>
</el-card>
</el-col>
<el-col v-bind="grid" class="ivu-mb">
<el-card :bordered="false">
<router-link :to="{ path: '/user/index' }">
<i class="el-icon-s-finance" style="color: #ff85c0" />
<p>近七天订单数</p>
</router-link>
</el-card>
</el-col>
<el-col v-bind="grid" class="ivu-mb">
<el-card :bordered="false">
<router-link :to="{ path: '/user/index' }">
<i class="el-icon-s-ticket" style="color: #ffc069" />
<p>本月订单数</p>
</router-link>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import CountTo from 'vue-count-to'
@ -56,7 +78,14 @@ export default {
data() {
return {
count: { todayPrice: 0, todayCount: 0, proPrice: 0, proCount: 0,
monthPrice: 0, monthCount: 0, lastWeekCount: 0, lastWeekPrice: 0 }
monthPrice: 0, monthCount: 0, lastWeekCount: 0, lastWeekPrice: 0 },
grid: {
xl: 3,
lg: 6,
md: 6,
sm: 8,
xs: 8,
},
}
},
mounted() {
@ -134,4 +163,29 @@ export default {
}
}
}
.ivu-mb {
margin-bottom: 10px;
}
.divBox {
// padding: 0 20px !important;
}
.dashboard-console-grid {
text-align: center;
.ivu-card-body {
padding: 0;
}
i {
font-size: 32px;
}
a {
display: block;
color: inherit;
}
p {
margin-top: 8px;
}
}
</style>