update pay function

src/views/ValueForum/PredictionTopicDetail.js

@@ -174,8 +174,8 @@ const PredictionTopicDetail = () => {
   };
 
   return (
-    <Box minH="100vh" bg={forumColors.background.main} pt="80px" pb="20">
-      <Container maxW="container.xl">
+    <Box minH="100vh" bg={forumColors.background.main} pt={{ base: "60px", md: "80px" }} pb={{ base: "6", md: "20" }}>
+      <Container maxW="container.xl" px={{ base: "3", sm: "4", md: "6" }}>
         {/* 头部：返回按钮 */}
         <Button
           variant="ghost"
@@ -206,8 +206,8 @@ const PredictionTopicDetail = () => {
                 {/* 头部 */}
                 <Box
                   bg={forumColors.gradients.goldSubtle}
-                  px="6"
-                  py="4"
+                  px={{ base: "4", md: "6" }}
+                  py={{ base: "3", md: "4" }}
                   borderBottom="1px solid"
                   borderColor={forumColors.border.default}
                 >
@@ -233,15 +233,16 @@ const PredictionTopicDetail = () => {
 
                   <Heading
                     as="h1"
-                    fontSize="2xl"
+                    fontSize={{ base: "lg", md: "2xl" }}
                     fontWeight="bold"
                     color={forumColors.text.primary}
-                    mt="4"
+                    mt={{ base: "3", md: "4" }}
+                    lineHeight="1.4"
                   >
                     {topic.title}
                   </Heading>
 
-                  <Text fontSize="md" color={forumColors.text.secondary} mt="3">
+                  <Text fontSize={{ base: "sm", md: "md" }} color={forumColors.text.secondary} mt={{ base: "2", md: "3" }}>
                     {topic.description}
                   </Text>
 
@@ -265,15 +266,15 @@ const PredictionTopicDetail = () => {
                 </Box>
 
                 {/* 市场数据 */}
-                <Box p="6">
-                  <SimpleGrid columns={{ base: 1, md: 2 }} spacing="6">
+                <Box p={{ base: "4", md: "6" }}>
+                  <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: "4", md: "6" }}>
                     {/* Yes 方 */}
                     <Box
                       bg="linear-gradient(135deg, rgba(72, 187, 120, 0.1) 0%, rgba(72, 187, 120, 0.05) 100%)"
                       border="2px solid"
                       borderColor="green.400"
                       borderRadius="xl"
-                      p="6"
+                      p={{ base: "4", md: "6" }}
                       position="relative"
                     >
                       {yesData.lord_id && (
@@ -344,7 +345,7 @@ const PredictionTopicDetail = () => {
                       border="2px solid"
                       borderColor="red.400"
                       borderRadius="xl"
-                      p="6"
+                      p={{ base: "4", md: "6" }}
                       position="relative"
                     >
                       {noData.lord_id && (
@@ -439,14 +440,14 @@ const PredictionTopicDetail = () => {
 
           {/* 右侧：操作面板 */}
           <Box gridColumn={{ base: '1', lg: '3' }}>
-            <VStack spacing="6" align="stretch" position="sticky" top="90px">
+            <VStack spacing={{ base: "4", md: "6" }} align="stretch" position={{ base: "relative", lg: "sticky" }} top={{ base: "0", lg: "90px" }}>
               {/* 奖池信息 */}
               <Box
                 bg={forumColors.background.card}
                 borderRadius="xl"
                 border="1px solid"
                 borderColor={forumColors.border.gold}
-                p="6"
+                p={{ base: "4", md: "6" }}
               >
                 <VStack spacing="4" align="stretch">
                   <HStack justify="center" spacing="2">
@@ -457,7 +458,7 @@ const PredictionTopicDetail = () => {
                   </HStack>
 
                   <Text
-                    fontSize="4xl"
+                    fontSize={{ base: "3xl", md: "4xl" }}
                     fontWeight="bold"
                     color={forumColors.primary[500]}
                     textAlign="center"
@@ -499,7 +500,9 @@ const PredictionTopicDetail = () => {
                     color={forumColors.background.main}
                     size="lg"
                     w="full"
+                    h={{ base: "12", md: "auto" }}
                     fontWeight="bold"
+                    fontSize={{ base: "md", md: "lg" }}
                     onClick={() => handleOpenTrade('buy')}
                     _hover={{
                       transform: 'translateY(-2px)',
@@ -517,7 +520,9 @@ const PredictionTopicDetail = () => {
                     color={forumColors.text.primary}
                     size="lg"
                     w="full"
+                    h={{ base: "12", md: "auto" }}
                     fontWeight="bold"
+                    fontSize={{ base: "md", md: "lg" }}
                     onClick={() => handleOpenTrade('sell')}
                     _hover={{
                       bg: forumColors.background.hover,