搜索框样式

src/components/minheader/index.vue

@@ -6,11 +6,23 @@
     <div v-if="isStatus || isStatuser" class="vStatus">
       <slot name="header" />
     </div>
-    <template v-if="isBtn">
+    <div v-if="isBtn" class="rb">
+      <template v-if="isSearch">
+        <div class="serlog">
+          <div class="log"></div>
+        </div>
+        <el-input
+          v-model="input"
+          class="inputcas"
+          placeholder="请输入您要搜索的内容"
+          clearable
+        />
+        <el-button type="danger" size="default" class="br L12">搜索</el-button>
+      </template>
       <template v-if="isAuth">
         <el-button size="default" plain class="btn-white br">新增</el-button>
       </template>
-    </template>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -35,11 +47,52 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  //是否显示搜索
+  isSearch: {
+    type: Boolean,
+    default: false,
+  },
 });
+//搜索内容
+const input = ref("");
 </script>
 <style lang="scss" scoped>
 .data-table-btn {
   line-height: 32px;
   margin-bottom: 20px;
 }
+.inputcas {
+  width: 240px;
+  height: 32px;
+  background: #ffffff;
+  // border: 1px solid #d2d6df;
+  // box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border: none;
+  // box-shadow: 0 0 0 0;
+}
+::v-deep .el-input__wrapper {
+  box-shadow: none;
+}
+.rb {
+  display: flex;
+  align-items: center;
+}
+.serlog {
+  width: 32px;
+  height: 32px;
+  background: #fff;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  display: flex;
+  align-items: center;
+  > .log {
+    width: 14px;
+    height: 14px;
+    background: url("../../assets/header/ic_search_top.png") no-repeat;
+    background-size: 100% 100%;
+    margin-left: 16px;
+  }
+}
 </style>

src/styles/index.scss

@@ -138,3 +138,6 @@
   width: 64px;
   height: 32px;
 }
+.L12 {
+  margin-left: 12px;
+}

src/theme/index.scss

@@ -29,7 +29,7 @@
   line-height: 30px;
   &::after {
     position: absolute;
-    content: '';
+    content: "";
     width: 4px;
     height: 20px;
     top: 0;
@@ -71,6 +71,18 @@
     background-color: #ac014d;
   }
 }
+
+.el-button--danger {
+  color: #fff;
+  border-color: #ac014d;
+  background-color: #ac014d;
+  &:hover,
+  &:focus {
+    color: #fff;
+    border-color: #ac014d;
+    background-color: #ac014d;
+  }
+}
 .r10 {
   margin-right: 10px;
 }

src/views/systemSettings/warningSet/index.vue

@@ -1,11 +1,19 @@
 <template>
-  <div></div>
+  <div class="airportInfo">
+    <div class="wrap">
+      <Minheader :is-auth="true" :is-statuser="true" :is-Search="true">
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">告警预警维护</div>
+          </div>
+        </template></Minheader
+      >
+      <DataTable />
+    </div>
+  </div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  setup() {},
-});
+<script setup lang="ts">
+import DataTable from "@/views/table/index.vue";
+import Minheader from "@/components/minheader/index.vue";
 </script>
 <style lang="scss" scoped></style>