1

src/layout/kjpx/right.vue

@@ -1,8 +1,61 @@
 <template>
   <div id="right">
-    <el-row>
-      <el-col :span="24">
-        <p>right</p>
+    <el-row class="main">
+      <el-col :span="24" class="right">
+        <el-tabs v-model="activeName" class="tabs">
+          <el-tab-pane label="专题研讨" name="first">
+            <el-col :span="24" class="list">
+              <el-col :span="24" class="ztytList" v-for="(item, index) in ztytList" :key="index">
+                <el-col :span="20" class="title textOver">
+                  <span></span>
+                  {{ item.title }}
+                </el-col>
+                <el-col :span="4" class="date textOver">
+                  {{ item.date }}
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-tab-pane>
+          <el-tab-pane label="技术问答" name="second">
+            <el-col :span="24" class="list">
+              <el-col :span="24" class="ztytList" v-for="(item, index) in jswdList" :key="index">
+                <el-col :span="20" class="title textOver">
+                  <span></span>
+                  {{ item.title }}
+                </el-col>
+                <el-col :span="4" class="date textOver">
+                  {{ item.date }}
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-tab-pane>
+          <el-tab-pane label="行业研究" name="third">
+            <el-col :span="24" class="list">
+              <el-col :span="24" class="ztytList" v-for="(item, index) in hyyjList" :key="index">
+                <el-col :span="20" class="title textOver">
+                  <span></span>
+                  {{ item.title }}
+                </el-col>
+                <el-col :span="4" class="date textOver">
+                  {{ item.date }}
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-tab-pane>
+          <el-tab-pane label="教育培训" name="fourth">
+            <el-col :span="24" class="list">
+              <el-col :span="24" class="ztytList" v-for="(item, index) in jypxList" :key="index">
+                <el-col :span="20" class="title textOver">
+                  <span></span>
+                  {{ item.title }}
+                </el-col>
+                <el-col :span="4" class="date textOver">
+                  {{ item.date }}
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-tab-pane>
+        </el-tabs>
       </el-col>
     </el-row>
   </div>
@@ -15,10 +68,17 @@ export default {
     return { title: this.$route.meta.title };
   },
   name: 'right',
-  props: {},
+  props: {
+    ztytList: { type: Array },
+    jswdList: { type: Array },
+    hyyjList: { type: Array },
+    jypxList: { type: Array },
+  },
   components: {},
   data: function() {
-    return {};
+    return {
+      activeName: 'first',
+    };
   },
   created() {},
   methods: {},
@@ -29,4 +89,57 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  height: 615px;
+  overflow: hidden;
+  .right {
+    width: 690px;
+    height: 615px;
+    background: #fff;
+    padding: 0 20px;
+    .tabs {
+      height: 595px;
+      overflow: hidden;
+      margin: 20px 0 0 0;
+      .list {
+        height: 520px;
+        overflow: hidden;
+        .ztytList {
+          padding: 0 0 12px 0;
+          .title {
+            color: #555;
+            span {
+              display: inline-block;
+              width: 4px;
+              height: 4px;
+              background: #666;
+              border-radius: 90px;
+              position: relative;
+              top: -4px;
+            }
+          }
+          .date {
+            text-align: right;
+            color: #555;
+          }
+        }
+      }
+    }
+  }
+}
+
+/deep/.el-tabs__item.is-active {
+  color: #005293;
+}
+/deep/.el-tabs__active-bar {
+  background-color: #005293;
+}
+/deep/.el-tabs__item {
+  font-size: 20px;
+  line-height: 30px;
+}
+/deep/.el-tabs__item:hover {
+  color: #005293;
+}
+</style>

src/layout/kjpx/videos.vue

@@ -5,14 +5,26 @@
         <el-col :span="24" class="top">
           <el-col :span="20" class="left">
             <span></span>
-            <span>栏目名称</span>
+            <span>视频会议中心</span>
           </el-col>
           <el-col :span="4" class="right">
             <i class="el-icon-more"></i>
           </el-col>
         </el-col>
         <el-col :span="24" class="info">
-          列表
+          <el-col :span="24" class="videoList" v-for="(item, index) in videoList" :key="index">
+            <el-col :span="3" class="date textOver">
+              {{ item.date }}
+            </el-col>
+            <el-col :span="21" class="listright">
+              <el-col :span="24" class="title textOver">
+                {{ item.title }}
+              </el-col>
+              <el-col :span="24" class="brief">
+                {{ item.brief }}
+              </el-col>
+            </el-col>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -22,11 +34,10 @@
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
   name: 'videos',
-  props: {},
+  props: {
+    videoList: { type: Array },
+  },
   components: {},
   data: function() {
     return {};
@@ -47,6 +58,7 @@ export default {
     height: 50px;
     line-height: 50px;
     border-bottom: 1px solid #ccc;
+    margin: 0 0 15px 0;
     .left {
       span:nth-child(1) {
         display: inline-block;
@@ -66,5 +78,33 @@ export default {
       text-align: right;
     }
   }
+  .info {
+    height: 530px;
+    overflow: hidden;
+    .videoList {
+      padding: 0 0 13px 0;
+      .date {
+        background: #005293;
+        text-align: center;
+        color: #fff;
+      }
+      .listright {
+        padding: 0 10px;
+        .title {
+          color: #005293;
+        }
+        .brief {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          color: #555;
+          height: 42px;
+        }
+      }
+    }
+  }
 }
 </style>

src/layout/kjzx/kjdt.vue

@@ -5,14 +5,22 @@
         <el-col :span="24" class="top">
           <el-col :span="20" class="left">
             <span></span>
-            <span>栏目名称</span>
+            <span>科技动态</span>
           </el-col>
           <el-col :span="4" class="right">
             <i class="el-icon-more"></i>
           </el-col>
         </el-col>
         <el-col :span="24" class="info">
-          列表
+          <el-col :span="24" class="kjdtList" v-for="(item, index) in kjdtList" :key="index">
+            <el-col :span="20" class="title textOver">
+              <span></span>
+              {{ item.title }}
+            </el-col>
+            <el-col :span="4" class="date textOver">
+              {{ item.date }}
+            </el-col>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -22,11 +30,10 @@
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
   name: 'kjdt',
-  props: {},
+  props: {
+    kjdtList: { type: Array },
+  },
   components: {},
   data: function() {
     return {};
@@ -47,6 +54,7 @@ export default {
     height: 50px;
     line-height: 50px;
     border-bottom: 1px solid #ccc;
+    margin: 0 0 15px 0;
     .left {
       span:nth-child(1) {
         display: inline-block;
@@ -66,5 +74,35 @@ export default {
       text-align: right;
     }
   }
+  .info {
+    height: 595px;
+    overflow: hidden;
+    .kjdtList {
+      padding: 0 0 11px 0;
+      .title {
+        color: #555;
+        span {
+          display: inline-block;
+          width: 4px;
+          height: 4px;
+          background: #666;
+          border-radius: 90px;
+          position: relative;
+          top: -4px;
+        }
+      }
+      .date {
+        text-align: right;
+        color: #555;
+      }
+    }
+    .kjdtList:nth-child(9) {
+      padding: 0 0 20px 0;
+      border-bottom: 1px solid #ccc;
+    }
+    .kjdtList:nth-child(10) {
+      padding: 20px 0 11px 0;
+    }
+  }
 }
 </style>

src/layout/kjzx/mtjj.vue

@@ -5,14 +5,22 @@
         <el-col :span="24" class="top">
           <el-col :span="20" class="left">
             <span></span>
-            <span>栏目名称</span>
+            <span>媒体聚焦</span>
           </el-col>
           <el-col :span="4" class="right">
             <i class="el-icon-more"></i>
           </el-col>
         </el-col>
         <el-col :span="24" class="info">
-          列表
+          <el-col :span="24" class="tztgList" v-for="(item, index) in mtjjList" :key="index">
+            <el-col :span="20" class="title">
+              <span></span>
+              {{ item.title }}
+            </el-col>
+            <el-col :span="4" class="date textOver">
+              {{ item.date }}
+            </el-col>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -22,11 +30,10 @@
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
   name: 'mtjj',
-  props: {},
+  props: {
+    mtjjList: { type: Array },
+  },
   components: {},
   data: function() {
     return {};
@@ -47,6 +54,7 @@ export default {
     height: 50px;
     line-height: 50px;
     border-bottom: 1px solid #ccc;
+    margin: 0 0 15px 0;
     .left {
       span:nth-child(1) {
         display: inline-block;
@@ -66,5 +74,35 @@ export default {
       text-align: right;
     }
   }
+  .info {
+    height: 245px;
+    overflow: hidden;
+    .tztgList {
+      padding: 0 0 10px 0;
+      .title {
+        color: #555;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        height: 42px;
+        span {
+          display: inline-block;
+          width: 4px;
+          height: 4px;
+          background: #666;
+          border-radius: 90px;
+          position: relative;
+          top: -4px;
+        }
+      }
+      .date {
+        color: #555;
+        text-align: right;
+      }
+    }
+  }
 }
 </style>

src/layout/kjzx/tpxw.vue

@@ -1,8 +1,13 @@
 <template>
   <div id="tpxw">
     <el-row>
-      <el-col :span="24">
-        图片新闻
+      <el-col :span="24" class="tpxw">
+        <el-carousel height="340px">
+          <el-carousel-item class="list" v-for="(item, index) in tpxwList" :key="index">
+            <el-image :src="item.url" style="width:100%;height:340px;"></el-image>
+            <p>{{ item.title }}</p>
+          </el-carousel-item>
+        </el-carousel>
       </el-col>
     </el-row>
   </div>
@@ -11,11 +16,10 @@
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
   name: 'tpxw',
-  props: {},
+  props: {
+    tpxwList: { type: Array },
+  },
   components: {},
   data: function() {
     return {};
@@ -29,4 +33,24 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.tpxw {
+  position: relative;
+  .list {
+    p {
+      position: absolute;
+      bottom: 0;
+      width: 96%;
+      height: 30px;
+      line-height: 30px;
+      padding: 0 10px;
+      color: #fff;
+      font-size: 16px;
+      background: #0000004f;
+    }
+  }
+}
+/deep/.el-carousel__indicators {
+  display: none;
+}
+</style>

src/views/kjpx/index copy.vue

@@ -12,10 +12,10 @@
           <div class="w_1200">
             <el-col :span="24" class="one">
               <el-col :span="10" class="left animate__animated animate__backInLeft">
-                <videos></videos>
+                <videos :videoList="videoList"></videos>
               </el-col>
               <el-col :span="14" class="right animate__animated animate__backInRight">
-                <right></right>
+                <right :ztytList="ztytList" :jswdList="jswdList" :hyyjList="hyyjList" :jypxList="jypxList"></right>
               </el-col>
             </el-col>
           </div>
@@ -51,7 +51,65 @@ export default {
     right,
   },
   data: function() {
-    return {};
+    return {
+      // 视频会议中心
+      videoList: [
+        {
+          title: '测试标题',
+          date: '10-10',
+          brief: '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
+        },
+        {
+          title: '七条数据',
+          date: '10-10',
+          brief: '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
+        },
+      ],
+      // 专题研讨
+      ztytList: [
+        {
+          title: '专题研讨',
+          date: '2020-12-12',
+        },
+        {
+          title: '十六条数据',
+          date: '2020-12-12',
+        },
+      ],
+      // 技术问答
+      jswdList: [
+        {
+          title: '技术问答',
+          date: '2020-12-12',
+        },
+        {
+          title: '十六条数据',
+          date: '2020-12-12',
+        },
+      ],
+      // 行业研究
+      hyyjList: [
+        {
+          title: '行业研究',
+          date: '2020-12-12',
+        },
+        {
+          title: '十六条数据',
+          date: '2020-12-12',
+        },
+      ],
+      // 教育培训
+      jypxList: [
+        {
+          title: '教育培训',
+          date: '2020-12-12',
+        },
+        {
+          title: '十六条数据',
+          date: '2020-12-12',
+        },
+      ],
+    };
   },
   created() {},
   methods: {},

src/views/kjzx/index copy.vue

@@ -13,14 +13,14 @@
             <el-col :span="24" class="one">
               <el-col :span="10" class="left">
                 <el-col :span="24" class="top animate__animated animate__backInDown">
-                  <tpxw></tpxw>
+                  <tpxw :tpxwList="tpxwList"></tpxw>
                 </el-col>
                 <el-col :span="24" class="down animate__animated animate__backInUp">
-                  <mtjj></mtjj>
+                  <mtjj :mtjjList="mtjjList"></mtjj>
                 </el-col>
               </el-col>
               <el-col :span="14" class="right animate__animated animate__fadeInRightBig">
-                <kjdt></kjdt>
+                <kjdt :kjdtList="kjdtList"></kjdt>
               </el-col>
             </el-col>
           </div>
@@ -58,7 +58,41 @@ export default {
     kjdt,
   },
   data: function() {
-    return {};
+    return {
+      // 图片新闻
+      tpxwList: [
+        {
+          url: require('@a/news.jpg'),
+          title: '测试标题',
+        },
+        {
+          url: require('@a/news.jpg'),
+          title: '测试标题',
+        },
+      ],
+      // 媒体聚焦
+      mtjjList: [
+        {
+          title: '测试名称',
+          date: '10-12',
+        },
+        {
+          title: '五条数据',
+          date: '10-12',
+        },
+      ],
+      // 科技动态
+      kjdtList: [
+        {
+          title: '测试标题',
+          date: '2020-10-02',
+        },
+        {
+          title: '十八条数据',
+          date: '2020-10-02',
+        },
+      ],
+    };
   },
   created() {},
   methods: {},