menduner/src/views/login/index.vue

<template>
  <div class="login-box">
    <div class="login-content">
      <div class="login-header mt-1 ml-1">
        <div class="left">
          <div ref="phone" :class="['left-qrCode', {'phone-switch': isPhone}]" @click="handlePhone">
            <div class="switch-tip">
              {{ isPhone ? '短信、密码登录/注册' : '微信扫码快速登录' }}
            </div>
          </div>
        </div>
        <div class="right mr-2 mt-3" v-if="showClose">
          <v-icon color="grey" size="30">mdi-close</v-icon>
        </div>
      </div>
      <div class="login-content-box mt-5">
        <v-menu>
          <template v-slot:activator="{ props }">
            <v-btn
              color="primary"
              v-bind="props"
            >
              Activator slot
            </v-btn>
          </template>
          <v-list>
            <v-list-item
              v-for="(item, index) in localeStore.localeMap"
              :key="index"
              :value="item.lang"
            >
              <v-list-item-title @click="localeStore.setCurrentLocale(item)">{{ item.name }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
        <v-btn>{{ localeStore.currentLocale.lang }}</v-btn>
        <div v-if="!isPhone" class="login-tab">
          <v-tabs v-model="tab" align-tabs="center" color="#00897B">
            <v-tab :value="1">短信登录</v-tab>
            <v-tab :value="2">密码登录</v-tab>
          </v-tabs>
          <v-window v-model="tab" class="mt-9">
            <v-window-item :value="1">
              <!-- 验证码登录 -->
              <phoneFrom ref="phoneRef"></phoneFrom>
            </v-window-item>
            <v-window-item :value="2">
              <!-- 账号密码登录 -->
              <passwordFrom ref="passRef"></passwordFrom>
            </v-window-item>
          </v-window>
        </div>
        <div v-else>
          <!-- 微信扫码登录 -->
          <qr-code></qr-code>
        </div>
        <v-btn color="primary" class="white--text mt-5" min-width="350" @click="handleLogin">
          {{ tab === 1 ? $t('login.register') : $t('login.login') }}
        </v-btn>
        <div class="login-tips mt-3">
          登录/注册即代表您同意 
          <span class="color" style="cursor: pointer;" @click="handleToUserAgreement">[用户协议]</span>
          <span class="color" style="cursor: pointer;" @click="handlePrivacyPolicy">[隐私政策]</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import passwordFrom from './components/password.vue'
import phoneFrom from './components/phone.vue'
import qrCode from './components/qrCode.vue'
defineOptions({ name: 'login-index' })

import { useLocaleStore } from '@/store/locale'

const localeStore = useLocaleStore()


const phone = ref()
let isPhone = ref(false)
const handlePhone = () => {
  isPhone.value = !isPhone.value
  phone.value.style.backgroundPosition = isPhone.value ? '0 -80px' : '0 0'
}
const tab = ref(1)

const showClose = ref(false)

const phoneRef = ref()
const passRef = ref()
const handleLogin = () => {
}

import { useRouter } from 'vue-router'
const router = useRouter()
const handleToUserAgreement = () => {
  router.push({ path: '/userAgreement' })
}

const handlePrivacyPolicy = () => {
  router.push({ path: '/privacyPolicy' })
}
</script>

<style lang="scss" scoped>
.login-box {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('https://www.menduner.com/images/userfiles/92d7e4a755e2428b94aab3636d5047f3/images/recruitment/adImages/2018/11/1920x940.jpg');
  background-size: cover;
}
.login-content {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 450px;
  height: 430px;
  background-color: #fff;
  border-radius: 10px;
}
.login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
.login-content-box {
  padding: 0 50px;
}
.left {
  display: flex;
}
.left-qrCode {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: url('../../assets/login.png') 0 0/40px auto no-repeat;
}
.left-qrCode:hover {
  background-position: 0 -40px !important;
}
.left-qrCode.phone-switch {
  background-position: 0 -80px !important;
}
.left-qrCode.phone-switch:hover {
  background-position: 0 -120px !important;
}
.switch-tip {
  position: absolute;
  left: 60px;
  top: 4px;
  padding: 0 14px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
  line-height: 32px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 6px 13px 0 rgba(0,0,0,.1);
  white-space: nowrap;
  &::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: #fff;
    box-shadow: 0 6px 13px 0 rgba(0,0,0,.1);
  }
}
.login-tips {
  width: 100%;
  font-size: 12px;
  text-align: center;
}

.color {
  color: var(--default-color); 
}
</style>