fix: stylelint

Author: xingyuv

src/components/DiyEditor/components/ComponentContainer.vue

@@ -126,93 +126,106 @@ $active-border-width: 2px;
 $hover-border-width: 1px;
 $name-position: -85px;
 $toolbar-position: -55px;
+
 /* 组件 */
 .component {
   position: relative;
   cursor: move;
+
   .component-wrap {
-    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 rgba(24, 144, 255, 0.3);
+      box-shadow: 0 0 5px 0 rgb(24 144 255 / 30%);
+
       .component-name {
+        top: $hover-border-width;
+
         /* 防止加了边框之后，位置移动 */
         left: $name-position - $hover-border-width;
-        top: $hover-border-width;
       }
     }
+
     /* 左侧：组件名称 */
     .component-name {
-      display: block;
       position: absolute;
+      top: $active-border-width;
+      left: $name-position;
+      display: block;
       width: 80px;
-      text-align: center;
-      line-height: 25px;
       height: 25px;
-      background: #fff;
       font-size: 12px;
-      left: $name-position;
-      top: $active-border-width;
+      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 {
-      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 {
-      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;
       }

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;
 }

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;

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>

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;

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 {

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;

src/components/DiyEditor/components/mobile/TitleBar/index.vue

@@ -56,23 +56,23 @@ defineProps<{ property: TitleBarProperty }>()
 </script>
 <style scoped lang="scss">
 .title-bar {
-  border: 2px solid #fff;
-  box-sizing: border-box;
+  position: relative;
   width: 100%;
-  padding: 8px 16px;
   min-height: 20px;
-  position: relative;
+  padding: 8px 16px;
+  border: 2px solid #fff;
+  box-sizing: border-box;
 
   /* 更多 */
   .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;
   }

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>