添加适配移动端，添加复制文本

index.html

@@ -24,8 +24,10 @@
     <div class="l-footer">
       <div class="lf-wrap">
         <div class="content">
+ 
           
 
+<button class="vr-more"  data-clipboard-text="18100792072">楼市咨询：洪楼Plus巴老师(电话微信)18100792072[复制]</button>
 
 
 
@@ -54,12 +56,17 @@
 </div>
 
 
+
+
+
+
         </div>
       </div>
     </div>
   </div>
   <!-- Swiper JS -->
   <script src="./src/swiper/swiper.min.js"></script>
+  <script src="./src/js/clipboard.min.js"></script>
   <script src="./src/js/main.js"></script>
 </body>
 </html>

src/css/main.css

@@ -41,8 +41,8 @@
   border-radius: 5px;
   cursor: pointer;
   height: 30px;
-  margin: 0 6px;
-  padding: 0 10px;
+  /* margin: 0 6px; */
+  /* padding: 0 10px; */
   color: rgb(199, 199, 199);
 
   /* Center slide text vertically */
@@ -148,4 +148,64 @@
   height: 269px;
   background: url(../images/card.jpg) no-repeat;
   border-radius: 0 0 0 20px;
+}
+
+
+
+
+.vr-more {
+  color: #f6b64c;
+  font-weight: bold;
+  font-size: 12px;
+  margin: 0;
+  margin-bottom: 6px;
+	padding: 0;
+	border: 0;
+	outline: none;
+  background: none;
+  border-radius: 0;
+  -webkit-appearance: none;
+  display: none;
+}
+
+
+
+
+
+
+
+
+
+
+@media (max-width: 767px) {
+  .vr-more {
+    display: block;
+  }
+  .scoped-fixed-rt {
+    display: none;
+  }
+  .lf-wrap {
+    width: 100%;
+    height: 144px;
+    padding: 10px;
+  }
+  .vr-main {
+    margin-top: 10px;
+  }
+  .vn-op {
+    padding: 0;
+  }
+  .vn-op.cur {
+    background: #f6b64c;
+  }
+  .vm-op {
+    width: 56px;
+    height: 56px;
+  }
+  .vm-op.cur {
+    border-color: #f6b64c;
+  }
+  .swiper-button-next, .swiper-button-prev {
+    display: none;
+  }
 }

src/js/main.js

@@ -87,17 +87,19 @@ function dealUrlCur () {
 function dealVrUrl () {
 
 	swiperVrImg = new Swiper(".vr-main", {
-		loop: true,
-		speed: 1000,
-		slidesPerView: 7,
-		spaceBetween: 30,
-		centeredSlides : true,
-		watchSlidesProgress : true,
+		// loop: true,
+		// speed: 1000,
+		slidesPerView: document.body.clientWidth > 700 ? 7 : 6,
+		spaceBetween: document.body.clientWidth > 700 ? 20 : 6,
+		slidesOffsetBefore: 0,
+		// centeredSlides : true,
+		// watchSlidesProgress : true,
 		navigation: {
 			nextEl: '.swiper-button-next',
 			prevEl: '.swiper-button-prev',
 		},
 	});
+	swiperVrImg.translateTo(0, 100)
 
 
 	var tt = document.getElementsByClassName("vm-op");
@@ -136,11 +138,14 @@ ajax({
 		curNav = navList[0].dict_value
 		var cHtml = ''
 		navList.forEach(function (item) {
-			if (item.dict_label === '宜春' || item.dict_label === '安义县') return
-			if (item.dict_value === curNav) {
-				cHtml += '<div class="swiper-slide vn-op cur" t=' + item.dict_value + '>' + item.dict_label + '</div>'
+			if (item.dict_label === '宜春' || item.dict_label === '安义县' || item.dict_label === '扬子洲' || item.dict_label === '九望新城'|| item.dict_label === '蒋巷'|| item.dict_label === '东站新城'|| item.dict_label === '赣江新区'|| item.dict_label === '望悦湖'|| item.dict_label === '瑶湖新城') {
+				
 			} else {
-				cHtml += '<div class="swiper-slide vn-op" t=' + item.dict_value + '>' + item.dict_label + '</div>'
+				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
@@ -199,10 +204,10 @@ ajax({
 		
 
         var swiper = new Swiper(".mySwiper", {
-			loop: true,
-			speed: 1000,
-			slidesPerView: 8,
-			spaceBetween: 10,
+			// loop: true,
+			// speed: 1000,
+			slidesPerView: document.body.clientWidth > 700 ? 8 : 4,
+			spaceBetween: document.body.clientWidth > 700 ? 10 : 6,
 			// on:{
 			// 	click: function(){
 			// 	  alert('你点了Swiper');
@@ -211,8 +216,8 @@ ajax({
 		  });
 
 
-		 
 
+		  var clipboard= new ClipboardJS('.vr-more')
 
 
 
@@ -227,7 +232,3 @@ ajax({
 
 
 
-
-
-
-