From 20927e276a78a0289f676d91774493cf10902d1b Mon Sep 17 00:00:00 2001
From: yangchunyu <2861518472@qq.com>
Date: Wed, 26 Jun 2024 18:06:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/components/drivingLicence.vue | 447 +++++++++++-----------
 1 file changed, 217 insertions(+), 230 deletions(-)

diff --git a/pages/index/components/drivingLicence.vue b/pages/index/components/drivingLicence.vue
index 7ae4511..6249e36 100644
--- a/pages/index/components/drivingLicence.vue
+++ b/pages/index/components/drivingLicence.vue
@@ -1,253 +1,240 @@
 <template>
-	<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="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">
-				<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 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>
-	</view>
+  <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="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">
+        <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 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>
+  </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",
+  },
+];
 
-	// 在组件挂载后初始化ECharts实例并设置选项
-	onMounted(() => {
-		
-	});
+// 在组件挂载后初始化ECharts实例并设置选项
+onMounted(() => {});
 </script>
 
 <style lang="scss">
-	.van-nav-bar__content {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 4rem;
-		background-color: #2c66a9;
-		color: #fff;
-		letter-spacing: 1.5px;
-		position: relative;
+.van-nav-bar__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 4rem;
+  background-color: #2c66a9;
+  color: #fff;
+  letter-spacing: 1.5px;
+  position: relative;
 
-		.page-icon {
-			display: flex;
-			align-items: center;
-			position: absolute;
-			left: 0;
-		}
+  .page-icon {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 0;
+  }
 
-		.page-navbar {
-			font-size: 1.1rem;
-		}
-	}
+  .page-navbar {
+    font-size: 1.1rem;
+  }
+}
 
-	.content {
-		width: 689rpx;
-		height: 100%;
-		padding: 20rpx 30rpx;
-		background-color: #f4f3f8;
+.content {
+  width: 689rpx;
+  height: 100%;
+  padding: 20rpx 30rpx;
+  background-color: #f4f3f8;
 
-		.business {
-			background-color: #fff;
-			height: 250rpx;
-			padding: 0 60rpx;
-			border-radius: 20rpx;
+  .business {
+    background-color: #fff;
+    height: 250rpx;
+    padding: 0 60rpx;
+    border-radius: 20rpx;
 
+    .business-top {
+      height: 55%;
+      width: 100%;
+      border-bottom: 1rpx solid #f2f2f2;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
 
+    .business-bottom {
+      position: relative;
+      height: 45%;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
 
+      .tag {
+        width: 70rpx;
+        position: absolute;
+        top: 0;
+        left: -60rpx;
+        color: #f27025;
+        background-color: #fed3b8;
+        font-size: 24rpx;
+        border-radius: 0 20rpx 20rpx 0;
+      }
+    }
+  }
 
-			.business-top {
-				height: 55%;
-				width: 100%;
-				border-bottom: 1rpx solid #f2f2f2;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-			}
+  .driving {
+    background-color: #fff;
+    margin-top: 30rpx;
+    padding: 20rpx;
+    display: flex;
+    // border-bottom: 1rpx solid #f4f4f4;
 
-			.business-bottom {
-				position: relative;
-				height: 45%;
-				width: 100%;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
+    .driving-content {
+      width: 50%;
 
-				.tag {
-					width: 70rpx;
-					position: absolute;
-					top: 0;
-					left: -60rpx;
-					color: #f27025;
-					background-color: #fed3b8;
-					font-size: 24rpx;
-					border-radius: 0 20rpx 20rpx 0;
-				}
-			}
-		}
+      .driving-item {
+        width: 100%;
+        margin: 20rpx 0 20rpx 20rpx;
+        display: flex;
+        flex-direction: column;
+      }
+    }
 
-		.driving {
-			background-color: #fff;
-			margin-top: 30rpx;
-			padding: 20rpx;
-			display: flex;
-			// border-bottom: 1rpx solid #f4f4f4;
+    .driving-print {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
 
-			.driving-content {
-				width: 50%;
+  .drivingList {
+    margin-bottom: 20rpx;
 
-				.driving-item {
-					width: 100%;
-					margin: 20rpx 0 20rpx 20rpx;
-					display: flex;
-					flex-direction: column;
-				}
-			}
+    .item {
+      height: 120rpx;
+      background-color: #fff;
+      border-top: 1rpx solid #f4f4f4;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+}
 
-			.driving-print {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-		}
+.image {
+  width: 50rpx;
+  height: 50rpx;
+}
 
-		.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>
\ No newline at end of file
+.warning {
+  display: inline-block;
+  margin-top: 20rpx;
+  font-size: 25rpx;
+  color: #929196;
+  width: 100%;
+  text-align: center;
+}
+</style>