You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.5 KiB
105 lines
2.5 KiB
<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>
|