보조선 작성 팝업, 지붕모듈 기본설정 팝업 수정 및 변경
This commit is contained in:
parent
71aba875ad
commit
bb0392109a
@ -112,7 +112,7 @@ export default function CanvasPage() {
|
||||
{/* <ManualRoofShape/> */}
|
||||
|
||||
{/* 보조선 작성 */}
|
||||
{/* <AuxiliarylineOption/> */}
|
||||
<AuxiliarylineOption/>
|
||||
|
||||
{/* 처마∙케라바 변경 */}
|
||||
{/* <EvaseKerabaOption/> */}
|
||||
@ -158,7 +158,7 @@ export default function CanvasPage() {
|
||||
{/* <DrawingFlow/> */}
|
||||
|
||||
{/* 지붕모듈선택 */}
|
||||
{/* <RoofModuleOption/> */}
|
||||
<RoofModuleOption/>
|
||||
|
||||
{/* 육지붕모듈 선택 */}
|
||||
{/* <HexagonalRoofOption/> */}
|
||||
|
||||
@ -46,6 +46,7 @@ export default function AuxiliarylineOption(){
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5">一変戦に戻る</button>
|
||||
<button className="btn-frame modal mr5">補助線切削</button>
|
||||
<button className="btn-frame modal act">外壁線確定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -61,43 +61,58 @@ export default function RoofModuleOptionTab02({setTabNum}){
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-box-tab">
|
||||
<button className="module-btn act">スレート</button>
|
||||
<button className="module-btn">平板瓦</button>
|
||||
<button className="module-btn">53A</button>
|
||||
<button className="module-btn">53A</button>
|
||||
</div>
|
||||
<div className="module-table-box none-flex">
|
||||
<div className="module-table-inner">
|
||||
<div className="module-table-tit">屋根材: スレーツ（4寸)</div>
|
||||
<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="grid-select">
|
||||
<Qselect title={'屋根技術研究所'} option={SelectOption01}/>
|
||||
<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="grid-select">
|
||||
<Qselect title={'スレート金具4'} option={SelectOption01}/>
|
||||
<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="grid-select">
|
||||
<Qselect title={'構造溶合板 12mm以上'} option={SelectOption01}/>
|
||||
<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>
|
||||
@ -107,63 +122,103 @@ export default function RoofModuleOptionTab02({setTabNum}){
|
||||
</div>
|
||||
<div className="module-table-box mb10">
|
||||
<div className="module-table-inner">
|
||||
<div className="module-table-flex-wrap">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">綿調道区分</span>
|
||||
<div className="grid-select">
|
||||
<Qselect title={'Ⅲ ∙ Ⅳ'} option={SelectOption01}/>
|
||||
<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-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={'スレート金具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以上'} option={SelectOption01}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10">設置高さ</span>
|
||||
<div className="grid-select">
|
||||
<Qselect title={'13'} option={SelectOption01}/>
|
||||
<div className="module-flex-item">
|
||||
<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>
|
||||
<div className="outline-form">
|
||||
<span className="mr10">基準風速</span>
|
||||
<div className="grid-select">
|
||||
<Qselect title={'32'} option={SelectOption01}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10">基準積雪量</span>
|
||||
<div className="grid-select">
|
||||
<Qselect title={'15'} option={SelectOption01}/>
|
||||
<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-table-box mb15">
|
||||
<div className="warning-guide">
|
||||
<div className="warning">
|
||||
※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か
|
||||
施工マニュアルを確認してください。<br/>
|
||||
モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください<br/>
|
||||
※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か
|
||||
施工マニュアルを確認してください。<br/>
|
||||
モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください<br/>
|
||||
<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 className="modal-btn-wrap mb15">
|
||||
<button className="btn-frame roof blue">標準施工(1)</button>
|
||||
<button className="btn-frame roof white">標準施工</button>
|
||||
<button className="btn-frame roof">強化施工</button>
|
||||
<button className="btn-frame roof">多設施工</button>
|
||||
<button className="btn-frame roof blue">多設施工（II）</button>
|
||||
</div>
|
||||
<div className="grid-check-form border">
|
||||
<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 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>
|
||||
|
||||
@ -182,10 +182,15 @@ export default function PublishPage() {
|
||||
<li>*이미지 불러오기 팝업 추가</li>
|
||||
<li>*배치면 초기설정 이미지 불러오기 삭제</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<ul className='mb10'>
|
||||
<li>2024-11-19</li>
|
||||
<li>*견적 복사 팝업 추가</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>2024-11-26</li>
|
||||
<li>*보조선 작성 팝업 보조선 절삭 버튼 추가</li>
|
||||
<li>*지붕모듈 기본설정 팝업 변경</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className="t-center">2024-10-28</td>
|
||||
</tr>
|
||||
|
||||
@ -1926,4 +1926,68 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
border-bottom: 1px solid #424242;
|
||||
}
|
||||
|
||||
// 지붕모듈선택 변경
|
||||
.module-table-box{
|
||||
&.none-flex{
|
||||
flex: none;
|
||||
width: 230px;
|
||||
}
|
||||
}
|
||||
.module-table-flex-wrap{
|
||||
&.tab2{
|
||||
margin-top: 20px;
|
||||
gap: 15px;
|
||||
|
||||
}
|
||||
.module-flex-item{
|
||||
flex: 1;
|
||||
.module-flex-item-tit{
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #4D4D4D;
|
||||
}
|
||||
.flex-item-btn-wrap{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-table-box{
|
||||
.module-table-inner{
|
||||
.module-table-flex-wrap{
|
||||
&.tab2{
|
||||
.eaves-keraba-table{
|
||||
.eaves-keraba-th{
|
||||
width: 90px;
|
||||
}
|
||||
.eaves-keraba-td{
|
||||
padding-left: 0;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.keraba-flex{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.grid-select{
|
||||
flex: none;
|
||||
width: 76px;
|
||||
}
|
||||
.outline-form{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.module-bottom{
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #4D4D4D;
|
||||
}
|
||||
@ -226,8 +226,8 @@ button{
|
||||
border: 1px solid #484848;
|
||||
color: #fff;
|
||||
&.blue{
|
||||
background-color: #414E6C;
|
||||
border: 1px solid #414E6C;
|
||||
background-color: #4C6FBF;
|
||||
border: 1px solid #4C6FBF;
|
||||
&:hover{
|
||||
background-color: #414E6C;
|
||||
border: 1px solid #414E6C;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user