caimei-applets-caimei/pages/login/components/successCases.vue

<template>
    <view class="successCases">
        <slot name="supplier-title"></slot>
        <scroll-view scroll-x="true" class="scroll-view" @scroll="scrollX" :scroll-into-view="activeMenu" scroll-with-animation="true">
            <view
                class="swiper-item"
                v-for="item in successList"
                :key="item.id"
                :id="`item${index}`"
                :style="{ margin: item.id === 2 ? '40rpx' : '' }"
            >
                <view class="swiper-item-title">{{ item.title }}</view>
                <view class="swiper-item-contant" v-html="item.content"></view>
                <image :src="item.headAppBanner" mode="" class="swiper-item-img"></image>
            </view>
        </scroll-view>
        <view class="scroll-dots">
            <page-dots :pageAll="successList.length" :isActive="isSuccess" @hanlder-click="hanlderClick" />
        </view>
    </view>
</template>

<script>
import PageDots from './swiper-dots.vue'
export default {
    props: {
        successList: {
            type: Array,
            default: () => []
        }
    },
    components: {
        PageDots
    },
    data() {
        return {
            isSuccess: 0,
            activeMenu: 'item0'
        }
    },
    methods: {
        scrollX($event) {
            const data = Math.floor($event.detail.scrollLeft / 192)
             this.isSuccess = data
        },
        hanlderClick($event) {
            this.isSuccess = $event
            this.activeMenu = `item${$event}`
        },
    }
}
</script>

<style scoped lang="scss">
.successCases {
    padding: 1px;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
}
.scroll-view {
    height: 1400rpx;
    padding-left: 32rpx;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    position: relative;
    background-color: #fff;
}
.swiper-item {
    width: 566rpx;
    height: 1124rpx;
    box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(102, 102, 102, 0.3);
    background: #ffffff;
    margin: 40rpx 0 40rpx 40rpx;
    box-sizing: border-box;
    padding: 50rpx;
    overflow-wrap: break-word;
    white-space: normal;
    display: inline-flex;
    flex-direction: column;
    position: relative;
    align-items: center;
}
.swiper-item-title {
    color: #333333;
    font-size: 32rpx;
    font-weight: 600;
}
.swiper-item-contant {
    font-size: 24rpx;
    color: #666666;
    line-height: 48rpx;
    overflow-wrap: break-word;
    white-space: normal;
    margin-top: 40rpx;
}
.swiper-item-img {
    width: 468rpx;
    height: 274rpx;
    position: absolute;
    left: 48rpx;
    bottom: 40rpx;
}
.scroll-dots {
    position: absolute;
    left: 50%;
    bottom: 140rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(-50%);
    .scroll-dot {
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        background-color: #FFBD99;
        margin-right: 16rpx;
    }
}
.isActive {
    background: #ff5b00 !important;
}
</style>