퍼블 업뎃

thkim
Lim\jun 2024-05-28 14:08:17 +09:00
parent b9f3d858b4
commit 82ffd839e7
6 changed files with 47 additions and 34 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 388 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 382 B

View File

@ -78,7 +78,7 @@ body {min-width: 1400px;}
.user_info_m {display: none;}
.container {min-height: calc(100vh - 300px);}
.container {min-height: calc(100vh - 400px);}
.c_wrap { margin: 0 auto;} /* removed by lim width: 1400px; padding: 0 50px; */
.c_wrap .layout {display: table; width: 100%; table-layout: fixed; padding-bottom: 20px;} /* added by lim padding-bottom: 20px; */
@ -93,7 +93,7 @@ body {min-width: 1400px;}
.c_wrap .layout .nav ul li a:hover::after {content: ""; display: block; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 9px; height: 15px; background: url(css/images/ico_arrow_r_gray_9x15.png) no-repeat;}
.c_wrap .layout .nav ul li a.cur {color: #222; font-weight: 700;}
.c_wrap .layout .contents {display: table-cell; width: auto; padding: 0 0 50px 30px; vertical-align: top;} /* changed by lim padding: 0 0 120px 70px; */
.c_wrap .layout .contents {display: table-cell; width: auto; vertical-align: top;} /* changed by lim padding: 0 0 120px 70px; */
/* location */

View File

@ -1,20 +1,27 @@
@charset "utf-8";
.Plogin {padding-bottom: 100px;}
.Plogin h1 {color: #222; font-size: 48px; font-weight: 500; letter-spacing: -2px; line-height: 48px; text-align: center;}
.Plogin h1 {color: #222; font-size: 30px; font-weight: 600; text-align: center; padding-top: 30px;}
.Plogin .txt {margin-top: 43px; color: #666; font-size: 20px; line-height: 30px; text-align: center;}
.Plogin .login_box {position: relative; width: 690px; margin: 54px auto 0; padding: 70px 95px ; border: 1px solid #dde2e5; border-radius: 25px; box-shadow: 3px 4px 5px #ccc;}
.Plogin .login_box {position: relative; width: 690px; margin: 54px auto 0; padding: 30px 50px ; border: 1px solid #dde2e5; border-radius: 25px; box-shadow: 3px 4px 5px #ccc;}
.Plogin .login_box .group {display: block; width: 320px;}
.Plogin .login_box input[type=text],
.Plogin .login_box input[type=password] {width: 100%; height: 46px; padding: 0 20px; border: 0; border-radius: 8px; color: #666; font-size: 16px; background: #f5f5f5;}
.Plogin .login_box input[type=password] {height: 50px; border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
/*.Plogin .login_box input[type=text],*/
/*.Plogin .login_box input[type=password] {width: 100%; height: 46px; padding: 0 20px; border: 0; border-radius: 8px; color: #666; font-size: 16px; background: #f5f5f5;}*/
.Plogin .login_box .group input + input {margin-top: 18px;}
.Plogin .login_box input[type=text]:-ms-input-placeholder,
.Plogin .login_box input[type=password]:-ms-input-placeholder {color: #aaa; opacity: 1;}
.Plogin .login_box button {display: block; position: absolute; left: 435px; top: 70px; width: 160px; height: 110px; border-radius: 8px; color: #fff; font-size: 20px; font-weight: 500; text-align: center; line-height: 110px; background: #169bd5;}
.Plogin .login_box button span {display: block; position: relative; height: 100%;}
.Plogin .login_box button {width: 100%; height: 50px; font-size: 15px;}
.Plogin .login_box a {font-size: 15px;}
/*.Plogin .login_box button {display: block; width: 160px; height: 110px; border-radius: 8px; color: #fff; font-size: 20px; font-weight: 500; text-align: center; line-height: 110px; background: #169bd5;}*/
/*.Plogin .login_box button span {display: block; position: relative; height: 100%;}*/
.Plogin .login_box .line_t {height: 15px; border-bottom: 1px solid #D6D6D6; }
.Plogin .login_box .line_b {height: 15px; border-top: 1px solid #C2C2C2; }
.Plogin .login_box .chk {margin-top: 20px;}
.Plogin .login_box .chk em {display: inline-block; height: 30px; margin-left: 40px; color: #666; font-size: 16px;}
.Plogin .login_box .chk label {display: inline-block; height: 30px; color: #666; font-size: 16px;}
.Plogin .login_box .chk em {display: inline-block; height: 30px; color: #666; font-size: 15px;}
.Plogin .login_box .chk em:nth-child(2) {padding: 0 10px;}
.Plogin .login_box .chk label {display: inline-block; height: 30px; color: #666; font-size: 15px;}
.Plogin .list {margin-top: 44px; padding: 0 360px;}
.Plogin .list li {position: relative; padding-left: 15px; color: #666; font-size: 16px; line-height: 26px;}
.Plogin .list li::before {content: ""; display: block; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; background: #666;}

View File

@ -21,12 +21,12 @@ function EgovLogin(props) {
<div className="container">
<div className="c_wrap">
{/* <!-- Location --> */}
<div className="location">
<ul>
<li><Link to={URL.MAIN} className="home" >Home</Link></li>
<li>로그인</li>
</ul>
</div>
{/*<div className="location">*/}
{/* <ul>*/}
{/* <li><Link to={URL.MAIN} className="home" >Home</Link></li>*/}
{/* <li>로그인</li>*/}
{/* </ul>*/}
{/*</div>*/}
{/* <!--// Location --> */}
<div className="layout">

View File

@ -131,40 +131,46 @@ function EgovLoginContent(props) {
{/* <!-- 본문 --> */}
<div className="Plogin">
<h1>로그인</h1>
<p className="txt">전자정부표준프레임워크 경량환경 홈페이지 로그인 페이지입니다.<br />로그인을 하시면 모든 서비스를 제한없이 이용하실 있습니다.</p>
<div className="login_box">
<fieldset>
<legend>로그인</legend>
<span className="group">
<input type="text" name="" title="아이디" placeholder="아이디" value={userInfo?.username}
onChange={e => setUserInfo({ ...userInfo, username: e.target.value })} />
<input type="password" name="" title="비밀번호" placeholder="비밀번호"
onChange={e => setUserInfo({ ...userInfo, password: e.target.value })} />
</span>
<div className="input-group">
<span className="input-group-text"><img src="/assets/images/icon_id.png" /></span>
<input type="text" className="form-control shadow-none" title="아이디" placeholder="아이디" value={userInfo?.username}
onChange={e => setUserInfo({ ...userInfo, username: e.target.value })} />
</div>
<div className="input-group mt-3">
<span className="input-group-text"><img src="/assets/images/icon_pw.png" /></span>
<input type="password" className="form-control shadow-none" title="비밀번호" placeholder="비밀번호"
onChange={e => setUserInfo({ ...userInfo, password: e.target.value })} />
</div>
{/*<span className="group">*/}
{/*<input type="text" name="" title="아이디" placeholder="아이디" value={userInfo?.username}*/}
{/* onChange={e => setUserInfo({ ...userInfo, username: e.target.value })} />*/}
{/*<input type="password" name="" title="비밀번호" placeholder="비밀번호"*/}
{/* onChange={e => setUserInfo({ ...userInfo, password: e.target.value })} />*/}
{/*</span>*/}
<Row className="chk justify-content-between">
<Col xs={3}>
<Form.Check inline label={"ID 저장"} id={"saveid"} name={""} checked={saveIDFlag} onChange={handleSaveIDFlag}/>
<Form.Check inline label={"아이디 저장"} id={"saveid"} name={""} checked={saveIDFlag} onChange={handleSaveIDFlag}/>
{/*<label className="f_chk" htmlFor="saveid" ref={checkRef}>
<input type="checkbox" name="" id="saveid" onChange={handleSaveIDFlag} checked={saveIDFlag}/> <em>ID저장</em>
</label>*/}
</Col>
<Col xs={"auto"}>
<em className="clickable" onClick={idFindModal}>ID 찾기</em>
<em className="clickable" onClick={pwFindModal}>PW 찾기</em>
<Link to={URL.JOIN}><em>회원가입</em></Link>
<em className="clickable" onClick={idFindModal}>아이디 찾기</em>
<em> | </em>
<em className="clickable" onClick={pwFindModal}>비밀번호 찾기</em>
{/*<Link to={URL.JOIN}><em>회원가입</em></Link>*/}
</Col>
</Row>
<button type="button" onClick={submitFormHandler}><span>LOGIN</span></button>
<button type="button" onClick={submitFormHandler} className="btn btn-22498E btn-lg">로그인</button>
<div className="line_t"></div>
<div className="line_b"></div>
<Link to={URL.JOIN} className="btn btn-outline-secondary btn-lg w-100">회원가입</Link>
</fieldset>
</div>
<ul className="list">
<li>비밀번호는 6~12자의 영문 /소문자, 숫자, 특수문자를 혼합해서 사용하실 있습니다.</li>
<li>쉬운 비밀번호나 자주 쓰는 사이트의 비밀번호가 같을 경우, 도용되기 쉬우므로 주기적으로
변경하셔서 사용하는 것이 좋습니다.</li>
</ul>
</div>
</div>
<Modal show={findModalState} onHide={handleClose}>