@media screen and (max-width:768px){ .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: 9998; } .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: 4.69rem; } .van-swipe-item { color: #fff; height: 4.69rem; width: 100%; font-size: 0.20px; line-height: 1.50rem; text-align: center; position: relative; z-index: 9998; } .rc-fixright{ width: 0.60rem; height: 1.81rem; position: fixed; right: 0; top: 30%; z-index: 9999; ul{ width: 60px; height: 181px; box-shadow: 0px 0px 6px rgb(0 0 0 / 10%); background-color: white; display: flex; flex-direction: column; li{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 0.18rem; } li:last-child{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 0.18rem; margin-bottom: 0.2rem; } } img{ width: 0.19rem; height: 0.20rem; display: block; } span{ font-size: 0.12rem; color: #666666; } .tuntop{ width: 60px; height: 60px; background: #FFFFFF; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); opacity: 1; display: block; color: #666666; font-size: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 8px; img{ width: 0.19rem; height: 0.32rem; display: block; } } } .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; } /* 上一张 */ #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; height: 100%; height: 100%; border: 1px solid #d7d7d7; .rc-click{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } img{ width: 1.77rem; height: 100px; display: block; margin-top: 0.20rem; } 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%; } em{ font-style: normal; font-size: 0.20rem; color: #666666; } .sw-cen{ width: 100%; display: flex; justify-content: center; position: relative; z-index: 9999; 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-main{ width: 100%; margin-top: 0.40rem; overflow-x: hidden; overflow: hidden; .ul-zhuan{ width: 100%; overflow-x: auto; white-space: nowrap; 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; } } .selectionswitch{ .rc-conta{ max-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: 0.85rem; display: flex; margin: 0 auto; height: 1.14rem ; } 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; } 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: 768px) and (max-width: 1920px) { .sw-center{ display: none; } .useraimg{ width: 100%; height: 4.69rem; } .van-swipe-item { color: #fff; height: 4.69rem; width: 100%; font-size: 0.20rem; line-height: 1.50rem; text-align: center; } .rc-fixright{ width: 0.60rem; height: 1.81rem; background: #FFFFFF; box-shadow: 0px 0px 0.10rem rgba(0, 0, 0, 0.16); border-radius: 0.04rem; position: fixed; right: 0; top: 30%; display: flex; flex-direction: column; z-index: 9999; ul{ height: 100%; li{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 0.08rem; } } img{ width: 0.30rem; height: 0.30rem; display: block; } span{ font-size: 0.12rem; color: #666666; } } .rc-lunbo{ width: 90%; margin-top: 0.46rem; margin: 0 auto; position: relative; margin-top: 1.50rem; h2{ text-align: center; font-size: 0.40rem; color: #E2001A; } #xxxFullScreen { background-color: white; margin-top: 100px; #swiper1 { width: 100%; overflow: hidden; } .swiper-container, .swiper-container2 { width: 100%; height: 6.18rem; // overflow: visible !important; position: relative; } #swiper1 .swiper-container .swiper-wrapper .swiper-slide { width: 100%; border-radius: 0.10rem; 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: 0.05rem; height: 6.18rem !important; } .swiper-container .swiper-wrapper .swiper-slide-active { height: 6.18rem !important; } .rc-video{ position: relative; display: flex; .rc-right{ width: 4.40rem; height: 4.76rem; display: flex; margin-left: 1.95rem; align-items: center; justify-content: center; flex-direction: column; img{ width: 3.38rem; height: 2.01rem; display: block; } span{ font-size: 0.26rem; display: block; margin-top: 0.46rem; color: #E2001A; } p{ font-size: 0.16rem; width: 2rem; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 这里是超出几行省略 */ overflow: hidden; color: #666666; margin-top: 0.16rem; } em{ font-style: normal; font-size: 0.22rem; color: #666666; display: block; margin-top: 0.16rem; } strong{ font-style: normal; list-style: none; width: 1.30rem; height: 0.40rem; border: 2px solid #E2001A; border-radius: 0.30rem; display: block; line-height: 0.40rem; text-align: center; color:#E2001A; font-size: 0.14rem; margin-top: 0.16rem; } } .uservideo{ width: 5.60rem; height: 5.06rem; display: block; border: 1px solid red; } .userleft{ position: absolute; top: 50%; left:0; margin-top: -0.115rem; img{ width: 0.11rem; height: 0.22rem; display: block; } } .userright{ position: absolute; top: 50%; right:0; margin-top: -0.115rem; img{ width: 0.11rem; height: 0.22rem; display: block; } } } } } /* 中间的图片 */ .swiper-container .swiper-wrapper .swiper-slide-active { height: 1.65rem !important; } .swiperWrap{ height: 4.69rem; width: 100%; img{ height: 4.69rem; width: 100%; } /deep/.swiper-pagination-bullet-active{ background: red; width: 0.08rem; height: 0.08rem; } /deep/.swiper-pagination-bullet{ width: 8rem; height: 8px; background: #d7d7d7; } /deep/.swiper-pagination-bullet-active { opacity: 1; background-color: red!important; } } .rc-main{ width: 100%; margin-top: 0.40rem; .van-tabs{ display: none; } ul{ width: 90%; display: flex; justify-content: center; span{ margin-top: 0.08rem; display: block; } img{ width: 1.58rem; height: 1.58rem; display: block; } li{ display: inline-flex; cursor: pointer; font-size: 16px; margin-left: 0.40rem; width: 1.58rem; text-align: center; height: 1.58rem; background: #F6F6F6; border-radius: 50%; } } .selectionswitch{ width: 100%; h2{ text-align: center; font-size: 0.40rem; 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: 0.16rem; margin-left: 0.40rem; } } .rc-contair{ margin-top: 0.24rem; ul{ text-align: center; margin-top: 0.77rem; display: block; width: 100%; float: left; li{ width: 3.20rem; height: 5.60rem; border-radius: 0.03rem; display: inline-flex; background: #FFFFFF; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #D7D7D7; margin-top: 0.40rem; } img{ width: 1.69rem; height: 2.28rem; display: flex; margin: 0 auto; ; } i{ font-style: normal; font-size: 0.18rem; margin-top: 0.08rem; color: #666666; display: block; font-size: 0.22rem; color: #666666; } } span{ font-size: 0.30rem; color: #E2001A; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; margin-top:0.16rem; -webkit-box-orient: vertical; } strong{ width: 1.30rem; height: 0.40rem; border: 2px solid #E2001A; display: flex; align-items: center; justify-content: center; border-radius: 0.30rem; margin: 0 auto; font-size: 0.14rem; color: #E2001A; margin-top: 0.24rem; } .userserlect{ display: flex; width: 100%; justify-content: center; align-items: center; padding-bottom: 0.88rem; padding-top: 0.80rem; 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.16rem; border: 1px solid red; color: red; } .unactive { font-size: 0.16rem; color: #444444; border: 1px solid #D7D7D7; } .rc-maa{ ul{ width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 0.77rem; span{ margin-top: 0.08rem; display: block; } img{ width: 1.58rem; height: 1.58rem; display: block; } li{ display: inline-block; cursor: pointer; font-size: 0.16rem; margin-left: 0.40rem; width: 1.58rem; text-align: center; height: 1.58rem; 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: 0.30rem; display: block; padding-top: 0.80rem; 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; } } }