You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
149 lines
5.1 KiB
149 lines
5.1 KiB
from dash import html
|
|
import feffery_antd_components as fac
|
|
import feffery_utils_components as fuc
|
|
|
|
from flask import session
|
|
from config.global_config import ApiBaseUrlConfig
|
|
|
|
|
|
def render_page_top():
|
|
|
|
return html.Div(
|
|
[
|
|
html.Div(
|
|
fac.AntdAvatar(
|
|
id='dashboard-avatar-info',
|
|
mode='image',
|
|
src=f"{ApiBaseUrlConfig.BaseUrl}{session.get('user_info').get('avatar')}&token={session.get('Authorization')}",
|
|
size='large'
|
|
),
|
|
className='avatar',
|
|
),
|
|
html.Div(
|
|
[
|
|
html.Div(
|
|
fac.AntdText(f"早安，{session.get('user_info').get('nick_name')}，祝你开心每一天！"),
|
|
className='content-title',
|
|
),
|
|
html.Div('交互专家 |蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED')
|
|
],
|
|
className='content',
|
|
),
|
|
html.Div(
|
|
[
|
|
html.Div(
|
|
fac.AntdStatistic(
|
|
title='项目数',
|
|
value=56
|
|
),
|
|
className='stat-item'
|
|
),
|
|
html.Div(
|
|
fac.AntdStatistic(
|
|
title='团队内排名',
|
|
value=8,
|
|
suffix='/ 24'
|
|
),
|
|
className='stat-item'
|
|
),
|
|
html.Div(
|
|
fac.AntdStatistic(
|
|
title='项目访问',
|
|
value=2223
|
|
),
|
|
className='stat-item'
|
|
),
|
|
],
|
|
className='extra-content'
|
|
),
|
|
fuc.FefferyStyle(
|
|
rawStyle='''
|
|
.page-header-content {
|
|
display: flex;
|
|
}
|
|
|
|
.page-header-content .avatar {
|
|
flex: 0 1 72px;
|
|
}
|
|
|
|
.page-header-content .avatar > span {
|
|
display: block;
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 72px;
|
|
}
|
|
|
|
.page-header-content .content {
|
|
position: relative;
|
|
top: 4px;
|
|
margin-left: 24px;
|
|
line-height: 22px;
|
|
color: rgba(0,0,0,.45);
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.page-header-content .content .content-title {
|
|
margin-bottom: 12px;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 28px;
|
|
color: rgba(0,0,0,.85);
|
|
}
|
|
|
|
.extra-content {
|
|
float: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.extra-content .stat-item {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 0 32px;
|
|
}
|
|
|
|
.extra-content .stat-item > p:first-child {
|
|
margin-bottom: 4px;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
color: rgba(0,0,0,.45);
|
|
}
|
|
|
|
.extra-content .stat-item > p {
|
|
margin: 0;
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
color: rgba(0,0,0,.85);
|
|
}
|
|
|
|
.extra-content .stat-item > p > span {
|
|
font-size: 20px;
|
|
color: rgba(0,0,0,.45);
|
|
}
|
|
|
|
.extra-content .stat-item::after {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 0;
|
|
width: 1px;
|
|
height: 40px;
|
|
background-color: #e8e8e8;
|
|
content: '';
|
|
}
|
|
|
|
.extra-content .stat-item:last-child {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.extra-content .stat-item:last-child::after {
|
|
display: none;
|
|
}
|
|
'''
|
|
)
|
|
],
|
|
className='page-header-content',
|
|
style={
|
|
'padding': '12px',
|
|
'marginBottom': '24px',
|
|
'boxShadow': 'rgba(0, 0, 0, 0.1) 0px 4px 12px'
|
|
}
|
|
)
|
|
|