perf: 优化首页样式

README.md

@@ -154,7 +154,7 @@ Features that have been ticked are the latest in the development process but may
 
 We recommend that [issue](https://github.com/027xiguapi/pear-rec/issues) be used for problem feedback.
 
-## License
+## 🤝 License
 
 [pear-rec is available under the Apache License V2.](LICENSE)
 

README.zh-CN.md

@@ -17,31 +17,31 @@
 
 [中文](README.zh-CN.md) | [English](README.md) | [Deutsch](README.de-DE.md)
 
-## 简介
+## 📖 简介
 
 > pear-rec(梨子 rec) 是一个跨平台的截图、录屏、录音、录像、录制(动图)gif、查看图片、查看视频、查看音频和修改图片的软件。
 >
 > 更多功能和 api 可以查看[官网(https://027xiguapi.github.io/pear-rec)](https://027xiguapi.github.io/pear-rec) 或 [https://xiguapi027.gitee.io/pear-rec](https://xiguapi027.gitee.io/pear-rec)
 
-## 架构
+## 🧱 架构
 
 > pear-rec(梨子 rec) 的跨平台是基于 `electronjs`,前端是基于 `reactjs`,截图、录屏、录音、录像、录制(动图)gif 等功能是基于 `webrtc` 和 `webcodecs` 的一个项目。
 
 <center>
   <img src="https://027xiguapi.github.io/pear-rec/imgs/1700442414996.jpg" />
 </center>
 
-## 例子
+## 🌰 例子
 
 [网页](https://pear-rec-xiguapi.vercel.app/)
 
-## 下载地址
+## 🧲 下载地址
 
 > gitee: https://gitee.com/xiguapi027/pear-rec
 >
 > github: https://github.com/027xiguapi/pear-rec
 
-## 源码运行&编译
+## 🔨 源码运行&编译
 
 编译需要`nodejs`和`pnpm`环境
 
@@ -75,7 +75,7 @@ pnpm run build:desktop
 pnpm run clear
 ```
 
-## 功能
+## 🥰 功能
 
 <center>
   <img src="https://027xiguapi.github.io/pear-rec/assets/home.7d9162cb.jpg" />
@@ -144,21 +144,21 @@ pnpm run clear
   - [ ] 快捷键设置
   - [ ] 重置设置
 
-## 国际化(I18n)
+## 🌍 国际化(I18n)
 
 - [x] 简体中文
 - [x] 英语
 - [x] 德语
 
-## Download
+## 👇 Download
 
 | 系统 | Windows                                                 | Linux | Macos |
 | ---- | ------------------------------------------------------- | ----- | ----- |
 | 链接 | [下载](https://github.com/027xiguapi/pear-rec/releases) | ◯     | ◯     |
 
 国内可以用 [GitHub Proxy](https://ghproxy.com/) 加速下载
 
-## 反馈和交流
+## 👨‍👨‍👦‍👦 反馈和交流
 
 我们推荐使用 [issue](https://github.com/027xiguapi/pear-rec/issues) 列表进行最直接有效的反馈，也可以下面的方式
 
@@ -168,7 +168,7 @@ pnpm run clear
   <img src="https://027xiguapi.github.io/pear-rec/imgs/pear-rec_qq_qrcode.png" />
 </p>
 
-## 开源协议
+## 🤝 开源协议
 
 [pear-rec(梨子 rec) 可在 Apache License V2 下使用。](LICENSE)
 

package.json

@@ -66,11 +66,5 @@
   "bugs": {
     "url": "https://github.com/027xiguapi/pear-rec/issues"
   },
-  "license": "Apache-2.0",
-  "pnpm": {
-    "patchedDependencies": {
-      "@webav/[email protected]": "patches/@[email protected]"
-    },
-    "allowNonAppliedPatches": true
-  }
-}
+  "license": "Apache-2.0"
+}

packages/web/src/pages/home/index.module.scss

@@ -16,6 +16,7 @@
         overflow: hidden;
         height: calc(100% - 55px);
         width: 100%;
+        z-index: -1;
         &:before:local,
         &:after:local {
           content: '';
@@ -45,7 +46,8 @@
       }
       .content {
         height: calc(100% - 45px);
-        overflow: auto;
+        overflow-x: hidden;
+        overflow-y: scroll;
       }
       .cardRow {
         margin-bottom: 10px;
@@ -123,6 +125,20 @@
   box-shadow: unset;
 }
 
+::-webkit-scrollbar {
+  width: 8px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(204, 201, 201, 0.2);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+}
+
 @keyframes rotate {
   0% {
     transform: translate(-50%, 0) rotateZ(0deg);