🚨chore: Sync Sass
기본 설정 모달 > 모듈 퍼블 수정
This commit is contained in:
minsik
parent
5d8837b1c4
commit
ccabc80552
@ -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 (
|
||||
<>
|
||||
<div className="module-table-flex-wrap mb10">
|
||||
@ -47,11 +57,13 @@ export default function Module({}) {
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{moduleData.header.map((data) => (
|
||||
<th key={data.prop} style={{ width: data.width ? data.width : '' }}>
|
||||
{data.name}
|
||||
</th>
|
||||
))}
|
||||
{moduleData.header.map((header) => {
|
||||
return (
|
||||
<th key={header.prop} style={{ width: header.width ? header.width + 'px' : '' }}>
|
||||
{header.name}
|
||||
</th>
|
||||
)
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -88,37 +100,50 @@ export default function Module({}) {
|
||||
</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">{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-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="grid-select">
|
||||
<QSelectBox title={'屋根技術研究所'} option={SelectOption01} />
|
||||
<div className="outline-form">
|
||||
<div className="grid-select" style={{ width: '95.77px', flex: 'none' }}>
|
||||
<QSelectBox title={'Ⅲ ∙ Ⅳ'} options={surfaceTypes} />
|
||||
</div>
|
||||
</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-th">{getMessage('modal.module.basic.setting.module.fitting.height')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="grid-select">
|
||||
<QSelectBox title={'スレート金具4'} option={SelectOption01} />
|
||||
<div className="outline-form">
|
||||
<div className="grid-select mr10">
|
||||
<QSelectBox title={'13'} options={fiftingHeights} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</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-th">{getMessage('modal.module.basic.setting.module.standard.wind.speed')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="grid-select">
|
||||
<QSelectBox title={'構造溶合板 12mm以上'} option={SelectOption01} />
|
||||
<div className="outline-form">
|
||||
<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>
|
||||
@ -127,61 +152,93 @@ export default function Module({}) {
|
||||
</div>
|
||||
</div>
|
||||
<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-flex-wrap">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('modal.module.basic.setting.module.cotton.classification')}</span>
|
||||
<div className="grid-select">
|
||||
<QSelectBox title={'Ⅲ ∙ Ⅳ'} option={SelectOption01} />
|
||||
<div className="module-table-flex-wrap tab2">
|
||||
<div className="module-flex-item">
|
||||
<div className="module-flex-item-tit">{getMessage('modal.module.basic.setting.module.roof.material')}：スレーツ（4寸）</div>
|
||||
<div className="eaves-keraba-table">
|
||||
<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 className="outline-form">
|
||||
<span className="mr10">{getMessage('modal.module.basic.setting.module.fitting.height')}</span>
|
||||
<div className="grid-select">
|
||||
<QSelectBox title={'13'} option={SelectOption01} />
|
||||
<div className="module-flex-item non-flex">
|
||||
<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">{getMessage('modal.module.basic.setting.module.standard.wind.speed')}</span>
|
||||
<div className="grid-select">
|
||||
<QSelectBox title={'32'} option={SelectOption01} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</span>
|
||||
<div className="grid-select">
|
||||
<QSelectBox title={'15'} option={SelectOption01} />
|
||||
<div className="grid-check-form">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="module-table-box mb15">
|
||||
<div className="warning-guide">
|
||||
<div className="warning">
|
||||
{getMessage('modal.module.basic.setting.module.setting.info1')}
|
||||
<br />
|
||||
{getMessage('modal.module.basic.setting.module.setting.info2')}
|
||||
<br />
|
||||
<div className="module-bottom">
|
||||
<div className="module-table-box ">
|
||||
<div className="warning-guide">
|
||||
<div className="warning">
|
||||
{getMessage('modal.module.basic.setting.module.setting.info1')}
|
||||
<br />
|
||||
{getMessage('modal.module.basic.setting.module.setting.info2')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-btn-wrap mb15">
|
||||
<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 className="reset-word">※ 施工方法が選択できません。 基準風速または基準積雪量を確認してください。</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -86,12 +86,14 @@
|
||||
"modal.module.basic.setting.orientation.setting.angle.passivity": "角度を直接入力",
|
||||
"modal.module.basic.setting.module.roof.material": "屋根材",
|
||||
"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.under.roof": "屋根の下",
|
||||
"modal.module.basic.setting.module.setting": "モジュールの選択",
|
||||
"modal.module.basic.setting.module.setting.info1": "※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か 施工マニュアルを確認してください。",
|
||||
"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.standard.wind.speed": "基準風速",
|
||||
"modal.module.basic.setting.module.standard.snowfall.amount": "基準積雪量",
|
||||
|
||||
@ -89,12 +89,14 @@
|
||||
"modal.module.basic.setting.orientation.setting.angle.passivity": "각도를 직접 입력",
|
||||
"modal.module.basic.setting.module.roof.material": "지붕재",
|
||||
"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.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.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.standard.wind.speed": "기준 풍속",
|
||||
"modal.module.basic.setting.module.standard.snowfall.amount": "기준 적설량",
|
||||
|
||||
@ -59,6 +59,46 @@
|
||||
.ag-icon-filter::before{
|
||||
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{
|
||||
display: flex;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||
|
||||
@ -336,4 +336,36 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user