添加连个栏目

src/layout/index/chengguo.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="chengguo">
     <el-row>
-      <el-col :span="24" class="news">
+      <el-col :span="24" class="news" style="background:#fff">
         <el-col :span="24" class="topTit">
           <el-col :span="18">
             <span :style="`border-color:${borderColor}`">{{title}}</span>

src/layout/index/infoList.vue

@@ -0,0 +1,95 @@
+<template>
+  <div id="infoList" style="background:#fff">
+   <el-row>
+    <el-col :span="24" class="news">
+      <el-col :span="24" class="topTit">
+        <el-col :span="18">
+          <span :style="`border-color:${borderColor}`">{{title}}</span>
+        </el-col>
+        <el-col :span="6" style="text-align:right;">
+          <el-link :underline="false" :style="`color:${Color}`" @click="$router.push({ path: `list/${newslist.column.id}` })">MORE<i class="el-icon-video-play"></i></el-link>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="newsMain">
+        <el-col :span="24" v-for="(item, index) in dataList" :key="index" :type="item.type">
+          <el-col class="chengguolist" :span="24">
+            <el-col :span="19" @click.native="$router.push({ name: 'detail', params:{id:item.id} })">
+              <p class="textOver">{{ item.title }}</p>
+            </el-col>
+            <el-col :span="5" style="text-align:right;">
+              {{item.publish_time}}
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-col>
+  </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'infoList',
+  props: {
+    title: null,
+    list: null,
+  },
+  components: {},
+  data: () => ({
+    dataList: [],
+    borderColor: '#850000',
+    Color: '#850000',
+  }),
+  watch:{
+    list:{
+      handler(val){
+        if(val) this.$set(this, `dataList`, val);
+      },
+      immediate: true
+    }
+  },
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  margin: 0;
+  padding: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.news {
+  padding: 10px;
+}
+.topTit {
+  border-bottom: 1px solid #ccc;
+}
+.topTit span {
+  display: inline-block;
+  height: 30px;
+  border-bottom: 1px solid transparent;
+}
+.chengguolist {
+  padding: 10px 0;
+  border-bottom: 1px dashed #ccc;
+  margin: 1px;
+}
+.chengguolist .el-link {
+  font-size: 16px;
+  color: #000;
+}
+.chengguolist p:hover{
+  color:#850000;
+  cursor: pointer;
+}
+.newsMain {
+  padding: 5px 0;
+}
+</style>
+

src/layout/index/tabsList.vue

@@ -0,0 +1,108 @@
+<template>
+  <div id="tabsList" style="background:#fff">
+    <el-row>
+      <el-col :span="24" class="news">
+        <el-tabs v-model="activeName">
+          <el-tab-pane v-for="(item, index) in dataList" :key="index" :label="item.title" :name="`${index}`">
+            <el-row>
+              <el-col :span="24" >
+                <el-col class="chengguolist" :span="24" v-for="(child, childIndex) in item.children" :key="childIndex">
+                  <el-col :span="20" @click.native="$router.push({ name: 'detail', params:{id:child.id} })">
+                    <p class="textOver">{{ child.title }}</p>
+                  </el-col>
+                  <el-col :span="4" style="text-align:right;">
+                    {{child.publish_time}}
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-row>
+          </el-tab-pane>
+        </el-tabs>
+        <el-link :underline="false" :style="`color:${Color}`" class="more" @click="$router.push({ path: `list/newslist.column.id` })">MORE<i class="el-icon-video-play"></i></el-link>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tabsList',
+  props: {
+    title: null,
+    list: null,
+  },
+  components: {},
+  data: () => ({
+    dataList: [],
+    borderColor: '#850000',
+    Color: '#850000',
+    activeName: '0'
+  }),
+  watch:{
+    list:{
+      handler(val){
+        if(val) this.$set(this, `dataList`, val);
+      },
+      immediate: true
+    }
+  },
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  margin: 0;
+  padding: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.news {
+  padding: 10px;
+}
+/deep/.el-tabs__item:hover {
+  color: #850000;
+  cursor: pointer;
+}
+/deep/.el-tabs__item.is-active {
+  color: #850000;
+}
+/deep/.el-tabs__active-bar {
+  background-color: #850000;
+}
+.more{
+  font-size: 14px;
+  position: absolute;
+  right:15px;
+  top: 20px;
+}
+/deep/.el-tabs__item{
+  font-size:1rem
+}
+.newsMain {
+  padding: 3px 0;
+}
+.chengguolist {
+  padding-bottom: 5px;
+  border-bottom: 1px dashed #ccc;
+  margin: 1px;
+}
+.chengguolist .el-link {
+  font-size: 16px;
+  color: #000;
+}
+.chengguolist p:hover{
+  color:#850000;
+  cursor: pointer;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/views/index/index.vue

@@ -13,7 +13,7 @@
       </el-col>
       <el-col :span="24" class="main">
         <div class="w_1200">
-          <el-col :span="6" class="notice">
+          <el-col :span="6" class="notice" >
             <notice :noticelist="noticelist"></notice>
           </el-col>
           <el-col :span="17" class="news">
@@ -24,13 +24,25 @@
       <el-col :span="24" class="mains">
         <div class="w_1200">
           <el-col :span="6" class="mingshi">
-            <mingshi :mingshilist="mingshilist"></mingshi>
+            <mingshi></mingshi>
           </el-col>
           <el-col :span="17" class="chengguo">
             <chengguo :chengguolist="chengguolist"></chengguo>
           </el-col>
         </div>
       </el-col>
+      <el-col :span="24" class="mains">
+        <div class="w_1200">
+          <el-row >
+            <el-col :span="12" class="jishu">
+              <tabsList :title="`技术问答`" :list="tabsList"></tabsList>
+            </el-col>
+            <el-col :span="11" :push="1" class="jishu">
+              <infoList :title="`党建信息`" :list="partyList"></infoList>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
       <el-col :span="24" class="down">
           <footinfo :topInfo="topInfo"></footinfo>
       </el-col>
@@ -46,15 +58,18 @@ import notice from '../../layout/index/notice.vue';
 import mingshi from '../../layout/index/mingshi.vue';
 import chengguo from '../../layout/index/chengguo.vue';
 import footinfo from '../../layout/index/foot.vue';
+import infoList from '../../layout/index/infoList.vue';
+import tabsList from '../../layout/index/tabsList.vue';
 export default {
   name: 'index',
   props: {
     topInfos:null,
     topInfo:null,
-    noticelist:null,
-    newslist:null,
-    mingshilist:null,
-    chengguolist:null,
+    noticelist:null, //公告列表
+    newslist:null, //新闻列表
+    chengguolist:null, //成果展示
+    partyList: null, //党建信息
+    tabsList:null, //标签页列表
     footlist:null,
   },
   components: {
@@ -65,6 +80,8 @@ export default {
     mingshi,
     chengguo,
     footinfo,
+    infoList,
+    tabsList,
   },
   data: () => ({}),
   created() { },
@@ -93,6 +110,7 @@ export default {
   height: 400px;
   border: 1px solid #ccc;
   overflow: hidden;
+  background:#fff;
 }
 .main .news {
   float: right;
@@ -100,6 +118,7 @@ export default {
   height: 400px;
   border: 1px solid #ccc;
   overflow: hidden;
+  background:#fff;
 }
 .mains {
   margin-bottom: 20px;
@@ -120,4 +139,10 @@ export default {
   min-height: 100px;
   border: 1px solid #ccc;
 }
+.jishu{
+  height: 400px;
+  border: 1px solid #ccc;
+  overflow: hidden;
+  background:#fff;
+}
 </style>