@@ -5,7 +5,6 @@ declare global { | |||||
const ElForm: typeof import("element-plus/es")["ElForm"]; | const ElForm: typeof import("element-plus/es")["ElForm"]; | ||||
const ElMessage: typeof import("element-plus/es")["ElMessage"]; | const ElMessage: typeof import("element-plus/es")["ElMessage"]; | ||||
const ElMessageBox: typeof import("element-plus/es")["ElMessageBox"]; | const ElMessageBox: typeof import("element-plus/es")["ElMessageBox"]; | ||||
const ElTree: typeof import("element-plus/es")["ElTree"]; | |||||
const asyncComputed: typeof import("@vueuse/core")["asyncComputed"]; | const asyncComputed: typeof import("@vueuse/core")["asyncComputed"]; | ||||
const autoResetRef: typeof import("@vueuse/core")["autoResetRef"]; | const autoResetRef: typeof import("@vueuse/core")["autoResetRef"]; | ||||
const computed: typeof import("vue")["computed"]; | const computed: typeof import("vue")["computed"]; | ||||
@@ -279,7 +278,6 @@ declare module "vue" { | |||||
readonly ElMessageBox: UnwrapRef< | readonly ElMessageBox: UnwrapRef< | ||||
typeof import("element-plus/es")["ElMessageBox"] | typeof import("element-plus/es")["ElMessageBox"] | ||||
>; | >; | ||||
readonly ElTree: UnwrapRef<typeof import("element-plus/es")["ElTree"]>; | |||||
readonly asyncComputed: UnwrapRef< | readonly asyncComputed: UnwrapRef< | ||||
typeof import("@vueuse/core")["asyncComputed"] | typeof import("@vueuse/core")["asyncComputed"] | ||||
>; | >; | ||||
@@ -1,6 +1,10 @@ | |||||
<template> | <template> | ||||
<div class="login-container"> | <div class="login-container"> | ||||
<div class="videoBox"> | |||||
<video src="../../assets/video/loginVideo.mp4" muted autoplay></video> | |||||
</div> | |||||
<el-form | <el-form | ||||
v-if="true" | |||||
ref="loginFormRef" | ref="loginFormRef" | ||||
:model="loginData" | :model="loginData" | ||||
:rules="loginRules" | :rules="loginRules" | ||||
@@ -212,17 +216,27 @@ onMounted(() => { | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.login-container { | .login-container { | ||||
position: relative; | |||||
width: 100%; | width: 100%; | ||||
min-height: 100%; | min-height: 100%; | ||||
overflow: hidden; | overflow: hidden; | ||||
background-color: #2d3a4b; | |||||
// background-color: #2d3a4b; | |||||
.login-form { | .login-form { | ||||
position: absolute; | |||||
top: 46%; | |||||
left: 10%; | |||||
width: 520px; | width: 520px; | ||||
max-width: 100%; | max-width: 100%; | ||||
padding: 160px 35px 0; | |||||
margin: 0 auto; | |||||
padding: 20px; | |||||
overflow: hidden; | overflow: hidden; | ||||
background: linear-gradient( | |||||
225deg, | |||||
rgb(81 217 202 / 100%), | |||||
rgb(114 100 245 / 100%) | |||||
); | |||||
border-radius: 20px; | |||||
transform: translateY(-50%); | |||||
.captcha { | .captcha { | ||||
position: absolute; | position: absolute; | ||||
@@ -238,6 +252,15 @@ onMounted(() => { | |||||
} | } | ||||
} | } | ||||
.videoBox { | |||||
position: absolute; | |||||
top: 0; | |||||
z-index: -1; | |||||
width: 100%; | |||||
height: 100%; | |||||
opacity: 0.8; | |||||
} | |||||
.el-form-item { | .el-form-item { | ||||
background: rgb(0 0 0 / 10%); | background: rgb(0 0 0 / 10%); | ||||
border: 1px solid rgb(255 255 255 / 10%); | border: 1px solid rgb(255 255 255 / 10%); | ||||
@@ -276,4 +299,14 @@ onMounted(() => { | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@keyframes rotate { | |||||
from { | |||||
transform: rotate(0deg); | |||||
} | |||||
to { | |||||
transform: rotate(360deg); | |||||
} | |||||
} | |||||
</style> | </style> |
@@ -1,5 +1,9 @@ | |||||
<template> | <template> | ||||
<div class="page">商店</div> | |||||
<div class="page"> | |||||
<div class="commoditylIst"> | |||||
<div class="item"></div> | |||||
</div> | |||||
</div> | |||||
</template> | </template> | ||||
<script setup> | <script setup> | ||||
let title = ref(""); | let title = ref(""); | ||||