优化

src/main/zhi-rong-web/src/components/home/ServiceBox.vue

@@ -2,6 +2,8 @@
     <router-link :to="info.path" class="service-box">
         <div class="service-top">
             <img :src="require(`../../assets/${info.icon}.png`)" alt="" />
+            <img src="../../assets/png-baidi@3x.png" alt="" class="service-top_img service-top_img_one" />
+            <img src="../../assets/png-xuanting@3x.png" alt="" class="service-top_img service-top_img_two" />
         </div>
         <div class="service-text">
             <div class="text2">{{ info.name }}</div>
@@ -84,9 +86,23 @@ export default {
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    position: relative;
     img {
         width: 140px;
         height: 130px;
+        position: absolute;
+        z-index: 3;
+    }
+    .service-top_img {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+    }
+    .service-top_img_two {
+        display: none;
     }
 }
 .service-text {
@@ -116,6 +132,12 @@ export default {
     .service-text {
         color: #0144cb;
     }
+    .service-top_img_one {
+        display: none;
+    }
+    .service-top_img_two {
+        display: block;
+    }
 }
 .service-content {
     font-size: 14px;

src/main/zhi-rong-web/src/views/About.vue

@@ -20,7 +20,7 @@
                     <template #sub>Convert Database</template>
                 </divider-title>
                 <div class="intro_con_content">
-                    <el-image fit="fill" class="intro_con_content_img" />
+                    <img src="../assets/bg@3x.png" alt="" class="intro_con_content_img" />
                     <div class="intro_con_content_right">
                         <div class="intro_con_content_right_title">扬州市知识产权综合服务平合</div>
                         <div class="intro_con_content_right_segmentation"></div>

src/main/zhi-rong-web/src/views/Home.vue

@@ -172,7 +172,12 @@
                                 <img
                                     src="../assets/nav_icon_bianjirigth@3x.png"
                                     alt=""
-                                    class="supply_side_demand_three_img"
+                                    class="supply_side_demand_three_img supply_side_demand_three_img_one"
+                                />
+                                <img
+                                    src="../assets/nav_icon_bianji@3x.png"
+                                    alt=""
+                                    class="supply_side_demand_three_img supply_side_demand_three_img_two"
                                 />
                             </div>
                         </div>
@@ -1339,7 +1344,21 @@ export default {
         }
     }
 }
-
+.banner_con_titleOne_con_one {
+    background: #2167eb;
+    border-radius: 2px 0px 2px 2px;
+    border: 1px solid rgba(56, 85, 142, 0.04);
+}
+.banner_con_titleOne_con_two {
+    background: #e0eeff;
+    border-radius: 2px 0px 2px 2px;
+    border: 1px solid rgba(56, 85, 142, 0.04);
+}
+.banner_con_titleTwo_con {
+    background: #e0eeff;
+    border-radius: 2px 0px 2px 2px;
+    border: 1px solid rgba(56, 85, 142, 0.04);
+}
 .ad {
     display: block;
     width: 100%;
@@ -1514,10 +1533,16 @@ export default {
     padding-bottom: 90px;
     .banner_con_titleOne {
         width: 1200px;
+        height: 200px;
+        margin-top: 80px;
+        box-sizing: border-box;
         display: flex;
         justify-content: space-between;
         margin-bottom: 20px;
         .banner_con_titleOne_img {
+            position: absolute;
+            bottom: 0;
+            left: 0;
             width: 590px;
             height: 240px;
             // background: #3452fe;
@@ -1528,7 +1553,7 @@ export default {
             cursor: pointer;
             .supply_side {
                 position: absolute;
-                top: 82px;
+                top: 42px;
                 left: 38px;
                 .supply_side_one {
                     font-size: 22px;
@@ -1590,6 +1615,30 @@ export default {
                         height: 22px;
                         margin-left: 3px;
                     }
+                    .supply_side_demand_three_img_two {
+                        display: none;
+                    }
+                }
+            }
+        }
+        .banner_con_titleOne_con_two:hover {
+            background: #2167eb;
+            border-radius: 2px 0px 2px 2px;
+            border: 1px solid rgba(56, 85, 142, 0.04);
+            .supply_side_demand_one {
+                color: #ffffff;
+            }
+            .supply_side_demand_two {
+                color: #ffffff;
+            }
+            .supply_side_demand_three {
+                background: #ffe54f;
+                color: #000000;
+                .supply_side_demand_three_img_one {
+                    display: none;
+                }
+                .supply_side_demand_three_img_two {
+                    display: block;
                 }
             }
         }
@@ -1621,6 +1670,19 @@ export default {
                 }
             }
         }
+        .banner_con_titleTwo_con:hover {
+            background: #2167eb;
+            border-radius: 2px 0px 2px 2px;
+            border: 1px solid rgba(56, 85, 142, 0.04);
+            .supply_sides {
+                .supply_sides_one {
+                    color: #ffffff;
+                }
+                .supply_sides_two {
+                    color: #ffffff;
+                }
+            }
+        }
         .banner_con_titleTwo_img {
             width: 387px;
             height: 161px;