分流地图等图片静态资源

src/config/assets.ts

@@ -44,7 +44,12 @@ export const playerImg2 = root + '/img/player2.png';
 export const warning_icon = root + '/img/tip/warning.png';
 
 export const dungeon_icon = {
+  map: root + '/img/map/map.jpg',
   player: root + '/img/map/player-s.png',
   monster: root + '/img/map/monster.png',
   boss: root + '/img/map/boss.png',
+  0: root + '/img/map/d1.png',
+  1: root + '/img/map/d1.png',
+  2: root + '/img/map/d2.png',
+  3: root + '/img/map/d3.png',
 };

src/views/dungeon/dungeon.vue

@@ -1,7 +1,9 @@
 <template>
     <div :class="['dungeon', 'df' + dungeon.difficulty]" @contextmenu.prevent.stop="emit('battle')"
         @dblclick="emit('battle')" @mouseover="showTips" @mouseleave="closeTips">
-        <div class="icon"></div>
+        <div class="icon">
+            <img class="icon-img" :src="dungeon_icon[dungeon.difficulty]">
+        </div>
         <div class="lv">lv{{ dungeon.lv }}</div>
         <!--  -->
         <div class="tip" v-if="tipsShow" :style='tipsStyle'>
@@ -16,6 +18,7 @@
 import { useStore } from "vuex";
 import { computed, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue3-i18n";
+import { dungeon_icon } from "@/config";
 
 const { t } = useI18n();
 const { state, commit, dispatch } = useStore();
@@ -88,11 +91,15 @@ onMounted(() => {
         margin-top: 0.2rem;
         margin-left: 0.2rem;
         border-radius: 50%;
-        background-image: url(@/assets/icons/d1.png);
         background-color: rgba(100, 255, 36, 0.6);
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 30px 29px;
+
+        .icon-img {
+            width: 100%;
+            height: 100%;
+        }
     }
 
     .lv {
@@ -122,7 +129,6 @@ onMounted(() => {
     box-shadow: 0 0 4px 4px rgba(245, 241, 0, 0.6);
 
     .icon {
-        background-image: url(@/assets/icons/d2.png);
         background-color: rgba(245, 241, 0, 0.6);
     }
 
@@ -132,7 +138,6 @@ onMounted(() => {
     box-shadow: 0 0 4px 4px rgba(245, 54, 54, 0.5);
 
     .icon {
-        background-image: url(@/assets/icons/d3.png);
         background-color: rgba(245, 54, 54, 0.6);
     }
 

src/views/dungeon/dungeonMap.vue

@@ -5,6 +5,7 @@
 
     <teleport to="#main" v-if="showMap">
         <div id="map" class="map">
+            <img class="map-img" :src="dungeon_icon.map">
             <span v-if="!state.battle.battleShow">
                 <DungeonView v-for="item in dungeons" :dungeon="item" :key="item.lv" @battle="startBattle(item)" />
                 <img :src="refresh_icon" class="refresh" @click="refreshDungeons"></img>
@@ -22,7 +23,7 @@ import { useStore } from "vuex";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 import { useI18n } from "vue3-i18n";
 import { Tooltip, Dialog } from "@/components"
-import { menu_icons, Dungeon, refresh_icon, close_icon } from "@/config";
+import { menu_icons, Dungeon, refresh_icon, close_icon, dungeon_icon } from "@/config";
 import { randomDungeonDifficulty } from "@/tool";
 import DungeonView from "./dungeon.vue"
 import BattleView from "./battle.vue"
@@ -98,7 +99,11 @@ onBeforeUnmount(() => {
     background-repeat: no-repeat;
     background-size: 100% 100%;
     position: relative;
-    background-image: url(@/assets/icons/map.jpg);
+
+    .map-img {
+        width: 100%;
+        height: 100%;
+    }
 
     * {
         color: white;