From 929c89b28ca3993b0eb564a907b4787c61a5f183 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A6=86=E9=92=B1=E8=90=BD=E5=B0=BD=E6=A7=BF=E8=8A=B1?= =?UTF-8?q?=E7=A8=80?= <2675540038@qq.com> Date: Tue, 29 Apr 2025 15:03:37 +0800 Subject: [PATCH] =?UTF-8?q?1.=E7=BA=B3=E5=A8=81=E6=A0=BC=E7=89=B9=E5=AE=98?= =?UTF-8?q?=E7=BD=91=E5=AE=A2=E6=88=B7=E5=BB=BA=E8=AE=AE=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=202.=E7=BA=B3=E5=A8=81=E6=A0=BC=E7=89=B9=E5=AE=98=E7=BD=91?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=95=86=E5=93=81=E5=88=86=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index_products.vue | 122 ++++++-- pages/info/[id].vue | 11 +- pages/product/[id].vue | 618 +++++++++++++++++++++------------------ 3 files changed, 432 insertions(+), 319 deletions(-) diff --git a/pages/index_products.vue b/pages/index_products.vue index 53ce03d..930658a 100644 --- a/pages/index_products.vue +++ b/pages/index_products.vue @@ -64,24 +64,38 @@ --> -
-
- - News thumbnail -
-

- {{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }} -

-
- +
+
+
+ {{ getCurrentLanguage() == 'zh' ? item.name : item.en_name }} +
+
+
+ +
+
+ + News thumbnail +
+

+ {{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }} +

+
+ +
+
+ +
+
+ {{ getCurrentLanguage() == 'zh' ? item.name : item.en_name }} +
+
- -
- @@ -94,6 +108,7 @@ import { ref, computed, onMounted } from 'vue' import { useI18n } from 'vue-i18n' import $api from '@/service/webRequest' +import { NSpin } from 'naive-ui' // 分页相关变量 const currentPage = ref(1) @@ -106,7 +121,8 @@ const allProsList = ref([]) const isMobile = ref(false) onMounted(() => { isMobile.value = window.innerWidth < 768 - getNewsList() + LoadingShow.value = true; + getTypeList(); }) const topImg = ref('') @@ -114,12 +130,13 @@ const topImg = ref('') // 获取分页新闻列表 const getNewsList = () => { - $api.get("/api/websiteproduct/list", { params: { page: currentPage.value, limit: itemsPerPage } }) + $api.get("/api/websiteproduct/list", { params: { page: currentPage.value, limit: itemsPerPage, cid: typeIs.value } }) .then((res: any) => { allProsList.value = res.data.data.list - // 获取总条数用于分页 - totalItems.value = res.data.data.count + // 获取总条数用于分页 + totalItems.value = res.data.data.count; + LoadingShow.value = false; }) .catch((err) => { console.error("获取新闻列表失败:", err) @@ -176,7 +193,7 @@ const formatDate = (dateStr: string) => { // 从日期字符串中提取月和日 const dateParts = dateStr.split(' ')[0].split('-') if (dateParts.length < 3) return '' - + const month = dateParts[1] const day = dateParts[2] return `${month}/${day}` @@ -185,6 +202,26 @@ const formatDate = (dateStr: string) => { const getCurrentLanguage = () => { return locale.value } +const LoadingShow = ref(false); +const typeList = ref([]); +const typeIs = ref(0); +const getTypeList = () => { + + $api.get("/api/websiteproduct/cate?page=1&limit=100") + .then((res: any) => { + typeList.value = res.data.data.list + typeIs.value = res.data.data.list[0].id + getNewsList() + }) + .catch((err) => { + console.error("获取新闻列表失败:", err) + }) +} +const openType = (item: any) => { + LoadingShow.value = true; + typeIs.value = item.id; + getNewsList(); +} diff --git a/pages/info/[id].vue b/pages/info/[id].vue index df8b694..e679d3c 100644 --- a/pages/info/[id].vue +++ b/pages/info/[id].vue @@ -4,19 +4,19 @@ backgroundSize: 'cover', }">>
-
-

+
+

{{locale == 'zh' ? info.title : info.en_title }}

-
+

{{ info.add_time }}

-

+

@@ -55,7 +55,7 @@ const getInfo=()=>{ .aboutimgBg { height: 300px; @media (min-width: 768px) { - height: 600px; + height: 554px; } } .banDes { @@ -97,7 +97,6 @@ const getInfo=()=>{ @media (min-width: 768px) { height: 300px; - margin-top: -308px; margin-left: 64px; } } diff --git a/pages/product/[id].vue b/pages/product/[id].vue index 78568b8..36882d7 100644 --- a/pages/product/[id].vue +++ b/pages/product/[id].vue @@ -1,301 +1,349 @@ - - - - - \ No newline at end of file + + background: #A8CBFF; + display: block; + margin-top: -20px; +} + +.ellipsis-3 { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.newsBox1 { + margin-top: 20px; + + @media (min-width: 768px) { + margin-top: 50px; + } +} + +.newsBox2 { + transition: all 0.3s ease; +} + +.newsBox2:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); +} + +.newsSpan1 { + color: #333; +} + +.newsSpan2 { + color: #1C1C1C; + letter-spacing: 2px; + + @media (min-width: 768px) { + letter-spacing: 5px; + padding-left: 10px; + } + + padding-left: 5px; +} + +.newsbs2 { + position: absolute; + margin-left: 81px; + border-right: 2px solid #1C1C1C; + display: inline-block; + height: 300px; + + @media (min-width: 768px) { + height: 344px; + margin-top: 10px; + } +} + +.t6::after { + content: ''; + width: 100px; + height: 15px; + + @media (min-width: 768px) { + width: 175px; + height: 20px; + margin-top: -18px; + } + + background: #A3C8FF; + display: block; + margin-top: -14px; +} + +.t7::after { + content: ''; + width: 2px; + height: 16px; + + @media (min-width: 768px) { + width: 3px; + height: 21px; + top: 20px; + } + + background: #000000; + display: block; + position: absolute; + right: 0; + top: 15px; +} + +.newsTit2 h2::after { + content: ''; + margin-top: -20px; + width: 120px; + height: 20px; + + @media (min-width: 768px) { + margin-top: -29px; + width: 200px; + height: 31px; + margin-left: 2px; + } + + background: #A8CBFF; + display: block; + margin-left: 0; +} + +.newsBox2di { + width: 100%; + border-top: 1px solid #1C1C1C; + + @media (min-width: 768px) { + width: 473px; + border-top: 2px solid #1C1C1C; + margin-left: 0px; + margin-top: 0px; + } +} +