sunliwei/lanan-repair
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页调整

Browse Source
This commit is contained in:
ChuShiZ 2024-09-27 23:32:05 +08:00
parent 5a2e35198b
commit 2a0ccebfac
2 changed files with 124 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
pages/home/active.vue
View File

@ -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,15 +264,26 @@ 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;
}
}
}

90
pages/home/home.vue
View File

@ -1,21 +1,20 @@
<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">
<!-- <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="scaleToFill" />
<image class="banner" :src="banner.url" mode="aspectFill" />
</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>
</view>
<view class="menus">
@ -67,6 +66,7 @@
},
data() {
return {
bannerIndex: 0,
menus: [{
title: '预约记录',
icon: require('@/static/icons/homeMenuIcon/menu1.png'),
@ -124,17 +124,21 @@
richTextHtml: null
}
},
onShow(){
onShow() {
this.getCompanyPage()
this.getBannerList()
},
methods: {
toContent(id){
swiperChangeFun(e) {
console.log('e', e)
this.bannerIndex = e.detail.current
},
toContent(id) {
uni.navigateTo({
url: "/pages/home/content?id=" + id,
})
},
async getBannerList(){
async getBannerList() {
const res = await request({
url: '/userClient/banner/list?type=weixiu',
method: "get",
@ -156,11 +160,11 @@
})
},
// 附近修理厂
async getCompanyPage(){
async getCompanyPage() {
const res = await request({
url: "/userClient/base/company/page",
method: "get",
params:{
params: {
serviceCodes: "weixiu"
}
})
@ -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;
}