diff --git a/src/views/front/Card.vue b/src/views/front/Card.vue
index e8aa3b2bee8da4626061d72198c9a072207e2b70..6c7f5679610e85df0ffe69bc75e998b1b3e21022 100644
--- a/src/views/front/Card.vue
+++ b/src/views/front/Card.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="card-box">
-        <a class="card-img" :href="url">
-            <img alt="图片">
+        <a class="card-img" :href="linkUrl">
+            <img :src="imgUrl" alt="图片">
         </a>
         
-        <div class="card-title">{{ title }}</div>
-        <div class="card-info">{{ info }}</div>
+        <div class="card-text card-title">{{ title }}</div>
+        <div class="card-text card-info">{{ info }}</div>
     </div>
 </template>
 <script setup>
@@ -13,18 +13,32 @@
     const props = defineProps({
         title: String,
         info: String,
-        url: String,
+        linkUrl: String,
+        imgUrl: String,
     })
 </script>
 <style scoped>
     .card-box {
+        border-radius: 8px;
+        margin: 20px;
+        padding: 20px;
         display: grid;
-        grid-template-columns: 100px 100px;
-        grid-template-rows: 40px 60px;
+        grid-template-columns: 60px 100px;
+        grid-template-rows: 20px 40px;
         grid-auto-flow: row;
+        background-color: #eee;
     }
     .card-img {
         grid-row-start: 1;
         grid-row-end: 3;
     }
+
+    .card-img img {
+        width: 100%;
+        height: 100%;
+    }
+
+    .card-text {
+        margin-left: 10px;
+    }
 </style>
\ No newline at end of file
diff --git a/src/views/front/FuWu.vue b/src/views/front/FuWu.vue
index 56291fe20fd318fbdb2d91399a140dadbb7079a9..743246fd9d1c2ce1d06b2b21126a62b9108675fe 100644
--- a/src/views/front/FuWu.vue
+++ b/src/views/front/FuWu.vue
@@ -6,8 +6,8 @@
       </el-carousel-item>
     </el-carousel>
     <el-row id="cards" :gutter="20">
-      <el-col v-for="cardData in cardDatas" :span="6">
-        <Card :title="cardData.title" :info="cardData.info" :url="cardData.url"/>
+      <el-col v-for="cardData in cardDatas" :span="8">
+        <Card :title="cardData.title" :info="cardData.info" :linkUrl="cardData.linkUrl" :imgUrl="cardData.imgUrl"/>
       </el-col>
     </el-row>
   </div>
@@ -15,10 +15,9 @@
 
 <script setup>
   let cardDatas = [
-    { title:"第一链接", info: "第一段信息", url: "www.baidu.com"},
-    { title:"第二链接", info: "第二段信息", url: "www.baidu.com"},
-    { title:"第三链接", info: "第三段信息", url: "www.baidu.com"},
-    { title:"第四链接", info: "第四段信息", url: "www.baidu.com"},
+    { title:"第一链接", info: "第一段信息", linkUrl: "https://www.baidu.com", imgUrl: "https://www.baidu.com/favicon.ico"},
+    { title:"第二链接", info: "第二段信息", linkUrl: "https://www.baidu.com", imgUrl: "https://www.baidu.com/favicon.ico"},
+    { title:"第三链接", info: "第三段信息", linkUrl: "https://www.baidu.com", imgUrl: "https://www.baidu.com/favicon.ico"},
   ]
   import Card from './Card.vue'
 </script>
@@ -33,7 +32,7 @@
 } 
 #cards {
   margin-top: 20px;
-  height: 100px;
+  height: 140px;
 }
 .grid-content {
   min-height: 100px;