From e05defd2934d86be7734dc2ca99b05744141cb78 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Wed, 5 Nov 2025 18:03:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/home/components/swiperModel.vue | 336 ++++++++++++++++------
 1 file changed, 251 insertions(+), 85 deletions(-)

diff --git a/src/pages/home/components/swiperModel.vue b/src/pages/home/components/swiperModel.vue
index 47b167a..74ca2c1 100644
--- a/src/pages/home/components/swiperModel.vue
+++ b/src/pages/home/components/swiperModel.vue
@@ -2,7 +2,7 @@
     <view class="swiper-container">
         <u-swiper
             :list="swiperList"
-            :height="200"
+            :height="220"
             :indicator="true"
             indicatorMode="dot"
             :autoplay="true"
@@ -12,13 +12,21 @@
         >
             <template v-slot="{ item, index }">
                 <view class="swiper-item" :style="{ background: item.background }">
+                    <!-- 装饰性背景元素 -->
+                    <view class="bg-decoration">
+                        <view class="decoration-circle circle-1"></view>
+                        <view class="decoration-circle circle-2"></view>
+                        <view class="decoration-circle circle-3"></view>
+                    </view>
                     <view class="swiper-content">
                         <!-- 第一页：项目信息 -->
                         <template v-if="index === 0">
                             <view class="project-info">
                                 <view class="info-left">
                                     <view class="icon-container">
-                                        <up-image width="68" height="68" :src="ProjectIcon" />
+                                        <view class="icon-wrapper">
+                                            <up-image width="56" height="56" :src="ProjectIcon" />
+                                        </view>
                                         <text class="icon-text">项目信息</text>
                                     </view>
                                 </view>
@@ -28,6 +36,7 @@
                                         :key="item.title"
                                         v-for="item in swiperList_1"
                                     >
+                                        <view class="metric-dot"></view>
                                         <text class="metric-label">{{ item.title }}：</text>
                                         <text class="metric-value">{{
                                             swiperInfo_1[item.key]
@@ -40,34 +49,34 @@
                         <!-- 第二页：在场人员统计 -->
                         <template v-if="index === 1">
                             <view class="personnel-stats">
-                                <view class="stat-card">
+                                <view class="stat-card glass-card">
                                     <view class="stat-icon">
-                                        <view class="hexagon-icon">
-                                            <up-image width="48" height="48" :src="PersonnelIcon" />
+                                        <view class="icon-badge">
+                                            <up-image width="44" height="44" :src="PersonnelIcon" />
                                         </view>
                                     </view>
                                     <view class="stat-content">
-                                        <view>
-                                            <text class="stat-label">在场人员：</text>
-                                            <text class="stat-value">
-                                                {{ einNum }}
-                                            </text>
-                                        </view>
+                                        <text class="stat-label">在场人员</text>
+                                        <text class="stat-value">
+                                            {{ einNum }}
+                                        </text>
+                                        <text class="stat-unit">人</text>
                                     </view>
                                 </view>
-                                <view class="stat-card">
+                                <view class="stat-card glass-card">
                                     <view class="stat-icon">
-                                        <view class="hexagon-icon">
+                                        <view class="icon-badge">
                                             <up-image
-                                                width="48"
-                                                height="48"
+                                                width="44"
+                                                height="44"
                                                 :src="AttendanceRateIcon"
                                             />
                                         </view>
                                     </view>
                                     <view class="stat-content">
-                                        <text class="stat-label">今日打卡 ： </text>
+                                        <text class="stat-label">今日打卡</text>
                                         <text class="stat-value">{{ attNum }}</text>
+                                        <text class="stat-unit">人</text>
                                     </view>
                                 </view>
                             </view>
@@ -76,12 +85,12 @@
                         <!-- 第三页：考勤率和红绿灯人员 -->
                         <template v-if="index === 2">
                             <view class="attendance-rate">
-                                <view class="rate-card">
+                                <view class="rate-card glass-card">
                                     <view class="stat-icon">
-                                        <view class="hexagon-icon">
+                                        <view class="icon-badge small">
                                             <up-image
-                                                width="32"
-                                                height="32"
+                                                width="36"
+                                                height="36"
                                                 :src="AttendanceRateIcon"
                                             />
                                         </view>
@@ -91,14 +100,15 @@
                                         <text class="rate-value">
                                             {{ exitNoFileNum }}
                                         </text>
+                                        <text class="rate-unit">人</text>
                                     </view>
                                 </view>
-                                <view class="rate-card">
+                                <view class="rate-card glass-card">
                                     <view class="stat-icon">
-                                        <view class="hexagon-icon">
+                                        <view class="icon-badge small">
                                             <up-image
-                                                width="32"
-                                                height="32"
+                                                width="36"
+                                                height="36"
                                                 :src="GreenLightIcon"
                                             />
                                         </view>
@@ -106,12 +116,18 @@
                                     <view class="rate-content">
                                         <text class="rate-label">红绿灯人员</text>
                                         <view class="traffic-lights">
-                                            <text class="light-item green">
-                                                黄灯人数: {{ yellowNum }}
-                                            </text>
-                                            <text class="light-item yellow">
-                                                黄灯7天: {{ yellowThanSevenDayNum }}
-                                            </text>
+                                            <view class="light-item-wrapper">
+                                                <view class="light-dot yellow-dot"></view>
+                                                <text class="light-item">
+                                                    黄灯人数: {{ yellowNum }}
+                                                </text>
+                                            </view>
+                                            <view class="light-item-wrapper">
+                                                <view class="light-dot red-dot"></view>
+                                                <text class="light-item">
+                                                    黄灯7天: {{ yellowThanSevenDayNum }}
+                                                </text>
+                                            </view>
                                         </view>
                                     </view>
                                 </view>
@@ -185,10 +201,11 @@ const getHomeIndexSwiper = async () => {
 }
 
 getHomeIndexSwiper()
-// 轮播图数据
+// 轮播图数据 - 优化后的渐变配色
 const swiperList = ref([
     {
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        // 柔和的紫蓝色渐变
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)',
         data: {
             constructionProjects: 168,
             subcontractors: 104,
@@ -197,14 +214,16 @@ const swiperList = ref([
         },
     },
     {
-        background: 'linear-gradient(180deg, #33FFCC 0%, #06A5CC 100%)', // 从上往下的渐变
+        // 清新的蓝绿色渐变
+        background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 50%, #43e97b 100%)',
         data: {
             onSiteCount: 6500,
             todayAttendance: 3500,
         },
     },
     {
-        background: 'linear-gradient(180deg, #31C8FD 0%, #1C98E8 100%)',
+        // 柔和的粉橙色渐变
+        background: 'linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 50%, #ffc371 100%)',
         data: {
             attendanceRate: 64.68,
             greenLight: 20000,
@@ -217,35 +236,93 @@ const swiperList = ref([
 <style scoped>
 .swiper-container {
     margin: 20rpx;
-    border-radius: 20rpx;
+    border-radius: 24rpx;
     overflow: hidden;
-    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
+    box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.15);
 }
 
 .swiper-item {
-    height: 200px;
-    border-radius: 20rpx;
+    height: 220px;
+    border-radius: 24rpx;
     position: relative;
+    overflow: hidden;
+}
+
+/* 装饰性背景元素 */
+.bg-decoration {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+.decoration-circle {
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    animation: float 6s ease-in-out infinite;
+}
+
+.circle-1 {
+    width: 120rpx;
+    height: 120rpx;
+    top: -40rpx;
+    right: -40rpx;
+    animation-delay: 0s;
+}
+
+.circle-2 {
+    width: 80rpx;
+    height: 80rpx;
+    bottom: -20rpx;
+    left: -20rpx;
+    animation-delay: 2s;
+}
+
+.circle-3 {
+    width: 60rpx;
+    height: 60rpx;
+    top: 50%;
+    right: 10%;
+    animation-delay: 4s;
+}
+
+@keyframes float {
+    0%,
+    100% {
+        transform: translateY(0) scale(1);
+        opacity: 0.3;
+    }
+    50% {
+        transform: translateY(-20rpx) scale(1.1);
+        opacity: 0.5;
+    }
 }
 
 .swiper-content {
-    /* padding: 30rpx; */
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding: 30rpx;
+    position: relative;
+    z-index: 1;
 }
 
 /* 项目信息样式 */
 .project-info {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     width: 100%;
+    gap: 30rpx;
 }
 
 .info-left {
-    flex: 0 0 120rpx;
+    flex-shrink: 0;
 }
 
 .icon-container {
@@ -253,92 +330,155 @@ const swiperList = ref([
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 10rpx;
-    margin-right: 20rpx;
+    gap: 12rpx;
 }
 
-.project-icon {
-    width: 60rpx;
-    height: 60rpx;
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 50%;
+.icon-wrapper {
+    width: 120rpx;
+    height: 120rpx;
+    background: rgba(255, 255, 255, 0.25);
+    border-radius: 24rpx;
     display: flex;
     align-items: center;
     justify-content: center;
+    backdrop-filter: blur(10rpx);
+    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
+    border: 1rpx solid rgba(255, 255, 255, 0.3);
 }
 
 .icon-text {
     font-size: 24rpx;
-    color: #fff;
+    color: rgba(255, 255, 255, 0.95);
     font-family: 'PingFang SC';
+    font-weight: 500;
+    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
 }
 
 .info-right {
+    flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 15rpx;
+    gap: 20rpx;
 }
 
 .metric-item {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    gap: 12rpx;
+    padding: 12rpx 20rpx;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 16rpx;
+    backdrop-filter: blur(10rpx);
+    border: 1rpx solid rgba(255, 255, 255, 0.2);
+    transition: all 0.3s ease;
+}
+
+.metric-dot {
+    width: 8rpx;
+    height: 8rpx;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 50%;
+    flex-shrink: 0;
+    box-shadow: 0 0 8rpx rgba(255, 255, 255, 0.5);
 }
 
 .metric-label {
-    margin: 0 12rpx;
     font-size: 26rpx;
-    color: #fff;
+    color: rgba(255, 255, 255, 0.95);
     font-weight: 500;
+    flex: 1;
 }
 
 .metric-value {
-    font-size: 24rpx;
+    font-size: 28rpx;
     color: #fff;
     font-weight: bold;
+    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
 }
 
 /* 人员统计样式 */
 .personnel-stats {
     display: flex;
-    gap: 5rpx;
+    gap: 20rpx;
     width: 100%;
-    flex-direction: column;
-    justify-content: center;
+    flex-direction: row;
+    justify-content: space-between;
 }
 
 .stat-card {
     flex: 1;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 20rpx;
-    /* background: rgba(255, 255, 255, 0.15); */
-    padding: 20rpx;
-    border-radius: 15rpx;
+    gap: 16rpx;
+    padding: 30rpx 20rpx;
+    border-radius: 20rpx;
+    min-height: 160rpx;
+}
+
+.glass-card {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(15rpx);
+    border: 1rpx solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
+}
+
+.stat-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.icon-badge {
+    width: 88rpx;
+    height: 88rpx;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
+}
+
+.icon-badge.small {
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 16rpx;
 }
 
 .stat-content {
-    margin-left: 6%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
 }
 
 .stat-label {
     font-size: 24rpx;
-    color: #fff;
-    margin-bottom: 8rpx;
-    margin-right: 10rpx;
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 500;
 }
 
 .stat-value {
-    font-size: 32rpx;
+    font-size: 40rpx;
     color: #fff;
     font-weight: bold;
+    text-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.2);
+    line-height: 1.2;
+    display: inline-block;
+}
+
+.stat-unit {
+    font-size: 20rpx;
+    color: rgba(255, 255, 255, 0.8);
+    margin-left: 4rpx;
 }
 
 /* 考勤率样式 */
 .attendance-rate {
     display: flex;
-    gap: 40rpx;
+    gap: 20rpx;
     width: 100%;
 }
 
@@ -346,46 +486,72 @@ const swiperList = ref([
     flex: 1;
     display: flex;
     align-items: center;
-    gap: 20rpx;
-    background: rgba(255, 255, 255, 0.15);
-    padding: 20rpx;
-    border-radius: 15rpx;
-    backdrop-filter: blur(10rpx);
+    gap: 16rpx;
+    padding: 24rpx;
+    border-radius: 20rpx;
 }
 
 .rate-content {
     flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 12rpx;
 }
 
 .rate-label {
-    display: block;
     font-size: 24rpx;
-    color: #fff;
-    margin-bottom: 8rpx;
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 500;
 }
 
 .rate-value {
     font-size: 36rpx;
     color: #fff;
     font-weight: bold;
+    text-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.2);
+    line-height: 1.2;
+}
+
+.rate-unit {
+    font-size: 20rpx;
+    color: rgba(255, 255, 255, 0.8);
+    margin-left: 4rpx;
 }
 
 .traffic-lights {
     display: flex;
     flex-direction: column;
-    gap: 8rpx;
+    gap: 12rpx;
+    margin-top: 8rpx;
+}
+
+.light-item-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+}
+
+.light-dot {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 50%;
+    flex-shrink: 0;
+    box-shadow: 0 0 8rpx currentColor;
+}
+
+.yellow-dot {
+    background: #ffd700;
+    box-shadow: 0 0 12rpx rgba(255, 215, 0, 0.8);
+}
+
+.red-dot {
+    background: #ff6b6b;
+    box-shadow: 0 0 12rpx rgba(255, 107, 107, 0.8);
 }
 
 .light-item {
     font-size: 22rpx;
-    color: #fff;
-}
-
-.light-item.green {
-    color: #f89817;
-}
-
-.light-item.yellow {
-    color: #f81115;
+    color: rgba(255, 255, 255, 0.95);
+    font-weight: 500;
 }
 </style>