初始化

components/custom/custom.vue

@@ -0,0 +1,126 @@
+<template>
+	<view class="navigation" :style="{height:CustomBar+'px'}" >
+		<view class="me-container"  :style="cuStyle" >
+			<view class="me-left flex_ac">
+				<view v-if="isBack" @tap="toBack" :style="'color:'+backColor" class="iconfont icon-zuojiantou"></view>
+				<slot name="left"></slot>
+			</view>
+			<view class="me-content">
+				<slot name="content"></slot>
+			</view>
+			<view class="me-right">
+				<slot name="right"></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			isBack:{
+				type:Boolean,
+				default:true
+			},
+			bgColor:{
+				type:String,
+				default:'#FFFFFF'
+			},
+			backColor:{
+				type:String,
+				default:'#000000'
+			},
+			is_handler: {
+				type:Boolean,
+				default:false
+			}
+		},
+		computed:{
+			cuStyle(){
+				return `height:${this.CustomBar}px;padding-top:${this.StatusBar}px;background:${this.bgColor}`
+			}
+		},
+		data() {
+			return {
+				StatusBar:this.StatusBar,
+				CustomBar:this.CustomBar
+			};
+		},
+		methods:{
+			toBack(){
+				if(this.is_handler) {
+					this.$emit('backHandler')
+				}else {
+					uni.navigateBack({
+						delta:1
+					})
+				}
+				
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	cover-view{
+		box-sizing: border-box;
+	}
+.navigation{
+	position: relative;
+	z-index: 5000;
+	.icon-zuojiantou {
+		font-size: 50rpx;
+	}
+	.bg-white{
+		background: #FFFFFF;
+	}
+	.bg-tran{
+		background: transparent;
+	}
+	.bg-them{
+		background:$them_color ;
+	}
+	.bg-lin{
+		background: linear-gradient(270deg, $them_color 0%, #7FDAFF 100%);
+	}
+	.bg-the {
+		background-image: linear-gradient(to right,rgba(144, 199, 101,1),rgba(225, 226, 0,1));
+	}
+	.me-container{
+		position: fixed;
+		width: 100%;
+		top: 0;
+		z-index: 1024;
+		// box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
+		// padding: 0 30rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		.me-content{
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+			font-weight: bold;
+			font-size: 40rpx;
+		}
+		.me-left{
+			margin-left: 12rpx;
+			.icon-back{
+				font-size: 42rpx;
+				margin-left: 13rpx;
+				position: relative;
+				top: 5rpx;
+				display: block;
+				&::after{
+					content: '';
+					display: block;
+					width: 100%;
+					height: 100%;
+					transform: scale(1.3);
+				}
+			}
+		}
+		
+	}
+}
+</style>