Commit e9600160 authored by XieZhiXiong's avatar XieZhiXiong

feat: 添加 AnchorPageHeader组件

parent 4ab0ac71
@import '~antd/es/style/themes/default.less';
.anchor-page-header {
display: flex;
background: #FFFFFF;
&-left {
flex: 1;
overflow: hidden;
}
&-right {
padding-top: 14px;
flex-shrink: 0;
margin-left: 12px;
}
&-heading {
padding: 14px 0;
display: flex;
align-items: center;
&-title {
margin-bottom: 0;
color: rgba(0, 0, 0, 0.85);
font-weight: 600;
font-size: 18px;
line-height: 32px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
&-back {
margin-right: 12px;
font-size: 16px;
cursor: pointer;
&:hover {
color: @primary-color;
}
}
}
\ No newline at end of file
/*
* @Author: XieZhiXiong
* @Date: 2021-05-10 11:36:58
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-10 15:05:20
* @Description: 页面公用锚点头部
*/
import React from 'react';
import { Anchor, Button } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { history } from 'umi';
import styles from './index.less';
export interface AnchorsItem {
/**
* 跳转标识
*/
key: string,
/**
* 名称
*/
name: React.ReactNode,
}
interface IProps {
/**
* 标题
*/
title: React.ReactNode,
/**
* 右侧拓展部分
*/
extra?: React.ReactNode,
/**
* 锚点数据
*/
anchors: AnchorsItem[],
}
const AnchorPageHeader: React.FC<IProps> = (props: IProps) => {
const {
title,
extra,
anchors,
} = props;
const handleBack = () => {
history.goBack();
};
return (
<div className={styles['anchor-page-header']}>
<div className={styles['anchor-page-header-left']}>
<div className={styles['anchor-page-header-heading']}>
<ArrowLeftOutlined
className={styles['anchor-page-header-back']}
onClick={handleBack}
/>
<span className={styles['anchor-page-header-heading-title']}>
{title}
</span>
</div>
<div className={styles['anchor-page-header-content']}>
123
</div>
</div>
{extra ? (
<div className={styles['anchor-page-header-right']}>
{extra}
</div>
) : null}
</div>
);
};
AnchorPageHeader.defaultProps = {
extra: null,
};
export default AnchorPageHeader;
...@@ -5,5 +5,7 @@ ...@@ -5,5 +5,7 @@
white-space: break-spaces; white-space: break-spaces;
} }
} }
height: 50px;
overflow-y: auto;
} }
} }
\ No newline at end of file
...@@ -29,6 +29,7 @@ import { ...@@ -29,6 +29,7 @@ import {
ORDER_TYPE_TENDER_CONTRACT, ORDER_TYPE_TENDER_CONTRACT,
} from '@/constants/order'; } from '@/constants/order';
import { normalizeFiledata, FileData, findLastIndexFlowState } from '@/utils'; import { normalizeFiledata, FileData, findLastIndexFlowState } from '@/utils';
// import AnchorPageHeader from '@/components/AnchorPageHeader';
import AvatarWrap from '@/components/AvatarWrap'; import AvatarWrap from '@/components/AvatarWrap';
import StatusTag from '@/components/StatusTag'; import StatusTag from '@/components/StatusTag';
import EyePreview from '@/components/EyePreview'; import EyePreview from '@/components/EyePreview';
...@@ -380,6 +381,10 @@ const DetailInfo: React.FC<DetailInfoProps> = ({ ...@@ -380,6 +381,10 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
}); });
}; };
const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
console.log('e', e.currentTarget.scrollTop)
};
return ( return (
<Spin spinning={infoLoading}> <Spin spinning={infoLoading}>
<PageHeaderWrapper <PageHeaderWrapper
...@@ -388,6 +393,13 @@ const DetailInfo: React.FC<DetailInfoProps> = ({ ...@@ -388,6 +393,13 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
}} }}
title={ title={
<> <>
{/* <AnchorPageHeader
title="我是标题"
anchors={[]}
extra={(
<div>123</div>
)}
/> */}
<PageHeader <PageHeader
style={{ padding: '0' }} style={{ padding: '0' }}
onBack={() => history.goBack()} onBack={() => history.goBack()}
...@@ -405,7 +417,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({ ...@@ -405,7 +417,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
</> </>
)} )}
> >
<div className={styles['detailInfo-desc']}> <div className={styles['detailInfo-desc']} onScroll={handleScroll}>
<Descriptions <Descriptions
size="small" size="small"
column={3} column={3}
......
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