sj-miniprogram/pages/message/msgdetail.vue

<template>
  <view class="container">
    <view class="detail-card card-anim">
      <view class="msg-title">{{ msgData.title || '消息详情' }}</view>
      
      <view class="info-list">
        <view class="info-item">
          <text class="label">岗位：</text>
          <text class="value">{{ msgData.position || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">公司：</text>
          <text class="value">{{ msgData.company || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">进度：</text>
          <text class="value status-text">{{ msgData.status || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">时间：</text>
          <text class="value">{{ msgData.time || '-' }}</text>
        </view>
        <view class="info-item vertical">
          <text class="label mb-8">说明：</text>
          <text class="value desc-text">{{ msgData.desc || '暂无说明' }}</text>
        </view>
      </view>
    </view>
    
    <!-- 到底啦提示 -->
    <view class="end-tip">
      <view class="line"></view>
      <text class="end-text">已到底啦~</text>
      <view class="line"></view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const msgData = ref({
  title: '',
  position: '',
  company: '',
  status: '',
  desc: ''
});

onLoad((options) => {
  if (options.data) {
    try {
      const decoded = decodeURIComponent(options.data);
      msgData.value = JSON.parse(decoded);
    } catch (e) {
      console.error('Parse msg data error', e);
    }
  }
});
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #F8F9FB;
  padding: 30rpx;
}

.detail-card {
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.03);
  
  .msg-title {
    font-size: 38rpx;
    font-weight: bold;
    color: #1A1A1A;
    display: block;
    margin-bottom: 30rpx;
  }
  
  .info-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    
    .info-item {
      display: flex;
      font-size: 30rpx;
      line-height: 1.5;
      
      &.vertical {
        flex-direction: column;
      }
      
      .label {
        color: #999999;
        flex-shrink: 0;
      }
      
      .mb-8 {
        margin-bottom: 8rpx;
      }
      
      .value {
        color: #666666;
      }
      
      .status-text {
        color: #1F6CFF;
        font-weight: 500;
      }
      
      .desc-text {
        color: #888888;
        font-size: 28rpx;
        line-height: 1.6;
      }
    }
  }
}

.end-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
  .line {
    width: 60rpx;
    height: 1rpx;
    background: #E0E0E0;
    margin: 0 20rpx;
  }
  .end-text {
    font-size: 24rpx;
    color: #CCCCCC;
  }
}

.card-anim {
  animation: fadeInDown 0.4s ease-out;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20rpx); }
  to { opacity: 1; transform: translateY(0); }
}
</style>