fix: 调整首页组件样式

- 统一相关组件样式，为后续功能开发做准备
fix: 修正首页产品卡片样式
2025-09-08 15:46:47 +08:00 · 2025-09-08 15:23:56 +08:00 · 2025-09-06 17:20:17 +08:00
11 changed files with 114 additions and 155 deletions
--- a/app/pages/about/contact-us.vue
+++ b/app/pages/about/contact-us.vue
@ -1,69 +0,0 @@
-<template>
-    <div class="page-container">
-        <div v-if="content">
-            <el-breadcrumb class="breadcrumb" separator="/">
-                <el-breadcrumb-item class="text-md opacity-50">
-                    <NuxtLink :to="$localePath('/')">
-                        {{ $t('navigation.home') }}
-                    </NuxtLink>
-                </el-breadcrumb-item>
-                <el-breadcrumb-item class="text-md opacity-50">
-                    <NuxtLink :to="$localePath('/about')">
-                        {{ $t('navigation.contact-info') }}
-                    </NuxtLink>
-                </el-breadcrumb-item>
-            </el-breadcrumb>
-
-            <div class="content">
-                <markdown-renderer :content="content || ''" />
-            </div>
-        </div>
-        <div v-else class="loading">
-            <el-skeleton :rows="5" animated />
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-const { findOne } = useStrapi()
-const { getStrapiLocale } = useLocalizations()
-
-const strapiLocale = getStrapiLocale()
-
-const content = ref<string>('')
-
-onMounted(async () => {
-    try {
-        const response = await findOne<StrapiContactInfo>('contact-info', undefined, {
-            populate: '*',
-            locale: strapiLocale,
-        })
-        if (response.data) {
-            content.value = response.data.content || ''
-        } else {
-            console.warn('No contact info data found')
-        }
-    } catch (error) {
-        console.error('Failed to fetch contact info:', error)
-    }
-})
-</script>
-
-<style scoped>
-.page-container {
-    padding: 2rem 1rem;
-}
-
-.breadcrumb {
-    padding: 1rem 1rem;
-}
-
-.content {
-    padding: 1rem;
-    margin-bottom: 2rem;
-}
-
-:deep(.markdown-body ul) {
-    list-style-type: none;
-}
-</style>
--- a/app/pages/about/index.vue
+++ b/app/pages/about/index.vue
@ -64,6 +64,8 @@ onMounted(async () => {
 <style scoped>
 .page-container {
    padding: 2rem 1rem;
+    max-width: 1200px;
+    margin: 0 auto;
 }

 .breadcrumb {
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@ -4,47 +4,40 @@
      <el-carousel class="homepage-carousel" height="auto" :interval="5000" arrow="never" autoplay>
        <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
          <div class="carousel-item">
-            <el-image
-class="carousel-image" :src="useStrapiMedia(item.url || '')"
+            <el-image class="carousel-image" :src="useStrapiMedia(item.url || '')"
              :alt="item.alternativeText || `Carousel Image ${index + 1}`" fit="contain" lazy />
-            <p v-if="item.caption" class="caption">{{ item.caption }}</p>
+            <p v-if="item.caption" class="carousel-image-caption">{{ item.caption }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
-      <div class="recommend-production" style="padding: 2rem;">
-        <div class="section">
-          <h2 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;">推荐产品</h2>
-          <p>探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。</p>
-          <el-carousel
-class="production-carousel" height="auto" arrow="never" indicator-position="outside"
-            :autoplay="false">
-            <el-carousel-item
-v-for="n in Math.floor(recommend_productions.length / 3) + 1" :key="n"
-              class="production-list">
-              <div class="block-group">
-                <el-card
-v-for="(item, index) in recommend_productions.slice((n - 1) * 3, n * 3)" :key="index"
-                  class="block production-card" @click="handleProductionCardClick(item.documentId || '')">
-                  <template #header>
-                    <el-image
-:src="useStrapiMedia(item.cover?.url || '')"
-                      :alt="item.cover?.alternativeText || item.title" fit="cover"
-                      style="width: 100%; height: 200px; border-radius: 8px;" lazy />
-                  </template>
-                  <div class="card-body">
-                    <!-- Name -->
-                    <div class="text-center">
-                      <span class="production-name">{{ item.title }}</span>
-                    </div>
-                    <!-- Description -->
-                    <div class="card-description text-left opacity-25">{{ item.summary }}</div>
+      <section>
+        <h2>推荐产品</h2>
+        <p>探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。</p>
+        <el-carousel class="recommend-carousel" height="auto" arrow="never" indicator-position="outside"
+          :autoplay="false">
+          <el-carousel-item v-for="n in Math.floor(recommend_productions.length / 3) + 1" :key="n"
+            class="recommend-list">
+            <div class="recommend-card-group">
+              <el-card v-for="(item, index) in recommend_productions.slice((n - 1) * 3, n * 3)" :key="index"
+                class="recommend-card" @click="handleProductionCardClick(item.documentId || '')">
+                <template #header>
+                  <el-image :src="useStrapiMedia(item.cover?.url || '')"
+                    :alt="item.cover?.alternativeText || item.title" fit="cover"
+                    style="width: 100%; height: 200px; border-radius: 8px;" lazy />
+                </template>
+                <div class="recommend-card-body">
+                  <!-- Title -->
+                  <div class="text-center">
+                    <span class="recommend-card-title">{{ item.title }}</span>
                  </div>
-                </el-card>
-              </div>
-            </el-carousel-item>
-          </el-carousel>
-        </div>
-      </div>
+                  <!-- Description -->
+                  <div class="recommend-card-description text-left opacity-25">{{ item.summary }}</div>
+                </div>
+              </el-card>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </section>
    </div>
    <div v-else class="loading">
      <el-skeleton :rows="3" animated />
@ -102,6 +95,23 @@ const handleProductionCardClick = (documentId: string) => {
 </script>

 <style scoped lang="scss">
+section {
+  padding: 2rem;
+}
+
+section h2 {
+  color: var(--el-text-color-primary);
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+section p {
+  color: var(--el-text-color-regular);
+  line-height: 1.6;
+}
+
+
 .homepage-carousel .el-carousel__item {
  width: 100%;
  height: 33vw;
@ -128,7 +138,7 @@ const handleProductionCardClick = (documentId: string) => {
  height: 100%;
 }

-.caption {
+.carousel-image-caption {
  position: absolute;
  bottom: 10px;
  left: 50%;
@ -140,7 +150,7 @@ const handleProductionCardClick = (documentId: string) => {
  font-size: 14px;
 }

-.production-carousel :deep(.el-carousel__button) {
+.recommend-carousel :deep(.el-carousel__button) {
  /* 指示器按钮样式 */
  width: 8px;
  height: 8px;
@ -149,13 +159,13 @@ const handleProductionCardClick = (documentId: string) => {
  transition: all 0.3s ease;
 }

-.production-list {
+.recommend-list {
  display: flex;
  padding: 1rem;
  height: 400px;
 }

-.block-group {
+.recommend-card-group {
  display: flex;
  gap: 1rem;
  width: 100%;
@ -165,45 +175,36 @@ const handleProductionCardClick = (documentId: string) => {
 }


-.block {
-  width: 30%;
-  height: 100%;
-  border: 2px dashed #a3aac6;
-}
-
-.production-card {
+.recommend-card {
  transition: all 0.3s ease;
  text-align: center;
 }

-.production-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+.recommend-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }

-.production-name {
-    font-size: 1rem;
-    font-weight: 600;
+
+.recommend-card-body {
+  margin: 10px auto;
+  padding: 0px auto;
+  height: 100px;
 }

-.card-description {
-    font-size: 0.8rem;
-    margin-top: 5px;
+.recommend-card-title {
+  font-size: 1rem;
+  font-weight: 600;
 }

-.production-card .el-image {
-    height: 150px;
-    border-radius: 4px;
+.recommend-card-description {
+  font-size: 0.8rem;
+  margin-top: 5px;
 }

-.card-body {
-    margin: 10px auto;
-    padding: 0px auto;
-    height: 100px;
+.recommend-card .el-image {
+  height: 150px;
+  border-radius: 4px;
 }

-.section p {
-  color: var(--el-text-color-regular);
-  line-height: 1.6;
-}
 </style>
--- a/app/pages/productions/[...slug].vue
+++ b/app/pages/productions/[...slug].vue
@ -129,7 +129,9 @@ useHead({

 <style scoped>
 .page-container {
-  min-height: 60vh;
+  min-height: 80vh;
+  max-width: 1200px;
+  margin: 0 auto;
 }

 .breadcrumb {
--- a/app/pages/productions/index.vue
+++ b/app/pages/productions/index.vue
@ -11,19 +11,19 @@
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
-        <div class="productions-container">
-            <el-collapse v-model="activeNames" class="production-collapse">
-                <el-collapse-item
-v-for="(group, type) in groupedProductions" :key="type" :title="type || '未分类'"
-                    :name="type || 'no-category'">
-                    <div class="group-list">
-                        <production-card
-v-for="production in group" :key="production.documentId || production.id"
-                            :slug="production.documentId" :image-url="useStrapiMedia(production?.cover?.url || '')"
-                            :name="production.title" :description="production.summary || ''" />
-                    </div>
-                </el-collapse-item>
-            </el-collapse>
+        <div class="page-content">
+            <div class="productions-container">
+                <el-collapse v-model="activeNames" class="production-collapse">
+                    <el-collapse-item v-for="(group, type) in groupedProductions" :key="type" :title="type || '未分类'"
+                        :name="type || 'no-category'">
+                        <div class="group-list">
+                            <production-card v-for="production in group" :key="production.documentId || production.id"
+                                :slug="production.documentId" :image-url="useStrapiMedia(production?.cover?.url || '')"
+                                :name="production.title" :description="production.summary || ''" />
+                        </div>
+                    </el-collapse-item>
+                </el-collapse>
+            </div>
        </div>
    </div>
 </template>
@ -92,6 +92,8 @@ onMounted(async () => {
 <style scoped>
 .page-container {
    padding: 2rem;
+    margin: 0 auto;
+    max-width: 1200px;
 }

 .page-header {
--- a/app/pages/solutions/[...slug].vue
+++ b/app/pages/solutions/[...slug].vue
@ -67,7 +67,9 @@ onMounted(async () => {
 <style scoped>
 .page-container {
    padding: 1rem;
-    min-height: 60vh;
+    min-height: 80vh;
+    max-width: 1200px;
+    margin: 0 auto;
 }

 .breadcrumb {
--- a/app/pages/solutions/index.vue
+++ b/app/pages/solutions/index.vue
@ -98,6 +98,8 @@ onMounted(async () => {
 <style scoped>
 .page-container {
    padding: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
 }

 .page-header {
--- a/app/pages/support/contact-us.vue
+++ b/app/pages/support/contact-us.vue
@ -59,6 +59,11 @@ onMounted(async () => {
 </script>

 <style scoped>
+.page-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
 .page-header {
    display: flex;
    padding: 2rem 2rem 0rem;
--- a/app/pages/support/documents.vue
+++ b/app/pages/support/documents.vue
@ -55,6 +55,11 @@ onMounted(async () => {
 </script>

 <style scoped>
+.page-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
 .page-header {
    display: flex;
    padding: 2rem 2rem 0rem;
--- a/app/pages/support/faq.vue
+++ b/app/pages/support/faq.vue
@ -53,6 +53,11 @@ onMounted(async () => {
 </script>

 <style scoped>
+.page-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
 .page-header {
    display: flex;
    padding: 2rem 2rem 0rem;
--- a/app/pages/support/index.vue
+++ b/app/pages/support/index.vue
@ -1,8 +1,8 @@
 <template>
    <div class="page-container">
        <support-tabs />
-
        <div class="page-content">
+
            <div class="page-header">
                <h1 class="page-title">{{ $t('navigation.support') }}</h1>
                <el-breadcrumb class="breadcrumb" separator="/">
@ -105,6 +105,10 @@
 </script>

 <style scoped>
+.page-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}

 .page-header {
    display: flex;
@ -123,8 +127,6 @@

 .page-content {
    padding: 1rem 2rem 2rem;
-    max-width: 1200px;
-    margin: 0 auto;
 }


@ -135,7 +137,7 @@ section {

 .card-group {
    display: flex;
-    gap: 100px;
+    gap: 50px;
    justify-content: space-around;
    margin-bottom: 2rem;
 }
Author	SHA1	Message	Date
R2m1liA	e6165b68b4	fix: 调整首页组件样式 - 统一相关组件样式，为后续功能开发做准备	2025-09-08 15:46:47 +08:00
R2m1liA	031bf4a55e	fix: 修正首页产品卡片样式 - 去除虚线边框	2025-09-08 15:23:56 +08:00
R2m1liA	968fd1532f	feat: 限制页面宽度 - 为页面添加1200px的宽度限制，提升其在宽屏下的观感	2025-09-06 17:20:17 +08:00