计算服务更新

src/views/service/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="detail">
+  <div id="login">
     <el-row>
       <el-col :span="24" class="style">
         <el-col :span="24" class="top">
@@ -12,45 +12,7 @@
         </el-col>
         <el-col :span="24" class="main">
           <div class="w_1200">
-            <el-col :span="5" class="left">
-              <el-col :span="24" class="top">
-                <i class="el-icon-s-unfold"></i>
-                <span>计算服务</span>
-              </el-col>
-              <el-col :span="24" class="menus">
-                <el-col class="menuList" :span="24" v-for="(item, index) in menuList" :key="index">
-                  <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">
-                    {{ item.name }}
-                  </p>
-                </el-col>
-              </el-col>
-            </el-col>
-            <el-col :span="18" class="right">
-              <span v-if="columnName == '资源介绍'">
-                资源介绍
-              </span>
-              <span v-else-if="columnName == '账号申请'">
-                账号申请
-              </span>
-              <span v-else-if="columnName == '计算登录'">
-                计算登录
-              </span>
-              <span v-else-if="columnName == '应用领域'">
-                应用领域
-              </span>
-              <span v-else-if="columnName == '应用案例'">
-                应用案例
-              </span>
-              <span v-else-if="columnName == '运行动态'">
-                运行动态
-              </span>
-              <span v-else-if="columnName == '超算讲堂'">
-                超算讲堂
-              </span>
-              <span v-else-if="columnName == 'AI社区'">
-                AI社区
-              </span>
-            </el-col>
+            <serviceList></serviceList>
           </div>
         </el-col>
         <el-col :span="24" class="foot">
@@ -67,84 +29,25 @@
 import top from '@/layout/common/top.vue';
 import menus from '@/layout/common/menus.vue';
 import foot from '@/layout/common/foot.vue';
+import serviceList from '@/layout/service/serviceList.vue';
+
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  name: 'detail',
+  name: 'login',
   props: {},
   components: {
     top,
     menus,
     foot,
+    serviceList,
   },
   data: function() {
-    return {
-      menuList: [
-        { name: '资源介绍' },
-        { name: '账号申请' },
-        { name: '计算登录' },
-        { name: '应用领域' },
-        { name: '应用案例' },
-        { name: '运行动态' },
-        { name: '超算讲堂' },
-        { name: 'AI社区' },
-      ],
-      menuColor: 'rgb(5,73,130)',
-      menuIndex: '0',
-      columnName: '',
-    };
-  },
-  created() {
-    this.changeColumn();
-  },
-  methods: {
-    // 选择栏目
-    changeColumn() {
-      if (this.col_name == '资源介绍') {
-        this.menuIndex = 0;
-        this.columnName = this.col_name;
-        this.menuColor = 'rgb(5,73,130)';
-      } else if (this.col_name == '账号申请') {
-        this.menuIndex = 1;
-        this.columnName = this.col_name;
-        this.menuColor = 'rgb(5,73,130)';
-      } else if (this.col_name == '计算登录') {
-        this.menuIndex = 2;
-        this.columnName = this.col_name;
-        this.menuColor = 'rgb(5,73,130)';
-      } else if (this.col_name == '应用领域') {
-        this.menuIndex = 3;
-        this.columnName = this.col_name;
-        this.menuColor = 'rgb(5,73,130)';
-      } else if (this.col_name == '应用案例') {
-        this.menuIndex = 4;
-        this.columnName = this.col_name;
-        this.menuColor = 'rgb(5,73,130)';
-      } else if (this.col_name == '运行动态') {
-        this.menuIndex = 5;
-        this.columnName = this.col_name;
-        this.menuColor = 'rgb(5,73,130)';
-      } else if (this.col_name == '超算讲堂') {
-        this.menuIndex = 6;
-        this.columnName = this.col_name;
-        this.menuColor = 'rgb(5,73,130)';
-      } else if (this.col_name == 'AI社区') {
-        this.menuIndex = 7;
-        this.columnName = this.col_name;
-        this.menuColor = 'rgb(5,73,130)';
-      }
-    },
-    // 点击选择菜单
-    changeMenu(name, index) {
-      this.menuIndex = index;
-      this.columnName = name;
-      this.menuColor = 'rgb(5,73,130)';
-    },
+    return {};
   },
+  created() {},
+  methods: {},
   computed: {
     ...mapState(['user']),
-    col_name() {
-      return this.$route.query.title;
-    },
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
@@ -168,36 +71,6 @@ export default {
   .main {
     min-height: 600px;
     margin: 0 0 10px 0;
-    .left {
-      min-height: 600px;
-      background: #fff;
-      margin: 0 10px 0 0;
-      .top {
-        height: 60px;
-        line-height: 60px;
-        background-color: #054982;
-        color: #fff;
-        font-size: 25px;
-        font-weight: 600;
-        letter-spacing: 2px;
-        text-align: center;
-      }
-      .menuList {
-        height: 50px;
-        line-height: 50px;
-        text-align: center;
-        border-bottom: 1px solid #ccc;
-        p {
-          font-size: 20px;
-          font-weight: bold;
-        }
-      }
-    }
-    .right {
-      width: 78%;
-      min-height: 600px;
-      background: #fff;
-    }
   }
   .foot {
     height: 135px;