@realsee/dnalogel 3.19.0-dev.2 → 3.19.1

package/libs/PanoTagPlugin/controller/TagRender.js

@@ -1,16 +1,16 @@
-var k = Object.defineProperty;
+var A = Object.defineProperty;
 var R = Object.getOwnPropertySymbols;
-var V = Object.prototype.hasOwnProperty, I = Object.prototype.propertyIsEnumerable;
-var C = (c, l, t) => l in c ? k(c, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[l] = t, j = (c, l) => {
-  for (var t in l || (l = {}))
-    V.call(l, t) && C(c, t, l[t]);
+var k = Object.prototype.hasOwnProperty, I = Object.prototype.propertyIsEnumerable;
+var C = (d, m, t) => m in d ? A(d, m, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[m] = t, j = (d, m) => {
+  for (var t in m || (m = {}))
+    k.call(m, t) && C(d, t, m[t]);
   if (R)
-    for (var t of R(l))
-      I.call(l, t) && C(c, t, l[t]);
-  return c;
+    for (var t of R(m))
+      I.call(m, t) && C(d, t, m[t]);
+  return d;
 };
-var h = (c, l, t) => (C(c, typeof l != "symbol" ? l + "" : l, t), t);
-var S = (c, l, t) => new Promise((e, o) => {
+var u = (d, m, t) => (C(d, typeof m != "symbol" ? m + "" : m, t), t);
+var S = (d, m, t) => new Promise((e, o) => {
   var i = (s) => {
     try {
       a(t.next(s));
@@ -24,16 +24,16 @@ var S = (c, l, t) => new Promise((e, o) => {
       o(n);
     }
   }, a = (s) => s.done ? e(s.value) : Promise.resolve(s.value).then(i, r);
-  a((t = t.apply(c, l)).next());
+  a((t = t.apply(d, m)).next());
 });
-import { TagComputer as E } from "./TagComputer.js";
-import { Group as y, Quaternion as O, Vector3 as b, Matrix4 as v } from "three";
-import x from "../Components/TagContainer.js";
-import G from "../Components/Tag/index.js";
-import { CSS3DRenderPlugin as F } from "../../CSS3DRenderPlugin/index.js";
-import { loadGLTF as _ } from "../../shared-utils/three/GLTFLoader.js";
-import { isMediaModelTag as D, isStickModelTag as L } from "../utils/tag/tagCheck.js";
-import { VideoPlane as w, ImagePlane as A } from "../utils/model/mediaPlane.js";
+import { TagComputer as V } from "./TagComputer.js";
+import { Group as y, Quaternion as E, Vector3 as b, Matrix4 as v } from "three";
+import O from "../Components/TagContainer.js";
+import x from "../Components/Tag/index.js";
+import { CSS3DRenderPlugin as G } from "../../CSS3DRenderPlugin/index.js";
+import { loadGLTF as F } from "../../shared-utils/three/GLTFLoader.js";
+import { isMediaModelTag as D, isStickModelTag as _ } from "../utils/tag/tagCheck.js";
+import { VideoPlane as L, ImagePlane as w } from "../utils/model/mediaPlane.js";
 import { centerPoint as q } from "../../shared-utils/three/centerPoint.js";
 import { arrayPositionToVector3 as g } from "../../shared-utils/positionToVector3.js";
 import "../utils/tagPosition.js";
@@ -162,38 +162,38 @@ import "../../CSS3DRenderPlugin/Controller.js";
 import "../../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
 import "@realsee/five/gltf-loader";
 const W = /* @__PURE__ */ new Map(), $ = /* @__PURE__ */ new Map();
-class Ti extends E {
+class Ti extends V {
   constructor(t) {
     super(t);
-    h(this, "rendererMap", /* @__PURE__ */ new Map());
-    h(this, "contentTypeMap", /* @__PURE__ */ new Map());
-    h(this, "group", new y());
-    h(this, "imagePlaneGroup", new y());
-    h(this, "gltfObjectGroup", new y());
+    u(this, "rendererMap", /* @__PURE__ */ new Map());
+    u(this, "contentTypeMap", /* @__PURE__ */ new Map());
+    u(this, "group", new y());
+    u(this, "imagePlaneGroup", new y());
+    u(this, "gltfObjectGroup", new y());
     /** 维护一个可用模型表，用于快速删除不应该在场景中的模型 */
-    h(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
+    u(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
     /** 临时状态 */
-    h(this, "temporaryState", { visible: !0 });
+    u(this, "temporaryState", { visible: !0 });
     /** 点标签 */
-    h(this, "TagContainerSvelte");
+    u(this, "TagContainerSvelte");
     /** 加载外部模型 */
-    h(this, "loadModel", (t) => S(this, null, function* () {
+    u(this, "loadModel", (t) => S(this, null, function* () {
       var a;
       const e = t.data.modelUrl;
       if (!e)
         return;
       t.loading = !0;
-      const o = _(e).then((s) => {
-        var m;
+      const o = F(e).then((s) => {
+        var p;
         const n = Object.assign(s.scene, {
           customID: t.id,
           isTagModel: !0,
           removeEventListener: this.getTagConfig(t).clickable === !1 ? () => {
-          } : this.addObjectClickHandler(t, s.scene, (u) => {
-            this.hooks.emit("click", { target: "TagModel", tag: t, event: u });
+          } : this.addObjectClickHandler(t, s.scene, (h) => {
+            this.hooks.emit("click", { target: "TagModel", tag: t, event: h });
           })
         });
-        return n.visible = this.getCurrentVisibleState(t), new v().fromArray(t.matrix).decompose(n.position, n.quaternion, n.scale), n.updateWorldMatrix(!0, !0), n.visible = this.getVisible(t), (m = this.getTagConfig(t).modelConfig) != null && m.autoLookAtEnabled && n.lookAt(this.five.camera.position.clone().setY(n.position.y)), n;
+        return n.visible = this.getCurrentVisibleState(t), new v().fromArray(t.matrix).decompose(n.position, n.quaternion, n.scale), n.updateWorldMatrix(!0, !0), n.visible = this.getVisible(t), (p = this.getTagConfig(t).modelConfig) != null && p.autoLookAtEnabled && n.lookAt(this.five.camera.position.clone().setY(n.position.y)), n;
       });
       t.model = { promise: o };
       const i = yield o;
@@ -204,7 +204,7 @@ class Ti extends E {
       if (r && (this.gltfObjectGroup.remove(r), r.removeEventListener()), this.updateRender3DDomTag(), D(t)) {
         if (this.getRenderType(t) === "Mesh" && !t.mediaPlane) {
           const s = t.data.mediaPosition.map(g);
-          t.mediaPlane = new A(t.data.mediaData[0].url, t.data.mediaPosition.map(g), {
+          t.mediaPlane = new w(t.data.mediaData[0].url, t.data.mediaPosition.map(g), {
             objectFit: t.data.objectFit
           });
           const n = new b().addVectors(s[0], s[2]).divideScalar(2);
@@ -249,30 +249,29 @@ class Ti extends E {
       var o, i;
       return ((i = (o = e.data.mediaData) == null ? void 0 : o[0]) == null ? void 0 : i.type) === "Video";
     }).forEach((e) => {
-      var m, u, P;
+      var l;
       const o = e.data.mediaData[0];
       if (!o)
         return;
       const { url: i } = o;
       if (!i)
         return;
-      e.mediaPlane && !((u = (m = e.state) == null ? void 0 : m.visible) == null || u) && e.mediaPlane instanceof w && e.mediaPlane.pause();
-      const r = e.position.map(g), a = this.getCurrentVisibleState(e), s = (() => !!(e.mediaPlane && !a))(), n = (() => !!(!e.mediaPlane && a))(), p = (() => !!(e.mediaPlane && e.mediaPlane.src !== i))();
-      if ((s || p) && e.mediaPlane && (this.imagePlaneGroup.remove(e.mediaPlane), e.mediaPlane.dispose(), e.mediaPlane.removeFromParent(), e.mediaPlane = void 0), n || p) {
-        const d = new w(i, r, {
+      const r = this.getCurrentVisibleState(e), a = (() => !!(e.mediaPlane && !r))(), s = (() => !!(!e.mediaPlane && r))(), n = (() => !!(e.mediaPlane && e.mediaPlane.src !== i))();
+      if ((a || n) && e.mediaPlane && (this.imagePlaneGroup.remove(e.mediaPlane), e.mediaPlane.dispose(), e.mediaPlane.removeFromParent(), e.mediaPlane = void 0), s || n) {
+        const p = e.position.map(g), h = new L(i, p, {
           videoCoverSrc: o.videoCoverUrl,
           playButton: e.data.playIcon,
-          paused: !((P = e.data.autoplayConfig) != null && P.autoplayVideo),
+          paused: !((l = e.data.autoplayConfig) != null && l.autoplayVideo),
           objectFit: e.data.objectFit,
           videoTextureMap: W,
           ImageTextureMap: $,
           domEvents: this.domEvents
         });
-        d.onVideoReady = (f) => {
-          f.addEventListener("play", () => this.mediaStore.set({ currentMediaElement: d.videoInstance }));
+        h.onVideoReady = (c) => {
+          c.addEventListener("play", () => this.mediaStore.set({ currentMediaElement: h.videoInstance }));
         };
-        const T = (f) => (this.five.on("renderFrame", f), () => this.five.off("renderFrame", f));
-        d.initialRenderHooks(T), e.mediaPlane = d, this.imagePlaneGroup.add(e.mediaPlane);
+        const f = (c) => (this.five.on("renderFrame", c), () => this.five.off("renderFrame", c));
+        h.initialRenderHooks(f), e.mediaPlane = h, this.imagePlaneGroup.add(e.mediaPlane);
       }
     });
   }
@@ -288,8 +287,8 @@ class Ti extends E {
       if (!o)
         return;
       const i = e.position.map(g), r = this.getCurrentVisibleState(e), a = (() => !!(e.mediaPlane && !r))(), s = (() => !!(!e.mediaPlane && r))(), n = (() => !!(e.mediaPlane && e.mediaPlane.src !== o))();
-      (a || n) && e.mediaPlane && (this.imagePlaneGroup.remove(e.mediaPlane), e.mediaPlane.dispose(), e.mediaPlane.removeFromParent(), e.mediaPlane = void 0), (s || n) && (e.mediaPlane = new A(o, i, { objectFit: e.data.objectFit }), this.getTagConfig(e).clickable !== !1 && this.domEvents.addAutoBindEventListener(e.mediaPlane, "click", (p) => {
-        this.hooks.emit("click", { tag: e, target: "TagContent", event: p.origDomEvent });
+      (a || n) && e.mediaPlane && (this.imagePlaneGroup.remove(e.mediaPlane), e.mediaPlane.dispose(), e.mediaPlane.removeFromParent(), e.mediaPlane = void 0), (s || n) && (e.mediaPlane = new w(o, i, { objectFit: e.data.objectFit }), this.getTagConfig(e).clickable !== !1 && this.domEvents.addAutoBindEventListener(e.mediaPlane, "click", (l) => {
+        this.hooks.emit("click", { tag: e, target: "TagContent", event: l.origDomEvent });
       }), this.imagePlaneGroup.add(e.mediaPlane));
     });
   }
@@ -300,16 +299,16 @@ class Ti extends E {
     this.filterCSS3DTag.forEach((e) => {
       var o, i, r;
       if (e.tag3DContentSvelte) {
-        const { svelteApp: a, css3DInstance: s, initialNormal: n, currentNormal: p } = e.tag3DContentSvelte;
-        if (a.$set({ tag: e, hooks: this.hooks, state: this.state, temporaryState: this.temporaryState }), !n.equals(p)) {
-          const m = new O().setFromUnitVectors(n, p);
-          s.css3DObject.setRotationFromQuaternion(m);
+        const { svelteApp: a, css3DInstance: s, initialNormal: n, currentNormal: l } = e.tag3DContentSvelte;
+        if (a.$set({ tag: e, hooks: this.hooks, state: this.state, temporaryState: this.temporaryState }), !n.equals(l)) {
+          const p = new E().setFromUnitVectors(n, l);
+          s.css3DObject.setRotationFromQuaternion(p);
         }
         return;
       } else {
         if (D(e) && !((o = e.model) != null && o.object) || ((i = e.state) == null ? void 0 : i.visible) === !1 || !this.state.visible || !this.state.enabled)
           return;
-        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = F(this.five)), e.stickType === "3DPoint" && !e.normal)
+        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = G(this.five)), e.stickType === "3DPoint" && !e.normal)
           return console.error("updateRenderPlaneTag: 三维点标签缺少法向量！");
         const a = this.getPositions(e);
         if (!a)
@@ -317,26 +316,26 @@ class Ti extends E {
         const s = this.getTagNormal(e);
         if (!s)
           return;
-        const n = this.getTagConfig(e), p = j({ wrapperStyle: { zIndex: this.calculateTagZIndex(e).toString() } }, n.tag3DConfig);
-        if (this.getRenderType(e) === "BehindDom" || p.mode === "behind") {
-          p.mode = "behind", p.container = document.createElement("div");
-          const P = "black";
-          p.container.style.backgroundColor = P, p.container.style.border = `3px solid ${P}`, this.css3DRenderPlugin.hooks.on("render", () => {
-            var d;
-            if (m.css3DObject.opacityMesh && n.clickable !== !1) {
-              const T = this.addObjectClickHandler(e, m.css3DObject.opacityMesh, (f) => {
-                this.hooks.emit("click", { event: f, target: "TagContent", tag: e });
+        const n = this.getTagConfig(e), l = j({ wrapperStyle: { zIndex: this.calculateTagZIndex(e).toString() } }, n.tag3DConfig);
+        if (this.getRenderType(e) === "BehindDom" || l.mode === "behind") {
+          l.mode = "behind", l.container = document.createElement("div");
+          const f = "black";
+          l.container.style.backgroundColor = f, l.container.style.border = `3px solid ${f}`, this.css3DRenderPlugin.hooks.on("render", () => {
+            var c;
+            if (p.css3DObject.opacityMesh && n.clickable !== !1) {
+              const P = this.addObjectClickHandler(e, p.css3DObject.opacityMesh, (T) => {
+                this.hooks.emit("click", { event: T, target: "TagContent", tag: e });
               });
-              (d = this.store.css3DRenderDisposer.get(e.id)) == null || d.push(T);
+              (c = this.store.css3DRenderDisposer.get(e.id)) == null || c.push(P);
             }
           });
         }
-        const m = this.css3DRenderPlugin.create3DDomContainer(a, p);
-        if (!m)
+        const p = this.css3DRenderPlugin.create3DDomContainer(a, l);
+        if (!p)
           return;
-        this.store.css3DRenderDisposer.set(e.id, [m.dispose]);
-        const u = new G({
-          target: m.container,
+        this.store.css3DRenderDisposer.set(e.id, [p.dispose]);
+        const h = new x({
+          target: p.container,
           props: {
             tag: e,
             hooks: this.hooks,
@@ -347,13 +346,13 @@ class Ti extends E {
           }
         });
         e.tag3DContentSvelte = {
-          svelteApp: u,
-          domContainer: m,
-          css3DInstance: m,
+          svelteApp: h,
+          domContainer: p,
+          css3DInstance: p,
           initialNormal: s,
           currentNormal: s,
           dispose: () => {
-            u.$destroy(), m.dispose();
+            h.$destroy(), p.dispose();
           }
         }, D(e) && ((r = e.model) != null && r.object) && this.updateTagCss3DObjectMatrix(e, e.model.object);
       }
@@ -387,23 +386,23 @@ class Ti extends E {
    * @param model 模型
    */
   updateTagCss3DObjectMatrix(t, e) {
-    var T, f, M;
-    const o = (f = (T = this.getTagConfig(t).tag3DConfig) == null ? void 0 : T.ratio) != null ? f : 216e-5, i = (M = t.tag3DContentSvelte) == null ? void 0 : M.css3DInstance.css3DObject;
+    var P, T, M;
+    const o = (T = (P = this.getTagConfig(t).tag3DConfig) == null ? void 0 : P.ratio) != null ? T : 216e-5, i = (M = t.tag3DContentSvelte) == null ? void 0 : M.css3DInstance.css3DObject;
     if (!i)
       return;
     const r = D(t) ? t.data.mediaPosition : t.position;
     if (!r || r.length !== 4 || !Array.isArray(r[0]) || !Array.isArray(r[2]))
       return;
     e.updateWorldMatrix(!1, !1);
-    const a = e.matrixWorld, s = new b().fromArray(r[0]), n = new b().fromArray(r[2]), p = q(s, n).add(new b(0, 0, 5e-4)), m = new v().setPosition(p), u = new v().makeScale(o, o, o), P = new v().multiply(a).multiply(m).multiply(u);
-    P.decompose(i.position, i.quaternion, i.scale);
-    const d = i.opacityMesh;
-    d && P.decompose(d.position, d.quaternion, d.scale);
+    const a = e.matrixWorld, s = new b().fromArray(r[0]), n = new b().fromArray(r[2]), l = q(s, n).add(new b(0, 0, 5e-4)), p = new v().setPosition(l), h = new v().makeScale(o, o, o), f = new v().multiply(a).multiply(p).multiply(h);
+    f.decompose(i.position, i.quaternion, i.scale);
+    const c = i.opacityMesh;
+    c && f.decompose(c.position, c.quaternion, c.scale);
   }
   /** 添加模型标签 */
   addMediaModelTag(t) {
     return S(this, null, function* () {
-      const e = t.filter(L).map((o) => this.loadModel(o));
+      const e = t.filter(_).map((o) => this.loadModel(o));
       yield Promise.all(e), this.setVisible(), this.updateRenderAllTags();
     });
   }
@@ -480,7 +479,7 @@ class Ti extends E {
       const r = (o = this.five.getElement()) == null ? void 0 : o.parentElement;
       if (!r)
         return console.error("updateRenderPlaneTag: tag2DContainer not found");
-      this.TagContainerSvelte = new x({
+      this.TagContainerSvelte = new O({
         target: r,
         props: {
           hooks: this.hooks,

package/libs/PanoVideoPlugin/Controller.d.ts

@@ -24,13 +24,13 @@ export declare class PanoVideoPluginController extends BasePlugin.Controller<Plu
      */
     lookAtVideoItemByRenderID(id: string): void;
     /**
-     * 将视频开启声音。
+     * 取消静音。
      *
-     * 大部分浏览器都会禁止自动播放声音，需要用户交互后才能开启声音。
+     * 大部分浏览器需要用户交互后才能开启视频声音。
      *
-     * 如果需要自动播放，可以在用户交互事件中调用本方法。
+     * 如果需要取消静音，建议在用户交互事件中调用本方法。
      *
-     * example:
+     * 例如:
      *
      * ```jsx
      * onClick={() => {

package/libs/PanoVideoPlugin/Controller.js

@@ -110,13 +110,13 @@ class T extends _ {
     e.lookAtVideo();
   }
   /**
-   * 将视频开启声音。
+   * 取消静音。
    *
-   * 大部分浏览器都会禁止自动播放声音，需要用户交互后才能开启声音。
+   * 大部分浏览器需要用户交互后才能开启视频声音。
    *
-   * 如果需要自动播放，可以在用户交互事件中调用本方法。
+   * 如果需要取消静音，建议在用户交互事件中调用本方法。
    *
-   * example:
+   * 例如:
    *
    * ```jsx
    * onClick={() => {

package/libs/PanoVideoPlugin/VideoMeshController.d.ts

@@ -47,11 +47,11 @@ export declare class VideoMeshController {
     /** 初始化视频、模型以及相关事件监听。 */
     constructor(five: Five, params: VideoMeshParams);
     /**
-     * 开启声音
+     * 取消静音
      *
-     * @warning 由于大部分浏览器的限制，声音必须在用户交互事件中开启，否则会被浏览器禁用视频播放。
+     * @warning 需要注意：由于大部分浏览器的限制，视频的声音必须在用户有交互事件后才能开启，否则会被浏览器禁用视频播放。
      */
-    unmute(): void;
+    unmute: () => void;
     /** 彻底销毁，不响应之后的任何事件 */
     dispose(): void;
     enable(): void;

package/libs/PanoVideoPlugin/VideoMeshController.js

@@ -53,6 +53,14 @@ class ie {
      * @remark 由于 render video 依赖 Five render，因此需要自动 render five。
      */
     t(this, "renderFiveDisposer");
+    /**
+     * 取消静音
+     *
+     * @warning 需要注意：由于大部分浏览器的限制，视频的声音必须在用户有交互事件后才能开启，否则会被浏览器禁用视频播放。
+     */
+    t(this, "unmute", () => {
+      this.video.muted = !1;
+    });
     /** 把 uv 值转换成位置 */
     t(this, "uv2Position", (e, i) => {
       var c;
@@ -171,7 +179,7 @@ class ie {
     var r, h;
     this.five = e, this.panoIndex = i.panoIndex, this._id = i.renderID, this.url = i.url, this.origin = i.origin.slice(), this._enabled = (h = (r = i.initialState) == null ? void 0 : r.enabled) != null ? h : !0;
     const n = document.createElement("video");
-    n.crossOrigin = "anonymous", n.autoplay = !1, n.muted = !0, n.loop = !0, n.playsInline = !0, this.video = n, this.unmute = this.unmute.bind(this);
+    n.crossOrigin = "anonymous", n.autoplay = !1, n.muted = !0, n.loop = !0, n.playsInline = !0, this.video = n;
     const o = new F(this.video);
     o.minFilter = m, o.magFilter = m;
     const a = new y({
@@ -203,14 +211,6 @@ class ie {
   get enabled() {
     return this._enabled;
   }
-  /**
-   * 开启声音
-   *
-   * @warning 由于大部分浏览器的限制，声音必须在用户交互事件中开启，否则会被浏览器禁用视频播放。
-   */
-  unmute() {
-    this.video.muted = !1;
-  }
   /** 彻底销毁，不响应之后的任何事件 */
   dispose() {
     this.disposed || (this.disable(), this._disposed = !0);

package/libs/base/BasePlugin.js

@@ -14,7 +14,7 @@ let b = class {
     /**
      * @realsee/dnalogel 版本号
      */
-    i(this, "VERSION", "3.19.0-dev.2");
+    i(this, "VERSION", "3.19.1");
     i(this, "five");
     /**
      * @description: 插件事件钩子

package/libs/shared-utils/logger.js

@@ -1,6 +1,6 @@
 function A() {
   console.debug(
-    "%c %c@realsee/dnalogel %cv3.19.0-dev.2",
+    "%c %c@realsee/dnalogel %cv3.19.1",
     [
       "background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAMAAACHgmeRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABLFBMVEUAAAAapPoap/oaqvkbrfkbr/gZnfwZoPsaqfnD4v/E4/8Ylv0clPm93/+/4P/B4f8Yj/683/8Wif+33P8Uhv+x2f8ShP+s1v8Pgf+n0/8Nf/+h0f8Lff8Lff8Nf/9dl/+czv8KfP8KfP+Lxf+Uyv+Xy/+Hwv+Jw/+Mxf+Oxv+RyP8aovsapfoap/oZmfwZm/wZnvsYnPsYkf4YlP0NePsDYfgYcfi43f+63v8Xiv8Xjf4EWfwCV/sWZ/qz2v+02/8Vh/8WiP8EUf8CTf4WXv2u1/+v2P8Thf8Thv8ETf8CR/8VV/+o1f+q1f8Qgv8Rg/8DSv8BRf8UVP+j0v+k0v8OgP8Pgf8DR/8DQv9Nhf+dzv+fz/+Kv/+Vyv+Xy/+azf+Oxv+Qx/+SyP////8MUhLdAAAAK3RSTlMACEWQ2bd98uQECPXxqO7c+Pb49vj2+Pb49vj23Oul8fMHA+TwerXXjEIG2P+bHgAAAAFiS0dEY1y+LaoAAAB+SURBVAjXY2BgZGJmYWVgYGBgY9fW0eVg4ORi4NbTNzDk4eXjZxAwMjYxNTO3EGQQsrSytrG1sxdmEHFwdHJ2cXUTZRBz9/D08vbxFWeQ8PMPCAwKDpFkkAoNC4+IjIqWZpCRlZOPiY2LV2BQVGJQTkhMUlEFWaOmrqGpxQAAyg0S9Dq+VPYAAAAASUVORK5CYII=')",
       "background-repeat: no-repeat",