优化首页

nsgk_entry/pages/index/index.js

@@ -1,69 +1,46 @@
-// pages/index/index.js
 import * as UTIL from '../../utils/util.js';
 Page({
-
-    /**
-     * 页面的初始数据
-     */
     data: {
-        isIPhoneX:false
+        //顶部胶囊按钮位置信息rect
+        CustomMenuButton: null,
+        wrokScrollHeight:0
     },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
     onLoad: function (options) {
-        this.setData({
-            isIPhoneX:UTIL.isIPhoneX()
-        })
+        this.computeBarLocation()
     },
-
-    /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
     onReady: function () {
-
     },
-
-    /**
-     * 生命周期函数--监听页面显示
-     */
     onShow: function () {
-
     },
-
-    /**
-     * 生命周期函数--监听页面隐藏
-     */
     onHide: function () {
-
     },
-
     /**
-     * 生命周期函数--监听页面卸载
-     */
-    onUnload: function () {
-
-    },
-
-    /**
-     * 页面相关事件处理函数--监听用户下拉动作
-     */
-    onPullDownRefresh: function () {
-
-    },
-
-    /**
-     * 页面上拉触底事件的处理函数
-     */
-    onReachBottom: function () {
-
+   * 计算bar 高度
+   */
+    computeBarLocation() {
+      var that = this;
+      let CustomMenuButton = wx.getMenuButtonBoundingClientRect();
+      let CustomWidows = wx.getSystemInfoSync();
+      // 根据文档，先创建一个SelectorQuery对象实例
+      let query = wx.createSelectorQuery().in(this);
+      query.select('.top_title').boundingClientRect();
+      query.select('.information_header').boundingClientRect();
+      query.select('.navList_main').boundingClientRect();
+      query.select('.child_function').boundingClientRect();
+      query.select('.work_plan').boundingClientRect();
+      
+      query.exec((res) => {
+        let wrokScrollHeight = CustomWidows.windowHeight;
+        res.forEach((v)=>{
+          wrokScrollHeight = wrokScrollHeight - v.height;
+        })
+        wrokScrollHeight = wrokScrollHeight-CustomMenuButton.top-CustomMenuButton.bottom -15;
+        that.setData({
+          wrokScrollHeight: wrokScrollHeight,
+        });
+      })
+      that.setData({
+        CustomMenuButton: CustomMenuButton,
+      });
     },
-
-    /**
-     * 用户点击右上角分享
-     */
-    onShareAppMessage: function () {
-
-    }
 })

nsgk_entry/pages/index/index.wxml

@@ -1,15 +1,249 @@
-<view class="container" style="background: url('../../image/login/container_bg.jpg') center center  no-repeat; background-size: 100% auto;">
-    <view class="header">
-        <view class="principal">农村事项审批与记账</view>
-        <view class="instructions">报账简单，操作便捷</view>
+<view class="container" style="background:url('../../image/index/header_bg.png') top center no-repeat; background-size: 100% auto;">
+    
+     <!--自定义 顶部标题样式和位置-->
+    <view class="top_title" style="height:{{CustomMenuButton.bottom}}px;z-index: 7777;padding-top: {{CustomMenuButton.top}}px;"></view>
+    <!--账户信息-->
+    <view class="information_header">
+        <view class="portrait_head"></view>
+        <view class="information_main">
+            <view class="name_wrap">
+                <text class="name">张没事</text>
+                <view class="jobs">
+                    <view class="icon" style="background:url('../../image/index/header_job.png') no-repeat; background-size: 100% 100%;"></view>
+                     报账员
+                </view>
+            </view>
+            <view class="task_wrap ">
+                <view class="flex_block">
+                    <view class="desc">已完成</view>
+                    <view class="event">120件</view>
+                </view>
+                <view class="flex_block unfinished">
+                    <view class="desc">已完成</view>
+                    <view class="event">120件</view>
+                </view>
+            </view>
+            <view class="address_wrap">
+                <view class="icon"></view>
+                山东省威海市环翠区李
+            </view> 
+
+        </view>
+    </view>
+    <!--主导航-->
+    <view class="navList_main">
+        <view class="tab_item">
+            <view class="icon">
+                <image class="icon_img" src="../../image/index/nav_01.png" mode="aspectFit"></image>
+            </view>
+            <text class="desc">支出申请</text>
+        </view>
+        <view class="tab_item">
+            <view class="icon">
+                <image class="icon_img" src="../../image/index/nav_02.png" mode="aspectFit"></image>
+            </view>
+            <text class="desc">收入登记</text>
+        </view>
+        <view class="tab_item">
+            <view class="icon">
+                <image class="icon_img" src="../../image/index/nav_03.png" mode="aspectFit"></image>
+            </view>
+            <text class="desc">记账申请</text>
+        </view>
+        <view class="tab_item">
+            <view class="icon">
+             <image class="icon_img" src="../../image/index/nav_04.png" mode="aspectFit"></image>
+            </view>
+            <text class="desc">财务公开</text>
+        </view>
     </view>
-    <view class="quick-login" style="bottom:{{isIPhoneX?'8vh':'5vh'}}">
-        <view class="key-login">微信一键登录</view>
-        <view class="authorization" style="margin-top:{{isIPhoneX?'5vh':'3vh'}}">
-            <label>
-                <checkbox value="cb" checked="true" class="changeSize"/>
-                <text>我已阅读并同意用户协议和隐私政策</text>
-            </label>
+    <!--子导航功能导航-->
+    <view class="child_function">
+        <view class="flex_block">
+            <view class="image"><image class="attribute" src="../../image/index/child_function_01.png" mode="aspectFit"></image></view>
+            <text class="desc">收款人</text>
         </view>
+        <view class="flex_block">
+            <view class="image"><image class="attribute" src="../../image/index/child_function_02.png" mode="aspectFit"></image></view>
+            <text class="desc">付款人</text>
+        </view>
+        <view class="flex_block">
+            <view class="image"><image class="attribute" src="../../image/index/child_function_03.png" mode="aspectFit"></image></view>
+            <text class="desc">合同报送</text>
+        </view>
+        <view class="flex_block">
+            <view class="image"><image class="attribute" src="../../image/index/child_function_04.png" mode="aspectFit"></image></view>
+            <text class="desc">固资变动</text>
+        </view>
+        <view class="flex_block">
+            <view class="image"><image class="attribute" src="../../image/index/child_function_05.png" mode="aspectFit"></image></view>
+            <text class="desc">资源变动</text>
+        </view>
+    </view>
+    <!--工作计划-->
+    <view class="work_plan">
+        <view class="menu_item active">待办<text class="remind">0</text></view>
+        <view class="menu_item">已办</view>
+        <view class="menu_item">已发起</view>
+        <view class="menu_item">已制单</view>
+        <view class="more">></view>
     </view>
+
+    <scroll-view scroll-y="true" style="height: {{wrokScrollHeight}}px;"> 
+        <view class="workflow">
+            <!--1-->
+            <view class="workflow_list">
+                <view class="process_intro">
+                    <view class="name">我的擦撒十大黑科技暗杀可接受的和</view>
+                    <view class="state">待审</view>
+                    <view class="time">2021-1-26</view>
+                </view>
+                <view class="process_pay">
+                    <view class="describe">
+                        <image  class="amount_icon"  src="../../image/index/process_icon.png" mode="aspectFit"></image>
+                        <text>银行转账</text>
+                    </view>
+                    <view class="amount"><text class="unit">￥</text>-2600.00</view>
+                </view>
+            </view> 
+            <!--1-->
+            <view class="workflow_list">
+                <view class="process_intro">
+                    <view class="name">我的擦撒十大黑科技暗杀可接受的和</view>
+                    <view class="state">待审</view>
+                    <view class="time">2021-1-26</view>
+                </view>
+                <view class="process_pay">
+                    <view class="describe">
+                        <image  class="amount_icon"  src="../../image/index/process_icon.png" mode="aspectFit"></image>
+                        <text>银行转账</text>
+                    </view>
+                    <view class="amount"><text class="unit">￥</text>-2600.00</view>
+                </view>
+            </view> 
+            <!--1-->
+            <view class="workflow_list">
+                <view class="process_intro">
+                    <view class="name">我的擦撒十大黑科技暗杀可接受的和</view>
+                    <view class="state">待审</view>
+                    <view class="time">2021-1-26</view>
+                </view>
+                <view class="process_pay">
+                    <view class="describe">
+                        <image  class="amount_icon"  src="../../image/index/process_icon.png" mode="aspectFit"></image>
+                        <text>银行转账</text>
+                    </view>
+                    <view class="amount"><text class="unit">￥</text>-2600.00</view>
+                </view>
+            </view> 
+            <!--1-->
+            <view class="workflow_list">
+                <view class="process_intro">
+                    <view class="name">我的擦撒十大黑科技暗杀可接受的和</view>
+                    <view class="state">待审</view>
+                    <view class="time">2021-1-26</view>
+                </view>
+                <view class="process_pay">
+                    <view class="describe">
+                        <image  class="amount_icon"  src="../../image/index/process_icon.png" mode="aspectFit"></image>
+                        <text>银行转账</text>
+                    </view>
+                    <view class="amount"><text class="unit">￥</text>-2600.00</view>
+                </view>
+            </view> 
+            <!--1-->
+            <view class="workflow_list">
+                <view class="process_intro">
+                    <view class="name">我的擦撒十大黑科技暗杀可接受的和</view>
+                    <view class="state">待审</view>
+                    <view class="time">2021-1-26</view>
+                </view>
+                <view class="process_pay">
+                    <view class="describe">
+                        <image  class="amount_icon"  src="../../image/index/process_icon.png" mode="aspectFit"></image>
+                        <text>银行转账</text>
+                    </view>
+                    <view class="amount"><text class="unit">￥</text>-2600.00</view>
+                </view>
+            </view> 
+            <!--1-->
+            <view class="workflow_list">
+                <view class="process_intro">
+                    <view class="name">我的擦撒十大黑科技暗杀可接受的和</view>
+                    <view class="state">待审</view>
+                    <view class="time">2021-1-26</view>
+                </view>
+                <view class="process_pay">
+                    <view class="describe">
+                        <image  class="amount_icon"  src="../../image/index/process_icon.png" mode="aspectFit"></image>
+                        <text>银行转账</text>
+                    </view>
+                    <view class="amount"><text class="unit">￥</text>-2600.00</view>
+                </view>
+            </view> 
+            <!--1-->
+            <view class="workflow_list">
+                <view class="process_intro">
+                    <view class="name">我的擦撒十大黑科技暗杀可接受的和</view>
+                    <view class="state">待审</view>
+                    <view class="time">2021-1-26</view>
+                </view>
+                <view class="process_pay">
+                    <view class="describe">
+                        <image  class="amount_icon"  src="../../image/index/process_icon.png" mode="aspectFit"></image>
+                        <text>银行转账</text>
+                    </view>
+                    <view class="amount"><text class="unit">￥</text>-2600.00</view>
+                </view>
+            </view> 
+            <!--1-->
+            <view class="workflow_list">
+                <view class="process_intro">
+                    <view class="name">我的擦撒十大黑科技暗杀可接受的和</view>
+                    <view class="state">待审</view>
+                    <view class="time">2021-1-26</view>
+                </view>
+                <view class="process_pay">
+                    <view class="describe">
+                        <image  class="amount_icon"  src="../../image/index/process_icon.png" mode="aspectFit"></image>
+                        <text>银行转账</text>
+                    </view>
+                    <view class="amount"><text class="unit">￥</text>-2600.00</view>
+                </view>
+            </view> 
+            <!--1-->
+            <view class="workflow_list">
+                <view class="process_intro">
+                    <view class="name">我的擦撒十大黑科技暗杀可接受的和</view>
+                    <view class="state">待审</view>
+                    <view class="time">2021-1-26</view>
+                </view>
+                <view class="process_pay">
+                    <view class="describe">
+                        <image  class="amount_icon"  src="../../image/index/process_icon.png" mode="aspectFit"></image>
+                        <text>银行转账</text>
+                    </view>
+                    <view class="amount"><text class="unit">￥</text>-2600.00</view>
+                </view>
+            </view> 
+            <!--1-->
+            <view class="workflow_list">
+                <view class="process_intro">
+                    <view class="name">我的擦撒十大黑科技暗杀可接受的和</view>
+                    <view class="state">待审</view>
+                    <view class="time">2021-1-26</view>
+                </view>
+                <view class="process_pay">
+                    <view class="describe">
+                        <image  class="amount_icon"  src="../../image/index/process_icon.png" mode="aspectFit"></image>
+                        <text>银行转账</text>
+                    </view>
+                    <view class="amount"><text class="unit">￥</text>-2600.00</view>
+                </view>
+            </view> 
+          
+        </view>
+    </scroll-view>
+
+
 </view>

nsgk_entry/pages/index/index.wxss

@@ -1,61 +1,291 @@
 .container{
-  width: 100vw;
-  height: 100vh; 
+ 
 }
-.container .header{
-    padding-top: 25.24vh;
-    height: 36.94vh;
+.singleLinHidenEllipsis{
+    color: black;
+    text-align: center;
+    width: auto;
+}
+.information_header{
+  /* padding: 30rpx 32rpx 54rpx; */
+  padding: 10rpx 32rpx 54rpx;
+  display: flex;
+}
+.information_header .portrait_head{
+  width: 110rpx;
+  height: 110rpx;
+  background: #000;
+  border-radius: 50%;
+}
+.information_header .information_main{
+  flex: 1;
+  padding-left: 16rpx;
+}
+.information_header  .name_wrap{
+ display: flex;
+ height: 54rpx;
+ align-items: center;
+ margin-bottom: 10rpx;
+}
+.information_header  .name_wrap .name{
+  font-size: 46rpx;
+}
+.information_header  .name_wrap .jobs{
+  margin-left: 18rpx;
+  width: 155rpx;
+  height: 40rpx;
+  background: #5bae75;
+  border:2rpx solid #2c8e68;
+  color: #fff;
+  border-radius: 40rpx;
+  display: flex;
+  font-size: 28rpx;
+  justify-content: center; 
+  align-items: center;
+}
+.information_header .name_wrap .jobs .icon{
+  width: 26rpx;
+  height: 27rpx;
+  margin-right: 5rpx;
 }
 
-.container .header .principal{
-  height: 6.15vh;
-  line-height: 6.15vh;
-  margin-bottom: 0.61vh;
+.information_header .task_wrap{
+  display: flex;
+  height: 44rpx;
+  margin-bottom: 18rpx;
+}
+.information_header .unfinished{
+  margin-left: 12rpx;
+}
+.information_header .task_wrap .flex_block{
+  
+  height: 48rpx;
+  display: flex;
+  background: #fff;
+  line-height: 44rpx;
+  border-radius: 44rpx;
+  border:2rpx solid #2c8e68;
   text-align: center;
-  font-size: 4.92vh;
-  color: #2c7339;
+  font-size: 28rpx;
+}
+.information_header .task_wrap .flex_block .desc{
+  width: 115rpx;
+  background: #2c8e68;
+  position:relative;
+  overflow: hidden;
+  color: #fff;
+  line-height: 44rpx;
+  border-top-left-radius: 44rpx;
+  border-bottom-left-radius: 44rpx;
 }
 
-.container .header .instructions{
-  font-size: 2.46vh;
-  height: 4.92vh;
-  line-height: 4.92vh;
-  text-align: center;
-  color: #2c7339;
+.information_header .task_wrap .flex_block .desc::before{
+  position:absolute;
+  top:-40rpx;
+  right:-40rpx;
+  content:"";
+  z-index:1;
+  width:110rpx; /*如果需要圆角的话 不用比box的宽度长,如果不需要圆角需要增长*/
+  height:40rpx;
+  background-color:#fff;
+  transform:rotate(-75deg);
+  transform-origin:right bottom;
+  border-radius:0px;
 }
-.container .quick-login{
-  position: fixed;
-  /* bottom: 8vh; */
-  width: 100%;
+
+.information_header .task_wrap .flex_block .event{
+  color: #2c8e68;
+  margin-left: -2%;
+  padding:0 8rpx 0 5rpx;
 }
 
-.container .quick-login .key-login{
-  width: 89vw;
-  height: 5.17vh;
-  background:#ffffff;
+
+.information_header .address_wrap{
+  font-size: 26rpx;
+  color: #2b8e68;
+  height: 46rpx;
+  line-height: 46rpx;
+}
+
+.navList_main{
+  width: 685rpx;
+  height: 228rpx;
+  background-color: #fff;
+  border-radius: 24rpx;
   margin:0 auto;
-  border-radius: 5.17vh;
-  text-align: center;
-  line-height: 5.17vh;
-  font-size: 2.21vh;
-  color: #2c7339;
-  box-shadow: 8rpx 6rpx 20rpx rgba(0,0,0,.3);
+  display: flex;
+  box-shadow: 0rpx 0rpx 12rpx rgba(0,0,0,.2);
+}
+.navList_main  .tab_item{
+  flex: 1;
+  display: flex;
+  justify-content: center; 
+  align-items: center; 
+  flex-direction: column;
+}
+
+.navList_main  .tab_item .icon{
+  width: 100rpx;
+  height: 100rpx;
+  margin-bottom: 12rpx;
+}
+.navList_main  .tab_item .icon_img{
+  width: 100rpx;
+  height: 100rpx;
+}
+.navList_main  .tab_item .desc{
+  font-size: 26rpx;
+}
+
+.child_function{
+  margin: 55rpx 20rpx 0;
+  display: flex;
+}
+.child_function .flex_block{
+  flex: 1;
+  display: flex;
+  justify-content: center; 
+  align-items: center; 
+  flex-direction: column;
+}
+.child_function .flex_block .image{
+  width: 76rpx;
+  height: 70rpx;
+  margin-bottom: 20rpx;
+}
+.child_function .flex_block .attribute{
+  width: 76rpx;
+  height: 70rpx;
+}
+
+.child_function .flex_block .desc{
+  font-size: 26rpx;
+}
+
+.work_plan{
+  padding: 40rpx 32.5rpx 30rpx;
+  display: flex;
 }
 
-.container .quick-login .authorization{
-  margin-top: 5vh;
-  display: flex; 
-  justify-content: center; /* 相对父元素水平居中 */
-  align-items: center; /*  子元素相对父元素垂直居中 */
+.work_plan  .menu_item{
+  height: 60rpx;
+  width: 140rpx;
+  background-color: #fff;
+  box-shadow: 0rpx 0rpx 9rpx rgba(0,0,0,.2);
+  border-radius: 60rpx;
+  line-height: 60rpx;
+  text-align: center;
+  font-size: 32rpx;
+  position: relative;
+  margin-right: 16rpx;
+
+}
+.work_plan  .menu_item.active{
+  background-color: #5bae78;
+  color: #fff;
+}
+.work_plan .menu_item .remind{
+  height: 30rpx;
+  background: #e90101;
   color: #fff;
+  font-size: 26rpx;
+  position: absolute;
+  line-height: 30rpx;
+  padding:0 10rpx;
+  border-radius: 50%;
+  top: -10rpx;
+  right: -10rpx;
 }
 
-.container .quick-login .authorization .changeSize{
-  transform: scale(0.7,0.7);
+.work_plan .more{
+  flex: 1;
+  text-align: center;
+  line-height: 60rpx;
+  font-size: 36rpx;
+  color: #31936c;
+}
+
+.workflow{
+  padding: 10rpx 32.5rpx;
+}
+.workflow .workflow_list{
+  height: 150rpx;
+  background-color: #fff;
+  border-radius: 24rpx;
+  box-shadow:0rpx 0rpx 10rpx rgba(0,0,0,.1);
+  margin-bottom: 20rpx;
+  padding:15rpx 25rpx 10rpx 35rpx;
 }
-.container .quick-login .authorization .changeSize  .wx-checkbox-input {
-  border-radius: 1vh;
+.workflow .workflow_list .process_intro{
+  display: flex;
+  height: 62rpx;
+  align-items: center; 
 }
-.container .quick-login .authorization text{
-  margin-left: -.5vw;
-}
+
+.workflow .process_intro .name{
+  width: 324rpx;
+  font-size: 34rpx;
+  margin-right: 30rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.workflow .process_intro .state{
+  width: 93rpx;
+  height: 42rpx;
+  background-color: #fbe3e3;
+  color: #f31e1f;
+  border-radius: 12rpx;
+  text-align: center;
+  line-height: 42rpx;
+}
+
+.workflow .process_intro .time{
+  flex: 1;
+  text-align: right;
+  font-size: 32rpx;
+  color: #9ea1aa;
+}
+
+
+.workflow .workflow_list .process_pay{
+  display: flex;
+  height: 52rpx;
+  align-items: center; 
+}
+
+
+.workflow .workflow_list .process_pay .describe{
+  font-size: 30rpx;
+  width: 330rpx;
+  color: #3c9370;
+  display: flex;
+  align-items: center; 
+}
+.workflow .workflow_list .process_pay .describe .amount_icon{
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 12rpx;
+}
+
+.workflow .workflow_list .process_pay .amount{
+  font-size: 38rpx;
+  flex: 1;
+  text-align: right;
+  color: #f31e1f;
+}
+.workflow .workflow_list .process_pay .amount .unit{
+  font-size: 26rpx;
+}
+
+/* <view class="workflow_list">
+                <view class="process_intro">
+                    <view class="name">啊啊啊啊啊啊啊啊啊啊</view>
+                    <view class="state">待审</view>
+                    <view class="time">2021-1-26</view>
+                </view>
+                <view class="process_pay">
+                    <view class="describe">银行转账</view>
+                    <view class="amount">￥-2600.00</view>
+                </view>
+            </view>  */

nsgk_entry/pages/show/show.wxss

@@ -3,7 +3,6 @@
 .scroll_page
 {
   height: 100vh;
-
 }
 .page_content
 {

nsgk_entry/project.private.config.json

@@ -0,0 +1,23 @@
+{
+  "condition": {
+    "plugin": {
+      "list": []
+    },
+    "game": {
+      "list": []
+    },
+    "gamePlugin": {
+      "list": []
+    },
+    "miniprogram": {
+      "list": [
+        {
+          "name": "pages/show/show",
+          "pathName": "pages/index/index",
+          "query": "",
+          "scene": null
+        }
+      ]
+    }
+  }
+}