feat(预置信息界面优化):
This commit is contained in:
parent
ed64e47598
commit
2d8812212c
|
|
@ -35,7 +35,7 @@ export default {
|
|||
};
|
||||
},
|
||||
props: {
|
||||
fontStyle: {
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
},
|
||||
|
|
@ -73,7 +73,15 @@ export default {
|
|||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: '这里是示例内容，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
|
||||
default: '这里是示例内容',
|
||||
},
|
||||
horizontalCenter: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
verticalCenter: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -85,20 +93,19 @@ export default {
|
|||
background: '#000000',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
alignItems: this.verticalCenter ? 'center' : 'flex-start',
|
||||
justifyContent: this.horizontalCenter ? 'center' : 'flex-start',
|
||||
};
|
||||
},
|
||||
textStyle() {
|
||||
return {
|
||||
position: 'absolute',
|
||||
top: `${-this.fontY * this.scale}px`,
|
||||
left: `${this.fontX * this.scale}px`,
|
||||
fontStyle: this.fontStyle,
|
||||
fontFamily: this.fontFamily,
|
||||
whiteSpace: 'preserve-breaks',
|
||||
color: this.fontColor,
|
||||
fontSize: `${this.fontSize * this.scale}px`,
|
||||
letterSpacing: `${this.letterSpacing * this.scale}px`,
|
||||
lineHeight: `${this.lineHeight}`,
|
||||
transform: `translate(${this.horizontalCenter ? this.fontX * this.scale : this.fontX}px, ${this.verticalCenter ? this.fontY * this.scale : this.fontY}px)`,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -97,8 +97,10 @@
|
|||
/>
|
||||
|
||||
<!-- 添加或修改预置信息及模版对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
|
||||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="auto">
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="内容模版名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入预置信息名称"/>
|
||||
</el-form-item>
|
||||
|
|
@ -122,17 +124,36 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="预置内容" prop="content">
|
||||
<el-input v-model="form.content" placeholder="请输入预置内容"/>
|
||||
<el-input type="textarea" v-model="form.content" placeholder="请输入预置内容"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="字体样式" prop="fontStyle">
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="字体大小" prop="fontSize">
|
||||
<el-input-number :controls="false" :min="20" :max="50" v-model="form.fontSize" placeholder="请输入字体大小" size="small" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字体间距" prop="letterSpacing">
|
||||
<el-input-number :controls="false" :min="0" v-model="form.letterSpacing" placeholder="请输入字体间距" size="small" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字体坐标X" prop="fontPositionX">
|
||||
<el-input-number :controls="false" v-model="form.fontPositionX" placeholder="请输入字体坐标X" size="small"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="字体坐标Y" prop="fontPositionY">
|
||||
<el-input-number :controls="false" v-model="form.fontPositionY" placeholder="请输入字体坐标Y" size="small"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="播放时间" prop="playTime">
|
||||
<el-input-number :controls="false" :min="0" v-model="form.playTime" placeholder="请输入播放时间" size="small"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="字体样式" prop="fontFamily">
|
||||
<el-select
|
||||
v-model="form.fontStyle"
|
||||
v-model="form.fontFamily"
|
||||
placeholder="请选择字体样式">
|
||||
<el-option
|
||||
v-for="dict in dict.type.font_style"
|
||||
v-for="dict in dict.type.font_family"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
|
|
@ -151,31 +172,39 @@
|
|||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="字体大小" prop="fontSize">
|
||||
<el-input-number :min="20" :max="50" v-model="form.fontSize" placeholder="请输入字体大小" />
|
||||
<el-form-item label="水平居中" prop="horizontalCenter">
|
||||
<el-switch
|
||||
v-model="form.horizontalCenter"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="字体间距" prop="letterSpacing">
|
||||
<el-input-number :min="0" v-model="form.letterSpacing" placeholder="请输入字体间距" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字体坐标X" prop="fontPositionX">
|
||||
<el-input-number v-model="form.fontPositionX" placeholder="请输入字体坐标X" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字体坐标Y" prop="fontPositionY">
|
||||
<el-input-number v-model="form.fontPositionY" placeholder="请输入字体坐标Y" />
|
||||
</el-form-item>
|
||||
<el-form-item label="播放时间" prop="playTime">
|
||||
<el-input-number :min="0" v-model="form.playTime" placeholder="请输入播放时间" />
|
||||
<el-form-item label="垂直居中" prop="verticalCenter">
|
||||
<el-switch
|
||||
v-model="form.verticalCenter"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<text-preview
|
||||
fontStyle="SongTi"
|
||||
:fontFamily="form.fontFamily"
|
||||
:fontSize="form.fontSize"
|
||||
:fontColor="form.fontColor"
|
||||
:letterSpacing="form.letterSpacing"
|
||||
:fontX="form.fontPositionX"
|
||||
:fontY="form.fontPositionY"
|
||||
:backgroundWidth="bgSize.width"
|
||||
:backgroundHeight="bgSize.height"
|
||||
:lineHeight="1"
|
||||
:horizontalCenter="form.horizontalCenter"
|
||||
:verticalCenter="form.verticalCenter"
|
||||
:content="form.content"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
|
|
@ -195,7 +224,7 @@ import {listBoardType} from "@/api/board/boardtype";
|
|||
export default {
|
||||
name: "Content",
|
||||
components: {TextPreview},
|
||||
dicts: ['board_size','font_color','font_style', 'alert_type'],
|
||||
dicts: ['board_size', 'font_color', 'font_family', 'alert_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
|
|
@ -334,7 +363,7 @@ export default {
|
|||
infoType: null,
|
||||
content: null,
|
||||
previewPath: null,
|
||||
fontStyle: null,
|
||||
fontFamily: null,
|
||||
fontSize: null,
|
||||
letterSpacing: null,
|
||||
fontColor: null,
|
||||
|
|
@ -346,7 +375,9 @@ export default {
|
|||
createTime: null,
|
||||
updateTime: null,
|
||||
createBy: null,
|
||||
updateBy: null
|
||||
updateBy: null,
|
||||
horizontalCenter: true,
|
||||
verticalCenter: true,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue