From a061e304cdb6997432dbba367f5e07f551f49f89 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Thu, 23 Dec 2021 09:19:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E9=9D=99=E6=80=81?=
 =?UTF-8?q?=E8=B5=84=E6=BA=90=E7=9A=84=E9=A5=BF=E8=B7=AF=E5=BE=84=EF=BC=8C?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E6=9C=8D=E5=8A=A1=E5=99=A8=E7=8E=AF=E5=A2=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/trainSite.js     |  6 +++---
 src/views/GameList.vue      | 13 +++++--------
 src/views/TrainSiteList.vue |  8 ++++----
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/config/trainSite.js b/src/config/trainSite.js
index 0b497e4..aa54c41 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, 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' },
+  { 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/GameList.vue b/src/views/GameList.vue
index 63d072c..0abad89 100644
--- a/src/views/GameList.vue
+++ b/src/views/GameList.vue
@@ -1,10 +1,5 @@
 <template>
-  <!--  <button @click="$router.back()">返回</button>-->
-  <!--  游戏列表选择-->
-  <!--  <div v-for="item in games" :key="item.id" @click="openGame(item.name)">-->
-  <!--    {{ item.text }}-->
-  <!--  </div>-->
-  <div class="container" :style="{ 'background-image': `url(${gameImage})` }">
+  <div class="container" :style="{ 'background-image': `url(${base}${gameImage})` }">
     <div class="back" @click="$router.back()"></div>
     <div class="btn btn-left" :class="{ disabled: page === 0 }" @click="handlePrev"></div>
     <div class="small-container">
@@ -14,7 +9,7 @@
         :key="item.id"
         @mouseover="mouseover(item.name)"
         @click="openGame(item.name)"
-        :style="{ 'background-image': `url(/page3/${item.name}.jpg)` }"
+        :style="{ 'background-image': `url(${base}page3/${item.name}.jpg)` }"
       ></div>
     </div>
     <div class="btn btn-right" :class="{ disabled: page === total - 1 }" @click="handleNext"></div>
@@ -28,8 +23,10 @@ import { computed, ref } from 'vue';
 // TODO: 训练部位的本地记录 或者 url记录
 
 const store = useStore();
+const base = import.meta.env.BASE_URL;
+
 const allGames = computed(() => store.getters.selectedGames); // 当前训练部位对应的游戏
-const gameImage = ref(`/page3/${allGames.value[0].name}.jpg`); // 大图背景
+const gameImage = ref(`page3/${allGames.value[0].name}.jpg`); // 大图背景
 const page = ref(0); // 第几页
 const size = 4;
 const count = computed(() => allGames.value.length); // 游戏个数
diff --git a/src/views/TrainSiteList.vue b/src/views/TrainSiteList.vue
index 9937f07..8684535 100644
--- a/src/views/TrainSiteList.vue
+++ b/src/views/TrainSiteList.vue
@@ -2,7 +2,7 @@
   <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>
+        <div class="train-image" :style="{ 'background-image': `url(${base}${item.image})` }"></div>
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -17,6 +17,7 @@ import { ref } from 'vue';
 const store = useStore();
 const router = useRouter();
 
+const base = import.meta.env.BASE_URL;
 const activeIndex = ref(0);
 
 /**
@@ -27,7 +28,6 @@ function onChange(index) {
   activeIndex.value = index;
 }
 
-
 /**
  * 设置选中的训练部位名称存到store里
  * 跳转到游戏列表界面
@@ -84,9 +84,9 @@ function selectSite(site, i) {
   color: transparent;
 }
 .content :deep(.el-carousel__arrow--left) {
-  background-image: url("/page2/left.png");
+  background-image: url('/page2/left.png');
 }
 .content :deep(.el-carousel__arrow--right) {
-  background-image: url("/page2/right.png");
+  background-image: url('/page2/right.png');
 }
 </style>