|
@@ -1,8 +1,9 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div>
|
|
<div>
|
|
|
<section class="video-section">
|
|
<section class="video-section">
|
|
|
- <video ref="videoRef" class="video-bg" src="~/assets/video/web.mp4" autoplay loop muted playsinline
|
|
|
|
|
- @loadedmetadata="onVideoLoaded"></video>
|
|
|
|
|
|
|
+ <NuxtImg width="1080" class="sd-bg" src="/images/products/sd-bg.png" alt="cdn" />
|
|
|
|
|
+ <!-- <video ref="videoRef" class="video-bg" src="~/assets/video/web.mp4" autoplay loop muted playsinline
|
|
|
|
|
+ @loadedmetadata="onVideoLoaded"></video> -->
|
|
|
<div class="video-title">
|
|
<div class="video-title">
|
|
|
<p class="video-text">Intelligent routing / dynamic optimization / real-time processing</p>
|
|
<p class="video-text">Intelligent routing / dynamic optimization / real-time processing</p>
|
|
|
<h1><span>高防</span>服务器,也能<span>极致加速</span></h1>
|
|
<h1><span>高防</span>服务器,也能<span>极致加速</span></h1>
|
|
@@ -85,8 +86,9 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="image-content">
|
|
<div class="image-content">
|
|
|
- <video ref="videoRef" class="video" preload="auto" :src="homeVideo" autoplay loop muted playsinline
|
|
|
|
|
- @loadedmetadata="onVideoLoaded"></video>
|
|
|
|
|
|
|
+ <NuxtImg width="574" src="/images/products/suo.png" alt="suo" />
|
|
|
|
|
+ <!-- <video ref="videoRef" class="video" preload="auto" :src="homeVideo" autoplay loop muted playsinline
|
|
|
|
|
+ @loadedmetadata="onVideoLoaded"></video> -->
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</section>
|
|
</section>
|
|
@@ -104,7 +106,6 @@ useHead(() => ({
|
|
|
}))
|
|
}))
|
|
|
import SecurityServicesSuite from '~/components/products/SecurityServicesSuite.vue';
|
|
import SecurityServicesSuite from '~/components/products/SecurityServicesSuite.vue';
|
|
|
import Defense from '~/components/products/Defense.vue';
|
|
import Defense from '~/components/products/Defense.vue';
|
|
|
-import homeVideo from '~/assets/video/suo.mp4'
|
|
|
|
|
|
|
|
|
|
const activeTab = ref('accelerate')
|
|
const activeTab = ref('accelerate')
|
|
|
|
|
|
|
@@ -112,21 +113,30 @@ const activeTab = ref('accelerate')
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.video-section {
|
|
.video-section {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
|
|
+ height: 700px;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
margin: 0 auto;
|
|
margin: 0 auto;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
+ &::before {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 10%;
|
|
|
|
|
+ top: 10%;
|
|
|
|
|
+ width: 384px;
|
|
|
|
|
+ height: 384px;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ background: rgba(121, 69, 255, 0.60);
|
|
|
|
|
+ filter: blur(250px);
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .video-bg {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: auto;
|
|
|
|
|
- display: block;
|
|
|
|
|
- z-index: 1;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- object-fit: cover;
|
|
|
|
|
- clip-path: inset(0 0 9% 0);
|
|
|
|
|
|
|
+ .sd-bg {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ top: 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+
|
|
|
.video-title {
|
|
.video-title {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top: 30%;
|
|
top: 30%;
|
|
@@ -374,7 +384,7 @@ const activeTab = ref('accelerate')
|
|
|
margin-top: 70px;
|
|
margin-top: 70px;
|
|
|
display: grid;
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
- gap:30px 0px;
|
|
|
|
|
|
|
+ gap: 30px 0px;
|
|
|
|
|
|
|
|
.feature-item {
|
|
.feature-item {
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -402,11 +412,6 @@ const activeTab = ref('accelerate')
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
-
|
|
|
|
|
- .video {
|
|
|
|
|
- width: 522px;
|
|
|
|
|
- height: 522px;
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|