lucia-frontend/src/views/Files/index.vue

<template>
  <div class="container pt-4 2xl:max-w-none">
    <!-- Recently Used -->
    <section class="mb-4">
      <h2 class="font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
      <!-- card group 最多六個-->
      <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full scrollbar whitespace-nowrap pb-4">
        <!-- card item v-for -->
        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300 ">
          <a href="" class="h-full flex flex-col justify-between">
            <div>
              <figure class="mb-2">
                <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
              </figure>
              <h3 class="text-sm font-medium mb-2">
                File type
              </h3>
              <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
                Daily operation recggggggggggggly operation records of Daily operation records of Daily operation records of Daily operation records of
              </p>
            </div>
            <p class="text-sm text-neutral-500">
              Edited just now
            </p>
          </a>
        </li>
        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
          <a href="" class="h-full flex flex-col justify-between">
            <div>
              <figure class="mb-2">
                <IconDataFormat class="w-8 h-8"></IconDataFormat>
              </figure>
              <h3 class="text-sm font-medium mb-2">
                File type
              </h3>
              <p class="text-sm text-neutral-500">
                Daily operation records of......
              </p>
            </div>
            <p class="text-sm text-neutral-500">
              Edited just now
            </p>
          </a>
        </li>
        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
          <a href="" class="h-full flex flex-col justify-between">
            <div>
              <figure class="mb-2">
                <IconDataFormat class="w-8 h-8"></IconDataFormat>
              </figure>
              <h3 class="text-sm font-medium mb-2">
                File type
              </h3>
              <p class="text-sm text-neutral-500">
                Daily operation records of......
              </p>
            </div>
            <p class="text-sm text-neutral-500">
              Edited just now
            </p>
          </a>
        </li>
        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
          <a href="" class="h-full flex flex-col justify-between">
            <div>
              <figure class="mb-2">
                <IconDataFormat class="w-8 h-8"></IconDataFormat>
              </figure>
              <h3 class="text-sm font-medium mb-2">
                File type
              </h3>
              <p class="text-sm text-neutral-500">
                Daily operation records of......
              </p>
            </div>
            <p class="text-sm text-neutral-500">
              Edited just now
            </p>
          </a>
        </li>
        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
          <a href="" class="h-full flex flex-col justify-between">
            <div>
              <figure class="mb-2">
                <IconDataFormat class="w-8 h-8"></IconDataFormat>
              </figure>
              <h3 class="text-sm font-medium mb-2">
                File type
              </h3>
              <p class="text-sm text-neutral-500">
                Daily operation records of......
              </p>
            </div>
            <p class="text-sm text-neutral-500">
              Edited just now
            </p>
          </a>
        </li>
        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
          <a href="" class="h-full flex flex-col justify-between">
            <div>
              <figure class="mb-2">
                <IconDataFormat class="w-8 h-8"></IconDataFormat>
              </figure>
              <h3 class="text-sm font-medium mb-2">
                File type
              </h3>
              <p class="text-sm text-neutral-500">
                Daily operation records of......
              </p>
            </div>
            <p class="text-sm text-neutral-500">
              Edited just now
            </p>
          </a>
        </li>
      </ul>
    </section>
    <section>
      <div class="py-4 mb-4 border-b flex justify-between items-center border-neutral-500">
        <h2 class="font-bold">All Files</h2>
        <figure class="flex items-center">
          <IconList class="mr-4"></IconList>
          <IconGrid></IconGrid>
        </figure>
      </div>
      <!-- All Files type of List -->
      <div style="margin-left: -16px; margin-right: -16px;" class="overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)]  scrollbar">
        <table class="w-full border-separate border-spacing-x-4 text-sm table-fixed">
          <thead class="sticky top-0 bg-neutral-10">
              <tr>
                <th>
                  Name
                  <IconVector class="inline-block ml-2 fill-neutral-500" ></IconVector>
              </th>
              <th>
                Parent log
                <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
              </th>
              <th>
                File type
                <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
              </th>
              <th>
                Owner
                <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
              </th>
              <th>
                Last update
                <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Daily operation records of wind turbines of...</td>
              <td class="text-neutral-500">-</td>
              <td class="text-neutral-500">Log</td>
              <td class="text-neutral-500">Ivory Liao</td>
              <td class="text-neutral-500"></td>
            </tr>
          </tbody>
        </table>
      </div>
    <!-- All Files type of grid -->
    <!-- <ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar">
      <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300 ">
        <a href="" class="h-full flex flex-col justify-between">
          <div>
            <figure class="mb-2">
              <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
            </figure>
            <h3 class="text-sm font-medium mb-2">
              1 File type
            </h3>
            <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
              Daily operation recggggggggggggly operation records of Daily operation records of Daily operation records of Daily operation records of
            </p>
          </div>
          <p class="text-sm text-neutral-500">
            Edited just now
          </p>
        </a>
      </li>
    </ul> -->
    </section>
  </div>
</template>

<script>
  import IconDataFormat from '@/components/icons/IconDataFormat.vue';
  import IconRule from '@/components/icons/IconRule.vue';
  import IconsFilter from '@/components/icons/IconsFilter.vue';
  import IconFlowChart from '@/components/icons/IconFlowChart.vue';
  import IconVector from '@/components/icons/IconVector.vue';
  import IconList from '@/components/icons/IconList.vue';
  import IconGrid from '@/components/icons/IconGrid.vue';

  export default {
    data() {
      return {

      }
    },
    setup() {},
    components: {
      IconDataFormat,
      IconRule,
      IconsFilter,
      IconFlowChart,
      IconVector,
      IconList,
      IconGrid
    }
  }

</script>

<style scoped lang="scss">
table {
  th {
    @apply border-b border-neutral-500 p-3 text-left font-black whitespace-nowrap break-keep overflow-hidden text-ellipsis
  }
  td {
    @apply border-b border-neutral-300 p-3 font-medium whitespace-nowrap break-keep overflow-hidden text-ellipsis
  }
  tr {
    @apply hover:bg-primary/50 duration-300
  }
}
</style>