合并

src/layout/index/news.vue

@@ -3,24 +3,24 @@
     <el-row>
       <el-col :span="24" class="news">
         <el-col :span="24" class="topTit">
-          <el-col :span="20">
-            <span :style="`border-color:${borderColor}`">就业新闻</span>
+          <el-col :span="18">
+            <span :style="`border-color:${borderColor}`">{{title}}</span>
           </el-col>
-          <el-col :span="4" style="text-align:right;">
+          <el-col :span="6" style="text-align:right;">
             <el-link :underline="false" :style="`color:${Color}`">MORE<i class="el-icon-video-play"></i></el-link>
           </el-col>
         </el-col>
         <el-col :span="24" class="newsMain">
-          <el-col :span="14" class="block">
+          <!-- <el-col :span="14" class="block">
             <el-carousel ref="shubiao">
               <el-carousel-item v-for="(item, index) in newsList" :key="index" :name="`${index}`">
                 <el-link :underline="false" ><img :src="item.picurl" class="newsList" /></el-link>
               </el-carousel-item>
             </el-carousel>
-          </el-col>
-          <el-col :span="10" class="newsLi">
+          </el-col> -->
+          <el-col :span="24" class="newsLi">
             <ul>
-              <li v-for="(tag, index) in newsList" :key="index" :type="tag.type" @mouseover="shuYi(index)" :class="newListActive(tag)">
+              <li v-for="(tag, index) in newsList" :key="index" :type="tag.type" @click="$router.push({ path: '/detail', params:{id:tag.id} })">
                 <el-link :underline="false" class="newsListTit" >{{ tag.title }}</el-link>
               </li>
             </ul>         
@@ -35,21 +35,27 @@
 export default {
   name: 'news',
   props: {
-    newsList:null,
+    // newsList:null,
+    title: null,
   },
   components: {},
   data: () => ({
     borderColor:'#850000',
-    Color:'#850000'
+    Color:'#850000',
+    newsList:[],
   }),
-  created() {},
+  created() {
+    this.testList();
+  },
   computed: {},
   methods: {
-    shuYi(index) {
-      this.$refs.shubiao.setActiveItem(`${index}`);
+    testList() {
+      let arr = [];
+      for (let index = 0; index < 8; index++){
+        arr.push({title:`测试标题${index+1}`});
+      }
+      this.$set(this, `newsList`, arr);
     },
-    // eslint-disable-next-line no-unused-vars
-    newListActive(item) {},
   },
 };
 </script>
@@ -76,7 +82,7 @@ li {
   border-bottom:1px solid transparent;
 }
 .newsMain{
-  padding:10px 0;
+  padding:5px 0;
 }
 .block{
   height:250px;
@@ -87,6 +93,7 @@ li {
 .newsLi ul li{
   padding:9px;
   border-bottom:1px dashed #ccc;
+  margin:1px;
 }
 .newsListTit{
   color:#606266;
@@ -95,6 +102,6 @@ li {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width:315px;
+  width:270px;
 }
 </style>

src/views/index/index.vue

@@ -14,7 +14,7 @@
       <el-col :span="24" class="main">
         <div class="w_1200">
           <el-col :span="6" class="notice">
-            通知公告
+            <news title="通知公告"></news>
           </el-col>
           <el-col :span="17" class="news">
             新闻动态
@@ -24,7 +24,7 @@
       <el-col :span="24" class="mains">
         <div class="w_1200">
           <el-col :span="6" class="mingshi">
-            计算明示
+            <news title="计算明示"></news>
           </el-col>
           <el-col :span="17" class="chengguo">
             成果展示
@@ -81,12 +81,14 @@ export default {
 .main .notice {
   height: 400px;
   border: 1px solid #ccc;
+  overflow: hidden;
 }
 .main .news {
   float: right;
   width: 880px;
   height: 400px;
   border: 1px solid #ccc;
+  overflow: hidden;
 }
 .mains {
   margin-bottom: 20px;
@@ -95,12 +97,14 @@ export default {
 .mains .mingshi {
   height: 400px;
   border: 1px solid #ccc;
+  overflow: hidden;
 }
 .mains .chengguo {
   float: right;
   width: 880px;
   height: 400px;
   border: 1px solid #ccc;
+  overflow: hidden;
 }
 .down {
   height: 100px;