15 changed files with 483 additions and 172 deletions
@ -0,0 +1,55 @@ |
|||||
|
// components/navigationBar.js
|
||||
|
Component({ |
||||
|
|
||||
|
/** |
||||
|
* 组件的属性列表 |
||||
|
*/ |
||||
|
properties: { |
||||
|
title:{ |
||||
|
type: String, |
||||
|
value: '续期提醒' |
||||
|
}, |
||||
|
backgroundImage:{ |
||||
|
type: String, |
||||
|
value: '' |
||||
|
}, |
||||
|
isSowArrow:{ |
||||
|
type: Boolean, |
||||
|
value: false |
||||
|
}, |
||||
|
isShowBg:{ |
||||
|
type: Boolean, |
||||
|
value: false |
||||
|
}, |
||||
|
height:{ |
||||
|
type:String, |
||||
|
value:'' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 组件的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
// 状态栏高度
|
||||
|
statusBarHeight: wx.getStorageSync('statusBarHeight') + 'px', |
||||
|
// 导航栏高度
|
||||
|
navigationBarHeight: wx.getStorageSync('navigationBarHeight') + 'px', |
||||
|
// 胶囊按钮高度
|
||||
|
menuButtonHeight: wx.getStorageSync('menuButtonHeight') + 'px', |
||||
|
// 导航栏和状态栏高度
|
||||
|
navigationBarAndStatusBarHeight: wx.getStorageSync('statusBarHeight') + wx.getStorageSync('navigationBarHeight') + 'px' |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 组件的方法列表 |
||||
|
*/ |
||||
|
methods: { |
||||
|
handleGoToBack(){ |
||||
|
wx.navigateBack({ |
||||
|
delta: 1 |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"component": true, |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,18 @@ |
|||||
|
<!-- components/navigationBar.wxml --> |
||||
|
<view class="navigation-container" style="{{'height: ' + navigationBarAndStatusBarHeight}}"> |
||||
|
<view class="navbg" wx:if="{{isShowBg && backgroundImage}}" style="background-image:url({{backgroundImage}}); background-size: 100% 100%; background-repeat: no-repeat; height: {{height}}"> |
||||
|
<!-- 空白来占位状态栏 --> |
||||
|
<view style="{{'height: ' + statusBarHeight}}"></view> |
||||
|
<!-- 自定义导航栏 --> |
||||
|
|
||||
|
<view class="navigation-bar" style=" height: {{navigationBarHeight}}"> |
||||
|
<view class="arrow-content"> |
||||
|
<view class="arrow" wx:if="{{isSowArrow}}" bindtap="handleGoToBack"></view> |
||||
|
</view> |
||||
|
<view class="navigation-title" style="{{'line-height:' + navigationBarHeight}}">{{title}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
<!-- 空白占位fixed空出的位置 --> |
||||
|
<view style="{{'height: ' + navigationBarAndStatusBarHeight}}"></view> |
||||
@ -0,0 +1,58 @@ |
|||||
|
/* components/navigationBar.wxss */ |
||||
|
|
||||
|
.navigation-container { |
||||
|
position: fixed; |
||||
|
width: 100%; |
||||
|
z-index: 99; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.navigation-bar { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.navigation-buttons { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-left: 10px; |
||||
|
border: 1px solid rgba(0, 0, 0, 0.05); |
||||
|
box-sizing: border-box; |
||||
|
border-radius: 15px; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.nav-img { |
||||
|
height: 22px; |
||||
|
margin-left: 28rpx; |
||||
|
width: 22px; |
||||
|
} |
||||
|
|
||||
|
.navigation-title { |
||||
|
position: absolute; |
||||
|
left: 104rpx; |
||||
|
right: 104rpx; |
||||
|
text-align: center; |
||||
|
font-size: 16px; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.arrow-content{ |
||||
|
position: absolute; |
||||
|
left: 40rpx; |
||||
|
z-index: 999; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.arrow { |
||||
|
width: 18rpx; |
||||
|
height: 18rpx; |
||||
|
border: 5rpx solid #101010; |
||||
|
border-right-color: transparent; |
||||
|
border-bottom-color: transparent; |
||||
|
transform: rotate(-45deg); |
||||
|
} |
||||
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
@ -0,0 +1,73 @@ |
|||||
|
// subpages/index/renewalApplication/renewalApplication.js
|
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad(options) { |
||||
|
|
||||
|
}, |
||||
|
// 跳转首页
|
||||
|
submit() { |
||||
|
wx.navigateBack({ |
||||
|
delta: 1 |
||||
|
}) |
||||
|
}, |
||||
|
/** |
||||
|
* 生命周期函数--监听页面初次渲染完成 |
||||
|
*/ |
||||
|
onReady() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面显示 |
||||
|
*/ |
||||
|
onShow() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面隐藏 |
||||
|
*/ |
||||
|
onHide() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面卸载 |
||||
|
*/ |
||||
|
onUnload() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面上拉触底事件的处理函数 |
||||
|
*/ |
||||
|
onReachBottom() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击右上角分享 |
||||
|
*/ |
||||
|
onShareAppMessage() { |
||||
|
|
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,10 @@ |
|||||
|
{ |
||||
|
|
||||
|
"navigationStyle": "custom", |
||||
|
"usingComponents": { |
||||
|
"navigationBar": "/components/navigationBar/navigationBar", |
||||
|
"van-image": "@vant/weapp/image/index", |
||||
|
"van-button": "@vant/weapp/button/index" |
||||
|
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
<view class="cont"> |
||||
|
<navigationBar title="续期申请" isSowArrow="true" isShowBg="true" backgroundImage="/images/bg.png" height="200px"></navigationBar> |
||||
|
|
||||
|
<view class="tip-cont"> |
||||
|
<van-image width="72" height="72" src="/images/mine/md-restore.png" custom-class="cusImage" /> |
||||
|
<view class="txt"> |
||||
|
<view>温馨提示：</view> |
||||
|
<view class="des">您需要登陆“爱山东”APP搜索“青岛人才”， |
||||
|
进入青岛免租金住房系统进行续期申请。</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<van-button slot="button" block type="primary" round color="linear-gradient(to right, #0DC6C6 , #46DBD5)" bind:tap="submit" custom-class="btn"> |
||||
|
我知道了 |
||||
|
</van-button> |
||||
|
</view> |
||||
@ -0,0 +1,51 @@ |
|||||
|
/* subpages/index/renewalApplication/renewalApplication.wxss */ |
||||
|
page{ |
||||
|
background: #f8f8f8; |
||||
|
|
||||
|
} |
||||
|
.cont { |
||||
|
position: relative; |
||||
|
background: #f8f8f8; |
||||
|
padding: 36rpx; |
||||
|
height: 87vh; |
||||
|
} |
||||
|
|
||||
|
.tip-cont { |
||||
|
position: absolute; |
||||
|
width: 678rpx; |
||||
|
height: 624rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
z-index: 999; |
||||
|
background-color: #fff; |
||||
|
border-radius: 10rpx; |
||||
|
top: 214rpx; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.cusImage { |
||||
|
margin-top: 90rpx; |
||||
|
} |
||||
|
|
||||
|
.txt { |
||||
|
margin-top: 100rpx; |
||||
|
padding: 0 32rpx; |
||||
|
} |
||||
|
|
||||
|
.des { |
||||
|
margin-top: 38rpx; |
||||
|
line-height: 46rpx; |
||||
|
font-size: 32rpx; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
.btn { |
||||
|
position: absolute; |
||||
|
top: 390px; |
||||
|
max-width: 440rpx; |
||||
|
width: calc(100% - 10rpx); |
||||
|
height: 80rpx; |
||||
|
} |
||||
Loading…
Reference in new issue