huangting/hotel-biz-h5
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

员工端h5版本代码提交

Browse Source
This commit is contained in:
andy
2026-06-16 15:12:54 +08:00
commit 43a617e5da
45 changed files with 4754 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

425
src/styles/main.css Normal file
View File

@@ -0,0 +1,425 @@
:root {
--app-bg: #f6f8f7;
--surface: #ffffff;
--surface-soft: #eef7f3;
--text-strong: #14211c;
--text-main: #26352f;
--text-muted: #7a8780;
--line: #e2e8e4;
--primary: #0f8b72;
--primary-deep: #08705e;
--primary-soft: #dff4ec;
--amber: #f3a51d;
--rose: #d94d5c;
--blue: #286fb7;
--shadow: 0 8px 20px rgba(18, 38, 31, 0.08);
--radius: 8px;
--safe-bottom: env(safe-area-inset-bottom);
color: var(--text-main);
background: var(--app-bg);
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"PingFang SC",
"Hiragino Sans GB",
"Microsoft YaHei",
sans-serif;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0;
}
* {
box-sizing: border-box;
}
html,
body,
#app {
min-height: 100%;
margin: 0;
background: var(--app-bg);
}
body {
min-width: 320px;
}
button,
input,
textarea {
font: inherit;
}
button {
color: inherit;
}
.app-shell {
min-height: 100vh;
padding: 0 14px 78px;
background:
linear-gradient(180deg, #e9f6ef 0, rgba(246, 248, 247, 0) 210px),
var(--app-bg);
}
.app-shell--no-tabbar {
padding-bottom: calc(18px + var(--safe-bottom));
}
.app-tabbar {
border-top: 1px solid var(--line);
}
.page {
width: min(100%, 560px);
margin: 0 auto;
padding: 14px 0 18px;
}
.page-header {
padding: 18px 2px 14px;
}
.page-kicker {
margin: 0 0 6px;
color: var(--primary-deep);
font-size: 13px;
font-weight: 600;
}
.page-title {
margin: 0;
color: var(--text-strong);
font-size: 24px;
font-weight: 750;
line-height: 1.2;
}
.page-subtitle {
margin: 8px 0 0;
color: var(--text-muted);
font-size: 14px;
line-height: 1.5;
}
.page-nav {
position: sticky;
z-index: 5;
top: 0;
display: grid;
grid-template-columns: 42px 1fr 72px;
align-items: center;
width: min(100%, 560px);
height: 52px;
margin: 0 auto;
padding-top: max(0px, env(safe-area-inset-top));
background: rgba(246, 248, 247, 0.94);
backdrop-filter: blur(10px);
}
.page-nav h1 {
overflow: hidden;
margin: 0;
color: var(--text-strong);
font-size: 18px;
font-weight: 750;
line-height: 1.2;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon-button,
.nav-text-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
border: 0;
border-radius: var(--radius);
background: transparent;
}
.icon-button:active,
.nav-text-button:active {
background: rgba(15, 139, 114, 0.1);
}
.nav-text-button {
color: var(--primary-deep);
font-size: 14px;
font-weight: 700;
}
.nav-placeholder {
display: block;
}
.panel {
overflow: hidden;
border: 1px solid rgba(226, 232, 228, 0.9);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
}
.panel + .panel,
.section + .section {
margin-top: 12px;
}
.section-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0 0 10px;
color: var(--text-strong);
font-size: 16px;
font-weight: 750;
}
.section-title small {
color: var(--text-muted);
font-size: 12px;
font-weight: 500;
}
.toolbar {
display: flex;
gap: 8px;
align-items: center;
padding: 10px 0;
}
.toolbar .van-search {
flex: 1;
padding: 0;
background: transparent;
}
.quick-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.quick-action {
display: flex;
min-width: 0;
min-height: 76px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
color: var(--text-main);
text-decoration: none;
}
.quick-action svg {
color: var(--primary);
}
.quick-action span {
width: 100%;
overflow: hidden;
padding: 0 4px;
font-size: 12px;
font-weight: 650;
line-height: 1.2;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.stat-card {
min-height: 92px;
padding: 14px;
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
}
.stat-label {
color: var(--text-muted);
font-size: 12px;
line-height: 1.4;
}
.stat-value {
margin-top: 8px;
color: var(--text-strong);
font-size: 25px;
font-weight: 800;
line-height: 1;
}
.stat-hint {
margin-top: 8px;
color: var(--primary-deep);
font-size: 12px;
}
.order-card,
.event-card {
display: block;
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
color: inherit;
text-decoration: none;
}
.order-card + .order-card,
.event-card + .event-card {
margin-top: 10px;
}
.order-card__main {
display: grid;
grid-template-columns: 76px 1fr;
gap: 10px;
}
.thumb {
width: 76px;
height: 76px;
overflow: hidden;
border-radius: var(--radius);
background: var(--surface-soft);
}
.thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.card-title {
display: -webkit-box;
overflow: hidden;
margin: 0;
color: var(--text-strong);
font-size: 15px;
font-weight: 750;
line-height: 1.35;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.meta-row,
.detail-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: var(--text-muted);
font-size: 12px;
line-height: 1.5;
}
.meta-row strong,
.detail-row strong {
color: var(--text-main);
font-weight: 650;
}
.stack {
display: flex;
flex-direction: column;
gap: 8px;
}
.divider {
height: 1px;
margin: 12px 0;
background: var(--line);
}
.empty-state {
padding: 34px 20px;
color: var(--text-muted);
text-align: center;
}
.empty-state svg {
margin-bottom: 8px;
color: var(--primary);
}
.fixed-action {
position: fixed;
z-index: 10;
right: 0;
bottom: 0;
left: 0;
padding: 10px 14px calc(10px + var(--safe-bottom));
border-top: 1px solid var(--line);
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(10px);
}
.fixed-action__inner {
display: grid;
width: min(100%, 560px);
margin: 0 auto;
grid-template-columns: 1fr;
gap: 8px;
}
.van-button {
border-radius: var(--radius);
}
.van-button__content {
gap: 6px;
}
.van-tabs__wrap {
border-radius: var(--radius);
}
.form-panel {
padding: 12px;
}
.plain-input {
width: 100%;
min-height: 44px;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
color: var(--text-main);
outline: none;
}
.plain-input:focus {
border-color: var(--primary);
}
@media (max-width: 360px) {
.quick-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stat-grid {
grid-template-columns: 1fr;
}
}