cloudroam
2025-06-12 b0bfc153bf3c9aa430ee6a86588648cdd1c27132
components/card/flow-card.vue
@@ -1,19 +1,23 @@
<template>
    <view class="card" @click="handleClick(item)">
        <image :src="item.imgurl" mode="widthFix" class="card-image" />
        <!-- <image :src="item.coverUrl" mode="widthFix" class="card-image" /> -->
        <view class="image-wrapper">
            <image :src="item.coverUrl" mode="widthFix" class="card-image" />
            <image v-if="item.userType==='official'" src="/static/common/official.png" class="badge-icon" />
        </view>
        <view class="card-title">
            <up-text :lines="2" size="14px" :text="item.title" bold></up-text>
            <up-text :lines="2" size="14px" :text="item.nameCn" bold></up-text>
        </view>
        <view class="card-footer">
            <view class="user-info">
                <up-avatar :src="item.avatar" size="40rpx" shape="circle" />
                <view class="user-text">
                    <text class="nickname">{{ item.username }}</text>
                    <text class="nickname">{{ item.nickname }}</text>
                </view>
            </view>
            <view class="opera-info">
                <up-icon name="heart" size="30rpx" color="#999" />
                <text>{{ item.likes }}</text>
                <text>{{ item.voLikeCount }}</text>
            </view>
        </view>
    </view>
@@ -25,7 +29,7 @@
}>()
const emit = defineEmits(['click'])
const handleClick = (item) => {
const handleClick = (item: any) => {
    emit('click', item)
}
</script>
@@ -39,11 +43,28 @@
    color: rgb(51, 51, 51);
    margin: 10rpx;
    .card-image {
    .image-wrapper {
        width: 100%;
        border-radius: inherit;
        position: relative;
        display: inline-block;
        .card-image {
            width: 100%;
            border-radius: inherit;
        }
        .badge-icon {
            position: absolute;
            bottom: 8rpx;
            right: 0rpx;
            width: 32rpx;
            height: 32rpx;
            border-radius: 50%;
        }
    }
    .card-title {
        padding: 10rpx;
        font-weight: 500;