/* @mixin colorPrimary(@color:#1890ff ) { color: #1890ff; [data-them="green"] & { color: #3cb371; } [data-them="lightgreen"] & { color: #8FA34A; } [data-them="orange"] & { color: #E48539; } } @mixin backgroundPrimary() { background-color: #1890ff; [data-them="green"] & { background-color: #3cb371; } [data-them="lightgreen"] & { background-color: #8FA34A; } [data-them="orange"] & { background-color: #E48539; } } @mixin backgroundGradualPrimary() { background: linear-gradient(180deg, #60D9E4 0%, #147DFF 100%); [data-them="green"] & { background: #3cb371; } [data-them="lightgreen"] & { background: #8FA34A; } [data-them="orange"] & { background: #E48539; } } @mixin backgroundPrimaryLight() { background-color: #ecf5fd; [data-them="green"] & { background-color: lighten(#3cb371, 35%); } [data-them="lightgreen"] & { background-color: #8FA34A; } [data-them="orange"] & { background-color: #E48539; } } @mixin borderPrimary() { border-color: #1890ff; [data-them="green"] & { border-color: #3cb371; } [data-them="lightgreen"] & { border-color: #8FA34A; } [data-them="orange"] & { border-color: #E48539; } } @mixin borderImagePrimary() { border-image: linear-gradient( 270deg, rgba(108, 196, 249, 1), rgba(255, 255, 255, 1) ) 1 1; [data-them="green"] & { border-image:linear-gradient( 270deg, rgba(63, 159, 129, 1), rgba(255, 255, 255, 1) ) 1 1;; } [data-them="lightgreen"] & { border-image:linear-gradient( 270deg, rgba(143, 163, 74, 1), rgba(255, 255, 255, 1) ) 1 1;; } [data-them="orange"] & { border-image:linear-gradient( 270deg, rgba(228, 133, 57, 1), rgba(255, 255, 255, 1) ) 1 1;; } } @mixin borderPrimaryLight() { border-color: #d8ecfc; [data-them="green"] & { border-color: lighten(#3cb371, 15%); } [data-them="lightgreen"] & { border-color: #8FA34A; } [data-them="orange"] & { border-color: #E48539; } } @mixin tabsActiveBarPrimary() { background: linear-gradient(180deg, #56ccf2 0%, #2f80ec 100%); [data-them="green"] & { background: #3cb371; } [data-them="lightgreen"] & { background: #8FA34A; } [data-them="orange"] & { background: #E48539; } } */ .blue .section-tile .splice-box .splice-line { width: 84px; height: 1px; margin-right: 10px; background: transparent; border: 1px solid; border-image: linear-gradient(270deg, #6cc4f9, #ffffff) 1 1; } .blue .section-tile .splice-box .splice-squ { background-color: #1890ff; } .blue .section-tile .splice-box .splice-mini-squ { background-color: #1890ff; } .blue .q-card-box .iconfont { color: transparent; -webkit-background-clip: text; background-image: linear-gradient(180deg, #60D9E4 0%, #147DFF 100%); } .blue .go-more-button .button-box { background: linear-gradient(180deg, #60D9E4 0%, #147DFF 100%); } .blue .go-more-button .button-filter { background: linear-gradient(180deg, #60D9E4 0%, #147DFF 100%); } .blue .course-cate a:hover, .blue .course-cate a.active { font-weight: 500; color: #1890ff; } .blue .course-total a:hover, .blue .course-total a.active { color: #1890ff; } .blue .explore-container-header .navbar-default { background: linear-gradient(90deg, #60d9e4 0%, #4496fd 100%) !important; } .blue .btn-default:hover { color: #1890ff; border-color: #1890ff; } .blue .btn-primary { background-color: #1890ff; border: 1px solid #1890ff; } .blue .btn-primary:hover, .blue .btn-primary:focus, .blue .btn-primary:active { background-color: #1890ff; color: #fff; border-color: #1890ff; border: 1px solid #1890ff; } .blue .btn-default.active { border-color: #1890ff; background-color: #fff; color: #1890ff; } .blue .course-info-bottom .course-info-bottom-tab-content .bottom-title::before { background: #1890ff; } .blue .nav-tabs > li.active > a, .blue .nav-tabs > li.active > a:hover, .blue .nav-tabs > li.active > a:focus { border-bottom: 3px solid #1890ff; color: #1890ff; } .green .section-tile .splice-box .splice-line { width: 84px; height: 1px; margin-right: 10px; background: transparent; border: 1px solid; border-image: linear-gradient(270deg, #6cc4f9, #ffffff) 1 1; } .green .section-tile .splice-box .splice-squ { background-color: #3cb371; } .green .section-tile .splice-box .splice-mini-squ { background-color: #3cb371; } .green .q-card-box .iconfont { color: transparent; -webkit-background-clip: text; background-image: linear-gradient(180deg, #60D9E4 0%, #3cb371 100%); } .green .go-more-button .button-box { background: linear-gradient(180deg, #60D9E4 0%, #3cb371 100%); } .green .go-more-button .button-filter { background: linear-gradient(180deg, #60D9E4 0%, #3cb371 100%); } .green .course-cate a:hover, .green .course-cate a.active { font-weight: 500; color: #3cb371; } .green .course-total a:hover, .green .course-total a.active { color: #3cb371; } .green .explore-container-header .navbar-default { background: linear-gradient(270deg, #3cb371, transparent) 1 1 !important; } .green .btn-default:hover { color: #3cb371; border-color: #3cb371; } .green .btn-primary { background-color: #3cb371; border: 1px solid #3cb371; } .green .btn-primary:hover, .green .btn-primary:focus, .green .btn-primary:active { background-color: #3cb371; color: #fff; border-color: #3cb371; border: 1px solid #3cb371; } .green .btn-default.active { border-color: #3cb371; background-color: #fff; color: #3cb371; } .green .course-info-bottom .course-info-bottom-tab-content .bottom-title::before { background: #3cb371; } .green .nav-tabs > li.active > a, .green .nav-tabs > li.active > a:hover, .green .nav-tabs > li.active > a:focus { border-bottom: 3px solid #3cb371; color: #3cb371; } .orange .section-tile .splice-box .splice-line { width: 84px; height: 1px; margin-right: 10px; background: transparent; border: 1px solid; border-image: linear-gradient(270deg, #6cc4f9, #ffffff) 1 1; } .orange .section-tile .splice-box .splice-squ { background-color: #E48539; } .orange .section-tile .splice-box .splice-mini-squ { background-color: #E48539; } .orange .q-card-box .iconfont { color: transparent; -webkit-background-clip: text; background-image: linear-gradient(180deg, #60D9E4 0%, #E48539 100%); } .orange .go-more-button .button-box { background: linear-gradient(180deg, #60D9E4 0%, #E48539 100%); } .orange .go-more-button .button-filter { background: linear-gradient(180deg, #60D9E4 0%, #E48539 100%); } .orange .course-cate a:hover, .orange .course-cate a.active { font-weight: 500; color: #E48539; } .orange .course-total a:hover, .orange .course-total a.active { color: #E48539; } .orange .explore-container-header .navbar-default { background: linear-gradient(270deg, #8FA34A, transparent) 1 1 !important; } .orange .btn-default:hover { color: #E48539; border-color: #E48539; } .orange .btn-primary { background-color: #E48539; border: 1px solid #E48539; } .orange .btn-primary:hover, .orange .btn-primary:focus, .orange .btn-primary:active { background-color: #E48539; color: #fff; border-color: #E48539; border: 1px solid #E48539; } .orange .btn-default.active { border-color: #E48539; background-color: #fff; color: #E48539; } .orange .course-info-bottom .course-info-bottom-tab-content .bottom-title::before { background: #E48539; } .orange .nav-tabs > li.active > a, .orange .nav-tabs > li.active > a:hover, .orange .nav-tabs > li.active > a:focus { border-bottom: 3px solid #E48539; color: #E48539; } .lightgreen .section-tile .splice-box .splice-line { width: 84px; height: 1px; margin-right: 10px; background: transparent; border: 1px solid; border-image: linear-gradient(270deg, #6cc4f9, #ffffff) 1 1; } .lightgreen .section-tile .splice-box .splice-squ { background-color: #8FA34A; } .lightgreen .section-tile .splice-box .splice-mini-squ { background-color: #8FA34A; } .lightgreen .q-card-box .iconfont { color: transparent; -webkit-background-clip: text; background-image: linear-gradient(180deg, #60D9E4 0%, #8FA34A 100%); } .lightgreen .go-more-button .button-box { background: linear-gradient(180deg, #60D9E4 0%, #8FA34A 100%); } .lightgreen .go-more-button .button-filter { background: linear-gradient(180deg, #60D9E4 0%, #8FA34A 100%); } .lightgreen .course-cate a:hover, .lightgreen .course-cate a.active { font-weight: 500; color: #8FA34A; } .lightgreen .course-total a:hover, .lightgreen .course-total a.active { color: #8FA34A; } .lightgreen .explore-container-header .navbar-default { background: linear-gradient(270deg, #E48539, transparent) 1 1 !important; } .lightgreen .btn-default:hover { color: #8FA34A; border-color: #8FA34A; } .lightgreen .btn-primary { background-color: #8FA34A; border: 1px solid #8FA34A; } .lightgreen .btn-primary:hover, .lightgreen .btn-primary:focus, .lightgreen .btn-primary:active { background-color: #8FA34A; color: #fff; border-color: #8FA34A; border: 1px solid #8FA34A; } .lightgreen .btn-default.active { border-color: #8FA34A; background-color: #fff; color: #8FA34A; } .lightgreen .course-info-bottom .course-info-bottom-tab-content .bottom-title::before { background: #8FA34A; } .lightgreen .nav-tabs > li.active > a, .lightgreen .nav-tabs > li.active > a:hover, .lightgreen .nav-tabs > li.active > a:focus { border-bottom: 3px solid #8FA34A; color: #8FA34A; } .course-info-container { position: relative; padding-top: 70px; min-height: 100vh; background: #f4f5f7; padding-bottom: 20px; } @media (max-width: 767px) { .course-info-container { padding-top: 20px; } } .course-info-container .course-info-top-mask { position: absolute; left: 0; right: 0; top: 0; height: 406px; background: linear-gradient(90deg, #60d9e4 0%, #4496fd 100%); overflow: hidden; } .course-info-container .course-info-top-mask::after, .course-info-container .course-info-top-mask::before { content: ""; width: 458px; height: 432px; border-radius: 50%; } .course-info-container .course-info-top-mask::before { position: absolute; left: -20px; top: -186px; background: linear-gradient(180deg, #8fe2f8 0%, #5ccfe8 100%); opacity: 0.7; } .course-info-container .course-info-top-mask::after { position: absolute; right: -101px; bottom: -120px; background: linear-gradient(180deg, #4ba6f8 0%, #4ba8f6 100%); } .course-info-container .container { position: relative; } .course-info-container .breadcrumb { background-color: transparent; } @media (max-width: 992px) { .course-info-container .breadcrumb { display: none; } } .course-info-container .breadcrumb > li > a, .course-info-container .breadcrumb > li, .course-info-container .breadcrumb > li + li:before { color: #fff; } .course-info-header { margin-top: 40px; padding-bottom: 56px; background-color: #fff; margin-bottom: 20px; border-radius: 4px; } .course-info-header .course-info-header-content { border-bottom: 1px solid rgba(0, 0, 0, 0.09); border-radius: 2px 2px 0 0; padding: 20px 20px 19px 20px; } .course-info-header .course-info-header-content .course-img { float: left; width: 370px; height: 235px; } .course-info-header .course-info-header-content .course-img img { width: 100%; height: 100%; border-radius: 4px; } .course-info-header .course-info-header-content .course-rigth { margin-left: 394px; } .course-info-header .course-info-header-content .course-rigth .course-title { position: relative; padding: 10px 20px; padding-right: 137px; margin-bottom: 20px; margin-bottom: 10px; font-size: 18px; color: rgba(0, 0, 0, 0.85); line-height: 25px; background: rgba(0, 0, 0, 0.02); border-radius: 4px; } .course-info-header .course-info-header-content .course-rigth .course-title .op { position: absolute; bottom: 10px; right: 20px; font-size: 12px; color: rgba(0, 0, 0, 0.45); } .course-info-header .course-info-header-content .course-rigth .course-plan { padding: 14px 20px 10px; background-color: #fafafa; margin-bottom: 20px; border-radius: 4px; } .course-info-header .course-info-header-content .course-rigth .course-plan .course-plan-radio-group .radio-group { display: inline-block; margin-right: 15px; margin-bottom: 14px; } .course-info-header .course-info-header-content .course-rigth .course-plan .course-plan-list { height: 48px; margin-left: -36px; } @media (max-width: 1200px) { .course-info-header .course-info-header-content .course-rigth .course-plan .course-plan-list { margin-left: -12px; font-size: 12px; } } .course-info-header .course-info-header-content .course-rigth .course-plan .course-plan-list .course-plan-item { float: left; padding: 0 36px; border-right: 1px solid rgba(0, 0, 0, 0.09); } @media (max-width: 1200px) { .course-info-header .course-info-header-content .course-rigth .course-plan .course-plan-list .course-plan-item { padding: 0 12px; } } .course-info-header .course-info-header-content .course-rigth .course-plan .course-plan-list .course-plan-item:last-child { border-right: 1px solid transparent; } .course-info-header .course-info-header-content .course-rigth .course-plan .course-plan-list .course-plan-item .title { font-size: 12px; font-weight: 400; color: rgba(0, 0, 0, 0.45); line-height: 17px; margin-bottom: 5px; } .course-info-header .course-info-header-content .course-rigth .course-bottom { margin-top: 22px; } .course-info-header .course-info-header-content .course-rigth .course-bottom .btn { width: 200px; } @media (max-width: 992px) { .course-info-header { margin-bottom: 0; padding-bottom: 40px; border-radius: 4px 4px 0 0; margin-top: 0; width: 100%; } .course-info-header .course-info-header-content { border-bottom: none; padding: 14px; width: 100%; } .course-info-header .course-info-header-content .course-img { float: none; width: 100%; height: auto; max-width: 100%; } .course-info-header .course-info-header-content .course-rigth { margin-left: 0; } .course-info-header .course-info-header-content .course-rigth .course-title { margin-top: 10px; } .course-info-header .course-info-header-content .course-rigth .course-plan { margin-bottom: 10px; } .course-info-header .course-info-header-content .course-rigth .course-plan .course-plan-list { height: 97px; margin: 0; } .course-info-header .course-info-header-content .course-rigth .course-plan .course-plan-list .course-plan-item { width: 50%; padding-left: 0; } .course-info-header .course-info-header-content .course-rigth .course-plan .course-plan-list .course-plan-item:first-child { border-right: none; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.09); padding-bottom: 10px; margin-bottom: 10px; } .course-info-header .course-info-header-content .course-rigth .course-plan .course-plan-list .course-plan-item:first-child div { display: inline; padding-bottom: 10px; } .course-info-header .course-info-header-content .course-rigth .course-plan .course-plan-list .course-plan-item:last-child { padding-left: 36px; padding-right: 0; } .course-info-header .course-info-header-content .course-rigth .course-bottom { margin-top: 10px; } .course-info-header .course-info-header-content .course-rigth .course-bottom .btn { width: 100%; } } .course-info-bottom .course-info-bottom-tab-content img { max-width: 100%; } .course-info-bottom .course-introduction { line-height: 24px; } .course-info-bottom .course-info-bottom-navs { position: absolute; top: -63px; left: 15px; border-bottom: 3px solid transparent; } .course-info-bottom .course-info-bottom-navs > li > a { margin-left: 26px; } .course-info-bottom .course-info-bottom-tab-content { background: #ffffff; border-radius: 4px; padding: 20px 20px 0; margin-bottom: 16px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } .course-info-bottom .course-info-bottom-tab-content .bottom-title { position: relative; margin-bottom: 12px; font-size: 16px; color: rgba(0, 0, 0, 0.85); padding-left: 10px; } .course-info-bottom .course-info-bottom-tab-content .bottom-title::before { position: absolute; left: 0; top: 5px; content: ""; width: 4px; height: 14px; background: #1886f5; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate { padding-bottom: 20px; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-header { padding-bottom: 5px; border-bottom: 1px solid rgba(0, 0, 0, 0.09); } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-header .evaluate-form { margin-left: 56px; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-header .evaluate-start { margin-bottom: 16px; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-header .evaluate-start img { width: 20px; margin-right: 8px; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item { margin-bottom: 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.09); } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .avater { width: 40px; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-title { margin-top: 5px; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-title span { margin-right: 14px; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-start { margin-bottom: 20px; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-start img { width: 15px; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-content-title { position: relative; color: rgba(0, 0, 0, 0.85); margin-bottom: 20px; padding-right: 60px; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-content-title .evaluate-op { position: absolute; width: 60px; text-align: center; top: 0; right: 0; cursor: pointer; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-content-title .evaluate-op .one { display: inline; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-content-title .evaluate-op .two { display: none; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-content-title .evaluate-op.open .one { display: none; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-content-title .evaluate-op.open .two { display: inline; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-content-list .evaluate-content-item { position: relative; background: rgba(0, 0, 0, 0.02); border-radius: 4px; padding: 12px 20px; margin-bottom: 10px; word-wrap: break-all; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-content-list .evaluate-content-item .media-left { padding-right: 6px; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-content-list .evaluate-content-item .media-body { color: rgba(0, 0, 0, 0.85); } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-content-list .evaluate-content-item .media-body .media-heading { margin-bottom: 12px; color: rgba(0, 0, 0, 0.65); } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-content-list .evaluate-content-item .media-body .media-heading .time { margin-left: 14px; color: rgba(0, 0, 0, 0.45); } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-content-list .evaluate-content-item .evaluate-delete { position: absolute; cursor: pointer; color: #ff682a; right: 12px; bottom: 15px; display: none; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-content-list .evaluate-content-item:hover .evaluate-delete { display: inline; } .course-info-bottom .course-info-bottom-tab-content .course-evaluate .course-evaluate-item .evaluate-reply { margin-top: 20px; } .course-info-bottom .new-student { margin-left: -6px; margin-right: -6px; padding-left: 0; } .course-info-bottom .new-student li { float: left; list-style: none; width: 20%; padding: 0 6px; margin-bottom: 12px; } .course-info-bottom .new-student li img { width: 100%; border-radius: 50%; } .course-info-bottom .student-activity-list .title { color: rgba(0, 0, 0, 0.85); } .course-info-bottom .evaluate-content { word-break: break-all; } @media (max-width: 992px) { .course-info-bottom .course-info-bottom-tab-content { padding: 14px 14px 0; border-radius: 0 0 4px 4px; } .course-info-bottom .course-info-bottom-navs { top: -43px; left: 24px; right: 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.09); } .course-info-bottom .course-info-bottom-navs > li > a { margin-left: 0; padding: 10px 5px; } } .course-tree { padding-bottom: 20px; } .course-tree .task-item { font-size: 14px; padding: 12px 20px; padding-right: 200px; position: relative; margin-bottom: 12px; } @media (max-width: 992px) { .course-tree .task-item { padding: 12px 10px; padding-right: 70px; font-size: 12px; } } .course-tree .task-item.chapter { background: #fafafa; border-radius: 4px; border: 1px solid #efefef; margin-bottom: 0; } .course-tree .task-item.section { border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.09); } .course-tree .task-item.task { border-bottom: 1px solid rgba(0, 0, 0, 0.09); } .course-tree .task-item.task:hover { background: #ffffff; border-radius: 4px; } .course-tree .task-item .rigth { position: absolute; right: 20px; top: 12px; color: rgba(0, 0, 0, 0.45); } @media (max-width: 992px) { .course-tree .task-item .rigth { top: 14px; } } .course-tree .task-item .rigth .up { display: none; } .course-tree .task-item .rigth .down { display: inline; } .course-tree .task-item.change-icon .rigth .up { display: inline; } .course-tree .task-item.change-icon .rigth .down { display: none; } .course-tree .chapter-children { border: 1px solid rgba(0, 0, 0, 0.09); border-top: none; padding: 10px 14px; margin-bottom: 10px; } .course-tree .section-children { border: 1px solid rgba(0, 0, 0, 0.09); border-top: none; padding: 10px 14px; margin-bottom: 10px; margin-top: -14px; } .course-tree .change-icon { margin-bottom: 10px !important; } #notice-list .panel-body.list { width: 100%; height: 130px; overflow: hidden; } #notice-list .notice-item { display: flex; margin-bottom: 24px; color: rgba(0, 0, 0, 0.65); cursor: pointer; } #notice-list .notice-item .title { flex: 1; overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #notice-list .notice-item .check { color: #1890ff; } #notice-list .no-notice-list { line-height: 130px; text-align: center; } #hot-course { padding-bottom: 5px; } #hot-course .panel-heading { display: flex; justify-content: space-between; margin-bottom: 15px; } #hot-course .panel-heading a:hover { color: #1890FF; } #hot-course #current-course-list { padding: 0 15px; margin-bottom: 10px; } #hot-course #current-course-list .list-wrap { display: flex; width: 100%; cursor: pointer; } #hot-course #current-course-list .list-wrap .list-left img { width: 86px; margin-right: 7px; } #hot-course #current-course-list .list-wrap .list-right { flex: 1; overflow: hidden; } #hot-course #current-course-list .list-wrap .list-right .list-icon { color: #1890FF; } #hot-course #current-course-list .list-wrap .list-right .list-icon img { width: 16px; } #hot-course #current-course-list .list-wrap .list-right .list-title { margin-top: 6px; } .mini-nav-home-tab { display: none; } .modal-body { overflow-y: scroll; max-height: calc(100vh - 200px); } .modal-body .notice-time { text-align: right; } .notice-content img { max-width: 100%; vertical-align: top; } .task-tag { background: #f6ffed !important; border-radius: 2px; border: 1px solid #b7eb8f; height: auto; line-height: 20px; color: #52c41a; padding: 0 4px; } °Ù¶È