用户注册页面自适应调整

hookehuyr
Commit 4052cc40ad4bec9ae380b3f36ba039a1e8c26b60 4052cc40 1 parent 96f69806
Showing 4 changed files with 61 additions and 11 deletions
components.d.ts
src/components/common/hagerInput.vue
src/views/user/index.vue
src/views/user/register.vue
--- a/components.d.ts
View file @4052cc4
+++ b/components.d.ts
View file @4052cc4
@@ -11,7 +11,6 @@ declare module 'vue' {
     ElBreadcrumbItem: typeof import('element-ui/lib/breadcrumb-item')['default']
     ElCarousel: typeof import('element-ui/lib/carousel')['default']
     ElCarouselItem: typeof import('element-ui/lib/carousel-item')['default']
-    ElCheckbox: typeof import('element-ui/lib/checkbox')['default']
     ElCol: typeof import('element-ui/lib/col')['default']
     ElCollapse: typeof import('element-ui/lib/collapse')['default']
     ElCollapseItem: typeof import('element-ui/lib/collapse-item')['default']
--- a/src/components/common/hagerInput.vue
View file @4052cc4
+++ b/src/components/common/hagerInput.vue
View file @4052cc4
 <!--
  * @Date: 2024-10-20 09:59:52
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-21 10:36:22
+ * @LastEditTime: 2024-10-21 18:21:31
  * @FilePath: /hager/src/components/common/hagerInput.vue
  * @Description: 文件描述
 -->
@@ -105,7 +105,12 @@ export default {
       margin-right: 0.5rem;
     }
     &.normal {
-      margin-left: 1rem;
+      // margin-left: 1rem;
+    }
+    &.normal::before {
+      content: '*';
+      color: #FFF;
+      margin-right: 0.5rem;
     }
     .input-box {
--- a/src/views/user/index.vue
View file @4052cc4
+++ b/src/views/user/index.vue
View file @4052cc4
 <!--
  * @Date: 2024-10-18 17:57:33
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-20 13:19:23
+ * @LastEditTime: 2024-10-21 18:13:26
  * @FilePath: /hager/src/views/user/index.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="hager-user-page">
-    <div class="centered-div">
+    <div v-if="!is_xs" class="centered-div">
-      <el-row>
+      <el-row style="background-color: #EFF7FB;">
         <el-col :span="13">
-          <div class="user-box" style="background-color: #EFF7FB;">
+          <div class="user-box">
             <div class="user-logo"></div>
             <div class="user-bg"></div>
           </div>
         </el-col>
         <el-col :span="11">
-          <router-view id="router-view"></router-view>
+          <router-view id="router-view" style="background-color: #FFF;"></router-view>
         </el-col>
       </el-row>
     </div>
+    <div v-else class="centered-div xs">
+      <div class="user-logo-xs">
+        <img src="https://cdn.ipadbiz.cn/hager/img/user/logo02.png" style="width: auto; height: 2rem;">
+      </div>
+      <router-view id="router-view"></router-view>
+    </div>
   </div>
 </template>
@@ -36,9 +42,14 @@ export default {
   },
   mounted () {
     // 设置用户盒子高度
-    // this.handleHeight();
     // 监听窗口的 resize 事件
     window.addEventListener('resize', this.handleHeight);
+    // 判断是否被遮挡，让屏幕能滚动
+    if (!this.isElementInViewport('#router-view')) { // #router-view 被屏幕遮挡
+      $('.hager-user-page').css('height', 'auto')
+    } else {
+      $('.hager-user-page').css('height', '100vh')
+    }
   },
   methods: {
     handleHeight () {
@@ -46,6 +57,23 @@ export default {
       if ($('#router-view').outerHeight() > $('.user-box').height()) {
         $('.user-box').height($('#router-view').outerHeight())
       }
+      // 判断是否被遮挡，让屏幕能滚动
+      if (!this.isElementInViewport('#router-view')) { // #router-view 被屏幕遮挡
+        $('.hager-user-page').css('height', 'auto')
+      } else {
+        $('.hager-user-page').css('height', '100vh')
+      }
+    },
+    isElementInViewport(element) {
+      var rect = $(element)[0].getBoundingClientRect();  // 获取元素相对于视口的大小和位置
+
+      // 检查是否完全在视口内
+      return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&  // 窗口高度
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth)        // 窗口宽度
+      );
     }
   },
   beforeDestroy() {
@@ -68,6 +96,9 @@ export default {
       background-color: #fff; /* 设置背景颜色，方便看到元素 */
       box-shadow: 0rem 0.25rem 0.5rem 0.08rem rgba(0,0,0,0.16);
       border-radius: 5px;
+      &.xs {
+        margin: 10rem 1.5rem;
+      }
       .user-box {
         overflow: hidden;
         display: flex;
@@ -94,6 +125,13 @@ export default {
         background-position: center;
         background-repeat: no-repeat;
       }
+      .user-logo-xs {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 6rem;
+        justify-content: center;
+      }
     }
   }
 </style>
--- a/src/views/user/register.vue
View file @4052cc4
+++ b/src/views/user/register.vue
View file @4052cc4
 <!--
  * @Date: 2024-10-18 18:00:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-21 09:47:23
+ * @LastEditTime: 2024-10-21 18:04:13
  * @FilePath: /hager/src/views/user/register.vue
  * @Description: 文件描述
 -->
 <template>
-  <div class="hager-register-page">
+  <div :class="['hager-register-page', is_xs ? 'xs' : '']">
     <div class="input-title">用户注册</div>
     <div style="padding: 1rem 1.5rem 1rem 1rem;">
       <hagerInput type="email" required v-model="email" placeholder="请输入注册邮箱地址" />
@@ -60,6 +60,14 @@ export default {
   .hager-register-page {
     padding: 2rem 0.5rem 0;
     box-sizing: border-box;
+    &.xs {
+      background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://cdn.ipadbiz.cn/hager/img/user/l-bg.png');
+      background-size: 80% 50%;
+      background-position: bottom;
+      background-repeat: no-repeat;
+      padding-top: 0;
+      padding-bottom: 5rem;
+    }
     .input-title {
       color: @secondary-color;
       font-weight: bold;