body{ margin: 0; } header{ height: 45px; background-color: #C8001E ; padding-left: 18%; box-sizing: border-box; width: 100%; display: flex; } .header_img{ height: 100%; width: 100px; margin-right: 10px; } .header_item{ height: 100%; width: 126px; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; border-left: 1px solid rgba(187, 187, 187, 100); cursor: pointer; } .header_item:last-child{ border-right: 1px solid rgba(187, 187, 187, 100); } footer{ width: 100%; height: 145px; box-sizing: border-box; padding: 0 18%; background: black; color: white; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; /* text-align: right; */ } footer div{ width: 180px; margin-bottom: 10px; } .banner{ width: 100%; height: 407px; } .swiper{ width: 100%; height: 100%; } .index_body{ background-color: #F2F1F1 ; padding:0 18%; box-sizing: border-box; } .index_content{ background-color: white; width: 100%; padding-bottom: 95px; } .index_content_title{ padding: 15px 10px; position: relative; font-size: 20px; } .index_content_title::after{ content: ''; width: 1px; height: 15px; position: absolute; left: 5px; top: 50%; margin-top: -7px; background-color: #FF0000 ; } .index_content_item{ width: 100%; min-height: 155px; border: 1px solid rgba(255, 0, 0, 100); margin-bottom: 27px; } .index_content_item_title{ height: 40px; border-bottom: 1px solid #BBBBBB ; padding: 0 10px; line-height: 40px; font-size: 18px; } .index_content_item:nth-child(2n+1) .index_content_item_title { text-align: right; } .index_content_item_introduce{ min-height: 115px; width: 100%; padding:0 10px; font-size: 14px; position: relative; padding-bottom: 33px; padding-top: 10px; box-sizing: border-box; } .index_content_item_introduce_data{ position: absolute; right: 15px; bottom: 0; height: 33px; line-height: 33px; font-size: 14px; } .item_introduce_data_span{ color: red; } .index_body1{ width: 100%; background-color: white; padding:0 13%; box-sizing: border-box; } .index_body1_title{ padding: 20px 10px; position: relative; font-size: 24px; font-weight: bold; } .index_body1_title::after{ content: ''; width: 5px; height: 40px; position: absolute; left: 0; top: 50%; margin-top: -20px; background-color: #FF0000 ; } .index_body1_item{ width: 100%; min-height: 200px; border: 1px solid rgba(255, 73, 73, 100); margin-bottom: 24px; border-radius: 6px; display: flex; } .index_body1_item_ranking{ height: 100%; padding-left: 25px; padding-top: 10px; color: rgba(255, 73, 73, 100); font-size: 28px; font-weight: bold; position: relative; width: 50px; } .index_body1_item:nth-child(-n+4) .ranking_num{ color: white; position: absolute; z-index: 999; } .index_body1_item:nth-child(-n+4) .ranking_sanjiao{ display:block; content:''; border-width:50px 50px 50px 50px; border-style:solid; border-color:#FF4949 transparent transparent #FF4949; /* 定位 */ position:absolute; left:0; top:0; z-index: 998; } .index_body1_item_content{ width: 72%; margin-left: 15px; padding-top: 10px; margin-right: 45px; } .item1_content_title{ font-size: 20px; font-weight: bold; margin-bottom: 12px; } .item1_content_synopsis{ font-size: 14px; margin-bottom: 20px; } .item1_content_synopsis:last-child{ margin-bottom: 0; } .index_body1_item_profit{ /* height: 100%; */ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 196px; } .index_body1_item_profit button{ width: 100%; height: 48px; border-radius: 33px; font-size: 18px; color: white; border: none; } .item1_profit_button{ background-color: rgba(86, 193, 255, 100); margin-bottom: 10px; } .item1_profit_button1{ background-color: rgba(255, 126, 20, 100); }