@jx3box/jx3box-common-ui 9.1.4 → 9.1.6

package/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "zhuan"
+    ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-common-ui",
-    "version": "9.1.4",
+    "version": "9.1.6",
     "description": "JX3BOX UI",
     "main": "index.js",
     "scripts": {

package/src/wiki/GamePrice.vue

@@ -1,19 +1,20 @@
 <template>
-    <span class="c-game-price">
-        <span v-if="formartPrice(price,'zhuan')">
-            {{formartPrice(price,'zhuan')}}
+    <span class="c-game-price" :class="{ 'is-align': align }">
+        <span class="u-neg" v-if="price < 0">- </span>
+        <span class="u-zhuan" v-if="formatPrice(price, 'zhuan') || align">
+            <span class="u-value">{{ formatPrice(price, "zhuan") }}</span>
             <img src="../../assets/img/price/zhuan.png" alt="砖" />
         </span>
-        <span v-if="formartPrice(price,'jin')">
-            {{formartPrice(price,'jin')}}
+        <span class="u-jin" v-if="formatPrice(price, 'jin') || align">
+            <span class="u-value">{{ formatPrice(price, "jin") }}</span>
             <img src="../../assets/img/price/jin.png" alt="金" />
         </span>
-        <span v-if="formartPrice(price,'yin')">
-            {{formartPrice(price,'yin')}}
+        <span class="u-yin" v-if="formatPrice(price, 'yin') || align">
+            <span class="u-value">{{ formatPrice(price, "yin") }}</span>
             <img src="../../assets/img/price/yin.png" alt="银" />
         </span>
-        <span v-if="formartPrice(price,'tong')">
-            {{formartPrice(price,'tong')}}
+        <span class="u-tong" v-if="formatPrice(price, 'tong') || align">
+            <span class="u-value">{{ formatPrice(price, "tong") }}</span>
             <img src="../../assets/img/price/tong.png" alt="铜" />
         </span>
     </span>
@@ -22,16 +23,10 @@
 <script>
 export default {
     name: "GamePrice",
-    props: ["price"],
-    components: {},
-    data: function () {
-        return {
-        };
-    },
-    computed: {},
-    watch: {},
+    props: ["price", "align", "align-price"],
     methods: {
-        formartPrice(price = 0, unit) {
+        formatPrice(price = 0, unit) {
+            if (price < 0) price = -price;
             let result = {
                 zhuan: Math.floor(price * 0.01 * 0.01 * 0.0001) || 0,
                 jin: Math.floor((price * 0.01 * 0.01) % 10000) || 0,
@@ -41,17 +36,41 @@ export default {
             return result[unit];
         },
     },
-    filters: {},
-    created: function () {},
-    mounted: function () {},
 };
 </script>
 
 <style lang="less">
-    .c-game-price{
-        img{
-            .y;
+.c-game-price {
+    img {
+        .y;
+    }
+
+    &.is-align {
+        .u-jin {
+            .u-value {
+                display: inline-flex;
+                width: 4ch;
+                justify-content: flex-end;
+                overflow: hidden;
+            }
+            .u-value::before {
+                content: "0000";
+                color: #eee;
+            }
+        }
+        .u-yin,
+        .u-tong {
+            .u-value {
+                display: inline-flex;
+                width: 2ch;
+                justify-content: flex-end;
+                overflow: hidden;
+            }
+            .u-value::before {
+                content: "00";
+                color: #eee;
+            }
         }
     }
-    
-</style>
+}
+</style>