登录页样式修改

楚江漓i

2021-02-28 5739012240df149e23835f23099fa4635db3cc9b

登录页样式修改

 src/views/login/index.vue

@@ -1,133 +1,140 @@
<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>
        <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 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>
            <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>
            <span>登录</span>
            <span />
          </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"><p /></el-col>
    </el-row>

        </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" style="width: 26vw;">
              <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" style="width: 26vw;">
              <el-input
                ref="password"
                v-model="loginForm.password"
                prefix-icon="el-icon-key"
                type="password"
                :placeholder="$t('login.password')"
                name="password"
                autocomplete="off"
                @keyup.enter.native="handleLogin"
              />
            </el-form-item>
            <el-form-item prop="code" style="width: 26vw;">
              <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"
              />
              <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>
          </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>
      </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: '';
  position: absolute;
  left: -20%;
  bottom: 0;
  background-color: rgba(147,30,30,0.2);
  height: 1vh;
  width: 140%;
  z-index: 1;
#form-biao-dan  {
  position:relative;
  div {
    width: 5.57vw;
    height: 4.25vh;
    line-height: 4.25vh;
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    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;
      }
    }
  }
@@ -142,5 +163,82 @@
    .login-info {
      display: none;
    }
  
}

}



//====================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;
  }
}