회원가입 페이지 추가
This commit is contained in:
parent
57cc0d0c3b
commit
97b2de382d
10
public/static/images/main/login_email.svg
Normal file
10
public/static/images/main/login_email.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon" clip-path="url(#clip0_4212_2156)">
|
||||
<path id="Vector" d="M1.125 0C0.503906 0 0 0.503906 0 1.125C0 1.47891 0.166406 1.81172 0.45 2.025L5.55 5.85C5.81719 6.04922 6.18281 6.04922 6.45 5.85L11.55 2.025C11.8336 1.81172 12 1.47891 12 1.125C12 0.503906 11.4961 0 10.875 0H1.125ZM0 2.625V7.5C0 8.32734 0.672656 9 1.5 9H10.5C11.3273 9 12 8.32734 12 7.5V2.625L6.9 6.45C6.36562 6.85078 5.63438 6.85078 5.1 6.45L0 2.625Z" fill="#A8B6C7"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4212_2156">
|
||||
<rect width="12" height="9" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 647 B |
@ -7,42 +7,70 @@ import { useState } from 'react'
|
||||
|
||||
export default function LoginPage(){
|
||||
const [passwordVisible, setPasswordVisible] = useState(false);
|
||||
const [passwordReset, setPasswordReset] = useState(1);
|
||||
return(
|
||||
<div className="login-wrap">
|
||||
<div className="login-inner">
|
||||
<Link href={'/login'} className="login-logo">
|
||||
<Image src="/static/images/main/login-logo.svg" alt="react" width={236} height={43} />
|
||||
</Link>
|
||||
<div className="login-input-frame">
|
||||
<div className="login-frame-tit">
|
||||
<span>Q.CAST III</span>
|
||||
太陽光発電システム図面管理サイト
|
||||
</div>
|
||||
<div className="login-input-wrap">
|
||||
<div className="login-area id">
|
||||
<input type="text" className='login-input' defaultValue={'IDを入力してください'}/>
|
||||
<button className='id-delete'></button>
|
||||
{passwordReset === 1 && (
|
||||
<>
|
||||
<div className="login-input-frame">
|
||||
<div className="login-frame-tit ">
|
||||
<span>Q.CAST III</span>
|
||||
太陽光発電システム図面管理サイト
|
||||
</div>
|
||||
<div className="login-input-wrap">
|
||||
<div className="login-area id">
|
||||
<input type="text" className='login-input' defaultValue={'IDを入力してください'}/>
|
||||
<button className='id-delete'></button>
|
||||
</div>
|
||||
<div className="login-area password">
|
||||
<input type="password" className='login-input' defaultValue={'asdasdasd'}/>
|
||||
<button className={`password-hidden ${passwordVisible ? 'visible' : ''}`} onClick={() => setPasswordVisible(!passwordVisible)}></button>
|
||||
</div>
|
||||
<div className="d-check-box login">
|
||||
<input type="checkbox" id="ch01" />
|
||||
<label htmlFor="ch01">ID Save</label>
|
||||
</div>
|
||||
<div className='login-btn-box'>
|
||||
<button className='login-btn'>Login</button>
|
||||
</div>
|
||||
<div className="reset-password">
|
||||
<button onClick={() => setPasswordReset(2)}>パスワードの初期化</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="login-area password">
|
||||
<input type="password" className='login-input' defaultValue={'asdasdasd'}/>
|
||||
<button className={`password-hidden ${passwordVisible ? 'visible' : ''}`} onClick={() => setPasswordVisible(!passwordVisible)}></button>
|
||||
<div className="login-guide-wrap">
|
||||
<span>※</span>当サイトをご利用の際は、事前申請が必要です。<br/>
|
||||
IDがない方は <Link href={'#'}>ID申請 クリックしてください。</Link>
|
||||
</div>
|
||||
<div className="d-check-box login">
|
||||
<input type="checkbox" id="ch01" />
|
||||
<label htmlFor="ch01">ID Save</label>
|
||||
</>
|
||||
)}
|
||||
{passwordReset === 2 && (
|
||||
<>
|
||||
<div className="login-input-frame">
|
||||
<div className="login-frame-tit pw-reset">
|
||||
<span>パスワードの初期化</span>
|
||||
パスワードを初期化するIDとEメールアドレスを入力してください。
|
||||
</div>
|
||||
<div className="login-input-wrap">
|
||||
<div className="login-area id">
|
||||
<input type="text" className='login-input' defaultValue={'IDを入力してください'}/>
|
||||
<button className='id-delete'></button>
|
||||
</div>
|
||||
<div className="login-area email">
|
||||
<input type="email" className='login-input' defaultValue={'メールを入力してください'}/>
|
||||
<button className='id-delete'></button>
|
||||
</div>
|
||||
<div className='login-btn-box'>
|
||||
<button className='login-btn'>パスワードの初期化</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='login-btn-box'>
|
||||
<button className='login-btn'>Login</button>
|
||||
</div>
|
||||
<div className="reset-password">
|
||||
<Link href={'#'}>パスワードの初期化</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="login-guide-wrap">
|
||||
<span>※</span>当サイトをご利用の際は、事前申請が必要です。<br/>
|
||||
IDがない方は <Link href={'#'}>ID申請 クリックしてください。</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
|
||||
</div>
|
||||
|
||||
160
src/app/login/signup/page.jsx
Normal file
160
src/app/login/signup/page.jsx
Normal file
@ -0,0 +1,160 @@
|
||||
import '@/styles/style.scss'
|
||||
import '@/styles/contents.scss'
|
||||
|
||||
export default function SignUpPage(){
|
||||
return(
|
||||
<div className="center-page-wrap">
|
||||
<div className="center-page-inner">
|
||||
<div className="center-page-tit">Q.CAST3ログインID発行申請</div>
|
||||
<div className="sub-table-box signup">
|
||||
<div className="table-box-title-wrap">
|
||||
<div className="title-wrap">
|
||||
<h3>販売代理店情報 <span className="important">(*必須)</span></h3>
|
||||
<span className="option">※登録されるリセラーの会社名を入力してください。(2次店は「○○販売株式会社 (2次店：××設備株式会社）」でご記入ください。)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="common-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{width : '180px'}}/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>販売代理店名 <span className="important">*</span></th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{width: '700px'}}>
|
||||
<input type="text" className="input-light" defaultValue={'株式会社エネルギア・ソリューション・アンド・サービス (2次店：山口住機販売有限会社)'}/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>販売代理店名フリガナ <span className="important">*</span></th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{width: '700px'}}>
|
||||
<input type="text" className="input-light" defaultValue={'カブシキガイシャエネルギア・ソリューション・アン..'}/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>郵便番号/住所 <span className="important">*</span></th>
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="input-wrap mr5" style={{width: '200px'}}>
|
||||
<input type="text" className="input-light" defaultValue={'1234567'}/>
|
||||
</div>
|
||||
<div className="input-wrap" style={{width: '495px'}}>
|
||||
<input type="text" className="input-light" defaultValue={'全角50文字以内'}/>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>電話番号 <span className="important">*</span></th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{width: '200px'}}>
|
||||
<input type="text" className="input-light" defaultValue={'00-0000-0000'}/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>FAX番号 <span className="important">*</span></th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{width: '200px'}}>
|
||||
<input type="text" className="input-light" defaultValue={'00-0000-0000'}/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>法人番号</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{width: '200px'}}>
|
||||
<input type="text" className="input-light"/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sub-table-box signup">
|
||||
<div className="table-box-title-wrap">
|
||||
<div className="title-wrap">
|
||||
<h3>担当者情報 <span className="important">(*必須)</span></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="common-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{width : '180px'}}/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>担当者名 <span className="important">*</span></th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{width: '200px'}}>
|
||||
<input type="text" className="input-light"/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>担当者名ふりがな</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{width: '200px'}}>
|
||||
<input type="text" className="input-light" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>アプリケーションID <span className="important">*</span></th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{width: '200px'}}>
|
||||
<input type="text" className="input-light"/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>メールアドレス <span className="important">*</span></th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{width: '200px'}}>
|
||||
<input type="text" className="input-light"/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>電話番号 <span className="important">*</span></th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{width: '200px'}}>
|
||||
<input type="text" className="input-light" defaultValue={'00-0000-0000'}/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>FAX番号 <span className="important">*</span></th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{width: '200px'}}>
|
||||
<input type="text" className="input-light" defaultValue={'00-0000-0000'}/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>部署名</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{width: '200px'}}>
|
||||
<input type="text" className="input-light" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sign-up-btn-wrap">
|
||||
<button className="btn-origin grey mr5">ログイン画面に移動</button>
|
||||
<button className="btn-origin navy">ID承認要求</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -81,10 +81,10 @@ export default function PublishPage() {
|
||||
<td><strong className="title"></strong></td>
|
||||
<td><Link href="/canvas" target="_blank">CanvasPage</Link></td>
|
||||
<td className="coding_stat_web">
|
||||
견적서 6번째 탭 클릭시 나옴
|
||||
견적서 6번째 탭 클릭시 나옴<br/>
|
||||
발전시뮬레이션 7번째 탭 클릭시 나옴
|
||||
</td>
|
||||
<td className="t-center">2024-09-24</td>
|
||||
<td className="t-center">2024-10-10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="t-center"><strong>MainPage</strong></td>
|
||||
@ -94,12 +94,18 @@ export default function PublishPage() {
|
||||
<td className="t-center">2024-09-11</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="t-center"><strong>LoginPage</strong></td>
|
||||
<td className="t-center" rowSpan={2}><strong>LoginPage</strong></td>
|
||||
<td><strong className="title"></strong></td>
|
||||
<td><Link href="/login" target="_blank">LoginPage</Link></td>
|
||||
<td className="coding_stat_web"></td>
|
||||
<td className="t-center">2024-09-23</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong className="title"></strong></td>
|
||||
<td><Link href="/login/signup" target="_blank">SignUpPage</Link></td>
|
||||
<td className="coding_stat_web"></td>
|
||||
<td className="t-center">2024-10-10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="t-center" rowSpan={2}><strong>물품 및 도면 관리</strong></td>
|
||||
<td><strong className="title"></strong></td>
|
||||
|
||||
@ -543,6 +543,12 @@
|
||||
font-weight: 600;
|
||||
margin-right: 14px;
|
||||
}
|
||||
.option{
|
||||
padding-left: 5px;
|
||||
font-size: 13px;
|
||||
color: #101010;
|
||||
font-weight: 400;
|
||||
}
|
||||
.info-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -394,6 +394,9 @@
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
&.pw-reset{
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.login-input-wrap{
|
||||
margin-top: 30px;
|
||||
@ -442,6 +445,17 @@
|
||||
background-size: 17px 17px;
|
||||
}
|
||||
}
|
||||
&.email{
|
||||
&::before{
|
||||
background: url(../../public/static/images/main/login_email.svg)no-repeat center;
|
||||
width: 12px;
|
||||
height: 9px;
|
||||
}
|
||||
.id-delete{
|
||||
background-image: url(../../public/static/images/main/id_delete.svg);
|
||||
background-size: 17px 17px;
|
||||
}
|
||||
}
|
||||
&.password{
|
||||
margin-bottom: 20px;
|
||||
&::before{
|
||||
@ -476,7 +490,7 @@
|
||||
.reset-password{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
a{
|
||||
button{
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
color: #364864;
|
||||
@ -554,4 +568,35 @@
|
||||
top: -2px;
|
||||
left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// 회원가입
|
||||
.center-page-wrap{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #F4F4F7;
|
||||
overflow-x: hidden;
|
||||
.center-page-inner{
|
||||
width: 100%;
|
||||
max-width: 1720px;
|
||||
margin: 0 auto;
|
||||
.center-page-tit{
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #101010;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.sub-table-box{
|
||||
&.signup{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.sign-up-btn-wrap{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -14,6 +14,10 @@ table{
|
||||
}
|
||||
}
|
||||
|
||||
.flx-box{
|
||||
@include flexbox;
|
||||
}
|
||||
|
||||
.common-table{
|
||||
table{
|
||||
table-layout: fixed;
|
||||
@ -97,9 +101,7 @@ table{
|
||||
}
|
||||
}
|
||||
}
|
||||
.flx-box{
|
||||
@include flexbox;
|
||||
}
|
||||
|
||||
}
|
||||
.tooltips{
|
||||
display: block;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user