Merge branch 'master' of https://gitee.com/gs1-office-web-sit/gs1

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/router/index.js

@@ -296,6 +296,13 @@ const routes = [
               name: "条码微站",
             },
           },
+          {
+            path: "Book",
+            component: () => import("@/views/Service/book"),
+            meta: {
+              name: "软件下载",
+            },
+          },
         ],
       },
     ],

src/views/Search/tools.vue

@@ -18,9 +18,9 @@
         <div class="tool-img">
           <img src="./img/pic_tiaomashuisu.png" alt=""/>
         </div>
-        <div class="tool-name">
-          <img src="./img/icon_android.png" alt=""/>Android
-          <img src="./img/icon_iphone.png" alt=""/>Iphone
+        <div class="tool-name y-center zs-card">
+          <div><img src="./img/icon_android.png" alt=""/>Android</div>
+          <div><img src="./img/icon_iphone.png" alt=""/>Iphone</div>
         </div>
       </div>
     </div>
@@ -97,8 +97,18 @@ export default {
         font-weight: 500;
         color: #0d2c6c;
         text-align: center;
+      }
 
-        > img {
+      .zs-card.tool-name {
+        justify-content: space-between;
+        padding: 0 14px;
+
+        > div {
+          display: flex;
+          align-items: center;
+        }
+
+        img {
           margin-right: 9px;
         }
       }

src/views/Service/book.vue

+<template>
+  <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>
+  </div>
+</template>
+
+<script>
+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">
+.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: #666666;
+        line-height: 20px;
+      }
+    }
+  }
+
+  .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);
+    }
+
+    .app-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex: 1;
+      padding: 30px 20px;
+
+      .title {
+        font-size: 20px;
+        font-weight: 500;
+        color: #454545;
+      }
+
+      .desc {
+        font-size: 14px;
+        font-weight: 400;
+        color: #999999;
+      }
+
+      .download-wrapper {
+        font-size: 14px;
+        font-weight: 500;
+        color: #666666;
+      }
+    }
+  }
+}
+</style>