perf: 优化template-admin-ts自带样式导入逻辑

2025-07-11 16:50:48 +08:00
parent 2fc1f64f5e
commit ba6ae87a1d
93 changed files with 230 additions and 242 deletions
--- 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' }],
    ],
  });
--- a/src/App.vue
+++ b/src/App.vue
@ -41,3 +41,7 @@ onMounted(() => {
  });
 });
 </script>
+
+<style lang="scss">
+@import './styles/index.scss';
+</style>
--- 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) {
--- 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;
--- 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;
--- 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;
--- 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);
--- 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;
--- 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>
--- 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;
--- 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;
--- 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;
--- 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));
--- 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;
--- 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;
--- 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%;
 }
--- 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>
--- 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;
--- 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%;
--- 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%;
--- 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);
--- 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; 
+      background-color: #6d4cfe !important;
    }
  }
-
 }
--- 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;
--- 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;
--- 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;
--- 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 {
--- a/src/styles/index.scss
+++ 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';
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@ -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';
--- a/src/styles/lib/reset.scss
+++ 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;
+}
--- a/src/styles/lib/variable.scss
+++ 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;
--- a/src/styles/vars.scss
+++ 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,
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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%;
--- 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;
--- 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>
--- 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>
--- 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>
--- 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%;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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>
--- 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>
--- 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>
--- 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) {
--- 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%;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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) {
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
      }
      
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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>
--- 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";`,
        },
      },
    },