15 changed files with 368 additions and 1091 deletions
|
After Width: | Height: | Size: 804 KiB |
|
After Width: | Height: | Size: 71 KiB |
@ -0,0 +1,3 @@ |
|||
<template> |
|||
<div class="buttom"></div> |
|||
</template> |
|||
@ -0,0 +1,5 @@ |
|||
<template> |
|||
<div class="topnav"> |
|||
顶部信息 |
|||
</div> |
|||
</template> |
|||
@ -1,55 +0,0 @@ |
|||
<template> |
|||
<div id="bottomLeft"> |
|||
<div class="bg-color-black"> |
|||
<div class="d-flex pt-2 pl-2"> |
|||
<span style="color:#5cd9e8"> |
|||
<icon name="chart-bar"></icon> |
|||
</span> |
|||
<div class="d-flex"> |
|||
<span class="fs-xl text mx-2">数据统计图</span> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<bottomLeftChart /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import bottomLeftChart from "@/components/echart/bottom/bottomLeftChart"; |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
components: { |
|||
bottomLeftChart |
|||
}, |
|||
mounted() {}, |
|||
methods: {} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
#bottomLeft { |
|||
padding: 0.3rem 0.2rem; |
|||
height: 6.5rem; |
|||
min-width: 3.75rem; |
|||
border-radius: 0.0625rem; |
|||
.bg-color-black { |
|||
height: 6.0625rem; |
|||
border-radius: 0.125rem; |
|||
} |
|||
.text { |
|||
color: #c3cbde; |
|||
} |
|||
.chart-box { |
|||
margin-top: 0.2rem; |
|||
width: 2.125rem; |
|||
height: 2.125rem; |
|||
.active-ring-name { |
|||
padding-top: 0.125rem; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,62 +0,0 @@ |
|||
<template> |
|||
<div id="bottomRight"> |
|||
<div class="bg-color-black"> |
|||
<div class="d-flex pt-2 pl-2"> |
|||
<span style="color:#5cd9e8"> |
|||
<icon name="chart-area"></icon> |
|||
</span> |
|||
<div class="d-flex"> |
|||
<span class="fs-xl text mx-2">工单修复以及满意度统计图</span> |
|||
<div class="decoration2"> |
|||
<dv-decoration-2 :reverse="true" style="width:5px;height:480px;" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<bottomRightChart /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import bottomRightChart from "@/components/echart/bottom/bottomRightChart"; |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
components: { |
|||
bottomRightChart |
|||
}, |
|||
mounted() {}, |
|||
methods: {} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
#bottomRight { |
|||
padding: 0.2rem 0.2rem 0; |
|||
height: 6.5rem; |
|||
min-width: 3.75rem; |
|||
border-radius: 0.0625rem; |
|||
.bg-color-black { |
|||
height: 6.1875rem; |
|||
border-radius: 0.125rem; |
|||
} |
|||
.text { |
|||
color: #c3cbde; |
|||
} //下滑线动态 |
|||
.decoration2 { |
|||
position: absolute; |
|||
right: 0.125rem; |
|||
} |
|||
.chart-box { |
|||
margin-top: 0.2rem; |
|||
width: 2.125rem; |
|||
height: 2.125rem; |
|||
.active-ring-name { |
|||
padding-top: 0.125rem; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,228 +0,0 @@ |
|||
<template> |
|||
<div id="center"> |
|||
<div class="up"> |
|||
<div class="bg-color-black item" v-for="item in titleItem" :key="item.title"> |
|||
<p class="ml-3 colorBlue fw-b">{{item.title}}</p> |
|||
<div> |
|||
<dv-digital-flop :config="item.number" style="width:1.25rem;height:.625rem;" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="down"> |
|||
<div class="ranking bg-color-black"> |
|||
<span style="color:#5cd9e8"> |
|||
<icon name="align-left"></icon> |
|||
</span> |
|||
<span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span> |
|||
<dv-scroll-ranking-board :config="ranking" style="height:2.75rem" /> |
|||
</div> |
|||
<div class="percent"> |
|||
<div class="item bg-color-black"> |
|||
<span>今日任务通过率</span> |
|||
<centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" /> |
|||
</div> |
|||
<div class="item bg-color-black"> |
|||
<span>今日任务达标率</span> |
|||
<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" /> |
|||
</div> |
|||
<div class="water"> |
|||
<dv-water-level-pond :config="water" style="height: 1.5rem" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import centerChart from "@/components/echart/center/centerChartRate"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
titleItem: [ |
|||
{ |
|||
title: "今年累计任务建次数", |
|||
number: { |
|||
number: [120], |
|||
toFixed: 1, |
|||
content: "{nt}" |
|||
} |
|||
}, |
|||
{ |
|||
title: "本月累计任务次数", |
|||
number: { |
|||
number: [18], |
|||
toFixed: 1, |
|||
content: "{nt}" |
|||
} |
|||
}, |
|||
{ |
|||
title: "今日累计任务次数", |
|||
number: { |
|||
number: [2], |
|||
toFixed: 1, |
|||
content: "{nt}" |
|||
} |
|||
}, |
|||
{ |
|||
title: "今年失败任务次数", |
|||
number: { |
|||
number: [14], |
|||
toFixed: 1, |
|||
content: "{nt}" |
|||
} |
|||
}, |
|||
{ |
|||
title: "今年成功任务次数", |
|||
number: { |
|||
number: [106], |
|||
toFixed: 1, |
|||
content: "{nt}" |
|||
} |
|||
}, |
|||
{ |
|||
title: "今年达标任务个数", |
|||
number: { |
|||
number: [100], |
|||
toFixed: 1, |
|||
content: "{nt}" |
|||
} |
|||
} |
|||
], |
|||
ranking: { |
|||
data: [ |
|||
{ |
|||
name: "周口", |
|||
value: 55 |
|||
}, |
|||
{ |
|||
name: "南阳", |
|||
value: 120 |
|||
}, |
|||
{ |
|||
name: "西峡", |
|||
value: 78 |
|||
}, |
|||
{ |
|||
name: "驻马店", |
|||
value: 66 |
|||
}, |
|||
{ |
|||
name: "新乡", |
|||
value: 80 |
|||
}, |
|||
{ |
|||
name: "新乡", |
|||
value: 80 |
|||
}, |
|||
{ |
|||
name: "新乡", |
|||
value: 80 |
|||
}, |
|||
{ |
|||
name: "新乡", |
|||
value: 80 |
|||
} |
|||
], |
|||
waitTime: 4000, |
|||
carousel: "page", |
|||
unit: "份" |
|||
}, |
|||
water: { |
|||
data: [24, 45], |
|||
shape: "roundRect", |
|||
formatter: "{value}%", |
|||
waveNum: 3 |
|||
}, |
|||
// 通过率和达标率的组件复用数据 |
|||
rate: [ |
|||
{ |
|||
id: "centerRate1", |
|||
tips: 60, |
|||
colorData: { |
|||
textStyle: "#3fc0fb", |
|||
series: { |
|||
color: ["#00bcd44a", "transparent"], |
|||
dataColor: { |
|||
normal: "#03a9f4", |
|||
shadowColor: "#97e2f5" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
id: "centerRate2", |
|||
tips: 40, |
|||
colorData: { |
|||
textStyle: "#67e0e3", |
|||
series: { |
|||
color: ["#faf3a378", "transparent"], |
|||
dataColor: { |
|||
normal: "#ff9800", |
|||
shadowColor: "#fcebad" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
}, |
|||
components: { |
|||
centerChart |
|||
// centerChart1, |
|||
// centerChart2 |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
#center { |
|||
display: flex; |
|||
flex-direction: column; |
|||
.up { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-around; |
|||
.item { |
|||
border-radius: 0.0625rem; |
|||
padding-top: 0.2rem; |
|||
margin-top: 0.1rem; |
|||
width: 32%; |
|||
height: 0.875rem; |
|||
} |
|||
} |
|||
.down { |
|||
padding: 0.07rem 0.05rem; |
|||
padding-bottom: 0; |
|||
width: 100%; |
|||
display: flex; |
|||
height: 3.1875rem; |
|||
justify-content: space-between; |
|||
.bg-color-black { |
|||
border-radius: 0.0625rem; |
|||
} |
|||
.ranking { |
|||
padding: 0.125rem; |
|||
width: 59%; |
|||
} |
|||
.percent { |
|||
width: 40%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.item { |
|||
width: 50%; |
|||
height: 1.5rem; |
|||
span { |
|||
margin-top: 0.0875rem; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
.water { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,166 +0,0 @@ |
|||
<template> |
|||
<div id="centreLeft1"> |
|||
<div class="bg-color-black"> |
|||
<div class="d-flex pt-2 pl-2"> |
|||
<span style="color:#5cd9e8"> |
|||
<icon name="chart-bar"></icon> |
|||
</span> |
|||
<div class="d-flex"> |
|||
<span class="fs-xl text mx-2">任务通过率</span> |
|||
<dv-decoration-3 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" /> |
|||
</div> |
|||
</div> |
|||
<div class="d-flex jc-center"> |
|||
<centreLeft1Chart /> |
|||
</div> |
|||
<!-- 4个主要的数据 --> |
|||
<div class="bottom-data"> |
|||
<div class="item-box" v-for="(item,index) in numberData" :key="index"> |
|||
<div class="d-flex"> |
|||
<span class="coin">￥</span> |
|||
<dv-digital-flop :config="item.number" style="width:2.5rem;height:.625rem;" /> |
|||
</div> |
|||
<p class="text" style="text-align: center;"> |
|||
{{item.text}} |
|||
<span class="colorYellow">(件)</span> |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import centreLeft1Chart from "@/components/echart/centerLeft2/centreLeft1Chart"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
config: { |
|||
lineWidth: 30, |
|||
activeRadius: "80%", |
|||
radius: "75%", |
|||
activeTimeGap: 2000, |
|||
data: [ |
|||
{ |
|||
name: "周口", |
|||
value: 55 |
|||
}, |
|||
{ |
|||
name: "南阳", |
|||
value: 120 |
|||
}, |
|||
{ |
|||
name: "西峡", |
|||
value: 78 |
|||
}, |
|||
{ |
|||
name: "驻马店", |
|||
value: 66 |
|||
}, |
|||
{ |
|||
name: "新乡", |
|||
value: 80 |
|||
} |
|||
] |
|||
}, |
|||
numberData: [ |
|||
{ |
|||
number: { |
|||
number: [15], |
|||
toFixed: 1, |
|||
content: "{nt}" |
|||
}, |
|||
text: "今日构建总量" |
|||
}, |
|||
{ |
|||
number: { |
|||
number: [1144], |
|||
toFixed: 1, |
|||
content: "{nt}" |
|||
}, |
|||
text: "总共完成数量" |
|||
}, |
|||
{ |
|||
number: { |
|||
number: [361], |
|||
toFixed: 1, |
|||
content: "{nt}" |
|||
}, |
|||
text: "正在编译数量" |
|||
}, |
|||
{ |
|||
number: { |
|||
number: [157], |
|||
toFixed: 1, |
|||
content: "{nt}" |
|||
}, |
|||
text: "未通过数量" |
|||
} |
|||
] |
|||
}; |
|||
}, |
|||
components: { |
|||
centreLeft1Chart |
|||
}, |
|||
mounted() { |
|||
this.changeTiming(); |
|||
}, |
|||
methods: { |
|||
changeTiming() { |
|||
setInterval(() => { |
|||
this.changeNumber(); |
|||
}, 3000); |
|||
}, |
|||
changeNumber() { |
|||
this.numberData.forEach((item, index) => { |
|||
item.number.number[0] += ++index; |
|||
item.number = { ...item.number }; |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
#centreLeft1 { |
|||
padding: 0.2rem; |
|||
height: 5.125rem; |
|||
min-width: 3.75rem; |
|||
border-radius: 0.0625rem; |
|||
.bg-color-black { |
|||
height: 4.8125rem; |
|||
border-radius: 0.125rem; |
|||
} |
|||
.text { |
|||
color: #c3cbde; |
|||
} |
|||
.chart-box { |
|||
margin-top: 0.2rem; |
|||
width: 2.125rem; |
|||
height: 2.125rem; |
|||
.active-ring-name { |
|||
padding-top: 0.125rem; |
|||
} |
|||
} |
|||
|
|||
.bottom-data { |
|||
.item-box { |
|||
float: right; |
|||
position: relative; |
|||
width: 50%; |
|||
color: #d3d6dd; |
|||
// 金币 |
|||
.coin { |
|||
position: absolute; |
|||
left: 0.1rem; |
|||
top: 0.2125rem; |
|||
font-size: 0.25rem; |
|||
color: #ffc107; |
|||
} |
|||
.colorYellow { |
|||
color: yellowgreen; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,56 +0,0 @@ |
|||
<template> |
|||
<div id="centreLeft1"> |
|||
<div class="bg-color-black"> |
|||
<div class="d-flex pt-2 pl-2"> |
|||
<span style="color:#5cd9e8"> |
|||
<icon name="chart-pie"></icon> |
|||
</span> |
|||
<div class="d-flex"> |
|||
<span class="fs-xl text mx-2">数据情况雷达图</span> |
|||
<dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" /> |
|||
</div> |
|||
</div> |
|||
<div class="d-flex jc-center"> |
|||
<centreLeft2Chart /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import centreLeft2Chart from "@/components/echart/centerLeft2/centreLeft2Chart"; |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
components: { |
|||
centreLeft2Chart |
|||
}, |
|||
mounted() {}, |
|||
methods: {} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
#centreLeft1 { |
|||
padding: 0.2rem; |
|||
height: 5.125rem; |
|||
min-width: 3.75rem; |
|||
border-radius: 0.0625rem; |
|||
.bg-color-black { |
|||
height: 4.8125rem; |
|||
border-radius: 0.125rem; |
|||
} |
|||
.text { |
|||
color: #c3cbde; |
|||
} |
|||
.chart-box { |
|||
margin-top: 0.2rem; |
|||
width: 2.125rem; |
|||
height: 2.125rem; |
|||
.active-ring-name { |
|||
padding-top: 0.125rem; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,72 +0,0 @@ |
|||
<template> |
|||
<div id="centreRight1"> |
|||
<div class="bg-color-black"> |
|||
<div class="d-flex pt-2 pl-2"> |
|||
<span style="color:#5cd9e8"> |
|||
<icon name="chart-line"></icon> |
|||
</span> |
|||
<div class="d-flex"> |
|||
<span class="fs-xl text mx-2">任务完成排行榜</span> |
|||
</div> |
|||
</div> |
|||
<div class="d-flex jc-center body-box"> |
|||
<dv-scroll-board :config="config" style="width:3.375rem;height:4.28rem" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
config: { |
|||
header: ["组件", "分支", "覆盖率"], |
|||
data: [ |
|||
["组件1", "dev-1", "<span class='colorGrass'>↑75%</span>"], |
|||
["组件2", "dev-2", "<span class='colorRed'>↓33%</span>"], |
|||
["组件3", "dev-3", "<span class='colorGrass'>↑100%</span>"], |
|||
["组件4", "rea-1", "<span class='colorGrass'>↑94%</span>"], |
|||
["组件5", "rea-2", "<span class='colorGrass'>↑95%</span>"], |
|||
["组件6", "fix-2", "<span class='colorGrass'>↑63%</span>"], |
|||
["组件7", "fix-4", "<span class='colorGrass'>↑84%</span>"], |
|||
["组件8", "fix-7", "<span class='colorRed'>↓46%</span>"], |
|||
["组件9", "dev-2", "<span class='colorRed'>↓13%</span>"], |
|||
["组件10", "dev-9", "<span class='colorGrass'>↑76%</span>"] |
|||
], |
|||
rowNum: 7, //表格行数 |
|||
headerHeight: 35, |
|||
headerBGC: "#0f1325", //表头 |
|||
oddRowBGC: "#0f1325", //奇数行 |
|||
evenRowBGC: "#171c33", //偶数行 |
|||
index: true, |
|||
columnWidth: [50], |
|||
align: ["center"] |
|||
} |
|||
}; |
|||
}, |
|||
components: {}, |
|||
mounted() {}, |
|||
methods: {} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
#centreRight1 { |
|||
padding: 0.2rem; |
|||
height: 5.125rem; |
|||
min-width: 3.75rem; |
|||
border-radius: 0.0625rem; |
|||
.bg-color-black { |
|||
height: 4.8125rem; |
|||
border-radius: 0.125rem; |
|||
} |
|||
.text { |
|||
color: #c3cbde; |
|||
} |
|||
.body-box { |
|||
border-radius: 0.125rem; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,76 +0,0 @@ |
|||
<template> |
|||
<div id="centreRight2"> |
|||
<div class="bg-color-black"> |
|||
<div class="d-flex pt-2 pl-2"> |
|||
<span style="color:#5cd9e8"> |
|||
<icon name="align-left"></icon> |
|||
</span> |
|||
<span class="fs-xl text mx-2">产品销售渠道分析</span> |
|||
</div> |
|||
<div class="d-flex jc-center body-box" style=" margin-top: 0;"> |
|||
<dv-capsule-chart :config="config" style="width: 100%;height:2rem" /> |
|||
<!-- ---------------------------------------- --> |
|||
<centreRight2Chart1></centreRight2Chart1> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import centreRight2Chart1 from "@/components/echart/centreRight2/centreRight2Chart1"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
config: { |
|||
data: [ |
|||
{ |
|||
name: "南阳", |
|||
value: 167 |
|||
}, |
|||
{ |
|||
name: "周口", |
|||
value: 67 |
|||
}, |
|||
{ |
|||
name: "漯河", |
|||
value: 123 |
|||
}, |
|||
{ |
|||
name: "郑州", |
|||
value: 55 |
|||
}, |
|||
{ |
|||
name: "西峡", |
|||
value: 98 |
|||
} |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
components: { centreRight2Chart1 }, |
|||
mounted() {}, |
|||
methods: {} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
#centreRight2 { |
|||
padding: 0.0625rem; |
|||
height: 5rem; |
|||
min-width: 3.75rem; |
|||
border-radius: 0.0625rem; |
|||
.bg-color-black { |
|||
padding: 0.0625rem; |
|||
height: 5.0625rem; |
|||
border-radius: 0.125rem; |
|||
} |
|||
.text { |
|||
color: #c3cbde; |
|||
} |
|||
.body-box { |
|||
border-radius: 0.125rem; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,137 +1,6 @@ |
|||
<template> |
|||
<div id="index"> |
|||
<dv-full-screen-container class="bg"> |
|||
<dv-loading v-if="loading">Loading...</dv-loading> |
|||
<div v-else class="host-body"> |
|||
<div class="d-flex jc-center"> |
|||
<dv-decoration-10 style="width:33.3%;height:.0625rem;" /> |
|||
<div class="d-flex jc-center"> |
|||
<dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" /> |
|||
<div class="title"> |
|||
<span class="title-text">大数据可视化平台</span> |
|||
<dv-decoration-6 |
|||
class="title-bototm" |
|||
:reverse="true" |
|||
:color="['#50e3c2', '#67a1e5']" |
|||
style="width:3.125rem;height:.1rem;" |
|||
/> |
|||
</div> |
|||
<dv-decoration-8 |
|||
:reverse="true" |
|||
:color="['#568aea', '#000000']" |
|||
style="width:2.5rem;height:.625rem;" |
|||
/> |
|||
</div> |
|||
<dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" /> |
|||
</div> |
|||
<div id="index"> |
|||
|
|||
<!-- 第二行 --> |
|||
<div class="d-flex jc-between px-2"> |
|||
<div class="d-flex" style="width: 40%"> |
|||
<div |
|||
class="react-right ml-4" |
|||
style="width: 6.25rem; text-align: left;background-color: #0f1325;" |
|||
> |
|||
<span class="react-before"></span> |
|||
<span class="text">数据分析1</span> |
|||
</div> |
|||
<div class="react-right ml-3" style="background-color: #0f1325;"> |
|||
<span class="text colorBlue">数据分析2</span> |
|||
</div> |
|||
</div> |
|||
<div style="width: 40%" class="d-flex"> |
|||
<div class="react-left bg-color-blue mr-3"> |
|||
<span class="text fw-b">vue-big-screen</span> |
|||
</div> |
|||
<div |
|||
class="react-left mr-4" |
|||
style="width: 6.25rem; background-color: #0f1325; text-align: right;" |
|||
> |
|||
<span class="react-after"></span> |
|||
<span class="text">2020年03月16日 周一 12:00</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="body-box"> |
|||
<!-- 第三行数据 --> |
|||
<div class="content-box"> |
|||
<div> |
|||
<dv-border-box-12> |
|||
<centerLeft1 /> |
|||
</dv-border-box-12> |
|||
</div> |
|||
<div> |
|||
<dv-border-box-12> |
|||
<centerLeft2 /> |
|||
</dv-border-box-12> |
|||
</div> |
|||
<!-- 中间 --> |
|||
<div> |
|||
<center /> |
|||
</div> |
|||
<!-- 中间 --> |
|||
<div> |
|||
<centerRight2 /> |
|||
</div> |
|||
<div> |
|||
<dv-border-box-13> |
|||
<centerRight1 /> |
|||
</dv-border-box-13> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 第四行数据 --> |
|||
<div class="bototm-box"> |
|||
<dv-border-box-13> |
|||
<bottomLeft /> |
|||
</dv-border-box-13> |
|||
<dv-border-box-12> |
|||
<bottomRight /> |
|||
</dv-border-box-12> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</dv-full-screen-container> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import centerLeft1 from "./centerLeft1"; |
|||
import centerLeft2 from "./centerLeft2"; |
|||
import centerRight1 from "./centerRight1"; |
|||
import centerRight2 from "./centerRight2"; |
|||
import center from "./center"; |
|||
import bottomLeft from "./bottomLeft"; |
|||
import bottomRight from "./bottomRight"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
loading: true |
|||
}; |
|||
}, |
|||
components: { |
|||
centerLeft1, |
|||
centerLeft2, |
|||
centerRight1, |
|||
centerRight2, |
|||
center, |
|||
bottomLeft, |
|||
bottomRight |
|||
}, |
|||
mounted() { |
|||
this.cancelLoading(); |
|||
}, |
|||
methods: { |
|||
cancelLoading() { |
|||
setTimeout(() => { |
|||
this.loading = false; |
|||
}, 500); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "../assets/scss/index.scss"; |
|||
</style> |
|||
总览的内容 |
|||
</div> |
|||
</template> |
|||
Loading…
Reference in new issue