Merge pull request 'chenlianjie' (#18) from chenlianjie into master
Reviewed-on: #18
This commit was merged in pull request #18.
This commit is contained in:
@@ -1,93 +1,100 @@
|
||||
.flex {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ac {
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.ae {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.jc {
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.oneflex {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.jw {
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.js {
|
||||
justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.number {
|
||||
color: red;
|
||||
font-size: 25px;
|
||||
color: red;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
.product-card-item {}
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
.product-card-item {
|
||||
}
|
||||
}
|
||||
|
||||
.orderData {
|
||||
width: 100%;
|
||||
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-right {
|
||||
margin-left: 50px;
|
||||
flex-wrap: wrap;
|
||||
height: 100px;
|
||||
.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;
|
||||
}
|
||||
.orderData-left {
|
||||
padding: 20px 10px;
|
||||
box-sizing: border-box;
|
||||
border: solid 1px #ececec;
|
||||
}
|
||||
}
|
||||
|
||||
.orderStatistics-card {
|
||||
.orderStatistics-card-right{
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
.box-card {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.card-title{
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
.card-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.mt{
|
||||
margin-top: 30px;
|
||||
.fs {
|
||||
font-size: 16px;
|
||||
}
|
||||
.mt {
|
||||
margin-top: 30px;
|
||||
}
|
||||
// .page{
|
||||
// height:calc(100vh - 144px);
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -8,14 +8,14 @@
|
||||
</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 class="orderData-left flex ac fs">
|
||||
<i style="font-size: 40px; color:#1ABC9C" class="el-icon-tickets"></i>
|
||||
<div>
|
||||
<div>今日订单总数</div>
|
||||
<div>200</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="orderData-right oneflex flex jw">
|
||||
<div class="orderData-right oneflex flex jw ae">
|
||||
<div class="orderData-right-item">
|
||||
<span>待核销订单</span>
|
||||
<span>(10)</span>
|
||||
@@ -24,27 +24,27 @@
|
||||
<span>已核销订单</span>
|
||||
<span>(10)</span>
|
||||
</div>
|
||||
<div class="orderData-right-item">
|
||||
<div class="orderData-right-item mt">
|
||||
<span>已完成订单</span>
|
||||
<span>(10)</span>
|
||||
</div>
|
||||
<div class="orderData-right-item">
|
||||
<div class="orderData-right-item mt">
|
||||
<span>待退款订单</span>
|
||||
<span>(10)</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card></el-col>
|
||||
</el-card></el-col
|
||||
>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header">
|
||||
<span class="card-title">商品总览</span>
|
||||
</div>
|
||||
<div class="product-card flex js">
|
||||
<div class="product-card flex js ac">
|
||||
<div class="product-card-item">
|
||||
<div class="number">100</div>
|
||||
<div>已下架</div>
|
||||
@@ -63,36 +63,33 @@
|
||||
<div class="number">100</div>
|
||||
<div>已下架</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="2"></el-col>
|
||||
<el-col :span="11">
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header">
|
||||
<span class="card-title">商品总览</span>
|
||||
<span class="card-title">用户总览</span>
|
||||
</div>
|
||||
<div class="product-card flex js">
|
||||
<div class="product-card flex js ac">
|
||||
<div class="product-card-item">
|
||||
<div class="number">100</div>
|
||||
<div>已下架</div>
|
||||
<div>今日新增</div>
|
||||
</div>
|
||||
<div class="product-card-item">
|
||||
<div class="number">100</div>
|
||||
<div>已下架</div>
|
||||
<div>昨日新增</div>
|
||||
</div>
|
||||
|
||||
<div class="product-card-item">
|
||||
<div class="number">100</div>
|
||||
<div>已下架</div>
|
||||
<div>本月新增</div>
|
||||
</div>
|
||||
|
||||
<div class="product-card-item">
|
||||
<div class="number">100</div>
|
||||
<div>已下架</div>
|
||||
<div>会员总数</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
@@ -117,7 +114,23 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="orderStatistics-card-right oneflex">
|
||||
<div style="width: 100%;"> 近一周订单统计</div>
|
||||
<div class="flex ac">
|
||||
<div style="width: 100%;">近一周订单统计</div>
|
||||
<el-date-picker
|
||||
v-model="createTime"
|
||||
type="daterange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
value-format="yyyy-MM-dd"
|
||||
range-separator="~"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:picker-options="pickerOptions"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-button type="primary" @click="userSearchs" style="margin-left:10px">查询</el-button>
|
||||
</div>
|
||||
|
||||
<div style="width: 100%; height:500px;margin-top:20px" id="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,7 +147,38 @@ export default {
|
||||
filters: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
myChart: null,
|
||||
createTime: '',
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -144,8 +188,8 @@ export default {
|
||||
this.initChart('chart')
|
||||
},
|
||||
methods: {
|
||||
initChart(id='chart') {
|
||||
this.myChart = echarts.init(document.getElementById(id));
|
||||
initChart(id = 'chart') {
|
||||
this.myChart = echarts.init(document.getElementById(id))
|
||||
this.myChart.setOption({
|
||||
color: ['#4370da'],
|
||||
grid: {
|
||||
@@ -170,11 +214,9 @@ export default {
|
||||
areaStyle: {}
|
||||
}
|
||||
]
|
||||
});
|
||||
})
|
||||
},
|
||||
init() {
|
||||
|
||||
}
|
||||
init() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user