提交

pages.json

@@ -21,7 +21,14 @@
 		{
 			"path": "pages/user/user",
 			"style": {
-				"navigationBarTitleText": "我的"
+				"navigationBarTitleText": "苏州市导游协会"
+			}
+		},
+		{
+			"path": "pages/login/login",
+			"style": {
+				"navigationBarTitleText": "登录",
+				"navigationStyle": "custom"
 			}
 		}
 	],

pages/login/login.vue

@@ -0,0 +1,105 @@
+<template>
+	<view class="bg">
+		<image src="https://static.ticket.sz-trip.com/tourGuide/images/login/title.png" mode="" class="title-img"></image>
+		
+		<view class="item flex-between" style="margin-top: 83rpx;">
+			<image src="https://static.ticket.sz-trip.com/tourGuide/images/login/phone.png" mode="" class="icon"></image>
+			<input type="text" v-model="form.phone" placeholder="请输入手机号"/>
+		</view>
+		
+		<view class="item flex-between">
+			<image src="https://static.ticket.sz-trip.com/tourGuide/images/login/code.png" mode="" class="icon"></image>
+			<input type="text" v-model="form.code" placeholder="请输入图形验证码"/>
+			<image src="https://static.ticket.sz-trip.com/tourGuide/images/index/topImg.png" mode="" class="code-img"></image>
+		</view>
+		
+		<view class="item flex-between">
+			<image src="https://static.ticket.sz-trip.com/tourGuide/images/login/password.png" mode="" class="icon"></image>
+			<input type="text" :password="showPassword" v-model="form.password" placeholder="请输入密码"/>
+			<image src="https://static.ticket.sz-trip.com/tourGuide/images/login/eye.png" mode="" class="eye-img" @click="showPassword = false" v-if="showPassword"></image>
+			<image src="https://static.ticket.sz-trip.com/tourGuide/images/login/closeEye.png" mode="" class="eye-img" @click="showPassword = true" v-else></image>
+		</view>
+		
+		<view class="btn">
+			立即登录
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				form: {
+					phone: '',
+					code: '',
+					password: ''
+				},
+				showPassword: true
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.bg {
+		width: 100vw;
+		height: 100vh;
+		background-image: url('https://static.ticket.sz-trip.com/tourGuide/images/login/bg.png');
+		background-size: 100% 100%;
+		padding-top: 428rpx;
+	}
+	
+	.title-img {
+		display: block;
+		margin: auto;
+		width: 336.67rpx;
+		height: 54rpx;
+	}
+	
+	.item {
+		width: 587rpx;
+		height: 80rpx;
+		background: #FFFFFF;
+		border-radius: 40rpx;
+		margin: 32rpx auto 0;
+		padding: 0 26rpx;
+		
+		.icon {
+			width: 26.67rpx;
+			height: 26.67rpx;
+			margin-right: 12rpx;
+		}
+		
+		input {
+			flex: 1;
+			font-weight: 500;
+			font-size: 25rpx;
+			color: #ABABAB;
+		}
+		
+		.code-img {
+			width: 153rpx;
+			height: 55rpx;
+			margin-left: 10rpx;
+		}
+		
+		.eye-img {
+			width: 26.67rpx;
+			height: 26.67rpx;
+			margin-left: 10rpx;
+		}
+	}
+	
+	.btn {
+		width: 547rpx;
+		line-height: 80rpx;
+		background: #96684F;
+		border-radius: 40rpx;
+		margin: 100rpx auto 0;
+		font-weight: bold;
+		font-size: 35rpx;
+		color: #FFFFFF;
+		text-align: center;
+	}
+</style>

pages/user/user.vue

@@ -1,8 +1,130 @@
 <template>
+	<view class="bg">
+		<view class="top-box flex-between">
+			<view class="top-left">
+				<image src="https://static.ticket.sz-trip.com/tourGuide/images/index/topImg.png" mode="" class="avatar"></image>
+				<view class="flex-column">
+					<view class="top-title">苏小小</view>
+					<view class="top-subtitle">大师级导游</view>
+				</view>
+			</view>
+			<view class="top-right">
+				个人信息
+				<image src="https://static.ticket.sz-trip.com/tourGuide/images/user/rightBlack.png" mode=""></image>
+			</view>
+		</view>
+		
+		<view class="box">
+			<view v-for="(item,index) in list" :key="index" class="flex-between">
+				<view class="title">{{item.title}}</view>
+				<image src="https://static.ticket.sz-trip.com/tourGuide/images/user/rightGray.png" mode=""></image>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {
+				list: [
+					{
+						title: '我的消息',
+						path: ''
+					},
+					{
+						title: '我的订单',
+						path: ''
+					},
+					{
+						title: '账号密码',
+						path: ''
+					}
+				]
+			}
+		}
+	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.bg {
+		min-height: 100vh;
+		background: #F5F5F5;
+		padding: 57rpx 26rpx 0;
+	}
+	
+	.top-box {
+		height: 169rpx;
+		background: #FFFFFF;
+		border-radius: 13rpx;
+		padding: 0 34rpx;
+		
+		.top-left {
+			display: flex;
+			align-items: center;
+			
+			.avatar {
+				width: 120rpx;
+				height: 120rpx;
+				border-radius: 50%;
+				margin-right: 15rpx;
+			}
+			
+			view {
+				padding: 15rpx 0;
+				justify-content: space-between;
+				
+				.top-title {
+					font-weight: bold;
+					font-size: 32rpx;
+					color: #000000;
+				}
+				
+				.top-subtitle {
+					font-weight: 500;
+					font-size: 25rpx;
+					color: #000000;
+				}
+			}
+		}
+		
+		.top-right {
+			font-weight: 500;
+			font-size: 25rpx;
+			color: #100E0E;
+			display: flex;
+			align-items: center;
+			
+			image {
+				width: 11.33rpx;
+				height: 20rpx;
+				margin-left: 19rpx;
+			}
+		}
+	}
+	
+	.box {
+		margin-top: 28rpx;
+		background: #FFFFFF;
+		border-radius: 13rpx;
+		
+		.flex-between {
+			height: 106rpx;
+			padding: 0 26rpx;
+			
+			.title {
+				font-weight: 500;
+				font-size: 28rpx;
+				color: #000000;
+			}
+			
+			image {
+				width: 11.33rpx;
+				height: 20rpx;
+			}
+		}
+		.flex-between:not(:first-child) {
+			border-top: 1rpx solid #D8D8D8;
+		}
+	}
 </style>