forked from AcaMate/AcaMate_Web
[✨] MainLayout 수정 중 2
This commit is contained in:
parent
deba36e3d5
commit
9dcf0db303
|
|
@ -1,24 +1,26 @@
|
|||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="page">
|
||||
<div class="top-row navbar navbar-dark bg-dark px-3">
|
||||
<!-- 상단 네비게이션 (떠 있음) -->
|
||||
<div class="top-nav">
|
||||
<div class="top-title">
|
||||
@* <TopMenu /> *@
|
||||
<h1 class = "prj-title">PROJECT</h1>
|
||||
</div>
|
||||
|
||||
<div class="top-menu">
|
||||
<TopMenu />
|
||||
<h1 class="prj-title">PROJECT</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="side-menu">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<!-- 본문 콘텐츠 -->
|
||||
<main class="content-container">
|
||||
<article class="content">
|
||||
@Body
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 하단 네비게이션 (고정) -->
|
||||
<div class="bottom-left-btn">
|
||||
<button class="btn-primary">TEST</button>
|
||||
</div>
|
||||
|
||||
@* <div class="bottom-right-btn"> *@
|
||||
@* <button class="btn-primary">TEST</button> *@
|
||||
@* </div> *@
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,93 +1,48 @@
|
|||
/* 전체 페이지 wrapper */
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
/* TopNav를 화면 위에 떠 있게 설정 */
|
||||
.top-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #ddd;
|
||||
z-index: 100;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.top-title {
|
||||
width: 250px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.top-menu {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* 본문 구조 */
|
||||
main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin-top: 3.5rem;
|
||||
overflow: hidden;
|
||||
/*height: calc(100vh - 3.5rem);*/
|
||||
}
|
||||
|
||||
.side-menu {
|
||||
width: 250px;
|
||||
background: linear-gradient(180deg, rgb(5, 39, 103), #3a0647);
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* ✅ 모바일 대응 */
|
||||
@media (max-width: 768px) {
|
||||
.top-row {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-title {
|
||||
width: auto;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.top-menu {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
main {
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 3.5rem);
|
||||
}
|
||||
|
||||
.side-menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
}
|
||||
padding: 1.5rem 2rem;
|
||||
background-color: rgba(255, 255, 255, 0.95); /* 반투명 배경 */
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* 타이틀 텍스트 */
|
||||
.prj-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
color: var(--text-title);
|
||||
}
|
||||
|
||||
/* 메뉴 영역 */
|
||||
.top-menu {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.bottom-left-btn {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 40px;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.95); /* 반투명 배경 */
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
|
@ -101,3 +101,50 @@ a, .btn-link {
|
|||
code {
|
||||
color: #c02d76;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
/* Disable */
|
||||
--disable-light: #F8F8F8;
|
||||
--disable-normal: #B8B9B4;
|
||||
--disable-dark: #8A8B87;
|
||||
--disable-darker: #40413F;
|
||||
|
||||
/* Information */
|
||||
--information-light: #F7FBF8;
|
||||
--information-normal: #B2DBBB;
|
||||
--information-dark: #86A48C;
|
||||
--information-darker: #3E4D41;
|
||||
|
||||
/* Point */
|
||||
--point-light: #F9FBFF;
|
||||
--point-normal: #C2D6FA;
|
||||
--point-dark: #92A1BC;
|
||||
--point-darker: #444B58;
|
||||
|
||||
/* Second */
|
||||
--second-light: #F2F0ED;
|
||||
--second-normal: #79654E;
|
||||
--second-dark: #5D4C3B;
|
||||
--second-darker: #2A231B;
|
||||
|
||||
/* Normal */
|
||||
--normal-light: #FDFCFB;
|
||||
--normal-normal: #EBDFD2;
|
||||
--normal-dark: #B0A79E;
|
||||
--normal-darker: #524E4A;
|
||||
|
||||
/* Danger */
|
||||
--danger-light: #FFF9F9;
|
||||
--danger-normal: #FDC6C3;
|
||||
--danger-dark: #BE9592;
|
||||
--danger-darker: #594544;
|
||||
|
||||
/* 기타 텍스트 및 상태 */
|
||||
--text-title: #1D1D1D;
|
||||
--text-detail: #545454;
|
||||
--text-disabled: #8E8E8E;
|
||||
--text-white: #FFFFFF;
|
||||
--text-black: #000000;
|
||||
--text-border: #C6C6C6;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user