更新

src/layout/achievement/cooperation.vue

@@ -5,7 +5,7 @@
       <span>对外合作</span>
     </el-col>
     <el-col>
-      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#215299" active-text-color="#215299">
+      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#000" active-text-color="#000">
         <el-menu-item index="1" v-for="(item, index) in liebiaoList" :key="index"
           ><span slot="title" @click="clickUrl(item.title, index)" :style="`color:${menuIndex == index ? color : ''}`">{{ item.title }}</span></el-menu-item
         >
@@ -21,7 +21,7 @@ export default {
   components: {},
   data: () => ({
     menuIndex: '',
-    color: 'rgb(5,73,130)',
+    color: '#054982',
     src: require('@/assets/achieveCenter.png'),
     liebiaoList: [{ title: '超算联盟' }, { title: '国家网格' }, { title: '教学中心' }, { title: '创业基地' }, { title: '软件中心' }],
   }),
@@ -31,20 +31,19 @@ export default {
     clickUrl(title, index) {
       if (title == '超算联盟') {
         this.menuIndex = index;
-
-        this.color = 'red';
+        this.color = '#054982';
       } else if (title == '国家网格') {
         this.menuIndex = index;
-        this.color = 'red';
+        this.color = '#054982';
       } else if (title == '教学中心') {
         this.menuIndex = index;
-        this.color = 'red';
+        this.color = '#054982';
       } else if (title == '创业基地') {
         this.menuIndex = index;
-        this.color = 'red';
+        this.color = '#054982';
       } else if (title == '软件中心') {
         this.menuIndex = index;
-        this.color = 'red';
+        this.color = '#054982';
       }
 
       this.$emit('leftdaohang', title);

src/layout/achievement/seminar.vue

@@ -5,7 +5,7 @@
       <span>中心科研</span>
     </el-col>
     <el-col>
-      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#215299" active-text-color="#215299">
+      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#000" active-text-color="#000">
         <el-menu-item index="1" v-for="(item, index) in liebiaoList" :key="index"
           ><span slot="title" @click="clickUrl(item.title, index)" :style="`color:${menuIndex == index ? color : ''}`">{{ item.title }}</span></el-menu-item
         >
@@ -21,7 +21,7 @@ export default {
   components: {},
   data: () => ({
     menuIndex: '0',
-    color: 'red',
+    color: '#054982',
     src: require('@/assets/achieveCenter.png'),
     liebiaoList: [{ title: '平台建设' }, { title: '项目成果' }, { title: '知识产权' }, { title: '科技支撑' }],
   }),

src/layout/common/menus.vue

@@ -6,7 +6,7 @@
           <el-menu-item index="/news/index">新闻动态</el-menu-item>
           <el-menu-item index="/achievement/index">成果展示</el-menu-item>
           <el-menu-item index="/service/index">计算服务</el-menu-item>
-          <el-menu-item index="/communication/index">交流活动</el-menu-item>
+          <el-menu-item index="/communication/index">交流互动</el-menu-item>
           <el-menu-item index="/partisan/index">党建学苑</el-menu-item>
         </el-menu>
       </el-col>

src/views/communication/index.vue

@@ -12,7 +12,12 @@
         </el-col>
         <el-col :span="24" class="main">
           <div class="w_1200">
-            交流互动
+            <el-col :span="24">
+              <el-col :span="8" class="left">
+                <demand :demandlist="demandlist"></demand>
+              </el-col>
+              <el-col :span="16" class="right"><right></right></el-col>
+            </el-col>
           </div>
         </el-col>
         <el-col :span="24" class="foot">
@@ -29,6 +34,9 @@
 import top from '@/layout/common/top.vue';
 import menus from '@/layout/common/menus.vue';
 import foot from '@/layout/common/foot.vue';
+import demand from './parts/demand.vue';
+import right from './parts/right.vue';
+
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
@@ -36,10 +44,36 @@ export default {
   components: {
     top,
     menus,
+    demand,
+    right,
+
     foot,
   },
   data: function() {
-    return {};
+    return {
+      demandlist: [
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+        { title: 'ceshi', date: '2019-03-04' },
+      ],
+    };
   },
   created() {},
   methods: {},
@@ -74,7 +108,7 @@ export default {
       margin: 0 10px 0 0;
     }
     .right {
-      width: 78%;
+      width: 65.8%;
       min-height: 1050px;
       background: #fff;
     }

src/views/communication/parts/demand.vue

@@ -0,0 +1,88 @@
+<template>
+  <div id="demand">
+    <el-col :span="24">
+      <el-col class="swfl">
+        <el-image style="width:22px;height:22px;margin:0 5px -5px 0;" :src="src"></el-image>
+        <span>技术需求征集</span>
+      </el-col>
+      <el-col :span="24" class="info">
+        <el-col :span="24" v-for="(item, index) in demandlist" :key="index" class="list">
+          <span></span>
+          <span class="textOver">{{ item.title }}</span>
+          <span>{{ item.date }}</span>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="anniu"> <el-button type="primary" round>我要发布</el-button></el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'demand',
+  props: {
+    demandlist: null,
+  },
+  components: {},
+  data: () => ({
+    src: require('@/assets/exchange.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.swfl {
+  float: left;
+  width: 100%;
+  height: 60px;
+  overflow: hidden;
+  line-height: 60px;
+  text-align: center;
+  background-color: #054982;
+}
+
+.swfl span {
+  font-size: 22px;
+  color: #ffffff;
+}
+.info {
+  min-height: 600px;
+  border-bottom: 1px solid #ccc;
+}
+
+.list {
+  padding: 10px 10px 10px 10px;
+
+  span:first-child {
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    background: #ccc;
+    margin: 0px 10px 7px 0px;
+  }
+  span:nth-child(2) {
+    display: inline-block;
+    font-size: 16px;
+    color: #555555;
+    font-family: '微软雅黑';
+    width: 64%;
+    margin: 0 30px 0 0;
+  }
+  span:last-child {
+    display: inline-block;
+    width: 90px;
+    font-size: 16px;
+    color: #a8abb7;
+    font-family: '微软雅黑';
+    text-align: right;
+  }
+}
+
+.anniu {
+  text-align: center;
+  padding: 20px 0;
+}
+</style>

src/views/communication/parts/right.vue

@@ -0,0 +1,192 @@
+<template>
+  <div id="zhuanti">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-tabs type="border-card">
+          <el-tab-pane>
+            <span slot="label">专题研讨</span>
+            <el-col :span="24" class="list">
+              <ul>
+                <li
+                  class="zhuantiList"
+                  v-for="(item, index) in ztytList"
+                  :key="index"
+                  @click="$router.push({ path: '/service/servicedetail', query: { id: item.id } })"
+                >
+                  <el-col :span="20" class="title textOver">{{ item.title }}</el-col>
+                  <el-col :span="4" class="date textOver">{{
+                    item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || ''
+                  }}</el-col>
+                </li>
+              </ul>
+              <el-col class="more" :span="24"><el-link :underline="false" @click="moreClick()">查看更多</el-link></el-col>
+            </el-col>
+          </el-tab-pane>
+          <el-tab-pane>
+            <span slot="label">技术问答</span>
+            <el-col :span="24" class="list">
+              <ul>
+                <li
+                  class="zhuantiList"
+                  v-for="(item, index) in jswdList"
+                  :key="index"
+                  @click="$router.push({ path: '/service/servicedetail', query: { id: item.id } })"
+                >
+                  <el-col :span="20" class="title textOver">{{ item.title }}</el-col>
+                  <el-col :span="4" class="date textOver">{{
+                    item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || ''
+                  }}</el-col>
+                </li>
+              </ul>
+              <el-col class="more" :span="24"><el-link :underline="false" @click="moreClick()">查看更多</el-link></el-col>
+            </el-col>
+          </el-tab-pane>
+          <el-tab-pane>
+            <span slot="label">行业研究</span>
+            <el-col :span="24" class="list">
+              <ul>
+                <li
+                  class="zhuantiList"
+                  v-for="(item, index) in hyyjList"
+                  :key="index"
+                  @click="$router.push({ path: '/service/servicedetail', query: { id: item.id } })"
+                >
+                  <el-col :span="20" class="title textOver">{{ item.title }}</el-col>
+                  <el-col :span="4" class="date textOver">{{
+                    item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || ''
+                  }}</el-col>
+                </li>
+              </ul>
+              <el-col class="more" :span="24"><el-link :underline="false" @click="moreClick()">查看更多</el-link></el-col>
+            </el-col>
+          </el-tab-pane>
+          <el-tab-pane>
+            <span slot="label">科技培训</span>
+            <el-col :span="24" class="list">
+              <ul>
+                <li
+                  class="zhuantiList"
+                  v-for="(item, index) in kjpxList"
+                  :key="index"
+                  @click="$router.push({ path: '/service/servicedetail', query: { id: item.id } })"
+                >
+                  <el-col :span="20" class="title textOver">{{ item.title }}</el-col>
+                  <el-col :span="4" class="date textOver">{{
+                    item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || ''
+                  }}</el-col>
+                </li>
+              </ul>
+              <el-col class="more" :span="24"><el-link :underline="false" @click="moreClick()">查看更多</el-link></el-col>
+            </el-col>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zhuanti',
+  props: {
+    ztytList: null, //专题研讨
+    jswdList: null, //技术问答
+    hyyjList: null, //行业研究
+    kjpxList: null, //科技培训
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {
+    moreClick() {
+      this.$router.push({ path: '/service/servicelist' });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  color: #999;
+}
+.info {
+  padding: 20px;
+  height: 300px;
+  overflow: hidden;
+}
+/deep/.el-tabs--border-card {
+  border: none;
+  box-shadow: none;
+}
+/deep/.el-tabs--border-card > .el-tabs__header {
+  background-color: transparent;
+  border-bottom: none;
+  margin: 0 0 10px 0;
+}
+/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  color: #2c3350;
+  border-right-color: transparent;
+  border-left-color: transparent;
+}
+/deep/.el-tabs__item {
+  padding: 0 15px 0 0;
+  font-size: 22px;
+  font-weight: bold;
+}
+/deep/.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2) {
+  padding-left: 0;
+}
+/deep/.el-tabs--border-card > .el-tabs__content {
+  padding: 0;
+}
+.list {
+  height: 220px;
+  overflow: hidden;
+}
+.list ul {
+  min-height: 30px;
+  max-height: 180px;
+  overflow: hidden;
+  padding: 0 0 0 20px;
+}
+.list ul li {
+  padding: 0 0 9px 0;
+}
+.list ul li .date {
+  display: inline-block;
+  width: 90px;
+  text-align: left;
+  font-size: 16px;
+  color: #60626e;
+}
+.list ul li .title {
+  display: inline-block;
+  font-size: 16px;
+  color: #60626e;
+  width: 610px;
+  margin: 0 20px 0 0;
+}
+.list ul li:hover .date {
+  color: #215299;
+}
+.list ul li:hover .title {
+  color: #215299;
+}
+.more {
+  height: 30px;
+  line-height: 25px;
+  text-align: center;
+  background: #f5f5f5;
+}
+.more .el-link {
+  font-size: 16px;
+  color: #60626e;
+}
+</style>