init

assets/Scripts/Panels/RulePanel.ts

 import Panel from "../../Module/Panel";
-import { _decorator, Button, RichText, UITransform, Node, Sprite, Texture2D, ImageAsset, SpriteFrame } from "cc";
+import { _decorator, Button, game, Node } from "cc";
 import store from "../store/store";
 import { observer, render } from "../store/decorators";
 
 const { ccclass, property } = _decorator;
 
-import { HTMLRichText } from "../../Component/HTMLRichText/HTMLRichText";
-import { WebNetName, sendWebNet } from "../Utils/WebNet/WebNet";
-
 @observer
-@ccclass('RulePanel')
+@ccclass("RulePanel")
 export default class RulePanel extends Panel {
 
-  static bundle = "RulePanel";
-  static skin = "RulePanel";
+    static bundle = "RulePanel";
+    static skin = "RulePanel";
+
+    @property(Node) closeBtn: Node = null;
+    @property(Node) ruleNode: Node = null;
+    @property(Node) content: Node = null;
+
+    dom: HTMLDivElement;
+
+    async onLoad() {
+        await store.updateRule();
+        this.closeBtn.on(Button.EventType.CLICK, this.clickClose);
+    }
 
-  @property(Node) closeBtn: Node = null;
-  @property(Node) ruleNode: Node = null;
-  @property(Node) content: Node = null;
-  
+    @render
+    render() {
+        // const { success, data } = await sendWebNet(WebNetName.projectRule);
+        // if (!success) return
 
-  async onLoad() {
-    await store.updateRule()
-    this.closeBtn.on(Button.EventType.CLICK, this.clickClose);
-  }
+        this.setRuleTxt(store.ruleInfo);
+    }
 
-  @render
-  render() {
-    // const { success, data } = await sendWebNet(WebNetName.projectRule);
-    // if (!success) return
+    clickClose = () => {
+        this.hidePanel();
+        this.dom && this.dom.remove();
+    };
 
-    this.setRuleTxt(store.ruleInfo);
-  }
+    setRuleTxt(txt: string) {
 
-  clickClose = () => {
-    this.hidePanel();
-  }
+        if (!this.dom) {
+            this.dom = document.createElement("div");
+        }
 
-  setRuleTxt(txt: string) {
+        this.dom.innerHTML = `
+            <div
+                class="poster"
+                style="
+                width: 8.35rem;
+                height: 4.55rem;
+                position: absolute;
+                left: 3.995rem;
+                top: 2rem;
+                overflow: auto;
+            ">
+                <img
+                    src="${store.frontVariable.ruleImg}"
+                    style="width: 100%;"
+                >
+            </div>
+        `;
 
-    // const ruleNode = this.view['ScrollView/view/content/ruleTxt'];
-    const ruleTxt = this.ruleNode.getComponent(RichText);
-    // const content = this.view['ScrollView/view/content'];
-    ruleTxt.maxWidth = this.content.getComponent(UITransform).width;
+        game.container.appendChild(this.dom);
 
-    this.scheduleOnce(() => {
-        ruleTxt.string = txt.replace(/<p\b.*?(?:\>|\/>)/gi,"").replace(/<\/p\>/gi,"<br/>");
-        this.content.getComponent(UITransform).height = this.ruleNode.getComponent(UITransform).height;
-    }, 0.5);
+        // const ruleNode = this.view['ScrollView/view/content/ruleTxt'];
+        // const ruleTxt = this.ruleNode.getComponent(RichText);
+        // // const content = this.view['ScrollView/view/content'];
+        // ruleTxt.maxWidth = this.content.getComponent(UITransform).width;
+        //
+        // this.scheduleOnce(() => {
+        //     ruleTxt.string = txt.replace(/<p\b.*?(?:\>|\/>)/gi, "").replace(/<\/p\>/gi, "<br/>");
+        //     this.content.getComponent(UITransform).height = this.ruleNode.getComponent(UITransform).height;
+        // }, 0.5);
 
 
-    // this.spNode.getComponent(HTMLRichText).html = txt;
+        // this.spNode.getComponent(HTMLRichText).html = txt;
 
-    // this.spNode.once(HTMLRichText.EventType.AFTER_RENDER, () => {
+        // this.spNode.once(HTMLRichText.EventType.AFTER_RENDER, () => {
 
-    //   const { width: pw, height: ph } = this.spNode.getComponent(UITransform);
+        //   const { width: pw, height: ph } = this.spNode.getComponent(UITransform);
 
-    //   const width = this.spNode.parent.getComponent(UITransform).width;
+        //   const width = this.spNode.parent.getComponent(UITransform).width;
 
-    //   const height = ph * width / pw;
+        //   const height = ph * width / pw;
 
-    //   this.spNode.getComponent(UITransform).setContentSize(width, height);
+        //   this.spNode.getComponent(UITransform).setContentSize(width, height);
 
-    // });
-  }
+        // });
+    }
 }

preview-template/mock/coop_frontVariable.query.json

 {
-	"success": true,
-	"message": null,
-	"code": null,
-	"timeStamp": 1703644343317,
-	"data": {
-      "shareInfo": {
-        "title": "分享标题",
-        "content": "分享描述",
-        "thumbnail": "https://yun.duiba.com.cn/polaris/share.dbc0a949487ba41cacc4dca4fb6254238f223a61.png"
-      },
-		"loginUrl": "https://activity.m.duiba.com.cn/customShare/share?id=Did1NTg5NTE",
-		"type": "1"
-	}
+  "success": true,
+  "message": null,
+  "code": null,
+  "timeStamp": 1703644343317,
+  "data": {
+    "shareInfo": {
+      "title": "分享标题",
+      "content": "分享描述",
+      "thumbnail": "https://yun.duiba.com.cn/polaris/share.dbc0a949487ba41cacc4dca4fb6254238f223a61.png"
+    },
+    "loginUrl": "https://activity.m.duiba.com.cn/customShare/share?id=Did1NTg5NTE",
+    "type": "1",
+    "ruleImg": "//yun.duiba.com.cn/polaris/%E6%B4%BB%E5%8A%A8%E8%A7%84%E5%88%99%E9%A1%B5-%E9%9B%B6%E9%A3%9F%E8%B4%AA%E5%90%83%E8%9B%87-%E5%BE%88%E5%BF%99%E7%89%88%E6%9C%AC@1x.dc2bdc490918f1fb831c6c28fab824e1ed192888.png"
+  }
 }
\ No newline at end of file