지붕모듈 3페이지 수정
This commit is contained in:
parent
c232c568de
commit
fad01687c7
@ -158,13 +158,13 @@ export default function CanvasPage() {
|
||||
{/* <DrawingFlow/> */}
|
||||
|
||||
{/* 지붕모듈선택 */}
|
||||
{/* <RoofModuleOption/> */}
|
||||
<RoofModuleOption/>
|
||||
|
||||
{/* 육지붕모듈 선택 */}
|
||||
{/* <HexagonalRoofOption/> */}
|
||||
|
||||
{/* 회로 및 가대설정 */}
|
||||
<CircuitStandSetting/>
|
||||
{/* <CircuitStandSetting/> */}
|
||||
|
||||
{/* 모듈 부가기능 */}
|
||||
|
||||
|
||||
@ -3,8 +3,8 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
||||
|
||||
return(
|
||||
<>
|
||||
<div className="module-table-flex-wrap mb10">
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-block-wrap">
|
||||
<div className="module-table-box mb10">
|
||||
<div className="module-table-inner">
|
||||
<div className="roof-module-table">
|
||||
<table>
|
||||
@ -17,7 +17,10 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
||||
</div>
|
||||
</th>
|
||||
<th >モジュール</th>
|
||||
<th style={{width: '70px'}}>出力 (W)</th>
|
||||
<th style={{width: '70px'}}>Max単数</th>
|
||||
<th style={{width: '100px'}}>混合Max単数</th>
|
||||
<th style={{width: '80px'}}>単数</th>
|
||||
<th style={{width: '80px'}}>熱水</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -34,7 +37,18 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
||||
<span className="name">Re.RISE-G3 440</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">430</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}/>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">
|
||||
<div className="input-grid" >
|
||||
<input type="text" className="input-origin block" defaultValue={13}/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="al-c">
|
||||
@ -49,12 +63,26 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
||||
<span className="name">Re.RISE MS-G3 290</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">290</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}/>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">
|
||||
<div className="input-grid" >
|
||||
<input type="text" className="input-origin block" defaultValue={13}/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -64,55 +92,52 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="self-table-tit">設置形態を選択してくださ</div>
|
||||
<div className="module-self-table">
|
||||
<div className="self-table-item">
|
||||
<div className="self-item-th">水鳥の配置</div>
|
||||
<div className="self-item-td">
|
||||
<div className="pop-form-radio">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra01" disabled/>
|
||||
<label htmlFor="ra01">する</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<label htmlFor="ra02">しない。</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="self-table-item">
|
||||
<div className="self-item-th">配置基準</div>
|
||||
<div className="self-item-td">
|
||||
<div className="pop-form-radio">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio02" id="ra03" />
|
||||
<label htmlFor="ra03">中央配置</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio02" id="ra04" />
|
||||
<label htmlFor="ra04">軒側</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio02" id="ra05" />
|
||||
<label htmlFor="ra05">龍丸側</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="self-table-flx">
|
||||
<div className="d-check-box pop">
|
||||
<input type="checkbox" id="ch04" />
|
||||
<label htmlFor="ch04">最大配置する。</label>
|
||||
</div>
|
||||
<div className="roof-module-table self">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th >水鳥の配置</th>
|
||||
<th >配置基準</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="al-c">
|
||||
<div className="self-table-radio">
|
||||
<div className="d-check-radio pop mr10">
|
||||
<input type="radio" name="radio02" id="ra03" />
|
||||
<label htmlFor="ra03">する</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio02" id="ra04" />
|
||||
<label htmlFor="ra04">しない</label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-c">
|
||||
<div className="self-table-radio">
|
||||
<div className="d-check-radio pop mr10">
|
||||
<input type="radio" name="radio03" id="ra05" />
|
||||
<label htmlFor="ra05">軒の側</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio03" id="ra06" />
|
||||
<label htmlFor="ra06">龍丸側</label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<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>
|
||||
<button className="btn-frame modal act">自動配置</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -2194,7 +2194,6 @@ $alert-color: #101010;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
flex: none;
|
||||
padding-top: 27.5px;
|
||||
width: 260px;
|
||||
}
|
||||
}
|
||||
@ -2277,4 +2276,67 @@ $alert-color: #101010;
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.roof-module-inner{
|
||||
display: flex;
|
||||
.compas-wrapper{
|
||||
position: relative;
|
||||
flex: none;
|
||||
width: 300px;
|
||||
padding-right: 15px;
|
||||
&:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: #424242;
|
||||
}
|
||||
}
|
||||
.compas-table-wrap{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
|
||||
}
|
||||
.compas-table-box{
|
||||
background-color: #3D3D3D;
|
||||
padding: 10px;
|
||||
.outline-form{
|
||||
span{
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.compas-grid-table{
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
.outline-form{
|
||||
span{
|
||||
width: 60px;
|
||||
&.thin{
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-table-block-wrap{
|
||||
.roof-module-table{
|
||||
&.self{
|
||||
table{
|
||||
table-layout: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
.self-table-radio{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user