TEAMModelOS/TEAMModelOS.SmartClass/ClientApp/view/smart-class/notice.vue

<template>
  <div class="container notice-container">
    <div class="left-box">
      <p class="title">通知公告<span class="sub">NOTICE</span></p>
      <ul>
        <li :class="activeIndex == 0 ? 'li-active':''" @click="handleMenuClick(0,0,'全部类型')">全部类型</li>
        <li :class="activeIndex == 1 ? 'li-active':''" @click="handleMenuClick(1,1,'天天展示')">天天展示</li>
        <li :class="activeIndex == 2 ? 'li-active':''" @click="handleMenuClick(2,2,'月月研讨')">月月研讨</li>
        <li :class="activeIndex == 3 ? 'li-active':''" @click="handleMenuClick(3,3,'年年观摩')">年年观摩</li>
        <li :class="activeIndex == 4 ? 'li-active':''" @click="handleMenuClick(4,4,'课例征集')">课例征集</li>
        <li :class="activeIndex == 5 ? 'li-active':''" @click="handleMenuClick(5,5,'获奖信息')">获奖信息</li>
        <li :class="activeIndex == 6 ? 'li-active':''" @click="handleMenuClick(6,6,'智慧团队')">智慧团队</li>
        <li :class="activeIndex == 7 ? 'li-active':''" @click="handleMenuClick(7,7,'评课标准')">评课标准</li>
        <li :class="activeIndex == 8 ? 'li-active':''" @click="handleMenuClick(8,8,'上级通知')">上级通知</li>
        <li :class="activeIndex == 9 ? 'li-active':''" @click="handleMenuClick(9,9,'每周评论')">每周评论</li>
        <li :class="activeIndex == 10 ? 'li-active':''" @click="handleMenuClick(10,10,'高阶研修')">高阶研修</li>
      </ul>
    </div>
    <div class="right-box center-col">
      <p class="title">{{typeName}}</p>
      <Table :columns="newColumns" :data="noticeList" @on-row-click="rowClick" no-data-text="暂无数据"></Table>
      <Page :total="50" show-elevator show-total />
    </div>
  </div>

</template>
<script>

  import noticeList from '@/static/noticeList.json'
  export default {
    components: {
    },
    data() {
      return {
        activeIndex: 0,
        typeName:"",
        newColumns: [
          {
            title: '标题',
            key: 'title'
          },
          {
            title: '日期',
            key: 'startTime'
          }
        ],
        noticeList: []
      }
    },

    created() {
      this.getList(1);
    },
    methods: {
      getList(type) {
        let list = noticeList.list;
        var newArray = list.filter(function(item){
            return item.noticeTypeId == type;
        });
        this.noticeList = newArray;
      },

      handleMenuClick(index,typeId,name) {
        this.activeIndex = index;
        this.typeName = name;
        this.getList(typeId);
      },

      rowClick(data) {
        this.$router.push({
          path:'/noticeDetails',
          query:{
            id:data.id
          }
        });
      }


    },
    mounted() {
    }
  }
</script>
<style scoped>
  html, body, #app {
    height: 100% !important;
    user-select: none;
  }

  .main-content {
    background: rgb(248,248,248) !important;
  }

  .container {
    width: 1200px;
    margin: 100px auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

    .container .left-box {
      width: 25%;
      padding-bottom: 50px;
      background: #fff;
    }

      .container .left-box .title {
        font-size: 16px;
        color: #33aafe;
        letter-spacing: 1px;
        font-weight: 500;
        margin: 30px 0 0 20px;
      }

        .container .left-box .title .sub {
          font-size: 14px;
          color: #cbb;
          margin-left: 15px;
        }

      .container .left-box ul {
        list-style: none;
        width: 100%;
        margin-top: 20px;
      }

        .container .left-box ul li {
          width: 100%;
          height: 56px;
          line-height: 56px;
          font-size: 14px;
          padding-left: 20px;
          color: #999;
          letter-spacing: 1px;
          text-indent: 5px;
          cursor: pointer;
        }

          .container .left-box ul li:hover{
            background: rgba(212, 226, 236, 0.5);
            color:#999;
          }

          .container .left-box .li-active {
            background: #33aafe;
            color: #fff;
          }
    .container .right-box {
      width: 73%;
      padding-bottom:50px;
      padding: 30px 15px;
      background: #fff;
    }

      .container .right-box .title {
        font-size: 16px;
        color: #444;
      }

      .container .right-box .ivu-table-wrapper {
        width:100%;
        margin-top:20px;
      }

      .container .right-box .ivu-page {
        margin-top:20px;
      }

      .container .right-box /deep/ .ivu-table-wrapper .ivu-table-cell {
        cursor:pointer;
      }

  .center-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>