xt-front/src/views/demo/list/index.vue

<template>
  <div class="m-4">
    <div class="mx-6 my-2">
      <List type="default" :data="listData" selected="0" />
    </div>
    <div class="mx-6 my-2">
      <List type="attachment" :data="listData1" selected="0" :width="320" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted } from 'vue';
  import List from '@/components/XTList/src/List.vue';

  const listData = [
    {
      id: '0',
      title: '红细胞笔迹测定',
      startTime: '2023-11-11 12:00',
      endTime: '2023-12-11 12:00',
      status: 'default',
    },
    {
      id: '2',
      title: '红细胞笔迹测定2',
      startTime: '2023-11-11 12:00',
      endTime: '2023-12-11 12:00',
      status: 'default',
    },
  ];
  const listData1 = [
    {
      id: '0',
      title: '红细胞笔迹测定',
      startTime: '2023-11-11 12:00',
      endTime: '2023-12-11 12:00',
      status: 'default',
    },
    {
      id: '2',
      title: '红细胞笔迹测定2',
      startTime: '2023-11-11 12:00',
      endTime: '2023-12-11 12:00',
      status: 'default',
    },
  ];

  onMounted(async () => {});
</script>

<style lang="less" scoped>
  ::v-deep(.ant-form-item-label > label) {
    width: 100% !important;
  }

  .timeline-outer {
    display: flex;
    margin-left: 20px;
    transition: all 0.3s ease-in-out;

    &_item {
      padding: 0 30px;
      height: 40px;
      line-height: 40px;
      border-radius: 30px;
      color: #fff;
      background: #0075ff;
      margin-right: 20px;
      cursor: pointer;
    }
  }
</style>