移动端适配

nngkxxdp/src/main/resources/static/school/css/conmon.css

@@ -23,44 +23,36 @@ a{
 }
 @media screen and (min-width: 320px) {
     html {
-        font-size: 14px;
+        font-size: 12px;
     }
 }
 
 @media screen and (min-width: 360px) {
     html {
-        font-size: 16px;
+        font-size: 12px;
     }
 }
 
 @media screen and (min-width: 400px) {
     html {
-        font-size: 18px;
+        font-size: 14px;
     }
 }
 
 @media screen and (min-width: 440px) {
     html {
-        font-size: 20px;
+        font-size: 14px;
     }
 }
 
 @media screen and (min-width: 480px) {
     html {
-        font-size: 22px;
+        font-size: 14px;
     }
 }
 
 @media screen and (min-width: 640px) {
     html {
-        font-size: 28px;
+        font-size: 15px;
     }
-}
-/*蒙层*/
-.mask{
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.7);
-    position: absolute;
-    z-index: 998;
 }

nngkxxdp/src/main/resources/static/school/js/schoolDetail.js

@@ -69,9 +69,9 @@ function initHead(data){
 			'</ul>' +
 		'</div>' +
 		'<ul class="bottom">' +
-			'<li><img src="images/logo-dh.png" alt="" style="margin-right: 15px;"><span>电话：</span><span class="link" title="'+data.contactTel+'">'+data.contactTel+'</span></li>' +
-			'<li><img src="images/logo-dt.png" alt="" style="margin-right: 13px;"><span>地址：</span><span class="link" title="'+data.address+'">'+data.address+'</span></li>' +
-			"<li style='cursor:pointer;position: relative;' onclick='clickQRCode()'><img src='images/logo-wx.png' alt=''><span>微信：点击查看二维码</span><div id='ewmImg' style='position: absolute;z-index: 99999;background: #f6f6f6;border-radius: 5px;height: 150px;width: 150px;padding: 8px;display: none;top: 30px;'><img style='height: 150px;width: 150px;' src='" + wechatImg + "' alt=''></div></li>" +
+			'<li><img src="images/logo-dh.png" alt="" style="margin-right: 0.9375rem;"><span>电话：</span><span class="link" title="'+data.contactTel+'">'+data.contactTel+'</span></li>' +
+			'<li><img src="images/logo-dt.png" alt="" style="margin-right: 0.8125rem;"><span>地址：</span><span class="link" title="'+data.address+'">'+data.address+'</span></li>' +
+			"<li style='cursor:pointer;position: relative;' onclick='clickQRCode()'><img src='images/logo-wx.png' alt=''><span>微信：点击查看二维码</span><div id='ewmImg' style='position: absolute;z-index: 99999;background: #f6f6f6;border-radius: 0.3125rem;height: 9.375rem;width: 9.375rem;padding: 0.5rem;display: none;top: 1.875rem;'><img style='height: 9.375rem;width: 9.375rem;' src='" + wechatImg + "' alt=''></div></li>" +
 			'<li><img src="images/logo-gw.png" alt=""><span>官网：</span><span class="link" onclick="gotos(\''+website+'\')" title="'+website+'">'+website+'</span></li>' +
 		'</ul>'
 	document.getElementById('infoHead').innerHTML =html

nngkxxdp/src/main/resources/static/school/schoolDetail.html

@@ -15,11 +15,11 @@
         }
 
         .content .route {
-            width: 100px;
-            height: 30px;
-            line-height: 30px;
+            width: 6.25rem;
+            height: 1.875rem;
+            line-height: 1.875rem;
             text-align: center;
-            font-size: 14px;
+            font-size: 0.875rem;
             background: #004A93;
             color: #fff;
             float: right;
@@ -27,19 +27,20 @@
 
         .schoolList {
             display: flex;
-            margin-top: 20px;
+            margin-top: 1.25rem;
         }
 
         .schoolList .logo {
-            width: 550px;
-            height: 309px;
+            width: 34.375rem;
+            height: 19.3125rem;
             background-size: 100% 100%;
             position: relative;
             background-position: center center;
         }
-        .logo-img{
-            width: 550px;
-            height: 309px;
+
+        .logo-img {
+            width: 34.375rem;
+            height: 19.3125rem;
         }
 
         .schoolList .logo .name {
@@ -53,77 +54,80 @@
             /*box-sizing: border-box;*/
             /*position: absolute;*/
             /*top: 9px;*/
-            padding: 0px 35px 0px 20px;
+            padding: 0px 2.1875rem 0px 1.25rem;
             background-size: 100% 100%;
-            height: 41px;
-            line-height: 41px;
-            padding-left: 20px;
-            font-size: 16px;
+            height: 2.5625rem;
+            line-height: 2.5625rem;
+            padding-left: 1.25rem;
+            font-size: 1rem;
             color: #FFFFFF;
             box-sizing: border-box;
             position: absolute;
-            top: 9px;
-            left: -10px;
+            top: 0.5625rem;
+            left: -0.625rem;
         }
 
         .schoolList .message {
-            width: 560px;
-            margin-left: 20px;
+            width: 35rem;
+            margin-left: 1.25rem;
         }
 
         .schoolList .message .title {
-            font-size: 26px;
+            font-size: 1.625rem;
             font-weight: bold;
             color: #333333;
         }
 
         .schoolList .message .other {
-            width: 597px;
-            height: 151px;
+            width: 37.3125rem;
+            height: 9.4375rem;
             background: rgb(176 176 176 / 22%);
-            font-size: 16px;
+            font-size: 1rem;
             color: #666666;
-            padding: 10px 0;
+            padding: 0.625rem 0;
             box-sizing: border-box;
             display: flex;
-            margin-top: 15px;
+            margin-top: 0.9375rem;
         }
 
         .schoolList .message .other li {
-            line-height: 30px;
+            line-height: 1.875rem;
             word-wrap: break-word;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
             cursor: pointer;
         }
-        .schoolList .message .other ul{
-            width:50%;
-            padding-left: 26px;
+
+        .schoolList .message .other ul {
+            width: 50%;
+            padding-left: 1.625rem;
             box-sizing: border-box;
         }
+
         .schoolList .message .bottom {
-            margin-top: 15px;
+            margin-top: 0.9375rem;
         }
 
         .schoolList .message .bottom li {
-            width: 260px;
-            font-size: 16px;
-            height: 30px;
-            line-height: 30px;
+            width: 16.25rem;
+            font-size: 1rem;
+            height: 1.875rem;
+            line-height: 1.875rem;
             color: #666666;
             float: left;
-            margin-top: 10px;
+            margin-top: 0.625rem;
             display: flex;
             align-items: center;
         }
-        .schoolList .message .bottom li:nth-child(2n){
-            margin-left: 40px;
+
+        .schoolList .message .bottom li:nth-child(2n) {
+            margin-left: 2.5rem;
         }
 
-        .link{
+        .link {
             display: inline-block;
-            width: 160px;
+            width: 10rem;
             word-wrap: break-word;
             overflow: hidden;
             white-space: nowrap;
@@ -131,45 +135,43 @@
             cursor: pointer;
         }
 
-        .schoolList .message .bottom li span{
-            display: inline-block;
-            word-wrap: break-word;
-            overflow: hidden;
+        .schoolList .message .bottom li span {
             white-space: nowrap;
-            text-overflow: ellipsis;
             cursor: pointer;
-            line-height: 30px;
+            line-height: 1.875rem;
         }
 
-        .schoolList .message .bottom li a{
-            overflow:hidden;
+        .schoolList .message .bottom li a {
+            overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
-            -o-text-overflow:ellipsis;
+            -o-text-overflow: ellipsis;
         }
 
         .schoolList .message .bottom li img {
-            margin-right: 8px;
+            margin-right: 0.5rem;
         }
 
         .titleList {
             width: 100%;
             display: flex;
-            border-bottom: 1px solid #004A93;
-            margin-top: 40px;
+            border-bottom: 0.0625rem solid #004A93;
+            margin-top: 2.5rem;
         }
 
         .titleList li {
-            width: 146px;
-            height: 56px;
-            line-height: 56px;
+            width: 9.125rem;
+            height: 3.5rem;
+            line-height: 3.5rem;
             text-align: center;
-            font-size: 20px;
+            font-size: 1.25rem;
             color: #333333;
         }
-        .titleList li{
+
+        .titleList li {
             cursor: pointer;
         }
+
         .titleList li.click {
             color: #FFFFFF;
             background: #004A93;
@@ -177,8 +179,8 @@
         }
 
         .cost {
-            margin: 10px auto;
-            width: 1356px;
+            margin: 0.625rem auto;
+            width: 84.75rem;
         }
 
         .cost ul {
@@ -189,47 +191,134 @@
 
         .cost li {
             width: 50%;
-            padding-left: 37px;
+            padding-left: 2.3125rem;
         }
 
         .cost .title {
-            height: 55px;
+            height: 3.4375rem;
             background: #77A7D5;
-            font-size: 20px;
+            font-size: 1.25rem;
             color: #FFFFFF;
         }
 
         .cont li {
-            height: 207px;
-            font-size: 16px;
+            height: 12.9375rem;
+            font-size: 1rem;
             color: #333333;
-            border: 1px solid #77A7D5;
+            border: 0.0625rem solid #77A7D5;
         }
 
         .cont .list {
             display: flex;
             align-items: center;
-            line-height: 36px;
+            line-height: 2.25rem;
         }
 
         .cont .list .redius {
-            width: 8px;
-            height: 8px;
-            border-radius: 4px;
+            width: 0.5rem;
+            height: 0.5rem;
+            border-radius: 0.25rem;
             background-color: #333;
         }
+
+        /*适配*/
+        @media screen and (max-width: 320px) {
+            html {
+                font-size: 9px;
+            }
+        }
+
+        @media screen and (min-width: 320px) {
+            html {
+                font-size: 12px;
+            }
+        }
+
+        @media screen and (min-width: 360px) {
+            html {
+                font-size: 12px;
+            }
+        }
+
+        @media screen and (min-width: 400px) {
+            html {
+                font-size: 14px;
+            }
+        }
+
+        @media screen and (min-width: 440px) {
+            html {
+                font-size: 14px;
+            }
+        }
+
+        @media screen and (min-width: 480px) {
+            html {
+                font-size: 14px;
+            }
+        }
+
+        @media screen and (min-width: 640px) {
+            html {
+                font-size: 15px;
+            }
+        }
+
+        @media screen and (max-width: 750px) {
+            .content {
+                width: 100%;
+                margin: auto;
+            }
+
+            .schoolList {
+                flex-direction: column;
+                margin-top: 0;
+            }
+
+            .logo-img {
+                width: 100%;
+            }
+
+            .schoolList .logo {
+                width: 100%;
+            }
+
+            .schoolList .message {
+                margin-left: 0;
+                width: 100%;
+            }
+
+            .content .route {
+                float: none;
+                margin-top: 0.625rem;
+                position: fixed;
+                top: 90%;
+                right: 0;
+            }
+
+            .schoolList .message .other {
+                width: 100%;
+            }
+
+            .schoolList .message .bottom li {
+                width: 44%;
+            }
+
+            .cost {
+                width: 28.75rem;
+            }
+        }
     </style>
 </head>
 
 <body>
     <div class="content">
-        <div class="route" style="cursor:pointer " id="route" onclick="back()">返回</div>
         <div class="schoolList">
-            <div class="logo" >
-                <img class="logo-img" src="images/school.png"/>
+            <div class="logo">
+                <img class="logo-img" src="images/school.png" />
                 <div class="name" style="background-image: url(images/bg-xx.png);" id="schoolType"></div>
             </div>
-<!--            <div class="title" id="name">珊瑚实验小学</div>
+            <!--            <div class="title" id="name">珊瑚实验小学</div>
                 <div class="other">
                     <ul>
                         <li id="district">所在区:南岸区</li>
@@ -253,6 +342,7 @@
             <div class="message" id="infoHead">
 
             </div>
+            <div class="route" style="cursor:pointer " id="route" onclick="back()">返回</div>
         </div>
         <ul class="titleList">
             <li id="school" class="click" onclick="checkSchool()">学校介绍</li>
@@ -261,7 +351,8 @@
             <li id="ZZZS" onclick="checkZZZS()">自主招生</li>
 
         </ul>
-        <div style="font-size: 16px;color: #333333;text-indent: 40px;margin-top: 20px;line-height: 36px;min-height: 200px;" id="contentText">
+        <div style="font-size: 1rem;color: #333333;text-indent: 2.5rem;margin-top: 1.25rem;line-height: 2.25rem;min-height: 12.5rem;padding: 0 0.625rem;box-sizing: border-box;"
+            id="contentText">
             重庆市南岸区珊瑚实验小学，创办于1986年。学校校园环境优美，教学设施完善，师资力量雄厚，是国家教育部命名的全国现代技术教育实验学校，重庆市首
             比示范学校。学校占地近60
             亩，现有教学班71个，学生3800多名，教职工211名，其中专任教师205名，正高级教师1名，中学高级教师13名，特级教师9名，市级骨干教师13名。区级学科带头人4名，骨干教师4名。分校珊瑚浦辉实验小学是一所全新的，高起点的全日制实验小学，全校学生共3905名。
@@ -275,31 +366,32 @@
                 <li>书杂费</li>
                 <li>学杂费</li>
             </ul>
-            <ul class="cont "style="min-height: 300px"  id="conts">
-<!--<li><div class="list"><div class="redius"></div><span>项目名称：</span><span>书杂费</span></div><div class="list"><div class="redius"></div><span>项目名称：</span><span>书杂费</span></div><div class="list"><div class="redius"></div><span>项目名称：</span><span>书杂费</span></div><div class="list"><div class="redius"></div><span>项目名称：</span><span>书杂费</span></div><div class="list"><div class="redius"></div><span>项目名称：</span><span>书杂费</span></div></li>-->
-<!--                <li style="border-left:none;">-->
-<!--                    <div class="list">-->
-<!--                        <div class="redius"></div><span>项目名称：</span><span>书杂费</span>-->
-<!--                    </div>-->
-<!--                    <div class="list">-->
-<!--                        <div class="redius"></div><span>项目名称：</span><span>书杂费</span>-->
-<!--                    </div>-->
-<!--                    <div class="list">-->
-<!--                        <div class="redius"></div><span>项目名称：</span><span>书杂费</span>-->
-<!--                    </div>-->
-<!--                    <div class="list">-->
-<!--                        <div class="redius"></div><span>项目名称：</span><span>书杂费</span>-->
-<!--                    </div>-->
-<!--                    <div class="list">-->
-<!--                        <div class="redius"></div><span>项目名称：</span><span>书杂费</span>-->
-<!--                    </div>-->
-<!--                </li>-->
+            <ul class="cont " style="min-height: 18.75rem" id="conts">
+                <!--<li><div class="list"><div class="redius"></div><span>项目名称：</span><span>书杂费</span></div><div class="list"><div class="redius"></div><span>项目名称：</span><span>书杂费</span></div><div class="list"><div class="redius"></div><span>项目名称：</span><span>书杂费</span></div><div class="list"><div class="redius"></div><span>项目名称：</span><span>书杂费</span></div><div class="list"><div class="redius"></div><span>项目名称：</span><span>书杂费</span></div></li>-->
+                <!--                <li style="border-left:none;">-->
+                <!--                    <div class="list">-->
+                <!--                        <div class="redius"></div><span>项目名称：</span><span>书杂费</span>-->
+                <!--                    </div>-->
+                <!--                    <div class="list">-->
+                <!--                        <div class="redius"></div><span>项目名称：</span><span>书杂费</span>-->
+                <!--                    </div>-->
+                <!--                    <div class="list">-->
+                <!--                        <div class="redius"></div><span>项目名称：</span><span>书杂费</span>-->
+                <!--                    </div>-->
+                <!--                    <div class="list">-->
+                <!--                        <div class="redius"></div><span>项目名称：</span><span>书杂费</span>-->
+                <!--                    </div>-->
+                <!--                    <div class="list">-->
+                <!--                        <div class="redius"></div><span>项目名称：</span><span>书杂费</span>-->
+                <!--                    </div>-->
+                <!--                </li>-->
             </ul>
         </div>
         <ul class="titleList">
-            <li  class="click" style="width: 180px">资助奖励（国家）</li>
+            <li class="click" style="width: 11.25rem">资助奖励（国家）</li>
         </ul>
-        <div style="font-size: 16px;color: #333333;text-indent: 40px;margin-top: 20px;line-height: 36px; min-height: 300px" id="jsao">
+        <div style="font-size: 1rem;color: #333333;text-indent: 2.5rem;margin-top: 1.25rem;line-height: 2.25rem; min-height: 18.75rem;padding: 0 0.625rem;box-sizing: border-box;"
+            id="jsao">
             重庆市南岸区珊瑚实验小学，创办于1986年。学校校园环境优美，教学设施完善，师资力量雄厚，是国家教育部命名的全国现代技术教育实验学校，重庆市首
             比示范学校。学校占地近60
             亩，现有教学班71个，学生3800多名，教职工211名，其中专任教师205名，正高级教师1名，中学高级教师13名，特级教师9名，市级骨干教师13名。区级学科带头人4名，骨干教师4名。分校珊瑚浦辉实验小学是一所全新的，高起点的全日制实验小学，全校学生共3905名。
@@ -310,4 +402,5 @@
 <script type="text/javascript" src="layui/layui.js" charset="utf-8"></script>
 <script src="js/jquery-3.5.1.min.js"></script>
 <script src="js/schoolDetail.js"></script>
+
 </html>