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

<template>
    <view
        class="about"
        :style="{
            background: 'url(' + bgImg + ')',
            'background-repeat': 'no-repeat',
            'background-size': '100% 100%'
        }"
    >
        <slot name="supplier-title"></slot>
        <view class="about-container">
            <view class="about-explain">
                <view class="about-bg"></view>
                <view class="about-text">
                    采美网是一个生活美容和医疗美容行业B2B数字化营销和供应链服务平台，其核心资产包括采购
                    信息中心，媒体矩阵，数字运营以及线上交易和供应链管理软件，建立了一个从信息引流到数字
                    运营到交易结算一体化平台，站外引流站内运营，采购转化的闭环生态，采美平台以创造客户价值为核心，借助数字化营销的优
                    势，赋能美业供应链上下游企业，共同打造一站式美业双线融合的供应链新生态。
                </view>
            </view>
            <view>
                <image class="about-achievement" src="https://static.caimei365.com/app/img/supplier-login/caimeiabout/achievement.png" mode=""></image>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            bgImg: 'https://static.caimei365.com/app/img/supplier-login/caimeiabout/bg.png',
        }
    }
}
</script>

<style lang="scss" scoped>
.about {
    padding: 1px;
    box-sizing: border-box;
}
.about-container {
    padding: 0 70rpx;
    box-sizing: border-box;
    .about-explain {
        width: 610rpx;
        height: 760rpx;
        position: relative;
        margin-bottom: 78rpx;
        .about-bg {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: #FFFFFF;
            opacity: 0.2;
            border-radius: 4rpx;
        }
        .about-text {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 45rpx 34rpx;
            color: #FFFFFF;
            font-size: 32rpx;
            line-height: 64rpx;
        }
    }
    .about-achievement {
        width: 610rpx;
        height: 400rpx;
        margin-bottom: 62rpx;
    }
}
</style>