110 lines
2.0 KiB
Vue
110 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<view class="status_bar">
|
|
<div class="item" @click="goBack"><u-icon name="arrow-left" size="18" v-show="showBack" /></div>
|
|
<div class="item">{{ title }}</div>
|
|
<div class="item" @click="chickIcon">
|
|
<u-icon :name="rightIcon" v-if="showRightIcon" size="20"></u-icon>
|
|
<u-text v-else-if="showRightText" type="primary" :text="text"></u-text>
|
|
</div>
|
|
</view>
|
|
<div class="status_bar_placeholder"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
showBack: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
isBack: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
goTo: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
rightIcon: {
|
|
type: String,
|
|
default: 'plus'
|
|
},
|
|
showRightIcon: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
if (this.isBack) {
|
|
uni.navigateBack()
|
|
} else {
|
|
if (this.goTo) {
|
|
uni.redirectTo({
|
|
url: this.goTo
|
|
})
|
|
} else {
|
|
uni.redirectTo({
|
|
url: '/pages/index'
|
|
})
|
|
}
|
|
}
|
|
},
|
|
chickIcon() {
|
|
this.$emit('chickIcon')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.status_bar_placeholder {
|
|
height: 135px;
|
|
width: 100%;
|
|
}
|
|
|
|
.status_bar {
|
|
padding: 0 25px;
|
|
width: 100%;
|
|
height: 136px;
|
|
border: 0;
|
|
background: url('/static/images/imgs/nav.png');
|
|
background-size: 100% 100%;
|
|
position: fixed;
|
|
z-index: 99;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: space-between;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #0f274b;
|
|
|
|
.item {
|
|
width: 20%;
|
|
text-align: center;
|
|
}
|
|
.item:nth-child(2) {
|
|
width: 60%;
|
|
}
|
|
.item:nth-child(3) {
|
|
width: 20%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
</style>
|