模块的交互效果修改

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;
         }

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%;
       }

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;

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"
-           v-for="item in tool"
-           :key="item.name"
-           @click="$router.push({path:item.path})">
+      <div
+        class="tool-card"
+        v-for="item in tool"
+        :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_iphone.png" alt=""/>Iphone</div>
+          <div><img src="./img/icon_android.png" alt="" />Android</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>

src/views/Service/book.vue

@@ -127,12 +127,14 @@ export default {
   .book-card {
     display: flex;
     height: 190px;
-    background: #FFFFFF;
-    box-shadow: 0 4px 15px 2px rgba(4, 64, 141, 0.08);
+    background: #FFFFFF;  
     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;