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

<template>
    <view
        class="solution"
        :style="{
            background: 'url(' + bgImg + ')',
            'background-repeat': 'no-repeat',
            'background-size': '100% 100%'
        }"
    >
        <slot name="supplier-title"></slot>
        <view class="solution_container">
            <view class="solution_item" v-for="item in solutionList" :key="item.id">
                <view
                    class="solution_item_bg"
                    :style="{
                        background: 'url(' + item.bgImg + ')',
                        'background-repeat': 'no-repeat',
                        'background-size': '100%'
                    }"
                >
                    {{ item.title }}
                </view>
                <view class="solution_item_container">
                    <view class="solution_text" v-for="(text, index) in item.content" :key="index">
                        {{ text.text }}
                    </view>
                    <button type="default" class="solution_btn" @click="openMadel">查看解决方案</button>
                </view>
            </view>
        </view>
        <tui-modal
            :show.sync="modal"
            custom
            @cancel="() => (modal = false)"
            maskClosable
            color="#333"
            :size="32"
        >
            <view class="tui-modal-custom">
                <view class="tui-modal-custom-text">如有需要，可通过右下角电话或微信联系客服</view>
                <button height="72rpx" class="solution_btn" :size="28" shape="circle" @click="() => (modal = false)">确定</button>
            </view>
        </tui-modal>
    </view>
</template>

<script>
export default {
    data() {
        return {
            bgImg: 'https://static.caimei365.com/app/img/supplier-login/solution/bg.png',
            // 解决方案内容
            solutionList: [
                {
                    id: 1,
                    title: '基础版',
                    bgImg: 'https://static.caimei365.com/app/img/supplier-login/solution/01.png',
                    content: [
                        {
                            text: '品牌商城入驻'
                        },
                        {
                            text: '品牌内容宣发'
                        },
                        {
                            text: '用户画像洞察'
                        },
                        {
                            text: '客户旅程搭建'
                        },
                        {
                            text: '客户线索跟踪'
                        },
                        {
                            text: '线索转化'
                        }
                    ]
                },
                {
                    id: 2,
                    title: '高级版',
                    bgImg: 'https://static.caimei365.com/app/img/supplier-login/solution/02.png',
                    content: [
                        {
                            text: '基础版全部内容'
                        },
                        {
                            text: '引流关键词策划和布局'
                        },
                        {
                            text: '漏斗模型转化率评估'
                        },
                        {
                            text: '数字营销内容策划'
                        },
                        {
                            text: '客户线索跟踪'
                        },
                        {
                            text: '线索转化'
                        }
                    ]
                },
                {
                    id: 3,
                    title: '战略版',
                    bgImg: 'https://static.caimei365.com/app/img/supplier-login/solution/03.png',
                    content: [
                        {
                            text: '高级版全部内容'
                        },
                        {
                            text: '设置销售目标'
                        },
                        {
                            text: '数据模型策划和执行'
                        },
                        {
                            text: '品牌私域运营及正品认证通'
                        },
                        {
                            text: '开放平台全域销售系统'
                        },
                        {
                            text: '保证销售目标的执行'
                        }
                    ]
                }
            ],
            modal: false,
            btnStyle: [
                {
                    text: '确定',
                    type: '',
                    plain: false
                }
            ]
        }
    },
    methods: {
        openMadel() {
            this.modal = true
        }
    }
}
</script>

<style scoped lang="scss">
.solution {
    box-sizing: border-box;
    padding: 1rpx;
    margin-top: 120rpx;
    .solution_container {
        padding: 0 72rpx;
        box-sizing: border-box;
        .solution_item {
            width: 606rpx;
            height: 610rpx;
            box-sizing: border-box;
            display: flex;
            margin-bottom: 60rpx;
            .solution_item_bg {
                display: flex;
                align-items: center;
                writing-mode: vertical-rl;
                justify-content: center;
                width: 140rpx;
                font-size: 56rpx;
                color: #ffffff;
                font-weight: Bold;
            }
            .solution_item_container {
                width: calc(100% - 140rpx);
                height: 100%;
                position: relative;
                box-sizing: border-box;
                padding: 63rpx 70rpx;
                background-color: #fff;
                .solution_text {
                    font-size: 28rpx;
                    color: #666666;
                    line-height: 64rpx;
                    position: relative;
                    white-space: nowrap;
                }
                .solution_text::before {
                    content: '';
                    border: 1px solid #b2b2b2;
                    width: 10rpx;
                    height: 10rpx;
                    position: absolute;
                    left: -30rpx;
                    top: 25rpx;
                    transform: rotate(45deg);
                }
                .solution_btn {
                    position: absolute;
                    width: 220rpx;
                    height: 72rpx;
                    background: #ff5b00;
                    border-radius: 4rpx;
                    color: #fff;
                    font-size: 28rpx;
                    text-align: center;
                    line-height: 72rpx;
                    right: 40rpx;
                    bottom: 48rpx;
                }
            }
        }
    }
}
.tui-modal-custom {
    padding: 40rpx 20rpx 10rpx 20rpx;
    .tui-modal-custom-text {
        font-size: 32rpx;
        color: #666666;
        text-align: center;
    }
    .solution_btn {
        width: 400rpx;
        height: 72rpx;
        margin-top: 40rpx;
        background: #FF5B00;
        border-radius: 36rpx;
        color: white;
        font-size: 28rpx;
        text-align: center;
        line-height: 72rpx;
    }
}
</style>