files scrollbar layout done
This commit is contained in:
chiayin
@@ -1,14 +1,402 @@
|
||||
<template>
|
||||
<h1>This is Files page.</h1>
|
||||
</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">
|
||||
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>
|
||||
<!-- All Files type of List -->
|
||||
<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>
|
||||
<div style="margin-left: -16px; margin-right: -16px;" class="overflow-y-scroll overflow-x-hidden h-[calc(100vh_-_480px)] scrollbar">
|
||||
<table class="w-full border-separate border-spacing-x-4 text-sm ">
|
||||
<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>
|
||||
<tr>
|
||||
<td>filter 1109</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Filter</td>
|
||||
<td class="text-neutral-500">Chia-Kai Liu</td>
|
||||
<td class="text-neutral-500">37 minutes ago</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rule 0327</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Rule</td>
|
||||
<td class="text-neutral-500">Elizabeth Alexandra Mary</td>
|
||||
<td class="text-neutral-500">22 hours ago</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Process 1225</td>
|
||||
<td class="text-neutral-500">Daily operation records of wind turbines of...</td>
|
||||
<td class="text-neutral-500">Design</td>
|
||||
<td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
|
||||
<td class="text-neutral-500">2022/08/20</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<!-- All Files type of grid -->
|
||||
<!-- <section>
|
||||
<h2 class="font-bold py-4 mb-4 border-b">All Files</h2>
|
||||
<ul class="grid grid-cols-6 gap-4">
|
||||
<li class="w-[216px] h-[168px] p-4 border rounded">
|
||||
<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">
|
||||
Daily operation records of......
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm">
|
||||
Edited just now
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
// export default {
|
||||
// created() {
|
||||
// // get cookie token
|
||||
// const cookieToken = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*=\s*([^;]*).*$)|^.*$/, "$1");
|
||||
// console.log(cookieToken);
|
||||
// this.$http.defaults.headers.common['Authorization'] = cookieToken;
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
<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
|
||||
}
|
||||
td {
|
||||
@apply border-b border-neutral-300 p-3 font-medium break-all
|
||||
}
|
||||
tr {
|
||||
@apply hover:bg-primary/50 duration-300
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user