前端效果 登入界面

文章目录

效果展示：

代码：

{{ '登入' }}{{ '登入网易云音乐' }}{{ '跳过' }}{{ '跳过登入进入' }}
 登入
登入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')}.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);}}