SOURCE

<div class="content">
    <div class="headers">
        <div class="search">
            <div class="icon-input">
                <!-- <p class="icon"></p> -->
                <i class="icon ion-search icon-content"></i>
                <input type="search" placeholder="请输入渠道、拜访人物、作者">
            </div>
        </div>
    </div>
    <div class="date-select">
        <div class="date-title">时间选择:</div>
        <div class="date-content">
            <div class="date-block">
                <div class="date-text">2021-4-15</div>
                <div class="dete-picker"></div>
                <!-- <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime> -->
            </div>
            <span>至</span>
            <div class="date-block">
                <div class="date-text">2021-4-16</div>
                <div class="dete-picker"><ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime></div>
            </div>
        </div>
        <div class="date-btn">
            <button class="btn">查询</button>
        </div>
    </div>
    <div class="add-daily">
        <i class="icon ion-plus add-icon"></i>
        <div class="daily-content">新增日报</div>
    </div>
    <div class="record-car">
        <div class="car-header">
            <div class="header-text">2021-5-12 今日</div>
            <div class="record-info">共23条记录</div>
            <div class="header-text text-warm">不完整 2条</div>
        </div>
        <div class="split-line"></div>
        <div class="car-footer">
            <div class="footer-text">线上： 2次</div>
            <div class="footer-text">拜访： X次</div>
            <div class="footer-text">培训： 4次</div>
        </div>
    </div>
    <div class="record-car">
        <div class="car-header">
            <div class="header-text>2021-5-12 今日</div>
            <div class="record-info">共23条记录</div>
            <div class="header-text text-warm">不完整 2条</div>
        </div>
        <div class="split-line"></div>
        <div class="car-footer">
            <div class="footer-text">线上： 2次</div>
            <div class="footer-text">拜访： X次</div>
            <div class="footer-text">培训： 4次</div>
        </div>
    </div>
</div>

.content {
    font-size: 14px;
    font-family: PingFang-SC-Medium;
	font-weight: normal;
	font-stretch: normal;
    letter-spacing: 0em;
    color: #222222;
}

.headers {
	width: 100%;
	/* height: 15%; */
	background-color: #ffffff;
    text-align: center;
    padding-top: .71em;
}


.search{
    width: 100%;
	font-family: PingFang-SC-Regular;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
    position: relative;
	height: 2.14em;
	/* background-color: #f1f0ef; */
	/* border-radius: 1.07rem; */
    text-align: center;
}

input[type=search] {
    width: 94%;
    height: 2.14em;
	background-color: #f2f2f2;
	border-radius: 25px;
    border: rgba(242, 242, 242, 1);
    padding-left: 2.14em;
	font-family: PingFangSC;
	font-size: 0.93em;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0rem;
	color: #b8b9ba;
}
  .icon-input {
      position: relative;
  }
  .icon-content {
      position: absolute;
      top: .2em;
      left: 1.5em;
      width: 1em;
      height: 1em;
      border-radius: 0.5em;
  }

.date-select {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
	height: 1.43em;
    padding: 1em .3em;
}

.date-title {
    width: 5em;
	height: 0.89em;
	font-family: PingFangSC;
	font-size: 0.93em;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0rem;
	color: #918f8f;
}
input {
    outline: none;
}

.date-btn {
    width: 3.57em;
	height: 1.43em;
	border-radius: 0.71rem;
}

.date-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
}

.dete-picker {
    width: 1em;
    height: 1em;
    background-color: hotpink;
    margin-left: .5em;
}
.date-block {
    display: flex;
    align-items: center;
    padding: 0 .5em;
	border-radius: 0.14em;
	border: solid 0.07em #c0bdbd;
	opacity: 0.3;
    margin: 0 .2em 0 .2em;
}

.date-text {
	font-family: PingFangSC;
	font-size: 0.71em;
}
.btn {
    background-color: #fc7a00;
    border-radius: .5em;
    border: 0;
    width: 3em;
	font-family: PingFangSC;
	font-size: 0.93em;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0rem;
	color: #ffffff;
}


 .add-daily {
    display: flex;
    width: 100%;
    height: 3em;
    align-items: center;
    justify-content: center;
    border: .1em dashed #CCCCCC;
    border-radius: .5em;
    margin: 1em  0 1em;
}

.add-icon {
    font-size: 1.2em;
    margin-right: .1em;
}

.record-car {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 5em;
    padding: .8em;
    margin-top: 1em;
    border-radius: .5em;
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}

.car-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* .car-header > div:nth-of-type(2) {
    font-weight: bold;
    font-size: 1.2em;
} */
.header-text {
	height: 0.82rem;
	font-family: PingFangSC;
	font-size: 0.86rem;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0rem;
	color: #918f8f;
}

.text-warm {
    color: #e71e23;
}


.record-info {
	height: 0.96em;
	font-family: PingFangSC-Medium;
	font-size: 1em;
	font-weight: bold;
	font-stretch: normal;
	line-height: 1.29em;
	letter-spacing: 0em;
	color: #222222;
}

.car-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color:#00bfff;
}
.split-line {
    border-bottom: .1em solid #C9C9C9;
    margin: 0 .1em;
}

.footer-text {
	height: 0.82em;
	font-family: PingFangSC;
	font-size: 0.86em;
	font-weight: normal;
	font-stretch: normal;
	line-height: 1.29em;
	letter-spacing: 0em;
	color: #77b3e9;
}