174 lines
3.4 KiB
Vue
174 lines
3.4 KiB
Vue
<template>
|
|
<view class="commNavBar_content">
|
|
<uni-nav-bar :border="false" :statusBar="true" leftWidth="0" rightWidth="0" height="80rpx" :fixed="false"
|
|
backgroundColor="transparent">
|
|
<view class="nav_bar_box">
|
|
<view class="nav_bar_box_left">
|
|
<view class="_box_left_list">
|
|
<view class="_left_list_item" v-for="m in navBarList" :key="m.id" @tap="navBarClick"
|
|
:data-id="m.id">
|
|
<view :class="['_left_list_item_box', navBarActive == m.id ? 'active':'']">
|
|
<view :class="['_list_item_name', navBarActive==m.id ? 'active' :'']">{{m.name}}
|
|
</view>
|
|
<view class="_list_item_iamge" v-if="navBarActive == m.id">
|
|
<image class="is_image" src="../../static/images/nav-bar_Vector.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="nav_bar_box_right" @tap="toBooksSearchList">
|
|
<view class="_box_right_search" >
|
|
<view class="_search_iamge">
|
|
<image class="is_image" src="/static/images/nav_bar_search.png"></image>
|
|
</view>
|
|
<view class="_search_tips">
|
|
搜索小说
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-nav-bar>
|
|
<view class="commNavBar_bag" />
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'commNavBar',
|
|
props: {
|
|
navBarList: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
navBarActive: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
navBarClick(event) {
|
|
this.$emit('navBarClick', event)
|
|
},
|
|
toBooksSearchList() {
|
|
uni.navigateTo({
|
|
url: '/pages/booksSearchList/booksSearchList'
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.is_image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
::v-deep.uni-navbar {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding-bottom: 32rpx;
|
|
// .uni-navbar__content {
|
|
// padding-bottom: 32rpx;
|
|
// }
|
|
}
|
|
|
|
.commNavBar_bag {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 400rpx;
|
|
background: linear-gradient(to bottom, #FFC7D3 0%, #FFEBEE 50%, #fff 100%);
|
|
}
|
|
|
|
.commNavBar_content {
|
|
width: 100%;
|
|
|
|
.nav_bar_box {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
|
|
.nav_bar_box_left {
|
|
|
|
// height: ;
|
|
._box_left_list {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
._left_list_item {
|
|
// padding-right: 20;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 120rpx;
|
|
|
|
._left_list_item_box {
|
|
._list_item_name {
|
|
font-size: 30rpx;
|
|
color: #666666;
|
|
line-height: 1;
|
|
}
|
|
|
|
._list_item_name.active {
|
|
font-size: 38rpx;
|
|
color: #1A1A1A;
|
|
line-height: 1;
|
|
font-weight: 600;
|
|
}
|
|
|
|
._list_item_iamge {
|
|
width: 30rpx;
|
|
height: 8rpx;
|
|
}
|
|
}
|
|
|
|
._left_list_item_box.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 54rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.nav_bar_box_right {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
border-radius: 40rpx;
|
|
box-sizing: border-box;
|
|
padding: 38rpx;
|
|
|
|
._box_right_search {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
._search_iamge {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
|
|
._search_tips {
|
|
font-size: 26rpx;
|
|
color: #BBBBBB;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style> |