diff --git a/assets/prefabs/PageWriteLevels.prefab b/assets/prefabs/PageWriteLevels.prefab
index 5430ebd..5b9c101 100644
--- a/assets/prefabs/PageWriteLevels.prefab
+++ b/assets/prefabs/PageWriteLevels.prefab
@@ -25,32 +25,32 @@
         "__id__": 10
       },
       {
-        "__id__": 24
+        "__id__": 20
       },
       {
-        "__id__": 38
+        "__id__": 34
       },
       {
-        "__id__": 58
+        "__id__": 48
       },
       {
-        "__id__": 100
+        "__id__": 68
       },
       {
-        "__id__": 132
+        "__id__": 88
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 142
+        "__id__": 122
       },
       {
-        "__id__": 144
+        "__id__": 124
       }
     ],
     "_prefab": {
-      "__id__": 146
+      "__id__": 126
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -238,6 +238,240 @@
     "targetOverrides": null,
     "nestedPrefabInstanceRoots": null
   },
+  {
+    "__type__": "cc.Node",
+    "_name": "IconBack",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 11
+      },
+      {
+        "__id__": 13
+      },
+      {
+        "__id__": 15
+      },
+      {
+        "__id__": 17
+      }
+    ],
+    "_prefab": {
+      "__id__": 19
+    },
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": -410.938,
+      "y": 942.514,
+      "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": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 10
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 12
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 108,
+      "height": 108
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "74C+oVkAVF+qP0KmO0vO9s"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 10
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 14
+    },
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_spriteFrame": {
+      "__uuid__": "9c27734d-854f-476b-961d-d1b92c75f8c0@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_type": 0,
+    "_fillType": 0,
+    "_sizeMode": 1,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "50F2n9/idMcb4kNVxsjCrO"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 10
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 16
+    },
+    "_alignFlags": 9,
+    "_target": null,
+    "_left": -414.938,
+    "_right": 0,
+    "_top": -946.514,
+    "_bottom": 0,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "aeoBSE1olAMZgVzcdHBpmS"
+  },
+  {
+    "__type__": "cc.Button",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 10
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 18
+    },
+    "clickEvents": [],
+    "_interactable": true,
+    "_transition": 0,
+    "_normalColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_hoverColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "_pressedColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_disabledColor": {
+      "__type__": "cc.Color",
+      "r": 124,
+      "g": 124,
+      "b": 124,
+      "a": 255
+    },
+    "_normalSprite": null,
+    "_hoverSprite": null,
+    "_pressedSprite": null,
+    "_disabledSprite": null,
+    "_duration": 0.1,
+    "_zoomScale": 1.2,
+    "_target": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "82tUBmfqVOgJCAwJwK5EDe"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "ac1NMltcFCHYLwVCCxc8qC",
+    "instance": null,
+    "targetOverrides": null,
+    "nestedPrefabInstanceRoots": null
+  },
   {
     "__type__": "cc.Node",
     "_name": "CompleteButton",
@@ -248,23 +482,23 @@
     },
     "_children": [
       {
-        "__id__": 11
+        "__id__": 21
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 17
+        "__id__": 27
       },
       {
-        "__id__": 19
+        "__id__": 29
       },
       {
-        "__id__": 21
+        "__id__": 31
       }
     ],
     "_prefab": {
-      "__id__": 23
+      "__id__": 33
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -301,20 +535,20 @@
     "_objFlags": 512,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 10
+      "__id__": 20
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 12
+        "__id__": 22
       },
       {
-        "__id__": 14
+        "__id__": 24
       }
     ],
     "_prefab": {
-      "__id__": 16
+      "__id__": 26
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -351,11 +585,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 11
+      "__id__": 21
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 13
+      "__id__": 23
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -379,11 +613,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 11
+      "__id__": 21
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 15
+      "__id__": 25
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -460,11 +694,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 10
+      "__id__": 20
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 18
+      "__id__": 28
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -488,11 +722,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 10
+      "__id__": 20
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 20
+      "__id__": 30
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -533,11 +767,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 10
+      "__id__": 20
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 22
+      "__id__": 32
     },
     "clickEvents": [],
     "_interactable": true,
@@ -589,7 +823,7 @@
     "_duration": 0.1,
     "_zoomScale": 1.2,
     "_target": {
-      "__id__": 10
+      "__id__": 20
     },
     "_id": ""
   },
@@ -620,23 +854,23 @@
     },
     "_children": [
       {
-        "__id__": 25
+        "__id__": 35
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 31
+        "__id__": 41
       },
       {
-        "__id__": 33
+        "__id__": 43
       },
       {
-        "__id__": 35
+        "__id__": 45
       }
     ],
     "_prefab": {
-      "__id__": 37
+      "__id__": 47
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -673,20 +907,20 @@
     "_objFlags": 512,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 24
+      "__id__": 34
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 26
+        "__id__": 36
       },
       {
-        "__id__": 28
+        "__id__": 38
       }
     ],
     "_prefab": {
-      "__id__": 30
+      "__id__": 40
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -723,11 +957,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 25
+      "__id__": 35
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 27
+      "__id__": 37
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -751,11 +985,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 25
+      "__id__": 35
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 29
+      "__id__": 39
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -832,11 +1066,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 24
+      "__id__": 34
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 32
+      "__id__": 42
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -860,11 +1094,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 24
+      "__id__": 34
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 34
+      "__id__": 44
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -905,11 +1139,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 24
+      "__id__": 34
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 36
+      "__id__": 46
     },
     "clickEvents": [],
     "_interactable": true,
@@ -961,7 +1195,7 @@
     "_duration": 0.1,
     "_zoomScale": 1.2,
     "_target": {
-      "__id__": 24
+      "__id__": 34
     },
     "_id": ""
   },
@@ -992,26 +1226,26 @@
     },
     "_children": [
       {
-        "__id__": 39
-      },
-      {
-        "__id__": 45
-      }
-    ],
-    "_active": true,
-    "_components": [
-      {
-        "__id__": 51
-      },
-      {
-        "__id__": 53
+        "__id__": 49
       },
       {
         "__id__": 55
       }
     ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 61
+      },
+      {
+        "__id__": 63
+      },
+      {
+        "__id__": 65
+      }
+    ],
     "_prefab": {
-      "__id__": 57
+      "__id__": 67
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -1048,20 +1282,20 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 38
+      "__id__": 48
     },
     "_children": [],
     "_active": false,
     "_components": [
       {
-        "__id__": 40
+        "__id__": 50
       },
       {
-        "__id__": 42
+        "__id__": 52
       }
     ],
     "_prefab": {
-      "__id__": 44
+      "__id__": 54
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -1098,11 +1332,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 39
+      "__id__": 49
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 41
+      "__id__": 51
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -1126,11 +1360,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 39
+      "__id__": 49
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 43
+      "__id__": 53
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -1207,20 +1441,20 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 38
+      "__id__": 48
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 46
+        "__id__": 56
       },
       {
-        "__id__": 48
+        "__id__": 58
       }
     ],
     "_prefab": {
-      "__id__": 50
+      "__id__": 60
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -1257,11 +1491,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 45
+      "__id__": 55
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 47
+      "__id__": 57
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -1285,11 +1519,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 45
+      "__id__": 55
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 49
+      "__id__": 59
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -1366,11 +1600,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 38
+      "__id__": 48
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 52
+      "__id__": 62
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -1394,11 +1628,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 38
+      "__id__": 48
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 54
+      "__id__": 64
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -1439,21 +1673,21 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 38
+      "__id__": 48
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 56
+      "__id__": 66
     },
     "editingDidBegan": [],
     "textChanged": [],
     "editingDidEnded": [],
     "editingReturn": [],
     "_textLabel": {
-      "__id__": 42
+      "__id__": 52
     },
     "_placeholderLabel": {
-      "__id__": 48
+      "__id__": 58
     },
     "_returnType": 0,
     "_string": "",
@@ -1486,7 +1720,7 @@
   },
   {
     "__type__": "cc.Node",
-    "_name": "ScrollView",
+    "_name": "LevelList",
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
@@ -1494,26 +1728,23 @@
     },
     "_children": [
       {
-        "__id__": 59
-      },
-      {
-        "__id__": 77
+        "__id__": 69
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 95
+        "__id__": 81
       },
       {
-        "__id__": 97
+        "__id__": 83
       },
       {
-        "__id__": 74
+        "__id__": 85
       }
     ],
     "_prefab": {
-      "__id__": 99
+      "__id__": 87
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -1546,89 +1777,36 @@
   },
   {
     "__type__": "cc.Node",
-    "_name": "scrollBar",
+    "_name": "view",
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 58
+      "__id__": 68
     },
     "_children": [
-      {
-        "__id__": 60
-      }
-    ],
-    "_active": true,
-    "_components": [
-      {
-        "__id__": 66
-      },
-      {
-        "__id__": 68
-      },
       {
         "__id__": 70
-      },
-      {
-        "__id__": 72
       }
     ],
-    "_prefab": {
-      "__id__": 94
-    },
-    "_lpos": {
-      "__type__": "cc.Vec3",
-      "x": 450,
-      "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": 1073741824,
-    "_euler": {
-      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 0,
-      "z": 0
-    },
-    "_id": ""
-  },
-  {
-    "__type__": "cc.Node",
-    "_name": "bar",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "_parent": {
-      "__id__": 59
-    },
-    "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 61
+        "__id__": 74
       },
       {
-        "__id__": 63
+        "__id__": 76
+      },
+      {
+        "__id__": 78
       }
     ],
     "_prefab": {
-      "__id__": 65
+      "__id__": 80
     },
     "_lpos": {
       "__type__": "cc.Vec3",
-      "x": -11,
-      "y": -31.25,
+      "x": 0,
+      "y": 0,
       "z": 0
     },
     "_lrot": {
@@ -1654,282 +1832,23 @@
     },
     "_id": ""
   },
-  {
-    "__type__": "cc.UITransform",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 60
-    },
-    "_enabled": true,
-    "__prefab": {
-      "__id__": 62
-    },
-    "_contentSize": {
-      "__type__": "cc.Size",
-      "width": 10,
-      "height": 156.25
-    },
-    "_anchorPoint": {
-      "__type__": "cc.Vec2",
-      "x": 0,
-      "y": 0
-    },
-    "_id": ""
-  },
-  {
-    "__type__": "cc.CompPrefabInfo",
-    "fileId": "8crf8UdBZObqHE3nfdJJsr"
-  },
-  {
-    "__type__": "cc.Sprite",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 60
-    },
-    "_enabled": true,
-    "__prefab": {
-      "__id__": 64
-    },
-    "_customMaterial": null,
-    "_srcBlendFactor": 2,
-    "_dstBlendFactor": 4,
-    "_color": {
-      "__type__": "cc.Color",
-      "r": 255,
-      "g": 255,
-      "b": 255,
-      "a": 255
-    },
-    "_spriteFrame": {
-      "__uuid__": "afc47931-f066-46b0-90be-9fe61f213428@f9941",
-      "__expectedType__": "cc.SpriteFrame"
-    },
-    "_type": 1,
-    "_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": "6bPZX0pttJpZKxbVD2ywhS"
-  },
-  {
-    "__type__": "cc.PrefabInfo",
-    "root": {
-      "__id__": 1
-    },
-    "asset": {
-      "__id__": 0
-    },
-    "fileId": "a2mXZiKl1HvKsiAc6JMcSk",
-    "instance": null,
-    "targetOverrides": null,
-    "nestedPrefabInstanceRoots": null
-  },
-  {
-    "__type__": "cc.UITransform",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 59
-    },
-    "_enabled": true,
-    "__prefab": {
-      "__id__": 67
-    },
-    "_contentSize": {
-      "__type__": "cc.Size",
-      "width": 12,
-      "height": 1300
-    },
-    "_anchorPoint": {
-      "__type__": "cc.Vec2",
-      "x": 1,
-      "y": 0.5
-    },
-    "_id": ""
-  },
-  {
-    "__type__": "cc.CompPrefabInfo",
-    "fileId": "f4JGjXojVPyK2Qpwagyun5"
-  },
-  {
-    "__type__": "cc.Sprite",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 59
-    },
-    "_enabled": true,
-    "__prefab": {
-      "__id__": 69
-    },
-    "_customMaterial": null,
-    "_srcBlendFactor": 2,
-    "_dstBlendFactor": 4,
-    "_color": {
-      "__type__": "cc.Color",
-      "r": 255,
-      "g": 255,
-      "b": 255,
-      "a": 255
-    },
-    "_spriteFrame": {
-      "__uuid__": "ffb88a8f-af62-48f4-8f1d-3cb606443a43@f9941",
-      "__expectedType__": "cc.SpriteFrame"
-    },
-    "_type": 1,
-    "_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": "4aQ2YWqodMOahmenBBbkcS"
-  },
-  {
-    "__type__": "cc.Widget",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 59
-    },
-    "_enabled": true,
-    "__prefab": {
-      "__id__": 71
-    },
-    "_alignFlags": 37,
-    "_target": null,
-    "_left": 0,
-    "_right": 0,
-    "_top": 0,
-    "_bottom": 0,
-    "_horizontalCenter": 0,
-    "_verticalCenter": 0,
-    "_isAbsLeft": true,
-    "_isAbsRight": true,
-    "_isAbsTop": true,
-    "_isAbsBottom": true,
-    "_isAbsHorizontalCenter": true,
-    "_isAbsVerticalCenter": true,
-    "_originalWidth": 0,
-    "_originalHeight": 250,
-    "_alignMode": 1,
-    "_lockFlags": 0,
-    "_id": ""
-  },
-  {
-    "__type__": "cc.CompPrefabInfo",
-    "fileId": "6btYFPmhpFP6rjXGELRA1E"
-  },
-  {
-    "__type__": "cc.ScrollBar",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 59
-    },
-    "_enabled": true,
-    "__prefab": {
-      "__id__": 73
-    },
-    "_scrollView": {
-      "__id__": 74
-    },
-    "_handle": {
-      "__id__": 63
-    },
-    "_direction": 1,
-    "_enableAutoHide": false,
-    "_autoHideTime": 1,
-    "_id": ""
-  },
-  {
-    "__type__": "cc.CompPrefabInfo",
-    "fileId": "adKSsRfQZBLpOleAIa4Xqz"
-  },
-  {
-    "__type__": "cc.ScrollView",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 58
-    },
-    "_enabled": true,
-    "__prefab": {
-      "__id__": 75
-    },
-    "bounceDuration": 0.23,
-    "brake": 0.75,
-    "elastic": true,
-    "inertia": true,
-    "horizontal": false,
-    "vertical": true,
-    "cancelInnerEvents": true,
-    "scrollEvents": [],
-    "_content": {
-      "__id__": 76
-    },
-    "_horizontalScrollBar": null,
-    "_verticalScrollBar": {
-      "__id__": 72
-    },
-    "_id": ""
-  },
-  {
-    "__type__": "cc.CompPrefabInfo",
-    "fileId": "d46RD62t5P6q0jNwxD4k4I"
-  },
   {
     "__type__": "cc.Node",
     "_name": "content",
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 77
+      "__id__": 69
     },
-    "_children": [
-      {
-        "__id__": 85
-      }
-    ],
+    "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 91
+        "__id__": 71
       }
     ],
     "_prefab": {
-      "__id__": 93
+      "__id__": 73
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -1961,73 +1880,57 @@
     "_id": ""
   },
   {
-    "__type__": "cc.Node",
-    "_name": "view",
+    "__type__": "cc.UITransform",
+    "_name": "",
     "_objFlags": 0,
     "__editorExtras__": {},
-    "_parent": {
-      "__id__": 58
+    "node": {
+      "__id__": 70
     },
-    "_children": [
-      {
-        "__id__": 76
-      }
-    ],
-    "_active": true,
-    "_components": [
-      {
-        "__id__": 78
-      },
-      {
-        "__id__": 80
-      },
-      {
-        "__id__": 82
-      }
-    ],
-    "_prefab": {
-      "__id__": 84
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 72
     },
-    "_lpos": {
-      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 0,
-      "z": 0
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 900,
+      "height": 1300
     },
-    "_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": 1073741824,
-    "_euler": {
-      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 0,
-      "z": 0
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 1
     },
     "_id": ""
   },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "c7c/Ka9cxIR6kgD/sdPKC1"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "3bstd5zsZMyJTU1JWWQOcz",
+    "instance": null,
+    "targetOverrides": null,
+    "nestedPrefabInstanceRoots": null
+  },
   {
     "__type__": "cc.UITransform",
     "_name": "",
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 77
+      "__id__": 69
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 79
+      "__id__": 75
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -2051,11 +1954,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 77
+      "__id__": 69
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 81
+      "__id__": 77
     },
     "_type": 0,
     "_inverted": false,
@@ -2073,11 +1976,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 77
+      "__id__": 69
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 83
+      "__id__": 79
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -2126,230 +2029,17 @@
     "targetOverrides": null,
     "nestedPrefabInstanceRoots": null
   },
-  {
-    "__type__": "cc.Node",
-    "_name": "item",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "_parent": {
-      "__id__": 76
-    },
-    "_children": [],
-    "_active": true,
-    "_components": [
-      {
-        "__id__": 86
-      },
-      {
-        "__id__": 88
-      }
-    ],
-    "_prefab": {
-      "__id__": 90
-    },
-    "_lpos": {
-      "__type__": "cc.Vec3",
-      "x": -102,
-      "y": -10.15,
-      "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": 1073741824,
-    "_euler": {
-      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 0,
-      "z": 0
-    },
-    "_id": ""
-  },
   {
     "__type__": "cc.UITransform",
     "_name": "",
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 85
+      "__id__": 68
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 87
-    },
-    "_contentSize": {
-      "__type__": "cc.Size",
-      "width": 131.328125,
-      "height": 25.2
-    },
-    "_anchorPoint": {
-      "__type__": "cc.Vec2",
-      "x": 0,
-      "y": 1
-    },
-    "_id": ""
-  },
-  {
-    "__type__": "cc.CompPrefabInfo",
-    "fileId": "f9bVxbWEZErqHcDgJWdNOH"
-  },
-  {
-    "__type__": "cc.Label",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 85
-    },
-    "_enabled": true,
-    "__prefab": {
-      "__id__": 89
-    },
-    "_customMaterial": null,
-    "_srcBlendFactor": 2,
-    "_dstBlendFactor": 4,
-    "_color": {
-      "__type__": "cc.Color",
-      "r": 0,
-      "g": 0,
-      "b": 0,
-      "a": 255
-    },
-    "_string": "ScrollView content",
-    "_horizontalAlign": 0,
-    "_verticalAlign": 0,
-    "_actualFontSize": 16,
-    "_fontSize": 16,
-    "_fontFamily": "Arial",
-    "_lineHeight": 20,
-    "_overflow": 0,
-    "_enableWrapText": true,
-    "_font": null,
-    "_isSystemFontUsed": true,
-    "_spacingX": 0,
-    "_isItalic": false,
-    "_isBold": false,
-    "_isUnderline": false,
-    "_underlineHeight": 2,
-    "_cacheMode": 0,
-    "_enableOutline": false,
-    "_outlineColor": {
-      "__type__": "cc.Color",
-      "r": 0,
-      "g": 0,
-      "b": 0,
-      "a": 255
-    },
-    "_outlineWidth": 2,
-    "_enableShadow": false,
-    "_shadowColor": {
-      "__type__": "cc.Color",
-      "r": 0,
-      "g": 0,
-      "b": 0,
-      "a": 255
-    },
-    "_shadowOffset": {
-      "__type__": "cc.Vec2",
-      "x": 2,
-      "y": 2
-    },
-    "_shadowBlur": 2,
-    "_id": ""
-  },
-  {
-    "__type__": "cc.CompPrefabInfo",
-    "fileId": "e32TqyHlpMkb7gbCVsi2bt"
-  },
-  {
-    "__type__": "cc.PrefabInfo",
-    "root": {
-      "__id__": 1
-    },
-    "asset": {
-      "__id__": 0
-    },
-    "fileId": "dc99MyDlJCGJ6EVNsWope7",
-    "instance": null,
-    "targetOverrides": null,
-    "nestedPrefabInstanceRoots": null
-  },
-  {
-    "__type__": "cc.UITransform",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 76
-    },
-    "_enabled": true,
-    "__prefab": {
-      "__id__": 92
-    },
-    "_contentSize": {
-      "__type__": "cc.Size",
-      "width": 900,
-      "height": 1300
-    },
-    "_anchorPoint": {
-      "__type__": "cc.Vec2",
-      "x": 0.5,
-      "y": 1
-    },
-    "_id": ""
-  },
-  {
-    "__type__": "cc.CompPrefabInfo",
-    "fileId": "c7c/Ka9cxIR6kgD/sdPKC1"
-  },
-  {
-    "__type__": "cc.PrefabInfo",
-    "root": {
-      "__id__": 1
-    },
-    "asset": {
-      "__id__": 0
-    },
-    "fileId": "3bstd5zsZMyJTU1JWWQOcz",
-    "instance": null,
-    "targetOverrides": null,
-    "nestedPrefabInstanceRoots": null
-  },
-  {
-    "__type__": "cc.PrefabInfo",
-    "root": {
-      "__id__": 1
-    },
-    "asset": {
-      "__id__": 0
-    },
-    "fileId": "5f7D4kuZ5DNJH3+TgcykSj",
-    "instance": null,
-    "targetOverrides": null,
-    "nestedPrefabInstanceRoots": null
-  },
-  {
-    "__type__": "cc.UITransform",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 58
-    },
-    "_enabled": true,
-    "__prefab": {
-      "__id__": 96
+      "__id__": 82
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -2373,11 +2063,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 58
+      "__id__": 68
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 98
+      "__id__": 84
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -2412,6 +2102,37 @@
     "__type__": "cc.CompPrefabInfo",
     "fileId": "c3taCLJuBMuajdMJYhNc31"
   },
+  {
+    "__type__": "cc.ScrollView",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 68
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 86
+    },
+    "bounceDuration": 0.23,
+    "brake": 0.75,
+    "elastic": true,
+    "inertia": true,
+    "horizontal": true,
+    "vertical": false,
+    "cancelInnerEvents": true,
+    "scrollEvents": [],
+    "_content": {
+      "__id__": 70
+    },
+    "_horizontalScrollBar": null,
+    "_verticalScrollBar": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "d46RD62t5P6q0jNwxD4k4I"
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {
@@ -2434,27 +2155,30 @@
       "__id__": 1
     },
     "_children": [
+      {
+        "__id__": 89
+      },
+      {
+        "__id__": 95
+      },
       {
         "__id__": 101
-      },
-      {
-        "__id__": 107
-      },
-      {
-        "__id__": 113
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 127
+        "__id__": 115
       },
       {
-        "__id__": 129
+        "__id__": 117
+      },
+      {
+        "__id__": 119
       }
     ],
     "_prefab": {
-      "__id__": 131
+      "__id__": 121
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -2491,20 +2215,20 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 100
+      "__id__": 88
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 102
+        "__id__": 90
       },
       {
-        "__id__": 104
+        "__id__": 92
       }
     ],
     "_prefab": {
-      "__id__": 106
+      "__id__": 94
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -2541,11 +2265,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 101
+      "__id__": 89
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 103
+      "__id__": 91
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -2569,11 +2293,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 101
+      "__id__": 89
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 105
+      "__id__": 93
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -2624,20 +2348,20 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 100
+      "__id__": 88
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 108
+        "__id__": 96
       },
       {
-        "__id__": 110
+        "__id__": 98
       }
     ],
     "_prefab": {
-      "__id__": 112
+      "__id__": 100
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -2674,11 +2398,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 107
+      "__id__": 95
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 109
+      "__id__": 97
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -2702,11 +2426,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 107
+      "__id__": 95
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 111
+      "__id__": 99
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -2783,27 +2507,27 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 100
+      "__id__": 88
     },
     "_children": [
       {
-        "__id__": 114
+        "__id__": 102
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 120
+        "__id__": 108
       },
       {
-        "__id__": 122
+        "__id__": 110
       },
       {
-        "__id__": 124
+        "__id__": 112
       }
     ],
     "_prefab": {
-      "__id__": 126
+      "__id__": 114
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -2840,20 +2564,20 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 113
+      "__id__": 101
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 115
+        "__id__": 103
       },
       {
-        "__id__": 117
+        "__id__": 105
       }
     ],
     "_prefab": {
-      "__id__": 119
+      "__id__": 107
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -2890,11 +2614,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 114
+      "__id__": 102
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 116
+      "__id__": 104
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -2918,11 +2642,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 114
+      "__id__": 102
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 118
+      "__id__": 106
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -2976,11 +2700,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 113
+      "__id__": 101
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 121
+      "__id__": 109
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -3004,11 +2728,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 113
+      "__id__": 101
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 123
+      "__id__": 111
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -3049,11 +2773,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 113
+      "__id__": 101
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 125
+      "__id__": 113
     },
     "clickEvents": [],
     "_interactable": true,
@@ -3096,12 +2820,12 @@
     "_duration": 0.1,
     "_zoomScale": 1.2,
     "_target": {
-      "__id__": 113
+      "__id__": 101
     },
     "checkEvents": [],
     "_isChecked": true,
     "_checkMark": {
-      "__id__": 117
+      "__id__": 105
     },
     "_id": ""
   },
@@ -3128,11 +2852,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 100
+      "__id__": 88
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 128
+      "__id__": 116
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -3156,11 +2880,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 100
+      "__id__": 88
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 130
+      "__id__": 118
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -3195,195 +2919,17 @@
     "__type__": "cc.CompPrefabInfo",
     "fileId": "69vNFRzsRO2r+s1ePspkyp"
   },
-  {
-    "__type__": "cc.PrefabInfo",
-    "root": {
-      "__id__": 1
-    },
-    "asset": {
-      "__id__": 0
-    },
-    "fileId": "b34mWMqo5FlrJeymITyURt",
-    "instance": null,
-    "targetOverrides": null,
-    "nestedPrefabInstanceRoots": null
-  },
-  {
-    "__type__": "cc.Node",
-    "_name": "IconSetting",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "_parent": {
-      "__id__": 1
-    },
-    "_children": [],
-    "_active": true,
-    "_components": [
-      {
-        "__id__": 133
-      },
-      {
-        "__id__": 135
-      },
-      {
-        "__id__": 137
-      },
-      {
-        "__id__": 139
-      }
-    ],
-    "_prefab": {
-      "__id__": 141
-    },
-    "_lpos": {
-      "__type__": "cc.Vec3",
-      "x": -410.938,
-      "y": 942.514,
-      "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": 1073741824,
-    "_euler": {
-      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 0,
-      "z": 0
-    },
-    "_id": ""
-  },
-  {
-    "__type__": "cc.UITransform",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 132
-    },
-    "_enabled": true,
-    "__prefab": {
-      "__id__": 134
-    },
-    "_contentSize": {
-      "__type__": "cc.Size",
-      "width": 108,
-      "height": 108
-    },
-    "_anchorPoint": {
-      "__type__": "cc.Vec2",
-      "x": 0.5,
-      "y": 0.5
-    },
-    "_id": ""
-  },
-  {
-    "__type__": "cc.CompPrefabInfo",
-    "fileId": "74C+oVkAVF+qP0KmO0vO9s"
-  },
-  {
-    "__type__": "cc.Sprite",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 132
-    },
-    "_enabled": true,
-    "__prefab": {
-      "__id__": 136
-    },
-    "_customMaterial": null,
-    "_srcBlendFactor": 2,
-    "_dstBlendFactor": 4,
-    "_color": {
-      "__type__": "cc.Color",
-      "r": 255,
-      "g": 255,
-      "b": 255,
-      "a": 255
-    },
-    "_spriteFrame": {
-      "__uuid__": "9c27734d-854f-476b-961d-d1b92c75f8c0@f9941",
-      "__expectedType__": "cc.SpriteFrame"
-    },
-    "_type": 0,
-    "_fillType": 0,
-    "_sizeMode": 1,
-    "_fillCenter": {
-      "__type__": "cc.Vec2",
-      "x": 0,
-      "y": 0
-    },
-    "_fillStart": 0,
-    "_fillRange": 0,
-    "_isTrimmedMode": true,
-    "_useGrayscale": false,
-    "_atlas": null,
-    "_id": ""
-  },
-  {
-    "__type__": "cc.CompPrefabInfo",
-    "fileId": "50F2n9/idMcb4kNVxsjCrO"
-  },
-  {
-    "__type__": "cc.Widget",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 132
-    },
-    "_enabled": true,
-    "__prefab": {
-      "__id__": 138
-    },
-    "_alignFlags": 9,
-    "_target": null,
-    "_left": -414.938,
-    "_right": 0,
-    "_top": -946.514,
-    "_bottom": 0,
-    "_horizontalCenter": 0,
-    "_verticalCenter": 0,
-    "_isAbsLeft": true,
-    "_isAbsRight": true,
-    "_isAbsTop": true,
-    "_isAbsBottom": true,
-    "_isAbsHorizontalCenter": true,
-    "_isAbsVerticalCenter": true,
-    "_originalWidth": 0,
-    "_originalHeight": 0,
-    "_alignMode": 2,
-    "_lockFlags": 0,
-    "_id": ""
-  },
-  {
-    "__type__": "cc.CompPrefabInfo",
-    "fileId": "aeoBSE1olAMZgVzcdHBpmS"
-  },
   {
     "__type__": "cc.Button",
     "_name": "",
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 132
+      "__id__": 88
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 140
+      "__id__": 120
     },
     "clickEvents": [],
     "_interactable": true,
@@ -3427,7 +2973,7 @@
   },
   {
     "__type__": "cc.CompPrefabInfo",
-    "fileId": "82tUBmfqVOgJCAwJwK5EDe"
+    "fileId": "00XHdx8z5Cu7Eu9UXmyV/F"
   },
   {
     "__type__": "cc.PrefabInfo",
@@ -3437,7 +2983,7 @@
     "asset": {
       "__id__": 0
     },
-    "fileId": "ac1NMltcFCHYLwVCCxc8qC",
+    "fileId": "b34mWMqo5FlrJeymITyURt",
     "instance": null,
     "targetOverrides": null,
     "nestedPrefabInstanceRoots": null
@@ -3452,7 +2998,19 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 143
+      "__id__": 123
+    },
+    "backBtn": {
+      "__id__": 10
+    },
+    "scrollView": {
+      "__id__": 68
+    },
+    "listContent": {
+      "__id__": 70
+    },
+    "listTemplate": {
+      "__id__": 88
     },
     "_id": ""
   },
@@ -3470,7 +3028,7 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 145
+      "__id__": 125
     },
     "_contentSize": {
       "__type__": "cc.Size",
diff --git a/assets/prefabs/PageWriteLevels.ts b/assets/prefabs/PageWriteLevels.ts
index 9bd70ac..70f90b0 100644
--- a/assets/prefabs/PageWriteLevels.ts
+++ b/assets/prefabs/PageWriteLevels.ts
@@ -1,63 +1,373 @@
-import { _decorator, Node, Button } from 'cc';
+import { _decorator, Node, Button, Sprite, Label, Toggle, ScrollView, instantiate, UITransform, Vec2, EventTouch } from 'cc';
 import { BaseView } from 'db://assets/scripts/core/BaseView';
 import { ViewManager } from 'db://assets/scripts/core/ViewManager';
+import { LevelDataManager } from 'db://assets/scripts/utils/LevelDataManager';
 const { ccclass, property } = _decorator;
 
 /**
- * 写关卡/分享页面组件
- * 用于展示用户已通关的关卡列表，选择关卡进行分享
+ * 布局配置
+ * 基于实际 prefab 尺寸计算：
+ *   ScrollView / view 宽 900，高 1300
+ *   ListTpl (item) 宽 300，高 400
+ *
+ * 水平居中：2 × 300 + 1 × 40 = 640, padding_left = (900 - 640) / 2 = 130
+ * 垂直居中：3 × 400 + 2 × 25 = 1250, padding_top = (1300 - 1250) / 2 = 25
  */
+const LAYOUT_CONFIG = {
+    COLS: 2,
+    ROWS: 3,
+    ITEM_WIDTH: 300,
+    ITEM_HEIGHT: 400,
+    SPACING_X: 40,
+    SPACING_Y: 25,
+    PADDING_LEFT: 130,
+    PADDING_TOP: 25,
+    VIEW_WIDTH: 900,
+    VIEW_HEIGHT: 1300,
+};
+
+const PAGE_CONFIG = {
+    /** 滑动距离超过页宽的这个比例就翻页 */
+    SWIPE_THRESHOLD: 0.2,
+    /** 快速滑动速度阈值（px/s），超过此值即使距离不够也翻页 */
+    VELOCITY_THRESHOLD: 500,
+    /** 翻页动画时长（秒） */
+    SNAP_DURATION: 0.3,
+};
+
 @ccclass('PageWriteLevels')
 export class PageWriteLevels extends BaseView {
     @property({ type: Node, tooltip: '返回按钮' })
     backBtn: Node | null = null;
 
-    /**
-     * 页面首次加载时调用
-     */
+    @property({ type: Node, tooltip: 'ScrollView可视区域节点' })
+    scrollView: Node | null = null;
+
+    @property({ type: Node, tooltip: '列表content节点' })
+    listContent: Node | null = null;
+
+    @property({ type: Node, tooltip: '列表项模板' })
+    listTemplate: Node | null = null;
+
+    private _selectedIndices: Set<number> = new Set();
+    private _currentPage: number = 0;
+    private _totalPages: number = 0;
+    private _levelCount: number = 0;
+    private readonly ITEMS_PER_PAGE = LAYOUT_CONFIG.ROWS * LAYOUT_CONFIG.COLS;
+    private _itemNodes: Node[] = [];
+    private _scrollViewComp: ScrollView | null = null;
+    private _touchStartOffsetX: number = 0;
+    private _touchStartTime: number = 0;
+
+    /** 缓存 view 节点的 UITransform，避免每次 _updateContentSize 重复查找 */
+    private _viewTransform: UITransform | null = null;
+
     onViewLoad(): void {
         console.log('[PageWriteLevels] onViewLoad');
         this._initButtons();
+        this._initScrollView();
     }
 
-    /**
-     * 初始化按钮事件
-     */
     private _initButtons(): void {
         if (this.backBtn) {
             this.backBtn.on(Button.EventType.CLICK, this._onBackClick, this);
         }
     }
 
+    private _initScrollView(): void {
+        if (this.scrollView) {
+            this._scrollViewComp = this.scrollView.getComponent(ScrollView);
+
+            if (this._scrollViewComp) {
+                this._scrollViewComp.inertia = false;
+            }
+
+            this.scrollView.on(Node.EventType.TOUCH_START, this._onTouchStart, this);
+            this.scrollView.on(Node.EventType.TOUCH_END, this._onTouchEnd, this);
+            this.scrollView.on(Node.EventType.TOUCH_CANCEL, this._onTouchEnd, this);
+
+            // 缓存 view 的 UITransform
+            const viewNode = this.scrollView.getChildByName('view');
+            if (viewNode) {
+                this._viewTransform = viewNode.getComponent(UITransform);
+            }
+        }
+
+        // content anchor 设为 (0, 1) 左上角，方便位置计算且符合 ScrollView 标准用法
+        if (this.listContent) {
+            const contentTransform = this.listContent.getComponent(UITransform);
+            if (contentTransform) {
+                contentTransform.setAnchorPoint(0, 1);
+            }
+        }
+    }
+
+    private _onTouchStart(event: EventTouch): void {
+        if (!this._scrollViewComp) return;
+        this._touchStartOffsetX = this._scrollViewComp.getScrollOffset().x;
+        this._touchStartTime = Date.now();
+    }
+
     /**
-     * 返回按钮点击回调
+     * 触摸结束：根据滑动距离和速度决定翻页方向
      */
+    private _onTouchEnd(event: EventTouch): void {
+        if (!this._scrollViewComp || this._totalPages <= 1) return;
+
+        const currentOffsetX = this._scrollViewComp.getScrollOffset().x;
+        const deltaX = currentOffsetX - this._touchStartOffsetX;
+        const elapsedTime = (Date.now() - this._touchStartTime) / 1000;
+        const velocity = elapsedTime > 0 ? Math.abs(deltaX) / elapsedTime : 0;
+
+        let targetPage = this._currentPage;
+        const swipeDistance = Math.abs(deltaX);
+        const threshold = LAYOUT_CONFIG.VIEW_WIDTH * PAGE_CONFIG.SWIPE_THRESHOLD;
+
+        if (swipeDistance > threshold || velocity > PAGE_CONFIG.VELOCITY_THRESHOLD) {
+            if (deltaX < 0) {
+                targetPage = Math.min(this._currentPage + 1, this._totalPages - 1);
+            } else if (deltaX > 0) {
+                targetPage = Math.max(this._currentPage - 1, 0);
+            }
+        }
+
+        this._scrollToPage(targetPage);
+    }
+
+    onViewShow(): void {
+        console.log('[PageWriteLevels] onViewShow');
+        this._initLevelList();
+    }
+
+    private _initLevelList(): void {
+        this._clearList();
+
+        this._levelCount = LevelDataManager.instance.getLevelCount();
+        console.log('[PageWriteLevels] 关卡总数:', this._levelCount);
+
+        if (this._levelCount === 0) {
+            console.warn('[PageWriteLevels] 没有关卡数据');
+            return;
+        }
+
+        this._totalPages = Math.ceil(this._levelCount / this.ITEMS_PER_PAGE);
+        console.log('[PageWriteLevels] 总页数:', this._totalPages);
+
+        this._updateContentSize();
+        this._createItems();
+
+        if (this._scrollViewComp && this._totalPages > 0) {
+            this._scrollToPage(0, false);
+        }
+    }
+
+    private _clearList(): void {
+        for (const node of this._itemNodes) {
+            if (node && node.isValid) {
+                node.destroy();
+            }
+        }
+        this._itemNodes = [];
+        this._selectedIndices.clear();
+    }
+
+    private _updateContentSize(): void {
+        if (!this.listContent) return;
+
+        const contentTransform = this.listContent.getComponent(UITransform);
+        if (!contentTransform) return;
+
+        const totalWidth = this._totalPages * LAYOUT_CONFIG.VIEW_WIDTH;
+        contentTransform.setContentSize(totalWidth, LAYOUT_CONFIG.VIEW_HEIGHT);
+
+        // anchor=(0,1)，将 content 左上角对齐到 view 左上角
+        if (this._viewTransform) {
+            const viewWidth = this._viewTransform.contentSize.width;
+            const viewHeight = this._viewTransform.contentSize.height;
+            this.listContent.setPosition(-viewWidth / 2, viewHeight / 2, 0);
+        }
+    }
+
+    private _createItems(): void {
+        if (!this.listTemplate || !this.listContent) return;
+
+        for (let i = 0; i < this._levelCount; i++) {
+            const itemNode = this._createItem(i);
+            if (itemNode) {
+                this.listContent.addChild(itemNode);
+                this._itemNodes.push(itemNode);
+                this._loadAndRefreshCover(itemNode, i);
+            }
+        }
+    }
+
+    private _createItem(index: number): Node | null {
+        if (!this.listTemplate) return null;
+
+        const item = instantiate(this.listTemplate);
+        item.active = true;
+        item.name = `item_${index}`;
+
+        const pos = this._calculateItemPosition(index);
+        item.setPosition(pos.x, pos.y, 0);
+
+        // 设置默认名称和选中状态（封面由 _loadAndRefreshCover 异步填充）
+        this._initItemState(item, index);
+        this._setupItemClick(item, index);
+
+        return item;
+    }
+
+    /**
+     * content anchor=(0,1)，原点在左上角，x 正向右，y 负向下
+     */
+    private _calculateItemPosition(index: number): { x: number, y: number } {
+        const pageIndex = Math.floor(index / this.ITEMS_PER_PAGE);
+        const localIndex = index % this.ITEMS_PER_PAGE;
+        const col = localIndex % LAYOUT_CONFIG.COLS;
+        const row = Math.floor(localIndex / LAYOUT_CONFIG.COLS);
+
+        const x = pageIndex * LAYOUT_CONFIG.VIEW_WIDTH
+            + LAYOUT_CONFIG.PADDING_LEFT
+            + col * (LAYOUT_CONFIG.ITEM_WIDTH + LAYOUT_CONFIG.SPACING_X)
+            + LAYOUT_CONFIG.ITEM_WIDTH / 2;
+
+        const y = -(LAYOUT_CONFIG.PADDING_TOP
+            + row * (LAYOUT_CONFIG.ITEM_HEIGHT + LAYOUT_CONFIG.SPACING_Y)
+            + LAYOUT_CONFIG.ITEM_HEIGHT / 2);
+
+        return { x, y };
+    }
+
+    /**
+     * 初始化 item 的默认名称和选中状态（不设置封面，由异步加载负责）
+     */
+    private _initItemState(item: Node, index: number): void {
+        const levelName = item.getChildByName('LevelName');
+        if (levelName) {
+            const label = levelName.getComponent(Label);
+            if (label) {
+                label.string = `第${index + 1}关`;
+            }
+        }
+
+        const isSelected = item.getChildByName('IsSelected');
+        if (isSelected) {
+            const toggle = isSelected.getComponent(Toggle);
+            if (toggle) {
+                toggle.isChecked = this._selectedIndices.has(index);
+            }
+            const checkmark = isSelected.getChildByName('Checkmark');
+            if (checkmark) {
+                checkmark.active = this._selectedIndices.has(index);
+            }
+        }
+    }
+
+    /**
+     * 异步加载关卡资源并刷新封面图和名称。
+     * LevelDataManager 采用懒加载，初始化时只加载了第一关图片，
+     * 其余关卡通过 ensureLevelReady 按需加载。
+     */
+    private async _loadAndRefreshCover(item: Node, index: number): Promise<void> {
+        const config = await LevelDataManager.instance.ensureLevelReady(index);
+        if (!config || !item.isValid) return;
+
+        const levelCover = item.getChildByName('LevelCover');
+        if (levelCover) {
+            const sprite = levelCover.getComponent(Sprite);
+            if (sprite && config.spriteFrame) {
+                sprite.spriteFrame = config.spriteFrame;
+            }
+        }
+
+        const levelName = item.getChildByName('LevelName');
+        if (levelName) {
+            const label = levelName.getComponent(Label);
+            if (label) {
+                label.string = config.name;
+            }
+        }
+    }
+
+    private _setupItemClick(item: Node, index: number): void {
+        const isSelected = item.getChildByName('IsSelected');
+        if (isSelected) {
+            const toggle = isSelected.getComponent(Toggle);
+            if (toggle) {
+                toggle.node.on('toggle', () => {
+                    this._onItemToggle(index, toggle.isChecked);
+                }, this);
+            }
+        }
+
+        const button = item.getComponent(Button);
+        if (button) {
+            button.node.on(Button.EventType.CLICK, () => {
+                const isCurrentlySelected = this._selectedIndices.has(index);
+                this._onItemToggle(index, !isCurrentlySelected);
+            }, this);
+        }
+    }
+
+    /**
+     * 滚动/吸附到指定页
+     */
+    private _scrollToPage(pageIndex: number, animated: boolean = true): void {
+        if (!this._scrollViewComp) return;
+
+        this._currentPage = pageIndex;
+        const offsetX = pageIndex * LAYOUT_CONFIG.VIEW_WIDTH;
+        this._scrollViewComp.scrollToOffset(
+            new Vec2(offsetX, 0),
+            animated ? PAGE_CONFIG.SNAP_DURATION : 0
+        );
+    }
+
+    private _onItemToggle(index: number, selected: boolean): void {
+        if (selected) {
+            this._selectedIndices.add(index);
+        } else {
+            this._selectedIndices.delete(index);
+        }
+
+        console.log('[PageWriteLevels] item切换选中:', index, selected);
+
+        const item = this._itemNodes[index];
+        if (item) {
+            const isSelected = item.getChildByName('IsSelected');
+            if (isSelected) {
+                const toggle = isSelected.getComponent(Toggle);
+                if (toggle) {
+                    toggle.isChecked = selected;
+                }
+                const checkmark = isSelected.getChildByName('Checkmark');
+                if (checkmark) {
+                    checkmark.active = selected;
+                }
+            }
+        }
+    }
+
     private _onBackClick(): void {
         console.log('[PageWriteLevels] 返回按钮点击');
         ViewManager.instance.back();
     }
 
-    /**
-     * 页面每次显示时调用
-     */
-    onViewShow(): void {
-        console.log('[PageWriteLevels] onViewShow');
-    }
-
-    /**
-     * 页面隐藏时调用
-     */
     onViewHide(): void {
         console.log('[PageWriteLevels] onViewHide');
     }
 
-    /**
-     * 页面销毁时调用
-     */
     onViewDestroy(): void {
         console.log('[PageWriteLevels] onViewDestroy');
         if (this.backBtn) {
             this.backBtn.off(Button.EventType.CLICK, this._onBackClick, this);
         }
+        if (this.scrollView) {
+            this.scrollView.off(Node.EventType.TOUCH_START, this._onTouchStart, this);
+            this.scrollView.off(Node.EventType.TOUCH_END, this._onTouchEnd, this);
+            this.scrollView.off(Node.EventType.TOUCH_CANCEL, this._onTouchEnd, this);
+        }
+        this._clearList();
     }
 }