代码上传

pages/index/components/drivingLicence.vue

@@ -16,7 +16,7 @@
       <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">
@@ -97,7 +97,7 @@ const gotoBack = () => {
     delta: 1,
   });
 };
-const grade = ref(1);
+const grade = ref(0);
 const drivingData = [
   {
     title: "驾驶证号",

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-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 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;">
+					<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  style="width: 70rpx; height: 70rpx; 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">
@@ -69,7 +93,8 @@
 							<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,52 +109,58 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+	import {
-const { safeAreaInsets } = uni.getSystemInfoSync();
+		ref
-const businessList = ref([
+	} from 'vue';
-  {
+	const {
-    img: '../../static/aw1.png',
+		safeAreaInsets
-    text: '考试预约\n\n',
+	} = uni.getSystemInfoSync();
+	const dotStyle = ref({
+
+	})
+	const businessList = ref([{
+			img: '../../static/6w1.png',
+			text: '事故视频\n快处',
 			id: '1'
 		},
 		{
-    img: '../../static/av.png',
+			img: '../../static/ax3.png',
-    text: '新车选号\n\n',
+			text: '违法处理\n\n',
 			id: '2'
 		},
 		{
-    img: '../../static/as.png',
+			img: '../../static/q2.png',
-    text: '备案非本\n人机动车',
+			text: '罚款缴纳\n\n',
 			id: '3'
 		},
 		{
-    img: '../../static/ZG.png',
+			img: '../../static/5i.png',
-    text: '申请新车\n临时号牌',
+			text: '驾驶证电\n子版',
 			id: '4'
 		},
 		{
-    img: '../../static/q1.png',
+			img: '../../static/az.png',
-    text: '业务委托\n申请',
+			text: '学法减分\n\n',
 			id: '5'
 		},
 		{
-    img: '../../static/61.png',
+			img: '../../static/zx1.png',
-    text: '老年人业\n务代办',
+			text: '免检车申领\n检验标志',
 			id: '6'
 		},
 		{
-    img: '../../static/4P1.png',
+			img: '../../static/621.png',
-    text: '号牌号段\n公布',
+			text: '驾驶证补\n领换',
 			id: '7'
 		},
 		{
-    img: '../../static/6x1.png',
+			img: '../../static/jf.png',
-    text: '考试信息\n公布',
+			text: '机动车检\n验预约',
 			id: '8'
 		},
 		{
-    img: '../../static/a01.png',
+			img: '../../static/pj.png',
-    text: '一键挪车\n\n',
+			text: '满分学习\n考试',
 			id: '9'
 		},
 		{
@@ -137,9 +168,8 @@ const businessList = ref([
 			text: '更多\n\n',
 			id: '10'
 		}
-]);
+	]);
-const info = [
+	const info = [{
-  {
 			content: '内容 A'
 		},
 		{
@@ -148,27 +178,27 @@ const info = [
 		{
 			content: '内容 C'
 		}
-];
+	];
-const current = ref(0);
+	const current = ref(0);
-const change = (e) => {
+	const change = (e) => {
 		current.value = e.detail.current;
-};
+	};
-const drivingLicence = () => {
+	const drivingLicence = () => {
 		uni.navigateTo({
 			url: './components/drivingLicence'
 		});
-};
+	};
-const closedclick = (id) => {
+	const closedclick = (id) => {
 		if (id == 10) {
 			uni.navigateTo({
 				url: './components/businessCenter'
 			});
 		}
-};
+	};
 </script>
 
 <style lang="scss">
-.content {
+	.content {
 		width: 710rpx;
 		background-image: url(@/static/index-bgd.png);
 		background-size: contain;
@@ -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;
@@ -333,5 +361,5 @@ const closedclick = (id) => {
 				justify-content: center;
 			}
 		}
-}
+	}
 </style>