Skip to content

Commit

Permalink
首页修改
Browse files Browse the repository at this point in the history
  • Loading branch information
zhh committed Nov 20, 2018
1 parent 04f9f7e commit 2001a96
Show file tree
Hide file tree
Showing 6 changed files with 238 additions and 27 deletions.
1 change: 1 addition & 0 deletions src/icons/svg/total-today.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/icons/svg/total-week.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/icons/svg/total-yesterday.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 8 additions & 2 deletions src/styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
244 changes: 223 additions & 21 deletions src/views/home/index.vue
View file
Original file line number Diff line number Diff line change
@@ -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;
}
.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;
}
&-text {
font-size: 30px;
line-height: 46px;
.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>
8 changes: 4 additions & 4 deletions src/views/oms/apply/applyDetail.vue
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 2001a96

Please sign in to comment.