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. **如何更换图表**
直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
7. **屏幕比例不对怎么办**
其实 dataV 插件已经对屏幕的比例做了一定程度的适配，但肯定有比例不合适的屏幕，所以可能需要自己去写 js 代码，让项目按照比例缩放，这也是通用的适配方法。
7. **屏幕适配问题**
本项目借助了 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: (
xxs: 0.6154,
xxs: 0.1,
//8px
xs: 0.7692,
xs: 0.125,
//10px
sm: 0.9231,
sm: 0.2875,
//12px
md: 1 ,
md: 0.1625,
//13px
lg: 1.0769 ,
lg: 0.175,
//14px
xl: 1.2308 ,
xl: 0.2,
//16px
xxl: 1.3846 ,
xxl: 0.225,
//18px
xxxl: 1.5385
//20px
xxxl: 0.25 //20px,,,,
);
// 宽高
@@ -61,14 +60,14 @@ $flex-jc: (
center: center,
between: space-between,
around: space-around,
evenly: space-evenly
evenly: space-evenly,
);
$flex-ai: (
start: flex-start,
end: flex-end,
center: center,
stretch: stretch
stretch: stretch,
);
.flex-1 {
@@ -79,20 +78,20 @@ $flex-ai: (
//spacing
$spacing-types: (
m: margin,
p: padding
p: padding,
);
$spacing-directions: (
t: top,
r: right,
b: bottom,
l: left
l: left,
);
$spacing-base-size: 1rem;
$spacing-base-size: 0.2rem;
$spacing-sizes: (
0: 0,
1: 0.25,
2: 0.5,
3: 1,
4: 1.5,
5: 3
5: 3,
);
src/assets/scss/index.scss
+26 -29
View File
@@ -1,36 +1,35 @@
#index {
* {
color: #D3D6DD;
}
color: #d3d6dd;
background-color: #000000;
width: 100%;
height: 100vh;
.bg {
padding: 1rem;
padding: 0.2rem 0.2rem 0 0.2rem;
background-image: url("../assets/pageBg.png");
background-size: cover;
background-position: center center;
}
.host-body {
.title {
position: relative;
width: 500px;
width: 6.25rem;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
.title-text {
font-size: 2rem;
font-size: 0.2rem;
position: absolute;
bottom: 0px;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
.title-bototm {
position: absolute;
bottom: -30px;
bottom: -0.375rem;
left: 50%;
transform: translate(-50%);
}
@@ -39,19 +38,19 @@
// 平行四边形
.react-left {
cursor: pointer;
font-size: 1.3rem;
width: 300px;
height: 50px;
line-height: 50px;
font-size: 0.225rem;
width: 3.75rem;
height: 0.625rem;
line-height: 0.625rem;
text-align: center;
transform: skewX(-45deg);
.react-after {
position: absolute;
right: -25px;
top: 0px;
height: 50px;
width: 50px;
right: -0.3125rem;
top: 0;
height: 0.625rem;
width: 0.625rem;
background-color: #0f1325;
transform: skewX(45deg);
}
@@ -64,22 +63,21 @@
.react-right {
cursor: pointer;
font-size: 1.3rem;
width: 300px;
height: 50px;
line-height: 50px;
font-size: 0.225rem;
width: 3.75rem;
height: 0.625rem;
line-height: 0.625rem;
text-align: center;
transform: skewX(45deg);
.react-before {
position: absolute;
left: -25px;
top: 0px;
height: 50px;
width: 50px;
left: -0.3125rem;
top: 0;
height: 0.625rem;
width: 0.625rem;
background-color: #0f1325;
transform: skewX(-45deg);
}
.text {
@@ -88,9 +86,8 @@
}
}
.body-box {
margin-top: 1rem;
margin-top: 0.2rem;
display: flex;
flex-direction: column;
@@ -102,7 +99,7 @@
// 底部数据
.bototm-box {
margin-top: 10px;
margin-top: 0.125rem;
display: grid;
grid-template-columns: repeat(2, 50%);
}
src/assets/scss/style.scss
+15 -32
View File
@@ -10,7 +10,6 @@
}
html {
font-size: 13px;
margin: 0;
padding: 0;
}
@@ -49,7 +48,6 @@ a {
float: left;
}
// 字体加粗
.fw-b {
font-weight: bold;
@@ -63,14 +61,13 @@ a {
}
.bg-color-black {
background-color: rgba(19, 25, 47, .6);
background-color: rgba(19, 25, 47, 0.6);
}
.bg-color-blue {
background-color: #1A5CD7;
background-color: #1a5cd7;
}
.colorBlack {
color: #272727 !important;
@@ -80,10 +77,10 @@ a {
}
.colorGrass {
color: #33CEA0;
color: #33cea0;
&:hover {
color: #33CEA0 !important;
color: #33cea0 !important;
}
}
@@ -96,10 +93,10 @@ a {
}
.colorText {
color: #D3D6DD !important;
color: #d3d6dd !important;
&:hover {
color: #D3D6DD !important;
color: #d3d6dd !important;
}
}
@@ -111,10 +108,8 @@ a {
}
}
//颜色
@each $colorkey,
$color in $colors {
@each $colorkey, $color in $colors {
.text-#{$colorkey} {
color: $color;
}
@@ -124,7 +119,6 @@ $color in $colors {
}
}
//对齐
@each $var in (left, center, right) {
.text-#{$var} {
@@ -133,46 +127,38 @@ $color in $colors {
}
//flex
@each $key,
$value in $flex-jc {
@each $key, $value in $flex-jc {
.jc-#{$key} {
justify-content: $value;
}
}
@each $key,
$value in $flex-ai {
@each $key, $value in $flex-ai {
.ai-#{$key} {
align-items: $value;
}
}
//字体
@each $fontkey,
$fontvalue in $font-sizes {
@each $fontkey, $fontvalue in $font-sizes {
.fs-#{$fontkey} {
font-size: $fontvalue * $base-font-size;
}
}
//.mt-1 => margin top
//spacing
@each $typekey,
$type in $spacing-types {
@each $typekey, $type in $spacing-types {
//.m-1
@each $sizekey,
$size in $spacing-sizes {
@each $sizekey, $size in $spacing-sizes {
.#{$typekey}-#{$sizekey} {
#{$type}: $size * $spacing-base-size;
}
}
//.mx-1
@each $sizekey,
$size in $spacing-sizes {
@each $sizekey, $size in $spacing-sizes {
.#{$typekey}x-#{$sizekey} {
#{$type}-left: $size * $spacing-base-size;
#{$type}-right: $size * $spacing-base-size;
@@ -185,11 +171,8 @@ $type in $spacing-types {
}
//.mt-1
@each $directionkey,
$direction in $spacing-directions {
@each $sizekey,
$size in $spacing-sizes {
@each $directionkey, $direction in $spacing-directions {
@each $sizekey, $size in $spacing-sizes {
.#{$typekey}#{$directionkey}-#{$sizekey} {
#{$type}-#{$direction}: $size * $spacing-base-size;
}
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>
<div>
<div id="bottomLeftChart" style="width:900px;height:500px;"></div>
<div id="bottomLeftChart" style="width:11.25rem;height:6.25rem;"></div>
</div>
</template>
src/components/echart/bottom/bottomRightChart.vue
+2 -3
View File
@@ -1,6 +1,6 @@
<template>
<div>
<div id="bottomRightChart" style="width:900px;height:480px;"></div>
<div id="bottomRightChart" style="width:11.25rem;height:6rem;"></div>
</div>
</template>
@@ -388,8 +388,7 @@ export default {
barWidth: "50%",
data: weekMaxData,
animation: false
},
}
]
};
src/components/echart/center/centerChartRate.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div>
<div :id="id" style="width:120px;height:100px;"></div>
<div :id="id" style="width:1.5rem;height:1.25rem;"></div>
</div>
</template>
src/components/echart/centerLeft2/centreLeft1Chart.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div>
<div id="centreLeft1Chart" style="width:260px; height: 220px;"></div>
<div id="centreLeft1Chart" style="width:3.25rem; height: 2.75rem;"></div>
</div>
</template>
src/components/echart/centerLeft2/centreLeft2Chart.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div>
<div id="centreLeft2Chart" style="width:330px; height: 370px;"></div>
<div id="centreLeft2Chart" style="width:4.125rem; height: 4.625rem;"></div>
</div>
</template>
src/components/echart/centreRight2/centreRight2Chart1.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div>
<div id="centreRight2Chart1" style="width:260px; height: 215px;">123</div>
<div id="centreRight2Chart1" style="width:3.25rem; height: 2.60rem;">123</div>
</div>
</template>
src/main.js
+16 -13
View File
@@ -1,23 +1,26 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import dataV from "@jiaminghi/data-view";
Vue.use(dataV);
// 引入vue-awesome
import Icon from 'vue-awesome/components/Icon'
import 'vue-awesome/icons/index.js'
import Icon from "vue-awesome/components/Icon";
import "vue-awesome/icons/index.js";
// 全局注册图标
Vue.component('icon', Icon)
Vue.component("icon", Icon);
// 适配flex
import "@/common/flexible.js";
// 引入全局css
import './assets/scss/style.scss'
import "./assets/scss/style.scss";
Vue.config.productionTip = false
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
render: (h) => h(App),
}).$mount("#app");
src/views/bottomLeft.vue
+11 -12
View File
@@ -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>