feat: 主页导览ui

src/assets/style/element-var.scss

@@ -1,1655 +0,0 @@
-/* Element Chalk Variables */
-@use 'sass:math';
-@use 'sass:map';
-@use 'sass:color';
-
-@use '../mixins/function.scss' as *;
-
-// Special comment for theme configurator
-// type|skipAutoTranslation|Category|Order
-// skipAutoTranslation 1
-
-// types
-$types: primary, success, warning, danger, error, info;
-
-// Color
-$colors: () !default;
-$colors: map.deep-merge(
-  (
-    'white': #ffffff,
-    'black': #000000,
-    'primary': (
-      'base': #409eff,
-    ),
-    'success': (
-      'base': #67c23a,
-    ),
-    'warning': (
-      'base': #e6a23c,
-    ),
-    'danger': (
-      'base': #f56c6c,
-    ),
-    'error': (
-      'base': #f56c6c,
-    ),
-    'info': (
-      'base': #909399,
-    ),
-  ),
-  $colors
-);
-
-$color-white: map.get($colors, 'white') !default;
-$color-black: map.get($colors, 'black') !default;
-$color-primary: map.get($colors, 'primary', 'base') !default;
-$color-success: map.get($colors, 'success', 'base') !default;
-$color-warning: map.get($colors, 'warning', 'base') !default;
-$color-danger: map.get($colors, 'danger', 'base') !default;
-$color-error: map.get($colors, 'error', 'base') !default;
-$color-info: map.get($colors, 'info', 'base') !default;
-
-// https://sass-lang.com/documentation/values/maps#immutability
-// mix colors with white/black to generate light/dark level
-@mixin set-color-mix-level(
-  $type,
-  $number,
-  $mode: 'light',
-  $mix-color: $color-white
-) {
-  $colors: map.deep-merge(
-    (
-      $type: (
-        '#{$mode}-#{$number}':
-          color.mix(
-            $mix-color,
-            map.get($colors, $type, 'base'),
-            math.percentage(math.div($number, 10))
-          ),
-      ),
-    ),
-    $colors
-  ) !global;
-}
-
-// $colors.primary.light-i
-// --el-color-primary-light-i
-// 10% 53a8ff
-// 20% 66b1ff
-// 30% 79bbff
-// 40% 8cc5ff
-// 50% a0cfff
-// 60% b3d8ff
-// 70% c6e2ff
-// 80% d9ecff
-// 90% ecf5ff
-@each $type in $types {
-  @for $i from 1 through 9 {
-    @include set-color-mix-level($type, $i, 'light', $color-white);
-  }
-}
-
-// --el-color-primary-dark-2
-@each $type in $types {
-  @include set-color-mix-level($type, 2, 'dark', $color-black);
-}
-
-$text-color: () !default;
-$text-color: map.merge(
-  (
-    'primary': #303133,
-    'regular': #606266,
-    'secondary': #909399,
-    'placeholder': #a8abb2,
-    'disabled': #c0c4cc,
-  ),
-  $text-color
-);
-
-$border-color: () !default;
-$border-color: map.merge(
-  (
-    '': #dcdfe6,
-    'light': #e4e7ed,
-    'lighter': #ebeef5,
-    'extra-light': #f2f6fc,
-    'dark': #d4d7de,
-    'darker': #cdd0d6,
-  ),
-  $border-color
-);
-
-$fill-color: () !default;
-$fill-color: map.merge(
-  (
-    '': #f0f2f5,
-    'light': #f5f7fa,
-    'lighter': #fafafa,
-    'extra-light': #fafcff,
-    'dark': #ebedf0,
-    'darker': #e6e8eb,
-    'blank': #ffffff,
-  ),
-  $fill-color
-);
-
-// Background
-$bg-color: () !default;
-$bg-color: map.merge(
-  (
-    '': #ffffff,
-    'page': #f2f3f5,
-    'overlay': #ffffff,
-  ),
-  $bg-color
-);
-
-// Border
-$border-width: 1px !default;
-$border-style: solid !default;
-$border-color-hover: getCssVar('text-color', 'disabled') !default;
-
-$border-radius: () !default;
-$border-radius: map.merge(
-  (
-    'base': 4px,
-    'small': 2px,
-    'round': 20px,
-    'circle': 100%,
-  ),
-  $border-radius
-);
-
-// Box-shadow
-$box-shadow: () !default;
-$box-shadow: map.merge(
-  (
-    '': (
-      0px 12px 32px 4px rgba(0, 0, 0, 0.04),
-      0px 8px 20px rgba(0, 0, 0, 0.08),
-    ),
-    'light': (
-      0px 0px 12px rgba(0, 0, 0, 0.12),
-    ),
-    'lighter': (
-      0px 0px 6px rgba(0, 0, 0, 0.12),
-    ),
-    '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),
-    ),
-  ),
-  $box-shadow
-);
-
-// Typography
-$font-family: () !default;
-$font-family: map.merge(
-  (
-    // default family
-    '':
-      "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif"
-  ),
-  $font-family
-);
-
-$font-size: () !default;
-$font-size: map.merge(
-  (
-    'extra-large': 20px,
-    'large': 18px,
-    'medium': 16px,
-    'base': 14px,
-    'small': 13px,
-    'extra-small': 12px,
-  ),
-  $font-size
-);
-
-// zIndex
-$z-index: () !default;
-$z-index: map.merge(
-  (
-    'normal': 1,
-    'top': 1000,
-    'popper': 2000,
-  ),
-  $z-index
-);
-
-// Disable default
-$disabled: () !default;
-$disabled: map.merge(
-  (
-    'bg-color': getCssVar('fill-color', 'light'),
-    'text-color': getCssVar('text-color', 'placeholder'),
-    'border-color': getCssVar('border-color', 'light'),
-  ),
-  $disabled
-);
-
-$common-component-size: () !default;
-$common-component-size: map.merge(
-  (
-    'large': 40px,
-    'default': 32px,
-    'small': 24px,
-  ),
-  $common-component-size
-);
-
-// overlay
-$overlay-color: () !default;
-$overlay-color: map.merge(
-  (
-    '': rgba(0, 0, 0, 0.8),
-    'light': rgba(0, 0, 0, 0.7),
-    'lighter': rgba(0, 0, 0, 0.5),
-  ),
-  $overlay-color
-);
-
-// mask
-$mask-color: () !default;
-$mask-color: map.merge(
-  (
-    '': rgba(255, 255, 255, 0.9),
-    'extra-light': rgba(255, 255, 255, 0.3),
-  ),
-  $mask-color
-);
-
-// Components
-// ---
-// Checkbox
-// css3 var in packages/theme-chalk/src/checkbox.scss
-$checkbox: () !default;
-$checkbox: map.merge(
-  (
-    'font-size': 14px,
-    'font-weight': getCssVar('font-weight-primary'),
-    'text-color': getCssVar('text-color-regular'),
-    'input-height': 14px,
-    'input-width': 14px,
-    'border-radius': getCssVar('border-radius-small'),
-    'bg-color': getCssVar('fill-color', 'blank'),
-    'input-border': getCssVar('border'),
-    'disabled-border-color': getCssVar('border-color'),
-    'disabled-input-fill': getCssVar('fill-color', 'light'),
-    'disabled-icon-color': getCssVar('text-color-placeholder'),
-    'disabled-checked-input-fill': getCssVar('border-color-extra-light'),
-    'disabled-checked-input-border-color': getCssVar('border-color'),
-    'disabled-checked-icon-color': getCssVar('text-color-placeholder'),
-    'checked-text-color': getCssVar('color-primary'),
-    'checked-input-border-color': getCssVar('color-primary'),
-    'checked-bg-color': getCssVar('color-primary'),
-    'checked-icon-color': getCssVar('color', 'white'),
-    'input-border-color-hover': getCssVar('color-primary'),
-  ),
-  $checkbox
-);
-
-$checkbox-button: () !default;
-$checkbox-button: map.merge(
-  (
-    'checked-bg-color': getCssVar('color-primary'),
-    'checked-text-color': getCssVar('color-white'),
-    'checked-border-color': getCssVar('color-primary'),
-  ),
-  $checkbox-button
-);
-
-$checkbox-bordered-padding-left: () !default;
-$checkbox-bordered-padding-left: map.merge(
-  (
-    'large': 12px,
-    'default': 10px,
-    'small': 8px,
-  ),
-  $checkbox-bordered-padding-left
-);
-
-$checkbox-bordered-padding-right: () !default;
-$checkbox-bordered-padding-right: map.merge(
-  (
-    'large': 20px,
-    'default': 16px,
-    'small': 12px,
-  ),
-  $checkbox-bordered-padding-right
-);
-
-// Radio
-/// fontSize||Font|1
-$radio: () !default;
-$radio: map.merge(
-  (
-    'font-size': getCssVar('font-size-base'),
-    'text-color': getCssVar('text-color-regular'),
-    'font-weight': getCssVar('font-weight-primary'),
-    'input-height': 14px,
-    'input-width': 14px,
-    'input-border-radius': getCssVar('border-radius-circle'),
-    'input-bg-color': getCssVar('fill-color', 'blank'),
-    'input-border': getCssVar('border'),
-    'input-border-color': getCssVar('border-color'),
-    'input-border-color-hover': getCssVar('color-primary'),
-  ),
-  $radio
-);
-
-$radio-height: () !default;
-$radio-height: map.merge($common-component-size, $radio-height);
-
-$radio-button: () !default;
-$radio-button: map.merge(
-  (
-    'checked-bg-color': getCssVar('color-primary'),
-    'checked-text-color': getCssVar('color-white'),
-    'checked-border-color': getCssVar('color-primary'),
-    'disabled-checked-fill': getCssVar('border-color-extra-light'),
-  ),
-  $radio-button
-);
-
-$radio-disabled: () !default;
-$radio-disabled: map.merge(
-  (
-    'input-border-color': getCssVar('disabled-border-color'),
-    'input-fill': getCssVar('disabled-bg-color'),
-    'icon-color': getCssVar('disabled-bg-color'),
-    'checked-input-border-color': getCssVar('disabled-border-color'),
-    'checked-input-fill': getCssVar('disabled-bg-color'),
-    'checked-icon-color': getCssVar('text-color-placeholder'),
-  ),
-  $radio-disabled
-);
-
-$radio-checked: () !default;
-$radio-checked: map.merge(
-  (
-    'text-color': getCssVar('color-primary'),
-    'input-border-color': getCssVar('color-primary'),
-    'icon-color': getCssVar('color-primary'),
-  ),
-  $radio-checked
-);
-
-$radio-bordered-input-height: () !default;
-$radio-bordered-input-height: map.merge(
-  (
-    'large': 14px,
-    'default': 12px,
-    'small': 12px,
-  ),
-  $radio-bordered-input-height
-);
-
-$radio-bordered-input-width: () !default;
-$radio-bordered-input-width: map.merge(
-  (
-    'large': 14px,
-    'default': 12px,
-    'small': 12px,
-  ),
-  $radio-bordered-input-width
-);
-
-// Select
-$select: () !default;
-$select: map.merge(
-  (
-    'border-color-hover': getCssVar('border-color-hover'),
-    'disabled-color': getCssVar('disabled-text-color'),
-    'disabled-border': getCssVar('disabled-border-color'),
-    'font-size': getCssVar('font-size-base'),
-    'close-hover-color': getCssVar('text-color-secondary'),
-    'input-color': getCssVar('text-color-placeholder'),
-    'multiple-input-color': getCssVar('text-color-regular'),
-    'input-focus-border-color': getCssVar('color-primary'),
-    'input-font-size': 14px,
-    'width': 100%,
-  ),
-  $select
-);
-
-$select-option: () !default;
-$select-option: map.merge(
-  (
-    'text-color': getCssVar('text-color-regular'),
-    'disabled-color': getCssVar('text-color-placeholder'),
-    'height': 34px,
-    'hover-background': getCssVar('fill-color', 'light'),
-    'selected-text-color': getCssVar('color-primary'),
-  ),
-  $select-option
-);
-
-$select-group: () !default;
-$select-group: map.merge(
-  (
-    'text-color': getCssVar('color-info'),
-    'height': 34px,
-    'font-size': 12px,
-  ),
-  $select-group
-);
-
-$select-dropdown: () !default;
-$select-dropdown: map.merge(
-  (
-    'bg-color': getCssVar('bg-color', 'overlay'),
-    'shadow': getCssVar('box-shadow-light'),
-    'empty-color': getCssVar('text-color-secondary'),
-    'max-height': 274px,
-    'padding': 6px 0,
-    'empty-padding': 10px 0,
-    'header-padding': 10px,
-    'footer-padding': 10px,
-    'border': 1px solid getCssVar('border-color-light'),
-  ),
-  $select-dropdown
-);
-
-$select-wrapper-padding: () !default;
-$select-wrapper-padding: map.merge(
-  (
-    'large': 8px 16px,
-    'default': 4px 12px,
-    'small': 2px 8px,
-  ),
-  $select-wrapper-padding
-);
-
-$select-near-margin-left: () !default;
-$select-near-margin-left: map.merge(
-  (
-    'large': -8px,
-    'default': -8px,
-    'small': -6px,
-  ),
-  $select-near-margin-left
-);
-
-$select-item-gap: () !default;
-$select-item-gap: map.merge(
-  (
-    'large': 6px,
-    'default': 6px,
-    'small': 4px,
-  ),
-  $select-item-gap
-);
-
-// the same height of el-tag
-$select-item-height: () !default;
-$select-item-height: map.merge(
-  (
-    'large': 24px,
-    'default': 24px,
-    'small': 20px,
-  ),
-  $select-item-height
-);
-
-// Alert
-// css3 var in packages/theme-chalk/src/alert.scss
-$alert: () !default;
-$alert: map.merge(
-  (
-    'padding': 8px 16px,
-    'border-radius-base': getCssVar('border-radius-base'),
-    'title-font-size': 14px,
-    'title-with-description-font-size': 16px,
-    'description-font-size': 14px,
-    'close-font-size': 16px,
-    'close-customed-font-size': 14px,
-    'icon-size': 16px,
-    'icon-large-size': 28px,
-  ),
-  $alert
-);
-
-// MessageBox
-// css3 var in packages/theme-chalk/src/message-box.scss
-$messagebox: () !default;
-$messagebox: map.merge(
-  (
-    'title-color': getCssVar('text-color-primary'),
-    'width': 420px,
-    'border-radius': 4px,
-    'box-shadow': getCssVar('box-shadow'),
-    'font-size': getCssVar('font-size-large'),
-    'content-font-size': getCssVar('font-size-base'),
-    'content-color': getCssVar('text-color-regular'),
-    'error-font-size': 12px,
-    'padding-primary': 12px,
-    'font-line-height': getCssVar('font-line-height-primary'),
-  ),
-  $messagebox
-);
-
-// Message
-// css3 var in packages/theme-chalk/src/message.scss
-$message: () !default;
-$message: map.merge(
-  (
-    'bg-color': getCssVar('color', 'info', 'light-9'),
-    'border-color': getCssVar('border-color-lighter'),
-    'padding': 11px 15px,
-    'close-size': 16px,
-    'close-icon-color': getCssVar('text-color-placeholder'),
-    'close-hover-color': getCssVar('text-color-secondary'),
-  ),
-  $message
-);
-
-// Notification
-// css3 var in packages/theme-chalk/src/notification.scss
-$notification: () !default;
-$notification: map.merge(
-  (
-    'width': 330px,
-    'padding': 14px 26px 14px 13px,
-    'radius': 8px,
-    'shadow': getCssVar('box-shadow-light'),
-    'border-color': getCssVar('border-color-lighter'),
-    'icon-size': 24px,
-    'close-font-size':
-      var(
-        #{getCssVarName('message-close-size')},
-        map.get($message, 'close-size')
-      ),
-    'group-margin-left': 13px,
-    'group-margin-right': 8px,
-    'content-font-size': getCssVar('font-size-base'),
-    'content-color': getCssVar('text-color-regular'),
-    'title-font-size': 16px,
-    'title-color': getCssVar('text-color-primary'),
-    'close-color': getCssVar('text-color-secondary'),
-    'close-hover-color': getCssVar('text-color-regular'),
-  ),
-  $notification
-);
-
-// Input
-// css3 var in packages/theme-chalk/src/input.scss
-$input: () !default;
-$input: map.merge(
-  (
-    'text-color': getCssVar('text-color-regular'),
-    'border': getCssVar('border'),
-    'hover-border': getCssVar('border-color-hover'),
-    'focus-border': getCssVar('color-primary'),
-    'transparent-border': 0 0 0 1px transparent inset,
-    'border-color': getCssVar('border-color'),
-    'border-radius': getCssVar('border-radius-base'),
-    'bg-color': getCssVar('fill-color', 'blank'),
-    'icon-color': getCssVar('text-color-placeholder'),
-    'placeholder-color': getCssVar('text-color-placeholder'),
-    'hover-border-color': getCssVar('border-color-hover'),
-    'clear-hover-color': getCssVar('text-color-secondary'),
-    'focus-border-color': getCssVar('color-primary'),
-    'width': 100%,
-  ),
-  $input
-);
-
-$input-disabled: () !default;
-$input-disabled: map.merge(
-  (
-    'fill': getCssVar('disabled-bg-color'),
-    'border': getCssVar('disabled-border-color'),
-    'text-color': getCssVar('disabled-text-color'),
-    'placeholder-color': getCssVar('text-color-placeholder'),
-  ),
-  $input-disabled
-);
-
-$input-font-size: () !default;
-$input-font-size: map.merge(
-  (
-    'large': 14px,
-    'default': 14px,
-    'small': 12px,
-  ),
-  $input-font-size
-);
-
-$input-height: () !default;
-$input-height: map.merge($common-component-size, $input-height);
-
-$input-line-height: () !default;
-$input-line-height: map.merge($common-component-size, $input-line-height);
-
-$input-number-width: () !default;
-$input-number-width: map.merge(
-  (
-    'large': 180px,
-    'default': 150px,
-    'small': 120px,
-  ),
-  $input-number-width
-);
-
-$input-padding-horizontal: () !default;
-$input-padding-horizontal: map.merge(
-  (
-    'large': 16px,
-    'default': 12px,
-    'small': 8px,
-  ),
-  $input-padding-horizontal
-);
-
-// Cascader
-// css3 var in packages/theme-chalk/src/cascader.scss
-$cascader: () !default;
-$cascader: map.merge(
-  (
-    'menu-text-color': getCssVar('text-color-regular'),
-    'menu-selected-text-color': getCssVar('color-primary'),
-    'menu-fill': getCssVar('bg-color', 'overlay'),
-    'menu-font-size': getCssVar('font-size-base'),
-    'menu-radius': getCssVar('border-radius-base'),
-    'menu-border': solid 1px getCssVar('border-color-light'),
-    'menu-shadow': getCssVar('box-shadow-light'),
-    'node-background-hover': getCssVar('fill-color', 'light'),
-    'node-color-disabled': getCssVar('text-color-placeholder'),
-    'color-empty': getCssVar('text-color-placeholder'),
-    'tag-background': getCssVar('fill-color'),
-  ),
-  $cascader
-);
-
-$cascader-item-gap: () !default;
-$cascader-item-gap: map.merge(
-  (
-    'large': 6px,
-    'default': 6px,
-    'small': 4px,
-  ),
-  $cascader-item-gap
-);
-
-$cascader-wrapper-padding: () !default;
-$cascader-wrapper-padding: map.merge(
-  (
-    'large': 8px,
-    'default': 4px,
-    'small': 2px,
-  ),
-  $cascader-wrapper-padding
-);
-
-$cascader-item-height: () !default;
-$cascader-item-height: map.merge(
-  (
-    'large': 24px,
-    'default': 24px,
-    'small': 20px,
-  ),
-  $cascader-item-height
-);
-
-$cascader-search-input-margin-left: () !default;
-$cascader-search-input-margin-left: map.merge(
-  (
-    'large': 7px,
-    'default': 7px,
-    'small': 5px,
-  ),
-  $cascader-search-input-margin-left
-);
-
-//statistic
-// css3 var in packages/theme-chalk/src/statistic.scss
-$statistic: () !default;
-$statistic: map.merge(
-  (
-    'title-font-weight': 400,
-    'title-font-size': getCssVar('font-size', 'extra-small'),
-    'title-color': getCssVar('text-color', 'regular'),
-    'content-font-weight': 400,
-    'content-font-size': getCssVar('font-size', 'extra-large'),
-    'content-color': getCssVar('text-color', 'primary'),
-  ),
-  $statistic
-);
-// Button
-// css3 var in packages/theme-chalk/src/button.scss
-$button: () !default;
-$button: map.merge(
-  (
-    'font-weight': getCssVar('font-weight-primary'),
-    'border-color': getCssVar('border-color'),
-    'bg-color': getCssVar('fill-color', 'blank'),
-    'text-color': getCssVar('text-color', 'regular'),
-    'disabled-text-color': getCssVar('disabled-text-color'),
-    'disabled-bg-color': getCssVar('fill-color', 'blank'),
-    'disabled-border-color': getCssVar('border-color-light'),
-    'divide-border-color': rgba($color-white, 0.5),
-    'hover-text-color': getCssVar('color-primary'),
-    'hover-bg-color': getCssVar('color-primary', 'light-9'),
-    'hover-border-color': getCssVar('color-primary-light-7'),
-    'active-text-color': getCssVar('button-hover-text-color'),
-    'active-border-color': getCssVar('color-primary'),
-    'active-bg-color': getCssVar('button', 'hover-bg-color'),
-    'outline-color': getCssVar('color-primary', 'light-5'),
-    'hover-link-text-color': getCssVar('text-color', 'secondary'),
-    'active-color': getCssVar('text-color', 'primary'),
-  ),
-  $button
-);
-
-$button-border-width: $border-width !default;
-
-// need mix, so do not use css var
-$button-hover-tint-percent: 20%;
-$button-active-shade-percent: 10%;
-
-$button-border-color: () !default;
-$button-bg-color: () !default;
-$button-text-color: () !default;
-
-@each $type in $types {
-  $button-border-color: map.merge(
-    (
-      $type: map.get($colors, $type, 'base'),
-    ),
-    $button-border-color
-  ) !global;
-
-  $button-bg-color: map.merge(
-    (
-      $type: map.get($colors, $type, 'base'),
-    ),
-    $button-bg-color
-  ) !global;
-}
-
-$button-font-size: () !default;
-$button-font-size: map.merge(
-  (
-    'large': getCssVar('font-size', 'base'),
-    'default': getCssVar('font-size', 'base'),
-    'small': 12px,
-  ),
-  $button-font-size
-);
-
-$button-border-radius: () !default;
-$button-border-radius: map.merge(
-  (
-    'large': getCssVar('border-radius', 'base'),
-    'default': getCssVar('border-radius', 'base'),
-    'small': calc(#{getCssVar('border-radius', 'base')} - 1px),
-  ),
-  $button-border-radius
-);
-
-$button-padding-vertical: () !default;
-$button-padding-vertical: map.merge(
-  (
-    'large': 13px,
-    'default': 9px,
-    'small': 6px,
-  ),
-  $button-padding-vertical
-);
-
-$button-padding-horizontal: () !default;
-$button-padding-horizontal: map.merge(
-  (
-    'large': 20px,
-    'default': 16px,
-    'small': 12px,
-  ),
-  $button-padding-horizontal
-);
-
-// Switch
-// css3 var in packages/theme-chalk/src/switch.scss
-$switch: () !default;
-$switch: map.merge(
-  (
-    'on-color': getCssVar('color-primary'),
-    'off-color': getCssVar('border-color'),
-  ),
-  $switch
-);
-
-// Dialog
-// css3 var in packages/theme-chalk/src/dialog.scss
-$dialog: () !default;
-$dialog: map.merge(
-  (
-    'width': 50%,
-    'margin-top': 15vh,
-    'bg-color': getCssVar('bg-color'),
-    'box-shadow': getCssVar('box-shadow'),
-    'title-font-size': getCssVar('font-size-large'),
-    'content-font-size': 14px,
-    'font-line-height': getCssVar('font-line-height-primary'),
-    'padding-primary': 16px,
-    'border-radius': getCssVar('border-radius-base'),
-  ),
-  $dialog
-);
-
-// Tour
-// css3 var in packages/theme-chalk/src/tour.scss
-$tour: () !default;
-$tour: map.merge(
-  (
-    'width': 520px,
-    'padding-primary': 12px,
-    'font-line-height': getCssVar('font-line-height-primary'),
-    'title-font-size': 16px,
-    'title-text-color': getCssVar('text-color-primary'),
-    'title-font-weight': 400,
-    'close-color': getCssVar('color-info'),
-    'font-size': 14px,
-    'color': getCssVar('text-color-primary'),
-    'bg-color': getCssVar('bg-color'),
-    'border-radius': 4px,
-  ),
-  $tour
-);
-
-// Anchor
-// css3 var in packages/theme-chalk/src/anchor.scss
-$anchor: () !default;
-$anchor: map.merge(
-  (
-    'bg-color': getCssVar('bg-color'),
-    'padding-indent': 14px,
-    'line-height': 22px,
-    'font-size': 12px,
-    'color': getCssVar('text-color-secondary'),
-    'active-color': getCssVar('color-primary'),
-    'marker-bg-color': getCssVar('color-primary'),
-  ),
-  $anchor
-);
-
-// Segmented
-// css3 var in packages/theme-chalk/src/segmented.scss
-$segmented: () !default;
-$segmented: map.merge(
-  (
-    'color': getCssVar('text-color', 'regular'),
-    'bg-color': getCssVar('fill-color', 'light'),
-    'padding': 2px,
-    'item-selected-color': getCssVar('color-white'),
-    'item-selected-bg-color': getCssVar('color-primary'),
-    'item-selected-disabled-bg-color': getCssVar('color-primary', 'light-5'),
-    'item-hover-color': getCssVar('text-color', 'primary'),
-    'item-hover-bg-color': getCssVar('fill-color', 'dark'),
-    'item-active-bg-color': getCssVar('fill-color', 'darker'),
-    'item-disabled-color': getCssVar('text-color', 'placeholder'),
-  ),
-  $segmented
-);
-
-// Mention
-// css3 var in packages/theme-chalk/src/mention.scss
-$mention: () !default;
-$mention: map.merge(
-  (
-    'font-size': getCssVar('font-size-base'),
-    'bg-color': getCssVar('bg-color', 'overlay'),
-    'shadow': getCssVar('box-shadow-light'),
-    'border': 1px solid getCssVar('border-color-light'),
-    'option-color': getCssVar('text-color-regular'),
-    'option-height': 34px,
-    'option-min-width': 100px,
-    'option-hover-background': getCssVar('fill-color', 'light'),
-    'option-selected-color': getCssVar('color-primary'),
-    'option-disabled-color': getCssVar('text-color-placeholder'),
-    'option-loading-color': getCssVar('text-color-secondary'),
-    'option-loading-padding': 10px 0,
-    'max-height': 174px,
-    'padding': 6px 0,
-    'header-padding': 10px,
-    'footer-padding': 10px,
-  ),
-  $mention
-);
-
-// InputTag
-// css3 var in packages/theme-chalk/src/input-tag.scss
-$input-tag: () !default;
-$input-tag: map.merge(
-  (
-    'border-color-hover': getCssVar('border-color-hover'),
-    'placeholder-color': getCssVar('text-color-placeholder'),
-    'disabled-color': getCssVar('disabled-text-color'),
-    'disabled-border': getCssVar('disabled-border-color'),
-    'font-size': getCssVar('font-size-base'),
-    'close-hover-color': getCssVar('text-color-secondary'),
-    'text-color': getCssVar('text-color-regular'),
-    'input-focus-border-color': getCssVar('color-primary'),
-    'width': 100%,
-  ),
-  $input-tag
-);
-
-$input-tag-padding: () !default;
-$input-tag-padding: map.merge(
-  (
-    'large': 8px,
-    'default': 4px,
-    'small': 2px,
-  ),
-  $input-tag-padding
-);
-
-$input-tag-inner-padding: () !default;
-$input-tag-inner-padding: map.merge(
-  (
-    'large': 8px,
-    'default': 8px,
-    'small': 6px,
-  ),
-  $input-tag-inner-padding
-);
-
-$input-tag-gap: () !default;
-$input-tag-gap: map.merge(
-  (
-    'large': 6px,
-    'default': 6px,
-    'small': 4px,
-  ),
-  $input-tag-gap
-);
-
-// Table
-// css3 var in packages/theme-chalk/src/table.scss
-$table: () !default;
-$table: map.merge(
-  (
-    'border-color': getCssVar('border-color-lighter'),
-    'border': 1px solid getCssVar('table-border-color'),
-    'text-color': getCssVar('text-color-regular'),
-    'header-text-color': getCssVar('text-color-secondary'),
-    'row-hover-bg-color': getCssVar('fill-color', 'light'),
-    'current-row-bg-color': getCssVar('color-primary-light-9'),
-    'header-bg-color': getCssVar('bg-color'),
-    'fixed-box-shadow': getCssVar('box-shadow', 'light'),
-    'bg-color': getCssVar('fill-color', 'blank'),
-    'tr-bg-color': getCssVar('bg-color'),
-    'expanded-cell-bg-color': getCssVar('fill-color', 'blank'),
-    'fixed-left-column': inset 10px 0 10px -10px rgb(0 0 0 / 15%),
-    'fixed-right-column': inset -10px 0 10px -10px rgb(0 0 0 / 15%),
-    'index': getCssVar('index-normal'),
-  ),
-  $table
-);
-
-$table-font-size: () !default;
-$table-font-size: map.merge(
-  (
-    'large': getCssVar('font-size', 'base'),
-    'default': getCssVar('font-size', 'base'),
-    'small': getCssVar('font-size', 'extra-small'),
-  ),
-  $table-font-size
-);
-
-$table-padding: () !default;
-$table-padding: map.merge(
-  (
-    'large': 12px 0,
-    'default': 8px 0,
-    'small': 4px 0,
-  ),
-  $table-padding
-);
-
-$table-cell-padding: () !default;
-$table-cell-padding: map.merge(
-  (
-    'large': 0 16px,
-    'default': 0 12px,
-    'small': 0 8px,
-  ),
-  $table-cell-padding
-);
-
-// Pagination
-// css3 var in packages/theme-chalk/src/pagination.scss
-$pagination: () !default;
-$pagination: map.merge(
-  (
-    'font-size': 14px,
-    'bg-color': getCssVar('fill-color', 'blank'),
-    'text-color': getCssVar('text-color-primary'),
-    'border-radius': 2px,
-    'button-color': getCssVar('text-color-primary'),
-    'button-width': 32px,
-    'button-height': 32px,
-    'button-disabled-color': getCssVar('text-color-placeholder'),
-    'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
-    'button-bg-color': getCssVar('fill-color'),
-    'hover-color': getCssVar('color-primary'),
-    'font-size-small': 12px,
-    'button-width-small': 24px,
-    'button-height-small': 24px,
-    'button-width-large': 40px,
-    'button-height-large': 40px,
-    'item-gap': 16px,
-  ),
-  $pagination
-);
-
-// Popup
-// css3 var in packages/theme-chalk/src/popup.scss
-$popup: () !default;
-$popup: map.merge(
-  (
-    'modal-bg-color': getCssVar('color-black'),
-    'modal-opacity': 0.5,
-  ),
-  $popup
-);
-
-// Popover
-// css3 var in packages/theme-chalk/src/popover.scss
-$popover: () !default;
-$popover: map.merge(
-  (
-    'bg-color': getCssVar('bg-color', 'overlay'),
-    'font-size': getCssVar('font-size-base'),
-    'border-color': getCssVar('border-color-lighter'),
-    'padding': 12px,
-    'padding-large': 18px 20px,
-    'title-font-size': 16px,
-    'title-text-color': getCssVar('text-color-primary'),
-    'border-radius': 4px,
-  ),
-  $popover
-);
-
-// popper
-// Pay attention to the difference between 'popper' and 'popover'
-$popper: () !default;
-$popper: map.merge(
-  (
-    'border-radius': var(#{getCssVarName('popover-border-radius')}, 4px),
-  ),
-  $popper
-);
-
-// skeleton
-$skeleton: () !default;
-$skeleton: map.merge(
-  (
-    'color': getCssVar('fill-color'),
-    'to-color': getCssVar('fill-color', 'darker'),
-  ),
-  $skeleton
-);
-
-// Tag
-// css3 var in packages/theme-chalk/src/tag.scss
-$tag: () !default;
-$tag: map.merge(
-  (
-    'font-size': 12px,
-    'border-radius': 4px,
-    'border-radius-rounded': 9999px,
-  ),
-  $tag
-);
-
-$tag-height: () !default;
-$tag-height: map.merge(
-  (
-    'large': 32px,
-    'default': 24px,
-    'small': 20px,
-  ),
-  $tag-height
-);
-
-$tag-padding: () !default;
-$tag-padding: map.merge(
-  (
-    'large': 12px,
-    'default': 10px,
-    'small': 8px,
-  ),
-  $tag-padding
-);
-
-$tag-icon-size: () !default;
-$tag-icon-size: map.merge(
-  (
-    'large': 16px,
-    'default': 14px,
-    'small': 12px,
-  ),
-  $tag-icon-size
-);
-
-// Text
-// css3 var in packages/theme-chalk/src/text.scss
-$text: () !default;
-$text: map.merge(
-  (
-    'font-size': getCssVar('font-size', 'base'),
-    'color': getCssVar('text-color', 'regular'),
-  ),
-  $text
-);
-
-$text-font-size: () !default;
-$text-font-size: map.merge(
-  (
-    'large': getCssVar('font-size', 'medium'),
-    'default': getCssVar('font-size', 'base'),
-    'small': getCssVar('font-size', 'extra-small'),
-  ),
-  $text-font-size
-);
-
-// Tree
-// css3 var in packages/theme-chalk/src/tree.scss
-$tree: () !default;
-$tree: map.merge(
-  (
-    'node-content-height': 26px,
-    'node-hover-bg-color': getCssVar('fill-color', 'light'),
-    'text-color': getCssVar('text-color-regular'),
-    'expand-icon-color': getCssVar('text-color-placeholder'),
-  ),
-  $tree
-);
-
-// Dropdown
-$dropdown: () !default;
-$dropdown: map.merge(
-  (
-    'menu-box-shadow': getCssVar('box-shadow-light'),
-    'menuItem-hover-fill': getCssVar('color-primary-light-9'),
-    'menuItem-hover-color': getCssVar('color-primary'),
-    'menu-index': 10,
-  ),
-  $dropdown
-);
-
-// drawer
-$drawer: () !default;
-$drawer: map.merge(
-  (
-    'bg-color':
-      var(#{getCssVarName('dialog', 'bg-color')}, #{getCssVar('bg-color')}),
-    'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 20px),
-  ),
-  $drawer
-);
-
-// Badge
-// css3 var in packages/theme-chalk/src/badge.scss
-$badge: () !default;
-$badge: map.merge(
-  (
-    'bg-color': getCssVar('color-danger'),
-    'radius': 10px,
-    'font-size': 12px,
-    'padding': 6px,
-    'size': 18px,
-  ),
-  $badge
-);
-
-// Card
-$card: () !default;
-$card: map.merge(
-  (
-    'border-color': getCssVar('border-color', 'light'),
-    'border-radius': 4px,
-    'padding': 20px,
-    'bg-color': getCssVar('fill-color', 'blank'),
-  ),
-  $card
-);
-
-// Slider
-// css3 var in packages/theme-chalk/src/slider.scss
-$slider: () !default;
-$slider: map.merge(
-  (
-    'main-bg-color': getCssVar('color-primary'),
-    'runway-bg-color': getCssVar('border-color-light'),
-    'stop-bg-color': getCssVar('color-white'),
-    'disabled-color': getCssVar('text-color-placeholder'),
-    'border-radius': 3px,
-    'height': 6px,
-    'button-size': 20px,
-    'button-wrapper-size': 36px,
-    'button-wrapper-offset': -15px,
-  ),
-  $slider
-);
-
-// Menu
-// css3 var in packages/theme-chalk/src/menu.scss
-$menu: () !default;
-$menu: map.merge(
-  (
-    'active-color': getCssVar('color-primary'),
-    'text-color': getCssVar('text-color-primary'),
-    'hover-text-color': getCssVar('color-primary'),
-    'bg-color': getCssVar('fill-color', 'blank'),
-    'hover-bg-color': getCssVar('color-primary-light-9'),
-    'item-height': 56px,
-    'sub-item-height': calc(#{getCssVar('menu-item-height')} - 6px),
-    'horizontal-height': 60px,
-    'horizontal-sub-item-height': 36px,
-    'item-font-size': getCssVar('font-size-base'),
-    'item-hover-fill': getCssVar('color-primary-light-9'),
-    'border-color': getCssVar('border-color'),
-    'base-level-padding': 20px,
-    'level-padding': 20px,
-    'icon-width': 24px,
-  ),
-  $menu
-);
-
-// Rate
-$rate: () !default;
-$rate: map.merge(
-  (
-    'height': 20px,
-    'font-size': getCssVar('font-size-base'),
-    'icon-size': 18px,
-    'icon-margin': 6px,
-    // seems not be used, to be removed
-    // 'icon-color': getCssVar('text-color-placeholder),
-    'void-color': getCssVar('border-color', 'darker'),
-    'fill-color': #f7ba2a,
-    'disabled-void-color': getCssVar('fill-color'),
-    'text-color': getCssVar('text-color', 'primary'),
-  ),
-  $rate
-);
-
-// DatePicker
-// css3 var packages/theme-chalk/src/date-picker/var.scss
-$datepicker: () !default;
-$datepicker: map.merge(
-  (
-    'text-color': getCssVar('text-color-regular'),
-    'off-text-color': getCssVar('text-color-placeholder'),
-    'header-text-color': getCssVar('text-color-regular'),
-    'icon-color': getCssVar('text-color-primary'),
-    'border-color': getCssVar('disabled-border-color'),
-    'inner-border-color': getCssVar('border-color-light'),
-    'inrange-bg-color': getCssVar('border-color-extra-light'),
-    'inrange-hover-bg-color': getCssVar('border-color-extra-light'),
-    'active-color': getCssVar('color-primary'),
-    'hover-text-color': getCssVar('color-primary'),
-  ),
-  $datepicker
-);
-
-$date-editor: () !default;
-$date-editor: map.merge(
-  (
-    'width': 220px,
-    'monthrange-width': 300px,
-    'daterange-width': 350px,
-    'datetimerange-width': 400px,
-  ),
-  $date-editor
-);
-
-// Loading
-// css3 var in packages/theme-chalk/src/loading.scss
-$loading: () !default;
-$loading: map.merge(
-  (
-    'spinner-size': 42px,
-    'fullscreen-spinner-size': 50px,
-  ),
-  $loading
-);
-
-// Scrollbar
-// css3 var in packages/theme-chalk/src/scrollbar.scss
-$scrollbar: () !default;
-$scrollbar: map.merge(
-  (
-    'opacity': 0.3,
-    'bg-color': getCssVar('text-color-secondary'),
-    'hover-opacity': 0.5,
-    'hover-bg-color': getCssVar('text-color-secondary'),
-  ),
-  $scrollbar
-);
-
-// Carousel
-// css3 var in packages/theme-chalk/src/carousel.scss
-$carousel: () !default;
-$carousel: map.merge(
-  (
-    'arrow-font-size': 12px,
-    'arrow-size': 36px,
-    'arrow-background': rgba(31, 45, 61, 0.11),
-    'arrow-hover-background': rgba(31, 45, 61, 0.23),
-    'indicator-width': 30px,
-    'indicator-height': 2px,
-    'indicator-padding-horizontal': 4px,
-    'indicator-padding-vertical': 12px,
-    'indicator-out-color': getCssVar('border-color-hover'),
-  ),
-  $carousel
-);
-
-// Collapse
-// css3 var in packages/theme-chalk/src/collapse.scss
-$collapse: () !default;
-$collapse: map.merge(
-  (
-    'border-color': getCssVar('border-color-lighter'),
-    'header-height': 48px,
-    'header-bg-color': getCssVar('fill-color', 'blank'),
-    'header-text-color': getCssVar('text-color-primary'),
-    'header-font-size': 13px,
-    'content-bg-color': getCssVar('fill-color', 'blank'),
-    'content-font-size': 13px,
-    'content-text-color': getCssVar('text-color-primary'),
-  ),
-  $collapse
-);
-
-// Transfer
-// css3 var in packages/theme-chalk/src/transfer.scss
-$transfer: () !default;
-$transfer: map.merge(
-  (
-    'border-color': getCssVar('border-color-lighter'),
-    'border-radius': getCssVar('border-radius-base'),
-    'panel-width': 200px,
-    'panel-header-height': 40px,
-    'panel-header-bg-color': getCssVar('fill-color', 'light'),
-    'panel-footer-height': 40px,
-    'panel-body-height': 278px,
-    'item-height': 30px,
-    'filter-height': 32px,
-  ),
-  $transfer
-);
-
-// Timeline
-// css3 var in packages/theme-chalk/src/timeline-item.scss
-$timeline: () !default;
-$timeline: map.merge(
-  (
-    'node-size-normal': 12px,
-    'node-size-large': 14px,
-    'node-color': getCssVar('border-color-light'),
-  ),
-  $timeline
-);
-
-// Tabs
-// css3 var in packages/theme-chalk/src/tabs.scss
-$tabs: () !default;
-$tabs: map.merge(
-  (
-    'header-height': 40px,
-  ),
-  $tabs
-);
-
-// Backtop
-// css3 var in packages/theme-chalk/src/backtop.scss
-$backtop: () !default;
-$backtop: map.merge(
-  (
-    'bg-color': getCssVar('bg-color', 'overlay'),
-    'text-color': getCssVar('color-primary'),
-    'hover-bg-color': getCssVar('border-color-extra-light'),
-  ),
-  $backtop
-);
-
-// Link
-// css3 var in packages/theme-chalk/src/link.scss
-$link: () !default;
-$link: map.merge(
-  (
-    'font-size': getCssVar('font-size-base'),
-    'font-weight': getCssVar('font-weight-primary'),
-    'text-color': getCssVar('text-color-regular'),
-    'hover-text-color': getCssVar('color-primary'),
-    'disabled-text-color': getCssVar('text-color-placeholder'),
-  ),
-  $link
-);
-
-$link-text-color: () !default;
-
-@each $type in $types {
-  $link-text-color: map.merge(
-    $link-text-color,
-    (
-      $type: map.get($colors, $type, 'base'),
-    )
-  ) !global;
-}
-
-// Calendar
-// css3 var in packages/theme-chalk/src/calendar.scss
-$calendar: () !default;
-$calendar: map.merge(
-  (
-    'border':
-      var(
-        #{getCssVarName('table-border')},
-        1px solid #{getCssVar('border-color-lighter')}
-      ),
-    'header-border-bottom': getCssVar('calendar-border'),
-    'selected-bg-color': getCssVar('color', 'primary', 'light-9'),
-    'cell-width': 85px,
-  ),
-  $calendar
-);
-
-// Form
-// css3 var in packages/theme-chalk/src/form.scss
-$form: () !default;
-$form: map.merge(
-  (
-    'label-font-size': getCssVar('font-size-base'),
-    'inline-content-width': 220px,
-  ),
-  $form
-);
-
-// Avatar
-// css3 var in packages/theme-chalk/src/avatar.scss
-$avatar: () !default;
-$avatar: map.merge(
-  (
-    'text-color': getCssVar('color-white'),
-    'bg-color': getCssVar('text-color', 'disabled'),
-    'text-size': 14px,
-    'icon-size': 18px,
-    'border-radius': getCssVar('border-radius-base'),
-  ),
-  $avatar
-);
-
-$avatar-size: () !default;
-$avatar-size: map.merge(
-  (
-    'large': 56px,
-    'default': 40px,
-    'small': 24px,
-  ),
-  $avatar-size
-);
-
-// Empty
-// css3 var in packages/theme-chalk/src/empty.scss
-$empty: () !default;
-$empty: map.merge(
-  (
-    'padding': 40px 0,
-    'image-width': 160px,
-    'description-margin-top': 20px,
-    'bottom-margin-top': 20px,
-    'fill-color-0': getCssVar('color-white'),
-    'fill-color-1': #fcfcfd,
-    'fill-color-2': #f8f9fb,
-    'fill-color-3': #f7f8fc,
-    'fill-color-4': #eeeff3,
-    'fill-color-5': #edeef2,
-    'fill-color-6': #e9ebef,
-    'fill-color-7': #e5e7e9,
-    'fill-color-8': #e0e3e9,
-    'fill-color-9': #d5d7de,
-  ),
-  $empty
-);
-
-// Descriptions
-// css3 var in packages/theme-chalk/src/descriptions.scss
-$descriptions: () !default;
-$descriptions: map.merge(
-  (
-    'table-border': 1px solid getCssVar('border-color-lighter'),
-    'item-bordered-label-background': getCssVar('fill-color', 'light'),
-  ),
-  $descriptions
-);
-
-// Result
-// css3 var in packages/theme-chalk/src/result.scss
-$result: () !default;
-$result: map.merge(
-  (
-    'padding': 40px 30px,
-    'icon-font-size': 64px,
-    'title-font-size': 20px,
-    'title-margin-top': 20px,
-    'subtitle-margin-top': 10px,
-    'extra-margin-top': 30px,
-  ),
-  $result
-);
-
-// Upload
-// css3 var in packages/theme-chalk/src/upload.scss
-$upload: () !default;
-$upload: map.merge(
-  (
-    'dragger-padding-horizontal': 40px,
-    'dragger-padding-vertical': 10px,
-  ),
-  $upload
-);
-
-// transition
-$transition: () !default;
-$transition: map.merge(
-  (
-    'all': all getCssVar('transition-duration')
-      getCssVar('transition-function-ease-in-out-bezier'),
-    'fade': opacity getCssVar('transition-duration')
-      getCssVar('transition-function-fast-bezier'),
-    'md-fade': (
-      transform getCssVar('transition-duration')
-        getCssVar('transition-function-fast-bezier'),
-      opacity getCssVar('transition-duration')
-        getCssVar('transition-function-fast-bezier'),
-    ),
-    'fade-linear': opacity getCssVar('transition-duration-fast') linear,
-    'border': border-color getCssVar('transition-duration-fast')
-      getCssVar('transition-function-ease-in-out-bezier'),
-    'box-shadow': box-shadow getCssVar('transition-duration-fast')
-      getCssVar('transition-function-ease-in-out-bezier'),
-    'color': color getCssVar('transition-duration-fast')
-      getCssVar('transition-function-ease-in-out-bezier'),
-  ),
-  $transition
-);
-
-$transition-duration: () !default;
-$transition-duration: map.merge(
-  (
-    '': 0.3s,
-    'fast': 0.2s,
-  ),
-  $transition-duration
-);
-
-$transition-function: () !default;
-$transition-function: map.merge(
-  (
-    'ease-in-out-bezier': cubic-bezier(0.645, 0.045, 0.355, 1),
-    'fast-bezier': cubic-bezier(0.23, 1, 0.32, 1),
-  ),
-  $transition-function
-);
-
-// header
-$header: () !default;
-$header: map.merge(
-  (
-    'padding': 0 20px,
-    'height': 60px,
-  ),
-  $header
-);
-// main
-$main: () !default;
-$main: map.merge(
-  (
-    'padding': 20px,
-  ),
-  $main
-);
-// footer
-$footer: () !default;
-$footer: map.merge(
-  (
-    'padding': 0 20px,
-    'height': 60px,
-  ),
-  $footer
-);
-
-// Break-point
-$sm: 768px !default;
-$md: 992px !default;
-$lg: 1200px !default;
-$xl: 1920px !default;
-
-$breakpoints: (
-  'xs': '(max-width: #{$sm - 1})',
-  'sm': '(min-width: #{$sm})',
-  'md': '(min-width: #{$md})',
-  'lg': '(min-width: #{$lg})',
-  'xl': '(min-width: #{$xl})',
-) !default;
-
-$breakpoints-spec: (
-  'xs-only': '(max-width: #{$sm - 1})',
-  'sm-and-up': '(min-width: #{$sm})',
-  'sm-only': '(min-width: #{$sm}) and (max-width: #{$md - 1})',
-  'sm-and-down': '(max-width: #{$md - 1})',
-  'md-and-up': '(min-width: #{$md})',
-  'md-only': '(min-width: #{$md}) and (max-width: #{$lg - 1})',
-  'md-and-down': '(max-width: #{$lg - 1})',
-  'lg-and-up': '(min-width: #{$lg})',
-  'lg-only': '(min-width: #{$lg}) and (max-width: #{$xl - 1})',
-  'lg-and-down': '(max-width: #{$xl - 1})',
-  'xl-only': '(min-width: #{$xl})',
-) !default;

src/assets/style/home.scss

@@ -301,3 +301,308 @@
     left: 64px;
   }
 }
+
+// .home-guide
+.home-guide {
+  position: absolute;
+  left: 216px;
+  top: 72px;
+  bottom: 16px;
+  right: 16px;
+
+  padding: 20px;
+  background-image: url(../images/bg-guide.png);
+  background-repeat: repeat;
+  background-size: 75px 75px;
+
+  border-radius: 10px;
+  border: 1px solid var(--color-border-light);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 1074px;
+  min-height: 692px;
+
+  .guide-container {
+    margin: 0 auto;
+    position: relative;
+  }
+
+  .guide-row {
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+    align-items: center;
+
+    .guide-card {
+      height: 292px;
+    }
+
+    &:not(:first-child) {
+      margin-top: 108px;
+
+      .guide-card {
+        height: 252px;
+      }
+    }
+  }
+
+  .guide-card {
+    background: var(--color-white);
+    padding: 16px;
+    min-height: 252px;
+    min-width: 230px;
+    border: 1px solid var(--color-border-light);
+    border-radius: 10px;
+  }
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+
+  .card-icon {
+    margin-right: 6px;
+    height: 32px;
+    width: 32px;
+    border-radius: 50%;
+    border: 1px solid #dddddd;
+    text-align: center;
+    padding: 5px;
+    font-size: 16px;
+    background-color: #fff;
+  }
+
+  .card-title {
+    font-weight: 600;
+    margin: 0;
+    line-height: 26px;
+    color: #000201;
+    font-size: 16px;
+  }
+
+  .card-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    font-size: 14px;
+    color: #000201;
+    height: 38px;
+    background: linear-gradient(180deg, #ffffff 0%, #e5e5e5 100%);
+    border: 1px solid #e5e5e5;
+    border-radius: 8px;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+  .menu-box {
+    .menu-item {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    .menu-body {
+      padding: 8px 12px;
+      background-color: #fff;
+      border: 1px solid #e5e5e5;
+      border-top: none;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+
+      .number {
+        font-weight: 600;
+
+        &.orange {
+          color: var(--color-warning);
+        }
+      }
+    }
+  }
+
+  .arrow-right {
+    width: 0;
+    height: 0;
+    border-left: 6px solid var(--color-text-dark);
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+  }
+
+  .connection-arrow {
+    width: 84px;
+    height: 22px;
+    background-image: url(../images/bg-arrow.png);
+    background-size: 100% 100%;
+
+    &.left {
+      transform: rotate(-180deg);
+    }
+
+    &.bottom {
+      transform: rotate(90deg);
+    }
+
+    &.row-arrow {
+      position: absolute;
+      top: 332px;
+      right: 73px;
+      transform-origin: center;
+    }
+  }
+
+  .guide-mark {
+    width: 358px;
+
+    .card-content {
+      position: relative;
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 0;
+        height: 175px;
+        top: -12px;
+        left: 15px;
+        border-left: 1px solid #ddd;
+        z-index: 2;
+      }
+    }
+
+    .guide-branch {
+      position: absolute;
+      width: 8px;
+      height: 93px;
+      border: 1px solid #ddd;
+      border-right: none;
+      top: 20px;
+      right: 194px;
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 13px;
+        height: 0;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        border-bottom: 1px solid #ddd;
+        z-index: 2;
+      }
+    }
+    .guide-line {
+      position: absolute;
+      width: 42px;
+      height: 0;
+      border-bottom: 1px solid #ddd;
+      bottom: 18px;
+      right: 194px;
+    }
+  }
+
+  .mark-step {
+    display: flex;
+    align-items: center;
+
+    .step-title {
+      flex: 1;
+      position: relative;
+      padding-left: 28px;
+      z-index: 9;
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        border: 2px solid var(--color-primary);
+        left: 11px;
+        top: 50%;
+        margin-top: -5px;
+        box-sizing: border-box;
+        background-color: #fff;
+      }
+    }
+    .step-content {
+      width: 210px;
+      padding-left: 16px;
+
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+  }
+
+  .guide-score {
+    width: 358px;
+
+    .card-content {
+      position: relative;
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 0;
+        height: 99px;
+        top: 18px;
+        left: 9px;
+        border-left: 1px solid #ddd;
+        z-index: 2;
+      }
+    }
+  }
+
+  .process-step {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: var(--color-text-dark-1);
+    z-index: 9;
+
+    .step-number {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      color: var(--color-primary);
+      border: 1px solid #7cb5ec;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+
+    .menu-item {
+      flex: 1;
+
+      > span {
+        flex: 1;
+      }
+    }
+
+    .status-icon {
+      font-size: 16px;
+      margin-right: 12px;
+
+      &.success {
+        color: var(--color-success);
+      }
+    }
+  }
+}

src/assets/style/reset.scss

@@ -130,8 +130,11 @@ body {
   vertical-align: middle;
   width: 1em;
   height: 1em;
-  color: inherit;
-  path {
-    fill: inherit;
+
+  &.inherit {
+    color: inherit;
+    path {
+      fill: inherit;
+    }
   }
 }

src/assets/style/var.scss

@@ -8,6 +8,7 @@
   --color-text-gray-3: #d3d5e0;
   --color-text-gray-4: #e0e1eb;
   --color-border: #dce3eb;
+  --color-border-light: #e5e5e5;
   --color-border-bold: #d5d5d5;
   --color-background: #f6fcff;
   --form-color-border: #d9d9d9;
@@ -45,7 +46,7 @@
 
   // element
   --el-color-primary: var(--color-primary);
-  --el-border-color-lighter: #e5e5e5;
+  --el-border-color-lighter: var(--color-border-light);
 
   .el-table {
     --el-table-header-text-color: var(--color-text-dark);

src/components/svg-icon/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <component :is="iconComponent" class="svg-icon" :fill="fill"></component>
+  <component
+    :is="iconComponent"
+    :class="['svg-icon', { inherit: props.inheritColor }]"
+    :fill="fill"
+  ></component>
 </template>
 
 <script setup lang="ts">
@@ -19,7 +23,7 @@
   import IconFile from '../../assets/svgs/icon-file.svg?component';
   import IconHome from '../../assets/svgs/icon-home.svg?component';
   import IconImport from '../../assets/svgs/icon-import.svg?component';
-  import IconInit from '../../assets/svgs/icon-init.svg?component';
+  import IconSystemInitS from '../../assets/svgs/icon-system-init-s.svg?component';
   import IconIssuePaper from '../../assets/svgs/icon-issue-paper.svg?component';
   import IconJump from '../../assets/svgs/icon-jump.svg?component';
   import IconLog from '../../assets/svgs/icon-log.svg?component';
@@ -48,7 +52,7 @@
   import IconUserManage from '../../assets/svgs/icon-user-manage.svg?component';
   import IconUser from '../../assets/svgs/icon-user.svg?component';
   import IconView from '../../assets/svgs/icon-view.svg?component';
-  import IconWarning from '../../assets/svgs/icon-warning.svg?component';
+  import IconWarningS from '../../assets/svgs/icon-warning-s.svg?component';
 
   defineOptions({
     name: 'SvgIcon',
@@ -58,9 +62,11 @@
     defineProps<{
       name: string;
       fill?: string;
+      inheritColor: boolean;
     }>(),
     {
       fill: 'currentColor',
+      inheritColor: true,
     }
   );
 
@@ -79,7 +85,7 @@
     IconFile,
     IconHome,
     IconImport,
-    IconInit,
+    IconSystemInitS,
     IconIssuePaper,
     IconJump,
     IconLog,
@@ -108,7 +114,7 @@
     IconUserManage,
     IconUser,
     IconView,
-    IconWarning,
+    IconWarningS,
   };
 
   const iconName = snakeToHump(props.name) as keyof typeof icons;

src/layout/default-layout.vue

@@ -42,6 +42,7 @@
         class="el-menu-home"
         :default-active="curRouteName"
         :collapse="isCollapse"
+        unique-opened
         @select="toMenuItem"
       >
         <template v-for="submenu in appStore.appMenus">
@@ -88,9 +89,7 @@
       </div>
 
       <!-- home-view: page detail -->
-      <div class="home-view">
-        <router-view />
-      </div>
+      <router-view />
     </div>
   </div>
 

src/store/modules/app/menuData.ts

@@ -50,6 +50,16 @@ export const adminMenus = [
     sequence: 2,
     enable: true,
   },
+  {
+    id: 201,
+    name: '用户管理',
+    url: 'UserManage',
+    icon: '',
+    type: 'MENU',
+    parentId: 2,
+    sequence: 1,
+    enable: true,
+  },
   {
     id: 3,
     name: '考试管理',
@@ -60,6 +70,16 @@ export const adminMenus = [
     sequence: 2,
     enable: true,
   },
+  {
+    id: 301,
+    name: '考试管理',
+    url: 'ExamManage',
+    icon: '',
+    type: 'MENU',
+    parentId: 3,
+    sequence: 1,
+    enable: true,
+  },
   {
     id: 4,
     name: '考生管理',
@@ -70,6 +90,16 @@ export const adminMenus = [
     sequence: 2,
     enable: true,
   },
+  {
+    id: 401,
+    name: '考生管理',
+    url: 'StudentManage',
+    icon: '',
+    type: 'MENU',
+    parentId: 4,
+    sequence: 1,
+    enable: true,
+  },
   {
     id: 5,
     name: '扫描进度',
@@ -80,6 +110,16 @@ export const adminMenus = [
     sequence: 2,
     enable: true,
   },
+  {
+    id: 501,
+    name: '扫描进度统计',
+    url: 'ScanManage',
+    icon: '',
+    type: 'MENU',
+    parentId: 5,
+    sequence: 1,
+    enable: true,
+  },
   {
     id: 6,
     name: '科目管理',
@@ -90,6 +130,16 @@ export const adminMenus = [
     sequence: 2,
     enable: true,
   },
+  {
+    id: 601,
+    name: '科目管理',
+    url: 'SubjectManage',
+    icon: '',
+    type: 'MENU',
+    parentId: 6,
+    sequence: 1,
+    enable: true,
+  },
   {
     id: 7,
     name: '评卷管理',
@@ -101,7 +151,7 @@ export const adminMenus = [
     enable: true,
   },
   {
-    id: 8,
+    id: 701,
     name: '评卷进度',
     url: 'MarkProgress',
     icon: '',
@@ -111,7 +161,7 @@ export const adminMenus = [
     enable: true,
   },
   {
-    id: 9,
+    id: 702,
     name: '科目评卷管理',
     icon: '',
     url: 'MarkManage',
@@ -121,8 +171,8 @@ export const adminMenus = [
     enable: true,
   },
   {
-    id: 10,
-    name: '打回管理',
+    id: 8,
+    name: '打回卷管理',
     url: 'back',
     icon: 'icon-reject-manage',
     type: 'MENU',
@@ -131,37 +181,37 @@ export const adminMenus = [
     enable: true,
   },
   {
-    id: 11,
+    id: 801,
     name: '打回卷',
     url: 'RejectManage',
-    icon: 'icon-reject-manage',
+    icon: '',
     type: 'MENU',
-    parentId: 10,
+    parentId: 8,
     sequence: 1,
     enable: true,
   },
   {
-    id: 111,
+    id: 802,
     name: '打回记录',
     url: 'RejectRecord',
-    icon: 'icon-back-record',
+    icon: '',
     type: 'MENU',
-    parentId: 10,
-    sequence: 1,
+    parentId: 8,
+    sequence: 2,
     enable: true,
   },
   {
-    id: 12,
+    id: 803,
     name: '打回统计',
     url: 'RejectStatistics',
-    icon: 'icon-reject-statistics',
+    icon: '',
     type: 'MENU',
-    parentId: 10,
-    sequence: 2,
+    parentId: 8,
+    sequence: 3,
     enable: true,
   },
   {
-    id: 13,
+    id: 9,
     name: '问题卷管理',
     url: 'IssuePaper',
     icon: 'icon-issue-paper',
@@ -171,7 +221,17 @@ export const adminMenus = [
     enable: true,
   },
   {
-    id: 14,
+    id: 901,
+    name: '问题卷',
+    url: 'IssuePaper',
+    icon: '',
+    type: 'MENU',
+    parentId: 9,
+    sequence: 1,
+    enable: true,
+  },
+  {
+    id: 10,
     name: '成绩复核',
     url: 'ScoreReview',
     icon: 'icon-score-review',
@@ -181,37 +241,37 @@ export const adminMenus = [
     enable: true,
   },
   {
-    id: 15,
+    id: 1001,
     name: '复核进度统计',
     url: 'ScoreReviewStatistics',
-    icon: 'icon-score-review-statistics',
+    icon: '',
     type: 'MENU',
-    parentId: 14,
-    sequence: 2,
+    parentId: 10,
+    sequence: 1,
     enable: true,
   },
   {
-    id: 16,
+    id: 1002,
     name: '全卷复核',
     url: 'AllReview',
-    icon: 'icon-all-review',
+    icon: '',
     type: 'MENU',
-    parentId: 14,
+    parentId: 10,
     sequence: 2,
     enable: true,
   },
   {
-    id: 17,
+    id: 1003,
     name: '成绩校验',
     url: 'ScoreCheck',
-    icon: 'icon-score-check',
+    icon: '',
     type: 'MENU',
-    parentId: 14,
-    sequence: 2,
+    parentId: 10,
+    sequence: 3,
     enable: true,
   },
   {
-    id: 18,
+    id: 11,
     name: '成绩查询',
     url: 'ScoreQuery',
     icon: 'icon-score-query',
@@ -221,7 +281,17 @@ export const adminMenus = [
     enable: true,
   },
   {
-    id: 19,
+    id: 1101,
+    name: '成绩查询',
+    url: 'ScoreQuery',
+    icon: '',
+    type: 'MENU',
+    parentId: 11,
+    sequence: 1,
+    enable: true,
+  },
+  {
+    id: 12,
     name: '科目分析',
     url: 'AnalysisManage',
     icon: 'icon-subject-analysis',
@@ -231,9 +301,19 @@ export const adminMenus = [
     enable: true,
   },
   {
-    id: 20,
+    id: 1201,
+    name: '科目分析',
+    url: 'AnalysisManage',
+    icon: '',
+    type: 'MENU',
+    parentId: 12,
+    sequence: 1,
+    enable: true,
+  },
+  {
+    id: 13,
     name: '数据检查',
-    url: 'DataCheck',
+    url: 'ManualConfirm',
     icon: 'icon-data-check',
     type: 'MENU',
     parentId: -1,
@@ -241,37 +321,37 @@ export const adminMenus = [
     enable: true,
   },
   {
-    id: 21,
+    id: 1301,
     name: '人工确认',
     url: 'ManualConfirm',
-    icon: 'icon-manual-confirm',
+    icon: '',
     type: 'MENU',
-    parentId: 20,
-    sequence: 2,
+    parentId: 13,
+    sequence: 1,
     enable: true,
   },
   {
-    id: 22,
+    id: 1302,
     name: '识别结果检查',
     url: 'ResultCheck',
-    icon: 'icon-result-check',
+    icon: '',
     type: 'MENU',
-    parentId: 20,
+    parentId: 13,
     sequence: 2,
     enable: true,
   },
   {
-    id: 23,
+    id: 1303,
     name: '图片检查',
     url: 'ImageCheck',
-    icon: 'icon-image-check',
+    icon: '',
     type: 'MENU',
-    parentId: 20,
-    sequence: 2,
+    parentId: 13,
+    sequence: 3,
     enable: true,
   },
   {
-    id: 24,
+    id: 14,
     name: '操作日志',
     url: 'LogManage',
     icon: 'icon-log',
@@ -280,4 +360,14 @@ export const adminMenus = [
     sequence: 2,
     enable: true,
   },
+  {
+    id: 1401,
+    name: '操作日志',
+    url: 'LogManage',
+    icon: '',
+    type: 'MENU',
+    parentId: 14,
+    sequence: 1,
+    enable: true,
+  },
 ];

src/views/HomeGuide.vue

@@ -5,7 +5,9 @@
       <div class="guide-row">
         <div class="guide-card">
           <div class="card-header">
-            <svg-icon name="icon-system" class="card-icon" />
+            <div class="card-icon">
+              <svg-icon name="icon-system-init-s" :inherit-color="false" />
+            </div>
             <h3 class="card-title">系统初始化</h3>
           </div>
           <div class="card-content">
@@ -13,15 +15,19 @@
               <span>考试设置</span>
               <div class="arrow-right"></div>
             </div>
-            <div class="menu-item">
-              <span>考生导入</span>
-              <div class="arrow-right"></div>
-            </div>
-            <div class="menu-item highlight">
-              <span>考生：</span>
-              <span class="number orange">124490</span>
-              <span>科目：</span>
-              <span class="number orange">98</span>
+            <div class="menu-box">
+              <div class="menu-item">
+                <span>考生导入</span>
+                <div class="arrow-right"></div>
+              </div>
+              <div class="menu-body">
+                <span>考生：</span>
+                <span class="number orange" style="margin-right: 15px"
+                  >124490</span
+                >
+                <span>科目：</span>
+                <span class="number orange">98</span>
+              </div>
             </div>
             <div class="menu-item">
               <span>试卷结构设置</span>
@@ -33,47 +39,56 @@
             </div>
           </div>
         </div>
+        <div class="connection-arrow right"></div>
 
-        <div class="guide-card">
+        <div class="guide-card guide-mark">
           <div class="card-header">
-            <svg-icon name="icon-file" class="card-icon" />
+            <div class="card-icon">
+              <svg-icon name="icon-mark-manage-s" :inherit-color="false" />
+            </div>
             <h3 class="card-title">评卷管理</h3>
           </div>
           <div class="card-content">
-            <div class="menu-item">
-              <span>评卷进度</span>
-              <div class="arrow-right"></div>
-            </div>
-            <div class="menu-item with-submenu">
-              <div class="main-item">
-                <div class="radio-dot active"></div>
-                <span>评卷过程管理</span>
-              </div>
-              <div class="submenu">
-                <div class="submenu-item">
+            <div class="guide-branch"></div>
+            <div class="guide-line"></div>
+
+            <div class="mark-step">
+              <div class="step-title">评卷过程管理</div>
+              <div class="step-content">
+                <div class="menu-item">
+                  <span>评卷进度</span>
+                  <div class="arrow-right"></div>
+                </div>
+                <div class="menu-item">
                   <span>分组设置修改</span>
                   <div class="arrow-right"></div>
                 </div>
-                <div class="submenu-item">
+                <div class="menu-item">
                   <span>已评任务查看</span>
                   <div class="arrow-right"></div>
                 </div>
               </div>
             </div>
-            <div class="menu-item">
-              <div class="radio-dot"></div>
-              <span>数据分析</span>
-              <div class="submenu-single">
-                <span>科目分析</span>
-                <div class="arrow-right"></div>
+
+            <div class="mark-step">
+              <div class="step-title">数据分析</div>
+              <div class="step-content">
+                <div class="menu-item">
+                  <span>科目分析</span>
+                  <div class="arrow-right"></div>
+                </div>
               </div>
             </div>
           </div>
         </div>
 
+        <div class="connection-arrow right"></div>
+
         <div class="guide-card">
           <div class="card-header">
-            <svg-icon name="icon-apply" class="card-icon" />
+            <div class="card-icon">
+              <svg-icon name="icon-warning-s" :inherit-color="false" />
+            </div>
             <h3 class="card-title">异常卷处理</h3>
           </div>
           <div class="card-content">
@@ -93,18 +108,15 @@
         </div>
       </div>
 
-      <!-- 连接箭头 -->
-      <div class="connection-arrows">
-        <div class="arrow-down"></div>
-        <div class="arrow-down"></div>
-        <div class="arrow-down"></div>
-      </div>
+      <div class="connection-arrow bottom row-arrow"></div>
 
       <!-- 第二行 -->
       <div class="guide-row">
         <div class="guide-card">
           <div class="card-header">
-            <svg-icon name="icon-success" class="card-icon" />
+            <div class="card-icon">
+              <svg-icon name="icon-score-view-s" :inherit-color="false" />
+            </div>
             <h3 class="card-title">成绩复查</h3>
           </div>
           <div class="card-content">
@@ -123,29 +135,39 @@
           </div>
         </div>
 
-        <div class="guide-card">
+        <div class="connection-arrow left"></div>
+
+        <div class="guide-card guide-score">
           <div class="card-header">
-            <svg-icon name="icon-file" class="card-icon" />
+            <div class="card-icon">
+              <svg-icon name="icon-score-export-s" :inherit-color="false" />
+            </div>
             <h3 class="card-title">成绩导出</h3>
           </div>
           <div class="card-content">
             <div class="process-step">
               <div class="step-number">1</div>
-              <span>数据检查 - 人工确认</span>
-              <div class="status-icon success"></div>
-              <div class="arrow-right"></div>
+              <div class="menu-item">
+                <span>数据检查 - 人工确认</span>
+                <el-icon class="status-icon success"><SuccessFilled /></el-icon>
+                <div class="arrow-right"></div>
+              </div>
             </div>
             <div class="process-step">
               <div class="step-number">2</div>
-              <span>检查科目进度100%且关闭</span>
-              <div class="status-icon success"></div>
-              <div class="arrow-right"></div>
+              <div class="menu-item">
+                <span>检查科目进度100%且关闭</span>
+                <el-icon class="status-icon success"><SuccessFilled /></el-icon>
+                <div class="arrow-right"></div>
+              </div>
             </div>
             <div class="process-step">
               <div class="step-number">3</div>
-              <span>缺考考生导入</span>
-              <div class="status-icon success"></div>
-              <div class="arrow-right"></div>
+              <div class="menu-item">
+                <span>缺考考生导入</span>
+                <el-icon class="status-icon success"><SuccessFilled /></el-icon>
+                <div class="arrow-right"></div>
+              </div>
             </div>
             <div class="menu-item">
               <span>成绩导出</span>
@@ -153,10 +175,13 @@
             </div>
           </div>
         </div>
+        <div class="connection-arrow left"></div>
 
         <div class="guide-card">
           <div class="card-header">
-            <svg-icon name="icon-apply" class="card-icon" />
+            <div class="card-icon">
+              <svg-icon name="icon-review-s" :inherit-color="false" />
+            </div>
             <h3 class="card-title">复核处理</h3>
           </div>
           <div class="card-content">
@@ -177,204 +202,9 @@
 
 <script setup lang="ts">
   import { defineOptions } from 'vue';
+  import { SuccessFilled } from '@element-plus/icons-vue';
 
   defineOptions({
     name: 'HomeGuide',
   });
 </script>
-
-<style scoped lang="scss">
-  .home-guide {
-    padding: 20px;
-    background-color: var(--color-background);
-    min-height: 100vh;
-  }
-
-  .guide-container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .guide-row {
-    display: flex;
-    gap: 20px;
-    margin-bottom: 20px;
-    justify-content: center;
-  }
-
-  .guide-card {
-    background: var(--color-white);
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-    width: 320px;
-    min-height: 280px;
-  }
-
-  .card-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-    padding-bottom: 15px;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .card-icon {
-    font-size: 24px;
-    margin-right: 10px;
-    color: var(--color-primary);
-  }
-
-  .card-title {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--color-text-dark);
-    margin: 0;
-  }
-
-  .card-content {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .menu-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 0;
-    font-size: 14px;
-    color: var(--color-text-dark-1);
-
-    &.highlight {
-      background-color: #f8f9fa;
-      padding: 8px 12px;
-      border-radius: 4px;
-
-      .number {
-        font-weight: 600;
-
-        &.orange {
-          color: var(--color-warning);
-        }
-      }
-    }
-  }
-
-  .with-submenu {
-    flex-direction: column;
-    align-items: flex-start;
-
-    .main-item {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      margin-bottom: 8px;
-    }
-
-    .submenu {
-      margin-left: 20px;
-      width: calc(100% - 20px);
-
-      .submenu-item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 4px 0;
-        font-size: 13px;
-        color: var(--color-text-gray);
-      }
-    }
-  }
-
-  .submenu-single {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-left: 20px;
-    font-size: 13px;
-    color: var(--color-text-gray);
-  }
-
-  .radio-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    border: 2px solid var(--color-border);
-    margin-right: 8px;
-
-    &.active {
-      background-color: var(--color-primary);
-      border-color: var(--color-primary);
-    }
-  }
-
-  .arrow-right {
-    width: 0;
-    height: 0;
-    border-left: 6px solid var(--color-text-gray-1);
-    border-top: 4px solid transparent;
-    border-bottom: 4px solid transparent;
-  }
-
-  .process-step {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 0;
-    font-size: 13px;
-    color: var(--color-text-dark-1);
-
-    .step-number {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      background-color: var(--color-primary);
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      font-weight: 600;
-      flex-shrink: 0;
-    }
-
-    .status-icon {
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      flex-shrink: 0;
-
-      &.success {
-        background-color: var(--color-success);
-      }
-    }
-  }
-
-  .connection-arrows {
-    display: flex;
-    justify-content: center;
-    gap: 340px;
-    margin: 10px 0;
-
-    .arrow-down {
-      width: 0;
-      height: 0;
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-top: 12px solid var(--color-primary);
-    }
-  }
-
-  /* 响应式设计 */
-  @media (max-width: 1024px) {
-    .guide-row {
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .connection-arrows {
-      display: none;
-    }
-  }
-</style>

src/views/admin/school-manage/SchoolManage.vue

@@ -18,7 +18,7 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList">
+    <el-table class="page-table" :data="dataList" border stripe>
       <el-table-column property="name" label="名称" />
       <el-table-column property="code" label="代码" />
       <el-table-column property="subOrgCode" label="子机构代码" width="100" />

src/views/admin/set-manage/SetManage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="part-box">
-    <el-table class="page-table" :data="tableData">
+    <el-table class="page-table" :data="tableData" border stripe>
       <el-table-column prop="type" label="类型" width="180" />
       <el-table-column prop="detail" label="详情" />
       <el-table-column label="操作" width="100">

src/views/analysis/BigQuestionAnalysis.vue

@@ -13,7 +13,13 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="index" label="序号" width="60" />
       <el-table-column
         property="bigQuestionName"

src/views/analysis/ClassAnalysis.vue

@@ -21,7 +21,13 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="index" label="序号" width="60" />
       <el-table-column property="className" label="班级" min-width="150" />
       <el-table-column

src/views/analysis/CollegeAnalysis.vue

@@ -21,7 +21,13 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="index" label="序号" width="60" />
       <el-table-column property="college" label="学生院系" min-width="150" />
       <el-table-column

src/views/analysis/ObjectiveQuestionAnalysis.vue

@@ -25,7 +25,13 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="index" label="序号" width="60" />
       <el-table-column
         property="questionName"

src/views/analysis/SegmentAnalysis.vue

@@ -25,7 +25,13 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="index" label="序号" width="60" />
       <el-table-column property="segment" label="分数段" min-width="120" />
       <el-table-column property="students" label="人数" min-width="100" />

src/views/analysis/SubjectiveQuestionAnalysis.vue

@@ -13,7 +13,13 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="index" label="序号" width="60" />
       <el-table-column
         property="questionName"

src/views/analysis/TeacherAnalysis.vue

@@ -21,7 +21,13 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="index" label="序号" width="60" />
       <el-table-column property="teacher" label="任课老师" min-width="120" />
       <el-table-column

src/views/analysis/TotalAnalysis.vue

@@ -13,7 +13,13 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="index" label="序号" width="60" />
       <el-table-column property="subject" label="科目名称" min-width="120" />
       <el-table-column

src/views/check/ImageCheck.vue

@@ -36,7 +36,13 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="index" label="序号" width="60" />
       <el-table-column property="examCardNo" label="准考证号" width="120" />
       <el-table-column property="name" label="姓名" min-width="100" />

src/views/check/ManualConfirm.vue

@@ -29,7 +29,13 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="index" label="序号" width="60" />
       <el-table-column property="examCardNo" label="准考证号" width="120" />
       <el-table-column property="name" label="姓名" min-width="100" />

src/views/exam/ExamManage.vue

@@ -40,7 +40,13 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="index" label="序号" width="60" />
       <el-table-column property="id" label="ID" width="80" />
       <el-table-column property="name" label="考试名称" min-width="200">

src/views/exam/ExamStatDialog.vue

@@ -10,7 +10,7 @@
     @open="modalBeforeOpen"
   >
     <div v-loading="loading">
-      <el-table :data="tableData" style="width: 100%">
+      <el-table :data="tableData" style="width: 100%" border stripe>
         <el-table-column prop="name" label="名称" width="100" />
         <el-table-column prop="attribute" label="属性" min-width="200" />
         <el-table-column label="操作" width="80">

src/views/exam/IssuePaperTypeDialog.vue

@@ -17,7 +17,13 @@
       </div>
 
       <!-- 表格 -->
-      <el-table :data="typeList" :loading="loading" class="type-table">
+      <el-table
+        :data="typeList"
+        :loading="loading"
+        class="type-table"
+        border
+        stripe
+      >
         <el-table-column property="id" label="编号" width="80" />
         <el-table-column property="name" label="分类名称" />
         <el-table-column property="type" label="类型" />

src/views/exam/RejectTypeDialog.vue

@@ -17,7 +17,13 @@
       </div>
 
       <!-- 表格 -->
-      <el-table :data="typeList" :loading="loading" class="type-table">
+      <el-table
+        :data="typeList"
+        :loading="loading"
+        class="type-table"
+        border
+        stripe
+      >
         <el-table-column property="id" label="编号" width="80" />
         <el-table-column property="name" label="分类名称" />
         <el-table-column property="type" label="类型" />

src/views/issue-paper/IssuePaper.vue

@@ -62,6 +62,8 @@
       class="page-table"
       :data="dataList"
       :loading="loading"
+      border
+      stripe
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" />

src/views/log/LogManage.vue

@@ -44,7 +44,13 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="index" label="序号" width="60" />
       <el-table-column property="loginName" label="登录名" min-width="120" />
       <el-table-column property="userType" label="用户类型" width="100" />

src/views/mark/ArbitrationManage.vue

@@ -52,6 +52,8 @@
       class="page-table"
       :data="dataList"
       :loading="loading"
+      border
+      stripe
       @selection-change="handleSelectionChange"
       @sort-change="handleSortChange"
     >

src/views/mark/GroupManage.vue

@@ -21,6 +21,8 @@
       class="page-table"
       :data="dataList"
       :loading="loading"
+      border
+      stripe
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" />

src/views/mark/MarkProgress.vue

@@ -61,6 +61,8 @@
       class="page-table"
       :data="dataList"
       :loading="loading"
+      border
+      stripe
       @selection-change="handleSelectionChange"
       @sort-change="handleSortChange"
     >

src/views/mark/MarkerManage.vue

@@ -53,6 +53,8 @@
       class="page-table"
       :data="dataList"
       :loading="loading"
+      border
+      stripe
       @selection-change="handleSelectionChange"
       @sort-change="handleSortChange"
     >

src/views/mark/QualityMonitor.vue

@@ -36,6 +36,8 @@
       class="page-table"
       :data="dataList"
       :loading="loading"
+      border
+      stripe
       @sort-change="handleSortChange"
     >
       <el-table-column property="group" label="分组" width="100" sortable />

src/views/mark/ScoreCurve.vue

@@ -14,7 +14,13 @@
 
     <!-- 数据表格 -->
     <div class="part-box">
-      <el-table class="page-table" :data="dataList" :loading="loading">
+      <el-table
+        class="page-table"
+        :data="dataList"
+        :loading="loading"
+        border
+        stripe
+      >
         <el-table-column property="marker" label="评卷员" width="120" />
         <el-table-column property="name" label="姓名" min-width="100" />
         <!-- 动态分数列 -->

src/views/mark/TaskManage.vue

@@ -111,6 +111,8 @@
       class="page-table"
       :data="dataList"
       :loading="loading"
+      border
+      stripe
       @sort-change="handleSortChange"
     >
       <el-table-column property="subjectCode" label="科目代码" width="120" />

src/views/mark/TrialManage.vue

@@ -45,6 +45,8 @@
       class="page-table"
       :data="dataList"
       :loading="loading"
+      border
+      stripe
       @sort-change="handleSortChange"
     >
       <el-table-column property="subjectCode" label="科目代码" width="120" />

src/views/mark/group-edit/GroupQuestionSelect.vue

@@ -4,6 +4,8 @@
     v-loading="loading"
     :data="dataList"
     class="question-table"
+    border
+    stripe
     @selection-change="handleSelectionChange"
   >
     <el-table-column

src/views/reject/RejectRecord.vue

@@ -52,7 +52,13 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="index" label="序号" width="60" />
       <el-table-column property="subject" label="科目" min-width="100" />
       <el-table-column property="groupNo" label="分组序号" width="100" />

src/views/reject/RejectStatistics.vue

@@ -18,6 +18,8 @@
       class="page-table"
       :data="dataList"
       :loading="loading"
+      border
+      stripe
       @sort-change="handleSortChange"
     >
       <el-table-column

src/views/review/AllReview.vue

@@ -184,6 +184,8 @@
       class="page-table"
       :data="dataList"
       :loading="loading"
+      border
+      stripe
       @selection-change="handleSelectionChange"
       @sort-change="handleSortChange"
     >

src/views/review/ScoreQuery.vue

@@ -8,7 +8,13 @@
   </div>
 
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="selection" width="55" />
       <el-table-column property="studentNo" label="考生编号" width="150" />
       <el-table-column property="courseName" label="科目" width="200" />

src/views/review/ScoreReviewStatistics.vue

@@ -51,6 +51,8 @@
       class="page-table"
       :data="dataList"
       :loading="loading"
+      border
+      stripe
       @sort-change="handleSortChange"
     >
       <el-table-column property="courseName" label="科目" min-width="200" />

src/views/scan/ScanCourseStats.vue

@@ -37,6 +37,8 @@
       class="page-table"
       :data="dataList"
       :loading="loading"
+      border
+      stripe
       @sort-change="handleSortChange"
     >
       <el-table-column

src/views/scan/ScanPointStats.vue

@@ -23,6 +23,8 @@
       class="page-table"
       :data="dataList"
       :loading="loading"
+      border
+      stripe
       @sort-change="handleSortChange"
     >
       <el-table-column

src/views/scan/SignPaperStats.vue

@@ -29,7 +29,13 @@
     </el-form>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column
         property="signPaperNo"
         label="签到表编号"

src/views/score/ScoreQuery.vue

@@ -161,6 +161,8 @@
       class="page-table"
       :data="dataList"
       :loading="loading"
+      border
+      stripe
       @sort-change="handleSortChange"
     >
       <el-table-column property="examNo" label="准考证号" min-width="120" />

src/views/student/StudentManage.vue

@@ -173,7 +173,13 @@
     </div>
   </div>
   <div class="part-box">
-    <el-table class="page-table" :data="dataList" :loading="loading">
+    <el-table
+      class="page-table"
+      :data="dataList"
+      :loading="loading"
+      border
+      stripe
+    >
       <el-table-column type="index" label="序号" width="60" />
       <el-table-column
         v-if="checkFieldVisible('examNo')"

src/views/subject/OptionalRuleEdit.vue

@@ -23,6 +23,8 @@
       v-loading="loading"
       :data="dataList"
       class="page-table"
+      border
+      stripe
     >
       <el-table-column prop="bigQuestionName" label="大题名称" width="120" />
       <el-table-column prop="bigQuestionNo" label="大题号" width="80" />

src/views/subject/PaperStructEdit.vue

@@ -61,6 +61,8 @@
       v-loading="loading"
       :data="dataList"
       class="page-table"
+      border
+      stripe
       @selection-change="handleSelectionChange"
     >
       <el-table-column

src/views/subject/SubjectManage.vue

@@ -118,7 +118,13 @@
   </div>
 
   <div class="part-box">
-    <el-table v-loading="loadingTable" :data="dataList" class="page-table">
+    <el-table
+      v-loading="loadingTable"
+      :data="dataList"
+      class="page-table"
+      border
+      stripe
+    >
       <el-table-column prop="name" label="科目名称">
         <template #default="{ row }">
           <el-button type="primary" link @click="onEditPaperStruct(row)">

src/views/subject/components/OptionalQuestionSelect.vue

@@ -4,6 +4,8 @@
     v-loading="loading"
     :data="dataList"
     class="question-table"
+    border
+    stripe
     @selection-change="handleSelectionChange"
   >
     <el-table-column type="selection" width="55" />

src/views/subject/components/OptionalRuleDialog.vue

@@ -11,7 +11,7 @@
     @open="modalBeforeOpen"
   >
     <el-button type="primary" @click="addRule">新增</el-button>
-    <el-table v-loading="loading" :data="ruleList">
+    <el-table v-loading="loading" :data="ruleList" border stripe>
       <el-table-column label="选做题组" width="120">
         <template #default="{ row }">
           {{ `${row.ruleSelecCount}选${row.ruleTotalCount}` }}

src/views/user/UserManage.vue

@@ -109,6 +109,8 @@
       v-loading="loadingTable"
       :data="dataList"
       class="page-table"
+      border
+      stripe
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" />

src/views/user/components/SelectSubjectDialog.vue

@@ -35,6 +35,9 @@
       ref="tableRef"
       :data="dataList"
       row-key="id"
+      :loading="loading"
+      border
+      stripe
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" :reserve-selection="true" />