dev/dcp-web-gate/src_old/views/FinancialServices/FinancialServices.vue

<template>
    <div class="autoBox box" >
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{$t('common.FinancialServices')}}</el-breadcrumb-item>
        </el-breadcrumb>

      </div>

      <div class="projectBox">
        <!-- 项目列表 -->
        <ul style="width:75%;float:left">
            <li style="width:100%">
              <div class="initListBox" v-for="(item,index) in init" :key="item.id" @click="toView(item.id,item)">
                  <div style="height: 200px;position: relative">
                    <img :src="getIconImg('financial'+(index+1)+'.png')" alt style="width: 100%;height: 100%;position:absolute;top: 0;left: 0"/>
                    <div style="position: absolute;left: 0;width: 278px;height: 200px;">
                        <img :src="getIconImg((index+1)+'.png')" alt style="width: 100%;height: 100%; border: 1px solid #E4E4E4;"/>
                        <div class="inilistTitle">
                            <span>{{$t(item.title)}}</span>
                        </div>
                    </div>
                    <div class="initDetail">
                      {{$t(item.label)}}
                    </div>
                    <div class="initTip">
                      <img :src="getIconImg('tip'+(index+1)+'.png')" alt="" style="width:100%;">
                    </div>
                    <div style="clear: both"></div>
                  </div>
              </div>
            </li>
        </ul>
        
        <div class="relevan">
          <!-- 投融资相关资讯 -->
          <div class="relevanInformation">
            <div class="informationTitle">{{$t('common.relatedNews')}}</div>
            <div class="informationList">
              <ul>
                <li v-for="(infoItem,index) in informationList" @click="toShowDetails('realTimeInfoItemdetails',infoItem.baseEntityId)">
                  <div class="list" >
                    <div style="height: 100%;width:20px;float: left ">
                      <div class="sort" :style="index==0?'background:#FF2233;color:#fff':index==1?'background:#FF5900;color:#fff':index==2?'background:#FFA602;color:#fff':'background:#F4F4F5;color:#A5A9B3'">{{index+1}}</div>
                    </div>
                    <div style="margin-left: 15px;float: left;width:86%" :style="$i18n.locale=='zh'?'overflow: hidden;text-overflow: ellipsis;white-space: nowrap;':''"> {{infoItem.title}}</div>
                  </div>
<!--                  <div class="hostText" v-if="infoItem.click === maxNum">{{$t('common.Hot')}}</div>-->
                </li>
              </ul>
            </div>
          </div>
          <!-- 投融资相关会议-->
          <div class="relevanMeeting">
            <div class="informationTitle">{{$t('common.InvestmentFinancing')}}</div>
            <div class="informationList">
              <ul>
                <li  v-for="(infoItem,index) in meetingList" style="height: 200px">
                    <img :src="'./api/file/pub/'+infoItem.meetingPicUrl" alt="" class="meetingImg" @click="toShowDetails('ConferenceResult',infoItem.id)">
                </li>
              </ul>
            </div>
          </div>
        </div>
        
      </div>
      <div style="clear: both;"></div>
    </div>
</template>

  <script>
  import Base from "@/views/base/Base";
  import HeaderItem from "@/components/headerItem";
  import tabers from "@/components/taber";
  import footers from "@/components/footers";
  import Screen from "@/components/screen";
  import moment from "moment";
  import {financeInfoList} from "../../api/financialService/cmsInformationViews";
  import {getConfrences} from "../../api/meeting/meetingOutInfo";
  export default {
    name: "financialServices",
    components: { tabers, HeaderItem, footers, Screen, moment },
    extends: Base,
    data() {
      return {
        index: 0,
        indexCurrent:0,
        imgIndex:1,
        loading: true,
        maxNum:0,
        projectFaIcon:2,
        screen1: {
          value: "common.Region",
          item: [],
        },
        screen3:{
            value:'common.Byletter',
            item:[
            {
              value:null,
              ifValue:true,
              label:'common.All'
            },{
              ifValue:false,
              value:'A',
              label:'A'
            },{
              ifValue:false,
              value:'B',
              label:'B'
            },{
              ifValue:false,
              value:'C',
              label:'C'
            },{
              ifValue:false,
              value:'D',
              label:'D'
            },{
              ifValue:false,
              value:'E',
              label:'E'
            },{
              ifValue:false,
              value:'F',
              label:'F'
            },{
              ifValue:false,
              value:'G',
              label:'G'
            },{
              ifValue:false,
              value:'H',
              label:'H'
            },{
              ifValue:false,
              value:'I',
              label:'I'
            },{
              ifValue:false,
              value:'J',
              label:'J'
            },{
              ifValue:false,
              value:'K',
              label:'K'
            },{
              ifValue:false,
              value:'L',
              label:'L'
            },{
              ifValue:false,
              value:'M',
              label:'M'
            },{
              ifValue:false,
              value:'N',
              label:'N'
            },{
              ifValue:false,
              value:'O',
              label:'O'
            },{
              ifValue:false,
              value:'P',
              label:'P'
            },{
              ifValue:false,
              value:'Q',
              label:'Q'
            },{
              ifValue:false,
              value:'R',
              label:'R'
            },{
              ifValue:false,
              value:'S',
              label:'S'
            },{
              ifValue:false,
              value:'T',
              label:'T'
            },{
              ifValue:false,
              value:'U',
              label:'U'
            },{
              ifValue:false,
              value:'V',
              label:'V'
            },{
              ifValue:false,
              value:'W',
              label:'W'
            },{
              ifValue:false,
              value:'X',
              label:'X'
            },{
              ifValue:false,
              value:'Y',
              label:'Y'
            },{
              ifValue:false,
              value:'Z',
              label:'Z'
            }],
        },
        informationList:[],
        meetingList:[],
        init: [
          {
            id:1,
            title:'common.FinancialInstitutions',
            label:'common.FinancialInstitutionsContent',
          },
          {
            id:2,
            title:'common.InvestmentGuide',
            value:'FinancialServiceInvestmentGuide',
            label:'common.InvestmentGuideContent',
          },
          {
            id:3,
            title:'common.ProjectAppraisal',
            value:'FinancialServiceProjectEvaluation',
            label:'common.ProjectAppraisalContent',
          },
          {
            id:4,
            title:'common.FundIdeas',
            value:'FinancialServicesFundIdeas',
            label:'common.FundIdeasContent',
          },
        ],

        clickNum:{},
        dict: {},
        recommend: [],
        Initials:'',
        informationNumMap:{},
      };
    },

    mounted() {
      // this.getData();// 请求字典值
      // this.getBase();// 请求数据
      // this.hotMax();
      this.getinformation();
      this.getmeetingList();
      this.$store.commit('modify', 'FinancialServices');
      window.localStorage.setItem('router', 'FinancialServices');
    },
    watch: {
      '$i18n.locale'(){
        // this.changeLanguage();
        this.getinformation();

      },
    },

    methods: {
      // changeLanguage(){
      //   // this.getBase();
      //   if(this.$i18n.locale=='en'){
      //     this.init = this.initEN;
      //   }else{
      //     this.init = this.initZH;
      //   }
      // },
      closeMask () {
          let path=this.$route.path.substr(1);
          this.$store.state.router=path;
          window.onload()
      },
      getIconImg(url) {
          return require("@/assets/img/financialService/" + url);
      },

      toShowDetails(router,json){
        this.$router.push({
          name:router,
          query:{
            key:json,
          }
        })
      },

      toView(router, json) {
        this.indexCurrent = 1;
        if(router===1){
            this.$router.push({
                name: 'FinancialServicesAgency',
                id:router,
                query:{
                    key:json.id,

                }
            })
          console.log(this.indexCurrent)
        }else {
          this.$router.push({
            name:json.value,
            id:router,
            value:this.init.value,
            query:{
              key:json,
            }
          })

        }
        console.log(router,json)

   
      },
      getinformation(){
        const that = this;
        let infoPrams = {
          pageSize:5,
          pageNo:1,
          language:this.$i18n.locale.toUpperCase(),
        };
        financeInfoList(infoPrams).then((res)=>{

          this.informationList = res.data;
          console.log(res,'------------------------投融资咨询')
        });
      },
      getmeetingList(){
        getConfrences().then((res)=>{

          let meetingLength = res.data.meetingBasicInfos.length;
          this.meetingList = [];
          for(let i=0;i<meetingLength;i++){
            if(i<2){
              this.meetingList.push(res.data.meetingBasicInfos[i])
            }
          }
        })
      },
    }

  };
</script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
    .box {
      margin-top: 10px;
      background: #fff;
      /* height: 500px; */
      padding: 20px 0;
    }
    .crumbs {
      margin-left: 20px;
    }
    body {
      margin: 0;
    }

    li {
      display: inline-block;
      color: #1251a7;
    }

    .recommend {
      margin-top: 15px;
      margin-left: 100px;
    }
    .recommend li {
      display: inline-block;
      width: 170px;
      /* height: 130px; */
      text-align: center;
      margin-right: 15px;
    }

    .initListBox {
      height: 215px;
      margin-top: 20px;
      margin-left: 20px;

      font-size:14px;
      color: #333;
      min-height: 200px;
      position: relative;
      border-bottom: 1px solid #E4E4E4;
    }
    .initDetail{
      width: 438px;
      float: left;
      margin-left: 300px;
      margin-top: auto;
      font-size: 16px;
      line-height: 30px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:5;
      margin-top: 30px

    }
    .projectBox{
      width: 100%;
    }
    .relevan{
      width:25%;
      float:right;
    }
    .relevanInformation{
      padding: 0 20px;
      overflow: hidden;
    }
    .relevanMeeting{
      padding: 0 20px;
      overflow: hidden;
    }
    .informationList{
      width: 100%;
      font-size: 14px;
    }
    .informationTitle{
      padding-bottom: 10px;
      color:#2C558A ;
      border-bottom: 1px solid #2C558A;
      font-weight: 600;
    }
    .informationList ul{
      margin-top: 14px;

    }
    .informationList ul li{
      width: 100%;
      margin-bottom: 24px;
      color: #666666;
      cursor: pointer;
    }
    .informationList ul li .list{
      width: 100%;
      display: inline-block;

    }
    list2{

    }
    .meetingImg{
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
    .initTip{
      width: 57px;
      height: 57px;
      float: right;
      position: relative;
      cursor: pointer;
      top: 35%;
      right: 20px;
    }
    .initTip span{
      font-size: 24px;
      color: #BEA684;

    }
    .sort{
      width: 20px;
      height: 20px;
      display: inline-block;
      text-align: center;
      line-height: 20px;
      border-radius: 4px;
    }
    .hostText{
     float:right;
     width: 16px;
     height: 16px;
     background: #E84C3D;
     color:#fff;
     line-height: 16px;
     text-align: center;
    }
    .inilistTitle{
     height:40px;
     width:100%;
     position: absolute;
     bottom:-1px;
     left: 1px;
     backdrop-filter:blur(4px) ;
     background-color:rgb(183 183 183 / 36%);
     z-index:999;
     color:#fff;
     font-size: 18px;
     line-height: 40px;
     text-align: center;

    }

</style>