<template>
	<div class="app-search-module">
        <div class="icon-wrap">
            <i class="iconfont iconsearch"></i>
        </div>
        <div class="input-wrap">
            <input type="text" :placeholder="placeholder" placeholder-class="placeholder">
        </div>
    </div>
</template>

<script>
export default {
	name: 'app-search-module',
	props: {
		placeholder: {
			type: String,
			default: '请输入'
		}
	}
}
</script>

<style lang="scss" scoped>
.app-search-module {
    @include disFlex(center, flex-start);
    height: 66px;
    width: 100%;
    background-color: #F0F2F6;
    border-radius: 10px;
    .icon-wrap {
        margin: 0 14px 0 20px;
        width: 40px;
        .iconfont {
            color: #ccc;
        }
    }
    .input-wrap {
        width: calc(100% - 90px);
        input {
            font-size: 26px;
        }
        .placeholder {
            color: #ccc;
        }
    }
}
</style>
