<template>
  <view class="container">
    <!-- 系统通知 /  订单通知-->
    <view class="content-item" v-for="item of 2" v-show="type == 1 || type == 2">
      <p class="item-time">2023-10-26 23:35</p>
      <view class="item">
        <view class="item-box">
          <p class="item-title"> 店铺LOGO审核通过 </p>
          <p class="item-content"> 您修改的店铺LOGO审核通过 </p>
        </view>
        <view class="item-bottom">
          <p>点击查看详情</p>
          <u-icon name="arrow-right" color="#A1A1A1" size="18"></u-icon>
        </view>
      </view>
    </view>

    <!-- 活动通知 -->
    <view class="content-item2" v-for="item of 2" v-show='type == 3'>
      <p class="item-time">2023-10-26 23:35</p>
      <view class="item">
        <view class="item-box">
          <p class="item-content"> 您修改的店铺LOGO审核通过 </p>
          <img class="item-img" src="@/static/logo.png" alt="">
        </view>
        <view class="item-bottom">
          <p>点击查看详情</p>
          <u-icon name="arrow-right" color="#A1A1A1" size="18"></u-icon>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        type: 0
      }
    },
    onLoad(option) {
      this.type = option.type
      console.log('type',this.type);
      if(this.type == 1){
        uni.setNavigationBarTitle({
          title: '系统通知'
        });
      }else if(this.type == 2){
        uni.setNavigationBarTitle({
          title: '订单通知'
        });
      }else{
        uni.setNavigationBarTitle({
          title: '活动通知'
        });
      }
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 20rpx;
    min-height: calc(100vh - 40rpx);
    background-color: #F5F5F5 !important;
    .content-item,.content-item2{
      .item-time{
        text-align: center;
        color: #999999;
        font-size:26rpx;
      }
      .item{
        background-color: #FBFBFB;
        margin: 20rpx 0;
        border-radius: 20rpx;
        padding: 20rpx;
        .item-box{
          .item-title{
            color: #000;
            font-size:28rpx;
          }
          .item-content{
            color: #999999;
            font-size:26rpx;
            margin-top: 20rpx;
          }
        }
        .item-bottom{
          border-top: 2rpx solid #F5F5F5;
          padding-top: 10rpx;
          color: #A1A1A1;
          display: flex;
          justify-content: space-between;
          margin-top: 20rpx;
          font-size: 26rpx
        }
      }
    }
    .content-item2{
      .item-img{
        width: 100%;
        height: 350rpx;
        margin-top: 20rpx;
      }
      .item-content{
        color: #999999;
        font-size:26rpx;
        margin-top: 0;
      }
    }
  }
</style>
