learning-system-portal/src/views/user/Message.vue

<template>
  <div>
    <div class="msg-nav">
       <div><el-checkbox v-model="checkAll">全选</el-checkbox></div>
       <div>
         <el-button type="danger">删除所选</el-button>
         <el-button type="danger">全部清空</el-button>
        </div>
    </div>
    <div class="msg-list" v-for="(item,index) in data" :key="index" @click="masDeial">
          <div class="msg-top">
            <div>
              <span style="padding-right: 10px;"> <el-checkbox v-model="item.checkItem"></el-checkbox></span>
              <span v-if="item.status==='0'" style="padding:2px;border: 1px dotted #ff0000;color: #ff0000;margin-right: 5px">未读</span>
              <span v-else style="padding:2px;border: 1px dotted #1EA0FA;color: #1EA0FA;margin-right: 5px">已读</span>
              <span>组八戒</span>
              <span class="msg-time">{{item.time}}</span>
            </div>
            <div>
              <el-button type="danger" size="small">删除</el-button>
            </div>
          </div>
          <div class="msg-body">
            {{item.content}}
          </div>
    </div>

  </div>
</template>

<script>

  export default{
    data(){
      return {
        checkAll:false,
        data:[
          {name:'组八戒',content:'我是组干裂',time:'2020年12月11日',status:'0'},
          {name:'唐僧',content:'我是干裂',time:'2020年12月11日',status:'1'}
        ]
      }
    },
    methods:{
      masDeial(){
        console.log('11')
      }
    },
    components:{
    },
    watch:{
      checkAll(update,old){
        if(update){
          this.data=this.data.map(v=>{v.checkItem=true;return v})
        }else{
          this.data=this.data.map(v=>{v.checkItem=false;return v})
        }
      }
    },
    computed:{

    }
  }
</script>

<style lang="scss" scoped>
  .msg-nav{
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid rgb(219, 219, 219);
    line-height: 40px;
  }
  .msg-list{
    border-bottom:1px solid rgb(237, 237, 237);
    margin-top: 10px;
    line-height: 26px;
    .msg-top{
      display: flex;
      justify-content: space-between;
      line-height: 30px;

    }
    .msg-body{
      padding: 10px 10px 10px 25px;
      color: #727272;
    }
    .msg-time{
      color: #a5a5a5;
      padding-left: 10px ;
    }
  }
  .messageList{
    >p{
      display: flex;
      justify-content: space-between;
      border-bottom:1px solid rgb(219, 219, 219);
      padding-bottom: 10px;
      margin: 0;
      align-items: center;
    }
    .messageItem:not(:first-child){
      padding-top: 10px;
    }
    .messageItem{
      // width: 100%;
      padding-bottom: 10px;
      border-bottom: 1px solid rgb(219, 219, 219);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-checkbox{
        margin-right: 5px;
      }
      .el-button{
        margin-left: auto;
      }
      // margin-bottom: 10px;
      p{
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      p:first-of-type{
        >span{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span:first-of-type{
            font-size: 12px;
          }
        }
        >span:last-of-type{
          font-size: 14px;
          color: #b7b7b7;
          margin-left: 5px;
        }
      }
      p:last-of-type{
        font-size:14px;
        text-indent: 3em;
        span:last-of-type{
          font-size: 14px;
          color: #b7b7b7;
        }
      }
    }
  }
</style>