feat: 登录、注册、价格页面移动端适配

src/components/headerNavMobile.vue

@@ -7,9 +7,9 @@
       <img src="../assets/logo.png" height="40px" />
     </div>
     <div class="header-nav-mobile_login">
-      <span>登录</span>
+      <span @click="login">登录</span>
       <span style="margin: 0 5px">|</span>
-      <span>注册</span>
+      <span @click="register">注册</span>
     </div>
     <transition name="header-nav-mobile">
       <div
@@ -55,6 +55,12 @@ export default {
       const path = this.$route.path
       if (nav.path === path) return true
     },
+    login() {
+      this.$router.push('/login')
+    },
+    register() {
+      this.$router.push('/register')
+    },
   },
 }
 </script>

src/views/aboutus/aboutPage.vue

@@ -169,7 +169,8 @@ export default {
 
   .content-body {
     margin-top: 20px;
-    height: calc(100vh - 33vw - 60px);
+    height: unset;
+    padding-bottom: 20px;
   }
   .jomals-description {
     width: 100vw;

src/views/demand/demandPage.vue

@@ -51,7 +51,9 @@
           </div>
           <div class="t-row-2">
             <div class="card-inner">
-              <div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''">
+              <div
+                class="card-inner-content"
+                :style="$isMobile ? 'flex-direction:column-reverse' : ''">
                 <div class="left content-text-wrap">
                   <div class="content-text">
                     <h4>高效采购生产</h4>
@@ -93,7 +95,7 @@
               <h4 style="text-align: center">
                 各仓库库存状况一目了然，解决库存难管理问题
               </h4>
-              <div class="card-inner-content" >
+              <div class="card-inner-content">
                 <div class="left">
                   <img src="../../assets/images/warehouse/kc.png" />
                 </div>
@@ -110,7 +112,9 @@
           </div>
           <div class="t-row-2">
             <div class="card-inner">
-              <div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''">
+              <div
+                class="card-inner-content"
+                :style="$isMobile ? 'flex-direction:column-reverse' : ''">
                 <div class="left content-text-wrap">
                   <div class="content-text">
                     <h4>订单占用明细</h4>
@@ -169,7 +173,9 @@
           </div>
           <div class="t-row-2">
             <div class="card-inner">
-              <div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''">
+              <div
+                class="card-inner-content"
+                :style="$isMobile ? 'flex-direction:column-reverse' : ''">
                 <div class="left content-text-wrap">
                   <div class="content-text">
                     <h4>跨部门高效协同合作</h4>
@@ -224,7 +230,9 @@
           </div>
           <div class="t-row-2">
             <div class="card-inner">
-              <div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''">
+              <div
+                class="card-inner-content"
+                :style="$isMobile ? 'flex-direction:column-reverse' : ''">
                 <div class="left content-text-wrap">
                   <div class="content-text">
                     <h4>一体化管理</h4>
@@ -254,7 +262,9 @@
           </div>
           <div class="t-row-4">
             <div class="card-inner">
-              <div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''">
+              <div
+                class="card-inner-content"
+                :style="$isMobile ? 'flex-direction:column-reverse' : ''">
                 <div class="left content-text-wrap">
                   <div class="content-text">
                     <h4>操作日志</h4>
@@ -290,7 +300,9 @@
           </div>
           <div class="t-row-2">
             <div class="card-inner">
-              <div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''">
+              <div
+                class="card-inner-content"
+                :style="$isMobile ? 'flex-direction:column-reverse' : ''">
                 <div class="left content-text-wrap">
                   <div class="content-text">
                     <h4>分批发货</h4>
@@ -345,7 +357,9 @@
           </div>
           <div class="t-row-2">
             <div class="card-inner">
-              <div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''">
+              <div
+                class="card-inner-content"
+                :style="$isMobile ? 'flex-direction:column-reverse' : ''">
                 <div class="left content-text-wrap">
                   <div class="content-text">
                     <h4>打单、验货以及称重一体化进行</h4>
@@ -377,7 +391,9 @@
           </div>
           <div class="t-row-4">
             <div class="card-inner">
-              <div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''">
+              <div
+                class="card-inner-content"
+                :style="$isMobile ? 'flex-direction:column-reverse' : ''">
                 <div class="left content-text-wrap">
                   <div class="content-text">
                     <h4>多站点库存数据打通</h4>
@@ -399,7 +415,9 @@
                   <img src="../../assets/images/fh/wl.png" />
                 </div>
                 <div class="right content-text-wrap">
-                  <div class="content-text" :style="$isMobile ? 'margin-left: 0' : 'margin-left: 40px'">
+                  <div
+                    class="content-text"
+                    :style="$isMobile ? 'margin-left: 0' : 'margin-left: 40px'">
                     <h4
                       :style="`
                         ${$isMobile ? 'font-size: 22px' : 'font-size: 32px'}
@@ -408,7 +426,13 @@
                       `">
                       物流管理
                     </h4>
-                    <h5 style="font-size: 14px; margin-bottom: 16px; margin-top: 6px; font-weight: 100;">
+                    <h5
+                      style="
+                        font-size: 14px;
+                        margin-bottom: 16px;
+                        margin-top: 6px;
+                        font-weight: 100;
+                      ">
                       智能推荐优势物流商，物流轨迹实时查询
                     </h5>
                     <div class="text-des">
@@ -447,7 +471,9 @@
           </div>
           <div class="t-row-2">
             <div class="card-inner">
-              <div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''">
+              <div
+                class="card-inner-content"
+                :style="$isMobile ? 'flex-direction:column-reverse' : ''">
                 <div class="left content-text-wrap">
                   <div class="content-text">
                     <h4>跟踪号</h4>
@@ -513,6 +539,32 @@ export default {
   methods: {
     onScroll() {
       const top = this.scrollParent().scrollTop
+      if (this.$isMobile) {
+        if (top >= this.$refs.headerBanner.offsetHeight - 30) {
+          this.$refs.feature.style.position = 'fixed'
+          this.$refs.feature.style.top = '50px'
+          this.$refs.feature.style.left = '0'
+          this.$refs.feature.style.right = '0'
+          this.$refs.feature.style.height = '40px'
+          this.$refs.feature.style.zIndex = '100'
+        } else {
+          this.$refs.feature.style.position = ''
+          this.$refs.feature.style.top = ''
+          this.$refs.feature.style.left = ''
+          this.$refs.feature.style.right = ''
+          this.$refs.feature.style.height = ''
+          this.$refs.feature.style.zIndex = ''
+        }
+        return
+      }
+
+      this.$refs.feature.style.position = ''
+      this.$refs.feature.style.top = ''
+      this.$refs.feature.style.left = ''
+      this.$refs.feature.style.right = ''
+      this.$refs.feature.style.height = ''
+      this.$refs.feature.style.zIndex = ''
+
       if (top >= this.$refs.headerBanner.offsetHeight - 60) {
         this.$refs.feature.classList.add('feature-scrolling')
       } else {
@@ -696,7 +748,7 @@ export default {
   margin-bottom: 12px;
 }
 
-@media screen and (max-width:1100px) {
+@media screen and (max-width: 1100px) {
   .text {
     top: 20px !important;
     left: 20px !important;
@@ -719,6 +771,7 @@ export default {
     transform: unset;
     position: unset;
     border-radius: 0;
+    transition: none;
   }
 
   .feature-item {

src/views/login.vue

@@ -2,22 +2,25 @@
   <div class="login-page">
     <div class="login_bg">
       <div class="logo">
-        <div>
         <a href="/">
           <span class="logo_text">
-              <img src="../assets/logo.png" height="40px" />
+            <img src="../assets/logo1.png" height="40px" v-if="$isMobile" />
+            <img src="../assets/logo.png" height="40px" v-else />
           </span>
         </a>
       </div>
-        <!-- <div class="banner_text">
-          <div>智能化订单处理</div>
-          <div style="margin-left: 20px">数字化供采平台</div>
-          <div style="margin-left: 20px">多维度数据分析</div>
-        </div> -->
     </div>
-
-      <div class="login_content">
-        <h2 style="text-align: center; font-weight: 400;color: #4a4c6d;margin-bottom: 40px;">欢迎登录</h2>
+    <div :class="$isMobile ? 'login-mobile' : ''">
+      <div :class="$isMobile ? 'login-content-mobile' : 'login_content'">
+        <h2
+          style="
+            text-align: center;
+            font-weight: 400;
+            color: #4a4c6d;
+            margin-bottom: 40px;
+          ">
+          欢迎登录
+        </h2>
         <el-form
           size="medium"
           :model="ruleForm"
@@ -60,6 +63,7 @@
         </el-form>
       </div>
     </div>
+
     <div
       class="modal"
       :style="isShowModal ? 'display: block' : 'display: none'">
@@ -298,6 +302,28 @@ export default {
 }
 </script>
 <style scoped>
+.login-mobile {
+  margin: 20px;
+  border-radius: 6px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  top: 50%;
+  left: 0;
+  right: 0;
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+.login-content-mobile {
+  padding: 20px;
+}
+.login-page {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  image-rendering: -webkit-optimize-contrast;
+  background: url(../assets/banner.jpg) left / cover no-repeat;
+}
 .reset-password {
   width: 100%;
   background-image: linear-gradient(
@@ -373,11 +399,8 @@ export default {
   cursor: pointer;
 }
 .logo {
-  position: absolute;
   display: flex;
   align-items: center;
-  left: 7%;
-  top: 7%;
 }
 .logo_text {
   display: inline-block;
@@ -390,11 +413,9 @@ export default {
   margin-left: 40px;
 }
 .login_bg {
-  width: 100%;
-  height: 100vh;
-  position: relative;
-  image-rendering: -webkit-optimize-contrast;
-  background: url(../assets/banner.jpg) left / cover no-repeat;
+  position: absolute;
+  left: 7%;
+  top: 7%;
 }
 .login_content {
   padding: 70px 40px;
@@ -448,8 +469,34 @@ export default {
   background: url('../assets/eyes-closed.png') no-repeat center / cover;
 }
 .login-page::v-deep .el-input__inner::-ms-reveal,
-.login-page::v-deep .el-input__inner::-ms-clear{
+.login-page::v-deep .el-input__inner::-ms-clear {
   display: none;
 }
 
+@media screen and (max-width: 1100px) {
+  .login-page {
+    background: none;
+    background-color: #edf0f5;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+  }
+
+  .login_bg {
+    position: unset;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .login_form {
+    width: unset;
+    border-radius: 0;
+  }
+
+  .forget-form {
+    width: 84vw;
+    padding: 20px;
+  }
+}
 </style>

src/views/price/pricePage.vue

@@ -66,7 +66,15 @@ export default {
           class: 'h-2x',
           valueClass: 'fs-20 fw-b',
         },
-        { label: '收费方式', value: 'chargeType' },
+        {
+          label: '收费方式',
+          value: (d) => {
+            d = d.chargeType
+            if (Array.isArray(d)) return d.map((e) => `<p>${e}</p>`).join('')
+            return d
+          },
+          valueClass: 'list',
+        },
         {
           label: '价格',
           value: (d) => {
@@ -105,7 +113,7 @@ export default {
         {
           name: '试用版',
 
-          chargeType: '免费3个月或3000单', // 收费方式
+          chargeType: ['免费3个月', '或3000单'], // 收费方式
           price: 0, // 价格
           accountsCount: 10, // 账号数量
           rechargeAmount: '赠送', // 充值金额
@@ -224,6 +232,9 @@ export default {
       if (typeof value === 'boolean') {
         return `<span class="${value ? 'yes' : 'no'}"></span>`
       }
+      if (typeof value === 'number') {
+        value = `${value}`
+      }
       if (typeof value === 'string') {
         value = value.replaceAll(
           /((\d+)(\.\d+)?)/g,
@@ -327,12 +338,13 @@ export default {
   user-select: none;
   overflow: hidden;
   font-size: 16px;
+  --item-height: 40px;
 }
 
 .price-column,
 .price-value {
   box-sizing: border-box;
-  height: 40px;
+  height: var(--item-height);
   padding: 0 30px;
   display: flex;
   align-items: center;
@@ -365,8 +377,7 @@ export default {
 .price-item:hover {
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
   border-radius: 8px;
-  background-color: #0085fc;
-  color: #fff;
+  background-color: #a0cfff;
   border-right: none;
 }
 
@@ -374,7 +385,7 @@ export default {
   border-right: solid 1px #eee;
 }
 </style>
-<style scoped>
+<style scoped lang="scss">
 .price-container .fs-20 {
   font-size: 20px;
 }
@@ -384,16 +395,16 @@ export default {
 }
 
 .price-container .h-2x {
-  height: 80px;
+  height: calc(var(--item-height) * 2);
 }
 
 .price-container .h-3x {
-  height: 120px;
+  height: calc(var(--item-height) * 3);
 }
 
-.price-container .number {
-  font-size: 1.2em;
+.price-container::v-deep .number {
   margin: 0 4px;
+  color: red;
 }
 
 .price-container .list {
@@ -450,6 +461,49 @@ export default {
 
   .content-body {
     padding: 40px 0 !important;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .price-container {
+    box-shadow: none;
+    overflow: auto hidden;
+    --item-height: 50px;
+  }
+
+  .price-columns {
+    position: sticky;
+    left: 0;
+    background-color: #fff;
+  }
+
+  .price-column {
+    width: 100px;
+    padding: 10px;
+    white-space: normal;
+    border-bottom: solid 1px #eee;
+
+    &:first-child {
+      border-top: solid 1px #eee;
+    }
+  }
+
+  .price-value {
+    border-bottom: solid 1px #eee;
+    padding: 0 10px;
+
+    &:first-child {
+      border-top: solid 1px #eee;
+    }
+
+    &::v-deep > p {
+      white-space: nowrap;
+    }
+  }
+
+  .price-item {
+    padding-bottom: 0;
   }
 }
 </style>

src/views/register.vue

@@ -3,11 +3,12 @@
     <div class="logo">
       <a href="/">
         <span class="logo_text">
-          <img src="../assets/logo.png" height="40px" />
+          <img src="../assets/logo1.png" height="40px" v-if="$isMobile" />
+          <img src="../assets/logo.png" height="40px" v-else />
         </span>
       </a>
     </div>
-
+    <div>
       <div class="login_content">
         <h2 style="text-align: center; font-weight: 400; color: #4a4c6d">
           用户注册
@@ -39,7 +40,9 @@
                   :disabled="getCodeDisabled"
                   :class="getCodeDisabled ? 'disabled' : 'code-btn'"
                   @click="verCode">
-                {{ codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒` }}
+                  {{
+                    codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒`
+                  }}
                 </el-button>
               </div>
             </div>
@@ -77,10 +80,12 @@
           <el-checkbox v-model="isRead" label="" :indeterminate="false" />
           <span class="tos-link">
             阅读并同意
-          <a class="link" href="/protocol" target="_blank">九猫ERP条款与协议</a>
+            <a class="link" href="/protocol" target="_blank">
+              九猫ERP条款与协议
+            </a>
           </span>
         </div>
-      <div style="text-align: center;">
+        <div style="text-align: center">
           <button class="register-btn" type="primary" @click="onRegister">
             立即注册
           </button>
@@ -91,6 +96,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -302,4 +308,24 @@ export default {
   top: 7%;
   left: 8%;
 }
+
+@media screen and (max-width: 1100px) {
+  .login_bg {
+    background: unset;
+  }
+
+  .logo {
+    position: unset;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .login_content {
+    position: unset;
+    transform: unset;
+    padding: 20px;
+  }
+}
 </style>