css/style.css · 约 8317 字符
1*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
2:root{
3 --main:#14b8a6; --main-d:#0ea5e9;
4 --bg:#eef3f7; --card:#fff; --text:#1f2a37; --mute:#8a96a8; --line:#e7edf3;
5 --normal:#16a34a; --fever-lo:#f97316; --fever-hi:#ef4444; --low:#3b82f6;
6 --shadow:0 8px 24px rgba(15,90,90,.10);
7}
8body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
9 background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
10.phone{position:relative;max-width:430px;margin:0 auto;min-height:100vh;background:var(--bg);
11 display:flex;flex-direction:column;overflow:hidden}
12
13/* 顶部标题栏 */
14.hd{background:linear-gradient(135deg,var(--main),var(--main-d));color:#fff;
15 padding:14px 16px 16px;box-shadow:0 4px 16px rgba(14,165,233,.25)}
16.hd-top{display:flex;align-items:center;gap:10px}
17.hd-top .ic{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.22);
18 display:flex;align-items:center;justify-content:center;font-size:22px}
19.hd-top h1{font-size:18px;font-weight:900;line-height:1.2}
20.hd-top .sub{font-size:11.5px;opacity:.9;margin-top:1px}
21.hd-top .set{flex:1;text-align:right}
22.hd-top .set button{border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.14);
23 color:#fff;border-radius:20px;padding:7px 13px;font-size:12.5px;font-weight:700}
24/* 统计条 */
25.stats{display:flex;margin-top:14px;background:rgba(255,255,255,.16);border-radius:14px;
26 padding:10px 4px;backdrop-filter:blur(4px)}
27.stats .st{flex:1;text-align:center;position:relative}
28.stats .st+.st::before{content:"";position:absolute;left:0;top:18%;height:64%;width:1px;background:rgba(255,255,255,.35)}
29.stats .st b{display:block;font-size:19px;font-weight:900;line-height:1.1}
30.stats .st span{font-size:11px;opacity:.92}
31.stats .st.warn b{color:#ffe08a}
32
33/* 日历卡片 */
34.cal{background:var(--card);margin:12px;border-radius:18px;padding:12px 12px 14px;box-shadow:var(--shadow)}
35.cal-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
36.cal-bar .mv{width:34px;height:34px;border:none;border-radius:50%;background:#f1f6f8;color:#41566a;font-size:18px;font-weight:800}
37.cal-bar .mv:active{background:#e2ecf0}
38.cal-bar .ttl{font-size:16px;font-weight:900}
39.cal-bar .today{border:1px solid var(--main);background:#fff;color:var(--main);border-radius:18px;
40 padding:6px 13px;font-size:12.5px;font-weight:800}
41.wk{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
42.wk div{text-align:center;font-size:12px;color:var(--mute);padding:4px 0}
43.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
44.cell{position:relative;aspect-ratio:1/1;border-radius:12px;background:#f7fafb;border:1px solid transparent;
45 display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.15s;overflow:hidden}
46.cell.out{opacity:.38}
47.cell .d{font-size:13.5px;font-weight:700;color:#41566a}
48.cell .v{font-size:11px;font-weight:800;margin-top:1px;line-height:1}
49.cell.today .d{color:#fff;background:var(--main);width:20px;height:20px;border-radius:50%;
50 display:flex;align-items:center;justify-content:center;font-size:12px}
51.cell.sel{border-color:var(--main);box-shadow:0 0 0 2px rgba(20,184,166,.25)}
52/* 分级高亮 */
53.cell.s-normal{background:#eafaf0}
54.cell.s-normal .v{color:var(--normal)}
55.cell.s-lo{background:#eaf2ff;border-color:#bcd4ff}
56.cell.s-lo .v{color:var(--low)}
57.cell.s-feverlo{background:#fff2e6;border-color:#ffd2a8}
58.cell.s-feverlo .v{color:var(--fever-lo)}
59.cell.s-feverhi{background:#ffeaea;border-color:#ffb3b3;box-shadow:0 0 0 2px rgba(239,68,68,.18)}
60.cell.s-feverhi .v{color:var(--fever-hi)}
61.cell.s-feverhi::after{content:"⚠";position:absolute;top:3px;right:5px;font-size:11px;color:var(--fever-hi)}
62.cell.has .d{font-weight:800}
63
64/* 图例 */
65.legend{display:flex;flex-wrap:wrap;gap:8px 14px;padding:2px 4px 4px}
66.legend .lg{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--mute)}
67.legend .dot{width:10px;height:10px;border-radius:50%}
68.legend .dot.n{background:var(--normal)} .legend .dot.lo{background:var(--low)}
69.legend .dot.fl{background:var(--fever-lo)} .legend .dot.fh{background:var(--fever-hi)}
70
71/* 选中日记录区 */
72.day{background:var(--card);margin:0 12px 12px;border-radius:18px;padding:14px;box-shadow:var(--shadow)}
73.day-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
74.day-h .dt{font-size:15px;font-weight:900}
75.day-h .add{border:none;background:linear-gradient(135deg,var(--main),var(--main-d));color:#fff;
76 border-radius:20px;padding:8px 15px;font-size:13px;font-weight:800;box-shadow:0 4px 12px rgba(14,165,233,.3)}
77.rec{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:13px;background:#f7fafb;margin-bottom:8px}
78.rec .badge{width:46px;height:46px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
79.rec .badge b{font-size:16px;font-weight:900;line-height:1} .rec .badge i{font-size:9px;font-style:normal;opacity:.9}
80.rec .info{flex:1;min-width:0}
81.rec .info .top{font-size:14px;font-weight:800}
82.rec .info .meta{font-size:12px;color:var(--mute);margin-top:2px}
83.rec .info .note{font-size:12px;color:#5a6675;margin-top:3px;word-break:break-all}
84.rec .ops{display:flex;gap:6px}
85.rec .ops button{border:none;background:#eef3f7;color:#5a6675;border-radius:9px;padding:7px 9px;font-size:12px;font-weight:700}
86.rec .ops .del{background:#ffeaea;color:var(--fever-hi)}
87.empty{text-align:center;color:var(--mute);font-size:13.5px;padding:22px 10px;line-height:1.7}
88
89/* 底部弹层 */
90.mask{position:fixed;inset:0;background:rgba(20,30,40,.45);opacity:0;visibility:hidden;transition:.25s;z-index:50}
91.mask.show{opacity:1;visibility:visible}
92.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,100%);width:100%;max-width:430px;
93 background:#fff;border-radius:22px 22px 0 0;padding:18px 18px 26px;z-index:60;transition:transform .28s;max-height:88vh;overflow:auto}
94.sheet.show{transform:translate(-50%,0)}
95.sheet .grab{width:40px;height:4px;border-radius:3px;background:#e2e8ef;margin:0 auto 14px}
96.sheet h3{font-size:17px;font-weight:900;margin-bottom:14px}
97.fld{margin-bottom:13px}
98.fld>label{display:block;font-size:13px;color:var(--mute);margin-bottom:7px;font-weight:700}
99.fld input[type=number]{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:17px;font-weight:800;outline:none;color:var(--text)}
100.fld input:focus{border-color:var(--main)}
101.seg{display:flex;gap:8px;flex-wrap:wrap}
102.seg button{flex:1;min-width:64px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 4px;font-size:13.5px;font-weight:800;color:#5a6675}
103.seg button.on{border-color:var(--main);background:#eafaf7;color:var(--main)}
104.fld textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:14px;
105 outline:none;resize:none;height:64px;font-family:inherit;color:var(--text)}
106.btn-save{width:100%;border:none;border-radius:14px;padding:14px;font-size:16px;font-weight:900;color:#fff;
107 background:linear-gradient(135deg,var(--main),var(--main-d));box-shadow:0 8px 20px rgba(14,165,233,.32);margin-top:6px}
108.btn-save:active{transform:scale(.99)}
109.btn-del{width:100%;border:1px solid #ffd0d0;background:#fff;color:var(--fever-hi);border-radius:14px;padding:12px;font-size:14px;font-weight:800;margin-top:10px}
110
111/* 设置面板 */
112.set-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line)}
113.set-row .k{font-size:14px;font-weight:700}
114.set-row .k small{display:block;font-size:11.5px;color:var(--mute);font-weight:500;margin-top:2px}
115.set-row input[type=number]{width:84px;border:1px solid var(--line);border-radius:10px;padding:9px;font-size:15px;font-weight:800;text-align:center;outline:none}
116.tip{font-size:12px;color:var(--mute);line-height:1.7;margin-top:8px}
117.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#1f2a37;color:#fff;
118 padding:11px 18px;border-radius:22px;font-size:13.5px;font-weight:700;z-index:99;opacity:0;transition:.3s}
119.toast.show{opacity:1}
120