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

물건 상세 페이지 수정

Browse Source
This commit is contained in:
김창수 2024-10-11 11:26:35 +09:00
parent d99876184a
commit 427b546d61
5 changed files with 292 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/static/images/sub/information_help.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.9598 10.4707C21.0134 11.3009 21.0134 12.1606 20.9598 12.9908C20.6856 17.2332 17.3536 20.6124 13.1706 20.8905C11.7435 20.9853 10.2536 20.9851 8.8294 20.8905C8.33896 20.8579 7.8044 20.7408 7.34401 20.5512C6.83177 20.3402 6.5756 20.2347 6.44544 20.2507C6.31527 20.2668 6.1264 20.406 5.74868 20.6846C5.08268 21.1757 4.24367 21.5284 2.99943 21.4981C2.37026 21.4828 2.05568 21.4751 1.91484 21.235C1.77401 20.9949 1.94941 20.6625 2.30021 19.9978C2.78674 19.0758 3.09501 18.0202 2.62791 17.1745C1.82343 15.9665 1.1401 14.5359 1.04024 12.9908C0.986587 12.1606 0.986587 11.3009 1.04024 10.4707C1.31441 6.22831 4.64639 2.84907 8.8294 2.57101C10.0318 2.49108 10.2812 2.4785 11.5 2.53362" stroke="#45576F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.9996 5C20.9996 6.933 19.4326 8.5 17.4996 8.5C15.5666 8.5 13.9996 6.933 13.9996 5C13.9996 3.067 15.5666 1.5 17.4996 1.5C19.4326 1.5 20.9996 3.067 20.9996 5Z" stroke="#45576F" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

6
src/components/publishpage/PublishPage.jsx
View File

@ -129,10 +129,10 @@ export default function PublishPage() {
<td className="t-center">2024-09-24</td> <td className="t-center">2024-09-24</td>
</tr> </tr>
<tr> <tr>
<td><strong className="title"></strong></td> <td><strong className="title">물건정보</strong></td>
<td><Link href="/management/productinfo" target="_blank">물건정보</Link></td> <td><Link href="/management/productinfo" target="_blank">ProductInfoPage</Link></td>
<td className="coding_stat_web"></td> <td className="coding_stat_web"></td>
<td className="t-center">2024-09-12</td> <td className="t-center">2024-10-11</td>
</tr> </tr>
</tbody> </tbody>

2
src/components/sub/management/newproduct/NewProductTable.jsx
View File

@ -181,7 +181,7 @@ export default function NewProductTable(){
</div> </div>
<div className="d-check-radio light"> <div className="d-check-radio light">
<input type="radio" name="radio02" id="ra04" /> <input type="radio" name="radio02" id="ra04" />
<label htmlFor="ra04">基軸</label> <label htmlFor="ra04">II</label>
</div> </div>
</div> </div>
<div className="d-check-box light mr5"> <div className="d-check-box light mr5">

66
src/components/sub/management/productinfo/ProductInfoTable.jsx
View File

@ -2,6 +2,7 @@ export default function ProductInfoTable(){
return( return(
<div className="sub-table-box"> <div className="sub-table-box">
<div className="promise-gudie"><span className="important">*</span> 必須入力項目</div> <div className="promise-gudie"><span className="important">*</span> 必須入力項目</div>
<div className="infomation-wrap">
<div className="infomation-table"> <div className="infomation-table">
<table> <table>
<colgroup> <colgroup>
@ -9,6 +10,17 @@ export default function ProductInfoTable(){
<col /> <col />
</colgroup> </colgroup>
<tbody> <tbody>
<tr>
<th>設計依頼No.</th>
<td>
<div className="flx-box">
<div className="input-wrap mr5" style={{width : '200px'}}>
<input type="text" className="input-light" defaultValue='1000000002' readOnly/>
</div>
<button className="btn-origin grey">設計依頼のインポート</button>
</div>
</td>
</tr>
<tr> <tr>
<th>担当者 <span className="important">*</span></th> <th>担当者 <span className="important">*</span></th>
<td> <td>
@ -60,12 +72,12 @@ export default function ProductInfoTable(){
<td> <td>
<div className="flx-box"> <div className="flx-box">
<div className="select-wrap mr5" style={{width : '567px'}}> <div className="select-wrap mr5" style={{width : '567px'}}>
<select className="select-light" name="" id="" disabled> <select className="select-light" name="" id="">
<option>INTERPLUG TEST</option> <option>選択</option>
</select> </select>
</div> </div>
<div className="input-wrap" style={{width : '216px'}}> <div className="input-wrap" style={{width : '216px'}}>
<input type="text" className="input-light" defaultValue={'201TES01'} readOnly/> <input type="text" className="input-light" readOnly/>
</div> </div>
</div> </div>
@ -83,12 +95,12 @@ export default function ProductInfoTable(){
<td> <td>
<div className="flx-box"> <div className="flx-box">
<div className="select-wrap mr5" style={{width : '567px'}}> <div className="select-wrap mr5" style={{width : '567px'}}>
<select className="select-light" name="" id="" disabled> <select className="select-light" name="" id="" >
<option>INTERPLUG TEST</option> <option>選択</option>
</select> </select>
</div> </div>
<div className="input-wrap" style={{width : '216px'}}> <div className="input-wrap" style={{width : '216px'}}>
<input type="text" className="input-light" defaultValue={'201TES01'} readOnly/> <input type="text" className="input-light" readOnly/>
</div> </div>
</div> </div>
</td> </td>
@ -98,7 +110,7 @@ export default function ProductInfoTable(){
<td> <td>
<div className="flx-box"> <div className="flx-box">
<div className="input-wrap mr5" style={{width : '200px'}}> <div className="input-wrap mr5" style={{width : '200px'}}>
<input type="text" className="input-light" defaultValue={'1050013'}/> <input type="text" className="input-light" readOnly/>
</div> </div>
<button className="btn-origin grey">住所検索</button> <button className="btn-origin grey">住所検索</button>
<div className="guide">※ 郵便番号7桁を入力した後、アドレス検索ボタンをクリックしてください</div> <div className="guide">※ 郵便番号7桁を入力した後、アドレス検索ボタンをクリックしてください</div>
@ -110,10 +122,10 @@ export default function ProductInfoTable(){
<td> <td>
<div className="flx-box"> <div className="flx-box">
<div className="input-wrap mr5" style={{width : '200px'}}> <div className="input-wrap mr5" style={{width : '200px'}}>
<input type="text" className="input-light" defaultValue={'東京'} readOnly/> <input type="text" className="input-light" readOnly/>
</div> </div>
<div className="input-wrap mr5" style={{width : '580px'}}> <div className="input-wrap mr5" style={{width : '580px'}}>
<input type="text" className="input-light" defaultValue={'ミスマス秒'} /> <input type="text" className="input-light" />
</div> </div>
</div> </div>
</td> </td>
@ -122,7 +134,7 @@ export default function ProductInfoTable(){
<th>発電量シミュレーション地域 <span className="important">*</span></th> <th>発電量シミュレーション地域 <span className="important">*</span></th>
<td> <td>
<div className="select-wrap" style={{width : '200px'}} > <div className="select-wrap" style={{width : '200px'}} >
<select className="select-light" name="" id=""> <select className="select-light" name="" id="" disabled>
<option>東京</option> <option>東京</option>
</select> </select>
</div> </div>
@ -137,7 +149,8 @@ export default function ProductInfoTable(){
<option>40</option> <option>40</option>
</select> </select>
</div> </div>
<span>m/s以下</span> <span className="mr10">m/s以下</span>
<button className="btn-origin grey">風速選択</button>
</div> </div>
</td> </td>
</tr> </tr>
@ -162,13 +175,15 @@ export default function ProductInfoTable(){
<th>面調図区分 <span className="important">*</span></th> <th>面調図区分 <span className="important">*</span></th>
<td> <td>
<div className="flx-box"> <div className="flx-box">
<div className="radio-wrap flx-box" style={{width: '239px'}}>
<div className="d-check-radio light mr10"> <div className="d-check-radio light mr10">
<input type="radio" name="radio02" id="ra03" /> <input type="radio" name="radio02" id="ra03" />
<label htmlFor="ra03">III・IV</label> <label htmlFor="ra03">III・IV</label>
</div> </div>
<div className="d-check-radio light mr10"> <div className="d-check-radio light">
<input type="radio" name="radio02" id="ra04" /> <input type="radio" name="radio02" id="ra04" />
<label htmlFor="ra04">基軸</label> <label htmlFor="ra04">II</label>
</div>
</div> </div>
<div className="d-check-box light mr5"> <div className="d-check-box light mr5">
<input type="checkbox" id="ch02" /> <input type="checkbox" id="ch02" />
@ -217,7 +232,30 @@ export default function ProductInfoTable(){
</tbody> </tbody>
</table> </table>
</div> </div>
<div className="sub-center-footer"> </div>
<div className="table-box-title-wrap">
<div className="title-wrap">
<h3>プランリスト</h3>
<ul className="info-wrap">
<li>全体 <span className="red">28</span></li>
</ul>
</div>
</div>
<div className="information-help-wrap">
<div className="information-help-tit-wrap">
<div className="help-tit-icon"></div>
<div className="help-tit">ヘルプ</div>
</div>
<div className="information-help-guide">
<span>1.発注は同一品番基準1件のみ可能です。</span>
<span>2. [Excelダウンロード]は、見積書、図面、シミュレーション結果をExcelファイルとして一度にダウンロードします。</span>
<span>3.プラン情報をダブルクリックすると図面作成画面に移動します。</span>
</div>
</div>
<div className="information-grid">
grid 영역
</div>
<div className="sub-right-footer">
<button className="btn-origin grey mr5">商品リスト</button> <button className="btn-origin grey mr5">商品リスト</button>
<button className="btn-origin navy mr5">保存</button> <button className="btn-origin navy mr5">保存</button>
<button className="btn-origin grey">物の削除</button> <button className="btn-origin grey">物の削除</button>

45
src/styles/_contents.scss
View File

@ -613,6 +613,10 @@
} }
} }
.infomation-wrap{
margin-bottom: 30px;
}
.infomation-box-wrap{ .infomation-box-wrap{
display: flex; display: flex;
align-items: center; align-items: center;
@ -857,3 +861,44 @@
} }
} }
// 물건상세
.information-help-wrap{
display: flex;
padding: 24px;
background-color: #F4F4F4;
border-radius: 4px;
margin-bottom: 15px;
.information-help-tit-wrap{
position: relative;
display: flex;
align-items: center;
padding-right: 40px;
border-right: 1px solid #E0E0E3;
.help-tit-icon{
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
background: #fff url(../../public/static/images/sub/information_help.svg)no-repeat center;
background-size: 20px 20px;
}
.help-tit{
font-size: 13px;
font-weight: 600;
color: #45576F;
}
}
.information-help-guide{
padding-left: 40px;
span{
display: block;
font-size: 12px;
font-weight: 400;
color: #45576F;
margin-bottom: 7px;
&:last-child{
margin-bottom: 0;
}
}
}
}