From 2a0ccebfac083867d84f49e2d69cd8aec048eb3e Mon Sep 17 00:00:00 2001
From: ChuShiZ <slw0830@163.com>
Date: Fri, 27 Sep 2024 23:32:05 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/home/active.vue |  21 ++++--
 pages/home/home.vue   | 168 +++++++++++++++++++++++++++---------------
 2 files changed, 124 insertions(+), 65 deletions(-)

diff --git a/pages/home/active.vue b/pages/home/active.vue
index 9dcd44e..689fce5 100644
--- a/pages/home/active.vue
+++ b/pages/home/active.vue
@@ -3,7 +3,7 @@
     <v-navigation-bar title-color="#333" background-color="#fff" title="活动列表">
     </v-navigation-bar>
     <view class="body">
-        <uni-card :title="item.name"  v-for="item in activeList">
+        <view class="card" :title="item.name"  v-for="(item, index) in activeList" :key="index">
           <text class="uni-body">{{ item.remark }}</text>
           <view slot="actions" class="card-actions">
             <picker v-if="item.type=='kkyl'" @change="bindPickerChange" :value="index" :range="array">
@@ -17,7 +17,7 @@
               <button @click="joinCzylActPrex(item)" type="primary">参加</button>
             </view>
           </view>
-        </uni-card>
+        </view>
 
     </view>
     <view>
@@ -264,14 +264,25 @@ export default {
     flex: 1;
     height: 0;
     box-sizing: border-box;
-    padding: 30 rpx 0;
-    margin: 0 32 rpx;
+    padding: 30rpx 0;
 
     display: flex;
     flex-direction: column;
-    row-gap: 20 rpx;
+    row-gap: 20rpx;
 
     overflow: auto;
+	
+	.card {
+		background-color: #fff;
+		margin: 0 32rpx;
+		padding: 30rpx;
+		border-radius: 12rpx;
+		
+		display: flex;
+		flex-direction: column;
+		row-gap: 10rpx;
+		
+	}
 
   }
 }
diff --git a/pages/home/home.vue b/pages/home/home.vue
index e690d5b..7c0dd3f 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -1,22 +1,21 @@
 <template>
 	<view class="container">
-		<VNavigationBar leftTitle="true" backgroundColor="transparent" title="车辆检测维修"></VNavigationBar>
+		<VNavigationBar style="position: relative;z-index: 99;" leftTitle="true" backgroundColor="rgba(0,0,0,0)" title-color="#fff" title="车辆检测维修"></VNavigationBar>
+		<template v-if="bannerList && bannerList.length > 0" >
+			<view class="bannerBg1"></view>
+			<view class="bannerBg" :style="{backgroundImage: `url(${bannerList[bannerIndex].url})`}"></view>
+			<view class="bannerBottom"></view>
+		</template>
 		<view class="body">
 			<view class="body-top-banner">
-<!--				<image class="banner" src="@/static/images/banner.jpg" mode="aspectFit" />-->
-<!--				<image class="banner" v-for="banner in bannerList" :key="banner.id" :src="banner.url" @click="toContent(banner.id)" mode="scaleToFill" />-->
-        <swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="2000"
-                duration="500">
-          <swiper-item v-for="banner in bannerList" :key="banner.id" @click="toContent(banner.id)">
-            <image class="banner" :src="banner.url" mode="scaleToFill" />
-          </swiper-item>
-          <!--          <swiper-item>-->
-          <!--            <view class="swiper-item uni-bg-green">B</view>-->
-          <!--          </swiper-item>-->
-          <!--          <swiper-item>-->
-          <!--            <view class="swiper-item uni-bg-blue">C</view>-->
-          <!--          </swiper-item>-->
-        </swiper>
+				<!--				<image class="banner" src="@/static/images/banner.jpg" mode="aspectFit" />-->
+				<!--				<image class="banner" v-for="banner in bannerList" :key="banner.id" :src="banner.url" @click="toContent(banner.id)" mode="scaleToFill" />-->
+				<swiper style="height: 400rpx;" class="swiper" circular indicator-dots="true" autoplay="true" interval="2000" duration="500"
+					@change="swiperChangeFun">
+					<swiper-item v-for="banner in bannerList" :key="banner.id" @click="toContent(banner.id)">
+						<image class="banner" :src="banner.url" mode="aspectFill" />
+					</swiper-item>
+				</swiper>
 			</view>
 			<view class="menus">
 				<view @click="gotoPage(menu)" v-for="(menu, index) in menus" :key="index" class="menu-item">
@@ -58,8 +57,8 @@
 <script>
 	import tabBarVue from '@/components/tabBar/tabBar.vue'
 	import VNavigationBar from '@/components/VNavigationBar.vue'
-  import request from "../../utils/request";
-  import config from "@/config";
+	import request from "../../utils/request";
+	import config from "@/config";
 	export default {
 		components: {
 			tabBarVue,
@@ -67,6 +66,7 @@
 		},
 		data() {
 			return {
+				bannerIndex: 0,
 				menus: [{
 						title: '预约记录',
 						icon: require('@/static/icons/homeMenuIcon/menu1.png'),
@@ -119,33 +119,37 @@
 				// 		image: ''
 				// 	},
 				// ]
-        shopList: [],
-        bannerList: [],
-        richTextHtml: null
-      }
+				shopList: [],
+				bannerList: [],
+				richTextHtml: null
+			}
+		},
+		onShow() {
+			this.getCompanyPage()
+			this.getBannerList()
 		},
-    onShow(){
-      this.getCompanyPage()
-      this.getBannerList()
-    },
 		methods: {
-      toContent(id){
-        uni.navigateTo({
-          url: "/pages/home/content?id=" + id,
-        })
-      },
-      async getBannerList(){
-        const res = await request({
-          url: '/userClient/banner/list?type=weixiu',
-          method: "get",
-        })
-        this.bannerList = res.data
-        this.bannerList.forEach(item => {
-          item.url = config.baseImageUrl + item.url
-        })
-      },
+			swiperChangeFun(e) {
+				console.log('e', e)
+				this.bannerIndex = e.detail.current
+			},
+			toContent(id) {
+				uni.navigateTo({
+					url: "/pages/home/content?id=" + id,
+				})
+			},
+			async getBannerList() {
+				const res = await request({
+					url: '/userClient/banner/list?type=weixiu',
+					method: "get",
+				})
+				this.bannerList = res.data
+				this.bannerList.forEach(item => {
+					item.url = config.baseImageUrl + item.url
+				})
+			},
 			gotoShopDetail(row) {
-        // 直接把那一行的数据转发过去
+				// 直接把那一行的数据转发过去
 				uni.navigateTo({
 					url: '/pages/shopDetail/shopDetail?info=' + encodeURIComponent(JSON.stringify(row))
 				})
@@ -155,20 +159,20 @@
 					url: menu.path
 				})
 			},
-      // 附近修理厂
-      async getCompanyPage(){
-        const res = await request({
-          url: "/userClient/base/company/page",
-          method: "get",
-          params:{
-            serviceCodes: "weixiu"
-          }
-        })
-        this.shopList = res.data.records
-        this.shopList.forEach(item => {
-          item['image'] = require("@/static/images/outImage.jpg")
-        })
-      }
+			// 附近修理厂
+			async getCompanyPage() {
+				const res = await request({
+					url: "/userClient/base/company/page",
+					method: "get",
+					params: {
+						serviceCodes: "weixiu"
+					}
+				})
+				this.shopList = res.data.records
+				this.shopList.forEach(item => {
+					item['image'] = require("@/static/images/outImage.jpg")
+				})
+			}
 		}
 	}
 </script>
@@ -177,14 +181,58 @@
 	.container {
 		height: 100%;
 		background-color: #fff;
-		background: linear-gradient(180deg, #0174F6 0%, rgba(1, 116, 246, 0) 100%);
-		background-size: 100% 600rpx;
-		background-repeat: no-repeat;
+		//background: linear-gradient(180deg, #0174F6 0%, rgba(1, 116, 246, 0) 100%);
 		color: #333333;
 		display: flex;
 		flex-direction: column;
+		position: relative;
+		
+		.bannerBg1 {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 800rpx;
+			background-color: #999;
+			filter: blur(20rpx);
+			z-index: 1;
+		}
+
+		.bannerBg {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 800rpx;
+			background-size: 100% 100%;
+			background-repeat: no-repeat;
+			/* 应用背景模糊滤镜 */
+			-webkit-backdrop-filter: blur(10px);
+			/* 兼容Webkit内核浏览器，如Chrome、Safari */
+			// backdrop-filter: blur(10px);
+			filter: blur(20rpx);
+			/* 设置透明度 */
+			opacity: 0.5;
+			
+			// -webkit-filter: brightness(150%);
+			// filter: brightness(150%);
+			
+			transition: all 0.5s;
+			z-index: 2;
+		}
+		.bannerBottom {
+			z-index: 3;
+			position: absolute;
+			left: 0;
+			top: 600rpx;
+			width: 100%;
+			height: 300rpx;
+			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%,  rgba(255, 255, 255, 1) 100%);
+		}
 
 		.body {
+			position: relative;
+			z-index: 10;
 			flex: 1;
 			height: 0;
 			overflow: auto;
@@ -199,7 +247,7 @@
 		.banner {
 			margin: 24rpx 0 0;
 			width: 686rpx;
-			height: 290rpx;
+			height: 100%;
 			border-radius: 12rpx 12rpx 12rpx 12rpx;
 			background-color: #0174F6;
 		}
@@ -343,4 +391,4 @@
 			}
 		}
 	}
-</style>
+</style>
\ No newline at end of file