<template>
|
<div class="home-main">
|
<div class="home-header-welcome">
|
<div class="welcome-left">
|
<div class="left-avatar" />
|
<div class="left-tips">
|
<div>Hi jack，欢迎使用ZT-LIMS</div>
|
<div>今天是2023年07月07日 星期五</div>
|
</div>
|
</div>
|
<div class="welcome-right">
|
<div class="right-centent">
|
<div>即将超期待办</div>
|
<div>暂无</div>
|
</div>
|
<div />
|
<div class="right-centent">
|
<div>已超期待办</div>
|
<div>21</div>
|
</div>
|
</div>
|
</div>
|
<div class="content-main" />
|
</div>
|
</template>
|
|
<script>
|
export default {
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.home-main{
|
.home-header-welcome{
|
width: 100%;
|
background: #fff;
|
height: 84px;
|
display: flex;
|
border-bottom: 1px solid #f0f2f5;
|
padding: 8px 24px 12px 24px;
|
justify-content: space-between;
|
.welcome-left{
|
display: flex;
|
align-items: center;
|
height: 100%;
|
.left-avatar{
|
width: 56px;
|
height: 56px;
|
margin-right: 24px;
|
background: #0077DB;
|
border-radius: 50%;
|
}
|
.left-tips{
|
height: 80%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
>div:nth-child(1){
|
font-size: 20px;
|
color: #303133;
|
}
|
>div:nth-child(2){
|
font-size: 14px;
|
color: #606266;
|
}
|
}
|
}
|
.welcome-right{
|
width: 250px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.right-centent{
|
height: 80%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: flex-end;
|
>div:nth-child(1){
|
color: #909399;
|
font-size: 14px;
|
}
|
>div:nth-child(2){
|
font-size: 24px;
|
color: #c0c4cc;
|
}
|
}
|
>div:nth-child(2){
|
width: 2px;
|
height: 70%;
|
background: #f0f2f5;
|
}
|
}
|
}
|
}
|
</style>
|
