three card

src/components/MetalPlate/Bottom/NewBottomMetal.vue

@@ -5,10 +5,22 @@
         <div class="first_wrap">
           <div class="title">更多服务 ｜ More</div>
           <div class="links">
-            <p class="link" @click="toPage('/')">整机开发</p>
-            <p class="link" @click="toPage('/pc/design')">工业设计</p>
-            <p class="link" @click="toPage('/pc/hardware')">软硬件开发</p>
-            <p class="link" @click="toPage('/pc/metal')">加工生产</p>
+            <div class="link" @click="toPage('/')">
+              <span>整机开发</span>
+              <p>></p>
+            </div>
+            <div class="link" @click="toPage('/pc/design')">
+              <span>工业设计</span>
+              <p>></p>
+            </div>
+            <div class="link" @click="toPage('/pc/hardware')">
+              <span>软硬件开发</span>
+              <p>></p>
+            </div>
+            <div class="link" @click="toPage('/pc/metal')">
+              <span>加工生产</span>
+              <p>></p>
+            </div>
             <!-- <p class="link" @click="toPage('/medical')">医疗健康</p> -->
           </div>
         </div>
@@ -156,9 +168,15 @@ onMounted(() => {
             color: #000000;
             margin-bottom: 17px;
             cursor: pointer;
-            &:hover {
-              text-decoration: underline;
-            }
+            border-bottom: solid 1px #ddd;
+            width: 270px;
+            padding-bottom: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            // &:hover {
+            //   text-decoration: underline;
+            // }
           }
         }
       }
@@ -167,7 +185,7 @@ onMounted(() => {
         width: 1px;
         background: #d8d8d8;
         margin-right: 101px;
-        margin-left: 145px;
+        margin-left: 45px;
       }
       .second_wrap {
         display: flex;

src/components/MetalPlate/Bottom/NewBottomWhiteMetal.vue

@@ -156,9 +156,15 @@ onMounted(() => {
             color: #000000;
             margin-bottom: 17px;
             cursor: pointer;
-            &:hover {
-              text-decoration: underline;
-            }
+            border-bottom: solid 1px #ddd;
+            width: 270px;
+            padding-bottom: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            // &:hover {
+            //   text-decoration: underline;
+            // }
           }
         }
       }
@@ -167,7 +173,7 @@ onMounted(() => {
         width: 1px;
         background: #d8d8d8;
         margin-right: 101px;
-        margin-left: 145px;
+        margin-left: 45px;
       }
       .second_wrap {
         display: flex;