1.纳威格特官网客户建议修改
2.纳威格特官网增加商品分类
This commit is contained in:
parent
f8e7a386ab
commit
929c89b28c
@ -64,24 +64,38 @@
|
||||
</div> -->
|
||||
|
||||
<!-- News list section -->
|
||||
<div class="container mx-auto px-4 py-8 md:py-16 flex flex-wrap">
|
||||
<div v-for="(news, index) in allProsList" :key="'all-'+index" class="newsBox2 min-h-[200px] md:min-h-[300px] h-auto md:w-1/5 md:h-[330px] flex flex-col md:flex-row flex-wrap items-start md:items-center p-4 md:p-[20px] mb-8 md:mb-12 border-b border-gray-200">
|
||||
<NuxtLink :to="'/product/' + news.id" target="_blank" class="text-[#0c1923] md:h-[300px] flex flex-col ">
|
||||
<img :src="news.image" class="news2g10 w-full h-full md:min-h-[300px] object-cover rounded-lg" alt="News thumbnail" />
|
||||
<div class="newsTit2 w-full pr-0 md:pr-6 mb-4 md:mb-0">
|
||||
<h4 class="text-gray-600 text-base md:text-lg line-clamp-2 text-center">
|
||||
{{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }}
|
||||
</h4>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<div class="container mx-auto">
|
||||
<div v-if="isMobile" class="flex justify-center">
|
||||
<div v-for="item in typeList" @click="openType(item)" :class="typeIs == item.id ? 'type act' : 'type'">
|
||||
{{ getCurrentLanguage() == 'zh' ? item.name : item.en_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex px-4 py-8 md:py-16 ">
|
||||
<n-spin stroke="#214ADB" :show="LoadingShow" :style="{ width: isMobile ? '100%' : '90%' }">
|
||||
<div class="flex flex-wrap" style="width: 100%;">
|
||||
<div v-for="(news, index) in allProsList" :key="'all-' + index"
|
||||
class="newsBox2 min-h-[200px] md:min-h-[300px] h-auto md:w-1/5 md:h-[330px] flex flex-col md:flex-row flex-wrap items-start md:items-center p-4 md:p-[20px] md:mb-12">
|
||||
<NuxtLink :to="'/product/' + news.id" target="_blank" class="text-[#0c1923] md:h-[300px] flex flex-col ">
|
||||
<img :src="news.image" class="news2g10 w-full h-full md:min-h-[300px] object-cover rounded-lg"
|
||||
alt="News thumbnail" />
|
||||
<div class="newsTit2 w-full pr-0 md:pr-6 mb-4 md:mb-0">
|
||||
<h4 class="text-gray-600 text-base md:text-lg line-clamp-2 text-center">
|
||||
{{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }}
|
||||
</h4>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</n-spin>
|
||||
<div v-if="!isMobile" style="text-align: center;">
|
||||
<div v-for="item in typeList" @click="openType(item)" :class="typeIs == item.id ? 'type act' : 'type'">
|
||||
{{ getCurrentLanguage() == 'zh' ? item.name : item.en_name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div id="pages" class="text-center mt-6 md:mt-8 md:w-full">
|
||||
<button
|
||||
v-for="page in totalPages"
|
||||
:key="page"
|
||||
@click="changePage(page)"
|
||||
<div id="pages" class="text-center md:w-full pb-[50px]">
|
||||
<button v-for="page in totalPages" :key="page" @click="changePage(page)"
|
||||
:class="['mx-1 px-3 py-1 md:px-4 md:py-2 text-sm md:text-base rounded', currentPage === page ? 'bg-blue-500 text-white' : 'bg-gray-200 hover:bg-gray-300']">
|
||||
{{ page }}
|
||||
</button>
|
||||
@ -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();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -192,13 +229,8 @@ const getCurrentLanguage = () => {
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
padding-top:4rem;
|
||||
@media (min-width: 768px) {
|
||||
max-width: 1310px;
|
||||
padding-top: 90px;
|
||||
}
|
||||
padding-top:5.5rem;
|
||||
}
|
||||
|
||||
.aboutimgBg {
|
||||
background-image: url(/images/newsgroup3.png);
|
||||
background-size: cover;
|
||||
@ -206,7 +238,7 @@ const getCurrentLanguage = () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
height: 600px;
|
||||
}
|
||||
@ -216,12 +248,14 @@ const getCurrentLanguage = () => {
|
||||
content: '';
|
||||
width: 120px;
|
||||
height: 20px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
margin: 0 auto;
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
background: #A8CBFF;
|
||||
display: block;
|
||||
margin-top: -20px;
|
||||
@ -237,6 +271,7 @@ const getCurrentLanguage = () => {
|
||||
|
||||
.newsBox1 {
|
||||
margin-top: 20px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-top: 50px;
|
||||
}
|
||||
@ -258,10 +293,12 @@ const getCurrentLanguage = () => {
|
||||
.newsSpan2 {
|
||||
color: #1C1C1C;
|
||||
letter-spacing: 2px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
letter-spacing: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
@ -271,6 +308,7 @@ const getCurrentLanguage = () => {
|
||||
border-right: 2px solid #1C1C1C;
|
||||
display: inline-block;
|
||||
height: 300px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
height: 344px;
|
||||
margin-top: 10px;
|
||||
@ -281,11 +319,13 @@ const getCurrentLanguage = () => {
|
||||
content: '';
|
||||
width: 100px;
|
||||
height: 15px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 175px;
|
||||
height: 20px;
|
||||
margin-top: -18px;
|
||||
}
|
||||
|
||||
background: #A3C8FF;
|
||||
display: block;
|
||||
margin-top: -14px;
|
||||
@ -295,11 +335,13 @@ const getCurrentLanguage = () => {
|
||||
content: '';
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 3px;
|
||||
height: 21px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
background: #000000;
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -312,12 +354,14 @@ const getCurrentLanguage = () => {
|
||||
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;
|
||||
@ -326,6 +370,7 @@ const getCurrentLanguage = () => {
|
||||
.newsBox2di {
|
||||
width: 100%;
|
||||
border-top: 1px solid #1C1C1C;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 473px;
|
||||
border-top: 2px solid #1C1C1C;
|
||||
@ -333,4 +378,25 @@ const getCurrentLanguage = () => {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
padding: 5px 10px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #9C9C9C;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #214ADB;
|
||||
|
||||
&:after {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.act {
|
||||
color: #214ADB;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,19 +4,19 @@
|
||||
backgroundSize: 'cover',
|
||||
}">>
|
||||
<div class="banDes">
|
||||
<div class="newsxq1Tit text-center">
|
||||
<h2 class="text-[20px] md:text-[50px] text-black">
|
||||
<div class="newsxq1Tit text-center" >
|
||||
<h2 class="w-[80%] m-auto text-[20px] md:text-[50px] text-black">
|
||||
{{locale == 'zh' ? info.title : info.en_title }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="newsxq1Bg">
|
||||
<div class="container px-4 md:px-[15px]">
|
||||
<div class="container px-4 md:px-[15px] pb-[100px]">
|
||||
<div class="newsxq1Box1 text-center mt-6 md:mt-[40px]">
|
||||
<h2>{{ info.add_time }}</h2>
|
||||
<div class="newsxq1di mx-auto md:mx-0"></div>
|
||||
<h4 class="mt-4 md:mt-[30px] break-all text-base md:text-[24px]">
|
||||
<h4 class="mt-4 md:mt-[30px] break-all text-base md:text-[24px]" style="line-height: 30px;">
|
||||
<p v-html="locale == 'zh' ? info.content : info.en_content"></p>
|
||||
</h4>
|
||||
</div>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,301 +1,349 @@
|
||||
<template>
|
||||
<div class="bg-[#F2F2F2]">
|
||||
<!-- Contact section -->
|
||||
<div class="box2">
|
||||
<div class="flex flex-wrap justify-center pb-[50px] md:pb-[50px] px-4 md:px-0">
|
||||
<div class="md:w-[50%]" style="display: flex;align-items: self-start;flex-wrap: wrap;justify-content: right;height: 800px;margin-top: 119px;">
|
||||
<img :src="images_top" class="w-[585px] h-[585px]" alt="Product Image">
|
||||
<div class="flex justify-start w-[585px] ">
|
||||
<img @click="imgsChange(item)" class="w-[102px] h-[102px] pr-[10px]" :src="item" v-for="(item,index) in info.images" :key="index">
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<!-- Banner section with background image -->
|
||||
<!-- <div class="aboutimgBg">
|
||||
<div class="pl-4 md:pl-[200px]">
|
||||
<div class="newsTit">
|
||||
<h2 class="animated fadeInLeft text-2xl md:text-[40px] font-bold">{{ $t('list_p1') }}</h2>
|
||||
<h3 class="animated fadeInLeft text-lg md:text-[25px] font-medium mt-3 md:mt-[30px] text-[#606060]">{{ $t('list_p2') }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Featured news section -->
|
||||
<!-- <div class="newsBox1 container mx-auto px-4 py-8 flex flex-col md:flex-row flex-wrap" v-if="newsList.length > 0">
|
||||
<div class="newsBox1lider w-full md:w-[38%] mb-6 md:mb-0">
|
||||
<img id="featuredImage" :src="topImg" class="h-[200px] md:h-[300px] w-full object-cover rounded-[5px]" />
|
||||
</div>
|
||||
|
||||
<div class="newsTit1 w-full md:w-[62%] relative pl-0 md:pl-4 mt-6 md:mt-0">
|
||||
<div id="swipen_next" class="absolute left-0 md:left-4 top-[70%] -translate-y-1/2 cursor-pointer z-10" @click="prevSlide">
|
||||
<img src="/images/group10.png" class="w-[40px] md:w-[50px]" alt="Previous" />
|
||||
</div>
|
||||
<div id="swipen_prev" class="absolute right-0 md:right-4 top-[70%] -translate-y-1/2 cursor-pointer z-10" @click="nextSlide">
|
||||
<img src="/images/group9-1.png" class="w-[40px] md:w-[50px]" alt="Next" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end items-center mb-4">
|
||||
<div class="relative pr-3 md:pr-5">
|
||||
<h2 class="t7 m-0">
|
||||
<span id="time1" class="newsSpan1 text-2xl md:text-[40px]">{{ formatYear(currentNews.inputtime || currentNews.add_time) }}/</span>
|
||||
<span id="time2" class="newsSpan2 text-xl md:text-[28px]">{{ formatDate(currentNews.inputtime || currentNews.add_time) }}</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-[50%] px-4 md:px-[115px] pt-6 md:pt-[115px]">
|
||||
<div class="contactTit">
|
||||
<h3 class="text-[22px] md:text-[30px] font-bold mb-[20px]" style="color: #3D3D3D;">{{locale == 'zh' ? info.title : info.en_title }}</h3>
|
||||
<div class="mb-[30px]"> {{locale == 'zh' ? info.profile : info.en_profile }}</div>
|
||||
<a href="#contactpro">
|
||||
<button
|
||||
type="submit"
|
||||
class="contactBut flex justify-center items-center bg-[#0C4DA9]"
|
||||
>
|
||||
<img src="/images/zixun.png" class="w-[32px] " >
|
||||
<span class="text-[#ffffff] text-[22px] ml-2" >{{ $t('contact_b5') }}</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="contactTit">
|
||||
<h5 class="text-[22px] md:text-[24px] font-bold h5s" style="color: #0C4DA9;">{{ $t('products_details') }}</h5>
|
||||
<div class="mt-[20px]">{{locale == 'zh' ? info.content : info.en_content }}</div>
|
||||
</div>
|
||||
|
||||
<div class="contactTit" id="contactpro">
|
||||
<h5 class="text-[22px] md:text-[24px] font-bold h5s" style="color: #0C4DA9;">{{ $t('contact_b4') }}</h5>
|
||||
<form class="contactForm mt-6 md:mt-12 w-full md:w-[500px]" @submit.prevent="submitForm">
|
||||
<input
|
||||
v-model="formData.name"
|
||||
class="contactInput w-full md:w-[500px]"
|
||||
type="text"
|
||||
:placeholder="$t('message_b1')"
|
||||
/>
|
||||
<input
|
||||
v-model="formData.emil"
|
||||
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]"
|
||||
type="text"
|
||||
:placeholder="$t('message_b2')"
|
||||
/>
|
||||
<input
|
||||
v-model="formData.mobile"
|
||||
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]"
|
||||
type="text"
|
||||
:placeholder="$t('message_b3')"
|
||||
/>
|
||||
<input
|
||||
v-model="formData.company"
|
||||
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]"
|
||||
type="text"
|
||||
:placeholder="$t('message_b4')"
|
||||
/>
|
||||
<input
|
||||
v-model="formData.subject"
|
||||
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]"
|
||||
type="text"
|
||||
:placeholder="$t('message_b5')"
|
||||
/>
|
||||
<div class="relative mt-4 md:mt-8 w-full md:w-[500px]">
|
||||
<textarea
|
||||
v-model="formData.content"
|
||||
id="myTextarea"
|
||||
:placeholder="$t('message_b6')"
|
||||
rows="6"
|
||||
maxlength="100"
|
||||
class="w-full md:w-[500px]"
|
||||
></textarea>
|
||||
<div class="char-count">{{ formData.content.length }}/100</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-start mt-4 md:mt-6">
|
||||
<button
|
||||
type="submit"
|
||||
class="contactBut"
|
||||
>
|
||||
{{ $t('contact_b5') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
<div class="text-right">
|
||||
<span class="t6 text-lg md:text-[25px] font-semibold">{{ $t('list_p1') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="newsdi w-full h-[1px] bg-gray-300 my-3 md:my-4"></div>
|
||||
|
||||
<div class="listSwiper overflow-hidden w-full md:w-[90%] h-[115px] md:h-[200px]">
|
||||
<div class="swiper-wrapper w-full">
|
||||
<span v-if="!isMobile" class="newsbs2 hidden md:inline-block"></span>
|
||||
<div v-for="(news, index) in newsList" :key="index"
|
||||
:class="['swiper-slide pl-[50px] pr-[40px] md:pl-[118px] pt-3 md:pt-[20px]', {'hidden': currentIndex !== index}]">
|
||||
<h2 class="text-xl md:text-3xl font-bold mb-3 md:mb-4 line-clamp-1">
|
||||
<NuxtLink :to="'/info/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600">
|
||||
{{ getCurrentLanguage() === 'zh' ? news.title : news.en_title || news.title }}
|
||||
</NuxtLink>
|
||||
</h2>
|
||||
<h3 class="line-clamp-2 text-gray-600 text-base md:text-lg mb-4 md:mb-6">
|
||||
{{ getCurrentLanguage() === 'zh' ? news.synopsis : news.en_synopsis || news.synopsis }}
|
||||
</h3>
|
||||
<h4 v-if="!isMobile" class="mt-6 md:mt-10">
|
||||
<NuxtLink :to="'/info/' + news.id" target="_blank"
|
||||
class="text-[#0c1923] px-4 py-1 md:px-5 md:py-2.5 text-sm md:text-base rounded-[10px] border border-solid border-[#0c1923] hover:bg-gray-100">
|
||||
{{ $t('list_b3') }}
|
||||
</NuxtLink>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- News list section -->
|
||||
<div class="container mx-auto px-4 py-8 md:py-16 flex flex-wrap">
|
||||
<div v-for="(news, index) in allProsList" :key="'all-' + index"
|
||||
class="newsBox2 min-h-[200px] md:min-h-[300px] h-auto md:w-1/5 md:h-[330px] flex flex-col md:flex-row flex-wrap items-start md:items-center p-4 md:p-[20px] mb-8 md:mb-12 border-b border-gray-200">
|
||||
<NuxtLink :to="'/product/' + news.id" target="_blank" class="text-[#0c1923] md:h-[300px] flex flex-col ">
|
||||
<img :src="news.image" class="news2g10 w-full h-full md:min-h-[300px] object-cover rounded-lg"
|
||||
alt="News thumbnail" />
|
||||
<div class="newsTit2 w-full pr-0 md:pr-6 mb-4 md:mb-0">
|
||||
<h4 class="text-gray-600 text-base md:text-lg line-clamp-2 text-center">
|
||||
{{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }}
|
||||
</h4>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div id="pages" class="text-center mt-6 md:mt-8 md:w-full">
|
||||
<button v-for="page in totalPages" :key="page" @click="changePage(page)"
|
||||
:class="['mx-1 px-3 py-1 md:px-4 md:py-2 text-sm md:text-base rounded', currentPage === page ? 'bg-blue-500 text-white' : 'bg-gray-200 hover:bg-gray-300']">
|
||||
{{ page }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive ,onMounted} from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { locale,t} = useI18n()
|
||||
import { useStore } from '~/store'
|
||||
import $api from '@/service/webRequest'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const id = ref('')
|
||||
const images_top = ref('')
|
||||
const info = ref({})
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
mobile: '',
|
||||
content: '',
|
||||
emil:'',
|
||||
subject:'',
|
||||
company:''
|
||||
})
|
||||
onMounted(() => {
|
||||
id.value = route.params.id;
|
||||
getInfo()
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import $api from '@/service/webRequest'
|
||||
|
||||
// 分页相关变量
|
||||
const currentPage = ref(1)
|
||||
const itemsPerPage = 10
|
||||
const totalItems = ref(0)
|
||||
|
||||
// 新闻数据
|
||||
const mockNewsData = ref([])
|
||||
const allProsList = ref([])
|
||||
const isMobile = ref(false)
|
||||
onMounted(() => {
|
||||
isMobile.value = window.innerWidth < 768
|
||||
getNewsList()
|
||||
})
|
||||
|
||||
const getInfo=()=>{
|
||||
$api.get("/api/websiteproduct/details/"+id.value)
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
info.value = res.data.data
|
||||
images_top.value = res.data.data.image
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
// 社交分享功能
|
||||
const shareToLink = (item) => {
|
||||
// 实现Instagram分享
|
||||
window.open(item.link, '_blank');
|
||||
}
|
||||
const imgsChange = (e) => {
|
||||
images_top.value = e;
|
||||
}
|
||||
// 表单提交方法
|
||||
const submitForm = () => {
|
||||
console.log(formData);
|
||||
|
||||
// 这里可以添加表单验证逻辑
|
||||
if (!formData.name) {
|
||||
alert(t('message_name_required'))
|
||||
return
|
||||
}
|
||||
|
||||
if (!formData.mobile) {
|
||||
alert(t('message_phone_required'))
|
||||
return
|
||||
}
|
||||
if (!formData.content) {
|
||||
alert(t('message_message_required'))
|
||||
return
|
||||
}
|
||||
$api.post("/api/websiteproduct/leave_word",{
|
||||
name:formData.name,
|
||||
mobile:formData.mobile,
|
||||
content:formData.content,
|
||||
emil:formData.emil,
|
||||
subject:formData.subject,
|
||||
company:formData.company,
|
||||
product_id:id.value
|
||||
const topImg = ref('')
|
||||
|
||||
|
||||
// 获取分页新闻列表
|
||||
const getNewsList = () => {
|
||||
$api.get("/api/websiteproduct/list", { params: { page: currentPage.value, limit: itemsPerPage } })
|
||||
|
||||
.then((res: any) => {
|
||||
allProsList.value = res.data.data.list
|
||||
// 获取总条数用于分页
|
||||
totalItems.value = res.data.data.count
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("获取新闻列表失败:", err)
|
||||
})
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
if(res.data.status==200){
|
||||
alert(t('contact_success'))
|
||||
}else{
|
||||
alert(t('contact_error'))
|
||||
}
|
||||
formData.name = '';
|
||||
formData.mobile = '';
|
||||
formData.content = '';
|
||||
formData.subject = '';
|
||||
formData.emil = '';
|
||||
formData.company = '';
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
// 重置表单
|
||||
// formData.name = ''
|
||||
// formData.mobile = ''
|
||||
// formData.content = ''
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 可以添加一些特定的样式，但大部分已经通过Tailwind实现 */
|
||||
.animated {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.fadeInLeft {
|
||||
animation-name: fadeInLeft;
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.contactTit {
|
||||
background: #ffffff;
|
||||
margin-bottom:30px;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.contactTit h5 span {
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #1C1C1C;
|
||||
line-height: 26px;
|
||||
text-align: left;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.h5s::before {
|
||||
content:'1';
|
||||
width: 3px;
|
||||
height: 26px;
|
||||
margin-right: 10px;
|
||||
background: #0C4DA9;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.contactTit h3 span {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.contactInput{border-radius:6px;
|
||||
border: 1px solid #BBBBBB;font-size: 24px;color: #000;height: 50px;}
|
||||
.contactInput::placeholder {color: #999999;}
|
||||
.contactInput:focus {outline: none;}
|
||||
@media (max-width: 768px) {
|
||||
.contactInput {
|
||||
font-size: 18px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
#myTextarea {padding: 10px;border-radius: 6px;margin-top: 32px;border: 1px solid #BBBBBB;font-weight: 400;font-size: 24px;color: #000;line-height: 22px;resize: none; /* 禁止用户调整文本域大小 */}
|
||||
#myTextarea::placeholder {color: #999999;}
|
||||
#myTextarea:focus {outline: none;}
|
||||
@media (max-width: 768px) {
|
||||
#myTextarea {
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
.char-count {position: absolute;bottom: 5px; /* 根据需要调整距离底部的位置 */right: 10px; /* 根据需要调整距离右侧的位置 */font-size: 12px; /* 根据需要调整字体大小 */color: #999999;}
|
||||
.text-area-container {position: relative;width: 100%;}
|
||||
.contactBut{ width: 232px;
|
||||
height: 54px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid #0C4DA9;
|
||||
color: #0C4DA9;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.contactBut {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.contactBut::after {
|
||||
width: 100px;
|
||||
height: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
const { locale } = useI18n()
|
||||
const currentIndex = ref(0)
|
||||
|
||||
// 轮播新闻列表
|
||||
const newsList = computed(() => mockNewsData.value)
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage))
|
||||
|
||||
// 当前轮播的新闻
|
||||
const currentNews = computed(() => {
|
||||
return newsList.value[currentIndex.value] || {
|
||||
id: 0,
|
||||
title: '',
|
||||
description: '',
|
||||
inputtime: ''
|
||||
}
|
||||
.contactForm{width: 100%;}
|
||||
.contactTit h8 {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
color: #175FCB;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
})
|
||||
|
||||
// 轮播控制方法
|
||||
const prevSlide = () => {
|
||||
topImg.value = mockNewsData.value[currentIndex.value - 1].image_input[0]
|
||||
currentIndex.value = (currentIndex.value - 1 + newsList.value.length) % newsList.value.length
|
||||
}
|
||||
|
||||
const nextSlide = () => {
|
||||
topImg.value = mockNewsData.value[currentIndex.value + 1].image_input[0]
|
||||
currentIndex.value = (currentIndex.value + 1) % newsList.value.length
|
||||
}
|
||||
|
||||
// 分页方法
|
||||
const changePage = (page: number) => {
|
||||
currentPage.value = page
|
||||
getNewsList() // 切换页码时重新获取数据
|
||||
}
|
||||
|
||||
// 格式化年份 - 处理字符串格式的日期 "2023-02-15 16:50"
|
||||
const formatYear = (dateStr: string) => {
|
||||
if (!dateStr) return ''
|
||||
// 从日期字符串中提取年份
|
||||
const year = dateStr.split(' ')[0].split('-')[0]
|
||||
return year
|
||||
}
|
||||
|
||||
// 格式化日期 - 处理字符串格式的日期 "2023-02-15 16:50"
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr) return ''
|
||||
// 从日期字符串中提取月和日
|
||||
const dateParts = dateStr.split(' ')[0].split('-')
|
||||
if (dateParts.length < 3) return ''
|
||||
|
||||
const month = dateParts[1]
|
||||
const day = dateParts[2]
|
||||
return `${month}/${day}`
|
||||
}
|
||||
|
||||
const getCurrentLanguage = () => {
|
||||
return locale.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
padding-top: 4rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
max-width: 1310px;
|
||||
padding-top: 90px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.contactTit h8 {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.aboutimgBg {
|
||||
background-image: url(/images/newsgroup3.png);
|
||||
background-size: cover;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
height: 600px;
|
||||
}
|
||||
.contactdx8{
|
||||
}
|
||||
|
||||
.newsTit h2::after {
|
||||
content: '';
|
||||
width: 120px;
|
||||
height: 20px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
border-top: 2px solid #175FCB;
|
||||
height: 28px;
|
||||
margin: 0 auto;
|
||||
margin-top: -15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user