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

<template>
    <div style="width: 100%;background:#fff;margin-top: 10px">
        <div class="autoBox" style="padding-top: 20px">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: 'home' }" replace>{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'financialServices' }" replace>{{$t('common.FinancialServices')}}</el-breadcrumb-item>
                    <el-breadcrumb-item v-if="navBar!==''">{{$t(navBar)}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>

        </div>
        <!-- 左侧菜单导航 -->
        <div class="autoBox box1">
            <div style="height: 800px;" class="userItemClass">
                <div style="width: 100%;height: 50px;text-align: center;line-height: 50px;color: #fff;background: #2C558A;border-radius: 6px;" class="cursor" @click="toView('FinancialServiceInvestmentGuide')">{{$t('common.FinancialServices')}}</div>
                <el-row class="tac" style="text-align: center">
                    <el-col :span="24">
                        <el-menu
                            class="el-menu-vertical-demo"
                            @select="handleOpen"
                            @close="handleClose"
                            :default-active="navRouter"
                            router
                        >
                            <el-menu-item  style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;border: 1px solid rgba(216, 216, 216,.5);" :index="nav.router" v-for="(nav,num) in navs">{{$t(nav.label)}}</el-menu-item>
                        </el-menu>
                    </el-col>

                </el-row>
            </div>
            <!--金融内容内容显示 -->
            <div style="width: 81%;float: right;">
                <router-view/>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
</template>

<script>
    import InvestmentGuide from './FinancialServiceInvestmentGuide.vue'



    export default {
        name: 'FinancialServicesBox',
        components:{InvestmentGuide},
        data () {
            return {
                navRouter:this.$route.name,
                i:0,
                user:true,
                locale:'',
                videoBox:1500,
                navBar:'',
                navs:[
                    {
                        label:'common.FinancialInstitutions',
                        router:'FinancialServicesAgency',
                        value:'FinancialServicesAgency',

                    },{
                        label:'common.InvestmentGuide',
                        router:'FinancialServiceInvestmentGuide',
                        value:'FinancialServiceInvestmentGuide',

                    },{
                        label:'common.ProjectAppraisal',
                        router:'FinancialServiceProjectEvaluation',
                        value:'FinancialServiceProjectEvaluation',
                    },{
                        label:'common.FundIdeas',
                        router:'FinancialServicesFundIdeas',
                        value:'FinancialServicesFundIdeas',
                    }
                ],

            }
        },
        watch:{

        },
        mounted(){
            this.locale= this.$i18n.locale
            console.log(this.$i18n.locale,'this.$i18n.localethis.$i18n.localethis.$i18n.locale');
            this.navBar = this.$route.query.key.title
        },
        methods:{

            toView(router,json){
                console.log(router.json,'------------------------点击导航-')
                this.lable = this.navs.label;
                console.log(navRouter,'-------------默认导航')
                this.$router.push({name:router,query:{key:json}})
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);

                this.navs.forEach((i,index)=>{
                    if(i.router==key){
                      return  this.navBar=i.label;
                    }
                })

            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
                this.$store.commit('modify', key)
            },
        }
    }
</script>

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

    body {
        margin: 0;
    }
    .el-carousel__item div:nth-child(1) {
        font-size: 18px;
        margin: 0;
        float: left;
        width: 70%;
    }
    .el-carousel__item div:nth-child(2) {
        font-size: 18px;
        margin: 0;
        float: right;
        width: 30%;
    }
    .el-carousel__item:nth-child(n) {
        background-color: #ecedef;
        color: #000;
    }
    .cool >>>.el-carousel__container {
        height: 350px;
    }

    .initData {
        height: 1200px;
    }
    .initData li {
        width: 49%;
        height: 600px;
        float: left;
    }
    .initData li:nth-child(2n-1){
        margin-right: 15px;
    }
    .recommend {
        margin-top:15px;
        margin-left: 10px;
    }
    .recommend li{
        display: inline-block;
        width: 212px;
        /* height: 130px; */
        text-align: center;
        margin-right: 15px;
    }
    .el-col-12 {
        width: 100%;
    }
    .el-submenu .el-menu-item  {
        min-width: 0;
        border:none;
    }
    .userItemClass {
        width:200px;
        background: #fff;
        float: left;
    }
    .el-menu{
        border: none;
    }

</style>