r104/style.css · 约 10264 字符
1/* 小草问卷调查 H5 —— 绿紫主题 */2* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }3html, body { margin: 0; padding: 0; background: #f3f5f9; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: #1f2733; }4.app { max-width: 430px; margin: 0 auto; min-height: 100vh; background: #f3f5f9; position: relative; padding-bottom: 64px; }56/* 顶部栏 */7.top { position: sticky; top: 0; z-index: 20; background: linear-gradient(135deg, #15c39a, #1aa6e8); color: #fff; padding: 14px 16px 12px; }8.top .row { display: flex; align-items: center; justify-content: space-between; }9.top h1 { font-size: 18px; margin: 0; font-weight: 800; }10.top .sub { font-size: 12px; opacity: .9; margin-top: 2px; }11.top .iconbtn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 17px; }12.innTop { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid #eee; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }13.innTop .back { font-size: 20px; color: #15a07e; cursor: pointer; }14.innTop .t { font-size: 16px; font-weight: 700; }1516/* 搜索 */17.search { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.22); border-radius: 18px; padding: 8px 14px; margin-top: 12px; color: #fff; }18.search input { flex: 1; border: 0; background: transparent; color: #fff; font-size: 14px; outline: none; }19.search input::placeholder { color: rgba(255,255,255,.85); }2021/* 卡片 */22.card { background: #fff; border-radius: 14px; padding: 14px; margin: 12px; box-shadow: 0 2px 10px rgba(20,40,80,.05); }23.card.nb { margin: 10px 12px; }24.section-t { font-size: 15px; font-weight: 800; margin: 16px 16px 4px; display: flex; align-items: center; justify-content: space-between; }25.section-t .more { font-size: 12px; color: #15a07e; font-weight: 600; }2627/* 首页统计 */28.stats { display: flex; gap: 10px; margin: 12px; }29.stats .st { flex: 1; background: linear-gradient(135deg, #fff, #f0fbf8); border: 1px solid #e3f5f0; border-radius: 14px; padding: 12px; text-align: center; }30.stats .st b { font-size: 22px; color: #15a07e; display: block; }31.stats .st span { font-size: 11px; color: #7a8699; }3233/* 分类九宫格 */34.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px; }35.cats .c { background: #fff; border-radius: 14px; padding: 12px 6px; text-align: center; box-shadow: 0 2px 8px rgba(20,40,80,.05); }36.cats .c .ic { font-size: 24px; }37.cats .c .lb { font-size: 11px; margin-top: 6px; color: #445; }3839/* 问卷卡 */40.qcard { display: flex; gap: 12px; align-items: stretch; }41.qcard .thumb { width: 76px; height: 76px; border-radius: 12px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; }42.qcard .info { flex: 1; min-width: 0; }43.qcard .info .ti { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }44.qcard .info .de { font-size: 12px; color: #8a93a3; margin-top: 4px; line-height: 1.4; height: 34px; overflow: hidden; }45.tags { margin-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; }46.tags span { font-size: 10px; color: #15a07e; background: #eafaf5; padding: 2px 7px; border-radius: 8px; }47.qcard .meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; color: #9aa3b0; }48.qcard .meta .rew { color: #ff8a00; font-weight: 700; }4950/* 按钮 */51.btn { background: linear-gradient(135deg, #15c39a, #1aa6e8); color: #fff; text-align: center; padding: 13px; border-radius: 26px; font-weight: 700; font-size: 15px; margin: 12px; cursor: pointer; }52.btn.ghost { background: #eafaf5; color: #15a07e; }53.btn.orange { background: linear-gradient(135deg, #ff9a3c, #ff6a3c); }54.btn.sm { display: inline-block; padding: 7px 16px; font-size: 13px; border-radius: 18px; margin: 0; }5556/* 进度条 */57.prog { height: 6px; background: #eef1f6; border-radius: 4px; overflow: hidden; margin-top: 8px; }58.prog > i { display: block; height: 100%; background: linear-gradient(90deg, #15c39a, #1aa6e8); border-radius: 4px; }5960/* 题目 */61.q { margin: 12px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 2px 8px rgba(20,40,80,.05); }62.q .qt { font-weight: 700; font-size: 15px; }63.q .qt .num { color: #15a07e; margin-right: 6px; }64.q .qt .req { color: #ff5252; margin-left: 4px; }65.opt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-top: 8px; border: 1px solid #eceff4; border-radius: 10px; font-size: 14px; cursor: pointer; }66.opt.sel { border-color: #15c39a; background: #f0fbf8; color: #15a07e; font-weight: 600; }67.opt .dot { width: 18px; height: 18px; border: 2px solid #cdd4df; border-radius: 50%; flex: 0 0 auto; }68.opt.sel .dot { border-color: #15c39a; background: #15c39a; box-shadow: inset 0 0 0 3px #fff; }69.opt .box { border-radius: 4px; }70.opt.sel .box { border-radius: 4px; background: #15c39a; border-color: #15c39a; }7172/* 完成页 */73.done { text-align: center; padding: 56px 24px; }74.done .circle { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, #15c39a, #1aa6e8); color: #fff; font-size: 44px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }75.done h2 { margin: 6px 0; font-size: 20px; }76.done p { color: #8a93a3; font-size: 13px; }7778/* 表单 */79.field { margin: 12px; }80.field label { font-size: 13px; color: #667; font-weight: 600; display: block; margin-bottom: 6px; }81.field input, .field textarea, .field select { width: 100%; border: 1px solid #e3e8f0; border-radius: 10px; padding: 11px 12px; font-size: 14px; outline: none; background: #fff; font-family: inherit; }82.field textarea { min-height: 70px; resize: vertical; }83.qadd { display: flex; gap: 8px; margin: 10px 12px; }84.qadd input { flex: 1; border: 1px solid #e3e8f0; border-radius: 10px; padding: 10px; font-size: 13px; outline: none; }8586/* 数据看板 */87.big { font-size: 26px; font-weight: 800; color: #15a07e; }88.kpis { display: flex; gap: 10px; margin: 12px; }89.kpis .k { flex: 1; background: #fff; border-radius: 14px; padding: 14px; text-align: center; box-shadow: 0 2px 8px rgba(20,40,80,.05); }90.kpis .k b { font-size: 20px; color: #1aa6e8; display: block; }91.kpis .k span { font-size: 11px; color: #8a93a3; }92.bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding: 0 6px; }93.bars .b { flex: 1; background: linear-gradient(180deg, #1aa6e8, #15c39a); border-radius: 6px 6px 0 0; position: relative; }94.bars .b i { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: #667; }95.bars .b em { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: #9aa3b0; font-style: normal; }96.pie { display: flex; align-items: center; gap: 16px; }97.pie .ring { width: 110px; height: 110px; border-radius: 50%; background: conic-gradient(#15c39a 0 42%, #1aa6e8 42% 71%, #ffb347 71% 100%); flex: 0 0 auto; }98.pie .lg { font-size: 12px; color: #567; line-height: 1.9; }99.pie .lg b { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }100101/* 知识文章 */102.art { display: flex; gap: 12px; }103.art .cv { width: 84px; height: 60px; border-radius: 10px; flex: 0 0 auto; background: linear-gradient(135deg, #15c39a, #1aa6e8); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; text-align: center; padding: 4px; }104.art .at { font-weight: 700; font-size: 14px; line-height: 1.4; }105.art .am { font-size: 11px; color: #9aa3b0; margin-top: 6px; }106.rich { font-size: 14px; line-height: 1.8; color: #3a4350; }107.rich h3 { font-size: 15px; margin: 16px 0 6px; color: #15a07e; }108.rich p { margin: 8px 0; }109.rich .callout { background: #f0fbf8; border-left: 3px solid #15c39a; padding: 10px 12px; border-radius: 8px; font-size: 13px; color: #2b6; margin: 12px 0; }110111/* 个人中心 */112.profile { background: linear-gradient(135deg, #15c39a, #1aa6e8); color: #fff; padding: 22px 16px; display: flex; align-items: center; gap: 14px; }113.profile .av { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 26px; }114.profile .pn { font-size: 18px; font-weight: 800; }115.profile .pp { font-size: 12px; opacity: .9; margin-top: 4px; }116.menu { background: #fff; border-radius: 14px; margin: 12px; overflow: hidden; }117.menu .mi { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid #f0f3f8; }118.menu .mi:last-child { border-bottom: 0; }119.menu .mi .mi-ic { font-size: 18px; width: 24px; text-align: center; }120.menu .mi .mi-t { flex: 1; font-size: 14px; }121.menu .mi .mi-r { color: #c2c9d4; font-size: 14px; }122123/* 消息 */124.msg { display: flex; gap: 12px; align-items: flex-start; }125.msg .md { width: 40px; height: 40px; border-radius: 50%; background: #eafaf5; color: #15a07e; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }126.msg .mt { font-weight: 700; font-size: 14px; }127.msg .mx { font-size: 12px; color: #8a93a3; margin-top: 4px; line-height: 1.5; }128.msg .mti { font-size: 11px; color: #bcc3cf; margin-top: 4px; }129130/* 关于 */131.about { text-align: center; padding: 24px; }132.about .logo { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(135deg, #15c39a, #1aa6e8); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }133.about h3 { margin: 6px 0; }134.about p { color: #8a93a3; font-size: 13px; line-height: 1.7; }135136/* 底部 Tab */137.tab { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; height: 60px; background: #fff; border-top: 1px solid #eef1f6; display: flex; z-index: 30; }138.tab .ti { flex: 1; text-align: center; padding-top: 8px; color: #9aa3b0; font-size: 11px; cursor: pointer; }139.tab .ti .ti-ic { font-size: 21px; display: block; }140.tab .ti.active { color: #15a07e; font-weight: 700; }141142/* 全局动效 */143.card, .qcard, .cats .c, .opt { transition: transform .12s ease; }144