mirror of
https://github.com/xfgryujk/blivechat.git
synced 2025-04-03 16:10:35 +08:00
优化样式生成器界面
This commit is contained in:
John Smith
parent
3976aa79ed
commit
1244210bfe
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "blivechat",
|
"name": "blivechat",
|
||||||
"version": "1.9.3",
|
"version": "1.10.0-dev",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"serve": "vue-cli-service serve",
|
||||||
|
|||||||
@ -79,8 +79,8 @@ export default {
|
|||||||
legacy: '经典',
|
legacy: '经典',
|
||||||
lineLike: '仿微信',
|
lineLike: '仿微信',
|
||||||
|
|
||||||
light: '明亮',
|
light: '亮色',
|
||||||
dark: '黑暗',
|
dark: '暗色',
|
||||||
|
|
||||||
outlines: '描边',
|
outlines: '描边',
|
||||||
showOutlines: '显示描边',
|
showOutlines: '显示描边',
|
||||||
@ -150,7 +150,7 @@ export default {
|
|||||||
fadeOutTime: '淡出时间（毫秒）',
|
fadeOutTime: '淡出时间（毫秒）',
|
||||||
slide: '滑动',
|
slide: '滑动',
|
||||||
reverseSlide: '反向滑动',
|
reverseSlide: '反向滑动',
|
||||||
playAnimation: '播放动画',
|
playAnimation: '生成消息',
|
||||||
|
|
||||||
result: '结果',
|
result: '结果',
|
||||||
copy: '复制',
|
copy: '复制',
|
||||||
|
|||||||
@ -1,360 +1,378 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<el-card shadow="never">
|
||||||
<el-form label-width="150px" size="mini">
|
<el-form label-width="150px" size="mini">
|
||||||
<h3>{{ $t('stylegen.outlines') }}</h3>
|
<el-collapse>
|
||||||
<el-card shadow="never">
|
<el-collapse-item>
|
||||||
<el-row :gutter="20">
|
<template slot="title">
|
||||||
<el-col :xs="24" :sm="12">
|
<h3>{{ $t('stylegen.outlines') }}</h3>
|
||||||
<el-form-item :label="$t('stylegen.showOutlines')">
|
</template>
|
||||||
<el-switch v-model="form.showOutlines"></el-switch>
|
<el-row :gutter="20">
|
||||||
</el-form-item>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-col>
|
<el-form-item :label="$t('stylegen.showOutlines')">
|
||||||
<el-col :xs="24" :sm="12">
|
<el-switch v-model="form.showOutlines"></el-switch>
|
||||||
<el-form-item :label="$t('stylegen.outlineColor')">
|
</el-form-item>
|
||||||
<el-color-picker v-model="form.outlineColor"></el-color-picker>
|
</el-col>
|
||||||
</el-form-item>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-col>
|
<el-form-item :label="$t('stylegen.outlineColor')">
|
||||||
</el-row>
|
<el-color-picker v-model="form.outlineColor"></el-color-picker>
|
||||||
<el-form-item :label="$t('stylegen.outlineSize')">
|
</el-form-item>
|
||||||
<el-input v-model.number="form.outlineSize" type="number" min="0"></el-input>
|
</el-col>
|
||||||
</el-form-item>
|
</el-row>
|
||||||
</el-card>
|
<el-form-item :label="$t('stylegen.outlineSize')">
|
||||||
|
<el-input v-model.number="form.outlineSize" type="number" min="0"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-collapse-item>
|
||||||
|
|
||||||
<h3>{{ $t('stylegen.avatars') }}</h3>
|
<el-collapse-item>
|
||||||
<el-card shadow="never">
|
<template slot="title">
|
||||||
<el-row :gutter="20">
|
<h3>{{ $t('stylegen.avatars') }}</h3>
|
||||||
<el-col :xs="24" :sm="12">
|
</template>
|
||||||
<el-form-item :label="$t('stylegen.showAvatars')">
|
<el-row :gutter="20">
|
||||||
<el-switch v-model="form.showAvatars"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.showAvatars')">
|
||||||
</el-col>
|
<el-switch v-model="form.showAvatars"></el-switch>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.avatarSize')">
|
</el-col>
|
||||||
<el-input v-model.number="form.avatarSize" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.avatarSize')">
|
||||||
</el-col>
|
<el-input v-model.number="form.avatarSize" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
</el-card>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-collapse-item>
|
||||||
|
|
||||||
<h3>{{ $t('stylegen.userNames') }}</h3>
|
<el-collapse-item>
|
||||||
<el-card shadow="never">
|
<template slot="title">
|
||||||
<el-row :gutter="20">
|
<h3>{{ $t('stylegen.userNames') }}</h3>
|
||||||
<el-col :xs="24" :sm="12">
|
</template>
|
||||||
<el-form-item :label="$t('stylegen.showUserNames')">
|
<el-row :gutter="20">
|
||||||
<el-switch v-model="form.showUserNames"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.showUserNames')">
|
||||||
</el-col>
|
<el-switch v-model="form.showUserNames"></el-switch>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.font')">
|
</el-col>
|
||||||
<font-select v-model="form.userNameFont"></font-select>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.font')">
|
||||||
</el-col>
|
<font-select v-model="form.userNameFont"></font-select>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.fontSize')">
|
<el-row :gutter="20">
|
||||||
<el-input v-model.number="form.userNameFontSize" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.fontSize')">
|
||||||
</el-col>
|
<el-input v-model.number="form.userNameFontSize" type="number" min="0"></el-input>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.lineHeight')">
|
</el-col>
|
||||||
<el-input v-model.number="form.userNameLineHeight" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.lineHeight')">
|
||||||
</el-col>
|
<el-input v-model.number="form.userNameLineHeight" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.normalColor')">
|
<el-row :gutter="20">
|
||||||
<el-color-picker v-model="form.userNameColor"></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.normalColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.userNameColor"></el-color-picker>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.memberColor')">
|
</el-col>
|
||||||
<el-color-picker v-model="form.memberUserNameColor"></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.memberColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.memberUserNameColor"></el-color-picker>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.moderatorColor')">
|
<el-row :gutter="20">
|
||||||
<el-color-picker v-model="form.moderatorUserNameColor"></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.moderatorColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.moderatorUserNameColor"></el-color-picker>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.ownerColor')">
|
</el-col>
|
||||||
<el-color-picker v-model="form.ownerUserNameColor"></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.ownerColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.ownerUserNameColor"></el-color-picker>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.showBadges')">
|
<el-row :gutter="20">
|
||||||
<el-switch v-model="form.showBadges"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.showBadges')">
|
||||||
</el-col>
|
<el-switch v-model="form.showBadges"></el-switch>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.showColon')">
|
</el-col>
|
||||||
<el-switch v-model="form.showColon"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.showColon')">
|
||||||
</el-col>
|
<el-switch v-model="form.showColon"></el-switch>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
</el-card>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-collapse-item>
|
||||||
|
|
||||||
<h3>{{ $t('stylegen.messages') }}</h3>
|
<el-collapse-item>
|
||||||
<el-card shadow="never">
|
<template slot="title">
|
||||||
<el-row :gutter="20">
|
<h3>{{ $t('stylegen.messages') }}</h3>
|
||||||
<el-col :xs="24" :sm="12">
|
</template>
|
||||||
<el-form-item :label="$t('stylegen.font')">
|
<el-row :gutter="20">
|
||||||
<font-select v-model="form.messageFont"></font-select>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.font')">
|
||||||
</el-col>
|
<font-select v-model="form.messageFont"></font-select>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.color')">
|
</el-col>
|
||||||
<el-color-picker v-model="form.messageColor"></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.color')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.messageColor"></el-color-picker>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.fontSize')">
|
<el-row :gutter="20">
|
||||||
<el-input v-model.number="form.messageFontSize" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.fontSize')">
|
||||||
</el-col>
|
<el-input v-model.number="form.messageFontSize" type="number" min="0"></el-input>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.lineHeight')">
|
</el-col>
|
||||||
<el-input v-model.number="form.messageLineHeight" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.lineHeight')">
|
||||||
</el-col>
|
<el-input v-model.number="form.messageLineHeight" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.onNewLine')">
|
</el-col>
|
||||||
<el-switch v-model="form.messageOnNewLine"></el-switch>
|
</el-row>
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.onNewLine')">
|
||||||
<el-row :gutter="20">
|
<el-switch v-model="form.messageOnNewLine"></el-switch>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.emoticonSize')">
|
<el-row :gutter="20">
|
||||||
<el-input v-model.number="form.emoticonSize" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.emoticonSize')">
|
||||||
</el-col>
|
<el-input v-model.number="form.emoticonSize" type="number" min="0"></el-input>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.largeEmoticonSize')">
|
</el-col>
|
||||||
<el-input v-model.number="form.largeEmoticonSize" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.largeEmoticonSize')">
|
||||||
</el-col>
|
<el-input v-model.number="form.largeEmoticonSize" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
</el-card>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-collapse-item>
|
||||||
|
|
||||||
<h3>{{ $t('stylegen.time') }}</h3>
|
<el-collapse-item>
|
||||||
<el-card shadow="never">
|
<template slot="title">
|
||||||
<el-form-item :label="$t('stylegen.showTime')">
|
<h3>{{ $t('stylegen.time') }}</h3>
|
||||||
<el-switch v-model="form.showTime"></el-switch>
|
</template>
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.showTime')">
|
||||||
<el-row :gutter="20">
|
<el-switch v-model="form.showTime"></el-switch>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.font')">
|
<el-row :gutter="20">
|
||||||
<font-select v-model="form.timeFont"></font-select>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.font')">
|
||||||
</el-col>
|
<font-select v-model="form.timeFont"></font-select>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.color')">
|
</el-col>
|
||||||
<el-color-picker v-model="form.timeColor"></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.color')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.timeColor"></el-color-picker>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.fontSize')">
|
<el-row :gutter="20">
|
||||||
<el-input v-model.number="form.timeFontSize" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.fontSize')">
|
||||||
</el-col>
|
<el-input v-model.number="form.timeFontSize" type="number" min="0"></el-input>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.lineHeight')">
|
</el-col>
|
||||||
<el-input v-model.number="form.timeLineHeight" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.lineHeight')">
|
||||||
</el-col>
|
<el-input v-model.number="form.timeLineHeight" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
</el-card>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-collapse-item>
|
||||||
|
|
||||||
<h3>{{ $t('stylegen.backgrounds') }}</h3>
|
<el-collapse-item>
|
||||||
<el-card shadow="never">
|
<template slot="title">
|
||||||
<el-row :gutter="20">
|
<h3>{{ $t('stylegen.backgrounds') }}</h3>
|
||||||
<el-col :xs="24" :sm="12">
|
</template>
|
||||||
<el-form-item :label="$t('stylegen.bgColor')">
|
<el-row :gutter="20">
|
||||||
<el-color-picker v-model="form.bgColor" show-alpha></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.bgColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.bgColor" show-alpha></el-color-picker>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.useBarsInsteadOfBg')">
|
</el-col>
|
||||||
<el-switch v-model="form.useBarsInsteadOfBg"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.useBarsInsteadOfBg')">
|
||||||
</el-col>
|
<el-switch v-model="form.useBarsInsteadOfBg"></el-switch>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.messageBgColor')">
|
<el-row :gutter="20">
|
||||||
<el-color-picker v-model="form.messageBgColor" show-alpha></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.messageBgColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.messageBgColor" show-alpha></el-color-picker>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.memberMessageBgColor')">
|
</el-col>
|
||||||
<el-color-picker v-model="form.memberMessageBgColor" show-alpha></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.memberMessageBgColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.memberMessageBgColor" show-alpha></el-color-picker>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.moderatorMessageBgColor')">
|
<el-row :gutter="20">
|
||||||
<el-color-picker v-model="form.moderatorMessageBgColor" show-alpha></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.moderatorMessageBgColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.moderatorMessageBgColor" show-alpha></el-color-picker>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.ownerMessageBgColor')">
|
</el-col>
|
||||||
<el-color-picker v-model="form.ownerMessageBgColor" show-alpha></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.ownerMessageBgColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.ownerMessageBgColor" show-alpha></el-color-picker>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
</el-card>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-collapse-item>
|
||||||
|
|
||||||
<h3>{{ $t('stylegen.scAndNewMember') }}</h3>
|
<el-collapse-item>
|
||||||
<el-card shadow="never">
|
<template slot="title">
|
||||||
<el-row :gutter="20">
|
<h3>{{ $t('stylegen.scAndNewMember') }}</h3>
|
||||||
<el-col :xs="24" :sm="12">
|
</template>
|
||||||
<el-form-item :label="$t('stylegen.firstLineFont')">
|
<el-row :gutter="20">
|
||||||
<font-select v-model="form.firstLineFont"></font-select>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.firstLineFont')">
|
||||||
</el-col>
|
<font-select v-model="form.firstLineFont"></font-select>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.firstLineColor')">
|
</el-col>
|
||||||
<el-color-picker v-model="form.firstLineColor"></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.firstLineColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.firstLineColor"></el-color-picker>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.firstLineFontSize')">
|
<el-row :gutter="20">
|
||||||
<el-input v-model.number="form.firstLineFontSize" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.firstLineFontSize')">
|
||||||
</el-col>
|
<el-input v-model.number="form.firstLineFontSize" type="number" min="0"></el-input>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.firstLineLineHeight')">
|
</el-col>
|
||||||
<el-input v-model.number="form.firstLineLineHeight" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.firstLineLineHeight')">
|
||||||
</el-col>
|
<el-input v-model.number="form.firstLineLineHeight" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-divider></el-divider>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.secondLineFont')">
|
<el-form-item :label="$t('stylegen.secondLineFont')">
|
||||||
<font-select v-model="form.secondLineFont"></font-select>
|
<font-select v-model="form.secondLineFont"></font-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.secondLineColor')">
|
<el-form-item :label="$t('stylegen.secondLineColor')">
|
||||||
<el-color-picker v-model="form.secondLineColor"></el-color-picker>
|
<el-color-picker v-model="form.secondLineColor"></el-color-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.secondLineFontSize')">
|
<el-form-item :label="$t('stylegen.secondLineFontSize')">
|
||||||
<el-input v-model.number="form.secondLineFontSize" type="number" min="0"></el-input>
|
<el-input v-model.number="form.secondLineFontSize" type="number" min="0"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.secondLineLineHeight')">
|
<el-form-item :label="$t('stylegen.secondLineLineHeight')">
|
||||||
<el-input v-model.number="form.secondLineLineHeight" type="number" min="0"></el-input>
|
<el-input v-model.number="form.secondLineLineHeight" type="number" min="0"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-divider></el-divider>
|
<el-divider></el-divider>
|
||||||
|
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.scContentLineFont')">
|
<el-form-item :label="$t('stylegen.scContentLineFont')">
|
||||||
<font-select v-model="form.scContentFont"></font-select>
|
<font-select v-model="form.scContentFont"></font-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.scContentLineColor')">
|
<el-form-item :label="$t('stylegen.scContentLineColor')">
|
||||||
<el-color-picker v-model="form.scContentColor"></el-color-picker>
|
<el-color-picker v-model="form.scContentColor"></el-color-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.scContentLineFontSize')">
|
<el-form-item :label="$t('stylegen.scContentLineFontSize')">
|
||||||
<el-input v-model.number="form.scContentFontSize" type="number" min="0"></el-input>
|
<el-input v-model.number="form.scContentFontSize" type="number" min="0"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.scContentLineLineHeight')">
|
<el-form-item :label="$t('stylegen.scContentLineLineHeight')">
|
||||||
<el-input v-model.number="form.scContentLineHeight" type="number" min="0"></el-input>
|
<el-input v-model.number="form.scContentLineHeight" type="number" min="0"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-divider></el-divider>
|
<el-divider></el-divider>
|
||||||
|
|
||||||
<el-form-item :label="$t('stylegen.showNewMemberBg')">
|
<el-form-item :label="$t('stylegen.showNewMemberBg')">
|
||||||
<el-switch v-model="form.showNewMemberBg"></el-switch>
|
<el-switch v-model="form.showNewMemberBg"></el-switch>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.showScTicker')">
|
<el-form-item :label="$t('stylegen.showScTicker')">
|
||||||
<el-switch v-model="form.showScTicker"></el-switch>
|
<el-switch v-model="form.showScTicker"></el-switch>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.showOtherThings')">
|
<el-form-item :label="$t('stylegen.showOtherThings')">
|
||||||
<el-switch v-model="form.showOtherThings"></el-switch>
|
<el-switch v-model="form.showOtherThings"></el-switch>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-card>
|
</el-collapse-item>
|
||||||
|
|
||||||
<h3>{{ $t('stylegen.animation') }}</h3>
|
<el-collapse-item>
|
||||||
<el-card shadow="never">
|
<template slot="title">
|
||||||
<el-row :gutter="20">
|
<h3>{{ $t('stylegen.animation') }}</h3>
|
||||||
<el-col :xs="24" :sm="12">
|
</template>
|
||||||
<el-form-item :label="$t('stylegen.animateIn')">
|
<el-row :gutter="20">
|
||||||
<el-switch v-model="form.animateIn"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.animateIn')">
|
||||||
</el-col>
|
<el-switch v-model="form.animateIn"></el-switch>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.fadeInTime')">
|
</el-col>
|
||||||
<el-input v-model.number="form.fadeInTime" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.fadeInTime')">
|
||||||
</el-col>
|
<el-input v-model.number="form.fadeInTime" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.animateOut')">
|
<el-row :gutter="20">
|
||||||
<el-switch v-model="form.animateOut"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.animateOut')">
|
||||||
</el-col>
|
<el-switch v-model="form.animateOut"></el-switch>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.fadeOutTime')">
|
</el-col>
|
||||||
<el-input v-model.number="form.fadeOutTime" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.fadeOutTime')">
|
||||||
</el-col>
|
<el-input v-model.number="form.fadeOutTime" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.animateOutWaitTime')">
|
</el-col>
|
||||||
<el-input v-model.number="form.animateOutWaitTime" type="number" min="0"></el-input>
|
</el-row>
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.animateOutWaitTime')">
|
||||||
<el-row :gutter="20">
|
<el-input v-model.number="form.animateOutWaitTime" type="number" min="0"></el-input>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.slide')">
|
<el-row :gutter="20">
|
||||||
<el-switch v-model="form.slide"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.slide')">
|
||||||
</el-col>
|
<el-switch v-model="form.slide"></el-switch>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.reverseSlide')">
|
</el-col>
|
||||||
<el-switch v-model="form.reverseSlide"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.reverseSlide')">
|
||||||
</el-col>
|
<el-switch v-model="form.reverseSlide"></el-switch>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
</el-card>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -1,315 +1,331 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<el-card shadow="never">
|
||||||
<el-form label-width="150px" size="mini">
|
<el-form label-width="150px" size="mini">
|
||||||
<h3>{{ $t('stylegen.avatars') }}</h3>
|
<el-collapse>
|
||||||
<el-card shadow="never">
|
<el-collapse-item>
|
||||||
<el-row :gutter="20">
|
<template slot="title">
|
||||||
<el-col :xs="24" :sm="12">
|
<h3>{{ $t('stylegen.avatars') }}</h3>
|
||||||
<el-form-item :label="$t('stylegen.showAvatars')">
|
</template>
|
||||||
<el-switch v-model="form.showAvatars"></el-switch>
|
<el-row :gutter="20">
|
||||||
</el-form-item>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-col>
|
<el-form-item :label="$t('stylegen.showAvatars')">
|
||||||
<el-col :xs="24" :sm="12">
|
<el-switch v-model="form.showAvatars"></el-switch>
|
||||||
<el-form-item :label="$t('stylegen.avatarSize')">
|
</el-form-item>
|
||||||
<el-input v-model.number="form.avatarSize" type="number" min="0"></el-input>
|
</el-col>
|
||||||
</el-form-item>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-col>
|
<el-form-item :label="$t('stylegen.avatarSize')">
|
||||||
</el-row>
|
<el-input v-model.number="form.avatarSize" type="number" min="0"></el-input>
|
||||||
</el-card>
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-collapse-item>
|
||||||
|
|
||||||
<h3>{{ $t('stylegen.userNames') }}</h3>
|
<el-collapse-item>
|
||||||
<el-card shadow="never">
|
<template slot="title">
|
||||||
<el-row :gutter="20">
|
<h3>{{ $t('stylegen.userNames') }}</h3>
|
||||||
<el-col :xs="24" :sm="12">
|
</template>
|
||||||
<el-form-item :label="$t('stylegen.showUserNames')">
|
<el-row :gutter="20">
|
||||||
<el-switch v-model="form.showUserNames"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.showUserNames')">
|
||||||
</el-col>
|
<el-switch v-model="form.showUserNames"></el-switch>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.font')">
|
</el-col>
|
||||||
<font-select v-model="form.userNameFont"></font-select>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.font')">
|
||||||
</el-col>
|
<font-select v-model="form.userNameFont"></font-select>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.fontSize')">
|
<el-row :gutter="20">
|
||||||
<el-input v-model.number="form.userNameFontSize" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.fontSize')">
|
||||||
</el-col>
|
<el-input v-model.number="form.userNameFontSize" type="number" min="0"></el-input>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.lineHeight')">
|
</el-col>
|
||||||
<el-input v-model.number="form.userNameLineHeight" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.lineHeight')">
|
||||||
</el-col>
|
<el-input v-model.number="form.userNameLineHeight" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.normalColor')">
|
<el-row :gutter="20">
|
||||||
<el-color-picker v-model="form.userNameColor"></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.normalColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.userNameColor"></el-color-picker>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.memberColor')">
|
</el-col>
|
||||||
<el-color-picker v-model="form.memberUserNameColor"></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.memberColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.memberUserNameColor"></el-color-picker>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.moderatorColor')">
|
<el-row :gutter="20">
|
||||||
<el-color-picker v-model="form.moderatorUserNameColor"></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.moderatorColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.moderatorUserNameColor"></el-color-picker>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.ownerColor')">
|
</el-col>
|
||||||
<el-color-picker v-model="form.ownerUserNameColor"></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.ownerColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.ownerUserNameColor"></el-color-picker>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.showBadges')">
|
<el-row :gutter="20">
|
||||||
<el-switch v-model="form.showBadges"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.showBadges')">
|
||||||
</el-col>
|
<el-switch v-model="form.showBadges"></el-switch>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
</el-card>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-collapse-item>
|
||||||
|
|
||||||
<h3>{{ $t('stylegen.messages') }}</h3>
|
<el-collapse-item>
|
||||||
<el-card shadow="never">
|
<template slot="title">
|
||||||
<el-row :gutter="20">
|
<h3>{{ $t('stylegen.messages') }}</h3>
|
||||||
<el-col :xs="24" :sm="12">
|
</template>
|
||||||
<el-form-item :label="$t('stylegen.font')">
|
<el-row :gutter="20">
|
||||||
<font-select v-model="form.messageFont"></font-select>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.font')">
|
||||||
</el-col>
|
<font-select v-model="form.messageFont"></font-select>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.color')">
|
</el-col>
|
||||||
<el-color-picker v-model="form.messageColor"></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.color')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.messageColor"></el-color-picker>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.fontSize')">
|
<el-row :gutter="20">
|
||||||
<el-input v-model.number="form.messageFontSize" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.fontSize')">
|
||||||
</el-col>
|
<el-input v-model.number="form.messageFontSize" type="number" min="0"></el-input>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.lineHeight')">
|
</el-col>
|
||||||
<el-input v-model.number="form.messageLineHeight" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.lineHeight')">
|
||||||
</el-col>
|
<el-input v-model.number="form.messageLineHeight" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.emoticonSize')">
|
<el-row :gutter="20">
|
||||||
<el-input v-model.number="form.emoticonSize" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.emoticonSize')">
|
||||||
</el-col>
|
<el-input v-model.number="form.emoticonSize" type="number" min="0"></el-input>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.largeEmoticonSize')">
|
</el-col>
|
||||||
<el-input v-model.number="form.largeEmoticonSize" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.largeEmoticonSize')">
|
||||||
</el-col>
|
<el-input v-model.number="form.largeEmoticonSize" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
</el-card>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-collapse-item>
|
||||||
|
|
||||||
<h3>{{ $t('stylegen.time') }}</h3>
|
<el-collapse-item>
|
||||||
<el-card shadow="never">
|
<template slot="title">
|
||||||
<el-form-item :label="$t('stylegen.showTime')">
|
<h3>{{ $t('stylegen.time') }}</h3>
|
||||||
<el-switch v-model="form.showTime"></el-switch>
|
</template>
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.showTime')">
|
||||||
<el-row :gutter="20">
|
<el-switch v-model="form.showTime"></el-switch>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.font')">
|
<el-row :gutter="20">
|
||||||
<font-select v-model="form.timeFont"></font-select>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.font')">
|
||||||
</el-col>
|
<font-select v-model="form.timeFont"></font-select>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.color')">
|
</el-col>
|
||||||
<el-color-picker v-model="form.timeColor"></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.color')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.timeColor"></el-color-picker>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.fontSize')">
|
<el-row :gutter="20">
|
||||||
<el-input v-model.number="form.timeFontSize" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.fontSize')">
|
||||||
</el-col>
|
<el-input v-model.number="form.timeFontSize" type="number" min="0"></el-input>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.lineHeight')">
|
</el-col>
|
||||||
<el-input v-model.number="form.timeLineHeight" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.lineHeight')">
|
||||||
</el-col>
|
<el-input v-model.number="form.timeLineHeight" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
</el-card>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-collapse-item>
|
||||||
|
|
||||||
<h3>{{ $t('stylegen.backgrounds') }}</h3>
|
<el-collapse-item>
|
||||||
<el-card shadow="never">
|
<template slot="title">
|
||||||
<el-row :gutter="20">
|
<h3>{{ $t('stylegen.backgrounds') }}</h3>
|
||||||
<el-col :xs="24" :sm="12">
|
</template>
|
||||||
<el-form-item :label="$t('stylegen.bgColor')">
|
<el-row :gutter="20">
|
||||||
<el-color-picker v-model="form.bgColor" show-alpha></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.bgColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.bgColor" show-alpha></el-color-picker>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.showLargeEmoticonBg')">
|
</el-col>
|
||||||
<el-switch v-model="form.showLargeEmoticonBg"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.showLargeEmoticonBg')">
|
||||||
</el-col>
|
<el-switch v-model="form.showLargeEmoticonBg"></el-switch>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.messageBgColor')">
|
<el-row :gutter="20">
|
||||||
<el-color-picker v-model="form.messageBgColor" show-alpha></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.messageBgColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.messageBgColor" show-alpha></el-color-picker>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.memberMessageBgColor')">
|
</el-col>
|
||||||
<el-color-picker v-model="form.memberMessageBgColor" show-alpha></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.memberMessageBgColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.memberMessageBgColor" show-alpha></el-color-picker>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.moderatorMessageBgColor')">
|
<el-row :gutter="20">
|
||||||
<el-color-picker v-model="form.moderatorMessageBgColor" show-alpha></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.moderatorMessageBgColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.moderatorMessageBgColor" show-alpha></el-color-picker>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.ownerMessageBgColor')">
|
</el-col>
|
||||||
<el-color-picker v-model="form.ownerMessageBgColor" show-alpha></el-color-picker>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.ownerMessageBgColor')">
|
||||||
</el-col>
|
<el-color-picker v-model="form.ownerMessageBgColor" show-alpha></el-color-picker>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
</el-card>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-collapse-item>
|
||||||
|
|
||||||
<h3>{{ $t('stylegen.scAndNewMember') }}</h3>
|
<el-collapse-item>
|
||||||
<el-card shadow="never">
|
<template slot="title">
|
||||||
<el-row :gutter="20">
|
<h3>{{ $t('stylegen.scAndNewMember') }}</h3>
|
||||||
<el-col :xs="24" :sm="12">
|
</template>
|
||||||
<el-form-item :label="$t('stylegen.firstLineFont')">
|
<el-row :gutter="20">
|
||||||
<font-select v-model="form.firstLineFont"></font-select>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.firstLineFont')">
|
||||||
</el-col>
|
<font-select v-model="form.firstLineFont"></font-select>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.firstLineFontSize')">
|
<el-row :gutter="20">
|
||||||
<el-input v-model.number="form.firstLineFontSize" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.firstLineFontSize')">
|
||||||
</el-col>
|
<el-input v-model.number="form.firstLineFontSize" type="number" min="0"></el-input>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.firstLineLineHeight')">
|
</el-col>
|
||||||
<el-input v-model.number="form.firstLineLineHeight" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.firstLineLineHeight')">
|
||||||
</el-col>
|
<el-input v-model.number="form.firstLineLineHeight" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-divider></el-divider>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.secondLineFont')">
|
<el-form-item :label="$t('stylegen.secondLineFont')">
|
||||||
<font-select v-model="form.secondLineFont"></font-select>
|
<font-select v-model="form.secondLineFont"></font-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.secondLineFontSize')">
|
<el-form-item :label="$t('stylegen.secondLineFontSize')">
|
||||||
<el-input v-model.number="form.secondLineFontSize" type="number" min="0"></el-input>
|
<el-input v-model.number="form.secondLineFontSize" type="number" min="0"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.secondLineLineHeight')">
|
<el-form-item :label="$t('stylegen.secondLineLineHeight')">
|
||||||
<el-input v-model.number="form.secondLineLineHeight" type="number" min="0"></el-input>
|
<el-input v-model.number="form.secondLineLineHeight" type="number" min="0"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-divider></el-divider>
|
<el-divider></el-divider>
|
||||||
|
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.scContentLineFont')">
|
<el-form-item :label="$t('stylegen.scContentLineFont')">
|
||||||
<font-select v-model="form.scContentFont"></font-select>
|
<font-select v-model="form.scContentFont"></font-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.scContentLineFontSize')">
|
<el-form-item :label="$t('stylegen.scContentLineFontSize')">
|
||||||
<el-input v-model.number="form.scContentFontSize" type="number" min="0"></el-input>
|
<el-input v-model.number="form.scContentFontSize" type="number" min="0"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.scContentLineLineHeight')">
|
<el-form-item :label="$t('stylegen.scContentLineLineHeight')">
|
||||||
<el-input v-model.number="form.scContentLineHeight" type="number" min="0"></el-input>
|
<el-input v-model.number="form.scContentLineHeight" type="number" min="0"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-divider></el-divider>
|
<el-divider></el-divider>
|
||||||
|
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.showScTicker')">
|
<el-form-item :label="$t('stylegen.showScTicker')">
|
||||||
<el-switch v-model="form.showScTicker"></el-switch>
|
<el-switch v-model="form.showScTicker"></el-switch>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
<el-col :xs="24" :sm="12">
|
||||||
<el-form-item :label="$t('stylegen.showOtherThings')">
|
<el-form-item :label="$t('stylegen.showOtherThings')">
|
||||||
<el-switch v-model="form.showOtherThings"></el-switch>
|
<el-switch v-model="form.showOtherThings"></el-switch>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-card>
|
</el-collapse-item>
|
||||||
|
|
||||||
<h3>{{ $t('stylegen.animation') }}</h3>
|
<el-collapse-item>
|
||||||
<el-card shadow="never">
|
<template slot="title">
|
||||||
<el-row :gutter="20">
|
<h3>{{ $t('stylegen.animation') }}</h3>
|
||||||
<el-col :xs="24" :sm="12">
|
</template>
|
||||||
<el-form-item :label="$t('stylegen.animateIn')">
|
<el-row :gutter="20">
|
||||||
<el-switch v-model="form.animateIn"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.animateIn')">
|
||||||
</el-col>
|
<el-switch v-model="form.animateIn"></el-switch>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.fadeInTime')">
|
</el-col>
|
||||||
<el-input v-model.number="form.fadeInTime" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.fadeInTime')">
|
||||||
</el-col>
|
<el-input v-model.number="form.fadeInTime" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-row>
|
||||||
<el-form-item :label="$t('stylegen.animateOut')">
|
<el-row :gutter="20">
|
||||||
<el-switch v-model="form.animateOut"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.animateOut')">
|
||||||
</el-col>
|
<el-switch v-model="form.animateOut"></el-switch>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.fadeOutTime')">
|
</el-col>
|
||||||
<el-input v-model.number="form.fadeOutTime" type="number" min="0"></el-input>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.fadeOutTime')">
|
||||||
</el-col>
|
<el-input v-model.number="form.fadeOutTime" type="number" min="0"></el-input>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.animateOutWaitTime')">
|
</el-col>
|
||||||
<el-input v-model.number="form.animateOutWaitTime" type="number" min="0"></el-input>
|
</el-row>
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.animateOutWaitTime')">
|
||||||
<el-row :gutter="20">
|
<el-input v-model.number="form.animateOutWaitTime" type="number" min="0"></el-input>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.slide')">
|
<el-row :gutter="20">
|
||||||
<el-switch v-model="form.slide"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.slide')">
|
||||||
</el-col>
|
<el-switch v-model="form.slide"></el-switch>
|
||||||
<el-col :xs="24" :sm="12">
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.reverseSlide')">
|
</el-col>
|
||||||
<el-switch v-model="form.reverseSlide"></el-switch>
|
<el-col :xs="24" :sm="12">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('stylegen.reverseSlide')">
|
||||||
</el-col>
|
<el-switch v-model="form.reverseSlide"></el-switch>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
</el-card>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -2,12 +2,12 @@
|
|||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :sm="24" :md="16">
|
<el-col :sm="24" :md="16">
|
||||||
<el-tabs v-model="activeTab">
|
<el-tabs v-model="activeTab">
|
||||||
<el-tab-pane :label="$t('stylegen.legacy')" name="legacy">
|
|
||||||
<legacy ref="legacy" v-model="subComponentResults.legacy"></legacy>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane :label="$t('stylegen.lineLike')" name="lineLike">
|
<el-tab-pane :label="$t('stylegen.lineLike')" name="lineLike">
|
||||||
<line-like ref="lineLike" v-model="subComponentResults.lineLike"></line-like>
|
<line-like ref="lineLike" v-model="subComponentResults.lineLike"></line-like>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
<el-tab-pane :label="$t('stylegen.legacy')" name="legacy">
|
||||||
|
<legacy ref="legacy" v-model="subComponentResults.legacy"></legacy>
|
||||||
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
|
|
||||||
<el-form label-width="150px" size="mini">
|
<el-form label-width="150px" size="mini">
|
||||||
@ -64,14 +64,14 @@ export default {
|
|||||||
legacy: '',
|
legacy: '',
|
||||||
lineLike: ''
|
lineLike: ''
|
||||||
},
|
},
|
||||||
activeTab: 'legacy',
|
activeTab: 'lineLike',
|
||||||
// 输入框的结果
|
// 输入框的结果
|
||||||
inputResult: '',
|
inputResult: '',
|
||||||
// 防抖后延迟变化的结果
|
// 防抖后延迟变化的结果
|
||||||
debounceResult: '',
|
debounceResult: '',
|
||||||
|
|
||||||
playAnimation: true,
|
playAnimation: true,
|
||||||
exampleBgLight: false
|
exampleBgLight: true,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user