站点图标:一本翻开的家庭旅行日记(批 24)
① 设计:翻开的日记本 —— 左页是「家」(出发地),右页是「路线 + 目的图钉」 (旅行),页面底部两道横线是写下的记录。底色取站点主色 #3d6bf5 的渐变, 蓝底白页,16px 标签页下也认得出。 ② 交付:favicon.ico(站点根,多尺寸 16/32/48/64)+ SVG 源(高分屏)+ apple-touch-icon 180 + PWA 192/512 + maskable 512 + site.webmanifest (可加到主屏)。地址全部走 asset() 带版本号,换图标浏览器立刻认。 ③ 验证:部署哨兵 16 条(9 个资产存在 + 4 条 layout 引用 + manifest 合法 JSON + 不硬编码地址);e2e 新增第 11b 节按 URL 真拉,验状态码与 Content-Type (拿 HTML 当图标是最常见的白页签原因);_map16.js 加 3 条整页断言。 直连线上复核:/favicon.ico=image/x-icon、svg=image/svg+xml、png=image/png。
|
After Width: | Height: | Size: 658 B |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,38 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="TripLog 家庭旅行日记">
|
||||||
|
<!-- TripLog 图标:一本翻开的日记本。左页是「家」(出发地),
|
||||||
|
右页是「路线 + 目的地图钉」(旅行),页面底部那道横线是写下的记录。
|
||||||
|
底色用站点主色 accent(#3d6bf5) 的渐变。
|
||||||
|
尺寸取舍:16px 时首页与图钉各只有几像素,所以图形取大、线取粗,
|
||||||
|
只保留「本子 + 一个方正图形 + 一个圆形图形」这层可辨认的形状。 -->
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="tl-bg" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#4C7BFF"/>
|
||||||
|
<stop offset="1" stop-color="#2F56CF"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<rect width="64" height="64" rx="14" fill="url(#tl-bg)"/>
|
||||||
|
|
||||||
|
<!-- 翻开的日记本:左右两页(比整块底色只留 6px 边距,尽量占满) -->
|
||||||
|
<rect x="6" y="12" width="25" height="40" rx="4" fill="#FFFFFF"/>
|
||||||
|
<rect x="33" y="12" width="25" height="40" rx="4" fill="#FFFFFF"/>
|
||||||
|
<!-- 靠书脊那侧的装订阴影 -->
|
||||||
|
<rect x="27.7" y="14" width="1.8" height="36" rx="0.9" fill="#DCE6FF"/>
|
||||||
|
<rect x="34.5" y="14" width="1.8" height="36" rx="0.9" fill="#DCE6FF"/>
|
||||||
|
|
||||||
|
<!-- 左页:家(出发地) -->
|
||||||
|
<path d="M10.5 31 L18.5 23 L26.5 31 Z" fill="#2F56CF"/>
|
||||||
|
<rect x="13.5" y="30.6" width="10" height="13.4" rx="1.2" fill="#2F56CF"/>
|
||||||
|
<rect x="16.6" y="36.4" width="3.8" height="7.6" rx="0.8" fill="#FFFFFF"/>
|
||||||
|
|
||||||
|
<!-- 右页:路线 + 目的地图钉 -->
|
||||||
|
<path d="M37 45.5 C40.5 42.5 39 39.5 42 38.2 C43.5 37.5 44.5 37.4 45.6 37.4"
|
||||||
|
fill="none" stroke="#2F56CF" stroke-width="2.8" stroke-linecap="round"/>
|
||||||
|
<circle cx="45.2" cy="26" r="5.6" fill="#2F56CF"/>
|
||||||
|
<circle cx="45.2" cy="26" r="2.2" fill="#FFFFFF"/>
|
||||||
|
<path d="M41.9 30.2 L45.2 37.2 L48.5 30.2 Z" fill="#2F56CF"/>
|
||||||
|
|
||||||
|
<!-- 两页底部:写下的记录 -->
|
||||||
|
<rect x="11" y="46.6" width="15" height="1.8" rx="0.9" fill="#C7D4F7"/>
|
||||||
|
<rect x="38" y="46.6" width="12" height="1.8" rx="0.9" fill="#C7D4F7"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 9.8 KiB |
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "TripLog 家庭旅行日记",
|
||||||
|
"short_name": "TripLog",
|
||||||
|
"description": "把一家人的每次出行,连同路线、节点、照片和花销,一起记下来。",
|
||||||
|
"start_url": "/",
|
||||||
|
"scope": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"lang": "zh-CN",
|
||||||
|
"background_color": "#f6f7fb",
|
||||||
|
"theme_color": "#3d6bf5",
|
||||||
|
"icons": [
|
||||||
|
{ "src": "/assets/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
|
||||||
|
{ "src": "/assets/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
|
||||||
|
{ "src": "/assets/icons/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -14,7 +14,14 @@ $__initial = $__name !== '' ? mb_substr($__name, 0, 1) : '·';
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||||
<title><?= e($pageTitle ?? '家庭出行记录') ?></title>
|
<title><?= e($pageTitle ?? 'TripLog 家庭旅行日记') ?></title>
|
||||||
|
<?php /* 站点图标:一本翻开的日记本 —— 左页「家」、右页「路线 + 图钉」。
|
||||||
|
ICO 放站点根(浏览器没写地址也会去 /favicon.ico 找),其余走 asset() 带版本号。 */ ?>
|
||||||
|
<link rel="icon" href="<?= e(asset('favicon.ico')) ?>" sizes="any">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="<?= e(asset('assets/icons/trip-log.svg')) ?>">
|
||||||
|
<link rel="apple-touch-icon" href="<?= e(asset('assets/icons/icon-180.png')) ?>">
|
||||||
|
<link rel="manifest" href="<?= e(asset('site.webmanifest')) ?>">
|
||||||
|
<meta name="theme-color" content="#3d6bf5">
|
||||||
<?php /* 静态资源一律走 asset():不带版本号的话,浏览器会一直用缓存里的旧 CSS */ ?>
|
<?php /* 静态资源一律走 asset():不带版本号的话,浏览器会一直用缓存里的旧 CSS */ ?>
|
||||||
<link rel="stylesheet" href="<?= e(asset('assets/style.css')) ?>">
|
<link rel="stylesheet" href="<?= e(asset('assets/style.css')) ?>">
|
||||||
<link rel="stylesheet" href="<?= e(asset('assets/vendor/cropper/cropper.min.css')) ?>">
|
<link rel="stylesheet" href="<?= e(asset('assets/vendor/cropper/cropper.min.css')) ?>">
|
||||||
|
|||||||