From 7f2fe3dd213c4eafa36b07c6ad6b1aa71625bfe8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=B1=95=E9=B9=8F?= <wsh5485@163.com>
Date: Sat, 6 Dec 2025 02:51:56 +0800
Subject: [PATCH] =?UTF-8?q?style(packages):=20=E4=BC=98=E5=8C=96=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E6=A0=B7=E5=BC=8F=E5=92=8C=E4=BA=A4=E4=BA=92=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除渐变边框效果，简化卡片悬停样式
- 为表单添加内联样式，提升视觉一致性和用户体验
- 调整服务项目输入框布局，使其更紧凑易用
---
 packages.php | 147 ++++++++++++++++++++++++++-------------------------
 style.css    |  21 --------
 2 files changed, 74 insertions(+), 94 deletions(-)

diff --git a/packages.php b/packages.php
index bf508fb..831413c 100644
--- a/packages.php
+++ b/packages.php
@@ -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);
         }
diff --git a/style.css b/style.css
index bf42bc4..918f69e 100644
--- a/style.css
+++ b/style.css
@@ -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 {