product_wx/pages/subPackages/minePages/mineMessage.vue

<template>
    <div class="mineMessage">
       <div class="msgItem" v-for="item in msgList">
         <div class="msgItemLeft">
            <img src="./image/msgIcon.png" class="msgIcon">
           <div class="redDoll" v-show="item.isNew"></div>
         </div>
         <div class="msgItemRight">
           <div class="msgItemName">您有一条最新政策待查看！</div>
           <div class="msgItemTime">2024-06-18  19:34:06</div>
         </div>
       </div>
    </div>
</template>

<script>
export default {
  name: "mineMessage",
  data(){
    return{
      msgList:[
        {name:'您有一条最新政策待查看',isNew:false},
        {name:'您有一条最新政策待查看',isNew:true},
        {name:'您有一条最新政策待查看',isNew:false},
      ]
    }
  }
}
</script>

<style lang="scss">
    .mineMessage{
      padding:32rpx;
      .msgItem{
        width: 686rpx;
        height: 162rpx;
        background: white;
        box-sizing: border-box;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        padding-left: 32rpx;
        margin-bottom: 24rpx;
        .msgItemLeft{
          position: relative;
          .msgIcon{
            width: 80rpx;
            height: 80rpx;
          }
          .redDoll {
            position: absolute;
            right: 0;
            top: 0;
            width: 16rpx;
            height: 16rpx;
            background: #f25551;
            border-radius: 50%;
          }
        }
       .msgItemRight{
         display: flex;
         flex-direction: column;
         justify-content: center;
         margin-left: 16rpx;
         .msgItemTime{
           color: #888888;
           font-size: 28rpx;
           margin-top: 8rpx;
         }
         .msgItemName{
           font-size: 32rpx;
           color: #222222;
         }
       }
      }
    }
</style>