zhxy-jzd/src/pages/base/home/detail.vue

<template>
  <view class="notice-detail">
    <!-- 通知头部 -->
    <view class="notice-header">
      <view class="notice-title">
        <text>开学典礼安排通知</text>
      </view>
      <view class="notice-meta">
        <text class="publisher">发布人: 李校长</text>
        <text class="date">2023-07-18 10:30</text>
      </view>
    </view>

    <!-- 通知内容 -->
    <view class="notice-content">
      <view class="content-section">
        <text class="section-title">尊敬的各位家长：</text>
        <text class="section-text">您好！经学校研究决定，将于2023年9月1日（星期五）上午9:00举行新学年开学典礼。现将有关事项通知如下：</text>
      </view>
      
      <view class="content-section">
        <text class="section-title">一、时间安排</text>
        <text class="section-text">1. 开学典礼时间：2023年9月1日（星期五）上午9:00-10:30</text>
        <text class="section-text">2. 学生到校时间：上午8:30前</text>
        <text class="section-text">3. 家长参观时间：上午10:30-11:30</text>
      </view>
      
      <view class="content-section">
        <text class="section-title">二、地点</text>
        <text class="section-text">学校操场（雨天改至体育馆）</text>
      </view>
      
      <view class="content-section">
        <text class="section-title">三、着装要求</text>
        <text class="section-text">1. 学生：穿着校服，佩戴校徽</text>
        <text class="section-text">2. 教师：着正装</text>
      </view>
      
      <view class="content-section">
        <text class="section-title">四、注意事项</text>
        <text class="section-text">1. 请家长们提前安排孩子的出行，避免迟到</text>
        <text class="section-text">2. 开学当天请带齐学习用品</text>
        <text class="section-text">3. 新生请佩戴校牌</text>
        <text class="section-text">4. 如遇天气变化，请关注学校短信通知</text>
      </view>
      
      <view class="content-section">
        <text class="section-title">五、联系方式</text>
        <text class="section-text">学校办公室：0123-4567890</text>
        <text class="section-text">教务处：0123-4567891</text>
      </view>
      
      <view class="content-section">
        <text class="section-text">感谢各位家长的配合与支持！</text>
      </view>
    </view>

    <!-- 附件区域 -->
    <view class="attachment-section">
      <view class="section-header">
        <text class="header-title">附件</text>
      </view>
      
      <view class="attachment-list">
        <view class="attachment-item" @click="previewAttachment">
          <u-icon name="file-text" size="22" color="#2D81FF"></u-icon>
          <text class="attachment-name">开学典礼流程安排.pdf</text>
          <u-icon name="download" size="20" color="#999"></u-icon>
        </view>
        
        <view class="attachment-item" @click="previewAttachment">
          <u-icon name="file-text" size="22" color="#2D81FF"></u-icon>
          <text class="attachment-name">学校地图及交通指南.pdf</text>
          <u-icon name="download" size="20" color="#999"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 预览附件
const previewAttachment = () => {
  uni.showToast({
    title: "附件下载中...",
    icon: "loading"
  });
  
  // 模拟下载过程
  setTimeout(() => {
    uni.showToast({
      title: "下载成功",
      icon: "success"
    });
  }, 1500);
};

// 分享通知
const shareNotice = () => {
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  });
};
</script>

<style lang="scss" scoped>
// 工具类
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notice-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 80px; // 留出底部按钮的空间
}

// 通知头部
.notice-header {
  background-color: #fff;
  padding: 20px;
  border-bottom: 1px solid #eee;
  
  .notice-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
  }
  
  .notice-meta {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #999;
    
    .publisher {
      margin-right: 15px;
    }
  }
}

// 通知内容
.notice-content {
  background-color: #fff;
  padding: 20px;
  margin-top: 10px;
  
  .content-section {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 10px;
      display: block;
    }
    
    .section-text {
      font-size: 15px;
      color: #666;
      line-height: 1.6;
      margin-bottom: 10px;
      display: block;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

// 附件区域
.attachment-section {
  background-color: #fff;
  padding: 20px;
  margin-top: 10px;
  
  .section-header {
    margin-bottom: 15px;
    
    .header-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }
  
  .attachment-list {
    .attachment-item {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      background-color: #f9f9f9;
      border-radius: 8px;
      margin-bottom: 10px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .attachment-name {
        flex: 1;
        font-size: 14px;
        color: #333;
        margin: 0 10px;
        @include text-ellipsis;
      }
    }
  }
}

// 底部按钮
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px 20px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  
  .action-btn {
    width: 100%;
    height: 45px;
    line-height: 45px;
    border-radius: 25px;
    font-size: 16px;
    
    &.share {
      background: linear-gradient(to right, #2D81FF, #5A9EFF);
      color: #fff;
    }
    
    &::after {
      border: none;
    }
  }
}
</style>