teambuy-front/pages_order/mine/recruit.vue

<!-- 合伙人页面 -->
<template>
	<view class="recruit">
		<!-- 导航栏 -->
		<navbar title="合伙人" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />

		<view class="b-relative" style="width: 710rpx;margin: 20rpx;">
			<image src="@/pages_order/static/recruit/bg.png" style="width: 710rpx;height: 310rpx;"></image>
		</view>

		<view class="item-card">
			<view class="item-line">
				<view class="before"></view>
				<view class="label">合伙人</view>
			</view>
			<view class="item-line">
				<view class="label">您的姓名</view>
				<input placeholder="请输入姓名" v-model="partnership.name" />
			</view>
			<view class="item-line">
				<view class="label">联系方式</view>
				<input placeholder="请输入联系方式" v-model="partnership.phone" />
			</view>
			<view class="item-line">
				<view class="label">所在地区</view>
				<input placeholder="请输入所在地区" v-model="partnership.city" />
			</view>
			<view class="item-line">
				<view class="label">详细地址</view>
				<textarea v-model="partnership.detailAddress" placeholder="请输入详细地址"></textarea>
			</view>
		</view>

		<view class="b-fiexd">
			<view @click="addOrUpdateMsgTer" class="button-submit">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Recruit",
		data() {
			return {
				partnership: {
					name: "",
					phone: "",
					city: "",
					detailAddress: ""
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recruit {

		.item-card {
			width: calc(710rpx - 40rpx);
			height: auto;
			background: #ffffff;
			border-radius: 16rpx;

			margin: 40rpx auto 20rpx;
			padding: 40rpx 20rpx;
		}

		.item-line {
			display: flex;
			height: 60rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
			margin-bottom: 40rpx;

			&:nth-child(1) {
				margin-bottom: 0rpx;

				.label {
					font-size: 36rpx;
				}
			}

			&:last-child {
				margin-bottom: 0rpx;
				height: auto;
			}
		}

		.item-line .before {
			content: "";
			width: 8rpx;
			height: 30rpx;
			background: $uni-color;
			border-radius: 4rpx;
			margin-right: 10rpx;
			margin-top: 15rpx;
		}

		.item-line .label {
			display: flex;
			align-items: center;
			width: 152rpx;
			height: 60rpx;
		}

		.item-line input,
		.item-line textarea {
			width: 90%;
			height: 60rpx;
			line-height: 60rpx;
			background: #f5f5f5;
			border-radius: 12rpx;

			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #939393;

			padding: 0 20rpx;
		}

		.item-line textarea {
			height: 120rpx;
			padding: 10rpx;
		}

		.upload {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 200rpx;
			height: 200rpx;
			background: rgba(245, 245, 245, 0.82);
			border: 2rpx dashed #99dcd0;
			border-radius: 16rpx;

			margin: 10rpx 12rpx;
		}

		.upload-img {
			width: calc(100% - 4rpx);
			height: calc(100% - 4rpx);
			border: 2rpx dashed #ccc;
			margin: 2rpx;
		}

		.b-fiexd {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;

			.button-submit {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 596rpx;
				height: 90rpx;
				background: #E3441A;
				border-radius: 46rpx;

				margin: 20rpx auto;

				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
			}
		}
	}
</style>