Commit 7cebc2fc by 姜雷

调整数据首页样式

parent c9d35d40
......@@ -56,6 +56,7 @@ const actions = {
})
.catch(err => {
console.error(err);
commit(FETCH_DATA, false);
});
},
};
......
......@@ -55,6 +55,7 @@ const actions = {
})
.catch(err => {
console.error(err);
commit(FETCH_DATA, false);
});
},
};
......
......@@ -103,7 +103,8 @@ const actions = {
data: {
...entity,
},
}).then(res => {
})
.then(res => {
let list = res.data;
if (data && data.updatePercentList) {
commit(GET_PERCENT_DATA, list);
......@@ -116,6 +117,10 @@ const actions = {
commit(GET_CONSUME_DATA, list);
commit(LOADING_AREA, false);
}
})
.catch(err => {
console.error(err);
commit(LOADING_AREA, false);
});
},
fetchReportList({ commit }, entity) {
......
......@@ -95,14 +95,18 @@ export default {
}
.el-input,
.filter-item-label {
width: auto;
min-width: 40px;
}
.Dashboard-Radio {
display: flex;
align-items: center;
justify-self: flex-end;
.Dashboard-Radio-item {
margin: 0 10px 0 0;
font-size: 12px;
margin: 0 5px 0 0;
.el-radio__label {
padding-left: 2px;
}
}
}
}
......@@ -113,12 +117,17 @@ export default {
border-bottom: 1px solid #f1f1f1;
.filter-item {
margin: 0 0 0 10px;
.filter-item-input {
width: auto;
}
}
}
.Dashboard-DataCard {
&:first-child {
flex: 2;
}
&:nth-child(2) {
flex: 2.5;
flex: 2;
}
&:last-child {
flex: 1;
......@@ -168,12 +177,12 @@ export default {
// height: 400px;
.Dashboard-SearchBar {
align-items: center;
justify-content: space-around;
justify-content: space-between;
padding: 0;
height: 70px;
border-bottom: 1px solid #f1f1f1;
.filter-item {
margin: 0 10px 0 0;
margin: 0 0 0 10px;
.filter-item-input---normal {
width: 113px;
}
......@@ -205,17 +214,22 @@ export default {
}
}
.Dashboard-DataCard {
&:first-child {
flex: 2;
}
&:nth-child(2) {
flex: 1.5;
}
&:last-child {
flex: 1.5;
}
}
}
}
@media screen and (max-width: $bigScreenWidth) {
.Dashboard {
.Dashboard-title {
font-size: 16px;
font-size: 14px;
}
.Dashboard-SearchBar {
padding: 10px 0 10px;
......
<template>
<div class="Dashboard-Equipment">
<div
class="Dashboard-Equipment"
:style="`width:${width}px`"
>
<template v-if="show">
<div
v-for="(item, index) in data.slice(0, 5)"
:key="index"
......@@ -25,8 +29,16 @@
</div>
<div
class="Dashboard-Equipment-icon"
v-else-if="index === 3"
>
<img src="@/assets/images/dashboard/icon_4@2x.png" />
</div>
<div
class="Dashboard-Equipment-icon"
v-else
>NO.{{ index + 1 }}</div>
>
<img src="@/assets/images/dashboard/icon_5@2x.png" />
</div>
<div class="Dashboard-Equipment-name">{{ item.equipmentNumber }}</div>
<div
class="Dashboard-Equipment-location"
......@@ -36,6 +48,7 @@
</div>
<div class="Dashboard-Equipment-money">{{ item.money.toFixed(2) }}</div>
</div>
</template>
</div>
</template>
......@@ -48,6 +61,19 @@ export default {
default: () => [],
},
},
data() {
return {
show: false,
width: 0,
};
},
mounted() {
let boxDom = document.querySelector('.EquipmentList');
let listDom = document.querySelector('.Dashboard-Equipment');
this.width = boxDom.clientWidth;
this.show = true;
},
};
</script>
......@@ -80,7 +106,7 @@ export default {
width: 64px;
}
.Dashboard-Equipment-location {
width: 200px;
width: 160px;
height: 1em;
overflow: hidden;
text-overflow: ellipsis;
......@@ -89,7 +115,7 @@ export default {
.Dashboard-Equipment-money {
font-size: 16px;
text-align: right;
width: 116px;
width: 100px;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment