Cxx0822/blog-admin-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:删除冗余模块

Browse Source
This commit is contained in:
Cxx0822
2025-10-12 21:50:24 +08:00
parent 3e0256a321
commit b9c6d883e5
36 changed files with 1 additions and 2555 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/styles/app.loading.module.scss
View File

@@ -1,62 +0,0 @@
#app-loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #f8f9fa;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
/* 立方体的容器（让方块水平排列） */
.cube-container {
display: flex;
gap: 15px; /* 方块之间的间距 */
}
/* 立体小方块 */
.cube {
width: 40px;
height: 40px;
background: linear-gradient(145deg, #3498db, #2980b9); /* 渐变颜色 */
border-radius: 5px;
position: relative;
animation: jump 1.2s infinite ease-in-out;
}
/* 给不同的方块加不同颜色 */
.cube1 { background: linear-gradient(145deg, #e74c3c, #c0392b); animation-delay: 0s; }
.cube2 { background: linear-gradient(145deg, #f1c40f, #d4ac0d); animation-delay: 0.2s; }
.cube3 { background: linear-gradient(145deg, #2ecc71, #27ae60); animation-delay: 0.4s; }
/* 方块跳跃动画 */
@keyframes jump {
0%, 100% {
transform: translateY(0);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateY(-30px);
box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.3);
}
}
/* 加载文字 */
.loading-text {
margin-top: 20px;
font-size: 18px;
color: #555;
font-weight: bold;
letter-spacing: 2px;
animation: fade 1.5s infinite ease-in-out;
}
/* 文字淡入淡出动画 */
@keyframes fade {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
}

51
src/styles/blog/blog.archive.module.scss
View File

@@ -1,51 +0,0 @@
@use "blog.variable.module.scss" as blog;
.blog-archive {
display: flex;
flex-direction: column;
gap: 3vh;
padding: 10vh 2vw;
::v-deep(.el-date-editor) {
align-self: center;
}
.total {
align-self: center;
font-size: blog.$normal-font-size;
color: blog.$normal-text-color;
}
.time-line {
height: 100%;
padding: 10px;
overflow: auto;
.item {
height: 5vh;
.date {
color: blog.$normal-text-color;
margin-right: 5px;
}
.title {
font-size: blog.$normal-font-size;
color: blog.$normal-text-color;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 0.2rem;
}
.title:hover {
color: var(--color-text);
}
}
}
}
@media screen and (max-width: 768px) {
.blog-archive {
padding: 20px 10px;
}
}

59
src/styles/blog/blog.category.detail.module.scss
View File

@@ -1,59 +0,0 @@
@use "blog.variable.module.scss" as blog;
.blog-category-detail {
padding: 10vh 2vw;
display: flex;
flex-direction: column;
gap: 3vh;
.name {
font-weight: bold;
text-align: center;
font-size: blog.$large-font-size;
}
.category-detail-list {
height: 100%;
padding: 10px;
display: flex;
flex-direction: column;
gap: 2vh;
.item {
display: grid;
grid-template-columns: 40px 200px 1fr;
justify-items: center;
align-items: center;
gap: 10px;
cursor: pointer;
color: blog.$normal-text-color;
padding-bottom: 0.5vh;
border: none;
border-bottom: 1px dashed blog.$gray-text-color;
.number, .date {
text-align: center;
}
.title {
justify-self: start;
}
span {
padding: 0.2vw;
}
}
.item:hover {
color: var(--color-text);
}
}
}
@media screen and (max-width: 768px) {
.blog-category-detail {
padding: 20px 10px;
}
}

69
src/styles/blog/blog.category.module.scss
View File

@@ -1,69 +0,0 @@
@use "blog.variable.module.scss" as blog;
.blog-category {
display: flex;
flex-direction: column;
gap: 3vh;
padding: 10vh 2vw;
.total {
text-align: center;
font-size: blog.$normal-font-size;
color: blog.$normal-text-color;
}
.category-list {
height: 100%;
padding: 10px;
display: flex;
flex-direction: column;
gap: 15px;
overflow: auto;
.item {
display: flex;
align-items: center;
gap: 5px;
padding-bottom: 5px;
border-bottom: 1px dashed blog.$gray-text-color;
color: blog.$normal-text-color;
i {
font-size:28px;
color: #0f8bc7;
}
.content {
display: flex;
flex-direction: column;
gap: 5px;
.label {
cursor: pointer;
color: blog.$normal-text-color;
font-size: blog.$normal-font-size;
}
.label:hover {
color: blog.$hover-text-color;
}
.value {
font-size: blog.$normal-font-size;
color: blog.$gray-text-color;
}
}
}
.item:hover {
color: var(--color-text);
cursor: pointer;
}
}
}
@media screen and (max-width: 768px) {
.blog-category {
padding: 20px 10px;
}
}

71
src/styles/blog/blog.detail.module.scss
View File

@@ -1,71 +0,0 @@
@use "blog.variable.module.scss" as blog;
.blog-detail {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2vh;
padding: 10vh 2vw 3vh 2vw;
.blog-md {
height: 100%;
width: 100%;
padding: 10px;
overflow: auto;
.md-editor {
height: 100%;
}
}
}
.blog-title {
width: 100%;
display: grid;
grid-template-rows: 1fr 1fr;
align-items: center;
gap: 1vh;
.title {
background-color: blog.$theme-color;
padding: 5px;
border: 2px solid blog.$theme-color;
border-radius: 10px;
text-align: center;
font-size: blog.$blog-title-font-size;
font-family: "华文楷体", serif;
}
}
.blog-copyright {
width: 100%;
background-color: var(--color-copyright-bg);
padding: 10px;
border-left: 3px solid #FD2C17;
font-size: blog.$small-font-size;
display: flex;
flex-direction: column;
gap: 1vh;
strong {
margin-right: 0.2vw;
}
}
.blog-ending {
span {
color: #CFCFCF;
}
}
.blog-detail-mobile {
padding: 10px;
display: flex;
flex-direction: column;
gap: 2vh;
}

15
src/styles/blog/blog.footbar.module.scss
View File

@@ -1,15 +0,0 @@
@use "blog.variable.module.scss" as blog;
.blog-site-footer {
padding: 10px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
span {
font-size: blog.$small-font-size;
}
}

57
src/styles/blog/blog.label.module.scss
View File

@@ -1,57 +0,0 @@
@use "blog.variable.module.scss" as blog;
.label-list {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1vh;
margin-bottom: 1vh;
.container {
display: flex;
align-items: center;
gap: 5px;
.item {
font-size: blog.$small-font-size;
color: blog.$gray-text-color;
display: flex;
align-items: center;
gap: 5px;
span {
font-size: blog.$small-font-size;
font-family: "Times New Roman", serif;
}
}
}
.top-value {
color: #7d26cd !important;
}
.great {
color: #FFFFFF !important;
background-color: #7d26cd;
padding: 2px;
}
.date {
text-decoration: underline dotted;
text-underline-offset: 0.2em;
}
.category {
text-decoration: underline;
text-underline-offset: 0.2em;
color: blog.$normal-text-color;
cursor: pointer;
}
.category:hover {
color: blog.$hover-text-color;
}
}

60
src/styles/blog/blog.module.scss
View File

@@ -1,60 +0,0 @@
@use "blog.variable.module.scss" as blog;
.blog-container {
// height: 100%;
background-color: var(--color-bg);
padding: 0 5vw;
display: grid;
grid-template-columns: minmax(13vw, 200px) 1fr;
column-gap: 2vw;
aside {
display: grid;
grid-template-rows: 40vh 60vh;
row-gap: 2vh;
z-index: 2;
.blog-summary {
// 滚动到顶部固定
position: sticky;
top: 0;
}
}
section {
z-index: 2;
display: flex;
flex-direction: column;
gap: 2vh;
.blog-section {
// height: 100%;
min-height: 100vh;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12),
0 3px 1px -2px rgba(0,0,0,0.06),
0 1px 5px 0 rgba(0,0,0,0.12),
0 -1px 0.5px 0 rgba(0,0,0,0.09);
.module-title {
background-color: blog.$theme-color;
padding: 5px;
border: 2px solid blog.$theme-color;
border-radius: 10px;
text-align: center;
font-size: blog.$large-font-size;
font-family: "华文楷体", serif;
}
}
}
.card-item {
background-color: var(--color-card-bg);
border: 1px solid var(--color-border-bg);
border-radius: blog.$border-radius;
// box-shadow: 3px 3px 3px #CFCFCF;
}
}

87
src/styles/blog/blog.overview.module.scss
View File

@@ -1,87 +0,0 @@
@use "blog.variable.module.scss" as blog;
$blog-content-list-item-height: 38vh;
$blog-content-title-font-size: 1.6rem;
$hr-color: #CFCFCF;
.blog-content-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 5vh;
padding: 10vh 2vw 2vh 2vw;
position: relative;
.blog-content {
width: 100%;
height: $blog-content-list-item-height;
padding: 4vh 1vw;
border: 1px solid blog.$border-color;
border-radius: 15px;
box-shadow: 0 0 5px blog.$border-color;
}
.blog-content-empty {
display: flex;
justify-content: center;
align-items: center;
}
.blog-content-summary {
display: grid;
grid-template-rows: 1fr 1fr 8vh 1fr 1fr;
justify-items: center;
align-items: center;
gap: 2vh;
.title {
font-size: $blog-content-title-font-size;
font-family: "华文楷体", serif;
font-weight: bolder;
position: relative;
}
// 自动展开下划线
.title:after {
content: "";
width: 0;
height: 2px;
background: blog.$theme-color;
// 初始位置在底部中间
position: absolute;
top: 100%;
left: 50%;
// 动画时间
transition: all .8s;
}
// 悬浮式展开到100%
.title:hover::after {
width: 100%;
left: 0;
}
.content {
font-size: blog.$normal-font-size;
line-height: 150%;
}
hr {
width: 10%;
height: 1px;
background-color: $hr-color;
border: none;
}
span, p {
font-family: '华为行楷',serif;
}
}
}
@media screen and (max-width: 768px) {
.blog-content-list {
padding: 10px;
}
}

281
src/styles/blog/blog.sidebar.module.scss
View File

@@ -1,281 +0,0 @@
@use "blog.variable.module.scss" as blog;
$title-font-color: #FFFFFF;
$title-font-size: 1.8rem;
$sub-title-font-size: 1rem;
.blog-aside {
.top-container {
width: 100%;
display: grid;
grid-template-rows: 2fr 3fr;
.title-container {
background-color: blog.$theme-color;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
display: grid;
grid-template-rows: 1fr 1fr;
justify-items: center;
align-items: center;
padding: 10px;
.title {
color: $title-font-color;
font-size: $title-font-size;
}
.sub-title {
font-family: "华文楷体", serif;
font-size: $sub-title-font-size;
text-align: center;
line-height: 150%;
}
}
.blog-menu-container {
align-self: center;
height: 90%;
display: grid;
grid-template-rows: repeat(4, 1fr);
align-items: center;
.el-menu-item {
height: 5vh;
gap: 0.5vw;
font-size: blog.$normal-font-size;
.menu-title {
}
.value {
position: absolute;
right: 10%;
line-height: 2vh;
background-color: blog.$normal-bg-color;
padding: 2px;
border: solid 1px blog.$normal-bg-color;
border-radius: 15px;
color: var(--color-bg);
font-size: blog.$small-font-size;
font-family: "Times New Roman",serif;
}
}
}
.el-menu {
border: none;
}
}
.blog-summary {
display: flex;
flex-direction: column;
align-items: center;
gap: 1vh;
.blog-summary-tab {
margin-top: 1vh;
height: 5vh;
display: flex;
align-items: center;
gap: 1vw;
span {
font-size: blog.$small-font-size;
}
span:hover {
color: #FC6423;
cursor: pointer;
}
.tab-active {
color: #FC6423;
text-decoration: underline;
text-underline-offset: 0.5em;
}
}
.blog-brief {
height: 100%;
width: 100%;
display: grid;
grid-template-rows: 150px 50px 50px 1fr;
justify-items: center;
align-items: center;
gap: 1vh;
.avatar {
padding: 1vh 1vw;
display: grid;
grid-template-rows: 100px 1fr;
justify-items: center;
align-items: center;
gap: 1vh;
img {
width: 100px;
height: 100px;
border-radius: 50%;
transition: all 2.0s;
cursor: pointer;
}
img:hover {
transform: rotate(360deg);
}
span {
font-weight: bold;
}
}
.info {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
gap: 1vw;
.item {
display: grid;
grid-template-rows: 1fr 1fr;
justify-items: center;
align-items: center;
gap: 5px;
cursor: pointer;
.name {
color: blog.$gray-text-color;
}
.name:hover {
color: var(--color-text);
}
}
}
.social {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
cursor: pointer;
.item {
width: 100%;
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
color: blog.$normal-text-color;
font-size: blog.$small-font-size;
.name {
font-size: blog.$small-font-size;
}
}
.item:hover {
background-color: var(--color-card-bg);
color: var(--color-text);
}
}
.latest-blog {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1vh;
.title {
span {
margin-left: 5px;
font-weight: bold;
}
}
.blog-list {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5vh;
cursor: pointer;
span {
text-align: center;
text-decoration: underline;
text-underline-offset: 0.1em;
font-size: blog.$small-font-size;
color: blog.$normal-text-color;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
span:hover {
color: var(--color-text);
}
}
}
.blog-time {
width: 10vw;
height: 100%;
}
span {
font-size: blog.$normal-font-size;
}
}
.md-editor-catalog {
height: 100%;
width: 100%;
overflow: auto;
span {
word-break: break-all;
white-space: normal;
font-size: blog.$smaller-font-size;
color: #666666;
}
}
.scroll-container {
padding: 2px 0;
width: 100%;
border-color: blog.$border-color;
border-bottom-left-radius: blog.$border-radius;
border-bottom-right-radius: blog.$border-radius;
background-color: var(--color-scroll-card-bg);
text-align: center;
.fa-arrow-up {
color: blog.$theme-color;
margin-right: 0.2vw;
}
span {
font-size: blog.$small-font-size;
color: #A19FA0;
}
}
.scroll-container:hover {
cursor: pointer;
}
}
}

129
src/styles/blog/blog.tools.module.scss
View File

@@ -1,129 +0,0 @@
@use "blog.variable.module.scss" as blog;
.blog-tools {
position: absolute;
.book-mark-link {
border-bottom: none;
display: block;
position: fixed;
top: -2px;
left: 20px;
color: #222;
font-size: 26px;
transition: .3s;
z-index: 2;
}
.github-corner {
border-bottom: none;
display: block;
position: fixed;
top: 0;
right: 0;
color: #222;
font-size: 26px;
transition: .3s;
z-index: 2;
}
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%, 100% {
transform: rotate(0)
}
20%, 60% {
transform: rotate(-25deg)
}
40%, 80% {
transform: rotate(10deg)
}
}
@media (max-width: 500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
#particles {
position: absolute;
z-index: 0;
}
.heart {
position: fixed;
opacity: 1;
scale: 1;
width: 10px;
height: 10px;
background: red;
transform: rotate(45deg);
z-index: 2;
}
.heart:after, .heart:before {
content: "";
width: inherit;
height: inherit;
background: inherit;
border-radius: 50%;
position: absolute;
}
.heart:after {
top: -5px;
}
.heart:before {
left: -5px;
}
@keyframes move {
100% {
transform: translateY(-20px) rotate(45deg);
opacity: 0;
}
}
.blog-progress {
/* Positioning */
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background-color: transparent;
color: blog.$theme-color;
z-index: 3;
}
.blog-progress::-webkit-progress-bar {
background-color: transparent;
}
.blog-progress::-webkit-progress-value {
background-color: blog.$theme-color;
}
.blog-progress::-moz-progress-bar {
background-color: blog.$theme-color;
}
.theme-button {
position: fixed;
top: -2px;
left: 50px;
z-index: 10;
}
}

23
src/styles/blog/blog.variable.module.scss
View File

@@ -1,23 +0,0 @@
$bg-color: #EEEEEE;
$card-bg-color: #FFFFFF;
// 主题颜色
$theme-color: #009FA8;
// 正常文本颜色
$normal-text-color: #555555;
// 悬浮文本颜色
$hover-text-color: #000000;
// 灰色文本颜色
$gray-text-color: #9C9C9C;
$normal-bg-color: #CCCCCC;
$hover-bg-color: #F9F9F9;
$blog-title-font-size: 1.6rem;
$large-font-size: 1.3rem;
$normal-font-size: 1rem;
$small-font-size: 0.9rem;
$smaller-font-size: 0.8rem;
$border-color: #EEEEEE;
$border-radius: 15px;

163
src/styles/home.layout.module.scss
View File

@@ -1,163 +0,0 @@
@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;
}
}

15
src/styles/home.variable.module.scss
View File

@@ -1,15 +0,0 @@
$theme-color: #009FA8;
$navbar-bg-color: #138BBF;
$body-bg-color: #F5F5F5;
$footer-bg-color: #F5F5DC;
$menu-active-color: #009FA8;
$navbar-height: 60px;
$foot-height: 50px;
$common-padding: 10px;
$query-height: 60px;
$main-top-padding: 2vh;
$main-left-padding: 0.5vw;

89
src/styles/home/bill.mobile.module.scss
View File

@@ -1,89 +0,0 @@
.mobile-bill-view {
display: flex;
flex-direction: column;
gap: 10px;
.el-date-editor {
align-self: center;
}
.bill-chart {
display: grid;
grid-template-rows: repeat(4, 1fr);
gap: 10px;
.chart-container {
display: grid;
grid-template-rows: 40px 1fr;
.content {
padding: 0 5px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #009FA8;
.title {
font-size: 1em;
font-weight: bold;
}
}
.chart {
height: 300px;
width: 100%;
}
.rank-chart {
overflow: auto;
display: flex;
flex-direction: column;
gap: 5px;
.rank-item {
padding: 10px;
display: grid;
grid-template-columns: 20px 1fr 80px;
align-items: center;
.rank-amount {
justify-self: flex-end;
}
}
.rank-item:nth-child(1) {
color: #d4af37;
font-weight: bold;
}
.rank-item:nth-child(2) {
color: #a8a8a8;
}
.rank-item:nth-child(3) {
color: #b87333;
}
}
}
}
.el-switch {
.el-switch__core {
height: 32px;
width: 80px;
}
}
.bill-setting {
display: flex;
flex-direction: column;
gap: 10px;
.button-container {
align-self: center;
display: flex;
gap: 10px;
}
}
}

48
src/styles/home/bill.module.scss
View File

@@ -1,48 +0,0 @@
.bill-view {
.bill-chart {
flex-grow: 1;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 2vh;
.chart-container {
display: grid;
grid-template-rows: 40px 1fr;
.content {
padding: 0 5px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #009FA8;
.title {
font-size: 1em;
font-weight: bold;
}
}
}
}
@media (max-width: 1200px) {
.bill-chart {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
gap: 2vh;
.chart-container {
.chart {
min-width: 300px;
min-height: 250px;
}
}
}
}
.bill-dialog {
width: 950px;
}
}

20
src/styles/home/food.mobile.module.scss
View File

@@ -1,20 +0,0 @@
.mobile-food-view {
display: flex;
flex-direction: column;
gap: 10px;
.food-list {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
//align-items: center;
gap: 1vh;
.list {
display: flex;
flex-direction: column;
gap: 10px;
}
}
}

39
src/styles/home/food.module.scss
View File

@@ -1,39 +0,0 @@
.food-view {
.food-list {
background-color: #F5F5F5;
flex-grow: 1;
overflow: auto;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
//align-items: center;
gap: 1vh;
padding: 10px;
.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 2vw;
row-gap: 2vh;
}
@media (min-width: 1280px) and (max-width: 1500px) {
.list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1280px) {
.list {
grid-template-columns: repeat(1, 1fr);
}
}
.el-pagination {
align-self: center;
}
}
}

232
src/styles/home/life.detail.module.scss
View File

@@ -1,232 +0,0 @@
.life-detail {
position: relative;
display: grid;
grid-template-rows: 40px 1fr;
align-items: center;
.title {
text-align: center;
font-weight: bold;
font-size: 1.4rem;
}
section {
.info-container, .record-container {
.info-item {
padding: 1vh 1vw;
display: flex;
flex-direction: column;
gap: 1vh;
.title-info {
display: flex;
align-items: center;
gap: 5px;
svg {
height: 1.4em;
width: 1.4em;
}
.sub-title {
font-size: large;
font-weight: bold;
}
}
.info {
margin-left: 2vw;
}
}
}
.info-container {
display: flex;
flex-direction: column;
gap: 10px;
.food-basic-info {
display: flex;
gap: 1vh;
}
.travel-basic-info {
display: flex;
flex-direction: column;
gap: 1vh;
.basic-item {
display: flex;
flex-direction: column;
gap: 1vh;
.basic-title {
font-weight: bold;
}
.basic-content {
margin-left: 1vw;
display: flex;
gap: 1vh;
}
}
}
.material-info {
display: flex;
flex-direction: column;
gap: 1vh;
.material-item {
display: flex;
flex-direction: column;
gap: 1vh;
.material-title {
font-weight: bold;
}
.material-content {
margin-left: 1vw;
display: flex;
gap: 1vh;
}
}
}
.step-info {
margin-left: 1vw;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1vh;
min-height: 28vh;
.step-container {
display: grid;
grid-template-columns: 50px 1fr;
gap: 1vw;
.step-body {
display: flex;
flex-direction: column;
gap: 1vh;
.step-content {
font-weight: bold;
}
.step-image {
height: 100%;
width: 100%;
max-height: 300px;
max-width: 300px;
}
}
}
}
.others-info {
margin-left: 1vw;
display: flex;
gap: 1vw;
.others-title {
font-weight: bold;
}
}
.guide-info {
display: flex;
flex-direction: column;
gap: 1vh;
.guide-item {
display: flex;
flex-direction: column;
gap: 1vh;
.guide-title {
font-weight: bold;
}
.guide-content {
min-height: 6vh;
margin-left: 1vw;
display: flex;
gap: 1vh;
}
}
}
}
.info-container .info-item:last-child {
flex-grow: 1;
}
.record-container {
overflow: auto;
display: flex;
flex-direction: column;
gap: 2vh;
.record-info {
.el-timeline {
.el-timeline-item__wrapper {
.el-timeline-item__timestamp {
color: #000000;
font-weight: bold;
}
}
}
.record-card {
.el-card__body {
display: grid;
grid-template-rows: 20px 250px;
gap: 10px;
.record-content {
font-weight: bold;
}
.el-carousel {
.el-carousel__container {
height: 100%;
}
}
}
}
}
}
}
.back-button {
position: absolute;
top: 0;
left: 0;
}
}
@media screen and (min-width: 768px) {
.life-detail {
section {
height: calc(100vh - 40px - 40px - 4vh);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
}
}
@media screen and (max-width: 768px) {
.life-detail {
section {
display: flex;
flex-direction: column;
gap: 10px;
}
}
}

90
src/styles/home/life.record.module.scss
View File

@@ -1,90 +0,0 @@
$card-image-height: 200px;
.life-record-card {
display: grid;
grid-template-rows: minmax($card-image-height, 26vh) 1fr;
.el-carousel {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
.el-carousel__container {
height: 100%;
}
.el-image {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
.record-info {
border-top: 1px solid var(--el-color-primary);
padding: 1vh;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
.top-container, .bottom-container {
display: flex;
justify-content: space-between;
align-items: center;
.info-list {
display: flex;
align-items: center;
gap: 8px;
.el-rate {
height: auto;
}
.info-item {
display: flex;
align-items: center;
gap: 3px;
.title {
font-size: 1.2rem;
font-weight: bold;
}
}
.category-item {
color: #0d9488;
}
.location-item {
color: #0d9488;
}
.amount-item {
font-size: 1.2rem;
color: #CFB53B;
}
.fa-solid.fa-location-dot {
color: #008000;
}
.fa-solid.fa-flag {
color: #0000FF;
}
.fa-regular.fa-calendar-check {
color: #FF0000;
}
}
}
.bottom-container {
font-size: small;
color: #9C9C9C;
}
}
}

28
src/styles/home/plan.mobile.module.scss
View File

@@ -1,28 +0,0 @@
.mobile-plan-view {
display: flex;
flex-direction: column;
gap: 10px;
#planCalendar {
.fc-view {
height: calc(100vh - 210px);
.fc-timegrid-body {
// 单元格高度
tr {
height: 3.5vh;
}
}
}
}
.plan-list {
.el-scrollbar {
.el-scrollbar__view {
display: flex;
flex-direction: column;
gap: 2vh;
}
}
}
}

13
src/styles/home/plan.module.scss
View File

@@ -1,13 +0,0 @@
.plan-view {
.plan-list {
height: calc(100vh - 120px);
.el-scrollbar {
.el-scrollbar__view {
display: flex;
flex-direction: column;
gap: 2vh;
}
}
}
}

20
src/styles/home/travel.mobile.module.scss
View File

@@ -1,20 +0,0 @@
.mobile-travel-view {
display: flex;
flex-direction: column;
gap: 10px;
.travel-list {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
//align-items: center;
gap: 1vh;
.list {
display: flex;
flex-direction: column;
gap: 10px;
}
}
}

33
src/styles/home/travel.module.scss
View File

@@ -1,33 +0,0 @@
.travel-view {
.travel-spot-list {
background-color: #F5F5F5;
flex-grow: 1;
overflow: auto;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
//align-items: center;
gap: 1vh;
padding: 10px;
.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 4vw;
row-gap: 2vh;
}
@media (max-width: 1280px) {
.list {
grid-template-columns: repeat(1, 1fr);
}
}
.el-pagination {
align-self: center;
}
}
}

2
src/styles/index.module.scss
View File

@@ -1 +1 @@
body {
body {

154
src/styles/mobile.home.layout.module.scss
View File

@@ -1,154 +0,0 @@
@use "home.variable.module" as home;
$titleBar-height: 40px;
$tabBar-height: 70px;
.layout-mobile-home {
height: 100%;
.common-mobile-view {
height: calc(100vh - $tabBar-height - $titleBar-height);
overflow: auto;
background-color: var(--color-bg);
color: var(--color-text);
padding: 10px;
}
.common-query {
align-self: center;
display: flex;
gap: 10px;
}
.mobile-common-query {
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
.query-item {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
}
.common-statistics {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
gap: 10px;
}
.title-bar {
background-color: var(--el-color-primary);
height: $titleBar-height;
padding: 0 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
.left-container {
justify-self: flex-start;
color: #FFFFFF;
.logo-container {
display: flex;
align-items: center;
gap: 5px;
.logo {
width: 20px;
height: 20px;
}
}
}
.title-container {
color: #FFFFFF;
font-weight: bold;
font-size: 1.2rem;
}
.right-container {
justify-self: flex-end;
display: flex;
align-items: center;
gap: 5px;
}
}
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: $tabBar-height;
display: flex;
justify-content: space-around;
background-color: var(--color-card-bg);
color: var(--color-text);
box-shadow: 0 -1px 2px var(--color-border-bg);
padding: 10px 0;
.item {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 5px;
i {
font-size: 24px;
}
}
.router-link-active {
color: var(--el-color-primary);
}
}
.add-new {
position: absolute;
right: 2%;
bottom: 9%;
font-size: 1.8rem;
}
.vc-container {
width: 100%;
.vc-day {
min-height: 40px;
}
.vc-day-box-center-bottom {
height: 105%;
display: flex;
}
}
.common-section {
height: 100%;
overflow: auto;
}
.card-item {
background-color: var(--color-card-bg);
border: 1px solid var(--color-border-bg);
border-radius: 10px;
// 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;
}
}