|
|
@@ -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>立即加入 安全之旅</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>
|