지붕재 적합성 상세 팝업 추가
This commit is contained in:
parent
bd7a8bfc4c
commit
61491cd2c8
@ -195,6 +195,7 @@ export default function PublishList (){
|
|||||||
<Link href={'roofcompliance'}>RoofCompliancePage.tsx</Link>
|
<Link href={'roofcompliance'}>RoofCompliancePage.tsx</Link>
|
||||||
</td>
|
</td>
|
||||||
<td className='c'>
|
<td className='c'>
|
||||||
|
지붕재 적합성 상세 팝업 포함
|
||||||
</td>
|
</td>
|
||||||
<td className='c'>
|
<td className='c'>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@ -15,14 +15,174 @@ export default function RoofComplianceDetailPop(){
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
<div className={`compliance-check-bx act`}>
|
<div className="compliance-check-pop-wrap">
|
||||||
<div className="check-name-wrap">
|
<div className={`compliance-check-bx act`}>
|
||||||
<div className="check-name">アースティ４０</div>
|
<div className="check-name-wrap">
|
||||||
<div className="check-name-btn">
|
<div className="check-name">アースティ４０</div>
|
||||||
<button className="bx-btn"></button>
|
<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>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -36,8 +36,83 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 지붕재 적합성 상세
|
// 지붕재 적합성 상세
|
||||||
|
.compliance-check-bx{
|
||||||
|
&.act{
|
||||||
|
.compliance-check-pop-contents{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.compliance-check-pop-contents{
|
.compliance-check-pop-contents{
|
||||||
padding: 14px;
|
display: none;
|
||||||
|
padding: 14px 14px 10px 14px;
|
||||||
border-top: 1px solid #ECECEC;
|
border-top: 1px solid #ECECEC;
|
||||||
margin-top: 10px;
|
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{
|
.modal-content{
|
||||||
flex:1;
|
flex:1;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 16px;
|
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
background-color: $white-fff;
|
background-color: $white-fff;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user