cfc/cfc-frontend/components/RecommendedSection.vue

<template>
  <view class="recommended-section" v-if="items && items.length > 0">
    <view class="section-header">
      <text class="section-icon">✨</text>
      <text class="section-title">为你推荐</text>
      <text class="section-more" v-if="hasMore" @click="$emit('more')">更多 ›</text>
    </view>
    <scroll-view class="scroll-x" scroll-x show-scrollbar="false">
      <view class="card-list">
        <view
          class="card-item"
          v-for="(item, idx) in items"
          :key="idx"
          @click="onItemClick(item)"
          hover-class="card-hover"
        >
          <image class="card-img" :src="item.coverImage || '/static/default.png'" mode="aspectFill" />
          <view class="card-body">
            <text class="card-title line-clamp-2">{{ item.title }}</text>
            <view class="card-footer">
              <text class="card-reason line-clamp-1">{{ item.recommendReason }}</text>
              <text class="card-badge" v-if="item.badge" :class="'badge-' + item.badge">{{ badgeLabel(item.badge) }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: function() { return [] }
    },
    hasMore: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onItemClick(item) {
      this.$emit('itemClick', item)
    },
    badgeLabel(badge) {
      var map = {
        hot: '热门',
        new: '最新',
        renew: '续费',
        task: '任务'
      }
      return map[badge] || badge
    }
  }
}
</script>

<style scoped>
.recommended-section {
  margin: 20rpx 30rpx;
}
.section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 16rpx;
}
.section-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #333;
  flex: 1;
}
.section-more {
  font-size: 24rpx;
  color: #999;
}
.scroll-x {
  white-space: nowrap;
  overflow: hidden;
}
.card-list {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
}
.card-item {
  display: flex;
  flex-direction: column;
  width: 240rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.card-hover {
  opacity: 0.85;
}
.card-img {
  width: 240rpx;
  height: 160rpx;
  background: #f5f5f5;
}
.card-body {
  padding: 12rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}
.card-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  height: 72rpx;
}
.card-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.card-reason {
  font-size: 20rpx;
  color: #999;
  flex: 1;
  margin-right: 8rpx;
}
.card-badge {
  font-size: 20rpx;
  padding: 2rpx 10rpx;
  border-radius: 6rpx;
  flex-shrink: 0;
}
.badge-hot {
  background: #fff1f0;
  color: #f56c6c;
}
.badge-new {
  background: #e6f7ff;
  color: #1890ff;
}
.badge-renew {
  background: #fff7e6;
  color: #fa8c16;
}
.badge-task {
  background: #f6ffed;
  color: #52c41a;
}
.line-clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>