/deep/.van-swipe__indicator { width:.5rem; height:.5rem; } /deep/.van-swipe__indicator--active{ background-color: #E1001A; } .rc-ma{ .ul-zhuan{ li{ background: unset;; img{ border-radius: 50%; } &.active { img{ border: 3px solid #E2001A; } color: #E2001A; } &.unactive { color: #444444; img{ border: 3px solid #D7D7D7; } } } } } .uservideo{ overflow: hidden; video{ height:100%; width:auto; } } @media screen and (max-width:768px){ .ul-dog{ display: none; } .searchBara{ position: fixed; width: 100%; position: fixed; top:66px; background: white; z-index: 9999; overflow-x: auto; white-space: nowrap; overflow-y:hidden; span{ margin-top: 0.08rem; display: block; } img{ width: 4rem; height: 4rem; display: block; } li{ display: inline-block; margin-left: 0.20rem; text-align: center; 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{ span{ font-size: 1rem; display: block; text-align: center; } } .rc-video{ display: none; } .useraimg{ width: 100%; height: auto; object-fit: cover; } .van-swipe-item { color: #fff; height: 26.31rem; width: 100%; font-size: 0.20px; line-height: 1.50rem; text-align: center; position: relative; } .rc-lunbo{ margin-top: 0.46rem; .rc-selection{ display: none; } #xxxFullScreen { background-color: white; margin-top: 0.40rem; #swiper1 { overflow: hidden; } .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: 17.25rem; //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:auto; max-height: 15.68rem; display: block; video{ max-width:100%; max-height:100%; } } } .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: 10rem; height: 10rem; object-fit: cover; display: block; margin-top: 2.5rem; } span{ font-size: 1.125rem; color: #E2001A; display: block; margin-top: 1.25rem; } p{ font-size: .875rem; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; max-width: 60%; text-align: center; } em{ font-style: normal; font-size: 1.25rem; } } } /* 中间的图片 */ .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; text-align: center; } } .selectionswitch{ .rc-conta{ max-height: 1.9rem; min-height: 1.9rem; } width: 100%; margin-top: 0.45rem; } } .active { font-size: 0.14rem; img{ border-width: 1px; } } .unactive { font-size: 0.14rem; img{ border-width: 1px; } } // .usermain{ // display: none; // } } @media screen and (min-width: 769px) { .rc-selection{ display: none; } .sw-center{ display: none; } .useraimg{ width: 100%; // height: 29.31rem; object-fit: cover; } .van-swipe-item { color: #fff; height: 100%; 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; #xxxFullScreen { background-color: white; // margin-top: 100px; #swiper1 { width: 100%; overflow: hidden; margin-top: 2.31rem; h2{ padding-bottom: 5rem; } } .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: 27.5rem; 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; } .ts-standard-btn { margin-top: 1rem; } } .uservideo{ width: 35rem; height: 31.6rem; display: block; } .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 { .rc-margin-y--xl{ margin-bottom: 1.88rem; } // padding:60px 0; .ul-zhuan{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row; span{ margin-top: 1vw; display: block; } img{ width: 10vw; height: 10vw; display: block; } li{ cursor: pointer; font-size: 16px; text-align: center; margin-left:1.3vw; } } } margin-bottom: 0; h2{ margin-top:2.31rem; padding-bottom: 0.62rem; } } .usermain{ .ul-dog{ width: 100%; display: flex; justify-content: center; flex-wrap: wrap; flex-direction: row; span{ margin-top: 2.5rem; display: block; } img{ width: 9.5rem; height: 9.5rem; display: block; } li{ cursor: pointer; font-size: 16px; width: 9.875rem; text-align: center; height: 9.875rem; background: #F6F6F6; border-radius: 50%; margin-left:3rem; } } } .rc-main{ width: 100%; margin-top: 2.5rem; .rc-text--center{ margin-top: 4.8rem; } .van-tabs{ display: none; } .selectionswitch{ .rc-text--center{ margin-top: 4.8rem; } .van-tabs{ display: none; } } .rc-selection{ display: none; width: 100%; ol{ width: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; li{ font-size: 1rem; margin-left: 2.5rem; } } } } .active { font-size: 1rem; img{ border-width: 3px; } } .unactive { font-size: 1rem; img{ border-width: 1px; } } .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{ span{ font-size: 1rem; display: block; text-align: center; } } } @media screen and (min-width:600px) and (max-width:768px) { .ul-zhuan{ display: flex; justify-content: space-evenly; li{ margin-left:0; } } }