물품 및 도면 관리 추가
This commit is contained in:
parent
db25693da1
commit
367e25c7ad
17
public/static/images/common/datepicker.svg
Normal file
17
public/static/images/common/datepicker.svg
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="date_ico 1" clip-path="url(#clip0_2005_1848)">
|
||||||
|
<g id="사각형 316">
|
||||||
|
<path id="Vector" d="M12 2H2C0.89543 2 0 2.89543 0 4V13C0 14.1046 0.89543 15 2 15H12C13.1046 15 14 14.1046 14 13V4C14 2.89543 13.1046 2 12 2Z" fill="white"/>
|
||||||
|
<path id="Vector_2" d="M12 2.5H2C1.17157 2.5 0.5 3.17157 0.5 4V13C0.5 13.8284 1.17157 14.5 2 14.5H12C12.8284 14.5 13.5 13.8284 13.5 13V4C13.5 3.17157 12.8284 2.5 12 2.5Z" stroke="#7D8894"/>
|
||||||
|
</g>
|
||||||
|
<path id="사각형 323" d="M2 2.5H12C12.3978 2.5 12.7794 2.65804 13.0607 2.93934C13.342 3.22064 13.5 3.60218 13.5 4V6.5H0.5V4C0.5 3.60218 0.658035 3.22064 0.93934 2.93934C1.22064 2.65804 1.60218 2.5 2 2.5Z" fill="#7D8894" stroke="#7D8894"/>
|
||||||
|
<path id="사각형 324" d="M4 0C4.26522 0 4.51957 0.105357 4.70711 0.292893C4.89464 0.48043 5 0.734784 5 1V3H3V1C3 0.734784 3.10536 0.48043 3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0Z" fill="#7D8894"/>
|
||||||
|
<path id="사각형 325" d="M10 0C10.2652 0 10.5196 0.105357 10.7071 0.292893C10.8946 0.48043 11 0.734784 11 1V3H9V1C9 0.734784 9.10536 0.48043 9.29289 0.292893C9.48043 0.105357 9.73478 0 10 0Z" fill="#7D8894"/>
|
||||||
|
<path id="패스 10" d="M1 6.556H13.04" stroke="#7D8894"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_2005_1848">
|
||||||
|
<rect width="14" height="15" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
3
public/static/images/common/select_light_arr.svg
Normal file
3
public/static/images/common/select_light_arr.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="Vector 7164" d="M1 1L5 5L9 1" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 226 B |
8
public/static/images/main/drawing_icon.svg
Normal file
8
public/static/images/main/drawing_icon.svg
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="elements">
|
||||||
|
<circle id="Ellipse 1574" cx="5.25" cy="5.25" r="4.25" stroke="white" stroke-width="1.5"/>
|
||||||
|
<circle id="Ellipse 1575" cx="16.75" cy="16.75" r="4.25" stroke="white" stroke-width="1.5"/>
|
||||||
|
<circle id="Ellipse 1576" cx="5.25" cy="16.75" r="4.25" stroke="white" stroke-width="1.5"/>
|
||||||
|
<path id="Vector" d="M14.3477 8.85572L14.1909 8.1223H14.1909L14.3477 8.85572ZM13.1443 7.65228L13.8777 7.80911L13.1443 7.65228ZM14.0207 5.11171L13.4903 4.58138H13.4903L14.0207 5.11171ZM16.8883 7.97933L17.4186 8.50966L16.8883 7.97933ZM20.7963 2.47729L21.4458 2.10229L20.7963 2.47729ZM20.1961 4.67149L19.6658 4.14116L20.1961 4.67149ZM20.7963 3.99807L21.4458 4.37307L20.7963 3.99807ZM19.5227 1.20375L19.8977 0.554227V0.554227L19.5227 1.20375ZM17.3285 1.80388L17.8588 2.33421L17.3285 1.80388ZM18.0019 1.20375L17.6269 0.554227V0.554227L18.0019 1.20375ZM19.6658 4.14116L16.358 7.449L17.4186 8.50966L20.7265 5.20182L19.6658 4.14116ZM14.551 5.64205L17.8588 2.33421L16.7982 1.27355L13.4903 4.58138L14.551 5.64205ZM14.1909 8.1223C14.0155 8.15981 13.8753 8.18973 13.7548 8.21212C13.6333 8.23472 13.5536 8.2454 13.4996 8.24884C13.4441 8.25237 13.4479 8.24579 13.4825 8.25471C13.5296 8.26685 13.5936 8.29719 13.6482 8.35178L12.5876 9.41244C12.9113 9.73622 13.3158 9.76355 13.5948 9.74581C13.8603 9.72893 14.1839 9.6577 14.5045 9.58914L14.1909 8.1223ZM12.4109 7.49546C12.3423 7.8161 12.2711 8.13973 12.2542 8.40523C12.2364 8.68419 12.2638 9.08865 12.5876 9.41244L13.6482 8.35178C13.7028 8.40637 13.7331 8.47039 13.7453 8.51747C13.7542 8.55207 13.7476 8.55591 13.7512 8.50044C13.7546 8.44641 13.7653 8.36674 13.7879 8.24519C13.8103 8.12473 13.8402 7.98455 13.8777 7.80911L12.4109 7.49546ZM19.6658 2.33421C20.0333 2.7017 20.1084 2.78597 20.1467 2.85229L21.4458 2.10229C21.2839 1.82184 21.0257 1.57275 20.7265 1.27355L19.6658 2.33421ZM20.7265 5.20182C21.0257 4.90261 21.2839 4.65353 21.4458 4.37307L20.1467 3.62307C20.1084 3.6894 20.0333 3.77367 19.6658 4.14116L20.7265 5.20182ZM20.1467 2.85229C20.2844 3.09077 20.2844 3.38459 20.1467 3.62307L21.4458 4.37307C21.8514 3.67049 21.8514 2.80488 21.4458 2.10229L20.1467 2.85229ZM20.7265 1.27355C20.4272 0.974342 20.1782 0.716149 19.8977 0.554227L19.1477 1.85326C19.214 1.89156 19.2983 1.96671 19.6658 2.33421L20.7265 1.27355ZM17.8588 2.33421C18.2263 1.96672 18.3106 1.89156 18.3769 1.85326L17.6269 0.554227C17.3465 0.716149 17.0974 0.974341 16.7982 1.27355L17.8588 2.33421ZM19.8977 0.554227C19.1951 0.148591 18.3295 0.148591 17.6269 0.554227L18.3769 1.85327C18.6154 1.71558 18.9092 1.71558 19.1477 1.85327L19.8977 0.554227ZM16.358 7.449C16.1624 7.64453 15.8952 7.77096 15.5155 7.8679C15.3253 7.91646 15.1224 7.954 14.8963 7.99307C14.679 8.03061 14.4303 8.07112 14.1909 8.1223L14.5045 9.58914C14.7063 9.54599 14.9131 9.51239 15.1517 9.47117C15.3814 9.43149 15.6346 9.38563 15.8866 9.32128C16.3914 9.19241 16.9533 8.97497 17.4186 8.50966L16.358 7.449ZM13.8777 7.80911C13.9289 7.56974 13.9694 7.32097 14.0069 7.1037C14.046 6.87757 14.0835 6.67468 14.1321 6.48447C14.229 6.10477 14.3555 5.83758 14.551 5.64205L13.4903 4.58138C13.025 5.0467 12.8076 5.60863 12.6787 6.11341C12.6144 6.36544 12.5685 6.61864 12.5288 6.84832C12.4876 7.08687 12.454 7.29366 12.4109 7.49546L13.8777 7.80911Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
6
public/static/images/main/home_icon.svg
Normal file
6
public/static/images/main/home_icon.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="elements">
|
||||||
|
<path id="Vector" d="M6.88814 2.62341L1.71254 7.1523C1.26871 7.54067 1.56629 8.23047 2.17767 8.23047C2.55119 8.23047 2.85399 8.51016 2.85399 8.85516V11.7383C2.85399 14.2187 2.85399 15.4589 3.68823 16.2294C4.52248 17 5.86517 17 8.55057 17H10.4494C13.1348 17 14.4775 17 15.3118 16.2294C16.146 15.4589 16.146 14.2187 16.146 11.7383V8.85516C16.146 8.51016 16.4488 8.23047 16.8223 8.23047C17.4337 8.23047 17.7313 7.54067 17.2875 7.1523L12.1119 2.62341C10.8751 1.54114 10.2566 1 9.5 1C8.74336 1 8.12495 1.54114 6.88814 2.62341Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path id="Vector_2" d="M9.5 12.5555H9.50798" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 858 B |
3
public/static/images/main/loaction_arr.svg
Normal file
3
public/static/images/main/loaction_arr.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="Vector 5" d="M0.5 5.5L3 3L0.5 0.5" stroke="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 161 B |
6
public/static/images/sub/copy_ico.svg
Normal file
6
public/static/images/sub/copy_ico.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="elements">
|
||||||
|
<path id="Rectangle 1705" d="M13.4999 6.6C13.498 4.23433 13.4622 3.00897 12.7736 2.16994C12.6407 2.00791 12.4921 1.85934 12.3301 1.72637C11.445 1 10.13 1 7.5 1C4.87002 1 3.55502 1 2.66994 1.72637C2.50791 1.85934 2.35934 2.00791 2.22637 2.16994C1.5 3.05502 1.5 4.37001 1.5 7C1.5 9.62998 1.5 10.945 2.22637 11.8301C2.35934 11.9921 2.50791 12.1407 2.66994 12.2736C3.50897 12.9622 4.73433 12.998 7.1 12.9999" stroke="#344356" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path id="Vector" d="M11.3462 6.25C10.9319 6.25 10.5962 6.58579 10.5962 7C10.5962 7.41421 10.9319 7.75 11.3462 7.75V6.25ZM13.6538 7.75C14.0681 7.75 14.4038 7.41421 14.4038 7C14.4038 6.58579 14.0681 6.25 13.6538 6.25V7.75ZM8.25 10.8462C8.25 10.4319 7.91421 10.0962 7.5 10.0962C7.08579 10.0962 6.75 10.4319 6.75 10.8462H8.25ZM6.75 13.1538C6.75 13.5681 7.08579 13.9038 7.5 13.9038C7.91421 13.9038 8.25 13.5681 8.25 13.1538H6.75ZM9.49016 7.74363C9.90086 7.68978 10.1901 7.31318 10.1363 6.90249C10.0824 6.49179 9.70583 6.20251 9.29513 6.25637L9.49016 7.74363ZM8.0814 7.48186L8.55787 8.06107L8.0814 7.48186ZM6.76469 8.39077C6.68312 8.79687 6.9462 9.19221 7.35231 9.27378C7.75841 9.35534 8.15374 9.09226 8.23531 8.68616L6.76469 8.39077ZM16.7647 8.68616C16.8463 9.09226 17.2416 9.35534 17.6477 9.27378C18.0538 9.19221 18.3169 8.79687 18.2353 8.39077L16.7647 8.68616ZM16.9186 7.48186L16.4421 8.06107L16.4421 8.06107L16.9186 7.48186ZM15.7049 6.25637C15.2942 6.20251 14.9176 6.49179 14.8637 6.90249C14.8099 7.31318 15.0991 7.68978 15.5098 7.74363L15.7049 6.25637ZM15.5098 16.2564C15.0991 16.3102 14.8099 16.6868 14.8637 17.0975C14.9176 17.5082 15.2942 17.7975 15.7049 17.7436L15.5098 16.2564ZM16.9186 16.5181L17.3951 17.0973L16.9186 16.5181ZM18.2353 15.6092C18.3169 15.2031 18.0538 14.8078 17.6477 14.7262C17.2416 14.6447 16.8463 14.9077 16.7647 15.3138L18.2353 15.6092ZM8.23531 15.3138C8.15374 14.9077 7.75841 14.6447 7.35231 14.7262C6.9462 14.8078 6.68312 15.2031 6.76469 15.6092L8.23531 15.3138ZM8.0814 16.5181L8.55787 15.9389L8.55787 15.9389L8.0814 16.5181ZM9.29513 17.7436C9.70583 17.7975 10.0824 17.5082 10.1363 17.0975C10.1901 16.6868 9.90086 16.3102 9.49016 16.2564L9.29513 17.7436ZM11.3462 16.25C10.9319 16.25 10.5962 16.5858 10.5962 17C10.5962 17.4142 10.9319 17.75 11.3462 17.75V16.25ZM13.6538 17.75C14.0681 17.75 14.4038 17.4142 14.4038 17C14.4038 16.5858 14.0681 16.25 13.6538 16.25V17.75ZM18.25 10.8462C18.25 10.4319 17.9142 10.0962 17.5 10.0962C17.0858 10.0962 16.75 10.4319 16.75 10.8462H18.25ZM16.75 13.1538C16.75 13.5681 17.0858 13.9038 17.5 13.9038C17.9142 13.9038 18.25 13.5681 18.25 13.1538H16.75ZM11.3462 7.75H13.6538V6.25H11.3462V7.75ZM6.75 10.8462V13.1538H8.25V10.8462H6.75ZM9.29513 6.25637C8.65219 6.34068 8.08031 6.51159 7.60493 6.90266L8.55787 8.06107C8.72678 7.92212 8.98234 7.81022 9.49016 7.74363L9.29513 6.25637ZM8.23531 8.68616C8.30384 8.34501 8.40801 8.18435 8.55787 8.06107L7.60493 6.90266C7.12056 7.30112 6.8817 7.8082 6.76469 8.39077L8.23531 8.68616ZM18.2353 8.39077C18.1183 7.8082 17.8794 7.30112 17.3951 6.90266L16.4421 8.06107C16.592 8.18435 16.6962 8.345 16.7647 8.68616L18.2353 8.39077ZM15.5098 7.74363C16.0177 7.81022 16.2732 7.92212 16.4421 8.06107L17.3951 6.90266C16.9197 6.51159 16.3478 6.34068 15.7049 6.25637L15.5098 7.74363ZM15.7049 17.7436C16.3478 17.6593 16.9197 17.4884 17.3951 17.0973L16.4421 15.9389C16.2732 16.0779 16.0177 16.1898 15.5098 16.2564L15.7049 17.7436ZM16.7647 15.3138C16.6962 15.655 16.592 15.8156 16.4421 15.9389L17.3951 17.0973C17.8794 16.6989 18.1183 16.1918 18.2353 15.6092L16.7647 15.3138ZM6.76469 15.6092C6.8817 16.1918 7.12056 16.6989 7.60493 17.0973L8.55787 15.9389C8.40801 15.8156 8.30384 15.655 8.23531 15.3138L6.76469 15.6092ZM9.49016 16.2564C8.98234 16.1898 8.72678 16.0779 8.55787 15.9389L7.60492 17.0973C8.08031 17.4884 8.65219 17.6593 9.29513 17.7436L9.49016 16.2564ZM11.3462 17.75H13.6538V16.25H11.3462V17.75ZM16.75 10.8462V13.1538H18.25V10.8462H16.75Z" fill="#344356"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
4
public/static/images/sub/tooltips.svg
Normal file
4
public/static/images/sub/tooltips.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7" cy="7.5" r="6.5" fill="#ECEEF1" stroke="#45576F"/>
|
||||||
|
<path d="M6.507 9.228L6.276 5.169L6.221 3.629H7.849L7.794 5.169L7.563 9.228H6.507ZM7.035 12.154C6.74167 12.154 6.49967 12.0513 6.309 11.846C6.12567 11.6407 6.034 11.3913 6.034 11.098C6.034 10.79 6.12567 10.537 6.309 10.339C6.49967 10.141 6.74167 10.042 7.035 10.042C7.32833 10.042 7.56667 10.141 7.75 10.339C7.94067 10.537 8.036 10.79 8.036 11.098C8.036 11.3913 7.94067 11.6407 7.75 11.846C7.56667 12.0513 7.32833 12.154 7.035 12.154Z" fill="#45576F"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 622 B |
@ -9,88 +9,180 @@ export default function InputWrapPage (){
|
|||||||
{name: 'オンライン保証シ',}, {name: 'ステム'}
|
{name: 'オンライン保証シ',}, {name: 'ステム'}
|
||||||
]
|
]
|
||||||
return(
|
return(
|
||||||
<div className="input-content">
|
<div>
|
||||||
<div className="input-wrap">
|
<h1 className="title">dark</h1>
|
||||||
<h1>BTN WRAP</h1>
|
<div className="input-content">
|
||||||
<div className="form-btn">
|
<div className="input-wrap">
|
||||||
<button className="btn-frame deepgray">屋根面の割り当て</button>
|
<h1>BTN WRAP</h1>
|
||||||
<button className="btn-frame gray">屋根面の割り当て</button>
|
<div className="form-btn">
|
||||||
<button className="btn-frame modal">屋根面の割り当て</button>
|
<button className="btn-frame deepgray">屋根面の割り当て</button>
|
||||||
<button className="btn-frame modal act">屋根面の割り当て</button>
|
<button className="btn-frame gray">屋根面の割り当て</button>
|
||||||
<button className="btn-frame small dark">移動</button>
|
<button className="btn-frame modal">屋根面の割り当て</button>
|
||||||
|
<button className="btn-frame modal act">屋根面の割り当て</button>
|
||||||
|
<button className="btn-frame small dark">移動</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="input-wrap">
|
||||||
<div className="input-wrap">
|
<h1>Select WRAP</h1>
|
||||||
<h1>Select WRAP</h1>
|
<div className="form-select">
|
||||||
<div className="form-select">
|
<Qselect title={'Q.ORDER'} option={SelectOption}/>
|
||||||
<Qselect title={'Q.ORDER'} option={SelectOption}/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="input-wrap">
|
||||||
<div className="input-wrap">
|
<h1>Input WRAP</h1>
|
||||||
<h1>Input WRAP</h1>
|
<div className="form-input">
|
||||||
<div className="form-input">
|
<label htmlFor="">長さ (mm)</label>
|
||||||
<label htmlFor="">長さ (mm)</label>
|
<input type="text" className="input-origin" placeholder="asdasd"/>
|
||||||
|
</div>
|
||||||
<input type="text" className="input-origin" placeholder="asdasd"/>
|
<input type="text" className="input-origin" placeholder="asdasd"/>
|
||||||
</div>
|
</div>
|
||||||
<input type="text" className="input-origin" placeholder="asdasd"/>
|
|
||||||
</div>
|
<div className="input-wrap">
|
||||||
<div className="input-wrap">
|
<h1>colorpicker</h1>
|
||||||
<h1>DatePicker WRAP</h1>
|
<div className="form-colorpicker">
|
||||||
<div className="form-datepicker">
|
<ColorPicker/>
|
||||||
<div className="single-date">
|
|
||||||
<SingleDatePicker/>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="range-date">
|
</div>
|
||||||
<RangeDatePicker/>
|
<div className="input-wrap">
|
||||||
|
<h1>Check-Btn</h1>
|
||||||
|
<div className="form-Check-btn">
|
||||||
|
<button className="check-btn">
|
||||||
|
<span className="check-area"></span>
|
||||||
|
<span className="title-area">ü割り当て表示</span>
|
||||||
|
</button>
|
||||||
|
<button className="check-btn act">
|
||||||
|
<span className="check-area"></span>
|
||||||
|
<span className="title-area">ü割り当て表示</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="input-wrap">
|
||||||
|
<h1>Arrow-Btn</h1>
|
||||||
|
<div className="form-Arrow-btn">
|
||||||
|
<button className="arr-btn">
|
||||||
|
<span>文字フォントの変更</span>
|
||||||
|
</button>
|
||||||
|
<button className="arr-btn dark">
|
||||||
|
<span>文字フォントの変更</span>
|
||||||
|
</button>
|
||||||
|
<button className="arr-btn act">
|
||||||
|
<span>文字フォントの変更</span>
|
||||||
|
</button>
|
||||||
|
<button className="arr-btn act">
|
||||||
|
<span>文字フォントの変更</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="input-wrap">
|
||||||
|
<h1>main-radio</h1>
|
||||||
|
<div className="form-main-radio flx">
|
||||||
|
<div className="d-check-radio">
|
||||||
|
<input type="radio" name="radio01" id="ra01" />
|
||||||
|
<label htmlFor="ra01">物件番号</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-radio">
|
||||||
|
<input type="radio" name="radio01" id="ra02" />
|
||||||
|
<label htmlFor="ra02">物件番号</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="input-wrap">
|
<h1 className="title">light</h1>
|
||||||
<h1>colorpicker</h1>
|
<div className="input-content light">
|
||||||
<div className="form-colorpicker">
|
<div className="input-wrap">
|
||||||
<ColorPicker/>
|
<h1>input-wrap</h1>
|
||||||
</div>
|
<div className="form-input">
|
||||||
</div>
|
<div className="mb5">
|
||||||
<div className="input-wrap">
|
<span>normal</span>
|
||||||
<h1>Check-Btn</h1>
|
<input type="text" className="input-light" />
|
||||||
<div className="form-Check-btn">
|
</div>
|
||||||
<button className="check-btn">
|
<div className="mb5">
|
||||||
<span className="check-area"></span>
|
<span>read only</span>
|
||||||
<span className="title-area">ü割り当て表示</span>
|
<input type="text" className="input-light" readOnly/>
|
||||||
</button>
|
</div>
|
||||||
<button className="check-btn act">
|
|
||||||
<span className="check-area"></span>
|
|
||||||
<span className="title-area">ü割り当て表示</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="input-wrap">
|
|
||||||
<h1>Arrow-Btn</h1>
|
|
||||||
<div className="form-Arrow-btn">
|
|
||||||
<button className="arr-btn">
|
|
||||||
<span>文字フォントの変更</span>
|
|
||||||
</button>
|
|
||||||
<button className="arr-btn dark">
|
|
||||||
<span>文字フォントの変更</span>
|
|
||||||
</button>
|
|
||||||
<button className="arr-btn act">
|
|
||||||
<span>文字フォントの変更</span>
|
|
||||||
</button>
|
|
||||||
<button className="arr-btn act">
|
|
||||||
<span>文字フォントの変更</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="input-wrap">
|
|
||||||
<h1>main-radio</h1>
|
|
||||||
<div className="form-main-radio">
|
|
||||||
<div className="d-check-radio">
|
|
||||||
<input type="radio" name="radio01" id="ra01" />
|
|
||||||
<label htmlFor="ra01">物件番号</label>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="d-check-radio">
|
</div>
|
||||||
<input type="radio" name="radio01" id="ra02" />
|
<div className="input-wrap">
|
||||||
<label htmlFor="ra02">物件番号</label>
|
<h1>select-wrap</h1>
|
||||||
|
<div className="form-input">
|
||||||
|
<div className="mb5">
|
||||||
|
<span>normal</span>
|
||||||
|
<select className="select-light" name="" id="">
|
||||||
|
<option>販売代理店リスト</option>
|
||||||
|
<option>販売代理店リスト</option>
|
||||||
|
<option>販売代理店リスト</option>
|
||||||
|
<option>販売代理店リスト</option>
|
||||||
|
<option>販売代理店リスト</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="mb5">
|
||||||
|
<span>disabled</span>
|
||||||
|
<select className="select-light" name="" id="" disabled>
|
||||||
|
<option>販売代理店リスト</option>
|
||||||
|
<option>販売代理店リスト</option>
|
||||||
|
<option>販売代理店リスト</option>
|
||||||
|
<option>販売代理店リスト</option>
|
||||||
|
<option>販売代理店リスト</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="input-wrap">
|
||||||
|
<h1>radio-check-wrap</h1>
|
||||||
|
<div className="form-input">
|
||||||
|
<span>radio</span>
|
||||||
|
<div className="flx mb5">
|
||||||
|
<div className="d-check-radio light mr5">
|
||||||
|
<input type="radio" name="radio02" id="ra03" />
|
||||||
|
<label htmlFor="ra03">物件番号</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-radio light mr5">
|
||||||
|
<input type="radio" name="radio02" id="ra04" />
|
||||||
|
<label htmlFor="ra04">物件番号</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-radio light mr5">
|
||||||
|
<input type="radio" name="radio02" id="ra05" />
|
||||||
|
<label htmlFor="ra05">物件番号</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-radio light">
|
||||||
|
<input type="radio" name="radio02" id="ra06" />
|
||||||
|
<label htmlFor="ra06">物件番号</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span>check</span>
|
||||||
|
<div className="flx mb5">
|
||||||
|
<div className="d-check-box light mr5">
|
||||||
|
<input type="checkbox" id="ch01" />
|
||||||
|
<label htmlFor="ch01">仕様確認</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-box light mr5">
|
||||||
|
<input type="checkbox" id="ch02" />
|
||||||
|
<label htmlFor="ch02">仕様確認</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-box light">
|
||||||
|
<input type="checkbox" id="ch03" />
|
||||||
|
<label htmlFor="ch03">仕様確認</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="input-wrap">
|
||||||
|
<h1>date-picker-wrap</h1>
|
||||||
|
<div className="form-input">
|
||||||
|
<div className="mb5">
|
||||||
|
<div className="date-picker">
|
||||||
|
<SingleDatePicker/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="input-wrap">
|
||||||
|
<h1>button-wrap</h1>
|
||||||
|
<div className="form-input">
|
||||||
|
<div className="mb5">
|
||||||
|
<button className="btn-origin navy mr5">照会</button>
|
||||||
|
<button className="btn-origin grey">初期化</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
53
src/app/management/productinfo/page.jsx
Normal file
53
src/app/management/productinfo/page.jsx
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import Header from "@/components/layout/Header";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from 'next/link';
|
||||||
|
import Footer from '@/components/layout/Footer';
|
||||||
|
import '@/styles/contents.scss';
|
||||||
|
import ProductInfoTable from "@/components/sub/management/productinfo/ProductInfoTable";
|
||||||
|
import ProductInfoBox from "@/components/sub/management/productinfo/ProductInfoBox";
|
||||||
|
|
||||||
|
export default function ProductInfo(){
|
||||||
|
return(
|
||||||
|
<div className="wrap">
|
||||||
|
<Header/>
|
||||||
|
<div className="content">
|
||||||
|
<div className="sub-header">
|
||||||
|
<div className="sub-header-inner">
|
||||||
|
<ul className="sub-header-title-wrap">
|
||||||
|
<li className='title-item'>
|
||||||
|
<Link className='sub-header-title' href={'#'}>商品情報</Link>
|
||||||
|
</li>
|
||||||
|
<li className='title-item'>
|
||||||
|
<Link className='sub-header-title' href={'#'}><span className='icon drawing'></span>作図</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul className="sub-header-location">
|
||||||
|
<li className="location-item">
|
||||||
|
<span className="home">
|
||||||
|
<Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className="location-item">
|
||||||
|
<span>物品及び図面管理</span>
|
||||||
|
</li>
|
||||||
|
<li className="location-item">
|
||||||
|
<span>商品情報</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="sub-content">
|
||||||
|
<div className="sub-content-inner">
|
||||||
|
<div className="sub-content-box">
|
||||||
|
<ProductInfoBox/>
|
||||||
|
</div>
|
||||||
|
<div className="sub-content-box">
|
||||||
|
<ProductInfoTable/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Footer/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
45
src/app/management/productstate/page.jsx
Normal file
45
src/app/management/productstate/page.jsx
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import Footer from "@/components/layout/Footer";
|
||||||
|
import Header from "@/components/layout/Header";
|
||||||
|
import PropertyStatus from "@/components/sub/management/productstate/PropertyStatus";
|
||||||
|
import Image from "next/image";
|
||||||
|
import '@/styles/contents.scss'
|
||||||
|
import ProductsList from "@/components/sub/management/productstate/ProductsList";
|
||||||
|
|
||||||
|
export default function ProductStatePage(){
|
||||||
|
return(
|
||||||
|
<div className="wrap">
|
||||||
|
<Header/>
|
||||||
|
<div className="content">
|
||||||
|
<div className="sub-header">
|
||||||
|
<div className="sub-header-inner">
|
||||||
|
<h1 className="sub-header-title">物品及び図面管理</h1>
|
||||||
|
<ul className="sub-header-location">
|
||||||
|
<li className="location-item">
|
||||||
|
<span className="home">
|
||||||
|
<Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className="location-item">
|
||||||
|
<span>物品及び図面管理</span>
|
||||||
|
</li>
|
||||||
|
<li className="location-item">
|
||||||
|
<span>新規物件登録</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="sub-content">
|
||||||
|
<div className="sub-content-inner">
|
||||||
|
<div className="sub-content-box">
|
||||||
|
<PropertyStatus/>
|
||||||
|
</div>
|
||||||
|
<div className="sub-content-box">
|
||||||
|
<ProductsList/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Footer/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -90,6 +90,19 @@ export default function PublishPage() {
|
|||||||
<td className="coding_stat_web"></td>
|
<td className="coding_stat_web"></td>
|
||||||
<td className="t-center">2024-09-11</td>
|
<td className="t-center">2024-09-11</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className="t-center" rowSpan={2}><strong>물품 및 도면 관리</strong></td>
|
||||||
|
<td><strong className="title"></strong></td>
|
||||||
|
<td><Link href="/management/productstate" target="_blank">물건현황</Link></td>
|
||||||
|
<td className="coding_stat_web"></td>
|
||||||
|
<td className="t-center">2024-09-12</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong className="title"></strong></td>
|
||||||
|
<td><Link href="/management/productinfo" target="_blank">물건정보</Link></td>
|
||||||
|
<td className="coding_stat_web"></td>
|
||||||
|
<td className="t-center">2024-09-12</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
22
src/components/sub/management/productinfo/ProductInfoBox.jsx
Normal file
22
src/components/sub/management/productinfo/ProductInfoBox.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
export default function ProductInfoBox(){
|
||||||
|
return(
|
||||||
|
<div className="infomation-box-wrap">
|
||||||
|
<div className="sub-table-box">
|
||||||
|
<div className="info-title">品番</div>
|
||||||
|
<div className="info-inner">R201TES012406019001 <button className="copy-ico"></button></div>
|
||||||
|
</div>
|
||||||
|
<div className="sub-table-box">
|
||||||
|
<div className="info-title">仕様確認日</div>
|
||||||
|
<div className="info-inner">2024.08.01</div>
|
||||||
|
</div>
|
||||||
|
<div className="sub-table-box">
|
||||||
|
<div className="info-title">更新日時</div>
|
||||||
|
<div className="info-inner">2024.07.17 17:10:06 (キムジヤング)</div>
|
||||||
|
</div>
|
||||||
|
<div className="sub-table-box">
|
||||||
|
<div className="info-title">登録日</div>
|
||||||
|
<div className="info-inner">2024.07.17(キムジヤング)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
227
src/components/sub/management/productinfo/ProductInfoTable.jsx
Normal file
227
src/components/sub/management/productinfo/ProductInfoTable.jsx
Normal file
@ -0,0 +1,227 @@
|
|||||||
|
export default function ProductInfoTable(){
|
||||||
|
return(
|
||||||
|
<div className="sub-table-box">
|
||||||
|
<div className="promise-gudie"><span className="important">*</span> 必須入力項目</div>
|
||||||
|
<div className="infomation-table">
|
||||||
|
<table>
|
||||||
|
<colgroup>
|
||||||
|
<col style={{width: '200px'}}/>
|
||||||
|
<col />
|
||||||
|
</colgroup>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>担当者 <span className="important">*</span></th>
|
||||||
|
<td>
|
||||||
|
<div className="input-wrap" style={{width : '500px'}}>
|
||||||
|
<input type="text" className="input-light" defaultValue='Kim Ji Young'/>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>物品区分/物件名 <span className="important">*</span></th>
|
||||||
|
<td>
|
||||||
|
<div className="flx-box">
|
||||||
|
<div className="d-check-radio light mr10">
|
||||||
|
<input type="radio" name="radio01" id="ra01" />
|
||||||
|
<label htmlFor="ra01">新築</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-radio light mr10">
|
||||||
|
<input type="radio" name="radio01" id="ra02" />
|
||||||
|
<label htmlFor="ra02">基軸</label>
|
||||||
|
</div>
|
||||||
|
<div className="input-wrap mr5" style={{width : '545px'}}>
|
||||||
|
<input type="text" className="input-light" defaultValue='jy0619_0625'/>
|
||||||
|
</div>
|
||||||
|
<div className="select-wrap" style={{width : '120px'}}>
|
||||||
|
<select className="select-light" name="" id="" >
|
||||||
|
<option>案件</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>商品名 ふりがな</th>
|
||||||
|
<td>
|
||||||
|
<div className="input-wrap" style={{width : '789px'}}>
|
||||||
|
<input type="text" className="input-light" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
<div className="flx-box">
|
||||||
|
<div className="title">
|
||||||
|
一次販売店名/ID <span className="important">*</span>
|
||||||
|
</div>
|
||||||
|
<div className="tooltips"></div>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<td>
|
||||||
|
<div className="flx-box">
|
||||||
|
<div className="select-wrap mr5" style={{width : '567px'}}>
|
||||||
|
<select className="select-light" name="" id="" disabled>
|
||||||
|
<option>INTERPLUG TEST</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="input-wrap" style={{width : '216px'}}>
|
||||||
|
<input type="text" className="input-light" defaultValue={'201TES01'} readOnly/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
<div className="flx-box">
|
||||||
|
<div className="title">
|
||||||
|
二次販売店名/ID <span className="important">*</span>
|
||||||
|
</div>
|
||||||
|
<div className="tooltips"></div>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<td>
|
||||||
|
<div className="flx-box">
|
||||||
|
<div className="select-wrap mr5" style={{width : '567px'}}>
|
||||||
|
<select className="select-light" name="" id="" disabled>
|
||||||
|
<option>INTERPLUG TEST</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="input-wrap" style={{width : '216px'}}>
|
||||||
|
<input type="text" className="input-light" defaultValue={'201TES01'} readOnly/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>郵便番号 <span className="important">*</span></th>
|
||||||
|
<td>
|
||||||
|
<div className="flx-box">
|
||||||
|
<div className="input-wrap mr5" style={{width : '200px'}}>
|
||||||
|
<input type="text" className="input-light" defaultValue={'1050013'}/>
|
||||||
|
</div>
|
||||||
|
<button className="btn-origin grey">住所検索</button>
|
||||||
|
<div className="guide">※ 郵便番号7桁を入力した後、アドレス検索ボタンをクリックしてください</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>都道府県 / 住所 <span className="important">*</span></th>
|
||||||
|
<td>
|
||||||
|
<div className="flx-box">
|
||||||
|
<div className="input-wrap mr5" style={{width : '200px'}}>
|
||||||
|
<input type="text" className="input-light" defaultValue={'東京'} readOnly/>
|
||||||
|
</div>
|
||||||
|
<div className="input-wrap mr5" style={{width : '580px'}}>
|
||||||
|
<input type="text" className="input-light" defaultValue={'ミスマス秒'} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>発電量シミュレーション地域 <span className="important">*</span></th>
|
||||||
|
<td>
|
||||||
|
<div className="select-wrap" style={{width : '200px'}}>
|
||||||
|
<select className="select-light" name="" id="">
|
||||||
|
<option>東京</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>基準風速 <span className="important">*</span></th>
|
||||||
|
<td>
|
||||||
|
<div className="flx-box">
|
||||||
|
<div className="select-wrap mr10" style={{width : '200px'}}>
|
||||||
|
<select className="select-light" name="" id="">
|
||||||
|
<option>40</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<span>m/s以下</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>垂直説説 <span className="important">*</span></th>
|
||||||
|
<td>
|
||||||
|
<div className="flx-box">
|
||||||
|
<div className="select-wrap mr10" style={{width : '200px'}}>
|
||||||
|
<select className="select-light" name="" id="">
|
||||||
|
<option>40</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<span className="mr10">cm</span>
|
||||||
|
<div className="d-check-box light">
|
||||||
|
<input type="checkbox" id="ch01" />
|
||||||
|
<label htmlFor="ch01">寒冷地対策施行</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>面調図区分 <span className="important">*</span></th>
|
||||||
|
<td>
|
||||||
|
<div className="flx-box">
|
||||||
|
<div className="d-check-radio light mr10">
|
||||||
|
<input type="radio" name="radio02" id="ra03" />
|
||||||
|
<label htmlFor="ra03">III・IV</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-radio light mr10">
|
||||||
|
<input type="radio" name="radio02" id="ra04" />
|
||||||
|
<label htmlFor="ra04">基軸</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-box light mr5">
|
||||||
|
<input type="checkbox" id="ch02" />
|
||||||
|
<label htmlFor="ch02">塩害地域用アイテムの使用</label>
|
||||||
|
</div>
|
||||||
|
<div className="tooltips"></div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>設置高さ <span className="important">*</span></th>
|
||||||
|
<td>
|
||||||
|
<div className="flx-box">
|
||||||
|
<div className="select-wrap mr10" style={{width : '200px'}}>
|
||||||
|
<select className="select-light" name="" id="">
|
||||||
|
<option>5</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<span>m</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>契約条件</th>
|
||||||
|
<td>
|
||||||
|
<div className="flx-box">
|
||||||
|
<div className="d-check-radio light mr10">
|
||||||
|
<input type="radio" name="radio03" id="ra05" />
|
||||||
|
<label htmlFor="ra05">余剰</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-radio light mr10">
|
||||||
|
<input type="radio" name="radio03" id="ra06" />
|
||||||
|
<label htmlFor="ra06">全量</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>メモ</th>
|
||||||
|
<td>
|
||||||
|
<div className="input-wrap">
|
||||||
|
<input type="text" className="input-light" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div className="sub-table-footer">
|
||||||
|
<button className="btn-origin grey mr5">商品リスト</button>
|
||||||
|
<button className="btn-origin navy mr5">保存</button>
|
||||||
|
<button className="btn-origin grey">物の削除</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
30
src/components/sub/management/productstate/ProductsList.jsx
Normal file
30
src/components/sub/management/productstate/ProductsList.jsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
export default function ProductsList(){
|
||||||
|
return(
|
||||||
|
<div className="sub-table-box">
|
||||||
|
<div className="table-box-title-wrap">
|
||||||
|
<div className="title-wrap">
|
||||||
|
<h3>商品リスト</h3>
|
||||||
|
<ul className="info-wrap">
|
||||||
|
<li>全体 <span>28</span></li>
|
||||||
|
<li>選択 <span className="red">6</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="left-unit-box">
|
||||||
|
<div className="select-box mr5" style={{width : '110px'}}>
|
||||||
|
<select className="select-light black" name="" id="">
|
||||||
|
<option>最近修正日</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="select-box" style={{width : '80px'}}>
|
||||||
|
<select className="select-light black" name="" id="">
|
||||||
|
<option>100</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="gird-table-wrap">
|
||||||
|
gird
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
130
src/components/sub/management/productstate/PropertyStatus.jsx
Normal file
130
src/components/sub/management/productstate/PropertyStatus.jsx
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
import SingleDatePicker from "@/components/common/datepicker/SingleDatePicker";
|
||||||
|
|
||||||
|
export default function PropertyStatus(){
|
||||||
|
return(
|
||||||
|
<div className="sub-table-box">
|
||||||
|
<div className="table-box-title-wrap">
|
||||||
|
<div className="title-wrap">
|
||||||
|
<h3>物件状況</h3>
|
||||||
|
</div>
|
||||||
|
<div className="left-unit-box">
|
||||||
|
<button className="btn-origin navy mr5">照会</button>
|
||||||
|
<button className="btn-origin grey">初期化</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="common-table">
|
||||||
|
<table>
|
||||||
|
<colgroup>
|
||||||
|
<col style={{width : '160px'}}/>
|
||||||
|
<col />
|
||||||
|
<col style={{width : '160px'}}/>
|
||||||
|
<col />
|
||||||
|
<col style={{width : '160px'}}/>
|
||||||
|
<col />
|
||||||
|
</colgroup>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>品番</th>
|
||||||
|
<td>
|
||||||
|
<div className="input-wrap">
|
||||||
|
<input type="text" className="input-light" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<th>販売代理店ID</th>
|
||||||
|
<td>
|
||||||
|
<div className="input-wrap">
|
||||||
|
<input type="text" className="input-light" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<th>商品アドレス</th>
|
||||||
|
<td>
|
||||||
|
<div className="input-wrap">
|
||||||
|
<input type="text" className="input-light" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>商品名</th>
|
||||||
|
<td>
|
||||||
|
<div className="input-wrap">
|
||||||
|
<input type="text" className="input-light" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<th>販売代理店名</th>
|
||||||
|
<td>
|
||||||
|
<div className="input-wrap">
|
||||||
|
<input type="text" className="input-light" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<th>仕様確認可否</th>
|
||||||
|
<td>
|
||||||
|
<div className="radio-wrap">
|
||||||
|
<div className="d-check-radio light mr10">
|
||||||
|
<input type="radio" name="radio01" id="ra01" />
|
||||||
|
<label htmlFor="ra01">All</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-radio light mr10">
|
||||||
|
<input type="radio" name="radio01" id="ra02" />
|
||||||
|
<label htmlFor="ra02">仕様確認</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-radio light">
|
||||||
|
<input type="radio" name="radio01" id="ra03 " />
|
||||||
|
<label htmlFor="ra03 ">仕様未確認 </label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>担当者</th>
|
||||||
|
<td>
|
||||||
|
<div className="input-wrap">
|
||||||
|
<input type="text" className="input-light" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<th>見積もり</th>
|
||||||
|
<td>
|
||||||
|
<div className="input-wrap">
|
||||||
|
<input type="text" className="input-light" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<th>2次点の選択</th>
|
||||||
|
<td>
|
||||||
|
<div className="select-wrap">
|
||||||
|
<select className="select-light" name="" id="" >
|
||||||
|
<option>販売代理店リスト</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>期間検索</th>
|
||||||
|
<td colSpan={5}>
|
||||||
|
<div className="form-flex-wrap">
|
||||||
|
<div className="radio-wrap">
|
||||||
|
<div className="d-check-radio light mr10">
|
||||||
|
<input type="radio" name="radio02" id="ra04" />
|
||||||
|
<label htmlFor="ra04">更新日</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-radio light">
|
||||||
|
<input type="radio" name="radio02" id="ra05" />
|
||||||
|
<label htmlFor="ra05">登録日</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="date-picker-wrap">
|
||||||
|
<div className="date-picker" style={{width: '244px'}}>
|
||||||
|
<SingleDatePicker/>
|
||||||
|
</div>
|
||||||
|
<span> ~ </span>
|
||||||
|
<div className="date-picker" style={{width: '400px'}}>
|
||||||
|
<SingleDatePicker/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -387,3 +387,224 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// sub-page
|
||||||
|
.sub-header{
|
||||||
|
position: fixed;
|
||||||
|
top: 46px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 46px;
|
||||||
|
border-bottom: 1px solid #000;
|
||||||
|
background: #2C2C2C;
|
||||||
|
z-index: 999;
|
||||||
|
.sub-header-inner{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 100px;
|
||||||
|
.sub-header-title-wrap{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.title-item{
|
||||||
|
position: relative;
|
||||||
|
padding: 0 24px;
|
||||||
|
a{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.icon{
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
margin-right: 8px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
&.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 1px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
}
|
||||||
|
&:first-child{
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
&:last-child{
|
||||||
|
padding-right: 0;
|
||||||
|
&:after{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sub-header-title{
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.sub-header-location{
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.location-item{
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
span{
|
||||||
|
display: flex;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #AAA;
|
||||||
|
font-weight: normal;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 6px;
|
||||||
|
background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center;
|
||||||
|
}
|
||||||
|
&:first-child{
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
&:last-child{
|
||||||
|
padding-right: 0;
|
||||||
|
span{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
&:after{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// sub content
|
||||||
|
.sub-content{
|
||||||
|
padding-top: 46px;
|
||||||
|
.sub-content-inner{
|
||||||
|
max-width: 1720px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 24px;
|
||||||
|
.sub-content-box{
|
||||||
|
margin-bottom: 20px;
|
||||||
|
&:last-child{
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sub-table-box{
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #E9EAED;
|
||||||
|
background: #FFF;
|
||||||
|
box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
|
||||||
|
.table-box-title-wrap{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
.title-wrap{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
h3{
|
||||||
|
display: block;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #101010;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: 14px;
|
||||||
|
}
|
||||||
|
.info-wrap{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
li{
|
||||||
|
position: relative;
|
||||||
|
padding: 0 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #101010;
|
||||||
|
font-weight: normal;
|
||||||
|
span{
|
||||||
|
font-weight: 600;
|
||||||
|
&.red{
|
||||||
|
color: #E23D70;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 1px;
|
||||||
|
height: 11px;
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
}
|
||||||
|
&:first-child{padding-left: 0;}
|
||||||
|
&:last-child{padding-right: 0;&::after{display: none;}}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left-unit-box{
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.promise-gudie{
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #101010;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.important{
|
||||||
|
color: #f00;
|
||||||
|
}
|
||||||
|
.sub-table-footer{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infomation-box-wrap{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
.sub-table-box{
|
||||||
|
flex: 1 ;
|
||||||
|
}
|
||||||
|
.info-title{
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #344356;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.info-inner{
|
||||||
|
position: relative;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #344356;
|
||||||
|
.copy-ico{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background: url(../../public/static/images/sub/copy_ico.svg)no-repeat center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -2,7 +2,10 @@
|
|||||||
max-width: 1600px;
|
max-width: 1600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding-bottom: 100px;
|
padding-bottom: 100px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
.input-wrap{
|
.input-wrap{
|
||||||
|
width: 33.333%;
|
||||||
padding: 50px 50px 0;
|
padding: 50px 50px 0;
|
||||||
h1{
|
h1{
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
@ -33,4 +36,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.flx{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
max-width: 1600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
@ -222,7 +222,7 @@ footer{
|
|||||||
.footer-inner{
|
.footer-inner{
|
||||||
max-width: 1400px;
|
max-width: 1400px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 45px 0;
|
padding: 35px 0;
|
||||||
span{
|
span{
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
|||||||
@ -55,6 +55,7 @@ q:before, q:after {
|
|||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
table {
|
table {
|
||||||
|
width: 100%;
|
||||||
border-collapse: separate;
|
border-collapse: separate;
|
||||||
border-spacing:0;
|
border-spacing:0;
|
||||||
border:0 none;
|
border:0 none;
|
||||||
@ -126,6 +127,16 @@ button{
|
|||||||
font-family: 'Pretendard', sans-serif !important;
|
font-family: 'Pretendard', sans-serif !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// margin
|
||||||
|
.mt5{margin-top: 5px !important;}
|
||||||
|
.mt10{margin-top: 10px !important;}
|
||||||
|
.mb5{margin-bottom: 5px !important;}
|
||||||
|
.mb10{margin-bottom: 10px !important;}
|
||||||
|
.mr5{margin-right: 5px !important;}
|
||||||
|
.mr10{margin-right: 10px !important;}
|
||||||
|
.ml5{margin-left: 5px !important;}
|
||||||
|
.ml10{margin-left: 10px !important;}
|
||||||
|
|
||||||
// button
|
// button
|
||||||
.btn-frame{
|
.btn-frame{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -198,6 +209,30 @@ button{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-origin{
|
||||||
|
display: inline-block;
|
||||||
|
height: 30px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: #101010;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
|
transition: all .15s ease-in-out;
|
||||||
|
&.navy{
|
||||||
|
background-color: #304961;
|
||||||
|
&:hover{
|
||||||
|
background-color: #1083E3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.grey{
|
||||||
|
background-color: #94A0AD;
|
||||||
|
&:hover{
|
||||||
|
background-color: #607F9A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// select
|
// select
|
||||||
.sort-select{
|
.sort-select{
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -268,6 +303,31 @@ button{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select-light{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
|
||||||
|
background-size: 10px 6px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
padding: 0 30px 0 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #45576F;
|
||||||
|
font-family: 'Noto Sans JP', sans-serif;
|
||||||
|
cursor: pointer;
|
||||||
|
&:disabled{
|
||||||
|
opacity: 1;
|
||||||
|
background-color: #FAFAFA;
|
||||||
|
color: #999;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
&.black{
|
||||||
|
color: #101010;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// input
|
// input
|
||||||
.form-input{
|
.form-input{
|
||||||
label{
|
label{
|
||||||
@ -292,6 +352,7 @@ input[type=text]{
|
|||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
letter-spacing: 0px;
|
letter-spacing: 0px;
|
||||||
&::placeholder{
|
&::placeholder{
|
||||||
|
opacity: 1;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
letter-spacing: 0px;
|
letter-spacing: 0px;
|
||||||
}
|
}
|
||||||
@ -299,35 +360,28 @@ input[type=text]{
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
&.input-light{
|
||||||
|
display: block;
|
||||||
// date-picker
|
width: 100%;
|
||||||
.single-date{
|
height: 30px;
|
||||||
input{
|
padding: 0 10px;
|
||||||
|
border: 1px solid #eee;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
color: #fff;
|
background-color: #fff;
|
||||||
font-size: 12px;
|
font-family: 'Noto Sans JP', sans-serif;
|
||||||
font-family: 'Pretendard', sans-serif;
|
font-size: 13px;
|
||||||
background-color: #313131;
|
color: #45576F;
|
||||||
}
|
font-weight: normal;
|
||||||
}
|
transition: border-color .17s ease-in-out;
|
||||||
.range-date{
|
&:read-only{
|
||||||
input{
|
background-color: #FAFAFA;
|
||||||
border-radius: 2px;
|
color: #999999;
|
||||||
color: #fff;
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: 'Pretendard', sans-serif;
|
|
||||||
background-color: #313131;
|
|
||||||
}
|
|
||||||
.react-datepicker__input-container{
|
|
||||||
button{
|
|
||||||
&:after{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// check-btn
|
// check-btn
|
||||||
.check-btn{
|
.check-btn{
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -422,10 +476,12 @@ input[type=text]{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// sort-main-radio
|
// radio
|
||||||
.d-check-radio {
|
.d-check-radio,
|
||||||
|
.d-check-box{
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
input[type=checkbox],
|
||||||
input[type=radio]{
|
input[type=radio]{
|
||||||
position: static;
|
position: static;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
@ -446,6 +502,16 @@ input[type=text]{
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
&.light{
|
||||||
|
label{
|
||||||
|
color: #45576F;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-check-radio {
|
||||||
|
label{
|
||||||
&::before{
|
&::before{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
content: "";
|
content: "";
|
||||||
@ -472,8 +538,8 @@ input[type=text]{
|
|||||||
width: 9px;
|
width: 9px;
|
||||||
height: 9px;
|
height: 9px;
|
||||||
top:6px;
|
top:6px;
|
||||||
left: 4.8px;
|
left: 4px;
|
||||||
margin-left: -.8rem;
|
margin-left: -12px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
@ -485,8 +551,87 @@ input[type=text]{
|
|||||||
transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
|
transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.light{
|
||||||
|
label{
|
||||||
|
&:before{
|
||||||
|
border-color: #D6D6D7;
|
||||||
|
}
|
||||||
|
&:after{
|
||||||
|
background-color: #697C8F;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
input[type=radio]:checked + label::after{
|
input[type=radio]:checked + label::after{
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// check-box
|
||||||
|
.d-check-box{
|
||||||
|
label{
|
||||||
|
&::before{
|
||||||
|
cursor: pointer;
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
width: 17px;
|
||||||
|
height: 17px;
|
||||||
|
top: 2px;
|
||||||
|
left: 0;
|
||||||
|
margin-left: -12px;
|
||||||
|
border: 1px solid #D6D6D7;
|
||||||
|
background-color: transparent;
|
||||||
|
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||||
|
}
|
||||||
|
&:after{
|
||||||
|
cursor: pointer;
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
top:0;
|
||||||
|
left: 0;
|
||||||
|
margin-left: -.8rem;
|
||||||
|
transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input[type=checkbox]:checked + label::after{
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
left: -1px;
|
||||||
|
width: 5px;
|
||||||
|
height: 8px;
|
||||||
|
border: 2px solid #697C8F;
|
||||||
|
border-left: none;
|
||||||
|
border-top: none;
|
||||||
|
transform: translate(7.75px,4.5px) rotate(45deg);
|
||||||
|
-ms-transform: translate(7.75px,4.5px) rotate(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// date-picker
|
||||||
|
.date-picker{
|
||||||
|
svg{display: none;}
|
||||||
|
.react-datepicker-wrapper{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
input[type=text]{
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 0 34px 0 10px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #45576F;
|
||||||
|
font-weight: normal;
|
||||||
|
font-family: 'Noto Sans JP', sans-serif;
|
||||||
|
background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
|
||||||
|
background-size: 14px 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
93
src/styles/_table.scss
Normal file
93
src/styles/_table.scss
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
@mixin flexbox(){
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.common-table{
|
||||||
|
table{
|
||||||
|
border: 1px solid #ECF0F4;
|
||||||
|
border-radius: 3px;
|
||||||
|
border-collapse:collapse;
|
||||||
|
tbody{
|
||||||
|
|
||||||
|
th{
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #344356;
|
||||||
|
padding: 14px 12px;
|
||||||
|
border: 1px solid #ECF0F4 ;
|
||||||
|
background-color: #F7F9FA;
|
||||||
|
}
|
||||||
|
td{
|
||||||
|
padding: 0px 9px;
|
||||||
|
border: 1px solid #ECF0F4 ;
|
||||||
|
.radio-wrap{
|
||||||
|
@include flexbox;
|
||||||
|
}
|
||||||
|
.form-flex-wrap{
|
||||||
|
@include flexbox;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
.date-picker-wrap{
|
||||||
|
@include flexbox;
|
||||||
|
span{
|
||||||
|
margin: 0 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infomation-table{
|
||||||
|
table{
|
||||||
|
border-top: 1px solid #DEE3EA;
|
||||||
|
border-bottom: 1px solid #DEE3EA;
|
||||||
|
border-collapse:collapse;
|
||||||
|
tbody{
|
||||||
|
tr{
|
||||||
|
th{
|
||||||
|
font-size: 13px;
|
||||||
|
color: #344356;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 18px 0;
|
||||||
|
border-bottom: 1px solid #F4F4F7;
|
||||||
|
.title{
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
td{
|
||||||
|
padding: 0 0 0 15px;
|
||||||
|
border-bottom: 1px solid #F4F4F7;
|
||||||
|
|
||||||
|
.guide{
|
||||||
|
font-size: 13px;
|
||||||
|
color: #697C8F;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
font-size: 13px;
|
||||||
|
color: #697C8F;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:last-child{
|
||||||
|
th,td{border-bottom: none;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flx-box{
|
||||||
|
@include flexbox;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tooltips{
|
||||||
|
display: block;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url(../../public/static/images/sub/tooltips.svg)no-repeat center;
|
||||||
|
background-size: cover;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,2 +1,3 @@
|
|||||||
@import '_contents.scss';
|
@import '_contents.scss';
|
||||||
@import '_modal.scss';
|
@import '_modal.scss';
|
||||||
|
@import '_table.scss';
|
||||||
Loading…
x
Reference in New Issue
Block a user