You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1061 lines
46 KiB
1061 lines
46 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>发起活动 - 青核 Youthome</title>
|
|
<link rel="stylesheet" href="../css/design-system.css">
|
|
<style>
|
|
/* ===== 全局布局 ===== */
|
|
.app { width: 1920px
|
|
max-width: 100%;
|
|
overflow: hidden;; min-height: 1080px; margin: 0 auto; display: flex; position: relative; background: var(--bg-page); }
|
|
.sidebar { width: var(--sidebar-width); height: 100vh; background: var(--bg-card); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; z-index: 20; position: sticky; top: 0; }
|
|
.sidebar-logo { padding: 24px 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-light); cursor: pointer; flex-shrink: 0; }
|
|
.sidebar-logo-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--primary-light), var(--primary)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0; box-shadow: 0 4px 12px rgba(23,176,207,0.25); }
|
|
.sidebar-logo-text .main { font-size: 16px; font-weight: 700; color: var(--text-primary); }
|
|
.sidebar-logo-text .sub { font-size: 11px; color: var(--text-tertiary); }
|
|
.sidebar-nav { flex: 1; padding: 16px 12px 24px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
|
|
.nav-section-title { font-size: 11px; font-weight: 600; color: var(--text-tertiary); padding: 12px 12px 8px; letter-spacing: 0.05em; }
|
|
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all .15s ease; }
|
|
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
|
|
.nav-item.active { background: var(--primary-bg); color: var(--primary); font-weight: 600; }
|
|
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
|
|
.sidebar-footer { padding: 16px; border-top: 1px solid var(--border-light); flex-shrink: 0; }
|
|
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; }
|
|
.sidebar-user:hover { background: var(--bg-hover); }
|
|
.sidebar-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-light), var(--primary)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 600; overflow: hidden; }
|
|
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
.sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
|
|
.sidebar-user-desc { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
|
|
.sidebar-user-arrow { width: 16px; height: 16px; color: var(--text-tertiary); flex-shrink: 0; margin-left: auto; }
|
|
|
|
/* ===== 发布按钮 ===== */
|
|
.sidebar-publish { padding: 12px 12px 8px; flex-shrink: 0; }
|
|
.publish-btn {
|
|
display: flex; align-items: center; justify-content: center; gap: 8px;
|
|
height: 44px; background: var(--primary); color: #fff;
|
|
border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer;
|
|
transition: all .2s ease; box-shadow: 0 4px 12px rgba(23, 176, 207, 0.25);
|
|
}
|
|
.publish-btn:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(23, 176, 207, 0.35); }
|
|
.publish-btn svg { width: 20px; height: 20px; }
|
|
.publish-btn .publish-arrow { width: 16px; height: 16px; opacity: 0.8; transition: transform .2s; }
|
|
.publish-btn:hover .publish-arrow { transform: translateY(1px); }
|
|
.publish-dropdown { display: none; margin-top: 6px; background: var(--bg-card, #fff); border: 1px solid var(--border-light, #eee); border-radius: 12px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
|
|
.sidebar-publish:hover .publish-dropdown { display: block; }
|
|
.publish-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background .15s; }
|
|
.publish-option:hover { background: var(--bg-hover, #f5f5f5); }
|
|
.publish-option svg { width: 22px; height: 22px; color: var(--primary); flex-shrink: 0; }
|
|
.publish-option-title { font-size: 14px; font-weight: 600; color: var(--text-primary, #1a1a1a); }
|
|
.publish-option-desc { font-size: 11px; color: var(--text-tertiary, #999); margin-top: 2px; }
|
|
|
|
/* ===== 导航项角标 ===== */
|
|
.nav-item-label { display: flex; align-items: center; justify-content: space-between; flex: 1; }
|
|
.nav-badge { min-width: 18px; height: 18px; padding: 0 5px; background: #FF4D4F; color: #fff; font-size: 11px; font-weight: 600; border-radius: 9px; display: flex; align-items: center; justify-content: center; line-height: 1; }
|
|
|
|
/* ===== 主内容区 ===== */
|
|
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
|
|
|
|
/* ===== 顶部栏 ===== */
|
|
.top-bar {
|
|
height: var(--topbar-height); background: var(--bg-card); border-bottom: 1px solid var(--border);
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 32px; flex-shrink: 0; z-index: 15; position: sticky; top: 0;
|
|
}
|
|
.top-bar-left { display: flex; align-items: center; gap: 12px; }
|
|
.page-title-main { font-size: 18px; font-weight: 700; color: var(--text-primary); }
|
|
|
|
.top-bar-right { display: flex; align-items: center; gap: 12px; }
|
|
|
|
/* 预览按钮 */
|
|
.btn-preview {
|
|
height: 38px; padding: 0 18px;
|
|
display: flex; align-items: center; gap: 6px;
|
|
background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border);
|
|
border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer;
|
|
transition: all .15s;
|
|
}
|
|
.btn-preview:hover { border-color: var(--text-tertiary); color: var(--text-primary); }
|
|
.btn-preview svg { width: 16px; height: 16px; }
|
|
|
|
/* 发布活动主按钮 */
|
|
.btn-publish-main {
|
|
height: 38px; padding: 0 20px;
|
|
display: flex; align-items: center; gap: 6px;
|
|
background: var(--primary); color: #fff; border: none;
|
|
border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
|
|
transition: all .15s; box-shadow: 0 2px 8px rgba(23,176,207,0.25);
|
|
}
|
|
.btn-publish-main:hover { background: var(--primary-hover); box-shadow: 0 4px 12px rgba(23,176,207,0.3); }
|
|
.btn-publish-main svg { width: 16px; height: 16px; }
|
|
|
|
/* ===== 主体内容区 ===== */
|
|
.content-wrapper { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 32px 28px 48px; }
|
|
|
|
/* ===== 步骤条 ===== */
|
|
.stepper-wrapper {
|
|
width: 720px; margin-bottom: 32px;
|
|
}
|
|
.stepper {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
position: relative; padding: 0 8px;
|
|
}
|
|
.stepper-line {
|
|
position: absolute; top: 20px; left: 48px; right: 48px; height: 2px;
|
|
background: var(--border); border-radius: 1px; z-index: 0;
|
|
}
|
|
.stepper-line-fill {
|
|
position: absolute; top: 0; left: 0; height: 100%;
|
|
width: 0%; background: var(--primary); border-radius: 1px;
|
|
transition: width .3s ease;
|
|
}
|
|
.step-item {
|
|
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
|
position: relative; z-index: 1; flex: 1;
|
|
}
|
|
.step-circle {
|
|
width: 40px; height: 40px; border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 14px; font-weight: 600; transition: all .3s ease;
|
|
position: relative;
|
|
}
|
|
.step-circle.completed {
|
|
background: var(--primary); color: #fff;
|
|
box-shadow: 0 2px 8px rgba(23,176,207,0.3);
|
|
}
|
|
.step-circle.active {
|
|
background: var(--primary); color: #fff;
|
|
box-shadow: 0 0 0 4px rgba(23,176,207,0.15), 0 2px 8px rgba(23,176,207,0.3);
|
|
}
|
|
.step-circle.pending {
|
|
background: var(--bg-card); color: var(--text-tertiary);
|
|
border: 2px solid var(--border);
|
|
}
|
|
.step-label {
|
|
font-size: 13px; font-weight: 500; color: var(--text-tertiary);
|
|
transition: all .3s ease;
|
|
}
|
|
.step-item.completed .step-label,
|
|
.step-item.active .step-label {
|
|
color: var(--text-primary); font-weight: 600;
|
|
}
|
|
.step-item.active .step-label {
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* ===== 表单卡片 ===== */
|
|
.form-card {
|
|
width: 720px; background: var(--bg-card); border-radius: 16px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
border: 1px solid var(--border-light);
|
|
overflow: hidden;
|
|
}
|
|
.form-card-header {
|
|
padding: 24px 32px 20px;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
.form-card-title {
|
|
font-size: 16px; font-weight: 600; color: var(--text-primary);
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.form-card-title::before {
|
|
content: ''; width: 4px; height: 16px;
|
|
background: var(--primary); border-radius: 2px;
|
|
}
|
|
.form-card-body {
|
|
padding: 24px 32px 32px;
|
|
}
|
|
|
|
/* ===== 表单项 ===== */
|
|
.form-row {
|
|
display: flex; align-items: flex-start; gap: 24px;
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
.form-row:last-child { border-bottom: none; }
|
|
.form-label {
|
|
width: 120px; flex-shrink: 0;
|
|
font-size: 14px; font-weight: 500; color: var(--text-primary);
|
|
padding-top: 10px; text-align: right;
|
|
line-height: 1.5;
|
|
}
|
|
.form-label .required {
|
|
color: #F5222D; margin-right: 4px;
|
|
}
|
|
.form-control {
|
|
flex: 1; min-width: 0;
|
|
}
|
|
|
|
/* ===== 输入框样式 ===== */
|
|
.input-wrapper {
|
|
position: relative;
|
|
}
|
|
.form-input {
|
|
width: 100%; height: 40px;
|
|
padding: 0 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
font-size: 14px; color: var(--text-primary);
|
|
background: var(--bg-card);
|
|
transition: all .15s ease;
|
|
}
|
|
.form-input:hover { border-color: var(--text-tertiary); }
|
|
.form-input:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(23,176,207,0.1);
|
|
}
|
|
.form-input::placeholder { color: var(--text-placeholder); }
|
|
.input-hint {
|
|
font-size: 12px; color: var(--text-tertiary);
|
|
margin-top: 6px;
|
|
}
|
|
.input-count {
|
|
position: absolute; right: 12px; top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 12px; color: var(--text-tertiary);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ===== 下拉选择 ===== */
|
|
.select-wrapper {
|
|
position: relative;
|
|
}
|
|
.form-select {
|
|
width: 100%; height: 40px;
|
|
padding: 0 36px 0 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
font-size: 14px; color: var(--text-primary);
|
|
background: var(--bg-card);
|
|
cursor: pointer;
|
|
transition: all .15s ease;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
.form-select:hover { border-color: var(--text-tertiary); }
|
|
.form-select:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(23,176,207,0.1);
|
|
}
|
|
.select-arrow {
|
|
position: absolute; right: 12px; top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 16px; height: 16px;
|
|
color: var(--text-tertiary);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ===== 封面上传 ===== */
|
|
.cover-upload-area {
|
|
width: 100%; height: 180px;
|
|
border: 2px dashed var(--border);
|
|
border-radius: 12px;
|
|
background: var(--bg-page);
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
gap: 8px; cursor: pointer;
|
|
transition: all .2s ease;
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.cover-upload-area:hover {
|
|
border-color: var(--primary);
|
|
background: var(--primary-bg);
|
|
}
|
|
.cover-upload-area.dragover {
|
|
border-color: var(--primary);
|
|
background: var(--primary-bg);
|
|
}
|
|
.cover-upload-icon {
|
|
width: 48px; height: 48px;
|
|
border-radius: 50%;
|
|
background: var(--primary-bg);
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: var(--primary);
|
|
}
|
|
.cover-upload-icon svg { width: 24px; height: 24px; }
|
|
.cover-upload-text {
|
|
font-size: 14px; font-weight: 500; color: var(--text-primary);
|
|
}
|
|
.cover-upload-hint {
|
|
font-size: 12px; color: var(--text-tertiary);
|
|
}
|
|
|
|
/* ===== 时间选择 ===== */
|
|
.time-range {
|
|
display: flex; align-items: center; gap: 12px;
|
|
}
|
|
.time-field {
|
|
flex: 1; position: relative;
|
|
}
|
|
.time-input {
|
|
width: 100%; height: 40px;
|
|
padding: 0 36px 0 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
font-size: 14px; color: var(--text-primary);
|
|
background: var(--bg-card);
|
|
transition: all .15s ease;
|
|
cursor: pointer;
|
|
}
|
|
.time-input:hover { border-color: var(--text-tertiary); }
|
|
.time-input:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(23,176,207,0.1);
|
|
}
|
|
.time-input::placeholder { color: var(--text-placeholder); }
|
|
.time-input[readonly] { cursor: pointer; }
|
|
.time-picker-btn {
|
|
position: absolute; right: 4px; top: 4px; width: 32px; height: 32px;
|
|
display: grid; place-items: center; border: 0; background: transparent;
|
|
color: var(--text-secondary); cursor: pointer; border-radius: 6px;
|
|
}
|
|
.time-picker-btn:hover { background: var(--primary-bg); color: var(--primary); }
|
|
.time-icon {
|
|
width: 16px; height: 16px;
|
|
stroke: currentColor;
|
|
}
|
|
.web-date-dialog, .web-map-dialog { position: fixed; inset: 0; margin: auto; max-height: calc(100vh - 28px); overflow: auto; border: 0; border-radius: 8px; padding: 0; color: var(--text-primary); box-shadow: 0 18px 60px rgba(0,0,0,.2); }
|
|
.web-date-dialog { width: min(440px, calc(100vw - 28px)); }
|
|
.web-map-dialog { width: min(760px, calc(100vw - 28px)); }
|
|
.web-date-dialog::backdrop, .web-map-dialog::backdrop { background: rgba(0,0,0,.5); }
|
|
.web-dialog-head, .web-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px; }
|
|
.web-dialog-head { border-bottom: 1px solid var(--border); font-weight: 600; }
|
|
.web-dialog-foot { border-top: 1px solid var(--border); justify-content: flex-end; }
|
|
.web-dialog-head button, .web-calendar-nav button { border: 0; background: transparent; cursor: pointer; font-size: 20px; color: var(--text-secondary); }
|
|
.web-dialog-foot button { border: 1px solid var(--border); border-radius: 6px; padding: 9px 16px; background: var(--bg-card); cursor: pointer; }
|
|
.web-dialog-foot .primary { background: var(--primary); border-color: var(--primary); color: white; }
|
|
.web-dialog-foot button:disabled { opacity: .45; cursor: not-allowed; }
|
|
.web-calendar-nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; font-weight: 600; }
|
|
.web-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 0 20px 18px; }
|
|
.web-calendar-grid span, .web-calendar-grid button { height: 42px; display: grid; place-items: center; }
|
|
.web-calendar-grid span { color: var(--text-tertiary); font-size: 12px; }
|
|
.web-calendar-grid button { border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: 14px; }
|
|
.web-calendar-grid button:hover, .web-calendar-grid button.selected { background: var(--primary-bg); color: var(--primary); }
|
|
.web-calendar-grid button.selected { font-weight: 700; outline: 2px solid var(--primary); }
|
|
.web-calendar-grid button:disabled { opacity: .25; cursor: default; }
|
|
.web-time-row { display: flex; align-items: center; gap: 12px; padding: 0 20px 20px; }
|
|
.web-time-row input { width: 80px; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
|
|
.web-map-search { display: flex; gap: 8px; padding: 16px 20px; }
|
|
.web-map-search input { flex: 1; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 6px; }
|
|
.web-map-search button { padding: 0 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); cursor: pointer; }
|
|
.web-map-canvas { height: min(48vh, 390px); background: #e7ebeb; }
|
|
.web-map-status { min-height: 38px; padding: 10px 20px; color: var(--text-secondary); font-size: 13px; }
|
|
.web-map-pin { width: 18px; height: 18px; background: #e35345; border: 3px solid white; border-radius: 50%; box-shadow: 0 1px 7px #3338; }
|
|
.time-separator {
|
|
color: var(--text-tertiary); font-size: 14px; flex-shrink: 0;
|
|
}
|
|
.cover-upload-area.has-cover .cover-upload-icon,
|
|
.cover-upload-area.has-cover .cover-upload-text,
|
|
.cover-upload-area.has-cover .cover-upload-hint { display: none; }
|
|
.web-activity-preview { width: min(520px, calc(100vw - 32px)); border: 0; border-radius: 8px; padding: 24px; color: var(--text-primary); }
|
|
.web-activity-preview::backdrop { background: rgba(0, 0, 0, .45); }
|
|
.web-activity-preview img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 14px 0; }
|
|
.web-activity-preview p { margin: 8px 0; }
|
|
.web-activity-preview button { margin-top: 14px; padding: 9px 16px; border: 0; border-radius: 6px; background: var(--primary); color: white; cursor: pointer; }
|
|
body.activity-create-page .stepper-wrapper { display: none; }
|
|
#activity-title { padding-right: 64px; }
|
|
@media (max-width: 600px) {
|
|
body.activity-create-page .web-publish-actions { flex-wrap: wrap; gap: 8px; }
|
|
body.activity-create-page .web-publish-actions strong { flex: 0 0 100%; margin: 0; }
|
|
body.activity-create-page .web-publish-actions button { white-space: nowrap; }
|
|
}
|
|
|
|
/* ===== 地点输入 ===== */
|
|
.location-fields {
|
|
display: flex; flex-direction: column; gap: 10px;
|
|
}
|
|
.location-row {
|
|
display: flex; align-items: center; gap: 10px;
|
|
}
|
|
.location-input {
|
|
flex: 1; height: 40px;
|
|
padding: 0 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
font-size: 14px; color: var(--text-primary);
|
|
background: var(--bg-card);
|
|
transition: all .15s ease;
|
|
}
|
|
.location-input:hover { border-color: var(--text-tertiary); }
|
|
.location-input:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(23,176,207,0.1);
|
|
}
|
|
.location-input::placeholder { color: var(--text-placeholder); }
|
|
.location-locate-btn {
|
|
height: 40px; padding: 0 14px;
|
|
display: flex; align-items: center; gap: 6px;
|
|
background: var(--bg-page); color: var(--text-secondary);
|
|
border: 1px solid var(--border); border-radius: 8px;
|
|
font-size: 13px; cursor: pointer;
|
|
transition: all .15s; flex-shrink: 0;
|
|
}
|
|
.location-locate-btn:hover {
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
background: var(--primary-bg);
|
|
}
|
|
.location-locate-btn svg { width: 14px; height: 14px; }
|
|
|
|
/* ===== 人数输入 ===== */
|
|
.people-wrapper {
|
|
display: flex; align-items: center; gap: 16px;
|
|
}
|
|
.people-input-group {
|
|
display: flex; align-items: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
transition: all .15s ease;
|
|
}
|
|
.people-input-group:focus-within {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(23,176,207,0.1);
|
|
}
|
|
.people-btn {
|
|
width: 38px; height: 38px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
background: var(--bg-card); color: var(--text-secondary);
|
|
cursor: pointer; transition: all .15s;
|
|
border: none;
|
|
}
|
|
.people-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
|
|
.people-btn svg { width: 16px; height: 16px; }
|
|
.people-input {
|
|
width: 60px; height: 38px;
|
|
border: none; text-align: center;
|
|
font-size: 14px; font-weight: 500; color: var(--text-primary);
|
|
background: var(--bg-card);
|
|
border-left: 1px solid var(--border);
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
.people-input::-webkit-outer-spin-button,
|
|
.people-input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none; margin: 0;
|
|
}
|
|
.people-input[type=number] { -moz-appearance: textfield; }
|
|
|
|
/* Switch 开关 */
|
|
.switch-wrapper {
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.switch-label-text {
|
|
font-size: 13px; color: var(--text-secondary);
|
|
}
|
|
.youth-switch {
|
|
position: relative;
|
|
width: 40px; height: 22px;
|
|
background: var(--border);
|
|
border-radius: 11px;
|
|
cursor: pointer;
|
|
transition: background .2s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
.youth-switch.active {
|
|
background: var(--primary);
|
|
}
|
|
.youth-switch-thumb {
|
|
position: absolute;
|
|
top: 2px; left: 2px;
|
|
width: 18px; height: 18px;
|
|
background: var(--bg-card);
|
|
border-radius: 50%;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
|
|
transition: left .2s ease;
|
|
}
|
|
.youth-switch.active .youth-switch-thumb {
|
|
left: 20px;
|
|
}
|
|
|
|
/* ===== 费用选择 ===== */
|
|
.fee-toggle {
|
|
display: flex; align-items: center; gap: 0;
|
|
background: var(--bg-page);
|
|
border-radius: 8px; padding: 3px;
|
|
margin-bottom: 12px;
|
|
width: fit-content;
|
|
}
|
|
.fee-option {
|
|
padding: 6px 20px;
|
|
font-size: 13px; font-weight: 500;
|
|
color: var(--text-secondary);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all .15s;
|
|
}
|
|
.fee-option.active {
|
|
background: var(--bg-card);
|
|
color: var(--primary);
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
|
font-weight: 600;
|
|
}
|
|
.fee-amount-wrapper {
|
|
display: flex; align-items: center; gap: 10px;
|
|
}
|
|
.fee-amount-input {
|
|
width: 160px; height: 40px;
|
|
padding: 0 14px 0 30px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
font-size: 14px; color: var(--text-primary);
|
|
background: var(--bg-card);
|
|
transition: all .15s ease;
|
|
}
|
|
.fee-amount-input:hover { border-color: var(--text-tertiary); }
|
|
.fee-amount-input:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(23,176,207,0.1);
|
|
}
|
|
.fee-currency {
|
|
position: absolute; left: 12px; top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 14px; color: var(--text-secondary);
|
|
font-weight: 500;
|
|
}
|
|
.fee-desc-input {
|
|
flex: 1; height: 40px;
|
|
padding: 0 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
font-size: 14px; color: var(--text-primary);
|
|
background: var(--bg-card);
|
|
transition: all .15s ease;
|
|
}
|
|
.fee-desc-input:hover { border-color: var(--text-tertiary); }
|
|
.fee-desc-input:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(23,176,207,0.1);
|
|
}
|
|
.fee-desc-input::placeholder { color: var(--text-placeholder); }
|
|
|
|
/* ===== 底部操作栏 ===== */
|
|
.form-footer {
|
|
width: 720px; margin-top: 24px;
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
}
|
|
.footer-left { display: flex; align-items: center; gap: 8px; }
|
|
.footer-right { display: flex; align-items: center; gap: 12px; }
|
|
|
|
.btn-secondary {
|
|
height: 44px; padding: 0 24px;
|
|
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
|
background: var(--bg-card); color: var(--text-secondary);
|
|
border: 1px solid var(--border); border-radius: 8px;
|
|
font-size: 14px; font-weight: 500; cursor: pointer;
|
|
transition: all .15s;
|
|
}
|
|
.btn-secondary:hover { border-color: var(--text-tertiary); color: var(--text-primary); }
|
|
.btn-secondary:disabled {
|
|
color: var(--text-disabled);
|
|
cursor: not-allowed;
|
|
background: var(--bg-disabled);
|
|
border-color: var(--border);
|
|
}
|
|
.btn-secondary:disabled:hover {
|
|
color: var(--text-disabled);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.btn-next {
|
|
height: 44px; padding: 0 28px;
|
|
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
|
background: var(--primary); color: #fff;
|
|
border: none; border-radius: 8px;
|
|
font-size: 14px; font-weight: 600; cursor: pointer;
|
|
transition: all .15s;
|
|
box-shadow: 0 2px 8px rgba(23,176,207,0.25);
|
|
}
|
|
.btn-next:hover { background: var(--primary-hover); box-shadow: 0 4px 12px rgba(23,176,207,0.3); }
|
|
.btn-next svg { width: 16px; height: 16px; }
|
|
|
|
/* 保存草稿 */
|
|
.btn-draft {
|
|
height: 44px; padding: 0 20px;
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
background: transparent; color: var(--text-tertiary);
|
|
border: none; border-radius: 8px;
|
|
font-size: 13px; cursor: pointer;
|
|
transition: all .15s;
|
|
}
|
|
.btn-draft:hover { color: var(--text-secondary); background: var(--bg-hover); }
|
|
.btn-draft svg { width: 14px; height: 14px; }
|
|
</style>
|
|
<link rel="stylesheet" href="../css/web-refresh.css?v=20261020-brand-color">
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<!-- ===== 侧边栏 ===== -->
|
|
<aside class="sidebar" style="height: 1096px;">
|
|
<div class="sidebar-logo" onclick="location.href='feed.html'">
|
|
<div class="sidebar-logo-icon">青</div>
|
|
<div class="sidebar-logo-text">
|
|
<span class="main">青核 Youthome</span>
|
|
<span class="sub">校园实名社交</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 发布按钮 -->
|
|
<div class="sidebar-publish">
|
|
<div class="publish-btn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
<span>发布</span>
|
|
<svg class="publish-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
</svg>
|
|
</div>
|
|
<div class="publish-dropdown">
|
|
<div class="publish-option" onclick="location.href='publish-post.html'">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
|
<polyline points="21 15 16 10 5 21"></polyline>
|
|
</svg>
|
|
<div class="publish-option-text">
|
|
<div class="publish-option-title">发布动态</div>
|
|
<div class="publish-option-desc">分享图文、心情</div>
|
|
</div>
|
|
</div>
|
|
<div class="publish-option" onclick="location.href='publish-video.html'">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polygon points="23 7 16 12 23 17 23 7"></polygon>
|
|
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
|
|
</svg>
|
|
<div class="publish-option-text">
|
|
<div class="publish-option-title">发布视频</div>
|
|
<div class="publish-option-desc">上传短视频</div>
|
|
</div>
|
|
</div>
|
|
<div class="publish-option" onclick="location.href='activity-create.html'">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
|
<line x1="12" y1="14" x2="12" y2="18"></line>
|
|
<line x1="10" y1="16" x2="14" y2="16"></line>
|
|
</svg>
|
|
<div class="publish-option-text">
|
|
<div class="publish-option-title">发起活动</div>
|
|
<div class="publish-option-desc">组织线下聚会</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-section-title">探索</div>
|
|
|
|
<div class="nav-item" onclick="location.href='feed.html'">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1m2 13a2 2 0 0 1-2-2V7m2 13a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
|
</svg>
|
|
动态广场
|
|
</div>
|
|
|
|
<div class="nav-item" onclick="location.href='video.html'">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polygon points="23 7 16 12 23 17 23 7"></polygon>
|
|
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
|
|
</svg>
|
|
视频广场
|
|
</div>
|
|
|
|
<div class="nav-item" onclick="location.href='activities.html'">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
|
</svg>
|
|
活动组局
|
|
</div>
|
|
|
|
<div class="nav-section-title">我的</div>
|
|
|
|
<div class="nav-item" onclick="location.href='me.html'">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
个人中心
|
|
</div>
|
|
|
|
<div class="nav-item" onclick="location.href='notification.html'">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
|
|
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
|
|
</svg>
|
|
<div class="nav-item-label">
|
|
消息通知
|
|
<span class="nav-badge">3</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-item" onclick="location.href='settings.html'">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
|
</svg>
|
|
设置
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="sidebar-user" onclick="location.href='me.html'">
|
|
<div class="sidebar-avatar">
|
|
<img src="../assets/avatar-01-female-short-light.jpg" alt="林小夏">
|
|
</div>
|
|
<div class="sidebar-user-info">
|
|
<div class="sidebar-user-name">林小夏</div>
|
|
<div class="sidebar-user-desc">复旦大学</div>
|
|
</div>
|
|
<svg class="sidebar-user-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ===== 主内容区 ===== -->
|
|
<main class="main-area">
|
|
<!-- 顶部栏 -->
|
|
<header class="top-bar">
|
|
<div class="top-bar-left">
|
|
<span class="page-title-main">发起活动</span>
|
|
</div>
|
|
<div class="top-bar-right">
|
|
<button class="btn-preview">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
</svg>
|
|
预览
|
|
</button>
|
|
<button class="btn-publish-main">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 2L11 13"></path>
|
|
<path d="M22 2l-7 20-4-9-9-4 20-7z"></path>
|
|
</svg>
|
|
发布活动
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 内容区 -->
|
|
<div class="content-wrapper">
|
|
<!-- 步骤条 -->
|
|
<div class="stepper-wrapper">
|
|
|
|
</div>
|
|
|
|
<!-- 表单卡片 -->
|
|
<div class="form-card">
|
|
<div class="form-card-header">
|
|
<div class="form-card-title">基本信息</div>
|
|
</div>
|
|
<div class="form-card-body">
|
|
<!-- 活动标题 -->
|
|
<div class="form-row">
|
|
<label class="form-label">
|
|
<span class="required">*</span>活动标题
|
|
</label>
|
|
<div class="form-control">
|
|
<div class="input-wrapper">
|
|
<input type="text" class="form-input" id="activity-title" placeholder="请输入活动标题,让大家一眼就知道是什么活动" maxlength="50">
|
|
<span class="input-count"><span id="title-count">0</span>/50</span>
|
|
</div>
|
|
<div class="input-hint">好的标题能吸引更多人参与,建议控制在 20 字以内</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 活动介绍 -->
|
|
<div class="form-row">
|
|
<label class="form-label">
|
|
<span class="required">*</span>活动介绍
|
|
</label>
|
|
<div class="form-control">
|
|
<div class="input-wrapper">
|
|
<textarea class="form-input" id="activity-desc" rows="4" maxlength="500" style="height:auto;padding-top:10px;resize:vertical;" placeholder="介绍活动内容、流程和注意事项"></textarea>
|
|
<span class="input-count"><span id="desc-count">0</span>/500</span>
|
|
</div>
|
|
<div class="input-hint">说明活动内容与安排,方便参与者了解详情</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 活动类型 -->
|
|
<div class="form-row">
|
|
<label class="form-label">
|
|
<span class="required">*</span>活动类型
|
|
</label>
|
|
<div class="form-control">
|
|
<div class="select-wrapper">
|
|
<select class="form-select" id="activity-type">
|
|
<option value="">请选择活动类型</option>
|
|
<option value="offline">线下聚会</option>
|
|
<option value="sports">运动健身</option>
|
|
<option value="study">学习交流</option>
|
|
<option value="club">兴趣社团</option>
|
|
<option value="competition">比赛竞赛</option>
|
|
<option value="volunteer">公益志愿</option>
|
|
</select>
|
|
<svg class="select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 活动封面 -->
|
|
<div class="form-row">
|
|
<label class="form-label">
|
|
<span class="required">*</span>活动封面
|
|
</label>
|
|
<div class="form-control">
|
|
<div class="cover-upload-area" id="cover-upload">
|
|
<div class="cover-upload-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path>
|
|
<circle cx="12" cy="13" r="3"></circle>
|
|
</svg>
|
|
</div>
|
|
<div class="cover-upload-text">点击或拖拽图片到此处上传</div>
|
|
<div class="cover-upload-hint">建议尺寸 1200 × 675(16:9),支持 JPG / PNG,最多 1 张</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 活动时间 -->
|
|
<div class="form-row">
|
|
<label class="form-label">
|
|
<span class="required">*</span>活动时间
|
|
</label>
|
|
<div class="form-control">
|
|
<div class="time-range">
|
|
<div class="time-field">
|
|
<input type="text" class="time-input" id="start-time" aria-label="活动开始时间" readonly>
|
|
<button type="button" class="time-picker-btn" aria-label="选择活动开始时间"><svg class="time-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
|
</svg></button>
|
|
</div>
|
|
<span class="time-separator">至</span>
|
|
<div class="time-field">
|
|
<input type="text" class="time-input" id="end-time" aria-label="活动结束时间" readonly>
|
|
<button type="button" class="time-picker-btn" aria-label="选择活动结束时间"><svg class="time-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
|
</svg></button>
|
|
</div>
|
|
</div>
|
|
<div class="input-hint">请选择活动的开始和结束时间,活动时长建议不少于 30 分钟</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label class="form-label" for="registration-deadline"><span class="required">*</span>报名截止</label>
|
|
<div class="form-control">
|
|
<div class="time-field">
|
|
<input type="text" class="time-input" id="registration-deadline" aria-label="报名截止时间" readonly>
|
|
<button type="button" class="time-picker-btn" aria-label="选择报名截止时间"><svg class="time-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
|
</svg></button>
|
|
</div>
|
|
<div class="input-hint">报名应在活动开始前截止</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 活动地点 -->
|
|
<div class="form-row">
|
|
<label class="form-label">
|
|
<span class="required">*</span>活动地点
|
|
</label>
|
|
<div class="form-control">
|
|
<div class="location-fields">
|
|
<div class="location-row">
|
|
<input type="text" class="location-input" placeholder="地点名称,如:复旦大学正大体育馆" id="location-name">
|
|
<button class="location-locate-btn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
|
|
<circle cx="12" cy="10" r="3"></circle>
|
|
</svg>
|
|
地图定位
|
|
</button>
|
|
</div>
|
|
<input type="text" class="location-input" placeholder="详细地址,如:杨浦区邯郸路220号" id="location-address">
|
|
</div>
|
|
<div class="input-hint">请填写准确的地点信息,方便参与者找到活动位置</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 预计人数 -->
|
|
<div class="form-row">
|
|
<label class="form-label">预计人数</label>
|
|
<div class="form-control">
|
|
<div class="people-wrapper">
|
|
<div class="people-input-group">
|
|
<button class="people-btn" id="people-minus">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
</button>
|
|
<input type="number" class="people-input" id="people-count" value="20" min="1" max="999">
|
|
<button class="people-btn" id="people-plus">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<span style="font-size: 13px; color: var(--text-secondary);">人</span>
|
|
<div class="switch-wrapper" style="margin-left: auto;">
|
|
<span class="switch-label-text">设置人数上限</span>
|
|
<div class="youth-switch active" id="people-limit-switch">
|
|
<div class="youth-switch-thumb"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-hint">开启后报名人数达到上限时将自动关闭报名通道</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 活动费用 -->
|
|
<div class="form-row">
|
|
<label class="form-label">活动费用</label>
|
|
<div class="form-control">
|
|
<div class="fee-toggle" id="fee-toggle">
|
|
<div class="fee-option active" data-fee="free">免费</div>
|
|
<div class="fee-option" data-fee="paid">收费</div>
|
|
</div>
|
|
<div class="fee-amount-wrapper" id="fee-paid-section" style="display: none;">
|
|
<div class="input-wrapper" style="position: relative;">
|
|
<span class="fee-currency">¥</span>
|
|
<input type="number" class="fee-amount-input" placeholder="0.00" id="fee-amount" min="0" step="0.01">
|
|
</div>
|
|
<input type="text" class="fee-desc-input" placeholder="收费说明(选填),如:AA制、包含场地费等" id="fee-desc">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部操作栏 -->
|
|
<div class="form-footer">
|
|
<div class="footer-left">
|
|
<button class="btn-draft">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
|
|
<polyline points="17 21 17 13 7 13 7 21"></polyline>
|
|
<polyline points="7 3 7 8 15 8"></polyline>
|
|
</svg>
|
|
保存草稿
|
|
</button>
|
|
</div>
|
|
<div class="footer-right">
|
|
<button class="btn-secondary" type="button" onclick="location.href='activities.html'">取消</button>
|
|
<button class="btn-next">
|
|
发布活动
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
// ===== 标题字数统计 =====
|
|
(function() {
|
|
const titleInput = document.getElementById('activity-title');
|
|
const titleCount = document.getElementById('title-count');
|
|
titleInput.addEventListener('input', function() {
|
|
titleCount.textContent = this.value.length;
|
|
});
|
|
})();
|
|
|
|
// ===== 人数加减 =====
|
|
(function() {
|
|
const minusBtn = document.getElementById('people-minus');
|
|
const plusBtn = document.getElementById('people-plus');
|
|
const input = document.getElementById('people-count');
|
|
|
|
function clampValue(val) {
|
|
val = parseInt(val) || 1;
|
|
if (val < 1) val = 1;
|
|
if (val > 999) val = 999;
|
|
return val;
|
|
}
|
|
|
|
minusBtn.addEventListener('click', function() {
|
|
let val = parseInt(input.value) || 1;
|
|
val = clampValue(val - 1);
|
|
input.value = val;
|
|
});
|
|
|
|
plusBtn.addEventListener('click', function() {
|
|
let val = parseInt(input.value) || 1;
|
|
val = clampValue(val + 1);
|
|
input.value = val;
|
|
});
|
|
|
|
input.addEventListener('input', function() {
|
|
this.value = this.value.replace(/[^0-9]/g, '');
|
|
if (this.value === '') return;
|
|
this.value = clampValue(this.value);
|
|
});
|
|
|
|
input.addEventListener('blur', function() {
|
|
if (this.value === '' || parseInt(this.value) < 1) {
|
|
this.value = 1;
|
|
}
|
|
});
|
|
})();
|
|
|
|
// ===== 人数限制开关 =====
|
|
(function() {
|
|
const sw = document.getElementById('people-limit-switch');
|
|
sw.addEventListener('click', function() {
|
|
this.classList.toggle('active');
|
|
});
|
|
})();
|
|
|
|
// ===== 费用切换 =====
|
|
(function() {
|
|
const toggle = document.getElementById('fee-toggle');
|
|
const options = toggle.querySelectorAll('.fee-option');
|
|
const paidSection = document.getElementById('fee-paid-section');
|
|
|
|
options.forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
options.forEach(o => o.classList.remove('active'));
|
|
this.classList.add('active');
|
|
if (this.dataset.fee === 'paid') {
|
|
paidSection.style.display = 'flex';
|
|
} else {
|
|
paidSection.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
})();
|
|
|
|
</script>
|
|
<link rel="stylesheet" href="../assets/vendor/leaflet/leaflet.css">
|
|
<script src="../assets/vendor/leaflet/leaflet.js" defer></script>
|
|
<script src="../js/web-local-data.js?v=20261016-local" defer></script>
|
|
<script src="../js/web-api.js?v=20261020-api" defer></script>
|
|
<script src="../js/web-shell.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|
|
|