feat:调整首页的样式

src/modules/home/Home.jsx

@@ -261,8 +261,9 @@ class Home extends React.Component {
     };
     return (
       <div className="home-page">
-        <div className="home-title">数据概况</div>
-        <div className="data-box">
+        <div className="data-wrap">
+          <div className="home-title">数据概况</div>
+          <div className="data-box">
           <div className="data-item">
             <div className="header">
               <img className="header-icon" src="https://image.xiaomaiketang.com/xm/wAaFtjeRsM.png" />
@@ -360,65 +361,67 @@ class Home extends React.Component {
             </div>
           </div>
         </div>
-        <div className="home-title">学习概况</div>
-        <div className="study-box">
-          <div className="study-item">
-            <div className="study-title">课程学习排行榜</div>
-            <div className="study-header">
-              <div className="study-tab">
-                <span 
-                  className={`tab${scheduleType === 'LIVE' ? ' selected' : ''}`}
-                  onClick={() => this.setState({ scheduleType: 'LIVE' }, () => this.getHotCourse())}
-                >直播课</span>
-                <span 
-                  className={`tab${scheduleType === 'VOICE' ? ' selected' : ''}`}
-                  onClick={() => this.setState({ scheduleType: 'VOICE' }, () => this.getHotCourse())}
-                >视频课</span>
-                <span 
-                  className={`tab${scheduleType === 'PICTURE' ? ' selected' : ''}`}
-                  onClick={() => this.setState({ scheduleType: 'PICTURE' }, () => this.getHotCourse())}
-                >图文课</span>
-              </div>
-              <div className="study-select">
-                <span className="select-word">（{moment().subtract(timeRange - 1, 'day').format('MM.DD')} ~ {moment().format('MM.DD')}）</span>
-                <Select
-                  style={{ width: 88 }}
-                  value={timeRange}
-                  onChange={(value) => {
-                    this.setState({ timeRange: value }, () => this.getHotCourse());
-                  }}
-                >
-                  <Option value="7">近7天</Option>
-                  <Option value="15">近15天</Option>
-                  <Option value="30">近30天</Option>
-                </Select>
-              </div>
-            </div>
-            {_.isEmpty(list) ?
-              <div className="study-empty">
-                <img src="https://image.xiaomaiketang.com/xm/52dmait5Bx.png" />
-                <div>暂无课程上榜</div>
+        </div>
+        <div className="study-wrap">
+          <div className="home-title">学习概况</div>
+            <div className="study-box">
+            <div className="study-item">
+              <div className="study-title">课程学习排行榜</div>
+              <div className="study-header">
+                <div className="study-tab">
+                  <span 
+                    className={`tab${scheduleType === 'LIVE' ? ' selected' : ''}`}
+                    onClick={() => this.setState({ scheduleType: 'LIVE' }, () => this.getHotCourse())}
+                  >直播课</span>
+                  <span 
+                    className={`tab${scheduleType === 'VOICE' ? ' selected' : ''}`}
+                    onClick={() => this.setState({ scheduleType: 'VOICE' }, () => this.getHotCourse())}
+                  >视频课</span>
+                  <span 
+                    className={`tab${scheduleType === 'PICTURE' ? ' selected' : ''}`}
+                    onClick={() => this.setState({ scheduleType: 'PICTURE' }, () => this.getHotCourse())}
+                  >图文课</span>
+                </div>
+                <div className="study-select">
+                  <span className="select-word">（{moment().subtract(timeRange - 1, 'day').format('MM.DD')} ~ {moment().format('MM.DD')}）</span>
+                  <Select
+                    style={{ width: 88 }}
+                    value={timeRange}
+                    onChange={(value) => {
+                      this.setState({ timeRange: value }, () => this.getHotCourse());
+                    }}
+                  >
+                    <Option value="7">近7天</Option>
+                    <Option value="15">近15天</Option>
+                    <Option value="30">近30天</Option>
+                  </Select>
+                </div>
               </div>
-              : list.map((item, index) => (
-                <div className={`table-item${index % 2 ? '' : ' odd'}`} key={item.id}>
-                  {index < 3 ?
-                    <span className="table-number"><img src={this.showNumber(index)} className="table-image" /></span>
-                    : <span className="table-number">{index + 1}</span>
-                  }
-                  <div className="table-data">
-                    <div className="table-name">
-                      <Tooltip title={item.courseName}>
-                        {item.courseName}
-                      </Tooltip>
+              {_.isEmpty(list) ?
+                <div className="study-empty">
+                  <img src="https://image.xiaomaiketang.com/xm/52dmait5Bx.png" />
+                  <div>暂无课程上榜</div>
+                </div>
+                : list.map((item, index) => (
+                  <div className={`table-item${index % 2 ? '' : ' odd'}`} key={item.id}>
+                    {index < 3 ?
+                      <span className="table-number"><img src={this.showNumber(index)} className="table-image" /></span>
+                      : <span className="table-number">{index + 1}</span>
+                    }
+                    <div className="table-data">
+                      <div className="table-name">
+                        <Tooltip title={item.courseName}>
+                          {item.courseName}
+                        </Tooltip>
+                      </div>
+                      <div className="table-tag">{item.categoryName}</div>
                     </div>
-                    <div className="table-tag">{item.categoryName}</div>
+                    <span className="table-study">{item.studyNum || 0}人已学习</span>
                   </div>
-                  <span className="table-study">{item.studyNum || 0}人已学习</span>
-                </div>
-                ))
-            }
-          </div>
-          <div className="study-item">
+                  ))
+              }
+            </div>
+            <div className="study-item">
             <div className="study-title">培训计划完成情况
                <Tooltip overlayClassName="data-plan-tooltip" title="若某人加入多个培训计划，则需完成所有已加入的培训计划后，才视为已完成培训">
                 <span className="iconfont icon">&#xe61d;</span>
@@ -500,6 +503,7 @@ class Home extends React.Component {
               <div className="word">完成培训</div>
             </div>
           </div>
+          </div>
         </div>
         <div className="study-chart">
           <div className="study-title">学习人数与时长