修改注册界面
This commit is contained in:
parent
66cc9708b2
commit
89559e2e83
|
|
@ -119,6 +119,39 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="刷脸登录" name="face">
|
||||
<div class="face-login">
|
||||
<div class="camera-container">
|
||||
<video
|
||||
ref="videoRef"
|
||||
class="camera-view"
|
||||
:class="{ 'scanning': isScanning }"
|
||||
autoplay
|
||||
muted
|
||||
></video>
|
||||
<div class="scan-overlay">
|
||||
<div class="scan-line"></div>
|
||||
</div>
|
||||
<div class="face-guide">
|
||||
<el-icon :size="60"><Avatar /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="camera-controls">
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="isScanning"
|
||||
@click="startFaceLogin"
|
||||
>
|
||||
{{ isScanning ? '识别中...' : '开始识别' }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="face-tips">
|
||||
<p>请确保光线充足，正对摄像头</p>
|
||||
<p>保持面部在框内，眨眨眼</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
|
|
@ -150,10 +183,10 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { User, Lock, Phone, Message, Key } from '@element-plus/icons-vue'
|
||||
import { User, Lock, Phone, Message, Key, Avatar } from '@element-plus/icons-vue'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
|
||||
const router = useRouter()
|
||||
|
|
@ -302,6 +335,69 @@ const handleLogin = async () => {
|
|||
const forgotPassword = () => {
|
||||
router.push('/forgot-password')
|
||||
}
|
||||
|
||||
const videoRef = ref<HTMLVideoElement>()
|
||||
const isScanning = ref(false)
|
||||
let stream: MediaStream | null = null
|
||||
|
||||
// 初始化摄像头
|
||||
const initCamera = async () => {
|
||||
try {
|
||||
stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: { facingMode: 'user' }
|
||||
})
|
||||
if (videoRef.value) {
|
||||
videoRef.value.srcObject = stream
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('无法访问摄像头，请检查权限设置')
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭摄像头
|
||||
const closeCamera = () => {
|
||||
if (stream) {
|
||||
stream.getTracks().forEach(track => track.stop())
|
||||
stream = null
|
||||
}
|
||||
}
|
||||
|
||||
// 开始人脸识别
|
||||
const startFaceLogin = async () => {
|
||||
if (!stream) {
|
||||
await initCamera()
|
||||
return
|
||||
}
|
||||
|
||||
isScanning.value = true
|
||||
try {
|
||||
// TODO: 调用人脸识别API
|
||||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||
|
||||
// 模拟登录成功
|
||||
ElMessage.success('人脸识别成功')
|
||||
localStorage.setItem('token', 'dummy-token')
|
||||
router.push(route.query.redirect as string || '/')
|
||||
} catch (error) {
|
||||
ElMessage.error('人脸识别失败，请重试')
|
||||
} finally {
|
||||
isScanning.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 监听标签页切换
|
||||
watch(activeTab, (newTab) => {
|
||||
if (newTab === 'face') {
|
||||
initCamera()
|
||||
} else {
|
||||
closeCamera()
|
||||
}
|
||||
})
|
||||
|
||||
// 组件卸载时关闭摄像头
|
||||
onUnmounted(() => {
|
||||
closeCamera()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -571,4 +667,91 @@ const forgotPassword = () => {
|
|||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 人脸识别相关样式 */
|
||||
.face-login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.camera-container {
|
||||
width: 320px;
|
||||
height: 240px;
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.camera-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.camera-view.scanning {
|
||||
animation: scanning 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.scan-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 2px solid #409EFF;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.scan-line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #409EFF, transparent);
|
||||
animation: scan 2s linear infinite;
|
||||
}
|
||||
|
||||
.face-guide {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.camera-controls {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.face-tips {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.face-tips p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
0% {
|
||||
top: 0;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scanning {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -480,23 +480,27 @@ const sendEmailCode = () => {
|
|||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.verify-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #409EFF;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
.verify-section .el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.verify-title .el-icon {
|
||||
font-size: 20px;
|
||||
.verify-section .el-form-item__label {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 6px;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.verify-section .el-form-item__content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.verify-code-input {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.verify-code-input .el-input {
|
||||
|
|
@ -506,6 +510,27 @@ const sendEmailCode = () => {
|
|||
.verify-code-input .el-button {
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
margin-top: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.verify-section .el-form-item:not(:first-child) .el-input {
|
||||
width: calc(100% - 130px);
|
||||
margin-left: 130px;
|
||||
}
|
||||
|
||||
.verify-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #409EFF;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.verify-title .el-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 优化输入框样式 */
|
||||
|
|
@ -584,7 +609,7 @@ const sendEmailCode = () => {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.verify-section .verify-code-input + .el-form-item .el-input {
|
||||
.verify-section .el-form-item:not(:first-child) .el-input {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue