chore(front): 对外平台官网样式外置到 platform.css + 护栏测试
This commit is contained in:
萝卜
122
public/css/platform.css
Normal file
122
public/css/platform.css
Normal file
@@ -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; }
|
||||
}
|
||||
@@ -4,40 +4,27 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SaaSShop｜SaaS 电商系统</title>
|
||||
<style>
|
||||
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:#f6f7fb; color:#111827;}
|
||||
.wrap{max-width: 980px; margin:0 auto; padding:24px;}
|
||||
.card{background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:20px;}
|
||||
.muted{color:#6b7280; font-size:14px; line-height:1.6;}
|
||||
.grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:16px;}
|
||||
.btn{display:inline-block; padding:10px 14px; border-radius:8px; border:1px solid #111827; text-decoration:none; color:#111827; font-weight:600;}
|
||||
.btn-primary{background:#111827; color:#fff;}
|
||||
@media (max-width: 720px){.grid{grid-template-columns:1fr}}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/css/platform.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="card">
|
||||
<h1 style="margin:0 0 8px 0;">SaaSShop｜SaaS 电商系统</h1>
|
||||
<h1 class="h1">SaaSShop｜SaaS 电商系统</h1>
|
||||
<div class="muted">这是 SaaSShop 的对外介绍与开通入口（前期先做 A：站点开通型）。B（license 授权码）后续在其它端能力更完整后再接入。</div>
|
||||
<div style="margin-top:14px; display:flex; gap:10px; flex-wrap:wrap;">
|
||||
<div class="mt-14 flex flex-wrap gap-10">
|
||||
<a class="btn btn-primary" href="/platform/plans">查看套餐与功能</a>
|
||||
<a class="btn" href="/admin/login">进入总台管理（运营/治理）</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="grid-2">
|
||||
<div class="card">
|
||||
<h3 style="margin:0 0 8px 0;">四端结构</h3>
|
||||
<div class="muted">
|
||||
总台管理（平台治理/收费） → 站点后台（站点管理员） → 商家后台（商家运营） → 买家端（交易体验）。
|
||||
</div>
|
||||
<h3 class="h3">四端结构</h3>
|
||||
<div class="muted">总台管理（平台治理/收费） → 站点后台（站点管理员） → 商家后台（商家运营） → 买家端（交易体验）。</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3 style="margin:0 0 8px 0;">当前优先级</h3>
|
||||
<div class="muted">
|
||||
先把“套餐 → 订阅 → 平台订单 → 生效/同步/治理”跑成收费闭环；对外平台先做到可介绍、可看套餐、可引导开通。
|
||||
</div>
|
||||
<h3 class="h3">当前优先级</h3>
|
||||
<div class="muted">先把“套餐 → 订阅 → 平台订单 → 生效/同步/治理”跑成收费闭环；对外平台先做到可介绍、可看套餐、可引导开通。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,49 +4,37 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SaaSShop｜套餐与功能</title>
|
||||
<style>
|
||||
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:#f6f7fb; color:#111827;}
|
||||
.wrap{max-width: 980px; margin:0 auto; padding:24px;}
|
||||
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
|
||||
.muted{color:#6b7280; font-size:14px; line-height:1.6;}
|
||||
.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:16px;}
|
||||
.card{background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:18px;}
|
||||
.btn{display:inline-block; padding:8px 12px; border-radius:8px; border:1px solid #111827; text-decoration:none; color:#111827; font-weight:600;}
|
||||
.btn-primary{background:#111827; color:#fff;}
|
||||
.badge{display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid #e5e7eb; color:#374151;}
|
||||
@media (max-width: 980px){.grid{grid-template-columns:1fr 1fr}}
|
||||
@media (max-width: 720px){.grid{grid-template-columns:1fr}}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/css/platform.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="top">
|
||||
<div class="flex-between flex-wrap gap-10">
|
||||
<div>
|
||||
<h1 style="margin:0 0 6px 0;">套餐与功能</h1>
|
||||
<h1 class="h1" style="margin-bottom:6px;">套餐与功能</h1>
|
||||
<div class="muted">仅展示「已发布 + 启用中」套餐。开通入口（A：站点开通型）将优先在此页面逐步接入。</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:10px;">
|
||||
<div class="flex gap-10 flex-wrap">
|
||||
<a class="btn" href="/platform">返回首页</a>
|
||||
<a class="btn" href="/admin/plans">运营管理套餐</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="grid-3">
|
||||
@forelse($plans as $p)
|
||||
<div class="card">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:10px;">
|
||||
<h3 style="margin:0;">{{ $p->name }}</h3>
|
||||
<div class="flex-between" style="gap:10px;">
|
||||
<h3 class="h3" style="margin:0;">{{ $p->name }}</h3>
|
||||
<span class="badge">{{ $p->billing_cycle }}</span>
|
||||
</div>
|
||||
<div class="muted" style="margin-top:6px;">套餐编码：{{ $p->code }}</div>
|
||||
<div style="margin-top:10px; font-size:22px; font-weight:700;">¥{{ number_format((float) $p->price, 2) }}</div>
|
||||
<div class="muted mt-8">套餐编码：{{ $p->code }}</div>
|
||||
<div class="price">¥{{ number_format((float) $p->price, 2) }}</div>
|
||||
@if($p->description)
|
||||
<div class="muted" style="margin-top:8px;">{{ $p->description }}</div>
|
||||
<div class="muted mt-8">{{ $p->description }}</div>
|
||||
@endif
|
||||
<div style="margin-top:12px;">
|
||||
<div class="mt-12">
|
||||
<a class="btn btn-primary" href="/admin/platform-orders/create?plan_id={{ $p->id }}">我要开通/下单（暂由运营处理）</a>
|
||||
</div>
|
||||
<div class="muted" style="margin-top:8px;">提示：前期先跑通收费闭环与治理；自助开通会在后续版本接入。</div>
|
||||
<div class="muted mt-8">提示：前期先跑通收费闭环与治理；自助开通会在后续版本接入。</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="card" style="grid-column: 1 / -1;">
|
||||
|
||||
24
tests/Feature/FrontPlatformPagesUseExternalCssTest.php
Normal file
24
tests/Feature/FrontPlatformPagesUseExternalCssTest.php
Normal file
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
|
||||
namespace Tests\Feature;
|
||||
|
||||
use Illuminate\Foundation\Testing\RefreshDatabase;
|
||||
use Tests\TestCase;
|
||||
|
||||
class FrontPlatformPagesUseExternalCssTest extends TestCase
|
||||
{
|
||||
use RefreshDatabase;
|
||||
|
||||
public function test_platform_pages_should_link_platform_css_and_not_inline_style_block(): void
|
||||
{
|
||||
$res1 = $this->get('/platform');
|
||||
$res1->assertOk();
|
||||
$res1->assertSee('<link rel="stylesheet" href="/css/platform.css">', false);
|
||||
$res1->assertDontSee('<style>', false);
|
||||
|
||||
$res2 = $this->get('/platform/plans');
|
||||
$res2->assertOk();
|
||||
$res2->assertSee('<link rel="stylesheet" href="/css/platform.css">', false);
|
||||
$res2->assertDontSee('<style>', false);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user