优化加载显示

assets/Scripts/chat18x/ui/panels/GirlListPopupPanel.ts

@@ -1,4 +1,13 @@
-import { _decorator, Button, Component, Node, Label, View } from "cc";
+import {
+  _decorator,
+  Button,
+  Component,
+  Node,
+  Label,
+  View,
+  Sprite,
+  UITransform,
+} from "cc";
 import li_BaseView from "../../../Main/Common/li_BaseView";
 import Utils from "../../../Main/Common/Utils";
 import { GButton } from "../../../Main/Common/GButton";
@@ -12,6 +21,7 @@ import proto from "db://assets/Scripts/proto/proto.pb.js";
 import LanguageUtils from "../../../Main/Common/LanguageUtils";
 import { ViewManager } from "../../../Main/Manager/ViewManager";
 import { TipsPanel } from "./TipsPanel";
+import ResManager from "../../../Main/Manager/ResManager";
 const { ccclass, property } = _decorator;
 
 @ccclass("GirlListPopupPanel")
@@ -25,6 +35,8 @@ export class GirlListPopupPanel extends li_BaseView {
   private girlTag: Label;
 
   base: GirlListItem;
+  img: Sprite;
+  uitransform: UITransform;
   openUIDataCT(data) {
     this.category = data.category;
     this.girlId = data.id;
@@ -32,6 +44,8 @@ export class GirlListPopupPanel extends li_BaseView {
   }
   onLoadCT() {
     Utils.parseNode(this.node, this._nodeTab);
+    this.img = this._nodeTab.img.getComponent(Sprite);
+    this.uitransform = this._nodeTab.Img_Frame.getComponent(UITransform);
     this.girlName = this._nodeTab.Name.getComponent(Label);
     this.girlTag = this._nodeTab.Tag.getComponent(Label);
     const girlData = DataManager.I.getDataById<GirlData>(DataId.Girl);
@@ -48,6 +62,13 @@ export class GirlListPopupPanel extends li_BaseView {
     this.girlTag.string = LanguageUtils.getText(
       girlData.getGrilTagKey(this.category.toString(), this.girlId)
     );
+
+    const path = girlData.getGrilAvatar(this.category.toString(), this.girlId);
+
+    //console.log(path);
+    ResManager.I.changeBundleSpriteFrame(this.img, path, "Girls", () => {
+      this.scaleToFillItem();
+    });
   }
   registerListener() {
     GButton.BandClick(this._nodeTab.BuyBtn, this.buyCharacter, this);
@@ -83,4 +104,44 @@ export class GirlListPopupPanel extends li_BaseView {
     }
     // TipsPanel.show("Insufficient balance, need to purchase");
   }
+
+  scaleToFillItem() {
+    if (!this.img || !this.img.spriteFrame) return;
+
+    // 延迟一帧确保UI布局完成
+    this.doScaleToFill();
+  }
+
+  doScaleToFill() {
+    if (!this.img || !this.img.spriteFrame) return;
+    if (!this.uitransform)
+      this.uitransform = this.node.getComponent(UITransform);
+    const itemSize = this.uitransform.contentSize;
+    const imageSize = this.img.spriteFrame.originalSize;
+
+    if (
+      itemSize.width === 0 ||
+      itemSize.height === 0 ||
+      imageSize.width === 0 ||
+      imageSize.height === 0
+    ) {
+      return;
+    }
+
+    const scaleX = itemSize.width / imageSize.width;
+    const scaleY = itemSize.height / imageSize.height;
+    const scale = Math.max(scaleY, scaleY);
+
+    // 设置Sprite的sizeMode为CUSTOM，允许自定义大小
+    this.img.sizeMode = Sprite.SizeMode.CUSTOM;
+
+    // 获取图片节点的UITransform并设置大小
+    const imgTransform = this.img.node.getComponent(UITransform);
+    if (imgTransform) {
+      imgTransform.setContentSize(
+        imageSize.width * scale,
+        imageSize.height * scale
+      );
+    }
+  }
 }

assets/Scripts/chat18x/ui/panels/PopupGirlDetailPanel.ts

@@ -1,4 +1,4 @@
-import { _decorator, Component, Node, Label } from "cc";
+import { _decorator, Component, Node, Label, UITransform, Sprite } from "cc";
 import li_BaseView from "../../../Main/Common/li_BaseView";
 import { GButton } from "../../../Main/Common/GButton";
 import Utils from "../../../Main/Common/Utils";
@@ -11,6 +11,7 @@ import proto from "db://assets/Scripts/proto/proto.pb.js";
 import LanguageUtils from "../../../Main/Common/LanguageUtils";
 import { ImagePopup } from "../components/ImagePopup";
 import { TipsPanel } from "./TipsPanel";
+import ResManager from "../../../Main/Manager/ResManager";
 const { ccclass, property } = _decorator;
 
 @ccclass("PopupGirlDetailPanel")
@@ -24,6 +25,9 @@ export class PopupGirlDetailPanel extends li_BaseView {
   private base: DetailImageItem | ImagePopup;
 
   private desc: Label;
+
+  img: Sprite;
+  uitransform: UITransform;
   openUIDataCT(data) {
     this.category = data.category;
     this.resId = data.resId;
@@ -34,12 +38,15 @@ export class PopupGirlDetailPanel extends li_BaseView {
   onLoadCT() {
     Utils.parseNode(this.node, this._nodeTab);
     this.desc = this._nodeTab.content.getComponent(Label);
-
+    this.uitransform = this._nodeTab.Img_Frame.getComponent(UITransform);
+    this.img = this._nodeTab.img.getComponent(Sprite);
     let descText = LanguageUtils.getText("popupgirldetailpanel.content");
 
     const girlData = DataManager.I.getDataById<GirlData>(DataId.Girl);
     // 价格
     this.priceLabel = this._nodeTab.Price.getComponent(Label);
+
+    let url = "";
     if (this.type === proto.cs.EnmResType.ERT_Image) {
       // 图片
       this.priceLabel.string = girlData
@@ -49,6 +56,11 @@ export class PopupGirlDetailPanel extends li_BaseView {
           this.resId
         )
         .toString();
+      url = girlData.getGrilPhotoPic(
+        this.category.toString(),
+        this.girlId,
+        this.resId
+      );
     } else if (this.type === proto.cs.EnmResType.ERT_Video) {
       // 视频
       this.priceLabel.string = girlData
@@ -58,8 +70,16 @@ export class PopupGirlDetailPanel extends li_BaseView {
           this.resId
         )
         .toString();
+      url = girlData.getGrilVideoPath(
+        this.category.toString(),
+        this.girlId,
+        this.resId
+      );
     }
-
+    const path = url + "_thumbnail_blur";
+    ResManager.I.changeBundleSpriteFrame(this.img, path, "Girls", () => {
+      this.scaleToFillItem();
+    });
     this.desc.string = descText.replace("{price}", this.priceLabel.string);
 
     this.registerListener();
@@ -108,4 +128,44 @@ export class PopupGirlDetailPanel extends li_BaseView {
       TipsPanel.show("Insufficient balance, need to purchase");
     }
   }
+
+  scaleToFillItem() {
+    if (!this.img || !this.img.spriteFrame) return;
+
+    // 延迟一帧确保UI布局完成
+    this.doScaleToFill();
+  }
+
+  doScaleToFill() {
+    if (!this.img || !this.img.spriteFrame) return;
+    if (!this.uitransform)
+      this.uitransform = this.node.getComponent(UITransform);
+    const itemSize = this.uitransform.contentSize;
+    const imageSize = this.img.spriteFrame.originalSize;
+
+    if (
+      itemSize.width === 0 ||
+      itemSize.height === 0 ||
+      imageSize.width === 0 ||
+      imageSize.height === 0
+    ) {
+      return;
+    }
+
+    const scaleX = itemSize.width / imageSize.width;
+    const scaleY = itemSize.height / imageSize.height;
+    const scale = Math.max(scaleY, scaleY);
+
+    // 设置Sprite的sizeMode为CUSTOM，允许自定义大小
+    this.img.sizeMode = Sprite.SizeMode.CUSTOM;
+
+    // 获取图片节点的UITransform并设置大小
+    const imgTransform = this.img.node.getComponent(UITransform);
+    if (imgTransform) {
+      imgTransform.setContentSize(
+        imageSize.width * scale,
+        imageSize.height * scale
+      );
+    }
+  }
 }

assets/Scripts/chat18x/ui/panels/ThemePanel.ts

@@ -53,7 +53,7 @@ export class ThemePanel extends li_BaseView {
     this.coinNum = this._nodeTab.coinNum.getComponent(Label);
     this.uid = this._nodeTab.uid.getComponent(Label);
     this.recName = this._nodeTab.characterNameText.getComponent(Label);
-    this.recSprite = this._nodeTab.recPicSlot.getComponent(Sprite);
+    this.recSprite = this._nodeTab.recPic.getComponent(Sprite);
     this.vipLeftTime = this._nodeTab.vipText.getComponent(Label);
 
     this.registerListener();
@@ -66,6 +66,7 @@ export class ThemePanel extends li_BaseView {
 
   rectNameKey: string;
   async Show() {
+    this._nodeTab.loadingRec.active = true;
     //some temp data
     this.refreshCoinNum();
     this.refreshVipExpire();
@@ -121,6 +122,7 @@ export class ThemePanel extends li_BaseView {
         }
       );
     }
+    this._nodeTab.loadingRec.active = false;
 
     // 获取商品列表，提前把数据拿下来
     this.reqShopList();

assets/Scripts/chat18x/uiitems/DetailImageItem.ts

@@ -36,7 +36,8 @@ export class DetailImageItem extends Component {
   priceFrame: Node;
   @property(Label)
   videoPrice: Label;
-
+  @property(Node)
+  loading: Node;
   base: GirlDetailPanel;
   url: string;
   isImage: boolean;
@@ -142,8 +143,9 @@ export class DetailImageItem extends Component {
     this.category = category;
     this.girlId = id;
     this.resId = resId;
-    this.question.active = true; // 显示问号，表示加载中
+    //this.question.active = true; // 显示问号，表示加载中
 
+    this.loading.active = true;
     this.test_resID = this.node.getChildByName("resID");
 
     this.test_resID.getComponent(Label).string =
@@ -209,8 +211,9 @@ export class DetailImageItem extends Component {
     }
 
     ResManager.I.changeBundleSpriteFrame(this.img, imgPath, "Girls", () => {
-      this.question.active = false; // 图片加载成功后隐藏问号
+      if (!this.isVisible) this.question.active = false; // 图片加载成功后隐藏问号
       this.scaleToFillItem();
+      this.loading.active = false;
     });
   }
 

assets/Scripts/chat18x/uiitems/GirlListItem.ts

@@ -41,7 +41,8 @@ export class GirlListItem extends Component {
 
   @property(Node)
   starParent: Node;
-
+  @property(Node)
+  loading: Node;
   stars: Sprite[];
 
   id: number = -1;
@@ -133,15 +134,16 @@ export class GirlListItem extends Component {
     // this.price.node.active = priceType == PriceType.pay;
     // this.freeNode.active = priceType == PriceType.free;
     //this.tryNode.active = priceType == PriceType.first_time_free;
-    let listAvatarPath = girlData.getGrilAvatar(
+    let avatarPath = girlData.getGrilAvatar(
       this.category.toString(),
       this.id
     );
+    this.loading.active = true;
 
     //listAvatarPath = listAvatarPath.replace("Avatar", "avatar"); //临时
     ResManager.I.changeBundleSpriteFrame(
       this.avatar,
-      listAvatarPath,
+      avatarPath,
       "Girls",
       () => {
         let sizeTran = this.avatar.node.parent.getComponent(UITransform);
@@ -150,6 +152,7 @@ export class GirlListItem extends Component {
           this.avatar.node,
           2
         );
+        this.loading.active = false;
       }
     );
 

assets/Scripts/chat18x/uiitems/ThemeItem.ts

@@ -19,6 +19,9 @@ export class ThemeItem extends Component {
   @property(Label)
   titleName: Label;
 
+  @property(Node)
+  loading: Node;
+
   @property(Sprite)
   img: Sprite;
 
@@ -39,13 +42,16 @@ export class ThemeItem extends Component {
   }
 
   refresh(themeId: number) {
+    this.loading.active = true;
     // 主题数据
     const themeData = DataManager.I.getDataById<ThemeData>(DataId.Theme);
     this.lockImg.node.active = this.lockCover.node.active =
       !themeData.getIsReleaseById(themeId);
     this.isLocked = !themeData.getIsReleaseById(themeId);
     this.key = themeData.getLanKeyById(themeId);
-    this.titleName.string = LanguageUtils.getText(themeData.getLanKeyById(themeId));
+    this.titleName.string = LanguageUtils.getText(
+      themeData.getLanKeyById(themeId)
+    );
     this.category = themeData.getCategoryById(themeId);
     ResManager.I.changeBundleSpriteFrame(
       this.img,
@@ -54,6 +60,7 @@ export class ThemeItem extends Component {
       () => {
         let sizeTran = this.img.node.parent.getComponent(UITransform);
         Utils.adjustBgPixelRatioToSize(sizeTran.contentSize, this.img.node, 3);
+        this.loading.active = false;
       }
     );
     GButton.RemoveAndBandClick(this.node, this.OnClickThis, this);

assets/bundles/Chat18x/PopupGirlDetailPanel.prefab

@@ -22,35 +22,35 @@
         "__id__": 2
       },
       {
-        "__id__": 10
+        "__id__": 14
       },
       {
-        "__id__": 18
+        "__id__": 22
       },
       {
-        "__id__": 24
+        "__id__": 28
       },
       {
-        "__id__": 60
+        "__id__": 64
       }
     ],
     "_active": true,
     "_components": [
-      {
-        "__id__": 70
-      },
-      {
-        "__id__": 72
-      },
       {
         "__id__": 74
       },
       {
         "__id__": 76
+      },
+      {
+        "__id__": 78
+      },
+      {
+        "__id__": 80
       }
     ],
     "_prefab": {
-      "__id__": 78
+      "__id__": 82
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -89,21 +89,22 @@
     "_parent": {
       "__id__": 1
     },
-    "_children": [],
+    "_children": [
+      {
+        "__id__": 3
+      }
+    ],
     "_active": true,
     "_components": [
       {
-        "__id__": 3
+        "__id__": 9
       },
       {
-        "__id__": 5
+        "__id__": 11
-      },
-      {
-        "__id__": 7
       }
     ],
     "_prefab": {
-      "__id__": 9
+      "__id__": 13
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -134,6 +135,139 @@
     },
     "_id": ""
   },
+  {
+    "__type__": "cc.Node",
+    "_name": "img",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 4
+      },
+      {
+        "__id__": 6
+      }
+    ],
+    "_prefab": {
+      "__id__": 8
+    },
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 3
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 5
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 865,
+      "height": 1116
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "eaW3zMx21LeJH3Hwx9DMaw"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 3
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 7
+    },
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_spriteFrame": null,
+    "_type": 0,
+    "_fillType": 0,
+    "_sizeMode": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "44OXz3QYZGn7FrV7rAjdT2"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "baeVmjRypPQp5QUya2CMIl",
+    "instance": null,
+    "targetOverrides": null,
+    "nestedPrefabInstanceRoots": null
+  },
   {
     "__type__": "cc.UITransform",
     "_name": "",
@@ -144,7 +278,7 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 4
+      "__id__": 10
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -162,51 +296,6 @@
     "__type__": "cc.CompPrefabInfo",
     "fileId": "0268Taq45PvozsNZXrmVZj"
   },
-  {
-    "__type__": "cc.Sprite",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 2
-    },
-    "_enabled": true,
-    "__prefab": {
-      "__id__": 6
-    },
-    "_customMaterial": null,
-    "_srcBlendFactor": 2,
-    "_dstBlendFactor": 4,
-    "_color": {
-      "__type__": "cc.Color",
-      "r": 255,
-      "g": 255,
-      "b": 255,
-      "a": 255
-    },
-    "_spriteFrame": {
-      "__uuid__": "1000b7ea-1ea6-4f0b-8e42-72dba307f062@f9941",
-      "__expectedType__": "cc.SpriteFrame"
-    },
-    "_type": 0,
-    "_fillType": 0,
-    "_sizeMode": 0,
-    "_fillCenter": {
-      "__type__": "cc.Vec2",
-      "x": 0,
-      "y": 0
-    },
-    "_fillStart": 0,
-    "_fillRange": 0,
-    "_isTrimmedMode": true,
-    "_useGrayscale": false,
-    "_atlas": null,
-    "_id": ""
-  },
-  {
-    "__type__": "cc.CompPrefabInfo",
-    "fileId": "79O8qgmR1LiIMSZ3G/Z3Jv"
-  },
   {
     "__type__": "cc.Widget",
     "_name": "",
@@ -217,9 +306,9 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 8
+      "__id__": 12
     },
-    "_alignFlags": 1,
+    "_alignFlags": 41,
     "_target": null,
     "_left": 0,
     "_right": 0,
@@ -233,7 +322,7 @@
     "_isAbsBottom": true,
     "_isAbsHorizontalCenter": true,
     "_isAbsVerticalCenter": true,
-    "_originalWidth": 0,
+    "_originalWidth": 865,
     "_originalHeight": 0,
     "_alignMode": 2,
     "_lockFlags": 0,
@@ -267,18 +356,18 @@
     "_children": [],
     "_active": true,
     "_components": [
-      {
-        "__id__": 11
-      },
-      {
-        "__id__": 13
-      },
       {
         "__id__": 15
+      },
+      {
+        "__id__": 17
+      },
+      {
+        "__id__": 19
       }
     ],
     "_prefab": {
-      "__id__": 17
+      "__id__": 21
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -315,11 +404,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 10
+      "__id__": 14
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 12
+      "__id__": 16
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -343,11 +432,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 10
+      "__id__": 14
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 14
+      "__id__": 18
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -388,11 +477,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 10
+      "__id__": 14
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 16
+      "__id__": 20
     },
     "_alignFlags": 40,
     "_target": null,
@@ -443,14 +532,14 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 19
+        "__id__": 23
       },
       {
-        "__id__": 21
+        "__id__": 25
       }
     ],
     "_prefab": {
-      "__id__": 23
+      "__id__": 27
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -487,11 +576,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 18
+      "__id__": 22
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 20
+      "__id__": 24
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -515,11 +604,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 18
+      "__id__": 22
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 22
+      "__id__": 26
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -577,26 +666,26 @@
     },
     "_children": [
       {
-        "__id__": 25
+        "__id__": 29
       },
       {
-        "__id__": 33
+        "__id__": 37
       }
     ],
     "_active": true,
     "_components": [
-      {
-        "__id__": 53
-      },
-      {
-        "__id__": 55
-      },
       {
         "__id__": 57
+      },
+      {
+        "__id__": 59
+      },
+      {
+        "__id__": 61
       }
     ],
     "_prefab": {
-      "__id__": 59
+      "__id__": 63
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -633,23 +722,23 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 24
+      "__id__": 28
     },
     "_children": [],
     "_active": true,
     "_components": [
-      {
-        "__id__": 26
-      },
-      {
-        "__id__": 28
-      },
       {
         "__id__": 30
+      },
+      {
+        "__id__": 32
+      },
+      {
+        "__id__": 34
       }
     ],
     "_prefab": {
-      "__id__": 32
+      "__id__": 36
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -686,11 +775,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 25
+      "__id__": 29
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 27
+      "__id__": 31
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -714,11 +803,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 25
+      "__id__": 29
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 29
+      "__id__": 33
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -785,11 +874,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 25
+      "__id__": 29
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 31
+      "__id__": 35
     },
     "_alignFlags": 41,
     "_target": null,
@@ -834,24 +923,24 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 24
+      "__id__": 28
     },
     "_children": [
       {
-        "__id__": 34
+        "__id__": 38
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 48
+        "__id__": 52
       },
       {
-        "__id__": 50
+        "__id__": 54
       }
     ],
     "_prefab": {
-      "__id__": 52
+      "__id__": 56
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -888,24 +977,24 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 33
+      "__id__": 37
     },
     "_children": [
       {
-        "__id__": 35
+        "__id__": 39
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 43
+        "__id__": 47
       },
       {
-        "__id__": 45
+        "__id__": 49
       }
     ],
     "_prefab": {
-      "__id__": 47
+      "__id__": 51
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -942,23 +1031,23 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 34
+      "__id__": 38
     },
     "_children": [],
     "_active": true,
     "_components": [
-      {
-        "__id__": 36
-      },
-      {
-        "__id__": 38
-      },
       {
         "__id__": 40
+      },
+      {
+        "__id__": 42
+      },
+      {
+        "__id__": 44
       }
     ],
     "_prefab": {
-      "__id__": 42
+      "__id__": 46
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -995,11 +1084,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 35
+      "__id__": 39
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 37
+      "__id__": 41
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -1023,11 +1112,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 35
+      "__id__": 39
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 39
+      "__id__": 43
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -1068,11 +1157,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 35
+      "__id__": 39
     },
     "_enabled": false,
     "__prefab": {
-      "__id__": 41
+      "__id__": 45
     },
     "_alignFlags": 8,
     "_target": null,
@@ -1117,11 +1206,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 34
+      "__id__": 38
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 44
+      "__id__": 48
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -1145,11 +1234,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 34
+      "__id__": 38
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 46
+      "__id__": 50
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -1229,11 +1318,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 33
+      "__id__": 37
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 49
+      "__id__": 53
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -1257,11 +1346,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 33
+      "__id__": 37
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 51
+      "__id__": 55
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -1315,11 +1404,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 24
+      "__id__": 28
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 54
+      "__id__": 58
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -1343,11 +1432,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 24
+      "__id__": 28
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 56
+      "__id__": 60
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -1388,11 +1477,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 24
+      "__id__": 28
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 58
+      "__id__": 62
     },
     "_alignFlags": 4,
     "_target": null,
@@ -1442,21 +1531,21 @@
     "_children": [],
     "_active": true,
     "_components": [
-      {
-        "__id__": 61
-      },
-      {
-        "__id__": 63
-      },
       {
         "__id__": 65
       },
       {
         "__id__": 67
+      },
+      {
+        "__id__": 69
+      },
+      {
+        "__id__": 71
       }
     ],
     "_prefab": {
-      "__id__": 69
+      "__id__": 73
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -1493,11 +1582,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 60
+      "__id__": 64
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 62
+      "__id__": 66
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -1521,11 +1610,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 60
+      "__id__": 64
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 64
+      "__id__": 68
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -1566,11 +1655,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 60
+      "__id__": 64
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 66
+      "__id__": 70
     },
     "clickEvents": [],
     "_interactable": true,
@@ -1622,7 +1711,7 @@
     "_duration": 0.1,
     "_zoomScale": 1.2,
     "_target": {
-      "__id__": 60
+      "__id__": 64
     },
     "_id": ""
   },
@@ -1636,11 +1725,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 60
+      "__id__": 64
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 68
+      "__id__": 72
     },
     "_alignFlags": 33,
     "_target": null,
@@ -1689,7 +1778,7 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 71
+      "__id__": 75
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -1717,7 +1806,7 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 73
+      "__id__": 77
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -1762,7 +1851,7 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 75
+      "__id__": 79
     },
     "_type": 3,
     "_inverted": false,
@@ -1784,7 +1873,7 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 77
+      "__id__": 81
     },
     "m_rootNode": null,
     "_id": ""