gypsy-crm-frontend-vu/pages/customer/components/ActivitiesSwiper.vue

<template>
    <view class="swiper-card">
        <view class="swiper-header">
            <view class="font-medium"> Promotions</view>
            <view class="btn" @click="toActivities">
                View All
            </view>
        </view>
        <cwg-wiper :list="bannerList" @click="onSwiperClick" />
    </view>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
import { customApi } from '@/service/custom';
import useUserStore from "@/stores/use-user-store";
import useRouter from "@/hooks/useRouter";
const router = useRouter();
const bannerList = ref([
    { image: '/static/images/su.png', content: 'Banner 1' },
    { image: '/static/images/yue.jpg', content: 'Banner 2' },
    { image: '/static/images/cash-carnival.webp', content: 'Banner 3' }
])
// 活动详情
const onSwiperClick = (index: number) => {
    switch (index) {
        case 0:
            router.push('/pages/activities/index');
            break;
        case 1:
            router.push('/pages/promotions/index');
            break;
        case 2:
            router.push('/pages/news/index');
            break;
        default:
            break;
    }
}
const toActivities = () => {
    router.push('/pages/activities/index');
}
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.swiper-card {
    padding: px2rpx(12);
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
    display: flex;
    flex-direction: column;
    min-width: 1px;
    overflow-wrap: break-word;
    position: relative;
    max-width: px2rpx(576);
    box-sizing: border-box;
    margin: 0 auto;
    margin-bottom: px2rpx(20);

    .swiper-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: px2rpx(12);

        .font-medium {
            font-size: px2rpx(21);
            font-weight: 600;
            color: #fff;
        }

        .btn {
            font-size: px2rpx(14);
            color: var(--color-white);
            padding: px2rpx(12) px2rpx(16);
            border: none;
            background-color: var(--color-error);
            cursor: pointer;
        }
    }
}

.custom-swiper {
    width: 100%;
}

.swiper-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

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

    .default-content {
        font-size: 28rpx;
        color: var(--bs-heading-color);
    }
}

// 自定义指示点
.swiper-dots {
    position: absolute;
    bottom: 20rpx;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    z-index: 10;

    .dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        transition: all 0.3s;

        &-active {
            width: 32rpx;
            border-radius: 16rpx;
            background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
        }
    }
}

// 滚动条
.swiper-scrollbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 10;

    .swiper-scrollbar-drag {
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 4rpx;
        transition: transform 0.3s;
    }
}

// 导航按钮
.swiper-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    z-index: 10;
    pointer-events: none;

    .swiper-button-prev,
    .swiper-button-next {
        width: 60rpx;
        height: 60rpx;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        pointer-events: auto;
        transition: all 0.3s;

        &.swiper-button-disabled {
            opacity: 0.3;
            pointer-events: none;
        }

        &:active {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .swiper-navigation-icon {
            width: 24rpx;
            height: 40rpx;
            color: var(--color-white);
        }
    }
}

// 深色背景适配
.dark-theme {
    .swiper-dots .dot {
        background-color: rgba(255, 255, 255, 0.3);

        &-active {
            background-color: #ffd700;
        }
    }

    .swiper-scrollbar {
        background-color: rgba(255, 255, 255, 0.2);

        .swiper-scrollbar-drag {
            background-color: #ffd700;
        }
    }
}
</style>