CKQ/src/views/test/index.vue

<template>
  <el-card class="train-container" header="安全培训">
    <el-collapse accordion>
      <el-collapse-item class="tag-list">
        <template slot="title">
          <div class="tag-header">
            <span class="lable">类别一：</span>
            <el-tag @click="changeTag(-1)">全部</el-tag>
            <el-tag v-for="tag in 10" :key="tag" type="info" @click="changeTag(tag)">标签标题-{{ tag }}</el-tag>
          </div>
        </template>
        <div class="tag-cont">
          <el-tag v-for="tagcont in 10" :key="tagcont" type="info">标签内容-{{ tagcont }}</el-tag>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-row class="train-list" :gutter="15" justify>
      <el-col v-for="(item, index) in 10" :key="index" :span="4">
        <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 10px;" @click="showDetail(item)">
          <div @click="showDetail(item)">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
            <div style="padding: 14px;">
              <span>好吃的汉堡</span>
              <div class="bottom clearfix">
                <time class="time">{{ new Date() }}</time>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>

</template>
<script>
export default {
  name: 'TrainComponent',
  components: {},
  data() {
    return {}
  },
  methods: {
    changeTag(tag) {

    },
    showDetail(item) {
      this.$router.push({
        path: '/test/detail',
        query: {
          id: item
        }
      })
    }
  }
}
</script>
  <style lang="scss" scoped>
  .train-container{
    .tag-list{
        .lable{
            display: inline-block;
            width: 80px;
            line-height: 1;
            font-size: 12px;
            padding-left:10px ;
            box-sizing: border-box;
        }
        .tag-header{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        .tag-cont{
            padding-left: 80px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        .el-tag{
            margin-right: 10px;
        }
    }
    .train-list{
        padding-top: 10px;
        .image {
            width: 100%;
            display: block;
        }
    }
  }
    </style>