liangzejun/palc-newyear2024
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

压缩字体

Browse Source
This commit is contained in:
Andy Leong
2024-01-22 23:17:44 +08:00
parent e16a382159
commit adfb320fa2
67 changed files with 355 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Index.vue
View File

@@ -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;
}
}
}

28
src/components/Question.vue
View File

@@ -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;

152
src/components/Result.vue
View File

@@ -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) => {