更新场景样式

scene/public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport"
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <title>湖南雷锋纪念馆</title>
+    <title>榆林杨家沟革命纪念馆</title>
     <meta name="description" content="四维时代">
     <meta property="og:title" content="四维时代">
     <meta property="og:description" content="四维时代">

scene/public/static/css/css/oldVer/main.css.bak

@@ -126,7 +126,7 @@
 	-webkit-box-shadow:0px 1px 4px 0px rgba(0, 0, 0, 0.3);
 	box-shadow:0px 1px 4px 0px rgba(0, 0, 0, 0.3);
 	/*
-	text-shadow:0px -1px 0px #000000,0px 1px 1px #000000;
+	//text-shadow:0px -1px 0px #000000,0px 1px 1px #000000;
 	*/
     filter:dropshadow(color=#000000, offx=0, offy=-1);
 	top: -30px;
@@ -211,7 +211,7 @@ iframe{
     font-size: 40px;
     font-weight: 100;
     letter-spacing: .75px;
-    text-shadow: 0 0 10px rgba(15,16,17,1);
+    //text-shadow: 0 0 10px rgba(15,16,17,1);
     color: rgba(255,255,255,1);
     margin: 0;
     position: absolute;

scene/public/static/css/css/oldVer/main0.css

@@ -1,30 +1,64 @@
-.sidecontent{position:fixed;left:-750px;width:auto;display:none;background:rgba(0,0,0,0.8);top:70px;height: 100%;color: rgba(255,255,255,1);}
-.sidecontent h1{font-size:14px;width:90%;margin:0px auto;text-align:center;height:50px;line-height:50px;position:relative;}
-.sidecontent h1 span{font-size:12px;font-weight:normal;position:absolute;right:-10px;cursor:pointer;border:#ebebeb solid 1px;width:40px;height:40px;line-height:40px;border-radius:20px;text-align:center;}
-#text
-{
-    float:left;
-	width:auto;
-	font-size:18px;
-	letter-spacing:2px;
-	margin:30px;
-	max-width:600px;
-	height:500px;
-	max-height:630px;
-	line-height:22px;
-	font-family:"宋体";
-}
-#sideimg{margin:5px 20px 30px 10px;float:left;}
-
-#gui-modes-map div img
-{
-	width:48px;
-	height:48px;
-}
-
- 
-
-iframe{
+.sidecontent {
+	position: fixed;
+	left: -750px;
+	width: auto;
+	display: none;
+	background: rgba(0, 0, 0, 0.8);
+	top: 70px;
+	height: 100%;
+	color: rgba(255, 255, 255, 1);
+}
+
+.sidecontent h1 {
+	font-size: 14px;
+	width: 90%;
+	margin: 0px auto;
+	text-align: center;
+	height: 50px;
+	line-height: 50px;
+	position: relative;
+}
+
+.sidecontent h1 span {
+	font-size: 12px;
+	font-weight: normal;
+	position: absolute;
+	right: -10px;
+	cursor: pointer;
+	border: #ebebeb solid 1px;
+	width: 40px;
+	height: 40px;
+	line-height: 40px;
+	border-radius: 20px;
+	text-align: center;
+}
+
+#text {
+	float: left;
+	width: auto;
+	font-size: 18px;
+	letter-spacing: 2px;
+	margin: 30px;
+	max-width: 600px;
+	height: 500px;
+	max-height: 630px;
+	line-height: 22px;
+	font-family: "宋体";
+}
+
+#sideimg {
+	margin: 5px 20px 30px 10px;
+	float: left;
+}
+
+#gui-modes-map div img {
+	width: 48px;
+	height: 48px;
+}
+
+
+
+iframe {
 	border: none;
 }
 
@@ -39,18 +73,25 @@ iframe{
 	/* margin: 80px auto; */
 	display: none;
 	z-index: 9999;
-	background:  rgba(0,0,0,0.6);
+	background: rgba(0, 0, 0, 0.6);
 }
-.popup-content{
+
+.popup-content {
 	position: relative;
 	width: 100%;
 	height: 100%;
 	overflow-x: hidden;
 }
-#id1{ width: 100%; height: 99.4%;}
-#popup.wait{
-	opacity:0.1; 
+
+#id1 {
+	width: 100%;
+	height: 99.4%;
 }
+
+#popup.wait {
+	opacity: 0.1;
+}
+
 #closepop {
 	background: url(https://super.4dage.com/images/close1.png) no-repeat;
 	width: 60px;
@@ -62,161 +103,237 @@ iframe{
 	text-indent: -999em;
 	background-size: 100% 100%;
 }
-.specialTitle{bottom:65%;
-    width: 100%;
-    padding: 0 25px;
-    display: block;
-    font-family: OpenSans,'Helvetica Neue',sans-serif;
-    text-align: center;
-    font-size: 40px;
-    font-weight: 100;
-    letter-spacing: .75px;
-    text-shadow: 0 0 10px rgba(15,16,17,1);
-    color: rgba(255,255,255,1);
-    margin: 0;
-    position: absolute;
-    hyphens: auto;
-    word-wrap: break-word;
-    line-height: 45px;}
-	.dropdown {position: relative;display: inline-block;float: right;height: 40px;line-height: 40px;right: 10px;}
-    .floor{ width: 100px;text-align: center;display: block;height: 30px;background: rgba(0,0,0,0.4);line-height: 30px;margin-top: 10px;cursor: pointer;}
-    .dropdown-content {display: none;position: absolute;background: rgba(0,0,0,0.6);min-width: 100px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);text-align:center;}
-    .dropdown:hover .dropdown-content {display: block;}
-    a{text-decoration:none;}
-	#YY,#SZZ{display:none;}
- @media only screen and (max-width:487px){
-           .dropdown {height: 30px;line-height: 30px;right:5px;}
-           .floor {width: 80px;height: 20px;line-height: 20px;margin-top: 5px;}
-          .dropdown-content{min-width: 80px;}	
-           }
+
+.specialTitle {
+	bottom: 65%;
+	width: 100%;
+	padding: 0 25px;
+	display: block;
+	font-family: OpenSans, 'Helvetica Neue', sans-serif;
+	text-align: center;
+	font-size: 40px;
+	font-weight: 100;
+	letter-spacing: .75px;
+	//text-shadow: 0 0 10px rgba(15,16,17,1);
+	color: rgba(255, 255, 255, 1);
+	margin: 0;
+	position: absolute;
+	hyphens: auto;
+	word-wrap: break-word;
+	line-height: 45px;
+}
+
+.dropdown {
+	position: relative;
+	display: inline-block;
+	float: right;
+	height: 40px;
+	line-height: 40px;
+	right: 10px;
+}
+
+.floor {
+	width: 100px;
+	text-align: center;
+	display: block;
+	height: 30px;
+	background: rgba(0, 0, 0, 0.4);
+	line-height: 30px;
+	margin-top: 10px;
+	cursor: pointer;
+}
+
+.dropdown-content {
+	display: none;
+	position: absolute;
+	background: rgba(0, 0, 0, 0.6);
+	min-width: 100px;
+	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+	text-align: center;
+}
+
+.dropdown:hover .dropdown-content {
+	display: block;
+}
+
+a {
+	text-decoration: none;
+}
+
+#YY,
+#SZZ {
+	display: none;
+}
+
+@media only screen and (max-width:487px) {
+	.dropdown {
+		height: 30px;
+		line-height: 30px;
+		right: 5px;
+	}
+
+	.floor {
+		width: 80px;
+		height: 20px;
+		line-height: 20px;
+		margin-top: 5px;
+	}
+
+	.dropdown-content {
+		min-width: 80px;
+	}
+}
+
 @media screen and (max-width: 1600px) {
- 
+
 	/*#popup {
 		width: 816px;
 		height: 510px;
 		margin: -255px auto auto -408px;
 	}*/
-	.specialTitle{
-	bottom:65%;
-    font-size: 34px;
+	.specialTitle {
+		bottom: 65%;
+		font-size: 34px;
 	}
 }
 
 @media screen and (max-width: 1400px) {
- 
+
 	/*#popup {
 		width: 714px;
 		height: 446px;
 		margin: -223px auto auto -357px;
 	}*/
 	.specialTitle {
-    bottom: 65%;
-    font-size: 30px;
-    }
+		bottom: 65%;
+		font-size: 30px;
+	}
 }
 
 @media screen and (max-width: 1200px) {
- 
-	#closepop{
+
+	#closepop {
 		width: 40px;
 		height: 40px;
 		top: 20px;
 		right: 20px;
 	}
+
 	.specialTitle {
-    bottom: 66%;
-    font-size: 26px;
-    }
+		bottom: 66%;
+		font-size: 26px;
+	}
 }
- 
+
 @media screen and (max-width: 768px) {
- 
+
 	.specialTitle {
-     bottom: 62%;
-     font-size: 26px;
-	 line-height:40px;
-    }
-	#special-gui-name{display:none;}
+		bottom: 62%;
+		font-size: 26px;
+		line-height: 40px;
+	}
+
+	#special-gui-name {
+		display: none;
+	}
 }
-@media screen and  (max-width: 736px){
 
-	
-	#title-toggle{
+@media screen and (max-width: 736px) {
+
+
+	#title-toggle {
 		padding-top: 18px;
 		height: 42px;
 	}
 
 
-	.pinTop{top:8px;}
+	.pinTop {
+		top: 8px;
+	}
 }
-@media screen and  (max-width:667px){
-	#closepop{
+
+@media screen and (max-width:667px) {
+	#closepop {
 		width: 36px;
 		height: 36px;
 		top: 0px;
 		right: 0px;
 	}
 
-	#title-toggle{
+	#title-toggle {
 		padding-top: 17px;
 		height: 40px;
 	}
 
 	#musicImg .fa-2x {
-        font-size: 1.5em;
-    }
-	.pinTop{top:8px;}
+		font-size: 1.5em;
+	}
+
+	.pinTop {
+		top: 8px;
+	}
 
 }
-@media screen and  (max-width:568px){
 
-	
-	#title-toggle{
+@media screen and (max-width:568px) {
+
+
+	#title-toggle {
 		padding-top: 17px;
 		height: 38px;
 	}
-	
+
 	#musicImg .fa-2x {
-        font-size: 1.5em;
-    }
-	.pinTop{top:8px;}
+		font-size: 1.5em;
+	}
+
+	.pinTop {
+		top: 8px;
+	}
 
 }
+
 @media screen and (max-width:414px) {
 
-	
-	#title-toggle{
+
+	#title-toggle {
 		padding-top: 17px;
 		height: 40px;
 	}
-	
+
 
 }
+
 @media screen and (max-width:375px) {
 
-	
-	#title-toggle{
+
+	#title-toggle {
 		padding-top: 17px;
 		height: 38px;
 	}
 
-	
-	.pinTop{top:5px;}	
-	
+
+	.pinTop {
+		top: 5px;
+	}
+
 }
+
 @media screen and (max-width:320px) {
 	/*#popup {
 		width: 200px;
         height: 380px;
         margin: -200px auto auto -100px;
 	}*/
-	
-	#title-toggle{
+
+	#title-toggle {
 		padding-top: 16px;
 		height: 36px;
 	}
 
-	
-	.pinTop{top:0px;}
-	
+
+	.pinTop {
+		top: 0px;
+	}
+
 }

scene/public/static/css/css/oldVer/main0.css.bak

@@ -67,7 +67,7 @@ iframe{
     font-size: 40px;
     font-weight: 100;
     letter-spacing: .75px;
-    text-shadow: 0 0 10px rgba(15,16,17,1);
+    //text-shadow: 0 0 10px rgba(15,16,17,1);
     color: rgba(255,255,255,1);
     margin: 0;
     position: absolute;

scene/public/static/css/css/oldVer/video-js.css

@@ -13,6 +13,7 @@ e.g. <video class="video-js my-skin-name">
 .vjs-default-skin {
   color: #cccccc;
 }
+
 /* Custom Icon Font
 --------------------------------------------------------------------------------
 The control icons are from a custom font. Each icon corresponds to a character
@@ -25,6 +26,7 @@ The control icons are from a custom font. Each icon corresponds to a character
   font-weight: normal;
   font-style: normal;
 }
+
 /* Base UI Component Classes
 --------------------------------------------------------------------------------
 */
@@ -39,25 +41,28 @@ The control icons are from a custom font. Each icon corresponds to a character
   background-color: #333333;
   background-color: rgba(51, 51, 51, 0.9);
 }
+
 .vjs-default-skin .vjs-slider:focus {
   /* box-shadow */
   -webkit-box-shadow: 0 0 2em #ffffff;
   -moz-box-shadow: 0 0 2em #ffffff;
   box-shadow: 0 0 2em #ffffff;
 }
+
 .vjs-default-skin .vjs-slider-handle {
   position: absolute;
   /* Needed for IE6 */
   left: 0;
   top: 0;
 }
+
 .vjs-default-skin .vjs-slider-handle:before {
   content: "\e009";
   font-family: VideoJS;
   font-size: 1em;
   line-height: 1;
   text-align: center;
-  text-shadow: 0em 0em 1em #fff;
+  //text-shadow: 0em 0em 1em #fff;
   position: absolute;
   top: 0;
   left: 0;
@@ -69,6 +74,7 @@ The control icons are from a custom font. Each icon corresponds to a character
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
+
 /* Control Bar
 --------------------------------------------------------------------------------
 The default control bar that is a container for most of the controls.
@@ -89,6 +95,7 @@ The default control bar that is a container for most of the controls.
   background-color: #07141e;
   background-color: rgba(7, 20, 30, 0.7);
 }
+
 /* Show the control bar only once the video has started playing */
 .vjs-default-skin.vjs-has-started .vjs-control-bar {
   display: block;
@@ -102,6 +109,7 @@ The default control bar that is a container for most of the controls.
   -o-transition: visibility 0.1s, opacity 0.1s;
   transition: visibility 0.1s, opacity 0.1s;
 }
+
 /* Hide the control bar when the video is playing and the user is inactive  */
 .vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
   display: block;
@@ -113,12 +121,15 @@ The default control bar that is a container for most of the controls.
   -o-transition: visibility 1s, opacity 1s;
   transition: visibility 1s, opacity 1s;
 }
+
 .vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
   display: none;
 }
+
 .vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
   display: none;
 }
+
 /* IE8 is flakey with fonts, and you have to change the actual content to force
 fonts to show/hide properly.
   - "\9" IE8 hack didn't work for this
@@ -129,6 +140,7 @@ fonts to show/hide properly.
     content: "";
   }
 }
+
 /* General styles for individual controls. */
 .vjs-default-skin .vjs-control {
   outline: none;
@@ -140,6 +152,7 @@ fonts to show/hide properly.
   height: 3.0em;
   width: 4em;
 }
+
 /* FontAwsome button icons */
 .vjs-default-skin .vjs-control:before {
   font-family: VideoJS;
@@ -151,19 +164,22 @@ fonts to show/hide properly.
   width: 100%;
   height: 100%;
   text-align: center;
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+  //text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 }
+
 /* Replacement for focus outline */
 .vjs-default-skin .vjs-control:focus:before,
 .vjs-default-skin .vjs-control:hover:before {
-  text-shadow: 0em 0em 1em #ffffff;
+  //text-shadow: 0em 0em 1em #ffffff;
 }
+
 .vjs-default-skin .vjs-control:focus {
   /*  outline: 0; */
   /* keyboard-only users cannot see the focus on several of the UI elements when
   this is set to 0 */
 
 }
+
 /* Hide control text visually, but have it available for screenreaders */
 .vjs-default-skin .vjs-control-text {
   /* hide-visually */
@@ -176,6 +192,7 @@ fonts to show/hide properly.
   position: absolute;
   width: 1px;
 }
+
 /* Play/Pause
 --------------------------------------------------------------------------------
 */
@@ -183,12 +200,15 @@ fonts to show/hide properly.
   width: 5em;
   cursor: pointer;
 }
+
 .vjs-default-skin .vjs-play-control:before {
   content: "\e001";
 }
+
 .vjs-default-skin.vjs-playing .vjs-play-control:before {
   content: "\e002";
 }
+
 /* Volume/Mute
 -------------------------------------------------------------------------------- */
 .vjs-default-skin .vjs-mute-control,
@@ -196,34 +216,42 @@ fonts to show/hide properly.
   cursor: pointer;
   float: right;
 }
+
 .vjs-default-skin .vjs-mute-control:before,
 .vjs-default-skin .vjs-volume-menu-button:before {
   content: "\e006";
 }
+
 .vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
 .vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
   content: "\e003";
 }
+
 .vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
 .vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
   content: "\e004";
 }
+
 .vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
 .vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
   content: "\e005";
 }
+
 .vjs-default-skin .vjs-volume-control {
   width: 5em;
   float: right;
 }
+
 .vjs-default-skin .vjs-volume-bar {
   width: 5em;
   height: 0.6em;
   margin: 1.1em auto 0;
 }
+
 .vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
   height: 2.9em;
 }
+
 .vjs-default-skin .vjs-volume-level {
   position: absolute;
   top: 0;
@@ -231,10 +259,12 @@ fonts to show/hide properly.
   height: 0.5em;
   background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
 }
+
 .vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
   width: 0.5em;
   height: 0.5em;
 }
+
 .vjs-default-skin .vjs-volume-handle:before {
   font-size: 0.9em;
   top: -0.2em;
@@ -242,10 +272,12 @@ fonts to show/hide properly.
   width: 1em;
   height: 1em;
 }
+
 .vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
   width: 6em;
   left: -4em;
 }
+
 /* Progress
 --------------------------------------------------------------------------------
 */
@@ -265,6 +297,7 @@ fonts to show/hide properly.
   -o-transition: all 0.4s;
   transition: all 0.4s;
 }
+
 /* On hover, make the progress bar grow to something that's more clickable.
     This simply changes the overall font for the progress bar, and this
     updates both the em-based widths and heights, as wells as the icon font */
@@ -279,10 +312,12 @@ fonts to show/hide properly.
   -o-transition: all 0.2s;
   transition: all 0.2s;
 }
+
 /* Box containing play and load progresses. Also acts as seek scrubber. */
 .vjs-default-skin .vjs-progress-holder {
   height: 100%;
 }
+
 /* Progress Bars */
 .vjs-default-skin .vjs-progress-holder .vjs-play-progress,
 .vjs-default-skin .vjs-progress-holder .vjs-load-progress {
@@ -295,6 +330,7 @@ fonts to show/hide properly.
   left: 0;
   top: 0;
 }
+
 .vjs-default-skin .vjs-play-progress {
   /*
     Using a data URI to create the white diagonal lines with a transparent
@@ -307,17 +343,25 @@ fonts to show/hide properly.
 
   background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
 }
+
 .vjs-default-skin .vjs-load-progress {
-  background: #646464 /* IE8- Fallback */;
+  background: #646464
+    /* IE8- Fallback */
+  ;
   background: rgba(255, 255, 255, 0.4);
 }
+
 .vjs-default-skin .vjs-seek-handle {
   width: 1.5em;
   height: 100%;
 }
+
 .vjs-default-skin .vjs-seek-handle:before {
-  padding-top: 0.1em /* Minor adjustment */;
+  padding-top: 0.1em
+    /* Minor adjustment */
+  ;
 }
+
 /* Time Display
 --------------------------------------------------------------------------------
 */
@@ -326,21 +370,26 @@ fonts to show/hide properly.
   /* Align vertically by making the line height the same as the control bar */
   line-height: 3em;
 }
+
 .vjs-default-skin .vjs-current-time {
   float: left;
 }
+
 .vjs-default-skin .vjs-duration {
   float: left;
 }
+
 /* Remaining time is in the HTML, but not included in default design */
 .vjs-default-skin .vjs-remaining-time {
   display: none;
   float: left;
 }
+
 .vjs-time-divider {
   float: left;
   line-height: 3em;
 }
+
 /* Fullscreen
 --------------------------------------------------------------------------------
 */
@@ -349,13 +398,16 @@ fonts to show/hide properly.
   cursor: pointer;
   float: right;
 }
+
 .vjs-default-skin .vjs-fullscreen-control:before {
   content: "\e000";
 }
+
 /* Switch to the exit icon when the player is in fullscreen */
 .vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
   content: "\e00b";
 }
+
 /* Big Play Button (play button at start)
 --------------------------------------------------------------------------------
 Positioning of the play button in the center or other corners can be done more
@@ -393,6 +445,7 @@ easily in the skin designer. http://designer.videojs.com/
   -o-transition: all 0.4s;
   transition: all 0.4s;
 }
+
 /* Optionally center */
 .vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
   /* Center it horizontally */
@@ -402,19 +455,23 @@ easily in the skin designer. http://designer.videojs.com/
   top: 50%;
   margin-top: -1.4000000000000001em;
 }
+
 /* Hide if controls are disabled */
 .vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
   display: none;
 }
+
 /* Hide when video starts playing */
 .vjs-default-skin.vjs-has-started .vjs-big-play-button {
   display: none;
 }
+
 /* Hide on mobile devices. Remove when we stop using native controls
     by default on mobile  */
 .vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
   display: none;
 }
+
 .vjs-default-skin:hover .vjs-big-play-button,
 .vjs-default-skin .vjs-big-play-button:focus {
   outline: 0;
@@ -432,6 +489,7 @@ easily in the skin designer. http://designer.videojs.com/
   -o-transition: all 0s;
   transition: all 0s;
 }
+
 .vjs-default-skin .vjs-big-play-button:before {
   content: "\e001";
   font-family: VideoJS;
@@ -439,13 +497,16 @@ easily in the skin designer. http://designer.videojs.com/
      to the same as the button height */
 
   line-height: 2.6em;
-  text-shadow: 0.05em 0.05em 0.1em #000;
-  text-align: center /* Needed for IE8 */;
+  //text-shadow: 0.05em 0.05em 0.1em #000;
+  text-align: center
+    /* Needed for IE8 */
+  ;
   position: absolute;
   left: 0;
   width: 100%;
   height: 100%;
 }
+
 /* Loading Spinner
 --------------------------------------------------------------------------------
 */
@@ -467,6 +528,7 @@ easily in the skin designer. http://designer.videojs.com/
   -o-animation: spin 1.5s infinite linear;
   animation: spin 1.5s infinite linear;
 }
+
 .vjs-default-skin .vjs-loading-spinner:before {
   content: "\e01e";
   font-family: VideoJS;
@@ -476,40 +538,49 @@ easily in the skin designer. http://designer.videojs.com/
   width: 1em;
   height: 1em;
   text-align: center;
-  text-shadow: 0em 0em 0.1em #000;
+  //text-shadow: 0em 0em 0.1em #000;
 }
+
 @-moz-keyframes spin {
   0% {
     -moz-transform: rotate(0deg);
   }
+
   100% {
     -moz-transform: rotate(359deg);
   }
 }
+
 @-webkit-keyframes spin {
   0% {
     -webkit-transform: rotate(0deg);
   }
+
   100% {
     -webkit-transform: rotate(359deg);
   }
 }
+
 @-o-keyframes spin {
   0% {
     -o-transform: rotate(0deg);
   }
+
   100% {
     -o-transform: rotate(359deg);
   }
 }
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(359deg);
   }
 }
+
 /* Menu Buttons (Captions/Subtitles/etc.)
 --------------------------------------------------------------------------------
 */
@@ -517,6 +588,7 @@ easily in the skin designer. http://designer.videojs.com/
   float: right;
   cursor: pointer;
 }
+
 .vjs-default-skin .vjs-menu {
   display: none;
   position: absolute;
@@ -536,6 +608,7 @@ easily in the skin designer. http://designer.videojs.com/
   /* Same as ul background */
 
 }
+
 /* Button Pop-up Menu */
 .vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
   display: block;
@@ -559,9 +632,11 @@ easily in the skin designer. http://designer.videojs.com/
   -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
   box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
 }
+
 .vjs-default-skin .vjs-menu-button:hover .vjs-menu {
   display: block;
 }
+
 .vjs-default-skin .vjs-menu-button ul li {
   list-style: none;
   margin: 0;
@@ -571,9 +646,11 @@ easily in the skin designer. http://designer.videojs.com/
   text-align: center;
   text-transform: lowercase;
 }
+
 .vjs-default-skin .vjs-menu-button ul li.vjs-selected {
   background-color: #000;
 }
+
 .vjs-default-skin .vjs-menu-button ul li:focus,
 .vjs-default-skin .vjs-menu-button ul li:hover,
 .vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
@@ -588,6 +665,7 @@ easily in the skin designer. http://designer.videojs.com/
   -moz-box-shadow: 0 0 1em #ffffff;
   box-shadow: 0 0 1em #ffffff;
 }
+
 .vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
   text-align: center;
   text-transform: uppercase;
@@ -598,14 +676,17 @@ easily in the skin designer. http://designer.videojs.com/
   font-weight: bold;
   cursor: default;
 }
+
 /* Subtitles Button */
 .vjs-default-skin .vjs-subtitles-button:before {
   content: "\e00c";
 }
+
 /* Captions Button */
 .vjs-default-skin .vjs-captions-button:before {
   content: "\e008";
 }
+
 /* Replacement for focus outline */
 .vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
 .vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
@@ -614,6 +695,7 @@ easily in the skin designer. http://designer.videojs.com/
   -moz-box-shadow: 0 0 1em #ffffff;
   box-shadow: 0 0 1em #ffffff;
 }
+
 /*
 REQUIRED STYLES (be careful overriding)
 ================================================================================
@@ -657,6 +739,7 @@ control positioning and full window mode. **
   -ms-user-select: none;
   user-select: none;
 }
+
 /* Playback technology elements expand to the width/height of the containing div
     <video> or <object> */
 .video-js .vjs-tech {
@@ -666,11 +749,13 @@ control positioning and full window mode. **
   width: 100%;
   height: 100%;
 }
+
 /* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
    checking fullScreenEnabled. */
 .video-js:-moz-full-screen {
   position: absolute;
 }
+
 /* Fullscreen Styles */
 body.vjs-full-window {
   padding: 0;
@@ -679,6 +764,7 @@ body.vjs-full-window {
   /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
   overflow-y: auto;
 }
+
 .video-js.vjs-fullscreen {
   position: fixed;
   overflow: hidden;
@@ -692,13 +778,16 @@ body.vjs-full-window {
   /* IE6 full-window (underscore hack) */
   _position: absolute;
 }
+
 .video-js:-webkit-full-screen {
   width: 100% !important;
   height: 100% !important;
 }
+
 .video-js.vjs-fullscreen.vjs-user-inactive {
   cursor: none;
 }
+
 /* Poster Styles */
 .vjs-poster {
   background-repeat: no-repeat;
@@ -711,6 +800,7 @@ body.vjs-full-window {
   position: relative;
   width: 100%;
 }
+
 .vjs-poster img {
   display: block;
   margin: 0 auto;
@@ -718,10 +808,12 @@ body.vjs-full-window {
   padding: 0;
   width: 100%;
 }
+
 /* Hide the poster when native controls are used otherwise it covers them */
 .video-js.vjs-using-native-controls .vjs-poster {
   display: none;
 }
+
 /* Text Track Styles */
 /* Overall track holder for both captions and subtitles */
 .video-js .vjs-text-track-display {
@@ -732,10 +824,12 @@ body.vjs-full-window {
   left: 1em;
   right: 1em;
 }
+
 /* Move captions down when controls aren't being shown */
 .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
   bottom: 1em;
 }
+
 /* Individual tracks */
 .video-js .vjs-text-track {
   display: none;
@@ -747,24 +841,34 @@ body.vjs-full-window {
   background-color: #000000;
   background-color: rgba(0, 0, 0, 0.5);
 }
+
 .video-js .vjs-subtitles {
-  color: #ffffff /* Subtitles are white */;
+  color: #ffffff
+    /* Subtitles are white */
+  ;
 }
+
 .video-js .vjs-captions {
-  color: #ffcc66 /* Captions are yellow */;
+  color: #ffcc66
+    /* Captions are yellow */
+  ;
 }
+
 .vjs-tt-cue {
   display: block;
 }
+
 /* Hide disabled or unsupported controls */
 .vjs-default-skin .vjs-hidden {
   display: none;
 }
+
 .vjs-lock-showing {
   display: block !important;
   opacity: 1;
   visibility: visible;
 }
+
 /* -----------------------------------------------------------------------------
 The original source of this file lives at
-https://github.com/videojs/video.js/blob/master/src/css/video-js.less */
+https://github.com/videojs/video.js/blob/master/src/css/video-js.less */

scene/public/static/css/lzb.css

@@ -13,7 +13,8 @@ body {
     height: 100%;
 }
 
-.pinBottom-container, .pinTop {
+.pinBottom-container,
+.pinTop {
     position: absolute;
 }
 
@@ -212,7 +213,8 @@ ul li {
     padding: 10px;
 }
 
-.toolRight div.content>ul>li:last-child, .toolRight .noBorderbott {
+.toolRight div.content>ul>li:last-child,
+.toolRight .noBorderbott {
     border-bottom: none !important;
 }
 
@@ -290,7 +292,8 @@ ul.MenuOptions li.chosen {
     overflow: scroll;
 }
 
-.toolRight .input, .toolRight .editText {
+.toolRight .input,
+.toolRight .editText {
     width: 100%;
     outline: none;
     border: 1px solid #737373;
@@ -313,6 +316,7 @@ ul.MenuOptions li.chosen {
     0% {
         background-color: rgba(2, 200, 174, 0);
     }
+
     100% {
         background-color: rgba(2, 200, 174, 1);
     }
@@ -328,7 +332,8 @@ ul.MenuOptions li.chosen {
     animation-iteration-count: infinite;
     border-color: #a7a7a7 !important;
 }
-.toolRight .secondary{ 
+
+.toolRight .secondary {
     height: 100%;
     position: fixed;
     top: 0;
@@ -352,7 +357,7 @@ ul.MenuOptions li.chosen {
     z-index: 100;
 }
 
-.toolRight .secondary.atRight{
+.toolRight .secondary.atRight {
     left: 100%;
 }
 
@@ -381,7 +386,8 @@ ul.MenuOptions li.chosen {
     cursor: pointer;
 }
 
-.toolRight .addSpot button, .toolRight .addTour button {
+.toolRight .addSpot button,
+.toolRight .addTour button {
     /* position: fixed;
     width: inherit;
     height: 3.2vw;
@@ -393,7 +399,7 @@ ul.MenuOptions li.chosen {
 }
 
 /*fyz, 修改添加导览样式*/
- 
+
 .remark {
     display: block;
     text-align: left;
@@ -403,7 +409,8 @@ ul.MenuOptions li.chosen {
     /* text-align: justify; */
 }
 
-.toolRight .addSpot .buttons, .toolRight .addTour .buttons {
+.toolRight .addSpot .buttons,
+.toolRight .addTour .buttons {
     margin: 0 !important;
 }
 
@@ -469,24 +476,30 @@ ul.MenuOptions li.chosen {
     padding-top: 1.4vw !important;
 }
 
- 
+
 
 #tourSwitchTitle {
     margin: 0;
 }
 
-#tourSwitch, #hotListSwitch, #VRSwitch {
+#tourSwitch,
+#hotListSwitch,
+#VRSwitch {
     display: flex;
     justify-content: center;
     margin: 0;
 }
 
-#tourSwitch label, #hotListSwitch label, #VRSwitch label {
+#tourSwitch label,
+#hotListSwitch label,
+#VRSwitch label {
     display: block;
     vertical-align: middle;
 }
 
-#tourSwitch label input, #hotListSwitch label input, #VRSwitch label input {
+#tourSwitch label input,
+#hotListSwitch label input,
+#VRSwitch label input {
     vertical-align: middle;
 }
 
@@ -510,7 +523,7 @@ ul.MenuOptions li.chosen {
     padding: 0 !important;
     background-color: #616161 !important;
     margin-right: 15px;
-    top:-2px;
+    top: -2px;
 }
 
 .mui-switch:before {
@@ -706,7 +719,8 @@ ul.MenuOptions li.chosen {
     z-index: 100;
 }
 
-.toolRight input, .toolRight div.editText {
+.toolRight input,
+.toolRight div.editText {
     width: 100%;
     outline: none;
     border: 1px solid #737373;
@@ -759,16 +773,17 @@ ul.MenuOptions li.chosen {
     /*for Ie*/
 }
 
- 
 
-.toolRight .secondary .itemTitle.head{
+
+.toolRight .secondary .itemTitle.head {
     height: 50px;
-    padding:0 10px;
+    padding: 0 10px;
     line-height: 50px;
     border-bottom: 1px solid #000000;
-} 
-.toolRight .secondary li.head .itemTitle{
-    margin:0;
+}
+
+.toolRight .secondary li.head .itemTitle {
+    margin: 0;
     line-height: 40px;
 }
 
@@ -782,7 +797,8 @@ ul.MenuOptions li.chosen {
     text-align: center;
 }
 
-.toolRight .music input[type="file"], .toolRight .audio input[type="file"] {
+.toolRight .music input[type="file"],
+.toolRight .audio input[type="file"] {
     opacity: 0;
     width: 200%;
     height: 100%;
@@ -972,10 +988,11 @@ ul.MenuOptions li.chosen {
 .toolRight .screen .shotImg.blank {
     background-image: url("../images/myModel.jpg");
     opacity: 0.8;
-    cursor: default; 
+    cursor: default;
 }
 
-.toolRight .hotpoint .spotList>ul>li,  .overlayList li {
+.toolRight .hotpoint .spotList>ul>li,
+.overlayList li {
     height: 40px;
     margin: 0 0 8px -10px;
     background: #373938;
@@ -991,11 +1008,14 @@ ul.MenuOptions li.chosen {
     overflow: hidden;
 }
 
-.toolRight .hotpoint .spotList>ul>li:hover, .toolRight .hotpoint .spotList>ul>li.active {
+.toolRight .hotpoint .spotList>ul>li:hover,
+.toolRight .hotpoint .spotList>ul>li.active {
     background: #565a5b;
 }
 
-.toolRight .hotpoint .spotList li .icon, .toolRight .editDetail .setPos li .icon , .overlayList li .icon{
+.toolRight .hotpoint .spotList li .icon,
+.toolRight .editDetail .setPos li .icon,
+.overlayList li .icon {
     width: 30px;
     margin-left: 10px;
     background-size: 70%;
@@ -1003,14 +1023,19 @@ ul.MenuOptions li.chosen {
     background-repeat: no-repeat;
     background-position-y: center;
 }
-.toolRight .hotpoint .spotList li .number{
-    color:#828282;
-    margin-right:10px;
+
+.toolRight .hotpoint .spotList li .number {
+    color: #828282;
+    margin-right: 10px;
+}
+
+.overlayList li .icon {
+    background-image: url(../images/edit/box_video.png);
 }
- .overlayList li .icon{
-     background-image:url(../images/edit/box_video.png);
- }
-.toolRight .hotpoint .spotList li .title, .toolRight .editDetail .setPos li .title, .overlayList li .title{
+
+.toolRight .hotpoint .spotList li .title,
+.toolRight .editDetail .setPos li .title,
+.overlayList li .title {
     width: calc(100% - 70px);
     font-size: 14px;
     text-overflow: ellipsis;
@@ -1047,7 +1072,7 @@ ul.MenuOptions li.chosen {
     background-image: url(../images/edit/hotStyle_1.png);
 }
 
- 
+
 
 .toolRight .secondary .content {
     height: calc(100% - 104px);
@@ -1076,11 +1101,13 @@ ul.MenuOptions li.chosen {
     background-repeat: no-repeat;
 }
 
-.toolRight .sign ul.chose li.upload .buttons, .toolRight .editDetail .upload:not(.uploaded) .buttons {
+.toolRight .sign ul.chose li.upload .buttons,
+.toolRight .editDetail .upload:not(.uploaded) .buttons {
     display: none;
 }
 
-.toolRight .sign ul.chose li .buttons button, .toolRight .editDetail .upload button {
+.toolRight .sign ul.chose li .buttons button,
+.toolRight .editDetail .upload button {
     pointer-events: auto;
     margin-top: -17px;
     width: 68%;
@@ -1100,7 +1127,8 @@ ul.MenuOptions li.chosen {
     background-size: contain
 }
 
-.toolRight .sign ul.chose li>div, .toolRight .editDetail .upload>div {
+.toolRight .sign ul.chose li>div,
+.toolRight .editDetail .upload>div {
     position: relative;
     top: 0;
     width: 100%;
@@ -1115,14 +1143,16 @@ ul.MenuOptions li.chosen {
     background-color: transparent;
 }
 
-.toolRight .sign ul.chose li.upload>div, .toolRight .editDetail .upload>div {
+.toolRight .sign ul.chose li.upload>div,
+.toolRight .editDetail .upload>div {
     background-image: url(../images/plus.png);
     background-position: center 42%;
     background-size: 15% 15%;
     background-repeat: no-repeat;
 }
 
-.toolRight .sign ul.chose li.upload span, .editDetail .upload span {
+.toolRight .sign ul.chose li.upload span,
+.editDetail .upload span {
     color: #00b4ed;
     margin-top: 46%;
     display: inline-block;
@@ -1151,13 +1181,17 @@ ul.MenuOptions li.chosen {
 }
 
 
-.toolRight  .itemTitle .buttons, .toolRight .remark .buttons{
-   position:absolute; right:0;
-    
+.toolRight .itemTitle .buttons,
+.toolRight .remark .buttons {
+    position: absolute;
+    right: 0;
+
+}
+
+.toolRight .itemTitle button,
+.toolRight .remark button {
+    padding: 0 20px;
 }
-.toolRight  .itemTitle button, .toolRight .remark  button{
-    padding:0 20px;
-} 
 
 .editDetail .content .upload input {
     cursor: pointer;
@@ -1233,7 +1267,7 @@ ul.MenuOptions li.chosen {
     transform: rotateZ(45deg);
     background: #c77a7a;
     border-radius: 50%;
-    z-index:1000;
+    z-index: 1000;
 }
 
 .edit-fun-images a.result>img {
@@ -1326,50 +1360,62 @@ ul.MenuOptions li.chosen {
         left: 0;
         top: 0
     }
+
     8% {
         left: 0;
         top: 0
     }
+
     16% {
         left: 25px;
         top: 0
     }
+
     24% {
         left: 25px;
         top: 0
     }
+
     32% {
         left: 25px;
         top: 0
     }
+
     40% {
         left: 25px;
         top: 25px
     }
+
     48% {
         left: 25px;
         top: 25px
     }
+
     56% {
         left: 25px;
         top: 25px
     }
+
     64% {
         left: 0;
         top: 25px
     }
+
     72% {
         left: 0;
         top: 25px
     }
+
     80% {
         left: 0;
         top: 25px
     }
+
     88% {
         left: 0;
         top: 0
     }
+
     100% {
         left: 0;
         top: 0
@@ -1381,50 +1427,62 @@ ul.MenuOptions li.chosen {
         left: 25px;
         top: 0
     }
+
     8% {
         left: 25px;
         top: 25px
     }
+
     16% {
         left: 25px;
         top: 25px
     }
+
     24% {
         left: 25px;
         top: 25px
     }
+
     32% {
         left: 0;
         top: 25px
     }
+
     40% {
         left: 0;
         top: 25px
     }
+
     48% {
         left: 0;
         top: 25px
     }
+
     56% {
         left: 0;
         top: 0
     }
+
     64% {
         left: 0;
         top: 0
     }
+
     72% {
         left: 0;
         top: 0
     }
+
     80% {
         left: 25px;
         top: 0
     }
+
     88% {
         left: 25px;
         top: 0
     }
+
     100% {
         left: 25px;
         top: 0
@@ -1436,50 +1494,62 @@ ul.MenuOptions li.chosen {
         left: 0;
         top: 25px
     }
+
     8% {
         left: 0;
         top: 25px
     }
+
     16% {
         left: 0;
         top: 25px
     }
+
     24% {
         left: 0;
         top: 0
     }
+
     32% {
         left: 0;
         top: 0
     }
+
     40% {
         left: 0;
         top: 0
     }
+
     48% {
         left: 25px;
         top: 0
     }
+
     56% {
         left: 25px;
         top: 0
     }
+
     64% {
         left: 25px;
         top: 0
     }
+
     72% {
         left: 25px;
         top: 25px
     }
+
     80% {
         left: 25px;
         top: 25px
     }
+
     88% {
         left: 25px;
         top: 25px
     }
+
     100% {
         left: 0;
         top: 25px
@@ -1499,21 +1569,23 @@ ul.MenuOptions li.chosen {
     justify-content: center;
     align-items: center;
 }
-.waiting .overlay{
-    position:fixed;
+
+.waiting .overlay {
+    position: fixed;
     /* z-index: 9990; */
-    width:100%;
-    height:100%;
+    width: 100%;
+    height: 100%;
     left: 0;
     top: 0;
     background: rgba(57, 57, 57, 0.76);
 }
+
 .waiting.showloading {
     display: flex;
 }
 
 .waiting .spinner {
-    width:300px;
+    width: 300px;
     text-align: center;
     display: flex;
     display: -webkit-flex;
@@ -1522,7 +1594,7 @@ ul.MenuOptions li.chosen {
     align-items: center;
 }
 
-.waiting .spinner > div {
+.waiting .spinner>div {
     width: 15px;
     height: 15px;
     background-color: #fff;
@@ -1545,16 +1617,17 @@ ul.MenuOptions li.chosen {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
 }
-.waiting div.text{
+
+.waiting div.text {
     margin-left: 10px;
-    letter-spacing:1px;
+    letter-spacing: 1px;
     z-index: 9995;
 }
 
 
 
 .unable {
-    pointer-events: none!important;
+    pointer-events: none !important;
     opacity: .5
 }
 
@@ -1623,16 +1696,18 @@ ul.MenuOptions li.chosen {
     color: #fff;
     letter-spacing: 0;
 }
-.slider .BarTxt  span{
+
+.slider .BarTxt span {
     line-height: 24px;
-    margin-left:4px;
+    margin-left: 4px;
 }
 
 
 
 
 
-#overlayUpload .preview, .toolRight .hotpointDetail .preview{
+#overlayUpload .preview,
+.toolRight .hotpointDetail .preview {
     border: 1px solid #555A5A;
     border-radius: 2px;
     background-color: #161A1A;
@@ -1640,95 +1715,106 @@ ul.MenuOptions li.chosen {
     /* line-height: 100px; */
     position: relative;
     color: #a0a0a0;
-					
+
     width: 200px;
-    background-repeat:no-repeat; 
-    margin:15px 0 30px 0;
-    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
-    background-image:url("../images/img_videoview@2x.png");
-    background-position:center 40%;
+    background-repeat: no-repeat;
+    margin: 15px 0 30px 0;
+    //text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
+    background-image: url("../images/img_videoview@2x.png");
+    background-position: center 40%;
     background-size: 17%;
 }
- 
-.toolRight .hotpointDetail  .preview{
-    cursor:pointer;
+
+.toolRight .hotpointDetail .preview {
+    cursor: pointer;
 }
 
-#overlayUpload .preview video{
-    width:100%;
-    height:100%;
+#overlayUpload .preview video {
+    width: 100%;
+    height: 100%;
     object-fit: fill;
 }
-.preview .plus{
+
+.preview .plus {
     display: block;
-    position:absolute;
+    position: absolute;
     left: 50%;
-    top:50%;
-    transform:translate(-50%,-50%);
+    top: 50%;
+    transform: translate(-50%, -50%);
 }
-.preview .text{
+
+.preview .text {
     line-height: 144px;
     color: #a7a7a7;
 }
-.preview.uploaded .text{
-    display:none;
+
+.preview.uploaded .text {
+    display: none;
 }
-#overlayUpload .preview [attr-type='height']{
+
+#overlayUpload .preview [attr-type='height'] {
     position: absolute;
     left: calc(100% + 5px);
-    line-height:100%;
+    line-height: 100%;
     display: block;
     top: 50%;
-    transform: translate(0%,-50%);
+    transform: translate(0%, -50%);
 }
-#overlayUpload .preview [attr-type='width']{
+
+#overlayUpload .preview [attr-type='width'] {
     position: absolute;
     left: 50%;
-    transform:translateX(-50%);
+    transform: translateX(-50%);
     display: block;
     top: calc(100% - 4px);
-					  
+
 }
- 	
-				
-#userUploadStyle ul{ 
+
+
+#userUploadStyle ul {
     display: flex;
 }
-#userUploadStyle .upload{
+
+#userUploadStyle .upload {
     width: 70px;
     height: 70px;
     border-radius: 2px;
     border: 1px solid #5d5d5d;
     position: relative;
 }
-#userUploadStyle .upload>div{
-   background-color:transparent;  
+
+#userUploadStyle .upload>div {
+    background-color: transparent;
 }
-#userUploadStyle .uploaded>div{
-    background-size:cover;
+
+#userUploadStyle .uploaded>div {
+    background-size: cover;
 }
-#userUploadStyle .upload .del{
-    width:20px;
+
+#userUploadStyle .upload .del {
+    width: 20px;
     background-color: #c77a7a;
     height: 20px;
-    transform:translate(60%,-40%);
+    transform: translate(60%, -40%);
     display: block;
-    right:0;
+    right: 0;
     top: 0;
     border-radius: 50%;
     position: absolute;
-    display:none;
-	z-index:9999;
-} 
-#userUploadStyle  .upload .del:before{ 
-	content:'X';
-	font-size:12px;
-	font-family:"iconfont" !important; 
-	color:white;
-	position:relative;
-	top:-7px;
-	
-}
-#userUploadStyle  .upload.uploaded:hover .del{
-    display:block; 
+    display: none;
+    z-index: 9999;
+}
+
+#userUploadStyle .upload .del:before {
+    content: 'X';
+    font-size: 12px;
+    font-family: "iconfont" !important;
+    color: white;
+    position: relative;
+    top: -7px;
+
+}
+
+#userUploadStyle .upload.uploaded:hover .del {
+    display: block;
 }

scene/public/static/css/oldVer/main.css.bak

@@ -126,7 +126,7 @@
 	-webkit-box-shadow:0px 1px 4px 0px rgba(0, 0, 0, 0.3);
 	box-shadow:0px 1px 4px 0px rgba(0, 0, 0, 0.3);
 	/*
-	text-shadow:0px -1px 0px #000000,0px 1px 1px #000000;
+	//text-shadow:0px -1px 0px #000000,0px 1px 1px #000000;
 	*/
     filter:dropshadow(color=#000000, offx=0, offy=-1);
 	top: -30px;
@@ -211,7 +211,7 @@ iframe{
     font-size: 40px;
     font-weight: 100;
     letter-spacing: .75px;
-    text-shadow: 0 0 10px rgba(15,16,17,1);
+    //text-shadow: 0 0 10px rgba(15,16,17,1);
     color: rgba(255,255,255,1);
     margin: 0;
     position: absolute;

scene/public/static/css/oldVer/main0.css

@@ -1,30 +1,64 @@
-.sidecontent{position:fixed;left:-750px;width:auto;display:none;background:rgba(0,0,0,0.8);top:70px;height: 100%;color: rgba(255,255,255,1);}
-.sidecontent h1{font-size:14px;width:90%;margin:0px auto;text-align:center;height:50px;line-height:50px;position:relative;}
-.sidecontent h1 span{font-size:12px;font-weight:normal;position:absolute;right:-10px;cursor:pointer;border:#ebebeb solid 1px;width:40px;height:40px;line-height:40px;border-radius:20px;text-align:center;}
-#text
-{
-    float:left;
-	width:auto;
-	font-size:18px;
-	letter-spacing:2px;
-	margin:30px;
-	max-width:600px;
-	height:500px;
-	max-height:630px;
-	line-height:22px;
-	font-family:"宋体";
-}
-#sideimg{margin:5px 20px 30px 10px;float:left;}
-
-#gui-modes-map div img
-{
-	width:48px;
-	height:48px;
-}
-
- 
-
-iframe{
+.sidecontent {
+	position: fixed;
+	left: -750px;
+	width: auto;
+	display: none;
+	background: rgba(0, 0, 0, 0.8);
+	top: 70px;
+	height: 100%;
+	color: rgba(255, 255, 255, 1);
+}
+
+.sidecontent h1 {
+	font-size: 14px;
+	width: 90%;
+	margin: 0px auto;
+	text-align: center;
+	height: 50px;
+	line-height: 50px;
+	position: relative;
+}
+
+.sidecontent h1 span {
+	font-size: 12px;
+	font-weight: normal;
+	position: absolute;
+	right: -10px;
+	cursor: pointer;
+	border: #ebebeb solid 1px;
+	width: 40px;
+	height: 40px;
+	line-height: 40px;
+	border-radius: 20px;
+	text-align: center;
+}
+
+#text {
+	float: left;
+	width: auto;
+	font-size: 18px;
+	letter-spacing: 2px;
+	margin: 30px;
+	max-width: 600px;
+	height: 500px;
+	max-height: 630px;
+	line-height: 22px;
+	font-family: "宋体";
+}
+
+#sideimg {
+	margin: 5px 20px 30px 10px;
+	float: left;
+}
+
+#gui-modes-map div img {
+	width: 48px;
+	height: 48px;
+}
+
+
+
+iframe {
 	border: none;
 }
 
@@ -39,22 +73,29 @@ iframe{
 	/* margin: 80px auto; */
 	display: none;
 	z-index: 9999;
-	background:  rgba(0,0,0,0.6);
+	background: rgba(0, 0, 0, 0.6);
 }
-.popup-content{
+
+.popup-content {
 	position: relative;
 	width: 100%;
 	height: 100%;
 	overflow-x: hidden;
 }
-#id1{ width: 100%; height: 100%;}
-#popup.wait{
-	opacity:0.1; 
+
+#id1 {
+	width: 100%;
+	height: 100%;
+}
+
+#popup.wait {
+	opacity: 0.1;
 }
+
 #closepop {
-	background: url('../../images/icon-close.png') no-repeat;
-	width: 51px;
-	height: 51px;
+	background: url('../../images/close.png') no-repeat;
+	width: 40px;
+	height: 40px;
 	cursor: pointer;
 	position: absolute;
 	right: 30px;
@@ -62,161 +103,237 @@ iframe{
 	text-indent: -999em;
 	background-size: 100% 100%;
 }
-.specialTitle{bottom:65%;
-    width: 100%;
-    padding: 0 25px;
-    display: block;
-    font-family: OpenSans,'Helvetica Neue',sans-serif;
-    text-align: center;
-    font-size: 40px;
-    font-weight: 100;
-    letter-spacing: .75px;
-    text-shadow: 0 0 10px rgba(15,16,17,1);
-    color: rgba(255,255,255,1);
-    margin: 0;
-    position: absolute;
-    hyphens: auto;
-    word-wrap: break-word;
-    line-height: 45px;}
-	.dropdown {position: relative;display: inline-block;float: right;height: 40px;line-height: 40px;right: 10px;}
-    .floor{ width: 100px;text-align: center;display: block;height: 30px;background: rgba(0,0,0,0.4);line-height: 30px;margin-top: 10px;cursor: pointer;}
-    .dropdown-content {display: none;position: absolute;background: rgba(0,0,0,0.6);min-width: 100px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);text-align:center;}
-    .dropdown:hover .dropdown-content {display: block;}
-    a{text-decoration:none;}
-	#YY,#SZZ{display:none;}
- @media only screen and (max-width:487px){
-           .dropdown {height: 30px;line-height: 30px;right:5px;}
-           .floor {width: 80px;height: 20px;line-height: 20px;margin-top: 5px;}
-          .dropdown-content{min-width: 80px;}	
-           }
+
+.specialTitle {
+	bottom: 65%;
+	width: 100%;
+	padding: 0 25px;
+	display: block;
+	font-family: OpenSans, 'Helvetica Neue', sans-serif;
+	text-align: center;
+	font-size: 40px;
+	font-weight: 100;
+	letter-spacing: .75px;
+	//text-shadow: 0 0 10px rgba(15,16,17,1);
+	color: rgba(255, 255, 255, 1);
+	margin: 0;
+	position: absolute;
+	hyphens: auto;
+	word-wrap: break-word;
+	line-height: 45px;
+}
+
+.dropdown {
+	position: relative;
+	display: inline-block;
+	float: right;
+	height: 40px;
+	line-height: 40px;
+	right: 10px;
+}
+
+.floor {
+	width: 100px;
+	text-align: center;
+	display: block;
+	height: 30px;
+	background: rgba(0, 0, 0, 0.4);
+	line-height: 30px;
+	margin-top: 10px;
+	cursor: pointer;
+}
+
+.dropdown-content {
+	display: none;
+	position: absolute;
+	background: rgba(0, 0, 0, 0.6);
+	min-width: 100px;
+	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+	text-align: center;
+}
+
+.dropdown:hover .dropdown-content {
+	display: block;
+}
+
+a {
+	text-decoration: none;
+}
+
+#YY,
+#SZZ {
+	display: none;
+}
+
+@media only screen and (max-width:487px) {
+	.dropdown {
+		height: 30px;
+		line-height: 30px;
+		right: 5px;
+	}
+
+	.floor {
+		width: 80px;
+		height: 20px;
+		line-height: 20px;
+		margin-top: 5px;
+	}
+
+	.dropdown-content {
+		min-width: 80px;
+	}
+}
+
 @media screen and (max-width: 1600px) {
- 
+
 	/*#popup {
 		width: 816px;
 		height: 510px;
 		margin: -255px auto auto -408px;
 	}*/
-	.specialTitle{
-	bottom:65%;
-    font-size: 34px;
+	.specialTitle {
+		bottom: 65%;
+		font-size: 34px;
 	}
 }
 
 @media screen and (max-width: 1400px) {
- 
+
 	/*#popup {
 		width: 714px;
 		height: 446px;
 		margin: -223px auto auto -357px;
 	}*/
 	.specialTitle {
-    bottom: 65%;
-    font-size: 30px;
-    }
+		bottom: 65%;
+		font-size: 30px;
+	}
 }
 
 @media screen and (max-width: 1200px) {
- 
-	#closepop{
+
+	#closepop {
 		width: 40px;
 		height: 40px;
 		top: 20px;
 		right: 20px;
 	}
+
 	.specialTitle {
-    bottom: 66%;
-    font-size: 26px;
-    }
+		bottom: 66%;
+		font-size: 26px;
+	}
 }
- 
+
 @media screen and (max-width: 768px) {
- 
+
 	.specialTitle {
-     bottom: 62%;
-     font-size: 26px;
-	 line-height:40px;
-    }
-	#special-gui-name{display:none;}
+		bottom: 62%;
+		font-size: 26px;
+		line-height: 40px;
+	}
+
+	#special-gui-name {
+		display: none;
+	}
 }
-@media screen and  (max-width: 736px){
 
-	
-	#title-toggle{
+@media screen and (max-width: 736px) {
+
+
+	#title-toggle {
 		padding-top: 18px;
 		height: 42px;
 	}
 
 
-	.pinTop{top:8px;}
+	.pinTop {
+		top: 8px;
+	}
 }
-@media screen and  (max-width:667px){
-	#closepop{
+
+@media screen and (max-width:667px) {
+	#closepop {
 		width: 36px;
 		height: 36px;
 		top: 0px;
 		right: 0px;
 	}
 
-	#title-toggle{
+	#title-toggle {
 		padding-top: 17px;
 		height: 40px;
 	}
 
 	#musicImg .fa-2x {
-        font-size: 1.5em;
-    }
-	.pinTop{top:8px;}
+		font-size: 1.5em;
+	}
+
+	.pinTop {
+		top: 8px;
+	}
 
 }
-@media screen and  (max-width:568px){
 
-	
-	#title-toggle{
+@media screen and (max-width:568px) {
+
+
+	#title-toggle {
 		padding-top: 17px;
 		height: 38px;
 	}
-	
+
 	#musicImg .fa-2x {
-        font-size: 1.5em;
-    }
-	.pinTop{top:8px;}
+		font-size: 1.5em;
+	}
+
+	.pinTop {
+		top: 8px;
+	}
 
 }
+
 @media screen and (max-width:414px) {
 
-	
-	#title-toggle{
+
+	#title-toggle {
 		padding-top: 17px;
 		height: 40px;
 	}
-	
+
 
 }
+
 @media screen and (max-width:375px) {
 
-	
-	#title-toggle{
+
+	#title-toggle {
 		padding-top: 17px;
 		height: 38px;
 	}
 
-	
-	.pinTop{top:5px;}	
-	
+
+	.pinTop {
+		top: 5px;
+	}
+
 }
+
 @media screen and (max-width:320px) {
 	/*#popup {
 		width: 200px;
         height: 380px;
         margin: -200px auto auto -100px;
 	}*/
-	
-	#title-toggle{
+
+	#title-toggle {
 		padding-top: 16px;
 		height: 36px;
 	}
 
-	
-	.pinTop{top:0px;}
-	
+
+	.pinTop {
+		top: 0px;
+	}
+
 }

scene/public/static/css/oldVer/main0.css.bak

@@ -67,7 +67,7 @@ iframe{
     font-size: 40px;
     font-weight: 100;
     letter-spacing: .75px;
-    text-shadow: 0 0 10px rgba(15,16,17,1);
+    //text-shadow: 0 0 10px rgba(15,16,17,1);
     color: rgba(255,255,255,1);
     margin: 0;
     position: absolute;

scene/public/static/css/oldVer/video-js.css

@@ -13,6 +13,7 @@ e.g. <video class="video-js my-skin-name">
 .vjs-default-skin {
   color: #cccccc;
 }
+
 /* Custom Icon Font
 --------------------------------------------------------------------------------
 The control icons are from a custom font. Each icon corresponds to a character
@@ -25,6 +26,7 @@ The control icons are from a custom font. Each icon corresponds to a character
   font-weight: normal;
   font-style: normal;
 }
+
 /* Base UI Component Classes
 --------------------------------------------------------------------------------
 */
@@ -39,25 +41,28 @@ The control icons are from a custom font. Each icon corresponds to a character
   background-color: #333333;
   background-color: rgba(51, 51, 51, 0.9);
 }
+
 .vjs-default-skin .vjs-slider:focus {
   /* box-shadow */
   -webkit-box-shadow: 0 0 2em #ffffff;
   -moz-box-shadow: 0 0 2em #ffffff;
   box-shadow: 0 0 2em #ffffff;
 }
+
 .vjs-default-skin .vjs-slider-handle {
   position: absolute;
   /* Needed for IE6 */
   left: 0;
   top: 0;
 }
+
 .vjs-default-skin .vjs-slider-handle:before {
   content: "\e009";
   font-family: VideoJS;
   font-size: 1em;
   line-height: 1;
   text-align: center;
-  text-shadow: 0em 0em 1em #fff;
+  //text-shadow: 0em 0em 1em #fff;
   position: absolute;
   top: 0;
   left: 0;
@@ -69,6 +74,7 @@ The control icons are from a custom font. Each icon corresponds to a character
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
+
 /* Control Bar
 --------------------------------------------------------------------------------
 The default control bar that is a container for most of the controls.
@@ -89,6 +95,7 @@ The default control bar that is a container for most of the controls.
   background-color: #07141e;
   background-color: rgba(7, 20, 30, 0.7);
 }
+
 /* Show the control bar only once the video has started playing */
 .vjs-default-skin.vjs-has-started .vjs-control-bar {
   display: block;
@@ -102,6 +109,7 @@ The default control bar that is a container for most of the controls.
   -o-transition: visibility 0.1s, opacity 0.1s;
   transition: visibility 0.1s, opacity 0.1s;
 }
+
 /* Hide the control bar when the video is playing and the user is inactive  */
 .vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
   display: block;
@@ -113,12 +121,15 @@ The default control bar that is a container for most of the controls.
   -o-transition: visibility 1s, opacity 1s;
   transition: visibility 1s, opacity 1s;
 }
+
 .vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
   display: none;
 }
+
 .vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
   display: none;
 }
+
 /* IE8 is flakey with fonts, and you have to change the actual content to force
 fonts to show/hide properly.
   - "\9" IE8 hack didn't work for this
@@ -129,6 +140,7 @@ fonts to show/hide properly.
     content: "";
   }
 }
+
 /* General styles for individual controls. */
 .vjs-default-skin .vjs-control {
   outline: none;
@@ -140,6 +152,7 @@ fonts to show/hide properly.
   height: 3.0em;
   width: 4em;
 }
+
 /* FontAwsome button icons */
 .vjs-default-skin .vjs-control:before {
   font-family: VideoJS;
@@ -151,19 +164,22 @@ fonts to show/hide properly.
   width: 100%;
   height: 100%;
   text-align: center;
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+  //text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 }
+
 /* Replacement for focus outline */
 .vjs-default-skin .vjs-control:focus:before,
 .vjs-default-skin .vjs-control:hover:before {
-  text-shadow: 0em 0em 1em #ffffff;
+  //text-shadow: 0em 0em 1em #ffffff;
 }
+
 .vjs-default-skin .vjs-control:focus {
   /*  outline: 0; */
   /* keyboard-only users cannot see the focus on several of the UI elements when
   this is set to 0 */
 
 }
+
 /* Hide control text visually, but have it available for screenreaders */
 .vjs-default-skin .vjs-control-text {
   /* hide-visually */
@@ -176,6 +192,7 @@ fonts to show/hide properly.
   position: absolute;
   width: 1px;
 }
+
 /* Play/Pause
 --------------------------------------------------------------------------------
 */
@@ -183,12 +200,15 @@ fonts to show/hide properly.
   width: 5em;
   cursor: pointer;
 }
+
 .vjs-default-skin .vjs-play-control:before {
   content: "\e001";
 }
+
 .vjs-default-skin.vjs-playing .vjs-play-control:before {
   content: "\e002";
 }
+
 /* Volume/Mute
 -------------------------------------------------------------------------------- */
 .vjs-default-skin .vjs-mute-control,
@@ -196,34 +216,42 @@ fonts to show/hide properly.
   cursor: pointer;
   float: right;
 }
+
 .vjs-default-skin .vjs-mute-control:before,
 .vjs-default-skin .vjs-volume-menu-button:before {
   content: "\e006";
 }
+
 .vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
 .vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
   content: "\e003";
 }
+
 .vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
 .vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
   content: "\e004";
 }
+
 .vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
 .vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
   content: "\e005";
 }
+
 .vjs-default-skin .vjs-volume-control {
   width: 5em;
   float: right;
 }
+
 .vjs-default-skin .vjs-volume-bar {
   width: 5em;
   height: 0.6em;
   margin: 1.1em auto 0;
 }
+
 .vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
   height: 2.9em;
 }
+
 .vjs-default-skin .vjs-volume-level {
   position: absolute;
   top: 0;
@@ -231,10 +259,12 @@ fonts to show/hide properly.
   height: 0.5em;
   background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
 }
+
 .vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
   width: 0.5em;
   height: 0.5em;
 }
+
 .vjs-default-skin .vjs-volume-handle:before {
   font-size: 0.9em;
   top: -0.2em;
@@ -242,10 +272,12 @@ fonts to show/hide properly.
   width: 1em;
   height: 1em;
 }
+
 .vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
   width: 6em;
   left: -4em;
 }
+
 /* Progress
 --------------------------------------------------------------------------------
 */
@@ -265,6 +297,7 @@ fonts to show/hide properly.
   -o-transition: all 0.4s;
   transition: all 0.4s;
 }
+
 /* On hover, make the progress bar grow to something that's more clickable.
     This simply changes the overall font for the progress bar, and this
     updates both the em-based widths and heights, as wells as the icon font */
@@ -279,10 +312,12 @@ fonts to show/hide properly.
   -o-transition: all 0.2s;
   transition: all 0.2s;
 }
+
 /* Box containing play and load progresses. Also acts as seek scrubber. */
 .vjs-default-skin .vjs-progress-holder {
   height: 100%;
 }
+
 /* Progress Bars */
 .vjs-default-skin .vjs-progress-holder .vjs-play-progress,
 .vjs-default-skin .vjs-progress-holder .vjs-load-progress {
@@ -295,6 +330,7 @@ fonts to show/hide properly.
   left: 0;
   top: 0;
 }
+
 .vjs-default-skin .vjs-play-progress {
   /*
     Using a data URI to create the white diagonal lines with a transparent
@@ -307,17 +343,25 @@ fonts to show/hide properly.
 
   background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
 }
+
 .vjs-default-skin .vjs-load-progress {
-  background: #646464 /* IE8- Fallback */;
+  background: #646464
+    /* IE8- Fallback */
+  ;
   background: rgba(255, 255, 255, 0.4);
 }
+
 .vjs-default-skin .vjs-seek-handle {
   width: 1.5em;
   height: 100%;
 }
+
 .vjs-default-skin .vjs-seek-handle:before {
-  padding-top: 0.1em /* Minor adjustment */;
+  padding-top: 0.1em
+    /* Minor adjustment */
+  ;
 }
+
 /* Time Display
 --------------------------------------------------------------------------------
 */
@@ -326,21 +370,26 @@ fonts to show/hide properly.
   /* Align vertically by making the line height the same as the control bar */
   line-height: 3em;
 }
+
 .vjs-default-skin .vjs-current-time {
   float: left;
 }
+
 .vjs-default-skin .vjs-duration {
   float: left;
 }
+
 /* Remaining time is in the HTML, but not included in default design */
 .vjs-default-skin .vjs-remaining-time {
   display: none;
   float: left;
 }
+
 .vjs-time-divider {
   float: left;
   line-height: 3em;
 }
+
 /* Fullscreen
 --------------------------------------------------------------------------------
 */
@@ -349,13 +398,16 @@ fonts to show/hide properly.
   cursor: pointer;
   float: right;
 }
+
 .vjs-default-skin .vjs-fullscreen-control:before {
   content: "\e000";
 }
+
 /* Switch to the exit icon when the player is in fullscreen */
 .vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
   content: "\e00b";
 }
+
 /* Big Play Button (play button at start)
 --------------------------------------------------------------------------------
 Positioning of the play button in the center or other corners can be done more
@@ -393,6 +445,7 @@ easily in the skin designer. http://designer.videojs.com/
   -o-transition: all 0.4s;
   transition: all 0.4s;
 }
+
 /* Optionally center */
 .vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
   /* Center it horizontally */
@@ -402,19 +455,23 @@ easily in the skin designer. http://designer.videojs.com/
   top: 50%;
   margin-top: -1.4000000000000001em;
 }
+
 /* Hide if controls are disabled */
 .vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
   display: none;
 }
+
 /* Hide when video starts playing */
 .vjs-default-skin.vjs-has-started .vjs-big-play-button {
   display: none;
 }
+
 /* Hide on mobile devices. Remove when we stop using native controls
     by default on mobile  */
 .vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
   display: none;
 }
+
 .vjs-default-skin:hover .vjs-big-play-button,
 .vjs-default-skin .vjs-big-play-button:focus {
   outline: 0;
@@ -432,6 +489,7 @@ easily in the skin designer. http://designer.videojs.com/
   -o-transition: all 0s;
   transition: all 0s;
 }
+
 .vjs-default-skin .vjs-big-play-button:before {
   content: "\e001";
   font-family: VideoJS;
@@ -439,13 +497,16 @@ easily in the skin designer. http://designer.videojs.com/
      to the same as the button height */
 
   line-height: 2.6em;
-  text-shadow: 0.05em 0.05em 0.1em #000;
-  text-align: center /* Needed for IE8 */;
+  //text-shadow: 0.05em 0.05em 0.1em #000;
+  text-align: center
+    /* Needed for IE8 */
+  ;
   position: absolute;
   left: 0;
   width: 100%;
   height: 100%;
 }
+
 /* Loading Spinner
 --------------------------------------------------------------------------------
 */
@@ -467,6 +528,7 @@ easily in the skin designer. http://designer.videojs.com/
   -o-animation: spin 1.5s infinite linear;
   animation: spin 1.5s infinite linear;
 }
+
 .vjs-default-skin .vjs-loading-spinner:before {
   content: "\e01e";
   font-family: VideoJS;
@@ -476,40 +538,49 @@ easily in the skin designer. http://designer.videojs.com/
   width: 1em;
   height: 1em;
   text-align: center;
-  text-shadow: 0em 0em 0.1em #000;
+  //text-shadow: 0em 0em 0.1em #000;
 }
+
 @-moz-keyframes spin {
   0% {
     -moz-transform: rotate(0deg);
   }
+
   100% {
     -moz-transform: rotate(359deg);
   }
 }
+
 @-webkit-keyframes spin {
   0% {
     -webkit-transform: rotate(0deg);
   }
+
   100% {
     -webkit-transform: rotate(359deg);
   }
 }
+
 @-o-keyframes spin {
   0% {
     -o-transform: rotate(0deg);
   }
+
   100% {
     -o-transform: rotate(359deg);
   }
 }
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(359deg);
   }
 }
+
 /* Menu Buttons (Captions/Subtitles/etc.)
 --------------------------------------------------------------------------------
 */
@@ -517,6 +588,7 @@ easily in the skin designer. http://designer.videojs.com/
   float: right;
   cursor: pointer;
 }
+
 .vjs-default-skin .vjs-menu {
   display: none;
   position: absolute;
@@ -536,6 +608,7 @@ easily in the skin designer. http://designer.videojs.com/
   /* Same as ul background */
 
 }
+
 /* Button Pop-up Menu */
 .vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
   display: block;
@@ -559,9 +632,11 @@ easily in the skin designer. http://designer.videojs.com/
   -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
   box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
 }
+
 .vjs-default-skin .vjs-menu-button:hover .vjs-menu {
   display: block;
 }
+
 .vjs-default-skin .vjs-menu-button ul li {
   list-style: none;
   margin: 0;
@@ -571,9 +646,11 @@ easily in the skin designer. http://designer.videojs.com/
   text-align: center;
   text-transform: lowercase;
 }
+
 .vjs-default-skin .vjs-menu-button ul li.vjs-selected {
   background-color: #000;
 }
+
 .vjs-default-skin .vjs-menu-button ul li:focus,
 .vjs-default-skin .vjs-menu-button ul li:hover,
 .vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
@@ -588,6 +665,7 @@ easily in the skin designer. http://designer.videojs.com/
   -moz-box-shadow: 0 0 1em #ffffff;
   box-shadow: 0 0 1em #ffffff;
 }
+
 .vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
   text-align: center;
   text-transform: uppercase;
@@ -598,14 +676,17 @@ easily in the skin designer. http://designer.videojs.com/
   font-weight: bold;
   cursor: default;
 }
+
 /* Subtitles Button */
 .vjs-default-skin .vjs-subtitles-button:before {
   content: "\e00c";
 }
+
 /* Captions Button */
 .vjs-default-skin .vjs-captions-button:before {
   content: "\e008";
 }
+
 /* Replacement for focus outline */
 .vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
 .vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
@@ -614,6 +695,7 @@ easily in the skin designer. http://designer.videojs.com/
   -moz-box-shadow: 0 0 1em #ffffff;
   box-shadow: 0 0 1em #ffffff;
 }
+
 /*
 REQUIRED STYLES (be careful overriding)
 ================================================================================
@@ -657,6 +739,7 @@ control positioning and full window mode. **
   -ms-user-select: none;
   user-select: none;
 }
+
 /* Playback technology elements expand to the width/height of the containing div
     <video> or <object> */
 .video-js .vjs-tech {
@@ -666,11 +749,13 @@ control positioning and full window mode. **
   width: 100%;
   height: 100%;
 }
+
 /* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
    checking fullScreenEnabled. */
 .video-js:-moz-full-screen {
   position: absolute;
 }
+
 /* Fullscreen Styles */
 body.vjs-full-window {
   padding: 0;
@@ -679,6 +764,7 @@ body.vjs-full-window {
   /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
   overflow-y: auto;
 }
+
 .video-js.vjs-fullscreen {
   position: fixed;
   overflow: hidden;
@@ -692,13 +778,16 @@ body.vjs-full-window {
   /* IE6 full-window (underscore hack) */
   _position: absolute;
 }
+
 .video-js:-webkit-full-screen {
   width: 100% !important;
   height: 100% !important;
 }
+
 .video-js.vjs-fullscreen.vjs-user-inactive {
   cursor: none;
 }
+
 /* Poster Styles */
 .vjs-poster {
   background-repeat: no-repeat;
@@ -711,6 +800,7 @@ body.vjs-full-window {
   position: relative;
   width: 100%;
 }
+
 .vjs-poster img {
   display: block;
   margin: 0 auto;
@@ -718,10 +808,12 @@ body.vjs-full-window {
   padding: 0;
   width: 100%;
 }
+
 /* Hide the poster when native controls are used otherwise it covers them */
 .video-js.vjs-using-native-controls .vjs-poster {
   display: none;
 }
+
 /* Text Track Styles */
 /* Overall track holder for both captions and subtitles */
 .video-js .vjs-text-track-display {
@@ -732,10 +824,12 @@ body.vjs-full-window {
   left: 1em;
   right: 1em;
 }
+
 /* Move captions down when controls aren't being shown */
 .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
   bottom: 1em;
 }
+
 /* Individual tracks */
 .video-js .vjs-text-track {
   display: none;
@@ -747,24 +841,34 @@ body.vjs-full-window {
   background-color: #000000;
   background-color: rgba(0, 0, 0, 0.5);
 }
+
 .video-js .vjs-subtitles {
-  color: #ffffff /* Subtitles are white */;
+  color: #ffffff
+    /* Subtitles are white */
+  ;
 }
+
 .video-js .vjs-captions {
-  color: #ffcc66 /* Captions are yellow */;
+  color: #ffcc66
+    /* Captions are yellow */
+  ;
 }
+
 .vjs-tt-cue {
   display: block;
 }
+
 /* Hide disabled or unsupported controls */
 .vjs-default-skin .vjs-hidden {
   display: none;
 }
+
 .vjs-lock-showing {
   display: block !important;
   opacity: 1;
   visibility: visible;
 }
+
 /* -----------------------------------------------------------------------------
 The original source of this file lives at
-https://github.com/videojs/video.js/blob/master/src/css/video-js.less */
+https://github.com/videojs/video.js/blob/master/src/css/video-js.less */

scene/public/static/js/loadCAD.js

@@ -1,40 +1,44 @@
 window.grendCAD = (function grendCAD() {
-  let initFloor
-  let initScript
-  let initDOM
-  let point, dire
+  let initFloor;
+  let initScript;
+  let initDOM;
+  let point, dire;
 
   window.cad = {
     setSign: function (p, d) {
-      point = p
-      dire = d
-    }
-  }
+      point = p;
+      dire = d;
+    },
+  };
 
   function loadScript(cb) {
-    if (initScript) return cb()
+    if (initScript) return cb();
 
-    let $script = document.createElement('script')
-    $script.src = '//www.4dmodel.com/CAD/bundle.js'
+    let $script = document.createElement("script");
+    $script.src = "//www.4dmodel.com/CAD/bundle.js";
     $script.onload = function () {
-      initScript = true
-      cb()
-    }
+      initScript = true;
+      cb();
+    };
 
-    document.documentElement.appendChild($script)
+    document.documentElement.appendChild($script);
   }
 
   function loadDOM($parent) {
     if (initDOM) return initDOM;
-    let $layer = document.createElement('div')
-    let $cad = document.createElement('div')
+    let $layer = document.createElement("div");
+    let $cad = document.createElement("div");
+    let $name = document.createElement("div");
 
-    $layer.className = 'cad'
-    $cad.id = 'cad'
-    $layer.appendChild($cad)
+    $name.className = "name";
+    // $name.textContent = "当前位置：耀光别墅";
+    $layer.appendChild($name);
 
+    $layer.className = "cad";
+    $cad.id = "cad";
+    $layer.appendChild($cad);
 
-    let style = document.createElement('style')
+    let style = document.createElement("style");
     style.innerHTML = `
       .cad {
         position: absolute;
@@ -42,10 +46,17 @@ window.grendCAD = (function grendCAD() {
         top: 20px;
         width: 180px;
         height: 180px;
-        background: rgba(81, 32, 32, 0.4);
-        border-radius: 5px;
-        border: 2px solid #D6B970;
+        background:  rgba(56,56,56,0.56);
         pointer-events: none;
+        
+      }
+      .name {
+        width: 100%;
+        height: 20px !important;
+        color: white;
+        font-size: 14px;
+        text-align:center;
+        margin-top: 10px;
       }
 
       .cad > div {
@@ -53,6 +64,8 @@ window.grendCAD = (function grendCAD() {
         height: 100%;
       }
 
+     
+
       @media only screen and (max-width: 1000px) { 
         .cad {
           position: absolute;
@@ -62,51 +75,52 @@ window.grendCAD = (function grendCAD() {
           top: 10px;
           width: 120px;
           height: 120px;
-          background: rgba(81, 32, 32, 0.4);
+          background:  rgba(56,56,56,0.56);
           border-radius: 5px;
           border: 2px solid #D6B970;
           }
+        .name {
+          font-size: 12px;
+        }
       }
-    `
+    `;
 
-    document.documentElement.appendChild(style)
-    $('body').append($layer)
-    $parent.appendChild(style)
-    $parent.appendChild($layer)
-    return $layer
+    document.documentElement.appendChild(style);
+    $("body").append($layer);
+    $parent.appendChild(style);
+    $parent.appendChild($layer);
+    return $layer;
   }
 
-
   function setStyle(signColor, borderColor, borderWidth) {
     cad.setDefaultPointStyle({
       fillColor: "rgba(0,0,0,0)",
-      storkeColor: "rgba(0,0,0,0)"
+      storkeColor: "rgba(0,0,0,0)",
     });
 
-    console.log(borderWidth)
+    console.log(borderWidth);
     cad.setDefaultLineStyle({
       width: borderWidth,
-      color: borderColor
+      color: borderColor,
     });
 
     cad.setDefaultSignStyle({
-      color: signColor
-    })
+      color: signColor,
+    });
   }
 
-
   return function (floor, $parent, signColor, borderColor, borderWidth) {
     if (initFloor) {
-      console.log('cache')
-      return setStyle(signColor, borderColor, borderWidth)
+      console.log("cache");
+      return setStyle(signColor, borderColor, borderWidth);
     }
-    console.log('load')
-    initFloor = floor
+    console.log("load");
+    initFloor = floor;
 
     loadScript(function () {
-      let $layer = loadDOM($parent)
+      let $layer = loadDOM($parent);
 
-      $layer.style.visibility = 'hidden'
+      $layer.style.visibility = "hidden";
       window.cad = structureCAD({
         data: {
           block: [],
@@ -117,40 +131,42 @@ window.grendCAD = (function grendCAD() {
           "vertex-xy": [],
           "vertex-z": [],
         },
-        layer: $layer.querySelector('#cad'),
-        edit: false
+        layer: $layer.querySelector("#cad"),
+        edit: false,
       });
 
-      setStyle(signColor, borderColor, borderWidth)
-      cad.hideDire()
-      cad.hideGauge()
+      setStyle(signColor, borderColor, borderWidth);
+      cad.hideDire();
+      cad.hideGauge();
 
-      console.log('loadData')
+      console.log("loadData");
       cad.loadData(initFloor);
       if (point && dire) {
-        window.cad.setSign(point, dire)
+        window.cad.setSign(point, dire);
       }
-      $layer.style.visibility = 'visible'
-    })
-
-  }
+      $layer.style.visibility = "visible";
+    });
+  };
 })();
 
-
 $.ajax({
   url: g_Prefix + "data/" + window.number + "/someData.json" + "?" + Date.now(),
-  method: 'GET',
+  method: "GET",
   success(data) {
-    if (!data.showCad) return
-
-
+    if (!data.showCad) return;
 
     $.ajax({
-      url: '//super.4dage.com/data/' + window.number + '/floor.json',
-      method: 'GET',
+      url: "//super.4dage.com/data/" + window.number + "/floor.json",
+      method: "GET",
       success(res) {
-        grendCAD(res, document.querySelector('body'), data.cadSignColor, data.cadBorderColor, data.cadBorderWidth)
-      }
-    })
-  }
-})
+        grendCAD(
+          res,
+          document.querySelector("body"),
+          data.cadSignColor,
+          data.cadBorderColor,
+          data.cadBorderWidth
+        );
+      },
+    });
+  },
+});

scene/src/App.vue

@@ -1,28 +1,33 @@
 <template>
-    <div class="vvvv">
-        <router-view/>
-        <div class="orientation-tip" v-if="isMobile">
-        <div>
-            <img :src="require('@/assets/images/project/landtip.png')" alt="" />
-            <p>请在竖屏模式观看</p>
-        </div>
-        </div>
+  <div class="vvvv">
+    <router-view />
+    <div class="orientation-tip" v-if="isMobile">
+      <div>
+        <img :src="require('@/assets/images/project/landtip.png')" alt="" />
+        <p>请在竖屏模式观看</p>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import '@/assets/style/reset.less'
-import '@/assets/style/public.less'
-export default {
-    
-}
+import "@/assets/style/reset.less";
+import "@/assets/style/public.less";
+export default {};
 </script>
 <style lang="less">
-.vvvv{
-    width: 100%;
-    height: 100%;
+@font-face {
+  font-family: "btmText"; /* 字体名称 */
+  src: url("../src/assets/fonts/SourceHanSerifCN-Medium.otf"); /* 字体文件相对路径 */
+}
+@font-face {
+  font-family: "AlimamaShuHeiTi-Bold"; /* 字体名称 */
+  src: url("../src/assets/fonts/AlimamaShuHeiTi-Bold.ttf"); /* 字体文件相对路径 */
+}
+.vvvv {
+  width: 100%;
+  height: 100%;
 }
-
 
 /*横屏体验*/
 .orientation-tip {
@@ -43,7 +48,7 @@ export default {
     transform: translate(-50%, -50%);
     text-align: center;
     > img {
-        width: 20%;
+      width: 20%;
     }
     > p {
       font-size: 16px;

scene/src/assets/style/myBase.css

@@ -3,65 +3,97 @@
   display: flex;
   align-items: center;
 }
+
 .pinBottom-container.drawerOpen {
   bottom: 0;
 }
+
 #drawer-container.drawerOpen #drawer.open {
   height: 140px;
 }
+
 #drawer-container.drawerOpen #drawer.open.noScroll,
 #drawer.open.noScroll.playing {
-  height: 137px;
+  height: 118px;
 }
+
 #thumb-container .thumbImg .overlay {
   color: #fff;
 }
+
 #thumb-container .active .overlay {
   color: #D6B970;
 }
-#thumb-container .active > img {
+
+#thumb-container .active>img {
   border: 3px solid #D6B970;
 }
+
 #drawer {
-  background-color: rgba(185, 12, 12, 0.8);
+  background-color: #fff3e1d0;
+  border-radius: 19px;
+  margin-bottom: 10px;
 }
+
 #drawer .darkGlass {
   background-color: transparent;
 }
+
 #progressBar .step.active::before,
 #progressBar .step.recent::before {
-  background-color: #D6B970;
+  background-color: #ED594B;
 }
+
 #popup {
   background: none;
 }
+
 #popup .popup-content {
   overflow: hidden;
 }
+
 #cad path {
   stroke-width: 0.5;
-  fill: rgba(185, 12, 12, 0.8);
-  stroke: #d1b198;
+  fill: #C8B992;
+  stroke: #C8B992;
 }
+
 #ele1 circle {
-  fill: rgba(185, 12, 12, 0.8);
+  fill: #978A68;
   r: 1;
 }
+
 #share-modal {
   display: none !important;
 }
+
 @media screen and (max-width: 1000px) {
+  #gui .pinBottom.right {
+    bottom: 60px;
+  }
+  #gui #drawer.playing {
+    border-radius: 0;
+  }
+  #drawer-container {
+    width: 100%;
+  }
+
   #drawer.open.noScroll {
-    height: 118px !important;
+    height: 94px !important;
+    margin-bottom: 0;
+    border-radius: 0;
   }
+
   #scrollFrame {
     padding: 8px 15px 0;
   }
+
   #scrollFrame .thumbImg .overlay {
     font-size: 12px;
   }
+
   #closepop {
     top: 4px;
     right: 4px;
   }
-}
+}

scene/src/assets/style/myBase.less

@@ -58,14 +58,14 @@
 
 #cad path {
   stroke-width: 0.5;
-  fill: rgba(185, 12, 12, 0.80);
+  fill: #C8B992 ;
   // 改变地图线的颜色
-  stroke: #d1b198
+  stroke: #C8B992 
 }
 
 #ele1 {
   circle {
-    fill: rgba(185, 12, 12, 0.80);
+    fill: #978A68;
     r: 1;
   }
 }

scene/src/components/welcome/index.vue

@@ -1,22 +1,14 @@
 <template>
-  <div class="welcome">
-    <div class="mobileBg" v-if="isMobile"></div>
-    <iframe
-      v-else
-      src="https://zzbbh.4dage.com/SWKK/show.html?id=WK1676144701759062016&vr=fd720_7kWYgznaO"
-      frameborder="0"
-    ></iframe>
-    <div class="btn" @click.stop="$emit('close')">
-      <img src="../../assets/img/home/homeBtn.png" alt="" />
-      <p>360环顾</p>
-    </div>
-  </div>
+  
 </template>
 
 <script>
+import browser from "@/utils/browser.js";
 export default {
   data() {
-    return {};
+    return {
+      isMobile: browser.mobile,
+    };
   },
   methods: {},
   mounted() {},
@@ -24,65 +16,5 @@ export default {
 </script>
 
 <style lang="less">
-.welcome {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 11001;
-  font-size: 0;
-  background-color: black;
-  // background-image: url('../../assets/img/home/homeBac.jpg');
-  // background-size: 100% 100%;
-  iframe {
-    width: 100%;
-    height: 100%;
-  }
 
-  .btn {
-    position: absolute;
-    z-index: 10;
-    bottom: 10%;
-    left: 50%;
-    transform: translateX(-50%);
-    cursor: pointer;
-    & > img {
-      width: 246px;
-    }
-    & > p {
-      color: #d6b970;
-      font-size: 24px;
-      font-weight: 700;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-
-  .mobileBg {
-    width: 100%;
-    height: 100%;
-    background-image: url('../../assets/img/mobileBg.jpg');
-    background-size: 100% 100%;
-  }
-
-  // 移动端
-  @media screen and (max-width: 1000px) {
-    .btn {
-      bottom: 6%;
-      & > img {
-        width: 140px;
-      }
-      & > p {
-        font-size: 16px;
-      }
-    }
-  }
-}
-</style>
+</style>

scene/src/router/index.js

@@ -1,24 +1,24 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Home from '../pages/Home.vue'
+import Vue from "vue";
+import VueRouter from "vue-router";
+import Home from "../pages/Home.vue";
 
-const originalPush = VueRouter.prototype.push
-VueRouter.prototype.push = function push (location) {
-  return originalPush.call(this, location).catch(err => err)
-}
+const originalPush = VueRouter.prototype.push;
+VueRouter.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch((err) => err);
+};
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
 const routes = [
   {
-    path: '/',
-    name: 'Home',
-    component: Home
-  }
-]
+    path: "/",
+    name: "Home",
+    component: Home,
+  },
+];
 
 const router = new VueRouter({
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;

scene/src/views/gui/components/hotList.vue

@@ -2,9 +2,17 @@
   <div class="hotList">
     <div class="title">
       <div class="titleLL">热点列表</div>
-      <div class="titleRR" @click="$emit('close')">
-        <img src="../../../assets/img/close.png" alt="" />
+    </div>
+    <div class="search-box">
+      <div class="search-box-input">
+        <input
+          type="text"
+          placeholder="请输入关键字"
+          v-model="searchKey"
+          show-word-limit
+        />
       </div>
+      <div class="search-box-btn" @click="search()">搜索</div>
     </div>
     <div class="main">
       <div class="txtNone" v-if="data.length === 0">暂无热点</div>
@@ -12,12 +20,15 @@
         <span
           :class="{ active: hotInd === index }"
           @click="openHot(item, index)"
-          v-for="(item, index) in data"
+          v-for="(item, index) in showData"
           :key="index"
           >{{ item.info.title ? item.info.title : "热点" }}</span
         >
       </div>
     </div>
+    <div class="titleRR" @click="$emit('close')">
+      <img src="../../../assets/img/close.png" alt="" />
+    </div>
   </div>
 </template>
 
@@ -27,11 +38,17 @@ export default {
   data() {
     return {
       data: [],
+      showData: [],
       hotInd: null,
+      searchKey: "",
     };
   },
   computed: {},
-  watch: {},
+  watch: {
+    searchKey(newValue, oldValue) {
+      this.search();
+    },
+  },
   methods: {
     openHot(e, index) {
       // 停止自动导览
@@ -39,11 +56,20 @@ export default {
       setTimeout(() => {
         e && e.examine(window.player, true);
         this.hotInd = index;
+        this.$emit("close");
       }, 200);
     },
+    search() {
+      // console.log(search)
+      this.showData = [];
+      this.showData = this.data.filter((item) => {
+        return item.info.title.indexOf(this.searchKey) != -1;
+      });
+    },
   },
   created() {
     this.data = window.myHotList || [];
+    this.showData = this.data;
   },
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -55,7 +81,7 @@ export default {
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='less' scoped>
+<style lang="less" scoped>
 .hotList {
   position: absolute;
   width: 940px;
@@ -63,9 +89,51 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-image: url("../../../assets/img/open/bg-list.png");
-  background-size: 100% 100%;
+  background: rgb(142, 100, 74);
   padding: 60px 80px;
+
+  .titleRR {
+    position: absolute;
+    right: -25px;
+    top: -25px;
+    cursor: pointer;
+    img {
+      width: 50px;
+    }
+  }
+
+  .search-box {
+    width: 100%;
+    height: 40px;
+
+    display: flex;
+    justify-content: space-between;
+    &-input {
+      width: 80%;
+      height: 100%;
+      border: 1px solid white;
+      border-radius: 50px;
+      padding: 5px 18px;
+      input {
+        width: 100%;
+        background: none;
+        border: none;
+        height: 100%;
+      }
+    }
+    &-btn {
+      width: 15%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: 16px;
+      background: rgb(233, 222, 205);
+      color: rgb(142, 100, 74);
+      border-radius: 50px;
+      cursor: pointer;
+    }
+  }
   .title {
     height: 60px;
     display: flex;
@@ -73,7 +141,7 @@ export default {
     justify-content: space-between;
     .titleLL {
       font-size: 24px;
-      color: #d6b970;
+      color: rgb(233, 222, 205);
     }
     .titleRR {
       cursor: pointer;
@@ -97,25 +165,26 @@ export default {
       color: #fff;
       font-size: 16px;
       & > span {
-        border-top: 1px solid #f0e2c0;
+        border-top: 1px solid rgb(233, 222, 205);
         padding: 15px 0;
         cursor: pointer;
         display: block;
         width: 100%;
+        color: rgb(233, 222, 205);
         &:last-child {
           margin-bottom: 60px;
           border-bottom: 1px solid #f0e2c0;
         }
         &:hover {
-          color: #d6b970;
+          color: #fff;
         }
       }
       .active {
-        color: #d6b970;
+        color: #fff;
       }
     }
     &::-webkit-scrollbar-thumb {
-      outline: 2px solid #d6b970;
+      outline: 2px solid rgb(233, 222, 205);
     }
     &::-webkit-scrollbar {
       width: 2px;
@@ -124,22 +193,26 @@ export default {
 }
 @media screen and (max-width: 1000px) {
   .hotList {
-    max-width: 500px;
+    max-width: 450px;
     width: 94%;
     height: 90%;
-    padding: 30px 10px 30px 30px;
+    padding: 30px;
+    .titleRR {
+      right: 10px;
+      top: 10px;
+      img {
+        width: 40px;
+      }
+    }
     .title {
       .titleLL {
         font-size: 18px;
       }
-      .titleRR {
-        position: absolute;
-        right: -5px;
-        top: 5px;
-      }
     }
     .main {
       margin-top: 10px;
+      width: 100%;
+      height: 420px;
       .txt {
         font-size: 14px;
         & > span {
@@ -154,4 +227,4 @@ export default {
     }
   }
 }
-</style>
+</style>

scene/src/views/gui/components/share.vue

@@ -1,77 +1,55 @@
 <template>
-  <div class="share">
-    <div class="imgBox" v-if="isOk">
-      <img :src="isOk" alt="" />
-      <p>{{ isMobile ? "可长按图片保存" : "可点击鼠标右键保存图片" }}</p>
-    </div>
-    <div class="main" id="canvsBox" v-else>
-      <!-- 数字 -->
-      <div class="txt">
-        第&nbsp;&nbsp;<span>{{ num }}</span
-        >&nbsp;&nbsp;位参与者
-      </div>
-      <!-- 二维码 -->
-      <div class="code">
-        <img src="code.png" alt="" />
-      </div>
-    </div>
-    <!-- 加载中 -->
-    <div
-      class="logingBox"
-      v-loading="!isOk"
-      element-loading-text="生成海报中"
-      element-loading-background="rgba(0, 0, 0, 0.8)"
-    ></div>
-    <div class="close" @click="$emit('close')">
-      <img src="../../../assets/img/close.png" alt="" />
+  <div class="shareBox" :class="{ shareBoxShow: share }">
+    <div class="shareMain">
+      <div class="close" @click="$emit('close')"></div>
+      <h3>分享</h3>
+      <p>
+        请使用手机扫描二维码或
+        <br />
+        复制分享链接
+      </p>
+      <img src="@/assets/img/Rcode.png" alt="" />
+      <div class="btnn" @click="copyPcTxt">复制分享链接</div>
     </div>
   </div>
 </template>
 
 <script>
-import html2canvas from "html2canvas";
-import { getVisitAPI } from "../../../utils/api";
 export default {
   components: {},
   props: ["openInd"],
   data() {
     return {
-      num: 0,
-      // 生成截图成功
-      isOk: "",
+
     };
   },
   computed: {},
   watch: {
-    openInd(val) {
-      if (val === 2) {
-        if (!this.isOk) this.toImgFu();
-      }
-    },
   },
   methods: {
-    // 生成截图
-    toImgFu() {
-      window.setTimeout(() => {
-        const dom = document.querySelector("#canvsBox");
-        html2canvas(dom, {
-          // backgroundColor: "transparent",
-          allowTaint: true,
-          useCORS: true,
-        }).then((canvas) => {
-          const link = canvas.toDataURL("image/jpeg");
-          this.isOk = link;
-        });
-      }, 100);
+    copyPcTxt() {
+      // 存储传递过来的数据
+      let OrderNumber = window.location.origin + "/SuperTwoCustom/MoLanDi/";
+      // 创建一个input 元素
+      // createElement() 方法通过指定名称创建一个元素
+      let newInput = document.createElement("input");
+      // 讲存储的数据赋值给input的value值
+      newInput.value = OrderNumber;
+      // appendChild() 方法向节点添加最后一个子节点。
+      document.body.appendChild(newInput);
+      // 选中input元素中的文本
+      // select() 方法用于选择该元素中的文本。
+      newInput.select();
+      // 执行浏览器复制命令
+      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
+      document.execCommand("Copy");
+      // 清空输入框
+      newInput.remove();
+      alert("复制成功");
     },
   },
   async created() {
-    try {
-      const res = await getVisitAPI();
-      this.num = res.data.pcsShow + res.data.pcsVisit;
-    } catch (e) {
-      console.log(e);
-    }
+
   },
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -83,115 +61,75 @@ export default {
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='less' scoped>
-.share {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 542px;
-  height: 820px;
-  .imgBox {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    & > img {
-      width: 100%;
-      height: 100%;
-    }
-    & > p {
-      position: absolute;
-      bottom: 10px;
-      right: 34px;
-      bottom: 20px;
-      width: 80px;
-      font-size: 12px;
-      text-align: center;
-    }
-  }
-  .logingBox {
+<style lang="less" scoped>
+.shareBox {
+
+  .shareMain {
+    padding: 40px 30px 0;
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 99;
-  }
-  .main {
-    width: 100%;
-    height: 100%;
-    background-image: url("../../../assets/img/open/bg-share.jpg");
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 450px;
+    height: 650px;
+    background: #8e644a;
     background-size: 100% 100%;
-    position: relative;
-    .txt {
+    text-align: center;
+
+    .close {
+      width: 48px;
+      height: 48px;
+      cursor: pointer;
       position: absolute;
-      bottom: 185px;
-      right: 30px;
-      color: #d6b970;
-      & > span {
-        font-size: 36px;
-        font-weight: 700;
-      }
+      right: -24px;
+      top: -24px;
+      background-image: url("../../../assets/img/close.png");
+      background-size: 100% 100%;
+      border-radius: 50%;
+      background-color: #fff;
     }
-    .code {
-      position: absolute;
-      bottom: 60px;
-      right: 34px;
-      width: 80px;
-      & > img {
-        border-radius: 6px;
-        width: 80px;
-      }
+
+    h3 {
+      text-align: left;
+      color: #f4efe6;
+      font-size: 24px;
+      margin-bottom: 50px;
+    }
+
+    p {
+      font-size: 20px;
+      color: #ffffff;
+      margin-bottom: 40px;
+    }
+
+    img {
+      width: 240px;
+      margin-bottom: 50px;
+    }
+
+    .btnn {
+      cursor: pointer;
+      width: 280px;
+      margin: 0 auto;
+      height: 60px;
+      border-radius: 30px;
+      border: 2px solid #f4efe6;
+      line-height: 58px;
+      font-size: 20px;
+      color: #ffffff;
     }
-  }
-  .close {
-    z-index: 99;
-    position: absolute;
-    right: -40px;
-    top: 10px;
-    cursor: pointer;
   }
 }
 // 移动端
 @media screen and (max-width: 1000px) {
-  .share {
-    max-width: 500px;
-    width: 90%;
-    height: 90%;
-    .imgBox {
-      & > p {
-        font-size: 12px;
-        bottom: 10px;
-        width: 120px;
-        right: 14px;
-        text-align: right;
-      }
-    }
-    .main {
-      // background-image: url("../../../assets/img/open/bg-shareM.jpg");
-      // background-size: 100% 100%;
-
-      .txt {
-        bottom: 24%;
-        right: 14px;
-        & > span {
-          font-size: 24px;
-        }
+  .shareBox {
+    .shareMain {
+      width: 90vw;
+      height: 90vh;
+      .close {
+        right: 10px;
+        top: 10px;
       }
-      .code {
-        width: 84px;
-        bottom: 30px;
-        right: 14px;
-        & > img {
-          width: 84px;
-        }
-      }
-    }
-    .close {
-      position: absolute;
-      right: -14px;
-      top: -14px;
-      cursor: pointer;
     }
   }
 }
@@ -207,4 +145,4 @@ export default {
     }
   }
 }
-</style>
+</style>

scene/src/views/gui/guide.vue

@@ -3,7 +3,7 @@
     <div id="drawer" class="fullWidth">
       <div class="frame-container darkGlass">
         <div id="scrollFrame" class="frame">
-          <ul id="thumb-container" class="slidee"></ul>
+          <ul id="thumb-container" class="slidee" ></ul>
         </div>
         <div class="scrollbar" id="scroller">
           <div class="handle"></div>
@@ -26,16 +26,16 @@ export default {
 </script>
 <style lang="less" scoped>
 #status {
-  background-color: rgba(185, 12, 12, 0.80);
-  color: #fff;
+  background-color: #fff3e1d0;
+  color: #ED594B ;
 }
 #progressBar {
   height: 100%;
   display: flex;
   align-items: center;
-  background-color: rgba(185, 12, 12, 0.80);
+  background-color: #fff3e1d0;
 }
 #playHead {
   background-color: transparent;
 }
-</style>
+</style>

scene/src/views/gui/menu.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="pinBottom-container" @touchstart.stop @keydown.stop>
+  <div
+    class="pinBottom-container"
+    @touchstart.stop
+    @keydown.stop
+    :style="{ bottom: isGuide ? '40px' : '' }"
+  >
     <div class="pinBottom center">
       <div id="view-controllers"></div>
     </div>
@@ -11,7 +16,7 @@
             class="previous desktop-only ui-icon"
             style="display: none"
           >
-            <a>
+            <a style="width: 100%; display: flex; justify-content: center">
               <img
                 rel="tooltip"
                 title=""
@@ -29,20 +34,24 @@
             data-original-title="播放"
           >
             <!-- 鼠标移入的显示 -->
-            <div class="hoverTit">自动导览</div>
-            <a>
+            <!-- <div class="hoverTit">自动漫游</div> -->
+            <a style="width: 100%; display: flex; justify-content: center">
               <img
                 :src="require('@/assets/images/icon/play.png')"
                 width="24"
                 height="24"
               />
             </a>
+            <div class="btmText">自动漫游</div>
           </div>
           <div id="pause" class="ui-icon" style="display: none">
-            <!-- 鼠标移入的显示 -->
-            <div class="hoverTit">自动导览</div>
-
-            <a>
+            <a
+              style="
+                width: 100%;
+                display: flex;
+                justify-content: center;
+              "
+            >
               <img
                 rel="tooltip"
                 title=""
@@ -50,8 +59,10 @@
                 width="24"
                 height="24"
                 data-original-title="暂停"
+
               />
             </a>
+            <div class="btmText">自动漫游</div>
           </div>
           <div
             id="next"
@@ -76,7 +87,7 @@
               title="场景导览"
             >
               <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">导览列表</div>
+              <!-- <div class="hoverTit">导览列表</div> -->
 
               <img
                 title=""
@@ -87,6 +98,7 @@
                   }.png`)
                 "
               />
+              <div class="btmText">导览列表</div>
             </div>
 
             <div
@@ -95,7 +107,7 @@
               rel="tooltip"
             >
               <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">全景漫游</div>
+              <!-- <div class="hoverTit">全景漫游</div> -->
 
               <img
                 class="icon icon-inside"
@@ -105,6 +117,8 @@
                 class="icon icon-inside active"
                 :src="require('@/assets/images/icon/inside_active.png')"
               />
+
+              <div class="btmText">全景漫游</div>
             </div>
             <div
               title="迷你漫游"
@@ -113,7 +127,7 @@
               rel="tooltip"
             >
               <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">三维视觉</div>
+              <!-- <div class="hoverTit">迷你模型</div> -->
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/dollhouse.png')"
@@ -122,6 +136,7 @@
                 class="icon icon-inside active"
                 :src="require('@/assets/images/icon/dollhouse_active.png')"
               />
+              <div class="btmText">迷你模型</div>
             </div>
             <div
               data-original-title="俯视图"
@@ -130,7 +145,7 @@
               title="顶部俯视"
             >
               <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">平面视觉</div>
+              <!-- <div class="hoverTit">顶部俯视</div> -->
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/floor.png')"
@@ -139,16 +154,16 @@
                 class="active icon icon-inside active"
                 :src="require('@/assets/images/icon/floor_active.png')"
               />
+              <div class="btmText">顶部俯视</div>
             </div>
 
             <!-- 热点列表 -->
-            <div id="myHotList" @click="openInd = 1">
-              <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">热点列表</div>
-              <img src="../../assets/img/hot.png" alt="" />
-            </div>
+            <!-- <div id="myHotList" @click="openInd = 1">
 
-            <div
+              <img src="../../assets/img/hot.png" alt="" />
+              <div class="btmText">热点列表</div>
+            </div> -->
+            <!-- <div
               data-original-title="VR"
               id="vr"
               rel="tooltip"
@@ -159,8 +174,8 @@
                 class="icon icon-inside"
                 :src="require('@/assets/images/VR.png')"
               />
-            </div>
-            <div
+            </div> -->
+            <!-- <div
               data-original-title="消除外壳"
               id="gui-remove-face"
               rel="tooltip"
@@ -171,7 +186,7 @@
                 class="icon icon-inside"
                 :src="require('@/assets/images/face.jpg')"
               />
-            </div>
+            </div> -->
           </div>
         </div>
       </div>
@@ -179,13 +194,13 @@
 
     <div class="pinBottom right hideTarget">
       <div class="rightViewContainer clearfix">
-        <div class="gui-floor">
+        <!-- <div class="gui-floor">
           <div class="gui-floor-title"></div>
           <div class="gui-floor-icon">
             <span class="gui-floor-number"></span>
           </div>
           <div class="container"></div>
-        </div>
+        </div> -->
 
         <div id="vr" class="ui-icon wide hidden" style="display: none">
           <a>
@@ -209,47 +224,54 @@
           <a>{[{ TERMS }]}</a>
         </div>
 
-        <!-- 回到pc页面（首页） -->
-        <div class="toHomeBox" @click="toHomeFu">
-          <!-- 鼠标移入的显示 -->
-          <div class="hoverTit">回到首页</div>
-          <img src="../../assets/img/toHome.png" alt="" />
+        <!-- 音乐 -->
+        <div id="volume" class="toHomeBox" style="margin-right: '10px'">
+          <img
+            id="openMusic"
+            style="display: block; margin-bottom: -1%"
+            @click="switchBGM(true)"
+            src="../../assets/img/musicAc.png"
+            alt=""
+          />
+          <img
+            id="closeMusic"
+            style="display: none; margin-bottom: -1%"
+            @click="switchBGM(false)"
+            src="../../assets/img/music.png"
+            alt=""
+          />
+          <div class="btmText quanpin">声音</div>
         </div>
 
-        <!-- vr -->
-        <div class="toHomeBox" @click="openVR">
+        <!-- 全屏 -->
+        <div class="toHomeBox quanpin">
           <!-- 鼠标移入的显示 -->
-          <div class="hoverTit">VR</div>
-          <img src="../../assets/img/openVR.png" alt="" />
+          <!-- <div class="hoverTit">全屏</div> -->
+          <!-- 打开全屏 -->
+          <img
+            @click="fullClick"
+            v-show="!isFull"
+            src="../../assets/img/fullscreen.png"
+            alt=""
+          />
+          <!-- 退出全屏 -->
+          <img
+            @click="exitfull"
+            v-show="isFull"
+            src="../../assets/img/fullscree_active.png"
+            alt=""
+          />
+          <div class="btmText">全屏</div>
         </div>
 
-        <!-- 音乐 -->
-        <div id="volume" class="ui-icon bgandshare wide">
-          <!-- 鼠标移入的显示 -->
-          <div class="hoverTit">{{ musicState ? "关闭" : "打开" }}音乐</div>
-          <div>
-            <img
-              id="openMusic"
-              style="display: block"
-              @click="switchBGM(true)"
-              src="../../assets/img/musicAc.png"
-              alt=""
-            />
-            <img
-              id="closeMusic"
-              style="display: none"
-              @click="switchBGM(false)"
-              src="../../assets/img/music.png"
-              alt=""
-            />
-          </div>
-        </div>
-        <!-- 分享 -->
-        <div class="toHomeBox" @click="openInd = 2">
-          <!-- 鼠标移入的显示 -->
-          <div class="hoverTit">分享</div>
-          <img src="../../assets/img/share.png" alt="" />
-        </div>
+        <img
+          @click="goBack"
+          class="back"
+          width="45px"
+          height="45px"
+          src="../../assets/img/back.png"
+          alt=""
+        />
       </div>
     </div>
 
@@ -257,12 +279,11 @@
       <HotList v-if="openInd === 1" @close="openInd = 0" />
       <Share v-show="openInd === 2" @close="openInd = 0" :openInd="openInd" />
     </div>
-
-
   </div>
 </template>
 
 <script>
+import axios from "axios";
 import HotList from "./components/hotList.vue";
 import Share from "./components/share.vue";
 
@@ -274,12 +295,64 @@ export default {
       musicState: false,
       // vr---热点列表---分享
       openInd: 0,
+      isFull: false,
+      isLike: false,
+      rightList: [
+        {
+          name: 0,
+        },
+        {
+          name: 0,
+        },
+      ],
     };
   },
   watch: {},
   computed: {},
-  mounted() {},
+  mounted() {
+    // this.onVisit()
+    this.onVisit();
+    setTimeout(() => {
+      this.getVisit();
+    }, 50);
+  },
   methods: {
+    // 返回
+    goBack() {
+      window.history.go(-1);
+    },
+    //请求点赞计数
+    async getVisit() {
+      axios
+        .get("https://count.4dage.com/api/count/detail/KJ-vAo7DRnQVeK")
+        .then((res) => {
+          console.log("接口", res);
+
+          if (res.data.code != -200) {
+            this.rightList[0].name = res.data.data.starSum;
+            this.rightList[1].name = res.data.data.visitSum;
+          }
+        });
+    },
+    //点赞
+    async onLike() {
+      if (!this.isLike) {
+        axios
+          .get("https://count.4dage.com/api/count/saveStar/KJ-vAo7DRnQVeK")
+          .then((res) => {
+            if (res.data.code != -200) {
+              this.rightList[0].name = res.data.data.starSum;
+            }
+          });
+        this.isLike = true;
+      }
+    },
+    // 浏览计数
+    onVisit() {
+      axios
+        .get("https://count.4dage.com/api/count/saveVisit/KJ-vAo7DRnQVeK")
+        .then((res) => {});
+    },
     switchBGM(flag) {
       this.musicState = flag;
       if (flag) {
@@ -292,6 +365,33 @@ export default {
         document.querySelector("#closeMusic").style.display = "none";
       }
     },
+    screenFull(e) {
+      if (e.requestFullscreen) {
+        e.requestFullscreen();
+      } else if (e.mozRequestFullScreen) {
+        e.mozRequestFullScreen();
+      } else if (e.webkitRequestFullscreen) {
+        e.webkitRequestFullscreen();
+      } else if (e.msRequestFullscreen) {
+        e.msRequestFullscreen();
+      }
+    },
+    fullClick() {
+      this.screenFull(document.documentElement);
+      this.isFull = true;
+    },
+    exitfull() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+      this.isFull = false;
+    },
     // 点击vr
     openVR() {
       window.open("https://www.720yun.com/t/acvkiwdegqb?scene_id=34882556");
@@ -301,6 +401,21 @@ export default {
       this.switchBGM(false);
       this.$emit("toHome");
     },
+
+    // 分享(点击复制链接)
+    share() {
+      const input = document.createElement("input");
+      input.setAttribute("readonly", "readonly");
+      let url = window.location.href;
+      input.setAttribute("value", url);
+      document.body.appendChild(input);
+      input.select();
+      if (document.execCommand("copy")) {
+        document.execCommand("copy");
+        alert("链接已复制");
+      }
+      document.body.removeChild(input);
+    },
   },
 };
 </script>
@@ -359,7 +474,7 @@ export default {
   }
 }
 #volume {
-  margin-right: 16px;
+  // margin-right: 16px;
 }
 #volume,
 #gui-fullscreen,
@@ -375,8 +490,21 @@ export default {
   }
 }
 
+.btmText {
+  height: 22px;
+  width: 100%;
+  line-height: 22px;
+  font-size: 14px;
+  // position: absolute;
+  // bottom: -45%;
+  // background: rgb(140, 86, 39);
+  text-align: center;
+  font-family: "SourceHanSerifCN-Medium";
+  color: #ed594b;
+}
+
 // 右侧菜单栏
-@wh: 44px;
+@wh: 30px;
 @margin: 0px;
 #play,
 #pause {
@@ -389,12 +517,13 @@ export default {
 .rightViewContainer {
   display: flex !important;
   align-items: center !important;
+  //text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
 }
 #gui-modes-map {
   > div {
     margin-right: @margin;
     > img {
-      width: @wh;
+      width: auto;
       height: @wh;
       display: block !important;
     }
@@ -420,7 +549,7 @@ export default {
   width: 44px;
 }
 #volume {
-  width: 44px;
+  // width: 44px;
 }
 
 #gui-fullscreen-exit img {
@@ -433,18 +562,26 @@ export default {
     width: 100%;
     cursor: pointer;
     img {
-      width: 100%;
+      width: 50px;
     }
   }
 }
 
 .toHomeBox {
-  margin-right: 20px;
+  // margin-right: 20px;
+  width: 75px;
   cursor: pointer;
   position: relative;
-  width: 44px;
+  // width: 44px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
   img {
-    width: 44px;
+    width: auto;
+    height: 30px;
+    margin-bottom: -2%;
   }
   &:hover {
     .hoverTit {
@@ -453,6 +590,10 @@ export default {
   }
 }
 
+.back {
+  display: none;
+}
+
 .pinBottom-container {
   #myHotList {
     position: relative;
@@ -490,41 +631,80 @@ export default {
   .viewContainer {
     & > div {
       img {
-        width: 33px !important;
-        height: 33px !important;
+        // width: 40px !important;
+        // height: 40px !important;
+        margin-bottom: 5px;
       }
     }
   }
   .pinBottom-container #myHotList {
-    width: 50px;
+    width: 60px;
     margin-bottom: 15px;
+
+    img {
+      margin-bottom: 10px;
+    }
   }
 
   .pinBottom-container {
+    width: 60px;
+    justify-content: left;
+    margin-left: 10px;
+    bottom: 130px;
+    background-image: none;
+    padding: 0;
+    .leftPic {
+      display: none;
+    }
+    .rightPic {
+      display: none;
+    }
+    .pinBottom.right {
+      height: auto;
+    }
     .pinBottom.right.hideTarget {
       position: fixed;
-      top: 200px;
+      bottom: 60px;
       right: 10px;
+      height: auto !important;
       .rightViewContainer {
         flex-direction: column;
+        // margin-top: 30px;
         & > div,
         #volume {
-          width: 50px !important;
+          width: 45px;
+          height: 45px;
           text-align: right;
           margin-right: 0;
-          margin-bottom: 10px;
+          margin-bottom: 20px;
+          background: #fff3e1c9;
+          border-radius: 50px;
           & > div {
             display: flex;
-            justify-content: flex-end;
+            justify-content: center;
           }
           img {
-            width: 33px;
-            height: 33px;
+            width: 30px;
+            height: 30px;
+            margin-bottom: 12px;
           }
         }
       }
     }
   }
+  .btmText {
+    font-size: 12px;
+    bottom: -20%;
+    border-radius: 50px;
+    height: 19px;
+    line-height: 19px;
+    background: #fff3e1;
+  }
+  .quanpin {
+    display: none !important;
+  }
+  .back {
+    display: block;
+  }
 }
-
 </style>

scene/vue.config.js

@@ -12,7 +12,7 @@ module.exports = {
         globalVars: getLessVariables(path.resolve(__dirname, './src/assets/style/globalVars.less'))
       }
     }
-  }
+  },
 };