详情

src/components/classify/index.scss

 .class-box {
   background-color: $bg_fff;
-}
 
 .class-title {
   width: 100%;
@@ -74,3 +73,4 @@
     border-radius: 5px;
   }
 }
+}

src/components/detail/index.scss

+.detail-box {
+  position: relative;
+
+  .toapp {
+    position: absolute;
+    right: 0;
+    top: 117px;
+    width: 82px;
+    height: 32px;
+    text-align: center;
+    line-height: 32px;
+    background: linear-gradient(-90deg, $bg_active 0%, $bg_0078FF 100%);
+    border-radius: 16px 0 0 16px;
+    font-size: 12px;
+    color: $white;
+    z-index: 1;
+  }
+
+  .detail-header {
+    height: 44px;
+    line-height: 44px;
+    padding: 0 15px;
+    background-color: $bg_f7f9fc;
+    display: flex;
+    justify-content: space-between;
+
+    .shopping-cart, .return {
+      font-size: 18px !important;
+    }
+
+    .herder {
+      font-size: 16px;
+      color: $color_202426;
+    }
+  }
+
+  .course-content {
+    margin: 15px 12px 0 12px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid $sp_e7eaf1;
+    display: flex;
+    justify-content: space-between;
+
+    .cover {
+      width: 42.2%;
+      height: 108px;
+
+      img {
+        border-radius: 3px;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .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: 10px;
+      }
+
+      .des {
+        position: absolute;
+        bottom: 0;
+
+        .course-price {
+          .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: 66px;
+          height: 27px;
+          background-color: $bg_ccc;
+          color: $white;
+          border-radius: 3px;
+          font-size: 12px;
+          text-align: center;
+          line-height: 27px;
+        }
+      }
+    }
+  }
+
+  .promise {
+    padding: 15px 12px;
+    height: 66px;
+
+    label {
+      float: left;
+      display: block;
+      text-align: center;
+      font-size: 12px;
+      width: 54px;
+      height: 18px;
+      background-color: $bg_333;
+      color: $white;
+      border-radius: 6px 0 6px 0;
+    }
+
+    p {
+      width: 75%;
+      float: left;
+      margin-left: 15px;
+      font-size: 12px;
+      color: $color_333;
+    }
+  }
+
+  .group, .vip {
+    margin: 0 12px;
+    padding: 10px 12px;
+    text-align: center;
+    color: $white;
+    font-size: 12px;
+    border-radius: 6px 6px 0 0;
+  }
+
+  .group {
+    background-color: $bg_82BBFB;
+  }
+
+  .vip {
+    background: linear-gradient(-90deg, $bg_EBA216 0%, $bg_EBC05A 100%);
+  }
+
+  .share-ranking {
+    height: 60px;
+    line-height: 25px;
+    padding: 15px 12px;
+    border-top: 8px solid $bg_f5f5f5;
+    display: flex;
+    position: relative;
+    font-size: 12px;
+    .title {
+      font-size: 14px;
+      margin-right: 12px;
+    }
+    .ranking-mess {
+      margin-right: 20px;
+      img {
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        vertical-align: middle;
+      }
+      i {
+        display: inline-block;
+        margin-left: 5px;
+        color: $color_333;
+        font-style: normal;
+      }
+    }
+    .ranking-ellipsis {
+      width: 22px;
+      height: 22px;
+      border-radius: 50%;
+    }
+    .share {
+      position: absolute;
+      right: 12px;
+      padding: 5px 6px;
+      border:1px solid $red;
+      border-radius:3px;
+      color: $red;
+      background-color: $bg_fff;
+    }
+  }
+
+  .course-detail {
+    border-top: 8px solid $bg_f5f5f5;
+    margin-bottom: 50px;
+
+    .am-whitespace-md {
+      height: 0;
+    }
+
+    .am-tabs-default-bar-tab {
+      width: auto !important;
+    }
+
+    .am-tabs-default-bar-content {
+      border-bottom: 1px solid $sp_e7eaf1;
+      display: flex;
+      justify-content: space-around;
+    }
+
+    .am-tabs-default-bar-tab-active {
+      color: $active;
+      border-bottom: 1px solid $active !important;
+    }
+
+    .am-tabs-default-bar-underline {
+      display: none;
+    }
+
+    .am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
+      background-color: $bg_fff !important;
+    }
+
+    .introduce {
+      padding: 15px 12px;
+      font-size: 14px;
+      color: $color_555;
+    }
+
+    .outline {
+      padding: 15px 0 15px 12px;
+      background-color: $bg_f5f5f5;
+
+      .stagebox {
+        margin-bottom: 15px;
+      }
+
+      .stage {
+        font-size: 14px;
+        color: $color_333;
+      }
+
+      .classhour {
+        height: 33px;
+        background-color: $bg_fff;
+        color: $color_4B4B4B;
+        line-height: 33px;
+        font-size: 14px;
+        padding-left: 10px;
+        margin-top: 10px;
+        margin-bottom: 5px;
+      }
+
+      .points {
+        font-size: 12px;
+        color: $color_666;
+        margin-left: 10px;
+        margin-top: 10px;
+      }
+
+      .red {
+        color: $color_FE2F2F;
+      }
+    }
+  }
+
+}
\ No newline at end of file

src/router.js

@@ -9,6 +9,7 @@ import My from './components/my';
 import CourseList from './components/classify/courselist';
 import Preferential from './components/preferential/index';
 import Search from './components/search/index'
+import Detail from './components/detail/index'
 
 
 
@@ -23,6 +24,7 @@ const router = () => (
             <Route path='/courselist' component={CourseList}></Route>
             <Route path='/preferential' component={Preferential}></Route>
             <Route path='/search' component={Search}></Route>
+            <Route path='/detail' component={Detail}></Route>
         </Switch>
         <Menu />
     </Router>

src/styles/variable.scss

@@ -10,6 +10,9 @@ $color_555: #555;
 $color_666: #666;
 $color_999: #999;
 $color_606: #606060;
+$color_202426: #202426;
+$color_4B4B4B: #4B4B4B;
+$color_FE2F2F: #FE2F2F;
 
 
 /*
@@ -27,17 +30,23 @@ $font_14: 14px;
 $font_12: 12px;
 
 
-
 /*
  *  @ 背景颜色
  */
 $bg_active: #09f;
+$bg_0078FF: #0078FF;
 $bg_fff: #fff;
 $bg_000: #000;
 $bg_f4f4f4: #f4f4f4;
 $bg_f5f5f5: #f5f5f5;
 $bg_f7f9fc: #f7f9fc;
 $bg_EBEFF5: #EBEFF5;
+$bg_ccc: #ccc;
+$bg_333: #333;
+$bg_82BBFB: #82BBFB;
+$bg_EBC05A: #EBC05A;
+$bg_EBA216: #EBA216;
+
 
 
 /*