@media screen and (min-width: 769px) { /* 轮播 */ .banner-index .banner-pagination .swiper-pagination-bullet { width: 0.35rem; height: 0.05rem; border-radius: 0; } .banner-index .swiper-wrapper{ min-height: 5.45rem; background: #f5f6f8; } .banner-bottom{ top: 46%; left: 46%; background: rgba(0,149,255,1); cursor: pointer; color: #fff; font-size: 0.14rem; padding: 0.12rem 0.55rem; border-radius: 0.05rem; z-index: 1; } /* 3D模型的技术优势 */ .advantage { padding: 0 27%; } .advantage .advantage-content { display: flex; justify-content: space-between; width: 100%; border-bottom: 1px solid var(--borderColor); } .advantage .advantage-cate { padding-bottom: 0.1rem; font-size: 0.16rem; color: #999; border-bottom: 0.02rem solid rgba(0,0,0,0); transition: all 0.5s; } .advantage .advantage-cate:hover { color: #333; border-bottom: 0.02rem solid #333; } .advantage .advantage-cate.active { color: #333; border-bottom: 0.02rem solid #333; } .advantage-img { width: 49%; top: 45%; } .advantage-gbg { width: 70%; } .advantage-bg{ width: 49%; height: 72%; top: 45%; background-color: #333; } .modelImg-box { width: 100%; position: relative; text-align: center; } .modelImg-box img{ width: 100%; } .model-video { position: absolute; z-index: 2; left: 15.5%; top: 9%; width: 69.5%; height: 74%; object-fit: fill; } /* 建模步骤 */ .border-strong { border: 0.12rem solid #333; border-radius: 0.1rem; } /* 应用场景 */ .applyscene { margin-top: 0.35rem; display: flex; } .applyscene .applyscene-item { position: relative; height: 2rem; border-radius: 0.1rem; width: calc(20% - 0.12rem); margin-left: 0.15rem; margin-top: 0.15rem; cursor: pointer; overflow: hidden; } .applyscene .applyscene-item:nth-child(5n + 1) { margin-left: 0; } .applyscene .applyscene-item .applyscene-item-info { z-index: 2; } .applyscene .applyscene-item .applyscene-item-mask { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.6); } .applyscene .applyscene-item:hover .applyscene-item-mask { background-color: rgba(0,0,0,0.3); } .applyscene .applyscene-item:hover .transitionImg { transform: scale(1.1); } .transitionImg { transition: all 0.5s; } /* 服务流程 */ .coopprogress { padding: 0 0 0.6rem; margin-top: 0.5rem; display: flex; } .coopprogress .coopprogress-item { flex: 0 0 9.090909090909092%; } .coopprogress .coopprogress-item .coopprogress-item-title { font-size: 0.2rem; width: max-content; position: absolute; left: 50%; top: calc(100% + 0.2rem); transform: translateX(-50%); } .coopprogress .coopprogress-item .coopprogress-item-imaged { display: block; } .coopprogress .coopprogress-item .coopprogress-item-imagea { display: none; } .coopprogress .coopprogress-item:hover .coopprogress-item-imaged { display: none; } .coopprogress .coopprogress-item:hover .coopprogress-item-imagea { display: block; } } @media screen and (max-width: 768px) { /* 轮播 */ .banner-index .banner-pagination .swiper-pagination-bullet { width: 0.35rem; height: 0.05rem; border-radius: 0; } .banner-index .swiper-wrapper{ min-height: 2rem; } /* 3D模型的技术优势 */ .advantage { padding: 0; } .advantage .advantage-content { display: flex; justify-content: space-between; width: 100%; border-bottom: 1px solid var(--borderColor); overflow-x: auto; overflow-y: hidden; } .advantage .advantage-content::-webkit-scrollbar { display: none; } .advantage .advantage-cate { padding-bottom: 0.1rem; font-size: 0.14rem; color: #999; border-bottom: 0.02rem solid rgba(0,0,0,0); transition: all 0.5s; flex: 0 0 auto; } .advantage .advantage-cate ~ .advantage-cate { margin-left: 0.2rem; } .advantage .advantage-cate:hover { color: #333; border-bottom: 0.02rem solid #333; } .advantage .advantage-cate.active { color: #333; border-bottom: 0.02rem solid #333; } .advantage-img { width: 68%; top: 45%; } .advantage-gbg { width: 100%; } .advantage-bg { width: 70%; height: 72%; top: 45%; background-color: #333; } .modelImg-box { width: 100%; position: relative; text-align: center; } .modelImg-box img{ width: 100%; } .model-video { position: absolute; z-index: 2; left: 16.5%; top: 10%; width: 68%; height: 70%; object-fit: fill; } /* 建模步骤 */ .border-strong { border: 0.12rem solid #333; border-radius: 0.1rem; } /* 应用场景 */ .applyscene { margin-top: 0; display: flex; overflow-x: auto; overflow-y: hidden; } .applyscene::-webkit-scrollbar { display: none; } .applyscene .applyscene-item { flex: 0 0 auto; position: relative; height: 2rem; border-radius: 0.1rem; width: 2.68rem; margin-left: 0.15rem; margin-top: 0.15rem; cursor: pointer; overflow: hidden; } .applyscene .applyscene-item ~ .applyscene-item { margin-left: 0.15rem; } .applyscene .applyscene-item .applyscene-item-info { z-index: 2; } .applyscene .applyscene-item .applyscene-item-mask { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.6); } .applyscene .applyscene-item:hover .applyscene-item-mask { background-color: rgba(0,0,0,0.3); } .applyscene .applyscene-item:hover .transitionImg { transform: scale(1.1); } .transitionImg { transition: all 0.5s; } /* 服务流程 */ .coopprogress { padding: 0 0 0.4rem; margin-top: 0.2rem; display: flex; overflow-x: auto; overflow-y: hidden; } .coopprogress::-webkit-scrollbar { display: none; } .coopprogress .coopprogress-item { flex: 0 0 auto; max-width: 0.96rem; } .coopprogress .coopprogress-item .coopprogress-item-title { font-size: 0.12rem; width: max-content; position: absolute; left: 50%; top: calc(100% + 0.1rem); transform: translateX(-50%); } .coopprogress .coopprogress-item .coopprogress-item-imaged { display: block; } .coopprogress .coopprogress-item .coopprogress-item-imagea { display: none; } .coopprogress .coopprogress-item:hover .coopprogress-item-imaged { display: none; } .coopprogress .coopprogress-item:hover .coopprogress-item-imagea { display: block; } }