|
|
@@ -1,21 +1,316 @@
|
|
|
<template>
|
|
|
- <div class="mb-about">
|
|
|
- <h1>关于（H5）</h1>
|
|
|
- </div>
|
|
|
+ <section class="mb-about">
|
|
|
+ <NuxtImg class="mb-about-bg" src="/images/about/bg.png" alt="about" />
|
|
|
+ <section class="mb-about-content">
|
|
|
+ <div class="mb-about-title">
|
|
|
+ <h1>层层设防，步步为盾,全产品矩阵协同打造零穿透安全体系</h1>
|
|
|
+ <p>A collaborative approach across the entire product portfolio creates a zero-penetration security system.</p>
|
|
|
+ </div>
|
|
|
+ <div class="mb-about-box">
|
|
|
+ <div class="mb-about-box-text">
|
|
|
+ <p><span style="color: #D2AEFF;">盾网络 — 专注于企业级DDoS/CC防护与安全加速的网络安全服务商。
|
|
|
+ </span>我们以自研流量清洗架构为核心，构建了覆盖高防CDN、游戏盾、高防服务器、高防IP、SDK防护的全链路安全产品体系。依托全国多节点分布式防御网络，为游戏、电商、金融、直播等行业客户提供T级攻击防御与毫秒级响应保障。技术是我们的信仰，稳定是我们的承诺。1盾，让每一次攻击都徒劳无功。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section class="mb-about-subtitle">
|
|
|
+ <h2>全维度安全防护矩阵</h2>
|
|
|
+ <p>体系化安全能力，全场景多维联动防护，筑牢企业风</p>
|
|
|
+ <p>险抵御与运营保障</p>
|
|
|
+ </section>
|
|
|
+ <Flowchart />
|
|
|
+ <section class="mb-about-matrix">
|
|
|
+ <h2>驱动业务持续稳定运行的全域安全产品矩阵</h2>
|
|
|
+ <p>以全球节点、智能调度与多层防护为底座，构建覆盖业务接入、传</p>
|
|
|
+ <p>输、抗攻击与终端安全的全链路产品体系，为企业提供可扩展、可</p>
|
|
|
+ <p>进化的稳态安全能力。</p>
|
|
|
+ </section>
|
|
|
+ <section class="mb-matrix-card">
|
|
|
+ <div v-for="(item, index) in accordionItems" :key="item.title" class="mb-card-item"
|
|
|
+ :class="{ 'mb-is-open': openIndices.includes(index) }" @click="togglecard(index)">
|
|
|
+ <div class="mb-card-header">
|
|
|
+ <div class="mb-card-left">
|
|
|
+ <img :src="item.icon" alt="icon">
|
|
|
+ <span class="mb-card-title">{{ item.title }}</span>
|
|
|
+ </div>
|
|
|
+ <Icon name="line-md:chevron-right" class="mb-card-icon" />
|
|
|
+ </div>
|
|
|
+ <Transition name="mb-card-expand">
|
|
|
+ <div v-show="openIndices.includes(index)" class="mb-card-body">
|
|
|
+ <p class="mb-card-text">{{ item.text }}</p>
|
|
|
+ <p :style="{ color: item.color }" class="mb-card-text">{{ item.desc }}</p>
|
|
|
+ </div>
|
|
|
+ </Transition>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section class="mb-about-text">
|
|
|
+ <h2>万千攻击，1盾尽消</h2>
|
|
|
+ <p>"T级清洗能力×智能流量调度×全链路产品联防—这就是1盾的底气"</p>
|
|
|
+ </section>
|
|
|
+ <DCard />
|
|
|
+ </section>
|
|
|
</template>
|
|
|
-
|
|
|
<script setup>
|
|
|
+import Flowchart from '~/components/mobile/about/Flowchart.vue';
|
|
|
+import DCard from '~/components/mobile/about/DCard.vue';
|
|
|
+import cardIcon1 from '@/assets/svg/about/card-icon1.svg'
|
|
|
+import cardIcon2 from '@/assets/svg/about/card-icon2.svg'
|
|
|
+import cardIcon3 from '@/assets/svg/about/card-icon3.svg'
|
|
|
+import cardIcon4 from '@/assets/svg/about/card-icon4.svg'
|
|
|
+import cardIcon5 from '@/assets/svg/about/card-icon5.svg'
|
|
|
+
|
|
|
+
|
|
|
+const accordionItems = [
|
|
|
+ {
|
|
|
+ title: 'CDN加速',
|
|
|
+ icon: cardIcon1,
|
|
|
+ text: '球加速节点分发，降低延迟提升用户访问体验。',
|
|
|
+ desc: '全球200+节点',
|
|
|
+ color: '#A39DFF'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '游戏盾',
|
|
|
+ icon: cardIcon2,
|
|
|
+ text: '专为游戏业务定制，智能调度抗DDoS，隐藏源站。',
|
|
|
+ desc: 'T级防御能力',
|
|
|
+ color: '#4696FF'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '高防服务器',
|
|
|
+ icon: cardIcon3,
|
|
|
+ text: '物理级高防机房，大带宽大防御，稳定业务运行。',
|
|
|
+ desc: '单节点500G+',
|
|
|
+ color: '#B546FF'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '高防IP',
|
|
|
+ icon: cardIcon4,
|
|
|
+ text: '弹性IP防护，精准流量清洗，零影响转发正常业务。',
|
|
|
+ desc: '弹性扩展1T+',
|
|
|
+ color: '#616EFF'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'SDK防护',
|
|
|
+ icon: cardIcon5,
|
|
|
+ text: '端侧安全加固，链路加密通信，防篡改防抓包。',
|
|
|
+ desc: '端到端加密',
|
|
|
+ color: '#46ECFF'
|
|
|
|
|
|
+ }
|
|
|
+]
|
|
|
+const openIndices = ref([0])
|
|
|
+
|
|
|
+const togglecard = (index) => {
|
|
|
+ const i = openIndices.value.indexOf(index)
|
|
|
+ if (i > -1) {
|
|
|
+ openIndices.value.splice(i, 1)
|
|
|
+ } else {
|
|
|
+ openIndices.value.push(index)
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.mb-about {
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- padding-top: 40px;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .mb-about-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 375px;
|
|
|
+ height: auto;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-about-content {
|
|
|
+ padding-top: 40px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .mb-about-title {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #FFF;
|
|
|
+ gap: 6px;
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 6px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-about-box {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 72px;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid rgba(13, 0, 34, 0.00);
|
|
|
+ background: linear-gradient(179deg, rgba(3, 0, 20, 0.50) 1.22%, rgba(151, 87, 255, 0.10) 41.19%);
|
|
|
+ box-shadow: 0 4px 4px 0 rgba(98, 0, 255, 0.30) inset;
|
|
|
+ backdrop-filter: blur(7px);
|
|
|
+ padding: 16px;
|
|
|
+
|
|
|
+ .mb-about-box-text {
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-about-subtitle {
|
|
|
+ margin-top: 34px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #FFF;
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-about-matrix {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #FFF;
|
|
|
+ margin-top: 56px;
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-matrix-card {
|
|
|
+ margin-top: 14px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ .mb-card-item {
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.10);
|
|
|
+ background: #1C192B;
|
|
|
+ backdrop-filter: blur(9px);
|
|
|
+ transition: border-color 0.2s ease, background 0.2s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-card-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-card-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: start;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-card-title {
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-card-icon {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ transition: transform 0.2s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-card-item.mb-is-open .mb-card-icon {
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-card-body {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-card-text {
|
|
|
+ color: rgba(255, 255, 255, 0.50);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-card-expand-enter-active,
|
|
|
+ .mb-card-expand-leave-active {
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-accordion-expand-enter-from,
|
|
|
+ .mb-accordion-expand-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ max-height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-accordion-expand-enter-to,
|
|
|
+ .mb-accordion-expand-leave-from {
|
|
|
+ opacity: 1;
|
|
|
+ max-height: 200px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-about-text {
|
|
|
+ margin-top: 40px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 10px;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
|
|
|
- h1 {
|
|
|
- font-size: 32px;
|
|
|
+ p {
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
piks