测试

mTest/room/css/liveRoom.css

@@ -758,11 +758,46 @@
   bottom: 3rem;
 }
 .room-bg {
-  width: 100vw;
+  width: 10rem;
   position: fixed;
   top: 0rem;
   height: 99vh;
-  overflow: hidden;
+}
+.top-bg-box {
+  position: absolute;
+  top: -100vh;
+  width: 10rem;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.2);
+}
+.top-bg-box img {
+  position: absolute;
+  width: 20rem;
+  height: 20rem;
+  z-index: -1;
+  left: -5rem;
+  top: 50%;
+  margin-top: -10rem;
+  opacity: 0.5;
+  filter: blur(0.4rem);
+}
+.bottom-bg-box {
+  position: absolute;
+  width: 10rem;
+  height: 100vh;
+  top: 100vh;
+  background: rgba(0, 0, 0, 0.2);
+}
+.bottom-bg-box img {
+  position: absolute;
+  width: 20rem;
+  height: 20rem;
+  z-index: -1;
+  left: -5rem;
+  top: 50%;
+  margin-top: -10rem;
+  opacity: 0.5;
+  filter: blur(0.4rem);
 }
 .layer-ios {
   display: none;

mTest/room/css/liveRoom.less

@@ -783,13 +783,49 @@
     bottom: 3rem;
 }
 .room-bg{
-    width: 100vw;
+    width: 10rem;
     position: fixed;
     top: 0rem;
     height: 99vh;
-    overflow: hidden;
+    // overflow: hidden;
     // transition: 0.35s all;
 }
+.top-bg-box{
+    position: absolute;
+    top: -100vh;
+    width: 10rem;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.2);
+    img{
+        position: absolute;
+        width: 20rem;
+        height: 20rem;
+        z-index: -1;
+        left: -5rem;
+        top: 50%;
+        margin-top: -10rem;
+        opacity: 0.5;
+        filter: blur(0.4rem);
+    }
+}
+.bottom-bg-box{
+    position: absolute;
+    width: 10rem;
+    height: 100vh;
+    top: 100vh;
+    background: rgba(0, 0, 0, 0.2);
+    img{
+        position: absolute;
+        width: 20rem;
+        height: 20rem;
+        z-index: -1;
+        left: -5rem;
+        top: 50%;
+        margin-top: -10rem;
+        opacity: 0.5;
+        filter: blur(0.4rem);
+    }
+}
 .layer-ios{
     display: none;
     width: 7.3rem;

mTest/room/liveRoom.html

@@ -1174,26 +1174,33 @@ $(function(){
                     }, 500);
                     return;
                 }
-        
+                var bottomNum
+                var topNum
                 for(var i=0;i<data.roomList.length;i++){
                     var list=data.roomList[i] 
                     // list.roomId
                     if(list.roomId==sessionStorage.roomId){
                         if(i+1==data.roomList.length){
                             BottomRoomId=data.roomList[0].roomId
+                            bottomNum=0
                         }else{
                             BottomRoomId=data.roomList[i+1].roomId
+                            bottomNum=(i+1)
                         }
 
                         if(i==0){
                             topRoomId=data.roomList[data.roomList.length-1].roomId
+                            topNum=data.roomList.length-1
                         }else{
                             topRoomId=data.roomList[i-1].roomId
+                            topNum=(i-1)
                         }
 
                         if(data.roomList.length==1){
                             topRoomId=list.roomId
                             BottomRoomId=list.roomId
+                            bottomNum=0
+                            topNum=0
                         }
                         
                     }
@@ -1202,8 +1209,11 @@ $(function(){
                     topRoomId=data.roomList[0].roomId
                     BottomRoomId=data.roomList[1].roomId
                 }
-
-                
+                var html=[];
+                html+='<div class="top-bg-box"> <img src="https://zhibocdn.yabolive.net/comm'+data.roomList[topNum].face+'?x-oss-process=image/resize,w_350"> </div>';
+                html+='<div class="bottom-bg-box"> <img src="https://zhibocdn.yabolive.net/comm'+data.roomList[bottomNum].face+'?x-oss-process=image/resize,w_350"> </div>';
+                $(".room-bg").append(html)
+  
             }
         })
     }