更新

src/views/service/detail.vue

@@ -27,28 +27,28 @@
             </el-col>
             <el-col :span="18" class="right">
               <span v-if="columnName == '资源介绍'">
-                资源介绍
+                <resources :columnName="columnName"></resources>
               </span>
               <span v-else-if="columnName == '账号申请'">
-                账号申请
+                <apply :columnName="columnName"></apply>
               </span>
               <span v-else-if="columnName == '计算登录'">
-                计算登录
+                <sign :columnName="columnName"></sign>
               </span>
               <span v-else-if="columnName == '应用领域'">
-                应用领域
+                <application :columnName="columnName"></application>
               </span>
               <span v-else-if="columnName == '应用案例'">
-                应用案例
+                <cases :columnName="columnName"></cases>
               </span>
               <span v-else-if="columnName == '运行动态'">
-                运行动态
+                <funct :columnName="columnName"></funct>
               </span>
               <span v-else-if="columnName == '超算讲堂'">
-                超算讲堂
+                <forum :columnName="columnName"></forum>
               </span>
               <span v-else-if="columnName == 'AI社区'">
-                AI社区
+                <community :columnName="columnName"></community>
               </span>
             </el-col>
           </div>
@@ -67,6 +67,15 @@
 import top from '@/layout/common/top.vue';
 import menus from '@/layout/common/menus.vue';
 import foot from '@/layout/common/foot.vue';
+import resources from './parts/resources.vue';
+import apply from './parts/apply.vue';
+import sign from './parts/sign.vue';
+import application from './parts/application.vue';
+import cases from './parts/cases.vue';
+import funct from './parts/funct.vue';
+import forum from './parts/forum.vue';
+import community from './parts/community.vue';
+
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'detail',
@@ -75,6 +84,14 @@ export default {
     top,
     menus,
     foot,
+    resources, //资源介绍
+    apply, //账号申请
+    sign, //计算登录
+    application, //应用领域
+    cases, //应用案例
+    funct, //运行动态
+    forum, //超算讲堂
+    community, //AI社区
   },
   data: function() {
     return {

src/views/service/parts/application.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="application">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'application',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/service/parts/apply.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="apply">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'apply',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/service/parts/cases.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="cases">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'cases',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/service/parts/community.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="community">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'community',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/service/parts/forum.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="forum">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'forum',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/service/parts/funct.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="funct">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'funct',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/service/parts/resources.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="resources">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'resources',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/service/parts/sign.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="sign">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'sign',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>