chenkainan
11 months ago
3 changed files with 236 additions and 2 deletions
@ -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> |
|||
@ -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> |
|||
Loading…
Reference in new issue