1

pages/subpack/pages/application/componenets/page1.vue

@@ -0,0 +1,12 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script setup>
+	
+</script>
+
+<style>
+</style>

pages/subpack/pages/application/componenets/page2.vue

@@ -0,0 +1,115 @@
+<template>
+	<view>
+		<view class="info-dot">基本信息</view>
+		<view class="info-list">
+			<view class="info-item" v-for="(item, index) in objKeyValue" :key="index">
+				<text class="info-item-label">{{item.name}}</text>
+				<text class="info-item-content text-overflow">大厦大厦大叔大婶大厦大叔大婶大厦大叔大婶大叔大婶</text>
+			</view>
+		</view>
+		<view class="info-dot">申请理由</view>
+		<view class="info-list">
+			<view class="info-item flex-column" style="align-items: flex-start;">
+				<view class="info-item-label">申请理由</view>
+				<view class="info-item-content info-item-content2">
+					<up-textarea v-model="value1" disabled placeholder=" " count />
+				</view>
+			</view>
+			<view class="info-item flex-column" style="align-items: flex-start;">
+				<view class="info-item-label">详细说明</view>
+				<view class="info-item-content info-item-content2">
+					<up-textarea v-model="value2" disabled placeholder=" " count />
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		reactive,
+		ref
+	} from 'vue';
+	const objKeyValue = reactive([{
+			name: '姓名',
+			key: 'name'
+		},
+		{
+			name: '证件号码',
+			key: 'idNumber'
+		},
+		{
+			name: '住址',
+			key: 'address'
+		},
+		{
+			name: '联系电话',
+			key: 'phoneNnumber'
+		},
+		{
+			name: '登记日期',
+			key: 'registeredDate'
+		},
+	])
+	const value1 = ref('这是一条申请理由！！！！')
+	const value2 = ref('每一天都在这快乐的日子里快乐的生活着，想成为外面的世界里的一个过客，去厦门，去哈尔滨，去西藏，气云南….')
+</script>
+
+<style lang="scss" scoped>
+	.info-dot{
+		position: relative;
+		margin: 20rpx;
+		padding-left: 20rpx;
+		font-size: 36rpx;
+		color: #0B0B0B;
+	}
+	.info-dot::before{
+		content: '';
+		position: absolute;
+		width: 12rpx;
+		height: 12rpx;
+		border-radius: 50%;
+		top: calc(50% - 6rpx);
+		left: 0;
+		background: #4794FF;
+	}
+
+	.info-list {
+		margin: 24rpx !important;
+		padding: 30rpx;
+		border-radius: 20rpx;
+		background-color: #fff;
+	}
+
+	.info-item {
+		display: flex;
+		align-items: center;
+
+		&-label {
+			font-size: 28rpx;
+			color: #716D89;
+			width: 160rpx;
+			padding: 20rpx 0;
+		}
+
+		&-content {
+			width: 590rpx;
+			font-size: 28rpx;
+			color: #333333;
+			border-bottom: 1px solid rgba(136, 136, 136, 0.10);
+			padding: 20rpx 0;
+		}
+
+		&-content2 {
+			padding-top: 0 !important;
+			width: 650rpx;
+			border: none;
+		}
+	}
+
+	.info-item:last-child {
+		&-content {
+			border-bottom: none;
+		}
+	}
+</style>

pages/subpack/pages/application/componenets/page3.vue

@@ -0,0 +1,141 @@
+<template>
+	<view>
+		<view class="info-dot">审批进度</view>
+		<view class="flow-list">
+			<up-steps current="2" direction="column">
+				<up-steps-item class="position-relative" title="开始">
+					<template #icon>
+						<view class="flow-icon"></view>
+					</template>
+					<template #desc>
+						<view class="position-absolute flow-time" style="top: 0;right: 0;">
+							2023-05-01  12:30:23
+						</view>
+						<view class="flow-des">
+							<view class="flow-des-top">
+								<view>王晓霞</view>
+								<view class="flow-des-top-tips">提交</view>
+							</view>
+						</view>
+					</template>
+				</up-steps-item>
+				<up-steps-item title="已出库">
+					<template #icon>
+						<view class="flow-icon"></view>
+					</template>
+					<template #desc>
+						<view class="position-absolute flow-time" style="top: 0;right: 0;">
+							2023-05-01  12:30:23
+						</view>
+						<view class="flow-des">
+							<view class="flow-des-top">
+								<view>王晓霞</view>
+								<view class="flow-des-top-tips flow-des-top-tips1">同意</view>
+							</view>
+							<view class="flow-des-des">
+								意见：同意此次申请，继续努力！同意此次申请，继续努力！
+							</view>
+						</view>
+					</template>
+				</up-steps-item>
+				<up-steps-item title="结束">
+					<template #icon>
+						<view class="flow-icon"></view>
+					</template>
+					<template #desc>
+						<view class="position-absolute flow-time" style="top: 0;right: 0;">
+							2023-05-01  12:30:23
+						</view>
+						<view class="flow-des">
+							<view class="flow-des-top">
+								<view>王晓霞</view>
+								<view class="flow-des-top-tips flow-des-top-tips2">待审</view>
+							</view>
+						</view>
+					</template>
+				</up-steps-item>
+			</up-steps>
+		</view>
+	</view>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+	.flow-icon {
+		width: 18rpx;
+		height: 18rpx;
+		border-radius: 50%;
+		background: #207DFF;
+	}
+
+	.info-dot {
+		position: relative;
+		margin: 20rpx;
+		padding-left: 20rpx;
+		font-size: 36rpx;
+		color: #0B0B0B;
+	}
+
+	.info-dot::before {
+		content: '';
+		position: absolute;
+		width: 12rpx;
+		height: 12rpx;
+		border-radius: 50%;
+		top: calc(50% - 6rpx);
+		left: 0;
+		background: #4794FF;
+	}
+
+	.flow-list {
+		margin: 24rpx !important;
+		padding: 30rpx;
+		border-radius: 20rpx;
+		background-color: #fff;
+	}
+	.flow-time{
+		font-size: 28rpx;
+		color: #888888;
+	}
+
+	.flow-des {
+		background: rgba(115, 190, 255, 0.08);
+		border-radius: 8rpx 8rpx 8rpx 8rpx;
+		padding: 24rpx 40rpx 30rpx 40rpx;
+		margin-top: 30rpx;
+
+		&-top {
+			font-size: 32rpx;
+			color: #222222;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			&-tips {
+				font-size: 28rpx;
+				color: #207DFF;
+			}
+
+			&-tips1 {
+				color: #1FBC99;
+			}
+
+			&-tips2 {
+				color: #FA7E00;
+			}
+
+			&-tips3 {
+				color: #fa3534;
+			}
+		}
+
+		&-des {
+			margin-top: 25rpx;
+			font-size: 28rpx;
+			color: #888888;
+		}
+	}
+</style>