style.css · 约 9609 字符
1/* 小草酒店民宿 · 移动端 H5 样式 */
2*{margin:0;padding:0;box-sizing:border-box}
3body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:#f6f5f2;color:#333;max-width:430px;margin:0 auto;min-height:100vh}
4a{text-decoration:none;color:inherit}
5ul{list-style:none}
6:root{--primary:#c98a2d;--primary-light:#fdf3e3;--secondary:#8a5a2b;--dark:#3d2b16;--gray:#9a8f7d;--light-gray:#f0ece4;--green:#52c41a;--red:#ff4d4f}
7.header{background:linear-gradient(135deg,#c98a2d,#e8a64c);color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(201,138,45,.35)}
8.header .back{font-size:20px;cursor:pointer;width:32px}
9.header h1{font-size:17px;font-weight:600;flex:1;text-align:center}
10.header .right{width:32px;text-align:right;font-size:14px}
11.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;border-top:1px solid #eee;display:flex;z-index:100}
12.tabbar a{flex:1;text-align:center;padding:8px 0;color:#999;font-size:11px}
13.tabbar a.active{color:var(--primary)}
14.tabbar a .icon{font-size:22px;display:block;margin-bottom:2px}
15.card{background:#fff;border-radius:14px;margin:12px;padding:16px;box-shadow:0 2px 6px rgba(60,40,10,.06)}
16.section-title{font-size:16px;font-weight:700;margin:16px 16px 8px;display:flex;justify-content:space-between;align-items:center}
17.section-title span{font-size:12px;color:var(--gray);font-weight:400}
18.btn{display:block;width:100%;padding:13px;border:none;border-radius:25px;font-size:15px;font-weight:600;cursor:pointer;text-align:center}
19.btn-primary{background:linear-gradient(135deg,#c98a2d,#e8a64c);color:#fff}
20.btn-outline{border:1.5px solid var(--primary);color:var(--primary);background:#fff}
21.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
22.badge-hot{background:var(--primary-light);color:var(--primary)}
23.badge-new{background:#e6f7ff;color:#1890ff}
24.badge-rec{background:#f6ffed;color:var(--green)}
25.tag{display:inline-block;padding:2px 6px;border-radius:4px;font-size:11px;background:var(--light-gray);color:#666;margin-right:4px}
26/* 首页 */
27.search-bar{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#c98a2d,#e8a64c);padding:14px 16px}
28.search-bar .loc{color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;gap:2px;white-space:nowrap}
29.search-box{flex:1;display:flex;align-items:center;background:#fff;border-radius:20px;padding:9px 14px;font-size:13px;color:#999}
30.date-bar{display:flex;background:#fff;margin:12px;border-radius:14px;padding:14px 16px;box-shadow:0 2px 6px rgba(60,40,10,.06);align-items:center}
31.date-bar .db-item{flex:1;text-align:center}
32.date-bar .db-item b{font-size:15px;display:block}
33.date-bar .db-item span{font-size:11px;color:var(--gray)}
34.date-bar .db-arrow{color:var(--primary);font-size:18px}
35.cat-scroll{display:flex;gap:0;overflow-x:auto;padding:4px 12px 8px;white-space:nowrap}
36.cat-scroll a{flex-shrink:0;text-align:center;margin-right:14px;font-size:12px;color:#666}
37.cat-scroll a .ci{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:5px;box-shadow:0 2px 6px rgba(60,40,10,.06)}
38.cat-scroll a.active .ci{background:var(--primary-light)}
39.hotel-card{display:flex;gap:12px;background:#fff;margin:0 12px 12px;border-radius:14px;padding:12px;box-shadow:0 2px 6px rgba(60,40,10,.06)}
40.hotel-card .hc-img{width:100px;height:96px;border-radius:10px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:36px;flex-shrink:0}
41.hotel-card .hc-info{flex:1;min-width:0}
42.hotel-card .hc-name{font-size:15px;font-weight:700;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
43.hotel-card .hc-loc{font-size:11px;color:var(--gray);margin-bottom:3px}
44.hotel-card .hc-tags{margin-bottom:4px}
45.hotel-card .hc-bottom{display:flex;justify-content:space-between;align-items:flex-end}
46.hotel-card .hc-price{font-size:16px;color:var(--primary);font-weight:700}
47.hotel-card .hc-price small{font-size:11px;font-weight:400;color:var(--gray)}
48.hotel-card .hc-score{font-size:12px;color:var(--gold,#d48806);font-weight:600}
49.hotel-card .hc-score b{color:var(--primary);font-size:13px}
50/* 列表页筛选 */
51.filter-bar{display:flex;gap:0;background:#fff;padding:0 8px;border-bottom:1px solid #eee;overflow-x:auto;white-space:nowrap;position:sticky;top:48px;z-index:50}
52.filter-bar a{padding:12px 12px;font-size:13px;color:#666;flex-shrink:0}
53.filter-bar a.active{color:var(--primary);font-weight:600}
54/* 详情 */
55.detail-hero{position:relative;height:220px;background:linear-gradient(135deg,#e8a64c,#c98a2d);display:flex;align-items:center;justify-content:center;font-size:72px}
56.detail-head{background:#fff;margin:12px;border-radius:14px;padding:16px}
57.detail-head h2{font-size:18px;margin-bottom:4px}
58.detail-head .dh-meta{font-size:12px;color:var(--gray);margin-bottom:8px}
59.detail-head .dh-price{font-size:18px;color:var(--primary);font-weight:700}
60.fac-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
61.fac-item{text-align:center;font-size:11px;color:#666}
62.fac-item .fi{font-size:22px;display:block;margin-bottom:3px}
63.review-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid #f5f2ec}
64.review-item:last-child{border:none}
65.review-item .rv-av{width:36px;height:36px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
66.review-item .rv-info{flex:1}
67.review-item .rv-name{font-size:13px;font-weight:600;display:flex;justify-content:space-between}
68.review-item .rv-name span{color:var(--gold,#d48806);font-size:12px}
69.review-item .rv-text{font-size:12px;color:#666;margin-top:3px;line-height:1.5}
70.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
71.calendar .cal-head{font-size:11px;color:var(--gray);padding:4px 0}
72.calendar .cal-day{padding:8px 0;border-radius:8px;font-size:12px}
73.calendar .cal-day.past{color:#ddd}
74.calendar .cal-day.avail{background:#fff7e8;color:var(--primary)}
75.calendar .cal-day.full{background:#f2f2f2;color:#ccc}
76.calendar .cal-day.sel{background:var(--primary);color:#fff}
77/* 预订 */
78.book-card{background:#fff;margin:12px;border-radius:14px;padding:16px}
79.book-card label{font-size:13px;color:#555;display:block;margin:12px 0 6px;font-weight:600}
80.book-card input,.book-card textarea,.book-card select{width:100%;border:1px solid #e8e0d2;border-radius:10px;padding:11px;font-size:14px;background:#fdfbf7;outline:none}
81.book-row{display:flex;gap:10px}
82.book-row input{flex:1}
83.sum-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;color:#666}
84.sum-row b{color:var(--primary);font-size:15px}
85/* 订单 */
86.order-item{background:#fff;border-radius:14px;margin:12px;padding:14px}
87.order-item .oi-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
88.order-item .oi-status{font-size:13px;font-weight:600}
89.order-item .oi-hotel{display:flex;gap:10px;align-items:center;margin-bottom:8px}
90.order-item .oi-hotel .oh-img{width:56px;height:48px;border-radius:8px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:24px}
91.order-item .oi-hotel .oh-info b{font-size:14px;display:block}
92.order-item .oi-hotel .oh-info span{font-size:12px;color:var(--gray)}
93.order-item .oi-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid #f5f2ec}
94.order-item .oi-total{font-size:15px;font-weight:700;color:var(--primary)}
95/* 我的 */
96.member-header{background:linear-gradient(135deg,#8a5a2b,#c98a2d);color:#fff;padding:24px 16px;text-align:center}
97.member-avatar{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.25);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:28px}
98.member-level{display:inline-block;padding:3px 12px;background:rgba(255,255,255,.2);border-radius:12px;font-size:12px;margin-top:4px}
99.points-grid{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;background:#fff;margin:12px;border-radius:14px;padding:16px;box-shadow:0 2px 6px rgba(60,40,10,.06)}
100.points-grid .pg-num{font-size:22px;font-weight:700;color:var(--primary)}
101.points-grid .pg-label{font-size:12px;color:var(--gray);margin-top:4px}
102.menu-list{background:#fff;margin:12px;border-radius:14px;padding:0 16px;box-shadow:0 2px 6px rgba(60,40,10,.06)}
103.menu-list a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #f5f2ec;font-size:14px}
104.menu-list a:last-child{border:none}
105.menu-list a span:last-child{color:#ccc}
106.coupon-item{display:flex;align-items:center;gap:12px;background:#fff;margin:8px 12px;border-radius:10px;overflow:hidden;box-shadow:0 2px 6px rgba(60,40,10,.06)}
107.coupon-item .c-left{background:var(--primary);color:#fff;padding:14px 12px;text-align:center;min-width:80px}
108.coupon-item .c-left .c-amount{font-size:20px;font-weight:700}
109.coupon-item .c-left .c-label{font-size:11px;opacity:.9}
110.coupon-item .c-right{flex:1;padding:12px}
111.coupon-item .c-right .c-name{font-size:14px;font-weight:600}
112.coupon-item .c-right .c-desc{font-size:12px;color:var(--gray);margin-top:2px}
113.empty{text-align:center;padding:60px 20px;color:#999}
114.empty .eicon{font-size:48px;margin-bottom:12px}
115