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

twalanfans · May 12, 2019 · 8e06764 · 8e06764
1 parent 2563cab
commit 8e06764
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 21 deletions.
diff --git a/src/assets/images/home_order.png b/src/assets/images/home_order.png
diff --git a/src/assets/images/home_today_amount.png b/src/assets/images/home_today_amount.png
diff --git a/src/assets/images/home_yesterday_amount.png b/src/assets/images/home_yesterday_amount.png
diff --git a/src/views/home/index.vue b/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">
- <a href="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/macrozheng/mall">https://github.com/macrozheng/mall</a>
+ <div class="color-main address-content">
+ <a href="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/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">
- <a href="https://gitee.com/macrozheng/mall">https://gitee.com/macrozheng/mall</a>
+ <div class="color-main address-content">
+ <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="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/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">
- </svg-icon>
+ <img :src="img_home_order" class="total-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>
+ <img :src="img_home_today_amount" class="total-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>
+ <img :src="img_home_yesterday_amount" class="total-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-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>
+ <el-card class="mine-layout">
+ <div style="text-align: center">
+ <img width="150px" height="150px" src="http:https://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>