修改四园一港首页

nngkxxdp/src/main/resources/static/naxsb/indexsyyg.html

@@ -39,15 +39,16 @@
 
         .indexcot .top {
             display: flex;
-            width: 65%;
             margin: auto;
-            justify-content: space-between;
+            justify-content: center;
         }
 
         .indexcot .logo {
             display: flex;
             align-items: center;
             font-size: 20px;
+            margin-right: 10%;
+            white-space: nowrap;
         }
 
         .indexcot .logo img {
@@ -57,12 +58,18 @@
 
         .indexcot .menu {
             width: 60%;
+            max-width: 620px;
             font-size: 16px;
             display: flex;
             justify-content: space-evenly;
             align-items: center;
         }
 
+        .indexcot .menu li {
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
         .indexcot .menu .active {
             font-size: 20px;
             padding-bottom: 5px;
@@ -72,9 +79,10 @@
 
         .indexcot .title {
             display: flex;
-            width: 65%;
-            margin: auto;
-            margin-top: 235px;
+            width: auto;
+            max-width: 1200px;
+            margin: 0 auto;
+            margin-top: 15%;
         }
 
         .indexcot .title .left {
@@ -82,18 +90,21 @@
             color: #FFFFFF;
             display: flex;
             flex-direction: column;
+            white-space: nowrap;
         }
 
         .indexcot .right {
             font-size: 80px;
             color: #FFFFFF;
+            white-space: nowrap;
         }
 
         #titleTabs {
-            width: 80%;
-            margin: auto;
+            max-width: 1500px;
+            margin: 0 auto;
             font-size: 20px;
             display: flex;
+            justify-content: center;
             margin-top: 50px;
         }
 
@@ -116,17 +127,19 @@
         }
 
         .tab-items {
-            width: 20%;
+            /* width: 16%; */
             cursor: pointer;
         }
 
         .tab-items>.name {
-            min-width: 228px;
             height: 67px;
-            line-height: 67px;
-            text-align: center;
             background: #5598E7;
             margin-left: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            white-space: nowrap;
+            padding: 0 10px;
         }
 
         .tab-items.active>.name {
@@ -189,9 +202,10 @@
         </div>
         <div id="titleTabs">
             <div class="tab">
-                <div class="tab-items" :class="{ active: currentTab === titleList.id }" v-for="(tab, index)  in this.titleList"
-                    :key="index" @click="currentTab = titleList.id">
-                    <div class="name">
+                <div class="tab-items" :class="{ active: currentTab === tab.id }"
+                    v-for="(tab, index)  in this.titleList" :key="index" @mouseenter="currentTab = tab.id"
+                    @mouseleave="currentTab = -1">
+                    <div class="name" @click="tsmore()">
                         {{tab.title}}
                     </div>
                     <ul class="tab-contents">
@@ -199,7 +213,7 @@
                             <img src="images/listlogo.png" alt="" />
                             <div class="name">{{tabl}}</div>
                         </li>
-                        <li class="more" @click="tsmore()">
+                        <li class="more" @click="tsmore()" v-if="tab.subtitleList.length">
                             探索更多>>
                         </li>
                     </ul>
@@ -216,7 +230,7 @@
         el: '#titleTabs',
         data: function () {
             return {
-                currentTab: 1,
+                currentTab: -1,
                 titleList: [
 
                 ],
@@ -231,18 +245,18 @@
             tsmore() {
                 window.location.href = "indexcygyy.html"
             },
-            getParkData(){
-                let that=this;
+            getParkData() {
+                let that = this;
                 $.ajax({
-                    url: "http://localhost:8082/parkData/",
+                    url: "http://172.16.99.105:8082/parkData/",
                     type: "get",
                     dataType: "json",
                     success: function (data) {
 
                         data.forEach(function (item) {
-                            item.subtitleList=item.subtitle?item.subtitle.split(","):[];
+                            item.subtitleList = item.subtitle ? item.subtitle.split(",") : [];
                         })
-                        that.titleList=data;
+                        that.titleList = data;
                         console.log(data);
                     }
                 })