gzh/src/views/Message.vue

<template>
  <div class="home">
    <div class="bj"></div>
    <div class="container">
      <div class="message" v-if="list.length>0">
        <ul>
          <li v-for="item in list" :key="item.id">
            <div class="time">{{item.ctime}}</div>
            <div class="nr" :class="{'on':item.isYes==2}">
              <h2>
                <em></em>
                {{item.title}}
                <p>{{item.body}}</p>
              </h2>
            </div>
            <!-- <div class="nr on" >
              <h2>
                <em></em>
                {{item.title}}
                <p>{{item.body}}</p>
              </h2>
            </div>-->
          </li>
        </ul>
      </div>
      <van-empty description="暂无消息" v-else style="padding-top:90px"/>
    </div>
    <dh />
  </div>
</template>


<script>
// @ is an alias to /src
import { apiMsgCenter, apiMsgRead } from "@/request/api.js";
import { Empty } from "vant";
import dh from "@/components/nav.vue";
export default {
  components: {
    dh
  },
  data() {
    return {
      title: "",
      list: []
    };
  },
  mounted() {
    // console.log(this.$route.meta.title);
    this.title = this.$route.meta.title;
    apiMsgCenter().then(res => {
      this.list = res.data;
      this.setRead();
    });
  },
  methods: {
    setRead() {
      apiMsgRead().then(res => {});
    }
  }
};
</script>

<style>
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
</style>
<style scoped lang="scss">
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}
.message {
  padding: 30px 0px;
  ul li {
    margin-bottom: 30px;
    .time {
      text-align: center;
      padding-bottom: 15px;
    }
    .nr {
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      h2 {
        font-size: 30px;
        padding-bottom: 10px;
        em {
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #ee0a24;
          margin-right: 10px;
        }
        p {
          color: #888;
          font-size: 24px;
          padding: 5px 0px;
          padding-top: 10px;
        }
      }
      h3 {
        border-top: 1px solid #f5f5f5;
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 26px;
      }
    }
    .nr.on em {
      display: none;
    }
  }
}
</style>