开源激励新增qrcode

src/activity/incentiveprogram/contactFloat.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import "./contactFloat.scss";
+import { Icon } from "antd";
+
+export default function ContactFloat() {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div className={`contact-float ${isExpanded ? "expanded" : ""}`}>
+      <div className="contact-float-toggle" onClick={() => setIsExpanded(!isExpanded)}>
+        <Icon type={isExpanded ? "close" : "customer-service"} />
+        <span className="contact-float-text">{isExpanded ? "收起" : "联系我们"}</span>
+      </div>
+      
+      <div className="contact-float-content">
+        <div className="contact-float-tip">活动专属咨询：扫码添加，快速解答您的疑问</div>
+        
+        <div className="contact-float-qrcode">
+          <img src={require("../image/wechat-qrcode.png")} alt="微信二维码" width={120} height={120} />
+        </div>
+        
+        <div className="contact-float-wechat">
+          <div className="contact-float-wechat-label">微信</div>
+          <div className="contact-float-wechat-id">GR</div>
+        </div>
+        
+        <div className="contact-float-email">
+          <div className="contact-float-wechat-label">邮箱</div>
+          <div className="contact-float-wechat-id">gr@chancefoundation.org.cn</div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/activity/incentiveprogram/contactFloat.scss

@@ -0,0 +1,96 @@
+.contact-float {
+  position: fixed;
+  right: 0;
+  top: 20%;
+//   transform: translateY(-50%);
+  transform: translateX(100%);
+  z-index: 1000;
+  transition: all 0.3s ease;
+
+  .contact-float-toggle {
+    position: absolute;
+    // right: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(132.09deg, #4689ff 0%, #5182ff 28.18%, #b546ff 100%);
+    color: white;
+    padding: 12px 8px;
+    border-radius: 8px 0 0 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    writing-mode: vertical-lr;
+    font-size: 14px;
+    box-shadow: -2px 0 8px rgba(70, 106, 255, 0.3);
+    transition: all 0.3s ease;
+
+    &:hover {
+      padding-right: 12px;
+    }
+
+    .anticon {
+      font-size: 18px;
+    }
+  }
+
+  .contact-float-content {
+    width: 200px;
+    padding: 20px;
+    overflow: hidden;
+    background: white;
+    border-radius: 0 0 0 12px;
+    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &.expanded {
+    transform: translatex(0);
+  }
+
+  .contact-float-tip {
+    font-size: 12px;
+    color: #666;
+    text-align: center;
+    margin-bottom: 16px;
+    line-height: 1.5;
+  }
+
+  .contact-float-qrcode {
+    text-align: center;
+    margin-bottom: 16px;
+
+    img {
+      border-radius: 8px;
+      border: 1px solid #f0f0f0;
+    }
+  }
+
+  .contact-float-wechat,
+  .contact-float-email {
+    text-align: center;
+    padding-top: 12px;
+    width: 100%;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid #f0f0f0;
+      padding-bottom: 12px;
+      margin-bottom: 4px;
+    }
+
+    .contact-float-wechat-label {
+      font-size: 12px;
+      color: #999;
+      margin-bottom: 4px;
+    }
+
+    .contact-float-wechat-id {
+      font-size: 14px;
+      color: #333;
+      font-weight: 500;
+      word-break: break-all;
+    }
+  }
+}

src/activity/incentiveprogram/index.jsx

@@ -5,6 +5,7 @@ import { Divider, Icon } from "antd";
 import Light from "./light";
 import Project from "./project";
 import Time from "./time";
+import ContactFloat from "./contactFloat";
 
 function Incentiveprogram(props) {
 
@@ -35,6 +36,7 @@ function Incentiveprogram(props) {
   ]
 
   return <div className="incentiveprogram_box">
+    <ContactFloat/>
     <div className="banner_Incentiveprogram">
       <div className="banner_item_box">
         <span className="banner_item_1 color-white">