caimei-applets-caimei/pages/seller/remarks/components/mine-card.vue

<template>
    <view class="card" :style="{backgroundImage: `url(${imgUrl})`, backgroundSize: '100% 100%'}">
        <view class="logo">
            <image src="https://static.caimei365.com/app/img/icon/logo-fanbai.png" mode="" class="titleImgUrl"></image>
        </view>
        <view class="card-contain">
            <view style="display: flex;">
                <view class="card-head">
                    <image :src="userInfo.image || 'https://static.caimei365.com/app/img/icon/default-head.png'" mode="" class="head"></image>
                </view>
                <view class="card-info">
                    <view class="card-info-head">
                        <view class="card-name">
                            {{userInfo.linkMan}}
                        </view>
                        <view class="card-info-tab">
                            客户经理
                        </view>
                    </view>
                    <view class="card-info-iphone">
                        {{ userInfo.contractMobile.replace(/(?=(\d{4})+$)/g,"-") }}
                    </view>
                </view>
            </view>
            <view class="card-qrcode">
                <view class="qrcode-message">
                    <image :show-menu-by-longpress="true" :src="userInfo.qrCode || ''" class="qrcode" mode=""></image>
                </view>
                <view class="tips">
                    长按或扫二维码—-联系我-—
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        userInfo: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            imgUrl: 'https://static.caimei365.com/app/img/icon/bg-card.png',
        }
    },
    mounted() {},
    methods: {},
}
</script>

<style lang="scss">
.card {
    width: 702rpx;
    height: 340rpx;
    background: #FF5B00;
    border-radius: 16rpx;
    opacity: 1;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 16rpx 32rpx;
    .titleImgUrl {
        width: 241rpx;
        height: 80rpx;
    }
    .card-contain {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .head {
            width: 128rpx;
            height: 128rpx;
            border-radius: 50%;
            object-fit: contain;
        }
        .card-info {
            height: 128rpx;
            margin-left: 30rpx;
        }
        .card-info-head {
            display: flex;
            align-items: center;
            margin-bottom: 13rpx;
            .card-name {
                color: #FFFFFF;
                font-size: 40rpx;
                font-weight: bold;
            }
            .card-info-tab {
                width: 88rpx;
                height: 31rpx;
                background-color: #FFBB00;
                color: #fff;
                font-size: 22rpx;
                padding: 0 8rpx;
                margin-left: 10rpx;
            }
        }
        .card-info-iphone {
            color: #FFFFFF;
            font-size: 28rpx;
        }
        .card-qrcode {
            .qrcode {
                width: 126rpx;
                height: 126rpx;
                object-fit: contain;
                margin-bottom: 6rpx;
            }
            .tips {
                font-size: 18rpx;
                color: #fff;
                text-align: center;
                width: 126rpx;
                line-height: 24rpx;
            }
        }
    }
}
</style>