product_wx/pages/subPackages/propertyNotice_manage/index.vue

<template>
  <div class="propertyNotice_manage">
    <div class="whiteBoard">
      <div class="addRepair" @tap="newRelease">新增发布 <van-icon name="add" style="margin-left: 8rpx"/></div>
      <div class="noticeItem" v-for="item in repairList">
        <div class="noticeName">{{item.name}}</div>
        <div class="noticeBottom">
          <div class="noticeTime">{{item.time}}</div>
          <div class="noticeBtnBox">
            <button class="mbtn editBtn">编辑</button>
            <button class="mbtn closeBtn">下架</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      repairList:[
        {name:'关于组织2020年无锡市服务业提质增效资金项目申报的通知',time:'2024-1-21  13:00'},
        {name:'关于组织2020年无锡市服务业提质增效资金项目申报的通知',time:'2024-1-21  13:00'},
        {name:'关于组织2020年无锡市',time:'2024-1-21  13:00'},
      ]
    }
  },
  methods:{
    newRelease(){
      uni.navigateTo({
        url:'/pages/subPackages/propertyNotice_manage/newRelease'
      })
    }
  }
}
</script>

<style lang="scss">

.propertyNotice_manage{
    .whiteBoard{
      background: white;
      margin-top: 24rpx;
      box-sizing: border-box;
      padding: 32rpx;
      height: 1424rpx;
        .addRepair{
          display: flex;
          justify-content: flex-end;
          align-items: center;
          color: rgba(3, 101, 249, 1);
        }
      .noticeItem{
        padding: 24rpx 32rpx;
        width: 686rpx;
        height: 224rpx;
        background: rgba(245, 247, 250, 1);
        box-sizing: border-box;
        border-radius: 16rpx;
        margin-top: 24rpx;
        .noticeName{
          color:rgba(34, 34, 34, 1);
          font-size: 32rpx;
          font-weight: 600;
          line-height: 48rpx;
        }
        .noticeBottom{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 16rpx;
          .noticeTime{
            font-size: 28rpx;
            color: rgba(102, 102, 102, 1);
          }
          .noticeBtnBox{
            display: flex;
            .mbtn{
              width: 160rpx;
              height: 60rpx;
              border-radius: 32rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 28rpx;
            }
            .editBtn{
              border: 1px solid rgba(3, 101, 249, 1);
              color: rgba(3, 101, 249, 1);
              background: white;
              margin-right: 24rpx;
            }
            .closeBtn{
              color: white;
              background: linear-gradient( 316deg, #84AAFF 0%, #0365F9 100%);
            }
          }
        }
      }
    }
}
</style>