|
|
@@ -1,53 +1,53 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
- <head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <link rel="stylesheet" type="text/css" href="element-ui/lib/theme-chalk/index.css" />
|
|
|
- <link rel="stylesheet" href="css/footer.css">
|
|
|
- <link rel="stylesheet" href="css/logobaner.css">
|
|
|
- <link rel="stylesheet" type="text/css" href="css/fundsupervision.css" />
|
|
|
- <title>渝快住 住愉快 - 资金监管</title>
|
|
|
- </head>
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <link rel="stylesheet" type="text/css" href="element-ui/lib/theme-chalk/index.css" />
|
|
|
+ <link rel="stylesheet" href="css/footer.css">
|
|
|
+ <link rel="stylesheet" href="css/logobaner.css">
|
|
|
+ <link rel="stylesheet" type="text/css" href="css/fundsupervision.css" />
|
|
|
+ <title>渝快住 住愉快 - 资金监管</title>
|
|
|
+</head>
|
|
|
|
|
|
- <body>
|
|
|
- <!-- 头部 -->
|
|
|
- <div class="mtop">
|
|
|
- <div class="logo">
|
|
|
- <img src="image/logo .png" alt="">
|
|
|
- </div>
|
|
|
- <div class="listbanner" id="rich">
|
|
|
- <div class="listbanner-btn">
|
|
|
- <img src="image/listbanner.png" alt="" class="line" @click="drawers()">
|
|
|
- </div>
|
|
|
-
|
|
|
- <el-drawer :visible.sync="drawer" :with-header="false" >
|
|
|
- <ul id="listbanner-nav" >
|
|
|
- <li><a href="index.html">首页</a></li>
|
|
|
- <li><a href="informationverification.html">房源验真</a></li>
|
|
|
- <li><a href="housingresourceslist-new1.html">我要买房</a></li>
|
|
|
- <li @click="open"><a href="javascript:;" >我要卖房</a></li>
|
|
|
- <li><a href="fundsupervision.html">资金监管</a></li>
|
|
|
- <li><a href="organization.html">经纪管理</a></li>
|
|
|
- <li @click="loginJump"><a href="javascript:;">登录</a></li>
|
|
|
- <li ><a href="register.html">注册</a></li>
|
|
|
- <li><a href="mail.html">个人中心</a></li>
|
|
|
- <li @click="listing"><a href="javascript:;">切换角色</a></li>
|
|
|
- <li @click="quit"><a href="javascript:;">退出</a></li>
|
|
|
- </ul>
|
|
|
-
|
|
|
- </el-drawer>
|
|
|
- </div>
|
|
|
+<body>
|
|
|
+ <!-- 头部 -->
|
|
|
+ <div class="mtop">
|
|
|
+ <div class="logo">
|
|
|
+ <img src="image/logo .png" alt="">
|
|
|
</div>
|
|
|
- <!-- 面包屑 -->
|
|
|
- <div class="guideTitle">
|
|
|
- <span class="crumb-text_e" onclick="location.href = 'index.html'">首页</span>
|
|
|
- <span class="crumb-icon">></span>
|
|
|
- <span class="crumb-text_e">资金监管</span>
|
|
|
+ <div class="listbanner" id="rich">
|
|
|
+ <div class="listbanner-btn">
|
|
|
+ <img src="image/listbanner.png" alt="" class="line" @click="drawers()">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-drawer :visible.sync="drawer" :with-header="false">
|
|
|
+ <ul id="listbanner-nav">
|
|
|
+ <li><a href="index.html">首页</a></li>
|
|
|
+ <li><a href="informationverification.html">房源验真</a></li>
|
|
|
+ <li><a href="housingresourceslist-new1.html">我要买房</a></li>
|
|
|
+ <li @click="open"><a href="javascript:;">我要卖房</a></li>
|
|
|
+ <li><a href="fundsupervision.html">资金监管</a></li>
|
|
|
+ <li><a href="organization.html">经纪管理</a></li>
|
|
|
+ <li @click="loginJump"><a href="javascript:;">登录</a></li>
|
|
|
+ <li><a href="register.html">注册</a></li>
|
|
|
+ <li><a href="mail.html">个人中心</a></li>
|
|
|
+ <li @click="listing"><a href="javascript:;">切换角色</a></li>
|
|
|
+ <li @click="quit"><a href="javascript:;">退出</a></li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ </el-drawer>
|
|
|
</div>
|
|
|
- <div class="messagebox">
|
|
|
+ </div>
|
|
|
+ <!-- 面包屑 -->
|
|
|
+ <div class="guideTitle">
|
|
|
+ <span class="crumb-text_e" onclick="location.href = 'index.html'">首页</span>
|
|
|
+ <span class="crumb-icon">></span>
|
|
|
+ <span class="crumb-text_e">资金监管</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="messagebox">
|
|
|
<p class="messageContent">
|
|
|
01.什么是资金监管?
|
|
|
</br>
|
|
|
@@ -69,27 +69,179 @@
|
|
|
<el-button type="text" @click="open">我要监管</el-button>
|
|
|
</template>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <footer>
|
|
|
- <div class="img-zf">
|
|
|
- <img src="image/jiucuo.png" alt="">
|
|
|
- <img src="image/dzjg.png" alt="">
|
|
|
- <img src="image/jc.png" alt="">
|
|
|
+ </div> -->
|
|
|
+ <main>
|
|
|
+ <div class="center_QA">问题解答</div>
|
|
|
+ <div class="content_box">
|
|
|
+ <div class="focus">
|
|
|
+ <ul>
|
|
|
+ <li><a href="#"><img src="image/zjjgf.png" /></a></li>
|
|
|
+ <li><a href="#"><img src="image/zjjgs.png" /></a></li>
|
|
|
+ <li><a href="#"><img src="image/zjjgfs.png" /></a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <img src="image/leftlistn.png" id="imgl" alt="" onclick="leftmove()">
|
|
|
+ <ol>
|
|
|
+ <li class="current"></li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ </ol>
|
|
|
+ <img src="image/rightlist.png" id="imgr" alt="" onclick="rightmove()">
|
|
|
</div>
|
|
|
- <ul class="zw-list_text">
|
|
|
- <li>版权所有：重庆市房地产交易事务中心 </li>
|
|
|
- <!-- <li>通讯地址：重庆市江北区北滨一路鼎升国际中心2号楼</li> -->
|
|
|
- <li>联系方式:023-88395611丨网站标识码：5000000001ICP备案</li>
|
|
|
- <!-- <li>邮编：401147</li> -->
|
|
|
- <li><a href="https://beian.miit.gov.cn" style="line-height: 21px;font-size: 2.6667vw;font-weight: 400;color: #666666;">备案：渝ICP备19006671号-4</a>丨渝公网安备50010302002287号</li>
|
|
|
- </ul>
|
|
|
- </footer>
|
|
|
- <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
|
|
|
- <script src="js/vue.js"></script>
|
|
|
- <script src="element-ui/lib/index.js" type="text/javascript" charset="utf-8"></script>
|
|
|
- <script src="js/popup.js"></script>
|
|
|
- <script src="/zfjyjgfwpt/main/js/constants.js" type="text/javascript" charset="utf-8"></script>
|
|
|
- <script src="js/fundsupervision.js" type="text/javascript" charset="utf-8"></script>
|
|
|
- </body>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ <footer>
|
|
|
+ <div class="img-zf">
|
|
|
+ <img src="image/jiucuo.png" alt="">
|
|
|
+ <img src="image/dzjg.png" alt="">
|
|
|
+ <img src="image/jc.png" alt="">
|
|
|
+ </div>
|
|
|
+ <ul class="zw-list_text">
|
|
|
+ <li>版权所有：重庆市房地产交易事务中心 </li>
|
|
|
+ <!-- <li>通讯地址：重庆市江北区北滨一路鼎升国际中心2号楼</li> -->
|
|
|
+ <li>联系方式:023-88395611丨网站标识码：5000000001ICP备案</li>
|
|
|
+ <!-- <li>邮编：401147</li> -->
|
|
|
+ <li><a href="https://beian.miit.gov.cn"
|
|
|
+ style="line-height: 21px;font-size: 2.6667vw;font-weight: 400;color: #666666;">备案：渝ICP备19006671号-4</a>丨渝公网安备50010302002287号
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </footer>
|
|
|
+ <script>
|
|
|
+ var focus = document.querySelector('.focus');
|
|
|
+ var list = document.querySelector('.list');
|
|
|
+ var ul = focus.querySelector('ul');
|
|
|
+ var ol = list.querySelector('ol');
|
|
|
+ // 获取focus的宽度
|
|
|
+ var w = focus.offsetWidth;
|
|
|
+ // 1. 利用定时器
|
|
|
+ var index = 0;
|
|
|
+ var timer = setInterval(() => {
|
|
|
+ index++;
|
|
|
+ var translatex = -index * w;
|
|
|
+ moveTransition(ul, translatex);
|
|
|
+ if (index == 2) {
|
|
|
+ $("#imgl").attr("src", "image/leftlistn.png");
|
|
|
+ $("#imgr").attr("src", "image/rightlistn.png");
|
|
|
+ } else if (index == 3) {
|
|
|
+ $("#imgr").attr("src", "image/rightlist.png");
|
|
|
+ $("#imgl").attr("src", "image/leftlist.png");
|
|
|
+ } else {
|
|
|
+ $("#imgr").attr("src", "image/rightlist.png");
|
|
|
+ $("#imgl").attr("src", "image/leftlistn.png");
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+ // 2. 监听过渡完成事件transitionend
|
|
|
+ ul.addEventListener('transitionend', function () {
|
|
|
+ if (index >= 3) {
|
|
|
+ index = 0;
|
|
|
+ } else if (index < 0) {
|
|
|
+ index = 2;
|
|
|
+ }
|
|
|
+ var translatex = -index * w; // 利用新的索引号获取宽度
|
|
|
+ moveNoTransition(ul, translatex);
|
|
|
+ // 3. 小圆点跟随移动，使用classList
|
|
|
+ ol.querySelector('.current').classList.remove('current'); // 移除current类
|
|
|
+ ol.children[index].classList.add('current'); // 给当前小圆点添加current类
|
|
|
+ })
|
|
|
+ // 4. 手指移动轮播图
|
|
|
+ // 触摸元素touchstart 获取手指的初始位置
|
|
|
+ var startX = 0; // 定义手指位置
|
|
|
+ var moveX = 0; // 定义移动距离
|
|
|
+ var flag = false; // 判断是否滑动了
|
|
|
+ ul.addEventListener('touchstart', function (e) {
|
|
|
+ startX = e.targetTouches[0].pageX;
|
|
|
+ // 停止定时器
|
|
|
+ clearInterval(timer);
|
|
|
+ })
|
|
|
+ // 移动元素touchmove 获取移动距离
|
|
|
+ ul.addEventListener('touchmove', function (e) {
|
|
|
+ moveX = e.targetTouches[0].pageX - startX;
|
|
|
+ // 移动盒子：盒子原来的距离 + 移动的距离
|
|
|
+ var translatex = -index * w + moveX;
|
|
|
+ moveNoTransition(ul, translatex);
|
|
|
+ e.preventDefault(); // 一定注意这个地方，否则会发生moveX基本不改变的现象
|
|
|
+ flag = true;
|
|
|
+ })
|
|
|
+ // 手指离开touchend，根据手指移动的距离来判断是否移动到上一张或者下一张
|
|
|
+ ul.addEventListener('touchend', function (e) {
|
|
|
+ // 如果滑动了，才进行如下的判断操作
|
|
|
+ if (flag) {
|
|
|
+ // 判断如果移动距离大于50px那么就移动到下一张或上一张
|
|
|
+ if (Math.abs(moveX) > 50) {
|
|
|
+ // 如果是右滑就表示滑动到上一张，moveX>0
|
|
|
+ if (moveX > 0) {
|
|
|
+ index--;
|
|
|
+ } else {
|
|
|
+ // 如果是左滑就表示滑动到下一张，moveX<0
|
|
|
+ index++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var translatex = -index * w;
|
|
|
+ moveTransition(ul, translatex);
|
|
|
+ }
|
|
|
+ if (index == 2) {
|
|
|
+ $("#imgr").attr("src", "image/rightlistn.png");
|
|
|
+ } else if (index == 0) {
|
|
|
+ $("#imgl").attr("src", "image/leftlist.png");
|
|
|
+ } else {
|
|
|
+ $("#imgr").attr("src", "image/rightlist.png");
|
|
|
+ $("#imgl").attr("src", "image/leftlistn.png");
|
|
|
+ }
|
|
|
+ // 手指离开后开启定时器
|
|
|
+ clearInterval(timer);
|
|
|
+ timer = setInterval(() => {
|
|
|
+ index++;
|
|
|
+ var translatex = -index * w;
|
|
|
+ moveTransition(ul, translatex);
|
|
|
+ }, 2000);
|
|
|
+ })
|
|
|
+ function leftmove() {
|
|
|
+ // 停止定时器
|
|
|
+ clearInterval(timer);
|
|
|
+ index--;
|
|
|
+ var translatex = -index * w;
|
|
|
+ moveTransition(ul, translatex);
|
|
|
+ if (index == 0) {
|
|
|
+ $("#imgl").attr("src", "image/leftlist.png");
|
|
|
+ } else {
|
|
|
+ $("#imgl").attr("src", "image/leftlistn.png");
|
|
|
+ $("#imgr").attr("src", "image/rightlist.png");
|
|
|
+ }
|
|
|
+ //开启
|
|
|
+ clearInterval(timer);
|
|
|
+ }
|
|
|
+ function rightmove() {
|
|
|
+ clearInterval(timer);
|
|
|
+ index++;
|
|
|
+ var translatex = -index * w;
|
|
|
+ moveTransition(ul, translatex);
|
|
|
+ if (index == 2) {
|
|
|
+ $("#imgr").attr("src", "image/rightlistn.png");
|
|
|
+ } else {
|
|
|
+ $("#imgr").attr("src", "image/rightlist.png");
|
|
|
+ $("#imgl").attr("src", "image/leftlistn.png");
|
|
|
+ }
|
|
|
+ clearInterval(timer);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 定义一个过渡滑动效果的函数
|
|
|
+ function moveTransition(obj, distance) {
|
|
|
+ obj.style.transition = 'all .3s'; // 添加过渡效果，0.3s完成图片滚动
|
|
|
+ obj.style.transform = 'translateX(' + distance + 'px)';
|
|
|
+ }
|
|
|
+ // 定义一个没有过渡滑动效果的函数
|
|
|
+ function moveNoTransition(obj, distance) {
|
|
|
+ obj.style.transition = 'none'; // 去掉过渡效果，让ul快速跳到目标位置
|
|
|
+ obj.style.transform = 'translateX(' + distance + 'px)';
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+ <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
|
|
|
+ <script src="js/vue.js"></script>
|
|
|
+ <script src="element-ui/lib/index.js" type="text/javascript" charset="utf-8"></script>
|
|
|
+ <script src="js/popup.js"></script>
|
|
|
+ <script src="/zfjyjgfwpt/main/js/constants.js" type="text/javascript" charset="utf-8"></script>
|
|
|
+ <script src="js/fundsupervision.js" type="text/javascript" charset="utf-8"></script>
|
|
|
+</body>
|
|
|
|
|
|
-</html>
|
|
|
+</html>
|
xyg
