💻 代码预览 · 小草花坊

1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8"/>
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
6<title>送花场景 · 小草花坊</title>
7<link rel="stylesheet" href="style.css"/>
8</head>
9<body>
10
11<header class="header"><a class="back" onclick="history.back()">‹</a><h1>送花场景与花语</h1><span class="right"></span></header>
12<div class="section-title">💐 送花场景指南</div>
13<div class="occasion-grid" id="ocList"></div>
14<div class="section-title">🌸 花语百科</div>
15<div class="flower-tip">
16  <div class="ft-title">🌹 玫瑰</div>
17  <div class="ft-text">红玫瑰＝热烈之爱 · 粉玫瑰＝初恋悸动 · 白玫瑰＝纯洁尊敬 · 黄玫瑰＝友谊祝福</div>
18</div>
19<div class="flower-tip">
20  <div class="ft-title">🌷 郁金香</div>
21  <div class="ft-text">红＝告白 · 粉＝幸福 · 紫＝永恒的爱 · 黄＝开朗阳光（适合祝福与鼓励）</div>
22</div>
23<div class="flower-tip">
24  <div class="ft-title">🌻 向日葵</div>
25  <div class="ft-text">花语：前程似锦 · 阳光活力，适合毕业、开业、探病、开工祝福</div>
26</div>
27<div class="flower-tip">
28  <div class="ft-title">💐 康乃馨</div>
29  <div class="ft-text">粉＝感恩母爱 · 红＝热情祝福 · 白＝纯洁思念，母亲节 / 教师节首选</div>
30</div>
31<div class="section-title">🪴 养护知识</div>
32<div class="flower-tip">
33  <div class="ft-title">鲜花保鲜小贴士</div>
34  <div class="ft-text">• 斜剪根部 45° 再入瓶，增大吸水面积<br/>• 水位 1/3 花瓶，加保鲜剂效果更佳<br/>• 避开阳光直射与空调风口，每日换水<br/>• 花头勿喷水，避免腐烂</div>
35</div>
36<div class="flower-tip">
37  <div class="ft-title">永生花养护</div>
38  <div class="ft-text">• 避光防潮，防止褪色与变质<br/>• 用软毛刷或低温吹风轻拂灰尘<br/>• 不可浇水 / 浸泡，保持干燥<br/>• 可保存 1-3 年，见证长久心意</div>
39</div>
40
41
42<nav class="tabbar"><a class=" active" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="category.html"><span class="icon">💐</span>鲜花</a><a class="" href="subscribe.html"><span class="icon">📅</span>订阅</a><a class="" href="orders.html"><span class="icon">📦</span>订单</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
43<script src="data.js"></script>
44<script>
45  var ol = document.getElementById('ocList');
46  var h = '';
47  window.DATA.occasions.forEach(function (o) {
48    h += '<div class="oc-item"><div class="oi-emoji">' + o.emoji + '</div><div class="oi-name">' + o.name + '</div><div class="oi-desc">' + o.desc + '</div></div>';
49  });
50  ol.innerHTML = h;
51</script>
52<script src="app.js"></script>
53</body>
54</html>