Swanky
6 months ago
parent
dc5658513c
commit
55a7f3c79c
@ -0,0 +1,197 @@ |
||||
<template> |
||||
<div class="scrolling-announcement"> |
||||
<div class="announcement-header"> |
||||
<div class="header-icon">📢</div> |
||||
<div class="header-title">最新公告</div> |
||||
</div> |
||||
<div class="announcement-content"> |
||||
<div class="scrolling-container" ref="scrollingContainer"> |
||||
<div |
||||
class="announcement-item current" |
||||
:key="'current-' + currentIndex" |
||||
> |
||||
{{ announcements[currentIndex]?.content }} |
||||
</div> |
||||
<div |
||||
class="announcement-item next" |
||||
:key="'next-' + nextIndex" |
||||
> |
||||
{{ announcements[nextIndex]?.content }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, onMounted, onUnmounted, reactive, computed } from 'vue' |
||||
|
||||
const scrollingContainer = ref(null) |
||||
const currentIndex = ref(0) |
||||
const isAnimating = ref(false) |
||||
let scrollTimer = null |
||||
|
||||
const announcements = reactive([]) |
||||
|
||||
// 计算下一个索引 |
||||
const nextIndex = computed(() => { |
||||
return announcements.length > 0 ? (currentIndex.value + 1) % announcements.length : 0 |
||||
}) |
||||
|
||||
// 加载公告数据 |
||||
const loadAnnouncements = async () => { |
||||
// 室外页面直接使用默认模拟数据，确保显示效果 |
||||
console.log('室外页面使用专用公告数据') |
||||
loadDefaultAnnouncements() |
||||
} |
||||
|
||||
// 加载默认公告 |
||||
const loadDefaultAnnouncements = () => { |
||||
announcements.splice(0, announcements.length, |
||||
{ content: '【重要通知】今日牦牛交易价格上涨2.5%，活牛32.8元/公斤，鲜肉78.5元/公斤，受春季需求增长影响，请商户关注行情变化，合理安排采购计划' }, |
||||
{ content: '【招商信息】新增北京、上海、广州、深圳等一线城市优质采购商入驻，涵盖餐饮连锁、精品超市、生鲜电商等业态，欢迎牧民朋友联系洽谈合作' }, |
||||
{ content: '【系统维护】本周末（3月18日22:00-19日08:00）系统升级维护，交易时间调整为09:00-17:00，支付功能暂停4小时，请提前安排交易事宜' }, |
||||
{ content: '【市场资讯】受春季牧草丰茂、气候适宜等因素影响，预计下月牦牛供应量增加15%，达8500头左右，肉质品质提升，建议采购商提前规划库存' }, |
||||
{ content: '【质量报告】西藏、青海、甘肃等主要产区肉品检测合格率达98.5%，创历史新高，蛋白质含量21.8%，重金属含量远低于国标，品质安全有保障' }, |
||||
{ content: '【政策利好】国家三部委发布牦牛产业发展指导意见，三年内投入50亿元专项资金，支持养殖技术、品种改良、冷链物流等领域，并给予税收减免支持' }, |
||||
{ content: '【安全提醒】近期发现不法分子冒充平台工作人员诈骗，以系统升级、账户异常为借口要求转账，请提高警惕，平台绝不私下要求转账，疑问请联系客服400-8888-666' }, |
||||
{ content: '【物流升级】与顺丰、德邦、中通等企业合作开通专业冷链服务，覆盖全国主要城市，配备冷藏车辆恒温仓储，一线城市24小时送达，配送效率提升60%' }, |
||||
{ content: '【技术创新】推出AI智能定价系统2.0，整合市场供需、季节变化、品质等级等数据，运用深度学习算法提供精准价格参考，预计节省交易成本15-20%' }, |
||||
{ content: '【节日祝福】藏历新年洛萨节即将到来，平台全体员工向牧民朋友和合作伙伴致以节日祝福，祝大家新年健康幸福、生意兴隆，牦牛产业蒸蒸日上，扎西德勒！' } |
||||
) |
||||
} |
||||
|
||||
// 执行滚动动画 |
||||
const performScroll = () => { |
||||
if (isAnimating.value || announcements.length <= 1) return |
||||
|
||||
isAnimating.value = true |
||||
const container = scrollingContainer.value |
||||
|
||||
// 添加滚动类来触发动画 |
||||
container.classList.add('scrolling') |
||||
|
||||
// 动画完成后更新索引并重置状态 |
||||
setTimeout(() => { |
||||
currentIndex.value = nextIndex.value |
||||
container.classList.remove('scrolling') |
||||
isAnimating.value = false |
||||
}, 800) // 动画持续时间 |
||||
} |
||||
|
||||
// 开始垂直滚动 |
||||
const startVerticalScroll = () => { |
||||
if (announcements.length <= 1) return |
||||
|
||||
scrollTimer = setInterval(() => { |
||||
performScroll() |
||||
}, 5000) // 每5秒切换一次 |
||||
} |
||||
|
||||
// 停止滚动 |
||||
const stopVerticalScroll = () => { |
||||
if (scrollTimer) { |
||||
clearInterval(scrollTimer) |
||||
scrollTimer = null |
||||
} |
||||
} |
||||
|
||||
onMounted(async () => { |
||||
await loadAnnouncements() |
||||
// 等待数据加载完成后开始滚动 |
||||
if (announcements.length > 1) { |
||||
startVerticalScroll() |
||||
} |
||||
}) |
||||
|
||||
onUnmounted(() => { |
||||
stopVerticalScroll() |
||||
}) |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.scrolling-announcement { |
||||
position: absolute; |
||||
top: 20px; |
||||
left: 0; |
||||
right: 0; |
||||
height: 70px; |
||||
background: rgba(26, 31, 46, 0.95); |
||||
border: 1px solid rgba(64, 158, 255, 0.4); |
||||
border-radius: 8px; |
||||
backdrop-filter: blur(10px); |
||||
z-index: 100; |
||||
overflow: hidden; |
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); |
||||
} |
||||
|
||||
.announcement-header { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
bottom: 0; |
||||
width: 140px; |
||||
background: rgba(64, 158, 255, 0.2); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
gap: 8px; |
||||
border-right: 1px solid rgba(64, 158, 255, 0.3); |
||||
} |
||||
|
||||
.header-icon { |
||||
font-size: 20px; |
||||
} |
||||
|
||||
.header-title { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: #409EFF; |
||||
} |
||||
|
||||
.announcement-content { |
||||
margin-left: 140px; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
position: relative; |
||||
} |
||||
|
||||
.scrolling-container { |
||||
position: relative; |
||||
height: 100%; |
||||
width: 100%; |
||||
} |
||||
|
||||
.announcement-item { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 28px; |
||||
color: #fff; |
||||
padding: 0 30px; |
||||
white-space: nowrap; |
||||
transition: transform 0.8s ease-in-out; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.announcement-item.current { |
||||
transform: translateY(0); |
||||
} |
||||
|
||||
.announcement-item.next { |
||||
transform: translateY(100%); |
||||
} |
||||
|
||||
/* 滚动动画状态 */ |
||||
.scrolling-container.scrolling .announcement-item.current { |
||||
transform: translateY(-100%); |
||||
} |
||||
|
||||
.scrolling-container.scrolling .announcement-item.next { |
||||
transform: translateY(0); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,303 @@ |
||||
<template> |
||||
<div class="outdoor-viewport"> |
||||
<div class="outdoor-container" ref="containerRef"> |
||||
<!-- 顶部时间日期天气区域 --> |
||||
<div class="header-datetime"> |
||||
<div class="datetime-info"> |
||||
<span class="date">{{ currentDate }}</span> |
||||
<span class="weekday">{{ currentWeekday }}</span> |
||||
<span class="lunar">{{ lunarDate }}</span> |
||||
<span class="weather">{{ weather }}</span> |
||||
<span class="temperature">{{ temperature }}</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 滚动公告区域 --> |
||||
<div class="announcement-section"> |
||||
<ScrollingAnnouncement /> |
||||
</div> |
||||
|
||||
<!-- 主内容四象限布局 --> |
||||
<div class="main-content"> |
||||
<!-- 左上：牦牛实时交易概况 --> |
||||
<div class="content-area top-left"> |
||||
<YakTradingOverview /> |
||||
</div> |
||||
|
||||
<!-- 右上：活牛、鲜肉价格趋势 --> |
||||
<div class="content-area top-right"> |
||||
<PriceTrendChart /> |
||||
</div> |
||||
|
||||
<!-- 左下：待交易牦牛数据 --> |
||||
<div class="content-area bottom-left"> |
||||
<PendingYakData /> |
||||
</div> |
||||
|
||||
<!-- 右下：交易结算数据 --> |
||||
<div class="content-area bottom-right"> |
||||
<TransactionSettlement /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, onMounted, onUnmounted } from 'vue' |
||||
import ScrollingAnnouncement from '../components/Outdoor/ScrollingAnnouncement.vue' |
||||
import YakTradingOverview from '../components/Outdoor/YakTradingOverview.vue' |
||||
import PriceTrendChart from '../components/Outdoor/PriceTrendChart.vue' |
||||
import PendingYakData from '../components/Outdoor/PendingYakData.vue' |
||||
import TransactionSettlement from '../components/Outdoor/TransactionSettlement.vue' |
||||
import { Lunar, Solar } from 'lunar-javascript' |
||||
|
||||
// 基准分辨率 3000×1500 |
||||
const BASE_WIDTH = 3000 |
||||
const BASE_HEIGHT = 1500 |
||||
|
||||
// 响应式数据 |
||||
const containerRef = ref(null) |
||||
const currentDate = ref('') |
||||
const currentWeekday = ref('') |
||||
const lunarDate = ref('') |
||||
const weather = ref('晴') |
||||
const temperature = ref('18°C') |
||||
|
||||
// 更新时间日期 |
||||
const updateDateTime = () => { |
||||
const now = new Date() |
||||
|
||||
// 格式化日期 |
||||
const year = now.getFullYear() |
||||
const month = now.getMonth() + 1 |
||||
const day = now.getDate() |
||||
currentDate.value = `${year}年${month}月${day}日` |
||||
|
||||
// 星期 |
||||
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] |
||||
currentWeekday.value = weekdays[now.getDay()] |
||||
|
||||
// 农历日期计算 |
||||
try { |
||||
const solar = Solar.fromDate(now) |
||||
const lunar = solar.getLunar() |
||||
|
||||
const lunarMonth = lunar.getMonthInChinese() |
||||
const lunarDay = lunar.getDayInChinese() |
||||
|
||||
const lunarString = lunar.toString() |
||||
const isLeapMonth = lunarString.includes('闰') |
||||
|
||||
let monthName = lunarMonth |
||||
|
||||
const monthMap = { |
||||
'正': '正月', '一': '正月', '二': '二月', '三': '三月', |
||||
'四': '四月', '五': '五月', '六': '六月', '七': '七月', |
||||
'八': '八月', '九': '九月', '十': '十月', '冬': '冬月', '腊': '腊月' |
||||
} |
||||
|
||||
if (monthMap[monthName]) { |
||||
monthName = monthMap[monthName] |
||||
} else if (!monthName.includes('月')) { |
||||
monthName = monthName + '月' |
||||
} |
||||
|
||||
if (isLeapMonth && !monthName.startsWith('闰')) { |
||||
monthName = '闰' + monthName |
||||
} |
||||
|
||||
lunarDate.value = `农历${monthName}${lunarDay}` |
||||
} catch (error) { |
||||
console.error('农历计算错误:', error) |
||||
lunarDate.value = '农历计算中...' |
||||
} |
||||
} |
||||
|
||||
// 页面缩放适配 |
||||
const updateScale = () => { |
||||
if (!containerRef.value) return |
||||
|
||||
const windowWidth = window.innerWidth |
||||
const windowHeight = window.innerHeight |
||||
|
||||
// 计算缩放比例 |
||||
const scaleX = windowWidth / BASE_WIDTH |
||||
const scaleY = windowHeight / BASE_HEIGHT |
||||
|
||||
// 取较小的缩放比例，确保内容完全可见 |
||||
const scale = Math.min(scaleX, scaleY) |
||||
|
||||
// 应用缩放 |
||||
containerRef.value.style.transform = `scale(${scale})` |
||||
containerRef.value.style.transformOrigin = 'top left' |
||||
|
||||
// 调整容器位置，使其居中 |
||||
const scaledWidth = BASE_WIDTH * scale |
||||
const scaledHeight = BASE_HEIGHT * scale |
||||
|
||||
const offsetX = (windowWidth - scaledWidth) / 2 |
||||
const offsetY = (windowHeight - scaledHeight) / 2 |
||||
|
||||
containerRef.value.style.left = `${offsetX}px` |
||||
containerRef.value.style.top = `${offsetY}px` |
||||
} |
||||
|
||||
let timer = null |
||||
|
||||
onMounted(() => { |
||||
updateDateTime() |
||||
timer = setInterval(updateDateTime, 60000) // 每分钟更新一次 |
||||
|
||||
// 隐藏页面滚动条 |
||||
document.body.style.overflow = 'hidden' |
||||
document.documentElement.style.overflow = 'hidden' |
||||
|
||||
// 初始化缩放 |
||||
updateScale() |
||||
|
||||
// 监听窗口大小变化 |
||||
window.addEventListener('resize', updateScale) |
||||
}) |
||||
|
||||
onUnmounted(() => { |
||||
if (timer) { |
||||
clearInterval(timer) |
||||
} |
||||
window.removeEventListener('resize', updateScale) |
||||
|
||||
// 恢复页面滚动条 |
||||
document.body.style.overflow = 'auto' |
||||
document.documentElement.style.overflow = 'auto' |
||||
}) |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.outdoor-viewport { |
||||
width: 100vw; |
||||
height: 100vh; |
||||
background: #000000; |
||||
overflow: hidden; |
||||
position: relative; |
||||
} |
||||
|
||||
.outdoor-container { |
||||
width: 3000px; |
||||
height: 1500px; |
||||
background: |
||||
radial-gradient(ellipse at 25% 25%, rgba(64, 158, 255, 0.08) 0%, transparent 50%), |
||||
radial-gradient(ellipse at 75% 75%, rgba(139, 92, 246, 0.06) 0%, transparent 50%), |
||||
linear-gradient(135deg, #0a0e1a 0%, #0f1419 25%, #131825 50%, #0f1419 75%, #0a0e1a 100%); |
||||
display: flex; |
||||
flex-direction: column; |
||||
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; |
||||
color: #ffffff; |
||||
overflow: hidden; |
||||
padding: 30px; |
||||
box-sizing: border-box; |
||||
position: absolute; |
||||
} |
||||
|
||||
/* 顶部时间日期天气区域 */ |
||||
.header-datetime { |
||||
height: 80px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.datetime-info { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 50px; |
||||
font-size: 36px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.date { |
||||
color: #ffffff; |
||||
font-size: 36px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.weekday { |
||||
color: #409EFF; |
||||
font-size: 36px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.lunar { |
||||
color: #67C23A; |
||||
font-size: 36px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.weather { |
||||
color: #E6A23C; |
||||
font-size: 36px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.temperature { |
||||
color: #F56C6C; |
||||
font-size: 36px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
/* 滚动公告区域 */ |
||||
.announcement-section { |
||||
height: 90px; |
||||
margin-bottom: 25px; |
||||
position: relative; |
||||
} |
||||
|
||||
/* 主内容四象限网格布局 */ |
||||
.main-content { |
||||
flex: 1; |
||||
display: grid; |
||||
grid-template-columns: 1fr 1fr; |
||||
grid-template-rows: 1fr 1fr; |
||||
gap: 25px; |
||||
min-height: 0; |
||||
} |
||||
|
||||
.content-area { |
||||
background: rgba(15, 25, 45, 0.4); |
||||
backdrop-filter: blur(20px) saturate(180%); |
||||
border-radius: 20px; |
||||
border: 1px solid rgba(255, 255, 255, 0.1); |
||||
box-shadow: |
||||
0 12px 48px rgba(0, 0, 0, 0.3), |
||||
0 6px 24px rgba(64, 158, 255, 0.1), |
||||
inset 0 2px 0 rgba(255, 255, 255, 0.1); |
||||
overflow: hidden; |
||||
transition: all 0.3s ease; |
||||
} |
||||
|
||||
.content-area:hover { |
||||
transform: translateY(-3px); |
||||
box-shadow: |
||||
0 18px 72px rgba(0, 0, 0, 0.4), |
||||
0 9px 36px rgba(64, 158, 255, 0.15), |
||||
inset 0 2px 0 rgba(255, 255, 255, 0.15); |
||||
} |
||||
|
||||
.top-left { |
||||
grid-area: 1 / 1 / 2 / 2; |
||||
} |
||||
|
||||
.top-right { |
||||
grid-area: 1 / 2 / 2 / 3; |
||||
} |
||||
|
||||
.bottom-left { |
||||
grid-area: 2 / 1 / 3 / 2; |
||||
} |
||||
|
||||
.bottom-right { |
||||
grid-area: 2 / 2 / 3 / 3; |
||||
} |
||||
|
||||
|
||||
</style> |
||||
Loading…
Reference in new issue