编辑页面

页面标题

有效期修改后将从当前时间重新计算过期时间

CSS文件（可选）

/* 基础变量 */
:root {
    --primary: #ff4757;
    --primary-light: #ff6b81;
    --primary-dark: #e8414a;
    --bg-color: #f5f5f5;
    --text-primary: #333;
    --text-secondary: #666;
    --text-light: #999;
    --border-color: #eee;
    --white: #fff;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

#app {
    max-width: 430px;
    margin: 0 auto;
    background: var(--bg-color);
    min-height: 100vh;
    position: relative;
}

/* 页面通用 */
.page {
    display: none;
    padding-bottom: calc(60px + var(--safe-bottom));
    min-height: 100vh;
}

.page-active {
    display: block;
}

/* 顶部搜索 */
.home-header {
    padding: 12px 16px;
    background: var(--primary);
    position: sticky;
    top: 0;
    z-index: 100;
}

.search-bar {
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: 20px;
    padding: 8px 16px;
}

.search-icon {
    width: 18px;
    height: 18px;
    color: var(--text-light);
    margin-right: 8px;
}

.search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
}

.search-bar input::placeholder {
    color: var(--text-light);
}

/* Banner轮播 */
.banner-section {
    position: relative;
    margin: 12px;
    border-radius: 12px;
    overflow: hidden;
}

.banner-swiper {
    position: relative;
}

.banner-slide {
    height: 150px;
    display: none;
    position: relative;
}

.banner-slide.active {
    display: block;
}

.banner-content {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--white);
}

.banner-content h2 {
    font-size: 20px;
    margin-bottom: 6px;
}

.banner-content p {
    font-size: 14px;
    opacity: 0.9;
}

.banner-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
}

.dot.active {
    background: var(--white);
    width: 16px;
    border-radius: 3px;
}

/* 商品分类 */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 16px 12px;
    background: var(--white);
    border-radius: 12px;
    margin: 0 12px;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
    cursor: pointer;
}

.category-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.category-icon svg {
    width: 28px;
    height: 28px;
}

.category-item span {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 营销活动 */
.activity-section {
    padding: 16px 12px;
    background: var(--white);
    margin: 12px;
    border-radius: 12px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.more-btn {
    font-size: 12px;
    color: var(--text-light);
    cursor: pointer;
}

.countdown {
    display: flex;
    align-items: center;
    gap: 4px;
}

.countdown-text {
    font-size: 12px;
    color: var(--text-light);
    margin-right: 4px;
}

.time-block {
    background: var(--primary);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.flash-sale-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.flash-sale-scroll::-webkit-scrollbar {
    display: none;
}

.flash-item {
    flex-shrink: 0;
    width: 100px;
    cursor: pointer;
}

.flash-img {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: #f9f9f9;
}

.flash-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sale-tag {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 0 0 6px 0;
}

.flash-info {
    margin-top: 8px;
}

.flash-info .price {
    font-size: 14px;
    color: var(--primary);
    font-weight: 600;
}

.flash-info .original {
    font-size: 11px;
    color: var(--text-light);
    text-decoration: line-through;
    margin-left: 4px;
}

/* 活动卡片 */
.activity-banners {
    display: flex;
    gap: 12px;
    padding: 0 12px;
    margin-bottom: 16px;
}

.activity-card {
    flex: 1;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.activity-bg {
    position: absolute;
    inset: 0;
}

.activity-content {
    position: relative;
    padding: 12px;
    color: var(--white);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.activity-content h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.activity-content p {
    font-size: 11px;
    opacity: 0.9;
}

.activity-btn {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 10px;
    margin-top: 6px;
    width: fit-content;
}

/* 商品列表 */
.product-section {
    padding: 16px 12px;
    background: var(--white);
    margin: 0 12px 12px;
    border-radius: 12px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.product-card {
    background: #fafafa;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.product-img {
    width: 100%;
    height: 150px;
    background: #f0f0f0;
    overflow: hidden;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info {
    padding: 10px;
}

.product-info h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-desc {
    font-size: 11px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.product-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-bottom .price {
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
}

.add-cart-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.add-cart-btn svg {
    width: 16px;
    height: 16px;
    color: var(--white);
}

/* 页面通用头部 */
.page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 100;
}

.back-btn, .share-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-btn svg, .share-btn svg {
    width: 22px;
    height: 22px;
    color: var(--text-primary);
}

.page-header h1 {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
}

.edit-btn, .add-btn {
    font-size: 14px;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
}

/* 分类页 */
.category-layout {
    display: flex;
    min-height: calc(100vh - 60px);
}

.category-sidebar {
    width: 80px;
    background: #f5f5f5;
    overflow-y: auto;
}

.sidebar-item {
    padding: 14px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
}

.sidebar-item.active {
    background: var(--white);
    color: var(--primary);
}

.sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--primary);
    border-radius: 0 2px 2px 0;
}

.category-content {
    flex: 1;
    padding: 12px;
    background: var(--white);
}

.content-banner {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.content-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subcategory h4 {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.sub-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.sub-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.sub-item img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 6px;
}

.sub-item span {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 商品详情页 */
.detail-content {
    padding-bottom: 80px;
}

.detail-image {
    width: 100%;
    height: 350px;
    background: #f5f5f5;
}

.detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-info {
    padding: 16px;
    background: var(--white);
}

.detail-price {
    display: flex;
    align-items: baseline;
    margin-bottom: 12px;
}

.current-price {
    font-size: 24px;
    color: var(--primary);
    font-weight: 700;
}

.original-price {
    font-size: 14px;
    color: var(--text-light);
    text-decoration: line-through;
    margin-left: 8px;
}

.discount-tag {
    background: #fff0f0;
    color: var(--primary);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

.detail-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.detail-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}

.detail-tags {
    display: flex;
    gap: 8px;
}

.detail-tags span {
    font-size: 11px;
    color: var(--primary);
    background: #fff0f0;
    padding: 3px 8px;
    border-radius: 4px;
}

.detail-specs {
    margin-top: 10px;
    padding: 12px 16px;
    background: var(--white);
}

.spec-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.spec-item:last-child {
    border-bottom: none;
}

.spec-label {
    color: var(--text-light);
    font-size: 13px;
}

.spec-value {
    color: var(--text-primary);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.spec-value svg {
    width: 14px;
    height: 14px;
}

.detail-section {
    padding: 16px;
    background: var(--white);
    margin-top: 10px;
}

.detail-section h3 {
    font-size: 15px;
    margin-bottom: 12px;
}

.review-item {
    padding: 12px 0;
}

.review-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 10px;
}

.review-meta {
    flex: 1;
}

.username {
    display: block;
    font-size: 13px;
    color: var(--text-primary);
}

.date {
    font-size: 11px;
    color: var(--text-light);
}

.rating svg {
    width: 14px;
    height: 14px;
}

.review-content {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
}

.review-images {
    display: flex;
    gap: 8px;
}

.review-images img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
}

/* 详情页底部 */
.detail-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    display: flex;
    background: var(--white);
    padding: 8px 12px;
    padding-bottom: calc(8px + var(--safe-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
}

.footer-icons {
    display: flex;
    gap: 8px;
    margin-right: 12px;
}

.icon-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
    cursor: pointer;
}

.icon-item svg {
    width: 22px;
    height: 22px;
    color: var(--text-secondary);
}

.icon-item span {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: 2px;
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    min-width: 16px;
    height: 16px;
border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.footer-actions {
    flex: 1;
    display: flex;
    gap: 8px;
}

.footer-actions button {
    flex: 1;
    padding: 10px 0;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.btn-add-cart {
    background: linear-gradient(135deg, #ffa502 0%, #ff9500 100%);
    color: var(--white);
}

.btn-buy-now {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    color: var(--white);
}

/* 购物车 */
.cart-content {
    padding: 12px;
}

.cart-store {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
}

.store-header {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.store-name {
    font-size: 14px;
    font-weight: 500;
    margin-left: 8px;
}

.cart-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.cart-item:last-child {
    border-bottom: none;
}

.item-image {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 10px;
    flex-shrink: 0;
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-info {
    flex: 1;
    min-width: 0;
}

.item-info h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-spec {
    font-size: 12px;
    color: var(--text-light);
}

.item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.item-price {
    font-size: 15px;
    color: var(--primary);
    font-weight: 600;
}

.quantity-control {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 4px;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    font-size: 16px;
    cursor: pointer;
    color: var(--text-secondary);
}

.qty-num {
    width: 30px;
    text-align: center;
    font-size: 14px;
}

.cart-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: #fff9e6;
    border-radius: 8px;
    margin-top: 12px;
    font-size: 12px;
    color: #fa8c16;
}

.cart-tip svg {
    width: 16px;
    height: 16px;
}

.cart-footer {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--white);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 99;
}

.all-select {
    display: flex;
    align-items: center;
    gap: 8px;
}

.all-select span {
    font-size: 14px;
    color: var(--text-primary);
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.total-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.total-info span:first-child {
    font-size: 12px;
    color: var(--text-light);
}

.total-price {
    font-size: 18px;
    color: var(--primary);
    font-weight: 700;
}

.checkout-btn {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    color: var(--white);
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
}

/* Checkbox样式 */
.checkbox-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-wrap input {
    opacity: 0;
    width: 0;
    height: 0;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.checkbox-wrap input:checked + .checkmark {
    background: var(--primary);
    border-color: var(--primary);
}

.checkbox-wrap input:checked + .checkmark::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

/* 个人中心 */
.profile-header-bg {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    padding: 20px 16px 30px;
}

.profile-header {
    display: flex;
    align-items: center;
    position: relative;
}

.avatar-large {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.3);
}

.avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info {
    margin-left: 14px;
    color: var(--white);
}

.profile-info h2 {
    font-size: 18px;
    margin-bottom: 4px;
}

.profile-info p {
    font-size: 12px;
    opacity: 0.8;
}

.member-tag {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    margin-top: 6px;
}

.profile-edit {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.2);
    border: none;
    color: var(--white);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
}

.profile-edit svg {
    width: 14px;
    height: 14px;
}

/* 订单区域 */
.order-section {
    background: var(--white);
    margin: -20px 12px 12px;
    border-radius: 12px;
    padding: 16px;
    position: relative;
    z-index: 1;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title h3 {
    font-size: 15px;
}

.view-all {
    font-size: 12px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.view-all svg {
    width: 14px;
    height: 14px;
}

.order-tabs {
    display: flex;
    justify-content: space-around;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.tab-icon {
    position: relative;
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
}

.tab-icon svg {
    width: 28px;
    height: 28px;
    color: var(--text-primary);
}

.tab-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.tab-item span:last-child {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 菜单列表 */
.menu-section {
    background: var(--white);
    margin: 0 12px;
    border-radius: 12px;
    overflow: hidden;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
}

.menu-item:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.menu-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.menu-icon svg {
    width: 18px;
    height: 18px;
}

.menu-item span {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
}

.menu-item .arrow {
    width: 16px;
    height: 16px;
    color: var(--text-light);
}

/* 订单列表页 */
.order-tabs-nav {
    display: flex;
    background: var(--white);
    padding: 0 16px;
    border-bottom: 1px solid #f0f0f0;
}

.tab-nav-item {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
}

.tab-nav-item.active {
    color: var(--primary);
}

.tab-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--primary);
}

.order-list {
    padding: 12px;
}

.order-card {
    background: var(--white);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.order-store {
    font-size: 13px;
    font-weight: 500;
}

.order-status {
    font-size: 13px;
    color: var(--primary);
}

.order-status.received {
    color: #fa8c16;
}

.order-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.order-item img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
}

.order-item-info {
    flex: 1;
    margin-left: 10px;
}

.order-item-info h4 {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}

.order-spec {
    font-size: 11px;
    color: var(--text-light);
}

.order-item-price {
    text-align: right;
}

.order-item-price span:first-child {
    display: block;
    font-size: 13px;
    color: var(--text-primary);
}

.order-qty {
    font-size: 11px;
    color: var(--text-light);
}

.order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.order-total span:first-child {
    font-size: 12px;
    color: var(--text-light);
}

.order-total .total-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.order-actions {
    display: flex;
    gap: 8px;
}

.order-actions button {
    padding: 6px 14px;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #ddd;
    background: var(--white);
}

.btn-cancel {
    color: var(--text-secondary);
}

.btn-pay {
    background: var(--primary) !important;
    color: var(--white) !important;
    border: none !important;
}

.btn-default {
    color: var(--text-primary);
}

.btn-confirm {
    background: var(--primary) !important;
    color: var(--white) !important;
    border: none !important;
}

/* 联系骑手按钮 */
.btn-rider {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px !important;
    color: #27ae60 !important;
    border: 1px solid #27ae60 !important;
    background: var(--white) !important;
}

.btn-rider svg {
    width: 14px;
    height: 14px;
}

/* 地址列表 */
.address-list {
    padding: 12px;
}

.address-card {
    background: var(--white);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.address-card.default {
    border: 1px solid var(--primary);
}

.address-main {
    flex: 1;
}

.address-user {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.address-user .name {
    font-size: 15px;
    font-weight: 500;
    margin-right: 10px;
}

.address-user .phone {
    font-size: 14px;
    color: var(--text-secondary);
}

.default-tag {
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 10px;
}

.address-detail {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.address-action svg {
    width: 20px;
    height: 20px;
    color: var(--text-light);
}

/* 底部导航 */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    display: flex;
    background: var(--white);
    padding: 6px 0;
    padding-bottom: calc(6px + var(--safe-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 1000;
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
    cursor: pointer;
    position: relative;
}

.tab-item svg {
    width: 24px;
    height: 24px;
    color: var(--text-light);
}

.tab-item span {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 2px;
}

.tab-item.active svg {
    color: var(--primary);
}

.tab-item.active span {
    color: var(--primary);
}

.tab-badge {
    position: absolute;
    top: -2px;
    right: 50%;
    transform: translateX(12px);
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Toast提示 */
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.75);
    color: var(--white);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.toast.show {
    opacity: 1;
}

/* 动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-active {
    animation: fadeIn 0.3s ease;
}

/* 商品详情页底部操作栏 */
.detail-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    background: var(--white);
    display: flex;
    align-items: center;
    padding: 8px 12px;
    padding-bottom: calc(8px + var(--safe-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    z-index: 100;
}

.footer-icons {
    display: flex;
    gap: 16px;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.icon-item svg {
    width: 22px;
    height: 22px;
    color: var(--text-primary);
}

.icon-item span {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.footer-actions {
    flex: 1;
    display: flex;
    margin-left: 16px;
    gap: 8px;
}

.footer-actions button {
    flex: 1;
    padding: 10px 0;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-add-cart {
    background: linear-gradient(135deg, #ff9f43 0%, #ffc107 100%);
    color: var(--white);
}

.btn-buy-now {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    color: var(--white);
}

.footer-actions button:active {
    transform: scale(0.96);
    opacity: 0.9;
}

JS文件（可选）

// 页面导航历史
let pageHistory = ['home'];

// 当前页面
let currentPage = 'home';

// 显示页面
function showPage(pageId) {
    // 记录历史
    if (currentPage !== pageId) {
        pageHistory.push(pageId);
    }
    currentPage = pageId;
    
    // 隐藏所有页面
    document.querySelectorAll('.page').forEach(page => {
        page.classList.remove('page-active');
    });
    
    // 显示目标页面
    const targetPage = document.getElementById('page-' + pageId);
    if (targetPage) {
        targetPage.classList.add('page-active');
    }
    
    // 更新TabBar状态
    updateTabBar(pageId);
}

// 返回上一页
function goBack() {
    if (pageHistory.length > 1) {
        pageHistory.pop();
        const prevPage = pageHistory[pageHistory.length - 1];
        currentPage = prevPage;
        
        document.querySelectorAll('.page').forEach(page => {
            page.classList.remove('page-active');
        });
        
        const targetPage = document.getElementById('page-' + prevPage);
        if (targetPage) {
            targetPage.classList.add('page-active');
        }
        
        updateTabBar(prevPage);
    }
}

// 更新TabBar
function updateTabBar(pageId) {
    document.querySelectorAll('.tab-item').forEach(item => {
        item.classList.remove('active');
    });
    
    const tabMap = {
        'home': 0,
        'category': 1,
        'cart': 2,
        'profile': 3
    };
    
    if (tabMap[pageId] !== undefined) {
        const tabs = document.querySelectorAll('.tab-bar .tab-item');
        if (tabs[tabMap[pageId]]) {
            tabs[tabMap[pageId]].classList.add('active');
        }
    }
}

// Banner轮播
let currentBanner = 0;
const banners = document.querySelectorAll('.banner-slide');
const dots = document.querySelectorAll('.dot');

function nextBanner() {
    banners[currentBanner].classList.remove('active');
    dots[currentBanner].classList.remove('active');
    
    currentBanner = (currentBanner + 1) % banners.length;
    
    banners[currentBanner].classList.add('active');
    dots[currentBanner].classList.add('active');
}

// 自动轮播
setInterval(nextBanner, 3000);

// 点击dot切换
dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
        banners[currentBanner].classList.remove('active');
        dots[currentBanner].classList.remove('active');
        
        currentBanner = index;
        
        banners[currentBanner].classList.add('active');
        dots[currentBanner].classList.add('active');
    });
});

// 分类侧边栏切换
document.querySelectorAll('.sidebar-item').forEach(item => {
    item.addEventListener('click', function() {
        document.querySelectorAll('.sidebar-item').forEach(i => {
            i.classList.remove('active');
        });
        this.classList.add('active');
    });
});

// 数量加减
function changeQty(btn, delta) {
    const qtySpan = btn.parentElement.querySelector('.qty-num');
    let qty = parseInt(qtySpan.textContent);
    qty += delta;
    if (qty < 1) qty = 1;
    qtySpan.textContent = qty;
    
    // 更新总价（模拟）
    updateCartTotal();
}

// 更新购物车总价
function updateCartTotal() {
    const items = document.querySelectorAll('.cart-item');
    let total = 0;
    let count = 0;
    
    items.forEach(item => {
        const checkbox = item.querySelector('input[type="checkbox"]');
        if (checkbox && checkbox.checked) {
            const price = parseFloat(item.querySelector('.item-price').textContent.replace('¥', ''));
            const qty = parseInt(item.querySelector('.qty-num').textContent);
            total += price * qty;
            count += qty;
        }
    });
    
    const totalPrice = document.querySelector('.total-price');
    if (totalPrice) {
        totalPrice.textContent = '¥' + total.toFixed(1);
    }
    
    const checkoutBtn = document.querySelector('.checkout-btn');
    if (checkoutBtn) {
        checkoutBtn.textContent = '去结算 (' + count + '件)';
    }
}

// 购物车编辑模式
let isEditing = false;

function toggleCartEdit() {
    isEditing = !isEditing;
    const editBtn = document.querySelector('.edit-btn');
    
    if (isEditing) {
        editBtn.textContent = '完成';
        // 显示删除按钮等编辑功能
    } else {
        editBtn.textContent = '编辑';
    }
}

// Toast提示
function showToast(message) {
    const toast = document.getElementById('toast');
    toast.textContent = message;
    toast.classList.add('show');
    
    setTimeout(() => {
        toast.classList.remove('show');
    }, 2000);
}

// 加入购物车
function addToCart() {
    showToast('已加入购物车');
    
    // 更新购物车数量
    const badges = document.querySelectorAll('.tab-badge, .cart-badge');
    badges.forEach(badge => {
        const current = parseInt(badge.textContent);
        badge.textContent = current + 1;
    });
}

// 立即购买
function buyNow() {
    showToast('正在跳转支付...');
    setTimeout(() => {
        showPage('cart');
    }, 1000);
}

// 收藏
document.querySelectorAll('.icon-item').forEach(item => {
    item.addEventListener('click', function() {
        const svg = this.querySelector('svg');
        if (svg && svg.innerHTML.includes('heart')) {
            showToast('已收藏');
        }
    });
});

// 规格选择
function toggleSpec(element) {
    showToast('选择规格');
}

// 订单标签切换
document.querySelectorAll('.tab-nav-item').forEach(item => {
    item.addEventListener('click', function() {
        document.querySelectorAll('.tab-nav-item').forEach(i => {
            i.classList.remove('active');
        });
        this.classList.add('active');
    });
});

// 全选功能
document.querySelectorAll('.all-select input').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const items = document.querySelectorAll('.cart-item input[type="checkbox"]');
        items.forEach(item => {
            item.checked = this.checked;
        });
        updateCartTotal();
    });
});

// 店铺内商品全选
document.querySelectorAll('.store-header input').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const store = this.closest('.cart-store');
        const items = store.querySelectorAll('.cart-item input[type="checkbox"]');
        items.forEach(item => {
            item.checked = this.checked;
        });
        updateCartTotal();
    });
});

// 商品项选择
document.querySelectorAll('.cart-item input[type="checkbox"]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        updateCartTotal();
        
        // 检查是否全选
        const store = this.closest('.cart-store');
        const allItems = store.querySelectorAll('.cart-item input[type="checkbox"]');
        const checkedItems = store.querySelectorAll('.cart-item input[type="checkbox"]:checked');
        
        const storeCheckbox = store.querySelector('.store-header input[type="checkbox"]');
        storeCheckbox.checked = allItems.length === checkedItems.length;
    });
});

// 阻止详情页底部按钮点击穿透
document.querySelector('.detail-footer').addEventListener('click', function(e) {
    e.stopPropagation();
});

// 联系骑手
function contactRider() {
    showToast('正在拨打骑手电话...');
    // 实际项目中这里会调用拨打电话功能
    // window.location.href = 'tel:13800138000';
}

// 初始化页面显示
document.addEventListener('DOMContentLoaded', function() {
    showPage('home');
});

HTML内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>酒水外卖后台管理系统</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #1E3A8A;
  --primary-light: #3B82F6;
  --primary-dark: #1E40AF;
  --accent: #F59E0B;
  --success: #10B981;
  --danger: #EF4444;
  --warning: #F59E0B;
  --bg: #F1F5F9;
  --bg-dark: #0F172A;
  --text: #1E293B;
  --text-secondary: #64748B;
  --text-light: #94A3B8;
  --border: #E2E8F0;
  --card-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
}
/* Sidebar */
.sidebar {
  width: 240px;
  background: linear-gradient(180deg, var(--bg-dark) 0%, #1E293B 100%);
  min-height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  padding: 20px 0;
  transition: all 0.3s;
  z-index: 100;
}
.logo {
  padding: 0 24px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 20px;
}
.logo h1 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo h1 span { font-size: 24px; }
.nav-section { margin-bottom: 8px; }
.nav-title {
  padding: 8px 24px;
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.nav-item {
  padding: 12px 24px;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
  position: relative;
}
.nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-item.active {
  background: linear-gradient(90deg, var(--primary-light), transparent);
  color: #fff;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.nav-item .icon { font-size: 18px; width: 20px; text-align: center; }
.nav-item .badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.nav-item .arrow { margin-left: auto; font-size: 10px; transition: transform 0.2s; }
.nav-item.expanded .arrow { transform: rotate(90deg); }
.sub-nav {
  display: none;
  background: rgba(0,0,0,0.2);
  padding: 8px 0;
}
.sub-nav.show { display: block; }
.sub-nav .nav-item {
  padding: 10px 24px 10px 52px;
  font-size: 13px;
}

/* Main Content */
.main {
  margin-left: 240px;
  flex: 1;
  min-height: 100vh;
}
/* Header */
.header {
  background: #fff;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-left { display: flex; align-items: center; gap: 16px; }
.header-left h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.app-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
}
.app-selector:hover { background: var(--border); }
.header-right { display: flex; align-items: center; gap: 20px; }
.header-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  font-size: 18px;
}
.header-icon:hover { background: var(--border); }
.header-icon .dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: 50%;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.user-detail { font-size: 13px; }
.user-detail .name { font-weight: 600; color: var(--text); }
.user-detail .role { color: var(--text-secondary); font-size: 11px; }

/* Content Area */
.content {
  padding: 24px 32px;
}
/* Page Sections */
.page-section { display: none; }
.page-section.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Stats Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--card-shadow);
}
.stat-card .icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}
.stat-card .value { font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.stat-card .label { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
.stat-card .trend { font-size: 12px; display: flex; align-items: center; gap: 4px; }
.stat-card .trend.up { color: var(--success); }
.stat-card .trend.down { color: var(--danger); }
.stat-card:nth-child(1) .icon-wrap { background: rgba(59,130,246,0.1); }
.stat-card:nth-child(2) .icon-wrap { background: rgba(16,185,129,0.1); }
.stat-card:nth-child(3) .icon-wrap { background: rgba(245,158,11,0.1); }
.stat-card:nth-child(4) .icon-wrap { background: rgba(239,68,68,0.1); }

/* Charts Row */
.charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--card-shadow);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.card-header h3 { font-size: 16px; font-weight: 600; color: var(--text); }
.card-header .tabs { display: flex; gap: 16px; }
.card-header .tab {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}
.card-header .tab:hover { color: var(--primary-light); }
.card-header .tab.active { background: var(--primary-light); color: #fff; }

/* Chart Placeholder */
.chart-area {
  height: 280px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 20px 0;
  border-bottom: 1px dashed var(--border);
}
.bar {
  width: 40px;
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
  border-radius: 4px 4px 0 0;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}
.bar:hover { opacity: 0.8; transform: scaleY(1.02); transform-origin: bottom; }
.bar::after {
  content: attr(data-value);
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity 0.2s;
}
.bar:hover::after { opacity: 1; }

/* Pie Chart */
.pie-chart {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: conic-gradient(
    var(--primary-light) 0deg 126deg,
    var(--success) 126deg 216deg,
    var(--accent) 216deg 270deg,
    var(--danger) 270deg 324deg,
    var(--text-light) 324deg 360deg
  );
  margin: 20px auto;
  position: relative;
}
.pie-chart::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 50%;
}
.pie-legend { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }

/* Recent Orders */
.order-list { display: flex; flex-direction: column; gap: 12px; }
.order-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: var(--bg);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.order-item:hover { background: var(--border); transform: translateX(4px); }
.order-item .order-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 14px;
}
.order-item:nth-child(1) .order-icon { background: rgba(59,130,246,0.1); }
.order-item:nth-child(2) .order-icon { background: rgba(16,185,129,0.1); }
.order-item:nth-child(3) .order-icon { background: rgba(245,158,11,0.1); }
.order-item:nth-child(4) .order-icon { background: rgba(139,92,246,0.1); }
.order-info { flex: 1; }
.order-info .title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.order-info .desc { font-size: 12px; color: var(--text-secondary); }
.order-status {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}
.order-status.pending { background: rgba(245,158,11,0.1); color: var(--warning); }
.order-status.completed { background: rgba(16,185,129,0.1); color: var(--success); }
.order-status.cancelled { background: rgba(239,68,68,0.1); color: var(--danger); }
.order-amount { font-size: 15px; font-weight: 600; color: var(--text); margin-left: 16px; }

/* Table Styles */
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); }
th { background: var(--bg); font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
td { font-size: 13px; color: var(--text); }
tr:hover td { background: var(--bg); }
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}
.status-badge.active { background: rgba(16,185,129,0.1); color: var(--success); }
.status-badge.inactive { background: rgba(239,68,68,0.1); color: var(--danger); }
.status-badge.pending { background: rgba(245,158,11,0.1); color: var(--warning); }
.action-btns { display: flex; gap: 8px; }
.btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}
.btn-primary { background: var(--primary-light); color: #fff; }
.btn-primary:hover { background: var(--primary); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }
.btn-outline:hover { background: var(--bg); border-color: var(--primary-light); color: var(--primary-light); }
.btn-danger { background: rgba(239,68,68,0.1); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }

/* Form Styles */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.form-group { margin-bottom: 20px; }
.form-group.full { grid-column: span 2; }
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 8px; }
.form-label span { color: var(--danger); }
.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s;
}
.form-input:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 40px; }
.form-row { display: flex; gap: 12px; align-items: center; }
.file-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.file-upload:hover { border-color: var(--primary-light); background: rgba(59,130,246,0.02); }
.file-upload .preview {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--text-secondary);
}
.file-upload .info { flex: 1; }
.file-upload .info .title { font-size: 14px; font-weight: 500; color: var(--text); }
.file-upload .info .desc { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

/* Product Grid */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.product-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: all 0.3s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
.product-card .img {
  height: 160px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #fff;
}
.product-card .info { padding: 16px; }
.product-card .name { font-size: 14px; font-weight: 600;color: var(--text); margin-bottom: 8px; }
.product-card .meta { display: flex; justify-content: space-between; align-items: center; }
.product-card .price { font-size: 18px; font-weight: 700; color: var(--danger); }
.product-card .stock { font-size: 11px; color: var(--text-secondary); background: var(--bg); padding: 2px 8px; border-radius: 10px; }

/* Tab Bar */
.tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--bg);
  border-radius: 10px;
  width: fit-content;
}
.tab-item {
  padding: 10px 20px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}
.tab-item:hover { color: var(--text); }
.tab-item.active { background: #fff; color: var(--primary-light); font-weight: 500; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* Search & Filter */
.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.search-box {
  flex: 1;
  max-width: 320px;
  position: relative;
}
.search-box input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
}
.search-box input:focus { outline: none; background: #fff; border-color: var(--primary-light); }
.search-box .icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 16px;
}
.filter-group { display: flex; gap: 12px; }

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.pagination-info { font-size: 13px; color: var(--text-secondary); }
.pagination-btns { display: flex; gap: 8px; }
.page-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.page-btn:hover { border-color: var(--primary-light); color: var(--primary-light); }
.page-btn.active { background: var(--primary-light); color: #fff; border-color: var(--primary-light); }

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal-overlay.show { display: flex; }
.modal {
  background: #fff;
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow: auto;
  animation: modalIn 0.3s ease;
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h3 { font-size: 18px; font-weight: 600; }
.modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; color: var(--text-secondary); border-radius: 8px; transition: all 0.2s; }
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 12px; }

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 14px 24px;
  background: var(--text);
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 2000;
  animation: toastIn 0.3s ease;
  display: none;
}
.toast.show { display: block; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Switch */
.switch {
  position: relative;
  width: 44px;
  height: 24px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border);
  border-radius: 24px;
  transition: all 0.3s;
}
.switch .slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: all 0.3s;
}
.switch input:checked + .slider { background: var(--success); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* Detail View */
.detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s;
}
.back-btn:hover { background: var(--bg); border-color: var(--primary-light); }
.detail-header h2 { font-size: 20px; font-weight: 600; color: var(--text); }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
.info-card {
  padding: 20px;
  background: var(--bg);
  border-radius: 12px;
}
.info-card .label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.info-card .value { font-size: 16px; font-weight: 600; color: var(--text); }

/* Avatar */
.avatar-sm { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.avatar-lg { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
</style>
</head>
<body>
<!-- Sidebar -->
<aside class="sidebar">
  <div class="logo">
    <h1><span>🍺</span> 酒水外卖</h1>
  </div>
  
  <div class="nav-section">
    <div class="nav-title">主要功能</div>
    <div class="nav-item active" data-page="dashboard">
      <span class="icon">📊</span>
      <span>数据看板</span>
    </div>
    <div class="nav-item" data-page="products">
      <span class="icon">📦</span>
      <span>商品管理</span>
    </div>
    <div class="nav-item" data-page="packages">
      <span class="icon">🎁</span>
      <span>套餐管理</span>
    </div>
    <div class="nav-item" data-page="flash">
      <span class="icon">⚡</span>
      <span>限时抢购</span>
      <span class="badge">3</span>
    </div>
    <div class="nav-item" data-page="orders">
      <span class="icon">📋</span>
      <span>订单管理</span>
      <span class="badge">12</span>
    </div>
    <div class="nav-item" data-page="delivery">
      <span class="icon">🚚</span>
      <span>配送管理</span>
    </div>
  </div>
  
  <div class="nav-section">
    <div class="nav-title">用户与会员</div>
    <div class="nav-item" data-page="users">
      <span class="icon">👥</span>
      <span>用户管理</span>
    </div>
    <div class="nav-item" data-page="members">
      <span class="icon">💳</span>
      <span>会员管理</span>
    </div>
  </div>
  
  <div class="nav-section">
    <div class="nav-title">运营</div>
    <div class="nav-item" data-page="marketing">
      <span class="icon">🎯</span>
      <span>营销管理</span>
    </div>
    <div class="nav-item" data-page="shop">
      <span class="icon">🏪</span>
      <span>店铺管理</span>
    </div>
    <div class="nav-item" data-page="finance">
      <span class="icon">💰</span>
      <span>财务管理</span>
    </div>
  </div>
  
  <div class="nav-section">
    <div class="nav-title">系统</div>
    <div class="nav-item" data-page="settings">
      <span class="icon">⚙️</span>
      <span>系统设置</span>
    </div>
    <div class="nav-item" data-page="permissions">
      <span class="icon">🔐</span>
      <span>权限管理</span>
    </div>
  </div>
</aside>

<!-- Main Content -->
<main class="main">
  <header class="header">
    <div class="header-left">
      <div class="app-selector">
        <span>📱</span>
        <span>酒水外卖小程序</span>
        <span>▼</span>
      </div>
    </div>
    <div class="header-right">
      <div class="header-icon">🔔<span class="dot"></span></div>
      <div class="header-icon">💬</div>
      <div class="user-info">
        <div class="user-avatar">张</div>
        <div class="user-detail">
          <div class="name">张经理</div>
          <div class="role">超级管理员</div>
        </div>
      </div>
    </div>
  </header>
  
  <div class="content">
    <!-- 数据看板 -->
    <section class="page-section active" id="page-dashboard">
      <div class="stats-grid">
        <div class="stat-card">
          <div class="icon-wrap">📦</div>
          <div class="value">¥28,560</div>
          <div class="label">今日销售额</div>
          <div class="trend up">↑ 12.5% 较昨日</div>
        </div>
        <div class="stat-card">
          <div class="icon-wrap">🧾</div>
          <div class="value">486</div>
          <div class="label">今日订单</div>
          <div class="trend up">↑ 8.3% 较昨日</div>
        </div>
        <div class="stat-card">
          <div class="icon-wrap">👥</div>
          <div class="value">1,256</div>
          <div class="label">新增用户</div>
          <div class="trend up">↑ 15.2% 较昨日</div>
        </div>
        <div class="stat-card">
          <div class="icon-wrap">⭐</div>
          <div class="value">4.8</div>
          <div class="label">店铺评分</div>
          <div class="trend up">↑ 0.1 较昨日</div>
        </div>
      </div>
      
      <div class="charts-row">
        <div class="card">
          <div class="card-header">
            <h3>销售趋势</h3>
            <div class="tabs">
              <span class="tab active">今日</span>
              <span class="tab">本周</span>
              <span class="tab">本月</span>
            </div>
          </div>
          <div class="chart-area">
            <div class="bar" style="height: 60%;" data-value="¥1,200"></div>
            <div class="bar" style="height: 80%;" data-value="¥1,800"></div>
            <div class="bar" style="height: 95%;" data-value="¥2,400"></div>
            <div class="bar" style="height: 75%;" data-value="¥1,600"></div>
            <div class="bar" style="height: 100%;" data-value="¥2,800"></div>
            <div class="bar" style="height: 85%;" data-value="¥2,100"></div>
            <div class="bar" style="height: 70%;" data-value="¥1,500"></div>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <h3>订单来源</h3>
          </div>
          <div class="pie-chart"></div>
          <div class="pie-legend">
            <div class="legend-item"><span class="legend-dot" style="background: var(--primary-light)"></span> 小程序 35%</div>
            <div class="legend-item"><span class="legend-dot" style="background: var(--success)"></span> APP 25%</div>
            <div class="legend-item"><span class="legend-dot" style="background: var(--accent)"></span> 外卖平台 15%</div>
            <div class="legend-item"><span class="legend-dot" style="background: var(--danger)"></span> 线下 15%</div>
          </div>
        </div>
      </div>
      
      <div class="card">
        <div class="card-header">
          <h3>最新订单</h3>
          <span class="tab" data-page="orders" style="cursor:pointer;">查看全部 →</span>
        </div>
        <div class="order-list">
          <div class="order-item">
            <div class="order-icon">🍺</div>
            <div class="order-info">
              <div class="title">青岛啤酒 x 6 + 花生米</div>
              <div class="desc">订单号：DD20240512001 · 12:30</div>
            </div>
            <span class="order-status completed">已完成</span>
            <span class="order-amount">¥128.00</span>
          </div>
          <div class="order-item">
            <div class="order-icon">🍷</div>
            <div class="order-info">
              <div class="title">长城干红葡萄酒 x 2</div>
              <div class="desc">订单号：DD20240512002 · 12:45</div>
            </div>
            <span class="order-status pending">配送中</span>
            <span class="order-amount">¥336.00</span>
          </div>
          <div class="order-item">
            <div class="order-icon">🥃</div>
            <div class="order-info">
              <div class="title">威士忌套餐</div>
              <div class="desc">订单号：DD20240512003 · 13:15</div>
            </div>
            <span class="order-status pending">待发货</span>
            <span class="order-amount">¥568.00</span>
          </div>
          <div class="order-item">
            <div class="order-icon">🍶</div>
            <div class="order-info">
              <div class="title">泸州老窖 x 1 + 小菜</div>
              <div class="desc">订单号：DD20240512004 · 13:30</div>
            </div>
            <span class="order-status completed">已完成</span>
            <span class="order-amount">¥189.00</span>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 商品管理 -->
    <section class="page-section" id="page-products">
      <div class="toolbar">
        <div class="search-box">
          <span class="icon">🔍</span>
          <input type="text" placeholder="搜索商品名称/编码...">
        </div>
        <div class="filter-group">
          <select class="form-input form-select" style="width:140px;">
            <option>全部分类</option>
            <option>啤酒</option>
            <option>白酒</option>
            <option>红酒</option>
            <option>洋酒</option>
          </select>
          <select class="form-input form-select" style="width:120px;">
            <option>全部状态</option>
            <option>上架</option>
            <option>下架</option>
          </select>
        </div>
        <button class="btn btn-primary" onclick="showToast('新增商品')">+ 新增商品</button>
      </div>
      
      <div class="card" style="padding:0;overflow:hidden;">
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>商品信息</th>
                <th>分类</th>
                <th>价格</th>
                <th>库存</th>
                <th>销量</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><div style="display:flex;align-items:center;gap:12px;"><div style="width:40px;height:40px;background:#667eea;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;">🍺</div><div><div style="font-weight:500;">青岛啤酒</div><div style="font-size:11px;color:#94A3B8;">编码：P001</div></div></div></td>
                <td>啤酒</td>
                <td style="color:#EF4444;font-weight:600;">¥8.00</td>
                <td>500</td>
                <td>1,280</td>
                <td><span class="status-badge active">上架</span></td>
                <td><div class="action-btns"><button class="btn btn-outline">编辑</button><button class="btn btn-danger">下架</button></div></td>
              </tr>
              <tr>
                <td><div style="display:flex;align-items:center;gap:12px;"><div style="width:40px;height:40px;background:#dc2626;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;">🍷</div><div><div style="font-weight:500;">长城干红</div><div style="font-size:11px;color:#94A3B8;">编码：P002</div></div></div></td>
                <td>红酒</td>
                <td style="color:#EF4444;font-weight:600;">¥168.00</td>
                <td>120</td>
                <td>456</td>
                <td><span class="status-badge active">上架</span></td>
                <td><div class="action-btns"><button class="btn btn-outline">编辑</button><button class="btn btn-danger">下架</button></div></td>
              </tr>
              <tr>
                <td><div style="display:flex;align-items:center;gap:12px;"><div style="width:40px;height:40px;background:#d97706;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;">🥃</div><div><div style="font-weight:500;">芝华士威士忌</div><div style="font-size:11px;color:#94A3B8;">编码：P003</div></div></div></td>
                <td>洋酒</td>
                <td style="color:#EF4444;font-weight:600;">¥288.00</td>
                <td>80</td>
                <td>234</td>
                <td><span class="status-badge active">上架</span></td>
                <td><div class="action-btns"><button class="btn btn-outline">编辑</button><button class="btn btn-danger">下架</button></div></td>
              </tr>
              <tr>
                <td><div style="display:flex;align-items:center;gap:12px;"><div style="width:40px;height:40px;background:#7c3aed;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;">🍶</div><div><div style="font-weight:500;">泸州老窖</div><div style="font-size:11px;color:#94A3B8;">编码：P004</div></div></div></td>
                <td>白酒</td>
                <td style="color:#EF4444;font-weight:600;">¥188.00</td>
                <td>200</td>
                <td>890</td>
                <td><span class="status-badge active">上架</span></td>
                <td><div class="action-btns"><button class="btn btn-outline">编辑</button><button class="btn btn-danger">下架</button></div></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="pagination">
          <div class="pagination-info">共 4 条记录，第 1/1 页</div>
          <div class="pagination-btns">
            <div class="page-btn active">1</div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 订单管理 -->
    <section class="page-section" id="page-orders">
      <div class="tab-bar">
        <div class="tab-item active">全部订单</div>
        <div class="tab-item">待支付</div>
        <div class="tab-item">待发货</div>
        <div class="tab-item">配送中</div>
        <div class="tab-item">已完成</div>
        <div class="tab-item">已取消</div>
      </div>
      
      <div class="card" style="padding:0;overflow:hidden;">
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>订单信息</th>
                <th>用户</th>
                <th>订单金额</th>
                <th>支付方式</th>
                <th>订单状态</th>
                <th>下单时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><div style="font-weight:500;">DD20240512004</div><div style="font-size:11px;color:#94A3B8;">泸州老窖 x 1</div></td>
                <td><div style="display:flex;align-items:center;gap:8px;"><div class="avatar-sm" style="background:#667eea;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;">李</div>李先生</div></td>
                <td style="font-weight:600;">¥189.00</td>
                <td>微信支付</td>
                <td><span class="status-badge active">已完成</span></td>
                <td>2024-05-12 13:30</td>
                <td><button class="btn btn-outline" onclick="showToast('查看详情')">查看详情</button></td>
              </tr>
              <tr>
                <td><div style="font-weight:500;">DD20240512003</div><div style="font-size:11px;color:#94A3B8;">威士忌套餐</div></td>
                <td><div style="display:flex;align-items:center;gap:8px;"><div class="avatar-sm" style="background:#10B981;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;">王</div>王女士</div></td>
                <td style="font-weight:600;">¥568.00</td>
                <td>支付宝</td>
                <td><span class="status-badge pending">待发货</span></td>
                <td>2024-05-12 13:15</td>
                <td><button class="btn btn-primary" onclick="showToast('发货成功')">立即发货</button></td>
              </tr>
              <tr>
                <td><div style="font-weight:500;">DD20240512002</div><div style="font-size:11px;color:#94A3B8;">长城干红 x 2</div></td>
                <td><div style="display:flex;align-items:center;gap:8px;"><div class="avatar-sm" style="background:#F59E0B;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;">张</div>张先生</div></td>
                <td style="font-weight:600;">¥336.00</td>
                <td>微信支付</td>
                <td><span class="status-badge pending">配送中</span></td>
                <td>2024-05-12 12:45</td>
                <td><button class="btn btn-outline" onclick="showToast('查看详情')">查看详情</button></td>
              </tr>
              <tr>
                <td><div style="font-weight:500;">DD20240512001</div><div style="font-size:11px;color:#94A3B8;">青岛啤酒 x 6 + 花生米</div></td>
                <td><div style="display:flex;align-items:center;gap:8px;"><div class="avatar-sm" style="background:#EF4444;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;">赵</div>赵先生</div></td>
                <td style="font-weight:600;">¥128.00</td>
                <td>微信支付</td>
                <td><span class="status-badge active">已完成</span></td>
                <td>2024-05-12 12:30</td>
                <td><button class="btn btn-outline" onclick="showToast('查看详情')">查看详情</button></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="pagination">
          <div class="pagination-info">共 4 条记录，第 1/1 页</div>
          <div class="pagination-btns">
            <div class="page-btn active">1</div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 店铺管理 -->
    <section class="page-section" id="page-shop">
      <div class="form-grid">
        <div class="card" style="grid-column:span 2;">
          <div class="card-header"><h3>基本信息</h3></div>
          <div class="form-group">
            <label class="form-label">店铺名称</label>
            <input type="text" class="form-input" value="酒水速达">
          </div>
          <div class="form-group">
            <label class="form-label">店铺Logo</label>
            <div class="file-upload">
              <div class="preview">🍺</div>
              <div class="info">
                <div class="title">点击上传Logo</div>
                <div class="desc">建议尺寸 200x200，支持 JPG、PNG 格式</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="card">
          <div class="card-header"><h3>营业设置</h3></div>
          <div class="form-group">
            <label class="form-label">营业开始时间</label>
            <input type="time" class="form-input" value="08:00">
          </div>
          <div class="form-group">
            <label class="form-label">营业结束时间</label>
            <input type="time" class="form-input" value="23:59">
          </div>
          <div class="form-group">
            <label class="form-label" style="display:flex;align-items:center;gap:8px;">
              24小时营业
              <label class="switch"><input type="checkbox"><span class="slider"></span></label>
            </label>
          </div>
        </div>
        
        <div class="card">
          <div class="card-header"><h3>其他设置</h3></div>
          <div class="form-group">
            <label class="form-label">店铺公告</label>
            <textarea class="form-input form-textarea" placeholder="输入店铺公告内容...">🎉 新品上市！青岛纯生买一送一！

服务承诺

客服电话

用户信息	手机号	会员等级	累计消费	注册时间	状态
李李先生	138****8888	⭐ 金卡会员	¥5,680	2024-01-15	正常
王王女士	139****6666	普通用户	¥1,280	2024-03-20	正常
张张先生	137****5555	普通用户	¥680	2024-04-10	正常

记录编号	类型	金额	账户	状态	时间
F20240512001	订单收入	+¥189.00	微信支付	已到账	2024-05-12 13:30
F20240512002	订单收入	+¥568.00	支付宝	处理中	2024-05-12 13:15
F20240511001	提现	-¥5,000.00	中国银行	已到账	2024-05-11 10:00

配送员	电话	状态	今日配送	评分	操作
刘刘师傅	138****1234	在线	12 单	4.9
陈陈师傅	139****5678	在线	8 单	4.8

角色名称	角色描述	人数	创建时间
超级管理员	拥有所有权限	2人	2024-01-01
运营管理员	负责日常运营管理	3人	2024-01-15
财务管理员	负责财务相关操作	1人	2024-02-01

编辑页面

财务记录

基础设置

通知设置

配送设置

套餐管理

限时抢购活动

配送员管理

会员等级设置

营销活动

角色权限