一

pagesClockin/index.vue

@@ -1,492 +1,440 @@
 <template>
-  <view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
-    <cus-header title='打卡' bgColor="transparent" :showback="false"></cus-header>
-    <image class="topbg" :src="imgBase+'clockingin/topbg.png'" mode="widthFix"></image>
-
-    <div class="info">
-      <div class="i_avatar">
-        <image :src="imgBase+'clockingin/default_avatar.png'"></image>
-      </div>
-      <div class="i_name_date">
-        <p>{{username}}</p>
-        <p class="date">{{dateweek}}</p>
-      </div>
-    </div>
-
-    <div class="card">
-      <div class="c_title">今日打卡</div>
-
-      <div class="c_worktime">
-        <div class="cw_pre">
-          <p>上班{{workingTime||'08:30'}}</p>
-          <div class="cwp_time">
-            <image :src="imgBase+'clockingin/checked_active.png'" v-if="sbClockTime"></image>
-            <image :src="imgBase+'clockingin/checked_inactive.png'" v-else></image>
-            <span>打卡{{sbClockTime||'- -'}}</span>
-          </div>
-          <div class="cwp_status" :class="{'active':sbClockTime,'inactive':!sbClockTime}">{{sbClockTime?'已打卡':'未打卡'}}</div>
-        </div>
-
-        <div class="cw_pre">
-          <p>下班{{offWorkTime||'17:30'}}</p>
-          <div class="cwp_time">
-            <image :src="imgBase+'clockingin/checked_active.png'" v-if="xbClockTime"></image>
-            <image :src="imgBase+'clockingin/checked_inactive.png'" v-else></image>
-            <span>{{xbClockTime||'- -'}}</span>
-          </div>
-          <div class="cwp_status" :class="{'active':xbClockTime,'inactive':!xbClockTime}">{{xbClockTime?'已打卡':'未打卡'}}</div>
-        </div>
-      </div>
-
-      <div class="c_clock">
-        <!-- 将按钮点击统一走 clock()；禁用时不响应 -->
-        <div class="cc_box"
-             :style="{'background-image':'url('+imgBase+'clockingin/clock_active_bg.png)'}"
-             @tap="!canClick?null:clock">
-          <p>{{isSW?'上班':'下班'}}打卡</p>
-          <p class="time">{{currentSFM}}</p>
-        </div>
-
-        <div class="cc_location">
-          <image :src="imgBase+'clockingin/location_active.png'"></image>
-          <span v-if="canClock">已进入考勤范围：谷锐特设备自动化有限公司</span>
-          <span v-else>当前定位不在考勤范围内</span>
-        </div>
-      </div>
-    </div>
-
-    <u-popup :show="show" @close="close" mode="center" :round="32" :customStyle="{'width':'calc(100% - 120rpx)'}">
-      <div class="up_box">
-        <div class="upb_close">
-          <image :src="imgBase+'clockingin/close.png'" @tap="close"></image>
-        </div>
-        <image class="upb_text" :src="imgBase+'clockingin/clock_success.png'"></image>
-        <p class="upb_time">打卡时间 {{clockTime}}</p>
-        <image class="upb_img" :src="imgBase+'clockingin/clock_success2.png'"></image>
-        <div class="upb_btn" @tap="close">我知道了</div>
-      </div>
-    </u-popup>
-
-    <Tabbar :tabbarIndex="0"></Tabbar>
-  </view>
+	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
+		<cus-header title='打卡' bgColor="transparent" :showback="false"></cus-header>
+		<image class="topbg" :src="imgBase+'clockingin/topbg.png'" mode="widthFix"></image>
+		<div class="info">
+			<div class="i_avatar">
+				<image :src="imgBase+'clockingin/default_avatar.png'"></image>
+			</div>
+			<div class="i_name_date">
+				<p>{{username}}</p>
+				<p class="date">{{dateweek}}</p>
+			</div>
+		</div>
+		<div class="card">
+			<div class="c_title">今日打卡</div>
+			<div class="c_worktime">
+				<div class="cw_pre">
+					<p>上班{{workingTime||'08:30'}}</p>
+					<div class="cwp_time">
+						<image :src="imgBase+'clockingin/checked_active.png'" v-if="sbClockTime"></image>
+						<image :src="imgBase+'clockingin/checked_inactive.png'" v-else></image>
+						<span>打卡{{sbClockTime||'- -'}}</span>
+					</div>
+					<div class="cwp_status" :class="{'active':sbClockTime,'inactive':!sbClockTime}">{{sbClockTime?'已打卡':'未打卡'}}</div>
+				</div>
+				<div class="cw_pre">
+					<p>下班{{offWorkTime||'17:30'}}</p>
+					<div class="cwp_time">
+						<image :src="imgBase+'clockingin/checked_active.png'" v-if="xbClockTime"></image>
+						<image :src="imgBase+'clockingin/checked_inactive.png'" v-else></image>
+						<span>{{xbClockTime||'- -'}}</span>
+					</div>
+					<div class="cwp_status" :class="{'active':xbClockTime,'inactive':!xbClockTime}">{{xbClockTime?'已打卡':'未打卡'}}</div>
+				</div>
+			</div>
+			<div class="c_clock">
+			<!-- 	<div class="cc_box" :style="{'background-image':'url('+imgBase+(canClock?'clockingin/clock_active_bg.png':'clockingin/clock_inactive_bg.png')+')'}" @tap="clock"> -->
+				<div class="cc_box" :style="{'background-image':'url('+imgBase+'clockingin/clock_active_bg.png)'}" @tap="clock">
+					<p>{{isSW?'上班':'下班'}}打卡</p>
+					<p class="time">{{currentSFM}}</p>
+				</div>
+				<div class="cc_location">
+					<!-- <image :src="imgBase+(canClock?'clockingin/location_active.png':'clockingin/location_inactive.png')"></image> -->
+					<image :src="imgBase+'clockingin/location_active.png'"></image>
+					<span v-if="canClock">已进入考勤范围：谷锐特设备自动化有限公司</span>
+					<span v-else>当前定位不在考勤范围内</span>
+				</div>
+			</div>
+			<!-- <p style="text-align: center;font-size: 32rpx;padding: 20rpx 0;font-weight: bold;">当前定位直线距离：{{distance}}米</p> -->
+		</div>
+		<u-popup :show="show" @close="close" mode="center" :round="32" :customStyle="{'width':'calc(100% - 120rpx)'}">
+			<div class="up_box">
+				<div class="upb_close">
+					<image :src="imgBase+'clockingin/close.png'" @tap="close"></image>
+				</div>
+				<image class="upb_text" :src="imgBase+'clockingin/clock_success.png'"></image>
+				<p class="upb_time">打卡时间 {{clockTime}}</p>
+				<image class="upb_img" :src="imgBase+'clockingin/clock_success2.png'"></image>
+				<div class="upb_btn" @tap="close">我知道了</div>
+			</div>
+		</u-popup>
+		<Tabbar :tabbarIndex="0"></Tabbar>
+	</view>
 </template>
 
 <script>
-  var timer = null, timer2 = null;
-  const QQMapWX = require('../static/lib/qqmap-wx-jssdk.min.js');
-  const qqmapsdk = new QQMapWX({
-    key: 'V3NBZ-6NRKT-QOQXY-LU6RY-PNHJ5-QDBTQKEY'
-  });
-  import { wgs84togcj02 } from '@/utils/coordtransform.js';
-  import Tabbar from '@/components/CusTabbar/clock.vue'
-
-  export default {
-    components:{ Tabbar },
-    data(){
-      return {
-        username:'',
-        dateweek:'',
-        workingTime:'',
-        offWorkTime:'',
-        sbClockTime:'',
-        xbClockTime:'',
-        isSW:true, // true: 上班打卡；false: 下班打卡
-        currentSFM:new Date().Format('hh:mm:ss'),
-        show:false,
-        canClock:false,  // 是否在考勤范围
-        clockTime:'',
-        distance: null,
-		targetLocation: { //谷锐特 31.962084,117.020446  /跨境电商大厦 31.865786,117.15297
-          latitude: 31.962084,
-          longitude: 117.020446
-        },
-        userInfo:null,
-        canClick:true,   // 防连点：统一入口控制
-        navigating:false,// 防止重复 navigateTo
-      }
-    },
-    created() {
-      this.getDateWeek();
-      this.getCurrentSFM();
-      this.getCurrentHour();
-      if(uni.getStorageSync('userInfo')){
-        this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
-        this.username = this.userInfo.realName;
-      }
-    },
-    onUnload() {
-      clearInterval(timer)
-      clearInterval(timer2)
-    },
-    mounted() {
-      this.getRules();
-      this.getCurrentLocation();
-      timer2 = setInterval(()=>{
-        this.getCurrentLocation();
-      },5000)
-      this.getUserInfo();
-    },
-    methods:{
-      getRules(){
-        this.$api.get('/wms/outsourced/attendance/rule').then(res=>{
-          if(res.data.code!==0) return this.$showToast(res.data.msg)
-          this.workingTime = res.data.data.workingTime.slice(0,5);
-          this.offWorkTime = res.data.data.offWorkTime.slice(0,5);
-        }).catch(()=>{})
-      },
-      getUserInfo(){
-        // 回读服务端状态
-        this.$api.get('/wms/outsourced/attendance/getAttendanceByUserId/'+this.userInfo?.id).then(res=>{
-          if(res.data.code!==0) return this.$showToast(res.data.msg)
-          this.sbClockTime = res.data.data?.checkInTime;
-          this.xbClockTime = res.data.data?.clockOutTime;
-          if(new Date().getHours()<12 && !this.sbClockTime) this.isSW = true
-          else this.isSW = false;
-        }).catch(()=>{})
-      },
-      getDateWeek(){
-        let date = new Date().Format('yyyy年MM月dd日');
-        let cfg = {0:'天',1:'一',2:'二',3:'三',4:'四',5:'五',6:'六'};
-        let week = cfg[new Date().getDay()];
-        this.dateweek = date+' 星期'+week;
-      },
-      getCurrentSFM(){
-        clearInterval(timer)
-        timer = setInterval(()=>{
-          this.currentSFM = new Date().Format('hh:mm:ss');
-        },1000)
-      },
-      getCurrentHour(){
-        this.isSW =  new Date().getHours()<12;
-      },
-
-      async clock(){
-        if(!this.canClick) return;
-        this.canClick = false;           // 一进入就关点击
-        const isSWNow = this.isSW;       // 固定本次动作类型
-        try {
-          const url = isSWNow ? '/wms/outsourced/attendance/checkIn'
-                              : '/wms/outsourced/attendance/clockOut';
-          const params = { outUserId: this.userInfo?.id };
-          params[isSWNow ? 'checkInTime' : 'clockOutTime'] = new Date().Format('yyyy-MM-dd hh:mm');
-
-          // 不在范围：跳转到外勤页面；防重复跳转
-          if(!this.canClock){
-            if(this.navigating){
-              return;
-            }
-            this.navigating = true;
-            uni.navigateTo({
-              url:`/pagesClockin/fieldService?url=${url}&outUserId=${this.userInfo?.id}&isSW=${isSWNow?1:0}`,
-              complete: ()=>{ /* 交给子页处理，当前页可允许再次点击 */
-                this.canClick = true;
-              }
-            })
-            return;
-          }
-
-          // 发请求
-          const res = await this.$api.post(url, params);
-          if(res.data.code!==0){
-            this.$showToast(res.data.msg || '打卡失败');
-            return;
-          }
-
-          // 成功：先本地更新，立刻切换态，避免在回读之前再次点到同一类型
-          this.clockTime = new Date().Format('hh:mm');
-          if(isSWNow){
-            this.sbClockTime = this.clockTime;
-            this.isSW = false; // 立刻切到“下班打卡”
-          }else{
-            this.xbClockTime = this.clockTime;
-          }
-
-          // 展示成功弹窗，弹窗期间保持禁用
-          this.show = true;
-
-        } catch (e) {
-          this.$showToast('网络异常，请重试');
-        } finally {
-          // 若弹窗展示中，保持禁用；否则放开
-          if(!this.show){
-            this.canClick = true;
-          }
-        }
-      },
-
-      // 弹窗关闭：这里再回读一次，并恢复点击
-      close(){
-        this.show = false;
-        this.getUserInfo();   // 与后端对齐一次
-        this.canClick = true; // 现在再允许点击
-        this.navigating = false;
-      },
-
-      // 获取当前位置
-      async getCurrentLocation() {
-        try {
-          const res = await uni.getLocation({
-            type: 'gcj02', // 腾讯地图使用GCJ-02坐标系
-            isHighAccuracy: true
-          });
-          let origin = wgs84togcj02(res[1].longitude,res[1].latitude);
-          let target = wgs84togcj02(this.targetLocation.longitude,this.targetLocation.latitude);
-          this.calculateDistance(
-            origin[1],
-            origin[0],
-            target[1],
-            target[0]
-          );
-        } catch (err) {
-          uni.showToast({
-            title: '获取位置失败，请检查权限设置',
-            icon: 'none'
-          });
-        }
-      },
+	var timer = null,timer2 = null;
+	const QQMapWX = require('../static/lib/qqmap-wx-jssdk.min.js');
+	const qqmapsdk = new QQMapWX({
+	  key: 'V3NBZ-6NRKT-QOQXY-LU6RY-PNHJ5-QDBTQKEY'
+	});
+	import { wgs84togcj02 } from '@/utils/coordtransform.js';
+	import Tabbar from '@/components/CusTabbar/clock.vue'
+	export default {
+		components:{ Tabbar },
+		data(){
+			return {
+				username:'',
+				dateweek:'',
+				workingTime:'',
+				offWorkTime:'',
+				sbClockTime:'',
+				xbClockTime:'',
+				isSW:true,//是否是上午，12点前是上午/12点前上午打过卡就是下午了，12点后是下午
+				currentSFM:new Date().Format('hh:mm:ss'),
+				show:false,
+				canClock:false,
+				clockTime:'',
+				distance: null,
+				targetLocation: { //谷锐特 31.962084,117.020446  /跨境电商大厦 31.865786,117.15297
+					latitude: 31.962084,
+					longitude: 117.020446
+				},
+				userInfo:null,
+				canClick:true
+			}
+		},
+		created() {
+			this.getDateWeek();
+			this.getCurrentSFM();
+			this.getCurrentHour();
+			if(uni.getStorageSync('userInfo')){
+				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
+				this.username = this.userInfo.realName;
+			}
+		},
+		onUnload() {
+			clearInterval(timer)
+			clearInterval(timer2)
+		},
+		mounted() {
+			this.getRules();
+			this.getCurrentLocation();
+			timer2 = setInterval(()=>{
+				this.getCurrentLocation();
+			},5000)
+			this.getUserInfo();
+		},
+		methods:{
+			getRules(){
+				this.$api.get('/wms/outsourced/attendance/rule').then(res=>{
+					if(res.data.code!==0) return this.$showToast(res.data.msg)
+					this.workingTime = res.data.data.workingTime.slice(0,5);
+					this.offWorkTime = res.data.data.offWorkTime.slice(0,5);
+				})
+			},
+			getUserInfo(){
+				this.$api.get('/wms/outsourced/attendance/getAttendanceByUserId/'+this.userInfo?.id).then(res=>{
+					if(res.data.code!==0) return this.$showToast(res.data.msg)
+					this.sbClockTime = res.data.data?.checkInTime;
+					this.xbClockTime = res.data.data?.clockOutTime;
+					if(new Date().getHours()<12&&!this.sbClockTime) this.isSW = true
+					else this.isSW = false;
+				})
+			},
+			getDateWeek(){
+				let date = new Date().Format('yyyy年MM月dd日');
+				let cfg = {0:'天',1:'一',2:'二',3:'三',4:'四',5:'五',6:'六'};
+				let week = cfg[new Date().getDay()];
+				this.dateweek = date+' 星期'+week;
+			},
+			getCurrentSFM(){
+				timer = setInterval(()=>{
+					this.currentSFM = new Date().Format('hh:mm:ss');
+				},1000)
+			},
+			getCurrentHour(){
+				this.isSW =  new Date().getHours()>12?false:true;
+			},
+			clock(){
+				if(!this.canClick) return
+				
+				let url = this.isSW?'/wms/outsourced/attendance/checkIn':'/wms/outsourced/attendance/clockOut';
+				let params = {outUserId:this.userInfo?.id};
+				params[this.isSW?'checkInTime':'clockOutTime'] = new Date().Format('yyyy-MM-dd hh:mm');
+				if(!this.canClock){
+					uni.navigateTo({
+						url:`/pagesClockin/fieldService?url=${url}&outUserId=${this.userInfo?.id}&isSW=${this.isSW?1:0}`
+					})
+					return
+				} 
+				this.canClick = false;
+				this.$api.post(url,params).then(res=>{
+					if(res.data.code!==0) return this.$showToast(res.data.msg);
+					this.clockTime = new Date().Format('hh:mm');
+					this.show = true;
+					this.canClick = true;
+				})
+			},
+			close(){
+				this.show = false;
+				this.getUserInfo();
+			},
+			// 获取当前位置
+			async getCurrentLocation() {
+			  try {
+				const res = await uni.getLocation({
+				  type: 'gcj02', // 腾讯地图使用GCJ-02坐标系/
+				  isHighAccuracy: true
+				});
+				let origin = wgs84togcj02(res[1].longitude,res[1].latitude);
+				let target = wgs84togcj02(this.targetLocation.longitude,this.targetLocation.latitude);
+				this.calculateDistance(
+				  origin[1],
+				  origin[0],
+				  target[1],
+				  target[0]
+				);
+				this.canClock = this.distance<=50;
+			  } catch (err) {
+				uni.showToast({
+				  title: '获取位置失败，请检查权限设置',
+				  icon: 'none'
+				});
+			  }
+			},
+			// 计算两点间距离
+			calculateDistance(lat1, lng1, lat2, lng2) {
+			  qqmapsdk.calculateDistance({
+				mode: 'straight', // 直线距离
+				from: `${lat1},${lng1}`,
+				to: `${lat2},${lng2}`,
+				success: (res) => {
+				  if(res.result && res.result.elements.length > 0) {
+					this.distance = res.result.elements[0].distance;
+				  }
+				},
+				fail: (err) => {
+				  uni.showToast({
+					title: '距离计算失败',
+					icon: 'none'
+				  });
+				}
+			  });
+			}
+		}
+	}
+</script>
 
-      // 计算两点间距离
-      calculateDistance(lat1, lng1, lat2, lng2) {
-        qqmapsdk.calculateDistance({
-          mode: 'straight', // 直线距离
-          from: `${lat1},${lng1}`,
-          to: `${lat2},${lng2}`,
-          success: (res) => {
-            if(res.result && res.result.elements.length > 0) {
-              this.distance = res.result.elements[0].distance;
-              this.canClock = this.distance <= 50;
-            }
-          },
-          fail: () => {
-            uni.showToast({
-              title: '距离计算失败',
-              icon: 'none'
-            });
-          }
-        });
-      }
-    }
-  }
-</script>
-
-<style scoped lang="less">
-	.tabPage{
-		padding: 0 24rpx 188rpx;
-		background: #F4F8FB;
-		
-		.topbg{
-			width: 100%;
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 0;
-		}
-	
-		.info{
-			position: relative;
-			background: #FFFFFF;
-			border-radius: 16rpx;
-			margin-top: 20rpx;
-			padding: 48rpx 24rpx;
-			display: flex;
-			align-items: center;
-			.i_avatar{
-				width: 98rpx;
-				height: 98rpx;
-				image{
-					width: 100%;
-					height: 100%;
-				}
-			}
-			.i_name_date{
-				padding-left: 24rpx;
-				p{
-					font-family: PingFang-SC, PingFang-SC;
-					font-weight: bold;
-					font-size: 36rpx;
-					color: #1D2129;
-					line-height: 36rpx;
-					&.date{
-						font-size: 28rpx;
-						color: #657588;
-						line-height: 28rpx;
-						margin-top: 22rpx;
-					}
-				}
-			}
-		}
-	
-		.card{
-			position: relative;
-			background: #FFFFFF;
-			border-radius: 16rpx;
-			padding: 44rpx 24rpx 211rpx;
-			margin-top: 20rpx;
-			
-			.c_title{
-				font-family: PingFang-SC, PingFang-SC;
-				font-weight: bold;
-				font-size: 36rpx;
-				color: #1D2129;
-				line-height: 36rpx;
-			}
-			
-			.c_worktime{
-				margin-top: 40rpx;
-				display: flex;
-				justify-content: space-between;
-				.cw_pre{
-					width: calc(50% - 15rpx);
-					background: #F5F8FA;
-					border-radius: 16rpx;
-					position: relative;
-					padding: 36rpx 20rpx;
-					box-sizing: border-box;
-					&>p{
-						font-family: PingFangSC, PingFang SC;
-						font-weight: 400;
-						font-size: 32rpx;
-						color: #1D2129;
-						line-height: 32rpx;
-					}
-					.cwp_time{
-						display: flex;
-						align-items: center;
-						margin-top: 32rpx;
-						image{
-							width: 28rpx;
-							height: 28rpx;
-						}
-						span{
-							font-family: PingFangSC, PingFang SC;
-							font-weight: 400;
-							font-size: 28rpx;
-							color: #86909C;
-							line-height: 36rpx;
-							margin-left: 12rpx;
-						}
-					}
-					.cwp_status{
-						width: 108rpx;
-						height: 54rpx;
-						border-radius: 0rpx 16rpx 0rpx 12rpx;
-						font-family: PingFang-SC, PingFang-SC;
-						font-weight: bold;
-						font-size: 24rpx;
-						line-height: 54rpx;
-						text-align: center;
-						position: absolute;
-						top: 0;
-						right: 0;
-						&.active{
-							color: #14D08E;
-							background: rgba(20, 204, 140, 0.08);
-						}
-						&.inactive{
-							color: #86909C;
-							background: #EFEFEF;
-						}
-					}
-				}
-			}
-		
-			.c_clock{
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				margin-top: 117rpx;
-				
-				.cc_box{
-					width: 306rpx;
-					height: 306rpx;
-					background-repeat: no-repeat;
-					background-size: 100% 100%;
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					justify-content: center;
-					p{
-						font-family: PingFang-SC, PingFang-SC;
-						font-weight: bold;
-						font-size: 40rpx;
-						color: #FFFFFF;
-						line-height: 56rpx;
-						&.time{
-							font-size: 32rpx;
-							line-height: 45rpx;
-							margin-top: 8px;
-						}
-					}
-				}
-				
-				.cc_location{
-					margin-top: 64rpx;
-					display: flex;
-					align-items: center;
-					image{
-						width: 36rpx;
-						height: 36rpx;
-					}
-					span{
-						font-family: PingFangSC, PingFang SC;
-						font-weight: 400;
-						font-size: 26rpx;
-						color: #86909C;
-						line-height: 26rpx;
-						margin-left: 10rpx;
-					}
-				}
-			}
-		}
-	
-		.up_box{
-			background: linear-gradient( 134deg, #E7F4FD 0%, #FFFFFF 100%);
-			border-radius: 32rpx;
-			padding: 40rpx;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			.upb_close{
-				width: 100%;
-				display: flex;
-				justify-content: flex-end;
-				image{
-					width: 32rpx;
-					height: 32rpx;
-				}
-			}
-			.upb_text{
-				width: 210rpx;
-				height: 50rpx;
-				margin-top: 16rpx;
-			}
-			.upb_time{
-				font-family: PingFangSC, PingFang SC;
-				font-weight: 400;
-				font-size: 28rpx;
-				color: #86909C;
-				line-height: 32rpx;
-				margin-top: 36rpx;
-			}
-			.upb_img{
-				width: 344rpx;
-				height: 194rpx;
-				margin-top: 216rpx;
-			}
-			.upb_btn{
-				width: 446rpx;
-				height: 88rpx;
-				background: #0171F6;
-				border-radius: 32rpx;
-				font-family: PingFang-SC, PingFang-SC;
-				font-weight: bold;
-				font-size: 32rpx;
-				color: #FFFFFF;
-				line-height: 88rpx;
-				text-align: center;
-				margin-top: 112rpx;
-				letter-spacing: 2rpx;
-			}
-		}
-	}
+<style scoped lang="less">
+	.tabPage{
+		padding: 0 24rpx 188rpx;
+		background: #F4F8FB;
+		
+		.topbg{
+			width: 100%;
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 0;
+		}
+	
+		.info{
+			position: relative;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+			margin-top: 20rpx;
+			padding: 48rpx 24rpx;
+			display: flex;
+			align-items: center;
+			.i_avatar{
+				width: 98rpx;
+				height: 98rpx;
+				image{
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.i_name_date{
+				padding-left: 24rpx;
+				p{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 36rpx;
+					color: #1D2129;
+					line-height: 36rpx;
+					&.date{
+						font-size: 28rpx;
+						color: #657588;
+						line-height: 28rpx;
+						margin-top: 22rpx;
+					}
+				}
+			}
+		}
+	
+		.card{
+			position: relative;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+			padding: 44rpx 24rpx 211rpx;
+			margin-top: 20rpx;
+			
+			.c_title{
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
+				font-size: 36rpx;
+				color: #1D2129;
+				line-height: 36rpx;
+			}
+			
+			.c_worktime{
+				margin-top: 40rpx;
+				display: flex;
+				justify-content: space-between;
+				.cw_pre{
+					width: calc(50% - 15rpx);
+					background: #F5F8FA;
+					border-radius: 16rpx;
+					position: relative;
+					padding: 36rpx 20rpx;
+					box-sizing: border-box;
+					&>p{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 32rpx;
+						color: #1D2129;
+						line-height: 32rpx;
+					}
+					.cwp_time{
+						display: flex;
+						align-items: center;
+						margin-top: 32rpx;
+						image{
+							width: 28rpx;
+							height: 28rpx;
+						}
+						span{
+							font-family: PingFangSC, PingFang SC;
+							font-weight: 400;
+							font-size: 28rpx;
+							color: #86909C;
+							line-height: 36rpx;
+							margin-left: 12rpx;
+						}
+					}
+					.cwp_status{
+						width: 108rpx;
+						height: 54rpx;
+						border-radius: 0rpx 16rpx 0rpx 12rpx;
+						font-family: PingFang-SC, PingFang-SC;
+						font-weight: bold;
+						font-size: 24rpx;
+						line-height: 54rpx;
+						text-align: center;
+						position: absolute;
+						top: 0;
+						right: 0;
+						&.active{
+							color: #14D08E;
+							background: rgba(20, 204, 140, 0.08);
+						}
+						&.inactive{
+							color: #86909C;
+							background: #EFEFEF;
+						}
+					}
+				}
+			}
+		
+			.c_clock{
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				margin-top: 117rpx;
+				
+				.cc_box{
+					width: 306rpx;
+					height: 306rpx;
+					background-repeat: no-repeat;
+					background-size: 100% 100%;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					p{
+						font-family: PingFang-SC, PingFang-SC;
+						font-weight: bold;
+						font-size: 40rpx;
+						color: #FFFFFF;
+						line-height: 56rpx;
+						&.time{
+							font-size: 32rpx;
+							line-height: 45rpx;
+							margin-top: 8px;
+						}
+					}
+				}
+				
+				.cc_location{
+					margin-top: 64rpx;
+					display: flex;
+					align-items: center;
+					image{
+						width: 36rpx;
+						height: 36rpx;
+					}
+					span{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 26rpx;
+						color: #86909C;
+						line-height: 26rpx;
+						margin-left: 10rpx;
+					}
+				}
+			}
+		}
+	
+		.up_box{
+			background: linear-gradient( 134deg, #E7F4FD 0%, #FFFFFF 100%);
+			border-radius: 32rpx;
+			padding: 40rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			.upb_close{
+				width: 100%;
+				display: flex;
+				justify-content: flex-end;
+				image{
+					width: 32rpx;
+					height: 32rpx;
+				}
+			}
+			.upb_text{
+				width: 210rpx;
+				height: 50rpx;
+				margin-top: 16rpx;
+			}
+			.upb_time{
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #86909C;
+				line-height: 32rpx;
+				margin-top: 36rpx;
+			}
+			.upb_img{
+				width: 344rpx;
+				height: 194rpx;
+				margin-top: 216rpx;
+			}
+			.upb_btn{
+				width: 446rpx;
+				height: 88rpx;
+				background: #0171F6;
+				border-radius: 32rpx;
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #FFFFFF;
+				line-height: 88rpx;
+				text-align: center;
+				margin-top: 112rpx;
+				letter-spacing: 2rpx;
+			}
+		}
+	}
 </style>