회원 정보 팝업 추가
This commit is contained in:
parent
f70807a0e2
commit
8ca61c05fd
3
public/assets/images/layout/modal_close.svg
Normal file
3
public/assets/images/layout/modal_close.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.7072 5.29289C6.31668 4.90237 5.68351 4.90237 5.29299 5.29289C4.90246 5.68342 4.90246 6.31658 5.29299 6.7071L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.293 18.7071C17.6835 19.0976 18.3167 19.0976 18.7072 18.7071C19.0977 18.3166 19.0977 17.6834 18.7072 17.2929L13.4143 12L18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5857L6.7072 5.29289Z" fill="#101010"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 636 B |
4
public/assets/images/layout/modal_header_icon.svg
Normal file
4
public/assets/images/layout/modal_header_icon.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.2104 18.9998V16.9001C15.2104 15.9767 14.882 15.1046 14.3177 14.4725C13.7907 13.8824 13.1027 13.5487 12.3926 13.5092L12.2499 13.5053H4.74992C3.98984 13.5053 3.24431 13.8429 2.68218 14.4725C2.1178 15.1046 1.7894 15.9767 1.7894 16.9001V18.9998C1.7894 19.4445 1.43594 19.805 0.999923 19.805C0.563909 19.805 0.210449 19.4445 0.210449 18.9998V16.9001C0.210449 15.5957 0.672785 14.3313 1.51493 13.3881C2.35931 12.4424 3.52093 11.8947 4.74992 11.8947H12.2499L12.4797 11.901C13.623 11.9647 14.6933 12.5016 15.4849 13.3881C16.3271 14.3313 16.7894 15.5957 16.7894 16.9001V18.9998C16.7894 19.4445 16.4359 19.805 15.9999 19.805C15.5639 19.805 15.2104 19.4445 15.2104 18.9998Z" fill="white"/>
|
||||
<path d="M11.681 5.04991C11.6809 3.25793 10.2568 1.80526 8.49996 1.80526C6.74315 1.80531 5.31899 3.25796 5.31894 5.04991C5.31894 6.84189 6.74312 8.2945 8.49996 8.29455C10.2568 8.29455 11.681 6.84193 11.681 5.04991ZM13.2599 5.04991C13.2599 7.73139 11.1289 9.90508 8.49996 9.90508C5.87109 9.90503 3.73999 7.73136 3.73999 5.04991C3.74004 2.36849 5.87112 0.194787 8.49996 0.194736C11.1288 0.194736 13.2599 2.36846 13.2599 5.04991Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -13,7 +13,7 @@ export default function MainPage(){
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
<MemberInformationPop/>
|
||||
<MemberInformationPop/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -4,13 +4,44 @@ export default function MemberInformationPop(){
|
||||
<div className="modal-dialog">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
sdasd
|
||||
<div className="modal-header-inner">
|
||||
<div className="modal-name-wrap">
|
||||
<div className="modal-img">
|
||||
<img src="/assets/images/layout/modal_header_icon.svg" alt="" />
|
||||
</div>
|
||||
<div className="modal-name">会員情報</div>
|
||||
</div>
|
||||
<button className="modal-close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
asdasdasd
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
sdsd
|
||||
<div className="member-infor-form-wrap">
|
||||
<div className="member-infor-bx">
|
||||
<div className="member-infor-tit">名前</div>
|
||||
<input type="text" className="input-frame" defaultValue={'Hong gi'} disabled/>
|
||||
</div>
|
||||
<div className="member-infor-bx">
|
||||
<div className="member-infor-tit">ユーザーID </div>
|
||||
<input type="text" className="input-frame" defaultValue={'KG123'} disabled/>
|
||||
</div>
|
||||
<div className="member-infor-bx">
|
||||
<div className="member-infor-tit">メールアドレス</div>
|
||||
<input type="text" className="input-frame" defaultValue={'Kim@interplug.co.kr'} disabled/>
|
||||
</div>
|
||||
<div className="member-infor-bx">
|
||||
<div className="member-infor-tit">電話番号</div>
|
||||
<input type="text" className="input-frame" defaultValue={'02123456'} disabled/>
|
||||
</div>
|
||||
<div className="member-infor-bx">
|
||||
<div className="member-infor-tit">販売店名</div>
|
||||
<input type="text" className="input-frame" defaultValue={'Interplug'} disabled/>
|
||||
</div>
|
||||
<div className="member-infor-bx">
|
||||
<div className="member-infor-tit">建設ID</div>
|
||||
<input type="text" className="input-frame" defaultValue={'Interplug2'} disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<button className="btn-frame n-blue icon">パスワードリセット<i className="btn-arr"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
@forward 'main';
|
||||
@forward 'login';
|
||||
@forward 'login';
|
||||
@forward 'pop-contents';
|
||||
16
src/styles/components/_pop-contents.scss
Normal file
16
src/styles/components/_pop-contents.scss
Normal file
@ -0,0 +1,16 @@
|
||||
@use "../abstracts" as *;
|
||||
|
||||
// 회원정보 팝업
|
||||
.member-infor-form-wrap{
|
||||
margin-bottom: 20px;
|
||||
.member-infor-bx{
|
||||
margin-bottom: 18px;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.member-infor-tit{
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -116,6 +116,7 @@ header{
|
||||
.profile-name{
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
@include defaultFont($font-s-15, $font-w-600, $black-1010);
|
||||
cursor: pointer;
|
||||
}
|
||||
.profile-company{
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
|
||||
@ -14,10 +14,10 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: calc(100% - (24px * 2));
|
||||
min-height: calc(100% - (14px * 2));
|
||||
max-width: 860px;
|
||||
z-index:111000;
|
||||
margin: 24px auto;
|
||||
margin: 14px auto;
|
||||
pointer-events: none;
|
||||
font-size: $font-s-14;
|
||||
.modal-content{
|
||||
@ -32,13 +32,13 @@
|
||||
.modal-header {
|
||||
display: block;
|
||||
position:relative;
|
||||
padding:10px
|
||||
padding:20px 20px 0;
|
||||
}
|
||||
.modal-body {
|
||||
position: relative;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
padding: 10px;
|
||||
padding: 32px 20px 20px;
|
||||
}
|
||||
.modal-footer {
|
||||
display: -ms-flexbox;
|
||||
@ -51,4 +51,34 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// modal-header
|
||||
.modal-header-inner{
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
.modal-name-wrap{
|
||||
@include flex(12px);
|
||||
align-items: center;
|
||||
.modal-img{
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
background-color: $black-1010;
|
||||
}
|
||||
.modal-name{
|
||||
@include defaultFont($font-s-15, $font-w-600, $black-1010)
|
||||
}
|
||||
}
|
||||
.modal-close{
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url(/assets/images/layout/modal_close.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user