body { background: #F9F9F9; } .container { margin: auto; width: 1200px; } .el-breadcrumb { padding-top: 30px; margin-bottom: -10px; } .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 33px; overflow: hidden; } .courseClassificationList .courseClassificationList_item:last-child .courseClassificationList_item_content { border-bottom: 0; } .courseClassificationList .courseClassificationList_item .courseClassificationList_item_content.autoHeight { height: auto; } .courseClassificationList_item_content .content_item { height: 30px; margin-right: 30px; margin-bottom: 15px; font-size: 0; 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_content .content_item span { vertical-align: middle; font-size: 14px; } .courseClassificationList_item_content .content_item img { width: 10px; height: 14px; margin: 0 0 0 10px; vertical-align: middle; } .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 { 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: 160px; } .container_curriculum_list_item_image .image { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .container_curriculum_list_item_image .type { position: absolute; right: 7px; bottom: 7px; z-index: 2; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.5); } .course { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; padding: 15px 15px 0; 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; } .course_title { overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; color: #333; font-size: 16px; margin-bottom: 8px; } .course_tip { -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-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; -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 { 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_price_content { 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; } .course_price_content_value { font-size: 0; color: #FF6B00; } .course_price_content_vip { width: 21px; margin-left: 5px; } .course_price_content_vip img { width: 100%; height: auto; } .course_price_content_truePrice { font-size: 13px; } .course_price_content_truePrice span:nth-child(1) { position: relative; right: -6px; } .course_price_content_value>span:nth-child(1) { font-size: 14px; } .course_price_content_value>span:nth-child(2) { font-size: 18px; } .course_price_content_value>span.free { font-size: 16px; } .course_price>div:nth-child(2) { color: #666666; font-size: 14px; } .course .upload_number { -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-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; color: #999999; font-size: 14px; } .course .label-count { 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; font-size: 14px; color: #666666; } .course .label-group { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; font-size: 0; } .course .label { display: inline-block; height: 22px; padding: 0 9px; border-radius: 2px; background: rgba(44, 142, 255, 0.06); font-size: 12px; line-height: 22px; color: #2C8EFF; } .course .label~.label { margin-left: 6px; } .course .browse-money { 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; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; height: 48px; border-top: 1px dashed #eee; margin-top: 8px; font-size: 14px; color: #999999; } .course .money { font-size: 14px; color: #FF6B00; } .course .money.free { font-size: 16px; } .course .money span { font-size: 18px; } /* 课程列表结束 */ .el-pagination { margin: 70px 0 100px; }