cloud-web-corejs 1.0.54-dev.105 → 1.0.54-dev.107

package/src/views/user/login/index2.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="login-container" :class="backgroundClass" ref="login-container" v-show="showContent">
+    <div class="login-main" style="height: auto;">
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="账号登录" name="first">
+          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="box-form login" autocomplete="on"
+                   label-position="left">
+            <el-form-item prop="username" class="txt">
+              <span class="svg-container"><i class="el-icon-user"/></span>
+              <el-input ref="username" v-model="loginForm.username" placeholder="请输入用户名" name="" type="text"
+                        tabindex="1" autocomplete="on" @keyup.enter.native="handleLogin"/>
+            </el-form-item>
+            <el-tooltip :enterable="false" v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
+              <el-form-item prop="password" class="txt">
+                <span class="svg-container"><i class="el-icon-lock"/></span>
+                <el-input
+                  :key="passwordType"
+                  ref="password"
+                  v-model="loginForm.password"
+                  :type="passwordType"
+                  placeholder="请输入密码"
+                  name=""
+                  tabindex="2"
+                  autocomplete="on"
+                  auto-complete="new-password"
+                  @keyup.native="checkCapslock"
+                  @blur="capsTooltip = false"
+                  @keyup.enter.native="handleLogin"
+                />
+                <span class="show-pwd" @click="showPwd"><svg-icon
+                  :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/></span>
+              </el-form-item>
+            </el-tooltip>
+            <div class="">
+              <el-checkbox v-model="isRememberPassword">记住密码</el-checkbox>
+            </div>
+            <el-button :loading="loading" type="primary" @click.prevent.stop="handleLogin" class="btn">登录</el-button>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="手机验证码登录" name="second">
+          <el-form ref="loginForm" :model="loginForm2" :rules="loginRules" class="box-form login" autocomplete="on"
+                   label-position="left">
+            <el-form-item prop="username" class="txt" style="width:66%">
+              <span class="svg-container"><i class="el-icon-mobile-phone"/></span>
+              <el-input ref="mobile" v-model="loginForm2.username" placeholder="请输入手机号" name="" type="text"
+                        tabindex="1" autocomplete="on" @keyup.enter.native="handleLogin"/>
+            </el-form-item>
+            <el-button class="btn-send" type="success" :class="{'gray-btn':isCounting}" @click="sendCode">
+              {{ buttonText }}
+            </el-button>
+            <el-form-item prop="smsCode" class="txt">
+              <span class="svg-container"><i class="el-icon-message"/></span>
+              <el-input ref="smsCode" v-model="loginForm2.smsCode" placeholder="请输入验证码" name="" type="text"
+                        tabindex="1" autocomplete="on" @keyup.enter.native="handleLogin"/>
+            </el-form-item>
+            <el-button :loading="loading" type="primary" @click.prevent.stop="handleLogin" class="btn">登录</el-button>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <div class="tc copyright">
+      <slot name="footer">
+        © 广州同望科技发展有限公司
+        <span style="margin-left:50px;">4000646100</span>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixin from "@base/views/user/login/indexMixin";
+
+export default {
+  name: 'Login',
+  mixins: [mixin]
+}
+</script>
+<style lang="scss" scoped>
+@import '@/resources/css/login.scss';
+
+.login-container.tc {
+  background: url(~@/resources/images/bg-login5.jpg) center center/cover no-repeat;
+}
+
+.login-container.chigo {
+  background: url(~@/resources/images/bg-login6.jpg) center center/cover no-repeat;
+}
+
+.login-container.pcp {
+  background: url(~@/resources/images/bg-login8.jpg) center center/cover no-repeat;
+}
+
+.el-select-dropdown {
+  right: 5px;
+  top: 25px;
+}
+
+::v-deep .login-main .el-tabs__header {
+  margin-bottom: 0;
+
+  .el-tabs__nav {
+    line-height: 65px;
+    margin: 0 25px;
+    width: calc(100% - 50px);
+
+    .el-tabs__item {
+      font-size: 18px;
+      width: 50%;
+      text-align: center;
+      margin-right: 0;
+      padding-right: 0 !important;
+      line-height: 65px;
+      height: 65px;
+    }
+  }
+}
+
+.btn-send {
+  position: absolute;
+  margin-top: -74px;
+  right: 35px;
+  height: 52px;
+  width: 27%;
+
+  &.gray-btn {
+    background: #dedede;
+    border-color: #dedede;
+    color: #8a8686;
+  }
+}
+</style>