修改首页样式

This commit is contained in:
Gao xiaosong
2021-01-17 23:10:22 +08:00
committed by xuwenbo
parent 514fa52fe9
commit 2657dc841d
3 changed files with 51 additions and 186 deletions

View File

@ -1,33 +1,5 @@
<template>
<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>
<script>

View File

@ -9,35 +9,7 @@
<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>
<span class="content-number spBlock mb15"><count-to :start-val="0" :end-val="count.userCount" :duration="2600" class="card-panel-num" /></span>
<el-divider></el-divider>
<div class="acea-row row-between-wrapper">
<span class="content-time">总销售额</span>
@ -53,35 +25,7 @@
<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>
<span class="content-number spBlock mb15"><count-to :start-val="0" :end-val="count.orderCount" :duration="3000" class="card-panel-num" /></span>
<el-divider></el-divider>
<div class="acea-row row-between-wrapper">
<span class="content-time">总访问量</span>
@ -97,35 +41,7 @@
<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>
<span class="content-number spBlock mb15"><count-to :start-val="0" :end-val="count.priceCount" :duration="3200" class="card-panel-num" /></span>
<el-divider></el-divider>
<div class="acea-row row-between-wrapper">
<span class="content-time">总订单量</span>
@ -141,35 +57,7 @@
<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>
<span class="content-number spBlock mb15"><count-to :start-val="0" :end-val="count.goodsCount" :duration="3600" class="card-panel-num" /></span>
<el-divider></el-divider>
<div class="acea-row row-between-wrapper">
<span class="content-time">总用户</span>

View File

@ -4,52 +4,57 @@
<!--<yshop-info />-->
<panel-group />
<panel-group-t />
<order-count></order-count>
<div class="divBox">
<el-row :gutter="24">
<el-col
:xl="16"
:lg="12"
:md="24"
:sm="24"
:xs="24"
class="ivu-mb mb10 dashboard-console-visit"
>
<el-card :bordered="false" dis-hover>
<div slot="header">
<div class="acea-row row-middle">
<el-avatar
icon="el-icon-s-operation"
size="small"
style="color: #1890ff; background: #e6f7ff; font-size: 13px"
/>
<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"
<el-card :bordered="false" dis-hover>
<div slot="header">
<div class="acea-row row-middle">
<el-avatar
icon="el-icon-s-operation"
size="small"
style="color: #1890ff; background: #e6f7ff; font-size: 13px"
/>
<span class="ivu-pl-8">订单</span>
</div>
</div>
<el-row :gutter="24">
<el-col
:xl="8"
:lg="8"
:md="24"
:sm="24"
:xs="24"
class="ivu-mb mb10 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>
<span class="ivu-pl-8">商品分析</span>
<order-count></order-count>
</el-col>
<el-col
:xl="8"
:lg="8"
:md="24"
:sm="24"
:xs="24"
class="ivu-mb mb10 dashboard-console-visit"
>
<span class="ivu-pl-8">本月成交额</span>
<bar-chart />
</el-col>
<el-col
:xl="8"
:lg="8"
:md="24"
:sm="24"
:xs="24"
class="ivu-mb mb10 dashboard-console-visit"
>
<span class="ivu-pl-8">本月订单数</span>
<pie-chart />
</el-card>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
</div>
</div>
</div>