gs_nuxt/components/WordType.vue

<template>
  <div>
    <el-container>
      <el-main style="padding: 0">
        <!--          主题导航-->
        <el-row  >

          <el-col :span="18" offset="3">
            <el-row class="nav_tap" :gutter="20" style="padding: 10px;margin-left: 0;margin-right:0;margin-top: 25px " >
              <el-col :span="6"><span class="nav_title" @click="changeType(1)">动态要闻</span></el-col>
              <el-col :span="6"><span class="nav_title" @click="changeType(2)">数据发布</span></el-col>
              <el-col :span="6"><span class="nav_title" @click="changeType(3)">产品服务</span></el-col>
              <el-col :span="6"><span class="nav_title" @click="changeType(4)">研究成果</span></el-col>
            </el-row>

          </el-col>

        </el-row>


        <!--        主要列表-->
        <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 {navList,newsList,dictList,listWordPost} from "../static/js/index"
export default {
  name: "WordType",
  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;
      })
    },
    s_click(){
      console.log(this.timer_picker)

      listWordPost({"newsInfoTitle": this.s_key,"pageNum":1,"newsInfoType":this.s_type,
        "beginNewsInfoTime":this.timer_picker[0],
        "endNewsInfoTime":this.timer_picker[1],
        // "params":[
        //   { },
        //   {},
        // ] ,

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

      })
    },
    changeType(changeId){
      this.check_type=changeId;
      this.queryParams.pageNum=1;
      this.getSearchList();
    },
    getSearchList(){

      newsList({"newsInfoType": this.check_type,"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>