Ver Fonte

style(mobile): 调整首页"立即加入"区块布局与样式

- 移除"去完成注册"按钮,简化用户界面
- 调整容器为横向布局,优化移动端空间利用
- 减少底部内边距从60px到48px
- 更新文字大小、颜色和间距以提升视觉层次
reaper há 1 mês atrás
pai
commit
b7e65e4518
1 ficheiros alterados com 19 adições e 45 exclusões
  1. 19 45
      app/pages/mobile/index.vue

+ 19 - 45
app/pages/mobile/index.vue

@@ -103,10 +103,6 @@
         <div class="mb-join-left">
           <h3>立即加入 &nbsp;安全之旅</h3>
           <div class="mb-join-subtitle">完成注册,即可免费体验 DDoS防护、CC防护、DNS解析等多款安全产品</div>
-          <div class="mb-join-btn">
-            <span>去完成注册</span>
-            <Icon name="material-symbols:arrow-forward-rounded" />
-          </div>
         </div>
         <img class="mb-join-img" src="~/assets/svg/home/aq.svg" alt="安全之旅" />
       </div>
@@ -260,7 +256,7 @@ import StatsSection from '~/components/mobile/home/StatsSection.vue';
     align-items: center;
     gap: 16px;
     margin-top: 24px;
-    padding-bottom: 60px;
+    padding-bottom: 48px;
     width: 100%;
     overflow: hidden;
 
@@ -337,58 +333,36 @@ import StatsSection from '~/components/mobile/home/StatsSection.vue';
 
     .mb-join-container {
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
+      justify-content: space-between;
       align-items: center;
-      width: 90%;
-      margin-top: 60px;
-      padding: 32px 20px;
-      border-radius: 24px;
-      background: linear-gradient(180deg, rgba(163, 157, 255, 0.1) 0%, rgba(125, 70, 255, 0.05) 100%);
-      border: 1px solid rgba(163, 157, 255, 0.2);
-      text-align: center;
+      width: calc(100% - 32px);
+      margin-top: 48px;
+      text-align: left;
+      gap: 20px;
 
       .mb-join-left {
+        flex: 1;
+
         h3 {
           color: #FFF;
-          font-size: 24px;
-          font-weight: 500;
-          line-height: 32px;
+          font-size: 16px;
+          font-weight: 400;
         }
 
         .mb-join-subtitle {
-          margin-top: 16px;
-          margin-bottom: 24px;
-          color: #A39DFF;
-          font-size: 14px;
+          margin-top: 12px;
+          margin-bottom: 20px;
+          color: rgba(255, 255, 255, 0.80);
+          font-size: 12px;
           font-weight: 400;
-          line-height: 22px;
         }
-
-        .mb-join-btn {
-          display: flex;
-          width: 100%;
-          max-width: 240px;
-          height: 48px;
-          margin: 0 auto;
-          justify-content: center;
-          align-items: center;
-          gap: 8px;
-          border-radius: 24px;
-          background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
-          cursor: pointer;
-
-          span {
-            color: #FFF;
-            font-size: 16px;
-            font-weight: 500;
-          }
-        }
-      }
+       }
 
       .mb-join-img {
-        width: 80%;
-        max-width: 240px;
-        margin-top: 32px;
+        width: 130px;
+        height: auto;
+        margin-top: 0;
       }
     }
   }