From 715b2ea85bd79167a5715ee68a70570a059c9c0c Mon Sep 17 00:00:00 2001 From: Mars Date: Tue, 24 Jun 2025 15:44:29 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=92=8C=E9=A3=8E?= =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8FUI/UX=EF=BC=8CLOGO=E5=B7=A6=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E5=8F=B3=EF=BC=8C=E5=9C=86=E8=A7=92=E9=98=B4=E5=BD=B1?= =?UTF-8?q?=E7=BA=AFCSS=E5=AE=9E=E7=8E=B0=EF=BC=8C=E7=BB=93=E6=9E=84?= =?UTF-8?q?=E4=B8=8E=E6=A0=B7=E5=BC=8F=E5=BD=BB=E5=BA=95=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.vue | 149 ++----- frontend/src/assets/main.css | 512 ++++++++++++++++++++---- frontend/src/main.js | 5 +- frontend/src/views/AdvancedAnalysis.vue | 28 +- frontend/src/views/DLT.vue | 42 +- frontend/src/views/Home.vue | 36 +- frontend/src/views/NumberGenerator.vue | 40 +- frontend/src/views/Prediction.vue | 73 ++-- frontend/src/views/SSQ.vue | 42 +- frontend/src/views/Statistics.vue | 12 +- 10 files changed, 623 insertions(+), 316 deletions(-) diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 11e1044..31f8794 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,111 +1,40 @@ - \ No newline at end of file diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index ea0d3e1..9302559 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -3,9 +3,9 @@ html, body { margin: 0; padding: 0; height: 100%; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; - background: #f6f8fa; - color: #222; + font-family: 'Noto Sans JP', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; + background: #FAF3E3; + color: #6B4F2B; font-size: 16px; } @@ -13,80 +13,180 @@ html, body { height: 100%; } -/* 滚动条样式 */ -::-webkit-scrollbar { - width: 8px; - height: 8px; +.layout-container { + min-height: 100vh; + display: flex; + flex-direction: column; + background: #FAF3E3; } -::-webkit-scrollbar-track { - background: #f1f1f1; - border-radius: 4px; +.header-container { + background: transparent !important; + display: flex; + align-items: center; + height: 80px; + padding: 0 32px; + border-bottom: none !important; + justify-content: center; + position: relative; + margin-top: 36px !important; + z-index: 10; } -::-webkit-scrollbar-thumb { - background: #c1c1c1; - border-radius: 4px; +.logo { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + margin-top: 24px; + margin-bottom: 0; } -::-webkit-scrollbar-thumb:hover { - background: #a8a8a8; +.logo h1 { + color: #6B4F2B; + font-size: 32px; + font-weight: bold; + margin: 0; + letter-spacing: 2px; + line-height: 48px; } -/* Element Plus 主题覆盖 */ -.el-header { - background-color: #fff; - border-bottom: 1px solid #dcdfe6; - padding: 0 20px; +.nav-menu { + flex: 1; + border: none !important; + background: #E9D8A6; + font-weight: bold; +} + +.el-menu--horizontal, .nav-menu { + background: #fff !important; + border-radius: 18px 18px 0 0 !important; + box-shadow: 0 2px 12px 0 rgba(139, 110, 74, 0.06); + width: 80%; + min-width: 800px; + border-bottom: none !important; + margin: 32px auto 0 auto !important; + overflow: hidden !important; + display: flex; + justify-content: center; +} + +.el-menu--horizontal > .el-menu-item { + border-radius: 16px 16px 0 0 !important; + margin: 0 !important; + padding: 0 32px !important; + height: 56px !important; + line-height: 56px !important; + background: #f7f3ec !important; + color: #6B4F2B !important; + font-size: 18px; + font-weight: 500; + box-shadow: 0 2px 6px 0 rgba(139, 110, 74, 0.03); + transition: background 0.2s, color 0.2s, font-weight 0.2s, box-shadow 0.2s; + border: none !important; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.el-menu--horizontal > .el-menu-item.is-active, +.el-menu--horizontal > .el-menu-item:hover { + background: linear-gradient(180deg, #F9E3E3 80%, #fff 100%) !important; + color: #4B2E13 !important; + font-weight: bold !important; + box-shadow: 0 4px 16px 0 rgba(249, 227, 227, 0.12); + z-index: 2; } .el-main { - background-color: #f5f7fa; + padding: 24px; + flex: 1; + background-color: #FAF3E3; +} + +.el-footer { padding: 20px; + background-color: #F9F5EC; + border-top: 1px solid #E9D8A6; +} + +.footer-content { + text-align: center; + color: #bfa76a; } .el-card { - border-radius: 14px; - box-shadow: 0 4px 24px 0 rgba(64,158,255,0.08); - border: none; - margin-bottom: 20px; + border-radius: 24px; + box-shadow: 0 4px 24px 0 rgba(233, 216, 166, 0.10); + border: 1.5px solid #E9D8A6; + margin-bottom: 24px; + background: #fff; } .el-card__header { - padding: 18px 24px; - font-size: 18px; + padding: 20px 28px; + font-size: 19px; font-weight: 600; - background: #f8fbff; - border-bottom: 1px solid #f0f0f0; + background: #FAF3E3; + border-bottom: 1px solid #E9D8A6; } .el-button { - border-radius: 8px; - font-size: 16px; - padding: 10px 24px; + border-radius: 24px; + font-size: 17px; + padding: 12px 36px; min-width: 120px; - font-weight: 500; + font-weight: 600; + letter-spacing: 1px; + transition: background 0.2s, color 0.2s; } .el-button--primary { - background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%); + background: linear-gradient(90deg, #A7C957 0%, #264653 100%); border: none; + color: #fff; } .el-button--primary:hover { - background-color: #66b1ff; - border-color: #66b1ff; + background: #A7C957; + color: #fff; +} + +.el-button--success { + background: #A7C957; + color: #fff; + border: none; +} + +.el-button--success:hover { + background: #6B4F2B; + color: #fff; +} + +.el-button--warning { + background: #F9C5D1; + color: #6B4F2B; + border: none; +} + +.el-button--warning:hover { + background: #E9D8A6; + color: #6B4F2B; } .el-table { - border-radius: 12px; + border-radius: 20px; overflow: hidden; font-size: 15px; + background: #fff; + border: 1px solid #E9D8A6; } .el-table th { - background: #f8fbff; + background: #FAF3E3; font-weight: 600; + color: #6B4F2B; } .el-pagination { @@ -100,12 +200,13 @@ html, body { } .el-input, .el-input-number { - border-radius: 8px; + border-radius: 16px; font-size: 16px; + border: 1.5px solid #E9D8A6; } .el-dialog { - border-radius: 16px; + border-radius: 24px; } /* 动画效果 */ @@ -121,39 +222,19 @@ html, body { /* 响应式布局 */ @media screen and (max-width: 900px) { - .el-row { - flex-direction: column !important; - } - .el-col { - width: 100% !important; - max-width: 100% !important; - margin-bottom: 16px; - } - .el-card { - margin-bottom: 16px; - } - .el-button { - min-width: 90px; + .el-menu--horizontal > .el-menu-item { font-size: 15px; - padding: 10px 0; + padding: 0 10px; + } + .header-container { + padding: 0 6px; } } @media screen and (max-width: 600px) { - body, html { - font-size: 15px; - } - .el-header h1 { - font-size: 15px !important; - } - .el-card__header { - font-size: 16px; - padding: 12px 10px; - } - .el-button { - font-size: 14px; - padding: 8px 0; - min-width: 70px; + .el-menu--horizontal > .el-menu-item { + font-size: 13px; + padding: 0 4px; } } @@ -172,4 +253,299 @@ html, body { .el-form-item__content { margin-left: 0 !important; } +} + +/* 柔和木色+米色+淡粉+棕色主题,菜单栏更整洁 */ + +html, body, #app, .layout-container, .el-main, .el-footer { + background: #FAF3E3 !important; + color: #6B4F2B !important; +} + +.header-container, .el-menu--horizontal, .nav-menu { + background: linear-gradient(180deg, #E6D3B3 80%, #F5E9DA 100%) !important; + box-shadow: 0 2px 8px 0 rgba(139, 110, 74, 0.04); + border-bottom: 1.5px solid #D8C3A5; + border-radius: 18px 18px 0 0 !important; + overflow: hidden !important; + padding: 0 !important; +} + +.el-menu--horizontal > .el-menu-item { + border-radius: 0 !important; + margin: 0 !important; + padding: 0 28px !important; + height: 48px !important; + line-height: 48px !important; + background: transparent !important; + color: #6B4F2B !important; + position: relative; + transition: background 0.2s, color 0.2s; +} + +.el-menu--horizontal > .el-menu-item.is-active { + background: #F9E3E3 !important; + color: #6B4F2B !important; + box-shadow: 0 2px 8px 0 rgba(249, 227, 227, 0.18); + font-weight: bold !important; + border-bottom: 2.5px solid #C1A177 !important; +} + +.el-menu--horizontal > .el-menu-item:hover { + background: #F5E9DA !important; + color: #6B4F2B !important; +} + +.el-menu--horizontal > .el-menu-item:not(:last-child)::after { + content: ''; + position: absolute; + right: -3px; + top: 12px; + height: 24px; + width: 1px; + background: #E6D3B3; + opacity: 0.5; +} + +.el-card, .el-dialog, .el-table { + border-radius: 20px !important; + background: #FFFDF8 !important; + border: 1.5px solid #E6D3B3 !important; + box-shadow: 0 4px 24px 0 rgba(230, 211, 179, 0.08) !important; +} + +.el-card__header, .el-table th { + background: #FAF3E3 !important; + color: #6B4F2B !important; + border-bottom: 1px solid #E6D3B3 !important; +} + +.el-button, .el-button--primary, .el-button--success, .el-button--warning { + background: linear-gradient(90deg, #E6D3B3 0%, #F9E3E3 100%) !important; + color: #6B4F2B !important; + border: none !important; + border-radius: 16px !important; + font-weight: 600 !important; + box-shadow: 0 2px 8px 0 rgba(230, 211, 179, 0.10) !important; +} +.el-button:hover, .el-button--primary:hover, .el-button--success:hover, .el-button--warning:hover { + background: #D8C3A5 !important; + color: #6B4F2B !important; +} + +.el-input, .el-input-number, .el-select, .el-textarea { + border-radius: 12px !important; + font-size: 16px !important; + border: 1.5px solid #E6D3B3 !important; + background: #FFFDF8 !important; + color: #6B4F2B !important; +} + +.el-tabs__item { + font-size: 17px !important; + font-weight: 500 !important; + color: #6B4F2B !important; + border-radius: 0 !important; +} + +.el-tabs__item.is-active { + color: #6B4F2B !important; + border-bottom: 2px solid #6B4F2B !important; +} + +.el-table th, .el-table td { + background: #FFFDF8 !important; + color: #6B4F2B !important; +} + +.el-pagination { + background: transparent !important; + color: #6B4F2B !important; +} + +.el-dialog__header, .el-dialog__title { + color: #6B4F2B !important; + background: #FAF3E3 !important; +} + +.el-card, .el-dialog, .el-table, .el-input, .el-select, .el-textarea { + border-radius: 20px !important; + box-shadow: 0 4px 24px 0 rgba(230, 211, 179, 0.08) !important; +} + +/* 顶部菜单栏彻底无底色露出,按钮完整显示 */ +body, #app, .header-container, .el-header, .el-menu--horizontal, .nav-menu { + background: #E6D3B3 !important; + border-radius: 0 !important; + overflow: visible !important; + min-width: 100vw !important; + margin: 0 !important; + padding: 0 !important; + box-shadow: none !important; + border: none !important; +} +.el-menu--horizontal { + width: 100% !important; +} + +/* 按钮组优化,按钮完整显示 */ +.button-group, .el-table__row .cell { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 8px; + flex-wrap: wrap; + min-width: 120px; +} +.button-group .el-button, .el-table__row .el-button { + min-width: 60px; + border-radius: 16px !important; + overflow: hidden; + white-space: nowrap; + flex: none; + margin: 0 !important; +} + +/* 响应式和风细节可继续补充 */ + +/* 操作按钮横向并排显示,绝不换行 */ +.el-table__row .cell { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + min-width: 120px; + max-width: 160px; + gap: 8px; + white-space: nowrap; + overflow: visible; +} +.el-table__row .el-button { + flex: none; + min-width: 60px; + max-width: 80px; + margin: 0 !important; + border-radius: 16px !important; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; +} +.el-table__row .el-button:last-child { + margin-right: 0 !important; +} + +/* 去除横向滚动条 */ +body, #app { + background: #FAF3E3 !important; + overflow-x: hidden !important; +} + +/* 让"出锅号码"列自动换行,避免撑宽表格 */ +.el-table .el-table__body td:nth-child(3) { + white-space: normal !important; + word-break: break-all; + font-size: 15px; +} + +/* 操作列按钮横向完整展示,靠左 */ +.el-table__row td:last-child, .el-table__row .cell:last-child { + min-width: 120px !important; + max-width: 160px !important; + display: flex !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + align-items: center !important; + gap: 8px !important; + white-space: nowrap !important; + overflow: visible !important; + justify-content: flex-start !important; + text-align: left !important; +} +.el-table__row .el-button { + flex: none !important; + min-width: 48px !important; + max-width: 70px !important; + margin-right: 4px !important; + border-radius: 16px !important; + overflow: hidden !important; + white-space: nowrap !important; + text-overflow: ellipsis !important; + display: inline-block !important; + font-size: 14px !important; + padding: 4px 8px !important; +} +.el-table__row .el-button:last-child { + margin-right: 0 !important; +} + +/* 表格内容自动换行,避免撑宽 */ +.el-table .el-table__body td { + white-space: normal !important; + word-break: break-all; + font-size: 15px; +} + +/* 自定义和风导航栏样式 */ +.nav-bar { + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; + margin-top: 36px; + margin-bottom: 32px; + padding: 0 32px; + box-sizing: border-box; +} + +.nav-logo { + font-family: 'Noto Serif JP', 'PingFang SC', 'Microsoft YaHei', serif; + font-size: 32px; + font-weight: bold; + color: #6B4F2B; + letter-spacing: 2px; + white-space: nowrap; + margin-right: 40px; + flex-shrink: 0; +} + +.nav-menu { + display: flex; + align-items: center; + background: #fff; + border-radius: 24px; + box-shadow: 0 4px 24px 0 rgba(139, 110, 74, 0.10); + padding: 0 24px; + height: 64px; + min-width: 700px; + max-width: 1200px; + flex: 1; +} + +.nav-item { + display: flex; + align-items: center; + justify-content: center; + height: 40px; + min-width: 80px; + padding: 0 18px; + margin: 0 8px; + border-radius: 16px 16px 0 0; + font-size: 18px; + color: #6B4F2B; + font-weight: 500; + background: transparent; + cursor: pointer; + transition: background 0.18s, color 0.18s, font-weight 0.18s, box-shadow 0.18s; + box-shadow: none; + border: none; + outline: none; +} + +.nav-item:hover, +.nav-item.active { + background: rgba(249, 227, 227, 0.7); + color: #4B2E13; + font-weight: bold; + box-shadow: 0 2px 8px 0 rgba(249,227,227,0.08); } \ No newline at end of file diff --git a/frontend/src/main.js b/frontend/src/main.js index 2a6e784..6a6c277 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -5,6 +5,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue' import { createPinia } from 'pinia' import App from './App.vue' import router from './router' +import './assets/main.css' // 创建应用实例 const app = createApp(App) @@ -20,4 +21,6 @@ app.use(createPinia()) app.use(router) // 挂载应用 -app.mount('#app') \ No newline at end of file +app.mount('#app') + +document.title = '好运早餐铺' \ No newline at end of file diff --git a/frontend/src/views/AdvancedAnalysis.vue b/frontend/src/views/AdvancedAnalysis.vue index 535eedd..a617e90 100644 --- a/frontend/src/views/AdvancedAnalysis.vue +++ b/frontend/src/views/AdvancedAnalysis.vue @@ -2,24 +2,24 @@