@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: 62%; left: 44%; 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; } /* 维构VR全景直播，具有以下5大优势 */ .advantage { padding: 0 27%; } .advantage .advantage-cate { 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-gbg { width: 70%; } .advantage-img { width: 49%; top: 45%; } .advantage-bg{ width: 49%; height: 72%; top: 45%; background-color: #333; } /* 场成功的全景直播只需5步 */ .progress { padding: 0 12% 0.6rem; margin-top: 0.5rem; display: flex; } .progress .progress-item { flex: 0 0 11.11111111111111%; } .progress .progress-item .progress-item-title { font-size: 0.2rem; width: max-content; position: absolute; left: 50%; top: calc(100% + 0.2rem); transform: translateX(-50%); } .progress .progress-item .progress-item-imaged { display: block; } .progress .progress-item .progress-item-imagea { display: none; } .progress .progress-item:hover .progress-item-imaged { display: none; } .progress .progress-item:hover .progress-item-imagea { display: block; } /* 直播框架 */ .livebroad { margin-top: 1rem; } .livebroad .livebroad-content { margin-top: 0.5rem; display: flex; } .livebroad .livebroad-two { width: 10%; } .livebroad .livebroad-four { width: 10%; } .livebroad .livebroad-five { width: 10%; } .livebroad .livebroad-one { position: relative; width: 20%; } .livebroad .livebroad-one .livebroad-one-title { color: #fff; font-size: 0.2rem; text-align: center; position: absolute; left: 50%; top: 60%; transform: translateX(-50%); } .livebroad .livebroad-one .livebroad-one-desc { color: #333; font-size: 0.16rem; width: max-content; position: absolute; left: 50%; top: calc(100% + 0.2rem); transform: translateX(-50%); } .livebroad .livebroad-three { position: relative; width: 20%; } .livebroad .livebroad-three .livebroad-three-title { color: #fff; font-size: 0.2rem; text-align: center; position: absolute; left: 50%; top: 60%; transform: translateX(-50%); } .livebroad .livebroad-three .livebroad-three-desc { color: #333; font-size: 0.16rem; width: max-content; position: absolute; left: 50%; top: calc(100% + 0.2rem); transform: translateX(-50%); } .livebroad .livebroad-six { position: relative; width: 30%; font-size: 0.2rem; color: #fff; } .livebroad .livebroad-six .livebroad-six-desc { color: #333; font-size: 0.16rem; width: max-content; position: absolute; left: 50%; top: calc(100% + 0.2rem); transform: translateX(-50%); } .livebroad .livebroad-six .livebroad-six-item { height: calc(25% - 3.0.75rem); border-radius: 0.1rem; overflow: hidden; background-image: url(https://alicdn.vgometa.com/home/images/productlive/zbkjbg.png); background-repeat: no-repeat; background-size: 100% 100%; } .livebroad .livebroad-six .livebroad-six-item ~ .livebroad-six-item { margin-top: 0.05rem; } .livebroad .livebroad-six .livebroad-six-item .livebroad-six-item-image { width: 0.7rem; height: 0.7rem; transform: scale(1.5); margin-left: 5%; } /* 高效便捷的全景直播服务方案 */ .applyscene { padding-top: 0.7rem; padding-bottom: 0.6rem; margin-top: 1rem; } .applyscene .applyscene-item { box-sizing: border-box; width: 25%; min-width: 3rem; border-radius: 0.1rem; cursor: pointer; padding: 0 0.2rem 3%; margin-top: 0.85rem; transition: all 0.5s; } .applyscene .applyscene-item .applyscene-item-image { margin-top: -0.36rem; z-index: 1; } .applyscene .applyscene-item .applyscene-item-imaged { width: 0.72rem; height: 0.72rem; } .applyscene .applyscene-item .applyscene-item-imagea { width: 0.72rem; height: 0.72rem; display: none; } .applyscene .applyscene-item:hover { box-shadow: 0.02rem 0.02rem 0.1rem 0 rgba(0,0,0,0.2); transform: translateY(-0.1rem); } .applyscene .applyscene-item:hover .applyscene-item-imaged { display: none; } .applyscene .applyscene-item:hover .applyscene-item-imagea { display: block; } /* 维构VR全景直播，具有以下5大优势 VR直播的应用场景 */ .techadv1 { margin-top: 0.5rem; padding-bottom: 1rem; display: flex; } .techadv2 { margin-top: 0.5rem; padding-bottom: 1rem; display: flex; } .techadv-left { width: 65%; } .techadv-left img { width: 80%; min-height: 3.25rem; } .techadv-right { width: 35%; } .techadv { background-image: url(https://alicdn.vgometa.com/home/images/productlive/techbg.png); background-repeat: no-repeat; background-size: 100% 100%; } .techadv-content { padding: 0 8%; } .techadvcate { margin-top: 0.1rem; margin-bottom: 0.7rem; display: flex; } .techadvcate .techadvcate-item { width: 1.2rem; padding: 0.1rem 0; background-color: #e8eaec; transition: all 0.6s; } .techadvcate .techadvcate-item + .techadvcate-item { border-left: 0.02rem solid #F6F7F9; } .techadvcate .techadvcate-item.active { background-color: #fff; box-shadow: 0 0.06rem 0.16rem -0.08rem rgb(0 0 0 / 8%), 0 0.09rem 0.28rem rgb(0 0 0 / 5%), 0 0.12rem 0.48rem 0.16rem rgb(0 0 0 / 3%); } .techadvcate .progress{ bottom: 0; min-width: 1.2rem; padding: 0 !important; height: 0.02rem; } .techadvcate .progress .el-progress-bar__outer { height: 0.02rem !important; } /* 服务流程 */ .serviceprogress { display: flex; margin-top: 0.3rem; } .serviceprogress-item { width: calc(100% / 6); background-color: #f5f5f5; height: 3.4rem; transition: all 0.5s; } .serviceprogress-item ~ .serviceprogress-item { border-left: 1px solid #ddd; } .serviceprogress-item .serviceprogress-item-imaged { width: 0.52rem; height: 0.53rem; } .serviceprogress-item .serviceprogress-item-imagea { width: 0.52rem; height: 0.53rem; display: none; } .serviceprogress-item:hover { width: calc(150% / 6); background-color: #404040; color: #fff; } .serviceprogress-item:hover .serviceprogress-item-imaged { display: none; } .serviceprogress-item:hover .serviceprogress-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; } /* 维构VR全景直播，具有以下5大优势 */ .advantage { padding: 0; } .advantage .advantage-cate { 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-gbg { width: 100%; } .advantage-img { width: 68%; top: 45%; } /* 场成功的全景直播只需5步 */ .progress { padding: 0 0 0.6rem; margin-top: 0.2rem; display: flex; overflow-x: auto; overflow-y: hidden; } .progress::-webkit-scrollbar { display: none; } .progress .progress-item { flex: 0 0 auto; max-width: 0.96rem; } .progress .progress-item .progress-item-title { font-size: 0.12rem; width: max-content; position: absolute; left: 50%; top: calc(100% + 0.1rem); transform: translateX(-50%); } .progress .progress-item .progress-item-imaged { display: block; } .progress .progress-item .progress-item-imagea { display: none; } .progress .progress-item:hover .progress-item-imaged { display: none; } .progress .progress-item:hover .progress-item-imagea { display: block; } /* 直播框架 */ .livebroad { margin-top: 0.3rem; } .livebroad .livebroad-content { margin-top: 0.3rem; display: flex; overflow-x: auto; overflow-y: hidden; padding-bottom: 0.4rem; } .livebroad .livebroad-content::-webkit-scrollbar { display: none; } .livebroad .livebroad-two { flex: 0 0 auto; width: 1rem; } .livebroad .livebroad-four { flex: 0 0 auto; width: 1rem; } .livebroad .livebroad-five { flex: 0 0 auto; width: 1rem; } .livebroad .livebroad-one { flex: 0 0 auto; width: 2rem; position: relative; } .livebroad .livebroad-one .livebroad-one-title { color: #fff; font-size: 0.2rem; text-align: center; position: absolute; left: 50%; top: 60%; transform: translateX(-50%); } .livebroad .livebroad-one .livebroad-one-desc { color: #333; font-size: 0.16rem; width: max-content; position: absolute; left: 50%; top: calc(100% + 0.1rem); transform: translateX(-50%); } .livebroad .livebroad-three { flex: 0 0 auto; width: 2rem; position: relative; } .livebroad .livebroad-three .livebroad-three-title { color: #fff; font-size: 0.2rem; text-align: center; position: absolute; left: 50%; top: 60%; transform: translateX(-50%); } .livebroad .livebroad-three .livebroad-three-desc { color: #333; font-size: 0.16rem; width: max-content; position: absolute; left: 50%; top: calc(100% + 0.1rem); transform: translateX(-50%); } .livebroad .livebroad-six { flex: 0 0 auto; width: 3rem; position: relative; font-size: 0.2rem; color: #fff; } .livebroad .livebroad-six .livebroad-six-desc { color: #333; font-size: 0.16rem; width: max-content; position: absolute; left: 50%; top: calc(100% + 0.1rem); transform: translateX(-50%); } .livebroad .livebroad-six .livebroad-six-item { height: calc(25% - 0.0375rem); border-radius: 0.1rem; overflow: hidden; background-image: url(https://alicdn.vgometa.com/home/images/productlive/zbkjbg.png); background-repeat: no-repeat; background-size: 100% 100%; } .livebroad .livebroad-six .livebroad-six-item ~ .livebroad-six-item { margin-top: 0.05rem; } .livebroad .livebroad-six .livebroad-six-item .livebroad-six-item-image { width: 20%; transform: scale(1.5); margin-left: 5%; } /* 高效便捷的全景直播服务方案 */ .applyscene { padding-top: 0.3rem; padding-bottom: 0.3rem; margin-top: 0.1rem; } .applyscene .applyscene-item { box-sizing: border-box; width: 100%; border-radius: 0.1rem; cursor: pointer; padding: 0 0.2rem 3%; margin-top: 0.66rem; transition: all 0.5s; } .applyscene .applyscene-item .applyscene-item-image { margin-top: -0.36rem; z-index: 1; } .applyscene .applyscene-item .applyscene-item-imaged { width: 0.72rem; height: 0.72rem; } .applyscene .applyscene-item .applyscene-item-imagea { width: 0.72rem; height: 0.72rem; display: none; } .applyscene .applyscene-item:hover { box-shadow: 0.02rem 0.02rem 0.1rem 0 rgba(0,0,0,0.2); transform: translateY(-0.1rem); } .applyscene .applyscene-item:hover .applyscene-item-imaged { display: none; } .applyscene .applyscene-item:hover .applyscene-item-imagea { display: block; } /* 维构VR全景直播，具有以下5大优势 VR直播的应用场景 */ .techadv1 { margin-top: 0.3rem; padding-bottom: 0.3rem; display: flex; flex-wrap: wrap; } .techadv2 { margin-top: 0; padding-bottom: 0.3rem; display: flex; flex-wrap: wrap; flex-direction: column-reverse; } .techadv-left { width: 100%; } .techadv-left img { width: 100%; } .techadv-right { width: 100%; } .techadv { background-image: url(https://alicdn.vgometa.com/home/images/productlive/techbg.png); background-repeat: no-repeat; background-size: 100% 100%; } .techadv-content { padding: 0 8%; } .techadvcate { margin-top: 0.1rem; margin-bottom: 0.2rem; display: flex; } .techadvcate .techadvcate-item { width: 33.3%; padding: 0.1rem 0; background-color: #e8eaec; transition: all 0.6s; } .techadvcate .techadvcate-item + .techadvcate-item { border-left: 0.02rem solid #F6F7F9; } .techadvcate .techadvcate-item.active { background-color: #fff; box-shadow: 0 0.06rem 0.16rem -0.08rem rgb(0 0 0 / 8%), 0 0.09rem 0.28rem rgb(0 0 0 / 5%), 0 0.12rem 0.48rem 0.16rem rgb(0 0 0 / 3%); } .techadvcate .progress{ bottom: 0; min-width: 1.2rem; padding: 0 !important; height: 0.02rem; } .techadvcate .progress .el-progress-bar__outer{ height: 0.02rem !important; } /* 服务流程 */ .serviceprogress { display: flex; margin-top: 0.2rem; overflow-x: auto; overflow-y: hidden; } .serviceprogress::-webkit-scrollbar { display: none; } .serviceprogress-item { flex: 0 0 auto; width: 2rem; background-color: #f5f5f5; height: 3.4rem; transition: all 0.5s; } .serviceprogress-item ~ .serviceprogress-item { border-left: 1px solid #ddd; } .serviceprogress-item .serviceprogress-item-imaged { width: 0.52rem; height: 0.53rem; } .serviceprogress-item .serviceprogress-item-imagea { width: 0.52rem; height: 0.53rem; display: none; } .serviceprogress-item:hover { width: 3rem; background-color: #404040; color: #fff; } .serviceprogress-item:hover .serviceprogress-item-imaged { display: none; } .serviceprogress-item:hover .serviceprogress-item-imagea { display: block; } }