index.scss 13.2 KB
Newer Older
xuzhenghua committed
1
.index-box {
xuzhenghua committed
2
  overflow: hidden;
xuzhenghua committed
3
  background-color: $bg_fff;
xuzhenghua committed
4

xuzhenghua committed
5 6 7 8 9
  .header {
    width: 100%;
    height: 44px;
    background-color: $bg_fff;
    padding: 10px 15px;
xuzhenghua committed
10

xuzhenghua committed
11 12 13 14
    .logo {
      width: 78px;
      height: 20px;
    }
xuzhenghua committed
15

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

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

xuzhenghua committed
38
  .index-swiper {
xuzhenghua committed
39 40
    margin-top: 7px;
    height: 168px;
xuzhenghua committed
41

xuzhenghua committed
42
    .swiper-container {
xuzhenghua committed
43 44
      height: 100% !important;

xuzhenghua committed
45 46 47 48 49 50 51
      .swiper-slide {
        img {
          width: 100%;
          height: 168px;
          border-radius: 6px;
        }
      }
xuzhenghua committed
52
    }
xuzhenghua committed
53

xuzhenghua committed
54 55 56 57 58
    .swiper-pagination {
      width: 100%;
      left: 188px !important;
      text-align: right;
      padding-right: 55px;
xuzhenghua committed
59 60

      .pagination-item {
xuzhenghua committed
61 62 63 64 65
        width: 8px !important;
        height: 8px !important;
        background-color: $bg_fff !important;
        opacity: 0.5;
      }
xuzhenghua committed
66

xuzhenghua committed
67
      .active {
xuzhenghua committed
68 69 70
        width: 18px !important;
        height: 7px !important;
        border-radius: 4px !important;
xuzhenghua committed
71 72
        background-color: $bg_fff !important;
        opacity: 1;
xuzhenghua committed
73 74 75
      }
    }
  }
xuzhenghua committed
76

xuzhenghua committed
77

xuzhenghua committed
78
  /*热门推荐轮播*/
xuzhenghua committed
79 80 81 82 83 84 85
  .category {
    .swiper-container {
      height: 106px !important;
      margin-top: 15px;
      margin-bottom: 5px;
      touch-action: pan-y;
      border-radius: 3px;
xuzhenghua committed
86

xuzhenghua committed
87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
      .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
103
  }
xuzhenghua committed
104

xuzhenghua committed
105

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

xuzhenghua committed
138 139 140
  /*
  近期直播
  */
xuzhenghua committed
141 142 143 144 145 146 147 148 149 150 151
  .lives {
    width: 100%;
    padding: 20px 15px 0 15px;

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

xuzhenghua committed
152 153 154 155 156
  .scroll-box {
    width: 100%;
    overflow: auto;
    position: relative;
    margin-top: 15px;
xuzhenghua committed
157

xuzhenghua committed
158 159 160
    .scroll-list {
      height: 100%;
      display: flex;
xuzhenghua committed
161
      overflow: hidden;
xuzhenghua committed
162
      position: absolute;
xuzhenghua committed
163

xuzhenghua committed
164 165 166 167 168 169 170 171 172 173
      .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: 1px solid rgba(0, 0, 0, .1);
        border-radius: 5px;

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

          .no-start {
xuzhenghua committed
193 194
            background-color: $red;
          }
xuzhenghua committed
195 196

          .start {
xuzhenghua committed
197 198
            background-color: $bg_active;
          }
xuzhenghua committed
199 200 201 202 203 204 205 206 207 208 209 210 211 212

          .item-img {
            width: 100px;
            height: 72px;
            margin-right: 8px;
          }

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

xuzhenghua committed
213
          .item-btn {
xuzhenghua committed
214
            padding: 0 5px;
xuzhenghua committed
215 216
            height: 20px;
            text-align: center;
xuzhenghua committed
217
            border: none;
xuzhenghua committed
218 219 220 221 222 223 224
            background: linear-gradient(60deg, $bg_active 0%, $bg_0080FF 100%);
            border-radius: 10px;
            font-size: 14px;
            color: $white;
            margin-top: 10px;
          }

xuzhenghua committed
225 226 227
          .item-title {
            font-size: 16px;
            color: $color_333;
xuzhenghua committed
228 229
            height: 16px;
            line-height: 16px;
xuzhenghua committed
230 231 232 233 234 235 236 237 238 239 240 241 242 243 244
          }

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

          .item-time {
            font-size: 12px;
            color: $color_999;
            margin-top: 11px;
          }
        }
      }
xuzhenghua committed
245
    }
xuzhenghua committed
246 247 248 249 250
  }

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

xuzhenghua committed
252 253 254 255 256

  .category-vip {
    width: 100%;
    height: 106px;
    border-radius: 5px;
xuzhenghua committed
257 258
    margin-top: 15px;
    margin-bottom: 5px;
xuzhenghua committed
259 260 261 262 263

    img {
      width: 100%;
      height: 106px;
      border-radius: 5px;
xuzhenghua committed
264
    }
xuzhenghua committed
265
  }
xuzhenghua committed
266

xuzhenghua committed
267 268 269 270 271 272 273 274 275
  /*课程公共样式*/
  .category {
    width: 100%;
    padding: 20px 15px 15px 15px;

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

xuzhenghua committed
278 279
    .more {
      color: $active;
xuzhenghua committed
280
      font-size: 12px;
xuzhenghua committed
281
      float: right;
xuzhenghua committed
282 283
    }
  }
xuzhenghua committed
284

xuzhenghua committed
285
  .index-course-detail {
xuzhenghua committed
286
    width: 100%;
xuzhenghua committed
287 288 289
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
xuzhenghua committed
290
    background-color: $bg_fff;
xuzhenghua committed
291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309

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

xuzhenghua committed
311 312 313 314 315 316 317 318 319 320
    .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
321

xuzhenghua committed
322 323
    .course-price {
      margin-top: 15px;
xuzhenghua committed
324

xuzhenghua committed
325 326 327 328
      .new {
        color: $red;
        font-size: 16px;
      }
xuzhenghua committed
329

xuzhenghua committed
330 331 332 333 334 335 336 337
      .old {
        color: $color_999;
        font-size: 12px;
        display: inline-block;
        margin-left: 15px;
        text-decoration: line-through;
      }
    }
xuzhenghua committed
338

xuzhenghua committed
339
    .isbuy {
xuzhenghua committed
340
      display: inline-block;
xuzhenghua committed
341 342 343 344 345 346 347 348 349
      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
350 351 352
    }
  }

xuzhenghua committed
353 354 355 356 357 358 359
  /*
  横向滚动
  */
  .scroll-box {
    height: 92px;
  }

xuzhenghua committed
360

xuzhenghua committed
361 362 363 364 365 366 367
  /*
  底部查看所有课程
  */
  .all-course {
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 50px;
xuzhenghua committed
368

xuzhenghua committed
369 370 371 372
    p {
      color: $color_555;
      font-size: 16px;
      margin-bottom: 10px;
xuzhenghua committed
373 374
    }

xuzhenghua committed
375
    span {
xuzhenghua committed
376
      color: $color_999;
xuzhenghua committed
377 378 379 380
      font-size: 12px;
    }
  }

xuzhenghua committed
381 382 383 384 385 386 387 388 389
  /*
    直播间预约
  */
  .live-room-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
xuzhenghua committed
390
    z-index: 2;
xuzhenghua committed
391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 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 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539
    background-color: rgba(0, 0, 0, .6);

    .live-room-content {
      background-color: $bg_fff;
      width: 280px;
      height: 400px;
      border-radius: 10px;
      margin: 110px auto 0 auto;
      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;
        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;
        height: 115px;
        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;

        button {
          margin-top: 12px;
          width: 60px;
          height: 27px;
          background-color: $bg_active;
          border-radius: 14px;
          font-size: 14px;
          color: $white;
          border: none;
        }

        span {
          display: inline-block;
          margin-top: 12px;
          font-size: 16px;
          color: $redprice;
        }
      }
    }

    .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
540
    z-index: 2;
xuzhenghua committed
541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584

    .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;
        width: 135px;
        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
585
        margin-top: 20px;
xuzhenghua committed
586 587 588
      }

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

      .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;
      }

      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
661

xuzhenghua committed
662 663 664
    .server-content {
      height: 226px;
      padding: 20px;
xuzhenghua committed
665

xuzhenghua committed
666 667 668 669 670
      .title {
        font-size: 18px;
        color: $active;
        height: 24px;
        line-height: 24px;
xuzhenghua committed
671 672

        i {
xuzhenghua committed
673 674 675
          font-size: 24px;
          margin-right: 10px;
        }
xuzhenghua committed
676

xuzhenghua committed
677 678 679 680 681
        span {
          position: relative;
          top: -3px;
        }
      }
xuzhenghua committed
682

xuzhenghua committed
683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705
      .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
706 707 708 709 710 711 712 713 714 715

  //.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
716
}
xuzhenghua committed
717

xuzhenghua committed
718 719 720 721 722
.borderTop {
  width: 100%;
  height: 8px;
  background-color: #F3F4F8;
}