SOURCE

<div>
    <div class="headers">
        <div class="search">
            <!-- <p class="search-icon">aaa</p> -->
            <input type="search" placeholder="请输入产品代码、产品名称或经理名称进行检索">
        </div>
        <div class="search-title">
            <p>
                <span class="remen">hou</span>
                热门检索:
                <span>刘格菘</span>
                <span>傅友兴</span>
                <span>郑澄然</span>
                <span>吴兴武</span>
            </p>
        </div>
    </div>

    <div class="select">
        <div>
            <div class="flex row">
                <div class="flex col">
                    <div class="col-left"></div>
                    <div class="col-right">
                        <div class="col-name"><span></span>刘格菘</div>
                        <div class="col-count">
                          <span>权益基金经理</span>  
                          <span>成长投资部</span>  
                          <span>843.43亿元</span>  
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="select-button mar">
            <div class="titlt-left">从业信息</div>
        </div>
        <div class="mar-left">
             <div class="select-main">
            <div class="flex space-between"> 
                <div> 从事投资管理年限</div>
                <div class="right"> 7.697 <span>年</span> </div>
            </div>
            </div>
            <div class="select-main">
                <div class="flex space-between"> 
                    <div> 从事公募投资管理年限</div>
                    <div class="right"> 7.5189 <span>年</span> </div>
                </div>
            </div>
            <div class="select-main">
                <div class="flex space-between"> 
                    <div> 管理公募只数</div>
                    <div class="right"> 7 <span>只</span> </div>
                </div>  
            </div>
            <div class="select-main">
                <div class="flex space-between"> 
                    <div> 管理公募只数（监管维度）</div>
                    <div class="right"> 7 <span>只</span> </div>
                </div>  
            </div>
        </div>
    </div>

    <div class="select">
        <div class="select-button mar">
            <div class="titlt-left">产品信息（公募）</div>
            <div class="flex wrap button-right">
               <div>任职回报</div>
               <div>2021-03-19</div> 
            </div>
        </div>
        <div class="select-button mar">
            <div class="titlt-left">广发小盘成长回合（LOF）A</div>
            <div class="right">197.31%</div>
        </div>
        <div class="select-button mar">
            <div class="titlt-left">广发创新升级混合</div>
            <div class="right">229.33%</div>
        </div>
    </div>
</div>

.headers {
	width: 100%;
	/* height: 15%; */
	background-color: #ffffff;
    text-align: center;
    margin-bottom: 10px
}


.search{
    width: 100%;
	font-family: PingFang-SC-Regular;
	font-size: 12px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
    text-align: center;
    padding: 5px 11px;
    position: relative;
}
.search-icon{
    display: block;
    position: absolute;
    top: 9px;
    left: 19px;
}
input[type=search] {
    width: 90%;
	height: 30px;
    font-size: 12px;
	background-color: #f2f2f2;
	border-radius: 25px;
    border: rgba(242, 242, 242, 1);
}


.search-title{
    font-family: PingFang-SC-Medium;
	font-size: 11px;
	font-weight: normal;
	font-stretch: normal;
    padding-bottom: 10px;
}
p .remen {
	width: 18px;
	height: 24px;
	background-color: rgba(237, 128, 49, 1);
}
p span{
	letter-spacing: 0px;
	color: #0e6c9c;
}

.select{
	background-color: #ffffff;
    padding: 15px 16px;
    font-family: PingFang-SC-Medium;
	font-size: 12px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #707070;
    margin-bottom: 10px
}
.select-button{
    display: flex;
    justify-content: space-between;
}
.titlt-left{
    font-family: PingFangSC;
	font-size: 15px;
	color: #222222;
}
.button-right button {
    width: 50px;
	height: 20px;
	background-color: #ed8031;
    color: #fff;
	border-radius: 4px;
    border: none;
}
.flex{
    display: flex;
}
.wrap{
    flex-direction: row;
}
.space-between{
    justify-content: space-between;
}
.space-around{
    justify-content: space-around;
}
.mar-left{
    margin-left: 30px;
}
.select-main{
    margin: 15px 0px;
    font-family: PingFangSC;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #222222;
}
.select-main .left{
    width: 40%;
    margin-right: 5%;
}
.select-main .right{
    font-family: PingFang SC Medium;
	font-size: 15px;
	color: #0e6c9c;
}
.right span{
    font-family: PingFangSC;
	font-size: 12px;
	color: #cccccc;
}
.select-1{
    width: 55px;
	height: 20px;
	background-color: #f4f3f3;
	border-radius: 4px;
}
.mar{
    margin-bottom: 12px;
}

.row{
    font-family: PingFang-SC-Medium;
	font-size: 13px;
	color: #707070;
    margin-bottom: 31px;
}
.col{
    min-height: 30px;
}
.col-left{
    width: 62px;
	height: 62px;
    border: 1px solid #000;
    border-radius: 50%;
    margin-right: 11px;
}
.col-count{
	font-family: PingFangSC;
	font-size: 14px;
	color: #222222;
}
.col-name{
    font-family: PingFang SC Bold;
	font-size: 18px;
	color: #222222;
    margin-bottom: 21px;
    font-weight: 600;
}
.right{
    font-family: PingFangSC;
	font-size: 17px;
	color: #eb811b;
}