修改窗口电话横向滚动

src/views/CenterItroduction.vue

@@ -170,74 +170,83 @@
                 南岸区、 重庆经开区政务服务（茶园）中心
               </p>
             </div>
-            <div style="height: 460px ">
+            <div style="height: 480px" class="phone-box">
               <div
                 style="
                   display: flex;
                   justify-content: space-between;
-                  flex-wrap: wrap;
                   margin-top: 21px;
+                  overflow-x: auto;
+                  height: 100%;
                 "
               >
                 <div
-                  style="
-                    width: 390px;
-                    height: 220px;
-                    background-image: url(images/phone-bg.png);
-                    background-size: 100% 100%;
-                    padding: 9px 9px 0 9px;
-                  "
-                  v-for="(item, index) in filterData"
+                  class="phone-item"
+                  v-for="(item, index) in listData"
                   :key="index"
                 >
-                  <p class="title">{{ item.title }}</p>
-                  <div style="display: flex; padding: 10px 0 0 25px">
-                    <ul
-                      style="
-                        font-size: 18px;
-                        font-family: Source Han Serif SC;
-                        font-weight: bold;
-                        color: #5c8fcb;
-                      "
-                    >
-                      <li style="margin-bottom: 21px; width: 90px">窗口号 :</li>
-                      <li style="margin-bottom: 21px; width: 90px">
-                        入驻部门 :
-                      </li>
-                      <li style="margin-bottom: 21px; width: 90px">
-                        咨询电话 :
-                      </li>
-                    </ul>
-                    <ul
-                      style="
-                        font-size: 18px;
-                        font-family: Source Han Serif SC;
-                        font-weight: 800;
-                        color: #b8d8ff;
-                        margin-left: 11px;
-                      "
-                    >
-                      <li style="margin-bottom: 21px">{{ item.num }}</li>
-                      <li
+                  <div
+                    style="
+                      width: 390px;
+                      height: 220px;
+                      background-image: url(images/phone-bg.png);
+                      background-size: 100% 100%;
+                      padding: 9px 9px 0 9px;
+                    "
+                    v-for="(o, i) in item.arr"
+                    :key="i"
+                  >
+                    <p class="title">{{ item.title }}</p>
+                    <div style="display: flex; padding: 10px 0 0 25px">
+                      <ul
                         style="
-                          margin-bottom: 21px;
-                          white-space: nowrap;
-                          overflow: hidden;
-                          text-overflow: ellipsis;
-                          width: 250px;
+                          font-size: 18px;
+                          font-family: Source Han Serif SC;
+                          font-weight: bold;
+                          color: #5c8fcb;
                         "
                       >
-                        {{ item.dept }}
-                      </li>
-                      <li style="margin-bottom: 21px">
-                        {{ item.phone }}
-                      </li>
-                    </ul>
+                        <li style="margin-bottom: 21px; width: 90px">
+                          窗口号 :
+                        </li>
+                        <li style="margin-bottom: 21px; width: 90px">
+                          入驻部门 :
+                        </li>
+                        <li style="margin-bottom: 21px; width: 90px">
+                          咨询电话 :
+                        </li>
+                      </ul>
+                      <ul
+                        style="
+                          font-size: 18px;
+                          font-family: Source Han Serif SC;
+                          font-weight: 800;
+                          color: #b8d8ff;
+                          margin-left: 11px;
+                        "
+                      >
+                        <li style="margin-bottom: 21px">{{ o.num }}</li>
+                        <li
+                          style="
+                            margin-bottom: 21px;
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            width: 250px;
+                          "
+                        >
+                          {{ o.dept }}
+                        </li>
+                        <li style="margin-bottom: 21px">
+                          {{ o.phone }}
+                        </li>
+                      </ul>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-            <div class="footer">
+            <!-- <div class="footer">
               <div class="page">
                 <div
                   style="
@@ -289,7 +298,7 @@
                   >确定</el-button
                 >
               </div>
-            </div>
+            </div> -->
           </div>
         </div>
       </div>
@@ -318,197 +327,263 @@ export default {
       jumpPage: null,
       listData: [
         {
-          title: "社保卡窗口",
-          num: "1、2、3、4",
-          dept: "区人力社保局",
-          phone: "023-62525236、023-62602939",
-        },
-        {
-          title: "咨询窗口",
-          num: "一楼咨询台",
-          dept: "区政务办",
-          phone: "023-62606771",
-        },
-        // {
-        //   title: "自助区",
-        //   num: "-",
-        //   dept: "警快办身份证自助机、自助照相一体机、驾驶人自助一体机、智能签注易、社保卡自助服务一体机、社保卡自助机、自助申领发票、智能签注易、港澳台自助签证机、不动产自助查询机、渝快办自助终端、住房公积金办理自助一体机",
-        //   phone: "-",
-        // },
-        {
-          title: "残联综合窗口",
-          num: "205",
-          dept: "区残联",
-          phone: "-",
-        },
-        {
-          title: "财政综合窗口",
-          num: "206",
-          dept: "区财政局",
-          phone: "023-62988007",
-        },
-        {
-          title: "无差别综合窗口",
-          num: "207、209",
-          dept: "区教委、区科技局、区经济信息委、区民政局、区司法局、区委统战部（侨办）、区商务委、区退役军人事务局、区应急局、区统计局、区民族宗教委、区烟草专卖局",
-          phone: "023-62980273",
-        },
-        {
-          title: "一件事一次办",
-          num: "208",
-          dept: "跨省通办、川渝通办、五省通办、新生儿登记一件事",
-          phone: "023-62980273",
-        },
-        {
-          title: "文旅综合窗口",
-          num: "210",
-          dept: "区文化旅游委",
-          phone: "023-62606250",
-        },
-        {
-          title: "档案综合窗口",
-          num: "211",
-          dept: "区档案局",
-          phone: "023-62980244",
+          arr: [
+            {
+              title: "咨询窗口",
+              num: "一楼咨询台",
+              dept: "区政务办",
+              phone: "023-62606771",
+            },
+            {
+              title: "社保卡窗口",
+              num: "1、2、3、4",
+              dept: "区人力社保局",
+              phone: "023-62525236、023-62602939",
+            },
+          ],
         },
         {
-          title: "卫健综合窗口",
-          num: "212-215",
-          dept: "区卫生健康委",
-          phone: "023-62980379",
+          arr: [
+            {
+              title: "出入境",
+              num: "1-8",
+              dept: "区公安分局（出入境）",
+              phone: "023-62807722",
+            },
+            {
+              title: "营业执照咨询",
+              num: "1-16",
+              dept: "区市场监管局",
+              phone: "023-62606751",
+            },
+          ],
         },
         {
-          title: "交通综合窗口",
-          num: "217-221",
-          dept: "区交通局（运管）",
-          phone: "023-62982072",
+          arr: [
+            {
+              title: "综合（税务）",
+              num: "17",
+              dept: "区税务局",
+              phone: "023-62606763",
+            },
+            {
+              title: "残联综合窗口",
+              num: "205",
+              dept: "区残联",
+              phone: "-",
+            },
+          ],
         },
         {
-          title: "公安综合窗口",
-          num: "224-235",
-          dept: "区公安分局",
-          phone: "023-62985279",
+          arr: [
+            {
+              title: "财政综合窗口",
+              num: "206",
+              dept: "区财政局",
+              phone: "023-62988007",
+            },
+            {
+              title: "无差别综合窗口",
+              num: "207、209",
+              dept: "区教委、区科技局、区经济信息委、区民政局、区司法局、区委统战部（侨办）、区商务委、区退役军人事务局、区应急局、区统计局、区民族宗教委、区烟草专卖局",
+              phone: "023-62980273",
+            },
+          ],
         },
         {
-          title: "经开区企业开办综合窗口",
-          num: "301-307",
-          dept: "经开区市场监管局",
-          phone: "023-62980204、023-62980207",
+          arr: [
+            {
+              title: "一件事一次办",
+              num: "208",
+              dept: "跨省通办、川渝通办、五省通办、新生儿登记一件事",
+              phone: "023-62980273",
+            },
+            {
+              title: "文旅综合窗口",
+              num: "210",
+              dept: "区文化旅游委",
+              phone: "023-62606250",
+            },
+          ],
         },
         {
-          title: "经开区立项用地规划综合窗口",
-          num: "308",
-          dept: "经开区改革发展科技局",
-          phone: "023-62980243",
+          arr: [
+            {
+              title: "档案综合窗口",
+              num: "211",
+              dept: "区档案局",
+              phone: "023-62980244",
+            },
+            {
+              title: "卫健综合窗口",
+              num: "212-215",
+              dept: "区卫生健康委",
+              phone: "023-62980379",
+            },
+          ],
         },
         {
-          title: "经开区南岸区工程建设许可（小型建设项目）",
-          num: "310",
-          dept: "区规划自然资源局",
-          phone: "023-62606752",
+          arr: [
+            {
+              title: "交通综合窗口",
+              num: "217-221",
+              dept: "区交通局（运管）",
+              phone: "023-62982072",
+            },
+            {
+              title: "公安综合窗口",
+              num: "224-235",
+              dept: "区公安分局",
+              phone: "023-62985279",
+            },
+          ],
         },
         {
-          title: "经开区施工许可 竣工验收 综合窗口",
-          num: "311",
-          dept: "经开区生态环境建管局",
-          phone: "023-62980249",
+          arr: [
+            {
+              title: "经开区企业开办综合窗口",
+              num: "301-307",
+              dept: "经开区市场监管局",
+              phone: "023-62980204、023-62980207",
+            },
+            {
+              title: "经开区立项用地规划综合窗口",
+              num: "308",
+              dept: "经开区改革发展科技局",
+              phone: "023-62980243",
+            },
+          ],
         },
         {
-          title: "南岸区施工许可 竣工验收 综合窗口 帮代办窗口",
-          num: "312",
-          dept: "区住房城乡建委",
-          phone: "023-62606780",
+          arr: [
+            {
+              title: "经开区南岸区工程建设许可（小型建设项目）",
+              num: "310",
+              dept: "区规划自然资源局",
+              phone: "023-62606752",
+            },
+            {
+              title: "经开区施工许可 竣工验收 综合窗口",
+              num: "311",
+              dept: "经开区生态环境建管局",
+              phone: "023-62980249",
+            },
+          ],
         },
         {
-          title: "经开市政综合窗口",
-          num: "313",
-          dept: "经开区建设服务中心",
-          phone: "023-62789342",
+          arr: [
+            {
+              title: "南岸区施工许可 竣工验收 综合窗口 帮代办窗口",
+              num: "312",
+              dept: "区住房城乡建委",
+              phone: "023-62606780",
+            },
+            {
+              title: "经开市政综合窗口",
+              num: "313",
+              dept: "经开区建设服务中心",
+              phone: "023-62789342",
+            },
+          ],
         },
         {
-          title: "交通建设综合窗口",
-          num: "314",
-          dept: "区交通局（公路）",
-          phone: "023-62392861",
+          arr: [
+            {
+              title: "交通建设综合窗口",
+              num: "314",
+              dept: "区交通局（公路）",
+              phone: "023-62392861",
+            },
+            {
+              title: "生态环境综合窗口",
+              num: "315",
+              dept: "区生态环境局",
+              phone: "023-62606735",
+            },
+          ],
         },
         {
-          title: "生态环境综合窗口",
-          num: "315",
-          dept: "区生态环境局",
-          phone: "023-62606735",
+          arr: [
+            {
+              title: "涉农事务综合窗口",
+              num: "316",
+              dept: "区农业农村委",
+              phone: "023-62606735",
+            },
+            {
+              title: "发改委综合窗口",
+              num: "317",
+              dept: "区发展改革委",
+              phone: "023-62606782",
+            },
+          ],
         },
         {
-          title: "涉农事务综合窗口",
-          num: "316",
-          dept: "区农业农村委",
-          phone: "023-62606735",
+          arr: [
+            {
+              title: "消防综合窗口",
+              num: "318",
+              dept: "区消防救援支队",
+              phone: "023-62606739",
+            },
+            {
+              title: "城市管理综合窗口",
+              num: "319-320",
+              dept: "区城市管理局",
+              phone: "023-62606760",
+            },
+          ],
         },
         {
-          title: "发改委综合窗口",
-          num: "317",
-          dept: "区发展改革委",
-          phone: "023-62606782",
+          arr: [
+            {
+              title: "市政公用服务（水电气讯）综合窗口",
+              num: "321",
+              dept: "-",
+              phone: "-",
+            },
+            {
+              title: "经开区办不成事反应窗口",
+              num: "322",
+              dept: "经开区行政服务中心",
+              phone: "023-62606905",
+            },
+          ],
         },
         {
-          title: "消防综合窗口",
-          num: "318",
-          dept: "区消防救援支队",
-          phone: "023-62606739",
+          arr: [
+            {
+              title: "南岸区不动产登记综合窗口",
+              num: "322",
+              dept: "南岸区不动产登记中心",
+              phone: "-",
+            },
+            {
+              title: "经开区项目帮代办综合窗口",
+              num: "324",
+              dept: "经开区行政服务中心",
+              phone: "023-62519346",
+            },
+          ],
         },
         {
-          title: "城市管理综合窗口",
-          num: "319-320",
-          dept: "区城市管理局",
-          phone: "023-62606760",
-        },
-        {
-          title: "市政公用服务（水电气讯）综合窗口",
-          num: "321",
-          dept: "-",
-          phone: "-",
-        },
-        {
-          title: "经开区办不成事反应窗口",
-          num: "322",
-          dept: "经开区行政服务中心",
-          phone: "023-62606905",
-        },
-        {
-          title: "经开区项目帮代办综合窗口",
-          num: "324",
-          dept: "经开区行政服务中心",
-          phone: "023-62519346",
-        },
-        {
-          title: "经开区税务综合窗口",
-          num: "325",
-          dept: "经开区税务局",
-          phone: "023-62980241",
-        },
-        {
-          title: "南岸区不动产登记综合窗口",
-          num: "322",
-          dept: "南岸区不动产登记中心",
-          phone: "-",
-        },
-        {
-          title: "营业执照咨询",
-          num: "1-16",
-          dept: "区市场监管局",
-          phone: "023-62606751",
-        },
-        {
-          title: "综合（税务）",
-          num: "17",
-          dept: "区税务局",
-          phone: "023-62606763",
-        },
-        {
-          title: "出入境",
-          num: "1-8",
-          dept: "区公安分局（出入境）",
-          phone: "023-62807722",
+          arr: [
+            {
+              title: "经开区税务综合窗口",
+              num: "325",
+              dept: "经开区税务局",
+              phone: "023-62980241",
+            },
+          ],
         },
+
+        // {
+        //   title: "自助区",
+        //   num: "-",
+        //   dept: "警快办身份证自助机、自助照相一体机、驾驶人自助一体机、智能签注易、社保卡自助服务一体机、社保卡自助机、自助申领发票、智能签注易、港澳台自助签证机、不动产自助查询机、渝快办自助终端、住房公积金办理自助一体机",
+        //   phone: "-",
+        // },
+
         // {
         //   title: "-",
         //   num: "（为后台无窗口）",
@@ -942,4 +1017,7 @@ export default {
   align-items: center;
   font-size: 14px;
 }
+.phone-box ::-webkit-scrollbar {
+  display: none;
+}
 </style>

src/views/WindowLayout.vue

@@ -112,9 +112,9 @@ export default {
 
 .type-ckbj .content-content {
   position: relative;
-  /* background: rgb(0, 0, 0, 0.4);
-   */
-  background: url("../../public/images/kuang.png");
+  background: rgb(0, 0, 0, 0.4);
+
+  /* background: url("../../public/images/kuang.png"); */
   background-size: 100% 100%;
 }