Skip to content

GitLab

Commit efbbd638 authored by 吕 成东's avatar 吕 成东
Browse files

添加新闻资讯

parent e46c0435
Show whitespace changes
Inline Side-by-side
src/components/News.vue 0 → 100644
View file @ efbbd638
<template>
<div class="center-width">
<div class="left-title">
<div class="serve-title">
<div class="index">03</div>
<div class="name">新闻资讯</div>
<div class="english">NEWS INFORMMATION</div>
</div>
</div>
<div class="new-index" ref="scrollRef" @mouseenter="stopScroll" @mouseleave="startScroll">
<div v-for="item in data" :key="item.comm_msg_info.id" class="news-item">
<div class="news-content">
<h3 class="news-title">{{ item.app_msg_ext_info.title }}</h3>
<p class="news-digest" v-if="item.app_msg_ext_info.digest">{{ item.app_msg_ext_info.digest }}</p>
<div class="news-meta">
<span class="news-author" v-if="item.app_msg_ext_info.author">{{ item.app_msg_ext_info.author
}}</span>
<span class="news-date">{{ formatDate(item.comm_msg_info.datetime) }}</span>
</div>
</div>
<div class="news-cover" v-if="item.app_msg_ext_info.cover">
<img :src="getLocalCover(item)" :alt="item.app_msg_ext_info.title"
@error="e => { const target = e.target as HTMLImageElement; if (target) target.src = item.app_msg_ext_info.cover }">
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
const data = ref([
{
"comm_msg_info": {
"id": 1000000023,
"type": 49,
"datetime": 1738720097,
"fakeid": "3243440647",
"status": 2,
"content": ""
},
"app_msg_ext_info": {
"title": "开工大吉！",
"digest": "",
"content": "",
"fileid": 0,
"content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484575&amp;idx=1&amp;sn=841085af0a0366b2a684ebfb99eda98d&amp;chksm=e8101b8903cd1b630e4e4ac97f0985b38297d0a3d11b57011f80ab63a1b9a1cc02d280eaca6d&amp;scene=27#wechat_redirect",
"source_url": "",
"cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gMl92hlSMLOcD3ibmc0hcboP15uxv9ajib9LhVozEdmia4ayiaFuCmrPasjlAeekPDzTw0nib4uNg2ibGpA/0?wx_fmt=jpeg",
"subtype": 9,
"is_multi": 0,
"multi_app_msg_item_list": [
],
"author": "",
"copyright_stat": 100,
"duration": 0,
"del_flag": 1,
"item_show_type": 8,
"audio_fileid": 0,
"play_url": "",
"malicious_title_reason_id": 0,
"malicious_content_type": 0
}
},
{
"comm_msg_info": {
"id": 1000000019,
"type": 49,
"datetime": 1735682400,
"fakeid": "3243440647",
"status": 2,
"content": ""
},
"app_msg_ext_info": {
"title": "岁序更替 步履不停丨英泽科技祝您新年快乐！",
"digest": "",
"content": "",
"fileid": 0,
"content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484477&amp;idx=1&amp;sn=2795a99bbcd8d804bd2df77a19c04421&amp;chksm=e84697531b52b9ff85073315652c8f2765a0a6ec83dd1813c6b56de0d41d05a8ef62fe6a1110&amp;scene=27#wechat_redirect",
"source_url": "",
"cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gNLdbDt0mGYjqFvOKyM0iadAa1zwuhUsibkaiaCaPyKe5ibgk7bBacicUmEL8ibibSNSa7LVCuzDRsibgfSTQ/0?wx_fmt=jpeg",
"subtype": 9,
"is_multi": 0,
"multi_app_msg_item_list": [
],
"author": "",
"copyright_stat": 100,
"duration": 0,
"del_flag": 1,
"item_show_type": 8,
"audio_fileid": 0,
"play_url": "",
"malicious_title_reason_id": 0,
"malicious_content_type": 0
}
},
{
"comm_msg_info": {
"id": 1000000022,
"type": 49,
"datetime": 1735650000,
"fakeid": "3243440647",
"status": 2,
"content": ""
},
"app_msg_ext_info": {
"title": '" 滚 " 动元旦，乐启新程',
"digest": "",
"content": "",
"fileid": 0,
"content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484526&amp;idx=1&amp;sn=c938faed3d5631e8d5d4e3d16c63c5c6&amp;chksm=e8c7a8db03152c7d1b9d792a30eec0a6a0c336482e4bec7e7c11050944bdada33035bc0b8d16&amp;scene=27#wechat_redirect",
"source_url": "",
"cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gNLdbDt0mGYjqFvOKyM0iadAtXOP96mHWAX2ENg4LoRRbN27o2KEV90mE1ryMYgGicrubtfX1XTiaHOg/0?wx_fmt=jpeg",
"subtype": 9,
"is_multi": 0,
"multi_app_msg_item_list": [
],
"author": "英泽家园",
"copyright_stat": 100,
"duration": 0,
"del_flag": 1,
"item_show_type": 0,
"audio_fileid": 0,
"play_url": "",
"malicious_title_reason_id": 0,
"malicious_content_type": 0
}
},
{
"comm_msg_info": {
"id": 1000000021,
"type": 49,
"datetime": 1735644129,
"fakeid": "3243440647",
"status": 2,
"content": ""
},
"app_msg_ext_info": {
"title": "第四季度员工生日会 | 年年欢愉，岁岁胜意",
"digest": "",
"content": "",
"fileid": 0,
"content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484511&amp;idx=1&amp;sn=b343a9a9ec643f9a27bf251fc3b678ca&amp;chksm=e86ae31043ae52b80bd7b05b286cd35702e6e76e0618ee127714c5ff9a3c1950b0f643448d87&amp;scene=27#wechat_redirect",
"source_url": "",
"cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gNLdbDt0mGYjqFvOKyM0iadASXW5GvcFnVYBRErgE6VZX6oR0WicUnFB75fUmtOLdYwuibcaTvX00HQQ/0?wx_fmt=jpeg",
"subtype": 9,
"is_multi": 0,
"multi_app_msg_item_list": [
],
"author": "英泽家园",
"copyright_stat": 100,
"duration": 0,
"del_flag": 1,
"item_show_type": 0,
"audio_fileid": 0,
"play_url": "",
"malicious_title_reason_id": 0,
"malicious_content_type": 0
}
},
{
"comm_msg_info": {
"id": 1000000020,
"type": 49,
"datetime": 1735641319,
"fakeid": "3243440647",
"status": 2,
"content": ""
},
"app_msg_ext_info": {
"title": "英泽科技举行总经理聘任仪式",
"digest": "",
"content": "",
"fileid": 0,
"content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484493&amp;idx=1&amp;sn=4768a638eeef1154a6c07594bea6c79f&amp;chksm=e83d36ed9ed75f8e77cc0cad1b694b77df184d28d6bfbf13ba1106a8182c19c0dc09901a394c&amp;scene=27#wechat_redirect",
"source_url": "",
"cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gNLdbDt0mGYjqFvOKyM0iadA5iaUwJJKq8nIlPIQCicjg4ceaV2ovn9E1DJIYcrrkbXg6Y63jUJhmDMw/0?wx_fmt=jpeg",
"subtype": 9,
"is_multi": 0,
"multi_app_msg_item_list": [
],
"author": "英泽家园",
"copyright_stat": 100,
"duration": 0,
"del_flag": 1,
"item_show_type": 0,
"audio_fileid": 0,
"play_url": "",
"malicious_title_reason_id": 0,
"malicious_content_type": 0
}
},
{
"comm_msg_info": {
"id": 1000000018,
"type": 49,
"datetime": 1734086492,
"fakeid": "3243440647",
"status": 2,
"content": ""
},
"app_msg_ext_info": {
"title": "十二载砥砺前行，新周期再攀高峰丨热烈庆祝英泽科技成立十二周年！",
"digest": "",
"content": "",
"fileid": 0,
"content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484441&amp;idx=1&amp;sn=be54b63bc58b467fcee15370dbce8806&amp;chksm=e80db5f09c3de103ad7e38c1ef28073395a925594ce711683d95d06209defd462ae0e622eff3&amp;scene=27#wechat_redirect",
"source_url": "",
"cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gNtUN6p8Vm7ToM3tnM3q2nT3r51xXCVJu4UU5zVubWloA7IuyYaibicBTMpibaZmNltsxEvy7munYorQ/0?wx_fmt=jpeg",
"subtype": 9,
"is_multi": 0,
"multi_app_msg_item_list": [
],
"author": "英泽家园",
"copyright_stat": 100,
"duration": 0,
"del_flag": 1,
"item_show_type": 0,
"audio_fileid": 0,
"play_url": "",
"malicious_title_reason_id": 0,
"malicious_content_type": 0
}
},
{
"comm_msg_info": {
"id": 1000000017,
"type": 49,
"datetime": 1729765624,
"fakeid": "3243440647",
"status": 2,
"content": ""
},
"app_msg_ext_info": {
"title": "1024程序员节 | 不要BUG，只要HAPPY！",
"digest": "",
"content": "",
"fileid": 0,
"content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484378&amp;idx=1&amp;sn=9d530b9b817d35b37304feff278c957d&amp;chksm=e8c36434602ccc3e6db272ec6085ea86d5429714ac8d2f5f939919821516cc4016b7dbb64a6b&amp;scene=27#wechat_redirect",
"source_url": "",
"cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gPWxdxYhIbCNXf5L1fddDmXGj0FA9Gk3zTewhuACN2zlk2GLQqfaqtjvCB1Z2tdmMnGUiakG2pj1kg/0?wx_fmt=jpeg",
"subtype": 9,
"is_multi": 0,
"multi_app_msg_item_list": [
],
"author": "英泽家园",
"copyright_stat": 100,
"duration": 0,
"del_flag": 1,
"item_show_type": 0,
"audio_fileid": 0,
"play_url": "",
"malicious_title_reason_id": 0,
"malicious_content_type": 0
}
},
{
"comm_msg_info": {
"id": 1000000016,
"type": 49,
"datetime": 1727733600,
"fakeid": "3243440647",
"status": 2,
"content": ""
},
"app_msg_ext_info": {
"title": "欢度国庆丨英泽科技祝全体员工国庆节快乐！",
"digest": "",
"content": "",
"fileid": 0,
"content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484221&amp;idx=1&amp;sn=fabd3edb99b2f294c09ec4ce87eaf8ee&amp;chksm=e8709ada8caedfc8a5a5dcc1a00459b6ca85b2749ddbd2c64b1ac98b2543b15e77bb933520bc&amp;scene=27#wechat_redirect",
"source_url": "",
"cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gNSGcDvVwY5XJpbiciaJR9HFyDbibAwANokGrnWVJT2Nac9Xz9CjAp2p4xWPN6vuWdwY9FeAhZzJw0IA/0?wx_fmt=jpeg",
"subtype": 9,
"is_multi": 0,
"multi_app_msg_item_list": [
],
"author": "",
"copyright_stat": 100,
"duration": 0,
"del_flag": 1,
"item_show_type": 8,
"audio_fileid": 0,
"play_url": "",
"malicious_title_reason_id": 0,
"malicious_content_type": 0
}
},
{
"comm_msg_info": {
"id": 1000000015,
"type": 49,
"datetime": 1726524000,
"fakeid": "3243440647",
"status": 2,
"content": ""
},
"app_msg_ext_info": {
"title": "喜迎中秋丨英泽科技祝全体员工中秋节快乐，阖家幸福！",
"digest": "",
"content": "",
"fileid": 0,
"content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484170&amp;idx=1&amp;sn=acc8424fbc6be4a9b57beb03f8d94327&amp;chksm=e8765d9c17370fa37dc369650e37b1171ca905735780620353bc1d84b5ad04c4076ad2f0ee87&amp;scene=27#wechat_redirect",
"source_url": "",
"cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gOeVdtyFKrIM3pibEEx4LQpMNhJVv3ciaafscLuLhCEuOQI1LKR0sFL0rqAVouYtM812g8U7M1ONg0w/0?wx_fmt=jpeg",
"subtype": 9,
"is_multi": 0,
"multi_app_msg_item_list": [
],
"author": "",
"copyright_stat": 100,
"duration": 0,
"del_flag": 1,
"item_show_type": 8,
"audio_fileid": 0,
"play_url": "",
"malicious_title_reason_id": 0,
"malicious_content_type": 0
}
},
{
"comm_msg_info": {
"id": 1000000014,
"type": 49,
"datetime": 1719633132,
"fakeid": "3243440647",
"status": 2,
"content": ""
},
"app_msg_ext_info": {
"title": "第二三季度员工生日会|不管几岁,开心万岁！",
"digest": "有一种企业关怀，总是悄悄浸入心灵，一定是特别的缘分，才让我们一路相伴。",
"content": "",
"fileid": 0,
"content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484105&amp;idx=1&amp;sn=6d536336ccf28aacff6f85303ea8a851&amp;chksm=e8aa2816e1a1f81d149bcaa40781a7e48350aa3ca5bffddf5934943f9094037824d7147ec639&amp;scene=27#wechat_redirect",
"source_url": "",
"cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gOzQ5K64ib4AhibWsNQvRgR4W019kvwN8JVMPJoGibvp0vc9bOfXFUibG1ZGiay49dicJ6krDia4n9R2BgEQ/0?wx_fmt=jpeg",
"subtype": 9,
"is_multi": 0,
"multi_app_msg_item_list": [
],
"author": "英泽家园",
"copyright_stat": 100,
"duration": 0,
"del_flag": 1,
"item_show_type": 0,
"audio_fileid": 0,
"play_url": "",
"malicious_title_reason_id": 0,
"malicious_content_type": 0
}
}
])
const formatDate = (timestamp: number) => {
const date = new Date(timestamp * 1000)
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
})
}
function getLocalCover(item: any) {
console.log('sasas', item)
return new URL(`../assets/news/news_${item.comm_msg_info.id}.jpg`, import.meta.url).href
try {
return new URL(`../assets/news/news_${item.comm_msg_info.id}.jpg`, import.meta.url).href
} catch (e) {
return item.app_msg_ext_info.cover
}
}
const scrollRef = ref<HTMLElement | null>(null)
let scrollTimer: number | null = null
function startScroll() {
if (scrollTimer) return
scrollTimer = window.setInterval(() => {
const el = scrollRef.value
if (el) {
if (el.scrollLeft + el.clientWidth >= el.scrollWidth - 2) {
el.scrollLeft = 0
} else {
el.scrollLeft += 2
}
}
}, 20)
}
function stopScroll() {
if (scrollTimer) {
clearInterval(scrollTimer)
scrollTimer = null
}
}
onMounted(() => {
startScroll()
})
onBeforeUnmount(() => {
stopScroll()
})
</script>
<style scoped>
.center-width {
display: flex;
height: 320px !important;
}
.left-title {
min-width: 263px;
max-width: 263px;
margin-right: 30px;
}
.new-index {
display: flex;
flex-direction: row;
overflow-x: auto;
width: 100%;
gap: 32px;
padding: 20px 0 30px 0;
scrollbar-width: none;
/* Firefox */
}
.new-index::-webkit-scrollbar {
display: none;
/* Chrome/Safari/Edge */
}
.news-item {
flex: 0 0 200px;
min-width: 300px;
max-width: 300px;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
box-shadow: inset 0 4px 24px 0 rgba(0, 0, 0, 0.1);
padding: 28px 28px 18px 28px;
transition: box-shadow 0.2s, transform 0.2s;
margin-bottom: 0;
position: relative;
}
.news-item:hover {
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.16);
transform: translateY(-4px) scale(1.02);
}
.news-content {
flex: 1;
padding-right: 0;
}
.news-title {
font-size: 22px;
font-weight: 700;
color: #222;
margin-bottom: 16px;
line-height: 1.3;
}
.news-digest {
font-size: 15px;
color: #666;
margin-bottom: 12px;
line-height: 1.6;
}
.news-meta {
display: flex;
align-items: center;
font-size: 13px;
color: #aaa;
margin-bottom: 10px;
}
.news-author {
margin-right: 18px;
color: #409eff;
}
.news-cover {
width: 100%;
height: 100px;
overflow: hidden;
border-radius: 8px;
background: #f6f6f6;
display: flex;
align-items: center;
justify-content: center;
}
.news-cover img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.news-item:hover .news-cover img {
transform: scale(1.04);
}
</style>
\ No newline at end of file
src/styles/style.css
View file @ efbbd638
...@@ -320,7 +320,7 @@ body { ...@@ -320,7 +320,7 @@ body {
background: #fff; background: #fff;
} }
.print-main { .print-main {
padding: 0px 0 130px 0; padding: 0px 0 100px 0;
} }
.print-main > .title { .print-main > .title {
width: 212px; width: 212px;
......
src/views/HomeView.vue
View file @ efbbd638
<script setup lang="ts"> <script setup lang="ts">
import Header from '@/components/Header.vue' import Header from '@/components/Header.vue'
import Service from '@/components/Service.vue' import Service from '@/components/Service.vue'
import Education from '@/components/Education.vue' // import Education from '@/components/Education.vue'
import Solution from '@/components/Solution.vue' import Solution from '@/components/Solution.vue'
import Footer from '@/components/Footer.vue' import Footer from '@/components/Footer.vue'
import News from '@/components/News.vue'
</script> </script>
<template> <template>
...@@ -12,6 +13,7 @@ import Footer from '@/components/Footer.vue' ...@@ -12,6 +13,7 @@ import Footer from '@/components/Footer.vue'
<Service /> <Service />
<!-- <Education /> --> <!-- <Education /> -->
<Solution /> <Solution />
<News />
<Footer /> <Footer />
</div> </div>
</template> </template>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment