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

shoye1

Browse Source
This commit is contained in:
dt_2916866708
2024-02-02 16:01:00 +08:00
parent 69afce5015
commit d6445b02cf
2 changed files with 255 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/views/dashboard/admin/index.scss Normal file
View File

@@ -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;
}

166
src/views/dashboard/admin/index.vue
View File

@@ -1,20 +1,184 @@
<template>
<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>
</template>
<script>
import echarts from 'echarts'
export default {
filters: {},
data() {
return {
myChart: null
}
},
created() {
this.init()
},
mounted() {
this.initChart('chart')
},
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>
<style scoped></style>
<style scoped lang="scss">
@import './index.scss';
</style>