限时免费

src/components/limit-free/index.js

@@ -8,9 +8,10 @@ import VList from '@/common/v-list-base'
 
 class LimitFree extends Component {
 
+  nav
   state = {
-    tabs: new Array(5).fill('a').map((item, i) => ({
-      title: String.fromCharCode(97 + i)
+    tabs: new Array(10).fill('a').map((item, i) => ({
+      title: `${i + 1}th Tab`
     })),
     courses: [
       {
@@ -37,29 +38,51 @@ class LimitFree extends Component {
         price: 99,
         price1: 199,
       },
-    ]
+    ],
+    navItemStyle: {}
   }
 
   componentDidMount() {
-
+    this.initializeNav()
   }
 
   handleClick = id => {
 
   }
 
+  initializeNav = () => {
+    const {tabs} = this.state
+    const navItemNum = 5
+    const navItemLen = tabs.length
+    console.log(getComputedStyle(this.nav).paddingLeft)
+    if(navItemLen <= navItemNum){
+      return
+    }
+
+  }
+
   render() {
-    const {tabs, courses} = this.state
+    const {tabs, courses, navItemStyle} = this.state
     return (
       <div className='limit-free'>
         <HeaderBar arrow={true} title={'限时免费'}></HeaderBar>
         <div className="banner">
           <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/banner.png" alt=""/>
         </div>
-        <nav>
+        <nav ref={el => this.nav = el}>
+          <div className="prev-cover"></div>
           <ul>
-            <li></li>
+            {
+              tabs && !!tabs.length && tabs.map((item, index) => {
+                return (
+                  <li key={index} className={index === 0 ? 'active' : ''} style={navItemStyle}>
+                    {item.title}
+                  </li>
+                )
+              })
+            }
           </ul>
+          <div className="next-cover"></div>
         </nav>
         <WhiteSpace/>
         <div className="course-list">
@@ -107,6 +130,7 @@ class LimitFree extends Component {
                       <VList img={item.img}
                              handleClick={this.handleClick}
                              info={info}
+                             key={index}
                       />
                     )
                   })

src/components/limit-free/index.scss

@@ -2,11 +2,59 @@
   background: #F9F9FB;
 
   .banner {
+    font-size: 0;
+
     img {
       width: 100%;
     }
   }
 
+  nav {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 39px;
+    padding: 0 18px;
+    background: #fff;
+
+    .prev-cover, .next-cover {
+      position: absolute;
+      top: 0;
+      width: 44px;
+      height: 39px;
+    }
+
+    .prev-cover {
+      left: 0;
+      background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+    }
+
+    .next-cover {
+      right: 0;
+      background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+
+    }
+
+    ul {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    li {
+      margin-right: 23px;
+      text-align: center;
+      height: 100%;
+      line-height: 39px;
+
+      &.active {
+        color: #09f;
+        border-bottom: 1px solid #09f;
+      }
+    }
+  }
+
   .course-list {
     border-top: 1px solid transparent;
     padding: 0 12px;
@@ -14,7 +62,7 @@
 
   }
 
-  .courses li:nth-last-child(1){
+  .courses li:nth-last-child(1) {
     margin-bottom: 0;
   }
 
@@ -46,8 +94,6 @@
   }
 
   .info {
-    //position: relative;
-    //width: 100%;
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
@@ -79,10 +125,6 @@
     }
 
     .bottom {
-      //position: absolute;
-      //left: 0;
-      //bottom: 0;
-      //width: 100%;
       align-self: flex-end;
     }
   }