<script setup>
import { ref } from 'vue'
import hb from './assets/images/hengbang.png'
import za from './assets/images/zhongan.png'
import tpy from './assets/images/taipingyang.png'
import zm from './assets/images/zhongmei.png'
import ht from './assets/images/huatai.png'
import yg from './assets/images/yangguang.png'
import ct from './assets/images/chengtai.png'
import ya from './assets/images/yongan.png'
import ans from './assets/images/ansheng.png'
import gr from './assets/images/guoren.png'
import dj from './assets/images/dajia.png'
import yc from './assets/images/yongcheng.png'
import rs from './assets/images/renshou.png'
import zt from './assets/images/zhongtai.png'
import tk from './assets/images/taikang.png'
import zj from './assets/images/zijin.png'
import bh from './assets/images/bohai.png'
import hn from './assets/images/huanong.png'

import znbj from './assets/images/znbj.png'
import znhb from './assets/images/znhb.png'
import zntb from './assets/images/zntb.png'
import sjfx from './assets/images/sjfx.png'
import qdzc from './assets/images/qdzc.png'
import aqdj from './assets/images/aqdj.png'

let bannerListTop = ref([hb, za, tpy, zm, ht, yg, ct, ya, ans])
let bannerListBottom = ref([gr, dj, yc, rs, zt, tk, zj, bh, hn])

let functionList = ref([
    {
        img: znbj,
        name: '智能报价',
        tips: '支持多险种、多车型的精准报价，自动计算保费，实时更新费率。',
        ops1: '多维度因子算费',
        ops2: '实时费率更新',
        ops3: '多家报价比对',
    },{
        img: znhb,
        name: '智能核保系统',
        tips: '基于AI算法的自动化核保，快速识别风险，支持人工复核，提高核保效率与准确性。',
        ops1: '规则引擎配置',
        ops2: '风险等级评估',
        ops3: '核保历史追踪',
    },{
        img: zntb,
        name: '在线投保系统',
        tips: '简化投保流程，支持电子签名，自动生成保单，全程线上化，减少人工干预。',
        ops1: '智能表单填写',
        ops2: '电子保单生成',
        ops3: '多渠道支付集成',
    },{
        img: sjfx,
        name: '数据分析报表',
        tips: '多维度业务数据分析，实时生成各类报表，支持自定义报表，辅助业务决策。',
        ops1: '实时业务监控',
        ops2: '客户行为分析',
        ops3: '自定义报表导出',
    },{
        img: qdzc,
        name: '全渠道支持',
        tips: '支持PC、移动端、小程序等多渠道接入，为客户提供便捷服务体验。',
        ops1: '数据同步',
        ops2: '客户管理功能',
        ops3: '业绩实时查询',
    },{
        img: aqdj,
        name: '安全对接',
        tips: '与保司核心系统无缝对接，实时数据同步。数据加密安全防护，确保客户数据安全。',
        ops1: '60+保司对接',
        ops2: '安全数据传输',
        ops3: '业务处理零延迟',
    },
])

let signList = ref(['简单易用', '迭代升级', '合规安全'])
let signIndex = ref(0)

const jeep = () => {
    window.open('https://beian.miit.gov.cn/#/Integrated/index', '_blank')
}
</script>

<template>
    <div class="website">
        <div class="banner">
            <div class="header">
                <img class="logo" src="./assets/images/logo.png" />
                <el-button type="primary">登录</el-button>
            </div>
            <div class="company">
                <vue3-marquee :duration="90" direction="normal" pause-on-hover>
                    <img class="companyItem" v-for="(item, index) in bannerListTop" :key="index" :src="item" />
                </vue3-marquee>
            </div>
        </div>
        <div class="list">
            <vue3-marquee :duration="60" direction="normal" pause-on-hover>
                <img class="listItem" v-for="(item, index) in bannerListBottom" :key="index" :src="item" />
            </vue3-marquee>
        </div>
        <div class="title">
            <div class="word">
                功能强大，全方位解决车险业务
            </div>
            <div class="tips">
                系统集成了车险业务全流程所需功能，从报价到支付，全方位提升运营效率
            </div>
        </div>
        <div class="function">
            <div class="functionItem" v-for="(item, index) in functionList" :key="index" :style="{ backgroundImage: 'url(' + item.img + ')' }">
                <div class="name">{{ item.name }}</div>
                <div class="tips">{{ item.tips}} </div>
                <div class="ops1">{{ item.ops1}} </div>
                <div class="ops2">{{ item.ops2}} </div>
                <div class="ops3">{{ item.ops3}} </div>
            </div>
        </div>
        <div class="title">
            <div class="word">
                为什么选择我们？
            </div>
            <div class="tips">
                相比传统线下出单，我们的解决方案 保险机构带来显著的效率提升和成本节约
            </div>
        </div>
        <div class="reason" :class="{'backgroundUrl': signIndex === 0}">
            <div class="left">
                <div class="sign">
                    <div class="signItem" :class="{'active': signIndex === index}" v-for="(item, index) in signList" @click="signIndex = index">{{ item }}</div>
                </div>
                <div class="content" v-if="signIndex === 0">
                    <div class="name">提升效率，降低成本</div>
                    <div class="tips">我们的系统通过自动化流程和智能算法，大幅减少人工操作，提升业务处理效率，同时降低运营成本。深耕保险行业的技术团队让产品设计更加贴合实际业务场景，全面打造贴合用户需求操作简便系统</div>
                </div>
                <div class="content" v-if="signIndex === 1">
                    <div class="name">专业的技术团队，快速的迭代能力</div>
                    <div class="tips">为全行业提供业务管理、财务管理、协议管理、产品管理、数据统计、安全管理等模块的数字化解决方案。 保证系统同步适应市场发展需求，与时俱进。</div>
                </div>
                <div class="content" v-if="signIndex === 2">
                    <div class="name">全面安全措施 为信息资产保驾护航</div>
                    <div class="tips">为数据安全可控，操作溯源可查，全面保障信息安全，以数据为核心，以法律合规为基石，一云安全能力为城墙，以多重安全保障能力为护城河，打造完善的云服务安全体系，并将其作为重要发展战略之一。</div>
                </div>
            </div>
            <div class="right">
                <img class="image2" v-show="signIndex === 1" src="./assets/images/ddsj.png" />
                <img class="image3" v-show="signIndex === 2" src="./assets/images/hgaq.png" />
            </div>
        </div>
        <div class="footer">
            <div>Copyright ◎ 山西掌柜鼎科技有限公司 版权所有<br><a @click="jeep">晋ICP备2021001666号-1</a></div>
        </div>
    </div>
</template>

<style scoped lang="less">
.website{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #F5FAFF;
    .banner{
        width: 100%;
        height: 620px;
        background: url("./assets/images/banner.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        .header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: calc(100% - 720px);
            height: 60px;
            background: rgba(255,255,255, .4);
            padding: 0 360px;
            .logo{
                width: 136px;
                height: 30px;
            }
        }
        .company{
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 14px;
            .companyItem{
                display: inline-block;
                width: 192px;
                height: 60px;
                margin: 0 12px;
                border-radius: 6px;
            }
        }
    }
    .list{
        width: 100%;
        margin-top: 10px;
        .listItem{
            display: inline-block;
            width: 192px;
            height: 60px;
            margin-right: 24px;
            border-radius: 6px;
        }
    }
    .title{
        text-align: center;
        margin: 60px 0;
        .word{
            font-weight: 600;
            font-size: 36px;
            color: #0062F5;
            margin-bottom: 20px;
        }
        .tips{
            font-weight: 400;
            font-size: 16px;
            color: #333333;
        }
    }
    .function{
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 660px);
        margin: 0 auto;
        .functionItem{
            width: calc(33.33% - 120px);
            height: calc(10% - 105px);
            background-size: 100% 107%;
            background-repeat: no-repeat;
            margin: 0 28px 45px;
            border-radius: 6px;
            border: 1px dashed #ccc;
            padding: 30px;
            overflow: hidden;
            .name{
                font-weight: 600;
                font-size: 20px;
                color: #0062F5;
                margin-bottom: 10px;
            }
            .tips{
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                margin-bottom: 20px;
            }
            .ops1, .ops2, .ops3{
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                margin-bottom: 10px;
            }
        }
    }
    .reason{
        width: calc(100% - 720px);
        height: 435px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left{
            width: 425px;
            .sign{
                display: flex;
                align-items: center;
                background: #FAFAFA;
                border-radius: 22px;
                line-height: 44px;
                margin-bottom: 35px;
                .signItem{
                    width: 33.33%;
                    text-align: center;
                    font-weight: 400;
                    font-size: 16px;
                    color: #333333;
                    cursor: pointer;
                }
                .active{
                    background: linear-gradient( 270deg, #3592FF 0%, #1967FF 100%);
                    border-radius: 22px;
                    color: #ffffff;
                }
            }
            .content{
                background: linear-gradient( 270deg, #3592FF 0%, #1967FF 100%);
                padding: 60px 50px;
                color: #ffffff;
                border-radius: 2px;
                .name{
                    font-weight: 600;
                    font-size: 20px;
                    margin-bottom: 10px;
                }
                .tips{
                    font-weight: 400;
                    font-size: 14px;
                }
            }
        }
        .right{
            .image2{
                display: block;
                width: 670px;
                height: 330px;
            }
            .image3{
                display: block;
                width: 670px;
                height: 380px;
            }
        }
    }
    .backgroundUrl{
        background: url("./assets/images/jdyy.png") no-repeat;
        background-size: 100% 100%;
    }
    .footer{
        background: #1A243A;
        width: 100%;
        text-align: center;
        color: #ffffff;
        font-weight: 400;
        font-size: 14px;
        padding: 50px 0;
        margin-top: 90px;
        a{
            &:hover{
                color: #3592FF;
                cursor: pointer;
            }
        }
    }
}
</style>
