|
- <template>
- <view class="">
- <view class="form">
- <view class="f-logo">
- <img src="../../images/common/logo.png" alt="" style="width:140px" mode="widthFix">
- </view>
- <view class="f-input-box input-phone">
- <img src="../../images/login/phone@2x.png" alt="" style="width:24px" mode="widthFix">
- <input class="f-input" type="number" keyboard-type="number" maxlength="11"
- :placeholder="placeholderPhone" v-model="valuePhone" onchange="watchValue"></input>
- </view>
- <view class="f-input-box">
- <img src="../../images/login/pwd@2x.png" alt="" style="width:24px" mode="widthFix">
- <input class="f-input" type="password" v-model="valuePassword"
- :placeholder="placeholderPassword" onchange="watchValue" ></input>
- </view>
-
- <view class="btn-login">
- <!-- :disabled="!isTrue" -->
- <button :class="isTrue?'btn-login-text-on':'btn-login-text'">登录</button>
- </view>
-
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'hoc-login-form-lr',
- apiready() {//like created
- },
- props: {
- data: {
- type: Object,
- default: function () {
- return {}
- }
- }
- },
- data() {
- return {
- placeholderPhone: "请输入手机号",
- valuePhone: "",
- placeholderPassword: "请输入密码",
- valuePassword: "",
- isTrue:false
- }
- },
- apiready(){
-
- },
- methods: {
-
- watchValue(){
- // api.toast({
- // msg:'1111'
- // })
- if(this.valuePhone && this.valuePassword){
- this.isTrue = true
- }else{
- this.isTrue = false
- }
- },
-
- }
- }
- </script>
- <style>
- .form {
- margin-top: -30px;
- font-size: 14px;
- border-radius: 30px 30px 0 0;
- background-color: #fff;
- padding: 30px 30px 0;
- }
- .f-logo{
- /* justify-content: flex-start; */
- align-items: flex-end;
- }
- .f-input-box{
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- border-bottom: 1px solid #efefef;
- margin-top: 20px;
- }
- .f-input {
- /* margin-top: 20px; */
- width: 90%;
- height: 40px;
- box-sizing: border-box;
- border: none;
- background-color: #fff;
- color: #333;
- }
- .btn-login {
- margin-top: 20px;
- width: 100%;
- height: 46px;
- border-radius: 4px;
- /* background: #17b998; */
- justify-content: center;
- align-items: center;
- color: #fff;
- }
- .btn-login-text {
- font-size: 15px;
- color: #fff;
- width: 100%;
- background-color: #CCCCCC;
- border-radius: 50px 50px;
- height: 50px;
- /* #FC800E */
- }
- .btn-login-text-on{
- font-size: 15px;
- color: #fff;
- width: 100%;
- border-radius: 50px 50px;
- height: 50px;
- background-color: #FC800E;
- }
- .btn-other {
- flex-direction: row;
- justify-content: space-between;
- }
- .btn-other-text {
- margin-top: 10px;
- font-size: 14px;
- color: #2F78CE;
- }
- .btn-other-text-1{
- margin-top: 10px;
- font-size: 14px;
- color: #333;
- }
- </style>
复制代码 |
|