dykj-outsource-12123/pages/index/components/drivingLicence.vue

<template>
  <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">
          <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/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">
          <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>
      <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>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const { safeAreaInsets } = uni.getSystemInfoSync();
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;
  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>