<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <script src="http://kindapp.w.bronet.cn/A6079080424317/assets/js/fontsize.js"></script> <link rel="stylesheet" href="http://kindapp.w.bronet.cn/A6079080424317/assets/css/api.css"/> <link rel="stylesheet" href="http://kindapp.w.bronet.cn/A6079080424317/assets/icon/iconfont.css"> <title>邀友有赚</title> <style> .friend_top { background: url("http://kindapp.w.bronet.cn/A6079080424317/assets/image/friend.png") no-repeat; background-size: cover; height: 4.55rem; } .friend_box { width: 86%; margin: -3.26rem auto 0 auto; background-color: #fff; overflow: hidden; } .friend_box_img { background: url("http://kindapp.w.bronet.cn/A6079080424317/assets/image/firend1.jpg"); width: 63%; height: 2.28rem; line-height: 2.28rem; text-align: center; margin: 0.53rem auto 0.24rem auto; background-size: cover; font-size: 15px; color: #fff; } .friend_price { font-size: 36px; } .friend_tips { font-size: 12px; color: #424242; text-align: center; } .friend_input_box { margin: 0.56rem auto; width: 63%; } .friend_input { border-bottom: 1px solid #ededed; font-size: 12px; color: #424242; margin-bottom: 0.4rem; display: flex; align-items: center; justify-content: space-between; } .friend_input input { padding: 0.2rem 0; width: 50%; flex: 1; } .friend_input::-webkit-input-placeholder { color: #C2C1C3; font-size: 12px; } .friend_code { border: 1px solid #858485; padding: 0.08rem 0.13rem; border-radius: 0.16rem; color: #858485; font-size: 10px; text-align: center; } .friend_btn { width: 63%; margin: 0 auto; background-color: #dbb25f; color: #fff; font-size: 15px; text-align: center; padding: 0.17rem 0; border-radius: 0.16rem; } .joinstep{ display:flex; justify-content: space-between; align-items: center; margin-top:0.6rem; } .step{ color:#CCA756; font-size: 0.24rem; } .line{ width:2.5rem; color:#C3C3C3; border: 0.01rem solid #ededed; } .stepnum{ display:flex; justify-content: space-between; align-items: center; margin-top: 0.6rem; padding: 0 0.4rem; } .num{ color:#0d0d0d; font-size: 0.16rem; width:0.35rem; height:0.35rem; background:rgba(216,178,95,1); opacity:0.18; border-radius:50%; text-align: center; line-height: 0.35rem; } .stepline{ width:1rem; height:0.01rem; /*color:#C3C3C3;*/ border: 0.01rem solid #ededed; } .text{ display:flex; justify-content: space-between; align-items: center; margin-top: 0.1rem; } .steptext{ width:3rem; color:#CCA756; font-size: 0.22rem; display:inline-block; text-align: center; } /*.textline{*/ /*width:0.05rem;*/ /*!*height:0.01rem;*!*/ /*!*border: 0.01rem solid #ededed;*!*/ /*}*/ </style> </head> <body> <div id="app" v-cloak> <div class="friend_top"></div> <div class="friend_box"> <div class="friend_box_img"> <div v-if="type==1"><span>送</span><span class="friend_price">1000</span><span>元消费金</span></div> <div v-else><span>送</span><span class="friend_price">20</span><span>元首单奖励</span></div> </div> <div class="friend_tips">健康提升新选择,为健康为投资</div> <div class="friend_input_box"> <div class="friend_input"><input type="text" placeholder="请输入手机号" v-model="tel"></div> <div class="friend_input"><input type="text" placeholder="请输入验证码" v-model="code"> <span v-if="show" @click="getCode" class="friend_code">获取验证码</span> <span v-else class="friend_code">{{count}}S</span> </div> </div> <div class="friend_btn" @click="reg_fir">立即领取</div> <div class="joinstep"> <p class="line"></p> <p class="step">加入步骤</p> <p class="line"></p> </div> <div class="stepnum"> <div> <p class="num">1</p> </div> <p class="stepline"></p> <p class="num">2</p> <p class="stepline"></p> <p class="num">3</p> <p class="stepline"></p> <p class="num">4</p> <p class="stepline"></p> <p class="num">5</p> </div> <div class="text"> <p class="steptext">登录APP</p> <p class="steptext">我的</p> <p class="steptext">设置</p> <p class="steptext">服务商入口</p> <p class="steptext">资质认证</p> </div> </div> </div> </body> </html> <script type="text/javascript" src="http://kindapp.w.bronet.cn/A6079080424317/assets/js/api.js"></script> <script type="text/javascript" src="http://kindapp.w.bronet.cn/A6079080424317/assets/js/public.js"></script> <script type="text/javascript" src="http://kindapp.w.bronet.cn/A6079080424317/assets/js/fastclick.js"></script> <script> new FastClick(document.body); </script> <script type="text/javascript" src="http://kindapp.w.bronet.cn/A6079080424317/assets/js/vue.min.js"></script> <script type="text/javascript" src="http://kindapp.w.bronet.cn/A6079080424317/assets/js/axios.min.js"></script> <script type="text/javascript" src="http://kindapp.w.bronet.cn/A6079080424317/assets/icon/iconfont.js"></script> <script> var app = new Vue({ el: '#app', data: { show: true, count: '', timer: null, type: 1, invite_id: '', tel: '', code: '', invite_type: '' }, created: function () { this.type = getUrlParam('type'); this.invite_id = getUrlParam('form') this.invite_type = getUrlParam('invite_type') }, methods: { getCode: function () { const TIME_COUNT = 60; if (!app.timer) { app.count = TIME_COUNT; app.show = false; app.timer = setInterval(function () { if (app.count > 0 && app.count <= TIME_COUNT) { app.count--; } else { app.show = true; clearInterval(this.timer); app.timer = null; } }, 1000) } }, // 好友注册 reg_fir: function () { } } }) </script>