Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

styles: seller register layout #69

Merged
merged 3 commits into from
Apr 26, 2022
Merged

styles: seller register layout #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
efefaec
styles: seller register layout
thuongtruong1009 Apr 26, 2022
1fce27c
styles: seller nav type
thuongtruong1009 Apr 26, 2022
39ef26d
chores: login image
thuongtruong1009 Apr 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/img/seller/register/background.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 5 additions & 2 deletions src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ declare module 'vue' {
CExtension: typeof import('./components/CExtension.vue')['default']
CMap: typeof import('./components/CMap.vue')['default']
Counter: typeof import('./components/Counter.vue')['default']
CSFooter: typeof import('./components/seller/CSFooter.vue')['default']
CSlick: typeof import('./components/CSlick.vue')['default']
IAbout: typeof import('./components/icons/IAbout.vue')['default']
IAccount: typeof import('./components/icons/IAccount.vue')['default']
Expand Down Expand Up @@ -134,10 +135,12 @@ declare module 'vue' {
PCheckoutBot: typeof import('./components/partterns/PCheckoutBot.vue')['default']
PNotFound: typeof import('./components/partterns/PNotFound.vue')['default']
PNotNotify: typeof import('./components/partterns/PNotNotify.vue')['default']
PSLogin: typeof import('./components/partterns/seller/PSLogin.vue')['default']
PSRegister: typeof import('./components/partterns/seller/PSRegister.vue')['default']
README: typeof import('./components/README.md')['default']
RMenu: typeof import('./components/header/RMenu.vue')['default']
SHead: typeof import('./components/SHead.vue')['default']
SLMenu: typeof import('./components/SLMenu.vue')['default']
SHead: typeof import('./components/seller/SHead.vue')['default']
SLMenu: typeof import('./components/seller/SLMenu.vue')['default']
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/buyer/CBFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const { t } = useI18n()
<span><img src="https://img.icons8.com/ios/50/000000/youtube-play.png"></span>
</div>
<div class="copyright py-4">
<p>{{ t('footer.copyright') }} © <a href="">shopee</a>. {{ t('footer.all rights reserved') }}</p>
<p>{{ t('footer.copyright') }} © <a href="">shopee {{ new Date().getFullYear() }}</a>. {{ t('footer.all rights reserved') }}</p>
</div>
</div>
<div class="right grid w-2/3 py-15 px-8 grid-cols-4 text-left bg-light-200 dark:bg-black">
Expand Down
1,701 changes: 1,701 additions & 0 deletions src/components/partterns/seller/PSLogin.vue
View file
Open in desktop

Large diffs are not rendered by default.

624 changes: 624 additions & 0 deletions src/components/partterns/seller/PSRegister.vue
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions src/components/seller/CSFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<template>
<div class="seller_footer_component_container bg-white w-full text-center py-5 text-gray-500 text-sm">
<p>e-shopee &copy; {{ new Date().getFullYear() }}</p>
</div>
</template>
13 changes: 6 additions & 7 deletions src/components/SHead.vue → src/components/seller/SHead.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,23 @@ let currentURL = ''
for (let i = 0; i < sliceURL.length; i++)
currentURL += sliceURL[i]

const colorsTab = reactive(['linear-gradient(to right, #d6b59d,#fd8c70)', 'linear-gradient(to right, #269f55,#9fdf09)', 'linear-gradient(to right,#f7019f,#5c11c4)', 'linear-gradient(to right, #077dd2,#77f2d6)', 'linear-gradient(to right, #654ea3, #eaafc8)', 'linear-gradient(to right, #108dc7, #ef8e38)'])
</script>

<template>
<div class="seller-header-container h-13 flex justify-between items-center border-b-3 border-b-solid border-b-gray-200 border-opacity-60 bg-white">
<div class="seller-header-left flex items-center text-xl tracking-tighter">
<div class="seller-header-left flex items-center text-xl tracking-tighter gap-15 pl-10">
<router-link to="/seller/home">
<IShopee class="mx-10 cursor-pointer" />
<IShopee class="cursor-pointer" />
</router-link>
<div class="flex text-md lowercase text-gray-500/50">
<h6>| seller</h6>
<div v-for="(url, i) in sliceURL" :key="i" class="flex">
<span class="mx-2">></span>
<div class="flex text-sm lowercase text-white">
<div v-for="(url, i) in sliceURL" :key="i" style="clip-path: polygon(80% 0, 100% 50%, 80% 100%, 0% 100%, 19% 51%, 0% 0%);" :style="`background:${colorsTab[Math.floor(Math.random() * 6)]};`" class="w-25 h-7 flex justify-center items-center">
<h6>{{ url }}</h6>
</div>
</div>
</div>

<div class="seller-header-right flex justify-around items-center w-79 cursor-pointer">
<div class="seller-header-right flex justify-around items-center w-79 cursor-pointer">
<router-link to="/buyer/home">
<h2 class="hover:underline text-sm font-medium flex items-center gap-2">
<IHome />Trang chủ Shopee
Expand Down
0 src/components/SLMenu.vue → src/components/seller/SLMenu.vue
View file
Open in desktop
File renamed without changes.
1 change: 1 addition & 0 deletions src/layouts/seller/LSLogin.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@
<div class="seller-main w-screen flex justify-center p-20 items-center bg-[#F6F6F6] dark:bg-black">
<router-view />
</div>
<CSFooter />
</main>
</template>
9 changes: 9 additions & 0 deletions src/layouts/seller/LSRegister.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<template>
<main class="text-gray-700 dark:text-gray-200 overflow-x-hidden h-screen bg-[#F6F6F6]">
<SHead />
<div class="seller-main w-screen flex justify-center p-20 items-center bg-green-50 dark:bg-black">
<router-view />
</div>
<CSFooter />
</main>
</template>
96 changes: 19 additions & 77 deletions src/pages/seller/login.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,55 +7,57 @@ meta:
useHead({
title: 'seller | login',
})
const isMode = ref('signup')

</script>

<template>
<div class="seller-login-container grid grid-cols-2">
<div class="seller-login-container-left grid pt-10">
<h2 class="text-red-500 font-bold text-3xl py-2">
<div class="seller_login_view_container grid grid-cols-2">
<div class="seller-login-container-left grid text-center pt-10">
<h2 class="text-red-500 font-bold text-3xl">
Professional seller
</h2>
<h6 class="text-lg tracking-tight w-[80%]">
Manage your shop more effectively on Shopee with Shopee - Seller Channel
<h6 class="text-md tracking-tight w-full mb-5">
Manage your shop more effectively on e-shopee with e-shopee Seller-Channel
</h6>
<img src="/img/seller/login/background.png" class="bg-contain w-md h-[13rem] mt-5">
<PSLogin />
</div>
<div class="seller-login-container-right flex justify-end">
<div v-if="isMode === 'login'" class="w-[75%] bg-white grid justify-center p-5 rounded-2xl shadow-md shadow-gray-300">
<div class="seller-login-container-right flex justify-center">
<div class="w-4/5 bg-white grid justify-center p-5 rounded-2xl shadow-md shadow-gray-300">
<h2 class="text-3xl font-semibold tracking-tight mb-5">
Login to Seller channel
</h2>
<form action="">
<form action="" method="post">
<div>
<input type="text" class="outline-none rounded-md border-1 border-solid border-gray-300 py-2 px-4 w-full focus:bg-[#E8F0FE] duration-200" placeholder="username or email...">
</div>
<div>
<input type="password" class="outline-none rounded-md border-1 border-solid border-gray-300 py-2 px-4 w-full focus:bg-[#E8F0FE] duration-200" placeholder="password...">
</div>
<div class="flex justify-between text-xs">
<div>
<input id="remember" type="checkbox" class="mr-2">
<div class="flex items-center gap-1 whitespace-nowrap accent-red-500">
<input id="remember" type="checkbox">
<label for="remember">Remember me</label>
</div>
<p class="text-blue-600 hover:text-blue-800 cursor-pointer font-medium">
Forgot password?
</p>
</div>
<router-link to="/seller/home">
<Router-Link to="/seller/home">
<div class="bg-red-500 hover:bg-red-600 text-center text-white rounded-md py-2 my-1.5 shadow-md shadow-gray-300">
<button>Login</button>
</div>
</router-link>
</Router-Link>

<div class="grid gap-5">
<div class="flex justify-between text-xs pt-5">
<p class="opacity-60">
Don't have a Shopee account yet?
</p>
<p class="text-blue-600 hover:text-blue-800 font-medium cursor-pointer">
Create account
</p>
<Router-Link to="/seller/register">
<p class="text-blue-600 hover:text-blue-800 font-medium cursor-pointer">
Create account
</p>
</Router-Link>
</div>
<div class="flex justify-center opacity-40 text-xs">
<span>_____________________ OR _____________________</span>
Expand All @@ -67,33 +69,6 @@ const isMode = ref('signup')
</div>
</form>
</div>
<div v-if="isMode === 'signup'" class="seller-signup-container-right">
<form class="box bg-white rounded-lg shadow-md shadow-gray-300 p-7.5 text-center w-125">
<div class="form__control">
<input id="fullname" type="text" placeholder="Your Name">
</div>

<div class="form__control">
<input id="username" type="text" placeholder="User Name" required>
</div>

<div class="form__control">
<input id="email" type="email" placeholder="Email Address" required>
</div>

<div class="form__control">
<input id="password" type="password" placeholder="Password" required>
</div>
<router-link to="/seller/home">
<button class="rounded-lg uppercase w-full outline-none font-medium cursor-pointer text-white tracking-normal py-4 text-md shadow-md shadow-gray-300 bg-[#38cc8c]">
Register to become seller
</button>
</router-link>

<small class="pt-5 block font-medium text-xs text-[#bbb]">By clicking the button, you are agreeing to our
<a href="#" class="text-[#ff7a7a]">Terms and Services</a></small>
</form>
</div>
</div>
</div>
</template>
Expand All @@ -103,37 +78,4 @@ form > div{
padding: 0.5rem 0;
margin: 0.3rem 0;
}

.form__control input:focus {
border-color: hsl(0, 100%, 74%);
color: hsl(0, 100%, 74%);
}

.form__control input::placeholder:focus {
color: hsl(0, 100%, 74%);
}

input {
border: 1.3px solid hsl(246, 25%, 77%);
border-radius: 5px;
display: block;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 500;
padding: 15px 20px;
width: 100%;
}

input:focus {
border: 1.3px solid hsl(248, 32%, 49%);
outline: none;
}

button {
font-family: 'Poppins', sans-serif;
}
button:active {
box-shadow: 0 0 hsl(154, 59%, 45%);
transform: translateY(2px);
}
</style>
81 changes: 81 additions & 0 deletions src/pages/seller/register.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<route lang="yaml">
meta:
layout: seller/LSRegister
</route>

<script setup>
useHead({
title: 'seller | register',
})

</script>

<template>
<div class="seller-login-container grid grid-cols-2">
<div class="seller-login-container-left grid">
<PSRegister class="" />
</div>
<div class="seller-login-container-right flex justify-end">
<div class="seller-signup-container-right">
<h2 class="text-green-500 font-semibold text-sm mb-2">
Become to official of e-shopee! Why not?
</h2>
<form class="box bg-white rounded-lg shadow-md shadow-gray-300 p-7.5 text-center w-125">
<div class="form__control">
<input id="fullname" type="text" placeholder="Your Name" class="focus:bg-[#E8F0FE] duration-200">
</div>

<div class="form__control">
<input id="username" type="text" placeholder="User Name" required class="focus:bg-[#E8F0FE] duration-200">
</div>

<div class="form__control">
<input id="email" type="email" placeholder="Email Address" required class="focus:bg-[#E8F0FE] duration-200">
</div>

<div class="form__control">
<input id="password" type="password" placeholder="Password" required class="focus:bg-[#E8F0FE] duration-200">
</div>
<Router-Link to="/seller/login">
<button class="rounded-lg uppercase w-full outline-none font-medium cursor-pointer text-white tracking-normal py-3 text-sm shadow-md shadow-gray-300 bg-[#38cc8c]">
Register to become seller
</button>
</Router-Link>

<small class="pt-5 block font-medium text-xs text-[#bbb]">By clicking the button, you are agreeing to our
<a href="/juridicals/term_of_service" class="text-[#ff7a7a]">Terms and Services</a></small>
</form>
</div>
</div>
</div>
</template>

<style scoped>
form > div{
padding: 0.5rem 0;
margin: 0.3rem 0;
}

.form__control input:focus::placeholder {
color: #ff7a7a;
}

input {
border: 1.3px solid hsl(246, 25%, 77%);
border-radius: 5px;
display: block;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 500;
padding: 0.75rem 1.75rem;
width: 100%;
}

button {
font-family: 'Poppins', sans-serif;
}
button:active {
box-shadow: 0 0 hsl(154, 59%, 45%);
transform: translateY(2px);
}
</style>