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

<template>
    <view class="scenariomarketing">
        <slot name="supplier-title"></slot>
        <view class="scenario-container">
            <view class="scenario-item" v-for="item in filterScenarioList" :key="item.id">
                <view class="scenario-title">{{item.title}}</view>
                <view class="scenario-contant">{{item.contant}}</view>
                <image class="scenario-img" :src="item.url" mode=""></image>
            </view>
            <view class="more" v-if="filterScenarioList.length < 10" @click="() => {filterScenarioList = ScenarioList}">
                展开查看更多
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            ScenarioList: [
                {
                    id: 1,
                    title: '信息平台',
                    contant: '集创作、发布、客户资源收集于一体的美业内容输出平台；',
                    url: 'https://static.caimei365.com/app/img/supplier-login/scenariomarket/01.png'
                },
                {
                    id: 2,
                    title: '媒体矩阵',
                    contant: '丰富媒体资源，助力品牌快速传播；',
                    url: 'https://static.caimei365.com/app/img/supplier-login/scenariomarket/02.png'
                },
                {
                    id: 3,
                    title: '正版图库',
                    contant: '永久商业授权的专业医美正版图库；',
                    url: 'https://static.caimei365.com/app/img/supplier-login/scenariomarket/03.png'
                },
                {
                    id: 4,
                    title: 'SEO关键词',
                    contant: '立足企业全局，进行关键词策划布局；',
                    url: 'https://static.caimei365.com/app/img/supplier-login/scenariomarket/04.png'
                },
                {
                    id: 5,
                    title: 'CRM系统',
                    contant: '客户全生命周期数字化管理系统；',
                    url: 'https://static.caimei365.com/app/img/supplier-login/scenariomarket/05.png'
                },
                {
                    id: 6,
                    title: '认证通',
                    contant: '一款专业的正品认证SaaS软件系统；',
                    url: 'https://static.caimei365.com/app/img/supplier-login/scenariomarket/06.png'
                },
                {
                    id: 7,
                    title: '美业社群',
                    contant: '更紧密的联动用户，提高客户转化率；',
                    url: 'https://static.caimei365.com/app/img/supplier-login/scenariomarket/07.png'
                },
                {
                    id: 8,
                    title: '私域直播',
                    contant: 'B2B企业直播平台，一键开启直播引流；',
                    url: 'https://static.caimei365.com/app/img/supplier-login/scenariomarket/08.png'
                },
                {
                    id: 9,
                    title: '分销体系',
                    contant: '降低管理成本，提升经营效率；',
                    url: 'https://static.caimei365.com/app/img/supplier-login/scenariomarket/09.png'
                },
                {
                    id: 10,
                    title: '会议营销',
                    contant: '以客户体验为导向，促进现场商机转化成交；',
                    url: 'https://static.caimei365.com/app/img/supplier-login/scenariomarket/10.png'
                },
                {
                    id: 11,
                    title: '金融分期',
                    contant: '缓解客户现金流压力，促进大额交易；',
                    url: 'https://static.caimei365.com/app/img/supplier-login/scenariomarket/11.png'
                },
                {
                    id: 12,
                    title: '交易商城',
                    contant: '一站式管理客户资源，支持1V1线上交易；',
                    url: 'https://static.caimei365.com/app/img/supplier-login/scenariomarket/12.png'
                }
            ],
            // 截取的H5列表
            filterScenarioList: []
        }
    },
    mounted() {
        this.filterScenarioList = this.ScenarioList.filter(e => e.id <= 6)
    }
}
</script>

<style lang="scss" scoped>
.scenariomarketing {
    padding: 1px;
    box-sizing: border-box;
    background-color: #f7f7f7;
}
.scenario-container {
    padding: 0 70rpx 62rpx 70rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 610rpx;
    .more {
        grid-column: 1 / span 2;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border: 0.5px solid #f0f0f0;
        font-size: 28rpx;
        color: #999999;
        height: 158rpx;
        display: flex;
        position: relative;
    }
    .more::before {
        content: '';
        position: absolute;
        width: 15rpx;
        height: 15rpx;
        right: 180rpx;
        top: 72rpx;
        border-bottom: 1px solid;
        border-right: 1px solid;
        transform: rotate(45deg);
    }
    .more::after {
        content: '';
        position: absolute;
        width: 15rpx;
        height: 15rpx;
        right: 180rpx;
        top: 62rpx;
        border-bottom: 1px solid;
        border-right: 1px solid;
        transform: rotate(45deg);
    }
    .scenario-item {
        height: 447rpx;
        border: 0.5rpx solid #f0f0f0;
        background-color: #fff;
        box-sizing: border-box;
        padding: 57rpx 40rpx 0 40rpx;
        position: relative;
        .scenario-title {
            color: #202020;
            font-size: 36rpx;
        }
        .scenario-contant {
            color: #666666;
            font-size: 24rpx;
            line-height: 36rpx;
            margin-top: 28rpx;
        }
        .scenario-img {
            position: absolute;
            right: 49rpx;
            bottom: 40rpx;
            width: 118rpx;
            height: 118rpx;
        }
    }
}
</style>