Skip to content

U
uni-pdtravel
Commit 8089ce05 authored by qipeng's avatar qipeng
Browse files
Options

登陆页面

parent 149bf46e
Hide whitespace changes
Inline Side-by-side
Showing with 275 additions and 27 deletions
pages/album/photoAccount/photoAccount.vue
View file @ 8089ce05
<template>
<view>
<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }">
<!--头部 切换账号-->
<view class="nav-bar" :style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
&nbsp;
</view>
<!--切换账号-->
<view class="account-title">点击切换账号</view>
<!--账号列表-->
<view class="account-list">
<view class="list-num">153****6923</view>
<view class="list-new">当前使用</view>
</view>
<view class="account-list">
<view class="list-num">152****7987</view>
</view>
<!--添加账号-->
<view class="account-add">
<view class="add-icon">
<u-icon name="plus"></u-icon>
</view>
<view class="add-text">添加账号</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
export default {
data() {
return {
statusBarHeight: 0,//状态栏高度
capsule: 0,// 胶囊大小、位置数据
navHeight: 0,// 导航栏高度
albumBoxTop:0,//顶部高度
}
},
onLoad(option) {
this.recordDeviceInfo()
},
methods: {
recordDeviceInfo() { //---记录设备信息
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
this.albumBoxTop = this.statusBarHeight+this.navHeight
},
returnClick() {//头部 点击返回
uni.navigateBack({
delta: 1
})
},
}
}
</script>
<style scoped lang="scss">
.albumBox{
display: flex;
flex-direction:column;
height: 100vh;
background-color: #fff;
padding-bottom: 464rpx;
}
.nav-bar {
width: 100%;
justify-content:center;
font-size: 36rpx;
font-weight: 700;
padding: 0 24rpx 0 24rpx;
position: fixed;
top: 0;
left: 0;
z-index: 10;
/deep/ .u-icon{
margin: auto;
position: absolute;
left: 24rpx;
top: 0;
bottom: 0;
}
}
.account-title{
font-weight: 400;
font-size: 48rpx;
color: #000000;
line-height: 66rpx;
text-align: center;
margin-top: 178rpx;
margin-bottom: 152rpx;
}
.account-list{
display: flex;
justify-content: space-between;
width: 670rpx;
height: 154rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx #EDEDED;
border-radius: 16rpx;
border: 2rpx solid #F5F5F5;
padding: 0 40rpx 0 40rpx;
margin: 0 auto 40rpx auto;
.list-num{
font-weight: 600;
font-size: 32rpx;
color: #333333;
line-height: 154rpx;
}
.list-new{
font-weight: 400;
font-size: 28rpx;
color: #00B42B;
line-height: 154rpx;
}
}
.account-add{
display: flex;
width: 670rpx;
height: 154rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx #EDEDED;
border-radius: 16rpx;
border: 2rpx solid #F5F5F5;
padding: 30rpx 40rpx 0 40rpx;
margin: 0 auto;
.add-icon{
width: 92rpx;
height: 92rpx;
border-radius: 16rpx;
border: 2rpx solid #BDC3CE;
position: relative;
/deep/ .u-icon__icon{
font-weight: bold !important;
font-size: 42rpx !important;
line-height: 92rpx !important;
margin: 0 auto;
color: #BDC3CE !important;
}
},
methods: {
}
.add-text{
font-weight: 600;
font-size: 32rpx;
color: #999999;
line-height: 92rpx;
margin-left: 40rpx;
}
}
</script>
<style>
</style>
pages/album/photoLogin/photoLogin.vue
View file @ 8089ce05
<template>
<view>
<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }">
<!--头部 获取相片-->
<view class="nav-bar" :style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
&nbsp;
</view>
<view class="login-title">
<view class="title-cn">获取相片</view>
<view class="title-en">Get Photos</view>
</view>
<view class="login-list">
<image class="list-img" src="../static/album/longin02.png"></image>
<input class="uni-input list-input" placeholder="请输入摄影时预留手机号" />
</view>
<view class="login-list login-listAct">
<image class="list-img" src="../static/album/longin01.png"></image>
<input class="uni-input list-input" placeholder="请输入验证码" />
<view class="list-verification">获取验证码</view>
</view>
<view class="login-btn">
登陆
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
export default {
data() {
return {
statusBarHeight: 0,//状态栏高度
capsule: 0,// 胶囊大小、位置数据
navHeight: 0,// 导航栏高度
albumBoxTop:0,//顶部高度
}
},
onLoad(option) {
this.recordDeviceInfo()
},
methods: {
recordDeviceInfo() { //---记录设备信息
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
this.albumBoxTop = this.statusBarHeight+this.navHeight
},
returnClick() {//头部 点击返回
uni.navigateBack({
delta: 1
})
},
}
}
</script>
<style>
<style scoped lang="scss">
.albumBox{
display: flex;
flex-direction:column;
height: 100vh;
background-color: #fff;
}
.nav-bar {
width: 100%;
justify-content:center;
font-size: 36rpx;
font-weight: 700;
padding: 0 24rpx 0 24rpx;
position: fixed;
top: 0;
left: 0;
z-index: 10;
/deep/ .u-icon{
color: #333333;
margin: auto;
position: absolute;
left: 24rpx;
top: 0;
bottom: 0;
}
}
.login-title{
margin-top: 80rpx;
padding: 0 56rpx 0 56rpx;
margin-bottom: 104rpx;
.title-cn{
font-weight: 600;
font-size: 40rpx;
color: #333333;
line-height: 56rpx;
margin-bottom: 16rpx;
}
.title-en{
font-size: 28rpx;
color: #999999;
line-height: 32rpx;
}
}
.login-list{
display: flex;
width: 636rpx;
height: 98rpx;
background: #F9F9F9;
border-radius: 50rpx;
margin: 0 auto 40rpx auto;
padding: 0 40rpx 0 52rpx;
.list-img{
display: block;
width: 44rpx;
height: 44rpx;
margin-top: 28rpx;
margin-right: 24rpx;
}
.list-input{
flex: 1;
height: 98rpx;
font-weight: 400;
font-size: 28rpx;
color: #BDC3CE;
}
.list-verification{
font-weight: 400;
font-size: 28rpx;
color: #FE6600;
line-height: 98rpx;
}
}
.login-listAct{
margin-bottom: 0;
}
.login-btn{
width: 638rpx;
height: 98rpx;
background: linear-gradient( 90deg, #FFA000 0%, #FE6600 100%);
margin: 0 auto;
border-radius: 50rpx;
font-weight: 600;
font-size: 32rpx;
color: #FFFFFF;
line-height: 98rpx;
text-align: center;
margin-top: 80rpx;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment