feat: 软件下载【100%】

src/views/Service/book.vue

@@ -12,7 +12,7 @@
               <div class="title">{{ item.name }}</div>
               <div class="price">¥{{ item.price }}</div>
               <div class="desc">
-                <span>{{ item.auth }} 著</span> ｜ <span>{{ item.date }}</span> ｜ <span>{{ item.press }}</span>
+                <span>{{ item.author }} 著</span> ｜ <span>{{ item.date }}</span> ｜ <span>{{ item.press }}</span>
               </div>
             </div>
           </div>
@@ -30,7 +30,19 @@
               <p class="desc">
                 {{ item.desc }}
               </p>
-              <div class="download-wrapper"></div>
+              <div class="download-wrapper">
+                <div v-if="item.android">
+                  <img src="./img/android.png" alt="">
+                  <a target="_blank" :href="item.android">Android</a>
+                </div>
+                <div v-if="item.ios">
+                  <img src="./img/ios.png" alt="">
+                  <a target="_blank" :href="item.ios">iphone</a>
+                </div>
+              </div>
+            </div>
+            <div v-if="item.qrcode" class="qr-code">
+              <img :src="item.qrcode" alt="">
             </div>
           </div>
         </el-tab-pane>
@@ -47,38 +59,40 @@ export default {
       appList: [
         {
           name: '条码追溯',
-          icon: '',
-          desc: '',
-          android: '',
-          ios: '',
+          icon: require('./img/barcode-icon.png'),
+          desc: '手机客户端下载',
+          android: 'http://www.chinatrace.org/clientDownload.html',
+          ios: 'http://www.chinatrace.org/clientDownload.html',
         },
         {
           name: '中国物品编码中心',
-          icon: '',
-          desc: '',
+          icon: require('./img/bmcode-icon.png'),
+          desc: '手机客户端下载',
           android: '',
           ios: '',
+          qrcode: require('./img/bmdownload.jpg'),
         },
         {
           name: '汉信码生成工具V2.1',
-          icon: '',
-          desc: '',
-          android: '',
-          ios: '',
+          icon: require('./img/hxcode-icon.png'),
+          desc: '生成识读功能',
+          // android: 'http://www.gs1cn.org/Manage/down/%E6%B1%89%E4%BF%A1%E7%A0%81%E7%94%9F%E6%88%90%E5%B7%A5%E5%85%B7V2.1.rar',
+          // ios: 'http://www.gs1cn.org/Manage/down/%E6%B1%89%E4%BF%A1%E7%A0%81%E7%94%9F%E6%88%90%E5%B7%A5%E5%85%B7V2.1.rar',
         },
         {
           name: '条码追溯',
-          icon: '',
-          desc: '',
+          icon: require('./img/barcode-icon.png'),
+          desc: '微信小程序',
           android: '',
           ios: '',
+          qrcode: require('./img/scan_WXcode.jpg'),
         },
         {
           name: '一扫通',
-          icon: '',
-          desc: '',
-          android: '',
-          ios: '',
+          icon: require('./img/sao-icon.png'),
+          desc: '手机客户端下载',
+          android: 'http://apk.hiapk.com/appinfo/com.ancc.yst',
+          ios: 'https://itunes.apple.com/cn/app/yi-sao-tong-zui-quan-tiao/id1024471413?mt=8',
         },
       ],
       bookList: [],
@@ -89,6 +103,20 @@ export default {
   },
   methods: {
     getBooks() {
+      for (let i = 0; i < 10; ++i) {
+        this.bookList.push(
+            {
+              id: i,
+              name: '条码小达人',
+              img:require('./img/5d1d4969-956a-4a85-9631-e45605b0c221.jpg'),
+              price: 30.00,
+              author: '张海成 张铎',
+              date: '2010.1',
+              press: '武汉大学出版社'
+            },
+        )
+      }
+      console.log(this.bookList)
     }
   }
 };
@@ -103,6 +131,7 @@ export default {
     box-shadow: 0 4px 15px 2px rgba(4, 64, 141, 0.08);
     border-radius: 2px;
     border: 1px solid rgba(197, 216, 238, 0.5);
+    margin-bottom: 30px;
 
     .book-img {
       display: flex;
@@ -153,8 +182,15 @@ export default {
     margin-bottom: 30px;
 
     .app-img {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       flex: 0 0 190px;
       background: rgba(197, 216, 238, 0.2);
+
+      img {
+        width: 90px;
+      }
     }
 
     .app-content {
@@ -177,11 +213,43 @@ export default {
       }
 
       .download-wrapper {
+        display: flex;
         font-size: 14px;
         font-weight: 500;
         color: #666666;
+
+        > div {
+          display: flex;
+          align-items: center;
+          margin-right: 60px;
+
+          img {
+            max-width: 14px;
+            margin-right: 10px;
+          }
+
+          a {
+            text-decoration: none;
+            color: #666666;
+          }
+        }
       }
     }
+
+    .qr-code {
+      flex: 0 0 190px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        max-width: 80%;
+      }
+    }
+  }
+
+  .el-tabs__content{
+    padding-top: 14px;
   }
 }
 </style>