181 lines
3.9 KiB
Vue
181 lines
3.9 KiB
Vue
<template>
|
||
<view class="flashContainer">
|
||
<!-- 头部区域 -->
|
||
<view class="flashHeader">
|
||
<view class="flashBack" @click="back">
|
||
<u-icon size="20" name="arrow-left" color="#fff"></u-icon>
|
||
</view>
|
||
<view class="flashTitle">
|
||
<view class="flashLogo"></view>
|
||
<view class="flashIntro">获取消息快人一步</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 时间区域 -->
|
||
<view class="timeContainer">
|
||
<view class="time">2024年11月12日</view>
|
||
<view class="selectTimeBtn" @click="show = true">选择日期</view>
|
||
</view>
|
||
|
||
<u-list>
|
||
<u-list-item v-for="(item, index) in indexList" :key="index">
|
||
<flashItem :data="item" :key="index" />
|
||
</u-list-item>
|
||
</u-list>
|
||
<u-calendar color="#e7303f" :show="show" @close="show = false"></u-calendar>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from "vue";
|
||
import flashItem from "./components/flashItem.vue";
|
||
|
||
const indexList = ref([
|
||
{
|
||
id: 1,
|
||
time: "15:31:12",
|
||
title: "市场风格切换 大中盘股相关ETF领涨",
|
||
read: 100,
|
||
like: 210,
|
||
comment: 200,
|
||
},
|
||
{
|
||
id: 2,
|
||
time: "14:47:21",
|
||
title: "亚盛医药APG-2575新药上市申请获受理",
|
||
read: 323,
|
||
like: 10,
|
||
comment: 1000,
|
||
},
|
||
{
|
||
id: 3,
|
||
time: "13:46:10",
|
||
title: "诺诚健华宣布奥布替尼多项研究成果入选第66届美国血液学会年会",
|
||
read: 240,
|
||
like: 210,
|
||
comment: 20,
|
||
},
|
||
{
|
||
id: 4,
|
||
time: "13:45:01",
|
||
title: "汉朔科技IPO提交注册 前三季度营收净利双增",
|
||
read: 450,
|
||
like: 210,
|
||
comment: 1000,
|
||
},
|
||
{
|
||
id: 5,
|
||
time: "13:44:47",
|
||
title: "止跌回升，黄金相关ETF集体反弹",
|
||
read: 320,
|
||
like: 210,
|
||
comment: 100,
|
||
},
|
||
{
|
||
id: 6,
|
||
time: "13:34:12",
|
||
title: "A500ETF基金（512050）半日成交额超15亿元",
|
||
read: 380,
|
||
like: 217,
|
||
comment: 1000,
|
||
},
|
||
{
|
||
id: 7,
|
||
time: "12:18:01",
|
||
title: "破净概念股掀起涨停潮 多只红利主题ETF涨超4%",
|
||
read: 600,
|
||
like: 250,
|
||
comment: 1000,
|
||
},
|
||
{
|
||
id: 8,
|
||
time: "11:07:21",
|
||
title: "奇精机械荣获“2024年宁波市人民政府质量创新奖”",
|
||
read: 100,
|
||
like: 210,
|
||
comment: 1000,
|
||
},
|
||
{
|
||
id: 9,
|
||
time: "11:05:01",
|
||
title: "龙腾光电荣获2024年度江苏省企业研发机构促进会科学技术奖一等奖",
|
||
read: 330,
|
||
like: 210,
|
||
comment: 1000,
|
||
},
|
||
// {},
|
||
{
|
||
id: 10,
|
||
time: "10:42:12",
|
||
title: "中国建筑前10月新签合同总额稳健增长",
|
||
read: 600,
|
||
like: 250,
|
||
comment: 1000,
|
||
}
|
||
]);
|
||
const show = ref(false);
|
||
|
||
const back = () => {
|
||
uni.redirectTo({
|
||
url: "/pages/home/index",
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.flashContainer {
|
||
font-size: 12px;
|
||
// 头部区域
|
||
.flashHeader {
|
||
height: 168rpx;
|
||
background-image: url(@/assets/images/headerBg.png);
|
||
background-size: cover;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 32rpx 20rpx 40rpx;
|
||
.flashBack {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.flashTitle {
|
||
box-sizing: border-box;
|
||
padding-top: 21rpx;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
.flashLogo {
|
||
width: 192rpx;
|
||
height: 58rpx;
|
||
background-image: url(@/assets/images/flashLogo.png);
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
.flashIntro {
|
||
color: #fff;
|
||
padding-left: 9rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 时间区域
|
||
.timeContainer {
|
||
box-sizing: border-box;
|
||
padding: 20rpx 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.selectTimeBtn {
|
||
box-sizing: border-box;
|
||
padding: 9rpx 12rpx;
|
||
border: 1px solid #e7303f;
|
||
font-size: 10px;
|
||
color: #e7303f;
|
||
border-radius: 999rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|