|
|
<script setup> import { ref, onMounted } from "vue"; import { getAnnouncementAPI, qsArpAamClickAPI, getMarketAndCodeAPI, } from "../api/AIxiaocaishen";
const marketList = ref({ usa: "美股", cn: "A股", hk: "港股", sg: "新加坡股", my: "马股", th: "泰股", vi: "越南股", can: "加拿大股", });
const codeList = ref([ { market: "美股", code: [] }, { market: "A股", code: [] }, { market: "港股", code: [] }, { market: "新加坡股", code: [] }, { market: "马股", code: [] }, { market: "泰股", code: [] }, { market: "越南股", code: [] }, { market: "加拿大股", code: [] }, ]);
const getMarketAndCode = async () => { const result = await getMarketAndCodeAPI(); // console.log(result.data, "MarketAndCode");
for (let i = 0; i < result.data.length; i++) { const item = result.data[i]; const market = marketList.value[item.market]; const codeLists = item.code.split(","); // console.log(codeLists, "codeLists",market,'market');
const targetMarket = codeList.value.find((item) => item.market == market); if (targetMarket) { targetMarket.code = codeLists; // console.log(targetMarket, "targetMarket");
} else { console.log("未找到对应的市场"); } } };
const announcementVideo = ref({}); const getAnnouncement = async () => { const result = await getAnnouncementAPI(); // console.log(result.data, "result.data");
announcementVideo.value.url = result.data[0].url; announcementVideo.value.img = result.data[0].img;
const click = await qsArpAamClickAPI({ token: localStorage.getItem("localToken"), id: result.data[0].id, }); // console.log(click);
// console.log(announcementVideo.value, "announcementVideo");
};
const handleVideoPlay = () => { console.log("视频开始播放"); // 可以在这里添加播放统计逻辑
};
// 定义自定义事件
const emit = defineEmits(["updateMessage", "ensureAIchat"]);
const clickCode = (code) => { console.log(code);
emit("updateMessage", code); emit("ensureAIchat"); };
onMounted(() => { getAnnouncement();
getMarketAndCode(); }); </script> <template> <div class="main-wrapper"> <div class="video-container"> <video ref="videoPlayer" :poster="announcementVideo.img" :src="announcementVideo.url" controls class="video-player" @play="handleVideoPlay" > Your browser does not support the video tag. </video> </div> <!-- 一段文字,水平居中,宽度为500px -->
<div class="announcement"> <p class="announcementItem">各位AI小财神的用户,大家好!</p> <p class="announcementItem"> 试运行期间,用户可在AI小财神中查看全市场数据,每个市场可查看20只股票. </p> <p class="announcementItem">以下为各个市场可以查看的股票:</p> <!-- <p class="announcementItem">历软件云版静态市场一致!</p> <p class="announcementItem">特此公告!</p> --> <div v-for="(item, index) in codeList" :key="index" class="announcementItem" > <div class="announcementItem"> {{ item.market }}: <span class="codeItem" v-for="(code, index) in item.code" :key="index" > <span v-if="index != 0" class="codeItem"> 、 </span> <span @click="clickCode(code)" class="code"> {{ code }} </span> </span> </div> </div> </div> </div> </template> <style scoped> .main-wrapper { height: 100%; display: flex; flex-direction: column; overflow-y: auto; }
.video-container { max-width: 800px; /* 从 800px 改为百分比 */ width: 90%; margin: 20px auto; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); flex-shrink: 0; }
.video-player { width: 100%; aspect-ratio: 16/9; background-color: #000; object-fit: contain; /* 从 cover 改为 contain */ }
/* 添加移动端适配 */ @media (max-width: 768px) { .video-container { margin: 10px auto; border-radius: 4px; }
.announcement { max-width: 90%; font-size: 14px; } }
.announcement { margin: 20px 10%; font-size: 20px; font-weight: bold; }
.announcementItem { margin-bottom: 10px; color: white; }
p { color: white; }
.codeItem { color: #4591e7; }
.code { cursor: pointer; } </style>
|