zhangzl
/
nsgk_wechat
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

优化首页

master
liuminjian 3 years ago
parent
1aaa1e9d33
commit
3fdee075da
17 changed files with 572 additions and 109 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      nsgk_entry/image/index/child_function_01.png
  2. BIN
      nsgk_entry/image/index/child_function_02.png
  3. BIN
      nsgk_entry/image/index/child_function_03.png
  4. BIN
      nsgk_entry/image/index/child_function_04.png
  5. BIN
      nsgk_entry/image/index/child_function_05.png
  6. BIN
      nsgk_entry/image/index/header_bg.png
  7. BIN
      nsgk_entry/image/index/header_job.png
  8. BIN
      nsgk_entry/image/index/nav_01.png
  9. BIN
      nsgk_entry/image/index/nav_02.png
  10. BIN
      nsgk_entry/image/index/nav_03.png
  11. BIN
      nsgk_entry/image/index/nav_04.png
  12. BIN
      nsgk_entry/image/index/process_icon.png
  13. +31
    -54
      nsgk_entry/pages/index/index.js
  14. +245
    -11
      nsgk_entry/pages/index/index.wxml
  15. +273
    -43
      nsgk_entry/pages/index/index.wxss
  16. +0
    -1
      nsgk_entry/pages/show/show.wxss
  17. +23
    -0
      nsgk_entry/project.private.config.json

BIN
nsgk_entry/image/index/child_function_01.png View File

Before After
Width: 39  |  Height: 36  |  Size: 1.2 KiB

BIN
nsgk_entry/image/index/child_function_02.png View File

Before After
Width: 39  |  Height: 36  |  Size: 1.3 KiB

BIN
nsgk_entry/image/index/child_function_03.png View File

Before After
Width: 41  |  Height: 35  |  Size: 1.1 KiB

BIN
nsgk_entry/image/index/child_function_04.png View File

Before After
Width: 40  |  Height: 35  |  Size: 1.0 KiB

BIN
nsgk_entry/image/index/child_function_05.png View File

Before After
Width: 41  |  Height: 33  |  Size: 1.8 KiB

BIN
nsgk_entry/image/index/header_bg.png View File

Before After
Width: 390  |  Height: 270  |  Size: 102 KiB

BIN
nsgk_entry/image/index/header_job.png View File

Before After
Width: 13  |  Height: 14  |  Size: 289 B

BIN
nsgk_entry/image/index/nav_01.png View File

Before After
Width: 72  |  Height: 72  |  Size: 3.8 KiB

BIN
nsgk_entry/image/index/nav_02.png View File

Before After
Width: 72  |  Height: 72  |  Size: 3.9 KiB

BIN
nsgk_entry/image/index/nav_03.png View File

Before After
Width: 72  |  Height: 72  |  Size: 3.4 KiB

BIN
nsgk_entry/image/index/nav_04.png View File

Before After
Width: 72  |  Height: 72  |  Size: 3.5 KiB

BIN
nsgk_entry/image/index/process_icon.png View File

Before After
Width: 16  |  Height: 16  |  Size: 561 B

+ 31
- 54
nsgk_entry/pages/index/index.js View File

@@ -1,69 +1,46 @@
// pages/index/index.js
import * as UTIL from '../../utils/util.js'; import * as UTIL from '../../utils/util.js';
Page({ Page({

/**
* 页面的初始数据
*/
data: { data: {
isIPhoneX:false
//顶部胶囊按钮位置信息rect
CustomMenuButton: null,
wrokScrollHeight:0
}, },

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { onLoad: function (options) {
this.setData({
isIPhoneX:UTIL.isIPhoneX()
})
this.computeBarLocation()
}, },

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { onReady: function () {

}, },

/**
* 生命周期函数--监听页面显示
*/
onShow: function () { onShow: function () {

}, },

/**
* 生命周期函数--监听页面隐藏
*/
onHide: 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 () {

}
}) })

+ 245
- 11
nsgk_entry/pages/index/index.wxml View File

@@ -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>
<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>
<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> </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> </view>

+ 273
- 43
nsgk_entry/pages/index/index.wxss View File

@@ -1,61 +1,291 @@
.container{ .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; 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; 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; 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> */

+ 0
- 1
nsgk_entry/pages/show/show.wxss View File

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

} }
.page_content .page_content
{ {


+ 23
- 0
nsgk_entry/project.private.config.json View File

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

Write Preview
Loading…
Cancel
Save