产品中心

whycwx

2022-09-02 ae761769d912882e6e0209bff5669c37b515f773

产品中心

 src/assets/img/banner_cpzx.png

 src/assets/img/cpzx_01.png

 src/assets/img/cpzx_02.png

 src/assets/img/cpzx_03.png

 src/assets/img/cpzx_04.png

 src/assets/img/kf.png

 src/components/pageHeaders.vue

@@ -41,6 +41,29 @@
        selectedMun:function(val){
            let vm = this;
                vm.munStatus = val;
                switch (val) {
                    case "0"://首页
                            this.$router.push({
                                path: '/',
                            })
                        break;
                    case "1"://产品列表
                            this.$router.push({
                                path: '/productList',
                            })
                        break;
                    
                
                    default:
                        break;
                }
        }
    },
    created() {
        if(this.$router.path != "/home"){
            this.$router.push({
                path: '/',
            })
        }
    },
}

 src/pages/home/home.vue

@@ -62,11 +62,11 @@
                </div>
            </div>
            <div class="price_title">
                <span>蓄电池监测管理</span>
                <span>蓄电池容量测试</span>
                <span>蓄电池充放电</span>
                <span>蓄电池均衡活化</span>
                <span>蓄电池其他养护</span>
                <span :class="{'select_span':selectXdc==1}">蓄电池监测管理</span>
                <span :class="{'select_span':selectXdc==2}">蓄电池容量测试</span>
                <span :class="{'select_span':selectXdc==3}" class="readonly">蓄电池充放电</span>
                <span :class="{'select_span':selectXdc==4}" class="readonly">蓄电池均衡活化</span>
                <span :class="{'select_span':selectXdc==5}" class="readonly">蓄电池其他养护</span>
            </div>
            <div class="product_list_box">
                <div class="product_list">
@@ -122,7 +122,7 @@
            <div class="solve_p">
                <div class="solve_p_top1">
                    <h2>BTS分布式蓄电池远程智能监测运维管理解决方案</h2>
                    <p>BTS分布式蓄电池组远程智能运维系统对于电池运维管理人员准确实时掌握电池组容量及各指标参数，准确预判电池组的续航能力为停电调度做出正确依据，实现了使蓄电池组从定期人工检测向实时自动在线养护工作方式的转变，使运维人员更专注于对蓄电池运行状态的掌控，实现了更加实时的蓄电池主动管理，对电源系统安全稳定运行起到了保障作用。</p>
                    <p>FBS-9600蓄电池组在线监测及远程自动运维解决方案     FBS-9600蓄电池组在线监控及远程自动运维解决方案主要为变电站配电室、通信局站、网络机房、IDC数据机房、UPS机房、蓄电池组机房等业务场景下的蓄电组监控提供模块化的产品及定制化的解决方案，实现通信备用电源中蓄电池组的全在线无人值守智能化监控、远程自动维护等功能</p>
                </div>
                <div class="solve_p_top2">
                    <h2></h2>
@@ -198,7 +198,7 @@
    export default {
        data(){
            return {

                selectXdc:1,
            }
        },
        mounted() {
@@ -214,7 +214,9 @@
        width: 100%;
        height: 100%;
    }
    
    .select_span{
        color:#0c3e8c;
    }
    .banner_box{
        /deep/.el-carousel__container{
            height: 402px;
@@ -223,13 +225,13 @@
    .select_list_box{
        display: flex;
        justify-content: space-between;
        padding:20px;
        padding:20px 150px;
        .select_list{
            width:20%;
            
            .select_img{
                height:200px;
                border: 14px solid #0c3e8c;
                width: 293px;
                height:174px;
                border: 8px solid #0c3e8c;
                border-radius:0 60px; 
                overflow: hidden;
                img{
@@ -238,11 +240,12 @@
                }
            }
            h2{
                font-size: 28px;
                text-align: center;
                color:#30c3ce;
            }
            p{
                font-size: 16px;
                font-size: 21px;
                color:#717071;
            }
        }
@@ -256,16 +259,23 @@
        .price_title{
            display:flex;
            justify-content:space-between;
            padding:5px 40px;
            padding:5px 80px;
            background:#30c3ce;
            border-radius:100px;
            color:#FFFFFF;
            margin-bottom:40px;
            span{
                cursor: pointer;
            }
            .readonly{
                color: #1f989b;
            }
        }
        .product_list_box{
            display:flex;
            justify-content:space-between;
            padding:0 30px;
            padding-left: 75px;
            .list_right{
                display: flex;
                justify-content:center;
@@ -306,6 +316,7 @@
    .title_box{
        padding:20px 0 ;
        p{
            font-size: 40px;
            text-align: center;
            color: #231815;
        }
@@ -320,7 +331,7 @@
                background-color: #9e9e9f;
            }
            .title_lan{
                font-size: 14px;
                font-size: 20px;
                color: #9e9e9f;
            }
        }

 src/pages/product/productList.vue

New file
@@ -0,0 +1,236 @@
<template>
  <div>
    <div class="solve_p_top2">
        <div class="top2_bg">
            <h2>电池检测模块DT-S3系列</h2>
            <p>Battery detection module</p>
            <div class="bg_list">
                <span>• 实时监控</span>
                <span>• 自动编号</span>
                <span>• 自动滤波</span>
                <span>• 过压保护</span>
                <span>• 反接保护</span>
                <span>• 抗干扰强</span>
            </div>
        </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}">{{ 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">
            <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><img :src="require('@/assets/img/' + data.img)" alt="图片"></div>
                <div>
                    <h2>{{ data.title}}</h2>
                    <p>{{ data.content}}</p>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    name:"产品列表",
    data(){
        return{
            searchVal:"",
            thisMenu:"1",
            menuLise:[
                {label:'蓄电池监测管理',value:"1"},
                {label:'蓄电池容量测试',value:"2"},
                {label:'蓄电池充放电',value:"3"},
                {label:'蓄电池均衡活化',value:"4"},
                {label:'蓄电池其他养护',value:"5"}
            ],
            contentList:[
                {
                    title:"DT-S系列蓄电池检测模块",
                    content:'DT-S系列蓄电池检测模块是专门为阀控式密封铅酸蓄电池、凝胶或固体电池进行在线监测而开发研制。适用于2V、12V单体蓄电池的监测。电池检测模块基于2V或12V蓄电池单体且以小直流放电方法测量蓄电池内阻，还可同时测量单体蓄电池的单体电压、单体内阻及单体极柱温度。',
                    img:"cpzx_01.png"
                },
                {
                    title:"组端汇集模块",
                    content:'DT-HJ组端汇集模块是配合蓄电池单体采集模块使用的专用产品。装置采用铝型材（或阻燃塑料）外壳，具备体积小，重量轻的特点。汇集模块可将单体检测模块采集的蓄电池电压、温度、内阻、极柱温度等参数，以及组端电压、电流等参数汇总上传到监控显示模块或上机位软件进行展示。',
                    img:"cpzx_02.png"
                },
                {
                    title:"监控显示模块",
                    content:'监控显示模块主要用于FBS-9600蓄电池检测系统中蓄电池监控参数及告警信息的显示、参数的设置。监控显示模块采用先进的TFT-液晶模组，分辨率最高为1024x600，支持触摸屏操作，包含7寸和10.1寸两种屏可选，具备RJ45、RG232、RG485、CAN、USB等各种接口。支持将数据通过通讯协议传输至第三方平台或其他环监控系统中。',
                    img:"cpzx_03.png"
                },
                {
                    title:"DTT-ZHQ协议转换模块",
                    content:'DT-DTT-ZHQ协议转换模块是针对客户监控系统接口需求研发，配合电话口版本单体检测模块使用的专用产品。主要用于RJ11与 RJ45 接口通讯的转化，同时接入1路霍尔电流信号，可将采集的蓄电池电压、温度、内阻、电流等参数，通过RS485接口方式，上传到显示模块、上机位软件或集成商客户数据采集系统。',
                    img:"cpzx_04.png"
                },
            ]
        }
    },
    methods: {
        contentListFun:function(){
            return this.contentList;
        }
    },
}
</script>

<style  lang="less" scoped>
    .solve_p_top2{
        .top2_bg{
            width: 100%;
            height: 343px;
            background: url("../../assets/img/banner_cpzx.png") no-repeat;
            background-size: 100%;
            padding-top: 60px;
            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 0 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{
                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;
                }
            }
        }
        
    }
</style>

 src/router/routes.js

@@ -10,15 +10,15 @@
        name:"home",
        component: (resolve) => require(['@/pages/home/home.vue'], resolve),
        meta: {
                title: '加密',
                title: '首页',
            },
    },
    // {
    //     path:"/decode",
    //     name:"decode",
    //     component: (resolve) => require(['@/pages/decode/decode.vue'], resolve),
    //     meta: {
    //             title: '解密',
    //         },
    // },
    {
        path:"/productList",
        name:"productList",
        component: (resolve) => require(['@/pages/product/productList.vue'], resolve),
        meta: {
                title: '产品列表',
            },
    },
]