Bläddra i källkod
refactor: 优化Markdown配置和样式
本次提交主要进行了以下修改： 1. 移除了nuxt.config.ts中的Markdown目录配置，简化了Markdown设置。 2. 在styles.css中新增了Markdown内容的样式，提升了Markdown文本的可读性和视觉效果。 3. 更新了多个页面的样式，确保在不同屏幕尺寸下的响应式布局。 这些改动旨在提升用户体验和页面的整体美观性。master
lizhuang
1 månad sedan
6 ändrade filer med 518 tillägg och 178 borttagningar
+ 184
- 0
assets/css/styles.css
Visa fil
| @@ -47,4 +47,188 @@ html[lang="ja"] body { | |||
| html[lang="en"] body { | |||
| font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important; | |||
| } | |||
| /* Markdown 内容样式 */ | |||
| .prose { | |||
| color: rgba(255, 255, 255, 0.6); | |||
| line-height: 1.625; | |||
| } | |||
| .prose h1 { | |||
| font-size: 1.5rem; | |||
| font-weight: 700; | |||
| color: white; | |||
| margin-bottom: 1.5rem; | |||
| margin-top: 2rem; | |||
| } | |||
| .prose h2 { | |||
| font-size: 1.25rem; | |||
| font-weight: 600; | |||
| color: white; | |||
| margin-bottom: 1rem; | |||
| margin-top: 1.5rem; | |||
| } | |||
| .prose h3 { | |||
| font-size: 1.125rem; | |||
| font-weight: 500; | |||
| color: white; | |||
| margin-bottom: 0.75rem; | |||
| margin-top: 1.25rem; | |||
| } | |||
| .prose h4 { | |||
| font-size: 1rem; | |||
| font-weight: 500; | |||
| color: white; | |||
| margin-bottom: 0.5rem; | |||
| margin-top: 1rem; | |||
| } | |||
| .prose p { | |||
| margin-bottom: 1rem; | |||
| line-height: 1.75; | |||
| } | |||
| .prose a { | |||
| text-decoration: none; | |||
| text-decoration-thickness: 1px; | |||
| text-underline-offset: 2px; | |||
| transition: color 0.2s; | |||
| pointer-events: none; | |||
| } | |||
| .prose a:hover { | |||
| color: rgb(147 197 253); | |||
| } | |||
| .prose ul, | |||
| .prose ol { | |||
| margin: 1rem 0; | |||
| margin-left: 0rem; | |||
| } | |||
| .prose ul { | |||
| list-style-type: disc; | |||
| } | |||
| .prose ol { | |||
| list-style-type: decimal; | |||
| } | |||
| .prose li { | |||
| margin-bottom: 0.5rem; | |||
| } | |||
| .prose blockquote { | |||
| border-left: 4px solid rgb(59 130 246); | |||
| padding-left: 1rem; | |||
| padding-top: 0.5rem; | |||
| padding-bottom: 0.5rem; | |||
| margin: 1rem 0; | |||
| background-color: rgba(39, 39, 42, 0.5); | |||
| border-top-right-radius: 0.5rem; | |||
| border-bottom-right-radius: 0.5rem; | |||
| } | |||
| .prose blockquote p { | |||
| color: rgb(214 211 209); | |||
| font-style: italic; | |||
| margin-bottom: 0; | |||
| } | |||
| .prose code { | |||
| background-color: rgb(39, 39, 42); | |||
| padding: 0.125rem 0.375rem; | |||
| border-radius: 0.25rem; | |||
| font-size: 0.875rem; | |||
| font-family: ui-monospace, monospace; | |||
| color: rgb(147 197 253); | |||
| } | |||
| .prose pre { | |||
| background-color: rgb(39, 39, 42); | |||
| padding: 1rem; | |||
| border-radius: 0.5rem; | |||
| overflow-x: auto; | |||
| margin: 1rem 0; | |||
| } | |||
| .prose pre code { | |||
| background-color: transparent; | |||
| padding: 0; | |||
| font-size: 0.875rem; | |||
| color: rgb(214 211 209); | |||
| } | |||
| .prose img { | |||
| border-radius: 0.5rem; | |||
| margin: 1.5rem 0; | |||
| box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); | |||
| } | |||
| .prose table { | |||
| width: 100%; | |||
| margin: 1.5rem 0; | |||
| border-collapse: collapse; | |||
| table-layout: fixed; | |||
| } | |||
| .prose th { | |||
| background-color: rgb(39, 39, 42); | |||
| color: white; | |||
| font-weight: 500; | |||
| padding: 0.5rem 1rem; | |||
| text-align: left; | |||
| border: 1px solid rgb(63, 63, 70); | |||
| } | |||
| .prose td { | |||
| padding: 0.5rem 1rem; | |||
| border: 1px solid rgb(63, 63, 70); | |||
| } | |||
| .prose tr:nth-child(even) { | |||
| background-color: rgba(39, 39, 42, 0.3); | |||
| } | |||
| .prose hr { | |||
| margin: 2rem 0; | |||
| border-color: rgb(63, 63, 70); | |||
| } | |||
| .prose strong { | |||
| font-weight: 600; | |||
| color: white; | |||
| } | |||
| .prose em { | |||
| font-style: italic; | |||
| color: rgb(214 211 209); | |||
| } | |||
| .prose kbd { | |||
| background-color: rgb(39, 39, 42); | |||
| padding: 0.25rem 0.5rem; | |||
| border-radius: 0.25rem; | |||
| font-size: 0.875rem; | |||
| font-family: ui-monospace, monospace; | |||
| border: 1px solid rgb(63, 63, 70); | |||
| } | |||
| .prose details { | |||
| margin: 1rem 0; | |||
| } | |||
| .prose summary { | |||
| cursor: pointer; | |||
| font-weight: 500; | |||
| color: white; | |||
| } | |||
| .prose details[open] summary { | |||
| margin-bottom: 0.5rem; | |||
| } | |||
+ 0
- 5
nuxt.config.ts
Visa fil
| @@ -52,12 +52,7 @@ export default defineNuxtConfig({ | |||
| // 配置 Markdown | |||
| build: { | |||
| markdown: { | |||
| toc: { | |||
| depth: 3, | |||
| searchDepth: 3, | |||
| }, | |||
| highlight: { | |||
| // Theme used in all color schemes. | |||
| theme: "github-light", | |||
| }, | |||
| }, | |||
+ 5
- 5
pages/index.vue
Visa fil
| @@ -1,7 +1,7 @@ | |||
| <template> | |||
| <div> | |||
| <!-- 轮播图 --> | |||
| <section class="max-w-full mb-12 md:mb-32"> | |||
| <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4"> | |||
| <Swiper | |||
| :modules="[Pagination, Autoplay, EffectCreative]" | |||
| :slides-per-view="1" | |||
| @@ -105,7 +105,7 @@ | |||
| </section> | |||
| <!-- 按用途产品展示 --> | |||
| <section class="max-w-full mb-12 md:mb-32 xl:px-2 lg:px-2 md:px-4 px-4"> | |||
| <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4"> | |||
| <div class="max-w-screen-2xl mx-auto relative"> | |||
| <div | |||
| class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4" | |||
| @@ -267,7 +267,7 @@ | |||
| </section> | |||
| <!-- 按分类栏目展示 --> | |||
| <section class="max-w-full mb-12 md:mb-32 xl:px-2 lg:px-2 md:px-4 px-4"> | |||
| <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4"> | |||
| <div class="max-w-screen-2xl mx-auto relative"> | |||
| <div | |||
| class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4" | |||
| @@ -331,7 +331,7 @@ | |||
| </section> | |||
| <!-- 产品核心展示 --> | |||
| <section class="max-w-full mb-12 md:mb-32 xl:px-2 lg:px-2 md:px-4 px-4"> | |||
| <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4"> | |||
| <div | |||
| class="max-w-screen-2xl mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4" | |||
| > | |||
| @@ -402,7 +402,7 @@ | |||
| </section> | |||
| <!-- 当社の強み --> | |||
| <section class="max-w-full mb-12 md:mb-32 xl:px-2 lg:px-2 md:px-4 px-4"> | |||
| <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4"> | |||
| <div class="max-w-screen-2xl mx-auto relative"> | |||
| <div | |||
| class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4" | |||
+ 155
- 72
pages/products/[id].vue
Visa fil
| @@ -46,7 +46,7 @@ | |||
| <div class="max-w-screen-2xl mx-auto"> | |||
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16"> | |||
| <!-- 左侧产品图片 --> | |||
| <div class="flex flex-col gap-6"> | |||
| <div class="flex flex-col gap-6 lg:sticky lg:top-24 self-start"> | |||
| <!-- 主图展示 --> | |||
| <div | |||
| class="bg-zinc-900 rounded-lg p-8 relative overflow-hidden group aspect-square" | |||
| @@ -103,7 +103,6 @@ | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 缩略图列表 --> | |||
| <div class="flex gap-4 overflow-x-auto pb-2 scrollbar-hide"> | |||
| <div | |||
| @@ -126,7 +125,7 @@ | |||
| <!-- 缩略图加载状态 --> | |||
| <div | |||
| v-if="isThumbnailLoading[index]" | |||
| class="absolute inset-0 flex items-center justify-center bg-zinc-800 rounded-lg" | |||
| class="absolute inset-0 flex items-center justify-center bg-zinc-800/50 rounded-lg z-10" | |||
| > | |||
| <div | |||
| class="animate-spin h-4 w-4 border-2 border-blue-500 rounded-full border-t-transparent" | |||
| @@ -148,7 +147,7 @@ | |||
| class="w-full h-full object-cover transition-all duration-300 rounded-lg" | |||
| :class="{ | |||
| 'opacity-0': isThumbnailLoading[index], | |||
| 'opacity-100': !isThumbnailLoading[index], | |||
| 'opacity-100': !isThumbnailLoading[index] && !thumbnailErrors[index], | |||
| 'group-hover:scale-110': currentImage !== image, | |||
| }" | |||
| @load="handleThumbnailLoad(index)" | |||
| @@ -319,12 +318,17 @@ const imageError = ref(false); | |||
| const thumbnailErrors = ref<boolean[]>([]); | |||
| const preloadImage = ref<string | null>(null); | |||
| // 滚动跟随相关 | |||
| const scrollContainer = ref<HTMLElement | null>(null); | |||
| const isSticky = ref(false); | |||
| interface Product { | |||
| id: string; | |||
| name: string; | |||
| usage: string[]; | |||
| capacities: string[]; | |||
| category: string; | |||
| categoryId: string; | |||
| description: string; | |||
| summary: string; | |||
| image: string; | |||
| @@ -344,30 +348,38 @@ interface Product { | |||
| /** | |||
| * 使用queryCollection获取产品数据 | |||
| */ | |||
| const { data: productContent } = await useAsyncData(`product-${id}`, async () => { | |||
| try { | |||
| // 使用queryCollection从content目录获取数据 | |||
| const content = await queryCollection("content") | |||
| const { data: productContent } = await useAsyncData( | |||
| `product-${id}`, | |||
| async () => { | |||
| try { | |||
| // 使用queryCollection从content目录获取数据 | |||
| const content = await queryCollection("content") | |||
| .where("path", "LIKE", `/products/${locale.value}/${id}`) | |||
| .first(); | |||
| return content; | |||
| } catch (err) { | |||
| console.error("Error fetching product content:", err); | |||
| error.value = new Error(t("products.loadError")); | |||
| return null; | |||
| .first(); | |||
| return content; | |||
| } catch (err) { | |||
| console.error("Error fetching product content:", err); | |||
| error.value = new Error(t("products.loadError")); | |||
| return null; | |||
| } | |||
| } | |||
| }); | |||
| ); | |||
| /** | |||
| * 获取分类信息 | |||
| */ | |||
| const { data: categoryContent } = await useAsyncData( | |||
| `category-${productContent.value?.categoryId}`, | |||
| `category-${productContent.value?.meta?.categoryId}`, | |||
| async () => { | |||
| if (!productContent.value?.categoryId) return null; | |||
| if (!productContent.value?.meta?.categoryId) return null; | |||
| try { | |||
| const content = await queryCollection("content") | |||
| .where("path", "LIKE", `/categories/${locale.value}/${productContent.value.categoryId}`) | |||
| .where( | |||
| "path", | |||
| "LIKE", | |||
| `/categories/${locale.value}/${productContent.value.meta?.categoryId}` | |||
| ) | |||
| .first(); | |||
| return content; | |||
| } catch (err) { | |||
| @@ -376,7 +388,7 @@ const { data: categoryContent } = await useAsyncData( | |||
| } | |||
| }, | |||
| { | |||
| immediate: !!productContent.value?.categoryId | |||
| immediate: !!productContent.value?.meta?.categoryId, | |||
| } | |||
| ); | |||
| @@ -385,31 +397,32 @@ const { data: categoryContent } = await useAsyncData( | |||
| */ | |||
| const product = computed<Product | null>(() => { | |||
| if (!productContent.value) return null; | |||
| // 提取产品数据 | |||
| const meta = productContent.value.meta || {}; | |||
| return { | |||
| id: id, | |||
| id: id, | |||
| name: String(meta.name || productContent.value.title || ""), | |||
| title: String(productContent.value.title || meta.name || ""), | |||
| usage: Array.isArray(meta.usage) ? meta.usage : [], | |||
| capacities: Array.isArray(meta.capacities) ? meta.capacities : [], | |||
| category: categoryContent.value?.title || "", | |||
| categoryId: meta.categoryId || "", | |||
| description: productContent.value.description || "", | |||
| summary: String(meta.summary || ""), | |||
| image: String(meta.image || ""), | |||
| gallery: Array.isArray(meta.gallery) ? meta.gallery : [], | |||
| body: productContent.value.body || "", | |||
| content: productContent.value, | |||
| meta: { | |||
| meta: { | |||
| series: Array.isArray(meta.series) ? meta.series : [], | |||
| name: String(meta.name || ""), | |||
| title: String(productContent.value.title || ""), | |||
| image: String(meta.image || ""), | |||
| summary: String(meta.summary || ""), | |||
| }, | |||
| }; | |||
| }, | |||
| }; | |||
| }); | |||
| /** | |||
| @@ -424,7 +437,7 @@ const { data: relatedProductsContent } = await useAsyncData( | |||
| .where("path", "LIKE", `/products/${locale.value}/%`) | |||
| .all(); | |||
| return content; | |||
| } catch (err) { | |||
| } catch (err) { | |||
| console.error("Error fetching related products:", err); | |||
| return []; | |||
| } | |||
| @@ -436,13 +449,14 @@ const { data: relatedProductsContent } = await useAsyncData( | |||
| */ | |||
| const relatedProducts = computed(() => { | |||
| if (!relatedProductsContent.value || !product.value) return []; | |||
| return relatedProductsContent.value | |||
| .filter((item: any) => item._path !== `/products/${locale.value}/${id}`) | |||
| .map((item: any) => { | |||
| const meta = item.meta || {}; | |||
| console.log(meta); | |||
| return { | |||
| id: item._path?.split('/').pop() || "", | |||
| id: meta.name || "", | |||
| name: meta.name || item.title || "", | |||
| title: item.title || meta.name || "", | |||
| image: meta.image || "", | |||
| @@ -503,24 +517,66 @@ function retryLoadImage() { | |||
| * 重试加载缩略图 | |||
| */ | |||
| function retryLoadThumbnail(index: number) { | |||
| // 确保index在有效范围内 | |||
| if (index < 0) { | |||
| console.error('Invalid thumbnail index:', index); | |||
| return; | |||
| } | |||
| const images = [product.value?.image, ...(product.value?.gallery || [])]; | |||
| const imageUrl = images[index]; | |||
| // 检查图片URL是否有效 | |||
| if (!imageUrl) { | |||
| console.error('Invalid image URL for thumbnail:', index); | |||
| thumbnailErrors.value[index] = true; | |||
| isThumbnailLoading.value[index] = false; | |||
| return; | |||
| } | |||
| console.log('Retrying thumbnail load:', { index, imageUrl }); | |||
| isThumbnailLoading.value[index] = true; | |||
| thumbnailErrors.value[index] = false; | |||
| // 强制重新加载缩略图 | |||
| // 创建新的图片对象并设置超时 | |||
| const img = new Image(); | |||
| const images = [product.value?.image, ...(product.value?.gallery || [])]; | |||
| img.src = images[index] || ""; | |||
| const timeoutId = setTimeout(() => { | |||
| console.error('Thumbnail load timeout:', index); | |||
| handleThumbnailError(index); | |||
| }, 10000); // 10秒超时 | |||
| img.onload = () => { | |||
| clearTimeout(timeoutId); | |||
| console.log('Thumbnail loaded successfully:', index); | |||
| handleThumbnailLoad(index); | |||
| }; | |||
| img.onerror = () => { | |||
| img.onerror = (error) => { | |||
| clearTimeout(timeoutId); | |||
| console.error('Thumbnail load error:', { index, error }); | |||
| handleThumbnailError(index); | |||
| }; | |||
| // 设置跨域属性 | |||
| img.crossOrigin = 'anonymous'; | |||
| // 最后设置src以开始加载 | |||
| img.src = imageUrl; | |||
| } | |||
| /** | |||
| * 处理缩略图加载完成 | |||
| */ | |||
| function handleThumbnailLoad(index: number) { | |||
| console.log('Thumbnail load handler called:', index); | |||
| // 确保数组索引存在 | |||
| if (typeof isThumbnailLoading.value[index] === 'undefined') { | |||
| console.warn('Thumbnail index out of bounds:', index); | |||
| return; | |||
| } | |||
| // 直接修改对应索引的状态 | |||
| isThumbnailLoading.value[index] = false; | |||
| thumbnailErrors.value[index] = false; | |||
| } | |||
| @@ -529,6 +585,14 @@ function handleThumbnailLoad(index: number) { | |||
| * 处理缩略图加载错误 | |||
| */ | |||
| function handleThumbnailError(index: number) { | |||
| console.log('Thumbnail error handler called:', index); | |||
| // 确保数组索引存在 | |||
| if (typeof isThumbnailLoading.value[index] === 'undefined') { | |||
| console.warn('Thumbnail index out of bounds:', index); | |||
| return; | |||
| } | |||
| // 直接修改对应索引的状态 | |||
| isThumbnailLoading.value[index] = false; | |||
| thumbnailErrors.value[index] = true; | |||
| } | |||
| @@ -551,13 +615,53 @@ onMounted(() => { | |||
| if (product.value?.image) { | |||
| currentImage.value = product.value.image; | |||
| } | |||
| // 初始化缩略图加载状态数组 | |||
| const galleryLength = (product.value?.gallery?.length || 0) + 1; // +1是因为主图也算一张 | |||
| isThumbnailLoading.value = Array(galleryLength).fill(true); | |||
| thumbnailErrors.value = Array(galleryLength).fill(false); | |||
| const galleryLength = (product.value?.gallery?.length || 0) + 1; | |||
| isThumbnailLoading.value = new Array(galleryLength).fill(true); | |||
| thumbnailErrors.value = new Array(galleryLength).fill(false); | |||
| // 预加载所有缩略图 | |||
| const images = [product.value?.image, ...(product.value?.gallery || [])]; | |||
| images.forEach((image, index) => { | |||
| if (image) { | |||
| const img = new Image(); | |||
| img.onload = () => handleThumbnailLoad(index); | |||
| img.onerror = () => handleThumbnailError(index); | |||
| img.src = image; | |||
| } | |||
| }); | |||
| console.log('Initialized thumbnail states:', { | |||
| loading: isThumbnailLoading.value, | |||
| errors: thumbnailErrors.value | |||
| }); | |||
| // 添加滚动监听 | |||
| scrollContainer.value = document.querySelector('.max-w-screen-2xl'); | |||
| if (scrollContainer.value) { | |||
| window.addEventListener('scroll', handleScroll, { passive: true }); | |||
| } | |||
| }); | |||
| // 清理滚动监听 | |||
| onUnmounted(() => { | |||
| if (scrollContainer.value) { | |||
| window.removeEventListener('scroll', handleScroll); | |||
| } | |||
| }); | |||
| // 处理滚动事件 | |||
| function handleScroll() { | |||
| if (!scrollContainer.value) return; | |||
| const containerRect = scrollContainer.value.getBoundingClientRect(); | |||
| const scrollTop = window.scrollY || document.documentElement.scrollTop; | |||
| // 当容器顶部距离视窗顶部小于100px时，启用sticky | |||
| isSticky.value = containerRect.top < 100; | |||
| } | |||
| // SEO优化 | |||
| useHead(() => ({ | |||
| title: `${product.value?.name || "产品详情"} - Hanye`, | |||
| @@ -570,7 +674,7 @@ useHead(() => ({ | |||
| })); | |||
| </script> | |||
| <style scoped> | |||
| <style lang="scss" scoped> | |||
| /* 隐藏滚动条但保持滚动功能 */ | |||
| .scrollbar-hide { | |||
| -ms-overflow-style: none; /* IE and Edge */ | |||
| @@ -612,42 +716,21 @@ useHead(() => ({ | |||
| 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |||
| } | |||
| /* 添加 prose 样式 */ | |||
| .prose { | |||
| @apply text-stone-400; | |||
| } | |||
| .prose h1, | |||
| .prose h2, | |||
| .prose h3, | |||
| .prose h4, | |||
| .prose h5, | |||
| .prose h6 { | |||
| @apply text-white font-medium; | |||
| } | |||
| .prose a { | |||
| @apply text-blue-400 hover:text-blue-300; | |||
| } | |||
| .prose ul, | |||
| .prose ol { | |||
| @apply list-disc list-inside; | |||
| } | |||
| .prose blockquote { | |||
| @apply border-l-4 border-zinc-700 pl-4 italic; | |||
| } | |||
| .prose code { | |||
| @apply bg-zinc-800 px-1 py-0.5 rounded; | |||
| } | |||
| .prose pre { | |||
| @apply bg-zinc-800 p-4 rounded-lg overflow-x-auto; | |||
| /* 滚动跟随效果 */ | |||
| .lg\:sticky { | |||
| position: sticky; | |||
| top: 6rem; /* 96px */ | |||
| transition: all 0.3s ease; | |||
| z-index: 10; | |||
| max-height: calc(100vh - 6rem); | |||
| overflow-y: auto; | |||
| } | |||
| .prose img { | |||
| @apply rounded-lg; | |||
| @media (max-width: 1024px) { | |||
| .lg\:sticky { | |||
| position: relative; | |||
| top: 0; | |||
| max-height: none; | |||
| } | |||
| } | |||
| </style> | |||
+ 93
- 14
pages/products/index.vue
Visa fil
| @@ -10,7 +10,7 @@ | |||
| </div> | |||
| <div v-else> | |||
| <div class="w-full mb-8 md:mb-12 lg:mb-16 relative"> | |||
| <div class="w-full mb-8 md:mb-12 lg:mb-16 relative"> | |||
| <div class="absolute top-0 left-0 w-full h-full z-10"> | |||
| <div | |||
| class="max-w-screen-2xl mx-auto h-full flex flex-col justify-center gap-2 md:gap-4 p-4 md:p-6 lg:p-8" | |||
| @@ -54,22 +54,22 @@ | |||
| <div class="max-w-screen-2xl mx-auto"> | |||
| <div class="w-full grid grid-cols-1 md:grid-cols-10 gap-4 md:gap-6 lg:gap-8"> | |||
| <div | |||
| class="col-span-1 md:col-span-2 flex flex-col gap-8 md:gap-12 lg:gap-16 mb-6 md:mb-0" | |||
| class="col-span-1 md:col-span-2 flex flex-col gap-4 sm:gap-6 md:gap-8 lg:gap-10 xl:gap-12 2xl:gap-16 mb-4 sm:mb-6 md:mb-8 lg:mb-10 xl:mb-12 2xl:mb-16" | |||
| > | |||
| <div class="flex flex-col gap-3 md:gap-4"> | |||
| <div class="flex flex-col gap-2 sm:gap-3 md:gap-4 lg:gap-5 xl:gap-6"> | |||
| <div class="flex justify-between items-center"> | |||
| <div class="text-white text-xl md:text-2xl lg:text-3xl font-medium"> | |||
| <div class="text-white text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl font-medium"> | |||
| {{ t("products.product_categories_title") }} | |||
| </div> | |||
| <button | |||
| v-if="selectedCategory" | |||
| @click="clearCategory" | |||
| class="flex items-center gap-1 px-2 py-1 md:px-3 md:py-1.5 text-xs md:text-sm text-white/60 hover:text-white bg-zinc-800/50 hover:bg-zinc-700/50 rounded-lg transition-all duration-300" | |||
| class="flex items-center gap-1 px-1.5 py-0.5 sm:px-2 sm:py-1 md:px-2.5 md:py-1.5 lg:px-3 lg:py-2 text-xs sm:text-sm md:text-base text-white/60 hover:text-white bg-zinc-800/50 hover:bg-zinc-700/50 rounded-lg transition-all duration-300 active:scale-95" | |||
| > | |||
| <span>{{ t("common.clear") }}</span> | |||
| <svg | |||
| xmlns="http://www.w3.org/2000/svg" | |||
| class="h-3 w-3 md:h-4 md:w-4" | |||
| class="h-2.5 w-2.5 sm:h-3 sm:w-3 md:h-4 md:w-4" | |||
| viewBox="0 0 20 20" | |||
| fill="currentColor" | |||
| > | |||
| @@ -81,12 +81,12 @@ | |||
| </svg> | |||
| </button> | |||
| </div> | |||
| <div class="flex flex-col gap-2 md:gap-3 w-fit"> | |||
| <div class="flex flex-row sm:flex-col gap-1.5 sm:gap-2 md:gap-2.5 lg:gap-3 xl:gap-4 w-full sm:w-fit overflow-x-auto sm:overflow-x-visible pb-2 sm:pb-0"> | |||
| <div | |||
| v-for="category in categories" | |||
| :key="category" | |||
| @click="handleCategoryFilter(category)" | |||
| class="opacity-80 select-none text-white text-sm md:text-base font-normal cursor-pointer hover:opacity-100 transition-all duration-300 px-3 py-1.5 md:px-4 md:py-2 rounded-lg inline-block" | |||
| class="opacity-80 select-none text-white text-xs sm:text-sm md:text-base lg:text-lg font-normal cursor-pointer hover:opacity-100 transition-all duration-300 px-2 py-1 sm:px-2.5 sm:py-1.5 md:px-3 md:py-2 lg:px-4 lg:py-2.5 rounded-lg inline-block active:scale-95 whitespace-nowrap" | |||
| :class="{ | |||
| 'opacity-100 font-bold bg-gradient-to-r from-blue-700 to-blue-400 text-white border-0 shadow-lg scale-105 transition-all duration-300': | |||
| selectedCategory === category, | |||
| @@ -98,20 +98,20 @@ | |||
| </div> | |||
| </div> | |||
| <div class="flex flex-col gap-3 md:gap-4"> | |||
| <div class="flex flex-col gap-2 sm:gap-3 md:gap-4 lg:gap-5 xl:gap-6"> | |||
| <div class="flex justify-between items-center"> | |||
| <div class="text-white text-xl md:text-2xl lg:text-3xl font-medium"> | |||
| <div class="text-white text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl font-medium"> | |||
| {{ t("products.product_categories_usage") }} | |||
| </div> | |||
| <button | |||
| v-if="selectedUsage" | |||
| @click="clearUsage" | |||
| class="flex items-center gap-1 px-2 py-1 md:px-3 md:py-1.5 text-xs md:text-sm text-white/60 hover:text-white bg-zinc-800/50 hover:bg-zinc-700/50 rounded-lg transition-all duration-300" | |||
| class="flex items-center gap-1 px-1.5 py-0.5 sm:px-2 sm:py-1 md:px-2.5 md:py-1.5 lg:px-3 lg:py-2 text-xs sm:text-sm md:text-base text-white/60 hover:text-white bg-zinc-800/50 hover:bg-zinc-700/50 rounded-lg transition-all duration-300 active:scale-95" | |||
| > | |||
| <span>{{ t("common.clear") }}</span> | |||
| <svg | |||
| xmlns="http://www.w3.org/2000/svg" | |||
| class="h-3 w-3 md:h-4 md:w-4" | |||
| class="h-2.5 w-2.5 sm:h-3 sm:w-3 md:h-4 md:w-4" | |||
| viewBox="0 0 20 20" | |||
| fill="currentColor" | |||
| > | |||
| @@ -123,12 +123,12 @@ | |||
| </svg> | |||
| </button> | |||
| </div> | |||
| <div class="flex flex-col gap-2 md:gap-3 w-fit"> | |||
| <div class="flex flex-row sm:flex-col gap-1.5 sm:gap-2 md:gap-2.5 lg:gap-3 xl:gap-4 w-full sm:w-fit overflow-x-auto sm:overflow-x-visible pb-2 sm:pb-0"> | |||
| <div | |||
| v-for="usage in usages" | |||
| :key="usage" | |||
| @click="handleUsageFilter(usage)" | |||
| class="opacity-80 select-none text-white text-sm md:text-base font-normal cursor-pointer hover:opacity-100 transition-all duration-300 px-3 py-1.5 md:px-4 md:py-2 rounded-lg inline-block" | |||
| class="opacity-80 select-none text-white text-xs sm:text-sm md:text-base lg:text-lg font-normal cursor-pointer hover:opacity-100 transition-all duration-300 px-2 py-1 sm:px-2.5 sm:py-1.5 md:px-3 md:py-2 lg:px-4 lg:py-2.5 rounded-lg inline-block active:scale-95 whitespace-nowrap" | |||
| :class="{ | |||
| 'opacity-100 font-bold bg-gradient-to-r from-blue-700 to-blue-400 text-white border-0 shadow-lg scale-105 transition-all duration-300': | |||
| selectedUsage === usage, | |||
| @@ -875,4 +875,83 @@ button:hover { | |||
| padding: 1.5rem; | |||
| } | |||
| } | |||
| /* 导航栏样式优化 */ | |||
| .bg-zinc-900\/50 { | |||
| backdrop-filter: blur(8px); | |||
| -webkit-backdrop-filter: blur(8px); | |||
| } | |||
| /* 导航项悬停效果 */ | |||
| .group:hover { | |||
| transform: translateX(4px); | |||
| } | |||
| /* 清除按钮动画 */ | |||
| button { | |||
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |||
| } | |||
| button:hover { | |||
| transform: translateY(-2px); | |||
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |||
| } | |||
| button:active { | |||
| transform: translateY(0); | |||
| } | |||
| /* 响应式调整 */ | |||
| @media (max-width: 768px) { | |||
| .bg-zinc-900\/50 { | |||
| padding: 1rem; | |||
| } | |||
| .group:hover { | |||
| transform: translateX(2px); | |||
| } | |||
| } | |||
| @media (min-width: 768px) { | |||
| .bg-zinc-900\/50 { | |||
| padding: 1.5rem; | |||
| } | |||
| } | |||
| @media (min-width: 1024px) { | |||
| .bg-zinc-900\/50 { | |||
| padding: 2rem; | |||
| } | |||
| } | |||
| /* 优化点击反馈 */ | |||
| .active\:scale-95:active { | |||
| transform: scale(0.95); | |||
| } | |||
| /* 优化过渡动画 */ | |||
| .transition-all { | |||
| transition-property: all; | |||
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |||
| transition-duration: 150ms; | |||
| } | |||
| /* 优化横向滚动 */ | |||
| .overflow-x-auto { | |||
| -webkit-overflow-scrolling: touch; | |||
| scrollbar-width: none; /* Firefox */ | |||
| -ms-overflow-style: none; /* IE and Edge */ | |||
| } | |||
| .overflow-x-auto::-webkit-scrollbar { | |||
| display: none; /* Chrome, Safari, Opera */ | |||
| } | |||
| /* 响应式断点说明： | |||
| sm: 640px | |||
| md: 768px | |||
| lg: 1024px | |||
| xl: 1280px | |||
| 2xl: 1536px | |||
| */ | |||
| </style> | |||
+ 81
- 82
public/data/products-zh.json
Visa fil
| @@ -7,25 +7,23 @@ | |||
| "移动数据传输/备份" | |||
| ], | |||
| "category": 5, | |||
| "image": "/images/products/cr-201bk.webp", | |||
| "description": "USB 3.0 多功能读卡器，支持SD/microSD卡", | |||
| "summary": "高速USB 3.0读卡器，支持多种存储卡格式，便携易用", | |||
| "image": "/images/products/Card Reader/CR-201BK/cr-201bk.webp", | |||
| "description": "", | |||
| "summary": "适用于具有OTG功能的PC和平板电脑、安卓智能手机", | |||
| "series": [ | |||
| "Card Reader" | |||
| ], | |||
| "gallery": [ | |||
| "/images/products/cr-201bk-1.webp", | |||
| "/images/products/cr-201bk-2.webp", | |||
| "/images/products/cr-201bk-3.webp" | |||
| "/images/products/Card Reader/CR-201BK/cr-201bk-1.webp" | |||
| ], | |||
| "capacities": [ | |||
| "N/A" | |||
| "" | |||
| ] | |||
| }, | |||
| { | |||
| "id": "DDR3-SODIMM-8GB-1.35V", | |||
| "title": "DDR3-SODIMM 8GB 1.35V", | |||
| "name": "DDR3-SODIMM 8GB 1.35V", | |||
| "title": "DDR3-SODIMM-8GB-1.35V", | |||
| "name": "DDR3-SODIMM-8GB-1.35V", | |||
| "usage": [ | |||
| "内存升级/性能提升" | |||
| ], | |||
| @@ -45,8 +43,8 @@ | |||
| }, | |||
| { | |||
| "id": "DDR3-SODIMM-8GB-1.5V", | |||
| "title": "DDR3-SODIMM 8GB 1.5V", | |||
| "name": "DDR3-SODIMM 8GB 1.5V", | |||
| "title": "DDR3-SODIMM-8GB-1.5V", | |||
| "name": "DDR3-SODIMM-8GB-1.5V", | |||
| "usage": [ | |||
| "内存升级/性能提升" | |||
| ], | |||
| @@ -66,8 +64,8 @@ | |||
| }, | |||
| { | |||
| "id": "DDR3-UDIMM-8GB-1.5V", | |||
| "title": "DDR3-UDIMM 8GB 1.5V", | |||
| "name": "DDR3-UDIMM 8GB 1.5V", | |||
| "title": "DDR3-UDIMM-8GB-1.5V", | |||
| "name": "DDR3-UDIMM-8GB-1.5V", | |||
| "usage": [ | |||
| "内存升级/性能提升" | |||
| ], | |||
| @@ -323,20 +321,16 @@ | |||
| "移动数据传输/备份" | |||
| ], | |||
| "category": 6, | |||
| "image": "/images/products/hse-m20grc01.webp", | |||
| "image": "/images/products/M.2 SSD Enclosure/HSE-M20GRC01/hse-m20grc01.webp", | |||
| "description": "M.2 SSD外接硬盘盒，支持SATA协议", | |||
| "summary": "高速USB 3.0 M.2 SATA SSD外接盒，轻巧便携，支持即插即用", | |||
| "summary": "这是一款可将M.2 NVMe/SATA SSD变为外置硬盘的便携盒。", | |||
| "series": [ | |||
| "M.2 SSD Enclosure" | |||
| ], | |||
| "gallery": [ | |||
| "/images/products/hse-m20grc01-1.webp", | |||
| "/images/products/hse-m20grc01-2.webp", | |||
| "/images/products/hse-m20grc01-3.webp" | |||
| "/images/products/M.2 SSD Enclosure/HSE-M20GRC01/hse-m20grc01-1.webp" | |||
| ], | |||
| "capacities": [ | |||
| "N/A" | |||
| ] | |||
| "capacities": [] | |||
| }, | |||
| { | |||
| "id": "HSE-M40GRC01", | |||
| @@ -346,43 +340,53 @@ | |||
| "移动数据传输/备份" | |||
| ], | |||
| "category": 6, | |||
| "image": "/images/products/hse-m40grc01.webp", | |||
| "image": "/images/products/M.2 SSD Enclosure/HSE-M40GRC01/hse-m40grc01.webp", | |||
| "description": "M.2 SSD外接硬盘盒，支持NVMe协议", | |||
| "summary": "高速USB 3.1 M.2 NVMe SSD外接盒，轻巧便携，支持即插即用", | |||
| "summary": "支持的SSD尺寸为2230/2242/2260/2280，并与多种操作系统兼容。", | |||
| "series": [ | |||
| "M.2 SSD Enclosure" | |||
| ], | |||
| "gallery": [ | |||
| "/images/products/hse-m40grc01-1.webp", | |||
| "/images/products/hse-m40grc01-2.webp", | |||
| "/images/products/hse-m40grc01-3.webp" | |||
| "/images/products/M.2 SSD Enclosure/HSE-M40GRC01/hse-m40grc01-1.webp" | |||
| ], | |||
| "capacities": [ | |||
| "N/A" | |||
| ] | |||
| "capacities": [] | |||
| }, | |||
| { | |||
| "id": "HSE-M4IN1GRC01", | |||
| "title": "HSE-M4IN1GRC01", | |||
| "name": "HSE-M4IN1GRC01", | |||
| "usage": [], | |||
| "category": "", | |||
| "usage": [ | |||
| "移动数据传输/备份" | |||
| ], | |||
| "category": 6, | |||
| "image": "/images/products/M.2 SSD Enclosure/HSE-M4IN1GRC01/hse-m4in1grc01.webp", | |||
| "description": "", | |||
| "summary": "", | |||
| "series": [], | |||
| "gallery": [], | |||
| "summary": "通过搭载“USB-C端口x1”、“USB-A端口x2”，可以将便携式HDD、U盘、鼠标、键盘通过一根USB Type-C to Type-C数据线与PC连接！", | |||
| "series": [ | |||
| "M.2 SSD Enclosure" | |||
| ], | |||
| "gallery": [ | |||
| "/images/products/M.2 SSD Enclosure/HSE-M4IN1GRC01/hse-m4in1grc01-1.webp" | |||
| ], | |||
| "capacities": [] | |||
| }, | |||
| { | |||
| "id": "HSE-M6IN1GRC01", | |||
| "title": "HSE-M6IN1GRC01", | |||
| "name": "HSE-M6IN1GRC01", | |||
| "usage": [], | |||
| "category": "", | |||
| "usage": [ | |||
| "移动数据传输/备份" | |||
| ], | |||
| "category": 6, | |||
| "image": "/images/products/M.2 SSD Enclosure/HSE-M6IN1GRC01/hse-m6in1grc01.webp", | |||
| "description": "", | |||
| "summary": "", | |||
| "series": [], | |||
| "gallery": [], | |||
| "summary": "M.2 SSD 盒支持M.2 NVMe M Key/B+M Key 和 M.2 SATA B+M Key SSD (基于SATA)，最大支持4TB的SSD容量", | |||
| "series": [ | |||
| "M.2 SSD Enclosure" | |||
| ], | |||
| "gallery": [ | |||
| "/images/products/M.2 SSD Enclosure/HSE-M6IN1GRC01/hse-m6in1grc01-1.webp" | |||
| ], | |||
| "capacities": [] | |||
| }, | |||
| { | |||
| @@ -678,20 +682,16 @@ | |||
| "移动数据传输/备份" | |||
| ], | |||
| "category": 5, | |||
| "image": "/images/products/pe-cr003.webp", | |||
| "description": "USB 3.0 多功能读卡器，支持SD/microSD/CF/XQD卡", | |||
| "summary": "高速USB 3.0读卡器，支持多种专业存储卡格式，专业摄影用户首选", | |||
| "image": "/images/products/Card Reader/PE-CR003/pe-cr003.webp", | |||
| "description": "", | |||
| "summary": "连接口采用USB-A和USB-C两种设计，搭载SD卡、microSD卡和USB2.0三个端口，支持多种媒体", | |||
| "series": [ | |||
| "Card Reader" | |||
| ], | |||
| "gallery": [ | |||
| "/images/products/pe-cr003-1.webp", | |||
| "/images/products/pe-cr003-2.webp", | |||
| "/images/products/pe-cr003-3.webp" | |||
| "/images/products/Card Reader/PE-CR003/pe-cr003-1.webp" | |||
| ], | |||
| "capacities": [ | |||
| "N/A" | |||
| ] | |||
| "capacities": [] | |||
| }, | |||
| { | |||
| "id": "PE-CR405", | |||
| @@ -701,20 +701,16 @@ | |||
| "移动数据传输/备份" | |||
| ], | |||
| "category": 5, | |||
| "image": "/images/products/pe-cr405.webp", | |||
| "description": "USB 3.0 多功能读卡器，支持SD/microSD/CF卡", | |||
| "summary": "高速USB 3.0读卡器，支持多种存储卡格式，专业摄影用户首选", | |||
| "image": "/images/products/Card Reader/PE-CR405/pe-cr405.webp", | |||
| "description": "", | |||
| "summary": "可同时读写microSD、SD及CFexpress Type A/Type B三种存储卡，大幅提升工作效率", | |||
| "series": [ | |||
| "Card Reader" | |||
| ], | |||
| "gallery": [ | |||
| "/images/products/pe-cr405-1.webp", | |||
| "/images/products/pe-cr405-2.webp", | |||
| "/images/products/pe-cr405-3.webp" | |||
| "/images/products/Card Reader/PE-CR405/pe-cr405-1.webp" | |||
| ], | |||
| "capacities": [ | |||
| "N/A" | |||
| ] | |||
| "capacities": [] | |||
| }, | |||
| { | |||
| "id": "Q60-1TST3", | |||
| @@ -904,7 +900,7 @@ | |||
| "category": 4, | |||
| "image": "/images/products/DDR/SD4-08GB-2666-1R8/sd4-08gb-2666-1r8.webp", | |||
| "description": "", | |||
| "summary": "高性能DDR4笔记本内存，提供稳定可靠的系统性能提升", | |||
| "summary": "使用DDR4内存升级PC的RAM，可以缩短应用程序加载时间，并提高响应速度", | |||
| "series": [ | |||
| "DDR4-SODIMM" | |||
| ], | |||
| @@ -924,8 +920,8 @@ | |||
| ], | |||
| "category": 4, | |||
| "image": "/images/products/DDR/SD4-08GB-3200-1R8/sd4-08gb-3200-1r8.webp", | |||
| "description": "DDR4 3200MHz 笔记本内存条，单面颗粒", | |||
| "summary": "高性能DDR4笔记本内存，提供稳定可靠的系统性能提升", | |||
| "description": "", | |||
| "summary": "使用DDR4内存升级PC的RAM，可以缩短应用程序加载时间，并提高响应速度", | |||
| "series": [ | |||
| "DDR4-SODIMM" | |||
| ], | |||
| @@ -945,8 +941,8 @@ | |||
| ], | |||
| "category": 4, | |||
| "image": "/images/products/DDR/SD4-16GB-2666-2R8/sd4-16gb-2666-2r8.webp", | |||
| "description": "DDR4 2666MHz 笔记本内存条，双面颗粒", | |||
| "summary": "高性能DDR4笔记本内存，提供稳定可靠的系统性能提升", | |||
| "description": "", | |||
| "summary": "使用DDR4内存升级PC的RAM，可以缩短应用程序加载时间，并提高响应速度", | |||
| "series": [ | |||
| "DDR4-SODIMM" | |||
| ], | |||
| @@ -967,7 +963,7 @@ | |||
| "category": 4, | |||
| "image": "/images/products/DDR/SD4-16GB-3200-2R8/sd4-16gb-3200-2r8.webp", | |||
| "description": "DDR4 3200MHz 笔记本内存条，双面颗粒", | |||
| "summary": "高性能DDR4笔记本内存，提供稳定可靠的系统性能提升", | |||
| "summary": "使用DDR4内存升级PC的RAM，可以缩短应用程序加载时间，并提高响应速度", | |||
| "series": [ | |||
| "DDR4-SODIMM" | |||
| ], | |||
| @@ -988,7 +984,7 @@ | |||
| "category": 4, | |||
| "image": "/images/products/DDR/SD5-16GB-5600-1R8/sd5-16gb-5600-1r8.webp", | |||
| "description": "", | |||
| "summary": "高性能DDR5笔记本内存，提供稳定可靠的系统性能提升", | |||
| "summary": "使用DDR4内存升级PC的RAM，可以缩短应用程序加载时间，并提高响应速度", | |||
| "series": [ | |||
| "DDR5-SODIMM" | |||
| ], | |||
| @@ -1180,13 +1176,22 @@ | |||
| "id": "UD4-08GB-2666-1R8", | |||
| "title": "UD4-08GB-2666-1R8", | |||
| "name": "UD4-08GB-2666-1R8", | |||
| "usage": [], | |||
| "category": "", | |||
| "usage": [ | |||
| "内存升级/性能提升" | |||
| ], | |||
| "category": 4, | |||
| "image": "/images/products/DDR/UD4-08GB-2666-1R8/ud4-08gb-2666-1r8.webp", | |||
| "description": "", | |||
| "summary": "", | |||
| "series": [], | |||
| "gallery": [], | |||
| "capacities": [] | |||
| "summary": "高性能DDR4台式机内存，提供稳定可靠的系统性能提升", | |||
| "series": [ | |||
| "DDR4-UDIMM" | |||
| ], | |||
| "gallery": [ | |||
| "/images/products/DDR/UD4-08GB-2666-1R8/ud4-08gb-2666-1r8-1.webp" | |||
| ], | |||
| "capacities": [ | |||
| "8GB" | |||
| ] | |||
| }, | |||
| { | |||
| "id": "UD4-08GB-3200-1R8", | |||
| @@ -1196,16 +1201,14 @@ | |||
| "内存升级/性能提升" | |||
| ], | |||
| "category": 4, | |||
| "image": "/images/products/ud4-08gb-3200-1r8.webp", | |||
| "image": "/images/products/DDR/UD4-08GB-3200-1R8/ud4-08gb-3200-1r8.webp", | |||
| "description": "DDR4 3200MHz 台式机内存条，单面颗粒", | |||
| "summary": "高性能DDR4台式机内存，提供稳定可靠的系统性能提升", | |||
| "series": [ | |||
| "DDR4-UDIMM" | |||
| ], | |||
| "gallery": [ | |||
| "/images/products/ud4-08gb-3200-1r8-1.webp", | |||
| "/images/products/ud4-08gb-3200-1r8-2.webp", | |||
| "/images/products/ud4-08gb-3200-1r8-3.webp" | |||
| "/images/products/DDR/UD4-08GB-3200-1R8/ud4-08gb-3200-1r8-1.webp" | |||
| ], | |||
| "capacities": [ | |||
| "8GB" | |||
| @@ -1219,16 +1222,14 @@ | |||
| "内存升级/性能提升" | |||
| ], | |||
| "category": 4, | |||
| "image": "/images/products/ud4-16gb-2666-2r8.webp", | |||
| "image": "/images/products/DDR/UD4-16GB-2666-2R8/ud4-16gb-2666-2r8.webp", | |||
| "description": "DDR4 2666MHz 台式机内存条，双面颗粒", | |||
| "summary": "高性能DDR4台式机内存，提供稳定可靠的系统性能提升", | |||
| "series": [ | |||
| "DDR4-UDIMM" | |||
| ], | |||
| "gallery": [ | |||
| "/images/products/ud4-16gb-2666-2r8-1.webp", | |||
| "/images/products/ud4-16gb-2666-2r8-2.webp", | |||
| "/images/products/ud4-16gb-2666-2r8-3.webp" | |||
| "/images/products/DDR/UUD4-16GB-2666-2R8/ud4-16gb-2666-2r8-1.webp" | |||
| ], | |||
| "capacities": [ | |||
| "16GB" | |||
| @@ -1242,16 +1243,14 @@ | |||
| "内存升级/性能提升" | |||
| ], | |||
| "category": 4, | |||
| "image": "/images/products/ud4-16gb-3200-2r8.webp", | |||
| "image": "/images/products/DDR/UD4-16GB-3200-2R8/ud4-16gb-3200-2r8.webp", | |||
| "description": "DDR4 3200MHz 台式机内存条，双面颗粒", | |||
| "summary": "高性能DDR4台式机内存，提供稳定可靠的系统性能提升", | |||
| "series": [ | |||
| "DDR4-UDIMM" | |||
| ], | |||
| "gallery": [ | |||
| "/images/products/ud4-16gb-3200-2r8-1.webp", | |||
| "/images/products/ud4-16gb-3200-2r8-2.webp", | |||
| "/images/products/ud4-16gb-3200-2r8-3.webp" | |||
| "/images/products/DDR/UD4-16GB-3200-2R8/ud4-16gb-3200-2r8-1.webp" | |||
| ], | |||
| "capacities": [ | |||
| "16GB" | |||
Laddar…