product_wx/pages/subPackages/toread/index.vue

<template>
  <div class="secureselftest">
     <div class="toReadItem" v-for="item in msgList" @tap="showDialog(item)" >
          <div class="readTitle">【{{item.type}}】</div>
          <div class="readInfo">{{item.info}}</div>
          <div class="readTime">2024-04-25  09:00</div>
     </div>
    <van-dialog
        use-slot
        title="消息提醒"
        :show="show"
        :show-cancel-button="false"
        confirm-button-text="我知道了"
        confirm-button-color="rgba(87, 107, 149, 1)"
        @confirm="confirm"
        width="640rpx"
    >
      <div class="dialogBox">
        <div class="dialogInfoTitle">XXXXSSSSSXX企业名称XXXX企业的合同即将到期，请尽快续约。</div>
        <div class="dialogInfo">
          <div class="infoRow">
            <span class="infoTitle">合同编号：</span>
            <span class="infoMsg">HT20240514</span>
          </div>
          <div class="infoRow">
            <span class="infoTitle">关联载体：</span>
            <span class="infoMsg"></span>
          </div>
          <div class="infoRow">
            <span class="infoTitle">合同起止日期：</span>
            <span class="infoMsg">2023/01/01 ~ 2024/12/30</span>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      msgList:[
        {type:'合同到期提醒',info:'xxxxsssSSXX企业名称XXXX企业的合同即将到期请尽快续约.'}
      ],
      show:false
    }
  },
  methods:{
    showDialog(item){
      if (item.type === '合同到期提醒'){
        this.show = true
      }
    },
    confirm(){

    }
  }
}

</script>


<style lang="scss">
    .secureselftest{
      .toReadItem{
        margin-top: 24rpx;
        margin-left: 32rpx;
        display: flex;
        flex-direction: column;
        background: white;
        width: 686rpx;
        padding: 32rpx;
        box-sizing: border-box;
        border-radius: 16rpx;
        .readTitle{
          color: rgba(3, 101, 249, 1);
          font-size: 28rpx;
        }
        .readInfo{
          color: rgba(51, 51, 51, 1);
          font-size: 28rpx;
          line-height: 42rpx;
          padding: 16rpx 0;
        }
        .readTime{
          color: rgba(102, 102, 102, 1);
          font-size: 28rpx;
        }
      }
      .dialogBox{
        padding: 36rpx 24rpx;
        .dialogInfoTitle{
          color:rgba(53, 53, 53, 1);
          font-size: 32rpx;
          line-height: 48rpx;
          margin-bottom: 32rpx;
        }
        .dialogInfo{
          background: rgba(245, 247, 250, 1);
          border-radius: 8rpx;
          width: 592rpx;
          padding: 20rpx 16rpx;
          box-sizing: border-box;
          .infoRow{
            display: flex;
            align-items: center;
            line-height: 50rpx;
          }
          .infoTitle{
            width: 196rpx;
            font-size: 28rpx;
            color: rgba(51, 51, 51, 1);
          }
          .infoMsg{
            color:rgba(102, 102, 102, 1);
            font-size: 28rpx;
          }
        }
      }
    }
</style>