@media screen and (max-width:768px){ .searchBara{ position: fixed; width: 100%; position: fixed; top:70px; background: white; z-index: 9999; overflow-x: auto; white-space: nowrap; overflow-y:hidden; span{ margin-top: 0.08rem; display: block; } img{ width: 0.64rem; height: 0.64rem; display: block; } li{ display: inline-block; margin-left: 0.20rem; width: 0.64rem; text-align: center; height: 0.64rem; background: #F6F6F6; border-radius: 50%; opacity: 1; } } .rc-login{ width: 92%; margin:0 auto; } .userunlogin{ width: 100%; height: 0.60rem; display: flex; justify-content: space-between; align-items: center; .user-left{ display: flex; align-items: center; img{ width: 0.16rem; height: 0.16rem; display: block; } span{ color: #444444; font-size: 0.16rem; margin-left: 0.06rem; } } .user-right{ img{ width: 8px; height: 16px; display: block; } } } .van-swipe{ z-index: 2; } .rc-usermessage{ width: 80%; margin: 0 auto; text-align: center; em{ font-style: normal; font-size: 0.3rem; display: block; padding-top: 0.8rem; color: #E1001A; } span{ font-size: 0.16rem; margin-top: 0.17rem; color: #666666; display: flex; align-items: center; justify-content: center; } i{ font-style: normal; width: 1.57rem; height: 0.48rem; border: 2px solid #E2001A; border-radius: 0.30rem; display: block; line-height: 0.48rem; font-size: 0.16rem; color: #E2001A; margin: 0 auto; margin-top: 0.32rem; margin-bottom: 0.80rem; } } .rc-video{ display: none; } .useraimg{ width: 100%; height: auto; object-fit: cover; } .van-swipe-item { color: #fff; height: 3.75rem; width: 100%; font-size: 0.20px; line-height: 1.50rem; text-align: center; position: relative; } .rc-lunbo{ width: 100%; margin-top: 0.46rem; .rc-selection{ display: none; } h2{ text-align: center; font-size: 0.26rem; color: #E2001A; } #xxxFullScreen { background-color: white; margin-top: 0.40rem; #swiper1 { width: 100%; overflow: hidden; padding: 0 0 0.10rem 0; } .swiper-container{ height: 6.45rem; } .swiper-container, .swiper-container2 { width: 100%; // overflow: visible !important; height: 100%; position: relative; } #swiper1 .swiper-container .swiper-wrapper .swiper-slide { width: 3rem; //height: 6.45rem !important; //Auto adaption } /* 上一张 */ #swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev { margin-top: 0.05rem; height: 100%; } /* 下一张 */ #swiper1 .swiper-container .swiper-wrapper .swiper-slide-next { margin-top: 0.05rem; height: 100%; } .swiper-container .swiper-wrapper .swiper-slide-active { height: 100%; } .uservideo{ width: 100%; height: 2.51rem; display: block; } } .sw-center{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #d7d7d7; border-radius:4px; .rc-click{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } img{ width: 1.6rem; height: 1.6rem; object-fit: cover; display: block; margin-top: 0.40rem; } span{ font-size: 0.18rem; color: #E2001A; display: block; margin-top: 0.20rem; } p{ font-size: 0.14rem; color: #666666; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; width: 60%; text-align: center; line-height:.24rem; } em{ font-style: normal; font-size: 0.20rem; color: #666666; } .sw-cen{ width: 100%; display: flex; justify-content: center; position: relative; z-index: 3; padding-bottom: 0.2rem; i{ font-style: normal; width: 1.30rem; height: 0.40rem; border: 2px solid #E2001A; border-radius: 0.30rem; line-height: 0.40rem; text-align: center; color: #E2001A; font-size: 0.14rem; margin-top: 0.32rem; display: block; } } } } /* 中间的图片 */ .swiper-container .swiper-wrapper .swiper-slide-active { height: 165px !important; } .swiperWrap{ height: 469px; width: 100%; img{ height: 469px; width: 100%; } /deep/.swiper-pagination-bullet-active{ background: red; width: 8px; height: 8px; } /deep/.swiper-pagination-bullet{ width: 8px; height: 8px; background: #d7d7d7; } /deep/.swiper-pagination-bullet-active { opacity: 1; background-color: red!important; } } .rc-max-width--xl { margin-top: 0.40rem; overflow: hidden; .ul-zhuan { width: 100%; overflow-x: auto; white-space: nowrap; padding-top:4px; &::-webkit-scrollbar{ display:none; } span{ margin-top: .5rem; display: block; } img{ width: 4rem; height: 4rem; display: block; } li{ display: inline-block; margin-left: 1.25rem; width: 4rem; text-align: center; height: 4rem; background: #F6F6F6; border-radius: 50%; opacity: 1; } } .selectionswitch{ .rc-conta{ max-height: 1.9rem; min-height: 1.9rem; } width: 100%; margin-top: 0.45rem; h2{ text-align: center; font-size: 0.26rem; color: #E2001A; } .rc-contair{ margin-top: 0.24rem; .rc-rccontair{ height:1.60rem;display:flex;align-items: center } ul{ text-align: center; align-items: center; li{ width: 43%; margin-top: 0.16rem; flex-direction: column; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: inline-flex; background: #FFFFFF; border: 1px solid #D7D7D7; margin-left: 0.15rem; border-radius: 0.03rem; } img{ width: 100%; display: flex; margin: 0 auto; height:100%; } i{ font-style: normal; font-size: 0.18rem; margin-top: 0.08rem; color: #666666; display: block; } } span{ font-size: 0.16rem; color: #666666; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; white-space: normal; height: 0.25rem; margin-top: 0.08rem; } strong{ width: 1.30rem; height: 0.40rem; border: 2px solid #E2001A; display: flex; align-items: center; justify-content: center; border-radius: 30px; margin: 0 auto; font-size: 0.14rem; color: #E2001A; margin-top: 0.2rem; margin-bottom: 0.3rem; } .userserlect{ display: flex; width: 100%; justify-content: center; align-items: center; margin-top: 0.40rem; span{ width: 1.30rem; height: 0.40rem; background: #E2001A; text-align: center; line-height: 0.40rem; border-radius: 0.30rem; font-size: 0.14rem; color: #FFFFFF; } } } } } .active { font-size: 0.14rem; border: 1px solid red; color: red; } .unactive { font-size: 0.14rem; color: #444444; border: 1px solid #D7D7D7; } } @media screen and (min-width: 769px) { .sw-center{ display: none; } .useraimg{ width: 100%; height: 29.31rem; object-fit: cover; } .van-swipe-item { color: #fff; height: 29.31rem; width: 100%; font-size: 1.25rem; line-height: 9.375rem; text-align: center; } .rc-lunbo{ width: 100%; margin-top: 2.875rem; margin: 0 auto; position: relative; margin-top: 9.375rem; h2{ text-align: center; font-size: 2.5rem; color: #E2001A; } #xxxFullScreen { background-color: white; margin-top: 100px; #swiper1 { width: 100%; overflow: hidden; } .swiper-container2 { width: 100%; height: 38.6rem; // overflow: visible !important; position: relative; } #swiper1 .swiper-container .swiper-wrapper .swiper-slide { width: 100%; //height: 6.18rem; } /* 上一张 */ #swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev { margin-top: 5px; //height: 6.18rem !important; } /* 下一张 */ #swiper1 .swiper-container .swiper-wrapper .swiper-slide-next { margin-top: .31rem; //height: 6.18rem !important; } .swiper-container .swiper-wrapper .swiper-slide-active { //height: 6.18rem !important; } .rc-video{ position: relative; display: flex; justify-content: space-evenly; .rc-right { width: 4.40rem; display: flex; align-items: center; justify-content: center; flex-direction: column; img{ width: 320px; height: auto; } span{ font-size: 1.6rem; display: block; margin-top: 20px; color: #E2001A; } p { font-size: 16px; width:100%; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 这里是超出几行省略 */ color: #666666; margin-top: 0.16rem; text-align: center; } em { font-style: normal; font-size: 1.375rem; color: #666666; display: block; margin-top: 1rem; } strong { font-style: normal; width: 8.125rem; height: 2.5rem; border: 2px solid #E2001A; border-radius: 1.875rem; display: block; line-height: 2.5rem; text-align: center; color:#E2001A; font-size: .875rem; margin-top: 1rem; } } .uservideo{ width: 35rem; height: 31.6rem; display: block; border: 1px solid red; } .userleft{ position: absolute; top: 50%; left:0; margin-top: -.72rem; img{ width: .69rem; height: 1.38rem; display: block; } } .userright{ position: absolute; top: 50%; right:0; margin-top: -.72rem; img{ width: .69rem; height: 1.375rem; display: block; } } } } } /* 中间的图片 */ .swiper-container .swiper-wrapper .swiper-slide-active { //height: 1.65rem !important; } .swiperWrap{ height: 29.3rem; width: 100%; img{ height: 4.69rem; width: 100%; } /deep/.swiper-pagination-bullet-active{ background: red; width: .5rem; height: .5rem; } /deep/.swiper-pagination-bullet{ width: 50rem; height: 8px; background: #d7d7d7; } /deep/.swiper-pagination-bullet-active { opacity: 1; background-color: red!important; } } .rc-max-width--xl { .rc-ma { padding-bottom:28px; .ul-zhuan{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row; span{ margin-top: .5rem; display: block; } img{ width: 9.875rem; height: 9.875rem; display: block; } li{ cursor: pointer; font-size: 16px; width: 9.875rem; text-align: center; height: 9.875rem; background: #F6F6F6; border-radius: 50%; margin-left:1.25rem; } } } } .rc-main{ width: 100%; margin-top: 2.5rem; .van-tabs{ display: none; } .selectionswitch{ width: 100%; h2{ text-align: center; font-size: 2.5rem; color: #E2001A; } .van-tabs{ display: none; } } .rc-selection{ width: 100%; ol{ width: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; li{ font-size: 1rem; margin-left: 2.5rem; } } .rc-contair { margin-top: 1.25rem; ul{ text-align: center; margin-top: 4.8rem; display: flex; justify-content: space-between; width: 100%; li { border-radius: 3px; display: inline-flex; background: #FFFFFF; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #D7D7D7; margin-top: 2.5rem; } img{ width: 320px; height:auto; object-fit: contain; display: flex; margin: 0 auto; } i{ font-style: normal; font-size: 1.125rem; margin-top: .5rem; color: #666666; display: block; font-size: 1.375rem; color: #666666; } } span{ font-size: 1.875rem; color: #E2001A; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; margin-top:1rem; -webkit-box-orient: vertical; } strong{ width: 8.125rem; height: 2.5rem; border: 2px solid #E2001A; display: flex; align-items: center; justify-content: center; border-radius: 1.875rem; margin: 0 auto; font-size: .875rem; color: #E2001A; margin-top: 1.5rem; } .userserlect{ display: flex; width: 100%; justify-content: center; align-items: center; padding-bottom: 5.5rem; padding-top: 5rem; span{ width: 8.125rem; height: 2.5rem; background: #E2001A; text-align: center; line-height: 2.5rem; border-radius: 1.875rem; font-size: .875rem; color: #FFFFFF; } } } } } .active { font-size: 1rem; border: 3px solid red; color: red; } .unactive { font-size: 1rem; color: #444444; border: 1px solid #D7D7D7; } .rc-maa{ ul{ width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 4.8rem; span{ margin-top: .5rem; display: block; } img{ width: 9.875rem; height: 9.875rem; display: block; } li{ display: inline-block; cursor: pointer; font-size: 1rem; margin-left: 2.5rem; width: 9.875rem; text-align: center; height: 9.875rem; background: #F6F6F6; border-radius: 50%; } } } .userselection { font-size: 0.16rem; color: #E2001A; } .unselection { font-size: 0.16rem; } .rc-usermessage{ width: 50%; margin: 0 auto; text-align: center; em{ font-style: normal; font-size: 1.875rem; display: block; padding-top: 5rem; color: #E1001A; } span{ font-size: 1rem; margin-top: 1rem; color: #666666; display: flex; align-items: center; justify-content: center; } i{ font-style: normal; width: 1.57rem; height: 0.48rem; border: 2px solid #E2001A; border-radius: 0.30rem; display: block; line-height: 0.48rem; font-size: 0.16rem; color: #E2001A; margin: 0 auto; margin-top: 0.32rem; margin-bottom: 0.80rem; } } }