feiyang-web/src/views/news.vue

<template>
    <div>
        <div class="page_ban">
            <div class="img compbg"></div>
            <div class="content">
                <div class="page_nav">
                    <div class="name">
                        <a style="padding: 0;" href="">新闻资讯</a> <a href="javascript:;">企业新闻</a>
                    </div>
                    <div class="list" style="bottom:-15px">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="企业新闻" name="first"></el-tab-pane>
                   
                           
                        </el-tabs>

                    </div>
                </div>
            </div>
        </div>
        <div style="height: 80px;"></div>
        <div style="width: 80%;margin: auto;">
            <el-row style="display: flex;flex-wrap: wrap;">
  <el-col :span="8" v-for="item in newslist" :key="item.id" class="colitem">
    <el-card :body-style="{ padding: '0px' }">
      <div class="card_img1 mark" :style="{ 'background-image': 'url(' + item.pic + ')' }" >
        <div class="date">2020.12.31</div>
      </div>
      <div>
        <div class="news_li_con"><div class="title">飞阳建设南江滨东大道获得福州</div> <div class="introduction" v-html="item.content"></div>  <div class="more">more...</div> </div>
       
      </div>
    </el-card>
  </el-col>
  <!-- <el-col :span="8" >
    <el-card :body-style="{ padding: '0px' }">
      <div class="card_img2 mark" >
        <div class="date">2020.03.07</div>
      </div>
      <div>
        <div class="news_li_con"><div class="title">核酸筛选检测进工地为疫情期间</div> <div class="introduction">为进一步做好疫情期间复工复产工作,3月6日我司组织华
大生物科技(武汉)有限公司进入保利城六期项目，为所有返岗工人和项目管理人员进行新型冠状病毒核酸检测...</div>  <div class="more">more...</div> </div>
       
      </div>
    </el-card>
  </el-col>
  <el-col :span="8" >
    <el-card :body-style="{ padding: '0px' }">
      <div class="card_img3 mark" >
        <div class="date">2017.02.19</div>
      </div>
      <div>
        <div class="news_li_con"><div class="title">点赞!莆田市新飞天鞋业有限公司</div> <div class="introduction">江口镇充分发挥辖区内新飞天鞋业有限公司产业链完整的
优势，根据上级部署,积极调度该公司转移产能，火线生产急需的防疫物资,为打赢新冠肺炎防控阻击战提供充...
</div>  <div class="more">more...</div> </div>
       
      </div>
    </el-card>
  </el-col> -->
</el-row>
        </div>
        <div style="height: 70px;"></div>
        <div style="width: 80%;margin: auto;">
        <div v-for="item in newslist" class="newsitem" style="overflow: hidden; padding: 30px 0 24px;position: relative;">
            <div class="date1" style="width: 12%;">2019.07.10</div>
            <div class="" style="  float: left;
    width: 88%;"> <div class="title1">增强服务意识构建共享平台-飞阳厦门分公司机场大道工程举办搅拌桩智能化工艺观摩会
</div> <div class="introduction1">厦门市政建设开发有限公司(厦门翔安机场大道工程业主), 为更好地向集团旗下所属企业共享市政软基处理施工的先进工艺。特邀我司于2019年6月22日在厦门翔安机
场大道工程项目施工现场，举办水泥搅拌桩标准化施工专项观摩会供其属下企业共同学习水泥搅拌桩智能化施工的先进施工工艺，为加快厦门市市政建设工程做出贡献
</div></div>
        </div>
        <div style="height: 40px;"></div>
        <div class="page_more wow fadeInUp animated" data-wow-delay=".2s" id="More" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
                    <em>更多新闻</em>
                </div>
                <div style="height: 60px;"></div>
    </div>
</div>
</template>
<script>
import '@/assets/images/news1.png'
import { getnews } from '@/api';
export default{
    data(){
        return{
            activeName:'first',
            newslist:[],

        }
    },
    mounted(){
       getnews({'page':0}).then((res)=>{
           this.newslist=res.data.content
       })
    },
    methods:{
        handleClick(){

        }
    }
}
</script>
<style scoped>
.compbg {
    background-image: url('../assets/images/banner.png');
}

.page_ban {
    height: 404px;
    position: relative;
    text-align: center;
    z-index: 101;
}

.page_ban .img {
    width: 100%;
    height: 100%;

    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.date{
  
    font-size: 26px;
    color: #dfd4c3;
    line-height: 1;
    position: absolute;
    left: 0;
    bottom: 20px;
    padding: 0 30px;
    width: 100%;
}
.page_ban .content {
    position: relative;
    height: 100%;
}
.content {
    width: 80%;
    margin: 0 auto;
}

.page_nav {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}
div,
li {
    box-sizing: border-box;
}

.page_nav .name {
    float: left;
}

.page_nav .list {
    position: relative;
    float: right;
    margin-right: -35px;
}

.page_nav a {
    float: left;
    line-height: 76px;
    position: relative;
    font-size: 14.5px;

    color: white;
    font-weight: bold;
    text-decoration: none;
}

.page_nav .name a {
    padding-left: 30px;
    /* background: url() no-repeat left 30px; */
}

.page_nav .list {
    position: relative;
    float: right;
    margin-right: -35px;
}

.page_nav .list a {
    color: #e7dfd2;
    color: rgba(231, 223, 210, .7);
    margin-right: 35px;
}

.page_nav a {
    float: left;
    line-height: 76px;
    position: relative;
    font-size: 14.5px;

    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
}

.page_nav .inner_bor {
    height: 4px;
    background: #f23c39;
    position: absolute;
    bottom: -4px;
    left: 0;
    display: block;
}

::v-deep .el-tabs__item {

    color: rgba(255, 255, 255, 0.8);
    border: none;
}

::v-deep .el-tabs__nav-wrap::after {
    background-color: transparent;
}
.card_img1{
    border-radius: 14px;

    position: relative;
    width: 100%;
    height: 307px;

    background-size: cover;
    margin-bottom: 16px;
   border-radius: 14px;
}
.card_img2{
    border-radius: 14px;
    background-image: url('../assets/images/news2.png');
    position: relative;
    width: 100%;
    height: 307px;

    background-size: cover;
    margin-bottom: 16px;
   border-radius: 14px;
}
.card_img3{
    border-radius: 14px;
    background-image: url('../assets/images/news3.png');
    position: relative;
    width: 100%;
    height: 307px;

    background-size: cover;
    margin-bottom: 16px;
   border-radius: 14px;
}
.colitem{
display: inline-block;
float: none;
}
.mark::before{
    
    content: '';
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: .25;
    filter: alpha(opacity = 25);
    -webkit-filter: alpha(opacity = 25);
    border-radius: 14px;

}
::v-deep .el-card.is-always-shadow{
    border-radius: 14px;
    box-shadow: initial;
}
::v-deep el-card{
    border:none
}
.news_li_con {
    position: relative;
padding-left: 28px;
height: 200px;
overflow: hidden;
}
 .news_li_con:before {
    content: '';
    width: 6px;
    height: 21px;
    background-color: rgb(48,113,183);
    position: absolute;
    top: 4px;
    left: 0;
}
.title {
    font-size: 22px;
    color: #3c3c48;
    color: rgba(60, 60, 72, .7);
    line-height: 30px;
    font-weight: bold;
    max-width: 77%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}
 .introduction {
    min-height: 72px;
    font-size: 14.5px;
    color: #848484;
    color: rgba(132, 132, 132, .7);
    line-height: 24px;
    margin: 8px 0 14px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
 .more {
   position:absolute;
   bottom: 0;
    font-size: 18px;
    color: #3958cd;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.4px;
}
div{
    box-sizing: border-box;
}
.el-col{
   padding: 0px 8px;
}
.newsitem::before{
    content: '';
    width: 100%;
    height: 2px;
    background-color: #ebebeb;
    position: absolute;
    bottom: 0;
    left: 0;
}
.newsitem .date1{
    width: 128px;
    float: left;
    font-family: 'Rajdhani';
    font-size: 26px;
    color: rgb(48,113,183);
    line-height: 1;
}
.title1{
    font-size: 20px;
    color: #3c3c48;
    color: rgba(60, 60, 72, .7);
    line-height: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    max-width: 77%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}
.newsitem .introduction1{
    font-size: 14.5px;
    color: #848484;
    color: rgba(132, 132, 132, .7);
    line-height: 24px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.page_more {
    position: relative;
    font-size: 18px;
    color: #ffffff;
    line-height: 70px;
    background-color:  rgb(48,113,183);
    text-align: center;
    cursor: pointer;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -ms-border-radius: 14px;
    -o-border-radius: 14px;
}
::v-deep .el-card{
    border: none;
}
</style>