feat: 完成代码编写

apps/user/components/language-switch.tsx

@@ -37,7 +37,7 @@ const languages = {
   'uk-UA': 'Українська',
   'vi-VN': 'Tiếng Việt',
   'zh-CN': '简体中文',
-  'zh-HK': '繁體中文',
+  // 'zh-HK': '繁體中文',
 } as const;
 
 export default function LanguageSwitch() {

apps/user/components/main/OfferDialog/index.tsx

@@ -398,7 +398,23 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
             value={tabValue}
             onValueChange={setTabValue}
           >
-            <TabsList className='mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5 md:mb-16'>
+            <TabsList className='relative mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5 md:mb-16'>
+              {tabValue === 'year' ? (
+                <span className='absolute -top-8 left-16 z-10 rounded-md bg-[#E22C2E] px-2 py-0.5 text-[10px] font-bold leading-none text-white shadow sm:text-xs'>
+                  -20%
+                  {/* 小三角箭头 */}
+                  {/* <span className="
+                  absolute right-0 top-full
+                  block h-0 w-0
+                  border-l-[6px] border-r-[6px] border-t-[16px]
+                  border-l-transparent border-r-transparent border-t-[#E22C2E]
+                " />*/}
+                  <span
+                    className='absolute right-0 top-[80%] h-10 w-2 bg-[#E22C2E]'
+                    style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)' }}
+                  />
+                </span>
+              ) : null}
               <TabsTrigger
                 className={
                   'rounded-full px-10 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'

apps/user/components/subscribe/purchase.tsx

@@ -139,7 +139,23 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
                 setTabValue(val);
               }}
             >
-              <TabsList className='mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5'>
+              <TabsList className='relative mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5'>
+                {tabValue === 'year' ? (
+                  <span className='absolute -top-8 left-16 z-10 rounded-md bg-[#E22C2E] px-2 py-0.5 text-[10px] font-bold leading-none text-white shadow sm:text-xs'>
+                    -20%
+                    {/* 小三角箭头 */}
+                    {/* <span className="
+                  absolute right-0 top-full
+                  block h-0 w-0
+                  border-l-[6px] border-r-[6px] border-t-[16px]
+                  border-l-transparent border-r-transparent border-t-[#E22C2E]
+                " />*/}
+                    <span
+                      className='absolute right-0 top-[80%] h-10 w-2 bg-[#E22C2E]'
+                      style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)' }}
+                    />
+                  </span>
+                ) : null}
                 <TabsTrigger
                   className='rounded-full px-10 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
                   value='year'