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

assets/css/v12-style.less

@@ -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

@@ -1,6 +1,6 @@
 <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="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>
+        <!-- <view class="title bold">请完善您的信息</view> -->
-        <button
+        <view class="v12-align-center v12-justify-start v12-py-4" style="width:550rpx">
-          class="avatar-wrapper"
+          <view class="v12-mr-3">
-          open-type="chooseAvatar"
+            <image class="app-logo__image--inner" :src="webUrl+'/orderIcon/applogo.png'" mode="aspectFit|aspectFill|widthFix" lazy-load="true"></image>
-          @chooseavatar="onChooseAvatar"
+          </view>
-        >
+          <view class="v12-dark-text v12-font-bold">
-          <image
+            <text class="v12-font-40">
-            :src="avatarUrl"
+              地标文化特产
-            class="avatar"
+            </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>
+        </view>
-        <input
+        <!-- <view class="input-wrapper">
-          type="nickname"
-          maxlength="12"
-          class="input-wrapper"
-          placeholder="请输入昵称"
-          @input="inputName"
-          @confirm="inputName"
-          @blur="inputName"
-        />
-        <view class="input-wrapper">
           <picker
             :value="form.birthday"
             mode="date"
@@ -69,8 +89,8 @@
           >
             {{ form.birthday || '请选择出生日期' }}
           </picker>
-        </view>
+        </view> -->
-        <view class="gender-row">
+        <!-- <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-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>
 </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;
+        width: 80rpx;
-        height: 180rpx;
+        height: 80rpx;
-        margin-top: 38rpx;
         padding: 0;
         background: none;
 
         .avatar {
-          width: 180rpx;
+          width: 80rpx;
-          height: 180rpx;
+          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;
+    // width: 338rpx;
-    margin: 0 auto;
+    // 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>