dt_2916866708
1 year ago
parent
69afce5015
commit
d6445b02cf
2 changed files with 255 additions and 1 deletions
@ -0,0 +1,90 @@ |
|||||||
|
.flex { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.column { |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.ac { |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.jc { |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.oneflex { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.jw { |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
.js { |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
|
||||||
|
.number { |
||||||
|
color: red; |
||||||
|
font-size: 25px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-card { |
||||||
|
.product-card-item {} |
||||||
|
} |
||||||
|
|
||||||
|
.orderData { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.orderData-right { |
||||||
|
margin-left: 50px; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
.orderData-right-item { |
||||||
|
width: calc(50% - 20px); |
||||||
|
box-sizing: border-box; |
||||||
|
text-align: center; |
||||||
|
padding: 10px 20px; |
||||||
|
border-bottom: #ececec solid 1px; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.orderData-left { |
||||||
|
padding: 10px 20px; |
||||||
|
box-sizing: border-box; |
||||||
|
border: solid 1px #bbbbbb; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.orderStatistics-card { |
||||||
|
.orderStatistics-card-right{ |
||||||
|
} |
||||||
|
.orderStatistics-card-left { |
||||||
|
flex-shrink: 0; |
||||||
|
padding: 10px 50px; |
||||||
|
border-right: solid 1px #ececec; |
||||||
|
.orderStatistics-card-left-item{ |
||||||
|
.orderStatistics-card-left-item-title{ |
||||||
|
color: #bbbbbb; |
||||||
|
} |
||||||
|
.orderStatistics-card-left-item-number{ |
||||||
|
font-size: 25px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
.box-card{ |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
.card-title{ |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.page{ |
||||||
|
height:calc(100vh - 144px); |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
@ -1,20 +1,184 @@ |
|||||||
<template> |
<template> |
||||||
<div class="page"> |
<div class="page"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card class="box-card"> |
||||||
|
<div slot="header"> |
||||||
|
<span class="card-title">订单数据</span> |
||||||
|
</div> |
||||||
|
<div class="flex"> |
||||||
|
<div class="orderData flex ac"> |
||||||
|
<div class="orderData-left flex ac"> |
||||||
|
<i style="font-size: 40px;" class="el-icon-tickets"></i> |
||||||
|
<div> |
||||||
|
<div>今日订单总数</div> |
||||||
|
<div>200</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="orderData-right oneflex flex jw"> |
||||||
|
<div class="orderData-right-item"> |
||||||
|
<span>待核销订单</span> |
||||||
|
<span>(10)</span> |
||||||
|
</div> |
||||||
|
<div class="orderData-right-item"> |
||||||
|
<span>已核销订单</span> |
||||||
|
<span>(10)</span> |
||||||
|
</div> |
||||||
|
<div class="orderData-right-item"> |
||||||
|
<span>已完成订单</span> |
||||||
|
<span>(10)</span> |
||||||
|
</div> |
||||||
|
<div class="orderData-right-item"> |
||||||
|
<span>待退款订单</span> |
||||||
|
<span>(10)</span> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card></el-col> |
||||||
|
</el-row> |
||||||
|
<el-row> |
||||||
|
<el-col :span="11"> |
||||||
|
<el-card class="box-card"> |
||||||
|
<div slot="header"> |
||||||
|
<span class="card-title">商品总览</span> |
||||||
|
</div> |
||||||
|
<div class="product-card flex js"> |
||||||
|
<div class="product-card-item"> |
||||||
|
<div class="number">100</div> |
||||||
|
<div>已下架</div> |
||||||
|
</div> |
||||||
|
<div class="product-card-item"> |
||||||
|
<div class="number">100</div> |
||||||
|
<div>已下架</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="product-card-item"> |
||||||
|
<div class="number">100</div> |
||||||
|
<div>已下架</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="product-card-item"> |
||||||
|
<div class="number">100</div> |
||||||
|
<div>已下架</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
<el-col :span="2"></el-col> |
||||||
|
<el-col :span="11"> |
||||||
|
<el-card class="box-card"> |
||||||
|
<div slot="header"> |
||||||
|
<span class="card-title">商品总览</span> |
||||||
|
</div> |
||||||
|
<div class="product-card flex js"> |
||||||
|
<div class="product-card-item"> |
||||||
|
<div class="number">100</div> |
||||||
|
<div>已下架</div> |
||||||
|
</div> |
||||||
|
<div class="product-card-item"> |
||||||
|
<div class="number">100</div> |
||||||
|
<div>已下架</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="product-card-item"> |
||||||
|
<div class="number">100</div> |
||||||
|
<div>已下架</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="product-card-item"> |
||||||
|
<div class="number">100</div> |
||||||
|
<div>已下架</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card class="box-card"> |
||||||
|
<div slot="header"> |
||||||
|
<span class="card-title">订单统计</span> |
||||||
|
</div> |
||||||
|
<div class="orderStatistics-card flex"> |
||||||
|
<div class="orderStatistics-card-left flex column js"> |
||||||
|
<div class="orderStatistics-card-left-item"> |
||||||
|
<div class="orderStatistics-card-left-item-title">本月订单总数</div> |
||||||
|
<div class="orderStatistics-card-left-item-number">10000</div> |
||||||
|
<div class="orderStatistics-card-left-item-title">10% 同比上周</div> |
||||||
|
</div> |
||||||
|
<div class="orderStatistics-card-left-item"> |
||||||
|
<div class="orderStatistics-card-left-item-title">本月订单总数</div> |
||||||
|
<div class="orderStatistics-card-left-item-number">10000</div> |
||||||
|
<div class="orderStatistics-card-left-item-title">10% 同比上周</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="orderStatistics-card-right oneflex"> |
||||||
|
<div style="width: 100%;"> 近一周订单统计</div> |
||||||
|
<div style="width: 100%; height:500px;margin-top:20px" id="chart"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
import echarts from 'echarts' |
||||||
|
|
||||||
export default { |
export default { |
||||||
filters: {}, |
filters: {}, |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
|
myChart: null |
||||||
} |
} |
||||||
}, |
}, |
||||||
created() { |
created() { |
||||||
|
this.init() |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initChart('chart') |
||||||
}, |
}, |
||||||
methods: { |
methods: { |
||||||
|
initChart(id='chart') { |
||||||
|
this.myChart = echarts.init(document.getElementById(id)); |
||||||
|
this.myChart.setOption({ |
||||||
|
color: ['#4370da'], |
||||||
|
grid: { |
||||||
|
x: 50, |
||||||
|
y: 25, |
||||||
|
x2: 30, |
||||||
|
y2: 35 |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
boundaryGap: false, |
||||||
|
data: ['07-01周六', '07-02周日', '07-03周一', '07-04周二', '07-05周三', '07-06周四', '07-07周五'] |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value' |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
data: [820, 932, 901, 934, 1290, 1330, 1320], |
||||||
|
type: 'line', |
||||||
|
smooth: true, |
||||||
|
areaStyle: {} |
||||||
|
} |
||||||
|
] |
||||||
|
}); |
||||||
|
}, |
||||||
|
init() { |
||||||
|
|
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped></style> |
<style scoped lang="scss"> |
||||||
|
@import './index.scss'; |
||||||
|
</style> |
||||||
|
|||||||
Loading…
Reference in new issue