测试

yazhaiTest/css/neck.css

@@ -70,7 +70,7 @@ body::-webkit-scrollbar {
 }
 .live-box-ul .live-top-shadow {
   width: 268px;
-  height: 50px;
+  height: 60px;
   position: absolute;
   bottom: 0;
   left: 0;
@@ -82,7 +82,7 @@ body::-webkit-scrollbar {
   z-index: 2;
   width: 73px;
   right: 10px;
-  bottom: 12px;
+  top: 8px;
 }
 .live-box-ul .live-name-box {
   line-height: 24px;
@@ -90,6 +90,18 @@ body::-webkit-scrollbar {
   text-align: center;
   margin-top: 8px;
 }
+.live-box-ul .introduce {
+  color: #fff;
+  width: 260px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-indent: 10px;
+  position: absolute;
+  bottom: 12px;
+  z-index: 10;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
+}
 .video-box-ul,
 .images-box-ul {
   width: 1440px;

yazhaiTest/css/neck.less

@@ -88,7 +88,7 @@
   }
   .live-top-shadow{
     width: 268px;
-    height: 50px;
+    height: 60px;
     position: absolute;
     bottom: 0;
     left: 0;
@@ -100,7 +100,7 @@
     z-index: 2;
     width: 73px;
     right: 10px;
-    bottom: 12px;
+    top: 8px;
   }
   .live-name-box{
     line-height: 24px;
@@ -108,6 +108,19 @@
     text-align: center;
     margin-top: 8px;
   }
+  .introduce{
+    color: #fff;
+    width: 260px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    text-indent: 10px;
+    position: absolute;
+
+    bottom: 12px;
+    z-index: 10;
+    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
+  }
 }
 .video-box-ul,.images-box-ul{
   width: 1440px;

yazhaiTest/pc.html

@@ -592,8 +592,9 @@ $(function(){
                     var list=data.roomList[i]
                     html+='<li>';
                     html+='<a href="room/liveRoom.html?roomId='+list.roomId+'"><div style="background: url(https://zhibocdn.yabolive.net/comm'+list.face.split('?')[0]+'?x-oss-process=image/resize,w_368) no-repeat;background-size: cover;" class="live-top-box">';
+                    html+='<p class="introduce">'+list.introduce+'</p>'
                     html+='<div class="live-cursor-shadow"></div>';
-                    html+='<img class="live-icon" src="images/front/live.png" alt="美女直播">';
+                    html+='<img class="live-icon" src="images/front/live.webp" alt="美女直播">';
                     html+='<div class="live-top-shadow"></div>';
                     html+='<img class="play-icon" src="images/front/play-icon.png">';
                     html+='</div>';