1073 lines
26 KiB
Vue
1073 lines
26 KiB
Vue
<template>
|
||
<div class="main-container">
|
||
<Header />
|
||
<div class="banner">
|
||
<Swiper
|
||
:modules="[SwiperAutoplay, SwiperPagination]"
|
||
:slides-per-view="1"
|
||
:loop="true"
|
||
:autoplay="{
|
||
delay: 5000,
|
||
disableOnInteraction: false,
|
||
pauseOnMouseEnter: true,
|
||
}"
|
||
:pagination="{
|
||
clickable: true,
|
||
}"
|
||
:speed="1000"
|
||
effect="fade"
|
||
class="swiper-banner"
|
||
>
|
||
<SwiperSlide
|
||
v-for="(slide, index) in bannerSlides"
|
||
:key="index"
|
||
class="slide"
|
||
>
|
||
<div class="slide-bg">
|
||
<video
|
||
v-if="slide.image.endsWith('.mp4')"
|
||
:src="slide.image"
|
||
autoplay
|
||
loop
|
||
muted
|
||
playsinline
|
||
class="slide-media"
|
||
></video>
|
||
<img
|
||
v-else
|
||
:src="slide.image"
|
||
class="slide-media"
|
||
alt="Banner Image"
|
||
/>
|
||
<div class="banner-content">
|
||
<h2 v-if="slide.title" class="slide-title">{{ slide.title }}</h2>
|
||
<p
|
||
v-if="slide.description"
|
||
class="slide-description"
|
||
v-html="slide.description"
|
||
></p>
|
||
<button v-if="slide.buttonText" class="slide-button">
|
||
{{ slide.buttonText }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
</Swiper>
|
||
</div>
|
||
<!-- 头条 -->
|
||
<div class="topnews">
|
||
<div class="content">
|
||
<div class="left">
|
||
<span><i class="fas fa-volume-down"></i></span>
|
||
<span>美天头条</span>
|
||
<span>|</span>
|
||
<span>
|
||
国家认证 + 技术硬核！江苏美天智能科技凭什么跻身国家级高新技术企业
|
||
</span>
|
||
</div>
|
||
<div class="right">
|
||
<span class="more" @click="handleMoreNewsClick">more news</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<main class="content-container">
|
||
<!-- 新闻中心 -->
|
||
<div class="newscenter">
|
||
<div class="title">
|
||
<span class="text-4xl">新闻中心</span>
|
||
<span class="text-xl"> / NEWS CENTER</span>
|
||
</div>
|
||
<div class="content">
|
||
<div class="left">
|
||
<div
|
||
v-if="newsData[activeNewsIndex]?.image"
|
||
class="news-banner"
|
||
:style="{
|
||
backgroundImage: `url(${newsData[activeNewsIndex]?.image})`,
|
||
}"
|
||
></div>
|
||
<div v-else class="news-banner"></div>
|
||
</div>
|
||
<div
|
||
class="news-list"
|
||
@mouseenter="stopAutoScroll"
|
||
@mouseleave="startAutoScroll"
|
||
>
|
||
<!-- 加载状态 -->
|
||
<div v-if="loading" class="loading-state">
|
||
<i class="fas fa-spinner fa-spin"></i>
|
||
<span>加载中...</span>
|
||
</div>
|
||
|
||
<!-- 错误信息 -->
|
||
<div v-else-if="error" class="error-state">
|
||
<i class="fas fa-exclamation-circle"></i>
|
||
<span>{{ error }}</span>
|
||
</div>
|
||
|
||
<!-- 新闻列表 -->
|
||
<div
|
||
v-else-if="newsData.length > 0"
|
||
v-for="(news, index) in newsData"
|
||
:key="news.id"
|
||
class="news-item"
|
||
:class="{ active: index === activeNewsIndex }"
|
||
@click="goToDetail(news.id)"
|
||
@mouseenter="setActiveNews(index)"
|
||
>
|
||
<div class="news-date">
|
||
<div class="date">{{ news.date }}</div>
|
||
<div class="month">{{ news.month }}</div>
|
||
</div>
|
||
<div class="news-content">
|
||
<div class="news-title-container">
|
||
<span v-if="news.recommend === 1" class="recommend-tag">
|
||
推荐
|
||
</span>
|
||
<span class="news-title">
|
||
{{ news.title }}
|
||
</span>
|
||
</div>
|
||
<span class="news-desc">
|
||
{{ news.description || news.desc }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 无数据状态 -->
|
||
<div v-else class="empty-state">
|
||
<i class="fas fa-newspaper"></i>
|
||
<span>暂无新闻数据</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hr"></div>
|
||
|
||
<!-- 解决方案 -->
|
||
<div class="solutions">
|
||
<div class="title">
|
||
<span class="text-4xl">行业解决方案</span>
|
||
<span class="text-xl">
|
||
/ INDUSTRY SOLUTIONS
|
||
</span>
|
||
</div>
|
||
<div class="solutions-container" v-if="solutions.length >= 4">
|
||
<!-- 第一行：两个大卡片 -->
|
||
<div class="top-row">
|
||
<div
|
||
v-if="solutions[0]"
|
||
class="solution-card large"
|
||
:style="{ backgroundImage: `url(${solutions[0].image})` }"
|
||
>
|
||
<div class="solution-overlay">
|
||
<div class="solution-icon">
|
||
<i :class="solutions[0].icon"></i>
|
||
</div>
|
||
<h3>{{ solutions[0].title }}</h3>
|
||
<p>{{ solutions[0].desc }}</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="solutions[1]"
|
||
class="solution-card large"
|
||
:style="{ backgroundImage: `url(${solutions[1].image})` }"
|
||
>
|
||
<div class="solution-overlay">
|
||
<div class="solution-icon">
|
||
<i :class="solutions[1].icon"></i>
|
||
</div>
|
||
<h3>{{ solutions[1].title }}</h3>
|
||
<p>{{ solutions[1].desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 第二行：两个小卡片 -->
|
||
<div class="bottom-row">
|
||
<div
|
||
v-if="solutions[2]"
|
||
class="solution-card small"
|
||
:style="{ backgroundImage: `url(${solutions[2].image})` }"
|
||
>
|
||
<div class="solution-overlay">
|
||
<div class="solution-icon">
|
||
<i :class="solutions[2].icon"></i>
|
||
</div>
|
||
<h3>{{ solutions[2].title }}</h3>
|
||
<p>{{ solutions[2].desc }}</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="solutions[3]"
|
||
class="solution-card small"
|
||
:style="{ backgroundImage: `url(${solutions[3].image})` }"
|
||
>
|
||
<div class="solution-overlay">
|
||
<div class="solution-icon">
|
||
<i :class="solutions[3].icon"></i>
|
||
</div>
|
||
<h3>{{ solutions[3].title }}</h3>
|
||
<p>{{ solutions[3].desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 平台数据 -->
|
||
<div
|
||
class="mt20 newsfoot"
|
||
ref="platformRef"
|
||
style="
|
||
background: url('/src/assets/images/indexImg/about_b1.png') no-repeat
|
||
center bottom;
|
||
background-size: cover;
|
||
display: flex;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<div style="width: 1200px; margin: 0 auto">
|
||
<div style="display: flex; justify-content: space-between">
|
||
<div
|
||
style="text-align: center"
|
||
v-for="item in platformStats"
|
||
:key="item.id"
|
||
>
|
||
<div>
|
||
<span>
|
||
<span style="font-size: 48px; font-weight: bold">
|
||
{{ item.current }}
|
||
</span>
|
||
<span style="font-size: 48px; font-weight: bold">+</span>
|
||
{{ item.unit }}
|
||
</span>
|
||
<br />
|
||
<span style="font-size: 20px">{{ item.label }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--合作伙伴-->
|
||
<div class="partners">
|
||
<div class="title">
|
||
<span class="text-4xl">合作伙伴</span>
|
||
<span class="text-xl"> / PARTNERS</span>
|
||
</div>
|
||
|
||
<div class="partners-content">
|
||
<div class="partner-inner" v-for="url in partnerImages">
|
||
<el-image :key="url" :src="url" lazy />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<Footer />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onUnmounted } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||
import {
|
||
Autoplay as SwiperAutoplay,
|
||
Pagination as SwiperPagination,
|
||
} from 'swiper/modules'
|
||
import 'swiper/css'
|
||
import 'swiper/css/autoplay'
|
||
import 'swiper/css/pagination'
|
||
import 'swiper/css/effect-fade'
|
||
import Header from '../components/header.vue'
|
||
import Footer from '../components/footer.vue'
|
||
|
||
// 引入API调用
|
||
import { getNewsCenterTop4 } from '@/api/article'
|
||
|
||
const router = useRouter()
|
||
|
||
// 跳转到详情页
|
||
const goToDetail = (id: number) => {
|
||
router.push(`/newscenter/companyNews/detail/${id}`)
|
||
}
|
||
|
||
// 在文件顶部添加视频导入
|
||
import bannerVideo1 from '@/assets/images/banner/banner_video1.mp4'
|
||
import bannerVideo2 from '@/assets/images/banner/banner_video2.mp4'
|
||
|
||
// 轮播图数据
|
||
const bannerSlides = [
|
||
{
|
||
image: bannerVideo1,
|
||
title: '制造业数字化转型解决方案',
|
||
description:
|
||
'制造业数字化转型解决方案源于金蝶百万企业最佳实践。<br>为制造业提供新的经济增长点，帮助制造业做大做强。',
|
||
buttonText: '了解更多',
|
||
},
|
||
{
|
||
image: bannerVideo2,
|
||
title: '美天云科技平台',
|
||
description:
|
||
'助力企业数字化转型，打造财务管理新世界。<br>共需求驱动，敏捷运营，助力企业优化供应链。<br>数字技术与精益生产深度融合，帮助制造企业打造高效运营的数字化工厂。',
|
||
buttonText: '查看详情',
|
||
},
|
||
{
|
||
image: 'https://picsum.photos/1920/600?random=3',
|
||
title: '限时优惠',
|
||
description: '限时特惠，不容错过',
|
||
buttonText: '立即购买',
|
||
},
|
||
]
|
||
|
||
// 新闻数据
|
||
const newsData = ref<any[]>([])
|
||
// 加载状态
|
||
const loading = ref(false)
|
||
// 错误信息
|
||
const error = ref('')
|
||
|
||
// 获取新闻数据
|
||
const fetchNewsData = async () => {
|
||
loading.value = true
|
||
error.value = ''
|
||
|
||
try {
|
||
const response = await getNewsCenterTop4()
|
||
|
||
// console.log('数据是：', response)
|
||
|
||
if (response.code === 200) {
|
||
// 处理图片URL，确保正确显示
|
||
const processedNews = response.list.map((item: any) => ({
|
||
...item,
|
||
// 确保图片URL是完整的，使用环境变量中的API基础URL
|
||
image: item.image
|
||
? item.image.startsWith('http')
|
||
? item.image
|
||
: `${import.meta.env.VITE_APP_API_URL}${item.image}`
|
||
: '',
|
||
}))
|
||
|
||
newsData.value = processedNews
|
||
} else {
|
||
error.value = '获取新闻数据失败'
|
||
console.error('获取新闻数据失败:', response)
|
||
}
|
||
} catch (err) {
|
||
error.value = '获取新闻数据时发生错误'
|
||
console.error('获取新闻数据错误:', err)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
//解决方案数据
|
||
const solutions = ref([
|
||
{
|
||
title: '内勤保障解决方案',
|
||
desc: '内勤保障一站式解决方案',
|
||
icon: 'fas fa-briefcase',
|
||
image: '/src/assets/images/indexImg/view1.jpg',
|
||
},
|
||
{
|
||
title: '港航供应链一体化解决方案',
|
||
desc: '软硬件一体化综合解决方案，让场内运输管理、堆场管理、仓库盘查清查更简单。',
|
||
icon: 'fas fa-ship',
|
||
image: '/src/assets/images/indexImg/view2.jpg',
|
||
},
|
||
{
|
||
title: '帆船训练解决方案',
|
||
desc: '优化训练数据,提升训练安全性',
|
||
icon: 'fas fa-sailboat',
|
||
image: '/src/assets/images/indexImg/view3.jpg',
|
||
},
|
||
{
|
||
title: '进销存解决方案',
|
||
desc: '企业门店一体化综合解决方案',
|
||
icon: 'fas fa-store',
|
||
image: '/src/assets/images/indexImg/view4.jpg',
|
||
},
|
||
])
|
||
|
||
// 当前选中的新闻索引
|
||
const activeNewsIndex = ref<number>(0)
|
||
|
||
// 设置当前选中的新闻
|
||
const setActiveNews = (index: number): void => {
|
||
if (index >= 0 && index < newsData.value.length) {
|
||
activeNewsIndex.value = index
|
||
}
|
||
}
|
||
|
||
// 自动滚动：每5秒切换一条，悬停暂停/离开恢复
|
||
let newsAutoTimer: number | null = null
|
||
const scrollToNextNews = (): void => {
|
||
const next = (activeNewsIndex.value + 1) % newsData.value.length
|
||
activeNewsIndex.value = next
|
||
}
|
||
const startAutoScroll = (): void => {
|
||
stopAutoScroll()
|
||
newsAutoTimer = window.setInterval(scrollToNextNews, 5000)
|
||
}
|
||
const stopAutoScroll = (): void => {
|
||
if (newsAutoTimer) {
|
||
clearInterval(newsAutoTimer)
|
||
newsAutoTimer = null
|
||
}
|
||
}
|
||
onMounted(() => {
|
||
startAutoScroll()
|
||
fetchNewsData()
|
||
loadImagesWithOptions()
|
||
})
|
||
onUnmounted(() => stopAutoScroll())
|
||
|
||
const handleMoreNewsClick = () => {
|
||
// console.log('more news clicked')
|
||
}
|
||
|
||
const partnerImages = ref<any[]>([])
|
||
|
||
// TODO 改为接口读取图片文件
|
||
const loadImagesWithOptions = async () => {
|
||
try {
|
||
// 如果需要过滤特定格式或处理
|
||
const modules = import.meta.glob('/src/assets/images/indexImg/partner/*', {
|
||
eager: true,
|
||
query: '?url',
|
||
import: 'default',
|
||
})
|
||
|
||
const images = []
|
||
for (const path in modules) {
|
||
// 可选：根据文件名过滤或排序
|
||
if (path.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i)) {
|
||
images.push(modules[path])
|
||
}
|
||
}
|
||
|
||
// 按文件名排序（可选）
|
||
images.sort()
|
||
|
||
partnerImages.value = images
|
||
} catch (error) {
|
||
console.error('加载图片失败:', error)
|
||
}
|
||
}
|
||
|
||
const platformStats = ref([
|
||
{ id: 1, label: '国家软件著作权', target: 20, current: 0, unit: '项' },
|
||
{ id: 2, label: '知识产权', target: 10, current: 0, unit: '项' },
|
||
{ id: 3, label: '合作商', target: 20, current: 0, unit: '家' },
|
||
{ id: 4, label: '客户', target: 110, current: 0, unit: '家' },
|
||
])
|
||
|
||
const platformRef = ref<HTMLElement | null>(null)
|
||
let observer: IntersectionObserver | null = null
|
||
let hasAnimated = false
|
||
|
||
const animateNumber = (item: any) => {
|
||
const step = Math.ceil(item.target / 40)
|
||
const timer = setInterval(() => {
|
||
item.current += step
|
||
if (item.current >= item.target) {
|
||
item.current = item.target
|
||
clearInterval(timer)
|
||
}
|
||
}, 50)
|
||
}
|
||
|
||
onMounted(() => {
|
||
observer = new IntersectionObserver(
|
||
([entry]) => {
|
||
if (entry?.isIntersecting && !hasAnimated) {
|
||
hasAnimated = true
|
||
platformStats.value.forEach(animateNumber)
|
||
}
|
||
},
|
||
{ threshold: 0.3 },
|
||
)
|
||
|
||
if (platformRef.value) {
|
||
observer.observe(platformRef.value)
|
||
}
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
observer?.disconnect()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.main-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
|
||
.banner {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 740px;
|
||
overflow: hidden;
|
||
|
||
.swiper-banner {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.slide {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.slide-bg {
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
}
|
||
}
|
||
|
||
.banner-content {
|
||
position: relative;
|
||
z-index: 10;
|
||
color: white;
|
||
max-width: 1200px;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
|
||
.slide-title {
|
||
font-size: 48px;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
opacity: 0;
|
||
animation: slideUp 0.6s ease forwards 0.3s;
|
||
}
|
||
|
||
.slide-description {
|
||
font-size: 18px;
|
||
margin-bottom: 30px;
|
||
max-width: 600px;
|
||
opacity: 0;
|
||
animation: slideUp 0.6s ease forwards 0.5s;
|
||
}
|
||
|
||
.slide-button {
|
||
padding: 12px 30px;
|
||
background-color: #1890ff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
animation: slideUp 0.6s ease forwards 0.7s;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
background-color: #40a9ff;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 分页器样式 */
|
||
:deep(.swiper-pagination-bullet) {
|
||
width: 10px;
|
||
height: 10px;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
opacity: 1;
|
||
margin: 0 5px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
:deep(.swiper-pagination-bullet-active) {
|
||
width: 30px;
|
||
border-radius: 5px;
|
||
background: #1890ff;
|
||
}
|
||
|
||
/* 动画 */
|
||
@keyframes slideUp {
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 992px) {
|
||
height: 500px;
|
||
|
||
.banner-content {
|
||
.slide-title {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.slide-description {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
height: 400px;
|
||
margin-bottom: 20px;
|
||
|
||
.banner-content {
|
||
text-align: center;
|
||
padding: 0 30px;
|
||
|
||
.slide-title {
|
||
font-size: 28px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.slide-description {
|
||
font-size: 15px;
|
||
margin: 0 auto 25px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.slide-button {
|
||
padding: 10px 25px;
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-container {
|
||
width: 100%;
|
||
//max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px 0;
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
|
||
.content {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.newscenter {
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.content {
|
||
max-width: 1200px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 30px;
|
||
|
||
.left {
|
||
flex: 1;
|
||
|
||
.news-banner {
|
||
width: 600px;
|
||
height: 480px;
|
||
background-color: #f0f2f5;
|
||
border-radius: 8px;
|
||
background-size: cover;
|
||
background-position: center;
|
||
transition: all 0.5s ease;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
|
||
.news-list {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
|
||
/* 加载、错误、无数据状态样式 */
|
||
.loading-state,
|
||
.error-state,
|
||
.empty-state {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px 20px;
|
||
text-align: center;
|
||
border-radius: 8px;
|
||
background-color: #f9f9f9;
|
||
color: #666;
|
||
font-size: 16px;
|
||
|
||
i {
|
||
margin-right: 10px;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.error-state {
|
||
color: #f56c6c;
|
||
|
||
i {
|
||
color: #f56c6c;
|
||
}
|
||
}
|
||
}
|
||
|
||
.news-item {
|
||
display: flex;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&:hover {
|
||
box-shadow: 0 2px 12px rgba(16, 140, 255, 0.1);
|
||
background-color: #1890ff;
|
||
|
||
.news-content {
|
||
.news-title,
|
||
.news-desc {
|
||
color: white !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
box-shadow: 0 2px 12px rgba(16, 140, 255, 0.1);
|
||
background-color: #1890ff;
|
||
|
||
.news-content {
|
||
.news-title,
|
||
.news-desc {
|
||
color: white !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.news-date {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 80px;
|
||
flex-shrink: 0;
|
||
margin-right: 20px;
|
||
padding: 12px 0;
|
||
background: #f9f9f9;
|
||
border-radius: 6px;
|
||
|
||
.date {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.month {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-top: 4px;
|
||
}
|
||
}
|
||
|
||
.news-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
/* 标题容器，使用flex布局 */
|
||
.news-title-container {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.news-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
flex: 1;
|
||
}
|
||
|
||
/* 推荐标签样式 */
|
||
.recommend-tag {
|
||
display: inline-block;
|
||
padding: 2px 6px;
|
||
background-color: #f56c6c;
|
||
color: white;
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
margin-right: 8px;
|
||
border-radius: 4px;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.news-desc {
|
||
font-size: 14px;
|
||
color: #666;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.solutions {
|
||
padding: 60px 0;
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.solutions-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
gap: 20px;
|
||
}
|
||
|
||
.top-row {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
|
||
.bottom-row {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
|
||
.solution-card {
|
||
position: relative;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background-size: cover;
|
||
background-position: center;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
rgba(0, 0, 0, 0.1),
|
||
rgba(0, 0, 0, 0.7)
|
||
);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
&:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||
|
||
//&::before {
|
||
//background: rgba(24, 144, 255, 0.8);
|
||
//}
|
||
|
||
.solution-overlay {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
}
|
||
|
||
.solution-overlay {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 30px 20px;
|
||
color: white;
|
||
text-align: left;
|
||
opacity: 1;
|
||
transform: none;
|
||
transition: all 0.3s ease;
|
||
|
||
.solution-icon {
|
||
font-size: 40px;
|
||
margin-bottom: 15px;
|
||
color: white;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 18px;
|
||
margin-bottom: 10px;
|
||
color: white;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
/* 尺寸定义：2x2网格布局 */
|
||
.top-row .solution-card.large {
|
||
flex: 1;
|
||
height: 350px;
|
||
}
|
||
|
||
.bottom-row .solution-card.small {
|
||
flex: 1;
|
||
height: 250px;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.top-row,
|
||
.bottom-row {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.top-row .solution-card.large,
|
||
.bottom-row .solution-card.small {
|
||
height: 250px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.topnews {
|
||
color: #646767;
|
||
font-size: var(--topnews-size);
|
||
background-color: #f6f7f7;
|
||
|
||
.content {
|
||
width: 1200px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 0 auto;
|
||
padding: 40px 0;
|
||
|
||
span {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.right {
|
||
.more {
|
||
cursor: pointer;
|
||
color: #646767;
|
||
|
||
&:hover {
|
||
color: #333;
|
||
font-weight: 500;
|
||
transition: all 0.1s ease;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.slide-media {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
z-index: 1;
|
||
}
|
||
|
||
.slide-bg {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hr {
|
||
width: 100%;
|
||
height: 60px;
|
||
}
|
||
|
||
.newsfoot {
|
||
min-height: 320px;
|
||
color: #fff;
|
||
}
|
||
|
||
.partners {
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.partners-content {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
grid-gap: 20px 20px;
|
||
|
||
.partner-inner {
|
||
padding: 1.5rem 2.375rem;
|
||
margin: -1px;
|
||
background-color: #fff;
|
||
border: 1px solid #fff;
|
||
font-size: 0;
|
||
height: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.partner-inner:hover {
|
||
border: 1px solid #3650f9;
|
||
box-shadow: 1px 3px 20px rgba(0, 0, 0, 0.2);
|
||
}
|
||
}
|
||
}
|
||
</style>
|