css

src/views/chartRelevance_manage/css/index.scss

@@ -0,0 +1,188 @@
+* {
+  box-sizing: border-box;
+}
+$mini-font: 12px;
+$normal-font: 14px;
+.pub-chart-box {
+  .slide-icon {
+    padding: 20px 0;
+    /* display: block; */
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 99;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    &.slide-left {
+      right: 0;
+    }
+    &.slide-right {
+      left: 0;
+    }
+  }
+  .data-sheet-main {
+    display: flex;
+
+    .main-left {
+      width: 400px;
+      min-width: 300px;
+      background: #fff;
+      margin-right: 20px;
+      border: 1px solid #ececec;
+      border-radius: 4px;
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
+      height: calc(100vh - 120px);
+      overflow: hidden;
+      position: relative;
+      box-sizing: border-box;
+
+      .datasheet_top {
+        padding: 20px;
+        background: #fff;
+        border: 1px solid #ececec;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+        margin-bottom: 20px;
+      }
+      .search-cont {
+        padding: 0 20px;
+      }
+
+      .left-tab {
+        display: flex;
+        align-items: center;
+        padding: 20px 20px 0;
+        .tab {
+          cursor: pointer;
+          font-size: 16px;
+          border-bottom: 2px solid transparent;
+          margin-right: 40px;
+          padding-bottom: 5px;
+          &.act {
+            color: #409eff;
+            border-color: #409eff;
+          }
+          &:hover {
+            color: #409eff;
+          }
+        }
+      }
+
+      .tree-cont {
+        padding: 30px 20px;
+        max-height: calc(100vh - 280px);
+        overflow: auto;
+      }
+      .target_tree {
+        color: #333;
+        .custom-tree-node {
+          display: flex !important;
+          justify-content: space-between;
+          align-items: center;
+          display: block;
+          flex: 1;
+          .node_label {
+            margin-right: 2px;
+          }
+          .el-icon-view {
+            color: #409eff;
+            font-size: 18px;
+            margin-left: 5px;
+          }
+        }
+      }
+      .noDepart {
+        margin: 60px 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #409eff;
+        font-size: 16px;
+        cursor: pointer;
+      }
+      .move-btn {
+        height: 100%;
+        width: 4px;
+        /* opacity: 0; */
+        position: absolute;
+        right: 0px;
+        top: 0;
+        &:hover {
+          cursor: col-resize;
+          /* background-color: orange */
+        }
+      }
+    }
+
+    .main-right {
+      width: 80%;
+      .chart-detail-wrapper {
+        height: calc(100vh - 120px);
+        border: 1px solid #ececec;
+        border-radius: 4px;
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
+        overflow: auto;
+        background: #fff;
+        padding: 30px;
+
+        .bottom-min {
+          border: 1px solid #dcdfe6;
+          margin-bottom: 20px;
+
+          .chart-show-cont {
+            padding: 0 160px 0 120px;
+            position: relative;
+            min-height: 400px;
+            .chart-title {
+              font-size: 16px;
+              font-weight: normal;
+              text-align: center;
+              margin-bottom: 10px;
+            }
+            .chart-author {
+              font-size: 14px;
+              color: #333;
+              position: absolute;
+              bottom: 0;
+              right: 50px;
+            }
+            .chartWrapper {
+              position: relative;
+              .range-cont {
+                position: absolute;
+                top: 13%;
+                .min-data-input {
+                  width: 60px;
+                  display: block;
+                }
+                &.left {
+                  left: -80px;
+                }
+                &.right {
+                  right: -65px;
+                }
+                &.rightTwo {
+                  right: -130px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    @media screen and (min-width: 1711px) {
+      .min-data-input {
+        margin-top: 360px;
+      }
+    }
+    @media screen and (max-width: 1710px) {
+      .min-data-input {
+        margin-top: 290px;
+      }
+    }
+  }
+}

src/views/chartRelevance_manage/css/pub.scss

@@ -0,0 +1,49 @@
+.pub-chart-box {
+	.label-input .el-input__inner {
+		height: 25px;
+		line-height: 25px;
+		padding: 0 10px;
+	}
+
+	.range-cont .el-input__inner {
+		padding: 0 3px;
+	}
+
+	.el-tree__drop-indicator{
+		height:3px;
+		background-color:#409EFF;
+	}
+	.el-tree-node__content {
+		margin-bottom: 14px !important;
+	}
+	.el-tree-node__children {
+		.el-tree-node {
+			/* margin-bottom: 8px !important; */
+			margin-bottom: 0px !important;
+			padding-left: 18px;
+		}
+		.el-tree-node__content {
+			margin-bottom: 5px !important;
+			padding-left: 0 !important;
+		}
+	}
+	.expanded.el-icon-caret-right:before {
+		content: url('~@/assets/img/set_m/down.png') !important;
+	}
+	.el-icon-caret-right:before {
+		content: url('~@/assets/img/set_m/slide.png') !important;
+	}
+	.el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
+		content: '' !important;
+	}
+	.el-tree-node__expand-icon.expanded {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	.el-tree-node.is-current > .el-tree-node__content {
+		background-color: #f0f4ff !important;
+	}
+	.el-tree-node__content {
+		padding-right: 10px !important;
+	}
+}

src/views/chartRelevance_manage/fittingEquationList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="fittingEquation-chart-container" v-if="showData">
+	<div class="fittingEquation-chart-container pub-chart-box" v-if="showData">
 		<span
 			class="slide-icon slide-right"
 			@click="isSlideLeft = !isSlideLeft"
@@ -634,307 +634,9 @@ export default {
 }
 </script>
 <style lang='scss' scoped>
-*{ box-sizing: border-box;}
-$mini-font: 12px; $normal-font: 14px;
-.fittingEquation-chart-container {
-	.slide-icon {
-		padding: 20px 0;
-		/* display: block; */
-		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
-		border-radius: 5px;
-		cursor: pointer;
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		z-index: 99;
-		&:hover {
-			background-color: rgba(0, 0, 0, 0.05);
-		}
-		&.slide-left {
-			right: 0;
-		}
-		&.slide-right {
-			left: 0;
-		}
-	}
-	.data-sheet-main {
-		display: flex;
-
-		.main-left {
-			width: 400px;
-			min-width: 300px;
-			background: #fff;
-			margin-right: 20px;
-			border: 1px solid #ececec;
-			border-radius: 4px;
-			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-			height: calc(100vh - 120px);
-			overflow: hidden;
-			position: relative;
-			box-sizing: border-box;
-
-			.datasheet_top {
-				padding: 20px;
-				background: #fff;
-				border: 1px solid #ececec;
-				box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
-				margin-bottom: 20px;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-			}
-			.search-cont {
-				padding: 0 20px;
-			}
-
-
-
-			.tree-cont {
-				padding: 30px 20px;
-				max-height: calc(100vh - 280px);
-				overflow: auto;
-			}
-			.target_tree {
-				color: #333;
-				.custom-tree-node {
-					display: flex !important;
-					justify-content: space-between;
-					align-items: center;
-					display: block;
-					flex: 1;
-					.node_label {
-						margin-right: 2px;
-					}
-					.el-icon-view {
-						color: #409EFF;
-						font-size: 18px;
-						margin-left: 5px;
-					}
-				}
-			}
-			.noDepart {
-				margin: 60px 0;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				color: #409eff;
-				font-size: 16px;
-				cursor: pointer;
-			}
-			.move-btn {
-				height: 100%;
-				width: 4px;
-				/* opacity: 0; */
-				position: absolute;
-				right: 0px;
-				top: 0;
-				&:hover {
-				cursor: col-resize;
-					/* background-color: orange */
-				}
-			}
-		}
-
-		.main-right {
-			width: 80%;
-			.chart-detail-wrapper {
-				height: calc(100vh - 120px);
-				border: 1px solid #ececec;
-				border-radius: 4px;
-				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-				overflow: auto;
-				background: #fff;
-				padding: 30px;
-				.bottom-min {
-					border: 1px solid #DCDFE6;
-					margin-bottom: 20px;
-					.right-actions {
-						/* max-width: 160px; */
-						height: 100%;
-						padding: 20px 10px;
-						border-left: 1px solid #DCDFE6;
-						li {
-							margin-bottom: 15px;
-						}
-						@media screen and (max-width: 1710px) {
-							font-size: 12px;
-						}
-						.span-item {
-							color: #409eff;
-							cursor: pointer;
-							&:hover {
-								text-decoration: underline;
-							}
-							.el-icon-collection,
-							.el-icon-document-copy {
-								color: #409eff;
-							}
-						}
-					}
-					.chart-show-cont {
-              padding: 0 160px 0 120px;
-              position: relative;
-							min-height: 400px;
-              .chart-title {
-                font-size: 16px;
-                font-weight: normal;
-                text-align: center;
-                margin-bottom: 10px;
-              }
-              .chart-author {
-                font-size: 14px;
-                color: #333;
-                position: absolute;
-                bottom: 0;
-                right: 50px;
-              }
-              .chartWrapper {
-                position: relative;
-                .range-cont {
-                  position: absolute;
-                  top: 13%;
-                  .min-data-input {
-                    width: 60px;
-                    display: block;
-                  }
-                  &.left {
-                    left: -80px;
-                  }
-                  &.right {
-                    right: -65px;
-                  }
-                  &.rightTwo {
-                    right: -130px;
-                  }
-                }
-              }
-          }
-				}
-			}
-
-			.chart-list-cont {
-				color: #333;
-				.el-card .el-card__header,
-				.el-card__body {
-					padding: 10px;
-				}
-
-				.chartList-wrapper {
-					margin-top: 10px;
-					display: flex;
-					flex-wrap: wrap;
-					max-height: calc(100vh - 143px);
-					overflow: hidden;
-					overflow-y: auto;
-					.drag-cont {
-						width: 100%;
-						display: flex;
-						flex-wrap: wrap;
-					}
-					.dragShdow {
-						box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
-						opacity: 0.5;
-					}
-					.sheet-item {
-						position: relative;
-						.item-top {
-							display: flex;
-							justify-content: space-between;
-							align-items: center;
-							font-size: 16px;
-							font-weight: 600;
-						}
-						.chart-img {
-							width: 100%;
-							height: 230px;
-							object-fit: contain !important;
-							cursor: pointer;
-						}
-						.item-bottom {
-							margin-top: 10px;
-							display: flex;
-							justify-content: space-between;
-							font-size: 12px;
-							color: #666;
-							.collected {
-								color: #f00;
-								cursor: pointer;
-							}
-							.join_txt {
-								color: #409eff;
-								cursor: pointer;
-							}
-						}
-					}
-				}
-				.nodata {
-					text-align: center;
-				}
-			}
-		}
-		
-		@media screen and (min-width: 1711px){
-			.min-data-input {
-				margin-top: 360px;
-			}
-		}
-		@media screen and (max-width: 1710px){
-			.min-data-input {
-				margin-top: 290px;
-			}
-		}
-	}
-}
+@import './css/index.scss';
 </style>
 
 <style lang="scss">
-.fittingEquation-chart-container {
-	.label-input .el-input__inner {
-		height: 25px;
-		line-height: 25px;
-		padding: 0 10px;
-	}
-
-	.range-cont .el-input__inner {
-		padding: 0 3px;
-	}
-
-	.el-tree__drop-indicator{
-		height:3px;
-		background-color:#409EFF;
-	}
-	.el-tree-node__content {
-		margin-bottom: 14px !important;
-	}
-	.el-tree-node__children {
-		.el-tree-node {
-			/* margin-bottom: 8px !important; */
-			margin-bottom: 0px !important;
-			padding-left: 18px;
-		}
-		.el-tree-node__content {
-			margin-bottom: 5px !important;
-			padding-left: 0 !important;
-		}
-	}
-	.expanded.el-icon-caret-right:before {
-		content: url('../../assets/img/set_m/down.png') !important;
-	}
-	.el-icon-caret-right:before {
-		content: url('../../assets/img/set_m/slide.png') !important;
-	}
-	.el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
-		content: '' !important;
-	}
-	.el-tree-node__expand-icon.expanded {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
-	}
-	.el-tree-node.is-current > .el-tree-node__content {
-		background-color: #f0f4ff !important;
-	}
-	.el-tree-node__content {
-		padding-right: 10px !important;
-	}
-}
+@import './css/pub.scss';
 </style>

src/views/chartRelevance_manage/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="comodity-chart-container" v-if="showData">
+  <div class="comodity-chart-container pub-chart-box" v-if="showData">
     <span
       class="slide-icon slide-right"
       @click="isSlideLeft = !isSlideLeft"
@@ -745,326 +745,10 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-* {
-  box-sizing: border-box;
-}
-$mini-font: 12px;
-$normal-font: 14px;
-.comodity-chart-container {
-  .slide-icon {
-    padding: 20px 0;
-    /* display: block; */
-    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
-    border-radius: 5px;
-    cursor: pointer;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 99;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-    &.slide-left {
-      right: 0;
-    }
-    &.slide-right {
-      left: 0;
-    }
-  }
-  .data-sheet-main {
-    display: flex;
-
-    .main-left {
-      width: 400px;
-      min-width: 300px;
-      background: #fff;
-      margin-right: 20px;
-      border: 1px solid #ececec;
-      border-radius: 4px;
-      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-      height: calc(100vh - 120px);
-      overflow: hidden;
-      position: relative;
-      box-sizing: border-box;
-
-      .datasheet_top {
-        padding: 20px;
-        background: #fff;
-        border: 1px solid #ececec;
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
-        margin-bottom: 20px;
-      }
-      .search-cont {
-        padding: 0 20px;
-      }
-
-      .left-tab {
-        display: flex;
-        align-items: center;
-        padding: 20px 20px 0;
-        .tab {
-          cursor: pointer;
-          font-size: 16px;
-          border-bottom: 2px solid transparent;
-          margin-right: 40px;
-          padding-bottom: 5px;
-          &.act {
-            color: #409eff;
-            border-color: #409eff;
-          }
-          &:hover {
-            color: #409eff;
-          }
-        }
-      }
-
-      .tree-cont {
-        padding: 30px 20px;
-        max-height: calc(100vh - 320px);
-        overflow: auto;
-      }
-      .target_tree {
-        color: #333;
-        .custom-tree-node {
-          display: flex !important;
-          justify-content: space-between;
-          align-items: center;
-          display: block;
-          flex: 1;
-          .node_label {
-            margin-right: 2px;
-          }
-          .el-icon-view {
-            color: #409eff;
-            font-size: 18px;
-            margin-left: 5px;
-          }
-        }
-      }
-      .noDepart {
-        margin: 60px 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #409eff;
-        font-size: 16px;
-        cursor: pointer;
-      }
-      .move-btn {
-        height: 100%;
-        width: 4px;
-        /* opacity: 0; */
-        position: absolute;
-        right: 0px;
-        top: 0;
-        &:hover {
-          cursor: col-resize;
-          /* background-color: orange */
-        }
-      }
-    }
-
-    .main-right {
-      width: 80%;
-      .chart-detail-wrapper {
-        height: calc(100vh - 120px);
-        border: 1px solid #ececec;
-        border-radius: 4px;
-        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-        overflow: auto;
-        background: #fff;
-        padding: 30px;
-        .bottom-min {
-          border: 1px solid #dcdfe6;
-          margin-bottom: 20px;
-          .right-actions {
-            /* max-width: 160px; */
-            height: 100%;
-            padding: 20px 10px;
-            border-left: 1px solid #dcdfe6;
-            li {
-              margin-bottom: 15px;
-            }
-            @media screen and (max-width: 1710px) {
-              font-size: 12px;
-            }
-            .span-item {
-              color: #409eff;
-              cursor: pointer;
-              &:hover {
-                text-decoration: underline;
-              }
-              .el-icon-collection,
-              .el-icon-document-copy {
-                color: #409eff;
-              }
-            }
-          }
-          .chart-show-cont {
-            padding: 0 160px 0 120px;
-            position: relative;
-            min-height: 400px;
-            .chart-title {
-              font-size: 16px;
-              font-weight: normal;
-              text-align: center;
-              margin-bottom: 10px;
-            }
-            .chart-author {
-              font-size: 14px;
-              color: #333;
-              position: absolute;
-              bottom: 0;
-              right: 50px;
-            }
-            .chartWrapper {
-              position: relative;
-              .range-cont {
-                position: absolute;
-                top: 13%;
-                .min-data-input {
-                  width: 60px;
-                  display: block;
-                }
-                &.left {
-                  left: -80px;
-                }
-                &.right {
-                  right: -65px;
-                }
-                &.rightTwo {
-                  right: -130px;
-                }
-              }
-            }
-          }
-        }
-      }
-
-      .chart-list-cont {
-        color: #333;
-        .el-card .el-card__header,
-        .el-card__body {
-          padding: 10px;
-        }
-
-        .chartList-wrapper {
-          margin-top: 10px;
-          display: flex;
-          flex-wrap: wrap;
-          max-height: calc(100vh - 143px);
-          overflow: hidden;
-          overflow-y: auto;
-          .drag-cont {
-            width: 100%;
-            display: flex;
-            flex-wrap: wrap;
-          }
-          .dragShdow {
-            box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
-            opacity: 0.5;
-          }
-          .sheet-item {
-            position: relative;
-            .item-top {
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              font-size: 16px;
-              font-weight: 600;
-            }
-            .chart-img {
-              width: 100%;
-              height: 230px;
-              object-fit: contain !important;
-              cursor: pointer;
-            }
-            .item-bottom {
-              margin-top: 10px;
-              display: flex;
-              justify-content: space-between;
-              font-size: 12px;
-              color: #666;
-              .collected {
-                color: #f00;
-                cursor: pointer;
-              }
-              .join_txt {
-                color: #409eff;
-                cursor: pointer;
-              }
-            }
-          }
-        }
-        .nodata {
-          text-align: center;
-        }
-      }
-    }
-
-    @media screen and (min-width: 1711px) {
-      .min-data-input {
-        margin-top: 360px;
-      }
-    }
-    @media screen and (max-width: 1710px) {
-      .min-data-input {
-        margin-top: 290px;
-      }
-    }
-  }
-}
+<style lang='scss' scoped>
+@import './css/index.scss';
 </style>
 
 <style lang="scss">
-.comodity-chart-container {
-  .label-input .el-input__inner {
-    height: 25px;
-    line-height: 25px;
-    padding: 0 10px;
-  }
-
-  .range-cont .el-input__inner {
-    padding: 0 3px;
-  }
-
-  .el-tree__drop-indicator {
-    height: 3px;
-    background-color: #409eff;
-  }
-  .el-tree-node__content {
-    margin-bottom: 14px !important;
-  }
-  .el-tree-node__children {
-    .el-tree-node {
-      /* margin-bottom: 8px !important; */
-      margin-bottom: 0px !important;
-      padding-left: 18px;
-    }
-    .el-tree-node__content {
-      margin-bottom: 5px !important;
-      padding-left: 0 !important;
-    }
-  }
-  .expanded.el-icon-caret-right:before {
-    content: url("../../assets/img/set_m/down.png") !important;
-  }
-  .el-icon-caret-right:before {
-    content: url("../../assets/img/set_m/slide.png") !important;
-  }
-  .el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
-    content: "" !important;
-  }
-  .el-tree-node__expand-icon.expanded {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  .el-tree-node.is-current > .el-tree-node__content {
-    background-color: #f0f4ff !important;
-  }
-  .el-tree-node__content {
-    padding-right: 10px !important;
-  }
-}
+@import './css/pub.scss';
 </style>

src/views/chartRelevance_manage/statisticFeatureList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="fittingEquation-chart-container" v-if="showData">
+	<div class="fittingEquation-chart-container pub-chart-box" v-if="showData">
 		<span
 			class="slide-icon slide-right"
 			@click="isSlideLeft = !isSlideLeft"
@@ -602,221 +602,9 @@ export default {
 }
 </script>
 <style lang='scss' scoped>
-*{ box-sizing: border-box;}
-$mini-font: 12px; $normal-font: 14px;
-.fittingEquation-chart-container {
-	.slide-icon {
-		padding: 20px 0;
-		/* display: block; */
-		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
-		border-radius: 5px;
-		cursor: pointer;
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		z-index: 99;
-		&:hover {
-			background-color: rgba(0, 0, 0, 0.05);
-		}
-		&.slide-left {
-			right: 0;
-		}
-		&.slide-right {
-			left: 0;
-		}
-	}
-	.data-sheet-main {
-		display: flex;
-
-		.main-left {
-			width: 400px;
-			min-width: 300px;
-			background: #fff;
-			margin-right: 20px;
-			border: 1px solid #ececec;
-			border-radius: 4px;
-			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-			height: calc(100vh - 120px);
-			overflow: hidden;
-			position: relative;
-			box-sizing: border-box;
-
-			.datasheet_top {
-				padding: 20px;
-				background: #fff;
-				border: 1px solid #ececec;
-				box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
-				margin-bottom: 20px;
-			}
-			.search-cont {
-				padding: 0 20px;
-			}
-
-
-
-			.tree-cont {
-				padding: 30px 20px;
-				max-height: calc(100vh - 280px);
-				overflow: auto;
-			}
-			.target_tree {
-				color: #333;
-				.custom-tree-node {
-					display: flex !important;
-					justify-content: space-between;
-					align-items: center;
-					display: block;
-					flex: 1;
-					.node_label {
-						margin-right: 2px;
-					}
-					.el-icon-view {
-						color: #409EFF;
-						font-size: 18px;
-						margin-left: 5px;
-					}
-				}
-			}
-			.noDepart {
-				margin: 60px 0;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				color: #409eff;
-				font-size: 16px;
-				cursor: pointer;
-			}
-			.move-btn {
-				height: 100%;
-				width: 4px;
-				/* opacity: 0; */
-				position: absolute;
-				right: 0px;
-				top: 0;
-				&:hover {
-				cursor: col-resize;
-					/* background-color: orange */
-				}
-			}
-		}
-
-		.main-right {
-			width: 80%;
-			.chart-detail-wrapper {
-				height: calc(100vh - 120px);
-				border: 1px solid #ececec;
-				border-radius: 4px;
-				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-				overflow: auto;
-				background: #fff;
-				padding: 30px;
-				.bottom-min {
-					border: 1px solid #DCDFE6;
-					margin-bottom: 20px;
-					.chart-show-cont {
-              padding: 0 160px 0 120px;
-              position: relative;
-							min-height: 400px;
-              .chart-title {
-                font-size: 16px;
-                font-weight: normal;
-                text-align: center;
-                margin-bottom: 10px;
-              }
-              .chart-author {
-                font-size: 14px;
-                color: #333;
-                position: absolute;
-                bottom: 0;
-                right: 50px;
-              }
-              .chartWrapper {
-                position: relative;
-                .range-cont {
-                  position: absolute;
-                  top: 13%;
-                  .min-data-input {
-                    width: 60px;
-                    display: block;
-                  }
-                  &.left {
-                    left: -80px;
-                  }
-                  &.right {
-                    right: -65px;
-                  }
-                  &.rightTwo {
-                    right: -130px;
-                  }
-                }
-              }
-          }
-				}
-			}
-		}
-		
-		@media screen and (min-width: 1711px){
-			.min-data-input {
-				margin-top: 360px;
-			}
-		}
-		@media screen and (max-width: 1710px){
-			.min-data-input {
-				margin-top: 290px;
-			}
-		}
-	}
-}
+@import './css/index.scss';
 </style>
 
 <style lang="scss">
-.fittingEquation-chart-container {
-	.label-input .el-input__inner {
-		height: 25px;
-		line-height: 25px;
-		padding: 0 10px;
-	}
-
-	.range-cont .el-input__inner {
-		padding: 0 3px;
-	}
-
-	.el-tree__drop-indicator{
-		height:3px;
-		background-color:#409EFF;
-	}
-	.el-tree-node__content {
-		margin-bottom: 14px !important;
-	}
-	.el-tree-node__children {
-		.el-tree-node {
-			/* margin-bottom: 8px !important; */
-			margin-bottom: 0px !important;
-			padding-left: 18px;
-		}
-		.el-tree-node__content {
-			margin-bottom: 5px !important;
-			padding-left: 0 !important;
-		}
-	}
-	.expanded.el-icon-caret-right:before {
-		content: url('../../assets/img/set_m/down.png') !important;
-	}
-	.el-icon-caret-right:before {
-		content: url('../../assets/img/set_m/slide.png') !important;
-	}
-	.el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
-		content: '' !important;
-	}
-	.el-tree-node__expand-icon.expanded {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
-	}
-	.el-tree-node.is-current > .el-tree-node__content {
-		background-color: #f0f4ff !important;
-	}
-	.el-tree-node__content {
-		padding-right: 10px !important;
-	}
-}
+@import './css/pub.scss';
 </style>

src/views/futures_manage/commodityChartBase.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="comodity-chart-container" v-if="showData">
+	<div class="comodity-chart-container pub-chart-box" v-if="showData">
 		<span
 			class="slide-icon slide-right"
 			@click="isSlideLeft = !isSlideLeft"
@@ -816,304 +816,9 @@ export default {
 }
 </script>
 <style lang='scss' scoped>
-*{ box-sizing: border-box;}
-$mini-font: 12px; $normal-font: 14px;
-.comodity-chart-container {
-	.slide-icon {
-		padding: 20px 0;
-		/* display: block; */
-		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
-		border-radius: 5px;
-		cursor: pointer;
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		z-index: 99;
-		&:hover {
-			background-color: rgba(0, 0, 0, 0.05);
-		}
-		&.slide-left {
-			right: 0;
-		}
-		&.slide-right {
-			left: 0;
-		}
-	}
-	.data-sheet-main {
-		display: flex;
-
-		.main-left {
-			width: 400px;
-			min-width: 300px;
-			background: #fff;
-			margin-right: 20px;
-			border: 1px solid #ececec;
-			border-radius: 4px;
-			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-			height: calc(100vh - 120px);
-			overflow: hidden;
-			position: relative;
-			box-sizing: border-box;
-
-			.datasheet_top {
-				padding: 20px;
-				background: #fff;
-				border: 1px solid #ececec;
-				box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
-				margin-bottom: 20px;
-			}
-			.search-cont {
-				padding: 0 20px;
-			}
-
-
-
-			.tree-cont {
-				padding: 30px 20px;
-				max-height: calc(100vh - 280px);
-				overflow: auto;
-			}
-			.target_tree {
-				color: #333;
-				.custom-tree-node {
-					display: flex !important;
-					justify-content: space-between;
-					align-items: center;
-					display: block;
-					flex: 1;
-					.node_label {
-						margin-right: 2px;
-					}
-					.el-icon-view {
-						color: #409EFF;
-						font-size: 18px;
-						margin-left: 5px;
-					}
-				}
-			}
-			.noDepart {
-				margin: 60px 0;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				color: #409eff;
-				font-size: 16px;
-				cursor: pointer;
-			}
-			.move-btn {
-				height: 100%;
-				width: 4px;
-				/* opacity: 0; */
-				position: absolute;
-				right: 0px;
-				top: 0;
-				&:hover {
-				cursor: col-resize;
-					/* background-color: orange */
-				}
-			}
-		}
-
-		.main-right {
-			width: 80%;
-			.chart-detail-wrapper {
-				height: calc(100vh - 120px);
-				border: 1px solid #ececec;
-				border-radius: 4px;
-				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-				overflow: auto;
-				background: #fff;
-				padding: 30px;
-				.bottom-min {
-					border: 1px solid #DCDFE6;
-					margin-bottom: 20px;
-					.right-actions {
-						/* max-width: 160px; */
-						height: 100%;
-						padding: 20px 10px;
-						border-left: 1px solid #DCDFE6;
-						li {
-							margin-bottom: 15px;
-						}
-						@media screen and (max-width: 1710px) {
-							font-size: 12px;
-						}
-						.span-item {
-							color: #409eff;
-							cursor: pointer;
-							&:hover {
-								text-decoration: underline;
-							}
-							.el-icon-collection,
-							.el-icon-document-copy {
-								color: #409eff;
-							}
-						}
-					}
-					.chart-show-cont {
-              padding: 0 160px 0 120px;
-              position: relative;
-							min-height: 400px;
-              .chart-title {
-                font-size: 16px;
-                font-weight: normal;
-                text-align: center;
-                margin-bottom: 10px;
-              }
-              .chart-author {
-                font-size: 14px;
-                color: #333;
-                position: absolute;
-                bottom: 0;
-                right: 50px;
-              }
-              .chartWrapper {
-                position: relative;
-                .range-cont {
-                  position: absolute;
-                  top: 13%;
-                  .min-data-input {
-                    width: 60px;
-                    display: block;
-                  }
-                  &.left {
-                    left: -80px;
-                  }
-                  &.right {
-                    right: -65px;
-                  }
-                  &.rightTwo {
-                    right: -130px;
-                  }
-                }
-              }
-          }
-				}
-			}
-
-			.chart-list-cont {
-				color: #333;
-				.el-card .el-card__header,
-				.el-card__body {
-					padding: 10px;
-				}
-
-				.chartList-wrapper {
-					margin-top: 10px;
-					display: flex;
-					flex-wrap: wrap;
-					max-height: calc(100vh - 143px);
-					overflow: hidden;
-					overflow-y: auto;
-					.drag-cont {
-						width: 100%;
-						display: flex;
-						flex-wrap: wrap;
-					}
-					.dragShdow {
-						box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
-						opacity: 0.5;
-					}
-					.sheet-item {
-						position: relative;
-						.item-top {
-							display: flex;
-							justify-content: space-between;
-							align-items: center;
-							font-size: 16px;
-							font-weight: 600;
-						}
-						.chart-img {
-							width: 100%;
-							height: 230px;
-							object-fit: contain !important;
-							cursor: pointer;
-						}
-						.item-bottom {
-							margin-top: 10px;
-							display: flex;
-							justify-content: space-between;
-							font-size: 12px;
-							color: #666;
-							.collected {
-								color: #f00;
-								cursor: pointer;
-							}
-							.join_txt {
-								color: #409eff;
-								cursor: pointer;
-							}
-						}
-					}
-				}
-				.nodata {
-					text-align: center;
-				}
-			}
-		}
-		
-		@media screen and (min-width: 1711px){
-			.min-data-input {
-				margin-top: 360px;
-			}
-		}
-		@media screen and (max-width: 1710px){
-			.min-data-input {
-				margin-top: 290px;
-			}
-		}
-	}
-}
+@import '~@/views/chartRelevance_manage/css/index.scss';
 </style>
 
 <style lang="scss">
-.comodity-chart-container {
-	.label-input .el-input__inner {
-		height: 25px;
-		line-height: 25px;
-		padding: 0 10px;
-	}
-
-	.range-cont .el-input__inner {
-		padding: 0 3px;
-	}
-
-	.el-tree__drop-indicator{
-		height:3px;
-		background-color:#409EFF;
-	}
-	.el-tree-node__content {
-		margin-bottom: 14px !important;
-	}
-	.el-tree-node__children {
-		.el-tree-node {
-			/* margin-bottom: 8px !important; */
-			margin-bottom: 0px !important;
-			padding-left: 18px;
-		}
-		.el-tree-node__content {
-			margin-bottom: 5px !important;
-			padding-left: 0 !important;
-		}
-	}
-	.expanded.el-icon-caret-right:before {
-		content: url('../../assets/img/set_m/down.png') !important;
-	}
-	.el-icon-caret-right:before {
-		content: url('../../assets/img/set_m/slide.png') !important;
-	}
-	.el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
-		content: '' !important;
-	}
-	.el-tree-node__expand-icon.expanded {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
-	}
-	.el-tree-node.is-current > .el-tree-node__content {
-		background-color: #f0f4ff !important;
-	}
-	.el-tree-node__content {
-		padding-right: 10px !important;
-	}
-}
+@import '~@/views/chartRelevance_manage/css/pub.scss';
 </style>