压缩字体

src/components/Index.vue

@@ -175,15 +175,18 @@ onMounted(() => {
     }
 
     .index-agreement {
+      font-family: "SourceHanSansCN";
       pointer-events: none;
-      @include pos(736px, 172px, 7px, 1219px);
+      @include pos(736px, 182px, 7px, 1219px);
       background: rgba($color: #f49e6a, $alpha: 0.55);
       font-size: 14px;
       text-align: justify;
+      letter-spacing: 0.1px;
       color: #000000;
       padding: 10px;
       box-sizing: border-box;
       border-radius: 10px;
+      line-height: 20px;
 
       .b {
         font-weight: 700;
@@ -191,6 +194,7 @@ onMounted(() => {
 
       .orange {
         color: #ea5404;
+        font-weight: 700;
       }
     }
   }

src/components/Question.vue

@@ -299,6 +299,7 @@ onMounted(() => {
       @include flexCen();
 
       .question {
+        font-family: "alimama";
         position: relative;
         @include box(713px, 428px);
         @include bg_pos("qa/question.png");
@@ -322,8 +323,9 @@ onMounted(() => {
           justify-content: center;
           align-items: center;
           font-size: 40px;
-          font-weight: 700;
+          // font-weight: 700;
           // line-height: 50px;
+          font-family: "alimama";
 
           .text {
             width: 90%;
@@ -367,33 +369,11 @@ onMounted(() => {
             @include box(367px, 357px);
             padding: 10px;
             border-radius: 50%;
-
+            font-family: "SourceHanSansCNMedium";
             font-size: 35px;
             font-weight: 700;
             border-radius: 50%;
-            // .content-before {
-            //   pointer-events: none;
-            //   float: left;
-            //   width: 50%;
-            //   height: 100%;
-            //   shape-outside: radial-gradient(
-            //     farthest-side ellipse at right,
-            //     transparent 98%,
-            //     red
-            //   );
-            // }
-            // .content-after {
-            //   pointer-events: none;
 
-            //   float: right;
-            //   width: 50%;
-            //   height: 100%;
-            //   shape-outside: radial-gradient(
-            //     farthest-side ellipse at left,
-            //     transparent 98%,
-            //     red
-            //   );
-            // }
             .text {
               @include box(367px, 357px);
               padding: 0px 20px;

src/components/Result.vue

@@ -107,90 +107,86 @@ onMounted(() => {
 
 const createPoster = (event) => {
   let e = event.target;
-  debounceTap(
-    e,
-    () => {
-      // 海报生成
-      posterCreate(
-        { width: 750, height: 1500 }, //海报尺寸
-        // 海报素材，按顺序依次渲染
-        [
-          // 背景
-          {
-            name: "bg",
-            src: posterBg[bgId.value - 1],
-            pos: { w: 750, h: 1500, x: 0, y: 0 },
+  debounceTap(e, () => {
+    // 海报生成
+    posterCreate(
+      { width: 750, height: 1500 }, //海报尺寸
+      // 海报素材，按顺序依次渲染
+      [
+        // 背景
+        {
+          name: "bg",
+          src: posterBg[bgId.value - 1],
+          pos: { w: 750, h: 1500, x: 0, y: 0 },
+        },
+        // 产品
+        {
+          name: "product",
+          src: mbtiObj.value.productPic,
+          pos: { w: 469, h: 102, x: 137, y: 911 },
+        },
+        //   二维码
+        {
+          name: "eqcode",
+          src: eqcodePic.value,
+          pos: { w: 140, h: 140, x: 66, y: 1070 },
+        },
+      ],
+      // 字体素材
+      [
+        // mbti title及职业
+        {
+          content: mbtiObj.value.type + " " + mbtiObj.value.job,
+          style: {
+            font: "normal 80px HYYakuHei",
+            pos: { x: 70, y: 340 },
           },
-          // 产品
-          {
-            name: "product",
-            src: mbtiObj.value.productPic,
-            pos: { w: 469, h: 102, x: 137, y: 911 },
+        },
+        // mbti 描述
+        {
+          content: mbtiObj.value.des[0],
+          style: {
+            font: "normal 30px fzzy",
+            color: "#af6f49",
+            pos: { x: 70, y: 470 },
           },
-          //   二维码
-          {
-            name: "eqcode",
-            src: eqcodePic.value,
-            pos: { w: 140, h: 140, x: 66, y: 1070 },
+        },
+        {
+          content: mbtiObj.value.des[1],
+          style: {
+            font: "normal 30px fzzy",
+            color: "#af6f49",
+            pos: { x: 70, y: 520 },
           },
-        ],
-        // 字体素材
-        [
-          // mbti title及职业
-          {
-            content: mbtiObj.value.type + " " + mbtiObj.value.job,
-            style: {
-              font: "normal 80px HYYakuHei",
-              pos: { x: 70, y: 330 },
-            },
+        },
+        // 新年寄语
+        {
+          content: mbtiObj.value.blessings[0],
+          style: {
+            font: "normal 50px fzcy",
+            pos: { x: 70, y: 650 },
           },
-          // mbti 描述
-          {
-            content: mbtiObj.value.des[0],
-            style: {
-              font: "normal 30px fzzy",
-              color: "#af6f49",
-              pos: { x: 70, y: 470 },
-            },
+        },
+        {
+          content: mbtiObj.value.blessings[1],
+          style: {
+            font: "normal 50px fzcy",
+            pos: { x: 70, y: 725 },
           },
-          {
-            content: mbtiObj.value.des[1],
-            style: {
-              font: "normal 30px fzzy",
-              color: "#af6f49",
-              pos: { x: 70, y: 520 },
-            },
+        },
+        // 产品
+        {
+          content: mbtiObj.value.product,
+          style: {
+            font: "normal 50px fzcy",
+            pos: { x: 70, y: 876 },
           },
-          // 新年寄语
-          {
-            content: mbtiObj.value.blessings[0],
-            style: {
-              font: "normal 50px fzcy",
-              pos: { x: 70, y: 650 },
-            },
-          },
-          {
-            content: mbtiObj.value.blessings[1],
-            style: {
-              font: "normal 50px fzcy",
-              pos: { x: 70, y: 725 },
-            },
-          },
-          // 产品
-          {
-            content: mbtiObj.value.product,
-            style: {
-              font: "normal 50px fzcy",
-              pos: { x: 70, y: 876 },
-            },
-          },
-        ],
-        // 主题配色
-        theme[bgId.value - 1]
-      );
-    },
-    0.4
-  );
+        },
+      ],
+      // 主题配色
+      theme[bgId.value - 1]
+    );
+  });
 };
 
 const goDraw = (event) => {

src/data/index.js

@@ -130,7 +130,7 @@ export const data = [
             },
             {
                 aid: 'B',
-                text: 'B.保持灵活性，根据市场的最新变化调整你的投资策略',
+                text: '保持灵活性，根据市场的最新变化调整你的投资策略',
                 secore: 'P',
             },
         ],

src/page/Home/App.vue

@@ -77,7 +77,7 @@ const drawFn = (item) => {
   }
 };
 
-const showResult = ref(false);
+const showResult = ref(true);
 const resultFn = (item) => {
   if (item.action == "hide") {
     showResult.value = false;
@@ -112,7 +112,7 @@ onMounted(() => {
           showLoad.value = true;
           return;
         } else {
-          authorize({ scopeType: 1,redirectUri:url }).then((res) => {
+          authorize({ scopeType: 1, redirectUri: url }).then((res) => {
             if (res.code == 0) {
               console.log("重定向地址：", res.data);
               location.replace(res.data);
@@ -149,7 +149,7 @@ onMounted(() => {
         }
       });
     } else {
-      authorize({ scopeType: 1,redirectUri:url }).then((res) => {
+      authorize({ scopeType: 1, redirectUri: url }).then((res) => {
         if (res.code == 0) {
           console.log("重定向地址：", res.data);
           location.replace(res.data);

src/styles/global.scss

@@ -64,6 +64,17 @@ body {
   src: url(@/assets/font/fzzy.ttf) format("truetype");
 }
 
+@font-face {
+  font-family: "SourceHanSansCN";
+  src: url(@/assets/font/SourceHanSansCN-Regular.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: "SourceHanSansCNMedium";
+  src: url(@/assets/font/SourceHanSansCNMedium.ttf) format("truetype");
+}
+SourceHanSansCN Medium
+
 * {
   padding: 0;
   margin: 0;