지붕재 적합성 상세 팝업 추가
This commit is contained in:
parent
bd7a8bfc4c
commit
61491cd2c8
@ -195,6 +195,7 @@ export default function PublishList (){
|
||||
<Link href={'roofcompliance'}>RoofCompliancePage.tsx</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
지붕재 적합성 상세 팝업 포함
|
||||
</td>
|
||||
<td className='c'>
|
||||
</td>
|
||||
|
||||
@ -15,14 +15,174 @@ export default function RoofComplianceDetailPop(){
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className={`compliance-check-bx act`}>
|
||||
<div className="check-name-wrap">
|
||||
<div className="check-name">アースティ４０</div>
|
||||
<div className="check-name-btn">
|
||||
<button className="bx-btn"></button>
|
||||
<div className="compliance-check-pop-wrap">
|
||||
<div className={`compliance-check-bx act`}>
|
||||
<div className="check-name-wrap">
|
||||
<div className="check-name">アースティ４０</div>
|
||||
<div className="check-name-btn">
|
||||
<button className="bx-btn"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="compliance-check-pop-contents">
|
||||
<div className="check-pop-data-wrap">
|
||||
<div className="check-pop-data-tit">屋根技研 支持瓦</div>
|
||||
<div className="check-pop-data-txt">㈱ダイトー</div>
|
||||
</div>
|
||||
<div className="check-pop-data-wrap">
|
||||
<div className="check-pop-data-tit">屋根材</div>
|
||||
<div className="check-pop-data-txt">瓦</div>
|
||||
</div>
|
||||
<div className="check-pop-data-wrap">
|
||||
<div className="check-pop-data-tit">金具タイプ</div>
|
||||
<div className="check-pop-data-txt">木ねじ打ち込み式</div>
|
||||
</div>
|
||||
<div className="check-pop-data-table-wrap">
|
||||
<div className="check-pop-data-table">
|
||||
<div className="pop-data-table-head">
|
||||
<div className="pop-data-table-head-name">屋根技研 支持瓦</div>
|
||||
<div className="pop-data-table-head-icon">
|
||||
<i className="compliance-icon check"></i>
|
||||
<i className="compliance-icon tip"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pop-data-table-body">Ｄで設置可</div>
|
||||
<div className="pop-data-table-footer">
|
||||
<div className="pop-data-table-footer-unit">備考</div>
|
||||
<div className="pop-data-table-footer-data">入手困難</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="check-pop-data-table">
|
||||
<div className="pop-data-table-head">
|
||||
<div className="pop-data-table-head-name">屋根技研支持金具</div>
|
||||
<div className="pop-data-table-head-icon">
|
||||
<i className="compliance-icon x"></i>
|
||||
<i className="compliance-icon tip"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pop-data-table-body">設置不可</div>
|
||||
<div className="pop-data-table-footer">
|
||||
<div className="pop-data-table-footer-unit">備考</div>
|
||||
<div className="pop-data-table-footer-data">入手困難</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="check-pop-data-table">
|
||||
<div className="pop-data-table-head">
|
||||
<div className="pop-data-table-head-name">屋根技研YGアンカー</div>
|
||||
<div className="pop-data-table-head-icon">
|
||||
<i className="compliance-icon quest"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pop-data-table-body">お問い合わせください</div>
|
||||
<div className="pop-data-table-footer">
|
||||
<div className="pop-data-table-footer-unit">備考</div>
|
||||
<div className="pop-data-table-footer-data">入手困難</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="check-pop-data-table">
|
||||
<div className="pop-data-table-head">
|
||||
<div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
|
||||
<div className="pop-data-table-head-icon">
|
||||
<i className="compliance-icon check"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
|
||||
<div className="pop-data-table-footer">
|
||||
<div className="pop-data-table-footer-unit">備考</div>
|
||||
<div className="pop-data-table-footer-data">入手困難</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="compliance-check-pop-contents"></div>
|
||||
<div className={`compliance-check-bx `}>
|
||||
<div className="check-name-wrap">
|
||||
<div className="check-name">アースティ４０</div>
|
||||
<div className="check-name-btn">
|
||||
<button className="bx-btn"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="compliance-check-pop-contents">
|
||||
<div className="check-pop-data-wrap">
|
||||
<div className="check-pop-data-tit">屋根技研 支持瓦</div>
|
||||
<div className="check-pop-data-txt">㈱ダイトー</div>
|
||||
</div>
|
||||
<div className="check-pop-data-wrap">
|
||||
<div className="check-pop-data-tit">屋根材</div>
|
||||
<div className="check-pop-data-txt">瓦</div>
|
||||
</div>
|
||||
<div className="check-pop-data-wrap">
|
||||
<div className="check-pop-data-tit">金具タイプ</div>
|
||||
<div className="check-pop-data-txt">木ねじ打ち込み式</div>
|
||||
</div>
|
||||
<div className="check-pop-data-table-wrap">
|
||||
<div className="check-pop-data-table">
|
||||
<div className="pop-data-table-head">
|
||||
<div className="pop-data-table-head-name">屋根技研 支持瓦</div>
|
||||
<div className="pop-data-table-head-icon">
|
||||
<i className="compliance-icon check"></i>
|
||||
<i className="compliance-icon tip"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pop-data-table-body">Ｄで設置可</div>
|
||||
<div className="pop-data-table-footer">
|
||||
<div className="pop-data-table-footer-unit">備考</div>
|
||||
<div className="pop-data-table-footer-data">入手困難</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="check-pop-data-table">
|
||||
<div className="pop-data-table-head">
|
||||
<div className="pop-data-table-head-name">屋根技研支持金具</div>
|
||||
<div className="pop-data-table-head-icon">
|
||||
<i className="compliance-icon x"></i>
|
||||
<i className="compliance-icon tip"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pop-data-table-body">設置不可</div>
|
||||
<div className="pop-data-table-footer">
|
||||
<div className="pop-data-table-footer-unit">備考</div>
|
||||
<div className="pop-data-table-footer-data">入手困難</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="check-pop-data-table">
|
||||
<div className="pop-data-table-head">
|
||||
<div className="pop-data-table-head-name">屋根技研YGアンカー</div>
|
||||
<div className="pop-data-table-head-icon">
|
||||
<i className="compliance-icon quest"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pop-data-table-body">お問い合わせください</div>
|
||||
<div className="pop-data-table-footer">
|
||||
<div className="pop-data-table-footer-unit">備考</div>
|
||||
<div className="pop-data-table-footer-data">入手困難</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="check-pop-data-table">
|
||||
<div className="pop-data-table-head">
|
||||
<div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
|
||||
<div className="pop-data-table-head-icon">
|
||||
<i className="compliance-icon check"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
|
||||
<div className="pop-data-table-footer">
|
||||
<div className="pop-data-table-footer-unit">備考</div>
|
||||
<div className="pop-data-table-footer-data">入手困難</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="btn-flex-wrap com">
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon">閉じる<i className="btn-arr"></i></button>
|
||||
</div>
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame red icon">ウンロード<i className="btn-arr"></i></button>
|
||||
</div>
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon">1：1お問い合わせ<i className="btn-arr"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -36,8 +36,83 @@
|
||||
}
|
||||
|
||||
// 지붕재 적합성 상세
|
||||
.compliance-check-bx{
|
||||
&.act{
|
||||
.compliance-check-pop-contents{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.compliance-check-pop-contents{
|
||||
padding: 14px;
|
||||
display: none;
|
||||
padding: 14px 14px 10px 14px;
|
||||
border-top: 1px solid #ECECEC;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.check-pop-data-wrap{
|
||||
margin-bottom: 24px;
|
||||
.check-pop-data-tit{
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 8px;
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: #2E3A59;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.check-pop-data-txt{
|
||||
padding-left: 10px;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
}
|
||||
}
|
||||
|
||||
.check-pop-data-table{
|
||||
border-top: 1px solid #2E3A59;
|
||||
&:last-child{
|
||||
.pop-data-table-footer{
|
||||
border-bottom: 1px solid #2E3A59;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pop-data-table-head{
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-top: 1px solid #2E3A59;
|
||||
border-bottom: 1px solid #2E3A59;
|
||||
.pop-data-table-head-name{
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
}
|
||||
.pop-data-table-head-icon{
|
||||
margin-left: auto;
|
||||
@include flex(0px);
|
||||
}
|
||||
}
|
||||
.pop-data-table-body{
|
||||
padding: 11px 10px;
|
||||
border-bottom: 1px solid #2E3A59;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
}
|
||||
.pop-data-table-footer{
|
||||
@include flex(0px);
|
||||
.pop-data-table-footer-unit{
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
border-right: 1px solid #2E3A59;
|
||||
}
|
||||
.pop-data-table-footer-data{
|
||||
flex: none;
|
||||
width: 104px;
|
||||
padding: 10px;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
}
|
||||
}
|
||||
@ -22,7 +22,6 @@
|
||||
.modal-content{
|
||||
flex:1;
|
||||
position: relative;
|
||||
margin: 0 16px;
|
||||
background-clip: padding-box;
|
||||
background-color: $white-fff;
|
||||
border-radius: 16px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user