dev/dcp-web-gate/src_old/views/ThinkTankConsulting/ThinkTankConsultingDetails.vue

<template>
    <div>
        <div class="autoBox box">
            <div class="crumbs">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'thinkTankConsulting' }">{{$t('common.ThinkTankConsulting')}}</el-breadcrumb-item>
                    <el-breadcrumb-item>aaa</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="abstract">
                <div style="float: left;width: 519px; height: 315px;">
                    <el-carousel :interval="5000" arrow="never">
                        <el-carousel-item v-for="item in 4" :key="item">
                            <div style="width: 100%;height: 100%;background-color: red;"></div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div style="float: right;width: 580px;">
                    <div style="color: #666666;">
                        <p style="font-size: 20px;font-weight: 700;color: #6C819D;">CAICT中国信通院</p>
                        <div style="font-size: 14px;">
                            <i class="el-icon-s-home" style="margin-right: 3px"></i>
                            <span style="font-weight: 700;">地点：</span>
                            <span>中国北京</span>
                        </div>
                        <div style="font-size: 14px;margin-top: 10px;line-height: 24px;">
                            <i class="el-icon-s-home" style="margin-right: 3px"></i>
                            <span style="font-weight: 700;">介绍：</span>
                            <div style="margin-left: 17px;">
                                <p style="margin: 0">
                                中国信息通信研究院（以下简称“中国信通院”）始建于1957年，是工业和信息化部直属科研事业单位。多年来，中国信通院始终秉持“国家高端专业智库 产业创新发展平台”的发展定位和“厚德实学 兴业致远”的核心文化价值理念，在行业发展的重大战略、规划、政策、标准和测试认证等方面发挥了有力支撑作用，为我国通信业跨越式发展和信息技术产业创新壮大起到了重要推动作用。
                                </p>
                            </div>
                        </div>
                        <div style="border: 1px solid rgba(51, 102, 255, 1);width: 140px; height: 40px;border-radius: 5px;
                              line-height: 40px;text-align: center;font-size: 14px;color:rgba(51, 102, 255, 1); margin: 30px 0 0 17px;">
                            <i class="el-icon-s-home" style="margin-right: 10px"></i>
                            <span style="font-weight: 700;">关注</span>
                        </div>
                    </div>
                </div>
                <div style="clear: both;"></div>
            </div>
            <div>
                <el-tabs v-model="activeName" type="card" class="tabs">
                    <el-tab-pane label="核心业绩" name="first">
                        <div style="width: 100%;margin-top: 5px;">
                            <div v-for="(item,index) in information" style="margin-bottom: 40px;">
                                <div style="width: 100%;height: 44px;border-bottom: 1px solid rgba(149, 209, 62, 1);text-align: center;">
                                    <div style="width: 210px;height:100%;background-color: rgba(149, 209, 62, 1);">
                                        <span style="line-height: 44px; color: white;">{{item.title}}</span>
                                    </div>
                                </div>
                                <div style="margin-top: 14px;font-size: 16px;line-height: 24px;color: #666666;">
                                    <div style="float: left;width: 862px;">
                                        {{item.message}}
                                    </div>
                                    <div style="float: right;width: 262px;height: 180px;overflow: hidden;border-radius: 5px;">
                                        <img src="" alt="" style="width: 262px;height: 180px;">
                                    </div>
                                    <div style="clear: both;"></div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="咨询范围" name="second"></el-tab-pane>
                    <el-tab-pane label="主要业绩" name="third"></el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ThinkTankConsultingDetails",
        data() {
            return {
                activeName: 'first',
                information:[
                    {
                        title:"核心5G技术",
                        message:"形成电信业、技术及标准、互联网、信息化应用、两化融合等多种咨询产品，覆盖5G、十三五、智能制造、互联网+、智慧城市、云计算、大数据等热点领域，服务中央政府、省通信管理局及地方政府、电信运营企业、互联网企业、ICT设备制造企业以及行业客户等。\n" +
                            "\n" +
                            "          形成电信业、技术及标准、互联网、信息化应用、两化融合等多种咨询产品，覆盖5G、十三五、智能制造、互联网+、智慧城市、云计算、大数据等热点领域，服务中央政府、省通信管理局及地方政府、电信运营企业、互联网企业、ICT设备制造企业以及行业客户等。\n" +
                            "\n" +
                            "         形成电信业、技术及标准、互联网、信息化应用、两化融合等多种咨询产品，覆盖5G、十三五、智能制造、互联网+、智慧城市、云计算、大数据等热点领域，服务中央政府、省通信管理局及地方政府、电信运营企业、互联网企业、ICT设备制造企业以及行业客户等。"
                    },
                    {
                        title:"智能制造",
                        message:"在信息通信及信息化与工业化融合领域牵头建设决策研究、标准化、知识产权、试验验证、应用示范、产业推进等公共服务平台，发挥了政产学研用连接纽带作用，有力推动了自主创新和产业发展。\n" +
                            "\n" +
                            "作为国内权威、国际知名的测试认证机构，具备国际一流的测试认证能力以及业内最为先进的仪器仪表和研发设备，建有新一代移动通信测试验证国家工程实验室、3个国家级检测机构及7个部级检测中心，为信息通信行业的快速发展做出积极的贡献。"
                    },
                ],
            };
        },
    }
</script>

<style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
    }
    .crumbs {
        margin-left: 20px;
    }
    body {
        margin: 0;
    }
    .abstract{
        width: 100%;
        margin:  15px 0 18px;
    }

</style>
<style>
    .tabs .is-top{
        color: #999999;
    }
    .tabs .is-top:hover{
        color: red;
    }
    .tabs .is-active{
        color: #0050D8;
        border-top: 3px solid #0050D8;
    }
    .el-carousel__indicators--horizontal{
        right: 0;
        left:initial;
        transform:translateX(-30%);
    }
    .el-carousel__button{
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }
</style>