在数字化时代，毕业设计不仅是对学生专业知识的综合检验，更是创新思维与技术实践能力的重要展现。然而，面对繁琐的开发流程和复杂的代码编写，许多学生在毕业设计的道路上感到力不从心。幸运的是，DIYGW可视化代码平台的出现，为毕业设计开发带来了革命性的改变。
功能特点
DIYGW可视化代码平台是一个集设计、开发、测试于一体的综合性工具，专为解决毕业设计开发过程中的痛点而生。它采用拖拽式、模块化的设计方式，让用户无需深入掌握复杂的编程知识，即可快速构建出功能完善、界面美观的应用。这一特性极大地降低了开发门槛，使得即使是非专业开发人员，也能轻松上手，将自己的创意转化为现实。
组件库、页面库打造个性界面
在毕业设计中，DIYGW可视化代码平台提供了丰富的组件库和模板，涵盖了宫格列表、图文菜单、卡片、列表、轮播图、导航栏等多种常用元素。这些组件和模板不仅可以帮助初学者快速上手设计，还能有效减少设计师的工作量，提高设计效率。同时，平台还支持自定义样式和布局，使得设计师能够充分发挥创意，打造出符合毕业设计要求且具有个性化的界面。
跨平台应用开发
除了强大的设计功能外，DIYGW可视化代码平台还具备出色的跨平台支持能力。它支持一次设计，多平台发布，包括微信小程序、支付宝小程序、H5、WebApp等多种平台。这一功能不仅满足了多样化的应用需求，还大大降低了跨平台开发的难度和成本。对于毕业设计而言，这意味着学生可以利用DIYGW可视化代码平台，轻松地将自己的作品部署到多个平台上，从而扩大作品的影响力和受众范围。
对接任意第三方HttpApi
值得一提的是，DIYGW可视化代码平台还提供了直观易用的API接口测试和调试工具，支持快速集成PHP、JAVA、PYTHON、NODEJS、GO等提供的Http Api。通过图形化的界面，开发人员可以轻松地查看和理解API的定义、参数、请求示例以及返回值等信息。这一功能极大地简化了API的开发和调试过程，提高了开发效率。在毕业设计中，这意味着学生可以更加专注于业务逻辑的实现，而无需花费大量时间在API的调试上。
所见即所得的工具
在毕业设计的实践中，DIYGW可视化代码平台已经展现出了其强大的优势和价值。许多学生利用这一平台，成功地将自己的创意转化为功能完善、界面美观的应用。这些应用不仅获得了评委和导师的高度认可，还在实际应用中取得了显著的成效。
本地生成源码运行效果
可视化大屏系统
DIYGW可视化代码平台还支持图形组件的扩展，可以方便地建立可视化大屏系统。这些系统可以实时展示业务数据，帮助企业管理者更好地掌握业务动态，做出更加精准的决策。
<template>
<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>
</template>
<script setup name="index">
import { NextLoading } from '@/utils/loading';
import { ElMessageBox, ElMessage } from 'element-plus';
import { ref, toRefs, reactive, onMounted, getCurrentInstance, onUnmounted } from 'vue';
import qiunVueUcharts from '@qiun/vue-ucharts';
import { useRouter, useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '@/stores/userInfo';
const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const globalOption = ref(route.query);
const getParamData = (e, row) => {
row = row || {};
let dataset = e.currentTarget ? e.currentTarget.dataset : e;
if (row) {
dataset = Object.assign(dataset, row);
}
return dataset;
};
const navigateTo = (e, row) => {
let dataset = getParamData(e, row);
let { type } = dataset;
if ((type == 'page' || type == 'inner' || type == 'href') && dataset.url) {
router.push({
path: (dataset.url.startsWith('/') ? '' : '/') + dataset.url,
query: dataset
});
} else {
ElMessage.error('待实现点击事件');
}
};
const state = reactive({
userInfo: userInfos.value,
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 }
]
}
});
const {
userInfo,
pieData,
countup7End,
countup10Start,
countup4Start,
countup1Start,
countup13Start,
countup11End,
countup12Start,
countup13End,
countupEnd,
pieOpts,
countup1End,
columnData,
countup7Start,
countup9End,
countup5End,
countup3End,
funnelOpts,
scrollboardConfig,
countup6End,
countup3Start,
countup8End,
barchartData,
countupStart,
funnelData,
columnOpts,
countup11Start,
countup9Start,
countup10End,
countup6Start,
countup12End,
barchartOpts,
countup5Start,
countup8Start,
countup2Start,
countup2End,
countup4End
} = toRefs(state);
const init = async () => {};
// 页面加载时
onMounted(async () => {
await init();
NextLoading.done();
});
// 页面卸载时
onUnmounted(() => {});
</script>
<style lang="scss" scoped>
.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>
综上所述，DIYGW可视化代码平台以其拖拽式、模块化的开发方式、丰富的组件库和模板、出色的跨平台支持能力、直观易用的API接口测试和调试工具以及多人合作开发功能，为毕业设计开发带来了革命性的改变。它不仅降低了开发门槛，提高了开发效率和团队协作效率，还满足了多样化的应用需求。因此，对于正在进行毕业设计的学生而言，DIYGW可视化代码平台无疑是一个值得尝试的高效工具。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
