完成计算资源静态页面

src/layout/components/Settings/index.vue

@@ -96,7 +96,7 @@ const showSettings = ref(false);
 const theme = ref(settingsStore.theme);
 const theme = ref(settingsStore.theme);
 const sideTheme = ref(settingsStore.sideTheme);
 const sideTheme = ref(settingsStore.sideTheme);
 const storeSettings = computed(() => settingsStore);
 const storeSettings = computed(() => settingsStore);
-const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
+const predefineColors = ref(["#2E77E3", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
 
 
 /** 是否需要topnav */
 /** 是否需要topnav */
 function topNavChange(val) {
 function topNavChange(val) {
@@ -202,4 +202,4 @@ defineExpose({
     margin: -3px 8px 0px 0px;
     margin: -3px 8px 0px 0px;
   }
   }
 }
 }
-</style>
+</style>
\ No newline at end of file

src/layout/user-layout.vue

 <template>
 <template>
   <div class="app-wrapper">
   <div class="app-wrapper">
     <div class="nav-bar">
     <div class="nav-bar">
-      <div class="logo flex-align-center">
-        <img class="nscc" src="@/assets/logo/nscc-logo.jpg" alt="">
-        <img class="xjjt" src="@/assets/logo/xjjt-logo.png" alt="">
-        <span class="logo-text">先进公共服务平台</span>
-      </div>
-
-      <div class="menu">
-        <el-menu
-            :default-active="activeIndex"
-            class="el-menu-demo"
-            mode="horizontal">
-          <el-sub-menu index="1">
-            <template #title>计算资源</template>
-            <el-sub-menu index="1-1">
-              <template #title>天河超级计算机</template>
-              <el-menu-item index="1-1-1">天河一代</el-menu-item>
-              <el-menu-item index="1-1-2">天河新一代</el-menu-item>
+      <div class="nav-bar-content">
+        <div class="logo flex-align-center">
+          <img class="nscc" src="@/assets/logo/nscc-logo.jpg" alt="">
+          <img class="xjjt" src="@/assets/logo/xjjt-logo.png" alt="">
+          <span class="logo-text">先进公共服务平台</span>
+        </div>
+
+        <div class="menu">
+          <el-menu
+              :default-active="activeIndex"
+              class="el-menu-demo"
+              mode="horizontal">
+            <el-sub-menu index="1">
+              <template #title>计算资源</template>
+              <el-sub-menu index="1-1">
+                <template #title>天河超级计算机</template>
+                <el-menu-item index="1-1-1">天河一代</el-menu-item>
+                <el-menu-item index="1-1-2">天河新一代</el-menu-item>
+              </el-sub-menu>
+              <el-menu-item index="1-2">CPU裸金属服务器</el-menu-item>
+              <el-menu-item index="1-3">存储</el-menu-item>
+              <el-menu-item index="1-4">云计算资源</el-menu-item>
             </el-sub-menu>
             </el-sub-menu>
-            <el-menu-item index="1-2">CPU裸金属服务器</el-menu-item>
-            <el-menu-item index="1-3">存储</el-menu-item>
-            <el-menu-item index="1-4">云计算资源</el-menu-item>
-          </el-sub-menu>
-          <el-menu-item index="2">行业应用</el-menu-item>
-          <el-menu-item index="3">组件服务</el-menu-item>
-          <el-menu-item index="4">合作伙伴</el-menu-item>
-        </el-menu>
-      </div>
-
-      <div class="right-menu">
-        <el-button type="primary">登录/注册</el-button>
+            <el-menu-item index="2">行业应用</el-menu-item>
+            <el-menu-item index="3">组件服务</el-menu-item>
+            <el-menu-item index="4">合作伙伴</el-menu-item>
+          </el-menu>
+        </div>
+
+        <div class="right-menu">
+          <el-button type="primary">登录/注册</el-button>
+        </div>
       </div>
       </div>
     </div>
     </div>
     <!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>-->
     <!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>-->
@@ -56,18 +58,22 @@ const activeIndex = ref('1')
 }
 }
 
 
 .nav-bar {
 .nav-bar {
-  height: 64px;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #ECECEB;
+  border-bottom: 2px solid #ECECEB;
   background-color: #ffffff;
   background-color: #ffffff;
-  padding: 0 80px;
   position: fixed;
   position: fixed;
-  z-index: 1;
+  z-index: 999;
   top: 0;
   top: 0;
   left: 0;
   left: 0;
   width: 100%;
   width: 100%;
 
 
+  .nav-bar-content {
+    width: 1280px;
+    margin: 0 auto;
+    height: 64px;
+    display: flex;
+    align-items: center;
+  }
+
   .logo {
   .logo {
     .nscc {
     .nscc {
       height: 46px;
       height: 46px;
@@ -110,7 +116,6 @@ const activeIndex = ref('1')
   }
   }
 
 
   .el-button {
   .el-button {
-    background-color: #2E77E3;
     height: 38px;
     height: 38px;
     border-radius: 2px;
     border-radius: 2px;
     font-size: 14px;
     font-size: 14px;

src/main.js

 import { createApp } from 'vue'
 import { createApp } from 'vue'
 
 
 import Cookies from 'js-cookie'
 import Cookies from 'js-cookie'
-
 import ElementPlus from 'element-plus'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'element-plus/dist/index.css'
 import locale from 'element-plus/es/locale/lang/zh-cn'
 import locale from 'element-plus/es/locale/lang/zh-cn'

src/router/index.js

@@ -73,6 +73,18 @@ export const constantRoutes = [
     ]
     ]
   },
   },
   {
   {
+    path: '/computingResource',
+    component: UserLayout,
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/computingResource/index.vue'),
+        name: 'ComputingResource',
+        meta: { title: '计算资源' }
+      }
+    ]
+  },
+  {
     path: '/user',
     path: '/user',
     component: Layout,
     component: Layout,
     hidden: true,
     hidden: true,

src/views/index.vue

@@ -366,7 +366,6 @@
 
 
   .view-more-btn {
   .view-more-btn {
     border: none;
     border: none;
-    background-color: #2E77E3;
     color: #ffffff;
     color: #ffffff;
   }
   }
 }
 }