效果展示:
代码:
<template> <div class="login"> <div class="section-1"> <div class="card" @mouseover="activeCard = 1" @mouseleave="activeCard = 0" @click="islogin = !islogin"> <div class="container" :class="{ active: activeCard === 1 }"> <div class="title-info"> <div class="title">{{ '登入' }}</div> <div class="info">{{ '登入网易云音乐' }}</div> </div> </div> </div> <div class="card" @mouseover="activeCard = 2" @mouseleave="activeCard = 0" @click="goTo('about')"> <div class="container" :class="{ active: activeCard === 2 }"> <div class="title-info"> <div class="title">{{ '跳过' }}</div> <div class="info">{{ '跳过登入进入' }}</div> </div> </div> </div> </div> <div class="section-2" v-if="islogin"> <p style="font-size: 35px; font-weight:600; text-align: center;"> 登入</p> <el-input class="input" v-model="form.username" placeholder="Please input username" /> <el-input class="input" v-model="form.password" type="password" placeholder="Please input password" show-password /> <div class="input" style="display: flex; justify-content: center;"> <el-button type="primary" style= "width: 200px; " @click="onSubmit">登入</el-button> </div> </div> </div> </template> <script setup> import { ref, reactive, onMounted, onUnmounted } from 'vue' import { useRouter } from 'vue-router' import NProgress from 'nprogress' import 'nprogress/nprogress.css' const activeCard = ref(0) const router = useRouter() const islogin = ref(false) const form = reactive({ username : '', password : '', }); const onSubmit = () => { console.log(form.username, form.password) } NProgress.start() onMounted(() => { NProgress.done() }) onUnmounted(() => { NProgress.remove() // 如果需要在组件卸载时清除进度条,可以调用这个方法 }) async function goTo(path) { await router.push({ path: `/${path}` }) console.log('hello') } </script> <style lang="scss" scoped> .login { display: flex; flex-direction: row; justify-content: center; align-items: center; height: calc(100vh - 192px); } .section-1 { margin-bottom: 16px; display: flex; align-items: center; flex-direction: column; justify-content: center; } .section-2 { background-color: #eaeffd; justify-content: center; margin-left: 100px; width: 500px; height: 312px; padding-left: 80px; padding-right: 80px; padding-top: 10px; } .section-2 .input { margin-top: 30px; height: 40px } .card { cursor: pointer; margin-top: 14px; margin-bottom: 14px; display: flex; justify-content: center; align-items: center; background: #eaeffd; border-radius: 8px; height: 128px; width: 300px; transition: all 0.3s; padding-left: 22px; box-sizing: border-box; .active { .title-info { transform: translateX(-8px); } } .container { display: rgb(234, 239, 253); // justify-content: space-around; align-items: center; color: #335eea; } .title-info { transition: all 0.3s; } .title { font-size: 24px; font-weight: 600; } .info { margin-top: 2px; font-size: 14px; color: rgba(51, 94, 234, 0.78); } } </style>