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

매물 전기 지붕정보 페이지 추가

Browse Source
This commit is contained in:
김창수 2025-04-29 17:42:54 +09:00
parent cbdb367b75
commit 40e4bc68ee
11 changed files with 448 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/saledefault/page.tsx
View File

@ -11,10 +11,12 @@ export default function SaleDefaultPage(){
<Header name={"調査物件新規登録"} backBtn={true}/>
<div className="container">
<div className="sale-contents">
<div className="sale-detail-tab-wrap">
<div className="sale-detail-tab-inner">
<button className="sale-detail-tab act">基本情報</button>
<button className="sale-detail-tab">電気 / 屋根情報</button>
<div className="sale-detail-tab-relative">
<div className="sale-detail-tab-wrap">
<div className="sale-detail-tab-inner">
<button className="sale-detail-tab">基本情報</button>
<button className="sale-detail-tab act">電気 / 屋根情報</button>
</div>
</div>
</div>
<SaleDefaultForm/>

10
src/app/saledetail/page.tsx
View File

@ -10,10 +10,12 @@ export default function SaleDetailPage(){
<Header name={"調査物件一覧"} backBtn={true}/>
<div className="container">
<div className="sale-contents">
<div className="sale-detail-tab-wrap">
<div className="sale-detail-tab-inner">
<button className="sale-detail-tab act">基本情報</button>
<button className="sale-detail-tab">電気 / 屋根情報</button>
<div className="sale-detail-tab-relative">
<div className="sale-detail-tab-wrap">
<div className="sale-detail-tab-inner">
<button className="sale-detail-tab">基本情報</button>
<button className="sale-detail-tab act">電気 / 屋根情報</button>
</div>
</div>
</div>
<SaleDetailData/>

28
src/app/saleroof/page.tsx Normal file
View File

@ -0,0 +1,28 @@
import Footer from "@/components/layouts/Footer";
import Header from "@/components/layouts/Header";
import SaleRoofForm from "@/components/sale/saleroof/SaleRoofForm";
import SaleRoofForm02 from "@/components/sale/saleroof/SaleRoofForm02";
export default function SaleRoofPage() {
return(
<div className="wrap">
<Header name={"調査物件新規登録"} backBtn={true}/>
<div className="container">
<div className="sale-contents">
<div className="sale-detail-tab-relative">
<div className="sale-detail-tab-wrap">
<div className="sale-detail-tab-inner">
<button className="sale-detail-tab">基本情報</button>
<button className="sale-detail-tab act">電気 / 屋根情報</button>
</div>
</div>
</div>
<SaleRoofForm/>
<SaleRoofForm02/>
</div>
</div>
<Footer/>
<button className="top-btn"></button>
</div>
)
}

13
src/components/PublishList/PublishList.tsx
View File

@ -86,7 +86,7 @@ export default function PublishList (){
<td className='c red'>2025/04/29</td>
</tr>
<tr>
<td rowSpan={3}>매물</td>
<td rowSpan={4}>매물</td>
<td>매물 목록</td>
<td>
<Link href={'salelist'}>SaleListPage.tsx</Link>
@ -120,6 +120,17 @@ export default function PublishList (){
</td>
<td className='c red'>2025/04/29</td>
</tr>
<tr>
<td>매물 전기∙지붕정보</td>
<td>
<Link href={'saleroof'}>SaleRoofPage.tsx</Link>
</td>
<td className='c'>
</td>
<td className='c'>
</td>
<td className='c red'>2025/04/29</td>
</tr>
</tbody>
</table>
</div>

71
src/components/sale/saleroof/SaleRoofForm.tsx Normal file
View File

@ -0,0 +1,71 @@
export default function SaleRoofForm(){
return(
<div className="sale-frame">
<div className="sale-roof-title">電気関係</div>
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit">電気契約容量</div>
<div className="data-input mb5">
<input type="text" className="input-frame" defaultValue={'10'}/>
</div>
<div className="data-input">
<select className="select-form" name="" id="">
<option value="">kVA</option>
<option value="">kVA</option>
<option value="">kVA</option>
<option value="">kVA</option>
<option value="">kVA</option>
</select>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">電気小売会社</div>
<input type="text" className="input-frame" defaultValue={'HWJ Electric'}/>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">電気袋設備<span>※複数選択可能</span></div>
<div className="data-check-wrap">
<div className="check-form-box">
<input type="checkbox" id="ch01"/>
<label htmlFor="ch01">エコキュート</label>
</div>
<div className="check-form-box">
<input type="checkbox" id="ch02"/>
<label htmlFor="ch02">エネパーム</label>
</div>
<div className="check-form-box">
<input type="checkbox" id="ch03"/>
<label htmlFor="ch03">蓄電池システム</label>
</div>
<div className="check-form-box">
<input type="checkbox" id="ch04"/>
<label htmlFor="ch04">太陽光発電</label>
</div>
<div className="check-form-box">
<input type="checkbox" id="ch05"/>
<label htmlFor="ch05">その他 (直接入力)</label>
</div>
</div>
<div className="data-input">
<input type="text" className="input-frame" disabled defaultValue={''}/>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit red-f">設置希望システム</div>
<div className="data-input mb5">
<select className="select-form" name="" id="">
<option value="">太陽光発電</option>
<option value="">太陽光発電</option>
<option value="">太陽光発電</option>
<option value="">太陽光発電</option>
<option value="">太陽光発電</option>
</select>
</div>
<div className="data-input">
<input type="text" className="input-frame" defaultValue={''} disabled/>
</div>
</div>
</div>
</div>
)
}

271
src/components/sale/saleroof/SaleRoofForm02.tsx Normal file
View File

@ -0,0 +1,271 @@
export default function SaleRoofForm02(){
return(
<div className="sale-frame">
<div className="sale-roof-title">屋根関係</div>
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit red-f">建築研修</div>
<div className="data-input mb5">
<select className="select-form" name="" id="">
<option value="">新築</option>
<option value="">新築</option>
<option value="">新築</option>
<option value="">新築</option>
<option value="">新築</option>
</select>
</div>
<div className="data-input flex">
<input type="text" className="input-frame" defaultValue={''} disabled/>
<span>年</span>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">屋根材<span>※最大2個まで選択可能</span></div>
<div className="data-check-wrap">
<div className="check-form-box">
<input type="checkbox" id="ch01"/>
<label htmlFor="ch01">スレート</label>
</div>
<div className="check-form-box">
<input type="checkbox" id="ch02"/>
<label htmlFor="ch02">アスファルトシングル</label>
</div>
<div className="check-form-box">
<input type="checkbox" id="ch03"/>
<label htmlFor="ch03">瓦</label>
</div>
<div className="check-form-box">
<input type="checkbox" id="ch04"/>
<label htmlFor="ch04">金属屋根</label>
</div>
<div className="check-form-box">
<input type="checkbox" id="ch05"/>
<label htmlFor="ch05">その他 (直接入力)</label>
</div>
</div>
<div className="data-input">
<input type="text" className="input-frame" disabled defaultValue={''}/>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">建築研修</div>
<div className="data-input mb5">
<select className="select-form" name="" id="">
<option value="">太陽光発電</option>
<option value="">太陽光発電</option>
<option value="">太陽光発電</option>
<option value="">太陽光発電</option>
<option value="">太陽光発電</option>
</select>
</div>
<div className="data-input">
<input type="text" className="input-frame" defaultValue={''} disabled/>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">屋根の斜面</div>
<div className="data-input flex">
<input type="text" className="input-frame" defaultValue={'4'}/>
<span>寸</span>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">住宅構造</div>
<div className="radio-form-box mb10">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">木製</label>
</div>
<div className="radio-form-box mb10">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">その他 (直接入力)</label>
</div>
<div className="data-input">
<input type="text" className="input-frame" disabled defaultValue={''}/>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">垂木材質</div>
<div className="data-check-wrap">
<div className="radio-form-box">
<input type="radio" name="radio02" id="ra03" />
<label htmlFor="ra03">木製</label>
</div>
<div className="radio-form-box">
<input type="radio" name="radio02" id="ra04" />
<label htmlFor="ra04">強制</label>
</div>
<div className="radio-form-box">
<input type="radio" name="radio02" id="ra05" />
<label htmlFor="ra05">その他 (直接入力)</label>
</div>
</div>
<div className="data-input">
<input type="text" className="input-frame" disabled defaultValue={''}/>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit red-f">垂木サイズ</div>
<div className="data-input mb5">
<select className="select-form" name="" id="">
<option value="">幅35mm以上×高さ48mm以上</option>
<option value="">幅35mm以上×高さ48mm以上</option>
<option value="">幅35mm以上×高さ48mm以上</option>
<option value="">幅35mm以上×高さ48mm以上</option>
<option value="">幅35mm以上×高さ48mm以上</option>
</select>
</div>
<div className="data-input">
<input type="text" className="input-frame" defaultValue={''} disabled/>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit red-f">垂木サイズ</div>
<div className="data-input mb5">
<select className="select-form" name="" id="">
<option value="">455mm以下</option>
<option value="">455mm以下</option>
<option value="">455mm以下</option>
<option value="">455mm以下</option>
<option value="">455mm以下</option>
</select>
</div>
<div className="data-input">
<input type="text" className="input-frame" defaultValue={''} disabled/>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit red-f">垂木の方向</div>
<div className="data-check-wrap mb0">
<div className="radio-form-box">
<input type="radio" name="radio03" id="ra06" />
<label htmlFor="ra06">垂直垂木</label>
</div>
<div className="radio-form-box">
<input type="radio" name="radio03" id="ra07" />
<label htmlFor="ra07">水平垂木</label>
</div>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">路地板の種類</div>
<div className="data-input mb5">
<select className="select-form" name="" id="">
<option value="">構造用合板</option>
<option value="">構造用合板</option>
<option value="">構造用合板</option>
<option value="">構造用合板</option>
<option value="">構造用合板</option>
</select>
</div>
<div className="data-input">
<input type="text" className="input-frame" defaultValue={''} disabled/>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span></div>
<div className="data-input flex">
<input type="text" className="input-frame" defaultValue={'150'}/>
<span>mm</span>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit ">垂木の方向</div>
<div className="data-check-wrap mb0">
<div className="radio-form-box">
<input type="radio" name="radio04" id="ra08" />
<label htmlFor="ra08">あり</label>
</div>
<div className="radio-form-box">
<input type="radio" name="radio04" id="ra09" />
<label htmlFor="ra09">なし</label>
</div>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit red-f">住宅構造</div>
<div className="radio-form-box mb10">
<input type="radio" name="radio05" id="ra10" />
<label htmlFor="ra10">アスファルト屋根940（22kg以上）</label>
</div>
<div className="radio-form-box mb10">
<input type="radio" name="radio05" id="ra11" />
<label htmlFor="ra11">その他 (直接入力)</label>
</div>
<div className="data-input">
<input type="text" className="input-frame" disabled defaultValue={''}/>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit red-f">断熱材の有無</div>
<div className="radio-form-box mb10">
<input type="radio" name="radio06" id="ra12" />
<label htmlFor="ra12">あり</label>
</div>
<div className="data-input mb10">
<input type="text" className="input-frame" defaultValue={''}/>
</div>
<div className="radio-form-box">
<input type="radio" name="radio06" id="ra13" />
<label htmlFor="ra13">なし</label>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit red-f">路地板の種類</div>
<div className="data-input mb5">
<select className="select-form" name="" id="">
<option value="">材/防水材/屋根基礎/垂木</option>
<option value="">材/防水材/屋根基礎/垂木</option>
<option value="">材/防水材/屋根基礎/垂木</option>
<option value="">材/防水材/屋根基礎/垂木</option>
<option value="">材/防水材/屋根基礎/垂木</option>
</select>
</div>
<div className="data-input">
<input type="text" className="input-frame" defaultValue={''} disabled/>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">屋根製品名 設置可否確認</div>
<div className="data-input mb5">
<select className="select-form" name="" id="">
<option value="">確認済み</option>
<option value="">確認済み</option>
<option value="">確認済み</option>
<option value="">確認済み</option>
<option value="">確認済み</option>
</select>
</div>
<div className="data-input">
<input type="text" className="input-frame" defaultValue={'高島'}/>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">メモ</div>
<div className="data-input mb5">
<select className="select-form" name="" id="">
<option value="">確認済み</option>
<option value="">確認済み</option>
<option value="">確認済み</option>
<option value="">確認済み</option>
<option value="">確認済み</option>
</select>
</div>
<div className="data-input">
<textarea className="textarea-form" name="" id="" defaultValue={'漏れの兆候があるため、正確な点検が必要です.'} placeholder="TextArea Filed"></textarea>
</div>
</div>
</div>
<div className="btn-flex-wrap">
<div className="btn-bx">
<button className="btn-frame n-blue icon">一時保存<i className="btn-arr"></i></button>
</div>
<div className="btn-bx">
<button className="btn-frame red icon">保存<i className="btn-arr"></i></button>
</div>
<div className="btn-bx">
<button className="btn-frame n-blue icon">リスト<i className="btn-arr"></i></button>
</div>
</div>
</div>
)
}

4
src/styles/base/_check-radio.scss
View File

@ -102,7 +102,7 @@
position: absolute;
width: 22px;
height: 22px;
top: -2px;
top: -1px;
left: 0;
margin-left: 0;
border: 1px solid #A8B6C7;
@ -118,7 +118,7 @@
content: "";
display: inline-block;
position: absolute;
top: 4px;
top: 5px;
left: 6px;
width: 10px;
height: 10px;

3
src/styles/base/_utilities.scss
View File

@ -34,3 +34,6 @@
.ml20{margin-left: 20px !important;}
.ml25{margin-left: 25px !important;}
.ml30{margin-left: 30px !important;}
// color
.red-f{color: #FF5656 !important;}

53
src/styles/components/_sub.scss
View File

@ -9,6 +9,10 @@
.data-input-form-tit{
@include defaultFont($font-s-13, $font-w-500, $font-c);
margin-bottom: 10px;
span{
display: block;
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
}
}
}
@ -58,18 +62,23 @@
}
}
}
.sale-detail-tab-wrap{
.sale-detail-tab-relative{
height: 40px;
margin-bottom: 10px;
z-index: 100000;
}
.sale-detail-tab-wrap{
position: fixed;
top: 66px;
left: 0;
width: 100%;
height: 40px;
background-color: $white-fff;
z-index: 98000;
.sale-detail-tab-inner{
position: fixed;
top: 66px;
left: 0;
width: 100%;
position: relative;
@include flex(0px);
align-items: center;
height: 40px;
height: 100%;
.sale-detail-tab{
flex: 1;
height: 100%;
@ -220,3 +229,33 @@
.form-btn{
margin-top: 12px;
}
// 매물 전기 지붕정보
.sale-roof-title{
@include defaultFont($font-s-15, $font-w-500, $font-c);
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 1px solid #2E3A59;
}
.data-check-wrap{
@include flex(10px);
flex-wrap: wrap;
margin-bottom: 12px;
.radio-form-box,
.check-form-box{
width: calc(50% - 5px);
}
&.mb0{
margin-bottom: 0;
}
}
.data-input{
&.flex{
@include flex(8px);
align-items: center;
span{
flex: none;
@include defaultFont($font-s-13, $font-w-400, $font-c);
}
}
}

1
src/styles/layout/_layout.scss
View File

@ -24,6 +24,7 @@ header{
width: 100%;
height: 66px;
background-color: $white-fff;
z-index: 100000;
.header-inner{
position: relative;
@include flex(0px);

2
src/styles/layout/_pop-common.scss
View File

@ -13,7 +13,6 @@
.modal-dialog {
position: relative;
display: flex;
align-items: center;
min-height: calc(100% - (14px * 2));
max-width: 860px;
z-index:111000;
@ -88,6 +87,7 @@
&.alert{
.modal-dialog{
max-width: 237px;
align-items: center;
.modal-content{
padding: 20px;
.alert-tit{