3D地图显示样式优化

hookehuyr
Commit 8f2cab0a5dd83d2311e3c5aeeba3818cb73787d3 8f2cab0a 1 parent 6aa569d0
Showing 4 changed files with 66 additions and 18 deletions
src/components/Floor/floor.css
src/components/Floor/index.vue
src/components/Floor/pin.js
src/views/inner.vue
--- a/src/components/Floor/floor.css
View file @8f2cab0
+++ b/src/components/Floor/floor.css
View file @8f2cab0
@@ -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 {
--- a/src/components/Floor/index.vue
View file @8f2cab0
+++ b/src/components/Floor/index.vue
View file @8f2cab0
 <!--
  * @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) { // 移动端
-				if (!wxInfo().isPC) { // 移动端
+				// 	$('.level.level--current').css('transform', 'translateZ(1rem) rotate3d(0,0,1,20deg)');
-					$('.level.level--current').css('transform', 'translateZ(0) rotate3d(0,0,1,20deg)');
+				// } else { // PC端
-				} else { // PC端
+				// 	$('.level.level--current').css('transform', 'translateZ(20vmin) rotate3d(0,0,1,20deg)');
-					$('.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) {
@@ -254,11 +264,11 @@ export default {
 			this.popup_content = item?.affix?.content;
 			// 把图层推高
 			$('.mall').addClass('mall--content-open');
-			if (!wxInfo().isPC) { // 移动端
+			// if (!wxInfo().isPC) { // 移动端
-				$('.level.level--current').css('transform', 'translateZ(0) rotate3d(0,0,1,20deg)');
+			// 	$('.level.level--current').css('transform', 'translateZ(1rem) rotate3d(0,0,1,20deg)');
-			} else { // PC端
+			// } else { // PC端
-				$('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)');
+			// 	$('.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 @8f2cab0
+++ b/src/components/Floor/pin.js
View file @8f2cab0
 /*
  * @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: '休息室',
+        },
       },
     ],
   },
--- a/src/views/inner.vue
View file @8f2cab0
+++ b/src/views/inner.vue
View file @8f2cab0
 <!--
  * @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() {