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
README.md
+19 -2
View File
@@ -161,8 +161,25 @@ props: {
6. **如何更换图表** 6. **如何更换图表**
直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。 直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
7. **屏幕比例不对怎么办** 7. **屏幕适配问题**
其实 dataV 插件已经对屏幕的比例做了一定程度的适配，但肯定有比例不合适的屏幕，所以可能需要自己去写 js 代码，让项目按照比例缩放，这也是通用的适配方法。 本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。 ，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点，
```js
// flexible文件位置: `common/flexible.js`,修改部分如下
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
// 最小1366px，最大适配2560px
if (width / dpr < 1366) {
width = 1366 * dpr;
} else if (width / dpr > 2560) {
width = 2560 * dpr;
}
// 原项目是1920px我设置成24等份，这样1rem就是80px
var rem = width / 24;
docEl.style.fontSize = rem + "px";
flexible.rem = win.rem = rem;
}
```
## 四、更新情况 ## 四、更新情况
src/assets/scss/_variables.scss
+15 -16
View File
@@ -14,24 +14,23 @@ $colors: (
); );
// 字体大小 // 字体大小
$base-font-size: 1rem; $base-font-size: 0.2rem;
$font-sizes: ( $font-sizes: (
xxs: 0.6154, xxs: 0.1,
//8px //8px
xs: 0.7692, xs: 0.125,
//10px //10px
sm: 0.9231, sm: 0.2875,
//12px //12px
md: 1 , md: 0.1625,
//13px //13px
lg: 1.0769 , lg: 0.175,
//14px //14px
xl: 1.2308 , xl: 0.2,
//16px //16px
xxl: 1.3846 , xxl: 0.225,
//18px //18px
xxxl: 1.5385 xxxl: 0.25 //20px,,,,
//20px
); );
// 宽高 // 宽高
@@ -61,14 +60,14 @@ $flex-jc: (
center: center, center: center,
between: space-between, between: space-between,
around: space-around, around: space-around,
evenly: space-evenly evenly: space-evenly,
); );
$flex-ai: ( $flex-ai: (
start: flex-start, start: flex-start,
end: flex-end, end: flex-end,
center: center, center: center,
stretch: stretch stretch: stretch,
); );
.flex-1 { .flex-1 {
@@ -79,20 +78,20 @@ $flex-ai: (
//spacing //spacing
$spacing-types: ( $spacing-types: (
m: margin, m: margin,
p: padding p: padding,
); );
$spacing-directions: ( $spacing-directions: (
t: top, t: top,
r: right, r: right,
b: bottom, b: bottom,
l: left l: left,
); );
$spacing-base-size: 1rem; $spacing-base-size: 0.2rem;
$spacing-sizes: ( $spacing-sizes: (
0: 0, 0: 0,
1: 0.25, 1: 0.25,
2: 0.5, 2: 0.5,
3: 1, 3: 1,
4: 1.5, 4: 1.5,
5: 3 5: 3,
); );
src/assets/scss/index.scss
+27 -30
View File
@@ -1,36 +1,35 @@
#index { #index {
* { color: #d3d6dd;
color: #D3D6DD;
}
background-color: #000000; background-color: #000000;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
.bg { .bg {
padding: 1rem; padding: 0.2rem 0.2rem 0 0.2rem;
background-image: url("../assets/pageBg.png"); background-image: url("../assets/pageBg.png");
background-size: cover;
background-position: center center;
} }
.host-body { .host-body {
.title { .title {
position: relative; position: relative;
width: 500px; width: 6.25rem;
text-align: center; text-align: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
.title-text { .title-text {
font-size: 2rem; font-size: 0.2rem;
position: absolute; position: absolute;
bottom: 0px; bottom: 0;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
} }
.title-bototm { .title-bototm {
position: absolute; position: absolute;
bottom: -30px; bottom: -0.375rem;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
} }
@@ -39,19 +38,19 @@
// 平行四边形 // 平行四边形
.react-left { .react-left {
cursor: pointer; cursor: pointer;
font-size: 1.3rem; font-size: 0.225rem;
width: 300px; width: 3.75rem;
height: 50px; height: 0.625rem;
line-height: 50px; line-height: 0.625rem;
text-align: center; text-align: center;
transform: skewX(-45deg); transform: skewX(-45deg);
.react-after { .react-after {
position: absolute; position: absolute;
right: -25px; right: -0.3125rem;
top: 0px; top: 0;
height: 50px; height: 0.625rem;
width: 50px; width: 0.625rem;
background-color: #0f1325; background-color: #0f1325;
transform: skewX(45deg); transform: skewX(45deg);
} }
@@ -64,22 +63,21 @@
.react-right { .react-right {
cursor: pointer; cursor: pointer;
font-size: 1.3rem; font-size: 0.225rem;
width: 300px; width: 3.75rem;
height: 50px; height: 0.625rem;
line-height: 50px; line-height: 0.625rem;
text-align: center; text-align: center;
transform: skewX(45deg); transform: skewX(45deg);
.react-before { .react-before {
position: absolute; position: absolute;
left: -25px; left: -0.3125rem;
top: 0px; top: 0;
height: 50px; height: 0.625rem;
width: 50px; width: 0.625rem;
background-color: #0f1325; background-color: #0f1325;
transform: skewX(-45deg); transform: skewX(-45deg);
} }
.text { .text {
@@ -88,9 +86,8 @@
} }
} }
.body-box { .body-box {
margin-top: 1rem; margin-top: 0.2rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -102,10 +99,10 @@
// 底部数据 // 底部数据
.bototm-box { .bototm-box {
margin-top: 10px; margin-top: 0.125rem;
display: grid; display: grid;
grid-template-columns: repeat(2, 50%); grid-template-columns: repeat(2, 50%);
} }
} }
} }
} }
src/assets/scss/style.scss
+16 -33
View File
@@ -10,7 +10,6 @@
} }
html { html {
font-size: 13px;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@@ -49,7 +48,6 @@ a {
float: left; float: left;
} }
// 字体加粗 // 字体加粗
.fw-b { .fw-b {
font-weight: bold; font-weight: bold;
@@ -63,14 +61,13 @@ a {
} }
.bg-color-black { .bg-color-black {
background-color: rgba(19, 25, 47, .6); background-color: rgba(19, 25, 47, 0.6);
} }
.bg-color-blue { .bg-color-blue {
background-color: #1A5CD7; background-color: #1a5cd7;
} }
.colorBlack { .colorBlack {
color: #272727 !important; color: #272727 !important;
@@ -80,10 +77,10 @@ a {
} }
.colorGrass { .colorGrass {
color: #33CEA0; color: #33cea0;
&:hover { &:hover {
color: #33CEA0 !important; color: #33cea0 !important;
} }
} }
@@ -96,10 +93,10 @@ a {
} }
.colorText { .colorText {
color: #D3D6DD !important; color: #d3d6dd !important;
&:hover { &:hover {
color: #D3D6DD !important; color: #d3d6dd !important;
} }
} }
@@ -111,10 +108,8 @@ a {
} }
} }
//颜色 //颜色
@each $colorkey, @each $colorkey, $color in $colors {
$color in $colors {
.text-#{$colorkey} { .text-#{$colorkey} {
color: $color; color: $color;
} }
@@ -124,7 +119,6 @@ $color in $colors {
} }
} }
//对齐 //对齐
@each $var in (left, center, right) { @each $var in (left, center, right) {
.text-#{$var} { .text-#{$var} {
@@ -133,46 +127,38 @@ $color in $colors {
} }
//flex //flex
@each $key, @each $key, $value in $flex-jc {
$value in $flex-jc {
.jc-#{$key} { .jc-#{$key} {
justify-content: $value; justify-content: $value;
} }
} }
@each $key, @each $key, $value in $flex-ai {
$value in $flex-ai {
.ai-#{$key} { .ai-#{$key} {
align-items: $value; align-items: $value;
} }
} }
//字体 //字体
@each $fontkey, @each $fontkey, $fontvalue in $font-sizes {
$fontvalue in $font-sizes {
.fs-#{$fontkey} { .fs-#{$fontkey} {
font-size: $fontvalue * $base-font-size; font-size: $fontvalue * $base-font-size;
} }
} }
//.mt-1 => margin top //.mt-1 => margin top
//spacing //spacing
@each $typekey, @each $typekey, $type in $spacing-types {
$type in $spacing-types {
//.m-1 //.m-1
@each $sizekey, @each $sizekey, $size in $spacing-sizes {
$size in $spacing-sizes {
.#{$typekey}-#{$sizekey} { .#{$typekey}-#{$sizekey} {
#{$type}: $size * $spacing-base-size; #{$type}: $size * $spacing-base-size;
} }
} }
//.mx-1 //.mx-1
@each $sizekey, @each $sizekey, $size in $spacing-sizes {
$size in $spacing-sizes {
.#{$typekey}x-#{$sizekey} { .#{$typekey}x-#{$sizekey} {
#{$type}-left: $size * $spacing-base-size; #{$type}-left: $size * $spacing-base-size;
#{$type}-right: $size * $spacing-base-size; #{$type}-right: $size * $spacing-base-size;
@@ -185,11 +171,8 @@ $type in $spacing-types {
} }
//.mt-1 //.mt-1
@each $directionkey, @each $directionkey, $direction in $spacing-directions {
$direction in $spacing-directions { @each $sizekey, $size in $spacing-sizes {
@each $sizekey,
$size in $spacing-sizes {
.#{$typekey}#{$directionkey}-#{$sizekey} { .#{$typekey}#{$directionkey}-#{$sizekey} {
#{$type}-#{$direction}: $size * $spacing-base-size; #{$type}-#{$direction}: $size * $spacing-base-size;
} }
@@ -199,4 +182,4 @@ $type in $spacing-types {
.#{$typekey} { .#{$typekey} {
#{$type}: 0; #{$type}: 0;
} }
} }
src/common/flexible.js
+147
View File
@@ -0,0 +1,147 @@
(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
console.warn("将根据已有的meta标签来设置缩放比例");
var match = metaEl
.getAttribute("content")
// eslint-disable-next-line no-useless-escape
.match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute("content");
if (content) {
// eslint-disable-next-line no-useless-escape
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
// eslint-disable-next-line no-useless-escape
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
if (!dpr && !scale) {
// eslint-disable-next-line no-unused-vars
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下，仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute("data-dpr", dpr);
if (!metaEl) {
metaEl = doc.createElement("meta");
metaEl.setAttribute("name", "viewport");
metaEl.setAttribute(
"content",
"initial-scale=" +
scale +
", maximum-scale=" +
scale +
", minimum-scale=" +
scale +
", user-scalable=no"
);
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
// 最小1366px，最大适配2560px
if (width / dpr < 1366) {
width = 1366 * dpr;
} else if (width / dpr > 2560) {
width = 2560 * dpr;
}
// 设置成24等份，设计稿时1920px的，这样1rem就是80px
var rem = width / 24;
docEl.style.fontSize = rem + "px";
flexible.rem = win.rem = rem;
}
win.addEventListener(
"resize",
function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
},
false
);
win.addEventListener(
"pageshow",
function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
},
false
);
if (doc.readyState === "complete") {
doc.body.style.fontSize = 12 * dpr + "px";
} else {
doc.addEventListener(
"DOMContentLoaded",
// eslint-disable-next-line no-unused-vars
function(e) {
doc.body.style.fontSize = 12 * dpr + "px";
},
false
);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === "string" && d.match(/rem$/)) {
val += "px";
}
return val;
};
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === "string" && d.match(/px$/)) {
val += "rem";
}
return val;
};
})(window, window["lib"] || (window["lib"] = {}));
src/components/echart/bottom/bottomLeftChart.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div id="bottomLeftChart" style="width:900px;height:500px;"></div> <div id="bottomLeftChart" style="width:11.25rem;height:6.25rem;"></div>
</div> </div>
</template> </template>
src/components/echart/bottom/bottomRightChart.vue
+2 -3
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div id="bottomRightChart" style="width:900px;height:480px;"></div> <div id="bottomRightChart" style="width:11.25rem;height:6rem;"></div>
</div> </div>
</template> </template>
@@ -388,8 +388,7 @@ export default {
barWidth: "50%", barWidth: "50%",
data: weekMaxData, data: weekMaxData,
animation: false animation: false
}, }
] ]
}; };
src/components/echart/center/centerChartRate.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div :id="id" style="width:120px;height:100px;"></div> <div :id="id" style="width:1.5rem;height:1.25rem;"></div>
</div> </div>
</template> </template>
src/components/echart/centerLeft2/centreLeft1Chart.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div id="centreLeft1Chart" style="width:260px; height: 220px;"></div> <div id="centreLeft1Chart" style="width:3.25rem; height: 2.75rem;"></div>
</div> </div>
</template> </template>
src/components/echart/centerLeft2/centreLeft2Chart.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div id="centreLeft2Chart" style="width:330px; height: 370px;"></div> <div id="centreLeft2Chart" style="width:4.125rem; height: 4.625rem;"></div>
</div> </div>
</template> </template>
src/components/echart/centreRight2/centreRight2Chart1.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div id="centreRight2Chart1" style="width:260px; height: 215px;">123</div> <div id="centreRight2Chart1" style="width:3.25rem; height: 2.60rem;">123</div>
</div> </div>
</template> </template>
@@ -168,7 +168,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#centreRight2Chart1{ #centreRight2Chart1 {
margin: 0 auto; margin: 0 auto;
} }
</style> </style>
src/main.js
+16 -13
View File
@@ -1,23 +1,26 @@
import Vue from 'vue' import Vue from "vue";
import App from './App.vue' import App from "./App.vue";
import router from './router' import router from "./router";
import store from './store' import store from "./store";
import dataV from '@jiaminghi/data-view' import dataV from "@jiaminghi/data-view";
Vue.use(dataV) Vue.use(dataV);
// 引入vue-awesome // 引入vue-awesome
import Icon from 'vue-awesome/components/Icon' import Icon from "vue-awesome/components/Icon";
import 'vue-awesome/icons/index.js' import "vue-awesome/icons/index.js";
// 全局注册图标 // 全局注册图标
Vue.component('icon', Icon) Vue.component("icon", Icon);
// 适配flex
import "@/common/flexible.js";
// 引入全局css // 引入全局css
import './assets/scss/style.scss' import "./assets/scss/style.scss";
Vue.config.productionTip = false Vue.config.productionTip = false;
new Vue({ new Vue({
router, router,
store, store,
render: h => h(App) render: (h) => h(App),
}).$mount('#app') }).$mount("#app");
src/views/bottomLeft.vue
+12 -13
View File
@@ -1,6 +1,6 @@
<template> <template>
<div id="bottomLeft"> <div id="bottomLeft">
<div class="bg-color-black "> <div class="bg-color-black">
<div class="d-flex pt-2 pl-2"> <div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8"> <span style="color:#5cd9e8">
<icon name="chart-bar"></icon> <icon name="chart-bar"></icon>
@@ -25,31 +25,30 @@ export default {
components: { components: {
bottomLeftChart bottomLeftChart
}, },
mounted() { mounted() {},
},
methods: {} methods: {}
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
#bottomLeft { #bottomLeft {
padding: 1.5rem 1rem; padding: 0.3rem 0.2rem;
height: 520px; height: 6.5rem;
min-width: 300px; min-width: 3.75rem;
border-radius: 5px; border-radius: 0.0625rem;
.bg-color-black { .bg-color-black {
height: 485px; height: 6.0625rem;
border-radius: 10px; border-radius: 0.125rem;
} }
.text { .text {
color: #c3cbde; color: #c3cbde;
} }
.chart-box { .chart-box {
margin-top: 1rem; margin-top: 0.2rem;
width: 170px; width: 2.125rem;
height: 170px; height: 2.125rem;
.active-ring-name { .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"> <style lang="scss">
#bottomRight { #bottomRight {
padding: 1rem 1rem 0rem; padding: 0.2rem 0.2rem 0;
height: 520px; height: 6.5rem;
min-width: 300px; min-width: 3.75rem;
border-radius: 5px; border-radius: 0.0625rem;
.bg-color-black { .bg-color-black {
height: 495px; height: 6.1875rem;
border-radius: 10px; border-radius: 0.125rem;
} }
.text { .text {
color: #c3cbde; color: #c3cbde;
} //下滑线动态 } //下滑线动态
.decoration2 { .decoration2 {
position: absolute; position: absolute;
right: 10px; right: 0.125rem;
} }
.chart-box { .chart-box {
margin-top: 1rem; margin-top: 0.2rem;
width: 170px; width: 2.125rem;
height: 170px; height: 2.125rem;
.active-ring-name { .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"> <div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
<p class="ml-3 colorBlue fw-b">{{item.title}}</p> <p class="ml-3 colorBlue fw-b">{{item.title}}</p>
<div> <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> </div>
</div> </div>
@@ -14,7 +14,7 @@
<icon name="align-left"></icon> <icon name="align-left"></icon>
</span> </span>
<span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</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>
<div class="percent"> <div class="percent">
<div class="item bg-color-black"> <div class="item bg-color-black">
@@ -26,7 +26,7 @@
<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" /> <centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
</div> </div>
<div class="water"> <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> </div>
</div> </div>
@@ -185,25 +185,25 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
.item { .item {
border-radius: 5px; border-radius: 0.0625rem;
padding-top: 1rem; padding-top: 0.2rem;
margin-top: 0.5rem; margin-top: 0.1rem;
width: 32%; width: 32%;
height: 70px; height: 0.875rem;
} }
} }
.down { .down {
padding: 4px; padding: 0.07rem 0.05rem;
padding-bottom: 0px; padding-bottom: 0;
width: 100%; width: 100%;
display: flex; display: flex;
height: 255px; height: 3.1875rem;
justify-content: space-between; justify-content: space-between;
.bg-color-black { .bg-color-black {
border-radius: 5px; border-radius: 0.0625rem;
} }
.ranking { .ranking {
padding: 10px; padding: 0.125rem;
width: 59%; width: 59%;
} }
.percent { .percent {
@@ -212,9 +212,9 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
.item { .item {
width: 50%; width: 50%;
height: 120px; height: 1.5rem;
span { span {
margin-top: 7px; margin-top: 0.0875rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
src/views/centreLeft1.vue → src/views/centerLeft1.vue
+15 -15
View File
@@ -7,7 +7,7 @@
</span> </span>
<div class="d-flex"> <div class="d-flex">
<span class="fs-xl text mx-2">任务通过率</span> <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> </div>
<div class="d-flex jc-center"> <div class="d-flex jc-center">
@@ -18,7 +18,7 @@
<div class="item-box" v-for="(item,index) in numberData" :key="index"> <div class="item-box" v-for="(item,index) in numberData" :key="index">
<div class="d-flex"> <div class="d-flex">
<span class="coin">￥</span> <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> </div>
<p class="text" style="text-align: center;"> <p class="text" style="text-align: center;">
{{item.text}} {{item.text}}
@@ -123,23 +123,23 @@ export default {
<style lang="scss"> <style lang="scss">
#centreLeft1 { #centreLeft1 {
padding: 1rem; padding: 0.2rem;
height: 410px; height: 5.125rem;
min-width: 300px; min-width: 3.75rem;
border-radius: 5px; border-radius: 0.0625rem;
.bg-color-black { .bg-color-black {
height: 385px; height: 4.8125rem;
border-radius: 10px; border-radius: 0.125rem;
} }
.text { .text {
color: #c3cbde; color: #c3cbde;
} }
.chart-box { .chart-box {
margin-top: 1rem; margin-top: 0.2rem;
width: 170px; width: 2.125rem;
height: 170px; height: 2.125rem;
.active-ring-name { .active-ring-name {
padding-top: 10px; padding-top: 0.125rem;
} }
} }
@@ -152,9 +152,9 @@ export default {
// 金币 // 金币
.coin { .coin {
position: absolute; position: absolute;
left: 0px; left: 0.1rem;
top: 17px; top: 0.2125rem;
font-size: 2rem; font-size: 0.25rem;
color: #ffc107; color: #ffc107;
} }
.colorYellow { .colorYellow {
src/views/centreLeft2.vue → src/views/centerLeft2.vue
+11 -11
View File
@@ -7,7 +7,7 @@
</span> </span>
<div class="d-flex"> <div class="d-flex">
<span class="fs-xl text mx-2">数据情况雷达图</span> <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> </div>
<div class="d-flex jc-center"> <div class="d-flex jc-center">
@@ -33,23 +33,23 @@ export default {
<style lang="scss"> <style lang="scss">
#centreLeft1 { #centreLeft1 {
padding: 1rem; padding: 0.2rem;
height: 410px; height: 5.125rem;
min-width: 300px; min-width: 3.75rem;
border-radius: 5px; border-radius: 0.0625rem;
.bg-color-black { .bg-color-black {
height: 385px; height: 4.8125rem;
border-radius: 10px; border-radius: 0.125rem;
} }
.text { .text {
color: #c3cbde; color: #c3cbde;
} }
.chart-box { .chart-box {
margin-top: 1rem; margin-top: 0.2rem;
width: 170px; width: 2.125rem;
height: 170px; height: 2.125rem;
.active-ring-name { .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> </div>
<div class="d-flex jc-center body-box"> <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> </div>
</div> </div>
@@ -53,21 +53,20 @@ export default {
<style lang="scss"> <style lang="scss">
#centreRight1 { #centreRight1 {
padding: 1rem; padding: 0.2rem;
height: 410px; height: 5.125rem;
min-width: 300px; min-width: 3.75rem;
border-radius: 5px; border-radius: 0.0625rem;
.bg-color-black { .bg-color-black {
height: 385px; height: 4.8125rem;
border-radius: 10px; border-radius: 0.125rem;
} }
.text { .text {
color: #c3cbde; color: #c3cbde;
} }
.body-box { .body-box {
border-radius: 10px; border-radius: 0.125rem;
overflow: hidden; overflow: hidden;
} }
} }
</style> </style>
src/views/centreRight2.vue → src/views/centerRight2.vue
+10 -11
View File
@@ -7,8 +7,8 @@
</span> </span>
<span class="fs-xl text mx-2">产品销售渠道分析</span> <span class="fs-xl text mx-2">产品销售渠道分析</span>
</div> </div>
<div class="d-flex jc-center body-box"> <div class="d-flex jc-center body-box" style=" margin-top: 0;">
<dv-capsule-chart :config="config" style="width: 100%;height:160px" /> <dv-capsule-chart :config="config" style="width: 100%;height:2rem" />
<!-- ---------------------------------------- --> <!-- ---------------------------------------- -->
<centreRight2Chart1></centreRight2Chart1> <centreRight2Chart1></centreRight2Chart1>
</div> </div>
@@ -56,21 +56,20 @@ export default {
<style lang="scss"> <style lang="scss">
#centreRight2 { #centreRight2 {
padding: 5px; padding: 0.0625rem;
height: 400px; height: 5rem;
min-width: 300px; min-width: 3.75rem;
border-radius: 5px; border-radius: 0.0625rem;
.bg-color-black { .bg-color-black {
padding: 5px; padding: 0.0625rem;
height: 405px; height: 5.0625rem;
border-radius: 10px; border-radius: 0.125rem;
} }
.text { .text {
color: #c3cbde; color: #c3cbde;
} }
.body-box { .body-box {
flex-direction: column; border-radius: 0.125rem;
border-radius: 10px;
overflow: hidden; overflow: hidden;
} }
} }
src/views/index.vue
+22 -22
View File
@@ -4,25 +4,25 @@
<dv-loading v-if="loading">Loading...</dv-loading> <dv-loading v-if="loading">Loading...</dv-loading>
<div v-else class="host-body"> <div v-else class="host-body">
<div class="d-flex jc-center"> <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"> <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"> <div class="title">
<span class="title-text">大数据可视化平台</span> <span class="title-text">大数据可视化平台</span>
<dv-decoration-6 <dv-decoration-6
class="title-bototm" class="title-bototm"
:reverse="true" :reverse="true"
:color="['#50e3c2', '#67a1e5']" :color="['#50e3c2', '#67a1e5']"
style="width:250px;height:8px;" style="width:3.125rem;height:.1rem;"
/> />
</div> </div>
<dv-decoration-8 <dv-decoration-8
:reverse="true" :reverse="true"
:color="['#568aea', '#000000']" :color="['#568aea', '#000000']"
style="width:200px;height:50px;" style="width:2.5rem;height:.625rem;"
/> />
</div> </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> </div>
<!-- 第二行 --> <!-- 第二行 -->
@@ -30,13 +30,13 @@
<div class="d-flex" style="width: 40%"> <div class="d-flex" style="width: 40%">
<div <div
class="react-right ml-4" 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="react-before"></span>
<span class="text fw-b">数据分析1</span> <span class="text">数据分析1</span>
</div> </div>
<div class="react-right ml-3" style="background-color: #0f1325;"> <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> </div>
<div style="width: 40%" class="d-flex"> <div style="width: 40%" class="d-flex">
@@ -45,7 +45,7 @@
</div> </div>
<div <div
class="react-left mr-4" 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="react-after"></span>
<span class="text">2020年03月16日 周一 12:00</span> <span class="text">2020年03月16日 周一 12:00</span>
@@ -58,12 +58,12 @@
<div class="content-box"> <div class="content-box">
<div> <div>
<dv-border-box-12> <dv-border-box-12>
<centreLeft1 /> <centerLeft1 />
</dv-border-box-12> </dv-border-box-12>
</div> </div>
<div> <div>
<dv-border-box-12> <dv-border-box-12>
<centreLeft2 /> <centerLeft2 />
</dv-border-box-12> </dv-border-box-12>
</div> </div>
<!-- 中间 --> <!-- 中间 -->
@@ -72,11 +72,11 @@
</div> </div>
<!-- 中间 --> <!-- 中间 -->
<div> <div>
<centreRight2 /> <centerRight2 />
</div> </div>
<div> <div>
<dv-border-box-13> <dv-border-box-13>
<centreRight1 /> <centerRight1 />
</dv-border-box-13> </dv-border-box-13>
</div> </div>
</div> </div>
@@ -97,10 +97,10 @@
</template> </template>
<script> <script>
import centreLeft1 from "./centreLeft1"; import centerLeft1 from "./centerLeft1";
import centreLeft2 from "./centreLeft2"; import centerLeft2 from "./centerLeft2";
import centreRight1 from "./centreRight1"; import centerRight1 from "./centerRight1";
import centreRight2 from "./centreRight2"; import centerRight2 from "./centerRight2";
import center from "./center"; import center from "./center";
import bottomLeft from "./bottomLeft"; import bottomLeft from "./bottomLeft";
import bottomRight from "./bottomRight"; import bottomRight from "./bottomRight";
@@ -111,10 +111,10 @@ export default {
}; };
}, },
components: { components: {
centreLeft1, centerLeft1,
centreLeft2, centerLeft2,
centreRight1, centerRight1,
centreRight2, centerRight2,
center, center,
bottomLeft, bottomLeft,
bottomRight bottomRight
@@ -132,6 +132,6 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss">
@import "../assets/scss/index.scss"; @import "../assets/scss/index.scss";
</style> </style>