feat: 1.切图,图片路径放到public里;2.选择训练部位的界面及功能实现

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' },
 ];

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>

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>

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,