diff --git a/package.json b/package.json
index e9c315f4..421cf402 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,7 @@
     "postcss-scss": "^4.0.6",
     "prettier": "^2.8.8",
     "sass": "^1.58.3",
-    "stylelint": "^15.5.0",
+    "stylelint": "^15.7.0",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recess-order": "^4.0.0",
     "stylelint-config-recommended-scss": "11.0.0 ",
diff --git a/src/components/TagInput/index.vue b/src/components/TagInput/index.vue
index 8e99d037..92b4129b 100644
--- a/src/components/TagInput/index.vue
+++ b/src/components/TagInput/index.vue
@@ -358,11 +358,12 @@ defineExpose({
 <style lang="scss" scoped>
 .tagInputarea {
   min-width: 0;
+
   :deep {
     .tagInputareaIuput {
-      border-radius: 3px;
-      border: 1px solid #409eff;
       overflow: auto;
+      border: 1px solid #409eff;
+      border-radius: 3px;
 
       &:not(.active) {
         border-color: #ccc !important;
@@ -388,9 +389,9 @@ defineExpose({
     //   border-radius: 0 3px 3px 0;
     // }
     .CodeMirror {
-      font-family: inherit !important;
       box-sizing: border-box;
       height: auto !important;
+      font-family: inherit !important;
 
       .CodeMirror-vscrollbar {
         display: none !important;
@@ -403,12 +404,14 @@ defineExpose({
       // }
 
       .CodeMirror-lines {
-        padding: 6px 0;
         min-height: 35px;
+        padding: 6px 0;
       }
+
       .CodeMirror-line {
         padding: 0 10px;
       }
+
       .columnTagCon {
         position: relative;
         display: inline-flex;
@@ -420,69 +423,84 @@ defineExpose({
         // border: 1px solid #bbd6ea;
         // border-radius: 5px;
       }
+
       .columnTag {
         position: relative;
-        display: inline-flex;
         box-sizing: border-box;
-        cursor: pointer;
+        display: inline-flex;
         height: 24px;
         font-size: 12px;
+        cursor: pointer;
         border: 1px solid #90caf9;
         border-radius: 24px;
+
         .columnName,
         .columnValue {
           display: inline-block;
           height: 22px;
-          line-height: 22px;
           padding: 0 10px;
           overflow: hidden;
+          line-height: 22px;
         }
+
         .columnName {
           color: #2196f3;
-          background-color: rgba(33, 150, 243, 0.06);
+          background-color: rgb(33 150 243 / 6%);
         }
+
         .columnValue {
           color: #fff;
-          border-radius: 0 22px 22px 0;
           background-color: #249eff;
+          border-radius: 0 22px 22px 0;
+
           .ellipsis {
             max-width: 9em;
           }
         }
+
         &.onlytag {
           margin-right: 6px;
-          &:after {
-            content: ",";
+
+          &::after {
             position: absolute;
-            right: -6px;
             top: 6px;
+            right: -6px;
+            content: ",";
           }
         }
+
         &.deleted {
           border-color: #f44336;
+
           .columnName {
             color: #f44336;
-            background-color: rgba(244, 67, 54, 0.06);
+            background-color: rgb(244 67 54 / 6%);
           }
+
           &:hover {
             border-color: #f44336;
+
             .columnName {
               color: #f44336;
-              background-color: rgba(244, 67, 54, 0.12);
+              background-color: rgb(244 67 54 / 12%);
             }
           }
         }
+
         &:hover {
           border-color: #ddd;
+
           .columnName {
             color: #9e9e9e;
-            background-color: rgba(158, 158, 158, 0.06);
+            background-color: rgb(158 158 158 / 6%);
           }
+
           .columnValue {
             background-color: #bdbdbd;
           }
         }
       }
+
       .operator {
         margin: 0 4px;
       }
diff --git a/src/views/dashboard/components/BarChart.vue b/src/views/dashboard/components/BarChart.vue
index e4670063..fa581bfc 100644
--- a/src/views/dashboard/components/BarChart.vue
+++ b/src/views/dashboard/components/BarChart.vue
@@ -185,8 +185,10 @@ const downloadEchart = () => {
 .title {
   display: flex;
   justify-content: space-between;
+
   .download {
     cursor: pointer;
+
     &:hover {
       color: #409eff;
     }
diff --git a/src/views/demo/signature.vue b/src/views/demo/signature.vue
index 51bc32f3..ee713325 100644
--- a/src/views/demo/signature.vue
+++ b/src/views/demo/signature.vue
@@ -66,6 +66,7 @@ const handleToFile = async () => {
     return;
   }
   const file = dataURLtoFile(canvas.value.toDataURL(), "签名.png");
+
   if (!file) return;
   const { data } = await uploadFileApi(file);
   handleClearSign();
@@ -104,14 +105,14 @@ const dataURLtoFile = (dataurl: string, filename: string) => {
   if (!arr.length) return;
 
   const mime = arr[0].match(/:(.*?);/);
-  if (mime && !mime.length) {
+  if (mime) {
     const bstr = atob(arr[1]);
     let n = bstr.length;
     const u8arr = new Uint8Array(n);
     while (n--) {
       u8arr[n] = bstr.charCodeAt(n);
     }
-    return new File([u8arr], filename, { type: mime[0] });
+    return new File([u8arr], filename, { type: mime[1] });
   }
 };
 // canvas 画图
@@ -188,18 +189,19 @@ function eraser(
 .canvas-dom {
   width: 100%;
   height: 100%;
-  padding: 0px 20px;
+  padding: 0 20px;
   background-color: #fff;
+
   canvas {
     border: 1px solid #e6e6e6;
   }
 
   header {
-    width: 100%;
-    margin: 8px;
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
+    width: 100%;
+    margin: 8px;
 
     .eraser-option {
       display: flex;
diff --git a/src/views/demo/table.vue b/src/views/demo/table.vue
index 1249964a..28ea846f 100644
--- a/src/views/demo/table.vue
+++ b/src/views/demo/table.vue
@@ -57,7 +57,6 @@
       :http-request="handleUploadFile"
     >
       <i-ep-upload-filled class="icon"></i-ep-upload-filled>
-      <!-- <el-icon class="el-icon--upload"><upload-filled /></el-icon> -->
       <div class="el-upload__text">拖拽excel到这里</div>
     </el-upload>
     <div v-loading="loading" class="excel-table-wrap">
@@ -126,7 +125,7 @@ const orginData = [
     address: "湖南",
     id: 4,
     gender: "男",
-    height: 173,
+    height: 176,
     school: "清华大学",
     hobby: "游泳",
   },
@@ -410,24 +409,28 @@ const readFile = (file: any, callback: any) => {
       }
     }
   }
+
   .upload {
-    margin-top: 16px;
-    border: 2px dashed #90caf9;
-    border-radius: 2px;
     box-sizing: border-box;
     height: 230px;
+    margin-top: 16px;
     margin-bottom: 20px;
     background-color: #e3f2fd;
+    border: 2px dashed #90caf9;
+    border-radius: 2px;
+
     :deep(.el-upload-dragger) {
+      padding: 0;
       background-color: #e3f2fd;
       border: none;
-      padding: 0px;
+
       .icon {
         font-size: 110px;
         color: #90caf9;
       }
     }
   }
+
   .excel-table-wrap {
     width: 100%;
     min-height: 300px;
diff --git a/src/views/demo/taginput.vue b/src/views/demo/taginput.vue
index ec016847..9301bb05 100644
--- a/src/views/demo/taginput.vue
+++ b/src/views/demo/taginput.vue
@@ -71,20 +71,22 @@ const onBlur = (): void => {
   width: 500px;
   height: auto;
   margin: 10px;
+
   :deep {
     .tag-demo-con {
       .tag-wrap {
         height: 25px;
         line-height: 25px;
+
         .tag {
+          box-sizing: border-box;
           display: inline-block;
           padding: 2px 8px;
-          box-sizing: border-box;
-          border-radius: 16px;
-          background: #d8eeff;
-          color: #174c76;
-          border: 1px solid #bbd6ea;
           margin: 0 4px;
+          color: #174c76;
+          background: #d8eeff;
+          border: 1px solid #bbd6ea;
+          border-radius: 16px;
         }
         // padding: 4px;
         // margin: 4px;
@@ -95,6 +97,7 @@ const onBlur = (): void => {
       }
     }
   }
+
   .tag-wrap {
     margin-top: 10px;
   }