|
|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <div id="detail">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="style">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <top></top>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="menu">
|
|
|
+ <div class="w_1200">
|
|
|
+ <menus></menus>
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="foot">
|
|
|
+ <div class="w_1200">
|
|
|
+ <foot></foot>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import top from '@/layout/common/top.vue';
|
|
|
+import menus from '@/layout/common/menus.vue';
|
|
|
+import foot from '@/layout/common/foot.vue';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+export default {
|
|
|
+ name: 'detail',
|
|
|
+ props: {},
|
|
|
+ components: {
|
|
|
+ top,
|
|
|
+ menus,
|
|
|
+ foot,
|
|
|
+ },
|
|
|
+ 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)';
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ col_name() {
|
|
|
+ return this.$route.query.title;
|
|
|
+ },
|
|
|
+ pageTitle() {
|
|
|
+ return `${this.$route.meta.title}`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.w_1200 {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.style {
|
|
|
+ .menu {
|
|
|
+ height: 70px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
