gs_nuxt/components/WordList.vue

<template>
<div>

  <el-container>
    <el-main style="padding: 0;margin-top: 20px">


      <!--        主要列表-->
      <el-row>
        <el-col :span="18" offset="3">
          <el-row>
            <el-col v-for="item in news_list" :key="item"  >
              <el-row class="word_item" style="margin-bottom: 20px">
                <el-col :span="8">
                  <div>

                           <span class="type_flag" v-for="type in wordType" v-if="type.dictValue==item.newsInfoType">
                      {{type.dictLabel}}
                    </span>

                  </div>
                  <el-image
                    style="width: 100%; height: 300px"
                    lazy
                    v-if="item.newsInfoUrl "
                    :src="item.newsInfoUrl "
                  ></el-image>
                </el-col>
                <el-col class="word_info" :span="16">
                  <div >
                    <h4>
                      <nuxt-link :to="{name:'info-id',params:{id:item.newsInfoId,title:item.newsInfoTitle}}">
                        {{item.newsInfoTitle.length>25?item.newsInfoTitle.substr(1,25)+"...":item.newsInfoTitle}}
                      </nuxt-link>
                      <!--                          <n-link style="text-decoration: none; font-size: 1.3rem;font-weight: 400;color: black"  :to="{name:'info-id'}">  {{item.newsInfoTitle}}</n-link>-->
                    </h4>
                    <div v-html="item.newsInfoContent.replace(/<[^>]+>/g,'').length>100?item.newsInfoContent.replace(/<[^>]+>/g,'').substr(1,
                    100)+'...':item.newsInfoContent.replace(/<[^>]+>/g,'')">

                    </div>
                    <span class="info_span"><i class="el-icon-s-custom"></i>{{item.newsInfoAuthor}}    时间:{{item.newsInfoTime}}</span>
                  </div>
                  <div></div>
                </el-col>
              </el-row>

            </el-col>
          </el-row>
        </el-col>

      </el-row>

      <!--        分页-->
      <el-row>
        <el-col :span="18" offset="3">
          <el-row>
            <el-col :span="18" offset="7">
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getSearchList"
              />

            </el-col>
          </el-row>
        </el-col>
      </el-row>

    </el-main>
  </el-container>

</div>
</template>

<script>
import {dictList, listWordPost, newsList} from "../static/js";

export default {
  name: "WordList",
  head(){
    return{
      title:"中关村公共资源论坛|"+  this.type_name
    }
  },
  data(){
    return{
      check_type:1,
      type_name:"经典案例",
      value1: '',
      value2: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        type: null,
        author: null,
        releaseTime: null,
        word: null,
        coverUrl: null
      },
      news_list:null,
      total:0,
      wordType:null,
      timer_picker:null,
      s_type:null,
      s_key:null
    }
  },
  created() {
    this.getSearchList()
    this.getDictType()
  },
  methods:{
    getDictType(){
      dictList({"dictType":"sys_info_word_type"}).then(response=>{
        this.wordType=response.rows;
      })
    },
    getSearchList(){

      newsList({"newsInfoType": 5,"pageNum":this.queryParams.pageNum,"pageSize":this.queryParams.pageSize}).then(response=>{
        this.news_list=response.rows;
        this.total=response.total;

      })


    }
  }
}
</script>


<style scoped>
.nav_tap{
  background-color: #f0f0f0;
  text-align: center;
  margin-bottom: 30px;
}

.nav_tap span{
  background-color: #b11116;


  -webkit-text-size-adjust: 100%;
  letter-spacing: 1px;
  text-rendering: optimizeLegibility;
  font-family: "PingFang SC", "Microsoft YaHei", "STHeiti", "sans-serif";
  line-height: 38px;
  font-size: 22px;
  box-sizing: border-box;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  border-radius: 6px;
  padding: 0 20px;

  color: white;
}


.type_flag{
  position: absolute;
  z-index: 2;
  padding: 7px;
  margin: 10px;
  color: white;
  background-color: rgba(0,0,0,0.5);
  border-radius: 20px;
}
.word_item{
  background-color: #f0f0f0;
}
.word_info{
  padding: 0 20px;
}
.info_span{
  position: absolute;
  bottom: 10px;

}



</style>
<style>

/*带背景的分页按钮背景色begin*/
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #b11116;
  color: #FFF;
}
.el-pagination.is-background .el-pager li.active {
  color: #fff;
  cursor: default;
}
.el-pagination.is-background .el-pager li:hover {
  color: #b11116;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #b11116;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  background-color: #b11116;
  color: #FFF;
}
/*带背景的分页按钮背景色end*/


/*不带背景的分页按钮背景色begin*/
.el-pager li.active {
  color: #b11116;
  cursor: default;
}
.el-pagination .el-pager li:hover {
  color: #b11116;
}
.el-pagination .el-pager li:not(.disabled):hover {
  color: #b11116;
}
/*不带背景的分页按钮背景色end*/
</style>