平面图

8ac49da4 · liuqing · 9f8f09fe · 8ac49da4 · 8ac49da4 · 9f8f09fe
Commit 8ac49da4 authored Nov 10, 2023 by liuqing
10 changed files
--- a/plandirectory/areaPlan.html
+++ b/plandirectory/areaPlan.html
@@ -5,7 +5,17 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监区平面图</title>
    <script src="../static/js/flexible.js"></script>
+    <script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
    <link rel="stylesheet" href="../static/css/common.css">
+    <script>
+        $(document).ready(function() {
+        $("ul li").mouseenter(function() {
+            $(this).find("img").css("transform", "scale(1.03)"); /* 鼠标进入时将图片放大为1.2倍 */
+        }).mouseleave(function() {
+            $(this).find("img").css("transform", "scale(1)"); /* 鼠标离开时恢复图片原始大小 */
+        });
+        });
+    </script>
 </head>
 <body>
    <div class="container">
@@ -98,30 +108,35 @@
                    <ul>
                        <li class="a_floor">
                            <a href="#">  <img src="../static/images/A_floor.png"/></a>
+                            <span>A栋</span>
                        </li>
                        <li class="bg1_floor">
                            <a href="#">  <img src="../static/images/bgq_floor.png"/></a>
+                            <span>办公楼</span>
                        </li>
                        <li class="b_floor">
                            <a href="#">  <img src="../static/images/B_floor.png"/></a>
+                            <span>B栋</span>
                        </li>
                        <li class="g_floor">
                            <a href="#">  <img src="../static/images/G_floor.png"/></a>
+                            <span>G栋</span>
                        </li>
                        <li class="c_floor">
                            <a href="#">  <img src="../static/images/C_floor.png"/></a>
+                            <span>C栋</span>
                        </li>
                        <li class="e_floor">
                            <a href="#">  <img src="../static/images/E_floor.png"/></a>
-                        </li>
-                        <li class="d_floor">
-                            <a href="#">  <img src="../static/images/D_floor.png"/></a>
+                            <span>E栋</span>
                        </li>
                        <li class="d_floor_index">
                            <a href="#">  <img src="../static/images/D_floor_1.png"/></a>
+                            <span>D栋</span>
                        </li>
                        <li class="f_floor">
                            <a href="#">  <img src="../static/images/F_floor.png"/></a>
+                            <span>F栋</span>
                        </li>
                        <!-- <li class="h_floor">
                            <a href="#">  <img src="../static/images/F_floor.png"/></a>

--- a/static/css/common.css
+++ b/static/css/common.css
@@ -162,12 +162,20 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
   position: absolute;
   
 }
+.area-right ul li span{
+    position: fixed;
+    font-size: 0.6rem;
+}
 .area-right ul .a_floor img{
   width: 12.6rem;
 }
 .area-right ul .a_floor{
   left: 3.9rem;
   top: 3rem;
+}
+.area-right ul .a_floor span{
+   left: 26rem;
+   top: 7rem;
 }    
 .area-right ul .bg1_floor img{
   width: 16rem;
@@ -176,6 +184,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
   left: 4rem;
   top: 4.6rem;
 } 
+.area-right ul .bg1_floor span{
+   left: 30.7rem;
+   top:8.4rem;
+}  
 .area-right ul .b_floor img{
   width: 5rem;
 }
@@ -183,6 +195,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
   left: 4rem;
   top: 7.8rem;
 } 
+.area-right ul .b_floor span{
+   left: 20rem;
+   top: 13.6rem;
+} 
 .area-right ul .b_floor{
   left: 4rem;
   top: 7.8rem;
@@ -194,6 +210,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
   left: 4rem;
   top: 12.2rem;
 } 
+.area-right ul .g_floor span{
+   margin-top: 2.5rem;
+   margin-left: -2.4rem;
+} 
 .area-right ul .c_floor img{
   width: 7.3rem;
 }
@@ -201,6 +221,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
   left: 13.6rem;
   top: 4.2rem;
 } 
+.area-right ul .c_floor span{
+   left: 31rem;
+   top: 11.8rem;
+} 
 .area-right ul .e_floor img{
   width: 5rem;
 }
@@ -209,6 +233,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
   left: 15.5rem;
   top: 13.5rem;
 } 
+.area-right ul .e_floor span{
+   margin-top: 1rem;
+   margin-left: -1.8rem;
+} 
 .area-right ul .d_floor img{
   width: 3rem;
 }
@@ -216,6 +244,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
   right: 12rem;
   top: 6rem;
 } 
+.area-right ul .d_floor_index span{
+   margin-top: 5rem;
+   margin-left: -1.8rem;
+} 
 .area-right ul .f_floor img{
   width: 5rem;
 }
@@ -223,13 +255,17 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
   right: 2.6rem;
   top: 11.7rem;
 } 
+.area-right ul .f_floor span{
+   margin-top: 0.6rem;
+   margin-left: -1.8rem;
+} 
 .area-right ul .d_floor_index img{
   width: 5rem;
 }
 .area-right ul .d_floor_index{
-   right: 12rem;
+   right: 11rem;
   z-index: 1;
-   top: 6rem;
+   top: 6.6rem;
 } 

 /**业务层**/
@@ -239,4 +275,4 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
   margin: 0 auto;
   margin-top: 2rem;
   background-size: 100% 100%;
-}
\ No newline at end of file
+}
--- a/static/images/A_floor.png
+++ b/static/images/A_floor.png
--- a/static/images/B_floor.png
+++ b/static/images/B_floor.png
--- a/static/images/C_floor.png
+++ b/static/images/C_floor.png
--- a/static/images/D_floor_1.png
+++ b/static/images/D_floor_1.png
--- a/static/images/E_floor.png
+++ b/static/images/E_floor.png
--- a/static/images/F_floor.png
+++ b/static/images/F_floor.png
--- a/static/images/G_floor.png
+++ b/static/images/G_floor.png
--- a/static/images/bgq_floor.png
+++ b/static/images/bgq_floor.png