CXSG_H5/pages/upReport/upReport.vue

<template>
	<view class="upReport">
		<!-- 导航栏 -->
		<navigationBar title="一键上报">
			<template #operate>
				<view class="location">
					<u-icon name="map-fill" color="#000" size="32"></u-icon>
					{{location}}
				</view>
			</template>
		</navigationBar>
		<view class="main">
			<view class="scroll-view-item">
				<view class="list">
					<text class="name">公路名称:</text>
					<text class="content">机场路南延、机场路</text>
				</view>
				<view class="list">
					<text class="name">详细地点:</text>
					<text class="content">0.224</text>
				</view>
				<view class="topDown">
					<text class="name">上传图片:</text>
					<view class="uploadingImg">
						<u-upload :fileList="fileList1" name="1" multiple :maxCount="1" width="181.05rpx"
							height="181.05rpx"></u-upload>
					</view>
				</view>
				<view class="topDown">
					<text class="name">问题描述:</text>
					<u--textarea v-model="value1" placeholder="请输入内容"></u--textarea>
				</view>
				<view class="list noBorder">
					<text class="name">是否需要反馈:</text>
					<u-radio-group v-model="value1" placement="row">
						<u-radio activeColor="#000" label="是" size="28" iconSize="28" labelSize="28"></u-radio>
						<u-radio activeColor="#000" label="否" size="28" iconSize="28" labelSize="28"></u-radio>
					</u-radio-group>
				</view>
				<u--textarea v-model="value1" placeholder="请输入内容"></u--textarea>
			</view>
			<view class="btn">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 定位
				location: "海曙区",
				// 上传图片
				fileList1: [],
				// 
				value1: ''
			};
		}
	}
</script>

<style lang="scss" scoped>
	.upReport {
		height: 100%;

		.location {
			flex: none;
			font-size: 25.26rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
		}

		.main {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10.53rpx 0;
			border-bottom: 2.11rpx solid #E8E8E8;
			margin-bottom: 21.05rpx;

			.name {
				font-weight: 600;
			}

			.u-radio-group {
				justify-content: flex-end;
			}

		}

		.noBorder {
			border: 0;
		}

		.topDown {
			margin-bottom: 21.05rpx;

			.name {
				font-weight: 600;
			}

			.uploadingImg {
				font-size: 101.05rpx;

				::v-deep .u-upload {
					.u-upload__wrap {
						.u-upload__button {
							.u-icon {
								.u-icon__icon {
									font-size: 101.05rpx;
								}
							}
						}
					}
				}
			}
		}

		.btn {
			width: 202.11rpx;
			height: 75.79rpx;
			line-height: 75.79rpx;
			margin: 0 auto;
			border-radius: 105.26rpx;
			background-color: #D7ECFF;
			color: #000;
			font-size: 33.68rpx;
			text-align: center;
			font-weight: 600;
		}
	}
</style>