1、html
<form class="form-inline search-box" role="form" name="logFilter_form"> <div class="operate-wrap"> <div class="row-fluid"> <div class="form-group span12"> <label class="control-label">{{'zeus.systemLog.operationLog.resourceName'| translate}}</label> <div class="controls"> <input type="text" class="form-control resourceName" ng-model="filterData.resource"/> </div> </div> </div> <div class="row-fluid"> <div class="form-group span6"> <label class="control-label">{{'zeus.systemLog.operationLog.event_type'| translate}}</label> <div class="controls " > <select2 ng-model="filterData.event_type" s2-options="item.name as item.title for item in event_type" > </select2> </div> </div> <div class="form-group span6"> <label class="control-label">{{'zeus.systemLog.operationLog.event_status'| translate}}</label> <div class="controls "> <select2 ng-model="filterData.result" s2-options="item.name as item.title for item in result"> </select2> </div> </div> </div> <div class="row-fluid"> <div class="form-group time-picker start span6"> <label class="control-label">开始时间</label> <div class="controls"> <div class="input-group date form_date col-md-5"> <input class="form-control fromTime" name="startTime" autocomplete="off" type="text" size="16" get-timepicker ng-model="filterData.stime" ng-pattern="/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/" placeholder="{{'zeus.systemLog.click2choseStartTime'| translate}}"> <span class="input-group-addon"> <span class="glyphicon glyphicon-remove fa fa-remove"></span> </span> <span class="input-group-addon calendar-cont" get-timepicker> <span class="glyphicon glyphicon-calendar fa fa-calendar"></span> </span> <div class="error" ng-messages="logFilter_form.startTime.$error"> <div ng-message="pattern">{{'zeus.errors.systemLog.timeFormatError'| translate}}</div> </div> </div> </div> </div> <div class="form-group time-picker end span6"> <label class="control-label">结束时间</label> <div class="controls"> <div class="input-group date form_date col-md-5"> <input class="form-control endTime" name="endTime" type="text" size="16" autocomplete="off" get-timepicker ng-model="filterData.etime" ng-pattern="/^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])-([0][1-9]|[1][0-2])-([0-2][1-9]|[3][0-1])\s([0-1][0-9]|[2][0-3]):([0-5][0-9]):([0-5][0-9])$/" placeholder="{{'zeus.systemLog.click2choseEndTime'| translate}}"> <span class="input-group-addon"> <span class="glyphicon glyphicon-remove fa fa-remove"></span> </span> <span class="input-group-addon calendar-cont" get-timepicker> <span class="glyphicon glyphicon-calendar fa fa-calendar"></span> </span> <div class="error" ng-messages="logFilter_form.endTime.$error"> <div ng-message="pattern">{{'zeus.errors.systemLog.timeFormatError'| translate}}</div> </div> </div> </div> </div> </div> <div class=" btn-operate"> <div class="form-group" > <button type="submit" class="btn btn-default" ng-click="queryFun()" ng-disabled="logFilter_form.$invalid">{{'zeus.systemLog.query'| translate}}</button> </div> </div> </div> </form>
2、css
.operate-wrap{ .form-group{ display: block; padding:0 5px; margin-bottom:8px; input{ border: 1px solid #dce3e5; border-radius: 7px; } .control-label{ float:left; width:80px; text-align:right; line-height:40px; margin-bottom:0; } .controls{ margin-left:90px; display:block; .form-control{ width:100%; max-width:none; box-sizing:border-box; height:40px; } .select2-container{ width:100%; a{ border: 1px solid #dce3e5; height: 35px; line-height: 35px; } span{ &.select2-arrow{ border: 1px solid #ccc; } } } } .input-group{ .input-group-addon{ display: inline-block; border: 1px solid #dce3e5; padding:0 5px; border-left: none; height: 38px; line-height: 34px; margin-left: -4px; color: #43b49e; } .calendar-cont{ border-bottom-right-radius: 5px; border-top-right-radius: 5px; } } .form_date{ position: relative; .input-group-addon{ position:absolute; right:30px; top:0; padding:0; width:30px; text-align:center; } .calendar-cont{ position:absolute; right:0; top:0; } } } .btn-operate{ margin-left:90px; .btn{ position: static; background: #43b49e; font-size: 16px; color: #fff; border-radius: 8px; border: 1px solid #43b49e; padding: 0 40px; width:auto } } }