지붕모듈 팝업 변경
This commit is contained in:
parent
344a1a890d
commit
450472cc02
3
public/static/images/canvas/hide-check-arr.svg
Normal file
3
public/static/images/canvas/hide-check-arr.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 0L15.7942 13.5H0.205771L8 0Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 160 B |
@ -161,7 +161,7 @@ export default function CanvasPage() {
|
||||
<RoofModuleOption/>
|
||||
|
||||
{/* 육지붕모듈 선택 */}
|
||||
<HexagonalRoofOption/>
|
||||
{/* <HexagonalRoofOption/> */}
|
||||
|
||||
{/* 회로 및 가대설정 */}
|
||||
{/* <CircuitStandSetting/> */}
|
||||
|
||||
@ -130,7 +130,6 @@ export default function HexagonalRoofTab01({setTabNum}){
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5">保存</button>
|
||||
<button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -134,7 +134,7 @@ export default function HexagonalRoofTab03({setTabNum}){
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
|
||||
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>前に戻る</button>
|
||||
<button className="btn-frame modal mr5">手動配置</button>
|
||||
<button className="btn-frame modal act">設定値に自動配置</button>
|
||||
</div>
|
||||
|
||||
@ -152,7 +152,6 @@ export default function RoofModuleOptionTab01({setTabNum}){
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5">保存</button>
|
||||
<button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -108,16 +108,9 @@ export default function RoofModuleOptionTab02({setTabNum}){
|
||||
<label htmlFor="ch02">落雪防止金具設置</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-item-button">
|
||||
<button className="btn-frame roof">架台保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="module-table-box mb10">
|
||||
<div className="module-table-inner">
|
||||
<div className="module-area">
|
||||
<div className="module-area mt10">
|
||||
<div className="module-area-title">モジュール配置領域</div>
|
||||
<div className="outline-form mr15">
|
||||
<span>軒側</span>
|
||||
@ -161,7 +154,7 @@ export default function RoofModuleOptionTab02({setTabNum}){
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
|
||||
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>前に戻る</button>
|
||||
<button className="btn-frame modal act" onClick={() => setTabNum(3)}>Next</button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from "react"
|
||||
|
||||
export default function RoofModuleOptionTab03({setTabNum}){
|
||||
const [useTab, setUseTab] = useState(false);
|
||||
|
||||
return(
|
||||
<>
|
||||
<div className="module-table-block-wrap">
|
||||
<div className="module-table-box mb10">
|
||||
<div className="module-table-flex-wrap">
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="roof-module-table">
|
||||
<table>
|
||||
@ -17,10 +21,8 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
||||
</div>
|
||||
</th>
|
||||
<th >モジュール</th>
|
||||
<th style={{width: '70px'}}>Max単数</th>
|
||||
<th style={{width: '100px'}}>混合Max単数</th>
|
||||
<th style={{width: '80px'}}>単数</th>
|
||||
<th style={{width: '80px'}}>熱水</th>
|
||||
<th style={{width: '100px'}}>単数</th>
|
||||
<th style={{width: '100px'}}>熱水</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -37,8 +39,6 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
||||
<span className="name">Re.RISE-G3 440</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">00</td>
|
||||
<td className="al-r">00</td>
|
||||
<td className="al-r">
|
||||
<div className="input-grid" >
|
||||
<input type="text" className="input-origin block" defaultValue={13}/>
|
||||
@ -63,8 +63,6 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
||||
<span className="name">Re.RISE MS-G3 290</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">00</td>
|
||||
<td className="al-r">00</td>
|
||||
<td className="al-r">
|
||||
<div className="input-grid" >
|
||||
<input type="text" className="input-origin block" defaultValue={13}/>
|
||||
@ -81,30 +79,28 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-box non-flex">
|
||||
<div className="module-table-inner">
|
||||
<div className="self-table-tit">設置形態を選択してください。</div>
|
||||
<div className="roof-module-table self">
|
||||
<div className="roof-module-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th >千鳥配置</th>
|
||||
<th >配置基準</th>
|
||||
<th>千鳥配置</th>
|
||||
<th>配置基準</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="al-c">
|
||||
<div className="self-table-radio">
|
||||
<div className="d-check-radio pop mr10">
|
||||
<td>
|
||||
<div className="hexagonal-radio-wrap">
|
||||
<div className="d-check-radio pop mb10">
|
||||
<input type="radio" name="radio02" id="ra03" />
|
||||
<label htmlFor="ra03">する</label>
|
||||
</div>
|
||||
@ -114,9 +110,9 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-c">
|
||||
<div className="self-table-radio">
|
||||
<div className="d-check-radio pop mr10">
|
||||
<td>
|
||||
<div className="hexagonal-radio-wrap">
|
||||
<div className="d-check-radio pop mb10">
|
||||
<input type="radio" name="radio03" id="ra05" />
|
||||
<label htmlFor="ra05">軒側</label>
|
||||
</div>
|
||||
@ -133,8 +129,109 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hide-check-guide">
|
||||
屋根材別モジュールの最大段数。混合最大単数を確認してください
|
||||
<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 colSpan={2}>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
|
||||
<span className="name">Re.RISE-G3 440</span>
|
||||
</div>
|
||||
</th>
|
||||
<th colSpan={2}>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
|
||||
<span className="name">Re.RISE-G3 440</span>
|
||||
</div>
|
||||
</th>
|
||||
<th colSpan={2}>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
|
||||
<span className="name">Re.RISE-G3 440</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Max最大単数</th>
|
||||
<th>Max最大単数</th>
|
||||
<th>Max最大単数</th>
|
||||
<th>Max最大単数</th>
|
||||
<th>Max最大単数</th>
|
||||
<th>Max最大単数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#96d37d'}}></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">2</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#96d37d'}}></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">2</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#96d37d'}}></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">2</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#96d37d'}}></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">2</td>
|
||||
<td className="al-r">5</td>
|
||||
<td className="al-r">2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>以前</button>
|
||||
<button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>前に戻る</button>
|
||||
<button className="btn-frame modal mr5">単数指定配置</button>
|
||||
<button className="btn-frame modal mr5">手動配置</button>
|
||||
<button className="btn-frame modal act">自動配置</button>
|
||||
|
||||
@ -1483,6 +1483,10 @@ $alert-color: #101010;
|
||||
.outline-form{
|
||||
flex: 1;
|
||||
}
|
||||
.non-flex{
|
||||
min-width: 300px;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
.module-box-tab{
|
||||
@ -2343,6 +2347,7 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.module-table-block-wrap{
|
||||
.roof-module-table{
|
||||
&.self{
|
||||
@ -2390,4 +2395,31 @@ $alert-color: #101010;
|
||||
|
||||
.hexagonal-radio-wrap{
|
||||
padding: 17px 10px;
|
||||
}
|
||||
|
||||
.hide-check-guide{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-top: 10px;
|
||||
font-weight: 500;
|
||||
.arr{
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
margin-left: 10px;
|
||||
background: url(../../public/static/images/canvas/hide-check-arr.svg) no-repeat center;
|
||||
background-size: contain;
|
||||
transform: rotate(180deg);
|
||||
&.act{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-table-box{
|
||||
&.hide{
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
@ -236,6 +236,16 @@ table{
|
||||
.d-check-box{
|
||||
opacity: 0.5;
|
||||
}
|
||||
.color-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.color-box{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user