[PageHeader]页头UI验收问题修改

Author: liyuan-meng

src/components/pageHeader/index.js

@@ -7,40 +7,40 @@ import './index.less';
 const classSelector = `${prefixCls}-page-header`;
 
 export default function PageHeader(props) {
-	const { title, subTitle, className, size, style, onBack, breadcrumb } = props;
-	const hasBreadCrumbElement = React.isValidElement(breadcrumb);
-	const splitWrap = <span className="split"> | </span>;
+  const { title, subTitle, className, size, style, onBack, breadcrumb } = props;
+  const hasBreadCrumbElement = React.isValidElement(breadcrumb);
+  const splitWrap = <span className="split">|</span>;
 
-	return (
-		<div>
-			{hasBreadCrumbElement && breadcrumb}
-			<div
-				className={classnames(`${classSelector}`,
-					`${classSelector}-${size}`,
-					className)}
-					style={style}
-					>
-					{onBack && <i className={classnames(`${classSelector}-icon`, 'cloud-icon icon-left')} onClick={onBack}/>}
-					<span>{title}</span>
-					{subTitle && splitWrap}
-					{subTitle && <span className={`${classSelector}-subtitle`}>{subTitle}</span>}
-			</div>
-		</div>
-		
-	);
+  return (
+    <div>
+      {hasBreadCrumbElement && breadcrumb}
+      <div
+        className={classnames(`${classSelector}`,
+          `${classSelector}-${size}`,
+          className)}
+        style={style}
+      >
+        {onBack && <i className={classnames(`${classSelector}-icon`, 'cloud-icon icon-left')} onClick={onBack} />}
+        <span>{title}</span>
+        {subTitle && splitWrap}
+        {subTitle && <span className={`${classSelector}-subtitle`}>{subTitle}</span>}
+      </div>
+    </div>
+
+  );
 }
 
 PageHeader.propTypes = {
-	title: PropTypes.string,
-	subTitle: PropTypes.string,
-	onBack: PropTypes.func,
-	size: PropTypes.string,
-	breadcrumb: PropTypes.element
+  title: PropTypes.string,
+  subTitle: PropTypes.string,
+  onBack: PropTypes.func,
+  size: PropTypes.string,
+  breadcrumb: PropTypes.element,
 };
 PageHeader.defaultProps = {
-	title: '',
-	subTitle: '',
-	onBack: null,
-	breadcrumb: null,
-	size: 'default'
+  title: '',
+  subTitle: '',
+  onBack: null,
+  breadcrumb: null,
+  size: 'default',
 };

src/components/pageHeader/index.less

@@ -3,30 +3,42 @@
 @breadcrumbs-prefix-cls: ~'@{prefix}-page-header';
 
 .@{prefix}-breadcrumbs {
-  margin-bottom: 8px;
+  margin-bottom: 20px;
 }
 .@{breadcrumbs-prefix-cls} {
+  display: flex;
+  align-items: center;
   font-size: 16px;
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
   color: rgba(0, 0, 0, 0.85);
-  &.@{breadcrumbs-prefix-cls}-large,
-  &.@{breadcrumbs-prefix-cls}-large .@{breadcrumbs-prefix-cls}-icon {
-    font-size: 20px;
-  }
-  &.@{breadcrumbs-prefix-cls}-default,
-  &.@{breadcrumbs-prefix-cls}-default .@{breadcrumbs-prefix-cls}-icon {
+  &.@{breadcrumbs-prefix-cls}-large {
     font-size: 16px;
   }
-  &.@{breadcrumbs-prefix-cls}-small,
-  &.@{breadcrumbs-prefix-cls}-small .@{breadcrumbs-prefix-cls}-icon {
+  &.@{breadcrumbs-prefix-cls}-default {
     font-size: 14px;
   }
+  &.@{breadcrumbs-prefix-cls}-small {
+    font-size: 12px;
+  }
   .@{breadcrumbs-prefix-cls}-icon {
     cursor: pointer;
+    font-size: 16px;
+    margin-right: 4px;
+    color: @gray-7;
   }
   .@{breadcrumbs-prefix-cls}-subtitle {
-    color: rgba(0, 0, 0, 0.25);
+    color: @gray-7;
     font-weight: normal;
   }
+  .split {
+    display: inline-block;
+    text-align: center;
+    width: 16px;
+    height: 16px;
+    margin-left: 4px;
+    margin-right: 4px;
+    color: @gray-6;
+    cursor: default;
+  }
 }