注册UI调整

pages/login/forgot-password/forgot-password.vue

@@ -1,35 +1,5 @@
 <script setup>
-  import { ref, reactive } from 'vue'
+  import { navigateTo } from '@/utils/router'
-  import { useUI } from '@/utils/use-ui'
-
-  const { showToast } = useUI()
-
-  const formData = reactive({
-    username: '',
-    password: '',
-    confirmPassword: '',
-    code: ''
-  })
-  const isCode = ref(false)
-
-  const getCode = () => {
-    console.log('获取验证码')
-    isCode.value = true
-  }
-
-  const onBottomBtn = () => {
-    if (!formData.username) {
-      showToast('请输入手机号/邮箱')
-      return
-    }
-
-    if (!formData.password) {
-      showToast('请输入密码')
-      return
-    }
-
-    console.log('确认')
-  }
 </script>
 
 <template>
@@ -43,57 +13,67 @@
         ></image>
       </template>
     </nav-bar>
-    <view class="top-nav">
+    <view class="top-name">
-      <text class="title-left">忘记密码</text>
+      <text>忘记密码</text>
+      <text>忘记密码需要联系客服更改</text>
     </view>
-    <div class="input-wrapper">
+    <view class="btn-box">
-      <cb-input
+      <view class="icon-box">
-        v-model="formData.username"
+        <image
-        placeholder="请输入手机号/邮箱"
+          src="/static/images/customer-service.svg"
-      ></cb-input>
+          mode="heightFix"
-      <!-- <cb-input
+          class="icon"
-        v-model="formData.code"
+        ></image>
-        v-model:code="isCode"
+      </view>
-        type="number"
-        icon="6"
-        placeholder="请输入验证码"
-        @onGetCode="getCode"
-      ></cb-input> -->
-      <cb-input
-        v-model="formData.password"
-        type="password"
-        icon="2"
-        placeholder="请输入密码"
-      ></cb-input>
-      <cb-input
-        v-model="formData.confirmPassword"
-        type="password"
-        icon="2"
-        placeholder="请输入确认密码"
-      ></cb-input>
       <cb-button
-        class="bottom-btn"
+        @click="
-        :disabled="
+          navigateTo('/pages/my-index/customer-service/third-party')
-          !formData.username ||
-          !formData.password ||
-          !formData.confirmPassword ||
-          !formData.code
         "
-        @click="onBottomBtn"
       >
-        确定
+        联系客服
       </cb-button>
-    </div>
+    </view>
   </view>
 </template>
 
 <style lang="scss" scoped>
-  @import '/styles/login.scss';
   .left-icon {
     height: 36rpx;
   }
 
-  .bottom-btn {
+  .btn-box {
+    padding: 0 24rpx;
     margin-top: 140rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .icon-box {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 36rpx;
+      .icon {
+        height: 180rpx;
+      }
+    }
+  }
+
+  .top-name {
+    margin-top: 10vh;
+    display: flex;
+    flex-direction: column;
+    padding: 0 24rpx;
+    text {
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 500;
+      font-size: 40rpx;
+      color: #333333;
+      font-style: normal;
+      text-transform: none;
+      // 最后一个
+      &:last-child {
+        font-size: 32rpx;
+        color: #999999;
+      }
+    }
   }
 </style>

static/images/customer-service.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1768916999515" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38413" width="160" height="160" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M622.250667 360.618667H415.061333c-23.210667 0-42.154667-18.944-42.154666-42.154667V240.64c0-23.210667 18.944-42.154667 42.154666-42.154667h207.189334c23.210667 0 42.154667 18.944 42.154666 42.154667v77.824c0 23.210667-18.944 42.154667-42.154666 42.154667z m-201.386667-47.786667h195.754667v-66.218667H420.864v66.218667zM740.352 987.989333h-457.386667c-17.408 0-31.573333-14.165333-31.573333-31.573333v-103.253333c0-17.408 14.165333-31.573333 31.573333-31.573334h125.952v-76.117333c0-17.408 14.165333-31.573333 31.573334-31.573333h152.746666c17.408 0 31.573333 14.165333 31.573334 31.573333v76.117333h115.541333c17.408 0 31.573333 14.165333 31.573333 31.573334v103.253333c0 17.408-14.165333 31.573333-31.573333 31.573333z m-441.344-47.957333h424.96v-70.656H576.853333v-107.690667h-120.149333v107.690667h-157.525333v70.656z" fill="#333333" p-id="38414"></path><path d="M825.856 749.909333H188.416c-3.584 0-6.656-3.072-6.656-6.656V343.381333c0-3.584 3.072-6.656 6.656-6.656h637.44c3.584 0 6.656 3.072 6.656 6.656v399.872c0 3.584-3.072 6.656-6.656 6.656z" fill="#FFCC66" p-id="38415"></path><path d="M795.136 773.802667H219.136c-33.792 0-61.269333-27.477333-61.269333-61.269334V374.101333c0-33.792 27.477333-61.269333 61.269333-61.269333h576c33.792 0 61.269333 27.477333 61.269333 61.269333v338.432c0 33.792-27.477333 61.269333-61.269333 61.269334zM219.136 360.618667c-7.338667 0-13.482667 6.144-13.482667 13.482666v338.432c0 7.338667 6.144 13.482667 13.482667 13.482667h576c7.338667 0 13.482667-6.144 13.482667-13.482667V374.101333c0-7.338667-6.144-13.482667-13.482667-13.482666H219.136z" fill="#333333" p-id="38416"></path><path d="M606.72 551.936m-61.098667 0a61.098667 61.098667 0 1 0 122.197334 0 61.098667 61.098667 0 1 0-122.197334 0Z" fill="#333333" p-id="38417"></path><path d="M320.341333 551.936m-61.098666 0a61.098667 61.098667 0 1 0 122.197333 0 61.098667 61.098667 0 1 0-122.197333 0Z" fill="#333333" p-id="38418"></path><path d="M907.264 411.306667v-63.317334c0-168.277333-136.874667-305.152-305.152-305.152h-187.733333C246.101333 42.837333 109.226667 179.712 109.226667 347.989333v66.56c-55.466667 21.162667-94.890667 74.752-94.890667 137.728 0 81.578667 64.341333 147.626667 145.92 147.626667L157.013333 404.992v-57.002667c0-141.824 115.370667-257.194667 257.194667-257.194666h187.733333c141.824 0 247.637333 115.370667 247.637334 257.194666l0.682666 351.914667c87.381333 0 168.448-66.048 168.448-147.626667 0.170667-66.389333-46.933333-122.538667-111.445333-140.970666z" fill="#FFCC66" p-id="38419"></path></svg>

styles/login.scss

@@ -24,6 +24,7 @@
   }
   .title-right {
     font-size: 28rpx;
+    margin-bottom: 98rpx;
     color: #666666;
   }
 }