<template>
  <div id="notice">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="topTitle">
          <span>{{ noticeinfo.title }}</span>
        </el-col>
        <el-col :span="24" class="list">
          <ul>
            <li class="listdata">
              <span class="qiudata"></span>
              <el-link :underline="false">今天（3月8日星期五）</el-link>
            </li>
            <li class="listdata" v-for="(item, index) in noticelist" :key="index">
              <el-col :span="24" @click.native="$router.push({ path: `/master/detail/news/${item.id}` })">
                <P class="textOver"><span class="qiudatas"></span>{{ item.title }}</P>
              </el-col>
            </li>
          </ul>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'notice',
  props: {
    noticeinfo: null,
    noticelist: null,
  },
  components: {},
  data: () => ({
    skip: 0,
    limit: 3,
  }),
  created() {},
  computed: {},
  methods: {
    toSearch(type) {
      if (type === 'up') {
        this.skip === 0 ? '' : this.skip - this.limit;
      } else {
        this.skip + this.limit;
      }
      this.$emit('search', { skip: this.skip, limit: this.limit });
    },
    turnTo() {
      if (this.noticelist.length > 0) {
        if (this.noticelist[0].children.length > 0) {
          let column = this.noticelist[0].children[0].id;
          this.$router.push({ path: `/master/notice/${column}`, query: { news_type: '0', title: '最新公告' } });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topTitle {
  height: 90px;
  padding: 50px 0 0 10px;
  color: #333;
  font-size: 24px;
  font-family: 微软雅黑;
}
.list {
  height: 280px;
  background: #eeeeee;
}
.listdata {
  height: 32px;
  line-height: 32px;
  border-left: 5px solid #eeeeee;
}
.listdata .el-link {
  color: #999999;
  font-size: 13px;
  font-family: 微软雅黑;
}
.qiudata {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 90px;
  margin: 0 15px;
}
.qiudatas {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 90px;
  margin: 0 15px 0 17px;
}
.newsTitle {
  height: 32px;
  line-height: 32px;
  border-left: 3px solid transparent;
}
.newsTitle:hover {
  border-left: 3px solid #415285;
  background: #fff;
  cursor: pointer;
}
.qiu {
  float: left;
  width: 10px;
  height: 10px;
  background: #d5d5d5;
  border-radius: 90px;
  margin: 11px 15px 0 18px;
}
.listTitle {
  height: 32px;
  line-height: 32px;
  border-left: 3px solid transparent;
}
.listTitle:hover {
  background-color: #fff;
  border-left: 3px solid #415285;
  cursor: pointer;
}
.listTitle:hover .qiu {
  background-color: #415285;
}
</style>
