大屏处理
This commit is contained in:
maojiacai
324
src/views/recruitment/components/carousel.vue
Normal file
324
src/views/recruitment/components/carousel.vue
Normal file
@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div
|
||||
class="swiper-slide"
|
||||
:class="getSlideClass(index)"
|
||||
v-for="(slide, index) in slides"
|
||||
:key="index"
|
||||
:style="getSlideStyle(index)"
|
||||
>
|
||||
<!-- 使用具名插槽传递每个slide的内容和索引 -->
|
||||
<div class="slide-content">
|
||||
<div class="slide-image">
|
||||
<slot name="slide" :slide="slide" :index="index" />
|
||||
</div>
|
||||
<!-- <div class="slide-text">-->
|
||||
<!-- <h3>{{ slide.title }}</h3>-->
|
||||
<!-- <p>{{ slide.description }}</p>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="swiper-controls">-->
|
||||
<!-- <button class="swiper-button" @click="prevSlide">←</button>-->
|
||||
<!-- <button class="swiper-button" @click="nextSlide">→</button>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="swiper-pagination">-->
|
||||
<!-- <div-->
|
||||
<!-- class="pagination-bullet"-->
|
||||
<!-- v-for="(slide, index) in slides"-->
|
||||
<!-- :key="index"-->
|
||||
<!-- :class="{ active: currentIndex === index }"-->
|
||||
<!-- @click="goToSlide(index)"-->
|
||||
<!-- ></div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Carousel',
|
||||
props: {
|
||||
slides: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [
|
||||
{
|
||||
title: '左侧卡片',
|
||||
description: '淡入效果从左侧进入',
|
||||
image: 'https://via.placeholder.com/600x400/3498db/ffffff?text=Left'
|
||||
},
|
||||
{
|
||||
title: '中间卡片',
|
||||
description: '淡入效果居中放大',
|
||||
image: 'https://via.placeholder.com/600x400/e74c3c/ffffff?text=Center'
|
||||
},
|
||||
{
|
||||
title: '右侧卡片',
|
||||
description: '淡入效果从右侧进入',
|
||||
image: 'https://via.placeholder.com/600x400/2ecc71/ffffff?text=Right'
|
||||
}
|
||||
]
|
||||
},
|
||||
autoPlayInterval: {
|
||||
type: Number,
|
||||
default: 5000
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const currentIndex = ref(0)
|
||||
const autoPlayTimer = ref(null)
|
||||
|
||||
const getSlideClass = (index) => {
|
||||
const diff = index - currentIndex.value
|
||||
if (diff === 0) return 'center'
|
||||
if (diff === -1 || (currentIndex.value === 0 && index === props.slides.length - 1)) return 'left'
|
||||
if (diff === 1 || (currentIndex.value === props.slides.length - 1 && index === 0)) return 'right'
|
||||
return ''
|
||||
}
|
||||
|
||||
const getSlideStyle = (index) => {
|
||||
const diff = index - currentIndex.value
|
||||
if (
|
||||
Math.abs(diff) > 1 &&
|
||||
!(currentIndex.value === 0 && index === props.slides.length - 1) &&
|
||||
!(currentIndex.value === props.slides.length - 1 && index === 0)
|
||||
) {
|
||||
return { display: 'none' }
|
||||
}
|
||||
return {}
|
||||
}
|
||||
|
||||
const prevSlide = () => {
|
||||
currentIndex.value = (currentIndex.value - 1 + props.slides.length) % props.slides.length
|
||||
resetAutoPlay()
|
||||
}
|
||||
|
||||
const nextSlide = () => {
|
||||
currentIndex.value = (currentIndex.value + 1) % props.slides.length
|
||||
resetAutoPlay()
|
||||
}
|
||||
|
||||
const goToSlide = (index) => {
|
||||
currentIndex.value = index
|
||||
resetAutoPlay()
|
||||
}
|
||||
|
||||
const startAutoPlay = () => {
|
||||
pauseAutoPlay()
|
||||
autoPlayTimer.value = window.setInterval(() => {
|
||||
nextSlide()
|
||||
}, props.autoPlayInterval)
|
||||
}
|
||||
|
||||
const pauseAutoPlay = () => {
|
||||
if (autoPlayTimer.value) {
|
||||
clearInterval(autoPlayTimer.value)
|
||||
autoPlayTimer.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const resetAutoPlay = () => {
|
||||
pauseAutoPlay()
|
||||
startAutoPlay()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// const container = document.querySelector('.swiper-container')
|
||||
// if (container) {
|
||||
// container.addEventListener('mouseenter', pauseAutoPlay)
|
||||
// container.addEventListener('mouseleave', startAutoPlay)
|
||||
// }
|
||||
// startAutoPlay()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
const container = document.querySelector('.swiper-container')
|
||||
if (container) {
|
||||
container.removeEventListener('mouseenter', pauseAutoPlay)
|
||||
container.removeEventListener('mouseleave', startAutoPlay)
|
||||
}
|
||||
pauseAutoPlay()
|
||||
})
|
||||
|
||||
return {
|
||||
currentIndex,
|
||||
getSlideClass,
|
||||
getSlideStyle,
|
||||
prevSlide,
|
||||
nextSlide,
|
||||
goToSlide
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
width: 17.03125vw;
|
||||
position: relative;
|
||||
//padding: 2.083vw 0;
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
//height: 400px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
width: 17.03125vw;
|
||||
transition: all 0.5s ease;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.swiper-slide.left {
|
||||
left: 2vw;
|
||||
transform: scale(0.9);
|
||||
z-index: 1;
|
||||
opacity: 0.8;
|
||||
animation: fadeInLeft 0.5s ease forwards;
|
||||
}
|
||||
|
||||
.swiper-slide.center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scale(1);
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
animation: fadeInCenter 0.5s ease forwards;
|
||||
}
|
||||
|
||||
.swiper-slide.right {
|
||||
right: 2vw;
|
||||
transform: scale(0.9);
|
||||
z-index: 1;
|
||||
opacity: 0.8;
|
||||
animation: fadeInRight 0.5s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8) translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 0.8;
|
||||
transform: scale(0.9) translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInCenter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8) translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 0.8;
|
||||
transform: scale(0.9) translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-content {
|
||||
background: white;
|
||||
border-radius: 0.208vw;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.slide-image {
|
||||
background: url("~@/assets/recruitment/card_bg.svg") no-repeat;
|
||||
height: 16.5625vw;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.slide-text {
|
||||
padding: 20px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.slide-text h3 {
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.slide-text p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.swiper-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.swiper-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #333;
|
||||
color: white;
|
||||
border: none;
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.swiper-button:hover {
|
||||
background: #555;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.pagination-bullet {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pagination-bullet.active {
|
||||
background: #333;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user