Merge remote-tracking branch 'origin/main'
This commit is contained in:
yoosangwook
commit
f8b0485479
10
public/static/images/canvas/eaves_icon01.svg
Normal file
10
public/static/images/canvas/eaves_icon01.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.75" width="30" height="30" fill="#45CD7D"/>
|
||||
<mask id="mask0_4083_3047" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="30">
|
||||
<rect x="0.75" width="30" height="30" fill="#45CD7D"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_4083_3047)">
|
||||
<path d="M0.5 -0.5L16.5 13.5L32 -1" stroke="black" stroke-width="2"/>
|
||||
<path d="M16.5 13V30" stroke="black" stroke-width="2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 499 B |
10
public/static/images/canvas/eaves_icon02.svg
Normal file
10
public/static/images/canvas/eaves_icon02.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" width="30" height="30" fill="#45CD7D"/>
|
||||
<mask id="mask0_4083_3055" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="30" height="30">
|
||||
<rect x="1" width="30" height="30" fill="#45CD7D"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_4083_3055)">
|
||||
<path d="M16 7V35" stroke="black" stroke-width="2"/>
|
||||
<path d="M1 -1L8 7H26L32 -1" stroke="black" stroke-width="2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 483 B |
15
public/static/images/canvas/eaves_icon03.svg
Normal file
15
public/static/images/canvas/eaves_icon03.svg
Normal file
@ -0,0 +1,15 @@
|
||||
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1.25" width="30" height="30" fill="white"/>
|
||||
<mask id="mask0_4083_3069" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="31" height="30">
|
||||
<rect x="1.25" width="30" height="30" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_4083_3069)">
|
||||
<path d="M1 4H16V30" stroke="black" stroke-width="2"/>
|
||||
<path d="M1 30.5L16 4.5" stroke="black" stroke-width="2"/>
|
||||
<rect x="18" y="3" width="14" height="1" fill="#ED0004"/>
|
||||
<rect x="6" y="26" width="26" height="1" fill="#ED0004"/>
|
||||
<rect x="23.5" y="7" width="1" height="16" fill="black"/>
|
||||
<path d="M21.5 9L24 6.5L26.5 9" stroke="black"/>
|
||||
<path d="M21.5 20.5L24 23L26.5 20.5" stroke="black"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 760 B |
9
public/static/images/canvas/eaves_icon04.svg
Normal file
9
public/static/images/canvas/eaves_icon04.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.75" width="30" height="30" fill="#45CD7D"/>
|
||||
<mask id="mask0_4083_3140" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="30">
|
||||
<rect x="0.5" width="30" height="30" fill="#45CD7D"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_4083_3140)">
|
||||
<path d="M15.5 0V30" stroke="black" stroke-width="2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 427 B |
10
public/static/images/canvas/eaves_icon05.svg
Normal file
10
public/static/images/canvas/eaves_icon05.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.75" width="30" height="30" fill="white"/>
|
||||
<mask id="mask0_4083_3151" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="30">
|
||||
<rect x="0.75" width="30" height="30" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_4083_3151)">
|
||||
<path d="M3.5 30V20L17.5 6H31" stroke="black" stroke-width="2"/>
|
||||
<path d="M28 15.5C28 21.503 22.2579 26.5 15 26.5C7.74211 26.5 2 21.503 2 15.5C2 9.49705 7.74211 4.5 15 4.5C22.2579 4.5 28 9.49705 28 15.5Z" stroke="#ED0004"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 593 B |
18
public/static/images/canvas/eaves_icon06.svg
Normal file
18
public/static/images/canvas/eaves_icon06.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="30" height="30" fill="#45CD7D"/>
|
||||
<mask id="path-1-inside-1_4083_3261" fill="white">
|
||||
<path d="M0 13H22V30H0V13Z"/>
|
||||
</mask>
|
||||
<path d="M22 13H24V11H22V13ZM0 15H22V11H0V15ZM20 13V30H24V13H20Z" fill="black" mask="url(#path-1-inside-1_4083_3261)"/>
|
||||
<rect x="2" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="2" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="2" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="2" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="2" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="13" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="13" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="13" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="13" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="13" y="15" width="2" height="15" fill="black"/>
|
||||
<rect width="22" height="13" fill="#AA5234"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 969 B |
23
public/static/images/canvas/eaves_icon07.svg
Normal file
23
public/static/images/canvas/eaves_icon07.svg
Normal file
@ -0,0 +1,23 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="30" height="30" fill="#45CD7D"/>
|
||||
<mask id="path-1-inside-1_4083_3372" fill="white">
|
||||
<path d="M0 13H22V30H0V13Z"/>
|
||||
</mask>
|
||||
<path d="M22 13H24V11H22V13ZM0 15H22V11H0V15ZM20 13V30H24V13H20Z" fill="black" mask="url(#path-1-inside-1_4083_3372)"/>
|
||||
<rect x="2" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="2" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="2" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="2" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="2" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="13" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="13" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="13" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="13" y="15" width="2" height="15" fill="black"/>
|
||||
<rect x="13" y="15" width="2" height="15" fill="black"/>
|
||||
<mask id="path-5-inside-2_4083_3372" fill="white">
|
||||
<path d="M13 8H22V15H13V8Z"/>
|
||||
</mask>
|
||||
<path d="M13 8H22V15H13V8Z" fill="#45CD7D"/>
|
||||
<path d="M13 8V6H11V8H13ZM22 8H24V6H22V8ZM13 10H22V6H13V10ZM20 8V15H24V8H20ZM15 15V8H11V15H15Z" fill="black" mask="url(#path-5-inside-2_4083_3372)"/>
|
||||
<rect width="13" height="13" fill="#AA5234"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
15
public/static/images/canvas/eaves_icon08.svg
Normal file
15
public/static/images/canvas/eaves_icon08.svg
Normal file
@ -0,0 +1,15 @@
|
||||
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1.25" width="30" height="30" fill="white"/>
|
||||
<mask id="mask0_4083_3329" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="31" height="30">
|
||||
<rect x="1.25" width="30" height="30" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_4083_3329)">
|
||||
<path d="M7 4H22V30" stroke="black" stroke-width="2"/>
|
||||
<path d="M-9 26H6V-1.19209e-07" stroke="black" stroke-width="2"/>
|
||||
<rect x="24" y="3" width="8" height="1" fill="#ED0004"/>
|
||||
<rect x="8" y="26" width="24" height="1" fill="#ED0004"/>
|
||||
<rect x="26.5" y="7" width="1" height="16" fill="black"/>
|
||||
<path d="M24.5 9L27 6.5L29.5 9" stroke="black"/>
|
||||
<path d="M24.5 20.5L27 23L29.5 20.5" stroke="black"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 766 B |
34
public/static/images/canvas/shape_menu01.svg
Normal file
34
public/static/images/canvas/shape_menu01.svg
Normal file
@ -0,0 +1,34 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_783)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="64" height="1" fill="white"/>
|
||||
<rect y="63" width="34" height="1" fill="white"/>
|
||||
<rect x="34" y="37" width="30" height="1" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="5" y="5" width="54" height="1" fill="#818181"/>
|
||||
<rect x="5" y="58" width="24" height="1" fill="#818181"/>
|
||||
<rect x="28" y="32" width="31" height="1" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="18" y="18" width="1" height="25" fill="white"/>
|
||||
<path d="M64 0.5L43 18.5L63.5 37" stroke="white"/>
|
||||
<path d="M33 63.5L18 42.5L1 63.5" stroke="white"/>
|
||||
<rect x="19" y="18" width="24" height="1" fill="white"/>
|
||||
<path d="M1 1L18.5 20" stroke="white"/>
|
||||
<path d="M19 19L34 38" stroke="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_783">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
31
public/static/images/canvas/shape_menu02.svg
Normal file
31
public/static/images/canvas/shape_menu02.svg
Normal file
@ -0,0 +1,31 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_808)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="64" height="1" fill="white"/>
|
||||
<rect y="63" width="34" height="1" fill="white"/>
|
||||
<rect x="34" y="37" width="30" height="1" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="5" y="5" width="54" height="1" fill="#818181"/>
|
||||
<rect x="5" y="58" width="24" height="1" fill="#818181"/>
|
||||
<rect x="28" y="32" width="31" height="1" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="28" y="1" width="1" height="31" fill="white"/>
|
||||
<rect x="17.5" y="32.5" width="16" height="31" stroke="white"/>
|
||||
<rect x="18" y="37" width="15" height="1" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_808">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
31
public/static/images/canvas/shape_menu03.svg
Normal file
31
public/static/images/canvas/shape_menu03.svg
Normal file
@ -0,0 +1,31 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_830)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="64" height="1" fill="white"/>
|
||||
<rect y="63" width="34" height="1" fill="white"/>
|
||||
<rect x="34" y="37" width="30" height="1" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="5" y="5" width="54" height="1" fill="#818181"/>
|
||||
<rect x="5" y="58" width="24" height="1" fill="#818181"/>
|
||||
<rect x="28" y="32" width="31" height="1" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="28.5" y="16.5" width="35" height="21" stroke="white"/>
|
||||
<rect x="1" y="32" width="32" height="1" fill="white"/>
|
||||
<rect x="33" y="17" width="1" height="20" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_830">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
30
public/static/images/canvas/shape_menu04.svg
Normal file
30
public/static/images/canvas/shape_menu04.svg
Normal file
@ -0,0 +1,30 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_852)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="64" height="1" fill="white"/>
|
||||
<rect y="63" width="34" height="1" fill="white"/>
|
||||
<rect x="34" y="37" width="30" height="1" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="5" y="5" width="54" height="1" fill="#818181"/>
|
||||
<rect x="5" y="58" width="24" height="1" fill="#818181"/>
|
||||
<rect x="28" y="32" width="31" height="1" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="58" y="1" width="5" height="36" fill="white"/>
|
||||
<path d="M51.5303 19.5303C51.8232 19.2374 51.8232 18.7626 51.5303 18.4697L46.7574 13.6967C46.4645 13.4038 45.9896 13.4038 45.6967 13.6967C45.4038 13.9896 45.4038 14.4645 45.6967 14.7574L49.9393 19L45.6967 23.2426C45.4038 23.5355 45.4038 24.0104 45.6967 24.3033C45.9896 24.5962 46.4645 24.5962 46.7574 24.3033L51.5303 19.5303ZM40 19.75H51V18.25H40V19.75Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_852">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
29
public/static/images/canvas/shape_menu05.svg
Normal file
29
public/static/images/canvas/shape_menu05.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_874)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="44" height="1" transform="matrix(-1 0 0 1 64 0)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(-1 0 0 1 64 63)" fill="white"/>
|
||||
<rect width="10" height="1" transform="matrix(-1 0 0 1 30 37)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(-1 0 0 1 31 37)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(-1 0 0 1 31 37)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(-1 0 0 1 64 1)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(-1 0 0 1 64 1)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(-1 0 0 1 21 1)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(-1 0 0 1 21 1)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(-1 0 0 1 59 5)" fill="#818181"/>
|
||||
<rect width="24" height="1" transform="matrix(-1 0 0 1 59 58)" fill="#818181"/>
|
||||
<rect width="11" height="1" transform="matrix(-1 0 0 1 36 32)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(-1 0 0 1 36 33)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(-1 0 0 1 36 33)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(-1 0 0 1 59 5)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(-1 0 0 1 59 5)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(-1 0 0 1 26 5)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(-1 0 0 1 26 5)" fill="#818181"/>
|
||||
<path d="M4.46967 32.5303C4.17678 32.2374 4.17678 31.7626 4.46967 31.4697L9.24264 26.6967C9.53553 26.4038 10.0104 26.4038 10.3033 26.6967C10.5962 26.9896 10.5962 27.4645 10.3033 27.7574L6.06066 32L10.3033 36.2426C10.5962 36.5355 10.5962 37.0104 10.3033 37.3033C10.0104 37.5962 9.53553 37.5962 9.24264 37.3033L4.46967 32.5303ZM16 32.75H5V31.25H16V32.75Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_874">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
29
public/static/images/canvas/shape_menu06.svg
Normal file
29
public/static/images/canvas/shape_menu06.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_894)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="44" height="1" transform="matrix(1 0 0 -1 0 64)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(1 0 0 -1 0 1)" fill="white"/>
|
||||
<rect width="10" height="1" transform="matrix(1 0 0 -1 34 27)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(1 0 0 -1 33 27)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(1 0 0 -1 33 27)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(1 0 0 -1 0 63)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(1 0 0 -1 0 63)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(1 0 0 -1 43 63)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(1 0 0 -1 43 63)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(1 0 0 -1 5 59)" fill="#818181"/>
|
||||
<rect width="24" height="1" transform="matrix(1 0 0 -1 5 6)" fill="#818181"/>
|
||||
<rect width="11" height="1" transform="matrix(1 0 0 -1 28 32)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(1 0 0 -1 28 31)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(1 0 0 -1 28 31)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(1 0 0 -1 5 59)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(1 0 0 -1 5 59)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(1 0 0 -1 38 59)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(1 0 0 -1 38 59)" fill="#818181"/>
|
||||
<path d="M59.5303 32.5303C59.8232 32.2374 59.8232 31.7626 59.5303 31.4697L54.7574 26.6967C54.4645 26.4038 53.9896 26.4038 53.6967 26.6967C53.4038 26.9896 53.4038 27.4645 53.6967 27.7574L57.9393 32L53.6967 36.2426C53.4038 36.5355 53.4038 37.0104 53.6967 37.3033C53.9896 37.5962 54.4645 37.5962 54.7574 37.3033L59.5303 32.5303ZM48 32.75H59V31.25H48V32.75Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_894">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
29
public/static/images/canvas/shape_menu07.svg
Normal file
29
public/static/images/canvas/shape_menu07.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_914)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="44" height="1" transform="matrix(0 1 1 0 0 0)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(0 1 1 0 63 0)" fill="white"/>
|
||||
<rect width="10" height="1" transform="matrix(0 1 1 0 37 34)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(0 1 1 0 37 33)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(0 1 1 0 37 33)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(0 1 1 0 1 0)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(0 1 1 0 1 0)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(0 1 1 0 1 43)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(0 1 1 0 1 43)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(0 1 1 0 5 5)" fill="#818181"/>
|
||||
<rect width="24" height="1" transform="matrix(0 1 1 0 58 5)" fill="#818181"/>
|
||||
<rect width="11" height="1" transform="matrix(0 1 1 0 32 28)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(0 1 1 0 33 28)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(0 1 1 0 33 28)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(0 1 1 0 5 5)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(0 1 1 0 5 5)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(0 1 1 0 5 38)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(0 1 1 0 5 38)" fill="#818181"/>
|
||||
<path d="M33.0303 59.0303C32.7374 59.3232 32.2626 59.3232 31.9697 59.0303L27.1967 54.2574C26.9038 53.9645 26.9038 53.4896 27.1967 53.1967C27.4896 52.9038 27.9645 52.9038 28.2574 53.1967L32.5 57.4393L36.7426 53.1967C37.0355 52.9038 37.5104 52.9038 37.8033 53.1967C38.0962 53.4896 38.0962 53.9645 37.8033 54.2574L33.0303 59.0303ZM33.25 47.5V58.5H31.75V47.5H33.25Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_914">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
29
public/static/images/canvas/shape_menu08.svg
Normal file
29
public/static/images/canvas/shape_menu08.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_934)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="44" height="1" transform="matrix(0 -1 -1 0 64 64)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(0 -1 -1 0 1 64)" fill="white"/>
|
||||
<rect width="10" height="1" transform="matrix(0 -1 -1 0 27 30)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(0 -1 -1 0 27 31)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(0 -1 -1 0 27 31)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(0 -1 -1 0 63 64)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(0 -1 -1 0 63 64)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(0 -1 -1 0 63 21)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(0 -1 -1 0 63 21)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(0 -1 -1 0 59 59)" fill="#818181"/>
|
||||
<rect width="24" height="1" transform="matrix(0 -1 -1 0 6 59)" fill="#818181"/>
|
||||
<rect width="11" height="1" transform="matrix(0 -1 -1 0 32 36)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(0 -1 -1 0 31 36)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(0 -1 -1 0 31 36)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(0 -1 -1 0 59 59)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(0 -1 -1 0 59 59)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(0 -1 -1 0 59 26)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(0 -1 -1 0 59 26)" fill="#818181"/>
|
||||
<path d="M33.0303 4.96967C32.7374 4.67678 32.2626 4.67678 31.9697 4.96967L27.1967 9.74264C26.9038 10.0355 26.9038 10.5104 27.1967 10.8033C27.4896 11.0962 27.9645 11.0962 28.2574 10.8033L32.5 6.56066L36.7426 10.8033C37.0355 11.0962 37.5104 11.0962 37.8033 10.8033C38.0962 10.5104 38.0962 10.0355 37.8033 9.74264L33.0303 4.96967ZM33.25 16.5V5.5H31.75V16.5H33.25Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_934">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@ -2,12 +2,17 @@
|
||||
|
||||
import CanvasLayout from '@/components/canvas/CanvasLayout'
|
||||
import CanvasMenu from '@/components/canvas/CanvasMenu'
|
||||
import AuxiliarylineOption from '@/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption'
|
||||
import EvaseKerabaOption from '@/components/canvas/modal/eaves_keraba/EavesKerabaOption'
|
||||
import GridCopy from '@/components/canvas/modal/gridoption/GridCopy'
|
||||
import GridMove from '@/components/canvas/modal/gridoption/GridMove'
|
||||
import GridOption from '@/components/canvas/modal/gridoption/GridOption'
|
||||
import ManualRoofShape from '@/components/canvas/modal/manualroofshape/ManualRoofShape'
|
||||
import MovingUpDonw from '@/components/canvas/modal/movingupdown/MovingUpDown'
|
||||
import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
|
||||
import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
|
||||
import PropertiesSetting from '@/components/canvas/modal/propertiessetting/PropertiesSetting'
|
||||
import RoofShapeOption from '@/components/canvas/modal/roofshapeoption/RoofShapeOption'
|
||||
import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
|
||||
import Header from '@/components/layout/Header'
|
||||
import { modalState } from '@/store/modalAtom'
|
||||
@ -28,13 +33,13 @@ export default function CanvasPage() {
|
||||
<CanvasLayout menuValue={menuValue}/>
|
||||
</div>
|
||||
{/* 배치면 초기 설정 */}
|
||||
{/* <PlacementSettingPop/> */}
|
||||
<PlacementSettingPop/>
|
||||
|
||||
{/* 캔버스 기본 셋팅 */}
|
||||
{/* {modalOption.option && <SettingModal01/>} */}
|
||||
|
||||
{/* 점·선 그리드 설정 */}
|
||||
{/* {modalOption.gridoption && <GridOption/>} */}
|
||||
{modalOption.gridoption && <GridOption/>}
|
||||
{/* {modalOption.gridcopy && <GridCopy/>} */}
|
||||
{/* {modalOption.gridmove && <GridMove/>} */}
|
||||
|
||||
@ -42,7 +47,22 @@ export default function CanvasPage() {
|
||||
{/* {modalOption.outerwall && <OuterLineWall/>} */}
|
||||
|
||||
{/* 외벽선 속성 설정 */}
|
||||
<PropertiesSetting/>
|
||||
{/* <PropertiesSetting/> */}
|
||||
|
||||
{/* 지붕형상 설정 */}
|
||||
{/* <RoofShapeOption/> */}
|
||||
|
||||
{/* 지붕형상 수동 설정 */}
|
||||
{/* <ManualRoofShape/> */}
|
||||
|
||||
{/* 보조선 작성 */}
|
||||
{/* <AuxiliarylineOption/> */}
|
||||
|
||||
{/* 처마∙케라바 변경 */}
|
||||
{/* <EvaseKerabaOption/> */}
|
||||
|
||||
{/* 동선이동∙형 올림 내림 */}
|
||||
{/* <MovingUpDonw/> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
export default function AuxiliaryTab01(){
|
||||
return(
|
||||
<div className="outline-wrap">
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">長さ(mm)</span>
|
||||
<div className="input-grid" style={{width: '63px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<button className="reset-btn"></button>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span>方向 (矢印)</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,42 @@
|
||||
export default function AuxiliaryTab02(){
|
||||
return(
|
||||
<div className="outline-wrap">
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">長さ(mm)</span>
|
||||
<div className="input-grid" style={{width: '63px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<button className="reset-btn"></button>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span>方向 (矢印)</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">長さ(mm)</span>
|
||||
<div className="input-grid" style={{width: '63px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<button className="reset-btn"></button>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span>方向 (矢印)</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,64 @@
|
||||
export default function AuxiliaryTab03(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-wrap">
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">角度</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">長さ(mm)</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>方向 (矢印)</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">角度</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">長さ(mm)</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>方向 (矢印)</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,64 @@
|
||||
export default function AuxiliaryTab04(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-wrap">
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">角度</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">長さ(mm)</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>方向 (矢印)</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">角度</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">長さ(mm)</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>方向 (矢印)</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,50 @@
|
||||
export default function AuxiliaryTab05(){
|
||||
return(
|
||||
<div className="outline-wrap">
|
||||
<div className="outline-inner">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">対角線の<br/>長さ(mm)</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">長さ(mm)</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>方向 (矢印)</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">長さ(mm)</span>
|
||||
<div className="input-grid" style={{width: '98px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={8000}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span>方向 (矢印)</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,55 @@
|
||||
import WithDraggable from "@/components/common/draggable/withDraggable";
|
||||
import { useState } from "react";
|
||||
import AuxiliaryTab01 from "./AuxiliaryTab01";
|
||||
import AuxiliaryTab02 from "./AuxiliaryTab02";
|
||||
import AuxiliaryTab03 from "./AuxiliaryTab03";
|
||||
import AuxiliaryTab04 from "./AuxiliaryTab04";
|
||||
import AuxiliaryTab05 from "./AuxiliaryTab05";
|
||||
|
||||
const buttonMenu = [
|
||||
{id: 1, name: 'ランダムライン'},
|
||||
{id: 2, name: '直角'},
|
||||
{id: 3, name: 'イ・グベ'},
|
||||
{id: 4, name: '角度'},
|
||||
{id: 5, name: '対角線'},
|
||||
]
|
||||
|
||||
export default function AuxiliarylineOption(){
|
||||
const [buttonAct, setButtonAct] = useState(1);
|
||||
|
||||
return(
|
||||
<WithDraggable isShow={true}>
|
||||
<div className={`modal-pop-wrap sm`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">補助線の作成</h1>
|
||||
<button className="modal-close">닫기</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="modal-btn-wrap">
|
||||
{buttonMenu.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`}
|
||||
onClick={() => setButtonAct(item.id)}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">設定</div>
|
||||
{buttonAct === 1 && <AuxiliaryTab01/>}
|
||||
{buttonAct === 2 && <AuxiliaryTab02/>}
|
||||
{buttonAct === 3 && <AuxiliaryTab03/>}
|
||||
{buttonAct === 4 && <AuxiliaryTab04/>}
|
||||
{buttonAct === 5 && <AuxiliaryTab05/>}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5">一変戦に戻る</button>
|
||||
<button className="btn-frame modal act">外壁線確定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
import WithDraggable from "@/components/common/draggable/withDraggable";
|
||||
import { useState } from "react";
|
||||
import EavesKerabaTab01 from "./EavesKerabaTab01";
|
||||
import EavesKerabaTab02 from "./EavesKerabaTab02";
|
||||
import EavesKerabaTab03 from "./EavesKerabaTab03";
|
||||
import EavesKerabaTab04 from "./EavesKerabaTab04";
|
||||
|
||||
const buttonMenu = [
|
||||
{id: 1, name: '軒'},
|
||||
{id: 2, name: '直ケラバ角'},
|
||||
{id: 3, name: '壁取り'},
|
||||
{id: 4, name: '片側の流れ'},
|
||||
]
|
||||
|
||||
export default function EvaseKerabaOption(){
|
||||
const [buttonAct, setButtonAct] = useState(1);
|
||||
|
||||
return(
|
||||
<WithDraggable isShow={true}>
|
||||
<div className={`modal-pop-wrap r`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">軒・ケラバ変更</h1>
|
||||
<button className="modal-close">닫기</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="modal-btn-wrap">
|
||||
{buttonMenu.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`}
|
||||
onClick={() => setButtonAct(item.id)}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">設定</div>
|
||||
{buttonAct === 1 && <EavesKerabaTab01/>}
|
||||
{buttonAct === 2 && <EavesKerabaTab02/>}
|
||||
{buttonAct === 3 && <EavesKerabaTab03/>}
|
||||
{buttonAct === 4 && <EavesKerabaTab04/>}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,70 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function EavesKerabaTab01(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-wrap">
|
||||
<div className="outline-form mb15">
|
||||
<span className="mr10" style={{width: '24px'}}>傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">傾斜</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '24px'}}>出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-wrap">
|
||||
<div className="eaves-keraba-table">
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">通常</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="eaves-keraba-ico act">
|
||||
<Image src="/static/images/canvas/eaves_icon01.svg" alt="react" width={30} height={30} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<label htmlFor="ra02">パルザック屋根</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="eaves-keraba-ico">
|
||||
<Image src="/static/images/canvas/eaves_icon02.svg" alt="react" width={30} height={30} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="outline-form">
|
||||
{/* <span className="mr10" style={{width: '24px'}}>出幅</span> */}
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="eaves-keraba-ico ">
|
||||
<Image src="/static/images/canvas/eaves_icon03.svg" alt="react" width={30} height={30} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function EavesKerabaTab02(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-wrap">
|
||||
<div className="outline-form ">
|
||||
<span className="mr10" style={{width: '24px'}}>出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-wrap">
|
||||
<div className="eaves-keraba-table">
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">通常</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="eaves-keraba-ico act">
|
||||
<Image src="/static/images/canvas/eaves_icon04.svg" alt="react" width={30} height={30} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<label htmlFor="ra02"> 半折</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="eaves-keraba-ico">
|
||||
<Image src="/static/images/canvas/eaves_icon01.svg" alt="react" width={30} height={30} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '24px'}}>傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="eaves-keraba-ico ">
|
||||
<Image src="/static/images/canvas/eaves_icon05.svg" alt="react" width={30} height={30} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '24px'}}>出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="eaves-keraba-ico ">
|
||||
<Image src="/static/images/canvas/eaves_icon03.svg" alt="react" width={30} height={30} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function EavesKerabaTab03(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-wrap">
|
||||
<div className="guide">
|
||||
家屋などの壁に面する屋根を作成します。
|
||||
</div>
|
||||
<div className="eaves-keraba-table">
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">袖なし</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="eaves-keraba-ico act">
|
||||
<Image src="/static/images/canvas/eaves_icon06.svg" alt="react" width={30} height={30} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<label htmlFor="ra02">袖あり</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="eaves-keraba-ico">
|
||||
<Image src="/static/images/canvas/eaves_icon07.svg" alt="react" width={30} height={30} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '24px'}}>出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="eaves-keraba-ico ">
|
||||
<Image src="/static/images/canvas/eaves_icon08.svg" alt="react" width={30} height={30} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function EavesKerabaTab04(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-wrap">
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '24px'}}>出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -20,7 +20,7 @@ export default function GridMove() {
|
||||
<WithDraggable isShow={true}>
|
||||
<div className={`modal-pop-wrap xm ${modalOption.gridmove ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">グリッドのコピー </h1>
|
||||
<h1 className="title">グリッド移動 </h1>
|
||||
<button className="modal-close" onClick={HandleClickClose}>닫기</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
|
||||
@ -9,7 +9,7 @@ export default function GridOption() {
|
||||
const [close, setClose] = useState(false)
|
||||
|
||||
const SelectOption = [
|
||||
{name: 'オンライン保証シ',}, {name: 'ステム'}
|
||||
{name: '原寸',}, {name: '原寸'}, {name: '原寸'}, {name: '原寸'}
|
||||
]
|
||||
|
||||
const HandleClickClose = () => {
|
||||
|
||||
@ -0,0 +1,50 @@
|
||||
import WithDraggable from "@/components/common/draggable/withDraggable";
|
||||
import { useState } from "react";
|
||||
import ManualTab01 from "./ManualTab01";
|
||||
|
||||
const buttonMenu = [
|
||||
{id: 1, name: '軒'},
|
||||
{id: 2, name: 'ケラバ'},
|
||||
{id: 3, name: '漂流'},
|
||||
]
|
||||
|
||||
export default function ManualRoofShape(){
|
||||
const [buttonAct, setButtonAct] = useState(1);
|
||||
return(
|
||||
<WithDraggable isShow={true}>
|
||||
<div className={`modal-pop-wrap xxm`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">屋根形状の設定</h1>
|
||||
<button className="modal-close">닫기</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="modal-btn-wrap">
|
||||
{buttonMenu.map((item) => (
|
||||
<button
|
||||
className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`}
|
||||
onClick={() => setButtonAct(item.id)}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="modal-bottom-border-bx">
|
||||
<div className="setting-tit">設定</div>
|
||||
<div className="discrimination-box">
|
||||
{buttonAct === 1 && <ManualTab01/>}
|
||||
{buttonAct === 2 && <ManualTab01/>}
|
||||
{buttonAct === 3 && <ManualTab01/>}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame sub-tab mr5">一変戦に戻る</button>
|
||||
<button className="btn-frame sub-tab act">適用</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">設定完了</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
34
src/components/canvas/modal/manualroofshape/ManualTab01.jsx
Normal file
34
src/components/canvas/modal/manualroofshape/ManualTab01.jsx
Normal file
@ -0,0 +1,34 @@
|
||||
export default function ManualTab01() {
|
||||
return(
|
||||
<>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '63px'}}>傾斜</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '63px'}}>軒の</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '63px'}}>ケラバ 出幅</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '63px'}}>片流幅</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
46
src/components/canvas/modal/movingupdown/MovingTab01.jsx
Normal file
46
src/components/canvas/modal/movingupdown/MovingTab01.jsx
Normal file
@ -0,0 +1,46 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function MovingTab01(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-wrap">
|
||||
<div className="guide">
|
||||
家屋などの壁に面する屋根を作成します。
|
||||
</div>
|
||||
<div className="eaves-keraba-table">
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">高さ変更：下、左</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<label htmlFor="ra02">高さ変更：上、右</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
46
src/components/canvas/modal/movingupdown/MovingTab02.jsx
Normal file
46
src/components/canvas/modal/movingupdown/MovingTab02.jsx
Normal file
@ -0,0 +1,46 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function MovingTab02(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-wrap">
|
||||
<div className="guide">
|
||||
を選択して幅を指定してください桁の異なる辺
|
||||
</div>
|
||||
<div className="eaves-keraba-table">
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">高さ変更：下、左</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<label htmlFor="ra02">高さ変更：上、右</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
43
src/components/canvas/modal/movingupdown/MovingUpDown.jsx
Normal file
43
src/components/canvas/modal/movingupdown/MovingUpDown.jsx
Normal file
@ -0,0 +1,43 @@
|
||||
import WithDraggable from "@/components/common/draggable/withDraggable";
|
||||
import { useState } from "react";
|
||||
import MovingTab01 from "./MovingTab01";
|
||||
|
||||
const buttonMenu = [
|
||||
{id: 1, name: '銅線の移動軒'},
|
||||
{id: 2, name: '型上げ・降り'},
|
||||
]
|
||||
|
||||
export default function MovingUpDonw(){
|
||||
const [buttonAct, setButtonAct] = useState(1);
|
||||
|
||||
return(
|
||||
<div className={`modal-pop-wrap r`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">軒・ケラバ変更</h1>
|
||||
<button className="modal-close">닫기</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="modal-btn-wrap">
|
||||
{buttonMenu.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`}
|
||||
onClick={() => setButtonAct(item.id)}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">設定</div>
|
||||
{buttonAct === 1 && <MovingTab01/>}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
// <WithDraggable isShow={true}>
|
||||
// </WithDraggable>
|
||||
)
|
||||
}
|
||||
@ -63,11 +63,14 @@ export default function OuterLineWall (){
|
||||
対角線
|
||||
</button>
|
||||
</div>
|
||||
{buttonAct === 1 && <Tab01/>}
|
||||
{buttonAct === 2 && <Tab02/>}
|
||||
{buttonAct === 3 && <Tab03/>}
|
||||
{buttonAct === 4 && <Tab04/>}
|
||||
{buttonAct === 5 && <Tab05/>}
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">設定</div>
|
||||
{buttonAct === 1 && <Tab01/>}
|
||||
{buttonAct === 2 && <Tab02/>}
|
||||
{buttonAct === 3 && <Tab03/>}
|
||||
{buttonAct === 4 && <Tab04/>}
|
||||
{buttonAct === 5 && <Tab05/>}
|
||||
</div>
|
||||
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5">一変戦に戻る</button>
|
||||
|
||||
@ -1,9 +1,21 @@
|
||||
import WithDraggable from "@/components/common/draggable/withDraggable";
|
||||
import PlacementGuidePop from "./PlacementGuidePop";
|
||||
import RoofingMaterialGudiePop from "./RoofingMaterialGuidePop";
|
||||
import Qselect from "@/components/common/select/Qselect";
|
||||
const SelectOption01 = [
|
||||
{name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'}
|
||||
]
|
||||
const SelectOption02 = [
|
||||
{name: '265',}, {name: '265'}, {name: '265'}, {name: '265'}
|
||||
]
|
||||
const SelectOption03 = [
|
||||
{name: '235',}, {name: '235'}, {name: '235'}, {name: '235'}
|
||||
]
|
||||
const SelectOption04 = [
|
||||
{name: '455'}, {name: '455'}, {name: '455'}, {name: '455'}
|
||||
]
|
||||
|
||||
export default function PlacementSettingPop(){
|
||||
|
||||
return(
|
||||
<WithDraggable isShow={true}>
|
||||
<div className={`modal-pop-wrap l`}>
|
||||
@ -64,33 +76,25 @@ export default function PlacementSettingPop(){
|
||||
</th>
|
||||
<td>
|
||||
<div className="placement-option">
|
||||
<div className="select-wrap" style={{width: '171px'}}>
|
||||
<select className="select-light dark" name="" id="" >
|
||||
<option>瓦53A</option>
|
||||
</select>
|
||||
<div className="grid-select" style={{width: '171px'}}>
|
||||
<Qselect title={'瓦53A'} option={SelectOption01}/>
|
||||
</div>
|
||||
<div className="flex-ment">
|
||||
<span>W</span>
|
||||
<div className="select-wrap" style={{width: '84px'}}>
|
||||
<select className="select-light dark" name="" id="" >
|
||||
<option>265</option>
|
||||
</select>
|
||||
<div className="grid-select" style={{width: '84px'}}>
|
||||
<Qselect title={'265'} option={SelectOption02}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="select-wrap" style={{width: '84px'}}>
|
||||
<select className="select-light dark" name="" id="" >
|
||||
<option>235</option>
|
||||
</select>
|
||||
<div className="grid-select" style={{width: '84px'}}>
|
||||
<Qselect title={'235'} option={SelectOption03}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-ment">
|
||||
<span>垂木の間隔</span>
|
||||
<div className="select-wrap" style={{width: '84px'}}>
|
||||
<select className="select-light dark" name="" id="" >
|
||||
<option>455</option>
|
||||
</select>
|
||||
<div className="grid-select right" style={{width: '84px'}}>
|
||||
<Qselect title={'455'} option={SelectOption04}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -104,8 +108,8 @@ export default function PlacementSettingPop(){
|
||||
<button className="btn-frame modal act">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<PlacementGuidePop/>
|
||||
<RoofingMaterialGudiePop/>
|
||||
{/* <PlacementGuidePop/>
|
||||
<RoofingMaterialGudiePop/> */}
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
|
||||
@ -0,0 +1,56 @@
|
||||
'use client'
|
||||
import WithDraggable from "@/components/common/draggable/withDraggable";
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import ShapeTab01 from "./ShapeTab01";
|
||||
import ShapeTab02 from "./ShapeTab02";
|
||||
import ShapeTab03 from "./ShapeTab03";
|
||||
import ShapeTab04 from "./ShapeTab04";
|
||||
import ShapeTabPosition from "./ShapeTabPosition";
|
||||
|
||||
const shapeMenu = [
|
||||
{id:1, name:'龍丸屋根'},
|
||||
{id:2, name:'Aパターン'},
|
||||
{id:3, name:'Bパターン'},
|
||||
{id:4, name:'別に設定'},
|
||||
{id:5, name:'立つ'},
|
||||
{id:6, name:'ドン'},
|
||||
{id:7, name:'M'},
|
||||
{id:8, name:'北'},
|
||||
]
|
||||
export default function RoofShapeOption() {
|
||||
const [shapeNum, setShapeNum] = useState(1);
|
||||
return(
|
||||
<WithDraggable isShow={true}>
|
||||
<div className={`modal-pop-wrap lr`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">屋根形状の設定</h1>
|
||||
<button className="modal-close">닫기</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="roof-shape-menu">
|
||||
{shapeMenu.map((item) => (
|
||||
<button key={item.id} className={`shape-menu-box ${shapeNum === item.id ? 'act': ''}`} onClick={() => setShapeNum(item.id)}>
|
||||
<div className="shape-box">
|
||||
<Image src={`/static/images/canvas/shape_menu0${item.id}.svg`} alt="react" width={64} height={64} />
|
||||
</div>
|
||||
<div className="shape-title">{item.name}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">設定</div>
|
||||
{shapeNum === 1 && <ShapeTab01/>}
|
||||
{shapeNum === 2 && <ShapeTab02/>}
|
||||
{shapeNum === 3 && <ShapeTab03/>}
|
||||
{shapeNum === 4 && <ShapeTab04/>}
|
||||
{(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && <ShapeTabPosition/>}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">設定完了</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
20
src/components/canvas/modal/roofshapeoption/ShapeTab01.jsx
Normal file
20
src/components/canvas/modal/roofshapeoption/ShapeTab01.jsx
Normal file
@ -0,0 +1,20 @@
|
||||
export default function ShapeTab01() {
|
||||
return(
|
||||
<div className="setting-box">
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '24px'}}>傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '24px'}}>軒の</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
27
src/components/canvas/modal/roofshapeoption/ShapeTab02.jsx
Normal file
27
src/components/canvas/modal/roofshapeoption/ShapeTab02.jsx
Normal file
@ -0,0 +1,27 @@
|
||||
export default function ShapeTab02() {
|
||||
return(
|
||||
<div className="setting-box">
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={4}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>軒の</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={500}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '60px'}}>ケラバ出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
27
src/components/canvas/modal/roofshapeoption/ShapeTab03.jsx
Normal file
27
src/components/canvas/modal/roofshapeoption/ShapeTab03.jsx
Normal file
@ -0,0 +1,27 @@
|
||||
export default function ShapeTab03() {
|
||||
return(
|
||||
<div className="setting-box">
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={4}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>軒の</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={500}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '60px'}}>ケラバ出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
48
src/components/canvas/modal/roofshapeoption/ShapeTab04.jsx
Normal file
48
src/components/canvas/modal/roofshapeoption/ShapeTab04.jsx
Normal file
@ -0,0 +1,48 @@
|
||||
import { useState } from "react"
|
||||
import DiscriminationTab01 from "./discriminationtab/DiscriminationTab01";
|
||||
import DiscriminationTab02 from "./discriminationtab/DiscriminationTab02";
|
||||
import DiscriminationTab04 from "./discriminationtab/DiscriminationTab04";
|
||||
import DiscriminationTab05 from "./discriminationtab/DiscriminationTab05";
|
||||
import DiscriminationTab06 from "./discriminationtab/DiscriminationTab06";
|
||||
import DiscriminationTab03 from "./discriminationtab/DiscriminationTab03";
|
||||
|
||||
const buttonMenu = [
|
||||
{id: 1, name: '軒'},
|
||||
{id: 2, name: 'ケラバ'},
|
||||
{id: 3, name: '壁'},
|
||||
{id: 4, name: '八作屋根'},
|
||||
{id: 5, name: '半折'},
|
||||
{id: 6, name: '片側の流れ'},
|
||||
]
|
||||
|
||||
export default function ShapeTab04() {
|
||||
const [buttonAct, setButtonAct] = useState(1);
|
||||
return(
|
||||
<div className="setting-box">
|
||||
<div className="discrimination-tab">
|
||||
<div className="modal-btn-wrap sub">
|
||||
{buttonMenu.map((item) => (
|
||||
<button
|
||||
className={`btn-frame sub-tab ${buttonAct === item.id ? 'act' : ''}`}
|
||||
onClick={() => setButtonAct(item.id)}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="discrimination-box">
|
||||
{buttonAct === 1 && <DiscriminationTab01/>}
|
||||
{buttonAct === 2 && <DiscriminationTab02/>}
|
||||
{buttonAct === 3 && <DiscriminationTab03/>}
|
||||
{buttonAct === 4 && <DiscriminationTab04/>}
|
||||
{buttonAct === 5 && <DiscriminationTab05/>}
|
||||
{buttonAct === 6 && <DiscriminationTab06/>}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame sub-tab mr5">一変戦に戻る</button>
|
||||
<button className="btn-frame sub-tab act">適用</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
export default function ShapeTabPosition() {
|
||||
return(
|
||||
<div className="setting-box">
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={4}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>軒の</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={500}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>ケラバ出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '60px'}}>漂流の出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
export default function DiscriminationTab01(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '24px'}}>傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={4}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '24px'}}>軒の</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={500}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
export default function DiscriminationTab02(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-form">
|
||||
<span className="mr10">ケラバ出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={4}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
export default function DiscriminationTab03(){
|
||||
return(
|
||||
<>
|
||||
<div className="d-check-radio pop mb10">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">袖なし</label>
|
||||
</div>
|
||||
<div className="padding-form">
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: 'auto'}}>袖あり</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
export default function DiscriminationTab04(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={4}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>軒の</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={500}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '60px'}}>ケラバ出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
export default function DiscriminationTab05(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>ケラバ出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>半折先幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={800}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '60px'}}>半折先傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={4.5}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
export default function DiscriminationTab06(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-form">
|
||||
<span className="mr10">片流幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={600}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -26,18 +26,23 @@ $alert-color: #101010;
|
||||
border-radius: 4px;
|
||||
background-color: #272727;
|
||||
z-index: 9999999;
|
||||
overflow: hidden;
|
||||
&.r{
|
||||
width: 400px;
|
||||
&.xxm{
|
||||
width: 270px;
|
||||
}
|
||||
&.sm{
|
||||
width: 580px;
|
||||
&.xm{
|
||||
width: 300px;
|
||||
}
|
||||
&.ssm{
|
||||
width: 380px;
|
||||
}
|
||||
&.xm{
|
||||
width: 300px;
|
||||
&.sm{
|
||||
width: 580px;
|
||||
}
|
||||
&.r{
|
||||
width: 400px;
|
||||
}
|
||||
&.lr{
|
||||
width: 440px;
|
||||
}
|
||||
&.l{
|
||||
width: 800px;
|
||||
@ -84,6 +89,7 @@ $alert-color: #101010;
|
||||
align-items: center;
|
||||
padding: 10px 24px;
|
||||
background-color: #000;
|
||||
// overflow: hidden;
|
||||
h1.title{
|
||||
font-size: 13px;
|
||||
color: $pop-color;
|
||||
@ -91,8 +97,8 @@ $alert-color: #101010;
|
||||
}
|
||||
.modal-close{
|
||||
margin-left: auto;
|
||||
color: $pop-color;
|
||||
text-indent: -999999999px;
|
||||
color: transparent;
|
||||
font-size: 0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
|
||||
@ -107,6 +113,13 @@ $alert-color: #101010;
|
||||
button{
|
||||
flex: 1;
|
||||
}
|
||||
&.sub{
|
||||
button{
|
||||
flex: 1 1 auto;
|
||||
padding: 0;
|
||||
}
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
.modal-check-btn-wrap{
|
||||
margin-top: 15px;
|
||||
@ -197,19 +210,17 @@ $alert-color: #101010;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
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;
|
||||
background-color: #3D3D3D;
|
||||
background-color: transparent;
|
||||
border: 1px solid #3D3D3D;
|
||||
border-radius: 2px;
|
||||
padding: 10px;
|
||||
padding: 15px 10px;
|
||||
gap: 20px;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 10px;
|
||||
.grid-input-form{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -236,13 +247,32 @@ $alert-color: #101010;
|
||||
.sort-select{
|
||||
width: 100%;
|
||||
background-color: #313131;
|
||||
min-width: auto;
|
||||
font-size: 12px;
|
||||
border: none;
|
||||
p{
|
||||
font-size: 12px;
|
||||
}
|
||||
> ul{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
&.right{
|
||||
p{
|
||||
text-align: right;
|
||||
}
|
||||
ul{
|
||||
li{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.grid-btn-wrap{
|
||||
padding-top: 15px;
|
||||
text-align: right;
|
||||
button{
|
||||
padding: 0 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -252,7 +282,7 @@ $alert-color: #101010;
|
||||
color: $pop-color;
|
||||
font-weight: $pop-normal-weight;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #3C3C3C;
|
||||
|
||||
}
|
||||
.grid-direction{
|
||||
display: flex;
|
||||
@ -403,7 +433,8 @@ $alert-color: #101010;
|
||||
// 외벽선 그리기
|
||||
.outline-wrap{
|
||||
padding: 24px 0;
|
||||
border-bottom: 1px solid #424242;
|
||||
border-top: 1px solid #424242;
|
||||
|
||||
.outline-inner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -411,13 +442,19 @@ $alert-color: #101010;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.outline-form{
|
||||
// width: 50%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
border-bottom: 1px solid #424242;
|
||||
}
|
||||
}
|
||||
.outline-form{
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
|
||||
span{
|
||||
width: 60px;
|
||||
flex: none;
|
||||
@ -425,6 +462,11 @@ $alert-color: #101010;
|
||||
font-weight: $pop-bold-weight;
|
||||
color: $pop-color;
|
||||
margin-right: 10px;
|
||||
&.thin{
|
||||
width: auto;
|
||||
font-weight: $pop-normal-weight;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.reset-btn{
|
||||
flex: none;
|
||||
@ -468,6 +510,7 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
|
||||
// 외벽선 속성 설정
|
||||
.properties-guide{
|
||||
font-size: $pop-normal-size;
|
||||
color: #AAA;
|
||||
@ -475,12 +518,15 @@ $alert-color: #101010;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.setting-tit{
|
||||
font-size: 13px;
|
||||
color: $pop-color;
|
||||
font-weight: $pop-bold-weight;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.properties-setting-wrap{
|
||||
.setting-tit{
|
||||
font-size: 13px;
|
||||
color: $pop-color;
|
||||
font-weight: $pop-bold-weight;
|
||||
margin-bottom: 10px;
|
||||
&.outer{
|
||||
margin-top: 24px;
|
||||
}
|
||||
.setting-btn-wrap{
|
||||
display: flex;
|
||||
@ -513,4 +559,102 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 지붕형상 설정
|
||||
.roof-shape-menu{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 24px 10px;
|
||||
margin-bottom: 24px;
|
||||
.shape-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 13px;
|
||||
background-color: #3D3D3D;
|
||||
transition: background .15s ease-in-out;
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.shape-title{
|
||||
font-size: $pop-normal-size;
|
||||
font-weight: $pop-bold-weight;
|
||||
color: $pop-color;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
transition: color .15s ease-in-out;
|
||||
}
|
||||
.shape-menu-box{
|
||||
&.act,
|
||||
&:hover{
|
||||
.shape-box{background-color: #008BFF;}
|
||||
.shape-title{color: #008BFF;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting-box{
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid #424242;
|
||||
border-bottom: 1px solid #424242;
|
||||
}
|
||||
.padding-form{
|
||||
padding-left: 23px;
|
||||
}
|
||||
.discrimination-box{
|
||||
padding: 16px 12px;
|
||||
border: 1px solid #3D3D3D;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.modal-bottom-border-bx{
|
||||
margin-top: 24px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid #424242;
|
||||
}
|
||||
|
||||
// 처마∙케라바 변경
|
||||
.eaves-keraba-table{
|
||||
display: table;
|
||||
border-collapse: collapse;
|
||||
.eaves-keraba-item{
|
||||
display: table-row;
|
||||
.eaves-keraba-th,
|
||||
.eaves-keraba-td{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
.eaves-keraba-td{
|
||||
padding-left: 15px;
|
||||
}
|
||||
.eaves-keraba-ico{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
background-color: #3D3D3D;
|
||||
border: 1px solid #3D3D3D;
|
||||
border-radius: 2px;
|
||||
&.act{
|
||||
border: 1px solid #ED0004;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.eaves-keraba-th,
|
||||
.eaves-keraba-td{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.guide{
|
||||
font-size: $pop-normal-size;
|
||||
font-weight: $pop-normal-weight;
|
||||
color: $pop-color;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@ -133,12 +133,16 @@ button{
|
||||
// margin
|
||||
.mt5{margin-top: 5px !important;}
|
||||
.mt10{margin-top: 10px !important;}
|
||||
.mt15{margin-top: 15px !important;}
|
||||
.mb5{margin-bottom: 5px !important;}
|
||||
.mb10{margin-bottom: 10px !important;}
|
||||
.mb15{margin-bottom: 15px !important;}
|
||||
.mr5{margin-right: 5px !important;}
|
||||
.mr10{margin-right: 10px !important;}
|
||||
.mr15{margin-right: 15px !important;}
|
||||
.ml5{margin-left: 5px !important;}
|
||||
.ml10{margin-left: 10px !important;}
|
||||
.ml15{margin-left: 15px !important;}
|
||||
|
||||
// button
|
||||
.btn-frame{
|
||||
@ -189,6 +193,22 @@ button{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
&.sub-tab{
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
line-height: 28px;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
background-color: #2D2D2D;
|
||||
border: 1px solid #393939;
|
||||
color: #aaa;
|
||||
&.act,
|
||||
&:hover{
|
||||
background-color: #414E6C;
|
||||
border: 1px solid #414E6C;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.act{
|
||||
background-color: #1083E3;
|
||||
@ -244,7 +264,7 @@ button{
|
||||
min-width: 100px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
padding: 0 25px 0 10px;
|
||||
background-color: #373737;
|
||||
border: 1px solid #3F3F3F;
|
||||
border-radius: 2px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user