登录页样式修改

楚江漓i

2021-02-28 5739012240df149e23835f23099fa4635db3cc9b

登录页样式修改

 src/views/login/index.vue

@@ -1,18 +1,26 @@
<template>
  <div class="login-container">
    <el-row>
      <el-col :span="4"><p /></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"><p /></el-col>
      <el-col :span="11" style="background-color: #fff;height: 515px;">
        <img src="../../assets/login/pic03.png" style="float: left;">
        <img src="../../assets/login/pic04.png"></el-col>
      <el-col :span="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 style="position: relative;">登录</span></h2>
    <div class="login-title">
      <img src="../../assets/login/pic02.png">
    </div>
    <div class="login-main">

      <div class="login-main-left">
        <img src="../../assets/login/pic03.png">
        <img src="../../assets/login/pic04.png">
      </div>

      <div class="login-main-right">
        <div id="form-biao-dan">
          <div>
            <span>登录</span>
            <span />
          </div>

        </div>
        <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form-new" autocomplete="off" label-position="left">
        <span v-if="login.type === 'up'">
          <el-form-item prop="username" class="form-input">
            <el-form-item prop="username" style="width: 26vw;">
            <el-input
              ref="username"
              v-model="loginForm.username"
@@ -24,7 +32,7 @@
              @keyup.enter.native="handleLogin"
            />
          </el-form-item>
          <el-form-item prop="password" class="form-input">
            <el-form-item prop="password" style="width: 26vw;">
            <el-input
              ref="password"
              v-model="loginForm.password"
@@ -33,11 +41,10 @@
              :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-form-item prop="code" style="width: 26vw;">
            <el-input
              ref="code"
              v-model="loginForm.code"
@@ -49,8 +56,8 @@
              style="width: 70%"
              @keyup.enter.native="handleLogin"
            />
          </el-form-item>
          <img :src="imageCode" alt="codeImage" class="code-image" @click="getCodeImage">
            </el-form-item>
          <el-button :loading="loading" type="primary" class="submit-but" @click.native.prevent="handleLogin">
            {{ $t('login.logIn') }}
          </el-button>
@@ -125,9 +132,9 @@
            </el-tab-pane>
          </el-tabs>
        </span>
      </el-form></el-col>
      <el-col :span="4"><p /></el-col>
    </el-row>
        </el-form>
      </div>
    </div>
    <span class="login-footer">
      © 2021 <a target="_blank" href="">版权所有：深圳市太阳帆信息技术开发有限公司</a>客服电话： 0755-26491738
    </span>

 src/views/login/login-scoped.scss

@@ -2,15 +2,38 @@
$dark_gray:#aaa;
$light_gray:#eee;

#form-biao-dan span::after {
  content: '';
#form-biao-dan  {
  position:relative;
  div {
    width: 5.57vw;
    height: 4.25vh;
    line-height: 4.25vh;
  position: absolute;
  left: -20%;
    left: 50%;
    transform: translateX(-50%);
  bottom: 0;
  background-color: rgba(147,30,30,0.2);
  height: 1vh;
  width: 140%;
  z-index: 1;
    text-align: center;
  }

  div>span:first-of-type{
  width: 100%;
  height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2.65vh;
    z-index: 9;
}

  div>span:last-of-type{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2.65vh;
    width: 100%;
    border-bottom: 1.59vh solid #e9d2d2;
  }

}

.login-container {
@@ -18,7 +41,6 @@
  background-size: cover;
  width: 100%;
  height: 100vh;
  padding-top: 5%;
  #form-biao-dan{
    text-align: center;
  }
@@ -80,23 +102,22 @@
  }
  .login-footer {
    position: fixed;
    bottom: 1rem;
    bottom: 1.7vh;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 1rem;
    line-height: 1rem;
    height: 1rem;
    font-size: 1.7vh;
    line-height: 1.7vh;
    height: 1.7vh;
    font-weight: 600;
    color: #fff;
  }
  .tips {
    font-size: 14px;
    font-size: 1.48vh;
    color: #fff;
    margin-bottom: 10px;
    margin-bottom: 1vh;
    span {
      &:first-of-type {
        margin-right: 16px;
        margin-right: 0.83vw;
      }
    }
  }
@@ -144,3 +165,80 @@
    }
  
}



//====================2021-02-28========================
.login-title {
  height: 18%;
  position: relative;
    img {
      position: absolute;
      width: 30.88vw;
      top: 5.85vh;
      left: 13.5vw;
    }
}

.login-main {
  width: 73.2%;
  height: 70.5%;
  margin-left: 13.5vw;
  background-color: #fff;
  border-radius: 10px;

  .login-main-left {
    float: left;
    width: 53%;
    position: relative;
    box-sizing: border-box;
    padding-top: 5%;
    >img:first-of-type {
      width: 98.5%;
    }
    >img:last-of-type {
      width: 1.5%;
      position: absolute;
      right: 0;
    }
  }

  .login-main-right {
    float: left;
    width: 46.8%;
    height: 100%;
    padding-top: 30px;

    #form-biao-dan {
      height: 9.57vh;
      line-height: 9.57vh;
      span {
        font-size: 3.19vh;
        font-weight: 700;
      }
    }

    .login-form-new {


      .code-image {
        width: 5.98vw;
        height: 4.46vh;
        position: absolute;
        right: 0.78vw;
        top: 1vh
      }

      .submit-but{
        width:26vw;
        height: 7.44vh;
        background-color: rgba(163, 44, 48, 1);
        border-color: rgba(163, 44, 48, 1);
        border-radius: 20px;
        margin-top: 10%;
        font-size: 2.12vh;
      }

    }
  }
}

 src/views/login/login.scss

@@ -12,32 +12,50 @@
  .el-col{
       border-radius: 0px;
  }
  .el-input {
    display: inline-block;
    font-size: .9rem !important;
    input {
      background: transparent;
      border: 0;
      -webkit-appearance: none;
      border-radius: 0;
      color: #000000;
      height: 32px;
      caret-color: $cursor;
      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }
  //.el-input {
  //  display: inline-block;
  //  font-size: .9rem !important;
  //  input {
  //    background: transparent;
  //    border: 0;
  //    -webkit-appearance: none;
  //    border-radius: 0;
  //    color: #000000;
  //    height: 32px;
  //    caret-color: $cursor;
  //    &:-webkit-autofill {
  //      box-shadow: 0 0 0 1000px $bg inset !important;
  //      -webkit-text-fill-color: $cursor !important;
  //    }
  //  }
  //}
  .el-form-item {
    border: 1px solid #dedede;
    color: #454545;
    transition: all .3s;
    margin-bottom: 2.34vh;
    &:hover {
      border-color: #57a3f3;
    }
  }
  .el-button:not(.is-circle,.is-round), .el-input__inner {
    border-radius: 20px !important;
    border-radius: 40px !important;
}
}


.login-container .login-form-new {
  padding-left: 4.16vw;
  input.el-input__inner {
    width: 100%;
    height: 7.44vh;
    background-color: #f1f1f1 !important;
    font-size: 1.91vh;
    padding-left: 4.16vw;
  }

  i.el-input__icon {
    width: 1.3vw;
    font-size: 2.65vh;
    margin-left: 1.3vw;
}
}