### 登录组件 ``` <template name="login"> <view> <form @submit="formLogin"> <view class="tui-login-from"> <view class="tui-line-cell"> <tui-icon name="mobile" size="20" color='#5677fc'></tui-icon> <input placeholder-class="phcolor" class="tui-input" name="mobile" placeholder="请输入手机号码" maxlength="11" v-model="mobile" type="number" /> </view> <view class="tui-line-cell tui-top28"> <tui-icon name="pwd" size="20" color='#5677fc'></tui-icon> <input placeholder-class="phcolor" class="tui-input" name="smsCode" placeholder="请输入验证码" maxlength="6" /> <tui-button size="mini" :type="type" shape="circle" :plain="true" :disabled="disabled" @click="btnSend">{{btnText}}</tui-button> </view> <button class="btn-primary tui-btn-submit" hover-class="btn-hover" form-type="submit">登录</button> <view class="tui-protocol" hover-class="opcity" :hover-stay-time="150">点击"登录"即表示已同意 <text class="tui-protocol-red" @tap="protocol">《用户协议》</text> </view> </view> </form> </view> </template> <script> export default { name: "login", //属性 props: { item: { type: String,//属性类型 value: "1" }, // ...... }, //组件生命周期 created:function(e){ }, methods: { formLogin(){ console.log(this.$url) } } } </script> <style> page { background: #fff; } .tui-bg-box { width: 100%; box-sizing: border-box; position: relative; padding-top: 44upx; } .tui-photo { height: 138upx; width: 138upx; display: block; margin: 10upx auto 0 auto; border-radius: 50%; } .tui-login-name { width: 128upx; height: 40upx; font-size: 30upx; color: #fff; margin: 36upx auto 0 auto; text-align: center; } .tui-bg-img { width: 100%; height: 346upx; display: block; position: absolute; top: 0; z-index: -1; } .tui-login-from { width: 100%; padding: 128upx 104upx 0 104upx; box-sizing: border-box; } .tui-input { font-size: 32upx; flex: 1; display: inline-block; padding-left: 32upx; box-sizing: border-box; overflow: hidden; } .tui-line-cell { padding: 27upx 0; display: -webkit-flex; display: flex; -webkiit-align-items: center; align-items: center; position: relative; box-sizing: border-box; overflow: hidden; } .tui-line-cell::after { content: ''; position: absolute; border-bottom: 1upx solid #e0e0e0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); bottom: 0; right: 0; left: 0; } .tui-top28 { margin-top: 28upx; } .tui-btn-class { width: 196upx !important; height: 54upx !important; border-radius: 27upx !important; font-size: 28upx !important; padding: 0 !important; line-height: 54upx !important; } .tui-btn-submit { margin-top: 100upx; } .tui-protocol { color: #333; font-size: 24upx; text-align: center; width: 100%; margin-top: 29upx; } .tui-protocol-red { color: #f54f46; } </style> ```