@@ -0,0 +1,18 @@
|
|||||||
|
name: Vercel Deploy
|
||||||
|
|
||||||
|
on: [push]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
deploy:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
|
- name: Deploy to Vercel
|
||||||
|
uses: amondnet/vercel-action@v25 # 这是一个非常好用的封装
|
||||||
|
with:
|
||||||
|
vercel-token: ${{ secrets.VERCEL_TOKEN }} # Vercel 设置里的 API Token
|
||||||
|
vercel-org-id: ${{ secrets.ORG_ID }} # 项目 .vercel/project.json 里的 orgId
|
||||||
|
vercel-project-id: ${{ secrets.PROJECT_ID }} # 项目 .vercel/project.json 里的 projectId
|
||||||
|
working-directory: ./ # 你的 HTML 所在目录
|
||||||
|
vercel-args: '--prod' # 直接推送到生产环境
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
/* style-modern.css */
|
||||||
|
body {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||||
|
padding: 40px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: white;
|
||||||
|
padding: 60px 80px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.salutation {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p {
|
||||||
|
text-indent: 2em;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wish-prefix {
|
||||||
|
text-indent: 2em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wish-suffix {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
/* style-traditional.css */
|
||||||
|
body {
|
||||||
|
background-color: #e8e3d3;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter-container {
|
||||||
|
background-color: #fdfaf2;
|
||||||
|
padding: 40px;
|
||||||
|
border: 1px solid #d4c4a8;
|
||||||
|
/* 核心：竖排文字 */
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
text-orientation: mixed;
|
||||||
|
height: 600px;
|
||||||
|
font-family: "Noto Serif SC", "STSong", serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.salutation {
|
||||||
|
margin-left: 20px; /* 竖排时的间距 */
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p {
|
||||||
|
margin-left: 15px;
|
||||||
|
/* 竖排时首行缩进 */
|
||||||
|
padding-top: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wish-prefix {
|
||||||
|
padding-top: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wish-suffix {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-right: 40px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
/* style-vintage.css */
|
||||||
|
body {
|
||||||
|
background-color: #cfd8dc;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter-container {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: #fff;
|
||||||
|
/* 模拟红格线 */
|
||||||
|
background-image: linear-gradient(#f1f1f1 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(255,0,0,0.1) 1px, transparent 1px);
|
||||||
|
background-size: 100% 2.5em; /* 行高需与此匹配 */
|
||||||
|
line-height: 2.5em;
|
||||||
|
padding: 50px;
|
||||||
|
border: 2px solid #b71c1c;
|
||||||
|
font-family: "SimSun", "STSong", serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.salutation {
|
||||||
|
border-bottom: 2px solid #b71c1c; /* 模拟标题线 */
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p {
|
||||||
|
text-indent: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wish-suffix {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
text-align: right;
|
||||||
|
color: #b71c1c; /* 怀旧红色字体 */
|
||||||
|
}
|
||||||
+27
@@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="stylesheet" href="./css/vintage.css"> <title>书信预览</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="letter-container">
|
||||||
|
<h2 class="salutation">尊敬的[姓名/称谓]：</h2>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>展信佳。自上次一别，已有数月之久。每念及过往共同探讨之时光，心中倍感亲切。今日致信，旨在询问近况，并就此前所述之合作事宜，希望能有进一步之探讨。</p>
|
||||||
|
<p>岁序更新，愿君事事顺遂，阖家安康。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="closing">
|
||||||
|
<p class="wish-prefix">此致</p>
|
||||||
|
<p class="wish-suffix">敬礼！</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<p class="signature">[您的署名] 敬上</p>
|
||||||
|
<p class="date">2026年3月25日</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user