141 lines
3.0 KiB
Vue
141 lines
3.0 KiB
Vue
<template>
|
|
<div class="home-carousel">
|
|
<transition
|
|
v-for="(carousel, index) in carouselData"
|
|
:key="carousel.title"
|
|
name="fade"
|
|
>
|
|
<div
|
|
v-show="index === current"
|
|
class="home-carousel-item"
|
|
:class="{ 'home-carousel-item-current': index === current }"
|
|
>
|
|
<div class="image-wrapper">
|
|
<img
|
|
:src="carousel.imageurl"
|
|
alt=""
|
|
style="width: 100%;height: 100%;cursor: pointer;"
|
|
@click="$router.push(carousel.twLink)"
|
|
>
|
|
</div>
|
|
<transition name="text">
|
|
<div
|
|
class="home-carousel-text"
|
|
v-show="index === current"
|
|
>
|
|
<p
|
|
v-for="(textEn, i) in carousel.titleEnglish.split('\n')"
|
|
:key="'text-en-' + i"
|
|
class="text-en"
|
|
>
|
|
<span>{{ textEn }}</span>
|
|
</p>
|
|
<p
|
|
v-for="(textCn, i) in carousel.titleChinese.split('\n')"
|
|
:key="'text-cn-' + i"
|
|
class="text-cn"
|
|
>
|
|
<span>{{ textCn }}</span>
|
|
</p>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
carouselData: { type: Array, required: true },
|
|
current: { type: Number, required: true },
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home-carousel {
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.home-carousel-item {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.home-carousel-item-current {
|
|
z-index: 1;
|
|
}
|
|
@keyframes FadeLeave {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: scale(0.83);
|
|
}
|
|
100% {
|
|
opacity: 0.3;
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
.fade-enter-active {
|
|
transition: all 1500ms cubic-bezier(0.25, 1, 0.5, 1);
|
|
opacity: 1;
|
|
}
|
|
.fade-enter {
|
|
opacity: 0;
|
|
}
|
|
.fade-leave-active {
|
|
transition: all 1500ms cubic-bezier(0.25, 1, 0.5, 1);
|
|
opacity: 1;
|
|
}
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
.home-carousel-text {
|
|
--baseSize: calc(min(1080rem, 100vh) / 1080);
|
|
position: absolute;
|
|
left: calc(50% - 841rem);
|
|
/* top: calc(var(--baseSize) * 640); 原版*/
|
|
top: calc(var(--baseSize) * 760);
|
|
transform: translateY(-100%);
|
|
}
|
|
.home-carousel-text p {
|
|
margin: calc(var(--baseSize) * 24) 0;
|
|
font-size: calc(var(--baseSize) * 40);
|
|
line-height: 1;
|
|
color: #ffffff;
|
|
overflow: hidden;
|
|
}
|
|
.home-carousel-text p.text-en {
|
|
font-family: MicrosoftYaHeiSemibold;
|
|
font-size: 40rem;
|
|
}
|
|
.home-carousel-text p.text-cn {
|
|
font-family: MicrosoftYaHeiLight;
|
|
font-size: 40rem;
|
|
}
|
|
.home-carousel-text p.text-en + p.text-cn {
|
|
margin-top: calc(var(--baseSize) * 56);
|
|
}
|
|
.home-carousel-text p span {
|
|
display: inline-block;
|
|
transform: translateY(0);
|
|
}
|
|
.text-enter-active {
|
|
transition: all 1000ms 500ms;
|
|
}
|
|
.text-enter-active p span {
|
|
transition: all 1000ms 500ms;
|
|
transform: translateY(0);
|
|
}
|
|
.text-enter p span {
|
|
transform: translateY(100%);
|
|
}
|
|
</style>
|