Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6aa569d0 1 parent 5f51a51b

点击pin时，详情显示的效果优化

Inline Side-by-side
Showing 6 changed files with 115 additions and 14 deletions
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-26 23:52:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-19 10:42:05
* @LastEditTime: 2023-08-07 13:32:25
* @FilePath: /map-demo/src/App.vue
* @Description:
-->
......
......@@ -362,7 +362,7 @@ button:focus {
.level.level--current {
-webkit-transform: translateZ(15vmin) rotate3d(0,0,1,20deg);
/* go to center */
transform: translateZ(-3rem) rotate3d(0,0,1,20deg);
transform: translateZ(12vmin) rotate3d(0,0,1,20deg);
}
/* Navigation classes */
......@@ -849,7 +849,7 @@ button:focus {
.pin--active .icon--pin {
stroke: #515158;
stroke-width: 15px;
stroke-width: 2vw;
}
.icon--pin {
......
<!--
* @Date: 2023-07-27 11:04:04
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-04 16:57:15
* @LastEditTime: 2023-08-07 13:46:36
* @FilePath: /map-demo/src/components/Floor/index.vue
* @Description: 文件描述
-->
......@@ -98,6 +98,7 @@ import './floor.css';
import $ from 'jquery';
import SvgIcon from './svgIcon.vue'
import Data from './pin'
import { wxInfo } from '@/utils/tools'
export default {
data() {
......@@ -155,11 +156,11 @@ export default {
clearPinShow() {
$('.level__pins').children('.pin').each((index, ele) => {
$(ele).removeClass('pin--active');
})
});
$('.mall').removeClass('mall--content-open');
},
onFloorClick(level) {
this.level_show = level;
$('.mall').addClass('mall--content-open');
$('.levels').addClass('levels--open').addClass(`levels--selected-${level}`);
$(`.level--${level}`).addClass('level--current');
$(`.level--${level} .level__pins`).addClass('level__pins--active');
......@@ -169,6 +170,7 @@ export default {
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}`).removeClass('level--current');
$(`.level--${level} .level__pins`).removeClass('level__pins--active');
this.level_show = '';
......@@ -202,8 +204,9 @@ export default {
// 测试锚点
let currentTarget = null;
let category = null;
let space = null;
$('.level__pins').children('.pin').each((index, ele) => {
let space = $(ele).data('space'); // 锚点标记
space = $(ele).data('space'); // 锚点标记
if (space === val) { // 匹配符合的dom节点
category = parseInt(space);// 获取图层标记
currentTarget = ele;
......@@ -217,6 +220,22 @@ export default {
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)');
}
this.level_list.forEach(item => {
item.pin.forEach(x => {
if (x.space === val) {
// 打开 pin 详情信息
this.popup_title = x?.affix?.title;
this.popup_content = x?.affix?.content;
}
})
});
}, 500);
// 关闭搜索弹框
this.show_search_popup = false;
......@@ -227,11 +246,19 @@ export default {
},
clickPin (item, evt) { // 点击pin操作
this.clearPinShow();
$(evt.target).parents('a.pin').addClass('pin--active');
$(evt.target).parents('a.pin').addClass('pin--active'); // pin点击效果
//
this.show_popup = true;
// 打开 pin 详情信息
this.popup_title = item?.affix?.title;
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)');
}
},
onSearchUpdate () {
this.search_list.forEach((item) => {
......
/*
* @Date: 2023-08-01 13:55:03
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-04 16:06:07
* @LastEditTime: 2023-08-04 17:05:49
* @FilePath: /map-demo/src/components/Floor/pin.js
* @Description: 文件描述
*/
......@@ -82,6 +82,10 @@ const testInfo = [
space: 1.01,
icon: 'appleheart',
style: { top: '60vmin', left: '8vmin' },
affix: {
title: '宿舍101',
content: '休息室',
},
},
{
id: 'pin--1-2',
......@@ -89,6 +93,10 @@ const testInfo = [
space: 1.02,
icon: 'bananas',
style: { top: '15vmin', left: '15vmin' },
affix: {
title: '宿舍102',
content: '休息室',
},
},
{
id: 'pin--1-3',
......@@ -96,6 +104,10 @@ const testInfo = [
space: 1.03,
icon: 'origami',
style: { top: '15vmin', left: '88vmin' },
affix: {
title: '宿舍103',
content: '休息室',
},
},
{
id: 'pin--1-4',
......@@ -103,6 +115,10 @@ const testInfo = [
space: 1.04,
icon: 'dress',
style: { top: '40vmin', left: '77vmin' },
affix: {
title: '宿舍104',
content: '休息室',
},
},
{
id: 'pin--1-5',
......@@ -110,6 +126,10 @@ const testInfo = [
space: 1.05,
icon: 'tree2',
style: { top: '33vmin', left: '38vmin' },
affix: {
title: '宿舍105',
content: '休息室',
},
},
{
id: 'pin--1-6',
......@@ -117,6 +137,10 @@ const testInfo = [
space: 1.06,
icon: 'avocado',
style: { top: '6vmin', left: '27vmin' },
affix: {
title: '宿舍106',
content: '休息室',
},
},
{
id: 'pin--1-7',
......@@ -124,6 +148,10 @@ const testInfo = [
space: 1.07,
icon: 'cake',
style: { top: '36vmin', left: '61vmin' },
affix: {
title: '宿舍107',
content: '休息室',
},
},
{
id: 'pin--1-8',
......@@ -131,6 +159,10 @@ const testInfo = [
space: 1.08,
icon: 'mushroom',
style: { top: '9vmin', left: '59vmin' },
affix: {
title: '宿舍108',
content: '休息室',
},
},
{
id: 'pin--1-9',
......@@ -138,6 +170,10 @@ const testInfo = [
space: 1.09,
icon: 'pear',
style: { top: '8vmin', left: '51vmin' },
affix: {
title: '宿舍109',
content: '休息室',
},
},
],
},
......@@ -175,6 +211,10 @@ const testInfo = [
space: 2.01,
icon: 'pepper',
style: { top: '7vmin', left: '22vmin' },
affix: {
title: '宿舍201',
content: '休息室',
},
},
{
id: 'pin--2-2',
......@@ -182,6 +222,10 @@ const testInfo = [
space: 2.02,
icon: 'rocket',
style: { top: '39vmin', left: '5vmin' },
affix: {
title: '宿舍202',
content: '休息室',
},
},
{
id: 'pin--2-3',
......@@ -189,6 +233,10 @@ const testInfo = [
space: 2.03,
icon: 'bug',
style: { top: '21vmin', left: '84vmin' },
affix: {
title: '宿舍203',
content: '休息室',
},
},
{
id: 'pin--2-4',
......@@ -196,6 +244,10 @@ const testInfo = [
space: 2.04,
icon: 'books',
style: { top: '39vmin', left: '53vmin' },
affix: {
title: '宿舍204',
content: '休息室',
},
},
{
id: 'pin--2-5',
......@@ -203,6 +255,10 @@ const testInfo = [
space: 2.05,
icon: 'eggplant',
style: { top: '14vmin', left: '50vmin' },
affix: {
title: '宿舍205',
content: '休息室',
},
},
{
id: 'pin--2-6',
......@@ -210,6 +266,10 @@ const testInfo = [
space: 2.06,
icon: 'strawberry',
style: { top: '60vmin', left: '15vmin' },
affix: {
title: '宿舍206',
content: '休息室',
},
},
{
id: 'pin--2-7',
......@@ -217,6 +277,10 @@ const testInfo = [
space: 2.07,
icon: 'heart',
style: { top: '34vmin', left: '37vmin' },
affix: {
title: '宿舍207',
content: '休息室',
},
},
{
id: 'pin--2-8',
......@@ -224,6 +288,10 @@ const testInfo = [
space: 2.08,
icon: 'wrench',
style: { top: '52vmin', left: '74vmin' },
affix: {
title: '宿舍208',
content: '休息室',
},
},
],
},
......
/*
* @Date: 2022-04-18 15:59:42
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-30 13:54:32
* @FilePath: /tswj/src/utils/tools.js
* @LastEditTime: 2023-08-07 13:31:59
* @FilePath: /map-demo/src/utils/tools.js
* @Description: 文件描述
*/
import dayjs from 'dayjs';
......@@ -22,10 +22,16 @@ const wxInfo = () => {
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
let uAgent = navigator.userAgent.toLowerCase();
let isTable = (uAgent.match(/MicroMessenger/i) == 'micromessenger') ? true : false;
let isPC = uAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|micromessenger)/i,
)
? false
: true;
return {
isAndroid,
isiOS,
isTable
isTable,
isPC,
};
};
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-04 16:59:15
* @LastEditTime: 2023-08-07 10:58:59
* @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: false,
show_floor_popup: true,
}
},
async mounted() {
......