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

150
src/views/dashboard/OrderCount.vue
View File

@ -1,87 +1,155 @@
<template> <template>
<div :class="className" :style="{height:height,width:width}" /> <div class="divBox">
<el-row :gutter="24">
<el-col san="24" class="ivu-mb">
<el-card :bordered="false" class="dashboard-console-visit">
<div slot="header">
<div class="acea-row row-between-wrapper">
<div class="acea-row row-middle">
<el-avatar
icon="el-icon-s-data"
size="small"
style="color: #1890ff; background: #e6f7ff; font-size: 13px"
/>
<span class="ivu-pl-8">订单</span>
</div>
<div class="checkTime">
<!-- <el-radio-group v-model="visitDate" class="ivu-mr-8">
<el-radio label="last30" @change="handleChangeVisitType">30天</el-radio>
<el-radio label="week" @change="handleChangeWeek">周</el-radio>
<el-radio label="month" @change="handleChangeMonth">月</el-radio>
<el-radio label="year" @change="handleChangeYear">年</el-radio>
</el-radio-group> -->
</div>
</div>
</div>
<div :class="className" ref="chart" :style="{ height: height, width: width }" />
</el-card>
</el-col>
</el-row>
</div>
</template> </template>
<script> <script>
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import { getOrderCount } from '@/api/visits' import { getOrderCount } from "@/api/visits";
import { debounce } from '@/utils' import { debounce } from "@/utils";
export default { export default {
props: { props: {
className: { className: {
type: String, type: String,
default: 'chart' default: "chart",
}, },
width: { width: {
type: String, type: String,
default: '100%' default: "100%",
}, },
height: { height: {
type: String, type: String,
default: '300px' default: "300px",
} },
}, },
data() { data() {
return { return {
chart: null, chart: null,
column: [], column: [],
orderCountDatas: [] orderCountDatas: [],
} };
}, },
mounted() { mounted() {
getOrderCount().then(res => { getOrderCount()
this.column = res.column, .then((res) => {
this.orderCountDatas = res.orderCountDatas (this.column = res.column),
}).then(() =>{ (this.orderCountDatas = res.orderCountDatas);
this.initChart() })
}) .then(() => {
this.initChart();
});
this.__resizeHandler = debounce(() => { this.__resizeHandler = debounce(() => {
if (this.chart) { if (this.chart) {
this.chart.resize() this.chart.resize();
} }
}, 100) }, 100);
window.addEventListener('resize', this.__resizeHandler) window.addEventListener("resize", this.__resizeHandler);
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return return;
} }
window.removeEventListener('resize', this.__resizeHandler) window.removeEventListener("resize", this.__resizeHandler);
this.chart.dispose() this.chart.dispose();
this.chart = null this.chart = null;
}, },
methods: { methods: {
initChart() { initChart() {
this.chart = echarts.init(this.$el, 'macarons') this.chart = echarts.init(this.$refs.chart, "macarons");
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: '{a} <br/>{b} : {c} ({d}%)' formatter: "{a} <br/>{b} : {c} ({d}%)",
}, },
legend: { legend: {
left: 'center', left: "center",
bottom: '10', bottom: "10",
data: this.column data: this.column,
}, },
calculable: true, calculable: true,
series: [ series: [
{ {
name: '商品分类销售占总销售的比例', name: "商品分类销售占总销售的比例",
type: 'pie', type: "pie",
roseType: 'radius', roseType: "radius",
radius: [15, 95], radius: [15, 95],
center: ['50%', '38%'], center: ["50%", "38%"],
data: this.orderCountDatas, data: this.orderCountDatas,
animationEasing: 'cubicInOut', animationEasing: "cubicInOut",
animationDuration: 2600 animationDuration: 2600,
} },
] ],
}) });
},
},
};
</script>
<style lang="scss" scoped>
.acea-row{
/deep/.el-avatar--small {
width: 22px;
height: 22px;
line-height: 22px;
} }
} }
} .checkTime{
</script> /deep/.el-radio__input{
display: none;
}
}
.ivu-pl-8{
margin-left: 8px;
font-size: 14px;
}
.divBox {
// padding: 0 20px !important;
}
.dashboard-console-visit {
/deep/.el-card__header{
padding: 14px 20px !important;
}
ul {
li {
list-style-type: none;
margin-top: 12px;
}
}
}
.ivu-mb{
margin-bottom: 10px;
}
</style>

481
src/views/dashboard/PanelGroup.vue
View File

@ -1,180 +1,353 @@
<template> <template>
<el-row :gutter="40" class="panel-group"> <div>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <div class="divBox">
<div class="card-panel"> <el-row :gutter="24" class="baseInfo">
<div class="card-panel-icon-wrapper icon-people"> <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
<svg-icon icon-class="peoples" class-name="card-panel-icon" /> <el-card :bordered="false" dis-hover :padding="12">
</div> <div slot="header" class="acea-row row-between-wrapper">
<div class="card-panel-description"> <span>会员总数</span>
<div class="card-panel-text"> <el-tag type="success">昨日</el-tag>
会员总数 </div>
</div> <div class="content" v-if="count">
<count-to :start-val="0" :end-val="count.userCount" :duration="2600" class="card-panel-num" /> <span class="content-number spBlock mb15">{{
</div> count.userCount
</div> }}</span>
</el-col> <div>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <span class="content-time mr20"
<div class="card-panel"> >日同比：<i
<div class="card-panel-icon-wrapper icon-message"> class="content-is"
<svg-icon icon-class="order" class-name="card-panel-icon" /> :class="Number(count.dayRate) >= 0 ? 'up' : 'down'"
</div> >{{ count.dayRate }}</i
<div class="card-panel-description"> ><i
<div class="card-panel-text"> :class="
订单总数 Number(count.dayRate) >= 0
</div> ? 'el-icon-caret-top'
<count-to :start-val="0" :end-val="count.orderCount" :duration="3000" class="card-panel-num" /> : 'el-icon-caret-bottom'
</div> "
</div> /></span>
</el-col> <span class="content-time"
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> >周同比：<i
<div class="card-panel"> class="content-is"
<div class="card-panel-icon-wrapper icon-money"> :class="Number(count.weekRate) >= 0 ? 'up' : 'down'"
<svg-icon icon-class="money" class-name="card-panel-icon" /> >{{ count.weekRate }}</i
</div> ><i
<div class="card-panel-description"> :class="
<div class="card-panel-text"> Number(count.weekRate) >= 0
总金额 ? 'el-icon-caret-top'
</div> : 'el-icon-caret-bottom'
<count-to :start-val="0" :end-val="count.priceCount" :duration="3200" class="card-panel-num" /> "
</div> /></span>
</div> </div>
</el-col> <el-divider></el-divider>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <div class="acea-row row-between-wrapper">
<div class="card-panel" > <span class="content-time">总销售额</span>
<div class="card-panel-icon-wrapper icon-shopping"> <span>{{ count.total }} 元</span>
<svg-icon icon-class="shopping" class-name="card-panel-icon" /> </div>
</div> </div>
<div class="card-panel-description"> </el-card>
<div class="card-panel-text"> </el-col>
商品总数 <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
</div> <el-card :bordered="false" dis-hover :padding="12">
<count-to :start-val="0" :end-val="count.goodsCount" :duration="3600" class="card-panel-num" /> <div slot="header" class="acea-row row-between-wrapper">
</div> <span>订单总数</span>
</div> <el-tag type="success">昨日</el-tag>
</el-col> </div>
</el-row> <div class="content" v-if="count">
<span class="content-number spBlock mb15">{{
count.userCount
}}</span>
<div>
<span class="content-time mr20"
>日同比：<i
class="content-is"
:class="Number(count.dayRate) >= 0 ? 'up' : 'down'"
>{{ count.dayRate }}</i
><i
:class="
Number(count.dayRate) >= 0
? 'el-icon-caret-top'
: 'el-icon-caret-bottom'
"
/></span>
<span class="content-time"
>周同比：<i
class="content-is"
:class="Number(count.weekRate) >= 0 ? 'up' : 'down'"
>{{ count.weekRate }}</i
><i
:class="
Number(count.weekRate) >= 0
? 'el-icon-caret-top'
: 'el-icon-caret-bottom'
"
/></span>
</div>
<el-divider></el-divider>
<div class="acea-row row-between-wrapper">
<span class="content-time">总访问量</span>
<span>{{ count.total }} Pv</span>
</div>
</div>
</el-card>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
<el-card :bordered="false" dis-hover :padding="12">
<div slot="header" class="acea-row row-between-wrapper">
<span>总金额</span>
<el-tag type="success">昨日</el-tag>
</div>
<div class="content" v-if="count">
<span class="content-number spBlock mb15">{{
count.userCount
}}</span>
<div>
<span class="content-time mr20"
>日同比：<i
class="content-is"
:class="Number(count.dayRate) >= 0 ? 'up' : 'down'"
>{{ count.dayRate }}</i
><i
:class="
Number(count.dayRate) >= 0
? 'el-icon-caret-top'
: 'el-icon-caret-bottom'
"
/></span>
<span class="content-time"
>周同比：<i
class="content-is"
:class="Number(count.weekRate) >= 0 ? 'up' : 'down'"
>{{ count.weekRate }}</i
><i
:class="
Number(count.weekRate) >= 0
? 'el-icon-caret-top'
: 'el-icon-caret-bottom'
"
/></span>
</div>
<el-divider></el-divider>
<div class="acea-row row-between-wrapper">
<span class="content-time">总订单量</span>
<span>{{ count.total }} 单</span>
</div>
</div>
</el-card>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
<el-card :bordered="false" dis-hover :padding="12">
<div slot="header" class="acea-row row-between-wrapper">
<span>商品总数</span>
<el-tag type="success">昨日</el-tag>
</div>
<div class="content" v-if="count">
<span class="content-number spBlock mb15">{{
count.userCount
}}</span>
<div>
<span class="content-time mr20"
>日同比：<i
class="content-is"
:class="Number(count.dayRate) >= 0 ? 'up' : 'down'"
>{{ count.dayRate }}</i
><i
:class="
Number(count.dayRate) >= 0
? 'el-icon-caret-top'
: 'el-icon-caret-bottom'
"
/></span>
<span class="content-time"
>周同比：<i
class="content-is"
:class="Number(count.weekRate) >= 0 ? 'up' : 'down'"
>{{ count.weekRate }}</i
><i
:class="
Number(count.weekRate) >= 0
? 'el-icon-caret-top'
: 'el-icon-caret-bottom'
"
/></span>
</div>
<el-divider></el-divider>
<div class="acea-row row-between-wrapper">
<span class="content-time">总用户</span>
<span>{{ count.total }} 人</span>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template> </template>
<script> <script>
import CountTo from 'vue-count-to' import CountTo from "vue-count-to";
import { gett } from '@/api/visits' import { gett } from "@/api/visits";
export default { export default {
components: { components: {
CountTo CountTo,
}, },
data() { data() {
return { return {
count: { todayPrice: 0, todayCount: 0, proPrice: 0, proCount: 0, count: {
monthPrice: 0, monthCount: 0, lastWeekCount: 0, lastWeekPrice: 0, todayPrice: 0,
userCount: 0, orderCount: 0, priceCount: 0, goodsCount: 0} todayCount: 0,
} proPrice: 0,
proCount: 0,
monthPrice: 0,
monthCount: 0,
lastWeekCount: 0,
lastWeekPrice: 0,
userCount: 0,
orderCount: 0,
priceCount: 0,
goodsCount: 0,
},
};
}, },
mounted() { mounted() {
gett().then(res => { gett().then((res) => {
this.count.todayPrice = res.todayPrice this.count.todayPrice = res.todayPrice;
this.count.todayCount = res.todayCount this.count.todayCount = res.todayCount;
this.count.proCount = res.proCount this.count.proCount = res.proCount;
this.count.proPrice = res.proPrice this.count.proPrice = res.proPrice;
this.count.monthPrice = res.monthPrice this.count.monthPrice = res.monthPrice;
this.count.monthCount = res.monthCount this.count.monthCount = res.monthCount;
this.count.lastWeekCount = res.lastWeekCount this.count.lastWeekCount = res.lastWeekCount;
this.count.lastWeekPrice = res.lastWeekPrice this.count.lastWeekPrice = res.lastWeekPrice;
this.count.userCount = res.userCount this.count.userCount = res.userCount;
this.count.orderCount = res.orderCount this.count.orderCount = res.orderCount;
this.count.priceCount = res.priceCount this.count.priceCount = res.priceCount;
this.count.goodsCount = res.goodsCount this.count.goodsCount = res.goodsCount;
}) });
} },
} };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.panel-group { .panel-group {
margin-top: 18px; margin-top: 18px;
.card-panel-col { .card-panel-col {
margin-bottom: 32px; margin-bottom: 32px;
}
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
.icon-people {
color: #40c9c6;
}
.icon-message {
color: #36a3f7;
}
.icon-money {
color: #f4516c;
}
.icon-shopping {
color: #34bfa3
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 20px;
}
}
}
} }
@media (max-width:550px) { .card-panel {
.card-panel-description { height: 108px;
display: none; cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.05);
.icon-people {
color: #40c9c6;
}
.icon-message {
color: #36a3f7;
}
.icon-money {
color: #f4516c;
}
.icon-shopping {
color: #34bfa3;
} }
.card-panel-icon-wrapper { .card-panel-icon-wrapper {
float: none !important; float: left;
width: 100%; margin: 14px 0 0 14px;
height: 100%; padding: 16px;
margin: 0 !important; transition: all 0.38s ease-out;
border-radius: 6px;
}
.svg-icon { .card-panel-icon {
display: block; float: left;
margin: 14px auto !important; font-size: 48px;
float: none !important; }
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 20px;
} }
} }
} }
}
@media (max-width: 550px) {
.card-panel-description {
display: none;
}
.card-panel-icon-wrapper {
float: none !important;
width: 100%;
height: 100%;
margin: 0 !important;
.svg-icon {
display: block;
margin: 14px auto !important;
float: none !important;
}
}
}
.baseInfo {
/deep/ .el-card__header {
padding: 15px 20px !important;
}
}
.ivu-mb {
margin-bottom: 10px;
}
.up,
.el-icon-caret-top {
color: #f5222d;
font-size: 12px;
opacity: 1 !important;
}
.down,
.el-icon-caret-bottom {
color: #39c15b;
font-size: 12px;
/*opacity: 100% !important;*/
}
.content {
&-number {
font-size: 30px;
}
&-time {
font-size: 14px;
/*color: #8C8C8C;*/
}
}
.spBlock {
display: block;
}
</style> </style>

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

@ -1,50 +1,72 @@
<template> <template>
<el-row :gutter="40" class="panel-group"> <div class="divBox">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <el-row :gutter="24" class="dashboard-console-grid">
<div class="card-panel"> <el-col v-bind="grid" class="ivu-mb">
<div class="card-panel-icon-wrapper icon-people"> <el-card :bordered="false">
<svg-icon icon-class="today" class-name="card-panel-icon" /> <router-link :to="{ path: '/user/index' }">
</div> <i class="el-icon-user" style="color: #69c0ff" />
<div class="card-panel-description"> <p>会员总数</p>
<div class="card-panel-text">今日订单数</div> </router-link>
<count-to :start-val="0" :end-val="count.todayCount" :duration="2600" class="card-panel-num" /> </el-card>
</div> </el-col>
</div> <el-col v-bind="grid" class="ivu-mb">
</el-col> <el-card :bordered="false">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <router-link :to="{ path: '/user/index' }">
<div class="card-panel"> <i class="el-icon-setting" style="color: #95de64" />
<div class="card-panel-icon-wrapper icon-message"> <p>订单总数</p>
<svg-icon icon-class="ic-yesterday" class-name="card-panel-icon" /> </router-link>
</div> </el-card>
<div class="card-panel-description"> </el-col>
<div class="card-panel-text">昨日订单数</div> <el-col v-bind="grid" class="ivu-mb">
<count-to :start-val="0" :end-val="count.proCount" :duration="3000" class="card-panel-num" /> <el-card :bordered="false">
</div> <router-link :to="{ path: '/user/index' }">
</div> <i class="el-icon-goods" style="color: #ff9c6e" />
</el-col> <p>总金额</p>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> </router-link>
<div class="card-panel"> </el-card>
<div class="card-panel-icon-wrapper icon-money"> </el-col>
<svg-icon icon-class="seven" class-name="card-panel-icon" /> <el-col v-bind="grid" class="ivu-mb">
</div> <el-card :bordered="false">
<div class="card-panel-description"> <router-link :to="{ path: '/user/index' }">
<div class="card-panel-text">近七天订单数</div> <i class="el-icon-s-order" style="color: #b37feb" />
<count-to :start-val="0" :end-val="count.lastWeekCount" :duration="3200" class="card-panel-num" /> <p>商品总数</p>
</div> </router-link>
</div> </el-card>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <el-col v-bind="grid" class="ivu-mb">
<div class="card-panel"> <el-card :bordered="false">
<div class="card-panel-icon-wrapper icon-shopping"> <router-link :to="{ path: '/user/index' }">
<svg-icon icon-class="monthlyview" class-name="card-panel-icon" /> <i class="el-icon-message" style="color: #ffd666" />
</div> <p>今日订单数</p>
<div class="card-panel-description"> </router-link>
<div class="card-panel-text">本月订单数</div> </el-card>
<count-to :start-val="0" :end-val="count.monthCount" :duration="3600" class="card-panel-num" /> </el-col>
</div> <el-col v-bind="grid" class="ivu-mb">
</div> <el-card :bordered="false">
</el-col> <router-link :to="{ path: '/user/index' }">
</el-row> <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> </template>
<script> <script>
import CountTo from 'vue-count-to' import CountTo from 'vue-count-to'
@ -56,7 +78,14 @@ export default {
data() { data() {
return { return {
count: { todayPrice: 0, todayCount: 0, proPrice: 0, proCount: 0, 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() { 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> </style>

9
src/views/dashboard/PieChart.vue
View File

@ -24,7 +24,14 @@ export default {
}, },
data() { data() {
return { return {
chart: null chart: null,
grid: {
xl: 3,
lg: 6,
md: 6,
sm: 8,
xs: 8,
},
} }
}, },
mounted() { mounted() {

148
src/views/home.vue
View File

@ -4,73 +4,131 @@
<!--<yshop-info />--> <!--<yshop-info />-->
<panel-group /> <panel-group />
<panel-group-t /> <panel-group-t />
<order-count></order-count>
<el-row :gutter="32"> <div class="divBox">
<el-col :xs="16" :sm="16" :lg="8"> <el-row :gutter="24">
<order-count></order-count> <el-col
</el-col> :xl="16"
<el-col :xs="16" :sm="16" :lg="8"> :lg="12"
:md="24"
<div class="chart-wrapper"> :sm="24"
<p>本月成交额</p> :xs="24"
<bar-chart /> class="ivu-mb mb10 dashboard-console-visit"
</div> >
</el-col> <el-card :bordered="false" dis-hover>
<el-col :xs="16" :sm="16" :lg="8"> <div slot="header">
<div class="chart-wrapper"> <div class="acea-row row-middle">
<p>本月订单数</p> <el-avatar
<pie-chart /> icon="el-icon-s-operation"
</div> size="small"
</el-col> style="color: #1890ff; background: #e6f7ff; font-size: 13px"
</el-row> />
<span class="ivu-pl-8">本月成交额</span>
</div>
</div>
<bar-chart />
</el-card>
</el-col>
<el-col :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
<el-card
:bordered="false"
dis-hover
class="dashboard-console-visit"
>
<div slot="header">
<div class="acea-row row-middle">
<el-avatar
icon="el-icon-picture-outline-round"
size="small"
style="color: #1890ff; background: #e6f7ff; font-size: 13px"
/>
<span class="ivu-pl-8">本月订单数</span>
</div>
</div>
<pie-chart />
</el-card>
</el-col>
</el-row>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from "vuex";
import PanelGroup from './dashboard/PanelGroup' import PanelGroup from "./dashboard/PanelGroup";
import PanelGroupT from './dashboard/PanelGroupT' import PanelGroupT from "./dashboard/PanelGroupT";
import PieChart from './dashboard/BarChartT' import PieChart from "./dashboard/BarChartT";
import BarChart from './dashboard/BarChart' import BarChart from "./dashboard/BarChart";
import { count } from '@/api/visits' import { count } from "@/api/visits";
import YshopInfo from './dashboard/YshopInfo' import YshopInfo from "./dashboard/YshopInfo";
import OrderCount from './dashboard/OrderCount' import OrderCount from "./dashboard/OrderCount";
/** /**
* 记录访问，只有页面刷新或者第一次加载才会记录 * 记录访问，只有页面刷新或者第一次加载才会记录
*/ */
count().then(res => { count().then((res) => {});
})
export default { export default {
name: 'Dashboard', name: "Dashboard",
components: { components: {
PanelGroup, PanelGroup,
PanelGroupT, PanelGroupT,
PieChart, PieChart,
BarChart, BarChart,
YshopInfo, YshopInfo,
OrderCount OrderCount,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(["roles"]),
'roles' },
]) };
}
}
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container { .dashboard-editor-container {
padding: 18px 22px 22px 22px; padding: 18px 22px 22px 22px;
background-color: rgb(240, 242, 245); background-color: rgb(240, 242, 245);
.chart-wrapper { .chart-wrapper {
background: #fff; background: #fff;
padding: 16px 16px 0; padding: 16px 16px 0;
margin-bottom: 32px; margin-bottom: 32px;
}
}
.acea-row {
/deep/.el-avatar--small {
width: 22px;
height: 22px;
line-height: 22px;
}
}
.checkTime {
/deep/.el-radio__input {
display: none;
}
}
.ivu-pl-8 {
margin-left: 8px;
font-size: 14px;
}
.divBox {
// padding: 0 20px !important;
}
.dashboard-console-visit {
/deep/.el-card__header {
padding: 14px 20px !important;
}
ul {
li {
list-style-type: none;
margin-top: 12px;
} }
} }
}
.ivu-mb {
margin-bottom: 10px;
}
</style> </style>