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/detail/components/VenueInfo/index.module.scss
+++ b/src/game_pages/detail/components/VenueInfo/index.module.scss
@@ -0,0 +1,115 @@
+.detail-page-content-venue {
+  padding: 24px 15px 0;
+  box-sizing: border-box;
+
+  .venue-detail-title {
+    display: flex;
+    height: 31px;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    padding-bottom: 6px;
+    color: #fff;
+    text-overflow: ellipsis;
+    font-family: "PingFang SC";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+    .venue-reserve-status {
+      display: inline-flex;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 4px;
+      .venue-reserve-screenshot {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  .venue-detail-content {
+    padding: 16px 0 0;
+    box-sizing: border-box;
+
+    &-tags {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+
+      &-tag {
+        overflow: hidden;
+        color: #fff;
+        font-feature-settings: "liga" off, "clig" off;
+        text-overflow: ellipsis;
+        font-family: "PingFang SC";
+        font-size: 15px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px; /* 160% */
+      }
+    }
+
+    &-remarks {
+      overflow: hidden;
+      color: rgba(255, 255, 255, 0.65);
+      // font-feature-settings: 'liga' off, 'clig' off;
+      // text-overflow: ellipsis;
+      // white-space: nowrap;
+      font-family: "PingFang SC";
+      font-size: 15px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px; /* 160% */
+    }
+  }
+
+  .venue-screenshot-title {
+    display: flex;
+    padding: 18px 20px 10px 20px;
+    align-items: center;
+    align-self: stretch;
+    font-family: "PingFang SC";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px; /* 150% */
+    letter-spacing: -0.23px;
+  }
+
+  .venue-screenshot-scroll-view {
+    max-height: calc(100vh - 260px);
+    overflow-y: auto;
+    padding-bottom: 40px;
+
+    .venue-screenshot-image-list {
+      width: 100%;
+      padding: 0 16px;
+      box-sizing: border-box;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px 10px;
+
+      .venue-screenshot-image-item {
+        aspect-ratio: 1/1;
+        border-radius: 9px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+        box-sizing: border-box;
+        background: rgba(0, 0, 0, 0.06);
+        margin: 0;
+        position: relative;
+
+        .venue-screenshot-image-item-image {
+          width: 100%;
+          height: 100%;
+          border-radius: 9px;
+          margin: 0;
+          object-fit: cover;
+        }
+      }
+    }
+  }
+}