精品课程

src/components/classify/courselist.js

@@ -370,6 +370,7 @@ class Classify extends Component {
                     <Tabs
                         tabs={tabs}
                         animated={false}
+                        onChange={(tab, index) => this.ontabclick(tab, index)}
                         onTabClick={(tab, index) => this.ontabclick(tab, index)}
                     >
                         <div className='tabs'>

src/components/classify/courselist.scss

@@ -206,8 +206,8 @@
       }
     }
   }
+  .am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
+    background-color: $bg_fff!important;
+  }
 }
 
-html:not([data-scale]) .am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
-  background-color: $bg_fff;
-}

src/components/preferential/index.scss

+.preferential {
+  .search-nav {
+    height: 44px;
+    line-height: 44px;
+    padding: 0 15px;
+    background-color: $bg_f7f9fc;
+    display: flex;
+    justify-content: space-between;
+
+    .am-search {
+      width: 81%;
+      background-color: $bg_f7f9fc;
+    }
+
+    .am-search-input, .am-search-synthetic-ph, .am-search-value {
+      text-align: left;
+      padding-left: 15px;
+      height: 26px;
+      line-height: 26px;
+    }
+
+    .am-search-input {
+      background-color: $bg_EBEFF5;
+      border-radius: 13px;
+    }
+
+    .shopping-cart, .return {
+      font-size: 18px !important;
+    }
+  }
+
+  .class-content {
+    padding: 0 12px;
+    position: relative;
+    margin-top: 15px;
+
+    .v-list-item {
+      padding: 10px 0 0;
+
+      .content {
+        border: none;
+
+        .cover {
+          flex: inherit;
+          width: 42.2%;
+
+          img {
+            width: 100%;
+          }
+
+          .course-status {
+            background-color: rgba(224, 46, 36, 0.6);
+
+          }
+        }
+      }
+
+      .info {
+        width: 52.3%;
+        position: relative;
+        display: block;
+
+        .title {
+          font-size: 16px;
+          color: $color_333;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .contact {
+          font-size: 14px;
+          color: $color_666;
+          margin-top: 14px;
+        }
+
+        .des {
+          position: absolute;
+          bottom: 0;
+
+          .course-price {
+            .price {
+              color: $red;
+              font-size: 12px;
+            }
+
+            .new {
+              color: $red;
+              font-size: 16px;
+            }
+
+            .old {
+              color: $color_999;
+              font-size: 12px;
+              display: inline-block;
+              margin-left: 15px;
+              text-decoration: line-through;
+            }
+          }
+
+          .isbuy {
+            display: inline-block;
+            width: 61px;
+            height: 18px;
+            background-color: $bg_active;
+            border-radius: 9px;
+            color: $white;
+            font-size: 12px;
+            text-align: center;
+            line-height: 18px;
+          }
+        }
+      }
+    }
+
+    .tabs {
+      display: flex;
+      margin-top: 5px;
+      margin-bottom: 50px;
+    }
+
+    .am-tabs-default-bar-tab {
+      width: 82px !important;
+      height: 24px;
+      color: $bg_active;
+      border: 1px solid $bg_active!important;
+      border-radius: 12px;
+      margin-right: 20px;
+      font-size: 12px;
+    }
+    .am-tabs-default-bar-tab-active {
+      background: linear-gradient(90deg, $bg_active 0%, #5077F3 100%);
+      color: $white;
+    }
+    .am-tabs-default-bar-underline {
+      display: none;
+    }
+
+    .am-whitespace.am-whitespace-md {
+      height: 0 !important;
+    }
+    .am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
+      background-color: rgba(0,0,0,0);
+    }
+
+  }
+}
+

src/router.js

@@ -7,6 +7,7 @@ import Classify from './components/classify';
 import Study from './components/study';
 import My from './components/my';
 import CourseList from './components/classify/courselist';
+import Preferential from './components/preferential/index';
 import Search from './components/search/index'
 
 
@@ -20,6 +21,7 @@ const router = () => (
             <Route path='/study' component={Study}></Route>
             <Route path='/my' component={My}></Route>
             <Route path='/courselist' component={CourseList}></Route>
+            <Route path='/preferential' component={Preferential}></Route>
             <Route path='/search' component={Search}></Route>
         </Switch>
         <Menu />