CQ_JD
/
nazw


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name=”SiteName” content=”重庆市南岸区人民政府”>
    <meta name="SiteDomain" content="http://www.cqna.gov.cn" />
    <meta name="SiteIDCode" content="5001080014">
    <meta name="ColumnName" content="政务全景通">
    <meta name="ColumnDescription" content="政务全景通" />
    <meta name="ColumnKeywords" content="政务全景通" />
    <meta name="ColumnType" content="政务全景通" />
    <title>政务全景通-重庆市南岸区人民政府网</title>
    <!-- jquery-->
    <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/jquery-3.5.1.min.js"></script>
    <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/urljson.js"></script>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    ul {
        list-style-type: none;
    }

    li {
        list-style: none;
    }

    .container {
        position: relative;
        background-image: url(https://www.cqna.gov.cn/syygapi/naxsb/images/indexbgfloor.png);
        background-size: 100% 100%;
        width: 100vw;
        font-size: 13px;
    }

    .floorTabs {
        display: flex;
    }

    .floorTabs .list {
        width: 25vw;
        height: 10vw;
        line-height: 10vw;
        text-align: center;
        background: #286EBC;
        margin-bottom: 20px;
        font-size: 14px;
        color: #FFFFFF;
        cursor: pointer;
        border-right: 1px solid;
    }

    .floorTabs .active {
        background: #CD9D64;
    }

    .bottomBtn {
        display: flex;
        justify-content: center;
    }

    .bottomBtn .btn {
        width: 28vw;
        height: 8vw;
        line-height: 8vw;
        background: #7DB0EE;
        font-weight: bold;
        font-size: 13px;
        color: #F4F4F4;
        text-align: center;
        cursor: pointer;
    }

    .bottomBtn .active {
        background: #0D74F2;
    }

    .zxfw {
        padding-left: 10px;
    }

    .zxfw .buttonList {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .zxfw .button {
        width: 30vw;
        height: 12vw;
        background-image: url(images/button-zxfw.png);
        background-size: 100% 100%;
        text-align: center;
        line-height: 10vw;
        box-sizing: border-box;
        letter-spacing: 3px;
        margin-bottom: 15px;
        margin-right: 1.5vw;
        cursor: pointer;
        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 14px;
        color: #F4F4F4;
    }

    .moxing {
        margin-top: 10px;
    }

    .moxing .imgDiv {
        position: relative;
        width: 379px;
        height: 176px;
        margin: auto;
        margin-bottom: 48px;
    }

    .moxing .namebtn {
        padding: 0 5px;
        font-size: 12px;
        color: #fff;
        text-shadow: 3px 1px 2px rgb(15 70 106);
        position: absolute;
        height: 24px;
        line-height: 24px;
        background: #B8D5F1;
        border-radius: 4px;
    }

    .moxing .namebtn.active {
        background: #4B98F6;
        text-shadow: none;
    }

    .moxing .namebtnl {
        padding: 0;
        border-radius: 6px;
        line-height: 10px;
        font-size: 10px;
        color: #402424;
        background: #FFF;
        text-shadow: 3px 1px 2px rgba(236, 239, 241, 0.8);
        position: absolute;
    }

    .detailDiv {
        width: 96%;
        height: 91vw;
        background-image: url(images/floorbg.png);
        background-size: 100% 100%;
        font-family: "Source Han Sans SC";
        color: #2895FF;
        padding: 20px;
        box-sizing: border-box;
        margin: auto;
        margin-top: 15px;
        position: relative;
    }

    .detailDiv>div {
        width: 100%;
        height: 100%;
    }

    .detailDiv .top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }

    .detailDiv .right {
        color: #65A9CE;
        display: flex;
        margin-top: 3px;

    }

    .detailDiv .right>span {
        white-space: nowrap;
    }

    .detailDiv .el-tabs {}

    .detailDiv .el-tabs__item {
        font-size: 15px;
        color: #2895FF;
        height: 36px;
    }

    .detailDiv .el-tabs__item.is-active {
        font-weight: bold;
        color: #2895FF;
        border-bottom: 5px solid #2895FF;
    }

    .detailDiv .el-tabs__nav-wrap::after {
        background-color: rgb(40 149 255 / 30%);
    }

    .detailDiv .el-tabs__active-bar {
        display: none;
    }

    .search {
        width: 40vw;
        height: 22px !important;
        display: flex;
        position: absolute;
        right: 20px;
        top: 64px;
        z-index: 999;
    }

    .search input {
        width: calc(100% - 49px);
        overflow: unset;
        background: #A6D2EC;
        border: 0;
        padding: 0;
        outline: none;
        height: 22px;
        padding-left: 10px;
        color: #2895FF;
    }

    .search input::placeholder {
        color: #E7F7FF;
    }

    .search .btn {
        width: 49px;
        height: 22px;
        background: #2895FF;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sxqd li span {
        line-height: 25px;
        border-bottom: 1px solid #2895FF;
        padding-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: block;
        font-size: 13px;
    }

    .el-pagination {
        text-align: center;
        margin-top: 5px;
    }

    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .el-pager li {
        background-color: #A6D2EC !important;
        color: #fff !important;
        height: 21px !important;
        line-height: 21px !important;
        width: 21px !important;
    }

    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #2895FF !important;
    }

    .el-tab-pane {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .el-pager li {
        width: 21px !important;
        height: 21px !important;
        line-height: 21px !important;
    }

    .vrdiv {
        width: 15px;
        height: 15px;
        position: absolute;
        cursor: pointer;
        background-image: url(https://www.cqna.gov.cn/syygapi/naxsb/images/logo-vr.png);
        background-size: 100% 100%;
    }

    .btable {
        background-color: #fff;
        box-sizing: border-box;
        overflow: scroll;
    }

    .global-dialog .el-dialog__body {
        max-height: calc(100vh - 60px);
        overflow: auto;
        padding: 0 5px !important;
        padding-bottom: 10px !important;
    }

    .global-dialog .el-dialog {
        margin-top: 35px !important;
    }

    .btable table {
        margin-top: 5px;
        border: 1px solid #64A8F6;
    }

    .btable tr td {
        border: 1px solid #64A8F6;
        padding: 5px;
    }

    .btable tr td:nth-child(2n) {
        width: 25%;
    }

    .btable tr td:first-child {
        width: 10%;
    }

    .btable tr td:nth-child(4n) {
        width: 30%;
    }

    .btable tr td.tit {
        font-size: 12px;
        color: #64A8F6;
    }

    .lines {
        position: absolute;
        height: 150px;
        transition: top 0.3s;
        width: 0;
        border: 1px dashed #1A95EB;
        z-index: 111;
    }

    .lineh {
        position: absolute;
        height: 0;
        transition: top 0.3s;
        width: 100px;
        border: 1px dashed #1A95EB;
        z-index: 111;
    }

    .redio {
        width: 7px;
        height: 7px;
        background: #2896FF;
        border-radius: 50%;
        position: absolute;
        z-index: 111;
    }

    /* 楼层指引 start */
    .floorGuide {
        width: 100vw;
        position: relative;
        top: 0;
        left: 0;
    }

    .floorGuide .floorGuideBg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .floorGuide .floorGuideTit {
        width: 100%;
        height: 30px;
        font-weight: bold;
        font-size: 14px;
        color: #004A93;
        display: flex;
        align-items: center;
        position: relative;
        top: 0;
        left: 0;
        z-index: 120;
    }

    .floorGuideTit .floorGuideIcon {
        width: 8px;
        height: 14px;
        margin: 0 13px 0 26px;
    }

    .floorGuideTit span {
        line-height: 30px;
    }

    .floorGuide .floorGuideTable {
        width: calc(100% - 20px);
        padding: 0 20px;
        height: calc(100vh - 830px);
        overflow-y: auto;
    }

    .floorGuideTable .floorGuide-row .el-col {
        margin-bottom: 10px;
        display: flex;
        justify-content: start;
    }

    .floorGuideTable .floorNum-col,
    .floorGuideTable .floorName-col {
        line-height: 20px;
        display: inline-block;
        border-bottom: 1px solid #3D86CE;
    }

    .floorGuideTable .floorName-col {
        font-weight: 400;
        font-size: 14px;
        color: #004A93;
        width: calc(100% - 60px);
    }

    .floorGuideTable .floorNum-col {
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        width: 40px;
        height: 20px;
        position: relative;
        top: 0;
        left: 0;
    }

    .floorNum-col img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .floorNum-col span {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-flex;
        height: 100%;
        align-items: center;
        margin: 0 0 0 7px;
    }

    .activeGuide {
        background-color: #25A8AA !important;
    }

    /* 楼层指引 end */
</style>

<body>
    <div style="width:100%;" class="header"></div>
    <div class="container hide" id="app" style="">
        <div class="floorTabs">
            <div class="list" :class="{ active: currentFloor == tab.id&&!floorGuideShow }"
                v-for="(tab,index) in floorList" :key="index" @click="floorChange(tab.id)">
                {{tab.name}}
            </div>
            <div class="list" @click="backsw">返回室外</div>
            <div class="list" :class="{ activeGuide: floorGuideShow }" @click="floorGuideShow=!floorGuideShow">楼层指引
            </div>
        </div>
        <div class="bottomBtn" v-show="!floorGuideShow">
            <div class="btn active" id="threed" @click="showthreed">3D</div>
            <div class="btn" id="vrdiv" @click="showvrdiv">VR</div>
        </div>
        <div class="floorGuide" v-show="floorGuideShow">
            <img class="floorGuideBg" src="images/floor-floorGuide-bg.png" alt="" srcset="">
            <div class="floorGuideTit">
                <img class="floorGuideIcon" src="images/floor-floorGuide-icon.png" alt="" srcset="">
                <span>2号楼楼层指引</span>
            </div>
            <div class="floorGuideTable">
                <el-row :gutter="20" class="floorGuide-row">
                    <el-col :span="24" v-for="item in floorGuideList" :key="item.floorNum">
                        <span class="floorNum-col">
                            <img src="images/floor-floorGuide-numBg.png" alt="" srcset="">
                            <span>{{item.floorNum}}</span>
                        </span>
                        <span class="floorName-col">{{item.name}}</span>

                        <!-- <span class="floorName-col" v-if="item.name.length<=12">{{item.name}}</span>
                        <span class="floorName-col" :title="item.name" v-else>{{item.name.substring(0,11)}}...</span> -->
                    </el-col>
                </el-row>
            </div>
        </div>
        <el-dialog title="窗口电话" class="global-dialog" :visible.sync="dialogVisible" width="98%"
            :before-close="handleClose" :close-on-click-modal="false">
            <div class="btable">
                <table border="0" cellspacing="0" style="width: 100%;">
                    <tbody>
                        <tr>
                            <td class="tit">楼层</td>
                            <td class="tit">窗口名称</td>
                            <td class="tit">窗口号</td>
                            <td class="tit">对外咨询窗口电话</td>
                        </tr>
                        <tr>
                            <td class="tit" rowspan="2">一楼</td>
                            <td>社保卡窗口</td>
                            <td>1、2、3、4</td>
                            <td>023-62525236<br />023-62602939</td>
                        </tr>
                        <tr>
                            <td>咨询窗口</td>
                            <td>一楼咨询台</td>
                            <td>023-62606771</td>
                        </tr>
                        <tr>
                            <td class="tit" rowspan="8">二楼</td>
                            <td>财政综合窗口</td>
                            <td>206</td>
                            <td>023-62988007</td>
                        </tr>
                        <tr>
                            <td>无差别综合窗口</td>
                            <td>207、209</td>
                            <td>023-62980273</td>
                        </tr>
                        <tr>
                            <td>一件事一次办</td>
                            <td>208</td>
                            <td>023-62980273</td>
                        </tr>
                        <tr>
                            <td>文旅综合窗口</td>
                            <td>210</td>
                            <td>023-62606250</td>
                        </tr>
                        <tr>
                            <td>档案综合窗口</td>
                            <td>211</td>
                            <td>023-62980244</td>
                        </tr>
                        <tr>
                            <td>卫健综合窗口</td>
                            <td>212-215</td>
                            <td>023-62980379</td>
                        </tr>
                        <tr>
                            <td>交通综合窗口</td>
                            <td>217-221</td>
                            <td>023-62982072</td>
                        </tr>
                        <tr>
                            <td>公安综合窗口</td>
                            <td>224-235</td>
                            <td>023-62985279</td>
                        </tr>
                        <tr>
                            <td class="tit" rowspan="17">三楼</td>
                            <td>经开区企业开办综合窗口</td>
                            <td>301-307</td>
                            <td>023-62980204<br />023-62980207</td>
                        </tr>
                        <tr>
                            <td>经开区立项用地规划综合窗口</td>
                            <td>308</td>
                            <td>023-62980243</td>
                        </tr>
                        <tr>
                            <td>经开区南岸区工程建设许可（小型建设项目）</td>
                            <td>310</td>
                            <td>023-62606752</td>
                        </tr>
                        <tr>
                            <td>经开区施工许可 竣工验收 综合窗口</td>
                            <td>311</td>
                            <td>023-62980249</td>
                        </tr>
                        <tr>
                            <td>南岸区施工许可 竣工验收 综合窗口 帮代办窗口</td>
                            <td>312</td>
                            <td>023-62606780</td>
                        </tr>
                        <tr>
                            <td>经开市政综合窗口</td>
                            <td>313</td>
                            <td>023-62789342</td>
                        </tr>
                        <tr>
                            <td>交通建设综合窗口</td>
                            <td>314</td>
                            <td>023-62392861</td>
                        </tr>
                        <tr>
                            <td>生态环境综合窗口</td>
                            <td>315</td>
                            <td>023-62606735</td>
                        </tr>
                        <tr>
                            <td>涉农事务综合窗口</td>
                            <td>316</td>
                            <td>023-62606735</td>
                        </tr>
                        <tr>
                            <td>发改委综合窗口</td>
                            <td>317</td>
                            <td>023-62606782</td>
                        </tr>
                        <tr>
                            <td>消防综合窗口</td>
                            <td>318</td>
                            <td>023-62606739</td>
                        </tr>
                        <tr>
                            <td>城市管理综合窗口</td>
                            <td>319-320</td>
                            <td>023-62606760</td>
                        </tr>
                        <tr>
                            <td>经开区办不成事反应窗口</td>
                            <td>322</td>
                            <td>023-62606905</td>
                        </tr>
                        <tr>
                            <td>经开区项目帮代办综合窗口</td>
                            <td>324</td>
                            <td>023-62519346</td>
                        </tr>
                        <tr>
                            <td>经开区税务综合窗口</td>
                            <td>325</td>
                            <td>023-62980241</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </el-dialog>
        <div class="moxing" v-show="currentFloor == 1&&!floorGuideShow">
            <div class="imgDiv">
                <div class="redio floor1" style="left: 150px;bottom: 53px;"></div>
                <div class="redio floor1" style="left: 143px;bottom: 36px;"></div>
                <div class="redio floor1" style="left: 189px;bottom: 42px;"></div>
                <div class="redio floor1" style="right: 88px;top: 42px;"></div>
                <div class="lines floor1" style="left: 48px;bottom: -12px;height: 67px;"></div>
                <div class="lineh floor1" style="left: 48px;bottom: 56px;"></div>
                <div class="lines floor1" style="left: 145px;bottom: -13px;height: 44px;"></div>
                <div class="lines floor1" style="left: 191px;bottom: 4px;height: 35px;"></div>
                <div class="lines floor1" style="right: 138px;bottom: -13px;height: 15px;"></div>
                <div class="lineh floor1" style="right: 141px;bottom: 3px;width: 41px;"></div>
                <div class="lines floor1" style="right: 91px;bottom: 6px;height: 117px;"></div>
                <div class="lines floor1" style="right: 38px;bottom: -13px;height: 15px;"></div>
                <div class="lineh floor1" style="right: 41px;bottom: 3px;width:50px;"></div>
                <img src="images/floordetail1.png" alt="" style="margin: auto;width: 375px;">
                <img src="images/floorArowRigt.png" alt="" style="position:absolute; left:23px;bottom: 37px;">
                <img src="images/floorArowTop.png" alt="" style="position:absolute; right: 112px;top: 10px;">
                <div class="vrdiv" style="left: 85px;bottom: 42px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=1')"></div>
                <div class="vrdiv" style="left: 141px;bottom: 55px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=2')">
                </div>
                <div class="vrdiv" style="left: 136px;bottom: 32px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=3')">
                </div>
                <div class="vrdiv" style="left: 190px;bottom: 72px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=4')"></div>
                <div class="vrdiv" style="right: 122px;bottom: 52px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=5')"></div>
                <div class="vrdiv" style="right: 105px;top: 25px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=6')"></div>
                <div class="vrdiv" style="right: 141px;top: 48px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=7')"></div>
                <div class="namebtnl threed" style="left: 80px;bottom: 43px;">咨询台</div>
                <div class="namebtnl threed" style="right: 100px;bottom: 44px;">免费婚检室</div>
                <div class="namebtnl threed" style="right: 112px;bottom: 103px;">颁证厅</div>
                <div class="namebtnl threed" style="right: 49px;bottom: 99px;display: flex;flex-direction: column;">
                    <span>婚姻家</span><span>庭辅导室</span>
                </div>
                <div class="namebtn threed" style="left: 5px;bottom: -38px;" data-popupType="2" data-id="12">
                    政务公开专区
                </div>
                <div class="namebtn threed" style="left: 97px;bottom: -38px;" data-popupType="2" data-id="3">24h自助服务区
                </div>
                <div class="namebtn threed" style="right: 17px;bottom: -38px;" data-popupType="2" data-id="2">社保卡办理区
                </div>
                <div class="namebtn threed" style="right: 109px;bottom: -38px;" data-popupType="2" data-id="1">婚姻登记处
                </div>
            </div>
            <div style="font-size: 14px;color: #004A93;text-align: center;">2号楼一楼婚姻登记处社保卡办理</div>
            <div style="font-size: 13px;color: #547596;text-align: center;">（您可以点击图中的按钮查看详情）</div>
        </div>
        <div class="moxing" v-show="currentFloor == 2&&!floorGuideShow">
            <div class="imgDiv">
                <div class="redio floor1" style="right: 92px;top: 34px;"></div>
                <div class="redio floor1" style="right: 172px;top: 57px;"></div>
                <div class="lines floor1" style="right: 95px;bottom: -13px;height: 146px;"></div>
                <div class="lineh floor1" style="left: 49px;bottom: 59px;width:150px;"></div>
                <div class="lines floor1" style="left: 48px;bottom: -13px;height: 69px;"></div>
                <div class="lines floor1" style="left: 202px;bottom: 60px;height: 48px;"></div>
                <img src="images/floordetail2.png" alt="" style="margin: auto;">
                <div class="vrdiv" style="left: 176px;bottom: 65px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=9')"></div>
                <div class="vrdiv" style="left: 153px;bottom: 48px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=8')"></div>
                <div class="vrdiv" style="right: 123px;bottom: 76px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=10')"></div>
                <div class="vrdiv" style="right: 142px;top: 54px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=11')"></div>
                <div class="vrdiv" style="right: 123px;top: 15px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=12')"></div>
                <div class="vrdiv" style="right: 95px;top: 48px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=13')"></div>
                <div class="namebtnl threed" style="left: 221px;bottom: 87px;">自助服务区</div>
                <div class="namebtnl threed" style="right: 186px;bottom: 40px;">自助服务区</div>
                <div class="namebtnl threed" style="right: 84px;top: 3px;">母婴室</div>
                <div class="namebtn threed" style="left: 5px;bottom:  -38px;" data-popupType="2" data-id="4">公安综合办理区
                </div>
                <div class="namebtn threed" style="right: 45px;bottom:  -38px;" data-popupType="2" data-id="5">无差别综合办理区
                </div>
            </div>
            <div style="font-size: 14px;color: #004A93;text-align: center;">2号楼二楼无差别、区公安办理区</div>
            <div style="font-size: 13px;color: #547596;text-align: center;">（您可以点击图中的按钮查看详情）</div>
        </div>
        <div class="moxing" v-show="currentFloor == 3&&!floorGuideShow">
            <div class="imgDiv" style="display: flex;">
                <div class="redio floor1" style="right: 94px;top: 35px;"></div>
                <div class="redio floor1" style="right: 93px;top: 72px;"></div>
                <div class="redio floor1" style="right: 154px;top: 50px;"></div>
                <div class="lines floor1" style="right: 72px;bottom: -13px;height: 149px;"></div>
                <div class="lineh floor1" style="right: 76px;top: 38px;width: 17px;"></div>
                <div class="lines floor1" style="right: 191px;bottom: -13px;height: 111px;"></div>
                <div class="lineh floor1" style="right: 102px;top: 75px;width:85px;"></div>
                <div class="lines floor1" style="left: 65px;bottom: -13px;height: 133px;"></div>
                <div class="lineh floor1" style="left: 68px;top: 53px;width:146px;"></div>
                <img src="images/floordetail3.png" alt="" style="margin: auto;">
                <div class="vrdiv" style="right:159px;top: 15px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=14')"></div>
                <div class="vrdiv" style="right:141px;top: 38px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=15')"></div>
                <div class="vrdiv" style="right: 131px;top: 77px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=16')"></div>
                <div class="namebtnl threed"
                    style="left: 10px;bottom: 16px;display: flex;flex-direction: column;align-items: center;">
                    <span>314工程建设项目</span><span>审批会议室</span>
                </div>
                <!-- <div class="namebtnl threed" style="right: 95px;top: 60px;">政务公开专区</div> -->
                <div class="namebtnl threed" style="right: 104px;top: 32px;">自助服务区</div>
                <div class="namebtn threed" style="left: 135px;bottom: -38px;padding: 0 2px;" data-popupType="2"
                    data-id="8">工程建设领域办理区
                </div>
                <div class="namebtn threed" style="left: 5px;bottom: -38px;padding: 0 2px;" data-popupType="2"
                    data-id="6">经开区企业开办办理区
                </div>
                <div class="namebtn threed" style="right: 20px;bottom: -38px;padding: 0 2px;" data-popupType="2"
                    data-id="7">不动产登记办理区
                </div>
            </div>
            <div style="font-size: 14px;color: #004A93;text-align: center;">2号楼三楼婚姻登记处社保卡办理</div>
            <div style="font-size: 13px;color: #547596;text-align: center;">（您可以点击图中的按钮查看详情）</div>
        </div>
        <div class="detailDiv" style="display: none;" style="position: relative;">
            <div v-show="popupType == '1'">
                <div class="top">
                    <div style="font-weight: bold;font-size: 14px;">{{btnName}}您可以办理：</div>
                    <div class="right" style="font-size: 11px;">
                        <span>工作时间：</span>
                        <span>法定工作日 9:00-12:00 14:00-17:30</span>
                    </div>
                </div>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="申请接受区" name="second">
                        <ul class="sxqd" style="overflow-y: scroll;">
                            <li><span
                                    @click="goToLink('https://www.cqna.gov.cn/zwgk_254/ysqgk/202411/t20241101_13763538.html')">依申请公开流程图</span>
                            </li>
                            <li><span
                                    @click="goToLink('https://www.cqna.gov.cn/zwgk_254/zfxxgkzn/qzfgkzn/202402/t20240202_12897323.html')">政府信息公开申请表</span>
                            </li>
                            <li><span
                                    @click="goToLink('https://www.cqna.gov.cn/zwgk_254/zfxxgkzn/qzfgkzn/202402/t20240202_12897323.html')">政府信息公开指南</span>
                            </li>
                        </ul>
                    </el-tab-pane>
                    <el-tab-pane label="政策咨询区" name="third">
                        <ul class="sxqd" style="overflow-y: scroll;">
                            <li><span @click="goToLink('https://www.cqna.gov.cn/ghwd/znwd/index.html')">在线政策咨询</span>
                            </li>
                            <li><span @click="goToLink('https://www.cqna.gov.cn/zczs/')">政策通</span></li>
                        </ul>
                    </el-tab-pane>
                    <el-tab-pane label="资料阅览区" name="fourth">
                        <ul class="sxqd" style="overflow-y: scroll;">
                            <li v-for="(item,index) in zlylqList">
                                <span @click="goToLink(item.addr)" v-if="item.addr"
                                    :title="item.mattersName">{{item.mattersName}}</span>
                            </li>
                        </ul>
                    </el-tab-pane>
                    <el-tab-pane label="自助查询区" name="fifth">
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div v-show="popupType == '2'">
                <div class="search" v-if="btnName=='24h自助服务区'" style="top: 48px;"><input type="text"
                        placeholder="请输入关键字" v-model="inputValue">
                    <div class="btn" @click="searchData(1)"><img src="images/flsearch.png" alt=""></div>
                </div>
                <div class="search" v-else><input type="text" placeholder="请输入关键字" v-model="inputValue">
                    <div class="btn" @click="searchData(1)"><img src="images/flsearch.png" alt=""></div>
                </div>
                <div class="top">
                    <div style="font-weight: bold;font-size: 14px;white-space: nowrap;">{{btnName}}您可以办理：</div>
                    <div class="right" style="font-size: 11px;" v-show="btnName!=='24h自助服务区'">
                        <span>工作时间：</span>
                        <span>法定工作日 9:00-12:00 14:00-17:30</span>
                    </div>
                </div>
                <el-tabs v-model="activeNametwo">
                    <el-tab-pane label="事项清单" name="sxqd">
                        <ul class="sxqd">
                            <div class="zwsj" v-if="!this.sxqdList||!this.sxqdList.length">暂无数据</div>
                            <li v-for="(item,index) in sxqdList">
                                <span @click="goToLink(item.addr)" v-if="item.addr">{{item.mattersName}}</span>
                                <span @click="goToLink('https://zwykb.cq.gov.cn/qxzz/naq/bszn/?rowGuid='+item.url)"
                                    v-else-if="item.url">{{item.mattersName}}</span>
                                <span v-else>{{item.mattersName}}</span>
                            </li>
                        </ul>
                        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                            :page-size="7" layout="prev, pager, next" :total="total" class="popuppage">
                        </el-pagination>

                    </el-tab-pane>
                    <el-tab-pane label="入驻部门" name="rzbm">
                        <div class="zwsj" v-if="!this.rzbmList||!this.rzbmList.length">暂无数据</div>
                        <ul class="sxqd" style="overflow-y: scroll;">
                            <li v-for="(item,index) in rzbmList">
                                <span>{{item.deptName}}</span>
                            </li>
                        </ul>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div v-show="popupType == '6'">
                <div class="top">
                    <div style="font-weight: bold;font-size: 14px;">{{btnName}}您可以办理：</div>
                    <div class="right" style="font-size: 11px;">
                        <span>工作时间：</span>
                        <span>法定工作日 9:00-12:00 14:00-17:30</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="zxfw">
            <div style="color: #004A93;margin: 15px 0;font-weight: bold;">特色服务</div>
            <div class="buttonList">
                <div class="button" @click="goToLink('wyyyMobile.html')">延时办</div>
                <div class="button" @click="goToLink('wybdbMobile.html')">帮代办</div>
                <div class="button" @click="goToLink('https://www.cqna.gov.cn/ykb_254/')">主题服务</div>
                <div class="button" @click="goToLink('https://www.cqna.gov.cn/zwgk_254/zfxxgkml/msjxjsbmp/index.html')">
                    免申即享</div>
                <!-- <div class="button" @click="goToLink('https://www.cqna.gov.cn/ghwd/znwd/index.html')">智能问答</div> -->
                <div class="button" @click="goToLink('https://www.cqna.gov.cn/syygapi/naxsb/zwfwtyy.html')">体验员招募</div>
                <div class="button" @click="dialogVisible=true">窗口电话</div>
            </div>
        </div>
    </div>
    <div style="width:100%;" class="footer"></div>
</body>
<script>
    $(function () {

        $(".header").load('https://www.cqna.gov.cn/syygapi/naxsb/top/top_style.html');
        $(".footer").load('https://www.cqna.gov.cn/syygapi/naxsb/footer/footer.html');
    });
</script>
<!-- 引入 Vue -->
<script src="https://www.cqna.gov.cn/syygapi/naxsb/js/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://www.cqna.gov.cn/syygapi/naxsb/css/index.css">
<!-- 引入组件库 -->
<script src="https://www.cqna.gov.cn/syygapi/naxsb/js/index.js"></script>
<script>
    var nowDiv = new Vue({
        el: "#app",
        data: function () {
            return {
                activeName: 'second',
                activeNametwo: 'rzbm',
                popupShow: false,
                btnName: '',
                currentFloor: 1,
                popupType: "other",
                currentPage: 1,
                total: 0,
                btnid: 1,
                dialogVisible: false,
                inputValue: '',
                floorList: [
                    {
                        id: 1,
                        name: "一楼"
                    },
                    {
                        id: 2,
                        name: "二楼"
                    },
                    {
                        id: 3,
                        name: "三楼"
                    },
                ],
                rzbmList: [],
                zlylqList: [{
                    id: 1,
                    mattersName: '《2024国务院公报》',
                    addr: 'https://www.gov.cn/gongbao/2024/issue_11606/'
                }, {
                    id: 7,
                    mattersName: '《2024重庆市人民政府公报》',
                    addr: 'https://www.cq.gov.cn/zwgk/zfxxgkml/zfgb/2024/'
                }, {
                    id: 8,
                    mattersName: '《2023重庆市南岸区人民政府工作报告》',
                    addr: 'https://www.cqna.gov.cn/zwgk_254/zfxxgkml/zfgzbg/index.html'
                },
                {
                    id: 2,
                    mattersName: '《政务公开重点领域的标准目录》',
                    addr: 'https://www.cqna.gov.cn/zwgk_254/zfxxgkzn/'
                },
                {
                    id: 3,
                    mattersName: '《惠农惠民补贴资金发放汇总、公示材料、政策清单》',
                    addr: 'https://www.cqna.gov.cn/bm/qczj/zwgk_59968/zfxxgkml/hmhnzj/btzcqd/202410/t20241028_13746703.html'
                },
                {
                    id: 4,
                    mattersName: '《2024本（镇）街道政府信息公开指南》',
                    addr: 'https://www.cqna.gov.cn/zwgk_254/jczwgk/'
                },
                {
                    id: 5,
                    mattersName: '《2023本（镇）街道政府信息公开年报》',
                    addr: 'https://www.cqna.gov.cn/zwgk_254/zfxxgknb/'
                },
                {
                    id: 6,
                    mattersName: '《20.21.22.23年行政规范性文件汇编》',
                    addr: 'https://www.cqna.gov.cn/zwgk_254/zfxxgkml/zcwj/xzgfxwjk/'
                },
                {
                    id: 9,
                    mattersName: '《2019版政府信息公开条例》',
                    addr: 'https://flk.npc.gov.cn/detail2.html?ZmY4MDgwODE2ZjNlOThiZDAxNmY0MWYyODYyZTAyMTE'
                }
                ],
                sxqdList: [
                    {
                        id: 1,
                        title: "残疾人证新办",
                        url: ""
                    },
                    {
                        id: 1,
                        title: "残疾人证换领",
                        url: ""
                    },
                    {
                        id: 1,
                        title: "残疾人证迁移",
                        url: ""
                    },
                    {
                        id: 1,
                        title: "残疾人证挂失补办",
                        url: ""
                    },
                    {
                        id: 1,
                        title: "残疾人证注销",
                        url: ""
                    },
                    {
                        id: 1,
                        title: "残疾类别/等级变更",
                        url: ""
                    }
                ],
                /* 楼层指引 start */
                floorGuideShow: false,//楼层指引显示控制
                floorGuideList: [
                    {
                        floorNum: '-1F',
                        name: '地下车库'
                    },
                    {
                        floorNum: '-2F',
                        name: '地下车库'
                    },
                    {
                        floorNum: '1F',
                        name: '区政务服务大厅'
                    },
                    {
                        floorNum: '2F',
                        name: '区政务服务大厅'
                    },
                    {
                        floorNum: '3F',
                        name: '南岸区经开区政务大厅'
                    },
                    {
                        floorNum: '4F',
                        name: '区公共资源交易中心'
                    },

                    {
                        floorNum: '5F',
                        name: '南岸区经开区行政服务中心'
                    },
                    {
                        floorNum: '6F',
                        name: '区民政局'
                    },
                    {
                        floorNum: '7F',
                        name: '区民政局'
                    },

                    {
                        floorNum: '8F',
                        name: '区科技局、区民政局'
                    },
                    {
                        floorNum: '9F',
                        name: '区文化旅游委、区工商联（区总商户）'
                    },
                    {
                        floorNum: '10F',
                        name: '区文化旅游委'
                    },
                    {
                        floorNum: '11F',
                        name: '区商务委'
                    },
                    {
                        floorNum: '12F',
                        name: '区商务委、区违整办'
                    },
                    {
                        floorNum: '13F',
                        name: '区交通运输委'
                    },
                    {
                        floorNum: '14F',
                        name: '区道路运输事务中心'
                    },
                    {
                        floorNum: '15F',
                        name: '区生态环境局'
                    },
                    {
                        floorNum: '16F',
                        name: '区生态环境局'
                    },
                    {
                        floorNum: '17F',
                        name: '区城管局、区生态环境局'
                    },
                    {
                        floorNum: '18F',
                        name: '区城管局'
                    },
                    {
                        floorNum: '19F',
                        name: '区城管局'
                    },
                    {
                        floorNum: '20F',
                        name: '区供销社'
                    },
                    {
                        floorNum: '21F',
                        name: '重庆市南岸区隧道轨道交通建设服务中心'
                    },
                    {
                        floorNum: '22F',
                        name: ''
                    },
                ]
                /* 楼层指引 end */
            };
        },
        created() {
        },
        mounted() {
            const url = new URL(window.location.href);
            const id = url.searchParams.get('floorid');
            $('.threed').show();
            $('.vrdiv').hide();
            document.querySelector('#app').classList.remove('hide');
        },
        methods: {
            handleClose(done) {
                this.dialogVisible = false;
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                if (this.inputValue) {
                    this.searchData(val);
                } else {
                    this.getItemList(val, this.btnid)
                }
            },
            handleClick(tab, event) {
                if (tab.name == 'fifth') {
                    window.open('https://www.cqna.gov.cn/')
                }
            },
            searchData(val) {
                var that = this;
                this.currentPage = val;
                $.ajax({
                    url: conpath + "/handleBusiness/search",
                    type: "post",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "keyword": that.inputValue,
                        "currentPage": val,
                        "pageSize": 7,
                        "businessId": that.btnid
                    }),
                    dataType: "json",
                    success: function (data) {
                        that.sxqdList = data.data.handleMatters.slice(0, 7);
                        that.total = data.data.total;
                        that.rzbmList = data.data.handleDepts;
                    }
                })
            },
            goToLink(url) {
                if (url) {
                    window.open(url);
                }
            },
            floorChange(id) {
                this.floorGuideShow = false;
                this.currentFloor = id;
                this.popupType = 'other'
                this.popupShow = false;
                $('.threed').show();
                $('.vrdiv').hide();
                this.showthreed();
                var detailDivs = document.getElementsByClassName('detailDiv');
                detailDivs[0].style.display = 'none'; // 强制显示元素
            },
            showthreed() {
                $('.threed').show();
                $('.vrdiv').hide();
                $('#vrdiv').removeClass('active');
                $('#threed').addClass('active');
                $('.redio').show();
                $('.lines').show();
                $('.lineh').show();
            },
            showvrdiv() {
                $('.threed').hide();
                $('.vrdiv').show();
                $('#threed').removeClass('active');
                $('#vrdiv').addClass('active');
                $('.redio').hide();
                $('.lines').hide();
                $('.lineh').hide();
                var detailDivs = document.getElementsByClassName('detailDiv');
                detailDivs[0].style.display = 'none'; // 强制显示元素
            },
            backsw() {
                window.location.href = "qjtMobile.html"
            },
            getItemList(currentPage, businessId) {
                var that = this;
                $.ajax({
                    url: conpath + "/handleBusiness/query",
                    type: "post",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "currentPage": currentPage,
                        "pageSize": 7,
                        "businessId": businessId
                    }),
                    dataType: "json",
                    success: function (data) {
                        that.sxqdList = data.data.handleMatters;
                        that.total = data.data.total;
                    }
                })
            }
        }
    })
</script>
<script>
    var that = this;
    document.querySelectorAll('.namebtn').forEach(function (element) {
        element.addEventListener('click', function (event) {
            const items = document.querySelectorAll('.namebtn');
            // 清除所有兄弟节点的active类
            items.forEach(i => {
                i.classList.remove('active');
            });

            // 给当前点击的元素添加active类
            this.classList.add('active');
            var detailDivs = document.getElementsByClassName('detailDiv');
            detailDivs[0].style.display = 'block'; // 强制显示元素


            that.nowDiv.popupShow = true;

            //获取弹窗内容
            var popupType = element.getAttribute('data-popupType');
            that.nowDiv.popupType = popupType ? popupType : "other";
            //初始化tab栏
            that.nowDiv.activeNametwo = "sxqd";
            that.nowDiv.inputValue = '';
            var id = element.getAttribute('data-id');
            that.nowDiv.currentPage = 1;
            if (id && id != 12) {
                $('#tab-rzbm').css('display', 'inline-block')
                $('.popuppage').css('display', 'block')
                $('.search').css('display', 'flex')
                that.nowDiv.btnid = id;
                $.ajax({
                    url: conpath + "/handleBusiness/" + id,
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        var value = data.data;
                        that.nowDiv.btnName = value.handleBusiness.handleName;
                        that.nowDiv.rzbmList = value.handleDepts;
                    }
                })
                that.nowDiv.getItemList(1, id)
            } else if (id && id == 12) {
                that.nowDiv.popupType = 1;
                that.nowDiv.btnName = '政务公开专区';
                that.nowDiv.rzbmList = [];
            } else {
                $('.search').css('display', 'flex')
                $('#tab-rzbm').css('display', 'inline-block')
                $('.popuppage').css('display', 'block')
                that.nowDiv.btnName = '';
            }
        });
    });
</script>

</html>