<template>
  <div id="notice">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="top">
          <el-col :span="24" class="english">{{noticeinfo.english}}</el-col>
          <el-col :span="24" class="title">{{noticeinfo.title}}</el-col>
        </el-col>
        <el-col :span="24" class="info">
          <el-col :span="24" class="infoBei">
            <span>{{title}}</span>
          </el-col>
          <el-col :span="24" class="infolist">
            <el-col :span="24" class="button">
              <el-button class="icon" style="margin: 0 43px 0 0;"><i class="el-icon-arrow-left"></i></el-button>
              <el-button class="icon" style="margin: 0 10px;"><i class="el-icon-arrow-right"></i></el-button>
            </el-col>
            <el-col :span="24" class="noticelist">
              <el-col :span="8" class="content" v-for="(item, index) in noticelist" :key="index">
                <el-link :underline="false">
                  <el-col :span="24" class="image">
                    <el-image style="width:100%;height:226px;" :src="item.url"></el-image>
                  </el-col>
                  <el-col :span="24" class="title">
                    <p>{{item.title}}</p>
                  </el-col>
                  <el-col :span="24" class="text">
                    <p>{{item.text}}</p>
                  </el-col>
                  <el-col :span="24" class="time">
                    {{item.time}}
                  </el-col>
                </el-link>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'notice',
  props: {
    noticeinfo: null,
    noticelist: null,
  },
  components: {},
  data: () => ({
    title: '最新公告',
  }),
  created() { },
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
.top {
  height: 100px;
  text-align: center;
  margin-bottom: 42px;
}
.top .english {
  text-transform: uppercase;
  color: #5b5e66;
  font-family: 微软雅黑;
  font-size: 42px;
}
.top .title {
  color: #415285;
  font-size: 36px;
  font-family: 微软雅黑;
}

.info {
  height: 513px;
}
.info .infoBei {
  width: 294px;
  height: 512px;
  background-color: #415285;
}
.info .infoBei span {
  margin: 52px 0 0 69px;
  display: inline-block;
  font-size: 22px;
  font-family: 微软雅黑;
  color: #fff;
}
.infolist {
  width: 1130px;
  height: 470px;
  position: absolute;
  top: 166px;
  left: 72px;
}
.button {
  text-align: right;
  height: 40px;
  margin-bottom: 30px;
}
.button .icon {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  padding: 0;
  border-radius: 90px;
  border: 2px solid #ccc;
}
.button .icon .el-icon-arrow-left {
  font-size: 20px;
  font-weight: bold;
  color: #ccc;
}
.button .icon .el-icon-arrow-right {
  font-size: 20px;
  font-weight: bold;
  color: #ccc;
}
.noticelist {
  height: 400px;
  background: #fff;
}
.content {
  width: 346px;
  height: 400px;
  margin-right: 45px;
  box-shadow: 0 0 5px #ccc;
}
.content:last-child{
  margin-right:0;
}
.content .image {
  width: 346px;
  height: 226px;
  margin-bottom: 15px;
}
.content .title p {
  font-size: 24px;
  color: #5b5e66;
  font-family: 微软雅黑;
  margin-bottom: 12px;
  padding: 0 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.content .text p {
  font-size: 12px;
  color: #999999;
  font-family: 宋体;
  margin-bottom: 12px;
  padding: 0 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.content .time {
  font-size: 18px;
  color: #999999;
  font-family: 宋体;
  text-align: right;
  padding: 0 24px;
}
</style>