样式全面修改，所有页面焕然一新

qingyiay

2023-05-05 79993be468244e6cc16ce9c1d7e8736bd359c600

 pages/driver-page/drvier-my/drvier-my.vue

@@ -1,23 +1,101 @@
<template>
   <view class="driver-my">
      <!-- <view class="jifen">
         <view class="zheng">
            <image src="../../../static/image/无人值守/组 38_1.png"></image>
            <view class="font">
               <view class="font-top">100</view>
               <view class="font-bottom">正积分</view>
      <view class="driver-banner">
         <view class="navgation">我的</view>
         <view class="avatar">
            <view class="avatar-imgage"></view>
            <view class="avatar-name">{{ userInfo.name }}</view>
            <view class="edit-button"><u-button type="primary" @click="editBtnClick" shape="circle" plain>编辑个人资料</u-button></view>
         </view>
         <view class="personal-information">
            <view class="personal-information-block">
               <view class="block-main">
                  <view class="information-line" @click="">
                     <view class="line-label">
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/personalicon.png" mode="widthFix"></image>
                        <view class="label-text">身份证号</view>
                     </view>
                     <view class="information-value">
                        {{ userInfo.idCard }}
                        <u-icon name="arrow-right" color="#999999" size="30"></u-icon>
                     </view>
                  </view>
                  <view class="information-line">
                     <view class="line-label">
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/phonenum.png" mode="widthFix"></image>
                        <view class="label-text">手机号</view>
                     </view>
                     <view class="information-value">
                        {{ userInfo.phone }}
                        <u-icon name="arrow-right" color="#999999" size="30"></u-icon>
                     </view>
                  </view>
                  <view class="information-line">
                     <view class="line-label">
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/carnum.png" mode="widthFix"></image>
                        <view class="label-text">车牌号</view>
                     </view>
                     <view class="information-value">
                        {{ userInfo.carNo }}
                        <u-icon name="arrow-right" color="#999999" size="30"></u-icon>
                     </view>
                  </view>
                  <view class="information-line">
                     <view class="line-label">
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/axisnum.png" mode="widthFix"></image>
                        <view class="label-text">车轴数</view>
                     </view>
                     <view class="information-value">
                        {{ userInfo.axleNum }}
                        <u-icon name="arrow-right" color="#999999" size="30"></u-icon>
                     </view>
                  </view>
                  <view class="information-line last">
                     <view class="line-label">
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/weighnum.png" mode="widthFix"></image>
                        <view class="label-text">体重</view>
                     </view>
                     <view class="information-value">
                        {{ userInfo.weight }}
                        <u-icon name="arrow-right" color="#999999" size="30"></u-icon>
                     </view>
                  </view>
               </view>
            </view>
         </view>
         <view class="fu">
            <image src="../../../static/image/无人值守/组 38.png"></image>
            <view class="font">
               <view class="font-top">-60</view>
               <view class="font-bottom">负积分</view>
      </view>
      <view class="car-information">
         <view class="information-main">
            <view class="information-body">
               <view class="car-img">
                  <view class="label-title">
                     <image src="https://mx.jzeg.cn:9095/appimg/image/banner/carimg.png" mode="widthFix"></image>
                     <view class="label-text">车辆照片</view>
                  </view>
                  <view class="img-container">
                     <u--image :showLoading="true" :src="userInfo.carImg != null ? BaseUrl + userInfo.carImg : ''" width="80px" height="80px" @click="imageClick(1)">
                        <view slot="error" style="font-size: 24rpx;">加载失败</view>
                     </u--image>
                  </view>
               </view>
               <view class="car-img">
                  <view class="label-title">
                     <image src="https://mx.jzeg.cn:9095/appimg/image/banner/cardimg.png" mode="widthFix"></image>
                     <view class="label-text">行驶证照片</view>
                  </view>
                  <view class="img-container">
                     <u--image :showLoading="true" :src="userInfo.drivingImg != null ? BaseUrl + userInfo.drivingImg : ''" width="80px" height="80px" @click="imageClick(2)">
                        <view slot="error" style="font-size: 24rpx;">加载失败</view>
                     </u--image>
                  </view>
               </view>
            </view>
         </view>
      </view> -->

      <view class="personal-information-form">
      </view>
      <view class="loginout">
         <view class="loginout-main"><u-button text="退出登录" type="primary" @click="logout" shape="circle" plain></u-button></view>
      </view>
      <!-- <view class="personal-information-form">
         <u--form labelPosition="left" :model="userInfo" ref="form1">
            <u-form-item labelWidth="20%" label="姓名" ref="item1">
               <u--input v-model="userInfo.name" border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
@@ -51,9 +129,9 @@
         <view class="push-information-button">
            <u-button text="修改个人资料" type="primary" @click="editBtnClick"></u-button>
            <u-button text="退出登录" type="primary" @click="logout"></u-button>
         </view>
         <!-- <view class="statistics"><u-button text="发运统计" type="primary" @click="statistics"></u-button></view> -->
      </view>
         </view> -->
      <!-- <view class="statistics"><u-button text="发运统计" type="primary" @click="statistics"></u-button></view> -->
      <!-- </view> -->

      <!-- 图片预览弹出框 -->
      <view class="previewImage-container">
@@ -199,7 +277,7 @@
      uploadFilePromise(url, num) {
         return new Promise((resolve, reject) => {
            let a = uni.uploadFile({
               url: BaseUrl + '/admin/sys-file/uploadUnToken', // 仅为示例，非真实的接口地址
               url: BaseUrl + '/admin/sys-file/uploadUnToken',
               filePath: url,
               name: 'file',
               // formData: {
@@ -271,77 +349,173 @@
</script>

<style lang="scss" scoped>
@mixin flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.statistics {
   margin-top: vww(10);
   margin-bottom: vww(10);
}
::v-deep.driver-my {
   width: 90%;
   width: 100%;
   margin: 0 auto;
   padding-bottom: vww(60);
   // 积分
   .jifen {
      margin-top: vww(24);
   .driver-banner {
      width: 100%;
      height: vww(120);
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
      display: flex;
      flex-direction: row;
      align-items: center;
      .zheng {
         width: 50%;
      height: 430rpx;
      background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
      background-size: contain;
      position: fixed;
      top: 0;
      .navgation {
         width: 77rpx;
         height: 37rpx;
         font-size: 40rpx;
         font-family: Adobe Heiti Std;
         font-weight: normal;
         color: #ffffff;
         line-height: 69rpx;
         margin: vww(60) auto;
      }
      .avatar {
         width: 100%;
         height: 430rpx;
         display: flex;
         image {
            margin-left: vww(32);
            width: vww(48);
            height: vww(48);
         align-items: center;
         position: fixed;
         top: 0;
         .avatar-imgage {
            width: 98rpx;
            height: 98rpx;
            background: #fcfcfc;
            border: 4px solid #ffffff;
            border-radius: 50%;
            margin-left: vww(18);
         }
         .font {
            margin-left: vww(8);
            &-top {
               font-size: vww(28);
               font-weight: 700;
               text-align: left;
               color: #1987ff;
            }
            &-bottom {
               font-size: 14px;
               font-weight: 400;
               text-align: left;
               color: #111111;
            }
         .avatar-name {
            width: 136rpx;
            height: 32rpx;
            font-size: 34rpx;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #ffffff;
            margin-left: vww(17);
         }
         .edit-button {
            position: relative;
            left: vww(94);
            top: vww(4);
         }
      }
      .fu {
         width: 50%;
      .personal-information {
         width: 100%;
         display: flex;
         image {
            margin-left: vww(32);
            width: vww(48);
            height: vww(48);
         }
         .font {
            margin-left: vww(8);
            &-top {
               font-size: vww(28);
               font-weight: 700;
               text-align: left;
               color: #ff4233;
         justify-content: center;
         position: relative;
         top: vww(20);
         &-block {
            width: 690rpx;
            height: 478rpx;
            background: #ffffff;
            box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
            border-radius: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .block-main {
               width: 636rpx;
               margin: vww(10) vww(14);
            }
            &-bottom {
               font-size: 14px;
               font-weight: 400;
               text-align: left;
               color: #111111;

            .information-line {
               @include flex width: 636rpx;
               height: vww(45);
               border-bottom: 1rpx solid #f0f1f6;
               .line-label {
                  width: 188rpx;
                  height: 90rpx;
                  @include flex image {
                     width: 50rpx;
                     height: 50rpx;
                  }
                  .label-text {
                     width: 118rpx;
                     font-size: 30rpx;
                     font-family: Source Han Sans CN;
                     font-weight: 400;
                     color: #000000;
                     line-height: 85rpx;
                  }
               }
               .information-value {
                  width: vww(125);
                  @include flex;
                  font-size: 30rpx;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  color: #000000;
                  line-height: 85rpx;
               }
            }
            .last {
               border-bottom: 0;
            }
         }
      }
   }
   .car-information {
      width: 100%;
      position: relative;
      top: vww(410);
      @include flex justify-content: center;
      .information-main {
         width: 690rpx;
         height: 552rpx;
         background: #ffffff;
         box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
         border-radius: 20rpx;
         .information-body {
            width: 636rpx;
            margin: vww(15) vww(14);
            @include flex flex-direction: column;
            .car-img {
               height: 246rpx;
               width: 100%;
               @include flex flex-direction: column;
               align-items: flex-start;
               .label-title {
                  @include flex width: 200rpx;
                  height: 100rpx;
                  .label-text {
                     width: 200rpx;
                     height: 50rpx;
                  }
                  image {
                     width: 50rpx;
                     height: 50rpx;
                  }
               }
            }
         }
      }
   }
   .loginout {
      width: 100%;
      height: 74rpx;
      @include flex;
      justify-content: center;
      position: relative;
      bottom: vww(-430);
      .loginout-main {
         width: 84%;
      }
   }
   // 表单
   .personal-information-form {
      // margin-top: vww(24);
      margin-top: vww(200);

      .push-information-button {
         display: flex;
         margin: vww(20) auto 0;