星油企业版

components/topbar.vue

@@ -0,0 +1,67 @@
+<template>
+	<view :style="{ backgroundSize:height?`100% ${height}`:' ',backgroundImage:`url(${backgroundImage})`,minHeight:height}" class="header" >
+		<view class="top" :style="{height:styles.top?styles.top:''}"></view>
+		<uni-nav-bar :border="false" :height="styles.height" style="font-size: 34rpx;"  @clickLeft='backFn' color='white' backgroundColor="rgba(0,0,0,0)" :left-icon="leftIcon" :title="title" />
+		<view>
+			<slot name="coment"/>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:'topBar',
+		props:{
+			leftIcon:{
+				type: String,
+				default: "back"
+			},
+			title:{
+				type: String,
+				default: "标题"
+			},
+			height:{
+				type: String,
+				default: "403rpx"
+			},
+			backgroundImage:{
+				type: String,
+				default: "https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油admin小程序/sjbj.png"
+			},
+		},
+		data() {
+			return {
+				styles:{
+					top:' '
+				}
+			}
+		},
+		mounted() {
+			this.styles = uni.getMenuButtonBoundingClientRect()
+			Object.keys(this.styles).forEach(key=>{
+				this.styles[key] = this.styles[key] + 'px'
+			})
+			console.log(this.styles,'*-*-*')
+		},
+		methods: {
+			backFn(){
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style>
+	.uni-nav-bar-text{
+		font-size: 34rpx !important;
+	}
+	.header {
+		color: white;
+		background-size: 100% 100%;
+		position: relative;
+		background-repeat:no-repeat
+	}
+   .uni-navbar__header-btns-right {
+		padding: 0 !important;
+	}
+</style>