<template>
    <main class="main">
        <section class="banner">
            <div class="layout-box">
                <div class="register-box">
                    <h3>
                        及时雨
                        <span>Pay</span>
                    </h3>
                    <p>
                        跨境收付款、供应链金融
                        <br />一站式解决方案
                    </p>
                    <router-link to="/register" target="_blank">立即注册</router-link>
                </div>
            </div>
        </section>
        <section class="business clearfix">
            <div class="layout-box">
                <div class="title">跨境资金一站式服务</div>
                <ul>
                    <li>
                        <img src="~assets/images/icon-business1.png" alt />
                        <p>
                            跨境出口
                            <br />电商收款
                        </p>
                    </li>
                    <li>
                        <img src="~assets/images/icon-business2.png" alt />
                        <p>
                            VAT
                            <br />税务交纳
                        </p>
                    </li>
                    <li>
                        <img src="~assets/images/icon-business3.png" alt />
                        <p>
                            供应商
                            <br />费用支付
                        </p>
                    </li>
                    <li>
                        <img src="~assets/images/icon-business4.png" alt />
                        <p>
                            无抵押
                            <br />电商贷款
                        </p>
                    </li>
                </ul>
            </div>
        </section>
        <section class="reason clearfix">
            <div class="layout-box">
                <div class="title">为什么选择我们</div>
                <dl v-for="(item, index) in reasonList" :key="index">
                    <dt>
                        <img :src="item.src" alt />
                    </dt>
                    <dd>
                        <h3>{{ item.title }}</h3>
                        <p v-html="item.text"></p>
                    </dd>
                </dl>
            </div>
        </section>
        <section class="specialty">
            <div class="layout-box">
                <div class="title">跨境专业资金管家</div>
                <p>
                    及时雨Pay是一家中国第三方支付和信贷风险评估企业，
                    <br />致力于为中国跨境电商卖家提供一站式资金服务，
                    <br />包括跨境出口电商收款、供应商付款、VAT缴税等。
                </p>
                <p>
                    此外，依托强大的信贷风险评估技术，
                    <br />及时雨Pay能够为广大跨境电商卖家提供专业便捷的贷款服务，
                    <br />提高卖家的资金流转率和全球竞争力。
                </p>
            </div>
        </section>
    </main>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            reasonList: [
                {
                    src: require("assets/images/icon-reason1.png"),
                    title: "极速提现",
                    text: "高效的全球资金网络<br>提现实时到账"
                },
                {
                    src: require("assets/images/icon-reason2.png"),
                    title: "汇率无损",
                    text: "锁定中行实时汇率<br>真正的0汇损"
                },
                {
                    src: require("assets/images/icon-reason3.png"),
                    title: "资金安全",
                    text: "银行级别的安全<br>为资金保驾护航"
                },
                {
                    src: require("assets/images/icon-reason4.png"),
                    title: "贷款便利",
                    text: "审核迅速<br>极大提升资金周转效率"
                }
            ]
        };
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.banner {
    overflow: hidden;
    width: 100%;
    height: 480px;
    background: url(~assets/images/banner.jpg) 50% 0 no-repeat;
    .register-box {
        width: 360px;
        height: 376px;
        margin: 52px 0;
        padding: 60px 40px;
        text-align: left;
        border-radius: 10px;
        background: #fff;
        box-sizing: border-box;
        h3 {
            font-size: 40px;
            font-weight: 500;
            span {
                display: inline-block;
                margin-left: -6px;
                font-size: 46px;
            }
        }
        p {
            margin: 40px 0;
            font-size: 20px;
            line-height: 34px;
        }
        a {
            display: inline-block;
            width: 150px;
            height: 46px;
            line-height: 46px;
            text-align: center;
            border-radius: 4px;
            background: #3d86e9;
            color: #fff;
        }
    }
}
.business {
    padding: 58px 0 138px;
    background: url(~assets/images/bg-business.jpg) 50% 0 no-repeat;
    .title {
        font-size: 40px;
        margin-bottom: 54px;
    }
    ul {
        li {
            overflow: hidden;
            float: left;
            width: 266px;
            height: 342px;
            background: url(~assets/images/icon-business-bg.png) no-repeat;
            img {
                margin: 56px 0 30px;
            }
            p {
                font-size: 18px;
                line-height: 32px;
            }
        }
    }
}
.reason {
    padding: 0 0 66px;
    background: url(~assets/images/bg-reason.png) #f7f7f7 50% 0 no-repeat;
    .title {
        font-size: 40px;
        margin-bottom: 54px;
    }
    dl {
        float: left;
        width: 25%;
        h3 {
            margin: 10px 0 30px;
            font-size: 30px;
            font-weight: normal;
        }
        p {
            padding: 0 20px;
            line-height: 34px;
            font-size: 16px;
            color: #666666;
        }
    }
}
.specialty {
    padding: 110px 0 48px;
    background: url(~assets/images/bg-specialty.jpg) 50% 0 no-repeat;
    .title {
        font-size: 40px;
        margin-bottom: 50px;
        color: #fff;
    }
    p {
        line-height: 28px;
        font-size: 16px;
        margin-bottom: 30px;
        color: #fff;
    }
}
</style>
