feature login
This commit is contained in:
chiayin
@@ -2,8 +2,7 @@
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
<script setup>
|
||||
import { RouterLink, RouterView } from "vue-router";
|
||||
|
||||
@@ -1,3 +1,37 @@
|
||||
/* 引入 Google fonts */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* 全域字型 */
|
||||
@layer base {
|
||||
html {
|
||||
font-family: 'Roboto', sans-serif, system-ui;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
/* components */
|
||||
/* button */
|
||||
.btn {
|
||||
@apply inline-block rounded-full text-base font-medium text-center align-middle transition-colors
|
||||
}
|
||||
.btn-sm {
|
||||
@apply px-5 py-2
|
||||
}
|
||||
.btn-lg {
|
||||
@apply px-5 py-3
|
||||
}
|
||||
.btn-c-primary {
|
||||
@apply bg-neutral border border-neutral hover:bg-[#FFFFFF] hover:text-primary hover:border hover:border-primary active:bg-primary active:text-[#FFFFFF] active:border
|
||||
}
|
||||
.btn-disable {
|
||||
@apply border border-neutral bg-[#FFFFFF] text-neutral
|
||||
}
|
||||
|
||||
/* invalid */
|
||||
.is-invalid :invalid{
|
||||
@apply invalid:border-danger focus:ring-danger
|
||||
}
|
||||
|
||||
16
src/components/Header.vue
Normal file
16
src/components/Header.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="mx-auto max-w-screen-2xl px-8">
|
||||
<div class="flex justify-between items-center py-2 relative">
|
||||
<figure>
|
||||
<img src="../../assets/icons/DSP_LOGO.svg" alt="DSP_Logo">
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/icons/meber.svg" alt="member">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
22
src/components/Navbar.vue
Normal file
22
src/components/Navbar.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<nav class="bg-neutral">
|
||||
<div class="mx-auto px-8 w-full h-12">
|
||||
<div class="flex justify-between items-center py-2 h-full" v-show="showNavbarBreadcrumb">
|
||||
files
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showNavbarBreadcrumb: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
|
||||
},
|
||||
}
|
||||
</script>
|
||||
5
src/components/icons/IconEyeClose.vue
Normal file
5
src/components/icons/IconEyeClose.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.0529 3.24373C4.9174 3.10198 4.73177 3.01893 4.53578 3.01238C4.33979 3.00583 4.14903 3.07631 4.00437 3.20871C3.85971 3.34111 3.77266 3.5249 3.76187 3.7207C3.75108 3.9165 3.81741 4.10874 3.94665 4.25624L5.74665 6.23436C2.34352 8.32498 0.881025 11.55 0.8154 11.7C0.773866 11.7962 0.752441 11.8999 0.752441 12.0047C0.752441 12.1095 0.773866 12.2132 0.8154 12.3094C0.843525 12.375 1.6404 14.1375 3.4029 15.9094C5.75602 18.2531 8.7279 19.5 11.9998 19.5C13.6807 19.5067 15.3444 19.1618 16.8842 18.4875L18.9467 20.7562C19.0169 20.833 19.1023 20.8943 19.1976 20.9363C19.2928 20.9783 19.3957 21 19.4998 21C19.6869 20.9982 19.8669 20.9282 20.006 20.8031C20.0797 20.7373 20.1396 20.6574 20.1819 20.5681C20.2243 20.4789 20.2484 20.382 20.2528 20.2833C20.2571 20.1846 20.2417 20.086 20.2074 19.9933C20.173 19.9007 20.1205 19.8158 20.0529 19.7437L5.0529 3.24373ZM9.48727 10.3594L13.3966 14.6531C12.9666 14.8818 12.4868 15.0009 11.9998 15C11.4591 15.0001 10.9284 14.8542 10.4639 14.5775C9.99933 14.3009 9.61819 13.9038 9.36076 13.4283C9.10334 12.9528 8.97919 12.4166 9.00146 11.8764C9.02373 11.3362 9.19159 10.812 9.48727 10.3594V10.3594ZM11.9998 18C9.11228 18 6.5904 16.95 4.50915 14.8781C3.64691 14.0329 2.91685 13.0626 2.34352 12C2.78415 11.175 4.19978 8.85936 6.7779 7.36873L8.4654 9.22499C7.81494 10.0615 7.48054 11.1007 7.52112 12.1596C7.5617 13.2185 7.97465 14.2291 8.68723 15.0134C9.39981 15.7976 10.3663 16.3053 11.4164 16.4469C12.4666 16.5885 13.533 16.355 14.4279 15.7875L15.806 17.3062C14.5911 17.771 13.3005 18.0063 11.9998 18V18ZM23.1842 12.3094C23.1467 12.3937 22.1998 14.4937 20.0529 16.4156C19.9152 16.5359 19.7388 16.6025 19.556 16.6031C19.4509 16.6044 19.3467 16.5823 19.2511 16.5385C19.1555 16.4948 19.0707 16.4304 19.0029 16.35C18.937 16.2767 18.8862 16.1912 18.8534 16.0983C18.8205 16.0055 18.8063 15.907 18.8116 15.8086C18.8168 15.7103 18.8413 15.6139 18.8838 15.525C18.9263 15.4361 18.9859 15.3565 19.0592 15.2906C20.107 14.3507 20.9854 13.2376 21.656 12C21.0811 10.9356 20.3513 9.96244 19.4904 9.11248C17.4091 7.04998 14.8873 5.99999 11.9998 5.99999C11.3903 5.99753 10.7818 6.04772 10.181 6.14998C9.98493 6.17994 9.78489 6.13197 9.62371 6.01634C9.46252 5.90071 9.35299 5.72659 9.31852 5.53124C9.30244 5.43397 9.30569 5.33448 9.32809 5.23847C9.35049 5.14246 9.3916 5.0518 9.44907 4.9717C9.50654 4.89159 9.57924 4.8236 9.66301 4.77161C9.74678 4.71963 9.83998 4.68467 9.93727 4.66873C10.6189 4.55517 11.3088 4.49873 11.9998 4.49998C15.2717 4.49998 18.2435 5.74686 20.5966 8.09061C22.3591 9.86249 23.156 11.625 23.1842 11.7C23.2257 11.7962 23.2471 11.8999 23.2471 12.0047C23.2471 12.1095 23.2257 12.2132 23.1842 12.3094V12.3094ZM12.5623 9.05624C12.465 9.03777 12.3723 9.00032 12.2896 8.94604C12.2068 8.89176 12.1355 8.82171 12.0798 8.73987C11.9672 8.57461 11.925 8.37141 11.9623 8.17498C11.9996 7.97856 12.1134 7.80499 12.2786 7.69247C12.4439 7.57995 12.6471 7.53769 12.8435 7.57499C13.7999 7.76202 14.6703 8.25257 15.3257 8.97375C15.981 9.69494 16.3862 10.6083 16.481 11.5781C16.4993 11.7757 16.4385 11.9725 16.312 12.1254C16.1855 12.2782 16.0035 12.3747 15.806 12.3937H15.731C15.5455 12.3945 15.3664 12.3255 15.2292 12.2005C15.0921 12.0755 15.0068 11.9036 14.9904 11.7187C14.9257 11.0729 14.6546 10.4651 14.2172 9.98546C13.7798 9.50585 13.1995 9.18 12.5623 9.05624V9.05624Z" fill="#C4C4C4"/>
|
||||
</svg>
|
||||
</template>
|
||||
5
src/components/icons/IconEyeOpen.vue
Normal file
5
src/components/icons/IconEyeOpen.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23.1842 11.7C23.1561 11.625 22.3592 9.8625 20.5967 8.09063C18.2436 5.74688 15.2717 4.5 11.9998 4.5C8.72793 4.5 5.75606 5.74688 3.40293 8.09063C1.64043 9.8625 0.843558 11.625 0.815433 11.7C0.773576 11.7945 0.751953 11.8967 0.751953 12C0.751953 12.1033 0.773576 12.2055 0.815433 12.3C0.843558 12.375 1.64043 14.1375 3.40293 15.9094C5.75606 18.2531 8.72793 19.5 11.9998 19.5C15.2717 19.5 18.2436 18.2531 20.5967 15.9094C22.3592 14.1375 23.1561 12.375 23.1842 12.3C23.226 12.2055 23.2477 12.1033 23.2477 12C23.2477 11.8967 23.226 11.7945 23.1842 11.7ZM11.9998 18C9.11231 18 6.59043 16.95 4.50918 14.8781C3.64906 14.031 2.91925 13.0611 2.34356 12C2.91847 10.9356 3.64831 9.96245 4.50918 9.1125C6.59043 7.05 9.11231 6 11.9998 6C14.8873 6 17.4092 7.05 19.4904 9.1125C20.3513 9.96245 21.0811 10.9356 21.6561 12C20.9811 13.2656 18.0373 18 11.9998 18ZM11.9998 7.5C11.1098 7.5 10.2398 7.76392 9.49974 8.25839C8.75972 8.75285 8.18295 9.45566 7.84235 10.2779C7.50176 11.1002 7.41264 12.005 7.58628 12.8779C7.75991 13.7508 8.18849 14.5526 8.81783 15.182C9.44716 15.8113 10.249 16.2399 11.1219 16.4135C11.9948 16.5872 12.8996 16.4981 13.7219 16.1575C14.5442 15.8169 15.247 15.2401 15.7414 14.5001C16.2359 13.76 16.4998 12.89 16.4998 12C16.4998 10.8065 16.0257 9.66193 15.1818 8.81802C14.3379 7.97411 13.1933 7.5 11.9998 7.5ZM11.9998 15C11.4065 15 10.8264 14.8241 10.3331 14.4944C9.83975 14.1648 9.45523 13.6962 9.22817 13.1481C9.00111 12.5999 8.9417 11.9967 9.05745 11.4147C9.17321 10.8328 9.45893 10.2982 9.87849 9.87868C10.298 9.45912 10.8326 9.1734 11.4145 9.05764C11.9965 8.94189 12.5997 9.0013 13.1479 9.22836C13.696 9.45542 14.1646 9.83994 14.4942 10.3333C14.8239 10.8266 14.9998 11.4067 14.9998 12C14.9973 12.7949 14.6805 13.5565 14.1184 14.1186C13.5563 14.6807 12.7947 14.9975 11.9998 15Z" fill="#0099FF"/>
|
||||
</svg>
|
||||
</template>
|
||||
5
src/components/icons/IconLockKey.vue
Normal file
5
src/components/icons/IconLockKey.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 11.75C11.3713 11.7524 10.7643 11.9805 10.2895 12.3926C9.81465 12.8048 9.50353 13.3736 9.41271 13.9958C9.32189 14.6179 9.45738 15.252 9.79456 15.7827C10.1317 16.3134 10.6482 16.7054 11.25 16.8875V18.5C11.25 18.6989 11.329 18.8897 11.4697 19.0303C11.6103 19.171 11.8011 19.25 12 19.25C12.1989 19.25 12.3897 19.171 12.5303 19.0303C12.671 18.8897 12.75 18.6989 12.75 18.5V16.8875C13.3518 16.7054 13.8683 16.3134 14.2054 15.7827C14.5426 15.252 14.6781 14.6179 14.5873 13.9958C14.4965 13.3736 14.1854 12.8048 13.7105 12.3926C13.2357 11.9805 12.6287 11.7524 12 11.75ZM12 15.5C11.7775 15.5 11.56 15.434 11.375 15.3104C11.19 15.1868 11.0458 15.0111 10.9606 14.8055C10.8755 14.6 10.8532 14.3738 10.8966 14.1555C10.94 13.9373 11.0472 13.7368 11.2045 13.5795C11.3618 13.4222 11.5623 13.315 11.7805 13.2716C11.9988 13.2282 12.225 13.2505 12.4305 13.3356C12.6361 13.4208 12.8118 13.565 12.9354 13.75C13.059 13.935 13.125 14.1525 13.125 14.375C13.125 14.6734 13.0065 14.9595 12.7955 15.1705C12.5845 15.3815 12.2984 15.5 12 15.5ZM19.5 8.75H16.125V6.125C16.125 5.03098 15.6904 3.98177 14.9168 3.20818C14.1432 2.4346 13.094 2 12 2C10.906 2 9.85677 2.4346 9.08318 3.20818C8.3096 3.98177 7.875 5.03098 7.875 6.125V8.75H4.5C4.10218 8.75 3.72064 8.90804 3.43934 9.18934C3.15804 9.47064 3 9.85218 3 10.25V20.75C3 21.1478 3.15804 21.5294 3.43934 21.8107C3.72064 22.092 4.10218 22.25 4.5 22.25H19.5C19.8978 22.25 20.2794 22.092 20.5607 21.8107C20.842 21.5294 21 21.1478 21 20.75V10.25C21 9.85218 20.842 9.47064 20.5607 9.18934C20.2794 8.90804 19.8978 8.75 19.5 8.75ZM9.375 6.125C9.375 5.42881 9.65156 4.76113 10.1438 4.26884C10.6361 3.77656 11.3038 3.5 12 3.5C12.6962 3.5 13.3639 3.77656 13.8562 4.26884C14.3484 4.76113 14.625 5.42881 14.625 6.125V8.75H9.375V6.125ZM19.5 20.75H4.5V10.25H19.5V20.75Z" fill="#1A1A1A"/>
|
||||
</svg>
|
||||
</template>
|
||||
6
src/components/icons/IconMember.vue
Normal file
6
src/components/icons/IconMember.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="20" cy="20" r="20" fill="white"/>
|
||||
<path d="M40 20.0018C40.0001 16.6744 39.1701 13.3995 37.5852 10.4739C36.0004 7.5482 33.7107 5.06419 30.9236 3.24683C28.1365 1.42948 24.9401 0.336201 21.6239 0.0660405C18.3076 -0.20412 14.9764 0.357371 11.9319 1.69965C8.88748 3.04193 6.22597 5.12259 4.1885 7.75315C2.15104 10.3837 0.802001 13.481 0.263595 16.7646C-0.274811 20.0481 0.0144265 23.4141 1.10511 26.5577C2.19579 29.7012 4.05344 32.523 6.50981 34.7673L6.7451 34.9634C10.3981 38.208 15.1142 40 20 40C24.8858 40 29.6019 38.208 33.2549 34.9634L33.4902 34.7673C35.5431 32.8948 37.1826 30.6143 38.3035 28.0717C39.4245 25.5291 40.0023 22.7805 40 20.0018ZM2.35294 20.0018C2.349 17.1207 3.05046 14.2824 4.39604 11.7349C5.74163 9.18731 7.69042 7.00795 10.0722 5.38712C12.454 3.76629 15.1964 2.75327 18.0599 2.43653C20.9234 2.11979 23.8209 2.50896 26.4993 3.57007C29.1778 4.63117 31.5557 6.33193 33.4255 8.52381C35.2952 10.7157 36.6 13.332 37.2257 16.1444C37.8515 18.9567 37.7792 21.8795 37.0153 24.6574C36.2513 27.4354 34.8189 29.9841 32.8431 32.0809C30.9901 29.2141 28.2281 27.0527 25 25.9433C26.6114 24.8699 27.8347 23.3065 28.489 21.4841C29.1433 19.6617 29.1938 17.6772 28.6331 15.8239C28.0725 13.9706 26.9303 12.3469 25.3756 11.1929C23.8209 10.0389 21.9362 9.41584 20 9.41584C18.0638 9.41584 16.1791 10.0389 14.6244 11.1929C13.0697 12.3469 11.9275 13.9706 11.3669 15.8239C10.8062 17.6772 10.8567 19.6617 11.511 21.4841C12.1653 23.3065 13.3886 24.8699 15 25.9433C11.7719 27.0527 9.00992 29.2141 7.15686 32.0809C4.06852 28.8179 2.34915 24.4947 2.35294 20.0018ZM13.3333 18.433C13.3333 17.1144 13.7243 15.8254 14.4569 14.729C15.1894 13.6326 16.2306 12.7781 17.4488 12.2735C18.667 11.7689 20.0074 11.6369 21.3006 11.8941C22.5938 12.1514 23.7817 12.7863 24.714 13.7187C25.6464 14.6511 26.2813 15.8391 26.5386 17.1324C26.7958 18.4256 26.6638 19.7662 26.1592 20.9844C25.6546 22.2027 24.8001 23.2439 23.7038 23.9765C22.6075 24.7091 21.3185 25.1001 20 25.1001C18.2335 25.0949 16.5408 24.3908 15.2917 23.1416C14.0425 21.8925 13.3385 20.1997 13.3333 18.433ZM8.90196 33.728C10.0553 31.8159 11.6831 30.2342 13.6275 29.1362C15.5719 28.0383 17.767 27.4613 20 27.4613C22.233 27.4613 24.428 28.0383 26.3725 29.1362C28.3169 30.2342 29.9447 31.8159 31.098 33.728C27.9556 36.2653 24.0388 37.6492 20 37.6492C15.9612 37.6492 12.0444 36.2653 8.90196 33.728Z"/>
|
||||
</svg>
|
||||
</template>
|
||||
5
src/components/icons/IconWarnTriangle.vue
Normal file
5
src/components/icons/IconWarnTriangle.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.78488 2.03878C9.62343 1.72766 9.37026 1.46508 9.05455 1.28129C8.73885 1.09751 8.37345 1 8.00047 1C7.62748 1 7.26209 1.09751 6.94638 1.28129C6.63068 1.46508 6.37751 1.72766 6.21605 2.03878L0.521086 12.4048C-0.160262 13.6423 0.70072 15.2857 2.3048 15.2857H13.6954C15.3002 15.2857 16.1598 13.643 15.4799 12.4048L9.78488 2.03878ZM8.00047 5.54628C8.18657 5.54628 8.36505 5.61468 8.49664 5.73645C8.62824 5.85822 8.70216 6.02337 8.70216 6.19557V9.44205C8.70216 9.61425 8.62824 9.77941 8.49664 9.90117C8.36505 10.0229 8.18657 10.0913 8.00047 10.0913C7.81437 10.0913 7.63589 10.0229 7.50429 9.90117C7.3727 9.77941 7.29877 9.61425 7.29877 9.44205V6.19557C7.29877 6.02337 7.3727 5.85822 7.50429 5.73645C7.63589 5.61468 7.81437 5.54628 8.00047 5.54628ZM8.00047 11.0653C8.18657 11.0653 8.36505 11.1337 8.49664 11.2555C8.62824 11.3772 8.70216 11.5424 8.70216 11.7146V12.0392C8.70216 12.2114 8.62824 12.3766 8.49664 12.4984C8.36505 12.6201 8.18657 12.6885 8.00047 12.6885C7.81437 12.6885 7.63589 12.6201 7.50429 12.4984C7.3727 12.3766 7.29877 12.2114 7.29877 12.0392V11.7146C7.29877 11.5424 7.3727 11.3772 7.50429 11.2555C7.63589 11.1337 7.81437 11.0653 8.00047 11.0653Z" fill="#FF3366"/>
|
||||
</svg>
|
||||
</template>
|
||||
60
src/components/icons/dspLogo.vue
Normal file
60
src/components/icons/dspLogo.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<svg
|
||||
width="124"
|
||||
height="31"
|
||||
viewBox="0 0 124 31"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M122.558 19.7593C122.891 19.9517 122.891 20.4328 122.558 20.6253L118 23.2567C117.667 23.4491 117.25 23.2086 117.25 22.8237L117.25 17.5609C117.25 17.176 117.667 16.9354 118 17.1279L122.558 19.7593Z"
|
||||
fill="#003E66"
|
||||
/>
|
||||
<path
|
||||
d="M42.3484 28.9432C41.4222 28.9432 40.6899 28.674 40.1514 28.1355C39.613 27.597 39.3438 26.8647 39.3438 25.9386V9.23549C39.5807 9.19241 39.9576 9.13857 40.4745 9.07395C40.9914 8.9878 41.4868 8.94472 41.9607 8.94472C42.4561 8.94472 42.8868 8.9878 43.253 9.07395C43.6407 9.13857 43.9638 9.2678 44.2222 9.46164C44.4807 9.65549 44.6745 9.92472 44.8038 10.2693C44.933 10.614 44.9976 11.0663 44.9976 11.6263V24.3878H52.3961C52.5468 24.6247 52.6868 24.9478 52.8161 25.357C52.9453 25.7447 53.0099 26.154 53.0099 26.5847C53.0099 27.4463 52.8268 28.0601 52.4607 28.4263C52.0945 28.7709 51.6099 28.9432 51.0068 28.9432H42.3484Z"
|
||||
fill="#003E66"
|
||||
/>
|
||||
<path
|
||||
d="M55.5029 13.3709C55.7183 13.3063 56.0521 13.2416 56.5044 13.177C56.9783 13.1124 57.4629 13.0801 57.9583 13.0801C58.4321 13.0801 58.8521 13.1124 59.2183 13.177C59.606 13.2416 59.9291 13.3709 60.1875 13.5647C60.446 13.7586 60.6398 14.0278 60.7691 14.3724C60.9198 14.6955 60.9952 15.1263 60.9952 15.6647V22.6109C60.9952 23.494 61.2106 24.1293 61.6414 24.517C62.0721 24.8832 62.6967 25.0663 63.5152 25.0663C64.0106 25.0663 64.4091 25.0232 64.7106 24.937C65.0337 24.8509 65.2814 24.7647 65.4537 24.6786V13.3709C65.6691 13.3063 66.0029 13.2416 66.4552 13.177C66.9291 13.1124 67.4137 13.0801 67.9091 13.0801C68.3829 13.0801 68.8029 13.1124 69.1691 13.177C69.5567 13.2416 69.8798 13.3709 70.1383 13.5647C70.3967 13.7586 70.5906 14.0278 70.7198 14.3724C70.8706 14.6955 70.946 15.1263 70.946 15.6647V25.4863C70.946 26.5632 70.4937 27.3709 69.5891 27.9093C68.8352 28.3832 67.9306 28.7386 66.8752 28.9755C65.8414 29.234 64.7106 29.3632 63.4829 29.3632C62.3198 29.3632 61.2429 29.234 60.2521 28.9755C59.2829 28.717 58.4429 28.3186 57.7321 27.7801C57.0214 27.2416 56.4721 26.5524 56.0844 25.7124C55.6967 24.8509 55.5029 23.817 55.5029 22.6109V13.3709Z"
|
||||
fill="#003E66"
|
||||
/>
|
||||
<path
|
||||
d="M83.8055 16.9893C83.267 16.9893 82.7501 17.0755 82.2547 17.2478C81.7808 17.4201 81.3608 17.6786 80.9947 18.0232C80.6501 18.3463 80.3701 18.7555 80.1547 19.2509C79.9393 19.7463 79.8316 20.3278 79.8316 20.9955C79.8316 22.3309 80.2085 23.3324 80.9624 24.0001C81.7378 24.6678 82.6747 25.0016 83.7731 25.0016C84.4193 25.0016 84.9793 24.9263 85.4531 24.7755C85.927 24.6247 86.347 24.4632 86.7131 24.2909C87.1439 24.5924 87.467 24.9263 87.6824 25.2924C87.8978 25.637 88.0055 26.057 88.0055 26.5524C88.0055 27.4355 87.5855 28.1247 86.7455 28.6201C85.9055 29.094 84.7424 29.3309 83.2562 29.3309C81.8993 29.3309 80.6716 29.137 79.5731 28.7493C78.4747 28.3401 77.527 27.7801 76.7301 27.0693C75.9547 26.337 75.3516 25.4647 74.9208 24.4524C74.4901 23.4401 74.2747 22.3201 74.2747 21.0924C74.2747 19.6709 74.5008 18.4324 74.9531 17.377C75.427 16.3001 76.0624 15.417 76.8593 14.7278C77.6562 14.0386 78.5716 13.5216 79.6054 13.177C80.6608 12.8324 81.7701 12.6601 82.9331 12.6601C84.4839 12.6601 85.6793 12.9401 86.5193 13.5001C87.3593 14.0601 87.7793 14.7816 87.7793 15.6647C87.7793 16.074 87.6824 16.4616 87.4885 16.8278C87.2947 17.1724 87.0685 17.474 86.8101 17.7324C86.4439 17.5601 86.0024 17.3986 85.4855 17.2478C84.9685 17.0755 84.4085 16.9893 83.8055 16.9893Z"
|
||||
fill="#003E66"
|
||||
/>
|
||||
<path
|
||||
d="M91.2769 8.78318C91.2769 7.96472 91.5461 7.27549 92.0845 6.71549C92.6445 6.15549 93.3769 5.87549 94.2815 5.87549C95.1861 5.87549 95.9076 6.15549 96.4461 6.71549C97.0061 7.27549 97.2861 7.96472 97.2861 8.78318C97.2861 9.60164 97.0061 10.2909 96.4461 10.8509C95.9076 11.4109 95.1861 11.6909 94.2815 11.6909C93.3769 11.6909 92.6445 11.4109 92.0845 10.8509C91.5461 10.2909 91.2769 9.60164 91.2769 8.78318ZM97.0276 28.814C96.7907 28.857 96.4353 28.9109 95.9615 28.9755C95.5092 29.0616 95.0461 29.1047 94.5722 29.1047C94.0984 29.1047 93.6676 29.0724 93.2799 29.0078C92.9138 28.9432 92.6015 28.814 92.343 28.6201C92.0845 28.4263 91.8799 28.1678 91.7292 27.8447C91.5999 27.5001 91.5353 27.0586 91.5353 26.5201V13.3709C91.7722 13.3278 92.1169 13.274 92.5692 13.2093C93.043 13.1232 93.5169 13.0801 93.9907 13.0801C94.4646 13.0801 94.8845 13.1124 95.2507 13.177C95.6384 13.2416 95.9615 13.3709 96.2199 13.5647C96.4784 13.7586 96.6722 14.0278 96.8015 14.3724C96.9522 14.6955 97.0276 15.1263 97.0276 15.6647V28.814Z"
|
||||
fill="#003E66"
|
||||
/>
|
||||
<path
|
||||
d="M107.89 25.357C108.256 25.357 108.655 25.3247 109.086 25.2601C109.538 25.174 109.872 25.0663 110.087 24.937V22.3524L107.761 22.5463C107.158 22.5893 106.663 22.7186 106.275 22.934C105.887 23.1493 105.693 23.4724 105.693 23.9032C105.693 24.334 105.855 24.6893 106.178 24.9693C106.523 25.2278 107.093 25.357 107.89 25.357ZM107.632 12.6601C108.795 12.6601 109.85 12.7786 110.798 13.0155C111.767 13.2524 112.586 13.6186 113.253 14.114C113.943 14.5878 114.47 15.2016 114.836 15.9555C115.203 16.6878 115.386 17.5601 115.386 18.5724V25.8093C115.386 26.3693 115.224 26.8324 114.901 27.1986C114.6 27.5432 114.233 27.8447 113.803 28.1032C112.403 28.9432 110.432 29.3632 107.89 29.3632C106.749 29.3632 105.715 29.2555 104.789 29.0401C103.884 28.8247 103.098 28.5016 102.43 28.0709C101.784 27.6401 101.278 27.0909 100.912 26.4232C100.567 25.7555 100.395 24.9801 100.395 24.097C100.395 22.6109 100.836 21.4693 101.72 20.6724C102.603 19.8755 103.97 19.3801 105.823 19.1863L110.055 18.734V18.5078C110.055 17.8832 109.775 17.4416 109.215 17.1832C108.676 16.9032 107.89 16.7632 106.856 16.7632C106.038 16.7632 105.241 16.8493 104.466 17.0216C103.69 17.194 102.99 17.4093 102.366 17.6678C102.086 17.474 101.849 17.1832 101.655 16.7955C101.461 16.3863 101.364 15.9663 101.364 15.5355C101.364 14.9755 101.493 14.534 101.752 14.2109C102.032 13.8663 102.452 13.5755 103.012 13.3386C103.636 13.1016 104.369 12.9293 105.209 12.8216C106.07 12.7139 106.878 12.6601 107.632 12.6601Z"
|
||||
fill="#003E66"
|
||||
/>
|
||||
<path
|
||||
d="M23.8865 15.394L15.325 6.66464C14.2639 5.58281 12.5437 5.58281 11.4826 6.66464L2.92112 15.394C1.86009 16.4759 1.86009 18.2299 2.92112 19.3117L11.4826 28.0411C12.5437 29.1229 14.2639 29.1229 15.325 28.0411L23.8865 19.3117C24.9475 18.2299 24.9475 16.4759 23.8865 15.394Z"
|
||||
fill="#5FDDCF"
|
||||
stroke="#003E66"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<line
|
||||
x1="25.5771"
|
||||
y1="1.5"
|
||||
x2="25.5771"
|
||||
y2="10.2647"
|
||||
stroke="#003E66"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<line
|
||||
x1="29.5"
|
||||
y1="5.02954"
|
||||
x2="22.1154"
|
||||
y2="5.02954"
|
||||
stroke="#003E66"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
15
src/main.js
15
src/main.js
@@ -1,14 +1,23 @@
|
||||
import { createApp } from "vue";
|
||||
import { createApp, markRaw } from "vue";
|
||||
import { createPinia } from "pinia";
|
||||
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import axios from 'axios'
|
||||
import VueAxios from 'vue-axios'
|
||||
|
||||
import "./assets/tailwind.css";
|
||||
import "./assets/main.css";
|
||||
|
||||
const pinia = createPinia();
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(createPinia());
|
||||
pinia.use(({ store }) => {
|
||||
store.$router = markRaw(router)
|
||||
});
|
||||
|
||||
app.use(pinia);
|
||||
app.use(router);
|
||||
app.use(VueAxios, axios);
|
||||
|
||||
|
||||
app.mount("#app");
|
||||
|
||||
@@ -1,25 +1,76 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import MainContainer from '../views/MainContainer.vue';
|
||||
import AuthContainer from '@/views/AuthContainer.vue';
|
||||
import MainContainer from '@/views/MainContainer.vue';
|
||||
import Login from '@/views/Login/index.vue';
|
||||
import Files from '@/views/Files/index.vue';
|
||||
import MemberArea from '@/views/MemberArea/index.vue';
|
||||
import NotFound404 from '@/views/NotFound404.vue';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "",
|
||||
component: MainContainer,
|
||||
childeren: [
|
||||
path: '/', // 預設進入路由
|
||||
redirect: '/files' //重定向
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: "AuthContainer",
|
||||
component: AuthContainer,
|
||||
children: [
|
||||
{
|
||||
path: "/Login",
|
||||
path: "login",
|
||||
name: "Login",
|
||||
component: Login,
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
name: "MainContainer",
|
||||
component: MainContainer,
|
||||
children: [
|
||||
{
|
||||
path: "member-area",
|
||||
name: "MemberArea",
|
||||
component: MemberArea,
|
||||
},
|
||||
{
|
||||
path: "files",
|
||||
name: "Files",
|
||||
component: Files,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/:pathMatch(.*)*",
|
||||
name: "NotFound404",
|
||||
component: NotFound404,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
||||
const base_url = import.meta.env.BASE_URL;
|
||||
const router = createRouter({
|
||||
history: createWebHistory(base_url),
|
||||
routes
|
||||
});
|
||||
|
||||
// 全域性路由守衛
|
||||
router.beforeEach((to, from) => {
|
||||
// to: Route: 即將要進入的目標 路由物件
|
||||
// from: Route: 當前導航正要離開的路由
|
||||
|
||||
const nextRoute = ['MemberArea', 'Files'];
|
||||
let isCookie = document.cookie.split(';').some(c => c.trim().startsWith('luciaToken=')); // 是否登入
|
||||
|
||||
// 未登入狀態；當路由到nextRoute指定頁時，跳轉至login
|
||||
if (nextRoute.indexOf(to.name) >= 0) {
|
||||
if (!isCookie) router.push({ name: 'Login' });
|
||||
}
|
||||
// 已登入狀態；當路由到login時，跳轉至home
|
||||
if (to.name === 'Login') {
|
||||
if (isCookie) router.push({ name: 'Files' });
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
import { ref, computed } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
const useCounterStore = defineStore("counter", () => {
|
||||
const count = ref(0);
|
||||
const doubleCount = computed(() => count.value * 2);
|
||||
|
||||
function increment() {
|
||||
count.value++;
|
||||
}
|
||||
|
||||
return {
|
||||
count,
|
||||
doubleCount,
|
||||
increment
|
||||
};
|
||||
})
|
||||
|
||||
export default useCounterStore;
|
||||
87
src/stores/login.js
Normal file
87
src/stores/login.js
Normal file
@@ -0,0 +1,87 @@
|
||||
import { defineStore } from "pinia";
|
||||
import axios from 'axios';
|
||||
|
||||
export default defineStore('loginStore', {
|
||||
// data, methods, computed
|
||||
// state, actions, getters
|
||||
state: () => ({
|
||||
auth: {
|
||||
username: '',
|
||||
password: '',
|
||||
},
|
||||
isInvalid: false,
|
||||
userData: {},
|
||||
}),
|
||||
|
||||
// 讓元件取用相關的資料狀態
|
||||
getters: {
|
||||
},
|
||||
|
||||
actions: {
|
||||
/**
|
||||
* fetch Login For Access Token api
|
||||
*/
|
||||
async signIn() {
|
||||
const api = 'api/oauth/token';
|
||||
const config = {
|
||||
headers: {
|
||||
// http post 預設的 url 編碼，非 json 格式
|
||||
'Content-Type':'application/x-www-form-urlencoded',
|
||||
},
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await axios.post(api, this.auth, config);
|
||||
|
||||
if(response.status === 200){
|
||||
// 將 token 儲存在 cookie
|
||||
const token = response.data.access_token;
|
||||
|
||||
document.cookie = `luciaToken=${token}`;
|
||||
this.$router.push('/files')
|
||||
}
|
||||
} catch(error) {
|
||||
this.isInvalid = true;
|
||||
};
|
||||
},
|
||||
/**
|
||||
* log out, tooken expired
|
||||
*/
|
||||
logOut() {
|
||||
let isCookie = document.cookie.split(';').some(c => c.trim().startsWith('luciaToken='));
|
||||
let expires = new Date();
|
||||
expires.setTime(expires.getTime() - 60000);
|
||||
|
||||
if(isCookie){
|
||||
document.cookie = `luciaToken=; expires=${expires.toGMTString()}`;
|
||||
this.$router.push('/login');
|
||||
}
|
||||
},
|
||||
/**
|
||||
* get user detail for 'my-account' api
|
||||
*/
|
||||
async getUserData() {
|
||||
const api = 'api/my-account';
|
||||
|
||||
try {
|
||||
const response = await axios.get(api);
|
||||
|
||||
this.userData = response.data;
|
||||
} catch(error) {
|
||||
};
|
||||
},
|
||||
/**
|
||||
* check login for 'my-account' api
|
||||
*/
|
||||
async checkLogin() {
|
||||
const api = 'api/my-account';
|
||||
|
||||
try {
|
||||
const response = await axios.get(api);
|
||||
if(response.status !== 200) this.$router.push('/login');
|
||||
} catch(error) {
|
||||
this.$router.push('/login');
|
||||
};
|
||||
},
|
||||
}
|
||||
})
|
||||
22
src/views/AuthContainer.vue
Normal file
22
src/views/AuthContainer.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<header>
|
||||
<Header />
|
||||
<Navbar />
|
||||
</header>
|
||||
<main>
|
||||
<router-view></router-view>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "@/components/Header.vue";
|
||||
import Navbar from "@/components/Navbar.vue";
|
||||
|
||||
export default {
|
||||
name: 'AuthContainer',
|
||||
components: {
|
||||
Header,
|
||||
Navbar,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
14
src/views/Files/index.vue
Normal file
14
src/views/Files/index.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<h1>This is Files page.</h1>
|
||||
</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>
|
||||
@@ -1,3 +1,114 @@
|
||||
<template>
|
||||
<h1>這是 Login 頁</h1>
|
||||
<div class="container h-screen-main">
|
||||
<div class="flex justify-center items-center min-h-full">
|
||||
<div class="w-full max-w-md p-8">
|
||||
<h2 class="text-center text-2xl mb-4 font-semibold">LOGIN</h2>
|
||||
<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>
|
||||
<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)"/>
|
||||
</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>
|
||||
<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)"/>
|
||||
<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">
|
||||
<span v-show="isInvalid">
|
||||
<IconWarnTriangle class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"/>Incorrect account or password.
|
||||
</span>
|
||||
</p>
|
||||
<button type="submit" class="w-full btn btn-lg" :class="this.isDisabled ? 'btn-disable' : 'btn-c-primary'" :disabled="isDisabledButton">
|
||||
Log in
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import loginStore from '@/stores/login.js';
|
||||
import IconMember from '@/components/icons/IconMember.vue';
|
||||
import IconLockKey from '@/components/icons/IconLockKey.vue';
|
||||
import IconEyeOpen from '@/components/icons/IconEyeOpen.vue';
|
||||
import IconEyeClose from '@/components/icons/IconEyeClose.vue';
|
||||
import IconWarnTriangle from '@/components/icons/IconWarnTriangle.vue';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
isDisabled: true,
|
||||
showPassword: false,
|
||||
name: 'hellow world'
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
// 調用函數，獲取 Store
|
||||
const store = loginStore();
|
||||
// 調用 store 裡的 state
|
||||
const { auth, isInvalid } = storeToRefs(store);
|
||||
// 調用 store 裡的 action
|
||||
const { signIn } = store;
|
||||
|
||||
return {
|
||||
auth,
|
||||
isInvalid,
|
||||
signIn,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
IconMember,
|
||||
IconLockKey,
|
||||
IconEyeOpen,
|
||||
IconEyeClose,
|
||||
IconWarnTriangle
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* if input no value , disabled.
|
||||
*/
|
||||
isDisabledButton() {
|
||||
let inputAreSpaces = this.auth.username === '' || this.auth.password === '';
|
||||
return this.isDisabled = inputAreSpaces ? true : false;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* when input onChange value , isInvalid === false.
|
||||
*/
|
||||
changeHandler(event) {
|
||||
let inputValue = event.target.value;
|
||||
if(inputValue !== '')this.isInvalid = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Hide the eyes from a password input in MS Edge */
|
||||
input::-ms-reveal,
|
||||
input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
/* Hide the keys from the inputs in safair */
|
||||
input::-webkit-contacts-auto-fill-button,
|
||||
input::-webkit-credentials-auto-fill-button {
|
||||
visibility: hidden;
|
||||
display: none !important;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,16 +1,42 @@
|
||||
<template>
|
||||
<header>
|
||||
<Header />
|
||||
<Header/>
|
||||
<Navbar/>
|
||||
</header>
|
||||
<h1>這是 MainContainer 頁</h1>
|
||||
<main>
|
||||
<router-view></router-view>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "./header/index.vue"
|
||||
import loginStore from '@/stores/login.js';
|
||||
import Header from "@/components/Header.vue";
|
||||
import Navbar from "@/components/Navbar.vue";
|
||||
|
||||
export default {
|
||||
name: 'MainContainer',
|
||||
setup() {
|
||||
const store = loginStore();
|
||||
const { checkLogin } = store;
|
||||
|
||||
return {
|
||||
checkLogin,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Header,
|
||||
Navbar,
|
||||
},
|
||||
created() {
|
||||
/**
|
||||
* Save token in Headers.
|
||||
*/
|
||||
const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
|
||||
this.$http.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
||||
/**
|
||||
* check login for 'my-account' api
|
||||
*/
|
||||
this.checkLogin();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
35
src/views/MemberArea/index.vue
Normal file
35
src/views/MemberArea/index.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1 class="mb-4">Member Area</h1>
|
||||
<ul class="list-disc">
|
||||
<li>Username: {{ userData.username }}</li>
|
||||
<li>Name: {{ userData.name }}</li>
|
||||
<li>Is sso: {{ userData.is_sso }}</li>
|
||||
<li>Created at: {{ userData.created_at }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import loginStore from '@/stores/login.js';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const store = loginStore();
|
||||
const { userData } = storeToRefs(store);
|
||||
const { getUserData } = store;
|
||||
|
||||
return {
|
||||
userData,
|
||||
getUserData,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
this.getUserData();
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
25
src/views/NotFound404.vue
Normal file
25
src/views/NotFound404.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<header>
|
||||
<Header/>
|
||||
<Navbar/>
|
||||
</header>
|
||||
<main>
|
||||
<div class="container text-center pt-7 pb-12">
|
||||
<h2 class="mb-7">404</h2>
|
||||
<p>您想找的頁面不存在</p>
|
||||
<p class="mb-7">請重新確認搜尋的項目或是回到 Files 頁</p>
|
||||
<router-link :to="'/files'" class="btn btn-c-primary btn-lg">回到 Files 頁</router-link>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "@/components/Header.vue";
|
||||
import Navbar from "@/components/Navbar.vue";
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
Navbar,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<h1>這是 Header 頁</h1>
|
||||
<div class="flex flex-col relative h-full">
|
||||
<div class="w-full flex">
|
||||
<img src="../../assets/DSP_LOGO.svg" class="h-10"/>
|
||||
</div>
|
||||
<div class="flex w-full bg-[#61696F] text-white justify-between shadow-md shadow-black:opacity-25 z-20 h-[2.5rem]">
|
||||
<div class="pl-2 flex w-1/3">
|
||||
<span class="m-2 leading-6 pr-4 cursor-pointer border-r border-white "
|
||||
>
|
||||
Save
|
||||
</span>
|
||||
</div>
|
||||
<div class="pl-2 flex items-center w-1/3 justify-center">
|
||||
<a-breadcrumb class="flex text-[#c0c0c0]">
|
||||
<a-breadcrumb-item>name</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>name</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</div>
|
||||
<div class="w-1/3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user