면흐름 설정 pop 수정
This commit is contained in:
parent
a4b3783f1b
commit
855a269c95
@ -153,7 +153,7 @@ export default function CanvasPage() {
|
||||
{/* <EachPropertyChange/> */}
|
||||
|
||||
{/* 면 흐름 설정 */}
|
||||
{/* <DrawingFlow/> */}
|
||||
<DrawingFlow/>
|
||||
|
||||
{/* 지붕모듈선택 */}
|
||||
{/* <RoofModuleOption/> */}
|
||||
|
||||
@ -10,7 +10,7 @@ export default function DrawingFlow(){
|
||||
const [compasDeg, setCompasDeg] = useState(0);
|
||||
return(
|
||||
<WithDraggable isShow={true}>
|
||||
<div className={`modal-pop-wrap lx`}>
|
||||
<div className={`modal-pop-wrap ml`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">面フローの設定 </h1>
|
||||
<button className="modal-close">닫기</button>
|
||||
@ -51,34 +51,36 @@ export default function DrawingFlow(){
|
||||
<label htmlFor="ra02">24方位から選択する (表記は8方位です。)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="compas-box">
|
||||
<div className="compas-box-inner">
|
||||
<div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>13</i></div>
|
||||
<div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}><i>12</i></div>
|
||||
<div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}><i>11</i></div>
|
||||
<div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}><i>10</i></div>
|
||||
<div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}><i>9</i></div>
|
||||
<div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}><i>8</i></div>
|
||||
<div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>7</i></div>
|
||||
<div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}><i>6</i></div>
|
||||
<div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}><i>5</i></div>
|
||||
<div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}><i>4</i></div>
|
||||
<div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}><i>3</i></div>
|
||||
<div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}><i>2</i></div>
|
||||
<div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>1</i></div>
|
||||
<div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}><i>24</i></div>
|
||||
<div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}><i>23</i></div>
|
||||
<div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}><i>22</i></div>
|
||||
<div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}><i>21</i></div>
|
||||
<div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}><i>20</i></div>
|
||||
<div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>19</i></div>
|
||||
<div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}><i>18</i></div>
|
||||
<div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}><i>17</i></div>
|
||||
<div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}><i>16</i></div>
|
||||
<div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}><i>15</i></div>
|
||||
<div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}><i>14</i></div>
|
||||
<div className="compas">
|
||||
<div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></div>
|
||||
<div className="draw-flow-wrap">
|
||||
<div className="compas-box">
|
||||
<div className="compas-box-inner">
|
||||
<div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>13</i></div>
|
||||
<div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}><i>12</i></div>
|
||||
<div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}><i>11</i></div>
|
||||
<div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}><i>10</i></div>
|
||||
<div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}><i>9</i></div>
|
||||
<div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}><i>8</i></div>
|
||||
<div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>7</i></div>
|
||||
<div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}><i>6</i></div>
|
||||
<div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}><i>5</i></div>
|
||||
<div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}><i>4</i></div>
|
||||
<div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}><i>3</i></div>
|
||||
<div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}><i>2</i></div>
|
||||
<div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>1</i></div>
|
||||
<div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}><i>24</i></div>
|
||||
<div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}><i>23</i></div>
|
||||
<div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}><i>22</i></div>
|
||||
<div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}><i>21</i></div>
|
||||
<div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}><i>20</i></div>
|
||||
<div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>19</i></div>
|
||||
<div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}><i>18</i></div>
|
||||
<div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}><i>17</i></div>
|
||||
<div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}><i>16</i></div>
|
||||
<div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}><i>15</i></div>
|
||||
<div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}><i>14</i></div>
|
||||
<div className="compas">
|
||||
<div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -163,11 +163,15 @@ export default function PublishPage() {
|
||||
<li>2024-10-31</li>
|
||||
<li>*그리드 이동, 보조선 이동, 보조선 복사 pop 수정</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<ul className='mb10'>
|
||||
<li>2024-11-04</li>
|
||||
<li>*배치면 초기설정 pop 이미지 불러오기 영역 수정</li>
|
||||
<li>*견적서 견적 특이사항 영역 닫힘 열림 추가</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>2024-11-05</li>
|
||||
<li>*면 흐름 설정 pop 수정</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className="t-center">2024-10-28</td>
|
||||
</tr>
|
||||
|
||||
@ -1157,6 +1157,10 @@ $alert-color: #101010;
|
||||
.object-direction-wrap{
|
||||
flex: 1;
|
||||
}
|
||||
&:first-child{
|
||||
flex: none;
|
||||
width: 195px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1229,6 +1233,7 @@ $alert-color: #101010;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
i{
|
||||
color: #fff;
|
||||
@ -1253,6 +1258,9 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
|
||||
.draw-flow-wrap{
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
// 지붕모듈선택
|
||||
.roof-module-tab{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user