修改首页

yz

2021-01-30 5ce96dfbedb0ee6d0abd612ae489c020e8f6ec79

修改首页

 README.md

@@ -1,17 +0,0 @@
### FEBS Cloud Web

FEBS Cloud Web是[FEBS Cloud](https://github.com/wuyouzhuguli/FEBS-Cloud)微服务权限系统的前端项目，基于[vue element admin](https://panjiachen.github.io/vue-element-admin-site/zh/)构建。详细介绍参见：[https://www.kancloud.cn/mrbird/spring-cloud/1263679](https://www.kancloud.cn/mrbird/spring-cloud/1263679)

### 系统截图

![1](images/1.png)

![2](images/2.png)

![3](images/3.png)

![4](images/4.png)

![5](images/5.png)

![6](images/6.png)

 src/assets/background2.jpg

Binary files differ

 src/assets/background2.png

 src/assets/login/pic02.png

 src/assets/login/pic03.png

 src/assets/login/pic04.png

 src/assets/login/pic07.png

 src/assets/login/zbyt-login.png

Binary files differ

 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>

 src/views/login/login-scoped.scss

@@ -2,36 +2,16 @@
$dark_gray:#aaa;
$light_gray:#eee;


.login-container {
  background: url(../../assets/background2.jpg) 50% no-repeat;
  background: url(../../assets/background2.png) 50% no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  padding-top: 15%;
  .login-info {
    width: 608px;
    height: 350px;
    background-color: rgba(163, 44, 48, 1);
    position: absolute;
    left: 22.5%;
    color: #fff;
    font-weight: 600;
    border-radius: 3px;
    .login-img{
      margin-top: 5%;
      text-align: center;
      .zbyt-login{
        width: 200px;
        height: 200px;
      }
    }
    
    .title {
      margin-top: 5%;
      text-align: center;
      font-size: 1.8rem;
      font-weight: 600;
    }
  padding-top: 8%;
  #form-biao-dan{
    text-align: center;
  }
    .sub-title {
      font-size: 1.5rem;
      margin: .3rem 0 .7rem 1rem;
@@ -42,20 +22,23 @@
    }
  }
  .login-form {
    position: absolute;
    left: 70%;
    margin: 0 0 0 -160px;
    width: 320px;
    width: 420px;
    height: 350px;
    padding: 36px;
    background: #fff;
    border-radius: 3px;
    .form-input{
      border-radius: 20px;
      margin-top: 20px;
    }
    .code-input {
      margin-top: 20px;
      border-radius: 20px;
      width: 50%;
      display: inline-block;
      vertical-align: middle;
    }
    .code-image {
      margin-top: 20px;
      display: inline-block;
      vertical-align: top;
      cursor: pointer;
@@ -78,6 +61,14 @@
        }
      }
    }
    .submit-but{
      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%;
    }
  }
  .login-footer {
    position: fixed;
@@ -85,11 +76,11 @@
    width: 100%;
    text-align: center;
    color: white;
    font-size: .9rem;
    font-size: 1rem;
    line-height: 1rem;
    height: 1rem;
    font-weight: 600;
    color: rgba(163, 44, 48, 1);
    color: #fff;
  }
  .tips {
    font-size: 14px;
@@ -135,13 +126,6 @@
    }
  }

  @media screen and (max-width: 1100px)
  {
    .login-info {
      left: 8%;
    }
  }

  @media screen and (max-width: 970px)
  {
    .login-form {
@@ -150,5 +134,5 @@
    .login-info {
      display: none;
    }
  }
  
}

 src/views/login/login.scss

@@ -7,7 +7,11 @@
    color: $cursor;
  }
}

.login-container {
  .el-col{
       border-radius: 0px;
  }
  .el-input {
    display: inline-block;
    font-size: .9rem !important;
@@ -17,7 +21,7 @@
      -webkit-appearance: none;
      border-radius: 0;
      color: #000000;
      height: 28px;
      height: 32px;
      caret-color: $cursor;
      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px $bg inset !important;
@@ -27,11 +31,13 @@
  }
  .el-form-item {
    border: 1px solid #dedede;
    border-radius: 2px;
    color: #454545;
    transition: all .3s;
    &:hover {
      border-color: #57a3f3;
    }
  }
  .el-button:not(.is-circle,.is-round), .el-input__inner {
    border-radius: 20px !important;
}
}