panel

src/panels/ExRecordPanel.ts

 import { Panel } from "../../module/views/Panel";
 import { Tool } from "../Tools";
 import Sprite = FYGE.Sprite;
+import { layers } from "../../module/views/layers";
+import Tween = FYGE.Tween;
+import ScrollList = FYGE.ScrollList;
+import Container = FYGE.Container;
+import IScrollListItem = FYGE.IScrollListItem;
 
 export default class ExRecordPanel extends Panel {
     get groupNames() {
@@ -8,15 +13,40 @@ export default class ExRecordPanel extends Panel {
     }
 
     closeBtn: Sprite;
+    scroll: ScrollList;
 
     initUi() {
-        this.addChild(Tool.getSprite("rule_bg.png"));
+        this.addChild(Tool.getSprite("comm_bg.png"))
+            .position.set(0, 65);
+
+        let title = this.addChild(Tool.getSprite("record_icon.png"));
+        title.position.set((this.width - title.width) / 2, 0);
+
         this.closeBtn = this.addChild(Tool.getSprite('closeBtn.png'));
-        this.closeBtn.position.set(600, 350);
+        this.closeBtn.position.set(670, -50);
+
+        this.scroll = this.addChild(new ScrollList(RecordItem, 653, 200, 654, 830));
+        this.scroll.position.set((this.width - this.scroll.width) / 2, 210);
+
+        this.scroll.updateData([
+            1, 2, 3, 4, 5, 6
+        ]);
 
 
     }
 
+    public showAni() {
+        if (this.isShowing) return;
+        this.isShowing = true;
+        this.y = this.height;
+        const _y = layers.height - this.height + 30;
+        Tween.get(this)
+            .to({y: _y}, 500, FYGE.Ease.quartOut)
+            .call(() => {
+                this.isShowing = false;
+            });
+    }
+
     start(data) {
         super.start();
     }
@@ -30,3 +60,20 @@ export default class ExRecordPanel extends Panel {
     }
 
 }
+
+class RecordItem extends Container implements IScrollListItem {
+    public data: number;
+    public id: number;
+
+    public initData(id: number, data: any): void {
+        if (!data) return;
+    }
+
+    constructor() {
+        super();
+
+        this.addChild(Tool.getSprite('record_item_bg.png'));
+
+    }
+
+}

src/panels/ShopPanel.ts

 import { Panel } from "../../module/views/Panel";
 import { Tool } from "../Tools";
 import Sprite = FYGE.Sprite;
+import { layers } from "../../module/views/layers";
+import Tween = FYGE.Tween;
 
 export default class ShopPanel extends Panel {
     get groupNames() {
@@ -10,11 +12,27 @@ export default class ShopPanel extends Panel {
     closeBtn: Sprite;
 
     initUi() {
-        this.addChild(Tool.getSprite("rule_bg.png"));
+        this.addChild(Tool.getSprite("comm_bg.png"))
+            .position.set(0, 65);
+
+        let title = this.addChild(Tool.getSprite("shop_icon.png"));
+        title.position.set((this.width - title.width) / 2, 0);
+
         this.closeBtn = this.addChild(Tool.getSprite('closeBtn.png'));
-        this.closeBtn.position.set(600, 350);
+        this.closeBtn.position.set(670, -50);
 
+    }
 
+    public showAni() {
+        if (this.isShowing) return;
+        this.isShowing = true;
+        this.y = this.height;
+        const _y = layers.height - this.height + 30;
+        Tween.get(this)
+            .to({y: _y}, 500, FYGE.Ease.quartOut)
+            .call(() => {
+                this.isShowing = false;
+            });
     }
 
     start(data) {

src/panels/WareHousePanel.ts

 import { Panel } from "../../module/views/Panel";
 import { Tool } from "../Tools";
 import Sprite = FYGE.Sprite;
+import { layers } from "../../module/views/layers";
+import Tween = FYGE.Tween;
+import Ease = FYGE.Ease;
 
 export default class WareHousePanel extends Panel {
     get groupNames() {
@@ -10,13 +13,29 @@ export default class WareHousePanel extends Panel {
     closeBtn: Sprite;
 
     initUi() {
-        this.addChild(Tool.getSprite("rule_bg.png"));
-        this.closeBtn = this.addChild(Tool.getSprite('closeBtn.png'));
-        this.closeBtn.position.set(600, 350);
+        this.addChild(Tool.getSprite("comm_bg.png"))
+            .position.set(0, 65);
 
+        let title = this.addChild(Tool.getSprite("wareHouse_icon.png"));
+        title.position.set((this.width - title.width) / 2, 0);
 
+        this.closeBtn = this.addChild(Tool.getSprite('closeBtn.png'));
+        this.closeBtn.position.set(670, -50);
     }
 
+    public showAni() {
+        if (this.isShowing) return;
+        this.isShowing = true;
+        this.y = this.height;
+        const _y = layers.height - this.height + 30;
+        Tween.get(this)
+            .to({y: _y}, 500, Ease.quartOut)
+            .call(() => {
+                this.isShowing = false;
+            });
+    }
+
+
     start(data) {
         super.start();
     }

src/parts/UI/UILayer.ts

@@ -9,6 +9,7 @@ import RulePanel from "../../panels/RulePanel";
 import TaskPanel from "../../panels/TaskPanel";
 import WareHousePanel from "../../panels/WareHousePanel";
 import ShopPanel from "../../panels/ShopPanel";
+import ExRecordPanel from "../../panels/ExRecordPanel";
 
 export class UILayer extends Container {
 
@@ -64,7 +65,8 @@ export class UILayer extends Container {
                 break;
             case this.ruleBtn:
                 console.log('点击了规则');
-                PanelCtrl.instance.show(RulePanel);
+                // PanelCtrl.instance.show(RulePanel);
+                PanelCtrl.instance.show(ExRecordPanel);
                 break;
             case this.adBtn:
                 console.log('点击了广告');