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.
626 lines
17 KiB
626 lines
17 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>
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
/* ============================================================
|
|
* 黑名单/举报反馈页面
|
|
* Traework 设计系统 - 仅浅色主题
|
|
* ============================================================ */
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'SF Pro Display', 'Helvetica Neue', sans-serif;
|
|
background: var(--youth-bg-page);
|
|
color: var(--youth-text-primary);
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ===== 手机容器 ===== */
|
|
.phone-container {
|
|
width: 375px;
|
|
height: 812px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
background: var(--youth-bg-page);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ===== 背景光晕装饰 ===== */
|
|
.bg-glow {
|
|
position: absolute;
|
|
top: -60px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 400px;
|
|
height: 400px;
|
|
background: radial-gradient(circle, rgba(38, 194, 187, 0.1) 0%, rgba(38, 194, 187, 0.03) 45%, transparent 70%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* ===== 状态栏 ===== */
|
|
.status-bar {
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
position: relative;
|
|
z-index: 10;
|
|
flex-shrink: 0;
|
|
color: var(--youth-text-primary);
|
|
}
|
|
|
|
.status-bar .right-icons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
/* ===== 顶部导航 ===== */
|
|
.top-nav {
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 10;
|
|
padding: 0 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-back {
|
|
position: absolute;
|
|
left: 16px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-back:active {
|
|
transform: translateY(-50%) scale(0.92);
|
|
background: var(--youth-bg-hover);
|
|
}
|
|
|
|
.nav-back svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--youth-text-primary);
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--youth-text-primary);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
/* ===== 内容区 ===== */
|
|
.scroll-content {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
/* ===== 成功图标区 ===== */
|
|
.success-icon-section {
|
|
padding-top: 24px;
|
|
padding-bottom: 16px;
|
|
position: relative;
|
|
z-index: 2;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.success-icon-wrap {
|
|
width: 72px;
|
|
height: 72px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.success-icon-circle {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: var(--youth-gradient-primary);
|
|
box-shadow:
|
|
0 12px 28px rgba(38, 194, 187, 0.3),
|
|
0 4px 10px rgba(38, 194, 187, 0.18),
|
|
inset 0 2px 4px rgba(255, 255, 255, 0.35),
|
|
inset 0 -2px 5px rgba(0, 0, 0, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
animation: successBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
.success-icon-circle::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 55%;
|
|
height: 30%;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 发光效果 */
|
|
.success-icon-glow {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(38, 194, 187, 0.25) 0%, rgba(38, 194, 187, 0.08) 45%, transparent 70%);
|
|
pointer-events: none;
|
|
animation: glowPulse 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes glowPulse {
|
|
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
|
|
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
|
|
}
|
|
|
|
.success-checkmark {
|
|
width: 36px;
|
|
height: 36px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.success-checkmark svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: drop-shadow(0 1.5px 3px rgba(0, 0, 0, 0.18));
|
|
}
|
|
|
|
@keyframes successBounce {
|
|
0% { transform: scale(0.3); opacity: 0; }
|
|
50% { transform: scale(1.08); }
|
|
75% { transform: scale(0.96); }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
/* ===== 标题区 ===== */
|
|
.title-section {
|
|
text-align: center;
|
|
padding: 0 12px 20px;
|
|
position: relative;
|
|
z-index: 2;
|
|
animation: fadeInUp 0.5s ease 0.15s both;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.main-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
letter-spacing: -0.02em;
|
|
color: var(--youth-text-primary);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.sub-title {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: var(--youth-text-tertiary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ===== 卡片通用样式 ===== */
|
|
.section-card {
|
|
background: var(--youth-bg-card);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--youth-border-lighter);
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.035);
|
|
padding: 14px 16px;
|
|
position: relative;
|
|
z-index: 2;
|
|
flex-shrink: 0;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--youth-text-primary);
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.card-title-icon {
|
|
width: 3px;
|
|
height: 14px;
|
|
border-radius: 12px;
|
|
background: var(--youth-gradient-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 卡片淡入动画 */
|
|
.fade-up-1 { animation: fadeInUp 0.5s ease 0.3s both; }
|
|
.fade-up-2 { animation: fadeInUp 0.5s ease 0.4s both; }
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(14px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ===== 举报信息列表 ===== */
|
|
.info-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.info-row + .info-row {
|
|
border-top: 1px solid var(--youth-border-lighter);
|
|
}
|
|
|
|
.info-row:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.info-row:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 13px;
|
|
color: var(--youth-text-tertiary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--youth-text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
/* 状态标签 */
|
|
.status-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
border-radius: 16px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
background: rgba(82, 196, 26, 0.1);
|
|
color: #52C41A;
|
|
}
|
|
|
|
.status-tag svg {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
/* ===== 处理说明 ===== */
|
|
.instruction-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.instruction-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
color: var(--youth-text-secondary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.instruction-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--youth-primary);
|
|
margin-top: 6px;
|
|
flex-shrink: 0;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ===== 底部操作区 ===== */
|
|
.bottom-actions {
|
|
padding: 12px 0 20px;
|
|
position: relative;
|
|
z-index: 2;
|
|
animation: fadeInUp 0.5s ease 0.5s both;
|
|
margin-top: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.youth-btn-primary {
|
|
width: 100%;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: var(--youth-gradient-primary);
|
|
color: white;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
box-shadow: 0 2px 8px rgba(38, 194, 187, 0.25);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.2s ease;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.youth-btn-primary::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50%;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%);
|
|
border-radius: 8px 8px 0 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.youth-btn-primary:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 1px 4px rgba(38, 194, 187, 0.2);
|
|
}
|
|
|
|
.btn-text-secondary {
|
|
width: 100%;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
color: var(--youth-text-tertiary);
|
|
border: none;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
transition: color 0.2s ease;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.btn-text-secondary:active {
|
|
color: var(--youth-primary);
|
|
}
|
|
|
|
/* SVG 图标统一尺寸 */
|
|
.icon-svg {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: middle;
|
|
line-height: 1;
|
|
}
|
|
.icon-svg svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
stroke: currentColor;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="phone-container">
|
|
<!-- 背景光晕 -->
|
|
<div class="bg-glow"></div>
|
|
|
|
<!-- 状态栏 -->
|
|
<div class="status-bar">
|
|
<span id="status-time">9:41</span>
|
|
<div class="right-icons">
|
|
<!-- 信号 -->
|
|
<svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor">
|
|
<rect x="0" y="8" width="3" height="4" rx="1" opacity="0.4"></rect>
|
|
<rect x="5" y="5" width="3" height="7" rx="1" opacity="0.6"></rect>
|
|
<rect x="10" y="2" width="3" height="10" rx="1" opacity="0.8"></rect>
|
|
<rect x="15" y="0" width="3" height="12" rx="1"></rect>
|
|
</svg>
|
|
<!-- WiFi -->
|
|
<svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor">
|
|
<path d="M8 10.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" opacity="1"></path>
|
|
<path d="M3.5 6.5a6 6 0 018.5 0" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" opacity="0.7"></path>
|
|
<path d="M1 3.5a9.5 9.5 0 0114 0" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" opacity="0.4"></path>
|
|
</svg>
|
|
<!-- 电池 -->
|
|
<svg width="26" height="12" viewBox="0 0 26 12" fill="none">
|
|
<rect x="0.5" y="0.5" width="22" height="11" rx="3" stroke="currentColor" opacity="0.5"></rect>
|
|
<rect x="2" y="2" width="19" height="8" rx="1.5" fill="currentColor"></rect>
|
|
<rect x="23.5" y="4" width="2" height="4" rx="1" fill="currentColor" opacity="0.5"></rect>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 顶部导航 -->
|
|
<div class="top-nav">
|
|
<div class="nav-back" onclick="handleBack()" data-dom-id="nav-back">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="15 18 9 12 15 6"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="nav-title">操作完成</span>
|
|
</div>
|
|
|
|
<!-- 内容区 -->
|
|
<div class="scroll-content">
|
|
<!-- 成功图标区 -->
|
|
<div class="success-icon-section" data-dom-id="success-icon">
|
|
<div class="success-icon-wrap">
|
|
<div class="success-icon-glow"></div>
|
|
<div class="success-icon-circle">
|
|
<div class="success-checkmark">
|
|
<svg viewBox="0 0 52 52" fill="none">
|
|
<path d="M14 27L22 35L38 19" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
<path d="M14 27L22 35L38 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.5" transform="translate(1, 1)"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 标题区 -->
|
|
<div class="title-section" data-dom-id="title-section">
|
|
<h1 class="main-title">已提交举报</h1>
|
|
<p class="sub-title">我们会在 24 小时内核实处理</p>
|
|
</div>
|
|
|
|
<!-- 举报信息卡片 -->
|
|
<div class="section-card fade-up-1" data-dom-id="report-info-card">
|
|
<div class="card-title">
|
|
<span class="card-title-icon"></span>
|
|
举报信息
|
|
</div>
|
|
<div class="info-list">
|
|
<div class="info-row">
|
|
<span class="info-label">被举报用户</span>
|
|
<span class="info-value">小 A 同学</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">举报类型</span>
|
|
<span class="info-value">骚扰行为</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">举报时间</span>
|
|
<span class="info-value">2026-06-02 14:30</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">证据状态</span>
|
|
<span class="info-value">
|
|
<span class="status-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
图片证据已提交
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 处理说明卡片 -->
|
|
<div class="section-card fade-up-2" data-dom-id="instruction-card">
|
|
<div class="card-title">
|
|
<span class="card-title-icon"></span>
|
|
处理说明
|
|
</div>
|
|
<div class="instruction-list">
|
|
<div class="instruction-item">
|
|
<span class="instruction-dot"></span>
|
|
<span>核实后将限制对方与你互动</span>
|
|
</div>
|
|
<div class="instruction-item">
|
|
<span class="instruction-dot"></span>
|
|
<span>严重违规账号将被限制登录</span>
|
|
</div>
|
|
<div class="instruction-item">
|
|
<span class="instruction-dot"></span>
|
|
<span>处理结果将通过系统通知反馈</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部操作区 -->
|
|
<div class="bottom-actions" data-dom-id="bottom-actions">
|
|
<button class="youth-btn-primary" data-dom-id="btn-done" onclick="handleDone()">
|
|
完成
|
|
</button>
|
|
<button class="btn-text-secondary" data-dom-id="btn-view-history" onclick="handleViewHistory()">
|
|
查看举报记录
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// ===== 按钮交互 =====
|
|
function handleBack() {
|
|
window.history.back();
|
|
}
|
|
|
|
function handleDone() {
|
|
window.history.back();
|
|
}
|
|
|
|
function handleViewHistory() {
|
|
// 跳转到举报历史页（待创建）
|
|
window.location.href = 'report-history.html';
|
|
}
|
|
|
|
// ===== 更新时间 =====
|
|
function updateTime() {
|
|
const now = new Date();
|
|
const hours = now.getHours().toString().padStart(2, '0');
|
|
const minutes = now.getMinutes().toString().padStart(2, '0');
|
|
document.getElementById('status-time').textContent = `${hours}:${minutes}`;
|
|
}
|
|
|
|
// ===== 初始化 =====
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateTime();
|
|
setInterval(updateTime, 60000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|