no message

components/watch-input.vue

@@ -1,79 +1,55 @@
 <template>
 	<view class="main-list oBorder">
 		<!-- 文本框 -->
-		<input 
-			class="main-input" 
-			:value="value" 
-			:type="_type" 
-			:maxlength="maxlength" 
-			:placeholder="placeholder" 
-			:password="type==='password'&&!showPassword" 
-			
-			@input="$emit('input', $event.target.value)"
-			@blur="$emit('blur', $event)"
-			@focus="$emit('focus', $event)"
-			@longpress="$emit('longpress', $event)"
-			@confirm="$emit('confirm', $event)"
-			@click="$emit('click', $event)"
-			@longtap="$emit('longtap', $event)"
-			@touchcancel="$emit('touchcancel', $event)"
-			@touchend="$emit('touchend', $event)"
-			@touchmove="$emit('touchmove', $event)"
-			@touchstart="$emit('touchstart', $event)"
-		/>
+		<input class="main-input" :value="value" :type="_type" :maxlength="maxlength" :placeholder="placeholder" :password="type==='password'&&!showPassword"
+		 @input="$emit('input', $event.target.value)" @blur="$emit('blur', $event)" @focus="$emit('focus', $event)"
+		 @longpress="$emit('longpress', $event)" @confirm="$emit('confirm', $event)" @click="$emit('click', $event)" @longtap="$emit('longtap', $event)"
+		 @touchcancel="$emit('touchcancel', $event)" @touchend="$emit('touchend', $event)" @touchmove="$emit('touchmove', $event)"
+		 @touchstart="$emit('touchstart', $event)" />
 		<!-- 是否可见密码 -->
-		<image 
-			v-if="_isShowPass&&type==='password'&&!_isShowCode"
-			class="img cuIcon" 
-			:class="showPassword?'cuIcon-attention':'cuIcon-attentionforbid'" 
-			@tap="showPass"
-		></image>
+		<image v-if="_isShowPass&&type==='password'&&!_isShowCode" class="img cuIcon" :class="showPassword?'cuIcon-attention':'cuIcon-attentionforbid'"
+		 @tap="showPass"></image>
 		<!-- 倒计时 -->
-		<view 
-			v-if="_isShowCode&&!_isShowPass"
-			:class="['vercode',{'vercode-run': second>0}]" 
-			@click="setCode"
-		>{{ getVerCodeSecond }}</view>
-		
+		<view v-if="_isShowCode&&!_isShowPass" :class="['vercode',{'vercode-run': second>0}]" @click="setCode">{{ getVerCodeSecond }}</view>
 	</view>
 </template>
 
 <script>
 	var _this, countDown;
-	export default{
-		data(){
-			return{
+	export default {
+		data() {
+			return {
 				showPassword: false, //是否显示明文
 				second: 0, //倒计时
 				isRunCode: false, //是否开始倒计时
 			}
 		},
-		props:{
+		props: {
 			type: String, //类型
 			value: String, //值
 			placeholder: String, //框内提示
 			maxlength: {
 				//最大长度
-				type: [Number,String],
+				type: [Number, String],
 				default: 20,
 			},
-			isShowPass:{
+			isShowPass: {
 				//是否显示密码图标（二选一）
-				type: [Boolean,String],
+				type: [Boolean, String],
 				default: false,
 			},
-			isShowCode:{
+			isShowCode: {
 				//是否显示获取验证码（二选一）
-				type: [Boolean,String],
+				type: [Boolean, String],
 				default: false,
 			},
-			codeText:{
+			codeText: {
 				type: String,
 				default: "获取验证码",
 			},
-			setTime:{
+			setTime: {
 				//倒计时时间设置
-				type: [Number,String],
+				type: [Number, String],
 				default: 60,
 			}
 		},
@@ -82,55 +58,55 @@
 			event: 'input'
 		},
 		mounted() {
-			_this=this
+			_this = this
 			//准备触发
-			this.$on('runCode',(val)=>{
-                this.runCode(val);
-            });
-			clearInterval(countDown);//先清理一次循环，避免缓存
+			this.$on('runCode', (val) => {
+				this.runCode(val);
+			});
+			clearInterval(countDown); //先清理一次循环，避免缓存
 		},
-		methods:{
-			showPass(){
+		methods: {
+			showPass() {
 				//是否显示密码
 				this.showPassword = !this.showPassword
 			},
-			setCode(){
+			setCode() {
 				//设置获取验证码的事件
-				if(this.isRunCode){
+				if (this.isRunCode) {
 					//判断是否开始倒计时，避免重复点击
 					return false;
 				}
 				this.$emit('setCode')
 			},
-			runCode(val){
+			runCode(val) {
 				//开始倒计时
-				if(String(val)=="0"){
-					
+				if (String(val) == "0") {
+
 					//判断是否需要终止循环
 					this.second = 0; //初始倒计时
-					clearInterval(countDown);//清理循环
-					this.isRunCode= false; //关闭循环状态
+					clearInterval(countDown); //清理循环
+					this.isRunCode = false; //关闭循环状态
 					return false;
 				}
-				if(this.isRunCode){
+				if (this.isRunCode) {
 					//判断是否开始倒计时，避免重复点击
 					return false;
 				}
-				this.isRunCode= true
+				this.isRunCode = true
 				this.second = this._setTime //倒数秒数
-				
-				let _this=this;
-				countDown = setInterval(function(){
+
+				let _this = this;
+				countDown = setInterval(function() {
 					_this.second--
-					if(_this.second==0){
-						_this.isRunCode= false
+					if (_this.second == 0) {
+						_this.isRunCode = false
 						clearInterval(countDown)
 					}
-				},1000)
+				}, 1000)
 			}
 		},
-		computed:{
-			_type(){
+		computed: {
+			_type() {
 				//处理值
 				const type = this.type
 				return type == 'password' ? 'text' : type
@@ -146,20 +122,20 @@
 			_setTime() {
 				//处理值
 				const setTime = Number(this.setTime)
-				return setTime>0 ? setTime : 60
+				return setTime > 0 ? setTime : 60
 			},
-			getVerCodeSecond(){
+			getVerCodeSecond() {
 				//验证码倒计时计算
-				if(this.second<=0){
+				if (this.second <= 0) {
 					return this.codeText;
-				}else{
-					if(this.second<10){
-						return '0'+this.second;
-					}else{
+				} else {
+					if (this.second < 10) {
+						return '0' + this.second;
+					} else {
 						return this.second;
 					}
 				}
-				
+
 			}
 		}
 	}
@@ -167,42 +143,46 @@
 
 <style>
 	@import url("./colorui/icon.css");
-	
-	.main-list{
+
+	.main-list {
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
 		align-items: center;
-		/* height: 36rpx; */   /* Input 高度 */
+		/* height: 36rpx; */
+		/* Input 高度 */
 		color: #333333;
 		padding: 30rpx 32rpx;
-		margin:32rpx 0;
+		margin: 32rpx 0;
 	}
-	.img{
+
+	.img {
 		width: 32rpx;
 		height: 32rpx;
 		font-size: 32rpx;
 	}
-	.main-input{
+
+	.main-input {
 		flex: 1;
 		text-align: left;
 		font-size: 28rpx;
 		/* line-height: 100rpx; */
 		padding-right: 10rpx;
-		margin-left: 20rpx;
+		padding-left: 20rpx;
+		border-left: 2rpx solid #E0E0E0;
 	}
+
 	.vercode {
-		color: rgba(0,0,0,0.7);
+		color: #0B73B9;
 		font-size: 24rpx;
 		/* line-height: 100rpx; */
 	}
+
 	.vercode-run {
-		color: rgba(0,0,0,0.4) !important;
+		color: #0B73B9 !important;
 	}
-	.oBorder{
-	    border: none;
-	    border-radius: 2.5rem ;
-	    -webkit-box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
-	    box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
+
+	.oBorder {
+		border-bottom: 2rpx solid #E0E0E0;
 	}
 </style>

pages/login/css/main.css

@@ -7,11 +7,6 @@
 
 /* 头部 logo */
 .header {
-	width: 161rpx;
-	height: 161rpx;
-	box-shadow: 0rpx 0rpx 60rpx 0rpx rgba(0, 0, 0, 0.1);
-	border-radius: 50%;
-	background-color: #000000;
 	margin-top: 128rpx;
 	margin-bottom: 72rpx;
 	margin-left: auto;
@@ -19,9 +14,8 @@
 }
 
 .header image {
-	width: 161rpx;
-	height: 161rpx;
-	border-radius: 50%;
+	width: 404rpx;
+	height: 156rpx;
 }
 
 /* 主体 */
@@ -89,6 +83,5 @@
 
 .footer text {
 	font-size: 24rpx;
-	margin-left: 15rpx;
-	margin-right: 15rpx;
+
 }