客户案例

whycwx

2022-09-06 c785504e7e8b047d63048d9985abb6872ff956a3

客户案例

 src/assets/img/azsl_01.png

 src/assets/img/azsl_02.png

 src/assets/img/cpzs_01.png

 src/assets/img/cpzs_02.png

 src/assets/img/cpzs_03.png

 src/assets/img/cpzx_04.png

 src/assets/img/dlhy_01.png

 src/assets/img/dlhy_02.png

 src/assets/img/dlhy_03.png

 src/assets/img/dlhy_xcsl.png

 src/assets/img/gdjt_01.png

 src/assets/img/gdjt_02.png

 src/assets/img/hjmk_01.png

 src/assets/img/hjmk_02.png

 src/assets/img/hjmk_03.png

 src/assets/img/khal_banner.png

 src/assets/img/txhy_01.png

 src/assets/img/txhy_02.png

 src/assets/img/xsmk_cpzs_01.png

 src/assets/img/xsmk_cpzs_02.png

 src/assets/img/xsmk_cpzs_03.png

 src/components/pageHeaders.vue

@@ -52,6 +52,14 @@
                                path: '/productList',
                            })
                        break;
                    case "2"://解决方案
                        
                    break;
                    case "3"://客户案例
                        this.$router.push({
                            path: '/clientsCeseList',
                        })
                    break;
                    
                
                    default:

 src/pages/clientsCese/clientsCeseList.vue

New file
@@ -0,0 +1,333 @@
<template>
  <div>
    <div class="solve_p_top2">
        <div class="top2_bg">
            <h2>合作共赢 共创未来</h2>
            <p>Win-win cooperation for a better future</p>
        </div>
    </div>
    <div class="tab_box">
        <div class="tab_list">
            <p>您的位子在：客户案例</p>
        </div>
        <div class="tab_list">
            <p><el-input v-model="searchVal" placeholder="请输入您要查找的内容"></el-input><el-button class="btn" type="primary" icon="el-icon-search"></el-button></p>
        </div>
        
    </div>
    <div class="content_box">
        <div class="content_menu">
           <h2>产品中心</h2>
           <p v-for="(data,i) in menuLise" :key="i" :class="{'thisMenu':data.value == thisMenu}" @click="menuBtn(data)">{{ data.label}}</p>
           <div class="kf_box">
                <span class="span01"><i class="el-icon-phone"></i>客户服务热线：</span><br/>
                <span>027-83495340</span>
           </div>
        </div>
        <div class="content_list" v-if="detailsStatus">
            <h2 class="title_h2">蓄电池监测管理</h2>
            <p class="title_p">Battery monitoring and management</p>
            <div class="line_box"></div>
            <div v-for="(data,i) in contentList" :key="i" class="list_box">
                <div><img :src="require('@/assets/img/' + data.img)" alt="图片"></div>
                <div class="list_p">
                    <h2>{{ data.title}}</h2>
                    <pre>{{ data.content}}</pre>
                    <p class="details_btn"><span @click="detailsBtn(data)">了解详情</span></p>
                </div>
            </div>
        </div>
        <!-- 详情页 -->
        <div class="content_list" v-else>
            <details-page></details-page>
        </div>
    </div>
    
  </div>
</template>

<script>
import detailsPage from "./detailsPage.vue"
export default {
    name:"clientsCeseList",
    data(){
        return{
            detailsStatus:true,
            searchVal:"",
            thisMenu:"1",
            thisProduct:"0",
            menuLise:[
                {label:'电力行业',value:"1"},
                {label:'通讯行业',value:"2"},
                {label:'轨道交通',value:"3"},
                {label:'新能源汽车',value:"4"},
                {label:'其他',value:"5"},
            ],
            contentList:[],
            // 电力行业
            dlhyList:[
                {
                    title:"国网某变电站蓄电池智能运维项目",
                    content:'项目实施时间：2019年 \n项目实施地点： \n项目实施内容：实现远程查看所有站点蓄电池的实时监控、数据存储分析、智能运维管理等功能.....',
                    img:"dlhy_01.png",
                    value:"1"
                },
                {
                    title:"山东某供电公司LD-9Pro远程智能运维项目",
                    content:'项目实施时间：2018年 \n项目实施地点：山东 \n项目实施内容:  实现了蓄电池的远程监测、远程智能充放电的管理..........',
                    img:"dlhy_02.png",
                    value:"2"
                },
                {
                    title:"山西某供电公司BTS智能运维项目",
                    content:'项目实施时间：2017年 \n项目实施地点：山西 \n项目实施内容：实现了机房内蓄电池的实时监控、远程充放电、智能运维管理等功能......',
                    img:"dlhy_03.png",
                    value:"3"
                },
            ],
            // 通讯行业
            txhyList:[
                {
                    title:"贵州某通信运营商IDC机房",
                    content:'项目实施时间：2015年 \n项目实施地点：山西 \n项目实施内容：实现了机房内蓄电池的单体电压、内阻、极柱温度、阻端电压/电流的分布式监控等功能.....',
                    img:"txhy_01.png",
                    value:"4"
                },
                {
                    title:"广西某通信运营商各站点机房",
                    content:'项目实施时间：2021年 \n项目实施地点：广西 \n项目实施内容：实现了区域站点内600多套通信电源的实时监测管理，包括站点环境、视频、IT.....',
                    img:"txhy_02.png",
                    value:"5"
                },
            ],
            // 轨道交通
            gdjtList:[
                {
                    title:"湖南某高速集团",
                    content:'项目实施时间：2015年 \n项目实施地点：贵州 \n项目实施内容：实现了机房内蓄电池的实现了机房内蓄电池的集中监控、大屏展示、在线充放电等功能.....',
                    img:"gdjt_01.png",
                    value:"5"
                },
                {
                    title:"福建某轨道交通集团",
                    content:'项目实施时间：2017年 \n项目实施地点：福建 \n项目实施内容：实现了机房内蓄电池的实现了机房内蓄电池的集中监控、大屏展示、在线充放电、远程智能充放电等功能.....',
                    img:"gdjt_02.png",
                    value:"6"
                },
            ],
            thisContent:{},
        }
    },
    components: {
        detailsPage// detectionModule,collectionModuleVue,displayModule
    },
    mounted() {
        this.contentList = this.dlhyList;
    },
    methods: {
        detailsBtn:function(data){
            if(data.value == "1"){
                this.thisContent = data;
                this.detailsStatus = false;
                this.thisProduct = data.value;
            }else{
                this.$message({
                    message: '功能暂未开放！',
                    type: 'warning'
                });
            }
            
            console.log(data)
        },
        menuBtn:function(data){
            switch (data.value) {
                case "1":
                    this.detailsStatus = true;
                    this.thisProduct = "0";
                    this.thisMenu = "1";
                    this.contentList = this.dlhyList;
                break;
                case "2":
                    this.detailsStatus = true;
                    this.thisProduct = "0";
                    this.thisMenu = "2"
                    this.contentList = this.txhyList;
                break;
                case "3":
                    this.detailsStatus = true;
                    this.thisProduct = "0";
                    this.thisMenu = "3";
                    this.contentList = this.gdjtList;
                break;
                default:
                    this.$message({
                        message: '功能暂未开放！',
                        type: 'warning'
                    });
                    break;
            }
        }
    },
}
</script>

<style  lang="less" scoped>
    .solve_p_top2{
        .top2_bg{
            width: 100%;
            height: 343px;
            background: url("../../assets/img/khal_banner.png") no-repeat;
            background-size: 100%;
            padding-top: 110px;
            padding-left: 95px;
            h2,p{
                color:#fff;
                padding-left: 35px;
                
            }
            .bg_list{
                width:30%;
                padding: 50px 0 35px 0px ;
                margin-left: 10px;;
                // display: flex;
                // justify-content: left;
                span{
                    display: inline-block;
                    width: 100px;
                    color:#fff;
                    font-size: 16px;
                    margin:0 25px;
                }
            }
        }
    }
    .tab_box{
        height: 94px;
        background: #30c3ce;
        display:flex;
        justify-content:space-between;
        padding:0 40px 0 60px;
        .tab_list{
            display: flex;
            justify-content:center;
            align-content:center; //主轴居中对齐
            align-items:center;//交叉轴的中点对齐
            p{
                // width: 300px;
                font-size: 25px;
                color: #fff;
            }
            .btn{
                background: #0c3e8c;
                color: #fff;
            }
            /deep/.el-input{
                width: 70%;
            }
        }
        
        
        
    }
    .content_box{
        display:flex;
        justify-content:space-between;
        padding: 0 45px 10px 85px;
        .content_menu{
            width: 30%;
            h2{
               text-align: center;
                padding: 50px 130px;
                background: #0c3e8c;
                color: #30c3ce;
                font-size: 45px;
            }
            p{
                text-align: center;
                padding: 30px 130px;
                background: #888888;
                margin: 2px 0;
                color: #fff;
                font-size: 35px;
                cursor: pointer;
            }
            .thisMenu{
                background: #30c3ce;
            }
            .kf_box{
                height: 250px;
                margin: 30px 0;
                background:url(../../assets/img//kf.png) no-repeat;
                background-size: 100%;
                text-align: right;
                padding: 80px 70px;
                span{
                    // display: inline-block;
                    font-size:36px;
                    color: #fff;
                    
                }
                .span01{
                    font-size: 28px;
                }
            }
        }
        .content_list{
            width:68%;
            .title_h2{
                font-size: 40px;
                color: #231815;
                margin-top: 20px;
            }
            .title_p{
                font-size: 20px;
                color: #9e9e9f;
                margin-bottom: 20px;
            }
            .line_box{
                height: 2px;
                background:#717071;
            }
            .list_box{
                .list_p{
                    width: 100%;
                }
                border: #b0b0b1 1px solid;
                margin: 30px 0;
                padding: 35px 30px;
                display:flex;
                justify-content:space-between;
                h2{
                    font-size: 28px;
                    color:#30c3ce;
                }
                p,pre{
                    // width: 300px;
                    font-size: 20px;
                    color:#717071;
                    white-space: pre-wrap;
                    word-wrap: break-word;
                }
                img{
                    height: 100%;
                    width: 280px;
                    margin-right: 45px;
                }
                .details_btn{
                    margin-top: 20px;
                    text-align: right;
                    span{
                        display: inline-block;
                        font-size: 21px;
                        padding: 10px 25px;
                        color: #fff;
                        background: #30c3ce;
                        border-radius: 25px;
                        cursor: pointer;
                    }
                }
            }
        }
        
    }
</style>

 src/pages/clientsCese/detailsPage.vue

New file
@@ -0,0 +1,124 @@
<template>
    <!-- DT-S系列蓄电池检测模块 -->
    <div>
        <!-- <div  class="list_box">
            <div><img :src="require('@/assets/img/' + data.img)" alt="图片"></div>
            <div>
                <h2>{{ data.title}}</h2>
                <p>{{ data.content}}</p>
            </div>
        </div> -->
        <div class="detail_box">
            <div class="title_box">
                <span class="title_h2">1.国网某变电站蓄电池智能运维项目</span>
            </div>
            <div class="detail_list">
                <h2>项目主要概况</h2>
                <p>项目时间：2019年 </p>
                <p>项目客户：国家电网某变电站 </p>
                <p>应用场景：变电站内蓄电池组的智能运维、管理</p>
            </div>
            <div class="detail_list">
                <h2>项目实现功能</h2>
                <p>1. 远程查看所有站点蓄电池组实时监控及测试数据，以图形和数字两种形式体现；</p>
                <p>2. 具有数据库存储功能，可将所有站点电池组信息、监控数据、测试数据存储在服务器上，方便用户对历史数据进行管理及分析；</p>
                <p>3. 显示所有的实时及历史告警信息；</p>
                <p>4. 强大的统计分析功能，可根据设定的条件对所有电池组进行性能好坏统计可远程控制FBS系统对蓄电池进行全在线放充电测试；</p>
                <p>5. 定制化报表，用户可根据自身需求选择需要生成报表的项目，支持Word、Excel、Pdf多种格式报表；</p>
            </div>
            <div  class="detail_list">
                <h2>项目现场实例</h2>
                <div class="azsl_box">
                    <img src="@/assets/img/dlhy_01.png" alt="">
                    <img src="@/assets/img/dlhy_xcsl.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:['data'],
    data(){
        return {

        }
    },
    mounted() {
    },
    methods: {
        
    },
}
</script>
<style lang="less" scoped>
    .list_box{
        border: #b0b0b1 1px solid;
        margin: 30px 0;
        padding: 35px 30px;
        display:flex;
        justify-content:space-between;
        h2{
            font-size: 28px;
            color:#30c3ce;
        }
        p{
            font-size: 21px;
            color:#717071;
        }
        img{
            height: 100%;
            width: 280px;
            margin-right: 45px;
            background: #dbdcdc;
        }
    }
    .detail_box{
        border:  #b0b0b1 1px solid;
        padding:25px;
        .title_box{
            text-align: center;
            .title_h2{
                display: inline-block;
                color: #fff;
                background: #30c3ce;
                margin-bottom: 20px;
                padding:5px 25px
            }
        }
        .detail_list{
            margin-bottom: 70px;
            h2,p{
                text-align: center;
            }
            h2{
                color: #30c3ce;
                font-size: 28px;
                margin-bottom: 35px;
            }
            p{
                font-size: 20px;
                color: #848384;
            }
        }
        .cpzs_box{
            display:flex;
            justify-content:space-between;
            padding: 0 55px;
            img{
                width: 218px;
                height: 174px;
                background: #dbdcdc;
                padding: 20px;
            }
            
        }
        .azsl_box{
            display:flex;
            justify-content:space-between;
            img{
                margin: 0 10px;
            }
        }
    }
</style>

 src/pages/product/collectionModule.vue

New file
@@ -0,0 +1,128 @@
<template>
    <!-- 阻端汇集模块 -->
    <div>
        <div  class="list_box">
            <div><img :src="require('@/assets/img/' + data.img)" alt="图片"></div>
            <div>
                <h2>{{ data.title}}</h2>
                <p>{{ data.content}}</p>
            </div>
        </div>
        <div class="detail_box">
            <div class="detail_list">
                <h2>产品简介</h2>
                <p>DT-HJ组端汇集模块是配合蓄电池单体采集模块使用的专用产品。装置采用铝型材（或阻燃塑料）外壳，具备体积小，重量轻的</p>
                <p>特点。汇集模块接口包括RJ11、RS485通讯接口、组端电压模块接口、组端电流模块接口以及USB接口。其中485接口支持级联</p>
                <p>通信。汇集模块通过与SU之间的通信转化，可将单体检测模块采集的蓄电池电压、温度、内阻、极柱温度等参数，以及阻端电压、</p>
                <p>电流等参数汇总上传到监控显示模块或上位机软件进行展示。</p>
            </div>
            <div class="detail_list">
                <h2>功能参数</h2>
                <p>1.支持一组最多480节单体模块的监控数据汇总 </p>
                <p>2.支持一组蓄电池组端电压采集和电流采集 </p>
                <p>3.支持对一组单体模块的固件及程序升级 </p>
                <p>4.具备RS485接口，将一组单体模块的采集数据传输到显示屏或者后台系统</p>
                <p>5.支持数据转存功能，可通过USB接口将储存的监控数据、告警数据等转存导出</p>
                <p>6.采用RS485通讯、支持Modnus协议，支持接入第三方监控系统</p>
                <p>7.DC12V供电，支持反接保护、过压保护</p>
            </div>
            <div class="detail_list">
                <h2>产品展示</h2>
                <div class="cpzs_box">
                    <img src="@/assets/img/hjmk_01.png" alt="">
                    <img src="@/assets/img/hjmk_02.png" alt="">
                    <img src="@/assets/img/hjmk_03.png" alt="">
                </div>
                
            </div>
            <div class="detail_list">
                <h2>应用场景</h2>
                <p>适用于银行、电力、通信、军事、航空、铁路等行业，专为计算机网络机房、高端IDC机房、银行机房、电力配电室、应急电源系</p>
                <p>统、通信机房、通信基站、UPS机房、蓄电池组机房等场景的蓄电池监控而设计，是实现蓄电池“状态监测、维护保养”的优选智能传感器。</p>
            </div>
            <div  class="detail_list">
                <h2>安装实例</h2>
                <div class="azsl_box">
                    <img src="@/assets/img/azsl_01.png" alt="">
                    <img src="@/assets/img/azsl_02.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:['data'],
    data(){
        return {

        }
    },
    mounted() {
    },
    methods: {
        
    },
}
</script>
<style lang="less" scoped>
    .list_box{
        border: #b0b0b1 1px solid;
        margin: 30px 0;
        padding: 35px 30px;
        display:flex;
        justify-content:space-between;
        h2{
            font-size: 28px;
            color:#30c3ce;
        }
        p{
            font-size: 21px;
            color:#717071;
        }
        img{
            height: 100%;
            width: 280px;
            margin-right: 45px;
            background: #dbdcdc;
        }
    }
    .detail_box{
        border:  #b0b0b1 1px solid;
        padding:25px;
        .detail_list{
            margin-bottom: 70px;
            h2,p{
                text-align: center;
            }
            h2{
                color: #30c3ce;
                font-size: 28px;
                margin-bottom: 35px;
            }
            p{
                font-size: 20px;
                color: #848384;
            }
        }
        .cpzs_box{
            display:flex;
            justify-content:space-between;
            padding: 0 55px;
            img{
                width: 218px;
                height: 174px;
                background: #dbdcdc;
                padding: 20px;
            }
            
        }
        .azsl_box{
            display:flex;
            justify-content:space-between;
            img{
                margin: 0 10px;
            }
        }
    }
</style>

 src/pages/product/detectionModule.vue

New file
@@ -0,0 +1,127 @@
<template>
    <!-- DT-S系列蓄电池检测模块 -->
    <div>
        <div  class="list_box">
            <div><img :src="require('@/assets/img/' + data.img)" alt="图片"></div>
            <div>
                <h2>{{ data.title}}</h2>
                <p>{{ data.content}}</p>
            </div>
        </div>
        <div class="detail_box">
            <div class="detail_list">
                <h2>产品简介</h2>
                <p>DT-S3蓄电池监测模块单体是基于蓄电池单体且以小直流放电方法测量蓄电池内阻的模块，还可同时测量单体蓄电池的单体电压、</p>
                <p>单体内阻及单体极柱温度，同时可实现蓄电池的均衡充电功能。</p>
                <p>蓄电池监测模块专门为阀控式密封铅酸蓄电池、锂电、凝胶或固体电池进行在线监测而开发研制。蓄电池智能传感器自带2个RJ11</p>
                <p>通信接口，可级联通信，经过通信转换器以485接口方式接入用户现有系统。</p>
            </div>
            <div class="detail_list">
                <h2>功能参数</h2>
                <p>1.实时监控单体电池电压、内阻、极柱温度、纹波电压;</p>
                <p> 2.内阻测量使用四线交流法，带自动滤波功能，抗干扰能力强，稳定性高;</p>
                <p> 3.支持自动编号，便于安装、调试、维修;</p>
                <p> 4.低功耗，工作电流 < 4mA;</p>
                <p>5.采用RS485通信，标准网线链接方式;</p>
                <p>6.反接保护、过压保护。</p>
            </div>
            <div class="detail_list">
                <h2>产品展示</h2>
                <div class="cpzs_box">
                    <img src="@/assets/img/cpzs_01.png" alt="">
                    <img src="@/assets/img/cpzs_02.png" alt="">
                    <img src="@/assets/img/cpzs_03.png" alt="">
                </div>
                
            </div>
            <div class="detail_list">
                <h2>应用场景</h2>
                <p>适用于银行、电力、通信、军事、航空、铁路等行业，专为计算机网络机房、高端IDC机房、银行机房、电力配电室、应急电源系</p>
                <p>统、通信机房、通信基站、UPS机房、蓄电池组机房等场景的蓄电池监控而设计，是实现蓄电池“状态保养”的优选传感器模块。</p>
            </div>
            <div  class="detail_list">
                <h2>安装实例</h2>
                <div class="azsl_box">
                    <img src="@/assets/img/azsl_01.png" alt="">
                    <img src="@/assets/img/azsl_02.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:['data'],
    data(){
        return {

        }
    },
    mounted() {
    },
    methods: {
        
    },
}
</script>
<style lang="less" scoped>
    .list_box{
        border: #b0b0b1 1px solid;
        margin: 30px 0;
        padding: 35px 30px;
        display:flex;
        justify-content:space-between;
        h2{
            font-size: 28px;
            color:#30c3ce;
        }
        p{
            font-size: 21px;
            color:#717071;
        }
        img{
            height: 100%;
            width: 280px;
            margin-right: 45px;
            background: #dbdcdc;
        }
    }
    .detail_box{
        border:  #b0b0b1 1px solid;
        padding:25px;
        .detail_list{
            margin-bottom: 70px;
            h2,p{
                text-align: center;
            }
            h2{
                color: #30c3ce;
                font-size: 28px;
                margin-bottom: 35px;
            }
            p{
                font-size: 20px;
                color: #848384;
            }
        }
        .cpzs_box{
            display:flex;
            justify-content:space-between;
            padding: 0 55px;
            img{
                width: 218px;
                height: 174px;
                background: #dbdcdc;
                padding: 20px;
            }
            
        }
        .azsl_box{
            display:flex;
            justify-content:space-between;
            img{
                margin: 0 10px;
            }
        }
    }
</style>

 src/pages/product/displayModule.vue

New file
@@ -0,0 +1,125 @@
<template>
    <!-- DT-S系列蓄电池检测模块 -->
    <div>
        <div  class="list_box">
            <div><img :src="require('@/assets/img/' + data.img)" alt="图片"></div>
            <div>
                <h2>{{ data.title}}</h2>
                <p>{{ data.content}}</p>
            </div>
        </div>
        <div class="detail_box">
            <div class="detail_list">
                <h2>产品简介</h2>
                <p>监控显示模块主要用于FBS-9600蓄电池检测系统中蓄电池监控参数及告警信息的显示、参数的设置。监控显示模块采用先进的</p>
                <p>TFT-液晶模组，分辨率最高为1024x600，支持触摸屏操作，包含7寸和10.1寸两种屏可选，具备RJ45、RJ232、RJ485、CAN、</p>
                <p>USB等各种接口。支持将数据通过通信协议传输至第三方平台或其他动环监控系统中。</p>
            </div>
            <div class="detail_list">
                <h2>功能参数</h2>
                <p>1.就地汇总显示蓄电池组实时、历史监控数据，支持以图表、柱形图等形式进行展示</p>
                <p>2.支持对蓄电池异常告警信息的展示、历史告警的查询</p>
                <p>3.支持对一组单体模块的固件及程序升级</p>
                <p>4.最新TFT-LCD液晶模组，可选7寸、10.1寸屏幕，支持触屏操作支持</p>
                <p>5.具备RJ45、RS232、RS485、CAN等多种传输接口，支持Modbus协议，Tcp/IP等多种通信协议</p>
            </div>
            <div class="detail_list">
                <h2>产品展示</h2>
                <div class="cpzs_box">
                    <img src="@/assets/img/xsmk_cpzs_01.png" alt="">
                    <img src="@/assets/img/xsmk_cpzs_02.png" alt="">
                    <img src="@/assets/img/xsmk_cpzs_03.png" alt="">
                </div>
                
            </div>
            <div class="detail_list">
                <h2>应用场景</h2>
                <p>适用于银行、电力、通信、军事、航空、铁路等行业，专为计算机网络机房、高端IDC机房、银行机房、电力配电室、应急电源系</p>
                <p>统、通信机房、通信基站、UPS机房、蓄电池组机房等场景的蓄电池监控而设计，是实现蓄电池“状态监测、维护保养”的优选智能传感器。</p>
            </div>
            <div  class="detail_list">
                <h2>安装实例</h2>
                <div class="azsl_box">
                    <img src="@/assets/img/azsl_01.png" alt="">
                    <img src="@/assets/img/azsl_02.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:['data'],
    data(){
        return {

        }
    },
    mounted() {
    },
    methods: {
        
    },
}
</script>
<style lang="less" scoped>
    .list_box{
        border: #b0b0b1 1px solid;
        margin: 30px 0;
        padding: 35px 30px;
        display:flex;
        justify-content:space-between;
        h2{
            font-size: 28px;
            color:#30c3ce;
        }
        p{
            font-size: 21px;
            color:#717071;
        }
        img{
            height: 100%;
            width: 280px;
            margin-right: 45px;
            background: #dbdcdc;
        }
    }
    .detail_box{
        border:  #b0b0b1 1px solid;
        padding:25px;
        .detail_list{
            margin-bottom: 70px;
            h2,p{
                text-align: center;
            }
            h2{
                color: #30c3ce;
                font-size: 28px;
                margin-bottom: 35px;
            }
            p{
                font-size: 20px;
                color: #848384;
            }
        }
        .cpzs_box{
            display:flex;
            justify-content:space-between;
            padding: 0 55px;
            img{
                width: 218px;
                height: 174px;
                background: #dbdcdc;
                padding: 20px;
            }
            
        }
        .azsl_box{
            display:flex;
            justify-content:space-between;
            img{
                margin: 0 10px;
            }
        }
    }
</style>

 src/pages/product/productList.vue

@@ -19,42 +19,55 @@
            <p>您的位子在：产品中心/蓄电池监测管理</p>
        </div>
        <div class="tab_list">
            <p><el-input v-model="searchVal" placeholder="请输入内容您要查找的内容"></el-input><el-button class="btn" type="primary" icon="el-icon-search"></el-button></p>
            <p><el-input v-model="searchVal" placeholder="请输入您要查找的内容"></el-input><el-button class="btn" type="primary" icon="el-icon-search"></el-button></p>
        </div>
        
    </div>
    <div class="content_box">
        <div class="content_menu">
           <h2>产品中心</h2>
           <p v-for="(data,i) in menuLise" :key="i" :class="{'thisMenu':data.value == thisMenu}">{{ data.label}}</p>
           <p v-for="(data,i) in menuLise" :key="i" :class="{'thisMenu':data.value == thisMenu}" @click="menuBtn(data)">{{ data.label}}</p>
           <div class="kf_box">
                <span class="span01"><i class="el-icon-phone"></i>客户服务热线：</span><br/>
                <span>027-83495340</span>
           </div>
        </div>
        <div class="content_list">
        <div class="content_list" v-if="detailsStatus">
            <h2 class="title_h2">蓄电池监测管理</h2>
            <p class="title_p">Battery monitoring and management</p>
            <div class="line_box"></div>
            <div v-for="(data,i) in contentListFun()" :key="i" class="list_box">
            <div v-for="(data,i) in contentList" :key="i" class="list_box">
                <div><img :src="require('@/assets/img/' + data.img)" alt="图片"></div>
                <div>
                    <h2>{{ data.title}}</h2>
                    <p>{{ data.content}}</p>
                    <p class="details_btn"><span @click="detailsBtn(data)">了解详情</span></p>
                </div>
            </div>
        </div>
        <!-- 详情页 -->
        <div class="content_list" v-else>
            <detection-module :data="thisContent" v-if="thisProduct == '1'"></detection-module>
            <collection-moduleVue :data="thisContent" v-if="thisProduct == '2'"></collection-moduleVue>
            <display-module :data="thisContent" v-if="thisProduct == '3'"></display-module>
        </div>
    </div>
    
  </div>
</template>

<script>
import detectionModule from "./detectionModule.vue"
import collectionModuleVue from "./collectionModule.vue";
import displayModule from "./displayModule.vue"
export default {
    name:"产品列表",
    name:"productList",
    data(){
        return{
            detailsStatus:true,
            searchVal:"",
            thisMenu:"1",
            thisProduct:"0",
            menuLise:[
                {label:'蓄电池监测管理',value:"1"},
                {label:'蓄电池容量测试',value:"2"},
@@ -66,29 +79,52 @@
                {
                    title:"DT-S系列蓄电池检测模块",
                    content:'DT-S系列蓄电池检测模块是专门为阀控式密封铅酸蓄电池、凝胶或固体电池进行在线监测而开发研制。适用于2V、12V单体蓄电池的监测。电池检测模块基于2V或12V蓄电池单体且以小直流放电方法测量蓄电池内阻，还可同时测量单体蓄电池的单体电压、单体内阻及单体极柱温度。',
                    img:"cpzx_01.png"
                    img:"cpzx_01.png",
                    value:"1"
                },
                {
                    title:"组端汇集模块",
                    content:'DT-HJ组端汇集模块是配合蓄电池单体采集模块使用的专用产品。装置采用铝型材（或阻燃塑料）外壳，具备体积小，重量轻的特点。汇集模块可将单体检测模块采集的蓄电池电压、温度、内阻、极柱温度等参数，以及组端电压、电流等参数汇总上传到监控显示模块或上机位软件进行展示。',
                    img:"cpzx_02.png"
                    img:"cpzx_02.png",
                    value:"2"
                },
                {
                    title:"监控显示模块",
                    content:'监控显示模块主要用于FBS-9600蓄电池检测系统中蓄电池监控参数及告警信息的显示、参数的设置。监控显示模块采用先进的TFT-液晶模组，分辨率最高为1024x600，支持触摸屏操作，包含7寸和10.1寸两种屏可选，具备RJ45、RG232、RG485、CAN、USB等各种接口。支持将数据通过通讯协议传输至第三方平台或其他环监控系统中。',
                    img:"cpzx_03.png"
                    img:"cpzx_03.png",
                    value:"3"
                },
                {
                    title:"DTT-ZHQ协议转换模块",
                    content:'DT-DTT-ZHQ协议转换模块是针对客户监控系统接口需求研发，配合电话口版本单体检测模块使用的专用产品。主要用于RJ11与 RJ45 接口通讯的转化，同时接入1路霍尔电流信号，可将采集的蓄电池电压、温度、内阻、电流等参数，通过RS485接口方式，上传到显示模块、上机位软件或集成商客户数据采集系统。',
                    img:"cpzx_04.png"
                    img:"cpzx_04.png",
                    value:"4"
                },
            ]
            ],
            thisContent:{},
        }
    },
    components: {
        detectionModule,collectionModuleVue,displayModule
    },
    methods: {
        contentListFun:function(){
            return this.contentList;
        detailsBtn:function(data){
            this.thisContent = data;
            this.detailsStatus = false;
            this.thisProduct = data.value;
            console.log(data)
        },
        menuBtn:function(data){
            if(data.value == 1){
                this.detailsStatus = true;
                this.thisProduct = "0";
            }else{
                this.$message({
                    message: '功能暂未开放！',
                    type: 'warning'
                });
            }
            
        }
    },
}
@@ -154,7 +190,7 @@
    .content_box{
        display:flex;
        justify-content:space-between;
        padding: 0 45px 0 85px;
        padding: 0 45px 10px 85px;
        .content_menu{
            width: 30%;
            h2{
@@ -229,6 +265,19 @@
                    width: 280px;
                    margin-right: 45px;
                }
                .details_btn{
                    margin-top: 20px;
                    text-align: right;
                    span{
                        display: inline-block;
                        font-size: 21px;
                        padding: 10px 25px;
                        color: #fff;
                        background: #30c3ce;
                        border-radius: 25px;
                        cursor: pointer;
                    }
                }
            }
        }
        

 src/router/index.js

@@ -3,7 +3,12 @@
import routes from './routes'

Vue.use(VueRouter);
import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
const router = new VueRouter({
  routes
});

 src/router/routes.js

@@ -21,4 +21,12 @@
                title: '产品列表',
            },
    },
    {
        path:"/clientsCeseList",
        name:"clientsCeseList",
        component: (resolve) => require(['@/pages/clientsCese/clientsCeseList.vue'], resolve),
        meta: {
                title: '客户案例',
            },
    },
]