xiaoshu/src/views/Index.vue

<template>
    <main>
        <div class="bg">
            <img src="@/assets/index/bg.gif" />
            <img src="@/assets/index/bg.png" />
        </div>
        <section>
            <header>
                <p>
                    欢迎使用<b>{{ title }}</b>
                </p>
                <div>{{ desc }}</div>
            </header>
            <div class="swiper-main">
                <div :class="{ prev: true, disabled: page === 0 }" @click="goPrev">
                    <icon-left />
                </div>
                <swiper
                    class="the-swiper-wrap"
                    :slides-per-group="number"
                    :slides-per-view="number"
                    :space-between="10"
                    @swiper="onSwiper"
                >
                    <swiper-slide v-for="(item, key) in slider" :key="key" width="230">
                        <div
                            class="swiper-item"
                            @mouseover="onMouseover(key)"
                            @mouseleave="onMouseleave"
                            @click="handleClick(key)"
                        >
                            <div>
                                <img :src="getAssetURL(item.img)" width="48" />
                                <p>{{ item.title }}</p>
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
                <div :class="{ next: true, disabled: page === pages - 1 }" @click="goNext">
                    <icon-right />
                </div>
            </div>
        </section>
    </main>
</template>
<script>
import { defineComponent, inject, onMounted, ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
export default defineComponent({
    props: ["number"],
    components: {
        Swiper,
        SwiperSlide
    },
    setup(props, { emit }) {
        const { helper, config } = inject("$global");
        let useSwiper = null;
        let page = ref(0);
        const title = ref(config.defaultTitle);
        const desc = ref(config.defaultDesc);
        const pages = ref(Math.ceil(config.slider.length / props.number));
        const onSwiper = (swiper) => {
            useSwiper = swiper;
        };
        const goNext = () => {
            if (page.value === pages.value - 1) return;
            page.value += 1;
            useSwiper.slideTo(props.number * page.value);
        };
        const goPrev = () => {
            if (page.value === 0) return;
            page.value -= 1;
            useSwiper.slideTo(props.number * page.value);
        };
        const onMouseover = (key) => {
            title.value = config.slider[key].title;
            desc.value = config.slider[key].desc;
        };
        const onMouseleave = () => {
            title.value = config.defaultTitle;
            desc.value = config.defaultDesc;
        };
        const handleClick = (index) => {
            emit("select-nav", index);
        };
        return {
            onSwiper,
            getAssetURL: helper.getAssetURL,
            slider: config.slider,
            goNext,
            goPrev,
            page,
            pages,
            onMouseover,
            onMouseleave,
            title,
            desc,
            handleClick
        };
    }
});
</script>
<style lang="scss" scoped>
main {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    > section {
        padding-top: 67px;
        position: relative;
        z-index: 2;
        margin: 0 auto;
        width: 85%;
        > header {
            text-align: center;
            color: #fff;
            > p {
                font-size: 40px;
            }
            > div {
                margin-top: 10px;
                font-size: 20px;
            }
        }
        .swiper-main {
            position: relative;
            height: 90px;
            margin-top: 40px;
            .prev,
            .next {
                position: absolute;
                width: 40px;
                height: 40px;
                border-radius: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #fff;
                top: 25px;
                cursor: pointer;
                &:hover {
                    opacity: 0.8;
                }
                &.disabled {
                    cursor: not-allowed;
                    &:hover {
                        opacity: 1;
                    }
                }
            }
            .prev {
                left: -20px;
            }
            .next {
                right: -20px;
            }
            .the-swiper-wrap {
                position: absolute;
                top: 0;
                left: 30px;
                right: 30px;
                overflow: hidden;
                .swiper-item {
                    width: 230px;
                    height: 90px;
                    background: #fff;
                    border-radius: 12px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    &:hover {
                        background: #00aea3;
                        > div > p {
                            color: #fff;
                        }
                    }
                    > div {
                        display: flex;
                        align-items: center;
                        > p {
                            font-weight: 600;
                            color: #000;
                            margin-left: 12px;
                            font-size: 18px;
                        }
                    }
                }
            }
        }
    }
}
.bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f8f9fc;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
}
</style>