caimei-applets-caimei/pages/seller/notice/components/visits-cell.vue

<template>
    <view class="visits-cell" @click="$emit('handlerVisits', visitsInfo)">
        <view class="visits-club">
            <image :src="visitsInfo.image || '/static/icon-user-active@3x.png'" mode="" class="visits-author"></image>
            <view>{{visitsInfo.name}}</view>
        </view>
        <view class="visits-content">
            <view class="container">
                <view class="visits-name">
                    {{ visitsInfo.linkMan }}
                </view>
                <view class="visits-phone">
                    {{ visitsInfo.contractMobile }}
                </view>
            </view>
            <view class="container">
                <view class="visits-name concern">
                    关注点：
                </view>
                <view class="visits-concern">
                    {{ visitsInfo.pageLabel }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        visitsInfo: {
            type: Object,
            default: () => ({
                image: '',
                pageLabel: '',
                name: '',
                linkMan: '',
                contractMobile: '',
                accessTime: '2023-08-29',
                clubId: '1111'
            })
        }
    }
}
</script>

<style scoped lang="scss">
.visits-cell {
    margin: 0 auto 24rpx auto;
    width: 702rpx;
    border-radius: 16rpx;
    padding: 35rpx 32rpx;
    background-color: #fff;
    box-sizing: border-box;
    .visits-club {
        height: 70rpx;
        font-size: 32rpx;
        font-weight: bold;
        color:#333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #E1E1E1;
        padding-bottom: 18rpx;
        .visits-author {
            width: 56rpx;
            height: 56rpx;
            border-radius: 50%;
            object-fit: contain;
            margin-right: 16rpx;
            background-color: #FFF0E2;
        }
    }
    .visits-content {
        padding: 40rpx 0 0 0;
        .container {
            display: flex;
            font-size: 28rpx;
            .visits-name {
                white-space: nowrap;
                color: #333333;
            }
            .concern {
                font-weight: bold;
            }
            .visits-phone {
                margin-left: 28rpx;
                margin-bottom: 24rpx;
            }
            .visits-concern {
                line-height: 48rpx;
            }
        }
    }
}
</style>