|
|
@@ -1,26 +1,254 @@
|
|
|
<template>
|
|
|
- <div class="mobile-product">
|
|
|
- <h1>SDK 安全加固</h1>
|
|
|
- </div>
|
|
|
+ <section class="mb-product">
|
|
|
+ <section class="video-section">
|
|
|
+ <div class="video-title">
|
|
|
+ <h1>DDAC游戏盾——让APP自带</h1>
|
|
|
+ <div class="video-subtitle">“国家级别”防御</div>
|
|
|
+ <div class="video-text">
|
|
|
+ 却只需要开发者“日常级别”
|
|
|
+ 的工作量
|
|
|
+ </div>
|
|
|
+ <div class="video-btn">
|
|
|
+ 联系我们 <Icon size="16" name="ic:sharp-keyboard-arrow-right"></Icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-bg"></div>
|
|
|
+ </section>
|
|
|
+ <Introduction />
|
|
|
+ <section class="mb-card-text">
|
|
|
+ <h3>
|
|
|
+ 一体化解决游戏安全问题
|
|
|
+ </h3>
|
|
|
+ <div class="mb-accordion">
|
|
|
+ <div v-for="(item, index) in accordionItems" :key="item.title" class="accordion-item"
|
|
|
+ :class="{ 'is-open': openIndices.includes(index) }" @click="toggleAccordion(index)">
|
|
|
+ <div class="accordion-header">
|
|
|
+ <div class="accordion-left">
|
|
|
+ <img width="24" height="24" :src="item.icon" alt="icon">
|
|
|
+ <span class="accordion-title">{{ item.title }}</span>
|
|
|
+ </div>
|
|
|
+ <Icon size="20" name="line-md:chevron-right" class="accordion-icon" />
|
|
|
+ </div>
|
|
|
+ <Transition name="accordion-expand">
|
|
|
+ <div v-show="openIndices.includes(index)" class="accordion-body">
|
|
|
+ <p class="accordion-text">{{ item.description }}</p>
|
|
|
+ </div>
|
|
|
+ </Transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <PlansSection class="mb-plans-section" />
|
|
|
+
|
|
|
+ </section>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+import Introduction from '~/components/mobile/products/Introduction.vue'
|
|
|
+import PlansSection from '~/components/mobile/home/PlansSection.vue'
|
|
|
+import icon1 from '~/assets/svg/products/sdk/security.svg'
|
|
|
+import icon2 from '~/assets/svg/products/sdk/acceleration.svg'
|
|
|
+import icon3 from '~/assets/svg/products/sdk/lock.svg'
|
|
|
+import icon4 from '~/assets/svg/products/sdk/user.svg'
|
|
|
+
|
|
|
useHead(() => ({
|
|
|
- title: 'SDK安全加固 - 移动端',
|
|
|
+ title: 'SDK安全加固',
|
|
|
meta: [
|
|
|
{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }
|
|
|
]
|
|
|
}))
|
|
|
+
|
|
|
+const accordionItems = [
|
|
|
+ {
|
|
|
+ title: 'DDoS 防护',
|
|
|
+ description: '分布式的抗D节点，同时基于SDK端流量数据的灵活调度策略，智能隔离清洗攻击流量。',
|
|
|
+ icon: icon1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '智能加速',
|
|
|
+ description: '基于用户IP识别，智能网络传输线路选择，静态动态Edge分发，即时游戏无延迟。',
|
|
|
+ icon: icon2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '全链加密',
|
|
|
+ description: 'SDK自身高强度加密，且可以实时动态更新，安全可靠，无惧 MITM Attack。',
|
|
|
+ icon: icon3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '用户友好的加密调度中心',
|
|
|
+ description: '用于替代DNS的一个加密调度中心，能够实现细化到单个客户端，级别的秒级调度，兼容性稳定可靠!提供完整SDK中文文档，轻松集成!',
|
|
|
+ icon: icon4
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const openIndices = ref([0])
|
|
|
+
|
|
|
+const toggleAccordion = (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">
|
|
|
-.mobile-product {
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- padding-top: 60px;
|
|
|
+.mb-product {
|
|
|
+ .video-section {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 32px;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+
|
|
|
+ .right-bg {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: -52px;
|
|
|
+ width: 312px;
|
|
|
+ height: 260px;
|
|
|
+ background-image: url('/images/products/sdk-bg1.png');
|
|
|
+ background-size: contain;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-title {
|
|
|
+ z-index: 3;
|
|
|
+ color: #fff;
|
|
|
+ font-style: normal;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ background: linear-gradient(91deg, #D8D3FF -6.9%, #E6D2FF 111.73%);
|
|
|
+ background-clip: text;
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-subtitle {
|
|
|
+ margin-left: -4%;
|
|
|
+ color: #DBB9FF;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-text {
|
|
|
+ width: 130px;
|
|
|
+ margin-top: 12px;
|
|
|
+ color: #E2D9FF;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-btn {
|
|
|
+ margin-top: 12px;
|
|
|
+ display: flex;
|
|
|
+ width: 85px;
|
|
|
+ height: 24px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
|
|
|
- h1 {
|
|
|
- font-size: 24px;
|
|
|
+.mb-card-text {
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ text-align: center;
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-accordion {
|
|
|
+ margin-top: 14px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ .accordion-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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .accordion-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .accordion-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .accordion-title {
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .accordion-icon {
|
|
|
+ color: #fff;
|
|
|
+ transition: transform 0.2s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .accordion-item.is-open .accordion-icon {
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .accordion-body {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .accordion-text {
|
|
|
+ color: rgba(255, 255, 255, 0.50);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+ .accordion-expand-enter-active,
|
|
|
+ .accordion-expand-leave-active {
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .accordion-expand-enter-from,
|
|
|
+ .accordion-expand-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ max-height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .accordion-expand-enter-to,
|
|
|
+ .accordion-expand-leave-from {
|
|
|
+ opacity: 1;
|
|
|
+ max-height: 200px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.mb-plans-section{
|
|
|
+ margin-top: 44px;
|
|
|
}
|
|
|
</style>
|
reaper
