style: background to background-color

index.html

@@ -26,7 +26,7 @@
     <div id="app">
       <style>
         html[data-theme='dark'] .app-loading {
-          background: #2c344a;
+          background-color: #2c344a;
         }
 
         html[data-theme='dark'] .app-loading .app-loading-title {
@@ -40,7 +40,7 @@
           justify-content: center;
           align-items: center;
           flex-direction: column;
-          background: #f4f7f9;
+          background-color: #f4f7f9;
         }
 
         .app-loading .app-loading-wrap {

package.json

@@ -59,7 +59,7 @@
   "devDependencies": {
     "@commitlint/cli": "^12.1.1",
     "@commitlint/config-conventional": "^12.1.1",
-    "@iconify/json": "^1.1.328",
+    "@iconify/json": "^1.1.329",
     "@purge-icons/generated": "^0.7.0",
     "@types/crypto-js": "^4.0.1",
     "@types/fs-extra": "^9.0.11",
@@ -122,7 +122,7 @@
   "resolutions": {
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it",
     "bin-wrapper": "npm:bin-wrapper-china",
-    "rollup": "^2.45.1",
+    "rollup": "^2.45.2",
     "esbuild": "^0.11.9"
   },
   "repository": {

src/components/Application/src/search/AppSearchFooter.vue

@@ -42,7 +42,7 @@
     padding: 0 16px;
     font-size: 12px;
     color: #666;
-    background: @component-background;
+    background-color: @component-background;
     border-top: 1px solid @border-color-base;
     border-radius: 0 0 16px 16px;
     align-items: center;
@@ -54,7 +54,7 @@
       height: 18px;
       padding-bottom: 2px;
       margin-right: 0.4em;
-      background: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
+      background-color: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
       border-radius: 2px;
       box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
         0 1px 2px 1px rgba(30, 35, 90, 0.4);

src/components/Application/src/search/AppSearchModal.vue

@@ -147,7 +147,7 @@
     width: 100%;
     height: 100%;
     padding-top: 50px;
-    background: rgba(0, 0, 0, 0.25);
+    background-color: rgba(0, 0, 0, 0.25);
     justify-content: center;
 
     &--mobile {
@@ -191,7 +191,7 @@
       position: relative;
       width: 632px;
       margin: 0 auto auto auto;
-      background: @component-background;
+      background-color: @component-background;
       border-radius: 16px;
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
       flex-direction: column;
@@ -251,7 +251,7 @@
         font-size: 14px;
         color: @text-color-base;
         cursor: pointer;
-        background: @component-background;
+        background-color: @component-background;
         border-radius: 4px;
         box-shadow: 0 1px 3px 0 #d4d9e1;
         align-items: center;
@@ -264,7 +264,7 @@
 
         &--active {
           color: #fff;
-          background: @primary-color;
+          background-color: @primary-color;
 
           .@{prefix-cls}-list__item-enter {
             opacity: 1;

src/components/Basic/src/BasicTitle.vue

@@ -63,7 +63,7 @@
       width: 3px;
       height: 16px;
       margin-right: 4px;
-      background: @primary-color;
+      background-color: @primary-color;
       content: '';
     }
 

src/components/Container/src/collapse/CollapseContainer.vue

@@ -101,7 +101,7 @@
   @prefix-cls: ~'@{namespace}-collapse-container';
 
   .@{prefix-cls} {
-    background: @component-background;
+    background-color: @component-background;
     border-radius: 2px;
     transition: all 0.3s ease-in-out;
 

src/components/ContextMenu/src/index.less

@@ -22,7 +22,7 @@
 
     &:not(.ant-menu-item-disabled):hover {
       color: @text-color-base;
-      background: @item-hover-bg;
+      background-color: @item-hover-bg;
     }
   }
 }

src/components/Drawer/src/components/DrawerFooter.vue

@@ -74,7 +74,7 @@
     width: 100%;
     padding: 0 12px 0 20px;
     text-align: right;
-    background: @component-background;
+    background-color: @component-background;
     border-top: 1px solid @border-color-base;
 
     > * {

src/components/Icon/src/index.vue

@@ -112,7 +112,7 @@
     display: block;
     min-width: 1em;
     min-height: 1em;
-    background: @iconify-bg-color;
+    background-color: @iconify-bg-color;
     border-radius: 100%;
   }
 </style>

src/components/Loading/src/index.vue

@@ -51,7 +51,7 @@
     height: 100%;
     justify-content: center;
     align-items: center;
-    background: rgba(240, 242, 245, 0.4);
+    background-color: rgba(240, 242, 245, 0.4);
 
     &.absolute {
       position: absolute;
@@ -63,7 +63,7 @@
 
   html[data-theme='dark'] {
     .full-loading {
-      background: @modal-mask-bg;
+      background-color: @modal-mask-bg;
     }
   }
 </style>

src/components/Menu/src/index.less

@@ -17,7 +17,7 @@
       align-items: center;
 
       &.ant-menu-dark {
-        background: transparent;
+        background-color: transparent;
 
         .ant-menu-submenu:hover,
         .ant-menu-item-open,
@@ -30,7 +30,7 @@
         .ant-menu-submenu-active,
         .ant-menu-submenu-title:hover {
           color: #fff;
-          background: @top-menu-active-bg-color !important;
+          background-color: @top-menu-active-bg-color !important;
         }
 
         .ant-menu-item:hover,
@@ -38,15 +38,15 @@
         .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
         .ant-menu-submenu-active,
         .ant-menu-submenu-title:hover {
-          background: @top-menu-active-bg-color;
+          background-color: @top-menu-active-bg-color;
         }
 
         .@{basic-menu-prefix-cls}-item__level1 {
-          background: transparent;
+          background-color: transparent;
 
           &.ant-menu-item-selected,
           &.ant-menu-submenu-selected {
-            background: @top-menu-active-bg-color !important;
+            background-color: @top-menu-active-bg-color !important;
           }
         }
 

src/components/Page/src/PageFooter.vue

@@ -38,7 +38,7 @@
     align-items: center;
     padding: 0 24px;
     line-height: 44px;
-    background: @component-background;
+    background-color: @component-background;
     border-top: 1px solid @border-color-base;
     box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
       0 -12px 48px 16px rgba(0, 0, 0, 0.03);

src/components/Page/src/PageWrapper.vue

@@ -197,7 +197,7 @@
     }
 
     &-content-bg {
-      background: @component-background;
+      background-color: @component-background;
     }
 
     &--dense {

src/components/Preview/src/index.vue

@@ -88,7 +88,7 @@
     }
 
     .ant-image-preview-operations {
-      background: rgba(0, 0, 0, 0.4);
+      background-color: rgba(0, 0, 0, 0.4);
     }
   }
 </style>

src/components/SimpleMenu/src/components/menu.less

@@ -13,7 +13,7 @@
     bottom: 0;
     display: block;
     width: 2px;
-    background: @primary-color;
+    background-color: @primary-color;
     content: '';
   }
 }
@@ -62,7 +62,7 @@
 
         &-selected {
           color: #fff;
-          background: @primary-color !important;
+          background-color: @primary-color !important;
         }
       }
     }
@@ -79,7 +79,7 @@
         &-selected {
           z-index: 2;
           color: @primary-color;
-          background: fade(@primary-color, 10);
+          background-color: fade(@primary-color, 10);
 
           .light-border();
         }
@@ -107,7 +107,7 @@
     // }
 
     &-light {
-      background: #fff;
+      background-color: #fff;
 
       .@{menu-prefix-cls}-submenu-active {
         color: @primary-color !important;
@@ -219,7 +219,7 @@
       &-active:not(.@{menu-prefix-cls}-submenu) {
         z-index: 2;
         color: @primary-color;
-        background: fade(@primary-color, 10);
+        background-color: fade(@primary-color, 10);
 
         .light-border();
       }
@@ -232,7 +232,7 @@
       > li.@{menu-prefix-cls}-item-active,
       .@{menu-prefix-cls}-submenu-active {
         position: relative;
-        background: fade(@primary-color, 5);
+        background-color: fade(@primary-color, 5);
 
         &::after {
           display: none;
@@ -244,7 +244,7 @@
           left: 0;
           width: 3px;
           height: 100%;
-          background: @primary-color;
+          background-color: @primary-color;
           content: '';
         }
       }
@@ -255,7 +255,7 @@
       color: @menu-dark-subsidiary-color;
       &-active:not(.@{menu-prefix-cls}-submenu) {
         color: #fff !important;
-        background: @primary-color !important;
+        background-color: @primary-color !important;
       }
 
       &:hover {
@@ -276,7 +276,7 @@
           left: 0;
           width: 3px;
           height: 100%;
-          background: @primary-color;
+          background-color: @primary-color;
           content: '';
         }
 
@@ -301,7 +301,7 @@
     &-dark&-vertical &-opened {
       .@{menu-prefix-cls}-submenu-has-parent-submenu {
         .@{menu-prefix-cls}-submenu-title {
-          background: transparent;
+          background-color: transparent;
         }
       }
     }

src/components/SimpleMenu/src/index.less

@@ -59,19 +59,19 @@
     }
 
     &--primary {
-      background: @primary-color;
+      background-color: @primary-color;
     }
 
     &--error {
-      background: @error-color;
+      background-color: @error-color;
     }
 
     &--success {
-      background: @success-color;
+      background-color: @success-color;
     }
 
     &--warn {
-      background: @warning-color;
+      background-color: @warning-color;
     }
   }
 }

src/components/StrengthMeter/src/index.vue

@@ -82,7 +82,7 @@
       position: relative;
       height: 6px;
       margin: 10px auto 6px;
-      background: @disabled-color;
+      background-color: @disabled-color;
       border-radius: 6px;
 
       &::before,
@@ -92,7 +92,7 @@
         display: block;
         width: 20%;
         height: inherit;
-        background: transparent;
+        background-color: transparent;
         border-color: @white;
         border-style: solid;
         border-width: 0 5px 0 5px;
@@ -111,33 +111,33 @@
         position: absolute;
         width: 0;
         height: inherit;
-        background: transparent;
+        background-color: transparent;
         border-radius: inherit;
         transition: width 0.5s ease-in-out, background 0.25s;
 
         &[data-score='0'] {
           width: 20%;
-          background: darken(@error-color, 10%);
+          background-color: darken(@error-color, 10%);
         }
 
         &[data-score='1'] {
           width: 40%;
-          background: @error-color;
+          background-color: @error-color;
         }
 
         &[data-score='2'] {
           width: 60%;
-          background: @warning-color;
+          background-color: @warning-color;
         }
 
         &[data-score='3'] {
           width: 80%;
-          background: fade(@success-color, 50%);
+          background-color: fade(@success-color, 50%);
         }
 
         &[data-score='4'] {
           width: 100%;
-          background: @success-color;
+          background-color: @success-color;
         }
       }
     }

src/components/Table/src/BasicTable.vue

@@ -302,7 +302,7 @@
     .@{prefix-cls} {
       &-row__striped {
         td {
-          background: #fafafa;
+          background-color: #fafafa;
         }
       }
     }
@@ -312,7 +312,7 @@
     .@{prefix-cls} {
       &-row__striped {
         td {
-          background: rgb(255 255 255 / 4%);
+          background-color: rgb(255 255 255 / 4%);
         }
       }
     }
@@ -325,7 +325,7 @@
       .ant-form {
         padding: 12px 10px 6px 10px;
         margin-bottom: 16px;
-        background: @component-background;
+        background-color: @component-background;
         border-radius: 4px;
       }
     }
@@ -342,7 +342,7 @@
 
     .ant-table-wrapper {
       padding: 6px;
-      background: @component-background;
+      background-color: @component-background;
       border-radius: 2px;
 
       .ant-table-title {
@@ -367,7 +367,7 @@
       }
 
       .ant-table-tbody > tr.ant-table-row-selected td {
-        background: fade(@primary-color, 8%) !important;
+        background-color: fade(@primary-color, 8%) !important;
       }
     }
 

src/components/Tree/src/index.vue

@@ -361,7 +361,7 @@
   @prefix-cls: ~'@{namespace}-basic-tree';
 
   .@{prefix-cls} {
-    background: @component-background;
+    background-color: @component-background;
 
     .ant-tree-node-content-wrapper {
       position: relative;

src/components/Verify/src/DragVerify.less

@@ -12,7 +12,7 @@
     position: absolute;
     width: 0;
     height: 36px;
-    background: @success-color;
+    background-color: @success-color;
     border-radius: @radius;
 
     &.to-left {
@@ -26,7 +26,7 @@
     top: 0;
     font-size: 12px;
     -webkit-text-size-adjust: none;
-    background: -webkit-gradient(
+    background-color: -webkit-gradient(
       linear,
       left top,
       right top,
@@ -60,7 +60,7 @@
     left: 0;
     display: flex;
     cursor: move;
-    background: @white;
+    background-color: @white;
     border-radius: @radius;
     justify-content: center;
     align-items: center;

src/components/Verify/src/ImgRotate.less

@@ -33,15 +33,15 @@
     text-align: center;
 
     &.success {
-      background: fade(@success-color, 60%);
+      background-color: fade(@success-color, 60%);
     }
 
     &.error {
-      background: fade(@error-color, 60%);
+      background-color: fade(@error-color, 60%);
     }
 
     &.normal {
-      background: rgba(0, 0, 0, 0.3);
+      background-color: rgba(0, 0, 0, 0.3);
     }
   }
 

src/design/ant/btn.less

@@ -201,7 +201,7 @@
     &[disabled],
     &[disabled]:hover {
       color: @button-ghost-color;
-      background: fade(@white, 40%);
+      background-color: fade(@white, 40%);
       border-color: fade(@button-ghost-color, 40%);
     }
   }

src/design/ant/index.less

@@ -29,7 +29,7 @@ span.anticon:not(.app-iconify) {
 }
 
 .ant-image-preview-operations {
-  background: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 .ant-popover {

src/design/ant/pagination.less

@@ -4,7 +4,7 @@ html[data-theme='dark'] {
       .ant-pagination-prev,
       .ant-pagination-next,
       .ant-pagination-item {
-        background: rgb(255 255 255 / 4%) !important;
+        background-color: rgb(255 255 255 / 4%) !important;
 
         a {
           color: #8b949e !important;
@@ -16,7 +16,7 @@ html[data-theme='dark'] {
       }
 
       .ant-pagination-item-active {
-        background: @primary-color !important;
+        background-color: @primary-color !important;
         border: none;
         border-radius: none !important;
 
@@ -50,7 +50,7 @@ html[data-theme='dark'] {
     .ant-pagination-next,
     .ant-pagination-item {
       margin: 0 4px !important;
-      background: #f4f4f5 !important;
+      background-color: #f4f4f5 !important;
       border: none;
       border-radius: none !important;
 
@@ -65,7 +65,7 @@ html[data-theme='dark'] {
     }
 
     .ant-pagination-item-active {
-      background: @primary-color !important;
+      background-color: @primary-color !important;
       border: none;
       border-radius: none !important;
 

src/design/public.less

@@ -17,11 +17,11 @@
 // }
 
 ::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.05);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.6);
+  // background: rgba(0, 0, 0, 0.6);
   background-color: rgba(144, 147, 153, 0.3);
   // background-color: rgba(144, 147, 153, 0.3);
   border-radius: 2px;
@@ -29,7 +29,7 @@
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: @border-color-dark;
+  background-color: @border-color-dark;
 }
 
 // =================================

src/design/theme.less

@@ -1,5 +1,5 @@
 .bg-white {
-  background: @component-background !important;
+  background-color: @component-background !important;
 }
 
 html[data-theme='light'] {

src/layouts/default/feature/index.vue

@@ -67,7 +67,7 @@
     padding: 10px;
     color: @white;
     cursor: pointer;
-    background: @primary-color;
+    background-color: @primary-color;
     border-radius: 6px 0 0 6px;
     justify-content: center;
     align-items: center;

src/layouts/default/header/components/Breadcrumb.vue

@@ -47,6 +47,7 @@
       const { currentRoute } = useRouter();
       const { prefixCls } = useDesign('layout-breadcrumb');
       const { getShowBreadCrumbIcon } = useRootSetting();
+      const go = useGo();
 
       const { t } = useI18n();
       watchEffect(async () => {
@@ -122,7 +123,6 @@
           return;
         }
 
-        const go = useGo();
         if (redirect && isString(redirect)) {
           go(redirect);
         } else {

src/layouts/default/header/components/user-dropdown/index.vue

@@ -148,7 +148,7 @@
 
     &--dark {
       &:hover {
-        background: @header-dark-bg-hover-color;
+        background-color: @header-dark-bg-hover-color;
       }
     }
 

src/layouts/default/header/index.less

@@ -10,7 +10,7 @@
   margin-left: -1px;
   line-height: @header-height;
   color: @white;
-  background: @white;
+  background-color: @white;
   align-items: center;
   justify-content: space-between;
 
@@ -77,7 +77,7 @@
 
       &.light {
         &:hover {
-          background: @header-light-bg-hover-color;
+          background-color: @header-light-bg-hover-color;
         }
 
         svg {
@@ -87,7 +87,7 @@
 
       &.dark {
         &:hover {
-          background: @header-dark-bg-hover-color;
+          background-color: @header-dark-bg-hover-color;
         }
       }
     }
@@ -131,7 +131,7 @@
   }
 
   &--light {
-    background: @white !important;
+    background-color: @white !important;
     border-bottom: 1px solid @header-light-bottom-border-color;
     border-left: 1px solid @header-light-bottom-border-color;
 
@@ -139,7 +139,7 @@
       color: @text-color-base;
 
       &:hover {
-        background: @header-light-bg-hover-color;
+        background-color: @header-light-bg-hover-color;
       }
     }
 
@@ -153,7 +153,7 @@
         }
 
         &:hover {
-          background: @header-light-bg-hover-color;
+          background-color: @header-light-bg-hover-color;
         }
       }
 
@@ -165,12 +165,12 @@
   }
 
   &--dark {
-    background: @header-dark-bg-color !important;
+    background-color: @header-dark-bg-color !important;
     border-bottom: 1px solid @border-color-base;
     border-left: 1px solid @border-color-base;
     .@{header-prefix-cls}-logo {
       &:hover {
-        background: @header-dark-bg-hover-color;
+        background-color: @header-dark-bg-hover-color;
       }
     }
 
@@ -182,7 +182,7 @@
         }
 
         &:hover {
-          background: @header-dark-bg-hover-color;
+          background-color: @header-dark-bg-hover-color;
         }
       }
     }

src/layouts/default/index.vue

@@ -65,7 +65,7 @@
     display: flex;
     width: 100%;
     min-height: 100%;
-    background: @content-bg;
+    background-color: @content-bg;
     flex-direction: column;
 
     > .ant-layout {

src/layouts/default/sider/DragBar.vue

@@ -59,7 +59,7 @@
     }
 
     &:hover {
-      background: @primary-color;
+      background-color: @primary-color;
       box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.15);
     }
   }

src/layouts/default/sider/LayoutSider.vue

@@ -144,15 +144,15 @@
     }
 
     &.ant-layout-sider-dark {
-      background: @sider-dark-bg-color;
+      background-color: @sider-dark-bg-color;
 
       .ant-layout-sider-trigger {
         color: darken(@white, 25%);
-        background: @trigger-dark-bg-color;
+        background-color: @trigger-dark-bg-color;
 
         &:hover {
           color: @white;
-          background: @trigger-dark-hover-bg-color;
+          background-color: @trigger-dark-hover-bg-color;
         }
       }
     }

src/layouts/default/sider/MixSider.vue

@@ -344,7 +344,7 @@
     z-index: @layout-mix-sider-fixed-z-index;
     height: 100%;
     overflow: hidden;
-    background: @sider-dark-bg-color;
+    background-color: @sider-dark-bg-color;
     transition: all 0.2s ease 0s;
 
     &-dom {
@@ -383,7 +383,7 @@
 
           &--active {
             color: @primary-color;
-            background: unset;
+            background-color: unset;
           }
         }
       }
@@ -416,7 +416,7 @@
         }
       }
       .@{prefix-cls}-menu-list {
-        background: @sider-dark-bg-color;
+        background-color: @sider-dark-bg-color;
 
         &__title {
           color: @white;
@@ -459,7 +459,7 @@
         &--active {
           font-weight: 700;
           color: @white;
-          background: @sider-dark-darken-bg-color;
+          background-color: @sider-dark-darken-bg-color;
 
           &::before {
             position: absolute;
@@ -467,7 +467,7 @@
             left: 0;
             width: 3px;
             height: 100%;
-            background: @primary-color;
+            background-color: @primary-color;
             content: '';
           }
         }
@@ -496,12 +496,12 @@
       font-size: 18px;
       color: rgba(255, 255, 255, 0.65);
       cursor: pointer;
-      background: @sider-dark-bg-color;
+      background-color: @sider-dark-bg-color;
     }
 
     &.light &-trigger {
       color: rgba(0, 0, 0, 0.65);
-      background: #fff;
+      background-color: #fff;
     }
 
     &-menu-list {
@@ -510,7 +510,7 @@
       width: 0;
       width: 200px;
       height: calc(100%);
-      background: #fff;
+      background-color: #fff;
       transition: all 0.2s;
 
       &__title {
@@ -573,7 +573,7 @@
       width: 1px;
       height: calc(100% - 50px);
       cursor: ew-resize;
-      background: #f8f8f9;
+      background-color: #f8f8f9;
       border-top: none;
       border-bottom: none;
       box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.15);

src/main.ts

@@ -29,7 +29,7 @@ if (import.meta.env.DEV) {
   // Configure vuex store
   setupStore(app);
 
-  // Initialize vuex internal system configuration
+  // Initialize internal system configuration
   initAppConfigStore();
 
   // Register global components

src/views/demo/comp/lazy/Transition.vue

@@ -29,7 +29,7 @@
       height: 2000px;
       margin: 20px auto;
       text-align: center;
-      background: @component-background;
+      background-color: @component-background;
       justify-content: center;
       flex-direction: column;
       align-items: center;

src/views/demo/comp/lazy/index.vue

@@ -33,7 +33,7 @@
       height: 2000px;
       margin: 20px auto;
       text-align: center;
-      background: @component-background;
+      background-color: @component-background;
       justify-content: center;
       flex-direction: column;
       align-items: center;

src/views/demo/comp/scroll/Action.vue

@@ -54,6 +54,6 @@
   .scroll-wrap {
     width: 50%;
     height: 300px;
-    background: @component-background;
+    background-color: @component-background;
   }
 </style>

src/views/demo/comp/scroll/VirtualScroll.vue

@@ -50,7 +50,7 @@
     &-wrap {
       display: flex;
       margin: 0 30%;
-      background: @component-background;
+      background-color: @component-background;
       justify-content: center;
     }
 

src/views/demo/comp/scroll/index.vue

@@ -26,6 +26,6 @@
   .scroll-wrap {
     width: 50%;
     height: 300px;
-    background: @component-background;
+    background-color: @component-background;
   }
 </style>

src/views/demo/comp/strength-meter/index.vue

@@ -26,7 +26,7 @@
 <style lang="less" scoped>
   .demo-wrap {
     width: 50%;
-    background: @component-background;
+    background-color: @component-background;
     border-radius: 10px;
   }
 </style>

src/views/demo/comp/transition/index.vue

@@ -91,6 +91,6 @@
     width: 150px;
     height: 150px;
     margin-top: 20px;
-    background: rgb(126, 170, 236);
+    background-color: rgb(126, 170, 236);
   }
 </style>

src/views/demo/comp/verify/Rotate.vue

@@ -28,6 +28,6 @@
 </script>
 <style lang="less" scoped>
   .bg-gray-700 {
-    background: #4a5568;
+    background-color: #4a5568;
   }
 </style>

src/views/demo/comp/verify/index.vue

@@ -17,7 +17,7 @@
         text="拖动以进行校验"
         successText="校验成功"
         :barStyle="{
-          background: '#018ffb',
+          backgroundColor: '#018ffb',
         }"
       />
       <a-button type="primary" class="ml-2" @click="handleBtnClick(el3)"> 还原 </a-button>
@@ -92,6 +92,6 @@
 </script>
 <style lang="less" scoped>
   .bg-gray-700 {
-    background: #4a5568;
+    background-color: #4a5568;
   }
 </style>

src/views/demo/feat/click-out-side/index.vue

@@ -35,7 +35,7 @@
     height: 300px;
     font-size: 24px;
     color: #fff;
-    background: #408ede;
+    background-color: #408ede;
     border-radius: 10px;
     justify-content: center;
     align-items: center;

src/views/demo/feat/ripple/index.vue

@@ -23,7 +23,7 @@
     height: 300px;
     font-size: 24px;
     color: #fff;
-    background: #408ede;
+    background-color: #408ede;
     border-radius: 10px;
     justify-content: center;
     align-items: center;

src/views/demo/page/account/center/index.vue

@@ -102,7 +102,7 @@
     &-top {
       padding: 10px;
       margin: 16px 16px 12px 16px;
-      background: @component-background;
+      background-color: @component-background;
       border-radius: 3px;
 
       &__avatar {
@@ -144,7 +144,7 @@
     &-bottom {
       padding: 10px;
       margin: 0 16px 16px 16px;
-      background: @component-background;
+      background-color: @component-background;
       border-radius: 3px;
     }
   }

src/views/demo/page/account/setting/index.vue

@@ -48,7 +48,7 @@
 <style lang="less">
   .account-setting {
     margin: 12px;
-    background: @component-background;
+    background-color: @component-background;
 
     .base-title {
       padding-left: 0;

src/views/demo/page/desc/basic/index.vue

@@ -93,6 +93,6 @@
 <style lang="less" scoped>
   .desc-wrap {
     padding: 16px;
-    background: @component-background;
+    background-color: @component-background;
   }
 </style>

src/views/demo/page/form/basic/index.vue

@@ -62,6 +62,6 @@
 <style lang="less" scoped>
   .form-wrap {
     padding: 24px;
-    background: @component-background;
+    background-color: @component-background;
   }
 </style>

src/views/demo/page/form/step/Step3.vue

@@ -44,6 +44,6 @@
   .desc-wrap {
     padding: 24px 40px;
     margin-top: 24px;
-    background: @background-color-light;
+    background-color: @background-color-light;
   }
 </style>

src/views/demo/page/form/step/index.vue

@@ -85,7 +85,7 @@
 <style lang="less" scoped>
   .step-form-content {
     padding: 24px;
-    background: @component-background;
+    background-color: @component-background;
   }
 
   .step-form-form {

src/views/demo/page/list/basic/index.vue

@@ -86,7 +86,7 @@
     &__top {
       padding: 24px;
       text-align: center;
-      background: @component-background;
+      background-color: @component-background;
 
       &-col {
         &:not(:last-child) {
@@ -112,7 +112,7 @@
     &__content {
       padding: 24px;
       margin-top: 12px;
-      background: @component-background;
+      background-color: @component-background;
 
       .list {
         position: relative;

src/views/demo/page/list/search/index.vue

@@ -91,7 +91,7 @@
 
     &__container {
       padding: 12px;
-      background: @component-background;
+      background-color: @component-background;
     }
 
     &__title {

src/views/demo/page/result/fail/index.vue

@@ -34,11 +34,11 @@
 <style lang="less" scoped>
   .result-error {
     padding: 48px 32px;
-    background: @component-background;
+    background-color: @component-background;
 
     &__content {
       padding: 24px 40px;
-      background: @background-color-light;
+      background-color: @background-color-light;
 
       &-title {
         margin-bottom: 16px;

src/views/demo/page/result/success/index.vue

@@ -48,11 +48,11 @@
 <style lang="less" scoped>
   .result-success {
     padding: 48px 32px;
-    background: @component-background;
+    background-color: @component-background;
 
     &__content {
       padding: 24px 40px;
-      background: @background-color-light;
+      background-color: @background-color-light;
     }
   }
 </style>

src/views/demo/permission/back/Btn.vue

@@ -84,6 +84,6 @@
 </script>
 <style lang="less" scoped>
   .demo {
-    background: @component-background;
+    background-color: @component-background;
   }
 </style>

src/views/demo/permission/back/index.vue

@@ -38,6 +38,6 @@
 </script>
 <style lang="less" scoped>
   .demo {
-    background: @component-background;
+    background-color: @component-background;
   }
 </style>

src/views/demo/permission/front/AuthPageA.vue

@@ -11,7 +11,7 @@
     height: 300px;
     font-size: 24px;
     color: #fff;
-    background: #409efe;
+    background-color: #409efe;
     border-radius: 12px;
     justify-content: center;
     align-items: center;

src/views/demo/permission/front/AuthPageB.vue

@@ -11,7 +11,7 @@
     height: 300px;
     font-size: 24px;
     color: #fff;
-    background: #409efe;
+    background-color: #409efe;
     border-radius: 12px;
     justify-content: center;
     align-items: center;

src/views/demo/permission/front/Btn.vue

@@ -88,6 +88,6 @@
 </script>
 <style lang="less" scoped>
   .demo {
-    background: @component-background;
+    background-color: @component-background;
   }
 </style>

src/views/demo/permission/front/index.vue

@@ -52,6 +52,6 @@
 </script>
 <style lang="less" scoped>
   .demo {
-    background: @component-background;
+    background-color: @component-background;
   }
 </style>

src/views/sys/iframe/index.vue

@@ -116,7 +116,7 @@
       width: 100%;
       height: 100%;
       overflow: hidden;
-      background: @component-background;
+      background-color: @component-background;
       border: 0;
       box-sizing: border-box;
     }

src/views/sys/lock/LockPage.vue

@@ -171,7 +171,7 @@
       display: flex;
       font-weight: 700;
       color: #bababa;
-      background: #141313;
+      background-color: #141313;
       border-radius: 30px;
       justify-content: center;
       align-items: center;
@@ -218,7 +218,7 @@
       display: flex;
       width: 100%;
       height: 100%;
-      background: rgba(0, 0, 0, 0.5);
+      background-color: rgba(0, 0, 0, 0.5);
       backdrop-filter: blur(8px);
       justify-content: center;
       align-items: center;

src/views/sys/login/Login.vue

@@ -95,7 +95,7 @@
 
   html[data-theme='dark'] {
     .@{prefix-cls} {
-      background: @dark-bg;
+      background-color: @dark-bg;
 
       &::before {
         background-image: url(/@/assets/svg/login-bg-dark.svg);
@@ -123,10 +123,10 @@
   .@{prefix-cls} {
     overflow: hidden;
     @media (max-width: @screen-xl) {
-      background: #293146;
+      background-color: #293146;
 
       .@{prefix-cls}-form {
-        background: #fff;
+        background-color: #fff;
       }
     }
 

yarn.lock

@@ -1108,10 +1108,10 @@
   dependencies:
     cross-fetch "^3.0.6"
 
-"@iconify/json@^1.1.328":
-  version "1.1.328"
-  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.328.tgz#2fba6768ae3f148c315f205a94409e86dbf07cca"
-  integrity sha512-/dVvFNpktwCx2A3aA+/fLJ88jXTAh42VZE79FzaaY5CmgmHjvenpSOP1p1oy2m3XM8VtsDBoNM+RKFIIOYL2bg==
+"@iconify/json@^1.1.329":
+  version "1.1.329"
+  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.329.tgz#8780dd95a6e01ab805708c73d0227f09d2859c9a"
+  integrity sha512-meGFTitX6EG0tRB8mt4+1rGZVJ6ElN7kdI+vBmXDHg4pt/rulGbIV+kwFPfxt9dXLEp9ABFUexnfLd9g2GcW2g==
 
 "@intlify/core-base@9.0.0":
   version "9.0.0"
@@ -7706,10 +7706,10 @@ rollup-plugin-visualizer@5.3.6:
     source-map "^0.7.3"
     yargs "^16.2.0"
 
-rollup@^2.25.0, rollup@^2.38.5, rollup@^2.44.0, rollup@^2.45.1:
-  version "2.45.1"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-2.45.1.tgz#eae2b94dc2088b4e0a3b7197a5a1ee0bdd589d5c"
-  integrity sha512-vPD+JoDj3CY8k6m1bLcAFttXMe78P4CMxoau0iLVS60+S9kLsv2379xaGy4NgYWu+h2WTlucpoLPAoUoixFBag==
+rollup@^2.25.0, rollup@^2.38.5, rollup@^2.44.0, rollup@^2.45.2:
+  version "2.45.2"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-2.45.2.tgz#8fb85917c9f35605720e92328f3ccbfba6f78b48"
+  integrity sha512-kRRU7wXzFHUzBIv0GfoFFIN3m9oteY4uAsKllIpQDId5cfnkWF2J130l+27dzDju0E6MScKiV0ZM5Bw8m4blYQ==
   optionalDependencies:
     fsevents "~2.3.1"