pages/index/components/drivingLicence.vue

@@ -1,8 +1,5 @@
 <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">
@@ -16,12 +13,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/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">
@@ -44,20 +40,12 @@
             </view>
           </view>
         </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 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>
+          <text style="margin-right: 20rpx">{{ '151****9198' }}</text>
         </view>
         <view class="item">
           <text style="margin-left: 40rpx; font-weight: 550">驾驶证电子版</text>
@@ -90,70 +78,113 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
-import * as echarts from "echarts";
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
 const { safeAreaInsets } = uni.getSystemInfoSync();
 const gotoBack = () => {
   uni.navigateBack({
-    delta: 1,
+    delta: 1
   });
 };
-const grade = ref(1);
 const drivingData = [
   {
-    title: "驾驶证号",
-    content: "2302**********1229",
+    title: '驾驶证号',
+    content: '2302**********1229'
   },
   {
-    title: "准驾车型",
-    content: "C1",
+    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: "2024-08-30",
+    title: '下一清分日期',
+    content: '2024-08-30'
   },
   {
-    title: "下一体检日期",
-    content: "2024-08-30",
+    title: '下一体检日期',
+    content: '2024-08-30'
   },
   {
-    title: "数据更新时间",
-    content: "2023-08-30",
-  },
+    title: '数据更新时间',
+    content: '2023-08-30'
+  }
 ];
 
-const imageMap = {
-  0: "../../../static/xp.png",
-  1: "../../../static/xl.png",
-  2: "../../../static/x5.png",
-  3: "../../../static/Rl.png",
-  4: "../../../static/Rh1.png",
-  5: "../../../static/Rh.png",
-  6: "../../../static/Rh.png",
-  7: "../../../static/wN.png",
-  8: "../../../static/wj1.png",
-  9: "../../../static/wF.png",
-  10: "../../../static/F-1.png",
-  11: "../../../static/1e.png",
-  12: "../../../static/l-1.png",
-};
-const imageShow = () => {
-  const url = imageMap[grade.value] || ""; // 使用 || 运算符提供默认值
-  return url;
+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");
+  const lineChartContainer = document.getElementById('lineChartRef');
   if (lineChartContainer) {
     const myChart = echarts.init(lineChartContainer);
     myChart.setOption(option);
@@ -186,6 +217,7 @@ onMounted(() => {
 
 .content {
   width: 689rpx;
+  height: 100%;
   padding: 20rpx 30rpx;
   background-color: #f4f3f8;
 
@@ -247,22 +279,6 @@ 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

@@ -2,12 +2,12 @@
   <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" />
-      <image src="../../static/on.png" style="width: 80rpx; height: 60rpx"></image>
+      <uni-icons type="email-filled" size="30" color="#fff"></uni-icons>
     </view>
     <view class="card">
       <view class="card-content">
         <view class="card-content-top">
-          <image style="width: 50rpx; height: 40rpx;" src="../../static/c5.png" />
+          <image class="image" src="../../static/car.png" />
           <text style="margin-left: 30rpx">机动车</text>
         </view>
         <view class="card-content-bottom">
@@ -16,7 +16,7 @@
       </view>
       <view class="card-content" @click="drivingLicence">
         <view class="card-content-top">
-          <image  style="width: 50rpx; height: 50rpx;" src="../../static/jiashizheng.png" />
+          <image class="image" src="../../static/jiashizheng.png" />
           <text style="margin-left: 30rpx">驾驶证</text>
         </view>
         <view class="card-content-bottom">
@@ -27,7 +27,7 @@
     <view class="business">
       <view v-for="(item, index) in businessList" :key="index" class="grid-item">
         <view class="business-content" @click="closedclick(item.id)">
-          <image  style="width: 70rpx; height: 70rpx; margin-bottom: 20rpx":src="item.img" />
+          <image class="image" style="margin-bottom: 20rpx" :src="item.img" />
           <text style="font-size: 12px">{{ item.text }}</text>
         </view>
       </view>
@@ -66,7 +66,7 @@
         <view class="bottom-center">
           <view class="center-content">
             <view class="icon">
-							<image src="../../static/dl.png" style="width: 30rpx; height: 30rpx"></image>
+              <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>
@@ -88,52 +88,52 @@ import { ref } from 'vue';
 const { safeAreaInsets } = uni.getSystemInfoSync();
 const businessList = ref([
   {
-    img: '../../static/aw1.png',
+    img: '../../static/rili.png',
     text: '考试预约\n\n',
     id: '1'
   },
   {
-    img: '../../static/av.png',
+    img: '../../static/xinche.png',
     text: '新车选号\n\n',
     id: '2'
   },
   {
-    img: '../../static/as.png',
+    img: '../../static/beian.png',
     text: '备案非本\n人机动车',
     id: '3'
   },
   {
-    img: '../../static/ZG.png',
+    img: '../../static/xinche.png',
     text: '申请新车\n临时号牌',
     id: '4'
   },
   {
-    img: '../../static/q1.png',
+    img: '../../static/renling.png',
     text: '业务委托\n申请',
     id: '5'
   },
   {
-    img: '../../static/61.png',
+    img: '../../static/laoren.png',
     text: '老年人业\n务代办',
     id: '6'
   },
   {
-    img: '../../static/4P1.png',
+    img: '../../static/gongbu.png',
     text: '号牌号段\n公布',
     id: '7'
   },
   {
-    img: '../../static/6x1.png',
+    img: '../../static/kaoshi.png',
     text: '考试信息\n公布',
     id: '8'
   },
   {
-    img: '../../static/a01.png',
+    img: '../../static/nuoche.png',
     text: '一键挪车\n\n',
     id: '9'
   },
   {
-    img: '../../static/KG.png',
+    img: '../../static/gengduo.png',
     text: '更多\n\n',
     id: '10'
   }
@@ -317,7 +317,7 @@ const closedclick = (id) => {
 
         .icon {
           width: 30%;
-          height: 80%;
+          height: 100%;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -334,4 +334,9 @@ const closedclick = (id) => {
     }
   }
 }
+
+.image {
+  width: 50rpx;
+  height: 50rpx;
+}
 </style>

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

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