<template>
  <div id="news">
    <el-col :span="24" class="tab">
      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label">创新吉林</span>
          <el-col :span="24" class="list">
            <ul>
              <li class="chuangxinList" v-for="(item, index) in chuangxinList" :key="index">
                <el-col :span="19" class="title textOver">{{ item.title }}</el-col>
                <el-col :span="4" class="date"> {{ item.date }}</el-col>
              </li>
            </ul>
            <el-col class="more" :span="24">查看更多</el-col>
          </el-col>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">国内动态</span>
          <el-col :span="24" class="list">
            <ul>
              <li class="chuangxinList" v-for="(item, index) in guoneiList" :key="index">
                <el-col :span="19" class="title textOver">{{ item.title }}</el-col>
                <el-col :span="4" class="date"> {{ item.date }}</el-col>
              </li>
            </ul>
            <el-col class="more" :span="24">查看更多</el-col>
          </el-col>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">政务活动</span>
          <el-col :span="24" class="list">
            <ul>
              <li class="chuangxinList" v-for="(item, index) in zhengwuList" :key="index">
                <el-col :span="19" class="title textOver">{{ item.title }}</el-col>
                <el-col :span="4" class="date"> {{ item.date }}</el-col>
              </li>
            </ul>
            <el-col class="more" :span="24">查看更多</el-col>
          </el-col>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">媒体焦距</span>
          <el-col :span="24" class="list">
            <ul>
              <li class="chuangxinList" v-for="(item, index) in meitiList" :key="index">
                <el-col :span="19" class="title textOver">{{ item.title }}</el-col>
                <el-col :span="4" class="date"> {{ item.date }}</el-col>
              </li>
            </ul>
            <el-col class="more" :span="24">查看更多</el-col>
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </div>
</template>

<script>
export default {
  name: 'news',
  props: {
    chuangxinList: null,
    guoneiList: null,
    zhengwuList: null,
    meitiList: null,
  },
  components: {},
  data: () => ({}),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
ul {
  padding: 0;
  margin: 0;
}
li {
  padding: 0;
  margin: 0;
}
.list {
  padding: 0 20px 0 20px;
  color: #95a3c0;
}
.list ul {
  padding: 0 0 0 20px;
  max-height: 280px;
  overflow: hidden;
}
.chuangxinList {
  width: 540px;
  padding: 0 0 7px 0;
}
.list .title {
  margin: 0 20px 0 0;
  color: #6d6d77;
}
.date {
  text-align: right;
}
/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
/deep/.el-tabs--border-card > .el-tabs__header {
  background-color: transparent;
  border-bottom: none;
}
/deep/.el-tabs--border-card {
  border: none;
  box-shadow: none;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  border-right-color: transparent;
  border-left-color: transparent;
}
/deep/.el-tabs__item {
  font-size: 22px;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #2c3350;
}
/deep/.el-tabs__header {
  padding: 0 20px;
}
/deep/.el-tabs__item {
  padding: 0 20px 0 0;
}
/deep/.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2) {
  padding-left: 0;
}
.more {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #f5f5f5;
  font-size: 16px;
  color: #60636d;
  margin: 10px 0 0 0;
}
</style>
