feat(N/A):配置环境

.env.development

@@ -1 +1 @@
-VITE_BASE_URL = 'http://localhost:5157'
+VITE_BASE_URL = 'http://192.168.123.199:5155'

.env.uat

@@ -0,0 +1 @@
+VITE_BASE_URL = 'http://192.168.123.199:5156'

src/App.vue

@@ -1,50 +1,20 @@
 <script setup lang="ts">
+import '@/components/css/app.css'
 import MyHead from "@/components/MyHead.vue";
 import MyFooter from "@/components/MyFooter.vue";
 </script>
 
 <template>
-  <div class="login">
+  <div class="common-layout">
-    <el-container class="common-layout">
+    <my-head/>
-      <el-header class="header">
+    <div class="router-view">
-        <MyHead />
+      <RouterView/>
-      </el-header>
+    </div>
-      <el-main class="main-content">
+    <my-footer/>
-          <RouterView />
-      </el-main>
-      <el-footer class="footer">
-        <MyFooter/>
-      </el-footer>
-    </el-container>
   </div>
+
 </template>
 
 <style scoped>
-#app {
-  margin: 0px 0px;
-}
-
-*{
-  padding:0px
-}
-
-.login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  background-size: cover;
-}
-
-.common-layout {
-  min-width: 100vw;
-  min-height: 100vh;
-}
-
-.main-content {
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-}
 
 </style>

src/components/Login.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/components/css/login.css'
 import {reactive, ref} from "vue";
 import {ElMessage, type FormInstance, type FormRules} from "element-plus";
 import type {InternalRuleItem, Value} from "async-validator";
@@ -67,29 +68,21 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model = "registerData">
+<!--    <el-form ref="loginForm" :model = "registerData">-->
-      <el-form-item label="账号：" :rules="rules.username" :model="registerData.username" prop="username">
+<!--      <el-form-item label="账号：" :rules="rules.username" :model="registerData.username" prop="username">-->
-        <el-input v-model= "registerData.username"/>
+<!--        <el-input v-model= "registerData.username"/>-->
-      </el-form-item>
+<!--      </el-form-item>-->
-      <el-form-item label="密码：" :rules="rules.password" :model="registerData.password" prop="password">
+<!--      <el-form-item label="密码：" :rules="rules.password" :model="registerData.password" prop="password">-->
-        <el-input v-model= "registerData.password" type="password"/>
+<!--        <el-input v-model= "registerData.password" type="password"/>-->
-      </el-form-item>
+<!--      </el-form-item>-->
-      <el-form-item>
+<!--      <el-form-item>-->
-        <el-button type="primary" @click="submitForm(loginForm)" style="width: 100%;">登录</el-button>
+<!--        <el-button type="primary" @click="submitForm(loginForm)" style="width: 100%;">登录</el-button>-->
-      </el-form-item>
+<!--      </el-form-item>-->
-    </el-form>
+<!--    </el-form>-->
+      登录页面
   </div>
 </template>
 
 <style scoped>
-*{
-  margin: 0;
-  padding: 0;
-}
 
-.login {
-  min-height: 25vh;
-  min-width: 30vw;
-  background: #22b9fa;
-}
 </style>

src/components/MyFooter.vue

@@ -5,13 +5,8 @@
 </template>
 
 <style scoped>
-*{
+</style>
-  margin: 20px;
+
-  padding:0px;
+<script setup lang="ts">
-}
+import '@/components/css/myFooter.css'
-.footer {
+</script>
-  text-align: center;
-  min-height: 8vh;
-  background-color: green;
-}
-</style>

src/components/MyHead.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script setup lang="ts">
+import '@/components/css/myHead.css'
 import {computed} from "vue";
 import {useRoute} from "vue-router";
 
@@ -15,9 +16,6 @@ const isLoginRoute = computed(()=>route.path === '/login');
 
 <style scoped>
 .head {
-  font-size: 30px;
+
-  text-align: center;
-  background: green;
-  min-height: 7vh;
 }
 </style>

src/components/Test.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+test
+</template>
+
+<style scoped>
+
+</style>

src/components/css/app.css

@@ -0,0 +1,23 @@
+html, body, #app {
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+}
+
+.common-layout {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    width: 100vw;
+    background: url("@/assets/background.webp") center center / cover no-repeat;
+}
+
+.router-view {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1 1 0;
+    /*background: #ebeef5;*/
+}

src/components/css/login.css

@@ -0,0 +1,35 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+/* 玻璃+边缘羽化 */
+.login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    /* 建议给点内边距和圆角，效果更柔和 */
+    min-width: 20vw;
+    max-width: 40vw;
+
+    min-height: 40vh;
+    max-height: 80vh;
+
+    border-radius: 16px;
+
+    /* 半透明底色——要有透明度，backdrop-filter 才能生效 */
+    background: rgba(255, 255, 255, 0.12);
+
+    /* 背景虚化 + 略微提高饱和度，玻璃质感 */
+    backdrop-filter: blur(16px) saturate(130%);
+    -webkit-backdrop-filter: blur(16px) saturate(130%);
+
+    /* 玻璃边框细线，可选 */
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
+
+    /* 关键：对自身做“羽化”遮罩，让四周渐隐，看起来像边缘被柔化/模糊 */
+    /* 72% 可自行调节，越小羽化范围越大 */
+    mask-image: radial-gradient(100% 100% at 50% 50%, #000 72%, transparent 100%);
+}

src/components/css/myFooter.css

@@ -0,0 +1,21 @@
+*{
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+}
+.footer {
+    text-align: center;
+    /*min-height: 100%;*/
+    /*min-width: 100%;*/
+    /* 半透明底色——要有透明度，backdrop-filter 才能生效 */
+    background: rgba(255, 255, 255, 0.12);
+
+    /* 背景虚化 + 略微提高饱和度，玻璃质感 */
+    backdrop-filter: blur(16px) saturate(130%);
+    -webkit-backdrop-filter: blur(16px) saturate(130%);
+
+    /* 玻璃边框细线，可选 */
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
+
+}

src/components/css/myHead.css

@@ -0,0 +1,23 @@
+*{
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+}
+
+.head {
+    font-size: 30px;
+    text-align: center;
+    /*background: green;*/
+    /*min-height: 7vh;*/
+
+    /* 半透明底色——要有透明度，backdrop-filter 才能生效 */
+    background: rgba(255, 255, 255, 0.12);
+
+    /* 背景虚化 + 略微提高饱和度，玻璃质感 */
+    backdrop-filter: blur(16px) saturate(130%);
+    /*-webkit-backdrop-filter: blur(16px) saturate(130%);*/
+
+    /* 玻璃边框细线，可选 */
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
+}