Merge branch 'main' of https://gitea.dykj.co/sundongyu/dykj-outsource-12123

pages/index/components/drivingLicence.vue

@@ -1,5 +1,8 @@
 <template>
-  <view style="background-color: #2c66a9; width: 100%; height: 5vh" :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }">
+  <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">
@@ -13,11 +16,11 @@
       <view class="business">
         <view class="business-top">
           <view style="display: flex; align-items: center">
-            <image src="../../../static/renling.png" class="image"></image>
+            <image src="../../../static/8L.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">
@@ -40,12 +43,20 @@
             </view>
           </view>
         </view>
-        <view class="driving-print"></view>
+        <view class="driving-print">
+          <image :src="imageShow()" style="width: 400rpx; height: 48%"></image>
+          <view class="text"> 累计积分 </view>
+          <view class="grade">
+            <text style="color: #84b520; font-size: 100rpx">{{ grade }}</text
+            >分
+          </view>
+          <view class="describe"> 正常 </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>
+          <text style="margin-right: 20rpx">{{ "151****9198" }}</text>
         </view>
         <view class="item">
           <text style="margin-left: 40rpx; font-weight: 550">驾驶证电子版</text>
@@ -78,113 +89,70 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted } from "vue";
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
 const { safeAreaInsets } = uni.getSystemInfoSync();
 const gotoBack = () => {
   uni.navigateBack({
-    delta: 1
+    delta: 1,
   });
 };
+const grade = ref(0);
 const drivingData = [
   {
-    title: '驾驶证号',
+    title: "驾驶证号",
-    content: '2302**********1229'
+    content: "2302**********1229",
   },
   {
-    title: '准驾车型',
+    title: "准驾车型",
-    content: 'C1'
+    content: "C1",
   },
   {
-    title: '驾驶证有效期止',
+    title: "驾驶证有效期止",
-    content: '2024-08-30'
+    content: "2024-08-30",
   },
   {
-    title: '审核有效期止',
+    title: "审核有效期止",
-    content: '2024-08-30'
+    content: "2024-08-30",
   },
   {
-    title: '下一清分日期',
+    title: "下一清分日期",
-    content: '2024-08-30'
+    content: "2024-08-30",
   },
   {
-    title: '下一体检日期',
+    title: "下一体检日期",
-    content: '2024-08-30'
+    content: "2024-08-30",
   },
   {
-    title: '数据更新时间',
+    title: "数据更新时间",
-    content: '2023-08-30'
+    content: "2023-08-30",
-  }
+  },
 ];
 
-const option = {
+const imageMap = {
-  series: [
+  0: "../../../static/xp.png",
-    {
+  1: "../../../static/xl.png",
-      type: 'gauge',
+  2: "../../../static/x5.png",
-      min: 0, // 最小刻度
+  3: "../../../static/Rl.png",
-      max: 12,
+  4: "../../../static/Rh1.png",
-      radius: '100%',
+  5: "../../../static/Rh.png",
-      progress: {
+  6: "../../../static/Rh.png",
-        show: true,
+  7: "../../../static/wN.png",
-        width: 18,
+  8: "../../../static/wj1.png",
-        roundCap: true,
+  9: "../../../static/wF.png",
-        itemStyle: {
+  10: "../../../static/F-1.png",
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  11: "../../../static/1e.png",
-            {
+  12: "../../../static/l-1.png",
-              offset: 0,
+};
-              color: '#A65FFB'
+const imageShow = () => {
-            },
+  const url = imageMap[grade.value] || ""; // 使用 || 运算符提供默认值
-            {
+  return url;
-              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');
+  const lineChartContainer = document.getElementById("lineChartRef");
   if (lineChartContainer) {
     const myChart = echarts.init(lineChartContainer);
     myChart.setOption(option);
@@ -261,7 +229,6 @@ onMounted(() => {
     margin-top: 30rpx;
     padding: 20rpx;
     display: flex;
-    // border-bottom: 1rpx solid #f4f4f4;
 
     .driving-content {
       width: 50%;
@@ -278,6 +245,22 @@ onMounted(() => {
       display: flex;
       align-items: center;
       justify-content: center;
+      position: relative;
+
+      .text {
+        position: absolute;
+        top: 43%;
+      }
+
+      .grade {
+        position: absolute;
+        top: 50%;
+      }
+
+      .describe {
+        position: absolute;
+        top: 70%;
+      }
     }
   }
 

pages/index/index.vue

@@ -1,33 +1,56 @@
 <template>
 	<view class="content" :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }">
 		<view class="top" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
-      <uni-search-bar class="search" bgColor="#EEEEEE" radius="100" placeholder="搜索" clearButton="none" cancelButton="none" @confirm="search" />
+			<view style="color: #fff;width: 120rpx;">哈尔滨</view>
-      <uni-icons type="email-filled" size="30" color="#fff"></uni-icons>
+			<uni-search-bar class="search" bgColor="#EEEEEE" radius="100" placeholder="搜索" clearButton="none"
+				cancelButton="none" @confirm="search" />
+			<image src="../../static/on.png" style="width: 80rpx; height: 60rpx"></image>
 		</view>
 		<view class="card">
 			<view class="card-content">
 				<view class="card-content-top">
-          <image class="image" src="../../static/car.png" />
+					<image style="width: 50rpx; height: 40rpx;" src="../../static/c5.png" />
-          <text style="margin-left: 30rpx">机动车</text>
+					<text style="margin-left: 30rpx">黑A00000</text>
 				</view>
 				<view class="card-content-bottom">
-          <text style="font-size: 26rpx">未查询到备案的机动车</text>
+					<view style="font-size: 26rpx; display: flex; justify-content: space-between; align-items: center;">
+						<text>未处理违法</text>
+						<view>
+							<text style="margin-right: 8rpx; font-size: 32rpx;">0</text>条
+						</view>
+					</view>
+					<view style="font-size: 26rpx; display: flex; justify-content: space-between; align-items: center;">
+						<text>车辆状态</text>
+						<text>正常</text>
+					</view>
 				</view>
 			</view>
 			<view class="card-content" @click="drivingLicence">
-        <view class="card-content-top">
+				<view class="card-content-top" style="justify-content: space-between;">
-          <image class="image" src="../../static/jiashizheng.png" />
+					<view style="display: flex; align-items: center;">
+						<image style="width: 50rpx; height: 50rpx;" src="../../static/jiashizheng.png" />
 						<text style="margin-left: 30rpx">驾驶证</text>
 					</view>
+					<image style="width: 10rpx; height: 20rpx;" src="../../static/zv1.png" />
+				</view>
 				<view class="card-content-bottom">
-          <text style="font-size: 26rpx">未查询到备案的驾驶证</text>
+					<view style="font-size: 26rpx; display: flex; justify-content: space-between; align-items: center;">
+						<text>累计积分</text>
+						<view>
+							<text style="margin-right: 8rpx; font-size: 32rpx;">0</text>分
+						</view>
+					</view>
+					<view style="font-size: 26rpx; display: flex; justify-content: space-between; align-items: center;">
+						<text>累计积分</text>
+						<text>正常</text>
+					</view>
 				</view>
 			</view>
 		</view>
 		<view class="business">
 			<view v-for="(item, index) in businessList" :key="index" class="grid-item">
 				<view class="business-content" @click="closedclick(item.id)">
-          <image class="image" style="margin-bottom: 20rpx" :src="item.img" />
+					<image style="width: 70rpx; height: 70rpx; margin-bottom: 20rpx" :src="item.img" />
 					<text style="font-size: 12px">{{ item.text }}</text>
 				</view>
 			</view>
@@ -41,11 +64,12 @@
 				<uni-icons type="right" size="20" color="#acacac" style="margin-right: 20rpx"></uni-icons>
 			</view>
 			<view class="information-content">
-        <uni-swiper-dot :info="info" :current="current" field="content" mode="default">
+				<uni-swiper-dot :info="info" :current="current" :dots-styles="{selectedBackgroundColor: '#2065b1',backgroundColor: '#e6e6e6'}" 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>
+								<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">
@@ -66,10 +90,11 @@
 				<view class="bottom-center">
 					<view class="center-content">
 						<view class="icon">
-              <uni-icons type="undo" size="20" color="#8ca9cd"></uni-icons>
+							<image src="../../static/dl.png" style="width: 30rpx; height: 30rpx"></image>
 						</view>
 						<view class="text">
-              <text style="color: #8ca9cd; font-size: 24rpx; display: inline-block; text-align: center">未来会有更过服务,更好的体验现在快把我分享给帮你的好友吧</text>
+							<text
+								style="color: #8ca9cd; font-size: 24rpx; display: inline-block; text-align: center">未来会有更过服务,更好的体验现在快把我分享给帮你的好友吧</text>
 						</view>
 					</view>
 				</view>
@@ -84,62 +109,67 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+	import {
-const { safeAreaInsets } = uni.getSystemInfoSync();
+		ref
-const businessList = ref([
+	} from 'vue';
-  {
+	const {
-    img: '../../static/rili.png',
+		safeAreaInsets
-    text: '考试预约\n\n',
+	} = uni.getSystemInfoSync();
+	const dotStyle = ref({
+
+	})
+	const businessList = ref([{
+			img: '../../static/6w1.png',
+			text: '事故视频\n快处',
 			id: '1'
 		},
 		{
-    img: '../../static/xinche.png',
+			img: '../../static/ax3.png',
-    text: '新车选号\n\n',
+			text: '违法处理\n\n',
 			id: '2'
 		},
 		{
-    img: '../../static/beian.png',
+			img: '../../static/q2.png',
-    text: '备案非本\n人机动车',
+			text: '罚款缴纳\n\n',
 			id: '3'
 		},
 		{
-    img: '../../static/xinche.png',
+			img: '../../static/5i.png',
-    text: '申请新车\n临时号牌',
+			text: '驾驶证电\n子版',
 			id: '4'
 		},
 		{
-    img: '../../static/renling.png',
+			img: '../../static/az.png',
-    text: '业务委托\n申请',
+			text: '学法减分\n\n',
 			id: '5'
 		},
 		{
-    img: '../../static/laoren.png',
+			img: '../../static/zx1.png',
-    text: '老年人业\n务代办',
+			text: '免检车申领\n检验标志',
 			id: '6'
 		},
 		{
-    img: '../../static/gongbu.png',
+			img: '../../static/621.png',
-    text: '号牌号段\n公布',
+			text: '驾驶证补\n领换',
 			id: '7'
 		},
 		{
-    img: '../../static/kaoshi.png',
+			img: '../../static/jf.png',
-    text: '考试信息\n公布',
+			text: '机动车检\n验预约',
 			id: '8'
 		},
 		{
-    img: '../../static/nuoche.png',
+			img: '../../static/pj.png',
-    text: '一键挪车\n\n',
+			text: '满分学习\n考试',
 			id: '9'
 		},
 		{
-    img: '../../static/gengduo.png',
+			img: '../../static/KG.png',
 			text: '更多\n\n',
 			id: '10'
 		}
 	]);
-const info = [
+	const info = [{
-  {
 			content: '内容 A'
 		},
 		{
@@ -203,7 +233,6 @@ const closedclick = (id) => {
 				padding: 0 30rpx;
 				display: flex;
 				flex-direction: column;
-      justify-content: space-between;
 
 				.card-content-top {
 					height: 40%;
@@ -216,15 +245,15 @@ const closedclick = (id) => {
 					height: 50%;
 					width: 100%;
 					display: flex;
-        align-items: center;
+					flex-direction: column;
-        justify-content: center;
+					justify-content: space-around;
 				}
 			}
 		}
 
 		.business {
-    margin: 5% 0;
+			margin: 3% 0;
-    height: 350rpx;
+			height: 380rpx;
 			width: 100%;
 			background-color: #fff;
 			border: 1px solid #ebeef0;
@@ -235,14 +264,12 @@ const closedclick = (id) => {
 
 			/* 列间隔 */
 			.grid-item {
-      padding: 5%;
 				border-radius: 5px;
 			}
 
 			.business-content {
 				width: 100%;
 				height: 100%;
-      padding: 4rpx;
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
@@ -286,7 +313,8 @@ const closedclick = (id) => {
 				}
 
 				.swiper-text {
-        width: 70%;
+					width: 60%;
+					margin-left: 20rpx;
 					display: flex;
 					flex-direction: column;
 					justify-content: space-between;
@@ -317,7 +345,7 @@ const closedclick = (id) => {
 
 					.icon {
 						width: 30%;
-          height: 100%;
+						height: 80%;
 						display: flex;
 						align-items: center;
 						justify-content: center;
@@ -334,9 +362,4 @@ const closedclick = (id) => {
 			}
 		}
 	}
-
-.image {
-  width: 50rpx;
-  height: 50rpx;
-}
 </style>

unpackage/dist/cache/.vite/deps/_metadata.json

@@ -1,6 +1,6 @@
 {
-  "hash": "f0e888ba",
+  "hash": "4a204181",
-  "configHash": "046e9b57",
+  "configHash": "eb966fb1",
   "lockfileHash": "fa978dd2",
   "browserHash": "f56c9596",
   "optimized": {