798 lines
24 KiB
HTML
798 lines
24 KiB
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;
|
||
}
|
||
|
||
/* 字体系统 */
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
font-size: 14px;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
/* 容器布局 */
|
||
.container {
|
||
max-width: 1600px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* 页面标题区域 */
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.edit-btn {
|
||
background: #1890ff;
|
||
color: white;
|
||
border: none;
|
||
height: 40px;
|
||
padding: 0 16px;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.edit-btn:hover {
|
||
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;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #1890ff;
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #40a9ff;
|
||
}
|
||
|
||
.btn-default {
|
||
background: white;
|
||
color: #666;
|
||
border: 1px solid #ddd;
|
||
}
|
||
|
||
.btn-default:hover {
|
||
border-color: #1890ff;
|
||
color: #1890ff;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
padding: 16px;
|
||
}
|
||
|
||
.info-grid,
|
||
.form-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.modal {
|
||
width: 90%;
|
||
margin: 20px;
|
||
}
|
||
|
||
.page-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
}
|
||
|
||
.section-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
}
|
||
}
|
||
|
||
/* 加载状态 */
|
||
.loading {
|
||
opacity: 0.6;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.spinner {
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 2px solid #f3f3f3;
|
||
border-top: 2px solid #1890ff;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@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>
|
||
<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>
|
||
|
||
<!-- 品牌信息 -->
|
||
<section class="content-section">
|
||
<div class="section-header">
|
||
<div class="section-title">
|
||
<span class="pattern"></span>
|
||
品牌信息
|
||
</div>
|
||
</div>
|
||
<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">品牌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="info-value">启用</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>
|
||
</section>
|
||
|
||
<!-- 联系信息 -->
|
||
<section class="content-section">
|
||
<div class="section-header">
|
||
<div class="section-title">
|
||
<span class="pattern"></span>
|
||
联系信息
|
||
</div>
|
||
</div>
|
||
<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>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- 编辑弹窗 -->
|
||
<div class="modal-overlay" id="editModal">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3 class="modal-title">编辑品牌信息</h3>
|
||
<button class="modal-close" onclick="closeEditModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<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-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-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-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-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-item">
|
||
<label class="form-label">联系电话（仅用户可见） *</label>
|
||
<input type="tel" class="form-input" value="13888888888" placeholder="请输入联系电话">
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="form-label">品牌联系人</label>
|
||
<input type="text" class="form-input" value="张经理" placeholder="请输入品牌联系人">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<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>
|
||
|
||
<!-- 成功提示 -->
|
||
<div class="toast" id="toast">
|
||
<span>✓</span>
|
||
<span id="toastMessage">保存成功</span>
|
||
</div>
|
||
|
||
<script>
|
||
// 打开编辑弹窗
|
||
function openEditModal() {
|
||
document.getElementById('editModal').classList.add('show');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
// 关闭编辑弹窗
|
||
function closeEditModal() {
|
||
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(file, type) {
|
||
// 模拟上传过程
|
||
showToast('正在上传...');
|
||
|
||
setTimeout(() => {
|
||
showToast('上传成功');
|
||
// 这里可以添加更新预览图的逻辑
|
||
updatePreview(file, type);
|
||
}, 1500);
|
||
}
|
||
|
||
// 更新预览
|
||
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);
|
||
};
|
||
|
||
document.body.appendChild(overlay);
|
||
}
|
||
|
||
// 保存品牌信息
|
||
function saveBrandInfo() {
|
||
const saveBtn = document.querySelector('.modal-footer .btn-primary');
|
||
const spinner = saveBtn.querySelector('.spinner');
|
||
const btnText = saveBtn.querySelector('.btn-text');
|
||
|
||
// 显示加载状态
|
||
spinner.style.display = 'inline-block';
|
||
btnText.textContent = '保存中...';
|
||
saveBtn.classList.add('loading');
|
||
|
||
// 模拟保存过程
|
||
setTimeout(() => {
|
||
spinner.style.display = 'none';
|
||
btnText.textContent = '保存';
|
||
saveBtn.classList.remove('loading');
|
||
|
||
showToast('保存成功');
|
||
closeEditModal();
|
||
|
||
// 这里可以添加更新页面数据的逻辑
|
||
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> |