3D图层楼层显示css显示优化

hookehuyr
Commit 7888d188032e6164f8e4b317743b7e81c082b37d 7888d188 1 parent b7fba0d1
Showing 4 changed files with 44 additions and 16 deletions
components.d.ts
src/components/Floor/floor.css
src/components/Floor/index.vue
src/views/inner.vue
--- a/components.d.ts
View file @7888d18
+++ b/components.d.ts
View file @7888d18
@@ -25,6 +25,5 @@ declare module '@vue/runtime-core' {
     VanImage: typeof import('vant/es')['Image']
     VanPopup: typeof import('vant/es')['Popup']
     VanRow: typeof import('vant/es')['Row']
-    VanSearch: typeof import('vant/es')['Search']
   }
 }
--- a/src/components/Floor/floor.css
View file @7888d18
+++ b/src/components/Floor/floor.css
View file @7888d18
@@ -206,9 +206,9 @@ button:focus {
 }
 .levels {
-	width: 96vmin;
+	width: 90vmin;
 	height: 64vmin;
-	margin: -32vmin 0 0 -48vmin;
+	margin: -32vmin 0 0 -40vmin;
 	-webkit-transition: -webkit-transform 0.3s;
 	transition: transform 0.3s;
 	-webkit-transform-style: preserve-3d;
@@ -217,8 +217,8 @@ button:focus {
 .surroundings,
 .levels {
-	-webkit-transform: rotateX(70deg) rotateZ(-45deg) translateZ(-15vmin);
+	-webkit-transform: rotateX(70deg) rotateZ(-45deg) translateZ(0vmin);
-	transform: rotateX(70deg) rotateZ(-45deg) translateZ(-15vmin);
+	transform: rotateX(70deg) rotateZ(-45deg) translateZ(0vmin);
 }
 .level {
@@ -235,8 +235,8 @@ button:focus {
 	transform-style: preserve-3d;
 }
-.level::after {
+/* .level::after {
-	font-size: 2.5vmin;
+	font-size: 1rem;
 	line-height: 0;
 	position: absolute;
 	z-index: 100;
@@ -250,7 +250,7 @@ button:focus {
 	transition: transform 1s, color 0.3s;
 	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-}
+} */
 .level:hover::after,
 .level--current::after {
@@ -259,10 +259,10 @@ button:focus {
 .level--current::after {
 	-webkit-transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateZ(5vmin) translateX(5vmin) translateY(-10vmin);
-	transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateZ(5vmin) translateX(5vmin) translateY(-10vmin);
+	transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateZ(5vmin) translateX(0vmin) translateY(-10vmin);
 }
-.level--1::after {
+/* .level--1::after {
 	content: 'L1';
 }
@@ -276,7 +276,7 @@ button:focus {
 .level--4::after {
 	content: 'L4';
-}
+} */
 .level:not(:first-child) {
 	position: absolute;
@@ -571,7 +571,7 @@ button:focus {
 .content__meta-item {
 	display: inline-block;
 	padding: 0 0.25em;
-	color: ;
+	/* color: ; */
 }
 .content__meta .icon {
@@ -771,7 +771,7 @@ button:focus {
 	position: absolute;
 	width: 5.5vmin;
 	height: 8.25vmin;
-	margin: -8.25vmin 0 0 -2.25vmin; /* let the bottom tip be the reference point for individual coordinates */
+	margin: -8.25vmin 0 0 -4.25vmin; /* let the bottom tip be the reference point for individual coordinates */
 	-webkit-transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg);
 	transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg);
 	-webkit-transform-origin: 50% 100%;
--- a/src/components/Floor/index.vue
View file @7888d18
+++ b/src/components/Floor/index.vue
View file @7888d18
 <!--
  * @Date: 2023-07-27 11:04:04
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-07-31 14:49:42
+ * @LastEditTime: 2023-07-31 17:03:09
  * @FilePath: /map-demo/src/components/Floor/index.vue
  * @Description: 文件描述
 -->
@@ -191,6 +191,7 @@
                   </span>
                 </a>
               </div>
+							<div class="level_after">L1</div>
               <!-- /level__pins -->
             </div>
 						<div @click="onFloorClick(2)" class="level level--2" aria-label="Level 2">
@@ -268,6 +269,7 @@
 									</span>
 								</a>
 							</div>
+							<div class="level_after">L2</div>
 						</div>
 						<div @click="onFloorClick(3)" class="level level--3" aria-label="Level 3">
 							<svg class="map map--3" viewBox="0 0 1200 800" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
@@ -337,6 +339,7 @@
 									</span>
 								</a>
 							</div>
+							<div class="level_after">L3</div>
 						</div>
 						<div @click="onFloorClick(4)" class="level level--4" aria-label="Level 4">
 							<svg class="map map--4" viewBox="0 0 1200 800" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
@@ -408,6 +411,7 @@
 									</span>
 								</a>
 							</div>
+							<div class="level_after">L4</div>
 						</div>
           </div>
         </div>
@@ -568,4 +572,29 @@ export default {
 			color: #000; margin-bottom: 1rem; font-size: 1.15rem;
 		}
 	}
+
+	.level_after {
+		font-size: 0.75rem;
+		line-height: 0;
+		position: absolute;
+		z-index: 100;
+		top: -2em;
+		left: 3.5em;
+		white-space: nowrap;
+		color: #7d7d86;
+		-webkit-transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
+		transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
+		-webkit-transition: -webkit-transform 1s, color 0.3s;
+		transition: transform 1s, color 0.3s;
+		-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+		transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+	}
+
+	.level--current {
+		.level_after {
+			font-size: 1rem;
+			-webkit-transform: rotateZ(25deg) rotateX(-60deg) translateZ(15vmin);
+			transform: rotateZ(25deg) rotateX(-60deg) translateZ(15vmin);
+		}
+	}
 </style>
--- a/src/views/inner.vue
View file @7888d18
+++ b/src/views/inner.vue
View file @7888d18
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-07-31 11:56:35
+ * @LastEditTime: 2023-07-31 17:05:09
  * @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() {