首页修改
This commit is contained in:
zhh
parent
04f9f7ecdf
commit
2001a969d6
1
src/icons/svg/total-today.svg
Normal file
1
src/icons/svg/total-today.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1542700646737" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2301" xmlns:xlink="http://www.w3.org/1999/xlink" width="54" height="54"><defs><style type="text/css"></style></defs><path d="M983.696 422.704A480 480 0 1 0 40.72 602.72a469.456 469.456 0 0 0 69.44 172.688 36.4 36.4 0 1 0 60.672-40.24 408.16 408.16 0 0 1 3.664-452.224 400.832 400.832 0 0 1 260.24-171.2 407.136 407.136 0 1 1-112.576 760.288 36.8 36.8 0 0 0-34.352 65.12 477.024 477.024 0 0 0 223.68 54.88 467.984 467.984 0 0 0 89.92-8.784A481.424 481.424 0 0 0 983.712 422.72z" p-id="2302"></path><path d="M471.712 579.84h-130.768a36.944 36.944 0 0 0 0 73.888h130.768v116.8a36.944 36.944 0 1 0 73.888 0v-116.8h130.768a36.944 36.944 0 1 0 0-73.888H545.6v-71.664a22.784 22.784 0 0 0-0.736-7.392h131.504a36.944 36.944 0 1 0 0-73.888H341.68a36.944 36.944 0 1 0 0 73.888h131.504a25.152 25.152 0 0 0-0.736 7.392v71.664z" p-id="2303"></path><path d="M405.968 383.312a37.104 37.104 0 0 0 52.464-52.464l-79.792-79.792a37.104 37.104 0 1 0-52.464 52.464z" p-id="2304"></path><path d="M602.48 383.312l79.792-79.792a37.088 37.088 0 1 0-52.448-52.464l-79.792 79.792a36.576 36.576 0 0 0 0 52.464 37.936 37.936 0 0 0 52.448 0z" p-id="2305"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
src/icons/svg/total-week.svg
Normal file
1
src/icons/svg/total-week.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1542700697957" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3201" xmlns:xlink="http://www.w3.org/1999/xlink" width="54" height="54"><defs><style type="text/css"></style></defs><path d="M38.16448 558.0288v419.90144c0 33.01376 51.2 33.01376 51.2 0V558.0288c0-33.01376-51.2-33.01376-51.2 0z" p-id="3202"></path><path d="M327.39328 420.70016v557.23008c0 33.01376 51.2 33.01376 51.2 0V420.70016c0-33.01888-51.2-33.01888-51.2 0z" p-id="3203"></path><path d="M629.21216 558.0288v419.90144c0 33.01376 51.2 33.01376 51.2 0V558.0288c0-33.01376-51.2-33.01376-51.2 0z" p-id="3204"></path><path d="M936.92928 420.70016v557.23008c0 33.01376 51.2 33.01376 51.2 0V420.70016c0-33.01888-51.2-33.01888-51.2 0zM81.86368 414.58176l277.27872-277.27872h-36.20352c95.55968 95.5648 191.11424 191.1296 286.65856 286.69952 9.86112 9.86112 26.3424 9.86112 36.19328 0 99.6864-99.67616 199.35744-199.35232 299.02848-299.02848 23.36256-23.36768-12.83584-59.5712-36.1984-36.20352-99.68128 99.67616-199.35744 199.35232-299.02336 299.02848h36.19328L359.13728 101.09952c-9.86112-9.86112-26.3424-9.86112-36.20352 0L45.65504 378.37824c-23.36256 23.36768 12.84096 59.5712 36.20864 36.20352z" p-id="3205"></path><path d="M779.06944 87.3728h190.208l-25.6-25.6v178.70336c0 33.01888 51.2 33.01888 51.2 0V61.7728c0-13.95712-11.63776-25.6-25.6-25.6h-190.208c-33.01376 0-33.01376 51.2 0 51.2z" p-id="3206"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
src/icons/svg/total-yesterday.svg
Normal file
1
src/icons/svg/total-yesterday.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1542700674974" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2435" xmlns:xlink="http://www.w3.org/1999/xlink" width="54" height="54"><defs><style type="text/css"></style></defs><path d="M910.08512 255.34976c-0.9216 37.56032-33.67936 64.52736-62.77632 83.2256-49.06496 31.52896-107.008 48.10752-163.55328 60.01152-138.17344 29.09696-290.7648 23.57248-425.43104-19.46624-58.35776-18.65216-189.14816-75.15136-141.824-157.70624 21.99552-38.36928 69.44256-61.7984 108.63616-77.824 61.00992-24.93952 127.1552-37.65248 192.49152-44.0832 113.5104-11.17184 231.46496-2.74432 340.38784 32.07168 53.44256 17.08032 150.37952 55.00928 152.06912 123.77088 0.80896 32.95744 52.00896 33.03936 51.2 0-2.37568-96.73216-111.27296-147.01568-189.65504-173.14304-133.31456-44.43648-282.62912-47.11424-420.352-25.3952-97.09568 15.3088-223.18592 49.46432-278.9888 138.76224-50.43712 80.71168 17.99168 157.66016 86.2976 196.29056 68.02944 38.47168 147.73248 56.832 224.57344 66.6368 93.83424 11.97568 188.50304 10.11712 281.91232-4.61312 73.80992-11.63776 149.60128-33.51552 212.93056-74.21952 43.58656-28.01152 81.95584-70.0416 83.28704-124.31872 0.80384-33.03936-50.39616-32.95744-51.20512 0z" p-id="2436"></path><path d="M910.08512 423.22944c-1.4336 56.79616-74.50624 91.82208-118.88128 110.01344-89.00096 36.52096-187.52 48.3584-283.02848 48.80896-95.91296 0.45568-193.50528-13.50656-283.03872-48.80896-44.45696-17.52064-117.4528-53.66784-118.88128-110.01344-0.83456-32.95744-52.03456-33.03936-51.2 0 1.8688 73.86624 71.37792 120.97536 131.85024 148.91008 99.38432 45.91104 212.75136 60.60032 321.26976 61.11744 109.08672 0.51712 221.13792-16.65536 321.25952-61.11744 60.65664-26.93632 130.00192-75.7504 131.85024-148.91008 0.83456-33.03936-50.36544-32.95232-51.2 0z" p-id="2437"></path><path d="M910.08512 594.62656c-1.4336 56.80128-74.50624 91.8272-118.88128 110.0288-89.00096 36.52096-187.52 48.3584-283.02848 48.80896-95.91296 0.45568-193.50528-13.50656-283.03872-48.80896-44.45696-17.53088-117.4528-53.67808-118.88128-110.0288-0.83456-32.95744-52.03456-33.03424-51.2 0 1.8688 73.87136 71.37792 120.9856 131.85024 148.92544 99.38432 45.91104 212.75136 60.60032 321.26976 61.11744 109.08672 0.51712 221.13792-16.65536 321.25952-61.11744 60.65664-26.93632 130.00192-75.76576 131.85024-148.92544 0.83456-33.03424-50.36544-32.95744-51.2 0z" p-id="2438"></path><path d="M910.08512 776.06912c-1.4336 56.80128-74.50624 91.8272-118.88128 110.0288-89.00096 36.52096-187.52 48.3584-283.02848 48.80896-95.91296 0.45568-193.50528-13.50656-283.03872-48.80896-44.45696-17.53088-117.4528-53.67808-118.88128-110.0288-0.83456-32.95744-52.03456-33.03424-51.2 0 1.8688 73.87136 71.37792 120.9856 131.85024 148.92032 99.38432 45.91616 212.75136 60.60544 321.26976 61.12256 109.08672 0.51712 221.13792-16.65536 321.25952-61.12256 60.65664-26.9312 130.00192-75.76064 131.85024-148.92032 0.83456-33.03424-50.36544-32.95232-51.2 0zM386.23744 151.69024l102.20032 102.1952c9.86624 9.86112 26.3424 9.86112 36.20352 0l103.49568-103.49056c23.36768-23.36256-12.83584-59.5712-36.1984-36.20352L488.43776 217.68192h36.20352l-102.20032-102.1952c-23.36768-23.36768-59.56608 12.83584-36.20352 36.20352z" p-id="2439"></path><path d="M388.992 261.38624h235.45344c33.01376 0 33.01376-51.2 0-51.2H388.992c-33.01888 0-33.01888 51.2 0 51.2zM388.992 335.40608h235.45344c33.01376 0 33.01376-51.2 0-51.2H388.992c-33.01888 0-33.01888 51.2 0 51.2z" p-id="2440"></path><path d="M481.11616 234.49088V375.5008c0 33.01888 51.20512 33.01888 51.20512 0V234.49088c0-33.01376-51.20512-33.01376-51.20512 0z" p-id="2441"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
@ -107,17 +107,23 @@ a:hover {
|
||||
}
|
||||
|
||||
//标题
|
||||
.font-large {
|
||||
.font-title-large {
|
||||
font-size: 18px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
//小标题
|
||||
.font-medium {
|
||||
.font-title-medium {
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
//正文
|
||||
.font-medium {
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
//正文
|
||||
.font-small {
|
||||
font-size: 14px;
|
||||
|
||||
@ -1,32 +1,234 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<div class="dashboard-text">name:{{name}}</div>
|
||||
<div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{role}}</span></div>
|
||||
<div class="app-container">
|
||||
<div class="total-layout">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="total-frame">
|
||||
<svg-icon icon-class="order" class="total-icon">
|
||||
</svg-icon>
|
||||
<div class="total-title">今日订单总数</div>
|
||||
<div class="total-value">200</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="total-frame">
|
||||
<svg-icon icon-class="total-today" class="total-icon">
|
||||
</svg-icon>
|
||||
<div class="total-title">今日销售总额</div>
|
||||
<div class="total-value">￥5000.00</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="total-frame">
|
||||
<svg-icon icon-class="total-yesterday" class="total-icon">
|
||||
</svg-icon>
|
||||
<div class="total-title">昨日销售总额</div>
|
||||
<div class="total-value">￥5000.00</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="total-frame">
|
||||
<svg-icon icon-class="total-week" class="total-icon">
|
||||
</svg-icon>
|
||||
<div class="total-title">近7天销售总额</div>
|
||||
<div class="total-value">￥50000.00</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="un-handle-layout">
|
||||
<div class="layout-title">待处理事务</div>
|
||||
<div class="un-handle-content">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="un-handle-item">
|
||||
<span class="font-medium">待付款订单</span>
|
||||
<span style="float: right" class="color-danger">(10)</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="un-handle-item">
|
||||
<span class="font-medium">已完成订单</span>
|
||||
<span style="float: right" class="color-danger">(10)</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="un-handle-item">
|
||||
<span class="font-medium">待确认收货订单</span>
|
||||
<span style="float: right" class="color-danger">(10)</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="un-handle-item">
|
||||
<span class="font-medium">待发货订单</span>
|
||||
<span style="float: right" class="color-danger">(10)</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="un-handle-item">
|
||||
<span class="font-medium">新缺货登记</span>
|
||||
<span style="float: right" class="color-danger">(10)</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="un-handle-item">
|
||||
<span class="font-medium">待处理退款申请</span>
|
||||
<span style="float: right" class="color-danger">(10)</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="un-handle-item">
|
||||
<span class="font-medium">已发货订单</span>
|
||||
<span style="float: right" class="color-danger">(10)</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="un-handle-item">
|
||||
<span class="font-medium">待处理退货订单</span>
|
||||
<span style="float: right" class="color-danger">(10)</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="un-handle-item">
|
||||
<span class="font-medium">广告位即将到期</span>
|
||||
<span style="float: right" class="color-danger">(10)</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-layout">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="out-border">
|
||||
<div class="layout-title">商品总览</div>
|
||||
<div style="padding: 40px">
|
||||
<el-row>
|
||||
<el-col :span="6" class="color-danger overview-item-value">100</el-col>
|
||||
<el-col :span="6" class="color-danger overview-item-value">400</el-col>
|
||||
<el-col :span="6" class="color-danger overview-item-value">50</el-col>
|
||||
<el-col :span="6" class="color-danger overview-item-value">500</el-col>
|
||||
</el-row>
|
||||
<el-row class="font-medium">
|
||||
<el-col :span="6" class="overview-item-title">已下架</el-col>
|
||||
<el-col :span="6" class="overview-item-title">已上架</el-col>
|
||||
<el-col :span="6" class="overview-item-title">库存紧张</el-col>
|
||||
<el-col :span="6" class="overview-item-title">全部商品</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="out-border">
|
||||
<div class="layout-title">用户总览</div>
|
||||
<div style="padding: 40px">
|
||||
<el-row>
|
||||
<el-col :span="6" class="color-danger overview-item-value">100</el-col>
|
||||
<el-col :span="6" class="color-danger overview-item-value">200</el-col>
|
||||
<el-col :span="6" class="color-danger overview-item-value">1000</el-col>
|
||||
<el-col :span="6" class="color-danger overview-item-value">5000</el-col>
|
||||
</el-row>
|
||||
<el-row class="font-medium">
|
||||
<el-col :span="6" class="overview-item-title">今日新增</el-col>
|
||||
<el-col :span="6" class="overview-item-title">昨日新增</el-col>
|
||||
<el-col :span="6" class="overview-item-title">本月新增</el-col>
|
||||
<el-col :span="6" class="overview-item-title">会员总数</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'home',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name',
|
||||
'roles'
|
||||
])
|
||||
export default {
|
||||
name: 'home',
|
||||
data() {
|
||||
return {msg: '首页'}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.dashboard {
|
||||
&-container {
|
||||
margin: 30px;
|
||||
<style scoped>
|
||||
.app-container {
|
||||
margin-top: 40px;
|
||||
margin-left: 120px;
|
||||
margin-right: 120px;
|
||||
}
|
||||
&-text {
|
||||
font-size: 30px;
|
||||
line-height: 46px;
|
||||
|
||||
.total-layout {
|
||||
}
|
||||
|
||||
.total-frame {
|
||||
border: 1px solid #DCDFE6;
|
||||
padding: 20px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.total-icon {
|
||||
color: #409EFF;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.total-title {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
color: #909399;
|
||||
left: 70px;
|
||||
top: -50px;
|
||||
}
|
||||
|
||||
.total-value {
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
color: #606266;
|
||||
left: 70px;
|
||||
top: -40px;
|
||||
}
|
||||
|
||||
.un-handle-layout {
|
||||
margin-top: 20px;
|
||||
border: 1px solid #DCDFE6;
|
||||
}
|
||||
|
||||
.layout-title {
|
||||
color: #606266;
|
||||
padding: 15px 20px;
|
||||
background: #F2F6FC;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.un-handle-content {
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.un-handle-item {
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.overview-layout {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.overview-item-value {
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.overview-item-title {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.out-border {
|
||||
border: 1px solid #DCDFE6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="detail-container">
|
||||
<el-card shadow="never">
|
||||
<span class="font-medium">退货商品</span>
|
||||
<span class="font-title-medium">退货商品</span>
|
||||
<el-table
|
||||
border
|
||||
class="standard-margin"
|
||||
@ -35,12 +35,12 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="float:right;margin-top:15px;margin-bottom:15px">
|
||||
<span class="font-medium">合计：</span>
|
||||
<span class="font-medium color-danger">￥{{totalAmount}}</span>
|
||||
<span class="font-title-medium">合计：</span>
|
||||
<span class="font-title-medium color-danger">￥{{totalAmount}}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="standard-margin">
|
||||
<span class="font-medium">服务单信息</span>
|
||||
<span class="font-title-medium">服务单信息</span>
|
||||
<div class="form-container-border">
|
||||
<el-row>
|
||||
<el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user