| | |
| | | <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> |
| | |
| | | }>() |
| | | |
| | | const emit = defineEmits(['click']) |
| | | const handleClick = (item) => { |
| | | const handleClick = (item: any) => { |
| | | emit('click', item) |
| | | } |
| | | </script> |
| | |
| | | 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; |