首页修改

src/icons/svg/total-today.svg

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

src/icons/svg/total-week.svg

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

src/styles/index.scss

@@ -107,18 +107,24 @@ 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;
   color: #606266;

src/views/home/index.vue

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

src/views/oms/apply/applyDetail.vue

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