更新 首页样式

miniprogram/app.wxss

@@ -5,7 +5,6 @@ cover-view,
 input,
 picker {
   box-sizing: border-box;
-  color: #333;
 }
 
 .tac {
@@ -32,10 +31,18 @@ picker {
   justify-content: space-around;
 }
 
+.jcs {
+  justify-content: start;
+}
+
 .aic {
   align-items: center;
 }
 
+.aib {
+  align-items: baseline;
+}
+
 .m10a {
   margin: 10rpx auto;
 }

miniprogram/pages/index/index.js

@@ -8,6 +8,8 @@ const app = getApp()
 Page({
   data: {
     indexInfo: {},
+    loginName: '',
+    logoUrl: ""
   },
   async getIndexInfo() {
     let res = await postApi('/index', {
@@ -36,6 +38,10 @@ Page({
   onLoad() {},
   onShow() {
     this.getIndexInfo()
+    this.setData({
+      loginName: wx.getStorageSync('loginName'),
+      logo: wx.getStorageSync('logo')
+    })
   },
   goTo(e) {
     if (!wx.getStorageSync('loginAccountId')) {

miniprogram/pages/index/index.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
     "Voyages": "/components/voyages/voyages"
-  }
+  },
+  "navigationStyle":"custom"
 }

miniprogram/pages/index/index.wxml

@@ -1,66 +1,108 @@
-<view catchtouchmove="forbidTouchMove">
-  <view>
-    <view class="block-line df aic">
-      <view style="width: 100%;">
-        <view>执行中航次数量</view>
-        <view>{{indexInfo.activeVoyageNum||"*"}}</view>
+<view class="back-top"></view>
+<view class="df aic" style="margin-top: 124rpx;font-size: 36rpx;">
+  <image src="{{logo}}" class="avatar"></image>
+  <view class="avatar-text" style="color: #fff;">你好, {{loginName||'请登录'}}</view>
+</view>
+<view class="data">
+  <view class="df aic jcsb" style="margin-bottom: 48rpx;">
+    <view class=" data-box">
+      <view class="df aib">
+        <view class="nums">{{indexInfo.activeVoyageNum||"*"}}</view>
+        <view class="unit">次</view>
       </view>
+      <view class="text">执行中航次数量</view>
     </view>
-    <view class="block-line df aic">
-      <view>
-        <view>装载吨位</view>
-        <view>{{indexInfo.loadTons||"*"}}</view>
-      </view>
-      <view>
-        <view>卸载吨位</view>
-        <view>{{indexInfo.discTons||"*"}}</view>
+    <view class="shu"></view>
+    <view class=" data-box">
+      <view class="df aib">
+        <view class="nums">{{indexInfo.loadTons||"*"}}</view>
+        <view class="unit">吨</view>
       </view>
+      <view class="text">装载吨位</view>
     </view>
   </view>
-  <scroll-view scroll-y="{{true}}" class="tools">
-    <view class="df jcsa tac">
-      <view bindtap="goTo" data-maintab="{{2}}" class="go-to" data-url="/pages/voyageManage/voyageManage">
-        <image class="index-image" src="../../images/camera.png"></image>
-        <view>日 报</view>
-        <view class="badge">{{indexInfo.dayReportNum||0}}</view>
+  <view class="df aic jcsb">
+    <view class="data-box">
+      <view class="df aib">
+        <view class="nums">{{indexInfo.discTons||"*"}}</view>
+        <view class="unit">吨</view>
       </view>
-      <view bindtap="goTo" data-maintab="{{1}}" class="go-to" data-url="/pages/voyageManage/voyageManage">
-        <image class="index-image" src="../../images/ship.png"></image>
-        <view>卸 货</view>
-        <view class="badge">{{indexInfo.discVoyageNum||0}}</view>
+      <view class="text">卸载吨位</view>
+    </view>
+    <view class="shu"></view>
+    <view class=" data-box">
+      <view class="df aib">
+        <view class="text">暂未开启</view>
       </view>
     </view>
-    <view class="df jcsa tac">
-      <view bindtap="goTo" data-maintab="{{3}}" class="go-to" data-url="/pages/voyageManage/voyageManage">
-        <image class="index-image" src="../../images/bills.png"></image>
-        <view>单 据</view>
-        <view class="badge">{{indexInfo.billNum||0}}</view>
+  </view>
+</view>
+<view class="func">
+  <view class="df aic jcsb func-line">
+    <view class="df aic" bindtap="goTo" data-url="/pages/voyageManage/createVoyage/createVoyage">
+      <image class="icon" src="https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/sun.jpg"></image>
+      <view>
+        <view class="title">创建航次</view>
+        <!-- <view class="df aic">
+          <view class="text">数量</view>
+          <view class="num">39</view>
+        </view> -->
       </view>
-      <view bindtap="goTo" class="go-to" data-url="/pages/voyageManage/createVoyage/createVoyage">
-        <image class="index-image" src="../../images/rudder.png"></image>
-        <view>创建航次</view>
+    </view>
+    <view class="df aic func-line-right" bindtap="goTo" data-maintab="{{2}}" data-url="/pages/voyageManage/voyageManage">
+      <image class="icon" src="https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/note.jpg"></image>
+      <view>
+        <view class="title">日报</view>
+        <view class="df aic">
+          <view class="text">数量</view>
+          <view class="num">{{indexInfo.dayReportNum||0}}</view>
+        </view>
       </view>
     </view>
-    <view class="df jcsa tac">
-      <!-- <view bindtap="goTo" class="go-to" data-url="/pages/index/security/security">
-        <image class="index-image" src="../../images/security.png"></image>
-        <view>安全</view>
-      </view> -->
-      <view bindtap="goTo" class="go-to" data-url="/pages/index/declarePort/voyageList">
-        <image class="index-image" src="../../images/port.png"></image>
-        <view>报 港</view>
+  </view>
+  <view class="df aic jcsb func-line">
+    <view class="df aic" bindtap="goTo" data-maintab="{{1}}" data-url="/pages/voyageManage/voyageManage">
+      <image class="icon" src="https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/sun.jpg"></image>
+      <view>
+        <view class="title">卸货</view>
+        <view class="df aic">
+          <view class="text">数量</view>
+          <view class="num">{{indexInfo.discVoyageNum||0}}</view>
+        </view>
       </view>
-      <view bindtap="goTo" class="go-to" data-url="/pages/index/weather/weatherList">
-        <image class="index-image" src="../../images/weather.png"></image>
-        <view>天气查询</view>
+    </view>
+    <view class="df aic func-line-right" bindtap="goTo" data-maintab="{{3}}" data-url="/pages/voyageManage/voyageManage">
+      <image class="icon" src="https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/note.jpg"></image>
+      <view>
+        <view class="title">单据</view>
+        <view class="df aic">
+          <view class="text">数量</view>
+          <view class="num">{{indexInfo.billNum||0}}</view>
+        </view>
       </view>
     </view>
-    <!-- <view class="df jcsa tac">
-    
-      <view class="go-to">
-        <view class="index-image"></view>
-        <view></view>
+  </view>
+  <view class="df aic jcsb func-line" style="border:none">
+    <view class="df aic" bindtap="goTo" data-url="/pages/index/weather/weatherList">
+      <image class="icon" src="https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/sun.jpg"></image>
+      <view>
+        <view class="title">天气查询</view>
+        <!-- <view class="df aic">
+          <view class="text">温度</view>
+          <view class="num">39℃</view>
+        </view> -->
       </view>
-    </view> -->
-  </scroll-view>
+    </view>
+    <view class="df aic func-line-right" bindtap="goTo" data-url="/pages/index/declarePort/voyageList">
+      <image class="icon" src="https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/note.jpg"></image>
+      <view>
+        <view class="title">报港</view>
+        <!-- <view class="df aic">
+          <view class="text">数量</view>
+          <view class="num">39</view>
+        </view> -->
+      </view>
+    </view>
+  </view>
+  <view class="func-shu"></view>
 </view>

miniprogram/pages/index/index.wxss

@@ -1,88 +1,120 @@
-.block-line>view {
-  width: 50%;
-  text-align: center;
-  color: #fff;
-  height: 18vh;
+page {
+  background: #F7F8F9;
 }
 
-.block-line:first-child>view:first-child {
-  background: #27ae60;
+.back-top {
+  background: #131D55;
+  height: 400rpx;
+  width: 100vw;
+  position: absolute;
+  z-index: -11;
+  top: 0;
 }
 
-.block-line:first-child>view:last-child {
-  background: #27ae60;
+.avatar {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  background: #fff;
+  margin-left: 44rpx;
+  margin-right: 20rpx;
 }
 
-.block-line:last-child>view:first-child {
-  background: #e67e22;
+.data {
+  width: 694rpx;
+  height: 328rpx;
+  background: #0089FD;
+  border-radius: 8rpx;
+  margin: 0 auto;
+  margin-top: 32rpx;
+  color: #fff;
+  padding: 40rpx 50rpx;
 }
 
-.block-line:last-child>view:last-child {
-  background: #2980b9;
+.data .data-box {
+  width: 240rpx;
 }
 
-.block-line>view>view:first-child {
-  margin-top: 40rpx;
-  margin-bottom: 30rpx;
+.shu {
+  width: 2rpx;
+  height: 71rpx;
+  opacity: 0.5;
+  border-left: 1rpx solid #FFFFFF;
 }
 
-.search {
-  border: 1rpx solid grey;
-  width: 80%;
-  background: #fff;
+.data .nums {
+  font-size: 48rpx;
+  font-family: Helvetica-Bold, Helvetica;
+  font-weight: bold;
+  color: #FFFFFF;
+  margin-bottom: 16rpx;
 }
 
-.tabs {
-  width: 100%;
-  height: 100rpx;
-  background: #fff;
-  box-shadow: rgb(209, 206, 206) 5rpx 5rpx 10rpx
+.data .unit {
+  font-size: 26rpx;
+  font-family: Helvetica-Bold, Helvetica;
+  font-weight: bold;
+  color: #FFFFFF;
+  margin-left: 18rpx;
 }
 
-.tabs>view {
-  width: 100rpx;
-  height: 60rpx;
+.data .text {
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 22rpx;
 }
 
-.tools {
-  height: calc(100vh - 36vh);
+.func {
+  width: 694rpx;
+  height: 600rpx;
+  background: #FFFFFF;
+  box-shadow: 0px 4rpx 14rpx 0rpx rgba(0, 0, 0, 0.02);
+  border-radius: 8rpx;
+  margin: 0 auto;
+  margin-top: 20rpx;
+  position: relative;
 }
 
-.tools>view {
-  height: 20vh;
+.func .icon {
+  width: 64rpx;
+  height: 64rpx;
+  margin-right: 38rpx;
 }
 
-.tools>view>view {
-  width: 50vw;
-  text-align: center;
+.func .title {
+  font-size: 36rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #2A3245;
 }
 
-.tools>view>view>image {
-  width: 50vw;
-  height: 50vw;
-  margin-top: 10%;
+.func .text {
+  font-size: 30rpx;
+  color: #A3A8B3;
+  margin-right: 12rpx;
 }
 
-.go-to {
-  position: relative;
+.func .num {
+  font-size: 36rpx;
+  color: #2A3245;
+}
+
+.func-line {
+  width: 590rpx;
+  height: 200rpx;
+  margin: 0 auto;
+  border-bottom: 1px solid #dee2e9;
 }
 
-.badge {
+.func-shu {
+  height: calc(100% - 120rpx);
+  border-left: 1rpx solid #E1E5ED;
   position: absolute;
-  width: 50rpx;
-  height: 50rpx;
-  text-align: center;
-  line-height: 50rpx;
-  background: #f86065;
-  border-radius: 25rpx;
-  color: #fff;
-  font-size: 30rpx;
-  top: 10vw;
-  right: 0vw;
+  top: 60rpx;
+  left: 50%;
 }
 
-.index-image {
-  width: 25vw;
-  height: 25vw;
-  margin-top: 10%;
+.func-line-right {
+  width: 240rpx;
 }