front/src/views/career/components/infoSample.vue

<template>
  <div class="info-sample-container fx-column">
    <el-badge class="self-sta" value="HOT">
      <span class="info-sample-title">{{ title }}</span>
    </el-badge>
    <div class="info-sample-separator" />
    <div v-if="dataList.length" class="info-sample-list">
      <template v-for="(item) in dataList">
        <info-card
          :key="item.id"
          :name="item.title"
          @click.native="detail(item)"
        />
      </template>
    </div>
  </div>
</template>
<script>
import infoCard from './infoCard.vue'
import * as career from '@/api/webApi/career-news'

export default {
  components: { infoCard },
  props: {
    type: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dataList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tag: 'hot'
      }
    }
  },
  watch: {
    type: {
      immediate: true,
      handler: function() {
        this.getList()
      }
    }
  },
  methods: {
    detail(item) {
      this.$emit('click', item)
    },
    getList() {
      if (!this.type) return
      career.list({ ...this.queryParams, type: this.type }).then((res) => {
        console.log('career news list res', res)
        if (res.code == 200 || res.code == 0) {
          this.dataList = res.rows
          this.total = res.total
        } else {
          this.msgError(res.msg || 'career news list 请求异常')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.info-sample-container {
  padding: 20px;
  border: 1px solid #dddddd;
}

.info-sample-title {
  font-size: 14px;
  font-weight: 600;
  color: #414141;
}

.info-sample-separator {
  width: 21px;
  height: 2px;
  background-color: #414141;
}

.info-sample-item-separator {
  margin: 5px -5px;
}
</style>