diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.css b/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.css
index b5a26ce1e2804f8d088d8d2687a4ac8144e1d86f..207fc7730c2e32c4721d04048fb6d9f8ecaecc96 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.css
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.css
@@ -15,8 +15,8 @@
 
 .text-title {
     width: 100%;
-    height: 48px;
     font-size: 25px;
+    height: 60px;
     padding: 5px;
     background-color: antiquewhite;
 }
@@ -44,12 +44,6 @@
     font-size: 25px;
 }
 
-.text-introduction {
-    width: 100%;
-    font-size: 20px;
-    margin-top: 5px;
-}
-
 .text-collect {
     width: 100%;
     font-size: 20px;
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.hml b/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.hml
index efe56cb3d33e27fb3e37ea1ca972d58c225f6d1d..1095cf0a730d57b34705e7bf0d8cbaeae59e33f1 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.hml
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.hml
@@ -17,7 +17,7 @@
     <image class="book_image" src="common/images/book.png"></image>
     <div class="content">
         <text class="text-name">{{ name }}</text>
-        <text class="text-introduction">{{ $t('strings.book_introduction') }}</text>
-        <text class="text-collect" style="color: {{ collectColor }};" onclick="childClicked">{{ collectStr }}</text>
+        <slot name="first"></slot>
+        <text class="text-collect" style="color : {{ collectColor }};" onclick="childClicked">{{ collectStr }}</text>
     </div>
 </div>
\ No newline at end of file
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.js b/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.js
index d13bda8b05a5cf5d2900f210fd3684649c08c81e..653fee5d45b5ae5f902d2c554f9294d79291e5e6 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.js
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.js
@@ -12,6 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import prompt from '@system.prompt';
 
 export default {
     data: {
@@ -26,8 +27,8 @@ export default {
             }
         }
     },
-    onInit(){
-        this.initData();
+    onInit() {
+        console.info('[JsCustomComponet] comp onInit')
     },
     initData() {
         if (this.collect) {
@@ -38,8 +39,28 @@ export default {
             this.collectColor = "blue"
         }
     },
-    childClicked () {
-        this.$emit('eventType1',{bookName: this.name})
+    clearData() {
+        this.collectStr = ""
+        this.collectColor = ""
+    },
+    onAttached() {
+        console.info('[JsCustomComponet] comp onAttached')
+    },
+    onDetached() {
+        console.info('[JsCustomComponet] comp onDetached')
+    },
+    onPageShow() {
+        this.initData();
+        console.info('[JsCustomComponet] comp onPageShow')
+    },
+    onPageHide() {
+        console.info('[JsCustomComponet] comp onPageHide')
+        this.clearData()
+    },
+    childClicked() {
+        this.$emit('eventType1', {
+            bookName: this.name
+        })
         this.initData()
     },
 }
\ No newline at end of file
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/i18n/en-US.json b/UI/JSUICustomComponent/entry/src/main/js/default/i18n/en-US.json
index 5bde4d02ac35438d0dddaa862a22b317177d2b45..98161f38c78999981c876e06d22f414509d4d51f 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/i18n/en-US.json
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/i18n/en-US.json
@@ -7,6 +7,7 @@
     "enter_shelf": "Enter collected",
     "recommend":  "Recommended today:",
     "collected_title":  "Collected:",
+    "back":  "<",
     "collected_null_tips":  "Cannot find any collected books.",
     "bookNames": [
       {
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.css b/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.css
index a4ce43ecd9fc221cfc2352d56cf942607a6f1790..49e3ce49a651a740ded9c7de5651ba6316a25d02 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.css
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.css
@@ -22,6 +22,13 @@
     padding: 10px;
 }
 
+.back {
+    font-size: 30px;
+    height: 60px;
+    padding: 5px;
+    background-color: antiquewhite;
+}
+
 .text-tips {
     width: 100%;
     font-size: 20px;
@@ -29,4 +36,10 @@
     color: gray;
     text-align: center;
     margin-top: 50px;
+}
+
+.text-introduction {
+    width: 100%;
+    font-size: 20px;
+    margin-top: 5px;
 }
\ No newline at end of file
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.hml b/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.hml
index 036fcf51a079d69d4eadae6efa92e24b39805ed7..32438671ed3c2893cae3254430aa7d1b93677a05 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.hml
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.hml
@@ -15,10 +15,15 @@
 
 <element name='comp' src='../../common/component/comp.hml'></element>
 <div class="container">
-    <text class="text-title" onclick="childClicked">{{ $t('strings.collected_title') }}</text>
-    <list scrolleffect="no" if="{{ !showTips }}">>
+    <div style="flex-direction : row;" onclick="back">
+        <text class="back">{{ $t('strings.back') }}</text>
+        <text class="text-title">{{ $t('strings.collected_title') }}</text>
+    </div>
+    <list scrolleffect="no" if="{{ ! showTips }}">>
         <list-item clickeffect="false" for="{{ bookNames }}">
-            <comp @event-type1="textClicked" name="{{ $item.name }}" collect="{{ $item.collect }}"></comp>
+            <comp @event-type1="textClicked" name="{{ $item.name }}" collect="{{ $item.collect }}">
+                <text class="text-introduction" slot="first">{{ $t('strings.book_introduction') }}</text>
+            </comp>
         </list-item>
     </list>
     <text class="text-tips" if="{{ showTips }}">{{ $t('strings.collected_null_tips') }}</text>
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.js b/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.js
index f0db74de5cdca908bd5d9c6ddc7ac613b20f7c79..75fb70c1959bcb0218667bba251983d507f1ab88 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.js
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.js
@@ -12,6 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import router from '@system.router';
 
 export default {
     data: {
@@ -22,5 +23,8 @@ export default {
         if(JSON.stringify(this.bookNames).length<=2){
             this.showTips = true
         }
+    },
+    back: function(){
+        router.back()
     }
 }
\ No newline at end of file
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.css b/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.css
index 88d36216f4188717e924c63bb35518a4a0198763..ebb8b1e238aebaf79126657654b007cb18629583 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.css
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.css
@@ -19,21 +19,25 @@
     width: 100%;
     flex-direction: column;
     height: 100%;
-    padding: 10px;
+    padding: 5px;
     align-items: flex-start;
 }
 
 .button {
-    margin: 10px;
     font-size: 20px;
-    padding: 5px;
     text-color: white;
     width: 80%;
-    height: 48px;
+    height: 65px;
 }
 
 .div-button {
     width: 100%;
     flex-direction: column;
     align-items: center;
+}
+
+.text-introduction {
+    width: 100%;
+    font-size: 20px;
+    margin-top: 5px;
 }
\ No newline at end of file
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.hml b/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.hml
index 66e2e739bc59241457814e8ae599697567fa52de..defef28a22e6d7cfdfc45cd018204d2f179a96fb 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.hml
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.hml
@@ -17,8 +17,10 @@
 <div class="container">
     <text class="text-title" onclick="childClicked">{{ $t('strings.recommend') }}</text>
     <list scrolleffect="no">
-        <list-item clickeffect="false"  for="{{ bookNames }}">
-            <comp @event-type1="textClicked" name="{{ $item.name }}" collect="{{ $item.collect }}"></comp>
+        <list-item clickeffect="false" for="{{ bookNames }}">
+            <comp @event-type1="textClicked" name="{{ $item.name }}" collect="{{ $item.collect }}">
+                <text class="text-introduction" slot="first">{{ $t('strings.book_introduction') }}</text>
+            </comp>
         </list-item>
     </list>
     <div class="div-button">