linux上首页图标错位问题修复

src/views/home/index.vue

@@ -2,19 +2,27 @@
   <div class="app-container">
     <div class="address-layout">
       <el-row :gutter="20">
-        <el-col :span="12">
+        <el-col :span="6">
           <div class="out-border">
             <div class="layout-title">GitHub地址</div>
-            <div style="padding: 20px;font-size: 18px" class="color-main">
+            <div class="color-main address-content">
-              <a href="https://github.com/macrozheng/mall">https://github.com/macrozheng/mall</a>
+              <a href="https://github.com/macrozheng/mall">项目地址</a>
             </div>
           </div>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="6">
           <div class="out-border">
             <div class="layout-title">码云地址</div>
-            <div style="padding: 20px;font-size: 18px" class="color-main">
+            <div class="color-main address-content">
-              <a href="https://gitee.com/macrozheng/mall">https://gitee.com/macrozheng/mall</a>
+              <a href="https://gitee.com/macrozheng/mall">项目地址</a>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="out-border">
+            <div class="layout-title">学习教程</div>
+            <div class="color-main address-content">
+              <a href="https://github.com/macrozheng/mall-learning">项目地址</a>
             </div>
           </div>
         </el-col>
@@ -24,38 +32,42 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <div class="total-frame">
-            <svg-icon icon-class="order" class="total-icon">
+            <img :src="img_home_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">
+            <img :src="img_home_today_amount" 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">
+            <img :src="img_home_yesterday_amount" class="total-icon">
-            </svg-icon>
             <div class="total-title">昨日销售总额</div>
             <div class="total-value">￥5000.00</div>
           </div>
         </el-col>
-        <el-col :span="6">
+        <!--<el-col :span="6">-->
-          <div class="total-frame">
+          <!--<div class="total-frame">-->
-            <svg-icon icon-class="total-week" class="total-icon">
+            <!--<svg-icon icon-class="total-week" class="total-icon">-->
-            </svg-icon>
+            <!--</svg-icon>-->
-            <div class="total-title">近7天销售总额</div>
+            <!--<div class="total-title">近7天销售总额</div>-->
-            <div class="total-value">￥50000.00</div>
+            <!--<div class="total-value">￥50000.00</div>-->
-          </div>
+          <!--</div>-->
-        </el-col>
+        <!--</el-col>-->
       </el-row>
     </div>
+    <el-card class="mine-layout">
+      <div style="text-align: center">
+        <img width="150px" height="150px" src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg">
+      </div>
+      <div style="text-align: center">mall全套学习教程连载中！</div>
+      <div style="text-align: center;margin-top: 5px"><span class="color-main">关注公号</span>，第一时间获取。</div>
+    </el-card>
     <div class="un-handle-layout">
       <div class="layout-title">待处理事务</div>
       <div class="un-handle-content">
@@ -234,6 +246,9 @@
 
 <script>
   import {str2Date} from '@/utils/date';
+  import img_home_order from '@/assets/images/home_order.png';
+  import img_home_today_amount from '@/assets/images/home_today_amount.png';
+  import img_home_yesterday_amount from '@/assets/images/home_yesterday_amount.png';
   const DATA_FROM_BACKEND = {
     columns: ['date', 'orderCount','orderAmount'],
     rows: [
@@ -294,7 +309,10 @@
           rows: []
         },
         loading: false,
-        dataEmpty: false
+        dataEmpty: false,
+        img_home_order,
+        img_home_today_amount,
+        img_home_yesterday_amount
       }
     },
     created(){
@@ -422,4 +440,15 @@
     margin-top: 20px;
     border: 1px solid #DCDFE6;
   }
+  .mine-layout {
+    position: absolute;
+    right: 140px;
+    top: 107px;
+    width: 250px;
+    height: 235px;
+  }
+  .address-content{
+    padding: 20px;
+    font-size: 18px
+  }
 </style>