From 5ce96dfbedb0ee6d0abd612ae489c020e8f6ec79 Mon Sep 17 00:00:00 2001
From: yz <yz_0812@outlook.com>
Date: 星期六, 30 一月 2021 14:06:17 +0800
Subject: [PATCH] 修改首页
---
src/views/login/index.vue | 249 +++++++++++++++++++++++++------------------------
1 files changed, 127 insertions(+), 122 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 9f2f123..0225111 100644
--- a/src/views/login/index.vue
+++ b/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"> </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"> </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"> </el-col>
+ </el-row>
<span class="login-footer">
© 2021 <a target="_blank" href="">版权所有：深圳市太阳帆信息技术开发有限公司</a>客服电话： 0755-26491738
</span>
--
Gitblit v1.8.0