.othernav { margin-top: 100px; background-color: #f5f5f5; } .detailtop { background-color: #fff; padding: 50px 0; } .detailtop .w { display: flex; justify-content: space-between; } .detailtop .left { width: 45%; height: 100%; overflow: hidden; } .detailtop .left .swiper { position: relative; height: 397px; width: 100%; overflow: hidden; --swiper-navigation-color: #fff;/* 单独设置按钮颜色 */ --swiper-navigation-size: 15px;/* 设置按钮大小 */ } .detailtop .swiper-button-next, .detailtop .swiper-button-prev{ background-color: rgba(0, 0, 0, 0.5); width: 30px; height: 58px; } .detailtop .swiper-button-next { right: 0; } .detailtop .swiper-button-prev { left: 0; } .detailtop .left .swiper img { width: 100%; height: 100%; object-fit: cover; } .detailtop .left .picswrap { margin-top: 15px; display: flex; overflow-x: auto; } .detailtop .left .picswrap .picitem { flex-shrink: 0; /* 防止压缩 */ width: 90px; height: 68px; margin-right: 10px; overflow: hidden; cursor: pointer; } .detailtop .left .picswrap .picitem img { width: 100%; height: 100%; object-fit: cover; } .detailtop .left .picswrap .picitem.active { border: 1px solid #0167BB; } .detailtop .right { flex: 1; margin-left: 70px; display: flex; flex-direction: column; justify-content: space-between; height: auto; } .detailtop .right h2 { padding-bottom: 24px; color: #333333; font-size: 36px; border-bottom: 1px solid #D6D6D6; } .detailtop .right p { flex: 1; margin-top: 24px; font-size: 18px; line-height: 36px; color: #777777; } .detailtop .right .btnwrap{ display: flex; align-items: center; height: 48px; margin-top: 15px; margin-bottom: 84px; } .detailtop .right .btnwrap a { height: 48px; width: 160px; background-color: #B89871; border-radius: 24px; line-height: 48px; text-align: center; color: #fff; font-size: 18px; margin-right: 18px; } .detailtop .right .btnwrap a:last-child{ background-color: #0167BB; } .sectiontitle { background-color: #F5F5F5; height: 80px; line-height: 80px; font-size: 24px; } .messagewrap { padding: 50px 0; background-color: #F5F5F5; } .messagewrap h2 { text-align: center; color: #333333; font-size: 36px; font-weight: normal; } .messagewrap p { text-align: center; color: #999999; font-size: 16px; margin-top: 10px; } #messageform { margin-top: 40px; display: flex; flex-direction: column; } #messageform .inputwrap { display: flex; align-items: center; margin-bottom: 20px; } #messageform .inputwrap input { height: 50px; width: calc((100% - 40px)/3); margin-right: 20px; outline: none; padding: 0 10px; border: 1px solid #EFEFEF; } #messageform .inputwrap input:last-child{ margin-right: 0; } #messageform #message { margin-bottom: 36px; width: 100%; height: 160px; padding: 10px; outline: none; border: 1px solid #EFEFEF; } #messageform .submit { width: 180px; height: 50px; background-color: #0167BB; border: 0; font-size: 16px; color: #fff; } /* 对于小屏幕设备(手机等) */ @media only screen and (max-width: 600px) { .othernav { margin-top: 64px; } .detailtop { padding: 25px 0; } .detailtop .w { flex-direction: column; } .detailtop .left { width: 100%; } .detailtop .right { width: 100%; margin-left: 0; margin-top: 15px; } .detailtop .right .btnwrap { margin-bottom: 0; } #messageform .inputwrap { flex-direction: column; } #messageform .inputwrap input { width: 100%; margin-right: 0; margin-bottom: 15px; } }