From b849bf77103f2d8c7c4ca239f95bbd4b8532abcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Thu, 23 Nov 2023 15:14:06 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=95=8C=E9=9D=A2?=
=?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
public/data.json | 239 ++++-
src/views/board/caseShell/index2.vue | 92 +-
src/views/board/foaming/index2.vue | 1350 +++++++++++++-------------
src/views/board/liner/index.vue | 31 +-
src/views/board/week/index.vue | 2 +-
5 files changed, 967 insertions(+), 747 deletions(-)
diff --git a/public/data.json b/public/data.json
index d23579d..3632224 100644
--- a/public/data.json
+++ b/public/data.json
@@ -5,77 +5,77 @@
"value2": "1000",
"value3": "1000",
"value4": "100%",
- "value5": "2023-01-01"
+ "value5": "00:00:01"
},
{
"value1": "A-02",
"value2": "1000",
"value3": "1000",
"value4": "100%",
- "value5": "2023-01-01"
+ "value5": "00:00:01"
},
{
"value1": "A-03",
"value2": "1000",
"value3": "1000",
"value4": "100%",
- "value5": "2023-01-01"
+ "value5": "00:00:01"
},
{
"value1": "A-04",
"value2": "1000",
"value3": "1000",
"value4": "100%",
- "value5": "2023-01-01"
+ "value5": "00:00:01"
},
{
"value1": "A-05",
"value2": "1000",
"value3": "1000",
"value4": "100%",
- "value5": "2023-01-01"
+ "value5": "00:00:01"
},
{
"value1": "A-06",
"value2": "1000",
"value3": "1000",
"value4": "100%",
- "value5": "2023-01-01"
+ "value5": "00:00:01"
},
{
"value1": "A-07",
"value2": "1000",
"value3": "1000",
"value4": "100%",
- "value5": "2023-01-01"
+ "value5": "00:00:01"
},
{
"value1": "A-01",
"value2": "1000",
"value3": "1000",
"value4": "100%",
- "value5": "2023-01-01"
+ "value5": "00:00:01"
},
{
"value1": "A-01",
"value2": "1000",
"value3": "1000",
"value4": "100%",
- "value5": "2023-01-01"
+ "value5": "00:00:01"
},
{
"value1": "A-01",
"value2": "1000",
"value3": "1000",
"value4": "100%",
- "value5": "2023-01-01"
+ "value5": "00:00:01"
},
{
"value1": "A-01",
"value2": "1000",
"value3": "1000",
"value4": "100%",
- "value5": "2023-01-01"
+ "value5": "00:00:01"
}
],
"table2": [
@@ -1494,16 +1494,16 @@
],
"ImportAndExportStatistics": {
"x": [
- "1时",
- "2时",
- "3时",
- "4时",
- "5时",
- "6时",
- "7时",
- "8时",
- "9时",
- "10时"
+ "1:00",
+ "2:00",
+ "3:00",
+ "4:00",
+ "5:00",
+ "6:00",
+ "7:00",
+ "8:00",
+ "9:00",
+ "10:00"
],
"y": [
{
@@ -1620,7 +1620,7 @@
"C"
],
"y": {
- "name": "运行中",
+ "name": "运行中夹具数量",
"data": [
5,
1,
@@ -1628,5 +1628,200 @@
]
}
}
+ },
+ "caseShell2": {
+ "ImportAndExportStatistics": {
+ "x": [
+ "1:00",
+ "2:00",
+ "3:00",
+ "4:00",
+ "5:00",
+ "6:00",
+ "7:00",
+ "8:00",
+ "9:00",
+ "10:00"
+ ],
+ "y": [
+ {
+ "name": "前板入库数量",
+ "data": [
+ 100,
+ 300,
+ 300,
+ 100,
+ 700,
+ 145,
+ 357,
+ 146,
+ 752,
+ 283
+ ]
+ },
+ {
+ "name": "后板入库数量",
+ "data": [
+ 754,
+ 157,
+ 544,
+ 745,
+ 185,
+ 385,
+ 195,
+ 689,
+ 843,
+ 683
+ ]
+ }
+ ]
+ },
+ "table1": [
+ {
+ "value1": "A-01",
+ "value2": "1000",
+ "value3": "1000",
+ "value31": "1000",
+ "value32": "",
+ "value4": "100%",
+ "value5": "00:00:01"
+ },
+ {
+ "value1": "A-02",
+ "value2": "1000",
+ "value3": "",
+ "value31": "1000",
+ "value32": "1000",
+ "value4": "100%",
+ "value5": "00:00:01"
+ },
+ {
+ "value1": "A-03",
+ "value2": "1000",
+ "value3": "1000",
+ "value31": "1000",
+ "value32": "",
+ "value4": "100%",
+ "value5": "00:00:01"
+ },
+ {
+ "value1": "A-04",
+ "value2": "1000",
+ "value3": "",
+ "value31": "1000",
+ "value32": "1000",
+ "value4": "100%",
+ "value5": "00:00:01"
+ },
+ {
+ "value1": "A-05",
+ "value2": "1000",
+ "value3": "",
+ "value31": "1000",
+ "value32": "1000",
+ "value4": "100%",
+ "value5": "00:00:01"
+ },
+ {
+ "value1": "A-06",
+ "value2": "1000",
+ "value3": "",
+ "value31": "1000",
+ "value32": "1000",
+ "value4": "100%",
+ "value5": "00:00:01"
+ },
+ {
+ "value1": "A-07",
+ "value2": "1000",
+ "value3": "",
+ "value31": "1000",
+ "value32": "1000",
+ "value4": "100%",
+ "value5": "00:00:01"
+ },
+ {
+ "value1": "A-01",
+ "value2": "1000",
+ "value3": "1000",
+ "value31": "1000",
+ "value32": "",
+ "value4": "100%",
+ "value5": "00:00:01"
+ },
+ {
+ "value1": "A-01",
+ "value2": "1000",
+ "value3": "",
+ "value31": "1000",
+ "value32": "1000",
+ "value4": "100%",
+ "value5": "00:00:01"
+ },
+ {
+ "value1": "A-01",
+ "value2": "1000",
+ "value3": "1000",
+ "value31": "1000",
+ "value32": "",
+ "value4": "100%",
+ "value5": "00:00:01"
+ },
+ {
+ "value1": "A-01",
+ "value2": "1000",
+ "value3": "",
+ "value31": "1000",
+ "value32": "1000",
+ "value4": "100%",
+ "value5": "00:00:01"
+ }
+ ],
+ "chart2": {
+ "x": [
+ "A-01",
+ "A-02",
+ "A-03",
+ "A-04",
+ "A-05",
+ "A-06",
+ "A-07",
+ "A-08",
+ "A-09",
+ "A-010"
+ ],
+ "y": [
+ {
+ "name": "前板",
+ "data": [
+ 125,
+ 809,
+ 900,
+ 846,
+ 451,
+ 851,
+ 385,
+ 655,
+ 587,
+ 636
+ ]
+ },
+ {
+ "name": "后板",
+ "data": [
+ 922,
+ 580,
+ 253,
+ 630,
+ 555,
+ 177,
+ 389,
+ 324,
+ 831,
+ 681
+ ]
+ }
+ ]
+ }
}
}
diff --git a/src/views/board/caseShell/index2.vue b/src/views/board/caseShell/index2.vue
index 826f09d..6f99643 100644
--- a/src/views/board/caseShell/index2.vue
+++ b/src/views/board/caseShell/index2.vue
@@ -1,6 +1,6 @@
-
箱壳后板成型线可视化平台
+
箱壳前后板自动成型数据监控平台
{{ team }}
{{ planNum }}
{{ practicalNum }}
@@ -57,19 +57,19 @@
- {{ item.value3 }}
+ {{ item.value31 }}
- {{ item.value4 }}
+ class="scrollTableItem" :style="'color:'+(item.value3>0?'green':'#0000')">
+ {{ item.value3 }}
- {{ item.value5 }}
+ class="scrollTableItem" :style="'color:'+(item.value32>0?'green':'#0000')">
+ {{ item.value32 }}
- {{ item.value5 }}
+ {{ item.value4 }}
@@ -92,6 +92,7 @@
内胆库剩余:{{ linerNum }}% 箱壳库剩余:{{ caseNum }}%
+ 前板总产量:{{ frontNum }} 后板总产量:{{ laterNum }}
@@ -112,11 +113,13 @@ export default {
linerNum: 50,
caseNum: 44,
meter: 30,
+ frontNum: 100,
+ laterNum: 100,
title: [
'工单计划',
- '小时统计',
- '库存统计',
- '型号统计',
+ '小时产量统计',
+ '壳胆库存统计',
+ '生产型号统计',
'发泡夹具状态',
],
titlePosition: [
@@ -147,7 +150,7 @@ export default {
differenceValue: 1000,
scrollTableOption: {
step: 0.5, // 数值越大速度滚动越快
- limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
+ limitMoveNum: 9999999999999, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
@@ -161,7 +164,7 @@ export default {
},
mounted() {
getData().then(e => {
- this.scrollTableData = e.table1
+ this.scrollTableData = e.caseShell2.table1
this.$refs.chart1.setData({
tooltip: {
trigger: "axis",
@@ -178,7 +181,7 @@ export default {
containLabel: true,
},
legend: {
- data: e.liner.ImportAndExportStatistics.y.map(val => val.name),
+ data: e.caseShell2.ImportAndExportStatistics.y.map(val => val.name),
right: 'center',
top: 0,
textStyle: {
@@ -190,7 +193,7 @@ export default {
},
xAxis: {
type: "category",
- data: e.liner.ImportAndExportStatistics.x,
+ data: e.caseShell2.ImportAndExportStatistics.x,
axisLine: {
lineStyle: {
color: "white",
@@ -220,7 +223,7 @@ export default {
},
series: [
{
- name: e.liner.ImportAndExportStatistics.y[0].name,
+ name: e.caseShell2.ImportAndExportStatistics.y[0].name,
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
@@ -238,10 +241,10 @@ export default {
]),
},
},
- data: e.liner.ImportAndExportStatistics.y[0].data,
+ data: e.caseShell2.ImportAndExportStatistics.y[0].data,
},
{
- name: e.liner.ImportAndExportStatistics.y[1].name,
+ name: e.caseShell2.ImportAndExportStatistics.y[1].name,
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
@@ -259,7 +262,7 @@ export default {
]),
},
},
- data: e.liner.ImportAndExportStatistics.y[1].data,
+ data: e.caseShell2.ImportAndExportStatistics.y[1].data,
},
],
})
@@ -379,9 +382,20 @@ export default {
top: 20,
containLabel: true,
},
+ legend: {
+ data: e.caseShell2.chart2.y.map(val => val.name),
+ right: 'center',
+ top: 0,
+ textStyle: {
+ color: "#fff",
+ },
+ itemWidth: 12,
+ itemHeight: 10,
+ // itemGap: 35
+ },
xAxis: {
type: "category",
- data: e.liner.inventoryStatistics.x,
+ data: e.caseShell2.chart2.x,
axisLine: {
lineStyle: {
color: "white",
@@ -411,7 +425,7 @@ export default {
},
series: [
{
- name: e.liner.inventoryStatistics.y.name,
+ name: e.caseShell2.chart2.y[0].name,
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
@@ -420,22 +434,43 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
- color: "#4adfff",
+ color: "#0bca98",
},
{
offset: 1,
- color: "#3d7aff",
+ color: "#16a144",
+ },
+ ]),
+ },
+ },
+ data: e.caseShell2.chart2.y[0].data,
+ },
+ {
+ name: e.caseShell2.chart2.y[1].name,
+ type: "bar",
+ barWidth: "30%",
+ barMaxWidth: 50,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#0f8ad7",
+ },
+ {
+ offset: 1,
+ color: "#0b30d9",
},
]),
},
},
- data: e.liner.inventoryStatistics.y.data,
+ data: e.caseShell2.chart2.y[1].data,
},
],
})
this.$refs.chart4.setData({
legend: {
- data: ['运行中'],
+ data: ['运行中夹具数量'],
right: 'center',
top: 0,
textStyle: {
@@ -638,6 +673,15 @@ export default {
color: #fff;
letter-spacing: 1px;
}
+.inventoryInfo2{
+ position: absolute;
+ transform: translateY(-50%);
+ font-size: 0.9vw;
+ top: 70.4%;
+ left: 45%;
+ color: #fff;
+ letter-spacing: 1px;
+}
.meter {
position: absolute;
diff --git a/src/views/board/foaming/index2.vue b/src/views/board/foaming/index2.vue
index 418dae6..b498b4e 100644
--- a/src/views/board/foaming/index2.vue
+++ b/src/views/board/foaming/index2.vue
@@ -59,681 +59,683 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 合计
-
-
- 100%
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/board/liner/index.vue b/src/views/board/liner/index.vue
index 32ffc42..aaa3cfc 100644
--- a/src/views/board/liner/index.vue
+++ b/src/views/board/liner/index.vue
@@ -104,9 +104,9 @@ export default {
return {
title: [
'箱壳生产计划',
- '小时入库统计',
- '库存状态',
- '泡前库库存统计',
+ '内胆入库统计',
+ '胆壳库存统计',
+ '泡前库存统计',
'箱体发泡实时状态',
],
meter:30,
@@ -140,7 +140,7 @@ export default {
differenceValue: 1000,
scrollTableOption: {
step: 0.5,
- limitMoveNum: 5,
+ limitMoveNum: 9999999999,
hoverStop: true,
direction: 1,
openWatch: true,
@@ -233,27 +233,6 @@ export default {
},
data: e.liner.ImportAndExportStatistics.y[0].data,
},
- {
- name: e.liner.ImportAndExportStatistics.y[1].name,
- type: "bar",
- barWidth: "30%",
- barMaxWidth: 50,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#4adfff",
- },
- {
- offset: 1,
- color: "#3d7aff",
- },
- ]),
- },
- },
- data: e.liner.ImportAndExportStatistics.y[1].data,
- },
],
})
this.$refs.chart2.setData({
@@ -428,7 +407,7 @@ export default {
})
this.$refs.chart4.setData({
legend: {
- data: ['运行中'],
+ data: ['运行中夹具数量'],
right: 'center',
top: 0,
textStyle: {
diff --git a/src/views/board/week/index.vue b/src/views/board/week/index.vue
index 54a87fb..c657c8e 100644
--- a/src/views/board/week/index.vue
+++ b/src/views/board/week/index.vue
@@ -553,7 +553,7 @@ export default {
fontSize: 0.75 * vw
},
},
- data: [12, 20, 11, 30, 14, 80, 50],
+ data: [12, 20, 11, 30, 14, 80, 50].sort().reverse(),
},
],
})
From 2f69b7311a74540f6a83059397acd371b38c3e18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Fri, 24 Nov 2023 09:21:36 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=95=8C=E9=9D=A2?=
=?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/board/foaming/index2.vue | 1430 +++++++++++++++-------------
1 file changed, 755 insertions(+), 675 deletions(-)
diff --git a/src/views/board/foaming/index2.vue b/src/views/board/foaming/index2.vue
index b498b4e..e167415 100644
--- a/src/views/board/foaming/index2.vue
+++ b/src/views/board/foaming/index2.vue
@@ -60,682 +60,730 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ i }}#车
+
487JFY
+
15-15-15
+
+
+
+
+
+
{{ i }}#车
+
487JFY
+
15-15-15
+
+
+
+
+
+
{{ i }}#车
+
487JFY
+
15-15-15
+
+
+
+
+
+
{{ i }}#车
+
487JFY
+
15-15-15
+
@@ -1402,4 +1450,36 @@ export default {
font-size: 0.7vw;
color: #fff;
}
+
+.tableOne {
+ position: absolute;
+ top: 66%;
+ left: 3.5%;
+ width: 17%;
+ height: 29%;
+}
+
+.tableTwo {
+ position: absolute;
+ top: 66%;
+ left: 20.7%;
+ width: 16.8%;
+ height: 29%;
+}
+
+.tableThree {
+ position: absolute;
+ top: 66%;
+ left: 37.7%;
+ width: 16.8%;
+ height: 29%;
+}
+
+.tableFour {
+ position: absolute;
+ top: 66%;
+ left: 54.7%;
+ width: 16.8%;
+ height: 29%;
+}