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

hookehuyr
Commit 6aa569d0b660751c50001132318207513b078990 6aa569d0 1 parent 5f51a51b
Showing 6 changed files with 119 additions and 18 deletions
src/App.vue
src/components/Floor/floor.css
src/components/Floor/index.vue
src/components/Floor/pin.js
src/utils/tools.js
src/views/inner.vue
--- a/src/App.vue
View file @6aa569d
+++ b/src/App.vue
View file @6aa569d
@@ -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:
 -->
--- a/src/components/Floor/floor.css
View file @6aa569d
+++ b/src/components/Floor/floor.css
View file @6aa569d
@@ -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 {
--- a/src/components/Floor/index.vue
View file @6aa569d
+++ b/src/components/Floor/index.vue
View file @6aa569d
 <!--
  * @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) => {
--- a/src/components/Floor/pin.js
View file @6aa569d
+++ b/src/components/Floor/pin.js
View file @6aa569d
 /*
  * @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: '休息室',
+        },
       },
     ],
   },
--- a/src/utils/tools.js
View file @6aa569d
+++ b/src/utils/tools.js
View file @6aa569d
 /*
  * @Date: 2022-04-18 15:59:42
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-30 13:54:32
+ * @LastEditTime: 2023-08-07 13:31:59
- * @FilePath: /tswj/src/utils/tools.js
+ * @FilePath: /map-demo/src/utils/tools.js
  * @Description: 文件描述
  */
 import dayjs from 'dayjs';
@@ -14,7 +14,7 @@ const formatDate = (date) => {
 /**
  * @description 判断浏览器属于平台
- * @returns 
+ * @returns
  */
 const wxInfo = () => {
   let u = navigator.userAgent;
@@ -22,17 +22,23 @@ 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,
   };
 };
 /**
  * @description 判断多行省略文本
  * @param {*} id 目标dom标签
- * @returns 
+ * @returns
  */
 const hasEllipsis = (id) => {
   let oDiv = document.getElementById(id);
@@ -45,8 +51,8 @@ const hasEllipsis = (id) => {
 /**
  * @description 解析URL参数
- * @param {*} url 
+ * @param {*} url
- * @returns 
+ * @returns
  */
 const parseQueryString = url => {
   var json = {};
--- a/src/views/inner.vue
View file @6aa569d
+++ b/src/views/inner.vue
View file @6aa569d
 <!--
  * @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() {