From d8286fb005f1732ccb4e7b7c8c8ae7a00191ec1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A9=99=E5=AD=90?= <454313500@qq.com>
Date: Sun, 17 Nov 2024 12:19:48 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=96=B0=E5=A2=9E=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=EF=BC=8C=E9=83=A8=E5=88=86=E9=A1=B5=E9=9D=A2bbs=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Bbs.Vue3/src/assets/styles/login.css       |  8 +-
 Yi.Bbs.Vue3/src/components/StarBackground.vue | 86 +++++++++++++++++++
 Yi.Bbs.Vue3/src/layout/AppBody.vue            |  9 +-
 Yi.Bbs.Vue3/src/layout/Index.vue              |  2 +-
 Yi.Bbs.Vue3/src/layout/LoginLayout.vue        |  3 +-
 .../src/views/login/forgotPassword.vue        |  2 +-
 Yi.Bbs.Vue3/src/views/login/login.vue         |  3 +-
 Yi.Bbs.Vue3/src/views/login/register.vue      |  2 +-
 8 files changed, 107 insertions(+), 8 deletions(-)
 create mode 100644 Yi.Bbs.Vue3/src/components/StarBackground.vue

diff --git a/Yi.Bbs.Vue3/src/assets/styles/login.css b/Yi.Bbs.Vue3/src/assets/styles/login.css
index 2c178405..2a8b8489 100644
--- a/Yi.Bbs.Vue3/src/assets/styles/login.css
+++ b/Yi.Bbs.Vue3/src/assets/styles/login.css
@@ -1,9 +1,15 @@
+@media (max-width: 720px) {
+    .div-logo {
+        display: none !important;
+    }
+}
+
 .container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
-    background-color: #272162;
+    /*background-color: #272162;*/
 }
 
 .div-content
diff --git a/Yi.Bbs.Vue3/src/components/StarBackground.vue b/Yi.Bbs.Vue3/src/components/StarBackground.vue
new file mode 100644
index 00000000..76428a0f
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/components/StarBackground.vue
@@ -0,0 +1,86 @@
+
+<template>
+  <canvas id="starfield"></canvas>
+</template>
+<script setup>
+import {onMounted} from "vue";
+const props = defineProps(['speed','number'])
+
+onMounted(()=>{
+  startAnimate();
+})
+
+
+let canvas={};
+let ctx={};
+let stars = [];
+let centerX=0;
+let centerY=0;
+const startAnimate=()=>{
+  canvas = document.getElementById('starfield');
+  ctx = canvas.getContext('2d');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  centerX = canvas.width / 2;
+  centerY = canvas.height / 2;
+
+  window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  });
+
+  createStars(props.number??1000);
+  animate();
+}
+
+function createStars(numStars) {
+  for (let i = 0; i < numStars; i++) {
+    stars.push({
+      x: (Math.random() - 0.5) * canvas.width,
+      y: (Math.random() - 0.5) * canvas.height,
+      z: Math.random() * canvas.width
+    });
+  }
+}
+
+function drawStars() {
+  ctx.fillStyle = '#f0f2f5';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  ctx.fillStyle = 'black';
+  stars.forEach(star => {
+    const k = 128 / star.z;
+    const px = star.x * k + centerX;
+    const py = star.y * k + centerY;
+
+    ctx.beginPath();
+    ctx.arc(px, py, 1.5 * k, 0, Math.PI * 2);
+    ctx.fill();
+
+    star.z -=props.speed??0.1;
+
+    if (star.z <= 0) {
+      star.z = canvas.width;
+      star.x = (Math.random() - 0.5) * canvas.width;
+      star.y = (Math.random() - 0.5) * canvas.height;
+    }
+  });
+}
+
+function animate() {
+  drawStars();
+  requestAnimationFrame(animate);
+}
+
+
+
+</script>
+<style scoped>
+
+#starfield {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+</style>
\ No newline at end of file
diff --git a/Yi.Bbs.Vue3/src/layout/AppBody.vue b/Yi.Bbs.Vue3/src/layout/AppBody.vue
index eda5f16e..85ce7e57 100644
--- a/Yi.Bbs.Vue3/src/layout/AppBody.vue
+++ b/Yi.Bbs.Vue3/src/layout/AppBody.vue
@@ -1,9 +1,14 @@
 <template>
+<StarBackground :speed="0.2" :number="1000"/>
   <div class="content-main">
     <RouterView />
   </div>
-</template>
 
+   
+</template>
+<script setup>
+import StarBackground from "@/components/StarBackground.vue";
+</script>
 <style scoped>
 .content-main {
   width: 100%;
@@ -11,6 +16,6 @@
   display: flex;
   justify-content: center;
   /* min-height: 1150px; */
-  background-color: #f0f2f5;
+  /*background-color: #f0f2f5;*/
 }
 </style>
diff --git a/Yi.Bbs.Vue3/src/layout/Index.vue b/Yi.Bbs.Vue3/src/layout/Index.vue
index e3bcd218..cb3108f1 100644
--- a/Yi.Bbs.Vue3/src/layout/Index.vue
+++ b/Yi.Bbs.Vue3/src/layout/Index.vue
@@ -68,7 +68,7 @@ const handleScroll = () => {
   margin: 0;
   padding: 0;
   min-height: 10rem;
-  background-color: #f0f2f5;
+  //background-color: #f0f2f5;
 }
 
 .fixed {
diff --git a/Yi.Bbs.Vue3/src/layout/LoginLayout.vue b/Yi.Bbs.Vue3/src/layout/LoginLayout.vue
index fc8e0be3..4c39e4bc 100644
--- a/Yi.Bbs.Vue3/src/layout/LoginLayout.vue
+++ b/Yi.Bbs.Vue3/src/layout/LoginLayout.vue
@@ -12,10 +12,11 @@
       </div>
     </div>
   </div>
+  <StarBackground :speed="0.01" :number="4000"/>
 </template>
 <!-- <style src="@/assets/styles/login.scss" scoped></style> -->
 <script setup>
-
+import StarBackground from "@/components/StarBackground.vue";
 import useConfigStore from "@/stores/config";
 const  configStore=useConfigStore();
 const isIcp=import.meta.env.VITE_APP_ICP==="true";
diff --git a/Yi.Bbs.Vue3/src/views/login/forgotPassword.vue b/Yi.Bbs.Vue3/src/views/login/forgotPassword.vue
index 98d88b8d..55fe5383 100644
--- a/Yi.Bbs.Vue3/src/views/login/forgotPassword.vue
+++ b/Yi.Bbs.Vue3/src/views/login/forgotPassword.vue
@@ -128,7 +128,7 @@ const captcha = async () => {
   <div class="container">
     <!-- 找回密码 -->
     <div class="div-content">
-      <div class="div-right-register">
+      <div class="div-right-register div-logo">
         <img class="div-img" src="@/assets/login.png"/>
       </div>
       <div class="div-left-register">
diff --git a/Yi.Bbs.Vue3/src/views/login/login.vue b/Yi.Bbs.Vue3/src/views/login/login.vue
index dc79a2d5..aafd1d35 100644
--- a/Yi.Bbs.Vue3/src/views/login/login.vue
+++ b/Yi.Bbs.Vue3/src/views/login/login.vue
@@ -56,7 +56,7 @@
                     </div>
                 </div>
             </div>
-            <div class="div-right">
+            <div class="div-right div-logo">
 <img class="div-img" src="@/assets/login.png" alt=""/>
             </div>
         </div>
@@ -150,4 +150,5 @@ window.addEventListener("message", async (e) => {
 });
 </script>
 <style src="@/assets/styles/login.css" scoped>
+
 </style>
\ No newline at end of file
diff --git a/Yi.Bbs.Vue3/src/views/login/register.vue b/Yi.Bbs.Vue3/src/views/login/register.vue
index c2db5d06..2d4c7f7e 100644
--- a/Yi.Bbs.Vue3/src/views/login/register.vue
+++ b/Yi.Bbs.Vue3/src/views/login/register.vue
@@ -139,7 +139,7 @@ const captcha = async () => {
   <div class="container">
   <!-- 注册 -->
   <div class="div-content">
-    <div class="div-right-register">
+    <div class="div-right-register div-logo">
       <img class="div-img" src="@/assets/login.png"/>
     </div>
     <div class="div-left-register">