wsh5485/carwash_order
Archived
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases 8 Wiki Activity

style(packages): 优化表单样式和交互体验

Browse Source 
- 移除渐变边框效果，简化卡片悬停样式
- 为表单添加内联样式，提升视觉一致性和用户体验
- 调整服务项目输入框布局，使其更紧凑易用
This commit is contained in:
吴展鹏
2025-12-06 02:51:56 +08:00
parent ae3ed1e58f
commit 7f2fe3dd21
2 changed files with 74 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages.php
+74 -73
View File
@@ -94,54 +94,56 @@ $packages = $stmt->fetchAll();
<div class="package-form-container">
<h2>📋 添加新套餐</h2>
<form method="POST" class="package-form">
<form method="POST" class="package-form" style="background: white; border-radius: 8px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
<input type="hidden" name="action" value="add">
<div class="form-group">
<label for="package_name" class="required">套餐名称</label>
<input type="text" id="package_name" name="package_name" required placeholder="请输入套餐名称（如：标准洗车套餐）" class="form-control">
<div class="form-group" style="margin-bottom: 16px;">
<label for="package_name" class="required" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">套餐名称</label>
<input type="text" id="package_name" name="package_name" required placeholder="如：标准洗车套餐" class="form-control" style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
</div>
<div class="form-group">
<label for="description">套餐描述</label>
<textarea id="description" name="description" rows="3" placeholder="请详细描述套餐内容和特点" class="form-control"></textarea>
<div class="form-group" style="margin-bottom: 16px;">
<label for="description" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">套餐描述</label>
<textarea id="description" name="description" rows="3" placeholder="详细描述套餐内容和特点" class="form-control" style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; resize: vertical;"></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label for="base_duration" class="required">基础时长</label>
<div class="input-group">
<input type="number" id="base_duration" name="base_duration" min="15" step="15" value="60" required class="form-control">
<span class="input-group-addon">分钟</span>
<div class="form-row" style="display: flex; gap: 16px; margin-bottom: 16px;">
<div class="form-group" style="flex: 1; margin-bottom: 0;">
<label for="base_duration" class="required" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">基础时长</label>
<div class="input-group" style="display: flex; align-items: center;">
<input type="number" id="base_duration" name="base_duration" min="15" step="15" value="60" required class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 14px; border-right: none;">
<span class="input-group-addon" style="padding: 10px 12px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 0 4px 4px 0; font-size: 14px; color: #666;">分钟</span>
</div>
</div>
<div class="form-group">
<label for="price" class="required">价格</label>
<div class="input-group">
<span class="input-group-addon">¥</span>
<input type="number" id="price" name="price" min="0" step="0.01" required placeholder="0.00" class="form-control">
<div class="form-group" style="flex: 1; margin-bottom: 0;">
<label for="price" class="required" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">价格</label>
<div class="input-group" style="display: flex; align-items: center;">
<span class="input-group-addon" style="padding: 10px 12px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 14px; color: #666;">¥</span>
<input type="number" id="price" name="price" min="0" step="0.01" required placeholder="0.00" class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 0 4px 4px 0; font-size: 14px; border-left: none;">
</div>
</div>
</div>
<div class="form-group">
<label>服务项目</label>
<div class="services-container">
<div class="service-item">
<input type="text" name="services[]" placeholder="请输入服务项目（如：外观清洗）" value="外观清洗" class="form-control">
<button type="button" class="btn-danger btn-sm" onclick="removeService(this)"><span>删除</span></button>
<div class="form-group" style="margin-bottom: 16px;">
<label style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">服务项目</label>
<div class="services-container" style="margin-bottom: 8px;">
<div class="service-item" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
<input type="text" name="services[]" placeholder="如：外观清洗" value="外观清洗" class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
<button type="button" class="btn-danger btn-sm" onclick="removeService(this)" style="padding: 6px 12px; background: #ff4d4f; color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;"><span>删除</span></button>
</div>
<div class="service-item">
<input type="text" name="services[]" placeholder="请输入服务项目（如：内饰清洁）" value="内饰清洁" class="form-control">
<button type="button" class="btn-danger btn-sm" onclick="removeService(this)"><span>删除</span></button>
<div class="service-item" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
<input type="text" name="services[]" placeholder="如：内饰清洁" value="内饰清洁" class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
<button type="button" class="btn-danger btn-sm" onclick="removeService(this)" style="padding: 6px 12px; background: #ff4d4f; color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;"><span>删除</span></button>
</div>
</div>
<button type="button" class="btn-outline btn-sm" onclick="addService()"><span>+ 添加服务项目</span></button>
<button type="button" class="btn-outline btn-sm" onclick="addService()" style="padding: 6px 12px; background: white; color: #1890ff; border: 1px solid #1890ff; border-radius: 4px; font-size: 12px; cursor: pointer;"><span>+ 添加服务项目</span></button>
</div>
<div class="form-actions">
<button type="submit" class="btn-primary btn-lg"><span>✨ 添加套餐</span></button>
<div class="form-actions" style="margin-top: 24px; display: flex; justify-content: flex-end;">
<button type="submit" class="btn-primary btn-lg" style="padding: 10px 24px; background: #1890ff; color: white; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.3s;">
<span>✨ 添加套餐</span>
</button>
</div>
</form>
</div>
@@ -208,70 +210,74 @@ $packages = $stmt->fetchAll();
</div>
<!-- 编辑表单 -->
<form method="POST" class="edit-form" id="edit-form-<?= $package['id'] ?>" style="display: none;">
<form method="POST" class="edit-form" id="edit-form-<?= $package['id'] ?>" style="display: none; background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-top: 16px;">
<input type="hidden" name="action" value="update">
<input type="hidden" name="id" value="<?= $package['id'] ?>">
<h4>✏️ 编辑套餐</h4>
<h4 style="margin-top: 0; margin-bottom: 16px; font-size: 16px; font-weight: 600; color: #333;">✏️ 编辑套餐</h4>
<div class="form-group">
<label class="required">套餐名称</label>
<input type="text" name="package_name" value="<?= htmlspecialchars($package['package_name']) ?>" required placeholder="请输入套餐名称" class="form-control">
<div class="form-group" style="margin-bottom: 16px;">
<label class="required" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">套餐名称</label>
<input type="text" name="package_name" value="<?= htmlspecialchars($package['package_name']) ?>" required placeholder="请输入套餐名称" class="form-control" style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
</div>
<div class="form-group">
<label>套餐描述</label>
<textarea name="description" rows="2" placeholder="请输入套餐描述" class="form-control"><?= htmlspecialchars($package['description']) ?></textarea>
<div class="form-group" style="margin-bottom: 16px;">
<label style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">套餐描述</label>
<textarea name="description" rows="2" placeholder="请输入套餐描述" class="form-control" style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; resize: vertical;"><?= htmlspecialchars($package['description']) ?></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label class="required">基础时长</label>
<div class="input-group">
<input type="number" name="base_duration" min="15" step="15" value="<?= $package['base_duration'] ?>" required class="form-control">
<span class="input-group-addon">分钟</span>
<div class="form-row" style="display: flex; gap: 16px; margin-bottom: 16px;">
<div class="form-group" style="flex: 1; margin-bottom: 0;">
<label class="required" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">基础时长</label>
<div class="input-group" style="display: flex; align-items: center;">
<input type="number" name="base_duration" min="15" step="15" value="<?= $package['base_duration'] ?>" required class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 14px; border-right: none;">
<span class="input-group-addon" style="padding: 10px 12px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 0 4px 4px 0; font-size: 14px; color: #666;">分钟</span>
</div>
</div>
<div class="form-group">
<label class="required">价格</label>
<div class="input-group">
<span class="input-group-addon">¥</span>
<input type="number" name="price" min="0" step="0.01" value="<?= $package['price'] ?>" required placeholder="0.00" class="form-control">
<div class="form-group" style="flex: 1; margin-bottom: 0;">
<label class="required" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">价格</label>
<div class="input-group" style="display: flex; align-items: center;">
<span class="input-group-addon" style="padding: 10px 12px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 14px; color: #666;">¥</span>
<input type="number" name="price" min="0" step="0.01" value="<?= $package['price'] ?>" required placeholder="0.00" class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 0 4px 4px 0; font-size: 14px; border-left: none;">
</div>
</div>
</div>
<div class="form-group">
<label>服务项目</label>
<div class="services-container">
<div class="form-group" style="margin-bottom: 16px;">
<label style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">服务项目</label>
<div class="services-container" style="margin-bottom: 8px;">
<?php
$services = explode(',', $package['services']);
foreach ($services as $service):
if (trim($service)):
?>
<div class="service-item">
<input type="text" name="services[]" value="<?= htmlspecialchars(trim($service)) ?>" placeholder="请输入服务项目" class="form-control">
<button type="button" class="btn-danger btn-sm" onclick="removeService(this)"><span>删除</span></button>
<div class="service-item" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
<input type="text" name="services[]" value="<?= htmlspecialchars(trim($service)) ?>" placeholder="请输入服务项目" class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
<button type="button" class="btn-danger btn-sm" onclick="removeService(this)" style="padding: 6px 12px; background: #ff4d4f; color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;"><span>删除</span></button>
</div>
<?php
endif;
endforeach;
?>
</div>
<button type="button" class="btn-outline btn-sm" onclick="addService()"><span>+ 添加服务项目</span></button>
<button type="button" class="btn-outline btn-sm" onclick="addService()" style="padding: 6px 12px; background: white; color: #1890ff; border: 1px solid #1890ff; border-radius: 4px; font-size: 12px; cursor: pointer;"><span>+ 添加服务项目</span></button>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" name="is_active" <?= $package['is_active'] ? 'checked' : '' ?>>
<span class="checkbox-text">启用此套餐</span>
<div class="form-group" style="margin-bottom: 16px;">
<label class="checkbox-label" style="display: flex; align-items: center; cursor: pointer;">
<input type="checkbox" name="is_active" <?= $package['is_active'] ? 'checked' : '' ?> style="margin-right: 8px;">
<span class="checkbox-text" style="font-weight: normal; color: #333;">启用此套餐</span>
</label>
</div>
<div class="form-actions">
<button type="submit" class="btn-primary"><span>💾 保存更改</span></button>
<button type="button" class="btn-outline" onclick="cancelEdit(<?= $package['id'] ?>)"><span>❌ 取消</span></button>
<div class="form-actions" style="display: flex; gap: 12px; justify-content: flex-end;">
<button type="submit" class="btn-primary" style="padding: 8px 16px; background: #1890ff; color: white; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; transition: background 0.3s;">
<span>💾 保存更改</span>
</button>
<button type="button" class="btn-outline" onclick="cancelEdit(<?= $package['id'] ?>)" style="padding: 8px 16px; background: white; color: #666; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; cursor: pointer; transition: all 0.3s;">
<span>❌ 取消</span>
</button>
</div>
</form>
</div>
@@ -287,17 +293,12 @@ $packages = $stmt->fetchAll();
const serviceItem = document.createElement('div');
serviceItem.className = 'service-item';
serviceItem.style.display = 'flex';
serviceItem.style.gap = 'var(--el-spacing-base)';
serviceItem.style.marginBottom = 'var(--el-spacing-base)';
serviceItem.style.alignItems = 'flex-end';
serviceItem.style.gap = '8px';
serviceItem.style.marginBottom = '8px';
serviceItem.style.alignItems = 'center';
serviceItem.innerHTML = `
<div style="flex: 1;">
<input type="text" name="service_names[]" placeholder="请输入服务名称" class="form-control" required>
</div>
<div style="flex: 0 0 120px;">
<input type="number" name="service_prices[]" placeholder="价格 (¥)" step="0.01" class="form-control" required>
</div>
<button type="button" class="btn-danger btn-sm" onclick="removeService(this)"><span>删除</span></button>
<input type="text" name="services[]" placeholder="如：外观清洗" class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;" required>
<button type="button" class="btn-danger btn-sm" onclick="removeService(this)" style="padding: 6px 12px; background: #ff4d4f; color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;"><span>删除</span></button>
`;
container.appendChild(serviceItem);
}
style.css
-21
View File
@@ -1419,30 +1419,9 @@ label {
background-clip: padding-box;
}
/* 渐变边框效果 */
.package-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--el-primary-color), var(--el-success-color), var(--el-info-color));
border-radius: 12px;
z-index: -1;
margin: -2px;
opacity: 0;
transition: opacity 0.35s ease;
}
.package-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
border-color: transparent;
}
.package-card:hover::before {
opacity: 1;
}
.package-card.inactive {