<template>
    <main class="main">    
       <section class="repayment-form">   
            <p class="money">0.00</p>
            <p class="repay">未还本金（元）</p>
            <p class="repayment-text">仅展示三年内记录，更多信息请拨打400-0000-000</p>  
            <p class="repayment-input">还款</p>
            <p class="repayment-time">还款时间：
                <span v-for="item in items" @click="selectSort(item)"  :class="{'active':item.show===true}">{{item.sort}} 
                    <router-link v-show="item.show"></router-link>
                </span>    
             </p>        
        </section>
        <section class="repayment-content">
          <div  class="advance clearfix"> 
            <p class="submit">
                <span class="submit-img"><img src="~assets/images/icon-project.png" alt></span>
                <span class="way">很遗憾您还没有还款计划！</span>               
                <router-link to="/loan/borrowMoney" target="_blank">快去交易吧！</router-link>
            </p>
        </div> 
        </section>  
    </main>
</template>

<script>
export default {
    name: "refundProject",
   
    data() {
        return {
            items: [
        　　　　　{sort: '近7天', show: false},
        　　　　　{sort: '近1个月', show: false},
                 {sort: '近1年', show: false},
            ],
        };
    },
    //  created() {
    //     this.routerPath = this.$route.name;
    //     if (this.routerPath === "storeLoan") {
    //         this.toHome = "/account";
    //     } else {
    //         this.toHome = "/";
    //     }
    // },
     methods: {            
       selectSort (item) {
　　　　　　　　item.show = !item.show;
　　　　　　}
     }
    
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.main /deep/ .repayment-time {  
    padding:20px 0 32px;  
    color:#C0D1FF;            
    a,span{
        display:inline-block;
        padding:8px 9px;
        color:#C0D1FF; 
          
    }
    a,span:hover{ 
        border:1px solid #ffffff;
        color:#fff;
        padding:6px 9px;
        border-radius:4px;
                 
    }
    a,span:active{
        -moz-border-radius:4px; /* Old Firefox */  
        background:url(~assets/images/icon-checked.png) no-repeat 100% 100%;   
        background-size:12px 12px;   
    }
 .active{
     border:1px solid #ffffff;
        color:#fff;
        padding:6px 9px;
        border-radius:4px;
        -moz-border-radius:4px; /* Old Firefox */  
        background:url(~assets/images/icon-checked.png) no-repeat 100% 100%;   
        background-size:12px 12px;   
    }
      
    
}

.repayment-form{
    width:100%; 
    text-align: center;
    background: url(~assets/images/icon-rdbj.png) 0 0 no-repeat;
    color:#fff;
    margin-top:30px;
    padding: 30px 0 18px;
    p{
        font-size:14px;   
        
    }    
    .repayment-input{
        background: #ffffff;
        color: #3D86E9;
        width: 184px;
        border: 1px solid;
        border-radius: 4px;
        -moz-border-radius: 4px;
        margin: 24px auto;
        padding: 15px 0;
        font-size: 18px;
        cursor:pointer;
    }
     .repay{       
        font-size:30px;
        color: #fff;
        margin: 20px 0; 
    }
    .repayment-text{  
        margin: 20px 0; 
        color: #8EB0F6;      
    }
    .money{ 
        margin:44px 0 20px 0; 
        font-size:48px;
        color: #fff;
       
    }  
}
.main {
    display: block;
    margin-top: -0.1px;
    .repayment-content{
        width:100%;
        background: #ffffff;
        margin:0 auto;
        font-size: 12px;
    .advance{
                width:100%;
                background: #ffffff;
                margin:0 auto;
                font-size: 12px;
                color: #333333;  
                p.submit{
                    width: 100%;
                    padding:34px 0; 
                    margin:0 auto;      
                    span,a{
                        display: block;                    
                        font-size: 14px;
                        width:80%;    
                        margin:25px auto;                 
                        text-align: center;
                        color: #999999;
                       
                    } 
                    .submit-img{
                        width:80%; 
                        margin-bottom:35px;  
                    }                            
                    .way{   
                        color: #3d86e9;
                        font-size:24px;
                        font-weight: 200px;
                    }
                }
            
            } 
    } 


}




</style>
