지붕모듈 3페이지 수정
This commit is contained in:
parent
c232c568de
commit
fad01687c7
@ -158,13 +158,13 @@ export default function CanvasPage() {
|
|||||||
{/* <DrawingFlow/> */}
|
{/* <DrawingFlow/> */}
|
||||||
|
|
||||||
{/* 지붕모듈선택 */}
|
{/* 지붕모듈선택 */}
|
||||||
{/* <RoofModuleOption/> */}
|
<RoofModuleOption/>
|
||||||
|
|
||||||
{/* 육지붕모듈 선택 */}
|
{/* 육지붕모듈 선택 */}
|
||||||
{/* <HexagonalRoofOption/> */}
|
{/* <HexagonalRoofOption/> */}
|
||||||
|
|
||||||
{/* 회로 및 가대설정 */}
|
{/* 회로 및 가대설정 */}
|
||||||
<CircuitStandSetting/>
|
{/* <CircuitStandSetting/> */}
|
||||||
|
|
||||||
{/* 모듈 부가기능 */}
|
{/* 모듈 부가기능 */}
|
||||||
|
|
||||||
|
|||||||
@ -3,8 +3,8 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
|||||||
|
|
||||||
return(
|
return(
|
||||||
<>
|
<>
|
||||||
<div className="module-table-flex-wrap mb10">
|
<div className="module-table-block-wrap">
|
||||||
<div className="module-table-box">
|
<div className="module-table-box mb10">
|
||||||
<div className="module-table-inner">
|
<div className="module-table-inner">
|
||||||
<div className="roof-module-table">
|
<div className="roof-module-table">
|
||||||
<table>
|
<table>
|
||||||
@ -17,7 +17,10 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
|||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th >モジュール</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>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -34,7 +37,18 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
|||||||
<span className="name">Re.RISE-G3 440</span>
|
<span className="name">Re.RISE-G3 440</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</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>
|
||||||
<tr>
|
<tr>
|
||||||
<td className="al-c">
|
<td className="al-c">
|
||||||
@ -49,12 +63,26 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
|||||||
<span className="name">Re.RISE MS-G3 290</span>
|
<span className="name">Re.RISE MS-G3 290</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</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>
|
||||||
<tr>
|
<tr>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@ -64,55 +92,52 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
|||||||
<div className="module-table-box">
|
<div className="module-table-box">
|
||||||
<div className="module-table-inner">
|
<div className="module-table-inner">
|
||||||
<div className="self-table-tit">設置形態を選択してくださ</div>
|
<div className="self-table-tit">設置形態を選択してくださ</div>
|
||||||
<div className="module-self-table">
|
<div className="roof-module-table self">
|
||||||
<div className="self-table-item">
|
<table>
|
||||||
<div className="self-item-th">水鳥の配置</div>
|
<thead>
|
||||||
<div className="self-item-td">
|
<tr>
|
||||||
<div className="pop-form-radio">
|
<th >水鳥の配置</th>
|
||||||
<div className="d-check-radio pop">
|
<th >配置基準</th>
|
||||||
<input type="radio" name="radio01" id="ra01" disabled/>
|
</tr>
|
||||||
<label htmlFor="ra01">する</label>
|
</thead>
|
||||||
</div>
|
<tbody>
|
||||||
<div className="d-check-radio pop">
|
<tr>
|
||||||
<input type="radio" name="radio01" id="ra02" />
|
<td className="al-c">
|
||||||
<label htmlFor="ra02">しない。</label>
|
<div className="self-table-radio">
|
||||||
</div>
|
<div className="d-check-radio pop mr10">
|
||||||
</div>
|
<input type="radio" name="radio02" id="ra03" />
|
||||||
</div>
|
<label htmlFor="ra03">する</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="self-table-item">
|
<div className="d-check-radio pop">
|
||||||
<div className="self-item-th">配置基準</div>
|
<input type="radio" name="radio02" id="ra04" />
|
||||||
<div className="self-item-td">
|
<label htmlFor="ra04">しない</label>
|
||||||
<div className="pop-form-radio">
|
</div>
|
||||||
<div className="d-check-radio pop">
|
</div>
|
||||||
<input type="radio" name="radio02" id="ra03" />
|
</td>
|
||||||
<label htmlFor="ra03">中央配置</label>
|
<td className="al-c">
|
||||||
</div>
|
<div className="self-table-radio">
|
||||||
<div className="d-check-radio pop">
|
<div className="d-check-radio pop mr10">
|
||||||
<input type="radio" name="radio02" id="ra04" />
|
<input type="radio" name="radio03" id="ra05" />
|
||||||
<label htmlFor="ra04">軒側</label>
|
<label htmlFor="ra05">軒の側</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-check-radio pop">
|
<div className="d-check-radio pop">
|
||||||
<input type="radio" name="radio02" id="ra05" />
|
<input type="radio" name="radio03" id="ra06" />
|
||||||
<label htmlFor="ra05">龍丸側</label>
|
<label htmlFor="ra06">龍丸側</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</td>
|
||||||
</div>
|
</tr>
|
||||||
</div>
|
</tbody>
|
||||||
<div className="self-table-flx">
|
</table>
|
||||||
<div className="d-check-box pop">
|
|
||||||
<input type="checkbox" id="ch04" />
|
|
||||||
<label htmlFor="ch04">最大配置する。</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid-btn-wrap">
|
<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 mr5">手動配置</button>
|
||||||
<button className="btn-frame modal act">設定値に自動配置</button>
|
<button className="btn-frame modal act">自動配置</button>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -2194,7 +2194,6 @@ $alert-color: #101010;
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
flex: none;
|
flex: none;
|
||||||
padding-top: 27.5px;
|
|
||||||
width: 260px;
|
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;
|
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