3-13
This commit is contained in:
parent
ccb435ae15
commit
59a68745ca
15
.vscode/launch.json
vendored
Normal file
15
.vscode/launch.json
vendored
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
// 使用 IntelliSense 了解相关属性。
|
||||||
|
// 悬停以查看现有属性的描述。
|
||||||
|
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"type": "node-terminal",
|
||||||
|
"name": "Run Script: dev",
|
||||||
|
"request": "launch",
|
||||||
|
"command": "npm run dev",
|
||||||
|
"cwd": "${workspaceFolder}"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
44
assets/animate/animate.js
Normal file
44
assets/animate/animate.js
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
export function swiperAnimateCache() {
|
||||||
|
const allBoxes = window.document.documentElement.querySelectorAll('.ani')
|
||||||
|
for (var i = 0; i < allBoxes.length; i++) {
|
||||||
|
allBoxes[i].attributes['style']
|
||||||
|
? allBoxes[i].setAttribute('swiper-animate-style-cache', allBoxes[i].attributes['style'].value)
|
||||||
|
: allBoxes[i].setAttribute('swiper-animate-style-cache', ' ')
|
||||||
|
allBoxes[i].style.visibility = 'hidden'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function swiperAnimate(a) {
|
||||||
|
clearSwiperAnimate()
|
||||||
|
var b = a.slides[a.activeIndex].querySelectorAll('.ani')
|
||||||
|
for (var i = 0; i < b.length; i++) {
|
||||||
|
b[i].style.visibility = 'visible'
|
||||||
|
const effect = b[i].attributes['swiper-animate-effect']
|
||||||
|
? b[i].attributes['swiper-animate-effect'].value
|
||||||
|
: ''
|
||||||
|
b[i].className = b[i].className + ' ' + effect + ' ' + 'animated'
|
||||||
|
const duration = b[i].attributes['swiper-animate-duration']
|
||||||
|
? b[i].attributes['swiper-animate-duration'].value
|
||||||
|
: ''
|
||||||
|
// duration && style
|
||||||
|
const delay = b[i].attributes['swiper-animate-delay']
|
||||||
|
? b[i].attributes['swiper-animate-delay'].value
|
||||||
|
: ''
|
||||||
|
const style = b[i].attributes['style'].value + 'animation-duration:' + duration + ';-webkit-animation-duration:' + duration + ';' + 'animation-delay:' + delay + ';-webkit-animation-delay:' + delay + ';'
|
||||||
|
// delay && (style = style )
|
||||||
|
b[i].setAttribute('style', style)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function clearSwiperAnimate() {
|
||||||
|
var allBoxes = window.document.documentElement.querySelectorAll('.ani')
|
||||||
|
for (var i = 0; i < allBoxes.length; i++) {
|
||||||
|
allBoxes[i].attributes['swiper-animate-style-cache'] && allBoxes[i].setAttribute('style', allBoxes[i].attributes['swiper-animate-style-cache'].value)
|
||||||
|
allBoxes[i].style.visibility = 'hidden'
|
||||||
|
allBoxes[i].className = allBoxes[i].className.replace('animated', ' ')
|
||||||
|
const effectValue = allBoxes[i].attributes['swiper-animate-effect'].value
|
||||||
|
/* eslint-disable-next-line */
|
||||||
|
allBoxes[i].attributes['swiper-animate-effect'] && (effectValue, allBoxes[i].className = allBoxes[i].className.replace(effectValue, ' '))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
6
assets/animate/animate.min.css
vendored
Normal file
6
assets/animate/animate.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -5,3 +5,36 @@
|
|||||||
.box {
|
.box {
|
||||||
color: blue;
|
color: blue;
|
||||||
}
|
}
|
||||||
|
// 添加新的样式
|
||||||
|
.Adelay-02 {
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
animation-duration: 0.1s;
|
||||||
|
}
|
||||||
|
.Adelay-03 {
|
||||||
|
animation-delay: 0.3s;
|
||||||
|
animation-duration: 0.1s;
|
||||||
|
}
|
||||||
|
.Adelay-04 {
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
animation-duration: 0.1s;
|
||||||
|
}
|
||||||
|
.Adelay-05 {
|
||||||
|
animation-delay: 0.5s;
|
||||||
|
animation-duration: 0.1s;
|
||||||
|
}
|
||||||
|
.Adelay-1 {
|
||||||
|
animation-delay: 1s;
|
||||||
|
animation-duration: 0.1s;
|
||||||
|
}
|
||||||
|
.Adelay-15 {
|
||||||
|
animation-delay: 1.5s;
|
||||||
|
animation-duration: 0.1s;
|
||||||
|
}
|
||||||
|
.Adelay-2 {
|
||||||
|
animation-delay: 2s;
|
||||||
|
animation-duration: 0.1s;
|
||||||
|
}
|
||||||
|
.Adelay-25 {
|
||||||
|
animation-delay: 2.5s;
|
||||||
|
animation-duration: 0.1s;
|
||||||
|
}
|
||||||
|
|||||||
@ -2,22 +2,26 @@
|
|||||||
import { defineNuxtConfig } from 'nuxt/config'
|
import { defineNuxtConfig } from 'nuxt/config'
|
||||||
|
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
ssr: false,
|
ssr: false,
|
||||||
|
|
||||||
routeRules: {
|
routeRules: {
|
||||||
'/**': { ssr: false }
|
'/**': { ssr: false }
|
||||||
},
|
},
|
||||||
|
|
||||||
css: ['@/assets/css/common.scss'],
|
css: [
|
||||||
devtools: { enabled: true },
|
'swiper/css',
|
||||||
|
'swiper/css/mousewheel',
|
||||||
|
'@/assets/css/common.scss'
|
||||||
|
],
|
||||||
|
devtools: { enabled: true },
|
||||||
|
|
||||||
postcss: {
|
postcss: {
|
||||||
plugins: {
|
plugins: {
|
||||||
autoprefixer: {},
|
autoprefixer: {},
|
||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
modules: ['@pinia/nuxt', 'nuxt-icons'],
|
modules: ['@pinia/nuxt', 'nuxt-icons'],
|
||||||
compatibilityDate: '2025-03-12',
|
compatibilityDate: '2025-03-12',
|
||||||
})
|
})
|
||||||
9
package-lock.json
generated
9
package-lock.json
generated
@ -15,7 +15,8 @@
|
|||||||
"nuxt-icons": "^3.2.1",
|
"nuxt-icons": "^3.2.1",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
"swiper": "^11.2.5",
|
"swiper": "^11.2.5",
|
||||||
"vue-i18n": "^9.8.0"
|
"vue-i18n": "^9.8.0",
|
||||||
|
"vue-swiper-animate": "^1.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@nuxt/devtools": "latest",
|
"@nuxt/devtools": "latest",
|
||||||
@ -13525,6 +13526,12 @@
|
|||||||
"vue": "^3.2.0"
|
"vue": "^3.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/vue-swiper-animate": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-swiper-animate/-/vue-swiper-animate-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-QT4uSDYv2iYhgL883BQj9pXve9WTLNeVTJjrgw1XCekOmB60qDUf9tLXWfxYeNgWwGAz8tCOlgjpxjNeSaGk0w==",
|
||||||
|
"license": "ISC"
|
||||||
|
},
|
||||||
"node_modules/vue-types": {
|
"node_modules/vue-types": {
|
||||||
"version": "3.0.2",
|
"version": "3.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/vue-types/-/vue-types-3.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/vue-types/-/vue-types-3.0.2.tgz",
|
||||||
|
|||||||
@ -36,7 +36,8 @@
|
|||||||
"nuxt-icons": "^3.2.1",
|
"nuxt-icons": "^3.2.1",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
"swiper": "^11.2.5",
|
"swiper": "^11.2.5",
|
||||||
"vue-i18n": "^9.8.0"
|
"vue-i18n": "^9.8.0",
|
||||||
|
"vue-swiper-animate": "^1.0.0"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"cover 99.5%"
|
"cover 99.5%"
|
||||||
|
|||||||
535
pages/index.vue
535
pages/index.vue
@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="height: 100%;width: 100%;">
|
<div style="height: 100%;width: 100%;">
|
||||||
<!-- Swiper 容器 -->
|
<!-- Swiper 容器 -->
|
||||||
<swiper class="swiper-container h-full" :direction="'vertical'" :slides-per-view="1" :speed="700"
|
<swiper class="swiper-container h-full" v-bind="swiperOptions" @swiper="onSwiper" @slideChange="onSlideChange">
|
||||||
:mousewheel="true" :allow-touch-move="false" @swiper="onSwiper" @slideChange="onSlideChange">
|
|
||||||
<!-- 第一个滑块 -->
|
<!-- 第一个滑块 -->
|
||||||
<swiper-slide class="swiper-slide-a flex flex-col items-center justify-center text-white" :style="{
|
<swiper-slide class="swiper-slide-a flex flex-col items-center justify-center text-white" :style="{
|
||||||
backgroundImage: `url(${bgImage})`,
|
backgroundImage: `url(${bgImage})`,
|
||||||
@ -10,22 +9,35 @@
|
|||||||
backgroundRepeat: 'no-repeat',
|
backgroundRepeat: 'no-repeat',
|
||||||
backgroundSize: '100% 100%',
|
backgroundSize: '100% 100%',
|
||||||
}">
|
}">
|
||||||
<div class="text-xl tracking-wider font-light animate-fadeInUp">{{ $t('index_name') }}</div>
|
<div class="ani text-xl font-light tracking-[0.3em]" swiper-animate-effect="fadeInUp"
|
||||||
<div class="w-[45%] h-px bg-white my-5 animate-fadeInUp"></div>
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
|
||||||
<div class="text-3xl font-semibold animate-fadeInUp">{{ $t('index_main') }}</div>
|
{{ $t('index_name') }}
|
||||||
<div class="w-[45%] h-px bg-white my-5 animate-fadeInUp"></div>
|
</div>
|
||||||
<div class="text-lg font-light animate-fadeInUp">{{ $t('index_get_to') }}</div>
|
<div class="ani w-[45%] h-px bg-white my-5" swiper-animate-effect="fadeInUp"
|
||||||
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
|
||||||
|
</div>
|
||||||
|
<div class="text-3xl font-semibold ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
|
||||||
|
swiper-animate-delay="0.4s">{{ $t('index_main') }}</div>
|
||||||
|
<div class="w-[45%] h-px bg-white my-5 ani" swiper-animate-effect="fadeInUp"
|
||||||
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
|
||||||
|
<div class="text-lg font-light ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
|
||||||
|
swiper-animate-delay="0.3s">{{ $t('index_get_to') }}</div>
|
||||||
<div class="array" style=" margin-top: 50px;">
|
<div class="array" style=" margin-top: 50px;">
|
||||||
<img style="width: 50px;height: 50px;" src="/images/group9.png">
|
<img style="width: 50px;height: 50px;" src="/images/group9.png">
|
||||||
</div>
|
</div>
|
||||||
<!-- 社交图标 -->
|
<!-- 社交图标 -->
|
||||||
<div class="absolute bottom-[42px] w-full">
|
<div class="absolute bottom-[42px] w-full ani" swiper-animate-effect="fadeInUp"
|
||||||
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
|
||||||
<div class="flex justify-center w-full">
|
<div class="flex justify-center w-full">
|
||||||
<img @click="shareToInstagram" src="/images/group11.png"
|
<img @click="shareToInstagram" src="/images/group11.png"
|
||||||
class="w-[30px] h-[30px] cursor-pointer">
|
class="w-[30px] h-[30px] cursor-pointer">
|
||||||
<span class="mx-[17px] border-r-2 border-white h-[30px] mb-[-12px]"></span>
|
<span class="mx-[17px] border-r-2 border-white h-[30px] mb-[-12px]"></span>
|
||||||
<img @click="shareToYoutube" src="/images/group14.png" class="w-[30px] h-[30px] cursor-pointer">
|
<img @click="shareToYoutube" src="/images/group14.png" class="w-[30px] h-[30px] cursor-pointer">
|
||||||
<!-- 按相同方式添加其他社交图标 -->
|
<span class="mx-[17px] border-r-2 border-white h-[30px] mb-[-12px]"></span>
|
||||||
|
<img @click="shareToInstagram" src="/images/group13.png"
|
||||||
|
class="w-[30px] h-[30px] cursor-pointer">
|
||||||
|
<span class="mx-[17px] border-r-2 border-white h-[30px] mb-[-12px]"></span>
|
||||||
|
<img @click="shareToYoutube" src="/images/group12.png" class="w-[30px] h-[30px] cursor-pointer">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 导航链接 -->
|
<!-- 导航链接 -->
|
||||||
@ -40,29 +52,398 @@
|
|||||||
</div>
|
</div>
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
|
|
||||||
<!-- 按相同方式添加其他滑块 -->
|
<!-- 第二个滑块 -->
|
||||||
|
<swiper-slide class="swiper-slide-a text-white" :style="{
|
||||||
|
backgroundImage: `url(${bgImage2})`,
|
||||||
|
backgroundPosition: 'center center',
|
||||||
|
backgroundRepeat: 'no-repeat',
|
||||||
|
backgroundSize: '100% 100%',
|
||||||
|
height: '100%'
|
||||||
|
}">
|
||||||
|
<div class="px-[150px]">
|
||||||
|
<div class="flex items-center text-left">
|
||||||
|
<div class="w-1/2">
|
||||||
|
<h2 class="text-3xl t1 inline-block ani" swiper-animate-effect="fadeInUp"
|
||||||
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ $t('index_m1') }}</h2>
|
||||||
|
<h4 class="text-lg mt-10 leading-[35px] ani" swiper-animate-effect="fadeInUp"
|
||||||
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ $t('index_m2') }}</h4>
|
||||||
|
<div class="w-[18%] h-[2px] bg-white my-5 ani" swiper-animate-effect="fadeInUp"
|
||||||
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s"></div>
|
||||||
|
<div class="flex items-center ani" swiper-animate-effect="fadeInUp"
|
||||||
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
|
||||||
|
<NuxtLink to="/content" class="text-white">{{ $t('index_m3') }}</NuxtLink>
|
||||||
|
<img src="/images/group7.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-1/2 text-center ani" swiper-animate-effect="fadeInUp"
|
||||||
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
|
||||||
|
<img src="/images/maskgroup.png" class="w-[400px] mx-auto">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full h-px bg-white my-10"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex w-full justify-center">
|
||||||
|
<div class="w-[205px] ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||||
|
swiper-animate-delay="0.1s">
|
||||||
|
<h4 class="t2 text-xl font-semibold">{{ $t('index_m4') }}</h4>
|
||||||
|
<div class="mt-[15px] leading-[26px] tracking-[1px]">{{ $t('index_m4_1') }}</div>
|
||||||
|
</div>
|
||||||
|
<span class="mx-[60px] -mb-3 border-r-2 border-white h-[145px] inline-block ani"
|
||||||
|
swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||||
|
swiper-animate-delay="0.1s"></span>
|
||||||
|
<div class="w-[205px] ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||||
|
swiper-animate-delay="0.1s">
|
||||||
|
<h4 class="t2 text-xl font-semibold">{{ $t('index_m5') }}</h4>
|
||||||
|
<div class="mt-[15px] leading-[26px] tracking-[1px]">{{ $t('index_m5_1') }}</div>
|
||||||
|
</div>
|
||||||
|
<span class="mx-[60px] -mb-3 border-r-2 border-white h-[145px] inline-block ani"
|
||||||
|
swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||||
|
swiper-animate-delay="0.1s"></span>
|
||||||
|
<div class="w-[205px] ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||||
|
swiper-animate-delay="0.1s">
|
||||||
|
<h4 class="t2 text-xl font-semibold">{{ $t('index_m6') }}</h4>
|
||||||
|
<div class="mt-[15px] leading-[26px] tracking-[1px]">{{ $t('index_m6_1') }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="array absolute bottom-[50px]">
|
||||||
|
<img class="w-[50px] h-[50px]" src="/images/group9.png" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="absolute bottom-42 px-4 flex justify-between items-center right-2 ">
|
||||||
|
<div class="float-left flex">
|
||||||
|
<img src="/images/group191.png" class="h-full mt-[10px]">
|
||||||
|
<span class="ml-2 box2ybs1">{{ $t('index_m7') }}</span>
|
||||||
|
<span class="mx-4 box2ybs2"></span>
|
||||||
|
</div>
|
||||||
|
<div class="float-right text-center">
|
||||||
|
<img @click="scrollToTop" src="/images/group97.png" class="w-[35px] h-[35px] cursor-pointer">
|
||||||
|
<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
||||||
|
<img @click="shareToInstagram" src="/images/group11.png"
|
||||||
|
class="w-[35px] h-[35px] cursor-pointer">
|
||||||
|
<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
||||||
|
<img @click="shareToYoutube" src="/images/group14.png" class="w-[35px] h-[35px] cursor-pointer">
|
||||||
|
<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
||||||
|
<img @click="shareToFacebook" src="/images/group13.png"
|
||||||
|
class="w-[35px] h-[35px] cursor-pointer">
|
||||||
|
<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
||||||
|
<img @click="shareToX" src="/images/group12.png" class="w-[35px] h-[35px] cursor-pointer">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</swiper-slide>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 第三个滑块 -->
|
||||||
|
<swiper-slide class="swiper-slide-a" :style="{
|
||||||
|
height: '100%'
|
||||||
|
}">
|
||||||
|
<h3 class="t3 text-2xl font-semibold ani" swiper-animate-effect="fadeInUp"
|
||||||
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ $t('index_s1') }}</h3>
|
||||||
|
<div class="w-1/2 mt-[30px] text-sm text-[#606060] text-center ani" swiper-animate-effect="fadeInUp"
|
||||||
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
|
||||||
|
{{ $t('index_s2') }}
|
||||||
|
</div>
|
||||||
|
<div class="px-[150px] py-5">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="relative ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||||
|
swiper-animate-delay="0.1s">
|
||||||
|
<img src="/images/group160.png" class="w-[80%] mx-auto">
|
||||||
|
<div class="absolute left-[65px] bottom-[20px] text-xl text-white">
|
||||||
|
{{ $t('index_s3') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="relative ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||||
|
swiper-animate-delay="0.1s">
|
||||||
|
<img src="/images/group161.png" class="w-[80%] mx-auto">
|
||||||
|
<div class="absolute left-[65px] bottom-[20px] text-xl text-white">
|
||||||
|
{{ $t('index_s4') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="relative ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||||
|
swiper-animate-delay="0.1s">
|
||||||
|
<img src="/images/group162.png" class="w-[80%] mx-auto">
|
||||||
|
<div class="absolute left-[65px] bottom-[20px] text-xl text-white">
|
||||||
|
{{ $t('index_s5') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full h-px bg-[#1C1C1C] my-5"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||||
|
swiper-animate-delay="0.1s">
|
||||||
|
<NuxtLink to="/content" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
|
||||||
|
<img src="/images/group7-1.png" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="array absolute bottom-[50px]">
|
||||||
|
<img class="w-[50px] h-[50px]" src="/images/group40.png" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="absolute bottom-42 px-4 flex justify-between items-center right-2">
|
||||||
|
<div class="float-left flex">
|
||||||
|
<img src="/images/group194.png" class="h-full mt-[10px]">
|
||||||
|
<div style="width: 100px;">
|
||||||
|
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_contact') }}
|
||||||
|
</div>
|
||||||
|
<div class="box3zx1"></div>
|
||||||
|
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_news') }}</div>
|
||||||
|
<div class="box3zx1"></div>
|
||||||
|
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_about') }}
|
||||||
|
</div>
|
||||||
|
<div class="box3zx1"></div>
|
||||||
|
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_services') }}
|
||||||
|
</div>
|
||||||
|
<div class="box3zx1"></div>
|
||||||
|
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_clients') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="mx-4 box2ybs3"></span>
|
||||||
|
</div>
|
||||||
|
<div class="float-right text-center">
|
||||||
|
<img @click="scrollToTop" src="/images/group97-1.png" class="w-[35px] h-[35px] cursor-pointer">
|
||||||
|
<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
|
||||||
|
<img @click="shareToInstagram" src="/images/group11-1.png"
|
||||||
|
class="w-[35px] h-[35px] cursor-pointer">
|
||||||
|
<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
|
||||||
|
<img @click="shareToYoutube" src="/images/group14-1.png"
|
||||||
|
class="w-[35px] h-[35px] cursor-pointer">
|
||||||
|
<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
|
||||||
|
<img @click="shareToFacebook" src="/images/group13-1.png"
|
||||||
|
class="w-[35px] h-[35px] cursor-pointer">
|
||||||
|
<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
|
||||||
|
<img @click="shareToX" src="/images/group12-1.png" class="w-[35px] h-[35px] cursor-pointer">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</swiper-slide>
|
||||||
|
<!-- 第四个滑块 -->
|
||||||
|
<swiper-slide class="swiper-slide-a" :style="{
|
||||||
|
backgroundImage: `url('/images/group159.png')`,
|
||||||
|
backgroundPosition: 'center center',
|
||||||
|
backgroundRepeat: 'no-repeat',
|
||||||
|
backgroundSize: '100% 100%',
|
||||||
|
height: '100%',
|
||||||
|
color: '#000000',
|
||||||
|
textAlign: 'left'
|
||||||
|
}">
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<div class="w-[30%]">
|
||||||
|
<h2 class="ani t4 text-3xl" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
|
||||||
|
swiper-animate-delay="0.1s">{{ $t('index_a1') }}</h2>
|
||||||
|
<div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
|
||||||
|
swiper-animate-delay="0.1s"
|
||||||
|
style="line-height: 25px;margin-top: 30px;color: #606060;font-size: 14px;">{{ $t('index_a2')
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
|
||||||
|
swiper-animate-delay="0.1s"
|
||||||
|
style="width: 100%; height: 1px; background-color: #F1F1F1; margin: 20px auto;"></div>
|
||||||
|
<div class="ani flex items-center justify-end" swiper-animate-effect="fadeInLeft"
|
||||||
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
|
||||||
|
<div>
|
||||||
|
<NuxtLink to="/content" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img src="/images/group6.png" class="w-5 ml-[5px]">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-[45%]"></div>
|
||||||
|
</div>
|
||||||
|
<div class="box2yb absolute px-4 bottom-42 right-2">
|
||||||
|
<div class="box2yb191 float-left pr-[14px] flex">
|
||||||
|
<img src="/images/group191.png" class="h-full mt-[10px]">
|
||||||
|
<span class="box2ybs1">{{ $t('index_m7') }}</span>
|
||||||
|
<span class="box2ybs2 border-r-2 border-[#DEDEDE]"></span>
|
||||||
|
</div>
|
||||||
|
<div class="box1ybi float-right">
|
||||||
|
<img class="back-to-top py-[6px] cursor-pointer" src="/images/group97.png" @click="scrollToTop">
|
||||||
|
<div class="box1ybz"></div>
|
||||||
|
<img @click="shareToInstagram" src="/images/group11.png" class="py-[6px] cursor-pointer">
|
||||||
|
<div class="box1ybz"></div>
|
||||||
|
<img @click="shareToYoutube" src="/images/group14.png" class="py-[6px] cursor-pointer">
|
||||||
|
<div class="box1ybz"></div>
|
||||||
|
<img @click="shareToFacebook" src="/images/group13.png" class="py-[6px] cursor-pointer">
|
||||||
|
<div class="box1ybz"></div>
|
||||||
|
<img @click="shareToX" src="/images/group12.png" class="py-[6px] cursor-pointer">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="array absolute bottom-[50px]">
|
||||||
|
<img class="w-[50px] h-[50px]" src="/images/group40.png">
|
||||||
|
</div>
|
||||||
|
</swiper-slide>
|
||||||
|
<!--第五个滑块-->
|
||||||
|
<swiper-slide class="swiper-slide-a">
|
||||||
|
<div class="flex justify-center items-center w-full">
|
||||||
|
<div class="w-[40%] text-right">
|
||||||
|
<img id="img1" src="/images/Group157.png" class="w-[80%] border-r-[10px] border-[#214ADB] inline-block">
|
||||||
|
</div>
|
||||||
|
<div class="w-[44%] text-left pl-5">
|
||||||
|
<h2 class="text-2xl font-bold">{{ $t('index_n1') }}</h2>
|
||||||
|
<div class="my-[20px]">{{ $t('index_n2') }}</div>
|
||||||
|
<div class="h-[1px] w-[150px] bg-[#0c1923]"></div>
|
||||||
|
<div class="flex mt-[10px]">
|
||||||
|
<div><NuxtLink to="/content" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink></div>
|
||||||
|
<div>
|
||||||
|
<img src="/images/group7-1.png" class="w-5 ml-[5px]">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="news_padd flex items-center">
|
||||||
|
<img id="swipen_next" src="/images/group10.png" class="w-[30px] cursor-pointer" @click="nextNews">
|
||||||
|
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews" >
|
||||||
|
<swiper-slide v-for="(item, index) in newsList" :key="index" :virtualIndex="index" class="swiper-wrapper w-full">
|
||||||
|
<!-- 这里可以使用v-for循环渲染新闻列表 -->
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="text-center">
|
||||||
|
<h3 class="font-semibold text-2xl">
|
||||||
|
<a :href="item.url" target="_blank" class="text-[#0c1923]">
|
||||||
|
{{ item.title }}
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
<h5 class="text-[#606060] mt-[25px] leading-[25px]">
|
||||||
|
<a :href="item.url" target="_blank" class="text-[#0c1923]">
|
||||||
|
{{ item.description }}
|
||||||
|
</a>
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper>
|
||||||
|
<img id="swipen_prev" src="/images/group9-1.png" class="w-[30px] cursor-pointer" @click="prevNews">
|
||||||
|
</div>
|
||||||
|
<div class="w-full h-[1px] bg-black mt-10"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute right-[10px]">
|
||||||
|
<div class="box2yb191 float-left pr-[14px] flex">
|
||||||
|
<img src="/images/group194.png" class="h-full mt-[10px]">
|
||||||
|
<span class="box2ybs4 text-[#175FCB]">Navigation</span>
|
||||||
|
<span class="box2ybs5 border-r-[2px] border-[#A8CBFF]"></span>
|
||||||
|
</div>
|
||||||
|
<div class="box1ybi float-right">
|
||||||
|
<img class="back-to-top py-[6px] cursor-pointer" src="/images/group97-1.png" @click="scrollToTop">
|
||||||
|
<div class="box1ybz"></div>
|
||||||
|
<img @click="shareToInstagram" src="/images/group11-1.png" class="py-[6px] cursor-pointer">
|
||||||
|
<div class="box1ybz"></div>
|
||||||
|
<img @click="shareToYoutube" src="/images/group14-1.png" class="py-[6px] cursor-pointer">
|
||||||
|
<div class="box1ybz"></div>
|
||||||
|
<img @click="shareToFacebook" src="/images/group13-1.png" class="py-[6px] cursor-pointer">
|
||||||
|
<div class="box1ybz"></div>
|
||||||
|
<img @click="shareToX" src="/images/group12-1.png" class="py-[6px] cursor-pointer">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</swiper-slide>
|
||||||
</swiper>
|
</swiper>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||||
|
import { nextTick, ref } from 'vue'
|
||||||
import 'swiper/css'
|
import 'swiper/css'
|
||||||
import 'swiper/css/pagination'
|
import { Mousewheel, Navigation } from 'swiper/modules'
|
||||||
|
import 'swiper/css/mousewheel'
|
||||||
|
import 'swiper/css/navigation'
|
||||||
|
import * as swiperAni from '@/assets/animate/animate.js'
|
||||||
|
|
||||||
// 导入背景图片
|
// 导入背景图片
|
||||||
const bgImage = 'images/Group157.png'
|
const bgImage = 'images/Group157.png'
|
||||||
|
|
||||||
|
// 添加第二个背景图片
|
||||||
|
const bgImage2 = '/images/Group157.png'
|
||||||
|
|
||||||
// Swiper实例
|
// Swiper实例
|
||||||
let swiperInstance: any = null
|
let swiperInstance: any = null
|
||||||
|
|
||||||
|
// 新闻轮播实例
|
||||||
|
let newsSwiper: any = null
|
||||||
|
|
||||||
|
// 新闻数据
|
||||||
|
const newsList = ref([
|
||||||
|
{
|
||||||
|
title: '新闻标题1',
|
||||||
|
description: '新闻描述内容1，这里是新闻的简短描述。',
|
||||||
|
url: '/news/1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '新闻标题2',
|
||||||
|
description: '新闻描述内容2，这里是新闻的简短描述。',
|
||||||
|
url: '/news/2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '新闻标题3',
|
||||||
|
description: '新闻描述内容3，这里是新闻的简短描述。',
|
||||||
|
url: '/news/3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '新闻标题4',
|
||||||
|
description: '新闻描述内容4，这里是新闻的简短描述。',
|
||||||
|
url: '/news/4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '新闻标题5',
|
||||||
|
description: '新闻描述内容5，这里是新闻的简短描述。',
|
||||||
|
url: '/news/5'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
// 新闻轮播控制
|
||||||
|
const nextNews = () => {
|
||||||
|
if (newsSwiper) {
|
||||||
|
newsSwiper.slideNext()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const prevNews = () => {
|
||||||
|
if (newsSwiper) {
|
||||||
|
newsSwiper.slidePrev()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Swiper配置
|
||||||
|
const swiperOptions = {
|
||||||
|
direction: 'vertical',
|
||||||
|
slidesPerView: 1,
|
||||||
|
speed: 700,
|
||||||
|
mousewheel: true,
|
||||||
|
loop: false,
|
||||||
|
modules: [Mousewheel],
|
||||||
|
}
|
||||||
|
// Swiper配置
|
||||||
|
const swiperOptionsNews = {
|
||||||
|
direction: 'horizontal',
|
||||||
|
slidesPerView: 1,
|
||||||
|
speed: 700,
|
||||||
|
mousewheel: true,
|
||||||
|
loop: false,
|
||||||
|
modules: [Mousewheel, Navigation],
|
||||||
|
navigation: {
|
||||||
|
nextEl: '#swipen_next',
|
||||||
|
prevEl: '#swipen_prev',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
const onSwiperNews = (swiper: any) => {
|
||||||
|
newsSwiper = swiper
|
||||||
|
}
|
||||||
const onSwiper = (swiper: any) => {
|
const onSwiper = (swiper: any) => {
|
||||||
swiperInstance = swiper
|
swiperInstance = swiper
|
||||||
|
// 初始化完成开始动画
|
||||||
|
nextTick(() => {
|
||||||
|
swiperAni.swiperAnimateCache(swiper); // 隐藏动画元素
|
||||||
|
swiperAni.swiperAnimate(swiper); // 初始化完成开始动画
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSlideChange = () => {
|
const onSlideChange = () => {
|
||||||
// 处理滑块切换
|
// 处理滑块切换
|
||||||
|
if (swiperInstance) {
|
||||||
|
//console.log('slide change')
|
||||||
|
setTimeout(() => {
|
||||||
|
swiperAni.swiperAnimate(swiperInstance); // 每个slide开始切换时也运行当前slide动画
|
||||||
|
}, 300)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 社交分享功能
|
// 社交分享功能
|
||||||
@ -81,9 +462,18 @@ const shareToFacebook = () => {
|
|||||||
const shareToX = () => {
|
const shareToX = () => {
|
||||||
// 实现X/Twitter分享
|
// 实现X/Twitter分享
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 添加回到顶部功能
|
||||||
|
const scrollToTop = () => {
|
||||||
|
if (swiperInstance) {
|
||||||
|
swiperInstance.slideTo(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import "@/assets/animate/animate.min.css";
|
||||||
|
|
||||||
.swiper-slide-a {
|
.swiper-slide-a {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
@ -114,18 +504,141 @@ const shareToX = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes start {
|
@keyframes start {
|
||||||
|
|
||||||
0%,
|
0%,
|
||||||
30% {
|
30% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translate(0, -8px);
|
transform: translate(0, -8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
60% {
|
60% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translate(0, 0);
|
transform: translate(0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translate(0, 10px);
|
transform: translate(0, 10px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes zoomIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale3d(0.3, 0.3, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-zoomIn {
|
||||||
|
animation: zoomIn 0.5s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t1::after {
|
||||||
|
content: '';
|
||||||
|
margin-top: -13px;
|
||||||
|
width: 205px;
|
||||||
|
height: 20px;
|
||||||
|
background: #175FCB;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t2::after {
|
||||||
|
content: '';
|
||||||
|
width: 100px;
|
||||||
|
height: 20px;
|
||||||
|
background: #175FCB;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: -13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2ybs1 {
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
transform: rotate(360deg);
|
||||||
|
padding-right: 20px;
|
||||||
|
color: #DEDEDE;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2ybs2 {
|
||||||
|
margin-left: -14px;
|
||||||
|
display: inline-block;
|
||||||
|
height: 224px;
|
||||||
|
margin-top: 10px;
|
||||||
|
border-right: 2px solid #DEDEDE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2ybs3 {
|
||||||
|
margin-left: -7px;
|
||||||
|
border-right: 2px solid #A8CBFF;
|
||||||
|
display: inline-block;
|
||||||
|
height: 224px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.box2ybs4 {
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
transform: rotate(360deg);
|
||||||
|
padding-right: 20px;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.box2ybs5 {
|
||||||
|
margin-left: -14px;
|
||||||
|
display: inline-block;
|
||||||
|
height: 224px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.box3zx1 {
|
||||||
|
width: 33px;
|
||||||
|
height: 2px;
|
||||||
|
border-top: solid #A8CBFF;
|
||||||
|
margin: 15px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t3::after {
|
||||||
|
content: '';
|
||||||
|
width: 350px;
|
||||||
|
height: 20px;
|
||||||
|
background: #A8CBFF;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: -13px;
|
||||||
|
}
|
||||||
|
.t4::after {
|
||||||
|
content: '';
|
||||||
|
width: 100px;
|
||||||
|
height: 20px;
|
||||||
|
background: #A3C8FF;
|
||||||
|
display: block;
|
||||||
|
margin-top: -13px;
|
||||||
|
}
|
||||||
|
// 如果你有其他需要不同延迟的元素，可以添加更多类
|
||||||
|
.delay-700 {
|
||||||
|
animation-delay: 700ms;
|
||||||
|
}
|
||||||
|
.t5::after {
|
||||||
|
content: '';
|
||||||
|
width: 100px;
|
||||||
|
height: 20px;
|
||||||
|
background: #214ADB;
|
||||||
|
display: block;
|
||||||
|
margin-top: -13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box1ybz {
|
||||||
|
width: 33px;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #A8CBFF;
|
||||||
|
margin: 2px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news_padd {
|
||||||
|
margin-top: 20px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -35,7 +35,7 @@ export default {
|
|||||||
index_a2: '河南导航贸易有限公司是一家专业的进出口贸易企业，主要从事二手采矿设备、配件和部件、粮食和油料及上游原材料、以及化工、造纸和磨具等原材料的进出口业务。公司总部位于河南省郑州市。作为一家具有国资背景的企业，我们凭借丰富的行业经验和专业的团队，在矿业和工程行业赢得了广泛赞誉。',
|
index_a2: '河南导航贸易有限公司是一家专业的进出口贸易企业，主要从事二手采矿设备、配件和部件、粮食和油料及上游原材料、以及化工、造纸和磨具等原材料的进出口业务。公司总部位于河南省郑州市。作为一家具有国资背景的企业，我们凭借丰富的行业经验和专业的团队，在矿业和工程行业赢得了广泛赞誉。',
|
||||||
|
|
||||||
// 首页5
|
// 首页5
|
||||||
index_n1: '新闻咨询',
|
index_n1: '新闻资讯',
|
||||||
index_n2: '我们的最新焦点故事',
|
index_n2: '我们的最新焦点故事',
|
||||||
|
|
||||||
// about
|
// about
|
||||||
|
|||||||
@ -8,6 +8,9 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
screens: {
|
screens: {
|
||||||
},
|
},
|
||||||
|
transitionDelay: {
|
||||||
|
'5000': '5000ms',
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user