Web_QiCaiYao/pages/noticeType.vue

<!-- 消息 -->
<template>
  <div class="index wrapper_1200">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>消息类型</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="message_Box">
      <div class="message_list" v-for="(item, index) in messageList" :key="index">
        <div class="message_list_left">
          <img :src="imgUrl + item.icon" alt v-if="item.icon" />

          <div class="message_list_left_title">{{ item.type_name }}</div>
          <div class="message_list_left_time">
            {{ $dayjs(item.create_time * 1000).format("YYYY-MM-DD HH:mm") }}
          </div>
        </div>
        <div class="message_list_right" @click="goDetails(item.id)">
          <div>查看详情</div>
          <img src="~assets/images/details.png" alt />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Setting from "~/setting";
export default {
  name: "message",
  auth: false,
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      imgUrl: Setting.uplodBaseURL,
      messageList: [],
      message_type_id: undefined,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getNoticeList();
  },
  //方法集合
  methods: {
    getNoticeList() {
      this.msglist = [];
      this.$axios
        .post("/notice/typelists")
        .then((res) => {
          this.messageList = res.data;
          console.log(res.data);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    goDetails(id) {
      this.$router.push({
        path: "/message",
        query: { id },
      });
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.index {
  .crumbs {
    margin-top: 20px;
  }
  .message_Box {
    width: 1200px;
    height: 485px;
    background: #ffffff;
    border-radius: 4px;
    margin: 20px 0;
    .message_list {
      display: flex;
      justify-content: space-between;
      padding: 30px;
      height: 45px;
      .message_list_left {
        display: flex;
        justify-content: space-around;

        img {
          background: var(--themeColor);
          border-radius: 50%;
          width: 30px;
          height: 30px;
          padding: 7px;
        }

        .message_list_left_title {
          // width: 150px;
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 45px;
          margin-left: 15px;
        }
        .message_list_left_time {
          width: 150px;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #999999;
          line-height: 45px;
          margin-left: 15px;
        }
      }
      .message_list_right {
        display: flex;
        justify-content: space-around;
        width: 80px;
        height: 30px;
        background: #ffffff;
        border-radius: 5px;
        border: 1px solid #e9e9e9;
        padding: 0 5px !important;
        line-height: 30px;
        margin-top: 8px;
        cursor: pointer;
        div {
          width: 85px;
          font-size: 12px;
          line-height: 30px;
        }
        img {
          width: 16px;
          height: 16px;
          margin: auto;
        }
      }
    }
  }
}
</style>