web-common/src/layout/altai/train/dynamic.vue

<template>
  <div id="dynamic">
    <el-row>
      <el-col :span="24">
        <el-tabs type="border-card" style="height:400px">
          <el-tab-pane v-for="(item,index) in dynamicList" :key="index">
            <span slot="label" class="title">{{item.title}}
              <span></span>
            </span>
            <el-col :span="24" class="content">
              <ul>
                <li v-for="(tag,index) in item.content" :key="index">
                  <a href="#">
                    <span class="dot"></span>
                    <span>{{tag.title}}</span>
                    <span class="tt">{{tag.time}}</span>
                  </a>
                </li>
              </ul>
              <div class="entermore">
                <a href="#">查看更多</a>
              </div>
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'dynamic',
  props: {
    dynamicList: null,
  },
  components: {},
  data: () => ({}),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
a {
  text-decoration: none;
}
ul {
  padding: 0px;
  list-style: none;
}
/deep/.el-tabs__nav {
  padding: 10px 10px 0 10px;
  background-color: #ffffff;
  width: 100%;
}
/deep/.el-tabs__item {
  display: contents;
}
/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 0 15px 15px 15px;
}
/deep/.el-tabs__nav-wrap.is-scrollable {
  padding: 0;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #2c3350;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
  color: #2c3350;
}
.title {
  height: 45px;
  font-size: 22px;
  font-weight: bold;
  padding-left: 10px;
}
.title span {
  display: inline-block;
  height: 4px;
  width: 4px;
  text-align: center;
  background-color: #2b324e;
  margin: -16px 0px 4px 6px;
}
.el-tabs__item:last-child .title span {
  display: none;
}
.dot {
  width: 5px;
  height: 5px;
  background-color: #abaab8;
  border-radius: 90px;
  margin: 0 10px 6px 0;
}
.content ul {
  height: 177px;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.content li {
  padding: 3px 0;
}
.content a {
  font-size: 16px;
  color: #6d6d77;
}
.tt {
  color: #abaab8;
  float: right;
}
.content a > span {
  display: inline-block;
  max-width: 600px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entermore {
  margin-top: 10px;
  width: 765px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #f5f5f5;
  font-size: 16px;
}
</style>