Felix-sec/WechatMomentScreenshot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加iOS的通知栏样式

Browse Source
This commit is contained in:
✨小透明・宸✨
2023-05-08 16:46:51 +08:00
parent 8df466d908
commit 64cb6a726d
5 changed files with 64 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -70,6 +70,8 @@
如果实在是很在意通知栏的样式的话，可以从自己的手机上截一个通知栏的图然后覆盖上去……
iOS 的样式已经添加了，不过因为我并没有 iOS 设备，所以只能参考网上找到的截图来写样式，**不一定能做到和实机一样**。
### 生成的截图中，文字部分能否出现表情符号？
微信中除 Emoji 之外的其它表情符号实际上是特定的文本，复制后粘贴到别处时就可以看到，在微信中则显示为表情符号。

60
main.js
View File

File diff suppressed because one or more lines are too long

1
mdicons/black_icons/ios_status.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="96px" viewBox="0 0 96 17"><path fill="#000" d="M16 5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2V7c0-1.1-.9-2-2-2zm7-4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2s2-.9 2-2V3c0-1.1-.9-2-2-2zM9 8c-1.1 0-2 .9-2 2v5c0 1.1.9 2 2 2s2-.9 2-2v-5c0-1.1-.9-2-2-2zm-7 3c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2s2-.9 2-2v-2c0-1.1-.9-2-2-2zm87-8H66c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h23c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0-2H66c-2.21 0-4 1.79-4 4v8c0 2.21 1.79 4 4 4h23c2.21 0 4-1.79 4-4V5c0-2.21-1.79-4-4-4zm3 12c0 1.66-1.34 3-3 3H66c-1.66 0-3-1.34-3-3V5c0-1.66 1.34-3 3-3h23c1.66 0 3 1.34 3 3v8zm2.5-6H94v4h.5c.83 0 1.5-.67 1.5-1.5v-1c0-.83-.67-1.5-1.5-1.5zm-54.93 6.2 3.83 3.79 4-3.96c-.98-.79-2.31-1.29-3.8-1.29-1.61 0-3.04.57-4.03 1.46zm4.02-7.33c-3.28 0-6.17 1.41-7.84 3.54l2.63 2.36c.87-1.5 3.03-1.99 5.2-1.99 2.06 0 4.1.62 5.02 1.99l2.64-2.56c-1.68-2.02-4.48-3.34-7.65-3.34zm0-5.87c-4.97 0-9.29 2.3-11.58 5.7l2.54 2.14c1.44-2.78 5.18-3.93 9.04-3.93 3.74 0 7.35 1.28 8.85 3.93L55 5.47C52.68 2.2 48.45 0 43.59 0z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
mdicons/white_icons/ios_status.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="96px" height="17px" viewBox="0 0 96 17"><path fill="#fff" d="M16 5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2V7c0-1.1-.9-2-2-2zm7-4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2s2-.9 2-2V3c0-1.1-.9-2-2-2zM9 8c-1.1 0-2 .9-2 2v5c0 1.1.9 2 2 2s2-.9 2-2v-5c0-1.1-.9-2-2-2zm-7 3c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2s2-.9 2-2v-2c0-1.1-.9-2-2-2zm87-8H66c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h23c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0-2H66c-2.21 0-4 1.79-4 4v8c0 2.21 1.79 4 4 4h23c2.21 0 4-1.79 4-4V5c0-2.21-1.79-4-4-4zm3 12c0 1.66-1.34 3-3 3H66c-1.66 0-3-1.34-3-3V5c0-1.66 1.34-3 3-3h23c1.66 0 3 1.34 3 3v8zm2.5-6H94v4h.5c.83 0 1.5-.67 1.5-1.5v-1c0-.83-.67-1.5-1.5-1.5zm-54.93 6.2 3.83 3.79 4-3.96c-.98-.79-2.31-1.29-3.8-1.29-1.61 0-3.04.57-4.03 1.46zm4.02-7.33c-3.28 0-6.17 1.41-7.84 3.54l2.63 2.36c.87-1.5 3.03-1.99 5.2-1.99 2.06 0 4.1.62 5.02 1.99l2.64-2.56c-1.68-2.02-4.48-3.34-7.65-3.34zm0-5.87c-4.97 0-9.29 2.3-11.58 5.7l2.54 2.14c1.44-2.78 5.18-3.93 9.04-3.93 3.74 0 7.35 1.28 8.85 3.93L55 5.47C52.68 2.2 48.45 0 43.59 0z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

26
style.css
View File

@@ -11,6 +11,10 @@ body {
top: 0;
}
#fakeWechatMoment.iosStyle {
font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "Apple WebExp Icons Custom", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.topBar {
width: calc(100% - 32px);
height: 72px;
@@ -20,11 +24,25 @@ body {
color: #fff;
display: flex;
justify-content: space-between;
align-items: Center;
align-items: center;
padding-left: 16px;
padding-right: 16px;
}
.topBarIos {
width: calc(100% - 256px);
background-color: #303030;
font-size: 40px;
font-weight: 900;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 52px;
padding-left: 128px;
padding-right: 128px;
}
.header {
width: 100%;
height: 132px;
@@ -260,11 +278,12 @@ body {
color: #fff;
}
.whiteUI #topBarTime {
.whiteUI #topBarTime, .whiteUI #topBarTimeIos {
color: #000;
}
.whiteUI .topBar,
.whiteUI .topBarIos,
.whiteUI .header {
background-color: #efefef;
color: #181818;
@@ -273,6 +292,9 @@ body {
.whiteUI #topBarTime {
color: #626262;
}
.whiteUI #topBarTimeIos {
color: #000;
}
.whiteUI .squareImage {
border-radius: 10px;