monitor page change

2024-06-25 11:34:42 +08:00 · 2024-06-25 11:34:42 +08:00 · 2839c75ada
parent 32adba193e
commit 2839c75ada
6 changed files with 54 additions and 64 deletions
--- a/src/views/monitorSelectPcm/components/ComputeDomain.vue
+++ b/src/views/monitorSelectPcm/components/ComputeDomain.vue
@ -288,7 +288,7 @@ export default {
    background-color: rgba(135, 189, 245, 0.2);
 }
  .el-progress-bar__inner{
-    background-image: linear-gradient(90deg, #419eff, #00d9a6);
+    background: rgba(17, 252, 254, 1);
  }
 }
 // @media screen and (min-width: 1921px) {
--- a/src/views/monitorSelectPcm/components/ComputingPowerTotal.vue
+++ b/src/views/monitorSelectPcm/components/ComputingPowerTotal.vue
@ -62,8 +62,8 @@ export default {
  >div{
    padding: 10px;
    padding-top: 0;
-    background: url('../../../assets/images/monitorSelect/dataBg.png') no-repeat left;
-    background-size: auto 100%;
+    // background: url('../../../assets/images/monitorSelect/dataBg.png') no-repeat left;
+    // background-size: auto 100%;
  }
  .title{
    font-size: 1.1rem;
@ -78,7 +78,7 @@ export default {
    font-family: Impact;
    font-weight: 400;
    // padding-bottom: 5px;
-    text-align: right;
+    // text-align: right;
    width: 80%;
    // text-indent: 130%;
    letter-spacing: 0.1rem;
--- a/src/views/monitorSelectPcm/components/ComputingPowerTrend.vue
+++ b/src/views/monitorSelectPcm/components/ComputingPowerTrend.vue
@ -68,7 +68,7 @@ export default {
            color: '#008B45'
          }
        },
-        color: ['rgba(79, 172, 254, 1)'],
+        color: ['rgba(14, 214, 250, 1)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
@ -188,11 +188,11 @@ export default {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
-                  color: 'rgba(0, 242, 254, 1)' // 0% 处的颜色
+                  color: 'rgba(10, 227, 244, 1)' // 0% 处的颜色
                },
                {
                  offset: 1,
-                  color: 'rgba(79, 172, 254, 1)' // 100% 处的颜色
+                  color: 'rgba(14, 214, 250, 1)' // 100% 处的颜色
                }
              ])
            }
--- a/src/views/monitorSelectPcm/components/ComputingPowerUse.vue
+++ b/src/views/monitorSelectPcm/components/ComputingPowerUse.vue
@ -267,11 +267,11 @@ export default {
                colorStops: [
                  {
                    offset: 0,
-                    color: 'rgb(24, 144, 255)' // 0% 处的颜色
+                    color: 'rgba(135, 189, 245, 1)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
-                    color: 'rgba(24, 144, 255,0.5)' // 100% 处的颜色
+                    color: 'rgba(1, 16, 37, 1)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
--- a/src/views/monitorSelectPcm/components/StorageResourceUsage.vue
+++ b/src/views/monitorSelectPcm/components/StorageResourceUsage.vue
@ -109,12 +109,12 @@ export default {
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
-    z-index: -1;
+    // z-index: -1;
    .num, .percent{
      -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
      -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
      -o-transform: matrix(-1, 0, 0, 1, 0, 0);
-      z-index: -1;
+      // z-index: -1;
    }
    .num{
      text-align: left;
--- a/src/views/monitorSelectPcm/index.vue
+++ b/src/views/monitorSelectPcm/index.vue
@ -1,7 +1,7 @@
 <template>
  <div>
    <div class="monitor">
-      <div class="top-menu">
+      <!-- <div class="top-menu">
        <div class="menu">
          <a href="">首页</a>
          <a @click="viewMenu()">数算资源</a>
@ -10,10 +10,10 @@
          <a @click="viewMenu('hpc/hpcOverview')">超算资源</a>
          <a @click="viewMenu('modelarts/autoStudy')">智算资源</a>
        </div>
-      </div>
+      </div> -->
      <div class="top">
        <div class="top-title">
-          <h1> 云际计算基础平台</h1>
+          <h1>材料AI云际计算平台</h1>
        </div>
      </div>
      <div class="floatLeft">
@ -52,6 +52,7 @@
        <ComputingPowerTotal :data="powerData" />
      </div>
      <Earth :key="resizeKey" :center="{name: monitorSettingForm.center, longitude: Number(monitorSettingForm.centerPosition.split(',')[0]), latitude: Number(monitorSettingForm.centerPosition.split(',')[1])}" />
+      <div class="bottom" />
    </div>
    <el-dialog
      title="创建云际跨域任务"
@ -288,7 +289,7 @@ export default {
 }

 .monitor {
-  background: url('../../assets/monitor/monitor_bg.jpeg') no-repeat;
+  background: url('../../assets/monitor/monitor_bg.png') no-repeat;
  background-size: 100% 100%;
  width: 100%;
  min-width: 1200px;
@ -303,17 +304,17 @@ export default {
  overflow: hidden;
  .top {
    width: 100%;
-    height: 8vh;
+    height: 18vh;
    // vertical-align: baseline;
    position: absolute;
-    z-index: 99;
-    background: url(../../assets/monitor/top_bg.png) center top no-repeat;
-    background-size: 100% 65%;
+    z-index: 9;
+    background: url(../../assets/monitor/top-bg.png) center top no-repeat;
+    background-size: 100% 20vh;
    .top-title{
      margin:0 auto;
      height: 100%;
-      background: url(../../assets/monitor/c-top.png) center no-repeat;
-      background-size: 55% 10vh;
+      // background: url(../../assets/monitor/c-top.png) center no-repeat;
+      // background-size: 55% 10vh;
      h1{
        margin: 0;
        font-size: 2rem;
@ -376,9 +377,6 @@ export default {
      -webkit-text-fill-color: transparent;
    }
  }
-  .floatLeft, .floatRight{
-    margin-top: 5vh;
-  }
  .middle{
    width: 38vw;
    position: absolute;
@ -387,56 +385,42 @@ export default {
    margin-top: 10vh;
  }
  .floatLeft, .floatRight{
+    margin-top: 4vh;
    padding: 0 1vh 0 2vh;
    padding-top: 5vh;
    padding-bottom: 4vh;
  }
-  .floatLeft .left::before, .floatRight .right::after{
-    // margin-top: 6vh;
-    content: '';
-    width: 27vw;
-    height: 95vh;
-    display:block;
-    position: absolute;
-    top: -5.2vh;
-    right: -2vh;
-    background: url(../../assets/monitor/left.png) no-repeat;
-    background-size: 100% 98%;
-    z-index: -1;
-  }
-
-  .floatLeft .left:after, .floatRight .right:before{
+  .floatLeft .left:before, .floatRight .right:after{
    content: '';
    width: 2vw;
    height: 85vh;
-    position: absolute;
-    right: -3.5vw;
-    top: 3px;
    display: block;
-    background: url(../../assets/monitor/leftrOld.png) no-repeat;
+    position: absolute;
+    top: 3px;
+    right: -2vh;
+    background: url(../../assets/monitor/leftr.png) no-repeat;
    background-size: 100% 98%;
  }
-  .floatRight .right:before{
-    left: -3.5vw;
-    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-    -o-transform:matrix(-1,0,0,1,0,0);
-  }
  .floatLeft{
    width: 27vw;
    display: block;
    position: absolute;
    left: 0;
    z-index: 10;
-    height: 95vh;
    min-height: 800px;
    .left {
      width: 100%;
-      height: 90vh;
+      height: 84vh;
      padding-left: 10px;
      display: block;
      position: relative;
-      &:before{
+      // background: #02020a96;
+      // box-shadow: 20px 30px 30px 0px #02020a96;
+      &::before{
+        -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
+        -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
+        -o-transform:matrix(-1,0,0,1,0,0);
+        z-index: 1;
        left: -2vh;
      }
      .left_1{
@ -453,14 +437,12 @@ export default {
    }
  }
  .floatRight {
-    background: none;
    width: 27vw;
    display: block;
    // overflow: hidden;
    position: absolute;
    right: 0;
    z-index: 10;
-    height: 95vh;
    min-height: 800px;
    padding: 0 2vh 0 1vh;
    padding-top: 5vh;
@ -481,20 +463,13 @@ export default {
      }
    }
    .right {
+      // background: #02020a96;
+      // box-shadow: -20px 30px 30px 0px #02020a96;
      width: 100%;
      height: 100%;
      padding-right: 10px;
      display: block;
      position: relative;
-      &:after{
-        // padding: 0 20px 0 10px;
-        -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-        -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-        -o-transform:matrix(-1,0,0,1,0,0);
-        z-index: -1;
-        // padding-top: 50px;
-        // padding-bottom: 40px;
-      }
      .right_1{
        height: 35vh;
        overflow: hidden;
@ -503,10 +478,25 @@ export default {
        height: 27vh;
      }
      .right_3{
-        height: 21vh;
+        height: 22vh;
      }
    }
  }
+  .bottom{
+    position: fixed;
+    bottom: 0;
+    z-index: 10;
+    width: 100%;
+    height: 8vh;
+    &::after{
+    content: '';
+    width: 100%;
+    height: 100%;
+    display: block;
+    background: url(../../assets/monitor/bottom_bg.png) no-repeat;
+    background-size: 100% 8vh;
+  }
+  }
 }
 </style>