<template>
  <div class="search-component">
    <div class="search-box">
      <i class="el-icon-search" />
      <input :placeholder="configContent.placeholder" type="text">
    </div>
  </div>
</template>
<script>
export default {
  props: {
    config: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    configContent() {
      return this.config.content
    }
  }
}
</script>
<style lang="less" scoped>
.search-component {
	// position: absolute;
	display: flex;
	align-items: center;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	height: 47px;
	.search-box {
		display: flex;
		align-items: center;
		width: 100%;
		height: 27px;
		margin: auto;
		background: rgba(248, 248, 248, 0.8);
		border-radius: 12px;
		background-color: #f8f8f8;
		border: 1px solid #eee;
		border-radius: 12px;
		overflow: hidden;
		i{
			width: 30px;
			height: 27px;
			line-height: 27px;
			text-align: center;
		}
		input{
			flex: 1;
			height: 27px;
			padding: 8px 8px 8px 0;
			border: none;
			font-size: 12px;
			border-radius: 12px;
			outline: none;
			&::placeholder {
				color: #aaaaaa;
				font-size: 12px;
			}
		}
	}
}
</style>
