添加鼠标移动到可点模块 鼠标样式改变 全局新增加载动画

src/views/HomeView.vue

@@ -9,9 +9,6 @@
         <div v-for="(item, i) in apartmentData.data" :key="i">
           <listItem :style="{ 'margin-left': i === 0 ? 0 : '12px' }" :data="item" v-if="i < 4"></listItem>
         </div>
-        <!-- <listItem style="margin-left:12px;"></listItem>
-        <listItem style="margin-left:12px;"></listItem>
-        <listItem style="margin-left:12px;"></listItem> -->
       </div>
     </div>
     <!-- 科普 -->
@@ -25,9 +22,11 @@
                   <img src="../assets/homeImage/informationO.png" class="img" alt="">
                   <span class="title">攻略</span>
                 </div>
-                <div v-for="(item, i) in informationData" :key="i" class="dis-f al-item list-li">
+                <div v-for="(item, i) in informationData && informationData[0].list" :key="i" class="dis-f al-item list-li">
                   <div class="list-mark"></div>
-                  <span>{{ item }}</span>
+                  <div class="text-s" @click="informationDataOpen(item)">
+                    <span class="text">{{ item.title }}</span>
+                  </div>
                 </div>
               </div>
               <div class="list-box">
@@ -35,9 +34,11 @@
                   <img src="../assets/homeImage/informationT.png" class="img" alt="">
                   <span class="title">科普</span>
                 </div>
-                <div v-for="(item, i) in informationData" :key="i" class="dis-f al-item list-li">
+                <div v-for="(item, i) in informationData && informationData[1].list" :key="i" class="dis-f al-item list-li">
                   <div class="list-mark"></div>
-                  <span>{{ item }}</span>
+                  <div class="text-s" @click="informationDataOpen(item)">
+                    <span class="text">{{ item.title }}</span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -200,11 +201,16 @@ import footerTool from '@/components/footer/footer.vue'
 import { useRouter } from 'vue-router'
 import store from '../store/index';
 import api from "../utils/api";
+import { ElMessage } from 'element-plus'
 
 // 
-let informationData = [
-  '123456', '2456789', '3456789', '47894564', '545649879987'
-]
+let informationData = ref([
+  {}, {}
+])
+let informationDataOpen = (item) => {
+  window.open(item.url)
+}
+
 let ListSelectBtn = reactive({ data: [], selectType: 'recommend' })
 
 //首页数据
@@ -235,7 +241,7 @@ watchEffect(() => {
 
     })
   }
-
+  informationData.value = store.state.indexData.articleList
 })
 
 //公寓数据
@@ -311,6 +317,11 @@ let getRecommendList = () => {
         loadMore.value = false
         loadText.value = '到底了'
       }
+    } else {
+      ElMessage({
+        message: res.message,
+        center: true,
+      })
     }
   })
 }
@@ -356,12 +367,12 @@ let indexWaterfallBoxCheck = (res) => {
 }
 
 //跳转个人房源
-let personHouseingInfo = (type, data,areaItem) => {
+let personHouseingInfo = (type, data, areaItem) => {
   router.push({
     path: `/personHousing`,
     query: {
       type,
-      data:JSON.stringify(data),
+      data: JSON.stringify(data),
       areaItem
     },
     // params:{
@@ -438,7 +449,7 @@ img {
 
 .information-box {
   width: 836px;
-  height: 329px;
+  min-height: 329px;
   background: inherit;
   background-color: rgba(255, 255, 255, 1);
   border: none;
@@ -492,6 +503,22 @@ img {
     .list-li {
       margin-top: 20px;
       cursor: pointer;
+
+      .text-s {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        .text {
+          font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+          font-weight: 400;
+          font-style: normal;
+          font-size: 16px;
+          text-align: left;
+          letter-spacing: normal;
+          color: #333333;
+        }
+      }
     }
 
     .list-mark {
@@ -708,4 +735,5 @@ img {
   font-size: 16px;
   color: #7F7F7F;
   text-align: left;
-}</style>
+}
+</style>