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

팝업 수정

Browse Source
This commit is contained in:
김창수 2025-03-20 11:31:16 +09:00
parent 8911409940
commit dd201133ee
6 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -161,7 +161,7 @@ export default function CanvasPage() {
<RoofModuleOption/> <RoofModuleOption/>
{/* 육지붕모듈 선택 */} {/* 육지붕모듈 선택 */}
<HexagonalRoofOption/> {/* <HexagonalRoofOption/> */}
{/* 회로 및 가대설정 */} {/* 회로 및 가대설정 */}
{/* <CircuitStandSetting/> */} {/* <CircuitStandSetting/> */}

1
src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab02.jsx
View File

@ -135,7 +135,6 @@ export default function HexagonalRoofTab03({setTabNum}){
</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 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>

2
src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx
View File

@ -7,7 +7,7 @@ import RoofModuleOptionTab03 from "./RoofModuleOptionTab03";
export default function RoofModuleOption(){ export default function RoofModuleOption(){
const [tabNum, setTabNum] = useState(1); const [tabNum, setTabNum] = useState(1);
return( return(
<WithDraggable isShow={true} size={'lx-2'}> <WithDraggable isShow={true} size={'ll'}>
<div className="modal-head handle"> <div className="modal-head handle">
<h1 className="title">モジュール/架台設定 </h1> <h1 className="title">モジュール/架台設定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>

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

@ -11,16 +11,12 @@ export default function RoofModuleOptionTab02({setTabNum}){
<div className="roof-module-tab2-overflow"> <div className="roof-module-tab2-overflow">
<div className="module-table-box mb10"> <div className="module-table-box mb10">
<div className="module-box-tab"> <div className="module-box-tab">
<button className="module-btn act">屋根材1</button> <button className="module-btn act">アスファルトシングル（21.8度）</button>
<button className="module-btn">屋根材2</button> <button className="module-btn">アスファルトシングル（21.8度）</button>
<button className="module-btn">屋根材3</button> <button className="module-btn">アスファルトシングル（21.8度）</button>
<button className="module-btn">屋根材4</button> <button className="module-btn">アスファルトシングル（21.8度）</button>
</div> </div>
<div className="module-table-inner"> <div className="module-table-inner">
<div className="module-flex-item-tit-wrap">
<div className="module-flex-item-tit">屋根材：スレーツ（4寸）</div>
<button className="btn-frame roof">架台保存</button>
</div>
<div className="module-table-flex-wrap tab2"> <div className="module-table-flex-wrap tab2">
<div className="module-flex-item"> <div className="module-flex-item">
<div className="eaves-keraba-table"> <div className="eaves-keraba-table">
@ -82,6 +78,16 @@ export default function RoofModuleOptionTab02({setTabNum}){
</div> </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={'構造用合板12mm以上 又はOSB12mm以上'} option={SelectOption01}/>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div className="module-flex-item non-flex"> <div className="module-flex-item non-flex">
@ -92,7 +98,7 @@ export default function RoofModuleOptionTab02({setTabNum}){
<button className="btn-frame roof">多設施工（II）</button> <button className="btn-frame roof">多設施工（II）</button>
<button className="btn-frame roof">強化施工</button> <button className="btn-frame roof">強化施工</button>
</div> </div>
<div className="grid-check-form-block"> <div className="grid-check-form-flex">
<div className="d-check-box pop"> <div className="d-check-box pop">
<input type="checkbox" id="ch01" /> <input type="checkbox" id="ch01" />
<label htmlFor="ch01">軒カバーの設置</label> <label htmlFor="ch01">軒カバーの設置</label>
@ -102,6 +108,9 @@ export default function RoofModuleOptionTab02({setTabNum}){
<label htmlFor="ch02">落雪防止金具設置</label> <label htmlFor="ch02">落雪防止金具設置</label>
</div> </div>
</div> </div>
<div className="flex-item-button">
<button className="btn-frame roof">架台保存</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -124,7 +133,7 @@ export default function RoofModuleOptionTab02({setTabNum}){
</div> </div>
<span className="thin">mm</span> <span className="thin">mm</span>
</div> </div>
<div className="outline-form "> <div className="outline-form mr10">
<span>けらぱ</span> <span>けらぱ</span>
<div className="input-grid mr10" > <div className="input-grid mr10" >
<input type="text" className="input-origin block" defaultValue={13}/> <input type="text" className="input-origin block" defaultValue={13}/>

2
src/styles/_contents.scss
View File

@ -346,7 +346,7 @@
padding: 9.6px 20px; padding: 9.6px 20px;
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
background-color: #777777; background-color: #1083E3;
} }
.canvas-plane-wrap{ .canvas-plane-wrap{
display: flex; display: flex;

20
src/styles/_modal.scss
View File

@ -279,10 +279,11 @@ $alert-color: #101010;
border-bottom: 1px solid #424242; border-bottom: 1px solid #424242;
} }
} }
.grid-check-form-block{ .grid-check-form-flex{
display: block; display: flex;
> div{ gap: 10px;
margin-bottom: 10px; .d-check-box{
flex: 1;
} }
} }
.grid-option-overflow{ .grid-option-overflow{
@ -2183,14 +2184,21 @@ $alert-color: #101010;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 8px; gap: 8px;
margin-bottom: 24px; margin-bottom: 10px;
} }
&.non-flex{ &.non-flex{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
flex: none; flex: none;
width: 260px; width: 340px;
}
.flex-item-button{
margin-top: 10px;
button{
display: block;
width: 100%;
}
} }
} }
} }