gs_nuxt/pages/index.vue

<template>
 <div>
   <head-bar></head-bar>
   <el-container>
     <el-main style="padding: 0">
<!--       大轮播-->
       <div class="block">
         <el-carousel height="500px">
           <el-carousel-item v-for="item in c_1" :key="item">
             <nuxt-link :to="{name:'info-id',params:{id:item.newsInfoId,title:item.newsInfoTitle}}">
               <el-image
                 style="width: 100%; height: 500px"


                 v-if="item.newsInfoUrl "
                 :src="item.newsInfoUrl "

               ></el-image>
             </nuxt-link>


             <h3 class="small">{{ item }}</h3>
           </el-carousel-item>
         </el-carousel>
       </div>
<!--小轮播-->
       <el-row style="margin-top:25px">
         <el-col :span="18" offset="3">
           <div class="block">

             <el-carousel :autoplay="false" arrow="always" height="150px">
               <el-carousel-item  v-for="item in c_2_count" :key="item">
                <el-row :gutter="20" >
                  <el-col  v-for="item1 in 5" :span="4" v-if="c_2[((item-1)*5)+(item1-1)]!=null" :offset="(item1-1)==0?2:0" >
                    <nuxt-link :to="{name:'info-id',params:{id:c_2[((item-1)*5)+(item1-1)].newsInfoId,title:item.newsInfoTitle}}">

                    <el-image
                      style="width: 100%; height: 200px"
                      v-if="c_2[((item-1)*5)+(item1-1)].newsInfoUrl "
                      :src="c_2[((item-1)*5)+(item1-1)].newsInfoUrl "

                    ></el-image>
                    </nuxt-link>
                  </el-col>

                </el-row>
               </el-carousel-item>
             </el-carousel>
           </div>
         </el-col>
       </el-row>
<!--主题文章-->
       <el-row style="margin-top: 30px">
         <el-col :span="18" offset="3">
           <div class="value" style="">
             新闻动态&nbsp;&nbsp;
             <span class="en">NEWS</span>
             <nuxt-link :to="{name:'word'}">
               <span class="btn btn-more" style="float: right">更多</span>

             </nuxt-link>

           </div>
         </el-col>
       </el-row>
      <el-row style="margin: 10px">
        <el-col :span="18" offset="3">
          <el-row :gutter="40">
            <el-col :span="8">
              <div class="block">
                <el-carousel height="300px">
                  <el-carousel-item v-for="item in newNews" :key="item">
                    <nuxt-link :to="{name:'info-id',params:{id:item.newsInfoId,title:item.newsInfoTitle}}">
                    <el-image
                      style="width: 100%; height: 300px"
                      v-if="item.newsInfoUrl "
                      :src="item.newsInfoUrl "
                    ></el-image>
                    </nuxt-link>
                    <h3 class="small">{{ item }}</h3>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="height: 300px">
                <el-row  style="margin-bottom: 30px">
                  <el-col  class="nav-btn" :style="{color:(changeColor_1?Color_1:Color_2)}" style="text-align: right" :span="9">
                    <span class="change_title"  @click="change1(false)">
                      动态要闻
                    </span>
                  </el-col>
                  <el-col style="text-align: center" :span="6">|</el-col>
                  <el-col  class="nav-btn" :style="{color:(!changeColor_1?Color_1:Color_2)}" style="text-align:left" :span="9">
                     <span class="change_title" @click="change1(true)">
                      数据发布
                    </span>
                    </el-col>
                </el-row>
                <el-row  :style="{display: !changeColor_1?'inline-block':'none'}">

                  <el-col :span="24" v-for="item in display_news" :key="item">
                    <nuxt-link :to="{name:'info-id',params:{id:item.newsInfoId,title:item.newsInfoTitle}}">
                    {{item.newsInfoTitle.length>15?item.newsInfoTitle.substr(1,14)+"...":item.newsInfoTitle}} <span style="float: right">{{item.newsInfoTime}}</span>
                    </nuxt-link>
                  </el-col>
                </el-row>
                <el-row  :style="{display: changeColor_1?'inline-block':'none'}">
                  <el-col :span="24" v-for="item in data_push" :key="item">
                    <nuxt-link :to="{name:'info-id',params:{id:item.newsInfoId,title:item.newsInfoTitle}}">
                    {{item.newsInfoTitle.length>15?item.newsInfoTitle.substr(1,14)+"...":item.newsInfoTitle}} <span style="float: right">{{item.newsInfoTime}}</span>
                    </nuxt-link>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="height: 300px">
                <el-row  style="margin-bottom: 30px">
                  <el-col   class="nav-btn" :style="{color:(changeColor_2?Color_1:Color_2)}" style="text-align: right" :span="9">
                      <span class="change_title" @click="change2(false)">
                      产品服务
                    </span>
                    </el-col>
                  <el-col style="text-align: center" :span="6">|</el-col>
                  <el-col  class="nav-btn" :style="{color:(!changeColor_2?Color_1:Color_2)}" style="text-align:left" :span="9">
                      <span class="change_title" @click="change2(true)">
                      研究成果
                    </span>
                    </el-col>
                </el-row>
                <el-row :style="{display: !changeColor_2?'inline-block':'none'}">

                  <el-col :span="24" v-for="item in research" :key="item">
                    <nuxt-link :to="{name:'info-id',params:{id:item.newsInfoId,title:item.newsInfoTitle}}">
                    {{item.newsInfoTitle.length>15?item.newsInfoTitle.substr(1,14)+"...":item.newsInfoTitle}} <span style="float: right">{{item.newsInfoTime}}</span>
                    </nuxt-link>
                  </el-col>

                </el-row>

                <el-row :style="{display: changeColor_2?'inline-block':'none'}">



                  <el-col :span="24" v-for="item in product_service" :key="item">
                    <nuxt-link :to="{name:'info-id',params:{id:item.newsInfoId,title:item.newsInfoTitle}}">
                    {{item.newsInfoTitle.length>15?item.newsInfoTitle.substr(1,14)+"...":item.newsInfoTitle}} <span style="float: right">{{item.newsInfoTime}}</span>
                  </nuxt-link>
                  </el-col>

                </el-row>


              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
       <!--编辑精选文章-->
       <el-row style="margin-top: 30px">
         <el-col :span="18" offset="3">
           <div class="value" style="">
             编辑精选&nbsp;&nbsp;
             <span class="en">Editor's Picks</span>
             <nuxt-link :to="{name:'editor',params:{'type':1}}">
               <span class="btn btn-more" style="float: right">更多</span>
             </nuxt-link>
<!--             <span style="float: right">更多</span>-->
           </div>
         </el-col>
       </el-row>
       <el-row style="margin: 10px">
         <el-col    :span="18" offset="3">
            <el-row :gutter="40">
              <el-col :span="6" v-for="item in editor" :key="item" style="margin-bottom: 20px">
                <nuxt-link :to="{name:'info-id',params:{id:item.newsInfoId,title:item.newsInfoTitle}}">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
                  <el-image
                    style="width: 100%; height: 180px"

                    lazy
                    v-if="item.newsInfoUrl "
                    :src="item.newsInfoUrl "


                  ></el-image>
                  <span v-else>{{item.newsInfoUrl}}</span>
                  <div style="padding: 14px;">
                    <span  class="item_title">{{item.newsInfoTitle.length>13?item.newsInfoTitle.substr(1,13)+"...":item.newsInfoTitle}}</span><br>
                    <span class="item_type" v-for="type in wordType" v-if="type.dictValue==item.newsInfoType">
                      {{type.dictLabel}}
                    </span>
                    <el-divider></el-divider>
                    <el-row>
                      <el-col :span="6">
                        <el-avatar  size="15" >{{item.newsInfoAuthor}}</el-avatar>
                      </el-col>
                      <el-col :span="18">
                        <div style="line-height: 40px;vertical-align: center">


                          <span style="">  {{item.newsInfoAuthor}}  </span>



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

                  </div>
                </el-card>
                </nuxt-link>
              </el-col>





            </el-row>
         </el-col>
       </el-row>
<!--        典型案例-->
       <el-row style="margin-top: 30px">
         <el-col :span="18" offset="3">
           <div class="value" style="">
             经典案例&nbsp;&nbsp;
             <span class="en">Classic Case</span>
             <nuxt-link :to="{name:'classic',params:{'type':5}}">
               <span class="btn btn-more" style="float: right">更多</span>
             </nuxt-link>

             <!--             <span style="float: right">更多</span>-->
           </div>
         </el-col>
       </el-row>
      <el-row style="margin: 10px">
        <el-col    :span="18" offset="3">
          <el-row :gutter="40" >
            <el-col :span="6" v-for="item in classic_case" :key="item" style="margin-bottom: 20px">
              <nuxt-link :to="{name:'info-id',params:{id:item.newsInfoId,title:item.newsInfoTitle}}">
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <el-image
                  style="width: 100%; height: 180px"
                  lazy
                  v-if="item.newsInfoUrl "
                  :src="item.newsInfoUrl "

                ></el-image>
                <div style="padding: 14px;">
                  <span class="item_title">{{item.newsInfoTitle.length>13?item.newsInfoTitle.substr(1,13)+"...":item.newsInfoTitle}}</span><br>
                  <span class="item_type" v-for="type in wordType" v-if="type.dictValue==item.newsInfoType">
                      {{type.dictLabel}}
                    </span>
                  <el-divider></el-divider>
                  <el-row>
                    <el-col :span="6">
                      <el-avatar size="15" >{{item.newsInfoAuthor}}</el-avatar>
                    </el-col>
                    <el-col :span="18">
                      <div style="line-height: 40px;vertical-align: center">


                        <span style=""> {{item.newsInfoAuthor}}  </span>



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

                </div>
              </el-card>
              </nuxt-link>
            </el-col>





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





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

<!--   测试-->
<!--   <LTInfo></LTInfo>-->
<!--   <LTProgress></LTProgress>-->
<!--<WordType></WordType>-->
<!--<SearchList></SearchList>-->



   <!--       底部-->
   <foot-bar>
   </foot-bar>
 </div>
</template>

<script>

import {navList,newsList,dictList} from "../static/js/index"
import axios from 'axios';

export default {
  name: 'IndexPage',
  head(){
    return{
      title:"中关村公共资源论坛"
    }
  },
  data(){
   return{
     Color_1: "black",
     Color_2: "#c1272d",
     changeColor_1:true,
     changeColor_2:true,
      nav_list:null,

     c_1:null,
     c_2:null,
     c_2_count:null,
     display_news:null,
     data_push:null,
     product_service:null,
     research:null,
     editor:null,
     classic_case:null,
     wordType:null,
     newNews:null

   }
  },created() {
     this.nav_list=this.getNavList();
     this.getNewsList();
     this. getDictType();

    this.$forceUpdate();
  },methods: {
    change1(flag){

      this.changeColor_1=flag

    },
    change2(){

      this.changeColor_2=!this.changeColor_2

    },
    getNavList(){
      navList().then(response=>{
        this.typeList=response.rows;

      })
    },
    getDictType(){
      dictList({"dictType":"sys_info_word_type"}).then(response=>{
        this.wordType=response.rows;
      })
    },
    getNewsList(){
      newsList({"newsInfoCarousel":1}).then(response=>{
        this.c_1=response.rows;

      })
      newsList({"newsInfoSc":1}).then(response=>{
        this.c_2=response.rows;
        let i=response.total;
        this.c_2_count= parseInt(i%5==0?(i/5):((i/5)+1))
        console.log(this.c_2_count)
      })
      newsList({"newsInfoType":1,"pageNum":1,"pageSize":10}).then(response=>{
        this.display_news=response.rows;

      })
      newsList({"newsInfoType":2,"pageNum":1,"pageSize":10}).then(response=>{
        this.data_push=response.rows;

      })
      newsList({"newsInfoType":4,"pageNum":1,"pageSize":10}).then(response=>{
        this.product_service=response.rows;

      })
      newsList({"newsInfoType":3,"pageNum":1,"pageSize":10}).then(response=>{
        this.research=response.rows;

      })
      newsList({"newsInfoType":5,"pageNum":1,"pageSize":4}).then(response=>{
        this.classic_case=response.rows;

      })
      newsList({"pageNum":1,"pageSize":5}).then(response=>{
        this.newNews=response.rows;
      })
      newsList({"newsInfoRecommend":1,"pageNum":1,"pageSize":8}).then(response=>{
        this.editor=response.rows;

      })
    },
  }
}
</script>

<style >
html,body{
  padding: 0;
  margin: 0;
}

/*.el-carousel__item h3 {*/
/*  color: #475669;*/
/*  font-size: 14px;*/
/*  opacity: 0.75;*/
/*  line-height: 150px;*/
/*  margin: 0;*/
/*}*/

/*.el-carousel__item:nth-child(2n) {*/
/*  background-color: #99a9bf;*/
/*}*/

/*.el-carousel__item:nth-child(2n+1) {*/
/*  background-color: #d3dce6;*/
/*}*/

.value{
  -webkit-text-size-adjust: 100%;
  letter-spacing: 1px;
  text-rendering: optimizeLegibility;
  font-family: "PingFang SC", "Microsoft YaHei", "STHeiti", "sans-serif";
  font-size: 28px;
  font-weight: bold;




}
.en{
  -webkit-text-size-adjust: 100%;
  letter-spacing: 1px;
  text-rendering: optimizeLegibility;
  font-family: "PingFang SC", "Microsoft YaHei", "STHeiti", "sans-serif";
  font-size: 28px;


  font-weight: 300;


}
.btn-more{
  -webkit-text-size-adjust: 100%;
  letter-spacing: 1px;
  text-rendering: optimizeLegibility;
  font-family: "PingFang SC", "Microsoft YaHei", "STHeiti", "sans-serif";
  font-weight: bold;

  position: relative;
  cursor: pointer;


  font-size: 16px;


}
.nav-btn{
  -webkit-text-size-adjust: 100%;
  letter-spacing: 1px;
  text-rendering: optimizeLegibility;
  font-family: "PingFang SC", "Microsoft YaHei", "STHeiti", "sans-serif";
  border-spacing: 0;
  font-size: 22px;
  font-weight: bold;

}
.item_title{
  font-weight: 700;
}
.item_title:hover{
  color:  #b11116;
}
.item_type{
  margin-top: 15px;
  color: dimgray;
}
</style>