1. 初步完成评估任务整体逻辑； 2. 新增评估记录下载功能（待完善）

riku

2024-01-11 fab4d7d62b2039ab8660649d26a8c6f8f32193b5

 src/styles/element/base.scss

@@ -1,54 +1,34 @@
//
@mixin font-size($size) {
  font-size: var($size);
/************************************** font size **************************************/
$fontsize: (
  s: var(--el-font-size-small),
  b: var(--el-font-size-base),
  m: var(--el-font-size-medium),
  l: var(--el-font-size-large)
);

@each $dName, $dValue in $fontsize {
  .f-#{$dName} {
    font-size: #{$dValue};
  }
}

.f-s {
  @include font-size(--el-font-size-small);
}
/************************************** color **************************************/
$colors: (
  p: var(--el-color-primary),
  s: var(--el-color-success),
  w: var(--el-color-warning),
  d: var(--el-color-danger),
  e: var(--el-color-error),
  i: var(--el-color-info)
);

.f-b {
  @include font-size(--el-font-size-base);
}

.f-m {
  @include font-size(--el-font-size-medium);
}

.f-l {
  @include font-size(--el-font-size-large);
}

@mixin color($value) {
  color: var($value);
}

.color-p {
  @include color(--el-color-primary);
}

.color-s {
  @include color(--el-color-success);
}

.color-w {
  @include color(--el-color-warning);
}

.color-d {
  @include color(--el-color-danger);
}

.color-e {
  @include color(--el-color-error);
}

.color-i {
  @include color(--el-color-info);
}

.b-color-aqua {
  background-color: aqua;
@each $dName, $dValue in $colors {
  .color-#{$dName} {
    color: #{$dValue};
  }
  .b-color-#{$dName} {
    background-color: #{$dValue};
  }
}

/************************************** 内外边距 **************************************/
@@ -85,8 +65,28 @@
  }
}

.w-300px {
  width: 300px;
/************************************** 宽高 **************************************/
$csize: (
  small: var(--el-component-size-small),
  default: var(--el-component-size-default),
  large: var(--el-component-size-large)
);
$ws: (20px, 40px, 60px, 100px, 150px, 300px);
@each $name, $value in $csize {
  .w-#{$name} {
    width: #{$value};
  }
  .h-#{$name} {
    height: #{$value};
  }
}
@each $i in $ws {
  .w-#{$i} {
    width: #{$i};
  }
  .h-#{$i} {
    height: #{$i};
  }
}

//