|
|
|
@@ -1,175 +1,472 @@ |
|
|
|
<!-- |
|
|
|
* @Author: zwq |
|
|
|
* @Date: 2020-12-29 16:37:56 |
|
|
|
* @Author: gtz |
|
|
|
* @Date: 2022-03-03 09:16:10 |
|
|
|
* @LastEditors: zwq |
|
|
|
* @LastEditTime: 2022-03-04 16:54:51 |
|
|
|
* @Description: |
|
|
|
* @LastEditTime: 2022-03-09 14:17:23 |
|
|
|
* @Description: file content |
|
|
|
* @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue |
|
|
|
--> |
|
|
|
<template> |
|
|
|
<el-dialog |
|
|
|
:title="$t('module.basicData.visual.stock') | i18nFilter" |
|
|
|
:visible.sync="visible" |
|
|
|
top="5vh" |
|
|
|
> |
|
|
|
<div> |
|
|
|
<div class="mainDiv" style="margin:10px 0 100px"> |
|
|
|
<div class="title">货架一</div> |
|
|
|
<div class="flexDiv"> |
|
|
|
<div class="dashboard-container"> |
|
|
|
<el-card class="dashboard-main"> |
|
|
|
<el-row class="dashboard-title"> |
|
|
|
<div class="dashboard-header-line" /> |
|
|
|
<div class="dashboard-header-title">WMS库存信息</div> |
|
|
|
</el-row> |
|
|
|
<el-row class="dashboard-legend"> |
|
|
|
<div |
|
|
|
v-for="item in cassetteStatusList" |
|
|
|
:key="'cassette' + item.id" |
|
|
|
class="dashboard-legend-cassette" |
|
|
|
> |
|
|
|
<div |
|
|
|
v-for="count in 5" |
|
|
|
:key="count" |
|
|
|
class="wareBox" |
|
|
|
:class="[ |
|
|
|
count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox', |
|
|
|
{ active: count === isActive } |
|
|
|
]" |
|
|
|
@click="selectBox(count)" |
|
|
|
> |
|
|
|
<div class="plat">库位{{ count }}</div> |
|
|
|
</div> |
|
|
|
class="dashboard-legend-cassette-cricle" |
|
|
|
:style="{ background: item.color }" |
|
|
|
/> |
|
|
|
{{ item.name }} |
|
|
|
</div> |
|
|
|
<div class="flexDiv"> |
|
|
|
<div |
|
|
|
v-for="count in 5" |
|
|
|
:key="count" |
|
|
|
class="wareBox" |
|
|
|
:class="[ |
|
|
|
count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox', |
|
|
|
{ active: count + 5 === isActive } |
|
|
|
]" |
|
|
|
@click="selectBox(count + 5)" |
|
|
|
> |
|
|
|
<div class="plat">库位{{ count + 5 }}</div> |
|
|
|
</div> |
|
|
|
| |
|
|
|
<div |
|
|
|
v-for="item in portAttributeList" |
|
|
|
:key="'port' + item.id" |
|
|
|
class="dashboard-legend-port" |
|
|
|
:style="{ background: item.color }" |
|
|
|
> |
|
|
|
{{ item.name }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="line" /> |
|
|
|
<div class="mainDiv" style="margin:100px 0 10px"> |
|
|
|
<div class="title">货架二</div> |
|
|
|
<div class="flexDiv"> |
|
|
|
<div |
|
|
|
v-for="count in 5" |
|
|
|
:key="count" |
|
|
|
class="wareBox" |
|
|
|
:class="[ |
|
|
|
count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox', |
|
|
|
{ active: count+10 === isActive } |
|
|
|
]" |
|
|
|
@click="selectBox(count+10)" |
|
|
|
> |
|
|
|
<div class="plat">库位{{ count+10 }}</div> |
|
|
|
</div> |
|
|
|
<div class="dashboard-legend-btn"> |
|
|
|
<el-button type="primary" size="mini" @click="submitLinkList">{{ |
|
|
|
"btn.submit" | i18nFilter |
|
|
|
}}</el-button> |
|
|
|
</div> |
|
|
|
<div class="flexDiv"> |
|
|
|
<div |
|
|
|
v-for="count in 5" |
|
|
|
:key="count" |
|
|
|
class="wareBox" |
|
|
|
:class="[ |
|
|
|
count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox', |
|
|
|
{ active: count+15 === isActive } |
|
|
|
]" |
|
|
|
@click="selectBox(count+15)" |
|
|
|
<div class="dashboard-legend-search"> |
|
|
|
<el-select |
|
|
|
v-model="current" |
|
|
|
size="mini" |
|
|
|
placeholder="请选择库存范围" |
|
|
|
@change="handleChange" |
|
|
|
> |
|
|
|
<div class="plat">库位{{ count+15 }}</div> |
|
|
|
</div> |
|
|
|
<el-option |
|
|
|
v-for="item in totalPage" |
|
|
|
:key="'select' + item" |
|
|
|
:label="'第' + item + '页'" |
|
|
|
:value="item" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button> |
|
|
|
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
</el-row> |
|
|
|
<el-row |
|
|
|
v-if="current * 80 < shelfList[0].rowList[0].portList.length" |
|
|
|
class="dashboard-layout" |
|
|
|
:gutter="12" |
|
|
|
> |
|
|
|
<el-col |
|
|
|
v-for="item in 4" |
|
|
|
:key="'shelfbox' + item" |
|
|
|
class="dashboard-layout-shelf-box" |
|
|
|
:span="6" |
|
|
|
> |
|
|
|
<el-row> |
|
|
|
<el-col |
|
|
|
v-for="(i, index) in shelfList" |
|
|
|
:key="item + 'shelf' + i.id" |
|
|
|
:span="12" |
|
|
|
class="dashboard-layout-shelf" |
|
|
|
> |
|
|
|
<el-row> |
|
|
|
<el-col |
|
|
|
v-for="z in i.rowList" |
|
|
|
:key="item + 'shelf' + i + 'row' + z.id" |
|
|
|
:span="12" |
|
|
|
class="dashboard-layout-row" |
|
|
|
> |
|
|
|
<div |
|
|
|
v-for="x in 20" |
|
|
|
:key="item + 'shelf' + i + 'row' + z + 'item' + x" |
|
|
|
class="dashboard-layout-item" |
|
|
|
:style="{ |
|
|
|
background: |
|
|
|
portAttributeObj[ |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].attribute |
|
|
|
], |
|
|
|
cursor: |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].attribute === 3 |
|
|
|
? 'not-allowed' |
|
|
|
: 'pointer', |
|
|
|
color: |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].attribute === 3 |
|
|
|
? '#A2A8B5' |
|
|
|
: '', |
|
|
|
border: |
|
|
|
selectStorageList.some(StorageItem=>StorageItem.id===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) |
|
|
|
? '1px solid red' : '' |
|
|
|
}" |
|
|
|
@click=" |
|
|
|
setType( |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
] |
|
|
|
) |
|
|
|
" |
|
|
|
> |
|
|
|
<div |
|
|
|
v-if=" |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].attribute !== 3 |
|
|
|
" |
|
|
|
class="dashboard-layout-item-cricle" |
|
|
|
:style="{ |
|
|
|
background: |
|
|
|
cassetteStatusObj[ |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].cassetteList[0].status |
|
|
|
] |
|
|
|
}" |
|
|
|
/> |
|
|
|
{{ |
|
|
|
z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)] |
|
|
|
.name |
|
|
|
}} |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<div class="dashboard-layout-footer"> |
|
|
|
{{ |
|
|
|
"第" + (index + 1) + "排(" + ((current - 1) * 4 + item) + ")" |
|
|
|
}} |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row v-else class="dashboard-layout" :gutter="12"> |
|
|
|
<el-col |
|
|
|
v-for="item in Math.ceil( |
|
|
|
(shelfList[0].rowList[0].portList.length - (current - 1) * 80) / 20 |
|
|
|
)" |
|
|
|
:key="'shelfbox' + item" |
|
|
|
class="dashboard-layout-shelf-box" |
|
|
|
:span="6" |
|
|
|
> |
|
|
|
<el-row> |
|
|
|
<el-col |
|
|
|
v-for="(i, index) in shelfList" |
|
|
|
:key="item + 'shelf' + i.id" |
|
|
|
:span="12" |
|
|
|
class="dashboard-layout-shelf" |
|
|
|
> |
|
|
|
<el-row |
|
|
|
v-if=" |
|
|
|
item < |
|
|
|
Math.ceil( |
|
|
|
(shelfList[0].rowList[0].portList.length - |
|
|
|
(current - 1) * 80) / |
|
|
|
20 |
|
|
|
) |
|
|
|
" |
|
|
|
> |
|
|
|
<el-col |
|
|
|
v-for="z in i.rowList" |
|
|
|
:key="item + 'shelf' + i + 'row' + z.id" |
|
|
|
:span="12" |
|
|
|
class="dashboard-layout-row" |
|
|
|
> |
|
|
|
<div |
|
|
|
v-for="x in 20" |
|
|
|
:key="item + 'shelf' + i + 'row' + z + 'item' + x" |
|
|
|
class="dashboard-layout-item" |
|
|
|
:style="{ |
|
|
|
background: |
|
|
|
portAttributeObj[ |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].attribute |
|
|
|
], |
|
|
|
cursor: |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].attribute === 3 |
|
|
|
? 'not-allowed' |
|
|
|
: 'pointer', |
|
|
|
color: |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].attribute === 3 |
|
|
|
? '#A2A8B5' |
|
|
|
: '', |
|
|
|
border: |
|
|
|
selectStorageList.some(StorageItem=>StorageItem.id===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) |
|
|
|
? '1px solid red' : '' |
|
|
|
}" |
|
|
|
@click=" |
|
|
|
setType( |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
] |
|
|
|
) |
|
|
|
" |
|
|
|
> |
|
|
|
<div |
|
|
|
v-if=" |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].attribute !== 3 |
|
|
|
" |
|
|
|
class="dashboard-layout-item-cricle" |
|
|
|
:style="{ |
|
|
|
background: |
|
|
|
cassetteStatusObj[ |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].cassetteList[0].status |
|
|
|
] |
|
|
|
}" |
|
|
|
/> |
|
|
|
{{ |
|
|
|
z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)] |
|
|
|
.name |
|
|
|
}} |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row v-else> |
|
|
|
<el-col |
|
|
|
v-for="z in i.rowList" |
|
|
|
:key="item + 'shelf' + i + 'row' + z.id" |
|
|
|
:span="12" |
|
|
|
class="dashboard-layout-row" |
|
|
|
> |
|
|
|
<div |
|
|
|
v-for="x in shelfList[0].rowList[0].portList.length - |
|
|
|
(item - 1) * 20 - |
|
|
|
(current - 1) * 80" |
|
|
|
:key="item + 'shelf' + i + 'row' + z + 'item' + x" |
|
|
|
class="dashboard-layout-item" |
|
|
|
:style="{ |
|
|
|
background: |
|
|
|
portAttributeObj[ |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].attribute |
|
|
|
], |
|
|
|
cursor: |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].attribute === 3 |
|
|
|
? 'not-allowed' |
|
|
|
: 'pointer', |
|
|
|
color: |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].attribute === 3 |
|
|
|
? '#A2A8B5' |
|
|
|
: '', |
|
|
|
border: |
|
|
|
selectStorageList.some(StorageItem=>StorageItem.id===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) |
|
|
|
? '1px solid red' : '' |
|
|
|
}" |
|
|
|
@click=" |
|
|
|
setType( |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
] |
|
|
|
) |
|
|
|
" |
|
|
|
> |
|
|
|
<div |
|
|
|
v-if=" |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].attribute !== 3 |
|
|
|
" |
|
|
|
class="dashboard-layout-item-cricle" |
|
|
|
:style="{ |
|
|
|
background: |
|
|
|
cassetteStatusObj[ |
|
|
|
z.portList[ |
|
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1) |
|
|
|
].cassetteList[0].status |
|
|
|
] |
|
|
|
}" |
|
|
|
/> |
|
|
|
{{ |
|
|
|
z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)] |
|
|
|
.name |
|
|
|
}} |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<div class="dashboard-layout-footer"> |
|
|
|
{{ |
|
|
|
"第" + (index + 1) + "排(" + ((current - 1) * 4 + item) + ")" |
|
|
|
}} |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-card> |
|
|
|
<process-storage-type |
|
|
|
v-if="typeVisible" |
|
|
|
ref="typeRef" |
|
|
|
@refreshDataList="setStorageList" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import testdata from './testdata' |
|
|
|
import processStorageType from './processStorageType' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'Dashboard', |
|
|
|
components: { processStorageType }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
visible: false, |
|
|
|
isActiveArr: [] |
|
|
|
} |
|
|
|
return testdata |
|
|
|
}, |
|
|
|
created() { |
|
|
|
console.log(this.shelfList) |
|
|
|
this.totalPage = Math.ceil( |
|
|
|
this.shelfList[0].rowList[0].portList.length / 80 |
|
|
|
) |
|
|
|
this.init() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
init() { |
|
|
|
this.visible = true |
|
|
|
this.selectStorageList.splice(0, this.selectStorageList.length) |
|
|
|
}, |
|
|
|
setType(item) { |
|
|
|
if (item.attribute !== 3) { |
|
|
|
if (this.selectStorageList.findIndex(StorageItem => StorageItem.id === item.id) + 1) { |
|
|
|
this.selectStorageList.splice(this.selectStorageList.findIndex(StorageItem => StorageItem.id === item.id), 1) |
|
|
|
} else { |
|
|
|
this.typeVisible = true |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.typeRef.init(item.id) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
selectBox(count) { |
|
|
|
this.isActive.push(count) |
|
|
|
setStorageList(id, type) { |
|
|
|
const obj = { |
|
|
|
id, |
|
|
|
type |
|
|
|
} |
|
|
|
this.selectStorageList.push(obj) |
|
|
|
}, |
|
|
|
// 表单提交 |
|
|
|
dataFormSubmit() { |
|
|
|
this.visible = false |
|
|
|
handleChange(v) { |
|
|
|
console.log(v) |
|
|
|
}, |
|
|
|
submitLinkList() { |
|
|
|
console.log('submitLinkList') |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.mainDiv { |
|
|
|
border: 2px solid rgb(145, 174, 255); |
|
|
|
padding: 20px 0; |
|
|
|
} |
|
|
|
.flexDiv { |
|
|
|
display: -webkit-flex; |
|
|
|
display: flex; |
|
|
|
-webkit-justify-content: space-around; |
|
|
|
justify-content: space-around; |
|
|
|
} |
|
|
|
.title { |
|
|
|
float: left; |
|
|
|
width: 50px; |
|
|
|
font-size: 40px; |
|
|
|
line-height: 45px; |
|
|
|
} |
|
|
|
/* 边框特效 */ |
|
|
|
.wareBox:hover { |
|
|
|
background: linear-gradient(to left, deepskyblue, deepskyblue) left top |
|
|
|
no-repeat, |
|
|
|
linear-gradient(to bottom, deepskyblue, deepskyblue) left top no-repeat, |
|
|
|
linear-gradient(to left, deepskyblue, deepskyblue) right top no-repeat, |
|
|
|
linear-gradient(to bottom, deepskyblue, deepskyblue) right top no-repeat, |
|
|
|
linear-gradient(to left, deepskyblue, deepskyblue) left bottom no-repeat, |
|
|
|
linear-gradient(to bottom, deepskyblue, deepskyblue) left bottom no-repeat, |
|
|
|
linear-gradient(to left, deepskyblue, deepskyblue) right bottom no-repeat, |
|
|
|
linear-gradient(to left, deepskyblue, deepskyblue) right bottom no-repeat; |
|
|
|
background-size: 5px 30px, 30px 5px; |
|
|
|
color: black; |
|
|
|
border-radius: 5px; |
|
|
|
background-color: rgb(190, 224, 241); |
|
|
|
} |
|
|
|
.wareBox { |
|
|
|
cursor: pointer; |
|
|
|
margin: 10px; |
|
|
|
height: 80px; |
|
|
|
line-height: 70px; |
|
|
|
text-align: center; |
|
|
|
border: 2px solid #cdcdc5; |
|
|
|
border-radius: 5px; |
|
|
|
} |
|
|
|
.plat { |
|
|
|
min-width: 80px; |
|
|
|
} |
|
|
|
.line { |
|
|
|
margin: 20px 0; |
|
|
|
height: 2px; |
|
|
|
background-color: gray; |
|
|
|
border-left: 200px solid #ddd; |
|
|
|
border-right: 200px solid #ddd; |
|
|
|
} |
|
|
|
.enableBox { |
|
|
|
background: rgb(0, 189, 16); |
|
|
|
} |
|
|
|
.disableBox { |
|
|
|
background: #ddd; |
|
|
|
cursor: not-allowed; |
|
|
|
} |
|
|
|
.end-plat { |
|
|
|
background-color: rgb(195, 246, 255); |
|
|
|
} |
|
|
|
.active { |
|
|
|
border: 2px solid red; |
|
|
|
<style lang="scss" scoped> |
|
|
|
.dashboard-container { |
|
|
|
background: #f2f4f9; |
|
|
|
min-height: calc(100vh - 134px); |
|
|
|
overflow-x: scroll; |
|
|
|
padding: 0 16px; |
|
|
|
padding-top: 24px; |
|
|
|
font-size: 14px; |
|
|
|
.dashboard-main { |
|
|
|
width: 100%; |
|
|
|
min-width: 1380px; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 8px; |
|
|
|
min-height: calc(100vh - 186px); |
|
|
|
.dashboard-title { |
|
|
|
.dashboard-header-line { |
|
|
|
display: inline-block; |
|
|
|
width: 4px; |
|
|
|
height: 16px; |
|
|
|
background: #0b58ff; |
|
|
|
border-radius: 1px; |
|
|
|
position: relative; |
|
|
|
top: 2px; |
|
|
|
margin-right: 4px; |
|
|
|
} |
|
|
|
.dashboard-header-title { |
|
|
|
display: inline-block; |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFangSC-Regular, PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: #000000; |
|
|
|
line-height: 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
.dashboard-legend { |
|
|
|
margin-top: 20px; |
|
|
|
.dashboard-legend-cassette { |
|
|
|
display: inline-block; |
|
|
|
margin-right: 24px; |
|
|
|
.dashboard-legend-cassette-cricle { |
|
|
|
display: inline-block; |
|
|
|
width: 12px; |
|
|
|
height: 12px; |
|
|
|
border-radius: 6px; |
|
|
|
} |
|
|
|
} |
|
|
|
.dashboard-legend-port { |
|
|
|
display: inline-block; |
|
|
|
height: 24px; |
|
|
|
line-height: 24px; |
|
|
|
border-radius: 4px; |
|
|
|
padding: 0 16px; |
|
|
|
margin-left: 24px; |
|
|
|
} |
|
|
|
.dashboard-legend-btn { |
|
|
|
margin: 0 20px; |
|
|
|
float: right; |
|
|
|
} |
|
|
|
.dashboard-legend-search { |
|
|
|
float: right; |
|
|
|
} |
|
|
|
} |
|
|
|
.dashboard-layout { |
|
|
|
margin: 20px 0; |
|
|
|
.dashboard-layout-shelf-box { |
|
|
|
.dashboard-layout-footer { |
|
|
|
text-align: center; |
|
|
|
margin-top: 12px; |
|
|
|
} |
|
|
|
.dashboard-layout-shelf { |
|
|
|
padding: 0 8px; |
|
|
|
.dashboard-layout-row { |
|
|
|
padding: 0 1px; |
|
|
|
.dashboard-layout-item { |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
height: 32px; |
|
|
|
box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8); |
|
|
|
border-radius: 2px 4px 4px 2px; |
|
|
|
margin-bottom: 8px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
.dashboard-layout-item-cricle { |
|
|
|
display: inline-block; |
|
|
|
width: 12px; |
|
|
|
height: 12px; |
|
|
|
border-radius: 6px; |
|
|
|
margin-right: 6px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
