css

pano3.html

@@ -10,167 +10,9 @@
     <!--   <script src="./js/loaders/MTLLoader.js"></script> -->
     <!--   <script src="js/loaders/collada/AnimationHandler.js"></script> -->
     <meta charset="utf-8">
-
+    <link rel="stylesheet" href="style.css">
 
     <style>
-        body {
-            /* set margin to 0 and overflow to hidden, to go fullscreen */
-            margin: 0;
-            overflow: hidden;
-        }
-
-        .navigation{
-            display: flex;
-            z-index: 10;
-            position: fixed;
-            top:15px;
-            right:15px;
-            user-select: none;
-            -moz-user-select: none;
-            -khtml-user-select: none;
-            -webkit-user-select: none;
-            -o-user-select: none;
-            
-            /* flex-direction: column;
-            align-items: center; */
-        }
-
-        .navigation .map_img{
-            width: 128px;
-            height: 128px;
-        }
-
-        #map{
-            position: absolute;
-            /* z-index: 11;
-            top:32px; */
-            right:15px;
-        }
-        #cam{
-            position: absolute;
-            /* z-index: 12; */
-            /* top:32px; */
-            right:15px;
-            /* transform: rotate(180deg); */
-        }
-
-        #redPoints{
-            position: relative;
-            right:15px;
-        }
-
-        .navigation .cam_img{
-            width: 32px;
-            height: 32px;
-        }
-
-        .navigation .point_img{
-            width: 8px;
-            height: 8px;
-        }
-
-        #tip{
-            position: absolute;
-            right:15px;
-            bottom: 15px;
-            color: gray;
-            display: none;
-        }
-
-        #menuTip{
-            position: absolute;
-            left:50%;
-            top: 50%;
-            color: gray;
-            display: none;
-            transform: translate(-50%,-50%);
-            font-size: 26px;
-        }
-
-        #menu{
-            position: absolute;
-            z-index: 9;
-            display: none;
-            bottom: 0px;
-            width: 100%; 
-            overflow: auto;
-            background-color: #eaeee3;
-        }
-
-        #menu .pano{
-            position: relative;
-            margin: 10px;
-            cursor: pointer;
-        }
-
-        #menu .panoEnd{
-            display: flex;
-            justify-content: flex-end;
-            align-items: flex-end;
-        }
-
-        #menu .panoSelect{
-            position: relative;
-            margin: 10px;
-            cursor: pointer;
-            background-color: violet;
-        }
-
-        #menu .pano .title,#menu .panoSelect .title{
-            /* position: absolute;
-            top:50%;
-            left:50%;
-            transform:translate(-50%,-50%);
-            font-size: 18px;
-            width: 120px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap; */
-
-            position: absolute;
-            top: 90%;
-            left: 50%;
-            transform: translate(-50%,-50%);
-            font-size: 16px;
-            width: 100px;
-            color: #eb9713;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-
-
-        }
-
-        #menu .pano .thumb img,#menu .panoSelect .thumb img{
-            width:120px;
-            
-        }
-
-        *::-webkit-scrollbar {
-            /*滚动条整体样式*/
-            width: 8px;/*定义纵向滚动条宽度*/
-            height: 8px;/*定义横向滚动条高度*/
-        }
-
-        *::-webkit-scrollbar-thumb {
-            /*滚动条内部滑块*/
-            border-radius: 8px;
-            background-color: hsla(220, 4%, 58%, 0.3);
-            transition: background-color 0.3s;
-        }
-
-        *::-webkit-scrollbar-thumb:hover {
-            /*鼠标悬停滚动条内部滑块*/
-            background: #bbb;
-        }
-
-        *::-webkit-scrollbar-track {
-            /*滚动条内部轨道*/
-            background: #ededed;
-        }
 
 
     </style>
@@ -183,14 +25,14 @@
     </div>
 
     <div class="navigation">
-      <div style="position:relative">
-        <div id='map'><img class="map_img" src="panos/HomeHouseMap.png"/></div>
-        <div id='cam'><img class="cam_img" src="panos/HomePoint.png"/></div>
-        <div id='redPoints'>
-            <!-- <img id='Li' class="point_img" src="panos/redPoint.png"/> -->
+        <div style="position:relative">
+            <div id='map'><img class="map_img" src="panos/HomeHouseMap.png"/></div>
+            <div id='cam'><img class="cam_img" src="panos/HomePoint.png"/></div>
+            <div id='redPoints'>
+                <!-- <img id='Li' class="point_img" src="panos/redPoint.png"/> -->
+            </div>
         </div>
-    </div>
-        
+            
     </div>
 
 
@@ -200,12 +42,6 @@
     <div id="menuTip"> 单击“返回/OK”键全景观赏当前图片 </div>
 
     <div id='menu'>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-            -
-        </div>
 
     </div>
 
@@ -213,6 +49,8 @@
 
     <div class="ctrlBtn"></div>
 
+
+
     <script src="app.min.js"></script>
 
     <script type="text/javaScript">

style.css

@@ -0,0 +1,311 @@
+body {
+    /* set margin to 0 and overflow to hidden, to go fullscreen */
+    margin: 0;
+    overflow: hidden;
+}
+
+.navigation{
+    display: flex;
+    z-index: 10;
+    position: fixed;
+    top:15px;
+    right:15px;
+    user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -o-user-select: none;
+    
+    /* flex-direction: column;
+    align-items: center; */
+}
+
+.navigation .map_img{
+    width: 128px;
+    height: 128px;
+}
+
+#map{
+    position: absolute;
+    /* z-index: 11;
+    top:32px; */
+    right:15px;
+}
+#cam{
+    position: absolute;
+    /* z-index: 12; */
+    /* top:32px; */
+    right:15px;
+    /* transform: rotate(180deg); */
+}
+
+#redPoints{
+    position: relative;
+    right:15px;
+}
+
+.navigation .cam_img{
+    width: 32px;
+    height: 32px;
+}
+
+.navigation .point_img{
+    width: 8px;
+    height: 8px;
+}
+
+#tip{
+    position: absolute;
+    right:15px;
+    bottom: 15px;
+    color: gray;
+    display: none;
+}
+
+#menuTip{
+    position: absolute;
+    left:50%;
+    top: 50%;
+    color: gray;
+    display: none;
+    transform: translate(-50%,-50%);
+    font-size: 26px;
+}
+
+#menu{
+    position: absolute;
+    z-index: 9;
+    display: none;
+    bottom: 0px;
+    width: 100%; 
+    overflow: auto;
+    background-color: #eaeee3;
+}
+
+#menu .pano{
+    position: relative;
+    margin: 10px;
+    cursor: pointer;
+}
+
+#menu .panoEnd{
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
+#menu .panoSelect{
+    position: relative;
+    margin: 10px;
+    cursor: pointer;
+    background-color: violet;
+}
+
+#menu .pano .title,#menu .panoSelect .title{
+    /* position: absolute;
+    top:50%;
+    left:50%;
+    transform:translate(-50%,-50%);
+    font-size: 18px;
+    width: 120px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; */
+
+    position: absolute;
+    top: 90%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    font-size: 16px;
+    width: 100px;
+    color: #eb9713;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+
+}
+
+
+
+#menu .pano .thumb img,#menu .panoSelect .thumb img{
+    width:120px;
+    
+}
+
+
+/* ---------------------------------- */
+.home{
+    display: flex;
+    flex-direction: column;
+    margin-left: 30px;
+    margin-top: 30px;
+}
+
+.home .preview{
+    display: flex;
+}
+
+.home .detail{
+    
+}
+
+.home .detail .title{
+    font-size: 24px;
+    margin: 10px 5px;
+}
+
+.home .detail .thumb{
+    width:480px;
+    height:360px;
+}
+
+.home .detail .thumb img{
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.home .descript{
+    margin: 20px 25px;
+}
+
+#descriptTitle{
+    font-size: 20px;
+    margin: 10px 0px;
+}
+
+#descriptContent{
+
+}
+
+.home .descript .play{
+    display: flex;
+    position: relative;
+    top: 40%;
+    background-color: cadetblue;
+    width: 90px;
+    height: 40px;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    color: #ffffff;
+    transform:translate(0,-50%);
+    cursor: pointer;
+} 
+
+#listTitle{
+    font-size: 20px;
+    margin: 30px 30px 20px 30px;
+}
+
+#listContent{
+    /* position: absolute;
+    z-index: 9;
+    display: flex;
+    bottom: 0px;
+    width: 100%; 
+    overflow: auto;
+    background-color: #eaeee3; */
+
+        /* position: absolute; */
+    /* z-index: 9; */
+    display: flex;
+    bottom: 0px;
+    width: 100%;
+    margin-left: 30px;
+    margin-right: 30px;
+    overflow: auto;
+    background-color: #eaeee3;
+
+
+    /* display: flex;
+    margin-top: 60px;
+    margin-left: 30px;
+    margin-right: 30px;
+    height: 300px;
+    overflow: auto;
+    background-color: #eaeee3; */
+}
+
+#listContent .pano{
+    position: relative;
+    margin: 10px;
+    cursor: pointer;
+}
+
+#listContent .panoEnd{
+    /* display: flex;
+    justify-content: flex-end;
+    align-items: flex-end; */
+    margin: 30px;
+}
+
+#listContent .panoSelect{
+    position: relative;
+    margin: 10px;
+    cursor: pointer;
+    background-color: violet;
+}
+
+#listContent .pano .title,#listContent .panoSelect .title{
+    /* position: absolute;
+    top:50%;
+    left:50%;
+    transform:translate(-50%,-50%);
+    font-size: 18px;
+    width: 120px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; */
+
+    position: absolute;
+    top: 90%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    font-size: 16px;
+    width: 100px;
+    color: #eb9713;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+
+}
+
+#listContent .pano .thumb img,#listContent .panoSelect .thumb img{
+    width:200px;
+    
+}
+
+
+
+
+*::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 8px;/*定义纵向滚动条宽度*/
+    height: 8px;/*定义横向滚动条高度*/
+}
+
+*::-webkit-scrollbar-thumb {
+    /*滚动条内部滑块*/
+    border-radius: 8px;
+    background-color: hsla(220, 4%, 58%, 0.3);
+    transition: background-color 0.3s;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    /*鼠标悬停滚动条内部滑块*/
+    background: #bbb;
+}
+
+*::-webkit-scrollbar-track {
+    /*滚动条内部轨道*/
+    background: #ededed;
+}