From ba6ae87a1daba3fb9c509b102e5e54fa316ec52b Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Fri, 11 Jul 2025 16:50:48 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96template-admin-ts?=
 =?UTF-8?q?=E8=87=AA=E5=B8=A6=E6=A0=B7=E5=BC=8F=E5=AF=BC=E5=85=A5=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/plugins/unocss.ts                      | 20 +--------
 src/App.vue                                   |  4 ++
 src/components/_base/breadcrumb/index.vue     |  2 +-
 .../_base/exit-account-modal/index.vue        |  4 +-
 src/components/_base/menu/index.vue           |  4 +-
 src/components/_base/navbar/index.vue         |  4 +-
 src/components/_base/tab-bar/index.vue        |  2 +-
 src/components/_base/tab-bar/tab-item.vue     |  2 +-
 src/components/confirm-button/index.vue       |  2 +-
 src/components/container.vue                  |  4 +-
 .../custom-table-column-modal/style.scss      |  6 +--
 src/components/delete-modal.vue               |  8 ++--
 src/components/join-modal.vue                 |  4 +-
 src/components/modal.vue                      |  6 +--
 src/components/no-data/index.vue              |  2 +-
 src/components/wyg-form/index.vue             |  2 +-
 src/components/wyg-table/index.vue            |  2 +-
 src/layouts/Basic.vue                         |  8 ++--
 src/layouts/NotFound.vue                      |  2 +-
 src/layouts/Page.vue                          |  2 +-
 src/main.ts                                   |  4 +-
 src/styles/components/checkbox.scss           |  9 ++--
 src/styles/components/pagination.scss         |  2 +-
 src/styles/components/table.scss              |  2 +-
 src/styles/components/tabs.scss               |  2 +-
 src/styles/font.scss                          |  8 ++--
 src/styles/index.scss                         | 10 +++++
 src/styles/index.ts                           |  9 ----
 src/styles/lib/reset.scss                     | 25 +++++++++++
 src/styles/lib/variable.scss                  |  8 ++++
 src/styles/{vars.css => vars.scss}            | 43 +++----------------
 src/views/components/dataEngine/hotCloud.vue  |  4 +-
 .../components/dataEngine/hotTranslation.vue  |  4 +-
 .../dataEngine/keyBrandMovement.vue           |  2 +-
 src/views/components/dataEngine/keyWord.vue   |  6 +--
 .../components/dataEngine/userPainPoints.vue  |  4 +-
 .../components/dataEngine/userPersona.vue     |  4 +-
 .../components/drag/DraggableResizable.vue    |  2 +-
 src/views/components/drag/index.vue           |  2 +-
 src/views/components/layout/comp1.vue         |  2 +-
 src/views/components/layout/comp2.vue         |  2 +-
 src/views/components/layout/comp3.vue         |  2 +-
 src/views/components/layout/comp4.vue         |  2 +-
 src/views/components/layout/index.vue         |  2 +-
 src/views/components/login/style.scss         |  2 +-
 .../components/management/account/index.vue   | 24 +++++------
 .../management/enterprise/index.vue           | 16 +++----
 .../components/management/person/index.vue    | 12 +++---
 src/views/components/permission/auth.vue      |  2 +-
 .../permission/choose-enterprise.vue          |  2 +-
 src/views/components/table/index.vue          |  2 +-
 src/views/components/workplace/index.vue      |  2 +-
 .../components/workplace/modules/case.vue     | 10 ++---
 .../components/workplace/modules/product.vue  | 16 +++----
 .../brands/brand-materials/style.scss         |  2 +-
 src/views/property-marketing/component.scss   |  2 +-
 .../businessAnalysisReport.vue                |  2 +-
 .../competitiveProductAnalysisReport.vue      |  2 +-
 .../components/account-table/style.scss       |  2 +-
 .../components/custom-column-modal/style.scss |  6 +--
 .../components/filter-block/style.scss        |  2 +-
 .../account-dashboard/style.scss              |  4 +-
 .../components/note-table/style.scss          |  2 +-
 .../media-account/account-detail/style.scss   |  4 +-
 .../components/account-table/style.scss       |  8 ++--
 .../components/add-account-modal/style.scss   |  6 +--
 .../authorized-account-modal/style.scss       |  6 +--
 .../components/batch-group-modal/style.scss   |  2 +-
 .../components/batch-tag-modal/style.scss     |  2 +-
 .../components/filter-block/style.scss        |  2 +-
 .../components/group-manage-modal/style.scss  |  4 +-
 .../components/import-prompt-modal/style.scss |  2 +-
 .../reauthorize-account-modal/style.scss      |  6 +--
 .../components/status-box/index.vue           |  2 +-
 .../media-account/account-manage/style.scss   |  6 +--
 .../put-account/account-dashboard/style.scss  |  4 +-
 .../components/board-table/style.scss         |  2 +-
 .../components/filter-block/style.scss        |  2 +-
 .../components/group-manage-modal/style.scss  |  4 +-
 .../components/plan-table/style.scss          |  2 +-
 .../put-account/account-data/style.scss       |  2 +-
 .../components/account-table/style.scss       |  8 ++--
 .../components/add-account-modal/style.scss   |  6 +--
 .../authorized-account-modal/style.scss       |  6 +--
 .../components/filter-block/style.scss        |  2 +-
 .../components/import-prompt-modal/style.scss |  2 +-
 .../components/status-box/index.vue           |  2 +-
 .../put-account/account-manage/style.scss     |  6 +--
 .../components/table-data/listSearchForm.vue  |  2 +-
 .../components/table-data/style.scss          |  2 +-
 .../investment-guidelines/style.scss          |  4 +-
 .../repository/test/index.vue                 |  2 +-
 vite.config.ts                                |  2 +-
 93 files changed, 230 insertions(+), 242 deletions(-)
 create mode 100644 src/styles/index.scss
 delete mode 100644 src/styles/index.ts
 create mode 100644 src/styles/lib/reset.scss
 create mode 100644 src/styles/lib/variable.scss
 rename src/styles/{vars.css => vars.scss} (80%)

diff --git a/config/plugins/unocss.ts b/config/plugins/unocss.ts
index c5b1970..0910253 100644
--- a/config/plugins/unocss.ts
+++ b/config/plugins/unocss.ts
@@ -1,8 +1,8 @@
 /*
  * @Author: 田鑫
  * @Date: 2023-03-05 18:14:16
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2025-06-25 10:54:24
+ * @LastEditors: rd 1344903914@qq.com
+ * @LastEditTime: 2025-07-11 16:30:29
  * @Description:
  */
 import Unocss from 'unocss/vite';
@@ -41,21 +41,5 @@ export const configUnocss = () =>
       [/^w-(\d+)$/, ([, d]) => ({ width: `${d}px !important` })],
       [/^h-(\d+)$/, ([, d]) => ({ height: `${d}px !important` })],
       [/^ft-(\d+)$/, ([, d]) => ({ 'font-size': `${d}px !important` })],
-      [
-        'box-container',
-        {
-          'border-radius': '2px',
-          padding: '20px',
-          margin: '8px',
-          'background-color': '#fff',
-        },
-      ],
-      [
-        'justify-between',
-        {
-          'justify-content': 'space-between',
-        },
-      ],
-      ['align-center', { 'text-align': 'center' }],
     ],
   });
diff --git a/src/App.vue b/src/App.vue
index 325eb50..4441999 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,3 +41,7 @@ onMounted(() => {
   });
 });
 </script>
+
+<style lang="scss">
+@import './styles/index.scss';
+</style>
diff --git a/src/components/_base/breadcrumb/index.vue b/src/components/_base/breadcrumb/index.vue
index e923879..b5539c7 100644
--- a/src/components/_base/breadcrumb/index.vue
+++ b/src/components/_base/breadcrumb/index.vue
@@ -37,7 +37,7 @@ const matched = computed(() => {
   </a-breadcrumb> -->
 </template>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .container-breadcrumb {
   margin: 16px 0;
   :deep(.arco-breadcrumb-item) {
diff --git a/src/components/_base/exit-account-modal/index.vue b/src/components/_base/exit-account-modal/index.vue
index 030e470..32a8380 100644
--- a/src/components/_base/exit-account-modal/index.vue
+++ b/src/components/_base/exit-account-modal/index.vue
@@ -67,7 +67,7 @@ defineExpose({ open });
     padding: 24px;
     .s1 {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -75,7 +75,7 @@ defineExpose({ open });
     }
     .s2 {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/components/_base/menu/index.vue b/src/components/_base/menu/index.vue
index 7083b5e..04c296b 100644
--- a/src/components/_base/menu/index.vue
+++ b/src/components/_base/menu/index.vue
@@ -170,7 +170,7 @@ export default defineComponent({
     }
     .arco-menu-title {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 16px;
       font-style: normal;
       font-weight: 400;
@@ -194,7 +194,7 @@ export default defineComponent({
     border-radius: 8px;
     .arco-menu-item-inner {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 16px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/components/_base/navbar/index.vue b/src/components/_base/navbar/index.vue
index 333167b..6122ae8 100644
--- a/src/components/_base/navbar/index.vue
+++ b/src/components/_base/navbar/index.vue
@@ -138,7 +138,7 @@ const handleDopdownClick = (item) => {
   margin-left: 40px;
   .menu-item-text {
     color: var(--Text-2, #3c4043);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -225,7 +225,7 @@ const handleDopdownClick = (item) => {
         align-items: center;
         .menu-item-text {
           color: var(--Text-2, #3c4043);
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 16px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/components/_base/tab-bar/index.vue b/src/components/_base/tab-bar/index.vue
index 9a0a353..d430421 100644
--- a/src/components/_base/tab-bar/index.vue
+++ b/src/components/_base/tab-bar/index.vue
@@ -43,7 +43,7 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .tab-bar-container {
   position: relative;
   background-color: var(--color-bg-2);
diff --git a/src/components/_base/tab-bar/tab-item.vue b/src/components/_base/tab-bar/tab-item.vue
index bfb11a3..4bcdd29 100644
--- a/src/components/_base/tab-bar/tab-item.vue
+++ b/src/components/_base/tab-bar/tab-item.vue
@@ -144,7 +144,7 @@ const actionSelect = async (value: any) => {
   </a-dropdown>
 </template>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .tag-link {
   color: var(--color-text-2);
   text-decoration: none;
diff --git a/src/components/confirm-button/index.vue b/src/components/confirm-button/index.vue
index c226209..679f8d9 100644
--- a/src/components/confirm-button/index.vue
+++ b/src/components/confirm-button/index.vue
@@ -67,4 +67,4 @@ function handleCancel() {
   emit('cancelEmit');
 }
 </script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/components/container.vue b/src/components/container.vue
index 14d2f20..b99a435 100644
--- a/src/components/container.vue
+++ b/src/components/container.vue
@@ -15,7 +15,7 @@ const props = defineProps<{
   title: string;
 }>();
 </script>
-<style scoped lang="less">
+<style scoped lang="scss">
 .container {
   border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
   background: var(--BG-white, rgba(255, 255, 255, 1));
@@ -23,7 +23,7 @@ const props = defineProps<{
   border-radius: 8px;
 }
 .title {
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 18px;
   line-height: 24px;
diff --git a/src/components/custom-table-column-modal/style.scss b/src/components/custom-table-column-modal/style.scss
index 2700810..79eeae6 100644
--- a/src/components/custom-table-column-modal/style.scss
+++ b/src/components/custom-table-column-modal/style.scss
@@ -22,7 +22,7 @@
             margin-bottom: 16px;
             .text {
               color: var(--Text-1, #211f24);
-              font-family: 'PuHuiTi-Medium';
+              font-family: $font-family-medium;
               font-size: 16px;
               font-style: normal;
               font-weight: 400;
@@ -47,7 +47,7 @@
         flex-direction: column;
         .checked-title {
           color: var(--Text-1, #211f24);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 16px;
           font-style: normal;
           font-weight: 400;
@@ -69,7 +69,7 @@
             align-items: center;
             .text {
               color: var(--Text-1, #211f24);
-              font-family: 'PuHuiTi-Medium';
+              font-family: $font-family-medium;
               font-size: 14px;
               font-style: normal;
               font-weight: 400;
diff --git a/src/components/delete-modal.vue b/src/components/delete-modal.vue
index 0d3664d..ad26313 100644
--- a/src/components/delete-modal.vue
+++ b/src/components/delete-modal.vue
@@ -8,7 +8,7 @@
   </a-modal>
 </template>
 <script setup lang="ts"></script>
-<style lang="less">
+<style lang="scss">
 :deep(.arco-btn-status-danger) {
   background-color: red !important;
   width: 1000px !important;
@@ -19,7 +19,7 @@
   }
   .delete-modal-title {
     margin-top: 24px;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     color: var(--Text-1, rgba(33, 31, 36, 1));
@@ -35,14 +35,14 @@
       border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
     }
     :last-child {
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       margin-left: 16px;
diff --git a/src/components/join-modal.vue b/src/components/join-modal.vue
index 1a8f320..c05628b 100644
--- a/src/components/join-modal.vue
+++ b/src/components/join-modal.vue
@@ -31,10 +31,10 @@ onMounted(() => {
   getEnterprise();
 });
 </script>
-<style lang="less">
+<style lang="scss">
 .join-body {
   margin: 0;
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 14px;
   color: var(--Text-1, rgba(33, 31, 36, 1));
diff --git a/src/components/modal.vue b/src/components/modal.vue
index b2ab5c5..e13c2ec 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -4,7 +4,7 @@
   </a-modal>
 </template>
 <script setup lang="ts"></script>
-<style lang="less">
+<style lang="scss">
 .modal {
   .arco-modal-header {
     border-bottom: none;
@@ -15,14 +15,14 @@
       border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
     }
     :last-child {
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       margin-left: 16px;
diff --git a/src/components/no-data/index.vue b/src/components/no-data/index.vue
index b725aa0..3fab001 100644
--- a/src/components/no-data/index.vue
+++ b/src/components/no-data/index.vue
@@ -39,7 +39,7 @@ const props = defineProps({
   line-height: 1.5em;
   .text {
     color: var(--Text-3, #737478);
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/components/wyg-form/index.vue b/src/components/wyg-form/index.vue
index 319c8d6..36b4cd4 100644
--- a/src/components/wyg-form/index.vue
+++ b/src/components/wyg-form/index.vue
@@ -249,7 +249,7 @@ defineExpose({
   updateFieldsList,
 });
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 :deep(.arco-picker) {
   width: 100%;
 }
diff --git a/src/components/wyg-table/index.vue b/src/components/wyg-table/index.vue
index ec569c5..22d60aa 100644
--- a/src/components/wyg-table/index.vue
+++ b/src/components/wyg-table/index.vue
@@ -70,4 +70,4 @@ watchEffect(() => {
   }
 });
 </script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/layouts/Basic.vue b/src/layouts/Basic.vue
index f3879ae..935161d 100644
--- a/src/layouts/Basic.vue
+++ b/src/layouts/Basic.vue
@@ -102,9 +102,9 @@ provide('toggleDrawerMenu', () => {
   </a-layout>
 </template>
 
-<style scoped lang="less">
-@nav-size-height: 72px;
-@layout-max-width: 1100px;
+<style scoped lang="scss">
+$nav-size-height: 72px;
+$layout-max-width: 1100px;
 
 .layout {
   width: 100%;
@@ -116,7 +116,7 @@ provide('toggleDrawerMenu', () => {
   left: 0;
   z-index: 100;
   width: 100%;
-  height: @nav-size-height;
+  height: $nav-size-height;
 }
 .layout-sider {
   position: fixed;
diff --git a/src/layouts/NotFound.vue b/src/layouts/NotFound.vue
index cfc297a..33e7585 100644
--- a/src/layouts/NotFound.vue
+++ b/src/layouts/NotFound.vue
@@ -14,7 +14,7 @@ const back = () => {
   </div>
 </template>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .content {
   position: absolute;
   top: 50%;
diff --git a/src/layouts/Page.vue b/src/layouts/Page.vue
index 6f6a6aa..7a20384 100644
--- a/src/layouts/Page.vue
+++ b/src/layouts/Page.vue
@@ -26,7 +26,7 @@ const routerKey = computed(() => {
   </router-view>
 </template>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .footer {
   margin: 20px;
   width: 98%;
diff --git a/src/main.ts b/src/main.ts
index 4c78e24..9ce866e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,10 +9,10 @@ import NoData from '@/components/no-data';
 import '@/api/index';
 
 import '@arco-design/web-vue/dist/arco.css'; // Arco 默认样式
-import './styles';
 import './core';
+
+import 'normalize.css';
 import 'uno.css';
-import './mock';
 // import '@/styles/vars.css'; // 优先加载
 
 const app = createApp(App);
diff --git a/src/styles/components/checkbox.scss b/src/styles/components/checkbox.scss
index 2bc38b0..1161208 100644
--- a/src/styles/components/checkbox.scss
+++ b/src/styles/components/checkbox.scss
@@ -11,21 +11,20 @@
     }
     &.arco-checkbox-checked {
       .arco-checkbox-icon {
-        background-color: #A794FE !important;
+        background-color: #a794fe !important;
       }
     }
     &.arco-checkbox-indeterminate {
       .arco-checkbox-icon {
         border: none;
-        background-color: #A794FE !important;
+        background-color: #a794fe !important;
       }
     }
   }
   &.arco-checkbox-checked,
   &.arco-checkbox-indeterminate {
-    .arco-checkbox-icon  {
-     background-color: #6D4CFE !important; 
+    .arco-checkbox-icon {
+      background-color: #6d4cfe !important;
     }
   }
-
 }
diff --git a/src/styles/components/pagination.scss b/src/styles/components/pagination.scss
index e739b4e..6015af3 100644
--- a/src/styles/components/pagination.scss
+++ b/src/styles/components/pagination.scss
@@ -28,7 +28,7 @@
     &-prepend {
       color: var(--Text-2, #3c4043);
       text-align: right;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss
index 8f422b4..4abb4b9 100644
--- a/src/styles/components/table.scss
+++ b/src/styles/components/table.scss
@@ -1,7 +1,7 @@
 .arco-table {
   @mixin table-cell-text {
     color: var(--Text-1, #3C4043);
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/styles/components/tabs.scss b/src/styles/components/tabs.scss
index 4148086..1e15683 100644
--- a/src/styles/components/tabs.scss
+++ b/src/styles/components/tabs.scss
@@ -4,7 +4,7 @@
       .arco-tabs-tab {
         .arco-tabs-tab-title {
           color: var(--Text-2, #3c4043);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 16px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/styles/font.scss b/src/styles/font.scss
index 7c9c86e..f944b4a 100644
--- a/src/styles/font.scss
+++ b/src/styles/font.scss
@@ -1,11 +1,11 @@
 // @font-face {
-//   font-family: 'PuHuiTi-Regular';
+//   font-family: $font-family-regular;
 //   src: url('@/assets/fonts/Alibaba-PuHuiTi-Regular.woff2') format('woff2');
 //   font-display: swap;
 // }
 
 // @font-face {
-//   font-family: 'PuHuiTi-Medium';
+//   font-family: $font-family-medium;
 //   src: url('@/assets/fonts/Alibaba-PuHuiTi-Medium.woff2') format('woff2');
 //   font-display: swap;
 // }
@@ -18,11 +18,11 @@
 
 // // 使用统一的字体族名
 // .font-family-puhui-regular {
-//   font-family: 'PuHuiTi-Regular' !important;
+//   font-family: $font-family-regular !important;
 // }
 
 // .font-family-puhui-medium {
-//   font-family: 'PuHuiTi-Medium' !important;
+//   font-family: $font-family-medium !important;
 // }
 
 // .font-family-puhui-bold {
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 0000000..d574cc1
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,10 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-30 16:03:42
+ */
+@import './lib/variable.scss';
+@import './lib/reset.scss';
+
+@import './vars.scss';
+@import './components/index.scss';
+// @import './font.scss';
diff --git a/src/styles/index.ts b/src/styles/index.ts
deleted file mode 100644
index 0541f16..0000000
--- a/src/styles/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * @Author: RenXiaoDong
- * @Date: 2025-06-30 16:03:42
- */
-import './vars.css';
-import './components/index.scss';
-import './font.scss';
-import 'normalize.css';
-import 'uno.css';
diff --git a/src/styles/lib/reset.scss b/src/styles/lib/reset.scss
new file mode 100644
index 0000000..89d6024
--- /dev/null
+++ b/src/styles/lib/reset.scss
@@ -0,0 +1,25 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: PingFangSC-Regular, PingFang SC;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body {
+  background: $color-background;
+  font-family: $font-family-regular;
+  font-size: $font-size-14;
+  -webkit-print-color-adjust: exact;
+}
+
+p {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+}
diff --git a/src/styles/lib/variable.scss b/src/styles/lib/variable.scss
new file mode 100644
index 0000000..5ee4b32
--- /dev/null
+++ b/src/styles/lib/variable.scss
@@ -0,0 +1,8 @@
+$font-family-regular: 'PingFangSC-Regular', 'Microsoft Yahei', Arial, sans-serif;
+$font-family-medium: 'PingFangSC-Medium', 'Microsoft Yahei', Arial, sans-serif;
+$font-family-light: 'PingFangSC-Light', 'Microsoft Yahei', Arial, sans-serif;
+$font-family-bold: 'PingFangSC-Semibold', 'PingFangSC-Regular', 'Microsoft Yahei', Arial, sans-serif;
+
+$color-background: #f9f9f9;
+
+$font-size-14: 14px;
\ No newline at end of file
diff --git a/src/styles/vars.css b/src/styles/vars.scss
similarity index 80%
rename from src/styles/vars.css
rename to src/styles/vars.scss
index 7a00c4c..573e1ee 100644
--- a/src/styles/vars.css
+++ b/src/styles/vars.scss
@@ -1,8 +1,9 @@
 :root {
-  /* 修改主色 */
-  --arco-primary-6: #dd3e05 !important; /* 默认主色 */
-  --arco-primary-5: #40ffdf !important; /* 悬停色 */
-  --arco-primary-7: #c9dbed !important; /* 点击色 */
+  /* 主色覆盖（强制替换 Arco 默认蓝色） */
+  --arco-primary-6: #6d4cfe !important;
+  --arco-primary-5: #8a70fe !important;
+  --arco-primary-7: #573dcb !important;
+  --arco-primary-1: #f5f2ff !important; /* 浅色背景 */
 
   /* 修改成功/警告/错误色 */
   --arco-success-6: #52c41a !important;
@@ -14,40 +15,6 @@
   --arco-bg-1: #f7f8fa !important; /* 页面背景 */
 }
 
-* {
-  box-sizing: border-box;
-}
-p {
-  margin: 0;
-  padding: 0;
-}
-
-.flex {
-  display: flex;
-}
-
-.item-center {
-  align-items: center;
-}
-
-.box-container {
-  border-radius: 2px;
-  padding: 20px;
-  margin: 8px;
-  background-color: #fff;
-}
-
-:root {
-  /* 主色覆盖（强制替换 Arco 默认蓝色） */
-  --arco-primary-6: #6d4cfe !important;
-  --arco-primary-5: #8a70fe !important;
-  --arco-primary-7: #573dcb !important;
-  --arco-primary-1: #f5f2ff !important; /* 浅色背景 */
-}
-
-.arco-checkbox-checked .arco-checkbox-icon {
-  background-color: #573dcb !important;
-}
 /* 强制所有组件使用主色 */
 .arco-btn-primary,
 .arco-menu-selected,
diff --git a/src/views/components/dataEngine/hotCloud.vue b/src/views/components/dataEngine/hotCloud.vue
index 4fcc36b..1536621 100644
--- a/src/views/components/dataEngine/hotCloud.vue
+++ b/src/views/components/dataEngine/hotCloud.vue
@@ -160,7 +160,7 @@ const processTagData = (apiData) => {
 };
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 /* 自定义样式 */
 :deep(.arco-table-th) {
   background-color: var(--color-fill-2);
@@ -219,7 +219,7 @@ a-tag:hover {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/components/dataEngine/hotTranslation.vue b/src/views/components/dataEngine/hotTranslation.vue
index c7a1fa8..5c699b8 100644
--- a/src/views/components/dataEngine/hotTranslation.vue
+++ b/src/views/components/dataEngine/hotTranslation.vue
@@ -354,7 +354,7 @@ const handleOk = () => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -378,7 +378,7 @@ const handleOk = () => {
     padding: 12px 20px 0;
     .cts {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/views/components/dataEngine/keyBrandMovement.vue b/src/views/components/dataEngine/keyBrandMovement.vue
index 2bbc0ea..3e67d96 100644
--- a/src/views/components/dataEngine/keyBrandMovement.vue
+++ b/src/views/components/dataEngine/keyBrandMovement.vue
@@ -287,7 +287,7 @@ watch(selectedIndustry, () => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/components/dataEngine/keyWord.vue b/src/views/components/dataEngine/keyWord.vue
index 65a8959..d9d0de2 100644
--- a/src/views/components/dataEngine/keyWord.vue
+++ b/src/views/components/dataEngine/keyWord.vue
@@ -659,7 +659,7 @@ onMounted(() => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -668,7 +668,7 @@ onMounted(() => {
 }
 .cts {
   color: var(--Text-2, #3c4043);
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -694,7 +694,7 @@ onMounted(() => {
     padding: 12px 20px 0;
     .cts {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/views/components/dataEngine/userPainPoints.vue b/src/views/components/dataEngine/userPainPoints.vue
index 74bc9e5..52b5fb5 100644
--- a/src/views/components/dataEngine/userPainPoints.vue
+++ b/src/views/components/dataEngine/userPainPoints.vue
@@ -276,7 +276,7 @@ const search = () => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -299,7 +299,7 @@ const search = () => {
     padding: 12px 20px 0;
     .cts {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/views/components/dataEngine/userPersona.vue b/src/views/components/dataEngine/userPersona.vue
index 8ae2b1d..43f249a 100644
--- a/src/views/components/dataEngine/userPersona.vue
+++ b/src/views/components/dataEngine/userPersona.vue
@@ -602,7 +602,7 @@ onMounted(() => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -611,7 +611,7 @@ onMounted(() => {
 }
 .cts {
   color: var(--Text-2, #3c4043);
-  font-family: 'PuHuiTi-Regular';
+  font-family: $font-family-regular;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
diff --git a/src/views/components/drag/DraggableResizable.vue b/src/views/components/drag/DraggableResizable.vue
index 911fabf..6d711ac 100644
--- a/src/views/components/drag/DraggableResizable.vue
+++ b/src/views/components/drag/DraggableResizable.vue
@@ -360,7 +360,7 @@ if (container.value) {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .draggable-resizable {
   position: absolute;
   background-color: lightblue;
diff --git a/src/views/components/drag/index.vue b/src/views/components/drag/index.vue
index 8dd64d1..d420b1d 100644
--- a/src/views/components/drag/index.vue
+++ b/src/views/components/drag/index.vue
@@ -447,7 +447,7 @@ const adjustComponentPosition = (
   return { x: adjustedX, y: adjustedY };
 };
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .app {
   position: relative;
   width: 100%;
diff --git a/src/views/components/layout/comp1.vue b/src/views/components/layout/comp1.vue
index 72e332e..3e543a7 100644
--- a/src/views/components/layout/comp1.vue
+++ b/src/views/components/layout/comp1.vue
@@ -16,7 +16,7 @@
 
 <script setup lang="ts"></script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .flex-container {
   display: flex;
   flex-direction: row;
diff --git a/src/views/components/layout/comp2.vue b/src/views/components/layout/comp2.vue
index c6a9c93..dcddc9d 100644
--- a/src/views/components/layout/comp2.vue
+++ b/src/views/components/layout/comp2.vue
@@ -10,4 +10,4 @@
 </template>
 
 <script setup lang="ts"></script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/components/layout/comp3.vue b/src/views/components/layout/comp3.vue
index a2f9505..2e04f2f 100644
--- a/src/views/components/layout/comp3.vue
+++ b/src/views/components/layout/comp3.vue
@@ -10,4 +10,4 @@
 </template>
 
 <script setup lang="ts"></script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/components/layout/comp4.vue b/src/views/components/layout/comp4.vue
index 9c3bc35..222c6b5 100644
--- a/src/views/components/layout/comp4.vue
+++ b/src/views/components/layout/comp4.vue
@@ -10,4 +10,4 @@
 </template>
 
 <script setup lang="ts"></script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/components/layout/index.vue b/src/views/components/layout/index.vue
index fab9732..bcfa90e 100644
--- a/src/views/components/layout/index.vue
+++ b/src/views/components/layout/index.vue
@@ -380,7 +380,7 @@ function getComponentStyle(component: ComponentState) {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .page-container {
   width: 100%;
   height: 100%;
diff --git a/src/views/components/login/style.scss b/src/views/components/login/style.scss
index 94f0789..86cc319 100644
--- a/src/views/components/login/style.scss
+++ b/src/views/components/login/style.scss
@@ -39,7 +39,7 @@
     transform: translateX(-50%);
 
     .text {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       line-height: 22px;
diff --git a/src/views/components/management/account/index.vue b/src/views/components/management/account/index.vue
index 4d95ce7..88d4209 100644
--- a/src/views/components/management/account/index.vue
+++ b/src/views/components/management/account/index.vue
@@ -178,13 +178,13 @@ onMounted(() => {
 });
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .primary-account {
   border-radius: 2px;
   padding-right: 8px;
   padding-left: 8px;
   background: var(--Brand-Brand-1, rgba(240, 237, 255, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   line-height: 20px;
@@ -195,7 +195,7 @@ onMounted(() => {
   padding-right: 8px;
   padding-left: 8px;
   background: var(--Functional-Warning-1, rgba(255, 245, 222, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   color: var(--Functional-Warning-6, rgba(255, 174, 0, 1));
@@ -204,7 +204,7 @@ onMounted(() => {
   border-radius: 4px;
   padding: 2px 12px;
   border: 1px solid var(--Functional-Danger-6, rgba(246, 75, 49, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   line-height: 20px;
@@ -214,7 +214,7 @@ onMounted(() => {
   border-radius: 4px;
   padding: 5px 16px;
   border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 14px;
   color: var(--Brand-Brand-6, rgba(109, 76, 254, 1));
@@ -224,14 +224,14 @@ onMounted(() => {
   margin-bottom: 12px;
   .add-account-title {
     margin: 0;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     color: var(--Text-1, rgba(33, 31, 36, 1));
   }
   .add-account-subtitle {
     margin: 4px 0 0 0;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -243,7 +243,7 @@ onMounted(() => {
     border-radius: 4px;
     padding: 12px 16px;
     background: var(--BG-200, rgba(242, 243, 245, 1));
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -254,7 +254,7 @@ onMounted(() => {
   }
   .cannot-add-account-title {
     margin: 0;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     color: var(--Text-1, rgba(33, 31, 36, 1));
@@ -267,7 +267,7 @@ onMounted(() => {
   .cannot-add-account-subtitle {
     margin: 16px 0 0 0;
     padding-left: 32px;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -276,7 +276,7 @@ onMounted(() => {
 .delete-modal-content {
   margin-left: 34px;
   margin-top: 16px;
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -289,7 +289,7 @@ onMounted(() => {
   justify-content: space-between;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/components/management/enterprise/index.vue b/src/views/components/management/enterprise/index.vue
index 6826ec3..6beef29 100644
--- a/src/views/components/management/enterprise/index.vue
+++ b/src/views/components/management/enterprise/index.vue
@@ -98,14 +98,14 @@ async function handleOk() {
 }
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .tips {
   height: 40px;
   border-radius: 4px;
   padding: 10px 16px;
   background: var(--BG-100, rgba(247, 248, 250, 1));
   border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   span {
@@ -118,7 +118,7 @@ async function handleOk() {
     align-items: center;
   }
   :deep(.arco-form-item-label) {
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     margin: 0;
@@ -126,12 +126,12 @@ async function handleOk() {
   :deep(.arco-input-wrapper) {
     background: white;
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     padding: 4px 12px;
     input::placeholder {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       color: var(--Text-4, rgba(147, 148, 153, 1));
@@ -141,7 +141,7 @@ async function handleOk() {
     background: var(--BG-200, rgba(242, 243, 245, 1));
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
     .arco-input:disabled {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
     }
@@ -156,7 +156,7 @@ async function handleOk() {
   border: 1px solid rgba(109, 76, 254, 1);
   border-radius: 4px;
   padding: 2px 12px;
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   color: rgba(109, 76, 254, 1);
@@ -168,7 +168,7 @@ async function handleOk() {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/components/management/person/index.vue b/src/views/components/management/person/index.vue
index bd57c3e..e5dc18e 100644
--- a/src/views/components/management/person/index.vue
+++ b/src/views/components/management/person/index.vue
@@ -261,7 +261,7 @@ function getFileExtension(filename: string): string {
     align-items: center;
   }
   :deep(.arco-form-item-label) {
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     margin: 0;
@@ -269,12 +269,12 @@ function getFileExtension(filename: string): string {
   :deep(.arco-input-wrapper) {
     background: white;
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     padding: 4px 12px;
     input::placeholder {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       color: var(--Text-4, rgba(147, 148, 153, 1));
@@ -284,7 +284,7 @@ function getFileExtension(filename: string): string {
     background: var(--BG-200, rgba(242, 243, 245, 1));
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
     .arco-input:disabled {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
     }
@@ -304,7 +304,7 @@ function getFileExtension(filename: string): string {
     border-radius: 4px;
     padding: 2px 12px;
     border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     vertical-align: middle;
@@ -318,7 +318,7 @@ function getFileExtension(filename: string): string {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/components/permission/auth.vue b/src/views/components/permission/auth.vue
index bb12785..9c8727c 100644
--- a/src/views/components/permission/auth.vue
+++ b/src/views/components/permission/auth.vue
@@ -30,5 +30,5 @@ function login() {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
\ No newline at end of file
diff --git a/src/views/components/permission/choose-enterprise.vue b/src/views/components/permission/choose-enterprise.vue
index f49517f..46763b0 100644
--- a/src/views/components/permission/choose-enterprise.vue
+++ b/src/views/components/permission/choose-enterprise.vue
@@ -15,5 +15,5 @@
 const enterprise = ref('');
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
\ No newline at end of file
diff --git a/src/views/components/table/index.vue b/src/views/components/table/index.vue
index aff4fc3..410c236 100644
--- a/src/views/components/table/index.vue
+++ b/src/views/components/table/index.vue
@@ -49,4 +49,4 @@ function add() {
 
 function deleteItem(record) {}
 </script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/components/workplace/index.vue b/src/views/components/workplace/index.vue
index 66616e1..a672635 100644
--- a/src/views/components/workplace/index.vue
+++ b/src/views/components/workplace/index.vue
@@ -46,7 +46,7 @@ const getSuccessCaseList = async () => {
 };
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .container-body {
   padding-left: 24px !important;
   :deep(> div > .title) {
diff --git a/src/views/components/workplace/modules/case.vue b/src/views/components/workplace/modules/case.vue
index 237d78c..6da8614 100644
--- a/src/views/components/workplace/modules/case.vue
+++ b/src/views/components/workplace/modules/case.vue
@@ -89,7 +89,7 @@ interface SuccessCase {
   data: { label: string; value: string }[];
 }
 </script>
-<style scoped lang="less">
+<style scoped lang="scss">
 .container {
   width: 304px;
   height: 306px;
@@ -139,7 +139,7 @@ interface SuccessCase {
       max-width: 100%;
     }
     .title {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       line-height: 22px;
@@ -151,7 +151,7 @@ interface SuccessCase {
       margin: 0;
       padding: 0;
       .keyword {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-weight: 400;
         font-size: 12px;
         line-height: 20px;
@@ -169,7 +169,7 @@ interface SuccessCase {
       line-height: 28px;
       text-align: center;
       .unit {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-weight: 400;
         font-size: 10px;
         line-height: 24px;
@@ -178,7 +178,7 @@ interface SuccessCase {
       }
     }
     .label {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 10px;
       line-height: 100%;
diff --git a/src/views/components/workplace/modules/product.vue b/src/views/components/workplace/modules/product.vue
index 9a5216a..616cecf 100644
--- a/src/views/components/workplace/modules/product.vue
+++ b/src/views/components/workplace/modules/product.vue
@@ -123,7 +123,7 @@ const gotoModule = (menuId: number) => {
   router.push({ name: routeMap[menuId] });
 };
 </script>
-<style scoped lang="less">
+<style scoped lang="scss">
 .container {
   width: 304px;
   height: 220px;
@@ -141,7 +141,7 @@ const gotoModule = (menuId: number) => {
     border-radius: 4px;
     padding-right: 8px;
     padding-left: 8px;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     line-height: 20px;
@@ -175,7 +175,7 @@ const gotoModule = (menuId: number) => {
     background: rgba(255, 245, 222, 1);
 
     :deep(.arco-statistic-title) {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 12px;
       color: var(--Functional-Warning-7, rgba(204, 139, 0, 1));
@@ -185,7 +185,7 @@ const gotoModule = (menuId: number) => {
     }
 
     :deep(.arco-statistic-value) {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 10px;
       color: var(--Functional-Warning-7, rgba(204, 139, 0, 1));
@@ -201,7 +201,7 @@ const gotoModule = (menuId: number) => {
 
     .title {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 16px;
       line-height: 24px;
@@ -211,7 +211,7 @@ const gotoModule = (menuId: number) => {
 
     .desc {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;
@@ -228,7 +228,7 @@ const gotoModule = (menuId: number) => {
       gap: 8px;
       padding: 2px 12px;
       background-color: rgba(109, 76, 254, 1) !important;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;
@@ -244,7 +244,7 @@ const gotoModule = (menuId: number) => {
       gap: 8px;
       padding: 2px 12px;
       border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;
diff --git a/src/views/property-marketing/brands/brand-materials/style.scss b/src/views/property-marketing/brands/brand-materials/style.scss
index eedda5f..2f61084 100644
--- a/src/views/property-marketing/brands/brand-materials/style.scss
+++ b/src/views/property-marketing/brands/brand-materials/style.scss
@@ -44,7 +44,7 @@
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/component.scss b/src/views/property-marketing/component.scss
index c23d0db..f952093 100644
--- a/src/views/property-marketing/component.scss
+++ b/src/views/property-marketing/component.scss
@@ -32,7 +32,7 @@
       }
       .arco-form-item-label {
         color: var(--Text-1, #211f24);
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue b/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
index f45ee55..0bbeacd 100644
--- a/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
+++ b/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
@@ -198,7 +198,7 @@ const columns = [
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue b/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
index adaea54..d1fe428 100644
--- a/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
+++ b/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
@@ -190,7 +190,7 @@ const columns = [
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss b/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
index 15a6387..a395192 100644
--- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
+++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
@@ -9,7 +9,7 @@
 .account-table {
   .cts {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/style.scss b/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/style.scss
index bdd491a..413912b 100644
--- a/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/style.scss
@@ -22,7 +22,7 @@
             margin-bottom: 16px;
             .text {
               color: var(--Text-1, #211f24);
-              font-family: 'PuHuiTi-Medium';
+              font-family: $font-family-medium;
               font-size: 16px;
               font-style: normal;
               font-weight: 400;
@@ -47,7 +47,7 @@
         flex-direction: column;
         .checked-title {
           color: var(--Text-1, #211f24);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 16px;
           font-style: normal;
           font-weight: 400;
@@ -69,7 +69,7 @@
             align-items: center;
             .text {
               color: var(--Text-1, #211f24);
-              font-family: 'PuHuiTi-Medium';
+              font-family: $font-family-medium;
               font-size: 14px;
               font-style: normal;
               font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-dashboard/components/filter-block/style.scss b/src/views/property-marketing/media-account/account-dashboard/components/filter-block/style.scss
index ff7b556..7814361 100644
--- a/src/views/property-marketing/media-account/account-dashboard/components/filter-block/style.scss
+++ b/src/views/property-marketing/media-account/account-dashboard/components/filter-block/style.scss
@@ -20,7 +20,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-dashboard/style.scss b/src/views/property-marketing/media-account/account-dashboard/style.scss
index 5d17a82..2413784 100644
--- a/src/views/property-marketing/media-account/account-dashboard/style.scss
+++ b/src/views/property-marketing/media-account/account-dashboard/style.scss
@@ -17,7 +17,7 @@
     border: 1px solid #e6e6e8;
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
       :deep(.arco-btn) {
@@ -37,7 +37,7 @@
         }
         .label {
           color: var(--Text-3, #737478);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss b/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
index 12d1404..782fab8 100644
--- a/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
@@ -21,7 +21,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-detail/style.scss b/src/views/property-marketing/media-account/account-detail/style.scss
index c69597f..8b5ad4b 100644
--- a/src/views/property-marketing/media-account/account-detail/style.scss
+++ b/src/views/property-marketing/media-account/account-detail/style.scss
@@ -4,13 +4,13 @@
   flex-direction: column;
   :deep(.cts) {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
     &.title {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
     }
   }
   :deep(.title-row) {
diff --git a/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss b/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
index f8b5991..1affd88 100644
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
@@ -19,7 +19,7 @@
     align-items: flex-start;
     .name {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -30,7 +30,7 @@
       margin-right: 20px;
       flex-shrink: 0;
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -44,7 +44,7 @@
       .cts {
         @include ellipsis;
         color: var(--Text-2, #3c4043);
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-size: 12px;
         font-style: normal;
         font-weight: 400;
@@ -61,7 +61,7 @@
         .text {
           @include ellipsis();
           color: var(--Text-2, #3c4043);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 10px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss
index 0c22c12..7a8dfb3 100644
--- a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss
@@ -9,7 +9,7 @@
       width: 100%;
       .dt {
         color: var(--Brand-Brand-6, #6d4cfe);
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -21,7 +21,7 @@
         background: var(--BG-200, #f2f3f5);
         .name {
           color: var(--Text-1, #211f24);
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
@@ -69,7 +69,7 @@
         .tip {
           color: var(--Text-3, #737478);
           text-align: center;
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 12px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss
index a39d499..74a00ac 100644
--- a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss
@@ -20,7 +20,7 @@
       .s1 {
         color: var(--BG-White, #fff);
         text-align: center;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -30,7 +30,7 @@
   }
   .s2 {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -40,7 +40,7 @@
     overflow: hidden;
     color: var(--Functional-Red-6, #f64b31);
     text-overflow: ellipsis;
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss
index 757020e..a560ce3 100644
--- a/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss
@@ -6,7 +6,7 @@
     // min-height: 200px;
     .t1 {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss
index b006d41..ab567fc 100644
--- a/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss
@@ -6,7 +6,7 @@
     // min-height: 200px;
     .t1 {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss b/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss
index ff7b556..7814361 100644
--- a/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss
@@ -20,7 +20,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
index 4ab43ab..59c92e2 100644
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
@@ -10,7 +10,7 @@
     }
     .s1 {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -40,7 +40,7 @@
         .arco-pagination-jumper-prepend {
           color: var(--Text-2, #3c4043);
           text-align: right;
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss
index 5475c36..85f9419 100644
--- a/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss
@@ -4,7 +4,7 @@
   .arco-modal-body {
     .tip {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/style.scss
index 4d5df74..0c7c83b 100644
--- a/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/style.scss
@@ -20,7 +20,7 @@
       .s1 {
         color: var(--BG-White, #fff);
         text-align: center;
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -30,7 +30,7 @@
   }
   .s2 {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -40,7 +40,7 @@
     overflow: hidden;
     color: var(--Functional-Red-6, #f64b31);
     text-overflow: ellipsis;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/status-box/index.vue b/src/views/property-marketing/media-account/account-manage/components/status-box/index.vue
index e3cdb36..174bd1f 100644
--- a/src/views/property-marketing/media-account/account-manage/components/status-box/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/status-box/index.vue
@@ -61,7 +61,7 @@ const isDisabledReauthorize = (status) => {
 
   .text {
     color: var(--BG-700, #737478);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/style.scss b/src/views/property-marketing/media-account/account-manage/style.scss
index 05d08d9..2f7a2f6 100644
--- a/src/views/property-marketing/media-account/account-manage/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/style.scss
@@ -15,7 +15,7 @@
   .filter-wrap {
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
       :deep(.arco-btn) {
@@ -29,7 +29,7 @@
     border-radius: 2px;
     background: #f0edff;
     .label {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -60,7 +60,7 @@
       padding: 0;
       cursor: pointer;
       color: var(--Brand-Brand-6, #6d4cfe);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-dashboard/style.scss b/src/views/property-marketing/put-account/account-dashboard/style.scss
index bd515e5..9e6a32a 100644
--- a/src/views/property-marketing/put-account/account-dashboard/style.scss
+++ b/src/views/property-marketing/put-account/account-dashboard/style.scss
@@ -28,7 +28,7 @@
 
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
 
@@ -92,7 +92,7 @@
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/components/board-table/style.scss b/src/views/property-marketing/put-account/account-data/components/board-table/style.scss
index 4b056ba..0264b7b 100644
--- a/src/views/property-marketing/put-account/account-data/components/board-table/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/board-table/style.scss
@@ -9,7 +9,7 @@
 .account-table {
   .cts {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss b/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
index bf3813c..191ada1 100644
--- a/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
@@ -21,7 +21,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss
index aa0e147..3c19b01 100644
--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss
@@ -10,7 +10,7 @@
     }
     .s1 {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -40,7 +40,7 @@
         .arco-pagination-jumper-prepend {
           color: var(--Text-2, #3c4043);
           text-align: right;
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/components/plan-table/style.scss b/src/views/property-marketing/put-account/account-data/components/plan-table/style.scss
index 48c67af..643c16e 100644
--- a/src/views/property-marketing/put-account/account-data/components/plan-table/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/plan-table/style.scss
@@ -9,7 +9,7 @@
 .plan-table {
   .cts {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/style.scss b/src/views/property-marketing/put-account/account-data/style.scss
index add16aa..dc0fcac 100644
--- a/src/views/property-marketing/put-account/account-data/style.scss
+++ b/src/views/property-marketing/put-account/account-data/style.scss
@@ -28,7 +28,7 @@
     }
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
       
diff --git a/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss b/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
index 69a4a09..960b3be 100644
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
@@ -19,7 +19,7 @@
     align-items: flex-start;
     .name {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -30,7 +30,7 @@
       margin-right: 20px;
       flex-shrink: 0;
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -44,7 +44,7 @@
       .cts {
         @include ellipsis;
         color: var(--Text-2, #3c4043);
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-size: 12px;
         font-style: normal;
         font-weight: 400;
@@ -61,7 +61,7 @@
         .text {
           @include ellipsis();
           color: var(--Text-2, #3c4043);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 10px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss
index 1304cb2..72132dc 100644
--- a/src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss
@@ -9,7 +9,7 @@
       width: 100%;
       .dt {
         color: var(--Brand-Brand-6, #6d4cfe);
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -21,7 +21,7 @@
         background: var(--BG-200, #f2f3f5);
         .name {
           color: var(--Text-1, #211f24);
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
@@ -69,7 +69,7 @@
         .tip {
           color: var(--Text-3, #737478);
           text-align: center;
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 12px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss
index 269596d..656f26b 100644
--- a/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss
@@ -20,7 +20,7 @@
       .s1 {
         color: var(--BG-White, #fff);
         text-align: center;
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -30,7 +30,7 @@
   }
   .s2 {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -40,7 +40,7 @@
     overflow: hidden;
     color: var(--Functional-Red-6, #f64b31);
     text-overflow: ellipsis;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss b/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss
index ff7b556..7814361 100644
--- a/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss
@@ -20,7 +20,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss b/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss
index aec2422..618362a 100644
--- a/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss
@@ -4,7 +4,7 @@
   .arco-modal-body {
     .tip {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue b/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
index d1b5b4c..bc5362f 100644
--- a/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
@@ -61,7 +61,7 @@ const isDisabledReauthorize = (status) => {
 
   .text {
     color: var(--BG-700, #737478);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/style.scss b/src/views/property-marketing/put-account/account-manage/style.scss
index 69a66d6..824b821 100644
--- a/src/views/property-marketing/put-account/account-manage/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/style.scss
@@ -15,7 +15,7 @@
   .filter-wrap {
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
       :deep(.arco-btn) {
@@ -29,7 +29,7 @@
     border-radius: 2px;
     background: #f0edff;
     .label {
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -54,7 +54,7 @@
       padding: 0;
       cursor: pointer;
       color: var(--Brand-Brand-6, #6d4cfe);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
index 4d99ad0..b8dcd00 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
@@ -132,7 +132,7 @@ onMounted(() => {
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/style.scss b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/style.scss
index 927f071..7119031 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/style.scss
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/style.scss
@@ -35,7 +35,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/put-account/investment-guidelines/style.scss b/src/views/property-marketing/put-account/investment-guidelines/style.scss
index 96d7075..5d26e95 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/style.scss
+++ b/src/views/property-marketing/put-account/investment-guidelines/style.scss
@@ -49,7 +49,7 @@
 
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
 
@@ -108,7 +108,7 @@
       .arco-pagination-jumper-prepend {
         color: var(--Text-2, #3c4043);
         text-align: right;
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/repository/test/index.vue b/src/views/property-marketing/repository/test/index.vue
index a1edfd8..f8a154f 100644
--- a/src/views/property-marketing/repository/test/index.vue
+++ b/src/views/property-marketing/repository/test/index.vue
@@ -6,6 +6,6 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/vite.config.ts b/vite.config.ts
index 70c8cae..0158ad7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,7 +20,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
     css: {
       preprocessorOptions: {
         scss: {
-          // additionalData: `@import "@/styles/vars.css";`,
+          additionalData: `@import "@/styles/lib/variable.scss";`,
         },
       },
     },