<template>
|
<div class="ClusterList">
|
<div class="title">集群列表</div>
|
<div v-if="showCluster">
|
<div class="List">
|
<ClusterCard
|
v-for="i in listlength"
|
:key="i"
|
@showDetail="showList"
|
></ClusterCard>
|
<div
|
class="ClusterCard"
|
v-for="i in emptylength"
|
:key="'empty' + i"
|
></div>
|
</div>
|
<el-pagination
|
@current-change="refrash"
|
@size-change="handleSizeChange"
|
:small="true"
|
:current-page="page"
|
:page-size="size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page-sizes="[5, 10, 15, 20, 25]"
|
:total="total"
|
background
|
></el-pagination>
|
</div>
|
|
<EquipmentForm v-else @hiddenList="hiddenList"></EquipmentForm>
|
</div>
|
</template>
|
|
<script>
|
import ClusterCard from "@/views/hashrate/components/ClusterCard";
|
import EquipmentForm from "@/views/hashrate/components/EquipmentForm";
|
export default {
|
mounted() {
|
this.getEmptyElement();
|
this.addSizeListener();
|
},
|
components: {
|
ClusterCard,
|
EquipmentForm,
|
},
|
data() {
|
return {
|
showCluster: true,
|
listlength: 11,
|
emptylength: 0,
|
page: 1,
|
size: 10,
|
total: 100,
|
};
|
},
|
methods: {
|
addSizeListener() {
|
window.onresize = () => {
|
this.getEmptyElement();
|
};
|
},
|
//回填空白项
|
getEmptyElement() {
|
// 获取屏幕总宽度(即浏览器窗口的宽度)
|
var allWidth = document.body.clientWidth;
|
|
// 获取单个item项宽度(即单个item元素的宽度是多少)
|
var dom = document.querySelector(".ClusterCard").scrollWidth;
|
|
// [结果取整] 计算一行能放多少个item项(即一排能放多少个元素)
|
var line = parseInt(allWidth / dom);
|
|
// 计算需要补多少个item项(元素不需要补的时候(=0)必须作处理)
|
// 公式: ( [总item项数量] % [一行能放多少个item项] )
|
// 如果等于0则证明不需要补 | 反之一行减去补全
|
var result =
|
this.listlength % line == 0 ? 0 : line - (this.listlength % line);
|
|
//通知视图进行补元素(渲染视图上的隐藏元素)
|
this.emptylength = result;
|
},
|
handleSizeChange() {},
|
refrash() {},
|
showList() {
|
this.showCluster = false;
|
},
|
hiddenList() {
|
this.showCluster = true;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.ClusterList {
|
box-sizing: border-box;
|
margin-bottom: 60px;
|
padding: 20px;
|
background-color: #fff;
|
.title {
|
margin-bottom: 30px;
|
padding-left: 10px;
|
height: 20px;
|
line-height: 20px;
|
border-left: 4px solid #0065ff;
|
font-size: 16px;
|
font-weight: 700;
|
}
|
|
.List {
|
display: flex;
|
flex-wrap: wrap;
|
|
.ClusterCard {
|
margin-right: 24px;
|
margin-bottom: 24px;
|
padding: 20px;
|
flex: 1;
|
}
|
}
|
|
.el-pagination ::v-deep {
|
margin-top: 30px;
|
text-align: right;
|
height: 24px;
|
.el-pagination__sizes {
|
margin-right: 0;
|
}
|
|
button {
|
margin: 0;
|
background-color: #fff;
|
border: 1px solid #c0c5cc;
|
border-radius: 2px;
|
}
|
|
.number {
|
background-color: #fff;
|
|
&:not(.disabled):hover {
|
color: #0065ff;
|
}
|
|
&:not(.disabled).active {
|
background-color: #0065ff;
|
color: #fff;
|
}
|
}
|
|
.el-input .el-input__inner {
|
padding-left: 0;
|
height: 22px;
|
line-height: 22px;
|
|
&:hover,
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
|
.el-input__suffix {
|
height: 120%;
|
top: -1px;
|
}
|
|
.el-pagination__total {
|
font-weight: 700;
|
}
|
}
|
}
|
</style>
|
