| @@ -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(""); | ||||