index.scss 13.8 KB
Newer Older
xuzhenghua committed
1 2 3
#chatBtn {
  bottom: 60px!important;
}
xuzhenghua committed
4
.index-box {
xuzhenghua committed
5
  overflow: hidden;
xuzhenghua committed
6
  background-color: $bg_fff;
xuzhenghua committed
7

xuzhenghua committed
8 9 10 11 12
  .header {
    width: 100%;
    height: 44px;
    background-color: $bg_fff;
    padding: 10px 15px;
xuzhenghua committed
13 14
    position: fixed;
    z-index: 52;
xuzhenghua committed
15

xuzhenghua committed
16 17 18 19
    .logo {
      width: 78px;
      height: 20px;
    }
xuzhenghua committed
20

xuzhenghua committed
21
    .to-app {
xuzhenghua committed
22 23
      display: inline-block;
      text-align: center;
xuzhenghua committed
24 25 26
      margin-left: 10px;
      width: 88px;
      height: 22px;
xuzhenghua committed
27
      line-height: 22px;
xuzhenghua committed
28 29 30 31 32 33 34
      border: 1px solid $bg_active;
      border-radius: 11px;
      background-color: $bg_fff;
      font-size: 12px;
      color: $active;
      vertical-align: top;
    }
xuzhenghua committed
35

xuzhenghua committed
36
    .search {
xuzhenghua committed
37
      font-size: 22px !important;
xuzhenghua committed
38 39
      float: right;
      margin-top: -6px;
xuzhenghua committed
40 41
    }
  }
xuzhenghua committed
42

xuzhenghua committed
43 44 45 46
  .zw_height {
    height: 44px;
  }

xuzhenghua committed
47
  .index-swiper {
xuzhenghua committed
48
    height: 168px;
xuzhenghua committed
49

xuzhenghua committed
50
    .swiper-container {
xuzhenghua committed
51 52
      height: 100% !important;

xuzhenghua committed
53 54 55 56 57 58 59
      .swiper-slide {
        img {
          width: 100%;
          height: 168px;
          border-radius: 6px;
        }
      }
xuzhenghua committed
60
    }
xuzhenghua committed
61

xuzhenghua committed
62 63 64 65 66
    .swiper-pagination {
      width: 100%;
      left: 188px !important;
      text-align: right;
      padding-right: 55px;
xuzhenghua committed
67 68

      .pagination-item {
xuzhenghua committed
69 70 71 72 73
        width: 8px !important;
        height: 8px !important;
        background-color: $bg_fff !important;
        opacity: 0.5;
      }
xuzhenghua committed
74

xuzhenghua committed
75
      .active {
xuzhenghua committed
76 77 78
        width: 18px !important;
        height: 7px !important;
        border-radius: 4px !important;
xuzhenghua committed
79 80
        background-color: $bg_fff !important;
        opacity: 1;
xuzhenghua committed
81 82 83
      }
    }
  }
xuzhenghua committed
84

xuzhenghua committed
85

xuzhenghua committed
86
  /*热门推荐轮播*/
xuzhenghua committed
87 88 89 90 91 92 93
  .category {
    .swiper-container {
      height: 106px !important;
      margin-top: 15px;
      margin-bottom: 5px;
      touch-action: pan-y;
      border-radius: 3px;
xuzhenghua committed
94

xuzhenghua committed
95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
      .swiper-pagination {
        bottom: 5px !important;

        .pagination-item {
          width: 8px !important;
          height: 8px !important;
          background-color: $bg_fff !important;
          opacity: 0.5;
        }

        .active {
          background-color: $bg_fff !important;
          opacity: 1;
        }
      }
    }
xuzhenghua committed
111
  }
xuzhenghua committed
112

xuzhenghua committed
113

xuzhenghua committed
114 115 116 117 118
  /*
  页面tab
  */
  .tabbox {
    width: 100%;
xuzhenghua committed
119
    height: 113px;
xuzhenghua committed
120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
    padding: 20px 17px;

    ul {
      display: flex;
      justify-content: space-between;
      text-align: center;

      li {
        width: 64px;

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }

        span {
          color: $color_606;
          font-size: 14px;
          display: block;
          margin-top: 10px;
        }
      }
xuzhenghua committed
143
    }
xuzhenghua committed
144
  }
xuzhenghua committed
145

xuzhenghua committed
146 147 148
  /*
  近期直播
  */
xuzhenghua committed
149 150 151 152 153 154 155 156 157 158 159
  .lives {
    width: 100%;
    padding: 20px 15px 0 15px;

    .title {
      font-size: 16px;
      color: $color_333;
      display: inline-block;
    }
  }

xuzhenghua committed
160 161 162 163 164
  .scroll-box {
    width: 100%;
    overflow: auto;
    position: relative;
    margin-top: 15px;
xuzhenghua committed
165

xuzhenghua committed
166
    .scroll-list {
xuzhenghua committed
167 168
      height: 102px;
      margin: 5px 0;
xuzhenghua committed
169
      display: flex;
xuzhenghua committed
170
      overflow: hidden;
xuzhenghua committed
171
      position: absolute;
xuzhenghua committed
172
      padding: 5px;
xuzhenghua committed
173

xuzhenghua committed
174 175 176 177 178 179 180 181 182
      .scroll-item {
        display: inline-block;
        width: 301px;
        height: 100%;
        margin-right: 20px;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background-color: $bg_fff;
        border-radius: 5px;

xuzhenghua committed
183
        .item-box {
xuzhenghua committed
184 185 186 187
          width: 100%;
          height: 100%;
          padding: 10px;
          display: flex;
xuzhenghua committed
188 189 190 191 192 193 194 195 196 197 198 199
          position: relative;

          .no-start, .start {
            display: inline-block;
            position: absolute;
            top: 15px;
            padding: 3px 8px;
            color: $white;
            font-size: 12px;
            text-align: center;
            border-radius: 0 20px 20px 0;
          }
xuzhenghua committed
200 201

          .no-start {
xuzhenghua committed
202 203
            background-color: $red;
          }
xuzhenghua committed
204 205

          .start {
xuzhenghua committed
206 207
            background-color: $bg_active;
          }
xuzhenghua committed
208 209 210 211 212

          .item-img {
            width: 100px;
            height: 72px;
            margin-right: 8px;
zhanghaozhe committed
213
            border-radius: 3px;
xuzhenghua committed
214 215 216 217 218 219 220 221 222
          }

          .item-content .item-title, .item-teacher, .item-time {
            max-width: 173px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
          }

xuzhenghua committed
223
          .item-btn {
xuzhenghua committed
224
            padding: 0 12px;
xuzhenghua committed
225 226
            height: 20px;
            text-align: center;
xuzhenghua committed
227
            border: none;
xuzhenghua committed
228 229 230 231 232 233 234
            background: linear-gradient(60deg, $bg_active 0%, $bg_0080FF 100%);
            border-radius: 10px;
            font-size: 14px;
            color: $white;
            margin-top: 10px;
          }

xuzhenghua committed
235 236 237
          .item-title {
            font-size: 16px;
            color: $color_333;
xuzhenghua committed
238 239
            height: 16px;
            line-height: 16px;
xuzhenghua committed
240 241 242 243 244 245 246 247 248 249 250 251 252 253 254
          }

          .item-teacher {
            font-size: 14px;
            color: $color_555;
            margin-top: 6px;
          }

          .item-time {
            font-size: 12px;
            color: $color_999;
            margin-top: 11px;
          }
        }
      }
xuzhenghua committed
255
    }
xuzhenghua committed
256 257 258 259 260
  }

  ::-webkit-scrollbar {
    display: none;
  }
xuzhenghua committed
261

xuzhenghua committed
262 263 264 265 266

  .category-vip {
    width: 100%;
    height: 106px;
    border-radius: 5px;
xuzhenghua committed
267 268
    margin-top: 15px;
    margin-bottom: 5px;
xuzhenghua committed
269 270 271 272 273

    img {
      width: 100%;
      height: 106px;
      border-radius: 5px;
xuzhenghua committed
274
    }
xuzhenghua committed
275
  }
xuzhenghua committed
276

xuzhenghua committed
277 278 279 280 281 282 283 284 285
  /*课程公共样式*/
  .category {
    width: 100%;
    padding: 20px 15px 15px 15px;

    .title {
      font-size: 16px;
      color: $color_333;
      display: inline-block;
xuzhenghua committed
286 287
    }

xuzhenghua committed
288 289
    .more {
      color: $active;
xuzhenghua committed
290
      font-size: 12px;
xuzhenghua committed
291
      float: right;
xuzhenghua committed
292 293
    }
  }
xuzhenghua committed
294

xuzhenghua committed
295
  .index-course-detail {
xuzhenghua committed
296
    width: 100%;
xuzhenghua committed
297 298 299
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
xuzhenghua committed
300
    background-color: $bg_fff;
xuzhenghua committed
301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319

    .audition {
      position: absolute;
      top: 10px;
      width: 54px;
      height: 18px;
      line-height: 18px;
      background-color: $bg_active;
      font-size: 12px;
      color: $white;
      text-align: center;
      border-radius: 1px;

      .iconerji {
        font-size: 14px !important;
        display: inline-block;
        margin-right: 4px;
      }
    }
xuzhenghua committed
320

xuzhenghua committed
321 322 323 324 325 326 327 328 329 330
    .return_bash {
      position: absolute;
      top: 0;
      right: 0;
      width: 31px;
      height: 18px;
      background: url("./image/return.icon.png") no-repeat;
      background-size: 100% 100%;
    }

xuzhenghua committed
331

xuzhenghua committed
332 333
    .course-price {
      margin-top: 15px;
xuzhenghua committed
334

xuzhenghua committed
335 336 337 338
      .new {
        color: $red;
        font-size: 16px;
      }
xuzhenghua committed
339

xuzhenghua committed
340 341 342 343 344 345 346 347
      .old {
        color: $color_999;
        font-size: 12px;
        display: inline-block;
        margin-left: 15px;
        text-decoration: line-through;
      }
    }
xuzhenghua committed
348

xuzhenghua committed
349
    .isbuy {
xuzhenghua committed
350
      display: inline-block;
xuzhenghua committed
351 352 353 354 355 356 357 358 359
      margin-top: 15px;
      width: 61px;
      height: 18px;
      background-color: $bg_active;
      border-radius: 9px;
      color: $white;
      font-size: 12px;
      text-align: center;
      line-height: 18px;
xuzhenghua committed
360 361 362
    }
  }

xuzhenghua committed
363 364 365 366
  /*
  横向滚动
  */
  .scroll-box {
xuzhenghua committed
367
    height: 112px;
xuzhenghua committed
368 369
  }

xuzhenghua committed
370

xuzhenghua committed
371 372 373 374 375 376 377
  /*
  底部查看所有课程
  */
  .all-course {
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 50px;
xuzhenghua committed
378

xuzhenghua committed
379 380 381 382
    p {
      color: $color_555;
      font-size: 16px;
      margin-bottom: 10px;
xuzhenghua committed
383 384
    }

xuzhenghua committed
385
    span {
xuzhenghua committed
386
      color: $color_999;
xuzhenghua committed
387 388 389 390
      font-size: 12px;
    }
  }

xuzhenghua committed
391 392 393 394 395 396 397 398 399
  /*
    直播间预约
  */
  .live-room-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
xuzhenghua committed
400
    z-index: 51;
xuzhenghua committed
401 402 403 404 405 406 407
    background-color: rgba(0, 0, 0, .6);

    .live-room-content {
      background-color: $bg_fff;
      width: 280px;
      border-radius: 10px;
      margin: 110px auto 0 auto;
xuzhenghua committed
408
      position: relative;
xuzhenghua committed
409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464
      padding-top: 20px;

      .course-banner {
        width: 100%;
        height: 118px;
        display: flex;
        justify-content: space-between;

        .left {
          width: 43px;
          height: 73px;
          background-color: #fdd9e9;
          border-radius: 0 10px 10px 0;
          margin-top: 22px;

          span {
            display: inline-block;
            width: 37px;
            height: 63px;
            background-color: #FCC2DA;
            border-radius: 0 10px 10px 0;
            margin-top: 5px;
            margin-right: 6px;
          }
        }

        .right {
          width: 43px;
          height: 73px;
          background-color: #fce4c4;
          border-radius: 10px 0 0 10px;
          margin-top: 22px;

          span {
            display: inline-block;
            width: 37px;
            height: 63px;
            background-color: #FAD29F;
            border-radius: 10px 0 0 10px;
            margin-top: 5px;
            margin-left: 6px;
          }
        }


        .center {
          img {
            width: 165px;
            height: 118px;
            border-radius: 10px;
          }
        }
      }

      .course-dec {
        text-align: center;
xuzhenghua committed
465
        padding: 0 10px;
xuzhenghua committed
466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486
        margin-top: 10px;

        .title {
          color: $color_333;
          font-size: 14px;
        }

        .teacher {
          color: $color_333;
          font-size: 16px;
          margin: 10px 0 5px 0;
        }

        .time {
          color: $active;
          font-size: 12px;
        }
      }

      .course-info {
        margin-top: 10px;
xuzhenghua committed
487
        height: 100px;
xuzhenghua committed
488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511
        padding: 13px 0;
        border-top: 1px solid $border_e7eaf1;
        border-bottom: 1px solid $border_e7eaf1;

        ul {
          margin: 0 auto;
          width: 195px;
          height: 90px;
          overflow: hidden;

          li {
            color: $color_666;
            font-size: 12px;
          }

          li:nth-child(1) {
            color: $color_333;
            font-size: 14px;
          }
        }
      }

      .course-subscribe {
        text-align: center;
xuzhenghua committed
512
        height: 47px;
xuzhenghua committed
513

xuzhenghua committed
514
        button,a {
xuzhenghua committed
515 516 517 518 519 520 521
          width: 60px;
          height: 27px;
          background-color: $bg_active;
          border-radius: 14px;
          font-size: 14px;
          color: $white;
          border: none;
xuzhenghua committed
522 523 524 525
          position: absolute;
          left: 50%;
          margin-left: -30px;
          bottom: 10px;
xuzhenghua committed
526
        }
xuzhenghua committed
527 528 529 530 531
        a{
          width: 90px;
          line-height: 27px;
          margin-left: -45px;
        }
xuzhenghua committed
532 533

        span {
xuzhenghua committed
534
          width: 220px;
xuzhenghua committed
535 536
          display: inline-block;
          margin-top: 12px;
xuzhenghua committed
537 538
          height: 27px;
          line-height: 27px;
xuzhenghua committed
539 540
          font-size: 16px;
          color: $redprice;
xuzhenghua committed
541 542 543
          position: absolute;
          margin-left: -110px;
          bottom: 10px;
xuzhenghua committed
544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565
        }
      }
    }

    .live-room-close {
      text-align: center;
      margin-top: 20px;

      .close {
        font-size: 22px !important;
        color: $white;
      }
    }
  }

  .subscribe-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .8);
xuzhenghua committed
566
    z-index: 2;
xuzhenghua committed
567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593

    .close-subscribe {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
    }

    .subscribe-content {
      width: 300px;
      height: 155px;
      background-color: $bg_fff;
      border-radius: 3px;
      position: absolute;
      top: 50%;
      margin-top: -150px;
      left: 50%;
      margin-left: -150px;
      text-align: center;
      padding-top: 20px;

      button {
        background-color: $bg_18B4ED;
        font-size: 16px;
        color: $white;
xuzhenghua committed
594
        padding: 0 15px;
xuzhenghua committed
595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610
        height: 30px;
        border-radius: 15px;
        border: none;
        display: block;
        margin: auto;
      }

      .title {
        font-size: 16px;
        color: $color_333;
        display: block;
        height: 15px;
        line-height: 15px;
      }

      .follow {
xuzhenghua committed
611
        margin-top: 20px;
xuzhenghua committed
612 613 614
      }

      .nofollow {
xuzhenghua committed
615
        margin-top: 15px;
xuzhenghua committed
616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668
      }

      .tips {
        font-size: 12px;
        color: $color_555;
        display: block;
        height: 12px;
        line-height: 12px;
        margin-top: 7px;
      }

      .iphone {
        margin-top: 15px;
      }
    }

    .iphone-content {
      width: 300px;
      height: 191px;
      background-color: $bg_fff;
      border-radius: 3px;
      position: absolute;
      top: 50%;
      margin-top: -150px;
      left: 50%;
      margin-left: -150px;
      text-align: center;
      padding: 15px 20px;

      .title {
        font-size: 16px;
        color: $color_333;
        display: block;
        height: 15px;
        line-height: 15px;
      }

      .dec {
        font-size: 14px;
        color: $color_666;
        display: block;
        margin-top: 15px;
        text-align: left;
        height: 33px;
        line-height: 18px;
      }

      input {
        width: 100%;
        height: 30px;
        padding-left: 15px;
        border: 1px solid $border_ccc;
        margin-top: 15px;
xuzhenghua committed
669
        font-size: 12px;
xuzhenghua committed
670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687
      }

      input:focus {
        border: 1px solid $bg_active;

      }

      .submit {
        width: 260px;
        height: 30px;
        background-color: $bg_18B4ED;
        border-radius: 3px;
        font-size: 16px;
        color: $white;
        border: none;
        margin-top: 20px;
      }
    }
xuzhenghua committed
688

xuzhenghua committed
689 690 691
    .server-content {
      height: 226px;
      padding: 20px;
xuzhenghua committed
692

xuzhenghua committed
693 694 695 696 697
      .title {
        font-size: 18px;
        color: $active;
        height: 24px;
        line-height: 24px;
xuzhenghua committed
698 699

        i {
xuzhenghua committed
700 701 702
          font-size: 24px;
          margin-right: 10px;
        }
xuzhenghua committed
703

xuzhenghua committed
704 705 706 707 708
        span {
          position: relative;
          top: -3px;
        }
      }
xuzhenghua committed
709

xuzhenghua committed
710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732
      .dec {
        height: 53px;
      }
    }
  }


  .success {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 32px;
    background-color: $bg_000;
    border-radius: 15px;
    margin-left: -50px;
    margin-top: -16px;
    opacity: .6;
    color: $white;
    font-size: 16px;
    text-align: center;
    line-height: 32px;
  }
xuzhenghua committed
733 734 735 736 737 738 739 740 741 742

  //.LazyLoad {
  //  //  width: 100%;
  //  //  min-height: 100px;
  //  //  background: url('http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/img/index/logo.png') no-repeat;
  //  //  background-position: center;
  //  //}
  //  //.is-visible {
  //  //  background-image: none;
  //  //}
xuzhenghua committed
743
}
xuzhenghua committed
744

xuzhenghua committed
745 746 747 748
.index-box + .nav-bar + .year19-index{
  display: none;
}

xuzhenghua committed
749 750 751 752 753
.borderTop {
  width: 100%;
  height: 8px;
  background-color: #F3F4F8;
}