diff --git a/package.json b/package.json
index 83e46a48..4ba24940 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/ComplexCharts/index.module.less b/src/components/ComplexCharts/index.module.less
deleted file mode 100644
index 67e2d16a..00000000
--- a/src/components/ComplexCharts/index.module.less
+++ /dev/null
@@ -1,115 +0,0 @@
-.commonFlexConfig {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.complexCharts {
-  &:extend(.commonFlexConfig);
-  padding: 80px 0 40px;
-  flex-direction: column;
-  font-family: var(--font-sans);
-
-  .title {
-    height: auto;
-    margin-top: 0;
-    font-size: 40px;
-    color: #1d2129;
-    margin-bottom: 48px;
-    font-family: var(--font-sans);
-    font-weight: 700;
-  }
-
-  .complexButtons {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 32px;
-
-    .button {
-      &:extend(.commonFlexConfig);
-      height: 52px;
-      width: 160px;
-      cursor: pointer;
-      background-color: #ffffff;
-      border: 2px solid #e5e8ef;
-      border-radius: 8px;
-      margin-right: 20px;
-      line-height: 52px;
-      font-size: 18px;
-
-      > img {
-        margin-right: 8px;
-      }
-
-      &:hover {
-        font-weight: 500;
-        border: 2px solid #691eff;
-      }
-    }
-
-    .isSelect {
-      font-weight: 500;
-      border: 2px solid #691eff;
-      color: #691eff;
-    }
-  }
-
-  .content {
-    width: calc(100vw - 360px);
-    height: calc((100vw - 360px) * (571 / 1680));
-    max-width: 1680px;
-    min-width: 1040px;
-    max-height: 571px;
-    min-height: 353px;
-    border-radius: 16px;
-    box-sizing: border-box;
-    box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.2);
-    overflow: hidden;
-
-    > video {
-      width: 100%;
-      height: 100%;
-      background-size: cover;
-    }
-  }
-}
-
-@media (max-width: 1200px) {
-  .complexCharts {
-    padding-inline: 24px;
-    .content {
-      width: 100%;
-      min-width: 0;
-      min-height: 0;
-      height: auto;
-      aspect-ratio: 1680 / 571;
-    }
-    .content video {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-@media (max-width: 640px) {
-  .complexCharts {
-    padding: 48px 20px 24px;
-    .title {
-      font-size: 28px;
-      line-height: 1.3;
-      text-align: center;
-      margin-bottom: 24px;
-    }
-    .complexButtons {
-      gap: 8px;
-      flex-wrap: wrap;
-    }
-    .complexButtons .button {
-      width: auto;
-      min-width: 88px;
-      margin: 0;
-      padding-inline: 8px;
-      font-size: 14px;
-    }
-  }
-}
diff --git a/src/components/ComplexCharts/index.tsx b/src/components/ComplexCharts/index.tsx
index f4c1aec6..d606749a 100644
--- a/src/components/ComplexCharts/index.tsx
+++ b/src/components/ComplexCharts/index.tsx
@@ -1,22 +1,20 @@
-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 (
@@ -24,9 +22,7 @@ export function ComplexCharts() {
               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"
       >
diff --git a/src/components/FamousPersons/index.module.less b/src/components/FamousPersons/index.module.less
deleted file mode 100644
index 1c8097ce..00000000
--- a/src/components/FamousPersons/index.module.less
+++ /dev/null
@@ -1,126 +0,0 @@
-.commonFlexConfig {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.famousPersons {
-  &:extend(.commonFlexConfig);
-  padding: 80px 0 120px;
-  flex-direction: column;
-  overflow: hidden;
-
-  .famousAuctions {
-    &:extend(.commonFlexConfig);
-    margin-bottom: 28px;
-    padding: 8px 0;
-    font-family: var(--font-sans);
-
-    .famousAuction {
-      &:extend(.commonFlexConfig);
-      flex-direction: column;
-      justify-content: space-between;
-      height: calc((1680px - 100vw) / 10 + 370px);
-      max-height: 377px;
-      min-height: 350px;
-      width: calc((100vw - 380px - 84px) / 4);
-      min-width: 239px;
-      max-width: 399px;
-      padding: 29px 20px 20px;
-      position: relative;
-      margin: 0 14px;
-      letter-spacing: 0;
-      transition: all 0.2s;
-      background-color: #fff;
-      border: 1px solid #e5e8ef;
-      box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.05);
-      border-radius: 16px;
-
-      &:hover {
-        transform: translateY(-8px);
-        box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
-      }
-
-      .image {
-        position: relative;
-        overflow: hidden;
-
-        > img {
-          height: 60px;
-          width: 60px;
-        }
-
-        .icon {
-          width: 14px;
-          height: 14px;
-          position: absolute;
-          top: -2px;
-          left: -80px;
-        }
-      }
-
-      .name {
-        margin: 4px 0;
-        font-size: 20px;
-        color: #1d2129;
-        font-weight: 500;
-        font-family: var(--font-sans);
-      }
-
-      .text {
-        line-height: 28px;
-        height: 56px;
-        font-size: 14px;
-        color: #424e66;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-      }
-
-      .hr {
-        width: 100%;
-        border-top: 1px solid #f5f5f5;
-        margin: 14px 0;
-      }
-
-      .msg {
-        color: #86909c;
-        flex: 1;
-        overflow: hidden;
-      }
-    }
-  }
-
-  &.en {
-    .famousAuction {
-      height: 377px;
-    }
-  }
-}
-
-@media (max-width: 1200px) {
-  .famousPersons {
-    padding-inline: 24px;
-    .famousAuctions {
-      width: 100%;
-      flex-wrap: wrap;
-      gap: 20px;
-    }
-    .famousAuctions .famousAuction {
-      width: calc(50% - 10px);
-      min-width: 0;
-      margin: 0;
-      max-width: none;
-    }
-  }
-}
-@media (max-width: 640px) {
-  .famousPersons {
-    padding: 48px 20px;
-    .famousAuctions .famousAuction {
-      width: 100%;
-    }
-  }
-}
diff --git a/src/components/FamousPersons/index.tsx b/src/components/FamousPersons/index.tsx
index 51742e28..c0bc90d0 100644
--- a/src/components/FamousPersons/index.tsx
+++ b/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}
diff --git a/src/components/LinkCharts/index.module.less b/src/components/LinkCharts/index.module.less
deleted file mode 100644
index 6d1ae280..00000000
--- a/src/components/LinkCharts/index.module.less
+++ /dev/null
@@ -1,133 +0,0 @@
-.commonFlexConfig {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.linkCharts {
-  &:extend(.commonFlexConfig);
-  padding: 100px 0 80px 0;
-  flex-direction: column;
-  font-family: var(--font-sans);
-
-  .charts {
-    width: 100%;
-    margin-bottom: 28px;
-    padding: 8px 0;
-    overflow: hidden;
-
-    .box {
-      transition: all 1s;
-      display: flex;
-      justify-content: center;
-      transform: translateX(-1227px);
-
-      &.center {
-        transition: all 0s;
-      }
-
-      &.left {
-        transform: translateX(0);
-      }
-
-      &.right {
-        transform: translateX(-2454px);
-      }
-
-      .chart {
-        &:extend(.commonFlexConfig);
-        flex-direction: column;
-        height: 361px;
-        padding: 0 20px;
-        background-color: #f7f8fd;
-        border-radius: 16px;
-        letter-spacing: 0;
-        position: relative;
-        margin: 0 14px;
-        transition: all 0.2s;
-        cursor: pointer;
-
-        &:hover {
-          transform: translateY(-8px);
-          box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.05);
-        }
-
-        .title {
-          height: 32px;
-          font-size: 24px;
-          color: #1d2129;
-          line-height: 32px;
-          margin: 18px 0 8px 0;
-          font-family: var(--font-sans);
-          font-weight: 700;
-        }
-
-        .subTitle {
-          font-size: 14px;
-          color: #424e66;
-          line-height: 22px;
-          margin-bottom: 18px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          -webkit-line-clamp: 2;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-        }
-
-        .antv {
-          height: 20px;
-          padding: 0 6px;
-          line-height: 20px;
-          position: absolute;
-          font-size: 14px;
-          top: 0;
-          right: 0;
-          border-radius: 0 8px 0 8px;
-          color: #fff;
-        }
-
-        .image {
-          height: 231px;
-          width: 341px;
-          background-color: #ffffff;
-          border-radius: 12px;
-          background-position: center;
-          background-repeat: no-repeat;
-          background-size: contain;
-          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
-        }
-      }
-    }
-  }
-
-  .buttons {
-    &:extend(.commonFlexConfig);
-
-    .left,
-    .right {
-      border: 0;
-      &:extend(.commonFlexConfig);
-      height: 44px;
-      width: 44px;
-      border-radius: 50%;
-      background-color: #f2f3f5;
-      margin: 0 8px;
-      color: #424e66;
-      cursor: pointer;
-
-      &:hover {
-        background-color: #e5e8ef;
-      }
-    }
-
-    > .left {
-      transform: rotate(180deg);
-    }
-  }
-}
-
-@media (max-width: 640px) {
-  .linkCharts {
-    padding: 48px 0 24px;
-  }
-}
diff --git a/src/components/LinkCharts/index.tsx b/src/components/LinkCharts/index.tsx
index b815cca1..c2f6c5f3 100644
--- a/src/components/LinkCharts/index.tsx
+++ b/src/components/LinkCharts/index.tsx
@@ -5,8 +5,6 @@ import CHARTS_DATAS from '../../data/link-charts.json';
 import { transformUrl } from '../../lib/urls';
 import { OverflowedText, ModuleTitle as Title } from '../common';
 
-import styles from './index.module.less';
-
 // 丰富图表，选用自如
 export function LinkCharts() {
   const timer = useRef<ReturnType<typeof setTimeout>>();
@@ -15,7 +13,6 @@ export function LinkCharts() {
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState(CHARTS_DATAS);
 
-
   const { locale: language, t: useT } = useTranslation();
 
   // 滑动
@@ -39,42 +36,50 @@ export function LinkCharts() {
   );
 
   return (
-    <div className={styles.linkCharts}>
+    <div className="flex items-center justify-center pt-[100px] pb-20 flex-col font-sans mobile:pt-12 mobile:pb-6">
       <Title
         title={useT('丰富图表，选用自如')}
         subTitle={useT(
           '柱形图、饼图、关系图、地图、多维表格等260+丰富图表随心选用',
         )}
       />
-      <div className={styles.charts}>
+      <div className="w-full mb-7 py-2 overflow-hidden">
         <div
-          className={classNames(styles.box, {
-            [styles.left]: position === 'left',
-            [styles.right]: position === 'right',
-            [styles.center]: position === 'center',
-          })}
+          className={classNames(
+            'flex justify-center transition-all ease-[ease]',
+            {
+              'duration-1000 translate-x-0': position === 'left',
+              'duration-1000 translate-x-[-2454px]': position === 'right',
+              'duration-0 translate-x-[-1227px]': position === 'center',
+            },
+          )}
           style={{ width: data.length * 409 + 'px' }}
         >
           {data.map((data) => {
             return (
               <a
                 key={data.link}
-                className={styles.chart}
+                className="flex items-center justify-center flex-col h-[361px] px-5 bg-[#f7f8fd] rounded-2xl tracking-normal relative mx-[14px] transition-all duration-200 ease-[ease] cursor-pointer hover:-translate-y-2 hover:shadow-[0_8px_20px_0_rgba(0,0,0,0.05)]"
                 href={transformUrl({
                   url: data.link,
                   language,
                 })}
                 target="_blank"
               >
-                <div className={styles.title}>{useT(data.title)}</div>
-                <div className={styles.subTitle}>
+                <div className="h-8 text-2xl text-[#1d2129] leading-8 mt-[18px] mb-2 font-sans font-bold">
+                  {useT(data.title)}
+                </div>
+                <div className="text-[14px] text-[#424e66] leading-[22px] mb-[18px] line-clamp-2 text-ellipsis">
                   <OverflowedText text={useT(data.subTitle)} maxWidth={341} />
                 </div>
-                <div className={styles.antv} style={{ background: data.color }}>
+                <div
+                  className="h-5 px-[6px] leading-5 absolute text-[14px] top-0 right-0 rounded-[0_8px_0_8px] text-white"
+                  style={{ background: data.color }}
+                >
                   {data.antv}
                 </div>
                 <div
-                  className={styles.image}
+                  className="h-[231px] w-[341px] bg-white rounded-xl bg-center bg-no-repeat bg-contain shadow-[0_2px_5px_0_rgba(0,0,0,0.05)]"
                   style={{ backgroundImage: `url(${data.image})` }}
                 />
               </a>
@@ -82,12 +87,12 @@ export function LinkCharts() {
           })}
         </div>
       </div>
-      <div className={styles.buttons}>
+      <div className="flex items-center justify-center">
         <button
           type="button"
           disabled={loading}
           aria-label={language === 'zh' ? '上一组图表' : 'Previous charts'}
-          className={styles.left}
+          className="flex items-center justify-center border-0 h-11 w-11 rounded-full bg-[#f2f3f5] mx-2 text-[#424e66] cursor-pointer hover:bg-[#e5e8ef] rotate-180"
           onClick={() => onClick('left')}
         >
           <img
@@ -99,7 +104,7 @@ export function LinkCharts() {
           type="button"
           disabled={loading}
           aria-label={language === 'zh' ? '下一组图表' : 'Next charts'}
-          className={styles.right}
+          className="flex items-center justify-center border-0 h-11 w-11 rounded-full bg-[#f2f3f5] mx-2 text-[#424e66] cursor-pointer hover:bg-[#e5e8ef]"
           onClick={() => onClick('right')}
         >
           <img
diff --git a/src/components/ProjectCard/index.module.less b/src/components/ProjectCard/index.module.less
deleted file mode 100644
index 2e6f0bfe..00000000
--- a/src/components/ProjectCard/index.module.less
+++ /dev/null
@@ -1,215 +0,0 @@
-.commonFlexConfig {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.projectCard {
-  &:extend(.commonFlexConfig);
-  padding: 80px 0 40px;
-  flex-direction: column;
-  height: auto;
-  overflow: hidden;
-  font-family: var(--font-sans);
-
-  .cards {
-    min-height: 520px;
-    width: calc(100vw - 360px);
-    max-width: 1680px;
-    min-width: 1040px;
-    background-image: linear-gradient(114deg, #332f4f 0%, #28243f 100%);
-    box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.2);
-    border-radius: 16px;
-    padding: 24px;
-    letter-spacing: 0;
-
-    .box {
-      .row {
-        display: grid;
-        grid-template-columns: repeat(24, minmax(0, 1fr));
-        column-gap: 16px;
-      }
-      .card {
-        &:extend(.commonFlexConfig);
-        height: 70px;
-        border-radius: 8px;
-        margin-bottom: 16px;
-        color: #ffffff;
-        position: relative;
-
-        .cardTitle {
-          height: 28px;
-          font-weight: 600;
-          font-size: 20px;
-          line-height: 28px;
-          margin: 0 8px;
-        }
-
-        .cardSubTitle {
-          font-family: var(--font-sans);
-          height: 24px;
-          opacity: 0.65;
-          font-size: 16px;
-          line-height: 24px;
-          white-space: nowrap;
-        }
-
-        &.AVA {
-          background-color: rgba(36, 134, 255, 0.15);
-
-          &:hover {
-            background-color: rgba(36, 134, 255, 0.25);
-          }
-        }
-
-        &.antd,
-        &.holophylyF {
-          background-color: rgba(0, 167, 167, 0.15);
-
-          &:hover {
-            background-color: rgba(0, 167, 167, 0.25);
-          }
-        }
-
-        &.chartEngine {
-          height: 92px;
-          flex: 1;
-          background-color: rgba(245, 140, 88, 0.15);
-          flex-direction: column;
-          margin-bottom: 12px;
-
-          &:hover {
-            background-color: rgba(245, 140, 88, 0.25);
-            border-color: rgba(245, 140, 88);
-          }
-
-          &.f7 {
-            box-sizing: border-box;
-            border: 1px dashed rgba(245, 140, 88, 0.5);
-          }
-        }
-
-        &.sort {
-          height: 24px;
-          padding: 0;
-          cursor: default;
-
-          .divider {
-            display: flex;
-            align-items: center;
-            width: 100%;
-            border-color: rgba(255, 255, 255, 0.2);
-            &::before,
-            &::after {
-              content: '';
-              flex: 1;
-              border-top: 1px dashed rgba(255, 255, 255, 0.2);
-            }
-          }
-
-          .cardTitle {
-            font-family: var(--font-sans);
-            margin: 0 6px;
-            font-size: 16px;
-            color: #ffffff;
-            opacity: 0.45;
-            font-size: 16px;
-          }
-        }
-
-        &.antv {
-          background-color: rgba(213, 128, 255, 0.15);
-
-          &:hover {
-            background-color: rgba(213, 128, 255, 0.25);
-          }
-        }
-
-        &.g {
-          background-color: rgba(148, 112, 255, 0.15);
-          margin-bottom: 0;
-
-          &:hover {
-            background-color: rgba(148, 112, 255, 0.25);
-          }
-        }
-      }
-    }
-  }
-}
-
-.content {
-  font-family: var(--font-sans);
-  padding: 0 8px;
-
-  .msg {
-    display: flex;
-    align-items: center;
-    letter-spacing: 0;
-
-    .msgTitle {
-      font-weight: 600;
-      font-size: 20px;
-      color: #1d2129;
-      margin-right: 6px;
-    }
-
-    .msgSubTitle {
-      font-size: 14px;
-      color: #86909c;
-    }
-  }
-
-  .msgChart {
-    height: 125px;
-    width: 274px;
-    border: 1px solid #d8d8d8;
-    background-color: #fff;
-    border-radius: 4px;
-    margin: 12px 0;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: contain;
-  }
-
-  .links {
-    &:extend(.commonFlexConfig);
-    justify-content: space-between;
-    width: 274px;
-
-    > a {
-      &:extend(.commonFlexConfig);
-      font-size: 14px;
-      color: #1d2129;
-
-      > img {
-        width: 16px;
-        height: 16px;
-      }
-
-      &:hover {
-        color: #691eff;
-      }
-    }
-  }
-}
-
-@media (max-width: 1200px) {
-  .projectCard {
-    padding-inline: 24px;
-    height: auto;
-    .cards {
-      width: 100%;
-      min-width: 0;
-      overflow-x: auto;
-    }
-    .box {
-      min-width: 992px;
-    }
-  }
-}
-@media (max-width: 640px) {
-  .projectCard {
-    padding: 48px 20px 24px;
-  }
-}
diff --git a/src/components/ProjectCard/index.tsx b/src/components/ProjectCard/index.tsx
index b5a53bb3..6897c059 100644
--- a/src/components/ProjectCard/index.tsx
+++ b/src/components/ProjectCard/index.tsx
@@ -4,14 +4,9 @@ import { useTranslation } from '../../lib/i18n';
 import React, { useCallback, useState } from 'react';
 import ANTV_LINKS from '../../data/project-card-popover.json';
 import { ActiveIcon, ModuleTitle as Title } from '../common';
-import {
-  type ProductType,
-  getProducts,
-} from '../../lib/products';
+import { type ProductType, getProducts } from '../../lib/products';
 import { transformUrl } from '../../lib/urls';
 
-import styles from './index.module.less';
-
 // 锚点, 用于 banner 中的 开始使用跳转
 export const ANCHORNAME = 'linkChartsAnchorName';
 
@@ -23,7 +18,7 @@ type PrejectData = {
   // 占宽
   span: number;
   // 类名
-  classNames: any;
+  classNames: string;
   // 是否为分类
   isSort?: boolean;
   // 弹出框 展开图
@@ -40,14 +35,18 @@ type PrejectData = {
   };
 }[][];
 
-// 不放入 data 变为 json 是因为 占比需要 styles 进行修改。
+// 产品布局和样式由组件维护。
+const chartCardClasses =
+  'h-[92px] mb-3 flex-1 flex-col bg-[rgba(245,140,88,0.15)] hover:bg-[rgba(245,140,88,0.25)] hover:border-[#f58c58]';
+
 const PROJECT_DATAS: PrejectData = [
   [
     {
       title: 'AVA',
       subTitle: '智能洞察',
       span: 24,
-      classNames: styles.AVA,
+      classNames:
+        'h-[70px] mb-4 bg-[rgba(36,134,255,0.15)] hover:bg-[rgba(36,134,255,0.25)]',
       icon: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*L58VTIXV8MwAAAAAAAAAAAAADmJ7AQ/original',
       img: 'https://gw.alipayobjects.com/mdn/rms_fabca5/afts/img/A*TOjFQ6PQwyEAAAAAAAAAAAAAARQnAQ',
       url: 'https://ava.antv.antgroup.com',
@@ -58,7 +57,8 @@ const PROJECT_DATAS: PrejectData = [
       title: 'Ant Design Charts',
       subTitle: '图表库',
       span: 15,
-      classNames: styles.antd,
+      classNames:
+        'h-[70px] mb-4 bg-[rgba(0,167,167,0.15)] hover:bg-[rgba(0,167,167,0.25)]',
       icon: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*OWM6RLft2VIAAAAAAAAAAAAADmJ7AQ/original',
       url: 'https://ant-design-charts-next.antgroup.com',
       img: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*IJE_TYeUtEUAAAAAAAAAAAAADmJ7AQ/original',
@@ -66,7 +66,8 @@ const PROJECT_DATAS: PrejectData = [
     {
       title: '267 全系 F 版',
       span: 9,
-      classNames: styles.holophylyF,
+      classNames:
+        'h-[70px] mb-4 bg-[rgba(0,167,167,0.15)] hover:bg-[rgba(0,167,167,0.25)]',
       icon: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*S8gOQJHfS8QAAAAAAAAAAAAADmJ7AQ/original',
     },
   ],
@@ -75,7 +76,7 @@ const PROJECT_DATAS: PrejectData = [
       title: 'G2',
       subTitle: '统计图表',
       span: 3,
-      classNames: styles.chartEngine,
+      classNames: chartCardClasses,
       url: 'https://g2.antv.antgroup.com',
       img: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*oj5gRqZMxZQAAAAAAAAAAAAADmJ7AQ/original',
     },
@@ -83,7 +84,7 @@ const PROJECT_DATAS: PrejectData = [
       title: 'S2',
       subTitle: '多维表格',
       span: 3,
-      classNames: styles.chartEngine,
+      classNames: chartCardClasses,
       url: 'https://s2.antv.antgroup.com',
       img: 'https://gw.alipayobjects.com/zos/antfincdn/YxskohI92J/c17971dd-6dd9-4a62-85f8-c69dff908aec.png',
     },
@@ -91,7 +92,7 @@ const PROJECT_DATAS: PrejectData = [
       title: 'G6',
       subTitle: '关系图',
       span: 3,
-      classNames: styles.chartEngine,
+      classNames: chartCardClasses,
       url: 'https://g6.antv.antgroup.com',
       img: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*_JGLQZl-PcQAAAAAAAAAAAAADmJ7AQ/original',
     },
@@ -99,7 +100,7 @@ const PROJECT_DATAS: PrejectData = [
       title: 'X6',
       subTitle: '流程图',
       span: 3,
-      classNames: styles.chartEngine,
+      classNames: chartCardClasses,
       url: 'https://x6.antv.antgroup.com',
       img: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*JSr-RbwCgmcAAAAAAAAAAAAAARQnAQ',
     },
@@ -107,7 +108,7 @@ const PROJECT_DATAS: PrejectData = [
       title: 'L7',
       subTitle: '地图',
       span: 3,
-      classNames: styles.chartEngine,
+      classNames: chartCardClasses,
       url: 'https://L7.antv.antgroup.com',
       img: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*H0KDRaIpfIUAAAAAAAAAAAAADmJ7AQ/original',
     },
@@ -115,7 +116,7 @@ const PROJECT_DATAS: PrejectData = [
       title: 'F2',
       subTitle: '移动统计图',
       span: 3,
-      classNames: styles.chartEngine,
+      classNames: chartCardClasses,
       url: 'https://f2.antv.antgroup.com',
       img: 'https://mdn.alipayobjects.com/huamei_khb4xj/afts/img/A*q7bQT4mlz7kAAAAAAAAAAAAADq2NAQ/original',
     },
@@ -123,7 +124,7 @@ const PROJECT_DATAS: PrejectData = [
       title: 'F6',
       subTitle: '移动关系图',
       span: 3,
-      classNames: styles.chartEngine,
+      classNames: chartCardClasses,
       url: 'https://f6.antv.vision',
       img: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*q3muQq70-dUAAAAAAAAAAAAADmJ7AQ/original',
     },
@@ -131,14 +132,37 @@ const PROJECT_DATAS: PrejectData = [
       title: 'F7',
       subTitle: '移动地图',
       span: 3,
-      classNames: classNames(styles.chartEngine, styles.f7),
+      classNames: classNames(
+        chartCardClasses,
+        'box-border border border-dashed border-[rgba(245,140,88,0.5)]',
+      ),
     },
   ],
   [
-    { title: '常用统计数据', span: 6, classNames: styles.sort, isSort: true },
-    { title: '关系数据', span: 6, classNames: styles.sort, isSort: true },
-    { title: '地理空间数据', span: 3, classNames: styles.sort, isSort: true },
-    { title: '极致移动定制', span: 9, classNames: styles.sort, isSort: true },
+    {
+      title: '常用统计数据',
+      span: 6,
+      classNames: 'h-6 mb-4 p-0 cursor-default',
+      isSort: true,
+    },
+    {
+      title: '关系数据',
+      span: 6,
+      classNames: 'h-6 mb-4 p-0 cursor-default',
+      isSort: true,
+    },
+    {
+      title: '地理空间数据',
+      span: 3,
+      classNames: 'h-6 mb-4 p-0 cursor-default',
+      isSort: true,
+    },
+    {
+      title: '极致移动定制',
+      span: 9,
+      classNames: 'h-6 mb-4 p-0 cursor-default',
+      isSort: true,
+    },
   ],
   [
     {
@@ -146,7 +170,8 @@ const PROJECT_DATAS: PrejectData = [
       subTitle: '设计语言',
       url: '/specification/principles/basic',
       span: 24,
-      classNames: styles.antv,
+      classNames:
+        'h-[70px] mb-4 bg-[rgba(213,128,255,0.15)] hover:bg-[rgba(213,128,255,0.25)]',
       icon: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*U3AfQq_cQMYAAAAAAAAAAAAADmJ7AQ/original',
     },
   ],
@@ -155,7 +180,8 @@ const PROJECT_DATAS: PrejectData = [
       title: 'G',
       subTitle: '图表引擎',
       span: 24,
-      classNames: styles.g,
+      classNames:
+        'h-[70px] mb-0 bg-[rgba(148,112,255,0.15)] hover:bg-[rgba(148,112,255,0.25)]',
       img: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*nk1YSrbkQPMAAAAAAAAAAAAAARQnAQ',
       icon: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*YIbER7wNuLMAAAAAAAAAAAAADmJ7AQ/original',
       url: 'https://g.antv.antgroup.com',
@@ -189,16 +215,18 @@ export function ProjectCard() {
   const getContent = useCallback(
     ({ title, subTitle, img, links, url }) => {
       return (
-        <div className={styles.content}>
-          <div className={styles.msg}>
-            <div className={styles.msgTitle}>{title}</div>
-            <div className={styles.msgSubTitle}>{subTitle}</div>
+        <div className="font-sans px-2">
+          <div className="flex items-center tracking-normal">
+            <div className="font-semibold text-[20px] text-[#1d2129] mr-[6px]">
+              {title}
+            </div>
+            <div className="text-[14px] text-[#86909c]">{subTitle}</div>
           </div>
           <div
-            className={styles.msgChart}
+            className="h-[125px] w-[274px] border border-solid border-[#d8d8d8] bg-white rounded-sm my-3 bg-center bg-no-repeat bg-contain"
             style={{ backgroundImage: `url(${img})` }}
           />
-          <div className={styles.links}>
+          <div className="flex items-center justify-between w-[274px]">
             {ANTV_LINKS.map((link) => {
               let href = links[link.href]?.url?.replace(
                 /https:\/\/.+?\//,
@@ -226,7 +254,7 @@ export function ProjectCard() {
                   key={link.href}
                   href={href || transformUrl({ url, language })}
                   target="_blank"
-                  className={styles.link}
+                  className="text-[14px] text-[#1d2129] [&>img]:w-4 [&>img]:h-4 hover:text-[#691eff]"
                   img={link.img}
                   text={useT(link.text)}
                   activeImg={link.activeImg}
@@ -241,15 +269,21 @@ export function ProjectCard() {
   );
 
   return (
-    <div className={styles.projectCard} id={ANCHORNAME}>
+    <div
+      className="flex items-center justify-center pt-20 pb-10 flex-col h-auto overflow-hidden font-sans tablet:px-6 mobile:pt-12 mobile:px-5 mobile:pb-6"
+      id={ANCHORNAME}
+    >
       <Title
         title={useT('设计语言与研发框架')}
         subTitle={useT('资产一览，让你快速搭建网站应用')}
       />
-      <div className={styles.cards}>
-        <div className={styles.box}>
+      <div className="min-h-[520px] w-[calc(100vw_-_360px)] max-w-[1680px] min-w-[1040px] bg-[linear-gradient(114deg,#332f4f_0%,#28243f_100%)] shadow-[0_8px_28px_0_rgba(0,0,0,0.2)] rounded-2xl p-6 tracking-normal tablet:w-full tablet:min-w-0 tablet:overflow-x-auto">
+        <div className="tablet:min-w-[992px]">
           {PROJECT_DATAS.map((cols) => (
-            <div key={cols[0].title} className={styles.row}>
+            <div
+              key={cols[0].title}
+              className="grid grid-cols-[repeat(24,minmax(0,1fr))] gap-x-4"
+            >
               {cols.map((col) => {
                 const { span, img, title, subTitle, isSort, icon, url } = col;
 
@@ -262,23 +296,30 @@ export function ProjectCard() {
                 const newSubTitle = subTitle && useT(subTitle);
                 const children = (
                   <a
-                    className={classNames(col.classNames, styles.card)}
-                    href={
-                      url && transformUrl({ url, language })
-                    }
+                    className={classNames(
+                      col.classNames,
+                      'flex items-center justify-center rounded-lg text-white relative',
+                    )}
+                    href={url && transformUrl({ url, language })}
                     style={{ cursor: url ? 'pointer' : 'default' }}
                     target="_blank"
                   >
                     {icon && <img src={icon} alt={newTitle} />}
                     {isSort ? (
-                      <div className={styles.divider}>
-                        <div className={styles.cardTitle}>{newTitle}</div>
+                      <div className="flex items-center w-full border-[rgba(255,255,255,0.2)] before:content-[''] before:flex-1 before:[border-top:1px_dashed_rgba(255,255,255,0.2)] after:content-[''] after:flex-1 after:[border-top:1px_dashed_rgba(255,255,255,0.2)]">
+                        <div className="h-7 font-semibold leading-7 font-sans mx-[6px] text-[16px] text-white opacity-45">
+                          {newTitle}
+                        </div>
                       </div>
                     ) : (
-                      <div className={styles.cardTitle}>{newTitle}</div>
+                      <div className="h-7 font-semibold leading-7 text-[20px] mx-2">
+                        {newTitle}
+                      </div>
                     )}
                     {subTitle && (
-                      <div className={styles.cardSubTitle}>{newSubTitle}</div>
+                      <div className="font-sans h-6 opacity-65 text-[16px] leading-6 whitespace-nowrap">
+                        {newSubTitle}
+                      </div>
                     )}
                   </a>
                 );
diff --git a/src/components/ThemeCharts/Charts/Column/index.tsx b/src/components/ThemeCharts/Charts/Column/index.tsx
index 0e2c01c1..7daa00a0 100644
--- a/src/components/ThemeCharts/Charts/Column/index.tsx
+++ b/src/components/ThemeCharts/Charts/Column/index.tsx
@@ -1,8 +1,6 @@
 import { Column } from '@antv/g2plot';
 import React, { useEffect, useRef } from 'react';
 
-import styles from '../index.module.less';
-
 export const DARK_THEME_CONFIG = {
   legend: {
     itemName: {
@@ -201,7 +199,7 @@ export function ColumnChart(props: ColumnProps) {
   );
 
   return (
-    <div className={styles.container}>
+    <div className="h-full w-full [&>div]:h-full [&>div]:w-full">
       <div ref={containerRef} />
     </div>
   );
diff --git a/src/components/ThemeCharts/Charts/Gauge/index.tsx b/src/components/ThemeCharts/Charts/Gauge/index.tsx
index 4ac9706d..d3e6c7bb 100644
--- a/src/components/ThemeCharts/Charts/Gauge/index.tsx
+++ b/src/components/ThemeCharts/Charts/Gauge/index.tsx
@@ -3,8 +3,6 @@ import { useTranslation } from '../../../../lib/i18n';
 import get from 'lodash/get.js';
 import React, { useEffect, useRef } from 'react';
 
-import styles from '../index.module.less';
-
 type GaugeProps = {
   theme?: any;
 };
@@ -79,7 +77,7 @@ export function GaugeChart(props: GaugeProps) {
   );
 
   return (
-    <div className={styles.container}>
+    <div className="h-full w-full [&>div]:h-full [&>div]:w-full">
       <div ref={containerRef} />
     </div>
   );
diff --git a/src/components/ThemeCharts/Charts/Graph/index.tsx b/src/components/ThemeCharts/Charts/Graph/index.tsx
index 002acc92..5de147cf 100644
--- a/src/components/ThemeCharts/Charts/Graph/index.tsx
+++ b/src/components/ThemeCharts/Charts/Graph/index.tsx
@@ -2,8 +2,6 @@ import { Graph } from '@antv/g6';
 import debounce from 'lodash/debounce.js';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import styles from '../index.module.less';
-
 type GraphProps = {
   theme?: any;
 };
@@ -221,7 +219,7 @@ export function GraphChart(props: GraphProps) {
   );
 
   return (
-    <div className={styles.container}>
+    <div className="h-full w-full [&>div]:h-full [&>div]:w-full">
       <div ref={containerRef} />
     </div>
   );
diff --git a/src/components/ThemeCharts/Charts/Line/index.tsx b/src/components/ThemeCharts/Charts/Line/index.tsx
index a229d09d..1eaa38f5 100644
--- a/src/components/ThemeCharts/Charts/Line/index.tsx
+++ b/src/components/ThemeCharts/Charts/Line/index.tsx
@@ -2,8 +2,6 @@ import { Line } from '@antv/g2plot';
 import React, { useEffect, useRef } from 'react';
 import { DARK_THEME_CONFIG, LIGHT_THEME_CONFIG } from '../Column';
 
-import styles from '../index.module.less';
-
 type LineProps = {
   theme?: any;
 };
@@ -97,7 +95,7 @@ export function LineChart(props: LineProps) {
   );
 
   return (
-    <div className={styles.container}>
+    <div className="h-full w-full [&>div]:h-full [&>div]:w-full">
       <div ref={containerRef} />
     </div>
   );
diff --git a/src/components/ThemeCharts/Charts/Pie/index.tsx b/src/components/ThemeCharts/Charts/Pie/index.tsx
index f2cb08b6..99132084 100644
--- a/src/components/ThemeCharts/Charts/Pie/index.tsx
+++ b/src/components/ThemeCharts/Charts/Pie/index.tsx
@@ -3,8 +3,6 @@ import { useTranslation } from '../../../../lib/i18n';
 import React, { useEffect, useRef } from 'react';
 import { DARK_THEME_CONFIG, LIGHT_THEME_CONFIG } from '../Column';
 
-import styles from '../index.module.less';
-
 type PieProps = {
   theme?: any;
 };
@@ -117,7 +115,7 @@ export function PieChart(props: PieProps) {
   );
 
   return (
-    <div className={styles.container}>
+    <div className="h-full w-full [&>div]:h-full [&>div]:w-full">
       <div ref={containerRef} />
     </div>
   );
diff --git a/src/components/ThemeCharts/Charts/StackedColumn/index.tsx b/src/components/ThemeCharts/Charts/StackedColumn/index.tsx
index 417b53dc..e5ba6a46 100644
--- a/src/components/ThemeCharts/Charts/StackedColumn/index.tsx
+++ b/src/components/ThemeCharts/Charts/StackedColumn/index.tsx
@@ -2,8 +2,6 @@ import { Column } from '@antv/g2plot';
 import React, { useEffect, useRef } from 'react';
 import { DARK_THEME_CONFIG, LIGHT_THEME_CONFIG } from '../Column';
 
-import styles from '../index.module.less';
-
 type StackedColumnProps = {
   theme?: any;
 };
@@ -136,7 +134,7 @@ export function StackedColumnChart(props: StackedColumnProps) {
   );
 
   return (
-    <div className={styles.container}>
+    <div className="h-full w-full [&>div]:h-full [&>div]:w-full">
       <div ref={containerRef} />
     </div>
   );
diff --git a/src/components/ThemeCharts/Charts/index.module.less b/src/components/ThemeCharts/Charts/index.module.less
deleted file mode 100644
index f94c91d0..00000000
--- a/src/components/ThemeCharts/Charts/index.module.less
+++ /dev/null
@@ -1,9 +0,0 @@
-.container {
-  width: 100%;
-  height: 100%;
-
-  > div {
-    width: 100%;
-    height: 100%;
-  }
-}
diff --git a/src/components/ThemeCharts/index.module.less b/src/components/ThemeCharts/index.module.less
deleted file mode 100644
index eff456ee..00000000
--- a/src/components/ThemeCharts/index.module.less
+++ /dev/null
@@ -1,310 +0,0 @@
-.commonFlexConfig {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.themeCharts {
-  &:extend(.commonFlexConfig);
-  position: relative;
-  z-index: 2;
-  padding: 50px 0 40px;
-  flex-direction: column;
-  font-family: var(--font-sans);
-  background-size: cover;
-  background-color: rgba(0, 0, 0, 0);
-
-  .title {
-    height: auto;
-    margin-top: 0;
-    line-height: 1em;
-    font-size: 40px;
-    color: #1d2129;
-    font-family: var(--font-sans);
-    font-weight: 700;
-    margin-bottom: 48px;
-  }
-
-  .themeButtons {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 32px;
-
-    .button {
-      &:extend(.commonFlexConfig);
-      height: 52px;
-      width: 160px;
-      cursor: pointer;
-      font-size: 18px;
-      background-color: #ffffff;
-      border: 2px solid #e5e8ef;
-      border-radius: 8px;
-      margin-right: 20px;
-      line-height: 52px;
-
-      > img {
-        height: 24px;
-        width: 24px;
-        margin-right: 8px;
-      }
-
-      &:hover {
-        font-weight: 500;
-        border: 2px solid #691eff;
-      }
-    }
-
-    .isTheme {
-      font-weight: 500;
-      border: 2px solid #691eff;
-      color: #691eff;
-    }
-  }
-
-  .themeChart {
-    height: 600px;
-    width: calc(100vw - 360px);
-    max-width: 1680px;
-    min-width: 1040px;
-    background-color: #fafbfc;
-    border: 1px solid #e5e8ef;
-    box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.05);
-    border-radius: 16px;
-    box-sizing: border-box;
-    padding: 24px;
-    margin-bottom: 36px;
-
-    .msg {
-      display: flex;
-      align-items: center;
-      letter-spacing: 0;
-      line-height: 28px;
-      height: 28px;
-      margin-bottom: 18px;
-
-      .msgTitle {
-        width: 85px;
-        font-size: 20px;
-        color: #1d2129;
-        font-family: var(--font-sans);
-        font-weight: 700;
-      }
-
-      .msgText {
-        font-size: 16px;
-        color: #000000;
-        line-height: 28px;
-      }
-    }
-
-    .charts {
-      .chart {
-        height: 243px;
-        width: calc(100% / 3 - 10px);
-        background: #fff;
-        box-sizing: border-box;
-        padding: 18px;
-        float: left;
-        margin-bottom: 15px;
-        margin-right: 14px;
-        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
-        border-radius: 12px;
-
-        .chartMsg {
-          height: 24px;
-          font-weight: 500;
-          font-size: 16px;
-          color: #1d2129;
-          letter-spacing: 0;
-          line-height: 24px;
-        }
-
-        .content {
-          height: 183px;
-        }
-      }
-
-      .rightChart {
-        margin-right: 0;
-      }
-    }
-  }
-
-  .acquire {
-    &:extend(.commonFlexConfig);
-
-    .download {
-      background: transparent;
-      border: 0;
-      font-family: inherit;
-      font-size: 16px;
-      color: #424e66;
-      letter-spacing: 0;
-      line-height: 24px;
-      cursor: pointer;
-      overflow: hidden;
-      position: relative;
-
-      &:hover {
-        color: #691eff;
-
-        > img {
-          position: relative;
-          left: -80px;
-          filter: drop-shadow(#691eff 80px 0);
-        }
-      }
-    }
-  }
-
-  .segmentation {
-    width: 0;
-    height: 12px;
-    border-left: 1px solid #979797;
-    margin: 0 12px;
-  }
-
-  &.dark {
-    .title {
-      color: #fff;
-    }
-
-    .themeButtons {
-      .button {
-        background: rgba(0, 0, 0, 0);
-        color: #fff;
-        opacity: 0.2;
-        border-color: #fff;
-
-        &:hover {
-          font-weight: 500;
-          opacity: 0.9;
-        }
-      }
-
-      .isTheme {
-        font-weight: 500;
-        opacity: 1;
-      }
-    }
-
-    .themeChart {
-      border-color: rgba(0, 0, 0, 0);
-      background-position: -100px;
-      background-color: rgba(0, 0, 0, 0);
-
-      .msg {
-        .msgTitle {
-          color: #fff;
-        }
-
-        .msgText {
-          color: #fff;
-        }
-      }
-
-      .charts {
-        .chart {
-          background: rgba(255, 255, 255, 0.08);
-
-          .chartMsg {
-            color: #fff;
-          }
-        }
-      }
-    }
-
-    .acquire {
-      .download {
-        img {
-          position: relative;
-          left: -80px;
-          filter: drop-shadow(#fff 80px 0);
-        }
-
-        color: #fff;
-        opacity: 0.8;
-
-        &:hover {
-          opacity: 1;
-        }
-      }
-    }
-
-    .segmentation {
-      border-color: rgba(255, 255, 255, 0.5);
-    }
-  }
-}
-
-@media (max-width: 1200px) {
-  .themeCharts {
-    padding-inline: 24px;
-    .themeChart {
-      width: 100%;
-      min-width: 0;
-      height: auto;
-    }
-    .themeChart .charts {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 14px;
-    }
-    .themeChart .charts .chart {
-      width: auto;
-      float: none;
-      margin: 0;
-    }
-  }
-}
-
-@media (max-width: 640px) {
-  .themeCharts {
-    padding: 48px 20px;
-    .title {
-      font-size: 28px;
-      line-height: 1.3;
-      text-align: center;
-      margin-bottom: 24px;
-    }
-    .themeButtons {
-      gap: 8px;
-      width: 100%;
-      flex-wrap: wrap;
-    }
-    .themeButtons .button {
-      margin: 0;
-      width: auto;
-      min-width: 88px;
-      padding-inline: 8px;
-      font: inherit;
-      font-size: 14px;
-    }
-    .themeChart {
-      padding: 12px;
-    }
-    .themeChart .charts {
-      grid-template-columns: minmax(0, 1fr);
-    }
-    .themeChart .msg .msgTitle {
-      font-size: 16px;
-    }
-  }
-}
-
-.colors {
-  display: flex;
-  margin-bottom: 16px;
-  height: 25px;
-
-  .color {
-    border-radius: 2px;
-    margin-right: 2px;
-    width: 23px;
-    height: 23px;
-  }
-
-  :last-child {
-    margin-right: 0px;
-  }
-}
diff --git a/src/components/ThemeCharts/index.tsx b/src/components/ThemeCharts/index.tsx
index 5c4247d4..e043ecf7 100644
--- a/src/components/ThemeCharts/index.tsx
+++ b/src/components/ThemeCharts/index.tsx
@@ -14,8 +14,6 @@ import {
   StackedColumnChart,
 } from './Charts';
 
-import styles from './index.module.less';
-
 // 已经生成的主题 json 文件
 const themeColors = [THEME_COLORS1, THEME_COLORS2, THEME_COLORS3];
 
@@ -73,17 +71,22 @@ export function ThemeCharts() {
 
   return (
     <div
-      className={classNames(styles.themeCharts, {
-        [styles.dark]: isDark,
-      })}
+      className="flex items-center justify-center relative z-2 pt-[50px] pb-10 flex-col font-sans bg-cover bg-transparent tablet:px-6 mobile:py-12 mobile:px-5"
       style={{
         backgroundImage: select.background
           ? `url(${select.background})`
           : undefined,
       }}
     >
-      <h2 className={styles.title}>{useT('定制主题，一键生成')}</h2>
-      <div className={styles.themeButtons}>
+      <h2
+        className={classNames(
+          'h-auto mt-0 leading-[1em] text-[40px] font-sans font-bold mb-12 mobile:text-[28px] mobile:leading-[1.3] mobile:text-center mobile:mb-6',
+          isDark ? 'text-white' : 'text-[#1d2129]',
+        )}
+      >
+        {useT('定制主题，一键生成')}
+      </h2>
+      <div className="flex justify-center mb-8 mobile:gap-2 mobile:w-full mobile:flex-wrap">
         {THEME_DATAS.map((data, index) => {
           const isTheme = selectedIndex === index;
 
@@ -91,9 +94,20 @@ export function ThemeCharts() {
             <button
               type="button"
               key={data.text}
-              className={classNames(styles.button, {
-                [styles.isTheme]: isTheme,
-              })}
+              className={classNames(
+                'flex items-center justify-center h-[52px] w-40 cursor-pointer text-[18px] border-2 border-solid rounded-lg mr-5 leading-[52px] [&>img]:h-6 [&>img]:w-6 [&>img]:mr-2 mobile:m-0 mobile:w-auto mobile:min-w-[88px] mobile:px-2 mobile:leading-[inherit] mobile:text-[14px]',
+                isDark
+                  ? classNames(
+                      'bg-transparent text-white border-white hover:font-medium hover:opacity-90',
+                      isTheme ? 'font-medium opacity-100' : 'opacity-20',
+                    )
+                  : classNames(
+                      'bg-white hover:font-medium hover:border-[#691eff]',
+                      isTheme
+                        ? 'font-medium border-[#691eff] text-[#691eff] mobile:font-normal'
+                        : 'border-[#e5e8ef]',
+                    ),
+              )}
               aria-pressed={isTheme}
               onClick={() => setSelectedIndex(index)}
             >
@@ -109,33 +123,65 @@ export function ThemeCharts() {
         })}
       </div>
       <div
-        className={styles.themeChart}
+        className={classNames(
+          'h-[600px] w-[calc(100vw_-_360px)] max-w-[1680px] min-w-[1040px] border border-solid shadow-[0_8px_28px_0_rgba(0,0,0,0.05)] rounded-2xl box-border p-6 mb-9 tablet:w-full tablet:min-w-0 tablet:h-auto mobile:p-3',
+          isDark
+            ? 'border-transparent bg-transparent bg-position-[-100px]'
+            : 'bg-[#fafbfc] border-[#e5e8ef]',
+        )}
         style={{
           backgroundImage: select.backgroundChart
             ? `url(${select.backgroundChart})`
             : undefined,
         }}
       >
-        <div className={styles.msg}>
+        <div className="flex items-center tracking-normal leading-7 h-7 mb-[18px]">
           <img
             src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*U3AfQq_cQMYAAAAAAAAAAAAADmJ7AQ/original"
             alt="antv"
           />
-          <div className={styles.msgTitle}>AntV 5.0</div>
-          <div className={styles.segmentation} />
-          <div className={styles.msgText}>{useT(select.text)}</div>
+          <div
+            className={classNames(
+              'w-[85px] text-[20px] font-sans font-bold mobile:text-[16px]',
+              isDark ? 'text-white' : 'text-[#1d2129]',
+            )}
+          >
+            AntV 5.0
+          </div>
+          <div
+            className={classNames(
+              'w-0 h-3 border-l [border-left-style:solid] mx-3',
+              isDark ? 'border-[rgba(255,255,255,0.5)]' : 'border-l-[#979797]',
+            )}
+          />
+          <div
+            className={classNames(
+              'text-[16px] leading-7',
+              isDark ? 'text-white' : 'text-black',
+            )}
+          >
+            {useT(select.text)}
+          </div>
         </div>
-        <div className={styles.charts}>
-          {CHARTS.map((chart, index) => {
+        <div className="tablet:grid tablet:grid-cols-2 tablet:gap-[14px] mobile:grid-cols-1">
+          {CHARTS.map((chart) => {
             return (
               <div
-                className={classNames(styles.chart, {
-                  [styles.rightChart]: (index + 1) % 3 === 0,
-                })}
+                className={classNames(
+                  'h-[243px] w-[calc(100%/3_-_10px)] box-border p-[18px] float-left mb-[15px] mr-[14px] nth-[3n]:mr-0 shadow-[0_2px_8px_0_rgba(0,0,0,0.05)] rounded-xl tablet:w-auto tablet:float-none tablet:m-0',
+                  isDark ? 'bg-[rgba(255,255,255,0.08)]' : 'bg-white',
+                )}
                 key={chart.msg}
               >
-                <div className={styles.chartMsg}>{useT(chart.msg)}</div>
-                <div className={styles.content}>
+                <div
+                  className={classNames(
+                    'h-6 font-medium text-[16px] tracking-normal leading-6',
+                    isDark ? 'text-white' : 'text-[#1d2129]',
+                  )}
+                >
+                  {useT(chart.msg)}
+                </div>
+                <div className="h-[183px]">
                   {chart.chart({ ...colorsJson, value: select.theme })}
                 </div>
               </div>
@@ -143,10 +189,24 @@ export function ThemeCharts() {
           })}
         </div>
       </div>
-      <div className={styles.acquire}>
-        <button type="button" className={styles.download} onClick={onDownload}>
+      <div className="flex items-center justify-center">
+        <button
+          type="button"
+          className={classNames(
+            'group/download bg-transparent border-0 font-[family-name:inherit] text-[16px] tracking-normal leading-6 cursor-pointer overflow-hidden relative',
+            isDark
+              ? 'text-white opacity-80 hover:opacity-100'
+              : 'text-[#424e66] hover:text-[#691eff]',
+          )}
+          onClick={onDownload}
+        >
           <img
             alt=""
+            className={
+              isDark
+                ? 'relative -left-20 [filter:drop-shadow(#fff_80px_0)]'
+                : 'group-hover/download:relative group-hover/download:-left-20 group-hover/download:[filter:drop-shadow(#691eff_80px_0)]'
+            }
             src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*coOuTKR_NDMAAAAAAAAAAAAADmJ7AQ/original"
           />{' '}
           {useT('规范下载')}
diff --git a/src/components/common/ActiveIcon/index.module.less b/src/components/common/ActiveIcon/index.module.less
deleted file mode 100644
index cb97f010..00000000
--- a/src/components/common/ActiveIcon/index.module.less
+++ /dev/null
@@ -1,24 +0,0 @@
-.activeIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: #000;
-
-  > img {
-    margin-right: 6px;
-  }
-
-  .active {
-    display: none;
-  }
-
-  &:hover {
-    .inactive {
-      display: none;
-    }
-
-    .active {
-      display: block;
-    }
-  }
-}
diff --git a/src/components/common/ActiveIcon/index.tsx b/src/components/common/ActiveIcon/index.tsx
index 361f6abd..52211adb 100644
--- a/src/components/common/ActiveIcon/index.tsx
+++ b/src/components/common/ActiveIcon/index.tsx
@@ -1,7 +1,5 @@
 import classNames from 'classnames';
 
-import styles from './index.module.less';
-
 type ActiveIconProps = {
   img: string;
   activeImg: string;
@@ -17,13 +15,24 @@ export default function ActiveIcon(props: ActiveIconProps) {
 
   return (
     <a
-      className={classNames(className, styles.activeIcon)}
+      className={classNames(
+        className,
+        'group/icon inline-flex items-center justify-center',
+      )}
       href={href}
       target={target}
       rel={target === '_blank' ? 'noreferrer' : undefined}
     >
-      <img className={styles.inactive} src={img} alt="inactive_icon" />
-      <img className={styles.active} src={activeImg} alt="active_icon" />
+      <img
+        className="mr-[6px] group-hover/icon:hidden"
+        src={img}
+        alt="inactive_icon"
+      />
+      <img
+        className="mr-[6px] hidden group-hover/icon:block"
+        src={activeImg}
+        alt="active_icon"
+      />
       {text}
     </a>
   );
diff --git a/src/components/common/ModuleTitle/index.module.less b/src/components/common/ModuleTitle/index.module.less
deleted file mode 100644
index c9a880d4..00000000
--- a/src/components/common/ModuleTitle/index.module.less
+++ /dev/null
@@ -1,39 +0,0 @@
-.msg {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-
-  .title {
-    height: auto;
-    line-height: 1.3;
-    margin-top: 0;
-    font-size: 40px;
-    color: #1d2129;
-    margin-bottom: 16px;
-    font-family: var(--font-sans);
-    font-weight: 700;
-  }
-
-  .subTitle {
-    font-family: var(--font-sans);
-    color: #424e66;
-    letter-spacing: 0;
-    line-height: 24px;
-    margin-bottom: 32px;
-    max-width: 800px;
-  }
-}
-
-@media (max-width: 640px) {
-  .msg {
-    text-align: center;
-    padding-inline: 12px;
-    .title {
-      font-size: 28px;
-    }
-    .subTitle {
-      font-size: 14px;
-    }
-  }
-}
diff --git a/src/components/common/ModuleTitle/index.tsx b/src/components/common/ModuleTitle/index.tsx
index 6c835a59..789e9289 100644
--- a/src/components/common/ModuleTitle/index.tsx
+++ b/src/components/common/ModuleTitle/index.tsx
@@ -1,5 +1,3 @@
-import styles from './index.module.less';
-
 type ModuleTitleProps = {
   title: string;
   subTitle?: string;
@@ -9,9 +7,15 @@ type ModuleTitleProps = {
 export default function ModuleTitle(props: ModuleTitleProps) {
   const { title, subTitle } = props;
   return (
-    <div className={styles.msg}>
-      <h2 className={styles.title}>{title}</h2>
-      {subTitle && <div className={styles.subTitle}>{subTitle}</div>}
+    <div className="flex items-center justify-center flex-col mobile:text-center mobile:px-3">
+      <h2 className="h-auto leading-[1.3] mt-0 text-[40px] text-[#1d2129] mb-4 font-sans font-bold mobile:text-[28px]">
+        {title}
+      </h2>
+      {subTitle && (
+        <div className="font-sans text-[#424e66] tracking-normal leading-6 mb-8 max-w-[800px] mobile:text-[14px]">
+          {subTitle}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/common/OverflowedText/index.less b/src/components/common/OverflowedText/index.less
deleted file mode 100644
index 58b04ce9..00000000
--- a/src/components/common/OverflowedText/index.less
+++ /dev/null
@@ -1,12 +0,0 @@
-.component-overflowed-text {
-  max-width: 100px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  &.max-height-text {
-    white-space: normal;
-    max-width: none;
-    word-break: break-all;
-  }
-}
diff --git a/src/components/common/OverflowedText/index.tsx b/src/components/common/OverflowedText/index.tsx
index 22ae9f07..2eacca1a 100644
--- a/src/components/common/OverflowedText/index.tsx
+++ b/src/components/common/OverflowedText/index.tsx
@@ -6,8 +6,6 @@ import omit from 'lodash/omit.js';
 import toNumber from 'lodash/toNumber.js';
 import { PureComponent } from 'react';
 
-import './index.less';
-
 type Props = {
   className?: string;
   text: string;
@@ -75,9 +73,9 @@ export class OverflowedText extends PureComponent<Props> {
       'width',
     ]);
     const cls = cx(
-      'component-overflowed-text',
+      'overflow-hidden text-ellipsis',
       className,
-      maxHeight && 'max-height-text',
+      maxHeight ? 'whitespace-normal break-all' : 'whitespace-nowrap',
     );
 
     let textStyle: Record<string, string> = {