style: pay page perf (#2535)

* style: pay page perf

* perf: package status logic && add pay text

projects/app/src/pages/price/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { serviceSideProps } from '@/web/common/utils/i18n';
-import { Box } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { getTeamPlanStatus } from '@/web/support/user/team/api';
 import { useQuery } from '@tanstack/react-query';
@@ -26,13 +26,14 @@ const PriceBox = () => {
   return (
     <>
       <Script src="/js/qrcode.min.js" strategy="lazyOnload"></Script>
-      <Box
+      <Flex
         h={'100%'}
+        flexDir={'column'}
         overflow={'overlay'}
         w={'100%'}
         px={['20px', '5vw']}
         py={['30px', '80px']}
-        backgroundImage={'url(/imgs/priceBg.svg)'}
+        bg={`linear-gradient(to right, #F8F8FD00, #F7F7FF),url(/imgs/priceBg.svg)`}
         backgroundSize={'cover'}
         backgroundRepeat={'no-repeat'}
       >
@@ -49,7 +50,7 @@ const PriceBox = () => {
 
         {/* question */}
         <FAQ />
-      </Box>
+      </Flex>
     </>
   );
 };