首个数据图表

This commit is contained in:
MTrunning
2020-03-17 01:58:10 +08:00
parent 93d7e98cee
commit 8736047933
8 changed files with 650 additions and 2 deletions
+92 -2
View File
@@ -1,10 +1,100 @@
<template>
<div>主页</div>
<div id="index">
<dv-full-screen-container class="bg">
<dv-loading v-if="loading">Loading...</dv-loading>
<div class="host-body">
<div class="d-flex jc-center">
<dv-decoration-10 style="width:33.3%;height:5px;" />
<div class="d-flex jc-center">
<dv-decoration-8 :color="['#568aea', '#000000']" style="width:200px;height:50px;" />
<div class="title">
<span class="title-text">SKCI数据可视化平台</span>
<dv-decoration-6
class="title-bototm"
:reverse="true"
:color="['#50e3c2', '#67a1e5']"
style="width:250px;height:8px;"
/>
</div>
<dv-decoration-8
:reverse="true"
:color="['#568aea', '#000000']"
style="width:200px;height:50px;"
/>
</div>
<dv-decoration-10 style="width:33.3%;height:5px;" />
</div>
<!-- 第二行 -->
<div class="d-flex jc-between mt-2 px-2">
<div class="d-flex" style="width: 40%">
<div class="react-right bg-color-black ml-4" style="width: 500px; ">
<span class="react-before"></span>
<span class="text">构建数据分析</span>
</div>
<div class="react-right bg-color-black ml-3">
<span class="text colorBlue">构建数据分析</span>
</div>
</div>
<div style="width: 40%" class="d-flex">
<div class="react-left bg-color-black bg-color-blue mr-3">
<span class="text fw-b">构建数据分析</span>
</div>
<div class="react-left bg-color-black mr-4" style="width: 500px;">
<span class="react-after"></span>
<span class="text colorBlue">2020年03月16日</span>
</div>
</div>
</div>
<div class="body-box">
<!-- 第三行数据 -->
<div class="content-box">
<div>
<dv-border-box-12>
<centreLeft1 />
</dv-border-box-12>
</div>
<div></div>
<div class="bg-color-blue"></div>
<div></div>
<div class="bg-color-blue"></div>
<div></div>
</div>
<!-- 第四行数据 -->
<div class="bototm-box">
<div></div>
<div></div>
</div>
</div>
</div>
</dv-full-screen-container>
</div>
</template>
<script>
export default {};
import centreLeft1 from "./centreLeft1";
export default {
data() {
return {
loading: false
};
},
components: { centreLeft1 },
mounted() {
this.cancelLoading();
},
methods: {
cancelLoading() {
setTimeout(() => {
this.loading = false;
}, 2000);
}
}
};
</script>
<style lang="scss" scoped>
@import "../assets/scss/index.scss";
</style>