<template>
	<view>
		<view class="top-bar" >
			<view class="row">
				
				<view class="column column1" @click="navTo(1,'/pages/home/home')"><image src="../../static/images/backhome.png" style="width: 24px; height: 24px;"></image></view>
				  <view class="column column2"><input class="input-box" type="text" placeholder="搜索内容" style="width: 100%;"/></view>
				  <view class="column column3"><image src="../../static/images/fangdajing.png" style="width: 21px; height: 21px;"></image></view>
				  <view class="column column4" ></view>
				</view>
				
		</view>
		
		
	</view>
</template>
<script>

	export default {
		props: {
			active: {
				type: Number,
				default: 1
			}
		},
		

		
		data() {
			return {
				// diy:2
			};
		},
		
		computed: {
			
			diy() {
				
				return this.$store.state.systemInfo.is_vip;
			},
			
			setColor() {
		
				return this.$store.state.setColor;
			}
			
		},
		
		methods: {

			navTo(index, url) {
	
				if (index != this.active) {
					
					uni.switchTab({
						url: url
					})
				}
			},
			onViewBind(e){
				uni.navigateTo({
					url:'/pages/user-detail/user-detail'
				})
			},
			
			
		}
	}
</script>

<style scoped>
	.top-bar {
		/* background-color: #745A42; */
		background-color: #593320;
		width: 100vw;
		
		/*兼容 IOS<11.2*/
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		height: 120px;
		display: flex;
		flex-flow: row nowrap;
		justify-tab-bar: space-around;
		align-items: center;
		padding-top: 30px;
		
		position: fixed;
		left: 0;
		top: 0;
		z-index: 900;

	}
	.row {
		padding-top: 40px;
	    display: flex;
		justify-content: space-between;
		width: 100%;
	  }
	  .column {
	    padding: 10px 0px 0px 0px;
	
	    text-align: left; /* 文本居中 */
		width: 100%;
	  }
	  .column1 { width: 24%; padding-left: 30px; }
	  .column2 { width: 48%;padding-left:20px }
	  .column3 { width: 20px; padding-left:10px; padding-top: 12px;}
	  .column4 { width: 20%;margin-right: 30px; }

 .input-box {
     border: 1px solid #CCC; /* 白色边框 */
     border-radius: 10px; /* 边框弧形角度 */
     padding: 0px 5px; /* 内边距 */
	 height: 24px;
	 color: #FFF;
	
   }
    .input-box::placeholder {
       color: #FFF; /* 占位符文字颜色 */
       
     }
</style>
