diff --git a/app/components/pages/search/SearchTabs.vue b/app/components/pages/search/SearchTabs.vue index 1d9e4b5..1cfedd6 100644 --- a/app/components/pages/search/SearchTabs.vue +++ b/app/components/pages/search/SearchTabs.vue @@ -47,3 +47,9 @@ currentPage.value = 1; // 重置页码 }); + + diff --git a/app/pages/about/index.vue b/app/pages/about/index.vue index 7f995a2..1bcd3b3 100644 --- a/app/pages/about/index.vue +++ b/app/pages/about/index.vue @@ -1,36 +1,37 @@ @@ -42,7 +43,9 @@ { label: $t('navigation.home'), to: localePath('/') }, { label: $t('navigation.about-us') }, ]; - const { data: companyProfile, pending, error } = await useCompanyProfile(); + const { data, pending, error } = useCompanyProfile(); + + const companyProfile = computed(() => data.value ?? null); const openMap = () => { window.open(localePath('/locate')); diff --git a/app/pages/download/[id].vue b/app/pages/download/[id].vue index 2eab179..5cac282 100644 --- a/app/pages/download/[id].vue +++ b/app/pages/download/[id].vue @@ -4,11 +4,17 @@

{{ $t('navigation.downloads') }}

-
- -
-
- +
+ + +
diff --git a/app/pages/locate.vue b/app/pages/locate.vue index 79ad95e..8f7fd74 100644 --- a/app/pages/locate.vue +++ b/app/pages/locate.vue @@ -1,5 +1,7 @@ + + diff --git a/app/pages/products/[slug].vue b/app/pages/products/[slug].vue index a32daa8..a079be1 100644 --- a/app/pages/products/[slug].vue +++ b/app/pages/products/[slug].vue @@ -1,31 +1,21 @@ @@ -37,7 +27,7 @@ // 获取路由参数 const id = route.params.slug as string; - const { data: product, pending, error } = await useProduct(id); + const { data: product, error } = await useProduct(id); const breadcrumbItems = computed(() => [ { label: $t('navigation.home'), to: localePath('/') }, diff --git a/app/pages/products/index.vue b/app/pages/products/index.vue index de3028f..eaa7d30 100644 --- a/app/pages/products/index.vue +++ b/app/pages/products/index.vue @@ -10,31 +10,49 @@ -
-
- - -
- + + + +
@@ -151,6 +169,46 @@ justify-content: flex-start; } + .skeleton-collapse { + height: 50px; + width: 100%; + } + + .skeleton-group-list { + display: flex; + flex-wrap: wrap; + gap: 40px; + justify-content: flex-start; + margin-bottom: 2rem; + } + + .skeleton-card { + width: 30%; + height: 250px; + margin-right: 1rem; + } + + @media (max-width: 1200px) { + .skeleton-card { + width: 45%; + } + } + + @media (max-width: 768px) { + .group-list { + justify-content: center; + align-items: center; + } + .skeleton-group-list { + justify-content: center; + align-items: center; + } + + .skeleton-card { + width: 90%; + } + } + :deep(.el-collapse-item__header) { padding: 30px auto; font-size: 1.5rem; diff --git a/app/pages/search.vue b/app/pages/search.vue index d555bb5..06501f6 100644 --- a/app/pages/search.vue +++ b/app/pages/search.vue @@ -1,18 +1,33 @@ @@ -96,7 +111,11 @@ .search-state { display: flex; justify-content: center; - padding: 3rem 0; + } + + .skeleton-item { + height: 80px; + margin-bottom: 1rem; } @media (max-width: 640px) { diff --git a/app/pages/solutions/[slug].vue b/app/pages/solutions/[slug].vue index d35332a..6ef5650 100644 --- a/app/pages/solutions/[slug].vue +++ b/app/pages/solutions/[slug].vue @@ -1,23 +1,18 @@ @@ -29,7 +24,7 @@ // 获取路由参数 const id = route.params.slug as string; - const { data: solution, pending, error } = await useSolution(id); + const { data: solution, error } = await useSolution(id); const breadcrumbItems = computed(() => [ { label: $t('navigation.home'), to: localePath('/') }, diff --git a/app/pages/solutions/index.vue b/app/pages/solutions/index.vue index 3bff38e..25507e0 100644 --- a/app/pages/solutions/index.vue +++ b/app/pages/solutions/index.vue @@ -8,41 +8,59 @@
-
- - -
- + + + +
@@ -56,7 +74,9 @@ { label: $t('navigation.solutions') }, ]; - const { data: solutions, pending, error } = await useSolutionList(); + const { data, pending, error } = useSolutionList(); + + const solutions = computed(() => data.value ?? []); const activeName = ref('all'); @@ -123,4 +143,34 @@ margin-bottom: 2rem; gap: 40px; } + + .skeleton-group-list { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: flex-start; + margin-bottom: 2rem; + } + + .skeleton-card { + width: 30%; + height: 200px; + } + + @media (max-width: 1200px) { + .skeleton-card { + width: 45%; + } + } + + @media (max-width: 768px) { + .skeleton-group-list { + justify-content: center; + align-items: center; + } + + .skeleton-card { + width: 90%; + } + } diff --git a/app/pages/support/contact-us.vue b/app/pages/support/contact-us.vue index 7812c9c..9927efe 100644 --- a/app/pages/support/contact-us.vue +++ b/app/pages/support/contact-us.vue @@ -6,19 +6,25 @@ -
- -
- - - - - - - -
-
- +
+ + +
@@ -31,7 +37,9 @@ { label: $t('navigation.support'), to: localePath('/support') }, { label: $t('navigation.contact-info') }, ]; - const { data: contactInfo, pending, error } = await useContactInfo(); + const { data, pending, error } = useContactInfo(); + + const contactInfo = computed(() => data.value ?? null); watch(error, (value) => { if (value) { diff --git a/app/pages/support/documents.vue b/app/pages/support/documents.vue index 5bf8fd3..78322c0 100644 --- a/app/pages/support/documents.vue +++ b/app/pages/support/documents.vue @@ -1,9 +1,6 @@