You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
1.8 KiB
84 lines
1.8 KiB
<script setup>
|
|
import { ref } from 'vue'
|
|
// 新闻飘屏数据
|
|
const newsList = ref(Array(10).fill().map((_, i) => ({
|
|
title: `每日资讯 ${i + 1}`,
|
|
content: `资讯 ${i + 1} 的详细内容...`
|
|
})))
|
|
|
|
// 弹窗控制
|
|
const dialogVisible = ref(false)
|
|
const currentNews = ref('')
|
|
const showNews = (news) => {
|
|
currentNews.value = news
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="news-container">
|
|
<el-text v-for="(news, index) in newsList" :key="index" class="news-item" @click="showNews(news)">
|
|
{{ news.title }}
|
|
</el-text>
|
|
|
|
<el-text class="daily-item">
|
|
<span>【</span>
|
|
<span class="purple-text">每日复盘</span>
|
|
<span>】 即将上线，</span>
|
|
<br>
|
|
<span>敬请期待！</span>
|
|
</el-text>
|
|
</div>
|
|
|
|
<!-- 新闻弹窗 -->
|
|
<el-dialog v-model="dialogVisible" title="每日资讯详情" width="60%" >
|
|
<p>{{ currentNews.content }}</p>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.news-container {
|
|
height: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* 水平居中 */
|
|
gap: 10px;
|
|
}
|
|
|
|
.news-item {
|
|
width: 60%;
|
|
/* 拉长宽度 */
|
|
padding: 10px;
|
|
border: 2px solid #af84e0 !important;
|
|
/* 紫色边框 */
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
/* 文字居中 */
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 768px) {
|
|
.news-item {
|
|
width: 60%;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.purple-text {
|
|
color: #7315df !important;
|
|
}
|
|
|
|
.daily-item {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
line-height: 1.8;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
/* 保持首行不换行 */
|
|
}
|
|
</style>
|