imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

files scrollbar layout done

Browse Source
This commit is contained in:
chiayin
2023-02-08 14:52:02 +08:00
parent 9dc25b9b99
commit 1e5cac35c7
15 changed files with 580 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

412
src/views/Files/index.vue
View File

@@ -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>

14
src/views/Login/index.vue
View File

@@ -6,23 +6,23 @@
<form action="#" method="post" class="w-full grid gap-2" @submit.prevent="signIn">
<label for="account" class="relative">
<p class="text-sm font-normal mb-2">Account</p>
<span class="absolute bottom-2 left-0 flex items-center pl-2 pr-2 border-r border-neutral">
<IconMember class="h-5 w-5 fill-default"/>
<span class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]">
<IconMember class="h-5 w-5 fill-current"/>
</span>
<input type="text" id="account" class="w-full border border-neutral rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required autofocus v-model.trim="auth.username" @change="changeHandler($event)"/>
<input type="text" id="account" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required autofocus v-model.trim="auth.username" @change="changeHandler($event)"/>
</label>
<label for="passwordt" class="relative block">
<p class="text-sm font-normal mb-2">Password</p>
<span class="absolute bottom-2 left-0 flex items-center pl-2 pr-2 border-r border-neutral">
<IconLockKey class="h-5 w-5"/>
<span class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]">
<IconLockKey class="h-5 w-5 fill-current"/>
</span>
<input :type="showPassword ? 'text' : 'password'" id="password" aria-describedby="password-addon" class="w-full border border-neutral rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required v-model.trim="auth.password" @change="changeHandler($event)"/>
<input :type="showPassword ? 'text' : 'password'" id="password" aria-describedby="password-addon" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required v-model.trim="auth.password" @change="changeHandler($event)"/>
<span class="absolute bottom-2 right-4 inline-flex items-center cursor-pointer" v-show="auth.password" @click="showPassword = !showPassword">
<IconEyeClose class="h-5 w-5" v-if="showPassword"/>
<IconEyeOpen class="h-5 w-5" v-else/>
</span>
</label>
<p class="mb-6 text-danger">
<p class="my-4 text-danger">
<span v-show="isInvalid">
<IconWarnTriangle class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"/>Incorrect account or password.
</span>