From b2381333eba954ac4c693a791aec491f20c8de3f Mon Sep 17 00:00:00 2001 From: Jerry Date: Thu, 14 Mar 2024 11:12:42 +0800 Subject: [PATCH] fix: https://github.com/JX3BOX/tool/issues/24 --- src/assets/css/design/map.less | 150 ++++++++++++++++++--------------- src/components/design/map.vue | 104 +++++++++++++---------- 2 files changed, 142 insertions(+), 112 deletions(-) diff --git a/src/assets/css/design/map.less b/src/assets/css/design/map.less index 24b1277d..988befea 100644 --- a/src/assets/css/design/map.less +++ b/src/assets/css/design/map.less @@ -30,7 +30,7 @@ } } } - .m-mobile-toolbar { + .m-mobile-layout { display: none; } .m-mapList { @@ -201,7 +201,7 @@ } &:hover { .u-item_bg { - opacity: 1; + opacity: 1 !important; } } } @@ -233,84 +233,98 @@ .m-toolbar { display: none; } - .m-mobile-toolbar { + .m-mobile-layout { display: block; - .m-drawer_open { - position: fixed; - right: 10px; - bottom: 10px; - background-color: rgba(3, 102, 214, 0.9); - color: white; - padding: 6px 10px; - font-size: 12px; - font-weight: bold; - letter-spacing: 3px; - border-radius: 4px; - } - .el-drawer { - width: 80% !important; - .el-drawer__header { - margin-bottom: 0; + .m-mobile-header { + position: relative; + display: flex; + justify-content: space-between; + .m-mobile_maps__title { + .fz(24px,24px); + display: block; + margin: 0; } - .m-m-drawer-body { - padding: 20px; - max-height: calc(100vh - 45px); - overflow-y: scroll; - .m-m-item { - width: calc(50% - 5px); - text-align: center; - border: 1px solid #dbdbdb; - margin-top: 10px; - font-size: 12px; - font-weight: bold; - padding: 10px 0; - border-radius: 4px; - box-sizing: border-box; - box-shadow: 0 0 3px 0 rgba(190, 190, 190, 0.3); - &.active { - background-color: #0366d6; - color: white; - } - &:nth-of-type(2n) { - margin-left: 10px; - } - } - .m-m-drawer-map { - margin-top: 20px; - width: 100%; - margin-left: 0 !important; - background-color: #f1f1f1; - } - .m-m-mapList { - display: flex; - flex-wrap: wrap; + .m-drawer_open { + background-color: rgba(3, 102, 214, 0.9); + color: white; + padding: 6px 10px; + font-size: 14px; + font-weight: bold; + letter-spacing: 5px; + border-radius: 4px; + } + } + .m-mobile-toolbar { + .el-drawer { + width: 80% !important; + .el-drawer__header { + margin-bottom: 0; } - .el-button-group { - width: 100%; - margin-top: 20px; - .el-button { - width: calc(50% - 10px); + .m-m-drawer-body { + padding: 20px; + max-height: calc(100vh - 45px); + overflow-y: scroll; + .m-m-item { + width: calc(50% - 5px); + text-align: center; + border: 1px solid #dbdbdb; + margin-top: 10px; + font-size: 12px; + font-weight: bold; + padding: 10px 0; border-radius: 4px; - &:last-child { - margin-left: 20px; + box-sizing: border-box; + box-shadow: 0 0 3px 0 rgba(190, 190, 190, 0.3); + &.active { + background-color: #0366d6; + color: white; + } + &:nth-of-type(2n) { + margin-left: 10px; + } + } + .m-m-drawer-map { + margin-top: 20px; + width: 100%; + margin-left: 0 !important; + background-color: #f1f1f1; + } + .m-m-mapList { + display: flex; + flex-wrap: wrap; + } + .el-button-group { + width: 100%; + margin-top: 20px; + .el-button { + width: calc(50% - 10px); + border-radius: 4px; + &:last-child { + margin-left: 20px; + } } } } } - } - // Element - .el-drawer__wrapper { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: hidden; - margin: 0; + // Element + .el-drawer__wrapper { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + margin: 0; + } } } } } +@media screen and(max-width:@phone) { + .m-m-drawer-map { + display: none; + } +} .m-maps-dialog { .m-city { diff --git a/src/components/design/map.vue b/src/components/design/map.vue index a40c8639..2c5275af 100644 --- a/src/components/design/map.vue +++ b/src/components/design/map.vue @@ -10,10 +10,16 @@ v-if="!(item.szDisplayName.includes('战乱') || item.szDisplayName.includes('乱世'))" :key="id" :style="`left:${item.Left || 0}px;top:${item.Top || 0}px`" - @click="showChild(item)" + @click="showChild(item, id)" >
- + {{ item.szDisplayName }}
@@ -107,7 +113,6 @@ -

{{ title }}

@@ -138,51 +143,56 @@
-
-
- 所有地图 -
- -
- - - -
- 世界地图 -
-
+
+
+

{{ title }}

+
+ 所有地图 + +
+
+
+ +
+ + +
- {{ item.DisplayName }} + 世界地图 +
+
+
+ {{ item.DisplayName }} +
+ + 上一页 + + 下一页 + + +
- - 上一页 - - 下一页 - - - -
- + +
@@ -224,6 +234,7 @@ export default { before: 0, }, mobileMapListDrawer: false, + isPhone: window.innerWidth < 720 ? true : false, }; }, computed: { @@ -264,10 +275,11 @@ export default { }, }, mounted() { - this.load(); + this.load(true); }, methods: { changeMap(mapId) { + this.visible = false; this.mapId = mapId || 0; }, showMap({ dwMapID, szComment }) { @@ -289,7 +301,7 @@ export default { } this.page = page < 0 ? 0 : page; }, - load() { + load(firstLoad) { this.loading = true; getWorldMap() .then((res) => { @@ -308,10 +320,13 @@ export default { }); getMaps(this.params).then((res) => { this.mapsList = res.data.data.list || []; + if (firstLoad && this.isPhone && this.mapsList.length) { + this.changeMap(this.mapsList[0].ID); + } this.count = res.data.data.count; }); }, - showChild({ szChildCityMaps, szChildCopyMaps, Left, Top }) { + showChild({ szChildCityMaps, szChildCopyMaps, Left, Top }, itemIndex) { // 定位地图位置到当前选择位置 this.scale = { x: 4920 - Left - 2444, y: 3456 - Top - 2979, scale: 1 }; let city = []; @@ -353,6 +368,7 @@ export default { maxCurrent: 0, }; } + this.selectMapOptions.actId = itemIndex; this.visible = true; } },