@jx3box/jx3box-ui 2.1.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.1.0",
+    "version": "2.1.1",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {

package/src/wiki/GamePrice.vue

@@ -1,9 +1,13 @@
 <template>
-    <span class="c-game-price" :class="{ 'is-align': align }">
+    <span class="c-game-price" :class="alignClass">
         <span class="u-neg" v-if="numericPrice < 0">- </span>
-        <span v-for="part in priceParts" :key="part.unit" :class="`u-${part.unit}`">
-            <span class="u-value">{{ part.value }}</span>
-            <img :src="part.icon" :alt="part.alt" />
+        <span class="u-price">
+            <template v-for="part in priceParts" :key="part.unit">
+                <span class="u-part" :class="`u-${part.unit}`">
+                    <span class="u-price-value">{{ part.value }}</span>
+                    <img :src="part.icon" :alt="part.alt" />
+                </span>
+            </template>
         </span>
     </span>
 </template>
@@ -29,7 +33,7 @@ export default {
             default: 0,
         },
         align: {
-            type: Boolean,
+            type: [Boolean, String],
             default: false,
         },
     },
@@ -38,6 +42,11 @@ export default {
             const value = Number(this.price);
             return Number.isFinite(value) ? Math.trunc(value) : 0;
         },
+        alignClass() {
+            if (this.align === true) return "is-align";
+            if (typeof this.align === "string" && this.align) return `is-${this.align}`;
+            return "";
+        },
         priceParts() {
             const value = Math.abs(this.numericPrice);
             let remainder = value;
@@ -51,58 +60,75 @@ export default {
                 };
             });
 
-            const visibleParts = parts.filter((item) => item.value > 0);
+            const zhuanIndex = parts.findIndex((item) => item.unit === "zhuan");
+            const jinIndex = parts.findIndex((item) => item.unit === "jin");
 
-            if (!visibleParts.length) {
-                const tong = parts.find((item) => item.unit === "tong");
-                return tong ? [{ ...tong, value: 0 }] : [];
+            if (parts[zhuanIndex] && parts[zhuanIndex].value > 0) {
+                return parts.slice(zhuanIndex);
             }
 
-            return visibleParts;
+            return parts.slice(jinIndex);
         },
     },
 };
 </script>
 
 <style lang="less">
-/* src/wiki/GamePrice.vue */
 .c-game-price {
     display: inline-flex;
     align-items: center;
-    flex-wrap: nowrap;
-    white-space: nowrap;
+    color: #333;
+    font-weight: 500;
 
-    .u-neg,
-    .u-zhuan,
-    .u-jin,
-    .u-yin,
-    .u-tong {
+    .u-price {
         display: inline-flex;
         align-items: center;
-        flex-shrink: 0;
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+
+    .u-neg {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .u-part {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        white-space: nowrap;
     }
 
     img {
-        display: inline-block;
-        .y;
+        width: 18px;
+        height: 18px;
+        object-fit: contain;
+        vertical-align: middle;
+    }
+
+    .u-price-value {
+        .fz(12px,18px);
     }
 
     &.is-align {
         .u-jin {
-            .u-value {
+            .u-price-value {
                 display: inline-block;
-                width: 4ch;
                 text-align: right;
             }
         }
         .u-yin,
         .u-tong {
-            .u-value {
+            .u-price-value {
                 display: inline-block;
-                width: 2ch;
                 text-align: right;
             }
         }
     }
+
+    &.is-right {
+        justify-content: flex-end;
+        width: 100%;
+    }
 }
 </style>