change ui of price (#4851)

Co-authored-by: dreamer6680 <146868355@qq.com>

packages/web/components/common/Icon/constants.ts

@@ -439,6 +439,7 @@ export const iconPaths = {
   point: () => import('./icons/point.svg'),
   preview: () => import('./icons/preview.svg'),
   'price/bg': () => import('./icons/price/bg.svg'),
+  'price/pricearrow': () => import('./icons/price/pricearrow.svg'),
   'price/right': () => import('./icons/price/right.svg'),
   save: () => import('./icons/save.svg'),
   sliderTag: () => import('./icons/sliderTag.svg'),

packages/web/components/common/Icon/icons/price/pricearrow.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="41" viewBox="0 0 23 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.487322 0.838902C5.52993 0.392809 14.4127 1.30573 19.3633 8.23636L19.7315 8.77445C23.4021 14.3865 23.0442 21.6048 19.9483 26.9717C17.7504 30.7815 14.1557 33.6822 9.62013 34.4327C9.59005 34.4426 9.55881 34.45 9.52638 34.4541C9.52493 34.4546 9.5225 34.4561 9.51955 34.4571C9.5153 34.4585 9.50623 34.4621 9.49806 34.4649L9.41994 34.4873C9.41814 34.4879 9.41426 34.49 9.40724 34.4922C9.39802 34.4952 9.37728 34.5023 9.35939 34.5078C9.3403 34.5137 9.31328 34.5214 9.2842 34.5284L9.1592 34.5469L8.89748 34.5459L8.79006 34.544C7.42741 34.6867 5.98678 34.6389 4.47853 34.3672C4.53191 34.4008 4.6025 34.4492 4.66799 34.5147C4.69099 34.5376 4.72144 34.5593 4.80959 34.6211C4.8805 34.6708 5.00368 34.7557 5.10646 34.878L5.13967 34.919C5.14802 34.9291 5.15311 34.935 5.15627 34.9385L5.41017 35.1338C5.6673 35.3405 5.90801 35.5576 6.13576 35.7627C6.44566 36.0419 6.73402 36.3007 7.04494 36.5264L7.20998 36.6602C7.36441 36.8001 7.49012 36.9562 7.59279 37.0967L7.68263 37.1787C7.73953 37.2274 7.85194 37.3224 7.94045 37.46L7.96291 37.4883C7.99181 37.5184 8.044 37.5555 8.15529 37.6202C8.27226 37.6881 8.51757 37.8164 8.6924 38.041L8.87306 38.2422C8.93835 38.3118 9.01823 38.4008 9.09572 38.5069C9.42285 38.7501 9.7519 38.9908 10.084 39.2266L10.3828 39.42C10.4872 39.4826 10.5969 39.5441 10.7119 39.6084C10.8236 39.6709 10.9418 39.7372 11.0615 39.8067L11.4199 40.0274L11.4981 40.0918C11.6617 40.257 11.6926 40.5197 11.5586 40.7207C11.4246 40.9213 11.1703 40.9945 10.9551 40.9073L10.8653 40.8594L10.5606 40.6709C10.4541 40.6092 10.3418 40.5476 10.2236 40.4815C10.052 40.3854 9.86755 40.2816 9.68556 40.1641L9.5049 40.042C9.41935 39.9813 9.33432 39.9197 9.24904 39.8584C9.2181 39.8524 9.1871 39.8442 9.15724 39.8321L9.06838 39.7842L8.88869 39.667C8.73114 39.5618 8.55702 39.4327 8.3965 39.2383L8.38967 39.2295C8.00348 38.941 7.62059 38.6476 7.2422 38.3487L6.50783 37.7569C6.00954 37.3479 5.57646 36.9545 5.12013 36.5811L4.65236 36.2149C4.41843 36.0403 4.17408 35.8774 3.92092 35.7198L3.13967 35.2539C3.00588 35.1761 2.86098 35.1009 2.69631 35.0137C2.53656 34.9291 2.36142 34.8357 2.19142 34.7305C1.89714 34.5484 1.58338 34.3126 1.34963 33.9825L1.2549 33.835L1.21291 33.7432C1.21251 33.742 1.21232 33.7405 1.21193 33.7393C1.08214 33.4994 1.16845 33.1982 1.40724 33.0645L3.10842 32.1084C3.68186 31.7899 4.26243 31.477 4.85158 31.1846L5.51271 30.8682C6.1781 30.5614 6.85297 30.2778 7.49806 29.9903L8.07424 29.7295C8.64423 29.4677 9.19873 29.1967 9.72951 28.8877L9.99416 28.7246C10.0791 28.6011 10.2177 28.5164 10.3789 28.5078C10.3824 28.5077 10.3862 28.5088 10.3897 28.5088C10.3915 28.5085 10.3937 28.5073 10.3955 28.5069C10.4079 28.5048 10.4781 28.4925 10.5654 28.5078C10.6116 28.516 10.7084 28.5395 10.8018 28.6182C10.9121 28.7113 10.972 28.8433 10.9785 28.9766C10.9839 29.0882 10.9514 29.1725 10.9336 29.211C10.9138 29.2537 10.8915 29.2851 10.8789 29.3018C10.8541 29.3349 10.8303 29.3577 10.8213 29.3662C10.8008 29.3857 10.7823 29.401 10.7754 29.4063L10.6533 29.4912C10.5861 29.5373 10.5101 29.5851 10.4365 29.6299L10.2324 29.752C9.66368 30.0831 9.07573 30.3708 8.49025 30.6397L7.90529 30.9034C7.23393 31.2026 6.579 31.4778 5.93556 31.7744L5.29592 32.0801C4.80426 32.3242 4.32055 32.583 3.83791 32.8487L3.93849 32.8799L4.09963 32.9278C4.16584 32.9496 4.26199 32.9861 4.35646 33.0479L4.41213 33.0713C4.44909 33.0849 4.49227 33.0981 4.53517 33.1094L4.90236 33.2129C5.0111 33.2435 5.11243 33.2689 5.22365 33.2891L5.49416 33.3506C5.57406 33.3703 5.63482 33.3852 5.6924 33.3946L6.34084 33.5C6.45433 33.5184 6.57269 33.5275 6.70802 33.5371C6.83757 33.5463 6.99208 33.5564 7.14455 33.5743L7.26662 33.5801C7.31235 33.5802 7.36473 33.5787 7.42677 33.5762C7.53858 33.5718 7.69494 33.5634 7.85256 33.5772H7.94631C7.98429 33.5753 8.02868 33.5718 8.07717 33.5664L8.40431 33.5352L8.48146 33.5293C8.50488 33.5292 8.52576 33.5306 8.54299 33.5323C8.56567 33.5345 8.58567 33.5385 8.59963 33.541C8.64475 33.5413 8.69333 33.5426 8.74318 33.543C13.3027 33.0453 16.9045 30.2471 19.082 26.4727C22.0174 21.3845 22.3308 14.5763 18.8945 9.32132L18.5498 8.81742C13.9144 2.32808 5.50466 1.3989 0.575212 1.835C0.300419 1.85909 0.0577133 1.65566 0.0332203 1.38089C0.00891035 1.10592 0.212384 0.863353 0.487322 0.838902ZM9.49123 34.461C9.49697 34.4606 9.506 34.46 9.51564 34.458C9.51858 34.4574 9.52136 34.4556 9.52345 34.4551C9.51294 34.4564 9.50195 34.4604 9.49123 34.461Z" fill="#DC7E03"/>
+</svg>

packages/web/i18n/en/common.json

@@ -1159,6 +1159,7 @@
   "support.wallet.subscription.function.Points": "{{amount}} AI Points",
   "support.wallet.subscription.mode.Month": "Month",
   "support.wallet.subscription.mode.Period": "Subscription Period",
+  "support.wallet.subscription.mode.Ten Year": "Pay 10 months, imagine 1 year!",
   "support.wallet.subscription.mode.Year": "Year",
   "support.wallet.subscription.mode.Year sale": "Two Months Free",
   "support.wallet.subscription.point": "Points",

packages/web/i18n/zh-CN/common.json

@@ -1158,6 +1158,7 @@
   "support.wallet.subscription.function.Points": "{{amount}} AI 积分",
   "support.wallet.subscription.mode.Month": "按月",
   "support.wallet.subscription.mode.Period": "订阅周期",
+  "support.wallet.subscription.mode.Ten Year": "支付10个月，畅想1年！",
   "support.wallet.subscription.mode.Year": "按年",
   "support.wallet.subscription.mode.Year sale": "赠送两个月",
   "support.wallet.subscription.point": "积分",

packages/web/i18n/zh-Hant/common.json

@@ -1158,6 +1158,7 @@
   "support.wallet.subscription.function.Points": "{{amount}} AI 點數",
   "support.wallet.subscription.mode.Month": "按月",
   "support.wallet.subscription.mode.Period": "訂閱週期",
+  "support.wallet.subscription.mode.Ten Year": "支付10個月，暢想1年！",
   "support.wallet.subscription.mode.Year": "按年",
   "support.wallet.subscription.mode.Year sale": "贈送兩個月",
   "support.wallet.subscription.point": "點數",

projects/app/src/pageComponents/price/Standard.tsx

@@ -74,35 +74,45 @@ const Standard = ({
   return (
     <>
       <Flex flexDirection={'column'} alignItems={'center'} position={'relative'}>
-        <Box>
-          <RowTabs
-            list={[
-              {
-                label: t('common:support.wallet.subscription.mode.Month'),
-                value: SubModeEnum.month
-              },
-              {
-                label: (
-                  <Flex>
+        <Flex>
+          <Box>
+            <Box
+              textAlign={'right'}
+              color="#DC7E03"
+              fontWeight="500"
+              fontStyle="italic"
+              fontFamily={'JiangChengXieHei'}
+              fontSize={'14px'}
+              lineHeight={'20px'}
+              letterSpacing={'0.1px'}
+              textTransform={'lowercase'}
+              mb={2}
+              mr={'-2'}
+            >
+              {t('common:support.wallet.subscription.mode.Ten Year')}
+            </Box>
+            <RowTabs
+              list={[
+                {
+                  label: t('common:support.wallet.subscription.mode.Month'),
+                  value: SubModeEnum.month
+                },
+                {
+                  label: (
                     <Box whiteSpace={'nowrap'}>
                       {t('common:support.wallet.subscription.mode.Year')}
                     </Box>
-                    <Box
-                      whiteSpace={'nowrap'}
-                      ml={1}
-                      color={selectSubMode === SubModeEnum.month ? 'red.600' : 'auto'}
-                    >
-                      ({t('common:support.wallet.subscription.mode.Year sale')})
-                    </Box>
-                  </Flex>
-                ),
-                value: SubModeEnum.year
-              }
-            ]}
-            value={selectSubMode}
-            onChange={(e) => setSelectSubMode(e as `${SubModeEnum}`)}
-          />
-        </Box>
+                  ),
+                  value: SubModeEnum.year
+                }
+              ]}
+              value={selectSubMode}
+              onChange={(e) => setSelectSubMode(e as `${SubModeEnum}`)}
+            />
+          </Box>
+          <MyIcon name={'price/pricearrow'} mt={'10px'} ml={'3px'} />
+        </Flex>
+
         {/* card */}
         <Grid
           mt={[10, '48px']}