chore(front): 对外平台官网样式外置到 platform.css + 护栏测试

2026-03-14 02:25:06 +00:00
parent 8c373b52dc
commit e1822e4389
4 changed files with 166 additions and 45 deletions
--- a/public/css/platform.css
+++ b/public/css/platform.css
@@ -0,0 +1,122 @@
+/*
+ * SaaSShop Platform (Public) Styles
+ * 说明：对外平台官网/套餐页的样式集中管理，避免 Blade 中大量 inline style。
+ */
+
+:root{
+    --bg:#f6f7fb;
+    --text:#111827;
+    --muted:#6b7280;
+    --border:#e5e7eb;
+    --brand:#111827;
+    --card-bg:#fff;
+}
+
+body{
+    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
+    margin:0;
+    background:var(--bg);
+    color:var(--text);
+}
+
+.wrap{
+    max-width:980px;
+    margin:0 auto;
+    padding:24px;
+}
+
+.card{
+    background:var(--card-bg);
+    border:1px solid var(--border);
+    border-radius:10px;
+    padding:20px;
+}
+
+.muted{
+    color:var(--muted);
+    font-size:14px;
+    line-height:1.6;
+}
+
+.h1{
+    margin:0 0 8px 0;
+    font-size:28px;
+}
+
+.h3{
+    margin:0 0 8px 0;
+    font-size:18px;
+}
+
+.mt-8{ margin-top:8px; }
+.mt-10{ margin-top:10px; }
+.mt-12{ margin-top:12px; }
+.mt-14{ margin-top:14px; }
+
+.flex{
+    display:flex;
+    align-items:center;
+}
+
+.flex-between{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+}
+
+.flex-wrap{ flex-wrap:wrap; }
+
+.gap-10{ gap:10px; }
+
+.grid-2{
+    display:grid;
+    grid-template-columns:1fr 1fr;
+    gap:16px;
+    margin-top:16px;
+}
+
+.grid-3{
+    display:grid;
+    grid-template-columns:repeat(3, 1fr);
+    gap:14px;
+    margin-top:16px;
+}
+
+.btn{
+    display:inline-block;
+    padding:10px 14px;
+    border-radius:8px;
+    border:1px solid var(--brand);
+    text-decoration:none;
+    color:var(--brand);
+    font-weight:600;
+}
+
+.btn-primary{
+    background:var(--brand);
+    color:#fff;
+}
+
+.badge{
+    display:inline-block;
+    font-size:12px;
+    padding:2px 8px;
+    border-radius:999px;
+    border:1px solid var(--border);
+    color:#374151;
+}
+
+.price{
+    margin-top:10px;
+    font-size:22px;
+    font-weight:700;
+}
+
+@media (max-width: 980px){
+    .grid-3{ grid-template-columns:1fr 1fr; }
+}
+
+@media (max-width: 720px){
+    .grid-2{ grid-template-columns:1fr; }
+    .grid-3{ grid-template-columns:1fr; }
+}