初始化admin pc端

admin/src/styles/common.scss

@@ -0,0 +1,298 @@
+/**
+公共样式
+ */
+
+/** S 背景颜色 **/
+
+.bg-primary {
+    background-color: $color-primary;
+}
+
+.bg-success {
+    background-color: $color-success;
+}
+
+.bg-warning {
+    background-color: $color-warning;
+}
+
+.bg-danger {
+    background-color: $color-danger;
+}
+
+.bg-white {
+    background-color: $color-white;
+}
+
+.bg-info {
+    background-color: $color-info;
+}
+
+/** E 背景颜色 **/
+
+/** E 字体颜色 **/
+
+.primary {
+    color: $color-text-primary;
+}
+
+.white {
+    color: $color-white;
+}
+
+.black {
+    color: $color-black;
+}
+
+.normal {
+    color: $color-text-primary;
+}
+
+.lighter {
+    color: $color-text-regular;
+}
+
+.muted {
+    color: $color-text-secondary;
+}
+
+.blue {
+    color: $color-primary;
+}
+
+.green {
+    color: $color-success;
+}
+
+/** E 字体颜色 **/
+
+/** S Font **/
+
+// XL
+.xl {
+    font-size: $font-size-xl;
+}
+
+// LG
+.lg {
+    font-size: $font-size-lg;
+}
+
+// MD
+.md {
+    font-size: $font-size-md;
+}
+
+// NR
+.nr {
+    font-size: $font-size-nr;
+}
+
+// SM
+.sm {
+    font-size: $font-size-sm;
+}
+
+// SM
+.xs {
+    font-size: $font-size-xs;
+}
+
+// 字体大小 Example: f-s-[19-40]
+@for $i from 19 through 40 {
+    .f-s-#{$i} {
+        font-size: $i + px;
+    }
+}
+
+// 字体字重 Example: f-w-[100-900]
+@for $i from 100 through 900 {
+    @if $i % 100==0 {
+        .f-w-#{$i} {
+            font-weight: $i;
+        }
+    }
+}
+
+/** S Font **/
+
+// 内、外边距[1-60]
+@for $i from 0 through 60 {
+    // 只要偶数和能被5整除的数
+    @if $i % 2==0 or $i % 5==0 {
+        // 如：m-30
+        .m-#{$i} {
+            margin: $i + px;
+        }
+        // 如：p-30
+        .p-#{$i} {
+            padding: $i + px;
+        }
+        @each $short, $long in l left, t top, r right, b bottom {
+            //如： m-l-6
+            // 外边距
+            .m-#{$short}-#{$i} {
+                margin-#{$long}: $i + px;
+            }
+            //如： p-l-30
+            // 内边距
+            .p-#{$short}-#{$i} {
+                padding-#{$long}: $i + px;
+            }
+        }
+    }
+}
+
+/** S 文本行数限制 **/
+
+.line-1 {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.line-2 {
+    -webkit-line-clamp: 2;
+}
+
+.line-3 {
+    -webkit-line-clamp: 3;
+}
+
+.line-4 {
+    -webkit-line-clamp: 4;
+}
+
+.line-2,
+.line-3,
+.line-4 {
+    overflow: hidden;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+/** E 文本行数限制 **/
+
+/** S 内容排序方式 **/
+.text-left {
+    text-align: left;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-right {
+    text-align: right;
+}
+/** E 内容排序方式 **/
+
+/** S Flex-弹性布局 **/
+
+.flex {
+    display: flex;
+    flex-direction: row;
+}
+
+.flex-inline {
+    display: inline-flex;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.flex-center {
+    align-items: center;
+    justify-content: center;
+}
+.flex-none {
+    flex: none;
+}
+
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
+.flex-nowrap {
+    flex-wrap: nowrap;
+}
+
+.col-baseline {
+    align-items: baseline;
+}
+
+.col-center {
+    align-items: center;
+}
+
+.col-top {
+    align-items: flex-start;
+}
+
+.col-bottom {
+    align-items: flex-end;
+}
+
+.col-stretch {
+    align-items: stretch;
+}
+
+.row-center {
+    justify-content: center;
+}
+
+.row-left {
+    justify-content: flex-start;
+}
+
+.row-right {
+    justify-content: flex-end;
+}
+
+.row-between {
+    justify-content: space-between;
+}
+
+.row-around {
+    justify-content: space-around;
+}
+
+// Example: flex-[0-24]
+@for $i from 0 through 24 {
+    .flex-#{$i} {
+        flex: $i;
+    }
+}
+
+/** E Flex-弹性布局 **/
+
+// 行内块元素
+.inline {
+    display: inline-block;
+}
+
+// 块元素
+.block {
+    display: block;
+}
+
+// 触手
+.pointer {
+    cursor: pointer;
+}
+
+// 块卡片
+.ls-card {
+    border-radius: 8px;
+    background-color: $color-white;
+}
+
+.clearfix:after {
+    content: '';
+    display: block;
+    clear: both;
+    visibility: hidden;
+}

admin/src/styles/element.scss

@@ -0,0 +1,99 @@
+// 引入所有样式
+@use 'element-plus/theme-chalk/src/index.scss';
+
+:root {
+    --el-font-weight-primary: 400;
+}
+
+.el-menu {
+    border-right: none !important;
+
+    .el-menu--horizontal {
+        border-bottom: none;
+    }
+}
+
+.ls-scrollbar.el-scrollbar .el-scrollbar__wrap {
+    overflow-x: hidden;
+}
+
+.ls-view .el-tabs .el-tabs__item {
+    height: 60px;
+    line-height: 60px;
+}
+
+.el-tabs .el-tabs__nav-wrap::after {
+    height: 1px;
+    background-color: #e5e5e5;
+}
+
+.el-input-group__prepend {
+    background-color: #fff;
+}
+
+.el-loading-spinner {
+    font-size: 26px;
+}
+
+.el-textarea .el-textarea__inner {
+    resize: none;
+}
+
+.el-image .el-image__error {
+    font-size: 12px;
+}
+
+// 弹窗居中
+.el-overlay-dialog {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 1000px;
+    min-height: 100%;
+    position: static;
+    overflow: hidden;
+    .el-dialog {
+        --el-dialog-content-font-size: var(--el-font-size-base);
+        flex: none;
+        display: flex;
+        flex-direction: column;
+        margin: 20px !important;
+        border-radius: 5px;
+
+        &.body-padding .el-dialog__body {
+            padding: 0;
+        }
+
+        .el-dialog__body {
+            flex: 1;
+            padding: 15px 20px;
+        }
+    }
+}
+
+.el-card {
+    border: none;
+}
+
+.el-form.ls-form {
+    .el-form-item__content {
+        font-size: var(--el-font-size-base);
+
+        & > .el-cascader,
+        & > .el-select,
+        & > .el-input {
+            width: 280px;
+        }
+    }
+}
+
+.el-table {
+    font-size: var(--el-font-size-base);
+    thead th {
+        font-weight: 400;
+    }
+}
+
+.el-icon {
+    font-size: var(--font-size);
+}

admin/src/styles/export.module.scss

@@ -0,0 +1,13 @@
+:export {
+    /* 主题颜色 */
+    color_primary: $color-primary;
+    color_success: $color-success;
+    color_warning: $color-warning;
+    color_danger: $color-danger;
+    color_ingo: $color-info;
+
+    /* 字体颜色 */
+    font_color_primary: $color-text-primary;
+    font_color_regular: $color-text-regular;
+    font_color_secondary: $color-text-secondary;
+}

admin/src/styles/export.module.scss.d.ts

@@ -0,0 +1,15 @@
+export interface Variables {
+    /* 主题颜色 */
+    color_primary: string
+    color_success: string
+    color_warning: string
+    color_danger: string
+    color_ingo: string
+
+    /* 字体颜色 */
+    font_color_primary: string
+    font_color_regular: string
+    font_color_secondary: string
+}
+export const variables: Variables
+export default variables

admin/src/styles/index.scss

@@ -0,0 +1,10 @@
+/**
+全局样式
+ */
+
+// 初始化默认样式
+@import 'reset';
+// 公共样式
+@import 'common';
+// element样式
+@import 'element';

admin/src/styles/reset.scss

@@ -0,0 +1,83 @@
+/* http://meyerweb.com/eric/tools/css/reset/ */
+/* v1.0 | 20080212 */
+
+html,
+body,
+div,
+span,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+a,
+b,
+u,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+input,
+form,
+label,
+table,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td {
+    font-family: PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    background: transparent;
+    text-decoration: none;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+    outline: 0;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+/* 初始化页面 */
+body {
+    font-size: $font-size-base;
+    background-color: $background-color-base;
+    color: $color-text-primary;
+    overflow-y: hidden;
+    overflow-x: auto;
+    line-height: 1.3;
+}
+
+input::placeholder {
+    color: $color-text-placeholder;
+}
+
+/* NProgress */
+#nprogress .bar {
+    background: $color-primary !important; //自定义颜色
+}

admin/src/styles/variables.scss

@@ -0,0 +1,142 @@
+/**
+变量
+ */
+
+/* Color
+-------------------------- */
+$color-primary: #4a5dff !default;
+$color-success: #67c23a !default;
+$color-warning: #fb9400 !default;
+$color-danger: #f56c6c !default;
+$color-error: #db2828 !default;
+$color-info: #909399 !default;
+$color-white: #ffffff !default;
+$color-black: #333333 !default;
+
+$color-primary-light-1: mix($color-white, $color-primary, 10%) !default;
+$color-primary-light-2: mix($color-white, $color-primary, 20%) !default;
+$color-primary-light-3: mix($color-white, $color-primary, 30%) !default;
+$color-primary-light-4: mix($color-white, $color-primary, 40%) !default;
+$color-primary-light-5: mix($color-white, $color-primary, 50%) !default;
+$color-primary-light-6: mix($color-white, $color-primary, 60%) !default;
+$color-primary-light-7: mix($color-white, $color-primary, 70%) !default;
+$color-primary-light-8: mix($color-white, $color-primary, 80%) !default;
+$color-primary-light-9: mix($color-white, $color-primary, 90%) !default;
+
+/* Font
+-------------------------- */
+
+$color-text-primary: #333333 !default;
+$color-text-regular: #666666 !default;
+$color-text-secondary: #999999 !default;
+$color-text-placeholder: #999999 !default;
+$font-size-xl: 17px !default;
+$font-size-lg: 16px !default;
+$font-size-md: 15px !default;
+$font-size-nr: 14px !default;
+$font-size-sm: 13px !default;
+$font-size-xs: 12px !default;
+$font-size-base: $font-size-sm;
+
+/* Background
+-------------------------- */
+
+$background-color-base: #f6f6f6 !default;
+
+/* Border
+-------------------------- */
+
+$border-color-base: #e5e5e5 !default;
+$border-color-light: #f2f2f2 !default;
+$border-width-base: 1px !default;
+$border-style-base: solid !default;
+$border-color-hover: $color-primary !default;
+$border-base: $border-width-base $border-style-base $border-color-base !default;
+
+/* Layout
+-------------------------- */
+$layout-min-width: 1200px !default;
+$layout-aside-width: 200px !default;
+$layout-header-height: 70px !default;
+
+$colors: (
+    'primary': (
+        'base': $color-primary
+    ),
+    'success': (
+        'base': $color-success
+    ),
+    'warning': (
+        'base': $color-warning
+    ),
+    'danger': (
+        'base': $color-danger
+    ),
+    'error': (
+        'base': $color-error
+    ),
+    'info': (
+        'base': $color-info
+    )
+);
+
+$text-color: (
+    'primary': $color-text-primary,
+    'regular': $color-text-regular,
+    'secondary': $color-text-secondary,
+    'placeholder': $color-text-placeholder
+);
+
+$border-color: (
+    'base': $border-color-base,
+    'light': $border-color-light,
+    'lighter': $border-color-light,
+    'extra-light': $border-color-light
+);
+
+$font-size: (
+    'extra-large': $font-size-xl,
+    'large': $font-size-lg,
+    'medium': $font-size-md,
+    'base': $font-size-base,
+    'small': $font-size-sm,
+    'extra-small': $font-size-xs
+);
+
+$button-font-size: (
+    'default': $font-size-base,
+    'medium': $font-size-base,
+    'small': $font-size-base,
+    'mini': $font-size-sm
+);
+
+$button-padding-vertical: (
+    'default': 12px,
+    'medium': 10px,
+    'small': 8px,
+    'mini': 6px
+);
+
+$button-padding-horizontal: (
+    'default': 25px,
+    'medium': 25px,
+    'small': 20px,
+    'mini': 15px
+);
+
+$table: (
+    'text-color': $color-text-primary,
+    'header-text-color': $color-text-primary,
+    'header-bg-color': rgba($color-primary, 0.05)
+);
+
+// 替换elementui的变量
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+    $colors: $colors,
+    $text-color: $text-color,
+    $border-color: $border-color,
+    $font-size: $font-size,
+    $button-font-size: $button-font-size,
+    $button-padding-vertical: $button-padding-vertical,
+    $table: $table
+);