164 lines
2.9 KiB
SCSS
164 lines
2.9 KiB
SCSS
@use "home.variable.module" as home;
|
|
|
|
.layout-home {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.layout-navbar {
|
|
background-color: home.$navbar-bg-color;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
|
|
|
display: grid;
|
|
grid-template-columns: 1fr 70% 1fr;
|
|
align-items: center;
|
|
|
|
.title-container {
|
|
|
|
}
|
|
|
|
.right-container {
|
|
margin-right: 10px;
|
|
justify-self: flex-end;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1vw;
|
|
|
|
.el-avatar:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.layout-menu {
|
|
.el-menu {
|
|
display: flex;
|
|
justify-content: center;
|
|
background-color: home.$navbar-bg-color !important;
|
|
overflow: auto;
|
|
border-bottom: none !important;
|
|
|
|
.el-menu-item, .el-sub-menu__title {
|
|
height: home.$navbar-height;
|
|
font-family: "华文楷体", serif;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.el-icon, span {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-main {
|
|
height: calc(100vh - #{home.$navbar-height});
|
|
overflow: auto;
|
|
background-color: home.$body-bg-color;
|
|
padding: 10px;
|
|
}
|
|
|
|
.layout-main::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.common-view {
|
|
height: 100%;
|
|
|
|
.body-container {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr minmax(400px, 30%);
|
|
gap: 1vw;
|
|
|
|
.left-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1vh;
|
|
|
|
.common-statistics {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
justify-items: center;
|
|
gap: 1vw;
|
|
}
|
|
}
|
|
|
|
.right-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1vh;
|
|
|
|
.common-query {
|
|
align-self: center;
|
|
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
|
|
.add-new {
|
|
position: absolute;
|
|
right: 1%;
|
|
bottom: 2%;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
|
|
font-size: 1.8rem;
|
|
box-shadow: 0 4px 10px #CFCFCF;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.body-container {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
.plan-view {
|
|
.body-container {
|
|
grid-template-columns: 1fr minmax(350px, 30%);
|
|
}
|
|
}
|
|
|
|
.common-section {
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.card-item {
|
|
background-color: #FFFFFF;
|
|
border: 1px solid #FFFFFF;
|
|
border-radius: 15px;
|
|
box-shadow: 3px 3px 3px #CFCFCF;
|
|
}
|
|
|
|
.record-card-item {
|
|
background-color: var(--color-record-card-bg);
|
|
border: 1px solid var(--color-record-card-bg);
|
|
border-radius: 10px;
|
|
// box-shadow: 3px 3px 3px #CFCFCF;
|
|
}
|
|
|
|
.el-switch {
|
|
.el-switch__core {
|
|
height: 32px;
|
|
width: 80px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-menu--popup-container {
|
|
.el-menu--popup {
|
|
min-width: 8vw;
|
|
}
|
|
|
|
.el-menu-item.is-active {
|
|
background-color: home.$menu-active-color !important;
|
|
}
|
|
}
|