pano&menu

pano3.html

@@ -77,6 +77,16 @@
             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;
@@ -93,6 +103,12 @@
             cursor: pointer;
         }
 
+        #menu .panoEnd{
+            display: flex;
+            justify-content: flex-end;
+            align-items: flex-end;
+        }
+
         #menu .panoSelect{
             position: relative;
             margin: 10px;
@@ -101,7 +117,7 @@
         }
 
         #menu .pano .title,#menu .panoSelect .title{
-            position: absolute;
+            /* position: absolute;
             top:50%;
             left:50%;
             transform:translate(-50%,-50%);
@@ -110,10 +126,27 @@
             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 {
@@ -164,72 +197,13 @@
 
     <div id="tip">Walking...</div>
 
+    <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 class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div class="pano">
-            <div class="title">ddd</div>
-            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
-        </div>
-        <div >
             -
         </div>
 
@@ -241,8 +215,6 @@
 
     <script src="app.min.js"></script>
 
-    <!-- <script src="app.min.js"></script> -->
-
     <script type="text/javaScript">
 
     </script>