|
@@ -4,15 +4,19 @@
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>Document</title>
|
|
|
+ <title>楼层</title>
|
|
|
<link rel="stylesheet" href="css/floorcon.css">
|
|
|
+ <!-- jquery-->
|
|
|
+ <script src="js/jquery-3.5.1.min.js"></script>
|
|
|
+ <script src="js/urljson.js"></script>
|
|
|
</head>
|
|
|
<style>
|
|
|
.container {
|
|
|
position: relative;
|
|
|
background-image: url(images/indexbgfloor.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
width: 100%;
|
|
|
- min-height: 100vh;
|
|
|
+ /* min-height: 900px; */
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
@@ -34,77 +38,315 @@
|
|
|
.el-tab-pane {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- justify-content: space-evenly;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .moxing .namebtn {
|
|
|
+ padding: 0 5px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: #A7C4E0;
|
|
|
+ text-shadow: 3px 1px 2px rgb(40 149 255 / 80%);
|
|
|
+ position: absolute;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .moxing .namebtnl {
|
|
|
+ padding: 0;
|
|
|
+ background-color: rgb(239 41 19 / 40%);
|
|
|
+ border-radius: 6px;
|
|
|
+ line-height: 17px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: absolute;
|
|
|
+ text-shadow: 3px 1px 2px rgb(217 112 100 / 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ #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: 13px;
|
|
|
+ height: 13px;
|
|
|
+ background: #2896FF;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 111;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vrdiv {
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ position: absolute;
|
|
|
+ cursor: pointer;
|
|
|
+ background-image: url(images/logo-vr.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btable {
|
|
|
+ height: calc(100% - 67px);
|
|
|
+ margin-top: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jysm {
|
|
|
+ color: #2895FF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btable table {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sxqd::-webkit-scrollbar {
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width:1600px) {
|
|
|
+
|
|
|
+ html,
|
|
|
+ body {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sxqd li {
|
|
|
+ cursor: pointer;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxfw {
|
|
|
+ top: 66%;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width:1800px) {
|
|
|
+ .moxing {
|
|
|
+ left: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detailDiv {
|
|
|
+ max-height: 500px;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<body>
|
|
|
<div class="container" id="app">
|
|
|
<div class="floorTabs">
|
|
|
- <div class="list" :class="{ active: currentFloor === tab.id }" v-for="(tab,index) in floorList" :key="index"
|
|
|
- @click="currentFloor = tab.id">
|
|
|
+ <div class="list" :class="{ active: currentFloor == tab.id }" v-for="(tab,index) in floorList" :key="index"
|
|
|
+ @click="floorChange(tab.id)">
|
|
|
{{tab.name}}
|
|
|
</div>
|
|
|
<div class="list" @click="backsw">返回室外</div>
|
|
|
</div>
|
|
|
- <div class="detailDiv" v-if="currentFloor === 1">
|
|
|
- <div class="top">
|
|
|
- <div style="font-weight: bold;font-size: 26px;">咨询台您可以办理:</div>
|
|
|
- <div class="right">
|
|
|
- <span>工作时间:</span>
|
|
|
- <span>法定工作日 9:00-12:30 14:00-18:00</span>
|
|
|
+ <div id="lines" style="display: none;"></div>
|
|
|
+ <div id="lineh" style="display: none;"></div>
|
|
|
+ <div id="redio" style="display: none;"></div>
|
|
|
+ <div class="detailDiv" style="display: none;">
|
|
|
+ <div v-show="popupType == '1'">
|
|
|
+ <div class="top">
|
|
|
+ <div style="font-weight: bold;font-size: 1.625rem;">{{btnName}}您可以办理:</div>
|
|
|
+ <div class="right" style="font-size: 1rem;">
|
|
|
+ <span>工作时间:</span>
|
|
|
+ <span>法定工作日 9:00-12:30 14:00-18:00</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="依申请公开" name="first">
|
|
|
+ <div class="ysqgk">
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="政策咨询" name="second">
|
|
|
+ <div class="ysqgk">
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="接待导引" name="third">
|
|
|
+ <div class="ysqgk">
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="帮代办申请" name="fourth">
|
|
|
+ <div class="ysqgk">
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
</div>
|
|
|
- <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="依申请公开" name="first">
|
|
|
- <div class="ysqgk">
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="政策咨询" name="second">
|
|
|
- <div class="ysqgk">
|
|
|
+ <div v-show="popupType == '2'">
|
|
|
+ <div class="top">
|
|
|
+ <div style="font-weight: bold;font-size: 1.625rem;white-space: nowrap;">{{btnName}}您可以办理:</div>
|
|
|
+ <div class="right" style="font-size: 1rem;">
|
|
|
+ <span>工作时间:</span>
|
|
|
+ <span>法定工作日 9:00-12:30 14:00-18:00</span>
|
|
|
</div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="接待导引" name="third">
|
|
|
- <div class="ysqgk">
|
|
|
+ </div>
|
|
|
+ <el-tabs v-model="activeNametwo" @tab-click="handleClicktwo">
|
|
|
+ <el-tab-pane label="事项清单" name="sxqd">
|
|
|
+ <ul class="sxqd">
|
|
|
+ <li v-for="(item,index) in sxqdList">
|
|
|
+ <span @click="goToLink(item.url)" v-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">>
|
|
|
+ </el-pagination>
|
|
|
+
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="入驻部门" name="rzbm">
|
|
|
+ <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: 1.625rem;">{{btnName}}您可以办理:</div>
|
|
|
+ <div class="right" style="font-size: 1rem;">
|
|
|
+ <span>工作时间:</span>
|
|
|
+ <span>法定工作日 9:00-12:30 14:00-18:00</span>
|
|
|
</div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="帮代办申请" name="fourth">
|
|
|
- <div class="ysqgk">
|
|
|
+ </div>
|
|
|
+ <!-- <div class="btable">
|
|
|
+ <div class="jysm">
|
|
|
+ <div style="width: 2px;height: 14px;background-color: #2895FF;margin-right: 10px;"></div>
|
|
|
+ <div>简要说明</div>
|
|
|
</div>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ <table border="0" cellspacing="0" style="width: 100%;">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td class="tit">办理主体</td>
|
|
|
+ <td class="cont">200万元/亩</td>
|
|
|
+ <td class="tit">办件类型</td>
|
|
|
+ <td class="cont">200万元/亩</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="tit">服务对象</td>
|
|
|
+ <td class="cont">200万元/亩</td>
|
|
|
+ <td class="tit">材料清单</td>
|
|
|
+ <td class="cont"></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="tit">法定办结时期</td>
|
|
|
+ <td class="cont">200万元/亩</td>
|
|
|
+ <td class="tit">承诺办结时期</td>
|
|
|
+ <td class="cont"></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="tit">咨询方式</td>
|
|
|
+ <td class="cont">200万元/亩</td>
|
|
|
+ <td class="tit">监督投诉方式</td>
|
|
|
+ <td class="cont"></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="tit">办理地点</td>
|
|
|
+ <td colspan="3"></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="tit">办理时间</td>
|
|
|
+ <td colspan="3"></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="tit">办理形式</td>
|
|
|
+ <td colspan="3"></td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="detailDiv" v-if="currentFloor === 2">
|
|
|
- <div class="top">
|
|
|
- <div style="font-weight: bold;font-size: 26px;white-space: nowrap;">无差别综合办理区您可以办理:</div>
|
|
|
- <div class="right">
|
|
|
- <span>工作时间:</span>
|
|
|
- <span>法定工作日 9:00-12:30 14:00-18:00</span>
|
|
|
+ <div class="moxing" v-show="currentFloor == 1">
|
|
|
+ <div class="imgDiv">
|
|
|
+ <img src="images/floordetail1.png" alt="">
|
|
|
+ <img src="images/floorArowRigt.png" alt=""
|
|
|
+ style="position:absolute; left:52px;bottom: 73px;width: 40px;height: 34px;">
|
|
|
+ <img src="images/floorArowTop.png" alt=""
|
|
|
+ style="position:absolute; right: 220px;top: 22px;width: 34px;height: 39px;">
|
|
|
+ <div class="vrdiv" style="left: 217px;bottom: 119px;"
|
|
|
+ @click="window.open('https://www.cqna.gov.cn/vr/vr.html')"></div>
|
|
|
+ <div class="vrdiv" style="left: 384px;bottom: 146px;"
|
|
|
+ @click="window.open('https://www.cqna.gov.cn/vr/vr.html')"></div>
|
|
|
+ <div class="namebtn threed" style="left: 150px;bottom: 88px;background-color: #D97064;
|
|
|
+ text-shadow: 3px 1px 2px rgb(217 112 100 / 80%);" data-popupType="1">咨询台
|
|
|
</div>
|
|
|
+ <div class="namebtn threed" style="left: 217px;bottom: 119px;" data-popupType="2" data-id="12">政务公开专区
|
|
|
+ </div>
|
|
|
+ <div class="namebtn threed" style="left: 217px;bottom: 72px;" data-popupType="2" data-id="3">24h自助服务区
|
|
|
+ </div>
|
|
|
+ <div class="namebtn threed" style="left: 331px;bottom: 97px;" data-popupType="2" data-id="2">社保卡办理区
|
|
|
+ </div>
|
|
|
+ <div class="namebtnl threed" style="right: 220px;bottom: 82px;">免费婚检室</div>
|
|
|
+ <div class="namebtnl threed" style="left: 470px;bottom: 203px;">领政厅</div>
|
|
|
+ <div class="namebtnl threed" style="right: 88px;bottom: 194px;">婚姻家庭辅导室</div>
|
|
|
+ <div class="namebtn threed" style="right: 110px;top: 54px;" data-popupType="2" data-id="1">婚姻登记处</div>
|
|
|
</div>
|
|
|
- <el-tabs v-model="activeNametwo" @tab-click="handleClicktwo">
|
|
|
- <el-tab-pane label="事项清单" name="sxqd">
|
|
|
- <ul class="sxqd">
|
|
|
- <li v-for="(item,index) in sxqdList">
|
|
|
- <span>{{item.title}}</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <el-pagination background layout="prev, pager, next" :total="1000">
|
|
|
- </el-pagination>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="入驻部门" name="rzbm">
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ <div style="font-size: 26px;color: #004A93;">2号楼一楼婚姻登记处社保卡办理</div>
|
|
|
+ <div style="font-size: 20px;color: #547596;">(您可以点击图中的按钮查看详情)</div>
|
|
|
+ </div>
|
|
|
+ <div class="moxing" v-show="currentFloor == 2">
|
|
|
+ <div class="imgDiv">
|
|
|
+ <img src="images/floordetail2.png" alt="">
|
|
|
+ <div class="namebtnl threed" style="left: 286px;bottom: 91px;">自助服务区</div>
|
|
|
+ <div class="namebtn threed" style="left: 326px;bottom: 215px;" data-popupType="2" data-id="4">公安综合办理区
|
|
|
+ </div>
|
|
|
+ <div class="namebtnl threed" style="right: 175px;bottom: 156px;">自助服务区</div>
|
|
|
+ <div class="namebtn threed" style="right: 110px;top: 87px;" data-popupType="2" data-id="5">无差别综合办理区
|
|
|
+ </div>
|
|
|
+ <div class="namebtnl threed" style="right: 187px;top: 15px;">母婴室</div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 26px;color: #004A93;">2号楼二楼无差别、区公安办理区</div>
|
|
|
+ <div style="font-size: 20px;color: #547596;">(您可以点击图中的按钮查看详情)</div>
|
|
|
+ </div>
|
|
|
+ <div class="moxing" v-show="currentFloor == 3">
|
|
|
+ <div class="imgDiv">
|
|
|
+ <img src="images/floordetail3.png" alt="">
|
|
|
+ <div class="namebtnl threed"
|
|
|
+ style="left: 7px;bottom: 50px;display: flex;flex-direction: column;align-items: center;">
|
|
|
+ <span>314工程建设项目</span><span>审批会议室</span>
|
|
|
+ </div>
|
|
|
+ <div class="namebtn threed" style="left: 341px;top: 114px;" data-popupType="2" data-id="6">经开区企业开办办理区
|
|
|
+ </div>
|
|
|
+ <div class="namebtnl threed" style="right: 169px;top: 92px;">政务公开专区</div>
|
|
|
+ <div class="namebtnl threed" style="right: 189px;top: 59px;">自助服务区</div>
|
|
|
+ <div class="namebtn threed" style="right: 67px;top: 123px;" data-popupType="2" data-id="8">工程建设领域办理区
|
|
|
+ </div>
|
|
|
+ <div class="namebtn threed" style="right: 85px;top: 0;" data-popupType="2" data-id="7">不动产登记办理区</div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 26px;color: #004A93;">2号楼三楼婚姻登记处社保卡办理</div>
|
|
|
+ <div style="font-size: 20px;color: #547596;">(您可以点击图中的按钮查看详情)</div>
|
|
|
</div>
|
|
|
<div class="bottomBtn">
|
|
|
- <div class="btn active">3D</div>
|
|
|
- <div class="btn">VR</div>
|
|
|
+ <div class="btn active" id="threed" @click="showthreed">3D</div>
|
|
|
+ <div class="btn" id="vrdiv" @click="showvrdiv">VR</div>
|
|
|
</div>
|
|
|
<div class="zxfw">
|
|
|
<div style="color: #004A93;margin: 15px 0;">在线服务</div>
|
|
|
<div class="buttonList">
|
|
|
- <div class="button">预约取号</div>
|
|
|
- <div class="button">远程帮办</div>
|
|
|
+ <div class="button" @click="goToLink('wyyy.html')">延时办</div>
|
|
|
+ <div class="button" @click="goToLink('wybdb.html')">帮代办</div>
|
|
|
<div class="button">智能问答</div>
|
|
|
<div class="button">联系我们</div>
|
|
|
</div>
|
|
@@ -118,13 +360,19 @@
|
|
|
<!-- 引入组件库 -->
|
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
|
<script>
|
|
|
- new Vue({
|
|
|
+ var nowDiv = new Vue({
|
|
|
el: "#app",
|
|
|
data: function () {
|
|
|
return {
|
|
|
activeName: 'second',
|
|
|
- activeNametwo: 'sxqd',
|
|
|
+ activeNametwo: 'rzbm',
|
|
|
+ popupShow: false,
|
|
|
+ btnName: '',
|
|
|
currentFloor: 1,
|
|
|
+ popupType: "other",
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0,
|
|
|
+ btnid: 1,
|
|
|
floorList: [
|
|
|
{
|
|
|
id: 1,
|
|
@@ -139,6 +387,7 @@
|
|
|
name: "三楼"
|
|
|
},
|
|
|
],
|
|
|
+ rzbmList: [],
|
|
|
sxqdList: [
|
|
|
{
|
|
|
id: 1,
|
|
@@ -169,25 +418,197 @@
|
|
|
id: 1,
|
|
|
title: "残疾类别/等级变更",
|
|
|
url: ""
|
|
|
- },
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- title: "全国残疾人按比例就业情况联网认证",
|
|
|
- url: ""
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.unitBtnClick();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const url = new URL(window.location.href);
|
|
|
+ const id = url.searchParams.get('floorid');
|
|
|
+ // this.currentFloor = id;
|
|
|
+ $('.threed').show();
|
|
|
+ $('.vrdiv').hide();
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.getItemList(val, this.btnid)
|
|
|
+ },
|
|
|
handleClick(tab, event) {
|
|
|
console.log(tab, event);
|
|
|
},
|
|
|
+ goToLink(url) {
|
|
|
+ if (url) {
|
|
|
+ window.open(url);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ floorChange(id) {
|
|
|
+ this.currentFloor = id;
|
|
|
+ this.popupType = 'other'
|
|
|
+ this.popupShow = false;
|
|
|
+ $('.threed').show();
|
|
|
+ $('.vrdiv').hide();
|
|
|
+ this.unitBtnClick();
|
|
|
+ this.showthreed();
|
|
|
+ var detailDivs = document.getElementsByClassName('detailDiv');
|
|
|
+ detailDivs[0].style.display = 'none'; // 强制显示元素
|
|
|
+ },
|
|
|
+ showthreed() {
|
|
|
+ $('.threed').show();
|
|
|
+ $('.vrdiv').hide();
|
|
|
+ $('#vrdiv').removeClass('active');
|
|
|
+ $('#threed').addClass('active');
|
|
|
+ },
|
|
|
+ showvrdiv() {
|
|
|
+ $('.threed').hide();
|
|
|
+ $('.vrdiv').show();
|
|
|
+ $('#threed').removeClass('active');
|
|
|
+ $('#vrdiv').addClass('active');
|
|
|
+ this.unitBtnClick();
|
|
|
+ var detailDivs = document.getElementsByClassName('detailDiv');
|
|
|
+ detailDivs[0].style.display = 'none'; // 强制显示元素
|
|
|
+ },
|
|
|
handleClicktwo() { },
|
|
|
backsw() {
|
|
|
window.location.href = "qjt.html"
|
|
|
+ },
|
|
|
+ unitBtnClick() {
|
|
|
+ lines.style.display = 'none';
|
|
|
+ lineh.style.display = 'none';
|
|
|
+ redio.style.display = 'none';
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+
|
|
|
+ var detailDivs = document.getElementsByClassName('detailDiv');
|
|
|
+ detailDivs[0].style.display = 'block'; // 强制显示元素
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ var offset2 = $(detailDivs[0]).offset(); // 获取偏移量
|
|
|
+
|
|
|
+ that.nowDiv.popupShow = true;
|
|
|
+ //弹窗的宽高
|
|
|
+ var element2 = document.getElementsByClassName('detailDiv');
|
|
|
+ var offset2 = $('.detailDiv').offset();
|
|
|
+ var rect = element2[0].getBoundingClientRect();
|
|
|
+ var height2 = rect.top;
|
|
|
+ var left2 = rect.left;
|
|
|
+
|
|
|
+ //图中按钮的位置
|
|
|
+ var rect1 = this.getBoundingClientRect();
|
|
|
+ var top1 = rect1.top;
|
|
|
+ var left1 = rect1.left;
|
|
|
+ var width1 = rect1.width;
|
|
|
+
|
|
|
+ var widthDiff = left2 - left1;
|
|
|
+ var heightDiff = top1 - height2;
|
|
|
+
|
|
|
+ var lines = document.getElementById('lines');
|
|
|
+ var lineh = document.getElementById('lineh');
|
|
|
+ var redio = document.getElementById('redio');
|
|
|
+
|
|
|
+ lines.style.display = 'block';
|
|
|
+ lineh.style.display = 'block';
|
|
|
+ redio.style.display = 'block';
|
|
|
+
|
|
|
+ //横线的位置
|
|
|
+ lineh.style.width = widthDiff - width1 / 2 + 'px';
|
|
|
+ lineh.style.left = left1 + width1 / 2 + 'px';
|
|
|
+ lineh.style.top = top1 - heightDiff + 93.5 + 'px';
|
|
|
+
|
|
|
+ //竖线的位置
|
|
|
+ lines.style.height = heightDiff - 100 + 'px';
|
|
|
+ var nowLeft = left1 + width1 / 2;
|
|
|
+ lines.style.left = nowLeft - 1 + 'px';
|
|
|
+ lines.style.top = top1 - heightDiff + 93.5 + 'px';
|
|
|
+ //点的位置
|
|
|
+ redio.style.top = top1 - 15 + 'px';
|
|
|
+ redio.style.left = nowLeft - 6.5 + 'px';
|
|
|
+
|
|
|
+ //获取弹窗内容
|
|
|
+ var popupType = element.getAttribute('data-popupType');
|
|
|
+ that.nowDiv.popupType = popupType ? popupType : "other";
|
|
|
+ //初始化tab栏
|
|
|
+ that.nowDiv.activeNametwo = "sxqd";
|
|
|
+ var id = element.getAttribute('data-id');
|
|
|
+ if (id && id != 12) {
|
|
|
+ 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.btnName = '政务公开专区';
|
|
|
+ that.nowDiv.rzbmList = [];
|
|
|
+ that.nowDiv.sxqdList = [{
|
|
|
+ id: 1,
|
|
|
+ mattersName: '政府信息公开指南',
|
|
|
+ url: 'https://www.cqna.gov.cn/zwgk_254/zfxxgkzn/qzfgkzn/202402/t20240202_12897323.html'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ mattersName: '政府信息公开申请表',
|
|
|
+ url: 'https://www.cqna.gov.cn/zwgk_254/zfxxgkzn/qzfgkzn/202402/t20240202_12897323.html'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ mattersName: '依申请公开流程图',
|
|
|
+ url: 'https://www.cqna.gov.cn/zwgk_254/ysqgk/202310/t20231008_12406289.html'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ mattersName: '重庆市南岸区人民政府行政规范性文件',
|
|
|
+ url: 'https://www.cqna.gov.cn/zwgk_254/zfxxgkml/zcwj/xzgfxwjk/'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ mattersName: '中华人民共和国国务院公报',
|
|
|
+ url: 'https://www.gov.cn/gongbao/2024/issue_11606/'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ mattersName: '重庆市人民政府公报',
|
|
|
+ url: 'https://www.cq.gov.cn/zwgk/zfxxgkml/zfgb/2024/'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ } else {
|
|
|
+ that.nowDiv.btnName = '';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+</script>
|
|
|
|
|
|
</html>
|