<template>
    <view
        class="search-bar"
        :style="{background: bgColor}"
    >
        <view class="search-bar-cont c-font-15" :style="{boxShadow}">
            <c-navigate :url="url">
                <c-icon name="search" class="search-bar-icon"/>
                <text>{{ placeHolder }}</text>
            </c-navigate>
        </view>
    </view>
</template>

<script>
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CNavigate from './navigate';
/**
 * @author 某位大哥
 * @file 搜索框
 * @categories 通用组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
        CNavigate
    },
    props: {
        /**
         * url
         */
        url: {
            type: String,
            default: ''
        },
        /**
         * 提示文本
         */
        placeHolder: {
            type: String,
            default: ''
        },
        /**
         * 背景颜色
         */
        bgColor: {
            type: String,
            default: ''
        },
        /**
         * 阴影
         */
        boxShadow: {
            type: String,
            default: '0 3px 20px 0 rgba(0,0,0,0.06)'
        }
    }
};
</script>
<style lang="less" scoped>
.search-bar {
    background: linear-gradient(to right, #00CFA3, #05CFCD, #00D3EA);
    padding: 0 .17rem;
    &-cont {
        color: #bbb;
        border-radius: 40px;
        padding: 0 15px;
        background: #fff;
        line-height: 38px;
    }
    &-icon {
        display: inline-block;
        margin-right: 10px;
        font-weight: 900;
        height: 38px;
    }
}
</style>


