更新 分享页样式

miniprogram/pages/sharePage/sharePage.js

@@ -30,7 +30,8 @@ Page({
     pageSize: 20,
     latitude: 31.891992,
     longitude: 120.551369,
-    currentPortId: 0
+    currentPortId: 0,
+    tab3CurrentDischargeIndex: 0
   },
   changeTab(e) {
     let {
@@ -318,9 +319,10 @@ Page({
 
 
   changePort(e) {
-    let currentPortId = e.target.dataset.id
+    let tab3CurrentDischargeIndex = e.detail
     this.setData({
-      currentPortId,
+      tab3CurrentDischargeIndex,
+      currentPortId: this.data.voyage.voyageDetails[tab3CurrentDischargeIndex].portId,
       shipDischargeList: [],
       truckLoadList: [],
     })

miniprogram/pages/sharePage/sharePage.wxml

@@ -1,39 +1,36 @@
-<block wx:if="{{isLogin}}">
-  <map enable-zoom="{{false}}" enable-scroll="{{false}}" markers="{{markers}}" include-points="{{points}}" style="width: 100%;height: 400rpx;" name="map"></map>
-  <view class="df aic jcsb p20" style="border-bottom: 1px solid #999;border-top: 1px solid #999;">
-    <view class="tabsview" bindtap="changeTab" data-tab="{{2}}" style="color:{{tab==2?'#0d8fcc':''}};border-bottom:{{tab==2?'2rpx solid #0d8fcc':''}}">航次信息</view>
-    <view class="tabsview" bindtap="changeTab" data-tab="{{3}}" style="color:{{tab==3?'#0d8fcc':''}};border-bottom:{{tab==3?'2rpx solid #0d8fcc':''}}">单据信息</view>
-    <view class="tabsview" bindtap="changeTab" data-tab="{{4}}" style="color:{{tab==4?'#0d8fcc':''}};border-bottom:{{tab==4?'2rpx solid #0d8fcc':''}}">卸货信息</view>
-    <view class="tabsview" bindtap="changeTab" data-tab="{{5}}" style="color:{{tab==5?'#0d8fcc':''}};border-bottom:{{tab==5?'2rpx solid #0d8fcc':''}}">航次照片</view>
-  </view>
+<!-- <map enable-zoom="{{false}}" enable-scroll="{{false}}" markers="{{markers}}" include-points="{{points}}" latitude="{{latitude}}" longitude="{{longitude}}" style="width: 100%;height: 294rpx;" name="map" class="map"></map> -->
+<view style="width: 100%;height: 294rpx;"></view>
+<view class="df aic jcsa tabs" style="margin-bottom:32rpx">
+  <view class="tabsview {{tab==2?'current-tab':''}}" bindtap="changeTab" data-tab="{{2}}">航次信息</view>
+  <view class="tabsview {{tab==3?'current-tab':''}}" bindtap="changeTab" data-tab="{{3}}">卸货信息</view>
+  <view class="tabsview {{tab==4?'current-tab':''}}" bindtap="changeTab" data-tab="{{4}}">单据信息</view>
+  <view class="tabsview {{tab==5?'current-tab':''}}" bindtap="changeTab" data-tab="{{5}}">航次照片</view>
+</view>
+<scroll-view scroll-y="true" class="scroll" style="{{tab==2?'':'background:#fff'}}" lower-threshold="50">
   <view class="type2" wx:if="{{tab==2}}">
-    <view class="card">
-      <view style="padding: 10rpx 0;border-bottom: 4rpx solid #ddd;">{{shipName}}</view>
-      <view>
-        <view class="df aic mt20 fs24 c3">
-          <view class="df item">
-            <view>装货港</view> <text class="mr20">:</text> {{loadPort}}
-          </view>
-          <view class="df item">
-            <view>卸货港</view> <text class="mr20">:</text> {{detailInfos[0].portName}}
-          </view>
-        </view>
-        <view class="df aic mt10 fs24 c3">
-          <view class="df item">
-            <view>货种</view> <text class="mr20">:</text> {{cargo}}
-          </view>
-          <view class="df item">
-            <view>吨位</view> <text class="mr20">:</text> {{tons}}
-          </view>
-        </view>
+    <view class="card mb20">
+      <view class="line">
+        <view class="title">装货港</view>
+        <view class="content">{{loadPort}}</view>
+      </view>
+      <view class="line">
+        <view class="title">卸货港</view>
+        <view class="content">{{detailInfos[0].portName}}</view>
+      </view>
+      <view class="line">
+        <view class="title">货种</view>
+        <view class="content">{{cargo}}</view>
+      </view>
+      <view class="line" style="margin-bottom:0;">
+        <view class="title">吨位</view>
+        <view class="content">{{tons}}</view>
       </view>
     </view>
     <view style="position: relative;">
-      <scroll-view class="card" scroll-y="true" style="height:calc(100vh - 760rpx);position: relative;z-index: 20;" lower-threshold="50">
-
+      <scroll-view class="card" scroll-y="true" style="height:calc(100vh - 760rpx);position: relative;background: #fff;" lower-threshold="50">
         <view wx:for="{{detailInfos}}" wx:for-index="index0" wx:for-item="item0" wx:if="{{item0.setSailTime}}">
-          <view class="{{['df','mb20']}}" style="position: relative;z-index: 2;">
-            <view class="{{['mr30','title-circle']}}" style="background: green;"></view>
+          <view class="{{['df','mb20']}}" style="position: relative;">
+            <view class="{{['mr30','title-circle']}}" style="background: green;z-index: 55;"></view>
             <view class="text">
               <view class="in-text df">
                 <view class="card-title" style="color:#000;width: 250rpx;margin-right: 30rpx;">卸货港 #{{item0.sort}}</view>
@@ -45,7 +42,7 @@
               </view>
             </view>
           </view>
-          <view class="{{['df','mb20',index==transInfos.length-1?'mb40':'']}}" style="position: relative;z-index: 2;" wx:for="{{item0.transInfos}}" wx:key="index">
+          <view class="{{['df','mb20',index==transInfos.length-1?'mb40':'']}}" style="position: relative;" wx:for="{{item0.transInfos}}" wx:key="index">
             <view class="{{['mr30',index==0?'title-circle transInfos':'circle',arrivalDiscPortTime?'greyback':'']}}"></view>
             <view class="text">
               <view wx:if="{{index==0}}" class="card-title">运输中</view>
@@ -55,7 +52,7 @@
               </view>
             </view>
           </view>
-          <view class="{{['df','mb20',index==loadingInfos.length-1?'mb40':'']}}" style="position: relative;z-index: 2;" wx:for="{{loadingInfos}}" wx:key="index">
+          <view class="{{['df','mb20',index==loadingInfos.length-1?'mb40':'']}}" style="position: relative;" wx:for="{{loadingInfos}}" wx:key="index">
             <view class="{{['mr30',index==0?'title-circle':'circle']}}"></view>
             <view class="text">
               <view wx:if="{{index==0}}" class="card-title">装货中</view>
@@ -66,7 +63,7 @@
             </view>
           </view>
 
-          <view class="{{['df','mb50']}}" style="position: relative;z-index: 2;">
+          <view class="{{['df','mb50']}}" style="position: relative;;">
             <view class="{{['mr30','title-circle']}}"></view>
             <view class="text">
               <view class="in-text df">
@@ -80,80 +77,68 @@
       <view class="long-line"></view>
     </view>
   </view>
-  <scroll-view wx:else scroll-y="true" style="height:calc(100vh - 494rpx);padding: 30rpx 50rpx;font-size: 28rpx;color:#222" lower-threshold="50" bindscrolltolower="test">
-
-
-    <view wx:if="{{tab==3}}">
-      <view>保险单</view>
-      <view wx:for="{{policys}}" wx:key="index" style="text-align: center;">
-        <image data-src="{{item.viewUrl}}" bindtap="previewImage" src="{{item.viewUrl}}" style="width: 60%;height: 240rpx;" mode="aspectFit"></image>
-        <view wx:if="{{policys.length&&policys.length!=1}}" class="mt10 mb10" style="border-bottom: 2rpx solid #eee;"></view>
-      </view>
-      <view class="mt30 mb30" style="border-bottom: 2rpx solid #ccc;"></view>
-      <view>运单</view>
-      <view wx:for="{{waybills}}" wx:key="index" style="text-align: center;">
-        <image data-src="{{item.viewUrl}}" bindtap="previewImage" src="{{item.viewUrl}}" style="width: 60%;height: 240rpx;" mode="aspectFit"></image>
-        <view wx:if="{{waybills.length&&waybills.length!=1}}" class="mt10 mb10" style="border-bottom: 2rpx solid #eee;"></view>
-      </view>
+  <view class="type3" wx:if="{{tab==4}}">
+    <view class="title">保险单</view>
+    <view wx:for="{{policys}}" wx:if="{{policys.length}}" wx:key="index" style="text-align: center;">
+      <image data-src="{{item.viewUrl}}" bindtap="previewImage" src="{{item.viewUrl}}" style="width: 60%;height: 240rpx;" mode="aspectFit"></image>
+      <view wx:if="{{policys.length&&policys.length!=1}}" class="mt20 mb20"></view>
     </view>
-    <view wx:if="{{tab==4}}">
-      <scroll-view scroll-x="{{true}}" style="white-space: nowrap;">
-        <view class="{{['port-btns',currentPortId == item.portId?'current-port-btn':'','mr20']}}" wx:for="{{voyage.voyageDetails}}" bindtap="changePort" data-id="{{item.portId}}">{{item.portName}}</view>
-      </scroll-view>
-      <view class="df aic jcsb pb20" style="border-bottom: 2rpx solid #ddd;">
-        <view bindtap="changeInfoType" data-type="ship" style="color:{{infoType=='ship'?'#0d8fcc':''}};border-bottom:{{infoType=='ship'?'2rpx solid #0d8fcc':''}}">船舶卸货记录</view>
-        <view bindtap="changeInfoType" data-type="truck" style="color:{{infoType=='truck'?'#0d8fcc':''}};border-bottom:{{infoType=='truck'?'2rpx solid #0d8fcc':''}}">汽车装货记录</view>
-      </view>
-      <view class="ship-discharge-list" wx:if="{{infoType=='ship'}}">
-        <view class="df aic jcsb mb20 mt10 fs22">
-          <view>卸货时间</view>
-          <view>卸货吨位</view>
-          <view>卸货件数</view>
-          <view>磅单</view>
-        </view>
-        <view wx:for="{{shipDischargeList}}" wx:key="index" class="df aic jcsb mb20 fs22">
-          <view>{{item.dischargeTime}}</view>
-          <view>{{item.dischargeTons||''}}</view>
-          <view>{{item.dischargePieces||''}}</view>
-          <view wx:if="{{item.files&&item.files.length}}" bindtap="previewImage" data-src="{{item.files[0].viewUrl}}" data-files="{{item.files}}">查看</view>
-          <view wx:else>暂无</view>
-        </view>
-        <view bindtap="scrollShip" class="bottom-text">{{shipDischargeTotal==0?'暂无数据':(shipDischargeTotal>pageSize*shipDischargeCurrentPage?'点击或滑动加载更多...':'已加载完毕')}}</view>
+    <view wx:if="{{policys.length==0}}" class="no-data">暂无数据</view>
+    <view class="title">运单</view>
+    <view wx:for="{{waybills}}" wx:if="{{waybills.length}}" class="mt20 mb20" wx:key="index" style="text-align: center;">
+      <image data-src="{{item.viewUrl}}" bindtap="previewImage" src="{{item.viewUrl}}" style="width: 60%;height: 240rpx;" mode="aspectFit"></image>
+    </view>
+    <view wx:if="{{waybills.length==0}}" class="no-data">暂无数据</view>
+  </view>
+  <view wx:if="{{tab==3}}">
+    <PortsBar arr="{{voyage.voyageDetails}}" key="portId" currentIndex="{{tab3CurrentDischargeIndex}}" label="portName" bind:tapTab="changePort"></PortsBar>
+    <view class="info-types df aic">
+      <view bindtap="changeInfoType" style="margin-right: 36rpx;" class="{{infoType=='ship'?'current-type':''}}" data-type="ship">船舶卸货记录</view>
+      <view bindtap="changeInfoType" class="{{infoType=='truck'?'current-type':''}}" data-type="truck">汽车装货记录</view>
+    </view>
+    <view class="ship-discharge-list" wx:if="{{infoType=='ship'}}">
+      <view class="df aic jcsb th" wx:if="{{shipDischargeList.length}}">
+        <view class="tr tr-time">卸货时间</view>
+        <view class="tr tr-4">卸货吨位</view>
+        <view class="tr tr-4">卸货件数</view>
+        <view class="tr tr-2">磅单</view>
       </view>
-      <view class="truck-load-list" wx:if="{{infoType=='truck'}}">
-        <view class="df aic jcsb mb20 mt10 fs22">
-          <view>车号</view>
-          <view>毛重</view>
-          <view>皮重</view>
-          <view>净重</view>
-          <view>称重时间</view>
-          <view>单据</view>
-        </view>
-        <view wx:for="{{truckLoadList}}" wx:key="index" class="df aic jcsb mb20 fs22">
-          <view>{{item.carNum}}</view>
-          <view>{{item.grossWeight}}</view>
-          <view>{{item.tare}}</view>
-          <view>{{item.netWeight}}</view>
-          <view>{{item.weighTime}}</view>
-          <view wx:if="{{item.file}}" bindtap="previewImage" data-src="{{item.file.viewUrl}}">查看</view>
-          <view wx:else>暂无</view>
-        </view>
-        <view bindtap="scrollTruck" class="bottom-text">{{truckLoadTotal==0?'暂无数据':(truckLoadTotal>pageSize*truckLoadCurrentPage?'点击或滑动加载更多...':'已加载完毕')}}</view>
+      <view wx:else="" class="no-data">暂无数据</view>
+      <view wx:for="{{shipDischargeList}}" wx:key="index" class="df aic jcsb td">
+        <view class="tr tr-time">{{item.dischargeTime}}</view>
+        <view class="tr tr-4">{{item.dischargeTons||''}}</view>
+        <view class="tr tr-4">{{item.dischargePieces||''}}</view>
+        <view class="tr tr-2" wx:if="{{item.files&&item.files.length}}" style="color: #0089FD;" bindtap="previewImage" data-src="{{item.files[0].viewUrl}}" data-files="{{item.files}}">查看</view>
+        <view class="tr tr-2" wx:else>暂无</view>
       </view>
+      <!-- <view bindtap="scrollShip" class="bottom-text">{{shipDischargeTotal==0?'暂无数据':(shipDischargeTotal>pageSize*shipDischargeCurrentPage?'点击或滑动加载更多...':'已加载完毕')}}</view> -->
     </view>
-    <view wx:if="{{tab==5}}">
-      <view wx:for="{{medias}}" wx:key="index" style="margin-bottom:50rpx;">
-        <view style="color: #0c81b8;padding-bottom: 10rpx;margin-bottom: 20rpx; border-bottom: 4rpx dashed rgb(197, 194, 194);">{{item.createTime}}</view>
-        <image data-src="{{item.viewUrl}}" bindtap="previewImage" src="{{item.viewUrl}}" style="width: 90%;" mode="aspectFit"></image>
+    <view class="truck-load-list" wx:if="{{infoType=='truck'}}">
+      <view wx:if="{{truckLoadList.length}}" class="df aic jcsb th">
+        <view class="tr tr-car-num">车号</view>
+        <view class="tr tr-3">毛重</view>
+        <view class="tr tr-3">皮重</view>
+        <view class="tr tr-3">净重</view>
+        <view class="tr tr-time">称重时间</view>
+        <view class="tr tr-2">单据</view>
+      </view>
+      <view wx:else="" class="no-data">暂无数据</view>
+      <view wx:for="{{truckLoadList}}" wx:key="index" class="df aic jcsb td">
+        <view class="tr tr-car-num">{{item.carNum}}</view>
+        <view class="tr tr-3">{{item.grossWeight}}</view>
+        <view class="tr tr-3">{{item.tare}}</view>
+        <view class="tr tr-3">{{item.netWeight}}</view>
+        <view class="tr tr-time">{{item.weighTime}}</view>
+        <view class="tr tr-2" wx:if="{{item.file}}" style="color: #0089FD;" bindtap="previewImage" data-src="{{item.file.viewUrl}}">查看</view>
+        <view class="tr tr-2" wx:else>暂无</view>
       </view>
     </view>
-  </scroll-view>
-</block>
-<block wx:else>
-  <image style="margin:0 auto;display:block;width: 400rpx;margin-top: 10vh;height: 140rpx;" mode="aspectFit" src="https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/miniapp-static/%E6%B1%87%E5%BE%88%E5%A4%9Alogo-%E5%B7%A6%E5%8F%B3.png?sign=fcd18f89de727b0193395cd2d44a730a&t=1647417257"></image>
-  <view style="margin-top: 100rpx;font-size: 50rpx;color: #333;text-align: center;">汇很多运输管家先行版
   </view>
-  <view class="df jcc" style="position:absolute;bottom: 15vh;width: 100%;">
-    <PhoneButton type="primary" bindloginEvent="loginEvent">登录以查看分享</PhoneButton>
+  <view class="type5" wx:if="{{tab==5}}">
+    <view wx:if="{{medias.length}}" wx:for="{{medias}}" wx:key="index">
+      <view class="timer">{{item.createTime}}</view>
+      <image data-src="{{item.viewUrl}}" class="type5-img" bindtap="previewImage" src="{{item.viewUrl}}" mode="aspectFit"></image>
+    </view>
+    <view wx:if="{{medias.length==0}}" class="no-data">暂无照片</view>
   </view>
-</block>
+</scroll-view>

miniprogram/pages/sharePage/sharePage.wxss

@@ -1,7 +1,4 @@
 /* components/voyages/Voyages.wxss */
-page {
-  background: #fff;
-}
 
 .df {
   display: flex;
@@ -33,14 +30,6 @@ page {
   background: #fff;
 }
 
-.tabs {
-  width: 100%;
-  height: 100rpx;
-  background: #fff;
-  box-shadow: rgb(209, 206, 206) 5rpx 5rpx 10rpx;
-  border-bottom: 2rpx solid grey;
-}
-
 .tabsview {
   width: 130rpx;
   height: 50rpx;
@@ -135,12 +124,11 @@ page {
 }
 
 .card {
-  padding: 20rpx 30rpx;
-  border: 2rpx solid #ddd;
-  width: 95%;
-  margin: 20rpx auto;
-  border-radius: 20rpx;
-  box-shadow: 3rpx 1rpx 5px #ddd;
+  width: 694rpx;
+  background: #FFFFFF;
+  border-radius: 12rpx;
+  margin: 0 auto;
+  padding: 32rpx 24rpx;
 }
 
 .circle {
@@ -151,7 +139,7 @@ page {
   position: relative;
   left: 4rpx;
   margin-right: 38rpx;
-  z-index: 20;
+  z-index: 55;
 }
 
 .greyback {
@@ -164,7 +152,7 @@ page {
   border-radius: 50%;
   background: #999;
   position: relative;
-  z-index: 20;
+  z-index: 55;
 }
 
 
@@ -174,22 +162,24 @@ page {
 }
 
 .long-line {
-  border: 2rpx solid #ddd;
+  border: 2rpx dashed #B0CDF0;
   height: calc(100vh - 800rpx);
   position: absolute;
-  left: 62rpx;
+  left: 36rpx;
   top: 24rpx;
-  z-index: 0;
+  z-index: 22;
 }
 
 .card-title {
   font-size: 26rpx;
   margin-bottom: 8rpx;
   line-height: 30rpx;
+  z-index: 55;
 }
 
 .transInfos {
   background: rgb(197, 56, 56);
+  z-index: 55;
 }
 
 
@@ -208,4 +198,340 @@ page {
   color: #fff;
   background: #008ebd;
   border: none;
+}
+
+.cancel-voyage {
+  width: 100vw;
+  height: 80rpx;
+  background: rgba(255, 100, 47, 0.15);
+  text-align: center;
+  line-height: 80rpx;
+  font-size: 28rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #FF6E38;
+  position: fixed;
+  top: 0;
+  z-index: 100;
+}
+
+
+.tabsview {
+  height: 80rpx;
+  line-height: 84rpx;
+  font-size: 28rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #9199A3;
+}
+
+.current-tab {
+  color: #363F4A;
+  border-bottom: 6rpx solid #0089FD;
+  font-size: 32rpx;
+
+}
+
+.scroll {
+  width: 100vw;
+  border-radius: 12rpx;
+  height: calc(100vh - 410rpx);
+  font-size: 28rpx;
+  color: #222;
+  padding-bottom: 50rpx;
+  border-radius: 12rpx;
+  padding: 0 30rpx 40rpx 30rpx;
+}
+
+.line {
+  margin-bottom: 20rpx;
+}
+
+.line-full-item {
+  display: flex;
+  align-items: center;
+}
+
+.line-full-title {
+  width: 240rpx;
+  font-size: 30rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #BDC2C8;
+}
+
+.line-text {
+  flex: 1;
+  font-size: 30rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #6C6C6C;
+}
+
+
+.mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 101;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.mask>view {
+  width: 640rpx;
+  height: 362rpx;
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  position: fixed;
+  top: 358rpx;
+  left: calc(50vw - 320rpx);
+}
+
+.upload {
+  width: 60%;
+  height: 100rpx;
+  text-align: center;
+  line-height: 100rpx;
+  border: 1px solid grey;
+  margin: 3vw auto;
+}
+
+.ship-owner-title {
+  width: 300rpx;
+  text-align: center;
+  font-size: 34rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #20252E;
+  margin: 40rpx auto;
+}
+
+.btns {
+  height: 113rpx;
+  border-bottom-left-radius: 10rpx;
+  border-bottom-right-radius: 10rpx;
+  border-top: 1rpx solid rgba(0, 0, 0, 0.25);
+  margin-top: 50rpx;
+}
+
+.btn {
+  width: 50%;
+  line-height: 100rpx;
+  font-size: 34rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0089FD;
+  text-align: center;
+}
+
+.btn-1 {
+  color: #20252E;
+  height: 102rpx;
+  border-right: 1rpx solid rgba(0, 0, 0, 0.25);
+}
+
+.type2 .line-full-item {
+  padding: 32rpx 0;
+  border-bottom: 1rpx solid #EBEBEB;
+}
+
+.type2 .line {
+  font-size: 30rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #6C6C6C;
+}
+
+.type2 .line-full-title {
+  width: 260rpx;
+  color: #20252E;
+}
+
+.arrow {
+  width: 20rpx;
+  height: 20rpx;
+  margin-right: 30rpx;
+}
+
+.d-input {
+  width: 30vw;
+}
+
+.update {
+  width: 590rpx;
+  height: 96rpx;
+  background: linear-gradient(270deg, #0089FD 0%, #43A9FF 100%);
+  border-radius: 20rpx;
+  text-align: center;
+  line-height: 96rpx;
+  font-size: 34rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #FFFFFF;
+  margin: 0 auto;
+}
+
+.type2 .unit {
+  color: #333;
+}
+
+.ports {
+  margin: 40rpx 0 39rpx 0;
+}
+
+.ports>view {
+  width: 150rpx;
+  height: 60rpx;
+  font-size: 26rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0089FD;
+  line-height: 58rpx;
+  text-align: center;
+  border-top: 1rpx solid #0089FD;
+  border-bottom: 1rpx solid #0089FD;
+  border-left: 1rpx solid #0089FD;
+}
+
+.first-port {
+  border-radius: 20rpx 0px 0px 20rpx;
+}
+
+.last-port {
+  border-radius: 0px 20rpx 20rpx 0px;
+  border-right: 1rpx solid #0089FD;
+}
+
+.current-port {
+  color: #fff !important;
+  background: linear-gradient(270deg, #0089FD 0%, #43A9FF 100%);
+  border: none !important;
+  line-height: 60rpx;
+}
+
+.one-port {
+  border-radius: 20rpx 20rpx 20rpx 20rpx;
+}
+
+picker {
+  width: 45vw;
+}
+
+.info-types {
+  margin-bottom: 33rpx;
+}
+
+.info-types>view {
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #333333;
+}
+
+.current-type {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  color: #239AFE !important;
+}
+
+.th {
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #BDC2C8;
+  margin-bottom: 22rpx;
+}
+
+.td {
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #363F4A;
+  margin-bottom: 20rpx;
+}
+
+.tr {
+  text-align: center;
+}
+
+.tr-time {
+  width: 170rpx;
+}
+
+.tr-2 {
+  min-width: 56rpx;
+}
+
+.tr-3 {
+  width: 90rpx;
+}
+
+.tr-4 {
+  width: 112rpx;
+}
+
+.tr-car-num {
+  min-width: 160rpx;
+}
+
+.no-data {
+  text-align: center;
+  color: #9199A3;
+}
+
+.type3 {
+  padding-top: 32rpx;
+}
+
+.type3 .title {
+  height: 27rpx;
+  line-height: 27rpx;
+  font-size: 30rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #239AFE;
+  padding-left: 18rpx;
+  border-left: 4rpx solid #0089FD;
+  margin-bottom: 30rpx;
+}
+
+.type5 {
+  padding-top: 32rpx;
+}
+
+.type5 .timer {
+  font-size: 30rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #239AFE;
+}
+
+.type5-img {
+  margin-top: 24rpx;
+  margin-bottom: 32rpx;
+  height: 265rpx;
+}
+
+.mb20 {
+  margin-bottom: 20rpx;
+}
+
+.content {
+  font-size: 30rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #6C6C6C;
+  flex: 1;
+}
+
+
+.title {
+  width: 180rpx;
+  font-size: 30rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #BDC2C8;
+  margin-right: 40rpx;
 }