hulai-website/components/about/CopyrightList.vue

<template>
  <section class="section">
    <div class="container">
      <CommonSectionTitle title="知识产权" subtitle="商标全品类注册 + 4项国家版权登记" />
      <p class="copyright-intro">呼籁集团重视品牌知识产权保护。「呼籁」商标已完成全品类注册，核心产品名称、品牌标识和IP形象均已在中国版权保护中心完成作品登记。</p>

      <!-- 商标 -->
      <div v-if="trademark" class="trademark-card">
        <div class="trademark-header">
          <span class="trademark-badge">® 商标</span>
          <h3 class="trademark-name">「{{ trademark.name }}」{{ trademark.scope }}</h3>
        </div>
        <p class="trademark-desc">{{ trademark.description }}</p>
        <p class="trademark-holder">持有人：{{ trademark.holder }}</p>
      </div>

      <!-- 版权 -->
      <div class="copyright-grid">
        <div v-for="c in copyrights" :key="c.regNo" class="copyright-card">
          <div class="copyright-header">
            <h3 class="copyright-name">{{ c.name }}</h3>
            <span class="copyright-category">{{ c.category }}</span>
          </div>
          <p class="copyright-desc">{{ c.description }}</p>
          <div class="copyright-meta">
            <div class="copyright-meta-item">
              <span class="meta-label">登记号</span>
              <span class="meta-value">{{ c.regNo }}</span>
            </div>
            <div class="copyright-meta-item">
              <span class="meta-label">登记日期</span>
              <span class="meta-value">{{ c.date }}</span>
            </div>
            <div class="copyright-meta-item">
              <span class="meta-label">著作权人</span>
              <span class="meta-value">{{ c.holder }}</span>
            </div>
          </div>
        </div>
      </div>
      <p class="copyright-note">以上作品均经中国版权保护中心审核，依据《作品自愿登记试行办法》予以登记。</p>
    </div>
  </section>
</template>

<script setup>
defineProps({
  copyrights: { type: Array, required: true },
  trademark: { type: Object, default: null }
})
</script>

<style lang="less" scoped>
.copyright-intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto @space-xl;
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: @line-height-base;
}

.trademark-card {
  max-width: 900px;
  margin: 0 auto @space-xl;
  padding: @space-xl;
  background: @color-primary-bg;
  border: 1px solid fade(@color-primary, 20%);
  border-radius: @border-radius-md;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.trademark-header {
  margin-bottom: @space-sm;
}

.trademark-badge {
  display: inline-block;
  font-size: @font-size-xs;
  color: @color-bg-white;
  background: @color-primary;
  padding: 2px 10px;
  border-radius: 20px;
  margin-bottom: @space-sm;
}

.trademark-name {
  font-size: @font-size-md;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin: @space-sm 0 0;
}

.trademark-desc {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: @line-height-loose;
  max-width: 700px;
  margin: @space-sm auto @space-sm;
}

.trademark-holder {
  font-size: @font-size-xs;
  color: @color-text-muted;
  margin: 0;
}

.copyright-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-md;
  max-width: 900px;
  margin: 0 auto;

  .respond-md({
    grid-template-columns: 1fr 1fr;
  });
}

.copyright-card {
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-md;
  padding: @space-lg;
  transition: transform 0.2s ease;

  &:hover {
    transform: translateY(-2px);
  }
}

.copyright-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: @space-sm;
}

.copyright-name {
  font-size: @font-size-md;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin: 0;
}

.copyright-category {
  font-size: @font-size-xs;
  color: @color-primary;
  background: @color-primary-bg;
  padding: 2px 8px;
  border-radius: @border-radius-sm;
  flex-shrink: 0;
}

.copyright-desc {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: @line-height-base;
  margin-bottom: @space-md;
}

.copyright-meta {
  border-top: 1px solid @color-bg-gray;
  padding-top: @space-sm;
}

.copyright-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  font-size: @font-size-xs;
}

.meta-label {
  color: @color-text-muted;
  flex-shrink: 0;
  margin-right: @space-sm;
}

.meta-value {
  color: @color-text-secondary;
  text-align: right;
  word-break: break-all;
}

.copyright-note {
  text-align: center;
  margin-top: @space-xl;
  font-size: @font-size-xs;
  color: @color-text-muted;
}
</style>