增加标题文字大小控制

This commit is contained in:
aixianling
2024-03-01 11:29:37 +08:00
parent 75f3efa38a
commit 66d0f0c8ab
4 changed files with 33 additions and 38 deletions

View File

@@ -37,6 +37,7 @@ export default {
}, },
props: { props: {
title: {default: "数字乡村数据大屏"}, title: {default: "数字乡村数据大屏"},
titleSize:{default:38},
views: { views: {
default: () => [] default: () => []
}, },
@@ -296,7 +297,7 @@ export default {
font-weight: 600; font-weight: 600;
line-height: 38px; line-height: 38px;
letter-spacing: 2px; letter-spacing: 2px;
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.1); text-shadow: 0 2px 4px rgba(117, 9, 9, 0.1);
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%); background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@@ -322,7 +323,7 @@ export default {
font-weight: 400; font-weight: 400;
color: #FF9A02; color: #FF9A02;
line-height: 22px; line-height: 22px;
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.1); text-shadow: 0 2px 4px rgba(117, 9, 9, 0.1);
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%); background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;

View File

@@ -1,7 +1,7 @@
<template> <template>
<section class="primary"> <section class="primary">
<div flex class="content"> <div flex class="content">
<b class="headerTitle" v-text="title"/> <b class="headerTitle" v-text="title" :style="titleStyle"/>
<el-tabs class="fill" v-model="current" @tab-click="$emit('change', current)"> <el-tabs class="fill" v-model="current" @tab-click="$emit('change', current)">
<el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.label" :name="tab.id"/> <el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.label" :name="tab.id"/>
</el-tabs> </el-tabs>
@@ -40,7 +40,10 @@ export default {
// {label: "测试哦哦", id: 8}, // {label: "测试哦哦", id: 8},
// {label: "测试哦哦", id: 9}, // {label: "测试哦哦", id: 9},
// {label: "测试哦哦", id: 10}, // {label: "测试哦哦", id: 10},
] ],
titleStyle: v => ({
fontSize: `${v.$attrs.titleSize || 38}px`,
})
}, },
data() { data() {
return { return {

View File

@@ -1,6 +1,6 @@
<template> <template>
<section class="preview"> <section class="preview">
<ai-dv-wrapper :views="[{label: '返回'}]" :theme="config.theme" @change="handleBack" v-if="screenId" :title="info.name" :background="bgImg"> <ai-dv-wrapper :views="[{label: '返回'}]" :theme="config.theme" @change="handleBack" v-if="screenId" :title="info.name" :background="bgImg" :titleSize="config.titleSize">
<ai-dv-viewer :urlPrefix="urlPrefix" :instance="instance" :dict="dict" :id="screenId"/> <ai-dv-viewer :urlPrefix="urlPrefix" :instance="instance" :dict="dict" :id="screenId"/>
</ai-dv-wrapper> </ai-dv-wrapper>
</section> </section>

View File

@@ -66,6 +66,7 @@
style="height: 100%" style="height: 100%"
:type="dashboard.style" :type="dashboard.style"
:title="$route.query.name" :title="$route.query.name"
:titleSize="dashboard.titleSize"
:theme="dashboard.theme" :theme="dashboard.theme"
:background="dashboard.theme == 1 ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj_bg.png' : (dashboard.backgroundImage.length ? dashboard.backgroundImage[0].url : '')"> :background="dashboard.theme == 1 ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj_bg.png' : (dashboard.backgroundImage.length ? dashboard.backgroundImage[0].url : '')">
<div style="width: 100%; height: 100%"> <div style="width: 100%; height: 100%">
@@ -120,39 +121,26 @@
<div class="layout-page__setting layout-right__content" v-else> <div class="layout-page__setting layout-right__content" v-else>
<h2>页面设置</h2> <h2>页面设置</h2>
<div class="layout-config__group"> <div class="layout-config__group">
<div class="layout-config__item"> <config-item label="屏幕大小">
<label>屏幕大小</label> <el-input-number size="mini" :min="0" v-model="bigscreenWidth" disabled controls-position="right"/>
<div class="layout-config__item--right"> <el-input-number size="mini" :min="0" v-model="bigscreenHeight" disabled controls-position="right"/>
<el-input-number size="mini" :min="0" v-model="bigscreenWidth" disabled </config-item>
controls-position="right"></el-input-number> <config-item label="屏幕标题">
<el-input-number size="mini" :min="0" v-model="bigscreenHeight" disabled <el-input v-model="dashboard.title" size="mini"/>
controls-position="right"></el-input-number> <el-input type="number" v-model="dashboard.titleSize" size="mini" placeholder="字体大小" :max="68"/>
</div> </config-item>
</div> <config-item label="主题设置">
<div class="layout-config__item layout-config__item--input"> <el-select size="mini" v-model="dashboard.theme" placeholder="请选择">
<label>屏幕标题</label> <el-option label="默认" value="0"></el-option>
<div class="layout-config__item--right"> <el-option label="党建" value="1"></el-option>
<el-input v-model="dashboard.title" size="mini"></el-input> </el-select>
</div> </config-item>
</div> <config-item label="样式设置">
<div class="layout-config__item"> <el-select size="mini" v-model="dashboard.style" placeholder="请选择">
<label>主题设置</label> <el-option label="默认" value="black"/>
<div class="layout-config__item--right"> <el-option label="经典" value="classic"/>
<el-select size="mini" v-model="dashboard.theme" placeholder="请选择"> </el-select>
<el-option label="默认" value="0"></el-option> </config-item>
<el-option label="党建" value="1"></el-option>
</el-select>
</div>
</div>
<div class="layout-config__item">
<label>样式设置</label>
<div class="layout-config__item--right">
<el-select size="mini" v-model="dashboard.style" placeholder="请选择">
<el-option label="默认" value="black"/>
<el-option label="经典" value="classic"/>
</el-select>
</div>
</div>
<div class="layout-config__item"> <div class="layout-config__item">
<label>背景图</label> <label>背景图</label>
<div class="layout-config__item--right layout-config__item--bg"> <div class="layout-config__item--right layout-config__item--bg">
@@ -235,6 +223,7 @@ import DataConfig from './components/DataConfig.vue'
import ComponentConfig from "./components/componentConfig.vue"; import ComponentConfig from "./components/componentConfig.vue";
import {mapActions} from "vuex" import {mapActions} from "vuex"
import Vue from "vue"; import Vue from "vue";
import ConfigItem from "./components/configItem.vue";
export default { export default {
name: "viewport", name: "viewport",
@@ -271,6 +260,7 @@ export default {
componentList: [], componentList: [],
dashboard: { dashboard: {
title: '大屏', title: '大屏',
titleSize: 38,
width: 1920, width: 1920,
height: 1080, height: 1080,
theme: '0', theme: '0',
@@ -292,6 +282,7 @@ export default {
} }
}, },
components: { components: {
ConfigItem,
ComponentConfig, ComponentConfig,
DataConfig, DataConfig,
VueRulerTool, VueRulerTool,