feat: 지붕재적합성 상세팝업 마크업 적용 및 팝업 on/off 연결
This commit is contained in:
parent
e833e25048
commit
d718012f6f
@ -1,4 +1,11 @@
|
||||
'use client'
|
||||
|
||||
import Image from 'next/image'
|
||||
import { usePopupController } from '@/store/popupController'
|
||||
|
||||
export default function SuitableDetailPopup() {
|
||||
const popupController = usePopupController()
|
||||
|
||||
return (
|
||||
<div className="modal-popup">
|
||||
<div className="modal-dialog">
|
||||
@ -7,22 +14,214 @@ export default function SuitableDetailPopup() {
|
||||
<div className="modal-header-inner">
|
||||
<div className="modal-name-wrap">
|
||||
<div className="modal-img">
|
||||
<img src="/assets/images/layout/modal_header_icon03.svg" alt="" />
|
||||
<Image src="/assets/images/layout/modal_header_icon03.svg" width={22} height={22} alt="" />
|
||||
</div>
|
||||
<div className="modal-name">屋根材適合性詳細 </div>
|
||||
</div>
|
||||
<button className="modal-close"></button>
|
||||
<button className="modal-close" onClick={() => popupController.setSuitableDetailPopup(false)}></button>
|
||||
</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">
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
</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">
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
</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">
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
</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">
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
</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">
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
</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">
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
</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">
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
</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">
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
'use client'
|
||||
|
||||
import { usePopupController } from '@/store/popupController'
|
||||
|
||||
export default function SuitableButton() {
|
||||
const popupController = usePopupController()
|
||||
|
||||
return (
|
||||
<div className="float-btn-wrap">
|
||||
<div className="btn-flex-wrap com">
|
||||
@ -10,7 +14,7 @@ export default function SuitableButton() {
|
||||
</button>
|
||||
</div>
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame red icon">
|
||||
<button className="btn-frame red icon" onClick={() => popupController.setSuitableDetailPopup(true)}>
|
||||
詳細を見る<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user