<template>
    <main class="main">
        <section class="banner">
            <div class="layout-box">                
                <div class="register-box">
                    <strong class="register-box-p">&nbsp;</strong>
                    <div class="register-box-right">
                        <h3>
                            店铺贷
                        </h3>
                        <p>
                        绑定店铺越多越有利于申请更高额度
                        <br/>具体审批额度以最终审核为准，详情咨询客服
                        </p>
                        <router-link to="/loan/borrowMoney">提交申请</router-link>
                    </div>                    
                </div>                
            </div>
        </section>
        <section class="advantage indexlistbox clearfix">
            <div class="layout-box">
                <div class="title"><strong class="layout-left-title"></strong>产品介绍<strong class="layout-right-title"></strong></div>
                <dl v-for="(item, index) in advantageList" :key="index">
                    <dt>
                        <img :src="item.src" alt>
                    </dt>
                    <dd class="ddfont" v-html="item.title"></dd>
                    <dt>
                        <img :src="item.wire" alt>
                    </dt>
                    <dd v-html="item.content"></dd>
                </dl>
            </div>
        </section>
        <section class="steward indexlistbox clearfix">
            <div class="layout-box">
                <div class="title"><strong class="layout-left-title"></strong>申请条件<strong class="layout-right-title"></strong></div>
                <dl v-for="(item, index) in productList" :key="index">
                    <dt>
                        <img :src="item.src" alt>
                    </dt>                    
                    <dd v-html="item.content"></dd>
                </dl>
            </div>
        </section>
        <section class="reason indexlistbox clearfix">
            <div class="layout-box">
                <div class="title"><strong class="layout-left-title"></strong>申请流程<strong class="layout-right-title"></strong></div>
                <dl v-for="(item, index) in reasonList" :key="index">
                    <dt>
                        <img :src="item.src" alt>
                    </dt>
                    <dt>
                        <img :src="item.wire" alt>
                    </dt>
                    <dd>                        
                        <p v-html="item.text"></p>
                    </dd>
                </dl>
                <router-link to="/loan/borrowMoney">提交申请</router-link>
               
            </div>
        </section>   
          
    </main>
</template>

<script>

export default {
        data() {
        return {
            advantageList: [
                {
                    src: require("assets/images/icon-limit.png"),
                    title: "产品额度",
                    wire: require("assets/images/icon-limit-wire.png"),
                    content: "最高200万借款"
                },
                {
                    src: require("assets/images/icon-period.png"),
                    title: "产品周期",
                    wire: require("assets/images/icon-period-wire.png"),
                    content: "最长周期90天"
                },
                {
                    src: require("assets/images/icon-ontherate.png"),
                    title: "月费率",
                    wire: require("assets/images/icon-ontherate-wire.png"),
                    content: "低至0.7%"
                },
                
            ],
            productList: [
                {
                    src: require("assets/images/icon-commerce.png"),                   
                    content: "第三方电商平台<br/>运营满一年"
                },
                {
                    src: require("assets/images/icon-proposer.png"),                  
                    content: "申请人<br/>无不良征信"
                },
                {
                    src: require("assets/images/icon-saleroom.png"),                   
                    content: "过去一年<br/>月均销售≥10万"
                },
                
            ],
            reasonList: [
                {
                    src: require("assets/images/icon-enroll.png"),
                    wire: require("assets/images/icon-enroll-wire.png"),
                    text: "官网在线免费注册"
                },
                {
                    src: require("assets/images/icon-submit.png"),
                    wire: require("assets/images/icon-submit-wire.png"),
                    text: "提交申请资料"
                },
                {
                    src: require("assets/images/icon-firsttrial.png"),
                    wire: require("assets/images/icon-firsttrial-wire.png"),
                    text: "平台审核准入"
                },
                {
                    src: require("assets/images/icon-bankreview.png"),
                    wire: require("assets/images/icon-bankreview-wire.png"),
                    text: "提交借款信息"
                },
                {
                    src: require("assets/images/icon-signuptolend.png"),
                    wire: require("assets/images/icon-signuptolend-wire.png"),
                    text: "审核签约放款"
                }
            ]
        };
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
main {
    display: block;
}
.banner {
    overflow: hidden;
    width: 100%;
    height: 480px;
    margin-top:30px;
    background: url(~assets/images/bg-timelyrain.png) 0 0 no-repeat;  
    background-size:100% 476px;  
    .register-box {
        width: 1080px;
        height: 376px;
        margin: 0 12px 52px 0;
        padding: 34px 15px;
        text-align: left;
        border-radius: 10px;
        color:#fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        .register-box-right{
             padding: 89px 0 0;
             h3 {
                font-size: 62px;
                font-weight: 500;
                span {
                    display: inline-block;
                    margin-left: -6px;
                    font-size: 46px;
                }
            }
            p {
                margin: 14px 4px;
                font-size: 18px;
                line-height: 34px;          
            }
            a {
                display: inline-block;
                margin: 40px 3px;
                width: 220px;
                height: 46px;
                line-height: 46px;
                text-align: center;
                border-radius: 4px;
                background: #fff;
                color: #3d86e9;
                font-weight: 400;
            }
        }
       
    }
}
 .register-box-p{
    width: 602px;
    height: 410px;
    background: url(~assets/images/banert.png) 0 0 no-repeat;
    float:left;
    margin-right: 48px;
}

.indexlistbox{
    .title {
        font-size: 40px;        
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 67px;


        &:before,&:after{
            content: "";
            display: block;
            width:62px;
            height: 24px;     
            background-size: 62px 24px;     
        }

        &:before{
            background-image: url(~assets/images/icon-title-left.png);
            margin-right:23px;
        }
        &:after{
            background-image: url(~assets/images/icon-title-right.png);
            margin-left:23px;
        }
    }
}

.advantage {
    padding: 36px 0; 
    background:#fff;    
    
    dl {
        float: left;
        width: 33.3%;
        dt{
            line-height:0;
        }
        dd {
            font-size: 20px;
            line-height: 44px;            
        }
    }
}
.ddfont{
        font-weight: bold;
    }
.steward {
    padding: 76px 0;
    background: #f7f7f7;
    
    dl {
        float: left;
        width: 30%;
        background: #fff;
        margin: 0 18px;
        padding:36px 0 23px 0;
        border-radius:10px;
        -moz-border-radius:10px; /* Old Firefox */
        dd {
            font-size: 20px;
            line-height: 36px;
            margin-top: 10px;
        }
    }
}
.reason {
    padding: 76px 0 76px;
    background: url(~assets/images/bg-reason.png) 50% 0 no-repeat;
    background: #fff;
    
    dl {
        float: left;
        width: 20%;
        h3 {
            margin: 10px 0 30px;
            font-size: 30px;
            font-weight: normal;
        }
        p {
            padding: 0 20px;
            line-height: 34px;
            color: #666666;
        }
        
    }
    a{ 
        display: inline-block;
        margin: 82px 0 3px;
        width: 332px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        border-radius: 4px;
        background: #3D86E9;
        color: #fff;
    }
}

</style>
