From 9d527909108140567beff1a3beeb1d73742ffa78 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Tue, 14 Nov 2023 21:56:54 +0800
Subject: [PATCH] fix: stylelint

(cherry picked from commit 821c804189ffc81b8d8f8444076ab8948dcd3615)
---
 .../components/ComponentContainer.vue         | 97 +++++++++----------
 .../components/ComponentContainerProperty.vue |  1 +
 .../DiyEditor/components/ComponentLibrary.vue | 36 ++++---
 .../components/mobile/ImageBar/index.vue      |  2 +-
 .../components/mobile/NavigationBar/index.vue | 11 ++-
 .../components/mobile/SearchBar/index.vue     | 10 +-
 .../components/mobile/TabBar/index.vue        |  7 +-
 .../components/mobile/TitleBar/index.vue      | 12 +--
 .../components/mobile/VideoPlayer/index.vue   |  2 +-
 src/components/DiyEditor/index.vue            | 54 +++++++----
 src/components/VerticalButtonGroup/index.vue  | 18 ++--
 src/layout/components/Message/src/Message.vue |  2 +-
 .../member/components/MemberFunnelCard.vue    |  2 +
 .../mall/trade/delivery/pickUpOrder/index.vue |  1 +
 14 files changed, 143 insertions(+), 112 deletions(-)

diff --git a/src/components/DiyEditor/components/ComponentContainer.vue b/src/components/DiyEditor/components/ComponentContainer.vue
index 2d8c2f13..e6f1beb3 100644
--- a/src/components/DiyEditor/components/ComponentContainer.vue
+++ b/src/components/DiyEditor/components/ComponentContainer.vue
@@ -1,7 +1,6 @@
 <template>
   <div :class="['component', { active: active }]">
     <div
-      class="component-inner"
       :style="{
         ...style
       }"
@@ -127,114 +126,110 @@ $active-border-width: 2px;
 $hover-border-width: 1px;
 $name-position: -85px;
 $toolbar-position: -55px;
+
 /* 组件 */
 .component {
   position: relative;
   cursor: move;
-  .component-inner {
-    position: relative;
-    z-index: 1;
-  }
-  /* 用于包裹组件，为组件提供 组件名称、工具栏、边框等样式 */
+
   .component-wrap {
-    z-index: 0;
-    // 不可以被点击
-    // component-wrap会遮挡组件，导致组件不能触发鼠标事件，所以这里要先禁用，然后在组件名称、工具栏上开启。
-    pointer-events: none;
-    display: block;
     position: absolute;
-    left: -$active-border-width;
     top: 0;
+    left: -$active-border-width;
+    display: block;
     width: 100%;
     height: 100%;
+
+    /* 鼠标放到组件上时 */
+    &:hover {
+      border: $hover-border-width dashed var(--el-color-primary);
+      box-shadow: 0 0 5px 0 rgb(24 144 255 / 30%);
+
+      .component-name {
+        top: $hover-border-width;
+
+        /* 防止加了边框之后，位置移动 */
+        left: $name-position - $hover-border-width;
+      }
+    }
+
     /* 左侧：组件名称 */
     .component-name {
-      // 可以被点击
-      pointer-events: auto;
-      display: block;
       position: absolute;
-      width: 80px;
-      text-align: center;
-      line-height: 25px;
-      height: 25px;
-      background: #fff;
-      font-size: 12px;
-      left: $name-position;
       top: $active-border-width;
+      left: $name-position;
+      display: block;
+      width: 80px;
+      height: 25px;
+      font-size: 12px;
+      line-height: 25px;
+      text-align: center;
+      background: #fff;
       box-shadow:
         0 0 4px #00000014,
         0 2px 6px #0000000f,
         0 4px 8px 2px #0000000a;
+
       /* 右侧小三角 */
-      &:after {
+      &::after {
         position: absolute;
         top: 7.5px;
         right: -10px;
-        content: ' ';
-        height: 0;
         width: 0;
+        height: 0;
         border: 5px solid transparent;
         border-left-color: #fff;
+        content: ' ';
       }
     }
+
     /* 右侧：组件操作工具栏 */
     .component-toolbar {
-      // 可以被点击
-      pointer-events: auto;
-      display: none;
       position: absolute;
       top: 0;
       right: $toolbar-position;
+      display: none;
+
       /* 左侧小三角 */
-      &:before {
+      &::before {
         position: absolute;
         top: 10px;
         left: -10px;
-        content: ' ';
-        height: 0;
         width: 0;
+        height: 0;
         border: 5px solid transparent;
         border-right-color: #2d8cf0;
+        content: ' ';
       }
     }
   }
+
   /* 组件选中时 */
   &.active {
     margin-bottom: 4px;
 
     .component-wrap {
-      z-index: 2;
-      border: $active-border-width solid var(--el-color-primary) !important;
-      box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
       margin-bottom: $active-border-width + $active-border-width;
+      border: $active-border-width solid var(--el-color-primary) !important;
+      box-shadow: 0 0 10px 0 rgb(24 144 255 / 30%);
 
       .component-name {
-        background: var(--el-color-primary);
-        color: #fff;
+        top: 0 !important;
+
         /* 防止加了边框之后，位置移动 */
         left: $name-position - $active-border-width !important;
-        top: 0 !important;
-        &:after {
+        color: #fff;
+        background: var(--el-color-primary);
+
+        &::after {
           border-left-color: var(--el-color-primary);
         }
       }
+
       .component-toolbar {
         display: block;
       }
     }
   }
-  /* 鼠标放到组件上时 */
-  &:hover {
-    .component-wrap {
-      z-index: 2;
-      border: $hover-border-width dashed var(--el-color-primary);
-      box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
-      .component-name {
-        /* 防止加了边框之后，位置移动 */
-        left: $name-position - $hover-border-width;
-        top: $hover-border-width;
-      }
-    }
-  }
 }
 </style>
diff --git a/src/components/DiyEditor/components/ComponentContainerProperty.vue b/src/components/DiyEditor/components/ComponentContainerProperty.vue
index 5c5ed9a0..d6540354 100644
--- a/src/components/DiyEditor/components/ComponentContainerProperty.vue
+++ b/src/components/DiyEditor/components/ComponentContainerProperty.vue
@@ -157,6 +157,7 @@ const handleSliderChange = (prop: string) => {
 :deep(.el-slider__runway) {
   margin-right: 16px;
 }
+
 :deep(.el-input-number) {
   width: 50px;
 }
diff --git a/src/components/DiyEditor/components/ComponentLibrary.vue b/src/components/DiyEditor/components/ComponentLibrary.vue
index 2bcd81fd..e319a5c2 100644
--- a/src/components/DiyEditor/components/ComponentLibrary.vue
+++ b/src/components/DiyEditor/components/ComponentLibrary.vue
@@ -90,23 +90,26 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 .editor-left {
   z-index: 1;
   flex-shrink: 0;
-  box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.12);
+  box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
 
   :deep(.el-collapse) {
     border-top: none;
   }
+
   :deep(.el-collapse-item__wrap) {
     border-bottom: none;
   }
+
   :deep(.el-collapse-item__content) {
     padding-bottom: 0;
   }
+
   :deep(.el-collapse-item__header) {
-    border-bottom: none;
-    background-color: var(--el-bg-color-page);
-    padding: 0 24px;
     height: 32px;
+    padding: 0 24px;
     line-height: 32px;
+    background-color: var(--el-bg-color-page);
+    border-bottom: none;
   }
 
   .component-container {
@@ -116,25 +119,26 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
   }
 
   .component {
+    display: flex;
     width: 86px;
     height: 86px;
-    display: flex;
+    cursor: move;
+    border-right: 1px solid var(--el-border-color-lighter);
+    border-bottom: 1px solid var(--el-border-color-lighter);
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    border-right: 1px solid var(--el-border-color-lighter);
-    border-bottom: 1px solid var(--el-border-color-lighter);
-    cursor: move;
 
     .el-icon {
       margin-bottom: 4px;
       color: gray;
     }
   }
+
   .component.active,
   .component:hover {
-    background: var(--el-color-primary);
     color: var(--el-color-white);
+    background: var(--el-color-primary);
 
     .el-icon {
       color: var(--el-color-white);
@@ -155,11 +159,10 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 .drag-area {
   /* 拖拽到手机区域时的样式 */
   .draggable-ghost {
+    display: flex;
     width: 100%;
     height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+
     /* 条纹背景 */
     background: linear-gradient(
       45deg,
@@ -174,20 +177,25 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
     );
     background-size: 1rem 1rem;
     transition: all 0.5s;
+    justify-content: center;
+    align-items: center;
+
     span {
-      color: #fff;
       display: inline-block;
       width: 140px;
       height: 25px;
       font-size: 12px;
-      text-align: center;
       line-height: 25px;
+      color: #fff;
+      text-align: center;
       background: #5487df;
     }
+
     /* 拖拽时隐藏组件 */
     .component {
       display: none;
     }
+
     /* 拖拽时显示占位提示 */
     .drag-placement {
       display: block;
diff --git a/src/components/DiyEditor/components/mobile/ImageBar/index.vue b/src/components/DiyEditor/components/mobile/ImageBar/index.vue
index 6f70c52d..d9685b50 100644
--- a/src/components/DiyEditor/components/mobile/ImageBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/ImageBar/index.vue
@@ -17,8 +17,8 @@ defineProps<{ property: ImageBarProperty }>()
 <style scoped lang="scss">
 /* 图片 */
 img {
+  display: block;
   width: 100%;
   height: 100%;
-  display: block;
 }
 </style>
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
index 345b6681..f5cfff8c 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
@@ -35,22 +35,25 @@ defineProps<{ property: NavigationBarProperty }>()
 </script>
 <style lang="scss" scoped>
 .navigation-bar {
+  display: flex;
   height: 35px;
   background: #fff;
-  display: flex;
   justify-content: space-between;
   align-items: center;
+
   /* 左边 */
   .left {
     margin-left: 8px;
   }
+
   .center {
-    flex: 1;
-    text-align: center;
     font-size: 14px;
     line-height: 35px;
-    color: #333333;
+    color: #333;
+    text-align: center;
+    flex: 1;
   }
+
   /* 右边 */
   .right {
     margin-right: 8px;
diff --git a/src/components/DiyEditor/components/mobile/SearchBar/index.vue b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
index 618c918b..9de261ad 100644
--- a/src/components/DiyEditor/components/mobile/SearchBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
@@ -45,21 +45,21 @@ defineProps<{ property: SearchProperty }>()
   /* 搜索框 */
   .inner {
     position: relative;
-    min-height: 28px;
     display: flex;
-    align-items: center;
+    min-height: 28px;
     font-size: 14px;
+    align-items: center;
 
     .placeholder {
       display: flex;
-      align-items: center;
       width: 100%;
       padding: 0 8px;
-      gap: 2px;
-      text-overflow: ellipsis;
       overflow: hidden;
+      text-overflow: ellipsis;
       word-break: break-all;
       white-space: nowrap;
+      align-items: center;
+      gap: 2px;
     }
 
     .right {
diff --git a/src/components/DiyEditor/components/mobile/TabBar/index.vue b/src/components/DiyEditor/components/mobile/TabBar/index.vue
index 647e3369..4325d1e3 100644
--- a/src/components/DiyEditor/components/mobile/TabBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/TabBar/index.vue
@@ -30,8 +30,9 @@ defineProps<{ property: TabBarProperty }>()
 </script>
 <style lang="scss" scoped>
 .tab-bar {
-  width: 100%;
   z-index: 2;
+  width: 100%;
+
   .tab-bar-bg {
     display: flex;
     flex-direction: row;
@@ -41,11 +42,11 @@ defineProps<{ property: TabBarProperty }>()
 
     .tab-bar-item {
       display: flex;
+      width: 100%;
+      font-size: 12px;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      font-size: 12px;
-      width: 100%;
 
       img {
         width: 26px;
diff --git a/src/components/DiyEditor/components/mobile/TitleBar/index.vue b/src/components/DiyEditor/components/mobile/TitleBar/index.vue
index aab65779..047a6c06 100644
--- a/src/components/DiyEditor/components/mobile/TitleBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/TitleBar/index.vue
@@ -56,23 +56,23 @@ defineProps<{ property: TitleBarProperty }>()
 </script>
 <style scoped lang="scss">
 .title-bar {
+  position: relative;
+  width: 100%;
+  min-height: 20px;
+  padding: 8px 16px;
   border: 2px solid #fff;
   box-sizing: border-box;
-  width: 100%;
-  padding: 8px 16px;
-  min-height: 20px;
-  position: relative;
 
   /* 更多 */
   .more {
     position: absolute;
-    right: 8px;
     top: 0;
+    right: 8px;
     bottom: 0;
+    display: flex;
     margin: auto;
     font-size: 10px;
     color: #969799;
-    display: flex;
     align-items: center;
     justify-content: center;
   }
diff --git a/src/components/DiyEditor/components/mobile/VideoPlayer/index.vue b/src/components/DiyEditor/components/mobile/VideoPlayer/index.vue
index a62dea08..fa9a914f 100644
--- a/src/components/DiyEditor/components/mobile/VideoPlayer/index.vue
+++ b/src/components/DiyEditor/components/mobile/VideoPlayer/index.vue
@@ -23,8 +23,8 @@ defineProps<{ property: VideoPlayerProperty }>()
 <style scoped lang="scss">
 /* 图片 */
 img {
+  display: block;
   width: 100%;
   height: 100%;
-  display: block;
 }
 </style>
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
index fbb7e103..44cb10a7 100644
--- a/src/components/DiyEditor/index.vue
+++ b/src/components/DiyEditor/index.vue
@@ -337,28 +337,33 @@ onMounted(() => setDefaultSelectedComponent())
 /* 手机宽度 */
 $phone-width: 375px;
 $toolbar-height: 42px;
+
 /* 根节点样式 */
 .editor {
+  display: flex;
   height: 100%;
   margin: calc(0px - var(--app-content-padding));
-  display: flex;
   flex-direction: column;
+
   /* 顶部：工具栏 */
   .editor-header {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
     height: $toolbar-height;
     padding: 0;
-    border-bottom: solid 1px var(--el-border-color);
     background-color: var(--el-bg-color);
+    border-bottom: solid 1px var(--el-border-color);
+    align-items: center;
+    justify-content: space-between;
+
     /* 工具栏：右侧按钮 */
     .header-right {
       height: 100%;
+
       .el-button {
         height: 100%;
       }
     }
+
     /* 隐藏工具栏按钮的边框 */
     :deep(.el-radio-button__inner),
     :deep(.el-button) {
@@ -367,33 +372,40 @@ $toolbar-height: 42px;
       border-radius: 0 !important;
     }
   }
+
   /* 中心操作区 */
   .editor-container {
     height: calc(
       100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) -
         $toolbar-height
     );
+
     /* 右侧属性面板 */
     .editor-right {
-      flex-shrink: 0;
-      box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
       overflow: hidden;
+      box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
+      flex-shrink: 0;
+
       /* 属性面板顶部：减少内边距 */
       :deep(.el-card__header) {
         padding: 8px 16px;
       }
+
       /* 属性面板分组 */
       :deep(.property-group) {
         margin: 0 -20px;
+
         &.el-card {
           border: none;
         }
+
         /* 属性分组名称 */
         .el-card__header {
-          border: none;
-          background: var(--el-bg-color-page);
           padding: 8px 32px;
+          background: var(--el-bg-color-page);
+          border: none;
         }
+
         .el-card__body {
           border: none;
         }
@@ -403,33 +415,36 @@ $toolbar-height: 42px;
     /* 中心区域 */
     .editor-center {
       position: relative;
-      flex: 1 1 0;
-      background-color: var(--app-content-bg-color);
       display: flex;
+      width: 100%;
+      margin: 16px 0 0;
+      overflow: hidden;
+      background-color: var(--app-content-bg-color);
+      flex: 1 1 0;
       flex-direction: column;
       justify-content: center;
-      margin: 16px 0 0 0;
-      overflow: hidden;
-      width: 100%;
 
       /* 手机顶部 */
       .editor-design-top {
+        display: flex;
         width: $phone-width;
         margin: 0 auto;
-        display: flex;
         flex-direction: column;
+
         /* 手机顶部状态栏 */
         .status-bar {
-          height: 20px;
           width: $phone-width;
+          height: 20px;
           background-color: #fff;
         }
       }
+
       /* 手机底部导航 */
       .editor-design-bottom {
         width: $phone-width;
         margin: 0 auto;
       }
+
       /* 手机页面编辑区域 */
       :deep(.editor-design-center) {
         width: 100%;
@@ -437,14 +452,15 @@ $toolbar-height: 42px;
         /* 主体内容 */
         .phone-container {
           position: relative;
+          width: $phone-width;
+          height: 100%;
+          margin: 0 auto;
           background-repeat: no-repeat;
           background-size: 100% 100%;
-          height: 100%;
-          width: $phone-width;
-          margin: 0 auto;
+
           .drag-area {
-            height: 100%;
             width: 100%;
+            height: 100%;
           }
         }
       }
diff --git a/src/components/VerticalButtonGroup/index.vue b/src/components/VerticalButtonGroup/index.vue
index 479ed559..9c78ea27 100644
--- a/src/components/VerticalButtonGroup/index.vue
+++ b/src/components/VerticalButtonGroup/index.vue
@@ -17,24 +17,28 @@ defineOptions({ name: 'VerticalButtonGroup' })
   display: inline-flex;
   flex-direction: column;
 }
+
 .el-button-group > :deep(.el-button:first-child) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-right-radius: var(--el-border-radius-base);
   border-bottom-color: var(--el-button-divide-border-color);
+  border-top-right-radius: var(--el-border-radius-base);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 }
+
 .el-button-group > :deep(.el-button:last-child) {
-  border-top-left-radius: 0;
+  border-top-color: var(--el-button-divide-border-color);
   border-top-right-radius: 0;
   border-bottom-left-radius: var(--el-border-radius-base);
-  border-top-color: var(--el-button-divide-border-color);
+  border-top-left-radius: 0;
 }
-.el-button-group :deep(.el-button--primary:not(:first-child):not(:last-child)) {
+
+.el-button-group :deep(.el-button--primary:not(:first-child, :last-child)) {
   border-top-color: var(--el-button-divide-border-color);
   border-bottom-color: var(--el-button-divide-border-color);
 }
+
 .el-button-group > :deep(.el-button:not(:last-child)) {
-  margin-bottom: -1px;
   margin-right: 0;
+  margin-bottom: -1px;
 }
 </style>
diff --git a/src/layout/components/Message/src/Message.vue b/src/layout/components/Message/src/Message.vue
index ee0ba90f..c8cf481f 100644
--- a/src/layout/components/Message/src/Message.vue
+++ b/src/layout/components/Message/src/Message.vue
@@ -91,8 +91,8 @@ onUnmounted(() => {
 }
 
 .message-list {
-  height: 400px;
   display: flex;
+  height: 400px;
   flex-direction: column;
 
   .message-item {
diff --git a/src/views/mall/statistics/member/components/MemberFunnelCard.vue b/src/views/mall/statistics/member/components/MemberFunnelCard.vue
index fc847ef3..609c679f 100644
--- a/src/views/mall/statistics/member/components/MemberFunnelCard.vue
+++ b/src/views/mall/statistics/member/components/MemberFunnelCard.vue
@@ -110,9 +110,11 @@ const handleTimeRangeChange = async (times: [dayjs.ConfigType, dayjs.ConfigType]
 .trapezoid1 {
   transform: perspective(5em) rotateX(-11deg);
 }
+
 .trapezoid2 {
   transform: perspective(7em) rotateX(-20deg);
 }
+
 .trapezoid3 {
   transform: perspective(3em) rotateX(-13deg);
 }
diff --git a/src/views/mall/trade/delivery/pickUpOrder/index.vue b/src/views/mall/trade/delivery/pickUpOrder/index.vue
index 8eb80072..fdcb7c81 100644
--- a/src/views/mall/trade/delivery/pickUpOrder/index.vue
+++ b/src/views/mall/trade/delivery/pickUpOrder/index.vue
@@ -316,6 +316,7 @@ onMounted(() => {
 :deep(.order-table-col > .cell) {
   padding: 0;
 }
+
 .summary {
   .el-col {
     margin-bottom: 1rem;