Skip to content

Commit

Permalink
fix: #24
Browse files Browse the repository at this point in the history
  • Loading branch information
Jerry authored and Jerry committed Mar 14, 2024
1 parent 07fc394 commit b238133
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 112 deletions.
150 changes: 82 additions & 68 deletions src/assets/css/design/map.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
}
}
}
.m-mobile-toolbar {
.m-mobile-layout {
display: none;
}
.m-mapList {
Expand Down Expand Up @@ -201,7 +201,7 @@
}
&:hover {
.u-item_bg {
opacity: 1;
opacity: 1 !important;
}
}
}
Expand Down Expand Up @@ -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 {
Expand Down
104 changes: 60 additions & 44 deletions src/components/design/map.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
>
<div class="u-map-city_name">
<img class="u-item_bg" :src="getIcon('newworldmap_03_10')" />
<img
class="u-item_bg"
:style="{
opacity: visible && selectMapOptions.actId == id ? 1 : 0,
}"
:src="getIcon('newworldmap_03_10')"
/>
<span class="u-item_text">{{ item.szDisplayName }}</span>
</div>
<!-- 暂时无用图标 -->
Expand Down Expand Up @@ -107,7 +113,6 @@
</div>
</div>
</div>

<div class="m-toolbar">
<h1 class="m-maps__title">{{ title }}</h1>
<el-input size="small" v-model="search" clearable>
Expand Down Expand Up @@ -138,51 +143,56 @@
</div>

<!-- 移动端查看所有地图信息 -->
<div class="m-mobile-toolbar">
<div @click="mobileMapListDrawer = true" class="m-drawer_open">
所有地图
<i class="el-icon-search el-icon--right"></i
></div>
<el-drawer title="所有地图" :visible.sync="mobileMapListDrawer">
<div class="m-m-drawer-body">
<el-input size="small" v-model="search" clearable>
<template slot="prepend">地图</template>
</el-input>
<div
class="m-m-drawer-map m-m-item"
@click="
mobileMapListDrawer = false;
changeWorldMap();
"
>
世界地图
</div>
<div :class="[{ mapId }, 'm-m-mapList']">
<div class="m-mobile-layout">
<div class="m-mobile-header">
<h1 class="m-mobile_maps__title">{{ title }}</h1>
<div @click="mobileMapListDrawer = true" class="m-drawer_open">
所有地图
<i class="el-icon-search el-icon--right"></i>
</div>
</div>
<div class="m-mobile-toolbar">
<el-drawer title="所有地图" :visible.sync="mobileMapListDrawer">
<div class="m-m-drawer-body">
<el-input size="small" v-model="search" clearable>
<template slot="prepend">地图</template>
</el-input>
<div
v-for="item in mapsList"
:key="item.ID"
:label="item.MapName"
:value="item.ID"
class="m-m-drawer-map m-m-item"
@click="
mobileMapListDrawer = false;
changeMap(item.ID);
changeWorldMap();
"
:class="['m-m-item', { active: item.ID == mapId }]"
>
{{ item.DisplayName }}
世界地图
</div>
<div :class="[{ mapId }, 'm-m-mapList']">
<div
v-for="item in mapsList"
:key="item.ID"
:label="item.MapName"
:value="item.ID"
@click="
mobileMapListDrawer = false;
changeMap(item.ID);
"
:class="['m-m-item', { active: item.ID == mapId }]"
>
{{ item.DisplayName }}
</div>
</div>
<el-button-group>
<el-button type="primary" size="small" icon="el-icon-arrow-left" @click="changePage('prev')"
>上一页</el-button
>
<el-button type="primary" size="small" @click="changePage('next')">
下一页
<i class="el-icon-arrow-right el-icon--right"></i>
</el-button>
</el-button-group>
</div>
<el-button-group>
<el-button type="primary" size="small" icon="el-icon-arrow-left" @click="changePage('prev')"
>上一页</el-button
>
<el-button type="primary" size="small" @click="changePage('next')">
下一页
<i class="el-icon-arrow-right el-icon--right"></i>
</el-button>
</el-button-group>
</div>
</el-drawer>
</el-drawer>
</div>
</div>
</div>
</template>
Expand Down Expand Up @@ -224,6 +234,7 @@ export default {
before: 0,
},
mobileMapListDrawer: false,
isPhone: window.innerWidth < 720 ? true : false,
};
},
computed: {
Expand Down Expand Up @@ -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 }) {
Expand All @@ -289,7 +301,7 @@ export default {
}
this.page = page < 0 ? 0 : page;
},
load() {
load(firstLoad) {
this.loading = true;
getWorldMap()
.then((res) => {
Expand All @@ -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 = [];
Expand Down Expand Up @@ -353,6 +368,7 @@ export default {
maxCurrent: 0,
};
}
this.selectMapOptions.actId = itemIndex;
this.visible = true;
}
},
Expand Down

0 comments on commit b238133

Please sign in to comment.