wuzilong
/
ajyy


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
  <meta name="format-detection" content="telephone=yes" />
  <title>安徽建工集团医院纪检室</title>
  <style>
    :root {
      --primary: #a51f23;
      --primary-dark: #8a1a1d;
      --primary-soft: #f8ecec;
      --gold: #c9a227;
      --ink: #1f1f1f;
      --muted: #8a8a8a;
      --line: #ececec;
      --bg: #f4f4f4;
      --card: #ffffff;
      --radius: 12px;
      --shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      --header-h: 48px;
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      height: 100%;
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
      background: #d8d4d0;
      color: var(--ink);
      -webkit-tap-highlight-color: transparent;
    }

    /* 桌面预览：居中手机框 */
    .device {
      width: 100%;
      max-width: 390px;
      min-height: 100vh;
      margin: 0 auto;
      background: var(--bg);
      position: relative;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
      overflow: hidden;
    }

    @media (min-width: 480px) {
      body { padding: 24px 0; }
      .device {
        min-height: 844px;
        height: 844px;
        border-radius: 28px;
        border: 1px solid #cfcbc7;
      }
    }

    .view {
      display: none;
      flex-direction: column;
      height: 100%;
      min-height: 100vh;
      position: absolute;
      inset: 0;
      background: var(--bg);
      overflow: hidden;
    }

    @media (min-width: 480px) {
      .view { min-height: 0; }
    }

    .view.active { display: flex; }

    /* ===== Header ===== */
    .app-header {
      height: var(--header-h);
      background: var(--primary);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex-shrink: 0;
      z-index: 10;
    }

    .app-header .title {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: 0.06em;
    }

    .app-header .back {
      position: absolute;
      left: 8px;
      top: 0;
      height: 100%;
      width: 44px;
      border: 0;
      background: transparent;
      color: #fff;
      font-size: 22px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .app-header .action {
      position: absolute;
      right: 12px;
      top: 0;
      height: 100%;
      border: 0;
      background: transparent;
      color: #fff;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
    }

    /* ===== Scroll body ===== */
    .scroll {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: calc(20px + var(--safe-bottom));
    }

    /* ===== Home ===== */
    .home-scroll {
      position: relative;
      background: #f5f5f5;
    }

    /* 顶部建筑背景：通栏铺满，底部淡出 */
    .home-scroll::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 320px;
      background: url("ajyy.jpeg") center 30% / cover no-repeat;
      opacity: 0.1;
      pointer-events: none;
      z-index: 0;
      -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    }

    .home-scroll::after {
      display: none;
    }

    .home-hero {
      position: relative;
      padding: 26px 20px 18px;
      text-align: center;
      z-index: 1;
    }

    .logo-wrap {
      width: 128px;
      height: 128px;
      margin: 0 auto 12px;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    .logo-wrap img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .brand-title {
      font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
      font-size: 26px;
      font-weight: 900;
      color: var(--primary);
      letter-spacing: 0.14em;
      position: relative;
      z-index: 1;
      -webkit-text-stroke: 0.4px var(--primary);
      text-stroke: 0.4px var(--primary);
    }

    .brand-motto {
      margin: 12px auto 0;
      max-width: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 13px;
      color: #888;
      letter-spacing: 0.22em;
      position: relative;
      z-index: 1;
    }

    .brand-motto::before,
    .brand-motto::after {
      content: "";
      flex: 1;
      height: 1px;
      max-width: 56px;
    }

    .brand-motto::before {
      background: linear-gradient(90deg, transparent, rgba(140, 140, 140, 0.75));
    }

    .brand-motto::after {
      background: linear-gradient(90deg, rgba(140, 140, 140, 0.75), transparent);
    }

    .brand-motto span { margin: 0 4px; color: #c8c8c8; letter-spacing: 0; }

    .nav-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      padding: 6px 12px 0;
      position: relative;
      z-index: 1;
    }

    .nav-card {
      background: var(--card);
      border-radius: 10px;
      box-shadow: var(--shadow);
      padding: 14px 4px 12px;
      text-align: center;
      border: 0;
      cursor: pointer;
      font-family: inherit;
      color: inherit;
      transition: transform 0.15s, box-shadow 0.15s;
    }

    .nav-card:active {
      transform: scale(0.97);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .nav-icon {
      width: 40px;
      height: 40px;
      margin: 0 auto 10px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav-icon svg { width: 20px; height: 20px; fill: currentColor; }

    .nav-card h3 {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 6px;
      letter-spacing: -0.02em;
    }

    .nav-card .divider {
      width: 14px;
      height: 2px;
      background: var(--primary);
      margin: 0 auto 6px;
      border-radius: 2px;
    }

    .nav-card p {
      font-size: 10px;
      color: var(--muted);
      line-height: 1.45;
    }

    .mission-banner {
      margin: 16px 14px 0;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      z-index: 1;
      background: #fff;
    }

    .mission-banner img {
      display: block;
      width: 100%;
      height: auto;
      vertical-align: top;
    }

    /* ===== Forms ===== */
    .form-section {
      margin: 12px 14px 0;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .form-section .sec-title {
      padding: 12px 14px 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .form-section .sec-title::before {
      content: "";
      width: 3px;
      height: 12px;
      background: var(--primary);
      border-radius: 2px;
    }

    .field {
      display: flex;
      align-items: center;
      padding: 0 14px;
      min-height: 48px;
      border-top: 1px solid var(--line);
      gap: 12px;
    }

    .field:first-of-type { border-top: 0; }

    .field.top {
      align-items: flex-start;
      padding-top: 12px;
      padding-bottom: 12px;
    }

    .field label {
      width: 72px;
      flex-shrink: 0;
      font-size: 14px;
      color: #333;
    }

    .field label .req {
      color: var(--primary);
      margin-right: 2px;
    }

    .field input,
    .field textarea,
    .field select {
      flex: 1;
      border: 0;
      outline: none;
      font-size: 14px;
      font-family: inherit;
      color: var(--ink);
      background: transparent;
      width: 100%;
      resize: none;
    }

    .field input::placeholder,
    .field textarea::placeholder { color: #bbb; }

    .field textarea { min-height: 100px; line-height: 1.6; }

    .type-switch {
      display: flex;
      gap: 10px;
      flex: 1;
    }

    .type-switch label {
      width: auto;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 36px;
      border-radius: 8px;
      border: 1px solid var(--line);
      font-size: 14px;
      cursor: pointer;
      background: #fafafa;
      color: #666;
      transition: all 0.15s;
    }

    .type-switch input { display: none; }

    .type-switch label.active,
    .type-switch input:checked + span {
      /* handled via JS class on label */
    }

    .type-switch label.on {
      border-color: var(--primary);
      background: var(--primary-soft);
      color: var(--primary);
      font-weight: 600;
    }

    .upload-area {
      padding: 12px 14px 16px;
      border-top: 1px solid var(--line);
    }

    .upload-hint {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 10px;
    }

    .upload-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .upload-item,
    .upload-add {
      width: 72px;
      height: 72px;
      border-radius: 8px;
      position: relative;
    }

    .upload-add {
      border: 1px dashed #ccc;
      background: #fafafa;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      cursor: pointer;
      color: #999;
      font-size: 11px;
    }

    .upload-add span { font-size: 28px; line-height: 1; color: #bbb; font-weight: 300; }

    .upload-item {
      background: #eee;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: #666;
      text-align: center;
      padding: 4px;
    }

    .upload-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .upload-item .rm {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      border: 0;
      font-size: 12px;
      line-height: 18px;
      cursor: pointer;
    }

    .submit-bar {
      padding: 16px 14px 8px;
    }

    .btn-primary {
      width: 100%;
      height: 46px;
      border: 0;
      border-radius: 23px;
      background: var(--primary);
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.1em;
      cursor: pointer;
      font-family: inherit;
    }

    .btn-primary:active { background: var(--primary-dark); }
    .btn-primary:disabled {
      background: #ccc;
      cursor: not-allowed;
    }

    .btn-ghost {
      width: 100%;
      height: 44px;
      border: 1px solid var(--primary);
      border-radius: 22px;
      background: #fff;
      color: var(--primary);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      margin-top: 10px;
    }

    /* ===== Notice ===== */
    .notice-body {
      padding: 20px 18px;
    }

    .notice-card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 20px 18px;
    }

    .notice-card h2 {
      text-align: center;
      font-size: 18px;
      color: var(--primary);
      margin-bottom: 16px;
      letter-spacing: 0.08em;
    }

    .notice-card .notice-list {
      font-size: 14px;
      line-height: 1.85;
      color: #444;
    }

    .notice-card .notice-list li {
      margin-left: 1.2em;
      margin-bottom: 8px;
    }

    .notice-card .emphasize {
      margin-top: 14px;
      padding: 12px;
      background: var(--primary-soft);
      border-radius: 8px;
      font-size: 13px;
      color: var(--primary);
      line-height: 1.7;
    }

    .countdown-tip {
      text-align: center;
      margin-top: 20px;
      font-size: 14px;
      color: var(--muted);
    }

    .countdown-tip b {
      color: var(--primary);
      font-size: 20px;
      margin: 0 4px;
    }

    /* ===== Hotline ===== */
    .hotline-hero {
      text-align: center;
      padding: 24px 20px 8px;
    }

    .hotline-hero .icon-big {
      width: 64px;
      height: 64px;
      margin: 0 auto 12px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hotline-hero .icon-big svg { width: 30px; height: 30px; fill: currentColor; }

    .hotline-hero h2 {
      font-size: 18px;
      color: var(--primary);
      letter-spacing: 0.08em;
    }

    .hotline-hero p {
      margin-top: 6px;
      font-size: 13px;
      color: var(--muted);
    }

    .info-list {
      margin: 16px 14px 0;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .info-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px 14px;
      border-top: 1px solid var(--line);
      text-decoration: none;
      color: inherit;
    }

    .info-item:first-child { border-top: 0; }

    .info-item .ii {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: var(--primary-soft);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .info-item .ii svg { width: 20px; height: 20px; fill: currentColor; }

    .info-item .meta { flex: 1; min-width: 0; }
    .info-item .meta small {
      display: block;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .info-item .meta strong {
      display: block;
      font-size: 15px;
      font-weight: 600;
      word-break: break-all;
    }

    .info-item.tel strong { color: var(--primary); }
    .info-item .arrow {
      color: #ccc;
      font-size: 18px;
      align-self: center;
    }

    .work-time {
      margin: 14px 14px 0;
      padding: 12px 14px;
      background: #fff8e8;
      border-radius: 8px;
      font-size: 13px;
      color: #8a6d1d;
      line-height: 1.6;
    }

    /* ===== Overlay / Modal ===== */
    .overlay {
      display: none;
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      z-index: 100;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .overlay.show { display: flex; }

    .modal {
      background: #fff;
      border-radius: 16px;
      width: 100%;
      max-width: 320px;
      padding: 24px 20px 20px;
      text-align: center;
      animation: pop 0.22s ease;
    }

    @keyframes pop {
      from { transform: scale(0.92); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    .modal h3 {
      font-size: 17px;
      color: var(--primary);
      margin-bottom: 6px;
      letter-spacing: 0.06em;
    }

    .modal .sub {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 16px;
    }

    .qr-box {
      width: 200px;
      height: 200px;
      margin: 0 auto 14px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .qr-box canvas { width: 180px; height: 180px; }

    .qr-logo {
      position: absolute;
      width: 36px;
      height: 36px;
      border-radius: 6px;
      background: #fff;
      padding: 3px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }

    .qr-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .toast {
      position: absolute;
      left: 50%;
      bottom: 100px;
      transform: translateX(-50%) translateY(20px);
      background: rgba(0, 0, 0, 0.78);
      color: #fff;
      padding: 10px 18px;
      border-radius: 20px;
      font-size: 13px;
      opacity: 0;
      pointer-events: none;
      transition: all 0.25s;
      z-index: 200;
      white-space: nowrap;
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .page-hint {
      text-align: center;
      padding: 14px 12px 8px;
      font-size: 11px;
      color: #aaa;
      position: relative;
      z-index: 1;
    }

    .demo-nav {
      position: fixed;
      top: 8px;
      right: 8px;
      z-index: 999;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 11px;
      padding: 6px 10px;
      border-radius: 8px;
      max-width: 140px;
      line-height: 1.5;
      display: none;
    }

    @media (min-width: 480px) {
      .demo-nav { display: block; }
    }
  </style>
</head>
<body>
  <div class="device" id="app">
    <!-- ========== 首页 ========== -->
    <section class="view active" id="view-home" data-title="首页">
      <header class="app-header">
        <div class="title">安徽建工集团医院纪检室</div>
      </header>
      <div class="scroll home-scroll">
        <div class="home-hero">
          <div class="logo-wrap">
            <img src="logo1.png" alt="安徽建工" />
          </div>
          <h1 class="brand-title">安建医院纪检</h1>
          <p class="brand-motto">忠诚<span>|</span>干净<span>|</span>担当</p>
        </div>

        <div class="nav-grid">
          <button class="nav-card" type="button" onclick="startFeedback()">
            <div class="nav-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 6h2v6h-2V7zm0 8h2v2h-2v-2z"/></svg>
            </div>
            <h3>在线反馈</h3>
            <div class="divider"></div>
            <p>投诉表扬<br />有序反馈</p>
          </button>

          <button class="nav-card" type="button" onclick="go('suggest')">
            <div class="nav-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z"/></svg>
            </div>
            <h3>建言献策</h3>
            <div class="divider"></div>
            <p>建言献策<br />促进完善</p>
          </button>

          <button class="nav-card" type="button" onclick="go('hotline')">
            <div class="nav-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.4 21 3 13.6 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.02l-2.2 2.19z"/></svg>
            </div>
            <h3>监督热线</h3>
            <div class="divider"></div>
            <p>倾听诉求<br />及时回应</p>
          </button>

          <button class="nav-card" type="button" onclick="showShare()">
            <div class="nav-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24"><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zm8-2v8h8V3h-8zm6 6h-4V5h4v4zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm10 2h2v2h-2zm4-2h-4v4h2v-2h2v-2zm-2-2h2v2h-2zm4 6h-2v2h4v-4h-2z"/></svg>
            </div>
            <h3>扫码分享</h3>
            <div class="divider"></div>
            <p>生成二维码<br />转发分享</p>
          </button>
        </div>

        <div class="mission-banner">
          <img src="assets/home-banner.png" alt="严格监督执纪 护航医院发展" />
        </div>

        <p class="page-hint">扫码即可反馈 · 支持匿名 · 信息严格保密</p>
      </div>
    </section>

    <!-- ========== 反馈须知 ========== -->
    <section class="view" id="view-notice" data-title="反馈须知">
      <header class="app-header">
        <button class="back" type="button" onclick="go('home')" aria-label="返回">‹</button>
        <div class="title">反馈须知</div>
      </header>
      <div class="scroll no-tab">
        <div class="notice-body">
          <div class="notice-card">
            <h2>在线反馈须知</h2>
            <ol class="notice-list">
              <li>请如实反映情况，对所提供信息的真实性负责。</li>
              <li>反馈内容应客观具体，尽量写明时间、地点、人物及相关事实。</li>
              <li>可上传图片、视频或文件作为佐证材料，支持多附件。</li>
              <li>举报人信息为选填，可匿名反馈；若留联系方式，便于核实回访。</li>
              <li>纪检室将对反馈信息严格保密，依法依规办理。</li>
              <li>禁止恶意诬告、捏造事实，违者将依法追究责任。</li>
            </ol>
            <div class="emphasize">
              温馨提示：反馈类型可选「投诉」或「表扬」。反馈内容为必填项，其他信息均可选填。
            </div>
          </div>
          <p class="countdown-tip">请仔细阅读须知，<b id="countdown">5</b> 秒后进入反馈页面</p>
          <div class="submit-bar" style="padding-top: 8px;">
            <button class="btn-primary" id="btn-enter-feedback" type="button" disabled onclick="go('feedback')">
              请阅读须知（5s）
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- ========== 在线反馈 ========== -->
    <section class="view" id="view-feedback" data-title="在线反馈">
      <header class="app-header">
        <button class="back" type="button" onclick="go('home')" aria-label="返回">‹</button>
        <div class="title">在线反馈</div>
      </header>
      <div class="scroll no-tab">
        <form id="form-feedback" onsubmit="return submitFeedback(event)">
          <div class="form-section">
            <div class="sec-title">反馈类型</div>
            <div class="field">
              <label><span class="req">*</span>类型</label>
              <div class="type-switch" id="feedback-type">
                <label class="on" data-value="投诉">
                  <input type="radio" name="ftype" value="投诉" checked />
                  投诉
                </label>
                <label data-value="表扬">
                  <input type="radio" name="ftype" value="表扬" />
                  表扬
                </label>
              </div>
            </div>
          </div>

          <div class="form-section">
            <div class="sec-title">被反馈人信息（选填）</div>
            <div class="field">
              <label>姓名</label>
              <input type="text" name="targetName" placeholder="请输入被反馈人姓名" />
            </div>
            <div class="field">
              <label>单位</label>
              <input type="text" name="targetUnit" placeholder="请输入所在单位/科室" />
            </div>
            <div class="field">
              <label>职务</label>
              <input type="text" name="targetPost" placeholder="请输入职务" />
            </div>
          </div>

          <div class="form-section">
            <div class="sec-title">反馈内容</div>
            <div class="field top">
              <label><span class="req">*</span>内容</label>
              <textarea name="content" id="feedback-content" placeholder="请客观、具体描述相关情况（必填）" required></textarea>
            </div>
            <div class="upload-area">
              <div class="upload-hint">反馈材料（选填）· 支持图片、视频、文件，可多选</div>
              <div class="upload-list" id="feedback-files">
                <label class="upload-add">
                  <span>+</span>
                  上传
                  <input type="file" hidden multiple accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.zip" onchange="addFiles(event, 'feedback-files')" />
                </label>
              </div>
            </div>
          </div>

          <div class="form-section">
            <div class="sec-title">举报人信息（选填）</div>
            <div class="field">
              <label>姓名</label>
              <input type="text" name="reporterName" placeholder="可匿名，选填" />
            </div>
            <div class="field">
              <label>单位</label>
              <input type="text" name="reporterUnit" placeholder="请输入单位" />
            </div>
            <div class="field">
              <label>职务</label>
              <input type="text" name="reporterPost" placeholder="请输入职务" />
            </div>
            <div class="field">
              <label>联系方式</label>
              <input type="tel" name="reporterPhone" placeholder="手机号 / 微信等" />
            </div>
          </div>

          <div class="submit-bar">
            <button class="btn-primary" type="submit">提交反馈</button>
          </div>
        </form>
      </div>
    </section>

    <!-- ========== 建言献策 ========== -->
    <section class="view" id="view-suggest" data-title="建言献策">
      <header class="app-header">
        <button class="back" type="button" onclick="go('home')" aria-label="返回">‹</button>
        <div class="title">建言献策</div>
      </header>
      <div class="scroll no-tab">
        <form id="form-suggest" onsubmit="return submitSuggest(event)">
          <div class="form-section">
            <div class="sec-title">建议内容</div>
            <div class="field top">
              <label><span class="req">*</span>内容</label>
              <textarea name="content" id="suggest-content" placeholder="请填写您的意见或建议（必填）" required></textarea>
            </div>
            <div class="upload-area">
              <div class="upload-hint">附件（选填）· 支持图片、视频、文件，可多选</div>
              <div class="upload-list" id="suggest-files">
                <label class="upload-add">
                  <span>+</span>
                  上传
                  <input type="file" hidden multiple accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.zip" onchange="addFiles(event, 'suggest-files')" />
                </label>
              </div>
            </div>
          </div>

          <div class="form-section">
            <div class="sec-title">联系人信息（选填）</div>
            <div class="field">
              <label>姓名</label>
              <input type="text" name="name" placeholder="可匿名，选填" />
            </div>
            <div class="field">
              <label>单位</label>
              <input type="text" name="unit" placeholder="请输入单位" />
            </div>
            <div class="field">
              <label>职务</label>
              <input type="text" name="post" placeholder="请输入职务" />
            </div>
            <div class="field">
              <label>联系方式</label>
              <input type="tel" name="phone" placeholder="手机号 / 微信等" />
            </div>
          </div>

          <div class="submit-bar">
            <button class="btn-primary" type="submit">提交建议</button>
          </div>
        </form>
      </div>
    </section>

    <!-- ========== 监督热线 ========== -->
    <section class="view" id="view-hotline" data-title="监督热线">
      <header class="app-header">
        <button class="back" type="button" onclick="go('home')" aria-label="返回">‹</button>
        <div class="title">监督热线</div>
      </header>
      <div class="scroll no-tab">
        <div class="hotline-hero">
          <div class="icon-big">
            <svg viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.4 21 3 13.6 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.02l-2.2 2.19z"/></svg>
          </div>
          <h2>监督举报热线</h2>
          <p>倾听诉求 · 及时回应 · 严格保密</p>
        </div>

        <div class="info-list">
          <a class="info-item tel" href="tel:0551-XXXXXXXX">
            <div class="ii">
              <svg viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.4 21 3 13.6 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.02l-2.2 2.19z"/></svg>
            </div>
            <div class="meta">
              <small>监督电话（点击拨打）</small>
              <strong>0551-XXXXXXXX</strong>
            </div>
            <div class="arrow">›</div>
          </a>
          <a class="info-item" href="mailto:jjb@ajyy.example.com">
            <div class="ii">
              <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
            </div>
            <div class="meta">
              <small>电子邮箱</small>
              <strong>jjb@ajyy.example.com</strong>
            </div>
            <div class="arrow">›</div>
          </a>
          <div class="info-item">
            <div class="ii">
              <svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/></svg>
            </div>
            <div class="meta">
              <small>通讯地址</small>
              <strong>安徽省合肥市 · 安徽建工集团医院纪检室（示例地址，落地时替换）</strong>
            </div>
          </div>
        </div>

        <div class="work-time">
          受理时间：工作日 08:30–11:30、14:30–17:30<br />
          紧急事项可通过电话随时联系值班人员。
        </div>

        <div class="submit-bar">
          <button class="btn-primary" type="button" onclick="startFeedback()">去在线反馈</button>
        </div>
      </div>
    </section>

    <!-- 扫码分享弹层 -->
    <div class="overlay" id="share-overlay" onclick="hideShare(event)">
      <div class="modal" onclick="event.stopPropagation()">
        <h3>扫码分享</h3>
        <p class="sub">长按或截图保存二维码，发给同事扫码反馈</p>
        <div class="qr-box">
          <canvas id="qr-canvas" width="180" height="180"></canvas>
          <div class="qr-logo"><img src="logo1.png" alt="" /></div>
        </div>
        <p class="sub" id="share-url" style="word-break: break-all; margin-bottom: 12px;"></p>
        <button class="btn-primary" type="button" onclick="hideShare()">关闭</button>
      </div>
    </div>

    <div class="toast" id="toast"></div>
  </div>

  <script>
    /* ---------- 简易二维码（无第三方依赖，适合方案演示） ---------- */
    function drawDemoQR(canvas, text) {
      const ctx = canvas.getContext("2d");
      const size = canvas.width;
      const cells = 25;
      const cell = size / cells;
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, size, size);

      // 伪随机但稳定的图案（基于文本 hash）
      let h = 0;
      for (let i = 0; i < text.length; i++) h = (h * 31 + text.charCodeAt(i)) >>> 0;
      function bit(x, y) {
        if (x < 7 && y < 7) return finder(x, y);
        if (x >= cells - 7 && y < 7) return finder(x - (cells - 7), y);
        if (x < 7 && y >= cells - 7) return finder(x, y - (cells - 7));
        const n = (h ^ (x * 73856093) ^ (y * 19349663)) >>> 0;
        return (n % 3) !== 0;
      }
      function finder(x, y) {
        const onBorder = x === 0 || y === 0 || x === 6 || y === 6;
        const inCenter = x >= 2 && x <= 4 && y >= 2 && y <= 4;
        return onBorder || inCenter;
      }
      ctx.fillStyle = "#1a1a1a";
      for (let y = 0; y < cells; y++) {
        for (let x = 0; x < cells; x++) {
          if (bit(x, y)) ctx.fillRect(x * cell, y * cell, Math.ceil(cell), Math.ceil(cell));
        }
      }
    }

    let countdownTimer = null;

    function go(name) {
      document.querySelectorAll(".view").forEach((v) => v.classList.remove("active"));
      const el = document.getElementById("view-" + name);
      if (el) el.classList.add("active");
      if (name !== "notice" && countdownTimer) {
        clearInterval(countdownTimer);
        countdownTimer = null;
      }
      window.scrollTo(0, 0);
    }

    function startFeedback() {
      go("notice");
      startCountdown();
    }

    function startCountdown() {
      let n = 5;
      const btn = document.getElementById("btn-enter-feedback");
      const num = document.getElementById("countdown");
      btn.disabled = true;
      btn.textContent = "请阅读须知（" + n + "s）";
      num.textContent = n;
      if (countdownTimer) clearInterval(countdownTimer);
      countdownTimer = setInterval(() => {
        n -= 1;
        num.textContent = n;
        if (n <= 0) {
          clearInterval(countdownTimer);
          countdownTimer = null;
          btn.disabled = false;
          btn.textContent = "我已阅读，进入反馈";
          num.textContent = "0";
        } else {
          btn.textContent = "请阅读须知（" + n + "s）";
        }
      }, 1000);
    }

    // 反馈类型切换
    document.querySelectorAll("#feedback-type label").forEach((lab) => {
      lab.addEventListener("click", () => {
        document.querySelectorAll("#feedback-type label").forEach((l) => l.classList.remove("on"));
        lab.classList.add("on");
        lab.querySelector("input").checked = true;
      });
    });

    function addFiles(event, listId) {
      const list = document.getElementById(listId);
      const files = Array.from(event.target.files || []);
      files.forEach((file) => {
        const item = document.createElement("div");
        item.className = "upload-item";
        const rm = document.createElement("button");
        rm.type = "button";
        rm.className = "rm";
        rm.textContent = "×";
        rm.onclick = () => item.remove();

        if (file.type.startsWith("image/")) {
          const img = document.createElement("img");
          img.src = URL.createObjectURL(file);
          item.appendChild(img);
        } else {
          item.textContent = file.name.length > 10 ? file.name.slice(0, 8) + "…" : file.name;
        }
        item.appendChild(rm);
        list.insertBefore(item, list.querySelector(".upload-add"));
      });
      event.target.value = "";
    }

    function toast(msg) {
      const t = document.getElementById("toast");
      t.textContent = msg;
      t.classList.add("show");
      setTimeout(() => t.classList.remove("show"), 2200);
    }

    function submitFeedback(e) {
      e.preventDefault();
      const content = document.getElementById("feedback-content").value.trim();
      if (!content) {
        toast("请填写反馈内容");
        return false;
      }
      toast("提交成功（演示）");
      setTimeout(() => go("home"), 1200);
      return false;
    }

    function submitSuggest(e) {
      e.preventDefault();
      const content = document.getElementById("suggest-content").value.trim();
      if (!content) {
        toast("请填写建议内容");
        return false;
      }
      toast("提交成功（演示）");
      setTimeout(() => go("home"), 1200);
      return false;
    }

    function showShare() {
      let url = location.href.split("#")[0].split("?")[0];
      if (url.startsWith("file:")) url = "https://jjb.ajyy.example.com";
      document.getElementById("share-url").textContent = url;
      drawDemoQR(document.getElementById("qr-canvas"), url);
      document.getElementById("share-overlay").classList.add("show");
    }

    function hideShare(e) {
      if (e && e.target !== e.currentTarget && e.type === "click" && !e.target.classList.contains("overlay")) {
        /* allow modal close via button */
      }
      document.getElementById("share-overlay").classList.remove("show");
    }

    // 支持 hash 直达，方便方案文档截图：#notice #feedback #suggest #hotline #share
    function applyHash() {
      const h = (location.hash || "").replace("#", "");
      if (h === "share") {
        go("home");
        setTimeout(showShare, 100);
      } else if (h === "notice" || h === "feedback") {
        startFeedback();
        if (h === "feedback") {
          // 演示截图可跳过等待
          setTimeout(() => {
            if (countdownTimer) clearInterval(countdownTimer);
            document.getElementById("btn-enter-feedback").disabled = false;
            document.getElementById("btn-enter-feedback").textContent = "我已阅读，进入反馈";
            go("feedback");
          }, 50);
        }
      } else if (["home", "suggest", "hotline"].includes(h)) {
        go(h);
      }
    }
    window.addEventListener("hashchange", applyHash);
    applyHash();
  </script>
</body>
</html>