低代码可视化-大屏设计器-静态Vue+HTML大屏代码生成器
低代码可视化大屏设计器与代码生成器是当前软件开发领域中的热门工具，它们通过简化开发流程、降低技术门槛，帮助开发者快速构建功能丰富、界面美观的应用程序。
·
低代码可视化大屏设计器与代码生成器是当前软件开发领域中的热门工具，它们通过简化开发流程、降低技术门槛，帮助开发者快速构建功能丰富、界面美观的应用程序。
低代码可视化大屏设计器
低代码可视化大屏设计器是一种基于图形界面的开发工具，它允许开发者通过拖拽组件、配置属性等方式，快速创建大屏数据可视化应用。这些工具通常提供丰富的组件库、数据绑定和交互功能，并支持多种数据源接入和实时更新。
拖拽式开发
用户可以通过拖拽组件到设计区域，快速构建大屏界面。
丰富的组件库
提供多种图表、按钮、文本框等组件，满足不同的展示需求。
数据绑定
支持将API接口等数据源接入，实现数据的动态展示和更新。
交互功能
提供点击、滑动等交互操作，增强用户体验。
自动化代码生成器
根据用户提供的配置或模板自动生成代码，减少手动编写代码的工作量。
多种代码格式生成
支持生成静态HTML大屏代码、支持生成Vue3组合式代码、支持Vue2选项式代码
前后分离代码
静态HTML代码
高度可定制
用户可以根据自己的需求定制生成代码的风格、结构和内容。
快速迭代
通过自动生成代码，可以快速迭代开发过程，提高开发效率。
无论您是设计师、数据分析师,还是开发人员,低代码可视化大屏设计器都能让您的创意插上翱翔的翅膀。告别繁琐,拥抱创新,让数据讲述更精彩的事!生
生成的HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>首页</title>
<script>
var process = { env: { NODE_ENV: 'production' } };
</script>
<script src="./common/vue.js"></script>
<link rel="stylesheet" href="./common/elementui.min.css" />
<script src="./common/elementui.min.js"></script>
<script src="./common/elementicon.js"></script>
<script src="./common/zh-cn.js"></script>
<script src="./siteinfo.js"></script>
<script src="./common/axios.min.js"></script>
<script src="./common/Session.js"></script>
<script src="./common/Tools.js"></script>
<script src="./common/Page.js"></script>
<script src="./common/mitt.min.js"></script>
<script src="./common/Http.js"></script>
<script src="./common/Httpdata.js"></script>
<script src="./common/index.umd.js"></script>
<script src="./common/diygw-datav.umd.js"></script>
<link rel="stylesheet" href="./common/diygw-ui/index.css" />
<link rel="stylesheet" href="./common/diygw-ui/iconfont.css" />
<link rel="stylesheet" href="./common/diyfont.css" />
<link rel="stylesheet" href="./common/style.css" />
<link rel="stylesheet" href="./common/diygw-datav.css" />
</head>
<body>
<div id="app">
<div class="container">
<diygw-scale :width="1920" :height="1080" :delay="100" :scale-type="1">
<div class="flex flex-wrap diygw-col-24 auto-clz">
<div class="flex diygw-col-24 borderbox-clz"><diygw-border-box11 :color="['#4fd2dd','#235FA7']" backgroundColor="#00000000" style="width: 100%; height: 100%"></diygw-border-box11></div>
<span class="diygw-col-24 text-clz"> 公开数据展示 </span>
<div class="flex flex-wrap diygw-col-24 flex-direction-column flex7-clz">
<div class="flex flex-wrap diygw-col-24 flex-clz">
<div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex1-clz">
<div class="flex diygw-col-0 countup-clz"><diygw-count-up :duration="3" ref="countupRef" :start-val="countupStart" :end-val="countupEnd" :decimal-places="0" :autoplay="true" :delay="0" style="width: 100%; height: 100%"></diygw-count-up></div>
<span class="diygw-col-0"> 党务公开 </span>
</div>
<div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex2-clz">
<div class="flex diygw-col-0 countup1-clz"><diygw-count-up :duration="3" ref="countup1Ref" :start-val="countup1Start" :end-val="countup1End" :decimal-places="0" :autoplay="true" :delay="0" style="width: 100%; height: 100%"></diygw-count-up></div>
<span class="diygw-col-0"> 党务公开 </span>
</div>
<div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex6-clz">
<div class="flex diygw-col-0 countup5-clz"><diygw-count-up :duration="3" ref="countup5Ref" :start-val="countup5Start" :end-val="countup5End" :decimal-places="0" :autoplay="true" :delay="0" style="width: 100%; height: 100%"></diygw-count-up></div>
<span class="diygw-col-0"> 党务公开 </span>
</div>
<div class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex5-clz">
<div class="flex diygw-col-0 countup4-clz"><diygw-count-up :duration="3" ref="countup4Ref" :start-val="countup4Start" :end-val="countup4End" :decimal-places="0" :autoplay="true" :delay="0" style="width: 100%; height: 100%"></diygw-count-up></div>
<span class="diygw-col-0"> 党务公开 </span>
</div>
<div class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex4-clz">
<div class="flex diygw-col-0 countup3-clz"><diygw-count-up :duration="3" ref="countup3Ref" :start-val="countup3Start" :end-val="countup3End" :decimal-places="0" :autoplay="true" :delay="0" style="width: 100%; height: 100%"></diygw-count-up></div>
<span class="diygw-col-0"> 党务公开 </span>
</div>
<div class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex3-clz">
<div class="flex diygw-col-0 countup2-clz"><diygw-count-up :duration="3" ref="countup2Ref" :start-val="countup2Start" :end-val="countup2End" :decimal-places="0" :autoplay="true" :delay="0" style="width: 100%; height: 100%"></diygw-count-up></div>
<span class="diygw-col-0"> 党务公开 </span>
</div>
<div class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex8-clz">
<div class="flex diygw-col-0 countup6-clz"><diygw-count-up :duration="3" ref="countup6Ref" :start-val="countup6Start" :end-val="countup6End" :decimal-places="0" :autoplay="true" :delay="0" style="width: 100%; height: 100%"></diygw-count-up></div>
<span class="diygw-col-0"> 党务公开 </span>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap diygw-col-24 auto1-clz">
<div class="flex diygw-col-24 borderbox1-clz"><diygw-border-box11 :color="['#4fd2dd','#235FA7']" backgroundColor="#00000000" style="width: 100%; height: 100%"></diygw-border-box11></div>
<span class="diygw-col-24 text8-clz"> 公开数据展示 </span>
<div class="flex flex-wrap diygw-col-24 flex-direction-column flex9-clz">
<div class="flex flex-wrap diygw-col-24 flex10-clz">
<div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex11-clz">
<div class="flex diygw-col-0 countup7-clz"><diygw-count-up :duration="3" ref="countup7Ref" :start-val="countup7Start" :end-val="countup7End" :decimal-places="0" :autoplay="true" :delay="0" style="width: 100%; height: 100%"></diygw-count-up></div>
<span class="diygw-col-0"> 党务公开 </span>
</div>
<div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex12-clz">
<div class="flex diygw-col-0 countup8-clz"><diygw-count-up :duration="3" ref="countup8Ref" :start-val="countup8Start" :end-val="countup8End" :decimal-places="0" :autoplay="true" :delay="0" style="width: 100%; height: 100%"></diygw-count-up></div>
<span class="diygw-col-0"> 党务公开 </span>
</div>
<div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex13-clz">
<div class="flex diygw-col-0 countup9-clz"><diygw-count-up :duration="3" ref="countup9Ref" :start-val="countup9Start" :end-val="countup9End" :decimal-places="0" :autoplay="true" :delay="0" style="width: 100%; height: 100%"></diygw-count-up></div>
<span class="diygw-col-0"> 党务公开 </span>
</div>
<div class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex14-clz">
<div class="flex diygw-col-0 countup10-clz"><diygw-count-up :duration="3" ref="countup10Ref" :start-val="countup10Start" :end-val="countup10End" :decimal-places="0" :autoplay="true" :delay="0" style="width: 100%; height: 100%"></diygw-count-up></div>
<span class="diygw-col-0"> 党务公开 </span>
</div>
<div class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex15-clz">
<div class="flex diygw-col-0 countup11-clz"><diygw-count-up :duration="3" ref="countup11Ref" :start-val="countup11Start" :end-val="countup11End" :decimal-places="0" :autoplay="true" :delay="0" style="width: 100%; height: 100%"></diygw-count-up></div>
<span class="diygw-col-0"> 党务公开 </span>
</div>
<div class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex16-clz">
<div class="flex diygw-col-0 countup12-clz"><diygw-count-up :duration="3" ref="countup12Ref" :start-val="countup12Start" :end-val="countup12End" :decimal-places="0" :autoplay="true" :delay="0" style="width: 100%; height: 100%"></diygw-count-up></div>
<span class="diygw-col-0"> 党务公开 </span>
</div>
<div class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex17-clz">
<div class="flex diygw-col-0 countup13-clz"><diygw-count-up :duration="3" ref="countup13Ref" :start-val="countup13Start" :end-val="countup13End" :decimal-places="0" :autoplay="true" :delay="0" style="width: 100%; height: 100%"></diygw-count-up></div>
<span class="diygw-col-0"> 党务公开 </span>
</div>
</div>
</div>
</div>
<div class="flex diygw-col-24 image-clz"><el-image src="/static/title_bg.png" fit="fill" style="height: 160px; width: 100%" /></div>
<span class="diygw-col-24 text16-clz"> 政务服务数据可视化监管平台 </span>
<div class="flex flex-wrap diygw-col-24 auto2-clz">
<div class="flex diygw-col-24 borderbox2-clz"><diygw-border-box11 :color="['#4fd2dd','#235FA7']" backgroundColor="#00000000" style="width: 100%; height: 100%"></diygw-border-box11></div>
<span class="diygw-col-24 text17-clz"> 公开数据展示 </span>
<div style="height: 200px" class="flex diygw-col-24 column-clz">
<qiun-vue-ucharts type="column" style="width: 100%" :opts="columnOpts" :chart-data="columnData" />
</div>
</div>
<div class="flex diygw-col-24 borderbox3-clz"><diygw-border-box11 :color="['#4fd2dd','#235FA7']" backgroundColor="#00000000" style="width: 100%; height: 100%"></diygw-border-box11></div>
<div style="height: 200px" class="flex diygw-col-24 barchart-clz">
<qiun-vue-ucharts type="bar" style="width: 100%" :opts="barchartOpts" :chart-data="barchartData" />
</div>
<div style="height: 200px" class="flex diygw-col-24 funnel-clz">
<qiun-vue-ucharts type="funnel" style="width: 100%" :opts="funnelOpts" :chart-data="funnelData" />
</div>
<div class="flex diygw-col-24 borderbox4-clz"><diygw-border-box1 :color="['#4fd2dd','#235FA7']" backgroundColor="#00000000" style="width: 100%; height: 100%"></diygw-border-box1></div>
<div class="flex diygw-col-24 scrollboard-clz"><diygw-scroll-board :config="scrollboardConfig" style="width: 100%; height: 100%"></diygw-scroll-board></div>
<div class="flex diygw-col-24 borderbox5-clz"><diygw-border-box1 :color="['#4fd2dd','#235FA7']" backgroundColor="#00000000" style="width: 100%; height: 100%"></diygw-border-box1></div>
<div style="height: 200px" class="flex diygw-col-24 pie-clz">
<qiun-vue-ucharts type="pie" style="width: 100%" :opts="pieOpts" :chart-data="pieData" />
</div>
</diygw-scale>
<div class="clearfix"></div>
</div>
</div>
<script type="module">
const app = Vue.createApp({
data() {
return {
countupStart: 0,
countupEnd: 1000,
countup1Start: 0,
countup1End: 1000,
countup5Start: 0,
countup5End: 1000,
countup4Start: 0,
countup4End: 1000,
countup3Start: 0,
countup3End: 1000,
countup2Start: 0,
countup2End: 1000,
countup6Start: 0,
countup6End: 1000,
countup7Start: 0,
countup7End: 1000,
countup8Start: 0,
countup8End: 1000,
countup9Start: 0,
countup9End: 1000,
countup10Start: 0,
countup10End: 1000,
countup11Start: 0,
countup11End: 1000,
countup12Start: 0,
countup12End: 1000,
countup13Start: 0,
countup13End: 1000,
columnOpts: { type: 'column', color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'], padding: [15, 15, 0, 5], xAxis: { disableGrid: true }, yAxis: { data: [{ min: 0 }] }, legend: {}, extra: { column: { type: 'group', width: 30, linearType: 'custom', linearOpacity: 0.9, barBorderCircle: true, activeBgColor: '#000000', activeBgOpacity: 0.08 } } },
columnData: {
categories: ['2018', '2019', '2020', '2021'],
series: [
{ name: '目标值', data: [35, 36, 31, 33] },
{ name: '完成量', data: [18, 27, 21, 24] }
]
},
barchartOpts: { type: 'bar', color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'], padding: [15, 30, 0, 5], xAxis: { boundaryGap: 'justify', disableGrid: false, min: 0, axisLine: false }, yAxis: {}, legend: {}, extra: { bar: { type: 'group', width: 30, meterBorde: 1, linearType: 'custom', linearOpacity: 0.9, meterFillColor: '#FFFFFF', activeBgColor: '#000000', activeBgOpacity: 0.08 } } },
barchartData: {
categories: ['2018', '2019', '2020', '2021'],
series: [
{ name: '目标值', data: [31, 33, 13, 34] },
{ name: '完成量', data: [21, 24, 26, 28] }
]
},
funnelOpts: { type: 'funnel', color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'], padding: [15, 15, 0, 15], extra: { funnel: { linearType: 'custom', linearOpacity: 0.9, activeOpacity: 0.3, activeWidth: 10, border: true, borderWidth: 2, borderColor: '#FFFFFF', fillOpacity: 1, labelAlign: 'right' } } },
funnelData: {
series: [
{
data: [
{ name: '一班', value: 50 },
{ name: '二班', value: 30 },
{ name: '三班', value: 20 },
{ name: '四班', value: 18 },
{ name: '五班', value: 8 }
]
}
]
},
scrollboardConfig: {
rowNum: 5,
headerBGC: '#00BAFF',
oddRowBGC: '#0A2732',
evenRowBGC: '#0A2732',
waitTime: 3000,
headerHeight: 35,
header: ['列1', '列2', '列3'],
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
]
},
pieOpts: { type: 'pie', color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'], padding: [5, 5, 5, 5], extra: { pie: { linearType: 'custom', linearOpacity: 0.9, activeOpacity: 0.5, activeRadius: 10, offsetAngle: 0, labelWidth: 15, border: false, borderColor: '#FFFFFF' } } },
pieData: {
series: [
{ name: '一班', data: 50 },
{ name: '二班', data: 30 },
{ name: '三班', data: 20 },
{ name: '四班', data: 18 },
{ name: '五班', data: 8 }
]
}
};
},
methods: {
async init() {}
},
mounted() {
this.init();
},
beforeUnmount() {}
});
app.use(ElementPlus, {
locale: ElementPlusLocaleZhCn
});
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}
app.use(DiygwLib);
app.use(DiygwDatav);
app.config.globalProperties.$tools = new Tools();
app.config.globalProperties.$http = httpService;
app.config.globalProperties.$session = Session;
app.config.globalProperties.mittBus = mitt();
app.mixin({
methods: {
setData,
navigateTo,
showModal,
showToast,
uploadImage
}
});
app.mount('#app');
</script>
<style>
.auto-clz {
flex-shrink: 0;
top: 16px;
left: 19px;
width: 519px !important;
position: absolute;
height: 279px !important;
}
.borderbox-clz {
flex-shrink: 0;
top: 0px;
left: 0px;
display: flex;
width: 519px !important;
font-size: 21px !important;
position: absolute;
align-items: center;
height: 279px !important;
}
.text-clz {
flex-shrink: 0;
color: #ffffff;
top: 8px;
left: 209px;
font-weight: bold;
display: flex;
width: 100px !important;
font-size: 14px !important;
position: absolute;
align-items: center;
height: 40px !important;
text-align: center;
}
.flex7-clz {
flex-shrink: 0;
top: 76px;
left: 29px;
width: 461px !important;
font-size: 27px !important;
position: absolute;
height: 203px !important;
}
.flex-clz {
color: #ffffff;
top: 85px;
left: 56px;
font-size: 18px !important;
position: absolute;
}
.flex1-clz {
background-color: #37d2d4;
margin-left: 5px;
padding-top: 10px;
padding-left: 5px;
width: calc(33.3333333333% - 5px - 5px) !important;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
padding-right: 5px;
}
.countup-clz {
margin-left: 5px;
top: 63px;
left: 20px;
margin-top: 5px;
position: absolute;
margin-bottom: 5px;
margin-right: 5px;
}
.flex2-clz {
background-color: #19ca88;
margin-left: 5px;
padding-top: 10px;
padding-left: 5px;
width: calc(33.3333333333% - 5px - 5px) !important;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
padding-right: 5px;
}
.countup1-clz {
margin-left: 5px;
top: 63px;
left: 20px;
margin-top: 5px;
position: absolute;
margin-bottom: 5px;
margin-right: 5px;
}
.flex6-clz {
background-color: #858ff8;
margin-left: 5px;
padding-top: 10px;
padding-left: 5px;
width: calc(33.3333333333% - 5px - 5px) !important;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
padding-right: 5px;
}
.countup5-clz {
margin-left: 5px;
top: 63px;
left: 20px;
margin-top: 5px;
position: absolute;
margin-bottom: 5px;
margin-right: 5px;
}
.flex5-clz {
background-color: #fd9133;
margin-left: 5px;
padding-top: 10px;
padding-left: 5px;
width: calc(25% - 5px - 5px) !important;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
padding-right: 5px;
}
.countup4-clz {
margin-left: 5px;
top: 63px;
left: 20px;
margin-top: 5px;
position: absolute;
margin-bottom: 5px;
margin-right: 5px;
}
.flex4-clz {
background-color: #f6d10e;
margin-left: 5px;
padding-top: 10px;
padding-left: 5px;
width: calc(25% - 5px - 5px) !important;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
padding-right: 5px;
}
.countup3-clz {
margin-left: 5px;
top: 63px;
left: 20px;
margin-top: 5px;
position: absolute;
margin-bottom: 5px;
margin-right: 5px;
}
.flex3-clz {
background-color: #2e8cff;
margin-left: 5px;
padding-top: 10px;
padding-left: 5px;
width: calc(25% - 5px - 5px) !important;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
padding-right: 5px;
}
.countup2-clz {
margin-left: 5px;
top: 63px;
left: 20px;
margin-top: 5px;
position: absolute;
margin-bottom: 5px;
margin-right: 5px;
}
.flex8-clz {
background-color: #f6580e;
margin-left: 5px;
padding-top: 10px;
padding-left: 5px;
width: calc(25% - 5px - 5px) !important;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
padding-right: 5px;
}
.countup6-clz {
margin-left: 5px;
top: 63px;
left: 20px;
margin-top: 5px;
position: absolute;
margin-bottom: 5px;
margin-right: 5px;
}
.auto1-clz {
flex-shrink: 0;
top: 16px;
left: 1366px;
width: 519px !important;
position: absolute;
height: 279px !important;
}
.borderbox1-clz {
flex-shrink: 0;
top: 0px;
left: 0px;
display: flex;
width: 519px !important;
font-size: 21px !important;
position: absolute;
align-items: center;
height: 279px !important;
}
.text8-clz {
flex-shrink: 0;
color: #ffffff;
top: 8px;
left: 209px;
font-weight: bold;
display: flex;
width: 100px !important;
font-size: 14px !important;
position: absolute;
align-items: center;
height: 40px !important;
text-align: center;
}
.flex9-clz {
flex-shrink: 0;
top: 76px;
left: 29px;
width: 461px !important;
font-size: 27px !important;
position: absolute;
height: 203px !important;
}
.flex10-clz {
color: #ffffff;
top: 85px;
left: 56px;
font-size: 18px !important;
position: absolute;
}
.flex11-clz {
background-color: #37d2d4;
margin-left: 5px;
padding-top: 10px;
padding-left: 5px;
width: calc(33.3333333333% - 5px - 5px) !important;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
padding-right: 5px;
}
.countup7-clz {
margin-left: 5px;
top: 63px;
left: 20px;
margin-top: 5px;
position: absolute;
margin-bottom: 5px;
margin-right: 5px;
}
.flex12-clz {
background-color: #19ca88;
margin-left: 5px;
padding-top: 10px;
padding-left: 5px;
width: calc(33.3333333333% - 5px - 5px) !important;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
padding-right: 5px;
}
.countup8-clz {
margin-left: 5px;
top: 63px;
left: 20px;
margin-top: 5px;
position: absolute;
margin-bottom: 5px;
margin-right: 5px;
}
.flex13-clz {
background-color: #858ff8;
margin-left: 5px;
padding-top: 10px;
padding-left: 5px;
width: calc(33.3333333333% - 5px - 5px) !important;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
padding-right: 5px;
}
.countup9-clz {
margin-left: 5px;
top: 63px;
left: 20px;
margin-top: 5px;
position: absolute;
margin-bottom: 5px;
margin-right: 5px;
}
.flex14-clz {
background-color: #fd9133;
margin-left: 5px;
padding-top: 10px;
padding-left: 5px;
width: calc(25% - 5px - 5px) !important;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
padding-right: 5px;
}
.countup10-clz {
margin-left: 5px;
top: 63px;
left: 20px;
margin-top: 5px;
position: absolute;
margin-bottom: 5px;
margin-right: 5px;
}
.flex15-clz {
background-color: #f6d10e;
margin-left: 5px;
padding-top: 10px;
padding-left: 5px;
width: calc(25% - 5px - 5px) !important;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
padding-right: 5px;
}
.countup11-clz {
margin-left: 5px;
top: 63px;
left: 20px;
margin-top: 5px;
position: absolute;
margin-bottom: 5px;
margin-right: 5px;
}
.flex16-clz {
background-color: #2e8cff;
margin-left: 5px;
padding-top: 10px;
padding-left: 5px;
width: calc(25% - 5px - 5px) !important;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
padding-right: 5px;
}
.countup12-clz {
margin-left: 5px;
top: 63px;
left: 20px;
margin-top: 5px;
position: absolute;
margin-bottom: 5px;
margin-right: 5px;
}
.flex17-clz {
background-color: #f6580e;
margin-left: 5px;
padding-top: 10px;
padding-left: 5px;
width: calc(25% - 5px - 5px) !important;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
padding-right: 5px;
}
.countup13-clz {
margin-left: 5px;
top: 63px;
left: 20px;
margin-top: 5px;
position: absolute;
margin-bottom: 5px;
margin-right: 5px;
}
.image-clz {
flex-shrink: 0;
top: 16px;
left: 555px;
display: flex;
width: 802px !important;
font-size: 32px !important;
position: absolute;
align-items: center;
height: 67px !important;
}
.text16-clz {
flex-shrink: 0;
color: #ffffff;
top: 33px;
left: 702px;
font-weight: bold;
display: flex;
width: 508px !important;
font-size: 21px !important;
position: absolute;
align-items: center;
height: 33px !important;
text-align: center;
}
.auto2-clz {
flex-shrink: 0;
top: 329px;
left: 19px;
width: 543px !important;
position: absolute;
height: 391px !important;
}
.borderbox2-clz {
flex-shrink: 0;
top: 0px;
left: 0px;
display: flex;
width: 519px !important;
font-size: 21px !important;
position: absolute;
align-items: center;
height: 391px !important;
}
.text17-clz {
flex-shrink: 0;
color: #ffffff;
top: 12px;
left: 210px;
font-weight: bold;
display: flex;
width: 100px !important;
font-size: 14px !important;
position: absolute;
align-items: center;
height: 40px !important;
text-align: center;
}
.column-clz {
flex-shrink: 0;
top: 81px;
left: 44px;
display: flex;
width: 434px !important;
font-size: 17px !important;
position: absolute;
align-items: center;
height: 282px !important;
}
.borderbox3-clz {
flex-shrink: 0;
top: 329px;
left: 1366px;
display: flex;
width: 519px !important;
position: absolute;
align-items: center;
height: 391px !important;
}
.barchart-clz {
flex-shrink: 0;
top: 408px;
left: 1408px;
display: flex;
width: 445px !important;
position: absolute;
align-items: center;
height: 281px !important;
}
.funnel-clz {
flex-shrink: 0;
top: 110px;
left: 604px;
display: flex;
width: 698px !important;
position: absolute;
align-items: center;
height: 939px !important;
}
.borderbox4-clz {
flex-shrink: 0;
top: 754px;
left: 19px;
display: flex;
width: 519px !important;
position: absolute;
align-items: center;
height: 315px !important;
}
.scrollboard-clz {
flex-shrink: 0;
top: 780.5px;
left: 42px;
display: flex;
width: 473px !important;
position: absolute;
align-items: center;
height: 262px !important;
}
.borderbox5-clz {
flex-shrink: 0;
top: 741px;
left: 1366px;
display: flex;
width: 519px !important;
position: absolute;
align-items: center;
height: 315px !important;
}
.pie-clz {
flex-shrink: 0;
top: 769.5px;
left: 1403px;
display: flex;
width: 445px !important;
position: absolute;
align-items: center;
height: 258px !important;
}
.container {
padding: 0px;
margin: 0px;
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.container {
background-color: #1d2b56;
font-size: 12px;
}
</style>
</body>
</html>
低代码爱好者的网上家园
更多推荐
4
0- 0
已为社区贡献8条内容
所有评论(0)