Explorar o código

feat(mobile): 在首页添加行业客户展示与注册引导模块

添加行业客户展示区域,包含五大行业图标和十五家客户Logo。
新增注册引导区块,展示产品价值主张并引导用户完成注册。
reaper hai 1 mes
pai
achega
b13158fbc6
Modificáronse 1 ficheiros con 236 adicións e 0 borrados
  1. 236 0
      app/pages/mobile/index.vue

+ 236 - 0
app/pages/mobile/index.vue

@@ -23,6 +23,95 @@
       <p class="mb-insight-subtitle">实时攻防态势数据</p>
     </section>
     <StatsSection />
+    <section class="mb-insight-header">
+      <h3 class="mb-insight-h3">助力各行业客户成功</h3>
+    </section>
+
+    <section class="mb-industry">
+      <div class="mb-industry-content">
+        <div class="mb-industry-item">
+          <img src="~/assets/svg/home/icon1.svg" alt="icon">
+          <div class="mb-industry-text">金融</div>
+        </div>
+        <div class="mb-industry-item">
+          <img src="~/assets/svg/home/icon2.svg" alt="icon">
+          <div class="mb-industry-text">互联网</div>
+        </div>
+        <div class="mb-industry-item">
+          <img src="~/assets/svg/home/icon3.svg" alt="icon">
+          <div class="mb-industry-text">医疗健康</div>
+        </div>
+        <div class="mb-industry-item">
+          <img src="~/assets/svg/home/icon4.svg" alt="icon">
+          <div class="mb-industry-text">制造</div>
+        </div>
+        <div class="mb-industry-item">
+          <img src="~/assets/svg/home/icon5.svg" alt="icon">
+          <div class="mb-industry-text">教育</div>
+        </div>
+      </div>
+
+      <div class="mb-industry-other">
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon6.png" alt="卓越教育" />
+        </div>
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon7.png" alt="华福证券" />
+        </div>
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon8.png" alt="汉王" />
+        </div>
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon9.png" alt="隧道股份" />
+        </div>
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon10.png" alt="岳阳医院" />
+        </div>
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon11.png" alt="杉德" />
+        </div>
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon12.png" alt="易班" />
+        </div>
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon13.png" alt="银联商务" />
+        </div>
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon14.png" alt="长海医院" />
+        </div>
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon15.png" alt="斗象科技" />
+        </div>
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon16.png" alt="瑞金" />
+        </div>
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon17.png" alt="3L" />
+        </div>
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon18.png" alt="宝付" />
+        </div>
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon19.png" alt="新华医院" />
+        </div>
+        <div class="mb-other-item">
+          <NuxtImg height="26" src="/images/home/icon20.png" alt="中船重工物贸集团" />
+        </div>
+      </div>
+
+      <div class="mb-join-container">
+        <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>
+    </section>
+
   </section>
 </template>
 
@@ -155,6 +244,153 @@ import StatsSection from '~/components/mobile/home/StatsSection.vue';
       font-size: 12px;
       font-weight: 400;
     }
+
+    .mb-insight-h3 {
+      color: #FFF;
+      font-size: 18px;
+      font-weight: 400;
+      line-height: 36px;
+    }
+  }
+
+  .mb-industry {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    margin-top: 24px;
+    padding-bottom: 60px;
+    width: 100%;
+    overflow: hidden;
+
+    .mb-industry-content {
+      display: flex;
+      gap: 10px;
+      width: 100%;
+      overflow-x: auto;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .mb-industry-item {
+        flex-shrink: 0;
+        box-sizing: border-box;
+        display: flex;
+        width: 105px;
+        height: 48px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 4px;
+        border: 0.5px solid #C6BAFF;
+        background: linear-gradient(169deg, rgba(101, 70, 255, 0.60) -37.16%, rgba(101, 70, 255, 0.10) 193.82%);
+        backdrop-filter: blur(0.5px);
+        gap: 10px;
+
+        img {
+          width: 18px;
+          height: 18px;
+        }
+
+        .mb-industry-text {
+          color: #FFF;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+
+    .mb-industry-other {
+      display: grid;
+      grid-template-rows: repeat(3, auto);
+      grid-template-columns: repeat(5, 105px);
+      gap: 10px;
+      width: 100%;
+      overflow-x: auto;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .mb-other-item {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 105px;
+        height: 48px;
+        border-radius: 4px;
+        border: 0.5px solid #B2A1FF;
+        background: #1C192B;
+
+        :deep(img) {
+          max-width: 80%;
+          object-fit: contain;
+        }
+      }
+    }
+
+    .mb-join-container {
+      display: flex;
+      flex-direction: column;
+      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;
+
+      .mb-join-left {
+        h3 {
+          color: #FFF;
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 32px;
+        }
+
+        .mb-join-subtitle {
+          margin-top: 16px;
+          margin-bottom: 24px;
+          color: #A39DFF;
+          font-size: 14px;
+          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;
+      }
+    }
   }
 }
 </style>