Enhance stylelint rules, fix propTypes error of TagSelect (#3518)

* add stylelint shareable config for css modules * fix CSS pseudo element with double colon * support stylelint declaration-block-no-ignored-properties rule * support sorted CSS properties order for readability and consistency * autofix order of all styles by lint:fix script * fix propTypes error of TagSelect component * Revert "autofix order of all styles by lint:fix script" This reverts commit 51cb9d055f. * Revert "support sorted CSS properties order for readability and consistency" This reverts commit ff6c24d263. * make lint:fix work for stylelint * Revert "Revert "autofix order of all styles by lint:fix script"" This reverts commit 946ed0a351. * Revert "Revert "support sorted CSS properties order for readability and consistency"" This reverts commit 31b557e382.
7 years ago · ac37440740
58 changed files with 425 additions and 415 deletions
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@ -1,9 +1,13 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-css-modules",
+    "stylelint-config-rational-order",
+    "stylelint-config-prettier"
+  ],
+  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
  "rules": {
-    "declaration-empty-line-before": null,
    "no-descending-specificity": null,
-    "selector-pseudo-class-no-unknown": null,
-    "selector-pseudo-element-colon-notation": null
+    "plugin/declaration-block-no-ignored-properties": true
  }
 }
--- a/package.json
+++ b/package.json
@ -10,10 +10,10 @@
    "build": "umi build",
    "site": "npm run presite && cross-env APP_TYPE=site npm run build && firebase deploy && npm run docker:push",
    "analyze": "cross-env ANALYZE=1 umi build",
-    "lint:style": "stylelint \"src/**/*.less\" --syntax less",
+    "lint:style": "stylelint 'src/**/*.less' --syntax less",
    "lint:prettier": "check-prettier lint",
    "lint": "eslint --ext .js src mock tests && npm run lint:style && npm run lint:prettier",
-    "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
+    "lint:fix": "eslint --fix --ext .js src mock tests && stylelint --fix 'src/**/*.less' --syntax less",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js",
    "tslint": "npm run tslint:fix",
@ -90,8 +90,12 @@
    "prettier": "1.16.3",
    "slash2": "^2.0.0",
    "stylelint": "^9.10.1",
+    "stylelint-config-css-modules": "^1.3.0",
    "stylelint-config-prettier": "^4.0.0",
+    "stylelint-config-rational-order": "^0.0.4",
    "stylelint-config-standard": "^18.2.0",
+    "stylelint-declaration-block-no-ignored-properties": "^1.1.0",
+    "stylelint-order": "^2.0.0",
    "tslint": "^5.12.1",
    "tslint-config-prettier": "^1.17.0",
    "tslint-react": "^3.6.0",
--- a/src/components/ActiveChart/index.less
+++ b/src/components/ActiveChart/index.less
@ -12,15 +12,15 @@
 }
 .activeChartLegend {
  position: relative;
-  font-size: 0;
-  margin-top: 8px;
  height: 20px;
+  margin-top: 8px;
+  font-size: 0;
  line-height: 20px;
  span {
    display: inline-block;
+    width: 33.33%;
    font-size: 12px;
    text-align: center;
-    width: 33.33%;
  }
  span:first-child {
    text-align: left;
@ -31,9 +31,9 @@
 }
 .dashedLine {
  position: relative;
-  height: 1px;
  top: -70px;
  left: -3px;
+  height: 1px;

  .line {
    position: absolute;
--- a/src/components/ArticleListContent/index.less
+++ b/src/components/ArticleListContent/index.less
@ -2,25 +2,25 @@

 .listContent {
  .description {
-    line-height: 22px;
    max-width: 720px;
+    line-height: 22px;
  }
  .extra {
-    color: @text-color-secondary;
    margin-top: 16px;
+    color: @text-color-secondary;
    line-height: 22px;
    & > :global(.ant-avatar) {
-      vertical-align: top;
-      margin-right: 8px;
-      width: 20px;
-      height: 20px;
      position: relative;
      top: 1px;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+      vertical-align: top;
    }
    & > em {
+      margin-left: 16px;
      color: @disabled-color;
      font-style: normal;
-      margin-left: 16px;
    }
  }
 }
@ -30,8 +30,8 @@
    .extra {
      & > em {
        display: block;
-        margin-left: 0;
        margin-top: 8px;
+        margin-left: 0;
      }
    }
  }
--- a/src/components/AvatarList/index.less
+++ b/src/components/AvatarList/index.less
@ -11,10 +11,10 @@

 .avatarItem {
  display: inline-block;
-  font-size: @font-size-base;
-  margin-left: -8px;
  width: @avatar-size-base;
  height: @avatar-size-base;
+  margin-left: -8px;
+  font-size: @font-size-base;
  :global {
    .ant-avatar {
      border: 1px solid #fff;
--- a/src/components/Charts/ChartCard/index.less
+++ b/src/components/Charts/ChartCard/index.less
@ -4,8 +4,8 @@
  position: relative;
  .chartTop {
    position: relative;
-    overflow: hidden;
    width: 100%;
+    overflow: hidden;
  }
  .chartTopMargin {
    margin-bottom: 12px;
@ -26,45 +26,45 @@
    }
  }
  .meta {
+    height: 22px;
    color: @text-color-secondary;
    font-size: @font-size-base;
    line-height: 22px;
-    height: 22px;
  }
  .action {
-    cursor: pointer;
    position: absolute;
    top: 4px;
    right: 0;
    line-height: 1;
+    cursor: pointer;
  }
  .total {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    white-space: nowrap;
-    color: @heading-color;
+    height: 38px;
    margin-top: 4px;
    margin-bottom: 0;
+    overflow: hidden;
+    color: @heading-color;
    font-size: 30px;
    line-height: 38px;
-    height: 38px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
  }
  .content {
-    margin-bottom: 12px;
    position: relative;
    width: 100%;
+    margin-bottom: 12px;
  }
  .contentFixed {
    position: absolute;
-    left: 0;
    bottom: 0;
+    left: 0;
    width: 100%;
  }
  .footer {
-    border-top: 1px solid @border-color-split;
-    padding-top: 9px;
    margin-top: 8px;
+    padding-top: 9px;
+    border-top: 1px solid @border-color-split;
    & > * {
      position: relative;
    }
--- a/src/components/Charts/Field/index.less
+++ b/src/components/Charts/Field/index.less
@ -1,17 +1,17 @@
@import '~antd/lib/style/themes/default.less';

 .field {
-  white-space: nowrap;
+  margin: 0;
  overflow: hidden;
+  white-space: nowrap;
  text-overflow: ellipsis;
-  margin: 0;
  .label,
  .number {
    font-size: @font-size-base;
    line-height: 22px;
  }
  .number {
-    color: @heading-color;
    margin-left: 8px;
+    color: @heading-color;
  }
 }
--- a/src/components/Charts/MiniProgress/index.less
+++ b/src/components/Charts/MiniProgress/index.less
@ -1,31 +1,31 @@
@import '~antd/lib/style/themes/default.less';

 .miniProgress {
-  padding: 5px 0;
  position: relative;
  width: 100%;
+  padding: 5px 0;
  .progressWrap {
-    background-color: @background-color-base;
    position: relative;
+    background-color: @background-color-base;
  }
  .progress {
-    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
-    border-radius: 1px 0 0 1px;
-    background-color: @primary-color;
    width: 0;
    height: 100%;
+    background-color: @primary-color;
+    border-radius: 1px 0 0 1px;
+    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
  }
  .target {
    position: absolute;
    top: 0;
    bottom: 0;
    span {
-      border-radius: 100px;
      position: absolute;
      top: 0;
      left: 0;
-      height: 4px;
      width: 2px;
+      height: 4px;
+      border-radius: 100px;
    }
    span:last-child {
      top: auto;
--- a/src/components/Charts/Pie/index.less
+++ b/src/components/Charts/Pie/index.less
@ -10,38 +10,38 @@
  }
  .legend {
    position: absolute;
+    top: 50%;
    right: 0;
    min-width: 200px;
-    top: 50%;
-    transform: translateY(-50%);
    margin: 0 20px;
-    list-style: none;
    padding: 0;
+    list-style: none;
+    transform: translateY(-50%);
    li {
-      cursor: pointer;
-      margin-bottom: 16px;
      height: 22px;
+      margin-bottom: 16px;
      line-height: 22px;
+      cursor: pointer;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .dot {
-    border-radius: 8px;
-    display: inline-block;
-    margin-right: 8px;
    position: relative;
    top: -1px;
-    height: 8px;
+    display: inline-block;
    width: 8px;
+    height: 8px;
+    margin-right: 8px;
+    border-radius: 8px;
  }
  .line {
-    background-color: @border-color-split;
    display: inline-block;
-    margin-right: 8px;
    width: 1px;
    height: 16px;
+    margin-right: 8px;
+    background-color: @border-color-split;
  }
  .legendTitle {
    color: @text-color;
@ -58,24 +58,24 @@
  }
  .total {
    position: absolute;
-    left: 50%;
    top: 50%;
-    text-align: center;
+    left: 50%;
    max-height: 62px;
+    text-align: center;
    transform: translate(-50%, -50%);
    & > h4 {
-      color: @text-color-secondary;
-      font-size: 14px;
-      line-height: 22px;
      height: 22px;
      margin-bottom: 8px;
+      color: @text-color-secondary;
      font-weight: normal;
+      font-size: 14px;
+      line-height: 22px;
    }
    & > p {
-      color: @heading-color;
      display: block;
-      font-size: 1.2em;
      height: 32px;
+      color: @heading-color;
+      font-size: 1.2em;
      line-height: 32px;
      white-space: nowrap;
    }
--- a/src/components/Charts/Radar/index.less
+++ b/src/components/Charts/Radar/index.less
@ -5,42 +5,42 @@
    margin-top: 16px;
    .legendItem {
      position: relative;
-      text-align: center;
-      cursor: pointer;
      color: @text-color-secondary;
      line-height: 22px;
+      text-align: center;
+      cursor: pointer;
      p {
        margin: 0;
      }
      h6 {
-        color: @heading-color;
+        margin-top: 4px;
+        margin-bottom: 0;
        padding-left: 16px;
+        color: @heading-color;
        font-size: 24px;
        line-height: 32px;
-        margin-top: 4px;
-        margin-bottom: 0;
      }
-      &:after {
-        background-color: @border-color-split;
+      &::after {
        position: absolute;
        top: 8px;
        right: 0;
-        height: 40px;
        width: 1px;
+        height: 40px;
+        background-color: @border-color-split;
        content: '';
      }
    }
-    > :last-child .legendItem:after {
+    > :last-child .legendItem::after {
      display: none;
    }
    .dot {
-      border-radius: 6px;
-      display: inline-block;
-      margin-right: 6px;
      position: relative;
      top: -1px;
-      height: 6px;
+      display: inline-block;
      width: 6px;
+      height: 6px;
+      margin-right: 6px;
+      border-radius: 6px;
    }
  }
 }
--- a/src/components/Charts/WaterWave/index.less
+++ b/src/components/Charts/WaterWave/index.less
@ -1,15 +1,15 @@
@import '~antd/lib/style/themes/default.less';

 .waterWave {
-  display: inline-block;
  position: relative;
+  display: inline-block;
  transform-origin: left;
  .text {
    position: absolute;
-    left: 0;
    top: 32px;
-    text-align: center;
+    left: 0;
    width: 100%;
+    text-align: center;
    span {
      color: @text-color-secondary;
      font-size: 14px;
@ -17,8 +17,8 @@
    }
    h4 {
      color: @heading-color;
-      line-height: 32px;
      font-size: 24px;
+      line-height: 32px;
    }
  }
  .waterWaveCanvasWrapper {
--- a/src/components/DescriptionList/index.less
+++ b/src/components/DescriptionList/index.less
@ -10,35 +10,34 @@
  }

  .title {
-    font-size: 14px;
+    margin-bottom: 16px;
    color: @heading-color;
    font-weight: 500;
-    margin-bottom: 16px;
+    font-size: 14px;
  }

  .term {
-    // Line-height is 22px IE dom height will calculate error
-    line-height: 20px;
+    display: table-cell;
    padding-bottom: 16px;
-    margin-right: 8px;
    color: @heading-color;
+    // Line-height is 22px IE dom height will calculate error
+    line-height: 20px;
    white-space: nowrap;
-    display: table-cell;

-    &:after {
-      content: ':';
-      margin: 0 8px 0 2px;
+    &::after {
      position: relative;
      top: -0.5px;
+      margin: 0 8px 0 2px;
+      content: ':';
    }
  }

  .detail {
-    line-height: 20px;
+    display: table-cell;
    width: 100%;
    padding-bottom: 16px;
    color: @text-color;
-    display: table-cell;
+    line-height: 20px;
  }

  &.small {
@ -66,8 +65,8 @@

  &.vertical {
    .term {
-      padding-bottom: 8px;
      display: block;
+      padding-bottom: 8px;
    }

    .detail {
--- a/src/components/EditableItem/index.less
+++ b/src/components/EditableItem/index.less
@ -1,10 +1,10 @@
@import '~antd/lib/style/themes/default.less';

 .editableItem {
-  line-height: @input-height-base;
  display: table;
  width: 100%;
  margin-top: (@font-size-base * @line-height-base - @input-height-base) / 2;
+  line-height: @input-height-base;

  .wrapper {
    display: table-row;
@ -18,8 +18,8 @@
    }

    .icon {
-      cursor: pointer;
      text-align: right;
+      cursor: pointer;
    }
  }
 }
--- a/src/components/EditableLinkGroup/index.less
+++ b/src/components/EditableLinkGroup/index.less
@ -4,11 +4,11 @@
  padding: 20px 0 8px 24px;
  font-size: 0;
  & > a {
-    color: @text-color;
    display: inline-block;
-    font-size: @font-size-base;
-    margin-bottom: 13px;
    width: 25%;
+    margin-bottom: 13px;
+    color: @text-color;
+    font-size: @font-size-base;
    &:hover {
      color: @primary-color;
    }
--- a/src/components/Ellipsis/index.less
+++ b/src/components/Ellipsis/index.less
@ -1,24 +1,24 @@
 .ellipsis {
-  overflow: hidden;
  display: inline-block;
-  word-break: break-all;
  width: 100%;
+  overflow: hidden;
+  word-break: break-all;
 }

 .lines {
  position: relative;
  .shadow {
-    display: block;
    position: absolute;
+    z-index: -999;
+    display: block;
    color: transparent;
    opacity: 0;
-    z-index: -999;
  }
 }

 .lineClamp {
  position: relative;
+  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
-  display: -webkit-box;
 }
--- a/src/components/Exception/index.less
+++ b/src/components/Exception/index.less
@ -11,24 +11,24 @@
    width: 62.5%;
    padding-right: 152px;
    zoom: 1;
-    &:before,
-    &:after {
+    &::before,
+    &::after {
      content: ' ';
      display: table;
    }
-    &:after {
+    &::after {
      clear: both;
-      visibility: hidden;
-      font-size: 0;
      height: 0;
+      font-size: 0;
+      visibility: hidden;
    }
  }

  .imgEle {
-    height: 360px;
+    float: right;
    width: 100%;
    max-width: 430px;
-    float: right;
+    height: 360px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
@ -38,18 +38,18 @@
    flex: auto;

    h1 {
+      margin-bottom: 24px;
      color: #434e59;
-      font-size: 72px;
      font-weight: 600;
+      font-size: 72px;
      line-height: 72px;
-      margin-bottom: 24px;
    }

    .desc {
+      margin-bottom: 16px;
      color: @text-color-secondary;
      font-size: 20px;
      line-height: 28px;
-      margin-bottom: 16px;
    }

    .actions {
@ -73,8 +73,8 @@
    display: block;
    text-align: center;
    .imgBlock {
-      padding-right: 0;
      margin: 0 auto 24px;
+      padding-right: 0;
    }
  }
 }
--- a/src/components/FooterToolbar/index.less
+++ b/src/components/FooterToolbar/index.less
@ -2,21 +2,21 @@

 .toolbar {
  position: fixed;
-  width: 100%;
-  bottom: 0;
  right: 0;
+  bottom: 0;
+  z-index: 9;
+  width: 100%;
  height: 56px;
+  padding: 0 24px;
  line-height: 56px;
-  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
  background: #fff;
  border-top: 1px solid @border-color-split;
-  padding: 0 24px;
-  z-index: 9;
+  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);

-  &:after {
-    content: '';
+  &::after {
    display: block;
    clear: both;
+    content: '';
  }

  .left {
--- a/src/components/GlobalFooter/index.less
+++ b/src/components/GlobalFooter/index.less
@ -1,8 +1,8 @@
@import '~antd/lib/style/themes/default.less';

 .globalFooter {
-  padding: 0 16px;
  margin: 48px 0 24px 0;
+  padding: 0 16px;
  text-align: center;

  .links {
--- a/src/components/GlobalHeader/index.less
+++ b/src/components/GlobalHeader/index.less
@ -3,21 +3,21 @@
@pro-header-hover-bg: rgba(0, 0, 0, 0.025);

 .header {
+  position: relative;
  height: @layout-header-height;
  padding: 0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-  position: relative;
 }

 .logo {
+  display: inline-block;
  height: @layout-header-height;
+  padding: 0 0 0 24px;
+  font-size: 20px;
  line-height: @layout-header-height;
  vertical-align: top;
-  display: inline-block;
-  padding: 0 0 0 24px;
  cursor: pointer;
-  font-size: 20px;
  img {
    display: inline-block;
    vertical-align: middle;
@ -34,11 +34,11 @@
 }

 .trigger {
-  font-size: 20px;
  height: @layout-header-height;
+  padding: ~'calc((@{layout-header-height} - 20px) / 2)' 24px;
+  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s, padding 0s;
-  padding: ~'calc((@{layout-header-height} - 20px) / 2)' 24px;
  &:hover {
    background: @pro-header-hover-bg;
  }
@ -49,14 +49,14 @@
  height: 100%;
  overflow: hidden;
  .action {
-    cursor: pointer;
-    padding: 0 12px;
    display: inline-block;
-    transition: all 0.3s;
    height: 100%;
+    padding: 0 12px;
+    cursor: pointer;
+    transition: all 0.3s;
    > i {
-      vertical-align: middle;
      color: @text-color;
+      vertical-align: middle;
    }
    &:hover {
      background: @pro-header-hover-bg;
@ -76,8 +76,8 @@
      margin: ~'calc((@{layout-header-height} - 24px) / 2)' 0;
      margin-right: 8px;
      color: @primary-color;
-      background: rgba(255, 255, 255, 0.85);
      vertical-align: top;
+      background: rgba(255, 255, 255, 0.85);
    }
  }
 }
@ -111,14 +111,14 @@
      padding: 22px 12px;
    }
    .logo {
-      padding-left: 12px;
-      padding-right: 12px;
      position: relative;
+      padding-right: 12px;
+      padding-left: 12px;
    }
    .right {
      position: absolute;
-      right: 12px;
      top: 0;
+      right: 12px;
      background: #fff;
      .account {
        .avatar {
--- a/src/components/HeaderDropdown/index.less
+++ b/src/components/HeaderDropdown/index.less
@ -2,8 +2,8 @@

 .container > * {
  background-color: #fff;
-  box-shadow: @shadow-1-down;
  border-radius: 4px;
+  box-shadow: @shadow-1-down;
 }

@media screen and (max-width: @screen-xs) {
--- a/src/components/HeaderSearch/index.less
+++ b/src/components/HeaderSearch/index.less
@ -2,21 +2,21 @@

 .headerSearch {
  :global(.anticon-search) {
-    cursor: pointer;
    font-size: 16px;
+    cursor: pointer;
  }
  .input {
-    transition: width 0.3s, margin-left 0.3s;
    width: 0;
    background: transparent;
    border-radius: 0;
+    transition: width 0.3s, margin-left 0.3s;
    :global(.ant-select-selection) {
      background: transparent;
    }
    input {
-      border: 0;
-      padding-left: 0;
      padding-right: 0;
+      padding-left: 0;
+      border: 0;
      box-shadow: none !important;
    }
    &,
--- a/src/components/Login/index.less
+++ b/src/components/Login/index.less
@ -3,9 +3,9 @@
 .login {
  :global {
    .ant-tabs .ant-tabs-bar {
-      border-bottom: 0;
      margin-bottom: 24px;
      text-align: center;
+      border-bottom: 0;
    }

    .ant-form-item {
@ -19,9 +19,9 @@
  }

  .icon {
-    font-size: 24px;
-    color: rgba(0, 0, 0, 0.2);
    margin-left: 16px;
+    color: rgba(0, 0, 0, 0.2);
+    font-size: 24px;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.3s;
@ -32,9 +32,9 @@
  }

  .other {
-    text-align: left;
    margin-top: 24px;
    line-height: 22px;
+    text-align: left;

    .register {
      float: right;
@ -42,8 +42,8 @@
  }

  .prefixIcon {
-    font-size: @font-size-base;
    color: @disabled-color;
+    font-size: @font-size-base;
  }

  .submit {
--- a/src/components/NoticeIcon/NoticeList.less
+++ b/src/components/NoticeIcon/NoticeList.less
@ -7,19 +7,19 @@
    display: none;
  }
  .item {
-    transition: all 0.3s;
+    padding-right: 24px;
+    padding-left: 24px;
    overflow: hidden;
    cursor: pointer;
-    padding-left: 24px;
-    padding-right: 24px;
+    transition: all 0.3s;

    .meta {
      width: 100%;
    }

    .avatar {
-      background: #fff;
      margin-top: 4px;
+      background: #fff;
    }
    .iconElement {
      font-size: 32px;
@ -35,58 +35,58 @@
      background: @primary-1;
    }
    .title {
-      font-weight: normal;
      margin-bottom: 8px;
+      font-weight: normal;
    }
    .description {
      font-size: 12px;
      line-height: @line-height-base;
    }
    .datetime {
-      font-size: 12px;
      margin-top: 4px;
+      font-size: 12px;
      line-height: @line-height-base;
    }
    .extra {
      float: right;
+      margin-top: -1.5px;
+      margin-right: 0;
      color: @text-color-secondary;
      font-weight: normal;
-      margin-right: 0;
-      margin-top: -1.5px;
    }
  }
  .loadMore {
    padding: 8px 0;
-    cursor: pointer;
    color: @primary-6;
    text-align: center;
+    cursor: pointer;
    &.loadedAll {
-      cursor: unset;
      color: rgba(0, 0, 0, 0.25);
+      cursor: unset;
    }
  }
 }

 .notFound {
-  text-align: center;
  padding: 73px 0 88px 0;
  color: @text-color-secondary;
+  text-align: center;
  img {
    display: inline-block;
-    margin-bottom: 16px;
    height: 76px;
+    margin-bottom: 16px;
  }
 }

 .clear {
  height: 46px;
+  color: @text-color;
  line-height: 46px;
  text-align: center;
-  color: @text-color;
-  border-radius: 0 0 @border-radius-base @border-radius-base;
  border-top: 1px solid @border-color-split;
-  transition: all 0.3s;
+  border-radius: 0 0 @border-radius-base @border-radius-base;
  cursor: pointer;
+  transition: all 0.3s;

  &:hover {
    color: @heading-color;
--- a/src/components/NoticeIcon/index.less
+++ b/src/components/NoticeIcon/index.less
@ -1,13 +1,13 @@
@import '~antd/lib/style/themes/default.less';

 .popover {
-  width: 336px;
  position: relative;
+  width: 336px;
 }

 .noticeButton {
-  cursor: pointer;
  display: inline-block;
+  cursor: pointer;
  transition: all 0.3s;
 }
 .icon {
--- a/src/components/NumberInfo/index.less
+++ b/src/components/NumberInfo/index.less
@ -2,51 +2,51 @@

 .numberInfo {
  .suffix {
+    margin-left: 4px;
    color: @text-color;
    font-size: 16px;
    font-style: normal;
-    margin-left: 4px;
  }
  .numberInfoTitle {
+    margin-bottom: 16px;
    color: @text-color;
    font-size: @font-size-lg;
-    margin-bottom: 16px;
    transition: all 0.3s;
  }
  .numberInfoSubTitle {
+    height: 22px;
+    overflow: hidden;
    color: @text-color-secondary;
    font-size: @font-size-base;
-    height: 22px;
    line-height: 22px;
-    overflow: hidden;
+    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
-    white-space: nowrap;
  }
  .numberInfoValue {
    margin-top: 4px;
-    font-size: 0;
    overflow: hidden;
+    font-size: 0;
+    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
-    white-space: nowrap;
    & > span {
-      color: @heading-color;
      display: inline-block;
-      line-height: 32px;
      height: 32px;
-      font-size: 24px;
      margin-right: 32px;
+      color: @heading-color;
+      font-size: 24px;
+      line-height: 32px;
    }
    .subTotal {
+      margin-right: 0;
      color: @text-color-secondary;
      font-size: @font-size-lg;
      vertical-align: top;
-      margin-right: 0;
      i {
+        margin-left: 4px;
        font-size: 12px;
        transform: scale(0.82);
-        margin-left: 4px;
      }
      :global {
        .anticon-caret-up {
--- a/src/components/PageHeader/index.less
+++ b/src/components/PageHeader/index.less
@ -1,8 +1,8 @@
@import '~antd/lib/style/themes/default.less';

 .pageHeader {
-  background: @component-background;
  padding: 16px 32px 0 32px;
+  background: @component-background;
  border-bottom: @border-width-base @border-style-base @border-color-split;
  .wide {
    max-width: 1200px;
@ -27,8 +27,8 @@
    :global {
      // 1px 可以让选中效果显示完成
      .ant-tabs-bar {
-        border-bottom: none;
        margin-bottom: 1px;
+        border-bottom: none;
      }
    }
  }
@ -38,22 +38,22 @@
    margin-right: 16px;
    padding-top: 1px;
    > img {
+      display: block;
      width: 28px;
      height: 28px;
      border-radius: @border-radius-base;
-      display: block;
    }
  }

  .title {
-    font-size: 20px;
-    font-weight: 500;
    color: @heading-color;
+    font-weight: 500;
+    font-size: 20px;
  }

  .action {
-    margin-left: 56px;
    min-width: 266px;
+    margin-left: 56px;

    :global {
      .ant-btn-group:not(:last-child),
@ -99,8 +99,8 @@
  }

  .extraContent {
-    margin-left: 88px;
    min-width: 242px;
+    margin-left: 88px;
  }
 }

--- a/src/components/Result/index.less
+++ b/src/components/Result/index.less
@ -1,17 +1,17 @@
@import '~antd/lib/style/themes/default.less';

 .result {
-  text-align: center;
  width: 72%;
  margin: 0 auto;
+  text-align: center;
  @media screen and (max-width: @screen-xs) {
    width: 100%;
  }

  .icon {
+    margin-bottom: 24px;
    font-size: 72px;
    line-height: 72px;
-    margin-bottom: 24px;

    & > .success {
      color: @success-color;
@ -23,25 +23,25 @@
  }

  .title {
-    font-size: 24px;
+    margin-bottom: 16px;
    color: @heading-color;
    font-weight: 500;
+    font-size: 24px;
    line-height: 32px;
-    margin-bottom: 16px;
  }

  .description {
+    margin-bottom: 24px;
+    color: @text-color-secondary;
    font-size: 14px;
    line-height: 22px;
-    color: @text-color-secondary;
-    margin-bottom: 24px;
  }

  .extra {
-    background: #fafafa;
    padding: 24px 40px;
-    border-radius: @border-radius-sm;
    text-align: left;
+    background: #fafafa;
+    border-radius: @border-radius-sm;

    @media screen and (max-width: @screen-xs) {
      padding: 18px 20px;
--- a/src/components/SelectLang/index.less
+++ b/src/components/SelectLang/index.less
@ -10,9 +10,9 @@
 }

 .dropDown {
-  cursor: pointer;
-  vertical-align: top;
  line-height: @layout-header-height;
+  vertical-align: top;
+  cursor: pointer;
  > i {
    font-size: 16px !important;
    transform: none !important;
--- a/src/components/SettingDrawer/ThemeColor.less
+++ b/src/components/SettingDrawer/ThemeColor.less
@ -1,21 +1,21 @@
 .themeColor {
-  overflow: hidden;
  margin-top: 24px;
+  overflow: hidden;
  .title {
-    font-size: 14px;
+    margin-bottom: 12px;
    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
    line-height: 22px;
-    margin-bottom: 12px;
  }
  .colorBlock {
+    float: left;
    width: 20px;
    height: 20px;
-    border-radius: 2px;
-    float: left;
-    cursor: pointer;
    margin-right: 8px;
-    text-align: center;
    color: #fff;
    font-weight: bold;
+    text-align: center;
+    border-radius: 2px;
+    cursor: pointer;
  }
 }
--- a/src/components/SettingDrawer/index.less
+++ b/src/components/SettingDrawer/index.less
@ -1,16 +1,16 @@
@import '~antd/lib/style/themes/default.less';

 .content {
+  position: relative;
  min-height: 100%;
  background: #fff;
-  position: relative;
 }

 .blockChecbox {
  display: flex;
  .item {
-    margin-right: 16px;
    position: relative;
+    margin-right: 16px;
    // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    border-radius: @border-radius-base;
    cursor: pointer;
@ -23,52 +23,52 @@
    top: 0;
    right: 0;
    width: 100%;
+    height: 100%;
    padding-top: 15px;
    padding-left: 24px;
-    height: 100%;
    color: @primary-color;
-    font-size: 14px;
    font-weight: bold;
+    font-size: 14px;
  }
 }

 .color_block {
+  display: inline-block;
  width: 38px;
  height: 22px;
  margin: 4px;
-  border-radius: 4px;
-  cursor: pointer;
  margin-right: 12px;
-  display: inline-block;
  vertical-align: middle;
+  border-radius: 4px;
+  cursor: pointer;
 }

 .title {
-  font-size: 14px;
+  margin-bottom: 12px;
  color: @heading-color;
+  font-size: 14px;
  line-height: 22px;
-  margin-bottom: 12px;
 }

 .handle {
  position: absolute;
  top: 240px;
-  background: @primary-color;
-  width: 48px;
-  height: 48px;
  right: 300px;
+  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
-  cursor: pointer;
-  pointer-events: auto;
-  z-index: 0;
-  text-align: center;
+  width: 48px;
+  height: 48px;
  font-size: 16px;
+  text-align: center;
+  background: @primary-color;
  border-radius: 4px 0 0 4px;
+  cursor: pointer;
+  pointer-events: auto;
 }

 .productionHint {
-  font-size: 12px;
  margin-top: 16px;
+  font-size: 12px;
 }
--- a/src/components/SiderMenu/index.less
+++ b/src/components/SiderMenu/index.less
@ -3,42 +3,42 @@
@nav-header-height: @layout-header-height;

 .logo {
-  height: @nav-header-height;
  position: relative;
-  line-height: @nav-header-height;
+  height: @nav-header-height;
  padding-left: (@menu-collapsed-width - 32px) / 2;
-  transition: all 0.3s;
-  background: #002140;
  overflow: hidden;
+  line-height: @nav-header-height;
+  background: #002140;
+  transition: all 0.3s;
  img {
    display: inline-block;
-    vertical-align: middle;
    height: 32px;
+    vertical-align: middle;
  }
  h1 {
-    color: white;
    display: inline-block;
-    vertical-align: middle;
-    font-size: 20px;
    margin: 0 0 0 12px;
-    font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    color: white;
    font-weight: 600;
+    font-size: 20px;
+    font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    vertical-align: middle;
  }
 }
 .sider {
-  min-height: 100vh;
-  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  position: relative;
  z-index: 10;
+  min-height: 100vh;
+  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  &.fixSiderBar {
-    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
    position: fixed;
    top: 0;
    left: 0;
+    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
    :global {
      .ant-menu-root {
-        overflow-y: auto;
        height: ~'calc(100vh - @{nav-header-height})';
+        overflow-y: auto;
      }
      .ant-menu-inline {
        border-right: 0;
@ -50,8 +50,8 @@
    }
  }
  &.light {
-    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
    background-color: white;
+    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
    .logo {
      background: white;
      box-shadow: 1px 1px 0 0 @border-color-split;
@ -66,8 +66,8 @@
 }

 .icon {
-  vertical-align: baseline;
  width: 14px;
+  vertical-align: baseline;
 }

 :global {
@ -87,15 +87,15 @@
      .sider-menu-item-img
      + span,
    & > .ant-menu-submenu > .ant-menu-submenu-title .sider-menu-item-img + span {
-      max-width: 0;
      display: inline-block;
+      max-width: 0;
      opacity: 0;
    }
  }
  .ant-menu-item .sider-menu-item-img + span,
  .ant-menu-submenu-title .sider-menu-item-img + span {
-    transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
    opacity: 1;
+    transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
  }
  .ant-drawer-left {
    .ant-drawer-body {
--- a/src/components/StandardFormRow/index.less
+++ b/src/components/StandardFormRow/index.less
@ -1,17 +1,17 @@
@import '~antd/lib/style/themes/default.less';

 .standardFormRow {
-  border-bottom: 1px dashed @border-color-split;
-  padding-bottom: 16px;
-  margin-bottom: 16px;
  display: flex;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed @border-color-split;
  :global {
    .ant-form-item {
      margin-right: 24px;
    }
    .ant-form-item-label label {
-      color: @text-color;
      margin-right: 0;
+      color: @text-color;
    }
    .ant-form-item-label,
    .ant-form-item-control {
@ -20,16 +20,16 @@
    }
  }
  .label {
+    flex: 0 0 auto;
+    margin-right: 24px;
    color: @heading-color;
    font-size: @font-size-base;
-    margin-right: 24px;
-    flex: 0 0 auto;
    text-align: right;
    & > span {
      display: inline-block;
      height: 32px;
      line-height: 32px;
-      &:after {
+      &::after {
        content: '：';
      }
    }
@ -45,9 +45,9 @@
 }

 .standardFormRowLast {
-  border: none;
-  padding-bottom: 0;
  margin-bottom: 0;
+  padding-bottom: 0;
+  border: none;
 }

 .standardFormRowBlock {
--- a/src/components/TagSelect/index.js
+++ b/src/components/TagSelect/index.js
@ -18,7 +18,7 @@ TagSelectOption.isTagSelectOption = true;
 class TagSelect extends Component {
  static propTypes = {
    actionsText: PropTypes.object,
-    hideCheckAll: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    hideCheckAll: PropTypes.bool,
  };

  static defaultProps = {
--- a/src/components/TagSelect/index.less
+++ b/src/components/TagSelect/index.less
@ -1,23 +1,23 @@
@import '~antd/lib/style/themes/default.less';

 .tagSelect {
-  user-select: none;
-  margin-left: -8px;
  position: relative;
-  overflow: hidden;
  max-height: 32px;
+  margin-left: -8px;
+  overflow: hidden;
  line-height: 32px;
  transition: all 0.3s;
+  user-select: none;
  :global {
    .ant-tag {
-      padding: 0 8px;
      margin-right: 24px;
+      padding: 0 8px;
      font-size: @font-size-base;
    }
  }
  &.expanded {
-    transition: all 0.3s;
    max-height: 200px;
+    transition: all 0.3s;
  }
  .trigger {
    position: absolute;
--- a/src/components/TopNavHeader/index.less
+++ b/src/components/TopNavHeader/index.less
@ -1,15 +1,15 @@
@import '~antd/lib/style/themes/default.less';

 .head {
+  position: relative;
  width: 100%;
-  transition: background 0.3s, width 0.2s;
  height: @layout-header-height;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-  position: relative;
+  transition: background 0.3s, width 0.2s;
  :global {
    .ant-menu-submenu.ant-menu-submenu-horizontal {
-      line-height: @layout-header-height;
      height: 100%;
+      line-height: @layout-header-height;
      .ant-menu-submenu-title {
        height: 100%;
      }
@ -28,8 +28,8 @@
      padding-left: 0;
    }
    .left {
-      flex: 1;
      display: flex;
+      flex: 1;
    }
    .right {
      width: 324px;
@ -38,24 +38,24 @@
 }

 .logo {
+  position: relative;
  width: 165px;
  height: @layout-header-height;
-  position: relative;
+  overflow: hidden;
  line-height: @layout-header-height;
  transition: all 0.3s;
-  overflow: hidden;
  img {
    display: inline-block;
-    vertical-align: middle;
    height: 32px;
+    vertical-align: middle;
  }
  h1 {
-    color: #fff;
    display: inline-block;
-    vertical-align: top;
-    font-size: 16px;
    margin: 0 0 0 12px;
+    color: #fff;
    font-weight: 400;
+    font-size: 16px;
+    vertical-align: top;
  }
 }

@ -66,7 +66,7 @@
 }

 .menu {
-  border: none;
  height: @layout-header-height;
  line-height: @layout-header-height;
+  border: none;
 }
--- a/src/components/Trend/index.less
+++ b/src/components/Trend/index.less
@ -7,9 +7,9 @@

  .up,
  .down {
-    margin-left: 4px;
    position: relative;
    top: 1px;
+    margin-left: 4px;
    i {
      font-size: 12px;
      transform: scale(0.83);
@ -19,8 +19,8 @@
    color: @red-6;
  }
  .down {
-    color: @green-6;
    top: -1px;
+    color: @green-6;
  }

  &.trendItemGrey .up,
--- a/src/layouts/Header.less
+++ b/src/layouts/Header.less
@ -2,7 +2,7 @@
  position: fixed;
  top: 0;
  right: 0;
-  width: 100%;
  z-index: 9;
+  width: 100%;
  transition: width 0.2s;
 }
--- a/src/layouts/UserLayout.less
+++ b/src/layouts/UserLayout.less
@ -9,18 +9,18 @@
 }

 .lang {
-  text-align: right;
  width: 100%;
  height: 40px;
  line-height: 44px;
+  text-align: right;
  :global(.ant-dropdown-trigger) {
    margin-right: 24px;
  }
 }

 .content {
-  padding: 32px 0;
  flex: 1;
+  padding: 32px 0;
 }

@media (min-width: @screen-md-min) {
@ -50,22 +50,22 @@

 .logo {
  height: 44px;
-  vertical-align: top;
  margin-right: 16px;
+  vertical-align: top;
 }

 .title {
-  font-size: 33px;
-  color: @heading-color;
-  font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
-  font-weight: 600;
  position: relative;
  top: 2px;
+  color: @heading-color;
+  font-weight: 600;
+  font-size: 33px;
+  font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
 }

 .desc {
-  font-size: @font-size-base;
-  color: @text-color-secondary;
  margin-top: 12px;
  margin-bottom: 40px;
+  color: @text-color-secondary;
+  font-size: @font-size-base;
 }
--- a/src/pages/Account/Center/Center.less
+++ b/src/pages/Account/Center/Center.less
@ -2,8 +2,8 @@
@import '~@/utils/utils.less';

 .avatarHolder {
-  text-align: center;
  margin-bottom: 24px;
+  text-align: center;

  & > img {
    width: 104px;
@ -12,19 +12,19 @@
  }

  .name {
+    margin-bottom: 4px;
+    color: @heading-color;
+    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
-    font-weight: 500;
-    color: @heading-color;
-    margin-bottom: 4px;
  }
 }

 .detail {
  p {
+    position: relative;
    margin-bottom: 8px;
    padding-left: 26px;
-    position: relative;

    &:last-child {
      margin-bottom: 0;
@ -33,10 +33,10 @@

  i {
    position: absolute;
-    height: 14px;
-    width: 14px;
-    left: 0;
    top: 4px;
+    left: 0;
+    width: 14px;
+    height: 14px;
    background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);

    &.title {
@ -55,9 +55,9 @@

 .tagsTitle,
 .teamTitle {
-  font-weight: 500;
-  color: @heading-color;
  margin-bottom: 12px;
+  color: @heading-color;
+  font-weight: 500;
 }

 .tags {
--- a/src/pages/Account/Settings/BaseView.less
+++ b/src/pages/Account/Settings/BaseView.less
@ -5,18 +5,18 @@
  padding-top: 12px;

  .left {
-    max-width: 448px;
    min-width: 224px;
+    max-width: 448px;
  }
  .right {
    flex: 1;
    padding-left: 104px;
    .avatar_title {
      height: 22px;
-      font-size: @font-size-base;
+      margin-bottom: 8px;
      color: @heading-color;
+      font-size: @font-size-base;
      line-height: 22px;
-      margin-bottom: 8px;
    }
    .avatar {
      width: 144px;
@ -39,11 +39,11 @@
    flex-direction: column-reverse;

    .right {
-      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 448px;
+      padding: 20px;
      .avatar_title {
        display: none;
      }
--- a/src/pages/Account/Settings/GeographicView.less
+++ b/src/pages/Account/Settings/GeographicView.less
@ -2,12 +2,12 @@

 .row {
  .item {
-    max-width: 220px;
    width: 50%;
+    max-width: 220px;
  }
  .item:first-child {
-    margin-right: 8px;
    width: ~'calc(50% - 8px)';
+    margin-right: 8px;
  }
 }

--- a/src/pages/Account/Settings/Info.less
+++ b/src/pages/Account/Settings/Info.less
@ -1,13 +1,13 @@
@import '~antd/lib/style/themes/default.less';

 .main {
+  display: flex;
  width: 100%;
  height: 100%;
-  background-color: @body-background;
-  display: flex;
  padding-top: 16px;
  padding-bottom: 16px;
  overflow: auto;
+  background-color: @body-background;
  .leftmenu {
    width: 224px;
    border-right: @border-width-base @border-style-base @border-color-split;
@ -22,16 +22,16 @@
  }
  .right {
    flex: 1;
-    padding-left: 40px;
-    padding-right: 40px;
    padding-top: 8px;
+    padding-right: 40px;
    padding-bottom: 8px;
+    padding-left: 40px;
    .title {
-      font-size: 20px;
+      margin-bottom: 12px;
      color: @heading-color;
-      line-height: 28px;
      font-weight: 500;
-      margin-bottom: 12px;
+      font-size: 20px;
+      line-height: 28px;
    }
  }
  :global {
@ -48,19 +48,19 @@
  .ant-list-item-meta {
    // 账号绑定图标
    .taobao {
-      color: #ff4000;
      display: block;
+      color: #ff4000;
      font-size: 48px;
      line-height: 48px;
      border-radius: @border-radius-base;
    }
    .dingding {
-      background-color: #2eabff;
+      margin: 2px;
+      padding: 6px;
      color: #fff;
      font-size: 32px;
      line-height: 32px;
-      padding: 6px;
-      margin: 2px;
+      background-color: #2eabff;
      border-radius: @border-radius-base;
    }
    .alipay {
--- a/src/pages/Account/Settings/PhoneView.less
+++ b/src/pages/Account/Settings/PhoneView.less
@ -1,11 +1,11 @@
@import '~antd/lib/style/themes/default.less';

 .area_code {
+  width: 30%;
  max-width: 128px;
  margin-right: 8px;
-  width: 30%;
 }
 .phone_number {
-  max-width: 312px;
  width: ~'calc(70% - 8px)';
+  max-width: 312px;
 }
--- a/src/pages/Dashboard/Analysis.less
+++ b/src/pages/Dashboard/Analysis.less
@ -3,10 +3,10 @@

 .iconGroup {
  i {
-    transition: color 0.32s;
+    margin-left: 16px;
    color: @text-color-secondary;
    cursor: pointer;
-    margin-left: 16px;
+    transition: color 0.32s;
    &:hover {
      color: @text-color;
    }
@ -19,37 +19,38 @@
  list-style: none;
  li {
    .clearfix();
-    margin-top: 16px;
+
    display: flex;
    align-items: center;
+    margin-top: 16px;
    span {
      color: @text-color;
      font-size: 14px;
      line-height: 22px;
    }
    .rankingItemNumber {
-      background-color: @background-color-base;
-      border-radius: 20px;
      display: inline-block;
-      font-size: 12px;
-      font-weight: 600;
-      margin-right: 16px;
+      width: 20px;
      height: 20px;
+      margin-top: 1.5px;
+      margin-right: 16px;
+      font-weight: 600;
+      font-size: 12px;
      line-height: 20px;
-      width: 20px;
      text-align: center;
-      margin-top: 1.5px;
+      background-color: @background-color-base;
+      border-radius: 20px;
      &.active {
-        background-color: #314659;
        color: #fff;
+        background-color: #314659;
      }
    }
    .rankingItemTitle {
      flex: 1;
+      margin-right: 8px;
+      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
-      overflow: hidden;
-      margin-right: 8px;
    }
  }
 }
@ -58,8 +59,8 @@
  display: inline-block;
  margin-right: 24px;
  a {
-    color: @text-color;
    margin-left: 24px;
+    color: @text-color;
    &:hover {
      color: @primary-color;
    }
@ -117,14 +118,14 @@
      border-bottom: none;
    }
    .ant-tabs-nav-container-scrolling {
-      padding-left: 40px;
      padding-right: 40px;
+      padding-left: 40px;
    }
-    .ant-tabs-tab-prev-icon:before {
+    .ant-tabs-tab-prev-icon::before {
      position: relative;
      left: 6px;
    }
-    .ant-tabs-tab-next-icon:before {
+    .ant-tabs-tab-next-icon::before {
      position: relative;
      right: 6px;
    }
@ -139,16 +140,16 @@
    height: calc(100% - 24px);
  }
  div[class^='ant-col']:last-child {
+    position: absolute\9;
    right: 0\9;
    height: 100%\9;
-    position: absolute\9;
  }
  :global {
    .ant-row {
+      position: relative\9;
      display: flex;
      display: block\9;
      flex-flow: row wrap;
-      position: relative\9;
    }
  }
 }
--- a/src/pages/Dashboard/Monitor.less
+++ b/src/pages/Dashboard/Monitor.less
@ -2,8 +2,8 @@
@import '~@/utils/utils.less';

 .mapChart {
-  padding-top: 24px;
  height: 452px;
+  padding-top: 24px;
  text-align: center;
  img {
    display: inline-block;
--- a/src/pages/Dashboard/Workplace.less
+++ b/src/pages/Dashboard/Workplace.less
@ -17,65 +17,66 @@
    flex: 0 1 72px;
    margin-bottom: 8px;
    & > span {
-      border-radius: 72px;
      display: block;
      width: 72px;
      height: 72px;
+      border-radius: 72px;
    }
  }
  .content {
    position: relative;
    top: 4px;
-    margin-left: 24px;
    flex: 1 1 auto;
+    margin-left: 24px;
    color: @text-color-secondary;
    line-height: 22px;
    .contentTitle {
+      margin-bottom: 12px;
+      color: @heading-color;
+      font-weight: 500;
      font-size: 20px;
      line-height: 28px;
-      font-weight: 500;
-      color: @heading-color;
-      margin-bottom: 12px;
    }
  }
 }

 .extraContent {
  .clearfix();
+
  float: right;
  white-space: nowrap;
  .statItem {
-    padding: 0 32px;
    position: relative;
    display: inline-block;
+    padding: 0 32px;
    > p:first-child {
+      margin-bottom: 4px;
      color: @text-color-secondary;
      font-size: @font-size-base;
      line-height: 22px;
-      margin-bottom: 4px;
    }
    > p {
+      margin: 0;
      color: @heading-color;
      font-size: 30px;
      line-height: 38px;
-      margin: 0;
      > span {
        color: @text-color-secondary;
        font-size: 20px;
      }
    }
-    &:after {
-      background-color: @border-color-split;
+    &::after {
      position: absolute;
      top: 8px;
      right: 0;
      width: 1px;
      height: 40px;
+      background-color: @border-color-split;
      content: '';
    }
    &:last-child {
      padding-right: 0;
-      &:after {
+      &::after {
        display: none;
      }
    }
@ -85,16 +86,16 @@
 .members {
  a {
    display: block;
-    margin: 12px 0;
    height: 24px;
+    margin: 12px 0;
    color: @text-color;
    transition: all 0.3s;
    .textOverflow();
    .member {
+      margin-left: 12px;
      font-size: @font-size-base;
      line-height: 24px;
      vertical-align: top;
-      margin-left: 12px;
    }
    &:hover {
      color: @primary-color;
@ -105,22 +106,22 @@
 .projectList {
  :global {
    .ant-card-meta-description {
-      color: @text-color-secondary;
      height: 44px;
-      line-height: 22px;
      overflow: hidden;
+      color: @text-color-secondary;
+      line-height: 22px;
    }
  }
  .cardTitle {
    font-size: 0;
    a {
-      color: @heading-color;
+      display: inline-block;
+      height: 24px;
      margin-left: 12px;
+      color: @heading-color;
+      font-size: @font-size-base;
      line-height: 24px;
-      height: 24px;
-      display: inline-block;
      vertical-align: top;
-      font-size: @font-size-base;
      &:hover {
        color: @primary-color;
      }
@ -131,25 +132,25 @@
  }
  .projectItemContent {
    display: flex;
+    height: 20px;
    margin-top: 8px;
    overflow: hidden;
    font-size: 12px;
-    height: 20px;
    line-height: 20px;
    .textOverflow();
    a {
-      color: @text-color-secondary;
      display: inline-block;
      flex: 1 1 0;
+      color: @text-color-secondary;
      .textOverflow();
      &:hover {
        color: @primary-color;
      }
    }
    .datetime {
-      color: @disabled-color;
      flex: 0 0 auto;
      float: right;
+      color: @disabled-color;
    }
  }
 }
@ -186,7 +187,7 @@
    .statItem {
      padding: 0 16px;
      text-align: left;
-      &:after {
+      &::after {
        display: none;
      }
    }
--- a/src/pages/Forms/StepForm/style.less
+++ b/src/pages/Forms/StepForm/style.less
@ -1,8 +1,8 @@
@import '~antd/lib/style/themes/default.less';

 .stepForm {
-  margin: 40px auto 0;
  max-width: 500px;
+  margin: 40px auto 0;
 }

 .stepFormText {
@ -16,8 +16,8 @@
 }

 .result {
-  margin: 0 auto;
  max-width: 560px;
+  margin: 0 auto;
  padding: 24px 0 8px;
 }

@ -25,9 +25,9 @@
  padding: 0 56px;
  color: @text-color-secondary;
  h3 {
-    font-size: 16px;
    margin: 0 0 12px 0;
    color: @text-color-secondary;
+    font-size: 16px;
    line-height: 32px;
  }
  h4 {
@ -57,9 +57,9 @@
    }
  }
  .label {
+    padding-right: 8px;
    color: @heading-color;
    text-align: right;
-    padding-right: 8px;
    @media screen and (max-width: @screen-sm) {
      text-align: left;
    }
@ -67,9 +67,9 @@
 }

 .money {
-  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 500;
  font-size: 20px;
+  font-family: 'Helvetica Neue', sans-serif;
  line-height: 14px;
 }

--- a/src/pages/Forms/style.less
+++ b/src/pages/Forms/style.less
@ -5,9 +5,9 @@
 }

 .heading {
+  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 22px;
-  margin: 0 0 16px 0;
 }

 .steps:global(.ant-steps) {
@ -16,9 +16,9 @@
 }

 .errorIcon {
-  cursor: pointer;
-  color: @error-color;
  margin-right: 24px;
+  color: @error-color;
+  cursor: pointer;
  i {
    margin-right: 4px;
  }
@ -27,18 +27,18 @@
 .errorPopover {
  :global {
    .ant-popover-inner-content {
-      padding: 0;
+      min-width: 256px;
      max-height: 290px;
+      padding: 0;
      overflow: auto;
-      min-width: 256px;
    }
  }
 }

 .errorListItem {
+  padding: 8px 16px;
  list-style: none;
  border-bottom: 1px solid @border-color-split;
-  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
@ -48,16 +48,16 @@
    border: 0;
  }
  .errorIcon {
-    color: @error-color;
    float: left;
    margin-top: 4px;
    margin-right: 12px;
    padding-bottom: 22px;
+    color: @error-color;
  }
  .errorField {
-    font-size: 12px;
-    color: @text-color-secondary;
    margin-top: 2px;
+    color: @text-color-secondary;
+    font-size: 12px;
  }
 }

--- a/src/pages/List/Applications.less
+++ b/src/pages/List/Applications.less
@ -20,23 +20,24 @@
  }
  .cardInfo {
    .clearfix();
+
    margin-top: 16px;
    margin-left: 40px;
    & > div {
      position: relative;
-      text-align: left;
      float: left;
      width: 50%;
+      text-align: left;
      p {
-        line-height: 32px;
-        font-size: 24px;
        margin: 0;
+        font-size: 24px;
+        line-height: 32px;
      }
      p:first-child {
+        margin-bottom: 4px;
        color: @text-color-secondary;
        font-size: 12px;
        line-height: 20px;
-        margin-bottom: 4px;
      }
    }
  }
--- a/src/pages/List/BasicList.less
+++ b/src/pages/List/BasicList.less
@ -7,15 +7,15 @@
      border-bottom: none;
    }
    .ant-card-head-title {
-      line-height: 32px;
      padding: 24px 0;
+      line-height: 32px;
    }
    .ant-card-extra {
      padding: 24px 0;
    }
    .ant-list-pagination {
-      text-align: right;
      margin-top: 24px;
+      text-align: right;
    }
    .ant-avatar-lg {
      width: 48px;
@ -27,35 +27,35 @@
    position: relative;
    text-align: center;
    & > span {
-      color: @text-color-secondary;
      display: inline-block;
+      margin-bottom: 4px;
+      color: @text-color-secondary;
      font-size: @font-size-base;
      line-height: 22px;
-      margin-bottom: 4px;
    }
    & > p {
+      margin: 0;
      color: @heading-color;
      font-size: 24px;
      line-height: 32px;
-      margin: 0;
    }
    & > em {
-      background-color: @border-color-split;
      position: absolute;
-      height: 56px;
-      width: 1px;
      top: 0;
      right: 0;
+      width: 1px;
+      height: 56px;
+      background-color: @border-color-split;
    }
  }
  .listContent {
    font-size: 0;
    .listContentItem {
-      color: @text-color-secondary;
      display: inline-block;
-      vertical-align: middle;
-      font-size: @font-size-base;
      margin-left: 40px;
+      color: @text-color-secondary;
+      font-size: @font-size-base;
+      vertical-align: middle;
      > span {
        line-height: 20px;
      }
@ -67,8 +67,8 @@
    }
  }
  .extraContentSearch {
-    margin-left: 16px;
    width: 272px;
+    margin-left: 16px;
  }
 }

@ -103,8 +103,8 @@
@media screen and (max-width: @screen-sm) {
  .standardList {
    .extraContentSearch {
-      margin-left: 0;
      width: 100%;
+      margin-left: 0;
    }
    .headerInfo {
      margin-bottom: 16px;
@ -180,8 +180,8 @@
    .ant-form-item {
      margin-bottom: 12px;
      &:last-child {
-        padding-top: 4px;
        margin-bottom: 32px;
+        padding-top: 4px;
      }
    }
  }
--- a/src/pages/List/CardList.less
+++ b/src/pages/List/CardList.less
@ -9,9 +9,9 @@
      .ant-card-meta-title {
        margin-bottom: 12px;
        & > a {
-          color: @heading-color;
          display: inline-block;
          max-width: 100%;
+          color: @heading-color;
        }
      }
      .ant-card-actions {
@ -36,21 +36,21 @@
 }

 .extraImg {
+  width: 195px;
  margin-top: -60px;
  text-align: center;
-  width: 195px;
  img {
    width: 100%;
  }
 }

 .newButton {
+  width: 100%;
+  height: 188px;
+  color: @text-color-secondary;
  background-color: #fff;
  border-color: @border-color-base;
  border-radius: @border-radius-sm;
-  color: @text-color-secondary;
-  width: 100%;
-  height: 188px;
 }

 .cardAvatar {
@ -76,8 +76,8 @@
    }
  }
  img {
-    vertical-align: middle;
    margin-right: 8px;
+    vertical-align: middle;
  }
 }

@ -100,8 +100,8 @@
  }
  .contentLink {
    position: absolute;
-    left: 0;
    bottom: -4px;
+    left: 0;
    width: 1000px;
    a {
      margin-right: 16px;
--- a/src/pages/List/Projects.less
+++ b/src/pages/List/Projects.less
@ -9,15 +9,15 @@
      .ant-card-meta-title {
        margin-bottom: 4px;
        & > a {
-          color: @heading-color;
          display: inline-block;
          max-width: 100%;
+          color: @heading-color;
        }
      }
      .ant-card-meta-description {
        height: 44px;
-        line-height: 22px;
        overflow: hidden;
+        line-height: 22px;
      }
    }

@ -32,13 +32,13 @@

  .cardItemContent {
    display: flex;
+    height: 20px;
    margin-top: 16px;
    margin-bottom: -4px;
    line-height: 20px;
-    height: 20px;
    & > span {
-      color: @text-color-secondary;
      flex: 1;
+      color: @text-color-secondary;
      font-size: 12px;
    }
    .avatarList {
--- a/src/pages/List/TableList.less
+++ b/src/pages/List/TableList.less
@ -13,13 +13,13 @@
 .tableListForm {
  :global {
    .ant-form-item {
-      margin-bottom: 24px;
-      margin-right: 0;
      display: flex;
+      margin-right: 0;
+      margin-bottom: 24px;
      > .ant-form-item-label {
        width: auto;
-        line-height: 32px;
        padding-right: 8px;
+        line-height: 32px;
      }
      .ant-form-item-control {
        line-height: 32px;
@ -31,8 +31,8 @@
  }
  .submitButtons {
    display: block;
-    white-space: nowrap;
    margin-bottom: 24px;
+    white-space: nowrap;
  }
 }

--- a/src/pages/Profile/AdvancedProfile.less
+++ b/src/pages/Profile/AdvancedProfile.less
@ -14,14 +14,14 @@

 .noData {
  color: @disabled-color;
-  text-align: center;
-  line-height: 64px;
  font-size: 16px;
+  line-height: 64px;
+  text-align: center;
  i {
-    font-size: 24px;
-    margin-right: 16px;
    position: relative;
    top: 3px;
+    margin-right: 16px;
+    font-size: 24px;
  }
 }

@ -31,10 +31,10 @@
 }

 .stepDescription {
-  font-size: 14px;
  position: relative;
  left: 38px;
  padding-top: 8px;
+  font-size: 14px;
  text-align: left;

  > div {
--- a/src/pages/Profile/BasicProfile.less
+++ b/src/pages/Profile/BasicProfile.less
@ -1,8 +1,8 @@
@import '~antd/lib/style/themes/default.less';

 .title {
+  margin-bottom: 16px;
  color: @heading-color;
-  font-size: 16px;
  font-weight: 500;
-  margin-bottom: 16px;
+  font-size: 16px;
 }
--- a/src/pages/User/Login.less
+++ b/src/pages/User/Login.less
@ -8,9 +8,9 @@
  }

  .icon {
-    font-size: 24px;
-    color: rgba(0, 0, 0, 0.2);
    margin-left: 16px;
+    color: rgba(0, 0, 0, 0.2);
+    font-size: 24px;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.3s;
@ -21,9 +21,9 @@
  }

  .other {
-    text-align: left;
    margin-top: 24px;
    line-height: 22px;
+    text-align: left;

    .register {
      float: right;
--- a/src/pages/User/Register.less
+++ b/src/pages/User/Register.less
@ -11,8 +11,8 @@
  }

  h3 {
-    font-size: 16px;
    margin-bottom: 20px;
+    font-size: 16px;
  }

  .getCaptcha {
--- a/src/utils/utils.less
+++ b/src/utils/utils.less
@ -1,34 +1,34 @@
 .textOverflow() {
  overflow: hidden;
+  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
-  white-space: nowrap;
 }

 .textOverflowMulti(@line: 3, @bg: #fff) {
-  overflow: hidden;
  position: relative;
-  line-height: 1.5em;
  max-height: @line * 1.5em;
-  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
-  &:before {
-    background: @bg;
-    content: '...';
-    padding: 0 1px;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
    position: absolute;
    right: 14px;
    bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
  }
-  &:after {
-    background: white;
-    content: '';
-    margin-top: 0.2em;
+  &::after {
    position: absolute;
    right: 14px;
    width: 1em;
    height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
  }
 }

@ -36,15 +36,15 @@
 // ------------------------
 .clearfix() {
  zoom: 1;
-  &:before,
-  &:after {
+  &::before,
+  &::after {
    content: ' ';
    display: table;
  }
-  &:after {
+  &::after {
    clear: both;
-    visibility: hidden;
-    font-size: 0;
    height: 0;
+    font-size: 0;
+    visibility: hidden;
  }
 }