dykj-outsource-12123/pages/index/components/myCar.vue
2024-06-28 14:36:13 +08:00

173 lines
3.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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: ;">黑A00000</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 class="van-nav-bar positionBottom">
<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,
});
};
onLoad((option)=>{
console.log(option)
})
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;
}
.positionBottom {
position: fixed;
bottom: 0;
width: 100vw;
}
</style>