listTwo.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <view class="list-item-box">
  3. <img class="list-img" :src="data.cover||defaultImg">
  4. <view class="list-time-box" :class="{'time-red-box': type == 1}">
  5. <view class="time-data">{{ formatDate[1] }}</view>
  6. <view class="time-year">{{formatDate[0]}}</view>
  7. </view>
  8. <view class="list-right-box">
  9. <h1 class="list-name">{{ data.title }}</h1>
  10. <view class="list-line"></view>
  11. <view class="list-content" v-html="getStringByHtml3(data.content)">
  12. </view>
  13. </view>
  14. </view>
  15. </template>
  16. <script setup>
  17. import {
  18. ref,
  19. reactive,
  20. computed
  21. } from "vue";
  22. import {
  23. getStringByHtml3,
  24. formatDateToYearMonthDay
  25. } from "@/utils/common.js"
  26. const props = defineProps({
  27. data: {
  28. type: Object
  29. },
  30. type: {
  31. type: Number
  32. }
  33. })
  34. const myData = reactive({
  35. default1: '', // 默认图
  36. default2: '' // 默认图2
  37. })
  38. const formatDate = computed(() => {
  39. return formatDateToYearMonthDay(props.data.createTime)
  40. })
  41. const defaultImg = computed(() => {
  42. return props.type == 1 ? myData.default1 : myData.default2
  43. })
  44. </script>
  45. <style>
  46. </style>