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