interflow-1.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <div id="interflow-1">
  3. <el-row>
  4. <el-col :span="24" class="main">
  5. <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
  6. <el-col :span="20" class="title textOver" :title="item.title" @click="toView(item)">
  7. {{ item.title }}
  8. </el-col>
  9. <el-col :span="4" class="time">
  10. {{ item.create_date }}
  11. </el-col>
  12. </el-col>
  13. </el-col>
  14. </el-row>
  15. </div>
  16. </template>
  17. <script setup lang="ts">
  18. import { toRefs } from 'vue';
  19. const props = defineProps({
  20. list: { type: Array<any>, default: () => [] }
  21. });
  22. const { list } = toRefs(props);
  23. const emit = defineEmits(['toView']);
  24. const toView = (e) => {
  25. emit('toView', { data: e });
  26. };
  27. </script>
  28. <style lang="scss" scoped>
  29. .main {
  30. .list {
  31. display: flex;
  32. flex-direction: row;
  33. flex-wrap: wrap;
  34. border-bottom: 1px dashed #ccc;
  35. padding: 11px 0;
  36. .title {
  37. font-size: 16px;
  38. font-weight: 700;
  39. color: #333;
  40. }
  41. .title:hover {
  42. cursor: pointer;
  43. color: rgb(0, 149, 255);
  44. }
  45. .time {
  46. text-align: center;
  47. }
  48. }
  49. }
  50. .list :last-child {
  51. border-bottom: none;
  52. }
  53. </style>