dev/dcp-web-gate/src_old/views/FinancialServices/FinancialServiceMoreList.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: 'financialServices' }">{{$t('common.FinancialServices')}}</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: 'FinancialServicesAgency' }">{{$t('common.FinancialInstitutions')}}</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: returnPath }">{{$i18n.locale=='zh'?'金融机构详情':'Details of financial institutions'}}</el-breadcrumb-item>
                <el-breadcrumb-item>{{$t(nav)}}</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(page.typeDict,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.publishDate)}}</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 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
    import Base from "@/views/base/Base";
    import {getInformationList} from '@/api/financialService/cmsInformationViews';
    export default {
        name: 'FinancialServiceMoreList',
        extends: Base,
        data () {
            return {
                initData:[],
                page:{
                    // pageSize:'10',
                    // pageNo:'1',
                    businessType:'financial_institutions',
                    businessId:this.$route.query.key,
                    language:'',
                },
                typeDict:this.$route.query.typeDict,
                baseId:this.$route.query.key,
                nav:'',
                totalCount:0,
                returnPath:'',
            }
        },
        created(){},
        mounted(){
            this.getInitdata();
        },
        watch: {
            '$i18n.locale'(){
                this.getInitdata();
                this.returnPath='FinancialServicesDetails?key='+this.baseId

            },
        },
        methods:{
            getInitdata(){
                this.page.language = this.$i18n.locale.toUpperCase();
                getInformationList(this.page).then(res => {
                    console.log(res,'--------------------------')
                    if(res.data){

                        if(this.typeDict ==1){
                            this.initData = res.data[1];
                            this.nav = "common.ProductAndService"
                        }else if(this.typeDict == 2){
                            this.initData = res.data[2];
                            this.nav = "common.InvestmentAndCases"
                        }else if(this.typeDict == 3){
                            this.initData = res.data[3];
                            this.nav = "common.InstitutionDynamic"
                        }
                    }

                });
            },
            handleCurrentChange(val) {
                this.page.pageNo = val;
                this.getInitdata();
            },
            toViewDetail(type,json){

                const { href } = this.$router.resolve({

                    name: 'FinancialserviceContentDetails',

                    query: {
                        key: json,
                        baseEntityId:this.baseId,
                    }
                });
                window.open(href, '_blank');
            },

        }
    }
</script>

<style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
        min-height: 500px;

    }
    .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>