mingnan/src/pages/home/history.vue

<template>
  <view class="d-flex flex-col bg-base">
    <SimplePageContentLoader :loader="recordData">
      <view class="main-time-line">
        <view 
          v-for="(item, index) in recordData.content.value"
          :key="index"
          class="item"
          :class="index % 2 === 0 ? 'top' : 'bottom'"
        >
          <view class="time">
            <text>{{ DataDateUtils.formatDate(item.publishAt, 'YYYY-MM') }}</text>
          </view>
          <view class="time2"></view>
          <view class="box">
            <view class="title">{{ item.title }}</view>
            <view class="content">{{ item.desc }}</view>
          </view>
        </view>
      </view>
      <view class="height-150"></view>
    </SimplePageContentLoader>
  </view>
</template>

<script setup lang="ts">
import CommonContent, { GetContentListItem, GetContentListParams } from '@/api/CommonContent';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { DataDateUtils } from '@imengyu/js-request-transform';

const recordData = useSimpleDataLoader<GetContentListItem[]>(async () => {
  return (await CommonContent.getContentList(new GetContentListParams()
    .setSelfValues({
      order: 'publish_at',
    })
   .setModelId(18)
   .setMainBodyColumnId(316)
  , 1, 50)).list
});
</script>

<style lang="scss">
@use "sass:math";
@use "sass:map";
@use "@/common/scss/define/colors.scss" as *;

.main-time-line {

  $color-primary: map.get($colors, "primary");
  $color-text: map.get($colors, "text");
  $box-color: map.get($colors, "pure");
  $size: 750rpx;

  position: relative;
  width: $size;

  &::after {
    background-color: $color-primary;
    left: 50%;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 1px;
    z-index: 10;
    content: '';
  }

  .item {    
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 50%;
    flex-shrink: 0;

    &.top {  
      transform: translateX(25rpx);

      .time {
        transform: translateX(55%);

        &::before {
          content: '◀';
        }
      }
    }
    &.bottom {
      transform: translateX(math.div($size, 2) - 25rpx);
      flex-direction: row;

      .time {
        text-align: right;
        flex-direction: row-reverse;
        transform: translateX(-53%);

        &::before {
          content: '▶';
        }
      }
    }

    .time2 {
      width: 2rem;
      flex-shrink: 0;
    }
    .time {
      position: absolute;
      display: flex;
      top: calc(50% - 1rem);
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      color: $color-primary;
      font-size: 0.8rem;

      &::before {
        font-size: 2rem;
        margin: 0 10rpx;
      }
    }
    .box {
      background-color: $box-color;
      padding: 20rpx;
      border-radius: 10rpx;

      .title {
        font-size: 1rem;
        color: $color-text;
        margin-bottom: 15rpx;
      }
      .content {
        font-size: 0.8rem;
        color: $color-text;
      }
    }
  }
}

</style>