修改首页

yz

2021-01-30 5ce96dfbedb0ee6d0abd612ae489c020e8f6ec79

 src/views/login/index.vue

@@ -1,127 +1,132 @@
<template>
  <div class="login-container">
    <div class="login-info">
      <div class="title">中保亚太人力资源管理系统</div>
      <div class="login-img">
        <img class="zbyt-login" src="../../assets/login/zbyt-login.png">
      </div>
    </div>
    <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" autocomplete="off" label-position="left">
      <span v-if="login.type === 'up'">
        <el-form-item prop="username">
          <el-input
            ref="username"
            v-model="loginForm.username"
            :placeholder="$t('login.username')"
            prefix-icon="el-icon-user"
            name="username"
            type="text"
            autocomplete="off"
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            ref="password"
            v-model="loginForm.password"
            prefix-icon="el-icon-key"
            type="password"
            :placeholder="$t('login.password')"
            name="password"
            autocomplete="off"
            :show-password="true"
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>
        <el-form-item prop="code" class="code-input">
          <el-input
            ref="code"
            v-model="loginForm.code"
            prefix-icon="el-icon-lock"
            :placeholder="$t('login.code')"
            name="code"
            type="text"
            autocomplete="off"
            style="width: 70%"
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>
        <img :src="imageCode" alt="codeImage" class="code-image" @click="getCodeImage">
        <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;background-color: rgba(163, 44, 48, 1);border-color: rgba(163, 44, 48, 1);border-radius: 20px;margin-top: 10%;" @click.native.prevent="handleLogin">
          {{ $t('login.logIn') }}
        </el-button>
      </span>
      <span v-if="login.type === 'social'">
        {{ $t('login.chooseToSignIn') }}
        <div>
          <template v-for="(l, index) in logo">
            <div :key="index" class="logo-wrapper">
              <img :src="resolveLogo(l.img)" alt="" :class="{ 'radius': l.radius }" @click="socialLogin(l.name)">
            </div>
          </template>
        </div>
      </span>
      <span v-if="login.type === 'bind'" style="margin-top: -1rem">
        <el-tabs v-model="tabActiveName" @tab-click="handleTabClick">
          <el-tab-pane :label="$t('common.bindLogin')" name="bindLogin">
            <el-form-item prop="bindUsername">
              <el-input
                ref="bindUsername"
                v-model="loginForm.bindUsername"
                :placeholder="$t('login.username')"
                prefix-icon="el-icon-user"
                name="bindUsername"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item prop="bindPassword">
              <el-input
                ref="bindPassword"
                v-model="loginForm.bindPassword"
                :placeholder="$t('login.password')"
                prefix-icon="el-icon-key"
                name="bindPassword"
                type="password"
                :show-password="true"
                autocomplete="off"
              />
            </el-form-item>
            <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;background-color: rgba(163, 44, 48, 1);border-color: rgba(163, 44, 48, 1);border-radius: 20px;margin-top: 10%;" @click.native.prevent="bindLogin">
              {{ $t('common.bindLogin') }}
            </el-button>
          </el-tab-pane>
          <el-tab-pane :label="$t('common.signLogin')" name="signLogin">
            <el-form-item prop="signUsername">
              <el-input
                ref="signUsername"
                v-model="loginForm.signUsername"
                :placeholder="$t('login.username')"
                prefix-icon="el-icon-user"
                name="signUsername"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item prop="signPassword">
              <el-input
                ref="signPassword"
                v-model="loginForm.signPassword"
                :placeholder="$t('login.password')"
                prefix-icon="el-icon-key"
                name="signPassword"
                type="password"
                :show-password="true"
                autocomplete="off"
              />
            </el-form-item>
            <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;background-color: rgba(163, 44, 48, 1);border-color: rgba(163, 44, 48, 1);border-radius: 20px;margin-top: 10%;" @click.native.prevent="signLogin">
              {{ $t('common.signLogin') }}
            </el-button>
          </el-tab-pane>
        </el-tabs>
      </span>
    </el-form>
    <el-row>
      <el-col :span="4">&nbsp;</el-col>
      <el-col :span="20"><img src="../../assets/login/pic02.png" width="500px" height="75px"></el-col>
    </el-row>
    <el-row>
      <el-col :span="4">&nbsp;</el-col>
      <el-col :span="9" style="background-color: #fff;height: 515px;"><img src="../../assets/login/pic03.png"></el-col>
      <el-col :span="0.5" style="background-color: #fff;height: 515px;"><img src="../../assets/login/pic04.png"></el-col>
      <el-col :span="6.5" style="background-color: #fff;height: 515px;"> <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" autocomplete="off" label-position="left">
        <h2 id="form-biao-dan"><span>登陆</span></h2>
        <span v-if="login.type === 'up'">
          <el-form-item prop="username" class="form-input">
            <el-input
              ref="username"
              v-model="loginForm.username"
              :placeholder="$t('login.username')"
              prefix-icon="el-icon-user"
              name="username"
              type="text"
              autocomplete="off"
              @keyup.enter.native="handleLogin"
            />
          </el-form-item>
          <el-form-item prop="password" class="form-input">
            <el-input
              ref="password"
              v-model="loginForm.password"
              prefix-icon="el-icon-key"
              type="password"
              :placeholder="$t('login.password')"
              name="password"
              autocomplete="off"
              :show-password="true"
              @keyup.enter.native="handleLogin"
            />
          </el-form-item>
          <el-form-item prop="code" class="code-input">
            <el-input
              ref="code"
              v-model="loginForm.code"
              prefix-icon="el-icon-lock"
              :placeholder="$t('login.code')"
              name="code"
              type="text"
              autocomplete="off"
              style="width: 70%"
              @keyup.enter.native="handleLogin"
            />
          </el-form-item>
          <img :src="imageCode" alt="codeImage" class="code-image" @click="getCodeImage">
          <el-button :loading="loading" type="primary" class="submit-but" @click.native.prevent="handleLogin">
            {{ $t('login.logIn') }}
          </el-button>
        </span>
        <span v-if="login.type === 'social'">
          {{ $t('login.chooseToSignIn') }}
          <div>
            <template v-for="(l, index) in logo">
              <div :key="index" class="logo-wrapper">
                <img :src="resolveLogo(l.img)" alt="" :class="{ 'radius': l.radius }" @click="socialLogin(l.name)">
              </div>
            </template>
          </div>
        </span>
        <span v-if="login.type === 'bind'" style="margin-top: -1rem">
          <el-tabs v-model="tabActiveName" @tab-click="handleTabClick">
            <el-tab-pane :label="$t('common.bindLogin')" name="bindLogin">
              <el-form-item prop="bindUsername">
                <el-input
                  ref="bindUsername"
                  v-model="loginForm.bindUsername"
                  :placeholder="$t('login.username')"
                  prefix-icon="el-icon-user"
                  name="bindUsername"
                  type="text"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item prop="bindPassword">
                <el-input
                  ref="bindPassword"
                  v-model="loginForm.bindPassword"
                  :placeholder="$t('login.password')"
                  prefix-icon="el-icon-key"
                  name="bindPassword"
                  type="password"
                  :show-password="true"
                  autocomplete="off"
                />
              </el-form-item>
              <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;background-color: rgba(163, 44, 48, 1);border-color: rgba(163, 44, 48, 1);border-radius: 20px;margin-top: 10%;" @click.native.prevent="bindLogin">
                {{ $t('common.bindLogin') }}
              </el-button>
            </el-tab-pane>
            <el-tab-pane :label="$t('common.signLogin')" name="signLogin">
              <el-form-item prop="signUsername">
                <el-input
                  ref="signUsername"
                  v-model="loginForm.signUsername"
                  :placeholder="$t('login.username')"
                  prefix-icon="el-icon-user"
                  name="signUsername"
                  type="text"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item prop="signPassword">
                <el-input
                  ref="signPassword"
                  v-model="loginForm.signPassword"
                  :placeholder="$t('login.password')"
                  prefix-icon="el-icon-key"
                  name="signPassword"
                  type="password"
                  :show-password="true"
                  autocomplete="off"
                />
              </el-form-item>
              <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;background-color: rgba(163, 44, 48, 1);border-color: rgba(163, 44, 48, 1);border-radius: 20px;margin-top: 10%;" @click.native.prevent="signLogin">
                {{ $t('common.signLogin') }}
              </el-button>
            </el-tab-pane>
          </el-tabs>
        </span>
      </el-form></el-col>
      <el-col :span="4">&nbsp;</el-col>
    </el-row>
    <span class="login-footer">
      © 2021 <a target="_blank" href="">版权所有：深圳市太阳帆信息技术开发有限公司</a>客服电话： 0755-26491738
    </span>