powerbank/pages/agentpages/devicemanagement/repairapplication/shenbao/index.vue

<template>
	<view class="page">
		<u-navbar title="维修申报" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000" title-size='36' height='50'></u-navbar>
        <view class="box">
        	<view class="jijian">
        		<text>寄件地址：</text> <textarea value="" placeholder="请输入寄件地址" />
        	</view>
			<view class="froms">
				<view class="name">
					<text>姓名：</text> <input type="text" placeholder="请输入姓名"/>
				</view>
				<view class="pwd">
					<text>电话：</text> <input type="text" placeholder="请输入电话"/>
				</view>
				<view class="weixiu">
					<text>维修原因：</text> <textarea value="" placeholder="请备注原因" />
				</view>
			</view>
			
			<button>提交</button>
        </view>
	</view>
</template>

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

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	/deep/ .u-title,
	/deep/ .uicon-nav-back {
		padding-bottom: 22rpx;
	}
	page {
		background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
	}

	.page {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		.box{
			button{
				width: 584rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				background: linear-gradient( 270deg, #54DAA1 0%, #19CD82 100%);
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				margin: auto;
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
				bottom: 432rpx;
			}
			padding-top: 30rpx;
			width: 750rpx;
			height: 1440rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			.froms{
				width: 680rpx;
				height: 558rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				margin-top: 34rpx;
				padding: 44rpx;
				box-sizing: border-box;
				.name{
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
					input{
						width: 446rpx;
						height: 50rpx;
						background: #F0F0F0;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						padding: 10rpx 20rpx;
						box-sizing: border-box;
						font-size: 24rpx;
						color: #979797;
					}
					text{
						margin-top: 5rpx;
					}
				}
				.pwd{
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
					text{
						margin-top: 5rpx;
					}
					input{
						width: 446rpx;
						height: 50rpx;
						background: #F0F0F0;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						padding: 10rpx 20rpx;
						box-sizing: border-box;
						font-size: 24rpx;
						color: #979797;
					}
				}
				.weixiu{
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
					text{
						font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #3D3D3D;
					}
					textarea{
						width: 446rpx;
						height: 158rpx;
						background: #F0F0F0;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						padding: 10rpx 20rpx;
						box-sizing: border-box;
					}
				}
			}
			.jijian{
				width: 680rpx;
				height: 230rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				padding: 42rpx 44rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				text{
					font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}
				textarea{
					width: 446rpx;
					height: 158rpx;
					background: #F0F0F0;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					padding: 10rpx 20rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>