console
<div class="content">
<div class="daily-detail">新增沟通记录</div>
<div class="detail-info">
<div class="detail-row">
<div><span class="required">*</span><span class="comu-type">沟通类型:</span></div>
<div>
<span class='substance'>渠道客户</span>
<svg t="1584499746507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5577" width="14" height="14"><path d="M512 757.5l-421.2-491h842.4z" fill="#707070" p-id="5578"></path></svg>
</div>
</div>
<div class="detail-row">
<div><span class="required">*</span><span class="comu-type">沟通时间:</span></div>
<div>
<span class='substance'>2021-4-15</span>
<svg t="1584499746507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5577" width="14" height="14"><path d="M512 757.5l-421.2-491h842.4z" fill="#707070" p-id="5578"></path></svg>
</div>
</div>
<div class="search-row">
<div class="search-row-left"><span class="required">*</span><span class="comu-type">拜访对象:</span></div>
<div class="search-content">
<div class="search">
<div class="icon-input">
<i class="icon ion-search icon-content"></i>
<input type="search" placeholder="请输入渠道、人名">
</div>
</div>
</div>
<div>
<button class="add-btn">新增</button>
</div>
</div>
</div>
<div class="detail-form">
<div class="delete-icon"></div>
<div>
<table class="detail-table" border="0" cellspacing="0" cellpadding="6">
<tr>
<td><div><span class="required">*</span><span class="comu-type">渠道</span></div></td>
<td colspan="3" class="td-left">工商/广东/广州</td>
</tr>
<tr>
<td rowspan="4"><div><span class="required">*</span><span class="tr-height">拜访人物</span></div></td>
</tr>
<tr>
<td class="td-left">王先生</td>
<td class="td-left">分公司经理</td>
<td class="td-left">删除</td>
</tr>
<tr>
<td class="td-left">李小姐</td>
<td class="td-left">分公司经理</td>
<td class="td-left">删除</td>
</tr>
<tr>
<td class="td-left">欧小姐</td>
<td class="td-left">分公司经理</td>
<td class="td-left">删除</td>
</tr>
<tr>
<td>渠道备注</td>
<td colspan="4" class="table-td td-left"><input class="table-small-input" placeholder="请输入渠道备注" /></td>
</tr>
<tr>
<td>渠道特点</td>
<td colspan="4" class="table-td td-left"><input class="table-small-input" placeholder="请输入渠道特点" /></td>
</tr>
</table>
</div>
<div class="detail-row">
<div><span class="required">*</span><span class="comu-type">参与人员:</span></div>
<div>
<button class='btn-select'>选择</button>
</div>
</div>
<div class="height-row">
<div class="row-title">沟通内容：</div>
<input type="text" class="table-max-input" />
</div>
<div class="height-row">
<div class="row-title">重要项目：</div>
<input type="text" class="table-max-input" />
</div>
<div class="detail-row">
<div class="row-title">培训场次：</div>
<input type="text" class="table-small-input" />
</div>
<div class="detail-row">
<div class="row-title"><span class="required">*</span><span class="comu-type">投研支持:</span></div>
<div>
<button class='btn-select'>选择</button>
</div>
</div>
<div class="height-row">
<div class="row-title">备注：</div>
<input type="text" class="table-small-input" />
</div>
<div class="deatil-footer">
<button class="footer-btn">保存</button>
</div>
</div>
</div>
.content {
font-size: 14px;
font-family: PingFang-SC-Medium;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0em;
color: #222222;
background-color: #fff;
padding: .8em;
}
.daily-detail {
height: 0.96em;
font-family: PingFangSC-Medium;
font-size: 1rem;
font-stretch: normal;
font-weight: 500;
letter-spacing: 0em;
color: #222222;
margin-bottom: .5em;
}
.detail-info {
font-family: PingFangSC;
font-size: 0.86em;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
}
.required {
color: #f56c6c;
margin-right: 4px;
}
.detail-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em;
border-bottom: .1em solid #C9C9C9;
}
.search {
font-family: PingFang-SC-Regular;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
}
input[type=search] {
width: 100%;
height: 1.79em;
background-color: #f2f2f2;
border: rgba(242, 242, 242, 1);
padding-left: 2.14em;
font-size: 1.1em;
}
.search-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em;
}
.search-row-left {
width: 5em;
font-family: PingFangSC;
font-size: 0.86rem;
font-weight: normal;
font-stretch: normal;
margin-right: .5em;
}
.search-content {
flex: 1;
}
.icon-input {
position: relative;
}
.icon-content {
background-color: red;
position: absolute;
top: 0.5em;
left: 1em;
width: 1em;
height: 1em;
border-radius: 0.5em;
}
.add-btn {
border: 0;
background-color: #fff;
width: 3em;
font-family: PingFangSC;
font-size: 1em;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #77b3e9;
}
.detail-table {
width: 100%;
border:.1em solid #C9C9C9;
border-top-width:0px;
}
.table-td {
}
.table-input {
border: 0;
}
.tr-height {
}
.btn-select {
width: 4em;
height: 3em;
background-color: #fc7a00;
border: 0;
border-radius: 3em;
color: #fff;
font-size: 0.6em;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
font-family: PingFangSC;
}
.deatil-footer {
text-align: center;
height: 3em;
}
.footer-btn {
border: 0;
background-color: #fff;
color: #00bfff;
line-height: 3em;
}
.detail-table tr, td {
border-top:.1em solid #C9C9C9;
}
.td-left {
border-left: .1em solid #C9C9C9;
}
.height-row {
display: flex;
height: 3em;
padding: 0.5em;
border-bottom: .1em solid #C9C9C9;
}
.row-title {
font-family: PingFangSC;
font-size: 0.86em;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0em;
color: #222222;
}
.table-max-input {
flex: 1;
border: 0;
height: 3em;
}
input {
outline:none;
}
button {
outline:none;
}
.table-small-input {
border: 0;
flex: 1;
}