151 lines
2.5 KiB
CSS
151 lines
2.5 KiB
CSS
/*
|
|
* 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;
|
|
}
|
|
|
|
.input{
|
|
padding:8px 10px;
|
|
border:1px solid var(--border);
|
|
border-radius:8px;
|
|
width:100%;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.badge{
|
|
display:inline-block;
|
|
font-size:12px;
|
|
padding:2px 8px;
|
|
border-radius:999px;
|
|
border:1px solid var(--border);
|
|
color:#374151;
|
|
}
|
|
|
|
.flash{
|
|
margin-top:16px;
|
|
padding:10px 12px;
|
|
border-radius:10px;
|
|
border:1px solid #bbf7d0;
|
|
background:#f0fdf4;
|
|
color:#14532d;
|
|
font-size:14px;
|
|
}
|
|
|
|
.error-box{
|
|
margin-top:16px;
|
|
padding:10px 12px;
|
|
border-radius:10px;
|
|
border:1px solid #fecaca;
|
|
background:#fef2f2;
|
|
color:#7f1d1d;
|
|
font-size:14px;
|
|
}
|
|
|
|
.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; }
|
|
}
|