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.
555 lines
15 KiB
555 lines
15 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>青核 Youthome - 发起话题</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
:root {
|
|
--radius-xs: 4px;
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
--radius-xl: 20px;
|
|
--radius-full: 9999px;
|
|
--height-btn: 44px;
|
|
--height-input: 44px;
|
|
--height-nav: 64px;
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
--shadow-btn: 0 2px 8px rgba(38, 194, 187, 0.25);
|
|
--shadow-btn-hover: 0 4px 16px rgba(38, 194, 187, 0.35);
|
|
--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
html, body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif;
|
|
background: var(--youth-bg-page);
|
|
color: var(--youth-text-primary);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.app-container {
|
|
width: 375px;
|
|
height: 812px;
|
|
margin: 0 auto;
|
|
background: var(--youth-bg-page);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ===== 状态栏 ===== */
|
|
.status-bar {
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--youth-text-primary);
|
|
background: var(--youth-bg-page);
|
|
position: relative;
|
|
z-index: 30;
|
|
}
|
|
|
|
.status-bar .right-icons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.status-bar svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* ===== 顶部导航栏 ===== */
|
|
.top-nav {
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 8px;
|
|
background: var(--youth-bg-page);
|
|
position: relative;
|
|
z-index: 20;
|
|
}
|
|
|
|
.nav-icon-btn {
|
|
width: 34px;
|
|
height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
color: var(--youth-text-primary);
|
|
}
|
|
|
|
.nav-icon-btn:active {
|
|
transform: scale(0.92);
|
|
}
|
|
|
|
.nav-icon-btn svg {
|
|
width: 22px;
|
|
height: 22px;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
color: var(--youth-text-primary);
|
|
}
|
|
|
|
.nav-right-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.nav-submit-btn {
|
|
height: 32px;
|
|
padding: 0 14px;
|
|
border-radius: var(--youth-radius-full);
|
|
background: var(--youth-primary);
|
|
color: #FFFFFF;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: var(--shadow-btn);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-submit-btn:active {
|
|
transform: scale(0.92);
|
|
}
|
|
|
|
.nav-submit-btn.disabled {
|
|
background: #C5C5C5;
|
|
box-shadow: none;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ===== 表单内容区 ===== */
|
|
.form-content {
|
|
padding: 16px;
|
|
}
|
|
|
|
.form-section {
|
|
background: var(--youth-bg-card);
|
|
border-radius: var(--youth-radius-md);
|
|
padding: 16px;
|
|
box-shadow: var(--shadow-card);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-field {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-field:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--youth-text-primary);
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.form-label .required {
|
|
color: #F5222D;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-input-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
height: var(--height-input);
|
|
padding: 0 14px;
|
|
background: var(--youth-bg-page);
|
|
border: 1px solid var(--youth-border-light);
|
|
border-radius: var(--youth-radius-sm);
|
|
font-size: 14px;
|
|
color: var(--youth-text-primary);
|
|
outline: none;
|
|
transition: all 0.2s ease;
|
|
box-shadow: var(--shadow-inset);
|
|
font-family: inherit;
|
|
}
|
|
|
|
.form-input:focus {
|
|
border-color: var(--youth-primary);
|
|
background: var(--youth-bg-card);
|
|
}
|
|
|
|
.form-input::placeholder {
|
|
color: var(--youth-text-tertiary);
|
|
}
|
|
|
|
.form-input-hashtag {
|
|
position: absolute;
|
|
left: 14px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--youth-primary);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.form-input-hashtag + .form-input {
|
|
padding-left: 28px;
|
|
}
|
|
|
|
.form-input-counter {
|
|
position: absolute;
|
|
right: 14px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 11px;
|
|
color: var(--youth-text-tertiary);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.form-textarea {
|
|
width: 100%;
|
|
min-height: 80px;
|
|
padding: 12px 14px;
|
|
background: var(--youth-bg-page);
|
|
border: 1px solid var(--youth-border-light);
|
|
border-radius: var(--youth-radius-sm);
|
|
font-size: 14px;
|
|
color: var(--youth-text-primary);
|
|
outline: none;
|
|
resize: none;
|
|
transition: all 0.2s ease;
|
|
box-shadow: var(--shadow-inset);
|
|
font-family: inherit;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.form-textarea:focus {
|
|
border-color: var(--youth-primary);
|
|
background: var(--youth-bg-card);
|
|
}
|
|
|
|
.form-textarea::placeholder {
|
|
color: var(--youth-text-tertiary);
|
|
}
|
|
|
|
.textarea-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 6px;
|
|
font-size: 11px;
|
|
color: var(--youth-text-tertiary);
|
|
}
|
|
|
|
/* ===== 分类选择 ===== */
|
|
.category-select {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.category-option {
|
|
height: 32px;
|
|
padding: 0 14px;
|
|
border-radius: var(--youth-radius-full);
|
|
background: var(--youth-bg-page);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
color: var(--youth-text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: 1px solid var(--youth-border-light);
|
|
}
|
|
|
|
.category-option.selected {
|
|
background: linear-gradient(135deg, rgba(38,194,187,0.1), rgba(38,194,187,0.15));
|
|
color: var(--youth-primary);
|
|
border-color: var(--youth-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.category-option:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* ===== 封面上传 ===== */
|
|
.cover-upload {
|
|
width: 100%;
|
|
height: 120px;
|
|
border: 1.5px dashed var(--youth-border-light);
|
|
border-radius: var(--youth-radius-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
background: var(--youth-bg-page);
|
|
}
|
|
|
|
.cover-upload:active {
|
|
border-color: var(--youth-primary);
|
|
background: rgba(38, 194, 187, 0.03);
|
|
}
|
|
|
|
.cover-upload-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
color: var(--youth-text-tertiary);
|
|
}
|
|
|
|
.cover-upload-icon svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.cover-upload-text {
|
|
font-size: 12px;
|
|
color: var(--youth-text-tertiary);
|
|
}
|
|
|
|
.cover-upload-hint {
|
|
font-size: 10px;
|
|
color: var(--youth-text-tertiary);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ===== 提示条 ===== */
|
|
.notice-bar {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 12px 14px;
|
|
background: linear-gradient(135deg, rgba(38, 194, 187, 0.08), rgba(38, 194, 187, 0.04));
|
|
border-radius: var(--youth-radius-sm);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.notice-bar-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--youth-primary);
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.notice-bar-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.notice-bar-text {
|
|
font-size: 12px;
|
|
color: var(--youth-text-secondary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.notice-bar-text strong {
|
|
color: var(--youth-primary);
|
|
font-weight: 500;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- 状态栏 -->
|
|
<div class="status-bar">
|
|
<span>9:41</span>
|
|
<div class="right-icons">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9z"></path>
|
|
<path d="M5 12.55l2 2a7 7 0 0 1 10 0l2-2C15.14 9.14 8.87 9.14 5 12.55z"></path>
|
|
<path d="M8.5 16l3.5 3.5 3.5-3.5"></path>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="1" y="6" width="18" height="12" rx="2"></rect>
|
|
<line x1="23" y1="10" x2="23" y2="14"></line>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="7" width="18" height="12" rx="2"></rect>
|
|
<path d="M22 11V9a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2"></path>
|
|
<path d="M6 7V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 顶部导航栏 -->
|
|
<div class="top-nav">
|
|
<div class="nav-icon-btn" onclick="goBack()">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="15 18 9 12 15 6"></polyline>
|
|
</svg>
|
|
</div>
|
|
<div class="nav-title">发起话题</div>
|
|
<div class="nav-right-group">
|
|
<div class="nav-submit-btn" onclick="submitTopic()">发布</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 表单内容 -->
|
|
<div class="form-content">
|
|
<!-- 提示条 -->
|
|
<div class="notice-bar">
|
|
<div class="notice-bar-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="12" y1="16" x2="12" y2="12"></line>
|
|
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
|
</svg>
|
|
</div>
|
|
<div class="notice-bar-text">
|
|
话题名称不可与现有话题重复，提交后需<strong>人工审核</strong>通过后正式上线，审核周期约 24 小时。
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 基本信息 -->
|
|
<div class="form-section">
|
|
<div class="form-field">
|
|
<div class="form-label">
|
|
<span class="required">*</span>话题名称
|
|
</div>
|
|
<div class="form-input-wrap">
|
|
<span class="form-input-hashtag">#</span>
|
|
<input type="text" class="form-input" placeholder="请输入话题名称，2-15字" maxlength="15" id="topicNameInput" oninput="updateCharCount()">
|
|
<span class="form-input-counter" id="charCount">0/15</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<div class="form-label">
|
|
<span class="required">*</span>话题分类
|
|
</div>
|
|
<div class="category-select" id="categorySelect">
|
|
<div class="category-option" onclick="selectCategory(this)">校园日常</div>
|
|
<div class="category-option" onclick="selectCategory(this)">学习成长</div>
|
|
<div class="category-option" onclick="selectCategory(this)">美食探店</div>
|
|
<div class="category-option" onclick="selectCategory(this)">运动健身</div>
|
|
<div class="category-option" onclick="selectCategory(this)">音乐艺术</div>
|
|
<div class="category-option" onclick="selectCategory(this)">旅行出游</div>
|
|
<div class="category-option" onclick="selectCategory(this)">情感交友</div>
|
|
<div class="category-option" onclick="selectCategory(this)">社团活动</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<div class="form-label">
|
|
<span class="required">*</span>话题简介
|
|
</div>
|
|
<textarea class="form-textarea" placeholder="用一句话介绍这个话题，让更多同学感兴趣..." maxlength="50" oninput="updateDescCount()"></textarea>
|
|
<div class="textarea-footer" id="descCount">0/50</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 话题封面 -->
|
|
<div class="form-section">
|
|
<div class="form-field">
|
|
<div class="form-label">话题封面（选填）</div>
|
|
<div class="cover-upload" onclick="uploadCover()">
|
|
<div class="cover-upload-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
|
|
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
|
<polyline points="21 15 16 10 5 21"></polyline>
|
|
</svg>
|
|
</div>
|
|
<div class="cover-upload-text">上传话题封面图</div>
|
|
<div class="cover-upload-hint">建议尺寸 750×300px，支持 JPG/PNG</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function goBack() {
|
|
window.history.back();
|
|
}
|
|
|
|
function updateCharCount() {
|
|
const input = document.getElementById('topicNameInput');
|
|
const count = document.getElementById('charCount');
|
|
count.textContent = input.value.length + '/15';
|
|
}
|
|
|
|
function updateDescCount() {
|
|
const textarea = document.querySelector('.form-textarea');
|
|
const count = document.getElementById('descCount');
|
|
count.textContent = textarea.value.length + '/50';
|
|
}
|
|
|
|
function selectCategory(el) {
|
|
const options = document.querySelectorAll('.category-option');
|
|
options.forEach(function(o) { o.classList.remove('selected'); });
|
|
el.classList.add('selected');
|
|
}
|
|
|
|
function uploadCover() {
|
|
console.log('上传封面');
|
|
}
|
|
|
|
function submitTopic() {
|
|
const name = document.getElementById('topicNameInput').value.trim();
|
|
const category = document.querySelector('.category-option.selected');
|
|
const desc = document.querySelector('.form-textarea').value.trim();
|
|
|
|
if (!name) {
|
|
alert('请输入话题名称');
|
|
return;
|
|
}
|
|
if (name.length < 2) {
|
|
alert('话题名称至少2个字');
|
|
return;
|
|
}
|
|
if (!category) {
|
|
alert('请选择话题分类');
|
|
return;
|
|
}
|
|
if (!desc) {
|
|
alert('请填写话题简介');
|
|
return;
|
|
}
|
|
|
|
alert('话题已提交，审核通过后将正式上线');
|
|
window.history.back();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|