pageWrappersearch

itemtitle

src/assets/styles/element-ui.scss

@@ -118,3 +118,46 @@
     padding: var(--el-dialog-padding-primary);
   }
 }
+.el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: rgba(238, 243, 252, 1) !important; /* 偶数行颜色 */
+}
+
+.custom-dialog {
+  border-radius: 8px;
+  .custom-dialog-header {
+    padding-top: 30px;
+    padding-left: 28px;
+    padding-right: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .custom-dialog-title {
+      font-size: 16px;
+      font-weight: 500;
+      letter-spacing: 0px;
+      line-height: 22px;
+      color: rgba(53, 64, 79, 1);
+    }
+    .custom-dialog-close {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+  }
+  .el-dialog__header {
+    padding-bottom: 0;
+  }
+  .dialog-divider{
+    margin-top: 24px;
+    margin-bottom: 20px;
+  }
+  .dialog-content {
+    padding: 0 28px;
+  }
+  .el-dialog__footer {
+    display: flex;
+    justify-content: center;
+    padding-top: 67px;
+    padding-bottom: 35px;
+  }
+}

src/assets/styles/index.scss

@@ -173,6 +173,8 @@ aside {
     display: flex;
     flex-direction: column;
     padding: var(--container-pd-inner);
+    padding-left: 0;
+    padding-right: 0;
     height: 100%;
     // background-color: #fff;
     // border-radius: var(--el-border-radius-base);

src/components/ItemTitle/index.vue

+<script setup lang="ts" name="PageTitle">
+/**
+ * 用法说明
+  <PageTitle showBackBtn @handlePageBack="handlePageBack">
+    <span>新增拟入职申请</span>
+    <template #btnList>
+      <el-button type="primary">提 交</el-button>
+    </template>
+  </PageTitle>
+ */
+
+import { computed, onMounted } from 'vue'
+
+
+
+
+const props = withDefaults(defineProps<{
+  title: string
+}>(), {
+  title: '标题'
+})
+
+
+</script>
+
+<template>
+ <div class="item-title-container">
+  <div class="bridge"></div>
+  <div class="title-text">{{ props.title }}</div>
+ </div>
+</template>
+
+<style lang="scss" scoped>
+.item-title-container{
+  display: flex;
+  align-items: center;
+  .bridge{
+    width: 2.26px;
+    height: 14px;
+    border-radius: 8px;
+    background: rgba(33, 103, 217, 1);
+  }
+  .title-text {
+    margin-left: 11px;
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 22px;
+    color: rgba(53, 64, 79, 1);
+  }
+}
+</style>

src/components/Search/PageWrapperSearch.vue

@@ -73,6 +73,7 @@ export default defineComponent({
     extraButtons: {
     type: Array as PropType<Array<{
       text: string
+      color?: string 
       type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
       plain?: boolean
       round?: boolean
@@ -158,19 +159,7 @@ export default defineComponent({
             class: 'buttons-space'
           },
           () => [
-            ...props.extraButtons.map(btn => h(
-              ElButton,
-              {
-                type: btn.type,
-                plain: btn.plain,
-                round: btn.round,
-                onClick: btn.onClick
-              },
-              () => [
-                btn.icon ? h(ElIcon, null, () => [h(btn.icon as Component)]) : null,
-                btn.text
-              ]
-            )),
+            
             h(
               ElButton,
               {
@@ -199,6 +188,20 @@ export default defineComponent({
                 '搜索'
               ]
             ),
+            ...props.extraButtons.map(btn => h(
+              ElButton,
+              {
+                type: btn.type,
+                plain: btn.plain,
+                round: btn.round,
+                color: btn.color,
+                onClick: btn.onClick
+              },
+              () => [
+                btn.icon ? h(ElIcon, null, () => [h(btn.icon as Component)]) : null,
+                btn.text
+              ]
+            )),
             cols.length > max.value ? h(
               'div',
               {
@@ -315,7 +318,23 @@ export default defineComponent({
     }
   }
 }
-
+// :deep(.custom-button) {
+//   // color: white !important;
+  
+//   // .el-button__text,
+//   // .el-icon {
+//   //   color: inherit !important;
+//   // }
+  
+//   // &:hover, &:focus {
+//   //   color: white !important;
+    
+//   //   .el-button__text,
+//   //   .el-icon {
+//   //     color: inherit !important;
+//   //   }
+//   // }
+// }
 .advanced {
   color: rgba(53, 108, 236, 1);
   font-size: 12px;

src/main.js

@@ -51,6 +51,8 @@ import Modal from './components/Modal/index.vue';
 // 分割线标题
 import DividerTitle from './components/DividerTitle/index.vue'
 
+import ItemTitle from './components/ItemTitle/index.vue'
+
 const app = createApp(App)
 
 // 全局方法挂载
@@ -75,6 +77,7 @@ app.component('Editor', Editor)
 app.component('PageTitle', PageTitle)
 app.component('Modal', Modal)
 app.component('DividerTitle', DividerTitle)
+app.component('ItemTitle', ItemTitle)
 
 app.use(router)
 app.use(store)