寻宝活动-修改弹幕 抽奖记录图片压缩问题

view/molistar/activity/adventureTreasureHunt/css/index.css

@@ -107,6 +107,8 @@ body {
   padding: 0.04rem 0.2133333333rem 0 0.08rem;
   overflow: hidden;
   margin-bottom: 0.4rem;
+  display: flex;
+  align-items: center;
 }
 .header .danmu #my_container .my_container_in img {
   display: block;
@@ -117,6 +119,20 @@ body {
   padding-bottom: 0.08rem;
   border-radius: 50%;
 }
+.header .danmu #my_container .my_container_in .icon_box {
+  width: 0.5866666667rem;
+  height: 0.5866666667rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.header .danmu #my_container .my_container_in .icon_box img {
+  width: auto !important;
+  height: auto !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+}
 .header .danmu #my_container .my_container_in span {
   display: block;
   float: left;
@@ -804,10 +820,19 @@ body {
   opacity: 0.6;
   margin-top: 0.2133333333rem;
 }
-.popup_record .popup_content .detail_list .detail_box .left img {
+.popup_record .popup_content .detail_list .detail_box .left {
   width: 1.0933333333rem;
   height: 1.0933333333rem;
   border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.popup_record .popup_content .detail_list .detail_box .left img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
 }
 .popup_record .popup_content .close_btn {
   position: absolute;

view/molistar/activity/adventureTreasureHunt/css/index.scss

@@ -128,7 +128,8 @@ body {
                 padding: px2rem(3) px2rem(16) 0 px2rem(6);
                 overflow: hidden;
                 margin-bottom: px2rem(30);
-
+                display: flex;
+                align-items: center;
                 img {
                     display: block;
                     float: left;
@@ -139,6 +140,20 @@ body {
                     // margin-right: px2rem(5);
                     border-radius: 50%;
                 }
+                .icon_box{
+                    width: px2rem(44);
+                    height: px2rem(44);
+                    flex-shrink:0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    img{
+                        width: auto !important;
+                        height: auto !important;
+                        max-width: 100% !important;
+                        max-height: 100% !important;
+                    }
+                }
 
                 span {
                     display: block;
@@ -940,10 +955,18 @@ body {
                 }
 
                 .left {
-                    img {
+                    width: px2rem(82);
-                        width: px2rem(82);
                         height: px2rem(82);
                         border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    img {
+                        
+                        width: auto;
+                        height: auto;
+                        max-width: 100%;
+                        max-height: 100%;
                     }
                 }
             }

view/molistar/activity/adventureTreasureHunt/js/index.js

@@ -77,8 +77,9 @@ const renderDM = (item) => {
                         <img src="${item.user.avatar}" alt="" class="tx">
                         <span>${item.user.nick}  </span>
                         <span>${langReplace(localLang.demoModule.Won)}</span>
+                        <div class="icon_box">
                         <img src="${item.type == 8 ? './images/coins.png' : item.icon}" alt="" class="tx">
-
+            </div>
                     </div>`
             return $div;
         },