@jx3box/jx3box-ui 2.0.31 → 2.0.33

package/assets/css/interact/mark.less

@@ -0,0 +1,34 @@
+.w-mark{
+    display: inline-block;
+    .clearfix;
+    .r(3px);.clip;
+    width: fit-content;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+    
+    .w-mark-key,.w-mark-value{
+        padding: 2px 5px;
+        .fz(12px, 20px);
+        .h(20px);
+        .fl;.db;
+        color: #fff;
+        box-sizing: content-box;
+    }
+
+    .w-mark-key {
+        svg {
+            .size(20px);
+            .fl;
+            .mr(5px);
+            fill: #fff;
+        }
+        font-style: normal;
+        font-weight: normal;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        background-color: @bg-black;
+    }
+
+    .w-mark-value {
+        background-color: @primary;
+    }
+
+}

package/package.json

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

package/src/App.vue

@@ -30,6 +30,11 @@
                         <UserPop title="添加用户" v-model="userpop"></UserPop>
                     </div>
 
+                    <h1 class="m-title">奇怪的组件</h1>
+                    <div class="m-block">
+                        <Mark label="渊穷砂" BGL="#24292e" BGR="#ffadcb" value="按键启动"></Mark>
+                    </div>
+
                     <h1 class="m-title">切换侧边栏</h1>
                     <div class="m-block">
                         <LeftSideToggle :mobileOnly="false" />
@@ -189,6 +194,7 @@ import PostVersion from "./single/PostVersion.vue";
 import PostCollection from "./single/PostCollection.vue";
 import QRcode from "./interact/QRcode.vue";
 import UploadBanner from "./upload/UploadBanner.vue";
+import Mark from "./interact/Mark.vue"
 
 import GamePrice from "./wiki/GamePrice.vue";
 import WikiComments from "./wiki/WikiComments.vue";
@@ -197,6 +203,7 @@ import WikiPanel from "./wiki/WikiPanel.vue";
 export default {
     name: "App",
     components: {
+        Mark,
         Author,
         // PostHeader,
         PostTopic,

package/src/bread/AdminDrop.vue

@@ -68,6 +68,7 @@ import CommunityAdmin from "./CommunityAdmin.vue";
 import { sendMessage } from "../../service/admin";
 import { refreshQQBotImage } from "../../service/cms";
 import i18nMixin from "../../i18n/mixin";
+import { editLink } from "@jx3box/jx3box-common/js/utils";
 export default {
     name: "AdminDrop",
     mixins: [i18nMixin],

package/src/interact/Mark.vue

@@ -0,0 +1,55 @@
+<template>
+    <span class="w-mark">
+        <i class="w-mark-key" :style="{ 'background-color': BGL }">
+            <img
+                v-if="!$slots.default"
+                svg-inline
+                src="../../assets/img/header/logo.svg"
+            />
+            <slot></slot>
+            {{ mark_key }}
+        </i>
+        <span
+            v-if="mark_value"
+            class="w-mark-value"
+            :style="{ 'background-color': BGR }"
+            >{{ mark_value }}</span
+        >
+    </span>
+</template>
+
+<script>
+export default {
+    name: "Mark",
+    // ["label", "value", "BGL", "BGR"]
+    props: {
+        label: {
+            type: String,
+            default: "JX3BOX",
+        },
+        value: {
+            type: String,
+            default: "Mark",
+        },
+        BGL: {
+            type: String,
+            default: "#409EFF", 
+        },
+        BGR: {
+            type: String,
+            default: "#67C23A", 
+        },
+    },
+    data: function() {
+        return {
+            mark_key: this.label || "JX3BOX",
+            mark_value: this.value,
+        };
+    },
+    mounted: function() {},
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/interact/mark.less";
+</style>