- 외벽선 작성 모달 수정
- icon 추가 및 스타일 수정
This commit is contained in:
minsik
parent
8779444b9b
commit
fd08fedf97
8
public/static/images/canvas/alert_close.svg
Normal file
8
public/static/images/canvas/alert_close.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon">
|
||||
<circle id="Ellipse 2012" cx="10" cy="10" r="9.5" fill="white" stroke="#272727"/>
|
||||
<g id="elements">
|
||||
<path id="Vector" d="M12.9994 13L7 7M7.00064 13L13 7" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 364 B |
8
public/static/images/canvas/outline_cul.svg
Normal file
8
public/static/images/canvas/outline_cul.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="70" height="59" viewBox="0 0 70 59" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="35" y="15" width="1" height="30" fill="white"/>
|
||||
<rect x="21" y="29" width="30" height="1" fill="white"/>
|
||||
<path d="M32.5195 4.11523C33.0423 4.11523 33.5239 4.2334 33.9644 4.46973C34.4084 4.70247 34.77 5.09635 35.0493 5.65137C35.3322 6.2028 35.4736 6.92969 35.4736 7.83203C35.4736 8.73079 35.3501 9.50065 35.103 10.1416C34.8595 10.7826 34.5086 11.2713 34.0503 11.6079C33.5955 11.9409 33.0566 12.1074 32.4336 12.1074C31.9645 12.1074 31.542 12.0179 31.166 11.8389C30.7936 11.6562 30.4893 11.4038 30.2529 11.0815C30.0202 10.7557 29.8734 10.3815 29.8125 9.95898H30.9834C31.0658 10.2992 31.2323 10.5713 31.4829 10.7754C31.7371 10.9759 32.054 11.0762 32.4336 11.0762C32.8311 11.0762 33.1712 10.9652 33.4541 10.7432C33.7406 10.5176 33.959 10.1935 34.1094 9.771C34.2633 9.34489 34.3421 8.83822 34.3457 8.25098H34.249C34.0378 8.5804 33.7567 8.83822 33.4058 9.02441C33.0584 9.21061 32.6771 9.30371 32.2617 9.30371C31.7998 9.30371 31.3773 9.1945 30.9941 8.97607C30.611 8.75765 30.3066 8.45329 30.0811 8.06299C29.859 7.67269 29.748 7.23405 29.748 6.74707C29.748 6.25651 29.8626 5.81071 30.0918 5.40967C30.3245 5.00863 30.6504 4.69352 31.0693 4.46436C31.4919 4.23161 31.9753 4.11523 32.5195 4.11523ZM32.541 5.10352C32.2331 5.10352 31.9538 5.17692 31.7031 5.32373C31.4525 5.46696 31.2555 5.6639 31.1123 5.91455C30.9691 6.16162 30.8975 6.43197 30.8975 6.72559C30.8975 7.02279 30.9673 7.29492 31.1069 7.54199C31.2466 7.78906 31.4399 7.98421 31.687 8.12744C31.9341 8.26709 32.2116 8.33691 32.5195 8.33691C32.8239 8.33691 33.1032 8.26172 33.3574 8.11133C33.6117 7.96094 33.8122 7.76221 33.959 7.51514C34.1094 7.26449 34.1846 6.99772 34.1846 6.71484C34.1846 6.43555 34.113 6.17236 33.9697 5.92529C33.8301 5.67822 33.6331 5.47949 33.3789 5.3291C33.1283 5.17871 32.849 5.10352 32.541 5.10352ZM39.4268 12.1074C38.8288 12.1074 38.3149 11.9517 37.8853 11.6401C37.4591 11.3286 37.1333 10.8739 36.9077 10.2759C36.6821 9.67432 36.5693 8.9528 36.5693 8.11133C36.5693 7.27702 36.6821 6.56087 36.9077 5.96289C37.1369 5.36133 37.4663 4.90299 37.896 4.58789C38.3257 4.27279 38.8359 4.11523 39.4268 4.11523C40.0176 4.11523 40.5278 4.27279 40.9575 4.58789C41.3872 4.90299 41.7148 5.36133 41.9404 5.96289C42.1696 6.56087 42.2842 7.27702 42.2842 8.11133C42.2842 8.9528 42.1714 9.67253 41.9458 10.2705C41.7202 10.8685 41.3926 11.325 40.9629 11.6401C40.5332 11.9517 40.0212 12.1074 39.4268 12.1074ZM39.4268 11.0869C39.7777 11.0869 40.0785 10.9741 40.3291 10.7485C40.5798 10.5194 40.7713 10.1828 40.9038 9.73877C41.0363 9.29476 41.1025 8.75228 41.1025 8.11133C41.1025 7.47396 41.0345 6.93148 40.8984 6.48389C40.766 6.03271 40.5744 5.69255 40.3237 5.46338C40.0731 5.23063 39.7741 5.11426 39.4268 5.11426C39.0794 5.11426 38.7804 5.23063 38.5298 5.46338C38.2791 5.69255 38.0858 6.03271 37.9497 6.48389C37.8172 6.93148 37.751 7.47396 37.751 8.11133C37.751 8.75228 37.8172 9.29476 37.9497 9.73877C38.0822 10.1828 38.2738 10.5194 38.5244 10.7485C38.7751 10.9741 39.0758 11.0869 39.4268 11.0869Z" fill="white"/>
|
||||
<path d="M28.4028 52.6055H24.9546V51.6172H28.4028V52.6055ZM32.4312 48.1152C32.9539 48.1152 33.4355 48.2334 33.876 48.4697C34.32 48.7025 34.6816 49.0964 34.9609 49.6514C35.2438 50.2028 35.3853 50.9297 35.3853 51.832C35.3853 52.7308 35.2617 53.5007 35.0146 54.1416C34.7712 54.7826 34.4202 55.2713 33.9619 55.6079C33.5072 55.9409 32.9683 56.1074 32.3452 56.1074C31.8761 56.1074 31.4536 56.0179 31.0776 55.8389C30.7052 55.6562 30.4009 55.4038 30.1646 55.0815C29.9318 54.7557 29.785 54.3815 29.7241 53.959H30.895C30.9774 54.2992 31.1439 54.5713 31.3945 54.7754C31.6488 54.9759 31.9657 55.0762 32.3452 55.0762C32.7427 55.0762 33.0828 54.9652 33.3657 54.7432C33.6522 54.5176 33.8706 54.1935 34.021 53.771C34.175 53.3449 34.2537 52.8382 34.2573 52.251H34.1606C33.9494 52.5804 33.6683 52.8382 33.3174 53.0244C32.9701 53.2106 32.5887 53.3037 32.1733 53.3037C31.7114 53.3037 31.2889 53.1945 30.9058 52.9761C30.5226 52.7576 30.2183 52.4533 29.9927 52.063C29.7707 51.6727 29.6597 51.234 29.6597 50.7471C29.6597 50.2565 29.7743 49.8107 30.0034 49.4097C30.2362 49.0086 30.562 48.6935 30.981 48.4644C31.4035 48.2316 31.8869 48.1152 32.4312 48.1152ZM32.4526 49.1035C32.1447 49.1035 31.8654 49.1769 31.6147 49.3237C31.3641 49.467 31.1672 49.6639 31.0239 49.9146C30.8807 50.1616 30.8091 50.432 30.8091 50.7256C30.8091 51.0228 30.8789 51.2949 31.0186 51.542C31.1582 51.7891 31.3516 51.9842 31.5986 52.1274C31.8457 52.2671 32.1232 52.3369 32.4312 52.3369C32.7355 52.3369 33.0148 52.2617 33.269 52.1113C33.5233 51.9609 33.7238 51.7622 33.8706 51.5151C34.021 51.2645 34.0962 50.9977 34.0962 50.7148C34.0962 50.4355 34.0246 50.1724 33.8813 49.9253C33.7417 49.6782 33.5448 49.4795 33.2905 49.3291C33.0399 49.1787 32.7606 49.1035 32.4526 49.1035ZM39.3384 56.1074C38.7404 56.1074 38.2266 55.9517 37.7969 55.6401C37.3708 55.3286 37.0449 54.8739 36.8193 54.2759C36.5938 53.6743 36.481 52.9528 36.481 52.1113C36.481 51.277 36.5938 50.5609 36.8193 49.9629C37.0485 49.3613 37.3779 48.903 37.8076 48.5879C38.2373 48.2728 38.7476 48.1152 39.3384 48.1152C39.9292 48.1152 40.4395 48.2728 40.8691 48.5879C41.2988 48.903 41.6265 49.3613 41.8521 49.9629C42.0812 50.5609 42.1958 51.277 42.1958 52.1113C42.1958 52.9528 42.083 53.6725 41.8574 54.2705C41.6318 54.8685 41.3042 55.325 40.8745 55.6401C40.4448 55.9517 39.9328 56.1074 39.3384 56.1074ZM39.3384 55.0869C39.6893 55.0869 39.9901 54.9741 40.2407 54.7485C40.4914 54.5194 40.6829 54.1828 40.8154 53.7388C40.9479 53.2948 41.0142 52.7523 41.0142 52.1113C41.0142 51.474 40.9461 50.9315 40.8101 50.4839C40.6776 50.0327 40.486 49.6925 40.2354 49.4634C39.9847 49.2306 39.6857 49.1143 39.3384 49.1143C38.991 49.1143 38.6921 49.2306 38.4414 49.4634C38.1908 49.6925 37.9974 50.0327 37.8613 50.4839C37.7288 50.9315 37.6626 51.474 37.6626 52.1113C37.6626 52.7523 37.7288 53.2948 37.8613 53.7388C37.9938 54.1828 38.1854 54.5194 38.436 54.7485C38.6867 54.9741 38.9875 55.0869 39.3384 55.0869Z" fill="white"/>
|
||||
<path d="M57.3945 34.1074C56.7965 34.1074 56.2827 33.9517 55.853 33.6401C55.4269 33.3286 55.1011 32.8739 54.8755 32.2759C54.6499 31.6743 54.5371 30.9528 54.5371 30.1113C54.5371 29.277 54.6499 28.5609 54.8755 27.9629C55.1047 27.3613 55.4341 26.903 55.8638 26.5879C56.2935 26.2728 56.8037 26.1152 57.3945 26.1152C57.9854 26.1152 58.4956 26.2728 58.9253 26.5879C59.355 26.903 59.6826 27.3613 59.9082 27.9629C60.1374 28.5609 60.252 29.277 60.252 30.1113C60.252 30.9528 60.1392 31.6725 59.9136 32.2705C59.688 32.8685 59.3604 33.325 58.9307 33.6401C58.501 33.9517 57.9889 34.1074 57.3945 34.1074ZM57.3945 33.0869C57.7454 33.0869 58.0462 32.9741 58.2969 32.7485C58.5475 32.5194 58.7391 32.1828 58.8716 31.7388C59.0041 31.2948 59.0703 30.7523 59.0703 30.1113C59.0703 29.474 59.0023 28.9315 58.8662 28.4839C58.7337 28.0327 58.5422 27.6925 58.2915 27.4634C58.0409 27.2306 57.7419 27.1143 57.3945 27.1143C57.0472 27.1143 56.7482 27.2306 56.4976 27.4634C56.2469 27.6925 56.0535 28.0327 55.9175 28.4839C55.785 28.9315 55.7188 29.474 55.7188 30.1113C55.7188 30.7523 55.785 31.2948 55.9175 31.7388C56.05 32.1828 56.2415 32.5194 56.4922 32.7485C56.7428 32.9741 57.0436 33.0869 57.3945 33.0869Z" fill="white"/>
|
||||
<path d="M3.12207 34H1.92969V27.4043H1.88672L0.0283203 28.6182V27.4902L1.96191 26.2227H3.12207V34ZM7.81641 34.1074C7.26139 34.1074 6.76546 34.0143 6.32861 33.8281C5.89535 33.6419 5.55697 33.3841 5.31348 33.0547C5.07357 32.7217 4.9554 32.3457 4.95898 31.9268C4.9554 31.6009 5.02523 31.2983 5.16846 31.019C5.31169 30.7362 5.50684 30.5034 5.75391 30.3208C6.00456 30.1346 6.28027 30.0182 6.58105 29.9717V29.9287C6.31966 29.8678 6.08691 29.755 5.88281 29.5903C5.68229 29.422 5.52653 29.2161 5.41553 28.9727C5.30452 28.7292 5.24902 28.4678 5.24902 28.1885C5.24902 27.7946 5.36003 27.4401 5.58203 27.125C5.80404 26.8099 6.11019 26.5628 6.50049 26.3838C6.89079 26.2048 7.32943 26.1152 7.81641 26.1152C8.2998 26.1152 8.73486 26.2048 9.12158 26.3838C9.51188 26.5628 9.81624 26.8099 10.0347 27.125C10.2567 27.4401 10.3695 27.7946 10.373 28.1885C10.3695 28.4678 10.3104 28.7292 10.1958 28.9727C10.0848 29.2161 9.92904 29.422 9.72852 29.5903C9.52799 29.755 9.29883 29.8678 9.04102 29.9287V29.9717C9.33822 30.0182 9.61035 30.1346 9.85742 30.3208C10.1081 30.5034 10.305 30.7362 10.4482 31.019C10.5951 31.2983 10.6702 31.6009 10.6738 31.9268C10.6702 32.3457 10.5467 32.7217 10.3032 33.0547C10.0597 33.3841 9.72135 33.6419 9.28809 33.8281C8.85482 34.0143 8.36426 34.1074 7.81641 34.1074ZM7.81641 33.1299C8.14941 33.1299 8.43945 33.0762 8.68652 32.9688C8.93717 32.8613 9.13053 32.7109 9.2666 32.5176C9.40267 32.3206 9.4707 32.0951 9.4707 31.8408C9.4707 31.5758 9.39909 31.3377 9.25586 31.1265C9.11263 30.9152 8.91569 30.7505 8.66504 30.6323C8.41439 30.5142 8.13151 30.4551 7.81641 30.4551C7.49772 30.4551 7.21126 30.5142 6.95703 30.6323C6.7028 30.7505 6.50407 30.9152 6.36084 31.1265C6.22119 31.3377 6.15495 31.5758 6.16211 31.8408C6.15495 32.0951 6.21761 32.3188 6.3501 32.5122C6.48258 32.7056 6.67415 32.8577 6.9248 32.9688C7.17904 33.0762 7.47624 33.1299 7.81641 33.1299ZM7.81641 29.5205C8.08496 29.5205 8.32487 29.4704 8.53613 29.3701C8.75098 29.2663 8.91748 29.1213 9.03564 28.9351C9.15381 28.7489 9.21289 28.5358 9.21289 28.2959C9.21289 28.0596 9.15381 27.8501 9.03564 27.6675C8.91748 27.4813 8.75277 27.3381 8.5415 27.2378C8.33024 27.134 8.08854 27.082 7.81641 27.082C7.53353 27.082 7.28467 27.1322 7.06982 27.2324C6.85498 27.3327 6.68848 27.4759 6.57031 27.6621C6.45573 27.8447 6.39844 28.056 6.39844 28.2959C6.39844 28.5358 6.45931 28.7489 6.58105 28.9351C6.7028 29.1213 6.87109 29.2663 7.08594 29.3701C7.30078 29.4704 7.54427 29.5205 7.81641 29.5205ZM14.6055 34.1074C14.0075 34.1074 13.4937 33.9517 13.064 33.6401C12.6379 33.3286 12.312 32.8739 12.0864 32.2759C11.8608 31.6743 11.748 30.9528 11.748 30.1113C11.748 29.277 11.8608 28.5609 12.0864 27.9629C12.3156 27.3613 12.645 26.903 13.0747 26.5879C13.5044 26.2728 14.0146 26.1152 14.6055 26.1152C15.1963 26.1152 15.7065 26.2728 16.1362 26.5879C16.5659 26.903 16.8936 27.3613 17.1191 27.9629C17.3483 28.5609 17.4629 29.277 17.4629 30.1113C17.4629 30.9528 17.3501 31.6725 17.1245 32.2705C16.8989 32.8685 16.5713 33.325 16.1416 33.6401C15.7119 33.9517 15.1999 34.1074 14.6055 34.1074ZM14.6055 33.0869C14.9564 33.0869 15.2572 32.9741 15.5078 32.7485C15.7585 32.5194 15.95 32.1828 16.0825 31.7388C16.215 31.2948 16.2812 30.7523 16.2812 30.1113C16.2812 29.474 16.2132 28.9315 16.0771 28.4839C15.9447 28.0327 15.7531 27.6925 15.5024 27.4634C15.2518 27.2306 14.9528 27.1143 14.6055 27.1143C14.2581 27.1143 13.9591 27.2306 13.7085 27.4634C13.4578 27.6925 13.2645 28.0327 13.1284 28.4839C12.9959 28.9315 12.9297 29.474 12.9297 30.1113C12.9297 30.7523 12.9959 31.2948 13.1284 31.7388C13.2609 32.1828 13.4525 32.5194 13.7031 32.7485C13.9538 32.9741 14.2546 33.0869 14.6055 33.0869Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
4
public/static/images/canvas/pop_tip.svg
Normal file
4
public/static/images/canvas/pop_tip.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" stroke="white"/>
|
||||
<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="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 603 B |
3
public/static/images/canvas/reset_ico.svg
Normal file
3
public/static/images/canvas/reset_ico.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Vector" d="M10.0046 1V2.5661C10.0046 2.71303 9.82091 2.77954 9.72684 2.66667C8.81131 1.64375 7.48083 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11C8.76142 11 11 8.76142 11 6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 381 B |
3
public/static/images/common/select_dark_arr.svg
Normal file
3
public/static/images/common/select_dark_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 4" d="M1.5 1.25L5 4.75L8.5 1.25" stroke="white" stroke-width="1.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 187 B |
9
public/static/images/sub/simulation_guide.svg
Normal file
9
public/static/images/sub/simulation_guide.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon">
|
||||
<circle id="Ellipse 2012" cx="20" cy="20" r="20" fill="#5B7385"/>
|
||||
<g id="elements">
|
||||
<path id="Vector" d="M29.9598 18.9707C30.0134 19.8009 30.0134 20.6607 29.9598 21.4909C29.6856 25.7332 26.3536 29.1125 22.1706 29.3905C20.7435 29.4854 19.2536 29.4852 17.8294 29.3905C17.339 29.3579 16.8044 29.2409 16.344 29.0513C15.8318 28.8403 15.5756 28.7348 15.4454 28.7508C15.3153 28.7668 15.1264 28.9061 14.7487 29.1846C14.0827 29.6757 13.2437 30.0285 11.9994 29.9982C11.3703 29.9829 11.0557 29.9752 10.9148 29.7351C10.774 29.495 10.9494 29.1626 11.3002 28.4978C11.7867 27.5758 12.095 26.5203 11.6279 25.6746C10.8234 24.4666 10.1401 23.036 10.0402 21.4909C9.98659 20.6607 9.98659 19.8009 10.0402 18.9707C10.3144 14.7284 13.6464 11.3491 17.8294 11.0711C19.0318 10.9911 19.2812 10.9786 20.5 11.0337" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Ellipse 351" d="M30 13.5C30 15.433 28.433 17 26.5 17C24.567 17 23 15.433 23 13.5C23 11.567 24.567 10 26.5 10C28.433 10 30 11.567 30 13.5Z" stroke="white" stroke-width="1.5"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -9,8 +9,8 @@ import '@/styles/contents.scss'
|
||||
import CanvasMenu from '@/components/floor-plan/CanvasMenu'
|
||||
import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
|
||||
import CanvasLayout from '@/components/floor-plan/CanvasLayout'
|
||||
import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall'
|
||||
import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
|
||||
import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting'
|
||||
|
||||
export default function FloorPlan() {
|
||||
const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
|
||||
@ -84,7 +84,8 @@ export default function FloorPlan() {
|
||||
<div className="canvas-content">
|
||||
<CanvasLayout />
|
||||
{showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}
|
||||
{showOutlineModal && <OuterLineWall {...outlineProps} />}
|
||||
{/*{showOutlineModal && <OuterLineWall {...outlineProps} />}*/}
|
||||
{showOutlineModal && <WallLineSetting {...outlineProps} />}
|
||||
{showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
33
src/components/floor-plan/modal/outerlinesetting/Angle.jsx
Normal file
33
src/components/floor-plan/modal/outerlinesetting/Angle.jsx
Normal file
@ -0,0 +1,33 @@
|
||||
import Image from 'next/image'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
|
||||
export default function Angle() {
|
||||
const { getMessage } = useMessage()
|
||||
return (
|
||||
<>
|
||||
<div className="outline-wrap">
|
||||
<div className="cul-wrap">
|
||||
<div className="outline-box">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
|
||||
<div className="input-grid" style={{ width: '63px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={4} />
|
||||
</div>
|
||||
<button className="reset-btn"></button>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('modal.cover.outline.arrow')}</span>
|
||||
<div className="input-grid" style={{ width: '63px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={5000} />
|
||||
</div>
|
||||
<button className="reset-btn"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cul-box">
|
||||
<Image src="/static/images/canvas/outline_cul.svg" alt="react" width={70} height={59} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
|
||||
export default function Diagonal() {
|
||||
const { getMessage } = useMessage()
|
||||
return (
|
||||
<>
|
||||
<div className="outline-wrap">
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">
|
||||
{getMessage('modal.cover.outline.diagonal')}
|
||||
<br />
|
||||
{getMessage('modal.cover.outline.length')}
|
||||
</span>
|
||||
<div className="input-grid" style={{ width: '63px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={1000} />
|
||||
</div>
|
||||
<button className="reset-btn"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
|
||||
<div className="input-grid" style={{ width: '63px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={5000} />
|
||||
</div>
|
||||
<button className="reset-btn"></button>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span> {getMessage('modal.cover.outline.arrow')}</span>
|
||||
<div className="grid-direction">
|
||||
<button className="direction up"></button>
|
||||
<button className="direction down act"></button>
|
||||
<button className="direction left"></button>
|
||||
<button className="direction right"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
|
||||
<div className="input-grid" style={{ width: '98px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={8000} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span> {getMessage('modal.cover.outline.arrow')}</span>
|
||||
<div className="grid-direction">
|
||||
<button className="direction up"></button>
|
||||
<button className="direction down act"></button>
|
||||
<button className="direction left"></button>
|
||||
<button className="direction right"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
|
||||
export default function DoublePitch() {
|
||||
const { getMessage } = useMessage()
|
||||
return (
|
||||
<>
|
||||
<div className="outline-wrap">
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
|
||||
<div className="input-grid" style={{ width: '63px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={4} />
|
||||
</div>
|
||||
<button className="reset-btn"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
|
||||
<div className="input-grid" style={{ width: '63px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={5000} />
|
||||
</div>
|
||||
<button className="reset-btn"></button>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span>{getMessage('modal.cover.outline.arrow')}</span>
|
||||
<div className="grid-direction">
|
||||
<button className="direction up"></button>
|
||||
<button className="direction down act"></button>
|
||||
<button className="direction left"></button>
|
||||
<button className="direction right"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-wrap">
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
|
||||
<div className="input-grid" style={{ width: '63px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={6} />
|
||||
</div>
|
||||
<button className="reset-btn"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
|
||||
<div className="input-grid" style={{ width: '63px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={3000} />
|
||||
</div>
|
||||
<button className="reset-btn"></button>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span>{getMessage('modal.cover.outline.arrow')}</span>
|
||||
<div className="grid-direction">
|
||||
<button className="direction up"></button>
|
||||
<button className="direction down act"></button>
|
||||
<button className="direction left"></button>
|
||||
<button className="direction right"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,63 +1,18 @@
|
||||
'use client'
|
||||
|
||||
import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
|
||||
import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
|
||||
import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
|
||||
import { onlyNumberInputChange } from '@/util/input-utils'
|
||||
|
||||
export default function OuterLineWall(props) {
|
||||
const { setShowOutlineModal } = props
|
||||
const { getMessage } = useMessage()
|
||||
const { points, length1, setLength1, length2, setLength2, length1Ref, length2Ref, arrow1, arrow2, type, setType, handleFix, handleRollback } =
|
||||
useOuterLineWall()
|
||||
|
||||
const { length1, setLength1, length1Ref, arrow1, setArrow1 } = useOuterLineWall()
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={{ x: -1390, y: 30 }}>
|
||||
<div className={`modal-pop-wrap ssm mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
|
||||
<button className="modal-close" onClick={() => setShowOutlineModal(false)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="modal-btn-wrap">
|
||||
<button
|
||||
className={`btn-frame modal ${type === OUTER_LINE_TYPE.OUTER_LINE ? 'act' : ''}`}
|
||||
onClick={() => setType(OUTER_LINE_TYPE.OUTER_LINE)}
|
||||
>
|
||||
{getMessage('modal.cover.outline')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn-frame modal ${type === OUTER_LINE_TYPE.RIGHT_ANGLE ? 'act' : ''}`}
|
||||
onClick={() => setType(OUTER_LINE_TYPE.RIGHT_ANGLE)}
|
||||
>
|
||||
{getMessage('modal.cover.outline.right.angle')}
|
||||
</button>
|
||||
<button
|
||||
className={`btn-frame modal ${type === OUTER_LINE_TYPE.LEE_GUBAE ? 'act' : ''}`}
|
||||
onClick={() => setType(OUTER_LINE_TYPE.LEE_GUBAE)}
|
||||
>
|
||||
{getMessage('modal.cover.outline2')}
|
||||
</button>
|
||||
<button className={`btn-frame modal ${type === OUTER_LINE_TYPE.ANGLE ? 'act' : ''}`} onClick={() => setType(OUTER_LINE_TYPE.ANGLE)}>
|
||||
{getMessage('modal.cover.outline.angle')}
|
||||
</button>
|
||||
<button
|
||||
className={`btn-frame modal ${type === OUTER_LINE_TYPE.DIAGONAL_LINE ? 'act' : ''}`}
|
||||
onClick={() => setType(OUTER_LINE_TYPE.DIAGONAL_LINE)}
|
||||
>
|
||||
{getMessage('modal.cover.outline.diagonal')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-check-btn-wrap">
|
||||
<h3 className="check-wrap-title">{getMessage('modal.cover.outline.setting')}</h3>
|
||||
{type === OUTER_LINE_TYPE.OUTER_LINE ? (
|
||||
<div className="outer-line-wrap">
|
||||
<div className="form-input">
|
||||
<label htmlFor="">{getMessage('modal.cover.outline.length')}</label>
|
||||
<div className="outline-wrap">
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
|
||||
<div className="input-grid" style={{ width: '63px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
@ -67,88 +22,18 @@ export default function OuterLineWall(props) {
|
||||
placeholder="3000"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-input">
|
||||
<label htmlFor="">{getMessage('modal.cover.outline.arrow')}</label>
|
||||
<input type="text" readOnly={true} value={arrow1} className="input-origin block" />
|
||||
<button className="reset-btn"></button>
|
||||
</div>
|
||||
</div>
|
||||
) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
|
||||
<div className="outer-line-wrap">
|
||||
<div className="form-input">
|
||||
<label htmlFor="">{getMessage('modal.cover.outline.length')}</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={length1}
|
||||
ref={length1Ref}
|
||||
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
||||
placeholder="3000"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-input">
|
||||
<label htmlFor="">{getMessage('modal.cover.outline.arrow')}</label>
|
||||
<input type="text" readOnly={true} value={arrow1} className="input-origin block" />
|
||||
</div>
|
||||
<div className="form-input">
|
||||
<label htmlFor="">{getMessage('modal.cover.outline.length')}</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={length2}
|
||||
ref={length2Ref}
|
||||
onChange={(e) => onlyNumberInputChange(e, setLength2)}
|
||||
placeholder="3000"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-input">
|
||||
<label htmlFor="">{getMessage('modal.cover.outline.arrow')}</label>
|
||||
<input type="text" readOnly={true} value={arrow2} className="input-origin block" />
|
||||
</div>
|
||||
</div>
|
||||
) : type === OUTER_LINE_TYPE.ANGLE ? (
|
||||
<div className="outer-line-wrap">
|
||||
<div className="form-input">
|
||||
<label htmlFor="">{getMessage('modal.cover.outline.length')}</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={length1}
|
||||
ref={length1Ref}
|
||||
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
||||
placeholder="3000"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-input">
|
||||
<label htmlFor="">{getMessage('modal.cover.outline.angle')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={angle1}
|
||||
ref={angle1Ref}
|
||||
onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
|
||||
className="input-origin block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<div className="flex-check-box for2 btn">
|
||||
<button className={`arr-btn dark ${points.length >= 3 ? 'act' : ''}`} onClick={handleFix}>
|
||||
<span>{getMessage('modal.cover.outline.fix')}</span>
|
||||
</button>
|
||||
<button className={`arr-btn dark ${points.length >= 1 ? 'act' : ''}`} onClick={handleRollback}>
|
||||
<span>{getMessage('modal.cover.outline.rollback')}</span>
|
||||
</button>
|
||||
<button className="arr-btn dark">
|
||||
<span>{getMessage('modal.cover.outline.remove')}</span>
|
||||
</button>
|
||||
<button className="arr-btn dark">
|
||||
<span>{getMessage('modal.cover.outline.select.move')}</span>
|
||||
</button>
|
||||
<div className="outline-form">
|
||||
<span>{getMessage('modal.cover.outline.arrow')}</span>
|
||||
<div className="grid-direction">
|
||||
<button className={`direction up ${arrow1 === '↑' ? 'act' : ''}`} onClick={() => setArrow1('↑')}></button>
|
||||
<button className={`direction down ${arrow1 === '↓' ? 'act' : ''}`} onClick={() => setArrow1('↓')}></button>
|
||||
<button className={`direction left ${arrow1 === '←' ? 'act' : ''}`} onClick={() => setArrow1('←')}></button>
|
||||
<button className={`direction right ${arrow1 === '→' ? 'act' : ''}`} onClick={() => setArrow1('→')}></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
|
||||
export default function RightAngle() {
|
||||
const { getMessage } = useMessage()
|
||||
return (
|
||||
<div className="outline-wrap">
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
|
||||
<div className="input-grid" style={{ width: '63px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={1000} />
|
||||
</div>
|
||||
<button className="reset-btn"></button>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span>{getMessage('modal.cover.outline.arrow')}</span>
|
||||
<div className="grid-direction">
|
||||
<button className="direction up"></button>
|
||||
<button className="direction down act"></button>
|
||||
<button className="direction left"></button>
|
||||
<button className="direction right"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
|
||||
<div className="input-grid" style={{ width: '63px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={1000} />
|
||||
</div>
|
||||
<button className="reset-btn"></button>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span>{getMessage('modal.cover.outline.arrow')}</span>
|
||||
<div className="grid-direction">
|
||||
<button className="direction up"></button>
|
||||
<button className="direction down act"></button>
|
||||
<button className="direction left"></button>
|
||||
<button className="direction right"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,83 @@
|
||||
'use client'
|
||||
|
||||
import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
|
||||
import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
|
||||
import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall'
|
||||
import RightAngle from '@/components/floor-plan/modal/outerlinesetting/RightAngle'
|
||||
import Angle from '@/components/floor-plan/modal/outerlinesetting/Angle'
|
||||
import DoublePitch from '@/components/floor-plan/modal/outerlinesetting/DoublePitch'
|
||||
import Diagonal from '@/components/floor-plan/modal/outerlinesetting/Diagonal'
|
||||
|
||||
export default function WallLineSetting(props) {
|
||||
const { setShowOutlineModal } = props
|
||||
const { getMessage } = useMessage()
|
||||
const { type, setType, handleFix, handleRollback } = useOuterLineWall()
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={{ x: -1390, y: 30 }}>
|
||||
<div className={`modal-pop-wrap r mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
|
||||
<button className="modal-close" onClick={() => setShowOutlineModal(false)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="modal-btn-wrap">
|
||||
<button
|
||||
className={`btn-frame modal ${type === OUTER_LINE_TYPE.OUTER_LINE ? 'act' : ''}`}
|
||||
onClick={() => setType(OUTER_LINE_TYPE.OUTER_LINE)}
|
||||
>
|
||||
{getMessage('modal.cover.outline')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn-frame modal ${type === OUTER_LINE_TYPE.RIGHT_ANGLE ? 'act' : ''}`}
|
||||
onClick={() => setType(OUTER_LINE_TYPE.RIGHT_ANGLE)}
|
||||
>
|
||||
{getMessage('modal.cover.outline.right.angle')}
|
||||
</button>
|
||||
<button
|
||||
className={`btn-frame modal ${type === OUTER_LINE_TYPE.DOUBLE_PITCH ? 'act' : ''}`}
|
||||
onClick={() => setType(OUTER_LINE_TYPE.DOUBLE_PITCH)}
|
||||
>
|
||||
{getMessage('modal.cover.outline2')}
|
||||
</button>
|
||||
<button className={`btn-frame modal ${type === OUTER_LINE_TYPE.ANGLE ? 'act' : ''}`} onClick={() => setType(OUTER_LINE_TYPE.ANGLE)}>
|
||||
{getMessage('modal.cover.outline.angle')}
|
||||
</button>
|
||||
<button
|
||||
className={`btn-frame modal ${type === OUTER_LINE_TYPE.DIAGONAL_LINE ? 'act' : ''}`}
|
||||
onClick={() => setType(OUTER_LINE_TYPE.DIAGONAL_LINE)}
|
||||
>
|
||||
{getMessage('modal.cover.outline.diagonal')}
|
||||
</button>
|
||||
</div>
|
||||
{type === OUTER_LINE_TYPE.OUTER_LINE ? (
|
||||
<OuterLineWall />
|
||||
) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
|
||||
<RightAngle />
|
||||
) : type === OUTER_LINE_TYPE.DOUBLE_PITCH ? (
|
||||
<DoublePitch />
|
||||
) : type === OUTER_LINE_TYPE.ANGLE ? (
|
||||
<Angle />
|
||||
) : type === OUTER_LINE_TYPE.DIAGONAL_LINE ? (
|
||||
<Diagonal />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleRollback}>
|
||||
{getMessage('modal.cover.outline.rollback')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={handleFix}>
|
||||
{getMessage('modal.cover.outline.fix')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
@ -26,7 +26,7 @@
|
||||
"modal.cover.outline.right.angle": "直角",
|
||||
"modal.cover.outline2": "イ・グベ",
|
||||
"modal.cover.outline.angle": "角度",
|
||||
"modal.cover.outline.diagonal": "対角線",
|
||||
"modal.cover.outline.diagonal": "対角線の",
|
||||
"modal.cover.outline.setting": "설정",
|
||||
"modal.cover.outline.length": "長さ (mm)",
|
||||
"modal.cover.outline.arrow": "方向 (矢印)",
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { atom, selector } from 'recoil'
|
||||
import { atom } from 'recoil'
|
||||
|
||||
export const OUTER_LINE_TYPE = {
|
||||
OUTER_LINE: 'outerLine', // 외벽선
|
||||
RIGHT_ANGLE: 'rightAngle', // 직각
|
||||
LEE_GUBAE: 'leeGubae', // 이구배
|
||||
DOUBLE_PITCH: 'doublePitch',
|
||||
ANGLE: 'angle', // 각도
|
||||
DIAGONAL_LINE: 'diagonalLine', // 대각선
|
||||
}
|
||||
|
||||
@ -3,24 +3,19 @@
|
||||
height: calc(100vh - 47px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.canvas-content{
|
||||
flex: 1 1 auto;
|
||||
|
||||
.canvas-layout{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.sub-wrap{
|
||||
overflow: hidden;
|
||||
|
||||
.canvas-content{
|
||||
height: calc(100% - 47px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CanvasMenu
|
||||
.canvas-menu-wrap{
|
||||
position: relative;
|
||||
@ -29,7 +24,6 @@
|
||||
padding-bottom: 0;
|
||||
background-color: #383838;
|
||||
transition: padding .17s ease-in-out;
|
||||
|
||||
.canvas-menu-inner{
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -37,17 +31,14 @@
|
||||
padding: 0 40px 0 20px;
|
||||
background-color: #2C2C2C;
|
||||
z-index: 999;
|
||||
|
||||
.canvas-menu-list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.canvas-menu-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
button{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -58,7 +49,6 @@
|
||||
padding: 15px 20px;
|
||||
opacity: 0.55;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
.menu-icon{
|
||||
display: block;
|
||||
width: 16px;
|
||||
@ -67,66 +57,38 @@
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
margin-right: 10px;
|
||||
|
||||
&.con00 {
|
||||
background-image: url(/static/images/canvas/menu_icon00.svg);
|
||||
}
|
||||
|
||||
&.con01 {
|
||||
background-image: url(/static/images/canvas/menu_icon01.svg);
|
||||
}
|
||||
|
||||
&.con02 {
|
||||
background-image: url(/static/images/canvas/menu_icon02.svg);
|
||||
}
|
||||
|
||||
&.con03 {
|
||||
background-image: url(/static/images/canvas/menu_icon03.svg);
|
||||
}
|
||||
|
||||
&.con04 {
|
||||
background-image: url(/static/images/canvas/menu_icon04.svg);
|
||||
}
|
||||
|
||||
&.con05 {
|
||||
background-image: url(/static/images/canvas/menu_icon05.svg);
|
||||
}
|
||||
|
||||
&.con06 {
|
||||
background-image: url(/static/images/canvas/menu_icon06.svg);
|
||||
&.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
|
||||
&.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
|
||||
&.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
|
||||
&.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
|
||||
&.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
|
||||
&.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
|
||||
&.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active{
|
||||
background-color: #383838;
|
||||
|
||||
button{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-side-btn-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
|
||||
.select-box{
|
||||
width: 124px;
|
||||
margin-right: 5px;
|
||||
|
||||
> div{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-from{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
button{
|
||||
display: block;
|
||||
width: 30px;
|
||||
@ -137,58 +99,27 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: 15px 15px;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
&.btn01 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon03.svg);
|
||||
}
|
||||
|
||||
&.btn02 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon02.svg);
|
||||
}
|
||||
|
||||
&.btn03 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon01.svg);
|
||||
}
|
||||
|
||||
&.btn04 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon04.svg);
|
||||
}
|
||||
|
||||
&.btn05 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon05.svg);
|
||||
}
|
||||
|
||||
&.btn06 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon06.svg);
|
||||
}
|
||||
|
||||
&.btn07 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon07.svg);
|
||||
}
|
||||
|
||||
&.btn08 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon08.svg);
|
||||
}
|
||||
|
||||
&.btn09 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon09.svg);
|
||||
}
|
||||
|
||||
&.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
|
||||
&.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
|
||||
&.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
|
||||
&.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
|
||||
&.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
|
||||
&.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
|
||||
&.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
|
||||
&.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
|
||||
&.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
|
||||
&:hover{
|
||||
background-color: #1083E3;
|
||||
}
|
||||
|
||||
&.active{
|
||||
background-color: #1083E3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ico-btn-from{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
button{
|
||||
.ico{
|
||||
display: block;
|
||||
@ -197,37 +128,22 @@
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
|
||||
&.ico01 {
|
||||
background-image: url(../../public/static/images/canvas/ico-flx01.svg);
|
||||
&.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
|
||||
&.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
|
||||
&.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
|
||||
&.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
|
||||
}
|
||||
|
||||
&.ico02 {
|
||||
background-image: url(../../public/static/images/canvas/ico-flx02.svg);
|
||||
}
|
||||
|
||||
&.ico03 {
|
||||
background-image: url(../../public/static/images/canvas/ico-flx03.svg);
|
||||
}
|
||||
|
||||
&.ico04 {
|
||||
background-image: url(../../public/static/images/canvas/ico-flx04.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.name{
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.form06{
|
||||
.name{
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-horizontal{
|
||||
display: flex;
|
||||
min-width: 170px;
|
||||
@ -237,13 +153,11 @@
|
||||
background: #373737;
|
||||
line-height: 28px;
|
||||
overflow: hidden;
|
||||
|
||||
span{
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button{
|
||||
margin-left: auto;
|
||||
height: 100%;
|
||||
@ -254,14 +168,12 @@
|
||||
padding: 0 7.5px;
|
||||
transition: all .17s ease-in-out;
|
||||
}
|
||||
|
||||
&.on{
|
||||
button{
|
||||
background-color: #1083E3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.size-control{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -272,12 +184,10 @@
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
margin: 0 5px;
|
||||
|
||||
span{
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.control-btn{
|
||||
display: block;
|
||||
width: 12px;
|
||||
@ -285,11 +195,9 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
&.minus{
|
||||
background-image: url(../../public/static/images/canvas/minus.svg);
|
||||
}
|
||||
|
||||
&.plus{
|
||||
background-image: url(../../public/static/images/canvas/plus.svg);
|
||||
}
|
||||
@ -297,7 +205,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-depth2-wrap{
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
@ -306,24 +213,20 @@
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
.canvas-depth2-inner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 40px;
|
||||
height: 100%;
|
||||
|
||||
.canvas-depth2-list{
|
||||
display: flex;
|
||||
align-items: center ;
|
||||
height: 100%;
|
||||
|
||||
.canvas-depth2-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 26px;
|
||||
height: 100%;
|
||||
|
||||
button{
|
||||
position: relative;
|
||||
opacity: 0.55;
|
||||
@ -333,12 +236,10 @@
|
||||
height: 100%;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
&.active{
|
||||
button{
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -353,20 +254,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-depth2-btn-list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
height: 100%;
|
||||
|
||||
.depth2-btn-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 34px;
|
||||
height: 100%;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
button{
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
@ -374,7 +272,6 @@
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
padding-right: 12px;
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -386,23 +283,19 @@
|
||||
background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.mouse{
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active{
|
||||
top: 47px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active{
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
@ -415,12 +308,10 @@
|
||||
background-color: #1C1C1C;
|
||||
border-top: 1px solid #000;
|
||||
width: 100%;
|
||||
|
||||
.canvas-plane-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: calc(100% - 45px);
|
||||
|
||||
.canvas-page-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -429,7 +320,6 @@
|
||||
border-right:1px solid #000;
|
||||
min-width: 0;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
span{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -441,7 +331,6 @@
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.close{
|
||||
flex: none;
|
||||
display: block;
|
||||
@ -451,30 +340,24 @@
|
||||
background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&.on{
|
||||
background-color: #fff;
|
||||
|
||||
span{
|
||||
font-weight: 600;
|
||||
color: #101010;
|
||||
}
|
||||
|
||||
.close{
|
||||
background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plane-add{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -484,7 +367,6 @@
|
||||
background-color: #1C1C1C;
|
||||
border-right: 1px solid #000;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
span{
|
||||
display: block;
|
||||
width: 9px;
|
||||
@ -492,7 +374,6 @@
|
||||
background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: #000;
|
||||
}
|
||||
@ -504,7 +385,6 @@
|
||||
position: relative;
|
||||
height: calc(100% - 36.5px);
|
||||
background-color: #fff;
|
||||
|
||||
canvas{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -524,25 +404,20 @@
|
||||
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;
|
||||
@ -550,13 +425,9 @@
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
&.drawing {
|
||||
background-image: url(../../public/static/images/main/drawing_icon.svg);
|
||||
&.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -567,38 +438,31 @@
|
||||
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;
|
||||
@ -606,7 +470,6 @@
|
||||
font-weight: normal;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -617,18 +480,14 @@
|
||||
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;
|
||||
}
|
||||
@ -641,50 +500,42 @@
|
||||
// sub content
|
||||
.sub-content{
|
||||
padding-top: 46px;
|
||||
|
||||
.sub-content-inner{
|
||||
max-width: 1720px;
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
|
||||
.sub-content-box{
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.estimate{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 36.5px);
|
||||
overflow-y: auto;
|
||||
padding-top: 0;
|
||||
|
||||
.sub-content-inner{
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: 15px;
|
||||
|
||||
.title-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h3{
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
@ -692,26 +543,21 @@
|
||||
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;
|
||||
@ -722,29 +568,17 @@
|
||||
height: 11px;
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
&: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;
|
||||
@ -752,18 +586,15 @@
|
||||
color: #101010;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.important{
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.sub-table-footer{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.pagination-wrap{
|
||||
margin-top: 24px;
|
||||
}
|
||||
@ -773,23 +604,19 @@
|
||||
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;
|
||||
@ -806,16 +633,15 @@
|
||||
.estimate-list-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin-bottom: 10px;
|
||||
.estimate-box{
|
||||
flex: 1 1 auto;
|
||||
flex: 1 ;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:last-child{
|
||||
flex: none;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.estimate-tit{
|
||||
width: 105px;
|
||||
height: 30px;
|
||||
@ -827,7 +653,6 @@
|
||||
font-weight: 500;
|
||||
color: #344356;
|
||||
}
|
||||
|
||||
.estimate-name{
|
||||
font-size: 13px;
|
||||
color: #344356;
|
||||
@ -835,21 +660,21 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// file drag box
|
||||
.drag-file-box{
|
||||
padding: 10px;
|
||||
|
||||
.btn-area{
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #ECF0F4;
|
||||
}
|
||||
|
||||
.drag-file-area{
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
|
||||
p{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -861,11 +686,9 @@
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.file-list{
|
||||
.file-item{
|
||||
margin-bottom: 15px;
|
||||
|
||||
span{
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
@ -873,7 +696,6 @@
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
padding-right: 55px;
|
||||
|
||||
button{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -885,10 +707,139 @@
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 발전시물레이션
|
||||
.chart-wrap{
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
.sub-table-box{
|
||||
height: 100%;
|
||||
}
|
||||
.chart-inner{
|
||||
flex: 1;
|
||||
.chart-box{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
.chart-table-wrap{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: none;
|
||||
width: 650px;
|
||||
.sub-table-box{
|
||||
flex: 1;
|
||||
&:first-child{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-month-table{
|
||||
table{
|
||||
table-layout: fixed;
|
||||
border-collapse:collapse;
|
||||
border: 1px solid #ECF0F4;
|
||||
border-radius: 4px;
|
||||
thead{
|
||||
th{
|
||||
padding: 4.5px 0;
|
||||
border-bottom: 1px solid #ECF0F4;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #45576F;
|
||||
font-weight: 500;
|
||||
background-color: #F8F9FA;
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
td{
|
||||
font-size: 13px;
|
||||
color: #45576F;
|
||||
text-align: center;
|
||||
padding: 4.5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.simulation-guide-wrap{
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
.simulation-tit-wrap{
|
||||
padding-right: 40px;
|
||||
border-right: 1px solid #EEEEEE;
|
||||
span{
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 60px;
|
||||
font-size: 15px;
|
||||
color: #14324F;
|
||||
font-weight: 600;
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: url(../../public/static/images/sub/simulation_guide.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.simulation-guide-box{
|
||||
padding-left: 40px;
|
||||
dl{
|
||||
margin-bottom: 25px;
|
||||
dt{
|
||||
font-size: 13px;
|
||||
color: #101010;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
dd{
|
||||
font-size: 12px;
|
||||
color: #45576F;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-total{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F8F9FA;
|
||||
padding: 9px 0;
|
||||
margin-right: 4px;
|
||||
border: 1px solid #ECF0F4;
|
||||
border-top: none;
|
||||
.total-title{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #344356;
|
||||
font-weight: 500;
|
||||
}
|
||||
.total-num{
|
||||
flex: none;
|
||||
width: 121px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
color: #344356;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
61
src/styles/_grid-detail.scss
Normal file
61
src/styles/_grid-detail.scss
Normal file
@ -0,0 +1,61 @@
|
||||
.q-grid{
|
||||
height: fit-content;
|
||||
.ag-theme-quartz {
|
||||
outline: none;
|
||||
border: none;
|
||||
--ag-border-radius: 0px;
|
||||
--ag-wrapper-border-radius: 0px;
|
||||
--ag-header-height: 40px;
|
||||
--ag-header-foreground-color: white;
|
||||
--ag-header-background-color: #5D6A76;
|
||||
// --ag-header-cell-hover-background-color: rgb(80, 40, 140);
|
||||
--ag-header-cell-moving-background-color: #5D6A76;
|
||||
.ag-root-wrapper{
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
}
|
||||
.ag-header{
|
||||
border-bottom: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.ag-header-cell{
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
}
|
||||
.ag-header-cell-label{
|
||||
justify-content: center;
|
||||
}
|
||||
.ag-header-cell-resize{
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ag-row{
|
||||
border-bottom: 1px solid #ECF0F4;
|
||||
&:nth-child(2n){
|
||||
background-color: #F7F9FA;
|
||||
}
|
||||
}
|
||||
.ag-cell{
|
||||
font-size: 13px;
|
||||
color: #45576F;
|
||||
}
|
||||
.ag-icon-desc::before,
|
||||
.ag-icon-asc::before,
|
||||
.ag-icon-filter::before{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.copy-ico-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.copy_ico{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url(../../public/static/images/sub/copy_grid_ico.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,10 @@
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.input-wrap{
|
||||
width: 33.333%;
|
||||
padding: 50px 50px 0;
|
||||
h1{
|
||||
margin-bottom: 20px;
|
||||
@ -23,6 +26,7 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.form-main-radio,
|
||||
.form-Arrow-btn,
|
||||
.form-Check-btn{
|
||||
padding: 10px;
|
||||
@ -32,4 +36,25 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.flx{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&.pop{
|
||||
.input-wrap{
|
||||
.form-input{
|
||||
background-color: #272727;
|
||||
span{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -5,9 +5,7 @@
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.content{
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
padding-top: 46px;
|
||||
background-color: #F4F4F7;
|
||||
@ -26,7 +24,6 @@
|
||||
padding-right: 12px;
|
||||
transition: color .17s ease-in-out;
|
||||
}
|
||||
|
||||
header{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -37,18 +34,15 @@ header {
|
||||
background-color: #1C1C1C;
|
||||
border-bottom: 1px solid #000;
|
||||
z-index: 9999;
|
||||
|
||||
.header-inner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 40px;
|
||||
|
||||
.header-right{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
|
||||
.logo{
|
||||
a{
|
||||
display: block;
|
||||
@ -58,28 +52,22 @@ header {
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
nav{
|
||||
margin-left: 50px;
|
||||
height: 100%;
|
||||
|
||||
.nav-list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.nav-item{
|
||||
position: relative;
|
||||
margin-right: 62px;
|
||||
height: 100%;
|
||||
|
||||
a{
|
||||
@include navitem;
|
||||
}
|
||||
|
||||
button{
|
||||
@include navitem;
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -92,11 +80,9 @@ header {
|
||||
transition: all .17s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.nav-depth2{
|
||||
position: absolute;
|
||||
top: calc(100% - 2px);
|
||||
@ -109,26 +95,21 @@ header {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
.nav-depth2-item{
|
||||
margin-bottom: 10px;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
a{
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.mouse{
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -142,27 +123,22 @@ header {
|
||||
border-left: 1px solid #464646;
|
||||
}
|
||||
}
|
||||
|
||||
&.mouse{
|
||||
> a{
|
||||
color: rgba(255, 255, 255, 0.30);
|
||||
}
|
||||
|
||||
> button{
|
||||
color: rgba(255, 255, 255, 0.30);
|
||||
|
||||
&:after{
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
.nav-depth2{
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
> button{
|
||||
&:after{
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
@ -173,13 +149,11 @@ header {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-left{
|
||||
margin-left: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.profile-box{
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
@ -188,13 +162,11 @@ header {
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
.profile{
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -207,7 +179,6 @@ header {
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.sign-out-box{
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
@ -216,13 +187,11 @@ header {
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
.sign-out{
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -235,11 +204,9 @@ header {
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.select-box{
|
||||
min-width: 165px;
|
||||
margin-right: 8px;
|
||||
|
||||
>div{
|
||||
width: 100%;
|
||||
}
|
||||
@ -248,3 +215,19 @@ header {
|
||||
}
|
||||
}
|
||||
|
||||
// footer
|
||||
footer{
|
||||
width: 100%;
|
||||
background-color: #F4F4F7;
|
||||
.footer-inner{
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 35px 0;
|
||||
span{
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #CFCFCF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -26,13 +26,11 @@
|
||||
padding: 33.5px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
|
||||
.store-id-title{
|
||||
position: relative;
|
||||
padding-left: 32px;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -44,14 +42,12 @@
|
||||
background: url(../../public/static/images/main/id_icon.svg)no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
.store-arr{
|
||||
display: block;
|
||||
width: 7px;
|
||||
height: 10px;
|
||||
background: url(../../public/static/images/main/store-arr.svg) no-repeat center;
|
||||
}
|
||||
|
||||
.store-id-name{
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
@ -65,7 +61,6 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 45px 0;
|
||||
|
||||
.search-raido-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -73,7 +68,6 @@
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -83,7 +77,6 @@
|
||||
padding: 0 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.30);
|
||||
background: rgba(31, 31, 31, 0.30);
|
||||
|
||||
.main-search{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
@ -94,7 +87,6 @@
|
||||
border: none;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
}
|
||||
|
||||
.search-icon{
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
@ -109,12 +101,10 @@
|
||||
.main-product-list-wrap{
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
|
||||
.main-product-list{
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.product-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -122,43 +112,20 @@
|
||||
border-radius: 6px;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
|
||||
|
||||
&.item01 {
|
||||
flex: 1;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
&.item02 {
|
||||
flex: none;
|
||||
width: 451px;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
&.item03 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.item04 {
|
||||
flex: none;
|
||||
width: 351px;
|
||||
}
|
||||
|
||||
&.item05 {
|
||||
flex: none;
|
||||
width: 451px;
|
||||
}
|
||||
|
||||
&.item01{flex: 1; max-height: 400px;}
|
||||
&.item02{flex: none; width: 451px; max-height: 400px;}
|
||||
&.item03{flex: 1;}
|
||||
&.item04{flex: none; width: 351px;}
|
||||
&.item05{flex: none; width: 451px;}
|
||||
.product-item-title-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.product-item-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
color: #101010;
|
||||
font-weight: 600;
|
||||
|
||||
.item-logo{
|
||||
display: block;
|
||||
width: 40px;
|
||||
@ -169,29 +136,13 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: 22px 22px;
|
||||
background-position: center;
|
||||
|
||||
&.ico01 {
|
||||
background-image: url(../../public/static/images/main/product_ico01.svg);
|
||||
}
|
||||
|
||||
&.ico02 {
|
||||
background-image: url(../../public/static/images/main/product_ico02.svg);
|
||||
}
|
||||
|
||||
&.ico03 {
|
||||
background-image: url(../../public/static/images/main/product_ico03.svg);
|
||||
}
|
||||
|
||||
&.ico04 {
|
||||
background-image: url(../../public/static/images/main/product_ico04.svg);
|
||||
}
|
||||
|
||||
&.ico05 {
|
||||
background-image: url(../../public/static/images/main/product_ico05.svg);
|
||||
&.ico01{background-image: url(../../public/static/images/main/product_ico01.svg);}
|
||||
&.ico02{background-image: url(../../public/static/images/main/product_ico02.svg);}
|
||||
&.ico03{background-image: url(../../public/static/images/main/product_ico03.svg);}
|
||||
&.ico04{background-image: url(../../public/static/images/main/product_ico04.svg);}
|
||||
&.ico05{background-image: url(../../public/static/images/main/product_ico05.svg);}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-btn{
|
||||
display: block;
|
||||
width: 20px;
|
||||
@ -200,11 +151,9 @@
|
||||
background: url(../../public/static/images/main/more_btn.svg)no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
.product-item-content{
|
||||
margin-top: 30px;
|
||||
overflow: hidden;
|
||||
|
||||
.recently-list{
|
||||
.recently-item{
|
||||
border: 1px solid #F2F2F2;
|
||||
@ -212,11 +161,9 @@
|
||||
padding: 29.9px 20px;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
.item-inner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
position: relative;
|
||||
display: block;
|
||||
@ -224,10 +171,8 @@
|
||||
color: #101010;
|
||||
font-weight: 400;
|
||||
padding: 0 10px;
|
||||
|
||||
&.time{
|
||||
padding-left: 22px;
|
||||
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -240,7 +185,6 @@
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -251,7 +195,6 @@
|
||||
height: 10px;
|
||||
background-color: #BBB;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
&:after{
|
||||
display: none;
|
||||
@ -259,24 +202,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice-box{
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.notice-day{
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.notice-title{
|
||||
font-size: 14px;
|
||||
color: #101010;
|
||||
@ -285,18 +224,15 @@
|
||||
line-height: 24px;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.notice-contents{
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
|
||||
span{
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-left: 10px;
|
||||
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -309,25 +245,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px; /* 스크롤바의 너비 */
|
||||
&::-webkit-scrollbar {width: 4px; /* 스크롤바의 너비 */}
|
||||
&::-webkit-scrollbar-thumb {background: #697C8F; /* 스크롤바의 색상 */}
|
||||
&::-webkit-scrollbar-track {background: transparent; /*스크롤바 뒷 배경 색상*/}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #697C8F; /* 스크롤바의 색상 */
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent; /*스크롤바 뒷 배경 색상*/
|
||||
}
|
||||
}
|
||||
|
||||
.faq-item{
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.faq-item-inner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -342,7 +267,6 @@
|
||||
border: 1px solid rgba(242, 242, 242, 0.95);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.faq-title{
|
||||
width: 0;
|
||||
flex: 1 1 auto;
|
||||
@ -354,7 +278,6 @@
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.faq-day{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -365,15 +288,12 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.data-download-wrap{
|
||||
width: 100%;
|
||||
|
||||
.data-down{
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -383,7 +303,6 @@
|
||||
background-color: #697C8F;
|
||||
margin-bottom: 5px;
|
||||
transition: background .17s ease-in-out;
|
||||
|
||||
span{
|
||||
position: relative;
|
||||
display: block;
|
||||
@ -391,7 +310,6 @@
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -404,42 +322,29 @@
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: #859eb6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-info-list{
|
||||
padding: 25px 30px;
|
||||
border-radius: 4px;
|
||||
background-color: #F4F4F7;
|
||||
|
||||
.info-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #fff;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:first-child{padding-top: 0;}
|
||||
&:last-child{padding-bottom: 0; border: none;}
|
||||
.icon-box{
|
||||
display: flex;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.infor-data{
|
||||
font-size: 13px;
|
||||
color: #101010;
|
||||
@ -449,7 +354,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -466,40 +370,33 @@
|
||||
justify-content: center;
|
||||
background: url(../../public/static/images/main/login_bg.png) no-repeat center;
|
||||
background-size: cover;
|
||||
|
||||
.login-inner{
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
.login-logo{
|
||||
display: block;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.login-input-frame{
|
||||
padding: 40px 50px;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.97);
|
||||
box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
|
||||
|
||||
.login-frame-tit{
|
||||
font-size: 18px;
|
||||
color: #364864;
|
||||
font-weight: 400;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #E5E9EF;
|
||||
|
||||
span{
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-input-wrap{
|
||||
margin-top: 30px;
|
||||
|
||||
.login-area{
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -509,7 +406,6 @@
|
||||
padding-left: 40px;
|
||||
padding-right: 15px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.login-input{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
@ -517,12 +413,10 @@
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #D1D7E0;
|
||||
|
||||
&::placeholder{
|
||||
color: #D1D7E0;
|
||||
}
|
||||
}
|
||||
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -533,46 +427,37 @@
|
||||
height: 12px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
button{
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&.id{
|
||||
&::before{
|
||||
background: url(../../public/static/images/main/login_id.svg)no-repeat center;
|
||||
}
|
||||
|
||||
.id-delete{
|
||||
background-image: url(../../public/static/images/main/id_delete.svg);
|
||||
background-size: 17px 17px;
|
||||
}
|
||||
}
|
||||
|
||||
&.password{
|
||||
margin-bottom: 20px;
|
||||
|
||||
&::before{
|
||||
background: url(../../public/static/images/main/login_password.svg)no-repeat center;
|
||||
}
|
||||
|
||||
.password-hidden{
|
||||
background-image: url(../../public/static/images/main/password_hidden.svg);
|
||||
background-size: 19px 13px;
|
||||
|
||||
&.visible{
|
||||
background-image: url(../../public/static/images/main/password_visible.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn-box{
|
||||
margin-bottom: 20px;
|
||||
|
||||
.login-btn{
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -583,24 +468,20 @@
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
transition: background .15s ease-in-out;
|
||||
|
||||
&:hover{
|
||||
background-color: #717e8d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reset-password{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
a{
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
color: #364864;
|
||||
font-weight: 400;
|
||||
padding-right: 16px;
|
||||
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -615,7 +496,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-guide-wrap{
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
@ -624,13 +504,11 @@
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
line-height: 24px;
|
||||
|
||||
a{
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
span{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -638,7 +516,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-copyright{
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
@ -653,11 +530,9 @@
|
||||
.d-check-box{
|
||||
&.login{
|
||||
margin-bottom: 25px;
|
||||
|
||||
label{
|
||||
padding-left: 20px;
|
||||
color: #364864;
|
||||
|
||||
&:before{
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@ -668,12 +543,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + label::before{
|
||||
border-color: #A8B6C7;
|
||||
background-color: #A8B6C7;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + label::after{
|
||||
border-color: #fff;
|
||||
width: 7px;
|
||||
|
||||
@ -1,23 +1,16 @@
|
||||
@keyframes mountpop {
|
||||
from {
|
||||
opacity: 0;
|
||||
scale: 0.95;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
$pop-color: #fff;
|
||||
$pop-normal-weight: 400;
|
||||
$pop-bold-weight: 500;
|
||||
$pop-normal-size: 12px;
|
||||
$alert-color: #101010;
|
||||
|
||||
@keyframes mountpop{
|
||||
from{opacity: 0; scale: 0.95;}
|
||||
to{opacity: 1; scale: 1;}
|
||||
}
|
||||
@keyframes unmountpop{
|
||||
from {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
scale: 0.95;
|
||||
}
|
||||
from{opacity: 1; scale: 1;}
|
||||
to{opacity: 0; scale: 0.95;}
|
||||
}
|
||||
|
||||
.modal-pop-wrap{
|
||||
@ -26,7 +19,6 @@
|
||||
right: 100px;
|
||||
width: 100%;
|
||||
min-width: 300px;
|
||||
max-width: fit-content;
|
||||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
@ -34,97 +26,115 @@
|
||||
border-radius: 4px;
|
||||
background-color: #272727;
|
||||
z-index: 9999999;
|
||||
|
||||
overflow: hidden;
|
||||
&.r{
|
||||
width: 400px;
|
||||
}
|
||||
&.sm{
|
||||
max-width: 580px;
|
||||
width: 580px;
|
||||
}
|
||||
|
||||
&.ssm{
|
||||
max-width: 380px;
|
||||
width: 380px;
|
||||
}
|
||||
|
||||
&.xm{
|
||||
max-width: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
&.l{
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
&.mount{
|
||||
animation: mountpop .17s ease-in-out forwards;
|
||||
}
|
||||
|
||||
&.unmount{
|
||||
animation: unmountpop .17s ease-in-out forwards;
|
||||
}
|
||||
&.alert{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
.modal-head{
|
||||
background-color: transparent;
|
||||
padding: 0 0 8px;
|
||||
.modal-close{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
|
||||
}
|
||||
}
|
||||
.modal-body{
|
||||
background-color: #fff;
|
||||
padding: 22px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #101010;
|
||||
color: $alert-color;
|
||||
.alert-title{
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: $alert-color;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-head{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 24px;
|
||||
background-color: #000;
|
||||
cursor: pointer;
|
||||
|
||||
h1.title{
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
color: $pop-color;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.modal-close{
|
||||
margin-left: auto;
|
||||
color: #fff;
|
||||
color: $pop-color;
|
||||
text-indent: -999999999px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body{
|
||||
padding: 15px;
|
||||
|
||||
padding: 24px;
|
||||
.modal-btn-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
button{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-check-btn-wrap{
|
||||
margin-top: 15px;
|
||||
|
||||
.check-wrap-title{
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-size: $pop-normal-size;
|
||||
color: $pop-color;
|
||||
font-weight: 600;
|
||||
|
||||
&.light{
|
||||
font-weight: 400;
|
||||
font-weight: $pop-normal-weight;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-check-box{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
|
||||
&.for2{
|
||||
justify-content: flex-end;
|
||||
button{
|
||||
width: calc(50% - 5px);
|
||||
}
|
||||
|
||||
&.btn{
|
||||
gap: 5px;
|
||||
|
||||
button{
|
||||
width: calc(50% - 2.5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.for-line{
|
||||
button{
|
||||
flex: 1;
|
||||
@ -132,21 +142,24 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outer-line-wrap{
|
||||
border-top: 1px solid #3C3C3C;
|
||||
margin-top: 10px;
|
||||
padding-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
> div{
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-guide{
|
||||
display: block;
|
||||
font-size: $pop-normal-size;
|
||||
color: $alert-color;
|
||||
font-weight: $pop-normal-weight;
|
||||
}
|
||||
}
|
||||
|
||||
.adsorption-point{
|
||||
@ -157,12 +170,10 @@
|
||||
padding-left: 11px;
|
||||
overflow: hidden;
|
||||
transition: all 0.17s ease-in-out;
|
||||
|
||||
span{
|
||||
font-size: 12px;
|
||||
font-size: $pop-normal-size;
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
i{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -172,10 +183,9 @@
|
||||
font-size: 13px;
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
&.act{
|
||||
i{
|
||||
color: #fff;
|
||||
color: $pop-color;
|
||||
background-color: #1083E3;
|
||||
}
|
||||
}
|
||||
@ -189,11 +199,9 @@
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #3C3C3C;
|
||||
}
|
||||
|
||||
.grid-option-wrap{
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #3C3C3C;
|
||||
|
||||
.grid-option-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -202,45 +210,37 @@
|
||||
padding: 10px;
|
||||
gap: 20px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.grid-input-form{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
flex: none;
|
||||
font-size: $pop-normal-size;
|
||||
color: $pop-color;
|
||||
font-weight: $pop-bold-weight;
|
||||
}
|
||||
|
||||
.input-grid{
|
||||
width: 63px;
|
||||
|
||||
width: 54px;
|
||||
input{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-select{
|
||||
flex: 1;
|
||||
|
||||
.sort-select{
|
||||
width: 100%;
|
||||
background-color: #313131;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-btn-wrap{
|
||||
padding-top: 15px;
|
||||
text-align: right;
|
||||
|
||||
button{
|
||||
padding: 0 20px;
|
||||
}
|
||||
@ -248,19 +248,18 @@
|
||||
|
||||
// grid copy
|
||||
.grid-option-tit{
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: $pop-normal-size;
|
||||
color: $pop-color;
|
||||
font-weight: $pop-normal-weight;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #3C3C3C;
|
||||
}
|
||||
|
||||
.grid-direction{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.direction{
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@ -271,56 +270,200 @@
|
||||
background-size: 16px 15px;
|
||||
border-radius: 50%;
|
||||
transition: all .15s ease-in-out;
|
||||
|
||||
&.down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&.left {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&.right {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
opacity: 0.6;
|
||||
&.down{transform: rotate(180deg);}
|
||||
&.left{transform: rotate(-90deg);}
|
||||
&.right{transform: rotate(90deg);}
|
||||
&:hover,
|
||||
&.act{
|
||||
background-color: #1083E3;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// grid-move
|
||||
.move-form{
|
||||
p{
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: $pop-normal-size;
|
||||
color: $pop-color;
|
||||
font-weight: $pop-bold-weight;
|
||||
}
|
||||
}
|
||||
|
||||
.input-move-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
span{
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
color: $pop-color;
|
||||
font-size: $pop-normal-size;
|
||||
}
|
||||
|
||||
.input-move{
|
||||
width: 148px;
|
||||
|
||||
width: 130px;
|
||||
input{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.direction-move-wrap{
|
||||
flex: none;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
// 배치면 초기 설정
|
||||
.placement-table{
|
||||
table{
|
||||
table-layout: fixed;
|
||||
tr{
|
||||
th{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $pop-normal-size;
|
||||
color: $pop-color;
|
||||
font-weight: $pop-bold-weight;
|
||||
padding: 18px 0;
|
||||
border-bottom: 1px solid #424242;
|
||||
}
|
||||
td{
|
||||
font-size: $pop-normal-size;
|
||||
color: $pop-color;
|
||||
border-bottom: 1px solid #424242;
|
||||
padding-left: 20px;
|
||||
}
|
||||
&:first-child{
|
||||
td,
|
||||
th{
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tooltip{
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: 5px;
|
||||
background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
&.light{
|
||||
padding: 0;
|
||||
th,td{
|
||||
color: $alert-color;
|
||||
border-bottom: none;
|
||||
border-top: 1px solid #EFEFEF;
|
||||
}
|
||||
th{
|
||||
padding: 14px 0;
|
||||
}
|
||||
tr{
|
||||
&:first-child{
|
||||
td,
|
||||
th{
|
||||
padding-top: 14px;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
td,
|
||||
th{
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pop-form-radio{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.placement-option{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.select-wrap{
|
||||
div{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.flex-ment{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
span{
|
||||
font-size: $pop-normal-size;
|
||||
color: $pop-color;
|
||||
font-weight: $pop-normal-weight;
|
||||
}
|
||||
}
|
||||
|
||||
// 외벽선 그리기
|
||||
.outline-wrap{
|
||||
padding: 24px 0;
|
||||
border-bottom: 1px solid #424242;
|
||||
.outline-inner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.outline-form{
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
span{
|
||||
width: 60px;
|
||||
flex: none;
|
||||
font-size: $pop-normal-size;
|
||||
font-weight: $pop-bold-weight;
|
||||
color: $pop-color;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.reset-btn{
|
||||
flex: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: transparent;
|
||||
border: 1px solid #484848;
|
||||
border-radius: 2px;
|
||||
margin-left: 5px;
|
||||
background-image: url(../../public/static/images/canvas/reset_ico.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 12px 12px;
|
||||
background-position: center;
|
||||
}
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cul-wrap{
|
||||
display: flex;
|
||||
.outline-box{
|
||||
width: 50%;
|
||||
margin-right: 15px;
|
||||
.outline-form{
|
||||
width: 100%;
|
||||
margin-bottom: 14px;
|
||||
margin-right: 0;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cul-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
background-color: #3D3D3D;
|
||||
border-radius: 2px ;
|
||||
}
|
||||
}
|
||||
51
src/styles/_pagination.scss
Normal file
51
src/styles/_pagination.scss
Normal file
@ -0,0 +1,51 @@
|
||||
.pagination{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
.page-item{
|
||||
button{
|
||||
font-family: 'Pretendard';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 1px solid #EAEAEA;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
&.on{
|
||||
button{
|
||||
border-color: #304961;
|
||||
font-weight: 600;
|
||||
color: #304961;
|
||||
}
|
||||
}
|
||||
&.last,
|
||||
&.first{
|
||||
button{
|
||||
background: url(../../public/static/images/sub/pagination_first.svg)no-repeat center;
|
||||
background-size: 9px 8px;
|
||||
}
|
||||
}
|
||||
&.last{
|
||||
button{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
&.next,
|
||||
&.prev{
|
||||
button{
|
||||
background: url(../../public/static/images/sub/pagination_prev.svg)no-repeat center;
|
||||
background-size: 5px 8px;
|
||||
}
|
||||
}
|
||||
&.next{
|
||||
button{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -5,17 +5,14 @@
|
||||
text-size-adjust: none;
|
||||
box-sizing: content-box
|
||||
}
|
||||
|
||||
*, ::after, ::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@ -35,43 +32,37 @@ time, mark, audio, video {
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-smooth: never;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
body:first-of-type caption {
|
||||
display: none;
|
||||
}
|
||||
body:first-of-type caption { display:none;}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing:0;
|
||||
border:0 none;
|
||||
}
|
||||
|
||||
caption, th, td {
|
||||
text-align:left;
|
||||
font-weight: normal;
|
||||
@ -82,17 +73,14 @@ a {
|
||||
cursor:pointer;
|
||||
color:#000;
|
||||
}
|
||||
|
||||
a, a:hover, a:active {
|
||||
text-decoration:none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/*form_style*/
|
||||
input, select, textarea, button, a, label {
|
||||
-webkit-tap-highlight-color:rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
button,input[type=text], input[type=button] {
|
||||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 0;
|
||||
@ -100,28 +88,23 @@ button, input[type=text], input[type=button] {
|
||||
appearance: none;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
input[type=checkbox], input[type=radio] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input, select, button {
|
||||
border:0 none;
|
||||
outline:none;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
line-height:1;
|
||||
font-weight:300;
|
||||
@ -129,11 +112,9 @@ select::-ms-expand {
|
||||
letter-spacing:-0.6px;
|
||||
color:#8b8b8b;
|
||||
}
|
||||
|
||||
.log-box ::-webkit-input-placeholder{
|
||||
color:#8b8b8b;
|
||||
}
|
||||
|
||||
button{
|
||||
background: transparent;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
@ -145,48 +126,24 @@ button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pre{
|
||||
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;
|
||||
}
|
||||
.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
|
||||
.btn-frame{
|
||||
display: inline-block;
|
||||
padding: 0 9px;
|
||||
padding: 0 7px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
border-radius: 2px;
|
||||
@ -198,11 +155,9 @@ button {
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
transition: all .17s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&.block{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.small{
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
height: 30px;
|
||||
@ -214,22 +169,19 @@ button {
|
||||
background-color: #2C2C2C;
|
||||
border: 1px solid #484848;
|
||||
}
|
||||
|
||||
&.gray{
|
||||
background-color: #3C3C3C;
|
||||
border: 1px solid #545454;
|
||||
}
|
||||
|
||||
&.dark{
|
||||
background-color: #1C1C1C;
|
||||
border: 1px solid #484848;
|
||||
}
|
||||
|
||||
&.modal{
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
background-color: #272727;
|
||||
border: 1px solid #484848;
|
||||
color: #aaa;
|
||||
|
||||
&:hover{
|
||||
background-color: #1083E3;
|
||||
border: 1px solid #1083E3;
|
||||
@ -237,7 +189,6 @@ button {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act{
|
||||
background-color: #1083E3;
|
||||
@ -245,20 +196,16 @@ button {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.block{
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.ico-flx{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ico{
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act{
|
||||
font-weight: 400;
|
||||
@ -276,18 +223,14 @@ button {
|
||||
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;
|
||||
}
|
||||
@ -308,13 +251,11 @@ button {
|
||||
border-top-left-radius: 2px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
p{
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.select-item-wrap{
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
@ -327,26 +268,22 @@ button {
|
||||
border-radius: 2px;
|
||||
transition: all 0.17s ease-in-out;
|
||||
visibility: hidden;
|
||||
|
||||
.select-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
line-height: 1.4;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
button{
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -359,13 +296,11 @@ button {
|
||||
background-size: cover;
|
||||
transition: all .17s ease-in-out;
|
||||
}
|
||||
|
||||
&.active{
|
||||
.select-item-wrap{
|
||||
clip-path: inset(0 0 0 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&:after{
|
||||
transform: translateY(-50%) rotate(-180deg);
|
||||
}
|
||||
@ -385,17 +320,22 @@ button {
|
||||
color: #45576F;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled{
|
||||
opacity: 1;
|
||||
background-color: #FAFAFA;
|
||||
color: #999;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.black{
|
||||
color: #101010;
|
||||
}
|
||||
&.dark{
|
||||
background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
|
||||
color: #898989;
|
||||
font-size: 12px;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -409,7 +349,6 @@ button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=number],
|
||||
input[type=text]{
|
||||
&.input-origin{
|
||||
@ -417,25 +356,23 @@ input[type=text] {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 2px;
|
||||
background-color: #313131;
|
||||
background-color: #323234;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
padding: 0 10px;
|
||||
letter-spacing: 0px;
|
||||
|
||||
text-align: right;
|
||||
&::placeholder{
|
||||
opacity: 1;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
|
||||
&.block{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.input-light{
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -449,7 +386,7 @@ input[type=text] {
|
||||
color: #45576F;
|
||||
font-weight: normal;
|
||||
transition: border-color .17s ease-in-out;
|
||||
|
||||
text-align: left;
|
||||
&:read-only{
|
||||
background-color: #FAFAFA;
|
||||
color: #999999;
|
||||
@ -458,6 +395,7 @@ input[type=text] {
|
||||
}
|
||||
|
||||
|
||||
|
||||
// check-btn
|
||||
.check-btn{
|
||||
display: flex;
|
||||
@ -466,7 +404,6 @@ input[type=text] {
|
||||
background-color: #3A3A3A;
|
||||
border-radius: 3px;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
.check-area{
|
||||
flex: none;
|
||||
width: 30px;
|
||||
@ -475,27 +412,22 @@ input[type=text] {
|
||||
background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center;
|
||||
background-size: 11px 9px;
|
||||
}
|
||||
|
||||
.title-area{
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
color: #898989;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.block{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act{
|
||||
background-color: #fff;
|
||||
|
||||
.check-area{
|
||||
border-right: 1px solid #101010;
|
||||
background: url(../../public/static/images/canvas/check-black.svg)no-repeat center;
|
||||
}
|
||||
|
||||
.title-area{
|
||||
color: #101010;
|
||||
font-weight: 600;
|
||||
@ -512,14 +444,12 @@ input[type=text] {
|
||||
padding: 0 11px;
|
||||
text-align: left;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
span{
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
color: #898989;
|
||||
font-weight: 400;
|
||||
padding-right: 15px;
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -531,34 +461,27 @@ input[type=text] {
|
||||
background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act{
|
||||
background-color: #fff;
|
||||
|
||||
span{
|
||||
color: #101010;
|
||||
font-weight: 500;
|
||||
|
||||
&:after{
|
||||
background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dark{
|
||||
text-align: center;
|
||||
background-color: #272727;
|
||||
border: 1px solid #484848;
|
||||
|
||||
span{
|
||||
color: #Fff;
|
||||
|
||||
&:after{
|
||||
background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act{
|
||||
background-color: #1083E3;
|
||||
@ -572,7 +495,6 @@ input[type=text] {
|
||||
.d-check-box{
|
||||
line-height: 1.1;
|
||||
cursor: pointer;
|
||||
|
||||
input[type=checkbox],
|
||||
input[type=radio]{
|
||||
position: static;
|
||||
@ -582,7 +504,6 @@ input[type=text] {
|
||||
z-index: 1;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
label{
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
@ -596,13 +517,11 @@ input[type=text] {
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.light{
|
||||
label{
|
||||
color: #45576F;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-text{
|
||||
label{
|
||||
padding-left: 0;
|
||||
@ -630,7 +549,6 @@ input[type=text] {
|
||||
line-height:1.4;
|
||||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&::after{
|
||||
cursor: pointer;
|
||||
content: "";
|
||||
@ -652,31 +570,30 @@ input[type=text] {
|
||||
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{
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&.pop{
|
||||
label{
|
||||
&:before{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
&:after{
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
@ -700,7 +617,6 @@ input[type=text] {
|
||||
background-color: transparent;
|
||||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&:after{
|
||||
cursor: pointer;
|
||||
content: "";
|
||||
@ -714,7 +630,6 @@ input[type=text] {
|
||||
transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + label::after{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
@ -729,7 +644,6 @@ input[type=text] {
|
||||
transform: translate(7.75px,4.5px) rotate(45deg);
|
||||
-ms-transform: translate(7.75px,4.5px) rotate(45deg);
|
||||
}
|
||||
|
||||
&.pop{
|
||||
input[type=checkbox]:checked + label::after{
|
||||
border-color: #fff;
|
||||
@ -739,14 +653,10 @@ input[type=text] {
|
||||
|
||||
// date-picker
|
||||
.date-picker{
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
svg{display: none;}
|
||||
.react-datepicker-wrapper{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=text]{
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
177
src/styles/_table.scss
Normal file
177
src/styles/_table.scss
Normal file
@ -0,0 +1,177 @@
|
||||
@mixin flexbox(){
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
table{
|
||||
.overflow-lab{
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.al-l{
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
.common-table{
|
||||
table{
|
||||
table-layout: fixed;
|
||||
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;
|
||||
vertical-align: middle;
|
||||
}
|
||||
td{
|
||||
padding: 9px;
|
||||
border: 1px solid #ECF0F4 ;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #45576F;
|
||||
vertical-align: middle;
|
||||
.radio-wrap{
|
||||
flex: none;
|
||||
@include flexbox;
|
||||
}
|
||||
.form-flex-wrap{
|
||||
@include flexbox;
|
||||
}
|
||||
.date-picker-wrap{
|
||||
width: 100%;
|
||||
@include flexbox;
|
||||
span{
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bt-able{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.module-table{
|
||||
table{
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
thead{
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
th{
|
||||
padding: 13px 0;
|
||||
font-size: 13px;
|
||||
color: #344356;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid #E0E5EB;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
tr{
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border: 1px solid #ECF0F4;
|
||||
td{
|
||||
padding: 10px 0px;
|
||||
font-size: 13px;
|
||||
color: #45576F;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #C1CCD7;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&.small{
|
||||
tbody{height: 120px;}
|
||||
}
|
||||
&.big{
|
||||
td,
|
||||
th{
|
||||
&:nth-child(2){
|
||||
width: 121px;
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
height: 160px;
|
||||
td{
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,8 @@
|
||||
.test {
|
||||
background-color: #121212;
|
||||
background-color: #797979;
|
||||
font: 30px sans-serif;
|
||||
font-style: italic;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.grid-container2 {
|
||||
@ -79,9 +82,3 @@
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.centered {
|
||||
.ag-header-cell-label {
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
@import '_contents.scss';
|
||||
@import '_modal.scss';
|
||||
@import '_table.scss';
|
||||
2
src/styles/grid.scss
Normal file
2
src/styles/grid.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import '_grid-detail.scss';
|
||||
@import '_pagination.scss';
|
||||
49
src/styles/publishpage.scss
Normal file
49
src/styles/publishpage.scss
Normal file
@ -0,0 +1,49 @@
|
||||
|
||||
html, body ,h1,div{ margin: 0; padding: 0; }
|
||||
ul, li {padding: 0; margin: 0; list-style: none; }
|
||||
body, td { line-height: normal;font-style: normal; font-variant: normal; font-size: 12px; color: #6b6b6b; }
|
||||
table { margin-bottom: 150px; border-collapse: collapse; border-spacing: 0; }
|
||||
#g_header h1 { height: 60px; line-height: 60px; padding-left: 28px; margin-top: 0; color: #fff; background: #424242;font-size: 24px; font-family:'Pretendard', 돋움, Sans-Serif;}
|
||||
#g_body { padding: 0 30px; }
|
||||
.guide_table { width: 100%;border-top:1px solid #424242;table-layout: auto;}
|
||||
.guide_table thead th { background: #f1f1f1; text-align: center; padding:20px 3px;border:1px solid #dadada;border-top:1px solid #424242;font-size:15px;font-weight: 600; font-family:'Pretendard', 돋움, Sans-Serif;}
|
||||
.guide_table tbody td { padding:12px 3px; vertical-align: middle; border: solid 1px #dadada;text-align:left;font-size:13px; font-family:'Pretendard', 돋움, Sans-Serif;}
|
||||
.t-center{text-align:center!important;}
|
||||
.contents h3{font-size: 16px; margin: 10px 0;}
|
||||
.red { color: #ff0000;}
|
||||
.blues { color: #001aff;}
|
||||
.guide_table tbody td a{color: #001aff; text-decoration: underline; font-size: 12px;}
|
||||
.design_summary_web,
|
||||
.design_summary_tab,
|
||||
.design_summary_mob { display: inline-block; color: rosybrown; font-weight: bold; font-size: 12px; margin-right: 30px; }
|
||||
.coding_summary_web,
|
||||
.coding_summary_tab,
|
||||
.coding_summary_mob { display: inline-block; color: red; font-weight: bold; font-size: 12px; margin-right: 30px; }
|
||||
.dev_summary { display: inline-block; color: green; font-weight: bold; font-size: 12px; margin-right: 30px; }
|
||||
.coding_stat_web,
|
||||
.coding_stat_tab,
|
||||
.coding_stat_mob { background: #ffffff;color:#333;text-align:center!important;}
|
||||
.coding_stat_web.final,
|
||||
.coding_stat_tab.final,
|
||||
.coding_stat_mob.final { background: rgb(255, 116, 98);color:rgb(255, 255, 255);text-align:center!important;}
|
||||
.dev_stat_web,
|
||||
.dev_stat_web,
|
||||
.dev_stat_web { background: rosybrown; color: #fff; }
|
||||
.bg_gray { background: #f0f0f0; }
|
||||
.tab_li > li { float: left; width: 90px; height: 30px; line-height: 30px; text-align: center; background: #424242; color: #fff; margin-right: 5px; margin-bottom: 5px; }
|
||||
.tab_li > li > a { color: #fff; text-decoration: none; display: block; }
|
||||
.tab_li > li.on { font-weight: bold; text-decoration: underline; font-size: 16px; }
|
||||
td strong {font-size:12px;font-weight:600; color: rgb(0, 0, 0); }
|
||||
td strong.title { color: #000; }
|
||||
.auto-style1 { height: 20px; }
|
||||
.auto-style2 { background: #ddffca; height: 20px; }
|
||||
.mt-9{margin-bottom:9px;}
|
||||
.exple{margin:10px 0;font-size:18px;}
|
||||
.exple span{font-weight:600;}
|
||||
.mb10{margin-bottom:5px;}
|
||||
.mt10{margin-top:10px;}
|
||||
@media (max-width:640px){
|
||||
.guide_table thead tr th:nth-of-type(3){display:none;}
|
||||
.guide_table tbody tr td.coding_stat_web{display:none;}
|
||||
.guide_table col:nth-of-type(3){display:none;}
|
||||
}
|
||||
@ -1,2 +1 @@
|
||||
@import '_main.scss';
|
||||
@import 'react-toastify/dist/ReactToastify.css';
|
||||
Loading…
x
Reference in New Issue
Block a user