subject_gxj/xj_project_app_2024_2_18/pages/announcement/index.vue

<template>
  <view class="container">
    <page-title>公告详情</page-title>

    <view class="cards-list">
      <view class="card only-card">
        <view class="card-item first-card-item">
          <view class="card-item-announcement-detail">{{pageForm.title}}</view>
        </view>
        <view class="line"></view>
        <view class="card-item">
          <view class="card-item-name">发布时间: {{pageForm.publishDate}}</view>
        </view>
      </view>

      <view class="card" style="margin-top: 120rpx;border-radius: 12rpx 12rpx 12rpx 0px !important;">
       <view class="card-item" style="position: relative;">
          <view class="card-item-announcement">详情内容</view>
        </view>
        <view class="card-parse">
          <u-parse :content="pageForm.content"></u-parse>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from "vue"

  import {
    onLoad
  } from "@dcloudio/uni-app"

  import {
    getannouncemenDetail,
  } from "@/api/home.js"

  let pageForm = ref({
    title: null,
    publishDate: null,
    content: null
  })

  onLoad(options => {
    getannouncemenDetail({
      id: options.id
    }).then(res => {
      pageForm.value.title = res.data.title;
      pageForm.value.publishDate = res.data.publishDate;
      pageForm.value.content = res.data.content;
    })
  })
</script>

<style lang="scss" scoped>
  .card-parse {
    margin-top: 32rpx;
	min-height: 400rpx;
  }

  .card-item {
    .card-item-announcement-detail {
      font-weight: 500;
      font-size: 28rpx;
      color: #222222;
      line-height: 44rpx;
    }

    .card-item-name {
      width: auto;
      font-size: 24rpx;
    }

    .card-item-announcement {
      position: absolute;
      top: -64rpx;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200rpx;
      height: 64rpx;
      background: linear-gradient(180deg, #005CA2 0%, #002F69 100%);
      border-radius: 12rpx 36rpx 0px 0px;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
    }
  }

  .line {
    width: 100%;
    height: 1px;
    border-top: 1px dashed #DDDDDD;
    margin: 10rpx auto;
  }
  .card{
  }
</style>