feat: 说明的底部弹窗搭建

src/views/components/PhotoGuide.vue

@@ -0,0 +1,189 @@
+<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>
+const emit = defineEmits(['start']);
+
+// 测试数据保持不变
+const correctExamples = [
+  { url: 'https://picsum.photos/id/64/200', text: '单人正脸' },
+  { url: 'https://picsum.photos/id/65/200', text: '多表情' },
+  { url: 'https://picsum.photos/id/66/200', text: '多背景' },
+];
+
+const errorExamples = [
+  { url: 'https://picsum.photos/id/177/200', text: '非清晰正脸' },
+  { url: 'https://picsum.photos/id/103/200', text: '面部有遮挡' },
+  { url: 'https://picsum.photos/id/104/200', 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>