产品

whycwx

2022-08-13 fe33ea67814b4e08cc13d10cf950b39207d3f191

产品

 src/assets/img/banner1.jpg

 src/assets/img/banner2.jpg

 src/assets/img/banner3.jpg

 src/assets/img/cxgx.jpg

 src/assets/img/fbi.png

 src/assets/img/fbr.png

 src/assets/img/fcd.png

 src/assets/img/fgcd.png

 src/assets/img/txjq.jpg

 src/assets/img/zytd.jpg

 src/assets/img/zzyf.jpg

 src/pages/home/home.vue

New file
@@ -0,0 +1,208 @@
<template>
    <div>
        <el-carousel :interval="5000" arrow="always">
            <el-carousel-item>
                <img src="@/assets/img/banner1.jpg" alt="banner" class="icon-banner">
            </el-carousel-item>
            <el-carousel-item>
                <img src="@/assets/img/banner2.jpg" alt="banner" class="icon-banner">
            </el-carousel-item>
            <el-carousel-item>
                <img src="@/assets/img/banner3.jpg" alt="banner" class="icon-banner">
            </el-carousel-item>
        </el-carousel>
        <div class="select_box">
            <div class="title_box">
                <p>选择我们的理由</p>
                <div class="en_box">
                    <span class="line_box"></span>
                    <span class="title_lan"> Reasons for choosing us </span>
                    <span class="line_box"></span>
                </div>
            </div>
            <div class="select_list_box">
                <div class="select_list">
                    <div class="select_img">
                        <img src="@/assets/img/zzyf.jpg"/>
                    </div>
                    <h2>自主研发</h2>
                    <p>自主研发、自有工厂、自动生产，大宗采购，突出规模和成本优势。</p>
                </div>
                <div class="select_list">
                    <div class="select_img">
                        <img src="@/assets/img/txjq.jpg"/>
                    </div>
                    <h2>体系健全</h2>
                    <p>ISO9001质量管理体系进行全流程质量管控，研发生产体系健全、规范。</p>
                </div>
                <div class="select_list">
                    <div class="select_img">
                        <img src="@/assets/img/zytd.jpg"/>
                    </div>
                    <h2>专业团队</h2>
                    <p>总部＋工厂＋办事处三级保障服务团队，覆盖售前、售中、售后全服务流程。</p>
                </div>
                <div class="select_list">
                    <div class="select_img">
                        <img src="@/assets/img/cxgx.jpg"/>
                    </div>
                    <h2>持续更新</h2>
                    <p>配套的软件系统免费为客户提供更新升级服务。</p>
                </div>
            </div>
        </div>

        <div class="product_box">
            <div class="title_box">
                <p class="white_color">产品中心</p>
                <div class="en_box">
                    <span class="line_box"></span>
                    <span class="title_lan white_color"> Product center </span>
                    <span class="line_box"></span>
                </div>
            </div>
            <div class="price_title">
                <span>蓄电池监测管理</span>
                <span>蓄电池容量测试</span>
                <span>蓄电池充放电</span>
                <span>蓄电池均衡活化</span>
                <span>蓄电池其他养护</span>
            </div>
            <div class="product_list_box">
                <div class="product_list">
                    <img src="@/assets/img/fgcd.png"/>
                    <h2>FGCD系列</h2>
                    <p>充放电一体机</p>
                    <div>
                        <span>了解详情</span>
                    </div>
                </div>
                <div class="product_list"><img src="@/assets/img/fcd.png"/></div>
                <div class="product_list"><img src="@/assets/img/fbr.png"/></div>
                <div class="product_list"><img src="@/assets/img/fbi.png"/></div>
            </div>


        </div>

        <div class="select_box">
            <div class="title_box">
                <p>解决方案</p>
                <div class="en_box">
                    <span class="line_box"></span>
                    <span class="title_lan"> The solution </span>
                    <span class="line_box"></span>
                </div>
            </div>
        </div>

        <div class="select_box">
            <div class="title_box">
                <p>客户案例</p>
                <div class="en_box">
                    <span class="line_box"></span>
                    <span class="title_lan"> Customer case </span>
                    <span class="line_box"></span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },
        mounted() {

        },
        methods: {

        },
    }
</script>
<style lang="less" scoped>
    .icon-banner {
        width: 100%;
        height: 100%;
    }
    .select_list_box{
        display: flex;
        justify-content: space-between;
        padding:20px;
        .select_list{
            width:20%;
            
            .select_img{
                height:200px;
                border: 14px solid #0c3e8c;
                border-radius:0 60px; 
                overflow: hidden;
                img{
                    width:100%;
                    height:100%;
                }
            }
            h2{
                text-align: center;
                color:#30c3ce;
            }
            p{
                font-size: 16px;
                color:#717071;
            }
        }
    }
    .product_box{
        padding:0 50px;
        background:#0c3e8c;
        .white_color{
            color:#fff !important;
        }
        .price_title{
            display:flex;
            justify-content:space-between;
            padding:5px 40px;
            background:#30c3ce;
            border-radius:100px;
            color:#FFFFFF;
            margin-bottom:40px;
        }
        .product_list_box{
            display:flex;
            justify-content:space-between;
            padding:0 30px;
            .product_list{
                img{
                    // width:100%;
                    // height:100%;
                }
            }
            
        }
    }
    .title_box{
        padding:20px 0 ;
        p{
            text-align: center;
            color: #231815;
        }
        .en_box{
            text-align: center;
            font-size: 12px;
            .line_box{
                display: inline-block;
                width:10%;
                color: #9e9e9f;
                height:2px;
                background-color: #9e9e9f;
            }
            .title_lan{
                font-size: 14px;
                color: #9e9e9f;
            }
        }
    }
</style>

 src/router/routes.js

@@ -1,18 +1,18 @@
export default [
    // {
    //     path:"/",
    //     redirect: 'encipherment',
    //     name:"加密",
    {
        path:"/",
        redirect: 'home',
        name:"首页",

    // },
    // {
    //     path:"/encipherment",
    //     name:"encipherment",
    //     component: (resolve) => require(['@/pages/encipherment/encipherment.vue'], resolve),
    //     meta: {
    //             title: '加密',
    //         },
    // },
    },
    {
        path:"/home",
        name:"home",
        component: (resolve) => require(['@/pages/home/home.vue'], resolve),
        meta: {
                title: '加密',
            },
    },
    // {
    //     path:"/decode",
    //     name:"decode",