news修改,index超出隐藏修改

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}`">通知公告</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">
                 <el-link :underline="false" class="newsListTit" >{{ tag.title }}</el-link>
               </li>
             </ul>         
@@ -35,21 +35,26 @@
 export default {
   name: 'news',
   props: {
-    newsList:null,
+    // newsList: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 < 9; index++){
+        arr.push({title:`测试标题${index+1}`});
+      }
+      this.$set(this, `newsList`, arr);
     },
-    // eslint-disable-next-line no-unused-vars
-    newListActive(item) {},
   },
 };
 </script>
@@ -76,7 +81,7 @@ li {
   border-bottom:1px solid transparent;
 }
 .newsMain{
-  padding:10px 0;
+  padding:5px 0;
 }
 .block{
   height:250px;
@@ -87,6 +92,7 @@ li {
 .newsLi ul li{
   padding:9px;
   border-bottom:1px dashed #ccc;
+  margin:1px;
 }
 .newsListTit{
   color:#606266;
@@ -95,6 +101,6 @@ li {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width:315px;
+  width:270px;
 }
 </style>

src/views/index/index.vue

@@ -12,7 +12,7 @@
       <el-col :span="24" class="main">
         <div class="w_1200">
           <el-col :span="6" class="notice">
-            通知公告
+            <news></news>
           </el-col>
           <el-col :span="17" class="news">
             新闻动态
@@ -37,10 +37,13 @@
 </template>
 
 <script>
+import news from '@publics/src/layout/index/news.vue';
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    news,
+  },
   data: () => ({}),
   created() { },
   computed: {},
@@ -69,12 +72,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;
@@ -83,12 +88,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;