www-huanghe/modules/login/views/login.html

<ion-view>
  <div class="bar bar-header bar-header-blue">
    <div class="button button-icon icon  pus_blue" ng-click="goback()"></div>
    <button class="button button-icon  icon goback whiteGoBack noneContent" ng-click="goback()"></button>
    <h1 ng-if="defaultLan == 'Chinese'" class="bar_title" style="color: #fff">登录</h1>
    <h1 ng-if="defaultLan == 'English'" class="bar_title" style="color: #fff">Sign In</h1>
  </div>
  <ion-content has-bouncing="true" overflow-scroll="true" style="background-color:#ffffff;"
    class="has-header web-style">
    <div ng-if="defaultLan == 'Chinese'"
      style="display:flex;justify-content: center;align-items: center;height: 138px;">
      <span class="loginLogo">欢迎登录</span>
      <!-- <img src="{{loginLogo}}" width="50%" height="35" style="display: block;margin:50px auto 53px" /> -->
    </div>
    <div ng-if="defaultLan == 'English'">
      <div style="height: 35px;background: white"> </div>
    </div>
    <div class="login-mian">
      <div class="login-content">
        <div class="blank-h12"></div>
        <div class="blank-h12"></div>
        <form name="form" novalidate="novalidate">
          <div class="input-wrap row row-center"
            style="width: 90%;border: 1px solid #ccc; height: 50px;margin: 0 auto 6px;border-radius: 4px;top: -12px;"
            ng-class="{warn:form.tel.$dirty&&form.tel.$error.required}">
            <label ng-if="defaultLan == 'Chinese'" class="left-icon-wrap">
              手机号
            </label>
            <label ng-if="defaultLan == 'English'" class="left-icon-wrap">
              Mobile Phone
            </label>
            <input ng-if="defaultLan == 'Chinese'" type="tel" name="tel" class="col login-input" placeholder="输入手机号码"
              ng-model="user.name" ng-minlength="11" ng-maxlength="11" required ng-pattern="/1[3|4|5|7|8|9][0-9]{9}/"
              ng-focus />
            <input ng-if="defaultLan == 'English'" type="tel" name="tel" class="col login-input"
              placeholder="Please enter mobile phone" ng-model="user.name" ng-minlength="11" ng-maxlength="11" required
              ng-pattern="/1[3|4|5|7|8|9][0-9]{9}/" ng-focus />
            <span class="login_pep"></span>
          </div>
          <div style="width: 100%; height: 20px; position: absolute;top: 39px;">
            <span ng-if="(form.tel.$invalid&&form.tel.$dirty &&!form.tel.$focused) || (form.tel.$invalid && submitted )"
              class="tel_error">
              <!--//验证1-->
              <small ng-if="form.tel.$error.required && defaultLan == 'Chinese'">*请输入11位手机号</small>
              <small ng-if="form.tel.$error.required && defaultLan == 'English'">*Please enter 11 digit mobile
                phone</small>
              <!--//验证2-->
              <small ng-if="form.tel.$error.pattern && defaultLan == 'Chinese'">*请填写正确的手机号</small>
              <small ng-if="form.tel.$error.pattern && defaultLan == 'English'">*Please enter correct mobile
                phone</small>
              <!--//验证3-->
              <small ng-if="form.tel.$error.maxlength && defaultLan == 'Chinese'">手机号不能多于11位</small>
              <small ng-if="form.tel.$error.maxlength && defaultLan == 'English'">Mobile phone number cannot be more
                than 11 digits</small>
            </span>
          </div>
          <!--<span style="color:red" ng-if"myForm.user.$dirty && myForm.user.$invalid">
                         <span ng-if="myForm.user.$error.required">手机号错误</span>
                    </span>-->

          <div class="input-wrap row row-center mt-20"
            style="width: 90%;border: 1px solid #ccc !important; height: 50px;margin: 0 auto 6px;border-radius: 4px;"
            ng-class="{warn:form.password.$dirty&&form.password.$error.required}">
            <label ng-if="defaultLan == 'Chinese'" class="left-icon-wrap"
              style="text-align: center;padding-right: 4px;">
              密码
            </label>
            <label ng-if="defaultLan == 'English'" class="left-icon-wrap"
              style="text-align: center;padding-right: 4px;">
              Password
            </label>
            <input ng-if="defaultLan == 'Chinese'" type="{{show_psd ? 'text' : 'password'}}" name="password"
              class="col login-input" placeholder="输入6-20位密码" ng-model="user.password"
              onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" required ng-focus ng-maxlength="20" ng-minlength="6" />
            <input ng-if="defaultLan == 'English'" type="{{show_psd ? 'text' : 'password'}}" name="password"
              class="col login-input" placeholder="Please enter 6-20 digit password" ng-model="user.password"
              onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" required ng-focus ng-maxlength="20" ng-minlength="6" />

            <button class="psd-control" ng-click="showPassword()">
              <i class="icon  {{show_psd ? 'ion-ios-unlocked-outline' : 'ion-ios-locked-outline'}} "
                style="font-size: 26px;"></i>
            </button>
          </div>
          <div>
            <div style="width: 100%; height: 20px; position: absolute;top:111px;">
              <span class="tel_error"
                ng-if="(form.password.$invalid && form.password.$dirty && !form.password.$focused) || (form.password.$invalid && submitted)">
                <small ng-if="form.password.$error.minlength && defaultLan == 'Chinese'">*密码不能少于6位</small>
                <small ng-if="form.password.$error.minlength && defaultLan == 'English'">*Password cannot be less than 6
                  digits</small>
                <small ng-if="form.password.$error.maxlength && defaultLan == 'Chinese'">*密码不能多于20位</small>
                <small ng-if="form.password.$error.maxlength && defaultLan == 'English'">*Password cannot be more than
                  20 digits</small>
                <small ng-if="form.password.$error.required && defaultLan == 'Chinese'">*密码不能为空</small>
                <small ng-if="form.password.$error.required && defaultLan == 'English'">*Password cannot be
                  empty</small>
              </span>
            </div>
          </div>
          <div class="blank-h12"></div>
          <div class="blank-h12"></div>
          <button ng-if="defaultLan == 'Chinese'" class="button button-block  button-positive my_login"
            ng-click="login(user)" type="submit"
            ng-disabled="(form.tel.$pristine||form.password.$pristine)||(form.tel.$dirty&&form.tel.$invalid )||(form.password.$dirty&& form.password.$invalid)"
            style="margin-top: 27px !important;">
            登录
          </button>
          <button ng-if="defaultLan == 'English'" class="button button-block  button-positive my_login"
            ng-click="login(user)" type="submit"
            ng-disabled="(form.tel.$pristine||form.password.$pristine)||(form.tel.$dirty&&form.tel.$invalid )||(form.password.$dirty&& form.password.$invalid)"
            style="margin-top: 27px !important;">
            Sign In
          </button>
        </form>
        <div style="" id="login_text">
          <div ng-if="defaultLan == 'Chinese'" class=" text-left" style="width: 49%;margin: 0 auto;">
            <a class="forget-passw" ng-click="registerHideModel(1)" style="float: left">忘记密码</a>
            <a class="forget-passw" ng-click="registerHideModel(2)" style="float: right">立即注册</a>
          </div>
          <div ng-if="defaultLan == 'English'" class=" text-left" style="width: 49%;margin: 0 auto;text-align: center;">
            <a class="forget-passw" ng-click="registerHideModel(1)">Forget the password</a>
            <a class="forget-passw" ng-click="registerHideModel(2)">Create an account</a>
          </div>
          <!--<div class=" text-right" style="width: 50%;float: left;">
                      <a  class="forget-passw" ui-sref="findpsw">忘记密码?</a>
                    </div>-->
        </div>
      </div>
      <!--<div  class="other_act">
              <i  class="line_hide"></i>

            </div>-->
      <!-- <p class="other_loge">
               <span class="t1"></span>
               <span class="t2"></span>
               <span class="t3"></span>
             </p>-->
    </div>

    <p class="text-center qq_login" ng-if="defaultLan == 'Chinese'">
      <!--<small  class="other_load">第三方账号登录</small>-->
      <span ng-click="wechatLogin()" style="margin-top: 10px;" ng-show="app"><i
          class="weChat_login"></i><em>微信登录</em></span>
      <!--<span ng-click="qqLogin()" style="margin-top: 10px;"><i></i><em>QQ登录</em></span>-->
    </p>

    <div style="width: 100%;text-align: center;position: absolute;margin-top: 10px"
      ng-if="app==true&&defaultLan == 'Chinese'">
      <span>登录即代表您已经同意</span>
      <span style="color: blue" ng-click="showPrivacyPolicy()">《平台隐私政策》</span>
    </div>

  </ion-content>

</ion-view>
<style>
  @media screen and (min-width:900px) {
    .web-style {
      position: absolute;
      width: 50% !important;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      height: 100%;
      overflow: hidden;
      margin-top: 30px;
    }

    .scroll-content .scroll {
      width: 65% !important;
    }
  }

  .loginLogo {
    font-size: 35px;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    letter-spacing: 10px;
    background-image: -webkit-linear-gradient(bottom, blue, #3B8BD0, yellow);
    color: #3B8BD0;
    -webkit-background-clip: text;
    background-clip: text;
    margin: 0;
  }
</style>