305 lines
23 KiB
HTML
305 lines
23 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>
|
|
<link rel="stylesheet" href="./css/styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="min-h-screen bg-gray-50">
|
|
<!-- Header -->
|
|
<header class="bg-green-700 text-white px-4 py-3 flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<h1 class="text-lg font-medium">大数集市商户端</h1>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
|
</svg>
|
|
</button>
|
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</button>
|
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</button>
|
|
<div class="h-8 w-8 rounded-full bg-green-600 text-white flex items-center justify-center text-xs">
|
|
用户
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="flex">
|
|
<!-- Sidebar -->
|
|
<aside class="w-48 bg-white border-r border-gray-200 min-h-[calc(100vh-60px)]">
|
|
<!-- Search -->
|
|
<div class="p-3 border-b border-gray-100">
|
|
<input type="text" placeholder="快速搜索菜单" class="w-full text-sm border border-gray-200 rounded-md px-3 py-2 focus:border-green-500 focus:outline-none">
|
|
</div>
|
|
|
|
<!-- Navigation Menu -->
|
|
<nav class="py-2">
|
|
<div class="space-y-1">
|
|
<!-- Home -->
|
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-blue-500 hover:bg-gray-50 cursor-pointer">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
|
<polyline points="9,22 9,12 15,12 15,22" />
|
|
</svg>
|
|
<span>首页</span>
|
|
</div>
|
|
|
|
<!-- Operations Management -->
|
|
<div>
|
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('operations')">
|
|
<div class="flex items-center gap-3">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13h8V3H3v10zm0 8h8V16H3v5zm10-8h8V3h-8v10zm0 8h8V16h-8v5z" />
|
|
</svg>
|
|
<span>运营管理</span>
|
|
</div>
|
|
<svg class="h-3 w-3 transition-transform" id="operations-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Center -->
|
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
|
<path d="m3 5 9 9 9-9" />
|
|
<path d="m3 12 9 9 9-9" />
|
|
<path d="m3 5v14c0 3 4 6 9 6s9-3 9-6V5" />
|
|
</svg>
|
|
<span>数据中心</span>
|
|
</div>
|
|
|
|
<!-- Coupon Marketing Tool Management -->
|
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
|
</svg>
|
|
<span>优惠券营销工具管理</span>
|
|
</div>
|
|
|
|
<!-- Pre-sale Marketing Tool Management -->
|
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 20V10M6 16l6-6 6 6" />
|
|
</svg>
|
|
<span>预售营销工具管理</span>
|
|
</div>
|
|
|
|
<!-- Member Management -->
|
|
<div>
|
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('member')">
|
|
<div class="flex items-center gap-3">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<path d="m22 21-3-3m0 0a8 8 0 1 1-11.31-11.31 8 8 0 0 1 11.31 11.31z" />
|
|
</svg>
|
|
<span>会员管理</span>
|
|
</div>
|
|
<svg class="h-3 w-3 transition-transform" id="member-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
|
</svg>
|
|
</div>
|
|
<div class="bg-gray-50 border-l-2 border-green-500 ml-4 hidden" id="member-submenu">
|
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer" onclick="showLevelSettings()">
|
|
<span>等级设置</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
|
<span>会员查看</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
|
<span>积分任务</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
|
<span>积分商品</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
|
<span>积分订单</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Wallet Management -->
|
|
<div>
|
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('wallet')">
|
|
<div class="flex items-center gap-3">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12V5a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v7" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 20h18M3 20a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H3z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20v-6" />
|
|
</svg>
|
|
<span>钱包管理</span>
|
|
</div>
|
|
<svg class="h-3 w-3 transition-transform" id="wallet-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shipping Management -->
|
|
<div>
|
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('shipping')">
|
|
<div class="flex items-center gap-3">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 18V6a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v11a1 1 0 0 0 1 1h2" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 18H9" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" />
|
|
<circle cx="17" cy="18" r="2" />
|
|
<circle cx="7" cy="18" r="2" />
|
|
</svg>
|
|
<span>运费管理</span>
|
|
</div>
|
|
<svg class="h-3 w-3 transition-transform" id="shipping-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 p-6">
|
|
<!-- Default Content -->
|
|
<div id="default-content" class="bg-white rounded-lg shadow-sm border border-gray-200 h-96">
|
|
<div class="flex items-center justify-center h-full text-gray-500">
|
|
<div class="text-center">
|
|
<svg class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
<p class="text-lg">欢迎使用大数集市商户端</p>
|
|
<p class="text-sm mt-2">请从左侧菜单选择功能</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Level Settings Content -->
|
|
<div id="level-settings-content" class="bg-white rounded-lg shadow-sm border border-gray-200 hidden">
|
|
<div class="p-6 border-b border-gray-200">
|
|
<h2 class="text-lg font-medium text-gray-900">等级设置</h2>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
店铺名称
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
是否启用会员
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
会员等级
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
操作
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">时尚服装店</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
|
</label>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium">
|
|
设置等级明细
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">数码电子城</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" class="sr-only peer" onchange="toggleSwitch(this)">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
|
</label>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium">
|
|
设置等级明细
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">美食餐厅</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
|
</label>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium">
|
|
设置等级明细
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">家居生活馆</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" class="sr-only peer" onchange="toggleSwitch(this)">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
|
</label>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium">
|
|
设置等级明细
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">运动健身店</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
|
</label>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium">
|
|
设置等级明细
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="./js/main.js"></script>
|
|
</body>
|
|
</html> |