修改官网问题 添加产品 导航自定义
This commit is contained in:
parent
670431e89f
commit
75dc8ac582
@ -21,34 +21,48 @@
|
||||
<ul class="navList flex space-x-16">
|
||||
<li>
|
||||
<NuxtLink to="/" :class="{ 'active': route.path === '/' }">
|
||||
{{ $t('home') }}
|
||||
{{ locale == 'zh' ? web_site_cate.biaoti1 : web_site_cate.biaoti1_en }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/index_about/" :class="{ 'active': route.path === '/index_about/' }">
|
||||
{{ $t('index_about') }}
|
||||
{{ locale == 'zh' ? web_site_cate.biaoti2 : web_site_cate.biaoti2_en }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/index_service/" :class="{ 'active': route.path === '/index_service/' }">
|
||||
{{ $t('index_services') }}
|
||||
{{ locale == 'zh' ? web_site_cate.biaoti3 : web_site_cate.biaoti3_en }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/index_clients/" :class="{ 'active': route.path === '/index_clients/' }">
|
||||
{{ $t('index_clients') }}
|
||||
{{ locale == 'zh' ? web_site_cate.biaoti4 : web_site_cate.biaoti4_en }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/index_news/" :class="{ 'active': route.path === '/index_news/' }">
|
||||
{{ $t('index_news') }}
|
||||
{{ locale == 'zh' ? web_site_cate.biaoti6 : web_site_cate.biaoti6_en }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/index_contact/" :class="{ 'active': route.path === '/index_contact/' }">
|
||||
{{ $t('index_contact') }}
|
||||
{{ locale == 'zh' ? web_site_cate.biaoti7 : web_site_cate.biaoti7_en }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="products">
|
||||
<NuxtLink>{{ locale == 'zh' ? web_site_cate.biaoti5 : web_site_cate.biaoti5_en }}</NuxtLink>
|
||||
<ul class="products_list">
|
||||
<li><NuxtLink to="/index_product_f/" :class="{ 'active': route.path === '/index_product_f/' }">
|
||||
{{ locale == 'zh' ? top_two.home_two_left_title : top_two.en_home_two_left_title }}
|
||||
</NuxtLink></li>
|
||||
<li><NuxtLink to="/index_product_s/" :class="{ 'active': route.path === '/index_product_s/' }">
|
||||
{{ locale == 'zh' ? top_two.home_two_center_title : top_two.en_home_two_center_title }}
|
||||
</NuxtLink></li>
|
||||
<li><NuxtLink to="/index_product_t/" :class="{ 'active': route.path === '/index_product_t/' }">
|
||||
{{ locale == 'zh' ? top_two.home_two_right_title : top_two.en_home_two_right_title }}
|
||||
</NuxtLink></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="header_lang hidden md:flex space-x-4">
|
||||
@ -106,11 +120,18 @@ import { ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
import $api from '@/service/webRequest'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const isMenuOpen = ref(false)
|
||||
const { locale } = useI18n()
|
||||
const web_site_cate = ref({});
|
||||
const top_two = ref({});
|
||||
|
||||
onMounted(() => {
|
||||
webSiteCate();
|
||||
topTwoList();
|
||||
})
|
||||
const toggleMenu = () => {
|
||||
isMenuOpen.value = !isMenuOpen.value
|
||||
}
|
||||
@ -126,6 +147,27 @@ const changeLanguage = (lang: string) => {
|
||||
closeMenu()
|
||||
}
|
||||
|
||||
const webSiteCate = () => {
|
||||
$api.get("/api/sys_config?name=web_site_cate")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
web_site_cate.value = res.data.data.config
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
const topTwoList = () => {
|
||||
$api.get("/api/sys_config?name=top_two")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
top_two.value = res.data.data.config
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
|
||||
console.log(route)
|
||||
</script>
|
||||
|
||||
@ -202,6 +244,61 @@ console.log(route)
|
||||
}
|
||||
}
|
||||
}
|
||||
.products{
|
||||
position: relative;
|
||||
.products_list{
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: #ffffff;
|
||||
|
||||
li{
|
||||
a {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #9C9C9C;
|
||||
padding: 0 4px;
|
||||
line-height: 40px;
|
||||
position: relative;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 3px;
|
||||
background: #214ADB;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #214ADB;
|
||||
|
||||
&:after {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #214ADB;
|
||||
|
||||
&:after {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&:hover .products_list{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
|
||||
@ -38,8 +38,8 @@ export default defineNuxtConfig({
|
||||
vite: {
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: "https://www.navigatortrades.com/",
|
||||
'/api/': {
|
||||
target: "https://www.navigatortrades.com/api/",
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
}
|
||||
|
||||
@ -421,7 +421,7 @@ onMounted(() => {
|
||||
topFourList();
|
||||
})
|
||||
const getNewsList = () => {
|
||||
$api.get("/api/article/new/list")
|
||||
$api.get("/api/article/list/1")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
newsList.value = res.data.data.list
|
||||
|
||||
@ -46,6 +46,7 @@
|
||||
<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">
|
||||
@ -66,6 +67,7 @@
|
||||
<!-- News list section -->
|
||||
<div class="container mx-auto px-4 py-8 md:py-12">
|
||||
<div v-for="(news, index) in allNewsList" :key="'all-'+index" class="newsBox2 min-h-[200px] md:min-h-[300px] h-auto md:h-[300px] 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="'/info/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600 md:h-[300px] flex md:p-[20px]">
|
||||
<div class="newsTit2 w-full md:w-2/3 pr-0 md:pr-6 mb-4 md:mb-0">
|
||||
<h2>
|
||||
<span class="newsSpan1 text-2xl md:text-[40px]">{{ formatYear(news.add_time) }}/</span>
|
||||
@ -73,15 +75,14 @@
|
||||
</h2>
|
||||
<div class="newsBox2di w-full md:w-[473px]"></div>
|
||||
<h3 class="text-xl md:text-2xl font-bold mb-2 md:mb-4 pt-3 md:pt-[20px] 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>
|
||||
</h3>
|
||||
<h4 class="text-gray-600 text-base md:text-lg line-clamp-2">
|
||||
{{ getCurrentLanguage() == 'zh' ? news.synopsis : (news.en_synopsis || news.synopsis) }}
|
||||
</h4>
|
||||
</div>
|
||||
<img :src="news.image_input[0]" class="news2g10 w-full md:w-1/3 h-[200px] md:h-full object-cover rounded-lg" alt="News thumbnail" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
@ -121,7 +122,7 @@ onMounted(() => {
|
||||
const topImg = ref('')
|
||||
// 获取轮播展示的新闻（前5条）
|
||||
const getFeaturedNews = () => {
|
||||
$api.get("/api/article/new/list", { params: { page: 1, limit: 5 } })
|
||||
$api.get("/api/article/list/1", { params: { page: 1, limit: 5 } })
|
||||
.then((res: any) => {
|
||||
mockNewsData.value = res.data.data.list
|
||||
topImg.value = res.data.data.list[0].image_input[0]
|
||||
@ -133,7 +134,7 @@ const getFeaturedNews = () => {
|
||||
|
||||
// 获取分页新闻列表
|
||||
const getNewsList = () => {
|
||||
$api.get("/api/article/new/list", { params: { page: currentPage.value, limit: itemsPerPage } })
|
||||
$api.get("/api/article/list/1", { params: { page: currentPage.value, limit: itemsPerPage } })
|
||||
.then((res: any) => {
|
||||
allNewsList.value = res.data.data.list
|
||||
// 获取总条数用于分页
|
||||
|
||||
354
pages/index_product_f.vue
Normal file
354
pages/index_product_f.vue
Normal file
@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<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="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-12">
|
||||
<div v-for="(news, index) in allNewsList" :key="'all-'+index" class="newsBox2 min-h-[200px] md:min-h-[300px] h-auto md:h-[300px] 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="'/info/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600 md:h-[300px] flex md:p-[20px]">
|
||||
<div class="newsTit2 w-full md:w-2/3 pr-0 md:pr-6 mb-4 md:mb-0">
|
||||
<h2>
|
||||
<span class="newsSpan1 text-2xl md:text-[40px]">{{ formatYear(news.add_time) }}/</span>
|
||||
<span class="newsSpan2 text-xl md:text-[28px]">{{ formatDate(news.add_time) }}</span>
|
||||
</h2>
|
||||
<div class="newsBox2di w-full md:w-[473px]"></div>
|
||||
<h3 class="text-xl md:text-2xl font-bold mb-2 md:mb-4 pt-3 md:pt-[20px] line-clamp-1">
|
||||
|
||||
{{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }}
|
||||
|
||||
</h3>
|
||||
<h4 class="text-gray-600 text-base md:text-lg line-clamp-2">
|
||||
{{ getCurrentLanguage() == 'zh' ? news.synopsis : (news.en_synopsis || news.synopsis) }}
|
||||
</h4>
|
||||
</div>
|
||||
<img :src="news.image_input[0]" class="news2g10 w-full md:w-1/3 h-[200px] md:h-full object-cover rounded-lg" alt="News thumbnail" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div id="pages" class="text-center mt-6 md:mt-8">
|
||||
<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>
|
||||
</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 = 5
|
||||
const totalItems = ref(0)
|
||||
|
||||
// 新闻数据
|
||||
const mockNewsData = ref([])
|
||||
const allNewsList = ref([])
|
||||
const isMobile = ref(false)
|
||||
onMounted(() => {
|
||||
isMobile.value = window.innerWidth < 768
|
||||
getNewsList()
|
||||
getFeaturedNews()
|
||||
})
|
||||
|
||||
const topImg = ref('')
|
||||
// 获取轮播展示的新闻（前5条）
|
||||
const getFeaturedNews = () => {
|
||||
$api.get("/api/article/list/8", { params: { page: 1, limit: 5 } })
|
||||
.then((res: any) => {
|
||||
mockNewsData.value = res.data.data.list
|
||||
topImg.value = res.data.data.list[0].image_input[0]
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("获取轮播新闻失败:", err)
|
||||
})
|
||||
}
|
||||
|
||||
// 获取分页新闻列表
|
||||
const getNewsList = () => {
|
||||
$api.get("/api/article/list/8", { params: { page: currentPage.value, limit: itemsPerPage } })
|
||||
.then((res: any) => {
|
||||
allNewsList.value = res.data.data.list
|
||||
// 获取总条数用于分页
|
||||
totalItems.value = res.data.data.count
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("获取新闻列表失败:", err)
|
||||
})
|
||||
}
|
||||
|
||||
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: ''
|
||||
}
|
||||
})
|
||||
|
||||
// 轮播控制方法
|
||||
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%;
|
||||
@media (min-width: 768px) {
|
||||
max-width: 1310px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.newsTit h2::after {
|
||||
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;
|
||||
}
|
||||
|
||||
.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>
|
||||
354
pages/index_product_s.vue
Normal file
354
pages/index_product_s.vue
Normal file
@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<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="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-12">
|
||||
<div v-for="(news, index) in allNewsList" :key="'all-'+index" class="newsBox2 min-h-[200px] md:min-h-[300px] h-auto md:h-[300px] 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="'/info/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600 md:h-[300px] flex md:p-[20px]">
|
||||
<div class="newsTit2 w-full md:w-2/3 pr-0 md:pr-6 mb-4 md:mb-0">
|
||||
<h2>
|
||||
<span class="newsSpan1 text-2xl md:text-[40px]">{{ formatYear(news.add_time) }}/</span>
|
||||
<span class="newsSpan2 text-xl md:text-[28px]">{{ formatDate(news.add_time) }}</span>
|
||||
</h2>
|
||||
<div class="newsBox2di w-full md:w-[473px]"></div>
|
||||
<h3 class="text-xl md:text-2xl font-bold mb-2 md:mb-4 pt-3 md:pt-[20px] line-clamp-1">
|
||||
|
||||
{{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }}
|
||||
|
||||
</h3>
|
||||
<h4 class="text-gray-600 text-base md:text-lg line-clamp-2">
|
||||
{{ getCurrentLanguage() == 'zh' ? news.synopsis : (news.en_synopsis || news.synopsis) }}
|
||||
</h4>
|
||||
</div>
|
||||
<img :src="news.image_input[0]" class="news2g10 w-full md:w-1/3 h-[200px] md:h-full object-cover rounded-lg" alt="News thumbnail" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div id="pages" class="text-center mt-6 md:mt-8">
|
||||
<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>
|
||||
</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 = 5
|
||||
const totalItems = ref(0)
|
||||
|
||||
// 新闻数据
|
||||
const mockNewsData = ref([])
|
||||
const allNewsList = ref([])
|
||||
const isMobile = ref(false)
|
||||
onMounted(() => {
|
||||
isMobile.value = window.innerWidth < 768
|
||||
getNewsList()
|
||||
getFeaturedNews()
|
||||
})
|
||||
|
||||
const topImg = ref('')
|
||||
// 获取轮播展示的新闻（前5条）
|
||||
const getFeaturedNews = () => {
|
||||
$api.get("/api/article/list/8", { params: { page: 1, limit: 5 } })
|
||||
.then((res: any) => {
|
||||
mockNewsData.value = res.data.data.list
|
||||
topImg.value = res.data.data.list[0].image_input[0]
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("获取轮播新闻失败:", err)
|
||||
})
|
||||
}
|
||||
|
||||
// 获取分页新闻列表
|
||||
const getNewsList = () => {
|
||||
$api.get("/api/article/list/8", { params: { page: currentPage.value, limit: itemsPerPage } })
|
||||
.then((res: any) => {
|
||||
allNewsList.value = res.data.data.list
|
||||
// 获取总条数用于分页
|
||||
totalItems.value = res.data.data.count
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("获取新闻列表失败:", err)
|
||||
})
|
||||
}
|
||||
|
||||
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: ''
|
||||
}
|
||||
})
|
||||
|
||||
// 轮播控制方法
|
||||
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%;
|
||||
@media (min-width: 768px) {
|
||||
max-width: 1310px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.newsTit h2::after {
|
||||
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;
|
||||
}
|
||||
|
||||
.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>
|
||||
354
pages/index_product_t.vue
Normal file
354
pages/index_product_t.vue
Normal file
@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<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="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-12">
|
||||
<div v-for="(news, index) in allNewsList" :key="'all-'+index" class="newsBox2 min-h-[200px] md:min-h-[300px] h-auto md:h-[300px] 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="'/info/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600 md:h-[300px] flex md:p-[20px]">
|
||||
<div class="newsTit2 w-full md:w-2/3 pr-0 md:pr-6 mb-4 md:mb-0">
|
||||
<h2>
|
||||
<span class="newsSpan1 text-2xl md:text-[40px]">{{ formatYear(news.add_time) }}/</span>
|
||||
<span class="newsSpan2 text-xl md:text-[28px]">{{ formatDate(news.add_time) }}</span>
|
||||
</h2>
|
||||
<div class="newsBox2di w-full md:w-[473px]"></div>
|
||||
<h3 class="text-xl md:text-2xl font-bold mb-2 md:mb-4 pt-3 md:pt-[20px] line-clamp-1">
|
||||
|
||||
{{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }}
|
||||
|
||||
</h3>
|
||||
<h4 class="text-gray-600 text-base md:text-lg line-clamp-2">
|
||||
{{ getCurrentLanguage() == 'zh' ? news.synopsis : (news.en_synopsis || news.synopsis) }}
|
||||
</h4>
|
||||
</div>
|
||||
<img :src="news.image_input[0]" class="news2g10 w-full md:w-1/3 h-[200px] md:h-full object-cover rounded-lg" alt="News thumbnail" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div id="pages" class="text-center mt-6 md:mt-8">
|
||||
<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>
|
||||
</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 = 5
|
||||
const totalItems = ref(0)
|
||||
|
||||
// 新闻数据
|
||||
const mockNewsData = ref([])
|
||||
const allNewsList = ref([])
|
||||
const isMobile = ref(false)
|
||||
onMounted(() => {
|
||||
isMobile.value = window.innerWidth < 768
|
||||
getNewsList()
|
||||
getFeaturedNews()
|
||||
})
|
||||
|
||||
const topImg = ref('')
|
||||
// 获取轮播展示的新闻（前5条）
|
||||
const getFeaturedNews = () => {
|
||||
$api.get("/api/article/list/8", { params: { page: 1, limit: 5 } })
|
||||
.then((res: any) => {
|
||||
mockNewsData.value = res.data.data.list
|
||||
topImg.value = res.data.data.list[0].image_input[0]
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("获取轮播新闻失败:", err)
|
||||
})
|
||||
}
|
||||
|
||||
// 获取分页新闻列表
|
||||
const getNewsList = () => {
|
||||
$api.get("/api/article/list/8", { params: { page: currentPage.value, limit: itemsPerPage } })
|
||||
.then((res: any) => {
|
||||
allNewsList.value = res.data.data.list
|
||||
// 获取总条数用于分页
|
||||
totalItems.value = res.data.data.count
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("获取新闻列表失败:", err)
|
||||
})
|
||||
}
|
||||
|
||||
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: ''
|
||||
}
|
||||
})
|
||||
|
||||
// 轮播控制方法
|
||||
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%;
|
||||
@media (min-width: 768px) {
|
||||
max-width: 1310px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.newsTit h2::after {
|
||||
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;
|
||||
}
|
||||
|
||||
.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>
|
||||
@ -10,6 +10,7 @@ export default {
|
||||
index_clients: 'CLIENTS',
|
||||
index_news: 'News',
|
||||
index_contact: 'Contact US',
|
||||
index_product:'Products',
|
||||
index_share: 'Share Wed',
|
||||
|
||||
// Index section 2
|
||||
@ -78,6 +79,10 @@ export default {
|
||||
list_b2: 'Latest Industry Trends',
|
||||
list_b3: 'View details',
|
||||
|
||||
list_p1: 'Latest Products',
|
||||
list_p2: 'Latest Pproduct Updates',
|
||||
|
||||
|
||||
// Contact page
|
||||
contact_b1: 'Contact US',
|
||||
contact_b2: 'Your name',
|
||||
|
||||
@ -9,6 +9,7 @@ export default {
|
||||
index_clients: '我的客户',
|
||||
index_news: '最新新闻',
|
||||
index_contact: '联系我们',
|
||||
index_product: '产品',
|
||||
index_share: '分享',
|
||||
|
||||
// 首页2
|
||||
@ -77,6 +78,9 @@ export default {
|
||||
list_b2: '最新行业趋势',
|
||||
list_b3: '查看详情',
|
||||
|
||||
list_p1: '最新产品',
|
||||
list_p2: '最新产品动态',
|
||||
|
||||
// contact
|
||||
contact_b1: '联系我们',
|
||||
contact_b2: '您的姓名',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user