feat: 软件下载

src/components/layout/header/service.js

@@ -109,7 +109,7 @@ export default  {
                 },
                 {
                     id: uuid("gs_nav"),
-                    name: "汉信码生成与识读工具",
+                    name: "一扫通",
                     index: 2,
                     link: "/Service/Book",
                     breadcrumb: [
@@ -119,7 +119,7 @@ export default  {
                 },
                 {
                     id: uuid("gs_nav"),
-                    name: "中国编码",
+                    name: "汉信码生成与识读工具",
                     index: 3,
                     link: "/Service/Book",
                     breadcrumb: [

src/views/Service/book.vue

 <template>
-  <div class="search-content barcodev">
+  <div class="search-content n-service book">
     <div class="title">软件下载</div>
     <div class="body">
       <el-tabs v-model="activeName" class="tab-no-bottom">
         <el-tab-pane label="条码图书" name="first">
+          <div class="book-card" :key="i" v-for="(item,i) in bookList">
+            <div class="book-img">
+              <img :src="item.img" alt="">
+            </div>
+            <div class="book-content">
+              <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>
+              </div>
+            </div>
+          </div>
         </el-tab-pane>
 
         <el-tab-pane label="软件下载" name="second">
+          <div class="app-download" :key="i" v-for="(item,i) in appList">
+            <div class="app-img">
+              <img :src="item.icon" alt="">
+            </div>
+            <div class="app-content">
+              <span class="title">
+                {{ item.name }}
+              </span>
+              <p class="desc">
+                {{ item.desc }}
+              </p>
+              <div class="download-wrapper"></div>
+            </div>
+          </div>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -18,31 +44,144 @@ export default {
   data() {
     return {
       activeName: 'second',
+      appList: [
+        {
+          name: '条码追溯',
+          icon: '',
+          desc: '',
+          android: '',
+          ios: '',
+        },
+        {
+          name: '中国物品编码中心',
+          icon: '',
+          desc: '',
+          android: '',
+          ios: '',
+        },
+        {
+          name: '汉信码生成工具V2.1',
+          icon: '',
+          desc: '',
+          android: '',
+          ios: '',
+        },
+        {
+          name: '条码追溯',
+          icon: '',
+          desc: '',
+          android: '',
+          ios: '',
+        },
+        {
+          name: '一扫通',
+          icon: '',
+          desc: '',
+          android: '',
+          ios: '',
+        },
+      ],
+      bookList: [],
     }
   },
+  created() {
+    this.getBooks()
+  },
+  methods: {
+    getBooks() {
+    }
+  }
 };
 </script>
 
 <style lang="scss">
-.barcodev {
-   p {
-    font-family: PingFangSC-Regular, PingFang SC;
-    margin: 20px 0;
+.book.n-service {
+  .book-card {
+    display: flex;
+    height: 190px;
+    background: #FFFFFF;
+    box-shadow: 0 4px 15px 2px rgba(4, 64, 141, 0.08);
+    border-radius: 2px;
+    border: 1px solid rgba(197, 216, 238, 0.5);
+
+    .book-img {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 162px;
+      border-right: 1px solid rgba(197, 216, 238, 0.5);
+
+      img {
+        max-width: 120px;
+        max-height: 160px;
+      }
+    }
+
+    .book-content {
+      padding: 16px 20px;
+
+      .title {
+        font-size: 21px;
+        font-weight: 500;
+        color: #454545;
+        margin-bottom: 46px;
+      }
+
+      .price {
+        font-size: 32px;
+        font-weight: 500;
+        color: #F23535;
+        line-height: 45px;
+        margin-bottom: 20px;
+      }
+
+      .desc {
         font-size: 14px;
         font-weight: 400;
-    color: #414345;
+        color: #666666;
+        line-height: 20px;
+      }
+    }
   }
 
-  img {
-    width: 100%;
+  .app-download {
+    display: flex;
+    height: 170px;
+    background: #FFFFFF;
+    border-radius: 2px;
+    border: 1px solid rgba(197, 216, 238, 0.5);
+    margin-bottom: 30px;
+
+    .app-img {
+      flex: 0 0 190px;
+      background: rgba(197, 216, 238, 0.2);
     }
 
-  .barcodev-title{
-    display: inline-block;
-    font-size: 16px;
+    .app-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex: 1;
+      padding: 30px 20px;
+
+      .title {
+        font-size: 20px;
         font-weight: 500;
-    color: #F26335;
-    margin: 60px 0 20px;
+        color: #454545;
+      }
+
+      .desc {
+        font-size: 14px;
+        font-weight: 400;
+        color: #999999;
+      }
+
+      .download-wrapper {
+        font-size: 14px;
+        font-weight: 500;
+        color: #666666;
+      }
+    }
   }
 }
 </style>