From dd5f6018556d14717fc5430b0e95bb409017c3cf Mon Sep 17 00:00:00 2001
From: baex <11221626+baex@user.noreply.gitee.com>
Date: Fri, 26 Jan 2024 08:28:37 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=5Fv2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: baex <11221626+baex@user.noreply.gitee.com>
---
 src/views/front/Card.vue | 58 +++++++++++++++++++++++-----------------
 src/views/front/FuWu.vue | 13 +++++----
 2 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/src/views/front/Card.vue b/src/views/front/Card.vue
index e8aa3b2b..533fd04e 100644
--- a/src/views/front/Card.vue
+++ b/src/views/front/Card.vue
@@ -1,30 +1,40 @@
 <template>
-    <div class="card-box">
-        <a class="card-img" :href="url">
-            <img alt="图片">
-        </a>
-        
-        <div class="card-title">{{ title }}</div>
-        <div class="card-info">{{ info }}</div>
-    </div>
+  <div class="main-content">
+    <el-carousel id="carousel" height="400px">
+      <el-carousel-item v-for="item in 3">
+        <div class="images"></div>
+      </el-carousel-item>
+    </el-carousel>
+    <el-row id="cards" :gutter="20">
+      <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>
 </template>
+
 <script setup>
-    import { defineProps } from 'vue'
-    const props = defineProps({
-        title: String,
-        info: String,
-        url: String,
-    })
+  let cardDatas = [
+    { 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>
 <style scoped>
-    .card-box {
-        display: grid;
-        grid-template-columns: 100px 100px;
-        grid-template-rows: 40px 60px;
-        grid-auto-flow: row;
-    }
-    .card-img {
-        grid-row-start: 1;
-        grid-row-end: 3;
-    }
+.images {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: url("@/assets/imgs/黑洞3.png");
+  background-size: cover;
+  background-position: center center;
+} 
+#cards {
+  margin-top: 20px;
+  height: 140px;
+}
+.grid-content {
+  min-height: 100px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/front/FuWu.vue b/src/views/front/FuWu.vue
index 56291fe2..743246fd 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;
-- 
Gitee


From 5ab161f22dffd45346292c106d76deea72c54e68 Mon Sep 17 00:00:00 2001
From: baex <11221626+baex@user.noreply.gitee.com>
Date: Fri, 26 Jan 2024 08:32:02 +0000
Subject: [PATCH 2/2] card

Signed-off-by: baex <11221626+baex@user.noreply.gitee.com>
---
 src/views/front/Card.vue | 72 +++++++++++++++++++++-------------------
 1 file changed, 38 insertions(+), 34 deletions(-)

diff --git a/src/views/front/Card.vue b/src/views/front/Card.vue
index 533fd04e..6c7f5679 100644
--- a/src/views/front/Card.vue
+++ b/src/views/front/Card.vue
@@ -1,40 +1,44 @@
 <template>
-  <div class="main-content">
-    <el-carousel id="carousel" height="400px">
-      <el-carousel-item v-for="item in 3">
-        <div class="images"></div>
-      </el-carousel-item>
-    </el-carousel>
-    <el-row id="cards" :gutter="20">
-      <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>
+    <div class="card-box">
+        <a class="card-img" :href="linkUrl">
+            <img :src="imgUrl" alt="图片">
+        </a>
+        
+        <div class="card-text card-title">{{ title }}</div>
+        <div class="card-text card-info">{{ info }}</div>
+    </div>
 </template>
-
 <script setup>
-  let cardDatas = [
-    { 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'
+    import { defineProps } from 'vue'
+    const props = defineProps({
+        title: String,
+        info: String,
+        linkUrl: String,
+        imgUrl: String,
+    })
 </script>
 <style scoped>
-.images {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-image: url("@/assets/imgs/黑洞3.png");
-  background-size: cover;
-  background-position: center center;
-} 
-#cards {
-  margin-top: 20px;
-  height: 140px;
-}
-.grid-content {
-  min-height: 100px;
-}
+    .card-box {
+        border-radius: 8px;
+        margin: 20px;
+        padding: 20px;
+        display: grid;
+        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
-- 
Gitee