146 lines
2.6 KiB
Plaintext
146 lines
2.6 KiB
Plaintext
<template>
|
|
<div class="content" :style="{height:statusBarHeight+44+'wx'}">
|
|
<div class="status-bar" :style="{height:statusBarHeight+'wx'}"></div>
|
|
<div class="nav">
|
|
<text class="icon location">{{ iconLocation }}</text>
|
|
<text class="location-city-text">{{ city }}</text>
|
|
<div class="input-box">
|
|
<input class="input-box-input" placeholder="默认关键字" @focus="inputfocus" />
|
|
<text class="icon search">{{ iconSearch }}</text>
|
|
</div>
|
|
<text class="icon yuyin">{{ iconYuyin }}</text>
|
|
<text @click="toMsg" class="icon tongzhi">{{ iconTongzhi }}</text>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
city: '北京',
|
|
subNVue: uni.getCurrentSubNVue(),
|
|
iconSearch: '\ue628',
|
|
iconLocation: '\ue611',
|
|
iconYuyin: '\ue64e',
|
|
iconTongzhi: '\ue729',
|
|
statusBarHeight:20
|
|
};
|
|
},
|
|
beforeCreate() {
|
|
const domModule = weex.requireModule('dom');
|
|
domModule.addRule('fontFace', {
|
|
fontFamily: 'iconfont',
|
|
src: "url('https://at.alicdn.com/t/font_1087442_fe5vigfwr5m.ttf')"
|
|
});
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
methods: {
|
|
toMsg() {
|
|
uni.navigateTo({
|
|
url: '../../msg/msg'
|
|
});
|
|
},
|
|
init() {
|
|
uni.getSystemInfo({
|
|
success: (res)=>{
|
|
this.statusBarHeight = res.statusBarHeight;
|
|
}
|
|
});
|
|
this.nVueTitle = uni.getCurrentSubNVue();
|
|
this.nVueTitle.onMessage(res => {
|
|
let type = res.data.type;
|
|
switch (type) {
|
|
case 'location':
|
|
this.setCity(res.data.city);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
},
|
|
setCity(city) {
|
|
this.city = city;
|
|
},
|
|
inputfocus() {
|
|
this.subNVue.postMessage({
|
|
type: 'focus'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.icon {
|
|
font-family: iconfont;
|
|
font-size: 42px;
|
|
}
|
|
.content {
|
|
background-color: #ffffff;
|
|
flex-direction: column;
|
|
}
|
|
.status-bar {
|
|
flex: 1;
|
|
}
|
|
|
|
.nav {
|
|
width: 750px;
|
|
padding: 0 20px;
|
|
position: relative;
|
|
height: 88px;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.location,
|
|
.yuyin,
|
|
.tongzhi {
|
|
width: 60px;
|
|
height: 88px;
|
|
text-align: center;
|
|
line-height: 88px;
|
|
}
|
|
.location {
|
|
color: #ffc50a;
|
|
}
|
|
.location-city-text {
|
|
width: 60px;
|
|
height: 88px;
|
|
line-height: 88px;
|
|
font-size: 26px;
|
|
color: #000;
|
|
}
|
|
|
|
.yuyin {
|
|
color: #000;
|
|
}
|
|
.tongzhi {
|
|
color: #000;
|
|
}
|
|
.input-box {
|
|
width: 465px;
|
|
margin-left: 5px;
|
|
height: 60upx;
|
|
border-radius: 60px;
|
|
background-color: #f5f5f5;
|
|
position: relative;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.input-box-input {
|
|
width: 330px;
|
|
height: 60px;
|
|
font-size: 28px;
|
|
margin-left: 30px;
|
|
placeholder-color: #c0c0c0;
|
|
}
|
|
.search {
|
|
width: 60px;
|
|
font-size: 34px;
|
|
padding-right: 30px;
|
|
color: #c0c0c0;
|
|
}
|
|
</style>
|