232 lines
14 KiB
JavaScript
232 lines
14 KiB
JavaScript
import WithDraggable from "@/components/common/draggable/withDraggable";
|
|
import Qselect from "@/components/common/select/Qselect";
|
|
|
|
const SelectOption01 = [
|
|
{name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'}
|
|
]
|
|
const SelectOption04 = [
|
|
{name: '세로 455mm이하'}, {name: '455'}, {name: '455'}, {name: '455'}
|
|
]
|
|
|
|
export default function RoofAllocation() {
|
|
return(
|
|
<WithDraggable isShow={true}>
|
|
<div className={`modal-pop-wrap lr`}>
|
|
<div className="modal-head">
|
|
<h1 className="title">屋根面の割り当て</h1>
|
|
<button className="modal-close">닫기</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="properties-guide">
|
|
※配置面初期設定で保存した[基本屋根材]を変更したり、屋根材を追加して割り当てることができます。
|
|
</div>
|
|
<div className="allocation-select-wrap">
|
|
<span>屋根材の選択</span>
|
|
<div className="grid-select" >
|
|
<Qselect title={'瓦53A'} option={SelectOption01}/>
|
|
</div>
|
|
<button className="allocation-edit"><i className="edit-ico"></i>追加</button>
|
|
</div>
|
|
<div className="grid-option-overflow">
|
|
<div className="grid-option-wrap">
|
|
<div className="grid-option-box">
|
|
<div className="d-check-radio pop no-text">
|
|
<input type="radio" name="radio01" id="ra01" />
|
|
<label htmlFor="ra01"></label>
|
|
</div>
|
|
<div className="grid-option-block-form">
|
|
<div className="block-box">
|
|
<div className="flex-ment">
|
|
<div className="grid-select" style={{width: '248px'}}>
|
|
<Qselect title={'瓦53A'} option={SelectOption01}/>
|
|
</div>
|
|
<span className="dec">基本屋根材</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="block-box">
|
|
<div className="flex-ment">
|
|
<span>W</span>
|
|
<div className="input-grid" style={{width: '100px'}}>
|
|
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
|
|
</div>
|
|
</div>
|
|
<div className="flex-ment">
|
|
<span>L</span>
|
|
<div className="input-grid" style={{width: '100px'}}>
|
|
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="block-box" >
|
|
<div className="flex-ment">
|
|
<span>垂木の</span>
|
|
<div className="input-grid" style={{width: '178px'}}>
|
|
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="block-box">
|
|
<div className="flex-ment">
|
|
<span>垂木の間隔</span>
|
|
<div className="grid-select" style={{width: '178px'}}>
|
|
<Qselect title={'455'} option={SelectOption04}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="block-box">
|
|
<div className="icon-btn-wrap">
|
|
<button className="act">並列式<i className="allocation01"></i></button>
|
|
<button>カスケード <i className="allocation02"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div className="grid-option-box">
|
|
<div className="d-check-radio pop no-text">
|
|
<input type="radio" name="radio01" id="ra02" />
|
|
<label htmlFor="ra02"></label>
|
|
</div>
|
|
<div className="grid-option-block-form">
|
|
<div className="block-box">
|
|
<div className="flex-ment">
|
|
<div className="grid-select" style={{width: '248px'}}>
|
|
<Qselect title={'瓦53A'} option={SelectOption01}/>
|
|
</div>
|
|
<button className="delete"></button>
|
|
</div>
|
|
</div>
|
|
<div className="block-box">
|
|
<div className="flex-ment">
|
|
<span>W</span>
|
|
<div className="input-grid" style={{width: '100px'}}>
|
|
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
|
|
</div>
|
|
</div>
|
|
<div className="flex-ment">
|
|
<span>L</span>
|
|
<div className="input-grid" style={{width: '100px'}}>
|
|
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div className="block-box">
|
|
<div className="flex-ment">
|
|
<span>垂木の間隔</span>
|
|
<div className="grid-select" style={{width: '178px'}}>
|
|
<Qselect title={'세로 455mm이하'} option={SelectOption04}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="block-box">
|
|
<div className="icon-btn-wrap">
|
|
<button className="act">並列式<i className="allocation01"></i></button>
|
|
<button>カスケード <i className="allocation02"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div className="grid-option-box">
|
|
<div className="d-check-radio pop no-text">
|
|
<input type="radio" name="radio01" id="ra02" />
|
|
<label htmlFor="ra02"></label>
|
|
</div>
|
|
<div className="grid-option-block-form">
|
|
<div className="block-box">
|
|
<div className="flex-ment">
|
|
<div className="grid-select" style={{width: '248px'}}>
|
|
<Qselect title={'瓦53A'} option={SelectOption01}/>
|
|
</div>
|
|
<button className="delete"></button>
|
|
</div>
|
|
</div>
|
|
<div className="block-box">
|
|
<div className="flex-ment">
|
|
<span>W</span>
|
|
<div className="input-grid" style={{width: '100px'}}>
|
|
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
|
|
</div>
|
|
</div>
|
|
<div className="flex-ment">
|
|
<span>L</span>
|
|
<div className="input-grid" style={{width: '100px'}}>
|
|
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div className="block-box">
|
|
<div className="flex-ment">
|
|
<span>垂木の間隔</span>
|
|
<div className="grid-select" style={{width: '178px'}}>
|
|
<Qselect title={'세로 455mm이하'} option={SelectOption04}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="block-box">
|
|
<div className="icon-btn-wrap">
|
|
<button className="act">並列式<i className="allocation01"></i></button>
|
|
<button>カスケード <i className="allocation02"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid-option-box">
|
|
<div className="d-check-radio pop no-text">
|
|
<input type="radio" name="radio01" id="ra02" />
|
|
<label htmlFor="ra02"></label>
|
|
</div>
|
|
<div className="grid-option-block-form">
|
|
<div className="block-box">
|
|
<div className="flex-ment">
|
|
<div className="grid-select" style={{width: '248px'}}>
|
|
<Qselect title={'瓦53A'} option={SelectOption01}/>
|
|
</div>
|
|
<button className="delete"></button>
|
|
</div>
|
|
</div>
|
|
<div className="block-box">
|
|
<div className="flex-ment">
|
|
<span>W</span>
|
|
<div className="input-grid" style={{width: '100px'}}>
|
|
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
|
|
</div>
|
|
</div>
|
|
<div className="flex-ment">
|
|
<span>L</span>
|
|
<div className="input-grid" style={{width: '100px'}}>
|
|
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div className="block-box">
|
|
<div className="flex-ment">
|
|
<span>垂木の間隔</span>
|
|
<div className="grid-select" style={{width: '178px'}}>
|
|
<Qselect title={'세로 455mm이하'} option={SelectOption04}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="block-box">
|
|
<div className="icon-btn-wrap">
|
|
<button className="act">並列式<i className="allocation01"></i></button>
|
|
<button>カスケード <i className="allocation02"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act">選択した屋根材として割り当て</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</WithDraggable>
|
|
)
|
|
} |