fix: use flex box for search-row

packages/base/data/search-row.vue

@@ -1,91 +1,102 @@
 <template>
-    <div class="search-row">
+  <div class="search-row">
-        <div class="left">
+    <div class="left">
-            <span class="title" v-if="title">{{ title }}</span>
+      <span class="title" v-if="title">{{ title }}</span>
-            <NoobButton v-if="fresh" type="info" icon="Refresh" @click="emit('query')"> </NoobButton>
+      <NoobButton v-if="fresh" type="info" icon="Refresh" @click="emit('query')"> </NoobButton>
-            <NoobButton v-if="add" type="primary" icon="Plus" @click="emit('add')">
+      <NoobButton v-if="add" type="primary" icon="Plus" @click="emit('add')">
-                {{ t('base.add') }}
+        {{ t("base.add") }}
-            </NoobButton>
+      </NoobButton>
-            <NoobButton v-if="del" type="danger" icon="Delete" @click="emit('delete')">
+      <NoobButton v-if="del" type="danger" icon="Delete" @click="emit('delete')">
-                {{ t('base.delete') }}
+        {{ t("base.delete") }}
-            </NoobButton>
+      </NoobButton>
-            <slot name="left"></slot>
+      <slot name="left"></slot>
-        </div>
-        <div class="query">
-            <slot></slot>
-            <NoobButton v-if="query" type="primary" icon="Search" @click="emit('query')">
-                {{ t('base.select') }}
-            </NoobButton>
-        </div>
     </div>
+    <div class="query">
+      <slot></slot>
+      <NoobButton v-if="query" type="primary" icon="Search" @click="emit('query')">
+        {{ t("base.select") }}
+      </NoobButton>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
 import { useStore } from "vuex";
-import { useI18n } from 'vue3-i18n';
+import { useI18n } from "vue3-i18n";
-import { NoobButton } from 'noob-mengyxu';
+import { NoobButton } from "noob-mengyxu";
 const { t } = useI18n();
 const { state } = useStore();
 const prop = defineProps({
-    title: {
+  title: {
-        type: String,
+    type: String,
-        default: null
+    default: null,
-    },
+  },
-    fresh: {
+  fresh: {
-        type: Boolean,
+    type: Boolean,
-        default: true,
+    default: true,
-    },
+  },
-    add: {
+  add: {
-        type: Boolean,
+    type: Boolean,
-        default: true,
+    default: true,
-    },
+  },
-    del: {
+  del: {
-        type: Boolean,
+    type: Boolean,
-        default: true,
+    default: true,
-    },
+  },
-    query: {
+  query: {
-        type: Boolean,
+    type: Boolean,
-        default: true,
+    default: true,
-    },
+  },
 });
 
 const emit = defineEmits(["query", "add", "delete"]);
 
-onMounted(() => { });
+onMounted(() => {});
 </script>
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
 .search-row {
-    padding: v-bind('state.size.searchRowPad');
+  display: flex;
-    background-color: v-bind('state.style.searchRowBg');
+  flex-direction: row;
+  justify-content: space-between;
+  padding: v-bind("state.size.searchRowPad");
+  background-color: v-bind("state.style.searchRowBg");
 }
 
+.left,
 .query {
-    // align-items: right;
+  display: flex;
-    text-align: right;
+  flex-wrap: wrap;
-    float: right;
+  gap: 12px;
-    // width: 50%;
+  height: fit-content;
 }
 
-.left {
+.query {
-    float: left;
+  // align-items: right;
-    // width: 50%;
+  justify-content: flex-end;
+  text-align: right;
+  // width: 50%;
+}
+
+.left .el-button,
+.query .el-button {
+  margin-left: 0 !important;
 }
 
 .search-row,
 .query,
 .title,
 .left {
-    height: v-bind('state.size.searchRowHeight');
+  min-height: v-bind("state.size.searchRowHeight");
-    line-height: v-bind('state.size.searchRowHeight');
+  line-height: v-bind("state.size.searchRowHeight");
 }
 
 .title {
-    font-weight: bold;
+  font-weight: bold;
-    padding-right: 15px;
+  padding-right: 15px;
-    font-size: v-bind('state.size.titleSize');
+  font-size: v-bind("state.size.titleSize");
-    min-width: 20px;
+  min-width: 20px;
-    color: v-bind('state.style.subTitleColor')
+  color: v-bind("state.style.subTitleColor");
 }
 </style>