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

shoye1

Browse Source
pull/16/head^2
dt_2916866708 2 years ago
parent 69afce5015
commit d6445b02cf
2 changed files with 255 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 90
      src/views/dashboard/admin/index.scss
  2. 166
      src/views/dashboard/admin/index.vue

90
src/views/dashboard/admin/index.scss
Unescape 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
Unescape 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>

Write Preview
Loading…
Cancel
Save