添加图片

src/pages/InsuredInfo.jsx

@@ -7,6 +7,9 @@ import IconAIA from '../assets/img/aia-icon.jpg';
 import IconDetail from '../assets/img/detail.png';
 import IconCancel from '../assets/img/cancel.png';
 import IconCalculate from '../assets/img/calculate.png';
+import IconCustomer from 'assets/img/customer.png';
+import IconFile from 'assets/img/file.png';
+import IconMoney from 'assets/img/money.png';
 
 import TouchOpacity from '../components/TouchOpacity';
 import TabTitle from './InsuredsInfo.components/TabTitle';
@@ -109,9 +112,18 @@ export default function(props) {
     <div className={styles.page}>
       <div className={styles.header}>
         <img alt="logo" src={IconAIA} className={styles.headerImg} />
-        <TabTitle title={'客户信息'} />
-        <TabTitle title={'保单信息'} />
-        <TabTitle title={'借/领/退款'} />
+        <TabTitle>
+          <img alt="customer" src={IconCustomer} className={styles.titleIcon}/>
+          <span>客户管理</span>
+        </TabTitle>
+        <TabTitle>
+          <img alt="policy" src={IconFile}  className={styles.titleIcon}/>
+          <span>保单信息</span>
+        </TabTitle>
+        <TabTitle>
+          <img alt="pay" src={IconMoney}  className={styles.titleIcon}/>
+          <span>借/领/退款</span>
+        </TabTitle>
         <div>C161361507</div>
       </div>
       <div className={styles.headerExt}></div>

src/pages/InsuredInfo.module.scss

+@import 'assets/css/common.scss';
 
 .page{
   width: 100vw;
@@ -26,6 +27,15 @@
   display: block;
 }
 
+.titleIcon{
+  margin-right: 0.1rem;
+  width: 0.46rem;
+  height: 0.46rem;
+  border-radius: 0.23rem;
+  border: 1px solid #FFFFFF;
+  background-color: $primaryColor;
+}
+
 .main{
   background: #EDE9E3;
   margin: -0.2rem 0.05rem;

src/pages/insuredsInfo.components/TabTitle.jsx

@@ -12,13 +12,13 @@ class TabTitle extends React.Component {
     this.setState({ selected: !this.state.selected });
   };
   render() {
-    const { title } = this.props;
+    const { children } = this.props;
     return (
       <div
         className={this.state.selected ? styles.titleContentSelected : styles.titleContent}
         onClick={this.toggleCurrentTab}
       >
-        <span>{title}</span>
+        {children}
       </div>
     );
   }

src/pages/insuredsInfo.components/TableTitle.module.scss

 .titleContent{
-  width: 10vw;
-  height: 7vh;
-  font-size: 1.5vw;
+  user-select: none;
+  height: 0.7rem;
+  font-size: 0.16rem;
   text-align: center;
   align-items: center;
-  line-height: 6vh;
+  line-height: 0.6rem;
   color: #FFFFFF;
-  padding: 5px;
-  border-radius: 5px;
+  padding: 0.05rem 0.2rem;
+  border-radius: 0.05rem;
 }
 
 .titleContentSelected{