<template>
    <main>
        <section class="security-banner">
            <h3>安全至上</h3>
            <p>
                专业安全系统
                <br />刷新行业安全新定义
            </p>
        </section>
        <section class="bg-gray clearfix">
            <div class="layout-box security-account">
                <div class="security-title">资金安全</div>
                <p>自主研发反洗钱反欺诈双引擎系统 资金损失防范率处行业第一梯队</p>
                <dl v-for="(item, index) in reasonList" :key="index">
                    <dt>
                        <img :src="item.src" alt />
                    </dt>
                    <dd>
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.text }}</p>
                    </dd>
                </dl>
            </div>
        </section>
        <section class="security-banner2 clearfix">
            <div class="layout-box">
                <h3>数据安全保护</h3>
                <p>
                    及时雨Pay拥有行业领先的技术团队，
                    <br />采用安全、成熟、稳定的技术架构为您保驾护航；
                    <br />用户信息通过多重加密技术进行存储和使用，全面保护您的隐私安全。
                </p>
                <p>
                    服务器托管于中国电信五星级IDC机房，
                    <br />同时配合三层防火墙、入侵防御、防病毒库等安全服务的保护措施，
                    <br />特别是采用全国异地灾备机房，
                    <br />共同为您的数据提供7*24小时不间断的安全保障。
                </p>
            </div>
        </section>
        <section class="clearfix">
            <div class="layout-box security-data">
                <div class="security-title">信息安全</div>

                <dl v-for="(item, index) in dataSecurityList" :key="index">
                    <dt>
                        <img :src="item.src" alt />
                    </dt>
                    <dd>
                        <h3>{{ item.title }}</h3>
                        <p v-html="item.text"></p>
                    </dd>
                </dl>
            </div>
        </section>
    </main>
</template>

<script>
export default {
    name: "security",
    data() {
        return {
            reasonList: [
                {
                    src: require("assets/images/icon-safe1.png"),
                    title: "风险预警",
                    text:
                        "每一笔交易均受智能双引擎系统保护，80毫秒极速响应，90%风险提前预知，资金损失防范率处行业第一梯队。"
                },
                {
                    src: require("assets/images/icon-safe2.png"),
                    title: "异常报警",
                    text:
                        "资金变动均会收到短信及邮件通知。当出现异常行为时，账户将暂时冻结，并有专属客服第一时间与您联系。"
                },
                {
                    src: require("assets/images/icon-safe3.png"),
                    title: "问题处理",
                    text:
                        "账户资金问题30s内及时响应，更有专属客户经理1V1服务，助您拓展海外业务。"
                }
            ],
            dataSecurityList: [
                {
                    src: require("assets/images/icon-fund1.png"),
                    title: "个人信息",
                    text: "没有您的许可<br>绝不会将您的个人信息泄露给他人"
                },
                {
                    src: require("assets/images/icon-fund2.png"),
                    title: "店铺信息",
                    text: "PCI-DSS 安全认证<br>保障您的店铺交易安全"
                },
                {
                    src: require("assets/images/icon-fund3.png"),
                    title: "财务信息",
                    text:
                        "交易信息都储存在国家级数据安全中心<br>不会受到任何形式的泄露"
                }
            ]
        };
    },
    methods: {
        toggleFaq(item) {
            item.faqIsShow = !item.faqIsShow;
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
section {
    width: 100%;
    padding: 66px 0;
    box-sizing: border-box;
    .security-title {
        font-size: 40px;
        & + p {
            margin-top: 20px;
        }
    }
}
.security-banner {
    height: 480px;
    padding-top: 146px;
    box-sizing: border-box;
    background: url(~assets/images/bg-safe.jpg) 50% 0 no-repeat;
    color: #fff;
    h3 {
        margin-bottom: 30px;
        font-size: 60px;
        font-weight: normal;
    }
    p {
        line-height: 52px;
        font-size: 30px;
    }
}
.security-banner2 {
    height: 520px;
    text-align: left;
    box-sizing: border-box;
    background: url(~assets/images/bg-safe2.jpg) 50% 0 no-repeat;
    color: #fff;
    h3 {
        margin: 30px 0 54px 48px;
        font-size: 48px;
        font-weight: normal;
    }
    p {
        margin: 0 0 30px 48px;
        line-height: 26px;
        font-size: 16px;
    }
}
.bg-gray {
    background: #f7f7f7;
}
.security-account {
    dl {
        float: left;
        width: 356px;
        height: 416px;
        margin-top: 30px;
        padding: 50px 56px 0;
        box-sizing: border-box;
        background: url(~assets/images/icon-safe-bg.png) no-repeat;
        h3 {
            margin: 20px 0 30px;
            font-size: 30px;
            font-weight: normal;
        }
        p {
            line-height: 28px;
            font-size: 16px;
            color: #666666;
        }
    }
}
.security-seller {
    li {
        float: left;
        width: 520px;
        height: 258px;
        margin: 80px 0 34px;
        padding: 20px;
        text-align: left;
        border-radius: 8px;
        box-sizing: border-box;
        box-shadow: 2px 2px 10px rgba(193, 193, 193, 0.5);
        background: #fff;
        cursor: pointer;
        transition: transform 0.2s ease-out;
        &:first-of-type {
            margin-right: 40px;
        }
        &:hover {
            transform: translateY(-2px);
        }
        .title {
            position: relative;
            height: 90px;
            line-height: 32px;
            color: #333333;
        }
        .title::before {
            content: "";
            position: absolute;
            left: -20px;
            top: 4px;
            width: 4px;
            height: 20px;
            background: #3d86e9;
        }
        p {
            line-height: 24px;
            font-size: 14px;
            color: #666666;
        }
    }
}
.security-data {
    .notice {
        margin-top: 36px;
        padding: 0 50px;
        line-height: 30px;
        text-align: left;
        color: #333333;
    }
    dl {
        float: left;
        width: 33.33%;
        margin-top: 50px;
        h3 {
            margin: 10px 0 30px;
            font-size: 30px;
            font-weight: normal;
        }
        p {
            padding: 0 20px;
            line-height: 34px;
            color: #666666;
        }
    }
}
</style>
