1

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

@@ -84,7 +84,7 @@
     }
 
     .contentBox {
-      height: calc(100% - 73px);
+      height: 100%;
       width: 100%;
       display: grid;
       grid-template-columns: 1fr 1fr;
@@ -114,17 +114,23 @@
       padding: 20px 0;
       font-size: 20px;
     }
-
-    .mainTab>span:hover {
+    
+    /* .mainTab>span:hover {
       font-weight: bold;
+    } */
+    .el-tabs__item{
+      color: #fff;
+      font-size: 18px;
+    }
+    .el-tabs__nav-next, .el-tabs__nav-prev {
+      color: #fff;
     }
-
     .activeTab {
       background-color: rgba(0, 0, 0, .4) !important;
       font-weight: bold;
     }
 
-    .mainTab>span {
+    /* .mainTab>span {
       display: inline-block;
       height: 29px;
       padding: 0 12px;
@@ -132,12 +138,19 @@
       background-color: rgba(0, 0, 0, .2);
       margin-left: 5px;
       cursor: pointer;
-    }
+    } */
 
-    .mainTab>span:hover {
+    /* .mainTab>span:hover {
       font-weight: bold;
+    } */
+    .el-tabs__item:hover{
+      color: #fff;
+      font-weight: 600;
+    }
+    .el-tabs__item.is-active {
+      color: #fff;
+      font-weight: 600;
     }
-
     .activeTab {
       background-color: rgba(0, 0, 0, .4) !important;
       font-weight: bold;
@@ -148,6 +161,7 @@
     }
 
     li {
+      width: 90%;
       overflow: hidden;
       word-break: break-all;
       white-space: nowrap;
@@ -165,17 +179,17 @@
     .yqfw {
       display: flex;
       flex-wrap: wrap;
-      padding: 3rem;
+      padding: 50px;
       flex: 1;
     }
 
     .yqlb {
       display: grid;
-      padding: 0 0 0.9rem 0.9rem;
+      padding: 0 0 15px 15px;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 1fr 1fr 1fr;
-      grid-column-gap: 0.2rem;
-      grid-row-gap: 0.9rem;
+      grid-column-gap: 8px;
+      grid-row-gap: 26px;
       flex: 1;
     }
 
@@ -480,7 +494,7 @@
     <div class="content">
       <div id="map"></div>
       <div class="contentR">
-        <div class="location"><i class="el-icon-location"></i>&nbsp;南岸区</div>
+        <!-- <div class="location"><i class="el-icon-location"></i>&nbsp;南岸区</div> -->
         <div class="contentBox">
           <div class="contentItem">
             <video autoplay loop muted playsinline style="width:100%;height: 100%;">
@@ -488,20 +502,25 @@
             </video>
           </div>
           <div class="contentItem">
-            <div class="mainTab"><span class="activeTab" @click="switchTab(1)">区位条件</span><span
-                @click="switchTab(2)">创新优势</span><span @click="switchTab(3)">产业特色</span></div>
+            <!-- <div class="mainTab"><span class="activeTab" @click="switchTab(1)">区位条件</span><span
+                @click="switchTab(2)">创新优势</span><span @click="switchTab(3)">产业特色</span></div> -->
+                <el-tabs v-model="activeName" type="card" @tab-click="switchTab">
+                  <el-tab-pane label="区位条件" name="1"></el-tab-pane>
+                  <el-tab-pane label="创新优势" name="2"></el-tab-pane>
+                  <el-tab-pane label="产业特色" name="3"></el-tab-pane>
+                </el-tabs>
             <div class="main">
-              <div v-show="this.activeName===1">
-                <li><img src="image/listcricle.png" />15分钟直达江北国际机场，20分钟可抵重庆西部物流园</li>
-                <li><img src="image/listcricle.png" />高铁重庆东站主体结构封顶</li>
-                <li><img src="image/listcricle.png" />13座长江大桥贯通南北</li>
-                <li><img src="image/listcricle.png" />轨道3号线、6号线、10号线及环线等运营</li>
+              <div v-show="this.activeName==='1'">
+                <li title="15分钟直达江北国际机场，20分钟可抵重庆西部物流园"><img src="image/listcricle.png" />15分钟直达江北国际机场，20分钟可抵重庆西部物流园</li>
+                <li title="高铁重庆东站主体结构封顶"><img src="image/listcricle.png" />高铁重庆东站主体结构封顶</li>
+                <li title="13座长江大桥贯通南北"><img src="image/listcricle.png" />13座长江大桥贯通南北</li>
+                <li title="轨道3号线、6号线、10号线及环线等运营"><img src="image/listcricle.png" />轨道3号线、6号线、10号线及环线等运营</li>
               </div>
-              <div v-show="this.activeName===2">
-                <li><img src="image/listcricle.png" />拥有国家级基地（园区）7个、高等院校6所</li>
-                <li><img src="image/listcricle.png" />高新技术企业、科技型企业分别达344家、2640家</li>
-                <li><img src="image/listcricle.png" />市级以上研发平台301个（国家级20个）</li>
-                <li><img src="image/listcricle.png" />20项科技成果入选2022年度重庆市科学技术奖</li>
+              <div v-show="this.activeName==='2'">
+                <li title="拥有国家级基地（园区）7个、高等院校6所"><img src="image/listcricle.png" />拥有国家级基地（园区）7个、高等院校6所</li>
+                <li title="高新技术企业、科技型企业分别达344家、2640家"><img src="image/listcricle.png" />高新技术企业、科技型企业分别达344家、2640家</li>
+                <li title="市级以上研发平台301个（国家级20个）"><img src="image/listcricle.png" />市级以上研发平台301个（国家级20个）</li>
+                <li title="20项科技成果入选2022年度重庆市科学技术奖"><img src="image/listcricle.png" />20项科技成果入选2022年度重庆市科学技术奖</li>
               </div>
               <!-- <el-tab-pane label="资源优势">
                   <li><img src="image/listcricle.png" />15分钟直达江北国际机场，20分钟可抵重庆西部物流园</li>
@@ -509,13 +528,13 @@
                   <li><img src="image/listcricle.png" />13座长江大桥贯通南北</li>
                   <li><img src="image/listcricle.png" />轨道3号线、6号线、10号线及环线等运营</li>
                 </el-tab-pane> -->
-              <div v-show="this.activeName===3">
-                <li><img src="image/listcricle.png" />2023年地区生产总值增长6.7%，居中心城区第一</li>
-                <li><img src="image/listcricle.png" />加快构建智能终端、软件信息服务、大健康3个1000亿级主导产业体系</li>
-                <li><img src="image/listcricle.png" />加快构建节能环保、汽车电子2个500亿级特色支柱产业体系</li>
-                <li><img src="image/listcricle.png" />长嘉汇金融中心</li>
-                <li><img src="image/listcricle.png" />国际消费中心城市中心区</li>
-                <li><img src="image/listcricle.png" />重庆脑与智能科学中心</li>
+              <div v-show="this.activeName==='3'">
+                <li title="2023年地区生产总值增长6.7%，居中心城区第一"><img src="image/listcricle.png" />2023年地区生产总值增长6.7%，居中心城区第一</li>
+                <li title="加快构建智能终端、软件信息服务、大健康3个1000亿级主导产业体系"><img src="image/listcricle.png" />加快构建智能终端、软件信息服务、大健康3个1000亿级主导产业体系</li>
+                <li title="加快构建节能环保、汽车电子2个500亿级特色支柱产业体系"><img src="image/listcricle.png" />加快构建节能环保、汽车电子2个500亿级特色支柱产业体系</li>
+                <li title="长嘉汇金融中心"><img src="image/listcricle.png" />长嘉汇金融中心</li>
+                <li title="国际消费中心城市中心区"><img src="image/listcricle.png" />国际消费中心城市中心区</li>
+                <li title="重庆脑与智能科学中心"><img src="image/listcricle.png" />重庆脑与智能科学中心</li>
               </div>
               <!-- <div class="mainBox mb" @click="window.open('https://www.cqna.gov.cn/zjna/nagk/qwtj/202306/t20230606_12033765.html')">
                   <img src="image/qwtj.png" />区位条件
@@ -619,7 +638,7 @@
         fadeOut: false,
         fadeIn: false,
         id: null,
-        activeName: 1
+        activeName: '1'
       };
     },
     created() { },
@@ -631,12 +650,14 @@
     },
     methods: {
       switchTab(val) {
-        this.activeName = val
-        const arr = document.querySelectorAll('.mainTab>span')
-        arr.forEach(item => {
-          item.classList.remove('activeTab')
-          arr[val - 1].classList.add('activeTab')
-        })
+        console.log(val);
+        
+        this.activeName = val.name
+        // const arr = document.querySelectorAll('.mainTab>span')
+        // arr.forEach(item => {
+        //   item.classList.remove('activeTab')
+        //   arr[val - 1].classList.add('activeTab')
+        // })
 
       },
       goIndex() {