修改首页

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,14 +1,17 @@
<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">
    <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">
          <el-form-item prop="username" class="form-input">
          <el-input
            ref="username"
            v-model="loginForm.username"
@@ -20,7 +23,7 @@
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-form-item prop="password" class="form-input">
          <el-input
            ref="password"
            v-model="loginForm.password"
@@ -47,7 +50,7 @@
          />
        </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">
          <el-button :loading="loading" type="primary" class="submit-but" @click.native.prevent="handleLogin">
          {{ $t('login.logIn') }}
        </el-button>
      </span>
@@ -121,7 +124,9 @@
          </el-tab-pane>
        </el-tabs>
      </span>
    </el-form>
      </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,35 +2,15 @@
$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%;
  padding-top: 8%;
  #form-biao-dan{
      text-align: center;
      .zbyt-login{
        width: 200px;
        height: 200px;
      }
    }
    
    .title {
      margin-top: 5%;
      text-align: center;
      font-size: 1.8rem;
      font-weight: 600;
    }
    .sub-title {
      font-size: 1.5rem;
@@ -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;
}
}