From dbc740c978b554a2a5fecbbcb51e5ff4a4412f48 Mon Sep 17 00:00:00 2001
From: linbin <495561397@qq.com>
Date: Wed, 1 Oct 2025 23:53:13 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E8=BF=B0:=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E5=93=81=E7=89=8C=E4=BF=A1=E6=81=AF=E9=A1=B5=E9=9D=A2=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改品牌信息.html文件，更新了页面的展示内容和样式布局
- 优化了品牌管理模块的用户界面体验
---
 商家端web/品牌管理/品牌信息.html | 1189 +++++++++++++++++-------------
 1 file changed, 661 insertions(+), 528 deletions(-)

diff --git a/商家端web/品牌管理/品牌信息.html b/商家端web/品牌管理/品牌信息.html
index 5db8337..ef8232f 100644
--- a/商家端web/品牌管理/品牌信息.html
+++ b/商家端web/品牌管理/品牌信息.html
@@ -5,156 +5,367 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>品牌管理</title>
     <style>
+        /* 基础重置 */
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
 
+        /* 字体系统 */
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-            background-color: #f5f5f5;
+            font-size: 14px;
             color: #333;
-            width: 100%;
-            height: 100vh;
-            overflow: hidden;
+            line-height: 1.6;
+            background-color: #f5f5f5;
         }
 
-        /* 头部样式 */
-        .header {
-            background-color: rgb(9, 84, 43);
-            color: #fff;
-            padding: 20px 30px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .header h1 {
-            font-size: 24px;
-            font-weight: 500;
-        }
-
-        /* 主内容区域 */
-        .main-content {
-            height: calc(100vh - 64px);
-            overflow-y: auto;
-            padding: 20px;
+        /* 容器布局 */
+        .container {
             max-width: 1600px;
             margin: 0 auto;
+            padding: 20px;
         }
 
-        /* 页面标题 */
-        .page-title {
-            font-size: 24px;
-            font-weight: 600;
-            color: #262626;
+        /* 页面标题区域 */
+        .page-header {
             background: white;
             padding: 16px 24px;
             margin-bottom: 16px;
             border-radius: 8px;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
         }
 
-        /* 区块标题 */
-        .section-title {
-            font-size: 16px;
+        .page-title-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .pattern {
+            display: inline-block;
+            width: 4px;
+            height: 24px;
+            background: #1890ff;
+            border-radius: 2px;
+        }
+
+        .page-title {
+            font-size: 24px;
             font-weight: 600;
             color: #262626;
-            margin-top: 16px;
-            margin-bottom: 12px;
-            padding-left: 12px;
-            border-left: 3px solid #1890ff;
         }
 
-        .section-title:first-of-type {
-            margin-top: 0;
-        }
-
-        /* 内容卡片 */
-        .info-content {
-            background: white;
-            padding: 24px;
-            margin-bottom: 16px;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            display: flex;
-            flex-wrap: wrap;
-            gap: 16px;
-        }
-
-        .info-item {
-            width: calc(50% - 8px);
-            min-width: 250px;
-            font-size: 14px;
-            line-height: 1.6;
-            display: flex;
-            align-items: flex-start;
-        }
-
-        .info-item .label {
-            font-weight: 500;
-            color: #333;
-            min-width: 100px;
-        }
-
-        .info-item .value {
-            flex: 1;
-            color: #666;
-        }
-
-        /* 图片预览 */
-        .image-preview {
-            margin-left: 12px;
-            border: 1px solid #f0f0f0;
-            border-radius: 4px;
-            overflow: hidden;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-
-        .image-preview:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        }
-
-        .image-preview img {
-            width: 100px;
-            height: 100px;
-            object-fit: cover;
-            display: block;
-        }
-
-        /* 视频预览 */
-        .video-preview {
-            margin-left: 12px;
-            border: 1px solid #f0f0f0;
-            border-radius: 4px;
-            overflow: hidden;
-        }
-
-        .video-preview video {
-            width: 200px;
-            height: 100px;
-            object-fit: fill;
-            display: block;
-        }
-
-        /* 编辑按钮 */
         .edit-btn {
-            color: #1890ff;
+            background: #1890ff;
+            color: white;
+            border: none;
+            height: 40px;
+            padding: 0 16px;
+            border-radius: 6px;
             font-size: 14px;
             cursor: pointer;
-            margin-left: 8px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
             transition: all 0.3s;
-            text-decoration: none;
         }
 
         .edit-btn:hover {
-            color: #40a9ff;
+            background: #40a9ff;
         }
 
-        /* 操作按钮 */
+        /* 内容区域 */
+        .content-section {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            margin-bottom: 16px;
+            overflow: hidden;
+        }
+
+        .section-header {
+            padding: 20px 24px;
+            border-bottom: 1px solid #f0f0f0;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .section-title {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-size: 18px;
+            font-weight: 600;
+            color: #262626;
+        }
+
+        .section-title .pattern {
+            width: 3px;
+            height: 18px;
+            background: #1c9298;
+        }
+
+        .section-content {
+            padding: 24px;
+        }
+
+        /* 信息网格布局 */
+        .info-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+        }
+
+        .info-item {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .info-label {
+            font-size: 14px;
+            color: #666;
+            font-weight: 500;
+        }
+
+        .info-value {
+            font-size: 14px;
+            color: #333;
+        }
+
+        /* 媒体预览样式 */
+        .media-preview {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+
+        .image-preview {
+            width: 100px;
+            height: 100px;
+            border-radius: 8px;
+            object-fit: cover;
+            border: 1px solid #f0f0f0;
+            cursor: pointer;
+        }
+
+        .video-preview {
+            width: 200px;
+            height: 100px;
+            border-radius: 8px;
+            object-fit: cover;
+            border: 1px solid #f0f0f0;
+        }
+
+        /* 开关样式 */
+        .switch-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .switch {
+            position: relative;
+            width: 44px;
+            height: 22px;
+            background: #ccc;
+            border-radius: 11px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .switch.active {
+            background: #1890ff;
+        }
+
+        .switch::after {
+            content: '';
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 18px;
+            height: 18px;
+            background: white;
+            border-radius: 50%;
+            transition: all 0.3s;
+        }
+
+        .switch.active::after {
+            left: 24px;
+        }
+
+        .switch-text {
+            font-size: 14px;
+            color: #666;
+        }
+
+        /* 弹窗样式 */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+        }
+
+        .modal-overlay.show {
+            display: flex;
+        }
+
+        .modal {
+            background: white;
+            border-radius: 8px;
+            width: 60%;
+            max-width: 800px;
+            max-height: 80vh;
+            overflow: hidden;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+        }
+
+        .modal-header {
+            padding: 20px 24px;
+            border-bottom: 1px solid #f0f0f0;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .modal-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: #262626;
+        }
+
+        .modal-close {
+            width: 32px;
+            height: 32px;
+            border: none;
+            background: none;
+            cursor: pointer;
+            font-size: 18px;
+            color: #999;
+            border-radius: 4px;
+            transition: all 0.3s;
+        }
+
+        .modal-close:hover {
+            background: #f5f5f5;
+            color: #666;
+        }
+
+        .modal-body {
+            padding: 24px;
+            max-height: 60vh;
+            overflow-y: auto;
+        }
+
+        .modal-footer {
+            padding: 16px 24px;
+            border-top: 1px solid #f0f0f0;
+            display: flex;
+            justify-content: flex-end;
+            gap: 12px;
+        }
+
+        /* 表单样式 */
+        .form-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+        }
+
+        .form-item {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .form-item.full-width {
+            grid-column: 1 / -1;
+        }
+
+        .form-label {
+            font-size: 14px;
+            color: #666;
+            font-weight: 500;
+        }
+
+        .form-input {
+            height: 40px;
+            padding: 0 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 14px;
+            transition: all 0.3s;
+        }
+
+        .form-input:focus {
+            outline: none;
+            border-color: #1890ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        }
+
+        .form-textarea {
+            min-height: 80px;
+            resize: vertical;
+        }
+
+        /* 上传区域样式 */
+        .upload-area {
+            border: 2px dashed #ddd;
+            border-radius: 6px;
+            padding: 20px;
+            text-align: center;
+            transition: all 0.3s;
+            cursor: pointer;
+        }
+
+        .upload-area:hover {
+            border-color: #1890ff;
+            background: #f8f9fa;
+        }
+
+        .upload-area.dragover {
+            border-color: #1890ff;
+            background: #e6f7ff;
+        }
+
+        .upload-icon {
+            font-size: 24px;
+            color: #999;
+            margin-bottom: 8px;
+        }
+
+        .upload-text {
+            color: #666;
+            font-size: 14px;
+            margin-bottom: 8px;
+        }
+
+        .upload-hint {
+            color: #999;
+            font-size: 12px;
+        }
+
+        .upload-preview {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            margin-top: 16px;
+        }
+
+        /* 按钮样式 */
         .btn {
             height: 40px;
             padding: 0 16px;
@@ -177,500 +388,422 @@
             background: #40a9ff;
         }
 
-        .btn-success {
-            background: #52c41a;
-            color: white;
-        }
-
-        .btn-success:hover {
-            background: #73d13d;
-        }
-
-        /* 模态框 */
-        .modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
-            z-index: 1000;
-            animation: fadeIn 0.3s ease-in-out;
-        }
-
-        .modal.active {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-            }
-            to {
-                opacity: 1;
-            }
-        }
-
-        .modal-content {
+        .btn-default {
             background: white;
-            border-radius: 8px;
-            width: 90%;
-            max-width: 600px;
-            max-height: 90vh;
-            overflow-y: auto;
-            animation: slideIn 0.3s ease-in-out;
-        }
-
-        @keyframes slideIn {
-            from {
-                transform: translateY(-50px);
-                opacity: 0;
-            }
-            to {
-                transform: translateY(0);
-                opacity: 1;
-            }
-        }
-
-        .modal-header {
-            padding: 16px 24px;
-            border-bottom: 1px solid #f0f0f0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .modal-header h3 {
-            font-size: 18px;
-            font-weight: 600;
-        }
-
-        .modal-close {
-            font-size: 24px;
-            cursor: pointer;
-            color: #999;
-            transition: color 0.3s ease;
-        }
-
-        .modal-close:hover {
-            color: #333;
-        }
-
-        .modal-body {
-            padding: 24px;
-        }
-
-        .modal-footer {
-            padding: 16px 24px;
-            border-top: 1px solid #f0f0f0;
-            display: flex;
-            justify-content: flex-end;
-            gap: 12px;
-        }
-
-        /* 表单样式 */
-        .form-group {
-            margin-bottom: 16px;
-        }
-
-        .form-group label {
-            display: block;
-            font-weight: 500;
-            margin-bottom: 8px;
-            color: #333;
-            font-size: 14px;
-        }
-
-        .form-group input[type="text"],
-        .form-group textarea {
-            width: 100%;
-            padding: 0 12px;
-            height: 40px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 14px;
-            transition: all 0.3s;
-            background-color: #fafafa;
-        }
-
-        .form-group input[type="text"]:focus,
-        .form-group textarea:focus {
-            outline: none;
-            border-color: #1890ff;
-            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-            background-color: white;
-        }
-
-        .form-group textarea {
-            resize: vertical;
-            min-height: 80px;
-            padding-top: 10px;
-            padding-bottom: 10px;
-        }
-
-        .form-group select {
-            width: 100%;
-            height: 40px;
-            padding: 0 12px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 14px;
-            background-color: #fafafa;
-            cursor: pointer;
-        }
-
-        .form-group select:focus {
-            outline: none;
-            border-color: #1890ff;
-            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-        }
-
-        /* 文件上传 */
-        .file-upload {
-            border: 2px dashed #ddd;
-            border-radius: 6px;
-            padding: 20px;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.3s;
-            background-color: #fafafa;
-        }
-
-        .file-upload:hover {
-            border-color: #1890ff;
-            background-color: #e6f7ff;
-        }
-
-        .file-upload input[type="file"] {
-            display: none;
-        }
-
-        .file-upload-text {
             color: #666;
-            font-size: 14px;
+            border: 1px solid #ddd;
         }
 
-        .file-preview {
-            margin-top: 8px;
-            display: flex;
-            gap: 8px;
-            flex-wrap: wrap;
-        }
-
-        .file-preview img {
-            width: 80px;
-            height: 80px;
-            object-fit: cover;
-            border-radius: 4px;
-            border: 1px solid #f0f0f0;
+        .btn-default:hover {
+            border-color: #1890ff;
+            color: #1890ff;
         }
 
         /* 响应式设计 */
         @media (max-width: 768px) {
-            .header {
-                flex-direction: column;
-                gap: 8px;
-                padding: 15px 20px;
-            }
-
-            .main-content {
+            .container {
                 padding: 16px;
             }
 
-            .info-item {
-                width: 100%;
-                min-width: auto;
+            .info-grid,
+            .form-grid {
+                grid-template-columns: 1fr;
             }
 
-            .modal-content {
-                width: 95%;
+            .modal {
+                width: 90%;
+                margin: 20px;
             }
 
-            .modal-body {
-                padding: 20px;
+            .page-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 16px;
+            }
+
+            .section-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 12px;
             }
         }
 
-        /* 状态标签 */
-        .status-badge {
-            display: inline-block;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            font-weight: 500;
+        /* 加载状态 */
+        .loading {
+            opacity: 0.6;
+            pointer-events: none;
         }
 
-        .status-badge.active {
-            background: #f6ffed;
-            color: #52c41a;
-            border: 1px solid #b7eb8f;
+        .spinner {
+            width: 20px;
+            height: 20px;
+            border: 2px solid #f3f3f3;
+            border-top: 2px solid #1890ff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
         }
 
-        .status-badge.inactive {
-            background: #fff2f0;
-            color: #ff4d4f;
-            border: 1px solid #ffb3b3;
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* 成功提示 */
+        .toast {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: #52c41a;
+            color: white;
+            padding: 12px 16px;
+            border-radius: 6px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+            display: none;
+            align-items: center;
+            gap: 8px;
+            z-index: 2000;
+        }
+
+        .toast.show {
+            display: flex;
         }
     </style>
 </head>
 <body>
-    <!-- 主内容区域 -->
-    <main class="main-content">
-        <div class="page-title">品牌管理</div>
+    <div class="container">
+        <!-- 页面标题 -->
+        <header class="page-header">
+            <div class="page-title-wrapper">
+                <span class="pattern"></span>
+                <h1 class="page-title">品牌管理</h1>
+            </div>
+            <button class="edit-btn" onclick="openEditModal()">编辑品牌信息</button>
+        </header>
 
         <!-- 品牌信息 -->
-        <div class="section-title">
-            品牌信息
-            <span class="edit-btn" onclick="openEditModal()">编辑</span>
-        </div>
-        <div class="info-content">
-            <div class="info-item">
-                <span class="label">品牌名称：</span>
-                <span class="value" id="brandName">示例品牌</span>
-            </div>
-            <div class="info-item" style="width: 100%;">
-                <span class="label">品牌LOGO：</span>
-                <div class="image-preview" id="logoPreview">
-                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect fill='%23f0f0f0' width='100' height='100'/%3E%3Ctext fill='%23999' x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='14'%3ELOGO%3C/text%3E%3C/svg%3E" alt="品牌LOGO">
+        <section class="content-section">
+            <div class="section-header">
+                <div class="section-title">
+                    <span class="pattern"></span>
+                    品牌信息
                 </div>
             </div>
-            <div class="info-item" style="width: 100%;">
-                <span class="label">品牌背景：</span>
-                <div class="image-preview" id="backgroundPreview">
-                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect fill='%23f0f0f0' width='100' height='100'/%3E%3Ctext fill='%23999' x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='12'%3E背景图%3C/text%3E%3C/svg%3E" alt="品牌背景">
+            <div class="section-content">
+                <div class="info-grid">
+                    <div class="info-item">
+                        <div class="info-label">品牌名称</div>
+                        <div class="info-value">示例品牌</div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">品牌ID</div>
+                        <div class="info-value">BRAND001</div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">品牌LOGO</div>
+                        <div class="media-preview">
+                            <img src="https://via.placeholder.com/100x100/1890ff/ffffff?text=LOGO" alt="品牌LOGO" class="image-preview" onclick="previewImage(this.src)">
+                        </div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">品牌背景</div>
+                        <div class="media-preview">
+                            <img src="https://via.placeholder.com/100x100/f0f0f0/666666?text=背景" alt="品牌背景" class="image-preview" onclick="previewImage(this.src)">
+                        </div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">品牌首页</div>
+                        <div class="switch-wrapper">
+                            <div class="switch active" onclick="toggleSwitch(this)"></div>
+                            <span class="switch-text">启用</span>
+                        </div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">宣传语</div>
+                        <div class="info-value">品质生活，从这里开始</div>
+                    </div>
+                    <div class="info-item full-width">
+                        <div class="info-label">宣传视频</div>
+                        <div class="media-preview">
+                            <video controls class="video-preview">
+                                <source src="#" type="video/mp4">
+                                您的浏览器不支持视频播放
+                            </video>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div class="info-item">
-                <span class="label">品牌首页：</span>
-                <span class="value">
-                    <span class="status-badge active" id="homepageStatus">启用</span>
-                </span>
-            </div>
-            <div class="info-item" style="width: 100%;">
-                <span class="label">宣传语：</span>
-                <span class="value" id="tagline">打造优质品牌，服务千家万户</span>
-            </div>
-            <div class="info-item" style="width: 100%;">
-                <span class="label">宣传视频：</span>
-                <div class="video-preview" id="videoPreview">
-                    <video controls muted loop>
-                        <source src="" type="video/mp4">
-                        暂无宣传视频
-                    </video>
-                </div>
-            </div>
-        </div>
+        </section>
 
-        <!-- 品牌展示 -->
-        <div class="section-title">品牌展示</div>
-        <div class="info-content">
-            <div class="info-item">
-                <span class="label">品牌联系人：</span>
-                <span class="value" id="contact">张经理</span>
+        <!-- 联系信息 -->
+        <section class="content-section">
+            <div class="section-header">
+                <div class="section-title">
+                    <span class="pattern"></span>
+                    联系信息
+                </div>
             </div>
-            <div class="info-item">
-                <span class="label">联系方式：</span>
-                <span class="value" id="contactPhone">138****8888</span>
+            <div class="section-content">
+                <div class="info-grid">
+                    <div class="info-item">
+                        <div class="info-label">品牌联系人</div>
+                        <div class="info-value">张经理</div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">联系方式</div>
+                        <div class="info-value">138****8888</div>
+                    </div>
+                </div>
             </div>
-            <div class="info-item" style="width: 100%;">
-                <span class="label">品牌简介：</span>
-                <span class="value" id="description">这是一个致力于提供优质服务的品牌，专注于用户体验和产品质量的提升。</span>
-            </div>
-        </div>
-    </main>
+        </section>
+    </div>
 
-    <!-- 编辑模态框 -->
-    <div class="modal" id="editModal">
-        <div class="modal-content">
+    <!-- 编辑弹窗 -->
+    <div class="modal-overlay" id="editModal">
+        <div class="modal">
             <div class="modal-header">
-                <h3>编辑品牌信息</h3>
-                <span class="modal-close" onclick="closeEditModal()">&times;</span>
+                <h3 class="modal-title">编辑品牌信息</h3>
+                <button class="modal-close" onclick="closeEditModal()">×</button>
             </div>
             <div class="modal-body">
-                <form id="editForm">
-                    <div class="form-group">
-                        <label for="editBrandName">品牌名称</label>
-                        <input type="text" id="editBrandName" placeholder="请输入品牌名称">
+                <div class="form-grid">
+                    <div class="form-item">
+                        <label class="form-label">品牌名称 *</label>
+                        <input type="text" class="form-input" value="示例品牌" placeholder="请输入品牌名称">
                     </div>
-                    <div class="form-group">
-                        <label for="editTagline">宣传语</label>
-                        <input type="text" id="editTagline" placeholder="请输入宣传语">
+                    <div class="form-item">
+                        <label class="form-label">品牌ID</label>
+                        <input type="text" class="form-input" value="BRAND001" disabled>
                     </div>
-                    <div class="form-group">
-                        <label for="editHomepageStatus">品牌首页</label>
-                        <select id="editHomepageStatus">
-                            <option value="1">启用</option>
-                            <option value="0">禁用</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label>品牌LOGO</label>
-                        <div class="file-upload" onclick="document.getElementById('logoInput').click()">
-                            <input type="file" id="logoInput" accept="image/*" onchange="handleFileUpload(event, 'logo')">
-                            <div class="file-upload-text">点击上传LOGO图片</div>
-                            <div class="file-preview" id="logoFilePreview"></div>
+                    <div class="form-item full-width">
+                        <label class="form-label">品牌LOGO *</label>
+                        <div class="upload-area" onclick="selectFile('logo')">
+                            <div class="upload-icon">📁</div>
+                            <div class="upload-text">点击上传LOGO</div>
+                            <div class="upload-hint">支持 JPG、PNG 格式，文件大小不超过 500KB</div>
+                        </div>
+                        <div class="upload-preview">
+                            <img src="https://via.placeholder.com/100x100/1890ff/ffffff?text=LOGO" alt="当前LOGO" class="image-preview">
+                            <span>当前LOGO</span>
                         </div>
                     </div>
-                    <div class="form-group">
-                        <label>品牌背景</label>
-                        <div class="file-upload" onclick="document.getElementById('backgroundInput').click()">
-                            <input type="file" id="backgroundInput" accept="image/*" onchange="handleFileUpload(event, 'background')">
-                            <div class="file-upload-text">点击上传背景图片</div>
-                            <div class="file-preview" id="backgroundFilePreview"></div>
+                    <div class="form-item">
+                        <label class="form-label">品牌首页</label>
+                        <div class="switch-wrapper">
+                            <div class="switch active" onclick="toggleSwitch(this)"></div>
+                            <span class="switch-text">启用</span>
                         </div>
                     </div>
-                    <div class="form-group">
-                        <label>宣传视频</label>
-                        <div class="file-upload" onclick="document.getElementById('videoInput').click()">
-                            <input type="file" id="videoInput" accept="video/*" onchange="handleFileUpload(event, 'video')">
-                            <div class="file-upload-text">点击上传宣传视频</div>
-                            <div class="file-preview" id="videoFilePreview"></div>
+                    <div class="form-item">
+                        <label class="form-label">宣传语 *</label>
+                        <input type="text" class="form-input" value="品质生活，从这里开始" placeholder="请输入品牌宣传语">
+                    </div>
+                    <div class="form-item full-width">
+                        <label class="form-label">首页背景 *</label>
+                        <div class="upload-area" onclick="selectFile('background')">
+                            <div class="upload-icon">📁</div>
+                            <div class="upload-text">点击上传背景图</div>
+                            <div class="upload-hint">支持 JPG、PNG 格式，文件大小不超过 500KB</div>
+                        </div>
+                        <div class="upload-preview">
+                            <img src="https://via.placeholder.com/100x100/f0f0f0/666666?text=背景" alt="当前背景" class="image-preview">
+                            <span>当前背景图</span>
                         </div>
                     </div>
-                    <div class="form-group">
-                        <label for="editContact">品牌联系人</label>
-                        <input type="text" id="editContact" placeholder="请输入联系人姓名">
+                    <div class="form-item full-width">
+                        <label class="form-label">宣传视频</label>
+                        <div class="upload-area" onclick="selectFile('video')">
+                            <div class="upload-icon">📁</div>
+                            <div class="upload-text">点击上传视频</div>
+                            <div class="upload-hint">支持 MP4 格式，文件大小不超过 10MB</div>
+                        </div>
                     </div>
-                    <div class="form-group">
-                        <label for="editContactPhone">联系方式</label>
-                        <input type="text" id="editContactPhone" placeholder="请输入联系电话">
+                    <div class="form-item">
+                        <label class="form-label">联系电话（仅用户可见） *</label>
+                        <input type="tel" class="form-input" value="13888888888" placeholder="请输入联系电话">
                     </div>
-                    <div class="form-group">
-                        <label for="editDescription">品牌简介</label>
-                        <textarea id="editDescription" placeholder="请输入品牌简介"></textarea>
+                    <div class="form-item">
+                        <label class="form-label">品牌联系人</label>
+                        <input type="text" class="form-input" value="张经理" placeholder="请输入品牌联系人">
                     </div>
-                </form>
+                </div>
             </div>
             <div class="modal-footer">
-                <button class="btn btn-primary" onclick="closeEditModal()">取消</button>
-                <button class="btn btn-success" onclick="saveBrandInfo()">保存</button>
+                <button class="btn btn-default" onclick="closeEditModal()">取消</button>
+                <button class="btn btn-primary" onclick="saveBrandInfo()">
+                    <span class="spinner" style="display: none;"></span>
+                    <span class="btn-text">保存</span>
+                </button>
             </div>
         </div>
     </div>
 
-    <script>
-        // 品牌数据
-        let brandData = {
-            name: '示例品牌',
-            id: '10001',
-            logo: '',
-            background: '',
-            homepageStatus: 1,
-            tagline: '打造优质品牌，服务千家万户',
-            video: '',
-            contact: '张经理',
-            contactPhone: '138****8888',
-            description: '这是一个致力于提供优质服务的品牌，专注于用户体验和产品质量的提升。'
-        };
+    <!-- 成功提示 -->
+    <div class="toast" id="toast">
+        <span>✓</span>
+        <span id="toastMessage">保存成功</span>
+    </div>
 
-        // 打开编辑模态框
+    <script>
+        // 打开编辑弹窗
         function openEditModal() {
-            document.getElementById('editModal').classList.add('active');
-            // 填充当前数据
-            document.getElementById('editBrandName').value = brandData.name;
-            document.getElementById('editTagline').value = brandData.tagline;
-            document.getElementById('editHomepageStatus').value = brandData.homepageStatus;
-            document.getElementById('editContact').value = brandData.contact;
-            document.getElementById('editContactPhone').value = brandData.contactPhone;
-            document.getElementById('editDescription').value = brandData.description;
+            document.getElementById('editModal').classList.add('show');
+            document.body.style.overflow = 'hidden';
         }
 
-        // 关闭编辑模态框
+        // 关闭编辑弹窗
         function closeEditModal() {
-            document.getElementById('editModal').classList.remove('active');
+            document.getElementById('editModal').classList.remove('show');
+            document.body.style.overflow = 'auto';
+        }
+
+        // 切换开关状态
+        function toggleSwitch(element) {
+            element.classList.toggle('active');
+            const text = element.nextElementSibling;
+            text.textContent = element.classList.contains('active') ? '启用' : '禁用';
+        }
+
+        // 文件选择
+        function selectFile(type) {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.accept = type === 'video' ? 'video/*' : 'image/*';
+
+            input.onchange = function(e) {
+                const file = e.target.files[0];
+                if (file) {
+                    handleFileUpload(file, type);
+                }
+            };
+
+            input.click();
         }
 
         // 处理文件上传
-        function handleFileUpload(event, type) {
-            const file = event.target.files[0];
-            if (!file) return;
+        function handleFileUpload(file, type) {
+            // 模拟上传过程
+            showToast('正在上传...');
 
-            const reader = new FileReader();
-            reader.onload = function(e) {
-                const previewId = type + 'FilePreview';
-                const preview = document.getElementById(previewId);
+            setTimeout(() => {
+                showToast('上传成功');
+                // 这里可以添加更新预览图的逻辑
+                updatePreview(file, type);
+            }, 1500);
+        }
 
-                if (type === 'video') {
-                    preview.innerHTML = `<video src="${e.target.result}" style="width: 100px; height: 100px; object-fit: cover; border-radius: 4px;" controls></video>`;
-                } else {
-                    preview.innerHTML = `<img src="${e.target.result}" alt="${type}">`;
-                }
+        // 更新预览
+        function updatePreview(file, type) {
+            if (type !== 'video' && file.type.startsWith('image/')) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const previewImg = document.querySelector(`.upload-preview img`);
+                    if (previewImg) {
+                        previewImg.src = e.target.result;
+                    }
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+
+        // 图片预览
+        function previewImage(src) {
+            // 创建大图预览
+            const overlay = document.createElement('div');
+            overlay.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.8);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 3000;
+                cursor: pointer;
+            `;
+
+            const img = document.createElement('img');
+            img.src = src;
+            img.style.cssText = `
+                max-width: 90%;
+                max-height: 90%;
+                border-radius: 8px;
+                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+            `;
+
+            overlay.appendChild(img);
+            overlay.onclick = function() {
+                document.body.removeChild(overlay);
             };
-            reader.readAsDataURL(file);
+
+            document.body.appendChild(overlay);
         }
 
         // 保存品牌信息
         function saveBrandInfo() {
-            // 获取表单数据
-            brandData.name = document.getElementById('editBrandName').value;
-            brandData.tagline = document.getElementById('editTagline').value;
-            brandData.homepageStatus = parseInt(document.getElementById('editHomepageStatus').value);
-            brandData.contact = document.getElementById('editContact').value;
-            brandData.contactPhone = document.getElementById('editContactPhone').value;
-            brandData.description = document.getElementById('editDescription').value;
+            const saveBtn = document.querySelector('.modal-footer .btn-primary');
+            const spinner = saveBtn.querySelector('.spinner');
+            const btnText = saveBtn.querySelector('.btn-text');
 
-            // 更新显示
-            document.getElementById('brandName').textContent = brandData.name;
-            document.getElementById('tagline').textContent = brandData.tagline;
-            document.getElementById('contact').textContent = brandData.contact;
-            document.getElementById('contactPhone').textContent = brandData.contactPhone;
-            document.getElementById('description').textContent = brandData.description;
+            // 显示加载状态
+            spinner.style.display = 'inline-block';
+            btnText.textContent = '保存中...';
+            saveBtn.classList.add('loading');
 
-            // 更新状态标签
-            const statusBadge = document.getElementById('homepageStatus');
-            if (brandData.homepageStatus === 1) {
-                statusBadge.textContent = '启用';
-                statusBadge.className = 'status-badge active';
-            } else {
-                statusBadge.textContent = '禁用';
-                statusBadge.className = 'status-badge inactive';
-            }
+            // 模拟保存过程
+            setTimeout(() => {
+                spinner.style.display = 'none';
+                btnText.textContent = '保存';
+                saveBtn.classList.remove('loading');
 
-            // 处理文件上传（实际应用中需要上传到服务器）
-            const logoInput = document.getElementById('logoInput');
-            if (logoInput.files[0]) {
-                const reader = new FileReader();
-                reader.onload = function(e) {
-                    document.querySelector('#logoPreview img').src = e.target.result;
-                };
-                reader.readAsDataURL(logoInput.files[0]);
-            }
+                showToast('保存成功');
+                closeEditModal();
 
-            const backgroundInput = document.getElementById('backgroundInput');
-            if (backgroundInput.files[0]) {
-                const reader = new FileReader();
-                reader.onload = function(e) {
-                    document.querySelector('#backgroundPreview img').src = e.target.result;
-                };
-                reader.readAsDataURL(backgroundInput.files[0]);
-            }
-
-            const videoInput = document.getElementById('videoInput');
-            if (videoInput.files[0]) {
-                const reader = new FileReader();
-                reader.onload = function(e) {
-                    document.querySelector('#videoPreview video source').src = e.target.result;
-                    document.querySelector('#videoPreview video').load();
-                };
-                reader.readAsDataURL(videoInput.files[0]);
-            }
-
-            // 关闭模态框
-            closeEditModal();
-
-            // 显示保存成功提示
-            alert('品牌信息保存成功！');
+                // 这里可以添加更新页面数据的逻辑
+                updatePageData();
+            }, 2000);
         }
 
-        // 点击模态框背景关闭
+        // 更新页面数据
+        function updatePageData() {
+            // 获取表单数据并更新页面显示
+            const inputs = document.querySelectorAll('.form-input');
+            // 这里可以实现数据更新逻辑
+        }
+
+        // 显示提示信息
+        function showToast(message) {
+            const toast = document.getElementById('toast');
+            const toastMessage = document.getElementById('toastMessage');
+
+            toastMessage.textContent = message;
+            toast.classList.add('show');
+
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, 3000);
+        }
+
+        // 点击弹窗外部关闭
         document.getElementById('editModal').addEventListener('click', function(e) {
             if (e.target === this) {
                 closeEditModal();
             }
         });
+
+        // 键盘ESC关闭弹窗
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                closeEditModal();
+            }
+        });
+
+        // 页面加载完成后的初始化
+        document.addEventListener('DOMContentLoaded', function() {
+            // 可以在这里添加页面初始化逻辑
+            console.log('品牌管理页面已加载');
+        });
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file