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

🚨chore: Sync Sass

Browse Source 
기본 설정 모달 > 모듈 퍼블 수정
This commit is contained in:
minsik 2024-11-26 18:37:51 +09:00
parent 5d8837b1c4
commit ccabc80552
7 changed files with 2009 additions and 2000 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
src/components/floor-plan/modal/basic/step/Module.jsx
View File

@ -32,6 +32,16 @@ export default function Module({}) {
}, },
], ],
} }
const surfaceTypes = [
{ id: 1, name: 'Ⅱ', value: 'Ⅱ' },
{ id: 2, name: 'Ⅲ ∙ Ⅳ', value: 'Ⅲ ∙ Ⅳ' },
]
const fiftingHeights = Array.from({ length: 16 }).map((data, index) => {
return { id: index, name: index + 5, value: index + 5 }
})
const windSpeeds = Array.from({ length: 7 }).map((data, index) => {
return { id: index, name: index * 2 + 30, value: index * 2 + 30 }
})
return ( return (
<> <>
<div className="module-table-flex-wrap mb10"> <div className="module-table-flex-wrap mb10">
@ -47,11 +57,13 @@ export default function Module({}) {
<table> <table>
<thead> <thead>
<tr> <tr>
{moduleData.header.map((data) => ( {moduleData.header.map((header) => {
<th key={data.prop} style={{ width: data.width ? data.width : '' }}> return (
{data.name} <th key={header.prop} style={{ width: header.width ? header.width + 'px' : '' }}>
</th> {header.name}
))} </th>
)
})}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -88,37 +100,50 @@ export default function Module({}) {
</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">{getMessage('modal.module.basic.setting.module.roof.material')}: スレーツ（4寸)</div> <div className="module-table-tit">{getMessage('modal.module.basic.setting.module.stuff.info')}</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">{getMessage('modal.module.basic.setting.module.trestle.maker')}</div> <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.surface.type')}</div>
<div className="eaves-keraba-td"> <div className="eaves-keraba-td">
<div className="grid-select"> <div className="outline-form">
<QSelectBox title={'屋根技術研究所'} option={SelectOption01} /> <div className="grid-select" style={{ width: '95.77px', flex: 'none' }}>
<QSelectBox title={'Ⅲ ∙ Ⅳ'} options={surfaceTypes} />
</div>
</div> </div>
</div> </div>
</div> </div>
<div className="eaves-keraba-item"> <div className="eaves-keraba-item">
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.construction.method')}</div> <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.fitting.height')}</div>
<div className="eaves-keraba-td"> <div className="eaves-keraba-td">
<div className="grid-select"> <div className="outline-form">
<QSelectBox title={'スレート金具4'} option={SelectOption01} /> <div className="grid-select mr10">
<QSelectBox title={'13'} options={fiftingHeights} />
</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">{getMessage('modal.module.basic.setting.module.under.roof')}</div> <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.standard.wind.speed')}</div>
<div className="eaves-keraba-td"> <div className="eaves-keraba-td">
<div className="grid-select"> <div className="outline-form">
<QSelectBox title={'構造溶合板 12mm以上'} option={SelectOption01} /> <div className="grid-select mr10">
<QSelectBox title={'32'} options={windSpeeds} />
</div>
<span className="thin">m/s</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="grid-select mr10">
<input type="text" className="input-origin block" />
</div>
<span className="thin">mm</span>
</div> </div>
</div> </div>
</div> </div>
@ -127,61 +152,93 @@ export default function Module({}) {
</div> </div>
</div> </div>
<div className="module-table-box mb10"> <div className="module-table-box mb10">
<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-inner"> <div className="module-table-inner">
<div className="module-table-flex-wrap"> <div className="module-table-flex-wrap tab2">
<div className="outline-form"> <div className="module-flex-item">
<span className="mr10">{getMessage('modal.module.basic.setting.module.cotton.classification')}</span> <div className="module-flex-item-tit">{getMessage('modal.module.basic.setting.module.roof.material')}：スレーツ（4寸）</div>
<div className="grid-select"> <div className="eaves-keraba-table">
<QSelectBox title={'Ⅲ ∙ Ⅳ'} option={SelectOption01} /> <div className="eaves-keraba-item">
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
<div className="eaves-keraba-td">
<div className="keraba-flex">
<div className="grid-select">
<QSelectBox title={'455'} option={SelectOption01} />
</div>
<div className="outline-form">
<span>垂木の間隔</span>
<div className="grid-select">
<QSelectBox title={'455'} option={SelectOption01} />
</div>
</div>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.trestle.maker')}</div>
<div className="eaves-keraba-td">
<div className="grid-select">
<QSelectBox title={'屋根技術研究所'} option={SelectOption01} />
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.construction.method')}</div>
<div className="eaves-keraba-td">
<div className="grid-select">
<QSelectBox title={'スレート金具4'} option={SelectOption01} />
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.under.roof')}</div>
<div className="eaves-keraba-td">
<div className="grid-select">
<QSelectBox title={'構造用合板12mm以上 又はOSB12mm以上'} option={SelectOption01} />
</div>
</div>
</div>
</div> </div>
</div> </div>
<div className="outline-form"> <div className="module-flex-item non-flex">
<span className="mr10">{getMessage('modal.module.basic.setting.module.fitting.height')}</span> <div className="flex-item-btn-wrap">
<div className="grid-select"> <button className="btn-frame roof blue">標準施工(I)</button>
<QSelectBox 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">{getMessage('modal.module.basic.setting.module.standard.wind.speed')}</span> <input type="checkbox" id="ch01" />
<div className="grid-select"> <label htmlFor="ch01">{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
<QSelectBox 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">{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
<span className="mr10">{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</span> </div>
<div className="grid-select">
<QSelectBox 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">
{getMessage('modal.module.basic.setting.module.setting.info1')} <div className="warning">
<br /> {getMessage('modal.module.basic.setting.module.setting.info1')}
{getMessage('modal.module.basic.setting.module.setting.info2')} <br />
<br /> {getMessage('modal.module.basic.setting.module.setting.info2')}
</div>
</div> </div>
</div> </div>
</div> {/* 설정 오류시 노출 */}
<div className="modal-btn-wrap mb15"> <div className="reset-word">※ 施工方法が選択できません。 基準風速または基準積雪量を確認してください。</div>
<button className="btn-frame roof blue">{getMessage('modal.module.basic.setting.module.standard.construction')}(1)</button>
<button className="btn-frame roof white">{getMessage('modal.module.basic.setting.module.standard.construction')}</button>
<button className="btn-frame roof">{getMessage('modal.module.basic.setting.module.enforce.construction')}</button>
<button className="btn-frame roof">{getMessage('modal.module.basic.setting.module.multiple.construction')}</button>
<button className="btn-frame roof blue">{getMessage('modal.module.basic.setting.module.multiple.construction')}（II）</button>
</div>
<div className="grid-check-form border">
<div className="d-check-box pop">
<input type="checkbox" id="ch01" />
<label htmlFor="ch01">{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
</div>
<div className="d-check-box pop">
<input type="checkbox" id="ch02" />
<label htmlFor="ch02">{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
</div>
</div> </div>
</> </>
) )

4
src/locales/ja.json
View File

@ -86,12 +86,14 @@
"modal.module.basic.setting.orientation.setting.angle.passivity": "角度を直接入力", "modal.module.basic.setting.orientation.setting.angle.passivity": "角度を直接入力",
"modal.module.basic.setting.module.roof.material": "屋根材", "modal.module.basic.setting.module.roof.material": "屋根材",
"modal.module.basic.setting.module.trestle.maker": "架台メーカー", "modal.module.basic.setting.module.trestle.maker": "架台メーカー",
"modal.module.basic.setting.module.rafter.margin": "マンドンピッチ",
"modal.module.basic.setting.module.construction.method": "工法", "modal.module.basic.setting.module.construction.method": "工法",
"modal.module.basic.setting.module.under.roof": "屋根の下", "modal.module.basic.setting.module.under.roof": "屋根の下",
"modal.module.basic.setting.module.setting": "モジュールの選択", "modal.module.basic.setting.module.setting": "モジュールの選択",
"modal.module.basic.setting.module.setting.info1": "※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か 施工マニュアルを確認してください。", "modal.module.basic.setting.module.setting.info1": "※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か 施工マニュアルを確認してください。",
"modal.module.basic.setting.module.setting.info2": "モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください", "modal.module.basic.setting.module.setting.info2": "モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください",
"modal.module.basic.setting.module.cotton.classification": "綿調道区分", "modal.module.basic.setting.module.stuff.info": "商品情報",
"modal.module.basic.setting.module.surface.type": "면조도구분(JA)",
"modal.module.basic.setting.module.fitting.height": "設置高さ", "modal.module.basic.setting.module.fitting.height": "設置高さ",
"modal.module.basic.setting.module.standard.wind.speed": "基準風速", "modal.module.basic.setting.module.standard.wind.speed": "基準風速",
"modal.module.basic.setting.module.standard.snowfall.amount": "基準積雪量", "modal.module.basic.setting.module.standard.snowfall.amount": "基準積雪量",

6
src/locales/ko.json
View File

@ -89,12 +89,14 @@
"modal.module.basic.setting.orientation.setting.angle.passivity": "각도를 직접 입력", "modal.module.basic.setting.orientation.setting.angle.passivity": "각도를 직접 입력",
"modal.module.basic.setting.module.roof.material": "지붕재", "modal.module.basic.setting.module.roof.material": "지붕재",
"modal.module.basic.setting.module.trestle.maker": "가대메이거", "modal.module.basic.setting.module.trestle.maker": "가대메이거",
"modal.module.basic.setting.module.rafter.margin": "서까래 간격",
"modal.module.basic.setting.module.construction.method": "공법", "modal.module.basic.setting.module.construction.method": "공법",
"modal.module.basic.setting.module.under.roof": "지붕밑바탕", "modal.module.basic.setting.module.under.roof": "지붕밑바탕",
"modal.module.basic.setting.module.setting": "모듈 설정", "modal.module.basic.setting.module.setting": "모듈 선택",
"modal.module.basic.setting.module.setting.info1": "※ 구배의 범위에는 제한이 있습니다. 지붕경사가 2.5치 미만, 10치를 초과하는 경우에는 시공이 가능한지 시공 매뉴얼을 확인해주십시오.", "modal.module.basic.setting.module.setting.info1": "※ 구배의 범위에는 제한이 있습니다. 지붕경사가 2.5치 미만, 10치를 초과하는 경우에는 시공이 가능한지 시공 매뉴얼을 확인해주십시오.",
"modal.module.basic.setting.module.setting.info2": "※ 모듈 배치 시에는 시공 매뉴얼에 기재된 <모듈 배치 조건>을 반드시 확인해주십시오.", "modal.module.basic.setting.module.setting.info2": "※ 모듈 배치 시에는 시공 매뉴얼에 기재된 <모듈 배치 조건>을 반드시 확인해주십시오.",
"modal.module.basic.setting.module.cotton.classification": "면조도구분", "modal.module.basic.setting.module.stuff.info": "물건정보",
"modal.module.basic.setting.module.surface.type": "면조도구분",
"modal.module.basic.setting.module.fitting.height": "설치높이", "modal.module.basic.setting.module.fitting.height": "설치높이",
"modal.module.basic.setting.module.standard.wind.speed": "기준 풍속", "modal.module.basic.setting.module.standard.wind.speed": "기준 풍속",
"modal.module.basic.setting.module.standard.snowfall.amount": "기준 적설량", "modal.module.basic.setting.module.standard.snowfall.amount": "기준 적설량",

40
src/styles/_grid-detail.scss
View File

@ -59,6 +59,46 @@
.ag-icon-filter::before{ .ag-icon-filter::before{
color: #fff; color: #fff;
} }
.ag-body-vertical-scroll{
width: 4px !important;
max-width: 4px !important;
min-width: 4px !important;
.ag-body-vertical-scroll-viewport{
width: 4px !important;
max-width: 4px !important;
min-width: 4px !important;
&::-webkit-scrollbar {
width: 4px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #C1CCD7;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
}
.ag-body-horizontal-scroll{
height: 4px !important;
max-height: 4px !important;
min-height: 4px !important;
.ag-body-horizontal-scroll-viewport{
height: 4px !important;
max-height: 4px !important;
min-height: 4px !important;
&::-webkit-scrollbar {
height: 4px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #C1CCD7;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
}
} }
.copy-ico-wrap{ .copy-ico-wrap{
display: flex; display: flex;

3734
src/styles/_modal.scss
View File

File diff suppressed because it is too large Load Diff

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;

32
src/styles/_submodal.scss
View File

@ -336,4 +336,36 @@
background-color: transparent; background-color: transparent;
} }
} }
}
// 견적 복사
.estimate-copy-info-item{
margin-bottom: 20px;
&:last-child{
margin-bottom: 0;
}
.estimate-copy-info-tit{
font-size: 13px;
color: #101010;
font-weight: 500;
margin-bottom: 10px;
}
.estimate-copy-info-box{
display: flex;
gap: 5px;
.estimate-copy-sel{
flex: 1 1 auto;
}
.estimate-copy-id{
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 150px;
background-color: #FAFAFA;
border: 1px solid #EEEEEE;
font-size: 13px;
color: #999;
}
}
} }