提交 d1c05805 authored 作者: eiei's avatar eiei

zsd

上级 741ef39e
......@@ -100,10 +100,30 @@
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle":"custom"
"navigationStyle":"custom"
}
}
,{
"path" : "pages/parkingSpace/parkingSpace",
"style" :
{
"navigationBarTitleText": "我的车位",
"enablePullDownRefresh": false,
"navigationStyle":"custom"
}
}
,{
"path" : "pages/parkingBind/parkingBind",
"style" :
{
"navigationBarTitleText": "我的车辆",
"enablePullDownRefresh": false,
"navigationStyle":"custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
......
......@@ -27,7 +27,8 @@
},{
name:"我的住户"
},{
name:"我的车位"
name:"我的车位",
toUrl:'../parkingSpace/parkingSpace'
},{
name:"我的账单"
},{
......
<template>
<view style="background-color: #F1F1F1;height: 100vh;">
<van-nav-bar title="我的车辆" :left-text="null" left-arrow @click-left="navBack" style="background-color: white;" />
<div class="blue-board"></div>
<div class="add-box">
<van-button class="add-car" round type="default" icon="plus" size="small">添加车辆
</van-button>
</div>
<div class="view-body">
<div class="car-card" v-for="(item,index) in carList">
<image :src="item.url"></image>
<div style="width: 100%;position: relative;">
<div class="top">
<h1>{{item.id}}</h1>
<div class="state-tip">{{item.state}}</div>
</div>
<div class="line-box">
<van-divider dashed/>
</div>
<div class="tips-box">
<input v-model="item.brand"/>
<input v-model="item.model"/>
<input v-model="item.color"/>
</div>
<div class="car-details">
<van-cell title="车辆保险" :value="item.carInsurance" style="flex-wrap: nowrap;" />
<van-cell title="年审时间" :value="item.reviewTime" />
</div>
</div>
</div>
</div>
</view>
</template>
<script>
export default {
data() {
return {
carList:[{
id:"鲁A·888888",
url:"../../static/img/zsd/dazhong.png",
state:"审核中",
brand:"一汽大众",
model:"迈腾",
color:"黑色",
carInsurance:"2022年1月31号",
reviewTime:"2022年1月31号"
},{
id:"鲁A·188888",
url:"../../static/img/zsd/parking.png",
state:"审核中",
brand:"保时捷",
model:"帕拉梅拉",
color:"棕色",
carInsurance:"2022年1月31号",
reviewTime:"2022年1月31号"
}]
}
},
onLoad() {
},
methods: {
navBack(){
uni.navigateBack({
delta: 1
})
},
}
}
</script>
<style lang="less" scoped>
.blue-board{
background-color: #009AFF;
border-radius: 0 0 10upx 10upx;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 500upx;
}
.add-box{
height: 250upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 30upx;
.add-car{
/deep/ button{
background-color: rgba(255,255,255,0.4);
color: white;
border: none;
font-weight: 700;
padding: 0 50upx;
.van-icon-plus:before {
font-size: 30upx;
}
}
}
}
.view-body{
position: relative;
z-index: 999;
display: flex;
align-items: center;
flex-direction: column;
.car-card{
background-color: white;
border-radius: 10upx;
width: 90%;
margin-bottom: 20upx;
font-size: 26upx;
padding: 10upx;
display: flex;
image{
width: 100upx;
height: 100upx;
margin-right: 20upx;
}
.top{
display: flex;
align-items: center;
height: 100upx;
h1{
font-size: 40upx;
font-weight: 700;
margin: 0 30upx;
}
.state-tip{
background-color: red;
color: white;
border-radius: 60upx;
width: 140upx;
text-align: center;
height: 50upx;
line-height: 50upx;
}
}
.line-box{
display: flex;
flex-direction: row-reverse;
/deep/ van-divider{
width: 95%;
.van-divider{
width: 100%;
padding: 0;
margin: 0;
}
}
}
.tips-box{
margin-top: 20upx;
display: flex;
input{
border: 1upx solid #007AFF;
border-radius: 60upx;
color: #007AFF;
width: 140upx;
text-align: center;
margin-right: 30upx;
height: 36upx;
}
}
.car-details{
margin-top: 30upx;
/deep/ .van-cell{
font-size: 30upx;
padding: 5upx 15upx;
.van-cell__value{
color: black;
}
}
/deep/ .van-cell::after{
border-bottom: none;
}
}
}
}
</style>
<template>
<view style="background-color: #F1F1F1;height: 100vh;">
<van-nav-bar title="我的车位" :left-text="null" left-arrow @click-left="navBack" style="background-color: white;" />
<div class="parking-swiper">
<swiper class="swiper-contianer" interval='3000' circular='true' duration='500' previous-margin="150rpx"
next-margin="150rpx" @change="swiperChange" :current="swiperIndex">
<block v-for="(item,index) in parkingList" :key="index">
<swiper-item class="swiper-item">
<div>
<div class="parking-show" :class="{ active: swiperIndex == index }">
<div class="number-box">
<h2>{{item.Number}}</h2>
</div>
<div class="add-box">
<image class="parking-image" :src='item.picture'></image>
<van-button class="add-parking" round type="default" icon="plus" size="small">添加车位
</van-button>
</div>
</div>
</div>
</swiper-item>
</block>
</swiper>
</div>
<div class="parking-card">
<van-cell-group inset style="padding-bottom: 20upx;">
<van-cell class="parking-header" title="车位信息">
<template #default>
<van-button class="add-parking" round size="mini" @click="bindCar">绑定车辆</van-button>
</template>
</van-cell>
<van-cell title="车位位置" :value="parkingList[swiperIndex].position!==''?parkingList[swiperIndex].position:'-'" />
<van-cell title="车位号" :value="parkingList[swiperIndex].Id!==''?parkingList[swiperIndex].Id:'-'" />
<van-cell title="车位类型" :value="parkingList[swiperIndex].type!==''?parkingList[swiperIndex].type:'-'" />
<van-cell title="车位尺寸" :value="parkingList[swiperIndex].size!==''?parkingList[swiperIndex].size:'-'" />
<van-cell title="绑定车辆" :value="parkingList[swiperIndex].carId!==''?parkingList[swiperIndex].carId:'-'" />
</van-cell-group>
</div>
</view>
</template>
<script>
export default {
data() {
return {
swiperIndex: 0,
parkingList: [{
Number: '111',
picture: '../../static/img/zsd/parking.png',
position: 'xx市xx区xx镇xx小区',
Id: '111',
type: "私家",
size: '250*500',
carId: '浙A8888'
}, {
Number: '222',
picture: '../../static/img/zsd/parking.png',
position: 'xx市xx区xx镇xx小区',
Id: '222',
type: "私家",
size: '250*500',
carId: '浙A8888'
}, {
Number: '333',
picture: '../../static/img/zsd/parking.png',
position: 'xx市xx区xx镇xx小区',
Id: '333',
type: "私家",
size: '250*500',
carId: '浙A8888'
}]
}
},
onLoad() {
},
methods: {
navBack(){
uni.navigateBack({
delta: 1
})
},
swiperChange(event) {
this.swiperIndex = event.detail.current
},
bindCar(){
uni.navigateTo({
url:"../parkingBind/parkingBind"
})
}
}
}
</script>
<style lang="less" scoped>
div {
margin: 0;
padding: 0;
}
.add-parking {
/deep/ button {
// height: 60upx;
background-color: #009AFF;
color: white;
.van-icon-plus:before {
font-size: 20upx;
}
}
}
.parking-swiper {
.swiper-contianer {
height: 550upx;
.swiper-item {
display: flex;
align-items: center;
justify-content: center;
div {
margin: 10upx 5upx;
.parking-show {
background-color: white;
width: 420upx;
height: 480upx;
border-radius: 10upx;
transform: scale(0.8);
box-shadow: 0upx 5upx 10upx 10upx rgba(0, 0, 0, 0.2);
&.active {
transform: scale(1);
}
.number-box {
height: 100upx;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10upx 10upx 0 0;
// background:linear-gradient(90deg,#fff 0%,#bbb 49%,#bbb 51%,#fff 100%);
background: linear-gradient(0, #ffffFF -200%, #007AFF 100%);
h2 {
color: white;
font-size: 40upx;
}
}
.add-box {
margin: 0;
padding: 0;
// background-color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.parking-image {
width: 350upx;
height: 280upx;
margin: 10upx;
}
.add-parking {
/deep/ button {
height: 60upx;
}
}
}
}
}
}
}
}
.parking-card{
padding-bottom: 10upx;
.parking-header{
/deep/ .van-cell{
padding: 15upx;
.van-cell__title{
color: black;
}
}
/deep/ .van-cell::after{
border-bottom: 10upx dotted #999999;
right: 0;
left: 0;
}
}
/deep/ .van-cell{
padding: 5upx 15upx;
.van-cell__title{
color: #808080;
}
}
/deep/ .van-cell::after{
border-bottom: none;
}
}
</style>
This source diff could not be displayed because it is too large. You can view the blob instead.
差异被折叠。
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论