修改首页样式

src/containers/Home/Index.js

@@ -3,12 +3,19 @@ import PropTypes from 'prop-types';
 import styles from './style.css';
 import { Toast } from 'antd-mobile';
 import UserInfoContext from '../../context/userinfo-context';
-import bannerIcon from './images/home_page_banner@2x.png';
-import repairIcon from './images/repairs@2x.png';
-import repairDealIcon from './images/repairs_dispose@2x.png';
-import publicCarIcon from './images/service_car@2x.png';
-import publicCarDealIcon from './images/service_car_dispose@2x.png';
+import bgImg from './images/bg@2x.png';
+import bannerIcon from './images/banner@2x.png';
+import repairIcon from './images/repairs-new@2x.png';
+import repairDealIcon from './images/repair_process@2x.png';
+import publicCarIcon from './images/official_car_order@2x.png';
+import publicCarDealIcon from './images/official_car_order_process@2x.png';
 
+const HomePageStyle = {
+  width: '100%',
+  height: '100%',
+  background: `url(${bgImg})`,
+  overflowY: 'auto',
+};
 export class Index extends React.Component {
   static propTypes = {
     name: PropTypes.string,
@@ -29,31 +36,31 @@ export class Index extends React.Component {
   };
   render() {
     return (
-      <div className={styles.HomePage}>
+      <div style={HomePageStyle}>
         <div className={styles.banner}>
           <img src={bannerIcon} alt="" />
         </div>
         <div className={styles.iconBox}>
           <div
-            className={styles.iconItem}
+            className={styles.repairIcon}
             onClick={() => this.validate('CSHQ0001', '/Repair')}
           >
             <img src={repairIcon} alt="" />
           </div>
           <div
-            className={styles.iconItem}
+            className={styles.publicCarIcon}
             onClick={() => this.validate('CSHQ0003', '/publicCar')}
           >
             <img src={publicCarIcon} alt="" />
           </div>
           <div
-            className={styles.iconItem}
+            className={styles.repairDealIcon}
             onClick={() => this.validate('CSHQ0002', '/RepairDeal')}
           >
             <img src={repairDealIcon} alt="" />
           </div>
           <div
-            className={styles.iconItem}
+            className={styles.publicCarDealIcon}
             onClick={() => this.validate('CSHQ0004', '/publicCarDeal')}
           >
             <img src={publicCarDealIcon} alt="" />

src/containers/Home/style.css

 .banner {
-  height: 341px;
+  height: 384px;
+  margin: 17px 20.5px;
 }
 .iconBox {
-  display: flex;
+  /* display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 18.7px 20.5px 0;
+  justify-content: space-between; */
+  position: relative;
+  height: 600px;
+  margin: 0 20.5px 0;
 }
 .iconItem {
+  position: absolute;
   width: 290px;
-  height: 293.5px;
-  margin-bottom: 18.7px;
+  /* height: 293.5px; */
+  /* margin-bottom: 18.7px; */
+}
+.repairIcon {
+  composes: iconItem;
+  height: 409px;
+}
+.publicCarIcon {
+  composes: iconItem;
+  height: 317.44px;
+  right: 0;
+}
+.repairDealIcon {
+  composes: iconItem;
+  height: 256px;
+  bottom: 0;
+}
+.publicCarDealIcon {
+  composes: iconItem;
+  height: 328.53px;
+  right: 0;
+  bottom: 0;
 }