164 lines
3.8 KiB
Vue
164 lines
3.8 KiB
Vue
<template>
|
||
<view style="background-color: #2c66a9; width: 100%; height: 5vh"
|
||
:style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }">
|
||
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="van-nav-bar">
|
||
<view class="van-nav-bar__content">
|
||
<view class="page-icon" @click="gotoBack">
|
||
<uni-icons color="#fff" type="back" size="26"></uni-icons>
|
||
<view>返回</view>
|
||
</view>
|
||
<view class="page-navbar">我的机动车</view>
|
||
</view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="card-car" v-if='true'>
|
||
<view class="car-top">
|
||
<image src="../../../static/R41.png" class="image"></image>
|
||
<view class="car-top-text">
|
||
<text style="font-size: 40rpx; font-weight: 600; color: ;">黑A1K5V1</text>
|
||
<text style="color: #808080;">*爽</text>
|
||
</view>
|
||
</view>
|
||
<view class="car-center">
|
||
<text style="margin-left: 40rpx; font-size: 38rpx; color: #3b3b3b;">机动车状态</text>
|
||
<view class="car-center-tag">
|
||
<text style="font-size: 20rpx;">正常</text>
|
||
</view>
|
||
</view>
|
||
<view class="car-bottom">
|
||
<uni-icons type="down" size="26" color="#b5b5b5"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="noData" v-else>
|
||
<view style="display: flex;flex-direction: column; align-items: center;">
|
||
<image src="../../../static/wangban/oe.png" style="width:250rpx; height: 200rpx"></image>
|
||
<text style="margin-top: 60rpx; font-weight: 600;">未查询到机动车信息</text>
|
||
</view>
|
||
<view class="warning" style="margin-top: 40rpx;">
|
||
若车...<a href="#" style="color: #2d65a5;">反馈</a>
|
||
</view>
|
||
</view>
|
||
<view class="warning" style="margin-top: 80rpx;">
|
||
本人车辆信息缺失或有误，请点击<a href="#" style="color: #2d65a5;">此处反馈</a>
|
||
</view>
|
||
</view>
|
||
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="van-nav-bar">
|
||
<view class="van-nav-bar__content" style="cursor: pointer;">
|
||
<view class="page-navbar">备案非本人机动车</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted
|
||
} from "vue";
|
||
const {
|
||
safeAreaInsets
|
||
} = uni.getSystemInfoSync();
|
||
const gotoBack = () => {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
};
|
||
const grade = ref(0);
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.van-nav-bar__content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 3rem;
|
||
background-color: #2c66a9;
|
||
color: #fff;
|
||
letter-spacing: 1.5px;
|
||
position: relative;
|
||
|
||
.page-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
|
||
.page-navbar {
|
||
font-size: 1.1rem;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
width: 689rpx;
|
||
padding: 20rpx 30rpx;
|
||
height: 85.7vh;
|
||
background-color: #f5f9fa;
|
||
|
||
.card-car {
|
||
border-radius: 10rpx;
|
||
background-color: #fff;
|
||
|
||
.car-top {
|
||
height: 160rpx;
|
||
border-bottom: 1rpx solid #f3f3f3;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.car-top-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
.car-center {
|
||
height: 110rpx;
|
||
border-bottom: 1rpx solid #f3f3f3;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.car-center-tag {
|
||
width: 100rpx;
|
||
height: 40rpx;
|
||
background-color: #c8eedd;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 40rpx;
|
||
color: #71d1a8;
|
||
border-radius: 5rpx;
|
||
}
|
||
}
|
||
|
||
.car-bottom {
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.image {
|
||
width: 120rpx;
|
||
height: 80rpx;
|
||
padding: 0 40rpx;
|
||
}
|
||
|
||
.warning {
|
||
display: inline-block;
|
||
font-size: 25rpx;
|
||
color: #929196;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.noData {
|
||
height: 85.7vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style> |