style(logger): adjust search options

src/views/logger/index.vue

@@ -6,83 +6,74 @@
       @pagination="getList"
     >
       <template #header>
-        <div class="l-flex__fill l-flex--col">
-          <div class="l-flex--row has-bottom-padding">
-            <div class="l-flex__auto" />
-            <el-date-picker
-              v-model="options.params.beginTime"
-              class="l-flex__none c-sibling-item o-datetime"
-              type="datetime"
-              placeholder="开始时间"
-              default-time="00:00:00"
-              format="yyyy-MM-dd HH:mm"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              @focus="onDateTimeFocus('beginTime')"
-              @change="onDateTimeChange('beginTime')"
-            />
-            <el-date-picker
-              v-model="options.params.endTime"
-              class="l-flex__none c-sibling-item o-datetime"
-              type="datetime"
-              placeholder="结束时间"
-              default-time="23:59:59"
-              format="yyyy-MM-dd HH:mm"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              @focus="onDateTimeFocus('endTime')"
-              @change="onDateTimeChange('endTime')"
-            />
-            <el-select
-              v-model="options.params.status"
-              class="l-flex__none c-sibling-item o-status-select"
-              placeholder="请选择状态"
-              @change="search"
-            >
-              <el-option
-                v-for="(item, index) in statusOptions"
-                :key="index"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </div>
-          <div class="l-flex--row">
-            <div class="l-flex__auto" />
-            <search-input
-              v-model.trim="options.params.userName"
-              class="l-flex__none c-sibling-item"
-              placeholder="操作者"
-              @search="search"
+        <div class="l-flex__auto c-option-grid">
+          <el-date-picker
+            v-model="options.params.beginTime"
+            class="c-option-grid__item"
+            type="datetime"
+            placeholder="开始时间"
+            default-time="00:00:00"
+            format="yyyy-MM-dd HH:mm"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            @focus="onDateTimeFocus('beginTime')"
+            @change="onDateTimeChange('beginTime')"
+          />
+          <el-date-picker
+            v-model="options.params.endTime"
+            class="c-option-grid__item"
+            type="datetime"
+            placeholder="结束时间"
+            default-time="23:59:59"
+            format="yyyy-MM-dd HH:mm"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            @focus="onDateTimeFocus('endTime')"
+            @change="onDateTimeChange('endTime')"
+          />
+          <search-input
+            v-model.trim="options.params.userName"
+            placeholder="操作者"
+            @search="search"
+          />
+          <el-select
+            v-model="options.params.business"
+            placeholder="请选择模块"
+            :loading="fetching"
+            @visible-change="getBusiness"
+            @change="search"
+          >
+            <el-option
+              v-for="item in businessOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
             />
-            <el-select
-              v-model="options.params.business"
-              class="c-sibling-item"
-              style="width: 200px;"
-              placeholder="请选择模块"
-              :loading="fetching"
-              @visible-change="getBusiness"
-              @change="search"
-            >
-              <el-option
-                v-for="item in businessOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-            <search-input
-              v-model.trim="options.params.description"
-              class="l-flex__none c-sibling-item"
-              placeholder="操作描述"
-              @search="search"
+          </el-select>
+          <search-input
+            v-model.trim="options.params.description"
+            placeholder="操作描述"
+            @search="search"
+          />
+          <el-select
+            v-model="options.params.status"
+            placeholder="请选择状态"
+            @change="search"
+          >
+            <el-option
+              v-for="(item, index) in statusOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
             />
+          </el-select>
+          <div>
             <button
-              class="l-flex__none c-sibling-item o-button"
+              class="c-sibling-item o-button"
               @click="search"
             >
               搜索
             </button>
             <button
-              class="l-flex__none c-sibling-item o-button"
+              class="c-sibling-item o-button"
               @click="reset"
             >
               重置
@@ -290,7 +281,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.o-datetime {
+.c-option-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 200px);
+  grid-gap: 10px;
+
+  &__item {
+    width: 200px;
+  }
+}
+
+.o-option {
   width: 200px;
 }
 .o-status-select {