diff --git a/src/activity/image/wechat-qrcode.png b/src/activity/image/wechat-qrcode.png new file mode 100644 index 000000000..aaa8baac3 Binary files /dev/null and b/src/activity/image/wechat-qrcode.png differ diff --git a/src/activity/incentiveprogram/contactFloat.jsx b/src/activity/incentiveprogram/contactFloat.jsx new file mode 100644 index 000000000..c9700c296 --- /dev/null +++ b/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 ( +
+
setIsExpanded(!isExpanded)}> + + {isExpanded ? "收起" : "联系我们"} +
+ +
+
活动专属咨询:扫码添加,快速解答您的疑问
+ +
+ 微信二维码 +
+ +
+
微信
+
GR
+
+ +
+
邮箱
+
gr@chancefoundation.org.cn
+
+
+
+ ); +} diff --git a/src/activity/incentiveprogram/contactFloat.scss b/src/activity/incentiveprogram/contactFloat.scss new file mode 100644 index 000000000..4cc9dc92a --- /dev/null +++ b/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; + } + } +} diff --git a/src/activity/incentiveprogram/index.jsx b/src/activity/incentiveprogram/index.jsx index b194d07c4..757af1ce0 100644 --- a/src/activity/incentiveprogram/index.jsx +++ b/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
+