12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- <template>
- <view class="trajectory">
- <view class="title">访问轨迹</view>
- <time-axis v-for="item in trajectoryList" :key="item.userID">
- <template #title>
- <text>{{item.accessTime}}</text>
- </template>
- <template #content>
- <view class="time-axis-content">
- <image :src="item.titleImage || '../../../../static/temp/icon-new@2x.png'" class="axis-product" mode=""></image>
- <view class="axis-product-info">
- <view class="product-title">【{{item.pageType | pageTypeChange}}】</view>
- <view class="product-info">{{item.title}}</view>
- </view>
- </view>
- </template>
- </time-axis>
- </view>
- </template>
- <script>
- import TimeAxis from './time-axis.vue'
- export default {
- props: {
- trajectoryList: {
- type: Array,
- default: () => ([])
- }
- },
- components: {
- TimeAxis
- },
- filters: {
- pageTypeChange(val) {
- const obj = {
- '6': '商品',
- '11': '文章'
- }
- return obj[val]
- }
- },
- data() {
- return {}
- }
- }
- </script>
- <style lang="scss">
- .trajectory {
- margin: 24rpx auto;
- width: 702rpx;
- background-color: #fff;
- border-radius: 16rpx;
- padding: 40rpx 32rpx;
- box-sizing: border-box;
- .title {
- color: #333333;
- font-size: 28rpx;
- font-weight: bold;
- margin-bottom: 30rpx;
- }
- }
- .axis-product {
- width: 136rpx;
- height: 136rpx;
- object-fit: contain;
- }
- .axis-product-info {
- display: flex;
- flex-direction: column;
- height: 136rpx;
- width: 426rpx;
- color: #333333;
- font-size: 26rpx;
- margin-left: 24rpx;
- .product-info {
- margin-top: 16rpx;
- overflow: hidden;
- -webkit-line-clamp: 2;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- height: 73rpx;
- width: 426rpx;
- }
- }
- .time-axis-content {
- display: flex;
- align-items: center;
- }
- </style>
|