230320a303 2 年之前
当前提交
db39bec946
共有 8 个文件被更改,包括 557 次插入0 次删除
  1. 二进制
      favicon.ico
  2. 64 0
      index.html
  3. 100 0
      src/css/com-pc.css
  4. 139 0
      src/css/main.css
  5. 二进制
      src/images/indexpc.jpg
  6. 230 0
      src/js/main.js
  7. 12 0
      src/swiper/swiper.min.css
  8. 12 0
      src/swiper/swiper.min.js

二进制
favicon.ico


+ 64 - 0
index.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+  <meta name="description" content="洪楼Plus-提供房地产信息资讯,传递房地产信息">
+  <meta name="keywords" content="洪楼Plus,提供房地产信息资讯,传递房地产信息">
+  <title>洪楼Plus</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="洪楼Plus">
+  <meta name="msapplication-TileColor" content="#ec672a">
+  <link rel="stylesheet" href="./src/css/com-pc.css">
+  <!-- Link Swiper's CSS -->
+  <link rel="stylesheet" href="./src/swiper/swiper.min.css">
+  <link rel="stylesheet" href="./src/css/main.css">
+</head>
+<body>
+  <div class="l-box">
+    <iframe src="http://127.0.0.1:9528/" frameborder="0" width="100%" height="100%" id="fullVr"></iframe>
+    <div class="l-footer">
+      <div class="lf-wrap">
+        <div class="content">
+          
+
+
+
+
+<!-- Swiper -->
+<div class="swiper mySwiper">
+  <div class="swiper-wrapper" id="vr-nav">
+    <!-- <div class="swiper-slide">Slide 1</div> -->
+  </div>
+</div>
+
+
+
+
+
+<!-- Swiper -->
+<div class="swiper vr-main">
+  <div class="swiper-wrapper" id="vr-content">
+    <!-- <div class="vm-op">
+      <div class="w">
+        <div class="text"></div>
+      </div>
+    </div> -->
+  </div>
+  <div class="swiper-button-prev"></div>
+  <div class="swiper-button-next"></div>
+</div>
+
+
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Swiper JS -->
+  <script src="./src/swiper/swiper.min.js"></script>
+  <script src="./src/js/main.js"></script>
+</body>
+</html>

+ 100 - 0
src/css/com-pc.css

@@ -0,0 +1,100 @@
+@charset "utf-8";
+*,html,body,div,a,p,span,img,h1,h2,h3,h4,h5,h6,input,button,form,select,textarea,label,i,b,strong,ul,ol,li,dl,dt,dd {
+    padding: 0;
+    margin: 0;
+    font-family: "Microsoft YaHei";
+    color: #333;
+    font-size: 14px;
+    word-break: break-all
+}
+
+html {
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-size: inherit;
+    font: 100%
+}
+
+span,a,i,strong,b {
+    color: inherit;
+    font-size: inherit;
+    font-style: normal;
+    font-weight: normal;
+    list-style: none
+}
+
+h1,h2,h3,h4,h5,h6 {
+    font-size: 100%;
+    font-weight: normal
+}
+
+ul,li {
+    list-style: none
+}
+
+textarea {
+    resize: none;
+    box-sizing: border-box
+}
+
+a {
+    text-decoration: none;
+    font-size: inherit;
+    color: inherit
+}
+a:hover {
+    text-decoration: none;
+}
+
+address,caption,cite,code,dfn,em,strong,th,var,b {
+    font-style: normal;
+    font-weight: normal
+}
+
+input,select,button,a,textarea,input:focus,select:focus,button:focus,a:focus,textarea:focus {
+    outline: 0
+}
+
+.l-inline {
+    display: inline-block
+}
+
+.l-show {
+    display: block
+}
+
+.l-hide {
+    display: none
+}
+
+.l-disabled {
+    background: #ccc!important;
+    color: #666!important;
+    border: 1px solid #aaa!important
+}
+
+.clearfix:before,.clearfix:after {
+    content: " ";
+    display: table
+}
+
+.clearfix:after {
+    clear: both
+}
+
+.clearfix {
+    *zoom:1}
+
+.xxjr-fl {
+    float: left
+}
+
+.xxjr-fr {
+    float: right
+}

+ 139 - 0
src/css/main.css

@@ -0,0 +1,139 @@
+html, body {
+  height: 100%;
+}
+.l-box {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.l-footer {
+  bottom: 24px;
+  left: 0;
+  position: fixed;
+  right: 0;
+  display: flex;
+  flex-flow: column;
+  -webkit-box-align: center;
+  align-items: center;
+}
+.lf-wrap {
+  width: 900px;
+  height: 190px;
+  background: rgba(0,0,0,.4);
+  border-radius: 4px;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 30px;
+  position: relative;
+}
+
+
+
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.vn-op {
+  font-size: 12px;
+  background: rgba(255, 255, 255, 0.15);
+  user-select: none;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 30px;
+  margin: 0 6px;
+  padding: 0 10px;
+  color: rgb(199, 199, 199);
+
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  transition-property:all;
+}
+.vn-op.cur {
+  background: #0c78b1;
+  color: #fff;
+}
+
+.swiper{
+  --swiper-theme-color: #00ff33;/* 设置Swiper风格 */
+  --swiper-navigation-color: #0c78b1;/* 单独设置按钮颜色 */
+  --swiper-navigation-size: 20px;/* 设置按钮大小 */
+}
+
+
+
+.vr-main {
+  margin-top: 16px;
+  user-select: none;
+}
+
+
+
+.vm-op {
+  border: 2px solid #fff;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 90px;
+  overflow: hidden;
+  width: 135px;
+  opacity: .7;
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  transition-property:all;
+}
+.vm-op.cur {
+  border-color: #0c78b1;
+  opacity: 1;
+}
+
+.vm-op .w {
+  background-position: 50%;
+  background-size: cover;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+.vm-op .text {
+  display: flex;
+  flex-flow: row;
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  background-color: rgba(0,0,0,.5);
+  bottom: 0;
+  height: 18px;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+.vm-op .text .t {
+  font-size: 12px;
+  color: #fff;
+  line-height: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

二进制
src/images/indexpc.jpg


+ 230 - 0
src/js/main.js

@@ -0,0 +1,230 @@
+// 封装ajax
+function ajax(list) {
+	if (XMLHttpRequest) {
+		var req = new XMLHttpRequest();
+	} else {
+		var req = new ActiveXObject("Microsoft.XMLHTTP");
+	}
+	var type = list.type || 'get';
+	var data = list.data || '';
+	var isAysnch = list.isAysnch || true;
+	if (type == 'get') {
+		req.open(type, list.url + "?" + data, isAysnch);
+		req.send(null);
+	} else {
+		// console.log(req)
+		// req.responseType = 'json'
+		req.open(type, list.url, isAysnch);
+		req.send(data);
+	}
+	req.onload = function () {
+		var d = req.responseText;
+		list.success(d);
+	}
+}
+
+var curNav = ''
+var curVrKey = ''
+var swiperVrImg = ''
+var navList = []
+
+function getVr (str, bc) {
+	var formData2 = new FormData();
+	formData2.append("area_type", curNav);
+	ajax({
+		type:'post',
+		url:'https://api.honglouplus.com/api/estate/area/vr',
+		data: formData2,
+		success:function(vs){
+			var res2 = JSON.parse(vs)
+			const data2 = res2.data
+			var cHtml2 = ''
+			
+			curVrKey = data2[0].vr_key
+
+			data2.forEach(function (item) {
+				if (item.vr_key === curVrKey) {
+					cHtml2 += '<div class="vm-op swiper-slide cur" t='+ item.vr_key +'><div t='+ item.vr_key +' class="w" style="background-image: url(' + item.vr_image+'_xs)"><div class="text"><div class="t">' + item.estate_name + '</div></div></div></div>'
+				} else {
+					cHtml2 += '<div class="vm-op swiper-slide" t='+ item.vr_key +'><div t='+ item.vr_key +' class="w" style="background-image: url(' + item.vr_image+'_xs)"><div class="text"><div class="t">' + item.estate_name + '</div></div></div></div>'
+				}
+				
+			})
+			document.getElementById('vr-content').innerHTML = cHtml2
+
+
+			vrUrl = 'https://pano.honglouplus.com?id=' + curVrKey +'&plus=1'
+			document.getElementById('fullVr').setAttribute('src', vrUrl)
+
+			if (str && str === 'bc') {
+				bc()
+			} 
+			
+		}
+	})
+}
+
+
+function dealNavCur () {
+	var tt = document.getElementsByClassName("vn-op");
+	for (i = 0; i < tt.length; i++) {
+		var ul = document.querySelectorAll('.vn-op')[i]
+		var curClass = ul.getAttribute('class').replace('cur', '')
+		if (ul.getAttribute('t') === curNav) curClass += ' cur'
+		ul.setAttribute('class', curClass)
+	}
+}
+function dealUrlCur () {
+	var tt2 = document.getElementsByClassName("vm-op");
+	for (i = 0; i < tt2.length; i++) {
+		var ul2 = document.querySelectorAll('.vm-op')[i]
+		var curClass2 = ul2.getAttribute('class').replace('cur', '')
+		if (ul2.getAttribute('t') === curVrKey) curClass2 += ' cur'
+		ul2.setAttribute('class', curClass2)
+	}
+}
+
+function dealVrUrl () {
+
+	swiperVrImg = new Swiper(".vr-main", {
+		loop: true,
+		speed: 2500,
+		slidesPerView: 7,
+		spaceBetween: 30,
+		centeredSlides : true,
+		watchSlidesProgress : true,
+		navigation: {
+			nextEl: '.swiper-button-next',
+			prevEl: '.swiper-button-prev',
+		},
+	});
+
+
+	var tt = document.getElementsByClassName("vm-op");
+	for (i = 0; i < tt.length; i++) {
+		var ul = document.querySelectorAll('.vm-op')[i]
+		handler = function(event){
+			var e = event || window.event;
+			var target = e.target || e.srcElement;
+			curVrKey = target.getAttribute('t') || ''
+			vrUrl = 'https://pano.honglouplus.com?id=' + curVrKey +'&plus=1'
+			document.getElementById('fullVr').setAttribute('src', vrUrl)
+			dealUrlCur()
+		};
+		if (window.addEventListener){
+			ul.addEventListener("click",handler,false)
+		}
+		else if (window.attachEvent){
+			ul.attachEvent("onclick",handler)
+		}
+	}
+	
+}
+
+
+
+var formData = new FormData();
+formData.append("dict_type", 'area_type');
+ajax({
+	type:'post',
+	url:'https://api.honglouplus.com/api/dict/info',
+	data: formData,
+	success:function(msg){
+		var res = JSON.parse(msg)
+        const data = res.data
+		navList = data.area_type || []
+		curNav = navList[0].dict_value
+		var cHtml = ''
+		navList.forEach(function (item) {
+			if (item.dict_value === curNav) {
+				cHtml += '<div class="swiper-slide vn-op cur" t=' + item.dict_value + '>' + item.dict_label + '</div>'
+			} else {
+				cHtml += '<div class="swiper-slide vn-op" t=' + item.dict_value + '>' + item.dict_label + '</div>'
+			}
+		})
+		document.getElementById('vr-nav').innerHTML = cHtml
+
+
+		// console.log(document.getElementsByClassName('vn-op'))
+
+
+		var tt = document.getElementsByClassName("vn-op");
+		for (i = 0; i < tt.length; i++) {
+			var ul = document.querySelectorAll('.vn-op')[i]
+			handler = function(event){
+				var e = event || window.event;
+				var target = e.target || e.srcElement;
+				curNav = target.getAttribute('t')
+				getVr('bc', function () {
+					// swiperVrImg.updateSlides()
+
+
+					dealVrUrl()
+				})
+				dealNavCur()
+
+
+
+			};
+			if (window.addEventListener){
+				ul.addEventListener("click",handler,false)
+			}
+			else if (window.attachEvent){
+				ul.attachEvent("onclick",handler)
+			}
+		}
+
+
+
+		getVr('bc', function () {
+
+
+			dealVrUrl()
+
+
+		})
+
+
+
+
+		// 
+
+
+
+
+
+
+
+		
+
+        var swiper = new Swiper(".mySwiper", {
+			slidesPerView: 8,
+			spaceBetween: 10,
+			// on:{
+			// 	click: function(){
+			// 	  alert('你点了Swiper');
+			// 	},
+			// },
+		  });
+
+
+		 
+
+
+
+
+
+		
+	}
+})
+
+
+
+
+
+
+
+
+
+
+

文件差异内容过多而无法显示
+ 12 - 0
src/swiper/swiper.min.css


文件差异内容过多而无法显示
+ 12 - 0
src/swiper/swiper.min.js


部分文件因为文件数量过多而无法显示