diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts
index 2e0de37..908d56c 100644
--- a/src/lang/package/en.ts
+++ b/src/lang/package/en.ts
@@ -86,6 +86,7 @@ export default {
uploadImgTip2:'please upload a clear frontal photo',
entered:'entered',
subtitles:"subtitles",
+ fontFamily:'Font Faily',
XAxis:"X-axis",
YAxis:"Y-axis",
fontSize:"Font Size",
diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts
index 79872f4..f5e6178 100644
--- a/src/lang/package/zh-cn.ts
+++ b/src/lang/package/zh-cn.ts
@@ -84,6 +84,7 @@ export default {
uploadImgTip2:'请确保上传图片为无遮挡的正脸图片',
entered:'已输入',
subtitles:"字幕",
+ fontFamily:'字体',
XAxis:"X轴",
YAxis:"Y轴",
fontSize:"字体大小",
diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue
index 1b01954..af0bfe2 100644
--- a/src/views/createVideo/index.vue
+++ b/src/views/createVideo/index.vue
@@ -21,13 +21,22 @@
+
+
{{$t('createVideo.fontFamily')}}:
+
+
{{$t('createVideo.YAxis')}}:
-
{{$t('createVideo.XAxis')}}: {{$t('createVideo.XAxis')}}:
@@ -37,7 +46,7 @@
width="30"
/>
- {{$t('createVideo.width')}}: {{$t('createVideo.width')}}:
@@ -1989,7 +1998,7 @@ const canvasImgBox = ref(null); // 图片外盒子dom
const SubtitlesBox = ref(null); // 字幕盒子dom
const SubtitlesSwitch = ref(false); // 字幕开关
const SubtitlesWidth = ref(250); // 字幕宽度
- const SubtitlesFontStyle = ref("微软雅黑"); //字幕字体系列
+ const SubtitlesFontFamily = ref(""); //字幕字体系列
const SubtitlesTop = ref(400); // 字幕Y轴
const SubtitlesLeft = ref(100); // 字幕X轴
const SubtitlesSize = ref(18); // 字幕字号
@@ -2016,6 +2025,13 @@ const canvasImgBox = ref(null); // 图片外盒子dom
'rgba(0, 255, 128, 1)', // 中绿色
'rgba(128, 255, 0, 1)' // 中黄色
];
+const fontFamilyList = [
+ {label:"黑体",value:"SimHei"},
+{label:"新细明体",value:"PMingLiU"}, {label:"楷体",value:"KaiTi"}, { label: 'Montserrat', value: 'Montserrat' },
+ { label: 'Open Sans', value: 'Open Sans' },
+ { label: 'Roboto', value: 'Roboto' },
+ { label: 'Lato', value: 'Lato' }
+];
const SubtitlesColorShow = ref(false); // 字色调色板开关
const SubtitlesBgcShow = ref(false); // 背景调色板开关
const handleSubtitlesColorShow = (e) => {
@@ -2080,7 +2096,7 @@ watch(
top: SubtitlesTop.value + 'px',
left: SubtitlesLeft.value + 'px',
fontSize: SubtitlesSize.value + 'px',
- fontStyle: SubtitlesFontStyle.value,
+ fontFamily: SubtitlesFontFamily.value,
color: SubtitlesColor.value,
backgroundColor: SubtitlesBgc.value,
};
@@ -2303,9 +2319,9 @@ onUnmounted(() => {
align-items: center;
margin-left: 10px;
img {
-
cursor: pointer;
}
+ // 调色盘
.myColorBox {
position: relative;
width: 25px;
@@ -2340,6 +2356,8 @@ onUnmounted(() => {
width: 25px;
height: 25px;
margin: 5px 5px;
+ border: #000 solid 2px;
+ border-radius: 5px;
cursor: pointer;
}
}
@@ -2348,6 +2366,9 @@ onUnmounted(() => {
width: 60px;
height: 25px;
}
+ .el-input__wrapper {
+ height: 25px;
+ }
}
:deep(.el-input__wrapper) {
border: none;