行业应用列表添加按钮进入详情

src/views/componentServices/list.vue

@@ -3,13 +3,14 @@
     <div style="margin: 0 auto; padding: 0 84px;">
     <div style="margin: 0 auto; padding: 0 84px;">
       <el-row :gutter="24">
       <el-row :gutter="24">
         <el-col v-for="(item,index) in assemblyData" :key="item.id" :span="6">
         <el-col v-for="(item,index) in assemblyData" :key="item.id" :span="6">
-          <div class="item flex">
-            <img :src="item.image" alt=""/>
-            <div>
+          <div class="item flex service-card">
+            <div class="thumb">
+              <img :src="item.image" alt=""/>
+            </div>
+            <div class="content">
               <div class="title">{{ item.title }}</div>
               <div class="title">{{ item.title }}</div>
               <p v-html="item.description"></p>
               <p v-html="item.description"></p>
-
-              <el-button round @click="openPage(item,index)">了解详情</el-button>
+              <el-button size="small" type="primary" plain round @click="openPage(item,index)">了解详情</el-button>
             </div>
             </div>
           </div>
           </div>
         </el-col>
         </el-col>
@@ -55,30 +56,47 @@ getAassemblyList()
 
 
 .item {
 .item {
   //height: 168px;
   //height: 168px;
-  //background: #FBFCFE;
   //background: url("@/assets/images/assemblyBg.jpg") no-repeat center center / cover;
   //background: url("@/assets/images/assemblyBg.jpg") no-repeat center center / cover;
-  background: #ffffff;
-  border-radius: 10px;
-  padding: 30px 26px 40px 40px;
+  background: #F7FAFF; /* 蓝白风格浅蓝背景 */
+  border: 1px solid #E3EEFF;
+  border-radius: 14px;
+  padding: 28px 24px 32px;
   margin-bottom: 40px;
   margin-bottom: 40px;
   text-align: center;
   text-align: center;
+  box-shadow: 0 4px 18px rgba(31, 74, 175, 0.06);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(31, 74, 175, 0.12);
+  }
+
+  .thumb {
+    width: 110px;
+    height: 110px;
+    border-radius: 22px;
+    overflow: hidden;
+    margin: 0 auto 18px;
+    background: none;
+    box-shadow: none;
+  }
 
 
   .title {
   .title {
     font-weight: bold;
     font-weight: bold;
-    font-size: 20px;
-    line-height: 36px;
-    height: 36px;
-    color: #303233;
+    font-size: 18px;
+    line-height: 28px;
+    height: 28px;
+    color: #1F2D3D;
   }
   }
 
 
   p {
   p {
     font-weight: 400;
     font-weight: 400;
-    font-size: 16px;
-    color: rgb(102, 102, 102);
-    line-height: 24px;
-    margin-top: 9px;
-    margin-bottom: 30px;
-    height: 48px;
+    font-size: 14px;
+    color: #5E6D82;
+    line-height: 22px;
+    margin-top: 8px;
+    margin-bottom: 22px;
+    height: 44px;
     overflow: hidden;
     overflow: hidden;
     text-overflow: ellipsis;
     text-overflow: ellipsis;
     display: -webkit-box;
     display: -webkit-box;
@@ -86,13 +104,12 @@ getAassemblyList()
     -webkit-box-orient: vertical;
     -webkit-box-orient: vertical;
   }
   }
 
 
-  img {
-    width: 70px;
-    height: 70px;
-    object-fit: contain;
-    //margin-right: 30px;
-    border-radius: 15px;
-    margin: 0 auto 15px;
+  .thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain; /* 不裁切，完整展示 */
+    display: block;
+    border-radius: 0;
   }
   }
 }
 }
 
 
@@ -101,11 +118,14 @@ getAassemblyList()
 /* 清理过期的弹窗与Tab样式 */
 /* 清理过期的弹窗与Tab样式 */
 
 
 .el-button {
 .el-button {
-  height: 40px;
-  line-height: 38px;
-  width: 140px;
-  border: 1px solid rgb(31, 74, 175);
-  border-radius: 10px;
-  color: rgb(31, 74, 175);
+  height: 32px;
+  line-height: 30px;
+  padding: 0 14px;
+  width: auto;
+  min-width: 0;
+  border: 1px solid #1F4AAF;
+  border-radius: 18px;
+  color: #1F4AAF;
+  background: #FFFFFF;
 }
 }
 </style>
 </style>