feat: 抽卡分析增加物品图标

Author: TomyJan

resources/html/mcGachaRecord/index.css

@@ -128,27 +128,36 @@ body {
 
 .date {
     font-size: 18px;
-    width: 80px;
+    width: 60px;
     text-align: center;
 }
 
+.avatar-name {
+    font-size: 18px;
+    width: 80px;
+    text-align: right;
+    margin-right: 10px;
+}
+
 .card-avatar {
     width: 40px;
     height: 40px;
-    border-radius: 50%;
-    margin-right: 15px;
+    border-radius: 20%;
+    background: #D48E48;
+    z-index: 1;/* 上调层级防止后面的 bar 遮挡 */
 }
 
 .bar-container {
     flex-grow: 1;
     display: flex;
     align-items: center;
-    margin-left: 10px;
+    margin-left: -3px;
 }
 
 .bar {
-    height: 20px;
-    border-radius: 10px;
+    height: 26px;
+    border-radius: 6px;
+    min-width: 80px; /* 设置最小宽度防止文字放不下 */
 }
 
 .bar-label {

resources/html/mcGachaRecord/index.html

@@ -56,10 +56,11 @@
     <div class="cont-box">
       <div class="help-group">
         <div class="date">{{card.time.split(' ')[0].split('-')[1]}}-{{card.time.split(' ')[0].split('-')[2]}}</div>
-        <img src="{{pluResPath}}/img/common/bg/Alisa-Echo_0.jpg" alt="{{card.itemName}}" class="card-avatar">
+        <div class="avatar-name">{{ card.itemId == -1 ? '未出金' : card.itemName }}</div>
+        <img src="{{pluResPath}}/img/common/item/mc/{{card.itemId}}.png" alt="{{card.itemName}}" class="card-avatar">
         <div class="bar-container">
-          <div class="bar" style="width: calc({{card.thisCardCost}}px * 3); background-color: {{card.itemName == '?' ? '#FFD700' : '#4CAF50'}};"></div>
-          <div class="bar-label">{{ card.itemId == -1 ? '未出金' : card.itemName }}{{card.itemCount > 1 ? `x${card.itemCount}` : ""}} 抽数: {{card.thisCardCost}} {{card.isUpItem ? "UP" : ""}}</div>
+          <div class="bar" style="width: calc({{card.thisCardCost * 5}}px); background-color: {{card.thisCardCost >= 60 ? '#9D3333' : card.thisCardCost >= 30 ? '#6A39B7' : '#158B2B'}};"></div>
+          <div class="bar-label">{{card.itemCount > 1 ? `x${card.itemCount}` : ""}} 抽数: {{card.thisCardCost}} {{card.isUpItem ? "UP" : ""}}</div>
         </div>
       </div>
     </div>