style: Descriptions样式调整

kailong321200875 · Oct 14, 2023 · be73f4d · be73f4d
1 parent 03d5e13
commit be73f4d
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 20 deletions.
diff --git a/src/components/Descriptions/src/Descriptions.vue b/src/components/Descriptions/src/Descriptions.vue
@@ -61,7 +61,10 @@ export default defineComponent({
           delete obj[key]
         }
       }
-      return obj
+      return {
+        labelClassName: `${prefixCls}-label`,
+        ...obj
+      }
     }
 
     // 折叠
@@ -155,9 +158,7 @@ export default defineComponent({
   }
 }
 
-.@{prefix-cls}-content {
-  :deep(.@{elNamespace}-descriptions__cell) {
-    width: 0;
-  }
+:deep(.@{prefix-cls}-label) {
+  width: 150px;
 }
 </style>
diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue
@@ -113,18 +113,22 @@ const dialogStyle = computed(() => {
 
 .@{elNamespace}-dialog {
   margin: 0 !important;
+
   &__header {
+    height: 54px;
+    padding: 0;
     margin-right: 0 !important;
     border-bottom: 1px solid var(--el-border-color);
-    padding: 0;
-    height: 54px;
   }
+
   &__body {
     padding: 15px !important;
   }
+
   &__footer {
     border-top: 1px solid var(--el-border-color);
   }
+
   &__headerbtn {
     top: 0;
   }

diff --git a/src/components/InputPassword/src/InputPassword.vue b/src/components/InputPassword/src/InputPassword.vue
@@ -86,7 +86,7 @@ const getPasswordStrength = computed(() => {
       background-color: transparent;
       border-color: var(--el-color-white);
       border-style: solid;
-      border-width: 0 5px 0 5px;
+      border-width: 0 5px;
       content: '';
     }
 

diff --git a/src/components/Menu/src/Menu.vue b/src/components/Menu/src/Menu.vue
@@ -155,6 +155,7 @@ export default defineComponent({
     .is-active {
       & > .@{elNamespace}-sub-menu__title {
         color: var(--left-menu-text-active-color) !important;
+        // background-color: var(--left-menu-bg-color) !important;
       }
     }
 
@@ -168,7 +169,6 @@ export default defineComponent({
     }
 
     // 设置选中时的高亮背景和高亮颜色
-    .@{elNamespace}-sub-menu.is-active,
     .@{elNamespace}-menu-item.is-active {
       color: var(--left-menu-text-active-color) !important;
       background-color: var(--left-menu-bg-active-color) !important;
@@ -235,7 +235,7 @@ export default defineComponent({
       .@{elNamespace}-menu-item.is-active {
         position: relative;
 
-        &:after {
+        &::after {
           display: none !important;
         }
       }
@@ -270,6 +270,7 @@ export default defineComponent({
   .is-active {
     & > .el-sub-menu__title {
       color: var(--left-menu-text-active-color) !important;
+      // background-color: var(--left-menu-bg-color) !important;
     }
   }
 

diff --git a/src/components/Qrcode/src/Qrcode.vue b/src/components/Qrcode/src/Qrcode.vue
@@ -242,7 +242,7 @@ const disabledClick = () => {
 
 .@{prefix-cls} {
   &--disabled {
-    background: rgba(255, 255, 255, 0.95);
+    background: rgb(255 255 255 / 95%);
 
     & > div {
       transform: translate(-50%, -50%);

diff --git a/src/components/Setting/src/components/LayoutRadioPicker.vue b/src/components/Setting/src/components/LayoutRadioPicker.vue
@@ -67,7 +67,7 @@ const layout = computed(() => appStore.getLayout)
     border: 2px solid #e5e7eb;
     border-radius: 4px;
 
-    &:before {
+    &::before {
       position: absolute;
       top: 0;
       left: 0;
@@ -79,14 +79,14 @@ const layout = computed(() => appStore.getLayout)
       content: '';
     }
 
-    &:after {
+    &::after {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 25%;
       background-color: #fff;
-      border-radius: 4px 4px 0 4px;
+      border-radius: 4px 4px 0;
       content: '';
     }
   }
@@ -95,7 +95,7 @@ const layout = computed(() => appStore.getLayout)
     border: 2px solid #e5e7eb;
     border-radius: 4px;
 
-    &:before {
+    &::before {
       position: absolute;
       top: 0;
       left: 0;
@@ -107,7 +107,7 @@ const layout = computed(() => appStore.getLayout)
       content: '';
     }
 
-    &:after {
+    &::after {
       position: absolute;
       top: 0;
       left: 0;
@@ -123,7 +123,7 @@ const layout = computed(() => appStore.getLayout)
     border: 2px solid #e5e7eb;
     border-radius: 4px;
 
-    &:before {
+    &::before {
       position: absolute;
       top: 0;
       left: 0;
@@ -140,7 +140,7 @@ const layout = computed(() => appStore.getLayout)
     border: 2px solid #e5e7eb;
     border-radius: 4px;
 
-    &:before {
+    &::before {
       position: absolute;
       top: 0;
       left: 0;
@@ -152,7 +152,7 @@ const layout = computed(() => appStore.getLayout)
       content: '';
     }
 
-    &:after {
+    &::after {
       position: absolute;
       top: 0;
       left: 0;

diff --git a/src/components/UserInfo/src/components/LockDialog.vue b/src/components/UserInfo/src/components/LockDialog.vue
@@ -94,7 +94,7 @@ const handleLock = async () => {
 
 <style lang="less" scoped>
 :global(.v-lock-dialog) {
-  @media (max-width: 767px) {
+  @media (width <= 767px) {
     max-width: calc(100vw - 16px);
   }
 }

diff --git a/src/components/UserInfo/src/components/LockPage.vue b/src/components/UserInfo/src/components/LockPage.vue
@@ -205,6 +205,7 @@ function handleShowForm(show = false) {
         font-size: 90px;
       }
     }
+
     @media screen and (min-width: @screen-lg) {
       span:not(.meridiem) {
         font-size: 220px;
@@ -216,6 +217,7 @@ function handleShowForm(show = false) {
         font-size: 260px;
       }
     }
+
     @media screen and (min-width: @screen-2xl) {
       span:not(.meridiem) {
         font-size: 320px;

diff --git a/stylelint.config.js b/stylelint.config.js
@@ -215,6 +215,8 @@ module.exports = {
       extends: ['stylelint-config-recommended', 'stylelint-config-html'],
       rules: {
         'keyframes-name-pattern': null,
+        'selector-class-pattern': null,
+        'no-duplicate-selectors': null,
         'selector-pseudo-class-no-unknown': [
           true,
           {