liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(登录)：UI调整（99%）

Browse Source
This commit is contained in:
linxi
2024-09-09 18:00:46 +08:00
parent b27d9b12fe
commit bde972a5ad
2 changed files with 130 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/v12-style.less
+7
View File
@@ -133,6 +133,10 @@ each(@colors, {
display: flex; display: flex;
align-items: end; align-items: end;
} }
.v12-align-baseline{
display: flex;
align-items: baseline;
}
.v12-justify-center{ .v12-justify-center{
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -173,6 +177,9 @@ each(@colors, {
color: #fff; color: #fff;
font-size: 27rpx; font-size: 27rpx;
} }
.v12-full-width{
width: 100%;
}
pages/authorization/index.vue
+109 -45
View File
@@ -1,6 +1,6 @@
<template> <template>
<view class="pages-auth"> <view class="pages-auth v12-justify-between v12-flex-column">
<view class="tip-1">为了提供更优质的服务，需要获取</view> <!-- <view class="tip-1">为了提供更优质的服务，需要获取</view>
<view class="tip-2">您的头像、昵称</view> <view class="tip-2">您的头像、昵称</view>
<view class="wechat flex jc-between ai-center"> <view class="wechat flex jc-between ai-center">
@@ -12,18 +12,9 @@
</view> </view>
</view> </view>
<image class="select" :src="webUrl+'/20220613104953149068.png'" mode="scaleToFill"/> <image class="select" :src="webUrl+'/20220613104953149068.png'" mode="scaleToFill"/>
</view> </view> -->
<view class="agree-box">
<checkbox-group @change="changeAgree">
<label>
<checkbox value="yes" style="transform:scale(0.8)"/>
</label>
<text @click="changeShow">我已阅读并同意
<text class="btn-show">《用户服务协议及隐私政策》</text>
</text>
</checkbox-group>
</view>
<view class="dialog-mask" v-if="show"> <view class="dialog-mask" v-if="show">
<view class="dialog-body"> <view class="dialog-body">
@@ -40,9 +31,32 @@
<view class="dialog-mask" v-if="showFillOut"> <view class="dialog-mask" v-if="showFillOut">
<view class="dialog-fill flex flex-col ai-center"> <view class="dialog-fill flex flex-col ai-center">
<view class="title bold">请完善您的信息</view> <!-- <view class="title bold">请完善您的信息</view> -->
<view class="v12-align-center v12-justify-start v12-py-4" style="width:550rpx">
<view class="v12-mr-3">
<image class="app-logo__image--inner" :src="webUrl+'/orderIcon/applogo.png'" mode="aspectFit|aspectFill|widthFix" lazy-load="true"></image>
</view>
<view class="v12-dark-text v12-font-bold">
<text class="v12-font-40">
地标文化特产
</text>
<text class="v12-mx-1">
|
</text>
<text class="v12-font-24">
申请使用
</text>
</view>
</view>
<view class="v12-dark-text v12-font-40 v12-mt-3 v12-font-bold" style="width:550rpx">
获取你的昵称、头像
</view>
<view class="v12-align-center v12-justify-start v12-mt-3" style="width:550rpx">
<view class="v12-dark-text v12-mr-3">
头像
</view>
<button <button
class="avatar-wrapper" class="avatar-wrapper v12-ma-0"
open-type="chooseAvatar" open-type="chooseAvatar"
@chooseavatar="onChooseAvatar" @chooseavatar="onChooseAvatar"
> >
@@ -51,16 +65,22 @@
class="avatar" class="avatar"
/> />
</button> </button>
</view>
<view class="v12-align-baseline v12-justify-between" style="width:550rpx">
<view class="v12-dark-text v12-mr-3">
昵称
</view>
<input <input
type="nickname" type="nickname"
maxlength="12" maxlength="12"
class="input-wrapper" class="input-wrapper "
placeholder="请输入昵称" placeholder="请填写您的昵称"
@input="inputName" @input="inputName"
@confirm="inputName" @confirm="inputName"
@blur="inputName" @blur="inputName"
/> />
<view class="input-wrapper"> </view>
<!-- <view class="input-wrapper">
<picker <picker
:value="form.birthday" :value="form.birthday"
mode="date" mode="date"
@@ -69,8 +89,8 @@
> >
{{ form.birthday || '请选择出生日期' }} {{ form.birthday || '请选择出生日期' }}
</picker> </picker>
</view> </view> -->
<view class="gender-row"> <!-- <view class="gender-row">
性别： 性别：
<u-radio-group <u-radio-group
v-model="form.gender" v-model="form.gender"
@@ -88,14 +108,42 @@
label="女" label="女"
/> />
</u-radio-group> </u-radio-group>
</view> </view> -->
<view class="btn-submit" @click="onSubmit">确认</view> <view class="v12-justify-between v12-py-6 " style="width: 550rpx">
<view class="v12-primary-border v12-primary v12-white-text v12-btn v12-px-8 v12-py-1" @click="onSubmit">允许</view>
<view class="v12-dark-border v12-dark-text v12-btn v12-px-8 v12-py-1" @click="back">拒绝</view>
</view> </view>
</view> </view>
</view>
<view class="app-logo v12-align-center v12-flex-column">
<image class="app-logo__image" :src="webUrl+'/orderIcon/applogo.png'" mode="aspectFit|aspectFill|widthFix" lazy-load="true"></image>
<view class="v12-mt-3 v12-font-32 v12-dark-text v12-font-weight-500">发现家乡好物</view>
</view>
<view class="btn-box"> <view class="btn-box">
<button class="btn-yes" type="default" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">同意</button> <button class="btn-yes v12-primary" type="mini" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">快捷登录</button>
<button class="btn-no" type="default" @tap="back">拒绝</button> <!-- <button class="btn-no" type="default" @tap="back">拒绝</button> -->
</view>
<view class="agree-box v12-align-center">
<u-checkbox-group
@change="changeAgree"
v-model="isAgree"
>
<u-checkbox
activeColor="#C52733"
size="16"
name="yes"
>
</u-checkbox>
</u-checkbox-group>
<text @click="changeShow">我已阅读并同意
<text class="btn-show">《用户服务协议及隐私政策》</text>
</text>
<!-- <checkbox-group @change="changeAgree">
<label>
<checkbox value="yes" style="transform:scale(0.6)" iconColor="#C52733" />
</label>
</checkbox-group> -->
</view> </view>
</view> </view>
</template> </template>
@@ -150,7 +198,7 @@ export default {
this.show=!this.show; this.show=!this.show;
}, },
changeAgree(event) { changeAgree(event) {
this.isAgree = event.detail.value.length > 0 // this.isAgree = event.detail.value.length > 0
}, },
toLogin() { toLogin() {
this.$yrouter.push({ this.$yrouter.push({
@@ -282,10 +330,17 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="less">
.app-logo__image--inner{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.pages-auth { .pages-auth {
padding: 148rpx 48rpx; padding: 148rpx 48rpx;
padding: 148rpx 48rpx;
height: 100vh;
box-sizing: border-box;
.tip-1 { .tip-1 {
font-size: 28rpx; font-size: 28rpx;
line-height: 40rpx; line-height: 40rpx;
@@ -329,12 +384,12 @@ export default {
} }
.agree-box { .agree-box {
margin: 200rpx 0 60rpx; // margin: 200rpx 0 60rpx;
font-size: 28rpx; font-size: 28rpx;
color: #666; color: #333;
padding: 0 20rpx;
.btn-show { .btn-show {
color: #000; color: #4099FF;
} }
} }
@@ -352,7 +407,7 @@ export default {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 630rpx; width: 686rpx;
height: 70vh; height: 70vh;
box-sizing: border-box; box-sizing: border-box;
padding: 60rpx; padding: 60rpx;
@@ -385,7 +440,7 @@ export default {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
width: 516rpx; width: 686rpx;
border-radius: 24rpx; border-radius: 24rpx;
background: #fff; background: #fff;
@@ -397,15 +452,14 @@ export default {
} }
.avatar-wrapper { .avatar-wrapper {
width: 180rpx; width: 80rpx;
height: 180rpx; height: 80rpx;
margin-top: 38rpx;
padding: 0; padding: 0;
background: none; background: none;
.avatar { .avatar {
width: 180rpx; width: 80rpx;
height: 180rpx; height: 80rpx;
border-radius: 50%; border-radius: 50%;
} }
} }
@@ -415,13 +469,15 @@ export default {
} }
.input-wrapper { .input-wrapper {
width: 360rpx; width: 460rpx;
height: 72rpx; height: 72rpx;
margin-top: 32rpx; margin-top: 32rpx;
background: rgba(248, 249, 251, 1); background: rgba(248, 249, 251, 1);
color: #999; color: #999;
font-size: 32rpx; font-size: 32rpx;
text-align: center; text-align: left;
border-radius: 40rpx;
padding: 0 20rpx;
} }
.gender-row { .gender-row {
display: flex; display: flex;
@@ -448,9 +504,10 @@ export default {
} }
.btn-box { .btn-box {
width: 338rpx; // width: 338rpx;
margin: 0 auto; // margin: 0 auto;
padding: 0 20rpx;
padding-bottom: 340rpx;
button::after { button::after {
border: none; border: none;
} }
@@ -461,8 +518,10 @@ export default {
} }
.btn-yes { .btn-yes {
background: #FF564A;
color: #fff; color: #fff;
width: 100%;
border-radius: 40rpx;
letter-spacing: 1px;
} }
.btn-no { .btn-no {
@@ -472,4 +531,9 @@ export default {
} }
} }
} }
.app-logo__image{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
}
</style> </style>