지붕모듈 재수정
This commit is contained in:
parent
beeb44c78e
commit
309291fcfb
@ -5,7 +5,7 @@ import { useState } from "react"
|
||||
|
||||
export default function RoofModuleOptionTab03({setTabNum}){
|
||||
const [useTab, setUseTab] = useState(false);
|
||||
const [warningTab, setWarningTab] = useState(false);
|
||||
const [numValue, setNumValue] = useState(1);
|
||||
|
||||
return(
|
||||
<>
|
||||
@ -141,110 +141,114 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
||||
屋根材別モジュールの最大段数。混合最大単数を確認してください
|
||||
<button className={`arr ${useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button>
|
||||
</div>
|
||||
<div className={`module-table-box mt10 ${useTab ? 'hide' : ''}`}>
|
||||
<div className="module-table-inner">
|
||||
<div className="roof-module-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} style={{width: '22%'}}></th>
|
||||
<th>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
|
||||
<span className="name">Re.RISE-G3 440</span>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
|
||||
<span className="name">Re.RISE MS-G3 290</span>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
|
||||
<span className="name">Re.RISE-G3 440</span>
|
||||
</div>
|
||||
</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>最大段数</th>
|
||||
<th>最大段数</th>
|
||||
<th>最大段数</th>
|
||||
<th>2種混合最大段数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#FFFF00'}}></span>
|
||||
<span className="name">アスファルトシングル</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">7</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#FFC000'}}></span>
|
||||
<span className="name">アスファルトシングル</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">7</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#7030A0'}}></span>
|
||||
<span className="name">アスファルトシングル</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">7</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#385723'}}></span>
|
||||
<span className="name">アスファルトシングル</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">7</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className={`hide-tab-contents ${useTab ? 'hide' : ''}`}>
|
||||
<div className="roof-content-tab-wrap">
|
||||
<button className={`btn-frame block modal mr5 ${numValue === 1 ? 'act' : ''}`} onClick={() => setNumValue(1)}>Frame01</button>
|
||||
<button className={`btn-frame block modal ${numValue === 2 ? 'act' : ''} `} onClick={() => setNumValue(2)}>Frame02</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hide-tab-wrap">
|
||||
<div className="hide-check-guide">
|
||||
千鳥配置の注意事項
|
||||
<button className={`arr ${warningTab ? 'act' : ''}`} onClick={() => setWarningTab(!warningTab)}></button>
|
||||
</div>
|
||||
<div className={`roof-warning-wrap mt10 ${warningTab ? 'hide' : ''}`}>
|
||||
<div className="guide">千鳥配置する時に図のような配置ができてしまいますが、正常な積算ができません。<br/>千鳥で配置する時は、千鳥配置を「する」にして、モジュールが吸着されるようにして下さい。</div>
|
||||
<div className="roof-warning-img-wrap">
|
||||
<div className="roof-warning-img">
|
||||
<Image src={'/static/images/canvas/roof_warning_correct.png'} width={350} height={198} alt="" />
|
||||
{numValue === 1 &&
|
||||
<div className={`module-table-box mt10`}>
|
||||
<div className="module-table-inner">
|
||||
<div className="roof-module-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} style={{width: '22%'}}></th>
|
||||
<th>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
|
||||
<span className="name">Re.RISE-G3 440</span>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
|
||||
<span className="name">Re.RISE MS-G3 290</span>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
|
||||
<span className="name">Re.RISE-G3 440</span>
|
||||
</div>
|
||||
</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>最大段数</th>
|
||||
<th>最大段数</th>
|
||||
<th>最大段数</th>
|
||||
<th>2種混合最大段数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#FFFF00'}}></span>
|
||||
<span className="name">アスファルトシングル</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">7</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#FFC000'}}></span>
|
||||
<span className="name">アスファルトシングル</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">7</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#7030A0'}}></span>
|
||||
<span className="name">アスファルトシングル</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">7</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#385723'}}></span>
|
||||
<span className="name">アスファルトシングル</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">7</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">5</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="roof-warning-img">
|
||||
<Image src={'/static/images/canvas/roof_warning_wrong.png'} width={350} height={198} alt="" />
|
||||
}
|
||||
{numValue === 2 &&
|
||||
<div className={`roof-warning-wrap mt10`}>
|
||||
<div className="guide">千鳥配置する時に図のような配置ができてしまいますが、正常な積算ができません。<br/>千鳥で配置する時は、千鳥配置を「する」にして、モジュールが吸着されるようにして下さい。</div>
|
||||
<div className="roof-warning-img-wrap">
|
||||
<div className="roof-warning-img">
|
||||
<Image src={'/static/images/canvas/roof_warning_correct.png'} width={350} height={198} alt="" />
|
||||
</div>
|
||||
<div className="roof-warning-img">
|
||||
<Image src={'/static/images/canvas/roof_warning_wrong.png'} width={350} height={198} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{/* 2025-05-30 ed */}
|
||||
|
||||
@ -2459,22 +2459,20 @@ $alert-color: #101010;
|
||||
}
|
||||
|
||||
// 2025-05-30 지붕 모듈
|
||||
.hide-tab-wrap{
|
||||
border-bottom: 1px solid #424242;
|
||||
}
|
||||
.roof-warning-wrap{
|
||||
&.hide{
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.roof-warning-img-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
padding-bottom: 10px;
|
||||
.roof-warning-img{
|
||||
}
|
||||
|
||||
.roof-content-tab-wrap{
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.hide-tab-contents{
|
||||
&.hide{
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user