clockIn-wechat-uniapp-241018/pages/subPack/team/team.vue

<template>
	<view class="team">
		<!-- logo -->
		<div class="logo">
			打卡系统
		</div>

		<!-- 标题 -->
		<view class="login-title">工程项目打卡系统</view>

		<!-- 团队选择表单 -->
		<view class="team-form">
			<view class="team-form-item">
				<view class="title">团队</view>
				<view class="select">
					<uni-data-select v-model="value" :localdata="range" :clear="false"></uni-data-select>
				</view>
			</view>
			<view class="team-form-item">
				<view class="title">姓名</view>
				<view class="name-input">
					<input type="text" placeholder="请输入姓名" />
				</view>
			</view>
		</view>

		<!-- 提交审核 -->
		<div @click="submit" class="btn">
			提交审核
		</div>
	</view>
</template>

<script>
	export default {
		name: "Team",
		data() {
			return {
				value: 0,
				range: [{
						value: 0,
						text: "高新区项目一队代理商的领导"
					},
					{
						value: 1,
						text: "望城区项目二队"
					},
					{
						value: 2,
						text: "雨花区项目一队"
					},
				],
			}
		},
		methods: {
			submit() {
				uni.navigateTo({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.team {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: white;

		// logo
		.logo {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0rpx;
			width: 40%;
			color: white;
			background: linear-gradient(180deg, #4C9EEA, #6DB9FF);
			border-radius: 45rpx 13rpx 45rpx 13rpx;
			font-size: 60rpx;
		}

		// 标题
		.login-title {
			font-size: 40rpx;
			font-weight: bold;
			margin: 20rpx 0rpx;
		}

		// 团队选择表单
		.team-form {
			width: 83%;
			margin: 30rpx auto;

			.team-form-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #CBCBCB;
				margin: 30rpx 0rpx;

				&:nth-child(2) {
					margin-top: 50rpx;
				}

				.title {}

				.select,
				.name-input {
					display: flex;
					justify-content: flex-end;
					width: 40%;
					font-size: 32rpx;

					input {
						width: 100%;
					}
				}

				&::v-deep .uni-select {
					border: none;
					padding: 0rpx;
				}
			}
		}

		// 提交审核
		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 83%;
			background: $main-color;
			color: white;
			height: 100rpx;
			border-radius: 50rpx;
			margin: 120rpx auto 0rpx auto;
		}
	}
</style>