caoliancun
/
PointsMall_Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页

Browse Source
pull/18/head
xk_chenlianjie 1 year ago
parent 6cb9ded875
commit 924a4b57eb
2 changed files with 128 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 109
      src/views/dashboard/admin/index.scss
  2. 98
      src/views/dashboard/admin/index.vue

109
src/views/dashboard/admin/index.scss
Unescape View File

@ -1,93 +1,100 @@
.flex { .flex {
display: flex; display: flex;
} }
.column { .column {
flex-direction: column; flex-direction: column;
} }
.ac { .ac {
align-items: center; align-items: center;
}
.ae {
align-items: flex-end;
} }
.jc { .jc {
justify-content: center; justify-content: center;
} }
.oneflex { .oneflex {
flex: 1; flex: 1;
} }
.jw { .jw {
justify-content: space-between; justify-content: space-between;
} }
.js { .js {
justify-content: space-around; justify-content: space-around;
} }
.number { .number {
color: red; color: red;
font-size: 25px; font-size: 25px;
} }
.product-card { .product-card {
.product-card-item {} height: 100px;
text-align: center;
.product-card-item {
}
} }
.orderData { .orderData {
width: 100%; width: 100%;
.orderData-right {
margin-left: 50px;
flex-wrap: wrap;
.orderData-right-item { .orderData-right {
width: calc(50% - 20px); margin-left: 50px;
box-sizing: border-box; flex-wrap: wrap;
text-align: center; height: 100px;
padding: 10px 20px; .orderData-right-item {
border-bottom: #ececec solid 1px; width: calc(50% - 20px);
box-sizing: border-box;
} text-align: center;
padding: 10px 20px;
border-bottom: #ececec solid 1px;
} }
}
.orderData-left { .orderData-left {
padding: 10px 20px; padding: 20px 10px;
box-sizing: border-box; box-sizing: border-box;
border: solid 1px #bbbbbb; border: solid 1px #ececec;
} }
} }
.orderStatistics-card { .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; .box-card {
border-right: solid 1px #ececec; margin-bottom: 30px;
.orderStatistics-card-left-item{
.orderStatistics-card-left-item-title{
color: #bbbbbb;
}
.orderStatistics-card-left-item-number{
font-size: 25px;
}
}
}
} }
.box-card{ .card-title {
margin-bottom: 30px; font-size: 20px;
font-weight: 500;
} }
.card-title{ .fs {
font-size: 20px; font-size: 16px;
font-weight: 600;
} }
.mt{ .mt {
margin-top: 30px; margin-top: 30px;
} }
// .page{ // .page{
// height:calc(100vh - 144px); // height:calc(100vh - 144px);
// box-sizing: border-box; // box-sizing: border-box;
// } // }

98
src/views/dashboard/admin/index.vue
Unescape View File

@ -8,14 +8,14 @@
</div> </div>
<div class="flex"> <div class="flex">
<div class="orderData flex ac"> <div class="orderData flex ac">
<div class="orderData-left flex ac"> <div class="orderData-left flex ac fs">
<i style="font-size: 40px;" class="el-icon-tickets"></i> <i style="font-size: 40px; color:#1ABC9C" class="el-icon-tickets"></i>
<div> <div>
<div>今日订单总数</div> <div>今日订单总数</div>
<div>200</div> <div>200</div>
</div> </div>
</div> </div>
<div class="orderData-right oneflex flex jw"> <div class="orderData-right oneflex flex jw ae">
<div class="orderData-right-item"> <div class="orderData-right-item">
<span>待核销订单</span> <span>待核销订单</span>
<span>(10)</span> <span>(10)</span>
@ -24,27 +24,27 @@
<span>已核销订单</span> <span>已核销订单</span>
<span>(10)</span> <span>(10)</span>
</div> </div>
<div class="orderData-right-item"> <div class="orderData-right-item mt">
<span>已完成订单</span> <span>已完成订单</span>
<span>(10)</span> <span>(10)</span>
</div> </div>
<div class="orderData-right-item"> <div class="orderData-right-item mt">
<span>待退款订单</span> <span>待退款订单</span>
<span>(10)</span> <span>(10)</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</el-card></el-col> </el-card></el-col
>
</el-row> </el-row>
<el-row> <el-row :gutter="20">
<el-col :span="11"> <el-col :span="12">
<el-card class="box-card"> <el-card class="box-card">
<div slot="header"> <div slot="header">
<span class="card-title">商品总览</span> <span class="card-title">商品总览</span>
</div> </div>
<div class="product-card flex js"> <div class="product-card flex js ac">
<div class="product-card-item"> <div class="product-card-item">
<div class="number">100</div> <div class="number">100</div>
<div>已下架</div> <div>已下架</div>
@ -63,36 +63,33 @@
<div class="number">100</div> <div class="number">100</div>
<div>已下架</div> <div>已下架</div>
</div> </div>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="2"></el-col> <el-col :span="12">
<el-col :span="11">
<el-card class="box-card"> <el-card class="box-card">
<div slot="header"> <div slot="header">
<span class="card-title">商品总览</span> <span class="card-title">用户总览</span>
</div> </div>
<div class="product-card flex js"> <div class="product-card flex js ac">
<div class="product-card-item"> <div class="product-card-item">
<div class="number">100</div> <div class="number">100</div>
<div>已下架</div> <div>今日新增</div>
</div> </div>
<div class="product-card-item"> <div class="product-card-item">
<div class="number">100</div> <div class="number">100</div>
<div>已下架</div> <div>昨日新增</div>
</div> </div>
<div class="product-card-item"> <div class="product-card-item">
<div class="number">100</div> <div class="number">100</div>
<div>已下架</div> <div>本月新增</div>
</div> </div>
<div class="product-card-item"> <div class="product-card-item">
<div class="number">100</div> <div class="number">100</div>
<div>已下架</div> <div>会员总数</div>
</div> </div>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
@ -117,7 +114,23 @@
</div> </div>
</div> </div>
<div class="orderStatistics-card-right oneflex"> <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 style="width: 100%; height:500px;margin-top:20px" id="chart"></div>
</div> </div>
</div> </div>
@ -134,7 +147,38 @@ export default {
filters: {}, filters: {},
data() { data() {
return { 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() { created() {
@ -144,8 +188,8 @@ export default {
this.initChart('chart') this.initChart('chart')
}, },
methods: { methods: {
initChart(id='chart') { initChart(id = 'chart') {
this.myChart = echarts.init(document.getElementById(id)); this.myChart = echarts.init(document.getElementById(id))
this.myChart.setOption({ this.myChart.setOption({
color: ['#4370da'], color: ['#4370da'],
grid: { grid: {
@ -170,11 +214,9 @@ export default {
areaStyle: {} areaStyle: {}
} }
] ]
}); })
}, },
init() { init() {}
}
} }
} }
</script> </script>

Write Preview
Loading…
Cancel
Save