From d8a95c4b1553e577331b42b6548b4c960b10e99d Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期六, 11 五月 2024 11:58:43 +0800
Subject: [PATCH] 派车记录

---
 h5/pages.json                           |    9 
 h5/pages/staff/task/visitorApprove.vue  |  595 ++++++++++++++++---------------
 h5/static/staff/liucheng_success@2x.png |    0 
 h5/pages/staff/index.vue                |    2 
 h5/pages/staff/sendACar.vue             |  167 ++++++++
 h5/App.vue                              |  367 ++++++++++---------
 6 files changed, 679 insertions(+), 461 deletions(-)

diff --git a/h5/App.vue b/h5/App.vue
index 170b6c4..71871fd 100644
--- a/h5/App.vue
+++ b/h5/App.vue
@@ -1,199 +1,220 @@
 <script>
-	export default {
-		onLaunch: function() {
-			var that = this
-			if (!that.$store.state.openid) {
-				let url = window.location.href
-				let code = ''
-				if (url.indexOf('code=') !== -1) {
-					const query = url.split('?')
+export default {
+	onLaunch: function () {
+		var that = this
+		if (!that.$store.state.openid) {
+			let url = window.location.href
+			let code = ''
+			if (url.indexOf('code=') !== -1) {
+				const query = url.split('?')
 
-					for (const q of query) {
-						if (q.indexOf('code=') !== -1) {
-							code = q.substring(q.indexOf('code=') + 5, q.length)
+				for (const q of query) {
+					if (q.indexOf('code=') !== -1) {
+						code = q.substring(q.indexOf('code=') + 5, q.length)
+					}
+				}
+				that.$u.api.wxAuthorize({
+					code: code
+				}).then(res => {
+					if (res.code === 200) {
+						that.$store.commit('setOpenId', res.data.openid)
+						if (res.data.member) {
+							that.$store.commit('setMember', res.data.member)
 						}
 					}
-					that.$u.api.wxAuthorize({
-						code: code
-					}).then(res => {
-						if (res.code === 200) {
-							that.$store.commit('setOpenId', res.data.openid)
-							if (res.data.member) {
-								that.$store.commit('setMember', res.data.member)
-							}
-						}
-					})
-				}
+				})
 			}
-		},
-		onShow: function() {
-			console.log('App Show')
-		},
-		onHide: function() {
-			console.log('App Hide')
 		}
+	},
+	onShow: function () {
+		console.log('App Show')
+	},
+	onHide: function () {
+		console.log('App Hide')
 	}
+}
 </script>
 
 <style lang="scss">
-	/*姣忎釜椤甸潰鍏叡css */
-	@import "uview-ui/index.scss";
+/*姣忎釜椤甸潰鍏叡css */
+@import "uview-ui/index.scss";
 
-	.flex-cb {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
+.flex-cb {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
 
-	.container {
-		height: 100%;
-		width: 100%;
-		max-width: 800rpx;
-		overflow-y: auto;
-	}
+.container {
+	height: 100%;
+	width: 100%;
+	max-width: 800rpx;
+	overflow-y: auto;
+}
 
-	.doumee-container .ivu-tabs-nav {
-		width: 100%;
-	}
+.doumee-container .ivu-tabs-nav {
+	width: 100%;
+}
 
-	.doumee-container .ivu-tabs-nav .ivu-tabs-tab {
-		width: calc(100% / 3);
-	}
+.doumee-container .ivu-tabs-nav .ivu-tabs-tab {
+	width: calc(100% / 3);
+}
 
-	.doumee-container .ivu-tabs-nav .ivu-tabs-tab {
-		margin-right: 0;
-		text-align: center;
-	}
+.doumee-container .ivu-tabs-nav .ivu-tabs-tab {
+	margin-right: 0;
+	text-align: center;
+}
 
-	.cell {
-		background-color: #fff;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		min-height: 100rpx;
-		padding: 24rpx 30rpx;
-		box-sizing: border-box;
-		border-bottom: 1rpx solid #eee;
-		font-size: 15rpx;
-		position: relative;
-	}
+.cell {
+	background-color: #fff;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	min-height: 100rpx;
+	padding: 24rpx 30rpx;
+	box-sizing: border-box;
+	border-bottom: 1rpx solid #eee;
+	font-size: 15rpx;
+	position: relative;
+}
 
-	.cell .title {
-		flex-shrink: 0;
-		color: #222;
-		line-height: 20rpx;
-		height: 20rpx;
-		width: 28%;
-		margin-right: 5%;
-	}
+.cell .title {
+	flex-shrink: 0;
+	color: #222;
+	line-height: 20rpx;
+	height: 20rpx;
+	width: 28%;
+	margin-right: 5%;
+}
 
-	.cell .content {
-		flex: 1;
-		font-size: 28rpx;
-		font-weight: 400;
-		color: #999999;
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-	}
+.cell .content {
+	flex: 1;
+	font-size: 28rpx;
+	font-weight: 400;
+	color: #999999;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
 
-	.cell .content .input {
-		width: 100%;
-		height: 100%;
-		font-size: 28rpx;
-		font-weight: 400;
-		color: #333333;
-		text-align: right;
-	}
+.cell .content .input {
+	width: 100%;
+	height: 100%;
+	font-size: 28rpx;
+	font-weight: 400;
+	color: #333333;
+	text-align: right;
+}
 
-	.cell.is-link::after {
-		content: '';
-		display: block;
-		width: 8rpx;
-		height: 8rpx;
-		transform: rotate(-45deg);
-		border-right: 1rpx solid #999999;
-		border-bottom: 1rpx solid #999999;
-		margin-left: 5rpx;
-	}
+.cell.is-link::after {
+	content: '';
+	display: block;
+	width: 8rpx;
+	height: 8rpx;
+	transform: rotate(-45deg);
+	border-right: 1rpx solid #999999;
+	border-bottom: 1rpx solid #999999;
+	margin-left: 5rpx;
+}
 
-	.card {
-		background-color: #fff;
-		padding: 16rpx;
-		position: relative;
-	}
+.card {
+	background-color: #fff;
+	padding: 16rpx;
+	position: relative;
+}
 
-	.card::after {
-		content: '';
-		display: block;
-		position: absolute;
-		width: calc(100% - 32rpx);
-		height: 0;
-		bottom: 0;
-		left: 16rpx;
-		border-bottom: 1rpx solid #f7f7f7;
-	}
+.card::after {
+	content: '';
+	display: block;
+	position: absolute;
+	width: calc(100% - 32rpx);
+	height: 0;
+	bottom: 0;
+	left: 16rpx;
+	border-bottom: 1rpx solid #f7f7f7;
+}
 
-	.card .title {
-		color: #777777;
-		margin-bottom: 12rpx;
-	}
+.card .title {
+	color: #777777;
+	margin-bottom: 12rpx;
+}
 
-	.card .content {
-		color: #222;
-	}
-	.placeholder9{
-		color: #999999;
-		font-size: 28rpx;
-	}
-		//璁剧疆鍦嗚
-		checkbox .uni-checkbox-input{
-			border-radius: 50%;
-		}
-		checkbox .uni-checkbox-input.uni-checkbox-input-checked{
-			color: #fff !important; 
-			border: 1px solid #4d99a8 !important;
-			background-color: #4d99a8 !important;
-		}
-		checkbox .uni-checkbox-input.uni-checkbox-input-checked:before{
-			/* color: #4d99a8 !important;  */
-			/* border: 1px solid #4d99a8 !important; */
-			/* font-size: 58rpx; */
-			/* border-radius: 50%; */
-		}
-		
-		// 
-		
-		view{
-			box-sizing: border-box;
-		}
-		image{
-			box-sizing: border-box;
-			margin: 0;
-			display: flex;
-		}
-		.df_ac{
-			display: flex;
-			align-items: center;
-		}
-		.main_app{
-			padding:0 30rpx 30rpx;
-			font-size: 28rpx;
-			color: #333333;
-		}
-		.placeholder9{
-			color: #999999;
-		}
-		.mr24{
-			margin-right: 24rpx;
-		}
-		.mr12{
-			margin-right: 12rpx;
-		}
-		.mr6{
-			margin-right: 6rpx;
-		}
-		
-		
+.card .content {
+	color: #222;
+}
 
+.placeholder9 {
+	color: #999999;
+	font-size: 28rpx;
+}
+
+//璁剧疆鍦嗚
+checkbox .uni-checkbox-input {
+	border-radius: 50%;
+}
+
+checkbox .uni-checkbox-input.uni-checkbox-input-checked {
+	color: #fff !important;
+	border: 1px solid #4d99a8 !important;
+	background-color: #4d99a8 !important;
+}
+
+checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
+	/* color: #4d99a8 !important;  */
+	/* border: 1px solid #4d99a8 !important; */
+	/* font-size: 58rpx; */
+	/* border-radius: 50%; */
+}
+
+// 
+
+view {
+	box-sizing: border-box;
+}
+
+image {
+	box-sizing: border-box;
+	margin: 0;
+	display: flex;
+}
+
+textarea {
+	box-sizing: border-box;
+	background-color: #f7f7f7;
+	font-size: 28rpx;
+	color: #333333;
+	padding: 24rpx;
+	border-radius: 8rpx;
+}
+
+.df_ac {
+	display: flex;
+	align-items: center;
+}
+
+.main_app {
+	padding: 0 30rpx 30rpx;
+	font-size: 28rpx;
+	color: #333333;
+}
+
+.placeholder9 {
+	color: #999999;
+	font-size: 28rpx;
+}
+
+.mr24 {
+	margin-right: 24rpx;
+}
+
+.mr12 {
+	margin-right: 12rpx;
+}
+.ml12 {
+	margin-left: 12rpx;
+}
+
+.mr6 {
+	margin-right: 6rpx;
+}
 </style>
diff --git a/h5/pages.json b/h5/pages.json
index b8c394d..658b664 100644
--- a/h5/pages.json
+++ b/h5/pages.json
@@ -278,6 +278,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/staff/sendACar",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "娲捐溅璁板綍",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"subPackages": [{
 			"root": "n_pages",
diff --git a/h5/pages/staff/index.vue b/h5/pages/staff/index.vue
index 90d5e31..83b715b 100644
--- a/h5/pages/staff/index.vue
+++ b/h5/pages/staff/index.vue
@@ -55,7 +55,7 @@
 				<view class="h1">鎴戠殑浼氳鏃ュ巻</view>
 				<view class="h2">MY MEETING CALENDAR</view>
 			</view>
-			<view class="img_wrap" @click="jump('/pages/staff/task/index')">
+			<view class="img_wrap" @click="jump('/pages/staff/sendACar')">
 				<image class="img" src="@/static/staff/ic_paichejilu.png"></image>
 				<view class="h1">娲捐溅璁板綍</view>
 				<view class="h2">VEHICLE DISPATCH</view>
diff --git a/h5/pages/staff/sendACar.vue b/h5/pages/staff/sendACar.vue
new file mode 100644
index 0000000..7a5e5db
--- /dev/null
+++ b/h5/pages/staff/sendACar.vue
@@ -0,0 +1,167 @@
+<template>
+	<view class="main_app">
+		<view class="app_header">
+			<view class="item" @click="isShowDate = true">
+				<text v-if="param.aa">{{ param.aa }}</text>
+				<text v-else class="placeholder9">閫夋嫨鏃ユ湡</text>
+				<u-icon class="ml12" name="arrow-down" color="#999999" />
+			</view>
+			<view class="item" @click="isShowCar = true">
+				<text v-if="false">xx</text>
+				<text v-else class="placeholder9">閫夋嫨杞﹁締</text>
+				<u-icon class="ml12" name="arrow-down" color="#999999" />
+			</view>
+		</view>
+		<!--  -->
+		<view class="box_list">
+			<view class="box_list_item" v-for="(item, index) in 3" :key="index">
+				<view class="box_list_item_head">
+					<text>涓佹仼鍑殑鍔冲姟鍏ュ巶鐢宠</text>
+					<text class="loading">寰呭鏍�</text>
+				</view>
+				<view class="box_list_item_nr">
+					<view class="box_list_item_nr_item">
+						<text>琚闂汉锛�</text>
+						<text>浜轰簨閮�-鐜嬩簹钃�</text>
+					</view>
+					<view class="box_list_item_nr_item">
+						<text>杩涘巶鏃堕棿锛�</text>
+						<text>12-12 09:00</text>
+					</view>
+					<view class="box_list_item_nr_item">
+						<text>绂诲巶鏃堕棿锛�</text>
+						<text>12-12 12:00</text>
+					</view>
+					<view class="box_list_item_nr_item">
+						<text>鏉ヨ浜嬬敱锛�</text>
+						<text>涓氬姟鏉ュ線</text>
+					</view>
+					<view class="box_list_item_nr_item">
+						<text>闅忚杞﹁締锛�</text>
+						<text>鐨朅88888</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 閫夋嫨杞﹁締 -->
+		<u-picker keyName="name" closeOnClickOverlay @close="isShowCar = false" :show="isShowCar" :columns="carList" @confirm="seletedCar" @cancel="isShowCar = false"></u-picker>
+		<!-- 鏃ユ湡 -->
+		<u-datetime-picker :show="isShowDate" :minDate="minDate" @confirm="confirmDate" @cancel="isShowDate = false" mode="date"></u-datetime-picker>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			isShowCar: false,
+			isShowDate: false,
+			param: {},
+			carList: [[{ name: 'aa', value: '11' }]],
+			timeList: [{ time: '08:30-09:00' }, { time: '08:30-09:00' }, { time: '08:30-09:00' }, { time: '08:30-09:00' }]
+		};
+	},
+	methods: {
+		confirmDate(e) {
+			console.log(e.value);
+			this.param.aa = dayjs(e.value).format('YYYY-MM-DD');
+			this.isShowDate = false;
+		},
+		seletedCar(e) {
+			console.log(e.value);
+			this.param.aa = dayjs(e.value).format('YYYY-MM-DD');
+			this.isShowDate = false;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+	.main_app{
+		background: #F7F7F7;
+		padding: 0;
+	}
+.app_header {
+	display: flex;
+	align-items: center;
+	margin: 0 -15rpx;
+	background-color: #fff;
+	.item {
+		width: 360rpx;
+		height: 72rpx;
+		margin: 15rpx;
+		padding: 0 30rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		align-items: center;
+	}
+}
+.box_list {
+	width: 100%;
+	padding: 30rpx;
+	box-sizing: border-box;
+	.box_list_item {
+		width: 100%;
+		margin-bottom: 20rpx;
+		&:last-child {
+			margin: 0 !important;
+		}
+		.box_list_item_head {
+			width: 100%;
+			height: 100rpx;
+			padding: 0 30rpx;
+			box-sizing: border-box;
+			background: linear-gradient(270deg, #fefeff 0%, #e1f7fe 100%);
+			border-radius: 8rpx 8rpx 0rpx 0rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			.loading {
+				color: #4c99a8;
+			}
+			.success {
+				color: #03c68f;
+			}
+			.error {
+				color: #e0312a;
+			}
+			text {
+				&:nth-child(1) {
+					font-size: 32rpx;
+					font-weight: 500;
+					color: #222222;
+				}
+				&:nth-child(2) {
+					font-size: 26rpx;
+					font-weight: 400;
+				}
+			}
+		}
+		.box_list_item_nr {
+			padding: 30rpx;
+			width: 100%;
+			box-sizing: border-box;
+			background-color: #ffffff;
+			.box_list_item_nr_item {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				margin-bottom: 20rpx;
+				text {
+					&:nth-child(1) {
+						font-size: 26rpx;
+						font-weight: 400;
+						color: #666666;
+					}
+					&:nth-child(2) {
+						font-size: 26rpx;
+						font-weight: 400;
+						color: #333333;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/h5/pages/staff/task/visitorApprove.vue b/h5/pages/staff/task/visitorApprove.vue
index af2e55d..5e30fde 100644
--- a/h5/pages/staff/task/visitorApprove.vue
+++ b/h5/pages/staff/task/visitorApprove.vue
@@ -3,349 +3,370 @@
 		<view class="status_wrap">
 			<view class="name">涓佹仼鍑殑璁垮鐢宠</view>
 			<view class="desc">绛夊緟鎴戝鐞�</view>
-			<view class="box_list_status">瀹℃壒涓�</view>
+			<view class="status">瀹℃壒涓�</view>
 		</view>
 		<!--  -->
 		<view class="emyty"></view>
 		<view class="module_list">
 			<view class="item">
-				<text class="label">鎷滆浜�</text>
-				<text class="value">寤栨垚鐟�</text>
+				<view class="label">鎷滆浜�</view>
+				<view class="value">寤栨垚鐟�</view>
 			</view>
 			<view class="item">
-				<text class="label">棰勮鍏�/绂诲巶鏃堕棿</text>
-				<text class="value">05/01 8:00 - 05/01 18:00</text>
+				<view class="label">棰勮鍏�/绂诲巶鏃堕棿</view>
+				<view class="value">05/01 8:00 - 05/01 18:00</view>
 			</view>
 			<view class="emyty"></view>
 			<view class="item">
-				<text class="label">璁垮淇℃伅</text>
-				<text class="value">
+				<view class="label">璁垮淇℃伅</view>
+				<view class="value">
 					<image class="avatar" src="@/static/logo@2x.png" mode="widthFix"></image>
 					<view class="info">
 						<text class="name">瀛欏織 18177665678</text>
 						<text>韬唤璇佸彿锛�3309****2910</text>
 						<text>鍏ュ洯杞﹁締锛氱殩A88789</text>
 					</view>
-				</text>
+				</view>
 			</view>
 			<view class="item">
-				<text class="label">鍏徃鍚嶇О</text>
-				<text class="value">涓浗绉诲姩</text>
+				<view class="label">鍏徃鍚嶇О</view>
+				<view class="value">涓浗绉诲姩</view>
 			</view>
 			<view class="item">
-				<text class="label">鏂藉伐浜哄憳</text>
-				<text class="value">鍚�</text>
+				<view class="label">鏂藉伐浜哄憳</view>
+				<view class="value">鍚�</view>
 			</view>
 			<view class="item">
-				<text class="label">鏉ヨ浜嬬敱</text>
-				<text class="value">涓氬姟娲借皥</text>
+				<view class="label">鏉ヨ浜嬬敱</view>
+				<view class="value">涓氬姟娲借皥</view>
 			</view>
 		</view>
-		
-		<view class="box_list">
-			<view class="box_list_title">娴佺▼</view>
-			<view class="box_list_list">
-				<view class="box_list_list_item">
-					<view class="left">
-						<view class="left_d"></view>
-						<view class="left_x"></view>
+		<!-- 娴佺▼ -->
+		<view class="flow_wrap">
+			<view class="flow_title">娴佺▼</view>
+			<view class="list">
+				<view class="item">
+					<view class="avatar">
+						<image class="img" src="@/static/logo@2x.png" mode="widthFix" />
+						<image class="status" src="@/static/staff/liucheng_success@2x.png" mode="widthFix" />
+						<view class="separate"></view>
 					</view>
-					<view class="right">
-						<view class="right_top">
-							<text>鏍撳瓙鍝ユ彁浜ょ殑鐢宠</text>
-							<text>2023-05-01 08:00</text>
+					<view class="content">
+						<view class="head">
+							<view class="event">鏌愭煇鎻愪氦鐨勬嫓璁跨敵璇�</view>
+							<view class="time">time</view>
 						</view>
-						<view class="right_bottom">
-							<text>瀹夊窘璞嗙背绉戞妧鏈夐檺鍏徃</text>
+						<view class="name_wrap">
+							<text>鏉庝笢(<text class="status">澶勭悊涓�</text>)</text>
 						</view>
+						<view class="remark">鍚屾剰鏀捐</view>
 					</view>
 				</view>
-				<view class="box_list_list_item">
-					<view class="left">
-						<view class="left_d"></view>
-						<view class="left_x"></view>
+				<view class="item">
+					<view class="avatar">
+						<image class="img" src="@/static/logo@2x.png" mode="widthFix" />
+						<image class="status" src="@/static/staff/liucheng_success@2x.png" mode="widthFix" />
 					</view>
-					<view class="right">
-						<view class="right_top">
-							<text>鎷滆鍛樺伐</text>
-							<text>2023-05-01 08:00</text>
+					<view class="content">
+						<view class="head">
+							<view class="event">鏌愭煇鎻愪氦鐨勬嫓璁跨敵璇�</view>
+							<view class="time">time</view>
 						</view>
-						<view class="right_bottom">
-							<text>鐜嬩簹钃�(<text class="blue">瀹℃牳閫氳繃</text>)</text>
+						<view class="name_wrap">
+							<text>鏉庝笢(<text class="status">澶勭悊涓�</text>)</text>
 						</view>
-					</view>
-				</view>
-				<view class="box_list_list_item">
-					<view class="left">
-						<view class="left_d"></view>
-						<view class="left_x"></view>
-					</view>
-					<view class="right">
-						<view class="right_top">
-							<text>瀹℃壒浜�</text>
-							<text>2023-05-01 08:00</text>
-						</view>
-						<view class="right_bottom">
-							<text>椹��(<text class="blue">寰呭鏍�</text>)</text>
+						<view class="carbon">
+							<view class="carbon_item" v-for="i in 12">
+								<image src="../../../static/logo@2x.png" mode="widthFix"></image>
+								<view class="text">name</view>
+							</view>
 						</view>
 					</view>
 				</view>
 			</view>
 		</view>
+		<view class="emyty"></view>
+		<view class="main_footer">
+			<view class="btn" @click="handleSub('0')">鎷掔粷</view>
+			<view class="btn agree" @click="handleSub('1')">鍚屾剰</view>
+		</view>
+
+		<!--  -->
+		<u-popup :show="showApprModal" :round="10" :safeAreaInsetBottom="true" mode="bottom" @close="showApprModal = false">
+			<view class="appr_modal">
+				<view class="title">鍚屾剰</view>
+				<textarea placeholder="鍚屾剰璇存槑锛岄潪蹇呭~" placeholder-class="placeholder9" />
+				<view class="main_footer">
+					<view class="btn" @click="showApprModal = false">鍙栨秷</view>
+					<view class="btn agree">鎻愪氦</view>
+				</view>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			};
+export default {
+	data() {
+		return {
+			showApprModal: false,
+			param: {}
 		}
-	}
+	},
+	methods: {
+		handleSub(flag) {
+			// this.param.flag = 
+			if (flag === '1') {
+
+			} else {
+
+			}
+			this.showApprModal = true
+		}
+	},
+}
 </script>
 <style>
-	page {
-		background-color: #F7F7F7;
-	}
+page {
+	background-color: #F7F7F7;
+}
 </style>
-<style lang="scss" scoped>
-	.box {
-		width: 100%;
-		.p {
-			padding: 0 30rpx !important;
+<style lang="scss">
+.main_app {
+	background-color: #fff;
+	padding-bottom: 0;
+
+	.flow_wrap {
+		padding: 30rpx 0;
+
+		.flow_title {
+			font-weight: 500;
+			font-size: 32rpx;
+			color: #222222;
+			margin-bottom: 24rpx;
 		}
-		.box_list {
-			width: 100%;
-			padding: 30rpx;
-			box-sizing: border-box;
-			background-color: #ffffff;
-			display: flex;
-			flex-direction: column;
-			margin-bottom: 20rpx;
-			position: relative;
-			.box_list_title {
-				font-size: 32rpx;
-				font-weight: 500;
-				color: #222222;
-				margin-bottom: 24rpx;
-			}
-			.box_list_list {
-				width: 100%;
+
+		.list {
+			.item {
 				display: flex;
-				flex-direction: column;
-				.box_list_list_item {
-					width: 100%;
-					display: flex;
-					align-items: flex-start;
-					margin-bottom: 36rpx;
-					&:last-child {
-						margin: 0;
-					}
-					.left {
-						flex-shrink: 0;
-						height: 100%;
-						position: relative;
-						.left_d {
-							width: 16rpx;
-							height: 16rpx;
-							background: #81AFF7;
-							border-radius: 50%;
-							position: relative;
-							z-index: 2;
-						}
-						.left_x {
-							position: absolute;
-							top: 0;
-							left: 8rpx;
-							width: 1rpx;
-							height: 130rpx;
-							background-color: #EEEEEE;
-						}
-					}
-					.right {
-						flex: 1;
-						display: flex;
-						flex-direction: column;
-						margin-left: 30rpx;
-						.right_top {
-							width: 100%;
-							display: flex;
-							align-items: center;
-							justify-content: space-between;
-							text {
-								&:first-child {
-									font-size: 30rpx;
-									font-family: PingFangSC, PingFang SC;
-									font-weight: 400;
-									color: #333333;
-								}
-								&:last-child {
-									font-size: 24rpx;
-									font-family: PingFangSC, PingFang SC;
-									font-weight: 400;
-									color: #999999;
-								}
-							}
-						}
-						.right_bottom {
-							width: 100%;
-							margin-top: 10rpx;
-							text {
-								font-size: 26rpx;
-								font-weight: 400;
-								color: #777777;
-							}
-							.blue {
-								color: #025EEF !important;
-							}
-						}
-					}
-				}
-			}
-			.box_list_item1 {
-				width: 100%;
-				padding: 30rpx 0;
-				box-sizing: border-box;
-				display: flex;
-				align-items: flex-start;
-				flex-wrap: wrap;
-				justify-content: space-between;
-				border-bottom: 1rpx solid #E5E5E5;
-				.box_list_item1_head {
-					width: 100%;
-					font-size: 26rpx;
-					font-weight: 400;
-					color: #777777;
-					margin-bottom: 24rpx;
-				}
-				.box_list_item_img {
-					width: 100rpx;
-					height: 100rpx;
-					flex-shrink: 0;
-					border-radius: 8rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					overflow: hidden;
-					border: 1rpx solid #EEEEEE;
+				margin-bottom: 48rpx;
+
+				.avatar {
+					width: 80rpx;
+					height: 80rpx;
+					position: relative;
 					margin-right: 20rpx;
-					image {
-						width: 100%;
+
+					.img {
+						width: 80rpx;
+						height: 80rpx;
+						border-radius: 50%;
+					}
+
+					.status {
+						width: 28rpx;
+						height: 28rpx;
+						border-radius: 50%;
+						position: absolute;
+						right: 0;
+						bottom: 0;
+					}
+
+					.separate {
+						position: absolute;
+						width: 4rpx;
 						height: 100%;
-					} 
+						background-color: #EEEEEE;
+						left: 50%;
+						transform: translate(-50%, 0);
+						bottom: -80rpx;
+					}
 				}
-				.box_list_item_info {
+
+				.content {
+					flex: 1;
+
+					.head {
+						display: flex;
+						justify-content: space-between;
+						margin-bottom: 4rpx;
+
+						.event {
+							font-size: 30rpx;
+						}
+
+						.time {
+							font-size: 26rpx;
+							color: #999999;
+						}
+					}
+
+					.name_wrap {
+						font-size: 26rpx;
+						color: #777777;
+
+						.status {
+							color: #279BAA;
+						}
+					}
+
+					.remark {
+						margin-top: 12rpx;
+						background-color: #f7f7f7;
+						padding: 14rpx 20rpx;
+						border-radius: 8rpx;
+						font-size: 26rpx;
+						color: #666666;
+						line-height: 36rpx;
+					}
+				}
+				.carbon{
+					display: flex;
+					width: 590rpx;
+					overflow-x: auto;
+					margin-top: 12rpx;
+					.carbon_item{
+						text-align: center;
+						flex-shrink: 0;
+						width: 100rpx;
+						image{
+							width: 60rpx;
+							height: 60rpx;
+							margin: 0 auto;
+						}
+						view{
+							font-size: 26rpx;
+							color: #777777;
+							
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.module_list {
+		.item {
+			padding: 30rpx 0;
+			border-bottom: 1rpx solid #E5E5E5;
+
+			.label {
+				font-size: 26rpx;
+				color: #666666;
+				margin-bottom: 20rpx;
+			}
+
+			.value {
+				font-size: 30rpx;
+				display: flex;
+				align-items: center;
+
+				.avatar {
+					margin-right: 20rpx;
+					width: 120rpx;
+					height: 120rpx;
+					border-radius: 8rpx;
+					border: 2rpx solid #E5E5E5;
+				}
+
+				.info {
 					flex: 1;
 					display: flex;
 					flex-direction: column;
-					text {
-						&:nth-child(1) {
-							font-size: 28rpx;
-							font-weight: 400;
-							color: #222222;
-						}
-						&:nth-child(2) {
-							font-size: 28rpx;
-							font-weight: 400;
-							color: #222222;
-							margin-top: 20rpx;
-						}
-						&:nth-child(3) {
-							font-size: 28rpx;
-							font-weight: 400;
-							color: #222222;
-							margin-top: 20rpx;
-						}
+					justify-content: space-between;
+					font-size: 26rpx;
+					color: #666666;
+
+					.name {
+						font-size: 30rpx;
+						color: #333333;
 					}
 				}
-			}
-			.box_list_item {
-				width: 100%;
-				padding: 30rpx 0;
-				box-sizing: border-box;
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-				border-bottom: 1rpx solid #E5E5E5;
-				.box_list_item_img {
-					width: 100rpx;
-					height: 100rpx;
-					border-radius: 8rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					overflow: hidden;
-					border: 1rpx solid #EEEEEE;
-					margin-top: 24rpx;
-					image {
-						width: 100%;
-						height: 100%;
-					} 
-				}
-				text {
-					&:nth-child(1) {
-						font-size: 26rpx;
-						font-weight: 400;
-						color: #777777;
-					}
-					&:nth-child(2) {
-						font-size: 28rpx;
-						font-weight: 400;
-						color: #222222;
-						margin-top: 20rpx;
-					}
-					&:nth-child(3) {
-						font-size: 28rpx;
-						font-weight: 400;
-						color: #222222;
-						margin-top: 20rpx;
-					}
-					&:nth-child(4) {
-						font-size: 28rpx;
-						font-weight: 400;
-						color: #222222;
-						margin-top: 20rpx;
-					}
-				}
-			}
-			.box_list_name {
-				font-size: 32rpx;
-				font-weight: 500;
-				color: #222222;
-			}
-			.box_list_job {
-				font-size: 26rpx;
-				font-weight: 400;
-				color: #666666;
-				margin-top: 20rpx;
-			}
-			.box_list_status1 {
-				position: absolute;
-				right: 30rpx;
-				top: 50%;
-				transform: translate(0, -50%);
-				width: 120rpx;
-				height: 120rpx;
-				image {
-					width: 100%;
-					height: 100%;
-				}
-			}
-			.box_list_status {
-				position: absolute;
-				right: 0;
-				top: 0;
-				width: 140rpx;
-				height: 60rpx;
-				line-height: 60rpx;
-				text-align: center;
-				font-size: 26rpx;
-				font-weight: 400;
-				color: #025EEF;
-				background: rgba(66,117,252,0.12);
-				border-radius: 0rpx 0rpx 0rpx 30rpx;
 			}
 		}
 	}
+
+	.status_wrap {
+		position: relative;
+		padding: 30rpx 0;
+
+		.name {
+			font-weight: 500;
+			font-size: 32rpx;
+			margin-bottom: 20rpx;
+			color: #222222;
+		}
+
+		.desc {
+			font-size: 26rpx;
+			color: #ED4545;
+		}
+
+		.status {
+			position: absolute;
+			right: -30rpx;
+			top: 0;
+			height: 60rpx;
+			line-height: 60rpx;
+			padding: 0 32rpx;
+			border-radius: 0rpx 0rpx 0rpx 30rpx;
+			background-color: #e9edff;
+			color: #279BAA;
+		}
+	}
+
+	.main_footer {
+		padding-bottom: 64rpx;
+		display: flex;
+		justify-content: space-between;
+
+		.btn {
+			width: 336rpx;
+			height: 88rpx;
+			line-height: 88rpx;
+			background: #FFFFFF;
+			border-radius: 44rpx;
+			border: 1rpx solid #999999;
+			font-size: 32rpx;
+			text-align: center;
+			margin: 16rpx 0;
+		}
+
+		.agree {
+			background: #279BAA;
+			color: #fff;
+			border: 1rpx solid #279BAA;
+		}
+	}
+
+	.appr_modal {
+		padding: 36rpx 30rpx 0;
+
+		.title {
+			font-weight: 500;
+			font-size: 32rpx;
+			color: #222222;
+			margin-bottom: 40rpx;
+			text-align: center;
+		}
+
+		textarea {
+			box-sizing: border-box;
+			width: 690rpx;
+			background-color: #f7f7f7;
+			font-size: 28rpx;
+			color: #333333;
+			padding: 24rpx;
+			border-radius: 8rpx;
+			margin-bottom: 30rpx;
+		}
+	}
+
+	.emyty {
+		width: 750rpx;
+		height: 20rpx;
+		background-color: #f7f7f7;
+		margin: 0 -30rpx;
+	}
+}
 </style>
diff --git a/h5/static/staff/liucheng_success@2x.png b/h5/static/staff/liucheng_success@2x.png
new file mode 100644
index 0000000..9fb9e77
--- /dev/null
+++ b/h5/static/staff/liucheng_success@2x.png
Binary files differ

--
Gitblit v1.9.3