Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8f2cab0a 1 parent 6aa569d0

3D地图显示样式优化

Inline Side-by-side
Showing 4 changed files with 66 additions and 18 deletions
......@@ -360,11 +360,21 @@ button:focus {
/* Current level */
.level.level--current {
-webkit-transform: translateZ(15vmin) rotate3d(0,0,1,20deg);
-webkit-transform: translateZ(12vmin) rotate3d(0,0,1,20deg);
/* go to center */
transform: translateZ(12vmin) rotate3d(0,0,1,20deg);
}
/* 移动端样式 */
@media (max-width: 767px) {
/* 在窗口宽度小于等于767px时应用的样式 */
.level.level--current {
-webkit-transform: translateZ(0rem) rotate3d(0,0,1,20deg);
/* go to center */
transform: translateZ(0rem) rotate3d(0,0,1,20deg);
}
}
/* Navigation classes */
.levels--open .level,
.levels--open .level::after {
......
<!--
* @Date: 2023-07-27 11:04:04
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-07 13:46:36
* @LastEditTime: 2023-08-07 18:13:15
* @FilePath: /map-demo/src/components/Floor/index.vue
* @Description: 文件描述
-->
......@@ -40,7 +40,7 @@
<img class="surroundings__map" src="./surroundings.svg" alt="Surroundings" />
</div> -->
<div class="levels">
<div v-for="(level, index) in level_list" :key="index" @click="onFloorClick(index + 1)"
<div v-for="(level, index) in level_list" :key="index" @click.capture="onFloorClick(index + 1)"
:class="['level', 'level--' + (index + 1)]">
<div v-html="level.svg"></div>
<div class="level__pins">
......@@ -151,6 +151,11 @@ export default {
}
},
async mounted() {
if (!wxInfo().isPC) { // 移动端
$('.level.level--current').css('transform', 'translateZ(1rem) rotate3d(0,0,1,20deg)');
} else { // PC端
$('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)');
}
},
methods: {
clearPinShow() {
......@@ -164,13 +169,18 @@ export default {
$('.levels').addClass('levels--open').addClass(`levels--selected-${level}`);
$(`.level--${level}`).addClass('level--current');
$(`.level--${level} .level__pins`).addClass('level__pins--active');
// if (!wxInfo().isPC) { // 移动端
// $('.level.level--current').css('transform', 'translateZ(5rem) rotate3d(0,0,1,20deg)');
// } else { // PC端
// $('.level.level--current').css('transform', 'translateZ(20vmin) rotate3d(0,0,1,20deg)');
// }
},
onCloseLevel() {
this.show_popup = false;
let level = this.level_show;
$('.mall').removeClass('mall--content-open');
$('.levels').removeClass('levels--open').removeClass(`levels--selected-${level}`);
$('.level.level--current').css('transform', '');
// $('.level.level--current').css('transform', '');
$(`.level--${level}`).removeClass('level--current');
$(`.level--${level} .level__pins`).removeClass('level__pins--active');
this.level_show = '';
......@@ -217,16 +227,16 @@ export default {
this.onFloorClick(category);
// 选择锚点样式
$(currentTarget).addClass('pin--active');
$('.mall').addClass('mall--content-open');
setTimeout(() => {
// 打开锚点详情
this.show_popup = true;
// 把图层推高
$('.mall').addClass('mall--content-open');
if (!wxInfo().isPC) { // 移动端
$('.level.level--current').css('transform', 'translateZ(0) rotate3d(0,0,1,20deg)');
} else { // PC端
$('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)');
}
// if (!wxInfo().isPC) { // 移动端
// $('.level.level--current').css('transform', 'translateZ(1rem) rotate3d(0,0,1,20deg)');
// } else { // PC端
// $('.level.level--current').css('transform', 'translateZ(20vmin) rotate3d(0,0,1,20deg)');
// }
this.level_list.forEach(item => {
item.pin.forEach(x => {
if (x.space === val) {
......@@ -254,11 +264,11 @@ export default {
this.popup_content = item?.affix?.content;
// 把图层推高
$('.mall').addClass('mall--content-open');
if (!wxInfo().isPC) { // 移动端
$('.level.level--current').css('transform', 'translateZ(0) rotate3d(0,0,1,20deg)');
} else { // PC端
$('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)');
}
// if (!wxInfo().isPC) { // 移动端
// $('.level.level--current').css('transform', 'translateZ(1rem) rotate3d(0,0,1,20deg)');
// } else { // PC端
// $('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)');
// }
},
onSearchUpdate () {
this.search_list.forEach((item) => {
......
/*
* @Date: 2023-08-01 13:55:03
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-04 17:05:49
* @LastEditTime: 2023-08-07 16:02:25
* @FilePath: /map-demo/src/components/Floor/pin.js
* @Description: 文件描述
*/
......@@ -328,6 +328,10 @@ const testInfo = [
space: 3.01,
icon: 'tea',
style: { top: '17vmin', left: '15vmin' },
affix: {
title: '宿舍301',
content: '休息室',
},
},
{
id: 'pin--3-2',
......@@ -335,6 +339,10 @@ const testInfo = [
space: 3.02,
icon: 'pyramid',
style: { top: '42vmin', left: '5vmin' },
affix: {
title: '宿舍302',
content: '休息室',
},
},
{
id: 'pin--3-3',
......@@ -342,6 +350,10 @@ const testInfo = [
space: 3.03,
icon: 'shoe',
style: { top: '19vmin', left: '85vmin' },
affix: {
title: '宿舍303',
content: '休息室',
},
},
{
id: 'pin--3-4',
......@@ -349,6 +361,10 @@ const testInfo = [
space: 3.04,
icon: 'shirt',
style: { top: '61vmin', left: '57vmin' },
affix: {
title: '宿舍304',
content: '休息室',
},
},
{
id: 'pin--3-5',
......@@ -356,6 +372,10 @@ const testInfo = [
space: 3.05,
icon: 'tree',
style: { top: '58vmin', left: '25vmin' },
affix: {
title: '宿舍305',
content: '休息室',
},
},
{
id: 'pin--3-6',
......@@ -363,6 +383,10 @@ const testInfo = [
space: 3.06,
icon: 'grass',
style: { top: '30vmin', left: '57vmin' },
affix: {
title: '宿舍306',
content: '休息室',
},
},
{
id: 'pin--3-7',
......@@ -370,6 +394,10 @@ const testInfo = [
space: 3.07,
icon: 'star',
style: { top: '32vmin', left: '37vmin' },
affix: {
title: '宿舍307',
content: '休息室',
},
},
],
},
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-07 10:58:59
* @LastEditTime: 2023-08-07 18:20:34
* @FilePath: /map-demo/src/views/inner.vue
* @Description: 内部地图主体页面
-->
......@@ -277,7 +277,7 @@ export default {
point_range: [ // 景区范围经纬度
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
],
show_floor_popup: true,
show_floor_popup: false,
}
},
async mounted() {
......