dev/dcp-web-gate/src_old/views/enterprise/EnterPriseMoreInformationList.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 :to="{ path: 'enterprise' }">{{$t('common.EnterpriseShow')}}</el-breadcrumb-item>
                <el-breadcrumb-item>{{$t('common.MoreInformationList')}}</el-breadcrumb-item>
                </el-breadcrumb>
        </div>
        <div style="margin-top: 30px;width: 100%;">
           <div style="margin-left: 50px;">
                <div class="cursor" v-for="(item,index) in initData" @click="toViewDetail('enterpriseInformationDetails',item.baseEntityId)"
                    style="font-size: 15px;width: 100%;line-height: 40px;">
                    <span style="font-weight: 700;">{{item.title}}</span>
                    <span style="float: right;margin-right: 150px;">{{formatDate(item.createDate)}}</span>
                </div>
           </div>
        </div>
        <div>
            <div style="width: 100%;position: relative;height: 100px;">
                <el-pagination
                        style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
                        background
                        page-size=10
                        layout="prev, pager, next"
                        :total=totalCount
                        @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
  </template>
  
  <script>
    import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
    import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
    import Base from "@/views/base/Base";
    import { formatDate } from "@/utils/formatUtils";
    import { cmsInformationViews} from "@/api/baseUnitView";

    export default {
    name: 'EnterPriseMoreInformationList',
    extends: Base,
    data () {
        return {
            initData:[],
            page:{
                businessType:"unitShow",
                businessId:this.$route.query.key,
                typeDict:this.$route.query.businessType,
                pageSize:10,
                pageNo:1,
            },
            totalCount:0
        }
    },
    created(){},
    mounted(){
        this.getInformationList();
        this.Swiper();
    },
    watch: {
        '$i18n.locale'(){
            this.getInformationList();
        },
    },
    methods:{
        getInformationList(){
            this.page.language=this.$i18n.locale.toUpperCase();
            cmsInformationViews(this.page).then(res=>{
                var data = res.data;
                if(data){
                    this.initData = data.allDataList||[];
                    this.totalCount = data.page.totalCount - 0;
                }else {
                    this.totalCount = 0;
                    this.initData = [];
                }
            })
        },
        handleCurrentChange(val) {
            this.page.pageNo = val;
            this.getInformationList();
        },
        toViewDetail(router,json){
            this.$store.commit('modify', router);
            window.localStorage.setItem('router', router);
            const { href } = this.$router.resolve({
            name: router,
            query: {
                key: json
            }
            });
            window.open(href, '_blank');
        },
        Swiper(){ 
            var galleryThumbs = new Swiper('.gallery-thumbs', {
                spaceBetween: 10,
                slidesPerView: 4,
                freeMode: true,
                watchSlidesVisibility: true,
                watchSlidesProgress: true,
            });
            var galleryTop = new Swiper('.gallery-top', {
                spaceBetween: 10,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                thumbs: {
                    swiper: galleryThumbs
                }
            });
        },
        getIconUrl(url){
            return require("@/assets/img/realTimeInfo/"+url);
        },
        toView(router,json){
            this.$router.push({name:router,params:json})
        },
        screenBack(data){
            console.log(data,'screenBackscreenBackscreenBackscreenBack')
        },
        screen(i){
            this.index=i
        },
        getInformation(num){
            this.informationsClass=num
        },
    }
  }
  </script>
  
  <style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
    }
    .crumbs {
        margin-left: 20px;
    }
    body {
        margin: 0;
    }
  .swipers {
    position: absolute;
    top: 30px;
    left: 100px;
    width: 460px;
    height: 390px;
  }
  .details {
    position: absolute;
    top: 30px;
    left: 600px;
    width: 460px;
    height: 390px; 
  }
  .swiper-container {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }
    .swiper-slide {
      background-size: cover;
      background-position: center;
    }
    .gallery-top {
      height: 80%;
      width: 100%;
    }
    .gallery-thumbs {
      height: 20%;
      box-sizing: border-box;
      padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
    }
    .initData_label {
    color: #6c8c9d;
    font-weight: 700;
    font-size: 18px;
    line-height: 42px;
   }
   .enterprise_style{
     line-height: 50px;
     color: #6C819D;
     padding-left: 100px;
     font-size: 18px;
     font-weight: 700;
     margin-top: 5px;
   }
   .enterprise_style_span {
        padding: 10px;
       text-align: center;
       height: 100%;
       border-bottom: 2px solid #6699ff;
   }
   .enterprise_style_product tr {
       line-height: 30px;
       width: 100%;
       display: inline-block;
       border-bottom: 1px dashed #ccc;
       font-size: 14px;
       color: #6C819D;
       margin-bottom: 5px;
   }
   .recommend {
       margin-top:15px;
       margin-left: 100px;
   }
   .recommend li{
        display: inline-block;
        width: 170px;
        /* height: 130px; */
        text-align: center;
        margin-right: 15px;
   }
   .information1 {
        display: inline-block;
        width: 123px;
        height: 100%;
        border:1px solid rgba(228, 228, 228, 1);
        text-align: center;
        background: #f9f9f9;
        color: #999;
    }
    .information2 {
        display: inline-block;
        width: 123px;
        height: 100%;
        border-top:3px solid #2c5589;
        text-align: center;
        color: #2c5589;
    }
    .information1:hover {
        color: #FF0036;
    }
</style>