scout666/officialWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: scout666:40057b3ca436c42dedbf3e9fb8021311880eede2
Branches Tags
scout666:main
scout666:zhangyuanshan
..
compare: scout666:6ccb1eb099d1a2d3490583df87f946c6f167f626
Branches Tags
scout666:main
scout666:zhangyuanshan

No commits in common. "40057b3ca436c42dedbf3e9fb8021311880eede2" and "6ccb1eb099d1a2d3490583df87f946c6f167f626" have entirely different histories.
40057b3ca4 ... 6ccb1eb099

9 changed files with 117 additions and 183 deletions
Show Stats Expand all files Collapse all files

3
src/router/index.js
View File

@ -1,7 +1,5 @@
// router/index.js // router/index.js
import { createRouter, createWebHistory } from 'vue-router'; import { createRouter, createWebHistory } from 'vue-router';
import { setupRouterGuards } from './router-guards';
const routes = [ const routes = [
{ {
path: '/', path: '/',
@ -44,5 +42,4 @@ router.beforeEach((to, from, next) => {
} }
next() next()
}); });
setupRouterGuards(router);
export default router; export default router;

6
src/router/router-guards.js
View File

@ -1,6 +0,0 @@
// router/router-guards.js
export function setupRouterGuards (router) {
router.afterEach(() => {
window.scrollTo(0, 0);
});
}

111
src/views/businessintroduction/size375/index.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<n-divider class="divider1" vertical />
<n-divider class="divider5" vertical />
<header className="header flex items-center justify-between"> <header className="header flex items-center justify-between">
<div class="logo"> <div class="logo">
<img src="@/assets/image/logo.png" alt="logo" /> <img src="@/assets/image/logo.png" alt="logo" />
@ -76,7 +74,7 @@
moveRefs[3].value = el; moveRefs[3].value = el;
} }
" "
class="absolute bottom-[-376px] right-[0px] z-4" class="absolute bottom-[-424px] right-[0px]"
> >
<img <img
src="@/assets/image/businessintroduction/375/bg-2.png" src="@/assets/image/businessintroduction/375/bg-2.png"
@ -545,18 +543,22 @@
凭借前沿的传播策略，精准狙击全球受众心智。深度整合顶级媒体资源，让曝光量呈指数级突破，全方位塑造全球品牌影响力，引领文艺潮流走向世界舞台中央 凭借前沿的传播策略，精准狙击全球受众心智。深度整合顶级媒体资源，让曝光量呈指数级突破，全方位塑造全球品牌影响力，引领文艺潮流走向世界舞台中央
</div> </div>
</div> </div>
<div class="mt-[46px] mb-[246px] px-[108px]"> <div
<div class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
v-for="(item, idx) in state.marqueeArr" >
:key="idx" <div ref="carouselTrack" class="carousel-track">
class="w-full flex flex-wrap justify-center carousel-item" <div
> v-for="(item, idx) in getVisibleItems()"
<img class="carousel-image" :src="item.imgUrl" /> :key="idx"
<div class="carousel-title w-full"> class="carousel-item"
<div>{{ item.title }}</div> >
</div> <img class="carousel-image" :src="item.imgUrl" />
<div class="carousel-subtitle"> <div class="carousel-title">
<div>{{ item.subTitle }}</div> <div>{{ item.title }}</div>
</div>
<div class="carousel-subtitle">
<div>{{ item.subTitle }}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -568,7 +570,7 @@
className="flex flex-wrap justify-center" className="flex flex-wrap justify-center"
> >
<img <img
class="w-[891px] h-[87px] mt-[61px] mb-[56px]" class="w-[580px] h-[55px] my-[85px]"
src="@/assets/image/image-footer.png" src="@/assets/image/image-footer.png"
alt="logo" alt="logo"
/> />
@ -578,7 +580,6 @@
</template> </template>
<script setup> <script setup>
import { NDivider } from "naive-ui";
import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue"; import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue";
import gsap from "gsap"; import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollTrigger } from "gsap/ScrollTrigger";
@ -628,8 +629,15 @@ const state = reactive({
], ],
}); });
const carouselTrack = ref(null);
let carouselAnimation = null; // 存储 GSAP 动画实例 let carouselAnimation = null; // 存储 GSAP 动画实例
const getVisibleItems = () => {
const items = state.marqueeArr;
// 复制两组用于无缝滚动
return [...items, ...items];
};
// 监听窗口大小变化 // 监听窗口大小变化
onMounted(() => { onMounted(() => {
ctx = gsap.context(() => { ctx = gsap.context(() => {
@ -660,6 +668,32 @@ onMounted(() => {
}); });
} }
}); });
// 初始化轮播动画
nextTick(() => {
if (carouselTrack.value) {
const firstItem = carouselTrack.value.querySelector(".carousel-item");
if (!firstItem) return;
const itemWidth = firstItem.offsetWidth;
const itemMargin = parseInt(
window.getComputedStyle(firstItem).marginRight
);
const slideWidth = itemWidth + itemMargin;
const totalWidth = slideWidth * state.marqueeArr.length;
// 创建无限滚动动画
carouselAnimation = gsap.to(carouselTrack.value, {
x: -totalWidth,
duration: 20,
ease: "none",
repeat: -1,
onRepeat: () => {
gsap.set(carouselTrack.value, { x: 0 });
},
});
}
});
}); });
}); });
@ -782,6 +816,11 @@ const goToSection = (i) => {
bottom: -80px; bottom: -80px;
right: 0; right: 0;
} }
.carousel-container {
width: 96%;
overflow: hidden;
position: relative;
}
.arrow-btn { .arrow-btn {
cursor: pointer; cursor: pointer;
@ -799,14 +838,18 @@ const goToSection = (i) => {
} }
.carousel-item { .carousel-item {
margin-top: 154px; width: 785px;
padding: 46px 36px 118px 51px; margin-right: 73px;
border-radius: 61px; flex: 0 0 auto;
box-shadow: 0 15px 75px 5px rgba(0, 0, 0, 0.16); display: block; // 改为 block 布局
padding: 23px 20px 40px;
border-radius: 30px;
box-shadow: 0 8px 35px 3px rgba(0, 0, 0, 0.16);
} }
.carousel-image { .carousel-image {
width: 1623px; width: 748px;
height: 563px;
object-fit: cover; object-fit: cover;
display: block; display: block;
} }
@ -817,35 +860,19 @@ const goToSection = (i) => {
} }
.carousel-title { .carousel-title {
text-align: left; font-size: 50px;
font-size: 92px;
font-weight: 500; font-weight: 500;
margin-top: 87px; margin-top: 48px;
} }
.carousel-subtitle { .carousel-subtitle {
margin-top: 51px; margin-top: 23px;
color: #455363; color: #455363;
font-size: 72px; font-size: 40px;
} }
// 添加一个通用的溢出控制类 // 添加一个通用的溢出控制类
.overflow-hidden { .overflow-hidden {
overflow: hidden; overflow: hidden;
} }
.divider1 {
position: absolute;
z-index: 3;
left: 64px;
width: 1px;
height: 100%;
}
.divider5 {
position: absolute;
z-index: 3;
right: 60px;
width: 1px;
height: 100%;
}
</style> </style>

26
src/views/businessintroduction/size768/index.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<n-divider class="divider1" vertical />
<n-divider class="divider5" vertical />
<header className="header flex items-center justify-between"> <header className="header flex items-center justify-between">
<div class="logo"> <div class="logo">
<img src="@/assets/image/logo.png" alt="logo" /> <img src="@/assets/image/logo.png" alt="logo" />
@ -70,7 +68,7 @@
moveRefs[3].value = el; moveRefs[3].value = el;
} }
" "
class="absolute bottom-[-290px] right-[0px] z-4" class="absolute bottom-[-290px] right-[0px]"
> >
<img <img
src="@/assets/image/businessintroduction/768/bg-2.png" src="@/assets/image/businessintroduction/768/bg-2.png"
@ -414,7 +412,7 @@
</div> </div>
</div> </div>
<div class="absolute bottom-[262px] right-[0px] z-4"> <div class="absolute bottom-[262px] right-[0px]">
<img <img
src="@/assets/image/businessintroduction/768/bg-5.png" src="@/assets/image/businessintroduction/768/bg-5.png"
class="h-[361px]" class="h-[361px]"
@ -533,7 +531,7 @@
</div> </div>
</div> </div>
<div <div
class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px] z-4" class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
> >
<div ref="carouselTrack" class="carousel-track"> <div ref="carouselTrack" class="carousel-track">
<div <div
@ -569,7 +567,6 @@
</template> </template>
<script setup> <script setup>
import { NDivider } from "naive-ui";
import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue"; import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue";
import gsap from "gsap"; import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollTrigger } from "gsap/ScrollTrigger";
@ -859,21 +856,4 @@ const goToSection = (i) => {
.overflow-hidden { .overflow-hidden {
overflow: hidden; overflow: hidden;
} }
.divider1 {
position: absolute;
z-index: 3;
color: #eff1f6;
left: 142px;
width: 1px;
height: 100%;
}
.divider5 {
position: absolute;
z-index: 3;
color: #eff1f6;
right: 142px;
width: 1px;
height: 100%;
}
</style> </style>

22
src/views/companyprofil/size375/index.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<n-divider class="divider1" vertical />
<n-divider class="divider5" vertical />
<header className="header flex items-center justify-between"> <header className="header flex items-center justify-between">
<div class="logo"> <div class="logo">
<img src="@/assets/image/logo.png" alt="logo" /> <img src="@/assets/image/logo.png" alt="logo" />
@ -62,7 +60,7 @@
src="@/assets/image/companyprofil/375/image-q.png" src="@/assets/image/companyprofil/375/image-q.png"
/> />
</div> </div>
<div class="w-[1920px] absolute bottom-[-160px] z-4"> <div class="w-[1920px] absolute bottom-[-160px]">
<img <img
src="@/assets/image/companyprofil/375/icon-lang.png" src="@/assets/image/companyprofil/375/icon-lang.png"
alt="logo" alt="logo"
@ -206,7 +204,7 @@
</div> </div>
</div> </div>
<div class="icon-langmul z-4"> <div class="icon-langmul">
<img <img
class="w-[1205px]" class="w-[1205px]"
src="@/assets/image/companyprofil/375/icon-langmul.png" src="@/assets/image/companyprofil/375/icon-langmul.png"
@ -417,7 +415,6 @@
</template> </template>
<script setup> <script setup>
import { NDivider } from "naive-ui";
import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue"; import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue";
import gsap from "gsap"; import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollTrigger } from "gsap/ScrollTrigger";
@ -887,19 +884,4 @@ const handleCarouselClick = (item, event) => {
.overflow-hidden { .overflow-hidden {
overflow: hidden; overflow: hidden;
} }
.divider1 {
position: absolute;
z-index: 3;
left: 64px;
width: 1px;
height: 100%;
}
.divider5 {
position: absolute;
z-index: 3;
right: 60px;
width: 1px;
height: 100%;
}
</style> </style>

38
src/views/companyprofil/size768/index.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<n-divider class="divider1" vertical />
<n-divider class="divider5" vertical />
<header className="header flex items-center justify-between"> <header className="header flex items-center justify-between">
<div class="logo"> <div class="logo">
<img src="@/assets/image/logo.png" alt="logo" /> <img src="@/assets/image/logo.png" alt="logo" />
@ -64,7 +62,7 @@
/> />
</div> </div>
</div> </div>
<div class="w-[1920px] absolute bottom-[-660px] z-4"> <div class="w-[1920px] absolute bottom-[-660px]">
<img <img
src="@/assets/image/companyprofil/768/icon-lang.png" src="@/assets/image/companyprofil/768/icon-lang.png"
alt="logo" alt="logo"
@ -163,9 +161,7 @@
src="@/assets/image/companyprofil/768/icon-lun.png" src="@/assets/image/companyprofil/768/icon-lun.png"
/> />
<div <div class="w-full mt-[50px] text-[#10253E] text-[45px]">
class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
>
纵横全球 多元领航 纵横全球 多元领航
</div> </div>
<div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]"> <div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]">
@ -179,9 +175,7 @@
src="@/assets/image/companyprofil/768/icon-love.png" src="@/assets/image/companyprofil/768/icon-love.png"
/> />
<div <div class="w-full mt-[50px] text-[#10253E] text-[45px]">
class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
>
深耕粉丝 构筑生态 深耕粉丝 构筑生态
</div> </div>
<div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]"> <div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]">
@ -194,9 +188,7 @@
src="@/assets/image/companyprofil/768/icon-p.png" src="@/assets/image/companyprofil/768/icon-p.png"
/> />
<div <div class="w-full mt-[50px] text-[#10253E] text-[45px]">
class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
>
广纳贤才 团队进阶 广纳贤才 团队进阶
</div> </div>
<div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]"> <div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]">
@ -204,7 +196,7 @@
</div> </div>
</div> </div>
<div class="icon-langmul z-4"> <div class="icon-langmul">
<img <img
class="w-[846px] h-[216px]" class="w-[846px] h-[216px]"
src="@/assets/image/companyprofil/768/icon-langmul.png" src="@/assets/image/companyprofil/768/icon-langmul.png"
@ -363,7 +355,7 @@
</div> </div>
</div> </div>
<div <div
class="mt-[73px] mb-[253px] carousel-container px-[80px] py-[40px] z-4" class="mt-[73px] mb-[253px] carousel-container px-[80px] py-[40px]"
> >
<div <div
ref="carouselTrack" ref="carouselTrack"
@ -415,7 +407,6 @@
</template> </template>
<script setup> <script setup>
import { NDivider } from "naive-ui";
import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue"; import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue";
import gsap from "gsap"; import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollTrigger } from "gsap/ScrollTrigger";
@ -881,21 +872,4 @@ const handleCarouselClick = (item, event) => {
.overflow-hidden { .overflow-hidden {
overflow: hidden; overflow: hidden;
} }
.divider1 {
position: absolute;
z-index: 3;
color: #eff1f6;
left: 142px;
width: 1px;
height: 100%;
}
.divider5 {
position: absolute;
z-index: 3;
color: #eff1f6;
right: 142px;
width: 1px;
height: 100%;
}
</style> </style>

20
src/views/companyprofildetail/size375/index.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<n-divider class="divider1" vertical />
<n-divider class="divider5" vertical />
<header className="header flex items-center justify-between"> <header className="header flex items-center justify-between">
<div class="logo"> <div class="logo">
<img src="@/assets/image/logo.png" alt="logo" /> <img src="@/assets/image/logo.png" alt="logo" />
@ -356,7 +354,6 @@
</template> </template>
<script setup> <script setup>
import { NDivider } from "naive-ui";
import { import {
onUnmounted, onUnmounted,
ref, ref,
@ -368,12 +365,12 @@ import {
import { useHome } from "@/store/home/index.js"; import { useHome } from "@/store/home/index.js";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const state = reactive({ const state = reactive({
pageTitleNo: "", pageTitleNo: "",
}); });
const { currentTab } = useHome(); const { currentTab } = useHome();
const router = useRouter();
const route = useRoute(); const route = useRoute();
onBeforeMount(() => { onBeforeMount(() => {
state.pageTitleNo = route.query.titleNo; state.pageTitleNo = route.query.titleNo;
@ -446,19 +443,4 @@ const handleTabClick = (tab) => {
text-indent: 2em; // Adjust the value as needed for the desired indent text-indent: 2em; // Adjust the value as needed for the desired indent
line-height: 143px; line-height: 143px;
} }
.divider1 {
position: absolute;
z-index: 3;
left: 64px;
width: 1px;
height: 100%;
}
.divider5 {
position: absolute;
z-index: 3;
right: 60px;
width: 1px;
height: 100%;
}
</style> </style>

30
src/views/companyprofildetail/size768/index.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<n-divider class="divider1" vertical />
<n-divider class="divider5" vertical />
<header className="header flex items-center justify-between"> <header className="header flex items-center justify-between">
<div class="logo"> <div class="logo">
<img src="@/assets/image/logo.png" alt="logo" /> <img src="@/assets/image/logo.png" alt="logo" />
@ -356,7 +354,6 @@
</template> </template>
<script setup> <script setup>
import { NDivider } from "naive-ui";
import { import {
onUnmounted, onUnmounted,
ref, ref,
@ -366,22 +363,18 @@ import {
onBeforeMount, onBeforeMount,
} from "vue"; } from "vue";
import { useHome } from "@/store/home/index.js"; import { useHome } from "@/store/home/index.js";
import { useRoute } from "vue-router";
const state = reactive({ const state = reactive({
pageTitleNo: "", pageTitleNo: "",
}); });
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const { currentTab } = useHome(); const { currentTab } = useHome();
const route = useRoute();
onBeforeMount(() => { onBeforeMount(() => {
state.pageTitleNo = route.query.titleNo; state.pageTitleNo = route.query.titleNo;
}); });
onMounted(() => {}); onMounted(() => {});
onUnmounted(() => {}); onUnmounted(() => {});
const handleTabClick = (tab) => {
currentTab.value = tab;
router.push("/" + tab);
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -443,21 +436,4 @@ const handleTabClick = (tab) => {
line-height: 110px; line-height: 110px;
color: #10253e; color: #10253e;
} }
.divider1 {
position: absolute;
z-index: 3;
color: #eff1f6;
left: 116px;
width: 1px;
height: 100%;
}
.divider5 {
position: absolute;
z-index: 3;
color: #eff1f6;
right: 116px;
width: 1px;
height: 100%;
}
</style> </style>

44
src/views/home/size768/index.vue
View File

@ -1,8 +1,5 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<n-divider class="divider1" vertical />
<div class="divider3"></div>
<n-divider class="divider5" vertical />
<header className="header flex items-center justify-between"> <header className="header flex items-center justify-between">
<div class="logo"> <div class="logo">
<img src="@/assets/image/logo.png" alt="logo" /> <img src="@/assets/image/logo.png" alt="logo" />
@ -50,6 +47,11 @@
className="panel" className="panel"
style="background-color: rgba(248, 249, 255, 1)" style="background-color: rgba(248, 249, 255, 1)"
> >
<n-divider class="divider1" vertical />
<div class="divider2" style=""></div>
<div class="divider3" style=""></div>
<div class="divider4" style=""></div>
<n-divider class="divider5" vertical />
<div class="parallax-bg" style="margin-top: 210px"> <div class="parallax-bg" style="margin-top: 210px">
<img <img
ref="secondImage" ref="secondImage"
@ -68,6 +70,11 @@
</section> </section>
<section className="panel" style="background-color: #fff"> <section className="panel" style="background-color: #fff">
<n-divider class="divider1" vertical />
<div class="divider2" style=""></div>
<div class="divider3" style=""></div>
<div class="divider4" style=""></div>
<n-divider class="divider5" vertical />
<div class="parallax-bg" style="margin-top: 70px"></div> <div class="parallax-bg" style="margin-top: 70px"></div>
<div class="content3 mt-[348px]"> <div class="content3 mt-[348px]">
<div class="text-[#8B59F7] text-[40px]"> <div class="text-[#8B59F7] text-[40px]">
@ -79,7 +86,7 @@
</div> </div>
<n-marquee auto-fill> <n-marquee auto-fill>
<div style="display: flex" class="mt-[190px]"> <div style="display: flex" class="mt-[190px]">
<div class="text-[#455363] text-[40px] mr-[83px] w-[500px]"> <div class="text-[#455363] text-[40px] mr-[83px]">
<img <img
class="w-[475px] h-[475px]" class="w-[475px] h-[475px]"
src="@/assets/image/jj1.png" src="@/assets/image/jj1.png"
@ -97,7 +104,7 @@
{{ t("home.section3.features.data.desc") }} {{ t("home.section3.features.data.desc") }}
</div> </div>
</div> </div>
<div class="text-[#455363] text-[40px] mr-[83px] w-[500px]"> <div class="text-[#455363] text-[40px] mr-[83px]">
<img <img
class="w-[475px] h-[475px]" class="w-[475px] h-[475px]"
src="@/assets/image/jj2.png" src="@/assets/image/jj2.png"
@ -115,7 +122,7 @@
{{ t("home.section3.features.ai.desc") }} {{ t("home.section3.features.ai.desc") }}
</div> </div>
</div> </div>
<div class="text-[#455363] text-[40px] mr-[83px] w-[500px]"> <div class="text-[#455363] text-[40px] mr-[83px]">
<img <img
class="w-[475px] h-[475px]" class="w-[475px] h-[475px]"
src="@/assets/image/jj3.png" src="@/assets/image/jj3.png"
@ -133,7 +140,7 @@
{{ t("home.section3.features.cloud.desc") }} {{ t("home.section3.features.cloud.desc") }}
</div> </div>
</div> </div>
<div class="text-[#455363] text-[40px] mr-[83px] w-[500px]"> <div class="text-[#455363] text-[40px] mr-[83px]">
<img <img
class="w-[475px] h-[475px]" class="w-[475px] h-[475px]"
src="@/assets/image/jj4.png" src="@/assets/image/jj4.png"
@ -151,7 +158,7 @@
{{ t("home.section3.features.cooperation.desc") }} {{ t("home.section3.features.cooperation.desc") }}
</div> </div>
</div> </div>
<div class="text-[#455363] text-[40px] mr-[83px] w-[500px]"> <div class="text-[#455363] text-[40px] mr-[83px]">
<img <img
class="w-[475px] h-[475px]" class="w-[475px] h-[475px]"
src="@/assets/image/jj5.png" src="@/assets/image/jj5.png"
@ -175,6 +182,11 @@
</section> </section>
<section className="panel" style="background-color: #f8f9ff"> <section className="panel" style="background-color: #f8f9ff">
<n-divider class="divider1" vertical />
<div class="divider2" style=""></div>
<div class="divider3" style=""></div>
<div class="divider4" style=""></div>
<n-divider class="divider5" vertical />
<div class="parallax-bg" style="height: 100% !important"></div> <div class="parallax-bg" style="height: 100% !important"></div>
<div class="content4 mt-[408px]"> <div class="content4 mt-[408px]">
<div class="text-[#8B59F7] text-[40px]"> <div class="text-[#8B59F7] text-[40px]">
@ -1046,7 +1058,7 @@ watch(
.divider1 { .divider1 {
position: absolute; position: absolute;
z-index: 9; z-index: 3;
left: 22px; left: 22px;
width: 4px; width: 4px;
height: 100%; height: 100%;
@ -1054,7 +1066,7 @@ watch(
.divider3 { .divider3 {
position: absolute; position: absolute;
z-index: 9; z-index: 3;
left: 400px; left: 400px;
height: 100%; height: 100%;
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%); background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
@ -1064,7 +1076,7 @@ watch(
.divider5 { .divider5 {
position: absolute; position: absolute;
z-index: 9; z-index: 3;
right: 22px; right: 22px;
height: 100%; height: 100%;
} }
@ -1195,6 +1207,16 @@ watch(
pointer-events: none; pointer-events: none;
} }
.divider3,
.divider4 {
:deep(.n-divider) {
border-left: none;
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
background-size: 10px 60px;
background-repeat: repeat-y;
}
}
.container { .container {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);