education-front/components/base/navbar.vue

<template>
<!-- 	<view class="navbar"
	:style="{backgroundColor : bgColor}"> -->
		<view class="title navbar__view"
		:style="{backgroundColor : bgColor,color}">

			<view class="nav">
				<image class="nav-bg" src="@/static/image/bg-nav.png" mode="aspectFill"></image>
				<image class="nav-logo" src="@/static/image/bg-icon.png" mode="heightFix"></image>
				<!-- <image class="nav-icon" src="@/static/image/icon-question.png" mode="widthFix"></image> -->

				<view class="main">
					<view class="left">
						
						<uv-icon name="home"
						v-if="leftClick && length == 1"
						@click="toHome"
						:color="color"  size="46rpx"></uv-icon>
						
						<button v-else-if="leftClick" class="btn btn-back" @click="$emit('leftClick')" >
							<image class="btn-back-icon" src="@/static/image/icon-back.png" mode="widthFix"></image>
						</button>
					</view>
					<view>{{ title }}</view>
					<view class="icon">
						
						<uv-icon name="search"
						v-if="isSearch"
						:color="color"  size="58rpx"></uv-icon>
						
						<uv-icon name="plus-circle" :color="color"  
						v-if="isPlus"
						@click="plusCircleShow = true"
						size="46rpx" style="margin-left: 30rpx;"></uv-icon>
						
						<view v-if="moreClick" style="margin-left: 30rpx;">
							<uv-icon name="more-dot-fill" :color="color" 
							v-if="!moreText"
							@click="moreClick()"
							size="46rpx"></uv-icon>
							<view v-else @click="moreClick"
							style="font-weight: 400;font-size: 30rpx;">
								{{ moreText }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	<!-- </view> -->
</template>

<script>
	export default {
		name:"navbar",
		props : {
			title : {
				type : String,
				default : ''
			},
			leftClick : {
				type : Boolean,
			},
			moreClick : {
				type : Function,
			},
			isSearch : {
				type : Boolean,
				default : false,
			},
			isPlus : {
				type : Boolean,
				default : false,
			},
			moreText : {
				
			},
			bgColor : {
				default : '#fff'
			},
			color : {
				default : '#666666'
			}
		},
		created() {
		},
		beforeDestroy() {
		},
		data() {
			return {
				length : getCurrentPages().length
			};
		},
		methods : {
			toHome(){
				if(this.length != 1){
					return
				}
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
// .navbar{
// 	width: 100%;
// 	height: 120rpx;
// 	padding-top: var(--status-bar-height);
// }
.title{
	width: 100%;
	height: calc(var(--status-bar-height) + 120rpx);
	position: sticky;
	top: 0;
	left: 0;
	z-index: 999;
	.left{
		position: absolute;
		left: 40rpx;
		display: flex;
		justify-content: flex-start;
	}
	.icon{
		position: absolute;
		right: 40rpx;
		display: flex;
		justify-content: flex-end;
	}
}


  .nav {
    position: relative;
    width: 100%;
		height: 100%;

    &-bg {
      width: 100%;
      height: 100%;
    }

    &-logo {
      position: absolute;
      top: 0;
      right: 68rpx;
      width: auto;
      height: 100%;
      opacity: 0.2;
    }

    &-icon {
      position: absolute;
      bottom: 28rpx;
      right: 40rpx;
      width: 44rpx;
      height: auto;
    }
  }

	.main {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		font-size: 44rpx;
		font-weight: 700;
		align-items: center;
		padding-top: calc(var(--status-bar-height) + 20rpx);
		width: 100%;
		height: 100rpx;
	}

	.btn {
		&-back {
			&-icon {
				width: 46rpx;
				height: auto;
			}
		}
	}


@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>