aigc-frontend/src/views/components/PhotoGuide.vue

<template>
  <div class="guide-wrapper">
    <!-- 顶部标题栏 -->
    <div class="guide-header">
      选图说明
    </div>

    <!-- 中间滚动区域 -->
    <div class="guide-content">
      <!-- 正确示例 -->
      <section class="example-section">
        <h2 class="section-title">正确照片示例</h2>
        <div class="example-grid">
          <div v-for="(item, index) in correctExamples" :key="index" class="example-item">
            <div class="img-box border-success">
              <img :src="item.url" class="main-img" />
            </div>
            <div class="status-label color-success">
              <!-- 替换为成功图标图片 -->
              <img src="@/assets/images/guide_success.png" class="status-icon-img" />
              {{ item.text }}
            </div>
          </div>
        </div>
      </section>

      <!-- 错误示例 -->
      <section class="example-section">
        <h2 class="section-title">错误照片示例</h2>
        <div class="example-grid">
          <div v-for="(item, index) in errorExamples" :key="index" class="example-item">
            <div class="img-box border-error">
              <img :src="item.url" class="main-img" />
            </div>
            <div class="status-label color-error">
              <!-- 替换为错误图标图片 -->
              <img src="@/assets/images/guide_error.png" class="status-icon-img" />
              {{ item.text }}
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 底部固定按钮 -->
    <div class="guide-footer">
      <button class="action-btn" @click="$emit('start')">
        已了解，开始选图
      </button>
    </div>
  </div>
</template>

<script setup>
import yesImage1 from '@/assets/images/yes_1.png';
import yesImage2 from '@/assets/images/yes_2.png';
import yesImage3 from '@/assets/images/yes_3.png';
import noImage1 from '@/assets/images/no_1.png';
import noImage2 from '@/assets/images/no_2.png';
import noImage3 from '@/assets/images/no_3.png';

const emit = defineEmits(['start']);


// 测试数据保持不变
const correctExamples = [
  { url: yesImage1, text: '单人正脸' },
  { url: yesImage2, text: '多表情' },
  { url: yesImage3, text: '多背景' },
];

const errorExamples = [
  { url: noImage1, text: '非清晰正脸' },
  { url: noImage2, text: '面部有遮挡' },
  { url: noImage3, text: '多人合照' },
];
</script>

<style scoped>
.guide-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  font-family: -apple-system, system-ui, sans-serif;
}

.guide-header {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  flex-shrink: 0;
}

.guide-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
  -webkit-overflow-scrolling: touch;
}

.example-section {
  margin-bottom: 25px;
}

.section-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 12px;
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.example-item {
  text-align: center;
}

.img-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f5f5f5;
  border: 1px dashed #ddd;
  box-sizing: border-box;
}

.main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 状态标签样式 */
.status-label {
  margin-top: 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
}

/* 状态图标图片样式 */
.status-icon-img {
  width: 14px;
  /* 根据UI图调整大小 */
  height: 14px;
  object-fit: contain;
}

.color-success {
  color: #07c160;
}

.color-error {
  color: #ee0a24;
}

/* 特殊边框色微调（可选） */
.border-success {
  border-color: rgba(7, 193, 96, 0.3);
}

.border-error {
  border-color: rgba(238, 10, 36, 0.3);
}

.guide-footer {
  padding: 15px 20px 30px;
  flex-shrink: 0;
}

.action-btn {
  width: 100%;
  height: 50px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.action-btn:active {
  opacity: 0.8;
}
</style>