更新样式和功能：添加背景图、打字机效果，优化留言板和吐槽区布局

src/views/home.vue

@@ -1,18 +1,16 @@
 <!-- 文章模板 -->
 <template>
   <div>
-    <div class="button-example" @click="aericleClick(items.aur) " v-for="items in datas">
-      <div v-if="items.mg == ''">
-        <h2>{{ items.title }}</h2>
-        <el-text class="mx-1">{{ items.author }}</el-text>
-        <p>{{ items.publishedAt }}</p>
-      </div>
-      <div  v-else="items.mg != ''">
-        <h2>{{ items.title }}</h2>
-        <el-text class="mx-1">{{ items.author }}</el-text>
-        <div>mg</div>
-        <p>{{ items.publishedAt }}</p>
-      </div>
+    <div
+      class="article-card"
+      v-for="item in datas"
+      :key="item.title + item.publishedAt"
+      @click="aericleClick(item.aur)"
+    >
+      <h2>{{ item.title }}</h2>
+      <el-text class="mx-1">{{ item.author }}</el-text>
+      <div v-if="item.mg">mg</div>
+      <p>{{ item.publishedAt }}</p>
     </div>
   </div>
 </template>
@@ -20,14 +18,16 @@
 <script setup>
 import { useRouter } from 'vue-router'
 const router = useRouter()
+
+// 跳转到文章详情
 const aericleClick = (aur) => {
-    router.push({
-        path:'/articlecontents/:url',
-        query:{
-            url:aur
-        }
-    })
+  router.push({
+    path: '/articlecontents/:url',
+    query: { url: aur }
+  })
 }
+
+// 文章数据
 const datas = [
   {
     title: '测试1',
@@ -115,10 +115,19 @@ const datas = [
     mg_b: '',
     publishedAt: '2016-04-12'
   },
+  {
+    title: '测试2',
+    author: '这是img模块测试',
+    aur: '链接',
+    mg: '',
+    mg_b: '',
+    publishedAt: '2016-04-12'
+  },
 ]
 </script>
+
 <style scoped>
-.button-example {
+.article-card {
   border-radius: 10px;
   display: flex;
   flex-direction: column;
@@ -126,37 +135,32 @@ const datas = [
   background-color: rgba(255, 255, 255, 0.85);
   padding: 15px;
   margin-bottom: 30px;
+  transition: all 0.4s ease;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
 }
-
-.button-example {
-    transition: all 0.4s ease;
-    position: relative;
-    overflow: hidden;
+.article-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, 
+            rgba(255,255,255,0.6) 0%, 
+            rgba(255,255,255,0.2) 50%,
+            rgba(255,255,255,0.05) 100%);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.4s ease;
 }
-
-.button-example::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, 
-              rgba(255,255,255,0.6) 0%, 
-              rgba(255,255,255,0.2) 50%,
-              rgba(255,255,255,0.05) 100%);
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.4s ease;
+.article-card:hover {
+  transform: translateY(-5px) perspective(2000px) rotateX(0);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25),
+              0 0 50px rgba(255, 255, 255, 0.3);
 }
-
-.button-example:hover {
-    transform: translateY(-5px) perspective(2000px) rotateX(0);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25),
-                0 0 50px rgba(255, 255, 255, 0.3);
-}
-
-.button-example:hover::before {
-    opacity: 1;
+.article-card:hover::before {
+  opacity: 1;
 }
 </style>