|
|
@@ -0,0 +1,188 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <link rel="stylesheet" href="css/floorcon.css">
|
|
|
+</head>
|
|
|
+<style>
|
|
|
+ .container {
|
|
|
+ position: relative;
|
|
|
+ background-image: url(images/indexbgfloor.png);
|
|
|
+ width: 100%;
|
|
|
+ min-height: 100vh;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-pagination {
|
|
|
+ margin-top: 15px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
|
+ background-color: #2895FF !important;
|
|
|
+ }
|
|
|
+</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">
|
|
|
+ {{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>
|
|
|
+ </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>
|
|
|
+ <div class="detailDiv" v-if="currentFloor === 2">
|
|
|
+ <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>
|
|
|
+ </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>
|
|
|
+ <div class="bottomBtn">
|
|
|
+ <div class="btn active">3D</div>
|
|
|
+ <div class="btn">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">智能问答</div>
|
|
|
+ <div class="button">联系我们</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+<!-- 引入 Vue -->
|
|
|
+<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
|
|
|
+<!-- 引入样式 -->
|
|
|
+<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
+<!-- 引入组件库 -->
|
|
|
+<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
|
+<script>
|
|
|
+ new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ activeName: 'second',
|
|
|
+ activeNametwo: 'sxqd',
|
|
|
+ currentFloor: 1,
|
|
|
+ floorList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "一楼"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "二楼"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "三楼"
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ 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: ""
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: "全国残疾人按比例就业情况联网认证",
|
|
|
+ url: ""
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
+ },
|
|
|
+ handleClicktwo() { },
|
|
|
+ backsw() {
|
|
|
+ window.location.href = "qjt.html"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
xyg
