提交阶段性预览

src/views/community/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="box">
+  <div class="h-full box">
     <div class="header">
       <span class="">智慧物业后台管理系统</span>
       <navbar ref="navbarRef" />
@@ -14,7 +14,7 @@
       </div>
       <div class="communityBody">
         <div class="coummunity_card" v-for="(item, index) in list" :key="index">
-          <el-image :src="item.villageImageUrl ? splitImages(item.villageImageUrl.split(',')[0]) : defaultVilageinfoImage">
+          <el-image :src="item.villageImageUrl ? item.villageImageUrl.split(',')[0] : defaultVilageinfoImage">
             <template #error>
               <div class="image-viewer-slot image-slot">
                 <el-icon><Picture /></el-icon>
@@ -41,6 +41,7 @@
         </div>
       </div>
     </div>
+    <i class="bgcolor"></i>
   </div>
 </template>
 <script lang="ts" setup>
@@ -59,11 +60,6 @@ const currentViliageInfo = ref<communitylist_rows_type>();
 function getlist() {
   getCommunitylistAPI().then((res) => {
     list.value = res.rows;
-    res.rows.forEach((item) => {
-      if (item.villageImageUrl) {
-        console.log(item.villageImageUrl.split(','));
-      }
-    });
   });
 }
 getlist();
@@ -105,13 +101,14 @@ function handleclick(item: communitylist_rows_type) {
 </script>
 <style scoped lang="scss">
 .box {
+  background: linear-gradient(180deg, #deedff 0%, #f8f9fe 50%);
+
   .header {
     display: flex;
     align-items: center;
     height: 50px;
     line-height: 50px;
-    background-color: #1a75ff;
-    background-color: #dfedff;
+    background: transparent;
     & > div {
       flex: 1;
     }
@@ -122,6 +119,31 @@ function handleclick(item: communitylist_rows_type) {
       color: #000;
     }
   }
+
+  .bgcolor {
+    width: 1085px;
+    height: 571px;
+    background: #fdf1ee;
+    filter: blur(400px);
+    display: block;
+    position: absolute;
+    top: 0;
+    transform: translateY(-50%);
+    right: 0;
+    pointer-events: none; /* 🔥 让它不拦截鼠标点击，穿透到下面 */
+    @media (max-width: 1540px) {
+      width: 800px;
+      height: 400px;
+    }
+    @media (max-width: 1280px) {
+      width: 600px;
+      height: 300px;
+    }
+    @media (max-width: 1030px) {
+      width: 400px;
+      height: 200px;
+    }
+  }
 }
 .image-slot {
   display: flex;
@@ -136,7 +158,7 @@ function handleclick(item: communitylist_rows_type) {
   width: 100%;
   margin: 0 auto;
   padding: 20px;
-  background-color: #f5f7fb;
+  background: transparent;
   .community_nav_box {
     height: 98px;
     border-radius: 5px;