init

pc/assets/styles/element.scss

@@ -0,0 +1,126 @@
+@import 'element-plus/theme-chalk/index.css';
+
+:root {
+    // 弹窗居中
+    .el-overlay-dialog {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100%;
+        position: static;
+
+        .el-dialog {
+            --el-dialog-content-font-size: var(--el-font-size-base);
+            --el-dialog-margin-top: 50px;
+            max-width: calc(100vw - 30px);
+            flex: none;
+            display: flex;
+            flex-direction: column;
+            border-radius: 5px;
+
+            &.body-padding .el-dialog__body {
+                padding: 0;
+            }
+
+            .el-dialog__body {
+                flex: 1;
+                padding: 15px 20px;
+            }
+            .el-dialog__header {
+                font-size: var(--el-font-size-large);
+            }
+        }
+    }
+
+    .el-drawer {
+        --el-drawer-padding-primary: 16px;
+        &__header {
+            margin-bottom: 0;
+            padding: 13px 16px;
+            border-bottom: 1px solid var(--el-border-color-lighter);
+        }
+        &__title {
+            @apply text-tx-primary;
+        }
+    }
+
+    .el-table {
+        --el-table-header-text-color: var(--el-text-color-primary);
+        --el-table-header-bg-color: var(--table-header-bg-color);
+        font-size: var(--el-font-size-base);
+
+        thead {
+            th {
+                font-weight: 400;
+            }
+        }
+    }
+
+    .el-input-group__prepend {
+        background-color: var(--el-fill-color-blank);
+    }
+
+    .el-checkbox {
+        --el-checkbox-font-size: var(--el-font-size-base);
+    }
+
+    .el-message-box {
+        --el-messagebox-width: 350px;
+    }
+    .el-date-editor {
+        --el-date-editor-datetimerange-width: 380px;
+        .el-range-input {
+            font-size: var(--el-font-size-small);
+        }
+    }
+
+    .el-button--primary {
+        --el-button-hover-link-text-color: var(--el-color-primary-light-3);
+    }
+    .el-button--success {
+        --el-button-hover-link-text-color: var(--el-color-success-light-3);
+    }
+    .el-button--info {
+        --el-button-hover-link-text-color: var(--el-color-info-light-3);
+    }
+    .el-button--warning {
+        --el-button-hover-link-text-color: var(--el-color-warning-light-3);
+    }
+    .el-button--danger {
+        --el-button-hover-link-text-color: var(--el-color-danger-light-3);
+    }
+    .el-image__error {
+        font-size: 12px;
+    }
+    .el-tabs__nav-wrap::after {
+        height: 1px;
+    }
+    .el-page-header {
+        &__breadcrumb {
+            margin-bottom: 0;
+        }
+    }
+    .el-card {
+        --el-card-border-radius: 8px;
+    }
+    .el-menu {
+        border-right: none;
+    }
+}
+
+.el-button {
+    // 防止被tailwindcss默认样式覆盖
+    background-color: var(--el-button-bg-color, var(--el-color-white));
+
+    //覆盖el-button的点击样式
+    &:focus {
+        color: var(--el-button-text-color);
+        border-color: var(--el-button-border-color);
+        background-color: var(--el-button-bg-color);
+    }
+    &:hover {
+        color: var(--el-button-hover-text-color);
+        border-color: var(--el-button-hover-border-color);
+        background-color: var(--el-button-hover-bg-color);
+    }
+}

pc/assets/styles/index.scss

@@ -0,0 +1,3 @@
+@use 'element.scss';
+@use 'var.css';
+@use 'public.scss';

pc/assets/styles/public.scss

@@ -0,0 +1,56 @@
+body {
+    @apply text-base text-tx-primary bg-page;
+    min-width: 1200px;
+}
+body,
+html {
+    // width: 100vw;
+}
+.form-tips {
+    @apply text-tx-secondary text-xs leading-6 mt-1;
+}
+.el-button {
+    background-color: var(--el-button-bg-color, var(--el-color-white));
+}
+.clearfix:after {
+    content: '';
+    display: block;
+    clear: both;
+    visibility: hidden;
+}
+
+.render-html {
+    ul {
+        list-style: disc;
+    }
+    ol {
+        list-style: decimal;
+    }
+    h1 {
+        font-size: 2em;
+    }
+    h2 {
+        font-size: 1.5em;
+    }
+    h3 {
+        font-size: 1.17em;
+    }
+    h4 {
+        font-size: 1em;
+    }
+    h5 {
+        font-size: 0.83em;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+        font-weight: bold;
+    }
+}
+
+/* NProgress */
+#nprogress .bar {
+    @apply bg-primary #{!important};
+}

pc/assets/styles/var.css

@@ -0,0 +1,56 @@
+:root {
+    --el-font-family: theme(fontFamily.sans);
+    --el-color-primary: #4a5dff;
+    --el-color-primary-dark-2: rgb(59, 74, 204);
+    --el-color-primary-light-3: rgb(128, 142, 255);
+    --el-color-primary-light-5: rgb(165, 174, 255);
+    --el-color-primary-light-7: rgb(201, 206, 255);
+    --el-color-primary-light-8: rgb(219, 223, 255);
+    --el-color-primary-light-9: rgb(237, 239, 255);
+    --el-font-weight-primary: 400;
+    --el-menu-item-height: 46px;
+    --el-menu-sub-item-height: var(--el-menu-item-height);
+    --el-menu-icon-width: 18px;
+    --aside-width: 200px;
+    --header-height: 60px;
+    --color-white: #ffffff;
+    --table-header-bg-color: #f8f8f8;
+    --el-font-size-extra-large: 18px;
+    --el-menu-base-level-padding: 16px;
+    --el-menu-level-padding: 26px;
+    --el-font-size-large: 16px;
+    --el-font-size-medium: 15px;
+    --el-font-size-base: 14px;
+    --el-font-size-small: 13px;
+    --el-font-size-extra-small: 12px;
+
+    --el-bg-color: var(--color-white);
+    --el-bg-color-page: #f7f7f7;
+    --el-bg-color-overlay: #ffffff;
+    --el-text-color-primary: #333333;
+    --el-text-color-regular: #666666;
+    --el-text-color-secondary: #999999;
+    --el-text-color-placeholder: #a8abb2;
+    --el-text-color-disabled: #c0c4cc;
+    --el-border-color: #dcdfe6;
+    --el-border-color-light: #e4e7ed;
+    --el-border-color-lighter: #ebeef5;
+    --el-border-color-extra-light: #f2f2f2;
+    --el-border-color-dark: #d4d7de;
+    --el-border-color-darker: #cdd0d6;
+    --el-fill-color: #f0f2f5;
+    --el-fill-color-light: #f5f7fa;
+    --el-fill-color-lighter: #fafafa;
+    --el-fill-color-extra-light: #fafcff;
+    --el-fill-color-dark: #ebedf0;
+    --el-fill-color-darker: #e6e8eb;
+    --el-fill-color-blank: #ffffff;
+    --el-mask-color: rgba(255, 255, 255, 0.9);
+    --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
+    -el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
+        0px 8px 20px rgba(0, 0, 0, 0.08);
+    --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
+    --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
+    --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),
+        0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
+}