P0006/src/view/overview.vue

<template>
  <div>
    <el-carousel trigger="click" height="400px">
      <el-carousel-item v-for="(item,index) in lunBoList" :key="index">
        <img :src="item.aboutImgUrl" />
      </el-carousel-item>
    </el-carousel>
    <el-main style="width: 1200px;margin: 0 auto">
      <el-row class="card_style1">
        <el-col :span="6"><div class="grid-content bg-purple"></div>
          <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
            <div slot="header">
              <span><el-divider direction="vertical"></el-divider>重要信息</span>
              <!-- <el-button style="float: right; padding: 3px 0;color: #fff;font-size: 12px" type="text">更多&gt;&gt;</el-button> -->
            </div>
            <div v-for="(o, index) in importList" :key="index" class="text item">
              <router-link :to='"/detail?id="+o.id'>{{index+1}}、{{o.title}}</router-link>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div>
          <el-card class="box-card" shadow="never" style="margin: 0 10px; position: relative;" :body-style="{ padding: '0px',height:'418px' }">
            <img :src="imgObj.aboutImgUrl" />
            <div class="img_info">
                <span class="img_text">{{imgObj.title}}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div>
          <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
            <div slot="header">
              <span><el-divider direction="vertical"></el-divider>新闻资讯</span>
              <router-link to="/news" style="float: right; padding: 3px 0;color: #fff;font-size: 12px" type="text">更多&gt;&gt;</router-link>
            </div>
            <div v-for="(item, index) in newsList" :key="index" class="text item">
              <router-link :to='"/detail?id="+item.id'>{{index+1}}、{{item.title}}</router-link>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-card class="box-card" shadow="never" :body-style="{ padding: '0px' }" style="margin-top: 10px">
        <el-row class="card_style2">
          <el-col :span="12">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>行业动态</span>
                <router-link to="/trode" style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</router-link>
              </div>
              <h2>
                <router-link :to='"/detail?id="+hangDamic.id'>{{hangDamic.title}}</router-link>
              </h2>
              <p v-html="hangDamic.content" class="max2"></p>
              <img :src="hangDamic.aboutImgUrl" style="border-radius: 10px;margin: 10px 0" width="100%"/>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>产业政策</span>
                <router-link to="/policy" style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</router-link>
              </div>
              <div class="list" v-for="(item, index) in chanList" :key="index">
                <h2 style="display: flex; flex-direction: row; 
                    width: 100%; align-items: center;">
                  <router-link :to='"/detail?id="+item.id'><span  class="max2">{{item.title}}</span></router-link>
                    <span style="flex: 1"></span>
                    <span class="time">{{item.publishTime}}</span>
                </h2>
                <p v-html="item.content" class="max2"></p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="never" :body-style="{ padding: '0px' }" style="margin-top: 10px">
        <el-row class="card_style2">
          <el-col :span="8">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>合作交流</span>
                <router-link to="/exchange" style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</router-link>
              </div>
            </el-card>
            <el-card class="box-card" shadow="never" v-for="(item, index) in hezuoList" :key="index"
            :body-style="{ padding: '0px 20px' }">
              <h2>
                <router-link :to='"/detail?id="+item.id'>
                <span style="flex: 1">{{item.title}}</span>
                </router-link>
              </h2>
              <p v-html="item.content" class="max2"></p>
              <img :src="item.aboutImgUrl" 
              style="border-radius: 10px;margin: 10px 0" width="100%"/>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>知识产权</span>
                <router-link to="/km" style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</router-link>
              </div>
              <!-- <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
              <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/> -->
            </el-card>
            <el-card class="box-card" shadow="never" v-for="(item, index) in zhishiList" :key="index"
            :body-style="{ padding: '0px 20px' }">
              <h2>
                <router-link :to='"/detail?id="+item.id'>{{item.title}}</router-link>
              </h2>
              <p v-html="item.content" class="max2"></p>
              <img :src="item.aboutImgUrl" style="border-radius: 10px;margin: 10px 0" width="100%"/>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>会员产品</span>
                <router-link to="/member" style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</router-link>
              </div>
              <!-- <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
              <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/> -->
            </el-card>
            <el-card class="box-card" shadow="never" v-for="(item, index) in huiyuanList" :key="index"
            :body-style="{ padding: '0px 20px' }">
              <h2><router-link :to='"/detail?id="+item.id'>{{item.title}}</router-link>
              </h2>
              <p v-html="item.content" class="max2"></p>
              <img :src="item.aboutImgUrl" style="border-radius: 10px;margin: 10px 0" width="100%"/>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="never" :body-style="{ padding: '0px' }" style="margin-top: 10px">
        <el-row class="card_style2">
          <el-col :span="12" style="position: relative">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>合作交流</span>
                <router-link to="/exchange" style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</router-link>
              </div>
              <div class="list" v-for="(item, index) in hezuoList" :key="index">
                <h2 style="display: flex; flex-direction: row; 
                    width: 100%; align-items: center;">
                  <router-link :to='"/detail?id="+item.id'>
                    <span >{{item.title}}</span>
                  </router-link>
                  <span style="flex: 1"></span>
                    <span class="time">{{item.publishTime}}</span>

                </h2>
                <p v-html="item.content" class="max2"></p>
              </div>
            </el-card>
            <div style="border-right: 1px solid #eee;width:1px;height: 320px;position: absolute;top:15px;right: 0"></div>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>企业认定</span>
                <router-link to="/company" style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</router-link>
              </div>
              <div class="list" v-for="(item, index) in qiyeList" :key="index">
                <h2 style="display: flex; flex-direction: row;width: 100%; align-items: center;">
                  <router-link :to='"/detail?id="+item.id'>
                  <span style="flex: 1">{{item.title}}</span>
                  </router-link>
                  <span style="flex: 1"></span>
                    <span class="time">{{item.publishTime}}</span>

                </h2>
                <p v-html="item.content" class="max2"></p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card" shadow="never" :body-style="{ padding: '0px' }" style="margin-top: 10px">
        <el-row class="card_style2">
          <el-col :span="12">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>行业管理</span>
                <router-link to="/trode" style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</router-link>
              </div>
              <div class="list" v-for="(item, index) in hangyeList" :key="index">
                <h2 style="display: flex; flex-direction: row">
                  <router-link :to='"/detail?id="+item.id'>

                  <span style="flex: 1">{{item.title}}</span>
                  </router-link>
                  <span style="flex: 1"></span>
                    <span class="time">{{item.publishTime}}</span>

                </h2>
                <p v-html="item.content" class="max2"></p>
                <img :src="item.aboutImgUrl" style="border-radius: 10px;margin: 10px 0" width="100%"/>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>人力资源</span>
                <router-link to="/people" style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</router-link>
              </div>
              <div class="list" v-for="(item, index) in renliList" :key="index">
                <h2 style="display: flex; flex-direction: row">
                  <router-link :to='"/detail?id="+item.id'>
                  <span style="flex: 1">{{item.title}}</span>
                  </router-link>
                    <span class="time">{{item.publishTime}}</span>

                </h2>
                <p v-html="item.content" class="max2"></p>
                <img :src="item.aboutImgUrl" style="border-radius: 10px;margin: 10px 0" width="100%"/>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card" shadow="never" :body-style="{ padding: '0px' }" style="margin-top: 10px">
        <el-row class="card_style2">
          <el-col :span="24">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>会员企业</span>
              </div>
              <div v-for="(item, index) in huiyuanQiList" :key="index"
               style="display: inline-table;width: 135px;height: 62px;border: 1px solid #eee;margin: 10px 20px;text-align: center">
                <img :src="item.aboutImgUrl"/>
              </div>
            </el-card>
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>友情链接</span>
              </div>
              <div >
                <el-button type="text" style="color: #255089">
                    <a href="" v-for="(item, index) in youqingList" :key="index" >
                        {{item.title}}
                    </a>
                    <!-- 国家发改委 | 国家工信部 | 国家财政部 | 国家税务机关 | 中国海关  -->
                </el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </el-main>
  </div>
</template>

<script>
  import {getChannelInformationsRequest, getChannelsRequest,
        getDetailRequest, getPositionRequest} from "../api/data";

export default {
  data () {
    return {
        importList: [],
        newsList: [],
        hangDamic: {},
        chanList: [],
        hezuoList: [],
        zhishiList: [],
        huiyuanList: [],
        qiyeList: [],
        hangyeList: [],
        renliList: [],
        huiyuanQiList: [],
        youqingList: [],
        lunBoList: [],
        imgObj: {}
    }
  },
  methods: {
      async getPositionRequest(){
          let res = await getPositionRequest()
          if(res.code == 200){
              res.data.map((item) => {
                  this.getChannelInformationsRequest(item.zhanshilanmu, item.weizhi)
              })
          }
      },

      async getChannelInformationsRequest(id, weizhi){
          let res = await getChannelInformationsRequest({channelId: id});
          if(res.code == 200){
              if(weizhi){
                  res.data.records.map((ite) => {
                          ite.publishTime = this.$moment(Number(ite.publishTime)).format("MM-DD")
                      })
                  if(weizhi == "A"){
                      // 重要信息
                    this.importList = res.data.records.slice(0, 10)
                  }else if(weizhi == "O"){
                    let img = res.data.records.slice(0, 1)
                    if(img){
                        this.imgObj = img[0]
                    }
                  }else if(weizhi == "B"){
                      // 新闻资讯
                      this.newsList = res.data.records.slice(0, 10)
                  }else if(weizhi == "C"){
                      // 行业动态
                      let damic = res.data.records.slice(0, 1)
                      if(damic){
                          this.hangDamic = damic[0]
                      }
                  }else if(weizhi == "D"){
                      // 产业政策
                      this.chanList = res.data.records.slice(0, 4)
                    //   this.chanList.map((ite) => {
                    //       ite.publishTime = this.$moment(Number(ite.publishTime)).format("MM-DD")
                    //   })
                  }else if(weizhi == "E"){
                      // 合作交流
                      this.hezuoList = res.data.records.slice(0, 4)
                    // this.hezuoList.map((ite) => {
                    //       ite.publishTime = this.$moment(Number(ite.publishTime)).format("MM-DD")
                    //   })
                  }else if(weizhi == "F"){
                      // 知识产权
                      this.zhishiList = res.data.records.slice(0, 2)
                  }else if(weizhi == "G"){
                      // 会员产品
                      this.huiyuanList = res.data.records.slice(0, 2)
                  }else if(weizhi == "H"){

                  }else if(weizhi == "I"){
                      // 企业认定
                      this.qiyeList = res.data.records.slice(0, 4)
                    //   this.qiyeList.map((ite) => {
                    //       ite.publishTime = this.$moment(Number(ite.publishTime)).format("MM-DD")
                    //   })
                  }else if(weizhi == "J"){
                      // 行业管理
                      this.hangyeList = res.data.records.slice(0, 1)
                  }else if(weizhi == "K"){
                      // 人力资源
                      this.renliList = res.data.records.slice(0, 1)
                  }else if(weizhi == "L"){
                      // 会员企业
                      this.huiyuanQiList = res.data.records
                  }else if(weizhi == "M"){
                      // 友情链接
                      this.youqingList = res.data.records
                  }else if(weizhi == "N"){
                      // 轮播
                      this.lunBoList = res.data.records
                  }
              }
          }
      },

      async getData(){
          getChannelsRequest({current:1,size:15}).then(res=>{
            console.log(JSON.stringify(res))
            getChannelInformationsRequest({channelId:res.data.records[0].id}).then(res=>{
                console.log(JSON.stringify(res))
                getDetailRequest('1498921672646979585').then(res=>{
                console.log(JSON.stringify(res))
                })
            })
            })
      }

  },
  mounted() {
    // this.getData()
    this.getPositionRequest()
  }
}
</script>
<style>
.item{
  padding: 10px 0;
  font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.time{
    color: #475D7B;
    font-size: 16px;
}

.img_info{
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.6);
    height: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 20px;
}

.img_text{
    color: #FFFFFF;
    font-size: 11px;
}

</style>