cankao-h5/src/pages/flash/index.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>