模块的交互效果修改

840d0e44 · 林家欣 · c849cf12 · 840d0e44 · 840d0e44 · 840d0e44
Commit 840d0e44 authored Nov 22, 2021 by 林家欣
6 changed files
--- a/src/views/News/Health.vue
+++ b/src/views/News/Health.vue
@@ -102,10 +102,12 @@ export default {
      li {
        width: 363px;
        background: #ffffff;
-        box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
        // border-radius: 4px;
        margin-bottom: 30px;
        border-top: 5px solid #00B6DE;
+        &:hover{
+          box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
+        }
        .health-li-tp{
          margin-top: -1px;
        }

--- a/src/views/News/Logistics.vue
+++ b/src/views/News/Logistics.vue
 <template>
-  <div class="container" >
+  <div class="container">
    <breadcrumb />
    <div class="composite">
      <div class="title">
        <p>物流</p>
      </div>
-      <p>商品条码标识系统是在物流供应链中广泛应用的物品标识系统，能够实现上下游企业间信息传递的“无缝”对接。箱码（Case Code）是商品外箱上使用的条码标识，企业在订货、配送、收货、库管、发货、送货及退货等物流过程中扫描箱码后，相关信息便自动记录到企业信息系统中，实现数据的自动采集与分析，从而降低物流成本，提升企业效率。系列货运包装箱代码（SSCC）是为物流单元，如：托盘、集装箱等，提供的唯一标识。在物流配送过程中，企业仅需扫描SSCC，便实现对整个托盘/集装箱产品信息的采集，从而大幅提升供应链效率。</p>
+      <p>
-      <img src="../../assets/image/news/wl1.png" alt="">
+        商品条码标识系统是在物流供应链中广泛应用的物品标识系统，能够实现上下游企业间信息传递的“无缝”对接。箱码（Case
+        Code）是商品外箱上使用的条码标识，企业在订货、配送、收货、库管、发货、送货及退货等物流过程中扫描箱码后，相关信息便自动记录到企业信息系统中，实现数据的自动采集与分析，从而降低物流成本，提升企业效率。系列货运包装箱代码（SSCC）是为物流单元，如：托盘、集装箱等，提供的唯一标识。在物流配送过程中，企业仅需扫描SSCC，便实现对整个托盘/集装箱产品信息的采集，从而大幅提升供应链效率。
+      </p>
+      <img src="../../assets/image/news/wl1.png" alt="" />
    </div>
    <div class="row wltp">
      <div class="col-lg-6">
-        <img src="../../assets/image/news/wl2.png" alt="">
+        <img src="../../assets/image/news/wl2.png" alt="" />
      </div>
      <div class="col-lg-6">
-        <img src="../../assets/image/news/wl3.png" alt="">
+        <img src="../../assets/image/news/wl3.png" alt="" />
      </div>
    </div>
    <div class="div3">
      <div class="div3-img row">
        <div class="col-lg-7">
-           <img src="../../assets/image/news/wl4.png" alt="" >
+          <img src="../../assets/image/news/wl4.png" alt="" />
+        </div>
+        <div class="div-right col-lg-5">
+          <p>高效 · 便捷 · 互联互通</p>
+          <button
+            type="button"
+            class="el-button el-button--primary el-button--small"
+          >
+            快消品GS1探索之旅
+          </button>
        </div>
-          <div class="div-right col-lg-5">
-            <p>高效 · 便捷 · 互联互通</p>
-            <button  type="button" class="el-button el-button--primary el-button--small">快消品GS1探索之旅</button>
-          </div>
      </div>
    </div>
    <div class="div4">
      <div class="row">
-        <div class="col-lg-3 " v-for="(item,i) in typeList" :key="i">
+        <div class="col-lg-3" v-for="(item, i) in typeList" :key="i">
          <div class="list-style">
            <p class="div4-title">
              <img :src="item.icon" alt="" />
-              <span>{{item.title}}</span>
+              <span>{{ item.title }}</span>
            </p>
-            <ul >
+            <ul>
-              <li  v-for="(value,index) in item.list" :key="index">{{value.name}}</li>
+              <li v-for="(value, index) in item.list" :key="index">
+                {{ value.name }}
+              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script>
 import breadcrumb from "../comps/breadcrumb.vue";
 import cate from "../comps/cate.vue";
 export default {
  components: {
-   breadcrumb,
+    breadcrumb,
  },
  data() {
    return {
+      typeList: [
-     typeList:[
+        {
-       {
+          icon: require("../../assets/image/news/icon_biaozhun.png"),
-         icon:require("../../assets/image/news/icon_biaozhun.png"),
+          title: "标准",
-         title:'标准',
+          list: [
-         list:[
+            {
-           {
+              name: "标准标准标准标准标准标准标准标准标准标准标准标准标准标准标准标准",
-             name:'标准标准标准标准标准标准标准标准标准标准标准标准标准标准标准标准',
+            },
-           },
+            {
-           {
+              name: "标准标准标准标准标准标准标准标准",
-             name:'标准标准标准标准标准标准标准标准',
+            },
-           },
+            {
-           {
+              name: "标准标准标准标准标准标准标准标准",
-             name:'标准标准标准标准标准标准标准标准',
+            },
-           },
+          ],
+        },
+        {
+          icon: require("../../assets/image/news/icon_zhinan.png"),
-         ]
+          title: "指南&案例",
-       },
+          list: [
-       {
+            {
-         icon:require("../../assets/image/news/icon_zhinan.png"),
+              name: "指南指南指南指南指南指南指南指南",
-         title:'指南&案例',
+            },
-         list:[
+            {
-           {
+              name: "指南指南指南指南指南指南指南指南",
-             name:'指南指南指南指南指南指南指南指南',
+            },
-           },
+            {
-           {
+              name: "指南指南指南指南指南指南指南指南",
-             name:'指南指南指南指南指南指南指南指南',
+            },
-           },
+          ],
-           {
+        },
-             name:'指南指南指南指南指南指南指南指南',
+        {
-           },
+          icon: require("../../assets/image/news/icon_zhengce.png"),
-         ]
+          title: "政策法规&行业资讯",
-       },
+          list: [
-       {
+            {
-         icon:require("../../assets/image/news/icon_zhengce.png"),
+              name: "政策法规政策法规政策法规政策法规",
-         title:'政策法规&行业资讯',
+            },
-         list:[
+            {
-           {
+              name: "政策法规政策法规政策法规政策法规",
-             name:'政策法规政策法规政策法规政策法规',
+            },
-           },
+            {
-           {
+              name: "政策法规政策法规政策法规政策法规",
-             name:'政策法规政策法规政策法规政策法规',
+            },
-           },
+          ],
-           {
+        },
-             name:'政策法规政策法规政策法规政策法规',
+        {
-           },
+          icon: require("../../assets/image/news/icon_changjianwenti.png"),
-         ]
+          title: "常见问题",
-       },
+          list: [
-       {
+            {
-         icon:require("../../assets/image/news/icon_changjianwenti.png"),
+              name: "常见问题常见问题常见问题常见问题",
-         title:'常见问题',
+            },
-         list:[
+            {
-           {
+              name: "常见问题常见问题常见问题常见问题",
-             name:'常见问题常见问题常见问题常见问题',
+            },
-           },
+            {
-           {
+              name: "常见问题常见问题常见问题常见问题",
-             name:'常见问题常见问题常见问题常见问题',
+            },
-           },
+          ],
-           {
+        },
-             name:'常见问题常见问题常见问题常见问题',
+      ],
-           },
-         ]
-       },
-     ]
    };
  },
  mounted() {
@@ -134,19 +135,14 @@ export default {
    ]);
  },
  methods: {},
 };
 </script>
 <style lang="scss" scoped>
 .composite {
  @media screen and (min-width: 992px) {
  }
  @media screen and (max-width: 992px) {
+  }
-  }   
 }
 </style>
 <style lang="scss" scoped>
@@ -154,7 +150,7 @@ export default {
  @include module-box;
  padding: 20px 0;
  margin-bottom: 30px;
-  .title{
+  .title {
    font-size: 18px;
    // font-family: PingFangSC-Medium;
    white-space: nowrap;
@@ -162,92 +158,101 @@ export default {
    text-align: left;
    align-self: flex-start;
    margin-left: 30px;
-    border-bottom:1px solid #F3F3F3;
+    border-bottom: 1px solid #f3f3f3;
  }
-  >p{
+  > p {
    margin: 29px 30px;
    font-size: 14px;
    color: #666666;
    line-height: 26px;
  }
-  img{
+  img {
    width: 80%;
    margin: 0 10% 10px;
  }
 }
-.wltp{
+.wltp {
  margin-bottom: 30px;
-  img{
+  img {
    width: 100%;
  }
+  div {
+    &:nth-child(1) {
+      img:hover {
+        box-shadow: 0px 4px 15px 2px rgba(236, 164, 34, 0.2);
+      }
+    }
+    &:nth-child(2) {
+      img:hover {
+        box-shadow: 0px 4px 15px 2px rgba(232, 86, 134, 0.2);
+      }
+    }
+  }
 }
-.div3{
+.div3 {
  @include module-box;
  overflow: hidden;
  margin-bottom: 30px;
-  .div3-img{
+  .div3-img {
-    img{
+    img {
      width: 100%;
    }
-    .div-right{
+    .div-right {
      text-align: center;
-      p{
+      p {
-        color: #0E2C6B;
+        color: #0e2c6b;
        font-size: 26px;
        text-align: center;
        margin-top: 20%;
        margin-bottom: 20px;
      }
-      button{
+      button {
-        height: 40px;border-radius: 2px;
+        height: 40px;
+        border-radius: 2px;
        font-size: 16px;
        margin: 0 auto;
        padding: 0 20%;
        margin-bottom: 20%;
      }
    }
  }
 }
-.div4{
+.div4 {
  margin-bottom: 30px;
-  .list-style{
+  .list-style {
    background: #fff;
-    border-top: 5px solid #22BCB9;
+    border-top: 5px solid #22bcb9;
-    .div4-title{
+    .div4-title {
      height: 50px;
-      color: #22BCB9;
+      color: #22bcb9;
      font-size: 16px;
      padding: 0 20px;
-      border-bottom: 1px solid #C5D8EE;
+      border-bottom: 1px solid #c5d8ee;
      margin-bottom: 0;
-      img{
+      img {
        width: 14px;
        height: 16px;
        margin-right: 10px;
      }
-      span{
+      span {
        line-height: 50px;
      }
    }
-    ul{
+    ul {
-      padding:10px 20px;
+      padding: 10px 20px;
-      li{ 
+      li {
        color: #414345;
        font-size: 14px;
        line-height: 40px;
        overflow: hidden;
-        text-overflow: ellipsis;  
+        text-overflow: ellipsis;
-        white-space:nowrap;
+        white-space: nowrap;
+      }
+      li::before {
+        content: "●";
+        color: #22bcb9;
+        margin-right: 10px;
      }
-      li::before{
-            content: "●"; 
-            color: #22BCB9;
-            margin-right: 10px;
-        }
    }
  }
 }

--- a/src/views/News/PicNews.vue
+++ b/src/views/News/PicNews.vue
@@ -96,9 +96,12 @@ export default {
    li {
      width: 216px;
      background: #ffffff;
-      box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
      border-radius: 4px;
      margin-bottom: 30px;
+      cursor: pointer;
+      &:hover{
+        box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
+      }
      img {
        width: 100%;
      }

--- a/src/views/News/index.vue
+++ b/src/views/News/index.vue
@@ -356,8 +356,11 @@ export default {
      .tpzx-li {
        width: 216px;
        background: #ffffff;
-        box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
        border-radius: 4px;
+        &:hover{
+          box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
+          cursor: pointer;
+        }
        img {
          width: 100%;
        }
@@ -385,7 +388,9 @@ export default {
    padding: 20px 0 40px 0;
    .two-kj {
      background: #ffffff;
-      box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
+      &:hover{
+        box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
+      }
    }
    .zxhd {
      .two-kj {
@@ -428,8 +433,13 @@ export default {
      > li {
        display: flex;
        background: #ffffff;
-        box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
        margin: 20px 0;
+        cursor: pointer;
+        padding: 2px;
+        box-sizing: border-box;
+        &:hover{
+          box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
+        }
        .four-li-left {
          background: #f0f0f0;
          display: flex;

--- a/src/views/Search/tools.vue
+++ b/src/views/Search/tools.vue
@@ -2,12 +2,14 @@
  <div class="search-tools_s">
    <div class="title">条码信息查询</div>
    <div class="tools-wrapper clearfix">
-      <div class="tool-card"
+      <div
-           v-for="item in tool"
+        class="tool-card"
-           :key="item.name"
+        v-for="item in tool"
-           @click="$router.push({path:item.path})">
+        :key="item.name"
+        @click="$router.push({ path: item.path })"
+      >
        <div class="tool-img">
-          <img :src="item.img" alt=""/>
+          <img :src="item.img" alt="" />
        </div>
        <div class="tool-name">
          {{ item.name }}
@@ -16,11 +18,11 @@
      <div class="tool-card" @click="window.open('http://www.chinatrace.org/')">
        <div class="tool-img">
-          <img src="./img/pic_tiaomashuisu.png" alt=""/>
+          <img src="./img/pic_tiaomashuisu.png" alt="" />
        </div>
        <div class="tool-name y-center zs-card">
-          <div><img src="./img/icon_android.png" alt=""/>Android</div>
+          <div><img src="./img/icon_android.png" alt="" />Android</div>
-          <div><img src="./img/icon_iphone.png" alt=""/>Iphone</div>
+          <div><img src="./img/icon_iphone.png" alt="" />Iphone</div>
        </div>
      </div>
    </div>
@@ -35,17 +37,17 @@ export default {
        {
          name: "境内商品条码信息查询",
          img: require("./img/pic_guoneitiaoma.png"),
-          path: '/search/internal'
+          path: "/search/internal",
        },
        {
          name: "缩短码查询",
          img: require("./img/pic_suoduanma.png"),
-          path: '/search/shortcode'
+          path: "/search/shortcode",
        },
        {
          name: "境外商品条码信息查询",
          img: require("./img/pic_jingwaishangpin.png"),
-          path: '/search/external'
+          path: "/search/external",
        },
        // {name:'',img:require('./img/pic_tiaomazhuisu.png')}
      ],
@@ -80,7 +82,9 @@ export default {
      float: left;
      margin-right: 30px;
      margin-bottom: 30px;
+      &:hover{
+        box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.12);
+      }
      .tool-img {
        height: 145px;
@@ -115,5 +119,4 @@ export default {
    }
  }
 }
 </style>
--- a/src/views/Service/book.vue
+++ b/src/views/Service/book.vue
@@ -127,12 +127,14 @@ export default {
  .book-card {
    display: flex;
    height: 190px;
-    background: #FFFFFF;
+    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);
    margin-bottom: 30px;
+    cursor: pointer;
+    &:hover{
+      box-shadow: 0 4px 15px 2px rgba(4, 64, 141, 0.08);
+    }
    .book-img {
      display: flex;
      align-items: center;
@@ -180,7 +182,10 @@ export default {
    border-radius: 2px;
    border: 1px solid rgba(197, 216, 238, 0.5);
    margin-bottom: 30px;
+    cursor: pointer;
+    &:hover{
+      box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
+    }
    .app-img {
      display: flex;
      align-items: center;