diff --git a/components/ImageSwiper/images/2025-07-12_180248.jpg b/components/ImageSwiper/images/2025-07-12_180248.jpg
new file mode 100644
index 0000000..c108857
Binary files /dev/null and b/components/ImageSwiper/images/2025-07-12_180248.jpg differ
diff --git a/components/ImageSwiper/index.vue b/components/ImageSwiper/index.vue
new file mode 100644
index 0000000..3ec57c0
--- /dev/null
+++ b/components/ImageSwiper/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <view class="image-swiper">
+    <swiper class="swiper-box" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000">
+      <swiper-item v-for="(item, index) in mainImages" :key="index">
+        <image :src="item.url" mode="aspectFill"></image>
+      </swiper-item>
+    </swiper>
+
+    <view class="thumbnail-box">
+      <view v-for="(thumb, index) in thumbnails" :key="index" class="thumbnail-item">
+        <image :src="thumb.url" mode="aspectFill"></image>
+        <text>{{ thumb.description }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const mainImages = ref([
+  { url: 'https://example.com/main-image-1.jpg' },
+]);
+
+const thumbnails = ref([
+  { url: 'https://example.com/thumbnail-1.jpg', description: '瑶山古寨' },
+  { url: 'https://example.com/thumbnail-2.jpg', description: '民俗表演' },
+  { url: 'https://example.com/thumbnail-3.jpg', description: '特色美食' },
+  { url: 'https://example.com/thumbnail-4.jpg', description: '传统服饰' },
+  { url: 'https://example.com/thumbnail-5.jpg', description: '其他' },
+]);
+</script>
+
+<style scoped lang="scss">
+@import './styles/index.scss';
+</style>
\ No newline at end of file
diff --git a/components/ImageSwiper/prompt.md b/components/ImageSwiper/prompt.md
new file mode 100644
index 0000000..62dc411
--- /dev/null
+++ b/components/ImageSwiper/prompt.md
@@ -0,0 +1,15 @@
+## 图片详情组件
+
+组件名称：图片详情组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片 100%还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.image-swiper
+3、可以使用 uniapp swiper 内置的组件
+4、可以使用网络图片地址
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/components/ImageSwiper/styles/index.scss b/components/ImageSwiper/styles/index.scss
new file mode 100644
index 0000000..54b8b3b
--- /dev/null
+++ b/components/ImageSwiper/styles/index.scss
@@ -0,0 +1,29 @@
+.image-swiper {
+  position: relative;
+  width: 100%;
+}
+
+.swiper-box {
+  height: 167px;
+}
+
+.thumbnail-box {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 10px;
+}
+
+.thumbnail-item {
+  text-align: center;
+}
+
+.thumbnail-item image {
+  width: 100px;
+  height: 100px;
+  border-radius: 8px;
+}
+
+.thumbnail-item text {
+  display: block;
+  margin-top: 5px;
+}
\ No newline at end of file
diff --git a/components/ModuleTitle/images/2025-07-12_222027.png b/components/ModuleTitle/images/2025-07-12_222027.png
new file mode 100644
index 0000000..c4c7b00
Binary files /dev/null and b/components/ModuleTitle/images/2025-07-12_222027.png differ
diff --git a/components/ModuleTitle/images/wave_icon.png b/components/ModuleTitle/images/wave_icon.png
new file mode 100644
index 0000000..40528f4
Binary files /dev/null and b/components/ModuleTitle/images/wave_icon.png differ
diff --git a/components/ModuleTitle/index.vue b/components/ModuleTitle/index.vue
new file mode 100644
index 0000000..b34eb2c
--- /dev/null
+++ b/components/ModuleTitle/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <view class="module-header mb12">
+    <text class="module-title">{{ title }}</text>
+    <image class="underline" src="./images/wave_icon.png" mode="widthFix"/>
+  </view>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '图片详情'
+  }
+});
+</script>
+
+<style scoped lang="scss">
+@import './styles/index.scss';
+</style>
\ No newline at end of file
diff --git a/components/ModuleTitle/prompt.md b/components/ModuleTitle/prompt.md
new file mode 100644
index 0000000..c906bbc
--- /dev/null
+++ b/components/ModuleTitle/prompt.md
@@ -0,0 +1,14 @@
+## 图片详情组件
+
+组件名称：模块标题组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片 100%还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.module-title
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。
diff --git a/components/ModuleTitle/styles/index.scss b/components/ModuleTitle/styles/index.scss
new file mode 100644
index 0000000..9cf8d7b
--- /dev/null
+++ b/components/ModuleTitle/styles/index.scss
@@ -0,0 +1,25 @@
+.module-header {
+  position: relative;
+  padding: 2px 8px 2px 3px;
+}
+
+.module-title {
+  font-size: 18px;
+  font-family: DingTalk JinBuTi, DingTalk JinBuTi;
+  color: #000;
+  position: relative;
+  z-index: 1;
+}
+
+.underline {
+  position: absolute;
+  bottom: 3px;
+  left: 0;
+  width: 79px;
+  height: 4px;
+  z-index: 0;
+}
+
+.mb12 {
+  margin-bottom: 12px;
+}
\ No newline at end of file