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;
align-items: end;
}
.v12-align-baseline{
display: flex;
align-items: baseline;
}
.v12-justify-center{
display: flex;
justify-content: center;
@@ -173,6 +177,9 @@ each(@colors, {
color: #fff;
font-size: 27rpx;
}
.v12-full-width{
width: 100%;
}
pages/authorization/index.vue
+123 -59
View File
@@ -1,6 +1,6 @@
<template>
<view class="pages-auth">
<view class="tip-1">为了提供更优质的服务，需要获取</view>
<view class="pages-auth v12-justify-between v12-flex-column">
<!-- <view class="tip-1">为了提供更优质的服务，需要获取</view>
<view class="tip-2">您的头像、昵称</view>
<view class="wechat flex jc-between ai-center">
@@ -12,18 +12,9 @@
</view>
</view>
<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-body">
@@ -40,27 +31,56 @@
<view class="dialog-mask" v-if="showFillOut">
<view class="dialog-fill flex flex-col ai-center">
<view class="title bold">请完善您的信息</view>
<button
class="avatar-wrapper"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
>
<image
:src="avatarUrl"
class="avatar"
<!-- <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
class="avatar-wrapper v12-ma-0"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
>
<image
:src="avatarUrl"
class="avatar"
/>
</button>
</view>
<view class="v12-align-baseline v12-justify-between" style="width:550rpx">
<view class="v12-dark-text v12-mr-3">
昵称
</view>
<input
type="nickname"
maxlength="12"
class="input-wrapper "
placeholder="请填写您的昵称"
@input="inputName"
@confirm="inputName"
@blur="inputName"
/>
</button>
<input
type="nickname"
maxlength="12"
class="input-wrapper"
placeholder="请输入昵称"
@input="inputName"
@confirm="inputName"
@blur="inputName"
/>
<view class="input-wrapper">
</view>
<!-- <view class="input-wrapper">
<picker
:value="form.birthday"
mode="date"
@@ -69,8 +89,8 @@
>
{{ form.birthday || '请选择出生日期' }}
</picker>
</view>
<view class="gender-row">
</view> -->
<!-- <view class="gender-row">
性别：
<u-radio-group
v-model="form.gender"
@@ -88,14 +108,42 @@
label="女"
/>
</u-radio-group>
</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 class="btn-submit" @click="onSubmit">确认</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">
<button class="btn-yes" type="default" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">同意</button>
<button class="btn-no" type="default" @tap="back">拒绝</button>
<button class="btn-yes v12-primary" type="mini" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">快捷登录</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>
</template>
@@ -150,7 +198,7 @@ export default {
this.show=!this.show;
},
changeAgree(event) {
this.isAgree = event.detail.value.length > 0
// this.isAgree = event.detail.value.length > 0
},
toLogin() {
this.$yrouter.push({
@@ -282,10 +330,17 @@ export default {
}
</script>
<style lang="scss">
<style lang="less">
.app-logo__image--inner{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.pages-auth {
padding: 148rpx 48rpx;
padding: 148rpx 48rpx;
height: 100vh;
box-sizing: border-box;
.tip-1 {
font-size: 28rpx;
line-height: 40rpx;
@@ -329,12 +384,12 @@ export default {
}
.agree-box {
margin: 200rpx 0 60rpx;
// margin: 200rpx 0 60rpx;
font-size: 28rpx;
color: #666;
color: #333;
padding: 0 20rpx;
.btn-show {
color: #000;
color: #4099FF;
}
}
@@ -352,7 +407,7 @@ export default {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 630rpx;
width: 686rpx;
height: 70vh;
box-sizing: border-box;
padding: 60rpx;
@@ -385,7 +440,7 @@ export default {
transform: translate(-50%, -50%);
box-sizing: border-box;
overflow: hidden;
width: 516rpx;
width: 686rpx;
border-radius: 24rpx;
background: #fff;
@@ -397,15 +452,14 @@ export default {
}
.avatar-wrapper {
width: 180rpx;
height: 180rpx;
margin-top: 38rpx;
width: 80rpx;
height: 80rpx;
padding: 0;
background: none;
.avatar {
width: 180rpx;
height: 180rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
}
@@ -415,13 +469,15 @@ export default {
}
.input-wrapper {
width: 360rpx;
width: 460rpx;
height: 72rpx;
margin-top: 32rpx;
background: rgba(248, 249, 251, 1);
color: #999;
font-size: 32rpx;
text-align: center;
text-align: left;
border-radius: 40rpx;
padding: 0 20rpx;
}
.gender-row {
display: flex;
@@ -448,9 +504,10 @@ export default {
}
.btn-box {
width: 338rpx;
margin: 0 auto;
// width: 338rpx;
// margin: 0 auto;
padding: 0 20rpx;
padding-bottom: 340rpx;
button::after {
border: none;
}
@@ -461,8 +518,10 @@ export default {
}
.btn-yes {
background: #FF564A;
color: #fff;
width: 100%;
border-radius: 40rpx;
letter-spacing: 1px;
}
.btn-no {
@@ -472,4 +531,9 @@ export default {
}
}
}
.app-logo__image{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
}
</style>