代码重构

zdxt-web-client/zdxt-enforcement-code-app/src/views/enterprise/enterpriseHomeV2.vue

@@ -2,6 +2,7 @@
     <div class="home app_content">
         <!-- 顶部蓝色背景区域 -->
         <div class="header-bg">
+            <div class="logobox-title" style="position: absolute;top: 10px;left: 50%;transform: translateX(-50%);background: #0d8ddb;z-index: 100;padding: 10px 20px;color: #fff;border-radius: 8px;" @click="toDemoList">demo-list</div>
             <div class="orbit-line"></div>
             <div class="orbit-line"></div>
             <div class="cityscape"></div>
@@ -38,16 +39,14 @@
 
             <!-- 轮播图 -->
             <div class="banner-card">
-                <div class="banner-inner">
-                    <div class="logobox-title" style="position: absolute;top: 10px;left: 50%;transform: translateX(-50%);background: #0d8ddb;z-index: 100;padding: 10px 20px;color: #fff;border-radius: 8px;" @click="toDemoList">demo-list</div>
-                </div>
-                <div class="banner-dots">
-                    <div class="dot active"></div>
-                    <div class="dot"></div>
-                    <div class="dot"></div>
-                    <div class="dot"></div>
-                    <div class="dot"></div>
-                </div>
+                <van-swipe :autoplay="3000" indicator-color="rgba(255,255,255,0.9)" :loop="true">
+                    <van-swipe-item v-for="(item, index) in bannerList" :key="index">
+                        <div class="banner-inner" @click="onBannerClick(item)">
+                            <img v-if="item.image" :src="item.image" class="banner-img" alt="" />
+                            <div v-else class="banner-placeholder">{{ item.title || '暂无内容' }}</div>
+                        </div>
+                    </van-swipe-item>
+                </van-swipe>
             </div>
 
             <!-- 执法监督码卡片 -->
@@ -136,6 +135,18 @@ import 'vant/es/toast/style';
 const {useCommon} = $globalStore;
 const router = useRouter();
 const isLoading = ref(true);
+
+// ========== 轮播图数据 ==========
+const bannerList = ref([
+    { title: '执法监督 阳光执法', image: '', link: '' },
+    { title: '入企须扫码 执法受监督', image: '', link: '' },
+    { title: '优化营商环境 规范执法行为', image: '', link: '' },
+]);
+const onBannerClick = (item) => {
+    if (item.link) {
+        router.push(item.link);
+    }
+};
 let freshMap = reactive({
     refreshLoad: false, // 是否刷新
     listLoading: false, // 是否加载中
@@ -508,54 +519,36 @@ onMounted(() => {
     background: linear-gradient(135deg, #c8e2f8 0%, #a0c8f0 30%, #7bb3e8 60%, #5a9de0 100%);
     position: relative;
     overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 
-    &::before {
-        content: '';
-        position: absolute;
-        top: 20%;
-        right: -10%;
-        width: 70%;
-        height: 120%;
-        background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
-        transform: rotate(-15deg);
-        border-radius: 20px;
-    }
-
-    &::after {
-        content: '';
-        position: absolute;
-        bottom: 10%;
-        left: 10%;
-        width: 80%;
-        height: 60%;
-        background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.2), rgba(255,255,255,0.05));
-        transform: skewX(-10deg);
-        border-radius: 10px;
-    }
+.banner-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
-/* 轮播指示器 */
-.banner-dots {
-    position: absolute;
-    bottom: 12px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: 6px;
-    z-index: 1;
+.banner-placeholder {
+    font-size: 20px;
+    color: rgba(255, 255, 255, 0.85);
+    font-weight: 600;
+    letter-spacing: 3px;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+}
 
-    .dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 4px;
-        background: rgba(255,255,255,0.5);
-        transition: all 0.3s;
+:deep(.van-swipe__indicator) {
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 0.5);
+    transition: all 0.3s;
+}
 
-        &.active {
-            width: 20px;
-            background: rgba(255,255,255,0.9);
-        }
-    }
+:deep(.van-swipe__indicator--active) {
+    width: 20px;
+    background: rgba(255, 255, 255, 0.9);
 }
 
 /* 执法监督码卡片 */