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">
            <view
                class="swiper-item"
                v-for="item in successcaseList"
                :key="item.id"
                :style="{ margin: item.id === 2 ? '40rpx' : '' }"
            >
                <view class="swiper-item-title">{{ item.title }}</view>
                <view class="swiper-item-contant">{{ item.content }}</view>
                <image :src="item.bg" mode="" class="swiper-item-img"></image>
            </view>
        </scroll-view>
        <view class="scroll-dots">
            <view class="scroll-dot" :class="isActive && 'isActive'"></view>
            <view class="scroll-dot" :class="!isActive && 'isActive'"></view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            successcaseList: [
                {
                    id: 1,
                    title: '私域流量运营难',
                    content:
                        '来自西班牙的明星品牌，在进入中国市场后行了大量的运营资源投放，却依旧无法精准触达用户、回收市场数据。采美采用B2B2C私域运营模式对该品牌及竞品进行全面分析，对比两者之间的优势和劣势，为需要宣传的品牌进行关键词组布局，在采美商城优先进行品牌曝光度。并通过认证通、采美社群等工具，向B端客户推送相关活动，刺激B端客户向C端客户进一步传播品牌形象和实力，从而吸引更多的B端客户来访；采美CRM系统对来访客户做用户行为轨迹跟踪，完善用户画像，帮助品牌精准获取客户资料，筛选出优质客户。既提高该品牌的知名度，又保证了用户数据的精准度。',
                    bg: require('@/static/supplier-login/successcases/01.png')
                },
                {
                    id: 2,
                    title: '营销获客难',
                    content:
                        '连续七年专注敏感肌肤的皮肤管理品牌,在法国荣获全球护肤品创新品牌大奖，品牌实力不容小觑，但由于对B端机构宣传不足,在营销获客上十分艰难。采美团队通过前期市场调研分析后提炼了B端关键词并进行布局，将品牌专利技术的相关内容在采美媒体矩阵同步分发，最终形成全渠道、全链路整合内容营销；将旗下产品搭配导入仪器做联合活动，双向锁定潜在客户，客户询盘量显著增长，解决了单一产品销售难的问题。',
                    bg: require('@/static/supplier-login/successcases/02.png')
                }
            ],
            isActive: true
        }
    },
    methods: {
        scrollX($event) {
            $event.detail.scrollLeft > 260 && (this.isActive = false)
            $event.detail.scrollLeft < 100 && (this.isActive = true)
        },
    }
}
</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>