Kaynağa Gözat

页面样式调整

zhangdan 4 yıl önce
ebeveyn
işleme
90292f074e

+ 160 - 112
pages/index/addData.vue

@@ -1,53 +1,41 @@
 <template>
 	<view class="content">
-		<u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
-			<view class="form-item">
-				<image src="../../static/CLOTHES.png" mode=""  class="form-item-icon"></image>
-				<u-form-item label="其他垃圾" >
-					<u-input placeholder="请输入" :maxlength="30" v-model="form.receiverName" />
-					<text slot="right" style="color: #000000;">桶(约{{125}} kg)</text>
-				</u-form-item>
-			</view>
-			<view class="form-item">
-				<image src="../../static/CLOTHES.png" mode=""  class="form-item-icon"></image>
-				<u-form-item label="厨余垃圾" >
-					<u-input placeholder="请输入" :maxlength="11" type="number" v-model="form.receiverPhone" />
-					<text slot="right" style="color: #000000;">桶(约{{125}} kg)</text>
-				</u-form-item>
-			</view>
-			<view class="form-item">
-				<image src="../../static/CLOTHES.png" mode=""  class="form-item-icon"></image>
-				<u-form-item label="建筑垃圾" >
-					<u-input placeholder="请输入" :maxlength="11" type="number" v-model="form.receiverPhone" />
-					<text slot="right" style="color: #000000;">吨(约{{125}} kg)</text>
-				</u-form-item>
-			</view>
-			<view class="form-item">
-				<image src="../../static/CLOTHES.png" mode=""  class="form-item-icon"></image>
-				<u-form-item label="信息备注" style="width: 100%;">
-					<u-input placeholder="请输入" :maxlength="11" type="textarea" v-model="form.receiverPhone" />
-					<!-- <textarea :auto-height="true" placeholder="请输入备注(最多500个字符)" :maxlength="500" v-model="form.receiveAddress" class="receiveAddress"/> -->
-				</u-form-item>
-			</view>
-			<view class="form-item">
-				<image src="../../static/CLOTHES.png" mode=""  class="form-item-icon"></image>
-				<u-form-item label="清运照片" style="width: 100%;">
-					<text style="color: #c0c4cc;" v-if="!photograph">最多3张</text>
-						<u-icon v-show="photograph" name="close-circle-fill" color="#fa3534" size="50" class="close-circle-icon" @click="cancelPhotograph"></u-icon>
-						<u-icon  slot="right" name="camera" color="#2979ff" size="60" class="photograph-icon"  @click="photograph.length ? null : goPhotograph()"></u-icon>
-						<u-image width="100%" height="100%" v-for="item in photograph" :src="item" @click="previewPictures"></u-image>
-					<!-- <u-icon  slot="right" name="camera" color="#2979ff" size="60" class="photograph-icon"></u-icon> -->
-					<!-- <camera device-position="back" flash="off"></camera>
-					        <!-- <button type="primary" @click="takePhoto">拍照</button>
-							<!-- <uni-icons type="camera"  @click="takePhoto" size="30rpx"></uni-icons>
-					        <view>预览</view>
-					        <image mode="widthFix" :src="src"></image> -->
-				</u-form-item>
+		<view class="form-data">
+			<u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
+					<u-form-item label="其他垃圾:" >
+						<u-input placeholder="请输入" :maxlength="30" v-model="form.receiverName" />
+						<text slot="right" style="color: #000000;">桶(约{{125}}kg)</text>
+					</u-form-item>
+					<u-form-item label="厨余垃圾:" >
+						<u-input placeholder="请输入" :maxlength="11" type="number" v-model="form.receiverPhone" />
+						<text slot="right" style="color: #000000;">桶(约{{125}}kg)</text>
+					</u-form-item>
+					<u-form-item label="建筑垃圾:" >
+						<u-input placeholder="请输入" :maxlength="11" type="number" v-model="form.receiverPhone" />
+						<text slot="right" style="color: #000000;">吨(约{{125}}kg)</text>
+					</u-form-item>
+			</u-form>
+		</view>
+		<view class="form-data remark">
+			<text>信息备注</text>
+			<textarea :auto-height="true" :maxlength="500" v-model="form.receiveAddress" class="receiveAddress"/>
+		</view>
+		<view class="form-data qyImg">
+			<text>清运照片</text>
+			<view class="info-main">
+				<view class="photograph-con">
+					<u-icon v-show="photograph" name="close-circle-fill" color="#fa3534" size="50" class="close-circle-icon" @click="cancelPhotograph"></u-icon>
+					<u-icon v-show="!photograph" name="camera" color="#bfbfbf" size="60" class="photograph-icon"></u-icon>
+					<!-- <u-image src="/static/camera.png"></u-image> -->
+					<u-image v-show="photograph" width="100%" height="100%" :src="photograph" @click="previewPictures"></u-image>
+				</view>
 			</view>
-		</u-form>
+		</view>
 		<view class="buttons">
-			<u-button type="primary" @click="submit">提交</u-button>
+			<u-button  @click="submit" class="submit" type="success">提交</u-button>
 		</view>
+		<!-- 确认弹框 -->
+			<!-- <modal v-model="show" :content="content" :show-title='false' :show-cancel-button='true' confirm-color="#0DC55F"  @bindconfirm="confirm"  bindcancel="cancel"></modal> -->
 	</view>
 </template>
 
@@ -62,7 +50,9 @@
 		},
 		data() {
 			return {
-				show: false,
+				// show: false,
+				show:false,
+				content:'确认提交吗?',
 				src:"",
 				photograph: [], //  图片路径
 				form: {
@@ -139,61 +129,69 @@
 					this.photograph = '';
 				}, 500);
 			},
+			confirm(){
+				this.show=false
+			},
+			cancel(){
+				this.show=false
+			},
 			submit() {
-				this.$refs.uForm.validate(valid => {
-					if (valid) {
-						console.log('验证通过');
-						if (this.form.receiverName ==='') {
-							uni.showToast({
-								title: '请输入姓名',
-								icon: 'none'
-							})
-							return false
-						}
-						if (this.form.receiverPhone ==='') {
-							uni.showToast({
-								title: '请输入电话',
-								icon: 'none'
-							})
-							return false
-						}
-						//  省市区
-						if(this.areaIdArr.length == 0){
-							uni.showToast({icon: 'none',title: '请选择省市区'})
-							return
-						}
-						if (this.form.receiveAddress ==='') {
-							uni.showToast({
-								title: '请输入详细地址',
-								icon: 'none'
-							})
-							return false
-						}
-						let params = {
-							receiverName: this.form.receiverName,
-							receiverPhone: this.form.receiverPhone,
-							receiveAreasName: this.areaInfo.label.replace(/\-/g,','), // 地址名称
-							receiveAreas: this.areaIdArr.join(','), 
-							receiveAddress: this.form.receiveAddress // 详细地址
-						}
-						if(this.form.id) {
-							params.id = this.form.id
-						}
-						saveAddress(params).then(res=>{
-							if(res.status == 200) {
-								uni.showToast({
-									title: res.message,
-									icon: 'none'
-								})
-								setTimeout(()=>{
-									uni.navigateBack()
-								},300)
-							} 
-						})
-					} else {
-						console.log('验证失败');
-					}
-				});
+				this.show=true
+				
+				// this.$refs.uForm.validate(valid => {
+				// 	if (valid) {
+				// 		console.log('验证通过');
+				// 		if (this.form.receiverName ==='') {
+				// 			uni.showToast({
+				// 				title: '请输入姓名',
+				// 				icon: 'none'
+				// 			})
+				// 			return false
+				// 		}
+				// 		if (this.form.receiverPhone ==='') {
+				// 			uni.showToast({
+				// 				title: '请输入电话',
+				// 				icon: 'none'
+				// 			})
+				// 			return false
+				// 		}
+				// 		//  省市区
+				// 		if(this.areaIdArr.length == 0){
+				// 			uni.showToast({icon: 'none',title: '请选择省市区'})
+				// 			return
+				// 		}
+				// 		if (this.form.receiveAddress ==='') {
+				// 			uni.showToast({
+				// 				title: '请输入详细地址',
+				// 				icon: 'none'
+				// 			})
+				// 			return false
+				// 		}
+				// 		let params = {
+				// 			receiverName: this.form.receiverName,
+				// 			receiverPhone: this.form.receiverPhone,
+				// 			receiveAreasName: this.areaInfo.label.replace(/\-/g,','), // 地址名称
+				// 			receiveAreas: this.areaIdArr.join(','), 
+				// 			receiveAddress: this.form.receiveAddress // 详细地址
+				// 		}
+				// 		if(this.form.id) {
+				// 			params.id = this.form.id
+				// 		}
+				// 		saveAddress(params).then(res=>{
+				// 			if(res.status == 200) {
+				// 				uni.showToast({
+				// 					title: res.message,
+				// 					icon: 'none'
+				// 				})
+				// 				setTimeout(()=>{
+				// 					uni.navigateBack()
+				// 				},300)
+				// 			} 
+				// 		})
+				// 	} else {
+				// 		console.log('验证失败');
+				// 	}
+				// });
 			},
 			// 拍照
 			takePhoto() {
@@ -213,30 +211,80 @@
 		onReady() {
 			this.$refs.uForm.setRules(this.rules);
 		}
-	};
+	}
 </script>
 
 <style lang="scss">
 	.content{
-		padding: 0 50upx;
-		background: #FFFFFF;
 		width: 100%;
-		.buttons{
-			padding: 80upx 100upx;
-		}
+		height: 100vh;
+		padding: 0;
+		background: #F5F5F5;
+		// .buttons{
+		// 	font-size: 32upx;
+		// 	display: block;
+		// 	height: 80upx;
+		// 	line-height: 80upx;
+		// 	margin: 0 auto;
+		// 	background-color: #0DC55F;
+		// 	color: #fff;
+		// 	border-radius: 50upx;
+		// }
 		.receiveAddress{
 			width: 100%;
 			line-height: 1.5em;
 			box-sizing: border-box;
 			font-style: normal;
 		}
-		.form-item{
-			display: flex;
-			.form-item-icon{
-				width: 45upx;
-				height: 45upx;
-				margin: auto 10upx;
+		.form-data{
+			padding: 0 40upx;
+			margin-bottom: 20upx;
+			background-color: #fff;
+		}
+		.remark{
+			padding: 40upx ;
+		}
+		.qyImg{
+			padding: 40upx ;
+		}
+		.info-main {
+			margin-top: 14upx;
+			border-radius: 12upx;
+			background-color: #fff;
+			.location-icon {
+				padding-left: 10upx;
+				vertical-align: sub;
 			}
+			.photograph-con {
+				border: 2upx dashed #bfbfbf;
+				border-radius: 12upx;
+				width: 160upx;
+				height: 160upx;
+				text-align: center;
+				position: relative;
+				.photograph-icon {
+					display: inline-block;
+					padding-top: 48upx;
+				}
+				.close-circle-icon {
+					background-color: #fff;
+					border-radius: 50%;
+					position: absolute;
+					right: -23upx;
+					top: -23upx;
+					z-index: 9;
+				}
+			}
+		}
+		.submit{
+			font-size: 32upx;
+			display: block;
+			width: 670upx;
+			height: 80upx;
+			line-height: 80upx;
+			margin: 0 auto;
+			color: #fff;
+			border-radius: 50upx;
 		}
 	}
 </style>

+ 67 - 38
pages/login/login.vue

@@ -1,9 +1,10 @@
 <template>
 	<view class="content">
-		<view>
+		<!-- <view> -->
 			<view>
-				<view class="logo">
-					<u-image src="/static/logo.png" width="140" height="140" ></u-image>
+				<view>
+					<u-image src="/static/login_icon.png" width="160" height="160" class="logo"></u-image>
+					<u-image src="/static/login_slogan.png" width="360" height="36" class="logo_text"></u-image>
 				</view>
 				<view class="login-btns">
 					<u-button shape="circle" :custom-style="wxButton" class="login-btn" type="success" :hair-line="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
@@ -20,8 +21,8 @@
 					暂不登录
 				</u-button>
 			</view>
-		</view>
-		<view @click="toYs">登录即代表同意<text>乐色助手用户协议及隐私保护政策</text></view>
+		<!-- </view> -->
+		<!-- <view @click="toYs">登录即代表同意<text>乐色助手用户协议及隐私保护政策</text></view> -->
 	</view>
 </template>
 
@@ -38,10 +39,12 @@
 				code: '',
 				url:'', // 二维码参数
 				wxButton: {
-					background: '#07c160'
+					background: '#0DC55F'
 				},
 				phoneButton: {
-					background: '#00aaff'
+					background: '#fff',
+					color:'#000',
+					border: '1px solid #BBBBBB'
 				}
 			}
 		},
@@ -161,39 +164,65 @@
 </script>
 
 <style lang="scss">
-	.content {
+	.content{
 		width: 100%;
-		height: 100%;
-		padding: 40upx;
-		display: flex;
-		flex-direction: column;
-		> view{
+		height: 100vh;
+		padding:0 40upx;
+		margin: 0 auto;
+		.logo{
+			display: inline-block;
+			margin:250upx 256upx 24upx;
+		}
+		.logo_text{
+			display: inline-block;
+			margin:0upx 154upx 200upx;
+		}
+		.login-btn{
+			display: block;
+			width: 670upx;
+			height: 100upx;
+			border-radius: 50upx;
+		}
+		.nologin{
 			text-align: center;
-			&:first-child{
-				flex-grow: 1;
-				height: 80vh;
-				padding: 20% 10%;
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-			}
-			&:last-child{
-				font-size: 24upx;
-				text{
-					color: #07c160;
-				}
-			}
-			.logo{
-				text-align: center;
-				display: flex;
-				justify-content: center;
-			}
-			.login-btns{
-				padding: 60upx 0;
-				.login-btn{
-					margin: 30upx 0;
-				}
-			}
+			margin-top: 100upx;
 		}
 	}
+	// .content {
+	// 	width: 100%;
+	// 	height: 100%;
+	// 	padding: 40upx;
+	// 	display: flex;
+	// 	flex-direction: column;
+	// 	> view{
+	// 		text-align: center;
+	// 		&:first-child{
+	// 			flex-grow: 1;
+	// 			height: 80vh;
+	// 			padding: 20% 10%;
+	// 			display: flex;
+	// 			flex-direction: column;
+	// 			justify-content: space-between;
+	// 		}
+	// 		&:last-child{
+	// 			font-size: 24upx;
+	// 			text{
+	// 				color: #07c160;
+	// 			}
+	// 		}
+	// 		.logo{
+	// 			text-align: center;
+	// 			display: flex;
+	// 			justify-content: center;
+	// 		}
+	// 		.login-btns{
+	// 			// padding: 60upx 0;
+	// 			.login-btn{
+	// 				width: 670upx;
+	// 				height: 50upx;
+	// 				border-radius: 25upx;
+	// 			}
+	// 		}
+	// 	}
+	// }
 </style>

+ 7 - 10
pages/login/loginPw.scss

@@ -3,24 +3,20 @@
 	width: 100%;
 	height: 100vh;
 	box-sizing: border-box;
+	padding: 0 40upx;
 	.logo{
 		display: block;
-		width: 150upx;
-		height: 150upx;
-		padding-top: 120upx;
 		margin: 0 auto;
+		padding: 200upx 256upx 60upx;
 	}
 	.login-form{
 		display: block;
-		width: 80%;
-		margin: 0 auto;
-		padding-top: 110upx;
 		.form-item{
 			margin-bottom: 20upx;
 			position: relative;
 			display: flex;
 			align-items: center;
-			border-bottom: 1upx solid #dcdee2;
+			border-bottom: 1upx solid #e5e5e5;
 			.require-tip{
 				position: absolute;
 				left: 0;
@@ -52,11 +48,12 @@
 			.form-btn{
 				font-size: 32upx;
 				display: block;
-				line-height: 84upx;
+				height: 80upx;
+				line-height: 80upx;
 				margin: 0 auto;
-				background-color: #2ab4e5;
-				// background-color: #298bf2;
+				background-color: #0DC55F;
 				color: #fff;
+				border-radius: 50upx;
 			}
 			uni-button.form-btn:after{
 				border: none;

+ 7 - 7
pages/login/phoneLogin.vue

@@ -1,29 +1,29 @@
 <template>
 	<view class="login-wrap">
 		<!-- <view v-if="!buildType" style="text-align: center;color: #999999;padding-top: 40px;">{{ envTips }}</view> -->
-		<image src="../../static/logo.jpg" class="logo"></image>
+		<u-image src="/static/login_icon.png" width="160" height="160" class="logo"></u-image>
 		<form class="login-form" @submit="formSubmit">
 			<view class="form-item">
-				<u-icon size="34" color="#999" name="account"></u-icon>
+				<u-image src="/static/user_icon_number.png" width="44" height="44" class="logo_user_icon"></u-image>
 				<input v-model="form.loginName" class="item-inp" name="loginName" type="text" maxlength="30" placeholder="请输入用户名" />
 			</view>
 			<view class="form-item">
-				<u-icon size="34" color="#999" name="lock"></u-icon>
+				<u-image src="/static/user_icon_password.png" width="44" height="44" class="logo_pwd_icon"></u-image>
 				<input v-model="form.password" class="item-inp" name="password" password type="text" maxlength="12" placeholder="请输入密码" />
 			</view>
-			<view class="flex-box" style="margin-top: 60upx;">
+			<view class="flex-box" style="margin-top: 40upx;">
 				<view class="remember-pass">
-					<u-checkbox v-model="isRemember" value="true" :size="30" :label-size="26" active-color="#2ab4e5" class="login-form-checkbox" @change="rememberChange">记住密码</u-checkbox>
+					<u-checkbox shape="circle" v-model="isRemember" value="true" :size="30" :label-size="26" active-color="#0DC55F" class="login-form-checkbox" @change="rememberChange">记住密码</u-checkbox>
 				</view>
 			</view>
 			<view class="form-btn-con">
 				<button class="form-btn" form-type="submit">登录</button>
 			</view>
 		</form>
-		<view class="authUserYs">
+		<!-- <view class="authUserYs">
 			<u-checkbox v-model="isAuthuserYs" value="true" :size="30" :label-size="26" active-color="#2ab4e5" class="login-form-checkbox" @change="authuserChange">登录代表同意</u-checkbox>
 			<text @click="toYsPage()" style="vertical-align: text-top;font-size: 26rpx;text-decoration: underline;">乐色助手用户协议及隐私保护政策</text>
-		</view>
+		</view> -->
 	</view>
 </template>
 

BIN
static/RECYCLING.png


BIN
static/SHARE_FRIEND.png


BIN
static/camera.png


BIN
static/login_icon.png


BIN
static/login_slogan.png


BIN
static/md-big-pic.png


BIN
static/md-icon.png


BIN
static/nozj.png


BIN
static/shift.png


BIN
static/t1.png


BIN
static/tdsm.jpg


BIN
static/time-icon.png


BIN
static/topBg.png


BIN
static/user_icon_number.png


BIN
static/user_icon_password.png