1.重画 登录页

operatingCompany/pages.json

@@ -1,5 +1,6 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		
 		{
 			"path": "pages/logIn/home",
 			"style": {

operatingCompany/pages/logIn/logIn.vue

@@ -1,52 +1,49 @@
 <template>
 	<view class="content">
-
-		<view class="zdyNav">
-		  <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
-		  <view class="nav">
-
-			  <view >登录</view>
-			  
-		  </view>
+		
+		<view class="logInView">
+			<view style="color: #3C3C3C; font-size: 36rpx; font-weight: bold; padding-left: 40rpx; padding-top: 30rpx;">选择角色</view>
+			
+			<!-- 选择角色 -->
+			<view class="roleSelect">
+				<view class="role_S" v-if="roleType == 1" @click="roleTypeFirst">运营陪伴</view>
+				<view class="role_N" v-else @click="roleTypeFirst">运营陪伴</view>
+			
+				<view class="role_S" v-if="roleType == 2" @click="roleTypeSecond">连锁门店</view>
+				<view class="role_N" v-else @click="roleTypeSecond">连锁门店</view>
+			</view>
+		
+		<!-- 手机号 -->
+		<view class="phoneView">
+			<image src="../../static/img/icon_shouji@2x.png" class="icon"></image>
+			<!-- 手机号 -->
+			<input type="text" class="phone" placeholder="请输入手机号" v-model="phoneValue" @confirm="phoneDone" />
+			
 		</view>
-		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
-		<view style="height: 44px;"></view>
-
-		<image class="topImg" src="../../static/img/dl_bg@2x.png" mode=""></image>
-
-		<view style="color: #3C3C3C; font-size: 40rpx; font-weight: bold; padding-left: 48rpx;">选择角色</view>
-
-		<!-- 选择角色 -->
-		<view class="roleSelect">
-			<view class="role_S" v-if="roleType == 1" @click="roleTypeFirst">运营陪伴</view>
-			<view class="role_N" v-else @click="roleTypeFirst">运营陪伴</view>
-
-			<view class="role_S" v-if="roleType == 2" @click="roleTypeSecond">连锁门店</view>
-			<view class="role_N" v-else @click="roleTypeSecond">连锁门店</view>
-		</view>
-
-
-		<view style="color: #3C3C3C; font-size: 40rpx; font-weight: bold; padding-left: 48rpx;">登录</view>
-
-
-		<!-- 手机号 -->
-		<input type="text" class="phone" placeholder="请输入手机号" v-model="phoneValue" @confirm="phoneDone" />
-
-		<!-- 验证码 -->
-		<view class="codeBg">
-			<input type="text" class="code" placeholder="请输入验证码" v-model="codeValue" @confirm="codeDone" />
-			<view @click="send" v-if="phoneValue.length == 11 && code_time == 0" style="color: #FF4F00; font-size: 28rpx;">获取验证码</view>
-			<view style="color: #999999; font-size: 28rpx;" v-if="phoneValue.length != 11 && code_time == 0">获取验证码</view>
-			<view style="color: #999999; font-size: 28rpx;" v-if="code_time > 0">重新获取({{code_time}}s)</view>
-			
-		</view>
-
-
-		<!-- 登录 -->
-		<view class="logInBtn_S" @click="logIn" v-if="phoneValue.length == 11 && codeValue != ''">登录</view>
-		<view class="logInBtn_N" v-else>登录</view>
-		<!-- 取消登录 -->
-		<view class="logOutBtn" @click="goIndex">取消登录</view>
+		
+		<!-- 验证码 -->
+		<view class="phoneView">
+			<image src="../../static/img/icon_yanheng@2x.png" class="icon"></image>
+			<!-- 验证码 -->
+			<view class="codeBg">
+				<input type="text" class="code" placeholder="请输入验证码" v-model="codeValue" @confirm="codeDone" />
+				<view @click="send" v-if="phoneValue.length == 11 && code_time == 0" style="color: #FF4F00; font-size: 28rpx;">获取验证码</view>
+				<view style="color: #999999; font-size: 28rpx;" v-if="phoneValue.length != 11 && code_time == 0">获取验证码</view>
+				<view style="color: #999999; font-size: 28rpx;" v-if="code_time > 0">重新获取({{code_time}}s)</view>
+				
+			</view>
+			
+		</view>
+		
+		<!-- 登录 -->
+		<view class="logInBtn_S" @click="logIn" v-if="phoneValue.length == 11 && codeValue != ''">登录</view>
+		<view class="logInBtn_N" v-else>登录</view>
+		<!-- 取消登录 -->
+		<view class="logOutBtn" @click="goIndex">取消登录</view>
+		
+		</view>
+		
+	
 
 	</view>
 </template>
@@ -158,8 +155,10 @@
 
 <style>
 	.content {
-		background-color: #FFFFFF;
-		min-height: 100vh;
+		background-color: #FF8700;
+		min-height: 100vh;
+		background: url('http://phone.66km.cn:8088/marketing/home_yypb1.png') no-repeat;
+		background-size: 100% 100%;
 	}
 
 	/* #ifdef H5 */
@@ -170,106 +169,105 @@
 
 	/* #endif */
 
-	.zdyNav{
+	.logInView{
 		position: fixed;
-		left: 0;
-		top: 0;
-		background: #FFFFFF;
-		z-index: 11;
-	}
-	.status_bar{
-		background: #FFFFFF;
-	}
-	.nav{
-		width: 100vw;
-		height: 44px;
-		background: #FFFFFF;
-		text-align: center;
-		font-size: 34rpx;
-		line-height: 44px;
-	}
-	.topImg {
-		padding-left: 152rpx;
-		height: 256rpx;
+		top: 374rpx;
+		left: 60rpx;
+		width: 630rpx;
+		height: 588rpx;
+		background-color: #FFFFFF;
+		border-radius: 20rpx;
 	}
 
 	.roleSelect {
-		padding: 24rpx 48rpx;
+		padding-top: 30rpx;
 		display: flex;
-		justify-content: space-between;
+		justify-content: space-around;
 		text-align: center;
 	}
 
 	.role_S {
 		color: #FF4F00;
 		font-size: 28rpx;
-		border: 2rpx #FF4F00 solid;
-		border-radius: 50rpx;
-		height: 88rpx;
-		width: 41%;
-		line-height: 88rpx;
+		border-bottom: 3rpx #FF4F00 solid;
+		height: 66rpx;
+		/* width: 41%; */
+		line-height: 66rpx;
 	}
 
 	.role_N {
 		color: #3C3C3C;
 		font-size: 28rpx;
-		background-color: #F4F5F7;
-		border-radius: 50rpx;
-		height: 88rpx;
-		width: 41%;
-		line-height: 88rpx;
+		height: 66rpx;
+		/* width: 41%; */
+		line-height: 66rpx;
 	}
+
+	.phoneView{
+		display: flex;
+		justify-content: flex-start;
+		margin: 0rpx 40rpx;
+		height: 106rpx;
+		border-bottom: 1rpx #CCCCCC solid;
+		
+	}
+	.icon{
+		width: 44rpx;
+		height: 44rpx;
+		margin-right: 20rpx;
+		padding-top: 44rpx;
+		padding-bottom: 22rpx;
+	}
 
 	.phone,
 	.codeBg {
-		margin: 0rpx 48rpx;
-		padding-top: 48rpx;
+		/* margin: 44rpx 22rpx 0rpx; */
+		padding-top: 44rpx;
 		padding-bottom: 22rpx;
 		color: #3C3C3C;
 		font-size: 28rpx;
-		border-bottom: 2rpx #F4F5F7 solid;
 	}
 
 	.codeBg {
 		display: flex;
-		justify-content: space-between;
+		justify-content: space-between;
+		width: 100%;
 	}
 
 	.logInBtn_S {
-		margin: 50rpx 48rpx;
-		width: 100vw-96rpx;
-		height: 88rpx;
-		border-radius: 50rpx;
-		background-color: #FF8700;
+		margin: 30rpx;
+		width: 550rpx;
+		height: 76rpx;
+		border-radius: 10rpx;
+		background-color: #FF4F00;
 		color: #FFFFFF;
 		font-size: 30rpx;
 		font-weight: bold;
-		line-height: 88rpx;
+		line-height: 76rpx;
 		text-align: center;
 	}
 
 	.logInBtn_N {
-		margin: 50rpx 48rpx;
-		width: 100vw-96rpx;
-		height: 88rpx;
-		border-radius: 50rpx;
+		margin: 30rpx 40rpx;
+		width: 550rpx;
+		height: 76rpx;
+		border-radius: 10rpx;
 		background-color: #F4F5F7;
 		color: #999999;
 		font-size: 30rpx;
 		font-weight: bold;
-		line-height: 88rpx;
+		line-height: 76rpx;
 		text-align: center;
 	}
 
 	.logOutBtn {
-		position: fixed;
-		bottom: 130rpx;
-		left: 275rpx;
-		width: 200rpx;
-		height: 42rpx;
+		margin-bottom: 30rpx;
+		margin-left: 258rpx;
+		width: 112rpx;
+		height: 40rpx;
 		text-align: center;
-		line-height: 42rpx;
-		font-size: 30rpx;
+		line-height: 40rpx;
+		font-size: 28rpx;
 		color: #999999;
 	}
 </style>