完成顶部导航开发

components.d.ts

@@ -7,7 +7,14 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    WdButton: typeof import('wot-design-uni/components/wd-button/wd-button.vue')['default']
+    WdCellGroup: typeof import('wot-design-uni/components/wd-cell-group/wd-cell-group.vue')['default']
+    WdCheckbox: typeof import('wot-design-uni/components/wd-checkbox/wd-checkbox.vue')['default']
     WdConfigProvider: typeof import('wot-design-uni/components/wd-config-provider/wd-config-provider.vue')['default']
+    WdField: typeof import('wot-design-uni/components/wd-field/wd-field.vue')['default']
+    WdForm: typeof import('wot-design-uni/components/wd-form/wd-form.vue')['default']
+    WdIcon: typeof import('wot-design-uni/components/wd-icon/wd-icon.vue')['default']
+    WdInput: typeof import('wot-design-uni/components/wd-input/wd-input.vue')['default']
     WdNavbar: typeof import('wot-design-uni/components/wd-navbar/wd-navbar.vue')['default']
   }
 }

src/pages/login/index.vue

@@ -1,49 +1,70 @@
 <template>
   <view class="login-content">
-    <wd-navbar
-      fixed
-      placeholder
-      :title="title"
-      left-arrow
-      safeAreaInsetTop
-      customClass="navbar"
-    ></wd-navbar>
+    <wd-navbar fixed placeholder :title="title" left-arrow safeAreaInsetTop customClass="navbar" />
+    <!-- 背景层 -->
     <view class="login-bg"></view>
-    <view class="login-title">欢迎登录</view>
+    <!-- 内容层 -->
+    <view class="login-body">
+      <view class="login-title"> 欢迎登录 </view>
+      <!-- 表单 -->
+      <view class="login-form"> </view>
+    </view>
   </view>
 </template>
 
 <script setup lang="ts">
 import projectConfig from '@/config/presets/index.ts'
 const { title } = projectConfig
+
+const form = reactive({
+  phone: '',
+  password: '',
+  code: '',
+})
 </script>
 
 <style lang="scss" scoped>
 .login-content {
-  margin-top: 170rpx;
+  position: relative;
+  min-height: 100vh;
   padding: 0 50rpx;
+  box-sizing: border-box;
 
+  /* 外部组件：navbar */
   :deep(.navbar) {
     background-image: var(--login-bg);
-    overflow-y: hidden;
     background-size: 750rpx 800rpx;
+    background-repeat: no-repeat;
   }
+
+  /* 背景层（不要负 z-index） */
   .login-bg {
     position: absolute;
-    z-index: -333;
     top: 0;
     left: 0;
     right: 0;
     height: 800rpx;
     background-image: var(--login-bg);
+    background-size: 750rpx 800rpx;
+    background-repeat: no-repeat;
+    z-index: 0;
   }
 
-  .login-title {
-    color: var(--font-color-333);
-    font-weight: 500;
-    font-family: 'PingFang SC';
-    font-size: 56rpx;
-    margin-bottom: 80rpx;
+  .login-body {
+    position: relative;
+    z-index: 1;
+    padding-top: 80rpx;
+
+    .login-title {
+      margin: 80rpx 0 80rpx;
+      color: var(--font-color-333);
+      font-weight: 600;
+      font-family: 'PingFang SC';
+      font-size: 64rpx;
+    }
+    .login-form {
+      margin: 30px auto;
+    }
   }
 }
 </style>