📦 首页响应式布局

src/assets/scss/colors.scss

@@ -6,6 +6,7 @@ $text-second-color: #6d6d6d;
 $text-second-color-light: #ddd;
 $selection-max-width: 1250px;
 
+$border-grey-color: #b3b3b3;
 $border-default-color: $primary-dark-color;
 $border-active-color: $primary-color;
 $border-dark-color: #fff;

src/assets/scss/main.scss

@@ -103,7 +103,7 @@ $small-banner-height: 445px;
 .main-background {
   background-size: 100% auto;
   background-repeat: repeat;
-  background-position: center;
+  background-position: center top;
 
   &-type0 {
     background-image: url('@/assets/images/BgLong.png');
@@ -246,4 +246,27 @@ $small-banner-height: 445px;
       }
     }
   }
+}
+
+//
+
+@media (max-width: 1280px) {
+  .main-section {
+    padding: 100px 80px;
+  }
+}
+@media (max-width: 1024px) {
+  .main-section {
+    padding: 80px 60px;
+  }
+}
+@media (max-width: 768px) {
+  .main-section {
+    padding: 80px 40px;
+  }
+}
+@media (max-width: 425px) {
+  .main-section {
+    padding: 80px 20px;
+  }
 }

src/components/NavBar.vue

@@ -11,8 +11,8 @@
       <RouterLink to="/introduction">文化概况</RouterLink>
       <RouterLink to="/inheritor">保护传承</RouterLink>
     </div>
-    <div class="group">
-      <div class="headerlogos">
+    <div class="group center">
+      <div class="headerlogos" @click="goIndex">
         <img src="@/assets/images/LogoIcon.png" />
         <div>
           <p class="large">闽南文化生态保护区<span>(厦门市)</span></p>
@@ -26,19 +26,46 @@
       <RouterLink to="/fusion">文旅融合</RouterLink>
       <RouterLink to="/about">关于我们</RouterLink> 
     </div>
+
+    <!-- 移动端菜单 -->
+    <div class="mobile-menu">
+      <IconMenu @click="mobileMenuShow = !mobileMenuShow" />
+      <div 
+        :class="[
+          'mobile-menu-popover',
+          mobileMenuShow ? 'visible' : '',
+        ]"
+        @click="mobileMenuShow=false"
+      >
+        <RouterLink to="/">首页</RouterLink>
+        <RouterLink to="/news">资讯动态</RouterLink>
+        <RouterLink to="/introduction">文化概况</RouterLink>
+        <RouterLink to="/inheritor">保护传承</RouterLink>
+        <RouterLink to="/communicate">传播交流</RouterLink>
+        <RouterLink to="/research">理论研究</RouterLink>
+        <RouterLink to="/fusion">文旅融合</RouterLink>
+        <RouterLink to="/about">关于我们</RouterLink> 
+      </div>
+    </div>
   </nav>
 </template>
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
+import IconMenu from './icons/IconMenu.vue';
 
+const router = useRouter();
 const route = useRoute();
 const scrollValue = ref(0);
+const mobileMenuShow = ref(false);
 const headerBlur = computed(() => {
   return route.name != 'home';
 });
 
+function goIndex() {
+  router.push({ name: 'home' });
+}
 function onScroll() {
   scrollValue.value = window.scrollY;
 }
@@ -81,28 +108,30 @@ nav {
     background-color: transparent;
     backdrop-filter: blur(10px);
   }
+  a {
+    color: rgba(#fff, 0.8);
+    text-align: center;
+    text-decoration: none;
+
+    &:focus {
+      outline: none;
+    }
+    &.router-link-active, &.router-link-exact-active, &:hover {
+      color: #fff;
+    }
+    &.router-link-exact-active {
+      font-weight: bold;
+    }
+  }
 
   .group {
     display: flex;
     gap: 1rem; 
 
     a {
-      color: rgba(#fff, 0.8);
       width: 100px;
       height: $nav-height;
       line-height: $nav-height;
-      text-align: center;
-      text-decoration: none;
-
-      &:focus {
-        outline: none;
-      }
-      &.router-link-active, &.router-link-exact-active, &:hover {
-        color: #fff;
-      }
-      &.router-link-exact-active {
-        font-weight: bold;
-      }
     }
 
   }
@@ -140,6 +169,32 @@ nav {
       }
     }
   }
+  .mobile-menu {
+    display: none;
+  }
+  .mobile-menu-popover {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    top: $nav-height;
+    right: 0;
+    left: 0;
+    background-color: $box-color;
+    border-bottom: $border-grey-color;
+    color: $text-color;
+
+    a {
+      line-height: 40px;
+      height: 40px;
+      width: 100%;
+      color: $text-color;
+    }
+
+    &.visible {
+      display: flex; 
+
+    }
+  }
 }
 
 @media (max-width: 1260px) {
@@ -160,4 +215,17 @@ nav {
 @media (max-width: 1024px) {
  
 }
+@media (max-width: 768px) {
+  nav {
+    justify-content: space-between;
+    padding: 0 30px;
+
+    .group:not(.center) {
+      display: none;
+    }
+    .mobile-menu {
+      display: block;
+    } 
+  }
+}
 </style>

src/components/icons/IconMenu.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" width="30" height="30">
+    <path d="M133.310936 296.552327l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949 0-19.781623-15.997312-35.950949-35.950949-35.950949L133.310936 224.650428c-19.781623 0-35.950949 16.169326-35.950949 35.950949C97.359987 280.383 113.529313 296.552327 133.310936 296.552327z" fill="currentColor"></path>
+    <path d="M890.51705 476.135058 133.310936 476.135058c-19.781623 0-35.950949 16.169326-35.950949 35.950949 0 19.781623 16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949C926.467999 492.304384 910.298673 476.135058 890.51705 476.135058z" fill="currentColor"></path>
+    <path d="M890.51705 727.447673 133.310936 727.447673c-19.781623 0-35.950949 15.997312-35.950949 35.950949s16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-15.997312 35.950949-35.950949S910.298673 727.447673 890.51705 727.447673z" fill="currentColor"></path>
+  </svg>
+</template>

src/views/HomeView.vue

@@ -109,14 +109,22 @@ const carousel2Config = {
   wrapAround: true
 }
 const carousel2Ref = ref<any>(null);
-const carousel3Config = {
+const carousel3Config = ref({
   itemsToShow: 4,
   mouseWheel: true,
   wrapAround: true,
   autoplay: 3000,
-}
+});
 const carousel3Ref = ref<any>(null);
 
+onMounted(() => {
+  if (window.innerWidth <= 435) {
+    carousel3Config.value.itemsToShow = 1;
+  } else if (window.innerWidth <= 768) {
+    carousel3Config.value.itemsToShow = 2;
+  } 
+})
+
 const newsData = [
   {
     title: '2024年厦门市非物质文化遗产保护工作队伍培训班成功举',
@@ -325,5 +333,13 @@ const statsData = [
     z-index: -2;
   }
 }
+
+
+@media (max-width: 425px) {
+  .main-card-box {
+    width: auto;
+    transform: translateX(20px);
+  }
+}
 </style>