diff --git a/src/assets/page1/bg.jpg b/public/page1/bg.jpg
similarity index 100%
rename from src/assets/page1/bg.jpg
rename to public/page1/bg.jpg
diff --git a/src/assets/page1/in-active.png b/public/page1/in-active.png
similarity index 100%
rename from src/assets/page1/in-active.png
rename to public/page1/in-active.png
diff --git a/src/assets/page1/in-hover.png b/public/page1/in-hover.png
similarity index 100%
rename from src/assets/page1/in-hover.png
rename to public/page1/in-hover.png
diff --git a/src/assets/page1/in.png b/public/page1/in.png
similarity index 100%
rename from src/assets/page1/in.png
rename to public/page1/in.png
diff --git a/src/assets/page1/out-active.png b/public/page1/out-active.png
similarity index 100%
rename from src/assets/page1/out-active.png
rename to public/page1/out-active.png
diff --git a/src/assets/page1/out-hover.png b/public/page1/out-hover.png
similarity index 100%
rename from src/assets/page1/out-hover.png
rename to public/page1/out-hover.png
diff --git a/src/assets/page1/out.png b/public/page1/out.png
similarity index 100%
rename from src/assets/page1/out.png
rename to public/page1/out.png
diff --git a/public/page2/Hand.png b/public/page2/Hand.png
new file mode 100644
index 0000000..5ef78eb
Binary files /dev/null and b/public/page2/Hand.png differ
diff --git a/public/page2/LowerLimb.png b/public/page2/LowerLimb.png
new file mode 100644
index 0000000..ab6a8df
Binary files /dev/null and b/public/page2/LowerLimb.png differ
diff --git a/public/page2/UpperLimb.png b/public/page2/UpperLimb.png
new file mode 100644
index 0000000..bbfaf2c
Binary files /dev/null and b/public/page2/UpperLimb.png differ
diff --git a/public/page2/bg.jpg b/public/page2/bg.jpg
new file mode 100644
index 0000000..8a44b75
Binary files /dev/null and b/public/page2/bg.jpg differ
diff --git a/public/page2/left-disable.png b/public/page2/left-disable.png
new file mode 100644
index 0000000..76ba17e
Binary files /dev/null and b/public/page2/left-disable.png differ
diff --git a/public/page2/left.png b/public/page2/left.png
new file mode 100644
index 0000000..167e429
Binary files /dev/null and b/public/page2/left.png differ
diff --git a/public/page2/return-active.png b/public/page2/return-active.png
new file mode 100644
index 0000000..37ed972
Binary files /dev/null and b/public/page2/return-active.png differ
diff --git a/public/page2/return-hover.png b/public/page2/return-hover.png
new file mode 100644
index 0000000..58863f8
Binary files /dev/null and b/public/page2/return-hover.png differ
diff --git a/public/page2/return.png b/public/page2/return.png
new file mode 100644
index 0000000..9d93e7d
Binary files /dev/null and b/public/page2/return.png differ
diff --git a/public/page2/right-disable.png b/public/page2/right-disable.png
new file mode 100644
index 0000000..1c64cf5
Binary files /dev/null and b/public/page2/right-disable.png differ
diff --git a/public/page2/right.png b/public/page2/right.png
new file mode 100644
index 0000000..3236065
Binary files /dev/null and b/public/page2/right.png differ
diff --git a/src/config/trainSite.js b/src/config/trainSite.js
index 6310ff9..0b497e4 100644
--- a/src/config/trainSite.js
+++ b/src/config/trainSite.js
@@ -1,7 +1,7 @@
 // 训练列表
 // eslint-disable-next-line import/prefer-default-export
 export const TRAIN_SITE_LIST = [
-  { id: '1', name: 'UpperLimb', text: '上肢训练', order: 1 },
-  { id: '2', name: 'Hand', text: '手部训练', order: 2 },
-  { id: '3', name: 'LowerLimb', text: '下肢训练', order: 3 },
+  { id: '1', name: 'UpperLimb', text: '上肢训练', order: 1, image: '/page2/UpperLimb.png' },
+  { id: '2', name: 'Hand', text: '手部训练', order: 2, image: '/page2/Hand.png' },
+  { id: '3', name: 'LowerLimb', text: '下肢训练', order: 3, image: '/page2/LowerLimb.png' },
 ];
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 55d7157..a244c3e 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -22,7 +22,7 @@ function handleQuit() {
   left: 50%;
   top: 50%;
   transform: translate3d(-50%, -50%, 0);
-  background: url(../assets/page1/bg.jpg) no-repeat center center;
+  background: url(/page1/bg.jpg) no-repeat center center;
   background-size: 1280rem 720rem;
 }
 .btn-container {
@@ -40,22 +40,22 @@ function handleQuit() {
   background-position: center;
 }
 .btn-in {
-  background-image: url('../assets/page1/in.png');
+  background-image: url('/page1/in.png');
   margin-bottom: 20rem;
 }
 .btn-in:hover {
-  background-image: url('../assets/page1/in-hover.png');
+  background-image: url('/page1/in-hover.png');
 }
 .btn-in:active {
-  background-image: url('../assets/page1/in-active.png');
+  background-image: url('/page1/in-active.png');
 }
 .btn-out {
-  background-image: url('../assets/page1/out.png');
+  background-image: url('/page1/out.png');
 }
 .btn-out:hover {
-  background-image: url('../assets/page1/out-hover.png');
+  background-image: url('/page1/out-hover.png');
 }
 .btn-out:active {
-  background-image: url('../assets/page1/out-active.png');
+  background-image: url('/page1/out-active.png');
 }
 </style>
diff --git a/src/views/TrainSiteList.vue b/src/views/TrainSiteList.vue
index b9643f0..9937f07 100644
--- a/src/views/TrainSiteList.vue
+++ b/src/views/TrainSiteList.vue
@@ -1,7 +1,10 @@
 <template>
-  训练部位选择
-  <div v-for="item in TRAIN_SITE_LIST" :key="item.id" @click="selectSite(item)">
-    {{ item.text }}
+  <div class="container">
+    <el-carousel :autoplay="false" indicator-position="none" type="card" class="content" :initial-index="activeIndex" @change="onChange">
+      <el-carousel-item v-for="(item, i) in TRAIN_SITE_LIST" :key="item.id" @click="selectSite(item, i)">
+        <div class="train-image" :style="{ 'background-image': `url(${item.image})` }"></div>
+      </el-carousel-item>
+    </el-carousel>
   </div>
 </template>
 
@@ -9,19 +12,81 @@
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { TRAIN_SITE_LIST } from 'config/trainSite';
+import { ref } from 'vue';
 
 const store = useStore();
 const router = useRouter();
 
+const activeIndex = ref(0);
+
+/**
+ * 切换轮播图
+ * @param {number} index 所点击的索引值
+ */
+function onChange(index) {
+  activeIndex.value = index;
+}
+
+
 /**
  * 设置选中的训练部位名称存到store里
  * 跳转到游戏列表界面
  * @param {Object} site 训练部位配置对象
  */
-function selectSite(site) {
+function selectSite(site, i) {
+  if (i !== activeIndex.value) return;
   store.commit('setSelectedSite', site.name);
   router.push({ name: 'Game' });
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.container {
+  width: 1280rem;
+  height: 720rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  background: url(/page2/bg.jpg) no-repeat center center;
+  background-size: 1280rem 720rem;
+}
+.content {
+  position: absolute;
+  left: 50%;
+  width: 1200rem;
+  height: 564rem;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+.train-image {
+  width: 600rem;
+  height: 564rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 325rem 564rem;
+}
+.content :deep(.el-carousel__item--card) {
+  width: 50%;
+}
+.content :deep(.el-carousel__container) {
+  height: 564rem;
+}
+.content :deep(.el-carousel__mask) {
+  display: none;
+}
+.content :deep(.el-carousel__arrow) {
+  width: 40rem;
+  height: 64rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 40rem 64rem;
+  color: transparent;
+}
+.content :deep(.el-carousel__arrow--left) {
+  background-image: url("/page2/left.png");
+}
+.content :deep(.el-carousel__arrow--right) {
+  background-image: url("/page2/right.png");
+}
+</style>
diff --git a/vite.config.js b/vite.config.js
index 60d02ca..fc2432b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,3 +1,5 @@
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 import { defineConfig } from 'vite';
 import path from 'path';
 import vue from '@vitejs/plugin-vue';
@@ -9,7 +11,7 @@ const resolve = dir => path.join(__dirname, dir);
 // https://vitejs.dev/config/
 export default defineConfig({
   base: '/kangfu/game/start/',
-  plugins: [vue(), VitePWA(), viteCompression()],
+  plugins: [vue(), VitePWA(), Components({ resolvers: [ElementPlusResolver()] }), viteCompression()],
   resolve: {
     alias: {
       '~': __dirname,