yoe-shop-web/src/views/login.vue

<template>
  <div class="login">
    <img class="head" src="@/assets/images/head.png" alt="" />
    <div class="login-info flex-row-between">
      <div></div>
      <div class="login-bos">
        <div class="login-type flex-row-between">
          <div :class="type == 1 ? 'hig' : ''" @click="onType(1)">密码登录</div>
          <div class="border"></div>
          <div :class="type == 2 ? 'hig' : ''" @click="onType(2)">短信登录</div>
        </div>
        <template v-if="type == 1">
          <el-input class="login-input" v-model="loginForm.username" placeholder="账号名" />
          <el-input style="margin-top: 18px" type="password" class="login-input" v-model="loginForm.password" placeholder="请输入登录密码" />
        </template>
        <template v-else>
          <el-input :maxlength="11" class="login-input" v-model="loginForm.mobile" placeholder="手机号" />
          <el-input style="margin-top: 18px" :maxlength="6" class="login-input" v-model="loginForm.mobile" placeholder="手机号">
            <template #suffix>
              <span class="code">发送验证码</span>
            </template>
          </el-input>
        </template>
        <el-button class="login-btn" type="primary">登录</el-button>
        <div class="login-text flex-row-between">
          <div>忘记密码</div>
          <div class="border"></div>
          <div>免费注册</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const type = ref<any>(1);

const loginForm = ref<any>({
  username: 'admin',
  password: 'admin123',
  mobile: ''
});
const onType = (res: any) => {
  type.value = res;
};
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  width: 100%;
  background-image: url('@/assets/images/login/login1.png');
  overflow: auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  .head {
    width: 185px;
    height: 90px;
    margin-top: 53px;
    margin-left: 84px;
  }

  .login-info {
    width: 100%;
    height: 660px;
    background-image: url('@/assets/images/login/login2.png');
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 68px;
    min-width: 1200px;
    padding: 0 5%;

    .login-bos {
      width: 520px;
      height: 510px;
      background: #ffffff;
      border-radius: 30px 30px 30px 30px;
      padding: 90px 85px 0 85px;
      .login-type {
        font-weight: 600;
        font-size: 22px;
        color: #101828;
        padding: 0 67px;
        margin-bottom: 40px;
        div {
          cursor: pointer;
        }
        .hig {
          color: #e7000b;
        }
        .border {
          width: 1px;
          height: 16px;
          background: #e6e8ec;
        }
      }
      .login-input {
        width: 350px;
        height: 50px;
        font-size: 16px;
        .code {
          font-size: 14px;
          color: #e7000b;
          cursor: pointer;
        }
      }
      :deep(.el-input__wrapper) {
        border: none;
        /* 可选：去除聚焦时的高亮 */
        box-shadow: none;
        outline: none;
        background: #f4f6f8;
      }
      .login-btn {
        width: 350px;
        height: 50px;
        margin-top: 60px;
        font-size: 16px;
      }
      .login-text {
        font-size: 14px;
        color: #6a7282;
        padding: 0 107px;
        margin-top: 14px;
        div {
          cursor: pointer;
        }
        .border {
          width: 1px;
          height: 12px;
          background: #e6e8ec;
        }
      }
    }
  }
}
</style>