<template>
    <view class="con-body">
        <view class="con-bg">
            <!-- 头部 -->
            <customHeader ref="customHeaderRef" :title="'消息通知'" :leftFlag="true" :rightFlag="false"></customHeader>

            <!-- 高度来避免头部遮挡 -->
            <view class="top-height"></view>

            <!-- 正文内容 -->
            <view class="white-bg">
                <view class="n-title">{{ title }}</view>
                <view class="n-time">
                   <text>来自：{{appName}}</text> {{ time }}
                </view>
                <view class="btn-blue"  @click="handleJump">跳转详情页</view>
            </view>

            <!-- 底部加高度来避免tabbar遮挡 -->
            <view class="bottom-height"></view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import customHeader from '@/components/customHeader.vue'
import {showToast} from '@/utils/message.js'

// 加载后调用
let title = ref(null);
let time = ref(null);
let appName = ref(null);
onLoad((options) => {
    console.log(options)
    title.value = options.title;
    time.value = options.time;
    appName.value = options.appName
})

// 跳转webview
const handleJump = ()=>{
    showToast('暂不支持跳转');
}

</script>

<style scoped>
.white-bg {
    width: 650rpx;
    padding:30rpx 50rpx;
    height:100vh;
    margin: 0;
    border-radius: 8px 8px 0 0;
    
}
.white-bg .n-title{
    font-size:40rpx;
    font-weight: bold;
    padding:20rpx 0 25rpx;
    text-align: center;
    border-bottom: 1px solid #BFBFBF;
}
.white-bg .n-time{
    text-align: center;
    color:#919191;
    font-size:26rpx;
    padding:20rpx;
}
.white-bg .n-time text{
    margin-right:50rpx;
}
.btn-blue {
    background-color: #05A3F4;
    color: #fff;
    width:380rpx;
    height:80rpx;
    line-height: 80rpx;
    margin:300rpx auto 0;
    text-align: center;
    border-radius: 40rpx;
}
</style>