shadow dom 不支持base64的font face，只能用字符代替

cc-inspector/src/scripts/inject-view/app.vue

@@ -4,18 +4,18 @@
       <div class="title">Recommend</div>
       <div class="line"></div>
       <div class="close" @click="onClose" :title="closeTitle">
-        <i class="icon iconfont icon_close"></i>
+        <div class="icon">x</div>
       </div>
     </div>
     <div class="body" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
       <div class="left slide" @click="onClickBtnLeft">
-        <i class="iconfont icon_arrow_left arrow"></i>
+        <div class="arrow">&lt;</div>
       </div>
       <div class="list" ref="elAd" @wheel="onWheel">
         <Banner v-for="(item, index) in ads" :data="item" :key="index"></Banner>
       </div>
       <div class="right slide" @click="onClickBtnRight">
-        <i class="iconfont icon_arrow_right arrow"></i>
+        <div class="arrow">&gt;</div>
       </div>
     </div>
   </div>
@@ -141,7 +141,7 @@ export default defineComponent({
 
 <style scoped lang="less">
 @color-bg: #8d8d8da6;
-@color-hover: #4d4d4da6;
+@color-hover: #f9c04e;
 @color-active: #ffaa00;
 .ad {
   position: absolute;
@@ -181,7 +181,8 @@ export default defineComponent({
       justify-content: center;
       align-items: center;
       .icon {
-        font-size: 8px;
+        user-select: none;
+        font-size: 14px;
         &:hover {
           color: black;
         }
@@ -229,10 +230,14 @@ export default defineComponent({
       flex-direction: row;
       align-items: center;
       position: absolute;
+      justify-content: center;
 
       .arrow {
+        user-select: none;
         font-size: 22px;
-        color: rgb(61, 61, 61);
+        font-weight: bold;
+
+        color: rgb(133, 133, 133);
       }
     }
   }

cc-inspector/src/scripts/inject-view/banner.vue

@@ -87,10 +87,12 @@ export default defineComponent({
   max-width: 300px;
   min-height: 50px;
   max-height: 50px;
+  margin: 0;
   cursor: pointer;
   display: flex;
   text-align: center;
   align-items: flex-end;
+
   &:hover {
     border: 2px solid #949494;
     border-bottom: 0;

cc-inspector/src/scripts/inject-view/res/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1737262301480" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2139" width="16.0625" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M597.54570376 512l219.97466684-219.97466683c24.44162965-24.44162965 24.44162965-61.10407412 0-85.54570377-24.44162965-24.44162965-61.10407412-24.44162965-85.54570377 0L512 426.45429624 292.02533317 206.4796294C267.58370352 182.03799974 230.92125905 182.03799974 206.4796294 206.4796294c-24.44162965 24.44162965-24.44162965 61.10407412 0 85.54570377L426.45429624 512l-219.97466684 219.97466683c-24.44162965 24.44162965-24.44162965 61.10407412 0 85.54570377 12.22081482 12.22081482 28.51523459 16.29441978 44.80965436 16.29441976s32.58883953-4.07360495 44.80965435-16.29441976L512 597.54570376l219.97466683 219.97466684c12.22081482 12.22081482 28.51523459 16.29441978 44.80965436 16.29441977s32.58883953-4.07360495 44.80965436-16.29441977c24.44162965-24.44162965 24.44162965-61.10407412 0-85.54570377L597.54570376 512z" fill="#cdcdcd" p-id="2140"></path></svg>

cc-inspector/src/scripts/inject-view/res/left.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1737262395969" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2346" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M704 868c-8.3 0-16.5-2.8-23.1-8.3l-384-320c-8.2-6.8-13-17-13-27.7s4.7-20.8 13-27.7l384-320c10.7-8.9 25.7-10.9 38.3-4.9C731.9 165.3 740 178 740 192v640c0 14-8.1 26.7-20.7 32.6-4.9 2.3-10.1 3.4-15.3 3.4z" fill="#dbdbdb" p-id="2347"></path></svg>

cc-inspector/src/scripts/inject-view/res/right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1737262412557" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2507" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M304.7 864.6C292.1 858.7 284 846 284 832V192c0-14 8.1-26.7 20.7-32.6 12.6-5.9 27.6-4 38.3 4.9l384 320c8.2 6.8 13 17 13 27.7s-4.7 20.8-13 27.7l-384 320c-6.6 5.5-14.8 8.3-23.1 8.3-5.1 0-10.3-1.1-15.2-3.4z" fill="#dbdbdb" p-id="2508"></path></svg>

cc-inspector/src/scripts/inject/inject-view.ts

@@ -7,10 +7,13 @@ import App from "../inject-view/app.vue";
 export class InjectView {
   private _inited = false;
   private css: string[] = [];
+  private shadowRoot: ShadowRoot | null = null;
+  private hasLoadCss = false;
   constructor() {
     document.addEventListener(DocumentEvent.LoadInjectCss, (event: CustomEvent) => {
       const cssArray: string[] = event.detail;
       this.css = cssArray;
+      this.loadCss();
     });
   }
   public init() {
@@ -20,22 +23,38 @@ export class InjectView {
     this._inited = true;
     this.createUI();
   }
+  private loadCss() {
+    if (!this.shadowRoot) {
+      return;
+    }
+    if (this.hasLoadCss) {
+      return;
+    }
+    if (this.css.length === 0) {
+      return;
+    }
+    this.hasLoadCss = true;
+    this.css.forEach((css) => {
+      const link = document.createElement("link");
+      link.href = css;
+      link.rel = "stylesheet";
+      this.shadowRoot.appendChild(link);
+    });
+  }
   private createUI() {
     const el = document.createElement("div");
-    el.style.position = "absolute";
+    el.style.position = "fixed";
     el.style.zIndex = "99999";
     el.style.bottom = "0";
     el.style.right = "0";
     el.style.left = "0";
     document.body.appendChild(el);
     const shadowRoot = el.attachShadow({ mode: "open" });
+    shadowRoot.ATTRIBUTE_NODE;
+    this.shadowRoot = shadowRoot;
+
     // load css
-    this.css.forEach((css) => {
+    this.loadCss();
-      const link = document.createElement("link");
-      link.href = css;
-      link.rel = "stylesheet";
-      shadowRoot.appendChild(link);
-    });
     // vue
     const root = document.createElement("div");
     shadowRoot.appendChild(root);