From 50486fbcaf38d6f1e02528fe38b768942e8ea051 Mon Sep 17 00:00:00 2001
From: zhcnyuyang <yyydm@qq.com>
Date: Sat, 3 May 2025 16:27:11 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=A8=AA=E5=B9=85=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=98=BE=E7=A4=BA=E6=AD=A3=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                 |  2 +-
 src/components/Homepage.vue | 40 +++++++++++++++++++++++++++++++++----
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c5284d2..c026b47 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -48,6 +48,6 @@ import Toolbar from './components/Toolbar.vue'
 @include media-breakpoint-between(xs, md) {
 }
 
-@include media-breakpoint-between(md, xl) {
+@include media-breakpoint-up(md) {
 }
 </style>
diff --git a/src/components/Homepage.vue b/src/components/Homepage.vue
index ecd8929..b236ad4 100644
--- a/src/components/Homepage.vue
+++ b/src/components/Homepage.vue
@@ -1,7 +1,8 @@
 <template>
-<div style="position: relative;
-  flex:1;width: 100%;min-height: 100%;background-color: #0dcaf0">
-  <h1>It works!</h1>
+<div id="homepageroot">
+  <div id="hpbanner">
+
+  </div>
 </div>
 </template>
 
@@ -11,6 +12,37 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import "node_modules/bootstrap/scss/_functions.scss";
+@import "node_modules/bootstrap/scss/_variables.scss";
+@import "node_modules/bootstrap/scss/_mixins.scss";
 
+#homepageroot{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  @include media-breakpoint-between(xs, md) {
+  }
+
+  @include media-breakpoint-between(md, xl) {
+  }
+}
+
+#hpbanner{
+  width: 100%;
+  background-size:100% 100%;
+  background-attachment: scroll;
+  background-size: 100% 100%;      /* 图片宽高100%填充div */
+  background-repeat: no-repeat;
+  background-position: center center;
+  @include media-breakpoint-between(xs, md) {
+    padding-bottom: 192%;
+    background-image: url('/Homepage/banner_wep.png');
+  }
+
+  @include media-breakpoint-up(md) {
+    padding-bottom: 52.6673640167364%;
+    background-image: url('/Homepage/banner.png');
+  }
+}
 </style>