login page 생성
This commit is contained in:
parent
6ce4759db6
commit
f70807a0e2
@ -1,7 +1,7 @@
|
||||
'use client'
|
||||
import { useState } from "react"
|
||||
|
||||
export default function InputCommon() {
|
||||
export default function InputCommonPage() {
|
||||
const [fileName, setFileName] = useState<File | null>(null); //file name value
|
||||
|
||||
return (
|
||||
@ -111,6 +111,13 @@ export default function InputCommon() {
|
||||
<span className="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="toggle-form">
|
||||
<label className="toggle-btn">
|
||||
<input type="checkbox"/>
|
||||
<span className="slider"></span>
|
||||
</label>
|
||||
<div className="toggle-name">Q.PARTNERS</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="design-box" >
|
||||
|
||||
44
src/app/login/page.tsx
Normal file
44
src/app/login/page.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import Footer from "@/components/layouts/Footer";
|
||||
|
||||
export default function LoginPage(){
|
||||
return(
|
||||
<div className="wrap">
|
||||
<div className="container">
|
||||
<div className="login-contents">
|
||||
<h1 className="login-logo">Hanasys 現地調査</h1>
|
||||
<div className="login-form-wrap">
|
||||
<div className="login-form mb15">
|
||||
<div className="login-input id">
|
||||
<input type="text" className="login-frame" placeholder="Input Frame ID"/>
|
||||
<button className="login-icon"><i className="del-icon"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="login-form">
|
||||
<div className="login-input pw">
|
||||
<input type="password" className="login-frame" placeholder="Input Frame PW"/>
|
||||
<button className="login-icon act"><i className="show-icon"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="login-check-warp">
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id="ch01"/>
|
||||
<label htmlFor="ch01">ID Save</label>
|
||||
</div>
|
||||
<div className="toggle-form">
|
||||
<label className="toggle-btn">
|
||||
<input type="checkbox"/>
|
||||
<span className="slider"></span>
|
||||
</label>
|
||||
<div className="toggle-name">Q.PARTNERS</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="login-btn-wrap">
|
||||
<button className="btn-frame icon login">お問い合わせ <i className="btn-arr"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,9 +1,11 @@
|
||||
import Footer from "@/components/layouts/Footer";
|
||||
import Header from "@/components/layouts/Header";
|
||||
import MainContents from "@/components/main/MainContents";
|
||||
import MemberInformationPop from "@/components/main/MemberInformationPop";
|
||||
|
||||
export default function Layout(){
|
||||
export default function MainPage(){
|
||||
return(
|
||||
<>
|
||||
<div className="wrap">
|
||||
<Header name={"Hanasys 現地調査"} backBtn={false}/>
|
||||
<div className="container">
|
||||
@ -11,5 +13,7 @@ export default function Layout(){
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
<MemberInformationPop/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -45,6 +45,18 @@ export default function PublishList (){
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Login</td>
|
||||
<td>Login Page</td>
|
||||
<td>
|
||||
<Link href={'login'}>Login.tsx</Link>
|
||||
</td>
|
||||
<td></td>
|
||||
<td className='c'>
|
||||
|
||||
</td>
|
||||
<td className='c red'></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Main</td>
|
||||
<td>Main Page</td>
|
||||
|
||||
19
src/components/main/MemberInformationPop.tsx
Normal file
19
src/components/main/MemberInformationPop.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
export default function MemberInformationPop(){
|
||||
return(
|
||||
<div className="modal-popup">
|
||||
<div className="modal-dialog">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
sdasd
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
asdasdasd
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
sdsd
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom:0;
|
||||
line-height:1.4;
|
||||
line-height:1.5;
|
||||
font-size: $font-s-13;
|
||||
color: $font-c;
|
||||
vertical-align: top;
|
||||
@ -38,7 +38,7 @@
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: -2px;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
margin-left: 0px;
|
||||
border: 1px solid #A8B6C7;
|
||||
@ -53,7 +53,7 @@
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: -2px;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
margin-left: 0;
|
||||
border-color: #fff;
|
||||
@ -68,7 +68,7 @@
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
top: -1px;
|
||||
left: 0%;
|
||||
width: 7px;
|
||||
height: 9px;
|
||||
@ -203,3 +203,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-form{
|
||||
@include flex(8px);
|
||||
align-items: center;
|
||||
.toggle-name{
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c)
|
||||
}
|
||||
}
|
||||
@ -134,6 +134,8 @@ input::-webkit-inner-spin-button {
|
||||
position: relative;
|
||||
padding-left: 34px;
|
||||
padding-right: 0;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
&:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
@ -1 +1,2 @@
|
||||
@forward 'main';
|
||||
@forward 'main';
|
||||
@forward 'login';
|
||||
19
src/styles/components/_login.scss
Normal file
19
src/styles/components/_login.scss
Normal file
@ -0,0 +1,19 @@
|
||||
@use "../abstracts" as *;
|
||||
|
||||
.login-contents{
|
||||
padding: 94px 34px 0;
|
||||
.login-logo{
|
||||
@include defaultFont($font-s-24, $font-w-600, $black-1010);
|
||||
text-align: center;
|
||||
}
|
||||
.login-form-wrap{
|
||||
margin-top: 42px;
|
||||
.login-check-warp{
|
||||
margin-top: 24px;
|
||||
@include flex(14px);
|
||||
}
|
||||
.login-btn-wrap{
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,9 @@
|
||||
|
||||
.main-contens{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0 20px;
|
||||
background-color: $white-fff;
|
||||
}
|
||||
.main-head-block{
|
||||
padding: 33px 30px;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
// header
|
||||
.header-warp{
|
||||
height: 66px;
|
||||
z-index: 900000;
|
||||
z-index: 100000;
|
||||
}
|
||||
header{
|
||||
position: fixed;
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
margin: 0 16px;
|
||||
background-clip: padding-box;
|
||||
background-color: $white-fff;
|
||||
border-radius: 16px;
|
||||
outline: 0 none;
|
||||
pointer-events: auto;
|
||||
.modal-header {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user