trajectory.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <view class="trajectory">
  3. <view class="title">访问轨迹</view>
  4. <time-axis v-for="item in trajectoryList" :key="item.userID">
  5. <template #title>
  6. <text>{{item.accessTime}}</text>
  7. </template>
  8. <template #content>
  9. <view class="time-axis-content">
  10. <image :src="item.titleImage || '../../../../static/temp/icon-new@2x.png'" class="axis-product" mode=""></image>
  11. <view class="axis-product-info">
  12. <view class="product-title">【{{item.pageType | pageTypeChange}}】</view>
  13. <view class="product-info">{{item.title}}</view>
  14. </view>
  15. </view>
  16. </template>
  17. </time-axis>
  18. </view>
  19. </template>
  20. <script>
  21. import TimeAxis from './time-axis.vue'
  22. export default {
  23. props: {
  24. trajectoryList: {
  25. type: Array,
  26. default: () => ([])
  27. }
  28. },
  29. components: {
  30. TimeAxis
  31. },
  32. filters: {
  33. pageTypeChange(val) {
  34. const obj = {
  35. '6': '商品',
  36. '11': '文章'
  37. }
  38. return obj[val]
  39. }
  40. },
  41. data() {
  42. return {}
  43. }
  44. }
  45. </script>
  46. <style lang="scss">
  47. .trajectory {
  48. margin: 24rpx auto;
  49. width: 702rpx;
  50. background-color: #fff;
  51. border-radius: 16rpx;
  52. padding: 40rpx 32rpx;
  53. box-sizing: border-box;
  54. .title {
  55. color: #333333;
  56. font-size: 28rpx;
  57. font-weight: bold;
  58. margin-bottom: 30rpx;
  59. }
  60. }
  61. .axis-product {
  62. width: 136rpx;
  63. height: 136rpx;
  64. object-fit: contain;
  65. }
  66. .axis-product-info {
  67. display: flex;
  68. flex-direction: column;
  69. height: 136rpx;
  70. width: 426rpx;
  71. color: #333333;
  72. font-size: 26rpx;
  73. margin-left: 24rpx;
  74. .product-info {
  75. margin-top: 16rpx;
  76. overflow: hidden;
  77. -webkit-line-clamp: 2;
  78. text-overflow: ellipsis;
  79. display: -webkit-box;
  80. -webkit-box-orient: vertical;
  81. height: 73rpx;
  82. width: 426rpx;
  83. }
  84. }
  85. .time-axis-content {
  86. display: flex;
  87. align-items: center;
  88. }
  89. </style>