Browse Source

feat: 1

dev_YWQ
congzc 1 year ago
parent
commit
47230dc88e
4 changed files with 41 additions and 6 deletions
  1. BIN
      src/assets/video/loginVideo.mp4
  2. +0
    -2
      src/types/auto-imports.d.ts
  3. +36
    -3
      src/views/login/index.vue
  4. +5
    -1
      src/views/myStore/index.vue

BIN
src/assets/video/loginVideo.mp4 View File


+ 0
- 2
src/types/auto-imports.d.ts View File

@@ -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"]
>; >;


+ 36
- 3
src/views/login/index.vue View File

@@ -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>

+ 5
- 1
src/views/myStore/index.vue View File

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


Loading…
Cancel
Save