tao.zhang/tianyi_DataV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成屏幕适配功能

Browse Source
This commit is contained in:
MTrunning
2020-05-06 22:02:46 +08:00
parent f2b118ed0b
commit 0a869eeb64
20 changed files with 351 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/bottomLeft.vue
+12 -13
View File
@@ -1,6 +1,6 @@
<template>
<div id="bottomLeft">
<div class="bg-color-black ">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8">
<icon name="chart-bar"></icon>
@@ -25,31 +25,30 @@ export default {
components: {
bottomLeftChart
},
mounted() {
},
mounted() {},
methods: {}
};
</script>
<style lang="scss">
#bottomLeft {
padding: 1.5rem 1rem;
height: 520px;
min-width: 300px;
border-radius: 5px;
padding: 0.3rem 0.2rem;
height: 6.5rem;
min-width: 3.75rem;
border-radius: 0.0625rem;
.bg-color-black {
height: 485px;
border-radius: 10px;
height: 6.0625rem;
border-radius: 0.125rem;
}
.text {
color: #c3cbde;
}
.chart-box {
margin-top: 1rem;
width: 170px;
height: 170px;
margin-top: 0.2rem;
width: 2.125rem;
height: 2.125rem;
.active-ring-name {
padding-top: 10px;
padding-top: 0.125rem;
}
}
}
src/views/bottomRight.vue
+11 -11
View File
@@ -35,27 +35,27 @@ export default {
<style lang="scss">
#bottomRight {
padding: 1rem 1rem 0rem;
height: 520px;
min-width: 300px;
border-radius: 5px;
padding: 0.2rem 0.2rem 0;
height: 6.5rem;
min-width: 3.75rem;
border-radius: 0.0625rem;
.bg-color-black {
height: 495px;
border-radius: 10px;
height: 6.1875rem;
border-radius: 0.125rem;
}
.text {
color: #c3cbde;
} //下滑线动态
.decoration2 {
position: absolute;
right: 10px;
right: 0.125rem;
}
.chart-box {
margin-top: 1rem;
width: 170px;
height: 170px;
margin-top: 0.2rem;
width: 2.125rem;
height: 2.125rem;
.active-ring-name {
padding-top: 10px;
padding-top: 0.125rem;
}
}
}
src/views/center.vue
+14 -14
View File
@@ -4,7 +4,7 @@
<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:100px;height:50px;" />
<dv-digital-flop :config="item.number" style="width:1.25rem;height:.625rem;" />
</div>
</div>
</div>
@@ -14,7 +14,7 @@
<icon name="align-left"></icon>
</span>
<span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>
<dv-scroll-ranking-board :config="ranking" style="height:220px" />
<dv-scroll-ranking-board :config="ranking" style="height:2.75rem" />
</div>
<div class="percent">
<div class="item bg-color-black">
@@ -26,7 +26,7 @@
<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: 120px" />
<dv-water-level-pond :config="water" style="height: 1.5rem" />
</div>
</div>
</div>
@@ -185,25 +185,25 @@ export default {
flex-wrap: wrap;
justify-content: space-around;
.item {
border-radius: 5px;
padding-top: 1rem;
margin-top: 0.5rem;
border-radius: 0.0625rem;
padding-top: 0.2rem;
margin-top: 0.1rem;
width: 32%;
height: 70px;
height: 0.875rem;
}
}
.down {
padding: 4px;
padding-bottom: 0px;
padding: 0.07rem 0.05rem;
padding-bottom: 0;
width: 100%;
display: flex;
height: 255px;
height: 3.1875rem;
justify-content: space-between;
.bg-color-black {
border-radius: 5px;
border-radius: 0.0625rem;
}
.ranking {
padding: 10px;
padding: 0.125rem;
width: 59%;
}
.percent {
@@ -212,9 +212,9 @@ export default {
flex-wrap: wrap;
.item {
width: 50%;
height: 120px;
height: 1.5rem;
span {
margin-top: 7px;
margin-top: 0.0875rem;
display: flex;
justify-content: center;
}
src/views/centreLeft1.vue → src/views/centerLeft1.vue
+15 -15
View File
@@ -7,7 +7,7 @@
</span>
<div class="d-flex">
<span class="fs-xl text mx-2">任务通过率</span>
<dv-decoration-3 style="width:100px;height:20px; position:relative;top:-3px;" />
<dv-decoration-3 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
</div>
</div>
<div class="d-flex jc-center">
@@ -18,7 +18,7 @@
<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:200px;height:50px;" />
<dv-digital-flop :config="item.number" style="width:2.5rem;height:.625rem;" />
</div>
<p class="text" style="text-align: center;">
{{item.text}}
@@ -123,23 +123,23 @@ export default {
<style lang="scss">
#centreLeft1 {
padding: 1rem;
height: 410px;
min-width: 300px;
border-radius: 5px;
padding: 0.2rem;
height: 5.125rem;
min-width: 3.75rem;
border-radius: 0.0625rem;
.bg-color-black {
height: 385px;
border-radius: 10px;
height: 4.8125rem;
border-radius: 0.125rem;
}
.text {
color: #c3cbde;
}
.chart-box {
margin-top: 1rem;
width: 170px;
height: 170px;
margin-top: 0.2rem;
width: 2.125rem;
height: 2.125rem;
.active-ring-name {
padding-top: 10px;
padding-top: 0.125rem;
}
}
@@ -152,9 +152,9 @@ export default {
// 金币
.coin {
position: absolute;
left: 0px;
top: 17px;
font-size: 2rem;
left: 0.1rem;
top: 0.2125rem;
font-size: 0.25rem;
color: #ffc107;
}
.colorYellow {
src/views/centreLeft2.vue → src/views/centerLeft2.vue
+11 -11
View File
@@ -7,7 +7,7 @@
</span>
<div class="d-flex">
<span class="fs-xl text mx-2">数据情况雷达图</span>
<dv-decoration-1 style="width:100px;height:20px; position:relative;top:-3px;" />
<dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
</div>
</div>
<div class="d-flex jc-center">
@@ -33,23 +33,23 @@ export default {
<style lang="scss">
#centreLeft1 {
padding: 1rem;
height: 410px;
min-width: 300px;
border-radius: 5px;
padding: 0.2rem;
height: 5.125rem;
min-width: 3.75rem;
border-radius: 0.0625rem;
.bg-color-black {
height: 385px;
border-radius: 10px;
height: 4.8125rem;
border-radius: 0.125rem;
}
.text {
color: #c3cbde;
}
.chart-box {
margin-top: 1rem;
width: 170px;
height: 170px;
margin-top: 0.2rem;
width: 2.125rem;
height: 2.125rem;
.active-ring-name {
padding-top: 10px;
padding-top: 0.125rem;
}
}
}
src/views/centreRight1.vue → src/views/centerRight1.vue
+8 -9
View File
@@ -10,7 +10,7 @@
</div>
</div>
<div class="d-flex jc-center body-box">
<dv-scroll-board :config="config" style="width:270px;height:360px" />
<dv-scroll-board :config="config" style="width:3.375rem;height:4.28rem" />
</div>
</div>
</div>
@@ -53,21 +53,20 @@ export default {
<style lang="scss">
#centreRight1 {
padding: 1rem;
height: 410px;
min-width: 300px;
border-radius: 5px;
padding: 0.2rem;
height: 5.125rem;
min-width: 3.75rem;
border-radius: 0.0625rem;
.bg-color-black {
height: 385px;
border-radius: 10px;
height: 4.8125rem;
border-radius: 0.125rem;
}
.text {
color: #c3cbde;
}
.body-box {
border-radius: 10px;
border-radius: 0.125rem;
overflow: hidden;
}
}
</style>
src/views/centreRight2.vue → src/views/centerRight2.vue
+10 -11
View File
@@ -7,8 +7,8 @@
</span>
<span class="fs-xl text mx-2">产品销售渠道分析</span>
</div>
<div class="d-flex jc-center body-box">
<dv-capsule-chart :config="config" style="width: 100%;height:160px" />
<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>
@@ -56,21 +56,20 @@ export default {
<style lang="scss">
#centreRight2 {
padding: 5px;
height: 400px;
min-width: 300px;
border-radius: 5px;
padding: 0.0625rem;
height: 5rem;
min-width: 3.75rem;
border-radius: 0.0625rem;
.bg-color-black {
padding: 5px;
height: 405px;
border-radius: 10px;
padding: 0.0625rem;
height: 5.0625rem;
border-radius: 0.125rem;
}
.text {
color: #c3cbde;
}
.body-box {
flex-direction: column;
border-radius: 10px;
border-radius: 0.125rem;
overflow: hidden;
}
}
src/views/index.vue
+22 -22
View File
@@ -4,25 +4,25 @@
<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:5px;" />
<dv-decoration-10 style="width:33.3%;height:.0625rem;" />
<div class="d-flex jc-center">
<dv-decoration-8 :color="['#568aea', '#000000']" style="width:200px;height:50px;" />
<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:250px;height:8px;"
style="width:3.125rem;height:.1rem;"
/>
</div>
<dv-decoration-8
:reverse="true"
:color="['#568aea', '#000000']"
style="width:200px;height:50px;"
style="width:2.5rem;height:.625rem;"
/>
</div>
<dv-decoration-10 style="width:33.3%;height:5px; transform: rotateY(180deg);" />
<dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
</div>
<!-- 第二行 -->
@@ -30,13 +30,13 @@
<div class="d-flex" style="width: 40%">
<div
class="react-right ml-4"
style="width: 500px; text-align: left;background-color: #0f1325;"
style="width: 6.25rem; text-align: left;background-color: #0f1325;"
>
<span class="react-before"></span>
<span class="text fw-b">数据分析1</span>
<span class="text">数据分析1</span>
</div>
<div class="react-right ml-3" style="background-color: #0f1325;">
<span class="text colorBlue fw-b">数据分析2</span>
<span class="text colorBlue">数据分析2</span>
</div>
</div>
<div style="width: 40%" class="d-flex">
@@ -45,7 +45,7 @@
</div>
<div
class="react-left mr-4"
style="width: 500px; background-color: #0f1325; text-align: right;"
style="width: 6.25rem; background-color: #0f1325; text-align: right;"
>
<span class="react-after"></span>
<span class="text">2020年03月16日 周一 12:00</span>
@@ -58,12 +58,12 @@
<div class="content-box">
<div>
<dv-border-box-12>
<centreLeft1 />
<centerLeft1 />
</dv-border-box-12>
</div>
<div>
<dv-border-box-12>
<centreLeft2 />
<centerLeft2 />
</dv-border-box-12>
</div>
<!-- 中间 -->
@@ -72,11 +72,11 @@
</div>
<!-- 中间 -->
<div>
<centreRight2 />
<centerRight2 />
</div>
<div>
<dv-border-box-13>
<centreRight1 />
<centerRight1 />
</dv-border-box-13>
</div>
</div>
@@ -97,10 +97,10 @@
</template>
<script>
import centreLeft1 from "./centreLeft1";
import centreLeft2 from "./centreLeft2";
import centreRight1 from "./centreRight1";
import centreRight2 from "./centreRight2";
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";
@@ -111,10 +111,10 @@ export default {
};
},
components: {
centreLeft1,
centreLeft2,
centreRight1,
centreRight2,
centerLeft1,
centerLeft2,
centerRight1,
centerRight2,
center,
bottomLeft,
bottomRight
@@ -132,6 +132,6 @@ export default {
};
</script>
<style lang="scss" scoped>
<style lang="scss">
@import "../assets/scss/index.scss";
</style>