AIxiaocaishen/src/views/AIfind.vue

<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>