index.scss 13.8 KB
Newer Older
xuzhenghua committed
1

xuzhenghua committed
2
.index-box {
xuzhenghua committed
3
  overflow: hidden;
xuzhenghua committed
4
  background-color: $bg_fff;
xuzhenghua committed
5

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

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

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

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

xuzhenghua committed
41 42 43 44
  .zw_height {
    height: 44px;
  }

xuzhenghua committed
45
  .index-swiper {
xuzhenghua committed
46
    height: 168px;
xuzhenghua committed
47

xuzhenghua committed
48
    .swiper-container {
xuzhenghua committed
49 50
      height: 100% !important;

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

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

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

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

xuzhenghua committed
83

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

xuzhenghua committed
93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
      .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
109
  }
xuzhenghua committed
110

xuzhenghua committed
111

xuzhenghua committed
112 113 114 115 116
  /*
  页面tab
  */
  .tabbox {
    width: 100%;
xuzhenghua committed
117
    height: 113px;
xuzhenghua committed
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140
    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
141
    }
xuzhenghua committed
142
  }
xuzhenghua committed
143

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

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

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

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

xuzhenghua committed
172 173 174 175 176 177 178 179 180
      .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
181
        .item-box {
xuzhenghua committed
182 183 184 185
          width: 100%;
          height: 100%;
          padding: 10px;
          display: flex;
xuzhenghua committed
186 187 188 189 190 191 192 193 194 195 196 197
          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
198 199

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

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

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

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

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

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

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

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

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

xuzhenghua committed
260 261 262 263 264

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

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

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

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

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

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

    .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
318

xuzhenghua committed
319 320 321 322 323 324 325 326 327 328
    .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
329

xuzhenghua committed
330 331
    .course-price {
      margin-top: 15px;
xuzhenghua committed
332

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

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

xuzhenghua committed
347
    .isbuy {
xuzhenghua committed
348
      display: inline-block;
xuzhenghua committed
349 350 351 352 353 354 355 356 357
      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
358 359 360
    }
  }

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

xuzhenghua committed
368

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

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

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

xuzhenghua committed
389 390 391 392 393 394 395 396 397
  /*
    直播间预约
  */
  .live-room-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
xuzhenghua committed
398
    z-index: 51;
xuzhenghua committed
399 400 401 402 403 404 405
    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
406
      position: relative;
xuzhenghua committed
407 408 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
      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
463
        padding: 0 10px;
xuzhenghua committed
464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484
        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
485
        height: 100px;
xuzhenghua committed
486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509
        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
510
        height: 47px;
xuzhenghua committed
511

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

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

    .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
564
    z-index: 2;
xuzhenghua committed
565 566 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

    .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
592
        padding: 0 15px;
xuzhenghua committed
593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608
        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
609
        margin-top: 20px;
xuzhenghua committed
610 611 612
      }

      .nofollow {
xuzhenghua committed
613
        margin-top: 15px;
xuzhenghua committed
614 615 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
      }

      .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
667
        font-size: 12px;
xuzhenghua committed
668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685
      }

      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
686

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

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

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

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

xuzhenghua committed
708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730
      .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
731 732 733 734 735 736 737 738 739 740

  //.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
741
}
xuzhenghua committed
742

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

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