优化组件样式

package.json

@@ -13,6 +13,7 @@
         "axios": "^0.21",
         "cross-env": "^7.0.2",
         "css-loader": "^0.28.7",
+        "file-loader": "^2.0.0",
         "jquery": "^3.5.1",
         "laravel-mix": "^6.0.6",
         "lodash": "^4.17.19",

resources/assets/js/components/ImgUpload.vue

@@ -75,18 +75,22 @@
 </template>
 
 <style lang="scss">
+:global {
     .img-upload-modal {
         .ivu-modal-mask {
             z-index: 1001;
         }
+
         .ivu-modal-no-mask {
-            background-color: rgba(55,55,55,.2);
+            background-color: rgba(55, 55, 55, .2);
         }
+
         .ivu-modal-wrap {
             z-index: 1001;
         }
     }
-    .imgcomp-upload-list{
+
+    .imgcomp-upload-list {
         display: inline-block;
         width: 60px;
         height: 60px;
@@ -97,9 +101,10 @@
         overflow: hidden;
         background: #fff;
         position: relative;
-        box-shadow: 0 1px 1px rgba(0,0,0,.2);
+        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
         margin-right: 4px;
         vertical-align: top;
+
         .imgcomp-upload-img {
             position: absolute;
             top: 0;
@@ -109,16 +114,18 @@
             background-position: center;
             background-size: cover;
         }
-        .imgcomp-upload-list-cover{
+
+        .imgcomp-upload-list-cover {
             display: none;
             position: absolute;
             top: 0;
             bottom: 0;
             left: 0;
             right: 0;
-            background: rgba(0,0,0,.6);
+            background: rgba(0, 0, 0, .6);
         }
-        .imgcomp-upload-list-cover i{
+
+        .imgcomp-upload-list-cover i {
             color: #fff;
             font-size: 24px;
             cursor: pointer;
@@ -126,29 +133,36 @@
             margin: 0;
             transition: all .2s;
         }
-        .imgcomp-upload-list-cover i:hover{
+
+        .imgcomp-upload-list-cover i:hover {
             font-size: 28px;
         }
+
         .ivu-progress-outer {
             background-color: rgba(0, 0, 0, 0.68);
-            .ivu-progress-inner{
+
+            .ivu-progress-inner {
                 width: 88%;
             }
         }
     }
-    .imgcomp-upload-list:hover .imgcomp-upload-list-cover{
+
+    .imgcomp-upload-list:hover .imgcomp-upload-list-cover {
         display: block;
     }
+
     .img-upload-foot {
         display: flex;
         align-items: center;
         justify-content: flex-end;
+
         .img-upload-foot-input {
             flex: 1;
             text-align: left;
             display: flex;
             align-items: center;
             justify-content: flex-end;
+
             .img-upload-foot-httptitle {
                 cursor: pointer;
                 padding-left: 3px;
@@ -156,6 +170,7 @@
             }
         }
     }
+
     .add-box {
         width: 60px;
         height: 60px;
@@ -168,12 +183,14 @@
         position: relative;
         overflow: hidden;
         vertical-align: top;
+
         .add-box-icon {
             i {
-                vertical-align:middle;
+                vertical-align: middle;
                 padding-bottom: 2px;
             }
         }
+
         .add-box-upload {
             display: none;
             position: absolute;
@@ -184,36 +201,44 @@
             color: #ffffff;
             padding-top: 9px;
             background: rgba(0, 0, 0, 0.6);
+
             .add-box-item {
                 height: 22px;
                 line-height: 22px;
                 cursor: pointer;
-                .ivu-upload-drag,.ivu-upload-drag:hover {
+
-                    background:transparent;
+                .ivu-upload-drag, .ivu-upload-drag:hover {
-                    border:0;
+                    background: transparent;
-                    border-radius:0;
+                    border: 0;
+                    border-radius: 0;
                 }
+
                 span {
                     transition: all .2s;
                     font-size: 12px;
                 }
             }
+
             .add-box-item:hover {
                 span {
                     font-size: 14px;
                 }
             }
         }
+
         em {
             font-style: normal;
         }
     }
+
     .add-box:hover {
-        border-color: rgba(0,0,0,.6);
+        border-color: rgba(0, 0, 0, .6);
+
         .add-box-upload {
             display: block;
         }
     }
+
     .callback-add-box {
         display: block;
         width: auto;
@@ -221,34 +246,41 @@
         line-height: 25px;
         border: 0;
         background: transparent;
+
         .add-box-icon {
             display: none;
         }
+
         .add-box-upload {
             display: block;
             width: auto;
             background: transparent;
             color: #333;
             padding: 0;
+
             > div {
                 display: inline-block;
                 padding-right: 10px;
             }
         }
     }
+
     .browse-load {
         margin: 20px;
         text-align: center;
     }
+
     .browse-list {
         max-height: 540px;
         overflow: auto;
+
         .browse-item {
             margin: 10px 15px;
             display: inline-block;
             text-align: center;
             cursor: pointer;
             position: relative;
+
             .browse-img {
                 width: 64px;
                 height: 64px;
@@ -257,6 +289,7 @@
                 background-repeat: no-repeat;
                 background-size: cover;
             }
+
             .browse-title {
                 display: block;
                 width: 64px;
@@ -265,6 +298,7 @@
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
+
             .browse-icon {
                 position: absolute;
                 top: 0;
@@ -278,9 +312,11 @@
             }
         }
     }
+
     .browse-list-disabled {
         position: relative;
     }
+
     .browse-list-disabled:after {
         position: absolute;
         content: '';
@@ -291,6 +327,7 @@
         background-color: rgba(255, 255, 255, 0.9);
         z-index: 1;
     }
+}
 </style>
 <script>
     export default {

resources/assets/js/components/Loading.vue

@@ -1,12 +1,10 @@
 <template>
-    <svg viewBox="25 25 50 50" class="common-loading"><circle cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10" class="w-path"></circle></svg>
+    <svg viewBox="25 25 50 50" class="common-loading"><circle cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10" class="common-path"></circle></svg>
 </template>
 
 <style lang="scss" scoped>
+:global {
     .common-loading {
-        -webkit-animation: rotate 2s linear infinite;
-        animation: rotate 2s linear infinite;
-        -webkit-transform-origin: center center;
         transform-origin: center center;
         width: 30px;
         height: 30px;
@@ -14,18 +12,17 @@
         max-height: 100%;
         margin: auto;
         overflow: hidden;
-        .w-path {
+        &:local {
-            stroke-dasharray: 1,200;
+            animation: rotate 2s linear infinite;
-            stroke-dashoffset: 0;
-            -webkit-animation: dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;
-            animation: dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;
-            stroke-linecap: round;
         }
-    }
+
-    @-webkit-keyframes rotate {
+        .common-path {
-        to {
+            stroke-dasharray: 1, 200;
-            -webkit-transform: rotate(1turn);
+            stroke-dashoffset: 0;
-            transform: rotate(1turn)
+            stroke-linecap: round;
+            &:local {
+                animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+            }
         }
     }
     @keyframes rotate {
@@ -34,57 +31,24 @@
             transform: rotate(1turn)
         }
     }
-    @-webkit-keyframes dash {
-        0% {
-            stroke-dasharray: 1,200;
-            stroke-dashoffset: 0
-        }
-
-        50% {
-            stroke-dasharray: 89,200;
-            stroke-dashoffset: -35
-        }
-
-        to {
-            stroke-dasharray: 89,200;
-            stroke-dashoffset: -124
-        }
-    }
     @keyframes dash {
         0% {
-            stroke-dasharray: 1,200;
+            stroke-dasharray: 1, 200;
             stroke-dashoffset: 0
         }
 
         50% {
-            stroke-dasharray: 89,200;
+            stroke-dasharray: 89, 200;
             stroke-dashoffset: -35
         }
 
         to {
-            stroke-dasharray: 89,200;
+            stroke-dasharray: 89, 200;
             stroke-dashoffset: -124
         }
     }
-    @-webkit-keyframes color {
-        0%,to {
-            stroke: #d62d20
-        }
-
-        40% {
-            stroke: #0057e7
-        }
-
-        66% {
-            stroke: #008744
-        }
-
-        80%,90% {
-            stroke: #ffa700
-        }
-    }
     @keyframes color {
-        0%,to {
+        0%, to {
             stroke: #d62d20
         }
 
@@ -96,10 +60,11 @@
             stroke: #008744
         }
 
-        80%,90% {
+        80%, 90% {
             stroke: #ffa700
         }
     }
+}
 </style>
 <script>
     export default {

resources/assets/js/components/Spinner.vue

@@ -5,6 +5,7 @@
 </template>
 
 <style lang="scss" scoped>
+:global {
     .common-spinner {
         display: none;
         position: fixed;
@@ -14,6 +15,7 @@
         margin: 0 auto;
         width: 30px;
         height: 30px;
+
         .common-circular {
             position: absolute;
             top: 0;
@@ -24,6 +26,7 @@
             height: 100%;
         }
     }
+}
 </style>
 <script>
     export default {

resources/assets/js/components/TEditor.vue

@@ -50,16 +50,19 @@
 </template>
 
 <style lang="scss">
+:global {
     .teditor-box {
         textarea {
             opacity: 0;
         }
+
         .tox-tinymce {
             box-shadow: none;
             box-sizing: border-box;
             border-color: #dddee1;
             border-radius: 4px;
             overflow: hidden;
+
             .tox-statusbar {
                 span.tox-statusbar__branding {
                     a {
@@ -69,8 +72,10 @@
             }
         }
     }
+
     .teditor-transfer {
         background-color: #ffffff;
+
         .tox-toolbar {
             > div:last-child {
                 > button:last-child {
@@ -78,13 +83,16 @@
                 }
             }
         }
+
         .ivu-modal-header {
             display: none;
         }
+
         .ivu-modal-close {
             top: 7px;
             z-index: 2;
         }
+
         .teditor-transfer-body {
             position: absolute;
             top: 0;
@@ -93,11 +101,14 @@
             height: 100%;
             padding: 0;
             margin: 0;
+
             textarea {
                 opacity: 0;
             }
+
             .tox-tinymce {
                 border: 0;
+
                 .tox-statusbar {
                     span.tox-statusbar__branding {
                         a {
@@ -108,31 +119,37 @@
             }
         }
     }
+
     .tox {
         &.tox-silver-sink {
             z-index: 13000;
         }
     }
+}
 </style>
 <style lang="scss" scoped>
+:global {
     .teditor-loadstyle {
         width: 100%;
         height: 180px;
         overflow: hidden;
         position: relative;
     }
+
     .teditor-loadedstyle {
         width: 100%;
         max-height: inherit;
         overflow: inherit;
         position: relative;
     }
+
     .upload-control {
         display: none;
         width: 0;
         height: 0;
         overflow: hidden;
     }
+}
 </style>
 
 <script>

resources/assets/js/components/TagInput.vue

@@ -11,6 +11,7 @@
 </template>
 
 <style lang="scss">
+:global {
     .tags-wrap {
         display: inline-block;
         width: 100%;
@@ -26,6 +27,7 @@
         line-height: normal;
         -webkit-transition: border .2s ease-in-out, background .2s ease-in-out, -webkit-box-shadow .2s ease-in-out;
         transition: border .2s ease-in-out, background .2s ease-in-out, -webkit-box-shadow .2s ease-in-out;
+
         .tags-item, .tags-input {
             position: relative;
             float: left;
@@ -35,9 +37,11 @@
             line-height: 22px;
             margin: 2px 6px 2px 0;
             padding: 0 20px 0 6px;
+
             .tags-content {
                 line-height: 22px;
             }
+
             .tags-del {
                 width: 20px;
                 height: 22px;
@@ -48,6 +52,7 @@
                 right: 0;
             }
         }
+
         .tags-input {
             max-width: 80%;
             padding: 0;
@@ -61,9 +66,11 @@
             resize: none;
             overflow: hidden;
         }
+
         .tags-input::placeholder {
             color: #bbbbbb;
         }
+
         .tags-placeholder {
             position: absolute;
             left: 0;
@@ -79,6 +86,7 @@
         height: 0;
         clear: both;
     }
+}
 </style>
 <script>
     export default {

webpack.mix.js

@@ -29,6 +29,9 @@ mix
             }
         },
     })
+    .options({
+        processCssUrls: false
+    })
     .vue({
         version: 2,
     });