首页

src/styles/home/agent-charge.scss

@@ -0,0 +1,103 @@
+.hc-agent-charge {
+    position: relative;
+    .active-menus {
+        flex: 1;
+        height: 62px;
+        display: flex;
+        background-color: #F8F8F8;
+        border-radius: 10px 10px 0 0;
+    }
+    .active-item {
+        padding: 10px;
+        display: flex;
+        cursor: pointer;
+    }
+    .active-select {
+        background-color: #FFFFFF;
+        border-radius: 10px 0 0 0 ;
+    }
+    .triangle-bottomleft {
+        width: 0;
+        height: 0;
+        border-bottom: 64px solid #F8F8F8;
+        border-right: 30px solid transparent;
+    }
+    .b-b-b-w {
+        border-bottom-color: #FFFFFF;
+    }
+    .active-body {
+        overflow: hidden;
+    }
+    .info-item{
+        position: relative;
+        padding: 10px;
+        color: #50545E;
+        margin-bottom: 10px;
+        background-color: #F8FAFF;
+        border: 1px solid #EEEEEE;
+        border-radius: 10px;
+        .frame-warning {
+            position: absolute;
+            top: 0;
+            left: 10px;
+            bottom: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .frame-content {
+            position: relative;
+            font-size: 14px;
+            padding-left: 24px;
+            width: calc(100% - 220px);
+            line-height: 1.5;
+            .title-common{
+                color: #838791;
+            }
+            .title-text{
+                color: #50545E;
+            }
+            .title-red{
+                margin-left: 6px;
+                color: #EB4D3D;
+            }
+        }
+        .frame-time {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 10px;
+            color: #838791;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+        }
+        .frame-time.is-more {
+            margin-right: 20px;
+        }
+        .frame-more {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 5px;
+            display: flex;
+            align-items: center;
+            .more-icon {
+                color: #838791;
+                font-size: 20px;
+            }
+        }
+    }
+    .border-bottom-10 {
+        border-radius: 0 0 10px 10px;
+    }
+}
+
+.hc-agent-charge .active-body {
+    .hc-no-data-box .no-data-c {
+        width: 200px;
+    }
+    .el-scrollbar__bar.is-vertical {
+        right: -9px;
+    }
+}

src/views/home/modules/agent-charge.vue

@@ -142,110 +142,6 @@ const ignore = (val) => {
 }
 </script>
 
-<style lang="scss" scoped>
-.hc-agent-charge {
-    position: relative;
-    .active-menus {
-        flex: 1;
-        height: 62px;
-        display: flex;
-        background-color: #F8F8F8;
-        border-radius: 10px 10px 0 0;
-    }
-    .active-item {
-        padding: 10px;
-        display: flex;
-        cursor: pointer;
-    }
-    .active-select {
-        background-color: #FFFFFF;
-        border-radius: 10px 0 0 0 ;
-    }
-    .triangle-bottomleft {
-        width: 0;
-        height: 0;
-        border-bottom: 64px solid #F8F8F8;
-        border-right: 30px solid transparent;
-    }
-    .b-b-b-w {
-        border-bottom-color: #FFFFFF;
-    }
-    .active-body {
-        overflow: hidden;
-    }
-    .info-item{
-        position: relative;
-        padding: 10px;
-        color: #50545E;
-        margin-bottom: 10px;
-        background-color: #F8FAFF;
-        border: 1px solid #EEEEEE;
-        border-radius: 10px;
-        .frame-warning {
-            position: absolute;
-            top: 0;
-            left: 10px;
-            bottom: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .frame-content {
-            position: relative;
-            font-size: 14px;
-            padding-left: 24px;
-            width: calc(100% - 220px);
-            line-height: 1.5;
-            .title-common{
-                color: #838791;
-            }
-            .title-text{
-                color: #50545E;
-            }
-            .title-red{
-                margin-left: 6px;
-                color: #EB4D3D;
-            }
-        }
-        .frame-time {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            right: 10px;
-            color: #838791;
-            font-size: 14px;
-            display: flex;
-            align-items: center;
-        }
-        .frame-time.is-more {
-            margin-right: 20px;
-        }
-        .frame-more {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            right: 5px;
-            display: flex;
-            align-items: center;
-            .more-icon {
-                color: #838791;
-                font-size: 20px;
-            }
-        }
-    }
-}
-.border-bottom-10 {
-    border-radius: 0 0 10px 10px;
-}
-</style>
-
 <style lang="scss">
-.hc-agent-charge .active-body {
-    .hc-no-data-box .no-data-c {
-        width: 200px;
-    }
-    .el-scrollbar__bar.is-vertical {
-        right: -9px;
-    }
-}
+@import '~src/styles/home/agent-charge';
 </style>