bonus
/
sh_real_name_system_app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

This commit is contained in:
BianLzhaoMin 2025-11-05 18:03:41 +08:00
parent f147d99425
commit e05defd293
1 changed files with 251 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

322
src/pages/home/components/swiperModel.vue
View File

@ -2,7 +2,7 @@
<view class="swiper-container"> <view class="swiper-container">
<u-swiper <u-swiper
:list="swiperList" :list="swiperList"
:height="200" :height="220"
:indicator="true" :indicator="true"
indicatorMode="dot" indicatorMode="dot"
:autoplay="true" :autoplay="true"
@ -12,13 +12,21 @@
> >
<template v-slot="{ item, index }"> <template v-slot="{ item, index }">
<view class="swiper-item" :style="{ background: item.background }"> <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"> <view class="swiper-content">
<!-- 第一页：项目信息 --> <!-- 第一页：项目信息 -->
<template v-if="index === 0"> <template v-if="index === 0">
<view class="project-info"> <view class="project-info">
<view class="info-left"> <view class="info-left">
<view class="icon-container"> <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> <text class="icon-text">项目信息</text>
</view> </view>
</view> </view>
@ -28,6 +36,7 @@
:key="item.title" :key="item.title"
v-for="item in swiperList_1" v-for="item in swiperList_1"
> >
<view class="metric-dot"></view>
<text class="metric-label">{{ item.title }}：</text> <text class="metric-label">{{ item.title }}：</text>
<text class="metric-value">{{ <text class="metric-value">{{
swiperInfo_1[item.key] swiperInfo_1[item.key]
@ -40,34 +49,34 @@
<!-- 第二页：在场人员统计 --> <!-- 第二页：在场人员统计 -->
<template v-if="index === 1"> <template v-if="index === 1">
<view class="personnel-stats"> <view class="personnel-stats">
<view class="stat-card"> <view class="stat-card glass-card">
<view class="stat-icon"> <view class="stat-icon">
<view class="hexagon-icon"> <view class="icon-badge">
<up-image width="48" height="48" :src="PersonnelIcon" /> <up-image width="44" height="44" :src="PersonnelIcon" />
</view> </view>
</view> </view>
<view class="stat-content"> <view class="stat-content">
<view> <text class="stat-label">在场人员</text>
<text class="stat-label">在场人员：</text>
<text class="stat-value"> <text class="stat-value">
{{ einNum }} {{ einNum }}
</text> </text>
<text class="stat-unit">人</text>
</view> </view>
</view> </view>
</view> <view class="stat-card glass-card">
<view class="stat-card">
<view class="stat-icon"> <view class="stat-icon">
<view class="hexagon-icon"> <view class="icon-badge">
<up-image <up-image
width="48" width="44"
height="48" height="44"
:src="AttendanceRateIcon" :src="AttendanceRateIcon"
/> />
</view> </view>
</view> </view>
<view class="stat-content"> <view class="stat-content">
<text class="stat-label">今日打卡 ： </text> <text class="stat-label">今日打卡</text>
<text class="stat-value">{{ attNum }}</text> <text class="stat-value">{{ attNum }}</text>
<text class="stat-unit">人</text>
</view> </view>
</view> </view>
</view> </view>
@ -76,12 +85,12 @@
<!-- 第三页：考勤率和红绿灯人员 --> <!-- 第三页：考勤率和红绿灯人员 -->
<template v-if="index === 2"> <template v-if="index === 2">
<view class="attendance-rate"> <view class="attendance-rate">
<view class="rate-card"> <view class="rate-card glass-card">
<view class="stat-icon"> <view class="stat-icon">
<view class="hexagon-icon"> <view class="icon-badge small">
<up-image <up-image
width="32" width="36"
height="32" height="36"
:src="AttendanceRateIcon" :src="AttendanceRateIcon"
/> />
</view> </view>
@ -91,14 +100,15 @@
<text class="rate-value"> <text class="rate-value">
{{ exitNoFileNum }} {{ exitNoFileNum }}
</text> </text>
<text class="rate-unit">人</text>
</view> </view>
</view> </view>
<view class="rate-card"> <view class="rate-card glass-card">
<view class="stat-icon"> <view class="stat-icon">
<view class="hexagon-icon"> <view class="icon-badge small">
<up-image <up-image
width="32" width="36"
height="32" height="36"
:src="GreenLightIcon" :src="GreenLightIcon"
/> />
</view> </view>
@ -106,16 +116,22 @@
<view class="rate-content"> <view class="rate-content">
<text class="rate-label">红绿灯人员</text> <text class="rate-label">红绿灯人员</text>
<view class="traffic-lights"> <view class="traffic-lights">
<text class="light-item green"> <view class="light-item-wrapper">
<view class="light-dot yellow-dot"></view>
<text class="light-item">
黄灯人数: {{ yellowNum }} 黄灯人数: {{ yellowNum }}
</text> </text>
<text class="light-item yellow"> </view>
<view class="light-item-wrapper">
<view class="light-dot red-dot"></view>
<text class="light-item">
黄灯7天: {{ yellowThanSevenDayNum }} 黄灯7天: {{ yellowThanSevenDayNum }}
</text> </text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view>
</template> </template>
</view> </view>
</view> </view>
@ -185,10 +201,11 @@ const getHomeIndexSwiper = async () => {
} }
getHomeIndexSwiper() getHomeIndexSwiper()
// 轮播图数据 // 轮播图数据 - 优化后的渐变配色
const swiperList = ref([ const swiperList = ref([
{ {
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', // 柔和的紫蓝色渐变
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)',
data: { data: {
constructionProjects: 168, constructionProjects: 168,
subcontractors: 104, 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: { data: {
onSiteCount: 6500, onSiteCount: 6500,
todayAttendance: 3500, todayAttendance: 3500,
}, },
}, },
{ {
background: 'linear-gradient(180deg, #31C8FD 0%, #1C98E8 100%)', // 柔和的粉橙色渐变
background: 'linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 50%, #ffc371 100%)',
data: { data: {
attendanceRate: 64.68, attendanceRate: 64.68,
greenLight: 20000, greenLight: 20000,
@ -217,35 +236,93 @@ const swiperList = ref([
<style scoped> <style scoped>
.swiper-container { .swiper-container {
margin: 20rpx; margin: 20rpx;
border-radius: 20rpx; border-radius: 24rpx;
overflow: hidden; 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 { .swiper-item {
height: 200px; height: 220px;
border-radius: 20rpx; border-radius: 24rpx;
position: relative; 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 { .swiper-content {
/* padding: 30rpx; */
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 30rpx;
position: relative;
z-index: 1;
} }
/* 项目信息样式 */ /* 项目信息样式 */
.project-info { .project-info {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: space-between;
width: 100%; width: 100%;
gap: 30rpx;
} }
.info-left { .info-left {
flex: 0 0 120rpx; flex-shrink: 0;
} }
.icon-container { .icon-container {
@ -253,92 +330,155 @@ const swiperList = ref([
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10rpx; gap: 12rpx;
margin-right: 20rpx;
} }
.project-icon { .icon-wrapper {
width: 60rpx; width: 120rpx;
height: 60rpx; height: 120rpx;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.25);
border-radius: 50%; border-radius: 24rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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 { .icon-text {
font-size: 24rpx; font-size: 24rpx;
color: #fff; color: rgba(255, 255, 255, 0.95);
font-family: 'PingFang SC'; font-family: 'PingFang SC';
font-weight: 500;
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
} }
.info-right { .info-right {
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15rpx; gap: 20rpx;
} }
.metric-item { .metric-item {
display: flex; display: flex;
justify-content: space-between;
align-items: center; 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 { .metric-label {
margin: 0 12rpx;
font-size: 26rpx; font-size: 26rpx;
color: #fff; color: rgba(255, 255, 255, 0.95);
font-weight: 500; font-weight: 500;
flex: 1;
} }
.metric-value { .metric-value {
font-size: 24rpx; font-size: 28rpx;
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
} }
/* 人员统计样式 */ /* 人员统计样式 */
.personnel-stats { .personnel-stats {
display: flex; display: flex;
gap: 5rpx; gap: 20rpx;
width: 100%; width: 100%;
flex-direction: column; flex-direction: row;
justify-content: center; justify-content: space-between;
} }
.stat-card { .stat-card {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 20rpx; gap: 16rpx;
/* background: rgba(255, 255, 255, 0.15); */ padding: 30rpx 20rpx;
padding: 20rpx; border-radius: 20rpx;
border-radius: 15rpx; 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 { .stat-content {
margin-left: 6%; display: flex;
flex-direction: column;
align-items: center;
gap: 8rpx;
} }
.stat-label { .stat-label {
font-size: 24rpx; font-size: 24rpx;
color: #fff; color: rgba(255, 255, 255, 0.9);
margin-bottom: 8rpx; font-weight: 500;
margin-right: 10rpx;
} }
.stat-value { .stat-value {
font-size: 32rpx; font-size: 40rpx;
color: #fff; color: #fff;
font-weight: bold; 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 { .attendance-rate {
display: flex; display: flex;
gap: 40rpx; gap: 20rpx;
width: 100%; width: 100%;
} }
@ -346,46 +486,72 @@ const swiperList = ref([
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20rpx; gap: 16rpx;
background: rgba(255, 255, 255, 0.15); padding: 24rpx;
padding: 20rpx; border-radius: 20rpx;
border-radius: 15rpx;
backdrop-filter: blur(10rpx);
} }
.rate-content { .rate-content {
flex: 1; flex: 1;
display: flex;
flex-direction: column;
gap: 12rpx;
} }
.rate-label { .rate-label {
display: block;
font-size: 24rpx; font-size: 24rpx;
color: #fff; color: rgba(255, 255, 255, 0.9);
margin-bottom: 8rpx; font-weight: 500;
} }
.rate-value { .rate-value {
font-size: 36rpx; font-size: 36rpx;
color: #fff; color: #fff;
font-weight: bold; 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 { .traffic-lights {
display: flex; display: flex;
flex-direction: column; 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 { .light-item {
font-size: 22rpx; font-size: 22rpx;
color: #fff; color: rgba(255, 255, 255, 0.95);
} font-weight: 500;
.light-item.green {
color: #f89817;
}
.light-item.yellow {
color: #f81115;
} }
</style> </style>