<template>
|
<view class="card-container">
|
<!-- 卡片图片区域，如果有视频则显示播放图标 -->
|
<view class="card-image-container">
|
<image class="card-image" :src="item.image" mode="widthFix"></image>
|
<view class="video-icon" v-if="item.hasVideo">
|
<u-icon name="play-right-fill" color="#ffffff" size="40"></u-icon>
|
</view>
|
</view>
|
|
<!-- 卡片内容区域 -->
|
<view class="card-content">
|
<!-- 标题 -->
|
<view class="card-title">{{ item.title }}</view>
|
|
<!-- 描述文字 -->
|
<view class="card-desc" v-if="item.desc">{{ item.desc }}</view>
|
|
<!-- 作者信息和点赞 -->
|
<view class="card-footer">
|
<view class="author-info">
|
<image class="author-avatar" :src="item.author.avatar" mode="aspectFill"></image>
|
<text class="author-name">{{ item.author.name }}</text>
|
</view>
|
<view class="like-info">
|
<u-icon name="heart" color="#999999" size="16"></u-icon>
|
<text class="like-count">{{ item.likes }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: 'CardItem',
|
props: {
|
item: {
|
type: Object,
|
required: true
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.card-container {
|
width: 100%;
|
border-radius: 8px;
|
overflow: hidden;
|
background-color: #ffffff;
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
}
|
|
.card-image-container {
|
position: relative;
|
width: 100%;
|
}
|
|
.card-image {
|
width: 100%;
|
height: auto;
|
display: block;
|
}
|
|
.video-icon {
|
position: absolute;
|
right: 10px;
|
top: 10px;
|
width: 40px;
|
height: 40px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.card-content {
|
padding: 10px;
|
}
|
|
.card-title {
|
font-size: 14px;
|
font-weight: bold;
|
color: #333333;
|
line-height: 1.4;
|
margin-bottom: 6px;
|
}
|
|
.card-desc {
|
font-size: 12px;
|
color: #666666;
|
line-height: 1.4;
|
margin-bottom: 10px;
|
}
|
|
.card-footer {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 8px;
|
}
|
|
.author-info {
|
display: flex;
|
align-items: center;
|
}
|
|
.author-avatar {
|
width: 24px;
|
height: 24px;
|
border-radius: 50%;
|
margin-right: 6px;
|
}
|
|
.author-name {
|
font-size: 12px;
|
color: #666666;
|
}
|
|
.like-info {
|
display: flex;
|
align-items: center;
|
}
|
|
.like-count {
|
font-size: 12px;
|
color: #999999;
|
margin-left: 4px;
|
}
|
</style>
|
