cfc/cfc-frontend/components/report-upload-card.vue

<template>
  <view class="report-upload-card" @click="handleClick">
    <view class="report-upload-left">
      <text class="report-upload-icon">{{ icon }}</text>
    </view>
    <view class="report-upload-right">
      <text class="report-upload-title">{{ title }}</text>
      <text class="report-upload-desc">{{ desc }}</text>
      <view class="report-upload-tags" v-if="tags && tags.length > 0">
        <text class="tag" v-for="(t, idx) in tags" :key="idx">{{ t }}</text>
      </view>
    </view>
    <text class="report-upload-arrow">›</text>
  </view>
</template>

<script>
export default {
  name: 'ReportUploadCard',
  props: {
    title: { type: String, default: '上传健康报告' },
    desc: { type: String, default: '上传体检报告或肠道检测报告，解读分析，获取个性化营养方案' },
    tags: { type: Array, default: function() { return ['体检报告', '肠道检测', '解读'] } },
    icon: { type: String, default: '📋' }
  },
  methods: {
    handleClick: function() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
.report-upload-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.report-upload-left {
  width: 100rpx;
  height: 100rpx;
  background: rgba(255,255,255,0.7);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.report-upload-icon {
  font-size: 52rpx;
}
.report-upload-right {
  flex: 1;
}
.report-upload-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #2E7D32;
  display: block;
  margin-bottom: 6rpx;
}
.report-upload-desc {
  font-size: 22rpx;
  color: #558B2F;
  line-height: 1.5;
  display: block;
  margin-bottom: 10rpx;
}
.report-upload-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10rpx;
}
.report-upload-tags .tag {
  font-size: 20rpx;
  color: #33691E;
  background: rgba(255,255,255,0.6);
  padding: 4rpx 14rpx;
  border-radius: 20rpx;
}
.report-upload-arrow {
  font-size: 40rpx;
  color: #A5D6A7;
  margin-left: 12rpx;
}
</style>