From fb1577cf51f0785cad842a1ec7748e1b723a7a5f Mon Sep 17 00:00:00 2001
From: zhengshuiqi <zhengshiqi@xingtongworld.com>
Date: Sat, 26 Nov 2022 16:25:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DHONLIST2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                        |   1 +
 components/swipers/swipers.vue | 136 +++++++++++++++++++++++++++++++++
 pages.json                     |   9 +++
 pages/account/index.vue        |   2 +-
 pages/category/index.vue       |   3 +-
 pages/index/index.vue          |  75 ++++++++++--------
 6 files changed, 192 insertions(+), 34 deletions(-)
 create mode 100644 components/swipers/swipers.vue

diff --git a/App.vue b/App.vue
index e2799f8..207eaef 100644
--- a/App.vue
+++ b/App.vue
@@ -131,4 +131,5 @@
 	   page{
 		   overflow-x: hidden;
 	   }   
+	   
 </style>
diff --git a/components/swipers/swipers.vue b/components/swipers/swipers.vue
new file mode 100644
index 0000000..d32cfdb
--- /dev/null
+++ b/components/swipers/swipers.vue
@@ -0,0 +1,136 @@
+<template>
+	<view>
+		<view class="top-swiper">
+			 <view class="bg">
+				 <view class="placeholder"></view>
+				 <view class="image">
+					 <image :src="swiper.list[swiper.index]" mode="aspectFill"></image>
+				 </view>
+			 </view>
+			 <view class="box">
+				<view style="height: 44px;"></view>
+			 	<swiper class="swiper" :previous-margin="swiper.margin" :next-margin='swiper.margin' :circular="true" @change="swiperChange">
+			 		<swiper-item v-for="(item,index) in swiper.list" :key="index">
+			 			<image class='le-img' :src='item' :class="{'le-active':swiper.index == index}"></image>
+			 		</swiper-item>
+			 	</swiper> 
+			 </view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				swiper: {
+					margin: "150rpx",
+					index: 0,
+					list: [
+						"/static/images/douyin/0.jpg",
+						"/static/images/douyin/4.jpg",
+						"/static/images/douyin/7.jpg",
+					]
+				}
+			}
+		},
+		components: {
+
+		},
+		mounted() {
+
+		},
+		methods: {
+			//swiper滑动事件
+			swiperChange: function(e) {
+				this.swiper.index = e.detail.current;
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.top-swiper{
+		margin-bottom: 30rpx; 
+		
+		.bg{
+			padding-top: var(--status-bar-height);
+			box-sizing: content-box;
+			width: 100%;
+			position: relative;
+			
+			.placeholder{
+				box-sizing: content-box;
+				padding-top: 600rpx;
+				height: 44px;
+			}
+			
+			.image{
+				box-sizing: content-box;
+				position: absolute;
+				z-index: 1;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				overflow: hidden;
+				
+				&::after{
+					content: '';
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					z-index: 1;
+					bottom: 0;
+					left: 0;
+					height: 65%;
+					background-image: linear-gradient(to bottom ,transparent, #FFF);
+				}
+				
+				> image{
+					position: absolute;
+					box-sizing: content-box;
+					padding: 60px;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 80%;
+					top: -60px;
+					left: -60px;
+					filter: blur(50px);
+				}
+			}
+		}
+		
+		.box{
+			padding-top: var(--status-bar-height);
+			box-sizing: content-box;
+			position: absolute;
+			z-index: 5;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: auto;
+		}
+		
+		.swiper {
+			height: 600rpx;
+			margin: 0 20rpx;
+		
+			.le-img {
+				width: 100%;
+				height: 100%;
+				display: block;
+				transform: scale(0.9);
+				transition: transform 0.3s ease-in-out 0s;
+				border-radius: 4px;
+		
+				&.le-active {
+					transform: scale(1);
+				}
+			}
+		
+		}
+	}
+	
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index ded9ff7..e7490eb 100644
--- a/pages.json
+++ b/pages.json
@@ -367,6 +367,15 @@
 		    }
 		    
 		}
+        ,{
+            "path" : "components/swipers/swipers",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	
 	"globalStyle": {
diff --git a/pages/account/index.vue b/pages/account/index.vue
index 426c8da..322fb9c 100644
--- a/pages/account/index.vue
+++ b/pages/account/index.vue
@@ -509,7 +509,7 @@
 	}
 
 	.account_info {
-		background-color: #000000 !important;
+		// background-color: #000000 !important;
 
 		border-bottom: 13.33rpx #F7F7F7 solid;
 		display: flex;
diff --git a/pages/category/index.vue b/pages/category/index.vue
index 57d8101..fbabc16 100644
--- a/pages/category/index.vue
+++ b/pages/category/index.vue
@@ -529,7 +529,8 @@
 			
 			.good_item_img{
 				display: block;
-				background-color: #999999;
+				// background-color: #999999;
+				background-color: transparent;
 				width: 146.67rpx;
 				height: 146.67rpx;
 				margin-bottom: 22rpx;
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 2de2390..c273e8c 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -349,6 +349,7 @@
 			handlechange(e) {
 				this.mycurrent = e.detail.current
 			},
+
 			change(e) {
 				this.index = e
 				let tarbar = this.tarbar
@@ -615,7 +616,8 @@
 								console.log(item.zone_more_link)
 								const i = item.zone_more_link.indexOf('gid=')
 								// console.log(i)
-								const ids = item.zone_more_link.substring(i + 4, item.zone_more_link
+								const ids = item.zone_more_link.substring(i + 4, item
+									.zone_more_link
 									.length)
 								// console.log(ids)
 								// this.bestlist.push(item.blocks)
@@ -1080,7 +1082,8 @@
 										success: (image) => {
 											// //////console.log(res.block_pic)
 											// 计算图片渲染高度
-											let showH = (50 * image.height) / image.width
+											let showH = (50 * image.height) / image
+												.width
 											// 判断左右盒子高度
 											if (that.leftH <= that.rightH) {
 												that.leftList.push(res)
@@ -1161,7 +1164,7 @@
 				//console.log(item,'item')
 				////console.log(item.block_link.includes('dope.youhui'))
 				let goodid
-
+				
 				if (item.goodid) {
 
 					uni.navigateTo({
@@ -1417,43 +1420,37 @@
 				</view>
 			</view> -->
 				<!-- HOT SELLS 2 -->
-				<scroll-view class="spike1 page_padding" scroll-x="true" @change="handlechange" :show-scrollbar="false"
+				<!-- <scroll-view class="spike1 page_padding" scroll-x="true" @change="handlechange" :show-scrollbar="false"
 					:indicator-dots="true" :circular="true" :interval="3000" :duration="1000"
 					v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'" :current="mycurrent">
 					<view class="spike1_item padding_honlist2" v-for="(item1,index1) in item.blocks"
 						:key="item1.block_id">
-						<view :class="['swiper-item',index1==mycurrent ? 'active' : '']">
-							<!-- class="item_img"> -->
+						<view :class="['swiper-item',index==mycurrent ? 'active' : '']">
 							<image :src="item1.block_pic" mode=""
 								:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
 								@click="imgTo(item1)"></image>
 						</view>
 					</view>
-					<!-- 轮播图 -->
-					<!-- <view v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'" :current="mycurrent">
-						<swiper v-for="(item1,index1) in item.blocks" :key="item1.block_id" style="height: 600rpx;" previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent"   :indicator-dots="true"  :circular="true" :interval="3000" :duration="1000">
-							<swiper-item v-for="i,index in 10" :key="i">
-								<view :class="['swiper-items',index==mycurrent ? 'active' : '']">
-									<image :src="item1.block_pic" mode=""
-												:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
-												@click="imgTo(itesm1)"></image>
-					<!-- <view> -->
-					<!-- previous-margin指的是当前图片的左边框距离屏幕最左边的距离 -->
-					<!-- <swiper class="spike1 page_padding" scroll-x="true" :show-scrollbar="false"
-							v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'" style="height: 600rpx;"
-							previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent"
-							:indicator-dots="true" :circular="true" :interval="3000" :duration="1000">
-							<swiper-item v-for="(item1,index1) in item.blocks" :key="item1.block_id"> -->
-					<!-- v-for="(item1,index1) in item.blocks" :key="item1.block_id"> -->
-					<!--   v-for="i,index in 10" :key="i" -->
-					<!-- <view :class="['swiper-items',index==mycurrent ? 'active' : '']">
-									<img :src="item1.block_pic" mode=""
-										:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
-										@click="imgTo(item1)">
-								</view>
+				</scroll-view> -->
+				<!-- class="item_img"> -->
+				<!-- 测试1 -->
+				<scroll-view class="spike1 page_padding" scroll-x="true" @change="handlechange" :show-scrollbar="false"
+					:indicator-dots="true" :circular="true" :interval="3000" :duration="1000"
+					v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'" :current="mycurrent">
+						<swiper style="height: 600rpx;" previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent"
+							:indicator-dots="false" :circular="true" :interval="3000" :duration="1000">
+							<swiper-item v-for="item1,index1 in item.blocks" :key="item1.block_id">
+									<view :class="['swiper-items',index1==mycurrent ? 'active' : '']">
+										<image :src="item1.block_pic" mode=""
+											:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:'100%'}"
+											@click="imgTo(item1)"></image>
+								<!-- 		<image :src="item1.block_pic" mode=""
+											:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
+											@click="imgTo(itesm1)"></image> -->
+									</view>
 							</swiper-item>
 						</swiper>
-					</view> -->
+					<!-- </view> -->
 				</scroll-view>
 				<!-- 标题 -->
 				<!-- <view class="index_title page_padding">
@@ -1469,6 +1466,7 @@
 						<view class="item_img "
 							:style="{width:(item.zone_code=='HONLIST3')?280+'rpx':'',height:item.zone_column +'rpx'}">
 							<image :src="item1.block_pic" mode="" @click="imgTo(item1)"></image>
+							<a :href="item1.block_link"></a>
 						</view>
 						<view class="spike1_item_bottom">
 							<text>{{item1.block_title}}</text>
@@ -1665,7 +1663,7 @@
 		// 像这种多张轮播图同时出现在一屏的情况下就不要指定width了，不然你会发现previous-margin和 next-margin会出现想不到的效果
 		// 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了
 		// width: 450rpx;
-		height: 85%;
+		height: 100%;
 		transform: scale(0.8);
 		transition: all 0.5s ease;
 		text-align: center;
@@ -1675,9 +1673,21 @@
 			transform: scale(1);
 		}
 
-		.uni-swiper-dots {
-			display: none;
+		/deep/ .uni-swiper-dots {
+			display: none !important;
+		}
+		uni-swiper .uni-swiper-dots {
+			display: none !important;
+			z-index: -1 !important;
 		}
+		/deep/ .uni-swiper .uni-swiper-dots-horizontal {
+			display: none !important;
+		}
+		uni-swiper .uni-swiper-dot {
+			z-index: -1 !important;
+			display: none !important;
+		}
+		
 	}
 
 	page {
@@ -2640,4 +2650,5 @@
 	// 		width: 100%;
 	// 	}
 	// }
+
 </style>