.liveList { background: #fff; } .liveList .search { display: flex; align-items: center; padding-top: 21rpx; padding-bottom: 14rpx; background-color: #fff; } .liveList .search .left { font-size: 36rpx; line-height: 36rpx; color: #000; padding-left: 39rpx; padding-right: 39rpx; } .liveList .search .right { width: 516rpx; height: 56rpx; background-color: #eee; box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(82, 82, 82, 0.04); border-radius: 28rpx; display: flex; align-items: center; } .liveList .search .right .icon-sousuo1 { margin-left: 40rpx; margin-right: 20rpx; font-size: 29rpx; color: #ddd; } .liveList .search .right input { flex: 1; font-size: 28rpx; margin-right: 40rpx; } .liveList .liveBanner { padding-top: 17rpx; width: 700rpx; border-radius: 29rpx; margin: 0 auto; padding-bottom: 30rpx; } .living_content { display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 40rpx; padding-left: 20rpx; padding-right: 20rpx; } .liveList .living { width: 340rpx; padding-bottom: 56rpx; position: relative; background-color: #fff; border-radius: 25rpx; margin-bottom: 13rpx; } .liveList .living .bg { width: 340rpx; min-height: 230rpx; background-color: #fff; border-radius: 25rpx; position: relative; } .liveList .living .bg image { border-radius: 25rpx; width: 100%; /* height: 100%; */ } .liveList .living .bg .content { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .liveList .living .bg .content .live_top { display: flex; justify-content: space-between; padding-top: 19rpx; padding-left: 10rpx; } .liveList .living .bg .content .live_top .live_top_left { min-width: 206rpx; height: 39rpx; background-color: rgba(0, 0, 0, 0.1); border-radius: 7rpx; display: flex; align-items: center; } .liveList .living .bg .content .live_top .live_top_left .left { width: 90rpx; height: 39rpx; background-color: #ff2c29; border-radius: 7rpx; text-align: center; color: #fff; } .liveList .living .bg .content .live_top .live_top_left .right { font-size: 22rpx; height: 39rpx; line-height: 39rpx; color: #fff; padding-left: 8rpx; padding-right: 8rpx; max-width: 180rpx; overflow: hidden; } .liveList .living .bg .content .live_top .seeding_left { /* min-width: 206rpx; */ height: 39rpx; background-color: rgba(0, 0, 0, 0.1); border-radius: 7rpx; display: flex; align-items: center; } .liveList .living .bg .content .live_top .seeding_left .left { width: 76rpx; height: 39rpx; background-color: #999; border-radius: 7rpx; text-align: center; color: #fff; } .liveList .living .bg .content .live_top .seeding_left .right { font-size: 22rpx; height: 39rpx; line-height: 39rpx; color: #fff; padding-left: 8rpx; padding-right: 8rpx; max-width: 180rpx; overflow: hidden; } .liveList .living .bg .content .live_top .advance_left .left { width: 76rpx; height: 39rpx; background-color: #ff2c29; border-radius: 7rpx; text-align: center; color: #fff; } .liveList .living .bg .content .live_top .live_top_right { width: 59rpx; position: relative; margin-right: 7rpx; } .liveList .living .bg .content .live_top .live_top_right .little_icon { width: 50rpx; height: 40rpx; display: flex; align-items: center; justify-content: center; } .liveList .living .bg .content .live_top .live_top_right .little_icon .icon-zb_goods { color: #ffa303; font-size: 50rpx; } .liveList .living .bg .content .live_top .live_top_right .num { min-width: 50rpx; padding-left: 4rpx; padding-right: 4rpx; height: 22rpx; background-color: #fff; border-radius: 9rpx; position: absolute; right: -2rpx; top: 6rpx; font-size: 20rpx; line-height: 22rpx; color: #f00; text-align: center; overflow: hidden; } .liveList .living .bg .live_bottom { position: absolute; height: 72rpx; bottom: 0; left: 0; right: 0; padding-left: 12rpx; padding-right: 12rpx; font-size: 28rpx; line-height: 36rpx; color: #fff; /* text-overflow: -o-ellipsis-lastline; */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 20rpx; } .liveList .living .bootom { position: absolute; display: flex; bottom: 10rpx; left: 0; right: 0; } .liveList .living .bootom .left { width: 56rpx; height: 56rpx; background-color: #fff; border: solid 4rpx #fff; border-radius: 50%; margin-right: 9rpx; margin-left: 6rpx; } .liveList .living .bootom .left image { width: 100%; height: 100%; border-radius: 50%; } .liveList .living .bootom .right { font-size: 24rpx; line-height: 36rpx; color: #000; padding-top: 20rpx; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .loading { width: 100%; height: 400rpx; display: flex; align-items: center; justify-content: center; } .loading .content { width: 160rpx; height: 160rpx; } .loading .content image { width: 100%; height: 100%; } .nav_list .ul { /* margin-top: 28rpx; */ padding: 0; display: flex; flex-wrap: wrap; } .nav_list .ul .li { width: 20%; margin-bottom: 20rpx; } .nav_list .ul .li .image { height: 11vw; overflow: hidden; } .nav_list .ul .li .image { display: flex; justify-content: center; } .nav_list .ul .li image { width: 50%; vertical-align: middle; height: 90%; border-radius: 50%; } .nav_list .ul .li .p { margin: 0; font-size: 24rpx; line-height: 36rpx; max-height: 72rpx; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; padding: 0 16rpx; display: block; text-align: center; } .sw_list_6 { height: 160rpx; } .second-list-style { display: flex; flex-direction: column; padding: 28rpx; background: #f2f2f2; } .second-list-style .second-li { background: #fff; border-radius: 28rpx; overflow: hidden; margin-bottom: 24rpx; padding: 20rpx; display: flex; } .second-list-style .second-li .second-li-left { width: 268rpx; height: 230rpx; border-radius: 15rpx; overflow: hidden; margin-right: 16rpx; position: relative; } .second-list-style .second-li .second-li-left .cover { display: block; width: 100%; height: 100%; } .second-list-style .second-li .second-li-left .title { display: flex; overflow: hidden; position: absolute; bottom: 16rpx; left: 0; width: 100%; padding: 0 16rpx; } .second-list-style .second-li .second-li-left .title image { width: 40rpx; height: 40rpx; background-color: #fff; border-radius: 50%; overflow: hidden; flex-shrink: 0; margin-right: 16rpx; } .second-list-style .second-li .second-li-left .title .name { flex: 1; text-align: left; overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ white-space: nowrap; /* 规定段落中的文本不进行换行 */ } .second-list-style .second-li .second-li-left .top { position: absolute; top: 16rpx; left: 8rpx; background-color: rgba(0, 0, 0, 0.4); border-radius: 4.8rpx; color: #fff; padding: 0 4.8rpx 0 0; font-size: 12px; height: 40rpx; line-height: 40rpx; } .second-list-style .second-li .second-li-left .top .red { background-color: #f10303; border-radius: 4.8rpx; padding: 0 8rpx; margin-right: 6.4rpx; display: inline-block; height: 100%; } .second-list-style .second-li .second-li-left .top .van-count-down { display: inline-block; color: #fff; font-size: 14px; } .second-list-style .second-li .second-li-left .top .huifan_color { background-color: #999; } .second-list-style .second-li .second-li-right { display: flex; flex-direction: column; flex: 1; } .second-list-style .second-li .second-li-right .live-title { text-align: left; line-height: 36rpx; height: 76rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .second-list-style .second-li .second-li-right .live-goods { display: flex; } .second-list-style .second-li .second-li-right .live-goods .goods-item { position: relative; overflow: hidden; border-radius: 10rpx; width: 150rpx; height: 150rpx; background-color: #a0a0a0; margin-left: 16rpx; } .second-list-style .second-li .second-li-right .live-goods .goods-item image { width: 100%; height: 100%; } .second-list-style .second-li .second-li-right .live-goods .goods-item .goods-price { position: absolute; width: 100%; left: 0; bottom: 0; max-height: 64rpx; line-height: 22rpx; padding: 4px 0; font-size: 10px; color: #fff; background-color: rgba(0, 0, 0, 0.5); } .second-list-style .second-li .second-li-right .live-goods .goods-item:nth-child(1) { margin: 0; }