sundongyu/dykj-outsource-12123
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: sundongyu:21216648710f709f00548429dec7b8625cf44fde
Branches Tags
sundongyu:main
...
compare: sundongyu:c8ce677444fce5e9a587fd237da60e731ee8c46d
Branches Tags
sundongyu:main

3 Commits
2121664871 ... c8ce677444

Author SHA1 Message Date
yangchunyu
c8ce677444 代码上传 2024-06-26 15:01:22 +08:00
yangchunyu
375661cfc7 Merge branch 'main' of https://gitea.dykj.co/sundongyu/dykj-outsource-12123 2024-06-26 15:00:14 +08:00
yangchunyu
2ce375d869 代码上传 2024-06-26 14:55:22 +08:00
5 changed files with 548 additions and 13 deletions
Show Stats Expand all files Collapse all files

13
pages.json
View File

@ -1,11 +1,17 @@
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/index/components/drivingLicence",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/index/components/businessCenter",
"style": {
@ -49,7 +55,8 @@
},
"uniIdRouter": {},
"tabBar": {
"list": [{
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
@ -67,4 +74,4 @@
}
]
}
}
}

316
pages/index/components/drivingLicence.vue Normal file
View File

@ -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>

86
pages/index/components/echarts.vue Normal file
View File

@ -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>

135
pages/index/index.vue
View File

@ -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;
}
}
}

11
unpackage/dist/cache/.vite/deps/_metadata.json vendored
View File

@ -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": {}
}