body { background: #F9F9F9; } .container { margin: auto; width: 1200px; } .courseClassificationList { padding: 10px 20px 0 17px; border-radius: 4px; margin-top: 30px; background-color: #FFFFFF; } .courseClassificationList .courseClassificationList_item { position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .courseClassificationList .courseClassificationList_item::after { content: ""; position: absolute; right: 0; bottom: 0; left: 70px; z-index: 2; height: 1px; border-bottom: 1px dashed #EFEFEF; } .courseClassificationList .courseClassificationList_item:last-child::after { display: none; } .courseClassificationList .courseClassificationList_item .courseClassificationList_item_title { font-size: 14px; line-height: 60px; color: #969696; } .courseClassificationList .courseClassificationList_item .courseClassificationList_item_content { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; min-width: 0; height: 60px; padding: 15px 103px 0 30px; overflow: hidden; } .courseClassificationList .courseClassificationList_item .courseClassificationList_item_content.autoHeight { height: auto; } .courseClassificationList_item_content .content_item { height: 30px; margin: 0 30px 15px 0; font-size: 14px; line-height: 30px; color: #282828; cursor: pointer; } .courseClassificationList_item_content .content_item.on { color: #2C8EFF; } .courseClassificationList_item_content .content_item:hover { color: #2C8EFF; } .courseClassificationList_item .courseClassificationList_item_morethan { height: 30px; margin: 15px 0; font-size: 14px; line-height: 30px; color: #282828; cursor: pointer; } .courseClassificationList_item .courseClassificationList_item_morethan.visibility { visibility: hidden; } .courseClassificationList_item .courseClassificationList_item_morethan span:nth-child(2) { font-size: 12px; } /* 课程列表开始 */ .container_curriculum_list { margin-top: 30px; } .container_curriculum_list_con { display: grid; grid-template-columns: repeat(4, 1fr); grid-row-gap: 14px; grid-column-gap: 14px; } .container_curriculum_list_item { min-height: 274px; border-radius: 8px; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #fff; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; cursor: pointer; } .container_curriculum_list_item:hover { -webkit-box-shadow: 0px 2px 15px rgba(79, 109, 143, 0.15); box-shadow: 0px 2px 15px rgba(79, 109, 143, 0.15); } .container_curriculum_list_item_image { position: relative; /* height: 148px; overflow: hidden; */ } .container_curriculum_list_item_image img { display: block; width: 290px; height: 160px; -o-object-fit: cover; object-fit: cover; } .container_curriculum_list_item_image > div:nth-child(2) { position: absolute; top: 0; left: 0; z-index: 2; padding-right: 16px; padding-left: 41px; border-bottom-right-radius: 8px; background: rgba(0, 0, 0, 0.6) url("../images/live3.png") 15px center/16px 16px no-repeat; font-size: 16px; line-height: 34px; color: #fff; } .container_curriculum_list_item_image > div.live1 { background-image: url("../images/live1.png"); } .container_curriculum_list_item_image > div.live2 { background-image: url("../images/live2.png"); } .course { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; padding: 11px 15px 0 15px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /* justify-content: space-between; */ } .course_title { overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; color: #282828; font-size: 16px; margin-bottom: 9px; } .course_tip { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; /* margin-bottom: 19px; */ display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .course_tip>div:nth-child(1) { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; /* margin-right: 10px; */ -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; } .course_tip>div:nth-child(1)>span { display: inline-block; margin-right: 10px; margin-bottom: 8px; width: 62px; height: 22px; background: rgba(44, 142, 255, 0.06); border-radius: 2px; color: #2C8EFF; font-size: 12px; line-height: 22px; text-align: center; } .course_price_content { height: 44px; } .course_price_content_item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; color: #666666; font-size: 14px; line-height: 22px; } .course_price_content_value { color: #FF6B00; } .course_price_content_vip { width: 21px; } .course_price_content_vip img { width: 100%; height: auto; } .course_price_content_truePrice { font-size: 12px; } .course_price_content_truePrice span:nth-child(1) { position: relative; right: -6px; } .course_price_content_value>span:nth-child(1) { font-size: 10px; } .course_price_content_value>span:nth-child(2) { position: relative; right: 8px; } .course_price>div:nth-child(2) { color: #666666; font-size: 14px; } .course .upload_number { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 48px; border-top: 1px dashed #eee; margin-top: 8px; color: #999999; font-size: 14px; } .course .upload_number div:nth-child(2) { font-size: 14px; color: #FF6B00; } .course .upload_number div:nth-child(2) span { font-size: 18px; } .course .upload_number div.free { font-size: 16px; } /* 课程列表结束 */ .pagination { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 70px; padding-bottom: 100px; } .pagination .el-pagination .btn-prev, .pagination .el-pagination .btn-next { /* width: 78px; height: 38px; padding: 0; border: 1px solid #E9E9E9; font-size: 14px; color: #CCCCCC; */ } .pagination .el-pager li { /* height: 38px; border: 1px solid #E9E9E9; line-height: 38px; */ }