Merge branch 'master' of http://git.cc-lotus.info/count/webnew-count

src/layout/service/serviceList.vue

@@ -0,0 +1,126 @@
+<template>
+  <div id="serviceList">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>计算服务</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="6" class="list" @click.native="clickBtn(item.title)" v-for="(item, index) in list" :key="index">
+            <el-link :underline="false">
+              <el-image :src="item.pic"></el-image>
+              <p>{{ item.title }}</p>
+            </el-link>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'serviceList',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      list: [
+        {
+          pic: require('@/assets/ziyuan.png'),
+          title: '资源介绍',
+        },
+        {
+          pic: require('@/assets/shenqing.png'),
+          title: '账号申请',
+        },
+        {
+          pic: require('@/assets/denglu.png'),
+          title: '计算登录',
+        },
+        {
+          pic: require('@/assets/lingyu.png'),
+          title: '应用领域',
+        },
+        {
+          pic: require('@/assets/anli.png'),
+          title: '应用案例',
+        },
+        {
+          pic: require('@/assets/anli.png'),
+          title: '运行动态',
+        },
+        {
+          pic: require('@/assets/anli.png'),
+          title: '超算讲堂',
+        },
+        {
+          pic: require('@/assets/anli.png'),
+          title: 'AI社区',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    clickBtn(title) {
+      this.$router.push({ path: '/service/detail', query: { title: title } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  background: #fff;
+  min-height: 505px;
+  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;
+    }
+  }
+  .list {
+    width: 275px;
+    min-height: 180px;
+    margin: 0 20px 30px 0;
+    text-align: center;
+    background-color: #034980;
+    .el-image {
+      padding: 30px 0 0 0;
+    }
+    p {
+      font-size: 25px;
+      color: #ffffff;
+      letter-spacing: 2px;
+      padding: 20px 0;
+    }
+  }
+  .list:nth-child(4n) {
+    margin: 0 0 30px 0;
+  }
+}
+</style>

src/router/index.js

@@ -27,6 +27,12 @@ const routes = [
     meta: { title: '计算服务', subSite: true },
     component: () => import('../views/service/index.vue'),
   },
+  // 计算服务-详情
+  {
+    path: '/service/detail',
+    meta: { title: '计算服务', subSite: true },
+    component: () => import('../views/service/detail.vue'),
+  },
   // 交流互动
   {
     path: '/communication/index',

src/views/news/listDetail.vue

@@ -19,10 +19,7 @@
               </el-col>
               <el-col :span="24" class="menu">
                 <el-col class="menuList" :span="24" v-for="(item, index) in menuList" :key="index">
-                  <p
-                    @click="changeMenu(item.name, index)"
-                    :style="`background:${menuIndex == index ? menuBack : ''};color:${menuIndex == index ? menuColor : ''}`"
-                  >
+                  <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">
                     {{ item.name }}
                   </p>
                 </el-col>
@@ -74,8 +71,7 @@ export default {
   data: function() {
     return {
       menuList: [{ name: '科技资讯' }, { name: '技术前沿' }, { name: '工作动态' }, { name: '通知通告' }],
-      menuBack: 'rgb(33,82,153,0.5)',
-      menuColor: 'rgb(255, 255, 255)',
+      menuColor: 'rgb(5,73,130)',
       menuIndex: '0',
       columnName: '',
       displays: '0',
@@ -110,22 +106,22 @@ export default {
       if (this.col_name == '科技资讯') {
         this.menuIndex = 0;
         this.columnName = this.col_name;
-        this.menuColor = 'rgb(255, 255, 255)';
+        this.menuColor = 'rgb(5,73,130)';
         this.$set(this, `displays`, this.display);
       } else if (this.col_name == '技术前沿') {
         this.menuIndex = 1;
         this.columnName = this.col_name;
-        this.menuColor = 'rgb(255, 255, 255)';
+        this.menuColor = 'rgb(5,73,130)';
         this.$set(this, `displays`, this.display);
       } else if (this.col_name == '工作动态') {
         this.menuIndex = 2;
         this.columnName = this.col_name;
-        this.menuColor = 'rgb(255, 255, 255)';
+        this.menuColor = 'rgb(5,73,130)';
         this.$set(this, `displays`, this.display);
       } else if (this.col_name == '通知通告') {
         this.menuIndex = 3;
         this.columnName = this.col_name;
-        this.menuColor = 'rgb(255, 255, 255)';
+        this.menuColor = 'rgb(5,73,130)';
         this.$set(this, `displays`, this.display);
       }
     },
@@ -133,7 +129,7 @@ export default {
     changeMenu(name, index) {
       this.menuIndex = index;
       this.columnName = name;
-      this.menuColor = 'rgb(255, 255, 255)';
+      this.menuColor = 'rgb(5,73,130)';
       this.$set(this, `displays`, 0);
     },
     // 点击详情
@@ -193,6 +189,7 @@ export default {
         border-bottom: 1px solid #ccc;
         p {
           font-size: 20px;
+          font-weight: bold;
         }
       }
     }

src/views/service/detail.vue

@@ -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>

src/views/service/index.vue

@@ -12,7 +12,7 @@
         </el-col>
         <el-col :span="24" class="main">
           <div class="w_1200">
-            计算服务
+            <serviceList></serviceList>
           </div>
         </el-col>
         <el-col :span="24" class="foot">
@@ -29,6 +29,7 @@
 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: 'index',
@@ -37,6 +38,7 @@ export default {
     top,
     menus,
     foot,
+    serviceList, //服务列表
   },
   data: function() {
     return {};
@@ -66,18 +68,8 @@ export default {
     margin: 0 0 10px 0;
   }
   .main {
-    min-height: 600px;
+    // min-height: 600px;
     margin: 0 0 10px 0;
-    .left {
-      min-height: 1050px;
-      background: #fff;
-      margin: 0 10px 0 0;
-    }
-    .right {
-      width: 78%;
-      min-height: 1050px;
-      background: #fff;
-    }
   }
   .foot {
     height: 135px;