首页调整
This commit is contained in:
parent
5a2e35198b
commit
2a0ccebfac
@ -3,7 +3,7 @@
|
|||||||
<v-navigation-bar title-color="#333" background-color="#fff" title="活动列表">
|
<v-navigation-bar title-color="#333" background-color="#fff" title="活动列表">
|
||||||
</v-navigation-bar>
|
</v-navigation-bar>
|
||||||
<view class="body">
|
<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>
|
<text class="uni-body">{{ item.remark }}</text>
|
||||||
<view slot="actions" class="card-actions">
|
<view slot="actions" class="card-actions">
|
||||||
<picker v-if="item.type=='kkyl'" @change="bindPickerChange" :value="index" :range="array">
|
<picker v-if="item.type=='kkyl'" @change="bindPickerChange" :value="index" :range="array">
|
||||||
@ -17,7 +17,7 @@
|
|||||||
<button @click="joinCzylActPrex(item)" type="primary">参加</button>
|
<button @click="joinCzylActPrex(item)" type="primary">参加</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</uni-card>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
@ -264,14 +264,25 @@ export default {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
height: 0;
|
height: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 30 rpx 0;
|
padding: 30rpx 0;
|
||||||
margin: 0 32 rpx;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
row-gap: 20 rpx;
|
row-gap: 20rpx;
|
||||||
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 0 32rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 10rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,22 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<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">
|
||||||
<view class="body-top-banner">
|
<view class="body-top-banner">
|
||||||
<!-- <image class="banner" src="@/static/images/banner.jpg" mode="aspectFit" />-->
|
<!-- <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" />-->
|
<!-- <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"
|
<swiper style="height: 400rpx;" class="swiper" circular indicator-dots="true" autoplay="true" interval="2000" duration="500"
|
||||||
duration="500">
|
@change="swiperChangeFun">
|
||||||
<swiper-item v-for="banner in bannerList" :key="banner.id" @click="toContent(banner.id)">
|
<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>
|
||||||
<!-- <swiper-item>-->
|
</swiper>
|
||||||
<!-- <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>
|
||||||
<view class="menus">
|
<view class="menus">
|
||||||
<view @click="gotoPage(menu)" v-for="(menu, index) in menus" :key="index" class="menu-item">
|
<view @click="gotoPage(menu)" v-for="(menu, index) in menus" :key="index" class="menu-item">
|
||||||
@ -58,8 +57,8 @@
|
|||||||
<script>
|
<script>
|
||||||
import tabBarVue from '@/components/tabBar/tabBar.vue'
|
import tabBarVue from '@/components/tabBar/tabBar.vue'
|
||||||
import VNavigationBar from '@/components/VNavigationBar.vue'
|
import VNavigationBar from '@/components/VNavigationBar.vue'
|
||||||
import request from "../../utils/request";
|
import request from "../../utils/request";
|
||||||
import config from "@/config";
|
import config from "@/config";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
tabBarVue,
|
tabBarVue,
|
||||||
@ -67,6 +66,7 @@
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
bannerIndex: 0,
|
||||||
menus: [{
|
menus: [{
|
||||||
title: '预约记录',
|
title: '预约记录',
|
||||||
icon: require('@/static/icons/homeMenuIcon/menu1.png'),
|
icon: require('@/static/icons/homeMenuIcon/menu1.png'),
|
||||||
@ -119,33 +119,37 @@
|
|||||||
// image: ''
|
// image: ''
|
||||||
// },
|
// },
|
||||||
// ]
|
// ]
|
||||||
shopList: [],
|
shopList: [],
|
||||||
bannerList: [],
|
bannerList: [],
|
||||||
richTextHtml: null
|
richTextHtml: null
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getCompanyPage()
|
||||||
|
this.getBannerList()
|
||||||
},
|
},
|
||||||
onShow(){
|
|
||||||
this.getCompanyPage()
|
|
||||||
this.getBannerList()
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
toContent(id){
|
swiperChangeFun(e) {
|
||||||
uni.navigateTo({
|
console.log('e', e)
|
||||||
url: "/pages/home/content?id=" + id,
|
this.bannerIndex = e.detail.current
|
||||||
})
|
},
|
||||||
},
|
toContent(id) {
|
||||||
async getBannerList(){
|
uni.navigateTo({
|
||||||
const res = await request({
|
url: "/pages/home/content?id=" + id,
|
||||||
url: '/userClient/banner/list?type=weixiu',
|
})
|
||||||
method: "get",
|
},
|
||||||
})
|
async getBannerList() {
|
||||||
this.bannerList = res.data
|
const res = await request({
|
||||||
this.bannerList.forEach(item => {
|
url: '/userClient/banner/list?type=weixiu',
|
||||||
item.url = config.baseImageUrl + item.url
|
method: "get",
|
||||||
})
|
})
|
||||||
},
|
this.bannerList = res.data
|
||||||
|
this.bannerList.forEach(item => {
|
||||||
|
item.url = config.baseImageUrl + item.url
|
||||||
|
})
|
||||||
|
},
|
||||||
gotoShopDetail(row) {
|
gotoShopDetail(row) {
|
||||||
// 直接把那一行的数据转发过去
|
// 直接把那一行的数据转发过去
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/shopDetail/shopDetail?info=' + encodeURIComponent(JSON.stringify(row))
|
url: '/pages/shopDetail/shopDetail?info=' + encodeURIComponent(JSON.stringify(row))
|
||||||
})
|
})
|
||||||
@ -155,20 +159,20 @@
|
|||||||
url: menu.path
|
url: menu.path
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 附近修理厂
|
// 附近修理厂
|
||||||
async getCompanyPage(){
|
async getCompanyPage() {
|
||||||
const res = await request({
|
const res = await request({
|
||||||
url: "/userClient/base/company/page",
|
url: "/userClient/base/company/page",
|
||||||
method: "get",
|
method: "get",
|
||||||
params:{
|
params: {
|
||||||
serviceCodes: "weixiu"
|
serviceCodes: "weixiu"
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.shopList = res.data.records
|
this.shopList = res.data.records
|
||||||
this.shopList.forEach(item => {
|
this.shopList.forEach(item => {
|
||||||
item['image'] = require("@/static/images/outImage.jpg")
|
item['image'] = require("@/static/images/outImage.jpg")
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -177,14 +181,58 @@
|
|||||||
.container {
|
.container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
background: linear-gradient(180deg, #0174F6 0%, rgba(1, 116, 246, 0) 100%);
|
//background: linear-gradient(180deg, #0174F6 0%, rgba(1, 116, 246, 0) 100%);
|
||||||
background-size: 100% 600rpx;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
color: #333333;
|
color: #333333;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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 {
|
.body {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 0;
|
height: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
@ -199,7 +247,7 @@
|
|||||||
.banner {
|
.banner {
|
||||||
margin: 24rpx 0 0;
|
margin: 24rpx 0 0;
|
||||||
width: 686rpx;
|
width: 686rpx;
|
||||||
height: 290rpx;
|
height: 100%;
|
||||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
background-color: #0174F6;
|
background-color: #0174F6;
|
||||||
}
|
}
|
||||||
@ -343,4 +391,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user