feat: 生成分享图

2025-10-15 11:20:36 +08:00
parent 56fd71f266
commit 77e50731a3
30 changed files with 2756 additions and 2641 deletions
--- a/src/game_pages/sharePoster/index.module.scss
+++ b/src/game_pages/sharePoster/index.module.scss
@@ -0,0 +1,101 @@
+.navbar {
+  box-shadow: none;
+}
+
+.posterContainer {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(180deg, #fff 0%, #fafafa 100%), #fff;
+  padding: 100px 20px 40px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  // gap: 20px;
+}
+
+.posterWrap {
+  width: 100%;
+  border-radius: 19.067px;
+  // border: 1px solid rgba(0, 0, 0, 0.06);
+  // background: linear-gradient(180deg, #bfffef 0%, #f2fffc 100%), #fff;
+  // box-shadow: 0 6.933px 55.467px 0 rgba(0, 0, 0, 0.1);
+  // overflow: hidden;
+  box-sizing: border-box;
+  .imageContainer {
+    width: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+
+    .poster {
+      border-radius: 12px;
+      box-shadow: 0 6.933px 55.467px 0 rgba(0, 0, 0, 0.1);
+      width: 100%;
+    }
+  }
+}
+
+.sharePoster {
+  width: 100%;
+  margin-top: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .shareItem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    color: rgba(0, 0, 0, 0.85);
+    font-feature-settings: "liga" off, "clig" off;
+    font-family: "PingFang SC";
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+
+    background-color: #fff;
+    border: none;
+    padding: 0;
+    margin: 0;
+    line-height: normal;
+    font-size: inherit;
+    color: inherit;
+
+    &:after {
+      border: none;
+      background: transparent;
+    }
+
+    .icon {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid rgba(0, 0, 0, 0.06);
+      box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1);
+
+      &.wechatIcon {
+        background-color: #07c160;
+      }
+      .download {
+        width: 28px;
+        height: 28px;
+      }
+      .wechat {
+        width: 36px;
+        height: 30px;
+      }
+      .timeline {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+}