浏览代码

Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/views/datacenter.vue
彭宇 3 年之前
父节点
当前提交
6959d18cdb
共有 2 个文件被更改,包括 113 次插入126 次删除
  1. 6 20
      src/assets/styles/base.scss
  2. 107 106
      src/views/datacenter.vue

+ 6 - 20
src/assets/styles/base.scss

@@ -729,16 +729,9 @@ div::-webkit-scrollbar {
 				padding: .4rem .5rem;
 				box-shadow: $shadowList;
 				flex-wrap: wrap;
-				@each $c in $iconBg {
-					$i: index($iconBg, $c); // 获取 $c 在数组中的索引,并赋值给 $i 赋值用冒号,不是等号~!
-				
-					.icon-con:nth-child(#{$i}) .icon {
-						// 经典的地方来了,SCSS 循环是从 1 开始,不是 0 哦~
-						background: $c; // 背景色
-				
-						&:hover {
-							background: lighten($c, 10%); // hover 后的颜色
-						}
+				@for $i from 1 through length($iconBg) {
+					.icon-con:nth-child(#{length($iconBg)}n+#{$i}) .icon{
+						background:nth($iconBg, $i);
 					}
 				}
 				.icon-con{
@@ -968,16 +961,9 @@ div::-webkit-scrollbar {
 				align-items: center;
 				// padding: .25rem .5rem;
 				flex-wrap: wrap;
-				@each $c in $iconBg {
-					$i: index($iconBg, $c); // 获取 $c 在数组中的索引,并赋值给 $i 赋值用冒号,不是等号~!
-				
-					.icon-con:nth-child(#{$i}) .icon {
-						// 经典的地方来了,SCSS 循环是从 1 开始,不是 0 哦~
-						background: $c; // 背景色
-				
-						&:hover {
-							background: lighten($c, 10%); // hover 后的颜色
-						}
+				@for $i from 1 through length($iconBg) {
+					.icon-con:nth-child(#{length($iconBg)}n+#{$i}) .icon{
+						background:nth($iconBg, $i);
 					}
 				}
 				.icon-con{

+ 107 - 106
src/views/datacenter.vue

@@ -45,13 +45,14 @@
             <div id="data-chart" style="width: 100%;height:200px;"></div>
           </div>
 
-        </div>
-      </div>
-      <vBottomMenu></vBottomMenu>
-      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
-        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img src="@/assets/images/mascot.png"/>
-        </div>
-      </el-tooltip>
+				</div>
+			</div>
+			<vBottomMenu></vBottomMenu>
+			<el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
+				<div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img
+						src="@/assets/images/mascot.png" />
+				</div>
+			</el-tooltip>
 
     </div>
   </div>
@@ -121,108 +122,108 @@
           tooltip: {
             trigger: 'item'
 
-          },
-          grid: {
-            top: '5%',
-            left: '2%',
-            // right: "4%",
-            bottom: '-15%',
-            width: '75%',
-            containLabel: true
-          },
-          xAxis: {
-            show: false,
-            type: 'value'
-          },
-          yAxis: {
-            type: 'category', // 不设置类目轴,抽离的dataset数据展示不出来
-            inverse: true,
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: '#5deaff',
-                fontSize: '12'
-              }
-            },
-            splitLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            axisLine: {
-              show: false
-            }
-          },
+					},
+					grid: {
+						top: '5%',
+						left: '2%',
+						// right: "4%",
+						bottom: '-15%',
+						width: '75%',
+						containLabel: true
+					},
+					xAxis: {
+						show: false,
+						type: 'value'
+					},
+					yAxis: {
+						type: 'category', // 不设置类目轴,抽离的dataset数据展示不出来
+						inverse: true,
+						axisLabel: {
+							show: true,
+							textStyle: {
+								color: '#5deaff',
+								fontSize: '12'
+							}
+						},
+						splitLine: {
+							show: false
+						},
+						axisTick: {
+							show: false
+						},
+						axisLine: {
+							show: false
+						}
+					},
 
-          series: [{
+					series: [{
 
-            type: 'bar',
-            animationCurve: 'easeOutBack',
-            barWidth: 5,
-            label: {
-              show: true,
-              position: 'right',
-              offset: [0, 0],
-              color: '#88dfd5',
-              // fontSize: "12",
-              style: {
-                fill: '#fff'
-              }
-            },
-            backgroundBar: {
-              show: true,
-              style: {
-                fill: 'rgba(97,152,255,0.20)'
-              }
-            },
-            barStyle: {
-              stroke: 'rgba(41,244,236,1)'
-            },
-            gradient: {
-              color: ['rgba(41,244,236,1)', 'rgba(41,244,236,0)']
-            },
-            itemStyle: {
-              label: {
-                show: true
-              },
-              labelLine: {
-                show: false
-              },
-              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                offset: 0,
-                color: 'rgba(41,244,236,0)'
-              },
-                {
-                  offset: 1,
-                  color: 'rgba(41,244,236,.5)'
-                }
-              ]),
-              borderColor: '#a2f9f7',
-              shadowBlur: 16,
-              shadowColor: '#a2f9f7'
-            }
-          }]
-        })
+						type: 'bar',
+						animationCurve: 'easeOutBack',
+						barWidth: 5,
+						label: {
+							show: true,
+							position: 'right',
+							offset: [0, 0],
+							color: '#88dfd5',
+							// fontSize: "12",
+							style: {
+								fill: '#fff'
+							}
+						},
+						backgroundBar: {
+							show: true,
+							style: {
+								fill: 'rgba(97,152,255,0.20)'
+							}
+						},
+						barStyle: {
+							stroke: 'rgba(41,244,236,1)'
+						},
+						gradient: {
+							color: ['rgba(41,244,236,1)', 'rgba(41,244,236,0)']
+						},
+						itemStyle: {
+							label: {
+								show: true
+							},
+							labelLine: {
+								show: false
+							},
+							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+									offset: 0,
+									color: 'rgba(41,244,236,0)'
+								},
+								{
+									offset: 1,
+									color: 'rgba(41,244,236,.5)'
+								}
+							]),
+							borderColor: '#a2f9f7',
+							shadowBlur: 16,
+							shadowColor: '#a2f9f7'
+						}
+					}]
+				})
 
-      },
+			},
 
-      //吉祥物收起左右框
-      indent() {
-        let list = document.getElementsByClassName('el-tooltip__popper')
-        list[list.length - 1].style.display = 'none'
-        if (this.indentStyle == '') {
-          this.indentStyle = 'indent-style'
-          this.indentleft = 'indent-left'
-          this.indentright = 'indent-right'
-          this.indentText = '展开左右栏'
-        } else if (this.indentText == '展开左右栏') {
-          this.indentStyle = ''
-          this.indentleft = ''
-          this.indentright = ''
-          this.indentText = '收起左右栏'
-        }
-      },
+			//吉祥物收起左右框
+			indent() {
+				let list = document.getElementsByClassName('el-tooltip__popper')
+				list[list.length - 1].style.display = 'none'
+				if (this.indentStyle == '') {
+					this.indentStyle = 'indent-style'
+					this.indentleft = 'indent-left'
+					this.indentright = 'indent-right'
+					this.indentText = '展开左右栏'
+				} else if (this.indentText == '展开左右栏') {
+					this.indentStyle = ''
+					this.indentleft = ''
+					this.indentright = ''
+					this.indentText = '收起左右栏'
+				}
+			},
 
       getResource() {
         let that = this
@@ -901,5 +902,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  @import '@/assets/styles/base.scss';
+	@import '@/assets/styles/base.scss';
 </style>