|
|
@ -1,22 +1,26 @@ |
|
|
|
<template> |
|
|
|
<div :class="getClassName()"> |
|
|
|
<div class="alpha"> |
|
|
|
<div :class="noBtn ? 'alpha noani' : 'alpha ani'"> |
|
|
|
<div class="wrapo"> |
|
|
|
<p class="title">{{ title }}</p> |
|
|
|
<p class="en">{{ title_en }}</p> |
|
|
|
</div> |
|
|
|
<div id="service_liji_btn" class="btn" @click="toPage()">立即探索</div> |
|
|
|
<div id="service_liji_btn" class="btn" @click="toPage()" v-if="!noBtn"> |
|
|
|
立即探索 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { useSwiperStore } from '@/store' |
|
|
|
import { useSwiperStore, useCountStore } from '@/store' |
|
|
|
const countStore = useCountStore() |
|
|
|
const swiperStore = useSwiperStore() |
|
|
|
const props = defineProps({ |
|
|
|
title: String, |
|
|
|
i: String, |
|
|
|
title_en: String, |
|
|
|
noBtn: Boolean, |
|
|
|
}) |
|
|
|
const getClassName = () => { |
|
|
|
if (props.i == '1') { |
|
|
@ -45,13 +49,13 @@ const toPage = () => { |
|
|
|
index = 3 |
|
|
|
} |
|
|
|
if (props.i == '2') { |
|
|
|
index = 10 |
|
|
|
index = 11 |
|
|
|
} |
|
|
|
if (props.i == '3') { |
|
|
|
index = 5 |
|
|
|
} |
|
|
|
if (props.i == '4') { |
|
|
|
index = 8 |
|
|
|
index = 5 |
|
|
|
} |
|
|
|
if (props.i == '5') { |
|
|
|
index = 11 |
|
|
@ -59,7 +63,18 @@ const toPage = () => { |
|
|
|
if (props.i == '6') { |
|
|
|
index = 12 |
|
|
|
} |
|
|
|
swiperStore.swiper.slideTo(index, 1000, false) |
|
|
|
swiperStore.swiper.slideTo(index, 0, false) |
|
|
|
if (index == 3) { |
|
|
|
setTimeout(() => { |
|
|
|
countStore.countAdd() |
|
|
|
}) |
|
|
|
} |
|
|
|
if (index == 5) { |
|
|
|
setTimeout(() => { |
|
|
|
countStore.countAddI() |
|
|
|
}) |
|
|
|
} |
|
|
|
// 数字转动 |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
@ -144,7 +159,7 @@ const toPage = () => { |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.alpha:hover { |
|
|
|
.ani:hover { |
|
|
|
background-color: #283fe7; |
|
|
|
padding: 55px 0; |
|
|
|
opacity: 0.8; |
|
|
@ -153,4 +168,8 @@ const toPage = () => { |
|
|
|
top: 56%; |
|
|
|
} |
|
|
|
} |
|
|
|
.noani:hover { |
|
|
|
background-color: #283fe7; |
|
|
|
opacity: 0.8; |
|
|
|
} |
|
|
|
</style> |