odd_job_applet/pages/comjobs/jobDemands.vue

<template>
	<view>
		<view class="demandForm">
			<view class="form-item">
				<view class="item-title">需求分类</view>
				<view class="item-area">
					<input class="item-area-input" placeholder="请选择" placeholder-style="color: #979797;"></input>
				</view>
			</view>
			<view class="form-item">
				<view class="item-title">您的需求</view>
				<view class="item-area">
					<input class="item-area-input" placeholder="请输入您的要求" placeholder-style="color: #979797;"></input>
				</view>
			</view>
			<view class="form-item">
				<view class="item-title">期望价格</view>
				<view class="item-area-mult">
					<view class="item-area-mult-box">
						<input class="item-area-input" type="digit" placeholder="请输入"
							placeholder-style="color: #979797;"></input>
					</view>
					<view>元</view>
				</view>
			</view>
			<view class="form-item">
				<view class="item-title">服务地址</view>
				<view class="item-area">
					<input class="item-area-input" placeholder="请选择地址" placeholder-style="color: #979797;"></input>
				</view>
			</view>
			<view class="form-item">
				<view class="item-title">期望服务时间</view>
				<view class="item-area">
					<input class="item-area-input" placeholder="请选择时间" placeholder-style="color: #979797;"></input>
				</view>
			</view>
			<view class="form-item">
				<view class="item-title">添加图片</view>
				<view class="item-area-image">
					<view class="item-area-imageBox">
						<u-icon name="plus" color="#B4B5B5" size="40"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="bottomEmpty"></view>
		<view class="bottomArea">
			<view class="bottomLeft">
				<text class="bottomLeft-title">应付金额：</text>
				<text style="font-weight: 600;color: #CA151C;">￥</text>
				<text class="bottomLeft-money">300</text>
			</view>
			<view class="bottomButton" @tap="submit">确认提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			submit() {

			},
		}
	}
</script>

<style lang="scss">
	.demandForm {
		padding: 40rpx 70rpx 10rpx;
		background-color: #FFFFFF;

		.form-item {
			margin-bottom: 35rpx;

			.item-area-mult {
				margin-top: 15rpx;
				width: 100%;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				font-size: 28rpx;
				color: #979797;


				.item-area-mult-box {
					width: 90%;
					height: 100rpx;
					margin-right: 15rpx;
					padding: 0 36rpx;
					background: #F7F7F7;

					.item-area-input {
						height: 100rpx;
					}
				}
			}

			.item-area-image {
				margin-top: 15rpx;

				.item-area-imageBox {
					width: 200rpx;
					height: 200rpx;
					background: #F7F7F7;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.item-area {
				margin-top: 15rpx;
				padding: 0 36rpx;
				width: 100%;
				height: 100rpx;
				background: #F7F7F7;
				font-size: 28rpx;
				color: #979797;

				.item-area-input {
					height: 100rpx;
				}
			}
		}
	}

	.bottomEmpty {
		margin-top: 80rpx;
		height: 130rpx;
	}

	.bottomArea {
		position: fixed;
		bottom: 0;
		z-index: 100;
		width: 100%;
		height: 130rpx;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		box-shadow: -10rpx -12rpx 12rpx 2rpx rgba(52, 85, 73, 0.16);

		.bottomLeft {
			.bottomLeft-money {
				font-size: 40rpx;
				font-weight: 600;
				color: #CA151C;
			}
		}

		.bottomButton {
			width: 360rpx;
			height: 88rpx;
			background-color: #CA151C;
			border-radius: 54rpx;
			color: #FFFFFF;
			font-size: 36rpx;
			line-height: 88rpx;
			text-align: center;
		}
	}
</style>