qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

보조선 작성 팝업, 지붕모듈 기본설정 팝업 수정 및 변경

Browse Source
This commit is contained in:
김창수 2024-11-26 11:20:37 +09:00
parent 71aba875ad
commit bb0392109a
6 changed files with 193 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/canvas/page.jsx
View File

@ -112,7 +112,7 @@ export default function CanvasPage() {
{/* <ManualRoofShape/> */} {/* <ManualRoofShape/> */}
{/* 보조선 작성 */} {/* 보조선 작성 */}
{/* <AuxiliarylineOption/> */} <AuxiliarylineOption/>
{/* 처마∙케라바 변경 */} {/* 처마∙케라바 변경 */}
{/* <EvaseKerabaOption/> */} {/* <EvaseKerabaOption/> */}
@ -158,7 +158,7 @@ export default function CanvasPage() {
{/* <DrawingFlow/> */} {/* <DrawingFlow/> */}
{/* 지붕모듈선택 */} {/* 지붕모듈선택 */}
{/* <RoofModuleOption/> */} <RoofModuleOption/>
{/* 육지붕모듈 선택 */} {/* 육지붕모듈 선택 */}
{/* <HexagonalRoofOption/> */} {/* <HexagonalRoofOption/> */}

1
src/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption.jsx
View File

@ -46,6 +46,7 @@ export default function AuxiliarylineOption(){
</div> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<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>
</div> </div>

181
src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab02.jsx
View File

@ -61,43 +61,58 @@ export default function RoofModuleOptionTab02({setTabNum}){
</div> </div>
</div> </div>
</div> </div>
<div className="module-table-box"> <div className="module-table-box none-flex">
<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-inner"> <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-table">
<div className="eaves-keraba-item"> <div className="eaves-keraba-item">
<div className="eaves-keraba-th"> <div className="eaves-keraba-th">
架台メーカー 綿調道区分
</div> </div>
<div className="eaves-keraba-td"> <div className="eaves-keraba-td">
<div className="grid-select"> <div className="outline-form">
<Qselect title={'屋根技術研究所'} option={SelectOption01}/> <div className="grid-select" style={{width: '95.77px', flex: 'none'}}>
<Qselect title={'Ⅲ ∙ Ⅳ'} option={SelectOption01}/>
</div>
</div> </div>
</div> </div>
</div> </div>
<div className="eaves-keraba-item"> <div className="eaves-keraba-item">
<div className="eaves-keraba-th"> <div className="eaves-keraba-th">
工法 設置高さ
</div> </div>
<div className="eaves-keraba-td"> <div className="eaves-keraba-td">
<div className="grid-select"> <div className="outline-form">
<Qselect title={'スレート金具4'} option={SelectOption01}/> <div className="grid-select mr10">
<Qselect title={'13'} option={SelectOption01}/>
</div>
<span className="thin">mm</span>
</div> </div>
</div> </div>
</div> </div>
<div className="eaves-keraba-item"> <div className="eaves-keraba-item">
<div className="eaves-keraba-th"> <div className="eaves-keraba-th">
屋根の下 基準風速
</div> </div>
<div className="eaves-keraba-td"> <div className="eaves-keraba-td">
<div className="grid-select"> <div className="outline-form">
<Qselect title={'構造溶合板 12mm以上'} option={SelectOption01}/> <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> </div>
</div> </div>
@ -107,63 +122,103 @@ export default function RoofModuleOptionTab02({setTabNum}){
</div> </div>
<div className="module-table-box mb10"> <div className="module-table-box mb10">
<div className="module-table-inner"> <div className="module-table-inner">
<div className="module-table-flex-wrap"> <div className="module-box-tab">
<div className="outline-form"> <button className="module-btn act">屋根材1</button>
<span className="mr10">綿調道区分</span> <button className="module-btn">屋根材2</button>
<div className="grid-select"> <button className="module-btn">屋根材3</button>
<Qselect title={'Ⅲ ∙ Ⅳ'} option={SelectOption01}/> <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> </div>
<div className="outline-form"> <div className="module-flex-item">
<span className="mr10">設置高さ</span> <div className="flex-item-btn-wrap">
<div className="grid-select"> <button className="btn-frame roof blue">標準施工(I)</button>
<Qselect title={'13'} option={SelectOption01}/> <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> <div className="grid-check-form">
<div className="outline-form"> <div className="d-check-box pop">
<span className="mr10">基準風速</span> <input type="checkbox" id="ch01" />
<div className="grid-select"> <label htmlFor="ch01">庇力バーの設置</label>
<Qselect title={'32'} option={SelectOption01}/> </div>
</div> <div className="d-check-box pop">
</div> <input type="checkbox" id="ch02" />
<div className="outline-form"> <label htmlFor="ch02">目幕金具の設置</label>
<span className="mr10">基準積雪量</span> </div>
<div className="grid-select">
<Qselect title={'15'} option={SelectOption01}/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="module-table-box mb15"> <div className="module-bottom">
<div className="warning-guide"> <div className="module-table-box ">
<div className="warning"> <div className="warning-guide">
※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か <div className="warning">
施工マニュアルを確認してください。<br/> ※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か
モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください<br/> 施工マニュアルを確認してください。<br/>
※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください<br/>
施工マニュアルを確認してください。<br/> ※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か
モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください<br/> 施工マニュアルを確認してください。<br/>
モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください<br/>
</div>
</div> </div>
</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"> <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> <button className="btn-frame modal act" onClick={() => setTabNum(3)}>Next</button>

7
src/components/publishpage/PublishPage.jsx
View File

@ -182,10 +182,15 @@ export default function PublishPage() {
<li>*이미지 불러오기 팝업 추가</li> <li>*이미지 불러오기 팝업 추가</li>
<li>*배치면 초기설정 이미지 불러오기 삭제</li> <li>*배치면 초기설정 이미지 불러오기 삭제</li>
</ul> </ul>
<ul> <ul className='mb10'>
<li>2024-11-19</li> <li>2024-11-19</li>
<li>*견적 복사 팝업 추가</li> <li>*견적 복사 팝업 추가</li>
</ul> </ul>
<ul>
<li>2024-11-26</li>
<li>*보조선 작성 팝업 보조선 절삭 버튼 추가</li>
<li>*지붕모듈 기본설정 팝업 변경</li>
</ul>
</td> </td>
<td className="t-center">2024-10-28</td> <td className="t-center">2024-10-28</td>
</tr> </tr>

64
src/styles/_modal.scss
View File

@ -1927,3 +1927,67 @@ $alert-color: #101010;
} }
border-bottom: 1px solid #424242; 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;
}

4
src/styles/_reset.scss
View File

@ -226,8 +226,8 @@ button{
border: 1px solid #484848; border: 1px solid #484848;
color: #fff; color: #fff;
&.blue{ &.blue{
background-color: #414E6C; background-color: #4C6FBF;
border: 1px solid #414E6C; border: 1px solid #4C6FBF;
&:hover{ &:hover{
background-color: #414E6C; background-color: #414E6C;
border: 1px solid #414E6C; border: 1px solid #414E6C;