257 lines
14 KiB
JavaScript
257 lines
14 KiB
JavaScript
import Qselect from "@/components/common/select/Qselect";
|
||
|
||
const SelectOption01 = [
|
||
{name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
|
||
]
|
||
|
||
export default function RoofModuleOptionTab02({setTabNum}){
|
||
|
||
return(
|
||
<>
|
||
<div className="roof-module-tab2-overflow">
|
||
<div className="module-table-flex-wrap mb10">
|
||
<div className="module-table-box">
|
||
<div className="module-table-inner">
|
||
<div className="outline-form mb10">
|
||
<span className="mr10">モジュールの選択</span>
|
||
<div className="grid-select">
|
||
<Qselect title={'Search'} option={SelectOption01}/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="roof-module-table">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style={{width: '150px'}}>モジュール</th>
|
||
<th>高さ (mm)</th>
|
||
<th>幅 (mm)</th>
|
||
<th>出力 (W)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<div className="color-wrap">
|
||
<span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
|
||
<span className="name">Re.RISE-G3 440</span>
|
||
</div>
|
||
</td>
|
||
<td className="al-r">1134</td>
|
||
<td className="al-r">1722</td>
|
||
<td className="al-r">440</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div className="color-wrap">
|
||
<span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
|
||
<span className="name">Re.RISE MS-G3 290</span>
|
||
</div>
|
||
</td>
|
||
<td className="al-r">1134</td>
|
||
<td className="al-r">1722</td>
|
||
<td className="al-r">440</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="module-table-box none-flex">
|
||
<div className="module-table-inner">
|
||
<div className="module-table-tit">商品情報</div>
|
||
<div className="eaves-keraba-table">
|
||
<div className="eaves-keraba-item">
|
||
<div className="eaves-keraba-th">
|
||
綿調道区分
|
||
</div>
|
||
<div className="eaves-keraba-td">
|
||
<div className="outline-form">
|
||
<div className="grid-select" style={{width: '95.77px', flex: 'none'}}>
|
||
<Qselect title={'Ⅲ ∙ Ⅳ'} option={SelectOption01}/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="eaves-keraba-item">
|
||
<div className="eaves-keraba-th">
|
||
設置高さ
|
||
</div>
|
||
<div className="eaves-keraba-td">
|
||
<div className="outline-form">
|
||
<div className="grid-select mr10">
|
||
<Qselect title={'13'} option={SelectOption01}/>
|
||
</div>
|
||
<span className="thin">mm</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="eaves-keraba-item">
|
||
<div className="eaves-keraba-th">
|
||
基準風速
|
||
</div>
|
||
<div className="eaves-keraba-td">
|
||
<div className="outline-form">
|
||
<div className="grid-select mr10">
|
||
<Qselect title={'32'} option={SelectOption01}/>
|
||
</div>
|
||
<span className="thin">m/s</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="eaves-keraba-item">
|
||
<div className="eaves-keraba-th">
|
||
基準積雪量
|
||
</div>
|
||
<div className="eaves-keraba-td">
|
||
<div className="outline-form">
|
||
<div className="grid-select mr10">
|
||
<Qselect title={'13'} option={SelectOption01}/>
|
||
</div>
|
||
<span className="thin">mm</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="module-table-box mb10">
|
||
<div className="module-box-tab">
|
||
<button className="module-btn act">屋根材1</button>
|
||
<button className="module-btn">屋根材2</button>
|
||
<button className="module-btn">屋根材3</button>
|
||
<button className="module-btn">屋根材4</button>
|
||
</div>
|
||
<div className="module-table-inner">
|
||
<div className="module-table-flex-wrap tab2">
|
||
<div className="module-flex-item">
|
||
<div className="module-flex-item-tit">屋根材：スレーツ（4寸）</div>
|
||
<div className="eaves-keraba-table">
|
||
{/* <div className="eaves-keraba-item">
|
||
<div className="eaves-keraba-th">
|
||
マンドンピッチ
|
||
</div>
|
||
<div className="eaves-keraba-td">
|
||
<div className="keraba-flex">
|
||
<div className="grid-select">
|
||
<Qselect title={'455'} option={SelectOption01}/>
|
||
</div>
|
||
<div className="outline-form">
|
||
<span>垂木の間隔</span>
|
||
<div className="grid-select">
|
||
<Qselect title={'455'} option={SelectOption01}/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> */}
|
||
<div className="eaves-keraba-item">
|
||
<div className="eaves-keraba-th">
|
||
マンドンピッチ
|
||
</div>
|
||
<div className="eaves-keraba-td">
|
||
<div className="grid-select">
|
||
<Qselect title={'屋根技術研究所'} option={SelectOption01}/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="eaves-keraba-item">
|
||
<div className="eaves-keraba-th">
|
||
垂木の間隔
|
||
</div>
|
||
<div className="eaves-keraba-td">
|
||
<div className="grid-select">
|
||
<Qselect title={'屋根技術研究所'} option={SelectOption01}/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="eaves-keraba-item">
|
||
<div className="eaves-keraba-th">
|
||
架台メーカー
|
||
</div>
|
||
<div className="eaves-keraba-td">
|
||
<div className="grid-select">
|
||
<Qselect title={'屋根技術研究所'} option={SelectOption01}/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="eaves-keraba-item">
|
||
<div className="eaves-keraba-th">
|
||
工法
|
||
</div>
|
||
<div className="eaves-keraba-td">
|
||
<div className="grid-select">
|
||
<Qselect title={'スレート金具4'} option={SelectOption01}/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="eaves-keraba-item">
|
||
<div className="eaves-keraba-th">
|
||
屋根の下
|
||
</div>
|
||
<div className="eaves-keraba-td">
|
||
<div className="grid-select">
|
||
<Qselect title={'構造用合板12mm以上 又はOSB12mm以上'} option={SelectOption01}/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="module-flex-item non-flex">
|
||
<div className="flex-item-btn-wrap">
|
||
<button className="btn-frame roof blue">標準施工(I)</button>
|
||
<button className="btn-frame roof white">多設施工</button>
|
||
<button className="btn-frame roof">標準施工</button>
|
||
<button className="btn-frame roof">多設施工（II）</button>
|
||
<button className="btn-frame roof">強化施工</button>
|
||
</div>
|
||
<div className="grid-check-form">
|
||
<div className="d-check-box pop">
|
||
<input type="checkbox" id="ch01" />
|
||
<label htmlFor="ch01">庇力バーの設置</label>
|
||
</div>
|
||
<div className="d-check-box pop">
|
||
<input type="checkbox" id="ch02" />
|
||
<label htmlFor="ch02">目幕金具の設置</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="module-bottom">
|
||
<div className="module-table-box ">
|
||
<div className="warning-guide">
|
||
<div className="warning">
|
||
※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か
|
||
施工マニュアルを確認してください。<br/>
|
||
モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください<br/>
|
||
※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か
|
||
施工マニュアルを確認してください。<br/>
|
||
モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください<br/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* 설정 오류시 노출 */}
|
||
|
||
</div>
|
||
</div>
|
||
<div className="reset-word-wrap">
|
||
<div className="reset-word">
|
||
※ 施工方法が選択できません。 基準風速または基準積雪量を確認してください。
|
||
</div>
|
||
<div className="grid-btn-wrap">
|
||
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
|
||
<button className="btn-frame modal act" onClick={() => setTabNum(3)}>Next</button>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
} |