限时免费首页页面

src/components/Index/index.scss

 #chatBtn {
-  bottom: 60px!important;
+  bottom: 60px !important;
 }
+
 .index-box {
   overflow: hidden;
   background-color: $bg_fff;
@@ -511,7 +512,7 @@
         text-align: center;
         height: 47px;
 
-        button,a {
+        button, a {
           width: 60px;
           height: 27px;
           background-color: $bg_active;
@@ -524,7 +525,8 @@
           margin-left: -30px;
           bottom: 10px;
         }
-        a{
+
+        a {
           width: 90px;
           line-height: 27px;
           margin-left: -45px;
@@ -740,9 +742,89 @@
   //  //.is-visible {
   //  //  background-image: none;
   //  //}
+
+  .limit-free {
+    padding: 0 15px;
+    color: #333;
+
+    h2 {
+      display: flex;
+      align-items: center;
+      margin: 15px 0;
+      font-size: 15px;
+    }
+
+    .hot {
+      display: inline-block;
+      width: 25px;
+      height: 14px;
+      margin-left: 5px;
+      background: rgba(255, 64, 0, 1);
+      border-radius: 7px 7px 7px 0;
+      color: #fff;
+      text-align: center;
+      line-height: 14px;
+      font-size: 12px;
+    }
+
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+
+      li {
+        margin-right: 15px;
+        margin-top: 0;
+        margin-bottom: 20px;
+      }
+
+      & li:nth-child(2n) {
+        margin-right: 0;
+      }
+    }
+
+    .origin-price {
+      color: #999;
+      font-size: 12px;
+      text-decoration: line-through;
+    }
+
+    .bottom {
+      margin-top: 5px;
+      span{
+        margin-right: 5px;
+      }
+      span:nth-child(3){
+        margin-right: 0;
+      }
+    }
+
+    $red: #FF2121;
+
+    .bottom span:nth-child(1), .bottom button:nth-child(1) {
+      margin-right: 6px;
+    }
+
+    .current-price, .free {
+      color: $red;
+      font-size: 15px;
+    }
+
+    button {
+      width: 61px;
+      height: 18px;
+      background: rgba(0, 153, 255, 1);
+      border-radius: 9px;
+      text-align: center;
+      color: #fff;
+      font-size: 12px;
+      -webkit-appearance: none;
+      outline: 0;
+      border: 0;
+    }
+  }
 }
 
-.index-box + .nav-bar + .year19-index{
+.index-box + .nav-bar + .year19-index {
   display: none;
 }