feat: detail static over

src/pages/detail/index.scss

@@ -923,6 +923,52 @@
         border-radius: 16px;
         border: 1px solid rgba(255, 255, 255, 0.06);
         background: #FFF;
+
+        .sticky-bottom-bar-share {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          gap: 4px;
+
+          &-icon {
+            width: 16px;
+            height: 16px;
+          }
+
+          &-text {
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 10px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 16px; /* 160% */
+          }
+        }
+
+        &-separator {
+          width: 1px;
+          height: 24px;
+          background: rgba(0, 0, 0, 0.10);
+        }
+
+        .sticky-bottom-bar-comment {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          gap: 4px;
+
+          &-icon {
+            width: 16px;
+            height: 16px;
+          }
+
+          &-text {
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 10px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 16px; /* 160% */
+          }
+        }
       }
 
       &-join-game {

src/pages/detail/index.tsx

@@ -22,6 +22,10 @@ function insertDotInTags(tags: string[]) {
   return tags.join('-·-').split('-')
 }
 
+function handleShare() {
+
+}
+
 function Index() {
   // 使用Zustand store
   // const userStats = useUserStats()
@@ -439,8 +443,15 @@ function Index() {
         {/* sticky bottom action bar */}
         <View className="sticky-bottom-bar">
           <View className="sticky-bottom-bar-share-and-comment">
-            <View></View>
+            <View className='sticky-bottom-bar-share' onClick={handleShare}>
-            <View></View>
+              <Image className='sticky-bottom-bar-share-icon' src={img.ICON_DETAIL_SHARE} />
+              <Text className='sticky-bottom-bar-share-text'>分享</Text>
+            </View>
+            <View className='sticky-bottom-bar-share-and-comment-separator' />
+            <View className='sticky-bottom-bar-comment' onClick={() => { Taro.showToast({ title: 'To be continued', icon: 'none' }) }}>
+              <Image className='sticky-bottom-bar-comment-icon' src={img.ICON_DETAIL_COMMENT_DARK} />
+              <Text className='sticky-bottom-bar-comment-text'>32</Text>
+            </View>
           </View>
           <View className="sticky-bottom-bar-join-game">
             <Text>🎾</Text>