This commit is contained in:
BianLzhaoMin
parent
f147d99425
commit
e05defd293
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue