<template> <h-view id="user-bind" class="public-style" title="用户绑定"> <h-header :proportion="[5,1,1]" class="bar-custom"> <div slot="left" class="h-header-btn"> <img src="@/assets/userBind/arrow.png" @click="$routeGo(-1)"> <span>用户绑定</span> </div> </h-header> <h-content class="content"> <div class="info"> <div class="info-icon"> <img src="@/assets/userBind/info.png" > <span>温馨提示</span> </div> <p>绑定成功后,您即可使用APP中合同查询、还款查询等功能。</p> </div> <p>选择用户类型</p> <!--<h-button :class="flag==0?'nature':'org'" @click.native="flag = 0"> <img src="@/assets/userBind/np.png" class="n-img" >自然人 </h-button> <h-button :class="flag==1?'nature':'org'" @click.native="flag = 1"> <img src="@/assets/userBind/entr.png" class="o-img" >企业 </h-button>--> <div class="bind-wrap" @click="flag = 0"> <img :src="flag==0? bindnped:bindnp"> </div> <div class="bind-wrap" @click="flag = 1"> <img :src="flag==1? bindorged:bindorg"> </div> <h-button class="enter" @click.native="changePage"> 进入 <img src="@/assets/userBind/right.png" > </h-button> </h-content> </h-view> </template> <script> export default { data () { return { flag: 0, bindnp: require('@/assets/userBind/bindnp.png'), bindnped: require('@/assets/userBind/bindnped.png'), bindorg: require('@/assets/userBind/bindorg.png'), bindorged: require('@/assets/userBind/bindorged.png'), } }, created () { }, methods: { changePage () { let name let bpClass if (this.flag === 0) { name = 'NPBaseInfo' bpClass = 'NP' } else if (this.flag === 1) { name = 'EnterpriseNew' bpClass = 'ORG' } this.$router.push({ name: name, params: { 'bp_class': bpClass, }, }) }, }, } </script> <style lang="less" scoped type="text/less"> #user-bind { .content { .info { height: 88px; line-height: 88px; background-color: rgba(142, 195, 30, 0.1); .info-icon { height: 30px; padding-top: 20px; display: flex; align-items: center; img { width: 15.8px; height: 15.8px; margin-left: 17.1px; } span { color: rgba(142, 195, 30, 1); font-family: PingFangSC-Semibold; font-size: 14px; margin-left: 9px; letter-spacing: 0.5px; line-height: 20px; } } p { font-size: 13px; font-family: PingFangSC-Regular; color: rgba(101, 100, 100, 0.8); width: 310px; margin-left: 42px; letter-spacing: 0.4px; line-height: 18px; margin-top: 8px; } } p { color: rgba(101, 100, 100, 0.4); font-family: PingFangSC-Regular; letter-spacing: 0.5px; line-height: 24px; margin-left: 16px; margin-top: 24px; } .bind-wrap{ width: 92%; margin: 10px auto; img{ width: 100%; } } .enter { display: block; width: 343px; height: 56px; font-size: 15px; letter-spacing: 0.5px; line-height: 20px; margin: 0 auto; margin-top: 16px; font-family: PingFangSC-Regular; border-radius: 4px; display: flex; justify-content: center; align-items: center; } .enter { background-color: @headerColor; color: #fff; margin-top: 80px; img { width: 18px; margin-left: 6.3px; } } } } </style>