This commit is contained in:
sundongyu 2024-06-26 18:04:38 +08:00
commit 67a6640500

View File

@ -1,196 +1,191 @@
<template>
<view 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="business">
<view class="business-top">
<view style="display: flex; align-items: center">
<image src="../../../static/renling.png" class="image"></image>
<text style="margin-left: 30rpx; font-weight: 500; font-size: 32rpx">代办驾驶证业务</text>
</view>
<view style="font-size: 24rpx; color: #858585">
{{ '共一项代办业务' }}
</view>
</view>
<view class="business-bottom">
<view class="tag">
<text style="margin-left: 10rpx">待办</text>
</view>
<view class="">期满换证</view>
<view style="font-size: 28rpx; color: #666666; margin-left: 20rpx">请尽快更换驾驶证</view>
<view style="width: 15%">
<uni-tag text="详情" type="primary" size="small" inverted></uni-tag>
<view class="">
<view 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="driving">
<view class="driving-content">
<view v-for="(item, index) in drivingData" :key="idnex">
<view class="driving-item">
<text style="font-weight: 600; margin-bottom: 10rpx; font-size: 26rpx">{{ item.title }}</text>
<text style="font-size: 26rpx; color: #5d5d5d">{{ item.content }}</text>
<view class="content">
<view class="business">
<view class="business-top">
<view style="display: flex; align-items: center">
<image src="../../../static/认领.png" class="image"></image>
<text style="margin-left: 30rpx; font-weight: 500; font-size: 32rpx">代办驾驶证业务</text>
</view>
<view style="font-size: 24rpx; color: #858585">
{{ "共一项代办业务" }}
</view>
</view>
<view class="business-bottom">
<view class="tag">
<text style="margin-left: 10rpx">待办</text>
</view>
<view class=""> 期满换证 </view>
<view style="font-size: 28rpx; color: #666666; margin-left: 20rpx"> 请尽快更换驾驶证 </view>
<view style="width: 15%">
<uni-tag text="详情" type="primary" size="small" inverted></uni-tag>
</view>
</view>
</view>
<view class="driving-print">
<view>
<view id="lineChartRef" :style="{ width: '200px', height: '200px' }" />
<view class="driving">
<view class="driving-content">
<view v-for="(item, index) in drivingData" :key="idnex">
<view class="driving-item">
<text style="font-weight: 600; margin-bottom: 10rpx; font-size: 26rpx">{{ item.title }}</text>
<text style="font-size: 26rpx; color: #5d5d5d">{{ item.content }}</text>
</view>
</view>
</view>
<view class="driving-print"> </view>
</view>
</view>
<view class="drivingList">
<view class="item">
<text style="margin-left: 40rpx; font-weight: 550">登录手机号码</text>
<text style="margin-right: 20rpx">{{ '151****9198' }}</text>
<view class="drivingList">
<view class="item">
<text style="margin-left: 40rpx; font-weight: 550">登录手机号码</text>
<text style="margin-right: 20rpx">{{ "151****9198" }}</text>
</view>
<view class="item">
<text style="margin-left: 40rpx; font-weight: 550">驾驶证电子版</text>
<text style="margin-right: 20rpx">
<uni-icons color="#a8a8a8" type="right" size="26"></uni-icons>
</text>
</view>
<view class="item">
<text style="margin-left: 40rpx; font-weight: 550">安全驾驶记录</text>
<text style="margin-right: 20rpx">
<uni-icons color="#a8a8a8" type="right" size="26"></uni-icons>
</text>
</view>
<view class="item">
<text style="margin-left: 40rpx; font-weight: 550">驾驶证实习期信息</text>
<text style="margin-right: 20rpx">
<uni-icons color="#a8a8a8" type="right" size="26"></uni-icons>
</text>
</view>
<view class="item">
<text style="margin-left: 40rpx; font-weight: 550">我的违法</text>
<text style="margin-right: 20rpx">
<uni-icons color="#a8a8a8" type="right" size="26"></uni-icons>
</text>
</view>
<text class="warning">当前您的驾驶证积分清除截止时间为2024年08月30日零点</text>
</view>
<view class="item">
<text style="margin-left: 40rpx; font-weight: 550">驾驶证电子版</text>
<text style="margin-right: 20rpx">
<uni-icons color="#a8a8a8" type="right" size="26"></uni-icons>
</text>
</view>
<view class="item">
<text style="margin-left: 40rpx; font-weight: 550">安全驾驶记录</text>
<text style="margin-right: 20rpx">
<uni-icons color="#a8a8a8" type="right" size="26"></uni-icons>
</text>
</view>
<view class="item">
<text style="margin-left: 40rpx; font-weight: 550">驾驶证实习期信息</text>
<text style="margin-right: 20rpx">
<uni-icons color="#a8a8a8" type="right" size="26"></uni-icons>
</text>
</view>
<view class="item">
<text style="margin-left: 40rpx; font-weight: 550">我的违法</text>
<text style="margin-right: 20rpx">
<uni-icons color="#a8a8a8" type="right" size="26"></uni-icons>
</text>
</view>
<text class="warning">当前您的驾驶证积分清除截止时间为2024年08月30日零点</text>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const gotoBack = () => {
uni.navigateBack({
delta: 1
});
};
const drivingData = [
{
title: '驾驶证号',
content: '2302**********1229'
},
{
title: '准驾车型',
content: 'C1'
},
{
title: '驾驶证有效期止',
content: '2024-08-30'
},
{
title: '审核有效期止',
content: '2024-08-30'
},
{
title: '下一清分日期',
content: '2024-08-30'
},
{
title: '下一体检日期',
content: '2024-08-30'
},
{
title: '数据更新时间',
content: '2023-08-30'
}
];
import {
ref,
onMounted
} from 'vue'
import * as echarts from 'echarts';
const gotoBack = () => {
uni.navigateBack({
delta: 1
})
}
const drivingData = [{
title: '驾驶证号',
content: '2302**********1229'
},
{
title: '准驾车型',
content: 'C1'
},
{
title: '驾驶证有效期止',
content: '2024-08-30'
},
{
title: '审核有效期止',
content: '2024-08-30'
},
{
title: '下一清分日期',
content: '2024-08-30'
},
{
title: '下一体检日期',
content: '2024-08-30'
},
{
title: '数据更新时间',
content: '2023-08-30'
},
]
const option = {
series: [
{
type: 'gauge',
min: 0, //
max: 12,
radius: '100%',
progress: {
show: true,
width: 18,
roundCap: true,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#A65FFB'
},
{
offset: 1,
color: '#3163F5'
}
])
}
},
axisLine: {
lineStyle: {
width: 18
},
roundCap: true
},
axisTick: {
show: false
},
splitLine: {
show: false
},
pointer: {
show: false
},
axisLabel: {
show: false
},
anchor: {
show: false
},
title: {
offsetCenter: [0, '20%'],
fontSize: 20
},
detail: {
valueAnimation: true,
formatter: '{value} 分',
color: 'inherit'
},
data: [
{
value: 1,
name: '累计积分\n\n\n\n\n\n正常'
}
]
}
]
};
const option = {
series: [{
type: 'gauge',
min: 0, //
max: 12,
radius: '100%',
progress: {
show: true,
width: 18,
roundCap: true,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#A65FFB'
},
{
offset: 1,
color: '#3163F5'
}
])
}
},
axisLine: {
lineStyle: {
width: 18
},
roundCap: true
},
axisTick: {
show: false
},
splitLine: {
show: false
},
pointer: {
show: false
},
axisLabel: {
show: false
},
anchor: {
show: false
},
title: {
offsetCenter: [0, '20%'],
fontSize: 20
},
detail: {
valueAnimation: true,
formatter: '{value} 分',
color: 'inherit'
},
data: [{
value: 1,
name: '累计积分\n\n\n\n\n\n正常',
}]
}]
};
// ECharts
onMounted(() => {
// const lineChartContainer = lineChartRef.value;
const lineChartContainer = document.getElementById('lineChartRef');
if (lineChartContainer) {
const myChart = echarts.init(lineChartContainer);
myChart.setOption(option);
}
});
// ECharts
onMounted(() => {
// const lineChartContainer = lineChartRef.value;
const lineChartContainer = document.getElementById('lineChartRef');
if (lineChartContainer) {
const myChart = echarts.init(lineChartContainer);
myChart.setOption(option);
}
});
</script>
<style lang="scss">
@ -283,29 +278,29 @@ onMounted(() => {
}
}
.drivingList {
margin-bottom: 20rpx;
.item {
height: 120rpx;
background-color: #fff;
border-top: 1rpx solid #f4f4f4;
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
.drivingList {
margin-bottom: 20rpx;
.item {
height: 120rpx;
background-color: #fff;
border-top: 1rpx solid #f4f4f4;
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
.image {
width: 50rpx;
height: 50rpx;
}
.warning {
display: inline-block;
margin-top: 20rpx;
font-size: 25rpx;
color: #929196;
width: 100%;
text-align: center;
}
</style>
.image {
width: 50rpx;
height: 50rpx;
}
.warning{
display: inline-block;
margin-top: 20rpx;
font-size: 25rpx;
color: #929196;
width: 100%;
text-align: center;
}
</style>