<template>
|
<view style="height: 100%;">
|
<!-- 自定义导航栏 -->
|
<view class="navBarBox fix">
|
<!-- 状态栏占位 -->
|
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
|
<!-- 真正的导航栏内容 -->
|
<view style="display: flex; flex-direction: column;" >
|
<view class="navBar">
|
<u-icon style=" margin-left: -25px;" name="arrow-left" color="black" size="17" @click="goBack" />
|
<view class="barText">实时气象</view>
|
</view>
|
</view>
|
</view>
|
<view style="height: 85%;">
|
<!-- <web-view :src="webViewUrl"></web-view> -->
|
<iframe :src="webViewUrl" width="100%" height="100%"> </iframe>
|
</view>
|
<tabBar :currentPagePath="page"></tabBar>
|
</view>
|
</template>
|
|
<script>
|
import tabBar from '../tabBarIndex.vue'
|
export default {
|
components:{
|
tabBar
|
},
|
data() {
|
return {
|
page: 'pages/tabBar/weather/weather',
|
statusBarHeight: '',
|
webViewUrl: 'https://embed.windy.com/embed2.html?lat=43.419&lon=87.613&detailLat=43.598&detailLon=87.613&width=320&height=600&zoom=9&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=true&type=map&location=coordinates&detail=true&metricWind=default&metricTemp=default&radarRange=-1'
|
}
|
|
},
|
onLoad() {
|
//获取手机状态栏高度
|
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
|
uni.hideTabBar();
|
},
|
methods: {
|
goBack() {
|
uni.switchTab({
|
url:'/pages/tabBar/firstPage/firstPage'
|
});
|
},
|
}
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
.box {
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
height: 8%;
|
}
|
.fix{
|
position: sticky;
|
top: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
z-index: 1;
|
}
|
.navBarBox .navBar {
|
background-color:#fff;
|
height: 50px;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
box-shadow: 0 3px 12px rgba(0,0,0,0.05);
|
|
}
|
.barText{
|
text-align: center;
|
width: 85%;
|
font-size: 16px;
|
font-weight: 600;
|
}
|
.statusBar{
|
background-color:lightgrey;
|
}
|
</style>
|
