feat: migrate less to tailwind

package.json

@@ -36,7 +36,6 @@
     "@types/react-dom": "^18.3.7",
     "@types/lodash": "^4.14.189",
     "@types/node": "^22.18.6",
-    "less": "^4.2.2",
     "typescript": "5.9.3",
     "gh-pages": "^3.1.0",
     "prettier": "^2.0.0"
@@ -49,7 +48,7 @@
     "preview": "astro preview",
     "deploy": "npm run build && npm run gh-pages",
     "gh-pages": "gh-pages -d dist",
-    "format": "prettier --write \"**/*.{ts,tsx,js,mjs,json,md,less}\""
+    "format": "prettier --write \"**/*.{ts,tsx,js,mjs,json,md,css}\""
   },
   "type": "module",
   "engines": {

src/components/ComplexCharts/index.tsx

@@ -1,32 +1,28 @@
-import classNames from 'classnames';
 import { useTranslation } from '../../lib/i18n';
 import { useState } from 'react';
 import COMPLEX_DATAS from '../../data/complex-charts.json';
 import { transformUrl } from '../../lib/urls';
 
-import styles from './index.module.less';
-
 // 性能飞跃，专业优雅
 export function ComplexCharts() {
-
   const { locale: language, t: useT } = useTranslation();
 
   const [select, setSelect] = useState(COMPLEX_DATAS[0]);
 
   return (
-    <div className={styles.complexCharts}>
-      <h2 className={styles.title}>{useT('性能飞跃，专业优雅')}</h2>
-      <div className={styles.complexButtons}>
+    <div className="flex items-center justify-center flex-col pt-20 pb-10 font-sans tablet:px-6 mobile:pt-12 mobile:px-5 mobile:pb-6">
+      <h2 className="h-auto mt-0 mb-12 text-[40px] text-[#1d2129] font-sans font-bold mobile:text-[28px] mobile:leading-[1.3] mobile:text-center mobile:mb-6">
+        {useT('性能飞跃，专业优雅')}
+      </h2>
+      <div className="flex justify-center mb-8 mobile:gap-2 mobile:flex-wrap">
         {COMPLEX_DATAS.map((data) => {
           const isSelect = select.text === data.text;
           return (
             <button
               key={data.text}
               type="button"
               aria-pressed={isSelect}
-              className={classNames(styles.button, {
-                [styles.isSelect]: isSelect,
-              })}
+              className="flex items-center justify-center h-[52px] w-40 cursor-pointer bg-white border-2 border-solid border-[#e5e8ef] rounded-lg mr-5 leading-[52px] text-[18px] [&>img]:mr-2 hover:font-medium hover:border-[#691eff] aria-pressed:font-medium aria-pressed:border-[#691eff] aria-pressed:text-[#691eff] mobile:w-auto mobile:min-w-[88px] mobile:m-0 mobile:px-2 mobile:text-[14px]"
               onClick={() => setSelect(data)}
             >
               <img src={isSelect ? data.activeImg : data.img} alt={data.text} />{' '}
@@ -36,7 +32,7 @@ export function ComplexCharts() {
         })}
       </div>
       <a
-        className={styles.content}
+        className="w-[calc(100vw_-_360px)] h-[calc((100vw_-_360px)*(571/1680))] max-w-[1680px] min-w-[1040px] max-h-[571px] min-h-[353px] rounded-2xl box-border shadow-[0_8px_28px_0_rgba(0,0,0,0.2)] overflow-hidden [&>video]:w-full [&>video]:h-full [&>video]:bg-cover tablet:w-full tablet:min-w-0 tablet:min-h-0 tablet:h-auto tablet:aspect-[1680/571] tablet:[&>video]:block"
         href={transformUrl({ url: select.link, language })}
         target="_blank"
       >

src/components/FamousPersons/index.tsx

@@ -5,8 +5,6 @@ import { useEffect, useRef, useState } from 'react';
 import FAMOUS_PERSONS_DATAS from '../../data/famous-persons.json';
 import { OverflowedText, ModuleTitle as Title } from '../common';
 
-import styles from './index.module.less';
-
 // 专家之声
 export function FamousPersons() {
   const { locale: language, t: useT } = useTranslation();
@@ -43,39 +41,55 @@ export function FamousPersons() {
   }, []);
 
   return (
-    <div
-      className={classNames(styles.famousPersons, {
-        [styles.en]: language === 'en',
-      })}
-    >
+    <div className="flex items-center justify-center pt-20 pb-[120px] flex-col overflow-hidden tablet:px-6 mobile:py-12 mobile:px-5">
       <Title
         title={useT('专家之声')}
         subTitle={useT('来自数据可视化专家的专业认可与推荐')}
       />
-      <div className={styles.famousAuctions}>
+      <div className="flex items-center justify-center mb-7 py-2 font-sans tablet:w-full tablet:flex-wrap tablet:gap-5">
         {FAMOUS_PERSONS_DATAS.map((data) => {
           const filter = `drop-shadow(${data.color} 80px 0)`;
           return (
-            <div key={data.name} className={styles.famousAuction}>
-              <div className={styles.image}>
-                <img src={data.image} alt="image" />
+            <div
+              key={data.name}
+              className={classNames(
+                language === 'en'
+                  ? 'h-[377px]'
+                  : 'h-[calc((1680px_-_100vw)/10_+_370px)]',
+                'flex items-center justify-between flex-col max-h-[377px] min-h-[350px] w-[calc((100vw_-_464px)/4)] min-w-[239px] max-w-[399px] pt-[29px] px-5 pb-5 relative mx-[14px] tracking-normal transition-all duration-200 ease-[ease] bg-white border border-solid border-[#e5e8ef] shadow-[0_8px_28px_0_rgba(0,0,0,0.05)] rounded-2xl hover:-translate-y-2 hover:shadow-[0_8px_20px_0_rgba(0,0,0,0.1)] tablet:w-[calc(50%_-_10px)] tablet:min-w-0 tablet:m-0 tablet:max-w-none mobile:w-full',
+              )}
+            >
+              <div className="relative overflow-hidden">
+                <img
+                  src={data.image}
+                  alt="image"
+                  className="h-[60px] w-[60px]"
+                />
                 <img
                   src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*XGF5T7Atc7kAAAAAAAAAAAAADmJ7AQ/original"
-                  className={styles.icon}
+                  className="absolute -top-[2px] -left-20 h-[14px] w-[14px]"
                   style={{ filter }}
                   alt="icon"
                 />
               </div>
-              <div className={styles.name}>{useT(data.name)}</div>
-              <div className={styles.text} ref={textRef}>
+              <div className="my-1 text-[20px] text-[#1d2129] font-medium font-sans">
+                {useT(data.name)}
+              </div>
+              <div
+                className="leading-7 h-14 text-[14px] text-[#424e66] line-clamp-2 text-ellipsis"
+                ref={textRef}
+              >
                 <OverflowedText
                   text={useT(data.text)}
                   {...textSize}
                   style={{ fontSize: 14, lineHeight: 2 }}
                 />
               </div>
-              <div className={styles.hr} />
-              <div className={styles.msg} ref={msgRef}>
+              <div className="w-full [border-top:1px_solid_#f5f5f5] my-[14px]" />
+              <div
+                className="text-[#86909c] flex-1 overflow-hidden"
+                ref={msgRef}
+              >
                 <OverflowedText
                   text={useT(data.msg)}
                   {...msgSize}