.service_swiper{ width: 100%; height: 8rem; position: relative; z-index: -1; } .service_swiper>img:first-child{ width: 100%; height: 100%; position: relative; z-index: -1; } .back_to_index{ position: absolute; width: 1.20rem; height: 0.4rem; top: 0.82rem; right: 3.61rem; font-size: 0.2rem; cursor: pointer; } .back_to_index img{ width: 100%; height: 100%; } .service_info{ width: 12rem; margin: -2.12rem auto 1.12rem auto; display: flex; align-items: flex-end; justify-content: space-between; } .service_left{ width: 9rem; } .service_left .list{ display: flex; align-items: center; margin-left: 0.12rem; } .service_left .list li{ width: 1.2rem; height: 0.5rem; font-size: 0.16rem; color: #292929; box-shadow:0px 0px 0.1rem 0px rgba(0, 0, 0, 0.4); border-radius:0.1rem 0.1rem 0px 0px; background-color: #fff; text-align: center; line-height: 0.5rem; margin-right: 0.05rem; } .service_left .list li.selected{ background-color: #00A3E1; color: #fff; } .service_left .list li:hover{ cursor:pointer; } .service_left .content{ width: 100%; height: 400px; box-shadow:0px 0px 0.6rem 0px rgba(0, 0, 0, 0.2); border-radius:0.1rem; background-color: #fff; overflow: auto; } @media screen and (min-width: 1920px) { .service_left .content { height: 4rem; } } .service_left .content::-webkit-scrollbar { /*滚动条整体样式*/ width: 0.3rem; height: 2rem; } .service_left .content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #00A3E1; border-radius: 0.1rem; } .service_left .content::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); border-radius: 0.1rem; background-color: #fff; } /* .service_left .content::-webkit-scrollbar-button { background-color:cyan; } */ .service_left .content>div{ height: 100%; width: 100%; font-size: 0.16rem; color: #292929; } .service_left .content .content_box{ padding: 0.2rem 0.17rem 0.12rem 0.24rem; } .service_left .content .content_box .headline{ font-size: 0.2rem; color: #00A3E1; margin-bottom: 0.19rem; } .service_left .content .content_box>p{ color: #292929; font-size: 0.16rem; margin-bottom: 0.38rem; } .service_left .content .content_box>p:last-child{ margin-bottom: 0; } .service_right{ width: 2.8rem; height: 400px; background-color:#fff ; box-shadow:0px 0px 0.6rem 0px rgba(0, 0, 0, 0.2); border-radius:0.1rem; } @media screen and (min-width: 1920px) { .service_right { height: 4rem; } } .service_right_box{ padding: 0.18rem 0.2rem 0.18rem 0.21rem; } .service_right_top{ padding-bottom: 0.2rem; border-bottom:1px solid #F5F5F5; } .service_right_top .title{ padding:0.02rem 0 0.02rem 0.09rem; border-left: 0.02rem solid #00A3E1; font-size: 0.16rem; color: #00A3E1; } .service_people{ display: flex; align-items: center; margin-top: 0.2rem; } .service_people>img{ width: 0.2rem; height: 0.2rem; } .service_people>span{ font-size: 0.14rem; color: #292929; margin-left: 0.07rem; } .service_right_bom{ margin-top: 0.21rem; } .service_right_bom .title{ padding:0.02rem 0 0.02rem 0.09rem; border-left: 0.02rem solid #00A3E1; font-size: 0.16rem; color: #00A3E1; } .service_download{ display: flex; align-items: center; margin-top: 0.2rem; } .service_download>img{ width: 0.22rem; height: 0.22rem; } .service_download>div{ margin-left: 0.07rem; font-size: 0.14rem; color: #292929; } .service_download>div>span{ color: #00A3E1; font-size: 0.14rem; }