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

Compare commits

base: caoliancun:6cb9ded87530c3715659d90d6a8e199d064141eb
Branches Tags
caoliancun:master caoliancun:zyj caoliancun:chenlianjie caoliancun:hzl caoliancun:lc
..
compare: caoliancun:2cb5bc4342071f2898978db26b26aece3baf5d89
Branches Tags
caoliancun:master caoliancun:zyj caoliancun:chenlianjie caoliancun:hzl caoliancun:lc

3 Commits
6cb9ded875 ... 2cb5bc4342

Author SHA1 Message Date
xk_chenlianjie
2cb5bc4342 Merge branch 'master' of http://121.196.213.68:3000/caoliancun/PointsMall_Admin into chenlianjie 2024-02-05 09:16:24 +08:00
xk_chenlianjie
924a4b57eb 首页 2024-02-05 09:16:14 +08:00
陈连杰
b2da908d9f Merge pull request 'chenlianjie' (#17) from chenlianjie into master 
Reviewed-on: #17
 2024-02-04 02:13:45 +00:00
2 changed files with 128 additions and 79 deletions
Expand all files Collapse all files

109
src/views/dashboard/admin/index.scss
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 { .orderData-right {
margin-left: 50px; margin-left: 50px;
flex-wrap: wrap; flex-wrap: wrap;
height: 100px;
.orderData-right-item { .orderData-right-item {
width: calc(50% - 20px); width: calc(50% - 20px);
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
padding: 10px 20px; padding: 10px 20px;
border-bottom: #ececec solid 1px; 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;
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{ .box-card {
margin-bottom: 30px; margin-bottom: 30px;
} }
.card-title{ .card-title {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 500;
} }
.mt{ .fs {
margin-top: 30px; font-size: 16px;
}
.mt {
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
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>