Zlpt_Portal_h5/src/pages/message/index.vue

<template>
    <!-- 消息 -->
    <view class="h5-container message">
        <view
            style="
                padding: 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            "
        >
            <view>
                <text style="color: #000"> 消息 </text>
                <text> (3) </text>
            </view>
            <view>
                <van-icon name="guide-o" />
                <text> 清除未读 </text>
            </view>
        </view>

        <scroll-view scroll-y>
            <van-cell-group inset style="flex: 1">
                <view
                    class="message-items"
                    v-for="item in 20"
                    :key="item"
                    @click="onJumpToMessagePages"
                >
                    <van-image
                        round
                        fit="cover"
                        width="48px"
                        height="48px"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                    />

                    <view style="flex: 1">
                        <view class="message-list">
                            <text style="font-weight: bold"> 老张租赁 </text>
                            <text> 9：12 </text>
                        </view>
                        <view class="message-list message-info">
                            <text> 公司洽谈··· </text>
                            <text class="message-count"> 2 </text>
                        </view>
                    </view>
                </view>
            </van-cell-group>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { useMemberStore } from '@/stores/index.js'
import { onLoad } from '@dcloudio/uni-app'
const memberStore = useMemberStore()
const userName = ref('')
const userAccount = ref('')

onLoad(() => {
    userName.value = memberStore.userInfo.nickName
    userAccount.value = memberStore.userInfo.userName
})
const onJumpToMessagePages = () => {
    uni.navigateTo({ url: '/pages/message-pages/index' })
}
</script>

<style lang="scss" scoped>
.message {
    padding: 10px 0;
    color: #333;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
}

:deep(.van-cell-group--inset) {
    padding: 15px;
}
.message-items {
    padding: 4px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;

    .message-list {
        width: 100%;
        padding: 4px 0 4px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .message-count {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 10px;
            background-color: #df534d;
            color: #fff;
        }
    }
    .message-info {
        font-size: 14px;
        color: #ccc;
    }
}
</style>