uniapp/pages/eleControl/powerCut/powerCutAdd/powerCutAdd.vue

<template>
	<view class="appWrapper">
		<form action="">
			<view style="height:30rpx"></view>
			<calendar></calendar>
			<!-- <view class="form-item">
				<view class="title">
					<text class="necessary">*</text>
					开始时间:
				</view>
				<input name="input" v-model="formMess.deviceNo"></input>
			</view>
			<view class="form-item">
				<view class="title">结束时间:</view>
				<input name="input" v-model="formMess.deviceName"></input>
			</view> -->
			<view class="form-item">
				<view class="title">所属站点:</view>
				<select name="" id="">
					<option value="">站点一</option>
					<option value="">站点二</option>
					<option value="">站点三</option>
				</select>
			</view>
			
			<view class="form-item">
				<view class="title">计划类型:</view>
				<select name="" id="">
					<option value="">类型一</option>
					<option value="">类型二</option>
					<option value="">类型三</option>
				</select>
			</view>
			
			<view class="form-item">
				<view class="title">
					<text class="necessary">*</text>
					报备人:
				</view>
				<input name="input" v-model="formMess.deviceNo" placeholder="张三"></input>
			</view>
			
			<view class="form-item">
				<view class="title">
					<text class="necessary">*</text>
					手机号:
				</view>
				<input name="input" v-model="formMess.deviceNo" placeholder="18888888888"></input>
			</view>

			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" @click="submit()">提 交 </button>
			</view>
		</form>


	</view>
</template>

<script>
	import calendar from '../calendar/calendar.vue';
	export default {
		components: {
		        calendar },

		data() {
			return {
				isShow: false,
				formMess: {
					"userName": "sss",
					"siteName": "",
					"place": "",
					"longitude": "",
					"dimension": "",
					"contactor": "",
					"mobile": "",
				},
			}
		},
		onLoad: function(option) {
		},
		methods: {
			submit() {
				uni.navigateTo({
					url: '/pages/accountManage/success/success',
				});
			},
		}
	}
</script>

<style lang="scss">
	.cu-form-group {
		border-top: 0;
	}
	input,
	select,
	option {
		line-height: 70rpx;
		padding: 0 20rpx;
		height: 70rpx;
		border: 1px solid #EDEDED;
		// width:500rpx!important;
		background-color: #fff;
		box-sizing: border-box;
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		color: #999;


	}

	select:focus,
	select:active,
	select:hover {
		outline: none;
	}

	select {
		background: url(../../../../static/arrow.png) no-repeat scroll 98% center;
		background-size: 6%;
	}

	.form-item {
		padding: 0 40rpx;
		display: flex;
		align-items: top;
		margin-bottom: 20rpx;


		.title {
			width: 170rpx;
			position: relative;

			.necessary {
				color: red;
				display: inline-block;
				position: absolute;
				top: -2rpx;
				left: -20rpx;
				font-size: 40rpx;

			}
		}

		input,
		select {
			width: 500rpx;
			font-size: 28rpx;
		}
	}

</style>