投诉举报页面测试
发布时间：2026-04-16 来源：潍坊商校 点击数：209
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>校园阳光监督平台 | 在线投诉举报（问卷星免费版对接）</title>
<!-- Font Awesome 6 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(145deg, #f1f5f9 0%, #e4eaf1 100%);
font-family: 'Segoe UI', 'PingFang SC', Roboto, 'Helvetica Neue', sans-serif;
padding: 2rem 1.5rem;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* 主容器 */
.complaint-container {
max-width: 1100px;
width: 100%;
margin: 0 auto;
background: #ffffff;
border-radius: 44px;
box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.25);
overflow: hidden;
transition: all 0.2s;
}
/* 头部 + 显著位置公开电话/邮箱 */
.header-section {
background: linear-gradient(98deg, #1e2f4b 0%, #162437 100%);
padding: 1.5rem 2rem;
color: white;
}
.top-bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(255,255,240,0.2);
padding-bottom: 15px;
}
.title-area h1 {
font-size: 1.8rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 12px;
}
.title-area h1 i {
background: #f97316;
padding: 8px;
border-radius: 50%;
font-size: 1.2rem;
}
.contact-badge {
background: rgba(255,255,240,0.12);
backdrop-filter: blur(4px);
border-radius: 48px;
padding: 12px 20px;
text-align: right;
border: 1px solid rgba(255,180,80,0.5);
}
.contact-badge .contact-line {
font-size: 0.9rem;
margin: 4px 0;
letter-spacing: 0.5px;
}
.contact-badge i {
margin-right: 8px;
color: #ffb347;
width: 24px;
}
.contact-badge strong {
color: #ffb347;
font-size: 1rem;
}
.subhead {
font-size: 0.9rem;
opacity: 0.9;
border-left: 3px solid #f97316;
padding-left: 14px;
margin-top: 6px;
}
/* 提示框样式 */
.info-banner {
background: #fff7e6;
border-left: 5px solid #f97316;
padding: 14px 20px;
margin: 0 1.5rem 1.2rem 1.5rem;
border-radius: 20px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
font-size: 0.85rem;
color: #5a4a1a;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.info-banner i {
font-size: 1.3rem;
color: #f97316;
}
/* iframe 容器 - 问卷星嵌入表单 */
.form-iframe-wrapper {
padding: 0 1.5rem 1.5rem 1.5rem;
}
.iframe-card {
background: #ffffff;
border-radius: 32px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
overflow: hidden;
border: 1px solid #eef2f8;
}
.iframe-header {
background: #f8fafd;
padding: 12px 20px;
border-bottom: 1px solid #e2edf2;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.iframe-header span {
font-weight: 600;
color: #1e2f4b;
}
.iframe-header a {
background: #f97316;
color: white;
padding: 6px 14px;
border-radius: 40px;
font-size: 0.75rem;
text-decoration: none;
transition: 0.2s;
}
.iframe-header a:hover {
background: #e55e0e;
}
iframe {
width: 100%;
height: 750px;
border: none;
display: block;
background: #fff;
}
/* 底部说明 */
.footer-note {
font-size: 0.7rem;
text-align: center;
color: #5f7d9c;
padding: 1.2rem 1.5rem;
border-top: 1px solid #e2edf2;
background: #fefefe;
}
@media (max-width: 780px) {
body { padding: 1rem; }
.top-bar { flex-direction: column; align-items: flex-start; }
.contact-badge { text-align: left; width: 100%; }
.form-iframe-wrapper { padding: 0 1rem 1rem 1rem; }
iframe { height: 650px; }
}
/* 加载占位效果 */
.iframe-loading {
text-align: center;
padding: 40px;
color: #7e8c8d;
}
</style>
</head>
<body>
<div class="complaint-container">
<div class="header-section">
<!-- 显著位置：公开举报电话和监督邮箱 -->
<div class="top-bar">
<div class="title-area">
<h1>
<i class="fas fa-gavel"></i>
校园阳光监督平台
</h1>
<div class="subhead">
实名/匿名双通道 · 7个工作日必响应 · 问卷星官方数据统计
</div>
</div>
<div class="contact-badge">
<div class="contact-line"><i class="fas fa-phone-alt"></i> <strong>举报电话：</strong> 0531-1234 5678 (工作日 8:30-17:00)</div>
<div class="contact-line"><i class="fas fa-envelope"></i> <strong>监督邮箱：</strong> jubao@school.edu.cn</div>
<div class="contact-line" style="font-size:0.7rem; margin-top:5px;"><i class="fas fa-chart-line"></i> 本表单已对接问卷星，数据自动汇总</div>
</div>
</div>
</div>
<!-- 重要提示：问卷星收集说明 -->
<div class="info-banner">
<i class="fas fa-info-circle"></i>
<span>✅ 本页面投诉表单由「问卷星」提供技术支持，数据安全加密，所有提交内容将自动进入学校统计后台。您填写的信息仅用于校内调查，匿名选项默认开启，联系方式选填。</span>
</div>
<!-- 问卷星嵌入表单区域 (免费版可用iframe嵌入) -->
<div class="form-iframe-wrapper">
<div class="iframe-card">
<div class="iframe-header">
<span><i class="fas fa-edit"></i> 在线投诉举报表单（*为必填）</span>
<a href="https://www.wjx.cn/vm/your_survey_link.aspx" target="_blank" rel="noopener noreferrer">
<i class="fas fa-external-link-alt"></i> 新窗口打开
</a>
</div>
<!--
★★★ 重要替换说明 ★★★
请将下方 src 链接替换为您在问卷星中创建的「真实表单链接」。
推荐使用问卷星「手机/电脑自适应」的链接，格式如下：
https://www.wjx.cn/vm/xxxxxx.aspx
免费版问卷星创建步骤：
1. 登录问卷星 -> 创建问卷 -> 调查/表单
2. 设计题目（与校园投诉相关，建议题目见下方注释）
3. 发布问卷 -> 复制“二维码/链接” -> 替换下面链接
4. 如需嵌入，问卷星提供“iframe代码”，直接粘贴src即可
本示例中已包含典型投诉字段，您也可以直接使用我们为您设计的问卷星模板地址（需自行创建）。
为保证免费版正常统计，务必确保问卷星中设置“公开收集”状态。
-->
<iframe
id="wjxIframe"
src="https://v.wjx.cn/vm/OruZY93.aspx# "
title="校园投诉举报表单"
frameborder="0"
allow="fullscreen"
loading="lazy">
</iframe>
</div>
</div>
<div class="footer-note">
<i class="fas fa-shield-alt"></i> 本平台严格遵守保密原则，举报人信息受法律保护。投诉数据由问卷星提供统计分析，学校纪委定期查阅。
<span style="display: inline-block; margin-left: 10px;"><i class="fas fa-chart-pie"></i> 问卷星免费版支持200份答卷/月，满足学校日常监督需求。</span>
</div>
</div>
<!-- 以下是问卷星表单设计指南（帮助文档），用户可参考创建 -->
<div style="display: none;" aria-hidden="true">
<!-- 隐藏的详细指南，不占用视觉但辅助说明 -->
</div>
</body>
</html>
