1.css代码
//居中position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);width:90%;padding-top:20px;//毛玻璃效果background: rgba(255,255,255,.3);border-radius: 10px;box-shadow:5px 5px 20px 5px rgba(0,0,0,.3);backdrop-filter:blur(10px);
2.效果图
3.完整代码
<template><div class="container"><div class="loginBar" ><van-form @submit="onSubmit(user) " ><van-cell-group inset><van-fieldv-model="user.username"name="用户名"label="用户名"placeholder="用户名":rules="[{ required: true, message: '请填写用户名' }]"/><van-fieldv-model="user.password"type="password"name="密码"label="密码"placeholder="密码":rules="[{ required: true, message: '请填写密码' }]"/></van-cell-group><div style="margin: 16px;"><van-button round block type="primary" native-type="submit">提交</van-button></div></van-form></div></div></template><script setup>import useLocalLogin from '@/hooks/useLocalLogin.js'import { reactive } from '@vue/reactivity'const { handleLocalLogin } = useLocalLogin()// import {reactive} from 'vue'const user=reactive({username: "test",password:"test"})function onSubmit(user){handleLocalLogin(user)}</script><style scoped lang="scss">.container {// background: rgb(243 243 243);background:url("../assets/1.jpg");width:100vw;height:100vh;}.loginBar{//居中position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);width:90%;padding-top:20px;//毛玻璃效果background: rgba(255,255,255,.3);border-radius: 10px;box-shadow:5px 5px 20px 5px rgba(0,0,0,.3);backdrop-filter:blur(10px);}</style>
