增加窗口电话tab页

src/views/CenterItroduction.vue

@@ -144,37 +144,37 @@
               background-size: 100% 100%;
             "
           >
-            <div
-              style="
-                height: 53px;
-                width: 570px;
-                background-image: url(images/jkqzxzn1.png);
-                background-size: 100% 100%;
-                position: relative;
-              "
-            >
-              <img
-                src="images/sjx.png"
-                style="position: absolute; top: 13px; left: 30px"
-              />
-              <p
-                style="
-                  position: absolute;
-                  color: #ffffff;
-                  font-size: 24px;
-                  font-weight: 400;
-                  margin-left: 56px;
-                  line-height: 53px;
-                "
+            <div style="display: flex; justify-content: space-between">
+              <div
+                v-for="(item, index) in tabs"
+                :key="index"
+                @click="handelChange(index)"
+                class="tabs-title"
+                :class="isActive === index ? 'isActive' : 'active'"
               >
-                南岸区、 重庆经开区政务服务（茶园）中心
-              </p>
+                <img
+                  src="images/sjx.png"
+                  style="position: absolute; top: 13px; left: 30px"
+                />
+                <p
+                  style="
+                    position: absolute;
+                    color: #ffffff;
+                    font-size: 24px;
+                    font-weight: 400;
+                    margin-left: 56px;
+                    line-height: 53px;
+                  "
+                >
+                  {{ item }}
+                </p>
+              </div>
             </div>
             <div style="height: 480px" class="phone-box">
               <div
                 style="
                   display: flex;
-                  justify-content: space-between;
+                  justify-content: start;
                   margin-top: 21px;
                   overflow-x: auto;
                   height: 100%;
@@ -182,7 +182,7 @@
               >
                 <div
                   class="phone-item"
-                  v-for="(item, index) in listData"
+                  v-for="(item, index) in filterData"
                   :key="index"
                 >
                   <div
@@ -325,49 +325,53 @@ export default {
         limit: 6,
       },
       jumpPage: null,
+      filterData: [],
       listData: [
         {
           arr: [
             {
-              title: "咨询窗口",
+              title: "1F 咨询窗口",
               num: "一楼咨询台",
               dept: "区政务办",
               phone: "023-62606771",
             },
             {
-              title: "社保卡窗口",
-              num: "1、2、3、4",
-              dept: "区人力社保局",
-              phone: "023-62525236、023-62602939",
+              title: "1F 初审取号",
+              num: "1、2",
+              dept: "区民政局",
+              phone: "023-62805025",
             },
           ],
         },
         {
           arr: [
             {
-              title: "出入境",
-              num: "1-8",
-              dept: "区公安分局（出入境）",
-              phone: "023-62807722",
+              title: "1F 婚姻登记",
+              num: "3-8",
+              dept: "区民政局",
+              phone: "023-62805025",
             },
             {
-              title: "营业执照咨询",
-              num: "1-16",
-              dept: "区市场监管局",
-              phone: "023-62606751",
+              title: "1F 登记窗口",
+              num: "9、10",
+              dept: "区民政局",
+              phone: "023-62805025",
             },
           ],
         },
         {
+          arr: [],
+        },
+        {
           arr: [
             {
-              title: "综合（税务）",
-              num: "17",
-              dept: "区税务局",
-              phone: "023-62606763",
+              title: "1F 社保卡窗口",
+              num: "1、2、3、4",
+              dept: "区人力社保局",
+              phone: "023-62525236、023-62602939",
             },
             {
-              title: "残联综合窗口",
+              title: "2F 残联综合窗口",
               num: "205",
               dept: "区残联",
               phone: "-",
@@ -377,13 +381,13 @@ export default {
         {
           arr: [
             {
-              title: "财政综合窗口",
+              title: "2F 财政综合窗口",
               num: "206",
               dept: "区财政局",
               phone: "023-62988007",
             },
             {
-              title: "无差别综合窗口",
+              title: "2F 无差别综合窗口",
               num: "207、209",
               dept: "区教委、区科技局、区经济信息委、区民政局、区司法局、区委统战部（侨办）、区商务委、区退役军人事务局、区应急局、区统计局、区民族宗教委、区烟草专卖局",
               phone: "023-62980273",
@@ -393,13 +397,13 @@ export default {
         {
           arr: [
             {
-              title: "一件事一次办",
+              title: "2F 一件事一次办",
               num: "208",
               dept: "跨省通办、川渝通办、五省通办、新生儿登记一件事",
               phone: "023-62980273",
             },
             {
-              title: "文旅综合窗口",
+              title: "2F 文旅综合窗口",
               num: "210",
               dept: "区文化旅游委",
               phone: "023-62606250",
@@ -409,13 +413,13 @@ export default {
         {
           arr: [
             {
-              title: "档案综合窗口",
+              title: "2F 档案综合窗口",
               num: "211",
               dept: "区档案局",
               phone: "023-62980244",
             },
             {
-              title: "卫健综合窗口",
+              title: "2F 卫健综合窗口",
               num: "212-215",
               dept: "区卫生健康委",
               phone: "023-62980379",
@@ -425,13 +429,13 @@ export default {
         {
           arr: [
             {
-              title: "交通综合窗口",
+              title: "2F交通综合窗口",
               num: "217-221",
               dept: "区交通局（运管）",
               phone: "023-62982072",
             },
             {
-              title: "公安综合窗口",
+              title: "2F 公安综合窗口",
               num: "224-235",
               dept: "区公安分局",
               phone: "023-62985279",
@@ -441,13 +445,13 @@ export default {
         {
           arr: [
             {
-              title: "经开区企业开办综合窗口",
+              title: "3F 经开区企业开办综合窗口",
               num: "301-307",
               dept: "经开区市场监管局",
               phone: "023-62980204、023-62980207",
             },
             {
-              title: "经开区立项用地规划综合窗口",
+              title: "3F 经开区立项用地规划综合窗口",
               num: "308",
               dept: "经开区改革发展科技局",
               phone: "023-62980243",
@@ -457,13 +461,13 @@ export default {
         {
           arr: [
             {
-              title: "经开区南岸区工程建设许可（小型建设项目）",
+              title: "3F 经开区南岸区工程建设许可（小型建设项目）",
               num: "310",
               dept: "区规划自然资源局",
               phone: "023-62606752",
             },
             {
-              title: "经开区施工许可 竣工验收 综合窗口",
+              title: "3F 经开区施工许可 竣工验收 综合窗口",
               num: "311",
               dept: "经开区生态环境建管局",
               phone: "023-62980249",
@@ -473,13 +477,13 @@ export default {
         {
           arr: [
             {
-              title: "南岸区施工许可 竣工验收 综合窗口 帮代办窗口",
+              title: "3F 南岸区施工许可 竣工验收 综合窗口 帮代办窗口",
               num: "312",
               dept: "区住房城乡建委",
               phone: "023-62606780",
             },
             {
-              title: "经开市政综合窗口",
+              title: "3F 经开市政综合窗口",
               num: "313",
               dept: "经开区建设服务中心",
               phone: "023-62789342",
@@ -489,13 +493,13 @@ export default {
         {
           arr: [
             {
-              title: "交通建设综合窗口",
+              title: "3F 交通建设综合窗口",
               num: "314",
               dept: "区交通局（公路）",
               phone: "023-62392861",
             },
             {
-              title: "生态环境综合窗口",
+              title: "3F 生态环境综合窗口",
               num: "315",
               dept: "区生态环境局",
               phone: "023-62606735",
@@ -505,13 +509,13 @@ export default {
         {
           arr: [
             {
-              title: "涉农事务综合窗口",
+              title: "3F 涉农事务综合窗口",
               num: "316",
               dept: "区农业农村委",
               phone: "023-62606735",
             },
             {
-              title: "发改委综合窗口",
+              title: "3F 发改委综合窗口",
               num: "317",
               dept: "区发展改革委",
               phone: "023-62606782",
@@ -521,13 +525,13 @@ export default {
         {
           arr: [
             {
-              title: "消防综合窗口",
+              title: "3F 消防综合窗口",
               num: "318",
               dept: "区消防救援支队",
               phone: "023-62606739",
             },
             {
-              title: "城市管理综合窗口",
+              title: "3F 城市管理综合窗口",
               num: "319-320",
               dept: "区城市管理局",
               phone: "023-62606760",
@@ -537,13 +541,13 @@ export default {
         {
           arr: [
             {
-              title: "市政公用服务（水电气讯）综合窗口",
+              title: "3F 市政公用服务（水电气讯）综合窗口",
               num: "321",
               dept: "-",
               phone: "-",
             },
             {
-              title: "经开区办不成事反应窗口",
+              title: "3F 经开区办不成事反应窗口",
               num: "322",
               dept: "经开区行政服务中心",
               phone: "023-62606905",
@@ -553,13 +557,13 @@ export default {
         {
           arr: [
             {
-              title: "南岸区不动产登记综合窗口",
+              title: "3F 南岸区不动产登记综合窗口",
               num: "322",
               dept: "南岸区不动产登记中心",
               phone: "-",
             },
             {
-              title: "经开区项目帮代办综合窗口",
+              title: "3F 经开区项目帮代办综合窗口",
               num: "324",
               dept: "经开区行政服务中心",
               phone: "023-62519346",
@@ -569,7 +573,7 @@ export default {
         {
           arr: [
             {
-              title: "经开区税务综合窗口",
+              title: "3F 经开区税务综合窗口",
               num: "325",
               dept: "经开区税务局",
               phone: "023-62980241",
@@ -590,14 +594,47 @@ export default {
         //   dept: "区公安分局（印章备案）",
         //   phone: "023-62605096",
         // },
-        // {
-        //   title: "咨询台",
-        //   num: "-",
-        //   dept: "区政务办",
-        //   phone: "023-62606738",
-        // },
+      ],
+      listData1: [
+        {
+          arr: [
+            {
+              title: "营业执照咨询",
+              num: "1-16",
+              dept: "区市场监管局",
+              phone: "023-62606751",
+            },
+            {
+              title: "综合（税务）",
+              num: "17",
+              dept: "区税务局",
+              phone: "023-62606763",
+            },
+          ],
+        },
+        {
+          arr: [
+            {
+              title: "出入境",
+              num: "1-8",
+              dept: "区公安分局（出入境）",
+              phone: "023-62807722",
+            },
+            // {
+            //   title: "咨询台",
+            //   num: "-",
+            //   dept: "区政务办",
+            //   phone: "023-62606738",
+            // },
+          ],
+        },
       ],
       filterData: [],
+      isActive: 0,
+      tabs: [
+        "南岸区、 重庆经开区政务服务（茶园）中心",
+        " 南岸区政务服务（南坪）中心",
+      ],
     };
   },
   watch: {
@@ -611,9 +648,22 @@ export default {
       deep: true,
       immediate: true,
     },
+    isActive: {
+      handler(val) {
+        if (val === 0) {
+          this.filterData = this.listData;
+        } else {
+          this.filterData = this.listData1;
+        }
+      },
+      immediate: true,
+    },
   },
   methods: {
     getList() {},
+    handelChange(i) {
+      this.isActive = i;
+    },
     pageChange() {
       if (this.jumpPage) {
         this.queryParams.page = this.jumpPage;
@@ -963,7 +1013,7 @@ export default {
   height: 3.75rem;
   line-height: 3.75rem;
   background: rgba(40, 110, 188, 0.6);
-  font-size: 18px;
+  font-size: 30px;
   font-weight: 400;
   color: #ffffff;
   text-align: center;
@@ -1020,4 +1070,17 @@ export default {
 .phone-box ::-webkit-scrollbar {
   display: none;
 }
+.tabs-title {
+  height: 53px;
+  width: 570px;
+  background-size: 100% 100%;
+  position: relative;
+  cursor: pointer;
+}
+.active {
+  background-image: url("../assets/jkqzxzn1.png");
+}
+.isActive {
+  background-image: url("../assets/jkqzxzn.png");
+}
 </style>