From 2ce375d869caedbb5c6a79f22ab10e325064742b Mon Sep 17 00:00:00 2001
From: yangchunyu <2861518472@qq.com>
Date: Wed, 26 Jun 2024 14:55:22 +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.json                                    | 115 ++++---
 pages/index/components/drivingLicence.vue     | 316 ++++++++++++++++++
 pages/index/components/echarts.vue            |  86 +++++
 pages/index/index.vue                         | 135 +++++++-
 .../dist/cache/.vite/deps/_metadata.json      |  11 +-
 5 files changed, 599 insertions(+), 64 deletions(-)
 create mode 100644 pages/index/components/drivingLicence.vue
 create mode 100644 pages/index/components/echarts.vue

diff --git a/pages.json b/pages.json
index 047a1ef..7ef8fe0 100644
--- a/pages.json
+++ b/pages.json
@@ -1,56 +1,63 @@
 {
-  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-    {
-      "path": "pages/index/index",
-      "style": {
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/schedule/index",
-      "style": {
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/serve/index",
-      "style": {
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/my/index",
-      "style": {
-        "navigationBarBackgroundColor": "#2c66a9",
-        "navigationBarTitleText": "我的",
-        "navigationBarTextStyle": "white"
-      }
-    }
-  ],
-  "globalStyle": {
-    "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "12123",
-    "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8"
-  },
-  "uniIdRouter": {},
-  "tabBar": {
-    "list": [{
-        "pagePath": "pages/index/index",
-        "text": "首页"
-      },
-      {
-        "pagePath": "pages/schedule/index",
-        "text": "网办进度"
-      },
-      {
-        "pagePath": "pages/serve/index",
-        "text": "服务网点"
-      },
-      {
-        "pagePath": "pages/my/index",
-        "text": "我的"
-      }
-    ]
-  }
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/index/components/drivingLicence",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/schedule/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+
+		{
+			"path": "pages/serve/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/my/index",
+			"style": {
+				"navigationBarBackgroundColor": "#2c66a9",
+				"navigationBarTitleText": "我的",
+				"navigationBarTextStyle": "white"
+			}
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "12123",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8"
+	},
+	"uniIdRouter": {},
+	"tabBar": {
+		"list": [{
+				"pagePath": "pages/index/index",
+				"text": "首页"
+			},
+			{
+				"pagePath": "pages/schedule/index",
+				"text": "网办进度"
+			},
+			{
+				"pagePath": "pages/serve/index",
+				"text": "服务网点"
+			},
+			{
+				"pagePath": "pages/my/index",
+				"text": "我的"
+			}
+		]
+	}
 }
\ No newline at end of file
diff --git a/pages/index/components/drivingLicence.vue b/pages/index/components/drivingLicence.vue
new file mode 100644
index 0000000..cf9607d
--- /dev/null
+++ b/pages/index/components/drivingLicence.vue
@@ -0,0 +1,316 @@
+<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/认领.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 id="lineChartRef" :style="{ width: '200px', height: '200px' }" />
+				</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>
+			<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'
+		},
+	]
+
+	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);
+		}
+	});
+</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;
+
+		.page-icon {
+			display: flex;
+			align-items: center;
+			position: absolute;
+			left: 0;
+		}
+
+		.page-navbar {
+			font-size: 1.1rem;
+		}
+	}
+
+	.content {
+		width: 689rpx;
+		height: 100%;
+		padding: 20rpx 30rpx;
+		background-color: #f4f3f8;
+
+		.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;
+				}
+			}
+		}
+
+		.driving {
+			background-color: #fff;
+			margin-top: 30rpx;
+			padding: 20rpx;
+			display: flex;
+			// border-bottom: 1rpx solid #f4f4f4;
+
+			.driving-content {
+				width: 50%;
+
+				.driving-item {
+					width: 100%;
+					margin: 20rpx 0 20rpx 20rpx;
+					display: flex;
+					flex-direction: column;
+				}
+			}
+
+			.driving-print {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+		}
+
+		.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
diff --git a/pages/index/components/echarts.vue b/pages/index/components/echarts.vue
new file mode 100644
index 0000000..b38caae
--- /dev/null
+++ b/pages/index/components/echarts.vue
@@ -0,0 +1,86 @@
+<template>
+  <view style="height: 300px; width: 200px; background-color: aqua">
+    <view id="lineChartRef" :style="{ width: '200px', height: '200px' }" />
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+
+const option = {
+  series: [
+    {
+      type: 'gauge',
+      min: 0, // 最小刻度
+      max: 12,
+      radius: '35%',
+      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, '-30%'],
+        fontSize: 20
+      },
+      detail: {
+        valueAnimation: true,
+        formatter: '{value} 分\n正常',
+        color: 'inherit'
+      },
+      data: [
+        {
+          value: 1,
+          name: '累计积分'
+        }
+      ]
+    }
+  ]
+};
+
+// 在组件挂载后初始化ECharts实例并设置选项
+onMounted(() => {
+  // const lineChartContainer = lineChartRef.value;
+  const lineChartContainer = document.getElementById('lineChartRef');
+  if (lineChartContainer) {
+    const myChart = echarts.init(lineChartContainer);
+    myChart.setOption(option);
+  }
+});
+</script>
+
+<style></style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 17812eb..e1302f4 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -15,7 +15,7 @@
 					<text style="font-size: 26rpx;">未查询到备案的机动车</text>
 				</view>
 			</view>
-			<view class="card-content">
+			<view class="card-content" @click="drivingLicence">
 				<view class="card-content-top">
 					<image class="image" src="../../static/驾驶证.png" />
 					<text style="margin-left: 30rpx;">驾驶证</text>
@@ -35,12 +35,52 @@
 		</view>
 		<view class="information">
 			<view class="information-top">
-				<text></text>
-				<text></text>
-				<text></text>
+				<view style="margin-left: 20rpx;">
+					<text style="font-weight:600; font-size: 34rpx;">资讯中心</text>
+					<text style="font-size: 24rpx; font-weight: 400; color: #9b9b9b; margin-left: 50rpx;">最新实时地方交通资讯</text>
+				</view>
+				<uni-icons type="right" size="20" color="#acacac" style="margin-right: 20rpx;"></uni-icons>
 			</view>
 			<view class="information-content">
-				2
+				<uni-swiper-dot :info="info" :current="current" field="content" mode="default">
+					<swiper class="swiper-box" @change="change">
+						<swiper-item v-for="(item ,index) in info" :key="index">
+							<view class="swiper-item" style="margin-right: 20rpx;">
+								<image src="../../static/index-bgd.png" style="width: 200rpx; height: 200rpx;margin-left: 20rpx;">
+								</image>
+								<view class="swiper-text">
+									<text>{{'测试数据'}}</text>
+									<view style="width: 100%;display: flex; justify-content: flex-end; color: #cecdd3; font-size: 28rpx;">
+										{{'2024-06-14'}}
+									</view>
+								</view>
+							</view>
+						</swiper-item>
+					</swiper>
+				</uni-swiper-dot>
+			</view>
+			<view class="bottom">
+				<view class="bottom-top">
+					<view style="border-bottom: 1rpx solid #adc1d8; width: 60rpx;" />
+					<text style="color: #adc1d8;margin: 0 10rpx;">\\\\</text>
+					<view style="border-bottom: 1px solid #adc1d8; width: 360rpx;" />
+				</view>
+				<view class="bottom-center">
+					<view class="center-content">
+						<view class="icon">
+							<uni-icons type="undo" size="20" color="#8ca9cd"></uni-icons>
+						</view>
+						<view class="text">
+							<text
+								style="color: #8ca9cd; font-size: 24rpx; display: inline-block; text-align: center;">未来会有更过服务,更好的体验现在快把我分享给帮你的好友吧</text>
+						</view>
+					</view>
+				</view>
+				<view class="bottom-bottom">
+					<view style="border-bottom: 1rpx solid #e5e5e8; width: 25%" />
+					<text style="color: #727272;margin: 0 10rpx; font-size: 24rpx;">交管12123版本v3.1.1 B603</text>
+					<view style="border-bottom: 1px solid #e5e5e8; width: 25%" />
+				</view>
 			</view>
 		</view>
 	</view>
@@ -101,12 +141,28 @@
 			id: '10'
 		},
 	])
+	const info = [{
+		content: '内容 A'
+	}, {
+		content: '内容 B'
+	}, {
+		content: '内容 C'
+	}]
+	const current = ref(0)
+	const change = (e) => {
+		current.value = e.detail.current;
+	}
+	const drivingLicence = () => {
+		console.log(111);
+		uni.navigateTo({
+			url: './components/drivingLicence',
+		})
+	}
 </script>
 
 <style lang="scss">
 	.content {
 		width: 710rpx;
-		height: 100vh;
 		background-image: url(@/static/index-bgd.png);
 		background-size: contain;
 		background-repeat: no-repeat;
@@ -198,15 +254,78 @@
 
 		.information {
 			width: 100%;
-			height: 300rpx;
+			height: 350rpx;
 			background-color: #fff;
 			border: 1px solid #ebebeb;
 			border-radius: 20rpx;
 			box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.1);
-			.information-top{
+
+			.information-top {
 				width: 100%;
 				height: 30%;
 				border-bottom: 1px solid #f4f3f5;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+
+			.information-content {
+				width: 100%;
+				height: 70%;
+				display: flex;
+				margin-bottom: 20rpx;
+
+				.swiper-item {
+					display: flex;
+					padding: 20rpx 0;
+				}
+
+				.swiper-text {
+					width: 70%;
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+				}
+			}
+		}
+
+		.bottom {
+			width: 100%;
+			height: 300rpx;
+
+			.bottom-top {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.bottom-center {
+				width: 100%;
+				height: 80rpx;
+				display: flex;
+				justify-content: center;
+
+				.center-content {
+					width: 430rpx;
+					display: flex;
+
+					.icon {
+						width: 30%;
+						height: 100%;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+				}
+			}
+
+			.bottom-bottom {
+				width: 100%;
+				margin-top: 30rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
 			}
 		}
 	}
diff --git a/unpackage/dist/cache/.vite/deps/_metadata.json b/unpackage/dist/cache/.vite/deps/_metadata.json
index dfb799a..2ba9266 100644
--- a/unpackage/dist/cache/.vite/deps/_metadata.json
+++ b/unpackage/dist/cache/.vite/deps/_metadata.json
@@ -2,7 +2,14 @@
   "hash": "4a204181",
   "configHash": "eb966fb1",
   "lockfileHash": "fa978dd2",
-  "browserHash": "5f22ff88",
-  "optimized": {},
+  "browserHash": "65cd6fd1",
+  "optimized": {
+    "echarts": {
+      "src": "../../../../../node_modules/echarts/index.js",
+      "file": "echarts.js",
+      "fileHash": "47eb0dc6",
+      "needsInterop": false
+    }
+  },
   "chunks": {}
 }
\ No newline at end of file