refactor(ModelCard): 优化 ModelCard 组件的鼠标悬停效果

- 将鼠标悬停事件处理从 view-link 元素移至整个 model-item 元素- 调整悬停时的样式变化，使整个卡片区域响应悬停
- 优化 CSS 样式，提高用户体验

src/views/Home/components/ModelCard.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="model-item" :style="{ backgroundImage: `url(${model.image})` }">
+  <div class="model-item"
+       @mouseover="hoverIndex = index"
+       @mouseleave="hoverIndex = -1"
+       :style="{ backgroundImage: `url(${model.image})` }">
     <div class="flex align-items-center">
       <img :src="model.icon" alt="" style="height: 23px; margin-right: 8px" />
       <p class="model-item-title">{{ model.title }}</p>
@@ -7,8 +10,6 @@
     <p class="model-item-desc">{{ model.description }}</p>
     <div
         class="view-link"
-         @mouseover="hoverIndex = index"
-         @mouseleave="hoverIndex = -1"
         @click="$emit('open')">
       <span>{{ getText(index) }}</span>
       <img v-if="hoverIndex === index && index !== 2" src="@/assets/img/home/tob.png" alt="">
@@ -94,23 +95,29 @@ p {
     margin-right: 5px;
   }
 
-  &:hover span {
+  //&:hover span {
+  //  color: #3976D7;
+  //}
+}
+.model-item:hover {
+  .view-link {
+    background: #fff;
+    color: red;
+    font-weight: 500;
+    width: 100%;
+    height: 30px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  & span {
     color: #3976D7;
   }
 }
-.view-link:hover {
-  background: #fff;
-  color: red;
-  font-weight: 500;
-  width: 100%;
-  height: 30px;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
+
 .icon{
   fill:#fff;
   color:#fff;