Skip to content

Commit

Permalink
自定义ImageSwiper组件
Browse files Browse the repository at this point in the history
  • Loading branch information
松鼠 committed Dec 30, 2024
1 parent 913fe5c commit e85714a
Show file tree
Hide file tree
Showing 3 changed files with 240 additions and 150 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, Navigation, Autoplay } from 'swiper/modules';
// 引入必要的 CSS
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
// 定义组件的 props
const props = defineProps({
// 轮播图数据
items: {
type: Array,
required: true
},
// 配置项
config: {
type: Object,
default: () => ({
height: 500,
showInfo: true
})
}
})
</script>

<template>
<Swiper
:modules="[Pagination, Navigation, Autoplay]"
:slides-per-view="1"
:pagination="{ clickable: true }"
:navigation="true"
:autoplay="{
delay: 3000,
disableOnInteraction: false
}"
:class="['mySwiper', { 'hide-info': !config.showInfo }]"
:style="{ height: `${config.height}px` }"
>
<SwiperSlide v-for="item in items" :key="item.link" class="image-slide">
<img :src="item.link" :alt="item.title">
<div class="slide-info">
<div class="info-content">
<h3 class="title">{{ item.title }}</h3>
<p class="description">{{ item.description }}</p>
<div class="meta">
<span class="author">{{ item.author }}</span>
<span class="date">{{ item.date }}</span>
</div>
</div>
</div>
</SwiperSlide>
</Swiper>
</template>

<style scoped>
/* 将原来的所有样式复制到这里 */
.mySwiper {
width: 100%;
}
.swiper-slide {
text-align: center;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 信息层样式 */
.slide-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
color: #fff;
padding: 10px;
transform: translateY(calc(100% - 95px)); /* 默认只显示标题部分 */
transition: transform 0.3s ease;
}
/* 鼠标悬浮时整体上移 */
.image-slide:hover .slide-info {
transform: translateY(0);
}
.info-content {
padding: 6px 24px;
}
.title {
margin: 0 0 12px 0;
font-size: 1.5em;
color: #ffffff; /* 纯白色,不透明 */
font-weight: 600;
letter-spacing: 0.5px;
text-align: left;
width: 100%;
line-height: 1.4;
padding-bottom: 5px;
text-shadow: none; /* 移除阴影 */
}
.description {
margin: 0 0 15px 0;
font-size: 1.1em;
line-height: 1.5;
color: #ffffff; /* 纯白色,完全不透明 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
text-align: left; /* 确保左对齐 */
width: 100%; /* 确保占满容器宽度 */
max-width: 100%; /* 移除之前的宽度限制 */
}
/* 鼠标悬浮时保持纯白色 */
.image-slide:hover .title,
.image-slide:hover .description {
color: #ffffff;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
}
.meta {
display: flex;
justify-content: space-between;
font-size: 0.9em;
color: rgba(255, 255, 255, 0.9);
}
.author,
.date {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
/* 导航按钮样式 */
.swiper-button-next,
.swiper-button-prev {
color: #fff;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
/* 分页器样式 */
.swiper-pagination-bullet {
background: #fff;
opacity: 0.7;
}
.swiper-pagination-bullet-active {
background: #fff;
opacity: 1;
}
/* 隐藏信息的样式 */
.hide-info .slide-info {
display: none;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,18 @@ createTime: 2024/12/29 20:39:34
permalink: /ComprehensivePark/Guangming/pmtezauc/
---


<script setup>
import Swiper from 'vuepress-theme-plume/features/Swiper.vue'
import { Swiper as SwiperComponent, SwiperSlide } from 'swiper/vue';
import { Pagination, Navigation, Autoplay } from 'swiper/modules';

// 可配置项
const swiperConfig = {
height: 500, // 轮播图高度,单位px
showInfo: true // 控制是否显示图片信息
}

// 引入必要的 CSS
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import ImageSwiper from '/.vuepress/theme/components/ImageSwiper.vue'

// 定义图片数据
// 只需定义轮播图数据
const swiperItems = [
{
link: 'https://img.lyzhly.com/img/20230801/1690885750_333dcf_3-2.png',
title: '中心广场',
description: '公园的核心区域,设有艺术喷泉和休闲座椅',
author: '深圳公园管理中心',
date: '2024/03/20'
},
{
link: 'https://img.lyzhly.com/img/20230801/1690885750_333dcf_3-2.png',
title: '中心广场',
Expand Down Expand Up @@ -51,145 +44,19 @@ const swiperItems = [
author: '深圳公园管理中心',
date: '2024/11/30'
}
// ... 其他图片数据 ...
]
</script>

<!-- 第一个轮播图 -->
<SwiperComponent
:modules="[Pagination, Navigation, Autoplay]"
:slides-per-view="1"
:pagination="{ clickable: true }"
:navigation="true"
:autoplay="{
delay: 3000,
disableOnInteraction: false
}"
:class="['mySwiper', { 'hide-info': !swiperConfig.showInfo }]"
:style="{ height: `${swiperConfig.height}px` }"
>
<SwiperSlide v-for="item in swiperItems" :key="item.link" class="image-slide">
<img :src="item.link" :alt="item.title">
<div class="slide-info">
<div class="info-content">
<h3 class="title">{{ item.title }}</h3>
<p class="description">{{ item.description }}</p>
<div class="meta">
<span class="author">{{ item.author }}</span>
<span class="date">{{ item.date }}</span>
</div>
</div>
</div>
</SwiperSlide>
</SwiperComponent>
<style>
.mySwiper {
width: 100%;
}

.swiper-slide {
text-align: center;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}

.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* 信息层样式 */
.slide-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
color: #fff;
padding: 10px;
transform: translateY(calc(100% - 95px)); /* 默认只显示标题部分 */
transition: transform 0.3s ease;
}

/* 鼠标悬浮时整体上移 */
.image-slide:hover .slide-info {
transform: translateY(0);
}

.info-content {
padding: 6px 24px;
}

.title {
margin: 0 0 12px 0;
font-size: 1.5em;
color: #ffffff; /* 纯白色,不透明 */
font-weight: 600;
letter-spacing: 0.5px;
text-align: left;
width: 100%;
line-height: 1.4;
padding-bottom: 5px;
text-shadow: none; /* 移除阴影 */
}

.description {
margin: 0 0 15px 0;
font-size: 1.1em;
line-height: 1.5;
color: #ffffff; /* 纯白色,完全不透明 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
text-align: left; /* 确保左对齐 */
width: 100%; /* 确保占满容器宽度 */
max-width: 100%; /* 移除之前的宽度限制 */
}

/* 鼠标悬浮时保持纯白色 */
.image-slide:hover .title,
.image-slide:hover .description {
color: #ffffff;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
}
.meta {
display: flex;
justify-content: space-between;
font-size: 0.9em;
color: rgba(255, 255, 255, 0.9);
}

.author,
.date {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 导航按钮样式 */
.swiper-button-next,
.swiper-button-prev {
color: #fff;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

/* 分页器样式 */
.swiper-pagination-bullet {
background: #fff;
opacity: 0.7;
// 可选的配置项
const swiperConfig = {
height: 500,
showInfo: true
}
</script>

.swiper-pagination-bullet-active {
background: #fff;
opacity: 1;
}
<!-- 使用组件 -->
<ImageSwiper :items="swiperItems" :config="swiperConfig" />

/* 隐藏信息的样式 */
.hide-info .slide-info {
display: none;
}
</style>

## 基本信息

Expand Down
Loading

0 comments on commit e85714a

Please sign in to comment.