285 lines
12 KiB
HTML
285 lines
12 KiB
HTML
<!-- 营销日历页 -->
|
||
<style>
|
||
.page-mc { max-width:1100px; }
|
||
|
||
/* 顶部控制栏 */
|
||
.mc-header {
|
||
display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
|
||
background:#fff; border-radius:10px; padding:14px 20px; box-shadow:var(--g-shadow-sm);
|
||
}
|
||
.mc-month-nav { display:flex; align-items:center; gap:12px; }
|
||
.mc-month-nav button {
|
||
width:32px; height:32px; border:1px solid #e5e7eb; border-radius:8px; background:#fff;
|
||
cursor:pointer; display:flex; align-items:center; justify-content:center;
|
||
transition:all var(--g-transition); color:var(--g-text-secondary);
|
||
}
|
||
.mc-month-nav button:hover { border-color:var(--primary); color:var(--primary); }
|
||
.mc-month-title { font-size:18px; font-weight:700; color:var(--g-text); min-width:140px; text-align:center; }
|
||
.mc-legend { display:flex; gap:14px; font-size:12px; color:var(--g-text-secondary); }
|
||
.mc-legend-item { display:flex; align-items:center; gap:4px; }
|
||
.mc-legend-dot { width:10px; height:10px; border-radius:3px; }
|
||
|
||
/* 统计 */
|
||
.mc-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
|
||
.mc-stat-card {
|
||
background:#fff; border-radius:10px; padding:14px 18px;
|
||
box-shadow:var(--g-shadow-sm); transition:all var(--g-transition);
|
||
}
|
||
.mc-stat-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
||
.mc-stat-label { font-size:12px; color:var(--g-text-muted); margin-bottom:4px; }
|
||
.mc-stat-value { font-size:20px; font-weight:700; color:var(--g-text); }
|
||
.mc-stat-value.primary { color:var(--primary); }
|
||
.mc-stat-value.orange { color:var(--g-warning); }
|
||
.mc-stat-value.green { color:var(--g-success); }
|
||
|
||
/* 甘特图容器 */
|
||
.mc-gantt {
|
||
background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); overflow:hidden;
|
||
}
|
||
|
||
/* 日期头 */
|
||
.mc-dates {
|
||
display:grid; grid-template-columns:180px repeat(28, 1fr);
|
||
border-bottom:1px solid #e5e7eb; background:#f8f9fb;
|
||
}
|
||
.mc-dates-label {
|
||
padding:10px 16px; font-size:12px; font-weight:600; color:var(--g-text-secondary);
|
||
border-right:1px solid #f0f0f0; display:flex; align-items:center;
|
||
}
|
||
.mc-date-cell {
|
||
padding:8px 0; font-size:11px; color:var(--g-text-muted); text-align:center;
|
||
border-right:1px solid #f5f5f5;
|
||
}
|
||
.mc-date-cell.today { background:color-mix(in srgb, var(--primary) 8%, #fff); color:var(--primary); font-weight:600; }
|
||
.mc-date-cell.weekend { color:#ccc; }
|
||
|
||
/* 活动行 */
|
||
.mc-row {
|
||
display:grid; grid-template-columns:180px 1fr;
|
||
border-bottom:1px solid #f5f5f5; min-height:44px; transition:background var(--g-transition);
|
||
}
|
||
.mc-row:hover { background:color-mix(in srgb, var(--primary) 2%, #fff); }
|
||
.mc-row:last-child { border-bottom:none; }
|
||
.mc-row-label {
|
||
padding:10px 16px; font-size:13px; color:var(--g-text); display:flex;
|
||
align-items:center; gap:8px; border-right:1px solid #f0f0f0;
|
||
}
|
||
.mc-row-label-name { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||
.mc-type-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
|
||
|
||
/* 条形区域 */
|
||
.mc-bar-area {
|
||
position:relative; display:grid; grid-template-columns:repeat(28, 1fr); align-items:center;
|
||
}
|
||
.mc-bar {
|
||
position:absolute; height:24px; border-radius:4px; top:50%; transform:translateY(-50%);
|
||
font-size:11px; color:#fff; font-weight:500; display:flex; align-items:center;
|
||
padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
|
||
cursor:pointer; transition:filter var(--g-transition);
|
||
}
|
||
.mc-bar:hover { filter:brightness(1.1); }
|
||
|
||
/* 今日线 */
|
||
.mc-today-line {
|
||
position:absolute; top:0; bottom:0; width:2px; background:var(--g-danger);
|
||
z-index:2; opacity:.6;
|
||
}
|
||
.mc-today-line::before {
|
||
content:'今'; position:absolute; top:-18px; left:50%; transform:translateX(-50%);
|
||
font-size:10px; color:var(--g-danger); font-weight:600;
|
||
}
|
||
|
||
/* 冲突提示 */
|
||
.mc-conflict-banner {
|
||
display:flex; align-items:center; gap:8px; padding:10px 16px; margin-bottom:16px;
|
||
background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; font-size:13px; color:#9a3412;
|
||
}
|
||
|
||
/* 空行提示 */
|
||
.mc-empty-row {
|
||
padding:40px; text-align:center; color:var(--g-text-muted); font-size:13px;
|
||
}
|
||
</style>
|
||
|
||
<div class="page-mc">
|
||
|
||
<!-- 冲突提示 -->
|
||
<div class="mc-conflict-banner">
|
||
<i data-lucide="alert-triangle" style="width:16px;height:16px;color:#f59e0b;flex-shrink:0;"></i>
|
||
<span>2月10日~2月28日 有 <b>4个活动</b> 同时进行，请注意优惠叠加可能影响利润</span>
|
||
</div>
|
||
|
||
<!-- 顶部控制栏 -->
|
||
<div class="mc-header">
|
||
<div class="mc-month-nav">
|
||
<button><i data-lucide="chevron-left" style="width:16px;height:16px;"></i></button>
|
||
<div class="mc-month-title">2026年 2月</div>
|
||
<button><i data-lucide="chevron-right" style="width:16px;height:16px;"></i></button>
|
||
</div>
|
||
<div class="mc-legend">
|
||
<span class="mc-legend-item"><span class="mc-legend-dot" style="background:#3b82f6;"></span>满减</span>
|
||
<span class="mc-legend-item"><span class="mc-legend-dot" style="background:#22c55e;"></span>满赠</span>
|
||
<span class="mc-legend-item"><span class="mc-legend-dot" style="background:#f59e0b;"></span>第二份半价</span>
|
||
<span class="mc-legend-item"><span class="mc-legend-dot" style="background:#8b5cf6;"></span>限时折扣</span>
|
||
<span class="mc-legend-item"><span class="mc-legend-dot" style="background:#ef4444;"></span>秒杀</span>
|
||
<span class="mc-legend-item"><span class="mc-legend-dot" style="background:#ec4899;"></span>优惠券</span>
|
||
<span class="mc-legend-item"><span class="mc-legend-dot" style="background:#06b6d4;"></span>次卡</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计 -->
|
||
<div class="mc-stats">
|
||
<div class="mc-stat-card">
|
||
<div class="mc-stat-label">本月活动</div>
|
||
<div class="mc-stat-value primary">8</div>
|
||
</div>
|
||
<div class="mc-stat-card">
|
||
<div class="mc-stat-label">进行中</div>
|
||
<div class="mc-stat-value green">6</div>
|
||
</div>
|
||
<div class="mc-stat-card">
|
||
<div class="mc-stat-label">最大并行数</div>
|
||
<div class="mc-stat-value orange">4</div>
|
||
</div>
|
||
<div class="mc-stat-card">
|
||
<div class="mc-stat-label">本月预计优惠</div>
|
||
<div class="mc-stat-value">¥6,200</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 甘特图 -->
|
||
<div class="mc-gantt">
|
||
<!-- 日期头 -->
|
||
<div class="mc-dates">
|
||
<div class="mc-dates-label">活动名称</div>
|
||
<div class="mc-date-cell">1</div>
|
||
<div class="mc-date-cell">2</div>
|
||
<div class="mc-date-cell">3</div>
|
||
<div class="mc-date-cell">4</div>
|
||
<div class="mc-date-cell">5</div>
|
||
<div class="mc-date-cell">6</div>
|
||
<div class="mc-date-cell weekend">7</div>
|
||
<div class="mc-date-cell weekend">8</div>
|
||
<div class="mc-date-cell">9</div>
|
||
<div class="mc-date-cell">10</div>
|
||
<div class="mc-date-cell">11</div>
|
||
<div class="mc-date-cell today">12</div>
|
||
<div class="mc-date-cell">13</div>
|
||
<div class="mc-date-cell weekend">14</div>
|
||
<div class="mc-date-cell weekend">15</div>
|
||
<div class="mc-date-cell">16</div>
|
||
<div class="mc-date-cell">17</div>
|
||
<div class="mc-date-cell">18</div>
|
||
<div class="mc-date-cell">19</div>
|
||
<div class="mc-date-cell">20</div>
|
||
<div class="mc-date-cell weekend">21</div>
|
||
<div class="mc-date-cell weekend">22</div>
|
||
<div class="mc-date-cell">23</div>
|
||
<div class="mc-date-cell">24</div>
|
||
<div class="mc-date-cell">25</div>
|
||
<div class="mc-date-cell">26</div>
|
||
<div class="mc-date-cell">27</div>
|
||
<div class="mc-date-cell weekend">28</div>
|
||
</div>
|
||
|
||
<!-- 活动行 -->
|
||
<!-- 1. 午市满减 1/1~3/31 全月覆盖 -->
|
||
<div class="mc-row">
|
||
<div class="mc-row-label">
|
||
<span class="mc-type-dot" style="background:#3b82f6;"></span>
|
||
<span class="mc-row-label-name">午市满减优惠</span>
|
||
</div>
|
||
<div class="mc-bar-area">
|
||
<div class="mc-bar" style="left:0;right:0;background:#3b82f6;">满30减5 / 满50减10 / 满80减20</div>
|
||
<div class="mc-today-line" style="left:calc((12 - 0.5) / 28 * 100%);"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. 晚市大额满减 1/15~4/15 全月覆盖 -->
|
||
<div class="mc-row">
|
||
<div class="mc-row-label">
|
||
<span class="mc-type-dot" style="background:#3b82f6;"></span>
|
||
<span class="mc-row-label-name">晚市大额满减</span>
|
||
</div>
|
||
<div class="mc-bar-area">
|
||
<div class="mc-bar" style="left:0;right:0;background:#3b82f6;opacity:.75;">满50减8 / 满80减15 / 满120减30</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3. 饮品买二赠一 2/1~3/31 全月覆盖 -->
|
||
<div class="mc-row">
|
||
<div class="mc-row-label">
|
||
<span class="mc-type-dot" style="background:#22c55e;"></span>
|
||
<span class="mc-row-label-name">饮品买二赠一</span>
|
||
</div>
|
||
<div class="mc-bar-area">
|
||
<div class="mc-bar" style="left:0;right:0;background:#22c55e;">买2杯赠1杯</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. 甜品第二份半价 2/10~2/28 -->
|
||
<div class="mc-row">
|
||
<div class="mc-row-label">
|
||
<span class="mc-type-dot" style="background:#f59e0b;"></span>
|
||
<span class="mc-row-label-name">甜品第二份半价</span>
|
||
</div>
|
||
<div class="mc-bar-area">
|
||
<div class="mc-bar" style="left:calc((10 - 1) / 28 * 100%);right:0;background:#f59e0b;">第2份5折</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5. 疯狂星期四 限时折扣 每周四 -->
|
||
<div class="mc-row">
|
||
<div class="mc-row-label">
|
||
<span class="mc-type-dot" style="background:#8b5cf6;"></span>
|
||
<span class="mc-row-label-name">疯狂星期四</span>
|
||
</div>
|
||
<div class="mc-bar-area">
|
||
<!-- 2/5, 2/12, 2/19, 2/26 are Thursdays -->
|
||
<div class="mc-bar" style="left:calc((5 - 1) / 28 * 100%);width:calc(1 / 28 * 100%);background:#8b5cf6;border-radius:4px;font-size:0;"></div>
|
||
<div class="mc-bar" style="left:calc((12 - 1) / 28 * 100%);width:calc(1 / 28 * 100%);background:#8b5cf6;border-radius:4px;font-size:0;"></div>
|
||
<div class="mc-bar" style="left:calc((19 - 1) / 28 * 100%);width:calc(1 / 28 * 100%);background:#8b5cf6;border-radius:4px;font-size:0;"></div>
|
||
<div class="mc-bar" style="left:calc((26 - 1) / 28 * 100%);width:calc(1 / 28 * 100%);background:#8b5cf6;border-radius:4px;font-size:0;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6. 情人节秒杀 2/13~2/14 -->
|
||
<div class="mc-row">
|
||
<div class="mc-row-label">
|
||
<span class="mc-type-dot" style="background:#ef4444;"></span>
|
||
<span class="mc-row-label-name">情人节秒杀</span>
|
||
</div>
|
||
<div class="mc-bar-area">
|
||
<div class="mc-bar" style="left:calc((13 - 1) / 28 * 100%);width:calc(2 / 28 * 100%);background:#ef4444;">¥9.9 双人套餐</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 7. 新用户满减券 长期 -->
|
||
<div class="mc-row">
|
||
<div class="mc-row-label">
|
||
<span class="mc-type-dot" style="background:#ec4899;"></span>
|
||
<span class="mc-row-label-name">新用户满减券</span>
|
||
</div>
|
||
<div class="mc-bar-area">
|
||
<div class="mc-bar" style="left:0;right:0;background:#ec4899;opacity:.65;">满50减15（长期）</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8. 咖啡月卡 次卡 长期 -->
|
||
<div class="mc-row">
|
||
<div class="mc-row-label">
|
||
<span class="mc-type-dot" style="background:#06b6d4;"></span>
|
||
<span class="mc-row-label-name">咖啡月卡</span>
|
||
</div>
|
||
<div class="mc-bar-area">
|
||
<div class="mc-bar" style="left:0;right:0;background:#06b6d4;opacity:.65;">¥99 / 30次（长期在售）</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
||
</script>
|