<template>
	<div class="mainBox w100">
		<div class="relative" style="height:10%">
			<zgh-header class="middle_before">
				<div class="search_input middle middle_before m-fs28" slot="title">
					<i class="iconfont middle">&#xe60a;</i>
					<input class="val middle" v-model.trim="searchval" type="text" name="" id="" value="" placeholder="可输入" @keyup.13="searchHandle" />
				</div>
				<div class="iconR icon msg middle fs14 textC colorf" slot="iconL" @click="searchHandle()">
					搜索
				</div>
			</zgh-header>
		</div>

		<div class="relative" style="height:10%">
			<zgh-header class="middle_before">
				<div class="search_input middle middle_before m-fs28" slot="title" @click="$router.go(-1)">
					<i class="iconfont middle">&#xe60a;</i>
					<div class="middle val">点击跳转至搜索</div>
				</div>
			</zgh-header>
		</div>

		<div class="relative" style="height:10%">
			<zgh-header :goBack="false" class="middle_before">
				<button class="iconL colorf" slot="iconL">iconL</button>
				<div slot="title" class="middle colorf">title</div>
				<button class="iconR colorf" slot="iconR">iconR</button>
			</zgh-header>
		</div>
    <div class="highlight mgB30">
      <div class="wp fs14">
        <pre>
            <code class="hljs language-html">
    <h3 class="bold fs16">本例用法：</h3>
              {{code | htmlDecode}}
            </code>
          </pre>
        <h3 class="bold color3 textC pdB20">options参数说明</h3>
      </div>
    </div>
	</div>
</template>

<script>
	export default {

		data() {
			return {
				searchval: '',
        code:`
        <zgh-header :goBack="false" class="middle_before">
          <button class="iconL colorf" slot="iconL">iconL</button>
          <div slot="title" class="middle colorf">title</div>
          <button class="iconR colorf" slot="iconR">iconR</button>
        </zgh-header>
        `
			}
		},
		computed: {
			routes() {
				return this.$router.options.routes
			}
		},
		mounted() {

		},
		methods: {
			searchHandle() {
				console.log(this.searchval)
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("../../assets/config.less");
	.search_input {
		@w: 56;
		@h: 56;
		width: 70%;
		height: 60%;
		border-radius: 6px;
		background: #f4f4f4;
		position: relative;
		text-align: left;
		font-size: 0;
		.iconfont {
			/*position: absolute;*/
			left: 0px;
			top: 0;
			/*display: block;*/
			color: #333;
			width: 13%;
			text-align: center;
		}
		.val {
			background: transparent;
			/*height:100%;*/
			width: 85%;
			font-size: 16px;
		}
	}
</style>
