modify menu page

src/styles/index.scss

@@ -735,9 +735,9 @@ span.default {
   #app .sidebar-container {
     width: $sideMiniBarWidth !important;
   }
-  #app .main-container {
+  // #app .main-container {
-    margin-left: calc(#{$sideMiniBarWidth} + 24px);
+  //   margin-left: calc(#{$sideMiniBarWidth} + 24px);
-  }
+  // }
 }
 
 // 全局修改滚动条样式

src/views/monitorSelect/index-bk.vue

@@ -1,10 +1,21 @@
 <template>
-  <div v-if="jcceTheme === 'jcceDark'">
+  <div class="menu-page">
     <Navbar />
-    <div id="menuChoose">
+    <div class="menu-box">
-      <a v-show="filteredDarkTab.length > 6" class="darkLeft" @click="changePage('left')">
+      <div class="yun">
-        <svg-icon icon-class="zuojiantou" />
+        <img src="../../assets/images/monitorSelect/yunsuan.png" alt="">
-      </a>
+        <div>云算</div>
+      </div>
+      <div class="chao">
+        <img src="../../assets/images/monitorSelect/chaosuan.png" alt="">
+        <div>超算</div>
+      </div>
+      <div class="zhi">
+        <img src="../../assets/images/monitorSelect/zhisuan.png" alt="">
+        <div>智算</div>
+      </div>
+    </div>
+    <!-- <div id="menuChoose">
       <div id="drag-container">
         <div id="spin-container">
           <div v-for="item in filteredDarkTab.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :key="item.id" class="box" :style="{ 'transform': 'rotateY('+item.Y+'deg) translateZ(-800px)' }">
@@ -16,34 +27,7 @@
           </div>
         </div>
       </div>
-      <a v-show="filteredDarkTab.length > 6" class="darkRight" @click="changePage('right')">
+    </div> -->
-        <svg-icon icon-class="youjiantou" />
-      </a>
-    </div>
-  </div>
-  <div v-else class="monitor-select">
-    <Navbar />
-    <el-row>
-      <a v-show="filteredLightTab.length > 6" class="lightLeft" @click="changePage('left')">
-        <svg-icon icon-class="zuojiantou" />
-      </a>
-      <div class="div-block">
-        <div v-for="item in filteredLightTab.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :key="item.id">
-          <a class="monitorSelectDiv" @click.prevent="selectMonitor(item.path)">
-            <div class="monitorSelectBtn">
-              <svg-icon :style="{'margin-top': filteredLightTab.length <6 ? '33vh' : '40vh'}" :icon-class="item.icon" />
-              <div>
-                <div class="selectTitle">{{ item.title }}</div>
-                <span v-if="filteredLightTab.length < 6">{{ item.description }}</span>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-      <a v-show="filteredLightTab.length > 6" class="lightRight" @click="changePage('right')">
-        <svg-icon icon-class="youjiantou" />
-      </a>
-    </el-row>
   </div>
 </template>
 
@@ -55,52 +39,24 @@ export default {
   components: { Navbar },
   data() {
     return {
-      pageSize: 6,
-      pageNum: 1,
       tabDarkList: [
         {
-          id: 'cluster',
+          id: 'yunsuan',
-          Y: 57,
+          title: '云算',
-          title: '容器管理',
+          icon: 'yunsuan',
-          icon: 'rongqiguanli',
           path: '/cluster/clusterMapViews'
         },
         {
-          id: 'virtual',
+          id: 'chaosuan',
-          Y: 34,
+          title: '超算',
-          title: '虚拟机管理',
+          icon: 'chaosuan',
-          icon: 'xunijiguanlimokuai',
-          path: '/virtual/overview'
-        },
-        {
-          id: 'hpc',
-          Y: 10,
-          title: '超算中心',
-          icon: 'fuwu',
           path: '/hpc/hpcOverview'
-        }
-      ],
-      tabLightList: [
-        {
-          id: 'cluster',
-          title: '容器管理',
-          icon: 'rongqiguanli',
-          description: '从容器维度中支持以跨云跨域多源异构方式，提供高性能可伸缩的容器应用管理服务。',
-          path: '/cluster/clusterMapViews'
         },
         {
-          id: 'virtual',
+          id: 'zhisuan',
-          title: '虚拟机管理',
+          title: '智算',
-          icon: 'xunijiguanlimokuai',
+          icon: 'zhisuan',
-          description: '在虚拟机的控制台中管理属于主机或群集的单个虚拟机或一组虚拟机。',
+          path: '/modelarts/autoStudy'
-          path: '/virtual/overview'
-        },
-        {
-          id: 'hpc',
-          title: '超算管理',
-          icon: 'fuwu',
-          description: '提供屏蔽资源异构的跨域调度超算服务，确保计算任务在各大超算节点的稳定运行。',
-          path: '/hpc/hpcOverview'
         }
       ]
     }
@@ -110,42 +66,14 @@ export default {
       'name',
       'menus'
     ]),
-    jcceTheme() {
-      return localStorage.getItem('jcceTheme')
-    },
     filteredDarkTab() {
       return this.tabDarkList.filter(e => this.menus.includes(e.id))
-    },
-    filteredLightTab() {
-      return this.tabLightList.filter(e => this.menus.includes(e.id))
     }
   },
   created() {
   },
   methods: {
-    changePage(type) {
-      if (type === 'left') {
-        this.pageNum = this.pageNum === 1 ? 1 : this.pageNum - 1
-      } else {
-        if (this.jcceTheme === 'jcceLight') {
-          this.pageNum = this.pageNum < (this.filteredLightTab.length / this.pageSize) ? this.pageNum + 1 : this.pageNum
-        } else {
-          this.pageNum = this.pageNum < (this.filteredDarkTab.length / this.pageSize) ? this.pageNum + 1 : this.pageNum
-        }
-      }
-    },
-    getImg(src) {
-      const srcName = src === 'disk' || src === 'jccSchedule' ? 'blockChain' : src
-      return require('@/assets/img/' + srcName + '.png')
-    },
     selectMonitor(monitor) {
-      if (monitor === '/disk') {
-        if (this.name === 'admin') {
-          window.location.href = '/disk/storage/sourceSetting'
-        } else {
-          window.location.href = '/disk/storage/diskList'
-        }
-      }
       this.$store.dispatch('user/setRouteType', monitor.split('/')[1])
       this.$router.push({ path: monitor })
     }
@@ -154,172 +82,39 @@ export default {
 </script>
 
 <style lang="scss">
-.monitor-select{
+.menu-page{
-  height: 100%;
+  .menu-box{
-  background: white url('../../assets/img/monitorSelect_bg.png') center no-repeat;
+    height: 53vh;
-  position: relative;
+    margin-top: 15vh;
-  .navbar{
+    background: url('../../assets/images/monitorSelect/menuBg.png') center no-repeat;
-    background-color: transparent;
+    background-size: 100% 100%;
-    position: absolute;
-    right: 0px;
-    z-index: 10;
-    .right-menu .avatar-container{
-      margin-right: 0;
-    }
-    .selectBtn  {
-      color: #454B53;
-    }
-  }
-
-  .lightLeft{
-    font-size: 90px;
-    position: absolute;
-    left: 0px;
-    top: 45%;
-    z-index: 10;
-    color: #DDD;
-  }
-  .lightRight{
-    font-size: 90px;
-    position: absolute;
-    right: 0px;
-    top: 45%;
-    z-index: 10;
-    color: #DDD;
-  }
-  // display：flex 样式
-  .div-block{
     display: flex;
-    .monitorSelectDiv{
+    justify-content: center;
-      display: block;
+    align-items: center;
-      height: 100vh;
+    text-align: center;
-    }
+    font-size:  2.5vh;
-    > div{
+    padding-top: 2vh;
-      display: block;
+    .yun, .chao, .zhi {
-      width: 100%;
+      margin: 0 12px;
-      max-width: 20%;
+      img{
-      font-size: 24px;
+        height: 20vh;
-      color: #333333;
-      height: 100vh;
-      position: relative;
-      text-align: center;
-      &:hover{
-        color: #ffffff;
-        background: #3182CE;
-      }
-      &::after{
-        content: '';
-        position: absolute;
-        width: 1px;
-        height: 100vh;
-        background: #CCD9E0;
-        top: 0;
-        right: 0;
-      }
-      &:last-of-type a::after{
-        width: 0;
-      }
-      .svg-icon {
-        font-size: 100px;
-        margin: 36vh auto;
-        margin-bottom: 51px;
-      }
-      .selectTitle {
-        margin-bottom: 35px;
-        font-size: 30px;
-      }
-      span{
-        display: block;
-        padding: 0 100px;
-        font-size: 14px;
-        line-height: 24px;
       }
     }
-  }
+    .yun{
-}
+      background: url('../../assets/images/monitorSelect/yunsuanBg.png') center no-repeat;
-
+      background-size: 100% 100%;
-#menuChoose{
+      padding: 5.5vh 9.5vh;
-  width: 80%;
+    }
-  overflow: hidden;
+    .chao{
-  display: flex;
+      background: url('../../assets/images/monitorSelect/chaosuanBg.png') center no-repeat;
-  perspective: 1000px;
+      background-size: 100% 100%;
-  width: 100%;
+      padding: 3vh 9.5vh;
-  position: absolute;
+    }
-  top: 50%;
+    .zhi{
-  margin-top: -10%;
+      background: url('../../assets/images/monitorSelect/zhisuanBg.png') center no-repeat;
-  .darkLeft{
+      background-size: 100% 100%;
-    font-size: 90px;
+      padding: 5.5vh 9.5vh;
-    position: relative;
-    margin: auto;
-    color: #6ECAFC;
-  }
-  .darkRight{
-    font-size: 90px;
-    position: relative;
-    margin: auto;
-    color: #6ECAFC;
-  }
-  #drag-container {
-    width: 1200px;
-    background: rgba(248, 0, 0, 0.075);
-    position: relative;
-    display: flex;
-    margin: auto;
-    transform-style: preserve-3d;
-    background: url('../../assets/images/menubg.png') top no-repeat;
-    background-size:  130%;
-    .box  {
-      transform-style: preserve-3d;
-      position: absolute;
-      top: 0;
-      height: 100%;
-      border-bottom: 2px solid #6ECAFC;
-      -webkit-box-reflect: below 20px linear-gradient(transparent, transparent, #0005);
-
-      .inner-box{
-        width: 100%;
-        height: 98%;
-        line-height: 200px;
-        font-size: 30px;
-        text-align: center;
-        background: #1425389d ;
-        background-position: 200px -160px;
-        background-size: 70%;
-        border: 2px solid #6ECAFC;
-        border-radius: 20px;
-        &:hover {
-          box-shadow: 0 0 15px #6ECAFC;
-          -webkit-box-reflect: below 40px linear-gradient(transparent, transparent, #0007);
-        }
-      }
-      &::after{
-        content: url('../../assets/images/star.png');
-        position:absolute;
-        top: -88px;
-        left: 260px;
-      }
-      svg{
-        font-size: 150px;
-        display: block;
-        width: 100%;
-        margin: 20% 0 -10%;
-      }
     }
-  }
-  #spin-container{
-    position: relative;
-    display: flex;
-    margin: auto;
-    transform-style: preserve-3d;
-    width: 300px;
-    height: 380px;
-  }
-}
-@keyframes spinRevert {
-  from{
-    transform: rotateY(5deg);
-  } to{
-    transform: rotateY(15deg);
   }
 }
 </style>