product_wx/pages/subPackages/propertyNotice/index.vue

<template>
    <div class="propertyNotice">
      <ul class="noticeUl">
        <li class="noticeLi" v-for="item in noticeList" @tap="toDetail(item)">
          <img :src="item.isRead?unReadImg:readImg" class="leftImg"/>
          <div class="rightBox">
            <span class="noticeTitle">{{item.title}}</span>
            <span class="noticeTimeBox">
              <span class="noticeTime">2024-06-18  19:34:06</span>
              <van-icon name="like" :class="item.isLike?'likeIcon':'unLikeIcon'" @tap.stop="clickLike(item)"/>
            </span>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return {
      unReadImg:'https://www.idea-co-sf.com/gardenProduct/image/xiaoxi01.png',
      readImg:'https://www.idea-co-sf.com/gardenProduct/image/xiaoxi02.png',
      noticeList:[
        { title:'XXXXX南门出口道闸维修的通知', isRead:false, isLike:true },
        { title:'XXXXXXXX停电的紧急通知', isRead:true, isLike:false },
        { title:'XXXXX南门出口道闸维修的通知', isRead:false, isLike:true },
        { title:'关于强降雨天气防范措的通知', isRead:true, isLike:true },
        { title:'关于无端午节禁止施工的温馨提示', isRead:false, isLike:false },
        { title:'关于园区枇杷消杀禁止采摘的通知', isRead:false, isLike:true },
        { title:'关于开展爱邻活动的通知', isRead:true, isLike:false },
      ]
    }
  },
  methods:{
    toDetail(item){
      uni.navigateTo({
        url: "/pages/subPackages/propertyNotice/detail?type=" + JSON.stringify(item),
      });
    },
    clickLike(item){
      item.isLike = !item.isLike
    }
  }
}
</script>

<style lang="scss">
    .propertyNotice{
      .noticeUl{
        display: flex;
        flex-direction: column;
        align-items: center;
        .noticeLi{
          margin-top: 24rpx;
          width: 686rpx;
          height: 162rpx;
          border-radius: 16rpx;
          display: flex;
          align-items: center;
          background: rgba(255, 255, 255, 1);
          padding: 0 32rpx;
          box-sizing: border-box;
          .leftImg{
            width: 80rpx;
            height: 80rpx;
          }
          .rightBox{
            display: flex;
            flex-direction: column;
            margin-left: 16rpx;
            .noticeTitle{
              color: rgba(34, 34, 34, 1);
              font-size: 32rpx;
            }
            .noticeTimeBox{
              font-size: 32rpx;
              margin-top: 12rpx;
              display: flex;
              justify-content: space-between;
              width: 526rpx;
              .noticeTime{
                color: rgba(136, 136, 136, 1);
                font-size: 28rpx;
              }
              .likeIcon{
                color: red;
              }
              .unLikeIcon{
                color: rgba(230, 235, 241, 1);
              }
            }
          }
        }
      }
    }
</style>