dev/dcp-web-gate/src_old/views/FinancialServices/FinancialServicesFundIdeas.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>{{$t('common.FundIdeas')}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="background:#fff;margin-top: 14px;padding: 0 20px">
            <div style="width: 100%;height:50px;color: #fff;background:  #2C558A;;text-align: center;font-size: 28px;font-weight: 700;line-height: 50px;border-radius: 6px;">{{$t('common.FundIdeas')}}</div>
<!--            <div class="fundBox" v-for="(item,index) in change" @click="toView(item.id,item.baseEntityId,index)">-->
            <div class="fundBox" v-for="(item,index) in change" @click="toView('FinancialServicesIdeasDetails2',item.baseEntityId)">
                <div style="width:280px;height:209px;float: left;">
                    <img v-show="item.photo" :src="'api/file/pub/' + item.photo" alt="" width="100%" height="100%">
                    <img v-show="!item.photo" src="@/assets/img/financialService/FundLog.png" alt="" width="100%" height="100%">
                </div>
                <div class="fundList">
                    <div style="display: inline-block;width:100%;">
                        <span style="font-size: 30px;color: #666666;font-weight: 600;">{{item.title}}</span>
                        <div style="font-size: 16px;color: #666666;font-weight: normal;margin-top: 12px">{{item.subtitle}}</div>
                        <div style="margin-top: 30px;width: 100%;color: #4f81bd;" >
                            <div class="markSty" :style="$i18n.locale=='zh'?'width:120px;height:100px':'width:150px;height:138px'" v-for="(markItem,markIndex) in mark[index]" v-if="markItem">
                                <img v-show="markIndex==0 && index/2==0" :src="getImg(('Fund'+(num)+'.png'),index)" alt="" style="width: 42px;height: 42px;margin-top: 20px">
                                <img v-show="markIndex==1 && index/2==0" :src="getImg(('Fund'+(num+1)+'.png'),index)" alt="" style="width: 42px;height: 42px;margin-top: 20px">
                                <img v-show="markIndex==2 && index/2==0" :src="getImg(('Fund'+(num+2)+'.png'),index)" alt="" style="width: 42px;height: 42px;margin-top: 20px">
                                <img v-show="markIndex==0 && index/2!==0" :src="getImg(('Fund'+(num+3)+'.png'),index)" alt="" style="width: 42px;height: 42px;margin-top: 20px">
                                <img v-show="markIndex==1 && index/2!==0" :src="getImg(('Fund'+(num+4)+'.png'),index)" alt="" style="width: 42px;height: 42px;margin-top: 20px">
                                <img v-show="markIndex==2 && index/2!==0" :src="getImg(('Fund'+(num+5)+'.png'),index)" alt="" style="width: 42px;height: 42px;margin-top: 20px">
                                <div style="margin-top: 10px;">{{markItem}}</div>
                            </div>
                        </div>
                    </div>
<!--                    <i class="el-icon-arrow-right" style="font-size: 80px;float: right;line-height: 175px;color: #666666;width: 4%;margin-right: 20px"></i>-->

                </div>
                <div style="clear: both"></div>
            </div>

        </div>

    </div>
</template>

<script>
    import {getBaseFundIdeasInfos} from '@/api/financialService/baseFundIdeasInfo'
    export default{
        name:'FinancialServicesFundIdeas',
        data(){
            return{
                change:[],
                mark:[],
                showAddress:'',
                num:'1'-0,
                params:{
                    pageSize:"5",
                    pageNo:"1",
                    language:'',
                    statusDict:'2'
                }
            }
        },
        mounted() {
            this.getData()
        },
        watch: {
            '$i18n.locale'(){
                this.getData();

            },
        },
        methods:{
            toView(router,json){

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

            },
            // toView(router,json,index){
            //     if(index == 0){
            //         this.showAddress = "FinancialServicesIdeasDetails1"
            //     }else if(index == 1){
            //         this.showAddress = "FinancialServicesIdeasDetails2"
            //     }else{
            //         this.showAddress = "FinancialServicesIdeasDetails"
            //     }
            //     this.$router.push({
            //         name:this.showAddress,
            //         query:{key:json}
            //     })
            //     console.log(router,json,index)
            //
            // },
            getData(){
                this.params.language = this.$i18n.locale.toUpperCase();
                getBaseFundIdeasInfos(this.params).then((res)=>{
                    this.change = res.data.baseFundIdeasInfos;
                    this.mark=[];
                    for(let i=0;i<this.change.length;i++){
                        this.mark.push(this.change[i].keyword.split(','));
                    }
                })
            },
            getImg(url,index){
                return require("@/assets/img/financialService/" + url);
            }

        }

    }
</script>

<style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
    }
    .crumbs {
        margin-left: 20px;
    }
    body {
        margin: 0;
    }
    p{
        margin: 0;
        padding: 0;
    }
    .fundBox{
        margin-top: 40px;
        border-bottom: 1px solid#e4e4e4;
        cursor: pointer;
    }
    .fundList{
        width: 60%;
        float: left;
        margin-left: 70px;
    }
    .markSty{
        border:1px solid #44D7B6;
        margin :0  20px 20px 0;
        display: inline-block;
        text-align: center;
        overflow: hidden;
        font-size: 16px;
        /*text-overflow: ellipsis;*/
        /*white-space: nowrap;*/
        /*display: -webkit-box;*/
        /*-moz-box-orient: vertical;*/
        /*-webkit-line-clamp:2;*/
    }
    .markSty1{

    }
    .markSty1{

    }
</style>