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@2x.png" mode="" class="titleImgUrl">
            </image>
        </view>
        <view class="card-contain">
            <view style="display: flex;">
                <view class="card-head">
                    <image
                        :src="userInfo.image.length > 12 ? userInfo.image : 'https://static.caimei365.com/app/img/icon/default-head-new.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/bg/home_cumres_bg@2x.png',
            }
        },
        mounted() {},
        methods: {},
    }
</script>

<style lang="scss">
    .card {
        width: 702rpx;
        height: 340rpx;
        background-color: #E1E1E1;
        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: #333333;
                    font-size: 40rpx;
                    font-weight: bold;
                }

                .card-info-tab {
                    width: 88rpx;
                    height: 31rpx;
                    background-color: #FFF1EB;
                    color: #666666;
                    font-size: 22rpx;
                    padding: 0 8rpx;
                    margin-left: 10rpx;
                    border-radius: 4rpx;
                }
            }

            .card-info-iphone {
                color: #333333;
                font-size: 28rpx;
            }

            .card-qrcode {
                .qrcode {
                    width: 126rpx;
                    height: 126rpx;
                    object-fit: contain;
                    margin-bottom: 6rpx;
                }

                .tips {
                    font-size: 18rpx;
                    color: #333333;
                    text-align: center;
                    width: 126rpx;
                    line-height: 24rpx;
                }
            }
        }
    }
</style>