diff --git a/LiteWearable/entry/src/main/js/MainAbility/detail/detail.js b/LiteWearable/entry/src/main/js/MainAbility/detail/detail.js
index 4140687765c97c5c3ec48372696007342e5abd9b..61bbba7be28ab8b83027e518e2689a51f3f9cdc4 100644
--- a/LiteWearable/entry/src/main/js/MainAbility/detail/detail.js
+++ b/LiteWearable/entry/src/main/js/MainAbility/detail/detail.js
@@ -4,7 +4,7 @@ import router from '@ohos.router';
 
 export default {
     clickAction() {
-        router.replaceUrl({
+        this.getUIContext().getRouter().replaceUrl({
             uri: 'pages/details/details'
         });
     }
diff --git a/LiteWearable/entry/src/main/js/MainAbility/details/details.js b/LiteWearable/entry/src/main/js/MainAbility/details/details.js
index 8cce889e7d51d4eca3d54cceaf9e2400454b9e97..d14950210def13ba196e32c00267f34c4d662ac2 100644
--- a/LiteWearable/entry/src/main/js/MainAbility/details/details.js
+++ b/LiteWearable/entry/src/main/js/MainAbility/details/details.js
@@ -4,7 +4,7 @@ import router from '@ohos.router';
 
 export default {
     clickAction() {
-        router.replaceUrl({
+        this.getUIContext().getRouter().replaceUrl({
             uri: 'pages/index/index'
         });
     }
diff --git a/LiteWearable/entry/src/main/js/MainAbility/exit/exit.js b/LiteWearable/entry/src/main/js/MainAbility/exit/exit.js
index 8d9cfc726c9f630933ec07178db4b93965aff8de..fa5e7f15c96413a443b20e8607fcc34de77801e2 100644
--- a/LiteWearable/entry/src/main/js/MainAbility/exit/exit.js
+++ b/LiteWearable/entry/src/main/js/MainAbility/exit/exit.js
@@ -9,7 +9,7 @@ export default {
         title: 'World'
     },
     clickAction() {
-        router.replaceUrl({
+        this.getUIContext().getRouter().replaceUrl({
             uri: 'pages/details/details'
         });
     },
diff --git a/MultiCommunityApplication/AppScope/app.json5 b/MultiCommunityApplication/AppScope/app.json5
new file mode 100644
index 0000000000000000000000000000000000000000..28eac465352255ccb262622c5a1dd8b8d4ca8caa
--- /dev/null
+++ b/MultiCommunityApplication/AppScope/app.json5
@@ -0,0 +1,10 @@
+{
+  "app": {
+    "bundleName": "com.huawei.multicommunityapplication",
+    "vendor": "example",
+    "versionCode": 1000000,
+    "versionName": "1.0.0",
+    "icon": "$media:layered_image",
+    "label": "$string:app_name"
+  }
+}
diff --git a/MultiCommunityApplication/AppScope/resources/base/element/string.json b/MultiCommunityApplication/AppScope/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..562f5959438dcf1621646da16aee19d0d92fc512
--- /dev/null
+++ b/MultiCommunityApplication/AppScope/resources/base/element/string.json
@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "MultiCommunityApplication"
+    }
+  ]
+}
diff --git a/MultiCommunityApplication/AppScope/resources/base/media/background.png b/MultiCommunityApplication/AppScope/resources/base/media/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..923f2b3f27e915d6871871deea0420eb45ce102f
Binary files /dev/null and b/MultiCommunityApplication/AppScope/resources/base/media/background.png differ
diff --git a/MultiCommunityApplication/AppScope/resources/base/media/foreground.png b/MultiCommunityApplication/AppScope/resources/base/media/foreground.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb9427585b36d14b12477435b6419d1f07b3e0bb
Binary files /dev/null and b/MultiCommunityApplication/AppScope/resources/base/media/foreground.png differ
diff --git a/MultiCommunityApplication/AppScope/resources/base/media/layered_image.json b/MultiCommunityApplication/AppScope/resources/base/media/layered_image.json
new file mode 100644
index 0000000000000000000000000000000000000000..fb49920440fb4d246c82f9ada275e26123a2136a
--- /dev/null
+++ b/MultiCommunityApplication/AppScope/resources/base/media/layered_image.json
@@ -0,0 +1,7 @@
+{
+  "layered-image":
+  {
+    "background" : "$media:background",
+    "foreground" : "$media:foreground"
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/LICENSE b/MultiCommunityApplication/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..1cc99b4e333c57fe6ce9f38c0cb988fb4c4f1c8f
--- /dev/null
+++ b/MultiCommunityApplication/LICENSE
@@ -0,0 +1,78 @@
+   Copyright (c) 2023 Huawei Device Co., Ltd.
+
+   Licensed under the Apache License,Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+Apache License, Version 2.0
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+
+"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License.
+
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License.
+
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution.
+
+You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+1.You must give any other recipients of the Work or Derivative Works a copy of this License; and
+2.You must cause any modified files to carry prominent notices stating that You changed the files; and
+3.You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
+4.If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions.
+
+Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+
+6. Trademarks.
+
+This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty.
+
+Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability.
+
+In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability.
+
+While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
\ No newline at end of file
diff --git a/MultiCommunityApplication/README.en.md b/MultiCommunityApplication/README.en.md
new file mode 100644
index 0000000000000000000000000000000000000000..ca1114b134acdb23bc66692ffb3e1d7ca82060f7
--- /dev/null
+++ b/MultiCommunityApplication/README.en.md
@@ -0,0 +1,46 @@
+# Community Comments
+
+### Introduction
+
+Based on the adaptive and responsive layout, implement community comment pages with one-time development for multi-device deployment.
+
+The figure shows the effect on the mobile phone:
+
+![](screenshots/device/phone.en.png)
+
+The figure shows the effect on the foldable phone:
+
+![](screenshots/device/foldable.en.png)
+
+The figure shows the effect on the tablet:
+
+![](screenshots/device/pad.en.png)
+
+### Concepts
+
+- One-time development for multi-device deployment: It enables you to develop and release one set of project code for deployment on multiple devices as demanded. This feature enables you to efficiently develop applications that are compatible with multiple devices while providing distributed user experiences for cross-device transferring, migration, and collaboration.
+- Adaptive layout: When the size of an external container changes, elements can automatically change based on the relative relationship to adapt to the external container. Relative relationships include the proportion, fixed aspect ratio, and display priority.
+- Responsive layout: When the size of an external container changes, elements can automatically change based on the breakpoints, grids, or specific features (such as the screen direction and window width and height) to adapt to the external container.
+- GridRow: It is a container that is used in a grid layout, together with its child component **<GridCol>**.
+- GridCol: It is a container that must be used as a child component of the **<GridRow>** container.
+
+
+### How to Use
+
+1. Install and open an app on a mobile phone, foldable phone, or tablet. The responsive layout and adaptive layout are used to display different effects on the app pages over different devices.
+2. Tap home, hot topics, message, or mine tab at the bottom to switch to the corresponding tab page. By default, the message tab page is displayed.
+3. Tap a category of hot searches to switch to the corresponding list.
+4. Tap the button for viewing complete rankings. The hot search rankings page is displayed. You can swipe up, down, left, or right on the hot search rankings page and tap the back button to return to the hot topics page.
+5. Tap an image on the hot topics page to go to the image details page. Only images are displayed on mobile phones, while the content and comments are displayed with images on foldable phones and tablets. Tap the image or the back button to return to the hot topics page.
+6. Tap the widget body on the hot topics page to go to the details page. The text area on the details page can be zoomed in or out with two fingers. You can tap the button in the upper right corner of the foldable phone to switch between the left-right layout and top-down layout. Tap the back button to return to the hot topics page.
+
+### Permissions
+
+N/A.
+
+### Constraints
+
+1. The sample app is supported only on Huawei phones running the standard system.
+2. HarmonyOS: HarmonyOS 5.0.0 Release or later
+3. DevEco Studio: DevEco Studio 5.0.0 Release or later
+4. HarmonyOS SDK: HarmonyOS 5.0.0 Release SDK or later
diff --git a/MultiCommunityApplication/README.md b/MultiCommunityApplication/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..54d7af6fc72c41f65f1b1386e74909657f8f68b7
--- /dev/null
+++ b/MultiCommunityApplication/README.md
@@ -0,0 +1,45 @@
+# 一次开发，多端部署-社区评论
+
+### 简介
+
+基于自适应布局和响应式布局，实现一次开发，多端部署的社区评论页。
+
+手机运行效果图如下：
+
+![](screenshots/device/phone.png)
+
+折叠屏运行效果图如下：
+
+![](screenshots/device/foldable.png)
+
+平板运行效果图如下：
+
+![](screenshots/device/pad.png)
+
+### 相关概念
+
+- 一次开发，多端部署：一套代码工程，一次开发上架，多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用，实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验。
+- 自适应布局：当外部容器大小发生变化时，元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。
+- 响应式布局：当外部容器大小发生变化时，元素可以根据断点、栅格或特定的特征（如屏幕方向、窗口宽高等）自动变化以适应外部容器变化的布局能力。
+- GridRow：栅格容器组件，仅可以和栅格子组件（GridCol）在栅格布局场景中使用。
+- GridCol：栅格子组件，必须作为栅格容器组件（GridRow）的子组件使用。
+
+### 使用说明
+
+1. 分别在手机、折叠屏、平板安装并打开应用，不同设备的应用页面通过响应式布局和自适应布局呈现不同的效果。
+2. 点击底部首页、热点、消息、我的图片文字按钮，切换显示对应的标签页，默认显示热点标签页。
+3. 点击热搜标题，切换热搜列表。
+4. 点击查看完整榜单按钮，跳转至热搜榜单页。热搜榜单页支持上下及左右滑动，点击返回按钮退回至热点页。
+5. 热点页点击图片进入图片详情页。手机设备只展示图片，折叠屏及平板展示正文及评论。点击图片或返回按钮退回至热点页。
+6. 热点页点击卡片正文进入详情页。详情页正文文字区域支持双指缩放。折叠屏右上角按钮支持切换左右及上下布局。点击返回按钮退回至热点页。
+
+### 相关权限
+
+不涉及。
+
+### 约束与限制
+
+1. 本示例仅支持标准系统上运行，支持设备：华为手机。
+2. HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。
+3. DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。
+4. HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。
diff --git a/MultiCommunityApplication/build-profile.json5 b/MultiCommunityApplication/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..0e9cedf82137489dd93d0163d43c20d024211388
--- /dev/null
+++ b/MultiCommunityApplication/build-profile.json5
@@ -0,0 +1,101 @@
+{
+  "app": {
+    "signingConfigs": [],
+    "products": [
+      {
+        "name": "default",
+        "signingConfig": "default",
+        "compatibleSdkVersion": "5.0.0(12)",
+        "runtimeOS": "HarmonyOS",
+        "buildOption": {
+          "strictMode": {
+            "caseSensitiveCheck": true,
+            "useNormalizedOHMUrl": true
+          }
+        }
+      }
+    ],
+    "buildModeSet": [
+      {
+        "name": "debug"
+      },
+      {
+        "name": "release"
+      }
+    ]
+  },
+  "modules": [
+    {
+      "name": "phone",
+      "srcPath": "./products/phone",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "base",
+      "srcPath": "./commons/base",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "detail",
+      "srcPath": "./features/detail",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "hot",
+      "srcPath": "./features/hot",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rank",
+      "srcPath": "./features/rank",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "picture",
+      "srcPath": "./features/picture",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/Index.ets b/MultiCommunityApplication/commons/base/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..eaf7c956792160c05f8351a55d2c8e955535a341
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/Index.ets
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { BreakpointConstants } from './src/main/ets/constants/BreakpointConstants';
+
+export { BreakpointType } from './src/main/ets/constants/BreakpointType';
+
+export { CommentItemInterface, CommentItem } from './src/main/ets/viewmodel/CommentViewModel';
+
+export { COMMENT_LIST } from './src/main/ets/model/CommentModel';
+
+export { CommonConstants } from './src/main/ets/constants/CommonConstants';
+
+export { HOST_LIST_ARRAY } from './src/main/ets/model/HotModel';
+
+export { HotItemInterface } from './src/main/ets/model/HotModel';
+
+export { default as Logger } from './src/main/ets/utils/Logger';
+
+export { CardItemInterface, CARD_LIST } from './src/main/ets/model/CardListModel';
+
+export { PICTURE_ARRAY_LIST } from './src/main/ets/model/PictureArrayModel';
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/build-profile.json5 b/MultiCommunityApplication/commons/base/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..da1e864745177ec7d3786ade0b6950aba4ebcc4f
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/build-profile.json5
@@ -0,0 +1,27 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/hvigorfile.ts b/MultiCommunityApplication/commons/base/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiCommunityApplication/commons/base/obfuscation-rules.txt b/MultiCommunityApplication/commons/base/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a1dfa0bd175984dc49e641436aa67b1de1b8abeb
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/obfuscation-rules.txt
@@ -0,0 +1,22 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/oh-package.json5 b/MultiCommunityApplication/commons/base/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..c764a93a96ab677a53c95087b3858bd0524e4e76
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/oh-package.json5
@@ -0,0 +1,11 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "base",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {}
+}
diff --git a/MultiCommunityApplication/commons/base/src/main/ets/constants/BreakpointConstants.ets b/MultiCommunityApplication/commons/base/src/main/ets/constants/BreakpointConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..aa093f5584b7d327985e1f195bc7fb0580e6d309
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/ets/constants/BreakpointConstants.ets
@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Constants for breakpoint.
+ */
+export class BreakpointConstants {
+  /**
+   * Breakpoints that represent small device types.
+   */
+  static readonly BREAKPOINT_SM: string = 'sm';
+
+  /**
+   * Breakpoints that represent middle device types.
+   */
+  static readonly BREAKPOINT_MD: string = 'md';
+
+  /**
+   * Breakpoints that represent large device types.
+   */
+  static readonly BREAKPOINT_LG: string = 'lg';
+
+  /**
+   * Grid row column list.
+   */
+  static readonly GRID_ROW_COLUMNS: number[] = [12, 15, 4, 5];
+
+  /**
+   * Grid column span list.
+   */
+  static readonly GRID_COLUMN_SPANS: number[] = [12, 6, 7, 5, 3, 4, 2];
+
+  /**
+   * Breakpoint ranges.
+   */
+  static readonly BREAKPOINT_RANGES: number[] = [320, 600, 840];
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/ets/constants/BreakpointType.ets b/MultiCommunityApplication/commons/base/src/main/ets/constants/BreakpointType.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e8f3224bae5f6de507888c1bd10b4dd6681e6995
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/ets/constants/BreakpointType.ets
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants } from './BreakpointConstants';
+
+export class BreakpointType<T> {
+  sm: T;
+  md: T;
+  lg: T;
+
+  constructor(sm: T, md: T, lg: T) {
+    this.sm = sm;
+    this.md = md;
+    this.lg = lg;
+  }
+
+  getValue(currentBreakpoint: string): T {
+    if (currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      return this.md;
+    }
+    if (currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      return this.lg;
+    } else {
+      return this.sm;
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/ets/constants/CommonConstants.ets b/MultiCommunityApplication/commons/base/src/main/ets/constants/CommonConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2165033ef721a4fff337273e9ada5022c42961f8
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/ets/constants/CommonConstants.ets
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Common constants for all features.
+ */
+export class CommonConstants {
+  /**
+   * Full percent.
+   */
+  static readonly FULL_PERCENT: string = '100%';
+
+  /**
+   * Half percent.
+   */
+  static readonly HALF_PERCENT: string = '50%';
+
+  /**
+   * Font weight 500.
+   */
+  static readonly FONT_WEIGHT_500: number = 500;
+
+  /**
+   * Font weight 700.
+   */
+  static readonly FONT_WEIGHT_700: number = 700;
+
+  /**
+   * Rank title List.
+   */
+  static readonly RANK_TITLE_LIST: ResourceStr[] =
+    [$r('app.string.today_hot_search'), $r('app.string.news_hot_search'), $r('app.string.same_city_hot_search'),
+      $r('app.string.entertainment_hot_search'), $r('app.string.food_hot_search')];
+
+  /**
+   * Device PC/2in1.
+   */
+  static readonly DEVICE_2IN1: string = '2in1';
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/ets/model/CardListModel.ets b/MultiCommunityApplication/commons/base/src/main/ets/model/CardListModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d5a0114cfce8d6fb99beede76fe5c7ff00eb981d
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/ets/model/CardListModel.ets
@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface CardItemInterface {
+  icon: ResourceStr;
+  name: ResourceStr;
+  authorType: ResourceStr;
+  content: ResourceStr;
+}
+
+export const CARD_LIST: CardItemInterface[] = [
+  {
+    icon: $r('app.media.ic_icon_1'),
+    name: $r('app.string.name_1'),
+    authorType: $r('app.string.author_type_1'),
+    content: $r('app.string.content_1')
+  },
+  {
+    icon: $r('app.media.ic_icon_2'),
+    name: $r('app.string.name_2'),
+    authorType: $r('app.string.author_type_1'),
+    content: $r('app.string.content_2')
+  },
+  {
+    icon: $r('app.media.ic_icon_2'),
+    name: $r('app.string.name_2'),
+    authorType: $r('app.string.author_type_1'),
+    content: $r('app.string.content_3')
+  },
+  {
+    icon: $r('app.media.ic_icon_3'),
+    name: $r('app.string.name_3'),
+    authorType: $r('app.string.author_type_2'),
+    content: $r('app.string.content_4')
+  },
+  {
+    icon: $r('app.media.ic_icon_4'),
+    name: $r('app.string.name_4'),
+    authorType: $r('app.string.author_type_3'),
+    content: $r('app.string.content_5')
+  },
+  {
+    icon: $r('app.media.ic_icon_2'),
+    name: $r('app.string.name_5'),
+    authorType: $r('app.string.author_type_4'),
+    content: $r('app.string.content_6')
+  },
+  {
+    icon: $r('app.media.ic_icon_1'),
+    name: $r('app.string.name_1'),
+    authorType: $r('app.string.author_type_1'),
+    content: $r('app.string.content_1')
+  },
+  {
+    icon: $r('app.media.ic_icon_2'),
+    name: $r('app.string.name_2'),
+    authorType: $r('app.string.author_type_1'),
+    content: $r('app.string.content_2')
+  },
+  {
+    icon: $r('app.media.ic_icon_3'),
+    name: $r('app.string.name_3'),
+    authorType: $r('app.string.author_type_2'),
+    content: $r('app.string.content_4')
+  },
+  {
+    icon: $r('app.media.ic_icon_4'),
+    name: $r('app.string.name_4'),
+    authorType: $r('app.string.author_type_3'),
+    content: $r('app.string.content_5')
+  },
+  {
+    icon: $r('app.media.ic_icon_2'),
+    name: $r('app.string.name_5'),
+    authorType: $r('app.string.author_type_4'),
+    content: $r('app.string.content_6')
+  }
+]
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/ets/model/CommentModel.ets b/MultiCommunityApplication/commons/base/src/main/ets/model/CommentModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..0b654e2c03ff995f28b38062cd5f5b9bdf131d49
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/ets/model/CommentModel.ets
@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommentItemInterface } from '../viewmodel/CommentViewModel';
+
+export const COMMENT_LIST: CommentItemInterface[] = [
+  {
+    icon: $r('app.media.ic_comment_1'),
+    name: $r('app.string.name_6'),
+    favorCount: 41,
+    content: $r('app.string.content_7'),
+    timePosition: $r('app.string.time_position_1'),
+    reviewCnt: 123,
+    subContent: $r('app.string.sub_content_1')
+  },
+  {
+    icon: $r('app.media.ic_comment_2'),
+    name: $r('app.string.name_7'),
+    favorCount: 36,
+    content: $r('app.string.content_8'),
+    timePosition: $r('app.string.time_position_2'),
+    reviewCnt: 12,
+    subContent: $r('app.string.sub_content_1')
+  },
+  {
+    icon : $r('app.media.ic_comment_3'),
+    name: $r('app.string.name_8'),
+    favorCount: 432,
+    content: $r('app.string.content_9'),
+    timePosition: $r('app.string.time_position_3')
+  },
+  {
+    icon : $r('app.media.ic_icon_2'),
+    name : $r('app.string.name_5'),
+    favorCount: 33,
+    content : $r('app.string.content_10'),
+    timePosition: $r('app.string.time_position_3')
+  },
+  {
+    icon : $r('app.media.ic_comment_1'),
+    name : $r('app.string.name_9'),
+    favorCount: 6,
+    content : $r('app.string.content_11'),
+    timePosition: $r('app.string.time_position_4')
+  },
+  {
+    icon : $r('app.media.ic_comment_2'),
+    name : $r('app.string.name_10'),
+    favorCount: 5,
+    content : $r('app.string.content_12'),
+    timePosition: $r('app.string.time_position_5')
+  },
+  {
+    icon : $r('app.media.ic_comment_3'),
+    name : $r('app.string.name_11'),
+    favorCount: 33,
+    content : $r('app.string.content_13'),
+    timePosition: $r('app.string.time_position_6')
+  }
+]
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/ets/model/HotModel.ets b/MultiCommunityApplication/commons/base/src/main/ets/model/HotModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d2981d0e36b3a51b3cff1f5186322bbe0b5eca19
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/ets/model/HotModel.ets
@@ -0,0 +1,712 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface HotItemInterface {
+  index: number;
+  icon: Resource;
+  title: ResourceStr;
+  content: ResourceStr;
+  stateIcon: ResourceStr;
+  clickCount: number;
+  upDownIcon: ResourceStr;
+}
+
+export const HOST_LIST_ARRAY: Array<HotItemInterface[]> = [
+  [
+    {
+      index: 1,
+      icon: $r('app.media.ic_today_rank_1'),
+      title: $r('app.string.title_1'),
+      content: $r('app.string.content_14'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 666,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 2,
+      icon: $r('app.media.ic_today_rank_2'),
+      title: $r('app.string.title_2'),
+      content: $r('app.string.content_15'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 651,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 3,
+      icon: $r('app.media.ic_today_rank_3'),
+      title: $r('app.string.title_3'),
+      content: $r('app.string.content_16'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 576,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 4,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 556,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 5,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 532,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 6,
+      icon: $r('app.media.ic_rank_item_1'),
+      title: $r('app.string.title_6'),
+      content: $r('app.string.content_19'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 501,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 7,
+      icon: $r('app.media.ic_rank_item_2'),
+      title: $r('app.string.title_7'),
+      content: $r('app.string.content_20'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 489,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 8,
+      icon: $r('app.media.ic_rank_item_3'),
+      title: $r('app.string.title_8'),
+      content: $r('app.string.content_21'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 473,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 9,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 421,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 10,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 389,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 11,
+      icon: $r('app.media.ic_rank_item_1'),
+      title: $r('app.string.title_6'),
+      content: $r('app.string.content_19'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 365,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 12,
+      icon: $r('app.media.ic_rank_item_2'),
+      title: $r('app.string.title_7'),
+      content: $r('app.string.content_20'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 349,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 13,
+      icon: $r('app.media.ic_rank_item_3'),
+      title: $r('app.string.title_8'),
+      content: $r('app.string.content_21'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 311,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 14,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 278,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 15,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 257,
+      upDownIcon: $r('app.media.ic_up')
+    }
+  ],
+  [
+    {
+      index: 1,
+      icon: $r('app.media.ic_news_rank_1'),
+      title: $r('app.string.title_9'),
+      content: $r('app.string.content_22'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 666,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 2,
+      icon: $r('app.media.ic_news_rank_2'),
+      title: $r('app.string.title_10'),
+      content: $r('app.string.content_23'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 651,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 3,
+      icon: $r('app.media.ic_news_rank_3'),
+      title: $r('app.string.title_11'),
+      content: $r('app.string.content_24'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 576,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 4,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 556,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 5,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 532,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 6,
+      icon: $r('app.media.ic_rank_item_1'),
+      title: $r('app.string.title_6'),
+      content: $r('app.string.content_19'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 501,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 7,
+      icon: $r('app.media.ic_rank_item_2'),
+      title: $r('app.string.title_7'),
+      content: $r('app.string.content_20'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 489,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 8,
+      icon: $r('app.media.ic_rank_item_3'),
+      title: $r('app.string.title_8'),
+      content: $r('app.string.content_21'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 473,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 9,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 421,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 10,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 389,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 11,
+      icon: $r('app.media.ic_rank_item_1'),
+      title: $r('app.string.title_6'),
+      content: $r('app.string.content_19'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 365,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 12,
+      icon: $r('app.media.ic_rank_item_2'),
+      title: $r('app.string.title_7'),
+      content: $r('app.string.content_20'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 349,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 13,
+      icon: $r('app.media.ic_rank_item_3'),
+      title: $r('app.string.title_8'),
+      content: $r('app.string.content_21'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 311,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 14,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 278,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 15,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 257,
+      upDownIcon: $r('app.media.ic_up')
+    }
+  ],
+  [
+    {
+      index: 1,
+      icon: $r('app.media.ic_city_rank_1'),
+      title: $r('app.string.title_12'),
+      content: $r('app.string.content_25'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 666,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 2,
+      icon: $r('app.media.ic_city_rank_2'),
+      title: $r('app.string.title_13'),
+      content: $r('app.string.content_26'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 651,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 3,
+      icon: $r('app.media.ic_city_rank_3'),
+      title: $r('app.string.title_14'),
+      content: $r('app.string.content_27'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 576,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 4,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 556,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 5,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 532,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 6,
+      icon: $r('app.media.ic_rank_item_1'),
+      title: $r('app.string.title_6'),
+      content: $r('app.string.content_19'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 501,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 7,
+      icon: $r('app.media.ic_rank_item_2'),
+      title: $r('app.string.title_7'),
+      content: $r('app.string.content_20'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 489,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 8,
+      icon: $r('app.media.ic_rank_item_3'),
+      title: $r('app.string.title_8'),
+      content: $r('app.string.content_21'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 473,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 9,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 421,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 10,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 389,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 11,
+      icon: $r('app.media.ic_rank_item_1'),
+      title: $r('app.string.title_6'),
+      content: $r('app.string.content_19'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 365,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 12,
+      icon: $r('app.media.ic_rank_item_2'),
+      title: $r('app.string.title_7'),
+      content: $r('app.string.content_20'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 349,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 13,
+      icon: $r('app.media.ic_rank_item_3'),
+      title: $r('app.string.title_8'),
+      content: $r('app.string.content_21'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 311,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 14,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 278,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 15,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 257,
+      upDownIcon: $r('app.media.ic_up')
+    }
+  ],
+  [
+    {
+      index: 1,
+      icon: $r('app.media.ic_fun_rank_1'),
+      title: $r('app.string.title_15'),
+      content: $r('app.string.content_28'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 666,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 2,
+      icon: $r('app.media.ic_fun_rank_2'),
+      title: $r('app.string.title_16'),
+      content: $r('app.string.content_29'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 651,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 3,
+      icon: $r('app.media.ic_fun_rank_3'),
+      title: $r('app.string.title_17'),
+      content: $r('app.string.content_30'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 576,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 4,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 556,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 5,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 532,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 6,
+      icon: $r('app.media.ic_rank_item_1'),
+      title: $r('app.string.title_6'),
+      content: $r('app.string.content_19'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 501,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 7,
+      icon: $r('app.media.ic_rank_item_2'),
+      title: $r('app.string.title_7'),
+      content: $r('app.string.content_20'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 489,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 8,
+      icon: $r('app.media.ic_rank_item_3'),
+      title: $r('app.string.title_8'),
+      content: $r('app.string.content_21'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 473,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 9,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 421,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 10,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 389,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 11,
+      icon: $r('app.media.ic_rank_item_1'),
+      title: $r('app.string.title_6'),
+      content: $r('app.string.content_19'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 365,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 12,
+      icon: $r('app.media.ic_rank_item_2'),
+      title: $r('app.string.title_7'),
+      content: $r('app.string.content_20'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 349,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 13,
+      icon: $r('app.media.ic_rank_item_3'),
+      title: $r('app.string.title_8'),
+      content: $r('app.string.content_21'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 311,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 14,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 278,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 15,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 257,
+      upDownIcon: $r('app.media.ic_up')
+    }
+  ],
+  [
+    {
+      index: 1,
+      icon: $r('app.media.ic_food_rank_1'),
+      title: $r('app.string.title_18'),
+      content: $r('app.string.content_31'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 666,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 2,
+      icon: $r('app.media.ic_food_rank_2'),
+      title: $r('app.string.title_19'),
+      content: $r('app.string.content_32'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 651,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 3,
+      icon: $r('app.media.ic_food_rank_3'),
+      title: $r('app.string.title_20'),
+      content: $r('app.string.content_33'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 576,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 4,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 556,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 5,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 532,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 6,
+      icon: $r('app.media.ic_rank_item_1'),
+      title: $r('app.string.title_6'),
+      content: $r('app.string.content_19'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 501,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 7,
+      icon: $r('app.media.ic_rank_item_2'),
+      title: $r('app.string.title_7'),
+      content: $r('app.string.content_20'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 489,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 8,
+      icon: $r('app.media.ic_rank_item_3'),
+      title: $r('app.string.title_8'),
+      content: $r('app.string.content_21'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 473,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 9,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 421,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 10,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 389,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 11,
+      icon: $r('app.media.ic_rank_item_1'),
+      title: $r('app.string.title_6'),
+      content: $r('app.string.content_19'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 365,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 12,
+      icon: $r('app.media.ic_rank_item_2'),
+      title: $r('app.string.title_7'),
+      content: $r('app.string.content_20'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 349,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 13,
+      icon: $r('app.media.ic_rank_item_3'),
+      title: $r('app.string.title_8'),
+      content: $r('app.string.content_21'),
+      stateIcon: $r('app.media.ic_state_favor'),
+      clickCount: 311,
+      upDownIcon: $r('app.media.ic_up')
+    },
+    {
+      index: 14,
+      icon: $r('app.media.ic_rank_item_4'),
+      title: $r('app.string.title_4'),
+      content: $r('app.string.content_17'),
+      stateIcon: $r('app.media.ic_state_new'),
+      clickCount: 278,
+      upDownIcon: $r('app.media.ic_down')
+    },
+    {
+      index: 15,
+      icon: $r('app.media.ic_rank_item_5'),
+      title: $r('app.string.title_5'),
+      content: $r('app.string.content_18'),
+      stateIcon: $r('app.media.ic_state_fire'),
+      clickCount: 257,
+      upDownIcon: $r('app.media.ic_up')
+    }
+  ]
+]
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/ets/model/PictureArrayModel.ets b/MultiCommunityApplication/commons/base/src/main/ets/model/PictureArrayModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..66753a0f09ba7ae0a78a1be6b6cc3a879a96ed22
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/ets/model/PictureArrayModel.ets
@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const PICTURE_ARRAY_LIST: Array<Resource[]> = [
+  [
+    $r('app.media.ic_social_circle1')
+  ],
+  [
+    $r('app.media.ic_social_circle8')
+  ],
+  [
+    $r('app.media.ic_social_circle2'),
+    $r('app.media.ic_social_circle4'),
+    $r('app.media.ic_social_circle5'),
+    $r('app.media.ic_social_circle6')
+  ],
+  [
+    $r('app.media.ic_social_circle3'),
+    $r('app.media.ic_social_circle4')
+  ],
+  [
+    $r('app.media.ic_social_circle9'),
+    $r('app.media.ic_social_circle8'),
+    $r('app.media.ic_social_circle6'),
+    $r('app.media.ic_social_circle5'),
+    $r('app.media.ic_social_circle3'),
+    $r('app.media.ic_social_circle1'),
+    $r('app.media.ic_social_circle2')
+
+  ],
+  [
+    $r('app.media.ic_social_circle1'),
+    $r('app.media.ic_social_circle2'),
+    $r('app.media.ic_social_circle3'),
+    $r('app.media.ic_social_circle7'),
+    $r('app.media.ic_social_circle5')
+  ],
+  [
+    $r('app.media.ic_social_circle1'),
+    $r('app.media.ic_social_circle2'),
+    $r('app.media.ic_social_circle3'),
+    $r('app.media.ic_social_circle4'),
+    $r('app.media.ic_social_circle5'),
+    $r('app.media.ic_social_circle6'),
+    $r('app.media.ic_social_circle7'),
+    $r('app.media.ic_social_circle8'),
+    $r('app.media.ic_social_circle9')
+  ],
+  [
+    $r('app.media.ic_social_circle2'),
+    $r('app.media.ic_social_circle3'),
+    $r('app.media.ic_social_circle4'),
+    $r('app.media.ic_social_circle5'),
+    $r('app.media.ic_social_circle6'),
+    $r('app.media.ic_social_circle7')
+  ],
+  [
+    $r('app.media.ic_social_circle3'),
+    $r('app.media.ic_social_circle6'),
+    $r('app.media.ic_social_circle8')
+  ],
+  [
+    $r('app.media.ic_social_circle1'),
+    $r('app.media.ic_social_circle2'),
+    $r('app.media.ic_social_circle3'),
+    $r('app.media.ic_social_circle4'),
+    $r('app.media.ic_social_circle5'),
+    $r('app.media.ic_social_circle6'),
+    $r('app.media.ic_social_circle7'),
+    $r('app.media.ic_social_circle8')
+  ],
+  [
+    $r('app.media.ic_social_circle1'),
+    $r('app.media.ic_social_circle2'),
+    $r('app.media.ic_social_circle3'),
+    $r('app.media.ic_social_circle4'),
+    $r('app.media.ic_social_circle6')
+  ]
+]
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/ets/utils/Logger.ets b/MultiCommunityApplication/commons/base/src/main/ets/utils/Logger.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a84d197622d6863af4fa291d5bf461cf50be1576
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/ets/utils/Logger.ets
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { hilog } from '@kit.PerformanceAnalysisKit';
+
+class Logger {
+  private domain: number;
+  private prefix: string;
+  private format: string = '%{public}s, %{public}s';
+
+  /**
+   * Constructor.
+   *
+   * @param Prefix Identifies the log tag.
+   * @param domain Domain Indicates the service domain, which is a hexadecimal integer ranging from 0x0 to 0xFFFFF.
+   */
+  constructor(prefix: string) {
+    this.prefix = prefix;
+    this.domain = 0xFF00;
+  }
+
+  debug(...args: string[]): void {
+    hilog.debug(this.domain, this.prefix, this.format, args);
+  }
+
+  info(...args: string[]): void {
+    hilog.info(this.domain, this.prefix, this.format, args);
+  }
+
+  warn(...args: string[]): void {
+    hilog.warn(this.domain, this.prefix, this.format, args);
+  }
+
+  error(...args: string[]): void {
+    hilog.error(this.domain, this.prefix, this.format, args);
+  }
+}
+
+export default new Logger('CommunityApplication');
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/ets/viewmodel/CommentViewModel.ets b/MultiCommunityApplication/commons/base/src/main/ets/viewmodel/CommentViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9e5a5b096c4ee5459628bca9affb42ebac7759fe
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/ets/viewmodel/CommentViewModel.ets
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface CommentItemInterface {
+  icon: ResourceStr;
+  name: ResourceStr;
+  favorCount: number;
+  content: ResourceStr;
+  timePosition: ResourceStr;
+  reviewCnt?: number;
+  subContent?: ResourceStr;
+}
+
+export class CommentItem implements CommentItemInterface {
+  icon: ResourceStr;
+  name: ResourceStr;
+  favorCount: number;
+  content: ResourceStr;
+  timePosition: ResourceStr;
+  reviewCnt?: number;
+  subContent?: ResourceStr;
+
+  constructor(item: CommentItemInterface) {
+    this.icon = item.icon;
+    this.name = item.name;
+    this.favorCount = item.favorCount;
+    this.content = item.content;
+    this.timePosition = item.timePosition;
+    if (item?.reviewCnt) {
+      this.reviewCnt = item.reviewCnt;
+    }
+    if (item?.subContent) {
+      this.subContent = item.subContent;
+    }
+  }
+}
diff --git a/MultiCommunityApplication/commons/base/src/main/module.json5 b/MultiCommunityApplication/commons/base/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..9c4d9041e0ff8174abb8f746e862ef89b1459a97
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/module.json5
@@ -0,0 +1,12 @@
+{
+  "module": {
+    "name": "base",
+    "type": "har",
+    "description": "$string:shared_desc",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/element/color.json b/MultiCommunityApplication/commons/base/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..1bbc9aa9617e97c45440e1d3d66afc1154837012
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/resources/base/element/color.json
@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/element/string.json b/MultiCommunityApplication/commons/base/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..2b247e4be56b2d2d35336e061cf75bb3a463a8dd
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/resources/base/element/string.json
@@ -0,0 +1,328 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "today_hot_search",
+      "value": "今日热搜"
+    },
+    {
+      "name": "news_hot_search",
+      "value": "要闻热搜"
+    },
+    {
+      "name": "same_city_hot_search",
+      "value": "同城热搜"
+    },
+    {
+      "name": "entertainment_hot_search",
+      "value": "娱乐热搜"
+    },
+    {
+      "name": "food_hot_search",
+      "value": "美食热搜"
+    },
+    {
+      "name": "name_1",
+      "value": "小鱼儿"
+    },
+    {
+      "name": "name_2",
+      "value": "熊猫大人"
+    },
+    {
+      "name": "name_3",
+      "value": "飞行日记"
+    },
+    {
+      "name": "name_4",
+      "value": "江湖旅客"
+    },
+    {
+      "name": "name_5",
+      "value": "摄影D叔"
+    },
+    {
+      "name": "name_6",
+      "value": "柯基可可"
+    },
+    {
+      "name": "name_7",
+      "value": "会飞的鱼儿"
+    },
+    {
+      "name": "name_8",
+      "value": "摄影学家王教授"
+    },
+    {
+      "name": "name_9",
+      "value": "雪中小镇"
+    },
+    {
+      "name": "name_10",
+      "value": "江湖游客"
+    },
+    {
+      "name": "name_11",
+      "value": "吕家寨子"
+    },
+    {
+      "name": "author_type_1",
+      "value": "环保领域作者"
+    },
+    {
+      "name": "author_type_2",
+      "value": "科技领域作者"
+    },
+    {
+      "name": "author_type_3",
+      "value": "旅行领域作者"
+    },
+    {
+      "name": "author_type_4",
+      "value": "风景摄影领域作者"
+    },
+    {
+      "name": "content_1",
+      "value": "亲近大海，领悟海，体会到了海的心声，海自然与你共鸣，无需可以强求，也无需费力搜寻，海，始终都会以潮声与你相亲，已其海色伴你舒适。亲近大海，领悟海，体会到了海的心声，海自然与你共鸣，无需可以强求，也无需费力搜寻，海，始终都会以潮声与你相亲，已其海色伴你舒适。"
+    },
+    {
+      "name": "content_2",
+      "value": "野生动物与宠物动物，可爱的动物人人都喜欢。野生动物与宠物动物，可爱的动物人人都喜欢。野生动物与宠物动物，可爱的动物人人都喜欢。野生动物与宠物动物，可爱的动物人人都喜欢。野生动物与宠物动物，可爱的动物人人都喜欢。野生动物与宠物动物，可爱的动物人人都喜欢。"
+    },
+    {
+      "name": "content_3",
+      "value": "君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不愿醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"
+    },
+    {
+      "name": "content_4",
+      "value": "群鸟，仿佛从大地的心窝飞起的音符。旋风似的从田野腾空而起。小鸟的头部两侧镶嵌着一双宝石般的小眼睛，嘴巴长长的，上面是它的小鼻子。群鸟，仿佛从大地的心窝飞起的音符。旋风似的从田野腾空而起。小鸟的头部两侧镶嵌着一双宝石般的小眼睛，嘴巴长长的，上面是它的小鼻子。"
+    },
+    {
+      "name": "content_5",
+      "value": "伫立于河流两岸的山峦，如同沉默无言的僧侣，眺望着远方。伫立于河流两岸的山峦，如同沉默无言的僧侣，眺望着远方。伫立于河流两岸的山峦，如同沉默无言的僧侣，眺望着远方。伫立于河流两岸的山峦，如同沉默无言的僧侣，眺望着远方。"
+    },
+    {
+      "name": "content_6",
+      "value": "九如山的山，山山相连，连绵起伏。山腰盘旋的那曲折险峻的实木栈道，如缕缕飘带缠绕在绿水青山之中，成为一道独特的亮丽风景；幽深的小谷之中，升腾着鬼神莫测的云雾。九如山的山，山山相连，连绵起伏。山腰盘旋的那曲折险峻的实木栈道，如缕缕飘带缠绕在绿水青山之中，成为一道独特的亮丽风景；幽深的小谷之中，升腾着鬼神莫测的云雾。"
+    },
+    {
+      "name": "content_7",
+      "value": "拍的很好啊！赞"
+    },
+    {
+      "name": "content_8",
+      "value": "滚滚长江东逝水，浪花淘尽英雄。"
+    },
+    {
+      "name": "content_9",
+      "value": "这组图片饱含了国风风格"
+    },
+    {
+      "name": "content_10",
+      "value": "会当凌绝顶！"
+    },
+    {
+      "name": "content_11",
+      "value": "拍的真好！爱了爱了！"
+    },
+    {
+      "name": "content_12",
+      "value": "千古江湖图一醉"
+    },
+    {
+      "name": "content_13",
+      "value": "好看，期待更新"
+    },
+    {
+      "name": "content_14",
+      "value": "规范野生动植物管理"
+    },
+    {
+      "name": "content_15",
+      "value": "人类建筑史上的奇迹"
+    },
+    {
+      "name": "content_16",
+      "value": "雾绕青山枝叶绿"
+    },
+    {
+      "name": "content_17",
+      "value": "舞者们台下十年练习之路"
+    },
+    {
+      "name": "content_18",
+      "value": "揭秘宇宙的奥秘"
+    },
+    {
+      "name": "content_19",
+      "value": "欧洲建筑的历史责任在对欧洲..."
+    },
+    {
+      "name": "content_20",
+      "value": "世界十大神奇建筑指的是建筑造型..."
+    },
+    {
+      "name": "content_21",
+      "value": "小小世界的生存智慧是非常..."
+    },
+    {
+      "name": "content_22",
+      "value": "艺术如同一首悠扬的乐曲"
+    },
+    {
+      "name": "content_23",
+      "value": "浩瀚宇宙有边际吗"
+    },
+    {
+      "name": "content_24",
+      "value": "人的精神世界的总和"
+    },
+    {
+      "name": "content_25",
+      "value": "夏天的气息扑面而来"
+    },
+    {
+      "name": "content_26",
+      "value": "这里的花开了"
+    },
+    {
+      "name": "content_27",
+      "value": "旅行是种什么体验"
+    },
+    {
+      "name": "content_28",
+      "value": "吉他有许多不同的音色"
+    },
+    {
+      "name": "content_29",
+      "value": "轻轻地拂过我的耳畔"
+    },
+    {
+      "name": "content_30",
+      "value": "静下来做事是难得的品质"
+    },
+    {
+      "name": "content_31",
+      "value": "红彤彤的苹果像小灯笼"
+    },
+    {
+      "name": "content_32",
+      "value": "带你去吃健康的蔬菜"
+    },
+    {
+      "name": "content_33",
+      "value": "儿时香甜的味道"
+    },
+    {
+      "name": "time_position_1",
+      "value": "10分钟前·来自上海"
+    },
+    {
+      "name": "time_position_2",
+      "value": "10-23·来自上海"
+    },
+    {
+      "name": "time_position_3",
+      "value": "10-22·来自上海"
+    },
+    {
+      "name": "time_position_4",
+      "value": "10-21·来自上海"
+    },
+    {
+      "name": "time_position_5",
+      "value": "10-19·来自上海"
+    },
+    {
+      "name": "time_position_6",
+      "value": "10-13·来自上海"
+    },
+    {
+      "name": "sub_content_1",
+      "value": "长江：对了//@森林：是佳能拍出的效果啊，太赞了"
+    },
+    {
+      "name": "title_1",
+      "value": "野生动物保护"
+    },
+    {
+      "name": "title_2",
+      "value": "世界有名建筑"
+    },
+    {
+      "name": "title_3",
+      "value": "茶叶的神奇功效"
+    },
+    {
+      "name": "title_4",
+      "value": "舞动者们"
+    },
+    {
+      "name": "title_5",
+      "value": "宇宙最遥远的样子"
+    },
+    {
+      "name": "title_6",
+      "value": "建筑人文"
+    },
+    {
+      "name": "title_7",
+      "value": "世界十大神奇建筑"
+    },
+    {
+      "name": "title_8",
+      "value": "生命之谜语"
+    },
+    {
+      "name": "title_9",
+      "value": "艺术之美"
+    },
+    {
+      "name": "title_10",
+      "value": "太空高清图片"
+    },
+    {
+      "name": "title_11",
+      "value": "心灵的修行"
+    },
+    {
+      "name": "title_12",
+      "value": "夏天来了"
+    },
+    {
+      "name": "title_13",
+      "value": "新的打卡景点"
+    },
+    {
+      "name": "title_14",
+      "value": "带宠物去旅行"
+    },
+    {
+      "name": "title_15",
+      "value": "吉他之声"
+    },
+    {
+      "name": "title_16",
+      "value": "聆听美妙的声音"
+    },
+    {
+      "name": "title_17",
+      "value": "安静的工作"
+    },
+    {
+      "name": "title_18",
+      "value": "超市的果子"
+    },
+    {
+      "name": "title_19",
+      "value": "蔬菜种植"
+    },
+    {
+      "name": "title_20",
+      "value": "儿时的味道"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_city_rank_1.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_city_rank_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..37e74ba968083f6b3c736dd0b1f4ef224740c0b4
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_city_rank_1.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_city_rank_2.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_city_rank_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb825b963ebb722b0f1fedd94c58977686d348c2
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_city_rank_2.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_city_rank_3.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_city_rank_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b7dbbd738212e2b6ef403381ac237f2bf3c1bc6
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_city_rank_3.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_comment_1.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_comment_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..97c5cb7fb9efe84c90dd771d648682fc9e85d754
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_comment_1.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_comment_2.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_comment_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad1cfe89abe7d00f3f27d29d12a53a2caba1c2ea
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_comment_2.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_comment_3.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_comment_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca56036c92c6d1b59d41c561b522d5d3f3bf4c02
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_comment_3.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_comment_4.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_comment_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..43cfbc975e1a4ee06b1da50410129a5adf46df67
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_comment_4.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_down.svg b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_down.svg
new file mode 100644
index 0000000000000000000000000000000000000000..40f53926d7dbdf8013f41cd1a17df1a6e902f353
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_down.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_20_Max Pressure备份</title>
+    <g id="1016备份" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-69.000000, -427.000000)">
+            <g id="编组-16" transform="translate(69.000000, 427.000000)">
+                <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                <g id="编组-14"></g>
+                <g id="ic_20_Max-Pressure备份" fill="#01B1F6">
+                    <path d="M9.2890967,7.39146439 L10.6741893,9.74612188 C11.0929825,10.4580703 10.8553333,11.3747175 10.1433848,11.7935108 C9.91354819,11.9287088 9.65174482,12 9.38509264,12 L6.61490736,12 C5.78891805,12 5.11932141,11.3304034 5.11932141,10.5044141 C5.11932141,10.2377619 5.19061264,9.97595851 5.32581066,9.74612188 L6.7109033,7.39146439 C7.12969651,6.67951594 8.04634373,6.44186666 8.75829217,6.86065986 C8.97747578,6.98959139 9.16016517,7.17228078 9.2890967,7.39146439 Z" id="三角形" transform="translate(8.000000, 8.600000) scale(1, -1) translate(-8.000000, -8.600000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_food_rank_1.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_food_rank_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..633dbf152732162ec4be8c9c46e48d2609baf9c4
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_food_rank_1.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_food_rank_2.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_food_rank_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e2c535a443d0172a320951790782580bf7389b8
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_food_rank_2.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_food_rank_3.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_food_rank_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8d7eb42c52211ae8fc0759ef94468851b0d18c6
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_food_rank_3.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_fun_rank_1.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_fun_rank_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa4593725ae5a6c4733aaf7e70e8a1f6d3264c30
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_fun_rank_1.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_fun_rank_2.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_fun_rank_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..f87ca572ef2972943a6ec3888e6e0bad6e848107
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_fun_rank_2.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_fun_rank_3.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_fun_rank_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..8d5bafd730354b7dce4d70bd675aa9733d08f575
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_fun_rank_3.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_icon_1.PNG b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_icon_1.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..c443ae401f1a2d8694bc511a24e1494c5610d25c
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_icon_1.PNG differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_icon_2.PNG b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_icon_2.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..7eae8521faae4e92965ea3d189f594608e8c007b
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_icon_2.PNG differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_icon_3.PNG b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_icon_3.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..6eceb2c38548af068fc14e6982403b154ba5c5bd
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_icon_3.PNG differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_icon_4.PNG b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_icon_4.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..8c289c45421e52e3f52f02aabe66895ce7c8852c
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_icon_4.PNG differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_news_rank_1.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_news_rank_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb93a14cfaff59f530f35dc5617d4a51f809363a
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_news_rank_1.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_news_rank_2.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_news_rank_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..9189619df00613a9bb8bcc377dc3044c25ecad44
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_news_rank_2.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_news_rank_3.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_news_rank_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0762fc8d791998fcfebb154dbe92bc14cb08c1c
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_news_rank_3.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_public_add.svg b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_public_add.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1f6f21b4f518d7068bf39da34b81948f2b025da6
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_public_add.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_add</title>
+    <defs>
+        <path d="M5.375,9.625 C5.375,9.83210678 5.20710678,10 5,10 C4.79289322,10 4.625,9.83210678 4.625,9.625 L4.625,5.625 L0.5,5.625 C0.223857625,5.625 0,5.40114237 0,5.125 C0,4.84885763 0.223857625,4.625 0.5,4.625 L4.625,4.625 L4.625,0.375 C4.625,0.167893219 4.79289322,3.80448985e-17 5,0 C5.20710678,-3.80448985e-17 5.375,0.167893219 5.375,0.375 L5.375,9.625 Z M9.5,4.625 C9.77614237,4.625 10,4.84885763 10,5.125 C10,5.40114237 9.77614237,5.625 9.5,5.625 L5.875,5.625 L5.875,4.625 L9.5,4.625 Z" id="path-1"></path>
+    </defs>
+    <g id="1016" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-33.000000, -111.000000)">
+            <g id="编组-3" transform="translate(32.000000, 110.000000)">
+                <g id="Public/ic_public_add" transform="translate(1.000000, 1.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="形状结合" fill="#0A59F7" xlink:href="#path-1"></use>
+                    <g id="Symbol/color-light/colorPrimary" mask="url(#mask-2)" fill="#0A59F7" fill-opacity="0.4">
+                        <g transform="translate(-1.000000, -1.000000)" id="color/#000000">
+                            <rect x="0" y="0" width="12" height="12"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_public_back.svg b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_public_back.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6422ef95901649d4402e11bb3a77f1b3bb969763
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_public_back.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_back</title>
+    <defs>
+        <path d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_back" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_1.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..94433f3de66426861e5fb32355bdce08f2a2b6d3
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_1.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_2.PNG b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_2.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..7f67bdb4f9b6dc7c062d5b737ba5d2e108308750
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_2.PNG differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_3.PNG b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_3.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..d46730110386306642263e166936df355236ee27
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_3.PNG differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_4.PNG b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_4.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..5f5c68ea26028376d3bc4772a399e741445501de
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_4.PNG differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_5.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f4d50975792dddb67a37504627df54c3ddf7ec8
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_rank_item_5.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle1.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle1.png
new file mode 100644
index 0000000000000000000000000000000000000000..c154bf4ce1ede2b1ab76d94a388748add9621005
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle1.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle2.jpg b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1f48c2abb9c15499951edb75092ec61bd92042a7
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle2.jpg differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle3.jpg b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c743fffbde638107707801fb7740c530c4f6cdd2
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle3.jpg differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle4.jpg b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..dfb5b410f8ee457c63b3367b9391f27e4524d956
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle4.jpg differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle5.jpg b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle5.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..eaa682880b28b9a834d1ddb9e97344adc6ff13a2
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle5.jpg differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle6.jpg b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle6.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9e7ffcdb5f5058f36e56f66c305df951769b83da
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle6.jpg differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle7.jpg b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle7.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..48b12f781efaa4838b7396eb1455771a85f93b05
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle7.jpg differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle8.jpg b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle8.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a8f2ac8fed4d716a09ec3216bb8610efbdc2a911
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle8.jpg differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle9.jpg b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle9.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e3be34e2bdc99d1e90d5878624c3c05f4f715102
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_social_circle9.jpg differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_state_favor.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_state_favor.png
new file mode 100644
index 0000000000000000000000000000000000000000..66a4b61e20b1e0c783318635b7bc26ffa0a3833f
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_state_favor.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_state_fire.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_state_fire.png
new file mode 100644
index 0000000000000000000000000000000000000000..f79b24770d4ff453f09fdabc1ad87c451080742c
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_state_fire.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_state_new.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_state_new.png
new file mode 100644
index 0000000000000000000000000000000000000000..5969d3db571fab147bf508689ec3323324699bdd
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_state_new.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_today_rank_1.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_today_rank_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b065c841bb6b0b531e7a7ab440363fe964b6721
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_today_rank_1.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_today_rank_2.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_today_rank_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..334ff6937b527b46e66f841bf7406ef4bee59fcd
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_today_rank_2.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_today_rank_3.png b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_today_rank_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ae87c1abefeb19f8a1198ab6a83a8fd7df55e01
Binary files /dev/null and b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_today_rank_3.png differ
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_toolbar_heart.svg b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_toolbar_heart.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2bda46263404f167e2c7581a2cfffb886fa7ae33
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_toolbar_heart.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_favor</title>
+    <defs>
+        <path d="M2.79452153,4.7123106 C5.14551849,2.36131365 8.79928584,2.107094 11.432027,3.94965165 C11.7516058,4.17462816 12.0562133,4.42806087 12.3404631,4.7123106 L12.2043753,4.58084491 C12.2233722,4.59824909 12.242503,4.61626317 12.2617634,4.63489833 L12.3404631,4.7123106 C12.4463878,4.81823529 12.5489662,4.9211352 12.648204,5.02101694 C12.8006003,5.17431629 12.9510582,5.32642644 13.0993468,5.47711379 L13.2191159,5.60002561 C13.6770026,6.06850208 14.0393959,6.45079635 14.3071512,6.74792182 C14.5844414,7.05562795 14.5597843,7.52986111 14.2520782,7.80715123 C13.9443721,8.08444136 13.4701389,8.05978431 13.1928488,7.75207818 L13.0507824,7.59620087 C12.6483435,7.15907177 12.0572399,6.55040776 11.2798029,5.77297077 L11.1010067,5.60225587 C9.04064077,3.72439192 5.84685559,3.78129689 3.8551817,5.77297077 C1.92651003,7.70164245 2.0120054,10.7789756 3.90277368,13.3 C4.53008781,14.1364188 5.51152739,15.2077248 6.77873984,16.4381266 L6.77873984,16.4381266 L6.81870427,16.4767845 C7.40284236,17.0397797 8.47345885,17.9853684 10.0244732,19.3076065 L10.0244732,19.3076065 L11.0614453,20.1872947 C11.6195629,20.6586926 12.4361195,20.6594461 12.9949572,20.1892045 L12.9949572,20.1892045 L13.9427905,19.3880425 C15.4712291,18.089643 16.5394672,17.1471153 17.1420446,16.5658605 L17.1420446,16.5658605 L17.4041204,16.3113955 C18.6081005,15.1345125 19.5440439,14.1079415 20.15,13.3 C22.0407683,10.7789756 22.1262637,7.70164245 20.197592,5.77297077 C18.5002127,4.07559151 15.9297294,3.783452 13.9318066,4.89655225 C13.6450802,4.60532736 13.3503168,4.30795075 13.0475699,4.00520382 C12.9789659,3.93659986 12.9093438,3.8695609 12.8387502,3.80408714 C15.4505548,2.12241169 18.9709638,2.42502225 21.2582521,4.7123106 C23.7644258,7.21848428 23.6558802,11.1254931 21.35,14.2 L21.35,14.2 L21.2782836,14.2947342 C20.5730317,15.2179162 19.5206923,16.355509 18.1834318,17.6454496 L18.1834318,17.6454496 L18.1355571,17.6914643 C17.4696453,18.3292759 16.3271085,19.333852 14.702026,20.7110339 L14.702026,20.7110339 L13.960879,21.3368085 C12.8429053,22.2775429 11.2097915,22.2760359 10.0935559,21.3332398 C7.99068585,19.5571115 6.56921236,18.3148051 5.81899059,17.5964036 L5.81899059,17.5964036 L5.59843695,17.3824031 C4.34444158,16.1565572 3.3607736,15.0773332 2.70277368,14.2 C0.396893522,11.1254931 0.288347854,7.21848428 2.79452153,4.7123106 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_favor" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_蒙版" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_toolbar_share.svg b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_toolbar_share.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6771dd917048029dea0e897f5fe7bd8c42879ccd
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_toolbar_share.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_share</title>
+    <defs>
+        <path d="M12.25,2 C13.9068542,2 15.25,3.34314575 15.25,5 C15.25,6.65685425 13.9068542,8 12.25,8 C11.9804725,8 11.7192467,7.96445647 11.4707541,7.89780096 L5.93230241,16.2050908 C6.40150564,16.6005646 6.74773454,17.1373071 6.90542312,17.7497523 L17.0945769,17.7497523 C17.4276951,16.4559576 18.6022096,15.5 20,15.5 C21.6568542,15.5 23,16.8431458 23,18.5 C23,20.1568542 21.6568542,21.5 20,21.5 C18.6025704,21.5 17.4283015,20.5445359 17.094835,19.2512495 L6.90516499,19.2512495 C6.57169851,20.5445359 5.39742955,21.5 4,21.5 C2.34314575,21.5 1,20.1568542 1,18.5 C1,16.8431458 2.34314575,15.5 4,15.5 C4.19240202,15.5 4.38057369,15.5181123 4.56290296,15.5527249 L10.1618944,7.15402617 C9.59951533,6.60875215 9.25,5.84519291 9.25,5 C9.25,3.34314575 10.5931458,2 12.25,2 Z M4,17 C3.17157288,17 2.5,17.6715729 2.5,18.5 C2.5,19.3284271 3.17157288,20 4,20 C4.82842712,20 5.5,19.3284271 5.5,18.5 C5.5,17.6715729 4.82842712,17 4,17 Z M20,17 C19.1715729,17 18.5,17.6715729 18.5,18.5 C18.5,19.3284271 19.1715729,20 20,20 C20.8284271,20 21.5,19.3284271 21.5,18.5 C21.5,17.6715729 20.8284271,17 20,17 Z M12.25,3.5 C11.4215729,3.5 10.75,4.17157288 10.75,5 C10.75,5.82842712 11.4215729,6.5 12.25,6.5 C13.0784271,6.5 13.75,5.82842712 13.75,5 C13.75,4.17157288 13.0784271,3.5 12.25,3.5 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_share" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_合并形状" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_up.svg b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_up.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ad576d6e5cc67e2ae313fa6e0367b712bd8f7711
--- /dev/null
+++ b/MultiCommunityApplication/commons/base/src/main/resources/base/media/ic_up.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_20_Max Pressure</title>
+    <g id="1016备份" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-28.000000, -427.000000)">
+            <g id="编组-15" transform="translate(28.000000, 427.000000)">
+                <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                <g id="ic_20_Max-Pressure" fill="#FF7500">
+                    <path d="M9.30103278,6.61175572 L10.6619133,8.92525264 C11.0845842,9.6437932 10.8447345,10.5689279 10.1261939,10.9915988 C9.89422919,11.1280487 9.63000171,11.2 9.36088054,11.2 L6.63911946,11.2 C5.8054821,11.2 5.1296855,10.5242034 5.1296855,9.69056604 C5.1296855,9.42144486 5.20163683,9.15721739 5.33808668,8.92525264 L6.69896722,6.61175572 C7.12163814,5.89321516 8.04677284,5.65336542 8.7653134,6.07603634 C8.98652648,6.20616169 9.17090744,6.39054264 9.30103278,6.61175572 Z" id="三角形"></path>
+                </g>
+            </g>
+            <g id="编组-14" transform="translate(28.000000, 427.000000)"></g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/Index.ets b/MultiCommunityApplication/features/detail/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f7e4e71f1d25398916b2d4efa7ad1acf50289916
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/Index.ets
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { DetailPage } from './src/main/ets/view/DetailPage';
+
+export { CommentBarView } from './src/main/ets/view/CommentBarView';
+
+export { MircoBlogView } from './src/main/ets/view/MircoBlogView';
+
+export { CommentListView } from './src/main/ets/view/CommentListView';
+
+export { default as CardArrayViewModel, CardArray } from './src/main/ets/viewmodel/CardArrayViewModel';
+
+export { CardItem } from './src/main/ets/viewmodel/CardViewModel';
+
+export { CommentInputView } from './src/main/ets/view/CommentInputView';
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/build-profile.json5 b/MultiCommunityApplication/features/detail/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/hvigorfile.ts b/MultiCommunityApplication/features/detail/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiCommunityApplication/features/detail/obfuscation-rules.txt b/MultiCommunityApplication/features/detail/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a1dfa0bd175984dc49e641436aa67b1de1b8abeb
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/obfuscation-rules.txt
@@ -0,0 +1,22 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/oh-package.json5 b/MultiCommunityApplication/features/detail/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..6bd13713c49637549ac065ea7537983f70fc8c3e
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/oh-package.json5
@@ -0,0 +1,13 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "detail",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "base": "file:../../commons/base"
+  }
+}
diff --git a/MultiCommunityApplication/features/detail/src/main/ets/constants/CommonConstants.ets b/MultiCommunityApplication/features/detail/src/main/ets/constants/CommonConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..14296736efd9650aa5d0ef35de3d348cd527b4a8
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/ets/constants/CommonConstants.ets
@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class CommonConstants {
+  /**
+   * Comment bar input width.
+   */
+  static readonly COMMENT_BAR_INPUT_WIDTH: string = '40%';
+
+  /**
+   * Comment bar input margin left.
+   */
+  static readonly COMMENT_BAR_INPUT_ML: string = '4.4%';
+
+  /**
+   * Text area max lines.
+   */
+  static readonly TEXT_AREA_MAX_LINES: number = 8;
+
+  /**
+   * Text area max length.
+   */
+  static readonly TEXT_AREA_MAX_LENGTH: number = 500;
+
+  /**
+   * Time position space.
+   */
+  static readonly TIME_POSITION_SPACE: string = '8vp';
+
+  /**
+   * Review count space.
+   */
+  static readonly REVIEW_COUNT_SPACE: string = '2vp';
+
+  /**
+   * Sub content max lines.
+   */
+  static readonly SUB_CONTENT_MAX_LINES: number = 2;
+
+  /**
+   * List item space.
+   */
+  static readonly LIST_ITEM_SPACE: string = '8vp';
+
+  /**
+   * Max grid column.
+   */
+  static readonly MAX_GRID_COLUMN: number = 3;
+
+  /**
+   * Grid columns template.
+   */
+  static readonly GRID_COLUMNS_TEMPLATE: string = '1fr 1fr 1fr';
+
+  /**
+   * Pinch gesture fingers.
+   */
+  static readonly PINCH_GESTURE_FINGERS: number = 2;
+
+  /**
+   * Suffix fp.
+   */
+  static readonly SUFFIX_FP: string = 'fp';
+
+  /**
+   * Suffix vp.
+   */
+  static readonly SUFFIX_VP: string = 'vp';
+
+  /**
+   * Max scale.
+   */
+  static readonly MAX_SCALE: number = 1.45;
+
+  /**
+   * Min scale.
+   */
+  static readonly MIN_SCALE: number = 0.75;
+
+  /**
+   * Content font size.
+   */
+  static readonly CONTENT_FONT_SIZE: number = 16;
+
+  /**
+   * Content font height.
+   */
+  static readonly CONTENT_FONT_HEIGHT: number = 25.6;
+
+  /**
+   * Picture margin top.
+   */
+  static readonly PICTURE_MARGIN_TOP: number = 8;
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/ets/view/CommentBarView.ets b/MultiCommunityApplication/features/detail/src/main/ets/view/CommentBarView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ee6f3b1aff35c587b18edb7cc9cbe85f5edf4b1e
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/ets/view/CommentBarView.ets
@@ -0,0 +1,162 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonConstants as BaseCommon, BreakpointConstants as Breakpoint } from 'base';
+import { CommonConstants as Common } from '../constants/CommonConstants';
+
+const KEY_TEXTAREA: string = 'textarea_input';
+// [Start comment_bar_view]
+@Component
+export struct CommentBarView {
+  // [StartExclude comment_bar_view]
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_LG;
+  @State isMouseClick: boolean = false;
+  @State content: string = '';
+  isShowInput?: boolean = true;
+  isDarkMode: boolean = false;
+  jumpDetail: () => void = () => {
+  };
+  // [EndExclude comment_bar_view]
+
+  build() {
+    Column() {
+      Row() {
+        if (!this.isMouseClick) {
+          Row() {
+            Text($r('app.string.detail_write_comment'))
+              // [StartExclude comment_bar_view]
+              .fontSize($r('app.float.comment_context_fs'))
+              .fontWeight(FontWeight.Normal)
+              .fontColor(this.isDarkMode ? Color.White : Color.Black)
+              .opacity($r('app.float.comment_context_opacity'))
+            // [EndExclude comment_bar_view]
+          }
+          .borderRadius($r('app.float.comment_context_br'))
+          .backgroundColor(this.isDarkMode ? $r('app.color.dark_mode_gbc') : $r('app.color.comment_context_bgc'))
+          .padding({
+            left: $r('app.float.window_padding_left_sm')
+          })
+          // [StartExclude comment_bar_view]
+          .justifyContent(FlexAlign.Start)
+          .height($r('app.float.comment_input_height'))
+          .width(Common.COMMENT_BAR_INPUT_WIDTH)
+          .margin({ left: Common.COMMENT_BAR_INPUT_ML })
+          .visibility(this.isShowInput ? Visibility.Visible : Visibility.None)
+          // [EndExclude comment_bar_view]
+          .onMouse((event: MouseEvent) => {
+            if (event.button === MouseButton.Left && event.action === MouseAction.Press) {
+              this.isMouseClick = true;
+            }
+          })
+          .onClick(() => {
+            if (!this.isMouseClick) {
+              AppStorage.setOrCreate('isShowInput', true);
+            }
+          })
+          // [StartExclude comment_bar_view]
+          Row() {
+            Image(this.isDarkMode ? $r('app.media.ic_toolbar_comment_light') : $r('app.media.ic_toolbar_comment'))
+              .width($r('app.float.toolbar_comment_image_width'))
+              .aspectRatio(1)
+              .onClick(() => {
+                this.jumpDetail();
+              })
+            Image(this.isDarkMode ? $r('app.media.ic_toolbar_star_light') : $r('app.media.ic_toolbar_star'))
+              .width($r('app.float.toolbar_comment_image_width'))
+              .aspectRatio(1)
+            Image(this.isDarkMode ? $r('app.media.ic_toolbar_heart_light') : $r('app.media.ic_toolbar_heart'))
+              .width($r('app.float.toolbar_comment_image_width'))
+              .aspectRatio(1)
+            Image(this.isDarkMode ? $r('app.media.ic_toolbar_share_light') : $r('app.media.ic_toolbar_share'))
+              .width($r('app.float.toolbar_comment_image_width'))
+              .aspectRatio(1)
+          }
+          .layoutWeight(1)
+          .justifyContent(FlexAlign.SpaceAround)
+          // [EndExclude comment_bar_view]
+        }
+        else {
+          Row() {
+            TextArea({ placeholder: $r('app.string.detail_write_comment'), text: this.content })
+              // [StartExclude comment_bar_view]
+              .fontColor(this.isDarkMode ? $r('app.color.font_color_dark') : $r('app.color.font_color_normal'))
+              .backgroundColor(this.isDarkMode ? $r('app.color.comment_context_bgc_dark') :
+                $r('app.color.comment_context_bgc'))
+              .maxLines(Common.TEXT_AREA_MAX_LINES)
+              .constraintSize({
+                minHeight: $r('app.float.constraint_size')
+              })
+              .enableKeyboardOnFocus(true)
+              .maxLength(Common.TEXT_AREA_MAX_LENGTH)
+              .showCounter(this.content.length === Common.TEXT_AREA_MAX_LENGTH ? true : false)
+              .layoutWeight(1)
+              .onChange((value: string) => {
+                this.content = value;
+              })
+              .id(KEY_TEXTAREA)
+              .onAppear(() => {
+                focusControl.requestFocus(KEY_TEXTAREA)
+              })
+            // [EndExclude comment_bar_view]
+
+            Image(this.isDarkMode ? $r('app.media.ic_toolbar_send_white') : $r('app.media.ic_toolbar_sent'))
+              // [StartExclude comment_bar_view]
+              .width($r('app.float.toolbar_sent_width'))
+              .aspectRatio(1)
+              .margin({
+                left: $r('app.float.toolbar_sent_ml'),
+                bottom: $r('app.float.toolbar_sent_mb')
+              })
+                // [EndExclude comment_bar_view]
+              .onClick(() => {
+                this.isMouseClick = false;
+              })
+          }
+          // [StartExclude comment_bar_view]
+          .width(BaseCommon.FULL_PERCENT)
+          .padding({
+            left: $r('app.float.dialog_pl'),
+            right: $r('app.float.dialog_pr'),
+            top: $r('app.float.dialog_pt'),
+            bottom: $r('app.float.dialog_pt')
+          })
+          .justifyContent(FlexAlign.SpaceBetween)
+          .alignItems(VerticalAlign.Bottom)
+          .backgroundColor(this.isDarkMode ? Color.Transparent : $r('app.color.white'))
+          // [EndExclude comment_bar_view]
+        }
+      }
+      // [StartExclude comment_bar_view]
+      .width(BaseCommon.FULL_PERCENT)
+      .height($r('app.float.toolbar_comment_height'))
+      .borderWidth({ top: $r('app.float.comment_bar_border_with') })
+      .borderColor(this.isDarkMode ? $r('app.color.title_board_color') : $r('app.color.comment_bar_border_color'))
+      // [EndExclude comment_bar_view]
+    }
+    // [StartExclude comment_bar_view]
+    .width(BaseCommon.FULL_PERCENT)
+    .height(this.getColumnHeight())
+    // [EndExclude comment_bar_view]
+  }
+  // [StartExclude comment_bar_view]
+  getColumnHeight(): Resource {
+    if (this.currentBreakpoint === Breakpoint.BREAKPOINT_LG) {
+      return $r('app.float.toolbar_comment_height');
+    }
+    return this.isShowInput ? $r('app.float.toolbar_comment_input_height') : $r('app.float.toolbar_comment_height');
+  }
+  // [EndExclude comment_bar_view]
+}
+// [End comment_bar_view]
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/ets/view/CommentInputView.ets b/MultiCommunityApplication/features/detail/src/main/ets/view/CommentInputView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..cb5c1014435f5c1d38949a556c47458c98ccc003
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/ets/view/CommentInputView.ets
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonConstants as BaseCommon } from 'base';
+import { CommonConstants as Common } from '../constants/CommonConstants';
+
+const TEXTAREA_KEY: string = 'textarea';
+const BUTTON_KEY: string = 'button';
+
+@Component
+export struct CommentInputView {
+  @State content: string = '';
+  darkMode: boolean = true;
+
+  build() {
+    Row() {
+      TextArea({ placeholder: $r('app.string.detail_write_comment'), text: this.content })
+        .id(TEXTAREA_KEY)
+        .maxLines(Common.TEXT_AREA_MAX_LINES)
+        .constraintSize({
+          minHeight: $r('app.float.constraint_size')
+        })
+        .enableKeyboardOnFocus(true)
+        .maxLength(Common.TEXT_AREA_MAX_LENGTH)
+        .showCounter(this.content.length === Common.TEXT_AREA_MAX_LENGTH ? true : false)
+        .layoutWeight(1)
+        .onChange((value: string) => {
+          this.content = value;
+        })
+        .onAppear(() => {
+          focusControl.requestFocus(TEXTAREA_KEY);
+        })
+
+      Image($r('app.media.ic_toolbar_sent'))
+        .width($r('app.float.toolbar_sent_width'))
+        .aspectRatio(1)
+        .margin({
+          left: $r('app.float.toolbar_sent_ml'),
+          bottom: $r('app.float.toolbar_sent_mb')
+        })
+        .id(BUTTON_KEY)
+        .onClick(() => {
+          AppStorage.setOrCreate('isShowInput', false);
+          focusControl.requestFocus(BUTTON_KEY);
+        })
+    }
+    .width(BaseCommon.FULL_PERCENT)
+    .padding({
+      left: $r('app.float.dialog_pl'),
+      right: $r('app.float.dialog_pr'),
+      top: $r('app.float.dialog_pt'),
+      bottom: $r('app.float.dialog_pt')
+    })
+    .justifyContent(FlexAlign.SpaceBetween)
+    .alignItems(VerticalAlign.Bottom)
+    .backgroundColor($r('app.color.white'))
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/ets/view/CommentItemView.ets b/MultiCommunityApplication/features/detail/src/main/ets/view/CommentItemView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..8edde1ae51ce586b4ca6e5e48fe4adf9c4717a78
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/ets/view/CommentItemView.ets
@@ -0,0 +1,165 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  CommentItemInterface,
+  CommonConstants as BaseCommon,
+  BreakpointType,
+  BreakpointConstants as Breakpoint
+} from 'base';
+import { CommonConstants as Common } from '../constants/CommonConstants';
+
+@Component
+export struct CommentItemView {
+  @StorageLink('isFoldHorizontal') isFoldHorizontal: boolean = true;
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM;
+  commentItem: CommentItemInterface = {} as CommentItemInterface;
+  authorName: ResourceStr = '';
+  isDarkMode: boolean = false;
+
+  build() {
+    Column() {
+      Row() {
+        Row() {
+          Image(this.commentItem.icon)
+            .width($r('app.float.comment_item_icon_width'))
+            .aspectRatio(1)
+            .borderRadius($r('app.float.comment_item_icon_br'))
+
+          Text(this.commentItem.name)
+            .fontSize($r('app.float.comment_item_name_fs'))
+            .fontWeight(BaseCommon.FONT_WEIGHT_500)
+            .margin({ left: $r('app.float.comment_item_name_ml') })
+            .fontColor(this.isDarkMode ? Color.White : Color.Black)
+
+          if (this.authorName === this.commentItem.name) {
+            Row() {
+              Text($r('app.string.author_type_name'))
+                .fontSize($r('app.float.author_type_name_fs'))
+                .fontWeight(FontWeight.Normal)
+                .fontColor(this.isDarkMode ? Color.White : $r('app.color.author_type_name_color'))
+            }
+            .borderColor(this.isDarkMode ? Color.White : $r('app.color.author_type_name_color'))
+            .borderRadius($r('app.float.author_type_name_br'))
+            .borderWidth($r('app.float.author_type_name_fw'))
+            .padding($r('app.float.author_type_name_padding'))
+            .margin({ left: $r('app.float.author_type_name_ml') })
+          }
+        }
+        .height($r('app.float.comment_item_title_height'))
+        .justifyContent(FlexAlign.Start)
+
+        Row() {
+          Text(`${this.commentItem.favorCount}`)
+            .fontSize($r('app.float.comment_item_favor_fs'))
+            .fontWeight(FontWeight.Normal)
+            .fontColor(this.isDarkMode ? $r('app.color.font_color_dark') : $r('app.color.comment_item_favor_color'))
+
+          Image(this.isDarkMode ? $r('app.media.ic_comment_like') : $r('app.media.ic_public_favor'))
+            .width($r('app.float.comment_item_favor_width'))
+            .aspectRatio(1)
+            .margin({ left: $r('app.float.comment_item_favor_ml') })
+        }
+      }
+      .justifyContent(FlexAlign.SpaceBetween)
+      .width(BaseCommon.FULL_PERCENT)
+
+      Text(this.commentItem.content)
+        .fontSize($r('app.float.comment_item_content_fs'))
+        .margin({
+          left: $r('app.float.comment_item_content_ml')
+        })
+        .fontColor(this.isDarkMode ? Color.White : Color.Black)
+
+      Row({ space: Common.TIME_POSITION_SPACE }) {
+        Text(this.commentItem.timePosition)
+          .fontSize($r('app.float.time_position_fs'))
+          .fontWeight(FontWeight.Normal)
+          .opacity($r('app.float.time_position_opacity'))
+          .fontColor(this.isDarkMode ? Color.White : Color.Black)
+
+        if (this.commentItem.reviewCnt) {
+          Row({ space: Common.REVIEW_COUNT_SPACE }) {
+            Text(`${this.commentItem.reviewCnt}`)
+              .fontSize($r('app.float.review_count_fs'))
+              .fontWeight(FontWeight.Normal)
+              .fontColor(this.isDarkMode ? Color.White : Color.Black)
+              .opacity($r('app.float.review_count_opacity'))
+
+            Text($r('app.string.replay'))
+              .fontSize($r('app.float.replay_fs'))
+              .fontWeight(FontWeight.Normal)
+              .fontColor(this.isDarkMode ? Color.White : Color.Black)
+              .opacity($r('app.float.replay_opacity'))
+          }
+          .backgroundColor(this.isDarkMode ? $r('app.color.dark_mode_gbc') : $r('app.color.replay_bgc'))
+          .borderRadius($r('app.float.replay_board_radius'))
+          .padding({
+            left: $r('app.float.replay_padding_left'),
+            right: $r('app.float.replay_padding_left')
+          })
+          .height($r('app.float.replay_area_height'))
+        } else {
+          Text($r('app.string.replay'))
+            .fontSize($r('app.float.replay_fs'))
+            .fontWeight(BaseCommon.FONT_WEIGHT_500)
+            .opacity($r('app.float.replay_normal_opacity'))
+            .fontColor(this.isDarkMode ? Color.White : Color.Black)
+        }
+      }
+      .width(BaseCommon.FULL_PERCENT)
+      .height($r('app.float.time_position_height'))
+      .justifyContent(FlexAlign.Start)
+      .margin({
+        left: $r('app.float.comment_item_content_ml')
+      })
+
+      if (this.commentItem.reviewCnt) {
+        Column({ space: Common.REVIEW_COUNT_SPACE }) {
+          Text(this.commentItem.subContent)
+            .fontColor(this.isDarkMode ? Color.White : Color.Black)
+            .fontSize($r('app.float.review_count_normal_fs'))
+            .fontWeight(BaseCommon.FONT_WEIGHT_500)
+            .maxLines(Common.SUB_CONTENT_MAX_LINES)
+            .textOverflow({ overflow: TextOverflow.Ellipsis })
+
+          Text($r('app.string.read_all_replay'))
+            .fontSize($r('app.float.read_all_replay_fs'))
+            .fontColor(this.isDarkMode ? Color.White : $r('app.color.read_all_replay_fc'))
+            .fontWeight(BaseCommon.FONT_WEIGHT_500)
+        }
+        .backgroundColor(this.isDarkMode ? $r('app.color.dark_mode_gbc') : $r('app.color.read_all_replay_bgc'))
+        .borderRadius($r('app.float.read_all_replay_br'))
+        .margin({
+          left: $r('app.float.comment_item_content_ml'),
+          right: new BreakpointType<ResourceStr>($r('app.float.read_all_replay_mr_sm'),
+            this.isFoldHorizontal ? $r('app.float.all_replay_mr_md_fold') : $r('app.float.all_replay_mr_md_normal'),
+            $r('app.float.replay_all_replay_mr_lg'))
+            .getValue(this.currentBreakpoint),
+          bottom: $r('app.float.sub_comment_margin_bottom')
+        })
+        .alignItems(HorizontalAlign.Start)
+        .padding({
+          left: $r('app.float.sub_content_pl'),
+          right: $r('app.float.sub_content_pl'),
+          top: $r('app.float.sub_content_pt'),
+          bottom: $r('app.float.sub_content_pt')
+        })
+      }
+    }
+    .width(BaseCommon.FULL_PERCENT)
+    .alignItems(HorizontalAlign.Start)
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/ets/view/CommentListView.ets b/MultiCommunityApplication/features/detail/src/main/ets/view/CommentListView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a27c24bfd11d3e09ab97362e0cbcb5632328cbab
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/ets/view/CommentListView.ets
@@ -0,0 +1,116 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, CommentItemInterface, } from 'base';
+import { CommonConstants as Common } from '../constants/CommonConstants';
+import { CommentItemView } from '../view/CommentItemView';
+import { CommentBarView } from '../view/CommentBarView';
+import { CardArray } from '../viewmodel/CardArrayViewModel';
+import CardArrayViewModel from '../viewmodel/CardArrayViewModel';
+
+@Component
+export struct CommentListView {
+  @StorageLink('isFoldHorizontal') isFoldHorizontal: boolean = true;
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM;
+  @StorageLink('cardArrayViewModel') cardArrayViewModel: CardArray = CardArrayViewModel.getInstance();
+  @StorageProp('selectCardIndex') selectCardIndex: number = 0;
+  focusHide?: boolean = false;
+  commentPadding?: ResourceStr;
+  isDarkMode: boolean = false;
+
+  @Builder
+  itemHead() {
+    Row() {
+      Text($r('app.string.comment_list_title'))
+        .fontSize($r('app.float.comment_list_title_fs'))
+        .fontWeight(BaseCommon.FONT_WEIGHT_500)
+        .width(BaseCommon.FULL_PERCENT)
+        .fontColor(this.isDarkMode ? Color.White : Color.Black)
+    }
+    .width(BaseCommon.FULL_PERCENT)
+    .height($r('app.float.comment_list_title_height'))
+    .padding({
+      top: $r('app.float.tab_bar_padding_top')
+    })
+  }
+
+  build() {
+    Column() {
+      Tabs({ barPosition: BarPosition.Start }) {
+        TabContent() {
+          List({ space: Common.LIST_ITEM_SPACE }) {
+            ForEach(this.cardArrayViewModel.cardArray[this.selectCardIndex].commentList,
+              (item: CommentItemInterface) => {
+                ListItem() {
+                  CommentItemView({
+                    commentItem: item,
+                    authorName: this.cardArrayViewModel.cardArray[this.selectCardIndex].name,
+                    isDarkMode: this.isDarkMode
+                  })
+                }
+              }, (item: CommentItemInterface, index: number) => index + JSON.stringify(item))
+          }
+          .nestedScroll({
+            scrollForward: (this.isFoldHorizontal && this.currentBreakpoint === Breakpoint.BREAKPOINT_MD) ?
+              NestedScrollMode.PARENT_FIRST : NestedScrollMode.PARENT_FIRST,
+            scrollBackward: NestedScrollMode.SELF_FIRST
+          })
+          .scrollBar(BarState.Off)
+          .edgeEffect(EdgeEffect.None)
+          .margin({
+            top: $r('app.float.tab_content_margin_top')
+          })
+        }
+        .tabBar(this.itemHead())
+        .align(Alignment.Top)
+      }
+      .vertical(false)
+      .layoutWeight(1)
+      .padding({
+        left: this.commentPadding ?? this.getPadding(),
+        right: this.commentPadding ?? this.getPadding()
+      })
+
+      CommentBarView()
+        .visibility(this.isShow() ? Visibility.Visible : Visibility.None)
+    }
+    .justifyContent(FlexAlign.End)
+  }
+
+  isShow(): boolean {
+    if (this.focusHide) {
+      return false;
+    }
+    if ((this.currentBreakpoint === Breakpoint.BREAKPOINT_MD && this.isFoldHorizontal) ||
+      (this.currentBreakpoint === Breakpoint.BREAKPOINT_LG)) {
+      return true;
+    }
+    return false;
+  }
+
+  getPadding(): Resource {
+    if (this.currentBreakpoint === Breakpoint.BREAKPOINT_SM) {
+      return $r('app.float.window_padding_left_sm');
+    }
+    if (this.currentBreakpoint === Breakpoint.BREAKPOINT_MD) {
+      if (this.isFoldHorizontal) {
+        return $r('app.float.window_padding_left_sm');
+      } else {
+        return $r('app.float.window_padding_left_md');
+      }
+    }
+    return $r('app.float.window_padding_left_lg');
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/ets/view/DetailPage.ets b/MultiCommunityApplication/features/detail/src/main/ets/view/DetailPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6f57f8257bf936f9e3566697d018c9cea3586355
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/ets/view/DetailPage.ets
@@ -0,0 +1,211 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants as Breakpoint, CommonConstants as Common, BreakpointType } from 'base';
+import { DetailTitleView } from './DetailTitleView';
+import { MircoBlogView } from './MircoBlogView';
+import { CommentListView } from './CommentListView';
+import { CommentBarView } from './CommentBarView';
+import { CommentInputView } from './CommentInputView';
+import { CardArray } from '../viewmodel/CardArrayViewModel';
+import { CardItem } from '../viewmodel/CardViewModel';
+import CardArrayViewModel from '../viewmodel/CardArrayViewModel';
+
+const KEY_BACKGROUND: string = 'background';
+// [Start detail_page]
+@Component
+export struct DetailPage {
+  // [StartExclude detail_page]
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM;
+  @StorageLink('isFoldHorizontal') isFoldHorizontal: boolean = true;
+  @StorageLink('cardArrayViewModel') cardArrayViewModel: CardArray = CardArrayViewModel.getInstance();
+  @StorageLink('selectCardIndex') selectCardIndex: number = 0;
+  @StorageLink('isDetailPage') isDetailPage: boolean = false;
+  @StorageLink('isShowInput') isShowInput: boolean = false;
+  @State cardItem: CardItem = this.cardArrayViewModel.cardArray[this.selectCardIndex];
+  isShowedButton?: boolean = true;
+
+  aboutToAppear() {
+    this.isDetailPage = true;
+  }
+  // [EndExclude detail_page]
+  build() {
+    Stack() {
+      Column() {
+        DetailTitleView({ isShowedButton: this.isShowedButton })
+        Scroll() {
+          GridRow({
+            columns: {
+              sm: Breakpoint.GRID_ROW_COLUMNS[2],
+              md: Breakpoint.GRID_ROW_COLUMNS[3],
+              lg: Breakpoint.GRID_ROW_COLUMNS[0]
+            }
+          }) {
+            GridCol({
+              span: {
+                sm: Breakpoint.GRID_COLUMN_SPANS[5],
+                md: this.isFoldHorizontal ? Breakpoint.GRID_COLUMN_SPANS[4] : Breakpoint.GRID_COLUMN_SPANS[3],
+                lg: Breakpoint.GRID_COLUMN_SPANS[0]
+              }
+            }) {
+              if ((this.isFoldHorizontal && this.currentBreakpoint === Breakpoint.BREAKPOINT_MD)) {
+                Scroll() {
+                  MircoBlogView({
+                    cardItem: this.cardItem,
+                    index: this.selectCardIndex
+                  })
+                    // [StartExclude detail_page]
+                    .margin({
+                      top: $r('app.float.mirco_blog_mt')
+                    })
+                  // [EndExclude detail_page]
+                }
+                // [StartExclude detail_page]
+                .scrollBar(BarState.Off)
+                .align(Alignment.Top)
+                .layoutWeight(1)
+                // [EndExclude detail_page]
+              } else {
+                MircoBlogView({
+                  cardItem: this.cardItem,
+                  index: this.selectCardIndex
+                })
+                  // [StartExclude detail_page]
+                  .margin({
+                    top: $r('app.float.mirco_blog_mt')
+                  })
+                // [EndExclude detail_page]
+              }
+            }
+            // [StartExclude detail_page]
+            .width(Common.FULL_PERCENT)
+            .padding({
+              left: new BreakpointType($r('app.float.window_padding_left_sm'), $r('app.float.window_padding_left_md'),
+                $r('app.float.window_padding_left_lg')).getValue(this.currentBreakpoint),
+              right: new BreakpointType($r('app.float.window_padding_left_sm'), $r('app.float.window_padding_left_md'),
+                $r('app.float.window_padding_left_lg')).getValue(this.currentBreakpoint)
+            })
+            // [EndExclude detail_page]
+
+            GridCol({
+              span: {
+                sm: Breakpoint.GRID_COLUMN_SPANS[5],
+                md: this.isFoldHorizontal ? Breakpoint.GRID_COLUMN_SPANS[6] : Breakpoint.GRID_COLUMN_SPANS[3],
+                lg: Breakpoint.GRID_COLUMN_SPANS[0]
+              }
+            }) {
+              CommentListView()
+            }
+            // [StartExclude detail_page]
+            .height(Common.FULL_PERCENT)
+            .width(Common.FULL_PERCENT)
+            // [EndExclude detail_page]
+          }
+        }
+        .visibility(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? Visibility.None : Visibility.Visible)
+        // [StartExclude detail_page]
+        .layoutWeight(1)
+        .scrollBar(BarState.Off)
+
+        CommentBarView()
+          .visibility(this.isShow() ? Visibility.Visible : Visibility.None)
+        // [EndExclude detail_page]
+
+        Column() {
+          SideBarContainer() {
+            Column() {
+              CommentListView()
+            }
+            // [StartExclude detail_page]
+            .backgroundColor($r('app.color.acetate'))
+            // [EndExclude detail_page]
+
+            Column() {
+              Scroll() {
+                MircoBlogView({
+                  cardItem: this.cardItem,
+                  index: this.selectCardIndex
+                })
+                  // [StartExclude detail_page]
+                  .margin({
+                    top: $r('app.float.mirco_blog_mt')
+                  })
+                // [EndExclude detail_page]
+              }
+              // [StartExclude detail_page]
+              .padding({
+                left: $r('app.float.window_padding_left_lg'),
+                right: $r('app.float.window_padding_left_lg')
+              })
+              .scrollBar(BarState.Off)
+              // [EndExclude detail_page]
+            }
+            .justifyContent(FlexAlign.Start)
+
+          }
+          // [StartExclude detail_page]
+          .sideBarPosition(SideBarPosition.End)
+          .showControlButton(false)
+          .sideBarWidth($r('app.float.side_bar_with'))
+          .minSideBarWidth($r('app.float.min_side_bar_width'))
+          .maxSideBarWidth($r('app.float.max_side_bar_width'))
+          .autoHide(false)
+          .divider(null)
+          // [EndExclude detail_page]
+        }
+        .visibility(this.currentBreakpoint !== Breakpoint.BREAKPOINT_LG ? Visibility.None : Visibility.Visible)
+        // [StartExclude detail_page]
+        .width(Common.FULL_PERCENT)
+        .layoutWeight(1)
+        // [EndExclude detail_page]
+      }
+      // [StartExclude detail_page]
+
+      .height(Common.FULL_PERCENT)
+      .justifyContent(FlexAlign.End)
+      .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM])
+
+      if (this.isShowInput) {
+        Stack() {
+          Column()
+            .justifyContent(FlexAlign.End)
+            .width(Common.FULL_PERCENT)
+            .height(Common.FULL_PERCENT)
+            .backgroundColor(Color.Black)
+            .opacity($r('app.float.text_input_bgc_opacity'))
+            .id(KEY_BACKGROUND)
+            .onClick(() => {
+              AppStorage.setOrCreate('isShowInput', false);
+              focusControl.requestFocus(KEY_BACKGROUND);
+            })
+
+          CommentInputView()
+        }
+        .alignContent(Alignment.Bottom)
+      }
+      // [EndExclude detail_page]
+    }
+  }
+  // [StartExclude detail_page]
+  isShow(): boolean {
+    if ((this.currentBreakpoint === Breakpoint.BREAKPOINT_MD && !this.isFoldHorizontal) ||
+      (this.currentBreakpoint === Breakpoint.BREAKPOINT_SM)) {
+      return true;
+    }
+    return false;
+  }
+  // [EndExclude detail_page]
+}
+// [End detail_page]
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/ets/view/DetailTitleView.ets b/MultiCommunityApplication/features/detail/src/main/ets/view/DetailTitleView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f74bc4fd2823fceffa38550d13be106e4c372fe4
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/ets/view/DetailTitleView.ets
@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants as Breakpoint, BreakpointType, CommonConstants as BaseCommon } from 'base';
+
+@Component
+export struct DetailTitleView {
+  @StorageLink('currentBreakpoint') @Watch('checkFoldable') currentBreakpoint: string = Breakpoint.BREAKPOINT_LG;
+  @StorageLink('isFoldHorizontal') isFoldHorizontal: boolean = true;
+  @StorageLink('pageInfos') pageInfos: NavPathStack = new NavPathStack();
+  @State foldable: boolean = this.currentBreakpoint === Breakpoint.BREAKPOINT_MD;
+  isShowedButton?: boolean = true;
+
+  checkFoldable() {
+    this.foldable = this.currentBreakpoint === Breakpoint.BREAKPOINT_MD;
+  }
+
+  build() {
+    Column() {
+      Blank()
+        .height(deviceInfo.deviceType !== BaseCommon.DEVICE_2IN1 ? $r("app.float.title_blank_height") :
+          $r('app.float.blank_top_height'))
+        .width(BaseCommon.FULL_PERCENT)
+
+      Row() {
+        Stack() {
+          Row() {
+            Text($r('app.string.card_detail_title'))
+              .height(BaseCommon.FULL_PERCENT)
+              .fontSize($r('app.float.card_detail_fs'))
+              .fontWeight(BaseCommon.FONT_WEIGHT_500)
+          }
+          .width(BaseCommon.FULL_PERCENT)
+          .justifyContent(FlexAlign.Center)
+
+          Row() {
+            Image($r('app.media.ic_public_back'))
+              .margin({
+                left: new BreakpointType($r('app.float.window_padding_left_sm'), $r('app.float.window_padding_left_md'),
+                  $r('app.float.window_padding_left_lg')).getValue(this.currentBreakpoint)
+              })
+              .width($r('app.float.card_detail_back_width'))
+              .aspectRatio(1)
+              .onClick(() => {
+                this.pageInfos.pop();
+                AppStorage.setOrCreate('isDetailPage', false);
+              })
+
+            Image(this.isFoldHorizontal ? $r('app.media.ic_fold_horizontal') : $r('app.media.ic_fold_vertical'))
+              .margin({ right: $r("app.float.card_detail_fold_mr") })
+              .width($r('app.float.card_detail_more_width'))
+              .aspectRatio(1)
+              .visibility(this.isShowedButton && this.foldable ? Visibility.Visible : Visibility.Hidden)
+              .onClick(() => {
+                this.isFoldHorizontal = !this.isFoldHorizontal;
+              })
+          }
+          .width(BaseCommon.FULL_PERCENT)
+          .height(BaseCommon.FULL_PERCENT)
+          .justifyContent(FlexAlign.SpaceBetween)
+        }
+        .height(BaseCommon.FULL_PERCENT)
+      }
+      .height($r('app.float.detail_title_height'))
+    }
+    .width(BaseCommon.FULL_PERCENT)
+    .backgroundColor($r('app.color.card_detail_title_bgc'))
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/ets/view/MircoBlogView.ets b/MultiCommunityApplication/features/detail/src/main/ets/view/MircoBlogView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ffe1fbd1c5474bd70a49ed540c3703b9767db68f
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/ets/view/MircoBlogView.ets
@@ -0,0 +1,200 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CardItemInterface, BreakpointConstants as Breakpoint, CommonConstants as BaseCommon } from 'base';
+import { CardItem } from '../viewmodel/CardViewModel';
+import { CommonConstants as Common } from '../constants/CommonConstants';
+
+interface ImageInfo {
+  width: number;
+  height: number;
+  componentWidth: number;
+  componentHeight: number;
+  loadingStatus: number;
+  contentWidth: number;
+  contentHeight: number;
+  contentOffsetX: number;
+  contentOffsetY: number;
+}
+// [Start mirco_blog_view]
+@Component
+export struct MircoBlogView {
+  // [StartExclude mirco_blog_view]
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_LG;
+  @StorageLink('isDetailPage') isDetailPage: boolean = false;
+  @StorageLink('isPictureDetail') isPictureDetail: boolean = false;
+  @StorageLink('pageInfos') pageInfos: NavPathStack = new NavPathStack();
+  @State index: number = 0;
+  @State cardItem: CardItem = new CardItem({} as CardItemInterface, 0);
+  @State showPicture: boolean = true;
+  @State imageWidth: string = BaseCommon.FULL_PERCENT;
+  @State contentFontSize: number = Common.CONTENT_FONT_SIZE;
+  @State contentFontHeight: number = Common.CONTENT_FONT_HEIGHT;
+  @State scaleValue: number = 1;
+  @State pinchValue: number = 1;
+  @State pictureMarginTop: number = Common.PICTURE_MARGIN_TOP;
+  isDarkMode: boolean = false;
+  jumpDetail: () => void = () => {
+  };
+
+  jump(index: number) {
+    AppStorage.setOrCreate('selectCardIndex', this.index);
+    this.pageInfos.pushPath({ name: 'pictureDetail', param: index });
+  }
+  // [EndExclude mirco_blog_view]
+  build() {
+    Column() {
+      if (this.cardItem !== undefined) {
+        // [StartExclude mirco_blog_view]
+        Row() {
+          Row() {
+            Image(this.cardItem.icon)
+              .width($r('app.float.blog_icon_width'))
+              .aspectRatio(1)
+              .borderRadius($r('app.float.blog_icon_br'))
+
+            Column() {
+              Text(this.cardItem.name)
+                .fontSize($r('app.float.blog_name_fs'))
+                .fontWeight(BaseCommon.FONT_WEIGHT_500)
+                .height($r('app.float.blog_name_height'))
+                .fontColor(this.isDarkMode ? $r('app.color.card_item_name_fc_dark') : Color.Black)
+
+              Text(this.cardItem.authorType)
+                .fontWeight(FontWeight.Normal)
+                .fontSize($r('app.float.author_type_fs'))
+                .fontColor(this.isDarkMode ? $r('app.color.author_type_fc_dark') : $r('app.color.author_type_color'))
+                .height($r('app.float.author_type_height'))
+            }
+            .margin({ left: $r('app.float.blog_title_ml') })
+            .justifyContent(FlexAlign.Start)
+            .alignItems(HorizontalAlign.Start)
+          }
+          .justifyContent(FlexAlign.Start)
+
+          Row() {
+            Image(this.isDarkMode ? $r('app.media.ic_public_add_white') : $r('app.media.ic_public_add'))
+              .width($r('app.float.blog_add_width'))
+              .aspectRatio(1)
+
+            Text($r('app.string.blog_follow'))
+              .fontSize($r('app.float.follow_font_size'))
+              .margin({ left: $r('app.float.follow_margin_left') })
+              .fontColor(this.isDarkMode ? Color.White : $r('app.color.follow_font_color'))
+          }
+          .borderRadius($r('app.float.blog_title_follow_br'))
+          .backgroundColor(this.isDarkMode ? $r('app.color.dark_mode_gbc') : $r('app.color.replay_bgc'))
+          .padding({
+            left: $r('app.float.blog_title_padding_left'),
+            right: $r('app.float.blog_title_padding_left')
+          })
+          .width($r('app.float.blog_title_follow_width'))
+          .height($r('app.float.blog_title_follow_height'))
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .width(BaseCommon.FULL_PERCENT)
+        .padding({
+          top: $r('app.float.card_title_padding'),
+          bottom: $r('app.float.card_title_padding')
+        })
+        // [EndExclude mirco_blog_view]
+        Row() {
+          Text(this.cardItem.content)
+            .fontSize(`${this.contentFontSize}${Common.SUFFIX_FP}`)
+            .lineHeight(`${this.contentFontHeight}${Common.SUFFIX_VP}`)
+              // [StartExclude mirco_blog_view]
+            .width(BaseCommon.FULL_PERCENT)
+            .onClick(() => {
+              this.jumpDetail();
+            })
+            .fontColor(this.isDarkMode ? $r('app.color.card_item_content_fc_dark') : Color.Black)
+            .copyOption(CopyOptions.LocalDevice)
+          // [EndExclude mirco_blog_view]
+        }
+        .gesture(
+          PinchGesture({ fingers: Common.PINCH_GESTURE_FINGERS })
+            .onActionUpdate((event?: GestureEvent) => {
+              if (event && (this.isDetailPage || this.isPictureDetail)) {
+                let tmp = this.pinchValue * event.scale;
+                if (tmp > Common.MAX_SCALE) {
+                  tmp = Common.MAX_SCALE;
+                }
+                if (tmp < Common.MIN_SCALE) {
+                  tmp = Common.MIN_SCALE;
+                }
+                this.scaleValue = tmp;
+                this.contentFontSize = Common.CONTENT_FONT_SIZE * this.scaleValue;
+                this.contentFontHeight = Common.CONTENT_FONT_HEIGHT * this.scaleValue;
+                this.pictureMarginTop = Common.PICTURE_MARGIN_TOP * (this.scaleValue > 1 ? this.scaleValue : 1);
+              }
+            })
+            .onActionEnd(() => {
+              this.pinchValue = this.scaleValue;
+            })
+        )
+        // [StartExclude mirco_blog_view]
+        if (this.showPicture) {
+          if (this.cardItem.pictureArray.length === 1) {
+            Image(this.cardItem.pictureArray[0])
+              .onComplete((event: ImageInfo) => {
+                if (event.width < event.height) {
+                  this.imageWidth = BaseCommon.HALF_PERCENT;
+                }
+              })
+              .width(this.imageWidth)
+              .onClick(() => {
+                this.jump(0);
+              })
+              .margin({ top: `${this.pictureMarginTop}${Common.SUFFIX_VP}` })
+          } else {
+            Grid() {
+              ForEach(this.cardItem.pictureArray, (item: Resource, index: number) => {
+                GridItem() {
+                  Image(item)
+                    .width(BaseCommon.FULL_PERCENT)
+                    .aspectRatio(1)
+                    .onClick(() => {
+                      this.jump(index);
+                    })
+                    .autoResize(true)
+                }
+              }, (item: Resource, index: number) => index + JSON.stringify(item))
+            }
+            .columnsTemplate(Common.GRID_COLUMNS_TEMPLATE)
+            .columnsGap($r('app.float.grid_gap'))
+            .rowsGap($r('app.float.grid_gap'))
+            .width(BaseCommon.FULL_PERCENT)
+            .aspectRatio(this.getAspectRatio(this.cardItem.pictureArray.length))
+            .margin({ top: `${this.pictureMarginTop}${Common.SUFFIX_VP}` })
+          }
+        }
+        // [EndExclude mirco_blog_view]
+      }
+    }
+    // [StartExclude mirco_blog_view]
+    .alignItems(HorizontalAlign.Start)
+    .flexShrink(1)
+    .width(BaseCommon.FULL_PERCENT)
+    // [EndExclude mirco_blog_view]
+  }
+  // [StartExclude mirco_blog_view]
+  getAspectRatio(length: number): number {
+    let rowNumber: number = (length % Common.MAX_GRID_COLUMN === 0) ? length / Common.MAX_GRID_COLUMN :
+      (Math.floor(length / Common.MAX_GRID_COLUMN) + 1);
+    return Common.MAX_GRID_COLUMN / rowNumber;
+  }
+  // [EndExclude mirco_blog_view]
+}
+// [End mirco_blog_view]
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/ets/viewmodel/CardArrayViewModel.ets b/MultiCommunityApplication/features/detail/src/main/ets/viewmodel/CardArrayViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4db56c718dd0dc4d11de1d51f0ee7d90c379ce0b
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/ets/viewmodel/CardArrayViewModel.ets
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CardItemInterface, CARD_LIST } from 'base';
+import { CardItem } from './CardViewModel';
+
+export class CardArray {
+  cardArray: CardItem[] = [];
+
+  constructor() {
+    CARD_LIST.forEach((item: CardItemInterface, index: number) => {
+      this.cardArray.push(new CardItem(item, index));
+    });
+  }
+
+  getInstance() {
+    return this;
+  }
+}
+
+export default new CardArray();
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/ets/viewmodel/CardViewModel.ets b/MultiCommunityApplication/features/detail/src/main/ets/viewmodel/CardViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6319546465a1838c3843114f7873dc75ebd79a2b
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/ets/viewmodel/CardViewModel.ets
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { COMMENT_LIST, CommentItemInterface, CardItemInterface, CommentItem, PICTURE_ARRAY_LIST } from 'base';
+
+export class CardItem implements CardItemInterface {
+  icon: ResourceStr;
+  name: ResourceStr;
+  authorType: ResourceStr;
+  content: ResourceStr;
+  pictureArray: Resource[] = [];
+  commentList: CommentItem[] = [];
+
+  constructor(card: CardItemInterface, index: number) {
+    this.icon = card.icon;
+    this.name = card.name;
+    this.authorType = card.authorType;
+    this.content = card.content;
+    this.pictureArray = PICTURE_ARRAY_LIST[index % PICTURE_ARRAY_LIST.length];
+
+    COMMENT_LIST.forEach((item: CommentItemInterface) => {
+      this.commentList.push(new CommentItem(item));
+    });
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/module.json5 b/MultiCommunityApplication/features/detail/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..e31989607abace49b9a3a5d8b3f4db87609e2c49
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/module.json5
@@ -0,0 +1,12 @@
+{
+  "module": {
+    "name": "detail",
+    "type": "har",
+    "description": "$string:shared_desc",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/element/color.json b/MultiCommunityApplication/features/detail/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..d8d5403499e38a65f1f2f99594d966bfc33f741c
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/resources/base/element/color.json
@@ -0,0 +1,88 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "acetate",
+      "value": "#00000000"
+    },
+    {
+      "name": "comment_bar_border_color",
+      "value": "#0D000000"
+    },
+    {
+      "name": "comment_item_favor_color",
+      "value": "#99000000"
+    },
+    {
+      "name": "card_detail_title_bgc",
+      "value": "#F2F2F2"
+    },
+    {
+      "name": "author_type_color",
+      "value": "#80000000"
+    },
+    {
+      "name": "follow_font_color",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "blog_title_follow_bc",
+      "value": "#0859F7"
+    },
+    {
+      "name": "author_type_name_color",
+      "value": "#CC0A59F7"
+    },
+    {
+      "name": "replay_bgc",
+      "value": "#0D000000"
+    },
+    {
+      "name": "read_all_replay_fc",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "read_all_replay_bgc",
+      "value": "#08000000"
+    },
+    {
+      "name": "comment_context_bgc",
+      "value": "#0D000000"
+    },
+    {
+      "name": "comment_context_bgc_dark",
+      "value": "#0DFFFFFF"
+    },
+    {
+      "name": "dark_mode_gbc",
+      "value": "#26282A"
+    },
+    {
+      "name": "font_color_dark",
+      "value": "#99FFFFFF"
+    },
+    {
+      "name": "font_color_normal",
+      "value": "#99000000"
+    },
+    {
+      "name": "title_board_color",
+      "value": "#26282A"
+    },
+    {
+      "name": "card_item_content_fc_dark",
+      "value": "#CCFFFFFF"
+    },
+    {
+      "name": "card_item_name_fc_dark",
+      "value": "#E6FFFFFF"
+    },
+    {
+      "name": "author_type_fc_dark",
+      "value": "#80FFFFFF"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/element/float.json b/MultiCommunityApplication/features/detail/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..7c18f56efabaeeda900f7ea21ed43c675ac57242
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/resources/base/element/float.json
@@ -0,0 +1,392 @@
+{
+  "float": [
+    {
+      "name": "float_1",
+      "value": "30.6"
+    },
+    {
+      "name": "side_bar_with",
+      "value": "480vp"
+    },
+    {
+      "name": "min_side_bar_width",
+      "value": "480vp"
+    },
+    {
+      "name": "max_side_bar_width",
+      "value": "480vp"
+    },
+    {
+      "name": "comment_input_height",
+      "value": "40vp"
+    },
+    {
+      "name": "toolbar_comment_image_width",
+      "value": "24vp"
+    },
+    {
+      "name": "toolbar_comment_height",
+      "value": "56vp"
+    },
+    {
+      "name": "toolbar_comment_input_height",
+      "value": "84vp"
+    },
+    {
+      "name": "comment_bar_border_with",
+      "value": "0.5vp"
+    },
+    {
+      "name": "constraint_size",
+      "value": "40vp"
+    },
+    {
+      "name": "toolbar_sent_width",
+      "value": "24vp"
+    },
+    {
+      "name": "toolbar_sent_ml",
+      "value": "16vp"
+    },
+    {
+      "name": "toolbar_sent_mb",
+      "value": "8vp"
+    },
+    {
+      "name": "dialog_pl",
+      "value": "12vp"
+    },
+    {
+      "name": "dialog_pr",
+      "value": "16vp"
+    },
+    {
+      "name": "dialog_pt",
+      "value": "8vp"
+    },
+    {
+      "name": "comment_item_icon_width",
+      "value": "32vp"
+    },
+    {
+      "name": "comment_item_icon_br",
+      "value": "16vp"
+    },
+    {
+      "name": "comment_item_name_fs",
+      "value": "14fp"
+    },
+    {
+      "name": "comment_item_name_ml",
+      "value": "12vp"
+    },
+    {
+      "name": "comment_item_title_height",
+      "value": "39vp"
+    },
+    {
+      "name": "comment_item_favor_fs",
+      "value": "12fp"
+    },
+    {
+      "name": "comment_item_favor_width",
+      "value": "16vp"
+    },
+    {
+      "name": "comment_item_favor_ml",
+      "value": "4vp"
+    },
+    {
+      "name": "comment_item_title_pl",
+      "value": "16vp"
+    },
+    {
+      "name": "comment_item_content_fs",
+      "value": "14fp"
+    },
+    {
+      "name": "comment_item_content_ml",
+      "value": "44vp"
+    },
+    {
+      "name": "comment_item_content_mr",
+      "value": "16vp"
+    },
+    {
+      "name": "comment_list_title_fs",
+      "value": "18fp"
+    },
+    {
+      "name": "comment_list_title_pl",
+      "value": "16vp"
+    },
+    {
+      "name": "comment_list_title_height",
+      "value": "56vp"
+    },
+    {
+      "name": "card_detail_fs",
+      "value": "20fp"
+    },
+    {
+      "name": "card_detail_back_ml",
+      "value": "16vp"
+    },
+    {
+      "name": "card_detail_back_width",
+      "value": "24vp"
+    },
+    {
+      "name": "card_detail_fold_mr",
+      "value": "16vp"
+    },
+    {
+      "name": "card_detail_more_width",
+      "value": "24vp"
+    },
+    {
+      "name": "title_blank_height",
+      "value": "36vp"
+    },
+    {
+      "name": "detail_title_height",
+      "value": "40vp"
+    },
+    {
+      "name": "blog_icon_width",
+      "value": "36vp"
+    },
+    {
+      "name": "blog_icon_br",
+      "value": "18vp"
+    },
+    {
+      "name": "blog_name_fs",
+      "value": "14fp"
+    },
+    {
+      "name": "blog_name_height",
+      "value": "19fp"
+    },
+    {
+      "name": "author_type_fs",
+      "value": "12fp"
+    },
+    {
+      "name": "author_type_height",
+      "value": "16vp"
+    },
+    {
+      "name": "blog_title_ml",
+      "value": "8vp"
+    },
+    {
+      "name": "blog_add_width",
+      "value": "12vp"
+    },
+    {
+      "name": "follow_font_size",
+      "value": "12fp"
+    },
+    {
+      "name": "follow_margin_left",
+      "value": "5vp"
+    },
+    {
+      "name": "blog_title_follow_bw",
+      "value": "1vp"
+    },
+    {
+      "name": "blog_title_follow_br",
+      "value": "14vp"
+    },
+    {
+      "name": "blog_title_padding_left",
+      "value": "13vp"
+    },
+    {
+      "name": "blog_title_follow_height",
+      "value": "28vp"
+    },
+    {
+      "name": "blog_title_follow_width",
+      "value": "64vp"
+    },
+    {
+      "name": "blog_title_height",
+      "value": "52vp"
+    },
+    {
+      "name": "blog_margin_left",
+      "value": "16vp"
+    },
+    {
+      "name": "blog_margin_top",
+      "value": "8vp"
+    },
+    {
+      "name": "author_type_name_fs",
+      "value": "10fp"
+    },
+    {
+      "name": "author_type_name_br",
+      "value": "4vp"
+    },
+    {
+      "name": "author_type_name_fw",
+      "value": "0.5vp"
+    },
+    {
+      "name": "author_type_name_padding",
+      "value": "2vp"
+    },
+    {
+      "name": "author_type_name_ml",
+      "value": "4vp"
+    },
+    {
+      "name": "time_position_fs",
+      "value": "12fp"
+    },
+    {
+      "name": "time_position_opacity",
+      "value": "0.4"
+    },
+    {
+      "name": "review_count_fs",
+      "value": "12fp"
+    },
+    {
+      "name": "review_count_opacity",
+      "value": "0.6"
+    },
+    {
+      "name": "replay_fs",
+      "value": "12fp"
+    },
+    {
+      "name": "replay_opacity",
+      "value": "0.6"
+    },
+    {
+      "name": "replay_board_radius",
+      "value": "13vp"
+    },
+    {
+      "name": "replay_padding_left",
+      "value": "8vp"
+    },
+    {
+      "name": "replay_area_height",
+      "value": "24vp"
+    },
+    {
+      "name": "replay_normal_opacity",
+      "value": "0.9"
+    },
+    {
+      "name": "time_position_height",
+      "value": "40vp"
+    },
+    {
+      "name": "review_count_normal_fs",
+      "value": "14fp"
+    },
+    {
+      "name": "read_all_replay_fs",
+      "value": "12fp"
+    },
+    {
+      "name": "read_all_replay_br",
+      "value": "8vp"
+    },
+    {
+      "name": "read_all_replay_mr_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "all_replay_mr_md_fold",
+      "value": "32vp"
+    },
+    {
+      "name": "all_replay_mr_md_normal",
+      "value": "24vp"
+    },
+    {
+      "name": "replay_all_replay_mr_lg",
+      "value": "40vp"
+    },
+    {
+      "name": "sub_content_pl",
+      "value": "16vp"
+    },
+    {
+      "name": "sub_content_pt",
+      "value": "12vp"
+    },
+    {
+      "name": "picture_are_margin_top",
+      "value": "8vp"
+    },
+    {
+      "name": "window_padding_left_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "window_padding_left_md",
+      "value": "24vp"
+    },
+    {
+      "name": "window_padding_left_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "mirco_blog_mt",
+      "value": "16vp"
+    },
+    {
+      "name": "comment_padding_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "blank_top_height",
+      "value": "24vp"
+    },
+    {
+      "name": "card_title_padding",
+      "value": "8vp"
+    },
+    {
+      "name": "grid_gap",
+      "value": "4vp"
+    },
+    {
+      "name": "comment_context_fs",
+      "value": "16fp"
+    },
+    {
+      "name": "comment_context_opacity",
+      "value": "0.6"
+    },
+    {
+      "name": "comment_context_br",
+      "value": "20vp"
+    },
+    {
+      "name": "text_input_bgc_opacity",
+      "value": "0.4"
+    },
+    {
+      "name": "sub_comment_margin_bottom",
+      "value": "8vp"
+    },
+    {
+      "name": "tab_bar_padding_top",
+      "value": "22vp"
+    },
+    {
+      "name": "tab_content_margin_top",
+      "value": "7vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/element/string.json b/MultiCommunityApplication/features/detail/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..f32baca2ce6e1f4365aba5c8c87992c30011e86b
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/resources/base/element/string.json
@@ -0,0 +1,36 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "detail_write_comment",
+      "value": "写评论"
+    },
+    {
+      "name": "comment_list_title",
+      "value": "评论"
+    },
+    {
+      "name": "card_detail_title",
+      "value": "详情页"
+    },
+    {
+      "name": "blog_follow",
+      "value": "关注"
+    },
+    {
+      "name": "author_type_name",
+      "value": "楼主"
+    },
+    {
+      "name": "replay",
+      "value": "回复"
+    },
+    {
+      "name": "read_all_replay",
+      "value": "查看全部回复"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_comment_like.svg b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_comment_like.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2425ceb32d040f57df1bd764d771645b73d90ed3
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_comment_like.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_favor</title>
+    <defs>
+        <path d="M2.79452153,4.7123106 C5.14551849,2.36131365 8.79928584,2.107094 11.432027,3.94965165 C11.7516058,4.17462816 12.0562133,4.42806087 12.3404631,4.7123106 L12.2043753,4.58084491 C12.2233722,4.59824909 12.242503,4.61626317 12.2617634,4.63489833 L12.3404631,4.7123106 C12.4463878,4.81823529 12.5489662,4.9211352 12.648204,5.02101694 C12.8006003,5.17431629 12.9510582,5.32642644 13.0993468,5.47711379 L13.2191159,5.60002561 C13.6770026,6.06850208 14.0393959,6.45079635 14.3071512,6.74792182 C14.5844414,7.05562795 14.5597843,7.52986111 14.2520782,7.80715123 C13.9443721,8.08444136 13.4701389,8.05978431 13.1928488,7.75207818 L13.0507824,7.59620087 C12.6483435,7.15907177 12.0572399,6.55040776 11.2798029,5.77297077 L11.1010067,5.60225587 C9.04064077,3.72439192 5.84685559,3.78129689 3.8551817,5.77297077 C1.92651003,7.70164245 2.0120054,10.7789756 3.90277368,13.3 C4.53008781,14.1364188 5.51152739,15.2077248 6.77873984,16.4381266 L6.81870427,16.4767845 C7.40284236,17.0397797 8.47345885,17.9853684 10.0244732,19.3076065 L11.0614453,20.1872947 C11.6195629,20.6586926 12.4361195,20.6594461 12.9949572,20.1892045 L13.9427905,19.3880425 C15.4712291,18.089643 16.5394672,17.1471153 17.1420446,16.5658605 L17.4041204,16.3113955 C18.6081005,15.1345125 19.5440439,14.1079415 20.15,13.3 C22.0407683,10.7789756 22.1262637,7.70164245 20.197592,5.77297077 C18.5002127,4.07559151 15.9297294,3.783452 13.9318066,4.89655225 C13.6450802,4.60532736 13.3503168,4.30795075 13.0475699,4.00520382 C12.9789659,3.93659986 12.9093438,3.8695609 12.8387502,3.80408714 C15.4505548,2.12241169 18.9709638,2.42502225 21.2582521,4.7123106 C23.7644258,7.21848428 23.6558802,11.1254931 21.35,14.2 L21.2782836,14.2947342 C20.5730317,15.2179162 19.5206923,16.355509 18.1834318,17.6454496 L18.1355571,17.6914643 C17.4696453,18.3292759 16.3271085,19.333852 14.702026,20.7110339 L13.960879,21.3368085 C12.8429053,22.2775429 11.2097915,22.2760359 10.0935559,21.3332398 C7.99068585,19.5571115 6.56921236,18.3148051 5.81899059,17.5964036 L5.59843695,17.3824031 C4.34444158,16.1565572 3.3607736,15.0773332 2.70277368,14.2 C0.396893522,11.1254931 0.288347854,7.21848428 2.79452153,4.7123106 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_favor" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="蒙版" fill-rule="nonzero"></g>
+        <g id="Symbol/color-light/colorPrimary" mask="url(#mask-2)" fill="#6D6E6F" fill-opacity="0.9">
+            <rect id="color/#6D6E6F" x="0" y="0" width="24" height="24"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_fold_horizontal.svg b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_fold_horizontal.svg
new file mode 100644
index 0000000000000000000000000000000000000000..477d23b91ac89d452510661260272177193b81cd
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_fold_horizontal.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>qieHuang</title>
+    <g id="1016备份" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-24.000000, -393.000000)">
+            <g id="编组-13" transform="translate(24.000000, 393.000000)">
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+                <path d="M19,2 C20.6568542,2 22,3.34314575 22,5 L22,12.5 C22,14.1568542 20.6568542,15.5 19,15.5 L5,15.5 C3.34314575,15.5 2,14.1568542 2,12.5 L2,5 C2,3.34314575 3.34314575,2 5,2 L19,2 Z M19,3.5 L5,3.5 C4.17157288,3.5 3.5,4.17157288 3.5,5 L3.5,12.5 C3.5,13.3284271 4.17157288,14 5,14 L19,14 C19.8284271,14 20.5,13.3284271 20.5,12.5 L20.5,5 C20.5,4.17157288 19.8284271,3.5 19,3.5 Z" id="形状结合" fill="#000000" fill-rule="nonzero"></path>
+                <path d="M19.5,17 C20.8807119,17 22,18.1192881 22,19.5 C22,20.8807119 20.8807119,22 19.5,22 L4.5,22 C3.11928813,22 2,20.8807119 2,19.5 C2,18.1192881 3.11928813,17 4.5,17 L19.5,17 Z M19.5,18.5 L4.5,18.5 C3.94771525,18.5 3.5,18.9477153 3.5,19.5 C3.5,20.0522847 3.94771525,20.5 4.5,20.5 L19.5,20.5 C20.0522847,20.5 20.5,20.0522847 20.5,19.5 C20.5,18.9477153 20.0522847,18.5 19.5,18.5 Z" id="形状结合" fill="#000000" fill-rule="nonzero"></path>
+            </g>
+            <g id="上下" transform="translate(26.000000, 395.000000)"></g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_fold_vertical.svg b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_fold_vertical.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1df28f042a934e4e8d7e9e38b42ec4a6cd8d3881
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_fold_vertical.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public_ic_public_view_list备份</title>
+    <g id="1016" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-24.000000, -348.000000)">
+            <g id="编组-11" transform="translate(24.000000, 348.000000)">
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+                <g id="Public_ic_public_view_list备份" opacity="0.903483073" transform="translate(2.000000, 2.000000)" fill="#000000">
+                    <path d="M13.25,3.25 C15.1829966,3.25 16.75,4.81700338 16.75,6.75 L16.75,13.25 C16.75,15.1829966 15.1829966,16.75 13.25,16.75 L0.25,16.75 C-1.68299662,16.75 -3.25,15.1829966 -3.25,13.25 L-3.25,6.75 C-3.25,4.81700338 -1.68299662,3.25 0.25,3.25 L13.25,3.25 Z M13.5,4.75 L4.4408921e-16,4.75 C-0.966498312,4.75 -1.75,5.53350169 -1.75,6.5 L-1.75,13.5 C-1.75,14.4664983 -0.966498312,15.25 0,15.25 L13.5,15.25 C14.4664983,15.25 15.25,14.4664983 15.25,13.5 L15.25,6.5 C15.25,5.53350169 14.4664983,4.75 13.5,4.75 Z" id="形状结合" transform="translate(6.750000, 10.000000) rotate(-90.000000) translate(-6.750000, -10.000000) "></path>
+                    <path d="M25,7.5 C26.3807119,7.5 27.5,8.61928813 27.5,10 C27.5,11.3807119 26.3807119,12.5 25,12.5 L10,12.5 C8.61928813,12.5 7.5,11.3807119 7.5,10 C7.5,8.61928813 8.61928813,7.5 10,7.5 L25,7.5 Z M25,9 L10,9 C9.44771525,9 9,9.44771525 9,10 C9,10.5522847 9.44771525,11 10,11 L25,11 C25.5522847,11 26,10.5522847 26,10 C26,9.44771525 25.5522847,9 25,9 Z" id="形状结合" transform="translate(17.500000, 10.000000) rotate(-90.000000) translate(-17.500000, -10.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_public_add_white.svg b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_public_add_white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fcb26b9c1080ac600c2c7129f03d93c948ee6864
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_public_add_white.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_add</title>
+    <defs>
+        <path d="M5.375,9.625 C5.375,9.83210678 5.20710678,10 5,10 C4.79289322,10 4.625,9.83210678 4.625,9.625 L4.625,5.625 L0.5,5.625 C0.223857625,5.625 0,5.40114237 0,5.125 C0,4.84885763 0.223857625,4.625 0.5,4.625 L4.625,4.625 L4.625,0.375 C4.625,0.167893219 4.79289322,3.80448985e-17 5,0 C5.20710678,-3.80448985e-17 5.375,0.167893219 5.375,0.375 L5.375,9.625 Z M9.5,4.625 C9.77614237,4.625 10,4.84885763 10,5.125 C10,5.40114237 9.77614237,5.625 9.5,5.625 L5.875,5.625 L5.875,4.625 L9.5,4.625 Z" id="path-1"></path>
+    </defs>
+    <g id="1016" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-33.000000, -111.000000)">
+            <g id="编组-3" transform="translate(32.000000, 110.000000)">
+                <g id="Public/ic_public_add" transform="translate(1.000000, 1.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="形状结合" fill="#FFFFFF" xlink:href="#path-1"></use>
+                    <g id="Symbol/color-light/colorPrimary" mask="url(#mask-2)" fill="#FFFFFF" fill-opacity="0.4">
+                        <g transform="translate(-1.000000, -1.000000)" id="color/#000000">
+                            <rect x="0" y="0" width="12" height="12"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_public_favor.svg b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_public_favor.svg
new file mode 100644
index 0000000000000000000000000000000000000000..aaf51d2ab16da86838e73f0b67adc01bcfa81020
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_public_favor.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_favor</title>
+    <defs>
+        <path d="M2.79452153,4.7123106 C5.14551849,2.36131365 8.79928584,2.107094 11.432027,3.94965165 C11.7516058,4.17462816 12.0562133,4.42806087 12.3404631,4.7123106 L12.2043753,4.58084491 C12.2233722,4.59824909 12.242503,4.61626317 12.2617634,4.63489833 L12.3404631,4.7123106 C12.4463878,4.81823529 12.5489662,4.9211352 12.648204,5.02101694 C12.8006003,5.17431629 12.9510582,5.32642644 13.0993468,5.47711379 L13.2191159,5.60002561 C13.6770026,6.06850208 14.0393959,6.45079635 14.3071512,6.74792182 C14.5844414,7.05562795 14.5597843,7.52986111 14.2520782,7.80715123 C13.9443721,8.08444136 13.4701389,8.05978431 13.1928488,7.75207818 L13.0507824,7.59620087 C12.6483435,7.15907177 12.0572399,6.55040776 11.2798029,5.77297077 L11.1010067,5.60225587 C9.04064077,3.72439192 5.84685559,3.78129689 3.8551817,5.77297077 C1.92651003,7.70164245 2.0120054,10.7789756 3.90277368,13.3 C4.53008781,14.1364188 5.51152739,15.2077248 6.77873984,16.4381266 L6.81870427,16.4767845 C7.40284236,17.0397797 8.47345885,17.9853684 10.0244732,19.3076065 L11.0614453,20.1872947 C11.6195629,20.6586926 12.4361195,20.6594461 12.9949572,20.1892045 L13.9427905,19.3880425 C15.4712291,18.089643 16.5394672,17.1471153 17.1420446,16.5658605 L17.4041204,16.3113955 C18.6081005,15.1345125 19.5440439,14.1079415 20.15,13.3 C22.0407683,10.7789756 22.1262637,7.70164245 20.197592,5.77297077 C18.5002127,4.07559151 15.9297294,3.783452 13.9318066,4.89655225 C13.6450802,4.60532736 13.3503168,4.30795075 13.0475699,4.00520382 C12.9789659,3.93659986 12.9093438,3.8695609 12.8387502,3.80408714 C15.4505548,2.12241169 18.9709638,2.42502225 21.2582521,4.7123106 C23.7644258,7.21848428 23.6558802,11.1254931 21.35,14.2 L21.2782836,14.2947342 C20.5730317,15.2179162 19.5206923,16.355509 18.1834318,17.6454496 L18.1355571,17.6914643 C17.4696453,18.3292759 16.3271085,19.333852 14.702026,20.7110339 L13.960879,21.3368085 C12.8429053,22.2775429 11.2097915,22.2760359 10.0935559,21.3332398 C7.99068585,19.5571115 6.56921236,18.3148051 5.81899059,17.5964036 L5.59843695,17.3824031 C4.34444158,16.1565572 3.3607736,15.0773332 2.70277368,14.2 C0.396893522,11.1254931 0.288347854,7.21848428 2.79452153,4.7123106 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_favor" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="蒙版" fill-rule="nonzero"></g>
+        <g id="Symbol/color-light/colorPrimary" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <rect id="color/#000000" x="0" y="0" width="24" height="24"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_comment.svg b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_comment.svg
new file mode 100644
index 0000000000000000000000000000000000000000..83497d66b06b901e065afeb294ceabffaa703bb7
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_comment.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>light _ ic_toolbar_comment_number_2</title>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="light-/-ic_toolbar_comment_number_2">
+            <g id="symbol/frame/symbol_grid24" transform="translate(-0.017678, -0.017678)"></g>
+            <path d="M15.5,3 C19.6421356,3 23,6.35786438 23,10.5 C23,14.6007143 19.7089571,17.9327643 15.6240262,17.9989952 L15.5,18 L13.8105,18 L10.0303301,21.7803301 C9.7491526,22.0615076 9.30026186,22.0727547 9.00566731,21.8140714 L8.96966991,21.7803301 C8.68849242,21.4991526 8.67724532,21.0502619 8.93592862,20.7556673 L8.96966991,20.7196699 L12.9696699,16.7196699 C13.0986012,16.5907387 13.2696414,16.5135976 13.4504659,16.5016361 L13.5,16.5 L15.5,16.5 C18.8137085,16.5 21.5,13.8137085 21.5,10.5 C21.5,7.21942859 18.8671657,4.55378857 15.599221,4.50080383 L8.5,4.5 C5.1862915,4.5 2.5,7.1862915 2.5,10.5 C2.5,13.7805714 5.1328343,16.4462114 8.40077903,16.4991962 L8.5,16.5 L9.25,16.5 C9.66421356,16.5 10,16.8357864 10,17.25 C10,17.6494202 9.68777001,17.9759152 9.2940682,17.9987268 L9.25,18 L8.5,18 C4.35786438,18 1,14.6421356 1,10.5 C1,6.39928573 4.29104288,3.06723571 8.37597379,3.00100479 L8.5,3 L15.5,3 Z M7,9.25 C7.69035594,9.25 8.25,9.80964406 8.25,10.5 C8.25,11.1903559 7.69035594,11.75 7,11.75 C6.30964406,11.75 5.75,11.1903559 5.75,10.5 C5.75,9.80964406 6.30964406,9.25 7,9.25 Z M12,9.25 C12.6903559,9.25 13.25,9.80964406 13.25,10.5 C13.25,11.1903559 12.6903559,11.75 12,11.75 C11.3096441,11.75 10.75,11.1903559 10.75,10.5 C10.75,9.80964406 11.3096441,9.25 12,9.25 Z M17,9.25 C17.6903559,9.25 18.25,9.80964406 18.25,10.5 C18.25,11.1903559 17.6903559,11.75 17,11.75 C16.3096441,11.75 15.75,11.1903559 15.75,10.5 C15.75,9.80964406 16.3096441,9.25 17,9.25 Z" id="形状结合" fill-opacity="0.9" fill="#000000"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_comment_light.svg b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_comment_light.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8886c6e412209ccbdbef85fb4218fa7969aa2686
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_comment_light.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>light _ ic_toolbar_comment_number_2</title>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="light-/-ic_toolbar_comment_number_2">
+            <g id="symbol/frame/symbol_grid24" transform="translate(-0.017678, -0.017678)"></g>
+            <path d="M15.5,3 C19.6421356,3 23,6.35786438 23,10.5 C23,14.6007143 19.7089571,17.9327643 15.6240262,17.9989952 L15.5,18 L13.8105,18 L10.0303301,21.7803301 C9.7491526,22.0615076 9.30026186,22.0727547 9.00566731,21.8140714 L8.96966991,21.7803301 C8.68849242,21.4991526 8.67724532,21.0502619 8.93592862,20.7556673 L8.96966991,20.7196699 L12.9696699,16.7196699 C13.0986012,16.5907387 13.2696414,16.5135976 13.4504659,16.5016361 L13.5,16.5 L15.5,16.5 C18.8137085,16.5 21.5,13.8137085 21.5,10.5 C21.5,7.21942859 18.8671657,4.55378857 15.599221,4.50080383 L8.5,4.5 C5.1862915,4.5 2.5,7.1862915 2.5,10.5 C2.5,13.7805714 5.1328343,16.4462114 8.40077903,16.4991962 L8.5,16.5 L9.25,16.5 C9.66421356,16.5 10,16.8357864 10,17.25 C10,17.6494202 9.68777001,17.9759152 9.2940682,17.9987268 L9.25,18 L8.5,18 C4.35786438,18 1,14.6421356 1,10.5 C1,6.39928573 4.29104288,3.06723571 8.37597379,3.00100479 L8.5,3 L15.5,3 Z M7,9.25 C7.69035594,9.25 8.25,9.80964406 8.25,10.5 C8.25,11.1903559 7.69035594,11.75 7,11.75 C6.30964406,11.75 5.75,11.1903559 5.75,10.5 C5.75,9.80964406 6.30964406,9.25 7,9.25 Z M12,9.25 C12.6903559,9.25 13.25,9.80964406 13.25,10.5 C13.25,11.1903559 12.6903559,11.75 12,11.75 C11.3096441,11.75 10.75,11.1903559 10.75,10.5 C10.75,9.80964406 11.3096441,9.25 12,9.25 Z M17,9.25 C17.6903559,9.25 18.25,9.80964406 18.25,10.5 C18.25,11.1903559 17.6903559,11.75 17,11.75 C16.3096441,11.75 15.75,11.1903559 15.75,10.5 C15.75,9.80964406 16.3096441,9.25 17,9.25 Z" id="形状结合" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_heart_light.svg b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_heart_light.svg
new file mode 100644
index 0000000000000000000000000000000000000000..affc85c68dba924663f888dee7b4b689b632331b
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_heart_light.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_favor</title>
+    <defs>
+        <path d="M2.79452153,4.7123106 C5.14551849,2.36131365 8.79928584,2.107094 11.432027,3.94965165 C11.7516058,4.17462816 12.0562133,4.42806087 12.3404631,4.7123106 L12.2043753,4.58084491 C12.2233722,4.59824909 12.242503,4.61626317 12.2617634,4.63489833 L12.3404631,4.7123106 C12.4463878,4.81823529 12.5489662,4.9211352 12.648204,5.02101694 C12.8006003,5.17431629 12.9510582,5.32642644 13.0993468,5.47711379 L13.2191159,5.60002561 C13.6770026,6.06850208 14.0393959,6.45079635 14.3071512,6.74792182 C14.5844414,7.05562795 14.5597843,7.52986111 14.2520782,7.80715123 C13.9443721,8.08444136 13.4701389,8.05978431 13.1928488,7.75207818 L13.0507824,7.59620087 C12.6483435,7.15907177 12.0572399,6.55040776 11.2798029,5.77297077 L11.1010067,5.60225587 C9.04064077,3.72439192 5.84685559,3.78129689 3.8551817,5.77297077 C1.92651003,7.70164245 2.0120054,10.7789756 3.90277368,13.3 C4.53008781,14.1364188 5.51152739,15.2077248 6.77873984,16.4381266 L6.77873984,16.4381266 L6.81870427,16.4767845 C7.40284236,17.0397797 8.47345885,17.9853684 10.0244732,19.3076065 L10.0244732,19.3076065 L11.0614453,20.1872947 C11.6195629,20.6586926 12.4361195,20.6594461 12.9949572,20.1892045 L12.9949572,20.1892045 L13.9427905,19.3880425 C15.4712291,18.089643 16.5394672,17.1471153 17.1420446,16.5658605 L17.1420446,16.5658605 L17.4041204,16.3113955 C18.6081005,15.1345125 19.5440439,14.1079415 20.15,13.3 C22.0407683,10.7789756 22.1262637,7.70164245 20.197592,5.77297077 C18.5002127,4.07559151 15.9297294,3.783452 13.9318066,4.89655225 C13.6450802,4.60532736 13.3503168,4.30795075 13.0475699,4.00520382 C12.9789659,3.93659986 12.9093438,3.8695609 12.8387502,3.80408714 C15.4505548,2.12241169 18.9709638,2.42502225 21.2582521,4.7123106 C23.7644258,7.21848428 23.6558802,11.1254931 21.35,14.2 L21.35,14.2 L21.2782836,14.2947342 C20.5730317,15.2179162 19.5206923,16.355509 18.1834318,17.6454496 L18.1834318,17.6454496 L18.1355571,17.6914643 C17.4696453,18.3292759 16.3271085,19.333852 14.702026,20.7110339 L14.702026,20.7110339 L13.960879,21.3368085 C12.8429053,22.2775429 11.2097915,22.2760359 10.0935559,21.3332398 C7.99068585,19.5571115 6.56921236,18.3148051 5.81899059,17.5964036 L5.81899059,17.5964036 L5.59843695,17.3824031 C4.34444158,16.1565572 3.3607736,15.0773332 2.70277368,14.2 C0.396893522,11.1254931 0.288347854,7.21848428 2.79452153,4.7123106 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_favor" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_蒙版" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_send_white.png b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_send_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..664c28d202ab69c956d86918af74a5a41b3a9a8d
Binary files /dev/null and b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_send_white.png differ
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_sent.png b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_sent.png
new file mode 100644
index 0000000000000000000000000000000000000000..03dd43a0a71d753e26894cf8ff04533a33073055
Binary files /dev/null and b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_sent.png differ
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_share_light.svg b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_share_light.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8ce680b660ee72eac3bde09cb5b7225581864e59
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_share_light.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_share</title>
+    <defs>
+        <path d="M12.25,2 C13.9068542,2 15.25,3.34314575 15.25,5 C15.25,6.65685425 13.9068542,8 12.25,8 C11.9804725,8 11.7192467,7.96445647 11.4707541,7.89780096 L5.93230241,16.2050908 C6.40150564,16.6005646 6.74773454,17.1373071 6.90542312,17.7497523 L17.0945769,17.7497523 C17.4276951,16.4559576 18.6022096,15.5 20,15.5 C21.6568542,15.5 23,16.8431458 23,18.5 C23,20.1568542 21.6568542,21.5 20,21.5 C18.6025704,21.5 17.4283015,20.5445359 17.094835,19.2512495 L6.90516499,19.2512495 C6.57169851,20.5445359 5.39742955,21.5 4,21.5 C2.34314575,21.5 1,20.1568542 1,18.5 C1,16.8431458 2.34314575,15.5 4,15.5 C4.19240202,15.5 4.38057369,15.5181123 4.56290296,15.5527249 L10.1618944,7.15402617 C9.59951533,6.60875215 9.25,5.84519291 9.25,5 C9.25,3.34314575 10.5931458,2 12.25,2 Z M4,17 C3.17157288,17 2.5,17.6715729 2.5,18.5 C2.5,19.3284271 3.17157288,20 4,20 C4.82842712,20 5.5,19.3284271 5.5,18.5 C5.5,17.6715729 4.82842712,17 4,17 Z M20,17 C19.1715729,17 18.5,17.6715729 18.5,18.5 C18.5,19.3284271 19.1715729,20 20,20 C20.8284271,20 21.5,19.3284271 21.5,18.5 C21.5,17.6715729 20.8284271,17 20,17 Z M12.25,3.5 C11.4215729,3.5 10.75,4.17157288 10.75,5 C10.75,5.82842712 11.4215729,6.5 12.25,6.5 C13.0784271,6.5 13.75,5.82842712 13.75,5 C13.75,4.17157288 13.0784271,3.5 12.25,3.5 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_share" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_合并形状" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_star.svg b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_star.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9c24c0d7887e04c6bce16db33a7a6678cb07eb07
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_star.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_collect</title>
+    <defs>
+        <path d="M13.1382247,1.63492692 C13.4833468,1.80525484 13.7626949,2.084603 13.9330228,2.42972506 L15.9516683,6.51994748 C16.0973303,6.81509095 16.3788959,7.01966033 16.704606,7.06698879 L21.2184345,7.72288645 C22.174888,7.86186728 22.8375805,8.74989227 22.6985997,9.70634578 C22.6432568,10.0872106 22.4639042,10.4392098 22.1883079,10.7078499 L18.9220709,13.891644 C18.6863849,14.1213812 18.5788364,14.4523814 18.6344743,14.7767754 L19.4055283,19.2723649 C19.56891,20.2249537 18.9291313,21.1296265 17.9765426,21.2930083 C17.5972167,21.3580678 17.2070226,21.2962671 16.8663667,21.1171737 L13.7741812,19.4922374 C14.2496954,19.1811107 14.7200919,18.8635936 15.1853663,18.5396878 L17.5643784,19.7894766 C17.6130435,19.8150614 17.6687856,19.82389 17.722975,19.8145958 C17.8493388,19.7929227 17.9371713,19.679939 17.9303866,19.5549525 L17.9271158,19.5259325 L17.1828081,15.1896117 C16.5943981,15.6534073 16.0121091,16.0961739 15.4359412,16.5179114 L14.5560371,17.1492968 L14.5560371,17.1492968 L13.6844132,17.7504514 C13.0804528,18.1588606 12.4677827,18.5564752 11.8464031,18.9432952 L10.9078016,19.5154293 L10.9078016,19.5154293 L7.8611027,21.1171737 C7.6359769,21.2355294 7.39681929,21.2999613 7.15840907,21.3150637 L7.01557087,21.3182423 C6.39801865,21.3066835 5.80550039,20.9678678 5.49777574,20.3825407 C5.31868237,20.0418849 5.25688169,19.6516907 5.32194116,19.2723649 L6.09299511,14.7767754 C6.14863305,14.4523814 6.04108456,14.1213812 5.80539848,13.891644 L2.53916154,10.7078499 C1.84706528,10.0332227 1.83290374,8.92527453 2.50753086,8.23317827 C2.77617092,7.95758191 3.12817014,7.77822934 3.50903494,7.72288645 L8.02286338,7.06698879 C8.34857354,7.01966033 8.63013912,6.81509095 8.77580114,6.51994748 L10.7944466,2.42972506 C11.2221856,1.56303116 12.2715308,1.20718791 13.1382247,1.63492692 Z M12.3198269,2.95808449 L12.2902119,2.96527007 C12.2793457,2.96861565 12.2687103,2.97269676 12.2583861,2.97748605 L12.2902119,2.96527007 C12.2714966,2.97103233 12.2534657,2.97897647 12.2365308,2.9889629 L12.2583861,2.97748605 C12.2413468,2.98539044 12.2251553,2.99522387 12.210174,3.00686353 L12.2365308,2.9889629 C12.2171613,3.00038505 12.1992255,3.01447891 12.1833396,3.03103562 L12.210174,3.00686353 C12.1956184,3.01817235 12.1822051,3.03118618 12.1702664,3.04579235 L12.1395507,3.09357363 L10.1209053,7.18379605 C10.0184557,7.39138155 9.8891144,7.58104483 9.73798951,7.74907464 C9.72757688,7.76065179 9.71707851,7.77210731 9.70647875,7.78345927 C9.68222387,7.8094362 9.65740841,7.83489994 9.63208072,7.8598056 C9.61286179,7.8787174 9.59272003,7.89788572 9.57227364,7.9167049 C9.55151545,7.93581237 9.5303783,7.9546158 9.50893536,7.97304979 C9.48390793,7.9945665 9.45840986,8.01562276 9.43250968,8.03616184 C9.41116892,8.05308223 9.38973108,8.06952117 9.36803353,8.08560821 C9.34138956,8.10536464 9.31425278,8.12465932 9.28673801,8.14340738 C9.26560288,8.15781133 9.24405019,8.17201666 9.2222781,8.18588799 C9.19145373,8.20552392 9.16032733,8.22441091 9.12878668,8.24261854 C9.10386369,8.25700696 9.07861557,8.27100654 9.05311817,8.28457189 C9.02759033,8.29815315 9.00183229,8.31128953 8.97583553,8.32398347 C8.94971953,8.33673475 8.9234259,8.34901131 8.89690336,8.36083563 C8.86403238,8.37549408 8.8305812,8.3895481 8.79679457,8.40288263 C8.77499612,8.41148634 8.7530082,8.41980861 8.73088571,8.4278259 C8.69848989,8.43956293 8.66602601,8.45057618 8.63329498,8.46093143 C8.60215544,8.47078718 8.57049234,8.48012444 8.53859854,8.48884419 C8.51232354,8.49602683 8.48597244,8.50277116 8.45947431,8.50909269 C8.44359003,8.51288347 8.42745894,8.51656457 8.41127563,8.52008864 L8.35135851,8.53237085 C8.33993308,8.53456774 8.32848318,8.53668672 8.31700947,8.5387273 L8.23856085,8.55139931 L3.72473242,9.20729697 C3.67032316,9.2152031 3.62003756,9.24082489 3.58166041,9.2801958 L3.53958116,9.33787805 C3.53650925,9.34368602 3.53368264,9.3495886 3.53110115,9.35557062 C3.52517733,9.36931413 3.5205711,9.3833711 3.51723738,9.39766093 L3.53110115,9.35557062 C3.52107995,9.37879248 3.51475247,9.40321145 3.51210738,9.42794046 L3.51723738,9.39766093 C3.51174014,9.42122457 3.50970299,9.44542138 3.51111562,9.46944495 L3.51210738,9.42794046 C3.50988906,9.44867962 3.51026074,9.46963685 3.51321572,9.4902889 L3.51111562,9.46944495 C3.51245982,9.49230479 3.51692769,9.51500776 3.52451033,9.53685903 L3.51321572,9.4902889 C3.5167719,9.51514267 3.52406949,9.53955445 3.53509683,9.56261222 L3.52451033,9.53685903 C3.53184297,9.55798986 3.54208839,9.57832422 3.55523855,9.59723378 L3.58617908,9.63372032 L6.85241601,12.8175145 C7.02932311,12.9899563 7.17735273,13.185219 7.29413335,13.3960039 C7.3060094,13.4174491 7.31734845,13.4386412 7.32837391,13.4599807 C7.34544959,13.4930124 7.36200114,13.5268904 7.37776993,13.5611038 C7.38700246,13.5811337 7.39599952,13.6013551 7.4047244,13.6216867 C7.42054882,13.6585657 7.43544807,13.6957275 7.44944464,13.7332162 C7.4561134,13.7510694 7.46270561,13.7693658 7.46908335,13.7877355 C7.48096949,13.8219746 7.49208817,13.8563938 7.50245682,13.8910418 C7.51355223,13.9281173 7.52379354,13.9654736 7.53316523,14.0030615 C7.53864691,14.0250458 7.54383993,14.0471494 7.54873239,14.0693263 C7.55544824,14.0997675 7.56160032,14.1303611 7.56718038,14.1610769 C7.57371686,14.1970365 7.57950398,14.2334175 7.58448758,14.2699424 C7.58575039,14.2791953 7.58697135,14.2885353 7.58813973,14.2978842 C7.59419108,14.3463257 7.59882194,14.3948735 7.60202936,14.4436002 C7.60300281,14.4583669 7.60385715,14.4733923 7.60457587,14.4884329 C7.60662339,14.5312853 7.60757009,14.5742497 7.60740331,14.617297 C7.60728116,14.6501739 7.60649237,14.6834943 7.60503234,14.7168455 C7.60370515,14.7470889 7.60184731,14.7770913 7.59944271,14.8071049 C7.59849238,14.8189758 7.59744233,14.8309985 7.59630429,14.8430222 L7.59184385,14.8861574 C7.58948636,14.9071733 7.58685906,14.9281889 7.58396044,14.9491994 L7.57140759,15.030343 L6.80035365,19.5259325 C6.79105944,19.5801219 6.7998881,19.6358639 6.82547287,19.684529 C6.84027761,19.7126893 6.85969665,19.7368556 6.88231261,19.7565872 C6.89134389,19.7644774 6.9010247,19.7717488 6.91113625,19.7782636 L6.88231261,19.7565872 C6.89781452,19.7701121 6.91481843,19.7815534 6.93286789,19.7907694 L6.91113625,19.7782636 C6.92778545,19.7889905 6.94560245,19.7976658 6.96416679,19.8041589 L6.93286789,19.7907694 C6.95404634,19.801583 6.97666428,19.8093327 6.99998434,19.8137894 L6.96416679,19.8041589 C7.00380331,19.8180221 7.04684661,19.8219373 7.0892042,19.8146321 L7.05703112,19.818041 C7.07727622,19.8172224 7.09760057,19.813924 7.11756002,19.8080077 L7.16309101,19.7894766 L7.4596811,19.6328248 L10.1656811,18.2098248 L11.0464698,17.6743663 C12.2478825,16.926714 13.4156912,16.1377745 14.5499693,15.3075173 C15.7678295,14.4160804 17.016095,13.426464 18.2550213,12.3749785 L18.8735221,11.844248 L21.1412903,9.63372032 C21.1806613,9.59534317 21.2062831,9.54505756 21.2141892,9.4906483 L21.2147165,9.42209317 C21.2136407,9.41387917 21.21216,9.40576962 21.2102925,9.39778877 C21.2074772,9.38572088 21.203717,9.37379532 21.1991141,9.36225854 L21.2102925,9.39778877 C21.2050044,9.3751889 21.1966149,9.35362108 21.1855352,9.33363618 L21.1991141,9.36225854 C21.1917276,9.34374458 21.1821711,9.3262318 21.1707134,9.31008052 L21.1855352,9.33363618 C21.1745736,9.31386434 21.1609789,9.29564184 21.145149,9.27950211 L21.1707134,9.31008052 C21.1593045,9.29399801 21.1460107,9.27926542 21.1310973,9.26623846 L21.145149,9.27950211 C21.1319531,9.26604789 21.117204,9.254041 21.1011323,9.24379044 L21.1310973,9.26623846 C21.1138534,9.25117575 21.0944442,9.23839341 21.0732802,9.22844136 L21.1011323,9.24379044 C21.0838438,9.23276376 21.0650248,9.22376945 21.0449624,9.21719216 L21.002737,9.20729697 L16.4889086,8.55139931 C16.3849258,8.53628973 16.2827428,8.51476975 16.1828371,8.48718644 C16.1648466,8.48221869 16.1470124,8.47707911 16.1292541,8.47174673 C16.1034603,8.46400398 16.077617,8.45578397 16.051945,8.44715676 C16.0158533,8.43502433 15.9803084,8.42216767 15.945122,8.4085327 C15.9251317,8.40078994 15.9048929,8.39264392 15.8847786,8.38424068 C15.8508902,8.37007802 15.8176345,8.35531648 15.7847478,8.33985247 C15.7539313,8.32536777 15.7230946,8.31008688 15.6926074,8.29418824 C15.6701902,8.28249662 15.6480666,8.27052969 15.6261373,8.25823707 C15.5948831,8.24071867 15.5639516,8.22249429 15.5334373,8.20362031 C15.5121765,8.19047184 15.4909805,8.17691705 15.4699969,8.16304793 C15.4418176,8.14441718 15.4143076,8.12542572 15.3871894,8.10589129 C15.3646617,8.08966876 15.3421084,8.07284299 15.3198428,8.05563969 C15.2983527,8.03903453 15.2771893,8.02212616 15.2563014,8.00487455 C15.226629,7.98036443 15.1976362,7.9552738 15.1692198,7.9295148 C15.1525488,7.9144102 15.1356414,7.89865958 15.1189486,7.88267054 C15.0932222,7.85802801 15.0680384,7.83285363 15.0433827,7.80712907 C15.0269869,7.79001878 15.0110039,7.77286306 14.9952551,7.75547361 C14.9686227,7.72606654 14.9426653,7.69599769 14.9174049,7.66528078 C14.905244,7.65049305 14.8932458,7.63555652 14.8814121,7.62047206 C14.8532632,7.58459162 14.8260221,7.54784068 14.7997554,7.51028147 C14.7912387,7.49809936 14.7830445,7.48615879 14.7749487,7.4741386 C14.7503184,7.43757254 14.7265407,7.40017205 14.7037161,7.36205794 C14.6989674,7.35412737 14.6943205,7.34626964 14.6897142,7.33838204 L14.6667157,7.29814983 C14.658628,7.28369237 14.6506748,7.26913839 14.6428579,7.25448926 L14.6065642,7.18379605 L12.5879187,3.09357363 C12.5635862,3.04427048 12.5236793,3.0043636 12.4743761,2.98003104 L12.4366811,2.96682475 L12.4144429,2.95934967 C12.403114,2.95699545 12.3917235,2.95545502 12.3803488,2.9547021 C12.3596873,2.95337037 12.3395126,2.95455654 12.3198269,2.95808449 Z" id="__path-1"/>
+    </defs>
+    <g id="__Public/ic_public_collect" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="__mask-2" fill="white">
+            <use xlink:href="#__path-1"/>
+        </mask>
+        <use id="__形状结合" fill="#000000" fill-rule="nonzero" xlink:href="#__path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_star_light.svg b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_star_light.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8fae2e4c7fc7085ff7e4e01e255af312c5d7b5a8
--- /dev/null
+++ b/MultiCommunityApplication/features/detail/src/main/resources/base/media/ic_toolbar_star_light.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_collect</title>
+    <defs>
+        <path d="M13.1382247,1.63492692 C13.4833468,1.80525484 13.7626949,2.084603 13.9330228,2.42972506 L15.9516683,6.51994748 C16.0973303,6.81509095 16.3788959,7.01966033 16.704606,7.06698879 L21.2184345,7.72288645 C22.174888,7.86186728 22.8375805,8.74989227 22.6985997,9.70634578 C22.6432568,10.0872106 22.4639042,10.4392098 22.1883079,10.7078499 L18.9220709,13.891644 C18.6863849,14.1213812 18.5788364,14.4523814 18.6344743,14.7767754 L19.4055283,19.2723649 C19.56891,20.2249537 18.9291313,21.1296265 17.9765426,21.2930083 C17.5972167,21.3580678 17.2070226,21.2962671 16.8663667,21.1171737 L13.7741812,19.4922374 C14.2496954,19.1811107 14.7200919,18.8635936 15.1853663,18.5396878 L17.5643784,19.7894766 C17.6130435,19.8150614 17.6687856,19.82389 17.722975,19.8145958 C17.8493388,19.7929227 17.9371713,19.679939 17.9303866,19.5549525 L17.9271158,19.5259325 L17.1828081,15.1896117 C16.5943981,15.6534073 16.0121091,16.0961739 15.4359412,16.5179114 L14.5560371,17.1492968 L14.5560371,17.1492968 L13.6844132,17.7504514 C13.0804528,18.1588606 12.4677827,18.5564752 11.8464031,18.9432952 L10.9078016,19.5154293 L10.9078016,19.5154293 L7.8611027,21.1171737 C7.6359769,21.2355294 7.39681929,21.2999613 7.15840907,21.3150637 L7.01557087,21.3182423 C6.39801865,21.3066835 5.80550039,20.9678678 5.49777574,20.3825407 C5.31868237,20.0418849 5.25688169,19.6516907 5.32194116,19.2723649 L6.09299511,14.7767754 C6.14863305,14.4523814 6.04108456,14.1213812 5.80539848,13.891644 L2.53916154,10.7078499 C1.84706528,10.0332227 1.83290374,8.92527453 2.50753086,8.23317827 C2.77617092,7.95758191 3.12817014,7.77822934 3.50903494,7.72288645 L8.02286338,7.06698879 C8.34857354,7.01966033 8.63013912,6.81509095 8.77580114,6.51994748 L10.7944466,2.42972506 C11.2221856,1.56303116 12.2715308,1.20718791 13.1382247,1.63492692 Z M12.3198269,2.95808449 L12.2902119,2.96527007 C12.2793457,2.96861565 12.2687103,2.97269676 12.2583861,2.97748605 L12.2902119,2.96527007 C12.2714966,2.97103233 12.2534657,2.97897647 12.2365308,2.9889629 L12.2583861,2.97748605 C12.2413468,2.98539044 12.2251553,2.99522387 12.210174,3.00686353 L12.2365308,2.9889629 C12.2171613,3.00038505 12.1992255,3.01447891 12.1833396,3.03103562 L12.210174,3.00686353 C12.1956184,3.01817235 12.1822051,3.03118618 12.1702664,3.04579235 L12.1395507,3.09357363 L10.1209053,7.18379605 C10.0184557,7.39138155 9.8891144,7.58104483 9.73798951,7.74907464 C9.72757688,7.76065179 9.71707851,7.77210731 9.70647875,7.78345927 C9.68222387,7.8094362 9.65740841,7.83489994 9.63208072,7.8598056 C9.61286179,7.8787174 9.59272003,7.89788572 9.57227364,7.9167049 C9.55151545,7.93581237 9.5303783,7.9546158 9.50893536,7.97304979 C9.48390793,7.9945665 9.45840986,8.01562276 9.43250968,8.03616184 C9.41116892,8.05308223 9.38973108,8.06952117 9.36803353,8.08560821 C9.34138956,8.10536464 9.31425278,8.12465932 9.28673801,8.14340738 C9.26560288,8.15781133 9.24405019,8.17201666 9.2222781,8.18588799 C9.19145373,8.20552392 9.16032733,8.22441091 9.12878668,8.24261854 C9.10386369,8.25700696 9.07861557,8.27100654 9.05311817,8.28457189 C9.02759033,8.29815315 9.00183229,8.31128953 8.97583553,8.32398347 C8.94971953,8.33673475 8.9234259,8.34901131 8.89690336,8.36083563 C8.86403238,8.37549408 8.8305812,8.3895481 8.79679457,8.40288263 C8.77499612,8.41148634 8.7530082,8.41980861 8.73088571,8.4278259 C8.69848989,8.43956293 8.66602601,8.45057618 8.63329498,8.46093143 C8.60215544,8.47078718 8.57049234,8.48012444 8.53859854,8.48884419 C8.51232354,8.49602683 8.48597244,8.50277116 8.45947431,8.50909269 C8.44359003,8.51288347 8.42745894,8.51656457 8.41127563,8.52008864 L8.35135851,8.53237085 C8.33993308,8.53456774 8.32848318,8.53668672 8.31700947,8.5387273 L8.23856085,8.55139931 L3.72473242,9.20729697 C3.67032316,9.2152031 3.62003756,9.24082489 3.58166041,9.2801958 L3.53958116,9.33787805 C3.53650925,9.34368602 3.53368264,9.3495886 3.53110115,9.35557062 C3.52517733,9.36931413 3.5205711,9.3833711 3.51723738,9.39766093 L3.53110115,9.35557062 C3.52107995,9.37879248 3.51475247,9.40321145 3.51210738,9.42794046 L3.51723738,9.39766093 C3.51174014,9.42122457 3.50970299,9.44542138 3.51111562,9.46944495 L3.51210738,9.42794046 C3.50988906,9.44867962 3.51026074,9.46963685 3.51321572,9.4902889 L3.51111562,9.46944495 C3.51245982,9.49230479 3.51692769,9.51500776 3.52451033,9.53685903 L3.51321572,9.4902889 C3.5167719,9.51514267 3.52406949,9.53955445 3.53509683,9.56261222 L3.52451033,9.53685903 C3.53184297,9.55798986 3.54208839,9.57832422 3.55523855,9.59723378 L3.58617908,9.63372032 L6.85241601,12.8175145 C7.02932311,12.9899563 7.17735273,13.185219 7.29413335,13.3960039 C7.3060094,13.4174491 7.31734845,13.4386412 7.32837391,13.4599807 C7.34544959,13.4930124 7.36200114,13.5268904 7.37776993,13.5611038 C7.38700246,13.5811337 7.39599952,13.6013551 7.4047244,13.6216867 C7.42054882,13.6585657 7.43544807,13.6957275 7.44944464,13.7332162 C7.4561134,13.7510694 7.46270561,13.7693658 7.46908335,13.7877355 C7.48096949,13.8219746 7.49208817,13.8563938 7.50245682,13.8910418 C7.51355223,13.9281173 7.52379354,13.9654736 7.53316523,14.0030615 C7.53864691,14.0250458 7.54383993,14.0471494 7.54873239,14.0693263 C7.55544824,14.0997675 7.56160032,14.1303611 7.56718038,14.1610769 C7.57371686,14.1970365 7.57950398,14.2334175 7.58448758,14.2699424 C7.58575039,14.2791953 7.58697135,14.2885353 7.58813973,14.2978842 C7.59419108,14.3463257 7.59882194,14.3948735 7.60202936,14.4436002 C7.60300281,14.4583669 7.60385715,14.4733923 7.60457587,14.4884329 C7.60662339,14.5312853 7.60757009,14.5742497 7.60740331,14.617297 C7.60728116,14.6501739 7.60649237,14.6834943 7.60503234,14.7168455 C7.60370515,14.7470889 7.60184731,14.7770913 7.59944271,14.8071049 C7.59849238,14.8189758 7.59744233,14.8309985 7.59630429,14.8430222 L7.59184385,14.8861574 C7.58948636,14.9071733 7.58685906,14.9281889 7.58396044,14.9491994 L7.57140759,15.030343 L6.80035365,19.5259325 C6.79105944,19.5801219 6.7998881,19.6358639 6.82547287,19.684529 C6.84027761,19.7126893 6.85969665,19.7368556 6.88231261,19.7565872 C6.89134389,19.7644774 6.9010247,19.7717488 6.91113625,19.7782636 L6.88231261,19.7565872 C6.89781452,19.7701121 6.91481843,19.7815534 6.93286789,19.7907694 L6.91113625,19.7782636 C6.92778545,19.7889905 6.94560245,19.7976658 6.96416679,19.8041589 L6.93286789,19.7907694 C6.95404634,19.801583 6.97666428,19.8093327 6.99998434,19.8137894 L6.96416679,19.8041589 C7.00380331,19.8180221 7.04684661,19.8219373 7.0892042,19.8146321 L7.05703112,19.818041 C7.07727622,19.8172224 7.09760057,19.813924 7.11756002,19.8080077 L7.16309101,19.7894766 L7.4596811,19.6328248 L10.1656811,18.2098248 L11.0464698,17.6743663 C12.2478825,16.926714 13.4156912,16.1377745 14.5499693,15.3075173 C15.7678295,14.4160804 17.016095,13.426464 18.2550213,12.3749785 L18.8735221,11.844248 L21.1412903,9.63372032 C21.1806613,9.59534317 21.2062831,9.54505756 21.2141892,9.4906483 L21.2147165,9.42209317 C21.2136407,9.41387917 21.21216,9.40576962 21.2102925,9.39778877 C21.2074772,9.38572088 21.203717,9.37379532 21.1991141,9.36225854 L21.2102925,9.39778877 C21.2050044,9.3751889 21.1966149,9.35362108 21.1855352,9.33363618 L21.1991141,9.36225854 C21.1917276,9.34374458 21.1821711,9.3262318 21.1707134,9.31008052 L21.1855352,9.33363618 C21.1745736,9.31386434 21.1609789,9.29564184 21.145149,9.27950211 L21.1707134,9.31008052 C21.1593045,9.29399801 21.1460107,9.27926542 21.1310973,9.26623846 L21.145149,9.27950211 C21.1319531,9.26604789 21.117204,9.254041 21.1011323,9.24379044 L21.1310973,9.26623846 C21.1138534,9.25117575 21.0944442,9.23839341 21.0732802,9.22844136 L21.1011323,9.24379044 C21.0838438,9.23276376 21.0650248,9.22376945 21.0449624,9.21719216 L21.002737,9.20729697 L16.4889086,8.55139931 C16.3849258,8.53628973 16.2827428,8.51476975 16.1828371,8.48718644 C16.1648466,8.48221869 16.1470124,8.47707911 16.1292541,8.47174673 C16.1034603,8.46400398 16.077617,8.45578397 16.051945,8.44715676 C16.0158533,8.43502433 15.9803084,8.42216767 15.945122,8.4085327 C15.9251317,8.40078994 15.9048929,8.39264392 15.8847786,8.38424068 C15.8508902,8.37007802 15.8176345,8.35531648 15.7847478,8.33985247 C15.7539313,8.32536777 15.7230946,8.31008688 15.6926074,8.29418824 C15.6701902,8.28249662 15.6480666,8.27052969 15.6261373,8.25823707 C15.5948831,8.24071867 15.5639516,8.22249429 15.5334373,8.20362031 C15.5121765,8.19047184 15.4909805,8.17691705 15.4699969,8.16304793 C15.4418176,8.14441718 15.4143076,8.12542572 15.3871894,8.10589129 C15.3646617,8.08966876 15.3421084,8.07284299 15.3198428,8.05563969 C15.2983527,8.03903453 15.2771893,8.02212616 15.2563014,8.00487455 C15.226629,7.98036443 15.1976362,7.9552738 15.1692198,7.9295148 C15.1525488,7.9144102 15.1356414,7.89865958 15.1189486,7.88267054 C15.0932222,7.85802801 15.0680384,7.83285363 15.0433827,7.80712907 C15.0269869,7.79001878 15.0110039,7.77286306 14.9952551,7.75547361 C14.9686227,7.72606654 14.9426653,7.69599769 14.9174049,7.66528078 C14.905244,7.65049305 14.8932458,7.63555652 14.8814121,7.62047206 C14.8532632,7.58459162 14.8260221,7.54784068 14.7997554,7.51028147 C14.7912387,7.49809936 14.7830445,7.48615879 14.7749487,7.4741386 C14.7503184,7.43757254 14.7265407,7.40017205 14.7037161,7.36205794 C14.6989674,7.35412737 14.6943205,7.34626964 14.6897142,7.33838204 L14.6667157,7.29814983 C14.658628,7.28369237 14.6506748,7.26913839 14.6428579,7.25448926 L14.6065642,7.18379605 L12.5879187,3.09357363 C12.5635862,3.04427048 12.5236793,3.0043636 12.4743761,2.98003104 L12.4366811,2.96682475 L12.4144429,2.95934967 C12.403114,2.95699545 12.3917235,2.95545502 12.3803488,2.9547021 C12.3596873,2.95337037 12.3395126,2.95455654 12.3198269,2.95808449 Z" id="__path-1"/>
+    </defs>
+    <g id="__Public/ic_public_collect" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="__mask-2" fill="white">
+            <use xlink:href="#__path-1"/>
+        </mask>
+        <use id="__形状结合" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#__path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/Index.ets b/MultiCommunityApplication/features/hot/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9ccf5e689b35c16fc50a28ca2eb94554ff4ceb11
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/Index.ets
@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { HotPointPage } from './src/main/ets/view/HotPointPage';
diff --git a/MultiCommunityApplication/features/hot/build-profile.json5 b/MultiCommunityApplication/features/hot/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/hvigorfile.ts b/MultiCommunityApplication/features/hot/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiCommunityApplication/features/hot/obfuscation-rules.txt b/MultiCommunityApplication/features/hot/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a1dfa0bd175984dc49e641436aa67b1de1b8abeb
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/obfuscation-rules.txt
@@ -0,0 +1,22 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/oh-package.json5 b/MultiCommunityApplication/features/hot/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..20150c2c55588879242004ba7bcd57f04bdc4af2
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/oh-package.json5
@@ -0,0 +1,15 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "hot",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "rank": "file:../rank",
+    "base": "file:../../commons/base",
+    "detail": "file:../detail"
+  }
+}
diff --git a/MultiCommunityApplication/features/hot/src/main/ets/constants/CommonConstants.ets b/MultiCommunityApplication/features/hot/src/main/ets/constants/CommonConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..71819aa7582f462742691a5f78bd8246604b6979
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/ets/constants/CommonConstants.ets
@@ -0,0 +1,166 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class CommonConstants {
+  /**
+   * Rank item margin left sm.
+   */
+  static readonly RANK_ITEM_ML_SM: string = '2.2%';
+
+  /**
+   * Rank item margin left md.
+   */
+  static readonly RANK_ITEM_ML_MD: string = '1.2%';
+
+  /**
+   * Rank item margin left lg.
+   */
+  static readonly RANK_ITEM_ML_LG: string = '1.2%';
+
+  /**
+   * Rank title margin left.
+   */
+  static readonly RANK_TITLE_MARGIN_LEFT: string = '2.2%';
+
+  /**
+   * Search bar width md.
+   */
+  static readonly SEARCH_BAR_WIDTH_MD: string = '27.2%';
+
+  /**
+   *Search bar width lg.
+   */
+  static readonly SEARCH_BAR_WIDTH_LG: string = '18.1%';
+
+  /**
+   * Animation duration.
+   */
+  static readonly TAB_ANIMATION_DURATION: number = 300;
+
+  /**
+   * Water flow columns template normal.
+   */
+  static readonly WATER_FLOW_COLUMNS_TEMPLATE_NORMAL: string = '1fr';
+
+  /**
+   * Water flow columns template lg.
+   */
+  static readonly WATER_FLOW_COLUMNS_TEMPLATE_LG: string = '1fr 1fr';
+
+  /**
+   * Hot column item space sm.
+   */
+  static readonly HOT_COLUMN_IS_SM:string = '0vp';
+
+  /**
+   * Hot column item space md.
+   */
+  static readonly HOT_COLUMN_IS_MD:string = '49vp';
+
+  /**
+   * Hot column item space lg.
+   */
+  static readonly HOT_COLUMN_IS_LG:string = '81vp';
+
+  /**
+   * Swiper display count one.
+   */
+  static readonly SWIPER_DISPLAY_COUNT_ONE: number = 1;
+
+  /**
+   * Swiper display count two.
+   */
+  static readonly SWIPER_DISPLAY_COUNT_TWO: number = 2;
+
+  /**
+   * Swiper display count three.
+   */
+  static readonly SWIPER_DISPLAY_COUNT_THREE: number = 3;
+
+  /**
+   * Hot column max count.
+   */
+  static readonly HOT_COLUMN_MAX_COUNT: number = 5;
+
+  /**
+   * Hot item column space.
+   */
+  static readonly HOT_ITEM_COLUMN_SPACE: string = '4vp';
+
+  /**
+   * Top count.
+   */
+  static readonly TOP_COUNT: number = 3;
+
+  /**
+   * Search bar opacity.
+   */
+  static readonly SEARCH_BAR_OPACITY: number = 0.9;
+
+  /**
+   * Card item shadow radius.
+   */
+  static readonly CARD_ITEM_SHADOW_RADIUS: number = 10;
+
+  /**
+   * Icon more opacity.
+   */
+  static readonly ICON_MORE_OPACITY: number = 0.4;
+
+  /**
+   * Window padding sm.
+   */
+  static readonly WINDOW_PADDING_SM: string = '16vp';
+
+  /**
+   * Window padding md.
+   */
+  static readonly WINDOW_PADDING_MD: string = '23vp';
+
+  /**
+   * Window padding lg.
+   */
+  static readonly WINDOW_PADDING_LG: string = '32vp';
+
+  /**
+   * Linear gradient angel.
+   */
+  static readonly LINEAR_GRADIENT_ANGEL: number = 180;
+
+  /**
+   * Linear gradient from color.
+   */
+  static readonly LINEAR_GRADIENT_FROM_COLOR: string = '#FFFFFF';
+
+  /**
+   * Linear gradient to color.
+   */
+  static readonly LINEAR_GRADIENT_TO_COLOR: string = '#F1F3F5';
+
+  /**
+   * Linear gradient to area.
+   */
+  static readonly LINEAR_GRADIENT_TO_AREA: number = 0.02;
+
+  /**
+   * Follow item picture max height.
+   */
+  static readonly FOLLOW_ITEM_PICTURE_MAX_HEIGHT: string = '60%';
+
+  /**
+   * Follow title space.
+   */
+  static readonly FOLLOW_TITLE_SPACE: string = '24vp';
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/ets/model/FollowModel.ets b/MultiCommunityApplication/features/hot/src/main/ets/model/FollowModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ef66c63e03bbaabb3923f4c7fccd741272ec033a
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/ets/model/FollowModel.ets
@@ -0,0 +1,207 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface FollowItemInterface {
+  name: ResourceStr;
+  icon: Resource;
+  date: ResourceStr;
+  picture: Resource;
+  type: ResourceStr;
+  subType: ResourceStr;
+  content: ResourceStr;
+  shareCount: number;
+  viewCount: number;
+  favourCount: number;
+}
+
+export const FOLLOW_LIST: FollowItemInterface[] = [
+  {
+    name: $r("app.string.follow_list_name_1"),
+    icon: $r('app.media.ic_follow_icon1'),
+    date: $r('app.string.follow_list_date_1'),
+    picture: $r('app.media.ic_follow_picture1'),
+    type: $r('app.string.follow_list_type_1'),
+    subType: $r('app.string.follow_list_subtype_1'),
+    content: $r('app.string.follow_list_content_1'),
+    shareCount: 1557,
+    viewCount: 57,
+    favourCount: 1557
+  },
+  {
+    name: $r('app.string.follow_list_name_2'),
+    icon: $r('app.media.ic_follow_icon2'),
+    date: $r('app.string.follow_list_date_2'),
+    picture: $r('app.media.ic_follow_picture2'),
+    type: $r('app.string.follow_list_type_1'),
+    subType: $r('app.string.follow_list_subtype_1'),
+    content: $r('app.string.follow_list_content_1'),
+    shareCount: 154,
+    viewCount: 34,
+    favourCount: 127
+  },
+  {
+    name: $r('app.string.follow_list_name_3'),
+    icon: $r('app.media.ic_follow_icon3'),
+    date: $r('app.string.follow_list_date_3'),
+    picture: $r('app.media.ic_follow_picture3'),
+    type: $r('app.string.follow_list_type_1'),
+    subType: $r('app.string.follow_list_subtype_1'),
+    content: $r('app.string.follow_list_content_1'),
+    shareCount: 134,
+    viewCount: 35,
+    favourCount: 357
+  },
+  {
+    name: $r('app.string.follow_list_name_4'),
+    icon: $r('app.media.ic_follow_icon4'),
+    date: $r('app.string.follow_list_date_4'),
+    picture: $r('app.media.ic_follow_picture4'),
+    type: $r('app.string.follow_list_type_1'),
+    subType: $r('app.string.follow_list_subtype_1'),
+    content: $r('app.string.follow_list_content_1'),
+    shareCount: 154,
+    viewCount: 54,
+    favourCount: 145
+  },
+  {
+    name: $r('app.string.follow_list_name_5'),
+    icon: $r('app.media.ic_follow_icon5'),
+    date: $r('app.string.follow_list_date_1'),
+    picture: $r('app.media.ic_follow_picture5'),
+    type: $r('app.string.follow_list_type_1'),
+    subType: $r('app.string.follow_list_subtype_1'),
+    content: $r('app.string.follow_list_content_1'),
+    shareCount: 1257,
+    viewCount: 573,
+    favourCount: 1357
+  },
+  {
+    name: $r('app.string.follow_list_name_6'),
+    icon: $r('app.media.ic_follow_icon6'),
+    date: $r('app.string.follow_list_date_6'),
+    picture: $r('app.media.ic_follow_picture6'),
+    type: $r('app.string.follow_list_type_1'),
+    subType: $r('app.string.follow_list_subtype_1'),
+    content: $r('app.string.follow_list_content_1'),
+    shareCount: 187,
+    viewCount: 56,
+    favourCount: 127
+  },
+  {
+    name: $r('app.string.follow_list_name_7'),
+    icon: $r('app.media.ic_follow_icon1'),
+    date: $r('app.string.follow_list_date_4'),
+    picture: $r('app.media.ic_follow_picture7'),
+    type: $r('app.string.follow_list_type_1'),
+    subType: $r('app.string.follow_list_subtype_1'),
+    content: $r('app.string.follow_list_content_1'),
+    shareCount: 757,
+    viewCount: 17,
+    favourCount: 156
+  },
+  {
+    name: $r('app.string.follow_list_name_8'),
+    icon: $r('app.media.ic_follow_icon2'),
+    date: $r('app.string.follow_list_date_8'),
+    picture: $r('app.media.ic_follow_picture8'),
+    type: $r('app.string.follow_list_type_1'),
+    subType: $r('app.string.follow_list_subtype_1'),
+    content: $r('app.string.follow_list_content_1'),
+    shareCount: 345,
+    viewCount: 56,
+    favourCount: 1366
+  },
+  {
+    name: $r('app.string.follow_list_name_9'),
+    icon: $r('app.media.ic_follow_icon3'),
+    date: $r('app.string.follow_list_date_1'),
+    picture: $r('app.media.ic_follow_picture9'),
+    type: $r('app.string.follow_list_type_1'),
+    subType: $r('app.string.follow_list_subtype_1'),
+    content: $r('app.string.follow_list_content_1'),
+    shareCount: 1557,
+    viewCount: 57,
+    favourCount: 1557
+  },
+  {
+    name: $r('app.string.follow_list_name_1'),
+    icon: $r('app.media.ic_follow_icon1'),
+    date: $r('app.string.follow_list_date_1'),
+    picture: $r('app.media.ic_follow_picture1'),
+    type: $r('app.string.follow_list_type_1'),
+    subType: $r('app.string.follow_list_subtype_1'),
+    content: $r('app.string.follow_list_content_1'),
+    shareCount: 1557,
+    viewCount: 57,
+    favourCount: 1557
+  }
+];
+
+export interface TitleDetailInterface {
+  name: ResourceStr;
+  icon?: Resource;
+  content?: ResourceStr;
+}
+
+export const TITLE_DETAIL_LIST: TitleDetailInterface[] = [
+  {
+    name: $r('app.string.follow_detail_name_1')
+  },
+  {
+    name: $r('app.string.follow_list_name_1'),
+    icon: $r('app.media.ic_follow_icon1'),
+    content: $r('app.string.follow_detail_content_1')
+  },
+  {
+    name: $r('app.string.follow_detail_name_2'),
+    icon: $r('app.media.ic_follow_icon2'),
+    content: $r('app.string.follow_detail_content_2')
+  },
+  {
+    name: $r('app.string.follow_list_name_3'),
+    icon: $r('app.media.ic_follow_icon3'),
+    content: $r('app.string.follow_detail_content_3')
+  },
+  {
+    name: $r('app.string.follow_detail_name_3'),
+    icon: $r('app.media.ic_follow_icon4'),
+    content: $r('app.string.follow_detail_content_4')
+  },
+  {
+    name: $r('app.string.follow_detail_name_4'),
+    icon: $r('app.media.ic_follow_icon5'),
+    content: $r('app.string.follow_detail_content_5')
+  },
+  {
+    name: $r('app.string.follow_list_name_6'),
+    icon: $r('app.media.ic_follow_icon6'),
+    content: $r('app.string.follow_detail_content_6')
+  },
+  {
+    name: $r('app.string.follow_detail_name_5'),
+    icon: $r('app.media.ic_follow_icon1'),
+    content: $r('app.string.follow_detail_content_7')
+  },
+  {
+    name: $r('app.string.follow_list_name_8'),
+    icon: $r('app.media.ic_follow_icon2'),
+    content: $r('app.string.follow_detail_content_8')
+  },
+  {
+    name: $r('app.string.follow_detail_name_6'),
+    icon: $r('app.media.ic_follow_icon3'),
+    content: $r('app.string.follow_detail_content_1')
+  }
+];
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/ets/view/CardItemView.ets b/MultiCommunityApplication/features/hot/src/main/ets/view/CardItemView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4e057d73f986af090c9a0ebae599b1e79a9bea59
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/ets/view/CardItemView.ets
@@ -0,0 +1,190 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { App as app } from '@kit.ArkUI';
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base';
+import { CommonConstants as Common } from '../constants/CommonConstants'
+import { FollowItemInterface, FOLLOW_LIST, TITLE_DETAIL_LIST } from '../model/FollowModel';
+
+@Preview
+@Component
+export struct CardItemView {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM;
+  @State index: number = 0;
+  item: FollowItemInterface = FOLLOW_LIST[0];
+  name: string = '';
+
+  aboutToAppear(): void {
+    app.setImageRawDataCacheSize(1024*1024*100);
+    app.setImageCacheCount(100);
+  }
+
+  build() {
+    Column() {
+      Row() {
+        Row() {
+          Image(this.index === 0 ? this.item.icon : TITLE_DETAIL_LIST[this.index].icon)
+            .width($r('app.float.follow_item_icon_width'))
+            .aspectRatio(1)
+            .borderRadius($r('app.float.follow_item_icon_br'))
+            .autoResize(true)
+
+          Column() {
+            Text(this.index === 0 ? this.item.name : TITLE_DETAIL_LIST[this.index].name)
+              .fontSize($r('app.float.follow_item_title_fs'))
+              .fontWeight(BaseCommon.FONT_WEIGHT_500)
+
+            Text(this.item.date)
+              .fontSize($r('app.float.follow_item_date_fs'))
+              .fontColor($r('app.color.follow_item_date_fc'))
+          }
+          .alignItems(HorizontalAlign.Start)
+          .margin({
+            left: $r('app.float.follow_item_title_ml')
+          })
+        }
+
+        Image($r('app.media.ic_point_more'))
+          .width($r('app.float.follow_item_more_width'))
+          .aspectRatio(1)
+      }
+      .width(BaseCommon.FULL_PERCENT)
+      .justifyContent(FlexAlign.SpaceBetween)
+
+      Stack() {
+        Image(this.item.picture)
+          .width(BaseCommon.FULL_PERCENT)
+          .objectFit(ImageFit.Cover)
+          .autoResize(true)
+
+        Row() {
+          Text(this.item.type)
+            .fontSize($r('app.float.follow_item_type_fs'))
+            .fontColor(Color.White)
+
+          Divider()
+            .vertical(true)
+            .width($r('app.float.follow_item_divider_width'))
+            .height($r('app.float.follow_item_divider_height'))
+            .margin({
+              left: $r('app.float.follow_item_divider_ml'),
+              right: $r('app.float.follow_item_divider_ml')
+            })
+            .color(Color.White)
+
+          Text(this.item.subType)
+            .fontSize($r('app.float.follow_item_type_fs'))
+            .fontColor(Color.White)
+        }
+        .backgroundColor($r('app.color.follow_item_type_bgc'))
+        .padding({
+          left: $r('app.float.follow_item_type_pl'),
+          right: $r('app.float.follow_item_type_pl'),
+          top: $r('app.float.follow_item_type_pt'),
+          bottom: $r('app.float.follow_item_type_pt')
+        })
+        .borderRadius($r('app.float.follow_item_type_br'))
+        .margin({
+          left: $r('app.float.follow_item_type_margin'),
+          bottom: $r('app.float.follow_item_type_margin')
+        })
+      }
+      .alignContent(Alignment.BottomStart)
+      .margin({
+        top: $r('app.float.follow_item_picture_margin'),
+        bottom: $r('app.float.follow_item_picture_margin')
+      })
+      .constraintSize({
+        maxHeight: Common.FOLLOW_ITEM_PICTURE_MAX_HEIGHT
+      })
+
+      Row() {
+        Text(this.item.content)
+          .maxLines(1)
+          .layoutWeight(1)
+          .textOverflow({
+            overflow: TextOverflow.Ellipsis
+          })
+          .fontColor($r('app.color.follow_item_content_fc'))
+          .fontSize($r('app.float.follow_item_content_fs'))
+
+        Text($r('app.string.read_total'))
+          .fontColor($r('app.color.follow_item_content_total_fc'))
+          .fontSize($r('app.float.follow_item_content_fs'))
+          .fontWeight(BaseCommon.FONT_WEIGHT_500)
+          .margin({
+            left: $r('app.float.follow_item_content_total_ml')
+          })
+      }
+      .width(BaseCommon.FULL_PERCENT)
+
+      Row() {
+        Row() {
+          Image($r('app.media.ic_toolbar_share'))
+            .height($r('app.float.follow_item_share_height'))
+            .aspectRatio(1)
+
+          Text(`${this.item.shareCount}`)
+            .fontSize($r('app.float.follow_item_share_fs'))
+            .fontColor($r('app.color.follow_item_share_fc'))
+            .margin({
+              left: $r('app.float.follow_item_share_ml')
+            })
+        }
+
+        Row() {
+          Image($r('app.media.ic_toolbar_comment'))
+            .height($r('app.float.follow_item_share_height'))
+            .aspectRatio(1)
+
+          Text(`${this.item.viewCount}`)
+            .fontSize($r('app.float.follow_item_share_fs'))
+            .fontColor($r('app.color.follow_item_share_fc'))
+            .margin({
+              left: $r('app.float.follow_item_share_ml')
+            })
+        }
+
+        Row() {
+          Image($r('app.media.ic_toolbar_heart'))
+            .height($r('app.float.follow_item_share_height'))
+            .aspectRatio(1)
+
+          Text(`${this.item.favourCount}`)
+            .fontSize($r('app.float.follow_item_share_fs'))
+            .fontColor($r('app.color.follow_item_share_fc'))
+            .margin({
+              left: $r('app.float.follow_item_share_ml')
+            })
+        }
+      }
+      .width(BaseCommon.FULL_PERCENT)
+      .justifyContent(FlexAlign.SpaceBetween)
+      .margin({
+        top: $r('app.float.follow_item_share_mt')
+      })
+    }
+    .padding({
+      top: $r('app.float.follow_item_margin_top'),
+      left: new BreakpointType($r('app.float.follow_item_sm_ml'), $r('app.float.follow_item_md_ml'),
+        $r('app.float.follow_item_lg_ml')).getValue(this.currentBreakpoint),
+      right: new BreakpointType($r('app.float.follow_item_sm_ml'), $r('app.float.follow_item_md_ml'),
+        $r('app.float.follow_item_lg_ml')).getValue(this.currentBreakpoint),
+      bottom: $r('app.float.follow_item_margin_bottom')
+    })
+    .borderRadius($r('app.float.follow_item_border_radius'))
+    .backgroundColor(Color.White)
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/ets/view/FollowView.ets b/MultiCommunityApplication/features/hot/src/main/ets/view/FollowView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..afd2caec7f125765ba7873cab7dee7dccb823e7c
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/ets/view/FollowView.ets
@@ -0,0 +1,271 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base';
+import { CommonConstants as Common } from '../constants/CommonConstants'
+import { CardItemView } from './CardItemView';
+import { TitleDetailInterface, TITLE_DETAIL_LIST } from '../model/FollowModel';
+import { FollowItemInterface, FOLLOW_LIST } from '../model/FollowModel';
+
+@Component
+export struct FollowView {
+  @StorageLink('currentBreakpoint') @Watch('updateShow') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM;
+  @StorageLink('isShowHotTitle') @Watch('updateShow') isShowHotTitle: boolean = true;
+  @State @Watch('updateShow') indexSelected: number = 0;
+  @State @Watch('updateShow') indexTitleSelected: number = -1;
+  @State pageInfo: NavPathStack = new NavPathStack();
+  iconList: TitleDetailInterface[] = TITLE_DETAIL_LIST;
+  iconTitleList: TitleDetailInterface[] = []
+  listScroller: Scroller = new Scroller();
+  listTitleScroller: Scroller = new Scroller();
+
+  updateShow() {
+    if (this.currentBreakpoint === Breakpoint.BREAKPOINT_SM && this.indexSelected !== 0) {
+      this.isShowHotTitle = false;
+      return;
+    }
+
+    this.isShowHotTitle = true;
+  }
+
+  aboutToAppear() {
+    TITLE_DETAIL_LIST.forEach((item: TitleDetailInterface, index: number) => {
+      if (index !== 0) {
+        this.iconTitleList.push(item);
+      }
+    });
+    this.pageInfo.pushPath({ name: '' });
+  }
+
+  build() {
+    Column() {
+      Column() {
+        Row() {
+          Text($r('app.string.read_total'))
+            .fontSize($r('app.float.follow_total_font_size'))
+            .fontColor($r('app.color.follow_total_font_color'))
+            .fontWeight(BaseCommon.FONT_WEIGHT_500)
+
+          Row() {
+            Text($r('app.string.more'))
+              .fontSize($r('app.float.follow_more_font_size'))
+              .fontColor($r('app.color.follow_more_font_color'))
+
+            Image($r('app.media.ic_public_arrow_right_filled'))
+              .width($r('app.float.follow_more_icon_width'))
+              .aspectRatio(1)
+          }
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .width(BaseCommon.FULL_PERCENT)
+        .padding({
+          left: $r('app.float.follow_more_padding'),
+          right: $r('app.float.follow_more_padding')
+        })
+        .visibility(this.isShowHotTitle ? Visibility.Visible : Visibility.None)
+
+        List({ space: Common.FOLLOW_TITLE_SPACE, scroller: this.listTitleScroller }) {
+          ForEach(this.iconTitleList, (item: TitleDetailInterface, index: number) => {
+            ListItem() {
+              Column() {
+                Image(item.icon)
+                  .width($r('app.float.follow_title_icon_width'))
+                  .aspectRatio(1)
+                  .borderRadius($r('app.float.follow_title_icon_br'))
+                  .borderWidth(index === this.indexTitleSelected ? $r('app.float.follow_title_icon_bw') :
+                  $r('app.float.zero'))
+                  .borderColor($r('app.color.follow_title_icon_bc'))
+
+                Text(item.name)
+                  .width($r('app.float.follow_title_text_width'))
+                  .fontSize($r('app.float.follow_title_text_font_size'))
+                  .fontColor(index === this.indexTitleSelected ? $r('app.color.follow_title_select') :
+                  $r('app.color.follow_title_normal'))
+                  .textAlign(TextAlign.Center)
+                  .margin({
+                    top: $r('app.float.follow_title_text_mt')
+                  })
+              }
+              .margin({
+                left: index === 0 ? $r('app.float.follow_title_margin_left') : $r('app.float.zero'),
+                right: index === this.iconTitleList.length - 1 ? $r('app.float.follow_title_margin_left') :
+                $r('app.float.zero')
+              })
+            }
+            .onClick(() => {
+              this.indexTitleSelected = index;
+              this.indexSelected = index + 1;
+              this.listScroller.scrollToIndex(this.indexSelected);
+              this.pageInfo.clear();
+              this.pageInfo.pushPath(new NavPathInfo(`${index}`, ''), false);
+            })
+          }, (item: TitleDetailInterface, index: number) => index + JSON.stringify(item))
+        }
+        .scrollBar(BarState.Off)
+        .listDirection(Axis.Horizontal)
+        .padding({
+          top: $r('app.float.follow_title_list_padding_top')
+        })
+        .height($r('app.float.follow_title_height'))
+        .width(BaseCommon.FULL_PERCENT)
+        .margin($r('app.float.zero'))
+
+        if (this.indexTitleSelected !== -1) {
+          Row() {
+            Text() {
+              Span(this.iconTitleList[this.indexTitleSelected].name)
+              Span($r('app.string.follow_title_content'))
+            }
+            .fontSize($r('app.float.follow_title_content_fs'))
+            .fontWeight(BaseCommon.FONT_WEIGHT_500)
+            .fontColor($r('app.color.follow_title_content_fc'))
+
+            Image($r('app.media.ic_public_cancel'))
+              .width($r('app.float.follow_title_cancel'))
+              .aspectRatio(1)
+              .onClick(() => {
+                this.indexTitleSelected = -1;
+                this.indexSelected = 0;
+                this.listScroller.scrollToIndex(0);
+
+                this.pageInfo.clear();
+                this.pageInfo.pushPath(new NavPathInfo(`${this.indexSelected}`, ''), false);
+              })
+          }
+          .width(BaseCommon.FULL_PERCENT)
+          .justifyContent(FlexAlign.SpaceBetween)
+          .padding({
+            left: $r('app.float.follow_title_message_padding_left'),
+            right: $r('app.float.follow_title_message_padding_left')
+          })
+          .margin({
+            top: $r('app.float.follow_title_message_margin_top')
+          })
+        }
+      }
+      .padding({
+        top: $r('app.float.follow_title_padding_top')
+      })
+      .width(BaseCommon.FULL_PERCENT)
+      .visibility(this.currentBreakpoint === Breakpoint.BREAKPOINT_SM ? Visibility.Visible : Visibility.None)
+      .backgroundColor(this.indexTitleSelected === -1 ? Color.White : $r('app.color.follow_title_bgc'))
+
+      Navigation(this.pageInfo) {
+        List({ initialIndex: this.indexSelected, scroller: this.listScroller }) {
+          ForEach(this.iconList, (item: TitleDetailInterface, index: number) => {
+            ListItem() {
+              Row() {
+                if (item.icon !== undefined) {
+                  Image(item.icon)
+                    .width($r('app.float.follow_guide_icon_width'))
+                    .aspectRatio(1)
+                    .borderRadius($r('app.float.follow_guide_icon_br'))
+                } else {
+                  Row()
+                    .width($r('app.float.follow_guide_icon_width'))
+                    .aspectRatio(1)
+                    .borderRadius($r('app.float.follow_guide_icon_br'))
+                    .backgroundColor($r('app.color.follow_guide_icon_color'))
+                }
+
+                Column() {
+                  Text(item.name)
+                    .fontSize($r('app.float.follow_guide_name_fs'))
+                    .fontWeight(BaseCommon.FONT_WEIGHT_500)
+                    .fontColor($r('app.color.follow_guide_name_fc'))
+
+                  Text(item?.content)
+                    .fontSize($r('app.float.follow_guide_content_fs'))
+                    .fontColor($r('app.color.follow_guide_content_fc'))
+                }
+                .margin({
+                  left: $r('app.float.follow_guide_name_ml')
+                })
+                .alignItems(HorizontalAlign.Start)
+              }
+              .width(BaseCommon.FULL_PERCENT)
+              .height($r('app.float.follow_guide_item_height'))
+              .backgroundColor(this.indexSelected === index ? $r('app.color.follow_guide_selected_bgc') : Color.White)
+              .padding({
+                left: $r('app.float.follow_guide_item_pl')
+              })
+              .onClick(() => {
+                this.indexSelected = index;
+                this.indexTitleSelected = index - 1;
+                this.listTitleScroller.scrollToIndex(this.indexTitleSelected < 0 ? 0 : this.indexTitleSelected);
+                this.pageInfo.clear();
+                this.pageInfo.pushPath(new NavPathInfo(`${index}`, ''), false);
+              })
+            }
+          }, (item: TitleDetailInterface, index: number) => index + JSON.stringify(item))
+        }
+        .scrollBar(BarState.Off)
+      }
+      .hideTitleBar(true)
+      .hideBackButton(true)
+      .hideToolBar(true)
+      .mode(NavigationMode.Split)
+      .navBarWidth(new BreakpointType($r('app.float.zero'), $r('app.float.nav_bar_width_md'),
+        $r('app.float.nav_bar_width_lg')).getValue(this.currentBreakpoint))
+      .hideNavBar(this.currentBreakpoint === Breakpoint.BREAKPOINT_SM)
+      .layoutWeight(1)
+      .navDestination(this.pageMap)
+    }
+    .justifyContent(FlexAlign.Start)
+    .backgroundColor($r('app.color.nav_content_bgd'))
+    .height(BaseCommon.FULL_PERCENT)
+  }
+
+  @Builder
+  pageMap(name: string) {
+    NavDestination() {
+      WaterFlow() {
+        ForEach(FOLLOW_LIST, (item: FollowItemInterface) => {
+          FlowItem() {
+            CardItemView({
+              item: item,
+              index: this.indexSelected
+            })
+          }
+        }, (item: FollowItemInterface, index: number) => index + JSON.stringify(item))
+      }
+      .backgroundColor($r('app.color.nav_content_bgd'))
+      .padding({
+        top: new BreakpointType($r('app.float.follow_water_flow_padding_sm'),
+          $r('app.float.follow_water_flow_padding_md'), $r('app.float.follow_water_flow_padding_lg'))
+          .getValue(this.currentBreakpoint),
+        left: new BreakpointType($r('app.float.follow_water_flow_padding_sm'),
+          $r('app.float.follow_water_flow_padding_md'), $r('app.float.follow_water_flow_padding_lg'))
+          .getValue(this.currentBreakpoint),
+        right: new BreakpointType($r('app.float.follow_water_flow_padding_sm'),
+          $r('app.float.follow_water_flow_padding_md'), $r('app.float.follow_water_flow_padding_lg'))
+          .getValue(this.currentBreakpoint),
+        bottom: new BreakpointType($r('app.float.follow_water_flow_padding_sm'),
+          $r('app.float.follow_water_flow_padding_md'), $r('app.float.follow_water_flow_padding_lg'))
+          .getValue(this.currentBreakpoint)
+      })
+      .columnsGap($r('app.float.follow_water_flow_column_gap'))
+      .rowsGap(new BreakpointType($r('app.float.follow_water_flow_padding_sm'),
+        $r('app.float.follow_water_flow_padding_md'), $r('app.float.follow_water_flow_padding_lg'))
+        .getValue(this.currentBreakpoint))
+      .columnsTemplate(new BreakpointType(Common.WATER_FLOW_COLUMNS_TEMPLATE_NORMAL,
+        Common.WATER_FLOW_COLUMNS_TEMPLATE_NORMAL, Common.WATER_FLOW_COLUMNS_TEMPLATE_LG)
+        .getValue(this.currentBreakpoint))
+    }
+    .width(BaseCommon.FULL_PERCENT)
+    .height(BaseCommon.FULL_PERCENT)
+    .hideTitleBar(true)
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/ets/view/FoundView.ets b/MultiCommunityApplication/features/hot/src/main/ets/view/FoundView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b69991cc7c637d6e9bbd8e70167f85b5cfd608dd
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/ets/view/FoundView.ets
@@ -0,0 +1,175 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base';
+import { CommentBarView, MircoBlogView } from 'detail';
+import { CardArrayViewModel, CardArray } from 'detail';
+import { CardItem } from 'detail';
+import { CommonConstants as Common } from '../constants/CommonConstants';
+import { HotColumnView } from '../view/HotColumnView';
+
+@Component
+export struct FoundView {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM;
+  @StorageLink('cardArrayViewModel') cardArrayViewModel: CardArray = CardArrayViewModel.getInstance();
+  @StorageLink('pageInfos') pageInfos: NavPathStack = new NavPathStack();
+  @State tabIndexSelected: number = 0;
+
+  jumpDetail() {
+    this.pageInfos.pushPath({name : 'detailPage'});
+  }
+
+  @Builder
+  TitleBarBuilder() {
+    Row() {
+      List({
+        space: new BreakpointType(Common.WINDOW_PADDING_SM, Common.WINDOW_PADDING_MD,
+          Common.WINDOW_PADDING_LG).getValue(this.currentBreakpoint)
+      }) {
+        ForEach(BaseCommon.RANK_TITLE_LIST, (item: ResourceStr, index: number) => {
+          ListItem() {
+            Text(item)
+              .fontSize($r('app.float.rank_name_fs'))
+              .fontWeight(BaseCommon.FONT_WEIGHT_500)
+              .fontColor(this.tabIndexSelected === index ? $r('app.color.tab_selected') : $r('app.color.tab_normal'))
+              .height($r('app.float.rank_name_height'))
+              .onClick(() => {
+                this.tabIndexSelected = index;
+              })
+          }
+        }, (item: string, index: number) => index + JSON.stringify(item))
+      }
+      .listDirection(Axis.Horizontal)
+      .height($r('app.float.rank_title_height'))
+      .alignListItem(ListItemAlign.Center)
+      .scrollBar(BarState.Off)
+    }
+    .width(BaseCommon.FULL_PERCENT)
+    .justifyContent(this.currentBreakpoint !== Breakpoint.BREAKPOINT_SM ? FlexAlign.SpaceBetween : FlexAlign.Start)
+    .padding({
+      left: new BreakpointType($r('app.float.window_padding_left_sm'), $r('app.float.window_padding_left_md'),
+        $r('app.float.window_padding_left_lg')).getValue(this.currentBreakpoint),
+      right: new BreakpointType($r('app.float.window_padding_left_sm'), $r('app.float.window_padding_left_md'),
+        $r('app.float.window_padding_left_lg')).getValue(this.currentBreakpoint),
+      top: $r('app.float.tab_bar_padding_top')
+    })
+  }
+
+  build() {
+    Scroll() {
+      Column() {
+        this.TitleBarBuilder()
+
+        Tabs({ index: this.tabIndexSelected, barPosition: BarPosition.Start }) {
+          ForEach(BaseCommon.RANK_TITLE_LIST, (item: ResourceStr) => {
+            TabContent() {
+              HotColumnView({
+                tab_index: this.tabIndexSelected
+              })
+            }
+          }, (item: string) => JSON.stringify(item))
+        }
+        .barMode(BarMode.Scrollable, { margin: $r('app.float.tab_bar_mode_margin') })
+        .barHeight($r('app.float.tab_bar_height'))
+        .animationDuration(Common.TAB_ANIMATION_DURATION)
+        .scrollable(false)
+        .barHeight($r('app.float.zero'))
+        .height($r('app.float.rank_list_height'))
+        .padding({
+          left: new BreakpointType($r('app.float.window_padding_left_sm'), $r('app.float.window_padding_left_md'),
+            $r('app.float.window_padding_left_lg')).getValue(this.currentBreakpoint),
+          right: new BreakpointType($r('app.float.window_padding_left_sm'), $r('app.float.window_padding_left_md'),
+            $r('app.float.window_padding_left_lg')).getValue(this.currentBreakpoint)
+        })
+
+        Blank()
+          .width(BaseCommon.FULL_PERCENT)
+          .height($r('app.float.blank_height'))
+          .visibility(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? Visibility.Hidden : Visibility.Visible)
+
+        // [Start foundView]
+        WaterFlow() {
+          // [StartExclude foundView]
+          ForEach(this.cardArrayViewModel.cardArray, (item: CardItem, index: number) => {
+            FlowItem() {
+              Column() {
+                MircoBlogView({
+                  cardItem: item,
+                  index: index,
+                  jumpDetail: () => {
+                    AppStorage.setOrCreate('selectCardIndex', index);
+                    this.jumpDetail();
+                  }
+                })
+                  .padding({
+                    left: new BreakpointType($r('app.float.window_padding_left_sm'),
+                      $r('app.float.window_padding_left_md'), $r('app.float.window_padding_left_sm'))
+                      .getValue(this.currentBreakpoint),
+                    right: new BreakpointType($r('app.float.window_padding_left_sm'),
+                      $r('app.float.window_padding_left_md'), $r('app.float.window_padding_left_sm'))
+                      .getValue(this.currentBreakpoint),
+                    top: new BreakpointType($r('app.float.zero'), $r('app.float.zero'),
+                      $r('app.float.card_margin_top_lg')).getValue(this.currentBreakpoint)
+                  })
+
+                CommentBarView({
+                  isShowInput: false,
+                  jumpDetail: () => {
+                    AppStorage.setOrCreate('selectCardIndex', index);
+                    this.jumpDetail();
+                  }
+                })
+              }
+              .borderRadius(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ?
+                $r('app.float.water_flow_br') : $r('app.float.zero'))
+              .backgroundColor($r('app.color.white'))
+              .margin(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ?
+                $r('app.float.water_flow_margin') : $r('app.float.zero'))
+            }
+          }, (item: CardItem, index: number) => index + JSON.stringify(item))
+          // [EndExclude foundView]
+        }
+        .columnsTemplate(this.currentBreakpoint !== Breakpoint.BREAKPOINT_LG ?
+        Common.WATER_FLOW_COLUMNS_TEMPLATE_NORMAL : Common.WATER_FLOW_COLUMNS_TEMPLATE_LG)
+        // [End foundView]
+        .backgroundColor(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ?
+        $r('app.color.water_flow_bgc_lg') : $r('app.color.water_flow_bgc'))
+        .linearGradient({
+          angle: Common.LINEAR_GRADIENT_ANGEL,
+          colors: [
+            [Common.LINEAR_GRADIENT_FROM_COLOR, 0],
+            [Common.LINEAR_GRADIENT_TO_COLOR, Common.LINEAR_GRADIENT_TO_AREA]
+          ]
+        })
+        .rowsGap(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ?
+        $r('app.float.zero') : $r('app.float.water_flow_rows_gap'))
+        .nestedScroll({
+          scrollForward: NestedScrollMode.PARENT_FIRST,
+          scrollBackward: NestedScrollMode.SELF_FIRST
+        })
+        .padding({
+          left: this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? $r('app.float.water_flow_padding_lg') :
+          $r('app.float.zero'),
+          right: this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? $r('app.float.water_flow_padding_lg') :
+          $r('app.float.zero'),
+          top: this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? $r('app.float.water_flow_padding_top_lg') :
+          $r('app.float.zero')
+        })
+      }
+    }
+    .scrollBar(BarState.Off)
+    .layoutWeight(1)
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/ets/view/HotColumnView.ets b/MultiCommunityApplication/features/hot/src/main/ets/view/HotColumnView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3f616d6281329b3b86f41caa0542ad263083aa70
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/ets/view/HotColumnView.ets
@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base';
+import { HotItemInterface, HOST_LIST_ARRAY } from 'base';
+import { HotListItemView } from 'rank';
+import { CommonConstants as Common } from '../constants/CommonConstants';
+import { ToRankView } from './ToRankView';
+
+const SWIPER_LIST: number[] = [0, 1, 2];
+// [Start hot_column_view]
+@Component
+export struct HotColumnView {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM;
+  // [StartExclude hot_column_view]
+  @State tab_index: number = 0;
+  // [EndExclude hot_column_view]
+  @Builder
+  HotListBuilder(index: number) {
+    List() {
+      ForEach(HOST_LIST_ARRAY[this.tab_index], (item: HotItemInterface) => {
+        if (item.index > index * Common.HOT_COLUMN_MAX_COUNT &&
+          item.index <= (index + 1) * Common.HOT_COLUMN_MAX_COUNT) {
+          ListItem() {
+            HotListItemView({
+              item: item,
+              showDetail: true,
+              // [StartExclude hot_column_view]
+              indexWidth: item.index <= Common.HOT_COLUMN_MAX_COUNT ? $r('app.float.index_width_normal') :
+                $r('app.float.index_width_more'),
+              indexIconGap: $r('app.float.index_icon_gap')
+              // [EndExclude hot_column_view]
+            })
+          }
+        }
+      }, (item: HotItemInterface) => JSON.stringify(item))
+    }
+  }
+
+  build() {
+    Column() {
+      Swiper() {
+        ForEach(SWIPER_LIST, (item: number) => {
+          this.HotListBuilder(item)
+        }, (item: number) => JSON.stringify(item))
+      }
+      // [StartExclude hot_column_view]
+      .autoPlay(false)
+      .indicator(false)
+      .disableSwipe(true)
+      .displayCount(new BreakpointType(
+        Common.SWIPER_DISPLAY_COUNT_ONE,
+        Common.SWIPER_DISPLAY_COUNT_TWO,
+        Common.SWIPER_DISPLAY_COUNT_THREE
+      ).getValue(this.currentBreakpoint))
+      .itemSpace((new BreakpointType(Common.HOT_COLUMN_IS_SM, Common.HOT_COLUMN_IS_MD, Common.HOT_COLUMN_IS_LG))
+        .getValue(this.currentBreakpoint))
+
+      ToRankView()
+      // [EndExclude hot_column_view]
+    }
+    // [StartExclude hot_column_view]
+    .width(BaseCommon.FULL_PERCENT)
+    .alignItems(HorizontalAlign.Start)
+    // [EndExclude hot_column_view]
+  }
+}
+// [End hot_column_view]
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/ets/view/HotPointPage.ets b/MultiCommunityApplication/features/hot/src/main/ets/view/HotPointPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b3196a477fc6f790c249f1f0efb58af10379b004
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/ets/view/HotPointPage.ets
@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon } from 'base/';
+import { FoundView } from './FoundView';
+import { FollowView } from './FollowView';
+import { HotTitleView } from './HotTitleView';
+
+@Component
+export struct HotPointPage {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM;
+  @StorageLink('isFoundSelected') isFoundSelected: boolean = true;
+  @StorageLink('isShowHotTitle') isShowHotTitle: boolean = true;
+
+  build() {
+    Column() {
+      Column() {
+        if (this.isShowHotTitle) {
+          HotTitleView()
+        }
+
+        if (this.isFoundSelected) {
+          FoundView()
+        } else {
+          Column() {
+            FollowView()
+          }
+          .layoutWeight(1)
+        }
+      }
+      .height(BaseCommon.FULL_PERCENT)
+      .width(BaseCommon.FULL_PERCENT)
+    }
+    .padding({
+      top: deviceInfo.deviceType === BaseCommon.DEVICE_2IN1 ? $r('app.float.zero') : $r('app.float.device_padding_top')
+    })
+    .backgroundColor($r('app.color.white'))
+    .height(BaseCommon.FULL_PERCENT)
+    .justifyContent(FlexAlign.Start)
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/ets/view/HotTitleView.ets b/MultiCommunityApplication/features/hot/src/main/ets/view/HotTitleView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..54dce745a8f81881aa033d99fb43e43656c57719
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/ets/view/HotTitleView.ets
@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base';
+import { SearchBarView } from '../view/SearchBarView';
+
+@Component
+export struct HotTitleView {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM;
+  @StorageLink('isFoundSelected') isFoundSelected: boolean = false;
+
+  build() {
+    Column() {
+      Stack() {
+        Row() {
+          Text($r('app.string.found'))
+            .fontSize(this.isFoundSelected ? $r('app.float.title_font_size_selected') :
+              $r('app.float.title_font_size_normal'))
+            .fontWeight(BaseCommon.FONT_WEIGHT_500)
+            .fontColor(Color.Black)
+            .opacity(this.isFoundSelected ? $r('app.float.title_opacity_selected') :
+              $r('app.float.title_opacity_normal'))
+            .onClick(()=>{
+              this.isFoundSelected = true;
+            })
+
+          Text($r('app.string.follow'))
+            .fontSize(this.isFoundSelected ? $r('app.float.title_font_size_normal') :
+              $r('app.float.title_font_size_selected'))
+            .fontWeight(BaseCommon.FONT_WEIGHT_500)
+            .fontColor(Color.Black)
+            .margin({
+              left: new BreakpointType($r('app.float.title_margin_left_sm'), $r('app.float.title_margin_left_md'),
+                $r('app.float.title_margin_left_lg')).getValue(this.currentBreakpoint)
+            })
+            .opacity(this.isFoundSelected ? $r('app.float.title_opacity_normal') :
+              $r('app.float.title_opacity_selected'))
+            .onClick(()=>{
+              this.isFoundSelected = false;
+            })
+        }
+        .width(BaseCommon.FULL_PERCENT)
+        .height(BaseCommon.FULL_PERCENT)
+        .justifyContent(FlexAlign.Center)
+
+        SearchBarView()
+          .width(new BreakpointType($r('app.float.search_bar_view_width_sm'), $r('app.float.search_bar_view_width_md'),
+            $r('app.float.search_bar_view_width_lg')).getValue(this.currentBreakpoint))
+      }
+      .alignContent(Alignment.End)
+      .padding({
+        left: new BreakpointType($r('app.float.window_padding_left_sm'), $r('app.float.window_padding_left_md'),
+          $r('app.float.window_padding_left_lg')).getValue(this.currentBreakpoint),
+        right: new BreakpointType($r('app.float.window_padding_left_sm'), $r('app.float.window_padding_left_md'),
+          $r('app.float.window_padding_left_lg')).getValue(this.currentBreakpoint)
+      })
+    }
+    .height($r('app.float.hot_title_height'))
+    .borderColor($r('app.color.hot_title_border_color'))
+    .borderWidth({
+      bottom: new BreakpointType($r('app.float.hot_title_border_width_normal'),
+        $r('app.float.hot_title_border_width_normal'), $r('app.float.hot_title_border_width_more')
+      ).getValue(this.currentBreakpoint)
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/ets/view/SearchBarView.ets b/MultiCommunityApplication/features/hot/src/main/ets/view/SearchBarView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..5036809b6a909c9a5c91a12f9fc793a240f0dc82
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/ets/view/SearchBarView.ets
@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon } from 'base';
+import { CommonConstants as Common } from '../constants/CommonConstants';
+
+@Component
+export struct SearchBarView {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM;
+
+  build() {
+    if (this.currentBreakpoint === Breakpoint.BREAKPOINT_SM) {
+      Row() {
+        Image($r('app.media.ic_public_input_search'))
+          .width($r('app.float.input_search_icon_width'))
+          .aspectRatio(1)
+      }
+    } else {
+      Row() {
+        Row() {
+          Image($r('app.media.ic_public_search'))
+            .height($r('app.float.icon_search_height'))
+            .aspectRatio(1)
+            .margin({ left: $r('app.float.icon_search_ml') })
+
+          TextInput({ placeholder: $r('app.string.placeholder') })
+            .layoutWeight(1)
+            .backgroundColor($r('app.color.acetate'))
+            .padding({ left: $r('app.float.zero') })
+            .margin({ left: $r('app.float.search_input_margin_left') })
+            .enableKeyboardOnFocus(false)
+
+          Image($r('app.media.ic_public_voice'))
+            .height($r('app.float.icon_voice_height'))
+            .aspectRatio(1)
+            .margin({ left: $r('app.float.icon_voice_ml') })
+
+          Image($r('app.media.ic_public_spinner_small'))
+            .width($r('app.float.spinner_small_width'))
+            .height($r('app.float.spinner_small_height'))
+            .margin({ right: $r('app.float.spinner_small_ml') })
+        }
+        .backgroundColor($r('app.color.white'))
+        .borderRadius($r('app.float.search_bar_br'))
+        .borderWidth($r('app.float.search_bar_bw'))
+        .height($r('app.float.search_bar_height'))
+        .width(BaseCommon.FULL_PERCENT)
+        .margin({
+          top: $r('app.float.search_bar_mt'),
+          bottom: $r('app.float.search_bar_mt')
+        })
+        .opacity(Common.SEARCH_BAR_OPACITY)
+      }
+      .alignItems(VerticalAlign.Center)
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/ets/view/ToRankView.ets b/MultiCommunityApplication/features/hot/src/main/ets/view/ToRankView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d2be1f7cdcffc9134cbe4dd08d11c472344b2dac
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/ets/view/ToRankView.ets
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonConstants as Common } from '../constants/CommonConstants'
+
+@Component
+export struct ToRankView {
+  @StorageLink('pageInfos') pageInfos: NavPathStack = new NavPathStack();
+
+  build() {
+    Row() {
+      Text($r('app.string.read_total_rank'))
+        .fontWeight(FontWeight.Normal)
+        .fontColor($r('app.color.read_total_rank_color'))
+        .fontSize($r('app.float.read_total_rank_fs'))
+
+      Image($r('app.media.ic_more'))
+        .width($r('app.float.arrow_right_width'))
+        .aspectRatio(1)
+        .margin({ left: $r('app.float.arrow_right_ml') })
+        .opacity(Common.ICON_MORE_OPACITY)
+    }
+    .justifyContent(FlexAlign.Start)
+    .alignItems(VerticalAlign.Center)
+    .margin({ top: $r('app.float.read_total_rank_mt') })
+    .onClick(() => {
+      this.pageInfos.pushPath({ name: 'rankPage' });
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/module.json5 b/MultiCommunityApplication/features/hot/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..2b99b58f6d584627a4225282e094914115a387ab
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/module.json5
@@ -0,0 +1,12 @@
+{
+  "module": {
+    "name": "hot",
+    "type": "har",
+    "description": "$string:shared_desc",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/element/color.json b/MultiCommunityApplication/features/hot/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..2fc432124d09aafdb3cd622c35fc716e7a9a91bf
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/resources/base/element/color.json
@@ -0,0 +1,108 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "pink",
+      "value": "#1fff9a6e"
+    },
+    {
+      "name": "tab_selected",
+      "value": "#000000"
+    },
+    {
+      "name": "tab_normal",
+      "value": "#99000000"
+    },
+    {
+      "name": "hot_title_border_color",
+      "value": "#0d000000"
+    },
+    {
+      "name": "water_flow_bgc",
+      "value": "#0d000000"
+    },
+    {
+      "name": "acetate",
+      "value": "#00000000"
+    },
+    {
+      "name": "read_total_rank_color",
+      "value": "#66000000"
+    },
+    {
+      "name": "water_flow_bgc_lg",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "follow_item_date_fc",
+      "value": "#66000000"
+    },
+    {
+      "name": "follow_item_type_bgc",
+      "value": "#66000000"
+    },
+    {
+      "name": "follow_item_content_fc",
+      "value": "#A6000000"
+    },
+    {
+      "name": "follow_item_content_total_fc",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "follow_item_share_fc",
+      "value": "#D9000000"
+    },
+    {
+      "name": "follow_total_font_color",
+      "value": "#E6000000"
+    },
+    {
+      "name": "follow_more_font_color",
+      "value": "#66000000"
+    },
+    {
+      "name": "follow_title_icon_bc",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "follow_title_select",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "follow_title_normal",
+      "value": "#99000000"
+    },
+    {
+      "name": "follow_title_content_fc",
+      "value": "#E6000000"
+    },
+    {
+      "name": "follow_title_bgc",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "follow_guide_icon_color",
+      "value": "#94B5F6"
+    },
+    {
+      "name": "follow_guide_name_fc",
+      "value": "#E6000000"
+    },
+    {
+      "name": "follow_guide_content_fc",
+      "value": "#66000000"
+    },
+    {
+      "name": "follow_guide_selected_bgc",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "nav_content_bgd",
+      "value": "#F1F3F5"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/element/float.json b/MultiCommunityApplication/features/hot/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..3e340036699b690f6dd13bce987db6ec85732306
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/resources/base/element/float.json
@@ -0,0 +1,472 @@
+{
+  "float": [
+    {
+      "name": "search_bar_view_ml",
+      "value": "16vp"
+    },
+    {
+      "name": "rank_name_fs",
+      "value": "18fp"
+    },
+    {
+      "name": "rank_name_height",
+      "value": "22vp"
+    },
+    {
+      "name": "rank_title_height",
+      "value": "40vp"
+    },
+    {
+      "name": "zero",
+      "value": "0vp"
+    },
+    {
+      "name": "tab_bar_margin_left",
+      "value": "32vp"
+    },
+    {
+      "name": "tab_bar_mode_margin",
+      "value": "6vp"
+    },
+    {
+      "name": "tab_bar_height",
+      "value": "28vp"
+    },
+    {
+      "name": "rank_list_height",
+      "value": "384vp"
+    },
+    {
+      "name": "water_flow_br",
+      "value": "8vp"
+    },
+    {
+      "name": "water_flow_margin",
+      "value": "6vp"
+    },
+    {
+      "name": "water_flow_rows_gap",
+      "value": "8vp"
+    },
+    {
+      "name": "water_flow_margin_left",
+      "value": "26vp"
+    },
+    {
+      "name": "hot_column_padding_left",
+      "value": "16vp"
+    },
+    {
+      "name": "icon_search_height",
+      "value": "16vp"
+    },
+    {
+      "name": "icon_search_ml",
+      "value": "12vp"
+    },
+    {
+      "name": "search_input_margin_left",
+      "value": "8vp"
+    },
+    {
+      "name": "icon_voice_height",
+      "value": "16vp"
+    },
+    {
+      "name": "icon_voice_ml",
+      "value": "12vp"
+    },
+    {
+      "name": "spinner_small_width",
+      "value": "8vp"
+    },
+    {
+      "name": "spinner_small_height",
+      "value": "16vp"
+    },
+    {
+      "name": "spinner_small_ml",
+      "value": "9vp"
+    },
+    {
+      "name": "search_bar_br",
+      "value": "20vp"
+    },
+    {
+      "name": "search_bar_bw",
+      "value": "1.5vp"
+    },
+    {
+      "name": "search_bar_height",
+      "value": "40vp"
+    },
+    {
+      "name": "search_bar_mt",
+      "value": "8vp"
+    },
+    {
+      "name": "search_height",
+      "value": "56vp"
+    },
+    {
+      "name": "read_total_rank_fs",
+      "value": "12fp"
+    },
+    {
+      "name": "arrow_right_width",
+      "value": "16vp"
+    },
+    {
+      "name": "arrow_right_ml",
+      "value": "1vp"
+    },
+    {
+      "name": "read_total_rank_mt",
+      "value": "4vp"
+    },
+    {
+      "name": "search_bar_margin_top",
+      "value": "24vp"
+    },
+    {
+      "name": "window_padding_left_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "window_padding_left_md",
+      "value": "24vp"
+    },
+    {
+      "name": "window_padding_left_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "card_padding_lg",
+      "value": "8vp"
+    },
+    {
+      "name": "water_flow_padding_lg",
+      "value": "26vp"
+    },
+    {
+      "name": "water_flow_padding_top_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "device_padding_top",
+      "value": "36vp"
+    },
+    {
+      "name": "index_width_normal",
+      "value": "9vp"
+    },
+    {
+      "name": "index_width_more",
+      "value": "19vp"
+    },
+    {
+      "name": "index_icon_gap",
+      "value": "8vp"
+    },
+    {
+      "name": "card_margin_top_lg",
+      "value": "8vp"
+    },
+    {
+      "name": "blank_height",
+      "value": "16vp"
+    },
+    {
+      "name": "title_font_size_normal",
+      "value": "18fp"
+    },
+    {
+      "name": "title_font_size_selected",
+      "value": "24fp"
+    },
+    {
+      "name": "title_opacity_normal",
+      "value": "0.6"
+    },
+    {
+      "name": "title_opacity_selected",
+      "value": "0.97"
+    },
+    {
+      "name": "title_margin_left_sm",
+      "value": "40vp"
+    },
+    {
+      "name": "title_margin_left_md",
+      "value": "48vp"
+    },
+    {
+      "name": "title_margin_left_lg",
+      "value": "56vp"
+    },
+    {
+      "name": "search_bar_view_width_sm",
+      "value": "24vp"
+    },
+    {
+      "name": "search_bar_view_width_md",
+      "value": "184vp"
+    },
+    {
+      "name": "search_bar_view_width_lg",
+      "value": "232vp"
+    },
+    {
+      "name": "hot_title_height",
+      "value": "56vp"
+    },
+    {
+      "name": "hot_title_border_width_normal",
+      "value": "1vp"
+    },
+    {
+      "name": "hot_title_border_width_more",
+      "value": "2vp"
+    },
+    {
+      "name": "tab_bar_padding_top",
+      "value": "4vp"
+    },
+    {
+      "name": "follow_item_icon_width",
+      "value": "36vp"
+    },
+    {
+      "name": "follow_item_icon_br",
+      "value": "18vp"
+    },
+    {
+      "name": "follow_item_title_fs",
+      "value": "14fp"
+    },
+    {
+      "name": "follow_item_date_fs",
+      "value": "12fp"
+    },
+    {
+      "name": "follow_item_title_ml",
+      "value": "8vp"
+    },
+    {
+      "name": "follow_item_more_width",
+      "value": "22vp"
+    },
+    {
+      "name": "follow_item_type_fs",
+      "value": "12fp"
+    },
+    {
+      "name": "follow_item_divider_width",
+      "value": "1vp"
+    },
+    {
+      "name": "follow_item_divider_height",
+      "value": "6vp"
+    },
+    {
+      "name": "follow_item_divider_ml",
+      "value": "4vp"
+    },
+    {
+      "name": "follow_item_type_pl",
+      "value": "10vp"
+    },
+    {
+      "name": "follow_item_type_pt",
+      "value": "4vp"
+    },
+    {
+      "name": "follow_item_type_br",
+      "value": "14vp"
+    },
+    {
+      "name": "follow_item_type_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "follow_item_picture_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "follow_item_content_fs",
+      "value": "14fp"
+    },
+    {
+      "name": "follow_item_content_total_ml",
+      "value": "1vp"
+    },
+    {
+      "name": "follow_item_share_height",
+      "value": "24vp"
+    },
+    {
+      "name": "follow_item_share_fs",
+      "value": "14fp"
+    },
+    {
+      "name": "follow_item_share_ml",
+      "value": "9vp"
+    },
+    {
+      "name": "follow_item_share_mt",
+      "value": "14vp"
+    },
+    {
+      "name": "follow_item_border_radius",
+      "value": "15vp"
+    },
+    {
+      "name": "follow_item_margin_top",
+      "value": "12vp"
+    },
+    {
+      "name": "follow_item_margin_bottom",
+      "value": "16vp"
+    },
+    {
+      "name": "follow_item_sm_ml",
+      "value": "12vp"
+    },
+    {
+      "name": "follow_item_md_ml",
+      "value": "12vp"
+    },
+    {
+      "name": "follow_item_lg_ml",
+      "value": "16vp"
+    },
+    {
+      "name": "follow_total_font_size",
+      "value": "14fp"
+    },
+    {
+      "name": "follow_more_font_size",
+      "value": "12fp"
+    },
+    {
+      "name": "follow_more_icon_width",
+      "value": "12vp"
+    },
+    {
+      "name": "follow_more_padding",
+      "value": "16vp"
+    },
+    {
+      "name": "follow_title_icon_width",
+      "value": "40vp"
+    },
+    {
+      "name": "follow_title_icon_br",
+      "value": "20vp"
+    },
+    {
+      "name": "follow_title_icon_bw",
+      "value": "2vp"
+    },
+    {
+      "name": "follow_title_text_width",
+      "value": "40vp"
+    },
+    {
+      "name": "follow_title_text_font_size",
+      "value": "10fp"
+    },
+    {
+      "name": "follow_title_text_mt",
+      "value": "4vp"
+    },
+    {
+      "name": "follow_title_margin_left",
+      "value": "16vp"
+    },
+    {
+      "name": "follow_title_list_padding_top",
+      "value": "8vp"
+    },
+    {
+      "name": "follow_title_height",
+      "value": "80vp"
+    },
+    {
+      "name": "follow_title_content_fs",
+      "value": "16fp"
+    },
+    {
+      "name": "follow_title_cancel",
+      "value": "16vp"
+    },
+    {
+      "name": "follow_title_message_padding_left",
+      "value": "16vp"
+    },
+    {
+      "name": "follow_title_message_margin_top",
+      "value": "16vp"
+    },
+    {
+      "name": "follow_title_padding_top",
+      "value": "8vp"
+    },
+    {
+      "name": "follow_guide_icon_width",
+      "value": "48vp"
+    },
+    {
+      "name": "follow_guide_icon_br",
+      "value": "24vp"
+    },
+    {
+      "name": "follow_guide_name_fs",
+      "value": "16fp"
+    },
+    {
+      "name": "follow_guide_content_fs",
+      "value": "14fp"
+    },
+    {
+      "name": "follow_guide_name_ml",
+      "value": "12vp"
+    },
+    {
+      "name": "follow_guide_item_height",
+      "value": "72vp"
+    },
+    {
+      "name": "follow_guide_item_pl",
+      "value": "24vp"
+    },
+    {
+      "name": "nav_bar_width_md",
+      "value": "200vp"
+    },
+    {
+      "name": "nav_bar_width_lg",
+      "value": "224vp"
+    },
+    {
+      "name": "follow_water_flow_padding_sm",
+      "value": "12vp"
+    },
+    {
+      "name": "follow_water_flow_padding_md",
+      "value": "12vp"
+    },
+    {
+      "name": "follow_water_flow_padding_lg",
+      "value": "12vp"
+    },
+    {
+      "name": "follow_water_flow_column_gap",
+      "value": "16vp"
+    },
+    {
+      "name": "input_search_icon_width",
+      "value": "24vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/element/string.json b/MultiCommunityApplication/features/hot/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..9bb2580a874b20e96b9692f9b097a76b5ae2cd55
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/resources/base/element/string.json
@@ -0,0 +1,164 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "placeholder",
+      "value": "搜索或输入网址"
+    },
+    {
+      "name": "read_total_rank",
+      "value": "查看完整榜单"
+    },
+    {
+      "name": "follow",
+      "value": "关注"
+    },
+    {
+      "name": "found",
+      "value": "发现"
+    },
+    {
+      "name": "read_total",
+      "value": "查看全部"
+    },
+    {
+      "name": "more",
+      "value": "更多"
+    },
+    {
+      "name": "follow_list_name_1",
+      "value": "摄影视觉"
+    },
+    {
+      "name": "follow_list_date_1",
+      "value": "2小时前·发布了动态"
+    },
+    {
+      "name": "follow_list_type_1",
+      "value": "登山"
+    },
+    {
+      "name": "follow_list_subtype_1",
+      "value": "旅游"
+    },
+    {
+      "name": "follow_list_content_1",
+      "value": "在山顶，你会觉得山再巍峨，人也能把它征服，而此时的…"
+    },
+    {
+      "name": "follow_list_name_2",
+      "value": "大自然的风采"
+    },
+    {
+      "name": "follow_list_date_2",
+      "value": "11小时前·发布了动态"
+    },
+    {
+      "name": "follow_list_name_3",
+      "value": "山水"
+    },
+    {
+      "name": "follow_list_date_3",
+      "value": "3小时前·发布了动态"
+    },
+    {
+      "name": "follow_list_name_4",
+      "value": "最科技评测"
+    },
+    {
+      "name": "follow_list_date_4",
+      "value": "刚刚"
+    },
+    {
+      "name": "follow_list_name_5",
+      "value": "故宫画家"
+    },
+    {
+      "name": "follow_list_name_6",
+      "value": "国学展览"
+    },
+    {
+      "name": "follow_list_date_6",
+      "value": "8小时前·发布了动态"
+    },
+    {
+      "name": "follow_list_name_7",
+      "value": "自然社区"
+    },
+    {
+      "name": "follow_list_name_8",
+      "value": "摄影视效"
+    },
+    {
+      "name": "follow_list_date_8",
+      "value": "13小时前·发布了动态"
+    },
+    {
+      "name": "follow_list_name_9",
+      "value": "国学探究"
+    },
+    {
+      "name": "follow_detail_name_1",
+      "value": "全部关注"
+    },
+    {
+      "name": "follow_detail_name_2",
+      "value": "大自然的风采"
+    },
+    {
+      "name": "follow_detail_name_3",
+      "value": "科技评测"
+    },
+    {
+      "name": "follow_detail_name_4",
+      "value": "风景画家"
+    },
+    {
+      "name": "follow_detail_name_5",
+      "value": "自然社区"
+    },
+    {
+      "name": "follow_detail_name_6",
+      "value": "自然社区"
+    },
+    {
+      "name": "follow_detail_content_1",
+      "value": "摄影/10粉丝"
+    },
+    {
+      "name": "follow_detail_content_2",
+      "value": "摄影/5万粉丝"
+    },
+    {
+      "name": "follow_detail_content_3",
+      "value": "20万粉丝"
+    },
+    {
+      "name": "follow_detail_content_4",
+      "value": "快速评测"
+    },
+    {
+      "name": "follow_detail_content_5",
+      "value": "爱山爱水"
+    },
+    {
+      "name": "follow_detail_content_6",
+      "value": "国学认证"
+    },
+    {
+      "name": "follow_detail_content_7",
+      "value": "3万粉丝"
+    },
+    {
+      "name": "follow_detail_content_8",
+      "value": "2小时前发布了..."
+    },
+    {
+      "name": "follow_title_content",
+      "value": "的动态"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon1.png b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon1.png
new file mode 100644
index 0000000000000000000000000000000000000000..006b2fa91c334557ad4a90aa65afb1fcaa127306
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon1.png differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon2.png b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon2.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4efeec7ddba67910883e49a950c1a846427beac
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon2.png differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon3.png b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon3.png
new file mode 100644
index 0000000000000000000000000000000000000000..63599462403ba1f3fb9ce9033e6680a028f33507
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon3.png differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon4.png b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon4.png
new file mode 100644
index 0000000000000000000000000000000000000000..5321e3c6beead31281bd91650a920d8a6c89e04c
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon4.png differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon5.png b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon5.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcf191932c50953adf7f5e5dd71557eff629e9a7
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon5.png differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon6.png b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon6.png
new file mode 100644
index 0000000000000000000000000000000000000000..63599462403ba1f3fb9ce9033e6680a028f33507
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_icon6.png differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture1.jpg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..74411d1bac3185911fe47b1c2b1acb9303954ca4
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture1.jpg differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture2.png b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture2.png
new file mode 100644
index 0000000000000000000000000000000000000000..c64698d492e15313489dad66010e92fb8a75d60c
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture2.png differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture3.jpg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3fb7f979741586252fbe1a45e92a938ecc308b43
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture3.jpg differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture4.jpg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1719f1ea2684666404a98728af9b13d5498227ef
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture4.jpg differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture5.jpg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture5.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ca6a84d44c94b528634da7fd1de6f3fb12306688
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture5.jpg differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture6.jpg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture6.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..93b3910bd6a7a550236334c9b0070869fe9bc9d8
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture6.jpg differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture7.jpg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture7.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c16f3b4fa683f030614820a470ddc5aff2a2078e
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture7.jpg differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture8.jpg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture8.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b3455711215adc0725076b1affa17876fe5cec95
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture8.jpg differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture9.jpg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture9.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4e19fc1a1ef1d9d2a5d06334327447de81dcd15f
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_follow_picture9.jpg differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_more.svg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_more.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a97f0741d12d38898004449222e9bb8ff6027007
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_more.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>tuiJIanreSou/more</title>
+    <defs>
+        <path d="M0.146446609,0.853553391 C-0.0488155365,0.658291245 -0.0488155365,0.341708755 0.146446609,0.146446609 C0.341708755,-0.0488155365 0.658291245,-0.0488155365 0.853553391,0.146446609 L7.52022006,6.81311328 C7.7154822,7.00837542 7.7154822,7.32495791 7.52022006,7.52022006 L0.853553391,14.1868867 C0.658291245,14.3821489 0.341708755,14.3821489 0.146446609,14.1868867 C-0.0488155365,13.9916246 -0.0488155365,13.6750421 0.146446609,13.4797799 L6.45955989,7.16666667 L0.146446609,0.853553391 Z" id="path-1"></path>
+    </defs>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" transform="translate(5.1667, 0.8333)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="Path-33" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_mountain.PNG b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_mountain.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..c83d778426430a0fcaf0f2fb8906f50e7dd69979
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_mountain.PNG differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_point_more.png b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_point_more.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e8bfa04f42150689a320327cfc1232a926921a4
Binary files /dev/null and b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_point_more.png differ
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_arrow_right_filled.svg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_arrow_right_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3b0e8d0a30145b2b62a9b5e00cb03dd48561be8f
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_arrow_right_filled.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 12 24" version="1.1">
+    <title>Public/ic_public_arrow_right_filled</title>
+    <defs>
+        <path d="M4.45710678,18.363961 C4.27486211,18.5462057 4.03977569,18.6434029 3.80116649,18.6555525 L3.75,18.6568542 C3.49407768,18.6568542 3.23815536,18.5592232 3.04289322,18.363961 C2.664203,17.9852708 2.65272754,17.3784226 3.00846683,16.9859046 L3.04289322,16.9497475 L7.4623106,12.5303301 C7.74474335,12.2478973 7.75483023,11.7962506 7.49257125,11.5017311 L7.4623106,11.4696699 L3.04289322,7.05025253 C2.65236893,6.65972824 2.65236893,6.02656326 3.04289322,5.63603897 C3.23876747,5.44016472 3.49568281,5.3425346 3.75240679,5.34314575 L3.80373089,5.34458136 C4.02596704,5.35646617 4.24499331,5.44214324 4.42094964,5.60161259 L4.45710678,5.63603897 L9.23007755,10.4090097 C10.0930665,11.2719987 10.108477,12.6616054 9.2763091,13.5434021 L9.23007755,13.5909903 L4.45710678,18.363961 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_arrow_right_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_路径" fill="#66000000" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_cancel.svg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_cancel.svg
new file mode 100644
index 0000000000000000000000000000000000000000..36565c84256be091beb9bd8d8494c5e073defc3f
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_cancel.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_cancel</title>
+    <defs>
+        <path d="M19.7781746,4.22182541 C20.0710678,4.51471863 20.0710678,4.98959236 19.7781746,5.28248558 L5.28248558,19.7781746 C4.98959236,20.0710678 4.51471863,20.0710678 4.22182541,19.7781746 C3.92893219,19.4852814 3.92893219,19.0104076 4.22182541,18.7175144 L10.9395166,11.9994697 L4.22182541,5.28248558 C3.92893219,4.98959236 3.92893219,4.51471863 4.22182541,4.22182541 C4.51471863,3.92893219 4.98959236,3.92893219 5.28248558,4.22182541 L12,10.9389863 L18.7175144,4.22182541 C19.0104076,3.92893219 19.4852814,3.92893219 19.7781746,4.22182541 Z M19.7781746,18.7175144 C20.0710678,19.0104076 20.0710678,19.4852814 19.7781746,19.7781746 C19.4852814,20.0710678 19.0104076,20.0710678 18.7175144,19.7781746 L12.7072836,13.7675902 L13.767767,12.7071068 L19.7781746,18.7175144 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_cancel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_input_search.svg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_input_search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dd6bfc7a1a21d1e10e7b4b7b28bb3795531ea717
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_input_search.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_input_search</title>
+    <defs>
+        <path d="M13.2129889,12.2463949 L15.6099466,14.6430364 C15.9028398,14.9359296 15.9028398,15.4108033 15.6099466,15.7036966 C15.3170533,15.9965898 14.8421796,15.9965898 14.5492864,15.7036966 L12.1424668,13.2968868 C12.5355197,12.9856781 12.8945263,12.6333482 13.2129889,12.2463949 Z M7.78125,1.5 C11.2502886,1.5 14.0625,4.31221142 14.0625,7.78125 C14.0625,9.23090694 13.571411,10.5658639 12.7465202,11.6288338 L12.5852288,11.8281795 C12.5065389,11.9214937 12.4251798,12.0124834 12.3412691,12.1010309 L12.2391385,12.2063305 L12.2391385,12.2063305 L12.1042686,12.3381988 L12.1042686,12.3381988 L12.0040285,12.4312816 L12.0040285,12.4312816 L11.7500714,12.6500283 L11.7500714,12.6500283 L11.6103411,12.7608162 L11.6103411,12.7608162 C10.5503999,13.5770819 9.22251268,14.0625 7.78125,14.0625 C4.31221142,14.0625 1.5,11.2502886 1.5,7.78125 C1.5,4.31221142 4.31221142,1.5 7.78125,1.5 Z M7.78125,3 C5.14063854,3 3,5.14063854 3,7.78125 C3,10.4218615 5.14063854,12.5625 7.78125,12.5625 C10.4218615,12.5625 12.5625,10.4218615 12.5625,7.78125 C12.5625,5.14063854 10.4218615,3 7.78125,3 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_input_search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状" fill-rule="nonzero"></g>
+        <g id="Symbol/color-light/colorPrimary" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <rect id="color/#000000" x="0" y="0" width="18" height="18"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_search.svg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b6bbd0ae6ccf41763b59a952ca744d1f86009cef
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_search.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title> ic_s/ic S_search 2</title>
+    <defs>
+        <path d="M11.636908,11.0133746 L14.1406731,13.5168996 C14.1894886,13.5657152 14.1894886,13.6448608 14.1406731,13.6936763 L13.610343,14.2240064 C13.5615275,14.272822 13.4823819,14.272822 13.4335663,14.2240064 L10.9226595,11.7142106 C11.1789865,11.499945 11.4178817,11.2655206 11.636908,11.0133746 Z M6.91666667,1.33333333 C10.0002565,1.33333333 12.5,3.83307681 12.5,6.91666667 C12.5,8.4145102 11.9101859,9.77459528 10.9501423,10.7773374 L11.1647045,10.5400601 C11.0886922,10.629091 11.0099301,10.7157033 10.9285497,10.7997656 C10.8572312,10.8734134 10.784495,10.9445544 10.7098668,11.0136815 C10.7025036,11.0205016 10.6952162,11.0272158 10.6879109,11.0339108 C9.69464643,11.9442971 8.37055223,12.5 6.91666667,12.5 C3.83307681,12.5 1.33333333,10.0002565 1.33333333,6.91666667 C1.33333333,3.83307681 3.83307681,1.33333333 6.91666667,1.33333333 Z M6.91666667,2.33333333 C4.38536156,2.33333333 2.33333333,4.38536156 2.33333333,6.91666667 C2.33333333,9.44797177 4.38536156,11.5 6.91666667,11.5 C9.44797177,11.5 11.5,9.44797177 11.5,6.91666667 C11.5,4.38536156 9.44797177,2.33333333 6.91666667,2.33333333 Z" id="path-1"></path>
+    </defs>
+    <g id="1016备份" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-28.000000, -50.000000)">
+            <g id="编组" transform="translate(28.000000, 50.000000)">
+                <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                <g id="-ic_s/ic-S_search">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="形状结合" fill-rule="nonzero"></g>
+                    <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.6">
+                        <g id="Symbol/color-light/colorPrimary">
+                            <rect id="color/#000000" x="0" y="0" width="16" height="16"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_spinner_small.svg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_spinner_small.svg
new file mode 100644
index 0000000000000000000000000000000000000000..be7bb496fee083abbc4a8a3e9305f94891b6738d
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_spinner_small.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="16px" viewBox="0 0 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_spinner_small</title>
+    <defs>
+        <path d="M2.66675891,5.91666667 L7.33326257,5.91666667 C7.65546776,5.91666667 7.91666667,6.18319218 7.91666667,6.51196805 C7.91666667,6.64714403 7.87158076,6.77829518 7.78882463,6.88384988 L5.4555728,9.85989185 C5.25429282,10.1166227 4.88716107,10.158247 4.63556109,9.95286231 C4.60191927,9.92540001 4.57136214,9.89421973 4.54444868,9.85989185 L2.21119685,6.88384988 C2.00991687,6.62711905 2.05070928,6.25250043 2.30230926,6.04711577 C2.40575442,5.96267201 2.53428447,5.91666667 2.66675891,5.91666667 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_spinner_small" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="矩形备份-2"></g>
+        <g id="Symbol/color-light/colorPrimary" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <rect id="color/#000000" x="0" y="0" width="10" height="20"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_voice.svg b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_voice.svg
new file mode 100644
index 0000000000000000000000000000000000000000..418dded8bd9a67419f3f07bafef42f539bdd51fd
--- /dev/null
+++ b/MultiCommunityApplication/features/hot/src/main/resources/base/media/ic_public_voice.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_voice</title>
+    <defs>
+        <path d="M18.75,10.5 C19.1642136,10.5 19.5,10.8357864 19.5,11.25 C19.5,15.1388445 16.5402456,18.3364013 12.750487,18.7129202 L12.75,21.25 C12.75,21.6642136 12.4142136,22 12,22 C11.6005798,22 11.2740848,21.68777 11.2512732,21.2940682 L11.25,21.25 L11.2505192,18.7130201 C7.46027831,18.3369673 4.5,15.1391887 4.5,11.25 C4.5,10.8357864 4.83578644,10.5 5.25,10.5 C5.66421356,10.5 6,10.8357864 6,11.25 C6,14.5637085 8.6862915,17.25 12,17.25 C15.3137085,17.25 18,14.5637085 18,11.25 C18,10.8357864 18.3357864,10.5 18.75,10.5 Z M12,2 C14.209139,2 16,3.790861 16,6 L16,11.25 C16,13.459139 14.209139,15.25 12,15.25 C9.790861,15.25 8,13.459139 8,11.25 L8,6 C8,3.790861 9.790861,2 12,2 Z M12,3.5 C10.6192881,3.5 9.5,4.61928813 9.5,6 L9.5,11.25 C9.5,12.6307119 10.6192881,13.75 12,13.75 C13.3807119,13.75 14.5,12.6307119 14.5,11.25 L14.5,6 C14.5,4.61928813 13.3807119,3.5 12,3.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_voice" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="Symbol/color-light/colorPrimary" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <rect id="color/#000000" x="0" y="0" width="24" height="24"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/picture/Index.ets b/MultiCommunityApplication/features/picture/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..22841c49eccbd332c7aaa7fa82a796ad92747c25
--- /dev/null
+++ b/MultiCommunityApplication/features/picture/Index.ets
@@ -0,0 +1 @@
+export { PictureDetail } from './src/main/ets/view/PictureDetail';
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/picture/build-profile.json5 b/MultiCommunityApplication/features/picture/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiCommunityApplication/features/picture/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/picture/hvigorfile.ts b/MultiCommunityApplication/features/picture/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiCommunityApplication/features/picture/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiCommunityApplication/features/picture/obfuscation-rules.txt b/MultiCommunityApplication/features/picture/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a1dfa0bd175984dc49e641436aa67b1de1b8abeb
--- /dev/null
+++ b/MultiCommunityApplication/features/picture/obfuscation-rules.txt
@@ -0,0 +1,22 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/picture/oh-package.json5 b/MultiCommunityApplication/features/picture/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..9ef2eecc9260dbd57405aede998a7a73d98e8a64
--- /dev/null
+++ b/MultiCommunityApplication/features/picture/oh-package.json5
@@ -0,0 +1,14 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "picture",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "base": "file:../../commons/base",
+    "detail": "file:../detail"
+  }
+}
diff --git a/MultiCommunityApplication/features/picture/src/main/ets/view/DetailVerticalView.ets b/MultiCommunityApplication/features/picture/src/main/ets/view/DetailVerticalView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..82277051c21fae62ad1f46ba27ad3df217321cc4
--- /dev/null
+++ b/MultiCommunityApplication/features/picture/src/main/ets/view/DetailVerticalView.ets
@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { CommonConstants as BaseCommon, BreakpointConstants as Breakpoint } from 'base'
+import { MircoBlogView, CommentListView, CommentBarView, CardArrayViewModel, CardArray } from 'detail';
+
+@Component
+export struct DetailVertical {
+  @StorageLink('cardArrayViewModel') cardArrayViewModel: CardArray = CardArrayViewModel.getInstance();
+  @StorageProp('selectCardIndex') selectCardIndex: number = 0;
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM;
+
+  build() {
+    Column() {
+      Scroll() {
+        Column() {
+          MircoBlogView({
+            cardItem: this.cardArrayViewModel.cardArray[this.selectCardIndex],
+            index: this.selectCardIndex,
+            showPicture: false,
+            isDarkMode: true
+          })
+            .padding({
+              left: $r('app.float.picture_content_padding'),
+              right: $r('app.float.picture_content_padding')
+            })
+            .margin({
+              top: $r('app.float.detail_padding_top_md')
+            })
+
+          CommentListView({
+            focusHide: true,
+            commentPadding: $r('app.float.picture_content_padding'),
+            isDarkMode: true
+          })
+            .margin({
+              top: $r('app.float.picture_comment_list_mt')
+            })
+        }
+      }
+      .scrollBar(BarState.Off)
+      .layoutWeight(1)
+
+      CommentBarView({
+        isDarkMode: true
+      })
+    }
+    .height(BaseCommon.FULL_PERCENT)
+    .padding({
+      top: this.getPaddingTop()
+    })
+    .backgroundColor($r('app.color.picture_background_color'))
+  }
+
+  getPaddingTop(): Resource {
+    if (this.currentBreakpoint === Breakpoint.BREAKPOINT_LG && deviceInfo.deviceType !== BaseCommon.DEVICE_2IN1) {
+      return $r('app.float.detail_padding_top_md');
+    }
+    return $r('app.float.zero');
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/picture/src/main/ets/view/PictureDetail.ets b/MultiCommunityApplication/features/picture/src/main/ets/view/PictureDetail.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4c4a14e057400eb0c0007f8c9ca0265cb1585346
--- /dev/null
+++ b/MultiCommunityApplication/features/picture/src/main/ets/view/PictureDetail.ets
@@ -0,0 +1,193 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base/';
+import { CardArrayViewModel, CardArray, CommentInputView } from 'detail/';
+import { DetailVertical } from './DetailVerticalView';
+
+const KEY_BACKGROUND: string = 'background';
+
+@Component
+export struct PictureDetail {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM;
+  @StorageLink('cardArrayViewModel') cardArrayViewModel: CardArray = CardArrayViewModel.getInstance();
+  @StorageLink('selectCardIndex') selectCardIndex: number = 0;
+  @StorageLink('isDetailPage') isDetailPage: boolean = false;
+  @StorageLink('isShowInput') isShowInput: boolean = false;
+  @StorageLink('isPictureDetail') isPictureDetail: boolean = true;
+  @StorageLink('pageInfos') pageInfos: NavPathStack = new NavPathStack();
+  @State picList: Resource[] = [];
+  index: number = 0;
+
+  aboutToAppear() {
+    this.isPictureDetail = true;
+    CardArrayViewModel.cardArray[this.selectCardIndex].pictureArray.forEach((item: Resource) => {
+      this.picList.push(item);
+    })
+  }
+
+  aboutToDisappear(): void {
+    this.isPictureDetail = false;
+  }
+
+  build() {
+    Stack() {
+      Row() {
+        GridRow({
+          columns: {
+            sm: Breakpoint.GRID_ROW_COLUMNS[2],
+            md: Breakpoint.GRID_ROW_COLUMNS[3],
+            lg: Breakpoint.GRID_ROW_COLUMNS[0]
+          }
+        }) {
+          GridCol({
+            span: {
+              sm: Breakpoint.GRID_COLUMN_SPANS[5],
+              md: Breakpoint.GRID_COLUMN_SPANS[4],
+              lg: Breakpoint.GRID_COLUMN_SPANS[0]
+            }
+          }) {
+            Stack() {
+              Swiper() {
+                ForEach(this.picList, (item: Resource, index: number) => {
+                  Stack() {
+                    Image(item)
+                      .width(BaseCommon.FULL_PERCENT)
+                      .height(BaseCommon.FULL_PERCENT)
+                      .objectFit(ImageFit.Contain)
+
+                    if (this.isDetailPage && index === this.picList.length - 1) {
+                      Row() {
+                        Button($r('app.string.above'))
+                          .width($r('app.float.above_button_width'))
+                          .height($r('app.float.button_height'))
+                          .visibility(this.selectCardIndex === 0 ? Visibility.Hidden : Visibility.Visible)
+                          .onClick(() => {
+                            AppStorage.setOrCreate('selectCardIndex', this.selectCardIndex - 1);
+                            this.pageInfos.replacePath({ name: 'pictureDetail', param: 0 });
+                          })
+
+                        Button($r('app.string.next'))
+                          .width($r('app.float.above_button_width'))
+                          .height($r('app.float.button_height'))
+                          .visibility(this.selectCardIndex === CardArrayViewModel.cardArray.length - 1 ?
+                          Visibility.Hidden : Visibility.Visible)
+                          .onClick(() => {
+                            AppStorage.setOrCreate('selectCardIndex', this.selectCardIndex + 1);
+                            this.pageInfos.replacePath({ name: 'pictureDetail', param: 0 });
+                          })
+                      }
+                      .width(BaseCommon.FULL_PERCENT)
+                      .padding({
+                        left: new BreakpointType($r('app.float.window_padding_left_sm'),
+                          $r('app.float.window_padding_left_md'), $r('app.float.window_padding_left_lg'))
+                          .getValue(this.currentBreakpoint),
+                        right: new BreakpointType($r('app.float.window_padding_left_sm'),
+                          $r('app.float.window_padding_left_md'), $r('app.float.window_padding_left_lg'))
+                          .getValue(this.currentBreakpoint)
+                      })
+                      .justifyContent(FlexAlign.SpaceBetween)
+                      .margin({ bottom: $r('app.float.button_line_margin_bottom') })
+                    }
+                  }
+                  .alignContent(Alignment.BottomStart)
+                }, (item: Resource, index: number) => index + JSON.stringify(item))
+              }
+              .autoPlay(false)
+              .indicator(
+                new DigitIndicator()
+                  .fontColor($r('app.color.white'))
+                  .digitFont({
+                    size: $r('app.float.swiper_digit_font_size'),
+                    weight: FontWeight.Normal
+                  })
+                  .selectedFontColor($r('app.color.white'))
+                  .bottom($r('app.float.swiper_digit_bottom'))
+              )
+              .loop(false)
+              .index(this.index)
+              .onClick(() => {
+                if (this.isDetailPage) {
+                  this.pageInfos.pop();
+                  this.pageInfos.replacePath({ name: 'detailPage' });
+                } else {
+                  this.pageInfos.pop();
+                }
+              })
+
+              Image($r('app.media.ic_public_back_white'))
+                .width($r('app.float.back_width'))
+                .aspectRatio(1)
+                .onClick(() => {
+                  if (this.isDetailPage) {
+                    this.pageInfos.pop();
+                    this.pageInfos.replacePath({ name: 'detailPage' });
+                  } else {
+                    this.pageInfos.pop();
+                  }
+                })
+                .margin({
+                  left: new BreakpointType<ResourceStr>($r('app.float.back_margin_left_sm'),
+                    $r('app.float.back_margin_left_md'), $r('app.float.back_margin_left_lg'))
+                    .getValue(this.currentBreakpoint),
+                  top: $r('app.float.back_margin_top')
+                })
+            }
+            .align(Alignment.TopStart)
+          }
+
+          GridCol({
+            span: {
+              sm: Breakpoint.GRID_COLUMN_SPANS[5],
+              md: Breakpoint.GRID_COLUMN_SPANS[6],
+              lg: Breakpoint.GRID_COLUMN_SPANS[0]
+            }
+          }) {
+            DetailVertical()
+          }
+          .visibility(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? Visibility.None : Visibility.Visible)
+        }
+        .layoutWeight(1)
+
+        DetailVertical()
+          .width($r('app.float.content_with'))
+          .visibility(this.currentBreakpoint !== Breakpoint.BREAKPOINT_LG ? Visibility.None : Visibility.Visible)
+      }
+      .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM])
+
+      if (this.isShowInput) {
+        Stack() {
+          Column()
+            .justifyContent(FlexAlign.End)
+            .width(BaseCommon.FULL_PERCENT)
+            .height(BaseCommon.FULL_PERCENT)
+            .backgroundColor(Color.Black)
+            .opacity($r('app.float.text_input_bgc_opacity'))
+            .id(KEY_BACKGROUND)
+            .onClick(() => {
+              AppStorage.setOrCreate('isShowInput', false);
+              focusControl.requestFocus(KEY_BACKGROUND);
+            })
+
+          CommentInputView()
+        }
+        .alignContent(Alignment.Bottom)
+      }
+    }
+    .height(BaseCommon.FULL_PERCENT)
+    .width(BaseCommon.FULL_PERCENT)
+    .backgroundColor(Color.Black)
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/picture/src/main/module.json5 b/MultiCommunityApplication/features/picture/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..6ad428a6f5f5d82f2948cf2d1264dd156a695fde
--- /dev/null
+++ b/MultiCommunityApplication/features/picture/src/main/module.json5
@@ -0,0 +1,12 @@
+{
+  "module": {
+    "name": "picture",
+    "type": "har",
+    "description": "$string:shared_desc",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/picture/src/main/resources/base/element/color.json b/MultiCommunityApplication/features/picture/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..de1446352e1091943f9ac8d893c89a6a9e980cac
--- /dev/null
+++ b/MultiCommunityApplication/features/picture/src/main/resources/base/element/color.json
@@ -0,0 +1,12 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "picture_background_color",
+      "value": "#D9202224"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/picture/src/main/resources/base/element/float.json b/MultiCommunityApplication/features/picture/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..d704278ea1c72c94abc2d6b32ecf01e448e2ba39
--- /dev/null
+++ b/MultiCommunityApplication/features/picture/src/main/resources/base/element/float.json
@@ -0,0 +1,84 @@
+{
+  "float": [
+    {
+      "name": "content_with",
+      "value": "480vp"
+    },
+    {
+      "name": "back_margin_top",
+      "value": "46vp"
+    },
+    {
+      "name": "back_margin_left_sm",
+      "value": "18vp"
+    },
+    {
+      "name": "back_margin_left_md",
+      "value": "26vp"
+    },
+    {
+      "name": "back_margin_left_lg",
+      "value": "34vp"
+    },
+    {
+      "name": "swiper_digit_font_size",
+      "value": "14fp"
+    },
+    {
+      "name": "swiper_digit_bottom",
+      "value": "44vp"
+    },
+    {
+      "name": "back_width",
+      "value": "24vp"
+    },
+    {
+      "name": "above_button_width",
+      "value": "72vp"
+    },
+    {
+      "name": "button_line_padding_left",
+      "value": "32vp"
+    },
+    {
+      "name": "button_line_margin_bottom",
+      "value": "44vp"
+    },
+    {
+      "name": "detail_padding_top_md",
+      "value": "24vp"
+    },
+    {
+      "name": "zero",
+      "value": "0vp"
+    },
+    {
+      "name": "button_height",
+      "value": "28vp"
+    },
+    {
+      "name": "window_padding_left_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "window_padding_left_md",
+      "value": "24vp"
+    },
+    {
+      "name": "window_padding_left_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "picture_content_padding",
+      "value": "16vp"
+    },
+    {
+      "name": "text_input_bgc_opacity",
+      "value": "0.4"
+    },
+    {
+      "name": "picture_comment_list_mt",
+      "value": "16vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/picture/src/main/resources/base/element/string.json b/MultiCommunityApplication/features/picture/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..6be1cdf92f2fb5bb1b38538b43e1944ccf787feb
--- /dev/null
+++ b/MultiCommunityApplication/features/picture/src/main/resources/base/element/string.json
@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "above",
+      "value": "上一篇"
+    },
+    {
+      "name": "next",
+      "value": "下一篇"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/picture/src/main/resources/base/media/ic_public_back_white.svg b/MultiCommunityApplication/features/picture/src/main/resources/base/media/ic_public_back_white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..41a22008b33bbd44d6d8b2d45ae16fc576ddaeee
--- /dev/null
+++ b/MultiCommunityApplication/features/picture/src/main/resources/base/media/ic_public_back_white.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_back</title>
+    <defs>
+        <path d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_back" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/rank/Index.ets b/MultiCommunityApplication/features/rank/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2ed50651eb0029513bded2c946c42e27b5c8a950
--- /dev/null
+++ b/MultiCommunityApplication/features/rank/Index.ets
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { HotListItemView } from './src/main/ets/view/HotListItemView';
+export { HotRankPage } from './src/main/ets/view/HotRankPage';
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/rank/build-profile.json5 b/MultiCommunityApplication/features/rank/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiCommunityApplication/features/rank/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/rank/hvigorfile.ts b/MultiCommunityApplication/features/rank/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiCommunityApplication/features/rank/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiCommunityApplication/features/rank/obfuscation-rules.txt b/MultiCommunityApplication/features/rank/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a1dfa0bd175984dc49e641436aa67b1de1b8abeb
--- /dev/null
+++ b/MultiCommunityApplication/features/rank/obfuscation-rules.txt
@@ -0,0 +1,22 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/rank/oh-package.json5 b/MultiCommunityApplication/features/rank/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..2e8e982446596886849e3f2aba1e8e2fb3a54b5d
--- /dev/null
+++ b/MultiCommunityApplication/features/rank/oh-package.json5
@@ -0,0 +1,13 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "rank",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "base": "file:../../commons/base"
+  }
+}
diff --git a/MultiCommunityApplication/features/rank/src/main/ets/constants/CommonConstants.ets b/MultiCommunityApplication/features/rank/src/main/ets/constants/CommonConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4304fcd1fde685edafe092d66225e35783fd8609
--- /dev/null
+++ b/MultiCommunityApplication/features/rank/src/main/ets/constants/CommonConstants.ets
@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class CommonConstants {
+  /**
+   * Linear gradient angle.
+   */
+  static readonly LINEAR_GRADIENT_ANGLE: number = 180;
+
+  /**
+   * Linear gradient from.
+   */
+  static readonly LINEAR_GRADIENT_FROM: number = 0.01;
+
+  /**
+   * Linear gradient to.
+   */
+  static readonly LINEAR_GRADIENT_TO: number = 0.92;
+
+  /**
+   * Linear gradient from color.
+   */
+  static readonly LINEAR_GRADIENT_FROM_COLOR: string = '#80307AF8';
+
+  /**
+   * Linear gradient to color.
+   */
+  static readonly LINEAR_GRADIENT_TO_COLOR: string = '#000A59F7';
+
+  /**
+   * Subtitle opacity.
+   */
+  static readonly SUBTITLE_OPACITY: number = 0.6;
+
+  /**
+   * Swiper item space.
+   */
+  static readonly SWIPER_ITEM_SPACE: string = '20vp';
+
+  /**
+   * Title content space.
+   */
+  static readonly TITLE_CONTENT_SPACE: string = '4vp';
+
+  /**
+   * Top count.
+   */
+  static readonly TOP_COUNT: number = 3;
+
+  /**
+   * Window padding half sm.
+   */
+  static readonly WINDOW_PADDING_HALF_SM = '8vp';
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/rank/src/main/ets/view/HotListItemView.ets b/MultiCommunityApplication/features/rank/src/main/ets/view/HotListItemView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..33ca2dd30455d96d64da5380a4f660de85a169f0
--- /dev/null
+++ b/MultiCommunityApplication/features/rank/src/main/ets/view/HotListItemView.ets
@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HotItemInterface, HOST_LIST_ARRAY, CommonConstants as BaseCommon } from 'base';
+import { CommonConstants as Common } from '../constants/CommonConstants';
+
+@Component
+export struct HotListItemView {
+  item: HotItemInterface = HOST_LIST_ARRAY[0][0];
+  showDetail: boolean = false;
+  indexWidth: ResourceStr = $r('app.float.index_width_normal');
+  indexIconGap: ResourceStr = $r('app.float.index_icon_gap_normal');
+
+  build() {
+    Row() {
+      Row() {
+        Text(`${this.item.index}`)
+          .fontSize($r('app.float.index_font_size'))
+          .fontWeight(BaseCommon.FONT_WEIGHT_500)
+          .fontColor(this.isTopThree() ? $r('app.color.top_three_color') : $r('app.color.normal_index_color'))
+          .textAlign(TextAlign.End)
+          .width(this.indexWidth)
+
+        Row() {
+          if (this.isShowDetail()) {
+            Image(this.item.icon)
+              .width($r('app.float.list_item_icon_width'))
+              .aspectRatio(1)
+              .borderRadius($r('app.float.item_icon_br'))
+          }
+
+          Column({ space: Common.TITLE_CONTENT_SPACE }) {
+            Row() {
+              Text(this.item.title)
+                .fontSize($r('app.float.rank_item_font_size'))
+                .fontWeight(FontWeight.Normal)
+                .maxLines(1)
+                .textOverflow({ overflow: TextOverflow.Ellipsis })
+
+              Image(this.item.stateIcon)
+                .height($r('app.float.state_icon_height'))
+                .aspectRatio(1)
+                .margin({ left: $r('app.float.state_icon_margin_left') })
+            }
+            .justifyContent(FlexAlign.Start)
+
+            Text(this.item.content)
+              .fontSize($r('app.float.content_font_size'))
+              .fontWeight(FontWeight.Normal)
+              .fontColor($r('app.color.content_color'))
+              .visibility(this.isShowDetail() ? Visibility.Visible : Visibility.None)
+              .maxLines(1)
+              .textOverflow({ overflow: TextOverflow.Ellipsis })
+          }
+          .alignItems(HorizontalAlign.Start)
+          .margin({
+            left: this.isShowDetail() ? Common.WINDOW_PADDING_HALF_SM : $r('app.float.zero')
+          })
+          .layoutWeight(1)
+        }
+        .layoutWeight(1)
+        .margin({ left: this.indexIconGap })
+        .justifyContent(FlexAlign.Start)
+
+        Row() {
+          Text(`${this.item.clickCount}`)
+            .fontSize($r('app.float.click_count_font_size'))
+            .fontWeight(FontWeight.Normal)
+            .textAlign(TextAlign.End)
+            .fontColor($r('app.color.click_count_color'))
+
+          Image(this.item.upDownIcon)
+            .width($r('app.float.up_down_icon_width'))
+            .aspectRatio(1)
+        }
+        .height(BaseCommon.FULL_PERCENT)
+        .borderRadius($r('app.float.rank_list_rd'))
+        .margin({
+          right: $r('app.float.icon_name_margin_left')
+        })
+      }
+      .height(BaseCommon.FULL_PERCENT)
+      .width(BaseCommon.FULL_PERCENT)
+    }
+    .width(BaseCommon.FULL_PERCENT)
+    .height((this.isShowDetail()) ? $r('app.float.top_three_height') : $r('app.float.normal_item_height'))
+  }
+
+  isShowDetail(): boolean {
+    return this.showDetail || this.isTopThree();
+  }
+
+  isTopThree(): boolean {
+    return this.item.index <= Common.TOP_COUNT;
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/rank/src/main/ets/view/HotListView.ets b/MultiCommunityApplication/features/rank/src/main/ets/view/HotListView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..37ff8042150abfce97be6cc70963c5d33f8614a6
--- /dev/null
+++ b/MultiCommunityApplication/features/rank/src/main/ets/view/HotListView.ets
@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HOST_LIST_ARRAY, CommonConstants as BaseCommon, HotItemInterface } from 'base';
+import { HotListItemView } from './HotListItemView';
+
+@Component
+export struct HotListView {
+  index: number = 0;
+  groupTitle: ResourceStr = '';
+
+  @Builder
+  itemHeader() {
+    Row() {
+      Text(this.groupTitle)
+        .fontSize($r('app.float.group_item_title_font_size'))
+        .fontWeight(BaseCommon.FONT_WEIGHT_700)
+        .fontColor($r('app.color.group_item_title_font_color'))
+        .margin({ left: $r('app.float.group_item_title_ml') })
+    }
+    .height($r('app.float.group_item_title_height'))
+    .margin({ top: $r('app.float.group_item_title_mt') })
+    .justifyContent(FlexAlign.Start)
+  }
+
+  build() {
+    Row() {
+      List() {
+        ListItemGroup({ header: this.itemHeader() }) {
+          ForEach(HOST_LIST_ARRAY[this.index], (item: HotItemInterface) => {
+            ListItem() {
+              HotListItemView({
+                item: item,
+                indexWidth: $r('app.float.index_width_more')
+              })
+            }
+          }, (item: HotItemInterface) => JSON.stringify(item))
+        }
+      }
+      .scrollBar(BarState.Off)
+      .nestedScroll({
+        scrollForward: NestedScrollMode.PARENT_FIRST,
+        scrollBackward: NestedScrollMode.SELF_FIRST
+      })
+      .edgeEffect(EdgeEffect.None)
+      .padding({
+        left: $r('app.float.hot_list_pl')
+      })
+    }
+    .borderRadius($r('app.float.rank_list_rd'))
+    .backgroundColor($r('app.color.white'))
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/rank/src/main/ets/view/HotRankPage.ets b/MultiCommunityApplication/features/rank/src/main/ets/view/HotRankPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ae8f4f668b83eefffbbe8672ea5e34cbe3c283e1
--- /dev/null
+++ b/MultiCommunityApplication/features/rank/src/main/ets/view/HotRankPage.ets
@@ -0,0 +1,160 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base';
+import { HotListView } from './HotListView';
+import { CommonConstants as Common } from '../constants/CommonConstants'
+
+const MAX_MARGIN_TOP: number = 52;
+const MIN_MARGIN_TOP: number = 46;
+
+@Component
+export struct HotRankPage {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM;
+  @StorageLink('pageInfos') pageInfos: NavPathStack = new NavPathStack();
+  @State titleMarginTop: number = MAX_MARGIN_TOP;
+  @State index: number = 0;
+
+  build() {
+    Column() {
+      Stack() {
+        Row()
+          .linearGradient({
+            angle: Common.LINEAR_GRADIENT_ANGLE,
+            colors: [
+              [Common.LINEAR_GRADIENT_FROM_COLOR, Common.LINEAR_GRADIENT_FROM],
+              [Common.LINEAR_GRADIENT_TO_COLOR, Common.LINEAR_GRADIENT_TO]
+            ]
+          })
+          .width(BaseCommon.FULL_PERCENT)
+          .height($r('app.float.background_height'))
+
+        Column() {
+          Column() {
+            Text($r('app.string.rank_title'))
+              .fontSize(this.titleMarginTop === MIN_MARGIN_TOP ?
+              $r('app.float.title_normal_fs') : $r('app.float.title_max_fs'))
+              .fontWeight(BaseCommon.FONT_WEIGHT_700)
+              .fontColor($r('app.color.title_font_color'))
+            Text($r('app.string.ran_sub_title'))
+              .fontSize($r('app.float.sub_title_fs'))
+              .fontWeight(FontWeight.Normal)
+              .fontColor($r('app.color.title_font_color'))
+              .opacity(Common.SUBTITLE_OPACITY)
+              .visibility(this.titleMarginTop === MIN_MARGIN_TOP ? Visibility.None : Visibility.Visible)
+          }
+          .margin({
+            top: `${this.titleMarginTop}vp`
+          })
+          .width(BaseCommon.FULL_PERCENT)
+
+          Scroll() {
+            Swiper() {
+              ForEach(BaseCommon.RANK_TITLE_LIST, (item: ResourceStr, index: number) => {
+                HotListView({
+                  groupTitle: item,
+                  index: index
+                })
+                  .margin({
+                    top: this.titleMarginTop === MIN_MARGIN_TOP ?
+                      $r('app.float.hot_list_view_min_mt') : $r('app.float.hot_list_view_max_mt')
+                  })
+                  .width(this.currentBreakpoint === Breakpoint.BREAKPOINT_SM ?
+                    BaseCommon.FULL_PERCENT : $r('app.float.zero'))
+                  .padding({
+                    left: new BreakpointType($r('app.float.window_padding_left_sm'),
+                      $r('app.float.window_padding_left_md'), $r('app.float.window_padding_left_lg')
+                    ).getValue(this.currentBreakpoint)
+                  })
+              }, (item: string) => JSON.stringify(item))
+            }
+            .displayCount(this.getDisplayCount())
+            .indicator(false)
+            .loop(true)
+            .nextMargin(new BreakpointType($r('app.float.swiper_next_margin_sm'), $r('app.float.swiper_next_margin_md'),
+              $r('app.float.swiper_next_margin_lg')).getValue(this.currentBreakpoint))
+            .height(BaseCommon.FULL_PERCENT)
+            .width(BaseCommon.FULL_PERCENT)
+            .onChange((index: number) => {
+              this.index = index;
+            })
+          }
+          .scrollBar(BarState.Off)
+          .onScrollFrameBegin((offset: number, state: ScrollState) => {
+            return { offsetRemain: this.calcMarginTop(offset) };
+          })
+          .layoutWeight(1)
+        }
+
+        Row() {
+          Image($r('app.media.ic_public_back'))
+            .width($r('app.float.back_icon_width'))
+            .aspectRatio(1)
+            .onClick(() => {
+              this.pageInfos.pop();
+            })
+
+          Image($r('app.media.ic_public_more'))
+            .width($r('app.float.more_icon_width'))
+            .aspectRatio(1)
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .padding({
+          top: $r('app.float.tool_line_pt'),
+          left: new BreakpointType($r('app.float.window_padding_left_sm'), $r('app.float.window_padding_left_md'),
+            $r('app.float.window_padding_left_lg')).getValue(this.currentBreakpoint),
+          right: new BreakpointType($r('app.float.window_padding_left_sm'), $r('app.float.window_padding_left_md'),
+            $r('app.float.window_padding_left_lg')).getValue(this.currentBreakpoint)
+        })
+        .width(BaseCommon.FULL_PERCENT)
+      }
+      .height(BaseCommon.FULL_PERCENT)
+      .width(BaseCommon.FULL_PERCENT)
+      .alignContent(Alignment.Top)
+      .backgroundColor($r('app.color.background_color'))
+    }
+    .height(BaseCommon.FULL_PERCENT)
+    .width(BaseCommon.FULL_PERCENT)
+  }
+
+  getDisplayCount() {
+    if (this.currentBreakpoint === Breakpoint.BREAKPOINT_SM) {
+      return 1;
+    } else if (this.currentBreakpoint === Breakpoint.BREAKPOINT_MD) {
+      return 2;
+    } else {
+      return 3;
+    }
+  }
+
+  calcMarginTop(offset: number): number {
+    let realOffset: number = offset;
+    if (offset > 0 && this.titleMarginTop > MIN_MARGIN_TOP) {
+      let tmpOffset = this.titleMarginTop - offset;
+      let marginOffset: number = tmpOffset > MIN_MARGIN_TOP ? offset : this.titleMarginTop - MIN_MARGIN_TOP;
+      this.titleMarginTop -= marginOffset;
+      return 0;
+    }
+
+    if (offset < 0 && this.titleMarginTop < MAX_MARGIN_TOP) {
+      let tmpOffset = this.titleMarginTop + Math.abs(offset);
+      let marginOffset = tmpOffset > MAX_MARGIN_TOP ? MAX_MARGIN_TOP - this.titleMarginTop : Math.abs(offset);
+      this.titleMarginTop += marginOffset;
+      return 0;
+    }
+
+    return realOffset;
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/rank/src/main/module.json5 b/MultiCommunityApplication/features/rank/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..ddda4a1dd93f4b633e7a342b9bd5d3a1e6a4c8eb
--- /dev/null
+++ b/MultiCommunityApplication/features/rank/src/main/module.json5
@@ -0,0 +1,12 @@
+{
+  "module": {
+    "name": "rank",
+    "type": "har",
+    "description": "$string:shared_desc",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/rank/src/main/resources/base/element/color.json b/MultiCommunityApplication/features/rank/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..7d4e6ac3fabe85f04a795be3dc7a374038332acf
--- /dev/null
+++ b/MultiCommunityApplication/features/rank/src/main/resources/base/element/color.json
@@ -0,0 +1,36 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "title_font_color",
+      "value": "#E6000000"
+    },
+    {
+      "name": "background_color",
+      "value": "#F2F2F2"
+    },
+    {
+      "name": "top_three_color",
+      "value": "#FD2704"
+    },
+    {
+      "name": "normal_index_color",
+      "value": "#66000000"
+    },
+    {
+      "name": "content_color",
+      "value": "#66000000"
+    },
+    {
+      "name": "click_count_color",
+      "value": "#66000000"
+    },
+    {
+      "name": "group_item_title_font_color",
+      "value": "#444444"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/rank/src/main/resources/base/element/float.json b/MultiCommunityApplication/features/rank/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..f92763f0646fad63c477892747d9c01ab939636a
--- /dev/null
+++ b/MultiCommunityApplication/features/rank/src/main/resources/base/element/float.json
@@ -0,0 +1,176 @@
+{
+  "float": [
+    {
+      "name": "background_height",
+      "value": "160vp"
+    },
+    {
+      "name": "title_max_fs",
+      "value": "32fp"
+    },
+    {
+      "name": "title_normal_fs",
+      "value": "24fp"
+    },
+    {
+      "name": "sub_title_fs",
+      "value": "12fp"
+    },
+    {
+      "name": "zero",
+      "value": "0vp"
+    },
+    {
+      "name": "hot_list_view_min_mt",
+      "value": "8vp"
+    },
+    {
+      "name": "hot_list_view_max_mt",
+      "value": "20vp"
+    },
+    {
+      "name": "swiper_next_margin_sm",
+      "value": "56vp"
+    },
+    {
+      "name": "swiper_next_margin_md",
+      "value": "64vp"
+    },
+    {
+      "name": "swiper_next_margin_lg",
+      "value": "72vp"
+    },
+    {
+      "name": "hot_rank_scroll_pl",
+      "value": "16vp"
+    },
+    {
+      "name": "back_icon_width",
+      "value": "24vp"
+    },
+    {
+      "name": "more_icon_width",
+      "value": "24vp"
+    },
+    {
+      "name": "tool_line_pt",
+      "value": "46vp"
+    },
+    {
+      "name": "tool_line_pl",
+      "value": "16vp"
+    },
+    {
+      "name": "index_font_size",
+      "value": "14fp"
+    },
+    {
+      "name": "index_width",
+      "value": "19vp"
+    },
+    {
+      "name": "list_item_icon_width",
+      "value": "48vp"
+    },
+    {
+      "name": "state_icon_margin_left",
+      "value": "4vp"
+    },
+    {
+      "name": "rank_item_font_size",
+      "value": "14fp"
+    },
+    {
+      "name": "state_icon_height",
+      "value": "16vp"
+    },
+    {
+      "name": "content_font_size",
+      "value": "12fp"
+    },
+    {
+      "name": "item_title_margin_left",
+      "value": "8vp"
+    },
+    {
+      "name": "item_icon_margin_left",
+      "value": "8vp"
+    },
+    {
+      "name": "click_count_font_size",
+      "value": "12fp"
+    },
+    {
+      "name": "up_down_icon_width",
+      "value": "16vp"
+    },
+    {
+      "name": "top_three_height",
+      "value": "72vp"
+    },
+    {
+      "name": "normal_item_height",
+      "value": "44vp"
+    },
+    {
+      "name": "group_item_title_font_size",
+      "value": "16fp"
+    },
+    {
+      "name": "group_item_title_ml",
+      "value": "7vp"
+    },
+    {
+      "name": "group_item_title_height",
+      "value": "28vp"
+    },
+    {
+      "name": "group_item_title_mt",
+      "value": "12vp"
+    },
+    {
+      "name": "rank_list_rd",
+      "value": "10vp"
+    },
+    {
+      "name": "item_icon_br",
+      "value": "10vp"
+    },
+    {
+      "name": "up_down_icon_mr",
+      "value": "10vp"
+    },
+    {
+      "name": "index_width_normal",
+      "value": "9vp"
+    },
+    {
+      "name": "index_width_more",
+      "value": "17vp"
+    },
+    {
+      "name": "index_icon_gap_normal",
+      "value": "4vp"
+    },
+    {
+      "name": "window_padding_left_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "window_padding_left_md",
+      "value": "24vp"
+    },
+    {
+      "name": "window_padding_left_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "icon_name_margin_left",
+      "value": "8vp"
+    },
+    {
+      "name": "hot_list_pl",
+      "value": "9vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/rank/src/main/resources/base/element/string.json b/MultiCommunityApplication/features/rank/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..782e6e38554e118cba7777c2527d162a24528b29
--- /dev/null
+++ b/MultiCommunityApplication/features/rank/src/main/resources/base/element/string.json
@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "rank_title",
+      "value": "热搜榜单"
+    },
+    {
+      "name": "ran_sub_title",
+      "value": "最新最热大事件都在这"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/features/rank/src/main/resources/base/media/ic_public_more.svg b/MultiCommunityApplication/features/rank/src/main/resources/base/media/ic_public_more.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1a635b80d5cacfebb7c57718ef7811ba2debe556
--- /dev/null
+++ b/MultiCommunityApplication/features/rank/src/main/resources/base/media/ic_public_more.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>public_ic_more_24x24</title>
+    <defs>
+        <path d="M1.5,3 C2.32842712,3 3,2.32842712 3,1.5 C3,0.671572875 2.32842712,0 1.5,0 C0.671572875,0 0,0.671572875 0,1.5 C0,2.32842712 0.671572875,3 1.5,3 Z M1.5,11.5 C2.32842712,11.5 3,10.8284271 3,10 C3,9.17157288 2.32842712,8.5 1.5,8.5 C0.671572875,8.5 0,9.17157288 0,10 C0,10.8284271 0.671572875,11.5 1.5,11.5 Z M1.5,20 C2.32842712,20 3,19.3284271 3,18.5 C3,17.6715729 2.32842712,17 1.5,17 C0.671572875,17 0,17.6715729 0,18.5 C0,19.3284271 0.671572875,20 1.5,20 Z" id="path-1"></path>
+    </defs>
+    <g id="1016" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-24.000000, -310.000000)">
+            <g id="编组-10" transform="translate(24.000000, 310.000000)">
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+                <g id="public_ic_more_24x24">
+                    <g id="symbol/frame/symbol_grid24-copy"></g>
+                    <g id="more" transform="translate(10.500000, 2.000000)">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <use id="合并形状" fill="#000000" xlink:href="#path-1"></use>
+                        <rect id="color/#000000" fill="#000000" mask="url(#mask-2)" x="-10.5" y="-2" width="24" height="24"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/hvigor/hvigor-config.json5 b/MultiCommunityApplication/hvigor/hvigor-config.json5
new file mode 100644
index 0000000000000000000000000000000000000000..f70ecd4112d94f9aa555adf898d53f18bf58f3e9
--- /dev/null
+++ b/MultiCommunityApplication/hvigor/hvigor-config.json5
@@ -0,0 +1,5 @@
+{
+  "modelVersion": "5.0.0",
+  "dependencies": {
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/oh-package.json5 b/MultiCommunityApplication/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..67579502e26f99f3950665835c6e1cb22a188458
--- /dev/null
+++ b/MultiCommunityApplication/oh-package.json5
@@ -0,0 +1,14 @@
+{
+  "modelVersion": "5.0.0",
+  "license": "",
+  "devDependencies": {
+
+  },
+  "author": "",
+  "name": "multicommunityapplication",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {}
+}
diff --git a/MultiCommunityApplication/products/phone/build-profile.json5 b/MultiCommunityApplication/products/phone/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..da1e864745177ec7d3786ade0b6950aba4ebcc4f
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/build-profile.json5
@@ -0,0 +1,27 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/hvigorfile.ts b/MultiCommunityApplication/products/phone/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6edcd90486dd5a853cf7d34c8647f08414ca7a3
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { hapTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiCommunityApplication/products/phone/obfuscation-rules.txt b/MultiCommunityApplication/products/phone/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a1dfa0bd175984dc49e641436aa67b1de1b8abeb
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/obfuscation-rules.txt
@@ -0,0 +1,22 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/oh-package.json5 b/MultiCommunityApplication/products/phone/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..f487bc32b6e80d73804fc0bc373d2d232c521c70
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/oh-package.json5
@@ -0,0 +1,17 @@
+{
+  "license": "",
+  "devDependencies": {},
+  "author": "",
+  "name": "phone",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "hot": "file:../../features/hot",
+    "base": "file:../../commons/base",
+    "detail": "file:../../features/detail",
+    "rank": "file:../../features/rank",
+    "picture": "file:../../features/picture"
+  }
+}
diff --git a/MultiCommunityApplication/products/phone/src/main/ets/entryability/EntryAbility.ets b/MultiCommunityApplication/products/phone/src/main/ets/entryability/EntryAbility.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d7ad56a678171219b753afa3aa139376b9afdab2
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/ets/entryability/EntryAbility.ets
@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License,Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { UIAbility, Want, AbilityConstant } from '@kit.AbilityKit';
+import { BusinessError, deviceInfo } from '@kit.BasicServicesKit';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { window, display } from '@kit.ArkUI';
+import { CommonConstants as BaseCommon, BreakpointConstants } from 'base'
+
+export default class EntryAbility extends UIAbility {
+
+  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
+  }
+
+  onDestroy(): void {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
+  }
+
+  onWindowStageCreate(windowStage: window.WindowStage): void {
+    // Main window is created, set main page for this ability
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+
+    windowStage.getMainWindow((err: BusinessError<void>, data) => {
+      if (err.code) {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'getMainWindow failed');
+        return;
+      }
+      if (deviceInfo.deviceType !== BaseCommon.DEVICE_2IN1) {
+        data.setWindowLayoutFullScreen(true);
+      }
+      this.updateBreakpoint(data.getWindowProperties().windowRect.width);
+      data.on('windowSizeChange', (windowSize: window.Size) => {
+        this.updateBreakpoint(windowSize.width);
+      })
+    })
+
+    windowStage.loadContent('pages/MainPage', (err, data) => {
+      if (err.code) {
+        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+        return;
+      }
+      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
+    });
+  }
+
+  onWindowStageDestroy(): void {
+    // Main window is destroyed, release UI related resources
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+  }
+
+  onForeground(): void {
+    // Ability has brought to foreground
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
+  }
+
+  onBackground(): void {
+    // Ability has back to background
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
+  }
+
+  private updateBreakpoint(windowWidth: number) :void{
+    let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels;
+    let curBp: string = '';
+    if (windowWidthVp < BreakpointConstants.BREAKPOINT_RANGES[1]) {
+      curBp = BreakpointConstants.BREAKPOINT_SM;
+    } else if (windowWidthVp < BreakpointConstants.BREAKPOINT_RANGES[2]) {
+      curBp = BreakpointConstants.BREAKPOINT_MD;
+    } else {
+      curBp = BreakpointConstants.BREAKPOINT_LG;
+    }
+    AppStorage.setOrCreate('currentBreakpoint', curBp);
+  }
+}
diff --git a/MultiCommunityApplication/products/phone/src/main/ets/model/TabBarModel.ets b/MultiCommunityApplication/products/phone/src/main/ets/model/TabBarModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..30aad6d43c0e8300bf235367b6f5e0e9fd6ee3c4
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/ets/model/TabBarModel.ets
@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License,Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface BarItemInterface {
+  /**
+   * Name of the tab.
+   */
+  name: Resource;
+
+  /**
+   * Icon of the tab.
+   */
+  icon: Resource;
+
+  /**
+   * Icon selected.
+   */
+  iconSelected: Resource;
+}
+
+export const TabBarsInfo: BarItemInterface[] = [
+  {
+    name: $r('app.string.main'),
+    icon: $r('app.media.ic_main_off'),
+    iconSelected: $r('app.media.ic_main_on')
+  },
+  {
+    name: $r('app.string.hot'),
+    icon: $r('app.media.ic_hot_point_off'),
+    iconSelected: $r('app.media.ic_hot_point_on')
+  },
+  {
+    name: $r('app.string.message'),
+    icon: $r('app.media.ic_message_off'),
+    iconSelected: $r('app.media.ic_message_on')
+  },
+  {
+    name: $r('app.string.mine'),
+    icon: $r('app.media.ic_mine_off'),
+    iconSelected: $r('app.media.ic_mine_on')
+  }
+]
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/ets/pages/MainPage.ets b/MultiCommunityApplication/products/phone/src/main/ets/pages/MainPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e0427748ccb33e011a39511f423883d05891b538
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/ets/pages/MainPage.ets
@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants as Breakpoint, CommonConstants as Common } from 'base';
+import { DetailPage } from 'detail';
+import { HotRankPage } from 'rank';
+import { PictureDetail } from 'picture';
+import { TabContentView } from '../view/TabContentView';
+
+@Entry
+@Component
+struct Index {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_LG;
+  @StorageLink('pageInfos') pageInfos: NavPathStack = new NavPathStack();
+
+  aboutToAppear(): void {
+    this.pageInfos.pushPath({ name: 'mainPage' });
+  }
+
+  @Builder
+  pageMap(name: string, param: number) {
+    if ('rankPage' === name) {
+      NavDestination() {
+        HotRankPage()
+      }
+      .hideTitleBar(true)
+    } else if ('mainPage' === name) {
+      NavDestination() {
+        Column() {
+          TabContentView()
+        }
+        .width(Common.FULL_PERCENT)
+        .height(Common.FULL_PERCENT)
+      }
+      .hideTitleBar(true)
+    } else if ('detailPage' === name) {
+      NavDestination() {
+        DetailPage()
+      }
+      .onBackPressed(()=>{
+        AppStorage.setOrCreate('isDetailPage', false);
+        return false;
+      })
+      .hideTitleBar(true)
+    } else if ('pictureDetail' === name) {
+      NavDestination() {
+        PictureDetail({ index: param })
+      }
+      .hideTitleBar(true)
+    }
+  }
+
+  build() {
+    Navigation(this.pageInfos)
+      .hideNavBar(true)
+      .navDestination(this.pageMap)
+      .width(Common.FULL_PERCENT)
+      .height(Common.FULL_PERCENT)
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/ets/view/TabContentView.ets b/MultiCommunityApplication/products/phone/src/main/ets/view/TabContentView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..59febd64933f0b636557f624d2ee9f199d1dcd71
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/ets/view/TabContentView.ets
@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants as Breakpoint, CommonConstants as Common } from 'base';
+import { HotPointPage } from 'hot';
+import { BarItemInterface } from '../model/TabBarModel';
+import { TabBarViewModel } from '../viewmodel/TabBarViewModel';
+
+@Component
+export struct TabContentView {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_LG;
+  @State currentIndex: number = 1;
+  tabBarsInfo: TabBarViewModel = new TabBarViewModel();
+
+  @Builder
+  TabBarBuilder(item: BarItemInterface, index: number) {
+    Column() {
+      Image(index !== this.currentIndex ? item.icon : item.iconSelected)
+        .width($r('app.float.icon_tab_width'))
+        .aspectRatio(1)
+      Text(item.name)
+        .fontSize($r('app.float.tab_font_size'))
+        .fontWeight(Common.FONT_WEIGHT_500)
+        .fontColor(index === this.currentIndex ? $r('app.color.tab_select_color') : $r('app.color.tab_normal_color'))
+    }
+    .height(Common.FULL_PERCENT)
+    .justifyContent(FlexAlign.Center)
+  }
+
+  @Builder
+  DefaultTabBuilder(name: Resource) {
+    Column() {
+      Text(name)
+        .fontSize($r('app.float.default_tab_font_size'))
+        .fontWeight(Common.FONT_WEIGHT_700)
+    }
+    .justifyContent(FlexAlign.Center)
+    .width(Common.FULL_PERCENT)
+    .height(Common.FULL_PERCENT)
+    .backgroundColor(Color.White)
+  }
+
+  build() {
+    Column() {
+      Tabs({
+        barPosition: this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? BarPosition.Start : BarPosition.End,
+        index: this.currentIndex
+      }) {
+        TabContent() {
+          this.DefaultTabBuilder($r('app.string.main'))
+        }
+        .tabBar(this.TabBarBuilder(this.tabBarsInfo.getTabList()[0], 0))
+
+        TabContent() {
+          HotPointPage()
+        }
+        .tabBar(this.TabBarBuilder(this.tabBarsInfo.getTabList()[1], 1))
+
+        TabContent() {
+          this.DefaultTabBuilder($r('app.string.message'))
+        }
+        .tabBar(this.TabBarBuilder(this.tabBarsInfo.getTabList()[2], 2))
+
+        TabContent() {
+          this.DefaultTabBuilder($r('app.string.mine'))
+        }
+        .tabBar(this.TabBarBuilder(this.tabBarsInfo.getTabList()[3], 3))
+      }
+      .vertical(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG)
+      .onChange((index: number) => {
+        this.currentIndex = index;
+      })
+      .barHeight(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? Common.HALF_PERCENT : $r('app.float.bar_height'))
+      .barWidth(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ?
+        $r('app.float.tab_bar_width') : Common.FULL_PERCENT)
+      .scrollable(false)
+      .height(Common.FULL_PERCENT)
+    }
+    .backgroundColor($r('app.color.bar_background_color'))
+    .padding({ bottom: this.currentBreakpoint !== Breakpoint.BREAKPOINT_LG ?
+      $r('app.float.tab_content_pb') : $r('app.float.zero') })
+    .height(Common.FULL_PERCENT)
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/ets/viewmodel/TabBarViewModel.ets b/MultiCommunityApplication/products/phone/src/main/ets/viewmodel/TabBarViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..bcde0514f5b727974f1d4676b55d913a78a172a0
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/ets/viewmodel/TabBarViewModel.ets
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BarItemInterface, TabBarsInfo } from '../model/TabBarModel';
+
+export class TabBarViewModel {
+  private tabList: BarItemInterface[] = TabBarsInfo;
+
+  getTabList(): BarItemInterface[] {
+    return this.tabList;
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/module.json5 b/MultiCommunityApplication/products/phone/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..fd31b21d26f919a0f0883acb1059dd197b790f36
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/module.json5
@@ -0,0 +1,42 @@
+{
+  "module": {
+    "name": "phone",
+    "type": "entry",
+    "description": "$string:module_desc",
+    "mainElement": "EntryAbility",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ],
+    "deliveryWithInstall": true,
+    "installationFree": false,
+    "pages": "$profile:main_pages",
+    "abilities": [
+      {
+        "name": "EntryAbility",
+        "srcEntry": "./ets/entryability/EntryAbility.ets",
+        "description": "$string:EntryAbility_desc",
+        "icon": "$media:layered_image",
+        "label": "$string:EntryAbility_label",
+        "startWindowIcon": "$media:startIcon",
+        "startWindowBackground": "$color:start_window_background",
+        "minWindowWidth": 340,
+        "minWindowHeight": 600,
+        "maxWindowWidth": 1280,
+        "maxWindowHeight": 800,
+        "exported": true,
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/element/color.json b/MultiCommunityApplication/products/phone/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..b6eae545270a26ec79506e84385541eec105398c
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/base/element/color.json
@@ -0,0 +1,20 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "tab_normal_color",
+      "value": "#7F7F7F"
+    },
+    {
+      "name": "tab_select_color",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "bar_background_color",
+      "value": "#F1F3F5"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/element/float.json b/MultiCommunityApplication/products/phone/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..24eedaffc85e3bc0a29dcfc8418b5c3c299ecbf5
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/base/element/float.json
@@ -0,0 +1,130 @@
+{
+  "float": [
+    {
+      "name": "icon_tab_width",
+      "value": "24vp"
+    },
+    {
+      "name": "tab_font_size",
+      "value": "12fp"
+    },
+
+    {
+      "name": "page_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "small_text_size",
+      "value": "12fp"
+    },
+    {
+      "name": "normal_text_size",
+      "value": "14fp"
+    },
+    {
+      "name": "splash_normal_text_size",
+      "value": "16fp"
+    },
+    {
+      "name": "title_text_size",
+      "value": "20fp"
+    },
+    {
+      "name": "splash_title_text_size",
+      "value": "24fp"
+    },
+    {
+      "name": "tool_bar_height",
+      "value": "56vp"
+    },
+    {
+      "name": "tool_bar_margin",
+      "value": "-56vp"
+    },
+
+    {
+      "name": "tab_border_width",
+      "value": "0.5vp"
+    },
+    {
+      "name": "tab_img_size",
+      "value": "22vp"
+    },
+    {
+      "name": "tab_big_img_width",
+      "value": "32vp"
+    },
+    {
+      "name": "tab_big_img_height",
+      "value": "37vp"
+    },
+    {
+      "name": "tab_margin",
+      "value": "-15vp"
+    },
+    {
+      "name": "tab_title_margin",
+      "value": "5vp"
+    },
+    {
+      "name": "splash_swiper_indicator",
+      "value": "5vp"
+    },
+    {
+      "name": "button_weight",
+      "value": "500vp"
+    },
+    {
+      "name": "button_opacity",
+      "value": "0.8vp"
+    },
+    {
+      "name": "button_width",
+      "value": "312vp"
+    },
+    {
+      "name": "button_height",
+      "value": "40vp"
+    },
+    {
+      "name": "button_borderRadius",
+      "value": "20vp"
+    },
+    {
+      "name": "button_margin",
+      "value": "650vp"
+    },
+    {
+      "name": "image_width",
+      "value": "300vp"
+    },
+    {
+      "name": "text_opacity",
+      "value": "0.7vp"
+    },
+    {
+      "name": "test_margin",
+      "value": "5vp"
+    },
+    {
+      "name": "tab_bar_width",
+      "value": "96vp"
+    },
+    {
+      "name": "default_tab_font_size",
+      "value": "30fp"
+    },
+    {
+      "name": "zero",
+      "value": "0vp"
+    },
+    {
+      "name": "tab_content_pb",
+      "value": "28vp"
+    },
+    {
+      "name": "bar_height",
+      "value": "54vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/element/string.json b/MultiCommunityApplication/products/phone/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..7bb4d2ed68950530c1d00c347bad3351d31c7d8e
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/base/element/string.json
@@ -0,0 +1,32 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "entry ability description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "MultiCommunityApplication"
+    },
+    {
+      "name": "hot",
+      "value": "Hot"
+    },
+    {
+      "name": "main",
+      "value": "Main"
+    },
+    {
+      "name": "message",
+      "value": "Message"
+    },
+    {
+      "name": "mine",
+      "value": "Mine"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/media/background.png b/MultiCommunityApplication/products/phone/src/main/resources/base/media/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..923f2b3f27e915d6871871deea0420eb45ce102f
Binary files /dev/null and b/MultiCommunityApplication/products/phone/src/main/resources/base/media/background.png differ
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/media/foreground.png b/MultiCommunityApplication/products/phone/src/main/resources/base/media/foreground.png
new file mode 100644
index 0000000000000000000000000000000000000000..97014d3e10e5ff511409c378cd4255713aecd85f
Binary files /dev/null and b/MultiCommunityApplication/products/phone/src/main/resources/base/media/foreground.png differ
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_hot_point_off.svg b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_hot_point_off.svg
new file mode 100644
index 0000000000000000000000000000000000000000..70b6098142b04e49ef3bcfd92952af60acf0c16b
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_hot_point_off.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>phone_diBuTab_cell_2</title>
+    <defs>
+        <path d="M11.4810746,0.654624925 L13.798014,6.94466805 L13.798014,6.94466805 L20.0861167,6.94466805 C20.6384014,6.94466805 21.0861167,7.3923833 21.0861167,7.94466805 C21.0861167,8.25858446 20.9387091,8.55428237 20.6880269,8.74323185 L15.5711217,12.6000524 L15.5711217,12.6000524 L17.4971864,18.7008132 C17.663458,19.2274746 17.3713045,19.7892078 16.8446432,19.9554795 C16.5486583,20.0489245 16.2260619,19.9996323 15.9714876,19.8220628 L10.5632895,16.0497599 L10.5632895,16.0497599 L5.3943241,19.8988009 C4.95136019,20.2286515 4.32487024,20.136955 3.99501965,19.6939911 C3.80742975,19.4420723 3.74909939,19.1166547 3.83750974,18.8152636 L5.65573761,12.6169189 L5.65573761,12.6169189 L0.406905689,8.74975276 C-0.0377303193,8.42215962 -0.132612312,7.79614421 0.194980826,7.3515082 C0.383462208,7.09568597 0.68230738,6.94466805 1.00006554,6.94466805 L7.29045846,6.94466805 L7.29045846,6.94466805 L9.60419769,0.655026011 C9.7948717,0.136699986 10.3696298,-0.128914454 10.8879558,0.0617595537 C11.1629793,0.16293108 11.3797856,0.379644679 11.4810746,0.654624925 Z" id="path-1"></path>
+    </defs>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="phone_diBuTab/cell/2">
+            <g id="symbol/frame/symbol_grid24"></g>
+            <g id="star" transform="translate(1.457028, 1.491072)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="Stroke-161-Copy-2" fill-rule="nonzero"></g>
+                <g id="color/light/#000000" mask="url(#mask-2)" fill="#7F7F7F">
+                    <g transform="translate(-1.457028, -1.491072)" id="color/#000000">
+                        <rect x="0" y="0" width="24" height="24"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_hot_point_on.svg b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_hot_point_on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0d59ea15d1b1ac3a295a9e5c6efd4a8ebc47d905
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_hot_point_on.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>phone_diBuTab_cell_2</title>
+    <defs>
+        <path d="M11.4810746,0.654624925 L13.798014,6.94466805 L13.798014,6.94466805 L20.0861167,6.94466805 C20.6384014,6.94466805 21.0861167,7.3923833 21.0861167,7.94466805 C21.0861167,8.25858446 20.9387091,8.55428237 20.6880269,8.74323185 L15.5711217,12.6000524 L15.5711217,12.6000524 L17.4971864,18.7008132 C17.663458,19.2274746 17.3713045,19.7892078 16.8446432,19.9554795 C16.5486583,20.0489245 16.2260619,19.9996323 15.9714876,19.8220628 L10.5632895,16.0497599 L10.5632895,16.0497599 L5.3943241,19.8988009 C4.95136019,20.2286515 4.32487024,20.136955 3.99501965,19.6939911 C3.80742975,19.4420723 3.74909939,19.1166547 3.83750974,18.8152636 L5.65573761,12.6169189 L5.65573761,12.6169189 L0.406905689,8.74975276 C-0.0377303193,8.42215962 -0.132612312,7.79614421 0.194980826,7.3515082 C0.383462208,7.09568597 0.68230738,6.94466805 1.00006554,6.94466805 L7.29045846,6.94466805 L7.29045846,6.94466805 L9.60419769,0.655026011 C9.7948717,0.136699986 10.3696298,-0.128914454 10.8879558,0.0617595537 C11.1629793,0.16293108 11.3797856,0.379644679 11.4810746,0.654624925 Z" id="path-1"></path>
+    </defs>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="phone_diBuTab/cell/2">
+            <g id="symbol/frame/symbol_grid24"></g>
+            <g id="star" transform="translate(1.457028, 1.491072)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="Stroke-161-Copy-2" fill-rule="nonzero"></g>
+                <g id="color/light/#000000" mask="url(#mask-2)" fill="#0A59F7">
+                    <g transform="translate(-1.457028, -1.491072)" id="color/#000000">
+                        <rect x="0" y="0" width="24" height="24"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_main_off.svg b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_main_off.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0f1e0d70425df7b22c694cb3560cd8d199b61342
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_main_off.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>phone_diBuTab_cell_5</title>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="phone_diBuTab/cell/5">
+            <g id="symbol/frame/symbol_grid24"></g>
+            <g id="ic_public_home_filled" transform="translate(1.000000, 2.000000)" fill="#7F7F7F" fill-rule="nonzero">
+                <path d="M11.3049516,3.1660135 L11.4029772,3.24242055 L11.4383705,3.27479678 L19.7500539,11.1988369 L19.7500539,17.8648386 C19.7500539,19.4625195 18.5011339,20.7684995 16.9263267,20.8597459 L16.7500539,20.8648386 L4.75005386,20.8648386 C3.15237298,20.8648386 1.84639298,19.6159186 1.75514655,18.0411114 L1.75005386,17.8648386 L1.75005386,11.1988369 L10.0618497,3.27479678 C10.4076545,2.94672556 10.9310357,2.91207619 11.3049516,3.1660135 Z M10.7500539,12.1148386 C9.15237296,12.1148386 7.84639298,13.3637586 7.75514655,14.9385658 L7.75005386,15.1148386 L7.75005386,18.8648386 L13.7500539,18.8648386 L13.7500539,15.1148386 C13.7500539,13.4579844 12.4069081,12.1148386 10.7500539,12.1148386 Z M8.14899189,0.961019896 C9.69547866,-0.364524784 12.0094899,-0.318816354 13.5030439,1.09814521 L13.5030439,1.09814521 L21.1882626,8.38925013 L21.2682366,8.47439656 C21.5892803,8.85860163 21.5784305,9.43093043 21.2254659,9.80297423 C20.8453502,10.2036368 20.2124043,10.2202932 19.8117418,9.84017753 L19.8117418,9.84017753 L12.1265231,2.54907261 L12.0133993,2.4494676 C11.240637,1.81863589 10.1084048,1.85183755 9.37348126,2.54907261 L9.37348126,2.54907261 L1.6882626,9.84017753 L1.59902777,9.91556253 C1.19846918,10.2159545 0.627503079,10.175018 0.274538469,9.80297423 C-0.105577271,9.40231173 -0.0889208005,8.76936583 0.311741739,8.38925013 L0.311741739,8.38925013 L7.99696044,1.09814521 L8.14899189,0.961019896 Z" id="path-1"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_main_on.svg b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_main_on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..236a1d933bca4152d7277fe10a9dc2888f89e7c8
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_main_on.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>phone_diBuTab_cell_5</title>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="phone_diBuTab/cell/5">
+            <g id="symbol/frame/symbol_grid24"></g>
+            <g id="ic_public_home_filled" transform="translate(1.000000, 2.000000)" fill="#0A59F7" fill-rule="nonzero">
+                <path d="M11.3049516,3.1660135 L11.4029772,3.24242055 L11.4383705,3.27479678 L19.7500539,11.1988369 L19.7500539,17.8648386 C19.7500539,19.4625195 18.5011339,20.7684995 16.9263267,20.8597459 L16.7500539,20.8648386 L4.75005386,20.8648386 C3.15237298,20.8648386 1.84639298,19.6159186 1.75514655,18.0411114 L1.75005386,17.8648386 L1.75005386,11.1988369 L10.0618497,3.27479678 C10.4076545,2.94672556 10.9310357,2.91207619 11.3049516,3.1660135 Z M10.7500539,12.1148386 C9.15237296,12.1148386 7.84639298,13.3637586 7.75514655,14.9385658 L7.75005386,15.1148386 L7.75005386,18.8648386 L13.7500539,18.8648386 L13.7500539,15.1148386 C13.7500539,13.4579844 12.4069081,12.1148386 10.7500539,12.1148386 Z M8.14899189,0.961019896 C9.69547866,-0.364524784 12.0094899,-0.318816354 13.5030439,1.09814521 L13.5030439,1.09814521 L21.1882626,8.38925013 L21.2682366,8.47439656 C21.5892803,8.85860163 21.5784305,9.43093043 21.2254659,9.80297423 C20.8453502,10.2036368 20.2124043,10.2202932 19.8117418,9.84017753 L19.8117418,9.84017753 L12.1265231,2.54907261 L12.0133993,2.4494676 C11.240637,1.81863589 10.1084048,1.85183755 9.37348126,2.54907261 L9.37348126,2.54907261 L1.6882626,9.84017753 L1.59902777,9.91556253 C1.19846918,10.2159545 0.627503079,10.175018 0.274538469,9.80297423 C-0.105577271,9.40231173 -0.0889208005,8.76936583 0.311741739,8.38925013 L0.311741739,8.38925013 L7.99696044,1.09814521 L8.14899189,0.961019896 Z" id="path-1"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_message_off.svg b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_message_off.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d9482c7bf6ef148f265ce46529e87b90b4565e58
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_message_off.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>phone_diBuTab_cell_3</title>
+    <defs>
+        <path d="M14,-4.4408921e-16 C18.1421356,-1.20498718e-15 21.5,3.35786438 21.5,7.5 C21.5,11.6421356 18.1421356,15 14,15 L12.992,15 L8.70109876,19.1694991 C7.98879599,19.8615105 6.85018745,19.2054723 7.01634813,18.2886077 L7.0414094,18.18172 L7.0555986,18.1360222 C7.34525694,17.2670472 7.569429,16.5305351 7.7278248,15.9289706 L7.7841394,15.7097144 L7.82408556,15.5448805 C7.86092949,15.3905291 7.91218799,15.1714148 7.95008134,14.9994258 L7.5,15 C3.35786438,15 5.07265313e-16,11.6421356 0,7.5 C-5.07265313e-16,3.35786438 3.35786438,3.1680876e-16 7.5,-4.4408921e-16 L14,-4.4408921e-16 Z" id="path-1"></path>
+    </defs>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="phone_diBuTab/cell/3">
+            <g id="symbol/frame/symbol_grid24-copy"></g>
+            <g id="Public/ic_public_message_filled" transform="translate(1.250000, 2.500000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="形状结合" fill-rule="nonzero"></g>
+                <g id="Symbol/color-light/colorPrimary" mask="url(#mask-2)" fill="#7F7F7F" fill-opacity="0.9">
+                    <g transform="translate(-1.250000, -2.500000)" id="color/#000000">
+                        <rect x="0" y="0" width="24" height="24"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_message_on.svg b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_message_on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b5ae07e41056acc1e24b7035700fa135b4678ccb
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_message_on.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>phone_diBuTab_cell_3</title>
+    <defs>
+        <path d="M14,-4.4408921e-16 C18.1421356,-1.20498718e-15 21.5,3.35786438 21.5,7.5 C21.5,11.6421356 18.1421356,15 14,15 L12.992,15 L8.70109876,19.1694991 C7.98879599,19.8615105 6.85018745,19.2054723 7.01634813,18.2886077 L7.0414094,18.18172 L7.0555986,18.1360222 C7.34525694,17.2670472 7.569429,16.5305351 7.7278248,15.9289706 L7.7841394,15.7097144 L7.82408556,15.5448805 C7.86092949,15.3905291 7.91218799,15.1714148 7.95008134,14.9994258 L7.5,15 C3.35786438,15 5.07265313e-16,11.6421356 0,7.5 C-5.07265313e-16,3.35786438 3.35786438,3.1680876e-16 7.5,-4.4408921e-16 L14,-4.4408921e-16 Z" id="path-1"></path>
+    </defs>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="phone_diBuTab/cell/3">
+            <g id="symbol/frame/symbol_grid24-copy"></g>
+            <g id="Public/ic_public_message_filled" transform="translate(1.250000, 2.500000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="形状结合" fill-rule="nonzero"></g>
+                <g id="Symbol/color-light/colorPrimary" mask="url(#mask-2)" fill="#0A59F7" fill-opacity="0.9">
+                    <g transform="translate(-1.250000, -2.500000)" id="color/#000000">
+                        <rect x="0" y="0" width="24" height="24"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_mine_off.svg b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_mine_off.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ef6e4e1b7f59a7f47954afa704290d906a24bf1e
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_mine_off.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>phone_diBuTab_cell_4</title>
+    <defs>
+        <path d="M14,5.00519211 C14,7.76951093 11.7615167,10.0103842 9.00014606,10.0103842 C6.23848333,10.0103842 4,7.76951093 4,5.00519211 C4,2.24087328 6.23848333,0 9.00014606,0 C11.7615167,0 14,2.24087328 14,5.00519211 Z M0,19.3333333 L0,16 C-3.38176876e-16,13.2385763 2.23857625,11 5,11 L13,11 C15.7614237,11 18,13.2385763 18,16 L18,19.3333333 C18,20.2538079 17.2538079,21 16.3333333,21 L1.66666667,21 C0.746192084,21 9.30271286e-16,20.2538079 0,19.3333333 Z" id="path-1"></path>
+    </defs>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="phone_diBuTab/cell/4">
+            <g id="symbol/frame/symbol_grid24"></g>
+            <g id="Group" transform="translate(3.000000, 1.500000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <use id="合并形状" fill="#000000" xlink:href="#path-1"></use>
+                <rect id="color/#000000" fill="#7F7F7F" mask="url(#mask-2)" x="-3" y="-1.5" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_mine_on.svg b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_mine_on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1e7cd0b75ae0c14a5d3e2a507063d1472fa2f53b
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/base/media/ic_mine_on.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>phone_diBuTab_cell_4</title>
+    <defs>
+        <path d="M14,5.00519211 C14,7.76951093 11.7615167,10.0103842 9.00014606,10.0103842 C6.23848333,10.0103842 4,7.76951093 4,5.00519211 C4,2.24087328 6.23848333,0 9.00014606,0 C11.7615167,0 14,2.24087328 14,5.00519211 Z M0,19.3333333 L0,16 C-3.38176876e-16,13.2385763 2.23857625,11 5,11 L13,11 C15.7614237,11 18,13.2385763 18,16 L18,19.3333333 C18,20.2538079 17.2538079,21 16.3333333,21 L1.66666667,21 C0.746192084,21 9.30271286e-16,20.2538079 0,19.3333333 Z" id="path-1"></path>
+    </defs>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="phone_diBuTab/cell/4">
+            <g id="symbol/frame/symbol_grid24"></g>
+            <g id="Group" transform="translate(3.000000, 1.500000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <use id="合并形状" fill="#000000" xlink:href="#path-1"></use>
+                <rect id="color/#000000" fill="#0A59F7" mask="url(#mask-2)" x="-3" y="-1.5" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/media/icon.png b/MultiCommunityApplication/products/phone/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd45accb1dfd2fd0da16c732c72faa6e46b26521
Binary files /dev/null and b/MultiCommunityApplication/products/phone/src/main/resources/base/media/icon.png differ
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/media/layered_image.json b/MultiCommunityApplication/products/phone/src/main/resources/base/media/layered_image.json
new file mode 100644
index 0000000000000000000000000000000000000000..fb49920440fb4d246c82f9ada275e26123a2136a
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/base/media/layered_image.json
@@ -0,0 +1,7 @@
+{
+  "layered-image":
+  {
+    "background" : "$media:background",
+    "foreground" : "$media:foreground"
+  }
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/media/startIcon.png b/MultiCommunityApplication/products/phone/src/main/resources/base/media/startIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b
Binary files /dev/null and b/MultiCommunityApplication/products/phone/src/main/resources/base/media/startIcon.png differ
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/base/profile/main_pages.json b/MultiCommunityApplication/products/phone/src/main/resources/base/profile/main_pages.json
new file mode 100644
index 0000000000000000000000000000000000000000..f4241ef2f72e78047b4c449d92bd1a92accc39fb
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/base/profile/main_pages.json
@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/MainPage"
+  ]
+}
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/en_US/element/string.json b/MultiCommunityApplication/products/phone/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..7bb4d2ed68950530c1d00c347bad3351d31c7d8e
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/en_US/element/string.json
@@ -0,0 +1,32 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "entry ability description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "MultiCommunityApplication"
+    },
+    {
+      "name": "hot",
+      "value": "Hot"
+    },
+    {
+      "name": "main",
+      "value": "Main"
+    },
+    {
+      "name": "message",
+      "value": "Message"
+    },
+    {
+      "name": "mine",
+      "value": "Mine"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/products/phone/src/main/resources/zh_CN/element/string.json b/MultiCommunityApplication/products/phone/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..586f543b073a91a31122cac00a08c02b25ebd382
--- /dev/null
+++ b/MultiCommunityApplication/products/phone/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,32 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "模块描述"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "entry ability description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "一多开发实例-社区评论"
+    },
+    {
+      "name": "hot",
+      "value": "热点"
+    },
+    {
+      "name": "main",
+      "value": "首页"
+    },
+    {
+      "name": "message",
+      "value": "消息"
+    },
+    {
+      "name": "mine",
+      "value": "我的"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiCommunityApplication/screenshots/device/foldable.en.png b/MultiCommunityApplication/screenshots/device/foldable.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..f8821edb46a1adc8bf9180e00feed2e9f428eaaf
Binary files /dev/null and b/MultiCommunityApplication/screenshots/device/foldable.en.png differ
diff --git a/MultiCommunityApplication/screenshots/device/foldable.png b/MultiCommunityApplication/screenshots/device/foldable.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c39bdfc05d2a828a710a6ee3e8851a86aa3d631
Binary files /dev/null and b/MultiCommunityApplication/screenshots/device/foldable.png differ
diff --git a/MultiCommunityApplication/screenshots/device/pad.en.png b/MultiCommunityApplication/screenshots/device/pad.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..4344d9f87a228805af4325602c59b07684903781
Binary files /dev/null and b/MultiCommunityApplication/screenshots/device/pad.en.png differ
diff --git a/MultiCommunityApplication/screenshots/device/pad.png b/MultiCommunityApplication/screenshots/device/pad.png
new file mode 100644
index 0000000000000000000000000000000000000000..b56984c00f6664c9cf44821a8535553dc31439d8
Binary files /dev/null and b/MultiCommunityApplication/screenshots/device/pad.png differ
diff --git a/MultiCommunityApplication/screenshots/device/phone.en.png b/MultiCommunityApplication/screenshots/device/phone.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9b4b6e98e8ef2a29d3b452fde326b2e9d7809fe
Binary files /dev/null and b/MultiCommunityApplication/screenshots/device/phone.en.png differ
diff --git a/MultiCommunityApplication/screenshots/device/phone.png b/MultiCommunityApplication/screenshots/device/phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..856563dc0760f92188a244366729c9cb6310cc3a
Binary files /dev/null and b/MultiCommunityApplication/screenshots/device/phone.png differ
diff --git a/MultiDeviceCommunication/AppScope/app.json5 b/MultiDeviceCommunication/AppScope/app.json5
new file mode 100644
index 0000000000000000000000000000000000000000..868bf66ee98c0dc0ee4cdac832beb3188441970f
--- /dev/null
+++ b/MultiDeviceCommunication/AppScope/app.json5
@@ -0,0 +1,10 @@
+{
+  "app": {
+    "bundleName": "com.example.multdevicecommunication",
+    "vendor": "example",
+    "versionCode": 1000000,
+    "versionName": "1.0.0",
+    "icon": "$media:app_icon",
+    "label": "$string:app_name"
+  }
+}
diff --git a/MultiDeviceCommunication/AppScope/resources/base/element/string.json b/MultiDeviceCommunication/AppScope/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..74e3264342d55250836764259c9d24fafd6c1dc8
--- /dev/null
+++ b/MultiDeviceCommunication/AppScope/resources/base/element/string.json
@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "MultDeviceCommunication"
+    }
+  ]
+}
diff --git a/MultiDeviceCommunication/AppScope/resources/base/media/app_icon.png b/MultiDeviceCommunication/AppScope/resources/base/media/app_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd45accb1dfd2fd0da16c732c72faa6e46b26521
Binary files /dev/null and b/MultiDeviceCommunication/AppScope/resources/base/media/app_icon.png differ
diff --git a/MultiDeviceCommunication/README.en.md b/MultiDeviceCommunication/README.en.md
new file mode 100644
index 0000000000000000000000000000000000000000..3fe01b6c723b98012117f645a531ba33255460c4
--- /dev/null
+++ b/MultiDeviceCommunication/README.en.md
@@ -0,0 +1,43 @@
+# Instant Messaging
+
+### Introduction
+
+Learn to implement an instant messaging app based on the adaptive layout and responsive layout, achieving one-time development for multi-device deployment.
+
+#### Description
+
+This codelab implements an instant messaging app based on the adaptive layout and responsive layout, achieving one-time development for multi-device deployment. It uses the three-layer project architecture for code reuse and tailors the pages to different device sizes such as mobile phones, foldable phones, and PC/2-in-1 devices.
+The following figure shows the effect on the mobile phone:
+
+![](screenshots/device/phone_EN.png)
+
+The following figure shows the effect on the foldable phone in unfolded state:
+
+![](screenshots/device/foldable_EN.png)
+
+The following figure shows the effect on the PC/2-in-1 device:
+
+![](screenshots/device/pad_EN.png)
+
+#### Concepts
+
+- One-time development for multi-device deployment: It enables you to develop and release one set of project code for deployment on multiple devices as demanded. This feature enables you to efficiently develop applications that are compatible with multiple devices while providing distributed user experiences for cross-device transferring, migration, and collaboration.
+- Adaptive layout: When the size of an external container changes, elements can automatically change based on the relative relationship to adapt to the external container. Relative relationships include the proportion, fixed aspect ratio, and display priority. Common adaptive layouts include linear, stacking, flexbox, and relative layouts. These capabilities enable the GUI to continuously change with the size of the external container.
+- Responsive layout: When the size of an external container changes, elements can automatically change based on the breakpoints, grids, or specific features (such as the screen direction and window width and height) to adapt to the external container.
+- Navigation: This component is the root container of pages, usually used in the split-view layout.
+
+#### Permissions
+
+N/A.
+
+#### How to Use
+
+- Install and open an app on a mobile phone, foldable phone, or tablet. The responsive layout and adaptive layout are used to display different effects on the app pages over different devices.
+- Tap Message, Contacts, or Social Circle at the bottom to switch to the corresponding tab page. By default, the Message tab page is displayed.
+
+#### Constraints
+
+1. The sample app is supported only on Huawei phones running the standard system.
+2. HarmonyOS: HarmonyOS 5.0.0 Release or later
+3. DevEco Studio: DevEco Studio 5.0.0 Release or later
+4. HarmonyOS SDK: HarmonyOS 5.0.0 Release SDK or later
\ No newline at end of file
diff --git a/MultiDeviceCommunication/README.md b/MultiDeviceCommunication/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..c7b62faf9eba12684861752081fc70f376fd08fc
--- /dev/null
+++ b/MultiDeviceCommunication/README.md
@@ -0,0 +1,43 @@
+# 一次开发，多端部署-即时通讯
+
+### 简介
+
+基于自适应和响应式布局，实现一次开发，多端部署-即时通讯。
+
+#### 介绍
+
+本篇Codelab基于自适应布局和响应式布局，实现一次开发，多端部署的即时通讯页面。通过“三层工程架构”实现代码复用，并根据手机、折叠屏以及PC/2in1不同的设备尺寸设计对应页面。
+手机效果如图所示：
+
+![](screenshots/device/phone.png)
+
+折叠屏展开态效果如图所示：
+
+![](screenshots/device/foldable.png)
+
+PC/2in1效果如图所示：
+
+![](screenshots/device/pad.png)
+
+#### 相关概念
+
+- 一次开发，多端部署：一套代码工程，一次开发上架，多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用，实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验。
+- 自适应布局：当外部容器大小发生变化时，元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。常见的自适应布局有：线性布局、层叠布局、弹性布局、相对布局等。自适应布局能力可以实现界面显示随外部容器大小连续变化。
+- 响应式布局：当外部容器大小发生变化时，元素可以根据断点、栅格或特定的特征（如屏幕方向、窗口宽高等）自动变化以适应外部容器变化的布局能力。
+- Navigation：页面根容器，一般用于分栏布局场景使用。
+
+#### 相关权限
+
+不涉及。
+
+#### 使用说明
+
+- 分别在手机、折叠屏、平板安装并打开应用，不同设备的应用页面通过响应式布局和自适应布局呈现不同的效果。
+- 点击底部消息、通讯录、社交圈，将切换显示对应的标签页，默认显示消息标签页。
+
+#### 约束与限制
+
+1. 本示例仅支持标准系统上运行，支持设备：华为手机。
+2. HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。
+3. DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。
+4. HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。
diff --git a/MultiDeviceCommunication/build-profile.json5 b/MultiDeviceCommunication/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..bd41395f6fc231e92da61dafe8e1cefeeeceefc6
--- /dev/null
+++ b/MultiDeviceCommunication/build-profile.json5
@@ -0,0 +1,71 @@
+{
+  "app": {
+    "signingConfigs": [],
+    "products": [
+      {
+        "name": "default",
+        "signingConfig": "default",
+        "compatibleSdkVersion": "5.0.0(12)",
+        "runtimeOS": "HarmonyOS"
+      }
+    ],
+    "buildModeSet": [
+      {
+        "name": "debug"
+      },
+      {
+        "name": "release"
+      }
+    ]
+  },
+  "modules": [
+    {
+      "name": "phone",
+      "srcPath": "./products/phone",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "home",
+      "srcPath": "./features/home",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "socialCircle",
+      "srcPath": "./features/socialCircle",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "base",
+      "srcPath": "./common/base",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/Index.ets b/MultiDeviceCommunication/common/base/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d8522a80c3704c0cdd74d44bbc4b2b1ec2efe6a3
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/Index.ets
@@ -0,0 +1,20 @@
+export { BreakpointConstants } from "./src/main/ets/constants/BreakpointConstants";
+
+export { TabInfoModel } from "./src/main/ets/viewmodel/CommonViewModel";
+
+export { TabText } from "./src/main/ets/views/text/TabText";
+
+export { IntroduceText } from "./src/main/ets/views/text/IntroduceText";
+
+export { StandardIcon } from "./src/main/ets/views/image/StandardIcon";
+
+export { NormalText } from "./src/main/ets/views/text/NormalText";
+
+export { BreakpointType } from "./src/main/ets/utils/Breakpoint/BreakpointType";
+
+export { default as Logger } from "./src/main/ets/utils/Logger/Logger";
+
+export { BaseConstants, CurrentFeature, CurrentPage,DeviceTypes } from "./src/main/ets/constants/BaseConstants";
+
+export { Adaptive } from "./src/main/ets/viewmodel/AdaptiveViewModel";
+
diff --git a/MultiDeviceCommunication/common/base/build-profile.json5 b/MultiDeviceCommunication/common/base/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/hvigorfile.ts b/MultiDeviceCommunication/common/base/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiDeviceCommunication/common/base/obfuscation-rules.txt b/MultiDeviceCommunication/common/base/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..985b2aeb7658286b17bd26eab8f217c3fe75ea8b
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/obfuscation-rules.txt
@@ -0,0 +1,18 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/oh-package.json5 b/MultiDeviceCommunication/common/base/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..c764a93a96ab677a53c95087b3858bd0524e4e76
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/oh-package.json5
@@ -0,0 +1,11 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "base",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {}
+}
diff --git a/MultiDeviceCommunication/common/base/src/main/ets/constants/BaseConstants.ets b/MultiDeviceCommunication/common/base/src/main/ets/constants/BaseConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..06f0d45311844d2f84649376f9101155ada1b4ca
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/ets/constants/BaseConstants.ets
@@ -0,0 +1,135 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class BaseConstants {
+  /**
+   * Component size
+   */
+  static readonly FULL_PERCENT: string = '100%';
+  static readonly FULL_SIZE: string = '100%';
+  static readonly FULL_HEIGHT: string = '100%';
+  static readonly FULL_WIDTH: string = '100%';
+  static readonly NINETY_WIDTH_PERCENT: string = '90%';
+  static readonly IMAGE_ONE_WIDTH_SM: string = '66.6%';
+  static readonly IMAGE_ONE_WIDTH_MD: string = '63.8%';
+  static readonly IMAGE_ONE_WIDTH_LG: string = '32.1%';
+  static readonly TAB_PADDING_TOP: string = '28.6%'
+  static readonly TAB_PADDING_BOTTOM: string = '28.6%'
+  static readonly HOME_LIST_WIDTH: string = '37%'
+  static readonly APPLET_LIST_WIDTH: string = '37%'
+  static readonly IMAGE_ONE_ASPECT_RATIO: number = 1.33;
+  static readonly SMALL_MINI_FONT_SIZE: Resource = $r('app.float.smaller_mini_font_size');
+  /**
+   * Text property
+   */
+  static readonly FONT_FAMILY_SEMI_BOLD: Resource = $r('app.float.font_family_semi_bold');
+  static readonly FONT_FAMILY_NORMAL: Resource = $r('app.float.font_family_normal');
+  static readonly FONT_FAMILY_BOLD: Resource = $r('app.float.font_family_bold');
+  static readonly FONT_FAMILY_MEDIUM: Resource = $r('app.float.font_family_medium');
+  static readonly FONT_WEIGHT_SEVEN: number = 700;
+  static readonly FONT_WEIGHT_SIX: number = 600;
+  static readonly FONT_WEIGHT_FIVE: number = 500;
+  static readonly FONT_WEIGHT_FOUR: number = 400;
+  static readonly FONT_SIZE_TEN: Resource = $r('app.float.font_size_ten');
+  static readonly FONT_SIZE_ELEVEN: Resource = $r('app.float.font_size_eleven');
+  static readonly FONT_SIZE_TWELVE: Resource = $r('app.float.font_size_twelve');
+  static readonly FONT_SIZE_FOURTEEN: Resource = $r('app.float.font_size_fourteen');
+  static readonly FONT_SIZE_SIXTEEN: Resource = $r('app.float.font_size_sixteen');
+  static readonly FONT_SIZE_EIGHTEEN: Resource = $r('app.float.font_size_eighteen');
+  static readonly FONT_SIZE_TWENTY: Resource = $r('app.float.font_size_twenty');
+  static readonly FONT_SIZE_TWENTY_FOUR: Resource = $r('app.float.font_size_twenty_four');
+  static readonly FONT_SIZE_THIRTY_TWO: Resource = $r('app.float.font_size_thirty_two');
+  /**
+   * Application about
+   */
+  static readonly SPLIT_DOCUMENT_SCREEN = false;
+  static readonly SPLIT_APPLET_SCREEN = false;
+  /**
+   * Flex about
+   */
+  static readonly FLEX_GROW_ONE = 1;
+  static readonly LAYOUT_WEIGHT_ONE = 1;
+  static readonly FLEX_SHRINK_ZERO = 0;
+  static readonly FLEX_SHRINK_ONE = 1;
+  /**
+   * HomeTab
+   */
+  static readonly HOME_TAB_HEIGHT_SM: string = '56vp';
+  static readonly HOME_TAB_HEIGHT_MD: string = '56vp';
+  static readonly HOME_TAB_HEIGHT_LG: string = '100%';
+  static readonly HOME_TAB_WIDTH_SM: string = '100%';
+  static readonly HOME_TAB_WIDTH_MD: string = '100%';
+  static readonly HOME_TAB_WIDTH_LG: string = '96vp';
+  static readonly CONTACTS_PHONE_WIDTH_SM: string = '27%';
+  static readonly CONTACTS_PHONE_WIDTH_MD: string = '28%';
+  static readonly CONTACTS_PHONE_WIDTH_LG: string = '25%';
+  static readonly CONTACTS_DETAIL_HEIGHT_SM: string = '100%';
+  static readonly CONTACTS_DETAIL_HEIGHT_MD: string = '100%';
+  static readonly CONTACTS_DETAIL_HEIGHT_LG: string = '90%';
+  static readonly CONTACTS_ITEM_HEIGHT_SM: string = '11%';
+  static readonly CONTACTS_ITEM_HEIGHT_MD: string = '11%';
+  static readonly CONTACTS_ITEM_HEIGHT_LG: string = '10%';
+  /**
+   * Document tab
+   */
+  static readonly DOCUMENT_TITLE_HEIGHT_SM: string = '33%';
+  static readonly DOCUMENT_TITLE_HEIGHT_MD: string = '58%';
+  static readonly DOCUMENT_TITLE_HEIGHT_LG: string = '100%';
+  static readonly DOCUMENT_TITLE_SPACE_SM: number = 32;
+  static readonly DOCUMENT_TITLE_SPACE_MD: number = 56;
+  static readonly DOCUMENT_TITLE_SPACE_LG: number = 103;
+  /**
+   * Component opacity value: 1.
+   */
+  static readonly FULL_OPACITY: number = 1;
+  /**
+   * Component opacity value: 0.6.
+   */
+  static readonly SIXTY_OPACITY: number = 0.6;
+  /**
+   * Device grid column list.
+   */
+  static readonly DEVICE_GRID_COLUMNS: string[] = ['1fr 1fr', '1fr 1fr 1fr', '1fr 1fr 1fr 1fr', '1fr 1fr 1fr 1fr 1fr',
+    '1fr 1fr 1fr 1fr 1fr 1fr 1fr'];
+  /**
+   * Device PC/2in1.
+   */
+  static readonly DEVICE_2IN1: string = '2in1';
+}
+
+/**
+ * Current feature home, applet or document
+ */
+export enum CurrentFeature {
+  HOME = 0,
+  APPLET = 1,
+  DOCUMENT = 2
+}
+
+/**
+ * Current page home,conversation or socialCircle
+ */
+export enum CurrentPage {
+  HOME = 0,
+  CONVERSATION = 1,
+  SOCIAL_CIRCLE = 2,
+  ME = 3
+}
+
+export enum DeviceTypes {
+  PHONE = 'phone',
+  TABLET = 'tablet',
+  "2IN1" = '2in1',
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/src/main/ets/constants/BreakpointConstants.ets b/MultiDeviceCommunication/common/base/src/main/ets/constants/BreakpointConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..39a925fec0febea0394d22485624416137d9a38d
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/ets/constants/BreakpointConstants.ets
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Constants for breakpoint.
+ */
+export class BreakpointConstants {
+  /**
+   * Breakpoints that represent smaller device types.
+   */
+  static readonly BREAKPOINT_XS: string = 'xs';
+  /**
+   * Breakpoints that represent small device types.
+   */
+  static readonly BREAKPOINT_SM: string = 'sm';
+  /**
+   * Breakpoints that represent middle device types.
+   */
+  static readonly BREAKPOINT_MD: string = 'md';
+  /**
+   * Breakpoints that represent large device types.
+   */
+  static readonly BREAKPOINT_LG: string = 'lg';
+  /**
+   * Breakpoints that represent large device types.
+   */
+  static readonly BREAKPOINT_SCOPE: number[] = [0, 320, 600, 840];
+  /**
+   * Grid row column list.
+   */
+  static readonly GRID_ROW_COLUMNS: number[] = [12, 15, 4];
+  /**
+   * Grid column span list.
+   */
+  static readonly GRID_COLUMN_SPANS: number[] = [12, 6, 7, 5, 3, 4, 2];
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/src/main/ets/utils/Breakpoint/BreakpointType.ets b/MultiDeviceCommunication/common/base/src/main/ets/utils/Breakpoint/BreakpointType.ets
new file mode 100644
index 0000000000000000000000000000000000000000..92e7cf2e0e72a772dd0a6d5850dde1d49ae5cfa8
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/ets/utils/Breakpoint/BreakpointType.ets
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants } from '../../constants/BreakpointConstants';
+
+export class BreakpointType<T> {
+  static currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM
+  sm: T;
+  md: T;
+  lg: T;
+
+  constructor(sm: T, md: T, lg: T) {
+    this.sm = sm;
+    this.md = md;
+    this.lg = lg;
+  }
+
+  GetValue(currentBreakpoint: string): T {
+    if (currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      return this.md;
+    }
+    if (currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      return this.lg;
+    } else {
+      return this.sm;
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/src/main/ets/utils/Logger/Logger.ets b/MultiDeviceCommunication/common/base/src/main/ets/utils/Logger/Logger.ets
new file mode 100644
index 0000000000000000000000000000000000000000..255bed3a8678b55cae91a74900d354c3542d4c57
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/ets/utils/Logger/Logger.ets
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { hilog } from '@kit.PerformanceAnalysisKit';
+
+
+class Logger {
+  private domain: number;
+  private prefix: string;
+  private format: string = '%{public}s, %{public}s';
+
+  /**
+   * constructor.
+   *
+   * @param Prefix Identifies the log tag.
+   * @param domain Domain Indicates the service domain, which is a hexadecimal integer ranging from 0x0 to 0xFFFFF.
+   */
+  constructor(prefix: string) {
+    this.prefix = prefix;
+    this.domain = 0xFF00;
+  }
+
+  debug(...args: string[]): void {
+    hilog.debug(this.domain, this.prefix, this.format, args);
+  }
+
+  info(...args: string[]): void {
+    hilog.info(this.domain, this.prefix, this.format, args);
+  }
+
+  warn(...args: string[]): void {
+    hilog.warn(this.domain, this.prefix, this.format, args);
+  }
+
+  error(...args: string[]): void {
+    hilog.error(this.domain, this.prefix, this.format, args);
+  }
+}
+
+export default new Logger('MultiDeviceCommunication');
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/src/main/ets/viewmodel/AdaptiveViewModel.ets b/MultiDeviceCommunication/common/base/src/main/ets/viewmodel/AdaptiveViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..c160a4f6bc8dc8f9028ffbd7874db2a12b925a74
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/ets/viewmodel/AdaptiveViewModel.ets
@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants as Constants } from '../constants/BaseConstants';
+import { BreakpointType } from '../utils/Breakpoint/BreakpointType';
+
+export class Adaptive {
+  static CircleImageOneWidth = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      Constants.IMAGE_ONE_WIDTH_SM,
+      Constants.IMAGE_ONE_WIDTH_MD,
+      Constants.IMAGE_ONE_WIDTH_LG
+    ).GetValue(currentBreakpoint);
+  }
+  static HomeTabHeight = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      Constants.HOME_TAB_HEIGHT_SM,
+      Constants.HOME_TAB_HEIGHT_MD,
+      Constants.HOME_TAB_HEIGHT_LG
+    ).GetValue(currentBreakpoint);
+  }
+  static HomeTabWidth = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      Constants.HOME_TAB_WIDTH_SM,
+      Constants.HOME_TAB_WIDTH_MD,
+      Constants.HOME_TAB_WIDTH_LG
+    ).GetValue(currentBreakpoint);
+  }
+  static ContactPhoneWidth = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      Constants.CONTACTS_PHONE_WIDTH_SM,
+      Constants.CONTACTS_PHONE_WIDTH_MD,
+      Constants.CONTACTS_PHONE_WIDTH_LG
+    ).GetValue(currentBreakpoint);
+  }
+  static ContactDetailHeight = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      Constants.CONTACTS_DETAIL_HEIGHT_SM,
+      Constants.CONTACTS_DETAIL_HEIGHT_MD,
+      Constants.CONTACTS_DETAIL_HEIGHT_LG
+    ).GetValue(currentBreakpoint);
+  }
+  static ContactItemHeight = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      Constants.CONTACTS_ITEM_HEIGHT_SM,
+      Constants.CONTACTS_ITEM_HEIGHT_MD,
+      Constants.CONTACTS_ITEM_HEIGHT_LG
+    ).GetValue(currentBreakpoint);
+  }
+  static DocumentTitleColumnHeight = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      Constants.DOCUMENT_TITLE_HEIGHT_SM,
+      Constants.DOCUMENT_TITLE_HEIGHT_MD,
+      Constants.DOCUMENT_TITLE_HEIGHT_LG
+    ).GetValue(currentBreakpoint);
+  }
+  static DocumentTitleColumnSpace = (currentBreakpoint: string): number => {
+    return new BreakpointType(
+      Constants.DOCUMENT_TITLE_SPACE_SM,
+      Constants.DOCUMENT_TITLE_SPACE_MD,
+      Constants.DOCUMENT_TITLE_SPACE_LG
+    ).GetValue(currentBreakpoint);
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/src/main/ets/viewmodel/CommonViewModel.ets b/MultiDeviceCommunication/common/base/src/main/ets/viewmodel/CommonViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d207df853a16bde3ac4f90bae56348b260bf45d2
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/ets/viewmodel/CommonViewModel.ets
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+interface TabInfoModel {
+  index: number;
+  img: Resource;
+  selectImg?: Resource;
+  title: Resource;
+};
+
+export { TabInfoModel };
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/src/main/ets/views/image/StandardIcon.ets b/MultiDeviceCommunication/common/base/src/main/ets/views/image/StandardIcon.ets
new file mode 100644
index 0000000000000000000000000000000000000000..18597cffd9a0b9618b85d47e86bbae373d335fd4
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/ets/views/image/StandardIcon.ets
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Component
+export struct StandardIcon {
+  @Prop icon: Resource;
+
+  build() {
+    Image(this.icon)
+      .width($r('app.float.icon_height_one'))
+      .height($r('app.float.icon_width_one'))
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/src/main/ets/views/text/IntroduceText.ets b/MultiDeviceCommunication/common/base/src/main/ets/views/text/IntroduceText.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f92eb40b195edea21bd6526b66aa7e2d601297e9
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/ets/views/text/IntroduceText.ets
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { BaseConstants } from '../../constants/BaseConstants';
+
+@Component
+export struct IntroduceText {
+  @Prop data: ResourceStr;
+  @Prop fontSize: Resource = $r('app.float.micro_font_size');
+  @Prop fontColor: Resource = $r('app.color.font_color_black_two');
+  @Prop fontWeight: number = BaseConstants.FONT_WEIGHT_FOUR;
+
+  build() {
+    Text(this.data)
+      .opacity(0.5)
+      .fontFamily(BaseConstants.FONT_FAMILY_NORMAL)
+      .fontSize(this.fontSize)
+      .fontColor(this.fontColor)
+      .textAlign(TextAlign.Start)
+      .lineHeight($r('app.float.text_line_height_five'))
+      .fontWeight(this.fontWeight)
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/src/main/ets/views/text/NormalText.ets b/MultiDeviceCommunication/common/base/src/main/ets/views/text/NormalText.ets
new file mode 100644
index 0000000000000000000000000000000000000000..45e549f7fce688595e5941a2560c82d351240493
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/ets/views/text/NormalText.ets
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants } from '../../constants/BaseConstants';
+
+@Component
+export struct NormalText {
+  @Prop data: ResourceStr;
+  @Prop fontSize: Resource = BaseConstants.FONT_SIZE_TWELVE;
+  @Prop fontColor: Resource = $r('app.color.font_color_black_two');
+  @Prop fontWeight: number = BaseConstants.FONT_WEIGHT_FOUR;
+  @Prop fontFamily: Resource = BaseConstants.FONT_FAMILY_NORMAL;
+
+  build() {
+    Text(this.data)
+      .fontFamily(this.fontFamily)
+      .fontSize(this.fontSize)
+      .fontColor(this.fontColor)
+      .textAlign(TextAlign.Start)
+      .lineHeight($r('app.float.text_line_height_five'))
+      .fontWeight(this.fontWeight)
+      .copyOption(CopyOptions.LocalDevice)
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/src/main/ets/views/text/TabText.ets b/MultiDeviceCommunication/common/base/src/main/ets/views/text/TabText.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e8d6f9cf5e37af7cbaf487c79f22f8ae9c1235a8
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/ets/views/text/TabText.ets
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants } from '../../constants/BaseConstants';
+
+@Component
+export struct TabText {
+  @Prop data: string = '';
+  @Prop resourceData: Resource;
+  @Prop fontSize: Resource = BaseConstants.SMALL_MINI_FONT_SIZE;
+  @Prop fontColor: Resource = $r('app.color.font_color_one');
+  @Prop fontWeight: number = BaseConstants.FONT_WEIGHT_FIVE;
+  @Prop fontFamily: Resource = BaseConstants.FONT_FAMILY_MEDIUM;
+
+  build() {
+    Text(this.data || this.resourceData)
+      .fontFamily(this.fontFamily)
+      .fontSize(this.fontSize)
+      .fontColor(this.fontColor)
+      .textAlign(TextAlign.Center)
+      .lineHeight($r('app.float.text_line_height_five'))
+      .fontWeight(this.fontWeight)
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/src/main/module.json5 b/MultiDeviceCommunication/common/base/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..5b88767e30950571337935f398f2dcbf4d1b822d
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/module.json5
@@ -0,0 +1,11 @@
+{
+  "module": {
+    "name": "base",
+    "type": "har",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/src/main/resources/base/element/color.json b/MultiDeviceCommunication/common/base/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..fbec60e2f19c2f58e547e17add8411e15ae92b4d
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/resources/base/element/color.json
@@ -0,0 +1,44 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "focus_color",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "background_color_grey",
+      "value": "#F6F6F6"
+    },
+    {
+      "name": "background_color_grey_two",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "background_color_grey_three",
+      "value": "#8A9097"
+    },
+    {
+      "name": "background_color_pink",
+      "value": "#FCF7F6"
+    },
+    {
+      "name": "background_color_icon",
+      "value": "#F0A6C3"
+    },
+    {
+      "name": "font_color_one",
+      "value": "#000000"
+    },
+    {
+      "name": "font_color_black_two",
+      "value": "#182431"
+    },
+    {
+      "name": "line_color",
+      "value": "#E7E7E7"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/src/main/resources/base/element/float.json b/MultiDeviceCommunication/common/base/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..dd89a96093d4f6238a1350a7070e76c7ae1943fe
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/resources/base/element/float.json
@@ -0,0 +1,120 @@
+{
+  "float": [
+    {
+      "name": "micro_font_size",
+      "value": "10fp"
+    },
+    {
+      "name": "smaller_mini_font_size",
+      "value": "11fp"
+    },
+    {
+      "name": "icon_height_one",
+      "value": "24vp"
+    },
+    {
+      "name": "icon_width_one",
+      "value": "24vp"
+    },
+    {
+      "name": "icon_margin_one",
+      "value": "12vp"
+    },
+    {
+      "name": "icon_margin_two",
+      "value": "24vp"
+    },
+    {
+      "name": "main_image_size",
+      "value": "22vp"
+    },
+    {
+      "name": "main_image_size_lg",
+      "value": "24vp"
+    },
+    {
+      "name": "avatar_image_size",
+      "value": "40vp"
+    },
+    {
+      "name": "bar_width",
+      "value": "96vp"
+    },
+    {
+      "name": "text_line_height_one",
+      "value": "19fp"
+    },
+    {
+      "name": "text_line_height_three",
+      "value": "14fp"
+    },
+    {
+      "name": "text_line_height_two",
+      "value": "22fp"
+    },
+    {
+      "name": "text_line_height_five",
+      "value": "21fp"
+    },
+    {
+      "name": "background_color_grey",
+      "value": "#111111"
+    },
+    {
+      "name": "input_raduis_one",
+      "value": "20vp"
+    },
+    {
+      "name": "font_family_normal",
+      "value": "HarmonyHeiTi"
+    },
+    {
+      "name": "font_family_medium",
+      "value": "HarmonyHeiTi-Medium"
+    },
+    {
+      "name": "font_family_bold",
+      "value": "HarmonyHeiTi-Bold"
+    },
+    {
+      "name": "font_family_semi_bold",
+      "value": "HarmonyHeiTi-SemiBold"
+    },
+    {
+      "name": "font_size_ten",
+      "value": "10fp"
+    },
+    {
+      "name": "font_size_eleven",
+      "value": "11fp"
+    },
+    {
+      "name": "font_size_twelve",
+      "value": "12fp"
+    },
+    {
+      "name": "font_size_fourteen",
+      "value": "14fp"
+    },
+    {
+      "name": "font_size_sixteen",
+      "value": "16fp"
+    },
+    {
+      "name": "font_size_eighteen",
+      "value": "18fp"
+    },
+    {
+      "name": "font_size_twenty",
+      "value": "20fp"
+    },
+    {
+      "name": "font_size_twenty_four",
+      "value": "24fp"
+    },
+    {
+      "name": "font_size_thirty_two",
+      "value": "32fp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/src/main/resources/base/element/string.json b/MultiDeviceCommunication/common/base/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..3e2e28728101a1b92e34e39873b2d80769859b13
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/resources/base/element/string.json
@@ -0,0 +1,24 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "test_sm",
+      "value": "sm"
+    },
+    {
+      "name": "test_md",
+      "value": "md"
+    },
+    {
+      "name": "test_lg",
+      "value": "lg"
+    },
+    {
+      "name": "test_aaa",
+      "value": "11fp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/common/base/src/main/resources/base/media/icon.png b/MultiDeviceCommunication/common/base/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/MultiDeviceCommunication/common/base/src/main/resources/base/media/icon.png differ
diff --git a/MultiDeviceCommunication/common/base/src/main/resources/base/media/setting.jpeg b/MultiDeviceCommunication/common/base/src/main/resources/base/media/setting.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..57e67dd49d39ad64ef090f59db3db9dfe6632106
Binary files /dev/null and b/MultiDeviceCommunication/common/base/src/main/resources/base/media/setting.jpeg differ
diff --git a/MultiDeviceCommunication/common/base/src/main/resources/base/profile/main_pages.json b/MultiDeviceCommunication/common/base/src/main/resources/base/profile/main_pages.json
new file mode 100644
index 0000000000000000000000000000000000000000..1898d94f58d6128ab712be2c68acc7c98e9ab9ce
--- /dev/null
+++ b/MultiDeviceCommunication/common/base/src/main/resources/base/profile/main_pages.json
@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/Index"
+  ]
+}
diff --git a/MultiDeviceCommunication/features/home/Index.ets b/MultiDeviceCommunication/features/home/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ef00decacd90ec409944182b273e656c705751ec
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/Index.ets
@@ -0,0 +1 @@
+export { Index as Home } from "./src/main/ets/pages/Index";
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/build-profile.json5 b/MultiDeviceCommunication/features/home/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/hvigorfile.ts b/MultiDeviceCommunication/features/home/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiDeviceCommunication/features/home/obfuscation-rules.txt b/MultiDeviceCommunication/features/home/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..985b2aeb7658286b17bd26eab8f217c3fe75ea8b
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/obfuscation-rules.txt
@@ -0,0 +1,18 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/oh-package.json5 b/MultiDeviceCommunication/features/home/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..e70ae9c6719501dac9a3b41f67ffd7b0209d5e0c
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/oh-package.json5
@@ -0,0 +1,14 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "home",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/base": "file:../../common/base",
+    "@ohos/socialcircle": "file:../socialCircle"
+  }
+}
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/constants/HomeConstants.ets b/MultiDeviceCommunication/features/home/src/main/ets/constants/HomeConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f53610408f567ca3fa421c0fc7ee65d9fbef5113
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/constants/HomeConstants.ets
@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class HomeConstants {
+  /**
+   * Grid row column list.
+   */
+  static readonly GRID_ROW_COLUMNS: number[] = [1, 2, 3, 4, 5];
+  static readonly GRID_COL_COLUMNS: number[] = [0, 1, 2, 3, 4, 5];
+  static readonly TAB_MESSAGE_INDEX = 0;
+  /**
+   * Index of CONTACTS tab.
+   */
+  static readonly TAB_CONTACTS_INDEX = 1;
+  /**
+   * Index of SOCIAL_CIRCLE tab.
+   */
+  static readonly TAB_SOCIAL_CIRCLE_INDEX = 2;
+  /**
+   * Index of ME tab.
+   */
+  static readonly TAB_ME_INDEX = 3;
+  static readonly CONTACTS_DETAIL_AVATAR_Z_INDEX = 2;
+  /**
+   * Image message
+   */
+  static readonly USER_PHONE = '15988880000';
+  static readonly LAST_POST = $r('app.string.news');
+  static readonly IMAGES_SCOPE = 2;
+  static readonly IMAGE_ASPECT_RATIO = 1;
+  /**
+   * Contacts list detail
+   */
+  static readonly CONTACTS_NAME = $r('app.string.Contacts');
+  static readonly CONTACTS_LIST = [$r('app.string.group'), $r('app.string.card')];
+  static readonly CONTACTS_DEFAULT_SELECTED_INDEX = 0;
+  static readonly CONTACTS_DEFAULT_SELECTED_NAME = $r('app.string.Alan');
+  /**
+   * Conversation detail
+   */
+  static readonly CONVERSATION_LIST_APPLET = [$r('app.string.milk'), $r('app.string.Speed'), $r('app.string.happy')];
+  static readonly CONVERSATION_LIST_DOCUMENT = [$r('app.string.plan'), $r('app.string.jack'), $r('app.string.ok')];
+  static readonly IS_APPLET_CONVERSATION = true;
+  static readonly IS_DOCUMENT_CONVERSATION = true;
+  static readonly IS_RECEIVED = true;
+  static readonly CONVERSATION_DEFAULT_SIZE = 3;
+  static readonly CONVERSATION_TITLE = $r('app.string.Message');
+  /**
+   * Conversation top search
+   */
+  static readonly SEARCH_TEXT_FLEX_BASIS = 150;
+  static readonly SEARCH_TEXT_INPUT = $r('app.string.search');
+  static readonly ENABLE_KEY_BOARD_ON_FOCUS = false;
+  static readonly FLEX_BASIS_AUTO = 'auto';
+  /**
+   * Conversation detail
+   */
+  static readonly CONVERSATION_DETAIL_BOTTOM_TEXT_RADIUS = 20;
+  static readonly CONVERSATION_DETAIL_TOP_TITLE = '芬芬';
+  static readonly CONVERSATION_DETAIL_MAX_LINE = 1;
+  static readonly CONVERSATION_DETAIL_FILL_OPACITY = 1;
+  static readonly CONVERSATION_DETAIL_STROKE_WIDTH = 1;
+  static readonly PATH_BORDER_RADIUS = 8;
+  /**
+   * Applet detail
+   */
+  static readonly APPLET_TITLE = '奶茶';
+  static readonly APPLET_DESCRIBE = '应用';
+  /**
+   * Document detail
+   */
+  static readonly DOCUMENT_SIZE = '24KB';
+  static readonly DOCUMENT_INTRODUCE = $r('app.string.document');
+  static readonly DOCUMENT_DIVIDER_WIDTH = 1;
+  /**
+   * Default avatar
+   */
+  static readonly DEFAULT_AVATAR = $r('app.media.avatar1')
+  /**
+   * Navigation navBarWidth percent
+   */
+  static readonly NAVIGATION_NAV_BAR_WIDTH_MD = '50%'
+  static readonly NAVIGATION_NAV_BAR_WIDTH_LG = '44.5%'
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/pages/ContactsDetail.ets b/MultiDeviceCommunication/features/home/src/main/ets/pages/ContactsDetail.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9e3c3286a695ab990d180ca96f183ecbaedcb666
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/pages/ContactsDetail.ets
@@ -0,0 +1,147 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Adaptive, BaseConstants, BreakpointConstants, StandardIcon } from '@ohos/base';
+import { HomeConstants } from '../constants/HomeConstants';
+import { SocialCirclePictures } from '../viewmodel/SocialCircleViewModel';
+import { deviceInfo } from '@kit.BasicServicesKit';
+
+@Component
+export struct ContactsDetail {
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+  @Prop currentContactUserName: string
+  @Prop currentContactUserIcon: Resource
+  @Consume('pageInfo') pageInfo: NavPathStack;
+
+  build() {
+    NavDestination() {
+      Stack({ alignContent: Alignment.Top }) {
+        Column() {
+          Column() {
+            if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+              StandardIcon({ icon: $r('app.media.ic_public_back') })
+                .onClick(() => {
+                  this.pageInfo.clear();
+
+                })
+            }
+          }
+          .padding({ top: $r('app.float.back_icon_top'), left: $r('app.float.back_icon_left') })
+          .alignItems(HorizontalAlign.Start)
+          .width(BaseConstants.FULL_WIDTH)
+        }
+        .width(BaseConstants.FULL_WIDTH)
+        .height(BaseConstants.FULL_HEIGHT)
+        .backgroundColor($r('app.color.background_color_pink'))
+        .padding({
+          top: deviceInfo.deviceType === BaseConstants.DEVICE_2IN1 ? $r('app.float.zero') : $r('app.float.device_padding_top')
+        })
+
+        Image(this.currentContactUserIcon)
+          .height($r('app.float.contacts_detail_avatar_height'))
+          .margin({ top: $r('app.float.contacts_detail_avatar_top') })
+          .zIndex(HomeConstants.CONTACTS_DETAIL_AVATAR_Z_INDEX)
+          .border({
+            width: $r('app.float.contacts_detail_avatar_border_width'),
+            color: Color.White,
+            radius: $r('app.float.contacts_detail_avatar_border_radius')
+          })
+        Column() {
+          Column() {
+            Column() {
+              Text(this.currentContactUserName || HomeConstants.CONTACTS_DEFAULT_SELECTED_NAME)
+                .fontSize(BaseConstants.FONT_SIZE_THIRTY_TWO)
+                .fontFamily(BaseConstants.FONT_FAMILY_MEDIUM)
+                .fontWeight(BaseConstants.FONT_WEIGHT_FIVE)
+                .fontColor(Color.Black)
+            }
+            .width(BaseConstants.FULL_WIDTH)
+            .alignItems(HorizontalAlign.Center)
+            .padding({ top: $r('app.float.contacts_detail_user_top') })
+
+            Row() {
+              Column() {
+                Text(HomeConstants.USER_PHONE)
+                  .fontFamily(BaseConstants.FONT_FAMILY_MEDIUM)
+                  .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+                  .fontWeight(BaseConstants.FONT_WEIGHT_FIVE)
+              }
+              .margin({ left: $r('app.float.phone_left') })
+
+              Blank()
+              StandardIcon({ icon: $r('app.media.ic_public_phone') })
+                .margin({ right: $r('app.float.phone_icon_right') })
+              StandardIcon({ icon: $r('app.media.ic_public_video') })
+                .margin({ right: $r('app.float.phone_icon_right') })
+              StandardIcon({ icon: $r('app.media.ic_public_comments') })
+                .margin({ right: $r('app.float.phone_icon_right') })
+            }
+            .width(BaseConstants.FULL_WIDTH)
+            .padding({ top: $r('app.float.phone_column_top') })
+
+            Column() {
+              Divider()
+                .color($r('app.color.line_color'))
+                .width(BaseConstants.FULL_WIDTH)
+                .margin({ left: $r('app.float.phone_divider_left'), right: $r('app.float.phone_divider_right') })
+            }
+            .width(BaseConstants.FULL_WIDTH)
+            .padding({ top: $r('app.float.phone_divider_top') })
+
+            Column() {
+              Text(HomeConstants.LAST_POST)
+                .fontSize(BaseConstants.FONT_SIZE_TWELVE)
+                .fontColor(Color.Black)
+                .fontWeight(BaseConstants.FONT_WEIGHT_FOUR)
+                .fontFamily(BaseConstants.FONT_FAMILY_NORMAL)
+            }
+            .width(BaseConstants.FULL_WIDTH)
+            .padding({ left: $r('app.float.last_post_left'), top: $r('app.float.last_post_top') })
+            .alignItems(HorizontalAlign.Start)
+
+            Column() {
+              List({ space: HomeConstants.IMAGES_SCOPE }) {
+                ForEach(SocialCirclePictures, (item: Resource) => {
+                  ListItem() {
+                    Image(item)
+                      .width(Adaptive.ContactPhoneWidth(this.currentBreakpoint))
+                      .aspectRatio(HomeConstants.IMAGE_ASPECT_RATIO)
+                  }
+                }, (item: Resource, index: number) => index + JSON.stringify(item))
+              }
+              .width(BaseConstants.FULL_WIDTH)
+              .height(BaseConstants.FULL_HEIGHT)
+              .listDirection(Axis.Horizontal)
+            }
+            .padding({ left: $r('app.float.images_left'), top: $r('app.float.images_top') })
+          }
+          .margin(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? {} : {
+            left: $r('app.float.images_column_left'),
+            right: $r('app.float.images_column_right')
+          })
+          .height(Adaptive.ContactDetailHeight(this.currentBreakpoint))
+          .borderRadius({
+            topLeft: $r('app.float.contacts_detail_left'),
+            topRight: $r('app.float.contacts_detail_right')
+          })
+          .backgroundColor(Color.White)
+        }
+        .margin({ top: $r('app.float.contacts_detail_column_top') })
+        .width(BaseConstants.FULL_WIDTH)
+        .alignItems(HorizontalAlign.Start)
+      }
+    }
+    .hideTitleBar(true)
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/pages/ContactsList.ets b/MultiDeviceCommunication/features/home/src/main/ets/pages/ContactsList.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ddd67701debb01bfe024037863e3f6d4a7cb5812
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/pages/ContactsList.ets
@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Adaptive, BaseConstants, BreakpointConstants } from '@ohos/base';
+import { Alphabets, ContactsListData, ContactsDataInterface } from '../viewmodel/ConstactsViewModel';
+import { ContactsItem } from '../views/Contacts/ContactsItem';
+import { HomeConstants } from '../constants/HomeConstants';
+import { HomeTopSearch } from '../views/common/HomeTopSearch';
+
+@Component
+export struct ContactsList {
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+  @Link currentContactUserName: Resource;
+  @Link currentContactUserIcon: Resource;
+  @Link currentConversationUserName: string;
+  @Consume('pageInfo') pageInfo: NavPathStack;
+  @State selectedIndex: number = HomeConstants.CONTACTS_DEFAULT_SELECTED_INDEX;
+  @State private currentIndex: number = 0;
+  private listScroller: Scroller = new Scroller();
+
+  /**
+   * Find checked contact
+   */
+  findContactsItemIndex(index: number): number {
+    if (index < 0) return 0;
+    const currentIndex = ContactsListData.findIndex(item => item.en_name[0].toUpperCase() === Alphabets[index]);
+    if (currentIndex === -1) {
+      return this.findContactsItemIndex(index - 1);
+    } else {
+      return currentIndex;
+    }
+  }
+
+  build() {
+    Flex({ direction: FlexDirection.Column }) {
+      HomeTopSearch({ title: HomeConstants.CONTACTS_NAME })
+        .height('13%')
+      Stack({ alignContent: Alignment.End }) {
+        List({ scroller: this.listScroller }) {
+          ListItem() {
+            ContactsItem({ name: HomeConstants.CONTACTS_LIST[0], icon: $r('app.media.ic_public_groups') })
+          }
+          .height(Adaptive.ContactItemHeight(this.currentBreakpoint))
+          .backgroundColor(Color.White)
+
+          ListItem() {
+            ContactsItem({ name: HomeConstants.CONTACTS_LIST[1], icon: $r('app.media.ic_public_names') })
+          }
+          .height(Adaptive.ContactItemHeight(this.currentBreakpoint))
+          .backgroundColor(Color.White)
+
+          ForEach(ContactsListData, (item: ContactsDataInterface, index: number) => {
+            ListItem() {
+              ContactsItem({ name: item.name, icon: item.icon })
+                .onClick(() => {
+                  if (this.pageInfo.size() > 1) {
+                    this.pageInfo.pop();
+                  }
+                  this.pageInfo.pushPath({ name: 'ContactsDetail' });
+                  this.currentContactUserName = item.name;
+                  this.currentContactUserIcon = item.icon;
+                  this.currentConversationUserName = '';
+                  this.currentIndex = index;
+                })
+                .height(BaseConstants.FULL_HEIGHT)
+                .padding($r('app.float.contacts_item_padding'))
+                .backgroundColor(this.currentIndex === index ? $r('app.color.conversation_clicked_bg_color') : Color.White)
+            }
+            .height(Adaptive.ContactItemHeight(this.currentBreakpoint))
+          }, (item: ContactsDataInterface, index: number) => index + JSON.stringify(item))
+        }
+        .width(BaseConstants.FULL_WIDTH)
+        .height(BaseConstants.FULL_HEIGHT)
+        .onScrollIndex((firstIndex: number) => {
+          this.selectedIndex = firstIndex;
+        })
+
+        AlphabetIndexer({ arrayValue: Alphabets, selected: 0 })
+          .onSelect((index: number) => {
+            const currentIndex = this.findContactsItemIndex(index);
+            this.listScroller.scrollToIndex(currentIndex + 2);
+          })
+          .margin({ right: $r('app.float.alphabet_indexer_right') })
+          .color(Color.Black)
+          .font({
+            size: BaseConstants.FONT_SIZE_TWELVE,
+            weight: BaseConstants.FONT_WEIGHT_FIVE,
+            family: BaseConstants.FONT_FAMILY_MEDIUM
+          })
+      }
+    }
+    .height(BaseConstants.FULL_HEIGHT)
+    .width(BaseConstants.FULL_WIDTH)
+  }
+}
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/pages/ConversationDetail.ets b/MultiDeviceCommunication/features/home/src/main/ets/pages/ConversationDetail.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2cd1af1798c73fb7bd498184f0a30f41374849f6
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/pages/ConversationDetail.ets
@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Adaptive, BaseConstants, BreakpointConstants } from '@ohos/base';
+import { ConversationDetailBottom } from '../views/Conversation/ConversationDetailBottom';
+import ConversationDetailItem from '../views/Conversation/ConversationDetailItem';
+import { ConversationDetailTopSearch } from '../views/Conversation/ConversationDetailTopSearch';
+import { HomeConstants } from '../constants/HomeConstants';
+import { deviceInfo } from '@kit.BasicServicesKit';
+// [Start conversation_detail]
+@Component
+export struct ConversationDetail {
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+  @Prop currentConversationUserName: string;
+  @Prop currentFeatureIndex: number;
+  @Consume('pageInfo') pageInfo: NavPathStack;
+
+  build() {
+    NavDestination() {
+      Flex({ direction: FlexDirection.Column }) {
+        ConversationDetailTopSearch({ currentConversationUserName: $currentConversationUserName, })
+          .height(Adaptive.ContactItemHeight(this.currentBreakpoint))
+        if (this.currentConversationUserName.length === HomeConstants.CONVERSATION_DEFAULT_SIZE) {
+          ConversationDetailItem({
+            receivedName: $currentConversationUserName,
+            isReceived: HomeConstants.IS_RECEIVED,
+            content: HomeConstants.CONVERSATION_LIST_APPLET[0],
+            isAppletMsg: HomeConstants.IS_APPLET_CONVERSATION,
+            currentFeatureIndex: $currentFeatureIndex
+          })
+          ConversationDetailItem({
+            receivedName: $currentConversationUserName,
+            isReceived: HomeConstants.IS_RECEIVED,
+            content: HomeConstants.CONVERSATION_LIST_APPLET[1],
+            currentFeatureIndex: $currentFeatureIndex
+          })
+          ConversationDetailItem({
+            receivedName: $currentConversationUserName,
+            isReceived: !HomeConstants.IS_RECEIVED,
+            content: HomeConstants.CONVERSATION_LIST_APPLET[2],
+            currentFeatureIndex: $currentFeatureIndex
+          })
+        } else {
+          ConversationDetailItem({
+            receivedName: $currentConversationUserName,
+            isReceived: HomeConstants.IS_RECEIVED,
+            content: HomeConstants.CONVERSATION_LIST_DOCUMENT[0],
+            isDocumentMsg: HomeConstants.IS_DOCUMENT_CONVERSATION,
+            currentFeatureIndex: $currentFeatureIndex
+          })
+          ConversationDetailItem({
+            receivedName: $currentConversationUserName,
+            isReceived: HomeConstants.IS_RECEIVED,
+            content: HomeConstants.CONVERSATION_LIST_DOCUMENT[1],
+            currentFeatureIndex: $currentFeatureIndex
+          })
+          ConversationDetailItem({
+            receivedName: $currentConversationUserName,
+            isReceived: !HomeConstants.IS_RECEIVED,
+            content: HomeConstants.CONVERSATION_LIST_DOCUMENT[2],
+            currentFeatureIndex: $currentFeatureIndex
+          })
+        }
+        Blank()
+        ConversationDetailBottom()
+      }
+      .height(BaseConstants.FULL_HEIGHT)
+      .width(BaseConstants.FULL_WIDTH)
+      .backgroundColor($r('app.color.background_color_grey'))
+      .padding({
+        bottom: deviceInfo.deviceType !== BaseConstants.DEVICE_2IN1 ?
+        $r('app.float.tab_content_pb') : $r('app.float.zero')
+      })
+    }
+    .hideTitleBar(true)
+  }
+}
+// [End conversation_detail]
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/pages/ConversationList.ets b/MultiDeviceCommunication/features/home/src/main/ets/pages/ConversationList.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4f174f8395d94f017d4910b95a6d61f1d91010ff
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/pages/ConversationList.ets
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Adaptive, BaseConstants, BreakpointConstants } from '@ohos/base';
+import { ConversationDataInterface, ConversationListData } from '../viewmodel/ConversationViewModel';
+import { ConversationItem } from '../views/Conversation/ConversationItem';
+import { HomeTopSearch } from '../views/common/HomeTopSearch';
+import { HomeConstants } from '../constants/HomeConstants';
+import { deviceInfo } from '@kit.BasicServicesKit';
+// [Start conversation_list_diff_device]
+@Component
+export struct ConversationList {
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+  @Link currentConversationUserName: Resource;
+  @Link currentContactUserName: string;
+  @State private currentIndex: number = 0;
+  @Consume('pageInfo') pageInfo: NavPathStack;
+
+  build() {
+    Flex({ direction: FlexDirection.Column }) {
+      HomeTopSearch({ title: HomeConstants.CONVERSATION_TITLE })
+        .height('13%')
+      // [Start conversation_list]
+      List() {
+        ForEach(ConversationListData, (item: ConversationDataInterface, index: number) => {
+          ListItem() {
+            ConversationItem(item)
+              .onClick(() => {
+                if (this.pageInfo.size() > 1) {
+                  this.pageInfo.pop();
+                }
+                this.pageInfo.pushPath({ name: 'ConversationDetail' });
+                this.currentConversationUserName = item.name;
+                this.currentContactUserName = '';
+                this.currentIndex = index;
+              })
+              .backgroundColor(this.currentIndex === index ? $r('app.color.conversation_clicked_bg_color') : Color.White)
+          }
+          .height(Adaptive.ContactItemHeight(this.currentBreakpoint))
+
+        }, (item: ConversationDataInterface, index: number) => index + JSON.stringify(item))
+      }
+      // [End conversation_list]
+      .padding({
+        bottom: deviceInfo.deviceType !== BaseConstants.DEVICE_2IN1 &&
+          this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+        $r('app.float.tab_content_pb') : $r('app.float.zero')
+      })
+      .backgroundColor(Color.White)
+      .width(BaseConstants.FULL_WIDTH)
+      .height(BaseConstants.FULL_HEIGHT)
+    }
+
+    .height(BaseConstants.FULL_HEIGHT)
+    .width(BaseConstants.FULL_WIDTH)
+  }
+}
+// [End conversation_list_diff_device]
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/pages/Index.ets b/MultiDeviceCommunication/features/home/src/main/ets/pages/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..94cbb94629b2c89070b077d7ee9acd715cf40432
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/pages/Index.ets
@@ -0,0 +1,214 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Adaptive, BaseConstants, BreakpointConstants, CurrentFeature, CurrentPage } from '@ohos/base';
+import ConversationDetailNone from '../views/Conversation/ConversationDetailNone';
+import { ContactsDetail } from './ContactsDetail';
+import { ContactsList } from './ContactsList';
+import { ConversationDetail } from './ConversationDetail';
+import { ConversationList } from './ConversationList';
+import { HomeConstants } from '../constants/HomeConstants';
+import { HomeTab } from '../views/HomeTab';
+import { SocialCircle } from '@ohos/SocialCircle';
+import { deviceInfo } from '@kit.BasicServicesKit';
+
+@Entry
+@Component
+export struct Index {
+  @StorageProp('currentBreakpoint') @Watch('watchCurrentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+  // [Start navigation_diff_device]
+  @Provide('pageInfo') pageInfo: NavPathStack = new NavPathStack();
+  // [StartExclude navigation_diff_device]
+  @State currentConversationUserName: string = '';
+  @State currentContactUserName: string = '';
+  @State currentContactUserIcon: Resource = HomeConstants.DEFAULT_AVATAR;
+  @State currentPageIndex: number = CurrentPage.HOME;
+  @State currentFeatureIndex: Number = CurrentFeature.HOME;
+  @State isSplitAppletScreen: boolean = BaseConstants.SPLIT_APPLET_SCREEN;
+  @State isSplitDocumentScreen: boolean = BaseConstants.SPLIT_DOCUMENT_SCREEN;
+
+  watchCurrentBreakpoint() {
+    if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM &&
+      this.pageInfo.getParamByName('ConversationDetailNone').length === 1 && this.pageInfo.size() === 1) {
+      this.pageInfo.pop();
+    }
+  }
+  // [EndExclude navigation_diff_device]
+  @Builder
+  PageMap(name: string) {
+    if (name === 'ConversationDetail') {
+      ConversationDetail({ currentConversationUserName: this.currentConversationUserName, currentFeatureIndex: 1 });
+    } else if (name === 'ConversationDetailNone') {
+      ConversationDetailNone();
+    } else if (name === 'ContactsDetail') {
+      ContactsDetail({
+        currentContactUserName: this.currentContactUserName,
+        currentContactUserIcon: this.currentContactUserIcon
+      });
+    } else {
+      ConversationDetailNone();
+    }
+  }
+
+  build() {
+    Column() {
+      /**
+       * Home and contacts page
+       */
+      Flex() {
+        HomeTab({ currentPageIndex: $currentPageIndex })
+          .width(Adaptive.HomeTabWidth(this.currentBreakpoint))
+          .backgroundColor($r('app.color.background_color_grey_two'))
+          .padding({
+            top: $r('app.float.home_tab_padding_top'),
+            bottom: $r('app.float.home_tab_padding_bottom'),
+            left: $r('app.float.home_tab_padding_left')
+          })
+          .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None)
+        // [Start nav_path_stack]
+        Navigation(this.pageInfo) {
+          if (this.currentPageIndex === 0) {
+            Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
+              ConversationList({
+                currentConversationUserName: $currentConversationUserName,
+                currentContactUserName: $currentContactUserName
+              })
+                .flexGrow(BaseConstants.FLEX_GROW_ONE)
+                .width(BaseConstants.FULL_WIDTH)
+              HomeTab({ currentPageIndex: $currentPageIndex })
+                .width(Adaptive.HomeTabWidth(this.currentBreakpoint))
+                .height(Adaptive.HomeTabHeight(this.currentBreakpoint))
+                .visibility(this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None)
+            }
+            .padding({
+              bottom: deviceInfo.deviceType !== BaseConstants.DEVICE_2IN1
+                && this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG ?
+              $r('app.float.tab_content_pb') : $r('app.float.zero')
+            })
+            .height(BaseConstants.FULL_HEIGHT)
+
+          } else if (this.currentPageIndex === 1) {
+            Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
+              ContactsList({
+                currentContactUserName: $currentContactUserName,
+                currentConversationUserName: $currentConversationUserName,
+                currentContactUserIcon: $currentContactUserIcon
+              })
+                .flexGrow(BaseConstants.FLEX_GROW_ONE)
+                .width(BaseConstants.FULL_WIDTH)
+              HomeTab({ currentPageIndex: $currentPageIndex })
+                .width(Adaptive.HomeTabWidth(this.currentBreakpoint))
+                .height(Adaptive.HomeTabHeight(this.currentBreakpoint))
+                .visibility(this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None)
+            }
+            .height(BaseConstants.FULL_HEIGHT)
+            .padding({
+              bottom: deviceInfo.deviceType !== BaseConstants.DEVICE_2IN1
+                && this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG ?
+              $r('app.float.tab_content_pb') : $r('app.float.zero')
+            })
+          }
+        }
+        // [End nav_path_stack]
+        .hideTitleBar(true)
+        .hideToolBar(true)
+        .navBarWidth(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? HomeConstants.NAVIGATION_NAV_BAR_WIDTH_LG :
+        HomeConstants.NAVIGATION_NAV_BAR_WIDTH_MD)
+        .navDestination(this.PageMap)
+        .mode(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? NavigationMode.Stack : NavigationMode.Split)
+        .width(BaseConstants.FULL_WIDTH)
+      }
+      .visibility(this.currentPageIndex === CurrentPage.HOME || this.currentPageIndex === CurrentPage.CONVERSATION ?
+      Visibility.Visible : Visibility.None)
+      // [End navigation_diff_device]
+      /**
+       * SocialCircle page
+       */
+      Flex({ direction: FlexDirection.Column }) {
+        SocialCircle()
+          .flexGrow(BaseConstants.FLEX_GROW_ONE)
+        HomeTab({ currentPageIndex: $currentPageIndex })
+          .width(Adaptive.HomeTabWidth(this.currentBreakpoint))
+          .height(Adaptive.HomeTabHeight(this.currentBreakpoint))
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height(BaseConstants.FULL_HEIGHT)
+      .visibility(this.currentPageIndex === CurrentPage.SOCIAL_CIRCLE && this.currentBreakpoint !==
+      BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None)
+      .padding({
+        bottom: $r('app.float.tab_content_pb')
+      })
+
+
+      Row() {
+        HomeTab({ currentPageIndex: $currentPageIndex })
+          .width(Adaptive.HomeTabWidth(this.currentBreakpoint))
+          .backgroundColor($r('app.color.background_color_grey_two'))
+          .padding({
+            top: $r('app.float.home_tab_padding_top'),
+            bottom: $r('app.float.home_tab_padding_bottom'),
+            left: $r('app.float.home_tab_padding_left')
+          })
+        SocialCircle()
+          .width(BaseConstants.NINETY_WIDTH_PERCENT)
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .visibility(this.currentPageIndex === CurrentPage.SOCIAL_CIRCLE && this.currentBreakpoint ===
+      BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None)
+
+      /**
+       * Me page
+       */
+      Flex({ direction: FlexDirection.Column }) {
+        Column()
+          .flexGrow(BaseConstants.FLEX_GROW_ONE)
+        HomeTab({ currentPageIndex: $currentPageIndex })
+          .width(Adaptive.HomeTabWidth(this.currentBreakpoint))
+          .height(Adaptive.HomeTabHeight(this.currentBreakpoint))
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height(BaseConstants.FULL_HEIGHT)
+      .visibility(this.currentPageIndex === CurrentPage.ME && this.currentBreakpoint !==
+      BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None)
+      .padding({
+        top: deviceInfo.deviceType === BaseConstants.DEVICE_2IN1 ? $r('app.float.zero') : $r('app.float.device_padding_top'),
+        bottom: deviceInfo.deviceType !== BaseConstants.DEVICE_2IN1
+          && this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG ?
+        $r('app.float.tab_content_pb') : $r('app.float.zero')
+      })
+
+
+      Row() {
+        HomeTab({ currentPageIndex: $currentPageIndex })
+          .width(Adaptive.HomeTabWidth(this.currentBreakpoint))
+          .backgroundColor($r('app.color.background_color_grey_two'))
+          .padding({
+            top: $r('app.float.home_tab_padding_top'),
+            bottom: $r('app.float.home_tab_padding_bottom'),
+            left: $r('app.float.home_tab_padding_left')
+          })
+        Column()
+          .width(BaseConstants.NINETY_WIDTH_PERCENT)
+          .height(BaseConstants.FULL_HEIGHT)
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .visibility(this.currentPageIndex === CurrentPage.ME && this.currentBreakpoint ===
+      BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None)
+    }
+    .height(BaseConstants.FULL_HEIGHT)
+    .width(BaseConstants.FULL_WIDTH)
+    .backgroundColor($r('app.color.background_color_grey_two'))
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/viewmodel/BottomTabViewModel.ets b/MultiDeviceCommunication/features/home/src/main/ets/viewmodel/BottomTabViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..33f285bac0e0c7404a229054f678cd46c08f7c7c
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/viewmodel/BottomTabViewModel.ets
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { TabInfoModel } from '@ohos/base';
+
+const ButtonInfo: TabInfoModel[] = [
+  {
+    index: 0,
+    img: $r('app.media.icon_message'),
+    selectImg: $r('app.media.icon_message_selected'),
+    title: $r('app.string.Message')
+  },
+  {
+    index: 1,
+    img: $r('app.media.icon_contacts'),
+    selectImg: $r('app.media.icon_contacts_selected'),
+    title: $r('app.string.Contacts')
+  },
+  {
+    index: 2,
+    img: $r("app.media.icon_social_circle"),
+    selectImg: $r("app.media.icon_social_circle_selected"),
+    title: $r('app.string.SocialCircle')
+  },
+  {
+    index: 3,
+    img: $r('app.media.icon_me'),
+    selectImg: $r('app.media.icon_me'),
+    title: $r('app.string.Me')
+  }
+];
+
+export { ButtonInfo };
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/viewmodel/ConstactsViewModel.ets b/MultiDeviceCommunication/features/home/src/main/ets/viewmodel/ConstactsViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6425d33341d30e19f49116c3423fe743b2b7cb23
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/viewmodel/ConstactsViewModel.ets
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+interface ContactsDataInterface {
+  name: Resource;
+  en_name: string;
+  icon: Resource;
+}
+
+const ContactsListData: ContactsDataInterface[] = [
+  { name: $r('app.string.Alan'), en_name: '#Alan', icon: $r('app.media.avatar1') },
+  { name: $r('app.string.AQin'), en_name: 'AQin', icon: $r('app.media.avatar1') },
+  { name: $r('app.string.CaiLan'), en_name: 'CaiLan', icon: $r('app.media.avatar2') },
+  { name: $r('app.string.Deng'), en_name: 'Deng', icon: $r('app.media.avatar3') },
+  { name: $r('app.string.excel'), en_name: 'excel', icon: $r('app.media.avatar2') },
+  { name: $r('app.string.FanYi'), en_name: 'FanYi', icon: $r('app.media.avatar2') },
+  { name: $r('app.string.FenFen'), en_name: 'FenFen', icon: $r('app.media.avatar2') },
+  { name: $r('app.string.ge'), en_name: 'ge', icon: $r('app.media.avatar4') },
+  { name: $r('app.string.ge'), en_name: 'Idea', icon: $r('app.media.avatar4') },
+  { name: $r('app.string.FenFen'), en_name: 'jack', icon: $r('app.media.avatar1') },
+  { name: $r('app.string.CaiLan'), en_name: 'kat', icon: $r('app.media.avatar1') },
+  { name: $r('app.string.LiX'), en_name: 'lily', icon: $r('app.media.avatar11') },
+  { name: $r('app.string.LiX'), en_name: 'LiX', icon: $r('app.media.avatar8') },
+  { name: $r('app.string.Ma'), en_name: 'Ma', icon: $r('app.media.avatar11') },
+  { name: $r('app.string.Ma'), en_name: 'nie', icon: $r('app.media.avatar5') },
+  { name: $r('app.string.FanYi'), en_name: 'tom', icon: $r('app.media.avatar10') },
+  { name: $r('app.string.Deng'), en_name: 'Zhang', icon: $r('app.media.avatar6') },
+  { name: $r('app.string.CaiLan'), en_name: 'Wang', icon: $r('app.media.avatar7') },
+  { name: $r('app.string.CaiLan'), en_name: 'Zo', icon: $r('app.media.avatar9') },
+];
+
+const Alphabets: string[] = ['#', '☆', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
+  'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+
+export { ContactsDataInterface, ContactsListData, Alphabets };
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/viewmodel/ConversationViewModel.ets b/MultiDeviceCommunication/features/home/src/main/ets/viewmodel/ConversationViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..687cb7f78f7bd4007ae483cc2ad717ae7f6f520a
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/viewmodel/ConversationViewModel.ets
@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Want, common } from '@kit.AbilityKit';
+import { BusinessError } from '@kit.BasicServicesKit';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { Logger } from '@ohos/base';
+
+interface ConversationDataInterface {
+  name: Resource
+  msg: Resource
+  time: ResourceStr
+  icon: Resource
+};
+
+const ConversationListData: ConversationDataInterface[] = [
+  { name: $r('app.string.Alan'), msg: $r('app.string.okay'), time: '13:55', icon: $r('app.media.avatar1') },
+  { name: $r('app.string.CaiLan'), msg: $r('app.string.okay'), time: '13:55', icon: $r('app.media.avatar2') },
+  { name: $r('app.string.FenFen'), msg: $r('app.string.okay'), time: '12:00', icon: $r('app.media.avatar11') },
+  { name: $r('app.string.FenFen'), msg: $r('app.string.okay'), time: '08:00', icon: $r('app.media.avatar4') },
+  { name: $r('app.string.FanYi'), msg: $r('app.string.okay'), time: $r('app.string.yesterday'), icon: $r('app.media.avatar5') },
+  { name: $r('app.string.Deng'), msg: $r('app.string.okay'), time: $r('app.string.yesterday'), icon: $r('app.media.avatar6') },
+  { name: $r('app.string.CaiLan'), msg: $r('app.string.okay'), time: $r('app.string.yesterday'), icon: $r('app.media.avatar7') },
+  { name: $r('app.string.Alan'), msg: $r('app.string.okay'), time: $r('app.string.yesterday'), icon: $r('app.media.avatar8') },
+  { name: $r('app.string.Alan'), msg: $r('app.string.okay'), time: $r('app.string.yesterday'), icon: $r('app.media.avatar9') },
+  { name: $r('app.string.FanYi'), msg: $r('app.string.okay'), time: $r('app.string.yesterday'), icon: $r('app.media.avatar10') },
+  { name: $r('app.string.Deng'), msg: $r('app.string.okay'), time: $r('app.string.yesterday'), icon: $r('app.media.avatar11') },
+  { name: $r('app.string.ge'), msg: $r('app.string.okay'), time: $r('app.string.yesterday'), icon: $r('app.media.avatar1') },
+];
+
+class ConversationViewModel {
+  public startAppletAbility(context: common.UIAbilityContext, index: number): void {
+    const want: Want = {
+      bundleName: getContext(context).applicationInfo.name,
+      abilityName: 'AppletAbility',
+      parameters: {
+        position: index
+      }
+    };
+    try {
+      context.startAbility(want, (err: BusinessError) => {
+        if (err.code) {
+          Logger.error(`startAbility failed, code is ${err.code}, message is ${err.message}`);
+        }
+      });
+    } catch (error) {
+      hilog.error(0x00004, 'ConversationViewModel', '%{public}s', error);
+    }
+  }
+
+  public startDocumentAbility(context: common.UIAbilityContext, index: number): void {
+    const want: Want = {
+      bundleName: getContext(context).applicationInfo.name,
+      abilityName: 'DocumentAbility',
+      parameters: {
+        position: index
+      }
+    };
+    try {
+      context.startAbility(want, (err: BusinessError) => {
+        if (err.code) {
+          Logger.error(`startAbility failed, code is ${err.code}, message is ${err.message}`);
+        }
+      });
+    } catch (error) {
+      Logger.error(`startAbility failed,  message is ${error}`);
+    }
+  }
+}
+
+export { ConversationDataInterface, ConversationListData, ConversationViewModel };
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/viewmodel/SocialCircleViewModel.ets b/MultiDeviceCommunication/features/home/src/main/ets/viewmodel/SocialCircleViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a66859ca05d0c722ec25730881fb3a986081091d
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/viewmodel/SocialCircleViewModel.ets
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const SocialCirclePictures: Resource[] = [
+  $r('app.media.social_circle1'),
+  $r('app.media.social_circle2'),
+  $r('app.media.social_circle3'),
+  $r('app.media.social_circle4'),
+  $r('app.media.social_circle5'),
+  $r('app.media.social_circle6'),
+  $r('app.media.social_circle7'),
+  $r('app.media.social_circle8'),
+  $r('app.media.social_circle9'),
+];
+
+export { SocialCirclePictures };
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/views/Contacts/ContactsItem.ets b/MultiDeviceCommunication/features/home/src/main/ets/views/Contacts/ContactsItem.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2ed4f15fb623118249eab221983200b44a7d6620
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/views/Contacts/ContactsItem.ets
@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants, BreakpointConstants } from '@ohos/base';
+
+@Component
+export struct ContactsItem {
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+  private name?: Resource;
+  private icon?: Resource;
+
+  build() {
+    Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
+      Column() {
+        Image(this.icon)
+          .height($r('app.float.avatar_image_size'))
+          .width($r('app.float.avatar_image_size'))
+      }
+      .width($r('app.float.avatar_image_size'))
+      .margin({ left: $r('app.float.icon_margin_two'), right: $r('app.float.icon_margin_one') })
+
+      Column() {
+        Text(this.name)
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+          .fontWeight(BaseConstants.FONT_WEIGHT_FIVE)
+          .lineHeight($r('app.float.text_line_height_two'))
+          .fontFamily(BaseConstants.FONT_FAMILY_MEDIUM)
+      }
+      .flexShrink(BaseConstants.FLEX_SHRINK_ONE)
+      .margin({ left: $r('app.float.icon_margin_one') })
+
+      Blank()
+    }
+    .height(BaseConstants.FULL_HEIGHT)
+    .width(BaseConstants.FULL_WIDTH)
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationDetailBottom.ets b/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationDetailBottom.ets
new file mode 100644
index 0000000000000000000000000000000000000000..615c172d1bc92435841d47117844977da3d52a8a
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationDetailBottom.ets
@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants } from '@ohos/base/src/main/ets/constants/BaseConstants';
+import { StandardIcon } from '@ohos/base/src/main/ets/views/image/StandardIcon';
+import { HomeConstants } from '../../constants/HomeConstants';
+
+@Component
+export struct ConversationDetailBottom {
+  @Builder CustomKeyboardBuilder(){}
+  build() {
+    Flex({ alignItems: ItemAlign.Center }) {
+      Column() {
+        StandardIcon({ icon: $r('app.media.ic_public_emoji') })
+      }
+      .flexBasis(HomeConstants.FLEX_BASIS_AUTO)
+      .padding({
+        right: $r('app.float.conversation_detail_bottom_padding'),
+        left: $r('app.float.conversation_detail_bottom_padding'),
+      })
+
+      Blank()
+      Column() {
+        TextArea()
+          .placeholderColor($r('app.color.text_input_default_color'))
+          .caretColor($r('app.color.text_input_default_care_color'))
+          .backgroundColor($r('app.color.text_input_default_background_color'))
+          .borderRadius(HomeConstants.CONVERSATION_DETAIL_BOTTOM_TEXT_RADIUS)
+          .flexGrow(BaseConstants.FLEX_GROW_ONE)
+          .padding({ right: $r('app.float.conversation_detail_bottom_text_padding') })
+          .backgroundColor(Color.White)
+          .enableKeyboardOnFocus(false)
+          .customKeyboard(this.CustomKeyboardBuilder())
+      }
+
+      Column() {
+        StandardIcon({ icon: $r('app.media.ic_public_add_norm') })
+      }
+      .padding({
+        right: $r('app.float.conversation_detail_bottom_padding'),
+        left: $r('app.float.conversation_detail_bottom_padding'),
+      })
+    }
+    .width(BaseConstants.FULL_WIDTH)
+    .height($r('app.float.conversation_detail_bottom_height'))
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationDetailItem.ets b/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationDetailItem.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2f78a11ff3e63d71c74e4dffc8734d4499cb000d
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationDetailItem.ets
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HomeConstants } from '../../constants/HomeConstants';
+import { MessageBubble } from '../MessageBubble';
+
+@Component
+export default struct ConversationDetailItem {
+  @Link currentFeatureIndex: number;
+  @Link receivedName: string;
+  private isReceived: boolean = !HomeConstants.IS_RECEIVED;
+  private content: ResourceStr = '';
+  private isAppletMsg?: boolean;
+  private isDocumentMsg?: boolean;
+
+  build() {
+    Flex({ justifyContent: FlexAlign.End, alignItems: ItemAlign.End }) {
+      MessageBubble({
+        receivedName: $receivedName,
+        currentFeatureIndex: $currentFeatureIndex,
+        isReceived: this.isReceived,
+        content: this.content,
+        isAppletMsg: this.isAppletMsg,
+        isDocumentMsg: this.isDocumentMsg
+      })
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationDetailNone.ets b/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationDetailNone.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1028d08c19940a0e6181f51c5e5ab02a1d46393f
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationDetailNone.ets
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants } from '@ohos/base/src/main/ets/constants/BaseConstants';
+import { deviceInfo } from '@kit.BasicServicesKit';
+
+@Component
+export default struct ConversationDetailNone {
+  build() {
+    NavDestination() {
+      Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+        Image($r('app.media.ic_none_message'))
+          .width($r('app.float.conversation_none_icon_width'))
+          .height($r('app.float.conversation_none_icon_height'))
+      }
+      .backgroundColor($r('app.color.conversation_none_icon_bg_color'))
+      .height(BaseConstants.FULL_HEIGHT)
+    }
+    .padding({
+      top: deviceInfo.deviceType === BaseConstants.DEVICE_2IN1 ? $r('app.float.zero') : $r('app.float.device_padding_top')
+    })
+    .hideTitleBar(true)
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationDetailTopSearch.ets b/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationDetailTopSearch.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f847d4741ef3804db63211704ffb93a149bc344c
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationDetailTopSearch.ets
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants, BreakpointConstants, StandardIcon } from '@ohos/base';
+import { HomeConstants } from '../../constants/HomeConstants';
+import { deviceInfo } from '@kit.BasicServicesKit';
+
+@Component
+export struct ConversationDetailTopSearch {
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+  @Link currentConversationUserName: string;
+  @Consume('pageInfo') pageInfo: NavPathStack;
+
+  build() {
+    Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
+      StandardIcon({ icon: $r('app.media.ic_public_back') })
+        .onClick(() => {
+          if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+            this.pageInfo.clear();
+          } else if (this.pageInfo.size() === 1) {
+            this.pageInfo.clear();
+            this.pageInfo.pushPath({ name: 'ConversationDetailNone' });
+          } else {
+            this.pageInfo.clear();
+            this.pageInfo.pushPath({ name: 'ConversationDetailNone' });
+          }
+        })
+      Text(this.currentConversationUserName || HomeConstants.CONVERSATION_DETAIL_TOP_TITLE)
+        .fontWeight(BaseConstants.FONT_WEIGHT_FIVE)
+        .fontSize(BaseConstants.FONT_SIZE_EIGHTEEN)
+        .fontFamily(BaseConstants.FONT_FAMILY_MEDIUM)
+        .fontColor($r('app.color.conversation_default_text_color'))
+      StandardIcon({ icon: $r('app.media.ic_public_more') })
+    }
+    .width(BaseConstants.FULL_WIDTH)
+    .height(BaseConstants.FULL_HEIGHT)
+    .padding({ left: $r('app.float.icon_margin_two'), right: $r('app.float.icon_margin_two'),top: deviceInfo.deviceType === BaseConstants.DEVICE_2IN1 ? $r('app.float.zero') : $r('app.float.device_padding_top') })
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationItem.ets b/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationItem.ets
new file mode 100644
index 0000000000000000000000000000000000000000..93752683102512ff26333794f3ce4c246478e029
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/views/Conversation/ConversationItem.ets
@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants, BreakpointConstants } from '@ohos/base';
+import { HomeConstants } from '../../constants/HomeConstants';
+
+@Component
+export struct ConversationItem {
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+  private name?: Resource;
+  private msg?: Resource;
+  private time?: ResourceStr;
+  private icon?: Resource;
+
+  build() {
+    Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
+      Column() {
+        Image(this.icon)
+          .height($r('app.float.avatar_image_size'))
+          .width($r('app.float.avatar_image_size'))
+      }
+      .width($r('app.float.avatar_image_size'))
+      .margin({ left: $r('app.float.icon_margin_two'), right: $r('app.float.icon_margin_one') })
+
+      Flex({ direction: FlexDirection.Column,justifyContent:FlexAlign.Center }) {
+        Text(this.name)
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+          .fontWeight(BaseConstants.FONT_WEIGHT_FIVE)
+          .lineHeight($r('app.float.text_line_height_two'))
+          .fontFamily(BaseConstants.FONT_FAMILY_MEDIUM)
+        Text(this.msg)
+          .maxLines(HomeConstants.CONVERSATION_DETAIL_MAX_LINE)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+          .fontSize(BaseConstants.FONT_SIZE_FOURTEEN)
+          .fontWeight(BaseConstants.FONT_WEIGHT_FOUR)
+          .lineHeight($r('app.float.text_line_height_one'))
+          .fontFamily(BaseConstants.FONT_FAMILY_NORMAL)
+          .fontColor(Color.Grey)
+          .width(BaseConstants.FULL_WIDTH)
+      }
+      .flexShrink(BaseConstants.FLEX_SHRINK_ONE)
+      .margin({ left: $r('app.float.icon_margin_one') })
+
+      Blank()
+      Column() {
+        Text(this.time)
+          .fontWeight(BaseConstants.FONT_WEIGHT_FOUR)
+          .fontSize(BaseConstants.FONT_SIZE_TEN)
+          .fontColor(Color.Grey)
+          .fontFamily(BaseConstants.FONT_FAMILY_NORMAL)
+          .width($r('app.float.conversation_list_time_width'))
+      }
+      .flexBasis(HomeConstants.FLEX_BASIS_AUTO)
+      .margin({ left: $r('app.float.icon_margin_two'), right: $r('app.float.icon_margin_one') })
+    }
+    .width(BaseConstants.FULL_WIDTH)
+    .padding($r('app.float.conversation_list_time_padding'))
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/views/HomeTab.ets b/MultiDeviceCommunication/features/home/src/main/ets/views/HomeTab.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ea9db717a3673ea4f54b35846ff205820afc86cd
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/views/HomeTab.ets
@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants, BreakpointConstants } from '@ohos/base';
+import { ButtonInfo } from '../viewmodel/BottomTabViewModel';
+import { TabInfoModel } from '@ohos/base';
+import { HomeConstants } from '../constants/HomeConstants';
+
+@Component
+export struct HomeTab {
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+  @Link currentPageIndex: number;
+
+  build() {
+    Column() {
+      Tabs({
+        barPosition: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarPosition.Start : BarPosition.End
+      }) {
+        TabContent()
+          .tabBar(this.BottomNavigation(ButtonInfo[HomeConstants.TAB_MESSAGE_INDEX]))
+        TabContent()
+          .tabBar(this.BottomNavigation(ButtonInfo[HomeConstants.TAB_CONTACTS_INDEX]))
+        TabContent()
+          .tabBar(this.BottomNavigation(ButtonInfo[HomeConstants.TAB_SOCIAL_CIRCLE_INDEX]))
+        TabContent()
+          .tabBar(this.BottomNavigation(ButtonInfo[HomeConstants.TAB_ME_INDEX]))
+      }
+      .vertical(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG)
+      .height(BaseConstants.FULL_HEIGHT)
+      .margin({
+        top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? '' : $r('app.float.home_tab_top_lg'),
+        bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? '' : $r('app.float.home_tab_bottom_lg')
+      })
+    }
+    .backgroundColor($r('app.color.background_color_grey_two'))
+    .expandSafeArea([], [SafeAreaEdge.BOTTOM])
+  }
+
+  @Builder
+  BottomNavigation(button: TabInfoModel) {
+    Column() {
+      Image(this.currentPageIndex === button.index ? button.selectImg : button.img)
+        .objectFit(ImageFit.Contain)
+        .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_image_size_lg') : $r('app.float.main_image_size'))
+        .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_image_size_lg') : $r('app.float.main_image_size'))
+      Text(button.title)
+        .fontColor(this.currentPageIndex === button.index ? $r('app.color.focus_color') : Color.Black)
+        .opacity(this.currentPageIndex === button.index ? BaseConstants.FULL_OPACITY : BaseConstants.SIXTY_OPACITY)
+        .fontWeight(BaseConstants.FONT_WEIGHT_FIVE)
+        .textAlign(TextAlign.Center)
+        .fontSize($r('app.float.micro_font_size'))
+        .lineHeight($r('app.float.text_line_height_three'))
+        .fontFamily(BaseConstants.FONT_FAMILY_MEDIUM)
+        .margin({ top: $r('app.float.document_text_top') })
+    }
+
+    .alignItems(HorizontalAlign.Center)
+    .justifyContent(FlexAlign.Center)
+    .onClick(() => {
+      this.currentPageIndex = button.index;
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/views/MessageBubble.ets b/MultiDeviceCommunication/features/home/src/main/ets/views/MessageBubble.ets
new file mode 100644
index 0000000000000000000000000000000000000000..0bdb2404d60bc82588e1e1b08e10c9663336a47b
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/views/MessageBubble.ets
@@ -0,0 +1,178 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants, BreakpointConstants, IntroduceText, NormalText } from '@ohos/base'
+import { HomeConstants } from '../constants/HomeConstants';
+import { ConversationDataInterface, ConversationListData } from '../viewmodel/ConversationViewModel';
+
+@Component
+export struct MessageBubble {
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+  @Link receivedName: Resource;
+  @Link currentFeatureIndex: number;
+  private isReceived: boolean = !HomeConstants.IS_RECEIVED;
+  private content: ResourceStr = "";
+  private isAppletMsg?: boolean;
+  private isDocumentMsg?: boolean;
+  avatar1: Resource = $r('app.media.avatar1');
+  avatar2: Resource = $r('app.media.avatar7');
+
+  build() {
+    Column() {
+      Flex({ justifyContent: this.isReceived ? FlexAlign.Start : FlexAlign.End, direction: FlexDirection.Row }) {
+        if (this.isReceived) {
+          Image(ConversationListData.find((item) => item.name === this.receivedName)?.icon || this.avatar1)
+            .width($r('app.float.avatar_image_size'))
+            .height($r('app.float.avatar_image_size'))
+            .flexShrink(BaseConstants.FLEX_SHRINK_ZERO)
+        }
+        Column() {
+          Stack({ alignContent: this.isReceived ? Alignment.TopStart : Alignment.TopEnd }) {
+            Path()
+              .commands('M-10 1 L0 18 L32 1 Z')
+              .fillOpacity(HomeConstants.CONVERSATION_DETAIL_FILL_OPACITY)
+              .stroke(Color.White)
+              .strokeWidth(HomeConstants.CONVERSATION_DETAIL_STROKE_WIDTH)
+              .fill(Color.White)
+              .visibility(this.isReceived ? Visibility.Visible : Visibility.None)
+            Path()
+              .commands('M23 1 L0 28 L-10 1 Z')
+              .fillOpacity(HomeConstants.CONVERSATION_DETAIL_FILL_OPACITY)
+              .stroke(Color.White)
+              .strokeWidth(HomeConstants.CONVERSATION_DETAIL_STROKE_WIDTH)
+              .fill(Color.White)
+              .visibility(this.isReceived ? Visibility.None : Visibility.Visible)
+              .zIndex(HomeConstants.CONTACTS_DETAIL_AVATAR_Z_INDEX)
+              .margin({ right: $r('app.float.conversation_detail_path_right') })
+            Column() {
+              this.MessageContent()
+            }
+            .padding({
+              left: $r('app.float.path_column_left'),
+              right: $r('app.float.path_column_right'),
+              top: $r('app.float.path_column_top'),
+              bottom: $r('app.float.path_column_bottom')
+            })
+            .backgroundColor(Color.White)
+            .borderRadius(HomeConstants.PATH_BORDER_RADIUS)
+          }
+          .padding({
+            top: $r('app.float.path_top'),
+            left: $r('app.float.path_left'),
+            right: $r('app.float.path_right'),
+            bottom: $r('app.float.path_bottom')
+          })
+          .width(BaseConstants.FULL_WIDTH)
+        }
+        .width(BaseConstants.FULL_WIDTH)
+
+        if (!this.isReceived) {
+          Image(this.avatar2)
+            .width($r('app.float.icon_width'))
+            .height($r('app.float.icon_height'))
+            .flexShrink(BaseConstants.FLEX_SHRINK_ZERO)
+        }
+      }
+    }
+    .margin({ left: $r('app.float.message_bubble_left'), right: $r('app.float.message_bubble_right') })
+  }
+
+  @Builder
+  MessageContent() {
+    if (this.isAppletMsg) {
+      Column() {
+        Row() {
+          Image($r('app.media.ic_tea'))
+            .height($r('app.float.applet_icon_size'))
+            .width($r('app.float.applet_icon_size'))
+            .margin({ right: $r('app.float.applet_icon_right') })
+          Text(HomeConstants.APPLET_TITLE)
+            .fontFamily(BaseConstants.FONT_FAMILY_NORMAL)
+            .fontSize(BaseConstants.FONT_SIZE_TWELVE)
+            .fontColor($r('app.color.conversation_default_text_color'))
+            .textAlign(TextAlign.Start)
+            .fontWeight(BaseConstants.FONT_WEIGHT_FOUR)
+        }
+        .margin({ bottom: $r('app.float.applet_title_bottom') })
+
+        Text(this.content)
+          .fontFamily(BaseConstants.FONT_FAMILY_NORMAL)
+          .fontSize(BaseConstants.FONT_SIZE_TWELVE)
+          .fontColor($r('app.color.conversation_default_text_color'))
+          .textAlign(TextAlign.Start)
+          .fontWeight(BaseConstants.FONT_WEIGHT_FOUR)
+          .margin({ bottom: $r('app.float.applet_introduce_bottom') })
+          .copyOption(CopyOptions.LocalDevice)
+        Flex() {
+        }
+        .height($r('app.float.applet_image_height'))
+        .width($r('app.float.applet_image_width'))
+        .backgroundImage($r('app.media.picture_applet_link'))
+        .backgroundImageSize({ width: $r('app.float.applet_image_width'), height: $r('app.float.applet_image_height') })
+        .constraintSize({ maxWidth: BaseConstants.FULL_WIDTH })
+        .margin({ bottom: $r('app.float.applet_image_bottom') })
+
+        Text(HomeConstants.APPLET_DESCRIBE)
+          .fontFamily(BaseConstants.FONT_FAMILY_NORMAL)
+          .fontSize(BaseConstants.FONT_SIZE_TEN)
+          .fontColor($r('app.color.background_color_grey_three'))
+          .textAlign(TextAlign.Start)
+          .fontWeight(BaseConstants.FONT_WEIGHT_FOUR)
+      }
+      .alignItems(HorizontalAlign.Start)
+    } else if (this.isDocumentMsg) {
+      Column() {
+        Row() {
+          NormalText({ data: this.content })
+            .margin({ right: $r('app.float.applet_icon_right') })
+            .width($r('app.float.document_text_width'))
+          Image($r('app.media.ic_PDF'))
+            .height($r('app.float.document_icon_size'))
+            .width($r('app.float.document_icon_size'))
+            .margin({ right: $r('app.float.document_icon_right') })
+        }
+        .margin({ bottom: $r('app.float.document_icon_bottom') })
+
+        IntroduceText({ data: HomeConstants.DOCUMENT_SIZE, fontColor: $r('app.color.background_color_grey_three') })
+          .margin({ bottom: $r('app.float.document_text_bottom') })
+        Divider()
+          .color($r('app.color.divider_background_color'))
+          .strokeWidth(HomeConstants.DOCUMENT_DIVIDER_WIDTH).margin({ bottom: $r('app.float.divider_bottom') })
+        Row() {
+          Image($r('app.media.ic_file'))
+            .width($r('app.float.document_small_icon_size'))
+            .height($r('app.float.document_small_icon_size'))
+            .margin({ right: $r('app.float.document_small_icon_right') })
+          IntroduceText({
+            data: HomeConstants.DOCUMENT_INTRODUCE,
+            fontColor: $r('app.color.background_color_grey_three')
+          })
+            .margin({ top: $r('app.float.document_introduce_top') })
+        }
+      }
+      .alignItems(HorizontalAlign.Start)
+      .width($r('app.float.document_width'))
+      .margin({ bottom: $r('app.float.document_bottom') })
+    } else {
+      Text(this.content)
+        .fontSize(BaseConstants.FONT_SIZE_TWELVE)
+        .fontFamily(BaseConstants.FONT_FAMILY_NORMAL)
+        .fontWeight(BaseConstants.FONT_WEIGHT_FOUR)
+        .lineHeight($r('app.float.conversation_default_text_line'))
+        .fontColor($r('app.color.conversation_default_text_color'))
+        .copyOption(CopyOptions.LocalDevice)
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/ets/views/common/HomeTopSearch.ets b/MultiDeviceCommunication/features/home/src/main/ets/views/common/HomeTopSearch.ets
new file mode 100644
index 0000000000000000000000000000000000000000..5e010ac7a64ade89c0afa75463458337b7c39e5f
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/ets/views/common/HomeTopSearch.ets
@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants, BreakpointConstants, StandardIcon } from '@ohos/base';
+import { HomeConstants } from '../../constants/HomeConstants';
+import { deviceInfo } from '@kit.BasicServicesKit';
+
+@Component
+export struct HomeTopSearch {
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+  @Prop title: Resource;
+
+  build() {
+    Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
+      Column() {
+        Text(this.title)
+          .fontWeight(BaseConstants.FONT_WEIGHT_FIVE)
+          .fontSize(BaseConstants.FONT_SIZE_TWENTY_FOUR)
+          .fontFamily(BaseConstants.FONT_FAMILY_MEDIUM)
+          .width(BaseConstants.FULL_WIDTH)
+      }
+      .flexBasis(HomeConstants.SEARCH_TEXT_FLEX_BASIS)
+
+      if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+        Column() {
+          this.searchBar()
+        }
+        .flexBasis(HomeConstants.FLEX_BASIS_AUTO)
+        .margin({ right: $r('app.float.icon_margin_two') })
+      } else {
+        Blank()
+        StandardIcon({ icon: $r('app.media.ic_public_search') })
+          .margin({ right: $r('app.float.phone_icon_right') })
+      }
+      Column() {
+        StandardIcon({ icon: $r('app.media.ic_public_add_norm') })
+          .flexBasis(HomeConstants.FLEX_BASIS_AUTO)
+      }
+      .margin({ right: $r('app.float.phone_icon_right') })
+    }
+    .width(BaseConstants.FULL_WIDTH)
+    .height(BaseConstants.FULL_HEIGHT)
+    .backgroundColor(Color.White)
+    .padding({ left: $r('app.float.phone_icon_left'),top: deviceInfo.deviceType === BaseConstants.DEVICE_2IN1 ? $r('app.float.zero') : $r('app.float.device_padding_top') })
+  }
+
+  @Builder
+  searchBar() {
+    Row() {
+      Stack({ alignContent: Alignment.Start }) {
+        TextInput({ placeholder: HomeConstants.SEARCH_TEXT_INPUT })
+          .placeholderFont({
+            size: $r('app.float.text_input_default_font'),
+            weight: FontWeight.Normal
+          })
+          .placeholderColor($r('app.color.text_input_default_color'))
+          .height($r('app.float.text_input_height'))
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+          .padding({
+            left: $r('app.float.text_input_left'),
+            right: $r('app.float.text_input_right')
+          })
+          .width(BaseConstants.FULL_WIDTH)
+          .enableKeyboardOnFocus(HomeConstants.ENABLE_KEY_BOARD_ON_FOCUS)
+          .backgroundColor($r('app.color.text_input_default_background_color'))
+          .caretColor($r('app.color.text_input_default_care_color'))
+
+        Image($r('app.media.ic_public_search'))
+          .width($r('app.float.small_icon_width'))
+          .height($r('app.float.small_icon_height'))
+          .margin({ left: $r('app.float.add_icon_left') })
+      }
+      .alignSelf(ItemAlign.Center)
+      .layoutWeight(BaseConstants.LAYOUT_WEIGHT_ONE)
+    }
+    .justifyContent(FlexAlign.Center)
+    .width(BaseConstants.FULL_WIDTH)
+    .height(BaseConstants.FULL_HEIGHT)
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/module.json5 b/MultiDeviceCommunication/features/home/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7a40a436c346c4b3523266ab801e76f4d38bcec0
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/module.json5
@@ -0,0 +1,11 @@
+{
+  "module": {
+    "name": "home",
+    "type": "har",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/element/color.json b/MultiDeviceCommunication/features/home/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..0599ab4cdb3a803b642b7becfcd7c9e712e537d0
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/element/color.json
@@ -0,0 +1,80 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "focus_color",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "background_color_grey",
+      "value": "#F6F6F6"
+    },
+    {
+      "name": "background_color_grey_two",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "background_color_grey_three",
+      "value": "#8A9097"
+    },
+    {
+      "name": "divider_background_color",
+      "value": "#E6E6E6"
+    },
+    {
+      "name": "background_color_pink",
+      "value": "#FCF7F6"
+    },
+    {
+      "name": "background_color_icon",
+      "value": "#F0A6C3"
+    },
+    {
+      "name": "font_color_one",
+      "value": "#000000"
+    },
+    {
+      "name": "font_color_black_two",
+      "value": "#182431"
+    },
+    {
+      "name": "line_color",
+      "value": "#E7E7E7"
+    },
+    {
+      "name": "tab_clicked_color",
+      "value": "#1698CE"
+    },
+    {
+      "name": "tab_unclicked_color",
+      "value": "#6B6B6B"
+    },
+    {
+      "name": "text_input_default_color",
+      "value": "#99000000"
+    },
+    {
+      "name": "text_input_default_background_color",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "text_input_default_care_color",
+      "value": "#007DFF"
+    },
+    {
+      "name": "conversation_none_icon_bg_color",
+      "value": "#F6F6F6"
+    },
+    {
+      "name": "conversation_default_text_color",
+      "value": "#182431"
+    },
+    {
+      "name": "conversation_clicked_bg_color",
+      "value": "#33D8D8D8"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/element/float.json b/MultiDeviceCommunication/features/home/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..0b7018b2b11e87b38ea6075c20317bf63902efb1
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/element/float.json
@@ -0,0 +1,488 @@
+{
+  "float": [
+    {
+      "name": "micro_font_size",
+      "value": "10fp"
+    },
+    {
+      "name": "icon_height_one",
+      "value": "24vp"
+    },
+    {
+      "name": "icon_width_one",
+      "value": "24vp"
+    },
+    {
+      "name": "icon_margin_one",
+      "value": "12vp"
+    },
+    {
+      "name": "icon_margin_two",
+      "value": "24vp"
+    },
+    {
+      "name": "main_image_size",
+      "value": "22vp"
+    },
+    {
+      "name": "main_image_size_lg",
+      "value": "24vp"
+    },
+    {
+      "name": "avatar_image_size",
+      "value": "40vp"
+    },
+    {
+      "name": "bar_width",
+      "value": "96vp"
+    },
+    {
+      "name": "text_line_height_one",
+      "value": "19fp"
+    },
+    {
+      "name": "text_line_height_three",
+      "value": "14fp"
+    },
+    {
+      "name": "text_line_height_two",
+      "value": "22fp"
+    },
+    {
+      "name": "background_color_grey",
+      "value": "#111111"
+    },
+    {
+      "name": "input_radius_one",
+      "value": "20vp"
+    },
+    {
+      "name": "text_line_height_five",
+      "value": "21fp"
+    },
+    {
+      "name": "smaller_mini_font_size",
+      "value": "11fp"
+    },
+    {
+      "name": "picture_gap",
+      "value": "2vp"
+    },
+    {
+      "name": "home_tab_width",
+      "value": "96vp"
+    },
+    {
+      "name": "home_tab_height",
+      "value": "56vp"
+    },
+    {
+      "name": "home_tab_padding_left",
+      "value": "22vp"
+    },
+    {
+      "name": "home_tab_padding_top",
+      "value": "180vp"
+    },
+    {
+      "name": "home_tab_padding_bottom",
+      "value": "180vp"
+    },
+    {
+      "name": "home_list_width",
+      "value": "22vp"
+    },
+    {
+      "name": "home_tab_font_size",
+      "value": "20fp"
+    },
+    {
+      "name": "font_family_normal",
+      "value": "HarmonyHeiTi"
+    },
+    {
+      "name": "font_family_medium",
+      "value": "HarmonyHeiTi-Medium"
+    },
+    {
+      "name": "font_family_bold",
+      "value": "HarmonyHeiTi-Bold"
+    },
+    {
+      "name": "font_family_semi_bold",
+      "value": "HarmonyHeiTi-SemiBold"
+    },
+    {
+      "name": "font_size_ten",
+      "value": "10fp"
+    },
+    {
+      "name": "font_size_eleven",
+      "value": "11fp"
+    },
+    {
+      "name": "font_size_twelve",
+      "value": "12fp"
+    },
+    {
+      "name": "font_size_fourteen",
+      "value": "14fp"
+    },
+    {
+      "name": "font_size_sixteen",
+      "value": "16fp"
+    },
+    {
+      "name": "font_size_eighteen",
+      "value": "18fp"
+    },
+    {
+      "name": "font_size_twenty",
+      "value": "20fp"
+    },
+    {
+      "name": "font_size_twenty_four",
+      "value": "24fp"
+    },
+    {
+      "name": "font_size_thirty_two",
+      "value": "32fp"
+    },
+    {
+      "name": "icon_height",
+      "value": "40vp"
+    },
+    {
+      "name": "icon_width",
+      "value": "40vp"
+    },
+    {
+      "name": "icon_right",
+      "value": "8vp"
+    },
+    {
+      "name": "user_name_bottom",
+      "value": "6vp"
+    },
+    {
+      "name": "user_message_bottom",
+      "value": "8vp"
+    },
+    {
+      "name": "header_top",
+      "value": "16vp"
+    },
+    {
+      "name": "header_right",
+      "value": "20vp"
+    },
+    {
+      "name": "header_bottom",
+      "value": "16vp"
+    },
+    {
+      "name": "header_left",
+      "value": "24vp"
+    },
+    {
+      "name": "back_icon_top",
+      "value": "19vp"
+    },
+    {
+      "name": "back_icon_left",
+      "value": "26vp"
+    },
+    {
+      "name": "contacts_detail_avatar_height",
+      "value": "124vp"
+    },
+    {
+      "name": "contacts_detail_avatar_top",
+      "value": "84vp"
+    },
+    {
+      "name": "contacts_detail_avatar_border_width",
+      "value": "5vp"
+    },
+    {
+      "name": "contacts_detail_avatar_border_radius",
+      "value": "100"
+    },
+    {
+      "name": "contacts_detail_user_top",
+      "value": "82vp"
+    },
+    {
+      "name": "phone_left",
+      "value": "24vp"
+    },
+    {
+      "name": "phone_icon_right",
+      "value": "24pv"
+    },
+    {
+      "name": "phone_icon_left",
+      "value": "24pv"
+    },
+    {
+      "name": "phone_column_top",
+      "value": "45vp"
+    },
+    {
+      "name": "phone_divider_left",
+      "value": "24vp"
+    },
+    {
+      "name": "phone_divider_right",
+      "value": "24vp"
+    },
+    {
+      "name": "phone_divider_top",
+      "value": "20vp"
+    },
+    {
+      "name": "last_post_left",
+      "value": "24vp"
+    },
+    {
+      "name": "last_post_top",
+      "value": "17vp"
+    },
+    {
+      "name": "images_left",
+      "value": "24vp"
+    },
+    {
+      "name": "images_top",
+      "value": "2vp"
+    },
+    {
+      "name": "images_column_left",
+      "value": "5vp"
+    },
+    {
+      "name": "images_column_right",
+      "value": "5vp"
+    },
+    {
+      "name": "contacts_detail_left",
+      "value": "31vp"
+    },
+    {
+      "name": "contacts_detail_right",
+      "value": "31vp"
+    },
+    {
+      "name": "contacts_detail_column_top",
+      "value": "146vp"
+    },
+    {
+      "name": "alphabet_indexer_right",
+      "value": "16vp"
+    },
+    {
+      "name": "text_input_default_font",
+      "value": "16vp"
+    },
+    {
+      "name": "text_input_height",
+      "value": "40vp"
+    },
+    {
+      "name": "text_input_left",
+      "value": "36vp"
+    },
+    {
+      "name": "text_input_right",
+      "value": "12vp"
+    },
+    {
+      "name": "small_icon_height",
+      "value": "16vp"
+    },
+    {
+      "name": "small_icon_width",
+      "value": "16vp"
+    },
+    {
+      "name": "add_icon_left",
+      "value": "12vp"
+    },
+    {
+      "name": "contacts_item_padding",
+      "value": "3vp"
+    },
+    {
+      "name": "conversation_detail_bottom_padding",
+      "value": "24vp"
+    },
+    {
+      "name": "conversation_detail_bottom_text_padding",
+      "value": "3vp"
+    },
+    {
+      "name": "conversation_detail_bottom_height",
+      "value": "56vp"
+    },
+    {
+      "name": "conversation_none_icon_height",
+      "value": "46vp"
+    },
+    {
+      "name": "conversation_none_icon_width",
+      "value": "50vp"
+    },
+    {
+      "name": "conversation_list_time_padding",
+      "value": "3vp"
+    },
+    {
+      "name": "conversation_list_time_width",
+      "value": "45vp"
+    },
+    {
+      "name": "home_tab_top_lg",
+      "value": "6.5vp"
+    },
+    {
+      "name": "home_tab_bottom_lg",
+      "value": "7.5vp"
+    },
+    {
+      "name": "conversation_detail_path_right",
+      "value": "-10vp"
+    },
+    {
+      "name": "path_column_top",
+      "value": "10vp"
+    },
+    {
+      "name": "path_column_right",
+      "value": "12vp"
+    },
+    {
+      "name": "path_column_bottom",
+      "value": "10vp"
+    },
+    {
+      "name": "path_column_left",
+      "value": "12vp"
+    },
+    {
+      "name": "path_top",
+      "value": "1vp"
+    },
+    {
+      "name": "path_right",
+      "value": "20vp"
+    },
+    {
+      "name": "path_bottom",
+      "value": "22vp"
+    },
+    {
+      "name": "path_left",
+      "value": "20vp"
+    },
+    {
+      "name": "message_bubble_left",
+      "value": "15vp"
+    },
+    {
+      "name": "message_bubble_right",
+      "value": "16vp"
+    },
+    {
+      "name": "applet_icon_size",
+      "value": "16vp"
+    },
+    {
+      "name": "applet_icon_right",
+      "value": "10vp"
+    },
+    {
+      "name": "applet_title_bottom",
+      "value": "7vp"
+    },
+    {
+      "name": "applet_introduce_bottom",
+      "value": "8vp"
+    },
+    {
+      "name": "applet_image_height",
+      "value": "138vp"
+    },
+    {
+      "name": "applet_image_width",
+      "value": "186vp"
+    },
+    {
+      "name": "applet_image_bottom",
+      "value": "6vp"
+    },
+    {
+      "name": "document_text_width",
+      "value": "132vp"
+    },
+    {
+      "name": "document_icon_size",
+      "value": "36vp"
+    },
+    {
+      "name": "document_icon_right",
+      "value": "11vp"
+    },
+    {
+      "name": "document_icon_bottom",
+      "value": "4vp"
+    },
+    {
+      "name": "document_text_top",
+      "value": "4vp"
+    },
+    {
+      "name": "document_text_bottom",
+      "value": "10vp"
+    },
+    {
+      "name": "divider_bottom",
+      "value": "1vp"
+    },
+    {
+      "name": "document_small_icon_size",
+      "value": "12vp"
+    },
+    {
+      "name": "document_small_icon_right",
+      "value": "6vp"
+    },
+    {
+      "name": "document_introduce_top",
+      "value": "-2vp"
+    },
+    {
+      "name": "document_width",
+      "value": "180vp"
+    },
+    {
+      "name": "document_bottom",
+      "value": "-7vp"
+    },
+    {
+      "name": "conversation_default_text_line",
+      "value": "21vp"
+    },
+    {
+      "name": "zero",
+      "value": "0vp"
+    },
+    {
+      "name": "tab_content_pb",
+      "value": "28vp"
+    },
+    {
+      "name": "device_padding_top",
+      "value": "36vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/element/string.json b/MultiDeviceCommunication/features/home/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..cdcacc4cc093443781952bbe2044b0da2a62c6ba
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/element/string.json
@@ -0,0 +1,116 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "Message",
+      "value": "消息"
+    },
+    {
+      "name": "Contacts",
+      "value": "通讯录"
+    },
+    {
+      "name": "SocialCircle",
+      "value": "朋友圈"
+    },
+    {
+      "name": "Me",
+      "value": "我的"
+    },
+    {
+      "name": "news",
+      "value": "最新动态"
+    },
+    {
+      "name": "group",
+      "value": "群组"
+    },
+    {
+      "name": "card",
+      "value": "名片夹"
+    },
+    {
+      "name": "Alan",
+      "value": "阿兰"
+    },
+    {
+      "name": "AQin",
+      "value": "AQin"
+    },
+    {
+      "name": "CaiLan",
+      "value": "菜篮"
+    },
+    {
+      "name": "Deng",
+      "value": "邓双双"
+    },
+    {
+      "name": "excel",
+      "value": "excel教程"
+    },
+    {
+      "name": "FanYi",
+      "value": "翻译"
+    },
+    {
+      "name": "FenFen",
+      "value": "芬芬"
+    },
+    {
+      "name": "ge",
+      "value": "哥白尼"
+    },
+    {
+      "name": "LiX",
+      "value": "李小二"
+    },
+    {
+      "name": "Ma",
+      "value": "马老师"
+    },
+    {
+      "name": "milk",
+      "value": "芬芬邀请你喝奶茶啦"
+    },
+    {
+      "name": "Speed",
+      "value": "请你喝奶茶，快点单吧！！速度速度，就差你了"
+    },
+    {
+      "name": "happy",
+      "value": "哈哈，今天有什么喜事说来听听"
+    },
+    {
+      "name": "plan",
+      "value": "市场部2023年新产品宣传规划"
+    },
+    {
+      "name": "jack",
+      "value": "这是明天会议的资料，请发给Jack，让他确认"
+    },
+    {
+      "name": "ok",
+      "value": "好的，收到"
+    },
+    {
+      "name": "okay",
+      "value": "好的，我明天过去"
+    },
+    {
+      "name": "yesterday",
+      "value": "昨天"
+    },
+    {
+      "name": "document",
+      "value": "文档"
+    },
+    {
+      "name": "search",
+      "value": "搜索..."
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar1.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar1.png
new file mode 100644
index 0000000000000000000000000000000000000000..efa57aa81eac396dcbbd45e959c09c3b3974c0d1
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar1.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar10.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar10.png
new file mode 100644
index 0000000000000000000000000000000000000000..da9def68fd71a5279da359b8e4745df83f16b47c
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar10.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar11.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar11.png
new file mode 100644
index 0000000000000000000000000000000000000000..7228b12dda3f4c692a7d277e8d5dbff210b2df3e
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar11.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar2.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar2.png
new file mode 100644
index 0000000000000000000000000000000000000000..3129969b1f6ee82a44e9e1704d78f42a08f13055
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar2.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar3.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar3.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff61ad5ff633a05e8afdcf3d05278225019c1f02
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar3.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar4.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar4.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc0ce9b330540a4e28c57a93ee206787e1684607
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar4.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar5.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar5.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a9b663f3e42a8cede4a97083bcf5d42c76e473d
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar5.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar6.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar6.png
new file mode 100644
index 0000000000000000000000000000000000000000..7228b12dda3f4c692a7d277e8d5dbff210b2df3e
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar6.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar7.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar7.png
new file mode 100644
index 0000000000000000000000000000000000000000..d2c38a5575ee3a1bcaaca76a6320860436849fba
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar7.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar8.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar8.png
new file mode 100644
index 0000000000000000000000000000000000000000..da9def68fd71a5279da359b8e4745df83f16b47c
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar8.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar9.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar9.png
new file mode 100644
index 0000000000000000000000000000000000000000..d2c38a5575ee3a1bcaaca76a6320860436849fba
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/avatar9.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_PDF.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_PDF.png
new file mode 100644
index 0000000000000000000000000000000000000000..467d75e0178f4471001675c8c3e9bee9efe303e9
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_PDF.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_file.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_file.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f04ffe25852a3a3097329e6f1ab595bfd582fc7
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_file.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_none_message.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_none_message.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e8949c04a04297c5e6bf190b2e9d0d0f0400d34e
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_none_message.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="50px" height="46px" viewBox="0 0 50 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_空状态</title>
+    <g id="场景一：IM对话" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="切图" transform="translate(-43.000000, -26.000000)" fill="#D8D8D8">
+            <path d="M67.84,26 C81.5587532,26 92.68,35.5943604 92.68,47.4296036 C92.68,53.8260455 89.4315513,59.5679391 84.2802477,63.4944332 C82.8000931,64.622656 84.8928171,69.5042747 85.9859064,72 C78.4656162,72 75.5075428,67.9056233 73.38694,68.3229028 C71.6033984,68.6738575 69.7467893,68.8592073 67.84,68.8592073 C54.1212468,68.8592073 43,59.2648469 43,47.4296036 C43,35.5943604 54.1212468,26 67.84,26 Z M55.84,44.3194669 C54.1831458,44.3194669 52.84,45.6626127 52.84,47.3194669 C52.84,48.9763212 54.1831458,50.3194669 55.84,50.3194669 C57.4968542,50.3194669 58.84,48.9763212 58.84,47.3194669 C58.84,45.6626127 57.4968542,44.3194669 55.84,44.3194669 Z M67.84,44.3194669 C66.1831458,44.3194669 64.84,45.6626127 64.84,47.3194669 C64.84,48.9763212 66.1831458,50.3194669 67.84,50.3194669 C69.4968542,50.3194669 70.84,48.9763212 70.84,47.3194669 C70.84,45.6626127 69.4968542,44.3194669 67.84,44.3194669 Z M79.84,44.3194669 C78.1831458,44.3194669 76.84,45.6626127 76.84,47.3194669 C76.84,48.9763212 78.1831458,50.3194669 79.84,50.3194669 C81.4968542,50.3194669 82.84,48.9763212 82.84,47.3194669 C82.84,45.6626127 81.4968542,44.3194669 79.84,44.3194669 Z" id="ic_空状态"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_add_norm.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_add_norm.svg
new file mode 100644
index 0000000000000000000000000000000000000000..729f2774d24c6569215b1a0f1420ea09ecf976f4
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_add_norm.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_add_norm</title>
+    <defs>
+        <path d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M12.75,17.25 C12.75,17.6642136 12.4142136,18 12,18 C11.5857864,18 11.25,17.6642136 11.25,17.25 L11.25,12.749 L6.75,12.75 C6.33578644,12.75 6,12.4142136 6,12 C6,11.5857864 6.33578644,11.25 6.75,11.25 L11.25,11.249 L11.25,6.75 C11.25,6.33578644 11.5857864,6 12,6 C12.4142136,6 12.75,6.33578644 12.75,6.75 L12.75,17.25 Z M17.25,11.25 C17.6642136,11.25 18,11.5857864 18,12 C18,12.4142136 17.6642136,12.75 17.25,12.75 L13.75,12.75 L13.75,11.25 L17.25,11.25 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_add_norm" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_app.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_app.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0280940955c669cba50421e7c36715d9109549ae
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_app.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_app</title>
+    <defs>
+        <path d="M6.01980637,12.7504596 L7.36710401,12.75 C8.55605717,12.75 9.10734318,12.8974289 9.62499024,13.1742696 C10.1426373,13.4511103 10.5488897,13.8573627 10.8257304,14.3750098 L10.8776917,14.4757818 C11.1209805,14.9664447 11.25,15.5206495 11.25,16.632896 L11.25,17.867104 C11.25,19.0560572 11.1025711,19.6073432 10.8257304,20.1249902 C10.5488897,20.6426373 10.1426373,21.0488897 9.62499024,21.3257304 L9.52421823,21.3776917 C9.03355532,21.6209805 8.47935051,21.75 7.36710401,21.75 L6.13289599,21.75 C4.94394283,21.75 4.39265682,21.6025711 3.87500976,21.3257304 C3.35736271,21.0488897 2.95111026,20.6426373 2.67426959,20.1249902 L2.62230832,20.0242182 C2.38740875,19.5504747 2.25903377,19.017496 2.25045963,17.9801936 L2.25,16.632896 C2.25,15.4439428 2.39742891,14.8926568 2.67426959,14.3750098 C2.95111026,13.8573627 3.35736271,13.4511103 3.87500976,13.1742696 L3.97578177,13.1223083 C4.44952527,12.8874087 4.98250402,12.7590338 6.01980637,12.7504596 Z M16.5198064,12.7504596 L17.867104,12.75 C19.0560572,12.75 19.6073432,12.8974289 20.1249902,13.1742696 C20.6426373,13.4511103 21.0488897,13.8573627 21.3257304,14.3750098 L21.3776917,14.4757818 C21.6209805,14.9664447 21.75,15.5206495 21.75,16.632896 L21.75,17.867104 C21.75,19.0560572 21.6025711,19.6073432 21.3257304,20.1249902 C21.0488897,20.6426373 20.6426373,21.0488897 20.1249902,21.3257304 L20.0242182,21.3776917 C19.5335553,21.6209805 18.9793505,21.75 17.867104,21.75 L16.632896,21.75 C15.4439428,21.75 14.8926568,21.6025711 14.3750098,21.3257304 C13.8573627,21.0488897 13.4511103,20.6426373 13.1742696,20.1249902 L13.1223083,20.0242182 C12.8874087,19.5504747 12.7590338,19.017496 12.7504596,17.9801936 L12.75,16.632896 C12.75,15.4439428 12.8974289,14.8926568 13.1742696,14.3750098 C13.4511103,13.8573627 13.8573627,13.4511103 14.3750098,13.1742696 L14.4757818,13.1223083 C14.9495253,12.8874087 15.482504,12.7590338 16.5198064,12.7504596 Z M7.36761573,14.2499999 L6.03220465,14.2504084 L5.86406875,14.2529244 C5.24687011,14.2666673 4.93692836,14.3276696 4.69448301,14.4404982 L4.66322277,14.4555093 L4.58240805,14.4969894 C4.3261637,14.6340304 4.13403036,14.8261637 3.99698939,15.0824081 C3.83932927,15.3772068 3.76616296,15.6858557 3.75242281,16.3718463 L3.74999991,16.6323843 L3.75040839,17.9677953 L3.75292443,18.1359312 C3.76666726,18.7531299 3.82766959,19.0630716 3.94049824,19.305517 L3.95550931,19.3367772 L3.99698939,19.4175919 C4.13403036,19.6738363 4.3261637,19.8659696 4.58240805,20.0030106 C4.87720684,20.1606707 5.1858557,20.233837 5.87221194,20.2475771 L6.13289599,20.2499999 L7.36710401,20.2499999 L7.53743597,20.2489724 C8.21866339,20.2404021 8.55102876,20.1781418 8.80647543,20.0590542 L8.83677723,20.0444907 L8.91759195,20.0030106 C9.1738363,19.8659696 9.36596964,19.6738363 9.50301061,19.4175919 C9.66067073,19.1227932 9.73383704,18.8141443 9.74757712,18.1277881 L9.74999991,17.867104 L9.74999991,16.632896 L9.74897237,16.462564 C9.74040205,15.7813366 9.67814179,15.4489712 9.55905417,15.1935246 L9.54449069,15.1632228 L9.50301061,15.0824081 C9.36596964,14.8261637 9.1738363,14.6340304 8.91759195,14.4969894 C8.62279316,14.3393293 8.3141443,14.266163 7.62778806,14.2524229 L7.36761573,14.2499999 Z M17.8676157,14.2499999 L16.5322047,14.2504084 L16.3640688,14.2529244 C15.7468701,14.2666673 15.4369284,14.3276696 15.194483,14.4404982 L15.1632228,14.4555093 L15.0824081,14.4969894 C14.8261637,14.6340304 14.6340304,14.8261637 14.4969894,15.0824081 C14.3393293,15.3772068 14.266163,15.6858557 14.2524228,16.3718463 L14.2499999,16.6323843 L14.2504084,17.9677953 L14.2529244,18.1359312 C14.2666673,18.7531299 14.3276696,19.0630716 14.4404982,19.305517 L14.4555093,19.3367772 L14.4969894,19.4175919 C14.6340304,19.6738363 14.8261637,19.8659696 15.0824081,20.0030106 C15.3772068,20.1606707 15.6858557,20.233837 16.3722119,20.2475771 L16.632896,20.2499999 L17.867104,20.2499999 L18.037436,20.2489724 C18.7186634,20.2404021 19.0510288,20.1781418 19.3064754,20.0590542 L19.3367772,20.0444907 L19.4175919,20.0030106 C19.6738363,19.8659696 19.8659696,19.6738363 20.0030106,19.4175919 C20.1606707,19.1227932 20.233837,18.8141443 20.2475771,18.1277881 L20.2499999,17.867104 L20.2499999,16.632896 L20.2489724,16.462564 C20.2404021,15.7813366 20.1781418,15.4489712 20.0590542,15.1935246 L20.0444907,15.1632228 L20.0030106,15.0824081 C19.8659696,14.8261637 19.6738363,14.6340304 19.4175919,14.4969894 C19.1227932,14.3393293 18.8141443,14.266163 18.1277881,14.2524229 L17.8676157,14.2499999 Z M6.01980637,2.25045963 L7.36710401,2.25 C8.55605717,2.25 9.10734318,2.39742891 9.62499024,2.67426959 C10.1426373,2.95111026 10.5488897,3.35736271 10.8257304,3.87500976 L10.8776917,3.97578177 C11.1209805,4.46644468 11.25,5.02064949 11.25,6.13289599 L11.25,7.36710401 C11.25,8.55605717 11.1025711,9.10734318 10.8257304,9.62499024 C10.5488897,10.1426373 10.1426373,10.5488897 9.62499024,10.8257304 L9.52421823,10.8776917 C9.03355532,11.1209805 8.47935051,11.25 7.36710401,11.25 L6.13289599,11.25 C4.94394283,11.25 4.39265682,11.1025711 3.87500976,10.8257304 C3.35736271,10.5488897 2.95111026,10.1426373 2.67426959,9.62499024 L2.62230832,9.52421823 C2.38740875,9.05047473 2.25903377,8.51749598 2.25045963,7.48019363 L2.25,6.13289599 C2.25,4.94394283 2.39742891,4.39265682 2.67426959,3.87500976 C2.95111026,3.35736271 3.35736271,2.95111026 3.87500976,2.67426959 L3.97578177,2.62230832 C4.44952527,2.38740875 4.98250402,2.25903377 6.01980637,2.25045963 Z M16.5198064,2.25045963 L17.867104,2.25 C19.0560572,2.25 19.6073432,2.39742891 20.1249902,2.67426959 C20.6426373,2.95111026 21.0488897,3.35736271 21.3257304,3.87500976 L21.3776917,3.97578177 C21.6209805,4.46644468 21.75,5.02064949 21.75,6.13289599 L21.75,7.36710401 C21.75,8.55605717 21.6025711,9.10734318 21.3257304,9.62499024 C21.0488897,10.1426373 20.6426373,10.5488897 20.1249902,10.8257304 L20.0242182,10.8776917 C19.5335553,11.1209805 18.9793505,11.25 17.867104,11.25 L16.632896,11.25 C15.4439428,11.25 14.8926568,11.1025711 14.3750098,10.8257304 C13.8573627,10.5488897 13.4511103,10.1426373 13.1742696,9.62499024 L13.1223083,9.52421823 C12.8874087,9.05047473 12.7590338,8.51749598 12.7504596,7.48019363 L12.75,6.13289599 C12.75,4.94394283 12.8974289,4.39265682 13.1742696,3.87500976 C13.4511103,3.35736271 13.8573627,2.95111026 14.3750098,2.67426959 L14.4757818,2.62230832 C14.9495253,2.38740875 15.482504,2.25903377 16.5198064,2.25045963 Z M7.36761573,3.74999991 L6.03220465,3.75040839 L5.86406875,3.75292443 C5.24687011,3.76666726 4.93692836,3.82766959 4.69448301,3.94049824 L4.66322277,3.95550931 L4.58240805,3.99698939 C4.3261637,4.13403036 4.13403036,4.3261637 3.99698939,4.58240805 C3.83932927,4.87720684 3.76616296,5.1858557 3.75242281,5.87184631 L3.74999991,6.13238427 L3.75040839,7.46779535 L3.75292443,7.63593125 C3.76666726,8.25312989 3.82766959,8.56307164 3.94049824,8.80551699 L3.95550931,8.83677723 L3.99698939,8.91759195 C4.13403036,9.1738363 4.3261637,9.36596964 4.58240805,9.50301061 C4.87720684,9.66067073 5.1858557,9.73383704 5.87221194,9.74757712 L6.13289599,9.74999991 L7.36710401,9.74999991 L7.53743597,9.74897237 C8.21866339,9.74040205 8.55102876,9.67814179 8.80647543,9.55905417 L8.83677723,9.54449069 L8.91759195,9.50301061 C9.1738363,9.36596964 9.36596964,9.1738363 9.50301061,8.91759195 C9.66067073,8.62279316 9.73383704,8.3141443 9.74757712,7.62778806 L9.74999991,7.36710401 L9.74999991,6.13289599 L9.74897237,5.96256403 C9.74040205,5.28133661 9.67814179,4.94897124 9.55905417,4.69352457 L9.54449069,4.66322277 L9.50301061,4.58240805 C9.36596964,4.3261637 9.1738363,4.13403036 8.91759195,3.99698939 C8.62279316,3.83932927 8.3141443,3.76616296 7.62778806,3.75242288 L7.36761573,3.74999991 Z M17.8676157,3.74999991 L16.5322047,3.75040839 L16.3640688,3.75292443 C15.7468701,3.76666726 15.4369284,3.82766959 15.194483,3.94049824 L15.1632228,3.95550931 L15.0824081,3.99698939 C14.8261637,4.13403036 14.6340304,4.3261637 14.4969894,4.58240805 C14.3393293,4.87720684 14.266163,5.1858557 14.2524228,5.87184631 L14.2499999,6.13238427 L14.2504084,7.46779535 L14.2529244,7.63593125 C14.2666673,8.25312989 14.3276696,8.56307164 14.4404982,8.80551699 L14.4555093,8.83677723 L14.4969894,8.91759195 C14.6340304,9.1738363 14.8261637,9.36596964 15.0824081,9.50301061 C15.3772068,9.66067073 15.6858557,9.73383704 16.3722119,9.74757712 L16.632896,9.74999991 L17.867104,9.74999991 L18.037436,9.74897237 C18.7186634,9.74040205 19.0510288,9.67814179 19.3064754,9.55905417 L19.3367772,9.54449069 L19.4175919,9.50301061 C19.6738363,9.36596964 19.8659696,9.1738363 20.0030106,8.91759195 C20.1606707,8.62279316 20.233837,8.3141443 20.2475771,7.62778806 L20.2499999,7.36710401 L20.2499999,6.13289599 L20.2489724,5.96256403 C20.2404021,5.28133661 20.1781418,4.94897124 20.0590542,4.69352457 L20.0444907,4.66322277 L20.0030106,4.58240805 C19.8659696,4.3261637 19.6738363,4.13403036 19.4175919,3.99698939 C19.1227932,3.83932927 18.8141443,3.76616296 18.1277881,3.75242288 L17.8676157,3.74999991 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_app" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_back.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_back.svg
new file mode 100644
index 0000000000000000000000000000000000000000..66e3df10acde5c58b785774850139d12b0f4ad04
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_back.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_back</title>
+    <defs>
+        <path d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_back" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_cancel.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_cancel.svg
new file mode 100644
index 0000000000000000000000000000000000000000..36565c84256be091beb9bd8d8494c5e073defc3f
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_cancel.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_cancel</title>
+    <defs>
+        <path d="M19.7781746,4.22182541 C20.0710678,4.51471863 20.0710678,4.98959236 19.7781746,5.28248558 L5.28248558,19.7781746 C4.98959236,20.0710678 4.51471863,20.0710678 4.22182541,19.7781746 C3.92893219,19.4852814 3.92893219,19.0104076 4.22182541,18.7175144 L10.9395166,11.9994697 L4.22182541,5.28248558 C3.92893219,4.98959236 3.92893219,4.51471863 4.22182541,4.22182541 C4.51471863,3.92893219 4.98959236,3.92893219 5.28248558,4.22182541 L12,10.9389863 L18.7175144,4.22182541 C19.0104076,3.92893219 19.4852814,3.92893219 19.7781746,4.22182541 Z M19.7781746,18.7175144 C20.0710678,19.0104076 20.0710678,19.4852814 19.7781746,19.7781746 C19.4852814,20.0710678 19.0104076,20.0710678 18.7175144,19.7781746 L12.7072836,13.7675902 L13.767767,12.7071068 L19.7781746,18.7175144 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_cancel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_cloud_upload.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_cloud_upload.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ccd6af6615fc3af1fb4ee26a30fb2e364a3407b5
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_cloud_upload.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_cloud_upload</title>
+    <defs>
+        <path d="M13.1152825,11.1511481 L13.2374369,11.2624369 L16.5303301,14.5553301 L16.5605907,14.5873913 C16.8228497,14.8819107 16.8127628,15.3335575 16.5303301,15.6159903 C16.2640635,15.8822568 15.8473998,15.9064629 15.5537883,15.6886084 L15.4696699,15.6159903 L12.75,12.8968737 L12.75,20.7706955 C12.75,21.1732716 12.414,21.5 12,21.5 C11.586,21.5 11.25,21.1732716 11.25,20.7706955 L11.25,12.8958737 L8.53033009,15.6159903 L8.4982689,15.6462509 C8.20374943,15.9085099 7.75210266,15.898423 7.46966991,15.6159903 C7.20340335,15.3497237 7.1791973,14.93306 7.39705176,14.6394485 L7.46966991,14.5553301 L10.7625631,11.2624369 L10.8058219,11.2206131 C11.4516033,10.6170393 12.4429846,10.5938843 13.1152825,11.1511481 Z M11.75,2.75 C14.3110274,2.75 16.6045627,4.18963065 17.7474745,6.39958542 L17.80175,6.50725 L17.8945017,6.51276243 C20.9917115,6.7137911 23.4483522,9.26487247 23.4991962,12.400779 L23.5,12.5 C23.5,15.8137085 20.8137085,18.5 17.5,18.5 L17.3573563,18.4983336 L17.31525,18.49675 L17.2930288,18.4987845 L17.25,18.5 L15,18.5 C14.5857864,18.5 14.25,18.1642136 14.25,17.75 C14.25,17.3505798 14.56223,17.0240848 14.9559318,17.0012732 L15,17 L17.156,17 L17.1969104,16.9959821 L17.2408167,16.9941967 L17.2852923,16.9949832 C17.3566101,16.998324 17.4281907,17 17.5,17 C19.9852814,17 22,14.9852814 22,12.5 C22,10.0147186 19.9852814,8 17.5,8 C17.4466555,8 17.3939544,8.00092489 17.3418727,8.00277976 C17.0266017,8.014008 16.7380067,7.82674806 16.6198096,7.53425654 C15.8243357,5.56576957 13.9094675,4.25 11.75,4.25 C8.92960252,4.25 6.61583848,6.4788429 6.50433581,9.28727318 C6.48827226,9.69186759 6.15493718,10.0077333 5.7552979,10.0075437 L5.71063343,10.0062104 C5.64075201,10.0020762 5.57052342,10 5.5,10 C3.56700338,10 2,11.5670034 2,13.5 C2,15.4329966 3.56700338,17 5.5,17 L5.60358763,16.9985027 L5.7067125,16.9940193 C5.75048839,16.9914782 5.79354766,16.9927306 5.83558526,16.9974815 L5.85475,17 L9,17 C9.39942022,17 9.72591522,17.31223 9.74872683,17.7059318 L9.75,17.75 C9.75,18.1494202 9.43777001,18.4759152 9.0440682,18.4987268 L9,18.5 L5.75,18.5 L5.70672088,18.4987735 L5.6805,18.4965 L5.59810117,18.499054 L5.5,18.5 C2.73857625,18.5 0.5,16.2614237 0.5,13.5 C0.5,10.9111652 2.46749866,8.7818644 4.98877905,8.52581444 L5.071,8.518 L5.07650591,8.48088548 C5.56328657,5.26330332 8.31727779,2.80338693 11.6414047,2.75085752 L11.75,2.75 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_cloud_upload" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="蒙版" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_comments.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_comments.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0211e560e1825ca9b607e21470d5ca8e309acd0e
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_comments.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_comments</title>
+    <defs>
+        <path d="M15.5,3 C19.6421356,3 23,6.35786438 23,10.5 C23,14.6007143 19.7089571,17.9327643 15.6240262,17.9989952 L15.5,18 L13.8105,18 L10.0303301,21.7803301 C9.7491526,22.0615076 9.30026186,22.0727547 9.00566731,21.8140714 L8.96966991,21.7803301 C8.68849242,21.4991526 8.67724532,21.0502619 8.93592862,20.7556673 L8.96966991,20.7196699 L12.9696699,16.7196699 C13.0986012,16.5907387 13.2696414,16.5135976 13.4504659,16.5016361 L13.5,16.5 L15.5,16.5 C18.8137085,16.5 21.5,13.8137085 21.5,10.5 C21.5,7.21942859 18.8671657,4.55378857 15.599221,4.50080383 L8.5,4.5 C5.1862915,4.5 2.5,7.1862915 2.5,10.5 C2.5,13.7805714 5.1328343,16.4462114 8.40077903,16.4991962 L8.5,16.5 L9.25,16.5 C9.66421356,16.5 10,16.8357864 10,17.25 C10,17.6494202 9.68777001,17.9759152 9.2940682,17.9987268 L9.25,18 L8.5,18 C4.35786438,18 1,14.6421356 1,10.5 C1,6.39928573 4.29104288,3.06723571 8.37597379,3.00100479 L8.5,3 L15.5,3 Z M7,9.25 C7.69035594,9.25 8.25,9.80964406 8.25,10.5 C8.25,11.1903559 7.69035594,11.75 7,11.75 C6.30964406,11.75 5.75,11.1903559 5.75,10.5 C5.75,9.80964406 6.30964406,9.25 7,9.25 Z M12,9.25 C12.6903559,9.25 13.25,9.80964406 13.25,10.5 C13.25,11.1903559 12.6903559,11.75 12,11.75 C11.3096441,11.75 10.75,11.1903559 10.75,10.5 C10.75,9.80964406 11.3096441,9.25 12,9.25 Z M17,9.25 C17.6903559,9.25 18.25,9.80964406 18.25,10.5 C18.25,11.1903559 17.6903559,11.75 17,11.75 C16.3096441,11.75 15.75,11.1903559 15.75,10.5 C15.75,9.80964406 16.3096441,9.25 17,9.25 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_comments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_connection.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_connection.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c07d123117b9ac5b5aaeb30916bf2cbf57c9c22d
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_connection.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_connection</title>
+    <defs>
+        <path d="M16.447592,14.0940386 C16.8470122,14.0940386 17.1735072,14.4062686 17.1963188,14.7999704 L17.197592,14.8440386 L17.197592,18.5940386 C17.197592,21.3554623 14.9590157,23.5940386 12.197592,23.5940386 C9.46493306,23.5940386 7.24428571,21.4018564 7.19831874,18.6801609 L7.19759198,14.8440386 C7.19759198,14.429825 7.53337841,14.0940386 7.94759198,14.0940386 C8.3470122,14.0940386 8.6735072,14.4062686 8.6963188,14.7999704 L8.69759198,14.8440386 L8.69759198,18.5940386 C8.69759198,20.5270352 10.2645954,22.0940386 12.197592,22.0940386 C14.104467,22.0940386 15.6551737,20.5691005 15.6967365,18.6721998 L15.697592,14.8440386 C15.697592,14.429825 16.0333784,14.0940386 16.447592,14.0940386 Z M12.197592,6.84403858 C12.6118055,6.84403858 12.947592,7.17982502 12.947592,7.59403858 L12.947592,16.0940386 C12.947592,16.5082521 12.6118055,16.8440386 12.197592,16.8440386 C11.7833784,16.8440386 11.447592,16.5082521 11.447592,16.0940386 L11.447592,7.59403858 C11.447592,7.17982502 11.7833784,6.84403858 12.197592,6.84403858 Z M12.197592,0.0940385849 C14.9302509,0.0940385849 17.1508982,2.28622073 17.1968652,5.00791623 L17.197592,8.84403858 C17.197592,9.25825215 16.8618055,9.59403858 16.447592,9.59403858 C16.0481718,9.59403858 15.7216768,9.28180859 15.6988651,8.88810678 L15.697592,8.84403858 L15.697592,5.09403858 C15.697592,3.16104196 14.1305886,1.59403858 12.197592,1.59403858 C10.2907169,1.59403858 8.74001025,3.11897668 8.69844749,5.01587733 L8.69759198,5.09403858 L8.69759198,8.84403858 C8.69759198,9.25825215 8.36180554,9.59403858 7.94759198,9.59403858 C7.54817175,9.59403858 7.22167676,9.28180859 7.19886515,8.88810678 L7.19759198,8.84403858 L7.19759198,5.09403858 C7.19759198,2.33261484 9.43616823,0.0940385849 12.197592,0.0940385849 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_connection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="蒙版" fill-rule="nonzero" transform="translate(12.197592, 11.844039) rotate(-315.000000) translate(-12.197592, -11.844039) "></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_contacts_group_filled.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_contacts_group_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e91a57279b17e050d94bbe82df04576272bc8f9d
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_contacts_group_filled.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_contacts_group_filled</title>
+    <defs>
+        <path d="M10.75,12.5 C16.25,12.5 18.3952572,16.4535785 18.9852941,17.7777778 C19.1979148,18.2549551 19.3700829,18.8854069 19.5017983,19.6691334 C19.6846398,20.7584647 18.9496902,21.7896973 17.8603422,21.9724392 C17.7514313,21.9907093 17.6411943,21.9999276 17.5307617,22 L3.96044922,22 C2.85588109,22.0017379 1.95904081,21.1077194 1.95730039,20.0031513 C1.95712407,19.8912496 1.96633955,19.7795304 1.98463108,19.6691334 C2.1155485,18.8854069 2.2922401,18.2549551 2.51470588,17.7777778 C3.13206349,16.4535785 5.25,12.5 10.75,12.5 Z M15.7405108,12.3144625 C19.4134836,12.7984599 22.25,15.942978 22.25,19.75 C22.25,20.5595992 21.6086063,21.2193929 20.8062346,21.2489654 L20.75,21.250083 L20.6830609,21.250083 C20.7185377,21.1887813 20.741372,21.1192484 20.747998,21.0450502 L20.75,21 L20.75,20.5 C20.75,17.1281704 18.6897401,14.1894203 15.6403913,12.6478036 L15.639212,12.6472076 L15.6380396,12.6465918 C15.5511308,12.6027174 15.5162446,12.4966966 15.560119,12.4097878 C15.5854418,12.3596272 15.6324694,12.3255813 15.6857366,12.3158227 L15.7405108,12.3144625 L15.7405108,12.3144625 Z M13.5,2 C15.9852814,2 18,4.01471863 18,6.5 C18,7.62311012 17.5885586,8.65012296 16.9081813,9.43853308 C16.4355489,9.98621183 15.83314,10.4187515 15.1487242,10.6883823 L15.1387137,10.6921429 L15.1387137,10.6921429 L15.12403,10.6974221 C15.0603051,10.7197886 14.9905143,10.686261 14.9681478,10.6225361 C14.958678,10.5955555 14.9590935,10.5665822 14.9685257,10.5404743 L14.989328,10.5040687 L14.989328,10.5040687 C15.7767992,9.55263148 16.25,8.33157673 16.25,7 C16.25,4.96455014 15.1443087,3.18734834 13.5007912,2.23625986 L13.4750562,2.2215584 L13.4750562,2.2215584 L13.4468937,2.20589364 C13.3938203,2.17656384 13.3745723,2.10976282 13.4039021,2.05668939 C13.4232311,2.02171266 13.4600377,2 13.5,2 Z M10.75,2.5 C8.26471863,2.5 6.25,4.51471863 6.25,7 C6.25,9.48528137 8.26471863,11.5 10.75,11.5 C13.2352814,11.5 15.25,9.48528137 15.25,7 C15.25,4.51471863 13.2352814,2.5 10.75,2.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_contacts_group_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="蒙版"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_email_send.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_email_send.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b06b63dd1f5e7c0862e6bb99d050d565420782ec
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_email_send.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_email_send</title>
+    <defs>
+        <path d="M2.99429676,3.11382132 C3.45567902,2.89057184 3.99174069,2.88081655 4.46094019,3.08713122 L4.46094019,3.08713122 L20.9442032,10.3350909 C21.8289462,10.7241268 22.2307961,11.7567285 21.8417602,12.6414715 C21.6654467,13.0424425 21.3451743,13.362715 20.9442032,13.5390284 L20.9442032,13.5390284 L4.46094019,20.7869881 C3.57619726,21.176024 2.54359549,20.774174 2.15455959,19.8894311 C1.94824492,19.4202316 1.95800021,18.8841699 2.18124969,18.4227877 L2.18124969,18.4227877 L5.31950519,11.9370597 L2.18124969,5.45133164 C1.76028079,4.58132924 2.12429436,3.53479023 2.99429676,3.11382132 Z M3.85715864,4.46024733 C3.79013014,4.43077381 3.7135499,4.43216742 3.64763815,4.4640602 C3.5233521,4.52419862 3.47135016,4.67370419 3.53148857,4.79799025 L3.53148857,4.79799025 L6.501128,10.9350999 L18.1858912,11.6224023 C18.3260333,11.630646 18.4354598,11.7466985 18.4354598,11.8870828 C18.4354598,12.0274671 18.3260333,12.1435197 18.1858912,12.1517633 L6.550128,12.8350999 L3.53148857,19.0761291 C3.51022672,19.1200702 3.50252005,19.1687529 3.50847759,19.216186 L3.5276757,19.2856496 C3.58325226,19.4120414 3.7307668,19.4694485 3.85715864,19.413872 L3.85715864,19.413872 L20.3404217,12.1659123 C20.3977033,12.1407247 20.4434565,12.0949715 20.4686441,12.0376899 C20.5242207,11.9112981 20.4668135,11.7637835 20.3404217,11.708207 L20.3404217,11.708207 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_email_send" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero" transform="translate(11.998180, 11.937280) rotate(-90.000000) translate(-11.998180, -11.937280) "></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_emoji.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_emoji.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ec6dfe21f3301987ec246051a4c042a5b3384aa6
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_emoji.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic/ic_public_emoji</title>
+    <g id="ic/ic_public_emoji" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ic_public_emoji" transform="translate(1.000000, 1.000000)" fill="#000000" fill-rule="nonzero">
+            <path d="M11,0 C17.0751322,0 22,4.92486775 22,11 C22,17.0751322 17.0751322,22 11,22 C4.92486775,22 0,17.0751322 0,11 C0,4.92486775 4.92486775,0 11,0 Z M11,1.5 C5.75329488,1.5 1.5,5.75329488 1.5,11 C1.5,16.2467051 5.75329488,20.5 11,20.5 C16.2467051,20.5 20.5,16.2467051 20.5,11 C20.5,5.75329488 16.2467051,1.5 11,1.5 Z M16.375998,12.8508265 C16.7345266,13.0582636 16.8570105,13.5170694 16.6495735,13.875598 C15.491715,15.8768095 13.3553047,17.1360571 11.0002,17.1360571 C8.64518533,17.1360571 6.50876034,15.8768925 5.35085437,13.8759408 C5.14339079,13.5174275 5.26584073,13.0586127 5.62435396,12.8511491 C5.9828672,12.6436855 6.44168206,12.7661355 6.64914563,13.1246487 C7.54157382,14.6668342 9.1860548,15.6360571 11.0002,15.6360571 C12.8143986,15.6360571 14.4588331,14.6667909 15.3512265,13.124402 C15.5586636,12.7658734 16.0174694,12.6433895 16.375998,12.8508265 Z M6.25,7 C6.9403125,7 7.5,7.5596875 7.5,8.25 C7.5,8.9403125 6.9403125,9.5 6.25,9.5 C5.5596875,9.5 5,8.9403125 5,8.25 C5,7.5596875 5.5596875,7 6.25,7 Z M15.75,7 C16.4403125,7 17,7.5596875 17,8.25 C17,8.9403125 16.4403125,9.5 15.75,9.5 C15.0596875,9.5 14.5,8.9403125 14.5,8.25 C14.5,7.5596875 15.0596875,7 15.75,7 Z" id="path-1"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_groups.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_groups.png
new file mode 100644
index 0000000000000000000000000000000000000000..654a7872c23165d039797a973f7152837326e005
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_groups.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_more.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_more.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2078baf063972687f6922a7f3368879eef0a0bbd
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_more.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_more</title>
+    <defs>
+        <path d="M6.25,8 C7.21649831,8 8,7.21649831 8,6.25 C8,5.28350169 7.21649831,4.5 6.25,4.5 C5.28350169,4.5 4.5,5.28350169 4.5,6.25 C4.5,7.21649831 5.28350169,8 6.25,8 Z M6.25,19.5 C7.21649831,19.5 8,18.7164983 8,17.75 C8,16.7835017 7.21649831,16 6.25,16 C5.28350169,16 4.5,16.7835017 4.5,17.75 C4.5,18.7164983 5.28350169,19.5 6.25,19.5 Z M17.75,19.5 C18.7164983,19.5 19.5,18.7164983 19.5,17.75 C19.5,16.7835017 18.7164983,16 17.75,16 C16.7835017,16 16,16.7835017 16,17.75 C16,18.7164983 16.7835017,19.5 17.75,19.5 Z M17.75,8 C18.7164983,8 19.5,7.21649831 19.5,6.25 C19.5,5.28350169 18.7164983,4.5 17.75,4.5 C16.7835017,4.5 16,5.28350169 16,6.25 C16,7.21649831 16.7835017,8 17.75,8 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_more" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_multiscreen.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_multiscreen.svg
new file mode 100644
index 0000000000000000000000000000000000000000..98d19313337d0e762a1a396e239a91168b95391d
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_multiscreen.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_multiscreen</title>
+    <defs>
+        <path d="M11.46125,7.69017063 C11.5924019,7.69017063 11.7177174,7.74439717 11.8075,7.84 C11.902315,7.93292635 11.9562807,8.05974567 11.9575,8.1925 L11.9575,8.1925 L11.9575,9.72 L19.0275,9.72 C20.6765327,9.73511144 22.004192,11.0784034 22.0000099,12.7275 L22.0000099,12.7275 L22.0000099,19 C22.0000099,20.646174 20.6736048,21.9849101 19.0275,22 L19.0275,22 L12.825,22 C11.1759616,21.9890062 9.84496335,20.6490751 9.845,19 L9.845,19 L9.845,17.75 C9.83371936,17.3672197 10.1191853,17.0403503 10.5,17 C10.7201615,16.9836364 10.9369455,17.0613361 11.0965857,17.2138282 C11.2562259,17.3663204 11.343768,17.5793203 11.3375,17.8 L11.3375,17.8 L11.3375,19 C11.3374714,19.82357 12.0014586,20.4931369 12.825,20.5 L12.825,20.5 L19.0275,20.5 C19.8500633,20.491774 20.5125411,19.8226044 20.5125,19 L20.5125,19 L20.5125,12.715 C20.5125411,11.8923956 19.8500633,11.223226 19.0275,11.215 L19.0275,11.215 L8.9825,11.215 C8.84617534,11.2150116 8.71801924,11.1500048 8.6375,11.04 C8.46259085,10.8394451 8.46259085,10.5405549 8.6375,10.34 L8.6375,10.34 L11.115,7.84 C11.2047826,7.74439717 11.3300981,7.69017063 11.46125,7.69017063 Z M11.175,2 C12.8230607,2.0123608 14.1525464,3.35189292 14.1525,5 L14.1525,5 L14.1525,6.25 C14.1638953,6.63191608 13.8798191,6.95844043 13.5,7 C13.2796395,7.01716977 13.0623863,6.93973928 12.9025584,6.78706781 C12.7427304,6.63439634 12.6554358,6.42091548 12.6625,6.2 L12.6625,6.2 L12.6625,5 C12.6625286,4.17642998 11.9985414,3.50686308 11.175,3.5 L11.175,3.5 L4.9725,3.5 C4.14407288,3.5 3.4725,4.17157288 3.4725,5 L3.4725,5 L3.4725,11.285 C3.4725,12.1134271 4.14407288,12.785 4.9725,12.785 L4.9725,12.785 L15.015,12.785 C15.1520139,12.7849972 15.2809253,12.8499166 15.3625,12.96 C15.535261,13.1613551 15.535261,13.4586449 15.3625,13.66 L15.3625,13.66 L12.885,16.16 C12.794776,16.2557367 12.6690518,16.3100095 12.5375,16.3100095 C12.4059482,16.3100095 12.280224,16.2557367 12.19,16.16 C12.0961031,16.0666624 12.0430582,15.9398942 12.0425,15.8075 L12.0425,15.8075 L12.0425,14.2725 L4.9725,14.2725 C3.32639518,14.2574101 2,12.918674 2,11.2725 L2,11.2725 L2,5 C2,3.35382602 3.32639518,2.01508993 4.9725,2 L4.9725,2 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_multiscreen" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_names.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_names.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b202769eb20cd57b9a5e232e23857fccb932ece
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_names.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_phone.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_phone.svg
new file mode 100644
index 0000000000000000000000000000000000000000..db996908441186ab8fb0be7a173ead3e9b1bec4c
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_phone.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_phone</title>
+    <defs>
+        <path d="M5.16720725,2.15694972 C4.57981912,2.29147814 4.01663811,2.67469617 3.45795888,3.28222699 L3.40000863,3.34652585 L3.41706088,3.3290245 C2.31983567,4.41733995 1.86268744,5.99225358 2.20824887,7.49585665 C2.84070426,10.2182299 4.91223973,13.4662736 7.70579392,16.2883966 C10.5332577,19.0872915 13.7813017,21.1588206 16.5019346,21.7908739 L16.5941801,21.8110531 C18.0405745,22.1115169 19.5405408,21.676154 20.6032636,20.6488379 L20.6530605,20.5992242 L20.6367826,20.6144113 C21.3182937,20.0075363 21.7360372,19.3963547 21.858708,18.7555609 C22.0403569,17.8066839 21.6727677,16.8312994 20.9172668,16.2234479 L18.8910284,14.5810212 L18.8910284,14.5810212 C17.9729968,13.7661146 16.5931939,13.7836376 15.699312,14.6157694 L15.6477052,14.665379 L15.6228063,14.690554 L14.686639,15.6828975 C14.5546026,15.8149102 14.3280746,15.8409839 14.1527582,15.7314508 C13.3172557,15.2120891 12.1303644,14.1987708 10.9802683,13.0284399 L10.7611357,12.8108428 C9.67601351,11.7221684 8.75502696,10.6301338 8.26897505,9.84821364 C8.15853902,9.67144831 8.18461264,9.44492031 8.33152313,9.29843477 L9.30896885,8.37671655 L9.33414385,8.35181763 L9.37464007,8.30982875 C10.2003067,7.42306041 10.2324768,6.07746659 9.46508279,5.162393 L9.3537796,5.03091264 L8.22723777,3.64204688 C8.07133397,3.44889272 7.91700627,3.25742016 7.77607494,3.08225607 C7.16822347,2.32675513 6.19283903,1.95916594 5.243962,2.14081487 L5.16720725,2.15694972 Z M20.3854606,18.4735287 C20.3347566,18.7383909 20.0964509,19.087045 19.6392388,19.4941853 L19.6055231,19.5261346 C18.8823263,20.255252 17.8371496,20.5586342 16.839641,20.3293845 C14.4293391,19.7694247 11.4077574,17.8423281 8.7664403,15.2277501 C6.15720291,12.5917737 4.23009995,9.57019147 3.66973827,7.15815029 C3.44742729,6.19082408 3.72736923,5.17688065 4.41193762,4.45676796 L4.50533759,4.36028407 C4.91247789,3.90307193 5.26113202,3.66476633 5.52599414,3.61406226 C5.92515246,3.53764911 6.34435194,3.69563113 6.60738014,4.02254988 L8.02359877,5.77349596 L8.33190757,6.14585543 C8.59711542,6.47956509 8.58061124,6.96151558 8.28584937,7.27815087 L8.26649427,7.29801532 L7.28729807,8.22179031 C6.630534,8.87624912 6.51580142,9.8730476 6.99594523,10.641556 C7.58651914,11.5916262 8.67168241,12.862672 9.91964876,14.08906 L10.1558071,14.3268132 C11.2995201,15.4658 12.4692794,16.45116 13.3594158,17.0044806 L13.4145885,17.0377028 C14.1737396,17.4779592 15.1385121,17.3537064 15.7632834,16.7271225 L16.7010407,15.7332689 L16.7309899,15.7045601 C17.0383508,15.4185862 17.5199701,15.4023958 17.8559701,15.669668 L18.0404137,15.8240228 C18.3872561,16.1094041 19.2522673,16.8090681 19.976973,17.3921427 C20.3038918,17.6551709 20.4618738,18.0743704 20.3854606,18.4735287 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_phone" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_play_norm.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_play_norm.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2d12d556d494a7540256f6ab720b56408616bfe6
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_play_norm.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_play_norm</title>
+    <defs>
+        <path d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M16.1490452,13.0797236 L10.8798388,16.1534274 C10.2835239,16.5012777 9.51812673,16.2998574 9.17027637,15.7035425 C9.0587605,15.5123725 9,15.295022 9,15.0737038 L9,8.92629625 C9,8.23594031 9.55964406,7.67629625 10.25,7.67629625 C10.4713183,7.67629625 10.6886687,7.73505675 10.8798388,7.84657262 L16.1490452,10.9202764 C16.7453601,11.2681267 16.9467804,12.0335239 16.5989301,12.6298388 C16.4902816,12.8160933 16.3352998,12.9710751 16.1490452,13.0797236 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_play_norm" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_refresh.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_refresh.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f036e290cba3bcd04e636abf68bc4868db2f8821
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_refresh.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_refresh</title>
+    <defs>
+        <path d="M22.3414769,15.7576235 C22.3414769,15.7576235 22.3414769,15.7576235 22.3414769,15.7576235 C22.7675941,14.58516 23,13.3197207 23,12 L20.148111,12 C19.8719687,12 19.648111,12.2238576 19.648111,12.5 C19.648111,12.5930667 19.6740858,12.6842863 19.7231119,12.7633928 L21.6247463,15.831787 C21.7412468,16.0197728 21.9880826,16.0777198 22.1760669,15.9612167 C22.2524981,15.9138485 22.3107624,15.8421345 22.3414769,15.7576235 Z M22.823695,13.9714637 C22.9406935,13.3251822 23,12.6661847 23,12 C23,5.92486775 18.0751322,1 12,1 C11.2174632,1 10.44502,1.08183322 9.69172269,1.24274766 C4.65590569,2.31846601 1,6.78563595 1,12 C1,18.0751322 5.92486775,23 12,23 C13.0917435,23 14.1629676,22.8407032 15.1884731,22.530585 C16.7020101,22.0728837 18.0947944,21.2926603 19.2766337,20.2494437 C19.5871723,19.9753294 19.6167001,19.5013746 19.3425858,19.190836 C19.0684716,18.8802974 18.5945167,18.8507696 18.2839781,19.1248839 C17.2629258,20.0261728 16.0603686,20.6998329 14.7542841,21.0947995 C13.8691955,21.3624549 12.9442454,21.5 12,21.5 C6.75329488,21.5 2.5,17.2467051 2.5,12 C2.5,7.496884 5.65786226,3.63827588 10.0050734,2.70965302 C10.6555297,2.57070679 11.322948,2.5 12,2.5 C17.2467051,2.5 21.5,6.75329488 21.5,12 C21.5,12.5764741 21.4487412,13.1460473 21.3476867,13.7042571 C21.2738996,14.1118455 21.544499,14.5020775 21.9520875,14.5758645 C22.3596759,14.6496516 22.7499079,14.3790522 22.823695,13.9714637 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_refresh" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_search.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5ed76ba23b9e2c9bbd5298fdf3068f71ae64a648
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_search.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_search</title>
+    <defs>
+        <path d="M17.4552585,16.5201811 L20.8132621,19.8776019 C21.1061553,20.1704951 21.1061553,20.6453689 20.8132621,20.9382621 C20.5203689,21.2311553 20.0454951,21.2311553 19.7526019,20.9382621 L16.3849514,17.5705115 C16.7690371,17.2493647 17.1270214,16.8980393 17.4552585,16.5201811 Z M10.375,2 C15.0003848,2 18.75,5.74961522 18.75,10.375 C18.75,12.4492584 17.9959213,14.3473923 16.746948,15.8102175 L16.746948,15.8102175 L16.7248309,15.8360159 C16.6580095,15.9136422 16.5897889,15.9900296 16.5202083,16.0651391 L16.746948,15.8102175 C16.6540763,15.9189909 16.5584681,16.0253575 16.4602302,16.1292106 C16.4016383,16.1911476 16.342303,16.2519995 16.2820606,16.3119405 C16.2610861,16.3328082 16.240292,16.3532825 16.2193918,16.3736485 C16.1491692,16.4420866 16.0772901,16.5097189 16.0042335,16.576078 C15.9759275,16.6017907 15.9472456,16.6274881 15.9183866,16.6529896 C15.8514229,16.712158 15.7837649,16.7700565 15.7151861,16.8268826 C15.7013815,16.8383205 15.6877981,16.8495035 15.674179,16.8606444 C14.2305262,18.0415704 12.3854944,18.75 10.375,18.75 C5.74961522,18.75 2,15.0003848 2,10.375 C2,5.74961522 5.74961522,2 10.375,2 Z M10.375,3.5 C6.57804235,3.5 3.5,6.57804235 3.5,10.375 C3.5,14.1719577 6.57804235,17.25 10.375,17.25 C14.1719577,17.25 17.25,14.1719577 17.25,10.375 C17.25,6.57804235 14.1719577,3.5 10.375,3.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_search_white.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_search_white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f9e58050aeb1995c126bfb2ae3215de123c9b517
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_search_white.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_search</title>
+    <defs>
+        <path d="M17.4552585,16.5201811 L20.8132621,19.8776019 C21.1061553,20.1704951 21.1061553,20.6453689 20.8132621,20.9382621 C20.5203689,21.2311553 20.0454951,21.2311553 19.7526019,20.9382621 L16.3849514,17.5705115 C16.7690371,17.2493647 17.1270214,16.8980393 17.4552585,16.5201811 Z M10.375,2 C15.0003848,2 18.75,5.74961522 18.75,10.375 C18.75,12.4492584 17.9959213,14.3473923 16.746948,15.8102175 L16.746948,15.8102175 L16.7248309,15.8360159 C16.6580095,15.9136422 16.5897889,15.9900296 16.5202083,16.0651391 L16.746948,15.8102175 C16.6540763,15.9189909 16.5584681,16.0253575 16.4602302,16.1292106 C16.4016383,16.1911476 16.342303,16.2519995 16.2820606,16.3119405 C16.2610861,16.3328082 16.240292,16.3532825 16.2193918,16.3736485 C16.1491692,16.4420866 16.0772901,16.5097189 16.0042335,16.576078 C15.9759275,16.6017907 15.9472456,16.6274881 15.9183866,16.6529896 C15.8514229,16.712158 15.7837649,16.7700565 15.7151861,16.8268826 C15.7013815,16.8383205 15.6877981,16.8495035 15.674179,16.8606444 C14.2305262,18.0415704 12.3854944,18.75 10.375,18.75 C5.74961522,18.75 2,15.0003848 2,10.375 C2,5.74961522 5.74961522,2 10.375,2 Z M10.375,3.5 C6.57804235,3.5 3.5,6.57804235 3.5,10.375 C3.5,14.1719577 6.57804235,17.25 10.375,17.25 C14.1719577,17.25 17.25,14.1719577 17.25,10.375 C17.25,6.57804235 14.1719577,3.5 10.375,3.5 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_share.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_share.svg
new file mode 100644
index 0000000000000000000000000000000000000000..593be89ad4209e315651252b2e9b5c73b94212be
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_share.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_share</title>
+    <defs>
+        <path d="M12.25,2 C13.9068542,2 15.25,3.34314575 15.25,5 C15.25,6.65685425 13.9068542,8 12.25,8 C11.9804725,8 11.7192467,7.96445647 11.4707541,7.89780096 L5.93201456,16.2048482 C6.40136404,16.6003451 6.74770229,17.1371819 6.90542312,17.7497523 L17.0945769,17.7497523 C17.4276951,16.4559576 18.6022096,15.5 20,15.5 C21.6568542,15.5 23,16.8431458 23,18.5 C23,20.1568542 21.6568542,21.5 20,21.5 C18.6025704,21.5 17.4283015,20.5445359 17.094835,19.2512495 L6.90516499,19.2512495 C6.57169851,20.5445359 5.39742955,21.5 4,21.5 C2.34314575,21.5 1,20.1568542 1,18.5 C1,16.8431458 2.34314575,15.5 4,15.5 C4.1922717,15.5 4.38031877,15.5180878 4.56253245,15.5526546 L10.1618944,7.15402617 C9.59951533,6.60875215 9.25,5.84519291 9.25,5 C9.25,3.34314575 10.5931458,2 12.25,2 Z M4,17 C3.17157288,17 2.5,17.6715729 2.5,18.5 C2.5,19.3284271 3.17157288,20 4,20 C4.82842712,20 5.5,19.3284271 5.5,18.5 C5.5,17.6715729 4.82842712,17 4,17 Z M20,17 C19.1715729,17 18.5,17.6715729 18.5,18.5 C18.5,19.3284271 19.1715729,20 20,20 C20.8284271,20 21.5,19.3284271 21.5,18.5 C21.5,17.6715729 20.8284271,17 20,17 Z M12.25,3.5 C11.4215729,3.5 10.75,4.17157288 10.75,5 C10.75,5.82842712 11.4215729,6.5 12.25,6.5 C13.0784271,6.5 13.75,5.82842712 13.75,5 C13.75,4.17157288 13.0784271,3.5 12.25,3.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_share" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="合并形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_sound.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_sound.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fef38f47070e3ae90b35a95c3b9194185bc9338d
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_sound.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_sound</title>
+    <defs>
+        <path d="M19.6297132,3.97021633 C21.767174,6.11208412 22.9900393,9.00753275 22.9900393,12.0946605 C22.9900393,15.1739324 21.7734214,18.0626391 19.6455849,20.2031692 C19.3535641,20.4969322 18.8786924,20.4983444 18.5849295,20.2063235 C18.2911665,19.9143026 18.2897543,19.4394309 18.5817752,19.145668 C20.4329978,17.2834019 21.4900393,14.7735894 21.4900393,12.0946605 C21.4900393,9.4089026 20.4275654,6.89322181 18.5679613,5.02978367 C18.2753698,4.73658898 18.2758589,4.2617155 18.5690535,3.96912406 C18.8622482,3.67653262 19.3371217,3.67702165 19.6297132,3.97021633 Z M16.4901783,6.49794378 C17.9618152,7.97261488 18.8039928,9.96668727 18.8039928,12.0921781 C18.8039928,14.2122592 17.966117,16.2016903 16.5011051,17.6754418 C16.2090842,17.9692047 15.7342125,17.9706169 15.4404496,17.678596 C15.1466866,17.3865751 15.1452744,16.9117035 15.4372953,16.6179406 C16.6256934,15.4224531 17.3039928,13.8119162 17.3039928,12.0921781 C17.3039928,10.3680571 16.6222066,8.75375258 15.4284264,7.55751111 C15.1358349,7.26431643 15.136324,6.78944294 15.4295187,6.4968515 C15.7227133,6.20426006 16.1975868,6.20474909 16.4901783,6.49794378 Z M13.613475,15.0322585 C13.3215512,15.326118 12.8466801,15.3276871 12.5528206,15.0357634 C12.2589611,14.7438396 12.2573919,14.2689685 12.5493157,13.975109 C13.0399975,13.4811736 13.319589,12.817003 13.319589,12.1067087 C13.319589,11.4051196 13.0468694,10.7484563 12.5668561,10.2561312 C12.2776947,9.9595531 12.2837071,9.48471743 12.5802852,9.19555603 C12.8768633,8.90639462 13.3516989,8.91240702 13.6408603,9.2089851 C14.3913218,9.97869506 14.819589,11.0098911 14.819589,12.1067087 C14.819589,13.2171715 14.3805594,14.2600877 13.613475,15.0322585 Z M7.67146054,5.77188408 L4.379,8.34657593 L2.24981101,8.34757595 C1.00735931,8.34757593 0,9.35493524 0,10.5975759 L0,13.5975759 L0.00519081254,13.7516247 C0.084355084,14.9224143 1.05913601,15.8475759 2.25,15.8475759 L4.38,15.8465759 L7.67138834,18.4232113 C7.97934229,18.6642187 8.35904154,18.795134 8.75,18.795134 C9.71649831,18.795134 10.5,18.0116323 10.5,17.045134 L10.5,7.15001783 C10.5,6.75905937 10.3690847,6.37936011 10.1281338,6.07147837 C9.53247286,5.31035612 8.4325828,5.17622318 7.67146054,5.77188408 Z M8.94687625,6.99594076 C8.98129781,7.03992387 9,7.09416662 9,7.15001783 L9,17.045134 C9,17.1832052 8.88807119,17.295134 8.75,17.295134 C8.69414879,17.295134 8.63990604,17.2764318 8.59592293,17.2420103 L4.89755819,14.3469088 L2.24981101,14.347576 C1.83578644,14.3475759 1.5,14.0117895 1.5,13.5975759 L1.5,10.5975759 C1.5,10.1833624 1.83578644,9.84757593 2.25,9.84757593 L4.89763507,9.84690879 L8.59586895,6.95318383 C8.70465469,6.86804716 8.86178184,6.88720901 8.94687625,6.99594076 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_sound" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="合并形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_switch_camera.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_switch_camera.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c84bfa870a28323fded0a4ec59c1fd79a3ca4ce9
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_switch_camera.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_switch_camera</title>
+    <defs>
+        <path d="M3.24961696,10.9243661 L3.24990744,12.6099859 C2.14273101,13.2494301 1.5,13.9952583 1.5,14.75 C1.5,16.268106 4.21171106,17.8466135 8.24991457,18.4710245 L8.25,17.6465071 C8.25,17.3703647 8.47385763,17.1465071 8.75,17.1465071 C8.84280839,17.1465071 8.93378525,17.1723379 9.01274644,17.2211081 L11.8112588,18.949601 C12.0462001,19.0947119 12.1190222,19.4028051 11.9739113,19.6377464 C11.9330715,19.703868 11.8773804,19.7595592 11.8112588,19.800399 L9.01274644,21.5288919 C8.77780506,21.6740028 8.46971185,21.6011807 8.324601,21.3662393 C8.27583085,21.2872782 8.25,21.1963013 8.25,21.1034929 L8.25011361,19.9879773 C3.41861207,19.2930848 0,17.3135194 0,14.75 C0,13.2129798 1.2377215,11.8883207 3.24961696,10.9243661 Z M20.751376,10.9248419 C22.7626857,11.8887566 24,13.2132326 24,14.75 C24,17.4292572 20.2657342,19.4706455 15.0869977,20.0742092 C14.6755689,20.1221598 14.3031684,19.8275026 14.2552178,19.4160738 C14.2072672,19.0046451 14.5019245,18.6322445 14.9133532,18.5842939 L15.1814091,18.551466 C19.5316733,17.9927534 22.5,16.3383101 22.5,14.75 C22.5,13.9954879 21.85766,13.2498839 20.7511029,12.6105695 L20.751376,10.9248419 Z M14.1,2.25 C14.6539679,2.25 15.1628386,2.55532241 15.4235294,3.04411765 L15.93325,4 L17.25,4 C18.6307119,4 19.75,5.11928813 19.75,6.5 L19.75,12.5 C19.75,13.8807119 18.6307119,15 17.25,15 L6.75,15 C5.36928813,15 4.25,13.8807119 4.25,12.5 L4.25,6.5 C4.25,5.11928813 5.36928813,4 6.75,4 L8.0665,4 L8.57647059,3.04411765 C8.83716138,2.55532241 9.34603207,2.25 9.9,2.25 L14.1,2.25 Z M14.1,3.75 L9.89998802,3.75 L8.96636155,5.5 L6.75,5.5 C6.21445115,5.5 5.77723028,5.92099212 5.75122383,6.45008991 L5.75,6.5 L5.75,12.5 C5.75,13.0355488 6.17099212,13.4727697 6.70008991,13.4987762 L6.75,13.5 L17.25,13.5 C17.7855488,13.5 18.2227697,13.0790079 18.2487762,12.5499101 L18.25,12.5 L18.25,6.5 C18.25,5.96445115 17.8290079,5.52723028 17.2999101,5.50122383 L17.25,5.5 L15.0331808,5.5 L14.1,3.75 Z M12,6.25 C13.6568542,6.25 15,7.59314575 15,9.25 C15,10.9068542 13.6568542,12.25 12,12.25 C10.3431458,12.25 9,10.9068542 9,9.25 C9,7.59314575 10.3431458,6.25 12,6.25 Z M12,7.5 C11.0335017,7.5 10.25,8.28350169 10.25,9.25 C10.25,10.2164983 11.0335017,11 12,11 C12.9664983,11 13.75,10.2164983 13.75,9.25 C13.75,8.28350169 12.9664983,7.5 12,7.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_switch_camera" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_video.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_video.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1a57cd7b6b89db781d56a1817866150260a0f10b
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_video.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_video</title>
+    <defs>
+        <path d="M18.5,16.25 C18.5,18.1829966 16.9329966,19.75 15,19.75 L3.5,19.75 C1.56700338,19.75 0,18.1829966 0,16.25 L0,7.75 C0,5.81700338 1.56700338,4.25 3.5,4.25 L15,4.25 C16.9309935,4.25 18.4967519,5.81375738 18.499995,7.74399186 L18.5,16.25 Z M15.0622948,5.75095171 L3.5,5.75 C2.41627143,5.75 1.53386428,6.61195944 1.50095171,7.68770517 L1.5,16.25 C1.5,17.3337286 2.36195944,18.2161357 3.43770517,18.2490483 L3.5,18.25 L15,18.25 C16.0837286,18.25 16.9661357,17.3880406 16.9990483,16.3122948 L17,16.25 L17,7.75 C17,6.66627143 16.1380406,5.78386428 15.0622948,5.75095171 Z M21.4365407,6.85498937 C22.2922763,6.40572819 23.3501852,6.7352408 23.7994463,7.59097638 C23.9311765,7.84189105 24,8.12104371 24,8.4044357 L24,8.4044357 L24,15.5955643 C24,16.5620626 23.2164983,17.3455643 22.25,17.3455643 C21.966608,17.3455643 21.6874553,17.2767408 21.4365407,17.1450106 L21.4365407,17.1450106 L19.5,16.128 L19.5,14.433 L22.1337915,15.8169138 C22.1472334,15.8239708 22.1612425,15.829764 22.1756381,15.8342489 L22.2198037,15.843734 L22.25,15.8455643 C22.3880712,15.8455643 22.5,15.7336355 22.5,15.5955643 L22.5,15.5955643 L22.5,8.4044357 C22.5,8.36395113 22.4901681,8.32407218 22.4713495,8.28822723 L22.4713495,8.28822723 L22.4563079,8.26319502 C22.3857267,8.15982216 22.2473075,8.12349035 22.1337915,8.18308622 L22.1337915,8.18308622 L19.5,9.565 L19.5,7.871 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_video" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_video_filled.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_video_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..71d05632cdd4fad9836107014c0f235e23d06b60
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_video_filled.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_video_filled</title>
+    <defs>
+        <path d="M18,16.25 C18,18.1829966 16.4329966,19.75 14.5,19.75 L3.5,19.75 C1.56700338,19.75 2.36723813e-16,18.1829966 0,16.25 L0,7.75 C-2.36723813e-16,5.81700338 1.56700338,4.25 3.5,4.25 L14.5,4.25 C16.4329966,4.25 18,5.81700338 18,7.75 L18,16.25 Z M23.8189379,7.30399329 C23.9377676,7.52337101 24,7.7689244 24,8.01841801 L24,15.981582 C24,16.8100091 23.3284271,17.481582 22.5,17.481582 C22.2505064,17.481582 22.004953,17.4193495 21.7855753,17.3005199 L19,15.7911304 L19,8.20813041 L21.7855753,6.69948006 C22.5140046,6.30491418 23.4243721,6.57556397 23.8189379,7.30399329 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_video_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_voice_filled.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_voice_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..768da88933d7f1169f294f0935239c8a2a1400f9
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_voice_filled.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_voice_filled</title>
+    <defs>
+        <path d="M18.75,10.25 C19.3022847,10.25 19.75,10.6977153 19.75,11.25 C19.75,15.1912355 16.8080258,18.4453362 13.0003445,18.9360348 L13,21 C13,21.5522847 12.5522847,22 12,22 C11.4644512,22 11.0272303,21.5790079 11.0012238,21.0499101 L11,21 L11.0006622,18.9361644 C7.19249276,18.4459097 4.25,15.1915829 4.25,11.25 C4.25,10.6977153 4.69771525,10.25 5.25,10.25 C5.80228475,10.25 6.25,10.6977153 6.25,11.25 C6.25,14.4256373 8.82436269,17 12,17 C15.1438809,17 17.6984526,14.4768671 17.7492297,11.3450868 L17.75,11.25 C17.75,10.6977153 18.1977153,10.25 18.75,10.25 Z M12,2 C14.209139,2 16,3.790861 16,6 L16,6 L16,11.25 C16,13.459139 14.209139,15.25 12,15.25 C9.790861,15.25 8,13.459139 8,11.25 L8,11.25 L8,6 C8,3.790861 9.790861,2 12,2 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_voice_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_wlan.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_wlan.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e6de40c6a3e1c7800f1d90b4c840b45858617075
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_public_wlan.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_wlan</title>
+    <defs>
+        <path d="M12,11.7804878 C14.1280211,11.7804878 16.1103937,12.6926978 17.4936156,14.2548981 C17.7682048,14.565017 17.7394022,15.0390164 17.4292834,15.3136055 C17.1191645,15.5881946 16.6451651,15.5593921 16.370576,15.2492733 C15.2691332,14.0053122 13.6939783,13.2804878 12,13.2804878 C10.3053534,13.2804878 8.7296353,14.0058888 7.62815915,15.2507023 C7.35367082,15.5609103 6.87968076,15.5898669 6.56947271,15.3153785 C6.25926467,15.0408902 6.23030812,14.5669001 6.50479645,14.2566921 C7.88805947,12.6934223 9.87113829,11.7804878 12,11.7804878 Z M12,7.3902439 C15.3022512,7.3902439 18.3862449,8.76342338 20.5904015,11.1348759 C20.8723974,11.4382753 20.8550464,11.9128319 20.551647,12.1948278 C20.2482476,12.4768237 19.773691,12.4594727 19.4916951,12.1560733 C17.568453,10.0868568 14.8810063,8.8902439 12,8.8902439 C9.11872612,8.8902439 6.43105232,10.0870806 4.50778413,12.1566336 C4.22581081,12.460054 3.75125546,12.4774402 3.44783509,12.1954669 C3.14441472,11.9134936 3.12702846,11.4389382 3.40900179,11.1355179 C5.61318808,8.76368003 8.69744189,7.3902439 12,7.3902439 Z M12,3 C16.4794444,3 20.6672305,4.83774704 23.6905124,8.02289555 C23.9756724,8.32332301 23.9632957,8.79803543 23.6628682,9.08319542 C23.3624407,9.3683554 22.8877283,9.35597867 22.6025683,9.05555121 C19.8596461,6.16577286 16.063748,4.5 12,4.5 C7.93672757,4.5 4.14123459,6.16538032 1.39836839,9.05456443 C1.11318062,9.35496551 0.638467056,9.36729833 0.338065974,9.08211056 C0.0376648916,8.79692279 0.0253320663,8.32220923 0.310519838,8.02180815 C3.33374037,4.83731424 7.52108017,3 12,3 Z M12,16.25 C13.2426407,16.25 14.25,17.2573593 14.25,18.5 C14.25,19.7426407 13.2426407,20.75 12,20.75 C10.7573593,20.75 9.75,19.7426407 9.75,18.5 C9.75,17.2573593 10.7573593,16.25 12,16.25 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_wlan" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="合并形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_tea.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_tea.png
new file mode 100644
index 0000000000000000000000000000000000000000..87fb43a2bf3509f7e5c0ade005adabb5dc39ab5b
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/ic_tea.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_avatar.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb8baf21230593fececd3074f6fd4d4e96ee9f1c
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_avatar.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_contacts.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_contacts.svg
new file mode 100644
index 0000000000000000000000000000000000000000..87384ef4e403669b7f591cb5bc3a0cfc40a37944
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_contacts.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Bottom bar/icon_通讯录</title>
+    <g id="Bottom-bar/icon_通讯录" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.2">
+        <g id="ic_public_contacts_group_filled-(1)" transform="translate(2.000000, 2.000000)" fill="#000000" fill-rule="nonzero">
+            <path d="M8.66600123,10.5 C14.0866093,10.5 16.2009,14.4535785 16.7824198,15.7777778 C16.9919104,16.2548162 17.1615554,16.8850399 17.2913549,17.6684491 C17.4718116,18.7577255 16.7478331,19.7892038 15.6742837,19.9723239 C15.566303,19.9907426 15.4569975,20 15.3475016,20 L1.97114844,20 C0.88251322,20 0,19.1045797 0,18 C0,17.8896708 0.00899751956,17.7795307 0.0269004478,17.6707071 C0.155954019,16.8862509 0.330181431,16.2552744 0.549582673,15.7777778 C1.15802879,14.4535785 3.24539312,10.5 8.66600123,10.5 Z M13.5844746,10.3144625 C17.2044284,10.7984599 20,13.942978 20,17.75 C20,18.5595992 19.3678647,19.2193929 18.5770752,19.2489654 L18.5216523,19.250083 L18.4556795,19.250083 C18.4906442,19.1887813 18.5131489,19.1192484 18.5196792,19.0450502 L18.5216523,19 L18.5216523,18.5 C18.5216523,15.1281704 16.4911321,12.1894203 13.4858003,10.6478036 L13.484638,10.6472076 L13.4834825,10.6465918 C13.3978282,10.6027174 13.3634456,10.4966966 13.4066867,10.4097878 C13.431644,10.3596272 13.4779927,10.3255813 13.530491,10.3158227 L13.5844746,10.3144625 L13.5844746,10.3144625 Z M11.3763053,0 C13.8257119,0 15.8113483,2.01471863 15.8113483,4.5 C15.8113483,5.62311012 15.405846,6.65012296 14.7352899,7.43853308 C14.2694799,7.98621183 13.6757667,8.4187515 13.0012303,8.6883823 L12.9913643,8.6921429 L12.9913643,8.6921429 L12.9768926,8.6974221 C12.9140876,8.7197886 12.8453042,8.686261 12.8232605,8.6225361 C12.8139274,8.5955555 12.8143369,8.5665822 12.823633,8.5404743 L12.844135,8.5040687 L12.844135,8.5040687 C13.6202391,7.55263148 14.0866093,6.33157673 14.0866093,5 C14.0866093,2.96455014 12.9968786,1.18734834 11.3770851,0.23625986 L11.3517215,0.2215584 L11.3517215,0.2215584 L11.3239656,0.20589364 C11.2716583,0.17656384 11.2526881,0.10976282 11.2815945,0.05668939 C11.3006445,0.02171266 11.3369198,0 11.3763053,0 Z M8.66600123,0.5 C6.21659462,0.5 4.23095823,2.51471863 4.23095823,5 C4.23095823,7.48528137 6.21659462,9.5 8.66600123,9.5 C11.1154079,9.5 13.1010442,7.48528137 13.1010442,5 C13.1010442,2.51471863 11.1154079,0.5 8.66600123,0.5 Z" id="path-1"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_contacts_selected.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_contacts_selected.svg
new file mode 100644
index 0000000000000000000000000000000000000000..704a44087b4cc10ac305fa34b8e6d5228d7294f1
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_contacts_selected.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>通讯录</title>
+    <g id="通讯录" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" transform="translate(2.000000, 2.000000)" fill="#0A59F7" fill-rule="nonzero">
+            <path d="M8.79292615,10.5 C14.2929262,10.5 16.4381834,14.4535785 17.0282203,15.7777778 C17.2407792,16.2548162 17.4129089,16.8850399 17.5446095,17.6684491 C17.7277092,18.7577255 16.9931271,19.7892038 15.9038541,19.9723239 C15.7942919,19.9907426 15.6833855,20 15.5722859,20 L2.00001849,20 C0.89543878,20 0,19.1045797 0,18 C0,17.8896708 0.0091293,17.7795307 0.02729444,17.6707071 C0.15823817,16.8862509 0.33501737,16.2552744 0.55763203,15.7777778 C1.17498964,14.4535785 3.29292615,10.5 8.79292615,10.5 Z" id="path-1-path"></path>
+            <path d="M13.783437,10.3144625 C17.4564098,10.7984599 20.2929262,13.942978 20.2929262,17.75 C20.2929262,18.5595992 19.6515325,19.2193929 18.8491608,19.2489654 L18.7929262,19.250083 L18.7259871,19.250083 C18.7614639,19.1887813 18.7842982,19.1192484 18.7909242,19.0450502 L18.7929262,19 L18.7929262,18.5 C18.7929262,15.1281704 16.7326663,12.1894203 13.6833175,10.6478036 L13.6821382,10.6472076 L13.6809658,10.6465918 C13.594057,10.6027174 13.5591708,10.4966966 13.6030452,10.4097878 C13.628368,10.3596272 13.6753956,10.3255813 13.7286628,10.3158227 L13.783437,10.3144625 L13.783437,10.3144625 Z" id="path-1-path" fill-opacity="0.6"></path>
+            <path d="M11.5429262,0 C14.0282076,0 16.0429262,2.01471863 16.0429262,4.5 C16.0429262,5.62311012 15.6314848,6.65012296 14.9511075,7.43853308 C14.4784751,7.98621183 13.8760662,8.4187515 13.1916504,8.6883823 L13.1816399,8.6921429 L13.1816399,8.6921429 L13.1669562,8.6974221 C13.1032313,8.7197886 13.0334405,8.686261 13.011074,8.6225361 C13.0016042,8.5955555 13.0020197,8.5665822 13.0114519,8.5404743 L13.0322542,8.5040687 L13.0322542,8.5040687 C13.8197254,7.55263148 14.2929262,6.33157673 14.2929262,5 C14.2929262,2.96455014 13.1872349,1.18734834 11.5437174,0.23625986 L11.5179824,0.2215584 L11.5179824,0.2215584 L11.4898199,0.20589364 C11.4367465,0.17656384 11.4174985,0.10976282 11.4468283,0.05668939 C11.4661573,0.02171266 11.5029639,0 11.5429262,0 Z" id="path-1-path" fill-opacity="0.6"></path>
+            <path d="M8.79292615,0.5 C6.30764478,0.5 4.29292615,2.51471863 4.29292615,5 C4.29292615,7.48528137 6.30764478,9.5 8.79292615,9.5 C11.2782076,9.5 13.2929261,7.48528137 13.2929261,5 C13.2929261,2.51471863 11.2782076,0.5 8.79292615,0.5 Z" id="path-1-path"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_me.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_me.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9341f6b11233abe3e35a6766eb03ea511c466c19
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_me.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>BottomNavigationBar/item/normal/icon</title>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="AppBar/文档" transform="translate(-162.000000, -17.000000)" fill="#000000" fill-rule="nonzero">
+            <g id="编组" transform="translate(161.000000, 16.000000)">
+                <g id="形状结合" transform="translate(1.500033, 1.500000)">
+                    <path d="M10.6732784,0.00140414107 L10.4999672,8.95283847e-13 C4.76563276,8.95283847e-13 0.0942098729,4.60067747 0.00137132636,10.3266888 L1.98951966e-13,10.4918989 C1.98951966e-13,16.2343344 4.60064466,20.9057573 10.326656,20.9985959 L10.4918661,20.9999672 C16.2343016,20.9999672 20.9057245,16.3993225 20.998563,10.6733112 L20.9999344,10.5081011 C20.9999344,4.76566558 16.3992897,0.0942426876 10.6732784,0.00140414107 Z" fill-opacity="0.2"></path>
+                    <path d="M10.4999672,11.3900553 C13.5199031,11.3900553 16.0478545,13.4964918 16.6947103,16.3202539 C15.1438117,17.970056 12.942184,19 10.5,19 C8.05781599,19 5.8561883,17.970056 4.30578106,16.320832 C4.95207989,13.4964918 7.48003124,11.3900553 10.4999672,11.3900553 Z M10.4999672,4.80882353 C12.1568214,4.80882353 13.4999672,6.15196928 13.4999672,7.80882353 C13.4999672,9.46567778 12.1568214,10.8088235 10.4999672,10.8088235 C8.84311294,10.8088235 7.49996719,9.46567778 7.49996719,7.80882353 C7.49996719,6.15196928 8.84311294,4.80882353 10.4999672,4.80882353 Z" fill-opacity="0.25"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_message.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_message.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fcff1b79123ff735aa93750579c15d9ef1e51ea5
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_message.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Bottom bar/icon_消息_G</title>
+    <g id="Bottom-bar/icon_消息_G" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ic_public_community_messages_filled" transform="translate(1.000000, 4.000000)" fill="#CCCCCC" fill-rule="nonzero">
+            <path d="M18.0653051,3.4524421 C20.3512708,4.20787574 22,6.35302062 22,8.88135459 C22,11.9681904 19.5424207,14.4838485 16.4680344,14.5966021 L16.2525646,14.6005469 L15.8533038,14.59887 C15.8893963,14.7605267 15.9413453,14.9773799 15.9687212,15.0888179 L15.9818747,15.141746 L16.025413,15.3089418 L16.0810086,15.5118345 C16.1749412,15.8465257 16.2927702,16.2294762 16.4344233,16.6600751 L16.5451289,16.9919489 L16.556099,17.0267961 L16.5779174,17.1223073 C16.6869825,17.7826685 15.8972193,18.2592352 15.3494346,17.8453032 L15.2729489,17.780036 L11.9562667,14.6004324 L11.1252131,14.6005469 C10.6396733,14.6005469 10.1681957,14.5406351 9.71783892,14.4278356 L11.0315333,13.1611621 L11.4756715,13.1614158 C15.3980619,13.1614158 18.5777778,9.99732511 18.5777778,6.09422139 C18.5777778,5.23553859 18.4238796,4.41262401 18.1420328,3.65129989 L18.0653051,3.4524421 Z M11.4756837,0 C14.8580501,0 17.6,2.72847586 17.6,6.09422139 C17.6,9.45996693 14.8580501,12.1884428 11.4756837,12.1884428 L10.6352889,12.1884324 L7.12275991,15.5764229 C6.5424689,16.1360222 5.61654946,15.6107537 5.7417273,14.8713738 L5.76413049,14.7737902 L5.77574583,14.736658 C5.97898782,14.1314321 6.14284481,13.6052846 6.26716731,13.159487 L6.32603333,12.9432898 L6.37213272,12.7651303 C6.38369793,12.719211 6.41152137,12.6043861 6.44180255,12.4758299 L6.48734257,12.2795936 C6.49466476,12.24747 6.50170931,12.2162124 6.50826057,12.1866829 L6.12431632,12.1884428 C2.74194982,12.1884428 0,9.45996693 0,6.09422139 C0,2.72847586 2.74194982,0 6.12431632,0 L11.4756837,0 Z" id="path-1"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_message_selected.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_message_selected.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e7dbeaebd7d7a606d50b2dfe2bff0ad4ebca7957
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_message_selected.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Bottom bar/icon_消息_B</title>
+    <g id="Bottom-bar/icon_消息_B" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ic_public_community_messages_filled" transform="translate(1.000000, 4.000000)" fill="#0A59F7" fill-rule="nonzero">
+            <path d="M18.0653051,3.4524421 C20.3512708,4.20787574 22,6.35302062 22,8.88135459 C22,11.9681904 19.5424207,14.4838485 16.4680344,14.5966021 L16.2525646,14.6005469 L15.8533038,14.59887 C15.8893963,14.7605267 15.9413453,14.9773799 15.9687212,15.0888179 L15.9818747,15.141746 L16.025413,15.3089418 L16.0810086,15.5118345 C16.1749412,15.8465257 16.2927702,16.2294762 16.4344233,16.6600751 L16.5451289,16.9919489 L16.556099,17.0267961 L16.5779174,17.1223073 C16.6869825,17.7826685 15.8972193,18.2592352 15.3494346,17.8453032 L15.2729489,17.780036 L11.9562667,14.6004324 L11.1252131,14.6005469 C10.6396733,14.6005469 10.1681957,14.5406351 9.71783892,14.4278356 L11.0315333,13.1611621 L11.4756715,13.1614158 C15.3980619,13.1614158 18.5777778,9.99732511 18.5777778,6.09422139 C18.5777778,5.23553859 18.4238796,4.41262401 18.1420328,3.65129989 L18.0653051,3.4524421 Z M11.4756837,0 C14.8580501,0 17.6,2.72847586 17.6,6.09422139 C17.6,9.45996693 14.8580501,12.1884428 11.4756837,12.1884428 L10.6352889,12.1884324 L7.12275991,15.5764229 C6.5424689,16.1360222 5.61654946,15.6107537 5.7417273,14.8713738 L5.76413049,14.7737902 L5.77574583,14.736658 C5.97898782,14.1314321 6.14284481,13.6052846 6.26716731,13.159487 L6.32603333,12.9432898 L6.37213272,12.7651303 C6.38369793,12.719211 6.41152137,12.6043861 6.44180255,12.4758299 L6.48734257,12.2795936 C6.49466476,12.24747 6.50170931,12.2162124 6.50826057,12.1866829 L6.12431632,12.1884428 C2.74194982,12.1884428 0,9.45996693 0,6.09422139 C0,2.72847586 2.74194982,0 6.12431632,0 L11.4756837,0 Z" id="path-1"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_social_circle.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_social_circle.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bc0a376e11e4008ec97cb2c97957eedcc65e529e
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_social_circle.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Bottom bar/icon_社交圈_G</title>
+    <g id="Bottom-bar/icon_社交圈_G" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M12,2.5 C13.1045695,2.5 14,3.3954305 14,4.5 C14,5.24689147 13.5905878,5.8981596 12.9839422,6.24162558 L16.3974708,12.2777778 L18.781131,10.0230942 C18.6025806,9.72376236 18.5,9.37386068 18.5,9 C18.5,7.8954305 19.3954305,7 20.5,7 C21.6045695,7 22.5,7.8954305 22.5,9 C22.5,10.1045695 21.6045695,11 20.5,11 C20.4184985,11 20.3381355,10.995125 20.2591869,10.9856506 L18.2959647,18.3847525 C18.1214804,19.0422402 17.5263951,19.5 16.846149,19.5 L16.846149,19.5 L7.15598656,19.5 C6.47474302,19.5 5.87904811,19.0409231 5.70548538,18.3821601 L5.70548538,18.3821601 L3.75678324,10.9836689 C3.67270997,10.9944445 3.58700376,11 3.5,11 C2.3954305,11 1.5,10.1045695 1.5,9 C1.5,7.8954305 2.3954305,7 3.5,7 C4.6045695,7 5.5,7.8954305 5.5,9 C5.5,9.36556188 5.4019229,9.70821663 5.23064652,10.0030864 L7.64781411,12.2777778 L11.0221309,6.24504998 C10.4121462,5.90250032 10,5.24938111 10,4.5 C10,3.3954305 10.8954305,2.5 12,2.5 Z" id="形状结合" fill-opacity="0.2" fill="#000000"></path>
+        <circle id="椭圆形备份-5" fill-opacity="0.25" fill="#000000" cx="12" cy="14.25" r="1.75"></circle>
+        <path d="M17.2757886,20.5 C17.6757595,20.5 18,20.8357864 18,21.25 C18,21.6296958 17.7275479,21.943491 17.3740598,21.9931534 L17.2757886,22 L6.7242114,22 C6.32424049,22 6,21.6642136 6,21.25 C6,20.8703042 6.27245208,20.556509 6.6259402,20.5068466 L6.7242114,20.5 L17.2757886,20.5 Z" id="路径-3" fill-opacity="0.2" fill="#000000" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_social_circle_selected.svg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_social_circle_selected.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c501a0a512384f6b4f5a825e76cc46b074361077
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/media/icon_social_circle_selected.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Bottom bar/icon_社交圈_B</title>
+    <g id="Bottom-bar/icon_社交圈_B" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M12,2.5 C13.1045695,2.5 14,3.3954305 14,4.5 C14,5.24689147 13.5905878,5.8981596 12.9839422,6.24162558 L16.3974708,12.2777778 L18.781131,10.0230942 C18.6025806,9.72376236 18.5,9.37386068 18.5,9 C18.5,7.8954305 19.3954305,7 20.5,7 C21.6045695,7 22.5,7.8954305 22.5,9 C22.5,10.1045695 21.6045695,11 20.5,11 C20.4184985,11 20.3381355,10.995125 20.2591869,10.9856506 L18.2959647,18.3847525 C18.1214804,19.0422402 17.5263951,19.5 16.846149,19.5 L16.846149,19.5 L7.15598656,19.5 C6.47474302,19.5 5.87904811,19.0409231 5.70548538,18.3821601 L5.70548538,18.3821601 L3.75678324,10.9836689 C3.67270997,10.9944445 3.58700376,11 3.5,11 C2.3954305,11 1.5,10.1045695 1.5,9 C1.5,7.8954305 2.3954305,7 3.5,7 C4.6045695,7 5.5,7.8954305 5.5,9 C5.5,9.36556188 5.4019229,9.70821663 5.23064652,10.0030864 L7.64781411,12.2777778 L11.0221309,6.24504998 C10.4121462,5.90250032 10,5.24938111 10,4.5 C10,3.3954305 10.8954305,2.5 12,2.5 Z" id="形状结合" fill="#0A59F7"></path>
+        <circle id="椭圆形备份-5" fill-opacity="0.25" fill="#FFFFFF" cx="12" cy="14.25" r="1.75"></circle>
+        <path d="M17.2757886,20.5 C17.6757595,20.5 18,20.8357864 18,21.25 C18,21.6296958 17.7275479,21.943491 17.3740598,21.9931534 L17.2757886,22 L6.7242114,22 C6.32424049,22 6,21.6642136 6,21.25 C6,20.8703042 6.27245208,20.556509 6.6259402,20.5068466 L6.7242114,20.5 L17.2757886,20.5 Z" id="路径-3" fill="#0A59F7" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/img.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/img.png
new file mode 100644
index 0000000000000000000000000000000000000000..720a01aabcc02091c26734f02e4962814c62e504
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/img.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/picture_applet_link.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/picture_applet_link.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5331685059a1672760726791d3b455a1ccfd3d1
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/picture_applet_link.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/setting.jpeg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/setting.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..57e67dd49d39ad64ef090f59db3db9dfe6632106
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/setting.jpeg differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle1.png b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle1.png
new file mode 100644
index 0000000000000000000000000000000000000000..c154bf4ce1ede2b1ab76d94a388748add9621005
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle1.png differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle2.jpg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1f48c2abb9c15499951edb75092ec61bd92042a7
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle2.jpg differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle3.jpg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c743fffbde638107707801fb7740c530c4f6cdd2
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle3.jpg differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle4.jpg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..dfb5b410f8ee457c63b3367b9391f27e4524d956
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle4.jpg differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle5.jpg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle5.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..eaa682880b28b9a834d1ddb9e97344adc6ff13a2
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle5.jpg differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle6.jpg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle6.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9e7ffcdb5f5058f36e56f66c305df951769b83da
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle6.jpg differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle7.jpg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle7.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..48b12f781efaa4838b7396eb1455771a85f93b05
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle7.jpg differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle8.jpg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle8.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a8f2ac8fed4d716a09ec3216bb8610efbdc2a911
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle8.jpg differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle9.jpg b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle9.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e3be34e2bdc99d1e90d5878624c3c05f4f715102
Binary files /dev/null and b/MultiDeviceCommunication/features/home/src/main/resources/base/media/social_circle9.jpg differ
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/base/profile/main_pages.json b/MultiDeviceCommunication/features/home/src/main/resources/base/profile/main_pages.json
new file mode 100644
index 0000000000000000000000000000000000000000..1898d94f58d6128ab712be2c68acc7c98e9ab9ce
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/base/profile/main_pages.json
@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/Index"
+  ]
+}
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/en_US/element/string.json b/MultiDeviceCommunication/features/home/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..1cdf25e4ee85e2a11c4619c25d2fc0ed82f769bb
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/en_US/element/string.json
@@ -0,0 +1,116 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "Message",
+      "value": "Message"
+    },
+    {
+      "name": "Contacts",
+      "value": "Contacts"
+    },
+    {
+      "name": "SocialCircle",
+      "value": "SocialCircle"
+    },
+    {
+      "name": "Me",
+      "value": "Me"
+    },
+    {
+      "name": "news",
+      "value": "Latest news"
+    },
+    {
+      "name": "group",
+      "value": "group"
+    },
+    {
+      "name": "card",
+      "value": "name card holder"
+    },
+    {
+      "name": "Alan",
+      "value": "Alan"
+    },
+    {
+      "name": "AQin",
+      "value": "AQin"
+    },
+    {
+      "name": "CaiLan",
+      "value": "CaiLan"
+    },
+    {
+      "name": "Deng",
+      "value": "Deng"
+    },
+    {
+      "name": "excel",
+      "value": "excel"
+    },
+    {
+      "name": "FanYi",
+      "value": "FanYi"
+    },
+    {
+      "name": "FenFen",
+      "value": "FenFen"
+    },
+    {
+      "name": "ge",
+      "value": "ge"
+    },
+    {
+      "name": "LiX",
+      "value": "LiX"
+    },
+    {
+      "name": "Ma",
+      "value": "Ma"
+    },
+    {
+      "name": "milk",
+      "value": "Fen-fen invited you for milk tea"
+    },
+    {
+      "name": "Speed",
+      "value": "Please drink milk tea, quickly order it!! Speed, speed, all that's missing is you"
+    },
+    {
+      "name": "happy",
+      "value": "Ha-ha, what's the happy news today"
+    },
+    {
+      "name": "plan",
+      "value": "Marketing Department 2023 new product promotion plan"
+    },
+    {
+      "name": "jack",
+      "value": "This is the material for tomorrow's meeting. Please send it to Jack for his confirmation"
+    },
+    {
+      "name": "ok",
+      "value": "Ok, copy that"
+    },
+    {
+      "name": "okay",
+      "value": "Okay, I'll be there tomorrow"
+    },
+    {
+      "name": "yesterday",
+      "value": "yesterday"
+    },
+    {
+      "name": "document",
+      "value": "document"
+    },
+    {
+      "name": "search",
+      "value": "Search..."
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/home/src/main/resources/zh_CN/element/string.json b/MultiDeviceCommunication/features/home/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..cdcacc4cc093443781952bbe2044b0da2a62c6ba
--- /dev/null
+++ b/MultiDeviceCommunication/features/home/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,116 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "Message",
+      "value": "消息"
+    },
+    {
+      "name": "Contacts",
+      "value": "通讯录"
+    },
+    {
+      "name": "SocialCircle",
+      "value": "朋友圈"
+    },
+    {
+      "name": "Me",
+      "value": "我的"
+    },
+    {
+      "name": "news",
+      "value": "最新动态"
+    },
+    {
+      "name": "group",
+      "value": "群组"
+    },
+    {
+      "name": "card",
+      "value": "名片夹"
+    },
+    {
+      "name": "Alan",
+      "value": "阿兰"
+    },
+    {
+      "name": "AQin",
+      "value": "AQin"
+    },
+    {
+      "name": "CaiLan",
+      "value": "菜篮"
+    },
+    {
+      "name": "Deng",
+      "value": "邓双双"
+    },
+    {
+      "name": "excel",
+      "value": "excel教程"
+    },
+    {
+      "name": "FanYi",
+      "value": "翻译"
+    },
+    {
+      "name": "FenFen",
+      "value": "芬芬"
+    },
+    {
+      "name": "ge",
+      "value": "哥白尼"
+    },
+    {
+      "name": "LiX",
+      "value": "李小二"
+    },
+    {
+      "name": "Ma",
+      "value": "马老师"
+    },
+    {
+      "name": "milk",
+      "value": "芬芬邀请你喝奶茶啦"
+    },
+    {
+      "name": "Speed",
+      "value": "请你喝奶茶，快点单吧！！速度速度，就差你了"
+    },
+    {
+      "name": "happy",
+      "value": "哈哈，今天有什么喜事说来听听"
+    },
+    {
+      "name": "plan",
+      "value": "市场部2023年新产品宣传规划"
+    },
+    {
+      "name": "jack",
+      "value": "这是明天会议的资料，请发给Jack，让他确认"
+    },
+    {
+      "name": "ok",
+      "value": "好的，收到"
+    },
+    {
+      "name": "okay",
+      "value": "好的，我明天过去"
+    },
+    {
+      "name": "yesterday",
+      "value": "昨天"
+    },
+    {
+      "name": "document",
+      "value": "文档"
+    },
+    {
+      "name": "search",
+      "value": "搜索..."
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/socialCircle/Index.ets b/MultiDeviceCommunication/features/socialCircle/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6d1fe2d1b6c2fa9b2f9783f91ff7c4b79bb73c68
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/Index.ets
@@ -0,0 +1 @@
+export { SocialCircle } from "./src/main/ets/pages/Index";
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/socialCircle/build-profile.json5 b/MultiDeviceCommunication/features/socialCircle/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/socialCircle/hvigorfile.ts b/MultiDeviceCommunication/features/socialCircle/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiDeviceCommunication/features/socialCircle/obfuscation-rules.txt b/MultiDeviceCommunication/features/socialCircle/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..985b2aeb7658286b17bd26eab8f217c3fe75ea8b
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/obfuscation-rules.txt
@@ -0,0 +1,18 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/socialCircle/oh-package.json5 b/MultiDeviceCommunication/features/socialCircle/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..a16075ba62c8ce36a4f6a564abc9ea87ba8bb849
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/oh-package.json5
@@ -0,0 +1,13 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "socialcircle",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/base": "file:../../common/base"
+  }
+}
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/ets/constants/PictureConstants.ets b/MultiDeviceCommunication/features/socialCircle/src/main/ets/constants/PictureConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..80a14f205f12a691c515d228af2d6cf11b70468d
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/src/main/ets/constants/PictureConstants.ets
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { PictureArrayInterface } from '../viewmodel/CommonViewModel';
+
+export class PictureConstants {
+  static readonly ICON_BORDER_RADIUS = 6;
+  static readonly USER_NAME = $r('app.string.xiaole');
+  static readonly USER_MESSAGE = $r('app.string.see');
+  static readonly COLUMNS_TEMPLATE = '1fr 1fr 1fr';
+  static readonly TEMPLATE_BUSINESS = '1fr';
+  static readonly MAX_COLUMN_NUM = 3;
+}
+
+function getSocialCircleList(): PictureArrayInterface[] {
+  const pictures: Resource[] = [
+    $r('app.media.social_circle1'),
+    $r('app.media.social_circle2'),
+    $r('app.media.social_circle3'),
+    $r('app.media.social_circle4'),
+    $r('app.media.social_circle5'),
+    $r('app.media.social_circle6'),
+    $r('app.media.social_circle7'),
+    $r('app.media.social_circle8'),
+    $r('app.media.social_circle9')];
+  const socialCircleList: PictureArrayInterface[] = new Array(9).fill(1)
+    .map((item: number, index: number): PictureArrayInterface => {
+      return new PictureArrayInterface(pictures.slice(0, index + 1))
+    });
+  return socialCircleList;
+}
+
+export default getSocialCircleList;
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/ets/pages/Index.ets b/MultiDeviceCommunication/features/socialCircle/src/main/ets/pages/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..7e8267cc937ea3518890f9ba330bb8c7738f46aa
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/src/main/ets/pages/Index.ets
@@ -0,0 +1,116 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, BaseConstants } from '@ohos/base';
+import getSocialCircleList, { PictureConstants } from '../constants/PictureConstants';
+import { PictureArrayInterface, PictureInterface } from '../viewmodel/CommonViewModel';
+import { deviceInfo } from '@kit.BasicServicesKit';
+
+@Entry
+@Component
+export struct SocialCircle {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+  private socialCircleList: PictureArrayInterface[] = getSocialCircleList();
+
+  getRowsTemplate(length: number): string {
+    let rowNumber: number = length % PictureConstants.MAX_COLUMN_NUM === 0 ? length / PictureConstants.MAX_COLUMN_NUM :
+      (Math.floor(length / PictureConstants.MAX_COLUMN_NUM) + 1)
+    return new Array(rowNumber).fill(PictureConstants.TEMPLATE_BUSINESS).join(' ');
+  }
+
+  /**
+   * get picture aspect ratio
+   */
+  getAspectRatio(length: number): number {
+    let rowNumber: number = length % PictureConstants.MAX_COLUMN_NUM === 0 ? length / PictureConstants.MAX_COLUMN_NUM :
+      (Math.floor(length / PictureConstants.MAX_COLUMN_NUM) + 1)
+
+    return PictureConstants.MAX_COLUMN_NUM / rowNumber
+  }
+
+  build() {
+    Flex({ direction: FlexDirection.Column }) {
+      List() {
+        ForEach(this.socialCircleList, (item: PictureArrayInterface) => {
+          ListItem() {
+            this.CircleItem(item)
+          }
+        }, (item: PictureArrayInterface, index: number) => index + JSON.stringify(item))
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height(BaseConstants.FULL_HEIGHT)
+    }
+    .backgroundColor(Color.White)
+    .height(BaseConstants.FULL_HEIGHT)
+    .width(BaseConstants.FULL_WIDTH)
+    .padding({
+      top: deviceInfo.deviceType === BaseConstants.DEVICE_2IN1 ? $r('app.float.zero') : $r('app.float.device_padding_top')
+    })
+  }
+
+  @Builder
+  CircleItem(pictureArray: PictureArrayInterface) {
+    Flex() {
+      Image($r('app.media.icon_avatar'))
+        .height($r('app.float.icon_height'))
+        .width($r('app.float.icon_width'))
+        .margin({ right: $r('app.float.icon_right') })
+        .borderRadius(PictureConstants.ICON_BORDER_RADIUS)
+        .objectFit(ImageFit.Auto)
+      Column() {
+        Text(PictureConstants.USER_NAME)
+          .fontFamily(BaseConstants.FONT_FAMILY_MEDIUM)
+          .fontSize(BaseConstants.FONT_SIZE_FOURTEEN)
+          .fontColor(Color.Black)
+          .fontWeight(BaseConstants.FONT_WEIGHT_FIVE)
+          .margin({ bottom: $r('app.float.user_name_bottom') })
+        Text(PictureConstants.USER_MESSAGE)
+          .fontFamily(BaseConstants.FONT_FAMILY_NORMAL)
+          .fontSize(BaseConstants.FONT_SIZE_TWELVE)
+          .fontColor(Color.Black)
+          .fontWeight(BaseConstants.FONT_WEIGHT_FOUR)
+          .margin({ bottom: $r('app.float.user_message_bottom') })
+
+        Grid() {
+          ForEach(pictureArray.pictures, (picture: PictureInterface) => {
+            GridItem() {
+              Image(picture.src)
+                .height(BaseConstants.FULL_HEIGHT)
+                .width(BaseConstants.FULL_WIDTH)
+                .autoResize(true)
+
+            }
+          }, (picture: PictureInterface, index: number) => index + JSON.stringify(picture))
+        }
+        .rowsTemplate(this.getRowsTemplate(pictureArray.pictures.length))
+        .columnsTemplate(PictureConstants.COLUMNS_TEMPLATE)
+        .columnsGap($r('app.float.picture_gap'))
+        .rowsGap($r('app.float.picture_gap'))
+        .aspectRatio(this.getAspectRatio(pictureArray.pictures.length))
+        .width(BaseConstants.FULL_WIDTH)
+      }
+      .alignItems(HorizontalAlign.Start)
+      .flexShrink(BaseConstants.FLEX_SHRINK_ONE)
+      .width(BaseConstants.FULL_WIDTH)
+    }
+    .padding({
+      left: $r('app.float.header_left'),
+      right: $r('app.float.header_right'),
+      top: $r('app.float.header_top'),
+      bottom: $r('app.float.header_bottom')
+    })
+    .width(BaseConstants.FULL_WIDTH)
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/ets/viewmodel/CommonViewModel.ets b/MultiDeviceCommunication/features/socialCircle/src/main/ets/viewmodel/CommonViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..da577890cc4978931db18c5a285cf2e04fff46af
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/src/main/ets/viewmodel/CommonViewModel.ets
@@ -0,0 +1,48 @@
+/*
+* Copyright (c) 2023 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+
+interface SocialCircleItemInterface {
+  icon: Resource;
+  name: string;
+  msg: string;
+  pictureList: PictureInterface[];
+};
+
+/**
+ * Picture array interface
+ */
+class PictureArrayInterface {
+  pictures: PictureInterface[] = [];
+
+  constructor(pictureSource: Resource[]) {
+    pictureSource.forEach(item => {
+      this.pictures.push(new PictureInterface(item));
+    })
+  }
+}
+
+/**
+ * Picture interface
+ */
+class PictureInterface {
+  src: Resource;
+
+  constructor(src: Resource) {
+    this.src = src;
+  }
+}
+
+export { SocialCircleItemInterface, PictureArrayInterface, PictureInterface };
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/module.json5 b/MultiDeviceCommunication/features/socialCircle/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..56bf3a0762b62cf20803c4885bd7b94094afb13e
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/src/main/module.json5
@@ -0,0 +1,11 @@
+{
+  "module": {
+    "name": "socialCircle",
+    "type": "har",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/element/color.json b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..1bbc9aa9617e97c45440e1d3d66afc1154837012
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/element/color.json
@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/element/float.json b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..0cd621cb6dc2ea17edd3159f59e9488bfbe32650
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/element/float.json
@@ -0,0 +1,52 @@
+{
+  "float": [
+    {
+      "name": "icon_height",
+      "value": "40vp"
+    },
+    {
+      "name": "icon_width",
+      "value": "40vp"
+    },
+    {
+      "name": "icon_right",
+      "value": "8vp"
+    },
+    {
+      "name": "user_name_bottom",
+      "value": "6vp"
+    },
+    {
+      "name": "user_message_bottom",
+      "value": "8vp"
+    },
+    {
+      "name": "header_top",
+      "value": "16vp"
+    },
+    {
+      "name": "header_right",
+      "value": "20vp"
+    },
+    {
+      "name": "header_bottom",
+      "value": "16vp"
+    },
+    {
+      "name": "header_left",
+      "value": "24vp"
+    },
+    {
+      "name": "picture_gap",
+      "value": "2vp"
+    },
+    {
+      "name": "zero",
+      "value": "0vp"
+    },
+    {
+      "name": "device_padding_top",
+      "value": "36vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/element/string.json b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..404d06f8f95b4033d7dfafa78c7c4fff1e22e1cc
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/element/string.json
@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "xiaole",
+      "value": "晓乐"
+    },
+    {
+      "name": "see",
+      "value": "挺有意思的，大家都来看看吧！挺有意思的，大家都来看看吧！"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/icon.png b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/icon.png differ
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/icon_avatar.png b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/icon_avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb8baf21230593fececd3074f6fd4d4e96ee9f1c
Binary files /dev/null and b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/icon_avatar.png differ
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/setting.jpeg b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/setting.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..57e67dd49d39ad64ef090f59db3db9dfe6632106
Binary files /dev/null and b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/setting.jpeg differ
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle1.png b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle1.png
new file mode 100644
index 0000000000000000000000000000000000000000..c154bf4ce1ede2b1ab76d94a388748add9621005
Binary files /dev/null and b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle1.png differ
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle2.jpg b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1f48c2abb9c15499951edb75092ec61bd92042a7
Binary files /dev/null and b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle2.jpg differ
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle3.jpg b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c743fffbde638107707801fb7740c530c4f6cdd2
Binary files /dev/null and b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle3.jpg differ
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle4.jpg b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..dfb5b410f8ee457c63b3367b9391f27e4524d956
Binary files /dev/null and b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle4.jpg differ
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle5.jpg b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle5.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..eaa682880b28b9a834d1ddb9e97344adc6ff13a2
Binary files /dev/null and b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle5.jpg differ
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle6.jpg b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle6.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9e7ffcdb5f5058f36e56f66c305df951769b83da
Binary files /dev/null and b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle6.jpg differ
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle7.jpg b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle7.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..48b12f781efaa4838b7396eb1455771a85f93b05
Binary files /dev/null and b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle7.jpg differ
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle8.jpg b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle8.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a8f2ac8fed4d716a09ec3216bb8610efbdc2a911
Binary files /dev/null and b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle8.jpg differ
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle9.jpg b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle9.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e3be34e2bdc99d1e90d5878624c3c05f4f715102
Binary files /dev/null and b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/media/social_circle9.jpg differ
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/profile/main_pages.json b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/profile/main_pages.json
new file mode 100644
index 0000000000000000000000000000000000000000..1898d94f58d6128ab712be2c68acc7c98e9ab9ce
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/src/main/resources/base/profile/main_pages.json
@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/Index"
+  ]
+}
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/en_US/element/string.json b/MultiDeviceCommunication/features/socialCircle/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..f87a266bdcd01b532f05954949e6e09f217c8b6e
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/src/main/resources/en_US/element/string.json
@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "xiaole",
+      "value": "xiaole"
+    },
+    {
+      "name": "see",
+      "value": "It's fun. Let's see! It's fun. Let's see!"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/features/socialCircle/src/main/resources/zh_CN/element/string.json b/MultiDeviceCommunication/features/socialCircle/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..404d06f8f95b4033d7dfafa78c7c4fff1e22e1cc
--- /dev/null
+++ b/MultiDeviceCommunication/features/socialCircle/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "xiaole",
+      "value": "晓乐"
+    },
+    {
+      "name": "see",
+      "value": "挺有意思的，大家都来看看吧！挺有意思的，大家都来看看吧！"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/hvigor/hvigor-config.json5 b/MultiDeviceCommunication/hvigor/hvigor-config.json5
new file mode 100644
index 0000000000000000000000000000000000000000..eb31f8301a08fedbf8ca8dd0c17b84a8347d8220
--- /dev/null
+++ b/MultiDeviceCommunication/hvigor/hvigor-config.json5
@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+{
+  "modelVersion": "5.0.0",
+  "dependencies": {
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/oh-package.json5 b/MultiDeviceCommunication/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..d7b0d0c182ef150b3679db30b6e3176ef22ff906
--- /dev/null
+++ b/MultiDeviceCommunication/oh-package.json5
@@ -0,0 +1,13 @@
+{
+  "modelVersion": "5.0.0",
+  "license": "",
+  "devDependencies": {
+  },
+  "author": "",
+  "name": "MultiDeviceCommunication",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {}
+}
diff --git a/MultiDeviceCommunication/products/phone/build-profile.json5 b/MultiDeviceCommunication/products/phone/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..a23921541b20eb9a3e508caebc366290ba0c7c45
--- /dev/null
+++ b/MultiDeviceCommunication/products/phone/build-profile.json5
@@ -0,0 +1,41 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default",
+      "runtimeOS": "HarmonyOS",
+      "config": {
+        "deviceType": [
+          "phone",
+          "tablet",
+          "2in1"
+        ]
+      },
+      "source": {
+        "pages": [
+          "pages/Index",
+        ]
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/products/phone/hvigorfile.ts b/MultiDeviceCommunication/products/phone/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6edcd90486dd5a853cf7d34c8647f08414ca7a3
--- /dev/null
+++ b/MultiDeviceCommunication/products/phone/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { hapTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiDeviceCommunication/products/phone/obfuscation-rules.txt b/MultiDeviceCommunication/products/phone/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..985b2aeb7658286b17bd26eab8f217c3fe75ea8b
--- /dev/null
+++ b/MultiDeviceCommunication/products/phone/obfuscation-rules.txt
@@ -0,0 +1,18 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
\ No newline at end of file
diff --git a/MultiDeviceCommunication/products/phone/oh-package.json5 b/MultiDeviceCommunication/products/phone/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..3a42fb815a1c9799df92ed1bf68ee229c57c68ec
--- /dev/null
+++ b/MultiDeviceCommunication/products/phone/oh-package.json5
@@ -0,0 +1,14 @@
+{
+  "license": "",
+  "devDependencies": {},
+  "author": "",
+  "name": "phone",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/base": "file:../../common/base",
+    "@ohos/home": "file:../../features/home"
+  }
+}
diff --git a/MultiDeviceCommunication/products/phone/src/main/ets/entryability/EntryAbility.ets b/MultiDeviceCommunication/products/phone/src/main/ets/entryability/EntryAbility.ets
new file mode 100644
index 0000000000000000000000000000000000000000..5dc59b8c78a176901168d938deb8e61f1a359177
--- /dev/null
+++ b/MultiDeviceCommunication/products/phone/src/main/ets/entryability/EntryAbility.ets
@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { UIAbility } from '@kit.AbilityKit';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { display, KeyboardAvoidMode, window } from '@kit.ArkUI';
+import { BusinessError } from '@kit.BasicServicesKit';
+import { BaseConstants, BreakpointConstants } from '@ohos/base/Index';
+import { deviceInfo } from '@kit.BasicServicesKit';
+
+export default class EntryAbility extends UIAbility {
+  private windowObj?: window.Window;
+
+  onCreate(): void {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
+  }
+
+  onDestroy(): void {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
+  }
+
+  onWindowStageCreate(windowStage: window.WindowStage): void {
+    // Main window is created, set main page for this ability
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+    windowStage.getMainWindow((err: BusinessError<void>, data) => {
+      this.windowObj = data;
+      this.updateBreakpoint(this.windowObj.getWindowProperties().windowRect.width);
+      this.windowObj.on('windowSizeChange', (windowSize: window.Size) => {
+        this.updateBreakpoint(windowSize.width);
+      })
+      if (err.code) {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'getMainWindow failed');
+        return;
+      }
+      if (deviceInfo.deviceType !== BaseConstants.DEVICE_2IN1) {
+        data.setWindowLayoutFullScreen(true);
+      }
+    })
+
+    windowStage.loadContent('pages/Index', (err, data) => {
+      let a = windowStage.getMainWindowSync().getUIContext().getKeyboardAvoidMode();
+      windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET);
+      if (err.code) {
+        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+        return;
+      }
+      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
+    });
+  }
+
+  private updateBreakpoint(windowWidth: number): void {
+    let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels;
+    let curBp: string = '';
+    if (windowWidthVp < BreakpointConstants.BREAKPOINT_SCOPE[2]) {
+      curBp = BreakpointConstants.BREAKPOINT_SM;
+    } else if (windowWidthVp < BreakpointConstants.BREAKPOINT_SCOPE[3]) {
+      curBp = BreakpointConstants.BREAKPOINT_MD;
+    } else {
+      curBp = BreakpointConstants.BREAKPOINT_LG;
+    }
+    AppStorage.setOrCreate('currentBreakpoint', curBp);
+  }
+
+  onWindowStageDestroy(): void {
+    // Main window is destroyed, release UI related resources
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+  }
+
+  onForeground(): void {
+    // Ability has brought to foreground
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
+  }
+
+  onBackground(): void {
+    // Ability has back to background
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
+  }
+}
diff --git a/MultiDeviceCommunication/products/phone/src/main/ets/pages/Index.ets b/MultiDeviceCommunication/products/phone/src/main/ets/pages/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..19c559e9db3cd76a1fdf2f13647c242a84248cf7
--- /dev/null
+++ b/MultiDeviceCommunication/products/phone/src/main/ets/pages/Index.ets
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Home } from '@ohos/home';
+import { BaseConstants, BreakpointConstants } from '@ohos/base';
+
+@Entry
+@Component
+struct Index {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+
+  build() {
+    GridRow({
+      columns: {
+        sm: BreakpointConstants.GRID_ROW_COLUMNS[2],
+        md: BreakpointConstants.GRID_ROW_COLUMNS[0],
+        lg: BreakpointConstants.GRID_ROW_COLUMNS[0]
+      }
+    }) {
+      GridCol({ span: {
+        sm: BreakpointConstants.GRID_COLUMN_SPANS[5],
+        md: BreakpointConstants.GRID_COLUMN_SPANS[0],
+        lg: BreakpointConstants.GRID_COLUMN_SPANS[0]
+      } }) {
+        Column() {
+          Home()
+        }
+        .width(BaseConstants.FULL_HEIGHT)
+        .height(BaseConstants.FULL_HEIGHT)
+
+      }
+      .height(BaseConstants.FULL_PERCENT)
+      .width(BaseConstants.FULL_PERCENT)
+    }
+    .onBreakpointChange((breakPoints) => {
+      this.currentBreakpoint = breakPoints;
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/products/phone/src/main/module.json5 b/MultiDeviceCommunication/products/phone/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..09cd4fd52713f97c0d27a94e376d10bcfa9faf71
--- /dev/null
+++ b/MultiDeviceCommunication/products/phone/src/main/module.json5
@@ -0,0 +1,40 @@
+{
+  "module": {
+    "name": "phone",
+    "type": "entry",
+    "description": "$string:module_desc",
+    "mainElement": "EntryAbility",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ],
+    "deliveryWithInstall": true,
+    "installationFree": false,
+    "pages": "$profile:main_pages",
+    "abilities": [
+      {
+        "name": "EntryAbility",
+        "srcEntry": "./ets/entryability/EntryAbility.ets",
+        "description": "$string:EntryAbility_desc",
+        "icon": "$media:icon",
+        "label": "$string:EntryAbility_label",
+        "startWindowIcon": "$media:startIcon",
+        "startWindowBackground": "$color:start_window_background",
+        "exported": true,
+        "minWindowWidth": 360,
+        "minWindowHeight": 600,
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/products/phone/src/main/resources/base/element/color.json b/MultiDeviceCommunication/products/phone/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..3c712962da3c2751c2b9ddb53559afcbd2b54a02
--- /dev/null
+++ b/MultiDeviceCommunication/products/phone/src/main/resources/base/element/color.json
@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/products/phone/src/main/resources/base/element/string.json b/MultiDeviceCommunication/products/phone/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..bd663d0c1325781ea8ba0960676ea4e2a8bb1f7b
--- /dev/null
+++ b/MultiDeviceCommunication/products/phone/src/main/resources/base/element/string.json
@@ -0,0 +1,33 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "AppletAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "DocumentAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "一多即时通讯"
+    },
+    {
+      "name": "AppletAbility_label",
+      "value": "一多即时通讯"
+    },
+    {
+      "name": "DocumentAbility_label",
+      "value": "一多即时通讯"
+    }
+
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/products/phone/src/main/resources/base/media/PC_WPS.png b/MultiDeviceCommunication/products/phone/src/main/resources/base/media/PC_WPS.png
new file mode 100644
index 0000000000000000000000000000000000000000..1145dc4dc0ec223e012b3afbe7221594e028ddf8
Binary files /dev/null and b/MultiDeviceCommunication/products/phone/src/main/resources/base/media/PC_WPS.png differ
diff --git a/MultiDeviceCommunication/products/phone/src/main/resources/base/media/icon.png b/MultiDeviceCommunication/products/phone/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd45accb1dfd2fd0da16c732c72faa6e46b26521
Binary files /dev/null and b/MultiDeviceCommunication/products/phone/src/main/resources/base/media/icon.png differ
diff --git a/MultiDeviceCommunication/products/phone/src/main/resources/base/media/startIcon.png b/MultiDeviceCommunication/products/phone/src/main/resources/base/media/startIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..366f76459ffd4494ec40d0ddd5c59385b9c5da11
Binary files /dev/null and b/MultiDeviceCommunication/products/phone/src/main/resources/base/media/startIcon.png differ
diff --git a/MultiDeviceCommunication/products/phone/src/main/resources/base/profile/main_pages.json b/MultiDeviceCommunication/products/phone/src/main/resources/base/profile/main_pages.json
new file mode 100644
index 0000000000000000000000000000000000000000..1898d94f58d6128ab712be2c68acc7c98e9ab9ce
--- /dev/null
+++ b/MultiDeviceCommunication/products/phone/src/main/resources/base/profile/main_pages.json
@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/Index"
+  ]
+}
diff --git a/MultiDeviceCommunication/products/phone/src/main/resources/en_US/element/string.json b/MultiDeviceCommunication/products/phone/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..c88e85808e747b8df8503ed0b5780a610d329694
--- /dev/null
+++ b/MultiDeviceCommunication/products/phone/src/main/resources/en_US/element/string.json
@@ -0,0 +1,31 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "AppletAbility_desc",
+      "value": "description"
+    },{
+      "name": "DocumentAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "MultiDeviceCommunication"
+    },
+    {
+      "name": "AppletAbility_label",
+      "value": "MultiDeviceCommunication"
+    },
+    {
+      "name": "DocumentAbility_label",
+      "value": "MultiDeviceCommunication"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/products/phone/src/main/resources/zh_CN/element/string.json b/MultiDeviceCommunication/products/phone/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..4fa67ee3394feba81ae7827d0a4e39af61ea3860
--- /dev/null
+++ b/MultiDeviceCommunication/products/phone/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,32 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "模块描述"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "AppletAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "DocumentAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "一多即时通讯"
+    },
+    {
+      "name": "AppletAbility_label",
+      "value": "一多即时通讯"
+    },
+    {
+      "name": "DocumentAbility_label",
+      "value": "一多即时通讯"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiDeviceCommunication/screenshots/device/config.PNG b/MultiDeviceCommunication/screenshots/device/config.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..a9512a8ea67f0fba8704a86ad743b6fdd635355b
Binary files /dev/null and b/MultiDeviceCommunication/screenshots/device/config.PNG differ
diff --git a/MultiDeviceCommunication/screenshots/device/foldable.png b/MultiDeviceCommunication/screenshots/device/foldable.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ffefcd480fd274c3aca01af8984578fe4356bca
Binary files /dev/null and b/MultiDeviceCommunication/screenshots/device/foldable.png differ
diff --git a/MultiDeviceCommunication/screenshots/device/foldable_EN.png b/MultiDeviceCommunication/screenshots/device/foldable_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d7b6ad297bb6232288a1ab2ddd4751165a37e52
Binary files /dev/null and b/MultiDeviceCommunication/screenshots/device/foldable_EN.png differ
diff --git a/MultiDeviceCommunication/screenshots/device/pad.png b/MultiDeviceCommunication/screenshots/device/pad.png
new file mode 100644
index 0000000000000000000000000000000000000000..200887d5948ace1d39c31c41c5d01a97aa8abbd0
Binary files /dev/null and b/MultiDeviceCommunication/screenshots/device/pad.png differ
diff --git a/MultiDeviceCommunication/screenshots/device/pad_EN.png b/MultiDeviceCommunication/screenshots/device/pad_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..72e879b2a431160394da02a201d1fd117332cfbb
Binary files /dev/null and b/MultiDeviceCommunication/screenshots/device/pad_EN.png differ
diff --git a/MultiDeviceCommunication/screenshots/device/phone.png b/MultiDeviceCommunication/screenshots/device/phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e8f7e56d51596613586832aff0888489068eb33
Binary files /dev/null and b/MultiDeviceCommunication/screenshots/device/phone.png differ
diff --git a/MultiDeviceCommunication/screenshots/device/phone_EN.png b/MultiDeviceCommunication/screenshots/device/phone_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..d91f74fa6378c2e46eb2de46c4002ed6b5361084
Binary files /dev/null and b/MultiDeviceCommunication/screenshots/device/phone_EN.png differ
diff --git a/MultiDeviceCommunication/screenshots/device/run.png b/MultiDeviceCommunication/screenshots/device/run.png
new file mode 100644
index 0000000000000000000000000000000000000000..7655fa7e041bb067e028029d820bd2d320e2cd83
Binary files /dev/null and b/MultiDeviceCommunication/screenshots/device/run.png differ
diff --git a/MultiFinancialManagement/AppScope/app.json5 b/MultiFinancialManagement/AppScope/app.json5
new file mode 100644
index 0000000000000000000000000000000000000000..bea217714e212db8b7bf8a2e12c3346af5d676b9
--- /dev/null
+++ b/MultiFinancialManagement/AppScope/app.json5
@@ -0,0 +1,10 @@
+{
+  "app": {
+    "bundleName": "com.huawei.multifinancialmanagement",
+    "vendor": "example",
+    "versionCode": 1000000,
+    "versionName": "1.0.0",
+    "icon": "$media:app_icon",
+    "label": "$string:app_name"
+  }
+}
diff --git a/MultiFinancialManagement/AppScope/resources/base/element/string.json b/MultiFinancialManagement/AppScope/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..747b13ddc8f562513a73ad70009a15fd6d4d73e6
--- /dev/null
+++ b/MultiFinancialManagement/AppScope/resources/base/element/string.json
@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "MultiFinancialManagement"
+    }
+  ]
+}
diff --git a/MultiFinancialManagement/AppScope/resources/base/media/app_icon.png b/MultiFinancialManagement/AppScope/resources/base/media/app_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..a39445dc87828b76fed6d2ec470dd455c45319e3
Binary files /dev/null and b/MultiFinancialManagement/AppScope/resources/base/media/app_icon.png differ
diff --git a/MultiFinancialManagement/LICENSE b/MultiFinancialManagement/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..0210352ae2ade0dd7b4c841cb6e8ba08b4780038
--- /dev/null
+++ b/MultiFinancialManagement/LICENSE
@@ -0,0 +1,78 @@
+   Copyright (c) 2023 Huawei Device Co., Ltd. All rights reserved.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+Apache License, Version 2.0
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+
+"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License.
+
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License.
+
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution.
+
+You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+1.You must give any other recipients of the Work or Derivative Works a copy of this License; and
+2.You must cause any modified files to carry prominent notices stating that You changed the files; and
+3.You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
+4.If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions.
+
+Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+
+6. Trademarks.
+
+This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty.
+
+Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability.
+
+In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability.
+
+While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
\ No newline at end of file
diff --git a/MultiFinancialManagement/README.en.md b/MultiFinancialManagement/README.en.md
new file mode 100644
index 0000000000000000000000000000000000000000..2001d7f830440e57b6172752c9cbb9cb996b0ea8
--- /dev/null
+++ b/MultiFinancialManagement/README.en.md
@@ -0,0 +1,36 @@
+# Bank Wealth Management
+
+### Introduction
+
+This codelab implements a bank wealth management app based on the adaptive layout and responsive layout, achieving one-time development for multi-device deployment.
+
+The figure shows the effect on the mobile phone:
+
+<img src='./screenshots/device/phone.en.png' width='320'>
+
+The figure shows the effect on the foldable phone:
+
+<img src='./screenshots/device/foldable.en.png' width='480'>
+
+The figure shows the effect on the tablet:
+
+<img src='./screenshots/device/pad.en.png' width='800'>
+
+### Permissions
+
+N/A
+
+### How to Use
+
+1. Install and open an app on a mobile phone, foldable phone, or tablet. The responsive layout and adaptive layout are used to display different effects on the app pages over different devices.
+2. Tap the image under featured fortune to go to the product details page.
+3. Tap the steady growth content on the page to go to the fund details page.
+4. Tap Compare button at the bottom of the fund details page to go to the fund comparison page.
+5. Select a fund and tap Start Comparison on the fund details page to go to the fund comparison page.
+
+### Constraints
+
+1. The sample app is supported only on Huawei phones running the standard system.
+2. HarmonyOS: HarmonyOS 5.0.0 Release or later
+3. DevEco Studio: DevEco Studio 5.0.0 Release or later
+4. HarmonyOS SDK: HarmonyOS 5.0.0 Release SDK or later
diff --git a/MultiFinancialManagement/README.md b/MultiFinancialManagement/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..67b24bc5080f1a85655654cd189e346660419b16
--- /dev/null
+++ b/MultiFinancialManagement/README.md
@@ -0,0 +1,36 @@
+# 一次开发，多端部署-银行理财
+
+### 简介
+
+基于自适应和响应式布局，实现一次开发、多端部署银行理财。
+
+手机效果图如下：
+
+<img src='./screenshots/device/phone.png' width='320'>
+
+折叠屏效果图如下：
+
+<img src='./screenshots/device/foldable.png' width='480'>
+
+平板效果图如下：
+
+<img src='./screenshots/device/pad.png' width='800'>
+
+### 相关权限
+
+不涉及
+
+### 使用说明
+
+1. 分别在手机、折叠屏、平板安装并打开应用，不同设备的应用页面通过响应式布局和自适应布局呈现不同的效果。
+2. 点击界面内财富精选下的图片跳转到产品详情页。
+3. 点击界面内稳健增长内容跳转到基金详情页。
+4. 点击基金详情页下方对比跳转至基金比较页。
+5. 基金详情页勾选基金后点击开始对比跳转至基金比较页。
+
+### 约束与限制
+
+1. 本示例仅支持标准系统上运行，支持设备：华为手机。
+2. HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。
+3. DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。
+4. HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。
\ No newline at end of file
diff --git a/MultiFinancialManagement/build-profile.json5 b/MultiFinancialManagement/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..4fb1e6f33233556c1caa56be2fd142cb9ed50fa8
--- /dev/null
+++ b/MultiFinancialManagement/build-profile.json5
@@ -0,0 +1,95 @@
+{
+  "app": {
+    "signingConfigs": [],
+    "products": [
+      {
+        "name": "default",
+        "signingConfig": "default",
+        "compatibleSdkVersion": "5.0.0(12)",
+        "runtimeOS": "HarmonyOS"
+      }
+    ],
+    "buildModeSet": [
+      {
+        "name": "debug"
+      },
+      {
+        "name": "release"
+      }
+    ]
+  },
+  "modules": [
+    {
+      "name": "phone",
+      "srcPath": "./product/phone",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "basic",
+      "srcPath": "./commons/basic",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "home",
+      "srcPath": "./features/home",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "fund",
+      "srcPath": "./features/fund",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "fundComparison",
+      "srcPath": "./features/fundComparison",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "transaction",
+      "srcPath": "./features/transaction",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/commons/basic/Index.ets b/MultiFinancialManagement/commons/basic/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..06829cca5599dd6a8f9a361b31afb0f78de54876
--- /dev/null
+++ b/MultiFinancialManagement/commons/basic/Index.ets
@@ -0,0 +1,6 @@
+export { CommonConstants } from './src/main/ets/constants/CommonConstants';
+export { RouterConstants } from './src/main/ets/constants/RouterConstants';
+export { BreakpointUtil } from './src/main/ets/utils/BreakpointUtil';
+export { logger } from './src/main/ets/utils/Logger';
+export { BusinessInfo } from './src/main/ets/viewmodel/BusinessInfo';
+export { FundDetail } from './src/main/ets/viewmodel/FundDetail';
diff --git a/MultiFinancialManagement/commons/basic/build-profile.json5 b/MultiFinancialManagement/commons/basic/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiFinancialManagement/commons/basic/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/commons/basic/hvigorfile.ts b/MultiFinancialManagement/commons/basic/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiFinancialManagement/commons/basic/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiFinancialManagement/commons/basic/obfuscation-rules.txt b/MultiFinancialManagement/commons/basic/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a1dfa0bd175984dc49e641436aa67b1de1b8abeb
--- /dev/null
+++ b/MultiFinancialManagement/commons/basic/obfuscation-rules.txt
@@ -0,0 +1,22 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/MultiFinancialManagement/commons/basic/oh-package.json5 b/MultiFinancialManagement/commons/basic/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..a17234d269b9b51ca36a6cf80ed5722d21ae730a
--- /dev/null
+++ b/MultiFinancialManagement/commons/basic/oh-package.json5
@@ -0,0 +1,12 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "basic",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "packageType": "InterfaceHar",
+  "dynamicDependencies": {},
+  "dependencies": {}
+}
diff --git a/MultiFinancialManagement/commons/basic/src/main/ets/constants/CommonConstants.ets b/MultiFinancialManagement/commons/basic/src/main/ets/constants/CommonConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9e807259223d0744f79fd5a6c77c23b624ee1d39
--- /dev/null
+++ b/MultiFinancialManagement/commons/basic/src/main/ets/constants/CommonConstants.ets
@@ -0,0 +1,119 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Common constants for all features.
+ */
+export class CommonConstants {
+  /**
+   * Breakpoint xs.
+   */
+  static readonly BREAK_POINT_XS: string = 'xs';
+
+  /**
+   * Breakpoint sm.
+   */
+  static readonly BREAK_POINT_SM: string = 'sm';
+
+  /**
+   * Breakpoint md.
+   */
+  static readonly BREAK_POINT_MD: string = 'md';
+
+  /**
+   * Breakpoint lg.
+   */
+  static readonly BREAK_POINT_LG: string = 'lg';
+
+  /**
+   * The break point value.
+   */
+  static readonly BREAK_POINTS_VALUE: Array<string> = ['320vp', '600vp', '840vp'];
+
+  /**
+   * The break point value.
+   */
+  static readonly BREAK_POINTS_VALUE_NUMBER: Array<number> = [320, 600, 840];
+
+  /**
+   * The number of columns for SM device.
+   */
+  static readonly COLUMN_SM: number = 4;
+
+  /**
+   * The number of columns for MD device.
+   */
+  static readonly COLUMN_MD: number = 8;
+
+  /**
+   * The number of columns for LG device.
+   */
+  static readonly COLUMN_LG: number = 12;
+
+  /**
+   * The full percentage of component.
+   */
+  static readonly FULL_WIDTH_PERCENT: string = '100%';
+
+  /**
+   * The full percentage of component.
+   */
+  static readonly FULL_HEIGHT_PERCENT: string = '100%';
+
+  /**
+   * Tab bar height.
+   */
+  static readonly TAB_BAR_HEIGHT_PERCENT: string = '100%';
+
+  /**
+   * Tab height.
+   */
+  static readonly TAB_HEIGHT_PERCENT: string = '50%';
+
+  /**
+   * Navigation path key of detail.
+   */
+  static readonly PATH_DETAIL: string = 'detail';
+
+  /**
+   * Navigation path key of comparison.
+   */
+  static readonly PATH_COMPARISON: string = 'comparison';
+
+  /**
+   * Navigation path key of comparisonDetail.
+   */
+  static readonly PATH_COMPARISON_DETAIL: string = 'comparisonDetail';
+
+  /**
+   * Navigation path key of buying.
+   */
+  static readonly PATH_BUYING: string = 'buying';
+
+  /**
+   * Common font weight.
+   */
+  static readonly FONT_WEIGHT_500: number = 500;
+
+  /**
+   * Common font weight.
+   */
+  static readonly FONT_WEIGHT_700: number = 700;
+
+  /**
+   * Common font family.
+   */
+  static readonly FONT_FAMILY_HEI_TI: string = 'HarmonyHeiTi-Medium';
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/commons/basic/src/main/ets/constants/RouterConstants.ets b/MultiFinancialManagement/commons/basic/src/main/ets/constants/RouterConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..971a8c5ba2c047202197b90d99cd0ece0d3afad6
--- /dev/null
+++ b/MultiFinancialManagement/commons/basic/src/main/ets/constants/RouterConstants.ets
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Router constants for all features.
+ */
+export class RouterConstants {
+  /**
+   * The funding detail page url.
+   */
+  static readonly FUNDING_DETAIL_URL: string = 'FundingDetail';
+
+  /**
+   * The funding page url.
+   */
+  static readonly FUNDING_URL: string = 'Funding';
+
+  /**
+   * The trends page url.
+   */
+  static readonly TRENDS_PAGE_URL: string = 'TrendsPage';
+
+  /**
+   * The comparison detail  page url.
+   */
+  static readonly COMPARISON_PAGE_URL: string = 'ComparisonDetailPage';
+
+  /**
+   * The comparison detail  page url.
+   */
+  static readonly ACCOUNT_PAGE_URL: string = 'AccountPage';
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/commons/basic/src/main/ets/utils/BreakpointUtil.ets b/MultiFinancialManagement/commons/basic/src/main/ets/utils/BreakpointUtil.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f7f4413f067fc9a4e98bbb03243210d9d36f88e4
--- /dev/null
+++ b/MultiFinancialManagement/commons/basic/src/main/ets/utils/BreakpointUtil.ets
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare interface BreakPointOption<T> extends Record<string, T | undefined> {
+  sm?: T,
+  md?: T,
+  lg?: T,
+  xl?: T,
+  xxl?: T
+}
+
+export class BreakpointUtil<T> {
+  options: BreakPointOption<T>;
+
+  constructor(option: BreakPointOption<T>) {
+    this.options = option;
+  }
+
+  getValue(currentPoint: string): T {
+    return this.options[currentPoint] as T;
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/commons/basic/src/main/ets/utils/Logger.ets b/MultiFinancialManagement/commons/basic/src/main/ets/utils/Logger.ets
new file mode 100644
index 0000000000000000000000000000000000000000..748109dff1f6bc518942e8bcc8d2f508f6eb1637
--- /dev/null
+++ b/MultiFinancialManagement/commons/basic/src/main/ets/utils/Logger.ets
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { hilog } from '@kit.PerformanceAnalysisKit';
+
+const LOG_DOMAIN: number = 0xFF00;
+
+class Logger {
+  private domain: number;
+  private prefix: string;
+  private format: string = '%{public}s, %{public}s';
+
+  constructor(prefix: string, domain: number) {
+    this.prefix = prefix;
+    this.domain = domain;
+  }
+
+  debug(...args: string[]): void {
+    hilog.debug(this.domain, this.prefix, this.format, args);
+  }
+
+  info(...args: string[]): void {
+    hilog.info(this.domain, this.prefix, this.format, args);
+  }
+
+  warn(...args: string[]): void {
+    hilog.warn(this.domain, this.prefix, this.format, args);
+  }
+
+  error(...args: string[]): void {
+    hilog.error(this.domain, this.prefix, this.format, args);
+  }
+}
+
+export const logger = new Logger('MultiFinancialManagement', LOG_DOMAIN);
\ No newline at end of file
diff --git a/MultiFinancialManagement/commons/basic/src/main/ets/viewmodel/BusinessInfo.ets b/MultiFinancialManagement/commons/basic/src/main/ets/viewmodel/BusinessInfo.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ed1f34b617d1dede967aecc6a725b584c98e8747
--- /dev/null
+++ b/MultiFinancialManagement/commons/basic/src/main/ets/viewmodel/BusinessInfo.ets
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Home page information entity class.
+ */
+export class BusinessInfo {
+  icon: Resource;
+  text: ResourceStr;
+  router?: string;
+  iconBig?: Resource;
+
+  constructor(icon: Resource, text: ResourceStr, iconBig?: Resource, router?: string) {
+    this.icon = icon;
+    this.text = text;
+    this.iconBig = iconBig
+    this.router = router;
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/commons/basic/src/main/ets/viewmodel/FundDetail.ets b/MultiFinancialManagement/commons/basic/src/main/ets/viewmodel/FundDetail.ets
new file mode 100644
index 0000000000000000000000000000000000000000..babf9f6d289df8ef0e21b225badccf66202435c5
--- /dev/null
+++ b/MultiFinancialManagement/commons/basic/src/main/ets/viewmodel/FundDetail.ets
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Basic fund information.
+ */
+export class FundDetail {
+  name: ResourceStr;
+  amplitude: ResourceStr;
+
+  constructor(name: ResourceStr, amplitude: ResourceStr) {
+    this.name = name;
+    this.amplitude = amplitude;
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/commons/basic/src/main/module.json5 b/MultiFinancialManagement/commons/basic/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..6823e5bd3cad8ec31f718f4decd76f50a5244775
--- /dev/null
+++ b/MultiFinancialManagement/commons/basic/src/main/module.json5
@@ -0,0 +1,12 @@
+{
+  "module": {
+    "name": "basic",
+    "type": "har",
+    "description": "$string:shared_desc",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/commons/basic/src/main/resources/base/element/color.json b/MultiFinancialManagement/commons/basic/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..1bbc9aa9617e97c45440e1d3d66afc1154837012
--- /dev/null
+++ b/MultiFinancialManagement/commons/basic/src/main/resources/base/element/color.json
@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/commons/basic/src/main/resources/base/element/string.json b/MultiFinancialManagement/commons/basic/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..98e1d8a84b3d8539ea33e79fe2ac593a05d23bb4
--- /dev/null
+++ b/MultiFinancialManagement/commons/basic/src/main/resources/base/element/string.json
@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/commons/basic/src/main/resources/base/media/icon.png b/MultiFinancialManagement/commons/basic/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/MultiFinancialManagement/commons/basic/src/main/resources/base/media/icon.png differ
diff --git a/MultiFinancialManagement/features/fund/Index.ets b/MultiFinancialManagement/features/fund/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..c90b6ba4549bd22467d6642e2bf088876e7bf33c
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/Index.ets
@@ -0,0 +1,3 @@
+export { Funding } from './src/main/ets/view/Funding';
+export { FundingDetail } from './src/main/ets/view/FundingDetail';
+export { TrendsPage } from './src/main/ets/view/TrendsPage';
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/build-profile.json5 b/MultiFinancialManagement/features/fund/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/hvigorfile.ts b/MultiFinancialManagement/features/fund/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiFinancialManagement/features/fund/obfuscation-rules.txt b/MultiFinancialManagement/features/fund/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a1dfa0bd175984dc49e641436aa67b1de1b8abeb
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/obfuscation-rules.txt
@@ -0,0 +1,22 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/oh-package.json5 b/MultiFinancialManagement/features/fund/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7e2de41fd8cc9050ee29a7c7fdecce285811c29a
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/oh-package.json5
@@ -0,0 +1,17 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "fund",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "packageType": "InterfaceHar",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/transaction": "file:../transaction",
+    "@ohos/fundComparison": "file:../fundComparison",
+    "@ohos/basic": "file:../../commons/basic",
+    "@ohos/mpchart": "^3.0.0-rc.1"
+  }
+}
diff --git a/MultiFinancialManagement/features/fund/src/main/ets/constants/FundConstants.ets b/MultiFinancialManagement/features/fund/src/main/ets/constants/FundConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a0f05d611c2b793fe7212bb6e13ca10a46d8eca8
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/ets/constants/FundConstants.ets
@@ -0,0 +1,139 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Fund constants for fund feature.
+ */
+export class FundConstants {
+  /**
+   * Row space.
+   */
+  static readonly ROW_SPACE: number = 8;
+
+  /**
+   * Column space.
+   */
+  static readonly COLUMN_SPACE: number = 6;
+
+  /**
+   * Column space.
+   */
+  static readonly TAB_COLUMN_SPACE: number = 4;
+
+  /**
+   * Row space.
+   */
+  static readonly BOTTOM_ROW_SPACE: number = 24;
+
+  /**
+   * Row space.
+   */
+  static readonly TAB_ROW_SPACE: number = 20;
+
+  /**
+   * Column space.
+   */
+  static readonly BOTTOM_COLUMN_SPACE: number = 24;
+
+  /**
+   * Row space.
+   */
+  static readonly COLLECT_COLUMN_SPACE: number = 4;
+
+  /**
+   * Get fund info start index.
+   */
+  static readonly FUND_COUNT_START: number = 0;
+
+  /**
+   * Get fund info under sm power outage.
+   */
+  static readonly FUND_COUNT_SM: number = 4;
+
+  /**
+   * Get fund info under md power outage.
+   */
+  static readonly FUND_COUNT_MD: number = 6;
+
+  /**
+   * Get fund info under lg power outage.
+   */
+  static readonly FUND_COUNT_LG: number = 12;
+
+  /**
+   * Get list lanes under sm power outage.
+   */
+  static readonly LIST_LANES_SM: number = 2;
+
+  /**
+   * Get list lanes under md power outage.
+   */
+  static readonly LIST_LANES_MD: number = 3;
+
+  /**
+   * Get list lanes under lg power outage.
+   */
+  static readonly LIST_LANES_LG: number = 5;
+
+  /**
+   * Get button count under sm power outage.
+   */
+  static readonly BUTTON_COUNT_SM: number = 5;
+
+  /**
+   * Get button count under md power outage.
+   */
+  static readonly BUTTON_COUNT_MD: number = 6;
+
+  /**
+   * Get column count under sm power outage.
+   */
+  static readonly COLUMN_COUNT_SM: number = 2;
+
+  /**
+   * Get column count under md power outage.
+   */
+  static readonly COLUMN_COUNT_MD: number = 3;
+
+  /**
+   * Gradient position.
+   */
+  static readonly GRADIENT_LEFT: number = 0;
+
+  /**
+   * Gradient position.
+   */
+  static readonly GRADIENT_CENTER: number = 0.91;
+
+  /**
+   * Gradient position.
+   */
+  static readonly GRADIENT_RIGHT: number = 1;
+
+  /**
+   * Calculate the position value.
+   */
+  static readonly CALCULATE_POSITION_LG: number = 216;
+
+  /**
+   * Calculate the position value.
+   */
+  static readonly CALCULATE_POSITION: number = 146;
+
+  /**
+   * Nav bar width.
+   */
+  static readonly NAV_BAR_WIDTH: string = '40%';
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/ets/view/ChartLegendComponent.ets b/MultiFinancialManagement/features/fund/src/main/ets/view/ChartLegendComponent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4b79e53969ed6754084647e67b2bc5dd75408a2b
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/ets/view/ChartLegendComponent.ets
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Component
+export struct ChartLegendComponent {
+  private name: ResourceStr = '';
+  private color: ResourceStr = '';
+  private value: ResourceStr = '';
+
+  build() {
+    Column() {
+      Row() {
+        Text(this.name)
+          .fontSize($r('app.float.text_name_size'))
+          .fontColor($r('app.color.name_build_text'));
+        Divider()
+          .width($r('app.float.build_divider_width'))
+          .height($r('app.float.build_divider_height'))
+          .color(this.color)
+          .borderRadius($r('app.float.build_divider_radius'))
+          .margin({
+            left: $r('app.float.build_divider_margin_left')
+          })
+      }
+      Text(this.value)
+        .fontColor($r('app.color.value_build_text'))
+        .fontSize($r('app.float.value_build_text_size'));
+    }
+    .alignItems(HorizontalAlign.Start)
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/ets/view/DetailComponent.ets b/MultiFinancialManagement/features/fund/src/main/ets/view/DetailComponent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..cac46e3618c6c61a18503990ecbe8928b022bd11
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/ets/view/DetailComponent.ets
@@ -0,0 +1,428 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LineChart, LineChartModel } from '@ohos/mpchart';
+import { BreakpointUtil, CommonConstants, FundDetail, RouterConstants } from '@ohos/basic';
+import ChartViewModel from '../viewmodel/ChartViewModel';
+import FundingViewModel from '../viewmodel/FundingViewModel';
+import { FundConstants } from '../constants/FundConstants';
+import { ChartLegendComponent } from './ChartLegendComponent';
+
+@Component
+export struct DetailComponent {
+  @State currentPoint: string = CommonConstants.BREAK_POINT_LG;
+  @State lineChartModel: LineChartModel = ChartViewModel.getLineChartModel();
+  @State showChart: boolean = true;
+  @State indexList: number = 0;
+  @State tabBarIndex: number = 0;
+  @State fundInfo: FundDetail[] = FundingViewModel.getAllFundInfo();
+  @StorageLink('pageInfo') pageInfo: NavPathStack = new NavPathStack();
+  @StorageLink('pageIndexInfos') pageIndexInfos: NavPathStack = new NavPathStack();
+  private controller: TabsController = new TabsController();
+
+  build() {
+    NavDestination() {
+      GridRow({
+        breakpoints: {
+          value: CommonConstants.BREAK_POINTS_VALUE,
+          reference: BreakpointsReference.ComponentSize
+        },
+        columns: {
+          sm: CommonConstants.COLUMN_SM,
+          md: CommonConstants.COLUMN_MD,
+          lg: CommonConstants.COLUMN_LG
+        },
+        direction: GridRowDirection.Row
+      }) {
+        GridCol({
+          span: {
+            sm: CommonConstants.COLUMN_SM,
+            md: CommonConstants.COLUMN_MD,
+            lg: CommonConstants.COLUMN_LG
+          }
+        }) {
+          Column() {
+            Row() {
+              Image($r('app.media.ic_public_back'))
+                .width($r('app.float.common_image'))
+                .height($r('app.float.common_image'))
+                .onClick(() => {
+                  this.pageIndexInfos.pop();
+                })
+              Text($r('app.string.funding_title'))
+                .fontSize($r('app.float.title_text_size'))
+                .fontColor($r('sys.color.mask_secondary'))
+              Image($r('app.media.ic_public_share'))
+                .width($r('app.float.common_image'))
+                .height($r('app.float.common_image'))
+            }
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .height($r('app.float.title_height'))
+            .justifyContent(FlexAlign.SpaceBetween)
+            .alignItems(VerticalAlign.Center)
+            .backgroundColor(Color.White)
+            .padding({
+              left: $r('app.float.padding_common'),
+              right: $r('app.float.padding_common')
+            })
+
+            Scroll() {
+              Column() {
+                Column() {
+                  Row() {
+                    Text(this.fundInfo[this.indexList].name)
+                      .fontSize($r('app.float.common_font_size'))
+                      .fontColor($r('app.color.name_text'))
+                      .lineHeight($r('app.float.common_line_height'))
+                      .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                    Text($r('app.string.funding_code'))
+                      .fontSize($r('app.float.code_size'))
+                      .fontColor($r('app.color.forty_percent_white'))
+                  }
+                  .justifyContent(FlexAlign.SpaceBetween)
+                  .width(CommonConstants.FULL_WIDTH_PERCENT)
+
+                  Row({ space: FundConstants.ROW_SPACE }) {
+                    Text($r('app.string.currency_type'))
+                      .buildTextStyle()
+                    Text($r('app.string.medium_risk'))
+                      .buildTextStyle()
+                    Text($r('app.string.purchase_rmb'))
+                      .buildTextStyle()
+                  }
+                  .width(CommonConstants.FULL_WIDTH_PERCENT)
+                  .justifyContent(FlexAlign.Start)
+                  .margin({
+                    top: $r('app.float.type_margin_top'),
+                    bottom: $r('app.float.type_margin_bottom')
+                  })
+
+                  Row() {
+                    Column({ space: FundConstants.COLUMN_SPACE }) {
+                      Text(this.fundInfo[this.indexList].amplitude)
+                        .fontSize($r('app.float.amplitude_size'))
+                        .fontColor($r('app.color.amplitude_text'))
+                        .fontWeight(CommonConstants.FONT_WEIGHT_700)
+                      Text($r('app.string.one_year_amplitude'))
+                        .fontSize($r('app.float.amplitude_time_size'))
+                        .fontColor($r('app.color.forty_percent_white'))
+                    }
+
+                    Column({ space: FundConstants.COLUMN_SPACE }) {
+                      Text($r('app.string.one_day_amplitude_data'))
+                        .fontSize($r('app.float.amplitude_date_size'))
+                        .fontColor($r('app.color.amplitude_date'))
+                        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                      Text($r('app.string.one_day_amplitude'))
+                        .fontSize($r('app.float.amplitude_time_size'))
+                        .fontColor($r('app.color.forty_percent_white'))
+                    }
+
+                    Column({ space: FundConstants.COLUMN_SPACE }) {
+                      Text($r('app.string.last_net_value_data'))
+                        .fontSize($r('app.float.amplitude_date_size'))
+                        .fontColor(Color.Black)
+                        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                      Text($r('app.string.last_net_value'))
+                        .fontSize($r('app.float.amplitude_time_size'))
+                        .fontColor($r('app.color.forty_percent_white'))
+                    }
+                  }
+                  .width(CommonConstants.FULL_WIDTH_PERCENT)
+                  .justifyContent(FlexAlign.SpaceBetween)
+                  .alignItems(VerticalAlign.Bottom)
+
+                  Row() {
+                    Text($r('app.string.last_net_value'))
+                      .fontSize($r('app.float.value_size'))
+                      .fontColor($r('app.color.forty_percent_white'))
+                    Text($r('app.string.last_net_not_show'))
+                      .fontSize($r('app.float.value_size'))
+                      .fontColor($r('app.color.forty_percent_white'))
+                      .margin({
+                        left: $r('app.float.last_net_margin_left')
+                      })
+                  }
+                  .width(CommonConstants.FULL_WIDTH_PERCENT)
+                  .justifyContent(FlexAlign.Start)
+                  .margin({
+                    top: $r('app.float.last_net_margin_tb'),
+                    bottom: $r('app.float.last_net_margin_tb')
+                  })
+
+                  Row() {
+                    Text($r('app.string.three_year_rating'))
+                      .fontSize($r('app.float.value_size'))
+                      .fontColor($r('app.color.forty_percent_white'))
+                      .margin({
+                        right: $r('app.float.rating_margin_right')
+                      })
+                    Rating()
+                      .height($r('app.float.rating_height'))
+                  }
+                  .width(CommonConstants.FULL_WIDTH_PERCENT)
+                  .justifyContent(FlexAlign.Start)
+                }
+                .backgroundColor(Color.White)
+                .padding({
+                  left: $r('app.float.padding_common'),
+                  right: $r('app.float.scroll_column_padding_right'),
+                  top: $r('app.float.scroll_column_padding_top'),
+                  bottom: $r('app.float.scroll_column_padding_bottom')
+                })
+                .margin({
+                  top: $r('app.float.scroll_column_margin'),
+                  bottom: $r('app.float.scroll_column_margin')
+                })
+
+                Column() {
+                  Row() {
+                    Row({ space: FundConstants.BOTTOM_ROW_SPACE }) {
+                      Text($r('app.string.performance_trends'))
+                        .fontSize($r('app.float.tab_text_size_fund'))
+                        .lineHeight($r('app.float.common_line_height'))
+                        .fontColor(this.tabBarIndex === 0 ? $r('app.color.harmony_blue') : Color.Black)
+                        .border({
+                          width: {
+                            bottom: $r('app.float.tab_bar_border')
+                          },
+                          color: this.tabBarIndex === 0 ? $r('app.color.harmony_blue') : $r('app.color.transparent_color')
+                        })
+                        .padding({
+                          bottom: $r('app.float.tab_bar_padding_bottom')
+                        })
+                        .onClick(() => {
+                          this.tabBarIndex = 0;
+                          this.controller.changeIndex(this.tabBarIndex);
+                        })
+                      Text($r('app.string.unit_net_value'))
+                        .fontSize($r('app.float.tab_text_size_fund'))
+                        .lineHeight($r('app.float.common_line_height'))
+                        .fontColor(this.tabBarIndex === 1 ? $r('app.color.harmony_blue') : Color.Black)
+                        .border({
+                          width: {
+                            bottom: $r('app.float.tab_bar_border')
+                          },
+                          color: this.tabBarIndex === 1 ? $r('app.color.harmony_blue') : $r('app.color.transparent_color')
+                        })
+                        .padding({
+                          bottom: $r('app.float.tab_bar_padding_bottom')
+                        })
+                        .onClick(() => {
+                          this.tabBarIndex = 1;
+                          this.controller.changeIndex(this.tabBarIndex);
+                        })
+                    }
+                    Image($r('app.media.ic_public_enlarge'))
+                      .width($r('app.float.common_image'))
+                      .height($r('app.float.common_image'))
+                      .onClick(() => {
+                        this.pageIndexInfos.pushPathByName(RouterConstants.TRENDS_PAGE_URL,
+                          { 'name': this.fundInfo[this.indexList].name } as Record<string, string>);
+                      })
+                  }
+                  .width(CommonConstants.FULL_WIDTH_PERCENT)
+                  .justifyContent(FlexAlign.SpaceBetween)
+                  .margin({
+                    bottom: $r('app.float.tab_bar_top')
+                  })
+                  Tabs({ controller: this.controller }) {
+                    TabContent() {
+                      Column() {
+                        Row() {
+                          ChartLegendComponent({
+                            name: $r('app.string.the_fund'),
+                            color: $r('app.color.fund_chart'),
+                            value: $r('app.string.the_fund_value')
+                          })
+                          ChartLegendComponent({
+                            name: $r('app.string.same_average'),
+                            color: $r('app.color.same_average_chart'),
+                            value: $r('app.string.same_average_value')
+                          })
+                          ChartLegendComponent({
+                            name: $r('app.string.other_funding'),
+                            color: $r('app.color.other_funding_chart'),
+                            value: $r('app.string.other_funding_value')
+                          })
+                        }
+                        .width(CommonConstants.FULL_WIDTH_PERCENT)
+                        .justifyContent(FlexAlign.SpaceBetween)
+
+                        Row() {
+                          LineChart({ model: this.lineChartModel })
+                        }
+                        .width(CommonConstants.FULL_WIDTH_PERCENT)
+                        .layoutWeight(1)
+
+                        Row() {
+                          Button($r('app.string.near_month', 1))
+                            .fontSize($r('app.float.chart_button_size'))
+                            .fontColor($r('app.color.harmony_blue'))
+                            .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                            .backgroundColor($r('app.color.five_percent_white_fund'))
+                            .height($r('app.float.chart_button_height'))
+                            .width(new BreakpointUtil({
+                              sm: $r('app.float.chart_button_min_width'),
+                              md: $r('app.float.chart_button_max_width'),
+                              lg: $r('app.float.chart_button_max_width')
+                            }).getValue(this.currentPoint))
+                          Button($r('app.string.near_month', 3))
+                            .chartButtonStyle()
+                          Button($r('app.string.near_month', 6))
+                            .chartButtonStyle()
+                          Button($r('app.string.near_year', 1))
+                            .chartButtonStyle()
+                          Button($r('app.string.near_year', 3))
+                            .chartButtonStyle()
+                        }
+                        .width(CommonConstants.FULL_WIDTH_PERCENT)
+                        .height('30vp')
+                        .justifyContent(FlexAlign.SpaceBetween)
+                        .margin({
+                          top: $r('app.float.chart_button_margin')
+                        })
+                      }
+                      .height(CommonConstants.FULL_HEIGHT_PERCENT)
+                    }
+                    .tabBar($r('app.string.performance_trends'))
+
+                    TabContent() {
+
+                    }
+                    .tabBar($r('app.string.unit_net_value'))
+                  }
+                  .barMode(BarMode.Scrollable, { margin: $r('app.float.tab_bar_margin')})
+                  .barHeight(0)
+                  .scrollable(false)
+                  .layoutWeight(1)
+                }
+                .backgroundColor(Color.White)
+                .layoutWeight(1)
+                .padding({
+                  top: $r('app.float.image_enlarge_margin'),
+                  left: $r('app.float.padding_common'),
+                  right: $r('app.float.padding_common')
+                })
+              }
+              .justifyContent(FlexAlign.Start)
+            }
+            .align(Alignment.TopStart)
+            .layoutWeight(1)
+            .scrollBar(BarState.Off)
+
+            Row() {
+              Row({ space: FundConstants.BOTTOM_ROW_SPACE }) {
+                Column({ space: FundConstants.COLLECT_COLUMN_SPACE }) {
+                  Image($r('app.media.ic_public_copy_fund'))
+                    .width($r('app.float.common_image'))
+                    .height($r('app.float.common_image'))
+                  Text($r('app.string.funding_contrasts'))
+                    .fontSize($r('app.float.contrasts_size'))
+                }
+                .onClick(() => {
+                  this.pageInfo.pushPath({ name: CommonConstants.PATH_COMPARISON })
+                })
+                Column({ space: FundConstants.COLLECT_COLUMN_SPACE }) {
+                  Image($r('app.media.ic_public_collect_fund'))
+                    .width($r('app.float.common_image'))
+                    .height($r('app.float.common_image'))
+                  Text($r('app.string.funding_concerned'))
+                    .fontSize($r('app.float.contrasts_size'))
+                }
+              }
+              Row({ space: FundConstants.BOTTOM_ROW_SPACE }) {
+                Button($r('app.string.fixed_investment_button'))
+                  .width(new BreakpointUtil({
+                    sm: $r('app.float.bottom_button_width'),
+                    md: $r('app.float.bottom_button_width_md'),
+                    lg: $r('app.float.bottom_button_width_md')
+                  }).getValue(this.currentPoint))
+                  .height($r('app.float.bottom_button_height'))
+                  .backgroundColor($r('app.color.five_percent_white_fund'))
+                  .fontColor($r('app.color.bottom_button'))
+                  .fontSize($r('app.float.common_font_size'))
+                  .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                Button($r('app.string.buying_button'))
+                  .width(new BreakpointUtil({
+                    sm: $r('app.float.bottom_button_width'),
+                    md: $r('app.float.bottom_button_width_md'),
+                    lg: $r('app.float.bottom_button_width_md')
+                  }).getValue(this.currentPoint))
+                  .height($r('app.float.bottom_button_height'))
+                  .backgroundColor($r('app.color.harmony_blue'))
+                  .fontColor(Color.White)
+                  .fontSize($r('app.float.common_font_size'))
+                  .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                  .onClick(() => {
+                    this.pageInfo.pushPath({ name: CommonConstants.PATH_BUYING, param: this.indexList });
+                  })
+              }
+            }
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .justifyContent(FlexAlign.SpaceBetween)
+            .padding({
+              top: $r('app.float.bottom_padding_tb'),
+              bottom: $r('app.float.bottom_padding_tb'),
+              left: $r('app.float.padding_common'),
+              right: $r('app.float.padding_common')
+            })
+          }
+          .height(CommonConstants.FULL_HEIGHT_PERCENT)
+          .justifyContent(FlexAlign.SpaceBetween)
+        }
+      }
+      .onBreakpointChange((breakpoints: string) => {
+        this.currentPoint = breakpoints;
+      })
+    }
+    .hideTitleBar(true)
+    .backgroundColor($r('app.color.common_background'))
+    .onBackPressed(() => {
+      this.pageIndexInfos.pop();
+      return true;
+    })
+  }
+}
+
+@Extend(Button)
+function chartButtonStyle() {
+  .fontSize($r('app.float.chart_button_size'))
+  .fontColor($r('sys.color.mask_secondary'))
+  .fontWeight(CommonConstants.FONT_WEIGHT_500)
+  .backgroundColor(Color.White)
+  .height($r('app.float.chart_button_height'))
+  .constraintSize({
+    minWidth: $r('app.float.chart_button_min_width'),
+    maxWidth: $r('app.float.chart_button_max_width')
+  })
+}
+
+@Extend(Text)
+function buildTextStyle() {
+  .fontSize($r('app.float.currency_size'))
+  .fontColor($r('app.color.currency_font'))
+  .border({
+    width: $r('app.float.common_divider'),
+    color: $r('app.color.currency_border'),
+    radius: $r('app.float.currency_border_radius')
+  })
+  .padding({
+    top: $r('app.float.currency_padding_tb'),
+    bottom: $r('app.float.currency_padding_tb'),
+    left: $r('app.float.currency_padding_lr'),
+    right: $r('app.float.currency_padding_lr')
+  })
+}
diff --git a/MultiFinancialManagement/features/fund/src/main/ets/view/FundComponent.ets b/MultiFinancialManagement/features/fund/src/main/ets/view/FundComponent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ced88e16b2842facd04961b632c75bd6a6e6e450
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/ets/view/FundComponent.ets
@@ -0,0 +1,499 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointUtil, BusinessInfo, CommonConstants, FundDetail, RouterConstants } from '@ohos/basic';
+import { FundConstants } from '../constants/FundConstants';
+import FundingViewModel from '../viewmodel/FundingViewModel';
+
+@Component
+  // [Start fund_component]
+export struct FundComponent {
+  // [StartExclude fund_component]
+  @State currentPoint: string = CommonConstants.BREAK_POINT_SM;
+  @State tabBarIndex: number = 0;
+  @State backgroundX: number = 0;
+  @StorageProp('avoidArea') topHeight: number = 0;
+  @StorageProp('bottom') bottom: number = 0;
+  @StorageLink('pageIndexInfos') pageIndexInfos: NavPathStack = new NavPathStack();
+  private controller: TabsController = new TabsController();
+
+  build() {
+    GridRow({
+      breakpoints: {
+        value: CommonConstants.BREAK_POINTS_VALUE,
+        reference: BreakpointsReference.ComponentSize
+      },
+      columns: {
+        sm: CommonConstants.COLUMN_SM,
+        md: CommonConstants.COLUMN_MD,
+        lg: CommonConstants.COLUMN_LG
+      },
+      direction: GridRowDirection.Row
+    }) {
+      GridCol({
+        span: {
+          sm: CommonConstants.COLUMN_SM,
+          md: CommonConstants.COLUMN_MD,
+          lg: CommonConstants.COLUMN_LG
+        }
+      }) {
+        Row() {
+          Image($r('app.media.ic_public_back'))
+            .width($r('app.float.common_image'))
+            .height($r('app.float.common_image'))
+            .fillColor(Color.Black)
+            .onClick(() => {
+              this.pageIndexInfos.pop();
+            })
+
+          Search({ placeholder: $r('app.string.search_placeholder') })
+            .visibility(this.currentPoint === CommonConstants.BREAK_POINT_SM ? Visibility.Visible : Visibility.None)
+            .enableKeyboardOnFocus(false)
+            .placeholderColor($r('sys.color.mask_secondary'))
+            .borderColor($r('app.color.five_percent_white_fund'))
+            .searchIcon({
+              color: $r('sys.color.mask_secondary')
+            })
+            .width(this.currentPoint === CommonConstants.BREAK_POINT_SM ?
+              $r('app.float.search_width_sm') : $r('app.float.search_width'))
+            .margin({
+              left: $r('app.float.common_margin'),
+              right: $r('app.float.common_margin')
+            })
+
+          Row() {
+            Search({ placeholder: $r('app.string.search_placeholder') })
+              .visibility(this.currentPoint === CommonConstants.BREAK_POINT_SM ? Visibility.None : Visibility.Visible)
+              .enableKeyboardOnFocus(false)
+              .placeholderColor($r('sys.color.mask_secondary'))
+              .borderColor($r('app.color.five_percent_white_fund'))
+              .searchIcon({
+                color: $r('sys.color.mask_secondary')
+              })
+              .width(this.currentPoint === CommonConstants.BREAK_POINT_SM ?
+                $r('app.float.search_width_sm') : $r('app.float.search_width'))
+              .margin({
+                left: $r('app.float.common_margin'),
+                right: $r('app.float.common_margin')
+              })
+            Image($r('app.media.ic_public_comments'))
+              .width($r('app.float.common_image'))
+              .height($r('app.float.common_image'))
+              .fillColor(Color.Black)
+          }
+        }
+        .width(CommonConstants.FULL_WIDTH_PERCENT)
+        .backgroundColor(Color.White)
+        .justifyContent(FlexAlign.SpaceBetween)
+        .padding({
+          left: $r('app.float.padding_common'),
+          right: $r('app.float.padding_common'),
+          top: $r('app.float.title_padding_tb'),
+          bottom: $r('app.float.title_padding_tb')
+        })
+        .margin({
+          top: this.topHeight
+        })
+      }
+
+      GridCol({
+        span: {
+          sm: CommonConstants.COLUMN_SM,
+          md: CommonConstants.COLUMN_MD,
+          lg: CommonConstants.COLUMN_LG
+        }
+      }) {
+        Column() {
+          Scroll() {
+            Column() {
+              this.buildMyFundingInfo()
+
+              this.buildSwiperButton()
+
+              this.buildSteadyGrowth()
+
+              Column() {
+                Row() {
+                  Image($r('app.media.ic_pursue_profit'))
+                    .width($r('app.float.common_image'))
+                    .height($r('app.float.common_image'))
+                  Text($r('app.string.pursue_profit'))
+                    .fontSize($r('app.float.common_font_size'))
+                    .fontColor($r('app.color.pursue_text'))
+                    .lineHeight($r('app.float.common_line_height'))
+                    .fontWeight(FontWeight.Regular)
+                    .margin({
+                      left: $r('app.float.pursue_margin_left')
+                    })
+                }
+                .width(CommonConstants.FULL_WIDTH_PERCENT)
+                .justifyContent(FlexAlign.Start)
+
+                Row({ space: FundConstants.TAB_ROW_SPACE }) {
+                  this.buildTabBarText($r('app.string.common_stock'), 0)
+                  this.buildTabBarText($r('app.string.partial_stock_mix'), 1)
+                  this.buildTabBarText($r('app.string.flexible_configuration'), 2)
+                  this.buildTabBarText($r('app.string.index_funds'), 3)
+                }
+                .width(CommonConstants.FULL_WIDTH_PERCENT)
+                .justifyContent(FlexAlign.Start)
+                .alignItems(VerticalAlign.Center)
+                .height($r('app.float.title_height'))
+
+                Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
+                  TabContent(){
+                    Row() {
+                      // [EndExclude fund_component]
+                      List() {
+                        ForEach(new BreakpointUtil({
+                          sm: FundingViewModel.getAllFundInfo(0, 2),
+                          md: FundingViewModel.getAllFundInfo(0, 4),
+                          lg: FundingViewModel.getAllFundInfo(0, 6)
+                        }).getValue(this.currentPoint), (item: FundDetail) => {
+                          ListItem() {
+                            Row() {
+                              Text(item.amplitude)
+                                .fontSize($r('app.float.amplitude_text_size'))
+                                .fontColor($r('app.color.amplitude_text_font'))
+                                .fontWeight(CommonConstants.FONT_WEIGHT_700)
+                              Text(item.name)
+                                .fontSize($r('app.float.common_font_size'))
+                                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                                .fontFamily(CommonConstants.FONT_FAMILY_HEI_TI)
+                                .margin({
+                                  left: $r('app.float.margin_text_left')
+                                })
+                            }
+                            .justifyContent(FlexAlign.SpaceAround)
+                          }
+                        })
+                      }
+                      .lanes(new BreakpointUtil({
+                        sm: 1,
+                        md: 2,
+                        lg: 3
+                      }).getValue(this.currentPoint))
+                      .width(CommonConstants.FULL_WIDTH_PERCENT)
+                      // [StartExclude fund_component]
+                      .scrollBar(BarState.Off)
+                    }
+                    .height(CommonConstants.FULL_HEIGHT_PERCENT)
+                    .alignItems(VerticalAlign.Top)
+                  }
+                  .tabBar($r('app.string.common_stock'))
+                  TabContent(){
+                  }
+                  .tabBar($r('app.string.partial_stock_mix'))
+                  TabContent(){
+                  }
+                  .tabBar($r('app.string.flexible_configuration'))
+                  TabContent(){
+                  }
+                  .tabBar($r('app.string.index_funds'))
+                }
+                .barHeight(0)
+                .scrollable(false)
+                .barMode(BarMode.Scrollable)
+                .barWidth(CommonConstants.FULL_WIDTH_PERCENT)
+                .height($r('app.float.profit_tab_height'))
+              }
+              .backgroundColor(Color.White)
+              .padding($r('app.float.bottom_padding'))
+              .margin({
+                top: $r('app.float.bottom_margin_top')
+              })
+            }
+          }
+          .scrollBar(BarState.Off)
+        }
+        .margin({
+          top: $r('app.float.scroll_margin_top'),
+          bottom: this.bottom
+        })
+      }
+      .backgroundColor($r('app.color.common_background'))
+      .padding({
+        left: $r('app.float.padding_common'),
+        right: $r('app.float.padding_common')
+      })
+    }
+    .onBreakpointChange((breakpoints: string) => {
+      this.currentPoint = breakpoints;
+    })
+  }
+
+  @Builder
+  buildTabBarText(text: ResourceStr, index: number) {
+    Text(text)
+      .fontSize($r('app.float.tab_text_size_fund'))
+      .lineHeight($r('app.float.common_line_height'))
+      .fontColor(this.tabBarIndex === index ? $r('app.color.harmony_blue') : Color.Black)
+      .border({
+        width: {
+          bottom: $r('app.float.tab_bar_border')
+        },
+        color: this.tabBarIndex === index ? $r('app.color.harmony_blue') : $r('app.color.transparent_color')
+      })
+      .padding({
+        bottom: $r('app.float.tab_bar_padding_bottom')
+      })
+      .onClick(() => {
+        this.tabBarIndex = index;
+        this.controller.changeIndex(this.tabBarIndex);
+      })
+  }
+
+  @Builder
+  buildSteadyGrowth() {
+    Column() {
+      Row() {
+        Image($r('app.media.ic_steady_growth'))
+          .width($r('app.float.common_image'))
+          .height($r('app.float.common_image'))
+        Text($r('app.string.steady_growth'))
+          .fontSize($r('app.float.common_font_size'))
+          .fontColor($r('app.color.steady_font'))
+          .lineHeight($r('app.float.common_line_height'))
+          .fontWeight(FontWeight.Regular)
+          .margin({
+            left: $r('app.float.steady_margin_left')
+          })
+      }
+      .width(CommonConstants.FULL_WIDTH_PERCENT)
+      .justifyContent(FlexAlign.Start)
+
+      List() {
+        ForEach(new BreakpointUtil({
+          sm: FundingViewModel.getAllFundInfo(FundConstants.FUND_COUNT_START, FundConstants.FUND_COUNT_SM),
+          md: FundingViewModel.getAllFundInfo(FundConstants.FUND_COUNT_START, FundConstants.FUND_COUNT_MD),
+          lg: FundingViewModel.getAllFundInfo(FundConstants.FUND_COUNT_START, FundConstants.FUND_COUNT_LG)
+        }).getValue(this.currentPoint), (item: FundDetail, index: number) => {
+          ListItem() {
+            Column() {
+              Text(item.name)
+                .fontSize($r('app.float.common_font_size'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                .fontFamily(CommonConstants.FONT_FAMILY_HEI_TI)
+              Text(item.amplitude)
+                .fontSize($r('app.float.amplitude_text_size'))
+                .fontColor($r('app.color.amplitude_text_font'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_700)
+              Text($r('app.string.one_year_amplitude'))
+                .fontSize($r('app.float.year_text_size'))
+                .fontColor($r('app.color.forty_percent_white'))
+            }
+            .height($r('app.float.list_item_height'))
+            .width($r('app.float.list_item_width'))
+            .justifyContent(FlexAlign.SpaceAround)
+            .onClick(() => {
+              this.pageIndexInfos.pushPathByName(RouterConstants.FUNDING_DETAIL_URL,
+                { 'listIndex': index } as Record<string, number>);
+            })
+          }
+          .width(CommonConstants.FULL_WIDTH_PERCENT)
+        })
+      }
+      .lanes(new BreakpointUtil({
+        sm: FundConstants.LIST_LANES_SM,
+        md: FundConstants.LIST_LANES_MD,
+        lg: FundConstants.LIST_LANES_LG
+      }).getValue(this.currentPoint),
+        this.currentPoint === CommonConstants.BREAK_POINT_SM ?
+          $r('app.float.list_space_sm') : $r('app.float.list_space'))
+      .width(CommonConstants.FULL_WIDTH_PERCENT)
+      .margin({
+        top: $r('app.float.common_margin'),
+        bottom: $r('app.float.list_margin_bottom')
+      })
+    }
+    .backgroundColor(Color.White)
+    .padding($r('app.float.list_padding'))
+  }
+
+  @Builder
+  buildSwiperButton() {
+    Swiper() {
+      Row() {
+        ForEach(new BreakpointUtil({
+          sm: FundingViewModel.getFundingButtonBusiness(FundConstants.FUND_COUNT_START, FundConstants.BUTTON_COUNT_SM),
+          md: FundingViewModel.getFundingButtonBusiness(FundConstants.FUND_COUNT_START, FundConstants.BUTTON_COUNT_MD),
+          lg: FundingViewModel.getFundingButtonBusiness(FundConstants.FUND_COUNT_START)
+        }).getValue(this.currentPoint), (item: BusinessInfo) => {
+          Column() {
+            Image(item.icon)
+              .width($r('app.float.common_image'))
+              .height($r('app.float.common_image'))
+            Text(item.text)
+              .fontSize($r('app.float.button_text_size'))
+              .fontWeight(FontWeight.Normal)
+              .margin({
+                top: $r('app.float.button_text_margin_top')
+              })
+          }
+        }, (item: BusinessInfo, index?: number) => index + JSON.stringify(item))
+      }
+      .height($r('app.float.swiper_height'))
+      .width(CommonConstants.FULL_WIDTH_PERCENT)
+      .justifyContent(FlexAlign.SpaceBetween)
+      .alignItems(VerticalAlign.Top)
+      if (this.currentPoint !== CommonConstants.BREAK_POINT_LG) {
+        Row() {
+          ForEach(new BreakpointUtil({
+            sm: FundingViewModel.getFundingButtonBusiness(FundConstants.BUTTON_COUNT_SM),
+            md: FundingViewModel.getFundingButtonBusiness(FundConstants.BUTTON_COUNT_MD)
+          }).getValue(this.currentPoint), (item: BusinessInfo) => {
+            Column() {
+              Image(item.icon)
+                .width($r('app.float.common_image'))
+                .height($r('app.float.common_image'))
+              Text(item.text)
+                .fontSize($r('app.float.button_text_size'))
+                .fontWeight(FontWeight.Normal)
+                .margin({
+                  top: $r('app.float.button_text_margin_top')
+                })
+            }
+          }, (item: BusinessInfo, index?: number) => index + JSON.stringify(item))
+
+          ForEach(new BreakpointUtil({
+            sm: FundingViewModel.getFundingButtonBusiness(FundConstants.FUND_COUNT_START, FundConstants.COLUMN_COUNT_SM),
+            md: FundingViewModel.getFundingButtonBusiness(FundConstants.FUND_COUNT_START, FundConstants.COLUMN_COUNT_MD)
+          }).getValue(this.currentPoint), () => {
+            Column() {
+            }
+            .width($r('app.float.column_swiper_width'))
+          }, (item: BusinessInfo, index?: number) => index + JSON.stringify(item))
+        }
+        .height($r('app.float.swiper_height'))
+        .width(CommonConstants.FULL_WIDTH_PERCENT)
+        .justifyContent(FlexAlign.SpaceBetween)
+        .alignItems(VerticalAlign.Top)
+      }
+    }
+    .height(this.currentPoint === CommonConstants.BREAK_POINT_LG ?
+      $r('app.float.swiper_build_height_lg') : $r('app.float.swiper_build_height'))
+    .indicator(this.currentPoint === CommonConstants.BREAK_POINT_LG ? false : true)
+    .margin({
+      top: $r('app.float.swiper_build_margin_top')
+    })
+  }
+
+  @Builder
+  buildMyFundingInfo() {
+    Column() {
+      Column() {
+        Column() {
+          Row() {
+            Text($r('app.string.my_funding'))
+              .fontWeight(FontWeight.Normal)
+              .fontColor(Color.White)
+              .fontSize($r('app.float.my_fund_size'))
+            Row() {
+              Text($r('app.string.my_concern'))
+                .fontWeight(FontWeight.Normal)
+                .fontColor(Color.White)
+                .fontSize($r('app.float.my_fund_size'))
+                .margin({
+                  right: $r('app.float.concern_margin_right')
+                })
+              Image($r('app.media.ic_public_arrow_right'))
+                .width($r('app.float.arrow_width'))
+                .height($r('app.float.common_image'))
+                .fillColor(Color.White)
+            }
+          }
+          .justifyContent(FlexAlign.SpaceBetween)
+          .width(CommonConstants.FULL_WIDTH_PERCENT)
+
+          Text($r('app.string.my_amount'))
+            .fontSize($r('app.float.amount_text_size'))
+            .fontColor(Color.White)
+            .fontWeight(CommonConstants.FONT_WEIGHT_700)
+            .margin({
+              top: $r('app.float.amount_margin_top')
+            })
+        }
+        .alignItems(HorizontalAlign.Start)
+
+        Row() {
+          Image($r('app.media.ic_public_sound'))
+            .width($r('app.float.common_image'))
+            .height($r('app.float.common_image'))
+            .fillColor($r('app.color.sixty_percent_black'))
+          Text($r('app.string.funding_news'))
+            .fontSize($r('app.float.news_text_size'))
+            .fontColor($r('sys.color.font_on_secondary'))
+            .fontWeight(FontWeight.Normal)
+            .textOverflow({
+              overflow: TextOverflow.Ellipsis
+            })
+            .maxLines(1)
+            .layoutWeight(1)
+            .margin({
+              left: $r('app.float.sixty_margin_left')
+            })
+        }
+        .width(CommonConstants.FULL_WIDTH_PERCENT)
+      }
+      .width(CommonConstants.FULL_WIDTH_PERCENT)
+      .height(CommonConstants.FULL_HEIGHT_PERCENT)
+      .backgroundImage($r('app.media.ic_fund_background'))
+      .backgroundImageSize({
+        width: $r('app.float.ic_background_image_width'),
+        height: $r('app.float.ic_background_image_height')
+      })
+      .backgroundImagePosition({
+        x: this.backgroundX,
+        y: this.currentPoint === CommonConstants.BREAK_POINT_LG ?
+          $r('app.float.ic_background_position_lg') : $r('app.float.ic_background_position')
+      })
+      .padding({
+        top: $r('app.float.padding_common'),
+        bottom: $r('app.float.info_padding_bottom'),
+        left: new BreakpointUtil({
+          sm: $r('app.float.info_padding_left'),
+          md: $r('app.float.padding_common'),
+          lg: $r('app.float.padding_common')
+        }).getValue(this.currentPoint),
+        right: new BreakpointUtil({
+          sm: $r('app.float.info_padding_right_sm'),
+          md: $r('app.float.info_padding_right_md'),
+          lg: $r('app.float.info_padding_right_lg')
+        }).getValue(this.currentPoint)
+      })
+    }
+    .height($r('app.float.funding_info_height'))
+    .width(CommonConstants.FULL_WIDTH_PERCENT)
+    .linearGradient({
+      direction: GradientDirection.Right,
+      colors: [['#0954EA', 0], ['#6193F6', 0.91], ['#88AFFC', 1]]
+    })
+    .justifyContent(FlexAlign.SpaceBetween)
+    .borderRadius($r('app.float.info_radius'))
+    .onAreaChange((oldVale: Area, newVale: Area) => {
+      let width = newVale.width;
+      if (typeof width === 'number') {
+        if (this.currentPoint === CommonConstants.BREAK_POINT_LG) {
+          this.backgroundX = width - FundConstants.CALCULATE_POSITION_LG;
+        } else {
+          this.backgroundX = width - FundConstants.CALCULATE_POSITION;
+        }
+      }
+      this.backgroundX = vp2px(this.backgroundX)
+    })
+  }
+  // [EndExclude fund_component]
+}
+// [End fund_component]
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/ets/view/FundNavigationComponent.ets b/MultiFinancialManagement/features/fund/src/main/ets/view/FundNavigationComponent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..7eee6a4bd841835e6b58f6a99e659a2802b19c3a
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/ets/view/FundNavigationComponent.ets
@@ -0,0 +1,475 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointUtil, BusinessInfo, CommonConstants, FundDetail } from '@ohos/basic';
+import { FundConstants } from '../constants/FundConstants';
+import FundingViewModel from '../viewmodel/FundingViewModel';
+
+@Component
+export struct FundNavigationComponent {
+  @State currentPoint: string = CommonConstants.BREAK_POINT_SM;
+  @StorageLink('pageInfo') pageInfo: NavPathStack = new NavPathStack();
+  @State listIndex: number = 0;
+  @State tabBarIndex: number = 0;
+  @State backgroundX: number = 0;
+  @StorageLink('pageIndexInfos') pageIndexInfos: NavPathStack = new NavPathStack();
+  private controller: TabsController = new TabsController();
+
+  build() {
+    GridRow({
+      breakpoints: {
+        value: CommonConstants.BREAK_POINTS_VALUE,
+        reference: BreakpointsReference.ComponentSize
+      },
+      columns: {
+        xs: CommonConstants.COLUMN_SM,
+        sm: CommonConstants.COLUMN_SM,
+        md: CommonConstants.COLUMN_MD,
+        lg: CommonConstants.COLUMN_LG
+      },
+      direction: GridRowDirection.Row
+    }) {
+      GridCol({
+        span: {
+          xs: CommonConstants.COLUMN_SM,
+          sm: CommonConstants.COLUMN_SM,
+          md: CommonConstants.COLUMN_MD,
+          lg: CommonConstants.COLUMN_LG
+        }
+      }) {
+        Row() {
+          Image($r('app.media.ic_public_back'))
+            .width($r('app.float.common_image'))
+            .height($r('app.float.common_image'))
+            .fillColor(Color.Black)
+            .onClick(() => {
+              this.pageIndexInfos.pop();
+            })
+          Search({ placeholder: $r('app.string.search_placeholder') })
+            .enableKeyboardOnFocus(false)
+            .placeholderColor($r('app.color.sixty_percent_white'))
+            .borderColor($r('app.color.five_percent_white_fund'))
+            .searchIcon({
+              color: $r('app.color.sixty_percent_white')
+            })
+            .layoutWeight(1)
+            .margin({
+              left: $r('app.float.common_margin'),
+              right: $r('app.float.common_margin')
+            })
+          Image($r('app.media.ic_public_comments'))
+            .width($r('app.float.common_image'))
+            .height($r('app.float.common_image'))
+            .fillColor(Color.Black)
+        }
+        .width(CommonConstants.FULL_WIDTH_PERCENT)
+        .backgroundColor(Color.White)
+        .justifyContent(FlexAlign.SpaceBetween)
+        .padding({
+          left: $r('app.float.padding_common'),
+          right: $r('app.float.padding_common'),
+          top: $r('app.float.title_padding_tb'),
+          bottom: $r('app.float.title_padding_tb')
+        })
+      }
+
+      GridCol({
+        span: {
+          xs: CommonConstants.COLUMN_SM,
+          sm: CommonConstants.COLUMN_SM,
+          md: CommonConstants.COLUMN_MD,
+          lg: CommonConstants.COLUMN_LG
+        }
+      }) {
+        Column() {
+          Scroll() {
+            Column() {
+              this.buildMyFundingInfo()
+
+              this.buildSwiperButton()
+
+              this.buildSteadyGrowth()
+
+              Column() {
+                Row() {
+                  Image($r('app.media.ic_pursue_profit'))
+                    .width($r('app.float.common_image'))
+                    .height($r('app.float.common_image'))
+                  Text($r('app.string.pursue_profit'))
+                    .fontSize($r('app.float.common_font_size'))
+                    .fontColor($r('app.color.pursue_text'))
+                    .lineHeight($r('app.float.common_line_height'))
+                    .fontWeight(FontWeight.Regular)
+                    .margin({
+                      left: $r('app.float.pursue_margin_left')
+                    })
+                }
+                .width(CommonConstants.FULL_WIDTH_PERCENT)
+                .justifyContent(FlexAlign.Start)
+
+                Row({ space: FundConstants.BOTTOM_ROW_SPACE }) {
+                  this.buildTabBarText($r('app.string.common_stock'), 0)
+                  this.buildTabBarText($r('app.string.partial_stock_mix'), 1)
+                  this.buildTabBarText($r('app.string.flexible_configuration'), 2)
+                  this.buildTabBarText($r('app.string.index_funds'), 3)
+                }
+                .width(CommonConstants.FULL_WIDTH_PERCENT)
+                .justifyContent(FlexAlign.Start)
+                .alignItems(VerticalAlign.Center)
+                .height($r('app.float.title_height'))
+
+                Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
+                  TabContent(){
+                    Row() {
+                      List() {
+                        ForEach(new BreakpointUtil({
+                          sm: FundingViewModel.getAllFundInfo(0, 2),
+                          md: FundingViewModel.getAllFundInfo(0, 4),
+                          lg: FundingViewModel.getAllFundInfo(0, 6)
+                        }).getValue(this.currentPoint), (item: FundDetail) => {
+                          ListItem() {
+                            Row() {
+                              Text(item.amplitude)
+                                .fontSize($r('app.float.amplitude_text_size'))
+                                .fontColor($r('app.color.amplitude_text_font'))
+                                .fontWeight(CommonConstants.FONT_WEIGHT_700)
+                              Text(item.name)
+                                .fontSize($r('app.float.common_font_size'))
+                                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                                .fontFamily(CommonConstants.FONT_FAMILY_HEI_TI)
+                                .margin({
+                                  left: $r('app.float.margin_text_left')
+                                })
+                            }
+                            .justifyContent(FlexAlign.SpaceAround)
+                          }
+                        })
+                      }
+                      .lanes(new BreakpointUtil({
+                        sm: 1,
+                        md: 2,
+                        lg: 3
+                      }).getValue(this.currentPoint))
+                      .width(CommonConstants.FULL_WIDTH_PERCENT)
+                      .scrollBar(BarState.Off)
+                    }
+                    .height(CommonConstants.FULL_HEIGHT_PERCENT)
+                    .alignItems(VerticalAlign.Top)
+                  }
+                  .tabBar($r('app.string.common_stock'))
+                  TabContent(){
+                  }
+                  .tabBar($r('app.string.partial_stock_mix'))
+                  TabContent(){
+                  }
+                  .tabBar($r('app.string.flexible_configuration'))
+                  TabContent(){
+                  }
+                  .tabBar($r('app.string.index_funds'))
+                }
+                .barHeight(0)
+                .scrollable(false)
+                .barMode(BarMode.Scrollable)
+                .barWidth(CommonConstants.FULL_WIDTH_PERCENT)
+                .height($r('app.float.profit_tab_height'))
+              }
+              .backgroundColor(Color.White)
+              .padding($r('app.float.bottom_padding'))
+              .margin({
+                top: $r('app.float.bottom_margin_top')
+              })
+            }
+          }
+          .scrollBar(BarState.Off)
+          .margin({
+            top: $r('app.float.scroll_margin_top')
+          })
+        }
+      }
+      .backgroundColor($r('app.color.common_background'))
+      .padding({
+        left: $r('app.float.padding_common'),
+        right: $r('app.float.padding_common')
+      })
+    }
+    .onBreakpointChange((breakpoints: string) => {
+      this.currentPoint = breakpoints;
+      if (breakpoints === CommonConstants.BREAK_POINT_XS) {
+        this.currentPoint = CommonConstants.BREAK_POINT_SM
+      }
+    })
+  }
+
+  @Builder
+  buildTabBarText(text: ResourceStr, index: number) {
+    Text(text)
+      .fontSize($r('app.float.tab_text_size_fund'))
+      .lineHeight($r('app.float.common_line_height'))
+      .fontColor(this.tabBarIndex === index ? $r('app.color.harmony_blue') : Color.Black)
+      .border({
+        width: {
+          bottom: $r('app.float.tab_bar_border')
+        },
+        color: this.tabBarIndex === index ? $r('app.color.harmony_blue') : $r('app.color.transparent_color')
+      })
+      .padding({
+        bottom: $r('app.float.tab_bar_padding_bottom')
+      })
+      .onClick(() => {
+        this.tabBarIndex = index;
+        this.controller.changeIndex(this.tabBarIndex);
+      })
+  }
+
+  @Builder
+  buildSteadyGrowth() {
+    Column() {
+      Row() {
+        Image($r('app.media.ic_steady_growth'))
+          .width($r('app.float.common_image'))
+          .height($r('app.float.common_image'))
+        Text($r('app.string.steady_growth'))
+          .fontSize($r('app.float.common_font_size'))
+          .fontColor($r('app.color.steady_font'))
+          .lineHeight($r('app.float.common_line_height'))
+          .fontWeight(FontWeight.Regular)
+          .margin({
+            left: $r('app.float.steady_margin_left')
+          });
+      }
+      .width(CommonConstants.FULL_WIDTH_PERCENT)
+      .justifyContent(FlexAlign.Start)
+
+      List() {
+        ForEach(new BreakpointUtil({
+          sm: FundingViewModel.getAllFundInfo(FundConstants.FUND_COUNT_START, FundConstants.FUND_COUNT_SM),
+          md: FundingViewModel.getAllFundInfo(FundConstants.FUND_COUNT_START, FundConstants.FUND_COUNT_MD),
+          lg: FundingViewModel.getAllFundInfo(FundConstants.FUND_COUNT_START, FundConstants.FUND_COUNT_LG)
+        }).getValue(this.currentPoint), (item: FundDetail, index: number) => {
+          ListItem() {
+            Column() {
+              Text(item.name)
+                .fontSize($r('app.float.common_font_size'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                .fontFamily(CommonConstants.FONT_FAMILY_HEI_TI);
+              Text(item.amplitude)
+                .fontSize($r('app.float.amplitude_text_size'))
+                .fontColor($r('app.color.amplitude_text_font'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_700);
+              Text($r('app.string.one_year_amplitude'))
+                .fontSize($r('app.float.year_text_size'))
+                .fontColor($r('app.color.forty_percent_white'));
+            }
+            .height($r('app.float.list_item_height'))
+            .width($r('app.float.list_item_width'))
+            .justifyContent(FlexAlign.SpaceAround)
+            .onClick(() => {
+              this.pageInfo.pushPathByName(CommonConstants.PATH_DETAIL, index);
+              this.listIndex = index;
+            })
+          }
+          .width(CommonConstants.FULL_WIDTH_PERCENT)
+          .backgroundColor(this.listIndex === index ? $r('app.color.list_background') : Color.White)
+        }, (item: FundDetail, index: number) => index + JSON.stringify(item))
+      }
+      .lanes(new BreakpointUtil({
+        sm: FundConstants.LIST_LANES_SM,
+        md: FundConstants.LIST_LANES_MD,
+        lg: FundConstants.LIST_LANES_LG
+      }).getValue(this.currentPoint),
+        this.currentPoint === CommonConstants.BREAK_POINT_SM ?
+        $r('app.float.list_space_sm') : $r('app.float.list_space'))
+      .width(CommonConstants.FULL_WIDTH_PERCENT)
+      .margin({
+        top: $r('app.float.common_margin'),
+        bottom: $r('app.float.list_margin_bottom')
+      })
+    }
+    .backgroundColor(Color.White)
+    .padding($r('app.float.list_padding'))
+  }
+
+  @Builder
+  buildSwiperButton() {
+    Swiper() {
+      Row() {
+        ForEach(new BreakpointUtil({
+          sm: FundingViewModel.getFundingButtonBusiness(FundConstants.FUND_COUNT_START, FundConstants.BUTTON_COUNT_SM),
+          md: FundingViewModel.getFundingButtonBusiness(FundConstants.FUND_COUNT_START, FundConstants.BUTTON_COUNT_MD),
+          lg: FundingViewModel.getFundingButtonBusiness(FundConstants.FUND_COUNT_START)
+        }).getValue(this.currentPoint), (item: BusinessInfo) => {
+          Column() {
+            Image(item.icon)
+              .width($r('app.float.common_image'))
+              .height($r('app.float.common_image'))
+            Text(item.text)
+              .fontSize($r('app.float.button_text_size'))
+              .fontWeight(FontWeight.Normal)
+              .margin({
+                top: $r('app.float.button_text_margin_top')
+              })
+          }
+        }, (item: BusinessInfo, index?: number) => index + JSON.stringify(item));
+      }
+      .height($r('app.float.swiper_height'))
+      .width(CommonConstants.FULL_WIDTH_PERCENT)
+      .justifyContent(FlexAlign.SpaceBetween)
+      .alignItems(VerticalAlign.Top);
+      if (this.currentPoint !== CommonConstants.BREAK_POINT_LG) {
+        Row() {
+          ForEach(new BreakpointUtil({
+            sm: FundingViewModel.getFundingButtonBusiness(FundConstants.BUTTON_COUNT_SM),
+            md: FundingViewModel.getFundingButtonBusiness(FundConstants.BUTTON_COUNT_MD)
+          }).getValue(this.currentPoint), (item: BusinessInfo) => {
+            Column() {
+              Image(item.icon)
+                .width($r('app.float.common_image'))
+                .height($r('app.float.common_image'))
+              Text(item.text)
+                .fontSize($r('app.float.button_text_size'))
+                .fontWeight(FontWeight.Normal)
+                .margin({
+                  top: $r('app.float.button_text_margin_top')
+                })
+            };
+          }, (item: BusinessInfo, index?: number) => index + JSON.stringify(item));
+
+          ForEach(new BreakpointUtil({
+            sm: FundingViewModel.getFundingButtonBusiness(FundConstants.FUND_COUNT_START, FundConstants.COLUMN_COUNT_SM),
+            md: FundingViewModel.getFundingButtonBusiness(FundConstants.FUND_COUNT_START, FundConstants.COLUMN_COUNT_MD)
+          }).getValue(this.currentPoint), () => {
+            Column() {
+            }
+            .width($r('app.float.column_swiper_width'))
+          }, (item: BusinessInfo, index?: number) => index + JSON.stringify(item));
+        }
+        .height($r('app.float.swiper_height'))
+        .width(CommonConstants.FULL_WIDTH_PERCENT)
+        .justifyContent(FlexAlign.SpaceBetween)
+        .alignItems(VerticalAlign.Top)
+      }
+    }
+    .height(this.currentPoint === CommonConstants.BREAK_POINT_LG ?
+    $r('app.float.swiper_build_height_lg') : $r('app.float.swiper_build_height'))
+    .indicator(this.currentPoint === CommonConstants.BREAK_POINT_LG ? false : true)
+    .margin({
+      top: $r('app.float.swiper_build_margin_top')
+    })
+  }
+
+  @Builder
+  buildMyFundingInfo() {
+    Column() {
+      Column() {
+        Column() {
+          Row() {
+            Text($r('app.string.my_funding'))
+              .fontWeight(FontWeight.Normal)
+              .fontColor(Color.White)
+              .fontSize($r('app.float.my_fund_size'))
+            Row() {
+              Text($r('app.string.my_concern'))
+                .fontWeight(FontWeight.Normal)
+                .fontColor(Color.White)
+                .fontSize($r('app.float.my_fund_size'))
+                .margin({
+                  right: $r('app.float.concern_margin_right')
+                })
+              Image($r('app.media.ic_public_arrow_right'))
+                .width($r('app.float.arrow_width'))
+                .height($r('app.float.common_image'))
+                .fillColor(Color.White);
+            }
+          }
+          .justifyContent(FlexAlign.SpaceBetween)
+          .width(CommonConstants.FULL_WIDTH_PERCENT);
+
+          Text($r('app.string.my_amount'))
+            .fontSize($r('app.float.amount_text_size'))
+            .fontColor(Color.White)
+            .fontWeight(CommonConstants.FONT_WEIGHT_700)
+            .margin({
+              top: $r('app.float.amount_margin_top')
+            })
+        }
+        .alignItems(HorizontalAlign.Start)
+
+        Row() {
+          Image($r('app.media.ic_public_sound'))
+            .width($r('app.float.common_image'))
+            .height($r('app.float.common_image'))
+            .fillColor($r('app.color.sixty_percent_black'))
+          Text($r('app.string.funding_news'))
+            .fontSize($r('app.float.news_text_size'))
+            .fontColor($r('app.color.sixty_percent_black'))
+            .fontWeight(FontWeight.Normal)
+            .textOverflow({
+              overflow: TextOverflow.Ellipsis
+            })
+            .maxLines(1)
+            .layoutWeight(1)
+            .margin({
+              left: $r('app.float.sixty_margin_left')
+            })
+        }
+        .width(CommonConstants.FULL_WIDTH_PERCENT)
+      }
+      .width(CommonConstants.FULL_WIDTH_PERCENT)
+      .height(CommonConstants.FULL_HEIGHT_PERCENT)
+      .backgroundImage($r('app.media.ic_fund_background'))
+      .backgroundImageSize({
+        width: $r('app.float.ic_background_image_width'),
+        height: $r('app.float.ic_background_image_height')
+      })
+      .backgroundImagePosition({
+        x: this.backgroundX,
+        y: $r('app.float.ic_background_position_lg')
+      })
+      .padding({
+        top: $r('app.float.padding_common'),
+        bottom: $r('app.float.info_padding_bottom'),
+        left: new BreakpointUtil({
+          sm: $r('app.float.info_padding_left'),
+          md: $r('app.float.padding_common'),
+          lg: $r('app.float.padding_common')
+        }).getValue(this.currentPoint),
+        right: new BreakpointUtil({
+          sm: $r('app.float.info_padding_right_sm'),
+          md: $r('app.float.info_padding_right_md'),
+          lg: $r('app.float.info_padding_right_lg')
+        }).getValue(this.currentPoint)
+      })
+    }
+    .height($r('app.float.funding_info_height'))
+    .width(CommonConstants.FULL_WIDTH_PERCENT)
+    .linearGradient({
+      direction: GradientDirection.Right,
+      colors: [['#0954EA', 0], ['#6193F6', 0.91], ['#88AFFC', 1]]
+    })
+    .justifyContent(FlexAlign.SpaceBetween)
+    .borderRadius($r('app.float.info_radius'))
+    .onAreaChange((oldVale: Area, newVale: Area) => {
+      let width = newVale.width;
+      if (typeof width === 'number') {
+        if (this.currentPoint === CommonConstants.BREAK_POINT_LG) {
+          this.backgroundX = width - FundConstants.CALCULATE_POSITION_LG;
+        } else {
+          this.backgroundX = width - FundConstants.CALCULATE_POSITION;
+        }
+      }
+      this.backgroundX = vp2px(this.backgroundX)
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/ets/view/Funding.ets b/MultiFinancialManagement/features/fund/src/main/ets/view/Funding.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6157f9603ad95689dde79e0ad96f3a5907523cd8
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/ets/view/Funding.ets
@@ -0,0 +1,137 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonConstants } from '@ohos/basic/';
+import { window } from '@kit.ArkUI';
+import { FundConstants } from '../constants/FundConstants';
+import { FundComponent } from './FundComponent';
+import FundingViewModel from '../viewmodel/FundingViewModel';
+
+@Component
+export struct Funding {
+  @StorageLink('breakPoint') breakPoint: string = CommonConstants.BREAK_POINT_SM;
+  @State currentTabIndex: number = 0;
+  @StorageProp('avoidArea') topHeight: number = 0;
+
+  @Builder
+  BuildTabs(icon: Resource, title: ResourceStr, index: number) {
+    Column({ space: FundConstants.TAB_COLUMN_SPACE }) {
+      Image(icon)
+        .width($r('app.float.common_image'))
+        .height($r('app.float.common_image'))
+        .fillColor(this.currentTabIndex === index ? $r('app.color.tab_choose_image') : $r('app.color.tab_un_image'))
+      Text(title)
+        .fontSize($r('app.float.home_tab_text_size'))
+        .lineHeight($r('app.float.tab_text_height'))
+        .fontWeight(FontWeight.Regular)
+        .fontColor(this.currentTabIndex === index ? $r('app.color.tab_choose_image') : $r('app.color.tab_un_image'))
+    }
+  }
+
+  @Builder
+  BuildTabsMine(icon: Resource, unIcon: Resource, title: ResourceStr, index: number) {
+    Column({ space: FundConstants.TAB_COLUMN_SPACE }) {
+      Image(this.currentTabIndex === index ? icon : unIcon)
+        .width($r('app.float.common_image'))
+        .height($r('app.float.common_image'))
+      Text(title)
+        .fontSize($r('app.float.home_tab_text_size'))
+        .lineHeight($r('app.float.tab_text_height'))
+        .fontWeight(FontWeight.Regular)
+        .fontColor(this.currentTabIndex === index ? $r('app.color.tab_choose_image') : $r('app.color.tab_un_image'))
+    }
+  }
+
+  build() {
+    NavDestination() {
+      GridRow({
+        breakpoints: {
+          value: CommonConstants.BREAK_POINTS_VALUE,
+          reference: BreakpointsReference.WindowSize
+        },
+        columns: {
+          sm: CommonConstants.COLUMN_SM,
+          md: CommonConstants.COLUMN_MD,
+          lg: CommonConstants.COLUMN_LG
+        },
+        direction: GridRowDirection.Row
+      }) {
+        GridCol({
+          span: {
+            sm: CommonConstants.COLUMN_SM,
+            md: CommonConstants.COLUMN_MD,
+            lg: CommonConstants.COLUMN_LG
+          }
+        }) {
+          Column() {
+            Tabs({
+              barPosition: this.breakPoint === CommonConstants.BREAK_POINT_LG ? BarPosition.Start : BarPosition.End
+            }) {
+              TabContent() {
+                FundComponent()
+              }
+              .tabBar(this.BuildTabs($r('app.media.ic_public_home_filled'), $r('app.string.tab_bar_home'), 0))
+
+              TabContent() {
+              }
+              .tabBar(this.BuildTabs($r('app.media.ic_public_cards_filled'), $r('app.string.tab_bar_card'), 1))
+
+              TabContent() {
+              }
+              .tabBar(this.BuildTabs($r('app.media.ic_home_fortunes'), $r('app.string.tab_bar_fortunes'), 2))
+
+              TabContent() {
+              }
+              .tabBar(this.BuildTabs($r('app.media.ic_life_filled'), $r('app.string.tab_bar_life'), 3))
+
+              TabContent() {
+              }
+              .tabBar(this.BuildTabsMine($r('app.media.ic_home_mine'), $r('app.media.ic_home_mine_filled'),
+                $r('app.string.tab_bar_mine'), 4))
+            }
+            .vertical(this.breakPoint === CommonConstants.BREAK_POINT_LG)
+            .barWidth(this.breakPoint === CommonConstants.BREAK_POINT_LG ?
+              $r('app.float.tab_bar_width') : CommonConstants.TAB_BAR_HEIGHT_PERCENT)
+            .barHeight(this.breakPoint === CommonConstants.BREAK_POINT_LG ?
+            CommonConstants.TAB_HEIGHT_PERCENT : 0)
+            .backgroundColor($r('app.color.home_background'))
+            .scrollable(false)
+            .onChange((index: number) => {
+              this.currentTabIndex = index;
+            })
+          }
+        }
+      }
+    }
+    .hideTitleBar(true)
+    .onWillShow(() => {
+      AppStorage.setOrCreate('allFund', FundingViewModel.getAllFundInfo());
+      window.getLastWindow(getContext(this)).then((windowStage: window.Window) => {
+        let sysBarProps: window.SystemBarProperties = {
+          statusBarColor: '#FFFFFF'
+        };
+        windowStage.setWindowSystemBarProperties(sysBarProps);
+      })
+    })
+    .onWillDisappear(() => {
+      window.getLastWindow(getContext(this)).then((windowStage: window.Window) => {
+        let sysBarProps: window.SystemBarProperties = {
+          statusBarColor: '#00ffffff'
+        };
+        windowStage.setWindowSystemBarProperties(sysBarProps);
+      })
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/ets/view/FundingDetail.ets b/MultiFinancialManagement/features/fund/src/main/ets/view/FundingDetail.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b8f67056f68328d0730aa9a2d1cb9b511412a69a
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/ets/view/FundingDetail.ets
@@ -0,0 +1,161 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonConstants } from '@ohos/basic/';
+import { ComparisonComponent, ComparisonInfo, ComparisonDetailComponent } from '@ohos/fundComparison/';
+import { TransactionComponent } from '@ohos/transaction/';
+import { FundConstants } from '../constants/FundConstants';
+import { DetailComponent } from './DetailComponent';
+import { FundNavigationComponent } from './FundNavigationComponent';
+
+@Component
+export struct FundingDetail {
+  @StorageLink('pageInfo') pageInfo: NavPathStack = new NavPathStack();
+  @StorageLink('breakPoint') breakPoint: string = CommonConstants.BREAK_POINT_SM;
+  @State currentTabIndex: number = 0;
+  @State index: number = 0;
+  @StorageProp('avoidArea') topHeight: number = 0;
+  @StorageProp('bottom') bottom: number = 0;
+  @StorageLink('pageIndexInfos') pageIndexInfos: NavPathStack = new NavPathStack();
+
+  build() {
+    NavDestination() {
+      GridRow({
+        breakpoints: {
+          value: CommonConstants.BREAK_POINTS_VALUE,
+          reference: BreakpointsReference.WindowSize
+        },
+        columns: {
+          sm: CommonConstants.COLUMN_SM,
+          md: CommonConstants.COLUMN_MD,
+          lg: CommonConstants.COLUMN_LG
+        },
+        direction: GridRowDirection.Row
+      }) {
+        GridCol({
+          span: {
+            sm: CommonConstants.COLUMN_SM,
+            md: CommonConstants.COLUMN_MD,
+            lg: CommonConstants.COLUMN_LG
+          }
+        }) {
+          Column() {
+            Tabs({
+              barPosition: this.breakPoint === CommonConstants.BREAK_POINT_LG ? BarPosition.Start : BarPosition.End
+            }) {
+              TabContent() {
+                // [Start funding_detail]
+                Navigation(this.pageInfo) {
+                  FundNavigationComponent({ listIndex: this.index })
+                }
+                .navDestination(this.buildNavDestination)
+                .hideTitleBar(true)
+                .hideBackButton(true)
+                .mode(this.breakPoint === CommonConstants.BREAK_POINT_LG ? NavigationMode.Split : NavigationMode.Stack)
+                .navBarWidth(FundConstants.NAV_BAR_WIDTH)
+                // [End funding_detail]
+              }
+              .tabBar(this.BuildTabs($r('app.media.ic_public_home_filled'), $r('app.string.tab_bar_home'), 0))
+
+              TabContent() {
+              }
+              .tabBar(this.BuildTabs($r('app.media.ic_public_cards_filled'), $r('app.string.tab_bar_card'), 1))
+
+              TabContent() {
+              }
+              .tabBar(this.BuildTabs($r('app.media.ic_home_fortunes'), $r('app.string.tab_bar_fortunes'), 2))
+
+              TabContent() {
+              }
+              .tabBar(this.BuildTabs($r('app.media.ic_life_filled'), $r('app.string.tab_bar_life'), 3))
+
+              TabContent() {
+              }
+              .tabBar(this.BuildTabsMine($r('app.media.ic_home_mine'), $r('app.media.ic_home_mine_filled'),
+                $r('app.string.tab_bar_mine'), 4))
+            }
+            .vertical(this.breakPoint === CommonConstants.BREAK_POINT_LG)
+            .barWidth(this.breakPoint === CommonConstants.BREAK_POINT_LG ?
+              $r('app.float.tab_bar_width') : CommonConstants.TAB_BAR_HEIGHT_PERCENT)
+            .barHeight(this.breakPoint === CommonConstants.BREAK_POINT_LG ?
+            CommonConstants.TAB_HEIGHT_PERCENT : 0)
+            .backgroundColor($r('app.color.home_background'))
+            .scrollable(false)
+            .onChange((index: number) => {
+              this.currentTabIndex = index;
+            })
+          }
+        }
+      }
+    }
+    .hideTitleBar(true)
+    .onWillAppear(() => {
+      this.pageInfo.pushPath({ name: CommonConstants.PATH_DETAIL, param: this.index }, false);
+    })
+    .margin({
+      top: this.topHeight,
+      bottom: this.bottom
+    })
+  }
+  // [Start build_nav_destination]
+  @Builder
+  buildNavDestination(name: string, param: object) {
+    if (name === CommonConstants.PATH_DETAIL) {
+      if (typeof param === 'number') {
+        DetailComponent({ indexList: param })
+      }
+    } else if (name === CommonConstants.PATH_COMPARISON) {
+      ComparisonComponent()
+    } else if (name === CommonConstants.PATH_COMPARISON_DETAIL) {
+      NavDestination() {
+        ComparisonDetailComponent({ chooseComparison: (param as ComparisonInfo[]) })
+      }
+      .hideTitleBar(true)
+    } else if (name === CommonConstants.PATH_BUYING) {
+      if (typeof param === 'number') {
+        TransactionComponent({ indexList: param })
+      }
+    }
+  }
+  // [End build_nav_destination]
+  @Builder
+  BuildTabs(icon: Resource, title: ResourceStr, index: number) {
+    Column({ space: FundConstants.TAB_COLUMN_SPACE }) {
+      Image(icon)
+        .width($r('app.float.common_image'))
+        .height($r('app.float.common_image'))
+        .fillColor(this.currentTabIndex === index ? $r('app.color.tab_choose_image') : $r('app.color.tab_un_image'))
+      Text(title)
+        .fontSize($r('app.float.home_tab_text_size'))
+        .lineHeight($r('app.float.tab_text_height'))
+        .fontWeight(FontWeight.Regular)
+        .fontColor(this.currentTabIndex === index ? $r('app.color.tab_choose_image') : $r('app.color.tab_un_image'))
+    }
+  }
+
+  @Builder
+  BuildTabsMine(icon: Resource, unIcon: Resource, title: ResourceStr, index: number) {
+    Column({ space: FundConstants.TAB_COLUMN_SPACE }) {
+      Image(this.currentTabIndex === index ? icon : unIcon)
+        .width($r('app.float.common_image'))
+        .height($r('app.float.common_image'))
+      Text(title)
+        .fontSize($r('app.float.home_tab_text_size'))
+        .lineHeight($r('app.float.tab_text_height'))
+        .fontWeight(FontWeight.Regular)
+        .fontColor(this.currentTabIndex === index ? $r('app.color.tab_choose_image') : $r('app.color.tab_un_image'))
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/ets/view/TrendsPage.ets b/MultiFinancialManagement/features/fund/src/main/ets/view/TrendsPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4033a3585863553294560dd252e963995938171d
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/ets/view/TrendsPage.ets
@@ -0,0 +1,303 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Callback } from '@kit.BasicServicesKit';
+import { display } from '@kit.ArkUI';
+import { window } from '@kit.ArkUI';
+import { LineChart, LineChartModel } from '@ohos/mpchart';
+import { BreakpointUtil, CommonConstants, logger } from '@ohos/basic/';
+import ChartViewModel from '../viewmodel/ChartViewModel';
+import { ChartLegendComponent } from './ChartLegendComponent';
+import { FundConstants } from '../constants/FundConstants';
+
+@Component
+export struct TrendsPage {
+  @State showChart: boolean = true;
+  @State lineChartModel: LineChartModel = ChartViewModel.getLineChartModel();
+  @State tabBarIndex: number = 0;
+  @State name: string = '';
+  @State currentPoint: string = CommonConstants.BREAK_POINT_MD;
+  @StorageProp('breakPoint') breakPoint: string = CommonConstants.BREAK_POINT_MD;
+  @StorageProp('avoidArea') areaLeft: number = 0;
+  @State isLandScape: boolean = false;
+  @StorageLink('pageIndexInfos') pageIndexInfos: NavPathStack = new NavPathStack();
+  private controller: TabsController = new TabsController();
+  private callback: Callback<display.FoldDisplayMode> = (data: display.FoldDisplayMode) => {
+    if (this.isLandScape && data === display.FoldDisplayMode.FOLD_DISPLAY_MODE_FULL) {
+      window.getLastWindow(getContext(this)).then((stage: window.Window) => {
+        stage.setPreferredOrientation(window.Orientation.PORTRAIT);
+      });
+    }
+    if (data === display.FoldDisplayMode.FOLD_DISPLAY_MODE_MAIN) {
+      window.getLastWindow(getContext(this)).then((stage: window.Window) => {
+        stage.setPreferredOrientation(window.Orientation.LANDSCAPE)
+      });
+      this.isLandScape = true;
+    }
+  };
+
+  build() {
+    NavDestination() {
+      GridRow({
+        breakpoints: {
+          value: CommonConstants.BREAK_POINTS_VALUE,
+          reference: BreakpointsReference.WindowSize
+        },
+        columns: {
+          sm: CommonConstants.COLUMN_SM,
+          md: CommonConstants.COLUMN_MD,
+          lg: CommonConstants.COLUMN_LG
+        },
+        direction: GridRowDirection.Row
+      }) {
+        GridCol({
+          span: {
+            sm: CommonConstants.COLUMN_SM,
+            md: CommonConstants.COLUMN_MD,
+            lg: CommonConstants.COLUMN_LG
+          }
+        }) {
+          Row() {
+            Row() {
+              Text(this.name)
+                .fontSize($r('app.float.common_font_size'))
+                .fontColor($r('app.color.name_text'))
+                .lineHeight($r('app.float.common_line_height'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+              Text($r('app.string.funding_code'))
+                .fontSize($r('app.float.code_size'))
+                .fontColor($r('app.color.forty_percent_white'))
+                .margin({
+                  left: $r('app.float.code_margin_left')
+                })
+            }
+            .alignItems(VerticalAlign.Bottom)
+
+            Image($r('app.media.ic_public_reduce'))
+              .width($r('app.float.common_image'))
+              .height($r('app.float.common_image'))
+              .onClick(() => {
+                this.pageIndexInfos.pop();
+              })
+          }
+          .width(CommonConstants.FULL_WIDTH_PERCENT)
+          .justifyContent(FlexAlign.SpaceBetween)
+        }
+
+        GridCol({
+          span: {
+            sm: CommonConstants.COLUMN_SM,
+            md: CommonConstants.COLUMN_MD,
+            lg: CommonConstants.COLUMN_LG
+          }
+        }) {
+          Column() {
+            Row({ space: FundConstants.BOTTOM_ROW_SPACE }) {
+              Text($r('app.string.performance_trends'))
+                .fontSize($r('app.float.tab_text_size_fund'))
+                .lineHeight($r('app.float.common_line_height'))
+                .fontColor(this.tabBarIndex === 0 ? $r('app.color.harmony_blue') : Color.Black)
+                .border({
+                  width: {
+                    bottom: $r('app.float.tab_bar_border')
+                  },
+                  color: this.tabBarIndex === 0 ? $r('app.color.harmony_blue') : $r('app.color.transparent_color')
+                })
+                .padding({
+                  bottom: $r('app.float.tab_bar_padding_bottom')
+                })
+                .onClick(() => {
+                  this.tabBarIndex = 0;
+                  this.controller.changeIndex(this.tabBarIndex);
+                })
+              Text($r('app.string.unit_net_value'))
+                .fontSize($r('app.float.tab_text_size_fund'))
+                .lineHeight($r('app.float.common_line_height'))
+                .fontColor(this.tabBarIndex === 1 ? $r('app.color.harmony_blue') : Color.Black)
+                .border({
+                  width: {
+                    bottom: $r('app.float.tab_bar_border')
+                  },
+                  color: this.tabBarIndex === 1 ? $r('app.color.harmony_blue') : $r('app.color.transparent_color')
+                })
+                .padding({
+                  bottom: $r('app.float.tab_bar_padding_bottom')
+                })
+                .onClick(() => {
+                  this.tabBarIndex = 1;
+                  this.controller.changeIndex(this.tabBarIndex);
+                })
+            }
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .justifyContent(FlexAlign.Start)
+            .alignItems(VerticalAlign.Center)
+            .margin({
+              bottom: $r('app.float.tab_bar_top')
+            })
+            .height($r('app.float.title_height'))
+
+            Tabs({ controller: this.controller }) {
+              TabContent() {
+                Column() {
+                  Row() {
+                    ChartLegendComponent({
+                      name: $r('app.string.the_fund'),
+                      color: $r('app.color.fund_chart'),
+                      value: $r('app.string.the_fund_value')
+                    })
+                    ChartLegendComponent({
+                      name: $r('app.string.same_average'),
+                      color: $r('app.color.same_average_chart'),
+                      value: $r('app.string.same_average_value')
+                    })
+                    ChartLegendComponent({
+                      name: $r('app.string.other_funding'),
+                      color: $r('app.color.other_funding_chart'),
+                      value: $r('app.string.other_funding_value')
+                    })
+                  }
+                  .width(CommonConstants.FULL_WIDTH_PERCENT)
+                  .justifyContent(FlexAlign.SpaceBetween)
+                  .padding({
+                    left: new BreakpointUtil({
+                      sm: $r('app.float.legend_padding_lr'),
+                      md: $r('app.float.legend_padding_lr'),
+                      lg: $r('app.float.legend_padding_lr_lg')
+                    }).getValue(this.currentPoint),
+                    right: new BreakpointUtil({
+                      sm: $r('app.float.legend_padding_lr'),
+                      md: $r('app.float.legend_padding_lr'),
+                      lg: $r('app.float.legend_padding_lr_lg')
+                    }).getValue(this.currentPoint)
+                  })
+
+                  Row() {
+                    if (this.showChart) {
+                      LineChart({ model: this.lineChartModel })
+                    } else {
+                      LineChart({ model: this.lineChartModel })
+                    }
+                  }
+                  .width(CommonConstants.FULL_WIDTH_PERCENT)
+                  .layoutWeight(1)
+                  .onAreaChange(() => {
+                    this.lineChartModel = ChartViewModel.getLineChartModel();
+                    this.showChart = !this.showChart;
+                  })
+
+                  Row() {
+                    Button($r('app.string.near_month', 1))
+                      .fontSize($r('app.float.chart_button_size'))
+                      .fontColor($r('app.color.harmony_blue'))
+                      .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                      .backgroundColor($r('app.color.five_percent_white_fund'))
+                      .height($r('app.float.chart_button_height'))
+                      .width(new BreakpointUtil({
+                        sm: $r('app.float.near_button_width'),
+                        md: $r('app.float.near_button_width'),
+                        lg: $r('app.float.near_button_width_lg')
+                      }).getValue(this.currentPoint))
+                    Button($r('app.string.near_month', 3))
+                      .chartButtonStyle()
+                    Button($r('app.string.near_month', 6))
+                      .chartButtonStyle()
+                    Button($r('app.string.near_year', 1))
+                      .chartButtonStyle()
+                    Button($r('app.string.near_year', 3))
+                      .chartButtonStyle()
+                  }
+                  .width(CommonConstants.FULL_WIDTH_PERCENT)
+                  .justifyContent(FlexAlign.SpaceBetween)
+                  .margin({
+                    top: $r('app.float.chart_button_margin')
+                  })
+                }
+                .height(CommonConstants.FULL_HEIGHT_PERCENT)
+              }
+              .tabBar($r('app.string.performance_trends'))
+
+              TabContent() {
+
+              }
+              .tabBar($r('app.string.unit_net_value'))
+            }
+            .barMode(BarMode.Scrollable, { margin: $r('app.float.tab_bar_margin') })
+            .barHeight(0)
+            .scrollable(false)
+            .layoutWeight(1)
+            .focusable(false)
+          }
+        }
+      }
+      .width(CommonConstants.FULL_WIDTH_PERCENT)
+      .height(CommonConstants.FULL_HEIGHT_PERCENT)
+      .padding({
+        left: $r('app.float.padding_common'),
+        right: this.isLandScape ? this.areaLeft : $r('app.float.padding_common'),
+        bottom: $r('app.float.padding_common'),
+        top: this.currentPoint === CommonConstants.BREAK_POINT_LG ? $r('app.float.trends_padding_top') : 0
+      })
+      .onBreakpointChange((breakpoints: string) => {
+        this.currentPoint = breakpoints;
+      })
+    }
+    .hideTitleBar(true)
+    .onAppear(() => {
+      window.getLastWindow(getContext(this)).then((windowStage: window.Window) => {
+        windowStage.setWindowLayoutFullScreen(false);
+      })
+      if (!this.isLandScape && this.breakPoint === CommonConstants.BREAK_POINT_SM) {
+        window.getLastWindow(getContext(this)).then((stage: window.Window) => {
+          stage.setPreferredOrientation(window.Orientation.LANDSCAPE);
+          this.isLandScape = true;
+        });
+      }
+      try {
+        display.on('foldDisplayModeChange', this.callback);
+      } catch (exception) {
+        logger.error('Failed to register callback. Code: ' + JSON.stringify(exception));
+      }
+    })
+    .onWillDisappear(() => {
+      window.getLastWindow(getContext(this)).then((windowStage: window.Window) => {
+        windowStage.setWindowLayoutFullScreen(true);
+      })
+      if (this.isLandScape) {
+        window.getLastWindow(getContext(this)).then((stage: window.Window) => {
+          stage.setPreferredOrientation(window.Orientation.PORTRAIT);
+        });
+        this.isLandScape = false;
+      }
+      try {
+        display.off('foldDisplayModeChange', this.callback);
+      } catch (exception) {
+        logger.error('Failed to register callback. Code: ' + JSON.stringify(exception));
+      }
+    })
+  }
+}
+
+@Extend(Button)
+function chartButtonStyle() {
+  .fontSize($r('app.float.chart_button_size'))
+  .fontColor($r('app.color.sixty_percent_white'))
+  .fontWeight(CommonConstants.FONT_WEIGHT_500)
+  .backgroundColor(Color.White)
+  .height($r('app.float.chart_button_height'))
+  .constraintSize({
+    minWidth: $r('app.float.chart_button_min_width'),
+    maxWidth: $r('app.float.chart_button_max_width')
+  })
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/ets/viewmodel/ChartAxisFormatter.ets b/MultiFinancialManagement/features/fund/src/main/ets/viewmodel/ChartAxisFormatter.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e488755edbed65c0029605a09e46ee3fde08bd46
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/ets/viewmodel/ChartAxisFormatter.ets
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HashMap } from '@kit.ArkTS';
+import { AxisBase, IAxisValueFormatter } from '@ohos/mpchart';
+
+export class ChartAxisFormatter implements IAxisValueFormatter {
+  xAxis: HashMap<number, string> = new HashMap();
+
+  constructor(xAxis: HashMap<number, string>) {
+    this.xAxis = xAxis;
+  }
+
+  public getFormattedValue(value: number, axis: AxisBase): string {
+    let xAxis = this.xAxis.get(value);
+    if (xAxis) {
+      return xAxis;
+    }
+    return '';
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/ets/viewmodel/ChartViewModel.ets b/MultiFinancialManagement/features/fund/src/main/ets/viewmodel/ChartViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..60d22c3957a08c5e42e39735b02d4056d5c57559
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/ets/viewmodel/ChartViewModel.ets
@@ -0,0 +1,184 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HashMap } from '@kit.ArkTS';
+import { EntryOhos, ILineDataSet, JArrayList, LineChartModel, LineData, LineDataSet, XAxis, XAxisPosition,
+  YAxis, AxisDependency, YAxisLabelPosition,
+  ChartColorStop,
+  Legend,
+  Description
+} from '@ohos/mpchart';
+import { ChartAxisFormatter } from './ChartAxisFormatter';
+
+class ChartViewModel {
+  xAxis: XAxis | null = null;
+  topAxis: XAxis | null = null;
+  mWidth: number = 312;
+  mHeight: number = 200;
+  minOffset: number = 30;
+  leftAxis: YAxis | null = null;
+  rightAxis: YAxis | null = null;
+  lineData: LineData | null = null;
+  lineChartModel: LineChartModel = new LineChartModel();
+  maxValue: number = 0;
+  minValue: number = 0;
+
+  public constructor() {
+    this.lineData = this.initCurveData(45);
+  }
+
+  /**
+   * Init data.
+   *
+   * @param count  Init data count.
+   */
+  private initCurveData(count: number): LineData {
+    let values = this.initRandomValue(count);
+
+    let gradientFillColor = new JArrayList<ChartColorStop>();
+    gradientFillColor.add(['#661f69ff', 0.1])
+    gradientFillColor.add(['#00eff6ff', 1.0])
+
+    let dataSet = new JArrayList<ILineDataSet>();
+
+    let set1 = new LineDataSet(values, '本基金');
+    set1.setDrawFilled(true);
+    set1.setDrawValues(false);
+    set1.setGradientFillColor(gradientFillColor);
+    set1.setColorByColor(0x0A59F7);
+    set1.setLineWidth(1)
+    set1.setDrawCircles(false);
+    set1.setDrawHorizontalHighlightIndicator(false)
+    set1.setDrawVerticalHighlightIndicator(false)
+    dataSet.add(set1);
+
+    let average = this.initRandomValue(count);
+    let set2 = new LineDataSet(average, '同类平均');
+    set2.setDrawFilled(false);
+    set2.setDrawValues(false);
+    set2.setColorByColor(0x660A59F7);
+    set2.setLineWidth(1)
+    set2.setDrawCircles(false);
+    // set2.setShowFillLine(false)
+    dataSet.add(set2);
+
+    let other = this.initRandomValue(count);
+    let set3 = new LineDataSet(other, '沪深300');
+    set3.setDrawFilled(false);
+    set3.setDrawValues(false);
+    set3.setColorByColor(0xE84026);
+    set3.setLineWidth(1)
+    set3.setDrawCircles(false);
+    dataSet.add(set3);
+
+    return new LineData(dataSet)
+  }
+
+  /**
+   * Randomly generate data.
+   *
+   * @param count Init data count.
+   * @returns JArrayList<EntryOhos>.
+   */
+  initRandomValue(count: number): JArrayList<EntryOhos> {
+    let values = new JArrayList<EntryOhos>();
+    values.add(new EntryOhos(0, 0));
+    let temp = 0;
+    for (let i = 1; i < count; i++) {
+      let val: number = Math.random() * 0.5;
+      let calculated: number = Math.random() * 100;
+      if (calculated > 50) {
+        temp += val;
+        values.add(new EntryOhos(i, temp));
+      } else {
+        temp -= val;
+        values.add(new EntryOhos(i, temp));
+      }
+      if (this.maxValue < temp) {
+        this.maxValue = temp;
+      }
+      if (this.minValue > temp) {
+        this.minValue = temp;
+      }
+    }
+    return values;
+  }
+
+  /**
+   * Get LineChartModel.
+   *
+   * @param width
+   * @param height
+   * @returns LineChartModel
+   */
+  getLineChartModel(): LineChartModel {
+    this.lineChartModel = new LineChartModel();
+    this.xAxis = this.lineChartModel.getXAxis();
+    if (this.xAxis) {
+      this.xAxis.setLabelCount(3, true);
+      this.xAxis.setPosition(XAxisPosition.BOTTOM);
+      this.xAxis.setAxisMinimum(0);
+      this.xAxis.setAxisMaximum(44);
+      this.xAxis.setAvoidFirstLastClipping(true);
+      this.xAxis.setDrawGridLines(false)
+      let xMap: HashMap<number, string> = new HashMap();
+      xMap.set(0, '07-14');
+      xMap.set(22, '08-01');
+      xMap.set(44, '08-16');
+      this.xAxis.setValueFormatter(new ChartAxisFormatter(xMap))
+    }
+
+    this.leftAxis = this.lineChartModel.getAxisLeft();
+    if (this.leftAxis) {
+      let maxy = Math.ceil(this.maxValue);
+      let miny = Math.floor(this.minValue)
+      this.leftAxis.setLabelCount(maxy - miny + 1, false);
+      this.leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
+      this.leftAxis.setSpaceTop(15);
+      this.leftAxis.setAxisMaximum(maxy);
+      this.leftAxis.setAxisMinimum(miny);
+      this.leftAxis.setDrawGridLines(false);
+      this.leftAxis.setDrawAxisLine(true);
+      let yMap: HashMap<number, string> = new HashMap();
+      for (let i = miny; i <= maxy; i++) {
+        yMap.set(i, i + '.00%');
+      }
+      this.leftAxis.setValueFormatter(new ChartAxisFormatter(yMap))
+    }
+
+    this.rightAxis = this.lineChartModel.getAxisRight();
+    if (this.rightAxis) {
+      this.rightAxis.setDrawGridLines(false);
+      this.rightAxis.setDrawAxisLine(false);
+      this.rightAxis.setDrawLabels(false);
+    }
+
+    let legend: Legend | null = this.lineChartModel.getLegend();
+    if (legend) {
+      legend.setEnabled(false);
+    }
+    let description: Description | null = this.lineChartModel.getDescription();
+    if (description) {
+      description.setEnabled(false);
+    }
+
+    this.lineChartModel.setMinOffset(2);
+    this.lineChartModel.setHighlightPerLongPressEnabled(false);
+    this.lineChartModel.setData(this.lineData);
+    return this.lineChartModel;
+  }
+}
+
+export default new ChartViewModel();
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/ets/viewmodel/FundingViewModel.ets b/MultiFinancialManagement/features/fund/src/main/ets/viewmodel/FundingViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a36648e9a939543671322d69ba5e20c326034b31
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/ets/viewmodel/FundingViewModel.ets
@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BusinessInfo, FundDetail } from '@ohos/basic';
+
+/**
+ * Get fund data.
+ */
+class FundingViewModel {
+  getFundingButtonBusiness(start: number, end?: number): BusinessInfo[] {
+    let fundingBusinessInfoList: BusinessInfo[] = [
+      new BusinessInfo($r('app.media.ic_ranking'), $r('app.string.funding_ranking')),
+      new BusinessInfo($r('app.media.ic_index_zone'), $r('app.string.funding_index_zone')),
+      new BusinessInfo($r('app.media.ic_fixed_investment'), $r('app.string.fixed_investment')),
+      new BusinessInfo($r('app.media.ic_public_Investment_star'), $r('app.string.investment_star_selection')),
+      new BusinessInfo($r('app.media.ic_good_chance'), $r('app.string.funding_good_chance')),
+      new BusinessInfo($r('app.media.ic_folder_add'), $r('app.string.funding_folder_add')),
+      new BusinessInfo($r('app.media.ic_folder_add'), $r('app.string.funding_folder_add')),
+      new BusinessInfo($r('app.media.ic_folder_add'), $r('app.string.funding_folder_add'))
+    ];
+    return fundingBusinessInfoList.slice(start, end);
+  }
+
+  getAllFundInfo(start?: number, end?: number): FundDetail[] {
+    let fundInfoList: FundDetail[] = [
+      new FundDetail($r('app.string.funding_short_term_B'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_industrial'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_mixed_currency'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_bonds'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_short_term_B'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_short_term_B'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_short_term_B'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_short_term_B'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_short_term_B'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_short_term_B'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_short_term_B'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_short_term_B'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_short_term_B'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_short_term_B'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_short_term_B'), $r('app.string.funding_amplitude')),
+      new FundDetail($r('app.string.funding_short_term_B'), $r('app.string.funding_amplitude'))
+    ];
+    return fundInfoList.slice(start, end);
+  }
+}
+
+export default new FundingViewModel();
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/module.json5 b/MultiFinancialManagement/features/fund/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..c023333804df678c4d8c5252057fa20b638818a3
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/module.json5
@@ -0,0 +1,12 @@
+{
+  "module": {
+    "name": "fund",
+    "type": "har",
+    "description": "$string:shared_desc",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/element/color.json b/MultiFinancialManagement/features/fund/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..38c6f302bc9a1b37b819666e4e4babf1a9ddc78a
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/element/color.json
@@ -0,0 +1,128 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "five_percent_black",
+      "value": "#0dffffff"
+    },
+    {
+      "name": "five_percent_white_fund",
+      "value": "#0d000000"
+    },
+    {
+      "name": "sixty_percent_black",
+      "value": "#99ffffff"
+    },
+    {
+      "name": "sixty_percent_white",
+      "value": "#99000000"
+    },
+    {
+      "name": "forty_percent_white",
+      "value": "#66000000"
+    },
+    {
+      "name": "ten_percent_white",
+      "value": "#1a000000"
+    },
+    {
+      "name": "harmony_blue",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "name_text",
+      "value": "#182431"
+    },
+    {
+      "name": "currency_font",
+      "value": "#1F69FF"
+    },
+    {
+      "name": "currency_border",
+      "value": "#1F69FF"
+    },
+    {
+      "name": "amplitude_text",
+      "value": "#E84026"
+    },
+    {
+      "name": "amplitude_date",
+      "value": "#28AD2B"
+    },
+    {
+      "name": "fund_chart",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "same_average_chart",
+      "value": "#660a59f7"
+    },
+    {
+      "name": "other_funding_chart",
+      "value": "#E84026"
+    },
+    {
+      "name": "bottom_button",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "common_background",
+      "value": "#F7F7F7"
+    },
+    {
+      "name": "name_build_text",
+      "value": "#cc000000"
+    },
+    {
+      "name": "value_build_text",
+      "value": "#28AD2B"
+    },
+    {
+      "name": "pursue_text",
+      "value": "#182431"
+    },
+    {
+      "name": "steady_font",
+      "value": "#182431"
+    },
+    {
+      "name": "amplitude_text_font",
+      "value": "#E84026"
+    },
+    {
+      "name": "list_background",
+      "value": "#0d1f69ff"
+    },
+    {
+      "name": "transparent_color",
+      "value": "#00000000"
+    },
+    {
+      "name": "gradient_left",
+      "value": "#0954EA"
+    },
+    {
+      "name": "gradient_center",
+      "value": "#6193F6"
+    },
+    {
+      "name": "gradient_right",
+      "value": "#88AFFC"
+    },
+    {
+      "name": "tab_choose_image",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "tab_un_image",
+      "value": "#33000000"
+    },
+    {
+      "name": "home_background",
+      "value": "#F1F3F5"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/element/float.json b/MultiFinancialManagement/features/fund/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..bbc471cee206bf6a96993754ff8948a2f4271715
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/element/float.json
@@ -0,0 +1,420 @@
+{
+  "float": [
+    {
+      "name": "nav_bar_width",
+      "value": "474vp"
+    },
+    {
+      "name": "common_image",
+      "value": "24vp"
+    },
+    {
+      "name": "padding_common",
+      "value": "24vp"
+    },
+    {
+      "name": "common_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "common_line_height",
+      "value": "22vp"
+    },
+    {
+      "name": "common_font_size",
+      "value": "16fp"
+    },
+    {
+      "name": "common_divider",
+      "value": "1vp"
+    },
+    {
+      "name": "title_text_size",
+      "value": "18fp"
+    },
+    {
+      "name": "title_height",
+      "value": "56vp"
+    },
+    {
+      "name": "code_size",
+      "value": "12fp"
+    },
+    {
+      "name": "currency_size",
+      "value": "10fp"
+    },
+    {
+      "name": "currency_border_radius",
+      "value": "4vp"
+    },
+    {
+      "name": "currency_padding_tb",
+      "value": "1vp"
+    },
+    {
+      "name": "currency_padding_lr",
+      "value": "4vp"
+    },
+    {
+      "name": "type_margin_top",
+      "value": "13vp"
+    },
+    {
+      "name": "type_margin_bottom",
+      "value": "24vp"
+    },
+    {
+      "name": "amplitude_size",
+      "value": "24fp"
+    },
+    {
+      "name": "amplitude_time_size",
+      "value": "12fp"
+    },
+    {
+      "name": "amplitude_date_size",
+      "value": "18fp"
+    },
+    {
+      "name": "value_size",
+      "value": "12fp"
+    },
+    {
+      "name": "last_net_margin_left",
+      "value": "16vp"
+    },
+    {
+      "name": "last_net_margin_tb",
+      "value": "16vp"
+    },
+    {
+      "name": "rating_margin_right",
+      "value": "18vp"
+    },
+    {
+      "name": "rating_height",
+      "value": "12vp"
+    },
+    {
+      "name": "scroll_column_padding_right",
+      "value": "56vp"
+    },
+    {
+      "name": "scroll_column_padding_top",
+      "value": "13vp"
+    },
+    {
+      "name": "scroll_column_padding_bottom",
+      "value": "16vp"
+    },
+    {
+      "name": "scroll_column_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "chart_button_size",
+      "value": "12fp"
+    },
+    {
+      "name": "chart_button_height",
+      "value": "28vp"
+    },
+    {
+      "name": "chart_button_min_width",
+      "value": "64vp"
+    },
+    {
+      "name": "chart_button_max_width",
+      "value": "150vp"
+    },
+    {
+      "name": "chart_button_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "tab_bar_margin",
+      "value": "0vp"
+    },
+    {
+      "name": "image_enlarge_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "chart_height",
+      "value": "359vp"
+    },
+    {
+      "name": "contrasts_size",
+      "value": "12fp"
+    },
+    {
+      "name": "bottom_button_width",
+      "value": "84vp"
+    },
+    {
+      "name": "bottom_button_height",
+      "value": "40vp"
+    },
+    {
+      "name": "bottom_padding_tb",
+      "value": "14vp"
+    },
+    {
+      "name": "text_name_size",
+      "value": "12fp"
+    },
+    {
+      "name": "build_divider_width",
+      "value": "16vp"
+    },
+    {
+      "name": "build_divider_height",
+      "value": "2vp"
+    },
+    {
+      "name": "build_divider_radius",
+      "value": "1vp"
+    },
+    {
+      "name": "build_divider_margin_left",
+      "value": "8vp"
+    },
+    {
+      "name": "value_build_text_size",
+      "value": "14fp"
+    },
+    {
+      "name": "title_padding_tb",
+      "value": "8vp"
+    },
+    {
+      "name": "pursue_margin_left",
+      "value": "12vp"
+    },
+    {
+      "name": "bottom_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "bottom_margin_top",
+      "value": "12vp"
+    },
+    {
+      "name": "scroll_margin_top",
+      "value": "16vp"
+    },
+    {
+      "name": "steady_margin_left",
+      "value": "12vp"
+    },
+    {
+      "name": "amplitude_text_size",
+      "value": "24fp"
+    },
+    {
+      "name": "year_text_size",
+      "value": "12fp"
+    },
+    {
+      "name": "list_item_height",
+      "value": "99vp"
+    },
+    {
+      "name": "list_item_width",
+      "value": "140vp"
+    },
+    {
+      "name": "list_space_sm",
+      "value": "12vp"
+    },
+    {
+      "name": "list_space",
+      "value": "16vp"
+    },
+    {
+      "name": "list_margin_bottom",
+      "value": "16vp"
+    },
+    {
+      "name": "list_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "button_text_size",
+      "value": "12fp"
+    },
+    {
+      "name": "button_text_margin_top",
+      "value": "5vp"
+    },
+    {
+      "name": "swiper_height",
+      "value": "44vp"
+    },
+    {
+      "name": "column_swiper_width",
+      "value": "48vp"
+    },
+    {
+      "name": "swiper_build_height_lg",
+      "value": "60vp"
+    },
+    {
+      "name": "swiper_build_height",
+      "value": "84vp"
+    },
+    {
+      "name": "swiper_build_margin_top",
+      "value": "25vp"
+    },
+    {
+      "name": "my_fund_size",
+      "value": "18fp"
+    },
+    {
+      "name": "concern_margin_right",
+      "value": "8vp"
+    },
+    {
+      "name": "arrow_width",
+      "value": "12vp"
+    },
+    {
+      "name": "amount_text_size",
+      "value": "36fp"
+    },
+    {
+      "name": "amount_margin_top",
+      "value": "16vp"
+    },
+    {
+      "name": "news_text_size",
+      "value": "18fp"
+    },
+    {
+      "name": "sixty_margin_left",
+      "value": "12vp"
+    },
+    {
+      "name": "funding_info_height",
+      "value": "168vp"
+    },
+    {
+      "name": "info_radius",
+      "value": "16vp"
+    },
+    {
+      "name": "info_padding_left",
+      "value": "16vp"
+    },
+    {
+      "name": "info_padding_bottom",
+      "value": "16vp"
+    },
+    {
+      "name": "info_padding_right_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "info_padding_right_md",
+      "value": "28vp"
+    },
+    {
+      "name": "info_padding_right_lg",
+      "value": "28vp"
+    },
+    {
+      "name": "code_margin_left",
+      "value": "10vp"
+    },
+    {
+      "name": "tab_text_size_fund",
+      "value": "16fp"
+    },
+    {
+      "name": "tab_bar_padding_bottom",
+      "value": "5vp"
+    },
+    {
+      "name": "tab_bar_border",
+      "value": "2vp"
+    },
+    {
+      "name": "tab_bar_top",
+      "value": "16vp"
+    },
+    {
+      "name": "search_width",
+      "value": "232vp"
+    },
+    {
+      "name": "search_width_sm",
+      "value": "248vp"
+    },
+    {
+      "name": "ic_background_image_width",
+      "value": "136vp"
+    },
+    {
+      "name": "ic_background_image_height",
+      "value": "126vp"
+    },
+    {
+      "name": "ic_background_position_lg",
+      "value": "50vp"
+    },
+    {
+      "name": "ic_background_position",
+      "value": "100vp"
+    },
+    {
+      "name": "tab_text_height",
+      "value": "14vp"
+    },
+    {
+      "name": "tab_bar_width",
+      "value": "96vp"
+    },
+    {
+      "name": "bottom_button_width_md",
+      "value": "234vp"
+    },
+    {
+      "name": "margin_text_left",
+      "value": "16vp"
+    },
+    {
+      "name": "near_button_width",
+      "value": "108vp"
+    },
+    {
+      "name": "near_button_width_lg",
+      "value": "156vp"
+    },
+    {
+      "name": "legend_padding_lr",
+      "value": "96vp"
+    },
+    {
+      "name": "legend_padding_lr_lg",
+      "value": "372vp"
+    },
+    {
+      "name": "tab_bar_height",
+      "value": "56vp"
+    },
+    {
+      "name": "trends_padding_top",
+      "value": "10vp"
+    },
+    {
+      "name": "profit_tab_height",
+      "value": "100vp"
+    },
+    {
+      "name": "home_tab_text_size",
+      "value": "10vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/element/string.json b/MultiFinancialManagement/features/fund/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..ea9a0c4e1cf098d98f40d4e4abc8e1c26a2b47e8
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/element/string.json
@@ -0,0 +1,220 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "the_fund_value",
+      "value": "-2.01%"
+    },
+    {
+      "name": "same_average_value",
+      "value": "-1.02%"
+    },
+    {
+      "name": "other_funding_value",
+      "value": "-0.67%"
+    },
+    {
+      "name": "my_funding",
+      "value": "我的基金 （元）"
+    },
+    {
+      "name": "my_concern",
+      "value": "我的关注"
+    },
+    {
+      "name": "my_amount",
+      "value": "******"
+    },
+    {
+      "name": "funding_news",
+      "value": "快来看看大家最近都在购买的基金"
+    },
+    {
+      "name": "funding_ranking",
+      "value": "排行榜"
+    },
+    {
+      "name": "funding_index_zone",
+      "value": "指数专区"
+    },
+    {
+      "name": "fixed_investment",
+      "value": "定投专区"
+    },
+    {
+      "name": "investment_star_selection",
+      "value": "投资星选"
+    },
+    {
+      "name": "funding_good_chance",
+      "value": "好机会"
+    },
+    {
+      "name": "funding_folder_add",
+      "value": "自建组合"
+    },
+    {
+      "name": "steady_growth",
+      "value": "稳健增长"
+    },
+    {
+      "name": "funding_short_term_B",
+      "value": "XXX短债基金B"
+    },
+    {
+      "name": "funding_amplitude",
+      "value": "+7.89%"
+    },
+    {
+      "name": "funding_industrial",
+      "value": "XXX产业基金C"
+    },
+    {
+      "name": "funding_mixed_currency",
+      "value": "XXX混合货币"
+    },
+    {
+      "name": "funding_bonds",
+      "value": "XXX债券A"
+    },
+    {
+      "name": "one_year_amplitude",
+      "value": "近一年涨跌幅"
+    },
+    {
+      "name": "funding_title",
+      "value": "基金详情"
+    },
+    {
+      "name": "funding_code",
+      "value": "000000"
+    },
+    {
+      "name": "currency_type",
+      "value": "货币型"
+    },
+    {
+      "name": "medium_risk",
+      "value": "R3-中风险"
+    },
+    {
+      "name": "purchase_rmb",
+      "value": "1.00元起购"
+    },
+    {
+      "name": "one_day_amplitude_data",
+      "value": "-0.25%"
+    },
+    {
+      "name": "one_day_amplitude",
+      "value": "日涨跌幅"
+    },
+    {
+      "name": "last_net_value_data",
+      "value": "1.257"
+    },
+    {
+      "name": "last_net_value",
+      "value": "最新净值"
+    },
+    {
+      "name": "last_net_not_show",
+      "value": "--"
+    },
+    {
+      "name": "three_year_rating",
+      "value": "三年评级"
+    },
+    {
+      "name": "the_fund",
+      "value": "本基金"
+    },
+    {
+      "name": "same_average",
+      "value": "同类平均"
+    },
+    {
+      "name": "other_funding",
+      "value": "沪深300"
+    },
+    {
+      "name": "funding_contrasts",
+      "value": "对比"
+    },
+    {
+      "name": "funding_concerned",
+      "value": "关注"
+    },
+    {
+      "name": "fixed_investment_button",
+      "value": "定投"
+    },
+    {
+      "name": "buying_button",
+      "value": "购买"
+    },
+    {
+      "name": "performance_trends",
+      "value": "业绩走势"
+    },
+    {
+      "name": "unit_net_value",
+      "value": "单位净值"
+    },
+    {
+      "name": "near_month",
+      "value": "near %d month"
+    },
+    {
+      "name": "near_year",
+      "value": "near %d year"
+    },
+    {
+      "name": "search_placeholder",
+      "value": "search..."
+    },
+    {
+      "name": "pursue_profit",
+      "value": "pursue profit"
+    },
+    {
+      "name": "common_stock",
+      "value": "common stock"
+    },
+    {
+      "name": "partial_stock_mix",
+      "value": "partial stock mix"
+    },
+    {
+      "name": "flexible_configuration",
+      "value": "flexible configuration"
+    },
+    {
+      "name": "index_funds",
+      "value": "index funds"
+    },
+    {
+      "name": "tab_bar_home",
+      "value": "home"
+    },
+    {
+      "name": "tab_bar_card",
+      "value": "card"
+    },
+    {
+      "name": "tab_bar_fortunes",
+      "value": "fortunes"
+    },
+    {
+      "name": "tab_bar_life",
+      "value": "life"
+    },
+    {
+      "name": "tab_bar_mine",
+      "value": "mine"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_fixed_investment.png b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_fixed_investment.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d4b97d84d32b69425684a7216b75bb6463f2e76
Binary files /dev/null and b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_fixed_investment.png differ
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_folder_add.png b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_folder_add.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb6631536aad96c1bc356a15f5527f522cec568c
Binary files /dev/null and b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_folder_add.png differ
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_fund_background.png b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_fund_background.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0c6211e815e9faa74b143efd85dc194e0497152
Binary files /dev/null and b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_fund_background.png differ
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_good_chance.png b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_good_chance.png
new file mode 100644
index 0000000000000000000000000000000000000000..b76083f94d88205486337d68e853c6a4f960b781
Binary files /dev/null and b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_good_chance.png differ
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_home_fortunes.svg b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_home_fortunes.svg
new file mode 100644
index 0000000000000000000000000000000000000000..27236e9117514e1e9fff77ba9278728504735003
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_home_fortunes.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>财富</title>
+    <g id="典型页面-1：首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="财富" fill="#0A59F7" fill-rule="nonzero">
+            <g id="编组">
+                <path d="M10.9998956,0 C17.0652783,0 21.9997613,4.93454264 21.9997613,10.9999552 C21.9997613,17.0652783 17.0652485,21.9997911 10.9998956,21.9997911 C4.93451279,21.9997911 0,17.0652783 0,10.9999254 C0,4.93451279 4.93451279,0 10.9998956,0 Z M11.8005368,4.52646382 L10.170937,4.52646382 L10.170937,6.22367889 L9.97204717,6.26056577 C8.54361938,6.55920023 7.7773915,7.47677479 7.67681056,9.01759824 C7.59615564,10.5673488 8.69050265,11.541892 10.9548088,11.9386618 C11.9879559,12.0976442 12.5045593,12.4357803 12.5045593,12.9523837 C12.5045593,13.6677449 12.0075601,14.0246498 11.0143675,14.0246498 C10.1400536,14.0646043 9.56392136,13.4884421 9.28473701,12.295792 C9.18067743,11.8751401 8.80070861,11.5632791 8.34790073,11.5632791 C7.8149272,11.5632791 7.38286678,11.9953395 7.38286678,12.5283131 C7.38286678,12.654827 7.40721178,12.7756548 7.45147265,12.8863674 L7.45147265,12.8863674 L7.43726272,12.83255 C7.90173731,14.525707 8.8167218,15.4871807 10.1701314,15.7381271 L10.1701314,15.7381271 L10.1701314,17.4435181 L11.7997013,17.4435181 L11.7997013,15.7430207 L12.0142139,15.7073379 C13.6252925,15.406925 14.4654309,14.4890609 14.5326595,12.9523538 C14.5326595,11.4025735 13.4799081,10.4280302 11.3727643,10.0312605 C10.1408593,9.79242874 9.564727,9.43483763 9.64454644,8.9580992 C9.68372511,8.40166067 10.1220905,8.10419524 10.9556144,8.06352461 C11.6504625,8.06352461 12.1200078,8.47692202 12.3635535,9.30216087 C12.4593362,9.75741985 12.8632555,10.0992037 13.3470027,10.0992037 C13.9020426,10.0992037 14.3519914,9.64925495 14.3519914,9.09421502 C14.3519914,8.96334569 14.326977,8.83831879 14.2814686,8.72365476 L14.2814686,8.72365476 L14.2946633,8.77885604 C13.9687612,7.38388067 13.1319849,6.55444472 11.8005368,6.27168992 L11.8005368,6.27168992 L11.8005368,4.52646382 Z" id="形状结合"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_home_mine.svg b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_home_mine.svg
new file mode 100644
index 0000000000000000000000000000000000000000..62a5b62bce8cbec51c56c1db00f7317e4e9a52be
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_home_mine.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>我的</title>
+    <g id="典型页面-1：首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的" transform="translate(0.800033, 0.500000)">
+            <g id="编组" transform="translate(0.000000, 0.000000)">
+                <path d="M10.6732784,0.00140414107 L10.4999672,8.95283847e-13 C4.76563276,8.95283847e-13 0.0942098729,4.60067747 0.00137132636,10.3266888 L1.98951966e-13,10.4918989 C1.98951966e-13,16.2343344 4.60064466,20.9057573 10.326656,20.9985959 L10.4918661,20.9999672 C16.2343016,20.9999672 20.9057245,16.3993225 20.998563,10.6733112 L20.9999344,10.5081011 C20.9999344,4.76566558 16.3992897,0.0942426876 10.6732784,0.00140414107 Z" id="形状结合" fill="#0A59F7"></path>
+                <path d="M10.4999672,11.3900553 C13.5199031,11.3900553 16.0478545,13.4964918 16.6947103,16.3202539 C15.1438117,17.970056 12.942184,19 10.5,19 C8.05781599,19 5.8561883,17.970056 4.30578106,16.320832 C4.95207989,13.4964918 7.48003124,11.3900553 10.4999672,11.3900553 Z M10.4999672,4.80882353 C12.1568214,4.80882353 13.4999672,6.15196928 13.4999672,7.80882353 C13.4999672,9.46567778 12.1568214,10.8088235 10.4999672,10.8088235 C8.84311294,10.8088235 7.49996719,9.46567778 7.49996719,7.80882353 C7.49996719,6.15196928 8.84311294,4.80882353 10.4999672,4.80882353 Z" id="形状结合" fill-opacity="0.8" fill="#FFFFFF" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_home_mine_filled.svg b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_home_mine_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dbeec6ef94878c69058ce80156916747920a5102
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_home_mine_filled.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>我的</title>
+    <g id="典型页面-1：首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的" transform="translate(0.800033, 0.500000)" fill="#000000" fill-rule="nonzero">
+            <g id="编组" transform="translate(0.000000, 0.000000)">
+                <path d="M10.6732784,0.00140414107 L10.4999672,8.95283847e-13 C4.76563276,8.95283847e-13 0.0942098729,4.60067747 0.00137132636,10.3266888 L1.98951966e-13,10.4918989 C1.98951966e-13,16.2343344 4.60064466,20.9057573 10.326656,20.9985959 L10.4918661,20.9999672 C16.2343016,20.9999672 20.9057245,16.3993225 20.998563,10.6733112 L20.9999344,10.5081011 C20.9999344,4.76566558 16.3992897,0.0942426876 10.6732784,0.00140414107 Z" id="形状结合" fill-opacity="0.2"></path>
+                <path d="M10.4999672,11.3900553 C13.5199031,11.3900553 16.0478545,13.4964918 16.6947103,16.3202539 C15.1438117,17.970056 12.942184,19 10.5,19 C8.05781599,19 5.8561883,17.970056 4.30578106,16.320832 C4.95207989,13.4964918 7.48003124,11.3900553 10.4999672,11.3900553 Z M10.4999672,4.80882353 C12.1568214,4.80882353 13.4999672,6.15196928 13.4999672,7.80882353 C13.4999672,9.46567778 12.1568214,10.8088235 10.4999672,10.8088235 C8.84311294,10.8088235 7.49996719,9.46567778 7.49996719,7.80882353 C7.49996719,6.15196928 8.84311294,4.80882353 10.4999672,4.80882353 Z" id="形状结合" fill-opacity="0.25"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_index_zone.png b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_index_zone.png
new file mode 100644
index 0000000000000000000000000000000000000000..35ff8f5135015abe72e31f6f7e2d34388fcf8786
Binary files /dev/null and b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_index_zone.png differ
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_life_filled.svg b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_life_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b1aba5b5eb63534290b53c06fe7815720796b052
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_life_filled.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="21px" height="20px" viewBox="0 0 21 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>生活</title>
+    <defs>
+        <path d="M16,0 C18.209139,-4.05812251e-16 20,1.790861 20,4 L20,16 C20,18.209139 18.209139,20 16,20 L4,20 C1.790861,20 2.705415e-16,18.209139 0,16 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 L16,0 Z M14.5,4 C14.0857864,4 13.75,4.33578644 13.75,4.75 C13.75,6.82106781 12.0710678,8.5 10,8.5 C7.92893219,8.5 6.25,6.82106781 6.25,4.75 C6.25,4.33578644 5.91421356,4 5.5,4 C5.08578644,4 4.75,4.33578644 4.75,4.75 C4.75,7.64949494 7.10050506,10 10,10 C12.8994949,10 15.25,7.64949494 15.25,4.75 C15.25,4.33578644 14.9142136,4 14.5,4 Z" id="path-1"></path>
+    </defs>
+    <g id="典型页面-1：首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="生活" transform="translate(0.700000, 0.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="形状结合"></g>
+            <g id="编组" mask="url(#mask-2)">
+                <g transform="translate(-2.000000, -2.000000)" id="Symbol/color-light/colorPrimary">
+                    <rect id="color/#000000" fill="#0A59F7" x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_Investment_star.png b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_Investment_star.png
new file mode 100644
index 0000000000000000000000000000000000000000..30ef8aee0887446278666db3879656e1a290fe70
Binary files /dev/null and b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_Investment_star.png differ
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_arrow_right.svg b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_arrow_right.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0cc0f2ad4fd08ee0b7340c787910fd3723a36b7d
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_arrow_right.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="24px" viewBox="0 0 12 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_arrow_right</title>
+    <defs>
+        <path d="M4.2482689,5.78255501 L4.28033009,5.81281566 L9.23007755,10.7625631 C9.8992572,11.4317428 9.91319844,12.5080354 9.27190128,13.1941781 L9.23007755,13.2374369 L4.28033009,18.1871843 C4.15145707,18.3160574 3.98735263,18.3882262 3.81902041,18.403691 L3.7730301,18.4065028 L3.7269699,18.4065028 C3.54277571,18.4008792 3.36025866,18.3277731 3.21966991,18.1871843 C2.93723717,17.9047516 2.92715028,17.4531048 3.18940926,17.1585854 L3.21966991,17.1265242 L7.81586399,12.5303301 C8.09829674,12.2478973 8.10838362,11.7962506 7.84612464,11.5017311 L7.81586399,11.4696699 L3.21966991,6.87347584 C2.9267767,6.58058262 2.9267767,6.10570888 3.21966991,5.81281566 C3.36088629,5.67159929 3.54440617,5.59846938 3.72943689,5.59342594 L3.77570243,5.59358355 C3.94528507,5.59936249 4.11328081,5.66235298 4.2482689,5.78255501 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_arrow_right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="路径" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="Symbol/color-light/colorPrimary">
+                <rect id="color/#000000" x="0" y="0" width="12" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_back.svg b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_back.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5d8827cf7050dbb91a3f2fc6dae78538909975e8
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_back.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_back</title>
+    <defs>
+        <path d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_back" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_cards_filled.svg b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_cards_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..965b18a454a95133c73c7a3b9b917e538c1a217c
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_cards_filled.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="23px" height="18px" viewBox="0 0 23 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>信用卡</title>
+    <defs>
+        <path d="M22,6 L22,14 C22,16.209139 20.209139,18 18,18 L4,18 C1.790861,18 2.705415e-16,16.209139 0,14 L0,6 L22,6 Z M9.25,8 L2.75,8 C2.33578644,8 2,8.33578644 2,8.75 C2,9.16421356 2.33578644,9.5 2.75,9.5 L2.75,9.5 L9.25,9.5 C9.66421356,9.5 10,9.16421356 10,8.75 C10,8.33578644 9.66421356,8 9.25,8 L9.25,8 Z M4,0 L18,0 C20.1421954,-3.9351491e-16 21.8910789,1.68396847 21.9951047,3.80035966 L22,4 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="path-1"></path>
+    </defs>
+    <g id="典型页面-1：首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="信用卡" transform="translate(0.700000, 0.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="Combined-Shape"></g>
+            <g id="编组" mask="url(#mask-2)">
+                <g transform="translate(-1.000000, -3.000000)" id="Symbol/color-light/colorPrimary">
+                    <rect id="color/#000000" fill="#0A59F7" x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_collect_fund.png b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_collect_fund.png
new file mode 100644
index 0000000000000000000000000000000000000000..10c63939486ee40e44c4a2b2a47adc2f7d221f17
Binary files /dev/null and b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_collect_fund.png differ
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_comments.svg b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_comments.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0211e560e1825ca9b607e21470d5ca8e309acd0e
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_comments.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_comments</title>
+    <defs>
+        <path d="M15.5,3 C19.6421356,3 23,6.35786438 23,10.5 C23,14.6007143 19.7089571,17.9327643 15.6240262,17.9989952 L15.5,18 L13.8105,18 L10.0303301,21.7803301 C9.7491526,22.0615076 9.30026186,22.0727547 9.00566731,21.8140714 L8.96966991,21.7803301 C8.68849242,21.4991526 8.67724532,21.0502619 8.93592862,20.7556673 L8.96966991,20.7196699 L12.9696699,16.7196699 C13.0986012,16.5907387 13.2696414,16.5135976 13.4504659,16.5016361 L13.5,16.5 L15.5,16.5 C18.8137085,16.5 21.5,13.8137085 21.5,10.5 C21.5,7.21942859 18.8671657,4.55378857 15.599221,4.50080383 L8.5,4.5 C5.1862915,4.5 2.5,7.1862915 2.5,10.5 C2.5,13.7805714 5.1328343,16.4462114 8.40077903,16.4991962 L8.5,16.5 L9.25,16.5 C9.66421356,16.5 10,16.8357864 10,17.25 C10,17.6494202 9.68777001,17.9759152 9.2940682,17.9987268 L9.25,18 L8.5,18 C4.35786438,18 1,14.6421356 1,10.5 C1,6.39928573 4.29104288,3.06723571 8.37597379,3.00100479 L8.5,3 L15.5,3 Z M7,9.25 C7.69035594,9.25 8.25,9.80964406 8.25,10.5 C8.25,11.1903559 7.69035594,11.75 7,11.75 C6.30964406,11.75 5.75,11.1903559 5.75,10.5 C5.75,9.80964406 6.30964406,9.25 7,9.25 Z M12,9.25 C12.6903559,9.25 13.25,9.80964406 13.25,10.5 C13.25,11.1903559 12.6903559,11.75 12,11.75 C11.3096441,11.75 10.75,11.1903559 10.75,10.5 C10.75,9.80964406 11.3096441,9.25 12,9.25 Z M17,9.25 C17.6903559,9.25 18.25,9.80964406 18.25,10.5 C18.25,11.1903559 17.6903559,11.75 17,11.75 C16.3096441,11.75 15.75,11.1903559 15.75,10.5 C15.75,9.80964406 16.3096441,9.25 17,9.25 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_comments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_copy_fund.png b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_copy_fund.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f854dc969dcd1cdd6b14351161ca3ffd85d0a69
Binary files /dev/null and b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_copy_fund.png differ
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_enlarge.svg b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_enlarge.svg
new file mode 100644
index 0000000000000000000000000000000000000000..252b8fe5c6424f8d5f2eefaee0f4e410e771235e
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_enlarge.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_enlarge</title>
+    <defs>
+        <path d="M3.28033009,3.28033009 C3.5732233,2.98743687 4.04809704,2.98743687 4.34099026,3.28033009 L10.3513979,9.29073773 C10.6442911,9.58363094 10.6442911,10.0585047 10.3513979,10.3513979 C10.0585047,10.6442911 9.58363094,10.6442911 9.29073773,10.3513979 L3.28033009,4.34099026 C2.98743687,4.04809704 2.98743687,3.5732233 3.28033009,3.28033009 Z M14.5983496,13.5376894 L20.25,19.189 L20.2512732,14.4559318 C20.2740848,14.06223 20.6005798,13.75 21,13.75 C21.159058,13.75 21.3065515,13.7995137 21.4279079,13.8839687 L21.5137968,13.9536337 L21.5463663,13.9862032 L21.5768981,14.0207115 C21.663373,14.1246827 21.7222733,14.2524021 21.7423744,14.392645 L21.75,14.5 L21.75,20 L21.7489852,20.0601624 C21.7189436,20.949402 21.0254639,21.6704075 20.1478855,21.7438396 L20,21.75 L14.5,21.75 L14.4559318,21.7487268 C14.3115745,21.7403626 14.1781706,21.6911698 14.0670956,21.6125239 L13.9881539,21.5481949 L13.9553277,21.5155916 C13.8280575,21.3811889 13.75,21.1997101 13.75,21 C13.75,20.6203042 14.0321539,20.306509 14.3982294,20.2568466 L14.5,20.25 L19.189,20.25 L13.5376894,14.5983496 C13.2447962,14.3054564 13.2447962,13.8305826 13.5376894,13.5376894 C13.8305826,13.2447962 14.3054564,13.2447962 14.5983496,13.5376894 Z M4.25,2.5 L9.7940682,2.50127317 C9.93842553,2.50963743 10.0718294,2.55883023 10.1829044,2.63747605 L10.2618461,2.70180512 L10.2946723,2.73440836 C10.4219425,2.86881108 10.5,3.05028989 10.5,3.25 C10.5,3.62969577 10.2178461,3.94349096 9.85177056,3.99315338 L9.75,4 L4.7059318,4.00127317 C4.34503848,4.02218381 4.05260411,4.29827286 4.00637125,4.65179776 L4,4.75 L4,9.75 L3.99872683,9.7940682 C3.97591522,10.18777 3.64942022,10.5 3.25,10.5 C3.09094199,10.5 2.94344853,10.4504863 2.82209211,10.3660313 L2.73620318,10.2963663 L2.7036337,10.2637968 L2.67310187,10.2292885 C2.58662698,10.1253173 2.52772672,9.9975979 2.50762561,9.85735498 L2.5,9.75 L2.50101475,4.18983756 C2.53105635,3.30059804 3.22453611,2.57959249 4.10211451,2.50616043 L4.25,2.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_enlarge" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_home_filled.svg b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_home_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..deb4371a0ec1c00f635cb10894fb3eefcf8a672f
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_home_filled.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="23px" height="22px" viewBox="0 0 23 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>首页</title>
+    <defs>
+        <path d="M11.3049515,3.1660135 L11.4029771,3.24242054 L11.4383705,3.27479678 L19.7500539,11.1988369 L19.7500539,17.8648386 C19.7500539,19.4625195 18.5011339,20.7684995 16.9263266,20.8597459 L16.7500539,20.8648386 L4.75005386,20.8648386 C3.15237298,20.8648386 1.84639298,19.6159187 1.75514656,18.0411114 L1.75005386,17.8648386 L1.75005386,11.1988369 L10.0618496,3.27479678 C10.4076544,2.94672556 10.9310356,2.91207618 11.3049515,3.1660135 Z M10.7500539,12.1148386 C9.15237298,12.1148386 7.84639298,13.3637586 7.75514656,14.9385658 L7.75005386,15.1148386 L7.75005386,18.8648386 L13.7500539,18.8648386 L13.7500539,15.1148386 C13.7500539,13.4579844 12.4069081,12.1148386 10.7500539,12.1148386 Z M8.14899189,0.961019894 C9.69547868,-0.364524787 12.0094898,-0.31881635 13.5030439,1.09814521 L13.5030439,1.09814521 L21.1882626,8.38925013 L21.2682366,8.47439656 C21.5892803,8.85860159 21.5784305,9.43093048 21.2254659,9.80297426 C20.8453501,10.2036368 20.2124043,10.2202933 19.8117417,9.84017753 L19.8117417,9.84017753 L12.126523,2.5490726 L12.0133993,2.4494676 C11.2406369,1.81863588 10.1084047,1.85183755 9.3734813,2.5490726 L9.3734813,2.5490726 L1.6882626,9.84017753 L1.59902778,9.91556251 C1.19846918,10.2159546 0.627503086,10.175018 0.27453847,9.80297426 C-0.10557727,9.40231172 -0.0889208004,8.76936587 0.311741737,8.38925013 L0.311741737,8.38925013 L7.99696044,1.09814521 Z" id="path-1"></path>
+    </defs>
+    <g id="典型页面-1：首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页" transform="translate(0.949946, 0.385161)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="形状结合" fill-rule="nonzero"></g>
+            <g id="编组" mask="url(#mask-2)">
+                <g transform="translate(-1.249946, -1.385161)" id="Symbol/color-light/colorPrimary">
+                    <rect id="color/#000000" fill="#0A59F7" x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_reduce.svg b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_reduce.svg
new file mode 100644
index 0000000000000000000000000000000000000000..142d090e8c48b30f9f694ae2571754ba110f1645
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_reduce.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_reduce</title>
+    <defs>
+        <path d="M2.96680416,4.02746433 C2.68362252,3.7442827 2.69149532,3.27728176 2.98438854,2.98438854 C3.27728176,2.69149532 3.7442827,2.68362252 4.02746433,2.96680416 L10.7801475,9.71948734 C11.0633291,10.002669 11.0554564,10.4696699 10.7625631,10.7625631 C10.4696699,11.0554564 10.002669,11.0633291 9.71948734,10.7801475 L2.96680416,4.02746433 Z M19.75,12.5 L19.7940682,12.5012732 C19.9384255,12.5096374 20.0718294,12.5588302 20.1829044,12.6374761 L20.2618461,12.7018051 L20.2946723,12.7344084 C20.4219425,12.8688111 20.5,13.0502899 20.5,13.25 C20.5,13.6296958 20.2178461,13.943491 19.8517706,13.9931534 L19.75,14 L15.0604628,13.9994628 L21.0331756,19.9725154 C21.3163684,20.2557082 21.3085047,20.7227182 21.0156115,21.0156115 C20.7227182,21.3085047 20.2557082,21.3163684 19.9725154,21.0331756 L13.9994628,15.0604628 L13.9987268,19.7940682 C13.9759152,20.18777 13.6494202,20.5 13.25,20.5 C13.090942,20.5 12.9434485,20.4504863 12.8220921,20.3660313 L12.7362032,20.2963663 L12.7036337,20.2637968 L12.6731019,20.2292885 C12.586627,20.1253173 12.5277267,19.9975979 12.5076256,19.857355 L12.5,19.75 L12.5,14.25 L12.5010148,14.1898376 C12.5310564,13.300598 13.2245361,12.5795925 14.1021145,12.5061604 L14.25,12.5 L19.75,12.5 Z M10.75,3.5 C10.909058,3.5 11.0565515,3.54951372 11.1779079,3.63396869 L11.2637968,3.7036337 L11.2963663,3.73620318 L11.3268981,3.77071147 C11.413373,3.87468274 11.4722733,4.0024021 11.4923744,4.14264502 L11.5,4.25 L11.4989852,9.81016244 C11.4689436,10.699402 10.7754639,11.4204075 9.89788549,11.4938396 L9.75,11.5 L4.2059318,11.4987268 C4.06157447,11.4903626 3.92817057,11.4411698 3.81709563,11.3625239 L3.73815385,11.2981949 L3.70532772,11.2655916 C3.5780575,11.1311889 3.5,10.9497101 3.5,10.75 C3.5,10.3703042 3.78215388,10.056509 4.14822944,10.0068466 L4.25,10 L9.2940682,9.99872683 C9.65496152,9.97781619 9.94739589,9.70172714 9.99362875,9.34820224 L10,9.25 L10,4.25 L10.0012732,4.2059318 C10.0240848,3.81222999 10.3505798,3.5 10.75,3.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_reduce" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_share.svg b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_share.svg
new file mode 100644
index 0000000000000000000000000000000000000000..516c03c260f5341c1a969a769e9b19648927cf6d
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_share.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_share</title>
+    <defs>
+        <path d="M12.25,2 C13.9068542,2 15.25,3.34314575 15.25,5 C15.25,6.65685425 13.9068542,8 12.25,8 C11.9804725,8 11.7192467,7.96445647 11.4707541,7.89780096 L5.93230241,16.2050908 C6.40150564,16.6005646 6.74773454,17.1373071 6.90542312,17.7497523 L17.0945769,17.7497523 C17.4276951,16.4559576 18.6022096,15.5 20,15.5 C21.6568542,15.5 23,16.8431458 23,18.5 C23,20.1568542 21.6568542,21.5 20,21.5 C18.6025704,21.5 17.4283015,20.5445359 17.094835,19.2512495 L6.90516499,19.2512495 C6.57169851,20.5445359 5.39742955,21.5 4,21.5 C2.34314575,21.5 1,20.1568542 1,18.5 C1,16.8431458 2.34314575,15.5 4,15.5 C4.19240202,15.5 4.38057369,15.5181123 4.56290296,15.5527249 L10.1618944,7.15402617 C9.59951533,6.60875215 9.25,5.84519291 9.25,5 C9.25,3.34314575 10.5931458,2 12.25,2 Z M4,17 C3.17157288,17 2.5,17.6715729 2.5,18.5 C2.5,19.3284271 3.17157288,20 4,20 C4.82842712,20 5.5,19.3284271 5.5,18.5 C5.5,17.6715729 4.82842712,17 4,17 Z M20,17 C19.1715729,17 18.5,17.6715729 18.5,18.5 C18.5,19.3284271 19.1715729,20 20,20 C20.8284271,20 21.5,19.3284271 21.5,18.5 C21.5,17.6715729 20.8284271,17 20,17 Z M12.25,3.5 C11.4215729,3.5 10.75,4.17157288 10.75,5 C10.75,5.82842712 11.4215729,6.5 12.25,6.5 C13.0784271,6.5 13.75,5.82842712 13.75,5 C13.75,4.17157288 13.0784271,3.5 12.25,3.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_share" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="合并形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_sound.svg b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_sound.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fbe0bc76b4b98f26978f0044fcb96075aeeee8b4
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_public_sound.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_sound</title>
+    <defs>
+        <path d="M19.6297132,3.97021633 C21.767174,6.11208412 22.9900393,9.00753275 22.9900393,12.0946605 C22.9900393,15.1739324 21.7734214,18.0626391 19.6455849,20.2031692 C19.3535641,20.4969322 18.8786924,20.4983444 18.5849295,20.2063235 C18.2911665,19.9143026 18.2897543,19.4394309 18.5817752,19.145668 C20.4329978,17.2834019 21.4900393,14.7735894 21.4900393,12.0946605 C21.4900393,9.4089026 20.4275654,6.89322181 18.5679613,5.02978367 C18.2753698,4.73658898 18.2758589,4.2617155 18.5690535,3.96912406 C18.8622482,3.67653262 19.3371217,3.67702165 19.6297132,3.97021633 Z M7.67146054,5.77188408 C8.4325828,5.17622318 9.53247286,5.31035612 10.1281338,6.07147837 C10.3690847,6.37936011 10.5,6.75905937 10.5,7.15001783 L10.5,7.15001783 L10.5,17.045134 C10.5,18.0116323 9.71649831,18.795134 8.75,18.795134 C8.35904154,18.795134 7.97934229,18.6642187 7.67138834,18.4232113 L7.67138834,18.4232113 L4.38,15.8465759 L2.25,15.8475759 C1.05913601,15.8475759 0.084355084,14.9224143 0.00519081254,13.7516247 L0.00519081254,13.7516247 L0,13.5975759 L0,10.5975759 C0,9.35493524 1.00735931,8.34757593 2.24981101,8.34757595 L2.24981101,8.34757595 L4.379,8.34657593 Z M16.4901783,6.49794378 C17.9618152,7.97261488 18.8039928,9.96668727 18.8039928,12.0921781 C18.8039928,14.2122592 17.966117,16.2016903 16.5011051,17.6754418 C16.2090842,17.9692047 15.7342125,17.9706169 15.4404496,17.678596 C15.1466866,17.3865751 15.1452744,16.9117035 15.4372953,16.6179406 C16.6256934,15.4224531 17.3039928,13.8119162 17.3039928,12.0921781 C17.3039928,10.3680571 16.6222066,8.75375258 15.4284264,7.55751111 C15.1358349,7.26431643 15.136324,6.78944294 15.4295187,6.4968515 C15.7227133,6.20426006 16.1975868,6.20474909 16.4901783,6.49794378 Z M8.94687625,6.99594076 C8.86178184,6.88720901 8.70465469,6.86804716 8.59586895,6.95318383 L8.59586895,6.95318383 L4.89763507,9.84690879 L2.25,9.84757593 C1.83578644,9.84757593 1.5,10.1833624 1.5,10.5975759 L1.5,10.5975759 L1.5,13.5975759 C1.5,14.0117895 1.83578644,14.3475759 2.24981101,14.347576 L2.24981101,14.347576 L4.89755819,14.3469088 L8.59592293,17.2420103 C8.63990604,17.2764318 8.69414879,17.295134 8.75,17.295134 C8.88807119,17.295134 9,17.1832052 9,17.045134 L9,17.045134 L9,7.15001783 C9,7.09416662 8.98129781,7.03992387 8.94687625,6.99594076 Z M13.6408603,9.2089851 C14.3913218,9.97869506 14.819589,11.0098911 14.819589,12.1067087 C14.819589,13.2171715 14.3805594,14.2600877 13.613475,15.0322585 C13.3215512,15.326118 12.8466801,15.3276871 12.5528206,15.0357634 C12.2589611,14.7438396 12.2573919,14.2689685 12.5493157,13.975109 C13.0399975,13.4811736 13.319589,12.817003 13.319589,12.1067087 C13.319589,11.4051196 13.0468694,10.7484563 12.5668561,10.2561312 C12.2776947,9.9595531 12.2837071,9.48471743 12.5802852,9.19555603 C12.8768633,8.90639462 13.3516989,8.91240702 13.6408603,9.2089851 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_sound" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="合并形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_pursue_profit.png b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_pursue_profit.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6cbe9c7b2c7f5d646a11af3bafdf893cc825266
Binary files /dev/null and b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_pursue_profit.png differ
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_ranking.png b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_ranking.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc01479c27543073a8b3ed0c8ef1a91348bde102
Binary files /dev/null and b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_ranking.png differ
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_steady_growth.png b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_steady_growth.png
new file mode 100644
index 0000000000000000000000000000000000000000..2826bef629a2bec4bfd7e09014e10faaee118981
Binary files /dev/null and b/MultiFinancialManagement/features/fund/src/main/resources/base/media/ic_steady_growth.png differ
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/icon.png b/MultiFinancialManagement/features/fund/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/MultiFinancialManagement/features/fund/src/main/resources/base/media/icon.png differ
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/media/setting.jpeg b/MultiFinancialManagement/features/fund/src/main/resources/base/media/setting.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..57e67dd49d39ad64ef090f59db3db9dfe6632106
Binary files /dev/null and b/MultiFinancialManagement/features/fund/src/main/resources/base/media/setting.jpeg differ
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/base/profile/main_pages.json b/MultiFinancialManagement/features/fund/src/main/resources/base/profile/main_pages.json
new file mode 100644
index 0000000000000000000000000000000000000000..9a81b4ef6c19153c2a381ce08dc7e47810411cc7
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/base/profile/main_pages.json
@@ -0,0 +1,7 @@
+{
+  "src": [
+    "view/Funding",
+    "view/FundingDetail",
+    "view/TrendsPage"
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/en_US/element/string.json b/MultiFinancialManagement/features/fund/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..11df72a8c14f21df8a0ebd7929233236bd201040
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/en_US/element/string.json
@@ -0,0 +1,220 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "the_fund_value",
+      "value": "-2.01%"
+    },
+    {
+      "name": "same_average_value",
+      "value": "-1.02%"
+    },
+    {
+      "name": "other_funding_value",
+      "value": "-0.67%"
+    },
+    {
+      "name": "my_funding",
+      "value": "My fund (RMB)"
+    },
+    {
+      "name": "my_concern",
+      "value": "My concern"
+    },
+    {
+      "name": "my_amount",
+      "value": "******"
+    },
+    {
+      "name": "funding_news",
+      "value": "Let's take a look at the funds everyone's buying."
+    },
+    {
+      "name": "funding_ranking",
+      "value": "rankings"
+    },
+    {
+      "name": "funding_index_zone",
+      "value": "index zone"
+    },
+    {
+      "name": "fixed_investment",
+      "value": "fixed_investment"
+    },
+    {
+      "name": "investment_star_selection",
+      "value": "Investment Star Selection"
+    },
+    {
+      "name": "funding_good_chance",
+      "value": "good chance"
+    },
+    {
+      "name": "funding_folder_add",
+      "value": "Self-built combination"
+    },
+    {
+      "name": "steady_growth",
+      "value": "steady growth"
+    },
+    {
+      "name": "funding_short_term_B",
+      "value": "XXXshort-term debt fund B"
+    },
+    {
+      "name": "funding_amplitude",
+      "value": "+7.89%"
+    },
+    {
+      "name": "funding_industrial",
+      "value": "XXXindustrial fund"
+    },
+    {
+      "name": "funding_mixed_currency",
+      "value": "XXX Mixed Currency"
+    },
+    {
+      "name": "funding_bonds",
+      "value": "XXXBonds"
+    },
+    {
+      "name": "one_year_amplitude",
+      "value": "Ups and downs in the past year"
+    },
+    {
+      "name": "funding_title",
+      "value": "Fund Details"
+    },
+    {
+      "name": "funding_code",
+      "value": "000000"
+    },
+    {
+      "name": "currency_type",
+      "value": "Currency type"
+    },
+    {
+      "name": "medium_risk",
+      "value": "R3-Medium risk"
+    },
+    {
+      "name": "purchase_rmb",
+      "value": "Purchase from ￥1.00"
+    },
+    {
+      "name": "one_day_amplitude_data",
+      "value": "-0.25%"
+    },
+    {
+      "name": "one_day_amplitude",
+      "value": "Daily rise and fall"
+    },
+    {
+      "name": "last_net_value_data",
+      "value": "1.257"
+    },
+    {
+      "name": "last_net_value",
+      "value": "Last net value"
+    },
+    {
+      "name": "last_net_not_show",
+      "value": "--"
+    },
+    {
+      "name": "three_year_rating",
+      "value": "Three-year rating"
+    },
+    {
+      "name": "the_fund",
+      "value": "The fund"
+    },
+    {
+      "name": "same_average",
+      "value": "Average"
+    },
+    {
+      "name": "other_funding",
+      "value": "Shanghai and Shenzhen"
+    },
+    {
+      "name": "funding_contrasts",
+      "value": "contrasts"
+    },
+    {
+      "name": "funding_concerned",
+      "value": "concerned"
+    },
+    {
+      "name": "fixed_investment_button",
+      "value": "fixed investment"
+    },
+    {
+      "name": "buying_button",
+      "value": "buying"
+    },
+    {
+      "name": "performance_trends",
+      "value": "Performance Trends"
+    },
+    {
+      "name": "unit_net_value",
+      "value": "Unit Net Value"
+    },
+    {
+      "name": "near_month",
+      "value": "near %d month"
+    },
+    {
+      "name": "near_year",
+      "value": "near %d year"
+    },
+    {
+      "name": "search_placeholder",
+      "value": "search..."
+    },
+    {
+      "name": "pursue_profit",
+      "value": "pursue profit"
+    },
+    {
+      "name": "index_funds",
+      "value": "index funds"
+    },
+    {
+      "name": "common_stock",
+      "value": "common stock"
+    },
+    {
+      "name": "partial_stock_mix",
+      "value": "partial stock mix"
+    },
+    {
+      "name": "flexible_configuration",
+      "value": "flexible configuration"
+    },
+    {
+      "name": "tab_bar_home",
+      "value": "home"
+    },
+    {
+      "name": "tab_bar_card",
+      "value": "card"
+    },
+    {
+      "name": "tab_bar_fortunes",
+      "value": "fortunes"
+    },
+    {
+      "name": "tab_bar_life",
+      "value": "life"
+    },
+    {
+      "name": "tab_bar_mine",
+      "value": "mine"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fund/src/main/resources/zh_CN/element/string.json b/MultiFinancialManagement/features/fund/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..4ce2de1730879221441bf0489bb00162a06a9db1
--- /dev/null
+++ b/MultiFinancialManagement/features/fund/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,220 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "the_fund_value",
+      "value": "-2.01%"
+    },
+    {
+      "name": "same_average_value",
+      "value": "-1.02%"
+    },
+    {
+      "name": "other_funding_value",
+      "value": "-0.67%"
+    },
+    {
+      "name": "my_funding",
+      "value": "我的基金 （元）"
+    },
+    {
+      "name": "my_concern",
+      "value": "我的关注"
+    },
+    {
+      "name": "my_amount",
+      "value": "******"
+    },
+    {
+      "name": "funding_news",
+      "value": "快来看看大家最近都在购买的基金"
+    },
+    {
+      "name": "funding_ranking",
+      "value": "排行榜"
+    },
+    {
+      "name": "funding_index_zone",
+      "value": "指数专区"
+    },
+    {
+      "name": "fixed_investment",
+      "value": "定投专区"
+    },
+    {
+      "name": "investment_star_selection",
+      "value": "投资星选"
+    },
+    {
+      "name": "funding_good_chance",
+      "value": "好机会"
+    },
+    {
+      "name": "funding_folder_add",
+      "value": "自建组合"
+    },
+    {
+      "name": "steady_growth",
+      "value": "稳健增长"
+    },
+    {
+      "name": "funding_short_term_B",
+      "value": "XXX短债基金B"
+    },
+    {
+      "name": "funding_amplitude",
+      "value": "+7.89%"
+    },
+    {
+      "name": "funding_industrial",
+      "value": "XXX产业基金C"
+    },
+    {
+      "name": "funding_mixed_currency",
+      "value": "XXX混合货币"
+    },
+    {
+      "name": "funding_bonds",
+      "value": "XXX债券A"
+    },
+    {
+      "name": "one_year_amplitude",
+      "value": "近一年涨跌幅"
+    },
+    {
+      "name": "funding_title",
+      "value": "基金详情"
+    },
+    {
+      "name": "funding_code",
+      "value": "000000"
+    },
+    {
+      "name": "currency_type",
+      "value": "货币型"
+    },
+    {
+      "name": "medium_risk",
+      "value": "R3-中风险"
+    },
+    {
+      "name": "purchase_rmb",
+      "value": "1.00元起购"
+    },
+    {
+      "name": "one_day_amplitude_data",
+      "value": "-0.25%"
+    },
+    {
+      "name": "one_day_amplitude",
+      "value": "日涨跌幅"
+    },
+    {
+      "name": "last_net_value_data",
+      "value": "1.257"
+    },
+    {
+      "name": "last_net_value",
+      "value": "最新净值"
+    },
+    {
+      "name": "last_net_not_show",
+      "value": "--"
+    },
+    {
+      "name": "three_year_rating",
+      "value": "三年评级"
+    },
+    {
+      "name": "the_fund",
+      "value": "本基金"
+    },
+    {
+      "name": "same_average",
+      "value": "同类平均"
+    },
+    {
+      "name": "other_funding",
+      "value": "沪深300"
+    },
+    {
+      "name": "funding_contrasts",
+      "value": "对比"
+    },
+    {
+      "name": "funding_concerned",
+      "value": "关注"
+    },
+    {
+      "name": "fixed_investment_button",
+      "value": "定投"
+    },
+    {
+      "name": "buying_button",
+      "value": "购买"
+    },
+    {
+      "name": "performance_trends",
+      "value": "业绩走势"
+    },
+    {
+      "name": "unit_net_value",
+      "value": "单位净值"
+    },
+    {
+      "name": "near_month",
+      "value": "近%d月"
+    },
+    {
+      "name": "near_year",
+      "value": "近%d年"
+    },
+    {
+      "name": "search_placeholder",
+      "value": "搜索..."
+    },
+    {
+      "name": "pursue_profit",
+      "value": "追求收益"
+    },
+    {
+      "name": "index_funds",
+      "value": "指数基金"
+    },
+    {
+      "name": "common_stock",
+      "value": "普通股票"
+    },
+    {
+      "name": "partial_stock_mix",
+      "value": "偏股混合"
+    },
+    {
+      "name": "flexible_configuration",
+      "value": "灵活配置"
+    },
+    {
+      "name": "tab_bar_home",
+      "value": "首页"
+    },
+    {
+      "name": "tab_bar_card",
+      "value": "信用卡"
+    },
+    {
+      "name": "tab_bar_fortunes",
+      "value": "财富"
+    },
+    {
+      "name": "tab_bar_life",
+      "value": "生活"
+    },
+    {
+      "name": "tab_bar_mine",
+      "value": "我的"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/Index.ets b/MultiFinancialManagement/features/fundComparison/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..81aa5de9d68f96b6eb6f837b0c6b0a3df758a802
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/Index.ets
@@ -0,0 +1,4 @@
+export { ComparisonComponent } from './src/main/ets/view/ComparisonComponent';
+export { ComparisonDetailComponent } from './src/main/ets/view/ComparisonDetailComponent';
+export { ComparisonInfo } from './src/main/ets/viewmodel/ComparisonInfo';
+export { ComparisonDetailPage } from './src/main/ets/view/ComparisonDetailPage';
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/build-profile.json5 b/MultiFinancialManagement/features/fundComparison/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/hvigorfile.ts b/MultiFinancialManagement/features/fundComparison/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiFinancialManagement/features/fundComparison/obfuscation-rules.txt b/MultiFinancialManagement/features/fundComparison/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a1dfa0bd175984dc49e641436aa67b1de1b8abeb
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/obfuscation-rules.txt
@@ -0,0 +1,22 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/oh-package.json5 b/MultiFinancialManagement/features/fundComparison/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..8a449523209cf65ad106f160a50be194917d972d
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/oh-package.json5
@@ -0,0 +1,14 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "fundcomparison",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "packageType": "InterfaceHar",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/basic": "file:../../commons/basic"
+  }
+}
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/ets/constants/ComparisonConstants.ets b/MultiFinancialManagement/features/fundComparison/src/main/ets/constants/ComparisonConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9d9a43d9ad4e6a674fd9223d1a8cd1ac24f32671
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/ets/constants/ComparisonConstants.ets
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Fund comparison constants for comparison feature.
+ */
+export class ComparisonConstants {
+  /**
+   * Maximum number of fund comparisons.
+   */
+  static readonly MAX_COMPARISON_FUND_COUNT: number = 10;
+
+  /**
+   * Column space.
+   */
+  static readonly COLUMN_SPACE: number = 2;
+
+  /**
+   * List space.
+   */
+  static readonly CHOOSE_LIST_SPACE: number = 12;
+
+  /**
+   * Row space.
+   */
+  static readonly FUND_NAME_ROW_SPACE: number = 8;
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/ets/view/ComparisonComponent.ets b/MultiFinancialManagement/features/fundComparison/src/main/ets/view/ComparisonComponent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..87d7bfdbf19271a9e525e3bdf08a7c085b4e3bdd
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/ets/view/ComparisonComponent.ets
@@ -0,0 +1,331 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { TreeMap } from '@kit.ArkTS';
+import { CommonConstants } from '@ohos/basic';
+import { ComparisonInfo } from '../viewmodel/ComparisonInfo';
+import FundComparisonViewModel from '../viewmodel/FundComparisonViewModel';
+import { ComparisonConstants } from '../constants/ComparisonConstants';
+
+@Component
+export struct ComparisonComponent {
+  @StorageLink('breakPoint') currentPoint: string = CommonConstants.BREAK_POINT_SM;
+  @State chooseComparison: ComparisonInfo[] = [];
+  @State map: TreeMap<number, ComparisonInfo> = new TreeMap();
+  @State defaultAllComparison: ComparisonInfo[] = FundComparisonViewModel.getFundComparisonList();
+  @State indexArray: number[] = [];
+  @StorageLink('pageInfo') pageInfo: NavPathStack = new NavPathStack();
+  private controller: TabsController = new TabsController();
+  @State tabBarIndex: number = 0;
+
+  build() {
+    NavDestination() {
+      GridRow({
+        breakpoints: {
+          value: CommonConstants.BREAK_POINTS_VALUE,
+          reference: BreakpointsReference.WindowSize
+        },
+        columns: {
+          sm: CommonConstants.COLUMN_SM,
+          md: CommonConstants.COLUMN_MD,
+          lg: CommonConstants.COLUMN_LG
+        },
+        direction: GridRowDirection.Row
+      }) {
+        GridCol({
+          span: {
+            sm: CommonConstants.COLUMN_SM,
+            md: CommonConstants.COLUMN_MD,
+            lg: CommonConstants.COLUMN_LG
+          }
+        }) {
+          Column() {
+            Row() {
+              Image($r('app.media.ic_public_back'))
+                .width($r('app.float.common_image'))
+                .height($r('app.float.common_image'))
+                .onClick(() => {
+                  this.pageInfo.pop();
+                })
+              Text($r('app.string.funding_comparison_title'))
+                .fontSize($r('app.float.title_text_size'))
+                .fontColor($r('app.color.sixty_percent_white'))
+              Image($r('app.media.ic_public_cancel'))
+                .width($r('app.float.common_image'))
+                .height($r('app.float.common_image'))
+                .onClick(() => {
+                  this.pageInfo.pop();
+                })
+            }
+            .height($r('app.float.title_height'))
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .justifyContent(FlexAlign.SpaceBetween)
+            .backgroundColor(Color.White)
+            .visibility(this.currentPoint === CommonConstants.BREAK_POINT_SM ? Visibility.Visible : Visibility.None)
+
+            Row() {
+              Row() {
+                Image($r('app.media.ic_public_back'))
+                  .width($r('app.float.common_image'))
+                  .height($r('app.float.common_image'))
+                  .onClick(() => {
+                    this.pageInfo.pop();
+                  })
+                Text($r('app.string.funding_comparison_title'))
+                  .fontSize($r('app.float.title_text_size'))
+                  .fontColor($r('app.color.sixty_percent_white'))
+                  .margin({
+                    left: $r('app.float.padding_common')
+                  })
+              }
+              Row() {
+                Search({ placeholder: $r('app.string.search_placeholder') })
+                  .width($r('app.float.search_width'))
+                  .enableKeyboardOnFocus(false)
+                  .margin({
+                    right: $r('app.float.padding_common')
+                  })
+                Image($r('app.media.ic_public_cancel'))
+                  .width($r('app.float.common_image'))
+                  .height($r('app.float.common_image'))
+                  .onClick(() => {
+                    this.pageInfo.pop();
+                  })
+              }
+            }
+            .height($r('app.float.title_height'))
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .justifyContent(FlexAlign.SpaceBetween)
+            .backgroundColor(Color.White)
+            .visibility(this.currentPoint === CommonConstants.BREAK_POINT_SM ? Visibility.None : Visibility.Visible)
+
+            Search({ placeholder: $r('app.string.search_placeholder') })
+              .margin({
+                top: $r('app.float.search_margin_top')
+              })
+              .enableKeyboardOnFocus(false)
+              .visibility(this.currentPoint === CommonConstants.BREAK_POINT_SM ? Visibility.Visible : Visibility.None)
+
+            Tabs() {
+              TabContent() {
+                List() {
+                  ForEach(this.defaultAllComparison, (item: ComparisonInfo, index: number) => {
+                    ListItem() {
+                      Row() {
+                        Checkbox()
+                          .shape(CheckBoxShape.ROUNDED_SQUARE)
+                          .select(this.indexArray.indexOf(index) != -1)
+                          .onChange((value: boolean) => {
+                            if (value) {
+                              this.map.set(index, item);
+                            } else {
+                              this.map.remove(index);
+                            }
+                            this.chooseComparison = Array.from(this.map.values());
+                            this.indexArray = Array.from(this.map.keys());
+                            if (this.map.length > ComparisonConstants.MAX_COMPARISON_FUND_COUNT) {
+                              this.map.remove(index);
+                              this.chooseComparison = Array.from(this.map.values());
+                              this.indexArray = Array.from(this.map.keys());
+                              return;
+                            }
+                          })
+                        Column({ space: ComparisonConstants.COLUMN_SPACE }) {
+                          Text(item.name)
+                            .fontSize($r('app.float.name_size'))
+                            .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                            .lineHeight($r('app.float.common_line_height'))
+                          Text(item.code)
+                            .fontSize($r('app.float.code_size'))
+                            .fontColor($r('app.color.sixty_percent_white'))
+                        }
+                        .layoutWeight(1)
+                        .border({
+                          width: {
+                            bottom: $r('app.float.common_border_width')
+                          },
+                          color: $r('app.color.five_percent_white_fund')
+                        })
+                        .alignItems(HorizontalAlign.Start)
+                        .padding({
+                          bottom: $r('app.float.list_padding_bottom')
+                        })
+                        .margin({
+                          left: $r('app.float.list_margin_left')
+                        })
+                      }
+                    }
+                    .height($r('app.float.list_item_height_comparison'))
+                  })
+                }
+                .lanes(this.currentPoint === CommonConstants.BREAK_POINT_SM ? 1 : 2)
+              }
+              .tabBar($r('app.string.fund_popularity'))
+
+              TabContent() {
+
+              }
+              .tabBar($r('app.string.self_selected'))
+            }
+            .barMode(BarMode.Fixed)
+            .barWidth($r('app.float.choose_tab_width'))
+            .layoutWeight(1)
+
+            Row() {
+              if (this.chooseComparison.length > 0) {
+                Column() {
+                  Row({ space: ComparisonConstants.CHOOSE_LIST_SPACE }) {
+                    Text($r('app.string.no_currency', this.chooseComparison.length))
+                      .fontSize($r('app.float.tab_text_size_fund'))
+                      .lineHeight($r('app.float.common_line_height'))
+                      .fontColor(this.tabBarIndex === 0 ? $r('app.color.harmony_blue') : Color.Black)
+                      .onClick(() => {
+                        this.tabBarIndex = 0;
+                        this.controller.changeIndex(this.tabBarIndex);
+                      })
+                    Text($r('app.string.currency_bar', 0))
+                      .fontSize($r('app.float.tab_text_size_fund'))
+                      .lineHeight($r('app.float.common_line_height'))
+                      .fontColor(this.tabBarIndex === 1 ? $r('app.color.harmony_blue') : Color.Black)
+                      .onClick(() => {
+                        this.tabBarIndex = 1;
+                        this.controller.changeIndex(this.tabBarIndex);
+                      })
+                  }
+                  .width(CommonConstants.FULL_WIDTH_PERCENT)
+                  .justifyContent(FlexAlign.Start)
+                  .alignItems(VerticalAlign.Center)
+                  .height($r('app.float.title_height'))
+
+                  Tabs({ controller: this.controller }) {
+                    TabContent() {
+                      List({ space: ComparisonConstants.CHOOSE_LIST_SPACE }) {
+                        ForEach(this.chooseComparison, (item: ComparisonInfo) => {
+                          ListItem() {
+                            Stack() {
+                              Row() {
+                                Text(item.name)
+                                  .fontSize($r('app.float.stack_text_size'))
+                              }
+                              .backgroundColor($r('app.color.five_percent_white_fund'))
+                              .borderRadius($r('app.float.row_border_radius'))
+                              .padding({
+                                top: $r('app.float.stack_row_padding_top'),
+                                bottom: $r('app.float.stack_row_padding_bottom'),
+                                left: $r('app.float.stack_row_padding_left'),
+                                right: $r('app.float.stack_row_padding_right')
+                              })
+                              .margin({
+                                top: $r('app.float.stack_row_margin_top')
+                              })
+                              Row() {
+                                Image($r('app.media.ic_public_close'))
+                                  .width($r('app.float.close_image'))
+                                  .height($r('app.float.close_image'))
+                                  .fillColor($r('app.color.forty_percent_white'))
+                                  .onClick(() => {
+                                    for (let i = 0; i < this.defaultAllComparison.length; i++) {
+                                      if (item.code === this.defaultAllComparison[i].code) {
+                                        this.map.remove(i);
+                                        this.indexArray = Array.from(this.map.keys());
+                                        this.chooseComparison = Array.from(this.map.values());
+                                      }
+                                    }
+                                  })
+                              }
+                              .layoutWeight(1)
+                              .justifyContent(FlexAlign.End)
+                              .alignItems(VerticalAlign.Top)
+                            }
+                            .align(Alignment.TopEnd)
+                          }
+                        })
+                      }
+                      .listDirection(Axis.Horizontal)
+                      .height($r('app.float.content_height'))
+                      .width(CommonConstants.FULL_WIDTH_PERCENT)
+                    }
+                    .tabBar($r('app.string.no_currency', this.chooseComparison.length))
+
+                    TabContent() {
+
+                    }
+                    .tabBar($r('app.string.currency_bar', 0))
+                  }
+                  .layoutWeight(1)
+                  .barHeight(0)
+                  .scrollable(false)
+
+                  Row() {
+                    Column() {
+                      Text($r('app.string.count_choose', this.chooseComparison.length))
+                        .fontSize($r('app.float.choose_count_size'))
+                        .lineHeight($r('app.float.common_line_height'))
+                        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                      Text($r('app.string.max_count_choose'))
+                        .fontSize($r('app.float.choose_hints_size'))
+                        .lineHeight($r('app.float.choose_hints_lint_height'))
+                        .fontColor($r('app.color.sixty_percent_white'))
+                    }
+
+                    Button($r('app.string.start_comparison'))
+                      .backgroundColor($r('app.color.start_button_background'))
+                      .width(this.currentPoint === CommonConstants.BREAK_POINT_SM ?
+                        $r('app.float.start_button_width_sm') : $r('app.float.start_button_width'))
+                      .height($r('app.float.start_button_height'))
+                      .fontColor(Color.White)
+                      .fontSize($r('app.float.common_font_size'))
+                      .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                      .onClick(() => {
+                        this.pageInfo.pushPathByName(CommonConstants.PATH_COMPARISON_DETAIL, this.chooseComparison);
+                      })
+                  }
+                  .width(CommonConstants.FULL_WIDTH_PERCENT)
+                  .justifyContent(FlexAlign.SpaceBetween)
+                }
+              } else {
+                Row() {
+                  Text($r('app.string.select_fund'))
+                    .fontSize($r('app.float.common_font_size'))
+                    .lineHeight($r('app.float.common_line_height'))
+                    .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                  Button($r('app.string.start_comparison'))
+                    .backgroundColor($r('app.color.start_comparison_background'))
+                    .width(this.currentPoint === CommonConstants.BREAK_POINT_SM ?
+                       $r('app.float.start_button_width_sm') : $r('app.float.start_button_width'))
+                    .height($r('app.float.start_button_height'))
+                    .fontColor(Color.White)
+                    .fontSize($r('app.float.common_font_size'))
+                    .fontWeight(CommonConstants.FONT_WEIGHT_500)
+
+                }
+                .width(CommonConstants.FULL_WIDTH_PERCENT)
+                .justifyContent(FlexAlign.SpaceBetween)
+              }
+            }
+            .height(this.chooseComparison.length > 0 ?
+              $r('app.float.bottom_choose_height_show') : $r('app.float.bottom_choose_height'))
+          }
+        }
+      }
+      .padding({
+        left: $r('app.float.comparison_padding_left'),
+        right: $r('app.float.comparison_padding_right'),
+        bottom: $r('app.float.comparison_padding_bottom')
+      })
+    }
+    .hideTitleBar(true)
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/ets/view/ComparisonDetailComponent.ets b/MultiFinancialManagement/features/fundComparison/src/main/ets/view/ComparisonDetailComponent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..fbcc3947771aa4fe232a9236c00a14acefcc5290
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/ets/view/ComparisonDetailComponent.ets
@@ -0,0 +1,346 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonConstants, RouterConstants } from '@ohos/basic';
+import { ComparisonConstants } from '../constants/ComparisonConstants';
+import { ComparisonInfo } from '../viewmodel/ComparisonInfo';
+import FundComparisonViewModel from '../viewmodel/FundComparisonViewModel';
+
+@Component
+export struct ComparisonDetailComponent {
+  @State chooseComparison: ComparisonInfo[] = FundComparisonViewModel.getFundComparisonList();
+  @State isListScroll: boolean = true;
+  @State isScroll: boolean = true;
+  @StorageLink('pageInfo') pageInfo: NavPathStack = new NavPathStack();
+  @State isPage: Boolean = false;
+  @StorageProp('breakPoint') currentPoint: string = CommonConstants.BREAK_POINT_SM;
+  @StorageLink('pageIndexInfos') pageIndexInfos: NavPathStack = new NavPathStack();
+  private nameColorArr: ResourceColor[] = [
+    $r('app.color.name_color_1'),
+    $r('app.color.name_color_2'),
+    $r('app.color.name_color_3')
+  ];
+  scroller: Scroller = new Scroller();
+  scrollerList: Scroller = new Scroller();
+
+  build() {
+    Column() {
+      Row() {
+        Row() {
+          Image($r('app.media.ic_public_back'))
+            .width($r('app.float.common_image'))
+            .height($r('app.float.common_image'))
+            .margin({
+              right: $r('app.float.image_margin_right')
+            })
+            .onClick(() => {
+              if (this.isPage) {
+                this.pageIndexInfos.pop();
+              } else {
+                this.pageInfo.pop();
+              }
+            })
+          if (this.currentPoint === CommonConstants.BREAK_POINT_LG) {
+            if (this.isPage) {
+              Image($r('app.media.ic_public_reduce'))
+                .width($r('app.float.common_image'))
+                .height($r('app.float.common_image'))
+                .onClick(() => {
+                  this.pageIndexInfos.pop();
+                })
+            } else {
+              Image($r('app.media.ic_public_enlarge'))
+                .width($r('app.float.common_image'))
+                .height($r('app.float.common_image'))
+                .onClick(() => {
+                  this.pageIndexInfos.pushPathByName(RouterConstants.COMPARISON_PAGE_URL,
+                    { 'chooseComparison': this.chooseComparison } as Record<string, ComparisonInfo[]>);
+                })
+            }
+          }
+        }
+        Text($r('app.string.funding_comparison_title'))
+          .fontSize($r('app.float.title_text_size'))
+          .fontColor($r('app.color.sixty_percent_white'))
+        Image($r('app.media.ic_public_cancel'))
+          .width($r('app.float.common_image'))
+          .height($r('app.float.common_image'))
+          .onClick(() => {
+            if (this.isPage) {
+              this.pageIndexInfos.pop();
+            } else {
+              this.pageInfo.pop();
+            }
+          })
+      }
+      .width(CommonConstants.FULL_WIDTH_PERCENT)
+      .justifyContent(FlexAlign.SpaceBetween)
+      .padding({
+        top: $r('app.float.title_padding_top'),
+        left: $r('app.float.padding_common'),
+        right: $r('app.float.padding_common')
+      })
+
+      Tabs() {
+        TabContent() {
+          Column() {
+            Row() {
+              Row() {
+                Text($r('app.string.table_fund_name'))
+                  .fontSize($r('app.float.fund_name_size'))
+                  .lineHeight($r('app.float.fund_name_line_height'))
+                  .fontColor($r('app.color.sixty_percent_white'))
+              }
+              .width($r('app.float.fund_name_width'))
+              .height($r('app.float.fund_name_height'))
+              .alignItems(VerticalAlign.Center)
+              .justifyContent(FlexAlign.Center)
+
+              List({ space: ComparisonConstants.FUND_NAME_ROW_SPACE, scroller: this.scrollerList }) {
+                ForEach(this.chooseComparison, (item: ComparisonInfo, index: number) => {
+                  ListItem() {
+                    Column() {
+                      Row() {
+                        Image($r('app.media.ic_fixing'))
+                          .width($r('app.float.fixing_width'))
+                          .height($r('app.float.fixing_height'))
+                        Image($r('app.media.ic_public_cancel'))
+                          .width($r('app.float.cancel_width'))
+                          .height($r('app.float.cancel_height'))
+                      }
+                      .width(CommonConstants.FULL_WIDTH_PERCENT)
+                      .justifyContent(FlexAlign.SpaceBetween)
+                      .padding({
+                        left: $r('app.float.fixing_image_padding'),
+                        right: $r('app.float.fixing_image_padding'),
+                        bottom: $r('app.float.fixing_image_padding')
+                      })
+
+                      Row() {
+                        Divider()
+                          .vertical(true)
+                          .width($r('app.float.divider_fixing_width'))
+                          .height($r('app.float.divider_fixing_height'))
+                          .color(this.nameColorArr[index % this.nameColorArr.length])
+                          .borderRadius($r('app.float.divider_fixing_radius'))
+                        Text(item.name)
+                          .fontSize($r('app.float.list_fund_name_size'))
+                          .lineHeight($r('app.float.list_name_line_height'))
+                          .textOverflow({ overflow: TextOverflow.Ellipsis })
+                          .margin({
+                            left: $r('app.float.list_name_margin_left')
+                          })
+                      }
+                      .width(CommonConstants.FULL_WIDTH_PERCENT)
+                    }
+                  }
+                  .width($r('app.float.list_name_width'))
+                  .height($r('app.float.list_name_height'))
+                  .backgroundColor($r('app.color.background'))
+                  .borderRadius($r('app.float.list_name_radius'))
+                })
+              }
+              .scrollBar(BarState.Off)
+              .listDirection(Axis.Horizontal)
+              .edgeEffect(EdgeEffect.None)
+              .onWillScroll((_scrollOffset: number) => {
+                if (this.isScroll) {
+                  let offset = this.scrollerList.currentOffset().xOffset;
+                  this.scroller.scrollTo({ xOffset: offset, yOffset: 0 });
+                }
+              })
+              .onScrollFrameBegin((offset: number) => {
+                this.isListScroll = false;
+                return { offsetRemain: offset }
+              })
+              .onScrollStop(() => {
+                this.isListScroll = true;
+              })
+              .layoutWeight(1)
+            }
+            .height($r('app.float.list_name_height'))
+
+            Divider()
+              .width(CommonConstants.FULL_WIDTH_PERCENT)
+              .height($r('app.float.common_divider'))
+              .backgroundColor($r('app.color.divider_background'))
+              .margin({
+                top: $r('app.float.divider_margin_top'),
+                bottom: $r('app.float.divider_margin_bottom')
+              })
+            Text($r('app.string.base_info'))
+              .fontSize($r('app.float.common_font_size'))
+              .lineHeight($r('app.float.common_line_height'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+              .fontColor($r('app.color.info_text'))
+              .margin({
+                left: $r('app.float.info_margin_left')
+              })
+            Scroll() {
+              Row() {
+                List() {
+                  ForEach(FundComparisonViewModel.getComparisonCategory(), (item: ResourceStr) => {
+                    ListItem() {
+                      Text(item)
+                        .fontSize($r('app.float.list_head_size'))
+                        .lineHeight($r('app.float.list_head_line_height'))
+                        .fontColor($r('app.color.sixty_percent_white'))
+                        .width($r('app.float.list_head_text_width'))
+                    }
+                    .height($r('app.float.list_head_height'))
+                    .width($r('app.float.list_head_width'))
+                  })
+                }
+                .border({
+                  width: {
+                    top: $r('app.float.list_head_border'),
+                    bottom: $r('app.float.list_head_border')
+                  },
+                  color: $r('app.color.ten_percent_white')
+                })
+                .width($r('app.float.list_head_width'))
+                .divider({
+                  strokeWidth: $r('app.float.common_divider'),
+                  color: $r('app.color.ten_percent_white')
+                })
+
+                Scroll(this.scroller) {
+                  Row() {
+                    ForEach(this.chooseComparison, (item: ComparisonInfo) => {
+                      List() {
+                        ListItem() {
+                          Text(item.code)
+                            .buildScrollListText()
+                        }
+                        .listStyle()
+
+                        ListItem() {
+                          Text(item.type)
+                            .buildScrollListText()
+                        }
+                        .listStyle()
+
+                        ListItem() {
+                          Text(item.establishedTime)
+                            .buildScrollListText()
+                        }
+                        .listStyle()
+
+                        ListItem() {
+                          Text(`${item.scale}`)
+                            .buildScrollListText()
+                        }
+                        .listStyle()
+
+                        ListItem() {
+                          Text(item.risksLevel)
+                            .buildScrollListText()
+                        }
+                        .listStyle()
+
+                        ListItem() {
+                          Text(`${item.rating}`)
+                            .buildScrollListText()
+                        }
+                        .listStyle()
+
+                        ListItem() {
+                          Text(`${item.dividends}`)
+                            .buildScrollListText()
+                        }
+                        .listStyle()
+
+                        ListItem() {
+                          Text(`${item.dividendsCount}`)
+                            .buildScrollListText()
+                        }
+                        .listStyle()
+
+                        ListItem() {
+                          Text(item.fundManager)
+                            .buildScrollListText()
+                        }
+                        .listStyle()
+                      }
+                      .divider({
+                        strokeWidth: $r('app.float.common_divider'),
+                        color: $r('app.color.ten_percent_white')
+                      })
+                      .width($r('app.float.scroll_list_width'))
+                      .border({
+                        width: $r('app.float.common_divider'),
+                        color: $r('app.color.ten_percent_white')
+                      })
+                    })
+                  }
+                  .justifyContent(FlexAlign.Start)
+                }
+                .scrollable(ScrollDirection.Horizontal)
+                .scrollBar(BarState.Off)
+                .edgeEffect(EdgeEffect.None)
+                .onWillScroll((_scrollOffset: number) => {
+                  if (this.isListScroll) {
+                    let offset = this.scroller.currentOffset().xOffset;
+                    this.scrollerList.scrollTo({ xOffset: offset, yOffset: 0 });
+                  }
+                })
+                .onScrollStop(() => {
+                  this.isScroll = true;
+                })
+                .onScrollFrameBegin((offset: number) => {
+                  this.isScroll = false;
+                  return { offsetRemain: offset };
+                })
+                .layoutWeight(1)
+                .align(Alignment.Start)
+              }
+              .justifyContent(FlexAlign.Start)
+              .alignItems(VerticalAlign.Top)
+            }
+            .layoutWeight(1)
+            .align(Alignment.Top)
+          }
+          .height(CommonConstants.FULL_HEIGHT_PERCENT)
+          .alignItems(HorizontalAlign.Start)
+          .justifyContent(FlexAlign.Start)
+        }
+        .tabBar($r('app.string.no_currency', this.chooseComparison.length))
+
+        TabContent() {
+
+        }
+        .tabBar($r('app.string.currency_bar', 0))
+      }
+      .barMode(BarMode.Fixed)
+      .barWidth($r('app.float.choose_tab_width'))
+      .layoutWeight(1)
+    }
+  }
+
+  @Styles
+  listStyle() {
+    .height($r('app.float.list_style_height'))
+    .width($r('app.float.list_style_width'))
+  }
+}
+
+@Extend(Text)
+function buildScrollListText() {
+  .fontSize($r('app.float.list_text_size'))
+  .lineHeight($r('app.float.list_text_line_height'))
+  .fontColor($r('app.color.sixty_percent_white'))
+  .width($r('app.float.list_text_width'))
+  .textAlign(TextAlign.Center)
+}
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/ets/view/ComparisonDetailPage.ets b/MultiFinancialManagement/features/fundComparison/src/main/ets/view/ComparisonDetailPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4b06aa934f06c3e638ffbef21b21141002c4bc8f
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/ets/view/ComparisonDetailPage.ets
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComparisonDetailComponent } from './ComparisonDetailComponent';
+import { ComparisonInfo } from '../viewmodel/ComparisonInfo';
+import { CommonConstants } from '@ohos/basic';
+
+@Component
+export struct ComparisonDetailPage {
+  @State chooseComparison: ComparisonInfo[] = [];
+
+  build() {
+    Row() {
+      ComparisonDetailComponent({ chooseComparison: this.chooseComparison, isPage: true })
+    }
+    .height(CommonConstants.FULL_HEIGHT_PERCENT)
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/ets/viewmodel/ComparisonInfo.ets b/MultiFinancialManagement/features/fundComparison/src/main/ets/viewmodel/ComparisonInfo.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a1d8068f4823d21178f1e141f730682748c29ddb
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/ets/viewmodel/ComparisonInfo.ets
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Comparison information entity class.
+ */
+export class ComparisonInfo {
+  name: ResourceStr;
+  code: ResourceStr;
+  type: ResourceStr;
+  establishedTime: ResourceStr;
+  scale: number;
+  risksLevel: ResourceStr;
+  rating: number;
+  dividends: number;
+  dividendsCount: number;
+  fundManager: ResourceStr;
+
+  constructor(name: ResourceStr, code: ResourceStr, type: ResourceStr, establishedTime: ResourceStr, scale: number,
+    risksLevel: ResourceStr, rating: number, dividends: number, dividendsCount: number, fundManager: ResourceStr) {
+    this.name = name;
+    this.code = code;
+    this.type = type;
+    this.establishedTime = establishedTime;
+    this.scale = scale;
+    this.risksLevel = risksLevel;
+    this.rating = rating;
+    this.dividends = dividends;
+    this.dividendsCount = dividendsCount;
+    this.fundManager = fundManager;
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/ets/viewmodel/FundComparisonViewModel.ets b/MultiFinancialManagement/features/fundComparison/src/main/ets/viewmodel/FundComparisonViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..7d5fc8dfe19281666769ceb2bdfe18790b8cec4e
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/ets/viewmodel/FundComparisonViewModel.ets
@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComparisonInfo } from './ComparisonInfo';
+
+/**
+ * Get fund comparison data.
+ */
+class FundComparisonViewModel {
+  getFundComparisonList(): ComparisonInfo[] {
+    let comparisonInfoList: ComparisonInfo[] = [
+      new ComparisonInfo('XXXX基金1', '000000', '债券型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'H**'),
+      new ComparisonInfo('XXXX基金2', '111111', '混合型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'A**'),
+      new ComparisonInfo('XXXX基金3', '222222', '股票型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'B**'),
+      new ComparisonInfo('XXXX基金4', '333333', '混合型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'C**'),
+      new ComparisonInfo('XXXX基金5', '444444', '债券型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'D**'),
+      new ComparisonInfo('XXXX基金6', '555555', '股票型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'E**'),
+      new ComparisonInfo('XXXX基金7', '666666', '股票型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'F**'),
+      new ComparisonInfo('XXXX基金8', '777777', '债券型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'G**'),
+      new ComparisonInfo('XXXX基金9', '888888', '债券型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'H**'),
+      new ComparisonInfo('XXXX基金10', '999099', '混合型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'I**'),
+      new ComparisonInfo('XXXX基金11', '121212', '混合型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'J**'),
+      new ComparisonInfo('XXXX基金12', '131313', '股票型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'K**'),
+      new ComparisonInfo('XXXX基金13', '000001', '混合型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'L**'),
+      new ComparisonInfo('XXXX基金14', '000002', '债券型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'M**'),
+      new ComparisonInfo('XXXX基金15', '000003', '混合型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'N**'),
+      new ComparisonInfo('XXXX基金16', '000004', '债券型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'O**'),
+      new ComparisonInfo('XXXX基金17', '000005', '股票型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'P**'),
+      new ComparisonInfo('XXXX基金18', '000006', '债券型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'Q**'),
+      new ComparisonInfo('XXXX基金19', '000007', '混合型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'R**'),
+      new ComparisonInfo('XXXX基金20', '000008', '债券型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'S**'),
+      new ComparisonInfo('XXXX基金21', '000009', '股票型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'T**'),
+      new ComparisonInfo('XXXX基金22', '323323', '股票型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'U**'),
+      new ComparisonInfo('XXXX基金23', '322443', '混合型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'V**'),
+      new ComparisonInfo('XXXX基金24', '667783', '股票型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'W**'),
+      new ComparisonInfo('XXXX基金25', '123456', '混合型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'X**'),
+      new ComparisonInfo('XXXX基金26', '643245', '债券型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'Y**'),
+      new ComparisonInfo('XXXX基金27', '908998', '债券型', '2018/09/10', 27.44, '中高风险', 2, 0, 0, 'Z**'),
+    ];
+    return comparisonInfoList;
+  }
+
+  getComparisonCategory(): ResourceStr[] {
+    let category: ResourceStr[] = [
+      $r('app.string.category_fund_code'),
+      $r('app.string.category_fund_type'),
+      $r('app.string.category_established_time'),
+      $r('app.string.category_new_scale'),
+      $r('app.string.category_risks_level'),
+      $r('app.string.category_three_rating'),
+      $r('app.string.category_accumulated_dividends'),
+      $r('app.string.category_dividends_count'),
+      $r('app.string.category_fund_manager')
+    ];
+
+    return category;
+  }
+}
+
+export default new FundComparisonViewModel();
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/module.json5 b/MultiFinancialManagement/features/fundComparison/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..f242d81556965593d2576b5a9b91661a53b2cf11
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/module.json5
@@ -0,0 +1,12 @@
+{
+  "module": {
+    "name": "fundComparison",
+    "type": "har",
+    "description": "$string:shared_desc",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/resources/base/element/color.json b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..5aab27af19f11e4e82a92cd24eaad2172d4ec455
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/element/color.json
@@ -0,0 +1,68 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "five_percent_black",
+      "value": "#0dffffff"
+    },
+    {
+      "name": "five_percent_white_fund",
+      "value": "#0d000000"
+    },
+    {
+      "name": "sixty_percent_black",
+      "value": "#99ffffff"
+    },
+    {
+      "name": "sixty_percent_white",
+      "value": "#99000000"
+    },
+    {
+      "name": "forty_percent_white",
+      "value": "#66000000"
+    },
+    {
+      "name": "start_button_background",
+      "value": "#0a59f7"
+    },
+    {
+      "name": "start_comparison_background",
+      "value": "#660a59f7"
+    },
+    {
+      "name": "name_color_1",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "name_color_2",
+      "value": "#E84026"
+    },
+    {
+      "name": "name_color_3",
+      "value": "#28AD2B"
+    },
+    {
+      "name": "background",
+      "value": "#F7F7F7"
+    },
+    {
+      "name": "divider_background",
+      "value": "#1a000000"
+    },
+    {
+      "name": "info_text",
+      "value": "#182431"
+    },
+    {
+      "name": "ten_percent_white",
+      "value": "#1a000000"
+    },
+    {
+      "name": "harmony_blue",
+      "value": "#0A59F7"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/resources/base/element/float.json b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..a4195493f66887916b0e24a25febdd63b912ba40
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/element/float.json
@@ -0,0 +1,296 @@
+{
+  "float": [
+    {
+      "name": "common_image",
+      "value": "24vp"
+    },
+    {
+      "name": "padding_common",
+      "value": "24vp"
+    },
+    {
+      "name": "common_line_height",
+      "value": "22vp"
+    },
+    {
+      "name": "common_font_size",
+      "value": "16fp"
+    },
+    {
+      "name": "common_divider",
+      "value": "1vp"
+    },
+    {
+      "name": "title_text_size",
+      "value": "18fp"
+    },
+    {
+      "name": "title_height",
+      "value": "56vp"
+    },
+    {
+      "name": "search_margin_top",
+      "value": "24vp"
+    },
+    {
+      "name": "name_size",
+      "value": "16fp"
+    },
+    {
+      "name": "code_size",
+      "value": "14fp"
+    },
+    {
+      "name": "common_border_width",
+      "value": "1vp"
+    },
+    {
+      "name": "list_padding_bottom",
+      "value": "10vp"
+    },
+    {
+      "name": "list_margin_left",
+      "value": "16vp"
+    },
+    {
+      "name": "list_item_height_comparison",
+      "value": "64vp"
+    },
+    {
+      "name": "tab_margin",
+      "value": "0vp"
+    },
+    {
+      "name": "stack_text_size",
+      "value": "12vp"
+    },
+    {
+      "name": "row_border_radius",
+      "value": "14vp"
+    },
+    {
+      "name": "stack_row_padding_top",
+      "value": "5.5vp"
+    },
+    {
+      "name": "stack_row_padding_bottom",
+      "value": "6.5vp"
+    },
+    {
+      "name": "stack_row_padding_left",
+      "value": "8vp"
+    },
+    {
+      "name": "stack_row_padding_right",
+      "value": "8vp"
+    },
+    {
+      "name": "stack_row_margin_top",
+      "value": "8vp"
+    },
+    {
+      "name": "close_image",
+      "value": "16vp"
+    },
+    {
+      "name": "content_height",
+      "value": "45vp"
+    },
+    {
+      "name": "choose_count_size",
+      "value": "16fp"
+    },
+    {
+      "name": "choose_hints_size",
+      "value": "14fp"
+    },
+    {
+      "name": "choose_hints_lint_height",
+      "value": "19vp"
+    },
+    {
+      "name": "start_button_width_sm",
+      "value": "120vp"
+    },
+    {
+      "name": "start_button_width",
+      "value": "221vp"
+    },
+    {
+      "name": "start_button_height",
+      "value": "40vp"
+    },
+    {
+      "name": "bottom_choose_height_show",
+      "value": "175vp"
+    },
+    {
+      "name": "bottom_choose_height",
+      "value": "64vp"
+    },
+    {
+      "name": "comparison_padding_left",
+      "value": "24vp"
+    },
+    {
+      "name": "comparison_padding_right",
+      "value": "24vp"
+    },
+    {
+      "name": "comparison_padding_bottom",
+      "value": "32vp"
+    },
+    {
+      "name": "title_padding_top",
+      "value": "4vp"
+    },
+    {
+      "name": "fund_name_size",
+      "value": "14fp"
+    },
+    {
+      "name": "fund_name_line_height",
+      "value": "19vp"
+    },
+    {
+      "name": "fund_name_width",
+      "value": "96vp"
+    },
+    {
+      "name": "fund_name_height",
+      "value": "64vp"
+    },
+    {
+      "name": "fixing_width",
+      "value": "8vp"
+    },
+    {
+      "name": "fixing_height",
+      "value": "10.18vp"
+    },
+    {
+      "name": "cancel_width",
+      "value": "6.79vp"
+    },
+    {
+      "name": "cancel_height",
+      "value": "10.18vp"
+    },
+    {
+      "name": "fixing_image_padding",
+      "value": "8vp"
+    },
+    {
+      "name": "divider_fixing_width",
+      "value": "2vp"
+    },
+    {
+      "name": "divider_fixing_height",
+      "value": "20vp"
+    },
+    {
+      "name": "divider_fixing_radius",
+      "value": "1vp"
+    },
+    {
+      "name": "list_fund_name_size",
+      "value": "14vp"
+    },
+    {
+      "name": "list_name_line_height",
+      "value": "20vp"
+    },
+    {
+      "name": "list_name_margin_left",
+      "value": "12vp"
+    },
+    {
+      "name": "list_name_width",
+      "value": "96vp"
+    },
+    {
+      "name": "list_name_height",
+      "value": "64vp"
+    },
+    {
+      "name": "list_name_radius",
+      "value": "8vp"
+    },
+    {
+      "name": "divider_margin_top",
+      "value": "11.5vp"
+    },
+    {
+      "name": "divider_margin_bottom",
+      "value": "20.5vp"
+    },
+    {
+      "name": "info_margin_left",
+      "value": "24vp"
+    },
+    {
+      "name": "list_head_size",
+      "value": "14fp"
+    },
+    {
+      "name": "list_head_line_height",
+      "value": "19vp"
+    },
+    {
+      "name": "list_head_text_width",
+      "value": "60vp"
+    },
+    {
+      "name": "list_head_width",
+      "value": "96vp"
+    },
+    {
+      "name": "list_head_height",
+      "value": "56vp"
+    },
+    {
+      "name": "list_head_border",
+      "value": "1vp"
+    },
+    {
+      "name": "scroll_list_width",
+      "value": "104vp"
+    },
+    {
+      "name": "list_style_height",
+      "value": "56vp"
+    },
+    {
+      "name": "list_style_width",
+      "value": "100vp"
+    },
+    {
+      "name": "list_text_size",
+      "value": "14fp"
+    },
+    {
+      "name": "list_text_line_height",
+      "value": "19vp"
+    },
+    {
+      "name": "list_text_width",
+      "value": "80vp"
+    },
+    {
+      "name": "tab_text_size_fund",
+      "value": "16fp"
+    },
+    {
+      "name": "search_width",
+      "value": "232vp"
+    },
+    {
+      "name": "choose_tab_width",
+      "value": "300vp"
+    },
+    {
+      "name": "image_margin_right",
+      "value": "24vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/resources/base/element/string.json b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..97b9ff420b50508c4a71f2e9b0ca2938160285a2
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/element/string.json
@@ -0,0 +1,92 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "search_placeholder",
+      "value": "search..."
+    },
+    {
+      "name": "fund_popularity",
+      "value": "popularity"
+    },
+    {
+      "name": "self_selected",
+      "value": "self-selected"
+    },
+    {
+      "name": "select_fund",
+      "value": "Please select the fund from above"
+    },
+    {
+      "name": "start_comparison",
+      "value": "Start the comparison"
+    },
+    {
+      "name": "no_currency",
+      "value": "Non-monetary %d"
+    },
+    {
+      "name": "currency_bar",
+      "value": "currency %d"
+    },
+    {
+      "name": "count_choose",
+      "value": "%d funds selected"
+    },
+    {
+      "name": "max_count_choose",
+      "value": "A maximum of 10 items can be selected for a single type"
+    },
+    {
+      "name": "funding_comparison_title",
+      "value": "fund comparison"
+    },
+    {
+      "name": "table_fund_name",
+      "value": "fund name"
+    },
+    {
+      "name": "base_info",
+      "value": "base info"
+    },
+    {
+      "name": "category_fund_code",
+      "value": "fund code"
+    },
+    {
+      "name": "category_fund_type",
+      "value": "fund type"
+    },
+    {
+      "name": "category_established_time",
+      "value": "established time"
+    },
+    {
+      "name": "category_new_scale",
+      "value": "new scale"
+    },
+    {
+      "name": "category_risks_level",
+      "value": "risks level"
+    },
+    {
+      "name": "category_three_rating",
+      "value": "three year rating"
+    },
+    {
+      "name": "category_accumulated_dividends",
+      "value": "accumulated dividends"
+    },
+    {
+      "name": "category_dividends_count",
+      "value": "dividends count"
+    },
+    {
+      "name": "category_fund_manager",
+      "value": "fund manager"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_fixing.png b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_fixing.png
new file mode 100644
index 0000000000000000000000000000000000000000..47f0efbd64cf1806458077bc2e6c113e1589f34d
Binary files /dev/null and b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_fixing.png differ
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_back.svg b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_back.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5d8827cf7050dbb91a3f2fc6dae78538909975e8
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_back.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_back</title>
+    <defs>
+        <path d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_back" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_cancel.svg b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_cancel.svg
new file mode 100644
index 0000000000000000000000000000000000000000..36565c84256be091beb9bd8d8494c5e073defc3f
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_cancel.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_cancel</title>
+    <defs>
+        <path d="M19.7781746,4.22182541 C20.0710678,4.51471863 20.0710678,4.98959236 19.7781746,5.28248558 L5.28248558,19.7781746 C4.98959236,20.0710678 4.51471863,20.0710678 4.22182541,19.7781746 C3.92893219,19.4852814 3.92893219,19.0104076 4.22182541,18.7175144 L10.9395166,11.9994697 L4.22182541,5.28248558 C3.92893219,4.98959236 3.92893219,4.51471863 4.22182541,4.22182541 C4.51471863,3.92893219 4.98959236,3.92893219 5.28248558,4.22182541 L12,10.9389863 L18.7175144,4.22182541 C19.0104076,3.92893219 19.4852814,3.92893219 19.7781746,4.22182541 Z M19.7781746,18.7175144 C20.0710678,19.0104076 20.0710678,19.4852814 19.7781746,19.7781746 C19.4852814,20.0710678 19.0104076,20.0710678 18.7175144,19.7781746 L12.7072836,13.7675902 L13.767767,12.7071068 L19.7781746,18.7175144 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_cancel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_close.svg b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_close.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4e76b8417ed1a123708d76b64d3c16c8fc2f4908
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_close.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_close</title>
+    <defs>
+        <path d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M8.81801948,7.75735931 L12.0007071,10.9386327 L15.1819805,7.75735931 C15.4748737,7.46446609 15.9497475,7.46446609 16.2426407,7.75735931 C16.5355339,8.05025253 16.5355339,8.52512627 16.2426407,8.81801948 L8.81801948,16.2426407 C8.52512627,16.5355339 8.05025253,16.5355339 7.75735931,16.2426407 C7.46446609,15.9497475 7.46446609,15.4748737 7.75735931,15.1819805 L10.9400469,11.9992929 L7.75735931,8.81801948 C7.46446609,8.52512627 7.46446609,8.05025253 7.75735931,7.75735931 C8.05025253,7.46446609 8.52512627,7.46446609 8.81801948,7.75735931 Z M13.767767,12.7071068 L16.2426407,15.1819805 C16.5355339,15.4748737 16.5355339,15.9497475 16.2426407,16.2426407 C15.9497475,16.5355339 15.4748737,16.5355339 15.1819805,16.2426407 L12.7071068,13.767767 L13.767767,12.7071068 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_enlarge.svg b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_enlarge.svg
new file mode 100644
index 0000000000000000000000000000000000000000..252b8fe5c6424f8d5f2eefaee0f4e410e771235e
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_enlarge.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_enlarge</title>
+    <defs>
+        <path d="M3.28033009,3.28033009 C3.5732233,2.98743687 4.04809704,2.98743687 4.34099026,3.28033009 L10.3513979,9.29073773 C10.6442911,9.58363094 10.6442911,10.0585047 10.3513979,10.3513979 C10.0585047,10.6442911 9.58363094,10.6442911 9.29073773,10.3513979 L3.28033009,4.34099026 C2.98743687,4.04809704 2.98743687,3.5732233 3.28033009,3.28033009 Z M14.5983496,13.5376894 L20.25,19.189 L20.2512732,14.4559318 C20.2740848,14.06223 20.6005798,13.75 21,13.75 C21.159058,13.75 21.3065515,13.7995137 21.4279079,13.8839687 L21.5137968,13.9536337 L21.5463663,13.9862032 L21.5768981,14.0207115 C21.663373,14.1246827 21.7222733,14.2524021 21.7423744,14.392645 L21.75,14.5 L21.75,20 L21.7489852,20.0601624 C21.7189436,20.949402 21.0254639,21.6704075 20.1478855,21.7438396 L20,21.75 L14.5,21.75 L14.4559318,21.7487268 C14.3115745,21.7403626 14.1781706,21.6911698 14.0670956,21.6125239 L13.9881539,21.5481949 L13.9553277,21.5155916 C13.8280575,21.3811889 13.75,21.1997101 13.75,21 C13.75,20.6203042 14.0321539,20.306509 14.3982294,20.2568466 L14.5,20.25 L19.189,20.25 L13.5376894,14.5983496 C13.2447962,14.3054564 13.2447962,13.8305826 13.5376894,13.5376894 C13.8305826,13.2447962 14.3054564,13.2447962 14.5983496,13.5376894 Z M4.25,2.5 L9.7940682,2.50127317 C9.93842553,2.50963743 10.0718294,2.55883023 10.1829044,2.63747605 L10.2618461,2.70180512 L10.2946723,2.73440836 C10.4219425,2.86881108 10.5,3.05028989 10.5,3.25 C10.5,3.62969577 10.2178461,3.94349096 9.85177056,3.99315338 L9.75,4 L4.7059318,4.00127317 C4.34503848,4.02218381 4.05260411,4.29827286 4.00637125,4.65179776 L4,4.75 L4,9.75 L3.99872683,9.7940682 C3.97591522,10.18777 3.64942022,10.5 3.25,10.5 C3.09094199,10.5 2.94344853,10.4504863 2.82209211,10.3660313 L2.73620318,10.2963663 L2.7036337,10.2637968 L2.67310187,10.2292885 C2.58662698,10.1253173 2.52772672,9.9975979 2.50762561,9.85735498 L2.5,9.75 L2.50101475,4.18983756 C2.53105635,3.30059804 3.22453611,2.57959249 4.10211451,2.50616043 L4.25,2.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_enlarge" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_reduce.svg b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_reduce.svg
new file mode 100644
index 0000000000000000000000000000000000000000..142d090e8c48b30f9f694ae2571754ba110f1645
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/ic_public_reduce.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_reduce</title>
+    <defs>
+        <path d="M2.96680416,4.02746433 C2.68362252,3.7442827 2.69149532,3.27728176 2.98438854,2.98438854 C3.27728176,2.69149532 3.7442827,2.68362252 4.02746433,2.96680416 L10.7801475,9.71948734 C11.0633291,10.002669 11.0554564,10.4696699 10.7625631,10.7625631 C10.4696699,11.0554564 10.002669,11.0633291 9.71948734,10.7801475 L2.96680416,4.02746433 Z M19.75,12.5 L19.7940682,12.5012732 C19.9384255,12.5096374 20.0718294,12.5588302 20.1829044,12.6374761 L20.2618461,12.7018051 L20.2946723,12.7344084 C20.4219425,12.8688111 20.5,13.0502899 20.5,13.25 C20.5,13.6296958 20.2178461,13.943491 19.8517706,13.9931534 L19.75,14 L15.0604628,13.9994628 L21.0331756,19.9725154 C21.3163684,20.2557082 21.3085047,20.7227182 21.0156115,21.0156115 C20.7227182,21.3085047 20.2557082,21.3163684 19.9725154,21.0331756 L13.9994628,15.0604628 L13.9987268,19.7940682 C13.9759152,20.18777 13.6494202,20.5 13.25,20.5 C13.090942,20.5 12.9434485,20.4504863 12.8220921,20.3660313 L12.7362032,20.2963663 L12.7036337,20.2637968 L12.6731019,20.2292885 C12.586627,20.1253173 12.5277267,19.9975979 12.5076256,19.857355 L12.5,19.75 L12.5,14.25 L12.5010148,14.1898376 C12.5310564,13.300598 13.2245361,12.5795925 14.1021145,12.5061604 L14.25,12.5 L19.75,12.5 Z M10.75,3.5 C10.909058,3.5 11.0565515,3.54951372 11.1779079,3.63396869 L11.2637968,3.7036337 L11.2963663,3.73620318 L11.3268981,3.77071147 C11.413373,3.87468274 11.4722733,4.0024021 11.4923744,4.14264502 L11.5,4.25 L11.4989852,9.81016244 C11.4689436,10.699402 10.7754639,11.4204075 9.89788549,11.4938396 L9.75,11.5 L4.2059318,11.4987268 C4.06157447,11.4903626 3.92817057,11.4411698 3.81709563,11.3625239 L3.73815385,11.2981949 L3.70532772,11.2655916 C3.5780575,11.1311889 3.5,10.9497101 3.5,10.75 C3.5,10.3703042 3.78215388,10.056509 4.14822944,10.0068466 L4.25,10 L9.2940682,9.99872683 C9.65496152,9.97781619 9.94739589,9.70172714 9.99362875,9.34820224 L10,9.25 L10,4.25 L10.0012732,4.2059318 C10.0240848,3.81222999 10.3505798,3.5 10.75,3.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_reduce" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/icon.png b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/icon.png differ
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/setting.jpeg b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/setting.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..57e67dd49d39ad64ef090f59db3db9dfe6632106
Binary files /dev/null and b/MultiFinancialManagement/features/fundComparison/src/main/resources/base/media/setting.jpeg differ
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/resources/en_US/element/string.json b/MultiFinancialManagement/features/fundComparison/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..97b9ff420b50508c4a71f2e9b0ca2938160285a2
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/resources/en_US/element/string.json
@@ -0,0 +1,92 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "search_placeholder",
+      "value": "search..."
+    },
+    {
+      "name": "fund_popularity",
+      "value": "popularity"
+    },
+    {
+      "name": "self_selected",
+      "value": "self-selected"
+    },
+    {
+      "name": "select_fund",
+      "value": "Please select the fund from above"
+    },
+    {
+      "name": "start_comparison",
+      "value": "Start the comparison"
+    },
+    {
+      "name": "no_currency",
+      "value": "Non-monetary %d"
+    },
+    {
+      "name": "currency_bar",
+      "value": "currency %d"
+    },
+    {
+      "name": "count_choose",
+      "value": "%d funds selected"
+    },
+    {
+      "name": "max_count_choose",
+      "value": "A maximum of 10 items can be selected for a single type"
+    },
+    {
+      "name": "funding_comparison_title",
+      "value": "fund comparison"
+    },
+    {
+      "name": "table_fund_name",
+      "value": "fund name"
+    },
+    {
+      "name": "base_info",
+      "value": "base info"
+    },
+    {
+      "name": "category_fund_code",
+      "value": "fund code"
+    },
+    {
+      "name": "category_fund_type",
+      "value": "fund type"
+    },
+    {
+      "name": "category_established_time",
+      "value": "established time"
+    },
+    {
+      "name": "category_new_scale",
+      "value": "new scale"
+    },
+    {
+      "name": "category_risks_level",
+      "value": "risks level"
+    },
+    {
+      "name": "category_three_rating",
+      "value": "three year rating"
+    },
+    {
+      "name": "category_accumulated_dividends",
+      "value": "accumulated dividends"
+    },
+    {
+      "name": "category_dividends_count",
+      "value": "dividends count"
+    },
+    {
+      "name": "category_fund_manager",
+      "value": "fund manager"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/fundComparison/src/main/resources/zh_CN/element/string.json b/MultiFinancialManagement/features/fundComparison/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..979ecb5cecfe179cbc8ad28eecc5828957604998
--- /dev/null
+++ b/MultiFinancialManagement/features/fundComparison/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,92 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "search_placeholder",
+      "value": "搜索..."
+    },
+    {
+      "name": "fund_popularity",
+      "value": "热门"
+    },
+    {
+      "name": "self_selected",
+      "value": "自选"
+    },
+    {
+      "name": "select_fund",
+      "value": "请从上方选择基金"
+    },
+    {
+      "name": "start_comparison",
+      "value": "开始对比"
+    },
+    {
+      "name": "no_currency",
+      "value": "非货币 %d"
+    },
+    {
+      "name": "currency_bar",
+      "value": "货币 %d"
+    },
+    {
+      "name": "count_choose",
+      "value": "已选择%d只基金"
+    },
+    {
+      "name": "max_count_choose",
+      "value": "单类型最多选10只"
+    },
+    {
+      "name": "funding_comparison_title",
+      "value": "基金比较"
+    },
+    {
+      "name": "table_fund_name",
+      "value": "基金名称"
+    },
+    {
+      "name": "base_info",
+      "value": "基本信息"
+    },
+    {
+      "name": "category_fund_code",
+      "value": "基金代码"
+    },
+    {
+      "name": "category_fund_type",
+      "value": "基金类型"
+    },
+    {
+      "name": "category_established_time",
+      "value": "成立日期"
+    },
+    {
+      "name": "category_new_scale",
+      "value": "最新规模  (亿元)"
+    },
+    {
+      "name": "category_risks_level",
+      "value": "风险等级"
+    },
+    {
+      "name": "category_three_rating",
+      "value": "三年评级"
+    },
+    {
+      "name": "category_accumulated_dividends",
+      "value": "累计分红"
+    },
+    {
+      "name": "category_dividends_count",
+      "value": "分红次数"
+    },
+    {
+      "name": "category_fund_manager",
+      "value": "基金经理"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/Index.ets b/MultiFinancialManagement/features/home/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4afbb6428fbc6a1978c03c42d71fc9156b124e01
--- /dev/null
+++ b/MultiFinancialManagement/features/home/Index.ets
@@ -0,0 +1,3 @@
+export { AdvertisementDialog } from './src/main/ets/view/AdvertisementDialog';
+export { HomeComponent } from './src/main/ets/view/HomeComponent';
+export { AccountPage } from './src/main/ets/view/AccountPage';
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/build-profile.json5 b/MultiFinancialManagement/features/home/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiFinancialManagement/features/home/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/hvigorfile.ts b/MultiFinancialManagement/features/home/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiFinancialManagement/features/home/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiFinancialManagement/features/home/obfuscation-rules.txt b/MultiFinancialManagement/features/home/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a1dfa0bd175984dc49e641436aa67b1de1b8abeb
--- /dev/null
+++ b/MultiFinancialManagement/features/home/obfuscation-rules.txt
@@ -0,0 +1,22 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/oh-package.json5 b/MultiFinancialManagement/features/home/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..31c266be418d28dbc0529c9adc15f15eaa0d4a18
--- /dev/null
+++ b/MultiFinancialManagement/features/home/oh-package.json5
@@ -0,0 +1,14 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "home",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "packageType": "InterfaceHar",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/basic": "file:../../commons/basic"
+  }
+}
diff --git a/MultiFinancialManagement/features/home/src/main/ets/constants/HomeConstants.ets b/MultiFinancialManagement/features/home/src/main/ets/constants/HomeConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ca4de3458b043e33cf754062f2f18a5104d954ee
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/ets/constants/HomeConstants.ets
@@ -0,0 +1,154 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Home constants for home feature.
+ */
+export class HomeConstants {
+  /**
+   * Title row space.
+   */
+  static readonly TITLE_ROW_SPACE: number = 16;
+
+  /**
+   * Gps row space.
+   */
+  static readonly GPS_ROW_SPACE: number = 4;
+
+  /**
+   * List space.
+   */
+  static readonly LIST_SPACE: number = 12;
+
+  /**
+   * Row space.
+   */
+  static readonly ROW_SPACE: number = 12;
+
+  /**
+   * Main business row space.
+   */
+  static readonly MAIN_ROW_SPACE: number = 8;
+
+  /**
+   * Button row space.
+   */
+  static readonly BUTTON_ROW_SPACE: number = 4;
+
+  /**
+   * List sliding offset.
+   */
+  static readonly LIST_SLIDING_OFFSET: number = -250;
+
+  /**
+   * List sliding offset under lg power outage.
+   */
+  static readonly LIST_SLIDING_OFFSET_LG: number = -150;
+
+  /**
+   * Get business data start index.
+   */
+  static readonly BUSINESS_DATA_COUNT_START: number = 0;
+
+  /**
+   * Get business data under sm power outage.
+   */
+  static readonly BUSINESS_DATA_COUNT_SM: number = 4;
+
+  /**
+   * Get business data under md power outage.
+   */
+  static readonly BUSINESS_DATA_COUNT_MD: number = 6;
+
+  /**
+   * Get business data under lg power outage.
+   */
+  static readonly BUSINESS_DATA_COUNT_LG: number = 8;
+
+  /**
+   * Get swiper display count under sm power outage.
+   */
+  static readonly SWIPER_DISPLAY_COUNT_SM: number = 1;
+
+  /**
+   * Get swiper display count under md power outage.
+   */
+  static readonly SWIPER_DISPLAY_COUNT_MD: number = 2;
+
+  /**
+   * Get swiper display count under lg power outage.
+   */
+  static readonly SWIPER_DISPLAY_COUNT_LG: number = 4;
+
+  /**
+   * Get list lanes count under sm power outage.
+   */
+  static readonly LIST_LANES_COUNT_SM: number = 1;
+
+  /**
+   * Get list lanes count under md power outage.
+   */
+  static readonly LIST_LANES_COUNT_MD: number = 2;
+
+  /**
+   * Get list lanes count under lg power outage.
+   */
+  static readonly LIST_LANES_COUNT_LG: number = 4;
+
+  /**
+   * Get swiper item space under sm power outage.
+   */
+  static readonly SWIPER_SPACE_SM: number = 13;
+
+  /**
+   * Get swiper item space under md power outage.
+   */
+  static readonly SWIPER_SPACE_MD: number = 13;
+
+  /**
+   * Get swiper item space under lg power outage.
+   */
+  static readonly SWIPER_SPACE_LG: number = 16;
+
+  /**
+   * Get row space under md power outage.
+   */
+  static readonly BUSINESS_ROW_SPACE_MD: number = 12;
+
+  /**
+   * Get row space under lg power outage.
+   */
+  static readonly BUSINESS_ROW_SPACE_LG: number = 30;
+
+  /**
+   * Get flex height under sm power outage.
+   */
+  static readonly DEMAND_FLEX_HEIGHT_SM: string = '96vp';
+
+  /**
+   * Get flex height.
+   */
+  static readonly DEMAND_FLEX_HEIGHT: string = '48vp';
+
+  /**
+   * Get column width.
+   */
+  static readonly DEMAND_LG_WIDTH: string = '32%';
+
+  /**
+   * Get main business row width.
+   */
+  static readonly MAIN_BUSINESS_WIDTH: string = '20%';
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/ets/view/AccountComponent.ets b/MultiFinancialManagement/features/home/src/main/ets/view/AccountComponent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3f42f68575cb779a7db86b10e74f24b87fe2f112
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/ets/view/AccountComponent.ets
@@ -0,0 +1,245 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonConstants } from '@ohos/basic/Index';
+import { DemandDepositComponent } from './DemandDepositComponent';
+import { InvestmentComponent } from './InvestmentComponent';
+import { LiabilitiesComponent } from './LiabilitiesComponent';
+
+@Preview
+@Component
+export struct AccountComponent {
+  @StorageLink('breakPoint') breakPoint: string = CommonConstants.BREAK_POINT_SM;
+  @StorageProp('avoidArea') topHeight: number = 0;
+  @StorageProp('bottom') bottom: number = 0;
+  @StorageLink('pageIndexInfos') pageIndexInfos: NavPathStack = new NavPathStack();
+
+  build() {
+    GridRow({
+      breakpoints: {
+        value: CommonConstants.BREAK_POINTS_VALUE,
+        reference: BreakpointsReference.WindowSize
+      },
+      columns: {
+        sm: CommonConstants.COLUMN_SM,
+        md: CommonConstants.COLUMN_MD,
+        lg: CommonConstants.COLUMN_LG
+      },
+      direction: GridRowDirection.Row
+    }) {
+      GridCol({
+        span: {
+          sm: CommonConstants.COLUMN_SM,
+          md: CommonConstants.COLUMN_MD,
+          lg: CommonConstants.COLUMN_SM
+        }
+      }) {
+        Column() {
+          Row() {
+            Image($r('app.media.ic_public_back'))
+              .width($r('app.float.common_image_width'))
+              .height($r('app.float.common_image_height'))
+              .fillColor(Color.White)
+              .onClick(() => {
+                this.pageIndexInfos.pop();
+              })
+            Text($r('app.string.account_all_info'))
+              .fontSize($r('app.float.account_font_size'))
+              .fontColor(Color.White)
+            Image($r('app.media.ic_public_more'))
+              .width($r('app.float.common_image_width'))
+              .height($r('app.float.common_image_height'))
+              .fillColor(Color.White)
+          }
+          .justifyContent(FlexAlign.SpaceBetween)
+          .width(CommonConstants.FULL_WIDTH_PERCENT)
+          Row() {
+            Text($r('app.string.account_count'))
+              .fontSize($r('app.float.account_count_size'))
+              .fontColor(Color.White)
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            Image($r('app.media.ic_public_arrow_right'))
+              .width($r('app.float.account_image_width'))
+              .height($r('app.float.common_image_height'))
+              .margin({
+                left: $r('app.float.account_margin_left')
+              })
+              .fillColor(Color.White)
+          }
+          .margin({
+            top: this.breakPoint === CommonConstants.BREAK_POINT_LG ?
+              $r('app.float.account_margin_top_lg') : $r('app.float.account_margin_top')
+          })
+          Row() {
+            Text($r('app.string.yesterday_earnings'))
+              .fontSize($r('app.float.account_small_font_size'))
+              .fontColor(Color.White)
+          }
+          .backgroundColor($r('app.color.five_percent_white'))
+          .padding($r('app.float.account_padding'))
+          .borderRadius($r('app.float.earnings_radius'))
+          .margin({
+            top: $r('app.float.account_margin'),
+            bottom: this.breakPoint === CommonConstants.BREAK_POINT_LG ?
+              $r('app.float.account_margin_bottom_lg') : $r('app.float.account_margin')
+          })
+          Row() {
+            this.buildAccountItemInfo($r('app.string.current_period_amount'), $r('app.string.current_period'))
+            this.buildAccountItemInfo($r('app.string.investment_amount'), $r('app.string.investment_name'))
+            this.buildAccountItemInfo($r('app.string.remaining_due_amount'), $r('app.string.remaining_due_month'))
+          }
+          .width(CommonConstants.FULL_WIDTH_PERCENT)
+          .justifyContent(FlexAlign.SpaceBetween)
+        }
+        .height(this.breakPoint === CommonConstants.BREAK_POINT_LG ?
+          CommonConstants.FULL_HEIGHT_PERCENT : $r('app.float.account_top_height'))
+        .padding({
+          top: $r('app.float.account_top_padding'),
+          bottom: $r('app.float.account_padding_common'),
+          left: $r('app.float.account_padding_common'),
+          right: $r('app.float.account_padding_common')
+        })
+      }
+      .linearGradient({
+        direction: GradientDirection.Left,
+        colors: [[$r('app.color.top_start'), 0], [$r('app.color.top_end'), 1]]
+      })
+      .padding({
+        top: this.topHeight
+      })
+      GridCol({
+        span: {
+          sm: CommonConstants.COLUMN_SM,
+          md: CommonConstants.COLUMN_MD,
+          lg: CommonConstants.COLUMN_MD
+        }
+      }) {
+        Scroll() {
+          Column() {
+            if (this.breakPoint !== CommonConstants.BREAK_POINT_LG) {
+              Row() {
+                Circle()
+                  .fill($r('app.color.circle_color'))
+                  .width($r('app.float.circle_width_height'))
+                  .height($r('app.float.circle_width_height'))
+                  .margin($r('app.float.account_margin'))
+                Text($r('app.string.prompt_message'))
+                  .fontSize($r('app.float.message_font_size'))
+                  .lineHeight($r('app.float.account_lint_height'))
+              }
+              .width(CommonConstants.FULL_WIDTH_PERCENT)
+              .backgroundColor(Color.White)
+            }
+
+            Row() {
+              Text($r('app.string.current_period'))
+                .fontSize($r('app.float.account_font_size'))
+                .fontColor($r('app.color.current_period_color'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            }
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .justifyContent(this.breakPoint === CommonConstants.BREAK_POINT_LG ? FlexAlign.Start : FlexAlign.Center)
+            .margin({
+              top: $r('app.float.margin_common'),
+              bottom: $r('app.float.current_period_margin')
+            })
+            .padding({
+              left: $r('app.float.current_period_padding')
+            })
+
+            DemandDepositComponent({ breakPoint: this.breakPoint })
+            if (this.breakPoint === CommonConstants.BREAK_POINT_LG) {
+              Row() {
+                Circle()
+                  .fill($r('app.color.circle_color'))
+                  .width($r('app.float.circle_width_height'))
+                  .height($r('app.float.circle_width_height'))
+                  .margin($r('app.float.account_margin'))
+                Text($r('app.string.prompt_message'))
+                  .fontSize($r('app.float.message_font_size'))
+                  .lineHeight($r('app.float.account_lint_height'))
+              }
+              .width(CommonConstants.FULL_WIDTH_PERCENT)
+              .backgroundColor(Color.White)
+              .borderRadius($r('app.float.common_radius'))
+            }
+            Row() {
+              Text($r('app.string.investment_name'))
+                .fontSize($r('app.float.account_font_size'))
+                .fontColor($r('app.color.investment_name'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            }
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .justifyContent(this.breakPoint === CommonConstants.BREAK_POINT_LG ? FlexAlign.Start : FlexAlign.Center)
+            .margin({
+              top: $r('app.float.account_margin'),
+              bottom: $r('app.float.current_period_margin')
+            })
+            .padding({
+              left: $r('app.float.current_period_padding')
+            })
+
+            InvestmentComponent({ breakPoint: this.breakPoint })
+            Row() {
+              Text($r('app.string.liabilities_name'))
+                .fontSize($r('app.float.account_font_size'))
+                .fontColor($r('app.color.liabilities_name'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            }
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .justifyContent(this.breakPoint === CommonConstants.BREAK_POINT_LG ? FlexAlign.Start : FlexAlign.Center)
+            .margin({
+              top: $r('app.float.margin_common'),
+              bottom: $r('app.float.current_period_margin')
+            })
+            .padding({
+              left: $r('app.float.current_period_padding')
+            })
+
+            LiabilitiesComponent({ breakPoint: this.breakPoint })
+          }
+          .justifyContent(FlexAlign.Start)
+        }
+        .padding({
+          left: this.breakPoint === CommonConstants.BREAK_POINT_LG ? $r('app.float.account_content_padding') : 0,
+          right: this.breakPoint === CommonConstants.BREAK_POINT_LG ? $r('app.float.account_content_padding') : 0
+        })
+        .scrollBar(BarState.Off)
+      }
+      .backgroundColor($r('app.color.account_background'))
+      .padding({
+        bottom: this.bottom
+      })
+    }
+    .backgroundColor($r('app.color.account_background'))
+  }
+
+  @Builder
+  buildAccountItemInfo(amount: ResourceStr, name: ResourceStr) {
+    Column() {
+      Text(amount)
+        .fontSize($r('app.float.amount_font_size'))
+        .fontColor(Color.White)
+        .fontWeight(CommonConstants.FONT_WEIGHT_500);
+      Text(name)
+        .fontSize($r('app.float.account_small_font_size'))
+        .fontColor(Color.White)
+        .opacity(0.6)
+        .margin({
+          top: $r('app.float.amount_margin')
+        })
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/ets/view/AccountPage.ets b/MultiFinancialManagement/features/home/src/main/ets/view/AccountPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6c10a7cf39398e3e403b5ea07e53107367797295
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/ets/view/AccountPage.ets
@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { window } from '@kit.ArkUI';
+import { CommonConstants } from '@ohos/basic/Index';
+import { AccountComponent } from './AccountComponent';
+
+@Component
+export struct AccountPage {
+  @StorageProp('avoidArea') topHeight: number = 0;
+
+  onPageShow() {
+    window.getLastWindow(getContext(this)).then((windowStage: window.Window) => {
+      let area = windowStage.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
+      let topHeight = px2vp(area.topRect.height);
+      if (topHeight > 0) {
+        windowStage.setWindowLayoutFullScreen(true);
+      }
+    });
+  }
+
+  onPageHide() {
+    window.getLastWindow(getContext(this)).then((windowStage: window.Window) => {
+      if (this.topHeight > 0) {
+        windowStage.setWindowLayoutFullScreen(false);
+      }
+    });
+  }
+
+  build() {
+    Row() {
+      AccountComponent()
+    }
+    .height(CommonConstants.FULL_HEIGHT_PERCENT)
+
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/ets/view/AdvertisementDialog.ets b/MultiFinancialManagement/features/home/src/main/ets/view/AdvertisementDialog.ets
new file mode 100644
index 0000000000000000000000000000000000000000..408e4536d82c30e12bff5fc1e9df0f50b9f14e69
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/ets/view/AdvertisementDialog.ets
@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointUtil, CommonConstants } from '@ohos/basic';
+// [Start advertisement_dialog]
+@CustomDialog
+export struct AdvertisementDialog {
+  @StorageProp('breakPoint') currentPoint: string = CommonConstants.BREAK_POINT_SM;
+  controller: CustomDialogController = new CustomDialogController({
+    builder: AdvertisementDialog()
+  });
+
+  build() {
+    Column() {
+      // [StartExclude advertisement_dialog]
+      Row() {
+        Image($r('app.media.ic_public_close'))
+          .width($r('app.float.common_image_width'))
+          .height($r('app.float.common_image_height'))
+          .fillColor(Color.White)
+      }
+      .justifyContent(FlexAlign.End)
+      .width(CommonConstants.FULL_WIDTH_PERCENT)
+      .alignItems(VerticalAlign.Center)
+      .height($r('app.float.common_height'))
+      .onClick(() => {
+        this.controller.close();
+      })
+
+      Image($r('app.media.ic_dialog_phone'))
+        .width(new BreakpointUtil({
+          sm: $r('app.float.dialog_width_sm'),
+          md: $r('app.float.dialog_width_md'),
+          lg: $r('app.float.dialog_width_lg')
+        }).getValue(this.currentPoint))
+        .height(new BreakpointUtil({
+          sm: $r('app.float.dialog_height_sm'),
+          md: $r('app.float.dialog_height_md'),
+          lg: $r('app.float.dialog_height_md')
+        }).getValue(this.currentPoint))
+        .borderRadius($r('app.float.dialog_border_radius'))
+        .onClick(() => {
+          this.controller.close();
+        })
+      // [EndExclude advertisement_dialog]
+    }
+    .width(new BreakpointUtil({
+      sm: $r('app.float.dialog_width_sm'),
+      md: $r('app.float.dialog_width_md'),
+      lg: $r('app.float.dialog_width_lg')
+    }).getValue(this.currentPoint))
+    .height(new BreakpointUtil({
+      sm: $r('app.float.dialog_all_height_sm'),
+      md: $r('app.float.dialog_all_height_md'),
+      lg: $r('app.float.dialog_all_height_lg')
+    }).getValue(this.currentPoint))
+  }
+}
+// [End advertisement_dialog]
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/ets/view/DemandDepositComponent.ets b/MultiFinancialManagement/features/home/src/main/ets/view/DemandDepositComponent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..150837770b0753c9b0be5b1badd3d7fa4afb465e
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/ets/view/DemandDepositComponent.ets
@@ -0,0 +1,220 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonConstants } from '@ohos/basic/Index';
+import { HomeConstants } from '../constants/HomeConstants';
+
+@Component
+export struct DemandDepositComponent {
+  @Prop breakPoint: string = CommonConstants.BREAK_POINT_SM;
+
+  build() {
+    if (this.breakPoint === CommonConstants.BREAK_POINT_LG) {
+      Row({ space: HomeConstants.ROW_SPACE }) {
+        Column() {
+          Row() {
+            this.buildSavingCard()
+            this.buildImageArrowRight()
+          }
+          .justifyContent(FlexAlign.SpaceBetween)
+          .height($r('app.float.account_common_height'))
+
+          Text($r('app.string.save_card_account'))
+            .fontSize($r('app.float.account_big_font'))
+            .lineHeight($r('app.float.account_lint_height'))
+            .fontWeight(CommonConstants.FONT_WEIGHT_500)
+        }
+        .buildColumnItemStyles()
+
+        Column() {
+          Row() {
+            Text($r('app.string.current_deposit'))
+              .fontSize($r('app.float.account_font_size'))
+              .lineHeight($r('app.float.common_line_height'))
+            this.buildImageArrowRight()
+          }
+          .justifyContent(FlexAlign.SpaceBetween)
+          .height($r('app.float.account_common_height'))
+          Text($r('app.string.current_deposit_count'))
+            .fontSize($r('app.float.account_big_font'))
+            .lineHeight($r('app.float.common_line_height'))
+            .fontWeight(CommonConstants.FONT_WEIGHT_500)
+        }
+        .buildColumnItemStyles()
+        Column() {
+          Row() {
+            Text($r('app.string.day_day_treasure'))
+              .fontSize($r('app.float.account_font_size'))
+              .lineHeight($r('app.float.common_line_height'))
+            this.buildImageArrowRight()
+          }
+          .justifyContent(FlexAlign.SpaceBetween)
+          .height($r('app.float.account_common_height'))
+          Column() {
+            Text($r('app.string.day_day_count'))
+              .fontSize($r('app.float.account_big_font'))
+              .lineHeight($r('app.float.common_line_height'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            Text($r('app.string.yesterday_earnings_day'))
+              .fontSize($r('app.float.account_small_font_size'))
+              .lineHeight($r('app.float.small_line_height'))
+              .opacity(0.6)
+          }
+          .alignItems(HorizontalAlign.Start)
+        }
+        .buildColumnItemStyles()
+      }
+      .backgroundColor($r('app.color.account_background'))
+      .width(CommonConstants.FULL_WIDTH_PERCENT)
+      .margin({
+        bottom: $r('app.float.margin_common')
+      })
+      .justifyContent(FlexAlign.SpaceBetween)
+    } else {
+      Row() {
+        Column() {
+          Row() {
+            this.buildSavingCard()
+
+            Row() {
+              Text($r('app.string.save_card_account'))
+                .fontSize($r('app.float.account_font_size'))
+                .lineHeight($r('app.float.account_lint_height'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+              this.buildImageArrowRight()
+            }
+          }
+          .buildDemandRowStyles()
+
+          Flex({
+            direction: this.breakPoint === CommonConstants.BREAK_POINT_SM ? FlexDirection.Column : FlexDirection.Row
+          }) {
+            Row() {
+              Text($r('app.string.current_deposit'))
+                .fontSize($r('app.float.amount_font_size'))
+                .lineHeight($r('app.float.small_line_height'))
+              Row() {
+                Text($r('app.string.day_day_count'))
+                  .fontSize($r('app.float.account_font_size'))
+                  .lineHeight($r('app.float.account_lint_height'))
+                  .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                this.buildImageArrowRight()
+              }
+            }
+            .buildDemandRowStyles()
+
+            if (this.breakPoint === CommonConstants.BREAK_POINT_MD) {
+              Divider()
+                .vertical(true)
+                .height($r('app.float.divider_height'))
+                .width($r('app.float.divider_width'))
+                .color($r('app.color.divider_color'))
+                .margin({
+                  left: $r('app.float.divider_margin'),
+                  right: $r('app.float.divider_margin')
+                })
+            }
+            Row() {
+              Text($r('app.string.day_day_treasure'))
+                .fontSize($r('app.float.amount_font_size'))
+                .lineHeight($r('app.float.small_line_height'))
+              Row() {
+                Column() {
+                  Text($r('app.string.day_day_count'))
+                    .fontSize($r('app.float.account_font_size'))
+                    .lineHeight($r('app.float.account_lint_height'))
+                    .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                  Text($r('app.string.yesterday_earnings_day'))
+                    .fontSize($r('app.float.account_small_font_size'))
+                    .lineHeight($r('app.float.small_line_height'))
+                    .opacity(0.6)
+                }
+
+                this.buildImageArrowRight()
+              }
+            }
+            .buildDemandRowStyles()
+          }
+          .flexBasis(this.breakPoint === CommonConstants.BREAK_POINT_SM ?
+            HomeConstants.DEMAND_FLEX_HEIGHT_SM : HomeConstants.DEMAND_FLEX_HEIGHT)
+        }
+      }
+      .margin({
+        right: this.breakPoint === CommonConstants.BREAK_POINT_MD ?
+          $r('app.float.margin_common') : $r('app.float.account_padding_common'),
+        left: this.breakPoint === CommonConstants.BREAK_POINT_MD ?
+          $r('app.float.margin_common') : $r('app.float.account_padding_common')
+      })
+      .padding({
+        top: $r('app.float.account_item_padding_tb'),
+        bottom: $r('app.float.account_item_padding_tb'),
+        right: $r('app.float.account_item_padding_rl'),
+        left: $r('app.float.account_item_padding_rl')
+      })
+      .backgroundColor(Color.White)
+      .borderRadius($r('app.float.common_radius'))
+      .justifyContent(FlexAlign.SpaceBetween)
+    }
+  }
+
+  @Builder
+  buildSavingCard() {
+    Row() {
+      Text($r('app.string.saving_card'))
+        .fontSize($r('app.float.account_font_size'))
+        .lineHeight($r('app.float.common_line_height'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500);
+      this.buildImageUpwards();
+    }
+  }
+
+  @Builder
+  buildImageUpwards() {
+    Image($r('app.media.ic_public_upwards'))
+      .width($r('app.float.image_account'))
+      .height($r('app.float.image_account'))
+      .margin({
+        right: $r('app.float.current_period_margin')
+      })
+  }
+
+  @Builder
+  buildImageArrowRight() {
+    Image($r('app.media.ic_public_arrow_right'))
+      .width($r('app.float.image_arrow'))
+      .height($r('app.float.common_image_height'))
+      .fillColor($r('app.color.image_arrow'))
+      .margin({
+        left:$r('app.float.image_arrow_margin')
+      })
+  }
+}
+
+@Extend(Row)
+function buildDemandRowStyles() {
+  .width(CommonConstants.FULL_WIDTH_PERCENT)
+  .justifyContent(FlexAlign.SpaceBetween)
+  .height($r('app.float.account_common_height'))
+}
+
+@Extend(Column)
+function buildColumnItemStyles() {
+  .width(HomeConstants.DEMAND_LG_WIDTH)
+  .backgroundColor(Color.White)
+  .alignItems(HorizontalAlign.Start)
+  .height($r('app.float.column_item_height'))
+  .padding($r('app.float.account_padding_common'))
+  .borderRadius($r('app.float.common_radius'))
+}
diff --git a/MultiFinancialManagement/features/home/src/main/ets/view/HomeComponent.ets b/MultiFinancialManagement/features/home/src/main/ets/view/HomeComponent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..61d21abd07b93c2e207d39268c5fca0cd263ed5f
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/ets/view/HomeComponent.ets
@@ -0,0 +1,296 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointUtil, BusinessInfo, CommonConstants, RouterConstants } from '@ohos/basic';
+import { HomeConstants } from '../constants/HomeConstants';
+import HomeViewModel from '../viewmodel/HomeViewModel';
+
+@Component
+export struct HomeComponent {
+  @Prop currentPoint: string = CommonConstants.BREAK_POINT_SM;
+  @Link scrollY: number;
+  @StorageLink('pageIndexInfos') pageIndexInfos: NavPathStack = new NavPathStack();
+  private offsetValue: number = 0;
+
+  build() {
+    Row() {
+      Column() {
+        Row({ space: HomeConstants.TITLE_ROW_SPACE }) {
+          Row({ space: HomeConstants.GPS_ROW_SPACE }) {
+            Image($r('app.media.ic_public_gps'))
+              .width($r('app.float.common_image_width'))
+              .height($r('app.float.common_image_height'))
+              .fillColor(this.scrollY < HomeConstants.LIST_SLIDING_OFFSET ||
+                (this.currentPoint === CommonConstants.BREAK_POINT_LG &&
+                  this.scrollY < HomeConstants.LIST_SLIDING_OFFSET_LG) ? Color.Black : Color.White)
+            Text($r('app.string.gps_location'))
+              .fontSize($r('app.float.location_size'))
+              .fontColor(this.scrollY < HomeConstants.LIST_SLIDING_OFFSET ||
+                (this.currentPoint === CommonConstants.BREAK_POINT_LG &&
+                  this.scrollY < HomeConstants.LIST_SLIDING_OFFSET_LG) ? Color.Black : Color.White)
+              .lineHeight($r('app.float.location_text_height'))
+              .fontWeight(FontWeight.Normal)
+          }
+          .width('15%')
+
+          Blank()
+
+          Search({ placeholder: $r('app.string.search_placeholder') })
+            .width(this.currentPoint === CommonConstants.BREAK_POINT_SM ?
+              $r('app.float.search_width_sm') : $r('app.float.search_width'))
+            .borderColor(this.scrollY < HomeConstants.LIST_SLIDING_OFFSET ||
+              (this.currentPoint === CommonConstants.BREAK_POINT_LG &&
+                this.scrollY < HomeConstants.LIST_SLIDING_OFFSET_LG) ?
+              $r('app.color.five_percent_black') : $r('app.color.five_percent_white'))
+            .placeholderColor(this.scrollY < HomeConstants.LIST_SLIDING_OFFSET ||
+              (this.currentPoint === CommonConstants.BREAK_POINT_LG &&
+                this.scrollY < HomeConstants.LIST_SLIDING_OFFSET_LG) ?
+                $r('app.color.sixty_percent_black_home') : $r('app.color.sixty_percent_white_home'))
+            .enableKeyboardOnFocus(false)
+            .searchIcon({
+              color: this.scrollY < HomeConstants.LIST_SLIDING_OFFSET ||
+                (this.currentPoint === CommonConstants.BREAK_POINT_LG &&
+                  this.scrollY < HomeConstants.LIST_SLIDING_OFFSET_LG) ?
+                  $r('app.color.sixty_percent_black_home') : $r('app.color.sixty_percent_white_home')
+            })
+
+          Image($r('app.media.ic_public_comments'))
+            .width($r('app.float.common_image_width'))
+            .height($r('app.float.common_image_height'))
+            .fillColor(this.scrollY < HomeConstants.LIST_SLIDING_OFFSET ||
+              (this.currentPoint === CommonConstants.BREAK_POINT_LG &&
+                this.scrollY < HomeConstants.LIST_SLIDING_OFFSET_LG) ? Color.Black : Color.White)
+
+          Image($r('app.media.ic_public_add_norm'))
+            .width($r('app.float.common_image_width'))
+            .height($r('app.float.common_image_height'))
+            .fillColor(this.scrollY < HomeConstants.LIST_SLIDING_OFFSET ||
+              (this.currentPoint === CommonConstants.BREAK_POINT_LG &&
+                this.scrollY < HomeConstants.LIST_SLIDING_OFFSET_LG) ? Color.Black : Color.White)
+        }
+        .width(CommonConstants.FULL_WIDTH_PERCENT)
+
+        Scroll() {
+          Column() {
+            this.buildMainBusiness()
+
+            Column() {
+              if (this.currentPoint === CommonConstants.BREAK_POINT_SM) {
+                this.buildButtonBusiness(HomeViewModel.getPhoneBusiness().slice(HomeConstants.BUSINESS_DATA_COUNT_START,
+                    HomeConstants.BUSINESS_DATA_COUNT_SM))
+                this.buildButtonBusiness(HomeViewModel.getPhoneBusiness().slice(HomeConstants.BUSINESS_DATA_COUNT_SM))
+              }
+              if (this.currentPoint === CommonConstants.BREAK_POINT_MD) {
+                this.buildButtonBusiness(HomeViewModel.getFoldBusiness().slice(HomeConstants.BUSINESS_DATA_COUNT_START,
+                  HomeConstants.BUSINESS_DATA_COUNT_MD))
+                this.buildButtonBusiness(HomeViewModel.getFoldBusiness().slice(HomeConstants.BUSINESS_DATA_COUNT_MD))
+              }
+              if (this.currentPoint === CommonConstants.BREAK_POINT_LG) {
+                this.buildButtonBusiness(HomeViewModel.getTabletBusiness().slice(HomeConstants.BUSINESS_DATA_COUNT_START,
+                  HomeConstants.BUSINESS_DATA_COUNT_LG))
+                this.buildButtonBusiness(HomeViewModel.getTabletBusiness().slice(HomeConstants.BUSINESS_DATA_COUNT_LG))
+              }
+            }
+            .backgroundColor(Color.White)
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .justifyContent(FlexAlign.SpaceBetween)
+            .borderRadius($r('app.float.business_border_radius'))
+            .padding(this.currentPoint === CommonConstants.BREAK_POINT_LG ?
+              $r('app.float.business_padding_lg') : $r('app.float.business_padding'))
+            .margin({
+              top: $r('app.float.business_margin_top'),
+              bottom: this.currentPoint === CommonConstants.BREAK_POINT_LG ?
+                $r('app.float.business_margin_bottom_lg') : $r('app.float.business_margin_bottom')
+            })
+            .height(new BreakpointUtil({
+              sm: $r('app.float.business_width_sm'),
+              md: $r('app.float.business_width_md'),
+              lg: $r('app.float.business_width_lg')
+            }).getValue(this.currentPoint))
+
+            Swiper() {
+              ForEach(HomeViewModel.getSwiperBusiness(), (item: BusinessInfo) => {
+                Image(item.icon)
+                  .width(CommonConstants.FULL_WIDTH_PERCENT)
+                  .borderRadius($r('app.float.swiper_image_border_radius'))
+                  .height(new BreakpointUtil({
+                    sm: $r('app.float.swiper_image_height_sm'),
+                    md: $r('app.float.swiper_image_height_md'),
+                    lg: $r('app.float.swiper_image_height_lg')
+                  }).getValue(this.currentPoint))
+              }, (item: BusinessInfo, index: number) => index + JSON.stringify(item))
+            }
+            .autoPlay(true)
+            .loop(true)
+            .itemSpace(new BreakpointUtil({
+              sm: HomeConstants.SWIPER_SPACE_SM,
+              md: HomeConstants.SWIPER_SPACE_MD,
+              lg: HomeConstants.SWIPER_SPACE_LG
+            }).getValue(this.currentPoint))
+            .displayCount(new BreakpointUtil({
+              sm: HomeConstants.SWIPER_DISPLAY_COUNT_SM,
+              md: HomeConstants.SWIPER_DISPLAY_COUNT_MD,
+              lg: HomeConstants.SWIPER_DISPLAY_COUNT_LG
+            }).getValue(this.currentPoint))
+            .indicator(this.currentPoint === CommonConstants.BREAK_POINT_SM ? true : false)
+
+            Row() {
+              Text($r('app.string.home_fortune_picks'))
+                .fontColor($r('app.color.pick_text'))
+                .fontSize($r('app.float.pick_size'))
+                .lineHeight($r('app.float.pick_text_height'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                .fontFamily(CommonConstants.FONT_FAMILY_HEI_TI)
+            }
+            .justifyContent(FlexAlign.Start)
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .margin({
+              top: $r('app.float.pick_margin_top'),
+              bottom: $r('app.float.pick_margin_bottom')
+            })
+
+            List({ space: HomeConstants.LIST_SPACE }) {
+              ForEach(HomeViewModel.getListBusiness(), (item: BusinessInfo) => {
+                ListItem() {
+                  Image(item.icon)
+                    .height(new BreakpointUtil({
+                      sm: $r('app.float.list_image_height_sm'),
+                      md: $r('app.float.list_image_height_md'),
+                      lg: $r('app.float.list_image_height_lg')
+                    }).getValue(this.currentPoint))
+                    .width(CommonConstants.FULL_WIDTH_PERCENT)
+                    .borderRadius($r('app.float.list_image_radius'))
+                    .onClick(() => {
+                      this.pageIndexInfos.pushPathByName(RouterConstants.FUNDING_URL, null);
+                    })
+                }
+              }, (item: BusinessInfo, index: number) => index + JSON.stringify(item))
+            }
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .lanes(new BreakpointUtil({
+              sm: HomeConstants.LIST_LANES_COUNT_SM,
+              md: HomeConstants.LIST_LANES_COUNT_MD,
+              lg: HomeConstants.LIST_LANES_COUNT_LG
+            }).getValue(this.currentPoint), $r('app.float.list_lanes_space'))
+          }
+        }
+        .padding({
+          top: $r('app.float.scroll_margin_top'),
+          bottom: $r('app.float.common_height')
+        })
+        .scrollBar(BarState.Off)
+        .onWillScroll((xOffset: number, yOffset: number) => {
+          this.offsetValue = this.offsetValue - yOffset;
+          if (this.offsetValue > 0) {
+            this.offsetValue = 0;
+          }
+          this.scrollY = vp2px(this.offsetValue);
+        })
+      }
+      .height(CommonConstants.FULL_HEIGHT_PERCENT)
+    }
+    .alignItems(VerticalAlign.Top)
+    .padding({
+      top: $r('app.float.content_padding_top'),
+      left: $r('app.float.padding_common'),
+      right: $r('app.float.padding_common')
+    })
+  }
+
+  @Builder
+  buildMainBusiness() {
+    Row() {
+      ForEach(HomeViewModel.getMainBusiness(), (item: BusinessInfo) => {
+        if (this.currentPoint === CommonConstants.BREAK_POINT_SM) {
+          Column({ space: HomeConstants.MAIN_ROW_SPACE }) {
+            Image(item.icon)
+              .width($r('app.float.main_image'))
+              .height($r('app.float.main_image'))
+            Text(item.text)
+              .fontSize($r('app.float.main_business_size'))
+              .fontColor(Color.White)
+          }
+          .onClick(() => {
+            if (item.router) {
+              this.pageIndexInfos.pushPathByName(item.router, null);
+            }
+          })
+        } else {
+          Row() {
+            Image(item.iconBig)
+              .width($r('app.float.main_image_big'))
+              .height($r('app.float.main_image_big'))
+            Text(item.text)
+              .fontSize($r('app.float.main_business_size'))
+              .fontColor(Color.White)
+              .margin({
+                left: new BreakpointUtil({
+                  md: HomeConstants.BUSINESS_ROW_SPACE_MD,
+                  lg: HomeConstants.BUSINESS_ROW_SPACE_LG
+                }).getValue(this.currentPoint)
+              })
+          }
+          .width(HomeConstants.MAIN_BUSINESS_WIDTH)
+          .height(new BreakpointUtil({
+            md: $r('app.float.business_row_height_md'),
+            lg: $r('app.float.business_row_height_lg')
+          }).getValue(this.currentPoint))
+          .alignSelf(ItemAlign.Center)
+          .justifyContent(FlexAlign.Center)
+          .borderRadius($r('app.float.business_row_radius'))
+          .backgroundColor($r('app.color.business_background'))
+          .onClick(() => {
+            if (item.router) {
+              this.pageIndexInfos.pushPathByName(item.router, null);
+            }
+          })
+        }
+      }, (item: BusinessInfo, index: number) => index + JSON.stringify(item))
+    }
+    .justifyContent(FlexAlign.SpaceBetween)
+    .padding({
+      left: new BreakpointUtil({
+        sm: $r('app.float.main_padding_left_sm'),
+        md: $r('app.float.main_padding_left_md'),
+        lg: $r('app.float.main_padding_left_lg')
+      }).getValue(this.currentPoint),
+      right: new BreakpointUtil({
+        sm: $r('app.float.main_padding_left_sm'),
+        md: $r('app.float.main_padding_left_md'),
+        lg: $r('app.float.main_padding_left_lg')
+      }).getValue(this.currentPoint)
+    })
+    .width(CommonConstants.FULL_WIDTH_PERCENT)
+  }
+
+  @Builder
+  buildButtonBusiness(list: BusinessInfo[]) {
+    Row() {
+      ForEach(list, (item: BusinessInfo) => {
+        Column({ space: HomeConstants.BUTTON_ROW_SPACE }) {
+          Image(item.icon)
+            .width($r('app.float.common_image_width'))
+            .height($r('app.float.common_image_height'))
+          Text(item.text)
+            .fontSize($r('app.float.button_text_size'))
+            .fontColor(Color.Black)
+        }
+        .width($r('app.float.button_business_width'))
+      }, (item: BusinessInfo, index?: number) => index + JSON.stringify(item))
+    }
+    .justifyContent(FlexAlign.SpaceBetween)
+    .width(CommonConstants.FULL_WIDTH_PERCENT)
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/ets/view/InvestmentComponent.ets b/MultiFinancialManagement/features/home/src/main/ets/view/InvestmentComponent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..767a0e73c5209c260ff2fe6f28b17cfe2e464c5b
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/ets/view/InvestmentComponent.ets
@@ -0,0 +1,253 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointUtil, CommonConstants } from '@ohos/basic/Index';
+
+@Component
+export struct InvestmentComponent {
+  @Prop breakPoint: string = CommonConstants.BREAK_POINT_SM;
+
+  build() {
+    Flex({
+      direction: this.breakPoint === CommonConstants.BREAK_POINT_SM ? FlexDirection.Column : FlexDirection.Row
+    }) {
+      Column() {
+        Row() {
+          Row() {
+            Text($r('app.string.investment_wealth'))
+              .buildFontSixteen()
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            this.buildImageUpwards()
+          }
+          Row() {
+            if (this.breakPoint !== CommonConstants.BREAK_POINT_LG) {
+              Text($r('app.string.investment_wealth_count'))
+                .buildFontSixteen()
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            }
+            this.buildImageArrowRight()
+          }
+        }
+        .buildDemandRowStyles()
+        if (this.breakPoint === CommonConstants.BREAK_POINT_LG) {
+          Row() {
+            Text($r('app.string.investment_wealth_count'))
+              .fontSize($r('app.float.account_big_font'))
+              .lineHeight($r('app.float.common_line_height'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          }
+          .width(CommonConstants.FULL_WIDTH_PERCENT)
+          .justifyContent(FlexAlign.Start)
+          .margin({
+            bottom: '40vp'
+          })
+        }
+        Row() {
+          Text($r('app.string.half_year_treasure'))
+            .fontSize($r('app.float.amount_font_size'))
+            .lineHeight($r('app.float.common_line_height'))
+            .fontWeight(this.breakPoint === CommonConstants.BREAK_POINT_LG ? CommonConstants.FONT_WEIGHT_500 : FontWeight.Normal)
+          this.buildImageArrowRight()
+        }
+        .buildDemandRowStyles()
+
+        Row() {
+          Text() {
+            Span($r('app.string.earnings_holding_positions'))
+              .buildSpanFont()
+              .opacity(0.6)
+            Span($r('app.string.earnings_holding_positions_count'))
+              .fontSize($r('app.float.amount_font_size'))
+              .fontColor($r('app.color.earnings_holding_positions'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          }
+
+          Text($r('app.string.investment_wealth_count'))
+            .buildFontSixteen()
+            .fontWeight(CommonConstants.FONT_WEIGHT_500)
+        }
+        .buildHalfRowHeight()
+
+        Row() {
+          Text() {
+            Span($r('app.string.last_redemption_date'))
+              .buildSpanFont()
+              .opacity(0.6)
+            Span($r('app.string.last_date'))
+              .buildSpanFont()
+              .opacity(0.6)
+          }
+          Text($r('app.string.position_amount'))
+            .fontSize($r('app.float.account_small_font_size'))
+            .lineHeight($r('app.float.small_line_height'))
+            .opacity(0.6)
+        }
+        .buildHalfRowHeight()
+      }
+      .margin({
+        right: $r('app.float.account_margin'),
+        left: this.breakPoint === CommonConstants.BREAK_POINT_SM ? $r('app.float.account_margin') : 0
+      })
+      .padding({
+        top: $r('app.float.account_item_padding_tb'),
+        bottom: $r('app.float.account_item_padding_tb'),
+        right: $r('app.float.account_item_padding_rl'),
+        left: $r('app.float.account_item_padding_rl')
+      })
+      .backgroundColor(Color.White)
+      .borderRadius($r('app.float.common_radius'))
+      Column() {
+        Row() {
+          Row() {
+            Text($r('app.string.fund_name'))
+              .buildFontSixteen()
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            this.buildImageUpwards()
+          }
+          Row() {
+            if (this.breakPoint !== CommonConstants.BREAK_POINT_LG) {
+              Text($r('app.string.investment_wealth_count'))
+                .buildFontSixteen()
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            }
+            this.buildImageArrowRight()
+          }
+        }
+        .buildDemandRowStyles()
+        if (this.breakPoint === CommonConstants.BREAK_POINT_LG) {
+          Row() {
+            Text($r('app.string.investment_wealth_count'))
+              .fontSize($r('app.float.account_big_font'))
+              .lineHeight($r('app.float.common_line_height'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          }
+          .width(CommonConstants.FULL_WIDTH_PERCENT)
+          .justifyContent(FlexAlign.Start)
+          .margin({
+            bottom: '40vp'
+          })
+        }
+        Row() {
+          Text($r('app.string.exponent_c'))
+            .fontSize($r('app.float.amount_font_size'))
+            .lineHeight($r('app.float.common_line_height'))
+            .fontWeight(this.breakPoint === CommonConstants.BREAK_POINT_LG ? CommonConstants.FONT_WEIGHT_500 : FontWeight.Normal)
+          this.buildImageArrowRight()
+        }
+        .buildDemandRowStyles()
+        Row() {
+          Text() {
+            Span($r('app.string.yesterday_earnings_exponent'))
+              .buildSpanFont()
+              .opacity(0.6)
+            Span($r('app.string.yesterday_exponent_count'))
+              .fontSize($r('app.float.amount_font_size'))
+              .fontColor($r('app.color.yesterday_earnings_exponent'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          }
+          Text($r('app.string.investment_wealth_count'))
+            .buildFontSixteen()
+            .fontWeight(CommonConstants.FONT_WEIGHT_500)
+        }
+        .buildHalfRowHeight()
+        Row() {
+          Text() {
+            Span($r('app.string.earnings_holding_positions'))
+              .buildSpanFont()
+              .opacity(0.6)
+            Span($r('app.string.investment_holding_count'))
+              .fontSize($r('app.float.amount_font_size'))
+              .fontColor($r('app.color.earnings_holding_positions'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          }
+          Text($r('app.string.position_amount'))
+            .fontSize($r('app.float.account_small_font_size'))
+            .lineHeight($r('app.float.small_line_height'))
+            .opacity(0.6)
+        }
+        .buildHalfRowHeight()
+      }
+      .margin({
+        top: this.breakPoint === CommonConstants.BREAK_POINT_SM ? $r('app.float.investment_margin_top') : 0,
+        right: this.breakPoint === CommonConstants.BREAK_POINT_SM ? $r('app.float.account_padding_common') : 0,
+        left: this.breakPoint === CommonConstants.BREAK_POINT_SM ? $r('app.float.account_padding_common') : 0
+      })
+      .padding({
+        top: $r('app.float.account_item_padding_tb'),
+        bottom: $r('app.float.account_item_padding_tb'),
+        right: $r('app.float.account_item_padding_rl'),
+        left: $r('app.float.account_item_padding_rl')
+      })
+      .backgroundColor(Color.White)
+      .borderRadius($r('app.float.common_radius'))
+    }
+    .height(new BreakpointUtil({
+      sm: $r('app.float.investment_flex_height_sm'),
+      md: $r('app.float.investment_flex_height'),
+      lg: $r('app.float.investment_flex_height_lg'),
+    }).getValue(this.breakPoint))
+    .margin({
+      left: this.breakPoint === CommonConstants.BREAK_POINT_MD ? $r('app.float.margin_common') : 0,
+      right: this.breakPoint === CommonConstants.BREAK_POINT_MD ? $r('app.float.margin_common') : 0
+    })
+  }
+
+  @Builder
+  buildImageUpwards() {
+    Image($r('app.media.ic_public_upwards'))
+      .width($r('app.float.image_account'))
+      .height($r('app.float.image_account'))
+      .margin({
+        right: $r('app.float.current_period_margin')
+      })
+  }
+
+  @Builder
+  buildImageArrowRight() {
+    Image($r('app.media.ic_public_arrow_right'))
+      .width($r('app.float.image_arrow'))
+      .height($r('app.float.common_image_height'))
+      .fillColor($r('app.color.image_arrow'))
+      .margin({
+        left:$r('app.float.image_arrow_margin')
+      })
+  }
+}
+
+@Extend(Row)
+function buildHalfRowHeight() {
+  .width(CommonConstants.FULL_WIDTH_PERCENT)
+  .justifyContent(FlexAlign.SpaceBetween)
+  .height($r('app.float.investment_row_height'))
+}
+
+@Extend(Span)
+function buildSpanFont() {
+  .fontSize($r('app.float.account_small_font_size'))
+  .lineHeight($r('app.float.small_line_height'))
+}
+
+@Extend(Text)
+function buildFontSixteen() {
+  .fontSize($r('app.float.account_font_size'))
+  .lineHeight($r('app.float.common_line_height'))
+}
+
+@Extend(Row)
+function buildDemandRowStyles() {
+  .width(CommonConstants.FULL_WIDTH_PERCENT)
+  .justifyContent(FlexAlign.SpaceBetween)
+  .height($r('app.float.account_common_height'))
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/ets/view/LiabilitiesComponent.ets b/MultiFinancialManagement/features/home/src/main/ets/view/LiabilitiesComponent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f274054fbda3684cd032d492187480cc706f8a47
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/ets/view/LiabilitiesComponent.ets
@@ -0,0 +1,162 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointUtil, CommonConstants } from '@ohos/basic/Index';
+
+@Component
+export struct LiabilitiesComponent {
+  @Prop breakPoint: string = CommonConstants.BREAK_POINT_SM;
+
+  build() {
+    Column() {
+      Row() {
+        Text($r('app.string.credit_card_account'))
+          .fontSize($r('app.float.account_font_size'))
+          .lineHeight($r('app.float.common_line_height'))
+          .fontWeight(CommonConstants.FONT_WEIGHT_500)
+        Image($r('app.media.ic_public_more_list'))
+          .width($r('app.float.common_image_width'))
+          .height($r('app.float.common_image_height'))
+      }
+      .buildRowStyles()
+
+      Flex({
+        direction: this.breakPoint === CommonConstants.BREAK_POINT_SM ? FlexDirection.Column : FlexDirection.Row
+      }) {
+        if (this.breakPoint !== CommonConstants.BREAK_POINT_SM) {
+          Column() {
+            Row() {
+              Text($r('app.string.remaining_available_count'))
+                .fontSize(this.breakPoint === CommonConstants.BREAK_POINT_LG ?
+                $r('app.float.account_big_font') : $r('app.float.account_font_size'))
+                .lineHeight($r('app.float.common_line_height'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+              this.buildImageArrowRight()
+            }
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .justifyContent(FlexAlign.SpaceBetween)
+            Row() {
+              Text($r('app.string.remaining_available_amount'))
+                .fontSize($r('app.float.account_small_font_size'))
+                .lineHeight($r('app.float.small_line_height'))
+                .opacity(0.6)
+            }
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .justifyContent(FlexAlign.Start)
+          }
+          Divider()
+            .vertical(true)
+            .height($r('app.float.liabilities_divider_height'))
+            .width($r('app.float.divider_width'))
+            .color($r('app.color.divider_color'))
+            .margin({
+              left: $r('app.float.divider_margin'),
+              right: $r('app.float.divider_margin')
+            })
+          Column() {
+            Row() {
+              Text($r('app.string.remaining_due_count'))
+                .fontSize(this.breakPoint === CommonConstants.BREAK_POINT_LG ?
+                $r('app.float.account_big_font') : $r('app.float.account_font_size'))
+                .lineHeight($r('app.float.common_line_height'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+              this.buildImageArrowRight()
+            }
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .justifyContent(FlexAlign.SpaceBetween)
+            Row() {
+              Text($r('app.string.remaining_due'))
+                .fontSize($r('app.float.amount_font_size'))
+                .lineHeight($r('app.float.small_line_height'))
+                .opacity(0.6)
+            }
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .justifyContent(FlexAlign.Start)
+          }
+        } else {
+          Row() {
+            Text() {
+              Span($r('app.string.remaining_available_amount'))
+                .fontSize($r('app.float.account_small_font_size'))
+                .lineHeight($r('app.float.small_line_height'))
+                .opacity(0.6)
+              Span($r('app.string.remaining_available_count'))
+                .fontSize($r('app.float.account_font_size'))
+                .lineHeight($r('app.float.small_line_height'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            }
+            this.buildImageArrowRight()
+          }
+          .buildRowStyles()
+
+          Row() {
+            Text() {
+              Span($r('app.string.remaining_due'))
+                .fontSize($r('app.float.amount_font_size'))
+                .lineHeight($r('app.float.small_line_height'))
+                .opacity(0.6)
+              Span($r('app.string.remaining_due_count'))
+                .fontSize($r('app.float.account_font_size'))
+                .lineHeight($r('app.float.common_line_height'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            }
+            this.buildImageArrowRight()
+          }
+          .buildRowStyles()
+        }
+      }
+      .height($r('app.float.liabilities_item_height'))
+    }
+    .height($r('app.float.liabilities_height'))
+    .margin({
+      right: new BreakpointUtil({
+        sm: $r('app.float.account_margin'),
+        md: $r('app.float.margin_common'),
+        lg: 0
+      }).getValue(this.breakPoint),
+      left: new BreakpointUtil({
+        sm: $r('app.float.account_margin'),
+        md: $r('app.float.margin_common'),
+        lg: 0
+      }).getValue(this.breakPoint)
+    })
+    .padding({
+      top: $r('app.float.account_item_padding_tb'),
+      bottom: $r('app.float.account_item_padding_tb'),
+      right: $r('app.float.account_item_padding_rl'),
+      left: $r('app.float.account_item_padding_rl')
+    })
+    .backgroundColor(Color.White)
+    .borderRadius($r('app.float.common_radius'))
+  }
+
+  @Builder
+  buildImageArrowRight() {
+    Image($r('app.media.ic_public_arrow_right'))
+      .width($r('app.float.image_arrow'))
+      .height($r('app.float.common_image_height'))
+      .fillColor($r('app.color.image_arrow'))
+      .margin({
+        left:$r('app.float.image_arrow_margin')
+      })
+  }
+}
+
+@Extend(Row)
+function buildRowStyles() {
+  .width(CommonConstants.FULL_WIDTH_PERCENT)
+  .justifyContent(FlexAlign.SpaceBetween)
+  .height($r('app.float.account_common_height'))
+}
diff --git a/MultiFinancialManagement/features/home/src/main/ets/viewmodel/HomeViewModel.ets b/MultiFinancialManagement/features/home/src/main/ets/viewmodel/HomeViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a7b049780241b8500193df678d4270e2268068bf
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/ets/viewmodel/HomeViewModel.ets
@@ -0,0 +1,115 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BusinessInfo, RouterConstants } from '@ohos/basic';
+
+/**
+ * Get home data.
+ */
+class HomeViewModel {
+  getMainBusiness(): BusinessInfo[] {
+    let mainBusinessList: BusinessInfo[] = [
+      new BusinessInfo($r('app.media.ic_account'), $r('app.string.home_account'), $r('app.media.ic_public_account'), RouterConstants.ACCOUNT_PAGE_URL),
+      new BusinessInfo($r('app.media.ic_details'), $r('app.string.home_details'), $r('app.media.ic_public_details')),
+      new BusinessInfo($r('app.media.ic_transfers'), $r('app.string.home_transfers'), $r('app.media.ic_public_transfers')),
+      new BusinessInfo($r('app.media.ic_loans'), $r('app.string.home_loans'), $r('app.media.ic_public_loans'))
+    ];
+    return mainBusinessList;
+  }
+
+  getAllBusiness(): BusinessInfo[] {
+    let allBusinessList: BusinessInfo[] = [
+      new BusinessInfo($r('app.media.ic_fund_investment'), $r('app.string.home_fund_investment')),
+      new BusinessInfo($r('app.media.ic_wealth_products'), $r('app.string.home_wealth_products')),
+      new BusinessInfo($r('app.media.ic_home_cards'), $r('app.string.home_cards')),
+      new BusinessInfo($r('app.media.ic_home_notes'), $r('app.string.home_notes')),
+      new BusinessInfo($r('app.media.ic_quick_profit'), $r('app.string.home_quick_profit')),
+      new BusinessInfo($r('app.media.ic_precious_metals'), $r('app.string.home_precious_metals')),
+      new BusinessInfo($r('app.media.ic_deposits'), $r('app.string.home_deposits')),
+      new BusinessInfo($r('app.media.ic_payment'), $r('app.string.home_payment')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan')),
+      new BusinessInfo($r('app.media.ic_quick_loan'), $r('app.string.home_quick_loan'))
+    ];
+    return allBusinessList;
+  }
+
+  getPhoneBusiness(): BusinessInfo[] {
+    let allBusinessInfoList = this.getAllBusiness();
+    let phoneBusinessList = allBusinessInfoList.slice(0, 7);
+    phoneBusinessList.push(new BusinessInfo($r('app.media.ic_home_more'), $r('app.string.home_more')));
+    return phoneBusinessList;
+  }
+
+  getFoldBusiness(): BusinessInfo[] {
+    let allBusinessInfoList = this.getAllBusiness();
+    let phoneBusinessList = allBusinessInfoList.slice(0, 11);
+    phoneBusinessList.push(new BusinessInfo($r('app.media.ic_home_more'), $r('app.string.home_more')));
+    return phoneBusinessList;
+  }
+
+  getTabletBusiness(): BusinessInfo[] {
+    let allBusinessInfoList = this.getAllBusiness();
+    let phoneBusinessList = allBusinessInfoList.slice(0, 15);
+    phoneBusinessList.push(new BusinessInfo($r('app.media.ic_home_more'), $r('app.string.home_more')));
+    return phoneBusinessList;
+  }
+
+  getSwiperBusiness(): BusinessInfo[] {
+    let swiperBusinessInfoList: BusinessInfo[] = [
+      new BusinessInfo($r('app.media.ic_swiper_hand'), $r('app.string.swiper_image')),
+      new BusinessInfo($r('app.media.ic_swiper_fingerprints'), $r('app.string.swiper_image')),
+      new BusinessInfo($r('app.media.ic_swiper_book'), $r('app.string.swiper_image')),
+      new BusinessInfo($r('app.media.ic_swiper_eyeglasses'), $r('app.string.swiper_image'))
+    ];
+    return swiperBusinessInfoList;
+  }
+
+  getListBusiness(): BusinessInfo[] {
+    let listBusinessInfoList: BusinessInfo[] = [
+      new BusinessInfo($r('app.media.ic_list_paper'), $r('app.string.home_list')),
+      new BusinessInfo($r('app.media.ic_list_contracts'), $r('app.string.home_list')),
+      new BusinessInfo($r('app.media.ic_list_hello'), $r('app.string.home_list')),
+      new BusinessInfo($r('app.media.ic_list_money'), $r('app.string.home_list')),
+      new BusinessInfo($r('app.media.ic_list_business'), $r('app.string.home_list')),
+      new BusinessInfo($r('app.media.ic_list_business'), $r('app.string.home_list')),
+      new BusinessInfo($r('app.media.ic_list_business'), $r('app.string.home_list')),
+      new BusinessInfo($r('app.media.ic_list_business'), $r('app.string.home_list')),
+      new BusinessInfo($r('app.media.ic_list_business'), $r('app.string.home_list')),
+      new BusinessInfo($r('app.media.ic_list_business'), $r('app.string.home_list')),
+      new BusinessInfo($r('app.media.ic_list_business'), $r('app.string.home_list')),
+      new BusinessInfo($r('app.media.ic_list_business'), $r('app.string.home_list')),
+      new BusinessInfo($r('app.media.ic_list_business'), $r('app.string.home_list'))
+    ];
+    return listBusinessInfoList;
+  }
+}
+
+export default new HomeViewModel();
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/module.json5 b/MultiFinancialManagement/features/home/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..0d2d567275cbb9fb91c8a070cb5f5de143475e41
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/module.json5
@@ -0,0 +1,12 @@
+{
+  "module": {
+    "name": "home",
+    "type": "har",
+    "description": "$string:shared_desc",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/element/color.json b/MultiFinancialManagement/features/home/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..ecb94f3781b51e5866e41a3e7d8706dd61d6583b
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/element/color.json
@@ -0,0 +1,76 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "five_percent_white",
+      "value": "#0DFFFFFF"
+    },
+    {
+      "name": "five_percent_black",
+      "value": "#0D000000"
+    },
+    {
+      "name": "sixty_percent_white_home",
+      "value": "#99FFFFFF"
+    },
+    {
+      "name": "sixty_percent_black_home",
+      "value": "#99000000"
+    },
+    {
+      "name": "pick_text",
+      "value": "#182431"
+    },
+    {
+      "name": "business_background",
+      "value": "#33FFFFFF"
+    },
+    {
+      "name": "top_start",
+      "value": "#1C60EA"
+    },
+    {
+      "name": "top_end",
+      "value": "#83ABFB"
+    },
+    {
+      "name": "circle_color",
+      "value": "#FFF980"
+    },
+    {
+      "name": "current_period_color",
+      "value": "#1F69FF"
+    },
+    {
+      "name": "investment_name",
+      "value": "#C8974F"
+    },
+    {
+      "name": "liabilities_name",
+      "value": "#C8974F"
+    },
+    {
+      "name": "account_background",
+      "value": "#F7F7F7"
+    },
+    {
+      "name": "image_arrow",
+      "value": "#4d000000"
+    },
+    {
+      "name": "divider_color",
+      "value": "#1a000000"
+    },
+    {
+      "name": "earnings_holding_positions",
+      "value": "#E84026"
+    },
+    {
+      "name": "yesterday_earnings_exponent",
+      "value": "#28AD2B"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/element/float.json b/MultiFinancialManagement/features/home/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..031478a30136e9aab9aa43ce69028c6a7fce285b
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/element/float.json
@@ -0,0 +1,412 @@
+{
+  "float": [
+    {
+      "name": "common_image_width",
+      "value": "24vp"
+    },
+    {
+      "name": "common_image_height",
+      "value": "24vp"
+    },
+    {
+      "name": "padding_common",
+      "value": "24vp"
+    },
+    {
+      "name": "margin_common",
+      "value": "24vp"
+    },
+    {
+      "name": "dialog_width_sm",
+      "value": "280vp"
+    },
+    {
+      "name": "dialog_width_md",
+      "value": "302vp"
+    },
+    {
+      "name": "dialog_width_lg",
+      "value": "394vp"
+    },
+    {
+      "name": "dialog_margin_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "dialog_height_sm",
+      "value": "328vp"
+    },
+    {
+      "name": "dialog_height_md",
+      "value": "394vp"
+    },
+    {
+      "name": "dialog_border_radius",
+      "value": "16vp"
+    },
+    {
+      "name": "dialog_all_height_sm",
+      "value": "364vp"
+    },
+    {
+      "name": "dialog_all_height_md",
+      "value": "430vp"
+    },
+    {
+      "name": "dialog_all_height_lg",
+      "value": "430vp"
+    },
+    {
+      "name": "location_size",
+      "value": "18fp"
+    },
+    {
+      "name": "location_text_height",
+      "value": "25vp"
+    },
+    {
+      "name": "gps_width",
+      "value": "64vp"
+    },
+    {
+      "name": "business_border_radius",
+      "value": "16vp"
+    },
+    {
+      "name": "business_padding_lg",
+      "value": "24vp"
+    },
+    {
+      "name": "business_padding",
+      "value": "16vp"
+    },
+    {
+      "name": "business_margin_top",
+      "value": "36vp"
+    },
+    {
+      "name": "business_margin_bottom_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "business_margin_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "business_width_sm",
+      "value": "136vp"
+    },
+    {
+      "name": "business_width_md",
+      "value": "144vp"
+    },
+    {
+      "name": "business_width_lg",
+      "value": "160vp"
+    },
+    {
+      "name": "swiper_image_border_radius",
+      "value": "16vp"
+    },
+    {
+      "name": "pick_size",
+      "value": "16fp"
+    },
+    {
+      "name": "pick_text_height",
+      "value": "22vp"
+    },
+    {
+      "name": "pick_margin_top",
+      "value": "21vp"
+    },
+    {
+      "name": "pick_margin_bottom",
+      "value": "13vp"
+    },
+    {
+      "name": "list_image_height",
+      "value": "160vp"
+    },
+    {
+      "name": "list_image_radius",
+      "value": "16vp"
+    },
+    {
+      "name": "list_lanes_space",
+      "value": "12vp"
+    },
+    {
+      "name": "scroll_margin_top",
+      "value": "16vp"
+    },
+    {
+      "name": "content_padding_top",
+      "value": "8vp"
+    },
+    {
+      "name": "main_image",
+      "value": "48vp"
+    },
+    {
+      "name": "main_business_size",
+      "value": "16fp"
+    },
+    {
+      "name": "main_padding_left_sm",
+      "value": "0vp"
+    },
+    {
+      "name": "main_padding_left_md",
+      "value": "21vp"
+    },
+    {
+      "name": "main_padding_left_lg",
+      "value": "29vp"
+    },
+    {
+      "name": "button_text_size",
+      "value": "12fp"
+    },
+    {
+      "name": "button_business_width",
+      "value": "48vp"
+    },
+    {
+      "name": "common_height",
+      "value": "56vp"
+    },
+    {
+      "name": "search_width",
+      "value": "232vp"
+    },
+    {
+      "name": "search_width_sm",
+      "value": "152vp"
+    },
+    {
+      "name": "swiper_image_height_sm",
+      "value": "141vp"
+    },
+    {
+      "name": "swiper_image_height_md",
+      "value": "132vp"
+    },
+    {
+      "name": "swiper_image_height_lg",
+      "value": "115vp"
+    },
+    {
+      "name": "list_image_height_sm",
+      "value": "185vp"
+    },
+    {
+      "name": "list_image_height_md",
+      "value": "174vp"
+    },
+    {
+      "name": "list_image_height_lg",
+      "value": "152vp"
+    },
+    {
+      "name": "business_row_radius",
+      "value": "12vp"
+    },
+    {
+      "name": "business_row_width_md",
+      "value": "116vp"
+    },
+    {
+      "name": "business_row_width_lg",
+      "value": "222vp"
+    },
+    {
+      "name": "business_row_height_md",
+      "value": "56vp"
+    },
+    {
+      "name": "business_row_height_lg",
+      "value": "80vp"
+    },
+    {
+      "name": "account_font_size",
+      "value": "16fp"
+    },
+    {
+      "name": "account_count_size",
+      "value": "24vp"
+    },
+    {
+      "name": "account_image_width",
+      "value": "12vp"
+    },
+    {
+      "name": "account_margin_left",
+      "value": "12vp"
+    },
+    {
+      "name": "account_margin_top_lg",
+      "value": "88vp"
+    },
+    {
+      "name": "account_margin_top",
+      "value": "33vp"
+    },
+    {
+      "name": "account_small_font_size",
+      "value": "12fp"
+    },
+    {
+      "name": "account_padding",
+      "value": "8vp"
+    },
+    {
+      "name": "earnings_radius",
+      "value": "14vp"
+    },
+    {
+      "name": "account_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "account_margin_bottom_lg",
+      "value": "93vp"
+    },
+    {
+      "name": "amount_font_size",
+      "value": "14fp"
+    },
+    {
+      "name": "amount_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "account_top_height",
+      "value": "219vp"
+    },
+    {
+      "name": "account_top_padding",
+      "value": "14vp"
+    },
+    {
+      "name": "account_padding_common",
+      "value": "16vp"
+    },
+    {
+      "name": "circle_width_height",
+      "value": "8vp"
+    },
+    {
+      "name": "message_font_size",
+      "value": "14fp"
+    },
+    {
+      "name": "account_lint_height",
+      "value": "22vp"
+    },
+    {
+      "name": "current_period_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "current_period_padding",
+      "value": "16vp"
+    },
+    {
+      "name": "common_radius",
+      "value": "16vp"
+    },
+    {
+      "name": "account_content_padding",
+      "value": "32vp"
+    },
+    {
+      "name": "image_account",
+      "value": "16vp"
+    },
+    {
+      "name": "image_arrow",
+      "value": "12vp"
+    },
+    {
+      "name": "image_arrow_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "column_item_height",
+      "value": "129vp"
+    },
+    {
+      "name": "common_line_height",
+      "value": "22vp"
+    },
+    {
+      "name": "account_common_height",
+      "value": "48vp"
+    },
+    {
+      "name": "account_big_font",
+      "value": "24fp"
+    },
+    {
+      "name": "small_line_height",
+      "value": "19vp"
+    },
+    {
+      "name": "divider_height",
+      "value": "36vp"
+    },
+    {
+      "name": "divider_width",
+      "value": "1vp"
+    },
+    {
+      "name": "divider_margin",
+      "value": "18vp"
+    },
+    {
+      "name": "account_item_padding_tb",
+      "value": "4vp"
+    },
+    {
+      "name": "account_item_padding_rl",
+      "value": "12vp"
+    },
+    {
+      "name": "investment_row_height",
+      "value": "22vp"
+    },
+    {
+      "name": "investment_margin_top",
+      "value": "12vp"
+    },
+    {
+      "name": "liabilities_divider_height",
+      "value": "115vp"
+    },
+    {
+      "name": "investment_flex_height_sm",
+      "value": "304vp"
+    },
+    {
+      "name": "investment_flex_height",
+      "value": "148vp"
+    },
+    {
+      "name": "investment_flex_height_lg",
+      "value": "220vp"
+    },
+    {
+      "name": "liabilities_item_height",
+      "value": "115vp"
+    },
+    {
+      "name": "liabilities_height",
+      "value": "300vp"
+    },
+    {
+      "name": "main_image_big",
+      "value": "40"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/element/string.json b/MultiFinancialManagement/features/home/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..b73d578c75a5b89d4cd52b7d974c94102a21e946
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/element/string.json
@@ -0,0 +1,228 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "gps_location",
+      "value": "shenzhen"
+    },
+    {
+      "name": "search_placeholder",
+      "value": "search..."
+    },
+    {
+      "name": "home_account",
+      "value": "account"
+    },
+    {
+      "name": "home_details",
+      "value": "details"
+    },
+    {
+      "name": "home_transfers",
+      "value": "transfers"
+    },
+    {
+      "name": "home_loans",
+      "value": "loans"
+    },
+    {
+      "name": "home_fund_investment",
+      "value": "fundInvestment"
+    },
+    {
+      "name": "home_wealth_products",
+      "value": "wealthProducts"
+    },
+    {
+      "name": "home_cards",
+      "value": "cards"
+    },
+    {
+      "name": "home_notes",
+      "value": "notes"
+    },
+    {
+      "name": "home_quick_profit",
+      "value": "quickProfit"
+    },
+    {
+      "name": "home_precious_metals",
+      "value": "preciousMetals"
+    },
+    {
+      "name": "home_deposits",
+      "value": "deposits"
+    },
+    {
+      "name": "home_payment",
+      "value": "payment"
+    },
+    {
+      "name": "home_quick_loan",
+      "value": "quickLoan"
+    },
+    {
+      "name": "home_more",
+      "value": "more"
+    },
+    {
+      "name": "swiper_image",
+      "value": "swiper"
+    },
+    {
+      "name": "home_list",
+      "value": "homeListInfo"
+    },
+    {
+      "name": "home_fortune_picks",
+      "value": "fortunePicks"
+    },
+    {
+      "name": "account_all_info",
+      "value": "Account Overview"
+    },
+    {
+      "name": "account_count",
+      "value": "999999.99"
+    },
+    {
+      "name": "yesterday_earnings",
+      "value": "Yesterday's earnings + 333.33"
+    },
+    {
+      "name": "current_period_amount",
+      "value": "8888.8"
+    },
+    {
+      "name": "current_period",
+      "value": "current period+"
+    },
+    {
+      "name": "investment_amount",
+      "value": "1333333.2"
+    },
+    {
+      "name": "investment_name",
+      "value": "investment"
+    },
+    {
+      "name": "remaining_due_amount",
+      "value": "5555.55"
+    },
+    {
+      "name": "remaining_due_month",
+      "value": "remaining due this month"
+    },
+    {
+      "name": "prompt_message",
+      "value": "Prepare for the old as soon as possible, worry-free old age, new users enjoy 3 gifts > >"
+    },
+    {
+      "name": "liabilities_name",
+      "value": "liabilities"
+    },
+    {
+      "name": "saving_card",
+      "value": "saving card"
+    },
+    {
+      "name": "save_card_account",
+      "value": "88888.8"
+    },
+    {
+      "name": "current_deposit",
+      "value": "current deposit"
+    },
+    {
+      "name": "current_deposit_count",
+      "value": "33333.3"
+    },
+    {
+      "name": "day_day_treasure",
+      "value": "day and day treasure"
+    },
+    {
+      "name": "day_day_count",
+      "value": "33333.3"
+    },
+    {
+      "name": "yesterday_earnings_day",
+      "value": "Yesterday's earnings 1.33"
+    },
+    {
+      "name": "investment_wealth",
+      "value": "financial management"
+    },
+    {
+      "name": "investment_wealth_count",
+      "value": "66666.66"
+    },
+    {
+      "name": "half_year_treasure",
+      "value": "half a year treasure"
+    },
+    {
+      "name": "earnings_holding_positions",
+      "value": "earnings from holding positions"
+    },
+    {
+      "name": "earnings_holding_positions_count",
+      "value": "66.6"
+    },
+    {
+      "name": "last_redemption_date",
+      "value": "last redemption date:"
+    },
+    {
+      "name": "last_date",
+      "value": "2023-11-23"
+    },
+    {
+      "name": "position_amount",
+      "value": "position amount"
+    },
+    {
+      "name": "fund_name",
+      "value": "fund"
+    },
+    {
+      "name": "exponent_c",
+      "value": "XXXXXXXXX exponent C"
+    },
+    {
+      "name": "yesterday_earnings_exponent",
+      "value": "yesterday·s earnings"
+    },
+    {
+      "name": "yesterday_exponent_count",
+      "value": "-66.6"
+    },
+    {
+      "name": "investment_holding_count",
+      "value": "666.6"
+    },
+    {
+      "name": "credit_card_account",
+      "value": "credit card personal consumption account"
+    },
+    {
+      "name": "remaining_available_amount",
+      "value": "remaining available amount"
+    },
+    {
+      "name": "remaining_available_count",
+      "value": "500000.00"
+    },
+    {
+      "name": "remaining_due",
+      "value": "remaining RMB due"
+    },
+    {
+      "name": "remaining_due_count",
+      "value": "55555.55"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_account.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_account.png
new file mode 100644
index 0000000000000000000000000000000000000000..9274cc5cb07c6564a13391f04c8087bb484b5dc7
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_account.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_deposits.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_deposits.png
new file mode 100644
index 0000000000000000000000000000000000000000..22b2495c59082a514ae4c8be8802bad0267925fb
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_deposits.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_details.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_details.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f9ad39870ba85e252f9d287cf8b619d176eff80
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_details.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_dialog_phone.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_dialog_phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d681984df2706f2e5553e2b2888bcc5eaed2672
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_dialog_phone.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_fund_investment.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_fund_investment.png
new file mode 100644
index 0000000000000000000000000000000000000000..052a6e2c1f2ce12901d2b327dc1334ba90ed66c2
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_fund_investment.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_cards.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_cards.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3307a40f84bf7e5323c68cc1288b57f66c72997
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_cards.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_fold_background.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_fold_background.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ecbe63c76052be4f6f9cbb2dafd0e62238eff6d
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_fold_background.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_fortunes.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_fortunes.png
new file mode 100644
index 0000000000000000000000000000000000000000..e7fe3f2436e172ea1c31a25c6670f58be9c132c0
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_fortunes.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_mine.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_mine.png
new file mode 100644
index 0000000000000000000000000000000000000000..69e2bdd33b492ab7bc1b1d826885ae41d37a8ecf
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_mine.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_more.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_more.png
new file mode 100644
index 0000000000000000000000000000000000000000..b8a3dab6d37e77a6c9df1dc7da62c5b817564a53
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_more.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_notes.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_notes.png
new file mode 100644
index 0000000000000000000000000000000000000000..25184579608e49f12fa944c84db7f52d31848fe8
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_notes.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_phone_background.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_phone_background.png
new file mode 100644
index 0000000000000000000000000000000000000000..dba3b16cfcc0687ad7d0270fe96b339fb69abf83
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_phone_background.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_tablet_background.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_tablet_background.png
new file mode 100644
index 0000000000000000000000000000000000000000..631fd5f624d63d7e4b96e81cc32b8167f182911d
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_home_tablet_background.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_life_filled.svg b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_life_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d94b66f2c34bcd05663a92b87eafc14d112df022
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_life_filled.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="21px" height="20px" viewBox="0 0 21 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>生活</title>
+    <defs>
+        <path d="M18,2 C20.209139,2 22,3.790861 22,6 L22,18 C22,20.209139 20.209139,22 18,22 L6,22 C3.790861,22 2,20.209139 2,18 L2,6 C2,3.790861 3.790861,2 6,2 L18,2 Z M16.5,6 C16.0857864,6 15.75,6.33578644 15.75,6.75 C15.75,8.82106781 14.0710678,10.5 12,10.5 C9.92893219,10.5 8.25,8.82106781 8.25,6.75 C8.25,6.33578644 7.91421356,6 7.5,6 C7.08578644,6 6.75,6.33578644 6.75,6.75 C6.75,9.64949494 9.10050506,12 12,12 C14.8994949,12 17.25,9.64949494 17.25,6.75 C17.25,6.33578644 16.9142136,6 16.5,6 Z" id="path-1"></path>
+    </defs>
+    <g id="典型页面-1：首页（待对齐）" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="tab/ic_备份-68" transform="translate(-1.400000, -2.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="形状结合"></g>
+            <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+                <g id="Symbol/color-light/colorPrimary">
+                    <rect id="color/#000000" x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_business.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_business.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1dda6987abb61b24b3d5eb6cdb05a429785d123
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_business.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_contracts.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_contracts.png
new file mode 100644
index 0000000000000000000000000000000000000000..c2252d46a7b91c5c6e5d3ef911265b7e569ae09e
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_contracts.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_hello.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_hello.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ad303670f95b9e5e087b722262a9a38251855de
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_hello.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_money.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_money.png
new file mode 100644
index 0000000000000000000000000000000000000000..a84291e3d70d679b6ab429be1965e44fec0cd9c3
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_money.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_paper.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_paper.png
new file mode 100644
index 0000000000000000000000000000000000000000..17795c2916f5ca877c0ec954ad50d13d90ad2e8a
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_list_paper.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_loans.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_loans.png
new file mode 100644
index 0000000000000000000000000000000000000000..9482750a67a6577dc135a8a4f6122d1d9537174b
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_loans.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_payment.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_payment.png
new file mode 100644
index 0000000000000000000000000000000000000000..16d83f0e3685b71cfc1758949b8f0a36bd4f6aba
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_payment.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_precious_metals.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_precious_metals.png
new file mode 100644
index 0000000000000000000000000000000000000000..a623cd7c9b90c5ead379db794255e9c639636fb4
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_precious_metals.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_account.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_account.png
new file mode 100644
index 0000000000000000000000000000000000000000..346335f3cbfcf018e14c5369b2096ffb26cf75f7
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_account.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_add_norm.svg b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_add_norm.svg
new file mode 100644
index 0000000000000000000000000000000000000000..729f2774d24c6569215b1a0f1420ea09ecf976f4
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_add_norm.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_add_norm</title>
+    <defs>
+        <path d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M12.75,17.25 C12.75,17.6642136 12.4142136,18 12,18 C11.5857864,18 11.25,17.6642136 11.25,17.25 L11.25,12.749 L6.75,12.75 C6.33578644,12.75 6,12.4142136 6,12 C6,11.5857864 6.33578644,11.25 6.75,11.25 L11.25,11.249 L11.25,6.75 C11.25,6.33578644 11.5857864,6 12,6 C12.4142136,6 12.75,6.33578644 12.75,6.75 L12.75,17.25 Z M17.25,11.25 C17.6642136,11.25 18,11.5857864 18,12 C18,12.4142136 17.6642136,12.75 17.25,12.75 L13.75,12.75 L13.75,11.25 L17.25,11.25 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_add_norm" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_arrow_right.svg b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_arrow_right.svg
new file mode 100644
index 0000000000000000000000000000000000000000..18e4cfd5d4c9e319018d7e8686f814a9cedb684f
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_arrow_right.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="24px" viewBox="0 0 12 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_arrow_right</title>
+    <defs>
+        <path d="M4.2482689,5.78255501 L4.28033009,5.81281566 L9.23007755,10.7625631 C9.8992572,11.4317428 9.91319844,12.5080354 9.27190128,13.1941781 L9.23007755,13.2374369 L4.28033009,18.1871843 C4.15145707,18.3160574 3.98735263,18.3882262 3.81902041,18.403691 L3.7730301,18.4065028 L3.7269699,18.4065028 C3.54277571,18.4008792 3.36025866,18.3277731 3.21966991,18.1871843 C2.93723717,17.9047516 2.92715028,17.4531048 3.18940926,17.1585854 L3.21966991,17.1265242 L7.81586399,12.5303301 C8.09829674,12.2478973 8.10838362,11.7962506 7.84612464,11.5017311 L7.81586399,11.4696699 L3.21966991,6.87347584 C2.9267767,6.58058262 2.9267767,6.10570888 3.21966991,5.81281566 C3.36088629,5.67159929 3.54440617,5.59846938 3.72943689,5.59342594 L3.77570243,5.59358355 C3.94528507,5.59936249 4.11328081,5.66235298 4.2482689,5.78255501 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_arrow_right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="路径" fill-rule="nonzero"></g>
+        <g id="Symbol/color-light/colorPrimary" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <rect id="color/#000000" x="0" y="0" width="12" height="24"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_back.svg b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_back.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5d8827cf7050dbb91a3f2fc6dae78538909975e8
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_back.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_back</title>
+    <defs>
+        <path d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_back" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_cards_filled.svg b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_cards_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3a6ae14083e31e6a44e0e3793215a6bae4831441
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_cards_filled.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_cards_filled</title>
+    <defs>
+        <path d="M23,9 L23,17 C23,19.209139 21.209139,21 19,21 L5,21 C2.790861,21 1,19.209139 1,17 L1,9 L23,9 Z M10.25,11 L3.75,11 C3.33578644,11 3,11.3357864 3,11.75 C3,12.1642136 3.33578644,12.5 3.75,12.5 L3.75,12.5 L10.25,12.5 C10.6642136,12.5 11,12.1642136 11,11.75 C11,11.3357864 10.6642136,11 10.25,11 L10.25,11 Z M5,3 L19,3 C21.1421954,3 22.8910789,4.68396847 22.9951047,6.80035966 L23,7 L1,7 C1,4.790861 2.790861,3 5,3 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_cards_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="Combined-Shape"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_close.svg b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_close.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4e76b8417ed1a123708d76b64d3c16c8fc2f4908
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_close.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_close</title>
+    <defs>
+        <path d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M8.81801948,7.75735931 L12.0007071,10.9386327 L15.1819805,7.75735931 C15.4748737,7.46446609 15.9497475,7.46446609 16.2426407,7.75735931 C16.5355339,8.05025253 16.5355339,8.52512627 16.2426407,8.81801948 L8.81801948,16.2426407 C8.52512627,16.5355339 8.05025253,16.5355339 7.75735931,16.2426407 C7.46446609,15.9497475 7.46446609,15.4748737 7.75735931,15.1819805 L10.9400469,11.9992929 L7.75735931,8.81801948 C7.46446609,8.52512627 7.46446609,8.05025253 7.75735931,7.75735931 C8.05025253,7.46446609 8.52512627,7.46446609 8.81801948,7.75735931 Z M13.767767,12.7071068 L16.2426407,15.1819805 C16.5355339,15.4748737 16.5355339,15.9497475 16.2426407,16.2426407 C15.9497475,16.5355339 15.4748737,16.5355339 15.1819805,16.2426407 L12.7071068,13.767767 L13.767767,12.7071068 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_comments.svg b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_comments.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0211e560e1825ca9b607e21470d5ca8e309acd0e
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_comments.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_comments</title>
+    <defs>
+        <path d="M15.5,3 C19.6421356,3 23,6.35786438 23,10.5 C23,14.6007143 19.7089571,17.9327643 15.6240262,17.9989952 L15.5,18 L13.8105,18 L10.0303301,21.7803301 C9.7491526,22.0615076 9.30026186,22.0727547 9.00566731,21.8140714 L8.96966991,21.7803301 C8.68849242,21.4991526 8.67724532,21.0502619 8.93592862,20.7556673 L8.96966991,20.7196699 L12.9696699,16.7196699 C13.0986012,16.5907387 13.2696414,16.5135976 13.4504659,16.5016361 L13.5,16.5 L15.5,16.5 C18.8137085,16.5 21.5,13.8137085 21.5,10.5 C21.5,7.21942859 18.8671657,4.55378857 15.599221,4.50080383 L8.5,4.5 C5.1862915,4.5 2.5,7.1862915 2.5,10.5 C2.5,13.7805714 5.1328343,16.4462114 8.40077903,16.4991962 L8.5,16.5 L9.25,16.5 C9.66421356,16.5 10,16.8357864 10,17.25 C10,17.6494202 9.68777001,17.9759152 9.2940682,17.9987268 L9.25,18 L8.5,18 C4.35786438,18 1,14.6421356 1,10.5 C1,6.39928573 4.29104288,3.06723571 8.37597379,3.00100479 L8.5,3 L15.5,3 Z M7,9.25 C7.69035594,9.25 8.25,9.80964406 8.25,10.5 C8.25,11.1903559 7.69035594,11.75 7,11.75 C6.30964406,11.75 5.75,11.1903559 5.75,10.5 C5.75,9.80964406 6.30964406,9.25 7,9.25 Z M12,9.25 C12.6903559,9.25 13.25,9.80964406 13.25,10.5 C13.25,11.1903559 12.6903559,11.75 12,11.75 C11.3096441,11.75 10.75,11.1903559 10.75,10.5 C10.75,9.80964406 11.3096441,9.25 12,9.25 Z M17,9.25 C17.6903559,9.25 18.25,9.80964406 18.25,10.5 C18.25,11.1903559 17.6903559,11.75 17,11.75 C16.3096441,11.75 15.75,11.1903559 15.75,10.5 C15.75,9.80964406 16.3096441,9.25 17,9.25 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_comments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_details.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_details.png
new file mode 100644
index 0000000000000000000000000000000000000000..057c1e22ddbdd44f21463417f5d33983c63082cb
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_details.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_gps.svg b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_gps.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6120484838ca7d322a5d347fdf5a1e6aee1d3d64
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_gps.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_gps</title>
+    <defs>
+        <path d="M12,0.890443665 C17.1054507,0.890443665 21.25,4.95664638 21.25,9.97979602 C21.25,11.9360332 20.6574499,13.8475128 19.5576286,15.7794054 C18.8729064,16.982155 18.0501448,18.1145504 16.9608635,19.4075471 L16.9608635,19.4075471 L16.694253,19.7210681 L16.4170134,20.0414657 C16.3227849,20.1494899 16.226719,20.2587783 16.1287501,20.3694494 C15.9102985,20.6162244 15.6650022,20.8755327 15.3927717,21.1475453 L15.3927717,21.1475453 L15.1835472,21.3539395 C15.0406956,21.4931272 14.8911049,21.6355018 14.7347638,21.7810844 L14.7347638,21.7810844 L14.495188,22.0018672 L14.495188,22.0018672 L14.3716004,22.1140683 L14.1168206,22.3420995 C14.0302033,22.4189177 13.941895,22.4965447 13.8518942,22.5749831 L13.8518942,22.5749831 L13.576813,22.812735 C12.7041229,23.5609204 11.420977,23.5841619 10.509368,22.8615879 L10.509368,22.8615879 L10.4382537,22.8023123 L10.1073598,22.5137335 L9.90321903,22.3340223 L9.61389638,22.0766955 L9.34473731,21.8339368 L9.09562633,21.6056114 L8.86644795,21.3915843 L8.724679,21.2567766 L8.59168343,21.1282238 L8.46742704,21.005886 L8.35187559,20.8897232 L8.24499487,20.7796955 C8.22790207,20.7618666 8.21116914,20.7442916 8.19479534,20.7269698 L8.19479534,20.7269698 L8.10085655,20.6260697 L7.86894106,20.3672896 L7.61273271,20.0767393 C7.57055128,20.0285012 7.5286302,19.9803553 7.48697003,19.9322997 L7.48697003,19.9322997 L7.24014438,19.6450348 L6.99960722,19.3598463 L6.99960722,19.3598463 L6.88170517,19.2180024 L6.65065082,18.9357582 L6.42595171,18.6553632 C4.02623205,15.6274382 2.75,12.9090303 2.75,9.97979602 C2.75,4.99342455 6.70791088,0.971543045 11.7334486,0.891584596 L11.7334486,0.891584596 L11.8799375,0.890443665 Z M12,2.39041996 L11.8859001,2.39041996 L11.751346,2.39146593 C7.55083692,2.4583177 4.25,5.81250514 4.25,9.97979602 C4.25,12.896509 5.7991974,15.7221073 8.73645395,19.0830958 L8.73645395,19.0830958 L8.98797346,19.3684114 L9.21242661,19.6189224 C9.22500367,19.6326529 9.23793618,19.6466487 9.25122371,19.6609093 L9.25122371,19.6609093 L9.33520518,19.7496461 L9.42768459,19.8447124 L9.52863979,19.9460825 L9.69591626,20.1099012 L9.88213873,20.2877593 L10.0872325,20.4795705 L10.2344088,20.6151536 L10.4707886,20.8300276 L10.7258404,21.058624 L10.9994895,21.3008564 L11.4099685,21.659761 L11.4539143,21.6964471 C11.7903355,21.963019 12.2735456,21.9542667 12.6005016,21.6739567 L12.6005016,21.6739567 L12.8630218,21.4470837 L13.1154007,21.2252993 C13.1978358,21.152221 13.2785793,21.0799935 13.3576298,21.0086194 L13.3576298,21.0086194 L13.5897008,20.7970601 L13.8116053,20.5906375 L14.0233349,20.3893676 L14.2248812,20.1932664 C14.5195589,19.9029991 14.7798395,19.6302305 15.0055957,19.3752039 C15.0481588,19.3271223 15.0904304,19.279197 15.1324106,19.2314252 L15.1324106,19.2314252 L15.3807972,18.9466135 C15.4216128,18.8994442 15.4621375,18.8524226 15.5023714,18.8055459 L15.5023714,18.8055459 L15.7402879,18.5260009 L15.9712367,18.2497939 C16.1228823,18.066738 16.2698895,17.8858152 16.4122716,17.7068412 L16.4122716,17.7068412 L16.6223776,17.4398186 C18.723223,14.739479 19.75,12.4708886 19.75,9.97979602 C19.75,5.7915486 16.2833634,2.39041996 12,2.39041996 L12,2.39041996 Z M12,7.75 C13.2426407,7.75 14.25,8.75735931 14.25,10 C14.25,11.2426407 13.2426407,12.25 12,12.25 C10.7573593,12.25 9.75,11.2426407 9.75,10 C9.75,8.75735931 10.7573593,7.75 12,7.75 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_gps" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="蒙版" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_home_filled.svg b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_home_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..552138ac5580357040697ba05c977bbd60bf62bc
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_home_filled.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_home_filled</title>
+    <defs>
+        <path d="M12.5548977,4.55117487 L12.6529233,4.62758192 L12.6883166,4.65995815 L21,12.5839983 L21,19.25 C21,20.8476809 19.75108,22.1536609 18.1762728,22.2449073 L18,22.25 L6,22.25 C4.40231912,22.25 3.09633912,21.00108 3.00509269,19.4262728 L3,19.25 L3,12.5839983 L11.3117958,4.65995815 C11.6576006,4.33188693 12.1809818,4.29723756 12.5548977,4.55117487 Z M12,13.5 C10.4023191,13.5 9.09633912,14.74892 9.00509269,16.3237272 L9,16.5 L9,20.25 L15,20.25 L15,16.5 C15,14.8431458 13.6568542,13.5 12,13.5 Z M9.39893803,2.34618127 C10.9454248,1.02063659 13.259436,1.06634502 14.75299,2.48330658 L14.75299,2.48330658 L22.4382087,9.7744115 L22.5181827,9.85955793 C22.8392264,10.243763 22.8283766,10.8160918 22.475412,11.1881356 C22.0952963,11.5887982 21.4623504,11.6054546 21.0616879,11.2253389 L21.0616879,11.2253389 L13.3764692,3.93423398 L13.2633454,3.83462897 C12.4905831,3.20379726 11.3583509,3.23699892 10.6234274,3.93423398 L10.6234274,3.93423398 L2.93820874,11.2253389 L2.84897391,11.3007239 C2.44841532,11.6011159 1.87744922,11.5601794 1.52448461,11.1881356 C1.14436887,10.7874731 1.16102534,10.1545272 1.56168788,9.7744115 L1.56168788,9.7744115 L9.24690658,2.48330658 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_home_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_loans.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_loans.png
new file mode 100644
index 0000000000000000000000000000000000000000..e332235efb1098f7f171130d5ccd320b5fb76ec0
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_loans.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_more.svg b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_more.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4c34b6411bd35efcb06b4d8cd269fc351bb3350e
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_more.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_more</title>
+    <defs>
+        <path d="M6.25,8 C7.21649831,8 8,7.21649831 8,6.25 C8,5.28350169 7.21649831,4.5 6.25,4.5 C5.28350169,4.5 4.5,5.28350169 4.5,6.25 C4.5,7.21649831 5.28350169,8 6.25,8 Z M6.25,19.5 C7.21649831,19.5 8,18.7164983 8,17.75 C8,16.7835017 7.21649831,16 6.25,16 C5.28350169,16 4.5,16.7835017 4.5,17.75 C4.5,18.7164983 5.28350169,19.5 6.25,19.5 Z M17.75,19.5 C18.7164983,19.5 19.5,18.7164983 19.5,17.75 C19.5,16.7835017 18.7164983,16 17.75,16 C16.7835017,16 16,16.7835017 16,17.75 C16,18.7164983 16.7835017,19.5 17.75,19.5 Z M17.75,8 C18.7164983,8 19.5,7.21649831 19.5,6.25 C19.5,5.28350169 18.7164983,4.5 17.75,4.5 C16.7835017,4.5 16,5.28350169 16,6.25 C16,7.21649831 16.7835017,8 17.75,8 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_more" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合"></g>
+        <g id="Symbol/color-light/colorPrimary" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <rect id="color/#000000" x="0" y="0" width="24" height="24"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_more_list.svg b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_more_list.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0a26842c9e251d43ca0e404c240f612b5268f799
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_more_list.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_more_list</title>
+    <defs>
+        <path d="M6.5,10.25 C7.46649831,10.25 8.25,11.0335017 8.25,12 C8.25,12.9664983 7.46649831,13.75 6.5,13.75 C5.53350169,13.75 4.75,12.9664983 4.75,12 C4.75,11.0335017 5.53350169,10.25 6.5,10.25 Z M17.5,10.25 C18.4664983,10.25 19.25,11.0335017 19.25,12 C19.25,12.9664983 18.4664983,13.75 17.5,13.75 C16.5335017,13.75 15.75,12.9664983 15.75,12 C15.75,11.0335017 16.5335017,10.25 17.5,10.25 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_more_list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#000000" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_transfers.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_transfers.png
new file mode 100644
index 0000000000000000000000000000000000000000..aae95f868c3502e3a8273c10a75e5bb97451fea1
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_transfers.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_upwards.svg b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_upwards.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0474c94964c4f3ecf14b91e10adc938fbb3c5956
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_public_upwards.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>矩形备份 2</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="20" height="20"></rect>
+    </defs>
+    <g id="典型页面7:个人账户" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="个人账户/平板" transform="translate(-483.000000, -110.000000)">
+            <g id="编组-3" transform="translate(416.000000, 88.000000)">
+                <g id="矩形备份-2" transform="translate(67.000000, 22.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="蒙版" fill-opacity="0" fill="#D8D8D8" xlink:href="#path-1"></use>
+                    <path d="M5.92456235,7 L13.3196334,7 C13.8302363,7 14.2441617,7.3581722 14.2441617,7.8 C14.2441617,7.9816572 14.1727134,8.1579056 14.0415687,8.29975604 L10.3440332,12.2991312 C10.0250621,12.6441407 9.44326348,12.7000778 9.04454961,12.4240702 C8.99123696,12.3871648 8.94281267,12.345263 8.90016255,12.2991312 L5.20262703,8.29975604 C4.88365594,7.95474649 4.94830023,7.45131259 5.34701409,7.17530495 C5.51094503,7.0618246 5.71462832,7 5.92456235,7 Z" fill="#000000" mask="url(#mask-2)" transform="translate(9.622081, 9.799702) scale(1, -1) translate(-9.622081, -9.799702) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_quick_loan.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_quick_loan.png
new file mode 100644
index 0000000000000000000000000000000000000000..0754573154a3032100675a008ca7420b201cec5b
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_quick_loan.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_quick_profit.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_quick_profit.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e77bb25dda910b3acf7f8b7d80c280e88a3c5e1
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_quick_profit.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_swiper_book.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_swiper_book.png
new file mode 100644
index 0000000000000000000000000000000000000000..4dfe9c862758f8fbbeb93707e5c322ee32666aae
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_swiper_book.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_swiper_eyeglasses.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_swiper_eyeglasses.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f77fcceb1f62fad64645c4a4f13065f2c3f5a06
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_swiper_eyeglasses.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_swiper_fingerprints.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_swiper_fingerprints.png
new file mode 100644
index 0000000000000000000000000000000000000000..96b768b0ae36f6c56518c5cd159e13b8ed1dd8be
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_swiper_fingerprints.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_swiper_hand.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_swiper_hand.png
new file mode 100644
index 0000000000000000000000000000000000000000..3dd78e343c90bc161225c1faf237af8640c6bd44
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_swiper_hand.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_transfers.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_transfers.png
new file mode 100644
index 0000000000000000000000000000000000000000..093200d0be1987f959c8350e9ed7cc175058774f
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_transfers.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_wealth_products.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_wealth_products.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc01479c27543073a8b3ed0c8ef1a91348bde102
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/ic_wealth_products.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/base/media/icon.png b/MultiFinancialManagement/features/home/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/base/media/icon.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/en_US/element/string.json b/MultiFinancialManagement/features/home/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..474436a541dd2a48c369b35d4402c2985e6c5fee
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/en_US/element/string.json
@@ -0,0 +1,224 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "gps_location",
+      "value": "shenzhen"
+    },
+    {
+      "name": "search_placeholder",
+      "value": "search..."
+    },
+    {
+      "name": "home_account",
+      "value": "account"
+    },
+    {
+      "name": "home_details",
+      "value": "details"
+    },
+    {
+      "name": "home_transfers",
+      "value": "transfers"
+    },
+    {
+      "name": "home_loans",
+      "value": "loans"
+    },
+    {
+      "name": "home_fund_investment",
+      "value": "fundInvestment"
+    },
+    {
+      "name": "home_wealth_products",
+      "value": "wealthProducts"
+    },
+    {
+      "name": "home_cards",
+      "value": "cards"
+    },
+    {
+      "name": "home_notes",
+      "value": "notes"
+    },
+    {
+      "name": "home_quick_profit",
+      "value": "quickProfit"
+    },
+    {
+      "name": "home_precious_metals",
+      "value": "preciousMetals"
+    },
+    {
+      "name": "home_deposits",
+      "value": "deposits"
+    },
+    {
+      "name": "home_payment",
+      "value": "payment"
+    },
+    {
+      "name": "home_quick_loan",
+      "value": "quickLoan"
+    },
+    {
+      "name": "home_more",
+      "value": "more"
+    },
+    {
+      "name": "swiper_image",
+      "value": "swiper"
+    },
+    {
+      "name": "home_list",
+      "value": "homeListInfo"
+    },
+    {
+      "name": "home_fortune_picks",
+      "value": "fortunePicks"
+    },
+    {
+      "name": "account_all_info",
+      "value": "Account Overview"
+    },
+    {
+      "name": "account_count",
+      "value": "999999.99"
+    },
+    {
+      "name": "yesterday_earnings",
+      "value": "Yesterday's earnings + 333.33"
+    },
+    {
+      "name": "current_period_amount",
+      "value": "8888.8"
+    },
+    {
+      "name": "current_period",
+      "value": "current period+"
+    },
+    {
+      "name": "investment_amount",
+      "value": "1333333.2"
+    },
+    {
+      "name": "investment_name",
+      "value": "investment"
+    },
+    {
+      "name": "remaining_due_amount",
+      "value": "5555.55"
+    },
+    {
+      "name": "remaining_due_month",
+      "value": "remaining due this month"
+    },
+    {
+      "name": "prompt_message",
+      "value": "Prepare for the old as soon as possible, worry-free old age, new users enjoy 3 gifts > >"
+    },
+    {
+      "name": "liabilities_name",
+      "value": "liabilities"
+    },
+    {
+      "name": "saving_card",
+      "value": "saving card"
+    },
+    {
+      "name": "save_card_account",
+      "value": "88888.8"
+    },
+    {
+      "name": "current_deposit",
+      "value": "current deposit"
+    },
+    {
+      "name": "day_day_treasure",
+      "value": "day and day treasure"
+    },
+    {
+      "name": "day_day_count",
+      "value": "33333.3"
+    },
+    {
+      "name": "yesterday_earnings_day",
+      "value": "Yesterday's earnings 1.33"
+    },
+    {
+      "name": "investment_wealth",
+      "value": "financial management"
+    },
+    {
+      "name": "investment_wealth_count",
+      "value": "66666.66"
+    },
+    {
+      "name": "half_year_treasure",
+      "value": "half a year treasure"
+    },
+    {
+      "name": "earnings_holding_positions",
+      "value": "earnings from holding positions"
+    },
+    {
+      "name": "earnings_holding_positions_count",
+      "value": "66.6"
+    },
+    {
+      "name": "last_redemption_date",
+      "value": "last redemption date:"
+    },
+    {
+      "name": "last_date",
+      "value": "2023-11-23"
+    },
+    {
+      "name": "position_amount",
+      "value": "position amount"
+    },
+    {
+      "name": "fund_name",
+      "value": "fund"
+    },
+    {
+      "name": "exponent_c",
+      "value": "XXXXXXXXX exponent C"
+    },
+    {
+      "name": "yesterday_earnings_exponent",
+      "value": "yesterday·s earnings"
+    },
+    {
+      "name": "yesterday_exponent_count",
+      "value": "-66.6"
+    },
+    {
+      "name": "investment_holding_count",
+      "value": "666.6"
+    },
+    {
+      "name": "credit_card_account",
+      "value": "credit card personal consumption account"
+    },
+    {
+      "name": "remaining_available_amount",
+      "value": "remaining available amount"
+    },
+    {
+      "name": "remaining_available_count",
+      "value": "500000.00"
+    },
+    {
+      "name": "remaining_due",
+      "value": "remaining RMB due"
+    },
+    {
+      "name": "remaining_due_count",
+      "value": "55555.55"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/en_US/media/ic_dialog_phone.png b/MultiFinancialManagement/features/home/src/main/resources/en_US/media/ic_dialog_phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d681984df2706f2e5553e2b2888bcc5eaed2672
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/en_US/media/ic_dialog_phone.png differ
diff --git a/MultiFinancialManagement/features/home/src/main/resources/zh_CN/element/string.json b/MultiFinancialManagement/features/home/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..09427c29ac2ca5cee06c29fe3219bb4082c8dddd
--- /dev/null
+++ b/MultiFinancialManagement/features/home/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,224 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "gps_location",
+      "value": "深圳"
+    },
+    {
+      "name": "search_placeholder",
+      "value": "搜索..."
+    },
+    {
+      "name": "home_account",
+      "value": "账户"
+    },
+    {
+      "name": "home_details",
+      "value": "明细"
+    },
+    {
+      "name": "home_transfers",
+      "value": "转账"
+    },
+    {
+      "name": "home_loans",
+      "value": "贷款"
+    },
+    {
+      "name": "home_fund_investment",
+      "value": "基金投资"
+    },
+    {
+      "name": "home_wealth_products",
+      "value": "理财产品"
+    },
+    {
+      "name": "home_cards",
+      "value": "信用卡"
+    },
+    {
+      "name": "home_notes",
+      "value": "账单"
+    },
+    {
+      "name": "home_quick_profit",
+      "value": "速盈"
+    },
+    {
+      "name": "home_precious_metals",
+      "value": "贵金属"
+    },
+    {
+      "name": "home_deposits",
+      "value": "存款产品"
+    },
+    {
+      "name": "home_payment",
+      "value": "缴费"
+    },
+    {
+      "name": "home_quick_loan",
+      "value": "快贷"
+    },
+    {
+      "name": "home_more",
+      "value": "更多"
+    },
+    {
+      "name": "swiper_image",
+      "value": "swiper"
+    },
+    {
+      "name": "home_list",
+      "value": "homeListInfo"
+    },
+    {
+      "name": "home_fortune_picks",
+      "value": "财富精选"
+    },
+    {
+      "name": "account_all_info",
+      "value": "账户总览"
+    },
+    {
+      "name": "account_count",
+      "value": "999999.99"
+    },
+    {
+      "name": "yesterday_earnings",
+      "value": "昨日收益+333.33"
+    },
+    {
+      "name": "current_period_amount",
+      "value": "8888.8"
+    },
+    {
+      "name": "current_period",
+      "value": "活期+"
+    },
+    {
+      "name": "investment_amount",
+      "value": "1333333.2"
+    },
+    {
+      "name": "investment_name",
+      "value": "投资"
+    },
+    {
+      "name": "remaining_due_amount",
+      "value": "5555.55"
+    },
+    {
+      "name": "remaining_due_month",
+      "value": "本月剩余应还"
+    },
+    {
+      "name": "prompt_message",
+      "value": "备老趁早，养老无忧，新用户立享3重礼>>"
+    },
+    {
+      "name": "liabilities_name",
+      "value": "负债"
+    },
+    {
+      "name": "saving_card",
+      "value": "储蓄卡"
+    },
+    {
+      "name": "save_card_account",
+      "value": "88888.8"
+    },
+    {
+      "name": "current_deposit",
+      "value": "活期存款"
+    },
+    {
+      "name": "day_day_treasure",
+      "value": "日日宝"
+    },
+    {
+      "name": "day_day_count",
+      "value": "33333.3"
+    },
+    {
+      "name": "yesterday_earnings_day",
+      "value": "昨日收益1.33"
+    },
+    {
+      "name": "investment_wealth",
+      "value": "理财"
+    },
+    {
+      "name": "investment_wealth_count",
+      "value": "66666.66"
+    },
+    {
+      "name": "half_year_treasure",
+      "value": "半年宝"
+    },
+    {
+      "name": "earnings_holding_positions",
+      "value": "持仓收益       "
+    },
+    {
+      "name": "earnings_holding_positions_count",
+      "value": "66.6"
+    },
+    {
+      "name": "last_redemption_date",
+      "value": "最近可赎日："
+    },
+    {
+      "name": "last_date",
+      "value": "2023-11-23"
+    },
+    {
+      "name": "position_amount",
+      "value": "持仓金额"
+    },
+    {
+      "name": "fund_name",
+      "value": "基金"
+    },
+    {
+      "name": "exponent_c",
+      "value": "XXXXXXXXX指数C"
+    },
+    {
+      "name": "yesterday_earnings_exponent",
+      "value": "昨日收益"
+    },
+    {
+      "name": "yesterday_exponent_count",
+      "value": "-66.6"
+    },
+    {
+      "name": "investment_holding_count",
+      "value": "666.6"
+    },
+    {
+      "name": "credit_card_account",
+      "value": "信用卡个人消费账户"
+    },
+    {
+      "name": "remaining_available_amount",
+      "value": "剩余可用额度  "
+    },
+    {
+      "name": "remaining_available_count",
+      "value": "500000.00"
+    },
+    {
+      "name": "remaining_due",
+      "value": "剩余应还人民币  "
+    },
+    {
+      "name": "remaining_due_count",
+      "value": "55555.55"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/home/src/main/resources/zh_CN/media/ic_dialog_phone.png b/MultiFinancialManagement/features/home/src/main/resources/zh_CN/media/ic_dialog_phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..b8e5d17069296ea05eb83e31de7a2ac53aede289
Binary files /dev/null and b/MultiFinancialManagement/features/home/src/main/resources/zh_CN/media/ic_dialog_phone.png differ
diff --git a/MultiFinancialManagement/features/transaction/Index.ets b/MultiFinancialManagement/features/transaction/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..c4539903430c121861dd9c076f55029e0ff9d660
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/Index.ets
@@ -0,0 +1 @@
+export { TransactionComponent } from './src/main/ets/view/TransactionComponent';
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/transaction/build-profile.json5 b/MultiFinancialManagement/features/transaction/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/transaction/hvigorfile.ts b/MultiFinancialManagement/features/transaction/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiFinancialManagement/features/transaction/obfuscation-rules.txt b/MultiFinancialManagement/features/transaction/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a1dfa0bd175984dc49e641436aa67b1de1b8abeb
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/obfuscation-rules.txt
@@ -0,0 +1,22 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/transaction/oh-package.json5 b/MultiFinancialManagement/features/transaction/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..5ee1df01e14a3989cb6b81ac615c0c8e68c682e4
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/oh-package.json5
@@ -0,0 +1,14 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "transaction",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "packageType": "InterfaceHar",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/basic": "file:../../commons/basic"
+  }
+}
diff --git a/MultiFinancialManagement/features/transaction/src/main/ets/constants/TransactionConstants.ets b/MultiFinancialManagement/features/transaction/src/main/ets/constants/TransactionConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4f9476f182fa2bdb2d47914bc3bb5a6198acd3a5
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/src/main/ets/constants/TransactionConstants.ets
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Transaction constants for transaction feature.
+ */
+export class TransactionConstants {
+  /**
+   * Row space.
+   */
+  static readonly ROW_SPACE: number = 12;
+
+  /**
+   * Purchase rates.
+   */
+  static readonly RATE_VALUE: number = 0;
+
+  /**
+   * Rate confirmation date.
+   */
+  static readonly RATE_MOUTH: number = 8;
+
+  /**
+   * Rate confirmation date.
+   */
+  static readonly RATE_DAY: number = 18;
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/transaction/src/main/ets/view/TransactionComponent.ets b/MultiFinancialManagement/features/transaction/src/main/ets/view/TransactionComponent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9047f079d4df03896137b9cc7e40ef82edc943dc
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/src/main/ets/view/TransactionComponent.ets
@@ -0,0 +1,314 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { window } from '@kit.ArkUI';
+import { CommonConstants, FundDetail } from '@ohos/basic';
+import { TransactionConstants } from '../constants/TransactionConstants';
+
+@Component
+export struct TransactionComponent {
+  @StorageLink('pageInfo') pageInfo: NavPathStack = new NavPathStack();
+  @State indexList: number = 0;
+  @StorageProp('allFund') fundInfo: FundDetail[] = [];
+  @StorageProp('breakPoint') breakPoint: string = CommonConstants.BREAK_POINT_SM;
+
+  build() {
+    NavDestination() {
+      Column() {
+        Row() {
+          Image($r('app.media.ic_public_back'))
+            .width($r('app.float.common_image_width'))
+            .height($r('app.float.common_image_height'))
+            .onClick(() => {
+              this.pageInfo.pop();
+            })
+          Text($r('app.string.financial_purchase'))
+            .fontSize($r('app.float.title_size'))
+          Image($r('app.media.ic_public_comments'))
+            .width($r('app.float.common_image_width'))
+            .height($r('app.float.common_image_height'))
+        }
+        .width(CommonConstants.FULL_WIDTH_PERCENT)
+        .justifyContent(FlexAlign.SpaceBetween)
+        .padding({
+          left: $r('app.float.padding_common'),
+          right: $r('app.float.padding_common')
+        })
+
+        Row() {
+          Text(this.fundInfo[this.indexList].name)
+            .fontSize($r('app.float.fund_text_size'))
+            .fontColor($r('app.color.fund_text'))
+            .lineHeight($r('app.float.fund_text_height'))
+            .fontWeight(CommonConstants.FONT_WEIGHT_500)
+
+          Text(this.fundInfo[this.indexList].amplitude)
+            .fontSize($r('app.float.amplitude_size'))
+            .fontColor($r('app.color.amplitude_color'))
+        }
+        .width(CommonConstants.FULL_WIDTH_PERCENT)
+        .justifyContent(FlexAlign.SpaceBetween)
+        .padding({
+          left: $r('app.float.padding_common'),
+          right: $r('app.float.padding_common'),
+          top: $r('app.float.fund_text_padding_top')
+        })
+
+        Row({ space: TransactionConstants.ROW_SPACE }) {
+          Text($r('app.string.fixed_investment'))
+            .textTypeExtend()
+
+          Text($r('app.string.fund_type'))
+            .textTypeExtend()
+
+          Text($r('app.string.risk_level'))
+            .textTypeExtend()
+        }
+        .width(CommonConstants.FULL_WIDTH_PERCENT)
+        .justifyContent(FlexAlign.Start)
+        .padding({
+          left: $r('app.float.padding_common'),
+          right: $r('app.float.padding_common'),
+          top: $r('app.float.type_padding_top'),
+          bottom: $r('app.float.type_padding_bottom')
+        })
+
+        Row() {
+          Text($r('app.string.transaction_account'))
+            .fontSize($r('app.float.account_size'))
+            .fontColor($r('app.color.account_text'))
+            .lineHeight($r('app.float.account_text_height'))
+            .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          Row() {
+            Text($r('app.string.payment_account'))
+              .fontSize($r('app.float.payment_size'))
+              .fontColor($r('app.color.common_text'))
+              .lineHeight($r('app.float.payment_text_height'))
+            Image($r('app.media.ic_public_arrow_right'))
+              .width($r('app.float.arrow_width'))
+              .height($r('app.float.arrow_height'))
+              .fillColor($r('app.color.arrow_right'))
+              .margin({
+                left: $r('app.float.arrow_margin_left')
+              })
+          }
+        }
+        .width(CommonConstants.FULL_WIDTH_PERCENT)
+        .justifyContent(FlexAlign.SpaceBetween)
+        .height($r('app.float.account_height'))
+        .backgroundColor(Color.White)
+        .padding({
+          top: $r('app.float.account_padding_top_bottom'),
+          bottom: $r('app.float.account_padding_top_bottom'),
+          left: $r('app.float.padding_common'),
+          right: $r('app.float.padding_common')
+        })
+
+        Row() {
+          Text($r('app.string.available_balance'))
+            .fontSize($r('app.float.available_size'))
+            .fontColor($r('app.color.available_text'))
+            .lineHeight($r('app.float.available_height'))
+          Image($r('app.media.ic_about'))
+            .width($r('app.float.about_image'))
+            .height($r('app.float.about_image'))
+            .margin({
+              left: $r('app.float.about_margin_left')
+            })
+        }
+        .width(CommonConstants.FULL_WIDTH_PERCENT)
+        .justifyContent(FlexAlign.End)
+        .height($r('app.float.available_row_height'))
+        .padding({
+          left: $r('app.float.padding_common'),
+          right: $r('app.float.padding_common')
+        })
+
+        Column() {
+          Row() {
+            Text($r('app.string.purchase_amount'))
+              .fontSize($r('app.float.purchase_size'))
+              .fontColor($r('app.color.purchase_text'))
+              .lineHeight($r('app.float.purchase_text_height'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            Text($r('app.string.transaction_rules'))
+              .fontSize($r('app.float.rules_size'))
+              .fontColor($r('app.color.rules_text'))
+              .lineHeight($r('app.float.rules_text_height'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          }
+          .width(CommonConstants.FULL_WIDTH_PERCENT)
+          .justifyContent(FlexAlign.SpaceBetween)
+          .padding({
+            left: $r('app.float.padding_common'),
+            right: $r('app.float.padding_common'),
+          })
+
+          Row() {
+            Text($r('app.string.money_symbol'))
+              .fontSize($r('app.float.symbol_size'))
+            TextInput()
+              .enableKeyboardOnFocus(false)
+              .fontSize($r('app.float.symbol_size'))
+              .backgroundColor(Color.White)
+              .layoutWeight(1)
+              .textAlign(TextAlign.End)
+              .type(InputType.Number)
+              .margin({
+                left: $r('app.float.input_margin'),
+                right: $r('app.float.input_margin')
+              })
+            Button($r('app.string.buy_all'))
+              .backgroundColor($r('app.color.button_buy_background'))
+              .width($r('app.float.button_buy_width'))
+              .height($r('app.float.button_buy_height'))
+              .fontSize($r('app.float.button_buy_size'))
+              .fontColor($r('app.color.button_buy'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          }
+          .width(CommonConstants.FULL_WIDTH_PERCENT)
+          .justifyContent(FlexAlign.SpaceBetween)
+          .padding({
+            left: $r('app.float.padding_common'),
+            right: $r('app.float.padding_common'),
+          })
+
+          Row() {
+            Text($r('app.string.confirm_share_prompt', TransactionConstants.RATE_VALUE,
+              TransactionConstants.RATE_MOUTH, TransactionConstants.RATE_DAY))
+              .fontSize($r('app.float.confirm_size'))
+              .fontColor($r('app.color.common_text'))
+              .lineHeight($r('app.float.confirm_text_height'))
+          }
+          .width(CommonConstants.FULL_WIDTH_PERCENT)
+          .justifyContent(FlexAlign.Start)
+          .padding({
+            top: $r('app.float.confirm_padding_top'),
+            left: $r('app.float.padding_common'),
+            right: $r('app.float.padding_common'),
+          })
+          .border({
+            width: {
+              top: $r('app.float.confirm_border_width')
+            },
+            color: $r('app.color.confirm_border')
+          })
+        }
+        .height($r('app.float.buy_info_height'))
+        .width(CommonConstants.FULL_WIDTH_PERCENT)
+        .justifyContent(FlexAlign.SpaceBetween)
+        .backgroundColor(Color.White)
+        .padding({
+          top: $r('app.float.buy_info_padding'),
+          bottom: $r('app.float.buy_info_padding')
+        })
+
+        Row() {
+          Text($r('app.string.recommendation_no'))
+            .fontSize($r('app.float.recommendation_size'))
+            .fontColor($r('app.color.recommendation_text'))
+            .lineHeight($r('app.float.recommendation_text_height'))
+            .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          TextInput({ placeholder: $r('app.string.recommendation_optional') })
+            .fontSize($r('app.float.recommendation_size'))
+            .backgroundColor(Color.White)
+            .layoutWeight(1)
+            .textAlign(TextAlign.End)
+            .type(InputType.Number)
+            .padding(0)
+        }
+        .width(CommonConstants.FULL_WIDTH_PERCENT)
+        .height($r('app.float.recommendation_height'))
+        .justifyContent(FlexAlign.SpaceBetween)
+        .backgroundColor(Color.White)
+        .padding({
+          left: $r('app.float.padding_common'),
+          right: $r('app.float.padding_common'),
+        })
+        .margin({
+          top: $r('app.float.recommendation_margin'),
+          bottom: $r('app.float.recommendation_margin')
+        })
+
+        Column() {
+          Row() {
+            Text($r('app.string.transaction_read'))
+              .fontSize($r('app.float.read_size'))
+              .fontColor($r('app.color.common_text'))
+              .lineHeight($r('app.float.read_text_height'))
+              .margin({
+                right: $r('app.float.read_margin_right')
+              })
+            Image($r('app.media.ic_public_arrow_right'))
+              .width($r('app.float.arrow_right_width'))
+              .height($r('app.float.common_image_height'))
+          }
+          .width(CommonConstants.FULL_WIDTH_PERCENT)
+
+          Button($r('app.string.transaction_button'))
+            .backgroundColor($r('app.color.button_background'))
+            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .constraintSize({
+              minWidth: $r('app.float.button_min_width'),
+              maxWidth: $r('app.float.button_max_width')
+            })
+            .height($r('app.float.button_height'))
+        }
+        .layoutWeight(1)
+        .justifyContent(FlexAlign.SpaceBetween)
+        .backgroundColor(Color.White)
+        .padding({
+          left: $r('app.float.padding_common'),
+          right: $r('app.float.padding_common'),
+          top: $r('app.float.read_padding_top'),
+          bottom: $r('app.float.read_padding_bottom')
+        })
+      }
+      .width(CommonConstants.FULL_WIDTH_PERCENT)
+      .height(CommonConstants.FULL_HEIGHT_PERCENT)
+      .backgroundColor($r('app.color.transaction_background'))
+    }
+    .hideTitleBar(true)
+    .onShown(() => {
+      window.getLastWindow(getContext(this)).then((windowStage: window.Window) => {
+        let sysBarProps: window.SystemBarProperties = {
+          statusBarColor: '#F7F7F7'
+        };
+        windowStage.setWindowSystemBarProperties(sysBarProps);
+      })
+    })
+    .onHidden(() => {
+      window.getLastWindow(getContext(this)).then((windowStage: window.Window) => {
+        let sysBarProps: window.SystemBarProperties = {
+          statusBarColor: '#00ffffff'
+        };
+        windowStage.setWindowSystemBarProperties(sysBarProps);
+      })
+    })
+  }
+}
+
+@Extend(Text)
+function textTypeExtend() {
+  .fontSize($r('app.float.type_text_size'))
+  .fontColor($r('app.color.type_text'))
+  .backgroundColor($r('app.color.type_text_background'))
+  .padding({
+    left: $r('app.float.type_text_padding_lr'),
+    right: $r('app.float.type_text_padding_lr'),
+    top: $r('app.float.type_text_padding_tb'),
+    bottom: $r('app.float.type_text_padding_tb')
+  })
+}
diff --git a/MultiFinancialManagement/features/transaction/src/main/module.json5 b/MultiFinancialManagement/features/transaction/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..0366a6ce273b4a73707ed62e0f0f88e40342700b
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/src/main/module.json5
@@ -0,0 +1,12 @@
+{
+  "module": {
+    "name": "transaction",
+    "type": "har",
+    "description": "$string:shared_desc",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/transaction/src/main/resources/base/element/color.json b/MultiFinancialManagement/features/transaction/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..409a4b6c8389654b8bc8105cb5e5027565c67ab8
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/src/main/resources/base/element/color.json
@@ -0,0 +1,72 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "fund_text",
+      "value": "#182431"
+    },
+    {
+      "name": "amplitude_color",
+      "value": "#66000000"
+    },
+    {
+      "name": "account_text",
+      "value": "#182431"
+    },
+    {
+      "name": "common_text",
+      "value": "#99000000"
+    },
+    {
+      "name": "arrow_right",
+      "value": "#e6000000"
+    },
+    {
+      "name": "available_text",
+      "value": "#99000000"
+    },
+    {
+      "name": "purchase_text",
+      "value": "#182431"
+    },
+    {
+      "name": "rules_text",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "button_buy_background",
+      "value": "#0d000000"
+    },
+    {
+      "name": "button_buy",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "confirm_border",
+      "value": "#1a000000"
+    },
+    {
+      "name": "recommendation_text",
+      "value": "#182431"
+    },
+    {
+      "name": "button_background",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "transaction_background",
+      "value": "#F7F7F7"
+    },
+    {
+      "name": "type_text",
+      "value": "#1F69FF"
+    },
+    {
+      "name": "type_text_background",
+      "value": "#0d1f69ff"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/transaction/src/main/resources/base/element/float.json b/MultiFinancialManagement/features/transaction/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..2393c2a2f374390f4874e6d4f6c5f28f364b51bf
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/src/main/resources/base/element/float.json
@@ -0,0 +1,224 @@
+{
+  "float": [
+    {
+      "name": "common_image_width",
+      "value": "24vp"
+    },
+    {
+      "name": "common_image_height",
+      "value": "24vp"
+    },
+    {
+      "name": "title_size",
+      "value": "18fp"
+    },
+    {
+      "name": "padding_common",
+      "value": "24vp"
+    },
+    {
+      "name": "fund_text_size",
+      "value": "16fp"
+    },
+    {
+      "name": "fund_text_height",
+      "value": "22vp"
+    },
+    {
+      "name": "amplitude_size",
+      "value": "12fp"
+    },
+    {
+      "name": "fund_text_padding_top",
+      "value": "29vp"
+    },
+    {
+      "name": "type_padding_top",
+      "value": "14vp"
+    },
+    {
+      "name": "type_padding_bottom",
+      "value": "17vp"
+    },
+    {
+      "name": "account_size",
+      "value": "16fp"
+    },
+    {
+      "name": "account_text_height",
+      "value": "22vp"
+    },
+    {
+      "name": "payment_size",
+      "value": "14fp"
+    },
+    {
+      "name": "payment_text_height",
+      "value": "19vp"
+    },
+    {
+      "name": "arrow_width",
+      "value": "6.74vp"
+    },
+    {
+      "name": "arrow_height",
+      "value": "12.81vp"
+    },
+    {
+      "name": "arrow_margin_left",
+      "value": "14vp"
+    },
+    {
+      "name": "account_height",
+      "value": "80vp"
+    },
+    {
+      "name": "account_padding_top_bottom",
+      "value": "29vp"
+    },
+    {
+      "name": "available_size",
+      "value": "14fp"
+    },
+    {
+      "name": "available_height",
+      "value": "19vp"
+    },
+    {
+      "name": "about_image",
+      "value": "22vp"
+    },
+    {
+      "name": "about_margin_left",
+      "value": "13vp"
+    },
+    {
+      "name": "available_row_height",
+      "value": "48vp"
+    },
+    {
+      "name": "purchase_size",
+      "value": "16fp"
+    },
+    {
+      "name": "purchase_text_height",
+      "value": "22vp"
+    },
+    {
+      "name": "rules_size",
+      "value": "14fp"
+    },
+    {
+      "name": "rules_text_height",
+      "value": "19vp"
+    },
+    {
+      "name": "symbol_size",
+      "value": "36fp"
+    },
+    {
+      "name": "input_margin",
+      "value": "10vp"
+    },
+    {
+      "name": "button_buy_width",
+      "value": "80vp"
+    },
+    {
+      "name": "button_buy_height",
+      "value": "28vp"
+    },
+    {
+      "name": "button_buy_size",
+      "value": "12fp"
+    },
+    {
+      "name": "confirm_size",
+      "value": "14vp"
+    },
+    {
+      "name": "confirm_text_height",
+      "value": "19vp"
+    },
+    {
+      "name": "confirm_padding_top",
+      "value": "14.93vp"
+    },
+    {
+      "name": "confirm_border_width",
+      "value": "0.5vp"
+    },
+    {
+      "name": "buy_info_height",
+      "value": "176vp"
+    },
+    {
+      "name": "buy_info_padding",
+      "value": "13vp"
+    },
+    {
+      "name": "recommendation_size",
+      "value": "16fp"
+    },
+    {
+      "name": "recommendation_text_height",
+      "value": "22vp"
+    },
+    {
+      "name": "recommendation_height",
+      "value": "48vp"
+    },
+    {
+      "name": "recommendation_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "read_size",
+      "value": "14fp"
+    },
+    {
+      "name": "read_text_height",
+      "value": "21vp"
+    },
+    {
+      "name": "read_margin_right",
+      "value": "16vp"
+    },
+    {
+      "name": "arrow_right_width",
+      "value": "12vp"
+    },
+    {
+      "name": "button_height",
+      "value": "40vp"
+    },
+    {
+      "name": "read_padding_top",
+      "value": "16vp"
+    },
+    {
+      "name": "read_padding_bottom",
+      "value": "48vp"
+    },
+    {
+      "name": "type_text_size",
+      "value": "10fp"
+    },
+    {
+      "name": "type_text_padding_lr",
+      "value": "4vp"
+    },
+    {
+      "name": "type_text_padding_tb",
+      "value": "1vp"
+    },
+    {
+      "name": "button_min_width",
+      "value": "328vp"
+    },
+    {
+      "name": "button_max_width",
+      "value": "604vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/transaction/src/main/resources/base/element/string.json b/MultiFinancialManagement/features/transaction/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..9126b5ea58c77ee817f0a076f44299eab4884387
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/src/main/resources/base/element/string.json
@@ -0,0 +1,72 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "fixed_investment",
+      "value": "fixed_investment"
+    },
+    {
+      "name": "financial_purchase",
+      "value": "Financial purchase"
+    },
+    {
+      "name": "transaction_account",
+      "value": "account"
+    },
+    {
+      "name": "payment_account",
+      "value": "payment account"
+    },
+    {
+      "name": "available_balance",
+      "value": "Available Balance"
+    },
+    {
+      "name": "purchase_amount",
+      "value": "Purchase Amount"
+    },
+    {
+      "name": "transaction_rules",
+      "value": "transaction rules"
+    },
+    {
+      "name": "money_symbol",
+      "value": "￥"
+    },
+    {
+      "name": "buy_all",
+      "value": "Buy it all"
+    },
+    {
+      "name": "confirm_share_prompt",
+      "value": "Buy %d rate, share confirmation is expected on %d %d"
+    },
+    {
+      "name": "recommendation_no",
+      "value": "Recommendation No"
+    },
+    {
+      "name": "recommendation_optional",
+      "value": "optional"
+    },
+    {
+      "name": "transaction_read",
+      "value": "Read and agree to the Product Description, Risk Disclosure, and other agreements."
+    },
+    {
+      "name": "transaction_button",
+      "value": "Agree to the next step of the agreement"
+    },
+    {
+      "name": "fund_type",
+      "value": "Currency type"
+    },
+    {
+      "name": "risk_level",
+      "value": "R3-Medium Risk"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/transaction/src/main/resources/base/media/ic_about.png b/MultiFinancialManagement/features/transaction/src/main/resources/base/media/ic_about.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9ec044e0e3ac4d63aa394705db4e05f22d54245
Binary files /dev/null and b/MultiFinancialManagement/features/transaction/src/main/resources/base/media/ic_about.png differ
diff --git a/MultiFinancialManagement/features/transaction/src/main/resources/base/media/ic_public_arrow_right.svg b/MultiFinancialManagement/features/transaction/src/main/resources/base/media/ic_public_arrow_right.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0cc0f2ad4fd08ee0b7340c787910fd3723a36b7d
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/src/main/resources/base/media/ic_public_arrow_right.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="24px" viewBox="0 0 12 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_arrow_right</title>
+    <defs>
+        <path d="M4.2482689,5.78255501 L4.28033009,5.81281566 L9.23007755,10.7625631 C9.8992572,11.4317428 9.91319844,12.5080354 9.27190128,13.1941781 L9.23007755,13.2374369 L4.28033009,18.1871843 C4.15145707,18.3160574 3.98735263,18.3882262 3.81902041,18.403691 L3.7730301,18.4065028 L3.7269699,18.4065028 C3.54277571,18.4008792 3.36025866,18.3277731 3.21966991,18.1871843 C2.93723717,17.9047516 2.92715028,17.4531048 3.18940926,17.1585854 L3.21966991,17.1265242 L7.81586399,12.5303301 C8.09829674,12.2478973 8.10838362,11.7962506 7.84612464,11.5017311 L7.81586399,11.4696699 L3.21966991,6.87347584 C2.9267767,6.58058262 2.9267767,6.10570888 3.21966991,5.81281566 C3.36088629,5.67159929 3.54440617,5.59846938 3.72943689,5.59342594 L3.77570243,5.59358355 C3.94528507,5.59936249 4.11328081,5.66235298 4.2482689,5.78255501 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_arrow_right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="路径" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="Symbol/color-light/colorPrimary">
+                <rect id="color/#000000" x="0" y="0" width="12" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/transaction/src/main/resources/base/media/ic_public_back.svg b/MultiFinancialManagement/features/transaction/src/main/resources/base/media/ic_public_back.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5d8827cf7050dbb91a3f2fc6dae78538909975e8
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/src/main/resources/base/media/ic_public_back.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_back</title>
+    <defs>
+        <path d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_back" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/transaction/src/main/resources/base/media/ic_public_comments.svg b/MultiFinancialManagement/features/transaction/src/main/resources/base/media/ic_public_comments.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0211e560e1825ca9b607e21470d5ca8e309acd0e
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/src/main/resources/base/media/ic_public_comments.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_comments</title>
+    <defs>
+        <path d="M15.5,3 C19.6421356,3 23,6.35786438 23,10.5 C23,14.6007143 19.7089571,17.9327643 15.6240262,17.9989952 L15.5,18 L13.8105,18 L10.0303301,21.7803301 C9.7491526,22.0615076 9.30026186,22.0727547 9.00566731,21.8140714 L8.96966991,21.7803301 C8.68849242,21.4991526 8.67724532,21.0502619 8.93592862,20.7556673 L8.96966991,20.7196699 L12.9696699,16.7196699 C13.0986012,16.5907387 13.2696414,16.5135976 13.4504659,16.5016361 L13.5,16.5 L15.5,16.5 C18.8137085,16.5 21.5,13.8137085 21.5,10.5 C21.5,7.21942859 18.8671657,4.55378857 15.599221,4.50080383 L8.5,4.5 C5.1862915,4.5 2.5,7.1862915 2.5,10.5 C2.5,13.7805714 5.1328343,16.4462114 8.40077903,16.4991962 L8.5,16.5 L9.25,16.5 C9.66421356,16.5 10,16.8357864 10,17.25 C10,17.6494202 9.68777001,17.9759152 9.2940682,17.9987268 L9.25,18 L8.5,18 C4.35786438,18 1,14.6421356 1,10.5 C1,6.39928573 4.29104288,3.06723571 8.37597379,3.00100479 L8.5,3 L15.5,3 Z M7,9.25 C7.69035594,9.25 8.25,9.80964406 8.25,10.5 C8.25,11.1903559 7.69035594,11.75 7,11.75 C6.30964406,11.75 5.75,11.1903559 5.75,10.5 C5.75,9.80964406 6.30964406,9.25 7,9.25 Z M12,9.25 C12.6903559,9.25 13.25,9.80964406 13.25,10.5 C13.25,11.1903559 12.6903559,11.75 12,11.75 C11.3096441,11.75 10.75,11.1903559 10.75,10.5 C10.75,9.80964406 11.3096441,9.25 12,9.25 Z M17,9.25 C17.6903559,9.25 18.25,9.80964406 18.25,10.5 C18.25,11.1903559 17.6903559,11.75 17,11.75 C16.3096441,11.75 15.75,11.1903559 15.75,10.5 C15.75,9.80964406 16.3096441,9.25 17,9.25 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_comments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/transaction/src/main/resources/base/media/icon.png b/MultiFinancialManagement/features/transaction/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/MultiFinancialManagement/features/transaction/src/main/resources/base/media/icon.png differ
diff --git a/MultiFinancialManagement/features/transaction/src/main/resources/base/media/setting.jpeg b/MultiFinancialManagement/features/transaction/src/main/resources/base/media/setting.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..57e67dd49d39ad64ef090f59db3db9dfe6632106
Binary files /dev/null and b/MultiFinancialManagement/features/transaction/src/main/resources/base/media/setting.jpeg differ
diff --git a/MultiFinancialManagement/features/transaction/src/main/resources/en_US/element/string.json b/MultiFinancialManagement/features/transaction/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..9126b5ea58c77ee817f0a076f44299eab4884387
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/src/main/resources/en_US/element/string.json
@@ -0,0 +1,72 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "fixed_investment",
+      "value": "fixed_investment"
+    },
+    {
+      "name": "financial_purchase",
+      "value": "Financial purchase"
+    },
+    {
+      "name": "transaction_account",
+      "value": "account"
+    },
+    {
+      "name": "payment_account",
+      "value": "payment account"
+    },
+    {
+      "name": "available_balance",
+      "value": "Available Balance"
+    },
+    {
+      "name": "purchase_amount",
+      "value": "Purchase Amount"
+    },
+    {
+      "name": "transaction_rules",
+      "value": "transaction rules"
+    },
+    {
+      "name": "money_symbol",
+      "value": "￥"
+    },
+    {
+      "name": "buy_all",
+      "value": "Buy it all"
+    },
+    {
+      "name": "confirm_share_prompt",
+      "value": "Buy %d rate, share confirmation is expected on %d %d"
+    },
+    {
+      "name": "recommendation_no",
+      "value": "Recommendation No"
+    },
+    {
+      "name": "recommendation_optional",
+      "value": "optional"
+    },
+    {
+      "name": "transaction_read",
+      "value": "Read and agree to the Product Description, Risk Disclosure, and other agreements."
+    },
+    {
+      "name": "transaction_button",
+      "value": "Agree to the next step of the agreement"
+    },
+    {
+      "name": "fund_type",
+      "value": "Currency type"
+    },
+    {
+      "name": "risk_level",
+      "value": "R3-Medium Risk"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/features/transaction/src/main/resources/zh_CN/element/string.json b/MultiFinancialManagement/features/transaction/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..a2bffc5f9001dc9a0192349483668da62aea744d
--- /dev/null
+++ b/MultiFinancialManagement/features/transaction/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,72 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "fixed_investment",
+      "value": "定投专区"
+    },
+    {
+      "name": "financial_purchase",
+      "value": "理财购买"
+    },
+    {
+      "name": "transaction_account",
+      "value": "账户"
+    },
+    {
+      "name": "payment_account",
+      "value": "付款账户 (0012)"
+    },
+    {
+      "name": "available_balance",
+      "value": "可用余额 ￥ 34,567.89"
+    },
+    {
+      "name": "purchase_amount",
+      "value": "购买金额"
+    },
+    {
+      "name": "transaction_rules",
+      "value": "交易规则"
+    },
+    {
+      "name": "money_symbol",
+      "value": "￥"
+    },
+    {
+      "name": "buy_all",
+      "value": "全部买入"
+    },
+    {
+      "name": "confirm_share_prompt",
+      "value": "购买%d费率，预计%d月%d日确认份额"
+    },
+    {
+      "name": "recommendation_no",
+      "value": "推荐号"
+    },
+    {
+      "name": "recommendation_optional",
+      "value": "选填"
+    },
+    {
+      "name": "transaction_read",
+      "value": "阅读并同意《产品说明书》《风险揭示书》等协议"
+    },
+    {
+      "name": "transaction_button",
+      "value": "同意协议下一步"
+    },
+    {
+      "name": "fund_type",
+      "value": "货币型"
+    },
+    {
+      "name": "risk_level",
+      "value": "R3-中风险"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/hvigor/hvigor-config.json5 b/MultiFinancialManagement/hvigor/hvigor-config.json5
new file mode 100644
index 0000000000000000000000000000000000000000..f70ecd4112d94f9aa555adf898d53f18bf58f3e9
--- /dev/null
+++ b/MultiFinancialManagement/hvigor/hvigor-config.json5
@@ -0,0 +1,5 @@
+{
+  "modelVersion": "5.0.0",
+  "dependencies": {
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/oh-package.json5 b/MultiFinancialManagement/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..937148751f46d6dc971bb87e8fdd35911931dc54
--- /dev/null
+++ b/MultiFinancialManagement/oh-package.json5
@@ -0,0 +1,13 @@
+{
+  "modelVersion": "5.0.0",
+  "license": "",
+  "devDependencies": {
+  },
+  "author": "",
+  "name": "multifinancialmanagement",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {}
+}
diff --git a/MultiFinancialManagement/product/phone/build-profile.json5 b/MultiFinancialManagement/product/phone/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..197e83c1b9504b12a3837e0189185479662cad4b
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/build-profile.json5
@@ -0,0 +1,31 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    },
+    {
+      "name": "ohosTest",
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/hvigorfile.ts b/MultiFinancialManagement/product/phone/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6edcd90486dd5a853cf7d34c8647f08414ca7a3
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { hapTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiFinancialManagement/product/phone/obfuscation-rules.txt b/MultiFinancialManagement/product/phone/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a1dfa0bd175984dc49e641436aa67b1de1b8abeb
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/obfuscation-rules.txt
@@ -0,0 +1,22 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/oh-package.json5 b/MultiFinancialManagement/product/phone/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7a777161c5d81f1f467c7ff5f9f2c123e7a151d4
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/oh-package.json5
@@ -0,0 +1,16 @@
+{
+  "license": "",
+  "devDependencies": {},
+  "author": "",
+  "name": "phone",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/basic": "file:../../commons/basic",
+    "@ohos/home": "file:../../features/home",
+    "@ohos/fund": "file:../../features/fund",
+    "@ohos/fundComparison": "file:../../features/fundComparison"
+  }
+}
diff --git a/MultiFinancialManagement/product/phone/src/main/ets/entryability/EntryAbility.ets b/MultiFinancialManagement/product/phone/src/main/ets/entryability/EntryAbility.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a7dbce920e78486514c9cc450e3718ce8f5bb4c1
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/ets/entryability/EntryAbility.ets
@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { UIAbility, Want, AbilityConstant } from '@kit.AbilityKit';
+import { BusinessError } from '@kit.BasicServicesKit';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { display, window } from '@kit.ArkUI';
+import { CommonConstants } from '@ohos/basic';
+
+export default class EntryAbility extends UIAbility {
+  private windowObj?: window.Window;
+
+  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
+  }
+
+  onDestroy(): void {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
+  }
+
+  onWindowStageCreate(windowStage: window.WindowStage): void {
+    // Main window is created, set main page for this ability
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+
+    windowStage.getMainWindow().then((data: window.Window) => {
+      this.windowObj = data;
+      this.updateBreakpoint(this.windowObj.getWindowProperties().windowRect.width);
+      this.windowObj.on('windowSizeChange', (windowSize: window.Size) => {
+        this.updateBreakpoint(windowSize.width);
+      })
+    })
+
+    windowStage.loadContent('pages/Index', (err: BusinessError<void>, data) => {
+      if (err.code) {
+        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+        return;
+      }
+      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
+    });
+  }
+
+  private updateBreakpoint(windowWidth: number): void{
+    let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels;
+    let curBp: string = '';
+    if (windowWidthVp < CommonConstants.BREAK_POINTS_VALUE_NUMBER[1]) {
+      curBp = CommonConstants.BREAK_POINT_SM;
+    } else if (windowWidthVp < CommonConstants.BREAK_POINTS_VALUE_NUMBER[2]) {
+      curBp = CommonConstants.BREAK_POINT_MD;
+    } else {
+      curBp = CommonConstants.BREAK_POINT_LG;
+    }
+    AppStorage.setOrCreate('breakPoint', curBp);
+  }
+
+  onWindowStageDestroy(): void {
+    // Main window is destroyed, release UI related resources
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+  }
+
+  onForeground(): void {
+    // Ability has brought to foreground
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
+  }
+
+  onBackground(): void {
+    // Ability has back to background
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
+  }
+}
diff --git a/MultiFinancialManagement/product/phone/src/main/ets/pages/Index.ets b/MultiFinancialManagement/product/phone/src/main/ets/pages/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..fae3efd2ed719371248b85a9fa87633c3cf736f4
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/ets/pages/Index.ets
@@ -0,0 +1,238 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { window } from '@kit.ArkUI';
+import { BreakpointUtil, CommonConstants, RouterConstants } from '@ohos/basic';
+import { AccountPage, AdvertisementDialog, HomeComponent } from '@ohos/home';
+import { Funding, FundingDetail, TrendsPage } from '@ohos/fund';
+import { ComparisonDetailPage, ComparisonInfo } from '@ohos/fundComparison';
+
+@Entry
+@Component
+  // [Start init_pop_custom_style]
+struct Index {
+  // [StartExclude init_pop_custom_style]
+  @StorageLink('breakPoint') breakPoint: string = CommonConstants.BREAK_POINT_SM;
+  @State currentTabIndex: number = 0;
+  @StorageProp('avoidArea') topHeight: number = 0;
+  @StorageProp('bottom') bottom: number = 0;
+  @State backgroundImageY: number = 0;
+  @StorageLink('pageIndexInfos') pageIndexInfos: NavPathStack = new NavPathStack();
+  // [EndExclude init_pop_custom_style]
+  dialogController: CustomDialogController = new CustomDialogController({
+    builder: AdvertisementDialog(),
+    backgroundColor: $r('app.color.dialog_background'),
+    alignment: DialogAlignment.Center,
+    maskColor: $r('app.color.dialog_mask'),
+    customStyle: true
+  });
+
+  aboutToAppear() {
+    this.dialogController.open();
+  }
+  // [StartExclude init_pop_custom_style]
+  onPageShow() {
+    window.getLastWindow(getContext(this)).then((windowStage: window.Window) => {
+      let area = windowStage.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
+      let topHeight = px2vp(area.topRect.height);
+      let bottomArea = windowStage.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
+      let bottom = px2vp(bottomArea.bottomRect.height);
+      if (topHeight > 0) {
+        windowStage.setWindowLayoutFullScreen(true);
+        AppStorage.setOrCreate('avoidArea', topHeight);
+        AppStorage.setOrCreate('bottom', bottom);
+      }
+    });
+  }
+
+  onPageHide() {
+    window.getLastWindow(getContext(this)).then((windowStage: window.Window) => {
+      if (this.topHeight > 0) {
+        windowStage.setWindowLayoutFullScreen(false);
+      }
+    });
+  }
+
+  getTabBarColor(index: number, currentTabIndex: number, breakPoint: string): ResourceColor {
+    if (this.backgroundImageY < -20 && this.currentTabIndex === 0 && index === 0) {
+      return $r('app.color.tab_choose_image')
+    } else if (index === 0 && breakPoint === CommonConstants.BREAK_POINT_LG) {
+      return currentTabIndex === index ? Color.White : $r('app.color.tab_un_image');
+    }
+    return currentTabIndex === index ? $r('app.color.tab_choose_image') : $r('app.color.tab_un_image');
+  }
+
+  @Builder
+  BuildTabs(icon: Resource, title: ResourceStr, index: number) {
+    Column() {
+      Image(icon)
+        .width($r('app.float.common_image_width'))
+        .height($r('app.float.common_image_height'))
+        .fillColor(this.getTabBarColor(index, this.currentTabIndex, this.breakPoint))
+      Text(title)
+        .fontSize($r('app.float.tab_text_size'))
+        .lineHeight($r('app.float.tab_text_height'))
+        .fontWeight(FontWeight.Regular)
+        .fontColor(this.getTabBarColor(index, this.currentTabIndex, this.breakPoint))
+    }
+  }
+
+  @Builder
+  BuildTabsMine(icon: Resource, unIcon: Resource, title: ResourceStr, index: number) {
+    Column() {
+      Image(this.currentTabIndex === index ? icon : unIcon)
+        .width($r('app.float.common_image_width'))
+        .height($r('app.float.common_image_height'))
+      Text(title)
+        .fontSize($r('app.float.tab_text_size'))
+        .lineHeight($r('app.float.tab_text_height'))
+        .fontWeight(FontWeight.Regular)
+        .fontColor(this.getTabBarColor(index, this.currentTabIndex, this.breakPoint))
+    }
+  }
+
+  @Builder
+  PagesMap(name: string, param?: object) {
+    if (name === RouterConstants.FUNDING_URL) {
+      Funding()
+    } else if (name === RouterConstants.ACCOUNT_PAGE_URL) {
+      NavDestination() {
+        AccountPage()
+      }
+      .hideTitleBar(true)
+      .onWillShow(() => {
+        window.getLastWindow(getContext(this)).then((windowStage: window.Window) => {
+          windowStage.setWindowLayoutFullScreen(false);
+        })
+      })
+      .onWillDisappear(() => {
+        window.getLastWindow(getContext(this)).then((windowStage: window.Window) => {
+          windowStage.setWindowLayoutFullScreen(true);
+        })
+      })
+    } else if (name === RouterConstants.FUNDING_DETAIL_URL) {
+      FundingDetail({ index: (param as Record<string, number>)['listIndex'] })
+    } else if (name === RouterConstants.TRENDS_PAGE_URL) {
+      TrendsPage({ name: (param as Record<string, string>)['name'] })
+    } else if (name === RouterConstants.COMPARISON_PAGE_URL) {
+      NavDestination() {
+        ComparisonDetailPage({ chooseComparison: (param as Record<string, ComparisonInfo[]>)['chooseComparison'] })
+      }
+      .hideTitleBar(true)
+      .onWillShow(() => {
+        window.getLastWindow(getContext(this)).then((windowStage: window.Window) => {
+          windowStage.setWindowLayoutFullScreen(false);
+        })
+      })
+      .onWillDisappear(() => {
+        window.getLastWindow(getContext(this)).then((windowStage: window.Window) => {
+          windowStage.setWindowLayoutFullScreen(true);
+        })
+      })
+    }
+  }
+
+  build() {
+    Navigation(this.pageIndexInfos) {
+      GridRow({
+        breakpoints: {
+          value: CommonConstants.BREAK_POINTS_VALUE,
+          reference: BreakpointsReference.WindowSize
+        },
+        columns: {
+          sm: CommonConstants.COLUMN_SM,
+          md: CommonConstants.COLUMN_MD,
+          lg: CommonConstants.COLUMN_LG
+        },
+        direction: GridRowDirection.Row
+      }) {
+        GridCol({
+          span: {
+            sm: CommonConstants.COLUMN_SM,
+            md: CommonConstants.COLUMN_MD,
+            lg: CommonConstants.COLUMN_LG
+          }
+        }) {
+          Column() {
+            Tabs({
+              barPosition: this.breakPoint === CommonConstants.BREAK_POINT_LG ? BarPosition.Start : BarPosition.End
+            }) {
+              TabContent() {
+                HomeComponent({
+                  currentPoint: this.breakPoint,
+                  scrollY: this.backgroundImageY
+                })
+                  .margin({
+                    top: this.topHeight
+                  })
+              }
+              .tabBar(this.BuildTabs($r('app.media.ic_public_home_filled'), $r('app.string.tab_bar_home'), 0))
+
+              TabContent() {
+              }
+              .tabBar(this.BuildTabs($r('app.media.ic_public_cards_filled'), $r('app.string.tab_bar_card'), 1))
+              .backgroundColor(Color.White)
+
+              TabContent() {
+              }
+              .tabBar(this.BuildTabs($r('app.media.ic_home_fortunes'), $r('app.string.tab_bar_fortunes'), 2))
+              .backgroundColor(Color.White)
+
+              TabContent() {
+              }
+              .tabBar(this.BuildTabs($r('app.media.ic_life_filled'), $r('app.string.tab_bar_life'), 3))
+              .backgroundColor(Color.White)
+
+              TabContent() {
+              }
+              .tabBar(this.BuildTabsMine($r('app.media.ic_home_mine'), $r('app.media.ic_home_mine_filled'),
+                $r('app.string.tab_bar_mine'), 4))
+              .backgroundColor(Color.White)
+            }
+            .vertical(this.breakPoint === CommonConstants.BREAK_POINT_LG)
+            .barWidth(this.breakPoint === CommonConstants.BREAK_POINT_LG ?
+              $r('app.float.tab_bar_width') : CommonConstants.TAB_BAR_HEIGHT_PERCENT)
+            .barHeight(this.breakPoint === CommonConstants.BREAK_POINT_LG ?
+            CommonConstants.TAB_HEIGHT_PERCENT : $r('app.float.tab_bar_height'))
+            .backgroundImage(this.currentTabIndex === 0 ? new BreakpointUtil({
+              sm: $r('app.media.ic_home_phone_background'),
+              md: $r('app.media.ic_home_fold_background'),
+              lg: $r('app.media.ic_home_tablet_background')
+            }).getValue(this.breakPoint) : $r('app.media.ic_home_not_background'))
+            .backgroundImageSize(ImageSize.Contain)
+            .backgroundImagePosition({
+              y: this.backgroundImageY
+            })
+            .backgroundColor($r('app.color.home_background'))
+            .scrollable(false)
+            .onChange((index: number) => {
+              this.currentTabIndex = index;
+            })
+            .padding({
+              bottom: this.bottom
+            })
+          }
+        }
+      }
+    }
+    .mode(NavigationMode.Stack)
+    .navDestination(this.PagesMap)
+    .height(CommonConstants.FULL_HEIGHT_PERCENT)
+    .hideTitleBar(true)
+    .hideToolBar(true)
+  }
+  // [EndExclude init_pop_custom_style]
+}
+// [End init_pop_custom_style]
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/src/main/module.json5 b/MultiFinancialManagement/product/phone/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..3ef13f42c4677c39fe11d9c046a48dabf137bd76
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/module.json5
@@ -0,0 +1,40 @@
+{
+  "module": {
+    "name": "phone",
+    "type": "entry",
+    "description": "$string:module_desc",
+    "mainElement": "EntryAbility",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ],
+    "deliveryWithInstall": true,
+    "installationFree": false,
+    "pages": "$profile:main_pages",
+    "abilities": [
+      {
+        "name": "EntryAbility",
+        "srcEntry": "./ets/entryability/EntryAbility.ets",
+        "description": "$string:EntryAbility_desc",
+        "icon": "$media:layered_image",
+        "label": "$string:EntryAbility_label",
+        "startWindowIcon": "$media:startIcon",
+        "startWindowBackground": "$color:start_window_background",
+        "minWindowWidth": 360,
+        "minWindowHeight": 720,
+        "exported": true,
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/element/color.json b/MultiFinancialManagement/product/phone/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..1e87cfd0b724301369c18bd3c466acc10a2d4506
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/resources/base/element/color.json
@@ -0,0 +1,40 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "dialog_background",
+      "value": "#00FFFFFF"
+    },
+    {
+      "name": "dialog_mask",
+      "value": "#99000000"
+    },
+    {
+      "name": "home_background",
+      "value": "#F7F7F7"
+    },
+    {
+      "name": "bar_background",
+      "value": "#2ef1f3f5"
+    },
+    {
+      "name": "tab_choose_image",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "tab_un_image",
+      "value": "#33000000"
+    },
+    {
+      "name": "tab_choose_text",
+      "value": "#0A59F7"
+    },
+    {
+      "name": "tab_un_text",
+      "value": "#33000000"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/element/float.json b/MultiFinancialManagement/product/phone/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..2b137e31ba0c2c560780eafe7399c52ac13596c0
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/resources/base/element/float.json
@@ -0,0 +1,28 @@
+{
+  "float": [
+    {
+      "name": "common_image_width",
+      "value": "24vp"
+    },
+    {
+      "name": "common_image_height",
+      "value": "24vp"
+    },
+    {
+      "name": "tab_text_size",
+      "value": "10fp"
+    },
+    {
+      "name": "tab_text_height",
+      "value": "14vp"
+    },
+    {
+      "name": "tab_bar_width",
+      "value": "96vp"
+    },
+    {
+      "name": "tab_bar_height",
+      "value": "56vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/element/string.json b/MultiFinancialManagement/product/phone/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..c2919cc646dd8135a51e28c40dd33557df4d6ada
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/resources/base/element/string.json
@@ -0,0 +1,36 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "MultiFinancialManagement"
+    },
+    {
+      "name": "tab_bar_home",
+      "value": "home"
+    },
+    {
+      "name": "tab_bar_card",
+      "value": "card"
+    },
+    {
+      "name": "tab_bar_fortunes",
+      "value": "fortunes"
+    },
+    {
+      "name": "tab_bar_life",
+      "value": "life"
+    },
+    {
+      "name": "tab_bar_mine",
+      "value": "mine"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/background.png b/MultiFinancialManagement/product/phone/src/main/resources/base/media/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..f939c9fa8cc8914832e602198745f592a0dfa34d
Binary files /dev/null and b/MultiFinancialManagement/product/phone/src/main/resources/base/media/background.png differ
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/foreground.png b/MultiFinancialManagement/product/phone/src/main/resources/base/media/foreground.png
new file mode 100644
index 0000000000000000000000000000000000000000..4483ddad1f079e1089d685bd204ee1cfe1d01902
Binary files /dev/null and b/MultiFinancialManagement/product/phone/src/main/resources/base/media/foreground.png differ
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_fold_background.png b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_fold_background.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ecbe63c76052be4f6f9cbb2dafd0e62238eff6d
Binary files /dev/null and b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_fold_background.png differ
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_fortunes.svg b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_fortunes.svg
new file mode 100644
index 0000000000000000000000000000000000000000..27236e9117514e1e9fff77ba9278728504735003
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_fortunes.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>财富</title>
+    <g id="典型页面-1：首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="财富" fill="#0A59F7" fill-rule="nonzero">
+            <g id="编组">
+                <path d="M10.9998956,0 C17.0652783,0 21.9997613,4.93454264 21.9997613,10.9999552 C21.9997613,17.0652783 17.0652485,21.9997911 10.9998956,21.9997911 C4.93451279,21.9997911 0,17.0652783 0,10.9999254 C0,4.93451279 4.93451279,0 10.9998956,0 Z M11.8005368,4.52646382 L10.170937,4.52646382 L10.170937,6.22367889 L9.97204717,6.26056577 C8.54361938,6.55920023 7.7773915,7.47677479 7.67681056,9.01759824 C7.59615564,10.5673488 8.69050265,11.541892 10.9548088,11.9386618 C11.9879559,12.0976442 12.5045593,12.4357803 12.5045593,12.9523837 C12.5045593,13.6677449 12.0075601,14.0246498 11.0143675,14.0246498 C10.1400536,14.0646043 9.56392136,13.4884421 9.28473701,12.295792 C9.18067743,11.8751401 8.80070861,11.5632791 8.34790073,11.5632791 C7.8149272,11.5632791 7.38286678,11.9953395 7.38286678,12.5283131 C7.38286678,12.654827 7.40721178,12.7756548 7.45147265,12.8863674 L7.45147265,12.8863674 L7.43726272,12.83255 C7.90173731,14.525707 8.8167218,15.4871807 10.1701314,15.7381271 L10.1701314,15.7381271 L10.1701314,17.4435181 L11.7997013,17.4435181 L11.7997013,15.7430207 L12.0142139,15.7073379 C13.6252925,15.406925 14.4654309,14.4890609 14.5326595,12.9523538 C14.5326595,11.4025735 13.4799081,10.4280302 11.3727643,10.0312605 C10.1408593,9.79242874 9.564727,9.43483763 9.64454644,8.9580992 C9.68372511,8.40166067 10.1220905,8.10419524 10.9556144,8.06352461 C11.6504625,8.06352461 12.1200078,8.47692202 12.3635535,9.30216087 C12.4593362,9.75741985 12.8632555,10.0992037 13.3470027,10.0992037 C13.9020426,10.0992037 14.3519914,9.64925495 14.3519914,9.09421502 C14.3519914,8.96334569 14.326977,8.83831879 14.2814686,8.72365476 L14.2814686,8.72365476 L14.2946633,8.77885604 C13.9687612,7.38388067 13.1319849,6.55444472 11.8005368,6.27168992 L11.8005368,6.27168992 L11.8005368,4.52646382 Z" id="形状结合"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_mine.svg b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_mine.svg
new file mode 100644
index 0000000000000000000000000000000000000000..62a5b62bce8cbec51c56c1db00f7317e4e9a52be
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_mine.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>我的</title>
+    <g id="典型页面-1：首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的" transform="translate(0.800033, 0.500000)">
+            <g id="编组" transform="translate(0.000000, 0.000000)">
+                <path d="M10.6732784,0.00140414107 L10.4999672,8.95283847e-13 C4.76563276,8.95283847e-13 0.0942098729,4.60067747 0.00137132636,10.3266888 L1.98951966e-13,10.4918989 C1.98951966e-13,16.2343344 4.60064466,20.9057573 10.326656,20.9985959 L10.4918661,20.9999672 C16.2343016,20.9999672 20.9057245,16.3993225 20.998563,10.6733112 L20.9999344,10.5081011 C20.9999344,4.76566558 16.3992897,0.0942426876 10.6732784,0.00140414107 Z" id="形状结合" fill="#0A59F7"></path>
+                <path d="M10.4999672,11.3900553 C13.5199031,11.3900553 16.0478545,13.4964918 16.6947103,16.3202539 C15.1438117,17.970056 12.942184,19 10.5,19 C8.05781599,19 5.8561883,17.970056 4.30578106,16.320832 C4.95207989,13.4964918 7.48003124,11.3900553 10.4999672,11.3900553 Z M10.4999672,4.80882353 C12.1568214,4.80882353 13.4999672,6.15196928 13.4999672,7.80882353 C13.4999672,9.46567778 12.1568214,10.8088235 10.4999672,10.8088235 C8.84311294,10.8088235 7.49996719,9.46567778 7.49996719,7.80882353 C7.49996719,6.15196928 8.84311294,4.80882353 10.4999672,4.80882353 Z" id="形状结合" fill-opacity="0.8" fill="#FFFFFF" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_mine_filled.svg b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_mine_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dbeec6ef94878c69058ce80156916747920a5102
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_mine_filled.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>我的</title>
+    <g id="典型页面-1：首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的" transform="translate(0.800033, 0.500000)" fill="#000000" fill-rule="nonzero">
+            <g id="编组" transform="translate(0.000000, 0.000000)">
+                <path d="M10.6732784,0.00140414107 L10.4999672,8.95283847e-13 C4.76563276,8.95283847e-13 0.0942098729,4.60067747 0.00137132636,10.3266888 L1.98951966e-13,10.4918989 C1.98951966e-13,16.2343344 4.60064466,20.9057573 10.326656,20.9985959 L10.4918661,20.9999672 C16.2343016,20.9999672 20.9057245,16.3993225 20.998563,10.6733112 L20.9999344,10.5081011 C20.9999344,4.76566558 16.3992897,0.0942426876 10.6732784,0.00140414107 Z" id="形状结合" fill-opacity="0.2"></path>
+                <path d="M10.4999672,11.3900553 C13.5199031,11.3900553 16.0478545,13.4964918 16.6947103,16.3202539 C15.1438117,17.970056 12.942184,19 10.5,19 C8.05781599,19 5.8561883,17.970056 4.30578106,16.320832 C4.95207989,13.4964918 7.48003124,11.3900553 10.4999672,11.3900553 Z M10.4999672,4.80882353 C12.1568214,4.80882353 13.4999672,6.15196928 13.4999672,7.80882353 C13.4999672,9.46567778 12.1568214,10.8088235 10.4999672,10.8088235 C8.84311294,10.8088235 7.49996719,9.46567778 7.49996719,7.80882353 C7.49996719,6.15196928 8.84311294,4.80882353 10.4999672,4.80882353 Z" id="形状结合" fill-opacity="0.25"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_not_background.png b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_not_background.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb33baf308415ec4d46654cedbdaed9eaf59ffab
Binary files /dev/null and b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_not_background.png differ
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_phone_background.png b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_phone_background.png
new file mode 100644
index 0000000000000000000000000000000000000000..dba3b16cfcc0687ad7d0270fe96b339fb69abf83
Binary files /dev/null and b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_phone_background.png differ
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_tablet_background.png b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_tablet_background.png
new file mode 100644
index 0000000000000000000000000000000000000000..631fd5f624d63d7e4b96e81cc32b8167f182911d
Binary files /dev/null and b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_home_tablet_background.png differ
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_life_filled.svg b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_life_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b1aba5b5eb63534290b53c06fe7815720796b052
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_life_filled.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="21px" height="20px" viewBox="0 0 21 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>生活</title>
+    <defs>
+        <path d="M16,0 C18.209139,-4.05812251e-16 20,1.790861 20,4 L20,16 C20,18.209139 18.209139,20 16,20 L4,20 C1.790861,20 2.705415e-16,18.209139 0,16 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 L16,0 Z M14.5,4 C14.0857864,4 13.75,4.33578644 13.75,4.75 C13.75,6.82106781 12.0710678,8.5 10,8.5 C7.92893219,8.5 6.25,6.82106781 6.25,4.75 C6.25,4.33578644 5.91421356,4 5.5,4 C5.08578644,4 4.75,4.33578644 4.75,4.75 C4.75,7.64949494 7.10050506,10 10,10 C12.8994949,10 15.25,7.64949494 15.25,4.75 C15.25,4.33578644 14.9142136,4 14.5,4 Z" id="path-1"></path>
+    </defs>
+    <g id="典型页面-1：首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="生活" transform="translate(0.700000, 0.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="形状结合"></g>
+            <g id="编组" mask="url(#mask-2)">
+                <g transform="translate(-2.000000, -2.000000)" id="Symbol/color-light/colorPrimary">
+                    <rect id="color/#000000" fill="#0A59F7" x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_public_cards_filled.svg b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_public_cards_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..965b18a454a95133c73c7a3b9b917e538c1a217c
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_public_cards_filled.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="23px" height="18px" viewBox="0 0 23 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>信用卡</title>
+    <defs>
+        <path d="M22,6 L22,14 C22,16.209139 20.209139,18 18,18 L4,18 C1.790861,18 2.705415e-16,16.209139 0,14 L0,6 L22,6 Z M9.25,8 L2.75,8 C2.33578644,8 2,8.33578644 2,8.75 C2,9.16421356 2.33578644,9.5 2.75,9.5 L2.75,9.5 L9.25,9.5 C9.66421356,9.5 10,9.16421356 10,8.75 C10,8.33578644 9.66421356,8 9.25,8 L9.25,8 Z M4,0 L18,0 C20.1421954,-3.9351491e-16 21.8910789,1.68396847 21.9951047,3.80035966 L22,4 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="path-1"></path>
+    </defs>
+    <g id="典型页面-1：首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="信用卡" transform="translate(0.700000, 0.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="Combined-Shape"></g>
+            <g id="编组" mask="url(#mask-2)">
+                <g transform="translate(-1.000000, -3.000000)" id="Symbol/color-light/colorPrimary">
+                    <rect id="color/#000000" fill="#0A59F7" x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_public_home_filled.svg b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_public_home_filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..deb4371a0ec1c00f635cb10894fb3eefcf8a672f
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/resources/base/media/ic_public_home_filled.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="23px" height="22px" viewBox="0 0 23 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>首页</title>
+    <defs>
+        <path d="M11.3049515,3.1660135 L11.4029771,3.24242054 L11.4383705,3.27479678 L19.7500539,11.1988369 L19.7500539,17.8648386 C19.7500539,19.4625195 18.5011339,20.7684995 16.9263266,20.8597459 L16.7500539,20.8648386 L4.75005386,20.8648386 C3.15237298,20.8648386 1.84639298,19.6159187 1.75514656,18.0411114 L1.75005386,17.8648386 L1.75005386,11.1988369 L10.0618496,3.27479678 C10.4076544,2.94672556 10.9310356,2.91207618 11.3049515,3.1660135 Z M10.7500539,12.1148386 C9.15237298,12.1148386 7.84639298,13.3637586 7.75514656,14.9385658 L7.75005386,15.1148386 L7.75005386,18.8648386 L13.7500539,18.8648386 L13.7500539,15.1148386 C13.7500539,13.4579844 12.4069081,12.1148386 10.7500539,12.1148386 Z M8.14899189,0.961019894 C9.69547868,-0.364524787 12.0094898,-0.31881635 13.5030439,1.09814521 L13.5030439,1.09814521 L21.1882626,8.38925013 L21.2682366,8.47439656 C21.5892803,8.85860159 21.5784305,9.43093048 21.2254659,9.80297426 C20.8453501,10.2036368 20.2124043,10.2202933 19.8117417,9.84017753 L19.8117417,9.84017753 L12.126523,2.5490726 L12.0133993,2.4494676 C11.2406369,1.81863588 10.1084047,1.85183755 9.3734813,2.5490726 L9.3734813,2.5490726 L1.6882626,9.84017753 L1.59902778,9.91556251 C1.19846918,10.2159546 0.627503086,10.175018 0.27453847,9.80297426 C-0.10557727,9.40231172 -0.0889208004,8.76936587 0.311741737,8.38925013 L0.311741737,8.38925013 L7.99696044,1.09814521 Z" id="path-1"></path>
+    </defs>
+    <g id="典型页面-1：首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页" transform="translate(0.949946, 0.385161)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="形状结合" fill-rule="nonzero"></g>
+            <g id="编组" mask="url(#mask-2)">
+                <g transform="translate(-1.249946, -1.385161)" id="Symbol/color-light/colorPrimary">
+                    <rect id="color/#000000" fill="#0A59F7" x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/icon.png b/MultiFinancialManagement/product/phone/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd45accb1dfd2fd0da16c732c72faa6e46b26521
Binary files /dev/null and b/MultiFinancialManagement/product/phone/src/main/resources/base/media/icon.png differ
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/layered_image.json b/MultiFinancialManagement/product/phone/src/main/resources/base/media/layered_image.json
new file mode 100644
index 0000000000000000000000000000000000000000..fb49920440fb4d246c82f9ada275e26123a2136a
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/resources/base/media/layered_image.json
@@ -0,0 +1,7 @@
+{
+  "layered-image":
+  {
+    "background" : "$media:background",
+    "foreground" : "$media:foreground"
+  }
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/media/startIcon.png b/MultiFinancialManagement/product/phone/src/main/resources/base/media/startIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b
Binary files /dev/null and b/MultiFinancialManagement/product/phone/src/main/resources/base/media/startIcon.png differ
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/base/profile/main_pages.json b/MultiFinancialManagement/product/phone/src/main/resources/base/profile/main_pages.json
new file mode 100644
index 0000000000000000000000000000000000000000..1898d94f58d6128ab712be2c68acc7c98e9ab9ce
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/resources/base/profile/main_pages.json
@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/Index"
+  ]
+}
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/en_US/element/string.json b/MultiFinancialManagement/product/phone/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..c2919cc646dd8135a51e28c40dd33557df4d6ada
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/resources/en_US/element/string.json
@@ -0,0 +1,36 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "MultiFinancialManagement"
+    },
+    {
+      "name": "tab_bar_home",
+      "value": "home"
+    },
+    {
+      "name": "tab_bar_card",
+      "value": "card"
+    },
+    {
+      "name": "tab_bar_fortunes",
+      "value": "fortunes"
+    },
+    {
+      "name": "tab_bar_life",
+      "value": "life"
+    },
+    {
+      "name": "tab_bar_mine",
+      "value": "mine"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/product/phone/src/main/resources/zh_CN/element/string.json b/MultiFinancialManagement/product/phone/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..d51095329edda1f8c1c15c2925d8fd7a8c28f007
--- /dev/null
+++ b/MultiFinancialManagement/product/phone/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,36 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "模块描述"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "银行理财"
+    },
+    {
+      "name": "tab_bar_home",
+      "value": "首页"
+    },
+    {
+      "name": "tab_bar_card",
+      "value": "信用卡"
+    },
+    {
+      "name": "tab_bar_fortunes",
+      "value": "财富"
+    },
+    {
+      "name": "tab_bar_life",
+      "value": "生活"
+    },
+    {
+      "name": "tab_bar_mine",
+      "value": "我的"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiFinancialManagement/screenshots/device/foldable.en.png b/MultiFinancialManagement/screenshots/device/foldable.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ec5410131d095dd77a458e859947e232eddf591
Binary files /dev/null and b/MultiFinancialManagement/screenshots/device/foldable.en.png differ
diff --git a/MultiFinancialManagement/screenshots/device/foldable.png b/MultiFinancialManagement/screenshots/device/foldable.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b315bae9fc7de5a96968d9e9f09023d5cfced3d
Binary files /dev/null and b/MultiFinancialManagement/screenshots/device/foldable.png differ
diff --git a/MultiFinancialManagement/screenshots/device/pad.en.png b/MultiFinancialManagement/screenshots/device/pad.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..e224dfdd7263abdf40d2974bcd11df3aad5d1c8a
Binary files /dev/null and b/MultiFinancialManagement/screenshots/device/pad.en.png differ
diff --git a/MultiFinancialManagement/screenshots/device/pad.png b/MultiFinancialManagement/screenshots/device/pad.png
new file mode 100644
index 0000000000000000000000000000000000000000..05f7ac6ebb4e928e744ce74b746b88360bad28b6
Binary files /dev/null and b/MultiFinancialManagement/screenshots/device/pad.png differ
diff --git a/MultiFinancialManagement/screenshots/device/phone.en.png b/MultiFinancialManagement/screenshots/device/phone.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..2db6f9d1cb660a7a87ab9f9b928dc0fd1166fd0f
Binary files /dev/null and b/MultiFinancialManagement/screenshots/device/phone.en.png differ
diff --git a/MultiFinancialManagement/screenshots/device/phone.png b/MultiFinancialManagement/screenshots/device/phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..bcc886198a0c16f6b266794e522072ca14007685
Binary files /dev/null and b/MultiFinancialManagement/screenshots/device/phone.png differ
diff --git a/MultiFinancialManagement/screenshots/device/run.png b/MultiFinancialManagement/screenshots/device/run.png
new file mode 100644
index 0000000000000000000000000000000000000000..7655fa7e041bb067e028029d820bd2d320e2cd83
Binary files /dev/null and b/MultiFinancialManagement/screenshots/device/run.png differ
diff --git a/MultiPictureBeautification/AppScope/app.json5 b/MultiPictureBeautification/AppScope/app.json5
new file mode 100644
index 0000000000000000000000000000000000000000..077baae64fa0358a4481e0a3f9a3e47b98a96639
--- /dev/null
+++ b/MultiPictureBeautification/AppScope/app.json5
@@ -0,0 +1,10 @@
+{
+  "app": {
+    "bundleName": "com.example.multipicturebeautification",
+    "vendor": "example",
+    "versionCode": 1000000,
+    "versionName": "1.0.0",
+    "icon": "$media:app_icon",
+    "label": "$string:app_name"
+  }
+}
diff --git a/MultiPictureBeautification/AppScope/resources/base/element/string.json b/MultiPictureBeautification/AppScope/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..680de91f2f730e1f903ff5e704ae32d969149910
--- /dev/null
+++ b/MultiPictureBeautification/AppScope/resources/base/element/string.json
@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "MultiPictureBeautification"
+    }
+  ]
+}
diff --git a/MultiPictureBeautification/AppScope/resources/base/media/app_icon.png b/MultiPictureBeautification/AppScope/resources/base/media/app_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd45accb1dfd2fd0da16c732c72faa6e46b26521
Binary files /dev/null and b/MultiPictureBeautification/AppScope/resources/base/media/app_icon.png differ
diff --git a/MultiPictureBeautification/LICENSE b/MultiPictureBeautification/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..0210352ae2ade0dd7b4c841cb6e8ba08b4780038
--- /dev/null
+++ b/MultiPictureBeautification/LICENSE
@@ -0,0 +1,78 @@
+   Copyright (c) 2023 Huawei Device Co., Ltd. All rights reserved.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+Apache License, Version 2.0
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+
+"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License.
+
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License.
+
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution.
+
+You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+1.You must give any other recipients of the Work or Derivative Works a copy of this License; and
+2.You must cause any modified files to carry prominent notices stating that You changed the files; and
+3.You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
+4.If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions.
+
+Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+
+6. Trademarks.
+
+This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty.
+
+Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability.
+
+In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability.
+
+While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
\ No newline at end of file
diff --git a/MultiPictureBeautification/README.en.md b/MultiPictureBeautification/README.en.md
new file mode 100644
index 0000000000000000000000000000000000000000..9e0f8cea9ce9c8e295d0d2991a359c7bc1baea70
--- /dev/null
+++ b/MultiPictureBeautification/README.en.md
@@ -0,0 +1,42 @@
+# Image Beautification
+
+### Introduction
+
+Learn to implement an image beautification app based on the adaptive layout and responsive layout, achieving one-time development for multi-device deployment.
+
+#### Description
+
+This codelab implements an image beautification app based on the adaptive layout and responsive layout, achieving one-time development for multi-device deployment. It uses the three-layer project architecture for code reuse and tailors the pages to different device sizes such as mobile phones, foldable phones, and PC/2-in-1 devices.
+The following figure shows the effect on the mobile phone.
+
+![](screenshots/device/phone_en.png)
+
+The following figure shows the effect on the foldable phone in unfolded state.
+
+![](screenshots/device/foldable_en.png)
+
+The following figure shows the effect of the tablet and PC/2-in-1 device.
+
+![](screenshots/device/pad_en.png)
+
+#### Concepts
+
+- One-time development for multi-device deployment: It enables you to develop and release one set of project code for deployment on multiple devices as demanded. This feature enables you to efficiently develop applications that are compatible with multiple devices while providing distributed user experiences for cross-device transferring, migration, and collaboration.
+- Area change event: It is triggered when the component's size, position, or any other attribute that may affect its display area changes.
+- PinchGesture: It is used to trigger a pinch gesture, which requires two to five fingers with a minimum 5 vp distance between the fingers.
+
+#### Permissions
+
+N/A.
+
+#### How to Use
+
+- Install and open an app on a mobile phone, foldable phone, tablet, or PC/2-in-1 device. The responsive layout and adaptive layout are used to display different effects on the app pages over different devices.
+- Tap the edit or album icon to access the photo editing page or album page.
+
+#### Constraints
+
+1. The sample is only supported on Huawei phones with standard systems.
+2. HarmonyOS: HarmonyOS 5.0.0 Release or later.
+3. DevEco Studio: DevEco Studio 5.0.0 Release or later.
+4. HarmonyOS SDK: HarmonyOS 5.0.0 Release SDK or later.
diff --git a/MultiPictureBeautification/README.md b/MultiPictureBeautification/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..6ba0d6478089d51d9adfe07aefc4725ba90d2d36
--- /dev/null
+++ b/MultiPictureBeautification/README.md
@@ -0,0 +1,42 @@
+# 一次开发，多端部署-图片美化
+
+### 简介
+
+基于自适应和响应式布局，实现一次开发，多端部署-图片美化。
+
+#### 介绍
+
+本篇Codelab基于自适应布局和响应式布局，实现一次开发，多端部署的即时通讯页面。通过“三层工程架构”实现代码复用，并根据手机、折叠屏以及PC/2in1不同的设备尺寸设计对应页面。
+手机效果如图所示：
+
+![](screenshots/device/phone.png)
+
+折叠屏展开态效果如图所示：
+
+![](screenshots/device/foldable.png)
+
+平板，PC/2in1效果如图所示：
+
+![](screenshots/device/pad.png)
+
+#### 相关概念
+
+- 一次开发，多端部署：一套代码工程，一次开发上架，多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用，实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验。
+- 组件区域变化事件：组件区域变化事件指组件显示的尺寸、位置等发生变化时触发的事件。
+- 双指缩放：用于触发捏合手势，触发捏合手势的最少手指为2指，最大为5指，最小识别距离为5vp。
+
+#### 相关权限
+
+不涉及。
+
+#### 使用说明
+
+- 分别在手机、折叠屏、平板、PC/2in1安装并打开应用，不同设备的应用页面通过响应式布局和自适应布局呈现不同的效果。
+- 点击编辑、相册图标将分别进入图片编辑页面，相册页面。
+
+#### 约束与限制
+
+1. 本示例仅支持标准系统上运行，支持设备：华为手机。
+2. HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。
+3. DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。
+4. HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。
\ No newline at end of file
diff --git a/MultiPictureBeautification/build-profile.json5 b/MultiPictureBeautification/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..ee4c7b2cff0e6b5e33f97a7b0daf0477fc2f8549
--- /dev/null
+++ b/MultiPictureBeautification/build-profile.json5
@@ -0,0 +1,85 @@
+{
+  "app": {
+    "signingConfigs": [
+      
+    ],
+    "products": [
+      {
+        "name": "default",
+        "signingConfig": "default",
+        "compatibleSdkVersion": "5.0.0(12)",
+        "runtimeOS": "HarmonyOS"
+      }
+    ],
+    "buildModeSet": [
+      {
+        "name": "debug",
+      },
+      {
+        "name": "release"
+      }
+    ]
+  },
+  "modules": [
+    {
+      "name": "phone",
+      "srcPath": "./product/phone",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "base",
+      "srcPath": "./commons/base",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "pictureView",
+      "srcPath": "./features/pictureView",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "albumView",
+      "srcPath": "./features/albumView",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "pictureEdit",
+      "srcPath": "./features/pictureEdit",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/commons/base/BuildProfile.ets b/MultiPictureBeautification/commons/base/BuildProfile.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3a501e5ddee8ea6d28961648fc7dd314a5304bd4
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/BuildProfile.ets
@@ -0,0 +1,17 @@
+/**
+ * Use these variables when you tailor your ArkTS code. They must be of the const type.
+ */
+export const HAR_VERSION = '1.0.0';
+export const BUILD_MODE_NAME = 'debug';
+export const DEBUG = true;
+export const TARGET_NAME = 'default';
+
+/**
+ * BuildProfile Class is used only for compatibility purposes.
+ */
+export default class BuildProfile { 
+	static readonly HAR_VERSION = HAR_VERSION;
+	static readonly BUILD_MODE_NAME = BUILD_MODE_NAME;
+	static readonly DEBUG = DEBUG;
+	static readonly TARGET_NAME = TARGET_NAME;
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/commons/base/Index.ets b/MultiPictureBeautification/commons/base/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9d5fa6ce2e6fddc516cf7beb6378e72c520049b8
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/Index.ets
@@ -0,0 +1,3 @@
+export { BaseConstants } from './src/main/ets/constants/BaseConstants'
+export { BreakpointConstants } from './src/main/ets/constants/BreakpointConstants'
+export { BreakpointType } from './src/main/ets/utils/BreakpointType'
\ No newline at end of file
diff --git a/MultiPictureBeautification/commons/base/build-profile.json5 b/MultiPictureBeautification/commons/base/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/commons/base/hvigorfile.ts b/MultiPictureBeautification/commons/base/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiPictureBeautification/commons/base/obfuscation-rules.txt b/MultiPictureBeautification/commons/base/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..985b2aeb7658286b17bd26eab8f217c3fe75ea8b
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/obfuscation-rules.txt
@@ -0,0 +1,18 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
\ No newline at end of file
diff --git a/MultiPictureBeautification/commons/base/oh-package.json5 b/MultiPictureBeautification/commons/base/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..47db8a72bb9acfc968637d504dc39688765e7e31
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/oh-package.json5
@@ -0,0 +1,10 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "base",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dependencies": {}
+}
diff --git a/MultiPictureBeautification/commons/base/src/main/ets/constants/BaseConstants.ets b/MultiPictureBeautification/commons/base/src/main/ets/constants/BaseConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b005fe234feddaeff2210827e3570fa75443c3f6
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/src/main/ets/constants/BaseConstants.ets
@@ -0,0 +1,139 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class BaseConstants {
+  /**
+   * Component size.
+   */
+  static readonly FULL_PERCENT: string = '100%';
+  static readonly FULL_SIZE: string = '100%';
+  static readonly FULL_HEIGHT: string = '100%';
+  static readonly FULL_WIDTH: string = '100%';
+  static readonly NINETY_WIDTH_PERCENT: string = '90%';
+  static readonly IMAGE_ONE_WIDTH_SM: string = '66.6%';
+  static readonly IMAGE_ONE_WIDTH_MD: string = '63.8%';
+  static readonly IMAGE_ONE_WIDTH_LG: string = '32.1%';
+  static readonly TAB_PADDING_TOP: string = '28.6%'
+  static readonly TAB_PADDING_BOTTOM: string = '28.6%'
+  static readonly HOME_LIST_WIDTH: string = '37%'
+  static readonly APPLET_LIST_WIDTH: string = '37%'
+  static readonly IMAGE_ONE_ASPECT_RATIO: number = 1.33;
+  static readonly SMALL_MINI_FONT_SIZE: Resource = $r('app.float.smaller_mini_font_size');
+  /**
+   * Text property.
+   */
+  static readonly FONT_FAMILY_SEMI_BOLD: Resource = $r('app.float.font_family_semi_bold');
+  static readonly FONT_FAMILY_NORMAL: Resource = $r('app.float.font_family_normal');
+  static readonly FONT_FAMILY_BOLD: Resource = $r('app.float.font_family_bold');
+  static readonly FONT_FAMILY_MEDIUM: Resource = $r('app.float.font_family_medium');
+  static readonly FONT_WEIGHT_SEVEN: number = 700;
+  static readonly FONT_WEIGHT_SIX: number = 600;
+  static readonly FONT_WEIGHT_FIVE: number = 500;
+  static readonly FONT_WEIGHT_FOUR: number = 400;
+  static readonly FONT_SIZE_TEN: Resource = $r('app.float.font_size_ten');
+  static readonly FONT_SIZE_ELEVEN: Resource = $r('app.float.font_size_eleven');
+  static readonly FONT_SIZE_TWELVE: Resource = $r('app.float.font_size_twelve');
+  static readonly FONT_SIZE_FOURTEEN: Resource = $r('app.float.font_size_fourteen');
+  static readonly FONT_SIZE_SIXTEEN: Resource = $r('app.float.font_size_sixteen');
+  static readonly FONT_SIZE_EIGHTEEN: Resource = $r('app.float.font_size_eighteen');
+  static readonly FONT_SIZE_TWENTY: Resource = $r('app.float.font_size_twenty');
+  static readonly FONT_SIZE_TWENTY_FOUR: Resource = $r('app.float.font_size_twenty_four');
+  static readonly FONT_SIZE_THIRTY_TWO: Resource = $r('app.float.font_size_thirty_two');
+  /**
+   * Application about.
+   */
+  static readonly SPLIT_DOCUMENT_SCREEN = false;
+  static readonly SPLIT_APPLET_SCREEN = false;
+  /**
+   * Flex about.
+   */
+  static readonly FLEX_GROW_ONE = 1;
+  static readonly LAYOUT_WEIGHT_ONE = 1;
+  static readonly FLEX_SHRINK_ZERO = 0;
+  static readonly FLEX_SHRINK_ONE = 1;
+  /**
+   * HomeTab.
+   */
+  static readonly HOME_TAB_HEIGHT_SM: string = '56vp';
+  static readonly HOME_TAB_HEIGHT_MD: string = '56vp';
+  static readonly HOME_TAB_HEIGHT_LG: string = '100%';
+  static readonly HOME_TAB_WIDTH_SM: string = '100%';
+  static readonly HOME_TAB_WIDTH_MD: string = '100%';
+  static readonly HOME_TAB_WIDTH_LG: string = '96vp';
+  static readonly CONTACTS_PHONE_WIDTH_SM: string = '27%';
+  static readonly CONTACTS_PHONE_WIDTH_MD: string = '28%';
+  static readonly CONTACTS_PHONE_WIDTH_LG: string = '25%';
+  static readonly CONTACTS_DETAIL_HEIGHT_SM: string = '100%';
+  static readonly CONTACTS_DETAIL_HEIGHT_MD: string = '100%';
+  static readonly CONTACTS_DETAIL_HEIGHT_LG: string = '90%';
+  static readonly CONTACTS_ITEM_HEIGHT_SM: string = '11%';
+  static readonly CONTACTS_ITEM_HEIGHT_MD: string = '11%';
+  static readonly CONTACTS_ITEM_HEIGHT_LG: string = '10%';
+  /**
+   * Document tab.
+   */
+  static readonly DOCUMENT_TITLE_HEIGHT_SM: string = '33%';
+  static readonly DOCUMENT_TITLE_HEIGHT_MD: string = '58%';
+  static readonly DOCUMENT_TITLE_HEIGHT_LG: string = '100%';
+  static readonly DOCUMENT_TITLE_SPACE_SM: number = 32;
+  static readonly DOCUMENT_TITLE_SPACE_MD: number = 56;
+  static readonly DOCUMENT_TITLE_SPACE_LG: number = 103;
+  /**
+   * Component opacity value: 1.
+   */
+  static readonly FULL_OPACITY: number = 1;
+  /**
+   * Component opacity value: 0.6.
+   */
+  static readonly SIXTY_OPACITY: number = 0.6;
+  /**
+   * Device grid column list.
+   */
+  static readonly DEVICE_GRID_COLUMNS: string[] = ['1fr 1fr', '1fr 1fr 1fr', '1fr 1fr 1fr 1fr', '1fr 1fr 1fr 1fr 1fr',
+    '1fr 1fr 1fr 1fr 1fr 1fr 1fr'];
+  /**
+   * Default icon size.
+   */
+  static readonly DEFAULT_ICON_SIZE: number = 24;
+  /**
+   * Device PC/2in1.
+   */
+  static readonly DEVICE_2IN1: string = '2in1';
+}
+
+/**
+ * Current feature home, applet or document.
+ */
+export enum CurrentFeature {
+  HOME = 0,
+  APPLET = 1,
+  DOCUMENT = 2
+}
+
+/**
+ * Current page home,conversation or socialCircle.
+ */
+export enum CurrentPage {
+  HOME = 0,
+  CONVERSATION = 1,
+  SOCIAL_CIRCLE = 2,
+  ME = 3
+}
+
+export enum DeviceTypes {
+  PHONE = 'phone',
+  TABLET = 'tablet',
+  "2IN1" = '2in1',
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/commons/base/src/main/ets/constants/BreakpointConstants.ets b/MultiPictureBeautification/commons/base/src/main/ets/constants/BreakpointConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6fb9f097882630e1ebe0fa1e9ce4d5ad8b751c27
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/src/main/ets/constants/BreakpointConstants.ets
@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Constants for breakpoint.
+ */
+export class BreakpointConstants {
+  /**
+   * Breakpoints that represent small device types.
+   */
+  static readonly BREAKPOINT_SM: string = 'sm';
+
+  /**
+   * Breakpoints that represent middle device types.
+   */
+  static readonly BREAKPOINT_MD: string = 'md';
+
+  /**
+   * Breakpoints that represent large device types.
+   */
+  static readonly BREAKPOINT_LG: string = 'lg';
+
+  /**
+   * Grid row column list.
+   */
+  static readonly GRID_ROW_COLUMNS: number[] = [12, 15, 4];
+
+  /**
+   * Grid column span list.
+   */
+  static readonly GRID_COLUMN_SPANS: number[] = [12, 6, 7, 5, 3, 4, 2];
+
+  /**
+   * Middle device width.
+   */
+  static readonly MIDDLE_DEVICE_WIDTH: number = 600;
+
+  /**
+   * Large device width.
+   */
+  static readonly LARGE_DEVICE_WIDTH: number = 840;
+  /**
+   * Breakpoints that represent large device types.
+   */
+  static readonly BREAKPOINT_SCOPE: number[] = [0, 320, 600, 840];
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/commons/base/src/main/ets/utils/BreakpointType.ets b/MultiPictureBeautification/commons/base/src/main/ets/utils/BreakpointType.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ee5e17d15242b712cb3685e860c8cfcf61f679be
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/src/main/ets/utils/BreakpointType.ets
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants } from '../constants/BreakpointConstants';
+
+export class BreakpointType<T> {
+  sm: T;
+  md: T;
+  lg: T;
+
+  constructor(sm: T, md: T, lg: T) {
+    this.sm = sm;
+    this.md = md;
+    this.lg = lg;
+  }
+
+  GetValue(currentBreakpoint: string): T {
+    if (currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      return this.md;
+    } else if (currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      return this.lg;
+    } else {
+      return this.sm;
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/commons/base/src/main/module.json5 b/MultiPictureBeautification/commons/base/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..5b88767e30950571337935f398f2dcbf4d1b822d
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/src/main/module.json5
@@ -0,0 +1,11 @@
+{
+  "module": {
+    "name": "base",
+    "type": "har",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/commons/base/src/main/resources/base/element/color.json b/MultiPictureBeautification/commons/base/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..1bbc9aa9617e97c45440e1d3d66afc1154837012
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/src/main/resources/base/element/color.json
@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/commons/base/src/main/resources/base/element/float.json b/MultiPictureBeautification/commons/base/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..38643e439a3a7de1c6bbdd2ab61cacdad93fb129
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/src/main/resources/base/element/float.json
@@ -0,0 +1,120 @@
+{
+  "float": [
+    {
+      "name": "micro_font_size",
+      "value": "10fp"
+    },
+    {
+      "name": "smaller_mini_font_size",
+      "value": "11fp"
+    },
+    {
+      "name": "icon_height_one",
+      "value": "24vp"
+    },
+    {
+      "name": "icon_width_one",
+      "value": "24vp"
+    },
+    {
+      "name": "icon_margin_one",
+      "value": "12vp"
+    },
+    {
+      "name": "icon_margin_two",
+      "value": "24vp"
+    },
+    {
+      "name": "main_image_size",
+      "value": "22vp"
+    },
+    {
+      "name": "main_image_size_lg",
+      "value": "24vp"
+    },
+    {
+      "name": "avatar_image_size",
+      "value": "40vp"
+    },
+    {
+      "name": "bar_width",
+      "value": "96vp"
+    },
+    {
+      "name": "text_line_height_one",
+      "value": "19vp"
+    },
+    {
+      "name": "text_line_height_three",
+      "value": "14vp"
+    },
+    {
+      "name": "text_line_height_two",
+      "value": "22vp"
+    },
+    {
+      "name": "text_line_height_five",
+      "value": "21vp"
+    },
+    {
+      "name": "background_color_grey",
+      "value": "#111111"
+    },
+    {
+      "name": "input_raduis_one",
+      "value": "20vp"
+    },
+    {
+      "name": "font_family_normal",
+      "value": "HarmonyHeiTi"
+    },
+    {
+      "name": "font_family_medium",
+      "value": "HarmonyHeiTi-Medium"
+    },
+    {
+      "name": "font_family_bold",
+      "value": "HarmonyHeiTi-Bold"
+    },
+    {
+      "name": "font_family_semi_bold",
+      "value": "HarmonyHeiTi-SemiBold"
+    },
+    {
+      "name": "font_size_ten",
+      "value": "10fp"
+    },
+    {
+      "name": "font_size_eleven",
+      "value": "11fp"
+    },
+    {
+      "name": "font_size_twelve",
+      "value": "12fp"
+    },
+    {
+      "name": "font_size_fourteen",
+      "value": "14fp"
+    },
+    {
+      "name": "font_size_sixteen",
+      "value": "16fp"
+    },
+    {
+      "name": "font_size_eighteen",
+      "value": "18fp"
+    },
+    {
+      "name": "font_size_twenty",
+      "value": "20fp"
+    },
+    {
+      "name": "font_size_twenty_four",
+      "value": "24fp"
+    },
+    {
+      "name": "font_size_thirty_two",
+      "value": "32fp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/commons/base/src/main/resources/base/element/string.json b/MultiPictureBeautification/commons/base/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..98e1d8a84b3d8539ea33e79fe2ac593a05d23bb4
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/src/main/resources/base/element/string.json
@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/commons/base/src/main/resources/base/media/ic_public_back.svg b/MultiPictureBeautification/commons/base/src/main/resources/base/media/ic_public_back.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8135b60df3db143f028f0b3de26061b0aa17d99a
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/src/main/resources/base/media/ic_public_back.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_back</title>
+    <defs>
+        <path d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_back" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#FFFFFF" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/commons/base/src/main/resources/base/media/ic_public_back_black.svg b/MultiPictureBeautification/commons/base/src/main/resources/base/media/ic_public_back_black.svg
new file mode 100644
index 0000000000000000000000000000000000000000..66e3df10acde5c58b785774850139d12b0f4ad04
--- /dev/null
+++ b/MultiPictureBeautification/commons/base/src/main/resources/base/media/ic_public_back_black.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_back</title>
+    <defs>
+        <path d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_back" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/commons/base/src/main/resources/base/media/setting.jpeg b/MultiPictureBeautification/commons/base/src/main/resources/base/media/setting.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..57e67dd49d39ad64ef090f59db3db9dfe6632106
Binary files /dev/null and b/MultiPictureBeautification/commons/base/src/main/resources/base/media/setting.jpeg differ
diff --git a/MultiPictureBeautification/features/albumView/BuildProfile.ets b/MultiPictureBeautification/features/albumView/BuildProfile.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3a501e5ddee8ea6d28961648fc7dd314a5304bd4
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/BuildProfile.ets
@@ -0,0 +1,17 @@
+/**
+ * Use these variables when you tailor your ArkTS code. They must be of the const type.
+ */
+export const HAR_VERSION = '1.0.0';
+export const BUILD_MODE_NAME = 'debug';
+export const DEBUG = true;
+export const TARGET_NAME = 'default';
+
+/**
+ * BuildProfile Class is used only for compatibility purposes.
+ */
+export default class BuildProfile { 
+	static readonly HAR_VERSION = HAR_VERSION;
+	static readonly BUILD_MODE_NAME = BUILD_MODE_NAME;
+	static readonly DEBUG = DEBUG;
+	static readonly TARGET_NAME = TARGET_NAME;
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/Index.ets b/MultiPictureBeautification/features/albumView/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ddf5ef1395bdc8d31ba30d6118834b6bb3168108
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/Index.ets
@@ -0,0 +1 @@
+export { AlbumView } from './src/main/ets/views/AlbumView';
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/build-profile.json5 b/MultiPictureBeautification/features/albumView/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/hvigorfile.ts b/MultiPictureBeautification/features/albumView/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiPictureBeautification/features/albumView/obfuscation-rules.txt b/MultiPictureBeautification/features/albumView/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..985b2aeb7658286b17bd26eab8f217c3fe75ea8b
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/obfuscation-rules.txt
@@ -0,0 +1,18 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/oh-package.json5 b/MultiPictureBeautification/features/albumView/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..d59bec4fa9e4dba8a0e7be680e94f3505d6d21b8
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/oh-package.json5
@@ -0,0 +1,12 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "main": "Index.ets",
+  "author": "",
+  "name": "albumview",
+  "description": "Please describe the basic information.",
+  "version": "1.0.0",
+  "dependencies": {
+    "@ohos/commons": "file:../../commons/base"
+  }
+}
diff --git a/MultiPictureBeautification/features/albumView/src/main/ets/constants/AlbumViewConstants.ets b/MultiPictureBeautification/features/albumView/src/main/ets/constants/AlbumViewConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b8b559f9d5dd5ec78860f0894c6fe9a3f72cb7a0
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/ets/constants/AlbumViewConstants.ets
@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Constants.
+ */
+export interface ImageData {
+  src: Resource,
+  selected: boolean
+}
+
+export class AlbumViewConstants {
+  /**
+   * Image list.
+   */
+  static readonly IMAGE_LIST: ImageData[] = [
+    { src: $r("app.media.album_photo1"), selected: false },
+    { src: $r("app.media.album_photo2"), selected: false },
+    { src: $r("app.media.album_photo3"), selected: false },
+    { src: $r("app.media.album_photo4"), selected: false },
+    { src: $r("app.media.album_photo5"), selected: false },
+    { src: $r("app.media.album_photo6"), selected: false },
+    { src: $r("app.media.album_photo7"), selected: false },
+    { src: $r("app.media.album_photo1"), selected: false },
+    { src: $r("app.media.album_photo2"), selected: false },
+    { src: $r("app.media.album_photo3"), selected: false },
+    { src: $r("app.media.album_photo4"), selected: false },
+    { src: $r("app.media.album_photo5"), selected: false },
+    { src: $r("app.media.album_photo6"), selected: false },
+    { src: $r("app.media.album_photo7"), selected: false },
+    { src: $r("app.media.album_photo1"), selected: false },
+    { src: $r("app.media.album_photo2"), selected: false },
+    { src: $r("app.media.album_photo3"), selected: false },
+    { src: $r("app.media.album_photo4"), selected: false },
+    { src: $r("app.media.album_photo5"), selected: false },
+    { src: $r("app.media.album_photo6"), selected: false },
+    { src: $r("app.media.album_photo7"), selected: false },
+    { src: $r("app.media.album_photo1"), selected: false },
+    { src: $r("app.media.album_photo2"), selected: false },
+    { src: $r("app.media.album_photo3"), selected: false },
+    { src: $r("app.media.album_photo4"), selected: false },
+    { src: $r("app.media.album_photo5"), selected: false },
+    { src: $r("app.media.album_photo6"), selected: false },
+    { src: $r("app.media.album_photo7"), selected: false },
+    { src: $r("app.media.album_photo1"), selected: false },
+    { src: $r("app.media.album_photo2"), selected: false },
+    { src: $r("app.media.album_photo3"), selected: false },
+    { src: $r("app.media.album_photo4"), selected: false },
+    { src: $r("app.media.album_photo5"), selected: false },
+    { src: $r("app.media.album_photo6"), selected: false },
+    { src: $r("app.media.album_photo7"), selected: false },
+    { src: $r("app.media.album_photo1"), selected: false },
+    { src: $r("app.media.album_photo2"), selected: false },
+    { src: $r("app.media.album_photo3"), selected: false },
+    { src: $r("app.media.album_photo4"), selected: false },
+    { src: $r("app.media.album_photo5"), selected: false },
+    { src: $r("app.media.album_photo6"), selected: false },
+    { src: $r("app.media.album_photo7"), selected: false }
+  ];
+  /**
+   * Default text.
+   */
+  static DES_TEXT = '图片';
+  /**
+   * Side constants.
+   */
+  static SideConstants: string[] = ['    照片、人物、地点...', '相册', '图片', '我的收藏', '12', '视频', '新建相册1', '新建相册1', '人像', '地点', '上海市', '北京市', '南京市', '分类'];
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/src/main/ets/views/AlbumView.ets b/MultiPictureBeautification/features/albumView/src/main/ets/views/AlbumView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6f8a50e0e142e17ae45d22630c44927839f2a2a0
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/ets/views/AlbumView.ets
@@ -0,0 +1,206 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SideColumn } from './SideColumn';
+import { AlbumViewConstants, ImageData } from '../constants/AlbumViewConstants'
+import { BaseConstants, BreakpointConstants } from '@ohos/commons/';
+import { deviceInfo } from '@kit.BasicServicesKit';
+
+// Grid unit.
+const DEFAULT_GRID_TEMPLATE: string = '1fr';
+// Animate Item.
+const ANIMATE_TIME: number = 100;
+// Max grid column.
+const MAX_GRID_COLUMN = 16;
+// Min grid column.
+const MIN_GRID_COLUMN = 2;
+// Finger number.
+const FINGER_NUMBER = 2;
+// Delay time
+const DELAY = 70
+// Final delay time
+const FINAL_DELAY = 100
+
+@Component
+export struct AlbumView {
+  @StorageLink('currentBreakpoint') currentBp: string = BreakpointConstants.BREAKPOINT_SM;
+  // Grid column num.
+  @State gridColumn: number = 3;
+  // Grid row num.
+  @State gridRow: number = 2;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+  // Save up setTimeOut
+  timeOutUpDemo: number = 0
+  // Save down setTimeOut
+  timeOutDownDemo: number = 0
+
+  // Change the number of Grid columns based on the width of the Grid component.
+  // [Start get_grid_column]
+  getGridColumn(value: Length): number {
+    return Math.floor(2 * ((parseInt(JSON.stringify(value)) / 360) - 1) + 4);
+  }
+  // [End get_grid_column]
+
+  // PinchGesture up
+  up() {
+    if (!this.timeOutUpDemo) {
+      this.timeOutUpDemo = setTimeout(() => {
+        animateTo({
+          duration: ANIMATE_TIME
+        }, () => {
+          if (this.gridColumn > MIN_GRID_COLUMN) {
+            this.gridColumn -= 1;
+            clearTimeout(this.timeOutUpDemo)
+            this.timeOutUpDemo = 0
+          }
+        })
+      }, DELAY)
+    }
+    setTimeout(() => {
+      this.timeOutUpDemo = 0
+    }, FINAL_DELAY)
+  }
+
+  // PinchGesture down
+  down() {
+    if (!this.timeOutDownDemo) {
+      this.timeOutDownDemo = setTimeout(() => {
+        animateTo({
+          duration: ANIMATE_TIME
+        }, () => {
+          if (this.gridColumn < MAX_GRID_COLUMN) {
+            this.gridColumn += 1;
+            clearTimeout(this.timeOutDownDemo)
+            this.timeOutDownDemo = 0
+          }
+        })
+
+      }, DELAY)
+    }
+    setTimeout(() => {
+      this.timeOutDownDemo = 0
+    }, FINAL_DELAY)
+
+  }
+
+  @Builder
+  topRow() {
+    Column() {
+      Row() {
+        Button({ type: ButtonType.Circle, stateEffect: false }) {
+          Image($r('app.media.ic_public_back_black'))
+            .width(BaseConstants.DEFAULT_ICON_SIZE)
+            .height(BaseConstants.DEFAULT_ICON_SIZE)
+            .onClick(() => {
+              this.pageInfos.pop();
+            })
+        }
+        .width(BaseConstants.DEFAULT_ICON_SIZE)
+        .height(BaseConstants.DEFAULT_ICON_SIZE)
+        .backgroundColor(Color.White)
+        .margin({ right: $r('app.float.back_image_right') })
+
+        Text(AlbumViewConstants.DES_TEXT)
+          .fontSize(BaseConstants.FONT_SIZE_TWENTY)
+          .height($r('app.float.text_image_height'))
+        Blank()
+
+        if (this.currentBp === BreakpointConstants.BREAKPOINT_LG) {
+          Button({ type: ButtonType.Circle, stateEffect: false }) {
+            Image($r('app.media.ic_gallery_material_select_checkbox'))
+              .width(BaseConstants.DEFAULT_ICON_SIZE)
+              .height(BaseConstants.DEFAULT_ICON_SIZE)
+          }
+          .width(BaseConstants.DEFAULT_ICON_SIZE)
+          .height(BaseConstants.DEFAULT_ICON_SIZE)
+          .backgroundColor(Color.White)
+          .margin({ right: $r('app.float.select_button_margin_right') })
+        }
+
+        Button({ type: ButtonType.Circle, stateEffect: false }) {
+          Image($r('app.media.ic_public_more'))
+            .width(BaseConstants.DEFAULT_ICON_SIZE)
+            .height(BaseConstants.DEFAULT_ICON_SIZE)
+        }
+        .width(BaseConstants.DEFAULT_ICON_SIZE)
+        .height(BaseConstants.DEFAULT_ICON_SIZE)
+        .backgroundColor(Color.White)
+
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.tab_height'))
+      .backgroundColor(Color.White)
+      .padding({
+        left: $r('app.float.tab_left'),
+        right: $r('app.float.tab_right'),
+        top: $r('app.float.tab_top'),
+        bottom: $r('app.float.tab_bottom')
+      })
+      .visibility(Visibility.Visible)
+    }
+  }
+
+  build() {
+    NavDestination() {
+      Flex() {
+        if (this.currentBp === BreakpointConstants.BREAKPOINT_LG) {
+          SideColumn()
+            .width($r('app.float.side_width'))
+        }
+        // [Start album_view_change]
+        Flex({ direction: FlexDirection.Column }) {
+          // [StartExclude album_view_change]
+          this.topRow()
+          Flex() {
+            Grid() {
+              ForEach(AlbumViewConstants.IMAGE_LIST, (item: ImageData) => {
+                GridItem() {
+                  Image(item.src)
+                    .objectFit(ImageFit.Cover)
+                    .autoResize(true)
+                    .borderColor(item.selected ? Color.Blue : Color.White)
+                    .borderWidth(1)
+                }.aspectRatio(1)
+              }, (item: ImageData, index: number) => index + JSON.stringify(item))
+            }
+            .columnsTemplate(new Array(this.gridColumn).fill(DEFAULT_GRID_TEMPLATE).join(' '))
+
+          }
+          // [EndExclude album_view_change]
+          .onAreaChange((oldValue: Area, newValue: Area) => {
+            this.gridColumn = this.getGridColumn(newValue.width);
+          })
+          // [StartExclude album_view_change]
+          .gesture(PinchGesture({ fingers: FINGER_NUMBER }).onActionUpdate((event: GestureEvent) => {
+            if (event.scale > 1) {
+              this.up()
+            } else {
+              this.down()
+            }
+          }))
+          // [EndExclude album_view_change]
+        }
+        // [End album_view_change]
+      }
+      .padding({
+        top: deviceInfo.deviceType === BaseConstants.DEVICE_2IN1 ? $r('app.float.zero') :
+        $r('app.float.device_padding_top'),
+        bottom: deviceInfo.deviceType !== BaseConstants.DEVICE_2IN1 ?
+        $r('app.float.tab_content_pb') : $r('app.float.zero')
+      })
+    }
+    .hideTitleBar(true)
+  }
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/src/main/ets/views/SideColumn.ets b/MultiPictureBeautification/features/albumView/src/main/ets/views/SideColumn.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e35d9432a9ba54fd26acea1d420cae44a2001217
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/ets/views/SideColumn.ets
@@ -0,0 +1,287 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants } from '@ohos/commons';
+import { AlbumViewConstants } from '../constants/AlbumViewConstants';
+
+@Component
+export struct SideColumn {
+  build() {
+    Flex({ direction: FlexDirection.Column }) {
+      Row() {
+        Button({ type: ButtonType.Circle, stateEffect: false }) {
+          Image($r('app.media.switch'))
+            .width(BaseConstants.DEFAULT_ICON_SIZE)
+            .height(BaseConstants.DEFAULT_ICON_SIZE)
+        }
+        .backgroundColor(Color.White)
+        .margin({ right: $r('app.float.side_button_right') })
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.side_button_height'))
+      .padding({
+        left: $r('app.float.side_button_padding_left'),
+        right: $r('app.float.side_button_padding_right'),
+        top: $r('app.float.side_button_padding_top'),
+        bottom: $r('app.float.side_button_padding_bottom')
+      })
+
+      Row() {
+        Stack({ alignContent: Alignment.Start }) {
+          TextInput({ placeholder: AlbumViewConstants.SideConstants[0] })
+            .type(InputType.Normal)
+            .enableKeyboardOnFocus(false)
+
+          Image($r('app.media.search2'))
+            .aspectRatio(1)
+            .autoResize(true)
+            .padding({
+              left: $r('app.float.search_left'),
+              top: $r('app.float.search_top'),
+              bottom: $r('app.float.search_bottom')
+            })
+        }.padding({ left: $r('app.float.search_left') })
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.search_height'))
+      .padding({
+        right: $r('app.float.search_stack_right'),
+        top: $r('app.float.search_stack_top')
+      })
+
+      Row() {
+        Image($r('app.media.public_ic_public_folder_photo'))
+          .height(BaseConstants.DEFAULT_ICON_SIZE)
+          .width(BaseConstants.DEFAULT_ICON_SIZE)
+          .margin({
+            left: $r('app.float.margin_eight'),
+            right: $r('app.float.margin_eight')
+          })
+        Text(AlbumViewConstants.SideConstants[1])
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.row_height'))
+      .padding({
+        right: $r('app.float.row_padding_right'),
+        top: $r('app.float.row_padding_top')
+      })
+
+      Row() {
+        Image($r('app.media.public_ic_public_folder_album'))
+          .height(BaseConstants.DEFAULT_ICON_SIZE)
+          .width(BaseConstants.DEFAULT_ICON_SIZE)
+          .margin({
+            left: $r('app.float.margin_eight'),
+            right: $r('app.float.margin_eight')
+          })
+        Text(AlbumViewConstants.SideConstants[1])
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+        Blank()
+        Image($r('app.media.ic_public_arrow_right'))
+          .height(BaseConstants.DEFAULT_ICON_SIZE)
+          .width($r('app.float.image_width'))
+          .rotate({
+            z: 1,
+            centerX: '50%',
+            centerY: '50%',
+            angle: 90
+          })
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.row_height'))
+      .padding({
+        right: $r('app.float.row_padding_right'),
+        top: $r('app.float.row_padding_top')
+      })
+
+      Row() {
+        Text(AlbumViewConstants.SideConstants[2])
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+          .fontColor('#0A59F7')
+        Blank()
+        Text(AlbumViewConstants.SideConstants[4])
+          .fontSize(BaseConstants.FONT_SIZE_FOURTEEN)
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.row_height'))
+      .padding({
+        left: $r('app.float.row_padding_left'),
+        right: $r('app.float.row_padding_right'),
+        top: $r('app.float.row_padding_top')
+      })
+
+      Row() {
+        Text(AlbumViewConstants.SideConstants[3])
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+        Blank()
+        Text(AlbumViewConstants.SideConstants[4])
+          .fontSize(BaseConstants.FONT_SIZE_FOURTEEN)
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.row_height'))
+      .padding({
+        left: $r('app.float.row_padding_left'),
+        right: $r('app.float.row_padding_right'),
+        top: $r('app.float.row_padding_top')
+      })
+
+      Row() {
+        Text(AlbumViewConstants.SideConstants[5])
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+        Blank()
+        Text(AlbumViewConstants.SideConstants[4])
+          .fontSize(BaseConstants.FONT_SIZE_FOURTEEN)
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.row_height'))
+      .padding({
+        left: $r('app.float.row_padding_left'),
+        right: $r('app.float.row_padding_right'),
+        top: $r('app.float.row_padding_top')
+      })
+
+      Row() {
+        Text(AlbumViewConstants.SideConstants[6])
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+        Blank()
+        Text(AlbumViewConstants.SideConstants[4])
+          .fontSize(BaseConstants.FONT_SIZE_FOURTEEN)
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.row_height'))
+      .padding({
+        left: $r('app.float.row_padding_left'),
+        right: $r('app.float.row_padding_right'),
+        top: $r('app.float.row_padding_top')
+      })
+
+      Row() {
+        Text(AlbumViewConstants.SideConstants[7])
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+        Blank()
+        Text(AlbumViewConstants.SideConstants[4])
+          .fontSize(BaseConstants.FONT_SIZE_FOURTEEN)
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.row_height'))
+      .padding({
+        left: $r('app.float.row_padding_left'),
+        right: $r('app.float.row_padding_right'),
+        top: $r('app.float.row_padding_top')
+      })
+
+      Divider()
+      Row() {
+        Text(AlbumViewConstants.SideConstants[8])
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+        Blank()
+        Image($r('app.media.ic_public_arrow_right'))
+          .height(BaseConstants.DEFAULT_ICON_SIZE)
+          .width($r('app.float.image_width'))
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.row_height'))
+      .padding({
+        left: $r('app.float.row_padding_left'),
+        right: $r('app.float.row_padding_right'),
+        top: $r('app.float.row_padding_top')
+      })
+
+      Row() {
+        Text(AlbumViewConstants.SideConstants[9])
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+        Blank()
+        Image($r('app.media.ic_public_arrow_right'))
+          .height(BaseConstants.DEFAULT_ICON_SIZE)
+          .width($r('app.float.image_width'))
+          .rotate({
+            z: 1,
+            centerX: '50%',
+            centerY: '50%',
+            angle: 90
+          })
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.row_height'))
+      .padding({
+        left: $r('app.float.row_padding_left'),
+        right: $r('app.float.row_padding_right'),
+        top: $r('app.float.row_padding_top')
+      })
+
+      Row() {
+        Text(AlbumViewConstants.SideConstants[10])
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+        Blank()
+        Text(AlbumViewConstants.SideConstants[4])
+          .fontSize(BaseConstants.FONT_SIZE_FOURTEEN)
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.row_height'))
+      .padding({
+        left: $r('app.float.row_padding_left2'),
+        right: $r('app.float.row_padding_right'),
+        top: $r('app.float.row_padding_top')
+      })
+
+      Row() {
+        Text(AlbumViewConstants.SideConstants[11])
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+        Blank()
+        Text(AlbumViewConstants.SideConstants[4])
+          .fontSize(BaseConstants.FONT_SIZE_FOURTEEN)
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.row_height'))
+      .padding({
+        left: $r('app.float.row_padding_left2'),
+        right: $r('app.float.row_padding_right'),
+        top: $r('app.float.row_padding_top')
+      })
+
+      Row() {
+        Text(AlbumViewConstants.SideConstants[12])
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+        Blank()
+        Text(AlbumViewConstants.SideConstants[4])
+          .fontSize(BaseConstants.FONT_SIZE_FOURTEEN)
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.row_height'))
+      .padding({
+        left: $r('app.float.row_padding_left2'),
+        right: $r('app.float.row_padding_right'),
+        top: $r('app.float.row_padding_top')
+      })
+
+      Row() {
+        Text(AlbumViewConstants.SideConstants[13])
+          .fontSize(BaseConstants.FONT_SIZE_SIXTEEN)
+        Blank()
+        Image($r('app.media.ic_public_arrow_right'))
+          .height(BaseConstants.DEFAULT_ICON_SIZE)
+          .width($r('app.float.image_width'))
+      }
+      .width(BaseConstants.FULL_WIDTH)
+      .height($r('app.float.row_height'))
+      .padding({
+        left: $r('app.float.row_padding_left'),
+        right: $r('app.float.row_padding_right'),
+        top: $r('app.float.row_padding_top')
+      })
+    }
+  }
+}
diff --git a/MultiPictureBeautification/features/albumView/src/main/module.json5 b/MultiPictureBeautification/features/albumView/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..f15bfc413aa286280463d066213382a3d5757aae
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/module.json5
@@ -0,0 +1,11 @@
+{
+  "module": {
+    "name": "albumView",
+    "type": "har",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/element/color.json b/MultiPictureBeautification/features/albumView/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..1bbc9aa9617e97c45440e1d3d66afc1154837012
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/resources/base/element/color.json
@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/element/float.json b/MultiPictureBeautification/features/albumView/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..019257beef17319e4350927381d7574f21f0244b
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/resources/base/element/float.json
@@ -0,0 +1,128 @@
+{
+  "float": [
+    {
+      "name": "back_image_right",
+      "value": "16vp"
+    },
+    {
+      "name": "text_image_height",
+      "value": "24vp"
+    },
+    {
+      "name": "select_button_margin_right",
+      "value": "24vp"
+    },
+    {
+      "name": "tab_height",
+      "value": "54vp"
+    },
+    {
+      "name": "tab_right",
+      "value": "26vp"
+    },
+    {
+      "name": "tab_left",
+      "value": "26vp"
+    },
+    {
+      "name": "tab_top",
+      "value": "14vp"
+    },
+    {
+      "name": "tab_bottom",
+      "value": "14vp"
+    },
+    {
+      "name": "side_width",
+      "value": "280vp"
+    },
+    {
+      "name": "side_button_right",
+      "value": "16vp"
+    },
+    {
+      "name": "side_button_height",
+      "value": "54vp"
+    },
+    {
+      "name": "side_button_padding_left",
+      "value": "26vp"
+    },
+    {
+      "name": "side_button_padding_right",
+      "value": "26vp"
+    },
+    {
+      "name": "side_button_padding_top",
+      "value": "14vp"
+    },
+    {
+      "name": "side_button_padding_bottom",
+      "value": "14vp"
+    },
+    {
+      "name": "search_left",
+      "value": "10vp"
+    },
+    {
+      "name": "search_top",
+      "value": "5vp"
+    },
+    {
+      "name": "search_bottom",
+      "value": "5vp"
+    },
+    {
+      "name": "search_height",
+      "value": "52vp"
+    },
+    {
+      "name": "search_stack_right",
+      "value": "12vp"
+    },
+    {
+      "name": "search_stack_top",
+      "value": "14vp"
+    },
+    {
+      "name": "row_height",
+      "value": "48vp"
+    },
+    {
+      "name": "margin_eight",
+      "value": "8vp"
+    },
+    {
+      "name": "row_padding_left",
+      "value": "52vp"
+    },
+    {
+      "name": "row_padding_right",
+      "value": "12vp"
+    },
+    {
+      "name": "row_padding_top",
+      "value": "14vp"
+    },
+    {
+      "name": "row_padding_left2",
+      "value": "76vp"
+    },
+    {
+      "name": "image_width",
+      "value": "12vp"
+    },
+    {
+      "name": "zero",
+      "value": "0vp"
+    },
+    {
+      "name": "tab_content_pb",
+      "value": "28vp"
+    },
+    {
+      "name": "device_padding_top",
+      "value": "36vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/element/string.json b/MultiPictureBeautification/features/albumView/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..98e1d8a84b3d8539ea33e79fe2ac593a05d23bb4
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/resources/base/element/string.json
@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo1.jpg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cb4e7161886e7db0944ceddf0bcbd130371cb7c6
Binary files /dev/null and b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo1.jpg differ
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo10.jpg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo10.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5ed4902c874809a32adedc8f49de2381e16251a9
Binary files /dev/null and b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo10.jpg differ
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo2.jpg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7a3a7e45696d6f32f0818f0ce6e9252f77f463ee
Binary files /dev/null and b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo2.jpg differ
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo3.jpg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..926a77f6e6d96090d759f521ed352d6210c645d4
Binary files /dev/null and b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo3.jpg differ
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo4.jpg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fb763b87279c3fd1bcf7a2335c70f9b0846412cb
Binary files /dev/null and b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo4.jpg differ
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo5.jpg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo5.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a830f0ce6fa0a0791a3621ba1266c2b63e8b8723
Binary files /dev/null and b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo5.jpg differ
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo6.jpg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo6.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fe642935525294294c90a56308706cbf6b2aa2d3
Binary files /dev/null and b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo6.jpg differ
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo7.jpg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo7.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fe642935525294294c90a56308706cbf6b2aa2d3
Binary files /dev/null and b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo7.jpg differ
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo8.jpg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo8.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..92562e9297c7bb2c702145630847f1d6c8474ad3
Binary files /dev/null and b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo8.jpg differ
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo9.jpg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo9.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..90d2f285aefd4e72a9fc48b1ad3e2be968454905
Binary files /dev/null and b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/album_photo9.jpg differ
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/ic_gallery_material_select_checkbox.svg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/ic_gallery_material_select_checkbox.svg
new file mode 100644
index 0000000000000000000000000000000000000000..737679882c6f17be9de28b15ad352a6116e836f4
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/ic_gallery_material_select_checkbox.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_gallery_material_select_checkbox</title>
+    <g id="ic_gallery_material_select_checkbox" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-6" fill="#000000" fill-rule="nonzero">
+            <g id="编组" transform="translate(2.000000, 2.000000)">
+                <path d="M16,0 C18.209139,0 20,1.790861 20,4 L20,16 C20,18.209139 18.209139,20 16,20 L4,20 C1.790861,20 0,18.209139 0,16 L0,4 C0,1.790861 1.790861,0 4,0 L16,0 Z M16,1.5 L4,1.5 C2.6745166,1.5 1.58996133,2.53153594 1.50531768,3.83562431 L1.5,4 L1.5,16 C1.5,17.3254834 2.53153594,18.4100387 3.83562431,18.4946823 L4,18.5 L16,18.5 C17.3254834,18.5 18.4100387,17.4684641 18.4946823,16.1643757 L18.5,16 L18.5,4 C18.5,2.6745166 17.4684641,1.58996133 16.1643757,1.50531768 L16,1.5 Z M15.5303301,6.46966991 C15.7965966,6.73593648 15.8208027,7.15260016 15.6029482,7.44621165 L15.5303301,7.53033009 L9.7374369,13.3232233 C9.0942204,13.9664398 8.0748689,14.004276 7.3874012,13.4367321 L7.26256313,13.3232233 L4.96966991,11.0303301 C4.6767767,10.7374369 4.6767767,10.2625631 4.96966991,9.9696699 C5.23593648,9.7034034 5.65260016,9.6791973 5.94621165,9.8970518 L6.03033009,9.9696699 L8.3232233,12.2625631 C8.4045825,12.3439224 8.5280669,12.3574822 8.6234678,12.3032427 L8.6767767,12.2625631 L14.4696699,6.46966991 C14.7625631,6.1767767 15.2374369,6.1767767 15.5303301,6.46966991 Z" id="形状结合"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/ic_public_arrow_down_0.svg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/ic_public_arrow_down_0.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8c510014ec4f0703b0aa717cef46694ce8d156f1
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/ic_public_arrow_down_0.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="12px" viewBox="0 0 24 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_arrow_down_0</title>
+    <defs>
+        <path d="M9.87348697,0.153910997 L9.90554816,0.184171649 L14.8552956,5.13391912 C15.5244753,5.80309876 15.5384165,6.87939136 14.8971194,7.56553404 L14.8552956,7.60879285 L9.90554816,12.5585403 C9.77667514,12.6874133 9.6125707,12.7595822 9.44423848,12.775047 L9.39824817,12.7778588 L9.35218798,12.7778588 C9.16799379,12.7722352 8.98547673,12.6991291 8.84488799,12.5585403 C8.56245524,12.2761076 8.55236836,11.8244608 8.81462734,11.5299413 L8.84488799,11.4978801 L13.4410821,6.90168607 C13.7235148,6.61925332 13.7336017,6.16760655 13.4713427,5.87308709 L13.4410821,5.8410259 L8.84488799,1.24483182 C8.55199477,0.951938601 8.55199477,0.477064867 8.84488799,0.184171649 C8.98610436,0.0429552751 9.16962424,-0.0301746325 9.35465496,-0.0352180744 L9.40092051,-0.0350604668 C9.57050315,-0.029281523 9.73849888,0.033708965 9.87348697,0.153910997 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_arrow_down_0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1" transform="translate(11.996538, 6.371320) scale(-1, -1) rotate(-90.000000) translate(-11.996538, -6.371320) "></use>
+        </mask>
+        <g id="路径" fill-rule="nonzero" transform="translate(11.996538, 6.371320) scale(-1, -1) rotate(-90.000000) translate(-11.996538, -6.371320) "></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="Symbol/color-light/colorPrimary">
+                <rect id="color/#000000" x="0" y="0" width="24" height="12"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/ic_public_arrow_right.svg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/ic_public_arrow_right.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0cc0f2ad4fd08ee0b7340c787910fd3723a36b7d
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/ic_public_arrow_right.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="24px" viewBox="0 0 12 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_arrow_right</title>
+    <defs>
+        <path d="M4.2482689,5.78255501 L4.28033009,5.81281566 L9.23007755,10.7625631 C9.8992572,11.4317428 9.91319844,12.5080354 9.27190128,13.1941781 L9.23007755,13.2374369 L4.28033009,18.1871843 C4.15145707,18.3160574 3.98735263,18.3882262 3.81902041,18.403691 L3.7730301,18.4065028 L3.7269699,18.4065028 C3.54277571,18.4008792 3.36025866,18.3277731 3.21966991,18.1871843 C2.93723717,17.9047516 2.92715028,17.4531048 3.18940926,17.1585854 L3.21966991,17.1265242 L7.81586399,12.5303301 C8.09829674,12.2478973 8.10838362,11.7962506 7.84612464,11.5017311 L7.81586399,11.4696699 L3.21966991,6.87347584 C2.9267767,6.58058262 2.9267767,6.10570888 3.21966991,5.81281566 C3.36088629,5.67159929 3.54440617,5.59846938 3.72943689,5.59342594 L3.77570243,5.59358355 C3.94528507,5.59936249 4.11328081,5.66235298 4.2482689,5.78255501 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_arrow_right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="路径" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="Symbol/color-light/colorPrimary">
+                <rect id="color/#000000" x="0" y="0" width="12" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/ic_public_more.svg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/ic_public_more.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2078baf063972687f6922a7f3368879eef0a0bbd
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/ic_public_more.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_more</title>
+    <defs>
+        <path d="M6.25,8 C7.21649831,8 8,7.21649831 8,6.25 C8,5.28350169 7.21649831,4.5 6.25,4.5 C5.28350169,4.5 4.5,5.28350169 4.5,6.25 C4.5,7.21649831 5.28350169,8 6.25,8 Z M6.25,19.5 C7.21649831,19.5 8,18.7164983 8,17.75 C8,16.7835017 7.21649831,16 6.25,16 C5.28350169,16 4.5,16.7835017 4.5,17.75 C4.5,18.7164983 5.28350169,19.5 6.25,19.5 Z M17.75,19.5 C18.7164983,19.5 19.5,18.7164983 19.5,17.75 C19.5,16.7835017 18.7164983,16 17.75,16 C16.7835017,16 16,16.7835017 16,17.75 C16,18.7164983 16.7835017,19.5 17.75,19.5 Z M17.75,8 C18.7164983,8 19.5,7.21649831 19.5,6.25 C19.5,5.28350169 18.7164983,4.5 17.75,4.5 C16.7835017,4.5 16,5.28350169 16,6.25 C16,7.21649831 16.7835017,8 17.75,8 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_more" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/public_ic_public_folder_album.svg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/public_ic_public_folder_album.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7457930a9c60477125ba426d30c8848c362374b6
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/public_ic_public_folder_album.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public_ic_public_folder 3</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-28.000000, -227.000000)">
+            <rect fill="#ffffff" x="0" y="0" width="664" height="763"></rect>
+            <rect id="矩形" x="28" y="227" width="24" height="24"></rect>
+            <g id="编组" transform="translate(28.000000, 227.000000)" fill="#000000">
+                <path d="M8.6277704,2.5 L16.590287,2.5 L17.1639919,2.50573235 C18.6957725,2.53815527 19.4567843,2.70760588 20.1055302,3.00099869 L20.33091,3.10967418 C20.3680538,3.12863739 20.4050772,3.14802414 20.4421143,3.16783176 C21.2569291,3.60359949 21.8964005,4.24307093 22.3321682,5.05788574 L22.4459422,5.28101661 C22.7900981,5.99387056 22.980395,6.79857399 22.9985643,8.61445738 L22.9985643,14.0769164 L22.9985643,14.0769164 L22.986204,14.5687544 C22.9373105,15.7920119 22.7593044,16.337196 22.4657346,16.8861238 C22.2201431,17.34534 21.8936745,17.7349391 21.4942613,18.0469886 L21.4985008,17.7985782 L21.4985008,17.7985782 L21.4985008,8.76898935 C21.4828731,7.5238355 21.3429795,6.85435009 20.9811141,6.15943347 C20.6264537,5.47835293 20.1000248,4.9376962 19.4368674,4.57345034 C18.7384113,4.1898163 18.0663405,4.0490982 16.7768869,4.04092211 L4.8458278,4.04054054 C4.67164175,4.04054054 4.50841225,4.04275922 4.35468879,4.04744528 C4.67147849,3.628281 5.0717147,3.288081 5.54630859,3.03426541 C5.61492458,2.99756918 5.68348206,2.96267863 5.75331273,2.92962023 L5.96795593,2.83596793 C6.41020809,2.65976206 6.94623491,2.55046611 7.86367807,2.51379596 L8.35551601,2.5015395 C8.44323035,2.50051427 8.53392632,2.5 8.6277704,2.5 Z" id="路径" fill-opacity="0.4"></path>
+                <path d="M5.4867991,5.06756757 L16.0132009,5.06756757 C17.2980367,5.06756757 17.9084651,5.17773776 18.4024605,5.3869903 L18.608671,5.48270391 C18.6423936,5.49965644 18.6759288,5.51710642 18.70948,5.5350498 C19.2798504,5.84008721 19.7274804,6.28771722 20.0325178,6.85808759 L20.1342249,7.06082971 C20.3097147,7.4381367 20.4245252,7.8627187 20.4732782,8.60522584 L20.4932872,9.04338624 C20.4955194,9.12221019 20.4971976,9.2040683 20.4983178,9.28916392 L20.5,17.0132009 C20.5,17.1967489 20.4977516,17.3665334 20.4932872,17.5241813 L20.4732782,17.9623417 C20.4245252,18.7048489 20.3097147,19.1294309 20.1342249,19.5067379 L20.0325178,19.70948 L20.0325178,19.70948 C19.7274804,20.2798504 19.2798504,20.7274804 18.70948,21.0325178 L18.5067379,21.1342249 C18.1294309,21.3097147 17.7048489,21.4245252 16.9623417,21.4732782 L16.5241813,21.4932872 C16.4453574,21.4955194 16.3634993,21.4971976 16.2784036,21.4983178 L5.4867991,21.5 C5.30325112,21.5 5.13346657,21.4977516 4.97581868,21.4932872 L4.53765827,21.4732782 C3.79515113,21.4245252 3.37056913,21.3097147 2.99326214,21.1342249 L2.79052002,21.0325178 L2.79052002,21.0325178 C2.22014965,20.7274804 1.77251964,20.2798504 1.46748223,19.70948 L1.36577509,19.5067379 C1.19028534,19.1294309 1.07547484,18.7048489 1.02672185,17.9623417 L1.00671279,17.5241813 C1.00224837,17.3665334 1,17.1967489 1,17.0132009 L1,9.55436667 C1,9.37081869 1.00224837,9.20103413 1.00671279,9.04338624 L1.02672185,8.60522584 C1.07547484,7.8627187 1.19028534,7.4381367 1.36577509,7.06082971 L1.46748223,6.85808759 L1.46748223,6.85808759 C1.77251964,6.28771722 2.22014965,5.84008721 2.79052002,5.5350498 L2.891329,5.48270391 L2.891329,5.48270391 L3.0975395,5.3869903 C3.59153487,5.17773776 4.20196327,5.06756757 5.4867991,5.06756757 Z" id="Rectangle-9" fill-opacity="0.196405157"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/public_ic_public_folder_photo.svg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/public_ic_public_folder_photo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1b3ad957778757c645f763408708d12999423468
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/public_ic_public_folder_photo.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public_ic_public_folder 2</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-28.000000, -188.000000)">
+            <rect fill="#ffffff" x="0" y="0" width="664" height="763"></rect>
+            <rect id="矩形" x="28" y="188" width="24" height="24"></rect>
+            <g id="编组" transform="translate(28.000000, 188.000000)" fill="#000000">
+                <path d="M18,2 C20.209139,2 22,3.790861 22,6 L22,18 C22,20.209139 20.209139,22 18,22 L6,22 C3.790861,22 2,20.209139 2,18 L2,6 C2,3.790861 3.790861,2 6,2 L18,2 Z" id="路径" fill-opacity="0.2" fill-rule="nonzero"></path>
+                <path d="M8.25,7.25 C7.28350169,7.25 6.5,8.03350169 6.5,9 C6.5,9.96649831 7.28350169,10.75 8.25,10.75 C9.21649831,10.75 10,9.96649831 10,9 C10,8.03350169 9.21649831,7.25 8.25,7.25 Z M17.5863647,11.830408 C17.9278857,11.9339218 18.2139555,12.0894067 18.8006866,12.6674148 L20.3533478,14.2198191 C20.4471216,14.3135774 20.4998237,14.4407465 20.4998237,14.5733517 L20.4984379,16.5799462 L20.4984379,16.5799462 L20.4860088,17.0194859 C20.4488341,17.8324571 20.3381205,18.2669066 20.1603517,18.6491137 L20.0659094,18.8373743 L20.0659094,18.8373743 C19.7826603,19.3670039 19.3670039,19.7826603 18.8373743,20.0659094 L18.757846,20.1074014 C18.2529022,20.3638654 17.7099686,20.5 16.3336866,20.5 L7.66631345,20.5 L7.20797976,20.4942144 L7.20797976,20.4942144 L6.76997214,20.4741894 C5.96518516,20.4199694 5.56514425,20.2811786 5.16262573,20.0659094 C4.6329961,19.7826603 4.21733967,19.3670039 3.93409064,18.8373743 L3.84897594,18.6612512 C3.83296011,18.6256467 3.81602925,18.5869169 3.79818336,18.5450618 C3.75805942,18.4511841 3.77912161,18.3423608 3.85131193,18.27017 L6.68705939,15.4344051 C7.12348943,14.997975 7.39879972,14.7855837 7.64427199,14.6606258 L7.80494041,14.5887747 C7.85798352,14.5681426 7.91099383,14.5503291 7.96541201,14.5338352 C8.31913016,14.4266244 8.68086984,14.4266244 9.03458799,14.5338352 L9.1070521,14.5569472 L9.17859739,14.5824604 C9.46397916,14.6903961 9.74599755,14.8754064 10.2489099,15.370842 L10.3632243,15.4851003 C10.9493275,16.070348 11.898856,16.0702419 12.4848285,15.4848634 L15.2388361,12.730978 C15.869235,12.100579 16.1634705,11.9376187 16.5171887,11.830408 C16.8709069,11.7231973 17.2326465,11.7231973 17.5863647,11.830408 Z" id="形状结合" fill-opacity="0.25"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/search2.svg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/search2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..df0027e3685ee63c10f64ecf695d0450fa9ea864
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/search2.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title> ic_s_ic S_search 2</title>
+    <defs>
+        <path d="M10.3035747,9.68004127 L12.7631456,12.1393721 C12.8363689,12.2125954 12.8363689,12.3313139 12.7631456,12.4045372 L12.3212039,12.8464789 C12.2479805,12.9197022 12.1292621,12.9197022 12.0560388,12.8464789 L9.58932617,10.3808773 C9.84565312,10.1666117 10.0845484,9.93218727 10.3035747,9.68004127 Z M5.58333333,0 C8.66692319,0 11.1666667,2.49974348 11.1666667,5.58333333 C11.1666667,7.08117687 10.5768526,8.44126194 9.61680898,9.44400405 L9.83137117,9.20672673 C9.75535882,9.29575766 9.67659673,9.38237 9.59521636,9.46643228 C9.52389782,9.54008006 9.45116171,9.61122103 9.37653345,9.68034819 C9.3691703,9.68716827 9.36188286,9.69388248 9.35457755,9.70057751 C8.3613131,10.6109637 7.0372189,11.1666667 5.58333333,11.1666667 C2.49974348,11.1666667 0,8.66692319 0,5.58333333 C0,2.49974348 2.49974348,0 5.58333333,0 Z M5.58333333,1 C3.05202823,1 1,3.05202823 1,5.58333333 C1,8.11463844 3.05202823,10.1666667 5.58333333,10.1666667 C8.11463844,10.1666667 10.1666667,8.11463844 10.1666667,5.58333333 C10.1666667,3.05202823 8.11463844,1 5.58333333,1 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-32.000000, -305.000000)">
+            <rect fill="#B5B5B5" x="0" y="0" width="664" height="763" opacity="0"></rect>
+            <rect id="矩形" x="32" y="305" width="16" height="16"></rect>
+            <g id="-ic_s/ic-S_search-2" transform="translate(32.000000, 305.000000)" opacity="0.600000024">
+                <g id="编组-2" transform="translate(1.333333, 1.333333)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="形状结合" fill-rule="nonzero"></g>
+                    <rect id="color/#B5B5B5" fill="#B5B5B5" mask="url(#mask-2)" x="-1.33333333" y="-1.33333333" width="16" height="16"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/albumView/src/main/resources/base/media/switch.svg b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/switch.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fd671d4bde73e03cf9e90f1fa1bb7610ef9f2c27
--- /dev/null
+++ b/MultiPictureBeautification/features/albumView/src/main/resources/base/media/switch.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>newicon备份</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-28.000000, -128.000000)">
+            <rect id="矩形" x="28" y="128" width="24" height="24"></rect>
+            <g id="newicon备份" transform="translate(40.000000, 140.000000) scale(-1, 1) translate(-40.000000, -140.000000) translate(28.000000, 128.000000)">
+                <g id="编组-9" transform="translate(2.000000, 3.000000)" fill="#000000">
+                    <path d="M14.7001107,11 L20.2999151,11 C20.6865613,11 21,11.3198306 21,11.7143617 C21,11.8765728 20.9458969,12.0339542 20.8465896,12.1606199 L18.0466874,15.7318702 C17.8051514,16.0399472 17.3645933,16.0898964 17.0626733,15.8434348 C17.0223031,15.81048 16.9856346,15.7730637 16.9533384,15.7318702 L14.1534362,12.1606199 C13.9119002,11.8525429 13.9608511,11.4030005 14.2627711,11.1565389 C14.3869053,11.0552064 14.5411414,11 14.7001107,11 Z" id="矩形备份" transform="translate(17.500000, 13.500000) rotate(-90.000000) translate(-17.500000, -13.500000) "></path>
+                    <path d="M19.25,0 C19.6642136,0 20,0.44771525 20,1 C20,1.55228475 19.6642136,2 19.25,2 L0.75,2 C0.335786438,2 0,1.55228475 0,1 C0,0.44771525 0.335786438,0 0.75,0 L19.25,0 Z" id="路径" fill-rule="nonzero"></path>
+                    <path d="M19.2307692,5 C19.6556037,5 20,5.44771525 20,6 C20,6.55228475 19.6556037,7 19.2307692,7 L0.769230769,7 C0.344396346,7 0,6.55228475 0,6 C0,5.44771525 0.344396346,5 0.769230769,5 L19.2307692,5 Z" id="路径" fill-rule="nonzero"></path>
+                    <path d="M11.25,10 C11.6642136,10 12,10.4477153 12,11 C12,11.5522847 11.6642136,12 11.25,12 L0.75,12 C0.335786438,12 0,11.5522847 0,11 C0,10.4477153 0.335786438,10 0.75,10 L11.25,10 Z" id="路径" fill-rule="nonzero"></path>
+                    <path d="M11.25,15 C11.6642136,15 12,15.4477153 12,16 C12,16.5522847 11.6642136,17 11.25,17 L0.75,17 C0.335786438,17 0,16.5522847 0,16 C0,15.4477153 0.335786438,15 0.75,15 L11.25,15 Z" id="路径备份" fill-rule="nonzero"></path>
+                </g>
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/BuildProfile.ets b/MultiPictureBeautification/features/pictureEdit/BuildProfile.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3a501e5ddee8ea6d28961648fc7dd314a5304bd4
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/BuildProfile.ets
@@ -0,0 +1,17 @@
+/**
+ * Use these variables when you tailor your ArkTS code. They must be of the const type.
+ */
+export const HAR_VERSION = '1.0.0';
+export const BUILD_MODE_NAME = 'debug';
+export const DEBUG = true;
+export const TARGET_NAME = 'default';
+
+/**
+ * BuildProfile Class is used only for compatibility purposes.
+ */
+export default class BuildProfile { 
+	static readonly HAR_VERSION = HAR_VERSION;
+	static readonly BUILD_MODE_NAME = BUILD_MODE_NAME;
+	static readonly DEBUG = DEBUG;
+	static readonly TARGET_NAME = TARGET_NAME;
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/Index.ets b/MultiPictureBeautification/features/pictureEdit/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1083e48e3c8f0d065fcb2cc819bdc4b60b740b1e
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/Index.ets
@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { PictureEdit } from './src/main/ets/views/PictureEdit'
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/build-profile.json5 b/MultiPictureBeautification/features/pictureEdit/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/hvigorfile.ts b/MultiPictureBeautification/features/pictureEdit/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiPictureBeautification/features/pictureEdit/obfuscation-rules.txt b/MultiPictureBeautification/features/pictureEdit/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..985b2aeb7658286b17bd26eab8f217c3fe75ea8b
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/obfuscation-rules.txt
@@ -0,0 +1,18 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/oh-package.json5 b/MultiPictureBeautification/features/pictureEdit/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..40de601cd7471fa7761fadf0dc5816ee1f89bce3
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/oh-package.json5
@@ -0,0 +1,12 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "pictureedit",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dependencies": {
+    "@ohos/commons": "file:../../commons/base"
+  }
+}
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/ets/constants/PictureEditConstants.ets b/MultiPictureBeautification/features/pictureEdit/src/main/ets/constants/PictureEditConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2e3ec9ab5af2e538712b4e975ac7092097228b71
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/ets/constants/PictureEditConstants.ets
@@ -0,0 +1,112 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { PicAndName, ToolsAndName } from '../viewmodel/AdaptiveViewModel';
+
+export default class PictureEditConstants {
+  /**
+   * Picture size.
+   */
+  static PICTURE_HEIGHT_SM = '90%';
+  static PICTURE_HEIGHT_MD = '90%';
+  static PICTURE_HEIGHT_LG = '90%';
+  static PICTURE_WIDTH_SM = '72%';
+  static PICTURE_WIDTH_MD = '72%';
+  static PICTURE_WIDTH_LG = '40%';
+  static PICTURE_WIDTH_MD_ROW = '82%';
+  static PICTURE_WIDTH_MD_COLUMN = '36.6%';
+  static PICTURE_HEIGHT = '95%';
+  static PICTURE_HALF_HEIGHT = '50%';
+  /**
+   * Flex basis.
+   */
+  static SLIDER_FLEX_BASIS = 80;
+  static BAR_FLEX_BASIS = 60;
+  static OPTION_FLEX_BASIS = 250;
+  static IMAGE_BORDER_RADIUS = 8;
+  /**
+   * Edit text.
+   */
+  static Edit_Text = '编辑';
+  /**
+   * Tools name.
+   */
+  static toolsAndName: ToolsAndName[] = [
+    {
+      pic: $r("app.media.tools_2"), pic_name: "截取"
+    },
+    {
+      pic: $r("app.media.tools_1"), pic_name: "裁剪"
+    },
+    {
+      pic: $r("app.media.tools_3"), pic_name: "调节"
+    },
+    {
+      pic: $r("app.media.tools_4"), pic_name: "滤镜"
+    }];
+  /**
+   * Filter name.
+   */
+  static filterAndName: PicAndName[] = [
+    {
+      pic: $r("app.media.photo"), pic_name: "原片", color_filter: [1, 0, 0, 0, 0,
+      0, 1, 0, 0, 0,
+      0, 0, 1, 0, 0,
+      0, 0, 0, 1, 0]
+    },
+    {
+      pic: $r("app.media.photo"), pic_name: "经典", color_filter: [1, 0, 0, 0, 0,
+      0, 1, 0, 0, 0,
+      0, 0, 1, 0, 0,
+      0, 0, 0, 1, 0]
+    },
+    {
+      pic: $r("app.media.photo"), pic_name: "晨光", color_filter: [1, 0, 0, 0, 0,
+      0, 1, 0, 0, 0,
+      0, 0, 1, 0, 0,
+      0, 0, 0, 1, 0]
+    },
+    {
+      pic: $r("app.media.photo"), pic_name: "黄昏", color_filter: [1, 0, 0, 0, 0,
+      0, 1, 0, 0, 0,
+      0, 0, 1, 0, 0,
+      0, 0, 0, 1, 0]
+    },
+    {
+      pic: $r("app.media.photo"), pic_name: "光晕", color_filter: [1, 0, 0, 0, 0,
+      0, 1, 0, 0, 0,
+      0, 0, 1, 0, 0,
+      0, 0, 0, 1, 0]
+    },
+    {
+      pic: $r("app.media.photo"), pic_name: "童年", color_filter: [1, 0, 0, 0, 0,
+      0, 1, 0, 0, 0,
+      0, 0, 1, 0, 0,
+      0, 0, 0, 1, 0]
+    },
+    {
+      pic: $r("app.media.photo"), pic_name: "怀旧", color_filter: [1, 0, 0, 0, 0,
+      0, 1, 0, 0, 0,
+      0, 0, 1, 0, 0,
+      0, 0, 0, 1, 0]
+    },
+    {
+      pic: $r("app.media.photo"), pic_name: "老照片", color_filter: [1, 1, 0, 0, 0,
+      1, 1, 0, 0, 0,
+      1, 0, 1, 0, 0,
+      1, 0, 0, 1, 0]
+    }
+  ];
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/ets/viewmodel/AdaptiveViewModel.ets b/MultiPictureBeautification/features/pictureEdit/src/main/ets/viewmodel/AdaptiveViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..30cb495052622e837143a4d8c0a6879f146e4985
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/ets/viewmodel/AdaptiveViewModel.ets
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointType } from '@ohos/commons';
+import PictureEditConstants from '../constants/PictureEditConstants';
+
+export class Adaptive {
+  static PICTURE_HEIGHT = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      PictureEditConstants.PICTURE_HEIGHT_SM,
+      PictureEditConstants.PICTURE_HEIGHT_MD,
+      PictureEditConstants.PICTURE_HEIGHT_LG,
+    ).GetValue(currentBreakpoint);
+  }
+  static PICTURE_WIDTH = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      PictureEditConstants.PICTURE_WIDTH_SM,
+      PictureEditConstants.PICTURE_WIDTH_MD,
+      PictureEditConstants.PICTURE_WIDTH_LG,
+    ).GetValue(currentBreakpoint);
+  }
+}
+export interface ToolsAndName {
+  pic: Resource
+  pic_name: string
+}
+
+export interface PicAndName {
+  pic: Resource
+  pic_name: string
+  color_filter: number[]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/ets/views/PictureEdit.ets b/MultiPictureBeautification/features/pictureEdit/src/main/ets/views/PictureEdit.ets
new file mode 100644
index 0000000000000000000000000000000000000000..38d59db9f1cfd230bbb6d4c7f579ce2ea7bd49a1
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/ets/views/PictureEdit.ets
@@ -0,0 +1,238 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants, BreakpointConstants } from '@ohos/commons/';
+import PictureEditConstants from '../constants/PictureEditConstants';
+import { deviceInfo } from '@kit.BasicServicesKit';
+
+interface ToolsAndName {
+  pic: Resource
+  pic_name: string
+}
+
+interface PicAndName {
+  pic: Resource
+  pic_name: string
+  color_filter: number[]
+}
+
+@Component
+export struct PictureEdit {
+  @StorageLink('currentBreakpoint') currentBp: string = BreakpointConstants.BREAKPOINT_MD;
+  @State outSetValueOne: number = 40;
+  @State windowDirection: boolean = true;
+  @State pictureWidth: string = BaseConstants.FULL_WIDTH;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+
+  isColumnLayout(bp: string, direction: Boolean): Boolean {
+    if (bp === BreakpointConstants.BREAKPOINT_SM) {
+      this.pictureWidth = PictureEditConstants.PICTURE_WIDTH_SM;
+      return true;
+    }
+    if (bp === BreakpointConstants.BREAKPOINT_LG) {
+      this.pictureWidth = PictureEditConstants.PICTURE_WIDTH_LG;
+      return false;
+    }
+    if (direction) {
+      this.pictureWidth = PictureEditConstants.PICTURE_WIDTH_MD_ROW;
+    } else {
+      this.pictureWidth = PictureEditConstants.PICTURE_WIDTH_MD_COLUMN;
+    }
+    return !direction;
+  }
+
+  @Builder
+  topBar() {
+    Row() {
+      Image($r('app.media.ic_public_back'))
+        .width(BaseConstants.DEFAULT_ICON_SIZE)
+        .height(BaseConstants.DEFAULT_ICON_SIZE)
+        .onClick(() => {
+          this.pageInfos.pop();
+        })
+        .margin({
+          left: $r('app.float.back_image_left'),
+          right: $r('app.float.back_image_right')
+        })
+
+      Text(PictureEditConstants.Edit_Text)
+        .fontSize(BaseConstants.FONT_SIZE_TWENTY)
+        .fontColor(Color.White)
+      Blank()
+      if (this.currentBp === BreakpointConstants.BREAKPOINT_MD) {
+        Image(this.windowDirection ? $r('app.media.change2') : $r('app.media.change'))
+          .width(BaseConstants.DEFAULT_ICON_SIZE)
+          .height(BaseConstants.DEFAULT_ICON_SIZE)
+          .margin({ right: $r('app.float.image_right') })
+          .onClick(() => {
+            this.windowDirection = !this.windowDirection;
+          })
+      }
+      Image($r('app.media.ic_add_2'))
+        .width(BaseConstants.DEFAULT_ICON_SIZE)
+        .height(BaseConstants.DEFAULT_ICON_SIZE)
+        .margin({ right: $r('app.float.image_right') })
+      Image($r('app.media.ic_add_3'))
+        .width(BaseConstants.DEFAULT_ICON_SIZE)
+        .height(BaseConstants.DEFAULT_ICON_SIZE)
+        .margin({ right: $r('app.float.image_right') })
+
+      Image($r('app.media.ic_add_4'))
+        .width(BaseConstants.DEFAULT_ICON_SIZE)
+        .height(BaseConstants.DEFAULT_ICON_SIZE)
+        .margin({ right: $r('app.float.image_right') })
+
+    }
+    .alignItems(VerticalAlign.Center)
+    .height($r('app.float.row_height'))
+    .width(BaseConstants.FULL_WIDTH)
+    .backgroundColor(Color.Black)
+  }
+
+  @Builder
+  centerPicture() {
+    Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+      Image($r("app.media.photo"))
+        .interpolation(ImageInterpolation.High)
+        .objectFit(ImageFit.Cover)
+        .autoResize(true)
+        .height(PictureEditConstants.PICTURE_HEIGHT)
+        .width(this.pictureWidth)
+    }
+  }
+
+  @Builder
+  optionRegion() {
+    Flex({
+      direction: this.isColumnLayout(this.currentBp, this.windowDirection) ? FlexDirection.Column : FlexDirection.Row
+    }) {
+      Flex() {
+        this.sliderBar()
+      }
+      .flexBasis(PictureEditConstants.SLIDER_FLEX_BASIS)
+
+      this.filterWindows()
+      Flex({ justifyContent: FlexAlign.Center }) {
+        this.bottomBar()
+      }
+      .flexBasis(PictureEditConstants.BAR_FLEX_BASIS)
+    }
+    .height(this.isColumnLayout(this.currentBp, this.windowDirection) ? BaseConstants.FULL_HEIGHT :
+    PictureEditConstants.PICTURE_HALF_HEIGHT)
+    .padding($r('app.float.row_padding'))
+  }
+
+  @Builder
+  sliderBar() {
+    Column() {
+      Slider({
+        value: this.outSetValueOne,
+        min: 0,
+        max: 100,
+        style: SliderStyle.OutSet,
+        direction: this.isColumnLayout(this.currentBp, this.windowDirection) ? Axis.Horizontal : Axis.Vertical,
+        reverse: this.isColumnLayout(this.currentBp, this.windowDirection) ? false : true
+      })
+        .blockColor(Color.White)
+        .selectedColor(Color.White)
+        .trackColor($r('app.color.track_color'))
+        .showTips(true)
+        .onChange((value: number) => {
+          this.outSetValueOne = value;
+        })
+    }
+  }
+
+  @Builder
+  filterWindows() {
+    List() {
+      ForEach(PictureEditConstants.filterAndName, (item: PicAndName) => {
+        ListItem() {
+          Stack() {
+            Image(item.pic)
+              .height($r('app.float.image_height'))
+              .aspectRatio(1)
+              .autoResize(true)
+              .colorFilter(item.color_filter)
+              .clip(true)
+              .borderRadius(PictureEditConstants.IMAGE_BORDER_RADIUS)
+            Text(item.pic_name)
+              .fontSize(BaseConstants.FONT_SIZE_TEN)
+              .fontColor($r('app.color.text_color'))
+              .margin({ left: $r('app.float.text_margin'), bottom: $r('app.float.text_margin') })
+          }
+          .alignContent(Alignment.BottomStart)
+        }
+      },(item: PicAndName, index: number) => index + JSON.stringify(item))
+    }
+    .listDirection(this.isColumnLayout(this.currentBp, this.windowDirection) ? Axis.Horizontal : Axis.Vertical)
+  }
+
+  @Builder
+  bottomBar() {
+    Flex({
+      justifyContent: this.isColumnLayout(this.currentBp, this.windowDirection) ? FlexAlign.SpaceAround :
+      FlexAlign.SpaceAround,
+      alignItems: ItemAlign.Center,
+      direction: this.isColumnLayout(this.currentBp, this.windowDirection) ? FlexDirection.Row : FlexDirection.Column,
+    }) {
+
+      ForEach(PictureEditConstants.toolsAndName, (item: ToolsAndName) => {
+        Column() {
+          Image(item.pic)
+            .height(BaseConstants.DEFAULT_ICON_SIZE)
+            .autoResize(true)
+            .aspectRatio(1)
+            .margin({ bottom: $r('app.float.image_margin') })
+          Text(item.pic_name)
+            .fontSize(BaseConstants.FONT_SIZE_TEN)
+            .fontColor($r('app.color.text_color'))
+        }
+      }, (item: ToolsAndName) => item.pic_name
+      )
+    }
+  }
+
+  build() {
+    NavDestination(){
+      Flex({ direction: FlexDirection.Column }) {
+        this.topBar()
+        Flex({
+          direction: this.isColumnLayout(this.currentBp, this.windowDirection) ? FlexDirection.Column : FlexDirection.Row
+        }) {
+          Flex() {
+            this.centerPicture()
+          }
+          .flexShrink(1)
+
+          Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+            this.optionRegion()
+          }
+          .flexBasis(PictureEditConstants.OPTION_FLEX_BASIS)
+          .height(BaseConstants.FULL_HEIGHT)
+        }
+      }
+      .backgroundColor(Color.Black)
+      .padding({
+        top: deviceInfo.deviceType === BaseConstants.DEVICE_2IN1 ? $r('app.float.zero') :
+        $r('app.float.device_padding_top'),
+        bottom: deviceInfo.deviceType !== BaseConstants.DEVICE_2IN1 ?
+        $r('app.float.tab_content_pb') : $r('app.float.zero')
+      })
+    }
+    .hideTitleBar(true)
+
+  }
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/module.json5 b/MultiPictureBeautification/features/pictureEdit/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..8240b1edc57483c843f6f8e4f695dcd4e12e0602
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/module.json5
@@ -0,0 +1,11 @@
+{
+  "module": {
+    "name": "pictureEdit",
+    "type": "har",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/element/color.json b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..24057d48794f1b00bd9a82e32ae49dca07b16ac4
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/element/color.json
@@ -0,0 +1,16 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "text_color",
+      "value": "#DBFFFFFF"
+    },
+    {
+      "name": "track_color",
+      "value": "#1AFFFFFF"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/element/float.json b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..6cfdc22a729aaf229a679e7249a7fbeca48b776a
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/element/float.json
@@ -0,0 +1,48 @@
+{
+  "float": [
+    {
+      "name": "back_image_right",
+      "value": "16vp"
+    },
+    {
+      "name": "back_image_left",
+      "value": "24vp"
+    },
+    {
+      "name": "image_right",
+      "value": "26vp"
+    },
+    {
+      "name": "row_height",
+      "value": "56vp"
+    },
+    {
+      "name": "row_padding",
+      "value": "16vp"
+    },
+    {
+      "name": "image_height",
+      "value": "68vp"
+    },
+    {
+      "name": "text_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "image_margin",
+      "value": "2vp"
+    },
+    {
+      "name": "zero",
+      "value": "0vp"
+    },
+    {
+      "name": "tab_content_pb",
+      "value": "28vp"
+    },
+    {
+      "name": "device_padding_top",
+      "value": "36vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/element/string.json b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..98e1d8a84b3d8539ea33e79fe2ac593a05d23bb4
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/element/string.json
@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/change.svg b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/change.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ce090e2aca50ca776489d209fe2b964e581ce7ad
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/change.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public_ic_public_view_list备份 2</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-124.000000, -309.000000)">
+            <g id="编组-17" transform="translate(124.000000, 309.000000)">
+                <g id="编组" fill="#FFFFFF" opacity="0.903483073">
+                    <g id="Public/ic_public_view_list备份">
+                        <path d="M15.25,5.25 C17.1829966,5.25 18.75,6.81700338 18.75,8.75 L18.75,15.25 C18.75,17.1829966 17.1829966,18.75 15.25,18.75 L2.25,18.75 C0.317003376,18.75 -1.25,17.1829966 -1.25,15.25 L-1.25,8.75 C-1.25,6.81700338 0.317003376,5.25 2.25,5.25 L15.25,5.25 Z M15.5,6.75 L2,6.75 C1.03350169,6.75 0.25,7.53350169 0.25,8.5 L0.25,8.5 L0.25,15.5 C0.25,16.4664983 1.03350169,17.25 2,17.25 L2,17.25 L15.5,17.25 C16.4664983,17.25 17.25,16.4664983 17.25,15.5 L17.25,15.5 L17.25,8.5 C17.25,7.53350169 16.4664983,6.75 15.5,6.75 L15.5,6.75 Z" id="形状结合" transform="translate(8.750000, 12.000000) rotate(-90.000000) translate(-8.750000, -12.000000) "></path>
+                        <path d="M27,9.5 C28.3807119,9.5 29.5,10.6192881 29.5,12 C29.5,13.3807119 28.3807119,14.5 27,14.5 L12,14.5 C10.6192881,14.5 9.5,13.3807119 9.5,12 C9.5,10.6192881 10.6192881,9.5 12,9.5 L27,9.5 Z M27,11 L12,11 C11.4477153,11 11,11.4477153 11,12 C11,12.5522847 11.4477153,13 12,13 L12,13 L27,13 C27.5522847,13 28,12.5522847 28,12 C28,11.4477153 27.5522847,11 27,11 L27,11 Z" id="形状结合" transform="translate(19.500000, 12.000000) rotate(-90.000000) translate(-19.500000, -12.000000) "></path>
+                    </g>
+                </g>
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/change2.svg b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/change2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a7a37f839031fcdf7be414397d3ea25acf45e171
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/change2.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>qieHuang 2</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-124.000000, -345.000000)">
+            <g id="编组-18" transform="translate(124.000000, 345.000000)">
+                <g id="编组" fill="#FFFFFF" fill-rule="nonzero">
+                    <g id="上下" transform="translate(2.000000, 2.000000)">
+                        <path d="M17,0 C18.6568542,0 20,1.34314575 20,3 L20,10.5 C20,12.1568542 18.6568542,13.5 17,13.5 L3,13.5 C1.34314575,13.5 0,12.1568542 0,10.5 L0,3 C0,1.34314575 1.34314575,0 3,0 L17,0 Z M17,1.5 L3,1.5 C2.17157288,1.5 1.5,2.17157288 1.5,3 L1.5,10.5 C1.5,11.3284271 2.17157288,12 3,12 L17,12 C17.8284271,12 18.5,11.3284271 18.5,10.5 L18.5,3 C18.5,2.17157288 17.8284271,1.5 17,1.5 Z" id="形状结合"></path>
+                        <path d="M17.5,15 C18.8807119,15 20,16.1192881 20,17.5 C20,18.8807119 18.8807119,20 17.5,20 L2.5,20 C1.11928813,20 0,18.8807119 0,17.5 C0,16.1192881 1.11928813,15 2.5,15 L17.5,15 Z M17.5,16.5 L2.5,16.5 C1.94771525,16.5 1.5,16.9477153 1.5,17.5 C1.5,18.0522847 1.94771525,18.5 2.5,18.5 L17.5,18.5 C18.0522847,18.5 18.5,18.0522847 18.5,17.5 C18.5,16.9477153 18.0522847,16.5 17.5,16.5 Z" id="形状结合"></path>
+                    </g>
+                </g>
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/ic_add_2.svg b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/ic_add_2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ae211363873b9d63dbf3dac1f40c7d1b24c4ebda
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/ic_add_2.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_add 2</title>
+    <defs>
+        <path d="M16.4846934,7.5009057 C19.2466933,7.5009057 21.4857367,9.73994904 21.4857367,12.501949 C21.4857367,15.1912647 19.3629871,17.3847857 16.7016282,17.4983718 L16.4846934,17.5029923 L4.76343695,17.5029923 C4.34922339,17.5029923 4.01343695,17.8387787 4.01343695,18.2529923 C4.01343695,18.632688 4.29559084,18.9464832 4.6616664,18.9961457 L4.76343695,19.0029923 L16.4846934,19.0029923 C20.0751204,19.0029923 22.9857367,16.092376 22.9857367,12.501949 C22.9857367,8.98957468 20.2002934,6.1277755 16.7178649,6.00500936 L16.4846934,6.0009057 L5.43973666,5.99991185 L5.4394331,3.99191185 C5.4394331,3.71576947 5.21557547,3.49191185 4.9394331,3.49191185 C4.81805551,3.49191185 4.70082217,3.53606391 4.60959982,3.61613265 L1.18155808,6.62503319 C0.974020957,6.80719508 0.953450266,7.12310855 1.13561216,7.33064567 C1.23054594,7.43880377 1.36747959,7.5008124 1.51138482,7.5008124 L16.4846934,7.5009057 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-124.000000, -52.000000)">
+            <g id="编组-10" transform="translate(124.000000, 52.000000)">
+                <g id="ic/add">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="路径" fill="#FFFFFF" xlink:href="#path-1"></use>
+                </g>
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/ic_add_3.svg b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/ic_add_3.svg
new file mode 100644
index 0000000000000000000000000000000000000000..743b3a81ca3f5335a05df9d7603a8b6d9e22692d
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/ic_add_3.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_add 3</title>
+    <defs>
+        <path d="M7.52113125,7.5009057 C4.75913131,7.5009057 2.52008796,9.73994904 2.52008796,12.501949 C2.52008796,15.1912647 4.64283751,17.3847857 7.30419637,17.4983718 L7.52113125,17.5029923 L19.2696068,17.5029923 C19.6838204,17.5029923 20.0196068,17.8387787 20.0196068,18.2529923 C20.0196068,18.632688 19.7374529,18.9464832 19.3713774,18.9961457 L19.2696068,19.0029923 L7.52113125,19.0029923 C3.93070418,19.0029923 1.02008796,16.092376 1.02008796,12.501949 C1.02008796,8.98957468 3.80553118,6.1277755 7.28795969,6.00500936 L7.52113125,6.0009057 L18.587088,5.99991185 L18.5871207,3.99191185 C18.5871207,3.71576947 18.8109783,3.49191185 19.0871207,3.49191185 C19.2084983,3.49191185 19.3257316,3.53606391 19.416954,3.61613265 L22.8449957,6.62503319 C23.0525328,6.80719508 23.0731035,7.12310855 22.8909416,7.33064567 C22.7960078,7.43880377 22.6590742,7.5008124 22.5151624,7.5008124 L7.52113125,7.5009057 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-124.000000, -88.000000)">
+            <g id="编组-11" transform="translate(124.000000, 88.000000)">
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+                <g id="ic/add">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="路径" fill="#FFFFFF" xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/ic_add_4.svg b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/ic_add_4.svg
new file mode 100644
index 0000000000000000000000000000000000000000..be0840af36979014443ed3184fa4664d3f3fa045
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/ic_add_4.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_add 4</title>
+    <defs>
+        <path d="M17.75,2 L17.7520126,2.01890136 C18.8647483,2.07278856 19.3944045,2.24101598 19.91208,2.51223497 L19.9536914,2.53426541 C20.5745027,2.86627892 21.0680807,3.34610464 21.4148264,3.9541436 L21.4657346,4.04630859 C21.8143488,4.69816044 22,5.34473292 22,7.1277704 L22,16.8722296 L21.9989932,17.0937657 C21.9842401,18.674381 21.8076257,19.3015622 21.487765,19.91208 L21.4657346,19.9536914 C21.1337211,20.5745027 20.6538954,21.0680807 20.0458564,21.4148264 L19.9536914,21.4657346 C19.3018396,21.8143488 18.6552671,22 16.8722296,22 L7.1277704,22 L6.90623426,21.9989932 C5.32561899,21.9842401 4.69843783,21.8076257 4.08791999,21.487765 L4.04630859,21.4657346 C3.42549731,21.1337211 2.93191931,20.6538954 2.58517358,20.0458564 L2.53426541,19.9536914 C2.18565122,19.3018396 2,18.6552671 2,16.8722296 L2,7.1277704 C2,5.38266989 2.17783521,4.72618864 2.51223497,4.08791999 L2.53426541,4.04630859 C2.86627892,3.42549731 3.34610464,2.93191931 3.9541436,2.58517358 L4.04630859,2.53426541 C4.57769437,2.25007718 5.10557179,2.0741846 6.24845829,2.01887856 L6.25,2 L17.75,2 Z M17.7514636,3.5180042 L17.75,7.25 C17.75,8.76878306 16.5187831,10 15,10 L15,10 L9,10 C7.48121694,10 6.25,8.76878306 6.25,7.25 L6.25,7.25 L6.24877877,3.51799203 C5.49137422,3.55599646 5.12615584,3.65779732 4.75370688,3.8569852 C4.36325774,4.06579969 4.06579969,4.36325774 3.8569852,4.75370688 C3.59290159,5.24750032 3.5,5.72858421 3.5,7.1277704 L3.50017541,16.9754617 L3.501658,17.176942 C3.5151767,18.3449184 3.61305534,18.7901839 3.8569852,19.2462931 C4.06579969,19.6367423 4.36325774,19.9342003 4.75370688,20.1430148 C5.22281064,20.3938942 5.68044405,20.4902819 6.92466189,20.4992935 L7.1277704,20.5 L16.8722296,20.5 C18.2714158,20.5 18.7524997,20.4070984 19.2462931,20.1430148 C19.6367423,19.9342003 19.9342003,19.6367423 20.1430148,19.2462931 C20.3938942,18.7771894 20.4902819,18.319556 20.4992935,17.0753381 L20.5,16.8722296 L20.5,7.1277704 C20.5,5.72858421 20.4070984,5.24750032 20.1430148,4.75370688 C19.9342003,4.36325774 19.6367423,4.06579969 19.2462931,3.8569852 C18.8738839,3.65781857 18.5087037,3.55601818 17.7514636,3.5180042 Z M17,15 C17.4142136,15 17.75,15.3357864 17.75,15.75 C17.75,16.1494202 17.43777,16.4759152 17.0440682,16.4987268 L17,16.5 L7,16.5 C6.58578644,16.5 6.25,16.1642136 6.25,15.75 C6.25,15.3505798 6.56222999,15.0240848 6.9559318,15.0012732 L7,15 L17,15 Z M16.25,3.5 L7.75,3.5 L7.75,7.25 C7.75,7.92218868 8.28057668,8.47045453 8.94577759,8.49884512 L8.94577759,8.49884512 L9,8.5 L15,8.5 C15.6903559,8.5 16.25,7.94035594 16.25,7.25 L16.25,7.25 L16.25,3.5 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-124.000000, -128.000000)">
+            <g id="编组-12" transform="translate(124.000000, 128.000000)">
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+                <g id="ic/add">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="形状结合" fill-rule="nonzero"></g>
+                    <g id="编组" mask="url(#mask-2)" fill="#FFFFFF" fill-opacity="0.858823529">
+                        <g id="Symbol/color-light/colorPrimary">
+                            <rect id="color/#000000" x="0" y="0" width="24" height="24"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/photo.jpg b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/photo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..acab7e7af890f6589b9f29241c940f1a6ca1b483
Binary files /dev/null and b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/photo.jpg differ
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/tools_1.svg b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/tools_1.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b2d66f5d8bef452c104f6531180d8322bdcc1d66
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/tools_1.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>蒙版</title>
+    <defs>
+        <path d="M3.7739809,14.357944 C4.18819447,14.357944 4.5239809,14.6937304 4.5239809,15.107944 L4.5239809,16.3731168 C4.5239809,17.984892 5.74720478,19.3109679 7.31595408,19.4736462 L7.31641512,18.6280908 C7.31641512,18.5702382 7.33647951,18.5141762 7.37318801,18.4694614 C7.44619517,18.3805311 7.56775992,18.3549525 7.66801069,18.399596 L7.72504451,18.4348637 L10.2547178,20.5093835 C10.3105533,20.5418565 10.3526647,20.5953335 10.3702307,20.658993 L10.3792141,20.7256458 L10.3792141,20.7411838 C10.3792141,20.8595305 10.2969807,20.9586706 10.1865368,20.9845811 L10.1449809,20.9891821 L10.1449809,20.988944 L10.1389809,20.9891821 L10.1409809,20.9901821 L10.1292141,20.9911838 L10.1389809,20.9891821 L10.1369809,20.989944 L10.1292141,20.9911838 L10.1136761,20.9911838 L10.1100351,20.9911578 L7.64128216,20.990418 C5.09121709,20.990418 3.0239809,18.9231819 3.0239809,16.3731168 L3.0239809,15.107944 C3.0239809,14.6937304 3.35976734,14.357944 3.7739809,14.357944 Z M7.88483059,4.04742602 C8.29904415,4.04742602 8.6348347,4.38320834 8.6348347,4.79742191 L8.63442733,5.83342602 L8.63325788,5.83433551 L8.63342733,8.92742602 L8.63489259,15.3625962 L14.6144273,15.377426 L14.6153609,15.3801052 L16.8824273,15.379426 L16.8834273,15.382426 L19.228559,15.3892646 C19.6427712,15.3903074 19.9777113,15.7269381 19.976671,16.1411503 C19.9756258,16.5553626 19.6389952,16.8903026 19.2247829,16.8892623 L16.8834273,16.882426 L16.8835049,19.2055058 C16.8835049,19.6197193 16.5477184,19.9555058 16.1335049,19.9555058 C15.7192913,19.9555058 15.3835049,19.6197193 15.3835049,19.2055058 L15.3834273,16.879426 L8.63111651,16.8625915 C7.80416948,16.8605097 7.1348347,16.1895541 7.1348347,15.3626044 L7.13442733,8.68242602 L4.79942733,8.68272071 C4.38521377,8.68272071 4.04942733,8.34693427 4.04942733,7.93272071 C4.04942733,7.51850715 4.38521377,7.18272071 4.79942733,7.18272071 L7.13442733,7.18242602 L7.1348347,4.79743012 C7.1348347,4.38321656 7.47061703,4.04742602 7.88483059,4.04742602 Z M15.3835049,7.18272071 C16.211932,7.18272071 16.8835049,7.85429358 16.8835049,8.68272071 L16.8824273,14.348426 L15.3824273,14.348426 L15.3835049,8.68272071 L9.66342733,8.68242602 L9.66342733,7.18242602 L15.3835049,7.18272071 Z M16.6911934,2.72894783 C19.2412585,2.72894783 21.3084947,4.79618402 21.3084947,7.34624909 L21.3084947,8.61142189 C21.3084947,9.02563545 20.9727082,9.36142189 20.5584947,9.36142189 C20.1442811,9.36142189 19.8084947,9.02563545 19.8084947,8.61142189 L19.8084947,7.34624909 C19.8084947,5.73447389 18.5852708,4.40839793 17.0165215,4.24571967 L17.0160605,5.09127509 C17.0160605,5.14912771 16.9959961,5.2051897 16.9592876,5.24990448 C16.8862804,5.3388348 16.7647157,5.36441342 16.6644649,5.31976992 L16.6074311,5.28450221 L14.0808169,3.21173276 C14.0237178,3.1795947 13.9805174,3.12567386 13.9624859,3.06124037 L13.9532614,2.99372008 L13.9532614,2.97818207 C13.9532614,2.85983534 14.0354949,2.76069525 14.1459387,2.73478475 L14.1869809,2.73018207 L14.1870328,2.72847509 L14.1939809,2.72918207 L14.2032614,2.72818207 L16.6911934,2.72894783 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-124.000000, -164.000000)">
+            <g id="编组-13" transform="translate(124.000000, 164.000000)">
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+                <g id="蒙版">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Combined-Shape" fill-opacity="0.858823529" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/tools_2.svg b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/tools_2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..31e4ddd0541eb8f550f3e3b07900122f028a7b45
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/tools_2.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>蒙版 2</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-124.000000, -200.000000)">
+            <g id="编组-14" transform="translate(124.000000, 200.000000)">
+                <g id="编组" fill="#FFFFFF" fill-opacity="0.858823529" fill-rule="nonzero">
+                    <g id="蒙版">
+                        <path d="M18.5537883,3.39705176 C18.8473998,3.1791973 19.2640635,3.20340335 19.5303301,3.46966991 C19.7965966,3.73593648 19.8208027,4.15260016 19.6029482,4.44621165 L19.5303301,4.53033009 L9.71175495,14.3480734 C10.5085798,15.159928 11,16.2725753 11,17.5 C11,19.9852814 8.98528137,22 6.5,22 C4.01471863,22 2,19.9852814 2,17.5 C2,15.0147186 4.01471863,13 6.5,13 C7.2148945,13 7.89085308,13.1667044 8.49112297,13.4633605 L8.49755682,13.4532833 L8.57017498,13.3691649 L10.939,10.999 L4.46966991,4.53033009 C4.1767767,4.23743687 4.1767767,3.76256313 4.46966991,3.46966991 C4.73593648,3.20340335 5.15260016,3.1791973 5.44621165,3.39705176 L5.53033009,3.46966991 L12,9.939 L18.4696699,3.46966991 L18.5537883,3.39705176 Z M14.06,12 L15.429825,13.3691649 C15.4593777,13.3987175 15.4859485,13.4301229 15.5095375,13.463007 C16.1091469,13.1667044 16.7851055,13 17.5,13 C19.9852814,13 22,15.0147186 22,17.5 C22,19.9852814 19.9852814,22 17.5,22 C15.0147186,22 13,19.9852814 13,17.5 C13,16.2725753 13.4914202,15.159928 14.2882451,14.3480734 L13,13.06 L14.06,12 Z M6.5,14.5 C4.84314575,14.5 3.5,15.8431458 3.5,17.5 C3.5,19.1568542 4.84314575,20.5 6.5,20.5 C8.15685425,20.5 9.5,19.1568542 9.5,17.5 C9.5,15.8431458 8.15685425,14.5 6.5,14.5 Z M17.5,14.5 C15.8431458,14.5 14.5,15.8431458 14.5,17.5 C14.5,19.1568542 15.8431458,20.5 17.5,20.5 C19.1568542,20.5 20.5,19.1568542 20.5,17.5 C20.5,15.8431458 19.1568542,14.5 17.5,14.5 Z" id="形状"></path>
+                    </g>
+                </g>
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/tools_3.svg b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/tools_3.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cc5f134dfb89b152c39f292343f13cfbb6026148
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/tools_3.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>蒙版 3</title>
+    <defs>
+        <path d="M8.33642332,13.0505141 C10.0616896,13.0505141 11.5034979,14.264142 11.8547008,15.8842504 L21.5872248,15.8846605 C22.0014384,15.8846605 22.3372248,16.2204469 22.3372248,16.6346605 C22.3372248,17.0143562 22.0550709,17.3281514 21.6889954,17.3778139 L21.5872248,17.3846605 L11.8614729,17.3848347 C11.5224064,19.0209076 10.0730098,20.2505141 8.33642332,20.2505141 C6.55883162,20.2505141 5.08215257,18.9621538 4.78922315,17.2682703 L2.37204238,17.2674947 C1.95782881,17.2674947 1.62204238,16.9317083 1.62204238,16.5174947 C1.62204238,16.137799 1.90419626,15.8240038 2.27027182,15.7743414 L2.37204238,15.7674947 L4.84550375,15.767531 C5.23919269,14.2061994 6.65284561,13.0505141 8.33642332,13.0505141 Z M8.33642332,14.5505141 C7.17662534,14.5505141 6.23642332,15.4907161 6.23642332,16.6505141 C6.23642332,17.810312 7.17662534,18.7505141 8.33642332,18.7505141 C9.49622129,18.7505141 10.4364233,17.810312 10.4364233,16.6505141 C10.4364233,15.4907161 9.49622129,14.5505141 8.33642332,14.5505141 Z M15.6314998,3.72031539 C17.3148088,3.72031539 18.7282792,4.87563186 19.1222308,6.43658468 L21.5958808,6.43729607 C22.0100943,6.43729607 22.3458808,6.77308251 22.3458808,7.18729607 C22.3458808,7.60150963 22.0100943,7.93729607 21.5958808,7.93729607 L19.1788731,7.93706971 C18.8863529,9.63144708 17.409442,10.9203154 15.6314998,10.9203154 C13.8949133,10.9203154 12.4455168,9.69070892 12.1064503,8.05463607 L2.38069833,8.05446182 C1.96648477,8.05446182 1.63069833,7.71867538 1.63069833,7.30446182 C1.63069833,6.89024825 1.96648477,6.55446182 2.38069833,6.55446182 L12.1130256,6.5549602 C12.4638863,4.93439704 13.9059111,3.72031539 15.6314998,3.72031539 Z M15.6314998,5.22031539 C14.4717019,5.22031539 13.5314998,6.16051741 13.5314998,7.32031539 C13.5314998,8.48011336 14.4717019,9.42031539 15.6314998,9.42031539 C16.7912978,9.42031539 17.7314998,8.48011336 17.7314998,7.32031539 C17.7314998,6.16051741 16.7912978,5.22031539 15.6314998,5.22031539 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-124.000000, -236.000000)">
+            <g id="编组-15" transform="translate(124.000000, 236.000000)">
+                <g id="蒙版">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="形状" fill-opacity="0.858823529" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-1"></use>
+                </g>
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/tools_4.svg b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/tools_4.svg
new file mode 100644
index 0000000000000000000000000000000000000000..579a2f699e31bb898888f715f87eb8607ca1d2a2
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureEdit/src/main/resources/base/media/tools_4.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>蒙版 4</title>
+    <defs>
+        <path d="M17.5820124,8.27109483 C17.5219318,8.69222778 17.1322918,8.98485268 16.7117272,8.92469083 C16.2911625,8.86452898 15.9989325,8.47436245 16.0590132,8.0532295 C16.067044,7.99693778 16.0717779,7.94110845 16.0742863,7.87580151 C16.0764627,7.81913803 16.0769231,7.77027209 16.0769231,7.64864865 C16.0769231,7.08208625 15.9686089,6.54520663 15.7561,6.05577552 C15.5441653,5.56766718 15.245056,5.13201111 14.8663281,4.75277144 C14.5078491,4.39380801 14.0505544,4.08287963 13.5534849,3.85663364 C13.1034831,3.65181092 12.547882,3.54054054 11.974359,3.54054054 C11.4085612,3.54054054 10.8724061,3.64900107 10.3836355,3.86179721 C9.89618585,4.07401822 9.4611177,4.37353177 9.08238983,4.75277144 C8.72391083,5.11173487 8.41340206,5.56964758 8.19261799,6.05577552 C7.98010903,6.54520663 7.87179487,7.08208625 7.87179487,7.64864865 C7.87179487,7.77027209 7.87225525,7.81913803 7.87443167,7.87580151 C7.87694009,7.94110845 7.88167392,7.99693778 7.88970474,8.0532295 C7.9497854,8.47436245 7.65755541,8.86452898 7.23699079,8.92469083 C6.81642616,8.98485268 6.42678618,8.69222778 6.36670552,8.27109483 C6.35073515,8.15915116 6.34155951,8.05093652 6.33710679,7.9350093 C6.33391462,7.85190082 6.33333333,7.79020088 6.33333333,7.64864865 C6.33333333,6.87365699 6.4838484,6.12760061 6.78689758,5.42990854 C7.08723897,4.76826458 7.50192743,4.15671628 7.99453325,3.66344478 C8.50811306,3.14917093 9.10353844,2.7392628 9.77021068,2.44901361 C10.4553636,2.15071846 11.2004132,2 11.974359,2 C12.7598104,2 13.5320481,2.15465626 14.1901048,2.45417717 C14.8508559,2.75492443 15.4615789,3.17017328 15.9541847,3.66344478 C16.4677645,4.17771862 16.8771195,4.77394863 17.166977,5.44152178 C17.4648696,6.12760061 17.6153846,6.87365699 17.6153846,7.64864865 C17.6153846,7.79020088 17.6148033,7.85190082 17.6116112,7.9350093 C17.6071584,8.05093652 17.5979828,8.15915116 17.5820124,8.27109483 Z M6.04699528,10.5906598 C6.236987,10.9711567 6.08296828,11.4338373 5.70298482,11.6240858 C5.46974736,11.7408621 5.28035009,11.8606431 5.14756765,11.9769848 L5.11328765,12.0053118 C4.95451593,12.1289678 4.82913436,12.2469097 4.54392829,12.5325012 C4.4147831,12.6618209 4.30254838,12.8174328 4.14678943,13.0773819 C4.00878883,13.3076937 3.90577548,13.5191564 3.82548212,13.7402615 C3.75206821,13.9424226 3.70152032,14.1122226 3.598811,14.4883769 C3.55702944,14.749646 3.53846154,14.9802758 3.53846154,15.2486486 C3.53846154,15.5601935 3.56399082,15.820944 3.61805833,16.0375063 C3.72428716,16.4629959 3.776579,16.6425245 3.86390533,16.8523909 C3.95909324,17.0811506 4.07592293,17.2858788 4.24556302,17.5285493 C4.41324061,17.7684124 4.58945345,17.9847071 4.7490565,18.1445259 C4.90865954,18.3043446 5.12466239,18.4807956 5.3642018,18.6486997 C5.56708535,18.7909101 5.80359365,18.9230932 6.0618997,19.0406637 C6.30525043,19.1514271 6.54373105,19.226053 6.78363373,19.263011 L6.81875703,19.2684219 L6.85323253,19.2770524 C7.06950258,19.331193 7.32990127,19.3567568 7.64102564,19.3567568 L7.80301918,19.3562299 C7.84394747,19.3558225 7.87575208,19.355127 7.91027064,19.3539749 C7.99269954,19.3512235 8.06408666,19.3459501 8.10430847,19.3415614 L8.12198357,19.3388227 C8.13847776,19.3364632 8.23299509,19.3231473 8.25970212,19.3192945 C8.30938808,19.3121267 8.34932314,19.3060196 8.38635975,19.2998385 C8.46881583,19.2860772 8.53322449,19.2724129 8.58354785,19.2580153 L9.07694911,19.116853 C9.09374511,19.1098267 9.11117894,19.1026206 9.12992155,19.0949428 C9.15042256,19.0865447 9.17533478,19.0764251 9.21632812,19.0597755 C9.24688789,19.0473276 9.26917324,19.0381207 9.29002052,19.0292887 C9.36137072,18.9990613 9.41319454,18.9740935 9.46450851,18.9447316 L9.50214339,18.9245628 C9.63443125,18.8583295 9.78539424,18.7711178 9.90664087,18.6901775 C10.2601245,18.4542033 10.7377163,18.5498507 10.973372,18.903812 C11.2090278,19.2577733 11.1135094,19.7360105 10.7600258,19.9719847 C10.5902872,20.0852967 10.3917953,20.2004631 10.2086224,20.2931721 C10.1054441,20.3511738 10.0057223,20.3988246 9.88946666,20.4480761 C9.86090711,20.4601753 9.83261571,20.4718636 9.79601755,20.4867711 C9.63698049,20.5515515 9.67603243,20.5355542 9.63634818,20.5525847 L9.59153581,20.5718159 L9.00619574,20.739282 C8.89247959,20.7718162 8.77437327,20.7968725 8.63928127,20.8194183 C8.58953904,20.8277199 8.53905796,20.8354397 8.47907993,20.8440923 C8.44926173,20.848394 8.35350942,20.8618838 8.35722999,20.8611413 L8.32618057,20.8656735 C8.20565693,20.8807593 8.08829491,20.8894289 7.96152423,20.8936603 C7.86960818,20.8967283 7.80028113,20.8972973 7.64102564,20.8972973 C7.22767836,20.8972973 6.85787825,20.8623218 6.51484023,20.7801069 C6.14093409,20.719059 5.78014387,20.60464 5.42527979,20.4431201 C5.08494638,20.2882141 4.76666833,20.1103304 4.48195204,19.9107597 C4.17370591,19.6946958 3.88987526,19.4628369 3.66119991,19.2338525 C3.43252457,19.0048682 3.20097851,18.7206539 2.98520621,18.4119913 C2.75598591,18.0840912 2.58528546,17.7849617 2.44378698,17.4449064 C2.31743809,17.1412593 2.25007181,16.9099771 2.12553141,16.4111423 C2.03733259,16.0578703 2,15.6765633 2,15.2486486 C2,14.8814501 2.02756503,14.5571233 2.08738929,14.1976927 L2.09378755,14.1592513 L2.10402783,14.1216528 C2.22492715,13.6777562 2.28458619,13.4755605 2.37964608,13.2137925 C2.49532342,12.89525 2.64115543,12.5958903 2.82756954,12.2847803 C3.04243996,11.926179 3.22111434,11.6784494 3.45607171,11.4431745 C3.7780065,11.1208047 3.93498849,10.9726497 4.15197292,10.8024076 C4.39274162,10.5947783 4.6819455,10.4129187 5.0149639,10.2461845 C5.39494736,10.055936 5.85700355,10.2101628 6.04699528,10.5906598 Z M18.9593951,10.2205088 C19.250493,10.3662544 19.5209964,10.5419532 19.8055953,10.7636071 C20.031439,10.9395006 20.1881087,11.0868741 20.5182873,11.4174988 L20.5532641,11.4549356 C20.7834108,11.7183159 20.980127,11.9809586 21.1467894,12.2591046 C21.2324775,12.402111 21.3026424,12.5426305 21.3899548,12.7358977 C21.4062031,12.7718635 21.4218576,12.8069305 21.4516021,12.8737138 C21.5007756,12.9839175 21.529554,13.0462707 21.5598158,13.106876 C21.7181043,13.4238807 21.8198354,13.7686667 21.8869697,14.172017 C21.9451935,14.5218319 21.974359,14.8722907 21.974359,15.222973 C21.974359,15.6368788 21.9394307,16.0071787 21.8573267,16.3506803 C21.7963612,16.7250917 21.6820966,17.0863695 21.5207947,17.4417131 C21.3660977,17.7825064 21.1884542,18.1012146 20.9891528,18.3863156 C20.7733805,18.6949783 20.5418344,18.9791925 20.3131591,19.2081768 C20.0844837,19.4371612 19.8006531,19.6690202 19.4924069,19.885084 C19.1649493,20.1146141 18.8662236,20.2855452 18.5266272,20.4272349 C18.2233899,20.5537546 17.9924198,20.6212119 17.4942582,20.7459206 C17.1414629,20.8342386 16.7606705,20.8716216 16.3333333,20.8716216 C16.0075737,20.8716216 15.8620105,20.866763 15.6481784,20.8399978 C15.3749916,20.8058033 15.2020236,20.7770044 15.0178547,20.7274102 C14.7882506,20.6899431 14.5613302,20.6227466 14.3380108,20.526909 C14.0668936,20.4105589 13.9422402,20.3552758 13.803802,20.2865634 C13.6090402,20.2013958 13.4740377,20.1196793 13.2143332,19.946309 C12.8608496,19.7103348 12.7653312,19.2320976 13.000987,18.8781363 C13.2366427,18.524175 13.7142345,18.4285276 14.0677181,18.6645018 C14.2601536,18.7929655 14.3386168,18.8401071 14.43122,18.8798477 L14.4722156,18.8988872 C14.5819627,18.9538349 14.6894254,19.0016606 14.9440405,19.1109288 C15.0625772,19.1617989 15.1769396,19.1945181 15.2882728,19.2104443 L15.3402888,19.2178852 L15.3908111,19.2323397 C15.4991983,19.2633493 15.6144415,19.2832456 15.8390011,19.3113535 C15.9701573,19.3277702 16.0693494,19.3310811 16.3333333,19.3310811 C16.6444577,19.3310811 16.9048564,19.3055173 17.1211264,19.2513767 C17.5460418,19.1450043 17.7253281,19.0926418 17.9349112,19.0051975 C18.1633622,18.909881 18.3678142,18.7928934 18.6101572,18.6230241 C18.8496966,18.4551199 19.0656994,18.2786689 19.2253025,18.1188502 C19.3849055,17.9590315 19.5611184,17.7427367 19.728796,17.5028736 C19.8708144,17.2997159 20.0028191,17.062888 20.1202309,16.8042329 C20.2308449,16.5605533 20.3053701,16.3217504 20.3422782,16.0815235 L20.3476818,16.0463528 L20.3563006,16.0118307 C20.4103682,15.7952684 20.4358974,15.5345178 20.4358974,15.222973 C20.4358974,14.9574391 20.4137809,14.6916816 20.3694406,14.4252803 C20.3257152,14.1625733 20.2662262,13.9609541 20.183774,13.7958267 C20.1408774,13.7099176 20.1046855,13.6315019 20.0469734,13.502162 C20.0168889,13.4346236 20.0028488,13.4031729 19.9882503,13.370859 C19.9233192,13.227133 19.8764969,13.133362 19.8275695,13.0517062 C19.7158264,12.8652159 19.5781636,12.6802391 19.4118262,12.4882072 C19.1396884,12.2160387 19.016348,12.1005701 18.8610713,11.9796362 C18.6519314,11.816752 18.4651247,11.6954163 18.2713742,11.5984101 C17.8913907,11.4081617 17.737372,10.9454811 17.9273637,10.5649841 C18.1173554,10.1844872 18.5794116,10.0302603 18.9593951,10.2205088 Z M16.3076923,9.6 C16.6153846,9.6 16.9230769,9.62567568 17.2307692,9.67702703 C16.542735,11.4240428 15.0304932,12.7701882 13.1453956,13.173109 L12.8974359,13.2202703 L12.9994767,13.4889292 C13.1878598,14.03508 13.2820513,14.6324324 13.2820513,15.2486486 C13.2820513,16.6351351 12.7948718,17.8932432 11.974359,18.8689189 C11.1538462,17.8932432 10.6666667,16.6351351 10.6666667,15.2486486 C10.6666667,14.6324324 10.7796965,14.0539437 10.9573148,13.4970136 L11.0512821,13.2202703 L10.8033224,13.1732372 C8.91822472,12.7722386 7.40598291,11.4486486 6.71794872,9.67702703 C7.02564103,9.62567568 7.33333333,9.6 7.64102564,9.6 C9.2928475,9.6 10.7835784,10.314367 11.8079932,11.4374635 L11.974359,11.6283784 L12.1407247,11.4374635 C13.1651396,10.314367 14.6558704,9.6 16.3076923,9.6 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-124.000000, -272.000000)">
+            <g id="编组-16" transform="translate(124.000000, 272.000000)">
+                <g id="蒙版">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="形状" fill-opacity="0.858823529" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-1"></use>
+                </g>
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/BuildProfile.ets b/MultiPictureBeautification/features/pictureView/BuildProfile.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3a501e5ddee8ea6d28961648fc7dd314a5304bd4
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/BuildProfile.ets
@@ -0,0 +1,17 @@
+/**
+ * Use these variables when you tailor your ArkTS code. They must be of the const type.
+ */
+export const HAR_VERSION = '1.0.0';
+export const BUILD_MODE_NAME = 'debug';
+export const DEBUG = true;
+export const TARGET_NAME = 'default';
+
+/**
+ * BuildProfile Class is used only for compatibility purposes.
+ */
+export default class BuildProfile { 
+	static readonly HAR_VERSION = HAR_VERSION;
+	static readonly BUILD_MODE_NAME = BUILD_MODE_NAME;
+	static readonly DEBUG = DEBUG;
+	static readonly TARGET_NAME = TARGET_NAME;
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/Index.ets b/MultiPictureBeautification/features/pictureView/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6d77ac70787f5378d907dcd97b3eabc8faf2e233
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/Index.ets
@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { PictureViewIndex } from './src/main/ets/pages/PictureViewIndex'
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/build-profile.json5 b/MultiPictureBeautification/features/pictureView/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7502eb5a6e454cfa104704afb4bb320071aa2e9e
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/hvigorfile.ts b/MultiPictureBeautification/features/pictureView/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiPictureBeautification/features/pictureView/obfuscation-rules.txt b/MultiPictureBeautification/features/pictureView/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..985b2aeb7658286b17bd26eab8f217c3fe75ea8b
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/obfuscation-rules.txt
@@ -0,0 +1,18 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/oh-package.json5 b/MultiPictureBeautification/features/pictureView/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..56a9d873d8199d834fb9b36f98a0a602dfe5a6bc
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/oh-package.json5
@@ -0,0 +1,14 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "pictureview",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dependencies": {
+    "@ohos/commons": "file:../../commons/base",
+    "@ohos/album": "file:../../features/albumView",
+    "@ohos/pictureEdit": "file:../../features/pictureEdit"
+  }
+}
diff --git a/MultiPictureBeautification/features/pictureView/src/main/ets/constants/PictureViewConstants.ets b/MultiPictureBeautification/features/pictureView/src/main/ets/constants/PictureViewConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..336e96c51ef8bcedd540507bbca1ffd98624d22e
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/ets/constants/PictureViewConstants.ets
@@ -0,0 +1,115 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface ActionInterface {
+  icon: Resource
+  icon_name: string
+}
+
+export default class PictureViewConstants {
+  /**
+   * Picture size.
+   */
+  static PICTURE_HEIGHT_SM = '88%';
+  static PICTURE_HEIGHT_MD = '100%';
+  static PICTURE_HEIGHT_LG = '100%';
+  static PICTURE_WIDTH_SM = '100%';
+  static PICTURE_WIDTH_MD = '84.5%';
+  static PICTURE_WIDTH_LG = '46.9%';
+  static readonly ICON_LIST_WIDTH = "18%";
+  /**
+   * Edit icon name.
+   */
+  static readonly EDIT_ICON_NAME: string = '编辑';
+  /**
+   * Actions.
+   */
+  static ACTIONS: ActionInterface[] = [
+    {
+      icon: $r('app.media.ic_public_share'), icon_name: "分享"
+    },
+    {
+      icon: $r('app.media.ic_public_favor'), icon_name: "收藏"
+    },
+    {
+      icon: $r("app.media.ic_gallery_public_details_4"), icon_name: "编辑"
+    },
+    {
+      icon: $r("app.media.ic_gallery_public_details_5"), icon_name: "删除"
+    },
+    {
+      icon: $r('app.media.ic_public_more'), icon_name: "更多"
+    }
+  ];
+  /**
+   * Pictures.
+   */
+  static readonly PICTURES: Resource[] = [
+    $r("app.media.album_photo1"),
+    $r("app.media.album_photo2"),
+    $r("app.media.album_photo3"),
+    $r("app.media.album_photo4"),
+    $r("app.media.album_photo5"),
+    $r("app.media.album_photo6"),
+    $r("app.media.album_photo7"),
+    $r("app.media.album_photo8"),
+    $r("app.media.album_photo9"),
+    $r("app.media.album_photo1"),
+    $r("app.media.album_photo2"),
+    $r("app.media.album_photo3"),
+    $r("app.media.album_photo4"),
+    $r("app.media.album_photo5"),
+    $r("app.media.album_photo6"),
+    $r("app.media.album_photo7"),
+    $r("app.media.album_photo8"),
+    $r("app.media.album_photo9"),
+    $r("app.media.album_photo1"),
+    $r("app.media.album_photo2"),
+    $r("app.media.album_photo3"),
+    $r("app.media.album_photo4"),
+    $r("app.media.album_photo5"),
+    $r("app.media.album_photo6"),
+    $r("app.media.album_photo7"),
+    $r("app.media.album_photo8"),
+    $r("app.media.album_photo9"),
+    $r("app.media.album_photo1"),
+    $r("app.media.album_photo2"),
+    $r("app.media.album_photo3"),
+    $r("app.media.album_photo4"),
+    $r("app.media.album_photo5"),
+    $r("app.media.album_photo6"),
+    $r("app.media.album_photo7"),
+    $r("app.media.album_photo8"),
+    $r("app.media.album_photo9"),
+    $r("app.media.album_photo1"),
+    $r("app.media.album_photo2"),
+    $r("app.media.album_photo3"),
+    $r("app.media.album_photo4"),
+    $r("app.media.album_photo5"),
+    $r("app.media.album_photo6"),
+    $r("app.media.album_photo7"),
+    $r("app.media.album_photo8"),
+    $r("app.media.album_photo9"),
+    $r("app.media.album_photo1"),
+    $r("app.media.album_photo2"),
+    $r("app.media.album_photo3"),
+    $r("app.media.album_photo4"),
+    $r("app.media.album_photo5"),
+    $r("app.media.album_photo6"),
+    $r("app.media.album_photo7"),
+    $r("app.media.album_photo8"),
+    $r("app.media.album_photo9")
+  ];
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/ets/pages/PictureViewIndex.ets b/MultiPictureBeautification/features/pictureView/src/main/ets/pages/PictureViewIndex.ets
new file mode 100644
index 0000000000000000000000000000000000000000..fd38725e83a61d4408ef5824cecfdc4208691486
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/ets/pages/PictureViewIndex.ets
@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { TopBar } from '../view/TopBar';
+import { CenterPart } from '../view/CenterPart';
+import { BottomBar } from '../view/BottomBar';
+import { PreviewLists } from '../view/PreviewLists';
+import { BaseConstants, BreakpointConstants } from '@ohos/commons';
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { AlbumView } from '@ohos/album';
+import { PictureEdit } from '@ohos/pictureEdit';
+
+@Preview
+@Component
+export struct PictureViewIndex {
+  @StorageLink('currentBreakpoint') currentBp: string = BreakpointConstants.BREAKPOINT_MD;
+  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()
+  @Builder
+  PageMap(name: string) {
+    if (name === 'albumView') {
+      AlbumView()
+    }
+    if (name === 'pictureEdit') {
+      PictureEdit()
+    }
+  }
+  build() {
+    Navigation(this.pageInfos) {
+        Flex({
+          direction: FlexDirection.Column,
+          alignItems: ItemAlign.Center
+        }) {
+          TopBar()
+          CenterPart()
+            .flexGrow(1)
+          PreviewLists()
+          if (this.currentBp !== BreakpointConstants.BREAKPOINT_LG) {
+            BottomBar()
+          }
+        }    .padding({
+          top: deviceInfo.deviceType === BaseConstants.DEVICE_2IN1 ? $r('app.float.zero') :
+          $r('app.float.device_padding_top'),
+          bottom: deviceInfo.deviceType !== BaseConstants.DEVICE_2IN1 ?
+          $r('app.float.tab_content_pb') : $r('app.float.zero')
+        })
+    }
+    .mode(NavigationMode.Stack)
+    .height(BaseConstants.FULL_HEIGHT)
+    .width(BaseConstants.FULL_WIDTH)
+    .navDestination(this.PageMap)
+    .hideTitleBar(true)
+    .hideToolBar(true)
+    .hideBackButton(true)
+    .titleMode(NavigationTitleMode.Mini)
+
+  }
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/ets/view/BottomBar.ets b/MultiPictureBeautification/features/pictureView/src/main/ets/view/BottomBar.ets
new file mode 100644
index 0000000000000000000000000000000000000000..33a66b5338a92f3a2c0ed1eb242b01944fae85e8
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/ets/view/BottomBar.ets
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PictureViewConstants, { ActionInterface } from '../constants/PictureViewConstants';
+import { BaseConstants } from '@ohos/commons';
+
+@Preview
+@Component
+export struct BottomBar {
+  @Consume('pageInfos') pageInfos: NavPathStack
+
+  build() {
+    Flex({
+      justifyContent: FlexAlign.Center,
+      direction: FlexDirection.Row
+    }) {
+      ForEach(PictureViewConstants.ACTIONS, (item: ActionInterface) => {
+        Column() {
+          Image(item.icon)
+            .height(BaseConstants.DEFAULT_ICON_SIZE)
+            .width(BaseConstants.DEFAULT_ICON_SIZE)
+          Text(item.icon_name)
+            .fontFamily(BaseConstants.FONT_FAMILY_NORMAL)
+            .fontSize(BaseConstants.FONT_SIZE_TEN)
+            .fontWeight(BaseConstants.FONT_WEIGHT_FOUR)
+            .padding({ top: $r('app.float.icon_padding_top') })
+        }
+        .onClick(() => {
+          if (item.icon_name === PictureViewConstants.EDIT_ICON_NAME) {
+            this.pageInfos.pushPath(new NavPathInfo('pictureEdit', []));
+          }
+        })
+        .width(PictureViewConstants.ICON_LIST_WIDTH)
+      },(item: ActionInterface, index: number) => index + JSON.stringify(item))
+    }
+    .height($r('app.float.icon_list_height'))
+  }
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/ets/view/CenterPart.ets b/MultiPictureBeautification/features/pictureView/src/main/ets/view/CenterPart.ets
new file mode 100644
index 0000000000000000000000000000000000000000..77e167bb6564199434083fa622b4514102802ee8
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/ets/view/CenterPart.ets
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants } from '@ohos/commons';
+import { Adaptive } from '../viewmodel/AdaptiveViewModel'
+
+const FINGER_NUM: number = 2
+
+@Component
+export struct CenterPart {
+  @StorageLink('currentBreakpoint') currentBp: string = BreakpointConstants.BREAKPOINT_MD;
+  @State scaleValue: number = 1;
+  @State pinchValue: number = 1;
+
+  build() {
+    Flex({ direction: FlexDirection.Column }) {
+      Blank()
+      // [Start center_part]
+      Row() {
+        Column() {
+          Image($r('app.media.photo'))
+            .autoResize(true)
+        }
+      }
+      // [StartExclude center_part]
+      .height(Adaptive.PICTURE_HEIGHT(this.currentBp))
+      .width(Adaptive.PICTURE_WIDTH(this.currentBp))
+      .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
+      // [EndExclude center_part]
+      .gesture(PinchGesture({ fingers: FINGER_NUM })
+        .onActionUpdate((event: GestureEvent | undefined) => {
+          if (event) {
+            this.scaleValue = this.pinchValue * event.scale;
+          }
+        })
+        .onActionEnd(() => {
+          this.pinchValue = this.scaleValue;
+        }))
+      // [End center_part]
+      Blank()
+        .height(this.currentBp === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.center_blank_height_lg') : 0)
+    }
+    .margin({
+      top: $r('app.float.center_margin_top'),
+      bottom: $r('app.float.center_margin_bottom')
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/ets/view/PreviewLists.ets b/MultiPictureBeautification/features/pictureView/src/main/ets/view/PreviewLists.ets
new file mode 100644
index 0000000000000000000000000000000000000000..72b6387a7c604c3e9ce82ca7a9d3c1d4638779ff
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/ets/view/PreviewLists.ets
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants } from '@ohos/commons';
+import PictureViewConstants from '../constants/PictureViewConstants';
+
+const IMAGE_ASPECT_RATIO: number = 0.5;
+
+@Component
+export struct PreviewLists {
+  @StorageLink('currentBreakpoint') currentBp: string = BreakpointConstants.BREAKPOINT_MD;
+
+  build() {
+    List({ initialIndex: 1 }) {
+      ForEach(PictureViewConstants.PICTURES, (item: Resource) => {
+        ListItem() {
+          Image(item)
+            .height($r('app.float.list_image_height'))
+            .aspectRatio(IMAGE_ASPECT_RATIO)
+            .autoResize(true)
+            .margin({ left: $r('app.float.list_image_margin_left') })
+        }
+      }, (item: Resource, index: number) => index + JSON.stringify(item))
+    }
+    .height($r('app.float.list_image_height'))
+    .padding({
+      top: $r('app.float.list_margin_top'),
+      bottom: $r('app.float.list_margin_bottom')
+    })
+    .listDirection(Axis.Horizontal)
+    .scrollSnapAlign(ScrollSnapAlign.CENTER)
+    .scrollBar(BarState.Off)
+  }
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/ets/view/TopBar.ets b/MultiPictureBeautification/features/pictureView/src/main/ets/view/TopBar.ets
new file mode 100644
index 0000000000000000000000000000000000000000..69f810e3e866831703a675d3d1b17b1070a663f2
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/ets/view/TopBar.ets
@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants, BreakpointConstants } from '@ohos/commons';
+import PictureViewConstants, { ActionInterface } from '../constants/PictureViewConstants';
+
+const TITLE: string = '2020年12月24日';
+const SUBTITLE: string = '下午04:00 呼和浩特市';
+
+@Preview
+@Component
+export struct TopBar {
+  @StorageLink('currentBreakpoint') currentBp: string = BreakpointConstants.BREAKPOINT_MD;
+  @Consume('pageInfos') pageInfos: NavPathStack
+
+  build() {
+    Flex({
+      direction: FlexDirection.Row,
+      alignItems: ItemAlign.Center,
+    }) {
+      Column() {
+        Flex({
+          justifyContent: FlexAlign.SpaceBetween,
+          direction: FlexDirection.Row,
+          alignItems: ItemAlign.Stretch
+        }) {
+          Row() {
+            Image($r('app.media.ic_public_back_black'))
+              .height(BaseConstants.DEFAULT_ICON_SIZE)
+              .width(BaseConstants.DEFAULT_ICON_SIZE)
+              .margin({ right: $r('app.float.back_image_right') })
+            Column() {
+              Text(TITLE)
+                .fontFamily(BaseConstants.FONT_FAMILY_MEDIUM)
+                .fontSize(BaseConstants.FONT_SIZE_TWENTY)
+                .fontWeight(BaseConstants.FONT_WEIGHT_FIVE)
+              Text(SUBTITLE)
+                .fontFamily(BaseConstants.FONT_FAMILY_NORMAL)
+                .fontSize(BaseConstants.FONT_SIZE_FOURTEEN)
+                .fontWeight(BaseConstants.FONT_WEIGHT_FOUR)
+            }
+            .alignItems(HorizontalAlign.Start)
+            .padding($r('app.float.back_area_padding'))
+          }
+
+          Row() {
+            Image($r('app.media.ic_public_picture'))
+              .height(BaseConstants.DEFAULT_ICON_SIZE)
+              .width(BaseConstants.DEFAULT_ICON_SIZE)
+              .autoResize(true)
+              .onClick(() => {
+                this.pageInfos.pushPath(new NavPathInfo('albumView', []));
+              })
+            Image($r('app.media.ic_public_detail'))
+              .height(BaseConstants.DEFAULT_ICON_SIZE)
+              .width(BaseConstants.DEFAULT_ICON_SIZE)
+              .margin({ left: $r('app.float.detail_image_left') })
+            if (this.currentBp === BreakpointConstants.BREAKPOINT_LG) {
+              ForEach(PictureViewConstants.ACTIONS, (item: ActionInterface) => {
+                Image(item.icon)
+                  .height(BaseConstants.DEFAULT_ICON_SIZE)
+                  .width(BaseConstants.DEFAULT_ICON_SIZE)
+                  .margin({ left: $r('app.float.detail_image_left') })
+                  .onClick(() => {
+                    if (item.icon_name === PictureViewConstants.EDIT_ICON_NAME) {
+                      this.pageInfos.pushPath(new NavPathInfo('pictureEdit', []));
+                    }
+                  })
+              }, (item: ActionInterface, index: number) => index + JSON.stringify(item))
+            }
+          }
+        }
+      }
+    }
+    .height($r('app.float.top_bar_height'))
+    .margin({
+      top: $r('app.float.top_bar_top'),
+      bottom: $r('app.float.top_bar_bottom'),
+      left: $r('app.float.top_bar_left'),
+      right: $r('app.float.top_bar_right')
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/ets/viewmodel/AdaptiveViewModel.ets b/MultiPictureBeautification/features/pictureView/src/main/ets/viewmodel/AdaptiveViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2223727e3b61704ca660e1059c79e0a677458ba6
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/ets/viewmodel/AdaptiveViewModel.ets
@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants as Constants, BreakpointType } from '@ohos/commons';
+import PictureViewConstants from '../constants/PictureViewConstants';
+
+export class Adaptive {
+  static PICTURE_HEIGHT = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      PictureViewConstants.PICTURE_HEIGHT_SM,
+      PictureViewConstants.PICTURE_HEIGHT_MD,
+      PictureViewConstants.PICTURE_HEIGHT_LG,
+    ).GetValue(currentBreakpoint);
+  };
+  static PICTURE_WIDTH = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      PictureViewConstants.PICTURE_WIDTH_SM,
+      PictureViewConstants.PICTURE_WIDTH_MD,
+      PictureViewConstants.PICTURE_WIDTH_LG,
+    ).GetValue(currentBreakpoint);
+  };
+  static CircleImageOneWidth = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      Constants.IMAGE_ONE_WIDTH_SM,
+      Constants.IMAGE_ONE_WIDTH_MD,
+      Constants.IMAGE_ONE_WIDTH_LG
+    ).GetValue(currentBreakpoint);
+  };
+  static HomeTabHeight = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      Constants.HOME_TAB_HEIGHT_SM,
+      Constants.HOME_TAB_HEIGHT_MD,
+      Constants.HOME_TAB_HEIGHT_LG
+    ).GetValue(currentBreakpoint);
+  };
+  static HomeTabWidth = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      Constants.HOME_TAB_WIDTH_SM,
+      Constants.HOME_TAB_WIDTH_MD,
+      Constants.HOME_TAB_WIDTH_LG
+    ).GetValue(currentBreakpoint);
+  };
+  static ContactPhoneWidth = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      Constants.CONTACTS_PHONE_WIDTH_SM,
+      Constants.CONTACTS_PHONE_WIDTH_MD,
+      Constants.CONTACTS_PHONE_WIDTH_LG
+    ).GetValue(currentBreakpoint);
+  };
+  static ContactDetailHeight = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      Constants.CONTACTS_DETAIL_HEIGHT_SM,
+      Constants.CONTACTS_DETAIL_HEIGHT_MD,
+      Constants.CONTACTS_DETAIL_HEIGHT_LG
+    ).GetValue(currentBreakpoint);
+  };
+  static ContactItemHeight = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      Constants.CONTACTS_ITEM_HEIGHT_SM,
+      Constants.CONTACTS_ITEM_HEIGHT_MD,
+      Constants.CONTACTS_ITEM_HEIGHT_LG
+    ).GetValue(currentBreakpoint);
+  };
+  static DocumentTitleColumnHeight = (currentBreakpoint: string): string => {
+    return new BreakpointType(
+      Constants.DOCUMENT_TITLE_HEIGHT_SM,
+      Constants.DOCUMENT_TITLE_HEIGHT_MD,
+      Constants.DOCUMENT_TITLE_HEIGHT_LG
+    ).GetValue(currentBreakpoint);
+  };
+  static DocumentTitleColumnSpace = (currentBreakpoint: string): number => {
+    return new BreakpointType(
+      Constants.DOCUMENT_TITLE_SPACE_SM,
+      Constants.DOCUMENT_TITLE_SPACE_MD,
+      Constants.DOCUMENT_TITLE_SPACE_LG
+    ).GetValue(currentBreakpoint);
+  };
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/module.json5 b/MultiPictureBeautification/features/pictureView/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..ddaa19ac7bbc8ed00a90d736e95ae69850314f00
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/module.json5
@@ -0,0 +1,11 @@
+{
+  "module": {
+    "name": "pictureView",
+    "type": "har",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/element/color.json b/MultiPictureBeautification/features/pictureView/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..1bbc9aa9617e97c45440e1d3d66afc1154837012
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/resources/base/element/color.json
@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/element/float.json b/MultiPictureBeautification/features/pictureView/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..e2664252fc4d38e2345833c34b2215e16c329ee6
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/resources/base/element/float.json
@@ -0,0 +1,84 @@
+{
+  "float": [
+    {
+      "name": "back_image_right",
+      "value": "10vp"
+    },
+    {
+      "name": "back_area_padding",
+      "value": "5vp"
+    },
+    {
+      "name": "detail_image_left",
+      "value": "24vp"
+    },
+    {
+      "name": "top_bar_height",
+      "value": "52vp"
+    },
+    {
+      "name": "top_bar_left",
+      "value": "24vp"
+    },
+    {
+      "name": "top_bar_bottom",
+      "value": "3vp"
+    },
+    {
+      "name": "top_bar_top",
+      "value": "3vp"
+    },
+    {
+      "name": "top_bar_right",
+      "value": "24vp"
+    },
+    {
+      "name": "center_blank_height_lg",
+      "value": "24vp"
+    },
+    {
+      "name": "center_margin_top",
+      "value": "4vp"
+    },
+    {
+      "name": "center_margin_bottom",
+      "value": "1vp"
+    },
+    {
+      "name": "list_image_height",
+      "value": "47vp"
+    },
+    {
+      "name": "list_image_margin_left",
+      "value": "1vp"
+    },
+    {
+      "name": "list_margin_top",
+      "value": "1vp"
+    },
+    {
+      "name": "list_margin_bottom",
+      "value": "10vp"
+    },
+    {
+      "name": "icon_padding_top",
+      "value": "4.5vp"
+    },
+    {
+      "name": "icon_list_height",
+      "value": "56vp"
+    },
+    {
+      "name": "zero",
+      "value": "0vp"
+    },
+    {
+      "name": "tab_content_pb",
+      "value": "28vp"
+    },
+    {
+      "name": "device_padding_top",
+      "value": "36vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/element/string.json b/MultiPictureBeautification/features/pictureView/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..98e1d8a84b3d8539ea33e79fe2ac593a05d23bb4
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/resources/base/element/string.json
@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_gallery_public_details_4.svg b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_gallery_public_details_4.svg
new file mode 100644
index 0000000000000000000000000000000000000000..16bc74c9905117d880c95caebf35346631015576
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_gallery_public_details_4.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_gallery_public_details 4</title>
+    <defs>
+        <path d="M18,2 C18.3582388,2 18.7054782,2.0470935 19.0358653,2.13542737 L17.671,3.5 L6,3.5 C4.64269002,3.5 3.53801707,4.5816677 3.50096045,5.93002379 L3.5,18 C3.5,19.35731 4.5816677,20.4619829 5.93002379,20.4990396 L18,20.5 C19.35731,20.5 20.4619829,19.4183323 20.4990396,18.0699762 L20.5,6.328 L21.8648402,4.9651359 C21.9530016,5.29522327 22,5.6421231 22,6 L22,18 C22,20.209139 20.209139,22 18,22 L6,22 C3.790861,22 2,20.209139 2,18 L2,6 C2,3.790861 3.790861,2 6,2 L18,2 Z M22.6568542,1.34710678 C23.0473785,1.73763107 23.0473785,2.37079605 22.6568542,2.76132034 L12.7573593,12.6608153 C12.366835,13.0513396 11.73367,13.0513396 11.3431458,12.6608153 C10.9526215,12.270291 10.9526215,11.637126 11.3431458,11.2466017 L21.2426407,1.34710678 C21.633165,0.956582489 22.26633,0.956582489 22.6568542,1.34710678 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-76.000000, -200.000000)">
+            <g id="编组-5" transform="translate(76.000000, 200.000000)">
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+                <g id="ic/gallery/public/details">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="形状" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
+                    <g id="编组" mask="url(#mask-2)" fill="#000000">
+                        <g id="color/#000000">
+                            <rect x="0" y="0" width="24" height="24"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_gallery_public_details_5.svg b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_gallery_public_details_5.svg
new file mode 100644
index 0000000000000000000000000000000000000000..da88c29d383bf5a06b5c4f3ad17aebe9c9c8023e
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_gallery_public_details_5.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_gallery_public_details 5</title>
+    <defs>
+        <path d="M5.674,7.679 L6.78595343,18.5174157 C6.90018986,19.6315734 7.84517617,20.4851453 8.9858098,20.5175629 L9.05312677,20.5185185 L15.1992185,20.5185185 C16.347534,20.5185185 17.3125298,19.6860159 17.4588037,18.5820105 L17.4664589,18.5167601 L18.3973834,9.4101119 L18.576,7.679 L20.103,7.679 L19.9087674,9.55815247 L18.9779526,18.6637359 C18.7871238,20.5304958 17.1969891,21.958695 15.2826515,21.9991198 L15.1992185,22 L9.05312677,22 C7.13004269,22 5.51536915,20.5990695 5.28370227,18.7456924 L5.27450453,18.6648286 L4.148,7.679 L5.674,7.679 Z M10.3544304,11.8765432 C10.7738872,11.8765432 11.1139241,12.2165801 11.1139241,12.6360369 L11.1139241,18.5244569 C11.1139241,18.9439137 10.7738872,19.2839506 10.3544304,19.2839506 C9.93497361,19.2839506 9.59493671,18.9439137 9.59493671,18.5244569 L9.59493671,12.6360369 C9.59493671,12.2165801 9.93497361,11.8765432 10.3544304,11.8765432 Z M13.8987342,11.8765432 C14.3181909,11.8765432 14.6582278,12.2165801 14.6582278,12.6360369 L14.6582278,18.5244569 C14.6582278,18.9439137 14.3181909,19.2839506 13.8987342,19.2839506 C13.4792774,19.2839506 13.1392405,18.9439137 13.1392405,18.5244569 L13.1392405,12.6360369 C13.1392405,12.2165801 13.4792774,11.8765432 13.8987342,11.8765432 Z M12.1265823,2 C13.9182619,2 15.3755515,3.39634366 15.4168227,5.13410958 L15.4177215,5.20987654 L21.2405063,5.20987654 C21.6599631,5.20987654 22,5.54151747 22,5.95061728 C22,6.34510639 21.6838177,6.66757059 21.2851324,6.69010057 L21.2405063,6.69135802 L14.6582278,6.69135802 C14.2537517,6.69135802 13.9231238,6.38298272 13.9000235,5.99414143 L13.8987342,5.95061728 L13.8987342,5.20987654 C13.8987342,4.25531031 13.1053147,3.48148148 12.1265823,3.48148148 C11.1682401,3.48148148 10.38757,4.2234033 10.355458,5.15045685 L10.3544304,5.20987654 L10.3544304,5.95061728 C10.3544304,6.34510639 10.0382481,6.66757059 9.63956273,6.69010057 L9.59493671,6.69135802 L2.75949367,6.69135802 C2.3400369,6.69135802 2,6.3597171 2,5.95061728 C2,5.55612818 2.31618227,5.23366398 2.71486765,5.211134 L2.75949367,5.20987654 L8.83544304,5.20987654 C8.83544304,3.43711068 10.3089363,2 12.1265823,2 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" transform="translate(-76.000000, -236.000000)">
+            <g id="编组-7" transform="translate(76.000000, 236.000000)">
+                <g id="ic/gallery/public/details">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="形状结合" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
+                    <g id="编组" mask="url(#mask-2)" fill="#000000">
+                        <g id="color/#000000">
+                            <rect x="0" y="0" width="24" height="24"></rect>
+                        </g>
+                    </g>
+                </g>
+                <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_detail.svg b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_detail.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4eba7727667161e6808af141304bb582e99d8a84
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_detail.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_detail</title>
+    <defs>
+        <path d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M12,9.75 C12.4142136,9.75 12.75,10.0857864 12.75,10.5 L12.75,17.25 C12.75,17.6642136 12.4142136,18 12,18 C11.5857864,18 11.25,17.6642136 11.25,17.25 L11.25,10.5 C11.25,10.0857864 11.5857864,9.75 12,9.75 Z M12,6 C12.6903559,6 13.25,6.55964406 13.25,7.25 C13.25,7.94035594 12.6903559,8.5 12,8.5 C11.3096441,8.5 10.75,7.94035594 10.75,7.25 C10.75,6.55964406 11.3096441,6 12,6 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_detail" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_favor.svg b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_favor.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6ed99945bb665979fb509f76d42aa8244eec279f
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_favor.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_favor</title>
+    <defs>
+        <path d="M2.79452153,4.7123106 C5.14551849,2.36131365 8.79928584,2.107094 11.432027,3.94965165 C11.7516058,4.17462816 12.0562133,4.42806087 12.3404631,4.7123106 L12.2043753,4.58084491 C12.2233722,4.59824909 12.242503,4.61626317 12.2617634,4.63489833 L12.3404631,4.7123106 C12.4463878,4.81823529 12.5489662,4.9211352 12.648204,5.02101694 C12.8006003,5.17431629 12.9510582,5.32642644 13.0993468,5.47711379 L13.2191159,5.60002561 C13.6770026,6.06850208 14.0393959,6.45079635 14.3071512,6.74792182 C14.5844414,7.05562795 14.5597843,7.52986111 14.2520782,7.80715123 C13.9443721,8.08444136 13.4701389,8.05978431 13.1928488,7.75207818 L13.0507824,7.59620087 C12.6483435,7.15907177 12.0572399,6.55040776 11.2798029,5.77297077 L11.1010067,5.60225587 C9.04064077,3.72439192 5.84685559,3.78129689 3.8551817,5.77297077 C1.92651003,7.70164245 2.0120054,10.7789756 3.90277368,13.3 C4.53008781,14.1364188 5.51152739,15.2077248 6.77873984,16.4381266 L6.77873984,16.4381266 L6.81870427,16.4767845 C7.40284236,17.0397797 8.47345885,17.9853684 10.0244732,19.3076065 L10.0244732,19.3076065 L11.0614453,20.1872947 C11.6195629,20.6586926 12.4361195,20.6594461 12.9949572,20.1892045 L12.9949572,20.1892045 L13.9427905,19.3880425 C15.4712291,18.089643 16.5394672,17.1471153 17.1420446,16.5658605 L17.1420446,16.5658605 L17.4041204,16.3113955 C18.6081005,15.1345125 19.5440439,14.1079415 20.15,13.3 C22.0407683,10.7789756 22.1262637,7.70164245 20.197592,5.77297077 C18.5002127,4.07559151 15.9297294,3.783452 13.9318066,4.89655225 C13.6450802,4.60532736 13.3503168,4.30795075 13.0475699,4.00520382 C12.9789659,3.93659986 12.9093438,3.8695609 12.8387502,3.80408714 C15.4505548,2.12241169 18.9709638,2.42502225 21.2582521,4.7123106 C23.7644258,7.21848428 23.6558802,11.1254931 21.35,14.2 L21.35,14.2 L21.2782836,14.2947342 C20.5730317,15.2179162 19.5206923,16.355509 18.1834318,17.6454496 L18.1834318,17.6454496 L18.1355571,17.6914643 C17.4696453,18.3292759 16.3271085,19.333852 14.702026,20.7110339 L14.702026,20.7110339 L13.960879,21.3368085 C12.8429053,22.2775429 11.2097915,22.2760359 10.0935559,21.3332398 C7.99068585,19.5571115 6.56921236,18.3148051 5.81899059,17.5964036 L5.81899059,17.5964036 L5.59843695,17.3824031 C4.34444158,16.1565572 3.3607736,15.0773332 2.70277368,14.2 C0.396893522,11.1254931 0.288347854,7.21848428 2.79452153,4.7123106 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_favor" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="蒙版" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_picture.svg b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_picture.svg
new file mode 100644
index 0000000000000000000000000000000000000000..71bbafb909302cfe8589d1aed558ca2b391b11c4
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_picture.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_picture</title>
+    <defs>
+        <path d="M6.91631345,22 C5.4822629,22 4.78434081,21.865225 4.05892659,21.4772693 C3.3985956,21.1241204 2.87587962,20.6014044 2.52273075,19.9410734 C2.46359069,19.8304911 2.41241111,19.7256435 2.36620332,19.6186495 L2.36620332,19.6186495 L2.1698636,19.1640257 L2.20306886,19.1293767 C2.06941884,18.627903 2,17.9625402 2,16.8722296 L2,7.1277704 C2,5.38266989 2.17783521,4.72618864 2.51223497,4.08791999 L2.53426541,4.04630859 C2.86627892,3.42549731 3.34610464,2.93191931 3.9541436,2.58517358 L4.04630859,2.53426541 C4.69816044,2.18565122 5.34473292,2 7.1277704,2 L16.8722296,2 C18.6173301,2 19.2738114,2.17783521 19.91208,2.51223497 L19.9536914,2.53426541 C20.5745027,2.86627892 21.0680807,3.34610464 21.4148264,3.9541436 L21.4657346,4.04630859 C21.8143488,4.69816044 22,5.34473292 22,7.1277704 L22,13.642 L20.5,12.141 L20.5,7.1277704 C20.5,5.72858421 20.4070984,5.24750032 20.1430148,4.75370688 C19.9342003,4.36325774 19.6367423,4.06579969 19.2462931,3.8569852 C18.7771894,3.60610577 18.319556,3.50971811 17.0753381,3.50070655 L7.02453833,3.50017541 L6.82305804,3.501658 C5.6550816,3.5151767 5.20981608,3.61305534 4.75370688,3.8569852 C4.36325774,4.06579969 4.06579969,4.36325774 3.8569852,4.75370688 C3.59290159,5.24750032 3.5,5.72858421 3.5,7.1277704 L3.50017541,16.9754617 L3.501658,17.176942 C3.50433313,17.4080653 3.51031162,17.6108889 3.52007149,17.7910966 L6.23117693,15.0802089 C6.84253138,14.4786014 7.23245121,14.2222995 7.747863,14.06608 C8.24342763,13.9158762 8.75657237,13.9158762 9.26248567,14.0692985 L9.26248567,14.0692985 L9.346174,14.0960881 C9.81611824,14.2541699 10.1985117,14.5183877 10.7791097,15.0903817 L10.7791097,15.0903817 L10.8931669,15.204383 C11.1864195,15.4972075 11.6615802,15.4971545 11.9545102,15.2045215 L11.9545102,15.2045215 L14.7829536,12.3767818 C15.3943081,11.7751743 15.7842279,11.5188724 16.2996397,11.3626529 C16.7952043,11.212449 17.3083491,11.212449 17.8039137,11.3626529 C18.3226475,11.5198792 18.712587,11.7778197 19.3310088,12.3870769 L19.3310088,12.3870769 L22,15.0558052 L22,17.0836866 C22,18.5177371 21.865225,19.2156592 21.4772693,19.9410734 C21.1241204,20.6014044 20.6014044,21.1241204 19.9410734,21.4772693 C19.2571114,21.8430561 18.5975894,21.9837704 17.3224552,21.9986577 L17.3224552,21.9986577 L17.0836866,22 Z M17.3688157,12.7981632 C17.156944,12.7339456 16.9466094,12.7339456 16.7347377,12.7981632 C16.4667877,12.8793778 16.2638532,13.016621 15.7691544,13.5113198 L15.7691544,13.5113198 L13.0148897,16.2654623 C12.1361318,17.1433294 10.7122356,17.1434884 9.83302443,16.2655605 L9.83302443,16.2655605 L9.72256623,16.1551288 C9.29437318,15.7333016 9.09118115,15.5929045 8.87915442,15.5214839 L8.87915442,15.5214839 L8.81703899,15.5015903 C8.6051673,15.4373727 8.3948327,15.4373727 8.18296101,15.5015903 C7.91501101,15.582805 7.7120765,15.7200481 7.21738947,16.2147352 L7.21738947,16.2147352 L3.98094669,19.4519096 C4.00402284,19.4859706 4.02791563,19.5191899 4.05262886,19.5515712 C4.05172553,19.5536276 4.05223835,19.5542925 4.05275151,19.5549571 C4.08544135,19.5945648 4.11970016,19.6360813 4.15541417,19.6761293 C4.16577482,19.6898676 4.17731522,19.702453 4.18899894,19.7148959 L4.15541417,19.6761293 C4.19508185,19.7206108 4.23654474,19.7632809 4.27981503,19.8041516 L4.18899894,19.7148959 C4.22622874,19.7545447 4.26491388,19.7927462 4.30504477,19.8294907 L4.27981503,19.8041516 C4.41895549,19.9355762 4.57678461,20.0483957 4.75370688,20.1430148 C5.22281064,20.3938942 5.68044405,20.4902819 6.92466189,20.4992935 L7.1277704,20.5 L16.8722296,20.5 C18.2714158,20.5 18.7524997,20.4070984 19.2462931,20.1430148 C19.6367423,19.9342003 19.9342003,19.6367423 20.1430148,19.2462931 C20.3938942,18.7771894 20.4902819,18.319556 20.4992935,17.0753381 L20.5,16.8722296 L20.5,16.384 L20.49975,15.677 L18.2743429,13.4517016 C17.8764392,13.0597135 17.6794642,12.9133194 17.4632826,12.830363 L17.4632826,12.830363 L17.4008037,12.80823 Z M8.25,7.25 C9.21649831,7.25 10,8.03350169 10,9 C10,9.96649831 9.21649831,10.75 8.25,10.75 C7.28350169,10.75 6.5,9.96649831 6.5,9 C6.5,8.03350169 7.28350169,7.25 8.25,7.25 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_picture" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="蒙版" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_reset.svg b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_reset.svg
new file mode 100644
index 0000000000000000000000000000000000000000..907182a58be9302ba98971d38bb91f93798f152d
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_reset.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_reset</title>
+    <defs>
+        <path d="M22.3414769,15.7576235 C22.3414769,15.7576235 22.3414769,15.7576235 22.3414769,15.7576235 C22.7675941,14.58516 23,13.3197207 23,12 L20.148111,12 C19.8719687,12 19.648111,12.2238576 19.648111,12.5 C19.648111,12.5930667 19.6740858,12.6842863 19.7231119,12.7633928 L21.6247463,15.831787 C21.7412468,16.0197728 21.9880826,16.0777198 22.1760669,15.9612167 C22.2524981,15.9138485 22.3107624,15.8421345 22.3414769,15.7576235 Z M22.823695,13.9714637 C22.9406935,13.3251822 23,12.6661847 23,12 C23,5.92486775 18.0751322,1 12,1 C11.2174632,1 10.44502,1.08183322 9.69172269,1.24274766 C4.65590569,2.31846601 1,6.78563595 1,12 C1,18.0751322 5.92486775,23 12,23 C13.0917435,23 14.1629676,22.8407032 15.1884731,22.530585 C16.7020101,22.0728837 18.0947944,21.2926603 19.2766337,20.2494437 C19.5871723,19.9753294 19.6167001,19.5013746 19.3425858,19.190836 C19.0684716,18.8802974 18.5945167,18.8507696 18.2839781,19.1248839 C17.2629258,20.0261728 16.0603686,20.6998329 14.7542841,21.0947995 C13.8691955,21.3624549 12.9442454,21.5 12,21.5 C6.75329488,21.5 2.5,17.2467051 2.5,12 C2.5,7.496884 5.65786226,3.63827588 10.0050734,2.70965302 C10.6555297,2.57070679 11.322948,2.5 12,2.5 C17.2467051,2.5 21.5,6.75329488 21.5,12 C21.5,12.5764741 21.4487412,13.1460473 21.3476867,13.7042571 C21.2738996,14.1118455 21.544499,14.5020775 21.9520875,14.5758645 C22.3596759,14.6496516 22.7499079,14.3790522 22.823695,13.9714637 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_reset" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero" transform="translate(12.000000, 12.000000) scale(-1, 1) translate(-12.000000, -12.000000) "></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_save.svg b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_save.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6d27fbff30817b845bfaf8617ac9381c52dd13cf
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_save.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_save</title>
+    <defs>
+        <path d="M17.75,2 L17.7520126,2.01890136 C18.8647483,2.07278856 19.3944045,2.24101598 19.91208,2.51223497 L19.9536914,2.53426541 C20.5745027,2.86627892 21.0680807,3.34610464 21.4148264,3.9541436 L21.4657346,4.04630859 C21.8143488,4.69816044 22,5.34473292 22,7.1277704 L22,16.8722296 L21.9989932,17.0937657 C21.9842401,18.674381 21.8076257,19.3015622 21.487765,19.91208 L21.4657346,19.9536914 C21.1337211,20.5745027 20.6538954,21.0680807 20.0458564,21.4148264 L19.9536914,21.4657346 C19.3018396,21.8143488 18.6552671,22 16.8722296,22 L7.1277704,22 L6.90623426,21.9989932 C5.32561899,21.9842401 4.69843783,21.8076257 4.08791999,21.487765 L4.04630859,21.4657346 C3.42549731,21.1337211 2.93191931,20.6538954 2.58517358,20.0458564 L2.53426541,19.9536914 C2.18565122,19.3018396 2,18.6552671 2,16.8722296 L2,7.1277704 C2,5.38266989 2.17783521,4.72618864 2.51223497,4.08791999 L2.53426541,4.04630859 C2.86627892,3.42549731 3.34610464,2.93191931 3.9541436,2.58517358 L4.04630859,2.53426541 C4.57769437,2.25007718 5.10557179,2.0741846 6.24845829,2.01887856 L6.25,2 L17.75,2 Z M17.7514636,3.5180042 L17.75,7.25 C17.75,8.76878306 16.5187831,10 15,10 L15,10 L9,10 C7.48121694,10 6.25,8.76878306 6.25,7.25 L6.25,7.25 L6.24877877,3.51799203 C5.49137422,3.55599646 5.12615584,3.65779732 4.75370688,3.8569852 C4.36325774,4.06579969 4.06579969,4.36325774 3.8569852,4.75370688 C3.59290159,5.24750032 3.5,5.72858421 3.5,7.1277704 L3.50017541,16.9754617 L3.501658,17.176942 C3.5151767,18.3449184 3.61305534,18.7901839 3.8569852,19.2462931 C4.06579969,19.6367423 4.36325774,19.9342003 4.75370688,20.1430148 C5.22281064,20.3938942 5.68044405,20.4902819 6.92466189,20.4992935 L7.1277704,20.5 L16.8722296,20.5 C18.2714158,20.5 18.7524997,20.4070984 19.2462931,20.1430148 C19.6367423,19.9342003 19.9342003,19.6367423 20.1430148,19.2462931 C20.3938942,18.7771894 20.4902819,18.319556 20.4992935,17.0753381 L20.5,16.8722296 L20.5,7.1277704 C20.5,5.72858421 20.4070984,5.24750032 20.1430148,4.75370688 C19.9342003,4.36325774 19.6367423,4.06579969 19.2462931,3.8569852 C18.8738839,3.65781857 18.5087037,3.55601818 17.7514636,3.5180042 Z M17,15 C17.4142136,15 17.75,15.3357864 17.75,15.75 C17.75,16.1494202 17.43777,16.4759152 17.0440682,16.4987268 L17,16.5 L7,16.5 C6.58578644,16.5 6.25,16.1642136 6.25,15.75 C6.25,15.3505798 6.56222999,15.0240848 6.9559318,15.0012732 L7,15 L17,15 Z M16.25,3.5 L7.75,3.5 L7.75,7.25 C7.75,7.92218868 8.28057668,8.47045453 8.94577759,8.49884512 L8.94577759,8.49884512 L9,8.5 L15,8.5 C15.6903559,8.5 16.25,7.94035594 16.25,7.25 L16.25,7.25 L16.25,3.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_save" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_share.svg b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_share.svg
new file mode 100644
index 0000000000000000000000000000000000000000..593be89ad4209e315651252b2e9b5c73b94212be
--- /dev/null
+++ b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/ic_public_share.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_share</title>
+    <defs>
+        <path d="M12.25,2 C13.9068542,2 15.25,3.34314575 15.25,5 C15.25,6.65685425 13.9068542,8 12.25,8 C11.9804725,8 11.7192467,7.96445647 11.4707541,7.89780096 L5.93201456,16.2048482 C6.40136404,16.6003451 6.74770229,17.1371819 6.90542312,17.7497523 L17.0945769,17.7497523 C17.4276951,16.4559576 18.6022096,15.5 20,15.5 C21.6568542,15.5 23,16.8431458 23,18.5 C23,20.1568542 21.6568542,21.5 20,21.5 C18.6025704,21.5 17.4283015,20.5445359 17.094835,19.2512495 L6.90516499,19.2512495 C6.57169851,20.5445359 5.39742955,21.5 4,21.5 C2.34314575,21.5 1,20.1568542 1,18.5 C1,16.8431458 2.34314575,15.5 4,15.5 C4.1922717,15.5 4.38031877,15.5180878 4.56253245,15.5526546 L10.1618944,7.15402617 C9.59951533,6.60875215 9.25,5.84519291 9.25,5 C9.25,3.34314575 10.5931458,2 12.25,2 Z M4,17 C3.17157288,17 2.5,17.6715729 2.5,18.5 C2.5,19.3284271 3.17157288,20 4,20 C4.82842712,20 5.5,19.3284271 5.5,18.5 C5.5,17.6715729 4.82842712,17 4,17 Z M20,17 C19.1715729,17 18.5,17.6715729 18.5,18.5 C18.5,19.3284271 19.1715729,20 20,20 C20.8284271,20 21.5,19.3284271 21.5,18.5 C21.5,17.6715729 20.8284271,17 20,17 Z M12.25,3.5 C11.4215729,3.5 10.75,4.17157288 10.75,5 C10.75,5.82842712 11.4215729,6.5 12.25,6.5 C13.0784271,6.5 13.75,5.82842712 13.75,5 C13.75,4.17157288 13.0784271,3.5 12.25,3.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_share" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="合并形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/photo10.jpg b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/photo10.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5ed4902c874809a32adedc8f49de2381e16251a9
Binary files /dev/null and b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/photo10.jpg differ
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/photo8.jpg b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/photo8.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..92562e9297c7bb2c702145630847f1d6c8474ad3
Binary files /dev/null and b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/photo8.jpg differ
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/photo9.jpg b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/photo9.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..90d2f285aefd4e72a9fc48b1ad3e2be968454905
Binary files /dev/null and b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/photo9.jpg differ
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/picture1.jpg b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/picture1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4653f525ea10dffbbe81f8bf8ae715148f956956
Binary files /dev/null and b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/picture1.jpg differ
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/picture1_2.jpg b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/picture1_2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..769b4d8b2b587c915798f908abb9c8fa7eb27e3b
Binary files /dev/null and b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/picture1_2.jpg differ
diff --git a/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/xiangCe.jpg b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/xiangCe.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..df045cb2050a9e814543e58d933e2bcd59b2a0fa
Binary files /dev/null and b/MultiPictureBeautification/features/pictureView/src/main/resources/base/media/xiangCe.jpg differ
diff --git a/MultiPictureBeautification/hvigor/hvigor-config.json5 b/MultiPictureBeautification/hvigor/hvigor-config.json5
new file mode 100644
index 0000000000000000000000000000000000000000..8549826266c00b203b183eaf1a8899df1a540547
--- /dev/null
+++ b/MultiPictureBeautification/hvigor/hvigor-config.json5
@@ -0,0 +1,21 @@
+{
+  "modelVersion": "5.0.0",
+  "dependencies": {
+  },
+  "execution": {
+    // "analyze": "default",                    /* Define the build analyze mode. Value: [ "default" | "verbose" | false ]. Default: "default" */
+    // "daemon": true,                          /* Enable daemon compilation. Value: [ true | false ]. Default: true */
+    // "incremental": true,                     /* Enable incremental compilation. Value: [ true | false ]. Default: true */
+    // "parallel": true,                        /* Enable parallel compilation. Value: [ true | false ]. Default: true */
+    // "typeCheck": false,                      /* Enable typeCheck. Value: [ true | false ]. Default: false */
+  },
+  "logging": {
+    // "level": "info"                          /* Define the log level. Value: [ "debug" | "info" | "warn" | "error" ]. Default: "info" */
+  },
+  "debugging": {
+    // "stacktrace": false                      /* Disable stacktrace compilation. Value: [ true | false ]. Default: false */
+  },
+  "nodeOptions": {
+    // "maxOldSpaceSize": 4096                  /* Enable nodeOptions maxOldSpaceSize compilation. Unit M. Used for the daemon process */
+  }
+}
diff --git a/MultiPictureBeautification/oh-package.json5 b/MultiPictureBeautification/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..3e576a3626c7b5062a5f38c36fc2b8938f2d7658
--- /dev/null
+++ b/MultiPictureBeautification/oh-package.json5
@@ -0,0 +1,12 @@
+{
+  "modelVersion": "5.0.0",
+  "license": "",
+  "devDependencies": {
+  },
+  "author": "",
+  "name": "multipicturebeautification",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "version": "1.0.0",
+  "dependencies": {}
+}
diff --git a/MultiPictureBeautification/product/phone/build-profile.json5 b/MultiPictureBeautification/product/phone/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..197e83c1b9504b12a3837e0189185479662cad4b
--- /dev/null
+++ b/MultiPictureBeautification/product/phone/build-profile.json5
@@ -0,0 +1,31 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+    "arkOptions": {
+      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    }
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    },
+    {
+      "name": "ohosTest",
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/product/phone/hvigorfile.ts b/MultiPictureBeautification/product/phone/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6edcd90486dd5a853cf7d34c8647f08414ca7a3
--- /dev/null
+++ b/MultiPictureBeautification/product/phone/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { hapTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiPictureBeautification/product/phone/obfuscation-rules.txt b/MultiPictureBeautification/product/phone/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..985b2aeb7658286b17bd26eab8f217c3fe75ea8b
--- /dev/null
+++ b/MultiPictureBeautification/product/phone/obfuscation-rules.txt
@@ -0,0 +1,18 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
\ No newline at end of file
diff --git a/MultiPictureBeautification/product/phone/oh-package.json5 b/MultiPictureBeautification/product/phone/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..4655c9660c1bebbb72cc020478583c2974ca2791
--- /dev/null
+++ b/MultiPictureBeautification/product/phone/oh-package.json5
@@ -0,0 +1,14 @@
+{
+  "license": "",
+  "devDependencies": {},
+  "author": "",
+  "name": "phone",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "version": "1.0.0",
+  "dependencies": {
+    "@ohos/commons": "file:../../commons/base",
+    "@ohos/edit": "file:../../features/pictureEdit",
+    "@ohos/view": "file:../../features/pictureView"
+  }
+}
diff --git a/MultiPictureBeautification/product/phone/src/main/ets/pages/Index.ets b/MultiPictureBeautification/product/phone/src/main/ets/pages/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9b92da3f9e7db09d42a0988253b748c8b30996e0
--- /dev/null
+++ b/MultiPictureBeautification/product/phone/src/main/ets/pages/Index.ets
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseConstants, BreakpointConstants } from '@ohos/commons';
+import { PictureViewIndex } from '@ohos/view';
+
+@Entry
+@Component
+struct Index {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+
+  build() {
+    GridRow({
+      columns: {
+        sm: BreakpointConstants.GRID_ROW_COLUMNS[2],
+        md: BreakpointConstants.GRID_ROW_COLUMNS[0],
+        lg: BreakpointConstants.GRID_ROW_COLUMNS[0]
+      }
+    }) {
+      GridCol({ span: {
+        sm: BreakpointConstants.GRID_COLUMN_SPANS[5],
+        md: BreakpointConstants.GRID_COLUMN_SPANS[0],
+        lg: BreakpointConstants.GRID_COLUMN_SPANS[0]
+      } }) {
+        Column() {
+          PictureViewIndex()
+        }
+        .width(BaseConstants.FULL_HEIGHT)
+        .height(BaseConstants.FULL_HEIGHT)
+      }
+      .height(BaseConstants.FULL_PERCENT)
+      .width(BaseConstants.FULL_PERCENT)
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/product/phone/src/main/ets/phoneability/PhoneAbility.ets b/MultiPictureBeautification/product/phone/src/main/ets/phoneability/PhoneAbility.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d9df261ef8c12d6b65c9cff983fdbfad0945e402
--- /dev/null
+++ b/MultiPictureBeautification/product/phone/src/main/ets/phoneability/PhoneAbility.ets
@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { UIAbility, AbilityConstant, Want } from '@kit.AbilityKit';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { display, window } from '@kit.ArkUI';
+import { BusinessError, deviceInfo } from '@kit.BasicServicesKit';
+import { BaseConstants, BreakpointConstants } from '@ohos/commons/Index';
+
+export default class PhoneAbility extends UIAbility {
+  private windowObj?: window.Window;
+  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
+  }
+
+  onDestroy(): void {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
+  }
+
+  onWindowStageCreate(windowStage: window.WindowStage): void {
+    // Main window is created, set main page for this ability
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+
+    windowStage.getMainWindow((err: BusinessError<void>, data) => {
+      this.windowObj = data;
+      this.updateBreakpoint(this.windowObj.getWindowProperties().windowRect.width);
+      this.windowObj.on('windowSizeChange', (windowSize: window.Size) => {
+        this.updateBreakpoint(windowSize.width);
+      })
+      if (err.code) {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'getMainWindow failed');
+        return;
+      }
+      if (deviceInfo.deviceType !== BaseConstants.DEVICE_2IN1) {
+        data.setWindowLayoutFullScreen(true);
+      }
+    })
+
+    windowStage.loadContent('pages/Index', (err, data) => {
+      if (err.code) {
+        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+        return;
+      }
+      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
+    });
+  }
+  private updateBreakpoint(windowWidth: number) :void{
+    let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels;
+    let curBp: string = '';
+    if (windowWidthVp < BreakpointConstants.BREAKPOINT_SCOPE[2]) {
+      curBp = BreakpointConstants.BREAKPOINT_SM;
+    } else if (windowWidthVp < BreakpointConstants.BREAKPOINT_SCOPE[3]) {
+      curBp = BreakpointConstants.BREAKPOINT_MD;
+    } else {
+      curBp = BreakpointConstants.BREAKPOINT_LG;
+    }
+    AppStorage.setOrCreate('currentBreakpoint', curBp);
+  }
+
+  onWindowStageDestroy(): void {
+    // Main window is destroyed, release UI related resources
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+  }
+
+  onForeground(): void {
+    // Ability has brought to foreground
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
+  }
+
+  onBackground(): void {
+    // Ability has back to background
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
+  }
+}
diff --git a/MultiPictureBeautification/product/phone/src/main/module.json5 b/MultiPictureBeautification/product/phone/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..167dc649aec21cab70e50e36016ec6ecaf5e34e1
--- /dev/null
+++ b/MultiPictureBeautification/product/phone/src/main/module.json5
@@ -0,0 +1,40 @@
+{
+  "module": {
+    "name": "phone",
+    "type": "entry",
+    "description": "$string:module_desc",
+    "mainElement": "PhoneAbility",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ],
+    "deliveryWithInstall": true,
+    "installationFree": false,
+    "pages": "$profile:main_pages",
+    "abilities": [
+      {
+        "name": "PhoneAbility",
+        "srcEntry": "./ets/phoneability/PhoneAbility.ets",
+        "description": "$string:PhoneAbility_desc",
+        "icon": "$media:icon",
+        "label": "$string:PhoneAbility_label",
+        "startWindowIcon": "$media:startIcon",
+        "startWindowBackground": "$color:start_window_background",
+        "minWindowWidth": 330,
+        "minWindowHeight": 600,
+        "exported": true,
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/product/phone/src/main/resources/base/element/color.json b/MultiPictureBeautification/product/phone/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..3c712962da3c2751c2b9ddb53559afcbd2b54a02
--- /dev/null
+++ b/MultiPictureBeautification/product/phone/src/main/resources/base/element/color.json
@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/product/phone/src/main/resources/base/element/string.json b/MultiPictureBeautification/product/phone/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..6a2d3eed2a1f45d1caf9ca472ccd6afc18c60eb8
--- /dev/null
+++ b/MultiPictureBeautification/product/phone/src/main/resources/base/element/string.json
@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "PhoneAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "PhoneAbility_label",
+      "value": "label"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/product/phone/src/main/resources/base/media/icon.png b/MultiPictureBeautification/product/phone/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd45accb1dfd2fd0da16c732c72faa6e46b26521
Binary files /dev/null and b/MultiPictureBeautification/product/phone/src/main/resources/base/media/icon.png differ
diff --git a/MultiPictureBeautification/product/phone/src/main/resources/base/media/startIcon.png b/MultiPictureBeautification/product/phone/src/main/resources/base/media/startIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..366f76459ffd4494ec40d0ddd5c59385b9c5da11
Binary files /dev/null and b/MultiPictureBeautification/product/phone/src/main/resources/base/media/startIcon.png differ
diff --git a/MultiPictureBeautification/product/phone/src/main/resources/base/profile/main_pages.json b/MultiPictureBeautification/product/phone/src/main/resources/base/profile/main_pages.json
new file mode 100644
index 0000000000000000000000000000000000000000..1898d94f58d6128ab712be2c68acc7c98e9ab9ce
--- /dev/null
+++ b/MultiPictureBeautification/product/phone/src/main/resources/base/profile/main_pages.json
@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/Index"
+  ]
+}
diff --git a/MultiPictureBeautification/product/phone/src/main/resources/en_US/element/string.json b/MultiPictureBeautification/product/phone/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..6a2d3eed2a1f45d1caf9ca472ccd6afc18c60eb8
--- /dev/null
+++ b/MultiPictureBeautification/product/phone/src/main/resources/en_US/element/string.json
@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "PhoneAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "PhoneAbility_label",
+      "value": "label"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/product/phone/src/main/resources/zh_CN/element/string.json b/MultiPictureBeautification/product/phone/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..4af54176d8b493e8aa6b435e0701bfd9672d5c84
--- /dev/null
+++ b/MultiPictureBeautification/product/phone/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "模块描述"
+    },
+    {
+      "name": "PhoneAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "PhoneAbility_label",
+      "value": "一多图片美化"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiPictureBeautification/screenshots/device/config.png b/MultiPictureBeautification/screenshots/device/config.png
new file mode 100644
index 0000000000000000000000000000000000000000..cce0dfb773dcdd98a5faf8c230c5644555335f93
Binary files /dev/null and b/MultiPictureBeautification/screenshots/device/config.png differ
diff --git a/MultiPictureBeautification/screenshots/device/foldable.png b/MultiPictureBeautification/screenshots/device/foldable.png
new file mode 100644
index 0000000000000000000000000000000000000000..968f143108c36f35029497071aba28b2bb520c7b
Binary files /dev/null and b/MultiPictureBeautification/screenshots/device/foldable.png differ
diff --git a/MultiPictureBeautification/screenshots/device/pad.png b/MultiPictureBeautification/screenshots/device/pad.png
new file mode 100644
index 0000000000000000000000000000000000000000..3fcde65797e292806476a6fb0f5f3d11fe2a423e
Binary files /dev/null and b/MultiPictureBeautification/screenshots/device/pad.png differ
diff --git a/MultiPictureBeautification/screenshots/device/phone.png b/MultiPictureBeautification/screenshots/device/phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..ab494f294197933264af9e17f86ecd7af0b02715
Binary files /dev/null and b/MultiPictureBeautification/screenshots/device/phone.png differ
diff --git a/MultiPictureBeautification/screenshots/device/run.png b/MultiPictureBeautification/screenshots/device/run.png
new file mode 100644
index 0000000000000000000000000000000000000000..7655fa7e041bb067e028029d820bd2d320e2cd83
Binary files /dev/null and b/MultiPictureBeautification/screenshots/device/run.png differ
diff --git a/MultiShoppingPriceComparison/AppScope/app.json5 b/MultiShoppingPriceComparison/AppScope/app.json5
new file mode 100644
index 0000000000000000000000000000000000000000..0571d7be47f83cdf22068ab2369ae0674f5c2de2
--- /dev/null
+++ b/MultiShoppingPriceComparison/AppScope/app.json5
@@ -0,0 +1,10 @@
+{
+  "app": {
+    "bundleName": "com.huawei.multishoppingpricecomparison",
+    "vendor": "example",
+    "versionCode": 1000000,
+    "versionName": "1.0.0",
+    "icon": "$media:app_icon",
+    "label": "$string:app_name"
+  }
+}
diff --git a/MultiShoppingPriceComparison/AppScope/resources/base/element/string.json b/MultiShoppingPriceComparison/AppScope/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..fea8ab25ebdb9924d0c40758992e96d45bf9eb71
--- /dev/null
+++ b/MultiShoppingPriceComparison/AppScope/resources/base/element/string.json
@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "MultiShoppingPriceComparison"
+    }
+  ]
+}
diff --git a/MultiShoppingPriceComparison/AppScope/resources/base/media/app_icon.png b/MultiShoppingPriceComparison/AppScope/resources/base/media/app_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd45accb1dfd2fd0da16c732c72faa6e46b26521
Binary files /dev/null and b/MultiShoppingPriceComparison/AppScope/resources/base/media/app_icon.png differ
diff --git a/MultiShoppingPriceComparison/LICENSE b/MultiShoppingPriceComparison/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..338e5b0bc22082e0ffcc7121c2ed3897a3ddccb0
--- /dev/null
+++ b/MultiShoppingPriceComparison/LICENSE
@@ -0,0 +1,78 @@
+   Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+Apache License, Version 2.0
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+
+"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License.
+
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License.
+
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution.
+
+You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+1.You must give any other recipients of the Work or Derivative Works a copy of this License; and
+2.You must cause any modified files to carry prominent notices stating that You changed the files; and
+3.You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
+4.If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions.
+
+Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+
+6. Trademarks.
+
+This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty.
+
+Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability.
+
+In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability.
+
+While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/README.en.md b/MultiShoppingPriceComparison/README.en.md
new file mode 100644
index 0000000000000000000000000000000000000000..2162b7be562dfc7e0054407cdc6d275dbeccdc03
--- /dev/null
+++ b/MultiShoppingPriceComparison/README.en.md
@@ -0,0 +1,53 @@
+# Shopping Price Comparison
+
+### Introduction
+
+This codelab introduces how to implement shopping price comparison pages based on the adaptive and responsive layout, achieving one-time development for multi-device deployment. It uses the three-layer project architecture for code reuse and tailors the pages to different device sizes such as mobile phones, foldable phones, tablets, and PC/2-in-1 devices.
+
+The figure shows the effect on the mobile phone:
+
+![](screenshots/device/phone.en.png)
+
+The figure shows the effect on the foldable phone:
+
+![](screenshots/device/foldable.en.png)
+
+The figure shows the effect on the tablet and PC/2-in-1 device:
+
+![](screenshots/device/tablet.en.png)
+
+### Concepts
+
+- One-time development for multi-device deployment: It enables you to develop and release one set of project code for deployment on multiple devices as demanded. This feature enables you to efficiently develop applications that are compatible with multiple devices while providing distributed user experiences for cross-device transferring, migration, and collaboration.
+- Adaptive layout: When the size of an external container changes, elements can automatically change based on the relative relationship to adapt to the external container. Relative relationships include the proportion, fixed aspect ratio, and display priority.
+- Responsive layout: When the size of an external container changes, elements can automatically change based on the breakpoints, grids, or specific features (such as the screen direction and window width and height) to adapt to the external container.
+- GridRow: It is a container that is used in a grid layout, together with its child component **<GridCol>**.
+- GridCol: It is a container that must be used as a child component of the **<GridRow>** container.
+- PiP: In scenarios such as video playback, video conferencing, and video calls, this feature is used to display video content in picture-in-picture mode (PiP).
+
+### Permissions
+
+N/A.
+
+### How to Use
+
+1. Install and open an app on a mobile phone, foldable phone, or tablet. The responsive layout and adaptive layout are used to display different effects on the app pages over different devices.
+2. Open the app and view the content on the home page.
+3. Tap the Category button at the bottom to view the content on the category page.
+4. Tap the shopping bag at the bottom to view the content on the shopping bag page.
+5. Tap the product images on the category page to view the product details page.
+6. Tap the Split-Screen button in the upper right corner to compare product information in split-screen mode.
+7. Tap the Chat button at the bottom of the product details page to view the customer service page of the product details page.
+8. Tap the Shopping Bag button at the bottom of the product details page to view the content on the shopping bag page.
+9. Tap the Purchase button at the bottom of the product details page to view the payment page.
+10. Tap the Livestreaming button on the product details page to view the content on the livestreaming room page. Tap the Close button in the upper right corner to watch the livestreaming in PiP mode.
+11. Tap the recommended products on the livestreaming room page to view the product details page.
+12. Tap the Shopping Bag button at the bottom of the livestreaming room page to view the content on the shopping bag page.
+13. Tap Buy Now on the shopping bag page in the livestreaming room to view the content on the payment page related to livestreaming room.
+
+### Constraints
+
+1. The sample app is supported only on Huawei phones running the standard system.
+2. HarmonyOS: HarmonyOS 5.0.0 Release or later.
+3. DevEco Studio: DevEco Studio 5.0.0 Release or later.
+4. HarmonyOS SDK: HarmonyOS 5.0.0 Release SDK or later.
diff --git a/MultiShoppingPriceComparison/README.md b/MultiShoppingPriceComparison/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..675ef3da98682d077738d58c7c9b10ea6fe2b1db
--- /dev/null
+++ b/MultiShoppingPriceComparison/README.md
@@ -0,0 +1,53 @@
+# 优秀实践-一多开发实例-购物比价
+
+### 简介
+
+本篇Codelab基于自适应布局和响应式布局，实现一次开发，多端部署的购物比价页面。通过“三层工程架构”实现代码复用，并根据手机、折叠屏、平板以及PC/2in1不同的设备尺寸实现对应页面。
+
+手机运行效果图如下：
+
+![](screenshots/device/phone.png)
+
+折叠屏运行效果图如下：
+
+![](screenshots/device/foldable.png)
+
+平板、PC/2in1运行效果图如下：
+
+![](screenshots/device/tablet.png)
+
+### 相关概念
+
+- 一次开发，多端部署：一套代码工程，一次开发上架，多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用，实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验。
+- 自适应布局：当外部容器大小发生变化时，元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。
+- 响应式布局：当外部容器大小发生变化时，元素可以根据断点、栅格或特定的特征（如屏幕方向、窗口宽高等）自动变化以适应外部容器变化的布局能力。
+- GridRow：栅格容器组件，仅可以和栅格子组件（GridCol）在栅格布局场景中使用。
+- GridCol：栅格子组件，必须作为栅格容器组件（GridRow）的子组件使用。
+- 画中画：应用在视频播放、视频会议、视频通话等场景下，可以使用画中画能力将视频内容以小窗（画中画）模式呈现。
+
+### 相关权限
+
+不涉及。
+
+### 使用说明
+
+1. 分别在手机、折叠屏、平板安装并打开应用，不同设备的应用页面通过响应式布局和自适应布局呈现不同的效果。
+2. 打开应用，查看首页内容。
+3. 点击底部分类按钮，查看分类页内容。
+4. 点击底部购物袋，查看购物袋页内容。
+5. 点击分类页的商品图，查看商品详情页内容。
+6. 点击右上角的分屏按钮，分屏比较商品信息。
+7. 点击商品详情页底部的聊天按钮，查看商品详情咨询客服页内容。
+8. 点击商品详情页底部的购物袋按钮，查看商品详情-购物袋页内容。
+9. 点击商品详情页底部的购买按钮，查看商品详情-支付页内容。
+10. 点击商品详情页的直播中按钮，查看直播间页内容，点击右上角关闭按钮以画中画模式观看直播。
+11. 点击直播间页推荐商品，查看直播间-商品详情页内容。
+12. 点击直播间页底部购物袋按钮，查看直播间-购物袋页内容。
+13. 点击直播间-购物袋页的立即购买按钮，查看直播间-支付页内容。
+
+### 约束与限制
+
+1. 本示例仅支持标准系统上运行，支持设备：华为手机。
+2. HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。
+3. DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。
+4. HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。
diff --git a/MultiShoppingPriceComparison/build-profile.json5 b/MultiShoppingPriceComparison/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..20eec659a0c9959def6d367a6e3684485793cd3a
--- /dev/null
+++ b/MultiShoppingPriceComparison/build-profile.json5
@@ -0,0 +1,71 @@
+{
+  "app": {
+    "signingConfigs": [],
+    "products": [
+      {
+        "name": "default",
+        "signingConfig": "default",
+        "compatibleSdkVersion": "5.0.0(12)",
+        "runtimeOS": "HarmonyOS"
+      }
+    ],
+    "buildModeSet": [
+      {
+        "name": "debug",
+      },
+      {
+        "name": "release"
+      }
+    ]
+  },
+  "modules": [
+    {
+      "name": "phone",
+      "srcPath": "./products/phone",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "base",
+      "srcPath": "./commons/base",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "home",
+      "srcPath": "./features/home",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "detail",
+      "srcPath": "./features/detail",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/Index.ets b/MultiShoppingPriceComparison/commons/base/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6b660a02d8c648c8b6be14f9e974f3cb9c89f7d8
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/Index.ets
@@ -0,0 +1,9 @@
+export { BreakpointConstants } from './src/main/ets/constants/BreakpointConstants';
+export { BreakpointType } from './src/main/ets/utils/BreakpointType';
+export { default as Logger } from './src//main/ets/utils/Logger';
+export { CommonConstants } from './src/main/ets/constants/CommonConstants';
+export { ResourceUtil } from './src/main/ets/utils/ResourceUtil';
+export { WindowUtil } from './src/main/ets/utils/WindowUtil';
+export { DeviceScreen } from './src/main/ets/utils/DeviceScreen';
+export { AvPlayerUtil } from './src/main/ets/utils/AvPlayerUtil';
+export { PipWindowUtil } from './src/main/ets/utils/PipWindowUtil';
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/build-profile.json5 b/MultiShoppingPriceComparison/commons/base/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..14d5b832c7c04a429ed7da4c443d19c2566a4f25
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/build-profile.json5
@@ -0,0 +1,8 @@
+{
+  "apiType": "stageMode",
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/hvigorfile.ts b/MultiShoppingPriceComparison/commons/base/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiShoppingPriceComparison/commons/base/oh-package.json5 b/MultiShoppingPriceComparison/commons/base/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..c764a93a96ab677a53c95087b3858bd0524e4e76
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/oh-package.json5
@@ -0,0 +1,11 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "base",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {}
+}
diff --git a/MultiShoppingPriceComparison/commons/base/src/main/ets/constants/BreakpointConstants.ets b/MultiShoppingPriceComparison/commons/base/src/main/ets/constants/BreakpointConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b7a0da4ec7eafd2aba285ffed78d61d92dc2691f
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/src/main/ets/constants/BreakpointConstants.ets
@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Constants for breakpoint.
+ */
+export class BreakpointConstants {
+  /**
+   * Breakpoints that represent small device types.
+   */
+  static readonly BREAKPOINT_SM: string = 'sm';
+
+  /**
+   * Breakpoints that represent middle device types.
+   */
+  static readonly BREAKPOINT_MD: string = 'md';
+
+  /**
+   * Breakpoints that represent large device types.
+   */
+  static readonly BREAKPOINT_LG: string = 'lg';
+
+  /**
+   * Grid row column list.
+   */
+  static readonly GRID_ROW_COLUMNS: number[] = [4, 8, 12, 15, 11, 3, 6];
+
+  /**
+   * Grid column span list.
+   */
+  static readonly GRID_COLUMN_SPANS: number[] = [2, 3, 4, 8, 12, 5, 7];
+
+  /**
+   * Breakpoint ranges.
+   */
+  static readonly BREAKPOINT_RANGES: number[] = [320, 600, 840];
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/src/main/ets/constants/CommonConstants.ets b/MultiShoppingPriceComparison/commons/base/src/main/ets/constants/CommonConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b836e7893b63dd09a3dc65db52c16277a48614c8
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/src/main/ets/constants/CommonConstants.ets
@@ -0,0 +1,156 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class CommonConstants {
+  /**
+   * Full percent.
+   */
+  static readonly FULL_PERCENT: string = '100%';
+
+  /**
+   * Font weight 500.
+   */
+  static readonly FONT_WEIGHT_500: number = 500;
+
+  /**
+   * Text opacity.
+   */
+  static readonly TEXT_OPACITY: number[] = [1, 0.4, 0.6, 0.05];
+
+  /**
+   * Window util list.
+   */
+  static readonly WINDOW_UTIL_LIST: string[] = ['windowUtil', 'secondWindowUtil'];
+
+  /**
+   * Default window width.
+   */
+  static readonly DEFAULT_WINDOW_WIDTH: number = 331;
+
+  /**
+   * Lg sidebar width.
+   */
+  static readonly LG_SIDEBAR_WIDTH: number = 96;
+
+  /**
+   * Two.
+   */
+  static readonly TWO: number = 2;
+
+  /**
+   * Three.
+   */
+  static readonly THREE: number = 3;
+
+  /**
+   * Four.
+   */
+  static readonly FOUR: number = 4;
+
+  /**
+   * Five.
+   */
+  static readonly FIVE: number = 5;
+
+  /**
+   * Width unit.
+   */
+  static readonly WIDTH_UNIT: string = 'vp';
+
+  /**
+   * Constant for screen dpi.
+   */
+  static readonly SCREEN_DPI_CONSTANT: number = 160;
+
+  /**
+   * Device types.
+   */
+  static readonly DEVICE_TYPES: string[] = ['2in1', 'tablet'];
+
+  /**
+   * Tab bar height for sm and md.
+   */
+  static readonly TAB_BAR_HEIGHT: number = 56;
+
+  /**
+   * Bottom rect height.
+   */
+  static readonly BOTTOM_RECT_HEIGHT: number = 24;
+
+  /**
+   * Bind sheet page type list.
+   */
+  static readonly BIND_SHEET_PAGE_TYPES: string[] = ['ShopBag', 'PayCard', 'ProductDetail', 'detailPayCard'];
+
+  /**
+   * Idle state of avPlayer.
+   */
+  static readonly AV_PLAYER_IDLE_STATE: string = 'idle';
+
+  /**
+   * Initialized state of avPlayer.
+   */
+  static readonly AV_PLAYER_INITIALIZED_STATE: string = 'initialized';
+
+  /**
+   * Prepared state of avPlayer.
+   */
+  static readonly AV_PLAYER_PREPARED_STATE: string = 'prepared';
+
+  /**
+   * Playing state of avPlayer.
+   */
+  static readonly AV_PLAYER_PLAYING_STATE: string = 'playing';
+
+  /**
+   * Pause state of avPlayer.
+   */
+  static readonly AV_PLAYER_PAUSED_STATE: string = 'paused';
+
+  /**
+   * Completed state of avPlayer.
+   */
+  static readonly AV_PLAYER_COMPLETED_STATE: string = 'completed';
+
+  /**
+   * Stopped state of avPlayer.
+   */
+  static readonly AV_PLAYER_STOPPED_STATE: string = 'stopped';
+
+  /**
+   * Release state of avPlayer.
+   */
+  static readonly AV_PLAYER_RELEASE_STATE: string = 'released';
+
+  /**
+   * Error state of avPlayer.
+   */
+  static readonly AV_PLAYER_ERROR_STATE: string = 'error';
+
+  /**
+   * Live video name.
+   */
+  static readonly LIVE_VIDEO_NAME: string = 'live.mp4';
+
+  /**
+   * Pip window util.
+   */
+  static readonly PIP_WINDOW_UTIL: string = 'pipWindowUtil';
+
+  /**
+   * Av player util.
+   */
+  static readonly AV_PLAYER_UTIL: string = 'avPlayerUtil';
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/AvPlayerUtil.ets b/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/AvPlayerUtil.ets
new file mode 100644
index 0000000000000000000000000000000000000000..65f510c3e8d280da9842738098639c719ae7e06c
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/AvPlayerUtil.ets
@@ -0,0 +1,179 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { media } from '@kit.MediaKit';
+import { common } from '@kit.AbilityKit';
+import { resourceManager } from '@kit.LocalizationKit';
+import { BusinessError } from '@kit.BasicServicesKit';
+import Logger from './Logger';
+import { CommonConstants } from '../constants/CommonConstants';
+
+const uiContext: common.UIAbilityContext | undefined = AppStorage.get('uiContext');
+
+export class AvPlayerUtil {
+  private avPlayer?: media.AVPlayer;
+  private url: resourceManager.RawFileDescriptor | null = null;
+  private playState: boolean = true;
+  private surfaceId: string = '';
+  private onError: (err: BusinessError) => void = (err: BusinessError) => {
+    Logger.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
+    if (this.avPlayer === undefined) {
+      Logger.error(`AvPlayer is undefined`);
+      return;
+    }
+    this.avPlayer.reset();
+  }
+  private onStateChange: (state: media.AVPlayerState) => void = async (state: media.AVPlayerState) => {
+    if (this.avPlayer === undefined) {
+      Logger.error(`AvPlayer is undefined`);
+      return;
+    }
+    switch (state) {
+      case CommonConstants.AV_PLAYER_IDLE_STATE:
+        this.url = await uiContext!.resourceManager.getRawFd(CommonConstants.LIVE_VIDEO_NAME);
+        this.avPlayer.fdSrc = this.url;
+        Logger.info('AVPlayer state idle called.');
+        break;
+      case CommonConstants.AV_PLAYER_INITIALIZED_STATE:
+        Logger.info('AVPlayer initialized called.');
+        this.avPlayer.surfaceId = this.surfaceId;
+        this.avPlayer.prepare().then(() => {
+          Logger.info('AVPlayer prepare succeeded.');
+        }, (err: BusinessError) => {
+          Logger.error(`Invoke prepare failed, code is ${err.code}, message is ${err.message}`);
+          if (this.avPlayer === undefined) {
+            Logger.error(`AvPlayer is undefined`);
+            return;
+          }
+          this.avPlayer.reset();
+        });
+        break;
+      case CommonConstants.AV_PLAYER_PREPARED_STATE:
+        this.avPlayer.videoScaleType = media.VideoScaleType.VIDEO_SCALE_TYPE_FIT;
+        Logger.info('AVPlayer state prepared called.');
+        this.avPlayer.play();
+        break;
+      case CommonConstants.AV_PLAYER_PLAYING_STATE:
+        Logger.info('AVPlayer state playing called.');
+        this.playState = true;
+        break;
+      case CommonConstants.AV_PLAYER_PAUSED_STATE:
+        Logger.info('AVPlayer state paused called.');
+        this.playState = false;
+        break;
+      case CommonConstants.AV_PLAYER_COMPLETED_STATE:
+        Logger.info('AVPlayer state completed called.');
+        this.playState = false;
+        this.avPlayer.stop();
+        break;
+      case CommonConstants.AV_PLAYER_STOPPED_STATE:
+        Logger.info('AVPlayer state stopped called.');
+        break;
+      case CommonConstants.AV_PLAYER_RELEASE_STATE:
+        Logger.info('AVPlayer state released called.');
+        break;
+      case CommonConstants.AV_PLAYER_ERROR_STATE:
+        Logger.error('AVPlayer state error called.');
+        break;
+      default:
+        Logger.info('AVPlayer state unknown called.');
+        break;
+    }
+  }
+
+  static getAvPlayerUtil(): AvPlayerUtil | undefined {
+    if (!AppStorage.get<AvPlayerUtil>(CommonConstants.AV_PLAYER_UTIL)) {
+      AppStorage.setOrCreate(CommonConstants.AV_PLAYER_UTIL, new AvPlayerUtil());
+    }
+    return AppStorage.get<AvPlayerUtil>(CommonConstants.AV_PLAYER_UTIL);
+  }
+
+  async createAvPlayer(surfaceId: string): Promise<void> {
+    if (this.avPlayer === undefined || this.avPlayer.state === CommonConstants.AV_PLAYER_RELEASE_STATE) {
+      this.avPlayer = await media.createAVPlayer();
+      this.surfaceId = surfaceId;
+      Logger.info('Created AvPlayer successfully.');
+      // Entering idle state.
+      this.url = await uiContext!.resourceManager.getRawFd(CommonConstants.LIVE_VIDEO_NAME);
+      this.avPlayer.fdSrc = this.url;
+      this.setAVPlayerCallback();
+    } else {
+      Logger.info(`AvPlayer has been created`);
+    }
+  }
+
+  setAVPlayerCallback(): void {
+    if (this.avPlayer === undefined) {
+      Logger.error(`AvPlayer is undefined`);
+      return;
+    }
+    this.avPlayer.on('error', this.onError);
+    this.setStateChange();
+  }
+
+  setStateChange(): void {
+    if (this.avPlayer === undefined) {
+      Logger.error(`AvPlayer is undefined`);
+      return;
+    }
+    this.avPlayer.on('stateChange', this.onStateChange)
+  }
+
+  release(): void {
+    if (this.avPlayer !== undefined && this.avPlayer.state !== CommonConstants.AV_PLAYER_RELEASE_STATE) {
+      try {
+        this.avPlayer.off('error');
+        this.avPlayer.off('stateChange');
+      } catch (exception) {
+        Logger.error('Failed to unregister the error and state callback. Code: ' + JSON.stringify(exception));
+      }
+      this.avPlayer.release();
+    } else {
+      Logger.info(`AvPlayer release failed`);
+    }
+  }
+
+  playerStateControl(): void {
+    if (this.avPlayer === undefined) {
+      Logger.error(`AvPlayer is undefined`);
+      return;
+    }
+    if (this.avPlayer.state === CommonConstants.AV_PLAYER_STOPPED_STATE) {
+      this.avPlayer.prepare();
+      return;
+    }
+    if (!this.playState) {
+      this.avPlayer.play();
+    } else {
+      this.avPlayer.pause();
+    }
+  }
+
+  play(): void {
+    if (this.avPlayer !== undefined && !this.playState) {
+      this.avPlayer.play();
+    } else {
+      Logger.info(`AvPlayer play failed`);
+    }
+  }
+
+  pause(): void {
+    if (this.avPlayer !== undefined && this.playState) {
+      this.avPlayer.pause();
+    } else {
+      Logger.info(`AvPlayer pause failed`);
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/BreakpointType.ets b/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/BreakpointType.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f7e64e42f7fcbd545e4cc122edd6a508e64feda5
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/BreakpointType.ets
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants } from '../constants/BreakpointConstants';
+
+export class BreakpointType<T> {
+  sm: T;
+  md: T;
+  lg: T;
+
+  constructor(sm: T, md: T, lg: T) {
+    this.sm = sm;
+    this.md = md;
+    this.lg = lg;
+  }
+
+  getValue(currentBreakpoint: string): T {
+    if (currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      return this.md;
+    }
+    if (currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      return this.lg;
+    } else {
+      return this.sm;
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/DeviceScreen.ets b/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/DeviceScreen.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b65bb53441b605f8b03c657522edd957ba8c068f
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/DeviceScreen.ets
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { display } from '@kit.ArkUI';
+import { CommonConstants } from '../constants/CommonConstants';
+
+export class DeviceScreen {
+  /**
+   * Get the screen height.
+   *
+   * @returns screen height.
+   */
+  public static getDeviceHeight(): number {
+    let displayObject = display.getDefaultDisplaySync();
+    let screenPixelHeight = displayObject.height;
+    let screenDensityDPI = displayObject.densityDPI;
+    return screenPixelHeight * (CommonConstants.SCREEN_DPI_CONSTANT / screenDensityDPI);
+  }
+
+  /**
+   * Get the screen width.
+   *
+   * @returns screen width.
+   */
+  public static getDeviceWidth(): number {
+    let displayObject = display.getDefaultDisplaySync();
+    let screenPixelWidth = displayObject.width;
+    let screenDensityDPI = displayObject.densityDPI;
+    return screenPixelWidth * (CommonConstants.SCREEN_DPI_CONSTANT / screenDensityDPI);
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/Logger.ets b/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/Logger.ets
new file mode 100644
index 0000000000000000000000000000000000000000..71d6170454c7928cedd8759319a9d00640d926ba
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/Logger.ets
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { hilog } from '@kit.PerformanceAnalysisKit';
+
+
+class Logger {
+  private domain: number;
+  private prefix: string;
+  private format: string = '%{public}s, %{public}s';
+
+  /**
+   * constructor.
+   *
+   * @param Prefix Identifies the log tag.
+   * @param domain Domain Indicates the service domain, which is a hexadecimal integer ranging from 0x0 to 0xFFFFF.
+   */
+  constructor(prefix: string) {
+    this.prefix = prefix;
+    this.domain = 0xFF00;
+  }
+
+  debug(...args: string[]): void {
+    hilog.debug(this.domain, this.prefix, this.format, args);
+  }
+
+  info(...args: string[]): void {
+    hilog.info(this.domain, this.prefix, this.format, args);
+  }
+
+  warn(...args: string[]): void {
+    hilog.warn(this.domain, this.prefix, this.format, args);
+  }
+
+  error(...args: string[]): void {
+    hilog.error(this.domain, this.prefix, this.format, args);
+  }
+}
+
+export default new Logger('MultiShoppingPriceComparison');
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/PipWindowUtil.ets b/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/PipWindowUtil.ets
new file mode 100644
index 0000000000000000000000000000000000000000..90def497aea6c98458f10603d001ed2bc1358f48
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/PipWindowUtil.ets
@@ -0,0 +1,166 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { PiPWindow } from '@kit.ArkUI';
+import { BusinessError } from '@kit.BasicServicesKit';
+import { CommonConstants } from '../constants/CommonConstants';
+import { AvPlayerUtil } from './AvPlayerUtil';
+import Logger from './Logger';
+
+export class PipWindowUtil {
+  private isShowingPip: boolean = false;
+  private pipController?: PiPWindow.PiPController = undefined;
+  private mXComponentController: XComponentController = new XComponentController();
+  private avPlayerUtil: AvPlayerUtil | undefined = AvPlayerUtil.getAvPlayerUtil();
+
+  static getPipWindowUtil(): PipWindowUtil | undefined {
+    if (!AppStorage.get<PipWindowUtil>(CommonConstants.PIP_WINDOW_UTIL)) {
+      AppStorage.setOrCreate(CommonConstants.PIP_WINDOW_UTIL, new PipWindowUtil());
+    }
+    return AppStorage.get<PipWindowUtil>(CommonConstants.PIP_WINDOW_UTIL);
+  }
+
+  getIsShowingPip(): boolean {
+    return this.isShowingPip;
+  }
+
+  getPipController(): PiPWindow.PiPController | undefined {
+    return this.pipController;
+  }
+
+  getXComponentController(): XComponentController {
+    return this.mXComponentController;
+  }
+  // [Start start_pip]
+  async startPip(navId: string, mXComponentController: XComponentController, context: Context, pageInfos: NavPathStack):
+    Promise<void> {
+    if (canIUse('SystemCapability.Window.SessionManager')) {
+      if (!PiPWindow.isPiPEnabled()) {
+        Logger.error(`picture in picture disabled for current OS`);
+        return;
+      }
+      let config: PiPWindow.PiPConfiguration = {
+        context: context,
+        componentController: mXComponentController,
+        // Navigation ID of the current page.
+        navigationId: navId,
+        templateType: PiPWindow.PiPTemplateType.VIDEO_LIVE
+      };
+      // Create a pip controller.
+      let promise: Promise<PiPWindow.PiPController> = PiPWindow.create(config);
+      await promise.then((controller: PiPWindow.PiPController) => {
+        this.pipController = controller;
+        // Initializing the pip controller.
+        this.initPipController();
+        // Enabling the pip function through the startPip interface.
+        this.pipController.startPiP().then(() => {
+          Logger.info(`Succeeded in starting pip.`);
+          if (this.avPlayerUtil === undefined) {
+            return;
+          }
+          this.avPlayerUtil.play();
+          pageInfos.pop();
+        }).catch((err: BusinessError) => {
+          Logger.error(`Failed to start pip. Cause: ${err.code}, message: ${err.message}`);
+        });
+      }).catch((err: BusinessError) => {
+        Logger.error(`Failed to create pip controller. Cause: ${err.code}, message: ${err.message}`);
+      });
+    }
+  }
+  // [End start_pip]
+  // [Start init_pip_controller]
+  initPipController(): void {
+    if (!this.pipController) {
+      return;
+    }
+    if (canIUse('SystemCapability.Window.SessionManager')) {
+      this.pipController.on('stateChange', (state: PiPWindow.PiPState, reason: string) => {
+        this.onStateChange(state, reason);
+      });
+      this.pipController.on('controlPanelActionEvent', (event: PiPWindow.PiPActionEventType) => {
+        this.onActionEvent(event);
+      });
+    }
+  }
+  // [End init_pip_controller]
+  onStateChange(state: PiPWindow.PiPState, reason: string): void {
+    if (canIUse('SystemCapability.Window.SessionManager')) {
+      let curState: string = '';
+      switch (state) {
+        case PiPWindow.PiPState.ABOUT_TO_START:
+          curState = 'ABOUT_TO_START';
+          break;
+        case PiPWindow.PiPState.STARTED:
+          curState = 'STARTED';
+          this.isShowingPip = true;
+          break;
+        case PiPWindow.PiPState.ABOUT_TO_STOP:
+          curState = 'ABOUT_TO_STOP';
+          break;
+        case PiPWindow.PiPState.STOPPED:
+          curState = 'STOPPED';
+          this.isShowingPip = false;
+          break;
+        case PiPWindow.PiPState.ABOUT_TO_RESTORE:
+          curState = 'ABOUT_TO_RESTORE';
+          this.isShowingPip = false;
+          break;
+        case PiPWindow.PiPState.ERROR:
+          curState = 'ERROR';
+          this.isShowingPip = false;
+          break;
+        default:
+          break;
+      }
+      Logger.info(`onStateChange: ${curState}, reason: ${reason}`);
+    }
+  }
+
+  onActionEvent(event: PiPWindow.PiPActionEventType) {
+    switch (event) {
+      case 'playbackStateChanged':
+        if (this.avPlayerUtil === undefined) {
+          return;
+        }
+        this.avPlayerUtil.playerStateControl();
+        break;
+      default:
+        break;
+    }
+  }
+  // [Start stop_pip]
+  // Disable the pip function by calling stopPip.
+  async stopPip(): Promise<void> {
+    if (canIUse('SystemCapability.Window.SessionManager')) {
+      if (this.pipController) {
+        let promise: Promise<void> = this.pipController.stopPiP();
+        promise.then(() => {
+          this.isShowingPip = false;
+          Logger.info(`Succeeded in stopping pip.`);
+          try {
+            this.pipController?.off('stateChange');
+            this.pipController?.off('controlPanelActionEvent');
+          } catch (exception) {
+            Logger.error('Failed to unregister callbacks. Code: ' + JSON.stringify(exception));
+          }
+        }).catch((err: BusinessError) => {
+          Logger.error(`Failed to stop pip. Cause: ${err.code}, message: ${err.message}`);
+        });
+      }
+    }
+  }
+  // [End stop_pip]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/ResourceUtil.ets b/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/ResourceUtil.ets
new file mode 100644
index 0000000000000000000000000000000000000000..dcc7c464ccb27c34693d584a3fae36e8c0aed922
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/ResourceUtil.ets
@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointType } from './BreakpointType';
+
+export class ResourceUtil {
+  /**
+   * Page column padding.
+   */
+  private static pageColPadding: BreakpointType<Resource> = new BreakpointType($r('app.float.page_col_padding_sm'),
+    $r('app.float.page_col_padding_md'), $r('app.float.page_col_padding_lg'));
+
+  /**
+   * Common image size list.
+   */
+  private static commonImgSize: Resource[] = [$r('app.float.common_image_size_1'), $r('app.float.common_image_size_2'),
+    $r('app.float.common_image_size_3'), $r('app.float.common_image_size_4'), $r('app.float.common_image_size_5'),
+    $r('app.float.common_image_size_6'), $r('app.float.common_image_size_7'), $r('app.float.common_image_size_8'),
+    $r('app.float.common_image_size_9'), $r('app.float.common_image_size_10'), $r('app.float.common_image_size_11')];
+
+  /**
+   * Common background color list.
+   */
+  private static commonBackgroundColor: Resource[] = [$r('app.color.common_background_1'),
+    $r('app.color.common_background_2'), $r('app.color.common_background_3')];
+
+  /**
+   * Common border color list.
+   */
+  private static commonBorderColorList: Resource[] = [$r('app.color.common_border_color_1'),
+    $r('app.color.common_border_color_2'), $r('app.color.common_border_color_3'),
+    $r('app.color.common_border_color_4')];
+
+  /**
+   * Common divider color.
+   */
+  private static CommonDividerColor: Resource = $r('app.color.common_divider_color');
+
+  /**
+   * Common border radius list.
+   */
+  private static CommonBorderRadius: Resource[] = [$r('app.float.common_border_radius_1'),
+    $r('app.float.common_border_radius_2'), $r('app.float.common_border_radius_3'),
+    $r('app.float.common_border_radius_4'), $r('app.float.common_border_radius_5'),
+    $r('app.float.common_border_radius_6'), $r('app.float.common_border_radius_7'),
+    $r('app.float.common_border_radius_8'), $r('app.float.common_border_radius_9'),
+    $r('app.float.common_border_radius_10')];
+
+  /**
+   * Arrow right icon.
+   */
+  private static arrowRight: Resource = $r('app.media.arrow_right');
+
+  static getPageColPadding(): BreakpointType<Resource> {
+    return ResourceUtil.pageColPadding;
+  }
+
+  static getCommonImgSize(): Resource[] {
+    return ResourceUtil.commonImgSize;
+  }
+
+  static getCommonBackgroundColor(): Resource[] {
+    return ResourceUtil.commonBackgroundColor;
+  }
+
+  static getCommonBorderColor(): Resource[] {
+    return ResourceUtil.commonBorderColorList;
+  }
+
+  static getCommonDividerColor(): Resource {
+    return ResourceUtil.CommonDividerColor;
+  }
+
+  static getCommonBorderRadius(): Resource[] {
+    return ResourceUtil.CommonBorderRadius;
+  }
+
+  static getArrowRight(): Resource {
+    return ResourceUtil.arrowRight;
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/WindowUtil.ets b/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/WindowUtil.ets
new file mode 100644
index 0000000000000000000000000000000000000000..fa433d1ec30f1e54c710b03446d256cbdd60e001
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/src/main/ets/utils/WindowUtil.ets
@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { display, window } from '@kit.ArkUI';
+import { BusinessError } from '@kit.BasicServicesKit';
+import { BreakpointConstants } from '../constants/BreakpointConstants';
+import { CommonConstants } from '../constants/CommonConstants';
+import Logger from './Logger';
+
+const uiContext: UIContext | undefined = AppStorage.get('uiContext');
+
+export class WindowUtil {
+  private windowStage?: window.WindowStage;
+  private mainWindowClass?: window.Window;
+
+  static getInstance(): WindowUtil | undefined {
+    if (!AppStorage.get<WindowUtil>(CommonConstants.WINDOW_UTIL_LIST[0])) {
+      AppStorage.setOrCreate(CommonConstants.WINDOW_UTIL_LIST[0], new WindowUtil());
+    }
+    return AppStorage.get<WindowUtil>(CommonConstants.WINDOW_UTIL_LIST[0]);
+  }
+
+  static getSecondInstance(): WindowUtil | undefined {
+    if (!AppStorage.get<WindowUtil>(CommonConstants.WINDOW_UTIL_LIST[1])) {
+      AppStorage.setOrCreate(CommonConstants.WINDOW_UTIL_LIST[1], new WindowUtil());
+    }
+    return AppStorage.get<WindowUtil>(CommonConstants.WINDOW_UTIL_LIST[1]);
+  }
+
+  setWindowStage(windowStage: window.WindowStage): void {
+    this.windowStage = windowStage;
+  }
+
+  async setMainWindow(): Promise<void> {
+    if (this.windowStage === undefined) {
+      Logger.error(`WindowStage is undefined`);
+      return;
+    }
+    // Obtain the main window of the application.
+    await this.windowStage.getMainWindow().then((windowClass: window.Window) => {
+      this.mainWindowClass = windowClass;
+    }).catch((err: BusinessError) => {
+      Logger.error(`Failed to obtain the main window. Code:${err.code}, message:${err.message}`);
+    });
+  }
+
+  getMainWindow(): window.Window | undefined {
+    return this.mainWindowClass;
+  }
+
+  setFullScreen(): void {
+    if (this.mainWindowClass === undefined) {
+      Logger.error(`MainWindowClass is undefined`);
+      return;
+    }
+    // Set full-screen display.
+    this.mainWindowClass.setWindowLayoutFullScreen(true).then(() => {
+      Logger.info('Succeeded in setting the window layout to full-screen mode.');
+    }).catch((error: BusinessError) => {
+      Logger.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(error));
+    });
+  }
+
+  setAvoidRectHeight(): void {
+    if (this.mainWindowClass === undefined) {
+      Logger.error(`MainWindowClass is undefined`);
+      return;
+    }
+    let topHeight: number = this.mainWindowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height;
+    AppStorage.setOrCreate('topRectHeight', uiContext?.px2vp(topHeight));
+  }
+
+  updateBreakpoint(windowWidth: number): void {
+    let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels;
+    let curBp: string = '';
+    if (windowWidthVp < BreakpointConstants.BREAKPOINT_RANGES[1]) {
+      curBp = BreakpointConstants.BREAKPOINT_SM;
+    } else if (windowWidthVp < BreakpointConstants.BREAKPOINT_RANGES[2]) {
+      curBp = BreakpointConstants.BREAKPOINT_MD;
+    } else {
+      curBp = BreakpointConstants.BREAKPOINT_LG;
+    }
+    AppStorage.setOrCreate('currentBreakpoint', curBp);
+  }
+
+  updateWindowStatusType(windowStatusType: window.WindowStatusType): void {
+    if (canIUse('SystemCapability.Window.SessionManager')) {
+      let isSplitMode: boolean = false;
+      if (windowStatusType === window.WindowStatusType.SPLIT_SCREEN) {
+        isSplitMode = true;
+      }
+      AppStorage.setOrCreate('isSplitMode', isSplitMode);
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/src/main/module.json5 b/MultiShoppingPriceComparison/commons/base/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..292befa72c1dddac76f95da69a67dc9274bd559f
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/src/main/module.json5
@@ -0,0 +1,12 @@
+{
+  "module": {
+    "name": "base",
+    "type": "har",
+    "description": "$string:shared_desc",
+    "deviceTypes": [
+      "phone",
+      "2in1",
+      "tablet"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/src/main/resources/base/element/color.json b/MultiShoppingPriceComparison/commons/base/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..1534a96af448d5ca7bce98c525a7ec670645034a
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/src/main/resources/base/element/color.json
@@ -0,0 +1,36 @@
+{
+  "color": [
+    {
+      "name": "common_background_1",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "common_background_2",
+      "value": "#F7F7F7"
+    },
+    {
+      "name": "common_background_3",
+      "value": "#0D000000"
+    },
+    {
+      "name": "common_border_color_1",
+      "value": "#33000000"
+    },
+    {
+      "name": "common_border_color_2",
+      "value": "#0D000000"
+    },
+    {
+      "name": "common_border_color_3",
+      "value": "#66000000"
+    },
+    {
+      "name": "common_border_color_4",
+      "value": "#1A000000"
+    },
+    {
+      "name": "common_divider_color",
+      "value": "#0D000000"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/src/main/resources/base/element/float.json b/MultiShoppingPriceComparison/commons/base/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..f0676024294d5d95c9752e2b6aa6d5d9a241056b
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/src/main/resources/base/element/float.json
@@ -0,0 +1,100 @@
+{
+  "float": [
+    {
+      "name": "page_col_padding_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "page_col_padding_md",
+      "value": "24vp"
+    },
+    {
+      "name": "page_col_padding_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "common_image_size_1",
+      "value": "24vp"
+    },
+    {
+      "name": "common_image_size_2",
+      "value": "30vp"
+    },
+    {
+      "name": "common_image_size_3",
+      "value": "36vp"
+    },
+    {
+      "name": "common_image_size_4",
+      "value": "48vp"
+    },
+    {
+      "name": "common_image_size_5",
+      "value": "60vp"
+    },
+    {
+      "name": "common_image_size_6",
+      "value": "32vp"
+    },
+    {
+      "name": "common_image_size_7",
+      "value": "12vp"
+    },
+    {
+      "name": "common_image_size_8",
+      "value": "72vp"
+    },
+    {
+      "name": "common_image_size_9",
+      "value": "10vp"
+    },
+    {
+      "name": "common_image_size_10",
+      "value": "12vp"
+    },
+    {
+      "name": "common_image_size_11",
+      "value": "40vp"
+    },
+    {
+      "name": "common_border_radius_1",
+      "value": "2vp"
+    },
+    {
+      "name": "common_border_radius_2",
+      "value": "4vp"
+    },
+    {
+      "name": "common_border_radius_3",
+      "value": "5vp"
+    },
+    {
+      "name": "common_border_radius_4",
+      "value": "8vp"
+    },
+    {
+      "name": "common_border_radius_5",
+      "value": "12vp"
+    },
+    {
+      "name": "common_border_radius_6",
+      "value": "14vp"
+    },
+    {
+      "name": "common_border_radius_7",
+      "value": "16vp"
+    },
+    {
+      "name": "common_border_radius_8",
+      "value": "20vp"
+    },
+    {
+      "name": "common_border_radius_9",
+      "value": "24vp"
+    },
+    {
+      "name": "common_border_radius_10",
+      "value": "10vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/src/main/resources/base/element/string.json b/MultiShoppingPriceComparison/commons/base/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..98e1d8a84b3d8539ea33e79fe2ac593a05d23bb4
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/src/main/resources/base/element/string.json
@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/commons/base/src/main/resources/base/media/arrow_right.svg b/MultiShoppingPriceComparison/commons/base/src/main/resources/base/media/arrow_right.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5283fd327effeee1bd23d4543e865a9cee4bfff6
--- /dev/null
+++ b/MultiShoppingPriceComparison/commons/base/src/main/resources/base/media/arrow_right.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 12 24" version="1.1">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>Public/ic_public_arrow_right</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M4.2482689,5.78255501 L4.28033009,5.81281566 L9.23007755,10.7625631 C9.8992572,11.4317428 9.91319844,12.5080354 9.27190128,13.1941781 L9.23007755,13.2374369 L4.28033009,18.1871843 C4.15145707,18.3160574 3.98735263,18.3882262 3.81902041,18.403691 L3.7730301,18.4065028 L3.7269699,18.4065028 C3.54277571,18.4008792 3.36025866,18.3277731 3.21966991,18.1871843 C2.93723717,17.9047516 2.92715028,17.4531048 3.18940926,17.1585854 L3.21966991,17.1265242 L7.81586399,12.5303301 C8.09829674,12.2478973 8.10838362,11.7962506 7.84612464,11.5017311 L7.81586399,11.4696699 L3.21966991,6.87347584 C2.9267767,6.58058262 2.9267767,6.10570888 3.21966991,5.81281566 C3.36088629,5.67159929 3.54440617,5.59846938 3.72943689,5.59342594 L3.77570243,5.59358355 C3.94528507,5.59936249 4.11328081,5.66235298 4.2482689,5.78255501 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_arrow_right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_路径" fill="rgba(0,0,0,0.25)" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/Index.ets b/MultiShoppingPriceComparison/features/detail/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a4ce6458be749f6b4bf400c4e86689f817019c10
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/Index.ets
@@ -0,0 +1,4 @@
+export { ProductHome } from './src/main/ets/view/ProductHome';
+export { LiveHome } from './src/main/ets/view/LiveHome';
+export { ProductMoreDetail } from './src/main/ets/view/ProductMoreDetail';
+export { DetailConstants } from './src/main/ets/constants/DetailConstants';
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/build-profile.json5 b/MultiShoppingPriceComparison/features/detail/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..14d5b832c7c04a429ed7da4c443d19c2566a4f25
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/build-profile.json5
@@ -0,0 +1,8 @@
+{
+  "apiType": "stageMode",
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/hvigorfile.ts b/MultiShoppingPriceComparison/features/detail/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiShoppingPriceComparison/features/detail/oh-package.json5 b/MultiShoppingPriceComparison/features/detail/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..58b87f060f6345648a04124b3f71d955f4851fe9
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/oh-package.json5
@@ -0,0 +1,14 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "detail",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/commons": "file:../../commons/base",
+    "@ohos/home": "file:../home"
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/constants/DetailConstants.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/constants/DetailConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b5c74884ea5eb9fa7ccb06d84d81e3c1869ce479
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/constants/DetailConstants.ets
@@ -0,0 +1,209 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class DetailConstants {
+  /**
+   * Living.
+   */
+  static readonly LIVING = (context: Context): string => context.resourceManager.getStringSync($r('app.string.living'));
+
+  /**
+   * Product detail resources.
+   */
+  static readonly PRODUCT_DETAIL_RESOURCES: Resource[] = [$r('app.media.product_detail_1'),
+    $r('app.media.product_detail_2'), $r('app.media.product_detail_2'), $r('app.media.product_detail_2'),
+    $r('app.media.product_detail_3')];
+
+  /**
+   * Product small resources.
+   */
+  static readonly PRODUCT_SMALL_RESOURCES: Resource[] = [$r('app.media.product_small_1'),
+    $r('app.media.product_small_2'), $r('app.media.product_small_2'), $r('app.media.product_small_2'),
+    $r('app.media.product_small_3')];
+
+  /**
+   * Gradient color list.
+   */
+  static readonly GRADIENT_COLORS: string[] = ['#FF6354', '#CF0A2C', '#FAE8E0', '#FFC9C9'];
+
+  /**
+   * Product color selection.
+   */
+  static readonly PRODUCT_COLOR_SELECTION: Resource[] = [$r('app.media.product_small_1'),
+    $r('app.media.product_small_2'), $r('app.media.product_small_3')];
+
+  /**
+   * Recommended config products.
+   */
+  static readonly RECOMMENDED_CONFIG_PRODUCTS: Resource[] = [$r('app.media.recommended_config_1'),
+    $r('app.media.recommended_config_2'), $r('app.media.recommended_config_3'), $r('app.media.recommended_config_4')];
+
+  /**
+   * Param string list.
+   */
+  static readonly PARAM_STRING_LIST: string[] = ['shoppingBag', 'customerService'];
+
+  /**
+   * Customer service contents.
+   */
+  static readonly CUSTOMER_SERVICE_CONTENTS = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.store')),
+    '￥12999', '￥13999',
+    context.resourceManager.getStringSync($r('app.string.buy')),
+    context.resourceManager.getStringSync($r('app.string.CUSTOMER_SERVICE_CONTENTS1')),
+    context.resourceManager.getStringSync($r('app.string.CUSTOMER_SERVICE_CONTENTS2')),
+    context.resourceManager.getStringSync($r('app.string.CUSTOMER_SERVICE_CONTENTS3')),
+    context.resourceManager.getStringSync($r('app.string.CUSTOMER_SERVICE_CONTENTS4'))];
+
+  /**
+   * Product color list.
+   */
+  static readonly COLOR_SELECT_NAME_LIST = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.COLOR_SELECT_NAME_LIST1')),
+    context.resourceManager.getStringSync($r('app.string.COLOR_SELECT_NAME_LIST2')),
+    context.resourceManager.getStringSync($r('app.string.COLOR_SELECT_NAME_LIST3')),
+    context.resourceManager.getStringSync($r('app.string.COLOR_SELECT_NAME_LIST4'))];
+
+  /**
+   * Product name list.
+   */
+  static readonly CAPACITY_SELECT_NAME_LIST: string[] = ['12GB+512GB', '12GB+1T'];
+
+  /**
+   * Product type list.
+   */
+  static readonly TYPE_SELECT_NAME_LIST = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.Official_standard'))];
+
+  /**
+   * Product select type list.
+   */
+  static readonly SELECT_NAME_LIST = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.SELECT_NAME_LIST1')),
+    context.resourceManager.getStringSync($r('app.string.SELECT_NAME_LIST2')),
+    context.resourceManager.getStringSync($r('app.string.SELECT_NAME_LIST3'))];
+
+  /**
+   * Product image list.
+   */
+  static readonly COLOR_SELECT_IMAGE_LIST: Resource[] = [$r('app.media.pay_product_1'),
+    $r('app.media.pay_product_2'), $r('app.media.pay_product_3'), $r('app.media.pay_product_4')];
+
+  /**
+   * Button names.
+   */
+  static readonly BUTTON_NAMES = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.add_cart')),
+    context.resourceManager.getStringSync($r('app.string.buy'))];
+
+  /**
+   * Pay address and contact.
+   */
+  static readonly PAY_INFO = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.pay_info1')),
+    context.resourceManager.getStringSync($r('app.string.pay_info2')),
+    context.resourceManager.getStringSync($r('app.string.pay_info3')),
+    context.resourceManager.getStringSync($r('app.string.pay_info4'))];
+
+  /**
+   * Product config list.
+   */
+  static readonly PRODUCT_CONFIG_NAMES = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_CONFIG_NAMES1')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_CONFIG_NAMES2')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_CONFIG_NAMES3')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_CONFIG_NAMES4')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_CONFIG_NAMES5')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_CONFIG_NAMES6')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_CONFIG_NAMES7')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_CONFIG_NAMES8'))];
+
+  /**
+   * User comment list.
+   */
+  static readonly USER_COMMENT_NAMES = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.USER_COMMENT_NAMES1')),
+    context.resourceManager.getStringSync($r('app.string.USER_COMMENT_NAMES2')),
+    context.resourceManager.getStringSync($r('app.string.USER_COMMENT_NAMES3')),
+    context.resourceManager.getStringSync($r('app.string.USER_COMMENT_NAMES4')),
+    context.resourceManager.getStringSync($r('app.string.USER_COMMENT_NAMES5')),
+    context.resourceManager.getStringSync($r('app.string.USER_COMMENT_NAMES6')),
+    context.resourceManager.getStringSync($r('app.string.USER_COMMENT_NAMES7')),
+    context.resourceManager.getStringSync($r('app.string.USER_COMMENT_NAMES8'))];
+
+  /**
+   * List space.
+   */
+  static readonly PRODUCT_CONFIG_LIST_SPACE: number = 12;
+
+  /**
+   * Y position of live row.
+   */
+  static readonly LIVE_ROW_Y_POSITION: number = 12;
+
+  /**
+   * Live stack aspect ratio.
+   */
+  static readonly LIVE_STACK_ASPECT_RATIO: number[] = [1.2, 2.2];
+
+  /**
+   * Picture number.
+   */
+  static readonly PICTURE_INDICATOR = (context: Context): string[] => ['/5', '3D',
+    context.resourceManager.getStringSync($r('app.string.compare'))];
+
+  /**
+   * Picture list space list.
+   */
+  static readonly PICTURE_LIST_SPACES: string[] = ['8vp', '12vp', '16vp'];
+
+  /**
+   * Product discount name list.
+   */
+  static readonly PRODUCT_DISCOUNT_NAMES = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_DISCOUNT_NAMES1')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_DISCOUNT_NAMES2')),
+    'Mate X5:',
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_DISCOUNT_NAMES3'))];
+
+  /**
+   * Product price name list.
+   */
+  static readonly PRODUCT_PRICE_NAMES = (context: Context): string[] => ['￥', '12999', '￥13999',
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_PRICE_NAMES1')),
+    '07', ':', '14', ':', '50',
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_PRICE_NAMES2')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_PRICE_NAMES3')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_PRICE_NAMES4')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_PRICE_NAMES5')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_PRICE_NAMES6')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_PRICE_NAMES7')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_PRICE_NAMES8'))];
+
+  /**
+   * 80 percent.
+   */
+  static readonly EIGHTY_PERCENT: string = '80%';
+
+  /**
+   * Comments list.
+   */
+  static readonly COMMENTS_LIST: number[] = [1, 2];
+
+  /**
+   * Navigation id.
+   */
+  static readonly NAVIGATION_ID: string = 'navId';
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/constants/LiveConstants.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/constants/LiveConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..faa28ff623ce11e09c43c70725d4854986f57a88
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/constants/LiveConstants.ets
@@ -0,0 +1,129 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class LiveConstants {
+  /**
+   * Live product image list.
+   */
+  static readonly LIVE_PRODUCT_IMAGE_LIST: Resource[] = [$r('app.media.live_product_1'), $r('app.media.live_product_2'),
+    $r('app.media.live_product_3'), $r('app.media.live_product_4'), $r('app.media.live_product_5'),
+    $r('app.media.live_product_6'), $r('app.media.live_product_7'), $r('app.media.live_product_8')];
+  /**
+   * Live product name list.
+   */
+  static readonly LIVE_PRODUCT_NAME_LIST: string[] = ['HUAWEI Mate 60 Pro', 'XXXXXXXXXXX', 'XXXXXXXXXXX', 'XXXXXXXXXXX',
+    'XXXXXXXXXXX', 'XXXXXXXXXXX', 'XXXXXXXXXXX', 'XXXXXXXXXXX'];
+  /**
+   * Live product price list.
+   */
+  static readonly LIVE_PRODUCT_PRICE_LIST: string[] =
+    ['￥ 6999', 'XXXX', 'XXXX', 'XXXX', 'XXXX', 'XXXX', 'XXXX', 'XXXX'];
+  /**
+   * Shop car product image list.
+   */
+  static readonly SHOP_CAR_PRODUCT_IMAGE_LIST: Resource[] = [$r('app.media.live_bag_product_1'),
+    $r('app.media.live_bag_product_2'), $r('app.media.live_bag_product_3'), $r('app.media.live_bag_product_4')];
+  /**
+   * Shop car product name list.
+   */
+  static readonly SHOP_CAR_PRODUCT_NAME_LIST: string[] = ['HUAWEI Mate 60 Pro', 'Mate Xs 2', 'MateBook E Go',
+    'HUAWEI Mate 50'];
+  /**
+   * Shop car product remark list.
+   */
+  static readonly SHOP_CAR_PRODUCT_REMARK_LIST = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.OP_CAR_PRODUCT_REMARK_LIST1')),
+    context.resourceManager.getStringSync($r('app.string.OP_CAR_PRODUCT_REMARK_LIST2')),
+    context.resourceManager.getStringSync($r('app.string.OP_CAR_PRODUCT_REMARK_LIST3')),
+    context.resourceManager.getStringSync($r('app.string.OP_CAR_PRODUCT_REMARK_LIST1'))];
+  /**
+   * Shop car product discounts list.
+   */
+  static readonly SHOP_CAR_PRODUCT_DISCOUNTS_LIST = (context: Context): string[][] => [
+    [context.resourceManager.getStringSync($r('app.string.Gifted_points')),
+      context.resourceManager.getStringSync($r('app.string.flagship_machine'))],
+    [context.resourceManager.getStringSync($r('app.string.flagship_machine'))],
+    [context.resourceManager.getStringSync($r('app.string.cheaper'))],
+    [context.resourceManager.getStringSync($r('app.string.Gifted_points')),
+      context.resourceManager.getStringSync($r('app.string.flagship_machine'))]];
+  /**
+   * Shop car product price list.
+   */
+  static readonly SHOP_CAR_PRODUCT_PRICE_LIST: number[] = [6999, 9999, 4899, 4999];
+  /**
+   * Shop car icon resources.
+   */
+  static readonly SHOP_CAR_ICON_RESOURCES: Resource[] = [$r('app.media.icon_bag'), $r('app.media.icon_search'),
+    $r('app.media.icon_order')];
+  /**
+   * Shop car icon names.
+   */
+  static readonly SHOP_CAR_ICON_NAMES = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.Shopping_bag')),
+    context.resourceManager.getStringSync($r('app.string.search')),
+    context.resourceManager.getStringSync($r('app.string.Order'))];
+  /**
+   * Shop car tab list.
+   */
+  static readonly SHOP_CAR_TABS = (context: Context): string[] => {
+    return [
+      context.resourceManager.getStringSync($r('app.string.all')),
+      context.resourceManager.getStringSync($r('app.string.phone')),
+      context.resourceManager.getStringSync($r('app.string.mac')),
+      context.resourceManager.getStringSync($r('app.string.PC')),
+      context.resourceManager.getStringSync($r('app.string.watch')),
+      context.resourceManager.getStringSync($r('app.string.earphone'))]
+  };
+  /**
+   * Live Comments.
+   */
+  static readonly LIVE_COMMENTS_LIST = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.LIVE_COMMENTS_LIST1')),
+    context.resourceManager.getStringSync($r('app.string.LIVE_COMMENTS_LIST2')),
+    context.resourceManager.getStringSync($r('app.string.LIVE_COMMENTS_LIST3'))];
+  /**
+   * Comments layout weight.
+   */
+  static readonly COMMENTS_WIDTH: string[] = ['228vp', '400vp', '290vp']
+  /**
+   * Shopping list interval.
+   */
+  static readonly SHOPPING_LIST_SPACE: string[] = ['12vp', '10vp'];
+  /**
+   * Currency symbol.
+   */
+  static readonly CURRENCY_SYMBOL: string = "￥ ";
+  /**
+   * Eight.
+   */
+  static readonly EIGHT: number = 8;
+  /**
+   * Ninety percent.
+   */
+  static readonly NINETY_PERCENT: string = '90%';
+  /**
+   * Pay button text.
+   */
+  static readonly PAY_BUTTON_TEXT =
+    (context: Context): string => context.resourceManager.getStringSync($r('app.string.buy_now'));
+  /**
+   * X component params.
+   */
+  static readonly X_COMPONENT_PARAMS: string[] = ['live', 'surface'];
+  /**
+   * X component aspect ratio.
+   */
+  static readonly X_COMPONENT_ASPECT_RATIO: number = 0.56;
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/Comment.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/Comment.ets
new file mode 100644
index 0000000000000000000000000000000000000000..24aca21618e907e936bb196add4dfabd9cf53fc4
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/Comment.ets
@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, BreakpointType } from '@ohos/commons';
+import { LiveConstants } from '../constants/LiveConstants';
+
+@Component
+export struct Comment {
+  @Prop currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Column() {
+      ForEach(LiveConstants.LIVE_COMMENTS_LIST(this.context), (item: string, index: number) => {
+        Row() {
+          Text($r('app.string.official_review'))
+            .fontColor(Color.White)
+            .fontSize($r('app.float.live_comment_font_size'))
+            .linearGradient({
+              angle: 0,
+              direction: GradientDirection.Left,
+              colors: [['#CF0A2C', 0], ['#FF6354', 1]]
+            })
+            .border({ radius: $r('app.float.official_review_border_radius') })
+            .padding($r('app.float.official_review_padding'))
+            .margin({ right: $r('app.float.official_review_margin') })
+            .visibility(index === 0 ? Visibility.Visible : Visibility.None)
+          Text(item)
+            .layoutWeight(new BreakpointType(LiveConstants.COMMENTS_WIDTH[0], LiveConstants.COMMENTS_WIDTH[1],
+              LiveConstants.COMMENTS_WIDTH[2]).getValue(this.currentBreakpoint))
+            .fontColor(Color.White)
+            .lineHeight($r('app.float.comments_line_height'))
+            .fontSize($r('app.float.live_comment_font_size'))
+        }
+        .flexGrow(0)
+        .justifyContent(FlexAlign.Start)
+        .alignItems(VerticalAlign.Top)
+        .margin({ bottom: $r('app.float.live_comment_margin_bottom') })
+        .border({ radius: $r('app.float.live_comment_border_radius') })
+        .backgroundColor($r('app.color.comment_background_color'))
+        .padding({
+          left: $r('app.float.live_comment_padding_left'),
+          top: $r('app.float.live_comment_padding'),
+          bottom: $r('app.float.live_comment_padding'),
+          right: $r('app.float.live_comment_padding')
+        })
+      }, (item: string, index: number) => item + index)
+    }
+    .flexGrow(0)
+    .width(new BreakpointType(LiveConstants.COMMENTS_WIDTH[0], LiveConstants.COMMENTS_WIDTH[1],
+      LiveConstants.COMMENTS_WIDTH[2]).getValue(this.currentBreakpoint))
+    .alignItems(HorizontalAlign.Start)
+    .alignSelf(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? ItemAlign.End : ItemAlign.Start)
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/CommentInput.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/CommentInput.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a6e1e1ba2e6f3a1bee4c402aa35f68415c4f2873
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/CommentInput.ets
@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { LiveConstants } from '../constants/LiveConstants';
+
+@Component
+export struct CommentInput {
+  @Prop currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+
+  @Builder
+  shopCarBuilder() {
+  };
+
+  @BuilderParam shopCarButton: () => void = this.shopCarBuilder;
+
+  build() {
+    Row() {
+      TextInput({ placeholder: $r('app.string.comment_placeholder') })
+        .layoutWeight(1)
+        .backgroundColor($r('app.color.comment_background_color'))
+        .placeholderColor(Color.White)
+        .fontSize($r('app.float.comment_font_size'))
+        .enableKeyboardOnFocus(false)
+        .margin({
+          right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+            $r('app.float.comment_icon_margin_right_lg') : $r('app.float.comment_icon_margin_right_sm_md')
+        })
+
+      Image($r('app.media.icon_share'))
+        .width(ResourceUtil.getCommonImgSize()[0])
+        .height(ResourceUtil.getCommonImgSize()[0])
+        .margin({
+          right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+            $r('app.float.comment_icon_margin_right_lg') : $r('app.float.comment_icon_margin_right_sm_md')
+        })
+
+      Image($r('app.media.icon_like'))
+        .width(ResourceUtil.getCommonImgSize()[0])
+        .height(ResourceUtil.getCommonImgSize()[0])
+        .margin({
+          right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+            $r('app.float.comment_icon_margin_right_lg') : $r('app.float.comment_icon_margin_right_sm_md')
+        })
+
+      this.shopCarButton()
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .height($r('app.float.comment_height'))
+    .padding({
+      left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+      right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint)
+    })
+    .margin({
+      top: $r('app.float.comment_margin_top'),
+      bottom: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? LiveConstants.EIGHT : LiveConstants.EIGHT +
+        CommonConstants.BOTTOM_RECT_HEIGHT
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/CommonView.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/CommonView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e392a3338080e48a1232ed8d2b9a8fcf36897ace
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/CommonView.ets
@@ -0,0 +1,179 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, BreakpointType, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+
+@Component
+export struct ProductsConfigText {
+  public configText: string = '';
+
+  build() {
+    Text(this.configText)
+      .fontSize($r('app.float.products_config_font'))
+      .lineHeight($r('app.float.products_config_line'))
+      .fontWeight(FontWeight.Normal)
+  }
+}
+
+@Component
+export struct RightArrow {
+  build() {
+    Image(ResourceUtil.getArrowRight())
+      .width($r('app.float.right_arrow_width'))
+      .height($r('app.float.right_arrow_height'))
+  }
+}
+
+@Component
+export struct ConfigTipIcon {
+  build() {
+    Image($r('app.media.ic_public_todo'))
+      .width($r('app.float.config_tip_icon_size'))
+      .height($r('app.float.config_tip_icon_size'))
+      .borderRadius(ResourceUtil.getCommonBorderRadius()[2])
+      .opacity(CommonConstants.TEXT_OPACITY[1])
+      .margin({ right: $r('app.float.config_tip_icon_margin') })
+  }
+}
+
+@Component
+export struct ConfigTipText {
+  public tipText: string = '';
+
+  build() {
+    Text(this.tipText)
+      .opacity(CommonConstants.TEXT_OPACITY[2])
+      .fontSize($r('app.float.config_tip_text_font'))
+      .fontWeight(FontWeight.Normal)
+      .maxLines(1)
+      .textOverflow({ overflow: TextOverflow.Ellipsis })
+  }
+}
+
+@Component
+export struct UtilIcon {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('isShowingSidebar') isShowingSidebar: boolean = false;
+  @Link isMoreDetail: boolean;
+  public iconImg: Resource = $r('app.media.tab_home');
+
+  build() {
+    Row() {
+      Image(this.iconImg)
+        .width(ResourceUtil.getCommonImgSize()[0])
+        .height(ResourceUtil.getCommonImgSize()[0])
+    }
+    .justifyContent(FlexAlign.Center)
+    .width(this.isShowingSidebar ? $r('app.float.util_icon_width_small') : (this.isMoreDetail ?
+      new BreakpointType($r('app.float.util_icon_zero'), $r('app.float.util_icon_width_small'),
+        $r('app.float.util_icon_width_lg')).getValue(this.currentBreakpoint) :
+      new BreakpointType($r('app.float.util_icon_width_sm'), $r('app.float.util_icon_width_md'),
+        $r('app.float.util_icon_width_lg')).getValue(this.currentBreakpoint)))
+    .height(CommonConstants.TAB_BAR_HEIGHT)
+  }
+}
+
+@Component
+export struct DetailTopIcon {
+  public imageResource: Resource = $r('app.media.ic_back');
+
+  build() {
+    Image(this.imageResource)
+      .width(ResourceUtil.getCommonImgSize()[1])
+      .height(ResourceUtil.getCommonImgSize()[1])
+  }
+}
+
+@Component
+export struct CommentsTitle {
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Text(DetailConstants.USER_COMMENT_NAMES(this.context)[0])
+      .fontSize($r('app.float.user_comments_title_font'))
+      .lineHeight($r('app.float.user_comments_title_line'))
+      .fontWeight(CommonConstants.FONT_WEIGHT_500)
+      .textOverflow({ overflow: TextOverflow.Ellipsis })
+  }
+}
+
+@Component
+export struct UserCommentInfo {
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Row() {
+      Image($r('app.media.user_profile'))
+        .width(ResourceUtil.getCommonImgSize()[2])
+        .height(ResourceUtil.getCommonImgSize()[2])
+        .margin({ right: $r('app.float.comments_profile_margin') })
+      Column() {
+        Text(DetailConstants.USER_COMMENT_NAMES(this.context)[4])
+          .fontSize($r('app.float.comments_user_font'))
+          .lineHeight($r('app.float.comments_user_line'))
+          .fontWeight(FontWeight.Normal)
+        Rating({ rating: CommonConstants.FIVE, indicator: false })
+          .stars(CommonConstants.FIVE)
+          .stepSize(1)
+          .height($r('app.float.rating_height'))
+      }
+      .justifyContent(FlexAlign.SpaceBetween)
+      .height(CommonConstants.FULL_PERCENT)
+    }
+    .height($r('app.float.comments_user_row_height'))
+    .margin({
+      top: $r('app.float.comments_tag_margin'),
+      bottom: $r('app.float.comments_user_row_margin')
+    })
+  }
+}
+
+@Component
+export struct CommentsContent {
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Text(DetailConstants.USER_COMMENT_NAMES(this.context)[5])
+      .fontSize($r('app.float.comment_text_font'))
+      .fontWeight(FontWeight.Normal)
+      .lineHeight($r('app.float.comment_text_line'))
+  }
+}
+
+@Component
+export struct CommentContentExtra {
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Column() {
+      Image($r('app.media.comment_picture'))
+        .width(CommonConstants.FULL_PERCENT)
+        .height($r('app.float.comment_extra_img_size'))
+        .aspectRatio(1)
+        .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+        .padding({
+          top: $r('app.float.tag_padding'),
+          bottom: $r('app.float.tag_padding')
+        })
+      Text(DetailConstants.USER_COMMENT_NAMES(this.context)[7])
+        .opacity(CommonConstants.TEXT_OPACITY[2])
+        .fontSize($r('app.float.comment_extra_font'))
+        .fontWeight(FontWeight.Normal)
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .alignItems(HorizontalAlign.Start)
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/CustomerServiceView.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/CustomerServiceView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a4040e6466745b614c98ec5bab6e7a14c7e7d3e2
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/CustomerServiceView.ets
@@ -0,0 +1,260 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, BreakpointType, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+
+@Component
+export struct CustomerServiceView {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Column() {
+      Row() {
+        NormalImage({ imageResource: $r('app.media.ic_public_back') })
+          .margin({ right: $r('app.float.top_icon_right_margin') })
+          .onClick(() => {
+            this.pageInfos.pop();
+          })
+          .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.Visible :
+            Visibility.None)
+        NormalImage({ imageResource: $r('app.media.shop_logo') })
+          .margin({ right: $r('app.float.top_icon_right_margin') })
+        Text(DetailConstants.CUSTOMER_SERVICE_CONTENTS(this.context)[0])
+          .fontSize($r('app.float.customer_service_font'))
+          .lineHeight($r('app.float.customer_service_line_height'))
+          .fontWeight(CommonConstants.FONT_WEIGHT_500)
+        Blank()
+        NormalImage({ imageResource: $r('app.media.ic_public_more') })
+          .margin({ right: new BreakpointType($r('app.float.more_icon_margin_sm'), $r('app.float.more_icon_margin_md'),
+            $r('app.float.more_icon_margin_lg')).getValue(this.currentBreakpoint) })
+        NormalImage({ imageResource: $r('app.media.ic_public_close') })
+          .onClick(() => {
+            this.pageInfos.pop();
+          })
+          .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.None :
+            Visibility.Visible)
+      }
+      .height($r('app.float.service_shop_row_height'))
+      .width(CommonConstants.FULL_PERCENT)
+      .padding({
+        left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+        right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint)
+      })
+      .margin({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ?
+        $r('app.float.service_shop_row_margin') : this.topRectHeight })
+
+      Divider()
+        .strokeWidth(1)
+        .color(ResourceUtil.getCommonDividerColor())
+
+      Scroll() {
+        Column() {
+          Row() {
+            Image($r('app.media.shop_product'))
+              .height(CommonConstants.FULL_PERCENT)
+              .aspectRatio(1)
+
+            Column() {
+              Text(DetailConstants.CUSTOMER_SERVICE_CONTENTS(this.context)[4])
+                .fontSize($r('app.float.service_card_font_3'))
+                .lineHeight($r('app.float.service_card_line_3'))
+                .fontWeight(FontWeight.Normal)
+                .width(CommonConstants.FULL_PERCENT)
+                .maxLines(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? CommonConstants.THREE :
+                  CommonConstants.TWO)
+                .textOverflow({ overflow: TextOverflow.Ellipsis })
+                .margin({ bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  $r('app.float.service_card_margin_3_lg') : $r('app.float.service_card_margin_3') })
+
+              Row() {
+                Text(DetailConstants.CUSTOMER_SERVICE_CONTENTS(this.context)[1])
+                  .fontSize($r('app.float.service_card_font_1'))
+                  .lineHeight(CommonConstants.FULL_PERCENT)
+                  .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                  .fontColor($r('app.color.service_font_color'))
+                  .margin({ right: $r('app.float.service_card_margin') })
+                  .displayPriority(2)
+                Text(DetailConstants.CUSTOMER_SERVICE_CONTENTS(this.context)[2])
+                  .fontSize($r('app.float.service_card_font_2'))
+                  .lineHeight($r('app.float.service_card_line_2'))
+                  .fontWeight(FontWeight.Normal)
+                  .fontColor($r('app.color.service_card_font'))
+                  .textOverflow({ overflow: TextOverflow.Ellipsis })
+                  .decoration({
+                    type: TextDecorationType.LineThrough,
+                    color: $r('app.color.service_card_font')
+                  })
+                  .displayPriority(1)
+                  .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible :
+                    Visibility.None)
+                Blank()
+                  .displayPriority(3)
+                Button(DetailConstants.CUSTOMER_SERVICE_CONTENTS(this.context)[3])
+                  .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.service_button_width_lg') : $r('app.float.service_button_width'))
+                  .height(CommonConstants.FULL_PERCENT)
+                  .fontSize($r('app.float.service_button_font'))
+                  .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                  .borderRadius(ResourceUtil.getCommonBorderRadius()[5])
+                  .backgroundColor($r('app.color.service_font_color'))
+                  .displayPriority(3)
+              }
+              .width(CommonConstants.FULL_PERCENT)
+              .height($r('app.float.service_card_price_height'))
+            }
+            .layoutWeight(1)
+            .height(CommonConstants.FULL_PERCENT)
+            .padding({
+              top: $r('app.float.service_card_padding_top'),
+              bottom: $r('app.float.service_card_padding_bottom'),
+              left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.service_card_padding_left_lg') : 0,
+              right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.service_card_padding_right_lg') : $r('app.float.service_card_padding_right')
+            })
+          }
+          .height($r('app.float.service_card_height'))
+          .width((CommonConstants.FULL_PERCENT))
+          .borderRadius(ResourceUtil.getCommonBorderRadius()[4])
+          .backgroundColor(Color.White)
+
+          MessageView({
+            messageContent: DetailConstants.CUSTOMER_SERVICE_CONTENTS(this.context)[5],
+            isReceiving: false,
+            isSameSender: false
+          })
+          MessageView({
+            messageContent: DetailConstants.CUSTOMER_SERVICE_CONTENTS(this.context)[6],
+            isReceiving: true,
+            isSameSender: false
+          })
+          MessageView({
+            messageContent: DetailConstants.CUSTOMER_SERVICE_CONTENTS(this.context)[7],
+            isReceiving: true,
+            isSameSender: true
+          })
+        }
+        .width(CommonConstants.FULL_PERCENT)
+        .padding({
+          top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.service_padding_top_sm') :
+            $r('app.float.service_padding_top'),
+          bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.service_padding_top_sm') :
+            $r('app.float.service_padding_top'),
+          left: $r('app.float.service_padding_top_sm'),
+          right: $r('app.float.service_padding_top_sm')
+        })
+      }
+      .scrollBar(BarState.Off)
+      .align(Alignment.Top)
+      .layoutWeight(1)
+      .width(CommonConstants.FULL_PERCENT)
+
+      Divider()
+        .strokeWidth(1)
+        .color(ResourceUtil.getCommonDividerColor())
+
+      Row() {
+        NormalImage({ imageResource: $r('app.media.ic_public_voice') })
+          .margin({ right: new BreakpointType($r('app.float.service_util_right_margin_sm'),
+            $r('app.float.service_util_right_margin_md'), $r('app.float.service_util_right_margin_lg'))
+            .getValue(this.currentBreakpoint) })
+        TextInput()
+          .height($r('app.float.text_input_height'))
+          .layoutWeight(1)
+          .margin({ right: new BreakpointType($r('app.float.service_util_right_margin_sm'),
+            $r('app.float.service_util_right_margin_md'), $r('app.float.service_util_right_margin_lg'))
+            .getValue(this.currentBreakpoint) })
+        NormalImage({ imageResource: $r('app.media.ic_public_emoji') })
+          .margin({ right: new BreakpointType($r('app.float.service_util_right_margin_sm'),
+            $r('app.float.service_util_right_margin_md'), $r('app.float.service_util_right_margin_lg'))
+            .getValue(this.currentBreakpoint) })
+        NormalImage({ imageResource: $r('app.media.ic_public_add') })
+      }
+      .height(deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? CommonConstants.TAB_BAR_HEIGHT :
+        CommonConstants.TAB_BAR_HEIGHT + CommonConstants.BOTTOM_RECT_HEIGHT)
+      .width(CommonConstants.FULL_PERCENT)
+      .padding({
+        left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+        right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+        bottom: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : CommonConstants.BOTTOM_RECT_HEIGHT
+      })
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .height(CommonConstants.FULL_PERCENT)
+  }
+}
+
+@Component
+struct NormalImage {
+  public imageResource: Resource = $r('app.media.ic_public_back');
+
+  build() {
+    Image(this.imageResource)
+      .width(ResourceUtil.getCommonImgSize()[0])
+      .height(ResourceUtil.getCommonImgSize()[0])
+  }
+}
+
+@Component
+struct MessageView {
+  public messageContent: string = '';
+  public isReceiving: boolean = false;
+  public isSameSender: boolean = false;
+
+  build() {
+    Flex({
+      direction: this.isReceiving ? FlexDirection.Row : FlexDirection.RowReverse,
+      justifyContent: FlexAlign.Start,
+      alignItems: ItemAlign.Start
+    }) {
+      Image(this.isReceiving ? $r('app.media.shop_logo') : $r('app.media.user_profile'))
+        .width(ResourceUtil.getCommonImgSize()[2])
+        .height(ResourceUtil.getCommonImgSize()[2])
+        .objectFit(ImageFit.Contain)
+        .visibility(this.isSameSender ? Visibility.None : Visibility.Visible)
+        .margin({
+          left: !this.isReceiving ? $r('app.float.message_image_margin') : 0,
+          right: this.isReceiving ? $r('app.float.message_image_margin') : 0
+        })
+      Row() {
+        Text(this.messageContent)
+          .fontSize($r('app.float.message_content_font'))
+          .lineHeight($r('app.float.message_content_line'))
+          .fontWeight(FontWeight.Normal)
+      }
+      .borderRadius(ResourceUtil.getCommonBorderRadius()[3])
+      .padding({
+        top: $r('app.float.message_padding_top_bottom'),
+        bottom: $r('app.float.message_padding_top_bottom'),
+        left: $r('app.float.message_padding_left_right'),
+        right: $r('app.float.message_padding_left_right')
+      })
+      .backgroundColor(this.isReceiving ? Color.White : $r('app.color.message_user_background'))
+    }
+    .margin({ top: this.isSameSender ? $r('app.float.message_flex_margin_same') : $r('app.float.message_flex_margin') })
+    .width(CommonConstants.FULL_PERCENT)
+    .padding({
+      left: !this.isReceiving ? $r('app.float.message_flex_padding') : (this.isSameSender ?
+        $r('app.float.message_flex_padding') : 0),
+      right: this.isReceiving ? $r('app.float.message_flex_padding') : (this.isSameSender ?
+        $r('app.float.message_flex_padding') : 0)
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/Live.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/Live.ets
new file mode 100644
index 0000000000000000000000000000000000000000..0e8875778b2ad27924e4c73e27c13dbfb7edf2a1
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/Live.ets
@@ -0,0 +1,99 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { AvPlayerUtil, BreakpointConstants, BreakpointType, CommonConstants, PipWindowUtil } from '@ohos/commons';
+import { LiveConstants } from '../constants/LiveConstants';
+import { CommentInput } from './CommentInput';
+import { LiveMaskLayer } from './LiveMaskLayer';
+import { LiverHeader } from './LiverHeader';
+
+@Component
+export struct Live {
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+  @Prop currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @Link detailType: string;
+  @Link isMoreDetail: boolean;
+  @Builder shopCarBuilder() {};
+  @Builder liveCloseBuilder() {};
+  @BuilderParam shopCarButton: () => void = this.shopCarBuilder;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+  private pipWindowUtil: PipWindowUtil | undefined = PipWindowUtil.getPipWindowUtil();
+  private surfaceId: string = '';
+  private avPlayerUtil: AvPlayerUtil | undefined = AvPlayerUtil.getAvPlayerUtil();
+
+  aboutToDisappear(): void {
+    if (this.avPlayerUtil === undefined) {
+      return;
+    }
+    this.avPlayerUtil.release();
+  }
+
+  build() {
+    Column() {
+      Stack({ alignContent: Alignment.Start }) {
+        Column() {
+          XComponent({
+            id: LiveConstants.X_COMPONENT_PARAMS[0],
+            type: XComponentType.SURFACE,
+            controller: this.pipWindowUtil?.getXComponentController()
+          })
+            .onLoad(() => {
+              if (this.pipWindowUtil === undefined) {
+                return;
+              }
+              this.surfaceId = this.pipWindowUtil.getXComponentController().getXComponentSurfaceId();
+              if (this.avPlayerUtil === undefined) {
+                return;
+              }
+              this.avPlayerUtil.createAvPlayer(this.surfaceId);
+            })
+            .width(new BreakpointType($r('app.float.live_video_width_sm'), $r('app.float.live_video_width_md'),
+              $r('app.float.live_video_width_lg')).getValue(this.currentBreakpoint))
+            .aspectRatio(LiveConstants.X_COMPONENT_ASPECT_RATIO)
+        }
+        .width(CommonConstants.FULL_PERCENT)
+        .height(CommonConstants.FULL_PERCENT)
+        .justifyContent(FlexAlign.Center)
+        .alignItems(HorizontalAlign.Center)
+
+        Column() {
+          LiverHeader()
+          LiveMaskLayer({
+            currentBreakpoint:this.currentBreakpoint,
+            detailType:this.detailType,
+            isMoreDetail:this.isMoreDetail
+          })
+        }
+        .height(CommonConstants.FULL_PERCENT)
+        .width(CommonConstants.FULL_PERCENT)
+        .justifyContent(FlexAlign.SpaceBetween)
+      }
+      .layoutWeight(1)
+      .width(CommonConstants.FULL_PERCENT)
+      .onClick(() => {
+        if (this.avPlayerUtil === undefined) {
+          return;
+        }
+        this.avPlayerUtil.playerStateControl();
+      })
+      CommentInput({ shopCarButton:(): void => { this.shopCarButton() }})
+    }
+    .backgroundColor(Color.Black)
+    .width(CommonConstants.FULL_PERCENT)
+    .height(CommonConstants.FULL_PERCENT)
+    .padding({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : this.topRectHeight })
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/LiveHome.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/LiveHome.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3d4722bf0151f9dbaea11fbeeb06fec1d664d293
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/LiveHome.ets
@@ -0,0 +1,207 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { display } from '@kit.ArkUI';
+import { Callback, deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, BreakpointType, CommonConstants, Logger, ResourceUtil } from '@ohos/commons';
+import { Live } from './Live';
+import { ShopBag } from './ShopBag';
+import { LiveConstants } from '../constants/LiveConstants';
+import { PayCard } from './PayCard';
+import { ProductUtilView } from './ProductUtilView';
+import { ProductInfo, ProductPicture } from './ProductDetail';
+
+@Component
+export struct LiveHome {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+  @State isMoreDetail: boolean = false;
+  @State detailType: string = CommonConstants.BIND_SHEET_PAGE_TYPES[0];
+  @State isBindSheetOpen: boolean = false;
+  @State utilMoreDetail: boolean = true;
+  @State utilShoppingBag: boolean = false;
+  @State utilCustomerService: boolean = false;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+  private context: Context = this.getUIContext().getHostContext()!
+  private onFoldStatusChange: Callback<display.FoldStatus> = (data: display.FoldStatus) => {
+    if (canIUse('SystemCapability.Window.SessionManager')) {
+      if (data === display.FoldStatus.FOLD_STATUS_FOLDED &&
+        this.detailType === CommonConstants.BIND_SHEET_PAGE_TYPES[2]) {
+        this.isMoreDetail = false;
+      }
+    }
+  };
+
+  aboutToAppear(): void {
+    if (canIUse('SystemCapability.Window.SessionManager')) {
+      try {
+        display.on('foldStatusChange', this.onFoldStatusChange);
+      } catch (exception) {
+        Logger.error('Failed to register the fold status callback. Code: ' + JSON.stringify(exception));
+      }
+    }
+  }
+
+  aboutToDisappear(): void {
+    if (canIUse('SystemCapability.Window.SessionManager')) {
+      try {
+        display.off('foldStatusChange');
+      } catch (exception) {
+        Logger.error('Failed to unregister the fold status callback. Code: ' + JSON.stringify(exception));
+      }
+    }
+  }
+
+  @Builder
+  ShopBagBuilder() {
+    Column() {
+      ShopBag({
+        isMoreDetail: $isMoreDetail,
+        PayCardButton: (): void => {
+          this.PayCardButton()
+        }
+      })
+        .visibility(this.detailType === CommonConstants.BIND_SHEET_PAGE_TYPES[0] ? Visibility.Visible : Visibility.None)
+
+      PayCard({
+        isOpen: $isBindSheetOpen,
+        detailType: $detailType,
+        currentBreakpoint: this.currentBreakpoint
+      })
+        .visibility(this.detailType === CommonConstants.BIND_SHEET_PAGE_TYPES[1] ? Visibility.Visible : Visibility.None)
+    }
+    .padding({
+      top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? (this.detailType ===
+      CommonConstants.BIND_SHEET_PAGE_TYPES[0] ? $r('app.float.index_col_padding_top_1') :
+      $r('app.float.index_col_padding_top_2')) : 0
+    })
+    .width(CommonConstants.FULL_PERCENT)
+    .height(CommonConstants.FULL_PERCENT)
+  }
+
+  @Builder
+  shopCarButton() {
+    Image($r('app.media.icon_cart'))
+      .width(ResourceUtil.getCommonImgSize()[10])
+      .height(ResourceUtil.getCommonImgSize()[10])
+      .onClick(() => {
+        this.isMoreDetail = true;
+        this.detailType = CommonConstants.BIND_SHEET_PAGE_TYPES[0];
+      })
+      .bindSheet((this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM && this.isMoreDetail),
+        this.ShopBagBuilder(), {
+          detents: [$r('app.float.index_bind_detents'), LiveConstants.NINETY_PERCENT],
+          onDisappear: () => {
+            this.isMoreDetail = false
+          },
+          showClose: false,
+          backgroundColor: ResourceUtil.getCommonBackgroundColor()[0],
+          dragBar: false
+        })
+  }
+
+  @Builder
+  PayCardButton() {
+    Text(LiveConstants.PAY_BUTTON_TEXT(this.context))
+      .width($r('app.float.pay_button_width'))
+      .height($r('app.float.live_pay_button_height'))
+      .fontColor(Color.White)
+      .border({ radius: ResourceUtil.getCommonBorderRadius()[5] })
+      .fontSize($r('app.float.pay_button_font'))
+      .backgroundColor($r('app.color.pay_button_color'))
+      .textAlign(TextAlign.Center)
+      .displayPriority(3)
+      .onClick(() => {
+        this.detailType = CommonConstants.BIND_SHEET_PAGE_TYPES[1];
+      })
+  }
+
+  build() {
+    NavDestination() {
+      Row() {
+        Column() {
+          Live({
+            shopCarButton: (): void => {
+              this.shopCarButton()
+            },
+            currentBreakpoint: this.isMoreDetail ? new BreakpointType(BreakpointConstants.BREAKPOINT_SM,
+              BreakpointConstants.BREAKPOINT_SM, BreakpointConstants.BREAKPOINT_MD).getValue(this.currentBreakpoint) :
+            this.currentBreakpoint,
+            detailType: $detailType,
+            isMoreDetail: $isMoreDetail
+          })
+        }
+        .layoutWeight(5)
+
+        Column() {
+          ShopBag({
+            isMoreDetail: $isMoreDetail,
+            PayCardButton: (): void => {
+              this.PayCardButton()
+            }
+          })
+            .visibility(this.detailType === CommonConstants.BIND_SHEET_PAGE_TYPES[0] ? Visibility.Visible :
+              Visibility.None)
+
+          PayCard({
+            isOpen: $isBindSheetOpen,
+            detailType: $detailType,
+            currentBreakpoint: this.currentBreakpoint
+          })
+            .visibility(this.detailType === CommonConstants.BIND_SHEET_PAGE_TYPES[1] ? Visibility.Visible :
+              Visibility.None)
+
+          Column() {
+            Scroll() {
+              Column() {
+                ProductPicture({ pageBreakpoint: BreakpointConstants.BREAKPOINT_SM, isMoreLiveDetail: $isMoreDetail })
+                ProductInfo({ pageBreakpoint: BreakpointConstants.BREAKPOINT_SM })
+              }
+              .padding({
+                bottom: deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[0] ?
+                CommonConstants.BOTTOM_RECT_HEIGHT : 0
+              })
+            }
+            .scrollBar(BarState.Off)
+            .layoutWeight(1)
+            .width(CommonConstants.FULL_PERCENT)
+            .visibility(this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_SM && this.detailType ===
+              CommonConstants.BIND_SHEET_PAGE_TYPES[2] ? Visibility.Visible : Visibility.None)
+
+            ProductUtilView({
+              isMoreDetail: $utilMoreDetail,
+              isShoppingBag: $utilShoppingBag,
+              isCustomerService:
+              $utilCustomerService,
+              isLivePage: true
+            })
+          }
+          .height(CommonConstants.FULL_PERCENT)
+          .width(CommonConstants.FULL_PERCENT)
+        }
+        .visibility(this.isMoreDetail && this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_SM ?
+          Visibility.Visible : Visibility.None)
+        .backgroundColor(ResourceUtil.getCommonBackgroundColor()[0])
+        .height(CommonConstants.FULL_PERCENT)
+        .layoutWeight(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? 3 : 5)
+        .padding({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : this.topRectHeight })
+      }
+      .height(CommonConstants.FULL_PERCENT)
+      .width(CommonConstants.FULL_PERCENT)
+    }
+    .hideTitleBar(true)
+    .expandSafeArea([SafeAreaType.KEYBOARD])
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/LiveMaskLayer.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/LiveMaskLayer.ets
new file mode 100644
index 0000000000000000000000000000000000000000..538809dc47bfc78cc84da10a02891508dd20381d
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/LiveMaskLayer.ets
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { Comment } from './Comment';
+import { LiveShopList } from './LiveShopList';
+import { LiveViewModel, LiveProduct } from '../viewmodel/LiveViewModel';
+
+@Component
+export struct LiveMaskLayer {
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+  @Prop currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @State currentProductIndex: number = 0;
+  @State liveProductList: LiveProduct[] = new LiveViewModel().getProductList().reverse();
+  @Link detailType: string;
+  @Link isMoreDetail: boolean;
+
+  build() {
+    // [Start change_flex_direction]
+    Flex({
+      direction: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? FlexDirection.Row :
+        FlexDirection.Column,
+      justifyContent: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? FlexAlign.SpaceBetween :
+        FlexAlign.End
+    }) {
+      Comment({ currentBreakpoint: this.currentBreakpoint })
+      LiveShopList({
+        currentBreakpoint: this.currentBreakpoint,
+        detailType: this.detailType,
+        isMoreDetail: this.isMoreDetail
+      })
+    }
+    // [End change_flex_direction]
+    .layoutWeight(1)
+    .padding({
+      left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+      right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+        $r('app.float.live_mask_padding_right_lg') : 0,
+      top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : this.topRectHeight
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/LiveShopList.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/LiveShopList.ets
new file mode 100644
index 0000000000000000000000000000000000000000..234c74044ab553d144cdd0219365344c1513807d
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/LiveShopList.ets
@@ -0,0 +1,120 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { LiveViewModel, LiveProduct } from '../viewmodel/LiveViewModel';
+import { LiveConstants } from '../constants/LiveConstants';
+
+@Component
+export struct LiveShopList {
+  @StorageLink('currentBreakpoint') realBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @State currentProductIndex: number = 0;
+  @Prop @Watch('getLiveProductList') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @State liveProductList: LiveProduct[] = new LiveViewModel().getProductList().reverse();
+  @Link detailType: string;
+  @Link isMoreDetail: boolean;
+  private scroller: Scroller = new Scroller();
+
+  aboutToAppear(): void {
+    this.getLiveProductList();
+  }
+
+  getLiveProductList(): void {
+    if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      this.liveProductList = new LiveViewModel().getProductList().reverse();
+      this.currentProductIndex = this.liveProductList.length - 1;
+    } else {
+      this.liveProductList = new LiveViewModel().getProductList();
+      this.currentProductIndex = 0;
+    }
+    this.scroller.scrollToIndex(this.currentProductIndex);
+  }
+
+  build() {
+    List({
+      space: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? LiveConstants.SHOPPING_LIST_SPACE[0] :
+      LiveConstants.SHOPPING_LIST_SPACE[1],
+      initialIndex: this.currentProductIndex,
+      scroller: this.scroller
+    }) {
+      ForEach(this.liveProductList, (item: LiveProduct, index: number) => {
+        ListItem() {
+          Row() {
+            Image(item.getImage())
+              .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.shop_list_image_size_lg') : $r('app.float.shop_list_image_size'))
+              .aspectRatio(1)
+              .borderRadius(ResourceUtil.getCommonBorderRadius()[3])
+            Column() {
+              Text(item.getName())
+                .fontSize($r('app.float.shop_list_text_font_size'))
+                .lineHeight($r('app.float.shop_list_text_line_height'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                .maxLines(1)
+                .textOverflow({ overflow: TextOverflow.Ellipsis })
+                .margin({
+                  bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.shop_list_text_margin_lg') : $r('app.float.shop_list_text_margin')
+                })
+              Text(item.getPrice())
+                .fontSize($r('app.float.shop_list_text_font_size'))
+                .lineHeight($r('app.float.shop_list_text_line_height'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                .fontColor($r('app.color.shop_price_color'))
+            }
+            .alignItems(HorizontalAlign.Start)
+            .visibility(index === this.currentProductIndex ? Visibility.Visible : Visibility.None)
+            .padding({
+              top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.shop_text_padding_top_lg') : $r('app.float.shop_text_padding_top'),
+              bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.shop_text_padding_bottom_lg') : $r('app.float.shop_text_padding_bottom'),
+              left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.shop_text_padding_left_lg') : 0
+            })
+            .layoutWeight(1)
+            .height(CommonConstants.FULL_PERCENT)
+          }
+          .borderRadius(ResourceUtil.getCommonBorderRadius()[3])
+          .backgroundColor(Color.White)
+          .width(index === this.currentProductIndex ? (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+            $r('app.float.shop_width_index0_lg') : $r('app.float.shop_width_index0')) :
+            (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.shop_width_lg') :
+            $r('app.float.shop_width')))
+          .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.shop_width_lg') :
+            $r('app.float.shop_width'))
+          .onClick(() => {
+            if (this.realBreakpoint !== BreakpointConstants.BREAKPOINT_SM) {
+              this.isMoreDetail = true;
+              this.detailType = CommonConstants.BIND_SHEET_PAGE_TYPES[2];
+            }
+          })
+        }
+      }, (item: LiveProduct, index: number) => index + JSON.stringify(item))
+    }
+    .edgeEffect(EdgeEffect.Fade)
+    .alignListItem(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? ListItemAlign.End :
+      ListItemAlign.Start)
+    .scrollBar(BarState.Off)
+    .height(this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? $r('app.float.shop_width') :
+      CommonConstants.FULL_PERCENT)
+    .width(this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? CommonConstants.FULL_PERCENT :
+      $r('app.float.shop_width_index0_lg'))
+    // [Start set_list_direction]
+    .listDirection(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Axis.Vertical :
+      Axis.Horizontal)
+    // [End set_list_direction]
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/LiverHeader.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/LiverHeader.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2cc426f123adcca0b36e5c95dbb713aa8cc304f1
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/LiverHeader.ets
@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, CommonConstants, PipWindowUtil,ResourceUtil } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+
+@Component
+export struct LiverHeader {
+  @Prop currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+  @Builder liveCloseBuilder() {};
+  @BuilderParam liveCloseButton: () => void = this.liveCloseBuilder;
+  private pipWindowUtil: PipWindowUtil | undefined = PipWindowUtil.getPipWindowUtil();
+
+  build() {
+    Row() {
+      Row() {
+        Image($r('app.media.live_vmall'))
+          .width($r('app.float.live_store_map_size'))
+          .aspectRatio(1)
+          .margin({ right: $r('app.float.live_store_map_margin') })
+        Column() {
+          Text($r('app.string.store_name'))
+            .fontSize($r('app.float.store_name_font_size'))
+            .fontColor(Color.White)
+          Text($r('app.string.number_of_viewers'))
+            .fontSize($r('app.float.number_of_viewers_font_size'))
+            .fontColor(Color.White)
+        }
+        .alignItems(HorizontalAlign.Start)
+        .margin({ right: $r('app.float.store_margin_right') })
+      }
+      .height($r('app.float.store_height'))
+      .backgroundColor($r('app.color.store_background_color'))
+      .border({ radius: $r('app.float.store_border_radius') })
+
+      Image($r('app.media.icon_close_3'))
+        .width(ResourceUtil.getCommonImgSize()[0])
+        .height(ResourceUtil.getCommonImgSize()[0])
+        .onClick(() => {
+          if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[0]) {
+            if (this.pipWindowUtil === undefined) {
+              return;
+            }
+            this.pipWindowUtil.startPip(DetailConstants.NAVIGATION_ID, this.pipWindowUtil.getXComponentController(),
+              this.getUIContext().getHostContext()!, this.pageInfos);
+          } else {
+            this.pageInfos.pop();
+          }
+        })
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .height($r('app.float.store_height'))
+    .padding({
+      left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+      right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+    })
+    .margin({ top: $r('app.float.store_margin_top') })
+    .justifyContent(FlexAlign.SpaceBetween)
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/PayCard.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/PayCard.ets
new file mode 100644
index 0000000000000000000000000000000000000000..407c5485984c50e633190eb3acf25297813e977f
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/PayCard.ets
@@ -0,0 +1,218 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+import { PayCardViewModel, SelectProjectItem, SelectItem } from '../viewmodel/PayCardViewModel';
+
+@Component
+export struct PayCard {
+  @StorageLink('currentBreakpoint') realBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @Prop currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @Link isOpen: boolean;
+  @Link detailType: string;
+  private context: Context = this.getUIContext().getHostContext()!
+  private payCardSelectList: SelectProjectItem[] = new PayCardViewModel(this.context).getPayCardSelectList();
+  public dialogController?: CustomDialogController;
+
+  build() {
+    Column(){
+      Scroll(){
+        Column() {
+          Row() {
+            Image($r('app.media.pay_main_shop'))
+              .height(ResourceUtil.getCommonImgSize()[4])
+              .width(ResourceUtil.getCommonImgSize()[4])
+              .margin({ right: $r('app.float.pay_card_product_margin') })
+            Text(DetailConstants.CUSTOMER_SERVICE_CONTENTS(this.context)[1])
+              .fontColor($r('app.color.service_font_color'))
+              .fontSize($r('app.float.pay_card_price_font'))
+            Blank()
+            Image($r('app.media.icon_close_1'))
+              .width(ResourceUtil.getCommonImgSize()[0])
+              .height(ResourceUtil.getCommonImgSize()[0])
+              .onClick(() => {
+                if (this.detailType === CommonConstants.BIND_SHEET_PAGE_TYPES[3]) {
+                  if (this.dialogController !== undefined) {
+                    this.dialogController.close();
+                  }
+                } else {
+                  this.detailType = CommonConstants.BIND_SHEET_PAGE_TYPES[0];
+                }
+              })
+              .alignSelf(ItemAlign.Start)
+              .margin({ top: $r('app.float.pay_card_icon_margin') })
+              .visibility(this.realBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.None :
+                Visibility.Visible)
+            Image($r('app.media.icon_close_2'))
+              .width(ResourceUtil.getCommonImgSize()[5])
+              .height(ResourceUtil.getCommonImgSize()[5])
+              .onClick(() => {
+                if (this.detailType === CommonConstants.BIND_SHEET_PAGE_TYPES[3]) {
+                  this.isOpen = false;
+                } else {
+                  this.detailType = CommonConstants.BIND_SHEET_PAGE_TYPES[0];
+                }
+              })
+              .alignSelf(ItemAlign.Start)
+              .margin({ top: $r('app.float.pay_card_icon_margin') })
+              .visibility(this.realBreakpoint !== BreakpointConstants.BREAKPOINT_SM ? Visibility.None :
+                Visibility.Visible)
+          }
+          .width(CommonConstants.FULL_PERCENT)
+          .margin({ bottom: $r('app.float.pay_card_top_margin') })
+
+          Row() {
+            Image($r('app.media.icon_position'))
+              .height(ResourceUtil.getCommonImgSize()[5])
+              .width(ResourceUtil.getCommonImgSize()[5])
+              .margin({ right: $r('app.float.pay_position_margin') })
+            Column() {
+              Text(DetailConstants.PAY_INFO(this.context)[0])
+                .fontSize($r('app.float.pay_address_font'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                .width(CommonConstants.FULL_PERCENT)
+                .maxLines(1)
+                .textOverflow({ overflow: TextOverflow.Ellipsis })
+                .margin({ bottom: $r('app.float.pay_address_margin') })
+              Text(DetailConstants.PAY_INFO(this.context)[1])
+                .fontSize($r('app.float.pay_contact_font'))
+                .fontColor($r('app.color.pay_contact_color'))
+                .width(CommonConstants.FULL_PERCENT)
+                .maxLines(1)
+            }
+            .layoutWeight(1)
+            .alignItems(HorizontalAlign.Start)
+          }
+          .margin({ bottom: $r('app.float.pay_info_margin') })
+          .width(CommonConstants.FULL_PERCENT)
+          .backgroundColor(Color.White)
+          .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+          .padding({
+            top: $r('app.float.pay_info_padding_top_bottom'),
+            bottom: $r('app.float.pay_info_padding_top_bottom'),
+            left: $r('app.float.pay_info_padding_left_right'),
+            right: $r('app.float.pay_info_padding_left_right')
+          })
+
+          Column() {
+            ForEach(this.payCardSelectList, (item: SelectProjectItem, index: number) => {
+              Column() {
+                Text(item.getName())
+                  .fontSize($r('app.float.pay_config_title_font'))
+                  .alignSelf(ItemAlign.Start)
+                  .margin({ bottom: $r('app.float.pay_config_title_margin') })
+                  .lineHeight($r('app.float.pay_config_title_line'))
+                  .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                Flex({
+                  wrap: FlexWrap.Wrap,
+                  justifyContent: FlexAlign.Start
+                }) {
+                  ForEach(item.getSelectItemList(), (selectItem: SelectItem, selectIndex: number) => {
+                    Row() {
+                      Image(selectItem.getImage())
+                        .height(ResourceUtil.getCommonImgSize()[1])
+                        .width(ResourceUtil.getCommonImgSize()[1])
+                        .visibility(selectItem.getImage() === null ? Visibility.None : Visibility.Visible)
+                      Text(selectItem.getName())
+                        .fontColor(selectIndex === 0 ? $r('app.color.service_font_color') : Color.Black)
+                        .fontSize($r('app.float.pay_config_name_font'))
+                        .textAlign(TextAlign.Center)
+                        .margin({
+                          left: $r('app.float.pay_config_name_margin'),
+                          right: $r('app.float.pay_config_name_margin')
+                        })
+                    }
+                    .backgroundColor(selectIndex === 0 ? $r('app.color.pay_config_background_selected') :
+                      ResourceUtil.getCommonBackgroundColor()[2])
+                    .border({
+                      color: selectIndex === 0 ? $r('app.color.service_font_color') :
+                        ResourceUtil.getCommonBackgroundColor()[2],
+                      width: index === 0 ? $r('app.float.pay_config_border_width') : 0,
+                      radius: ResourceUtil.getCommonBorderRadius()[3]
+                    })
+                    .height($r('app.float.pay_config_height'))
+                    .margin({
+                      right: $r('app.float.pay_config_margin'),
+                      bottom: $r('app.float.pay_config_margin')
+                    })
+                  }, (selectItem: SelectItem, selectIndex: number) => JSON.stringify(selectItem) + selectIndex)
+                }
+                .width(CommonConstants.FULL_PERCENT)
+              }
+              .margin({ top: $r('app.float.pay_config_col_margin_top') })
+              .width(CommonConstants.FULL_PERCENT)
+            }, (item: SelectProjectItem, index: number) => JSON.stringify(item) + index)
+          }
+          .width(CommonConstants.FULL_PERCENT)
+          .margin({ bottom: $r('app.float.pay_config_col_margin_bottom') })
+          .backgroundColor(Color.White)
+          .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+          .padding({
+            left: $r('app.float.pay_config_col_padding'),
+            right: $r('app.float.pay_config_col_padding')
+          })
+
+          Row() {
+            Image($r('app.media.icon_pay'))
+              .height(ResourceUtil.getCommonImgSize()[5])
+              .width(ResourceUtil.getCommonImgSize()[5])
+              .margin({ right: $r('app.float.pay_wallet_icon_margin') })
+            Text(DetailConstants.PAY_INFO(this.context)[2])
+              .fontSize($r('app.float.pay_wallet_font'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            Blank()
+            Checkbox()
+              .selectedColor($r('app.color.util_button_2'))
+              .shape(CheckBoxShape.CIRCLE)
+              .width($r('app.float.checkbox_width'))
+          }
+          .padding({
+            top: $r('app.float.wallet_row_padding_1'),
+            left: $r('app.float.wallet_row_padding_2'),
+            bottom: $r('app.float.wallet_row_padding_1'),
+            right: $r('app.float.wallet_row_padding_2')
+          })
+          .margin({ bottom: $r('app.float.wallet_row_margin') })
+          .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+          .backgroundColor(Color.White)
+          .width(CommonConstants.FULL_PERCENT)
+        }
+        .width(CommonConstants.FULL_PERCENT)
+      }
+      .scrollBar(BarState.Off)
+      .layoutWeight(1)
+      .align(Alignment.Top)
+      .width(CommonConstants.FULL_PERCENT)
+
+      Button(DetailConstants.PAY_INFO(this.context)[3])
+        .width(CommonConstants.FULL_PERCENT)
+        .backgroundColor($r('app.color.util_button_2'))
+        .height($r('app.float.pay_button_height'))
+        .margin({
+          top: $r('app.float.pay_button_margin_top'),
+          bottom: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? $r('app.float.pay_button_margin_bottom') :
+            CommonConstants.BOTTOM_RECT_HEIGHT
+        })
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .height(CommonConstants.FULL_PERCENT)
+    .padding({
+      left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+      right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint)
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductConfig.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductConfig.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b777656ff4068f445af680bc5a8956def055d4b7
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductConfig.ets
@@ -0,0 +1,285 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, BreakpointType, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+import { CommentContentExtra, CommentsContent, CommentsTitle, ConfigTipIcon, ConfigTipText, ProductsConfigText,
+  RightArrow, UserCommentInfo } from './CommonView';
+
+@Component
+export struct ProductConfig {
+  @Prop pageBreakpoint: string;
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Column() {
+      Column() {
+        Row() {
+          ProductsConfigText({ configText: DetailConstants.PRODUCT_CONFIG_NAMES(this.context)[0] })
+            .margin({ right: $r('app.float.products_config_margin_12') })
+          Column() {
+            Row() {
+              ProductsConfigText({ configText: DetailConstants.PRODUCT_CONFIG_NAMES(this.context)[1] })
+              Blank()
+              RightArrow()
+            }
+            .width(CommonConstants.FULL_PERCENT)
+            .margin({ bottom: $r('app.float.products_config_margin_8') })
+
+            List({ space: DetailConstants.PRODUCT_CONFIG_LIST_SPACE }) {
+              ForEach(DetailConstants.PRODUCT_COLOR_SELECTION, (item: Resource) => {
+                ListItem() {
+                  Image(item)
+                    .width(ResourceUtil.getCommonImgSize()[2])
+                    .height(ResourceUtil.getCommonImgSize()[2])
+                }
+              }, (item: Resource, index: number) => JSON.stringify(item) + index)
+            }
+            .listDirection(Axis.Horizontal)
+            .width(CommonConstants.FULL_PERCENT)
+            .margin({ bottom: $r('app.float.products_config_margin_8') })
+
+            Divider()
+              .width(CommonConstants.FULL_PERCENT)
+              .strokeWidth(1)
+              .color($r('app.color.divider_color'))
+          }
+          .layoutWeight(1)
+        }
+        .alignItems(VerticalAlign.Top)
+        .margin({ bottom: $r('app.float.products_config_margin_12') })
+
+        Row() {
+          Column() {
+            ProductsConfigText({ configText: DetailConstants.PRODUCT_CONFIG_NAMES(this.context)[2] })
+            ProductsConfigText({ configText: DetailConstants.PRODUCT_CONFIG_NAMES(this.context)[3] })
+          }
+          .width($r('app.float.config_text_col_width'))
+          .height($r('app.float.config_text_col_height'))
+          .margin({ right: $r('app.float.products_config_margin_12') })
+
+          Column() {
+            Row() {
+              List({ space: DetailConstants.PRODUCT_CONFIG_LIST_SPACE }) {
+                ForEach(DetailConstants.RECOMMENDED_CONFIG_PRODUCTS, (item: Resource) => {
+                  ListItem() {
+                    Image(item)
+                      .width(ResourceUtil.getCommonImgSize()[2])
+                      .height(ResourceUtil.getCommonImgSize()[2])
+                  }
+                }, (item: Resource, index: number) => JSON.stringify(item) + index)
+              }
+              .scrollBar(BarState.Off)
+              .listDirection(Axis.Horizontal)
+              .layoutWeight(1)
+              .margin({ bottom: $r('app.float.products_config_margin_8') })
+
+              RightArrow()
+            }
+            .width(CommonConstants.FULL_PERCENT)
+
+            Divider()
+              .width(CommonConstants.FULL_PERCENT)
+              .strokeWidth(1)
+              .color($r('app.color.divider_color'))
+          }
+          .layoutWeight(1)
+        }
+        .alignItems(VerticalAlign.Top)
+        .margin({ bottom: $r('app.float.products_config_margin_12') })
+
+        Row() {
+          ProductsConfigText({ configText: DetailConstants.PRODUCT_CONFIG_NAMES(this.context)[4] })
+            .margin({ right: $r('app.float.products_config_margin_12') })
+          ProductsConfigText({ configText: DetailConstants.PRODUCT_CONFIG_NAMES(this.context)[5] })
+          Blank()
+          RightArrow()
+        }
+        .width(CommonConstants.FULL_PERCENT)
+        .margin({ bottom: $r('app.float.products_config_margin_12') })
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .padding({
+        left: $r('app.float.products_padding_sm'),
+        right: $r('app.float.products_padding_sm')
+      })
+
+      Scroll() {
+        Row() {
+          ConfigTipIcon()
+          ConfigTipText({ tipText: DetailConstants.PRODUCT_CONFIG_NAMES(this.context)[6] })
+            .margin({ right: $r('app.float.products_config_margin_12') })
+          ConfigTipIcon()
+          ConfigTipText({ tipText: DetailConstants.PRODUCT_CONFIG_NAMES(this.context)[7] })
+            .layoutWeight(1)
+        }
+        .height(CommonConstants.FULL_PERCENT)
+        .width(CommonConstants.FULL_PERCENT)
+      }
+      .align(Alignment.Start)
+      .scrollBar(BarState.Off)
+      .scrollable(ScrollDirection.Horizontal)
+      .width(CommonConstants.FULL_PERCENT)
+      .backgroundColor($r('app.color.config_tip_background'))
+      .height($r('app.float.config_tip_row_height'))
+      .padding({
+        left: $r('app.float.products_padding_sm'),
+        right: $r('app.float.products_padding_sm')
+      })
+    }
+    .alignItems(HorizontalAlign.Start)
+    .backgroundColor(Color.White)
+    .width(CommonConstants.FULL_PERCENT)
+    .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+    .padding({ top: $r('app.float.products_config_margin_12') })
+    .margin({ bottom: new BreakpointType($r('app.float.products_padding_sm'), $r('app.float.products_padding_md'),
+      $r('app.float.products_padding_lg')).getValue(this.pageBreakpoint) })
+  }
+}
+
+@Component
+export struct UserComments {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('isShowingSidebar') isShowingSidebar: boolean = false;
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Column() {
+      Row() {
+        CommentsTitle()
+          .layoutWeight(1)
+        Blank()
+        Text(DetailConstants.USER_COMMENT_NAMES(this.context)[6])
+          .fontSize($r('app.float.all_comments_font'))
+          .lineHeight($r('app.float.all_comments_line'))
+          .fontWeight(FontWeight.Normal)
+          .opacity(CommonConstants.TEXT_OPACITY[2])
+          .margin({ right: $r('app.float.all_comments_margin') })
+          .onClick(() => {
+            if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+              this.isShowingSidebar = true;
+            }
+          })
+          .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible :
+            Visibility.None)
+        RightArrow()
+          .displayPriority(1)
+          .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible :
+            Visibility.None)
+      }
+      .height($r('app.float.user_comments_title_line'))
+      .width(CommonConstants.FULL_PERCENT)
+      .margin({ bottom: $r('app.float.comments_title_margin') })
+
+      Scroll() {
+        Row() {
+          CommentsTag({ tagText: DetailConstants.USER_COMMENT_NAMES(this.context)[1] })
+          CommentsTag({ tagText: DetailConstants.USER_COMMENT_NAMES(this.context)[2] })
+          CommentsTag({ tagText: DetailConstants.USER_COMMENT_NAMES(this.context)[3] })
+        }
+      }
+      .align(Alignment.Start)
+      .width(CommonConstants.FULL_PERCENT)
+      .scrollable(ScrollDirection.Horizontal)
+      .scrollBar(BarState.Off)
+
+      Column() {
+        UserCommentInfo()
+        CommentsContent()
+      }
+      .alignItems(HorizontalAlign.Start)
+    }
+    .backgroundColor(Color.White)
+    .alignItems(HorizontalAlign.Start)
+    .width(CommonConstants.FULL_PERCENT)
+    .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+    .padding($r('app.float.user_comments_col_padding'))
+  }
+}
+
+@Component
+export struct AllComments {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Scroll() {
+      Column() {
+        CommentsTitle()
+
+        Scroll() {
+          Row() {
+            CommentsTag({ tagText: DetailConstants.USER_COMMENT_NAMES(this.context)[1] })
+            CommentsTag({ tagText: DetailConstants.USER_COMMENT_NAMES(this.context)[2] })
+            CommentsTag({ tagText: DetailConstants.USER_COMMENT_NAMES(this.context)[3] })
+          }
+        }
+        .align(Alignment.Start)
+        .scrollable(ScrollDirection.Horizontal)
+        .scrollBar(BarState.Off)
+        .width(CommonConstants.FULL_PERCENT)
+        .margin({ top: $r('app.float.comments_title_margin') })
+
+        Column() {
+          ForEach(DetailConstants.COMMENTS_LIST, (item: number) => {
+            UserCommentInfo()
+            CommentsContent()
+            CommentContentExtra()
+            if (item < CommonConstants.TWO) {
+              Divider()
+                .width(CommonConstants.FULL_PERCENT)
+                .strokeWidth(1)
+                .color($r('app.color.divider_color'))
+                .margin({ top: $r('app.float.comments_title_margin') })
+            }
+          }, (item: number, index: number) => index + JSON.stringify(item))
+        }
+        .alignItems(HorizontalAlign.Start)
+      }
+      .backgroundColor(Color.White)
+      .alignItems(HorizontalAlign.Start)
+      .width(CommonConstants.FULL_PERCENT)
+      .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+      .padding($r('app.float.user_comments_col_padding'))
+      .margin({ bottom: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 :
+        CommonConstants.BOTTOM_RECT_HEIGHT })
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .layoutWeight(1)
+    .scrollBar(BarState.Off)
+  }
+}
+
+@Component
+struct CommentsTag {
+  public tagText: string = '';
+
+  build() {
+    Row() {
+      Text(this.tagText)
+        .fontSize($r('app.float.tag_font'))
+        .fontWeight(FontWeight.Normal)
+    }
+    .margin({ right: $r('app.float.tag_margin') })
+    .padding({
+      left: $r('app.float.tag_padding'),
+      right: $r('app.float.tag_padding')
+    })
+    .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+    .height($r('app.float.tag_row_height'))
+    .backgroundColor($r('app.color.user_comments_tag_background'))
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductDetail.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductDetail.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3134644024dac98bc83e9b3a413d233d2c87c8cd
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductDetail.ets
@@ -0,0 +1,272 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BusinessError, deviceInfo } from '@kit.BasicServicesKit';
+import { AbilityConstant, common, StartOptions, Want } from '@kit.AbilityKit';
+import { ClassifyConstants } from '@ohos/home';
+import { BreakpointConstants, BreakpointType, CommonConstants, Logger, PipWindowUtil, ResourceUtil } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+import { ProductPrice } from './ProductPrice';
+import { ProductDiscount } from './ProductDiscount';
+import { ProductConfig, UserComments } from './ProductConfig';
+
+@Component
+export struct ProductPicture {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+  @StorageLink('isSplitMode') isSplitMode: boolean = false;
+  @State currentSwiperIndex: number = 0;
+  @Prop pageBreakpoint: string;
+  @Link isMoreLiveDetail: boolean;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+  private context: Context = this.getUIContext().getHostContext()!
+  private pipWindowUtil: PipWindowUtil | undefined = PipWindowUtil.getPipWindowUtil();
+  private abilityName: string = (this.context as common.UIAbilityContext).abilityInfo.name;
+
+  @Builder
+  PictureIndicator(text: string) {
+    Text(text)
+      .fontSize($r('app.float.picture_indicator_font'))
+      .fontWeight(FontWeight.Normal)
+      .margin({ right: $r('app.float.picture_indicator_margin') })
+  }
+
+  build() {
+    Column() {
+      Stack({ alignContent: this.pageBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Alignment.TopEnd :
+        Alignment.End }) {
+        Swiper() {
+          ForEach(DetailConstants.PRODUCT_DETAIL_RESOURCES, (item: Resource) => {
+            Image(item)
+              .width(CommonConstants.FULL_PERCENT)
+          }, (item: Resource, index: number) => index + JSON.stringify(item))
+        }
+        .align(Alignment.Center)
+        .indicator(false)
+        .displayCount(1)
+        .nextMargin(this.pageBreakpoint === BreakpointConstants.BREAKPOINT_MD ? $r('app.float.product_swiper_margin') :
+          0)
+        .prevMargin(this.pageBreakpoint === BreakpointConstants.BREAKPOINT_MD ? $r('app.float.product_swiper_margin') :
+          0)
+        .height(CommonConstants.FULL_PERCENT)
+        .width(CommonConstants.FULL_PERCENT)
+        .onChange((index: number) => {
+          this.currentSwiperIndex = index;
+        })
+
+        Row() {
+          Image($r('app.media.ic_back'))
+            .height(ResourceUtil.getCommonImgSize()[1])
+            .width(ResourceUtil.getCommonImgSize()[1])
+            .margin({ right: $r('app.float.picture_icon_margin') })
+            .onClick(() => {
+              if (this.isMoreLiveDetail) {
+                this.isMoreLiveDetail = false;
+              } else {
+                this.pageInfos.pop();
+              }
+            })
+          Image($r('app.media.ic_zoom_out'))
+            .height(ResourceUtil.getCommonImgSize()[1])
+            .width(ResourceUtil.getCommonImgSize()[1])
+            .visibility(this.pageBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible :
+              Visibility.None)
+          Blank()
+          // [Start product_detail]
+          Image(this.isSplitMode ? $r('app.media.icon_split') : $r('app.media.ic_mate_pad_2'))
+            // [StartExclude product_detail]
+            .height(ResourceUtil.getCommonImgSize()[1])
+            .width(ResourceUtil.getCommonImgSize()[1])
+            .margin({ right: this.pageBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              $r('app.float.picture_icon_margin_sm') : $r('app.float.picture_icon_margin') })
+              // [EndExclude product_detail]
+            .onClick(() => {
+              if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0]) {
+                return;
+              }
+              if (!this.isSplitMode) {
+                let want: Want = {
+                  bundleName: 'com.huawei.multishoppingpricecomparison',
+                  abilityName: 'SecondAbility'
+                };
+                let option: StartOptions = { windowMode: AbilityConstant.WindowMode.WINDOW_MODE_SPLIT_PRIMARY };
+                (this.context as common.UIAbilityContext).startAbility(want, option);
+              } else {
+                (this.context as common.UIAbilityContext).terminateSelf();
+              }
+            })
+              // [End product_detail]
+            .visibility(this.pageBreakpoint === BreakpointConstants.BREAKPOINT_MD || this.isSplitMode ?
+              Visibility.Visible : Visibility.None)
+          Image($r('app.media.ic_more'))
+            .height(ResourceUtil.getCommonImgSize()[1])
+            .width(ResourceUtil.getCommonImgSize()[1])
+            .visibility(this.pageBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.None :
+              Visibility.Visible)
+        }
+        .width(CommonConstants.FULL_PERCENT)
+        .position({ x: 0, y: DetailConstants.LIVE_ROW_Y_POSITION })
+        .padding({
+          left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+          right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint)
+        })
+
+        Column() {
+          Image($r('app.media.ic_public_living'))
+            .width(ResourceUtil.getCommonImgSize()[0])
+            .height(ResourceUtil.getCommonImgSize()[0])
+            .borderRadius(ResourceUtil.getCommonBorderRadius()[4])
+          Text(DetailConstants.LIVING(this.context))
+            .fontSize($r('app.float.picture_live_font'))
+            .lineHeight($r('app.float.picture_live_line'))
+            .fontWeight(FontWeight.Normal)
+        }
+        .onClick(() => {
+          if (this.isMoreLiveDetail) {
+            return;
+          }
+          if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[0]) {
+            if (this.pipWindowUtil === undefined) {
+              return;
+            }
+            if (this.pipWindowUtil.getIsShowingPip()) {
+              this.pipWindowUtil.stopPip().then(() => {
+                this.pageInfos.pushPath({ name: ClassifyConstants.PAGE_INFO_LIST[0] });
+              }).catch((err: BusinessError) => {
+                Logger.error(`Failed to stop pip. Cause: ${err.code}, message: ${err.message}`);
+              });
+            } else {
+              this.pageInfos.pushPath({ name: ClassifyConstants.PAGE_INFO_LIST[0] });
+            }
+          } else {
+            this.pageInfos.pushPath({ name: ClassifyConstants.PAGE_INFO_LIST[0] });
+          }
+        })
+        .margin({
+          top: this.pageBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.picture_live_col_margin_lg') :
+            0,
+          right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint)
+        })
+        .borderWidth(1)
+        .borderRadius(ResourceUtil.getCommonBorderRadius()[3])
+        .borderColor($r('app.color.living_border_color'))
+        .backgroundColor($r('app.color.living_background'))
+        .justifyContent(FlexAlign.SpaceEvenly)
+        .height($r('app.float.picture_live_col_height'))
+        .width($r('app.float.picture_live_col_width'))
+        .visibility(this.abilityName === 'SecondAbility' ? Visibility.None : Visibility.Visible)
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .layoutWeight(this.pageBreakpoint === BreakpointConstants.BREAKPOINT_LG ? 1 : -1)
+      .aspectRatio(new BreakpointType(DetailConstants.LIVE_STACK_ASPECT_RATIO[0],
+        DetailConstants.LIVE_STACK_ASPECT_RATIO[1], -1).getValue(this.pageBreakpoint))
+
+      Row() {
+        Column() {
+          Text(JSON.stringify(this.currentSwiperIndex + 1) + DetailConstants.PICTURE_INDICATOR(this.context)[0])
+            .fontSize($r('app.float.picture_number_font'))
+            .fontWeight(FontWeight.Normal)
+            .fontColor(Color.White)
+        }
+        .width($r('app.float.picture_number_row_width'))
+        .height($r('app.float.picture_number_row_height'))
+        .backgroundColor($r('app.color.swiper_indicator_background'))
+        .borderRadius(ResourceUtil.getCommonBorderRadius()[3])
+        .justifyContent(FlexAlign.Center)
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .justifyContent(FlexAlign.End)
+      .padding({ right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint) })
+
+      Row() {
+        this.PictureIndicator(DetailConstants.PICTURE_INDICATOR(this.context)[1])
+        Image(ResourceUtil.getArrowRight())
+          .width($r('app.float.picture_arrow_width'))
+          .height($r('app.float.picture_arrow_height'))
+          .margin({ right: $r('app.float.picture_arrow_margin') })
+        this.PictureIndicator(DetailConstants.PICTURE_INDICATOR(this.context)[2])
+        Image(ResourceUtil.getArrowRight())
+          .width($r('app.float.picture_arrow_width'))
+          .height($r('app.float.picture_arrow_height'))
+      }
+      .padding({
+        left: $r('app.float.picture_indicator_row_padding_left'),
+        right: $r('app.float.picture_indicator_row_padding_right')
+      })
+      .backgroundColor($r('app.color.products_compare'))
+      .width($r('app.float.picture_indicator_row_width'))
+      .height($r('app.float.picture_indicator_row_height'))
+      .borderRadius(ResourceUtil.getCommonBorderRadius()[4])
+      .margin({ top: $r('app.float.picture_indicator_row_margin') })
+
+      Row() {
+        List({ space: new BreakpointType(DetailConstants.PICTURE_LIST_SPACES[0], DetailConstants.PICTURE_LIST_SPACES[1],
+          DetailConstants.PICTURE_LIST_SPACES[2]).getValue(this.pageBreakpoint) }) {
+          ForEach(DetailConstants.PRODUCT_SMALL_RESOURCES, (item: Resource, index: number) => {
+            ListItem() {
+              Image(item)
+                .width(this.pageBreakpoint === BreakpointConstants.BREAKPOINT_LG ? ResourceUtil.getCommonImgSize()[3] :
+                  ResourceUtil.getCommonImgSize()[2])
+                .height(this.pageBreakpoint === BreakpointConstants.BREAKPOINT_LG ? ResourceUtil.getCommonImgSize()[3] :
+                  ResourceUtil.getCommonImgSize()[2])
+                .borderRadius(ResourceUtil.getCommonBorderRadius()[3])
+                .borderWidth(index === this.currentSwiperIndex ? 1 : 0)
+            }
+          }, (item: Resource, index: number) => JSON.stringify(item) + index)
+        }
+        .scrollBar(BarState.Off)
+        .listDirection(Axis.Horizontal)
+        .margin({
+          top: $r('app.float.small_picture_margin'),
+          bottom: $r('app.float.small_picture_margin')
+        })
+      }
+      .height(this.pageBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.small_picture_height_lg') :
+        $r('app.float.small_picture_height'))
+      .width(CommonConstants.FULL_PERCENT)
+      .padding({
+        left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+        right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint)
+      })
+    }
+    .backgroundColor(Color.White)
+    .alignItems(HorizontalAlign.Center)
+    .padding({
+      bottom: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[1] ? CommonConstants.BOTTOM_RECT_HEIGHT : 0
+    })
+  }
+}
+
+@Component
+export struct ProductInfo {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @Prop pageBreakpoint: string;
+
+  build() {
+    Column() {
+      ProductPrice({ pageBreakpoint: this.pageBreakpoint })
+      ProductDiscount({ pageBreakpoint: this.pageBreakpoint })
+      ProductConfig({ pageBreakpoint: this.pageBreakpoint })
+      UserComments()
+    }
+    .backgroundColor($r('app.color.products_info'))
+    .width(CommonConstants.FULL_PERCENT)
+    .padding({
+      left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+      right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+      bottom: $r('app.float.product_info_padding_bottom')
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductDiscount.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductDiscount.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e16dea90ec6f9079a9fa23657ec287b032e1cf72
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductDiscount.ets
@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointType, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+import { RightArrow } from './CommonView';
+
+@Component
+export struct ProductDiscount {
+  @Prop pageBreakpoint: string;
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Column() {
+      Text(DetailConstants.PRODUCT_DISCOUNT_NAMES(this.context)[0])
+        .fontSize($r('app.float.discount_text_font_1'))
+        .lineHeight($r('app.float.discount_text_line'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+        .margin({ bottom: $r('app.float.discount_text_margin_1') })
+      Text(DetailConstants.PRODUCT_DISCOUNT_NAMES(this.context)[1])
+        .fontSize($r('app.float.discount_text_font_2'))
+        .fontColor($r('app.color.products_info_text'))
+        .lineHeight($r('app.float.discount_text_line'))
+        .fontWeight(FontWeight.Normal)
+        .margin({ bottom: $r('app.float.discount_text_margin_2') })
+      Row() {
+        Text(DetailConstants.PRODUCT_DISCOUNT_NAMES(this.context)[2])
+          .fontSize($r('app.float.discount_text_font_2'))
+          .fontColor($r('app.color.products_info_text'))
+          .fontWeight(FontWeight.Normal)
+          .margin({ right: $r('app.float.discount_text_margin_3') })
+        Text(DetailConstants.PRODUCT_DISCOUNT_NAMES(this.context)[3])
+          .layoutWeight(1)
+          .fontSize($r('app.float.discount_text_font_2'))
+          .fontWeight(FontWeight.Normal)
+          .maxLines(1)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+        Blank()
+        RightArrow()
+      }
+      .padding({
+        left: $r('app.float.discount_row_padding'),
+        right: $r('app.float.discount_row_padding')
+      })
+      .borderRadius(ResourceUtil.getCommonBorderRadius()[5])
+      .backgroundColor($r('app.color.products_info_background_1'))
+      .width(CommonConstants.FULL_PERCENT)
+    }
+    .alignItems(HorizontalAlign.Start)
+    .backgroundColor(Color.White)
+    .width(CommonConstants.FULL_PERCENT)
+    .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+    .padding($r('app.float.discount_col_padding'))
+    .margin({ bottom: new BreakpointType($r('app.float.discount_col_margin_sm'), $r('app.float.discount_col_margin_md'),
+      $r('app.float.discount_col_margin_lg')).getValue(this.pageBreakpoint) })
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductHome.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductHome.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4b8f653c0c37a9b2d68af2cd60bbeccd5f05459e
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductHome.ets
@@ -0,0 +1,178 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { AbilityConstant, common, StartOptions, Want } from '@kit.AbilityKit';
+import { BreakpointConstants, CommonConstants, PipWindowUtil, ResourceUtil } from '@ohos/commons';
+import { ProductInfo, ProductPicture } from './ProductDetail';
+import { ProductUtilView } from './ProductUtilView';
+import { DetailTopIcon } from './CommonView';
+import { AllComments } from './ProductConfig';
+
+@Component
+export struct ProductHome {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+  @StorageLink('windowWidth') windowWidth: number = 0;
+  @StorageLink('isShowingSidebar') isShowingSidebar: boolean = false;
+  @StorageLink('isSplitMode') isSplitMode: boolean = false;
+  @State isMoreDetail: boolean = false;
+  @State isShoppingBag: boolean = false;
+  @State isCustomerService: boolean = false;
+  @State isDialogOpen: boolean = false;
+  @State detailType: string = CommonConstants.BIND_SHEET_PAGE_TYPES[3];
+  @State isLiveMoreDetail: boolean = false;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+  private pipWindowUtil: PipWindowUtil | undefined = PipWindowUtil.getPipWindowUtil();
+
+  aboutToDisappear(): void {
+    if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[0]) {
+      if (this.pipWindowUtil === undefined) {
+        return;
+      }
+      this.pipWindowUtil.stopPip();
+    }
+  }
+
+  build() {
+    NavDestination() {
+      // [Start product_side_bar_container]
+      SideBarContainer() {
+        Column() {
+          Image($r('app.media.icon_close_4'))
+            // [StartExclude product_side_bar_container]
+            .width(ResourceUtil.getCommonImgSize()[1])
+            .height(ResourceUtil.getCommonImgSize()[1])
+            .onClick(() => {
+              if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+                this.isShowingSidebar = false;
+              }
+            })
+            .margin({
+              top: $r('app.float.detail_lg_top_row_margin'),
+              bottom: $r('app.float.detail_lg_top_row_margin')
+            })
+          // [EndExclude product_side_bar_container]
+          AllComments()
+        }
+        .alignItems(HorizontalAlign.End)
+        .height(CommonConstants.FULL_PERCENT)
+        .padding({
+          top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : this.topRectHeight,
+          left: $r('app.float.three_column_page_padding'),
+          right: $r('app.float.three_column_page_padding')
+        })
+
+        Row() {
+          // [StartExclude product_side_bar_container]
+          if (this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG) {
+            Column() {
+              Scroll() {
+                Column() {
+                  ProductPicture({ pageBreakpoint: this.currentBreakpoint, isMoreLiveDetail: $isLiveMoreDetail })
+                  ProductInfo({ pageBreakpoint: this.currentBreakpoint })
+                }
+              }
+              .scrollBar(BarState.Off)
+              .layoutWeight(1)
+
+              ProductUtilView({ isMoreDetail: $isMoreDetail, isShoppingBag: $isShoppingBag, isCustomerService:
+                $isCustomerService })
+            }
+            .padding({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : this.topRectHeight })
+            .height(CommonConstants.FULL_PERCENT)
+            .layoutWeight(1)
+          } else {
+            Column() {
+              ProductPicture({ pageBreakpoint: this.currentBreakpoint, isMoreLiveDetail: $isLiveMoreDetail })
+            }
+            .padding({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : this.topRectHeight })
+            .height(CommonConstants.FULL_PERCENT)
+            .layoutWeight(1)
+          }
+
+          if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+            Column() {
+              Row() {
+                DetailTopIcon({ imageResource: $r('app.media.ic_mate_pad_2') })
+                  .margin({ right: $r('app.float.detail_top_icon_margin_sm') })
+                  .onClick(() => {
+                    if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0]) {
+                      return;
+                    }
+                    if (!this.isSplitMode) {
+                      let want: Want = {
+                        bundleName: 'com.huawei.multishoppingpricecomparison',
+                        abilityName: 'SecondAbility'
+                      };
+                      let option: StartOptions = { windowMode: AbilityConstant.WindowMode.WINDOW_MODE_SPLIT_PRIMARY };
+                      (this.getUIContext().getHostContext() as common.UIAbilityContext).startAbility(want, option);
+                    } else {
+                      (this.getUIContext().getHostContext() as common.UIAbilityContext).terminateSelf();
+                    }
+                  })
+                DetailTopIcon({ imageResource: $r('app.media.ic_more') })
+              }
+              .padding({
+                left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+                right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint)
+              })
+              .justifyContent(FlexAlign.End)
+              .width(CommonConstants.FULL_PERCENT)
+              .margin({
+                top: $r('app.float.detail_lg_top_row_margin'),
+                bottom: $r('app.float.detail_lg_top_row_margin')
+              })
+
+              Scroll() {
+                ProductInfo({ pageBreakpoint: BreakpointConstants.BREAKPOINT_LG })
+              }
+              .align(Alignment.Top)
+              .scrollBar(BarState.Off)
+              .layoutWeight(1)
+
+              ProductUtilView({ isMoreDetail: $isMoreDetail, isShoppingBag: $isShoppingBag, isCustomerService:
+                $isCustomerService })
+            }
+            .padding({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : this.topRectHeight })
+            .backgroundColor($r('app.color.products_info'))
+            .height(CommonConstants.FULL_PERCENT)
+            .layoutWeight(1)
+            .justifyContent(FlexAlign.Start)
+          }
+          // [EndExclude product_side_bar_container]
+        }
+        // [StartExclude product_side_bar_container]
+        .alignItems(VerticalAlign.Top)
+        .height(CommonConstants.FULL_PERCENT)
+        .width(CommonConstants.FULL_PERCENT)
+        .layoutWeight(2)
+        // [EndExclude product_side_bar_container]
+      }
+      .showSideBar(this.isShowingSidebar)
+      .showControlButton(false)
+      .sideBarPosition(SideBarPosition.End)
+      .divider({
+        strokeWidth: $r('app.float.sidebar_divider_width'),
+        color: ResourceUtil.getCommonDividerColor()
+      })
+      .minSideBarWidth(this.getUIContext().px2vp(this.windowWidth) / CommonConstants.THREE)
+      .maxSideBarWidth(this.getUIContext().px2vp(this.windowWidth) / CommonConstants.THREE)
+      .autoHide(false)
+      // [End product_side_bar_container]
+    }
+    .hideTitleBar(true)
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductMoreDetail.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductMoreDetail.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1d62ec56adf39388eff35a6a4ffee7af09cd5812
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductMoreDetail.ets
@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, BreakpointType, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { ClassifyConstants, DetailShoppingBagView } from '@ohos/home';
+import { CustomerServiceView } from './CustomerServiceView';
+import { ProductInfo, ProductPicture } from './ProductDetail';
+import { ProductUtilView } from './ProductUtilView';
+import { DetailConstants } from '../constants/DetailConstants';
+
+@Component
+export struct ProductMoreDetail {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+  @State isMoreDetail: boolean = true;
+  @State isShoppingBag: boolean = false;
+  @State isCustomerService: boolean = false;
+  @State isLiveMoreDetail: boolean = false;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+
+  aboutToAppear(): void {
+    let navParams: string = JSON.stringify(this.pageInfos.getParamByName(ClassifyConstants.PAGE_INFO_LIST[1]));
+    if (navParams.includes(DetailConstants.PARAM_STRING_LIST[0])) {
+      this.isShoppingBag = true;
+    }
+    if (navParams.includes(DetailConstants.PARAM_STRING_LIST[1])) {
+      this.isCustomerService = true;
+    }
+  }
+
+  aboutToDisappear(): void {
+    this.isShoppingBag = false;
+    this.isCustomerService = false;
+  }
+
+  build() {
+    NavDestination() {
+      // [Start product_more_detail_view]
+      Row() {
+        Column() {
+          // [StartExclude product_more_detail_view]
+          Scroll() {
+            Column() {
+              ProductPicture({
+                pageBreakpoint: new BreakpointType(BreakpointConstants.BREAKPOINT_SM, BreakpointConstants.BREAKPOINT_SM,
+                  BreakpointConstants.BREAKPOINT_MD).getValue(this.currentBreakpoint),
+                isMoreLiveDetail: $isLiveMoreDetail
+              })
+              ProductInfo({
+                pageBreakpoint: new BreakpointType(BreakpointConstants.BREAKPOINT_SM,
+                  BreakpointConstants.BREAKPOINT_SM, BreakpointConstants.BREAKPOINT_MD).getValue(this.currentBreakpoint)
+              })
+            }
+            .margin({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : this.topRectHeight })
+          }
+          .scrollBar(BarState.Off)
+          .layoutWeight(1)
+
+          ProductUtilView({ isMoreDetail: $isMoreDetail, isShoppingBag: $isShoppingBag, isCustomerService:
+            $isCustomerService })
+          // [EndExclude product_more_detail_view]
+        }
+        .height(CommonConstants.FULL_PERCENT)
+        // Setting the width ratio of offering details to side panel.
+        .layoutWeight(new BreakpointType(0, CommonConstants.THREE, CommonConstants.FIVE)
+          .getValue(this.currentBreakpoint))
+        .borderWidth({ right: $r('app.float.more_detail_col_border_width') })
+        .borderColor(ResourceUtil.getCommonBorderColor()[0])
+        // Hide the product details page under the SM breakpoint.
+        .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.None : Visibility.Visible)
+
+        Column() {
+          // Check the auxiliary information page of the side panel.
+          if (this.isShoppingBag) {
+            DetailShoppingBagView({ isMoreDetail: this.isMoreDetail })
+          }
+          if (this.isCustomerService) {
+            CustomerServiceView()
+          }
+        }
+        // [StartExclude product_more_detail_view]
+        .backgroundColor(ResourceUtil.getCommonBackgroundColor()[0])
+        .height(CommonConstants.FULL_PERCENT)
+        // [EndExclude product_more_detail_view]
+        // Setting the width ratio of offering details to side panel.
+        .layoutWeight(CommonConstants.THREE)
+      }
+      // [End product_more_detail_view]
+      .height(CommonConstants.FULL_PERCENT)
+      .width(CommonConstants.FULL_PERCENT)
+    }
+    .hideTitleBar(true)
+    .expandSafeArea([SafeAreaType.KEYBOARD])
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductPrice.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductPrice.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e05b960c35277ab05622a527260c15c364b86cb4
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductPrice.ets
@@ -0,0 +1,214 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, BreakpointType, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+import { RightArrow } from './CommonView';
+
+@Component
+export struct ProductPrice {
+  @Prop pageBreakpoint: string;
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Column() {
+      Row() {
+        Text(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[0])
+          .fontSize($r('app.float.product_price_font_1'))
+          .lineHeight($r('app.float.product_price_line_1'))
+          .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          .fontColor(Color.White)
+          .displayPriority(4)
+        Text(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[1])
+          .fontSize($r('app.float.product_price_font_2'))
+          .lineHeight($r('app.float.product_price_line_2'))
+          .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          .fontColor(Color.White)
+          .displayPriority(4)
+        Text(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[2])
+          .decoration({
+            type: TextDecorationType.LineThrough,
+            color: Color.White
+          })
+          .opacity(CommonConstants.TEXT_OPACITY[2])
+          .fontSize($r('app.float.product_price_font_3'))
+          .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          .opacity(CommonConstants.TEXT_OPACITY[2])
+          .fontColor(Color.White)
+          .displayPriority(1)
+        Blank()
+          .displayPriority(2)
+        Row() {
+          this.TimeTip(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[3])
+          this.TimeText(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[4])
+          this.TimeTip(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[5])
+          this.TimeText(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[6])
+          this.TimeTip(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[7])
+          this.TimeText(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[8])
+        }
+        .displayPriority(3)
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .height($r('app.float.product_price_row_height'))
+      .borderRadius(ResourceUtil.getCommonBorderRadius()[3])
+      .padding({
+        left: $r('app.float.product_price_padding_left_right'),
+        right: $r('app.float.product_price_padding_left_right'),
+        bottom: $r('app.float.product_price_padding_bottom')
+      })
+      .alignItems(VerticalAlign.Bottom)
+      .linearGradient({
+        direction: GradientDirection.Right,
+        repeating: false,
+        colors: [[DetailConstants.GRADIENT_COLORS[0], 0.0], [DetailConstants.GRADIENT_COLORS[1], 1.0]]
+      })
+
+      Row() {
+        Text(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[9])
+          .fontSize($r('app.float.product_price_font_3'))
+          .fontWeight(FontWeight.Normal)
+          .lineHeight($r('app.float.product_price_line_3'))
+          .opacity(CommonConstants.TEXT_OPACITY[2])
+        Blank()
+        RightArrow()
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .margin({
+        top: $r('app.float.price_margin_top'),
+        bottom: $r('app.float.price_margin_bottom')
+      })
+
+      Row() {
+        this.ProductTag(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[10])
+        this.ProductTag(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[11])
+        this.ProductTag(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[12])
+        Blank()
+          .displayPriority(2)
+        Row() {
+          Text(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[13])
+            .fontColor(Color.White)
+            .fontSize($r('app.float.product_price_font_3'))
+            .fontWeight(CommonConstants.FONT_WEIGHT_500)
+        }
+        .displayPriority(1)
+        .width(this.pageBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? $r('app.float.price_tag_row_width') :
+          $r('app.float.price_tag_row_width_lg'))
+        .borderRadius(ResourceUtil.getCommonBorderRadius()[5])
+        .height($r('app.float.price_tag_row_height'))
+        .backgroundColor($r('app.color.products_info_background_2'))
+        .justifyContent(FlexAlign.Center)
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .margin({ bottom: $r('app.float.price_tag_row_margin') })
+
+      Row() {
+        Image($r('app.media.ic_public_gps'))
+          .opacity(CommonConstants.TEXT_OPACITY[2])
+          .width(ResourceUtil.getCommonImgSize()[6])
+          .height(ResourceUtil.getCommonImgSize()[6])
+          .margin({ right: $r('app.float.price_position_margin') })
+        Column() {
+          Row() {
+            Text(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[14])
+              .fontSize($r('app.float.product_price_font_3'))
+              .fontWeight(FontWeight.Normal)
+              .lineHeight($r('app.float.product_price_line_3'))
+              .opacity(CommonConstants.TEXT_OPACITY[2])
+            Blank()
+            RightArrow()
+          }
+          .width(CommonConstants.FULL_PERCENT)
+
+          Text(DetailConstants.PRODUCT_PRICE_NAMES(this.context)[15])
+            .fontSize($r('app.float.product_price_font_3'))
+            .lineHeight($r('app.float.product_price_line_3'))
+            .margin({ top: $r('app.float.price_position_margin') })
+        }
+        .layoutWeight(1)
+        .alignItems(HorizontalAlign.Start)
+      }
+      .alignItems(VerticalAlign.Top)
+      .width(CommonConstants.FULL_PERCENT)
+      .height($r('app.float.price_position_row_height'))
+    }
+    .alignItems(HorizontalAlign.Start)
+    .backgroundColor(Color.White)
+    .width(CommonConstants.FULL_PERCENT)
+    .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+    .padding($r('app.float.price_col_padding'))
+    .margin({
+      top: this.pageBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? $r('app.float.price_col_margin_top') : 0,
+      bottom: new BreakpointType($r('app.float.price_col_margin_bottom_sm'), $r('app.float.price_col_margin_bottom_md'),
+        $r('app.float.price_col_margin_bottom_lg')).getValue(this.pageBreakpoint) })
+  }
+
+  @Builder
+  TimeText(timeText: string) {
+    Row() {
+      Text(timeText)
+        .fontSize($r('app.float.product_price_font_4'))
+        .lineHeight($r('app.float.product_price_line_4'))
+        .width($r('app.float.product_price_line_5'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+        .fontColor(Color.White)
+    }
+    .padding({
+      left: $r('app.float.time_text_padding'),
+      right: $r('app.float.time_text_padding')
+    })
+    .height($r('app.float.time_text_height'))
+    .width($r('app.float.time_text_width'))
+    .borderRadius(ResourceUtil.getCommonBorderRadius()[0])
+    .backgroundColor($r('app.color.time_tip_background'))
+  }
+
+  @Builder
+  TimeTip(tipText: string) {
+    Text(tipText)
+      .fontSize($r('app.float.product_price_font_5'))
+      .lineHeight($r('app.float.product_price_line_5'))
+      .fontWeight(CommonConstants.FONT_WEIGHT_500)
+      .fontColor(Color.White)
+  }
+
+  @Builder
+  ProductTag(tagText: string) {
+    Row() {
+      Text(tagText)
+        .fontSize($r('app.float.product_price_font_4'))
+        .lineHeight($r('app.float.product_price_line_4'))
+        .fontColor($r('app.color.service_font_color'))
+        .fontWeight(FontWeight.Normal)
+        .maxLines(1)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+    }
+    .displayPriority(3)
+    .height($r('app.float.product_tag_row_height'))
+    .opacity(CommonConstants.TEXT_OPACITY[2])
+    .borderRadius(ResourceUtil.getCommonBorderRadius()[1])
+    .borderColor($r('app.color.price_tag_border_color'))
+    .borderWidth($r('app.float.product_tag_row_border_width'))
+    .padding({
+      left: $r('app.float.product_tag_row_padding'),
+      right: $r('app.float.product_tag_row_padding')
+    })
+    .margin({ right: $r('app.float.product_tag_row_margin') })
+    .linearGradient({
+      direction: GradientDirection.Right,
+      repeating: false,
+      colors: [[DetailConstants.GRADIENT_COLORS[2], 0.0], [DetailConstants.GRADIENT_COLORS[3], 1.0]]
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductUtilView.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductUtilView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e1f832530355d4d74b14a71a5a96991f1cd2c9e6
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ProductUtilView.ets
@@ -0,0 +1,224 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { ClassifyConstants } from '@ohos/home';
+import { BreakpointConstants, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+import { PayCard } from './PayCard';
+import { UtilIcon } from './CommonView';
+
+@Component
+export struct ProductUtilView {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('isShowingSidebar') isShowingSidebar: boolean = false;
+  @StorageLink('isSplitMode') isSplitMode: boolean = false;
+  @Link isMoreDetail: boolean;
+  @Link isShoppingBag: boolean;
+  @Link isCustomerService: boolean;
+  @State isDialogOpen: boolean = false;
+  @State detailType: string = CommonConstants.BIND_SHEET_PAGE_TYPES[3];
+  @Consume('pageInfos') pageInfos: NavPathStack;
+  public isLivePage: boolean = false;
+  // [Start dialog_controller]
+  private dialogController: CustomDialogController | null = new CustomDialogController({
+    builder: PayCardDialog(),
+    customStyle: true
+  });
+  // [End dialog_controller]
+  private context: Context = this.getUIContext().getHostContext()!
+
+  aboutToDisappear(): void {
+    this.dialogController = null;
+  }
+  // [Start pay_card_builder]
+  @Builder
+  PayCardBuilder() {
+    Column() {
+      PayCard({
+        // [StartExclude pay_card_builder]
+        isOpen: $isDialogOpen,
+        detailType: $detailType,
+        currentBreakpoint: this.currentBreakpoint
+        // [EndExclude pay_card_builder]
+      })
+    }
+    // [StartExclude pay_card_builder]
+    .padding({ top: $r('app.float.util_pay_padding') })
+    .width(CommonConstants.FULL_PERCENT)
+    .height(CommonConstants.FULL_PERCENT)
+    // [EndExclude pay_card_builder]
+  }
+  // [End pay_card_builder]
+  build() {
+    GridRow({
+      columns: {
+        sm: BreakpointConstants.GRID_ROW_COLUMNS[0],
+        md: BreakpointConstants.GRID_ROW_COLUMNS[1],
+        lg: BreakpointConstants.GRID_ROW_COLUMNS[2]
+      }
+    }) {
+      GridCol({
+        span: {
+          sm: BreakpointConstants.GRID_COLUMN_SPANS[2],
+          md: BreakpointConstants.GRID_COLUMN_SPANS[3],
+          lg: BreakpointConstants.GRID_COLUMN_SPANS[4]
+        }
+      }) {
+        Row() {
+          UtilIcon({ isMoreDetail: $isMoreDetail, iconImg: $r('app.media.tab_home') })
+            .displayPriority(3)
+          UtilIcon({ isMoreDetail: $isMoreDetail, iconImg: $r('app.media.ic_public_comments') })
+            .displayPriority(3)
+            .onClick(() => {
+              this.isShowingSidebar = false;
+              if (this.isMoreDetail) {
+                this.isCustomerService = true;
+                this.isShoppingBag = false;
+              } else {
+                this.pageInfos.pushPathByName(ClassifyConstants.PAGE_INFO_LIST[1],
+                  new NavParams(DetailConstants.PARAM_STRING_LIST[1]));
+              }
+            })
+          UtilIcon({ isMoreDetail: $isMoreDetail, iconImg: $r('app.media.tab_shopping_bag') })
+            .displayPriority(3 )
+            .onClick(() => {
+              this.isShowingSidebar = false;
+              if (this.isMoreDetail) {
+                this.isShoppingBag = true;
+                this.isCustomerService = false;
+              } else {
+                this.pageInfos.pushPathByName(ClassifyConstants.PAGE_INFO_LIST[1],
+                  new NavParams(DetailConstants.PARAM_STRING_LIST[0]));
+              }
+            })
+          Blank()
+            .displayPriority(1)
+          Button(DetailConstants.BUTTON_NAMES(this.context)[0])
+            .fontSize($r('app.float.util_button_font'))
+            .fontColor($r('app.color.util_button_2'))
+            .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            .layoutWeight(this.isMoreDetail ? (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? 1 : 2) :
+              (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? 2 : 1))
+            .height($r('app.float.util_button_height'))
+            .borderRadius(ResourceUtil.getCommonBorderRadius()[7])
+            .backgroundColor($r('app.color.util_button_1'))
+            .margin({ right: $r('app.float.util_button_margin') })
+            .displayPriority(2)
+          // [Start dialog_btn]
+          Button(DetailConstants.BUTTON_NAMES(this.context)[1])
+            // [StartExclude dialog_btn]
+            .fontSize($r('app.float.util_button_font'))
+            .fontColor(Color.White)
+            .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            .layoutWeight(1)
+            .height($r('app.float.util_button_height'))
+            .borderRadius(ResourceUtil.getCommonBorderRadius()[7])
+            .backgroundColor($r('app.color.util_button_2'))
+            .displayPriority(4)
+              // [EndExclude dialog_btn]
+            .bindSheet($$this.isDialogOpen,
+              this.PayCardBuilder(), {
+                height: $r('app.float.pay_bind_sheet_height'),
+                preferType: SheetType.CENTER,
+                dragBar: false,
+                enableOutsideInteractive: true,
+                onDisappear: () => { this.isDialogOpen = false },
+                showClose: false,
+                backgroundColor: $r('app.color.pay_bind_sheet_background')
+              })
+            .onClick(() => {
+              if (this.isLivePage || this.isSplitMode) {
+                return;
+              }
+              if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+                this.isDialogOpen = true;
+              } else {
+                if (this.dialogController === null) {
+                  return;
+                }
+                this.dialogController.open();
+                this.isDialogOpen = false;
+              }
+            })
+          // [End dialog_btn]
+        }
+        .backgroundColor($r('app.color.products_info'))
+        .height(deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? CommonConstants.TAB_BAR_HEIGHT :
+          CommonConstants.TAB_BAR_HEIGHT + CommonConstants.BOTTOM_RECT_HEIGHT)
+        .width(CommonConstants.FULL_PERCENT)
+        .padding({
+          left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+          right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+          bottom: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : CommonConstants.BOTTOM_RECT_HEIGHT
+        })
+      }
+    }
+    .onBreakpointChange((breakPoints) => {
+      if (breakPoints === BreakpointConstants.BREAKPOINT_LG) {
+        if (this.dialogController === null) {
+          return;
+        }
+        this.dialogController.close();
+      } else {
+        this.isShowingSidebar = false;
+        if (this.dialogController === null) {
+          return;
+        }
+        this.dialogController.close();
+        this.isDialogOpen = false;
+      }
+    })
+  }
+}
+// [Start pay_card_dialog]
+@CustomDialog
+struct PayCardDialog {
+  // [StartExclude pay_card_dialog]
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @State isDialogOpen: boolean = false;
+  @State detailType: string = CommonConstants.BIND_SHEET_PAGE_TYPES[3];
+  private dialogController?: CustomDialogController;
+  // [EndExclude pay_card_dialog]
+
+  build() {
+    Column() {
+      PayCard({
+        // [StartExclude pay_card_dialog]
+        isOpen: $isDialogOpen,
+        detailType: $detailType,
+        currentBreakpoint: this.currentBreakpoint,
+        dialogController: this.dialogController
+        // [EndExclude pay_card_dialog]
+      })
+    }
+    // [StartExclude pay_card_dialog]
+    .backgroundColor(ResourceUtil.getCommonBackgroundColor()[0])
+    .padding({ top: $r('app.float.pay_dialog_padding') })
+    .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.pay_dialog_width_lg') :
+      $r('app.float.pay_dialog_width'))
+    .height(DetailConstants.EIGHTY_PERCENT)
+    .borderRadius(ResourceUtil.getCommonBorderRadius()[8])
+    // [EndExclude pay_card_dialog]
+  }
+}
+// [End pay_card_dialog]
+export class NavParams {
+  viewName: string = '';
+
+  constructor(viewName: string) {
+    this.viewName = viewName;
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ShopBag.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ShopBag.ets
new file mode 100644
index 0000000000000000000000000000000000000000..23aff6d3a0b6ad231a3795fbd4bd815515498019
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ShopBag.ets
@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { LiveConstants } from '../constants/LiveConstants';
+import { ShopBagHeader } from './ShopBagHeader';
+import { ShopList } from './ShopList';
+
+@Component
+export struct ShopBag {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @Link isMoreDetail: boolean;
+  @State currentIndex: number = 0;
+  @Builder payCardBuilder() {};
+  @BuilderParam PayCardButton: () => void = this.payCardBuilder;
+  private scroller: Scroller = new Scroller();
+  private context: Context = this.getUIContext().getHostContext()!
+
+  @Builder
+  tabBuilder(title: string, targetIndex: number) {
+    Column() {
+      Text(title)
+        .fontColor(this.currentIndex === targetIndex ? $r('app.color.shop_tab_text_color_current') :
+          $r('app.color.shop_tab_text_color'))
+        .fontSize($r('app.float.shop_tab_text_size'))
+        .lineHeight($r('app.float.shop_tab_line_height'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+    }
+    .margin({
+      right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+        $r('app.float.shop_tab_margin_right_lg') : $r('app.float.shop_tab_margin_right')
+    })
+  }
+
+  build() {
+    Column() {
+      ShopBagHeader({ isMoreDetail: this.isMoreDetail })
+      Tabs({ barPosition: BarPosition.Start }) {
+        ForEach(LiveConstants.SHOP_CAR_TABS(this.context), (item: string, index: number) => {
+          TabContent() {
+            Scroll(this.scroller) {
+              ShopList({ PayCardButton: this.PayCardButton })
+            }
+            .align(Alignment.Top)
+            .scrollBar(BarState.Off)
+            .height(CommonConstants.FULL_PERCENT)
+            .width(CommonConstants.FULL_PERCENT)
+          }
+          .tabBar(this.tabBuilder(item, index))
+        }, (item: string, index: number) => index + JSON.stringify(item))
+      }
+      .onChange((index) => {
+        this.currentIndex = index;
+      })
+      .layoutWeight(1)
+      .barWidth(CommonConstants.FULL_PERCENT)
+      .barHeight($r('app.float.shop_tab_height'))
+      .barMode(BarMode.Scrollable, { margin: 0, nonScrollableLayoutStyle: LayoutStyle.ALWAYS_AVERAGE_SPLIT })
+      .fadingEdge(false)
+      .margin({
+        bottom: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : CommonConstants.BOTTOM_RECT_HEIGHT
+      })
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .height(CommonConstants.FULL_PERCENT)
+    .padding({
+      left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+      right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint)
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ShopBagHeader.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ShopBagHeader.ets
new file mode 100644
index 0000000000000000000000000000000000000000..13ef2adbfb65c102ff09a9d5d7e0a255f32d93ea
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ShopBagHeader.ets
@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { ShopCarIcon, ShopCarModel } from '../viewmodel/ShopCarViewModel';
+
+@Component
+export struct ShopBagHeader {
+  private shopCarIcons: ShopCarIcon[] = new ShopCarModel(this.getUIContext().getHostContext()!).getShopCarIconList();
+  @Link isMoreDetail: boolean;
+
+  build() {
+    Row() {
+      Text($r('app.string.pocket_baby'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+        .fontSize($r('app.float.bag_name_font_size'))
+        .lineHeight($r('app.float.bag_name_line_height'))
+      Blank()
+      ShopBagIconView({ iconResource: this.shopCarIcons[0].getIcon(), iconName: this.shopCarIcons[0].getName() })
+      ShopBagIconView({ iconResource: this.shopCarIcons[1].getIcon(), iconName: this.shopCarIcons[1].getName() })
+      ShopBagIconView({ iconResource: this.shopCarIcons[2].getIcon(), iconName: this.shopCarIcons[2].getName() })
+
+      Image($r('app.media.icon_close_2'))
+        .width($r('app.float.bag_close_icon_size'))
+        .aspectRatio(1)
+        .onClick(() => {
+          this.isMoreDetail = false;
+        })
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .height($r('app.float.shop_tab_height'))
+
+  }
+}
+
+@Component
+struct ShopBagIconView {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  public iconResource: Resource = $r('app.media.icon_bag');
+  public iconName: string = '';
+
+  build() {
+    Column() {
+      Image(this.iconResource)
+        .width($r('app.float.bag_icon_size'))
+        .aspectRatio(1)
+        .margin({
+          bottom: $r('app.float.bag_icon_margin_bottom')
+        })
+      Text(this.iconName)
+        .fontSize($r('app.float.bag_icon_font_size'))
+        .lineHeight($r('app.float.bag_icon_line_height'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+    }
+    .justifyContent(FlexAlign.End)
+    .width($r('app.float.bag_icon_width'))
+    .margin({
+      right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+      $r('app.float.bag_icon_margin_lg') : $r('app.float.bag_icon_margin_md_sm')
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ShopList.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ShopList.ets
new file mode 100644
index 0000000000000000000000000000000000000000..7a8f5565f0acbc1d5c4ed9e7ea8c75dfbf01cc39
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/view/ShopList.ets
@@ -0,0 +1,128 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, BreakpointType, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { LiveConstants } from '../constants/LiveConstants';
+import { ShopCarModel, ShopCarProduct } from '../viewmodel/ShopCarViewModel';
+
+@Component
+export struct ShopList {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @Builder payCardBuilder() {};
+  @BuilderParam PayCardButton:() => void = this.payCardBuilder;
+  private shopCarProduct: ShopCarProduct[] = new ShopCarModel(this.getUIContext().getHostContext()!).getShopCarProductList();
+
+  build() {
+    Column() {
+      Row() {
+        Text($r('app.string.preferential_scheme'))
+          .fontColor(Color.White)
+          .fontSize($r('app.float.preferential_scheme_font_size'))
+          .lineHeight($r('app.float.preferential_scheme_line_height'))
+          .fontWeight(CommonConstants.FONT_WEIGHT_500)
+      }
+      .alignSelf(ItemAlign.Start)
+      .backgroundColor($r('app.color.preferential_scheme_background_color'))
+      .height($r('app.float.preferential_scheme_height'))
+      .borderRadius(ResourceUtil.getCommonBorderRadius()[5])
+      .padding({
+        left: $r('app.float.preferential_scheme_padding'),
+        right: $r('app.float.preferential_scheme_padding')
+      })
+      .margin({ bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+        $r('app.float.preferential_scheme_margin_lg') : $r('app.float.preferential_scheme_margin') })
+
+      ForEach(this.shopCarProduct, (item: ShopCarProduct) => {
+        Row() {
+          Image(item.getImage())
+            .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+              $r('app.float.bag_item_image_size_lg') : $r('app.float.bag_item_image_size'))
+            .aspectRatio(1)
+          Column() {
+            Text(item.getName())
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+              .maxLines(1)
+              .textOverflow({ overflow: TextOverflow.Ellipsis })
+              .fontSize($r('app.float.bag_item_name_font_size'))
+              .margin({ bottom: $r('app.float.bag_item_name_margin_bottom') })
+            Text(item.getRemark())
+              .fontSize($r('app.float.bag_item_remark_font_size'))
+              .fontWeight(FontWeight.Normal)
+              .maxLines(1)
+              .textOverflow({ overflow: TextOverflow.Ellipsis })
+              .fontColor($r('app.color.bag_item_remark_font_color'))
+              .margin({ bottom: $r('app.float.bag_item_remark_margin_bottom') })
+            Row() {
+              ForEach(item.getDiscounts(), (discountsItem: string, index: number) => {
+                Row() {
+                  Text(discountsItem)
+                    .fontWeight(FontWeight.Normal)
+                    .fontColor($r('app.color.bag_item_discounts_font_color'))
+                    .fontSize($r('app.float.bag_item_discounts_font_size'))
+                    .maxLines(1)
+                    .textOverflow({ overflow: TextOverflow.Ellipsis })
+                    .padding({
+                      top: $r('app.float.bag_item_discounts_padding_top'),
+                      bottom: $r('app.float.bag_item_discounts_padding_top'),
+                      left: $r('app.float.bag_item_discounts_padding_left'),
+                      right: $r('app.float.bag_item_discounts_padding_left')
+                    })
+                    .border({
+                      radius: $r('app.float.bag_item_discounts_border_radius'),
+                      color: $r('app.color.bag_item_discounts_border_color'),
+                      width: $r('app.float.bag_item_discounts_border_width')
+                    })
+                    .margin({ right: $r('app.float.bag_item_discounts_margin_right') })
+                }
+                .layoutWeight(index > 0 ? 1 : 0)
+              }, (discountsItem: string, index: number) => discountsItem + index)
+            }
+            .width(CommonConstants.FULL_PERCENT)
+            Blank()
+            Row() {
+              Text( LiveConstants.CURRENCY_SYMBOL + JSON.stringify(item.getPrice()))
+                .fontColor($r('app.color.bag_item_price_color'))
+                .fontSize($r('app.float.bag_item_font_size'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                .displayPriority(1)
+              Blank()
+                .displayPriority(2)
+              this.PayCardButton()
+            }
+            .width(CommonConstants.FULL_PERCENT)
+          }
+          .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+            $r('app.float.bag_item_height_lg') : $r('app.float.bag_item_height'))
+          .padding({
+            top: $r('app.float.bag_item_padding_top'),
+            bottom:  $r('app.float.bag_item_padding_left'),
+            left: $r('app.float.bag_item_padding_left'),
+            right: new BreakpointType($r('app.float.bag_item_padding_top'), $r('app.float.bag_item_padding_left'),
+              $r('app.float.bag_item_padding_top')).getValue(this.currentBreakpoint),
+          })
+          .layoutWeight(1)
+          .alignItems(HorizontalAlign.Start)
+          .justifyContent(FlexAlign.Start)
+        }
+        .width(CommonConstants.FULL_PERCENT)
+        .backgroundColor(Color.White)
+        .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+        .margin({ bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+          $r('app.float.bag_item_margin_lg') : $r('app.float.bag_item_margin') })
+      }, (item: ShopCarProduct, index: number) => JSON.stringify(item) + index)
+    }
+    .width(CommonConstants.FULL_PERCENT)
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/viewmodel/LiveViewModel.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/viewmodel/LiveViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b25900f7218e5645a6327bcf160989bfb9e7eaaf
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/viewmodel/LiveViewModel.ets
@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LiveConstants } from '../constants/LiveConstants';
+
+export class LiveViewModel {
+  private liveProductList: LiveProduct[] = [];
+
+  constructor() {
+    LiveConstants.LIVE_PRODUCT_NAME_LIST.forEach((item: string, index: number) => {
+      this.liveProductList.push(new LiveProduct(item, LiveConstants.LIVE_PRODUCT_IMAGE_LIST[index],
+        LiveConstants.LIVE_PRODUCT_PRICE_LIST[index]));
+    });
+  }
+
+  getProductList(): LiveProduct[] {
+    return this.liveProductList;
+  }
+}
+
+export class LiveProduct {
+  private name: string;
+
+  private image: Resource;
+
+  private price: string;
+
+  constructor(name: string, image: Resource, price: string) {
+    this.name = name;
+    this.image = image;
+    this.price = price;
+  }
+
+  getName(): string {
+    return this.name;
+  }
+
+  getImage(): Resource {
+    return this.image;
+  }
+
+  getPrice(): string {
+    return this.price;
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/viewmodel/PayCardViewModel.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/viewmodel/PayCardViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..167338f9d578bc9e4f29761eee0fd5cedbfda065
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/viewmodel/PayCardViewModel.ets
@@ -0,0 +1,85 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DetailConstants } from '../constants/DetailConstants';
+
+export class PayCardViewModel {
+  private payCardSelectList: SelectProjectItem[] = [];
+
+  constructor(context: Context) {
+    let selectListTmp:SelectItem[][] = [];
+    let selectListItemTmp:SelectItem[] = [];
+    DetailConstants.COLOR_SELECT_NAME_LIST(context).forEach((item: string, index: number) => {
+      selectListItemTmp.push(new SelectItem(item, DetailConstants.COLOR_SELECT_IMAGE_LIST[index]));
+    })
+    selectListTmp.push(selectListItemTmp);
+    selectListItemTmp = [];
+    DetailConstants.CAPACITY_SELECT_NAME_LIST.forEach((item: string)=>{
+      selectListItemTmp.push(new SelectItem(item, null));
+    })
+    selectListTmp.push(selectListItemTmp);
+    selectListItemTmp = [];
+    DetailConstants.TYPE_SELECT_NAME_LIST(context).forEach((item: string)=>{
+      selectListItemTmp.push(new SelectItem(item, null));
+    })
+    selectListTmp.push(selectListItemTmp);
+    selectListItemTmp = [];
+    DetailConstants.SELECT_NAME_LIST(context).forEach((item: string, index: number) =>{
+      this.payCardSelectList.push(new SelectProjectItem(item, selectListTmp[index]));
+    })
+  }
+
+  getPayCardSelectList(): SelectProjectItem[] {
+    return this.payCardSelectList;
+  }
+}
+
+export class SelectProjectItem {
+  private name: string;
+
+  private selectItemList: SelectItem[];
+
+  constructor(name: string, selectItemList: SelectItem[]) {
+    this.name = name;
+    this.selectItemList = selectItemList;
+  }
+
+  getName(): string {
+    return this.name;
+  }
+
+  getSelectItemList(): SelectItem[] {
+    return this.selectItemList;
+  }
+}
+
+export class SelectItem {
+  private name: string;
+
+  private image: Resource | null;
+
+  constructor(name: string, image: Resource | null) {
+    this.name = name;
+    this.image = image;
+  }
+
+  getName(): string {
+    return this.name;
+  }
+
+  getImage(): Resource | null {
+    return this.image;
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/ets/viewmodel/ShopCarViewModel.ets b/MultiShoppingPriceComparison/features/detail/src/main/ets/viewmodel/ShopCarViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..cf1926e03bcfcfbcefac5cc38dff5ee47f745418
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/ets/viewmodel/ShopCarViewModel.ets
@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LiveConstants } from '../constants/LiveConstants';
+
+export class ShopCarModel {
+  private shopCarProductList: ShopCarProduct[] = [];
+  private shopCarIconList: ShopCarIcon[] = [];
+
+  constructor(context: Context) {
+    LiveConstants.SHOP_CAR_PRODUCT_NAME_LIST.forEach((item: string, index: number) => {
+      this.shopCarProductList.push(new ShopCarProduct(LiveConstants.SHOP_CAR_PRODUCT_IMAGE_LIST[index], item,
+        LiveConstants.SHOP_CAR_PRODUCT_REMARK_LIST(context)[index],
+        LiveConstants.SHOP_CAR_PRODUCT_DISCOUNTS_LIST(context)[index],
+        LiveConstants.SHOP_CAR_PRODUCT_PRICE_LIST[index]));
+    });
+
+    LiveConstants.SHOP_CAR_ICON_RESOURCES.forEach((item: Resource, index: number) => {
+      this.shopCarIconList.push(new ShopCarIcon(item, LiveConstants.SHOP_CAR_ICON_NAMES(context)[index]));
+    });
+  }
+
+  getShopCarProductList(): ShopCarProduct[] {
+    return this.shopCarProductList;
+  }
+
+  getShopCarIconList(): ShopCarIcon[] {
+    return this.shopCarIconList;
+  }
+}
+
+export class ShopCarProduct {
+  private image: Resource;
+  private name: string;
+  private remark: string;
+  private discounts: string[];
+  private price: number;
+
+  constructor(image: Resource, name: string, remark: string, discounts: string[], price: number) {
+    this.name = name;
+    this.image = image;
+    this.remark = remark;
+    this.discounts = discounts;
+    this.price = price;
+  }
+
+  getName(): string {
+    return this.name;
+  }
+
+  getImage(): Resource {
+    return this.image;
+  }
+
+  getPrice(): number {
+    return this.price;
+  }
+
+  getRemark(): string {
+    return this.remark;
+  }
+
+  getDiscounts(): string[] {
+    return this.discounts;
+  }
+}
+
+export class ShopCarIcon {
+  private icon: Resource;
+  private name: string;
+
+  constructor(icon: Resource, name: string) {
+    this.icon = icon;
+    this.name = name;
+  }
+
+  getIcon(): Resource {
+    return this.icon;
+  }
+
+  getName(): string {
+    return this.name;
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/module.json5 b/MultiShoppingPriceComparison/features/detail/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..be0ff174b2ab5784cb2979702660f0958dfcb60b
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/module.json5
@@ -0,0 +1,12 @@
+{
+  "module": {
+    "name": "detail",
+    "type": "har",
+    "description": "$string:shared_desc",
+    "deviceTypes": [
+      "phone",
+      "2in1",
+      "tablet"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/element/color.json b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..1bc2408bf15ea14fe8f6802d058ebb2fa87d3e90
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/element/color.json
@@ -0,0 +1,132 @@
+{
+  "color": [
+    {
+      "name": "living_background",
+      "value": "#1AFFFFFF"
+    },
+    {
+      "name": "living_border_color",
+      "value": "#1A000000"
+    },
+    {
+      "name": "swiper_indicator_background",
+      "value": "#66000000"
+    },
+    {
+      "name": "products_compare",
+      "value": "#0D000000"
+    },
+    {
+      "name": "products_info",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "time_tip_background",
+      "value": "#FFAE0D0D"
+    },
+    {
+      "name": "products_info_background_1",
+      "value": "#1ACF0A2C"
+    },
+    {
+      "name": "products_info_background_2",
+      "value": "#B3CF0A2C"
+    },
+    {
+      "name": "products_info_text",
+      "value": "#CF0A2C"
+    },
+    {
+      "name": "divider_color",
+      "value": "#19000000"
+    },
+    {
+      "name": "config_tip_background",
+      "value": "#05000000"
+    },
+    {
+      "name": "util_button_1",
+      "value": "#0D000000"
+    },
+    {
+      "name": "util_button_2",
+      "value": "#CF0A2C"
+    },
+    {
+      "name": "user_comments_tag_background",
+      "value": "#0D000000"
+    },
+    {
+      "name": "pay_bind_sheet_background",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "service_card_font",
+      "value": "#66000000"
+    },
+    {
+      "name": "service_font_color",
+      "value": "#CF0A2C"
+    },
+    {
+      "name": "message_user_background",
+      "value": "#1AE64566"
+    },
+    {
+      "name": "pay_contact_color",
+      "value": "#99000000"
+    },
+    {
+      "name": "pay_config_background_selected",
+      "value": "#0DCF0A2C"
+    },
+    {
+      "name": "price_tag_border_color",
+      "value": "#CF0A2C"
+    },
+    {
+      "name": "comment_background_color",
+      "value": "#1AFFFFFF"
+    },
+    {
+      "name": "store_background_color",
+      "value": "#1AFFFFFF"
+    },
+    {
+      "name": "shop_price_color",
+      "value": "#CF0A2C"
+    },
+    {
+      "name": "shop_tab_text_color",
+      "value": "#99000000"
+    },
+    {
+      "name": "shop_tab_text_color_current",
+      "value": "#000000"
+    },
+    {
+      "name": "preferential_scheme_background_color",
+      "value": "#CF0A2C"
+    },
+    {
+      "name": "bag_item_remark_font_color",
+      "value": "#66000000"
+    },
+    {
+      "name": "bag_item_discounts_font_color",
+      "value": "#D0092D"
+    },
+    {
+      "name": "bag_item_discounts_border_color",
+      "value": "#66CF0A2C"
+    },
+    {
+      "name": "bag_item_price_color",
+      "value": "#CF0A2C"
+    },
+    {
+      "name": "pay_button_color",
+      "value": "#CF0A2C"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/element/float.json b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..ed865b5be479012edf31659efe9eee795020488b
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/element/float.json
@@ -0,0 +1,1144 @@
+{
+  "float": [
+    {
+      "name": "pay_bind_sheet_height",
+      "value": "620vp"
+    },
+    {
+      "name": "detail_top_icon_margin_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "detail_lg_top_row_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "more_detail_col_border_width",
+      "value": "1vp"
+    },
+    {
+      "name": "products_config_font",
+      "value": "12fp"
+    },
+    {
+      "name": "products_config_line",
+      "value": "18vp"
+    },
+    {
+      "name": "right_arrow_width",
+      "value": "8vp"
+    },
+    {
+      "name": "right_arrow_height",
+      "value": "16vp"
+    },
+    {
+      "name": "config_tip_icon_size",
+      "value": "10vp"
+    },
+    {
+      "name": "config_tip_icon_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "config_tip_text_font",
+      "value": "8fp"
+    },
+    {
+      "name": "util_icon_zero",
+      "value": "0"
+    },
+    {
+      "name": "util_icon_width_small",
+      "value": "32vp"
+    },
+    {
+      "name": "util_icon_width_sm",
+      "value": "40vp"
+    },
+    {
+      "name": "util_icon_width_md",
+      "value": "60vp"
+    },
+    {
+      "name": "util_icon_width_lg",
+      "value": "50vp"
+    },
+    {
+      "name": "top_icon_right_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "customer_service_font",
+      "value": "20fp"
+    },
+    {
+      "name": "customer_service_line_height",
+      "value": "28vp"
+    },
+    {
+      "name": "more_icon_margin_sm",
+      "value": "0"
+    },
+    {
+      "name": "more_icon_margin_md",
+      "value": "12vp"
+    },
+    {
+      "name": "more_icon_margin_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "service_shop_row_height",
+      "value": "56vp"
+    },
+    {
+      "name": "service_shop_row_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "service_card_font_1",
+      "value": "22fp"
+    },
+    {
+      "name": "service_card_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "service_card_font_2",
+      "value": "12fp"
+    },
+    {
+      "name": "service_card_line_2",
+      "value": "16vp"
+    },
+    {
+      "name": "service_card_font_3",
+      "value": "14fp"
+    },
+    {
+      "name": "service_card_line_3",
+      "value": "18vp"
+    },
+    {
+      "name": "service_card_margin_3_lg",
+      "value": "5vp"
+    },
+    {
+      "name": "service_card_margin_3",
+      "value": "23vp"
+    },
+    {
+      "name": "service_button_width_lg",
+      "value": "72vp"
+    },
+    {
+      "name": "service_button_width",
+      "value": "56vp"
+    },
+    {
+      "name": "service_button_font",
+      "value": "12fp"
+    },
+    {
+      "name": "service_card_price_height",
+      "value": "29vp"
+    },
+    {
+      "name": "service_card_padding_top",
+      "value": "12vp"
+    },
+    {
+      "name": "service_card_padding_bottom",
+      "value": "16vp"
+    },
+    {
+      "name": "service_card_padding_left_lg",
+      "value": "8vp"
+    },
+    {
+      "name": "service_card_padding_right_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "service_card_padding_right",
+      "value": "12vp"
+    },
+    {
+      "name": "service_card_height",
+      "value": "116vp"
+    },
+    {
+      "name": "service_padding_top_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "service_padding_top",
+      "value": "24vp"
+    },
+    {
+      "name": "service_util_right_margin_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "service_util_right_margin_md",
+      "value": "12vp"
+    },
+    {
+      "name": "service_util_right_margin_lg",
+      "value": "24vp"
+    },
+    {
+      "name": "text_input_height",
+      "value": "36vp"
+    },
+    {
+      "name": "message_image_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "message_content_font",
+      "value": "14fp"
+    },
+    {
+      "name": "message_content_line",
+      "value": "18vp"
+    },
+    {
+      "name": "message_padding_top_bottom",
+      "value": "8vp"
+    },
+    {
+      "name": "message_padding_left_right",
+      "value": "12vp"
+    },
+    {
+      "name": "message_flex_margin_same",
+      "value": "8vp"
+    },
+    {
+      "name": "message_flex_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "message_flex_padding",
+      "value": "48vp"
+    },
+    {
+      "name": "pay_card_product_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "pay_card_price_font",
+      "value": "24fp"
+    },
+    {
+      "name": "pay_card_icon_margin",
+      "value": "6vp"
+    },
+    {
+      "name": "pay_card_top_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "pay_position_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "pay_address_margin",
+      "value": "2vp"
+    },
+    {
+      "name": "pay_address_font",
+      "value": "16fp"
+    },
+    {
+      "name": "pay_contact_font",
+      "value": "14fp"
+    },
+    {
+      "name": "pay_info_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "pay_info_padding_top_bottom",
+      "value": "10vp"
+    },
+    {
+      "name": "pay_info_padding_left_right",
+      "value": "12vp"
+    },
+    {
+      "name": "pay_config_title_font",
+      "value": "14fp"
+    },
+    {
+      "name": "pay_config_title_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "pay_config_title_line",
+      "value": "19vp"
+    },
+    {
+      "name": "pay_config_name_font",
+      "value": "12fp"
+    },
+    {
+      "name": "pay_config_name_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "pay_config_border_width",
+      "value": "0.5vp"
+    },
+    {
+      "name": "pay_config_height",
+      "value": "30vp"
+    },
+    {
+      "name": "pay_config_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "pay_config_col_margin_top",
+      "value": "20vp"
+    },
+    {
+      "name": "pay_config_col_margin_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "pay_config_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "pay_wallet_icon_margin",
+      "value": "5vp"
+    },
+    {
+      "name": "pay_wallet_font",
+      "value": "16fp"
+    },
+    {
+      "name": "checkbox_width",
+      "value": "16vp"
+    },
+    {
+      "name": "wallet_row_padding_1",
+      "value": "8vp"
+    },
+    {
+      "name": "wallet_row_padding_2",
+      "value": "12vp"
+    },
+    {
+      "name": "wallet_row_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "pay_button_height",
+      "value": "40vp"
+    },
+    {
+      "name": "pay_button_margin_top",
+      "value": "16vp"
+    },
+    {
+      "name": "pay_button_margin_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "products_config_margin_12",
+      "value": "12vp"
+    },
+    {
+      "name": "products_config_margin_8",
+      "value": "8vp"
+    },
+    {
+      "name": "products_padding_sm",
+      "value": "12vp"
+    },
+    {
+      "name": "products_padding_md",
+      "value": "14vp"
+    },
+    {
+      "name": "products_padding_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "config_tip_row_height",
+      "value": "32vp"
+    },
+    {
+      "name": "config_text_col_width",
+      "value": "24vp"
+    },
+    {
+      "name": "config_text_col_height",
+      "value": "36vp"
+    },
+    {
+      "name": "user_comments_title_font",
+      "value": "16fp"
+    },
+    {
+      "name": "user_comments_title_line",
+      "value": "22vp"
+    },
+    {
+      "name": "comments_title_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "comments_tag_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "comments_profile_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "comments_user_font",
+      "value": "12fp"
+    },
+    {
+      "name": "comments_user_line",
+      "value": "18vp"
+    },
+    {
+      "name": "rating_height",
+      "value": "14vp"
+    },
+    {
+      "name": "comments_user_row_height",
+      "value": "36vp"
+    },
+    {
+      "name": "comments_user_row_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "comment_text_font",
+      "value": "12fp"
+    },
+    {
+      "name": "comment_text_line",
+      "value": "16vp"
+    },
+    {
+      "name": "user_comments_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "tag_font",
+      "value": "12fp"
+    },
+    {
+      "name": "tag_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "tag_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "tag_row_height",
+      "value": "32vp"
+    },
+    {
+      "name": "product_swiper_margin",
+      "value": "175vp"
+    },
+    {
+      "name": "picture_icon_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "picture_icon_margin_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "picture_live_font",
+      "value": "10fp"
+    },
+    {
+      "name": "picture_live_line",
+      "value": "15vp"
+    },
+    {
+      "name": "picture_live_col_margin_lg",
+      "value": "58vp"
+    },
+    {
+      "name": "picture_live_col_height",
+      "value": "58vp"
+    },
+    {
+      "name": "picture_live_col_width",
+      "value": "48vp"
+    },
+    {
+      "name": "picture_number_font",
+      "value": "10fp"
+    },
+    {
+      "name": "picture_number_row_width",
+      "value": "36vp"
+    },
+    {
+      "name": "picture_number_row_height",
+      "value": "16vp"
+    },
+    {
+      "name": "picture_arrow_width",
+      "value": "6vp"
+    },
+    {
+      "name": "picture_arrow_height",
+      "value": "12vp"
+    },
+    {
+      "name": "picture_arrow_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "picture_indicator_row_padding_left",
+      "value": "12vp"
+    },
+    {
+      "name": "picture_indicator_row_padding_right",
+      "value": "8vp"
+    },
+    {
+      "name": "picture_indicator_row_width",
+      "value": "112vp"
+    },
+    {
+      "name": "picture_indicator_row_height",
+      "value": "24vp"
+    },
+    {
+      "name": "picture_indicator_row_margin",
+      "value": "20vp"
+    },
+    {
+      "name": "small_picture_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "small_picture_height_lg",
+      "value": "72vp"
+    },
+    {
+      "name": "small_picture_height",
+      "value": "60vp"
+    },
+    {
+      "name": "picture_indicator_font",
+      "value": "12fp"
+    },
+    {
+      "name": "picture_indicator_margin",
+      "value": "2vp"
+    },
+    {
+      "name": "product_info_padding_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "discount_text_font_1",
+      "value": "14fp"
+    },
+    {
+      "name": "discount_text_font_2",
+      "value": "12fp"
+    },
+    {
+      "name": "discount_text_line",
+      "value": "18vp"
+    },
+    {
+      "name": "discount_text_margin_1",
+      "value": "8vp"
+    },
+    {
+      "name": "discount_text_margin_2",
+      "value": "16vp"
+    },
+    {
+      "name": "discount_text_margin_3",
+      "value": "4vp"
+    },
+    {
+      "name": "discount_row_padding",
+      "value": "8vp"
+    },
+    {
+      "name": "discount_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "discount_col_margin_sm",
+      "value": "12vp"
+    },
+    {
+      "name": "discount_col_margin_md",
+      "value": "14vp"
+    },
+    {
+      "name": "discount_col_margin_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "product_price_font_1",
+      "value": "14fp"
+    },
+    {
+      "name": "product_price_font_2",
+      "value": "22fp"
+    },
+    {
+      "name": "product_price_font_3",
+      "value": "12fp"
+    },
+    {
+      "name": "product_price_font_4",
+      "value": "10fp"
+    },
+    {
+      "name": "product_price_font_5",
+      "value": "9fp"
+    },
+    {
+      "name": "product_price_line_1",
+      "value": "18vp"
+    },
+    {
+      "name": "product_price_line_2",
+      "value": "28vp"
+    },
+    {
+      "name": "product_price_line_3",
+      "value": "16vp"
+    },
+    {
+      "name": "product_price_line_4",
+      "value": "14vp"
+    },
+    {
+      "name": "product_price_line_5",
+      "value": "12vp"
+    },
+    {
+      "name": "product_price_row_height",
+      "value": "54vp"
+    },
+    {
+      "name": "product_price_padding_left_right",
+      "value": "8vp"
+    },
+    {
+      "name": "product_price_padding_bottom",
+      "value": "16vp"
+    },
+    {
+      "name": "price_margin_top",
+      "value": "8vp"
+    },
+    {
+      "name": "price_margin_bottom",
+      "value": "10vp"
+    },
+    {
+      "name": "price_tag_row_width",
+      "value": "48vp"
+    },
+    {
+      "name": "price_tag_row_width_lg",
+      "value": "72vp"
+    },
+    {
+      "name": "price_tag_row_height",
+      "value": "20vp"
+    },
+    {
+      "name": "price_tag_row_margin",
+      "value": "10vp"
+    },
+    {
+      "name": "price_position_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "price_position_row_height",
+      "value": "36vp"
+    },
+    {
+      "name": "price_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "price_col_margin_top",
+      "value": "16vp"
+    },
+    {
+      "name": "price_col_margin_bottom_sm",
+      "value": "12vp"
+    },
+    {
+      "name": "price_col_margin_bottom_md",
+      "value": "14vp"
+    },
+    {
+      "name": "price_col_margin_bottom_lg",
+      "value": "15vp"
+    },
+    {
+      "name": "time_text_padding",
+      "value": "2vp"
+    },
+    {
+      "name": "time_text_height",
+      "value": "16vp"
+    },
+    {
+      "name": "time_text_width",
+      "value": "16vp"
+    },
+    {
+      "name": "product_tag_row_height",
+      "value": "17vp"
+    },
+    {
+      "name": "product_tag_row_border_width",
+      "value": "0.5vp"
+    },
+    {
+      "name": "product_tag_row_padding",
+      "value": "6vp"
+    },
+    {
+      "name": "product_tag_row_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "util_pay_padding",
+      "value": "16vp"
+    },
+    {
+      "name": "util_button_font",
+      "value": "16fp"
+    },
+    {
+      "name": "util_button_height",
+      "value": "40vp"
+    },
+    {
+      "name": "util_button_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "pay_dialog_padding",
+      "value": "24vp"
+    },
+    {
+      "name": "pay_dialog_width_lg",
+      "value": "480vp"
+    },
+    {
+      "name": "pay_dialog_width",
+      "value": "504vp"
+    },
+    {
+      "name": "comment_font_size",
+      "value": "16fp"
+    },
+    {
+      "name": "comment_icon_margin_right_lg",
+      "value": "24vp"
+    },
+    {
+      "name": "comment_icon_margin_right_sm_md",
+      "value": "16vp"
+    },
+    {
+      "name": "comment_height",
+      "value": "48vp"
+    },
+    {
+      "name": "comment_margin_top",
+      "value": "18vp"
+    },
+    {
+      "name": "comment_margin_bottom",
+      "value": "8vp"
+    },
+    {
+      "name": "live_comment_font_size",
+      "value": "12fp"
+    },
+    {
+      "name": "official_review_border_radius",
+      "value": "4vp"
+    },
+    {
+      "name": "official_review_padding",
+      "value": "4vp"
+    },
+    {
+      "name": "official_review_margin",
+      "value": "6vp"
+    },
+    {
+      "name": "comments_line_height",
+      "value": "20vp"
+    },
+    {
+      "name": "live_comment_margin_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "live_comment_border_radius",
+      "value": "8vp"
+    },
+    {
+      "name": "live_comment_padding",
+      "value": "6vp"
+    },
+    {
+      "name": "live_comment_padding_left",
+      "value": "8vp"
+    },
+    {
+      "name": "live_mask_padding_right_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "live_store_map_size",
+      "value": "36vp"
+    },
+    {
+      "name": "live_store_map_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "store_name_font_size",
+      "value": "12fp"
+    },
+    {
+      "name": "number_of_viewers_font_size",
+      "value": "10fp"
+    },
+    {
+      "name": "store_margin_right",
+      "value": "16vp"
+    },
+    {
+      "name": "store_margin_top",
+      "value": "12vp"
+    },
+    {
+      "name": "store_height",
+      "value": "36vp"
+    },
+    {
+      "name": "store_border_radius",
+      "value": "18vp"
+    },
+    {
+      "name": "shop_list_space_lg",
+      "value": "12vp"
+    },
+    {
+      "name": "shop_list_space_md_sm",
+      "value": "10vp"
+    },
+    {
+      "name": "shop_list_image_size_lg",
+      "value": "72vp"
+    },
+    {
+      "name": "shop_list_image_size",
+      "value": "60vp"
+    },
+    {
+      "name": "shop_list_text_font_size",
+      "value": "14fp"
+    },
+    {
+      "name": "shop_list_text_line_height",
+      "value": "19vp"
+    },
+    {
+      "name": "shop_list_text_margin_lg",
+      "value": "6vp"
+    },
+    {
+      "name": "shop_list_text_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "shop_text_padding_top_lg",
+      "value": "12vp"
+    },
+    {
+      "name": "shop_text_padding_top",
+      "value": "8vp"
+    },
+    {
+      "name": "shop_text_padding_bottom_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "shop_text_padding_bottom",
+      "value": "10vp"
+    },
+    {
+      "name": "shop_text_padding_left_lg",
+      "value": "8vp"
+    },
+    {
+      "name": "shop_width_index0_lg",
+      "value": "216vp"
+    },
+    {
+      "name": "shop_width_index0",
+      "value": "180vp"
+    },
+    {
+      "name": "shop_width_lg",
+      "value": "72vp"
+    },
+    {
+      "name": "shop_width",
+      "value": "60vp"
+    },
+    {
+      "name": "shop_tab_text_size",
+      "value": "16fp"
+    },
+    {
+      "name": "shop_tab_line_height",
+      "value": "33vp"
+    },
+    {
+      "name": "shop_tab_margin_right_lg",
+      "value": "24vp"
+    },
+    {
+      "name": "shop_tab_margin_right",
+      "value": "16vp"
+    },
+    {
+      "name": "shop_tab_height",
+      "value": "56vp"
+    },
+    {
+      "name": "bag_name_font_size",
+      "value": "16fp"
+    },
+    {
+      "name": "bag_name_line_height",
+      "value": "22vp"
+    },
+    {
+      "name": "bag_close_icon_size",
+      "value": "24vp"
+    },
+    {
+      "name": "bag_icon_size",
+      "value": "20vp"
+    },
+    {
+      "name": "bag_icon_margin_bottom",
+      "value": "2vp"
+    },
+    {
+      "name": "bag_icon_font_size",
+      "value": "10fp"
+    },
+    {
+      "name": "bag_icon_line_height",
+      "value": "14vp"
+    },
+    {
+      "name": "bag_icon_width",
+      "value": "36vp"
+    },
+    {
+      "name": "bag_icon_margin_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "bag_icon_margin_md_sm",
+      "value": "12vp"
+    },
+    {
+      "name": "preferential_scheme_font_size",
+      "value": "12fp"
+    },
+    {
+      "name": "preferential_scheme_line_height",
+      "value": "16vp"
+    },
+    {
+      "name": "preferential_scheme_height",
+      "value": "28vp"
+    },
+    {
+      "name": "preferential_scheme_padding",
+      "value": "8vp"
+    },
+    {
+      "name": "preferential_scheme_margin_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "preferential_scheme_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_item_image_size_lg",
+      "value": "124vp"
+    },
+    {
+      "name": "bag_item_image_size",
+      "value": "134vp"
+    },
+    {
+      "name": "bag_item_name_font_size",
+      "value": "12fp"
+    },
+    {
+      "name": "bag_item_name_margin_bottom",
+      "value": "4vp"
+    },
+    {
+      "name": "bag_item_remark_font_size",
+      "value": "9fp"
+    },
+    {
+      "name": "bag_item_remark_margin_bottom",
+      "value": "5vp"
+    },
+    {
+      "name": "bag_item_discounts_font_size",
+      "value": "9fp"
+    },
+    {
+      "name": "bag_item_discounts_padding_top",
+      "value": "2vp"
+    },
+    {
+      "name": "bag_item_discounts_padding_left",
+      "value": "4vp"
+    },
+    {
+      "name": "bag_item_discounts_border_radius",
+      "value": "4vp"
+    },
+    {
+      "name": "bag_item_discounts_border_width",
+      "value": "0.5vp"
+    },
+    {
+      "name": "bag_item_discounts_margin_right",
+      "value": "5vp"
+    },
+    {
+      "name": "bag_item_font_size",
+      "value": "16fp"
+    },
+    {
+      "name": "bag_item_height_lg",
+      "value": "124vp"
+    },
+    {
+      "name": "bag_item_height",
+      "value": "134vp"
+    },
+    {
+      "name": "bag_item_padding_top",
+      "value": "16vp"
+    },
+    {
+      "name": "bag_item_padding_left",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_item_margin_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "bag_item_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "index_bind_detents",
+      "value": "534vp"
+    },
+    {
+      "name": "index_col_padding_top_1",
+      "value": "8vp"
+    },
+    {
+      "name": "index_col_padding_top_2",
+      "value": "16vp"
+    },
+    {
+      "name": "pay_button_width",
+      "value": "72vp"
+    },
+    {
+      "name": "live_pay_button_height",
+      "value": "28vp"
+    },
+    {
+      "name": "pay_button_font",
+      "value": "14fp"
+    },
+    {
+      "name": "all_comments_font",
+      "value": "14fp"
+    },
+    {
+      "name": "all_comments_line",
+      "value": "19vp"
+    },
+    {
+      "name": "all_comments_margin",
+      "value": "7vp"
+    },
+    {
+      "name": "comment_extra_img_size",
+      "value": "288vp"
+    },
+    {
+      "name": "comment_extra_font",
+      "value": "10fp"
+    },
+    {
+      "name": "three_column_page_padding",
+      "value": "32vp"
+    },
+    {
+      "name": "sidebar_divider_width",
+      "value": "1vp"
+    },
+    {
+      "name": "live_video_width_sm",
+      "value": "360vp"
+    },
+    {
+      "name": "live_video_width_md",
+      "value": "328vp"
+    },
+    {
+      "name": "live_video_width_lg",
+      "value": "400vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/element/string.json b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..c587f2928061d63b96773464cdecf2d717dc0d5c
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/element/string.json
@@ -0,0 +1,304 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "comment_placeholder",
+      "value": "What to say ..."
+    },
+    {
+      "name": "official_review",
+      "value": "Official anchor"
+    },
+    {
+      "name": "store_name",
+      "value": "Official live broadcast room"
+    },
+    {
+      "name": "number_of_viewers",
+      "value": "738,600 people watch"
+    },
+    {
+      "name": "preferential_scheme",
+      "value": "XX yuan store universal red envelope"
+    },
+    {
+      "name": "pocket_baby",
+      "value": "Pocket goods"
+    },
+    {
+      "name": "currency_symbol",
+      "value": "￥ "
+    },
+    {
+      "name": "OP_CAR_PRODUCT_REMARK_LIST1",
+      "value": "Beidou Satellite News ｜ Low -electricity emergency mode"
+    },
+    {
+      "name": "OP_CAR_PRODUCT_REMARK_LIST2",
+      "value": "Ultra -thin ｜ Super flat ｜ Ultra -reliable"
+    },
+    {
+      "name": "OP_CAR_PRODUCT_REMARK_LIST3",
+      "value": "2.5K high brush eye screen ｜ Light and long battery life"
+    },
+    {
+      "name": "Gifted_points",
+      "value": "Gifted points"
+    },
+    {
+      "name": "flagship_machine",
+      "value": "The new generation of straight screen flagship machine"
+    },
+    {
+      "name": "cheaper",
+      "value": "Performance version of the new product is scheduled for cheaper 200 yuan"
+    },
+    {
+      "name": "Shopping_bag",
+      "value": "Shopping bag"
+    },
+    {
+      "name": "search",
+      "value": "search"
+    },
+    {
+      "name": "Order",
+      "value": "Order"
+    },
+    {
+      "name": "all",
+      "value": "all"
+    },
+    {
+      "name": "phone",
+      "value": "Phone"
+    },
+    {
+      "name": "mac",
+      "value": "Tablet"
+    },
+    {
+      "name": "PC",
+      "value": "PC"
+    },
+    {
+      "name": "watch",
+      "value": "Watch"
+    },
+    {
+      "name": "earphone",
+      "value": "Earphone"
+    },
+    {
+      "name": "LIVE_COMMENTS_LIST1",
+      "value": "Farters of outstanding consciousness, wisdom to see everything. The new product of Huawei Mate60 Pro series was released."
+    },
+    {
+      "name": "LIVE_COMMENTS_LIST2",
+      "value": "123xxxxxx published comments, published comments, published comments and comments!"
+    },
+    {
+      "name": "LIVE_COMMENTS_LIST3",
+      "value": "Congratulations to 123xxxxxx to get the official spike discount!"
+    },
+    {
+      "name": "buy_now",
+      "value": "Buy now"
+    },
+    {
+      "name": "living",
+      "value": "Living"
+    },
+    {
+      "name": "store",
+      "value": "Huawei official flagship store"
+    },
+    {
+      "name": "buy",
+      "value": "Buy"
+    },
+    {
+      "name": "CUSTOMER_SERVICE_CONTENTS1",
+      "value": "HUAWEI MATE X5 12GB+512GB Phantom ultra-light four folding ultra-high-definition high-resolution two-screen super smart rhino communication"
+    },
+    {
+      "name": "CUSTOMER_SERVICE_CONTENTS2",
+      "value": "Hello! Want to consult the latest mobile phone released this fall ~"
+    },
+    {
+      "name": "CUSTOMER_SERVICE_CONTENTS3",
+      "value": "Hello, smart customer service assistant will serve you!"
+    },
+    {
+      "name": "CUSTOMER_SERVICE_CONTENTS4",
+      "value": "Welcome to the Huawei official mall. In order to improve the quality of service, your consultation may be recorded. At present, there are fewer store customer service. It is recommended that you give priority to obtaining product information through the product details page or Huawei official website. If the smart customer service cannot solve your problem, you can enter \"manual\" to contact artificial customer service. Thank you for your understanding and support ~"
+    },
+    {
+      "name": "COLOR_SELECT_NAME_LIST1",
+      "value": "Phantom Purple"
+    },
+    {
+      "name": "COLOR_SELECT_NAME_LIST2",
+      "value": "Feather Sand Black"
+    },
+    {
+      "name": "COLOR_SELECT_NAME_LIST3",
+      "value": "Feather Sand White"
+    },
+    {
+      "name": "COLOR_SELECT_NAME_LIST4",
+      "value": "Qing Shan Dai"
+    },
+    {
+      "name": "Official_standard",
+      "value": "Official standard"
+    },
+    {
+      "name": "add_cart",
+      "value": "Add to cart"
+    },
+    {
+      "name": "SELECT_NAME_LIST1",
+      "value": "Body color"
+    },
+    {
+      "name": "SELECT_NAME_LIST2",
+      "value": "Storage capacity"
+    },
+    {
+      "name": "SELECT_NAME_LIST3",
+      "value": "Package Type"
+    },
+    {
+      "name": "pay_info1",
+      "value": "XXXX Avenue XXXX Building XX Unit XX"
+    },
+    {
+      "name": "pay_info2",
+      "value": "Contact +8610000000000"
+    },
+    {
+      "name": "pay_info3",
+      "value": "Huawei Wallet Payment"
+    },
+    {
+      "name": "pay_info4",
+      "value": "Pay now"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES1",
+      "value": "Selected"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES2",
+      "value": "Phantom Purple · 512GB · Instant Delivery in Stock"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES3",
+      "value": "Suggest"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES5",
+      "value": "Recycle"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES6",
+      "value": "High-priced recycling sends more re-subsidies"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES7",
+      "value": "Free shipping for orders over 48 yuan"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES8",
+      "value": "Products, shipping invoices, and after-sales services provided by Huawei terminals"
+    },
+    {
+      "name": "USER_COMMENT_NAMES1",
+      "value": "User reviews (1500+)"
+    },
+    {
+      "name": "USER_COMMENT_NAMES2",
+      "value": "Most Popular 77"
+    },
+    {
+      "name": "USER_COMMENT_NAMES3",
+      "value": "Content 858"
+    },
+    {
+      "name": "USER_COMMENT_NAMES4",
+      "value": "There is Figures 217"
+    },
+    {
+      "name": "USER_COMMENT_NAMES5",
+      "value": "Y**********"
+    },
+    {
+      "name": "USER_COMMENT_NAMES6",
+      "value": "Huawei phones have good battery life, clear camera performance, smooth operation, and powerful functions. The key is their outstanding appearance, which is highly recommended!"
+    },
+    {
+      "name": "USER_COMMENT_NAMES7",
+      "value": "All reviews"
+    },
+    {
+      "name": "USER_COMMENT_NAMES8",
+      "value": "Yaojin Black, 256GB, in stock quick delivery"
+    },
+    {
+      "name": "compare",
+      "value": "Compare"
+    },
+    {
+      "name": "PRODUCT_DISCOUNT_NAMES1",
+      "value": "【 Stock Quick Release 】 HUAWEI Mate X5 12GB+512GB Phantom Purple"
+    },
+    {
+      "name": "PRODUCT_DISCOUNT_NAMES2",
+      "value": "【 Huawei Super New Product Season 】 1. Limited edition purchase with a smart window protection case worth 299 yuan 2. Student authentication discount of 100 yuan (click down to learn more) 3. Trade in for new up to 500 yuan subsidy | More selected phones click to learn>>Ultra clear mirror dual screen | Ultra thin four fold folding"
+    },
+    {
+      "name": "PRODUCT_DISCOUNT_NAMES3",
+      "value": "Limited edition gift with unlimited earphones, Vitality Edition"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES1",
+      "value": "There are still"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES2",
+      "value": "Enjoy up to 12 periods of interest with 0 installments"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES3",
+      "value": "Premium"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES4",
+      "value": "￥800 off"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES5",
+      "value": "Trade in subsidy"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES6",
+      "value": "P.P"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES7",
+      "value": "Longgang District, Shenzhen City, Guangdong Province"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES8",
+      "value": "Spot"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES4",
+      "value": " 推荐"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/comment_picture.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/comment_picture.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4ebbb3c1f8fded3fa837e16a313293e32d35ff6
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/comment_picture.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_back.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_back.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6a9c5278c37dfc51c244707ec429be034c087793
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_back.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>back</title>
+    <defs>
+        <path d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="典型页面3：商品详情（折叠屏）" transform="translate(-24.000000, -40.000000)">
+            <g id="back" transform="translate(24.000000, 40.000000)">
+                <path d="M15,0 C23.2842712,0 30,6.71572875 30,15 C30,23.2842712 23.2842712,30 15,30 C6.71572875,30 0,23.2842712 0,15 C0,6.71572875 6.71572875,0 15,0 Z" id="路径" fill-opacity="0.4" fill="#000000" fill-rule="nonzero"></path>
+                <g id="Public/ic_public_back" transform="translate(3.000000, 3.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="形状结合" fill-rule="nonzero"></g>
+                    <g id="编组" mask="url(#mask-2)" fill="#FFFFFF">
+                        <g id="Symbol/color-light/colorPrimary">
+                            <rect id="color/#000000" x="0" y="0" width="24" height="24"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_mate_pad_1.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_mate_pad_1.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3d0decc78855fab7f1735f954671b5c5ab68556d
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_mate_pad_1.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>MatePad</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="典型页面3：商品详情（折叠屏）" transform="translate(-569.000000, -40.000000)">
+            <g id="MatePad" transform="translate(569.000000, 40.000000)">
+                <path d="M15,0 C23.2842712,-1.52179594e-15 30,6.71572875 30,15 C30,23.2842712 23.2842712,30 15,30 C6.71572875,30 1.01453063e-15,23.2842712 0,15 C-1.01453063e-15,6.71572875 6.71572875,1.52179594e-15 15,0 Z" id="矩形" fill-opacity="0.4" fill="#000000"></path>
+                <g id="icon_Pad" transform="translate(3.000000, 3.000000)" stroke="#FFFFFF" stroke-width="1.38461538">
+                    <g id="编组-2" transform="translate(2.769231, 4.615385)">
+                        <g id="悬浮窗图标">
+                            <path d="M13.7282119,0.692307692 C15.1780331,0.692307692 15.7135033,0.818793296 16.2461467,1.10365413 C16.7254242,1.35997452 17.1015639,1.73611429 17.3578843,2.21539176 C17.6427452,2.7480352 17.7692308,3.28350539 17.7692308,4.73332652 L17.7692308,4.73332652 L17.7692308,10.0359042 C17.7692308,11.4857254 17.6427452,12.0211956 17.3578843,12.553839 C17.1015639,13.0331165 16.7254242,13.4092562 16.2461467,13.6655766 C15.7135033,13.9504375 15.1780331,14.0769231 13.7282119,14.0769231 L13.7282119,14.0769231 L4.73332652,14.0769231 C3.28350539,14.0769231 2.7480352,13.9504375 2.21539176,13.6655766 C1.73611429,13.4092562 1.35997452,13.0331165 1.10365413,12.553839 C0.818793296,12.0211956 0.692307692,11.4857254 0.692307692,10.0359042 L0.692307692,10.0359042 L0.692307692,4.73332652 C0.692307692,3.28350539 0.818793296,2.7480352 1.10365413,2.21539176 C1.35997452,1.73611429 1.73611429,1.35997452 2.21539176,1.10365413 C2.7480352,0.818793296 3.28350539,0.692307692 4.73332652,0.692307692 L4.73332652,0.692307692 Z" id="矩形"></path>
+                        </g>
+                        <path d="" id="矩形"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_mate_pad_2.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_mate_pad_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..06731dc26829e0405abe7c5ba12fd5effb6a51bd
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_mate_pad_2.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_more.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_more.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1c1ee7ec5d40a5794dd65ee83435bbe633cfe9de
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_more.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>more</title>
+    <defs>
+        <path d="M6.25,16 C7.21649831,16 8,16.7835017 8,17.75 C8,18.7164983 7.21649831,19.5 6.25,19.5 C5.28350169,19.5 4.5,18.7164983 4.5,17.75 C4.5,16.7835017 5.28350169,16 6.25,16 Z M17.75,16 C18.7164983,16 19.5,16.7835017 19.5,17.75 C19.5,18.7164983 18.7164983,19.5 17.75,19.5 C16.7835017,19.5 16,18.7164983 16,17.75 C16,16.7835017 16.7835017,16 17.75,16 Z M6.25,4.5 C7.21649831,4.5 8,5.28350169 8,6.25 C8,7.21649831 7.21649831,8 6.25,8 C5.28350169,8 4.5,7.21649831 4.5,6.25 C4.5,5.28350169 5.28350169,4.5 6.25,4.5 Z M17.75,4.5 C18.7164983,4.5 19.5,5.28350169 19.5,6.25 C19.5,7.21649831 18.7164983,8 17.75,8 C16.7835017,8 16,7.21649831 16,6.25 C16,5.28350169 16.7835017,4.5 17.75,4.5 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="典型页面3：商品详情（折叠屏）" transform="translate(-623.000000, -40.000000)">
+            <g id="more" transform="translate(623.000000, 40.000000)">
+                <path d="M15,0 C23.2842712,0 30,6.71572875 30,15 C30,23.2842712 23.2842712,30 15,30 C6.71572875,30 0,23.2842712 0,15 C0,6.71572875 6.71572875,0 15,0 Z" id="路径" fill-opacity="0.4" fill="#000000" fill-rule="nonzero"></path>
+                <g id="Public/ic_public_more" transform="translate(3.000000, 3.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="形状结合"></g>
+                    <g id="编组" mask="url(#mask-2)" fill="#FFFFFF">
+                        <g id="Symbol/color-light/colorPrimary">
+                            <rect id="color/#000000" x="0" y="0" width="24" height="24"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_add.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_add.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d9cd20bc03fb535b6973c4f068b74752adc170bb
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_add.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <path d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M12.75,17.25 C12.75,17.6642136 12.4142136,18 12,18 C11.5857864,18 11.25,17.6642136 11.25,17.25 L11.25,12.749 L6.75,12.75 C6.33578644,12.75 6,12.4142136 6,12 C6,11.5857864 6.33578644,11.25 6.75,11.25 L11.25,11.249 L11.25,6.75 C11.25,6.33578644 11.5857864,6 12,6 C12.4142136,6 12.75,6.33578644 12.75,6.75 L12.75,17.25 Z M17.25,11.25 C17.6642136,11.25 18,11.5857864 18,12 C18,12.4142136 17.6642136,12.75 17.25,12.75 L13.75,12.75 L13.75,11.25 L17.25,11.25 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="形状结合" fill-rule="nonzero"></g>
+            <g mask="url(#mask-2)" fill="#000000" fill-opacity="0.9" id="color/#000000">
+                <g>
+                    <rect x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_close.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_close.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ac485ef36a8d7376bc340c6450a80400cf7d3ab3
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_close.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <path d="M19.7781746,4.22182541 C20.0710678,4.51471863 20.0710678,4.98959236 19.7781746,5.28248558 L5.28248558,19.7781746 C4.98959236,20.0710678 4.51471863,20.0710678 4.22182541,19.7781746 C3.92893219,19.4852814 3.92893219,19.0104076 4.22182541,18.7175144 L10.9395166,11.9994697 L4.22182541,5.28248558 C3.92893219,4.98959236 3.92893219,4.51471863 4.22182541,4.22182541 C4.51471863,3.92893219 4.98959236,3.92893219 5.28248558,4.22182541 L12,10.9389863 L18.7175144,4.22182541 C19.0104076,3.92893219 19.4852814,3.92893219 19.7781746,4.22182541 Z M19.7781746,18.7175144 C20.0710678,19.0104076 20.0710678,19.4852814 19.7781746,19.7781746 C19.4852814,20.0710678 19.0104076,20.0710678 18.7175144,19.7781746 L12.7072836,13.7675902 L13.767767,12.7071068 L19.7781746,18.7175144 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="形状"></g>
+            <g mask="url(#mask-2)" fill="#000000" fill-opacity="0.9" id="color/#000000">
+                <g>
+                    <rect x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_emoji.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_emoji.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ba60cf2cc88529fe297cedd4dad76afffad2959a
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_emoji.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <path d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M17.375998,13.8508265 C17.7345266,14.0582636 17.8570105,14.5170694 17.6495735,14.875598 C16.491715,16.8768095 14.3553047,18.1360571 12.0002,18.1360571 C9.64518533,18.1360571 7.50876034,16.8768925 6.35085437,14.8759408 C6.14339079,14.5174275 6.26584073,14.0586127 6.62435396,13.8511491 C6.9828672,13.6436855 7.44168206,13.7661355 7.64914563,14.1246487 C8.54157382,15.6668342 10.1860548,16.6360571 12.0002,16.6360571 C13.8143986,16.6360571 15.4588331,15.6667909 16.3512265,14.124402 C16.5586636,13.7658734 17.0174694,13.6433895 17.375998,13.8508265 Z M7.25,8 C7.9403125,8 8.5,8.5596875 8.5,9.25 C8.5,9.9403125 7.9403125,10.5 7.25,10.5 C6.5596875,10.5 6,9.9403125 6,9.25 C6,8.5596875 6.5596875,8 7.25,8 Z M16.75,8 C17.4403125,8 18,8.5596875 18,9.25 C18,9.9403125 17.4403125,10.5 16.75,10.5 C16.0596875,10.5 15.5,9.9403125 15.5,9.25 C15.5,8.5596875 16.0596875,8 16.75,8 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="合并形状" fill-rule="nonzero"></g>
+            <g mask="url(#mask-2)" fill="#000000" fill-opacity="0.9" id="color/#000000">
+                <g>
+                    <rect x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_gps.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_gps.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9eb7df260ff3cb3a87f7d2c47a30f1be746d21f8
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_gps.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_gps</title>
+    <defs>
+        <path d="M12,0.890443665 C17.1054507,0.890443665 21.25,4.95664638 21.25,9.97979602 C21.25,11.9360332 20.6574499,13.8475128 19.5576286,15.7794054 C18.8729064,16.982155 18.0501448,18.1145504 16.9608635,19.4075471 L16.9608635,19.4075471 L16.694253,19.7210681 L16.4170134,20.0414657 C16.3227849,20.1494899 16.226719,20.2587783 16.1287501,20.3694494 C15.9102985,20.6162244 15.6650022,20.8755327 15.3927717,21.1475453 L15.3927717,21.1475453 L15.1835472,21.3539395 C15.0406956,21.4931272 14.8911049,21.6355018 14.7347638,21.7810844 L14.7347638,21.7810844 L14.495188,22.0018672 L14.495188,22.0018672 L14.3716004,22.1140683 L14.1168206,22.3420995 C14.0302033,22.4189177 13.941895,22.4965447 13.8518942,22.5749831 L13.8518942,22.5749831 L13.576813,22.812735 C12.7041229,23.5609204 11.420977,23.5841619 10.509368,22.8615879 L10.509368,22.8615879 L10.4382537,22.8023123 L10.1073598,22.5137335 L9.90321903,22.3340223 L9.61389638,22.0766955 L9.34473731,21.8339368 L9.09562633,21.6056114 L8.86644795,21.3915843 L8.724679,21.2567766 L8.59168343,21.1282238 L8.46742704,21.005886 L8.35187559,20.8897232 L8.24499487,20.7796955 C8.22790207,20.7618666 8.21116914,20.7442916 8.19479534,20.7269698 L8.19479534,20.7269698 L8.10085655,20.6260697 L7.86894106,20.3672896 L7.61273271,20.0767393 C7.57055128,20.0285012 7.5286302,19.9803553 7.48697003,19.9322997 L7.48697003,19.9322997 L7.24014438,19.6450348 L6.99960722,19.3598463 L6.99960722,19.3598463 L6.88170517,19.2180024 L6.65065082,18.9357582 L6.42595171,18.6553632 C4.02623205,15.6274382 2.75,12.9090303 2.75,9.97979602 C2.75,4.99342455 6.70791088,0.971543045 11.7334486,0.891584596 L11.7334486,0.891584596 L11.8799375,0.890443665 Z M12,2.39041996 L11.8859001,2.39041996 L11.751346,2.39146593 C7.55083692,2.4583177 4.25,5.81250514 4.25,9.97979602 C4.25,12.896509 5.7991974,15.7221073 8.73645395,19.0830958 L8.73645395,19.0830958 L8.98797346,19.3684114 L9.21242661,19.6189224 C9.22500367,19.6326529 9.23793618,19.6466487 9.25122371,19.6609093 L9.25122371,19.6609093 L9.33520518,19.7496461 L9.42768459,19.8447124 L9.52863979,19.9460825 L9.69591626,20.1099012 L9.88213873,20.2877593 L10.0872325,20.4795705 L10.2344088,20.6151536 L10.4707886,20.8300276 L10.7258404,21.058624 L10.9994895,21.3008564 L11.4099685,21.659761 L11.4539143,21.6964471 C11.7903355,21.963019 12.2735456,21.9542667 12.6005016,21.6739567 L12.6005016,21.6739567 L12.8630218,21.4470837 L13.1154007,21.2252993 C13.1978358,21.152221 13.2785793,21.0799935 13.3576298,21.0086194 L13.3576298,21.0086194 L13.5897008,20.7970601 L13.8116053,20.5906375 L14.0233349,20.3893676 L14.2248812,20.1932664 C14.5195589,19.9029991 14.7798395,19.6302305 15.0055957,19.3752039 C15.0481588,19.3271223 15.0904304,19.279197 15.1324106,19.2314252 L15.1324106,19.2314252 L15.3807972,18.9466135 C15.4216128,18.8994442 15.4621375,18.8524226 15.5023714,18.8055459 L15.5023714,18.8055459 L15.7402879,18.5260009 L15.9712367,18.2497939 C16.1228823,18.066738 16.2698895,17.8858152 16.4122716,17.7068412 L16.4122716,17.7068412 L16.6223776,17.4398186 C18.723223,14.739479 19.75,12.4708886 19.75,9.97979602 C19.75,5.7915486 16.2833634,2.39041996 12,2.39041996 L12,2.39041996 Z M12,7.75 C13.2426407,7.75 14.25,8.75735931 14.25,10 C14.25,11.2426407 13.2426407,12.25 12,12.25 C10.7573593,12.25 9.75,11.2426407 9.75,10 C9.75,8.75735931 10.7573593,7.75 12,7.75 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_gps" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_蒙版" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_highlightsed.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_highlightsed.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0a253bb1ce80ac9867424ab530ef288c8e66afef
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_highlightsed.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_collected</title>
+    <defs>
+        <path d="M18.9644843,13.4953627 L18.5583362,13.891644 C18.3226501,14.1213812 18.2151017,14.4523814 18.2707396,14.7767754 L19.0417936,19.2723649 C19.2051753,20.2249537 18.5653966,21.1296265 17.6128078,21.2930083 C17.233482,21.3580678 16.8432878,21.2962671 16.502632,21.1171737 L13.370917,19.4707361 C14.8799294,18.2083685 16.3396237,16.5514564 17.75,14.5 C17.8946364,14.3590143 18.3500792,14.0014458 18.9644843,13.4953627 Z M12.77449,1.63492692 C13.1196121,1.80525484 13.3989602,2.084603 13.5692881,2.42972506 L15.5879336,6.51994748 C15.7335956,6.81509095 16.0151612,7.01966033 16.3408713,7.06698879 L20.8546998,7.72288645 C21.8111533,7.86186728 22.4738458,8.74989227 22.334865,9.70634578 C22.2795221,10.0872106 22.1001695,10.4392098 21.8245732,10.7078499 L19.6760114,12.8014342 L19.5568049,12.9183776 L18.901793,13.4819135 C17.5965541,14.5925465 16.3200252,15.6045457 15.0722065,16.5179114 C13.6164179,17.5835046 12.107038,18.5826772 10.5440669,19.5154293 L10.5479464,19.5118248 L7.49736799,21.1171737 C6.64188996,21.5669251 5.58379244,21.2380187 5.13404103,20.3825407 C4.95494765,20.0418849 4.89314697,19.6516907 4.95820645,19.2723649 L5.7292604,14.7767754 C5.78489833,14.4523814 5.67734985,14.1213812 5.44166376,13.891644 L2.17542683,10.7078499 C1.48333057,10.0332227 1.46916903,8.92527453 2.14379615,8.23317827 C2.41243621,7.95758191 2.76443543,7.77822934 3.14530023,7.72288645 L7.65912866,7.06698879 C7.98483882,7.01966033 8.26640441,6.81509095 8.41206642,6.51994748 L10.4307119,2.42972506 C10.8584509,1.56303116 11.9077961,1.20718791 12.77449,1.63492692 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_collected" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#E02020" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_living.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_living.png
new file mode 100644
index 0000000000000000000000000000000000000000..43c8ace17422a2ca71c629c970d14802d129770d
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_living.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_more.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_more.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c4325c770545c0370732ab073f88c9df8d372d00
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_more.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <path d="M6.25,16 C7.21649831,16 8,16.7835017 8,17.75 C8,18.7164983 7.21649831,19.5 6.25,19.5 C5.28350169,19.5 4.5,18.7164983 4.5,17.75 C4.5,16.7835017 5.28350169,16 6.25,16 Z M17.75,16 C18.7164983,16 19.5,16.7835017 19.5,17.75 C19.5,18.7164983 18.7164983,19.5 17.75,19.5 C16.7835017,19.5 16,18.7164983 16,17.75 C16,16.7835017 16.7835017,16 17.75,16 Z M6.25,4.5 C7.21649831,4.5 8,5.28350169 8,6.25 C8,7.21649831 7.21649831,8 6.25,8 C5.28350169,8 4.5,7.21649831 4.5,6.25 C4.5,5.28350169 5.28350169,4.5 6.25,4.5 Z M17.75,4.5 C18.7164983,4.5 19.5,5.28350169 19.5,6.25 C19.5,7.21649831 18.7164983,8 17.75,8 C16.7835017,8 16,7.21649831 16,6.25 C16,5.28350169 16.7835017,4.5 17.75,4.5 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="形状结合"></g>
+            <g mask="url(#mask-2)" fill="#000000" fill-opacity="0.9" id="color/#000000">
+                <g>
+                    <rect x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_todo.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_todo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5452b4e670e93eea4ad7308d70b914c30755c1bb
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_todo.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_todo</title>
+    <defs>
+        <path d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M18.1871843,8.71966991 C18.4696171,9.00210266 18.479704,9.45374943 18.217445,9.7482689 L18.1871843,9.78033009 L12.2374369,15.7300776 C11.5682572,16.3992572 10.4919646,16.4131984 9.80582194,15.7719013 L9.76256313,15.7300776 L6.31281566,12.2803301 C6.20630904,12.1738235 6.1385321,12.0432533 6.10948484,11.9061203 L6.0949612,11.8023136 L6.0949612,11.6976864 C6.10706423,11.5235358 6.17968238,11.3528032 6.31281566,11.2196699 C6.59524841,10.9372372 7.04689518,10.9271503 7.34141465,11.1894093 L7.37347584,11.2196699 L10.4696699,14.315864 C10.7521027,14.5982967 11.2037494,14.6083836 11.4982689,14.3461246 L11.5303301,14.315864 L17.1265242,8.71966991 C17.4194174,8.4267767 17.8942911,8.4267767 18.1871843,8.71966991 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_todo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_voice.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_voice.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bbd9e35461fa7c11939681ef64d6c2ac08d946dd
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_public_voice.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <path d="M19.6297132,3.97021633 C21.767174,6.11208412 22.9900393,9.00753275 22.9900393,12.0946605 C22.9900393,15.1739324 21.7734214,18.0626391 19.6455849,20.2031692 C19.3535641,20.4969322 18.8786924,20.4983444 18.5849295,20.2063235 C18.2911665,19.9143026 18.2897543,19.4394309 18.5817752,19.145668 C20.4329978,17.2834019 21.4900393,14.7735894 21.4900393,12.0946605 C21.4900393,9.4089026 20.4275654,6.89322181 18.5679613,5.02978367 C18.2753698,4.73658898 18.2758589,4.2617155 18.5690535,3.96912406 C18.8622482,3.67653262 19.3371217,3.67702165 19.6297132,3.97021633 Z M7.67146054,5.77188408 C8.4325828,5.17622318 9.53247286,5.31035612 10.1281338,6.07147837 C10.3690847,6.37936011 10.5,6.75905937 10.5,7.15001783 L10.5,7.15001783 L10.5,17.045134 C10.5,18.0116323 9.71649831,18.795134 8.75,18.795134 C8.35904154,18.795134 7.97934229,18.6642187 7.67138834,18.4232113 L7.67138834,18.4232113 L4.38,15.8465759 L2.25,15.8475759 C1.05913601,15.8475759 0.084355084,14.9224143 0.00519081254,13.7516247 L0.00519081254,13.7516247 L0,13.5975759 L0,10.5975759 C0,9.35493524 1.00735931,8.34757593 2.24981101,8.34757595 L2.24981101,8.34757595 L4.379,8.34657593 Z M16.4901783,6.49794378 C17.9618152,7.97261488 18.8039928,9.96668727 18.8039928,12.0921781 C18.8039928,14.2122592 17.966117,16.2016903 16.5011051,17.6754418 C16.2090842,17.9692047 15.7342125,17.9706169 15.4404496,17.678596 C15.1466866,17.3865751 15.1452744,16.9117035 15.4372953,16.6179406 C16.6256934,15.4224531 17.3039928,13.8119162 17.3039928,12.0921781 C17.3039928,10.3680571 16.6222066,8.75375258 15.4284264,7.55751111 C15.1358349,7.26431643 15.136324,6.78944294 15.4295187,6.4968515 C15.7227133,6.20426006 16.1975868,6.20474909 16.4901783,6.49794378 Z M8.94687625,6.99594076 C8.86178184,6.88720901 8.70465469,6.86804716 8.59586895,6.95318383 L8.59586895,6.95318383 L4.89763507,9.84690879 L2.25,9.84757593 C1.83578644,9.84757593 1.5,10.1833624 1.5,10.5975759 L1.5,10.5975759 L1.5,13.5975759 C1.5,14.0117895 1.83578644,14.3475759 2.24981101,14.347576 L2.24981101,14.347576 L4.89755819,14.3469088 L8.59592293,17.2420103 C8.63990604,17.2764318 8.69414879,17.295134 8.75,17.295134 C8.88807119,17.295134 9,17.1832052 9,17.045134 L9,17.045134 L9,7.15001783 C9,7.09416662 8.98129781,7.03992387 8.94687625,6.99594076 Z M13.6408603,9.2089851 C14.3913218,9.97869506 14.819589,11.0098911 14.819589,12.1067087 C14.819589,13.2171715 14.3805594,14.2600877 13.613475,15.0322585 C13.3215512,15.326118 12.8466801,15.3276871 12.5528206,15.0357634 C12.2589611,14.7438396 12.2573919,14.2689685 12.5493157,13.975109 C13.0399975,13.4811736 13.319589,12.817003 13.319589,12.1067087 C13.319589,11.4051196 13.0468694,10.7484563 12.5668561,10.2561312 C12.2776947,9.9595531 12.2837071,9.48471743 12.5802852,9.19555603 C12.8768633,8.90639462 13.3516989,8.91240702 13.6408603,9.2089851 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="合并形状" fill-rule="nonzero"></g>
+            <g mask="url(#mask-2)" fill="#000000" fill-opacity="0.9" id="color/#000000">
+                <g>
+                    <rect x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_zoom_out.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_zoom_out.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b068493d486fefb6aa543563a7f7fecbee69a89
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/ic_zoom_out.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_bag.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_bag.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f55cc3b9e90c2d0cbf5639494f7c16719bcb2c4b
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_bag.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_favourites</title>
+    <defs>
+        <path d="M15,1.66666667 C16.8409492,1.66666667 18.3333333,3.15905083 18.3333333,5 L18.3333333,15 C18.3333333,16.8409492 16.8409492,18.3333333 15,18.3333333 L5,18.3333333 C3.15905083,18.3333333 1.66666667,16.8409492 1.66666667,15 L1.66666667,5 C1.66666667,3.15905083 3.15905083,1.66666667 5,1.66666667 L15,1.66666667 Z M15,2.91666667 L5,2.91666667 C3.8954305,2.91666667 2.99163444,3.77627995 2.92109807,4.86302026 L2.91666667,5 L2.91666667,15 C2.91666667,16.1045695 3.77627995,17.0083656 4.86302026,17.0789019 L5,17.0833333 L15,17.0833333 C16.1045695,17.0833333 17.0083656,16.2237201 17.0789019,15.1369797 L17.0833333,15 L17.0833333,5 C17.0833333,3.8954305 16.2237201,2.99163444 15.1369797,2.92109807 L15,2.91666667 Z M13.75,5 C14.095178,5 14.375,5.27982203 14.375,5.625 C14.375,8.04124578 12.4162458,10 10,10 C7.58375422,10 5.625,8.04124578 5.625,5.625 C5.625,5.27982203 5.90482203,5 6.25,5 C6.59517797,5 6.875,5.27982203 6.875,5.625 C6.875,7.35088984 8.27411016,8.75 10,8.75 C11.7258898,8.75 13.125,7.35088984 13.125,5.625 C13.125,5.27982203 13.404822,5 13.75,5 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="视觉调整：典型页面-8：直播间购物袋_边看边选（平板）" transform="translate(-1085.000000, -55.000000)">
+            <g id="编组-5" transform="translate(1076.000000, 54.000000)">
+                <g id="Public/ic_favourites" transform="translate(8.000000, 0.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="形状结合" fill-rule="nonzero"></g>
+                    <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+                        <g id="Symbol/color-light/colorPrimary">
+                            <rect id="color/#000000" x="0" y="0" width="20" height="20"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_cart.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_cart.png
new file mode 100644
index 0000000000000000000000000000000000000000..a94b2113825634cc420e69232f6fa05223c927a0
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_cart.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_close_1.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_close_1.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ac485ef36a8d7376bc340c6450a80400cf7d3ab3
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_close_1.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <path d="M19.7781746,4.22182541 C20.0710678,4.51471863 20.0710678,4.98959236 19.7781746,5.28248558 L5.28248558,19.7781746 C4.98959236,20.0710678 4.51471863,20.0710678 4.22182541,19.7781746 C3.92893219,19.4852814 3.92893219,19.0104076 4.22182541,18.7175144 L10.9395166,11.9994697 L4.22182541,5.28248558 C3.92893219,4.98959236 3.92893219,4.51471863 4.22182541,4.22182541 C4.51471863,3.92893219 4.98959236,3.92893219 5.28248558,4.22182541 L12,10.9389863 L18.7175144,4.22182541 C19.0104076,3.92893219 19.4852814,3.92893219 19.7781746,4.22182541 Z M19.7781746,18.7175144 C20.0710678,19.0104076 20.0710678,19.4852814 19.7781746,19.7781746 C19.4852814,20.0710678 19.0104076,20.0710678 18.7175144,19.7781746 L12.7072836,13.7675902 L13.767767,12.7071068 L19.7781746,18.7175144 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="形状"></g>
+            <g mask="url(#mask-2)" fill="#000000" fill-opacity="0.9" id="color/#000000">
+                <g>
+                    <rect x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_close_2.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_close_2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..860458282b473157754dda949d3ddf81c850f252
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_close_2.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Panel/item/close btn</title>
+    <defs>
+        <path d="M3.75735931,13.1854497 C3.49700978,13.4457993 3.0748998,13.4457993 2.81455027,13.1854497 C2.55420074,12.9251002 2.55420074,12.5029902 2.81455027,12.2426407 L7.05719096,8 L2.81455027,3.75735931 C2.55420074,3.49700979 2.55420074,3.0748998 2.81455027,2.81455027 C3.0748998,2.55420074 3.49700978,2.55420074 3.75735931,2.81455027 L8,7.05719096 L12.2426407,2.81455027 C12.5029902,2.55420075 12.9251002,2.55420075 13.1854497,2.81455027 C13.4457993,3.0748998 13.4457993,3.49700979 13.1854497,3.75735932 L3.75735931,13.1854497 Z M13.1854497,12.2426407 C13.4457993,12.5029902 13.4457993,12.9251002 13.1854497,13.1854497 C12.9251002,13.4457993 12.5029902,13.4457993 12.2426407,13.1854497 L8.47140452,9.41421356 L9.41421356,8.47140452 L13.1854497,12.2426407 Z" id="path-1"></path>
+    </defs>
+    <g id="Panel/item/close-btn" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <circle id="椭圆形" fill-opacity="0.05" fill="#000000" cx="16" cy="16" r="16"></circle>
+            <g transform="translate(8.000000, 8.000000)" id="Public/ic_cancel">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="形状" fill-rule="nonzero"></g>
+                <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.901960784">
+                    <g id="Symbol/color-light/colorPrimary">
+                        <rect id="color/#000000" x="0" y="0" width="16" height="16"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_close_3.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_close_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3908f63779042ad37bd26d3bc470ce68d267426
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_close_3.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_close_4.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_close_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..e226e06abf449470829dd8b9dd30c9d21606fdc7
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_close_4.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_like.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_like.png
new file mode 100644
index 0000000000000000000000000000000000000000..7cb00e83b27f5b6ddc8f58f8a54384ddfb199f33
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_like.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_order.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_order.svg
new file mode 100644
index 0000000000000000000000000000000000000000..20459c675a9f0de04dc8d934a8f55cb5ecd51105
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_order.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <path d="M13.226858,0.833333333 C14.6811084,0.833333333 15.2281761,0.981529344 15.7600667,1.26019581 L15.7947428,1.27855451 C16.3120856,1.55523243 16.7234006,1.9550872 17.0123554,2.46178633 L17.0547788,2.53859049 C17.3452906,3.08180037 17.5,3.62061077 17.5,5.10647533 L17.5,14.8935247 L17.499161,15.0781381 C17.4868668,16.3953175 17.3396881,16.9179685 17.0731375,17.4267333 L17.0547788,17.4614095 C16.7781009,17.9787522 16.3782461,18.3900672 15.871547,18.679022 L15.7947428,18.7214455 C15.251533,19.0119573 14.7127226,19.1666667 13.226858,19.1666667 L6.773142,19.1666667 L6.58852855,19.1658277 C5.27134916,19.1535334 4.74869819,19.0063547 4.23993332,18.7398042 L4.20525716,18.7214455 C3.68791442,18.4447676 3.27659942,18.0449128 2.98764465,17.5382137 L2.94522117,17.4614095 C2.65470935,16.9181996 2.5,16.3793892 2.5,14.8935247 L2.5,5.10647533 C2.5,3.65222491 2.64819601,3.1051572 2.92686248,2.57326665 L2.94522117,2.53859049 C3.2218991,2.02124775 3.62175387,1.60993276 4.128453,1.32097798 L4.20525716,1.27855451 C4.74846704,0.988042685 5.28727743,0.833333333 6.773142,0.833333333 L13.226858,0.833333333 Z M13.3961151,2.08392212 L6.68711528,2.08347951 L6.51921504,2.084715 C5.54590133,2.09598058 5.17484673,2.17754611 4.79475573,2.380821 C4.46938145,2.55483308 4.22149974,2.80271478 4.04748767,3.12808907 C3.82741799,3.5395836 3.75,3.94048684 3.75,5.10647533 L3.75014618,14.9795514 L3.75138166,15.1474516 C3.76264725,16.1207653 3.84421278,16.4918199 4.04748767,16.8719109 C4.22149974,17.1972852 4.46938145,17.4451669 4.79475573,17.619179 C5.18567554,17.8282452 5.56703671,17.9085682 6.60388491,17.9160779 L6.773142,17.9166667 L13.226858,17.9166667 C14.3928465,17.9166667 14.7937497,17.8392487 15.2052443,17.619179 C15.5306186,17.4451669 15.7785003,17.1972852 15.9525123,16.8719109 C16.1615785,16.4809911 16.2419016,16.09963 16.2494112,15.0627818 L16.25,14.8935247 L16.25,5.10647533 C16.25,3.94048684 16.172582,3.5395836 15.9525123,3.12808907 C15.7785003,2.80271478 15.5306186,2.55483308 15.2052443,2.380821 C14.8143245,2.17175481 14.4329633,2.09143176 13.3961151,2.08392212 Z M10,13.5416667 C10.345178,13.5416667 10.625,13.8214887 10.625,14.1666667 C10.625,14.5118446 10.345178,14.7916667 10,14.7916667 L6.25,14.7916667 C5.90482203,14.7916667 5.625,14.5118446 5.625,14.1666667 C5.625,13.8214887 5.90482203,13.5416667 6.25,13.5416667 L10,13.5416667 Z M13.75,9.375 C14.095178,9.375 14.375,9.65482203 14.375,10 C14.375,10.345178 14.095178,10.625 13.75,10.625 L6.25,10.625 C5.90482203,10.625 5.625,10.345178 5.625,10 C5.625,9.65482203 5.90482203,9.375 6.25,9.375 L13.75,9.375 Z M13.75,5.20833333 C14.095178,5.20833333 14.375,5.48815536 14.375,5.83333333 C14.375,6.1785113 14.095178,6.45833333 13.75,6.45833333 L6.25,6.45833333 C5.90482203,6.45833333 5.625,6.1785113 5.625,5.83333333 C5.625,5.48815536 5.90482203,5.20833333 6.25,5.20833333 L13.75,5.20833333 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Public/ic_favourites">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="形状结合" fill-rule="nonzero"></g>
+            <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+                <g id="Symbol/color-light/colorPrimary">
+                    <rect id="color/#000000" x="0" y="0" width="20" height="20"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_pay.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_pay.png
new file mode 100644
index 0000000000000000000000000000000000000000..3603b121e69e1b606bb7ff1322b0f840ee42802b
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_pay.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_position.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_position.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dce430afd6e27232b9ab22791a09c9644bce8570
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_position.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>gaps</title>
+    <defs>
+        <path d="M10,0.742036387 C14.2545423,0.742036387 17.7083333,4.13053865 17.7083333,8.31649668 C17.7083333,9.94669431 17.2145416,11.539594 16.2980238,13.1495045 C15.5904776,14.3923458 14.7060569,15.5450398 13.4406251,16.9745412 C12.9627621,17.5143615 12.3307521,18.1261502 11.5432452,18.8124859 L11.5432452,18.8124859 L11.3140108,19.0106125 C10.5867691,19.6341003 9.51748082,19.6534682 8.75780668,19.0513232 L8.75780668,19.0513232 L8.69854478,19.0019269 L8.42279985,18.7614446 C7.69829063,18.1260562 7.17011689,17.6333462 6.82899612,17.2724748 L6.82899612,17.2724748 L6.75071379,17.1883914 L6.55745089,16.9727413 C3.78412817,13.8533104 2.29166667,11.2081767 2.29166667,8.31649668 C2.29166667,4.16118712 5.58992573,0.809619204 9.7778738,0.742987163 L9.7778738,0.742987163 Z M10,6.45833333 C8.96446609,6.45833333 8.125,7.29779943 8.125,8.33333333 C8.125,9.36886724 8.96446609,10.2083333 10,10.2083333 C11.0355339,10.2083333 11.875,9.36886724 11.875,8.33333333 C11.875,7.29779943 11.0355339,6.45833333 10,6.45833333 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="典型页面-3：商品详情（手机）备份" transform="translate(-28.000000, -264.000000)">
+            <g id="Half-modal-panel" transform="translate(0.000000, 160.000000)">
+                <g id="gaps" transform="translate(28.000000, 104.000000)">
+                    <rect id="矩形" fill="#CF0A2C" x="0" y="0" width="32" height="32" rx="16"></rect>
+                    <g id="Public/ic_public_gps_filled" transform="translate(6.000000, 6.000000)">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <g id="路径" fill-rule="nonzero"></g>
+                        <g id="编组" mask="url(#mask-2)" fill="#FFFFFF">
+                            <g id="Symbol/color-light/colorPrimary">
+                                <rect id="color/#000000" x="0" y="0" width="20" height="20"></rect>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_search.svg b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7ac6a320589a9cd496f7d8dd0e7dd59b3c39b2f0
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_search.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_favourites</title>
+    <defs>
+        <path d="M14.5458347,13.767064 L17.3443851,16.5646683 C17.5884628,16.8087459 17.5884628,17.2044741 17.3443851,17.4485517 C17.1003074,17.6926294 16.7045793,17.6926294 16.4605016,17.4485517 L13.654746,14.6415746 C13.9744993,14.3741623 14.2725388,14.0816489 14.5458347,13.767064 Z M13.5808494,13.5808494 L13.5453393,13.6161074 C13.5286377,13.6325726 13.5118536,13.6489543 13.4949875,13.6652518 C13.4429624,13.7155194 13.3903408,13.7648196 13.3369649,13.8133042 C13.3188281,13.8297782 13.3007213,13.8460539 13.2825293,13.8622358 C13.2140701,13.9231328 13.144321,13.9827708 13.0734026,14.0410379 C13.0700006,14.0438334 13.0662722,14.0468906 13.0625405,14.0499441 L12.910594,14.170803 C11.7312033,15.0825209 10.2518697,15.625 8.64583333,15.625 C4.79134602,15.625 1.66666667,12.5003206 1.66666667,8.64583333 C1.66666667,4.79134602 4.79134602,1.66666667 8.64583333,1.66666667 C12.5003206,1.66666667 15.625,4.79134602 15.625,8.64583333 C15.625,10.3746843 14.9963813,11.9567134 13.9552439,13.1758207 L13.9552439,13.1758207 L13.9244023,13.2116888 C13.894953,13.2457052 13.8651803,13.279434 13.8350891,13.3128705 L13.7468863,13.4090655 L13.7468863,13.4090655 L13.7361909,13.420489 C13.6852613,13.4747645 13.6334736,13.5282252 13.5808494,13.5808494 Z M8.64583333,2.91666667 C5.48170195,2.91666667 2.91666667,5.48170195 2.91666667,8.64583333 C2.91666667,11.8099647 5.48170195,14.375 8.64583333,14.375 C11.8099647,14.375 14.375,11.8099647 14.375,8.64583333 C14.375,5.48170195 11.8099647,2.91666667 8.64583333,2.91666667 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="视觉调整：典型页面-8：直播间购物袋_边看边选（平板）" transform="translate(-1137.000000, -55.000000)">
+            <g id="编组-4" transform="translate(1128.000000, 54.000000)">
+                <g id="Public/ic_favourites" transform="translate(8.000000, 0.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="形状结合" fill-rule="nonzero"></g>
+                    <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+                        <g id="Symbol/color-light/colorPrimary">
+                            <rect id="color/#000000" x="0" y="0" width="20" height="20"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_share.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_share.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e95de47377893c2250d31f7fcf375b99e20e27c
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_share.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_split.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_split.png
new file mode 100644
index 0000000000000000000000000000000000000000..b945723471268665045f28b13ff99933552d1117
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/icon_split.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_bag_product_1.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_bag_product_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..f692089714ed53fe4c2b157a2ce9d4b6f6d9a102
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_bag_product_1.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_bag_product_2.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_bag_product_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c8f025b2697c0882b88e8b3956b12cdc87a913e
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_bag_product_2.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_bag_product_3.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_bag_product_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f4f2041613677eb710631b25ff367d7c0e2d3e1
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_bag_product_3.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_bag_product_4.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_bag_product_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..f45a01d5d73afb6ca0f0fd403dfe10772cec41f9
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_bag_product_4.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_1.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..4397dd43825ce2c176a6fa488def0ddea1da6fd3
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_1.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_2.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7d53f3f68c8d2a9eea8919c5190a9bc5f671155
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_2.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_3.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..22eca5d2f22a5fcc2568fee7e6b41ec1b4db87f7
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_3.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_4.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..c399e10330c7cc9ae47e3672d0676c951f453ad5
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_4.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_5.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4905f2905a4cd7091f900b1f791d7faeb6bc81a
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_5.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_6.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f132076623e593ada67d42ce931adbbd8806a9a
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_6.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_7.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_7.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5aaee15f952913c115955b9aa19eb38d1df46e5
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_7.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_8.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_8.png
new file mode 100644
index 0000000000000000000000000000000000000000..77aecfd053333a69c61563994b98259ccdba874c
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_product_8.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_vmall.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_vmall.png
new file mode 100644
index 0000000000000000000000000000000000000000..eed9cb48594939dcb40f3f18d1929eefbc311418
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/live_vmall.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_main_shop.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_main_shop.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb91615aa1cced5b0d53f75d5d3e01633a18e88d
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_main_shop.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_product_1.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_product_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..17ce2e451c909614ed798d1a2f410595512ad5a4
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_product_1.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_product_2.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_product_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..4485ab56a5448a4041cb0b66f6c5e26429618ac6
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_product_2.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_product_3.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_product_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..7af8583a034dad5166b1962b9c73af646f07979c
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_product_3.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_product_4.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_product_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef28d49781630de6843cc4836db451bb14856735
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/pay_product_4.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_detail_1.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_detail_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..b64117a3d4862dd16298bbc27b3ac904bcb7e128
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_detail_1.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_detail_2.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_detail_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..7bfa0666989a15081b92a84a6633a93344a49823
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_detail_2.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_detail_3.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_detail_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..163d2260024f6e1aca73ad501ffe9640177fa5c7
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_detail_3.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_small_1.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_small_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3f2a904250908b8a7c4b70ca4e27c29462ff833
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_small_1.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_small_2.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_small_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..5938f70521f7e79e922bb14229dd2a70244e30cd
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_small_2.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_small_3.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_small_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..4847b8ff737be631edbbc62251dd389ec4a2549a
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/product_small_3.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/recommended_config_1.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/recommended_config_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b27128107e822e235cd3002487c4188d841ce89
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/recommended_config_1.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/recommended_config_2.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/recommended_config_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b0274711d23acf6633baa674f715953121fe31c
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/recommended_config_2.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/recommended_config_3.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/recommended_config_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..545809a65fb071d3bf07c07752c7fd4eb1e3139e
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/recommended_config_3.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/recommended_config_4.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/recommended_config_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4c5c8af5c3242b014cb24c7391c1b8770ea684b
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/recommended_config_4.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/shop_logo.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/shop_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..50d38e46af32dae2e8825ffbcbc3e737bd3df158
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/shop_logo.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/shop_product.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/shop_product.png
new file mode 100644
index 0000000000000000000000000000000000000000..966482ade88d8e7819c349ddb27cd832a916137e
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/shop_product.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/user_profile.png b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/user_profile.png
new file mode 100644
index 0000000000000000000000000000000000000000..14765cd72378cda7719df879a69bbc1108dceb33
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/base/media/user_profile.png differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/en_US/element/string.json b/MultiShoppingPriceComparison/features/detail/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..fd9038c472bfdcfb9533b7a173b589401489c166
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/en_US/element/string.json
@@ -0,0 +1,304 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "comment_placeholder",
+      "value": "What to say ..."
+    },
+    {
+      "name": "official_review",
+      "value": "official"
+    },
+    {
+      "name": "store_name",
+      "value": "Official live broadcast room"
+    },
+    {
+      "name": "number_of_viewers",
+      "value": "738,600 people watch"
+    },
+    {
+      "name": "preferential_scheme",
+      "value": "XX yuan store universal red envelope"
+    },
+    {
+      "name": "pocket_baby",
+      "value": "Pocket"
+    },
+    {
+      "name": "currency_symbol",
+      "value": "￥ "
+    },
+    {
+      "name": "OP_CAR_PRODUCT_REMARK_LIST1",
+      "value": "BeiDou Msg | Low Batt Emergency"
+    },
+    {
+      "name": "OP_CAR_PRODUCT_REMARK_LIST2",
+      "value": "Thin, Flat, Reliable"
+    },
+    {
+      "name": "OP_CAR_PRODUCT_REMARK_LIST3",
+      "value": "2.5K HR Screen | Light & Long Battery"
+    },
+    {
+      "name": "Gifted_points",
+      "value": "Gift points"
+    },
+    {
+      "name": "flagship_machine",
+      "value": "New straight-screen flagship"
+    },
+    {
+      "name": "cheaper",
+      "value": "Pre-order & save $200 on performance ed."
+    },
+    {
+      "name": "Shopping_bag",
+      "value": "Shopping bag"
+    },
+    {
+      "name": "search",
+      "value": "search"
+    },
+    {
+      "name": "Order",
+      "value": "Order"
+    },
+    {
+      "name": "all",
+      "value": "All"
+    },
+    {
+      "name": "phone",
+      "value": "Phone"
+    },
+    {
+      "name": "mac",
+      "value": "Tablet"
+    },
+    {
+      "name": "PC",
+      "value": "PC"
+    },
+    {
+      "name": "watch",
+      "value": "Watch"
+    },
+    {
+      "name": "earphone",
+      "value": "Earphone"
+    },
+    {
+      "name": "LIVE_COMMENTS_LIST1",
+      "value": "Visionary & Intelligent. Recap of Mate 60 Pro launch."
+    },
+    {
+      "name": "LIVE_COMMENTS_LIST2",
+      "value": "123XXXXXX posted multiple comments!"
+    },
+    {
+      "name": "LIVE_COMMENTS_LIST3",
+      "value": "Congrats, 123XXXXXX! Flash sale discount won!"
+    },
+    {
+      "name": "buy_now",
+      "value": "Buy now"
+    },
+    {
+      "name": "living",
+      "value": "Living"
+    },
+    {
+      "name": "store",
+      "value": "Huawei official flagship store"
+    },
+    {
+      "name": "buy",
+      "value": "Buy"
+    },
+    {
+      "name": "CUSTOMER_SERVICE_CONTENTS1",
+      "value": "HUAWEI Mate X5 12GB+512GB Phantom Purple: Ultra-thin Fold, HD Dual Screens, Smart Comm."
+    },
+    {
+      "name": "CUSTOMER_SERVICE_CONTENTS2",
+      "value": "Hello! Want to consult the latest mobile phone released this fall ~"
+    },
+    {
+      "name": "CUSTOMER_SERVICE_CONTENTS3",
+      "value": "Hello, smart customer service assistant will serve you!"
+    },
+    {
+      "name": "CUSTOMER_SERVICE_CONTENTS4",
+      "value": "Welcome to the Huawei official mall. In order to improve the quality of service, your consultation may be recorded. At present, there are fewer store customer service. It is recommended that you give priority to obtaining product information through the product details page or Huawei official website. If the smart customer service cannot solve your problem, you can enter \"manual\" to contact artificial customer service. Thank you for your understanding and support ~"
+    },
+    {
+      "name": "COLOR_SELECT_NAME_LIST1",
+      "value": "Phantom Purple"
+    },
+    {
+      "name": "COLOR_SELECT_NAME_LIST2",
+      "value": "Feather Black"
+    },
+    {
+      "name": "COLOR_SELECT_NAME_LIST3",
+      "value": "Feather White"
+    },
+    {
+      "name": "COLOR_SELECT_NAME_LIST4",
+      "value": "Mountain Green"
+    },
+    {
+      "name": "Official_standard",
+      "value": "Official std config"
+    },
+    {
+      "name": "add_cart",
+      "value": "Add to Cart"
+    },
+    {
+      "name": "SELECT_NAME_LIST1",
+      "value": "color"
+    },
+    {
+      "name": "SELECT_NAME_LIST2",
+      "value": "Storage capacity"
+    },
+    {
+      "name": "SELECT_NAME_LIST3",
+      "value": "Package type"
+    },
+    {
+      "name": "pay_info1",
+      "value": "Room XX, Unit XX, Building XXXXX, XXXX Avenue"
+    },
+    {
+      "name": "pay_info2",
+      "value": "Contact: +8610000000000"
+    },
+    {
+      "name": "pay_info3",
+      "value": "Huawei Wallet Payment"
+    },
+    {
+      "name": "pay_info4",
+      "value": "Pay now"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES1",
+      "value": "Selected"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES2",
+      "value": "Phantom Purple 512GB, Fast Ship"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES3",
+      "value": "Pair"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES5",
+      "value": "Recycle"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES6",
+      "value": "High recycling, extra subsidies"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES7",
+      "value": "Free ship over 48 yuan"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES8",
+      "value": "Huawei Terminal: products, shipping, service"
+    },
+    {
+      "name": "USER_COMMENT_NAMES1",
+      "value": "User reviews (1500+)"
+    },
+    {
+      "name": "USER_COMMENT_NAMES2",
+      "value": "Top 77"
+    },
+    {
+      "name": "USER_COMMENT_NAMES3",
+      "value": "858 contents"
+    },
+    {
+      "name": "USER_COMMENT_NAMES4",
+      "value": "217 imgs"
+    },
+    {
+      "name": "USER_COMMENT_NAMES5",
+      "value": "JI**********"
+    },
+    {
+      "name": "USER_COMMENT_NAMES6",
+      "value": "Huawei phones: long battery, clear cams, smooth ops, strong feats, stunning looks. Highly recommend!"
+    },
+    {
+      "name": "USER_COMMENT_NAMES7",
+      "value": "All reviews"
+    },
+    {
+      "name": "USER_COMMENT_NAMES8",
+      "value": "Gold Black 256GB, Fast Ship"
+    },
+    {
+      "name": "compare",
+      "value": "Compare"
+    },
+    {
+      "name": "PRODUCT_DISCOUNT_NAMES1",
+      "value": "[In Stock & Fast Shipping] HUAWEI Mate X5 12GB+512GB Phantom Purple"
+    },
+    {
+      "name": "PRODUCT_DISCOUNT_NAMES2",
+      "value": "[Huawei New Season]1、Gift: ¥299 Smart Case (Ltd)2、Student Discount: ¥1003、Trade-in: Up to ¥500 | More Phones >> Ultra-clear Screens, Ultra-slim Fold"
+    },
+    {
+      "name": "PRODUCT_DISCOUNT_NAMES3",
+      "value": "Limited Giveaway: Free Infinity Earphones (Vitality Edition)"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES1",
+      "value": "Time remaining until the end:"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES2",
+      "value": "Enjoy up to 12 interest-free installments"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES3",
+      "value": "Boutique"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES4",
+      "value": "Direct ¥800 off (Ltd Time)"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES5",
+      "value": "Trade-in subsidy"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES6",
+      "value": "Disc."
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES7",
+      "value": "Longgang, Shenzhen, Guangdong"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES8",
+      "value": "In stock"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES4",
+      "value": "Rec. "
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/rawfile/live.mp4 b/MultiShoppingPriceComparison/features/detail/src/main/resources/rawfile/live.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..8c7d73919b0f63a1023ecfad95d35efbe2e599cf
Binary files /dev/null and b/MultiShoppingPriceComparison/features/detail/src/main/resources/rawfile/live.mp4 differ
diff --git a/MultiShoppingPriceComparison/features/detail/src/main/resources/zh_CN/element/string.json b/MultiShoppingPriceComparison/features/detail/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..c35d5249a59c5f3cec8f1df06aeeb8474fd55a7e
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/detail/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,304 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "comment_placeholder",
+      "value": "说点什么…"
+    },
+    {
+      "name": "official_review",
+      "value": "官方主播"
+    },
+    {
+      "name": "store_name",
+      "value": "官方直播间"
+    },
+    {
+      "name": "number_of_viewers",
+      "value": "73.86万人观看"
+    },
+    {
+      "name": "preferential_scheme",
+      "value": "XX元店铺通用红包"
+    },
+    {
+      "name": "pocket_baby",
+      "value": "口袋宝贝"
+    },
+    {
+      "name": "currency_symbol",
+      "value": "￥ "
+    },
+    {
+      "name": "OP_CAR_PRODUCT_REMARK_LIST1",
+      "value": "北斗卫星消息｜低电量应急模式"
+    },
+    {
+      "name": "OP_CAR_PRODUCT_REMARK_LIST2",
+      "value": "超轻薄｜超平整｜超可靠"
+    },
+    {
+      "name": "OP_CAR_PRODUCT_REMARK_LIST3",
+      "value": "2.5K高刷护眼屏｜轻薄长续航"
+    },
+    {
+      "name": "Gifted_points",
+      "value": "赠积分"
+    },
+    {
+      "name": "flagship_machine",
+      "value": "新一代直屏旗舰机"
+    },
+    {
+      "name": "cheaper",
+      "value": "性能版新品预定立省200"
+    },
+    {
+      "name": "Shopping_bag",
+      "value": "购物袋"
+    },
+    {
+      "name": "search",
+      "value": "搜索"
+    },
+    {
+      "name": "Order",
+      "value": "订单"
+    },
+    {
+      "name": "all",
+      "value": "全部"
+    },
+    {
+      "name": "phone",
+      "value": "手机"
+    },
+    {
+      "name": "mac",
+      "value": "平板"
+    },
+    {
+      "name": "PC",
+      "value": "笔记本"
+    },
+    {
+      "name": "watch",
+      "value": "手表"
+    },
+    {
+      "name": "earphone",
+      "value": "耳机"
+    },
+    {
+      "name": "LIVE_COMMENTS_LIST1",
+      "value": "远见卓识，智见万象。华为Mate60 Pro系列新品发布精彩回顾。"
+    },
+    {
+      "name": "LIVE_COMMENTS_LIST2",
+      "value": "123XXXXXX发表评论发表评论发表评论发表评论！"
+    },
+    {
+      "name": "LIVE_COMMENTS_LIST3",
+      "value": "恭喜123XXXXXX获得官方秒杀优惠！"
+    },
+    {
+      "name": "buy_now",
+      "value": "立即购买"
+    },
+    {
+      "name": "living",
+      "value": "直播中"
+    },
+    {
+      "name": "store",
+      "value": "华为官方旗舰店"
+    },
+    {
+      "name": "buy",
+      "value": "购买"
+    },
+    {
+      "name": "CUSTOMER_SERVICE_CONTENTS1",
+      "value": "HUAWEI Mate X5 12GB+512GB 幻影紫 超轻薄四曲折叠 超高清高分辨率临境双屏 超智慧灵犀通信"
+    },
+    {
+      "name": "CUSTOMER_SERVICE_CONTENTS2",
+      "value": "您好！想咨询一下今年秋季最新发布的手机～"
+    },
+    {
+      "name": "CUSTOMER_SERVICE_CONTENTS3",
+      "value": "您好，智能客服助手为您服务！"
+    },
+    {
+      "name": "CUSTOMER_SERVICE_CONTENTS4",
+      "value": "欢迎光临华为官方商城，为提升服务质量，您的咨询可能会被记录。目前店铺客服数量较少，建议您优先通过商品详情页或华为官网获取商品信息，若智能客服无法解决您的问题，您可以输入“人工”联系人工客服。感谢您的理解和支持～"
+    },
+    {
+      "name": "COLOR_SELECT_NAME_LIST1",
+      "value": "幻影紫"
+    },
+    {
+      "name": "COLOR_SELECT_NAME_LIST2",
+      "value": "羽砂黑"
+    },
+    {
+      "name": "COLOR_SELECT_NAME_LIST3",
+      "value": "羽砂白"
+    },
+    {
+      "name": "COLOR_SELECT_NAME_LIST4",
+      "value": "青山黛"
+    },
+    {
+      "name": "Official_standard",
+      "value": "官方标配"
+    },
+    {
+      "name": "add_cart",
+      "value": "加入购物袋"
+    },
+    {
+      "name": "SELECT_NAME_LIST1",
+      "value": "机身颜色"
+    },
+    {
+      "name": "SELECT_NAME_LIST2",
+      "value": "储存容量"
+    },
+    {
+      "name": "SELECT_NAME_LIST3",
+      "value": "套餐类型"
+    },
+    {
+      "name": "pay_info1",
+      "value": "XXXX大道XXXXX楼XX单元XX号"
+    },
+    {
+      "name": "pay_info2",
+      "value": "联系人  +8610000000000"
+    },
+    {
+      "name": "pay_info3",
+      "value": "华为钱包支付"
+    },
+    {
+      "name": "pay_info4",
+      "value": "立即支付"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES1",
+      "value": "已选"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES2",
+      "value": "幻影紫·512GB·现货速发"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES3",
+      "value": "搭配"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES4",
+      "value": "推荐"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES5",
+      "value": "回收"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES6",
+      "value": "高价回收送多重新补贴"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES7",
+      "value": "满48元包邮"
+    },
+    {
+      "name": "PRODUCT_CONFIG_NAMES8",
+      "value": "由华为终端提供商品、发货开票及售后服务"
+    },
+    {
+      "name": "USER_COMMENT_NAMES1",
+      "value": "用户评价（1500+）"
+    },
+    {
+      "name": "USER_COMMENT_NAMES2",
+      "value": "最热门77"
+    },
+    {
+      "name": "USER_COMMENT_NAMES3",
+      "value": "有内容858"
+    },
+    {
+      "name": "USER_COMMENT_NAMES4",
+      "value": "有图217"
+    },
+    {
+      "name": "USER_COMMENT_NAMES5",
+      "value": "几**********"
+    },
+    {
+      "name": "USER_COMMENT_NAMES6",
+      "value": "华为手机续航很好，拍照清晰，运行畅快，功能也很强大，关键是颜值出众，非常值得推荐！"
+    },
+    {
+      "name": "USER_COMMENT_NAMES7",
+      "value": "全部评价"
+    },
+    {
+      "name": "USER_COMMENT_NAMES8",
+      "value": "曜金黑，256GB，现货速发"
+    },
+    {
+      "name": "compare",
+      "value": "机型对比"
+    },
+    {
+      "name": "PRODUCT_DISCOUNT_NAMES1",
+      "value": "【现货速发】HUAWEI Mate X5 12GB+512GB 幻影紫"
+    },
+    {
+      "name": "PRODUCT_DISCOUNT_NAMES2",
+      "value": "【华为超级新品季】1.限量买赠价值299元智能视窗保护套 2.学生认证优惠100元（下拉了了解详情）3.以旧换新至高补贴500元｜更多甄选手机点击了解>>超清临镜双屏｜超轻薄四曲折叠"
+    },
+    {
+      "name": "PRODUCT_DISCOUNT_NAMES3",
+      "value": "限量赠无限耳机活力版"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES1",
+      "value": "距离结束还剩"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES2",
+      "value": "最高可享12期0分期利息"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES3",
+      "value": "精品"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES4",
+      "value": "限时直降800元"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES5",
+      "value": "以旧换新补贴"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES6",
+      "value": "优惠"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES8",
+      "value": "现货"
+    },
+    {
+      "name": "PRODUCT_PRICE_NAMES7",
+      "value": "广东 深圳市 龙岗区"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/Index.ets b/MultiShoppingPriceComparison/features/home/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1ac3f1d0a4b0c85d3649f10c230fce10139e9f9d
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/Index.ets
@@ -0,0 +1,3 @@
+export { Home } from './src/main/ets/view/Home';
+export { DetailShoppingBagView } from './src/main/ets/view/ShoppingBagContent';
+export { ClassifyConstants } from './src/main/ets/constants/ClassifyConstants';
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/build-profile.json5 b/MultiShoppingPriceComparison/features/home/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..14d5b832c7c04a429ed7da4c443d19c2566a4f25
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/build-profile.json5
@@ -0,0 +1,8 @@
+{
+  "apiType": "stageMode",
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/hvigorfile.ts b/MultiShoppingPriceComparison/features/home/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiShoppingPriceComparison/features/home/oh-package.json5 b/MultiShoppingPriceComparison/features/home/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..65a9d0afed949b7dea80a06ddc3e157bffb8e6aa
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/oh-package.json5
@@ -0,0 +1,13 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "home",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/commons": "file:../../commons/base"
+  }
+}
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/constants/ClassifyConstants.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/constants/ClassifyConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3000ccacc0c7d35012fc8bc4e58db8fb068d2df8
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/constants/ClassifyConstants.ets
@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class ClassifyConstants {
+  /**
+   * Navigation list.
+   */
+  static readonly NAV_ROUTER_LIST = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST1')),
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST2')),
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST3')),
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST4')),
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST5')),
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST6')),
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST7')),
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST8')),
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST9')),
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST10')),
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST11')),
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST12')),
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST13')),
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST14')),
+    context.resourceManager.getStringSync($r('app.string.NAV_ROUTER_LIST15'))];
+  /**
+   * Shop Matrix.
+   */
+  static readonly SHOP_MATRIX: Array<Array<string>> = [
+    ['Mate 60 Pro+', 'Mate 60', 'Mate 60 Pro', 'Mate X5'],
+    ['Mate 60 Pro+', 'Mate 60', 'Mate 60 Pro', 'Mate X5', 'Mate X3', 'Mate 50', 'Mate 50 Pro', 'Mate Xs 2', 'Mate 50E',
+      'Mate 50 RS'],
+    ['P60 ', 'P60 Pro', 'P60 Art ', 'P50 Pro', 'P50E', 'P50 Pocket']];
+  /**
+   * Shop title list.
+   */
+  static readonly SHOP_TITLE_LIST = (context: Context): Array<string> => [
+    context.resourceManager.getStringSync($r('app.string.SHOP_TITLE_LIST1')),
+    context.resourceManager.getStringSync($r('app.string.SHOP_TITLE_LIST2')),
+    context.resourceManager.getStringSync($r('app.string.SHOP_TITLE_LIST3'))];
+  /**
+   * Shop matrix image.
+   */
+  static readonly SHOP_MATRIX_IMAGE: Array<Array<Resource>> = [
+    [$r('app.media.classify_product_1'), $r('app.media.classify_product_2'), $r('app.media.classify_product_3'),
+      $r('app.media.classify_product_4')],
+    [$r('app.media.classify_product_1'), $r('app.media.classify_product_2'), $r('app.media.classify_product_3'),
+      $r('app.media.classify_product_4'), $r('app.media.classify_product_5'), $r('app.media.classify_product_6'),
+      $r('app.media.classify_product_7'), $r('app.media.classify_product_8'), $r('app.media.classify_product_9'),
+      $r('app.media.classify_product_10')],
+    [$r('app.media.classify_product_11'), $r('app.media.classify_product_12'), $r('app.media.classify_product_13'),
+      $r('app.media.classify_product_14'), $r('app.media.classify_product_15'), $r('app.media.classify_product_16')]];
+  /**
+   * Banner images.
+   */
+  static readonly BANNER_IMAGE: Array<Resource> = [$r('app.media.classify_banner1'), $r('app.media.classify_banner2'),
+    $r('app.media.classify_banner3')];
+  /**
+   * Banner image scale.
+   */
+  static readonly BANNER_IMAGE_RATIO: number = 2.32;
+  /**
+   * Number of pictures displayed in the banner.
+   */
+  static readonly SWIPER_DISPLAY_COUNT: number[] = [1, 2, 3];
+  /**
+   * Interval of swiper.
+   */
+  static readonly SWIPER_ITEM_SPACE: number[] = [0, 12, 16];
+  /**
+   * Interval of swiper.
+   */
+  static readonly SWIPER_DIVIDER_WIDTH: string = '2vp';
+  /**
+   * Input prompt.
+   */
+  static readonly INPUT_PROMPT_STRING =
+    (context: Context): string => context.resourceManager.getStringSync($r('app.string.search'));
+  /**
+   * Grid row gutters.
+   */
+  static readonly GRID_ROW_GUTTERS: number[] = [24, 8, 16, 12];
+  /**
+   * Page info list.
+   */
+  static readonly PAGE_INFO_LIST: string[] = ['liveHome', 'moreDetail', 'productHome'];
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/constants/HomeConstants.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/constants/HomeConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..91ff629425b6588adb5fabb75ceeec177cdb40e6
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/constants/HomeConstants.ets
@@ -0,0 +1,249 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class HomeConstants {
+  /**
+   * Footer tab topics.
+   */
+  static readonly FOOTER_TOPIC_LIST = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.FOOTER_TOPIC_LIST1')),
+    context.resourceManager.getStringSync($r('app.string.FOOTER_TOPIC_LIST2')),
+    context.resourceManager.getStringSync($r('app.string.FOOTER_TOPIC_LIST3')),
+    context.resourceManager.getStringSync($r('app.string.FOOTER_TOPIC_LIST4')),
+    context.resourceManager.getStringSync($r('app.string.FOOTER_TOPIC_LIST5'))];
+  /**
+   * Footer topic icons.
+   */
+  static readonly FOOTER_TOPIC_ICONS: Resource[] = [$r('app.media.tab_home'), $r('app.media.tab_classification'),
+    $r('app.media.tab_discovery'), $r('app.media.tab_shopping_bag'), $r('app.media.tab_mine')];
+  /**
+   * Footer topic icons.
+   */
+  static readonly FOOTER_TOPIC_ICONS_SELECTED: Resource[] = [$r('app.media.tab_home_selected'),
+    $r('app.media.tab_classification_selected'), $r('app.media.tab_discovery_selected'),
+    $r('app.media.tab_shopping_bag_selected'), $r('app.media.tab_mine_selected')];
+  /**
+   * Top bar text list.
+   */
+  static readonly TOP_BAR_TEXTS = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.TOP_BAR_TEXTS1')),
+    context.resourceManager.getStringSync($r('app.string.TOP_BAR_TEXTS2')),
+    context.resourceManager.getStringSync($r('app.string.TOP_BAR_TEXTS3')),
+    context.resourceManager.getStringSync($r('app.string.TOP_BAR_TEXTS4'))];
+  /**
+   * Search placeholder.
+   */
+  static readonly SEARCH_PLACEHOLDER = (context: Context): string =>
+    context.resourceManager.getStringSync($r('app.string.searching'));
+  /**
+   * Recommended product list.
+   */
+  static readonly RECOMMENDED_PRODUCTS: Resource[] = [$r('app.media.recommended_product_1'),
+    $r('app.media.recommended_product_2'), $r('app.media.recommended_product_3'),
+    $r('app.media.recommended_product_4')];
+  /**
+   * Recommended product is living list.
+   */
+  static readonly RECOMMENDED_PRODUCT_LIVING: boolean[] = [true, false, true, false];
+  /**
+   * Good categories.
+   */
+  static readonly GOOD_CATEGORIES = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.GOOD_CATEGORIES1')),
+    context.resourceManager.getStringSync($r('app.string.GOOD_CATEGORIES2')),
+    context.resourceManager.getStringSync($r('app.string.GOOD_CATEGORIES3')),
+    context.resourceManager.getStringSync($r('app.string.GOOD_CATEGORIES4')),
+    context.resourceManager.getStringSync($r('app.string.GOOD_CATEGORIES5')),
+    context.resourceManager.getStringSync($r('app.string.GOOD_CATEGORIES6')),
+    context.resourceManager.getStringSync($r('app.string.GOOD_CATEGORIES7')),
+    context.resourceManager.getStringSync($r('app.string.GOOD_CATEGORIES8')),
+    context.resourceManager.getStringSync($r('app.string.GOOD_CATEGORIES9')),
+    context.resourceManager.getStringSync($r('app.string.GOOD_CATEGORIES10'))];
+  /**
+   * Good category images.
+   */
+  static readonly GOOD_CATEGORY_IMG: Resource[] = [$r('app.media.categories_1'), $r('app.media.categories_2'),
+    $r('app.media.categories_3'), $r('app.media.categories_4'), $r('app.media.categories_5'),
+    $r('app.media.categories_6'), $r('app.media.categories_7'), $r('app.media.categories_8'),
+    $r('app.media.categories_9'), $r('app.media.categories_10')];
+  /**
+   * Category list space list.
+   */
+  static readonly CATEGORY_LIST_SPACES: string[] = ['0', '36vp', '72vp'];
+  /**
+   * Category divider stroke width.
+   */
+  static readonly CATEGORY_DIVIDER_STROKE_WIDTH: string = '4vp';
+  /**
+   * Category list item width list.
+   */
+  static readonly CATEGORY_LIST_ITEM_WIDTHS: string[] = ['20%', '64vp', '68vp'];
+  /**
+   * Recommended product item space list.
+   */
+  static readonly RECOMMENDED_PRODUCT_ITEM_SPACES: string[] = ['16vp', '12vp'];
+  /**
+   * Recommended product view margin list.
+   */
+  static readonly RECOMMENDED_PRODUCT_VIEW_SPACES: number[] = [12, 16, 24, 32];
+  /**
+   * Welfare products.
+   */
+  static readonly WELFARE_PRODUCTS: string[] = ['1299', '899', '599', '2499', '6988', '1799', '988', '6999'];
+  /**
+   * Welfare product images.
+   */
+  static readonly WELFARE_PRODUCT_IMG: Resource[] = [$r('app.media.welfare_product_1'),
+    $r('app.media.welfare_product_2'), $r('app.media.welfare_product_3'), $r('app.media.welfare_product_4'),
+    $r('app.media.welfare_product_5'), $r('app.media.welfare_product_6'), $r('app.media.welfare_product_7'),
+    $r('app.media.welfare_product_8')];
+  /**
+   * Price unit.
+   */
+  static readonly PRICE_UNIT = (context: Context): string[] => ['￥',
+    context.resourceManager.getStringSync($r('app.string.PRICE_UNIT'))];
+  /**
+   * Home title list.
+   */
+  static readonly HOME_TITLES = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.HOME_TITLES1')),
+    context.resourceManager.getStringSync($r('app.string.HOME_TITLES2')),
+    context.resourceManager.getStringSync($r('app.string.HOME_TITLES3'))];
+  /**
+   * Home button text list.
+   */
+  static readonly BUTTON_TEXTS = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.BUTTON_TEXTS1')),
+    context.resourceManager.getStringSync($r('app.string.BUTTON_TEXTS2'))];
+  /**
+   * Welfare tip text.
+   */
+  static readonly TIP_TEXTS  = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.TIP_TEXTS1')),
+    context.resourceManager.getStringSync($r('app.string.TIP_TEXTS2')),
+    context.resourceManager.getStringSync($r('app.string.TIP_TEXTS3'))];
+  /**
+   * Gradient color list.
+   */
+  static readonly GRADIENT_COLORS: string[] = ['#4DEDAA68', '#33FFE9C1', '#FF6354', '#EA1559'];
+  /**
+   * Section product image list.
+   */
+  static readonly SECTION_PRODUCT_IMAGES: Resource[] = [$r('app.media.section_product_1'),
+    $r('app.media.section_product_2'), $r('app.media.section_product_3'), $r('app.media.section_product_4'),
+    $r('app.media.section_product_5')];
+  /**
+   * Section products title list.
+   */
+  static readonly SECTION_PRODUCTS_TITLES = (context: Context): string[][] => [
+    [context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_TITLES1'))],
+    ['HUAWEI Mate 50',
+      context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_TITLES2'))],
+    ['Sound X NEW'], ['HUAWEI MatePad Air'], ['HUAWEI MateBook 14s']];
+  /**
+   * Section products info list.
+   */
+  static readonly SECTION_PRODUCTS_INFO = (context: Context): string[] => ['',
+    context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_INFO1')), '',
+    context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_INFO2')),
+    context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_INFO3'))];
+  /**
+   * Section products price list.
+   */
+  static readonly SECTION_PRODUCTS_PRICES: string[] = ['￥10999', '￥4999', '￥2499', '￥2599', '￥8399'];
+  /**
+   * Section products feature list.
+   */
+  static readonly SECTION_PRODUCTS_FEATURES = (context: Context): string[][] => [
+    [context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_FEATURES1'))],
+    [context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_FEATURES2'))],
+    [context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_FEATURES3'))],
+    [context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_FEATURES4'))],
+    [context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_FEATURES5'))]];
+  /**
+   * Section products comment list.
+   */
+  static readonly SECTION_PRODUCTS_COMMENTS = (context: Context): string =>
+    context.resourceManager.getStringSync($r('app.string.HOME_REVIEW'));
+  /**
+   * Welfare grid column gutter list.
+   */
+  static readonly WELFARE_GRID_COL_GUTTERS: number[] = [10, 12, 8, 4];
+  /**
+   * Selection image aspect ratio.
+   */
+  static readonly SELECTION_IMG_ASPECT_RATIO: number = 1.29;
+  /**
+   * Flash sale product image list.
+   */
+  static readonly FLASH_SALE_PRODUCT_IMAGES: Resource[] = [$r('app.media.flash_sale_product_1'),
+    $r('app.media.flash_sale_product_2'), $r('app.media.flash_sale_product_3'), $r('app.media.flash_sale_product_4'),
+    $r('app.media.flash_sale_product_4'), $r('app.media.flash_sale_product_4')];
+  /**
+   * Flash sale product title list.
+   */
+  static readonly FLASH_SALE_PRODUCT_TITLES = (context: Context): string[][] => [['HUAWEI Mate 50'], ['Mate Xs 2'],
+    ['HUAWEI nova \u200B1\u200B0',
+      context.resourceManager.getStringSync($r('app.string.Hot_Seller'))],
+    ['MateBook E Go', context.resourceManager.getStringSync($r('app.string.New_Launch'))],
+    ['MateBook E Go', context.resourceManager.getStringSync($r('app.string.New_Launch'))],
+    ['MateBook E Go', context.resourceManager.getStringSync($r('app.string.New_Launch'))]];
+  /**
+   * Flash sale product info list.
+   */
+  static readonly FLASH_SALE_PRODUCT_INFO = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_INFO1')),
+    context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_INFO6')),
+    context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_INFO4')),
+    context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_INFO5')),
+    context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_INFO5')),
+    context.resourceManager.getStringSync($r('app.string.SECTION_PRODUCTS_INFO5')),
+  ];
+  /**
+   * Flash sale product feature list.
+   */
+  static readonly FLASH_SALE_PRODUCT_FEATURES = (context: Context): string[][] => [
+    [context.resourceManager.getStringSync($r('app.string.FLASH_SALE_PRODUCT_FEATURES1')),
+      context.resourceManager.getStringSync($r('app.string.FLASH_SALE_PRODUCT_FEATURES2'))],
+    [context.resourceManager.getStringSync($r('app.string.FLASH_SALE_PRODUCT_FEATURES3'))],
+    [context.resourceManager.getStringSync($r('app.string.FLASH_SALE_PRODUCT_FEATURES4'))],
+    [context.resourceManager.getStringSync($r('app.string.FLASH_SALE_PRODUCT_FEATURES5'))],
+    [context.resourceManager.getStringSync($r('app.string.FLASH_SALE_PRODUCT_FEATURES5'))],
+    [context.resourceManager.getStringSync($r('app.string.FLASH_SALE_PRODUCT_FEATURES5'))]];
+  /**
+   * Flash sale product price list.
+   */
+  static readonly FLASH_SALE_PRODUCT_PRICES: string[] = ['￥4999', '￥9999', '￥2949', '￥4899', '￥4899', '￥4899'];
+  /**
+   * Flash sale original price list.
+   */
+  static readonly FLASH_SALE_PRODUCT_ORIGINAL_PRICES: string[] = ['￥5488', '', '￥2999', '￥4999', '￥4999', '￥4999'];
+  /**
+   * Flash sale image percent.
+   */
+  static readonly FLASH_SALE_IMAGE_PERCENT: number[] = [0.41, 0.44];
+  /**
+   * Flash sale introduction column height.
+   */
+  static readonly FLASH_SALE_INTRO_COL_HEIGHT: number = 134;
+  /**
+   * Home header list spaces.
+   */
+  static readonly HOME_HEADER_LIST_SPACES: number[] = [14, 16, 32];
+  /**
+   * Nine.
+   */
+  static readonly NINE: number = 9;
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/constants/ShoppingBagConstants.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/constants/ShoppingBagConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..31cce83705e22c74b21470d25a6c1905074790ab
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/constants/ShoppingBagConstants.ets
@@ -0,0 +1,131 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Context } from "@kit.AbilityKit";
+
+export class ShoppingBagConstants {
+  /**
+   * Product names.
+   */
+  static readonly PRODUCT_NAME_LIST = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_NAME_LIST1')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_NAME_LIST2')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_NAME_LIST3')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_NAME_LIST1'))
+  ];
+  /**
+   * Product types.
+   */
+  static readonly PRODUCT_TYPE_LIST = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_TYPE_LIST1')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_TYPE_LIS2')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_TYPE_LIST3')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_TYPE_LIST1'))
+  ];
+  /**
+   * Product images.
+   */
+  static readonly PRODUCT_IMAGE_LIST: Resource[] = [$r('app.media.shopping_card_1'),
+    $r('app.media.shopping_card_2'), $r('app.media.shopping_card_3'), $r('app.media.shopping_card_1')];
+  /**
+   * Product preferential list.
+   */
+  static readonly PRODUCT_PREFERENTIALList_LIST = (context: Context): Array<Array<string>> => [
+    [context.resourceManager.getStringSync($r('app.string.PRODUCT_PREFERENTIALList_LIST_MESSAGE1')),
+      context.resourceManager.getStringSync($r('app.string.PRODUCT_PREFERENTIALList_LIST_MESSAGE2'))],
+    [context.resourceManager.getStringSync($r('app.string.PRODUCT_PREFERENTIALList_LIST_MESSAGE3')),
+      context.resourceManager.getStringSync($r('app.string.PRODUCT_PREFERENTIALList_LIST_MESSAGE4'))],
+    [context.resourceManager.getStringSync($r('app.string.PRODUCT_PREFERENTIALList_LIST_MESSAGE1')),
+      context.resourceManager.getStringSync($r('app.string.PRODUCT_PREFERENTIALList_LIST_MESSAGE4'))],
+    [context.resourceManager.getStringSync($r('app.string.PRODUCT_PREFERENTIALList_LIST_MESSAGE1')),
+      context.resourceManager.getStringSync($r('app.string.PRODUCT_PREFERENTIALList_LIST_MESSAGE2'))]];
+  /**
+   * Product price list.
+   */
+  static readonly PRODUCT_PRICE_LIST: number[] = [6199, 6999, 6099, 6199];
+  /**
+   * Product original price list.
+   */
+  static readonly PRODUCT_ORIGINAL_PRICE_LIST: number[] = [6999, -1, 6999, 6999];
+  /**
+   * Product present list.
+   */
+  static readonly PRODUCT_PRESENT_LIST = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_PRESENT_LIST_MESSAGE1')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_PRESENT_LIST_MESSAGE2')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_PRESENT_LIST_MESSAGE3')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_PRESENT_LIST_MESSAGE1'))
+  ];
+  /**
+   * Product service list.
+   */
+  static readonly PRODUCT_SERVICE_LIST = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_SERVICE_LIST_message')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_SERVICE_LIST_message')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_SERVICE_LIST_message')),
+    context.resourceManager.getStringSync($r('app.string.PRODUCT_SERVICE_LIST_message'))
+  ];
+  /**
+   * Preference details title.
+   */
+  static readonly PREFERENCE_DETAILS_TITLE = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.PREFERENCE_DETAILS_TITLE_MESSAGE1')),
+    context.resourceManager.getStringSync($r('app.string.PREFERENCE_DETAILS_TITLE_MESSAGE12')),
+    context.resourceManager.getStringSync($r('app.string.PREFERENCE_DETAILS_TITLE_MESSAGE2')),
+    context.resourceManager.getStringSync($r('app.string.PREFERENCE_DETAILS_TITLE_MESSAGE3')),
+    context.resourceManager.getStringSync($r('app.string.PREFERENCE_DETAILS_TITLE_MESSAGE4'))
+  ];
+  /**
+   * Preference details price.
+   */
+  static readonly PREFERENCE_DETAILS_PRICE: string[] = ['13999', '-800', '-200', '-1000', '12999'];
+  /**
+   * Shopping bag layout weight list.
+   */
+  static readonly SHOPPING_BAG_LAYOUT_WEIGHTS: number[] = [35, 24];
+  /**
+   * Shopping bag titles.
+   */
+  static readonly SHOPPING_BAG_TITLES = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.SHOPPING_BAG_TITLES1')),
+    context.resourceManager.getStringSync($r('app.string.SHOPPING_BAG_TITLES2')),
+    context.resourceManager.getStringSync($r('app.string.SHOPPING_BAG_TITLES3'))];
+  /**
+   * Shopping discount title list.
+   */
+  static readonly SHOPPING_DISCOUNT_TITLES = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.PREFERENCE_DETAILS_TITLE_MESSAGE5')),
+    context.resourceManager.getStringSync($r('app.string.PREFERENCE_DETAILS_TITLE_MESSAGE6')),
+    context.resourceManager.getStringSync($r('app.string.PREFERENCE_DETAILS_TITLE_MESSAGE7')),
+    context.resourceManager.getStringSync($r('app.string.PREFERENCE_DETAILS_TITLE_MESSAGE8')),
+    context.resourceManager.getStringSync($r('app.string.PREFERENCE_DETAILS_TITLE_MESSAGE1')),
+    context.resourceManager.getStringSync($r('app.string.PREFERENCE_DETAILS_TITLE_MESSAGE9'))
+  ];
+  /**
+   * Shopping card foot title list.
+   */
+  static readonly SHOPPING_CARD_FOOT_TITLES = (context: Context): string[] => [
+    context.resourceManager.getStringSync($r('app.string.SHOPPING_CARD_FOOT_TITLES1')),
+    context.resourceManager.getStringSync($r('app.string.SHOPPING_CARD_FOOT_TITLES2')),
+    '￥', '1299',
+    context.resourceManager.getStringSync($r('app.string.SHOPPING_CARD_FOOT_TITLES3')),
+    context.resourceManager.getStringSync($r('app.string.SHOPPING_CARD_FOOT_TITLES4'))];
+  /**
+   * Shopping card name list.
+   */
+  static readonly SHOPPING_CARD_NAMES = (context: Context): string[] => ['￥', '-', '1', '+',
+    context.resourceManager.getStringSync($r('app.string.PREFERENCE_DETAILS_TITLE_MESSAGE10')),
+    context.resourceManager.getStringSync($r('app.string.PREFERENCE_DETAILS_TITLE_MESSAGE11')),
+  ];
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/Categories.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/Categories.ets
new file mode 100644
index 0000000000000000000000000000000000000000..31cd13effcbd09b3c463062a87b52a5aef89d3d0
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/Categories.ets
@@ -0,0 +1,101 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, BreakpointType, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { IconInfo, IconInfoViewModel } from '../viewmodel/IconInfoViewModel';
+
+@Component
+export struct Categories {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @State isNextCategory: boolean = false;
+  private context: Context = this.getUIContext().getHostContext()!
+  private categoryIcons: IconInfo[] = new IconInfoViewModel(this.context).getCategoryList();
+
+  build() {
+    Column() {
+      List({ space: new BreakpointType(HomeConstants.CATEGORY_LIST_SPACES[0], HomeConstants.CATEGORY_LIST_SPACES[1],
+        HomeConstants.CATEGORY_LIST_SPACES[2]).getValue(this.currentBreakpoint) }) {
+        ForEach(this.categoryIcons, (item: IconInfo) => {
+          ListItem() {
+            Row() {
+              Column() {
+                Image(item.getIcon())
+                  .height(new BreakpointType($r('app.float.category_img_size_sm'), $r('app.float.category_img_size_md'),
+                    $r('app.float.category_img_size_lg')).getValue(this.currentBreakpoint))
+                Text(item.getInfo())
+                  .fontSize($r('app.float.category_text_font'))
+                  .fontWeight(FontWeight.Normal)
+                  .lineHeight($r('app.float.category_text_line'))
+              }
+            }
+            .width(CommonConstants.FULL_PERCENT)
+            .height(CommonConstants.FULL_PERCENT)
+            .justifyContent(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? FlexAlign.Center :
+              FlexAlign.Start)
+          }
+          .width(new BreakpointType(HomeConstants.CATEGORY_LIST_ITEM_WIDTHS[0],
+            HomeConstants.CATEGORY_LIST_ITEM_WIDTHS[1], HomeConstants.CATEGORY_LIST_ITEM_WIDTHS[2]).
+            getValue(this.currentBreakpoint))
+          .height(new BreakpointType($r('app.float.category_item_height_sm'), $r('app.float.category_item_height_md'),
+            $r('app.float.category_item_height_lg')).getValue(this.currentBreakpoint))
+        }, (item: IconInfo, index: number) => JSON.stringify(item) + index)
+      }
+      .lanes(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? 2 : 1,
+        $r('app.float.category_lanes_gutter'))
+      .listDirection(Axis.Horizontal)
+      .scrollBar(BarState.Off)
+      .width(CommonConstants.FULL_PERCENT)
+      .height(new BreakpointType($r('app.float.category_list_height_sm'), $r('app.float.category_list_height_md'),
+        $r('app.float.category_list_height_lg')).getValue(this.currentBreakpoint))
+      .onScrollIndex((start: number, end: number) => {
+        if (end === HomeConstants.NINE) {
+          this.isNextCategory = true;
+        }
+        if (start === 0) {
+          this.isNextCategory = false;
+        }
+      })
+
+      if (this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_SM) {
+        Row() {
+          Divider()
+            .color(this.isNextCategory ? $r('app.color.categories_divider_color_selected') :
+              $r('app.color.categories_divider_color'))
+            .width($r('app.float.category_divider_width'))
+            .strokeWidth(HomeConstants.CATEGORY_DIVIDER_STROKE_WIDTH)
+            .lineCap(LineCapStyle.Round)
+          Divider()
+            .color(this.isNextCategory ? $r('app.color.categories_divider_color') :
+              $r('app.color.categories_divider_color_selected'))
+            .width($r('app.float.category_divider_width'))
+            .strokeWidth(HomeConstants.CATEGORY_DIVIDER_STROKE_WIDTH)
+            .lineCap(LineCapStyle.Round)
+        }
+        .width(CommonConstants.FULL_PERCENT)
+        .height($r('app.float.category_divider_row_height'))
+        .justifyContent(FlexAlign.Center)
+        .margin({ right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint) })
+      }
+    }
+    .height(new BreakpointType($r('app.float.category_col_height_sm'), $r('app.float.category_col_height_md'),
+      $r('app.float.category_col_height_lg')).getValue(this.currentBreakpoint))
+    .width(CommonConstants.FULL_PERCENT)
+    .margin({
+      top: this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_SM ? $r('app.float.category_col_margin') : 0,
+      right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r("app.float.category_col_margin_sm") : 0
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/ClassifyContent.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ClassifyContent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9f924c3747b76268b6995ce1814c8b73b8685a0e
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ClassifyContent.ets
@@ -0,0 +1,112 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, BreakpointType, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { ClassifyHeader } from './ClassifyHeader';
+import { ClassifyConstants } from '../constants/ClassifyConstants';
+import { ClassifyNavDestination } from './ClassifyNavdestinationPhone';
+
+@Component
+export struct ClassifyContent {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @Provide('pageInfo') pageInfo: NavPathStack = new NavPathStack();
+  @State currentClassifyIndex: number = 0;
+  private context: Context = this.getUIContext().getHostContext()!
+
+  @Builder
+  PageMap(name: string) {
+    if (name === ClassifyConstants.NAV_ROUTER_LIST(this.context)[0]) {
+      ClassifyNavDestination({ name: name })
+    } else {
+      NavDestination()
+        .hideTitleBar(true)
+    }
+  }
+
+  aboutToAppear(): void {
+    this.pageInfo.pushPath({ name: ClassifyConstants.NAV_ROUTER_LIST(this.context)[0] }, false);
+  }
+
+  build() {
+    Column() {
+      ClassifyHeader()
+      // [Start navigation_mode_split]
+      Navigation(this.pageInfo) {
+        // [StartExclude navigation_mode_split]
+        List() {
+          ForEach(ClassifyConstants.NAV_ROUTER_LIST(this.context), (item: string, index: number) => {
+            ListItem() {
+              Stack({ alignContent: Alignment.Start }) {
+                Row() {
+                  Text(item)
+                    .fontSize($r('app.float.classify_navigation_font_size'))
+                    .lineHeight($r('app.float.classify_navigation_line_height'))
+                    .fontWeight(FontWeight.Normal)
+                    .fontColor(this.currentClassifyIndex === index ? $r('app.color.classify_indicator_selected_color') :
+                      $r('app.color.classify_navigation_font_color'))
+                }
+                .width(CommonConstants.FULL_PERCENT)
+                .height(CommonConstants.FULL_PERCENT)
+                .justifyContent(FlexAlign.Start)
+                .padding({ left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint) })
+                .onClick(() =>{
+                  this.currentClassifyIndex = index;
+                  if(this.pageInfo.size() !== 0) {
+                    this.pageInfo.pop();
+                  }
+                  this.pageInfo.pushPath({ name: item }, false);
+                })
+
+                Divider()
+                  .vertical(true)
+                  .strokeWidth(ClassifyConstants.SWIPER_DIVIDER_WIDTH)
+                  .height($r('app.float.classify_navigation_line_height'))
+                  .color($r('app.color.classify_navigation_divider_color'))
+                  .visibility(index === this.currentClassifyIndex ? Visibility.Visible : Visibility.None)
+              }
+              .width(CommonConstants.FULL_PERCENT)
+              .height($r('app.float.classify_navigation_bar_height'))
+              .margin({ bottom: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[1] && index ===
+                ClassifyConstants.NAV_ROUTER_LIST.length - 1 ? CommonConstants.BOTTOM_RECT_HEIGHT : 0 })
+            }
+          }, (item: string, index: number) => item + index)
+        }
+        .scrollBar(BarState.Off)
+        // [EndExclude navigation_mode_split]
+      }
+      .layoutWeight(1)
+      // Setting the double column view of the navigation.
+      .mode(NavigationMode.Split)
+      // Initialize the width of the navigation bar.
+      .navBarWidth(new BreakpointType($r('app.float.classify_navigation_bar_width_sm'),
+        $r('app.float.classify_navigation_bar_width_md'), $r('app.float.classify_navigation_bar_width_lg'))
+        .getValue(this.currentBreakpoint))
+      // Set the minimum width and maximum width of the navigation bar under different breakpoints to be the same.
+      .navBarWidthRange([new BreakpointType($r('app.float.classify_navigation_bar_width_sm'),
+        $r('app.float.classify_navigation_bar_width_md'), $r('app.float.classify_navigation_bar_width_lg'))
+        .getValue(this.currentBreakpoint), new BreakpointType($r('app.float.classify_navigation_bar_width_sm'),
+        $r('app.float.classify_navigation_bar_width_md'), $r('app.float.classify_navigation_bar_width_lg'))
+        .getValue(this.currentBreakpoint)])
+      // [End navigation_mode_split]
+      .hideToolBar(true)
+      .hideTitleBar(true)
+      .navDestination(this.PageMap)
+    }
+    .backgroundColor(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+      $r('app.color.classify_navigation_content_color_sm') : $r('app.color.classify_navigation_content_color'))
+    .height(CommonConstants.FULL_PERCENT)
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/ClassifyHeader.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ClassifyHeader.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e71bafcd9ae6b9f947388032fd84d79c82263366
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ClassifyHeader.ets
@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { ClassifyConstants } from '../constants/ClassifyConstants';
+
+@Component
+export struct ClassifyHeader {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Row() {
+      Row() {
+        Stack({ alignContent: Alignment.Start }) {
+          TextInput({ placeholder: ClassifyConstants.INPUT_PROMPT_STRING(this.context) })
+            .placeholderFont({
+              size: $r('app.float.classify_header_input_font_size'),
+              weight: FontWeight.Normal
+            })
+            .placeholderColor($r('app.color.classify_header_input_placeholder'))
+            .backgroundColor($r('app.color.classify_header_input_background'))
+            .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? CommonConstants.FULL_PERCENT :
+              $r('app.float.classify_header_input_width'))
+            .height($r('app.float.classify_header_input_height'))
+            .fontSize($r('app.float.classify_header_input_font_size'))
+            .padding({
+              left: $r('app.float.classify_header_input_padding_left'),
+              right:  $r('app.float.classify_header_input_padding_right')
+            })
+          Image($r('app.media.ic_public_search'))
+            .width($r('app.float.classify_header_input_search_size'))
+            .height($r('app.float.classify_header_input_search_size'))
+            .margin({ left:$r('app.float.classify_header_input_search_margin') })
+        }
+        .layoutWeight(1)
+
+        Image($r('app.media.ic_public_comments'))
+          .width(ResourceUtil.getCommonImgSize()[0])
+          .height(ResourceUtil.getCommonImgSize()[0])
+          .margin({ left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+            $r('app.float.classify_header_image_margin_sm') : $r('app.float.classify_header_image_margin') })
+      }
+      .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? CommonConstants.FULL_PERCENT :
+        $r('app.float.classify_header_row_width'))
+      .padding({
+        left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+          $r('app.float.classify_header_padding_left_sm') : $r('app.float.classify_header_padding'),
+        right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+          $r('app.float.classify_header_padding_right_sm') : $r('app.float.classify_header_padding')
+      })
+    }
+    .padding({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : this.topRectHeight })
+    .height(deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? CommonConstants.TAB_BAR_HEIGHT :
+      CommonConstants.TAB_BAR_HEIGHT + this.topRectHeight)
+    .width(CommonConstants.FULL_PERCENT)
+    .justifyContent(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? FlexAlign.Center : FlexAlign.End)
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/ClassifyNavdestinationPhone.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ClassifyNavdestinationPhone.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4537e1607b445dc2529dbe98bb499434b64abb98
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ClassifyNavdestinationPhone.ets
@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, BreakpointType, CommonConstants } from '@ohos/commons';
+import { ClassifyShopList } from '../view/ClassifyShopList';
+import { BannerList } from '../viewmodel/ShopListViewModel';
+import { ClassifyConstants } from '../constants/ClassifyConstants';
+
+@Component
+export struct ClassifyNavDestination {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @State name: string = "";
+  private scroller: Scroller = new Scroller();
+
+  build() {
+    NavDestination() {
+      Column() {
+        Scroll(this.scroller) {
+          Column() {
+            Row() {
+              ClassifyBanner()
+            }
+            .width(CommonConstants.FULL_PERCENT)
+            .padding({ right: new BreakpointType($r('app.float.classify_banner_padding_right_sm'),
+                $r('app.float.classify_banner_padding_right_md'), $r('app.float.classify_banner_padding_right_lg'))
+                .getValue(this.currentBreakpoint) })
+
+            ClassifyShopList()
+          }
+          .padding({ bottom: deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[1] ? 0 :
+            CommonConstants.BOTTOM_RECT_HEIGHT })
+        }
+        .scrollBarWidth(0)
+        .padding({
+          top: $r('app.float.classify_destination_padding_top'),
+          left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+            $r('app.float.classify_destination_padding_left_sm') : $r('app.float.classify_destination_padding_left')
+        })
+      }
+    }
+    .hideTitleBar(true)
+    .backgroundColor(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+      $r('app.color.classify_navigation_content_color_sm'): $r('app.color.classify_navigation_content_color'))
+  }
+}
+
+@Component
+export struct ClassifyBanner {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  private swiperController: SwiperController = new SwiperController();
+  private bannerList: Array<Resource> = new BannerList().getBannerList();
+
+  build() {
+    Swiper(this.swiperController) {
+      ForEach(this.bannerList, (item: Resource) => {
+        Image(item)
+          .width(CommonConstants.FULL_PERCENT)
+          .height($r('app.float.classify_banner_height'))
+          .aspectRatio(ClassifyConstants.BANNER_IMAGE_RATIO)
+      }, (item: Resource, index: number) => JSON.stringify(item) + index)
+    }
+    .loop(true)
+    .indicator(
+      this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+      Indicator.dot()
+        .itemWidth($r('app.float.classify_swiper_indicator_width'))
+        .itemHeight($r('app.float.classify_swiper_indicator_height'))
+        .selectedItemWidth($r('app.float.classify_swiper_indicator_selected_width'))
+        .selectedItemHeight($r('app.float.classify_swiper_indicator_selected_height'))
+        .color($r('app.color.classify_indicator_color'))
+        .selectedColor($r('app.color.classify_indicator_selected_color')) : false
+    )
+    .displayCount(new BreakpointType(ClassifyConstants.SWIPER_DISPLAY_COUNT[0],
+      ClassifyConstants.SWIPER_DISPLAY_COUNT[1], ClassifyConstants.SWIPER_DISPLAY_COUNT[2])
+      .getValue(this.currentBreakpoint))
+    .nextMargin(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ?
+      $r('app.float.classify_swiper_next_margin_md') : 0)
+    .itemSpace(new BreakpointType(ClassifyConstants.SWIPER_ITEM_SPACE[0], ClassifyConstants.SWIPER_ITEM_SPACE[1],
+      ClassifyConstants.SWIPER_ITEM_SPACE[2]).getValue(this.currentBreakpoint))
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/ClassifyShopList.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ClassifyShopList.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d0745e4eff0ebf00d67ffa605f178e4b28f633b0
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ClassifyShopList.ets
@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, BreakpointType, CommonConstants,  ResourceUtil } from '@ohos/commons';
+import { ClassifyConstants } from '../constants/ClassifyConstants';
+import { ShopListViewModel, ShopListItem, ShopItem } from '../viewmodel/ShopListViewModel';
+
+@Component
+export struct ClassifyShopList {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+  private context: Context = this.getUIContext().getHostContext()!
+  private shopList: ShopListViewModel = new ShopListViewModel(this.context);
+
+  build() {
+    List() {
+      ForEach(this.shopList.getShopList(), (item: ShopListItem) => {
+        ListItem() {
+          Column() {
+            Row() {
+              Text(item.getName())
+                .font({
+                  size: $r('app.float.shop_list_font'),
+                  weight: CommonConstants.FONT_WEIGHT_500
+                })
+                .textAlign(TextAlign.Start)
+            }
+            .height($r('app.float.shop_list_row_height'))
+            .width(CommonConstants.FULL_PERCENT)
+
+            GridRow({
+              columns: new BreakpointType(BreakpointConstants.GRID_ROW_COLUMNS[5],
+                BreakpointConstants.GRID_ROW_COLUMNS[6], BreakpointConstants.GRID_ROW_COLUMNS[1])
+                .getValue(this.currentBreakpoint),
+              gutter:{
+                x: ClassifyConstants.GRID_ROW_GUTTERS[0],
+                y: new BreakpointType(ClassifyConstants.GRID_ROW_GUTTERS[1], ClassifyConstants.GRID_ROW_GUTTERS[2],
+                  ClassifyConstants.GRID_ROW_GUTTERS[3]).getValue(this.currentBreakpoint)
+              }
+            }){
+              ForEach(item.getItem(), (item: ShopItem) =>{
+                GridCol({ span: 1 }){
+                  Column(){
+                    Image(item.getImage())
+                      .width(CommonConstants.FULL_PERCENT)
+                      .aspectRatio(1)
+                    Text(item.getName())
+                      .fontSize($r('app.float.list_name_font'))
+                      .fontWeight(FontWeight.Normal)
+                      .maxLines(2)
+                      .textOverflow({ overflow: TextOverflow.Ellipsis })
+                  }
+                  .onClick(() => {
+                    this.pageInfos.pushPath({ name: ClassifyConstants.PAGE_INFO_LIST[2] });
+                  })
+                }
+              }, (item: ShopItem, index: number) => JSON.stringify(item) + index)
+            }
+            .padding({
+              left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.shop_grid_padding') :
+                0,
+              right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.shop_grid_padding') :
+                0,
+            })
+          }
+          .backgroundColor(Color.White)
+          .border({ radius: ResourceUtil.getCommonBorderRadius()[6] })
+          .width(CommonConstants.FULL_PERCENT)
+          .padding({
+            left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.shop_col_padding_lg') :
+              $r('app.float.shop_col_padding'),
+            right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.shop_col_padding_lg') :
+              $r('app.float.shop_col_padding'),
+            bottom: $r('app.float.shop_col_padding')
+          })
+          .margin({
+            top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.shop_col_margin_lg') :
+              $r('app.float.shop_col_margin')
+          })
+        }
+      }, (item: ShopListItem, index: number) => JSON.stringify(item) + index)
+    }
+    .padding({ right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint) })
+    .margin({ bottom: $r('app.float.shop_list_margin') })
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/CommonView.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/CommonView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..0648ac135e114410f5668c502b7e9223aa7c3bca
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/CommonView.ets
@@ -0,0 +1,206 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonConstants, ResourceUtil } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+
+@Component
+export struct HomeButton {
+  public buttonText: string = '';
+
+  build() {
+    Button(this.buttonText)
+      .backgroundColor($r('app.color.button_color'))
+      .borderRadius(ResourceUtil.getCommonBorderRadius()[5])
+      .height($r('app.float.button_height'))
+      .width($r('app.float.button_width'))
+      .fontColor(Color.White)
+      .fontSize($r('app.float.button_font'))
+      .fontWeight(CommonConstants.FONT_WEIGHT_500)
+  }
+}
+
+@Component
+export struct TitleView {
+  public titleText: string = '';
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Row() {
+      Text(this.titleText)
+        .fontSize($r('app.float.title_font'))
+        .lineHeight($r('app.float.title_line'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+
+      Blank()
+
+      Text(HomeConstants.TIP_TEXTS(this.context)[1])
+        .fontSize($r('app.float.title_tip_font'))
+        .lineHeight($r('app.float.title_tip_line'))
+        .fontWeight(FontWeight.Normal)
+        .opacity(CommonConstants.TEXT_OPACITY[2])
+      Image(ResourceUtil.getArrowRight())
+        .width(ResourceUtil.getCommonImgSize()[0])
+        .height(ResourceUtil.getCommonImgSize()[0])
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .height($r('app.float.title_height'))
+    .padding({
+      left: $r('app.float.title_view_padding'),
+      right: $r('app.float.title_view_padding')
+    })
+  }
+}
+
+@Component
+export struct ProductTitle {
+  @State isCenter: boolean = true;
+  public title: string[] = [];
+
+  build() {
+    Row() {
+      if (this.title.length !== 1) {
+        Text(this.title[1])
+          .lineHeight($r('app.float.section_tip_text_line'))
+          .fontSize($r('app.float.section_tip_text_size'))
+          .fontColor(Color.White)
+          .fontWeight(FontWeight.Normal)
+          .linearGradient({
+            direction: GradientDirection.Right,
+            repeating: false,
+            colors: [[HomeConstants.GRADIENT_COLORS[2], 0.0], [HomeConstants.GRADIENT_COLORS[3], 1.0]]
+          })
+          .backgroundColor($r('app.color.section_tip_background'))
+          .borderRadius(ResourceUtil.getCommonBorderRadius()[1])
+          .textAlign(TextAlign.Center)
+          .padding({
+            left: $r('app.float.section_tip_text_padding'),
+            right: $r('app.float.section_tip_text_padding')
+          })
+          .margin({ right: $r('app.float.section_tip_text_margin') })
+      }
+      Text(this.title[0])
+        .fontSize($r('app.float.section_title_text_size'))
+        .lineHeight($r('app.float.section_title_text_line'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+        .maxLines(1)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+        .layoutWeight(this.isCenter ? 0 : 1)
+    }
+    .justifyContent(this.isCenter ? FlexAlign.Center : FlexAlign.Start)
+  }
+}
+
+@Component
+export struct ProductInfo {
+  public info: string = '';
+
+  build() {
+    if (this.info === '') {
+      Blank()
+        .height($r('app.float.section_info_text_line'))
+    } else {
+      Text(this.info)
+        .fontSize($r('app.float.section_info_text_size'))
+        .lineHeight($r('app.float.section_info_text_line'))
+        .fontWeight(FontWeight.Normal)
+        .maxLines(1)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+        .opacity(CommonConstants.TEXT_OPACITY[1])
+        .margin({ top: $r('app.float.section_info_text_margin') })
+    }
+  }
+}
+
+@Component
+export struct ProductPrice {
+  public price: string = '';
+  public originalPrice: string = '';
+
+  build() {
+    Row() {
+      Text(this.price)
+        .fontSize($r('app.float.section_price_text_size'))
+        .lineHeight($r('app.float.section_price_text_line'))
+        .fontColor($r('app.color.section_text'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+      if (this.originalPrice !== '') {
+        Text(this.originalPrice)
+          .fontSize($r('app.float.original_price_text_size'))
+          .lineHeight($r('app.float.original_price_text_line'))
+          .fontWeight(FontWeight.Normal)
+          .fontColor($r('app.color.original_price_color'))
+          .decoration({
+            type: TextDecorationType.LineThrough,
+            color: $r('app.color.original_price_color')
+          })
+          .margin({ left: $r('app.float.original_price_text_margin')})
+      }
+    }
+    .margin({ top: $r('app.float.section_price_text_margin') })
+  }
+}
+
+@Component
+export struct ProductFeature {
+  public feature: string[] = [];
+
+  build() {
+    Row() {
+      ForEach(this.feature, (itemStr: string) => {
+        Text(itemStr)
+          .fontSize($r('app.float.section_feature_text_size'))
+          .lineHeight($r('app.float.section_feature_text_line'))
+          .fontColor($r('app.color.section_text'))
+          .fontWeight(FontWeight.Normal)
+          .maxLines(1)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+          .padding({
+            left: $r('app.float.section_feature_padding'),
+            right: $r('app.float.section_feature_padding')
+          })
+          .margin({
+            top: $r('app.float.section_feature_margin_top'),
+            left: $r('app.float.section_feature_margin_left')
+          })
+          .border({
+            width: $r('app.float.section_feature_border_width'),
+            color: $r('app.color.section_feature_border_color'),
+            radius: $r('app.float.section_feature_border_radius'),
+            style: BorderStyle.Solid
+          })
+      }, (item: string, index: number) => index + JSON.stringify(item))
+    }
+  }
+}
+
+@Component
+export struct ProductComments {
+  public comments: string = '';
+
+  build() {
+    Text(this.comments)
+      .fontSize($r('app.float.section_comments_text_size'))
+      .fontWeight(FontWeight.Normal)
+      .lineHeight($r('app.float.section_comments_text_line'))
+      .maxLines(1)
+      .textOverflow({ overflow: TextOverflow.Ellipsis })
+      .opacity(CommonConstants.TEXT_OPACITY[1])
+      .margin({
+        top: $r('app.float.section_comments_text_top'),
+        bottom: $r('app.float.section_comments_text_bottom')
+      })
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/FlashSale.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/FlashSale.ets
new file mode 100644
index 0000000000000000000000000000000000000000..75694884f93db4c61f4b266b450e0e6cd0713cda
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/FlashSale.ets
@@ -0,0 +1,135 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, BreakpointType, CommonConstants, Logger, ResourceUtil } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { SectionProduct, SectionProductsViewModel } from '../viewmodel/SectionProductsViewModel';
+import { HomeButton, ProductFeature, ProductInfo, ProductPrice, ProductTitle, TitleView } from './CommonView';
+
+@Component
+export struct FlashSale {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('windowWidth') windowWidth: number = 0;
+  private context: Context = this.getUIContext().getHostContext()!
+  private flashSaleProductList: SectionProduct[] = new SectionProductsViewModel(this.context).getFlashSaleProductList();
+
+  build() {
+    Column() {
+      TitleView({ titleText: HomeConstants.HOME_TITLES(this.context)[2] })
+
+      GridRow({
+        columns: {
+          sm: BreakpointConstants.GRID_ROW_COLUMNS[0],
+          md: BreakpointConstants.GRID_ROW_COLUMNS[1],
+          lg: BreakpointConstants.GRID_ROW_COLUMNS[2]
+        },
+        gutter: {
+          x: new BreakpointType($r('app.float.flash_grid_gutter_x_sm'), $r('app.float.flash_grid_gutter_x_md'),
+            $r('app.float.flash_grid_gutter_x_lg')).getValue(this.currentBreakpoint),
+          y: $r('app.float.flash_grid_gutter_y')
+        }
+      }) {
+        ForEach(this.getCurrentSectionProducts(), (item: SectionProduct) => {
+          GridCol({
+            span: {
+              sm: BreakpointConstants.GRID_COLUMN_SPANS[2],
+              md: BreakpointConstants.GRID_COLUMN_SPANS[2],
+              lg: BreakpointConstants.GRID_COLUMN_SPANS[2]
+            }
+          }){
+            Row() {
+              Image(item.getProductImg())
+                .height(this.getImageHeight(this.currentBreakpoint, this.windowWidth) + CommonConstants.WIDTH_UNIT)
+                .aspectRatio(1)
+
+              Column() {
+                ProductTitle({ title: item.getTitle(), isCenter: false })
+                ProductInfo({ info: item.getInfo() })
+                ProductFeature({ feature: item.getFeature() })
+                Blank()
+                ProductPrice({ price: item.getPrice(), originalPrice: item.getOriginalPrice() })
+                HomeButton({ buttonText: HomeConstants.BUTTON_TEXTS(this.context)[1] })
+                  .margin({
+                    top: $r('app.float.flash_button_top'),
+                    bottom: $r('app.float.flash_button_bottom'),
+                    right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                      $r('app.float.flash_button_right_lg') : $r('app.float.flash_button_right')
+                  })
+                  .alignSelf(ItemAlign.End)
+              }
+              .alignItems(HorizontalAlign.Start)
+              .margin({ left: $r('app.float.flash_row_margin') })
+              .layoutWeight(1)
+              .height(CommonConstants.FULL_PERCENT)
+            }
+            .width(CommonConstants.FULL_PERCENT)
+            .height(CommonConstants.FULL_PERCENT)
+          }
+          .height(this.getGridColHeight())
+        }, (item: SectionProduct, index: number) => index + JSON.stringify(item))
+      }
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+    .backgroundColor(Color.White)
+    .margin({
+      top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.flash_sale_margin_lg') :
+        $r('app.float.flash_sale_margin'),
+      bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.flash_sale_margin_lg') :
+        $r('app.float.flash_sale_margin')
+    })
+  }
+
+  getCurrentSectionProducts(): SectionProduct[] {
+    if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+      return this.flashSaleProductList.slice(0, 2);
+    } else if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      return this.flashSaleProductList.slice(0, 4);
+    } else {
+      return this.flashSaleProductList;
+    }
+  }
+
+  getImageHeight(currentBreakpoint: string, windowWidth: number): number {
+    // Obtain the window width and subtract the blank parts on both sides.
+    let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(HomeConstants.RECOMMENDED_PRODUCT_VIEW_SPACES[1],
+      HomeConstants.RECOMMENDED_PRODUCT_VIEW_SPACES[2], HomeConstants.RECOMMENDED_PRODUCT_VIEW_SPACES[3])
+      .getValue(this.currentBreakpoint) * 2;
+    if (currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      result = result - CommonConstants.LG_SIDEBAR_WIDTH;
+    } else {
+      Logger.info(`No need to subtract sidebar width`);
+    }
+
+    // Calculate the width of a single image based on the number of display counts.
+    if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+      result = result * HomeConstants.FLASH_SALE_IMAGE_PERCENT[0];
+    } else if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      result = (result - HomeConstants.WELFARE_GRID_COL_GUTTERS[1]) / CommonConstants.TWO *
+      HomeConstants.FLASH_SALE_IMAGE_PERCENT[1];
+    } else {
+      result = (result - HomeConstants.WELFARE_GRID_COL_GUTTERS[3] * 2) / CommonConstants.THREE *
+      HomeConstants.FLASH_SALE_IMAGE_PERCENT[1];
+    }
+    return result;
+  }
+
+  getGridColHeight(): string {
+    if (this.getImageHeight(this.currentBreakpoint, this.windowWidth) <= HomeConstants.FLASH_SALE_INTRO_COL_HEIGHT) {
+      return HomeConstants.FLASH_SALE_INTRO_COL_HEIGHT + CommonConstants.WIDTH_UNIT;
+    }
+    return this.getImageHeight(this.currentBreakpoint, this.windowWidth) + CommonConstants.WIDTH_UNIT;
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/Home.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/Home.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3a88f1314a2e5653c522e628ee748902c72ac200
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/Home.ets
@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { FooterTab, FooterTabViewModel } from '../viewmodel/FooterTabViewModel';
+import { HomeContent } from './HomeContent';
+import { ClassifyContent } from './ClassifyContent';
+import { ShoppingBagContent } from './ShoppingBagContent';
+
+@Component
+export struct Home {
+  @State currentBottomIndex: number = 0;
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+  private context: Context = this.getUIContext().getHostContext()!
+  private tabList: FooterTab[] = new FooterTabViewModel(this.context).getTabList();
+
+  @Builder
+  BottomTabBuilder(item: FooterTab, index: number) {
+    Column() {
+      Image(index !== this.currentBottomIndex ? item.getIcon() : item.getIconSelected())
+        .width(ResourceUtil.getCommonImgSize()[0])
+        .height(ResourceUtil.getCommonImgSize()[0])
+      Text(item.getName())
+        .fontSize($r('app.float.tab_font_size'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+        .fontColor(index === this.currentBottomIndex ? $r('app.color.tab_sel_color') : Color.Black)
+        .margin({ top: $r('app.float.tab_top_margin') })
+        .opacity(index === this.currentBottomIndex ? CommonConstants.TEXT_OPACITY[0] : CommonConstants.TEXT_OPACITY[1])
+    }
+    .padding({
+      bottom: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : CommonConstants.BOTTOM_RECT_HEIGHT
+    })
+    .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.side_tab_bar_height') :
+      CommonConstants.FULL_PERCENT)
+    .width(CommonConstants.FULL_PERCENT)
+    .justifyContent(FlexAlign.Center)
+  }
+
+  build() {
+    Column() {
+      Tabs({ barPosition: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarPosition.Start :
+        BarPosition.End }) {
+        TabContent() {
+          HomeContent()
+        }
+        .tabBar(this.BottomTabBuilder(this.tabList[0], 0))
+
+        TabContent() {
+          ClassifyContent()
+        }
+        .tabBar(this.BottomTabBuilder(this.tabList[1], 1))
+
+        TabContent() {
+        }
+        .tabBar(this.BottomTabBuilder(this.tabList[2], 2))
+
+        TabContent() {
+          ShoppingBagContent()
+        }
+        .tabBar(this.BottomTabBuilder(this.tabList[3], 3))
+
+        TabContent() {
+        }
+        .tabBar(this.BottomTabBuilder(this.tabList[4], 4))
+      }
+      // Change the position and size of the tab at the bottom.
+      .barWidth(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.bottom_tab_bar_width_lg') :
+        CommonConstants.FULL_PERCENT)
+      .barHeight(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? CommonConstants.FULL_PERCENT :
+        ((deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? CommonConstants.TAB_BAR_HEIGHT :
+          CommonConstants.TAB_BAR_HEIGHT + CommonConstants.BOTTOM_RECT_HEIGHT)))
+      .barBackgroundColor($r('app.color.tab_background_color'))
+      .barMode(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarMode.Scrollable : BarMode.Fixed,
+        { nonScrollableLayoutStyle: LayoutStyle.ALWAYS_CENTER })
+      .vertical(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG)
+      .onChange((index: number) => {
+        this.currentBottomIndex = index;
+      })
+      .scrollable(false)
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/HomeContent.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/HomeContent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1667a356ad82fefbef5222737e3238a3ec26e19e
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/HomeContent.ets
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { Categories } from './Categories';
+import { FlashSale } from './FlashSale';
+import { HomeHeader } from './HomeHeader';
+import { RecommendedProductView } from './RecommendedProductView';
+import { Selection } from './Selection';
+import { WelfareView } from './WelfareView';
+
+@Component
+export struct HomeContent {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  private scroller: Scroller = new Scroller();
+
+  build() {
+    Column() {
+      HomeHeader()
+
+      Scroll(this.scroller) {
+        Column() {
+          Categories()
+
+          Column() {
+            RecommendedProductView()
+            WelfareView()
+            Selection()
+            FlashSale()
+          }
+          .width(CommonConstants.FULL_PERCENT)
+          .justifyContent(FlexAlign.Start)
+          .padding({ right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint) })
+        }
+        .width(CommonConstants.FULL_PERCENT)
+        .justifyContent(FlexAlign.Start)
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .layoutWeight(1)
+      .scrollBar(BarState.Off)
+    }
+    .backgroundColor(ResourceUtil.getCommonBackgroundColor()[0])
+    .padding({
+      left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint)
+    })
+    .height(CommonConstants.FULL_PERCENT)
+    .width(CommonConstants.FULL_PERCENT)
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/HomeHeader.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/HomeHeader.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f138e4a08018f3b9f12a916b2607fa9eb23f0654
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/HomeHeader.ets
@@ -0,0 +1,142 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, BreakpointType, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+
+@Component
+export struct HomeHeader {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Column() {
+      GridRow({
+        columns: {
+          sm: BreakpointConstants.GRID_ROW_COLUMNS[0],
+          md: BreakpointConstants.GRID_ROW_COLUMNS[4],
+          lg: BreakpointConstants.GRID_ROW_COLUMNS[2]
+        }
+      }) {
+        GridCol({
+          span: {
+            sm: BreakpointConstants.GRID_COLUMN_SPANS[2],
+            md: BreakpointConstants.GRID_COLUMN_SPANS[6],
+            lg: BreakpointConstants.GRID_COLUMN_SPANS[3]
+          }
+        }) {
+          this.TopTabBar()
+        }
+        .padding({
+          top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : this.topRectHeight
+        })
+        .height(deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? CommonConstants.TAB_BAR_HEIGHT :
+          CommonConstants.TAB_BAR_HEIGHT + this.topRectHeight)
+
+        GridCol({
+          span: {
+            sm: BreakpointConstants.GRID_COLUMN_SPANS[2],
+            md: BreakpointConstants.GRID_COLUMN_SPANS[2],
+            lg: BreakpointConstants.GRID_COLUMN_SPANS[2]
+          }
+        }) {
+          this.SearchBar()
+        }
+        .padding({ top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM || deviceInfo.deviceType ===
+          CommonConstants.DEVICE_TYPES[0] ? 0 : this.topRectHeight })
+        .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM || deviceInfo.deviceType ===
+          CommonConstants.DEVICE_TYPES[0] ? CommonConstants.TAB_BAR_HEIGHT : CommonConstants.TAB_BAR_HEIGHT +
+          this.topRectHeight)
+      }
+      .padding({ right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint) })
+    }
+  }
+
+  @Builder
+  TopTabBar() {
+    List({ space: new BreakpointType(HomeConstants.HOME_HEADER_LIST_SPACES[0], HomeConstants.HOME_HEADER_LIST_SPACES[1],
+      HomeConstants.HOME_HEADER_LIST_SPACES[2]).getValue(this.currentBreakpoint) }) {
+      ForEach(HomeConstants.TOP_BAR_TEXTS(this.context), (item: string, index: number) => {
+        ListItem() {
+          Text(item)
+            .fontSize(index === 0 ? $r('app.float.top_bar_text_selected_font') : $r('app.float.top_bar_text_font'))
+            .lineHeight(index === 0 ? $r('app.float.top_bar_text_selected_line') : $r('app.float.top_bar_text_line'))
+            .fontWeight(index === 0 ? CommonConstants.FONT_WEIGHT_500 : FontWeight.Normal)
+            .fontColor(index === 0 ? Color.Black : $r('app.color.home_header_text_color'))
+        }
+        .layoutWeight(1)
+      }, (item: string, index: number) => item + index)
+    }
+    .scrollBar(BarState.Off)
+    .alignListItem(ListItemAlign.Center)
+    .listDirection(Axis.Horizontal)
+    .padding({
+      left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.top_text_padding_left_sm') : 0,
+      right: new BreakpointType($r('app.float.top_text_padding_right_sm'), $r('app.float.top_text_padding_right_md'),
+        $r('app.float.top_text_padding_right_lg')).getValue(this.currentBreakpoint)
+    })
+    .width(CommonConstants.FULL_PERCENT)
+    .height(CommonConstants.FULL_PERCENT)
+  }
+
+  @Builder
+  SearchBar() {
+    Row() {
+      Stack({ alignContent: Alignment.Start }) {
+        TextInput({ placeholder: HomeConstants.SEARCH_PLACEHOLDER(this.context) })
+          .placeholderFont({
+            size: $r('app.float.search_input_font'),
+            weight: FontWeight.Normal
+          })
+          .placeholderColor($r('app.color.normal_font_color'))
+          .height($r('app.float.search_input_height'))
+          .fontSize($r('app.float.search_input_font'))
+          .padding({
+            left: $r('app.float.search_input_left'),
+            right: $r('app.float.search_input_right')
+          })
+          .width(CommonConstants.FULL_PERCENT)
+          .enableKeyboardOnFocus(false)
+
+        // Search image.
+        Image($r('app.media.ic_public_search'))
+          .width($r('app.float.search_img_size'))
+          .height($r('app.float.search_img_size'))
+          .margin({ left: $r('app.float.search_img_left') })
+      }
+      .alignSelf(ItemAlign.Center)
+      .layoutWeight(1)
+
+      // Scan image.
+      Image($r('app.media.ic_public_scan'))
+        .width(ResourceUtil.getCommonImgSize()[0])
+        .height(ResourceUtil.getCommonImgSize()[0])
+        .margin({ left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+          $r('app.float.search_img_margin_sm') : $r('app.float.search_img_margin') })
+
+      // Message image.
+      Image($r('app.media.ic_public_comments'))
+        .width(ResourceUtil.getCommonImgSize()[0])
+        .height(ResourceUtil.getCommonImgSize()[0])
+        .margin({ left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+          $r('app.float.search_img_margin_sm') : $r('app.float.search_img_margin') })
+    }
+    .justifyContent(FlexAlign.Center)
+    .width(CommonConstants.FULL_PERCENT)
+    .height(CommonConstants.FULL_PERCENT)
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/RecommendedProductView.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/RecommendedProductView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..c3d74581ef39bfef6402b32ad716e3524e328a93
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/RecommendedProductView.ets
@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, BreakpointType, CommonConstants, Logger, ResourceUtil } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { RecommendedProductViewModel, RecommendedProduct } from '../viewmodel/RecommendedProductViewModel';
+
+@Component
+export struct RecommendedProductView {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('windowWidth') windowWidth: number = 0;
+  @State recommendedProducts: RecommendedProduct[] = new RecommendedProductViewModel().getRecommendedProductList();
+
+  build() {
+    Swiper() {
+      ForEach(this.getRecommendedProducts(this.recommendedProducts), (item: RecommendedProduct) => {
+        Stack() {
+          Image(item.getImage())
+            .width(CommonConstants.FULL_PERCENT)
+            .height(CommonConstants.FULL_PERCENT)
+
+          if (item.getIsLive()) {
+            Image($r('app.media.icon_is_living'))
+              .width(ResourceUtil.getCommonImgSize()[0])
+              .height(ResourceUtil.getCommonImgSize()[0])
+              .margin({
+                top: $r('app.float.section_live_margin'),
+                right: $r('app.float.section_live_margin')
+              })
+          }
+        }
+        .alignContent(Alignment.TopEnd)
+        .aspectRatio(1)
+        .width(this.getSwiperWidth(this.currentBreakpoint, this.windowWidth))
+        .height(this.getSwiperWidth(this.currentBreakpoint, this.windowWidth))
+      }, (item: Resource, index: number) => JSON.stringify(item) + index)
+    }
+    .displayCount(new BreakpointType(CommonConstants.TWO, CommonConstants.THREE, CommonConstants.FOUR)
+      .getValue(this.currentBreakpoint))
+    .itemSpace(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ?
+      HomeConstants.RECOMMENDED_PRODUCT_ITEM_SPACES[1] : HomeConstants.RECOMMENDED_PRODUCT_ITEM_SPACES[0])
+    .margin({
+      top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.recommend_swiper_top_sm') : 0,
+      bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ?
+        $r('app.float.recommend_swiper_bottom_md') : $r('app.float.recommend_swiper_bottom')
+    })
+    .indicator(false)
+  }
+
+  getRecommendedProducts(recommendedProducts: RecommendedProduct[]): RecommendedProduct[] {
+    if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+      return recommendedProducts.slice(0, 2);
+    } else if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      return recommendedProducts.slice(0, 3);
+    } else {
+      return recommendedProducts;
+    }
+  }
+
+  getSwiperWidth(currentBreakpoint: string, windowWidth: number): string {
+    // Obtain the window width and subtract the blank parts on both sides.
+    let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(HomeConstants.RECOMMENDED_PRODUCT_VIEW_SPACES[1],
+      HomeConstants.RECOMMENDED_PRODUCT_VIEW_SPACES[2], HomeConstants.RECOMMENDED_PRODUCT_VIEW_SPACES[3])
+      .getValue(this.currentBreakpoint);
+    if (currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      result = result - CommonConstants.LG_SIDEBAR_WIDTH;
+    } else {
+      Logger.info(`No need to subtract sidebar width`);
+    }
+    // Calculate the width of a single image based on the number of display counts.
+    if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+      result = (result - HomeConstants.RECOMMENDED_PRODUCT_VIEW_SPACES[1] * 1) / CommonConstants.TWO;
+    } else if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      result = (result - HomeConstants.RECOMMENDED_PRODUCT_VIEW_SPACES[0] * 3) / CommonConstants.FOUR;
+    } else {
+      result = (result - HomeConstants.RECOMMENDED_PRODUCT_VIEW_SPACES[1] * 5) / CommonConstants.FOUR;
+    }
+    // Calculate the height of a single image, title, and content, and calculate the total height of the grid layout.
+    return result / 1 * CommonConstants.TWO + CommonConstants.WIDTH_UNIT;
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/Selection.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/Selection.ets
new file mode 100644
index 0000000000000000000000000000000000000000..353d037455edf6b4f077ff31ef80cda6e0ffc243
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/Selection.ets
@@ -0,0 +1,125 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, BreakpointType, CommonConstants, Logger, ResourceUtil } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { SectionProduct, SectionProductsViewModel } from '../viewmodel/SectionProductsViewModel';
+import { ProductComments, ProductFeature, ProductInfo, ProductPrice, ProductTitle, TitleView } from './CommonView';
+
+@Component
+export struct Selection {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('windowWidth') windowWidth: number = 0;
+  private context: Context = this.getUIContext().getHostContext()!
+  private sectionProducts: SectionProduct[] = new SectionProductsViewModel(this.context).getSectionProductList();
+
+  build() {
+    Column() {
+      TitleView({ titleText: HomeConstants.HOME_TITLES(this.context)[1] })
+
+      GridRow({
+        columns: {
+          sm: BreakpointConstants.GRID_ROW_COLUMNS[0],
+          md: BreakpointConstants.GRID_ROW_COLUMNS[2],
+          lg: BreakpointConstants.GRID_ROW_COLUMNS[3]
+        },
+        gutter: new BreakpointType($r('app.float.section_gutter_sm'), $r('app.float.section_gutter_md'),
+          $r('app.float.section_gutter_lg')).getValue(this.currentBreakpoint)
+      }) {
+        ForEach(this.getCurrentSectionProducts(), (item: SectionProduct, index: number) => {
+          GridCol({
+            span: {
+              sm: BreakpointConstants.GRID_COLUMN_SPANS[0],
+              md: BreakpointConstants.GRID_COLUMN_SPANS[2],
+              lg: BreakpointConstants.GRID_COLUMN_SPANS[1]
+            }
+          }) {
+            Column() {
+              Stack() {
+                Image(item.getProductImg())
+                  .objectFit(ImageFit.Contain)
+                  .aspectRatio(HomeConstants.SELECTION_IMG_ASPECT_RATIO)
+                  .width(CommonConstants.FULL_PERCENT)
+                  .height(CommonConstants.FULL_PERCENT)
+
+                if (index === 1) {
+                  Image($r('app.media.icon_is_living'))
+                    .width(ResourceUtil.getCommonImgSize()[0])
+                    .height(ResourceUtil.getCommonImgSize()[0])
+                    .margin({
+                      top: $r('app.float.section_live_margin'),
+                      right: $r('app.float.section_live_margin')
+                    })
+                }
+              }
+              .alignContent(Alignment.TopEnd)
+              .height(this.getStackHeight(this.currentBreakpoint, this.windowWidth))
+              .width(CommonConstants.FULL_PERCENT)
+              .margin({ bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+                $r('app.float.section_image_margin_sm') : $r('app.float.section_image_margin') })
+
+              ProductTitle({ title: item.getTitle() })
+              ProductInfo({ info: item.getInfo() })
+              ProductFeature({ feature: item.getFeature() })
+              ProductPrice({ price: item.getPrice() })
+              ProductComments({ comments: item.getComments() })
+            }
+            .width(CommonConstants.FULL_PERCENT)
+          }
+          .width(CommonConstants.FULL_PERCENT)
+        }, (item: SectionProduct, index: number) => index + JSON.stringify(item))
+      }
+      .width(CommonConstants.FULL_PERCENT)
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+    .backgroundColor(Color.White)
+    .margin({ top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ? $r('app.float.section_margin_md') :
+      $r('app.float.section_margin')})
+  }
+
+  getCurrentSectionProducts(): SectionProduct[] {
+    if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+      return this.sectionProducts.slice(0, 2);
+    } else if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      return this.sectionProducts.slice(0, 3);
+    } else {
+      return this.sectionProducts;
+    }
+  }
+
+  getStackHeight(currentBreakpoint: string, windowWidth: number): string {
+    // Obtain the window width and subtract the blank parts on both sides.
+    let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(HomeConstants.RECOMMENDED_PRODUCT_VIEW_SPACES[1],
+      HomeConstants.RECOMMENDED_PRODUCT_VIEW_SPACES[2], HomeConstants.RECOMMENDED_PRODUCT_VIEW_SPACES[3])
+      .getValue(this.currentBreakpoint) * 2;
+    if (currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      result = result - CommonConstants.LG_SIDEBAR_WIDTH;
+    } else {
+      Logger.info(`No need to subtract sidebar width`);
+    }
+
+    // Calculate the width of a single image based on the number of display counts.
+    if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+      result = (result - HomeConstants.WELFARE_GRID_COL_GUTTERS[0] * 1) / CommonConstants.TWO;
+    } else if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      result = (result - HomeConstants.WELFARE_GRID_COL_GUTTERS[0] * 2) / CommonConstants.THREE;
+    } else {
+      result = (result - HomeConstants.WELFARE_GRID_COL_GUTTERS[1] * 4) / CommonConstants.FIVE;
+    }
+    // Calculate the height of a single image.
+    return result / HomeConstants.SELECTION_IMG_ASPECT_RATIO + CommonConstants.WIDTH_UNIT;
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/ShoppingBagContent.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ShoppingBagContent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e553e1546ed81073e15626540fbd20db899ef053
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ShoppingBagContent.ets
@@ -0,0 +1,244 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { ShoppingCardFoot } from './ShoppingCardFoot';
+import { ShoppingBagDiscounts } from './ShoppingBagDiscounts';
+import { ShoppingBagListViewModel, ShoppingBagProduct } from '../viewmodel/ShoppingBagListViewModel';
+import { ShoppingCardItem } from './ShoppingCardItem';
+import { ShoppingBagConstants } from '../constants/ShoppingBagConstants';
+
+@Component
+export struct ShoppingBagContent {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+
+  build() {
+    Row() {
+      ShoppingBagView()
+      ShoppingBagDiscounts()
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .height(CommonConstants.FULL_PERCENT)
+    .backgroundColor(ResourceUtil.getCommonBackgroundColor()[0])
+  }
+}
+
+@Component
+struct ShoppingBagView {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Column() {
+      Column() {
+        Row() {
+          Text(ShoppingBagConstants.SHOPPING_BAG_TITLES(this.context)[0])
+            .font({
+              size: $r('app.float.bag_title_font'),
+              weight: CommonConstants.FONT_WEIGHT_500
+            })
+          Blank()
+          Text(ShoppingBagConstants.SHOPPING_BAG_TITLES(this.context)[1])
+            .font({
+              size: $r('app.float.bag_name_font')
+            })
+            .opacity(CommonConstants.TEXT_OPACITY[2])
+        }
+        .height($r('app.float.bag_title_row_height'))
+        .width(CommonConstants.FULL_PERCENT)
+
+        ShoppingBagCard()
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .layoutWeight(1)
+      .margin({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? $r('app.float.bag_col_margin') :
+        this.topRectHeight })
+
+      ShoppingCardFoot()
+        .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.None : Visibility.Visible)
+    }
+    .padding({
+      left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+      right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint)
+    })
+    .layoutWeight(ShoppingBagConstants.SHOPPING_BAG_LAYOUT_WEIGHTS[0])
+    .height(CommonConstants.FULL_PERCENT)
+    .border({
+      width: { right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? 1 : 0 },
+      color: ResourceUtil.getCommonBorderColor()[1]
+    })
+  }
+}
+
+@Component
+export struct DetailShoppingBagView {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+  public isMoreDetail: boolean = false;
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Column() {
+      Column() {
+        Row() {
+          Image($r('app.media.ic_public_back'))
+            .width(ResourceUtil.getCommonImgSize()[0])
+            .height(ResourceUtil.getCommonImgSize()[0])
+            .margin({ right: $r('app.float.bag_back_margin') })
+            .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM && this.isMoreDetail ?
+              Visibility.Visible : Visibility.None)
+            .onClick(() => {
+              if (this.pageInfos !== undefined) {
+                this.pageInfos.pop();
+              }
+            })
+          Text(ShoppingBagConstants.SHOPPING_BAG_TITLES(this.context)[0])
+            .font({
+              size: $r('app.float.bag_title_font'),
+              weight: CommonConstants.FONT_WEIGHT_500
+            })
+          Blank()
+          Text(ShoppingBagConstants.SHOPPING_BAG_TITLES(this.context)[1])
+            .font({ size: $r('app.float.bag_name_font') })
+            .opacity(CommonConstants.TEXT_OPACITY[2])
+          Image($r('app.media.icon_close'))
+            .width(ResourceUtil.getCommonImgSize()[0])
+            .height(ResourceUtil.getCommonImgSize()[0])
+            .margin({ left: $r('app.float.bag_close_margin') })
+            .visibility(this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_SM ? Visibility.Visible :
+              Visibility.None)
+            .onClick(() => {
+              if (this.pageInfos !== undefined) {
+                this.pageInfos.pop();
+              }
+            })
+        }
+        .height($r('app.float.bag_title_row_height'))
+        .width(CommonConstants.FULL_PERCENT)
+
+        ShoppingBagCard()
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .layoutWeight(1)
+      .margin({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? $r('app.float.bag_col_margin') :
+        this.topRectHeight })
+
+      ShoppingCardFoot()
+        .margin({ bottom: deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[0] ?
+          CommonConstants.BOTTOM_RECT_HEIGHT : 0 })
+        .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG && !this.isMoreDetail ?
+          Visibility.None : Visibility.Visible)
+    }
+    .padding({
+      left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+      right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint)
+    })
+    .layoutWeight(ShoppingBagConstants.SHOPPING_BAG_LAYOUT_WEIGHTS[0])
+    .height(CommonConstants.FULL_PERCENT)
+    .border({
+      width: { right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? 1 : 0 },
+      color: ResourceUtil.getCommonBorderColor()[1]
+    })
+  }
+}
+
+@Component
+export struct ShoppingBagCard {
+  private context: Context = this.getUIContext().getHostContext()!
+  private ShoppingBagList: ShoppingBagProduct[] = new ShoppingBagListViewModel(this.context).getShoppingBagItemData();
+
+  build() {
+    Scroll() {
+      Column() {
+        Row() {
+          CheckboxGroup({ group: 'shoppingCardHuaWei' })
+            .selectedColor($r('app.color.classify_indicator_selected_color'))
+            .width($r('app.float.check_box_size'))
+            .height($r('app.float.check_box_size'))
+            .margin({ right: $r('app.float.check_box_group_margin') })
+            .border({ color: ResourceUtil.getCommonBorderColor()[2] })
+
+          Image($r('app.media.shopping_card_logo'))
+            .width(ResourceUtil.getCommonImgSize()[0])
+            .height(ResourceUtil.getCommonImgSize()[0])
+            .margin({ right: $r('app.float.bag_seller_logo_margin') })
+            .border({
+              radius: ResourceUtil.getCommonBorderRadius()[4],
+              width: $r('app.float.bag_seller_logo_border_width'),
+              color: ResourceUtil.getCommonBorderColor()[3]
+            })
+
+          Text(ShoppingBagConstants.SHOPPING_BAG_TITLES(this.context)[2])
+            .font({
+              size: $r('app.float.bag_name_font'),
+              weight: CommonConstants.FONT_WEIGHT_500
+            })
+            .layoutWeight(1)
+        }
+        .height($r('app.float.bag_card_title_row_height'))
+        .width(CommonConstants.FULL_PERCENT)
+
+        List() {
+          ForEach(this.ShoppingBagList, (item: ShoppingBagProduct) => {
+            ListItem() {
+              Row() {
+                Column() {
+                  Checkbox({ group: 'shoppingCardHuaWei' })
+                    .selectedColor($r('app.color.classify_indicator_selected_color'))
+                    .width($r('app.float.check_box_size'))
+                    .height($r('app.float.check_box_size'))
+                    .margin({
+                      right: $r('app.float.bag_card_check_box_margin'),
+                      left: 0
+                    })
+                    .border({
+                      color: ResourceUtil.getCommonBorderColor()[2]
+                    })
+                    .shape(CheckBoxShape.ROUNDED_SQUARE)
+                }
+                .width($r('app.float.bag_card_check_col_width'))
+                .padding({ top: $r('app.float.bag_card_check_col_padding') })
+                .justifyContent(FlexAlign.Start)
+
+                ShoppingCardItem({
+                  shoppingBagProductItem: item,
+                  titleEllipsis: false
+                })
+                  .layoutWeight(1)
+              }
+              .width(CommonConstants.FULL_PERCENT)
+              .padding({
+                top: $r('app.float.bag_card_row_padding'),
+                bottom: $r('app.float.bag_card_row_padding')
+              })
+            }
+          })
+        }
+        .scrollBar(BarState.Off)
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .backgroundColor(Color.White)
+      .borderRadius(ResourceUtil.getCommonBorderRadius()[7])
+      .padding($r('app.float.bag_card_col_padding'))
+      .margin({ bottom: CommonConstants.BOTTOM_RECT_HEIGHT })
+    }
+    .scrollBar(BarState.Off)
+    .layoutWeight(1)
+    .width(CommonConstants.FULL_PERCENT)
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/ShoppingBagDiscounts.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ShoppingBagDiscounts.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1b87e3cf4549b3987883927fedbf501fd331a7a0
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ShoppingBagDiscounts.ets
@@ -0,0 +1,134 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, ResourceUtil, CommonConstants } from '@ohos/commons';
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { ShoppingCardItem } from './ShoppingCardItem';
+import { ShoppingBagListViewModel, ShoppingBagProduct, PreferenceDetails, PreferenceDetailsList }
+  from '../viewmodel/ShoppingBagListViewModel';
+import { ShoppingCardFoot } from './ShoppingCardFoot';
+import { ShoppingBagConstants } from '../constants/ShoppingBagConstants';
+
+@Component
+export struct ShoppingBagDiscounts {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+  private context: Context = this.getUIContext().getHostContext()!
+  private ShoppingBagList: ShoppingBagProduct[]= new ShoppingBagListViewModel(this.context).getShoppingBagItemData();
+  private PreferenceDetailsList: PreferenceDetails[]= new PreferenceDetailsList(this.context).getPreferenceDetailsList();
+  private ShoppingBagProductItem: ShoppingBagProduct = this.ShoppingBagList[2];
+
+  build() {
+    Column() {
+      Scroll() {
+        Column() {
+          Text(ShoppingBagConstants.SHOPPING_DISCOUNT_TITLES(this.context)[0])
+            .fontSize($r('app.float.bag_discount_font_1'))
+            .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            .lineHeight($r('app.float.bag_discount_line_1'))
+          Text(ShoppingBagConstants.SHOPPING_DISCOUNT_TITLES(this.context)[1])
+            .fontSize($r('app.float.bag_discount_font_2'))
+            .lineHeight($r('app.float.bag_discount_line_2'))
+            .fontWeight(FontWeight.Normal)
+            .padding({
+              top: $r('app.float.bag_discount_title_padding_top'),
+              bottom: $r('app.float.bag_discount_title_padding_bottom')
+            })
+
+          Column() {
+            ShoppingCardItem({
+              shoppingBagProductItem: this.ShoppingBagProductItem,
+              titleEllipsis: true
+            })
+            Row() {
+              Text(ShoppingBagConstants.SHOPPING_DISCOUNT_TITLES(this.context)[2])
+                .fontSize($r('app.float.bag_discount_font_3'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+              Blank()
+              Text(ShoppingBagConstants.SHOPPING_DISCOUNT_TITLES(this.context)[3])
+                .fontSize($r('app.float.bag_discount_font_2'))
+                .fontWeight(FontWeight.Normal)
+            }
+            .height($r('app.float.bag_discount_row_height'))
+            .width(CommonConstants.FULL_PERCENT)
+            .justifyContent(FlexAlign.Center)
+
+            Row() {
+              Text(ShoppingBagConstants.SHOPPING_DISCOUNT_TITLES(this.context)[4])
+                .fontSize($r('app.float.bag_discount_font_3'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+              Blank()
+              Text(ShoppingBagConstants.SHOPPING_DISCOUNT_TITLES(this.context)[5])
+                .fontSize($r('app.float.bag_discount_font_2'))
+                .fontWeight(FontWeight.Normal)
+              Image($r('app.media.ic_public_more_list'))
+                .height(ResourceUtil.getCommonImgSize()[0])
+                .width(ResourceUtil.getCommonImgSize()[0])
+            }
+            .justifyContent(FlexAlign.Center)
+            .height($r('app.float.bag_discount_row_height'))
+            .width(CommonConstants.FULL_PERCENT)
+          }
+          .backgroundColor(Color.White)
+          .padding($r('app.float.bag_discount_padding'))
+          .border({ radius: ResourceUtil.getCommonBorderRadius()[6] })
+          .margin({ bottom: $r('app.float.bag_discount_margin') })
+
+          Column() {
+            ForEach(this.PreferenceDetailsList, (item: PreferenceDetails) => {
+              Row() {
+                Text(item.getTitle())
+                  .fontSize($r('app.float.bag_discount_font_3'))
+                  .fontWeight(FontWeight.Normal)
+                Blank()
+                Text(item.getPrice())
+                  .fontSize($r('app.float.bag_discount_font_2'))
+                  .fontColor('#CF0A2C')
+              }
+              .justifyContent(FlexAlign.Center)
+              .height($r('app.float.bag_discount_row_height'))
+              .width(CommonConstants.FULL_PERCENT)
+            }, (item: PreferenceDetails, index: number) => JSON.stringify(item) + index)
+          }
+          .backgroundColor(Color.White)
+          .padding($r('app.float.bag_discount_padding'))
+          .border({ radius: ResourceUtil.getCommonBorderRadius()[6] })
+        }
+        .width(CommonConstants.FULL_PERCENT)
+        .alignItems(HorizontalAlign.Start)
+        .justifyContent(FlexAlign.Start)
+        .padding({
+          left: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+          right: ResourceUtil.getPageColPadding().getValue(this.currentBreakpoint),
+          top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ?
+            $r('app.float.bag_discount_col_padding_bottom') : this.topRectHeight,
+        })
+
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .scrollBarWidth(0)
+      .layoutWeight(1)
+      .backgroundColor(ResourceUtil.getCommonBackgroundColor()[0])
+
+      ShoppingCardFoot({ isMoreDetail: true })
+        .margin({ bottom: deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[0] ?
+        CommonConstants.BOTTOM_RECT_HEIGHT : 0 })
+    }
+    .backgroundColor($r('app.color.bag_discount_background'))
+    .layoutWeight(ShoppingBagConstants.SHOPPING_BAG_LAYOUT_WEIGHTS[1])
+    .height(CommonConstants.FULL_PERCENT)
+    .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None)
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/ShoppingCardFoot.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ShoppingCardFoot.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1c9fb1a2dbacef4290a2dc031236661e1f37d367
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ShoppingCardFoot.ets
@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { ShoppingBagConstants } from '../constants/ShoppingBagConstants';
+
+@Component
+export struct ShoppingCardFoot {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  public isMoreDetail: boolean = false;
+  private context: Context = this.getUIContext().getHostContext()!
+
+  build() {
+    Row(){
+      Row(){
+        Checkbox()
+          .selectedColor($r('app.color.classify_indicator_selected_color'))
+          .width($r('app.float.check_box_size'))
+          .height($r('app.float.check_box_size'))
+          .margin({
+            right: $r('app.float.shop_card_check_margin'),
+            left: 0
+          })
+          .border({
+            color: ResourceUtil.getCommonBorderColor()[2]
+          })
+          .shape(CheckBoxShape.ROUNDED_SQUARE)
+        Text(ShoppingBagConstants.SHOPPING_CARD_FOOT_TITLES(this.context)[0])
+          .fontSize($r('app.float.shop_card_font_1'))
+          .lineHeight($r('app.float.shop_card_line_1'))
+          .fontWeight(FontWeight.Normal)
+      }
+      .height(CommonConstants.FULL_PERCENT)
+      .justifyContent(FlexAlign.Start)
+
+      Blank()
+
+      Row(){
+        Column(){
+          Row(){
+            Text(ShoppingBagConstants.SHOPPING_CARD_FOOT_TITLES(this.context)[1])
+              .fontSize($r('app.float.shop_card_font_1'))
+              .lineHeight($r('app.float.shop_card_line_1'))
+            Text(ShoppingBagConstants.SHOPPING_CARD_FOOT_TITLES(this.context)[2])
+              .fontSize($r('app.float.shop_card_font_1'))
+              .lineHeight($r('app.float.shop_card_line_2'))
+              .fontColor($r('app.color.shop_card_font_color'))
+            Text(ShoppingBagConstants.SHOPPING_CARD_FOOT_TITLES(this.context)[3])
+              .fontSize($r('app.float.shop_card_font_2'))
+              .lineHeight($r('app.float.shop_card_line_3'))
+              .fontColor($r('app.color.shop_card_font_color'))
+          }
+          Row(){
+            Text(ShoppingBagConstants.SHOPPING_CARD_FOOT_TITLES(this.context)[4])
+              .fontSize($r('app.float.shop_card_font_3'))
+              .lineHeight($r('app.float.shop_card_line_4'))
+              .fontWeight(FontWeight.Normal)
+              .opacity(CommonConstants.TEXT_OPACITY[2])
+              .margin({
+                right: $r('app.float.arrow_up_margin')
+              })
+            Image($r('app.media.ic_public_arrow_up'))
+              .width($r('app.float.arrow_up_width'))
+              .height($r('app.float.arrow_up_height'))
+              .opacity(CommonConstants.TEXT_OPACITY[1])
+          }
+        }
+
+        Button(ShoppingBagConstants.SHOPPING_CARD_FOOT_TITLES(this.context)[5],
+          { type: ButtonType.Capsule, stateEffect: true })
+          .labelStyle({
+            font:{
+              size:$r('app.float.shop_card_font_2')
+            }
+          })
+          .backgroundColor($r('app.color.shop_card_foot_button'))
+          .height($r('app.float.foot_button_height'))
+          .width($r('app.float.foot_button_width'))
+          .margin({
+            left: $r('app.float.foot_button_margin')
+          })
+      }
+      .height(CommonConstants.FULL_PERCENT)
+      .alignItems(VerticalAlign.Center)
+    }
+    .justifyContent(FlexAlign.Start)
+    .width(CommonConstants.FULL_PERCENT)
+    .height($r('app.float.foot_height'))
+    .padding({
+      left: this.isMoreDetail ? $r('app.float.foot_padding_more') : 0,
+      right: this.isMoreDetail ? $r('app.float.foot_padding_more') : 0
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/ShoppingCardItem.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ShoppingCardItem.ets
new file mode 100644
index 0000000000000000000000000000000000000000..820930fb7c6eb63424d1cfee6aaaa9ebd3d8505b
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/ShoppingCardItem.ets
@@ -0,0 +1,227 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonConstants, ResourceUtil } from '@ohos/commons';
+import { ShoppingBagConstants } from '../constants/ShoppingBagConstants';
+import { ShoppingBagListViewModel, ShoppingBagProduct } from '../viewmodel/ShoppingBagListViewModel';
+
+@Component
+export struct ShoppingCardItem {
+  private context: Context = this.getUIContext().getHostContext()!
+  public shoppingBagProductItem: ShoppingBagProduct = new ShoppingBagListViewModel(this.context).getShoppingBagItemData()[2];
+  public titleEllipsis?: boolean;
+
+  build() {
+    Row(){
+      Column() {
+        Row() {
+          Image(this.shoppingBagProductItem.getImage())
+            .width(ResourceUtil.getCommonImgSize()[7])
+            .height(ResourceUtil.getCommonImgSize()[7])
+            .border({
+              radius: ResourceUtil.getCommonBorderRadius()[3]
+            })
+
+          Column() {
+            Row() {
+              Text(this.shoppingBagProductItem.getName())
+                .fontSize($r('app.float.card_item_font_1'))
+                .fontWeight(FontWeight.Normal)
+                .textOverflow({
+                  overflow:TextOverflow.Ellipsis
+                })
+                .maxLines(this.titleEllipsis === true ? 1 : 2)
+            }
+            .margin({
+              bottom: $r('app.float.card_item_name_margin')
+            })
+
+            Row() {
+              Text(this.shoppingBagProductItem.getType())
+                .textOverflow({ overflow:TextOverflow.Ellipsis })
+                .maxLines(1)
+                .fontSize($r('app.float.card_item_font_6'))
+                .fontColor($r('app.color.shop_card_type_font'))
+                .margin({
+                  right: $r('app.float.card_item_type_margin')
+                })
+              Image($r('app.media.ic_public_arrow_down'))
+                .width(ResourceUtil.getCommonImgSize()[8])
+                .height(ResourceUtil.getCommonImgSize()[8])
+            }
+            .backgroundColor(ResourceUtil.getCommonBackgroundColor()[2])
+            .border({ radius: ResourceUtil.getCommonBorderRadius()[9] })
+            .padding({
+              top: $r('app.float.card_type_padding_row_top'),
+              bottom: $r('app.float.card_type_padding_row_top'),
+              left: $r('app.float.card_type_padding_row_left'),
+              right: $r('app.float.card_type_padding_row_right')
+            })
+            .margin({
+              bottom: $r('app.float.card_type_margin_row_bottom')
+            })
+
+            Row() {
+              ForEach(this.shoppingBagProductItem.getPreferentialList(), (item: string)=>{
+                Text(item)
+                  .border({
+                    color: $r('app.color.shop_card_font_color'),
+                    radius: ResourceUtil.getCommonBorderRadius()[1],
+                    width: 1
+                  })
+                  .fontSize($r('app.float.card_item_font_2'))
+                  .fontColor($r('app.color.shop_card_font_color'))
+                  .padding({
+                    top: $r('app.float.card_preferential_padding_top'),
+                    bottom: $r('app.float.card_preferential_padding_top'),
+                    left: $r('app.float.card_preferential_padding_left'),
+                    right: $r('app.float.card_preferential_padding_left')
+                  })
+                  .margin({ right: $r('app.float.card_preferential_margin') })
+              }, (item: string, index: number) => item + index)
+            }
+            .margin({ bottom: $r('app.float.card_preferential_row_margin') })
+
+            Flex({
+                direction: FlexDirection.Row,
+                alignItems: ItemAlign.Center,
+                wrap:FlexWrap.Wrap
+            }) {
+              Row() {
+                Text(ShoppingBagConstants.SHOPPING_CARD_NAMES(this.context)[0])
+                  .font({
+                    size: $r('app.float.card_item_font_3'),
+                    weight: CommonConstants.FONT_WEIGHT_500
+                  })
+                Text(JSON.stringify(this.shoppingBagProductItem.getPrice()))
+                  .font({
+                    size: $r('app.float.card_item_font_4'),
+                    weight: CommonConstants.FONT_WEIGHT_500
+                  })
+                  .margin({
+                    right: $r('app.float.card_price_margin')
+                  })
+                Text(ShoppingBagConstants.SHOPPING_CARD_NAMES(this.context)[0] +
+                  JSON.stringify(this.shoppingBagProductItem.getOriginalPrice()))
+                  .font({
+                    size: $r('app.float.card_item_font_5'),
+                  })
+                  .fontColor($r('app.color.shop_card_type_font'))
+                  .decoration({
+                    type: TextDecorationType.LineThrough,
+                    color: $r('app.color.shop_card_type_font')
+                  })
+                  .margin({
+                    right: $r('app.float.card_price_more_margin')
+                  })
+                  .visibility(this.shoppingBagProductItem.getOriginalPrice() === -1 ? Visibility.None :
+                    Visibility.Visible)
+              }
+              Blank()
+              Row() {
+                this.AddButton(ShoppingBagConstants.SHOPPING_CARD_NAMES(this.context)[1])
+                Text(ShoppingBagConstants.SHOPPING_CARD_NAMES(this.context)[2])
+                  .fontSize($r('app.float.card_number_font'))
+                  .width($r('app.float.card_number_width'))
+                  .margin({
+                    left: $r('app.float.card_number_margin'),
+                    right: $r('app.float.card_number_margin')
+                  })
+                  .textAlign(TextAlign.Center)
+                this.AddButton(ShoppingBagConstants.SHOPPING_CARD_NAMES(this.context)[3])
+              }
+            }
+            .width(CommonConstants.FULL_PERCENT)
+          }
+          .padding({
+            left: $r('app.float.card_item_col_padding'),
+            bottom: $r('app.float.card_item_col_padding')
+          })
+          .layoutWeight(1)
+          .alignItems(HorizontalAlign.Start)
+        }
+
+        Column() {
+          Row() {
+            Text(ShoppingBagConstants.SHOPPING_CARD_NAMES(this.context)[4])
+              .fontSize($r('app.float.card_item_font_3'))
+              .width($r('app.float.card_gift_width'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            Text(this.shoppingBagProductItem.getPresent())
+              .fontSize($r('app.float.card_item_font_3'))
+              .fontColor($r('app.color.card_gift_font'))
+              .layoutWeight(1)
+              .textOverflow({
+                overflow:TextOverflow.Ellipsis
+              })
+              .maxLines(1)
+            Blank()
+            Image(ResourceUtil.getArrowRight())
+              .width(ResourceUtil.getCommonImgSize()[9])
+              .height(ResourceUtil.getCommonImgSize()[9])
+          }
+          .width(CommonConstants.FULL_PERCENT)
+          .margin({
+            top: $r('app.float.card_gift_row_margin_top'),
+            bottom: $r('app.float.card_gift_row_margin_bottom')
+          })
+
+          Row() {
+            Text(ShoppingBagConstants.SHOPPING_CARD_NAMES(this.context)[5])
+              .fontSize($r('app.float.card_item_font_3'))
+              .width($r('app.float.card_gift_width'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            Text(this.shoppingBagProductItem.getService())
+              .fontSize($r('app.float.card_item_font_3'))
+              .backgroundColor(ResourceUtil.getCommonBackgroundColor()[2])
+              .border({ radius: ResourceUtil.getCommonBorderRadius()[1] })
+              .padding({
+                left: $r('app.float.card_service_padding_left'),
+                right: $r('app.float.card_service_padding_left'),
+                top: $r('app.float.card_service_padding_top'),
+                bottom: $r('app.float.card_service_padding_top')
+              })
+            Blank()
+            Image(ResourceUtil.getArrowRight())
+              .width(ResourceUtil.getCommonImgSize()[9])
+              .height(ResourceUtil.getCommonImgSize()[9])
+          }
+          .width(CommonConstants.FULL_PERCENT)
+        }
+        .width(CommonConstants.FULL_PERCENT)
+        .padding({
+          left: $r('app.float.card_gift_row_padding')
+        })
+      }
+      .alignItems(HorizontalAlign.Start)
+      .layoutWeight(1)
+    }
+    .width(CommonConstants.FULL_PERCENT)
+  }
+
+  @Builder
+  AddButton(buttonText: string) {
+    Text(buttonText)
+      .width($r('app.float.add_button_size'))
+      .height($r('app.float.add_button_size'))
+      .border({
+        radius: ResourceUtil.getCommonBorderRadius()[4],
+        width: $r('app.float.add_button_border_width'),
+        color: $r('app.color.add_button_border')
+      })
+      .fontColor($r('app.color.add_button_border'))
+      .textAlign(TextAlign.Center)
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/view/WelfareView.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/view/WelfareView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..91b03b3c2bac802dec7042e5cd872cc4e6aadde6
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/view/WelfareView.ets
@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, BreakpointType, CommonConstants, ResourceUtil } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { IconInfo, IconInfoViewModel } from '../viewmodel/IconInfoViewModel';
+import { HomeButton } from './CommonView';
+
+@Component
+export struct WelfareView {
+  @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  private context: Context = this.getUIContext().getHostContext()!
+  private welfareList: IconInfo[] = new IconInfoViewModel(this.context).getWelfareList();
+
+  build() {
+    Column() {
+      Row() {
+        Text(HomeConstants.HOME_TITLES(this.context)[0])
+          .fontSize($r('app.float.title_font'))
+          .lineHeight($r('app.float.title_line'))
+          .fontWeight(CommonConstants.FONT_WEIGHT_500)
+
+        Blank()
+
+        HomeButton({ buttonText: HomeConstants.BUTTON_TEXTS(this.context)[0] })
+      }
+      .justifyContent(FlexAlign.Start)
+      .height($r('app.float.title_height'))
+      .width(CommonConstants.FULL_PERCENT)
+
+      Row() {
+        ForEach(this.getCurrentWelfareList(), (item: IconInfo) => {
+          Column() {
+            Image(item.getIcon())
+              .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+                $r('app.float.welfare_image_size_sm') : $r('app.float.welfare_image_size'))
+              .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+                $r('app.float.welfare_image_size_sm') : $r('app.float.welfare_image_size'))
+            Text(HomeConstants.TIP_TEXTS(this.context)[0])
+              .fontSize($r('app.float.welfare_tip_font'))
+              .fontWeight(FontWeight.Normal)
+              .lineHeight($r('app.float.welfare_tip_line'))
+              .width($r('app.float.welfare_tip_width'))
+              .borderRadius(ResourceUtil.getCommonBorderRadius()[5])
+              .backgroundColor($r('app.color.welfare_tip_background'))
+              .textAlign(TextAlign.Center)
+            Text(item.getInfo())
+              .fontSize($r('app.float.welfare_info_font'))
+              .lineHeight($r('app.float.welfare_info_line'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+              .margin({ top: $r('app.float.welfare_info_margin') })
+          }
+          .height(CommonConstants.FULL_PERCENT)
+          .justifyContent(FlexAlign.Start)
+          .backgroundColor(Color.White)
+        }, (item: IconInfo, index: number) => index + JSON.stringify(item))
+      }
+      .height(new BreakpointType($r('app.float.welfare_row_height_sm'), $r('app.float.welfare_row_height_md'),
+        $r('app.float.welfare_row_height_lg')).getValue(this.currentBreakpoint))
+      .width(CommonConstants.FULL_PERCENT)
+      .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+      .backgroundColor(Color.White)
+      .justifyContent(FlexAlign.SpaceBetween)
+      .padding({
+        left: new BreakpointType($r('app.float.welfare_row_padding_sm'), $r('app.float.welfare_row_padding_md'),
+          $r('app.float.welfare_row_padding_lg')).getValue(this.currentBreakpoint),
+        right: new BreakpointType($r('app.float.welfare_row_padding_sm'), $r('app.float.welfare_row_padding_md'),
+          $r('app.float.welfare_row_padding_lg')).getValue(this.currentBreakpoint)
+      })
+    }
+    .height(new BreakpointType($r('app.float.welfare_col_height_sm'), $r('app.float.welfare_col_height_md'),
+      $r('app.float.welfare_col_height_lg')).getValue(this.currentBreakpoint))
+    .width(CommonConstants.FULL_PERCENT)
+    .padding({
+      left: $r('app.float.welfare_col_padding'),
+      right: $r('app.float.welfare_col_padding')
+    })
+    .borderRadius(ResourceUtil.getCommonBorderRadius()[6])
+    .linearGradient({
+      direction: GradientDirection.Right,
+      repeating: false,
+      colors: [[HomeConstants.GRADIENT_COLORS[0], 0.0], [HomeConstants.GRADIENT_COLORS[1], 1.0]]
+    })
+  }
+
+  getCurrentWelfareList(): IconInfo[] {
+    if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+      return this.welfareList.slice(0, 3);
+    } else if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      return this.welfareList.slice(0, 6);
+    } else {
+      return this.welfareList;
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/FooterTabViewModel.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/FooterTabViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..306952fd298ee98931b70b5484d2c07a9baba04e
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/FooterTabViewModel.ets
@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HomeConstants } from '../constants/HomeConstants';
+
+export class FooterTabViewModel {
+  private tabList: FooterTab[] = [];
+
+  constructor(context: Context) {
+    HomeConstants.FOOTER_TOPIC_LIST(context).forEach((item: string, index: number) => {
+      this.tabList.push(new FooterTab(item, HomeConstants.FOOTER_TOPIC_ICONS[index],
+        HomeConstants.FOOTER_TOPIC_ICONS_SELECTED[index]));
+    });
+  }
+
+  getTabList(): FooterTab[] {
+    return this.tabList;
+  }
+}
+
+export class FooterTab {
+  /**
+   * Name of the tab.
+   */
+  private name: string;
+
+  /**
+   * Icon of the tab.
+   */
+  private icon: Resource;
+
+  /**
+   * Icon selected.
+   */
+  private iconSelected: Resource;
+
+  constructor(name: string, icon: Resource, iconSelected: Resource) {
+    this.name = name;
+    this.icon = icon;
+    this.iconSelected = iconSelected;
+  }
+
+  getName(): string {
+    return this.name;
+  }
+
+  getIcon(): Resource {
+    return this.icon;
+  }
+
+  getIconSelected(): Resource {
+    return this.iconSelected;
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/IconInfoViewModel.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/IconInfoViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..8896e74fcbb883621eceafebe44281df870d3622
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/IconInfoViewModel.ets
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HomeConstants } from '../constants/HomeConstants';
+
+export class  IconInfoViewModel {
+  private categoryList: IconInfo[] = [];
+  private welfareList: IconInfo[] = [];
+
+  constructor(context: Context) {
+    HomeConstants.GOOD_CATEGORIES(context).forEach((item: string, index: number) => {
+      this.categoryList.push(new IconInfo(item, HomeConstants.GOOD_CATEGORY_IMG[index]));
+    });
+    HomeConstants.WELFARE_PRODUCTS.forEach((item: string, index: number) => {
+      this.welfareList.push(new IconInfo(this.makeUpPrice(item, context), HomeConstants.WELFARE_PRODUCT_IMG[index]));
+    });
+  }
+
+  getCategoryList(): IconInfo[] {
+    return this.categoryList;
+  }
+
+  makeUpPrice(price: string, context: Context): string {
+    return HomeConstants.PRICE_UNIT(context)[0] + price + HomeConstants.PRICE_UNIT(context)[1];
+  }
+
+  getWelfareList(): IconInfo[] {
+    return this.welfareList;
+  }
+}
+
+export class IconInfo {
+  /**
+   * Info of the icon.
+   */
+  private info: string;
+
+  /**
+   * Icon image.
+   */
+  private icon: Resource;
+
+
+  constructor(info: string, icon: Resource) {
+    this.info = info;
+    this.icon = icon;
+  }
+
+  getInfo(): string {
+    return this.info;
+  }
+
+  getIcon(): Resource {
+    return this.icon;
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/RecommendedProductViewModel.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/RecommendedProductViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f2bc5aa134a6a585d0258a4392c1e6f9c8c8c980
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/RecommendedProductViewModel.ets
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HomeConstants } from '../constants/HomeConstants';
+
+export class RecommendedProductViewModel {
+  private recommendedProductList: RecommendedProduct[] = [];
+
+  constructor() {
+    HomeConstants.RECOMMENDED_PRODUCTS.forEach((item: Resource, index: number) => {
+      this.recommendedProductList.push(new RecommendedProduct(item, HomeConstants.RECOMMENDED_PRODUCT_LIVING[index]));
+    });
+  }
+
+  getRecommendedProductList(): RecommendedProduct[] {
+    return this.recommendedProductList;
+  }
+}
+
+export class RecommendedProduct {
+  /**
+   * Image of the product.
+   */
+  private image: Resource;
+
+  /**
+   * Whether it is live.
+   */
+  private isLive: boolean;
+
+
+  constructor(image: Resource, isLive: boolean) {
+    this.image = image;
+    this.isLive = isLive;
+  }
+
+  getImage(): Resource {
+    return this.image;
+  }
+
+  getIsLive(): Boolean {
+    return this.isLive;
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/SectionProductsViewModel.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/SectionProductsViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..828eefac43c933b347c4486fe9f79fe49f182d18
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/SectionProductsViewModel.ets
@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HomeConstants } from '../constants/HomeConstants';
+
+export class SectionProductsViewModel {
+  private sectionProductList: SectionProduct[] = [];
+  private flashSaleProductList: SectionProduct[] = [];
+
+  constructor(context: Context) {
+    HomeConstants.SECTION_PRODUCT_IMAGES.forEach((item: Resource, index: number) => {
+      this.sectionProductList.push(new SectionProduct(item, HomeConstants.SECTION_PRODUCTS_TITLES(context)[index],
+        HomeConstants.SECTION_PRODUCTS_PRICES[index], HomeConstants.SECTION_PRODUCTS_FEATURES(context)[index],
+        HomeConstants.SECTION_PRODUCTS_COMMENTS(context), HomeConstants.SECTION_PRODUCTS_INFO(context)[index]));
+    });
+    HomeConstants.FLASH_SALE_PRODUCT_IMAGES.forEach((item: Resource, index: number) => {
+      this.flashSaleProductList.push(new SectionProduct(item, HomeConstants.FLASH_SALE_PRODUCT_TITLES(context)[index],
+        HomeConstants.FLASH_SALE_PRODUCT_PRICES[index],
+        HomeConstants.FLASH_SALE_PRODUCT_FEATURES(context)[index], '',
+        HomeConstants.FLASH_SALE_PRODUCT_INFO(context)[index],
+        HomeConstants.FLASH_SALE_PRODUCT_ORIGINAL_PRICES[index]));
+    });
+  }
+
+  getSectionProductList(): SectionProduct[] {
+    return this.sectionProductList;
+  }
+
+  getFlashSaleProductList(): SectionProduct[] {
+    return this.flashSaleProductList;
+  }
+}
+
+export class SectionProduct {
+  private productImg: Resource;
+  private title: string[];
+  private price: string;
+  private feature: string[];
+  private comments: string;
+  private info: string;
+  private originalPrice?: string;
+
+  constructor(productImg: Resource, title: string[], price: string, feature: string[], comments: string, info: string,
+    originalPrice?: string) {
+    this.productImg = productImg;
+    this.title = title;
+    this.price = price;
+    this.feature = feature;
+    this.comments = comments;
+    this.info = info;
+    if (originalPrice !== undefined) {
+      this.originalPrice = originalPrice;
+    }
+  }
+
+  getProductImg(): Resource {
+    return this.productImg;
+  }
+
+  getTitle(): string[] {
+    return this.title;
+  }
+
+  getPrice(): string {
+    return this.price;
+  }
+
+  getFeature(): string[] {
+    return this.feature;
+  }
+
+  getComments(): string {
+    return this.comments;
+  }
+
+  getInfo(): string {
+    return this.info;
+  }
+
+  getOriginalPrice(): string | undefined {
+    return this.originalPrice;
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/ShopListViewModel.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/ShopListViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ba89328ece7f632b977fc801e239ad7cd519ae50
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/ShopListViewModel.ets
@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ClassifyConstants } from '../constants/ClassifyConstants';
+
+export class ShopListViewModel {
+  private shopList: Array<ShopListItem> = [];
+
+  constructor(context: Context) {
+    ClassifyConstants.SHOP_MATRIX.forEach((item: Array<string>, index: number) =>{
+      let shopItemList: Array<ShopItem> = [];
+      item.forEach((item: string, itemIndex: number) => {
+        shopItemList.push(new ShopItem(item,ClassifyConstants.SHOP_MATRIX_IMAGE[index][itemIndex]));
+      })
+      this.shopList.push(new ShopListItem(ClassifyConstants.SHOP_TITLE_LIST(context)[index], shopItemList));
+    })
+  }
+
+  getShopList(): Array<ShopListItem> {
+    return this.shopList;
+  }
+}
+
+export class ShopItem {
+  /**
+   * Name of the tab.
+   */
+  private name: string;
+
+  /**
+   * Icon of the tab.
+   */
+  private image: Resource;
+
+  constructor(name: string, image: Resource) {
+    this.name = name;
+    this.image = image;
+  }
+
+  getName(): string {
+    return this.name;
+  }
+
+  getImage(): Resource {
+    return this.image;
+  }
+}
+
+export class ShopListItem {
+  /**
+   * Name of the ShopList.
+   */
+  private name: string;
+
+  /**
+   * List of the ShopList.
+   */
+  private ShopList: Array<ShopItem>;
+
+  constructor(name: string, ShopList: Array<ShopItem>) {
+    this.name = name;
+    this.ShopList = ShopList;
+  }
+
+  getName(): string {
+    return this.name;
+  }
+
+  getItem(): Array<ShopItem> {
+    return this.ShopList;
+  }
+}
+
+export class BannerList {
+  private bannerList: Array<Resource> = [];
+
+  constructor() {
+    ClassifyConstants.BANNER_IMAGE.forEach((item: Resource)=>{
+      this.bannerList.push(item)
+    })
+  }
+
+  getBannerList(): Array<Resource> {
+    return this.bannerList;
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/ShoppingBagListViewModel.ets b/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/ShoppingBagListViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..50c5cb69a682f4621c90211d7cb1bf187efb6e9e
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/ets/viewmodel/ShoppingBagListViewModel.ets
@@ -0,0 +1,124 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ShoppingBagConstants } from '../constants/ShoppingBagConstants';
+
+export class ShoppingBagListViewModel {
+  private ShoppingBagList: ShoppingBagProduct[] = [];
+
+  constructor(context: Context) {
+    ShoppingBagConstants.PRODUCT_NAME_LIST(context).forEach((item: string, index: number) => {
+      this.ShoppingBagList.push(
+        new ShoppingBagProduct(item, ShoppingBagConstants.PRODUCT_IMAGE_LIST[index],
+          ShoppingBagConstants.PRODUCT_TYPE_LIST(context)[index],
+          ShoppingBagConstants.PRODUCT_PREFERENTIALList_LIST(context)[index],
+          ShoppingBagConstants.PRODUCT_PRICE_LIST[index],
+          ShoppingBagConstants.PRODUCT_ORIGINAL_PRICE_LIST[index],
+          ShoppingBagConstants.PRODUCT_PRESENT_LIST(context)[index],
+          ShoppingBagConstants.PRODUCT_SERVICE_LIST(context)[index]));
+    })
+  }
+
+  getShoppingBagItemData(): ShoppingBagProduct[] {
+    return this.ShoppingBagList;
+  }
+}
+
+export class ShoppingBagProduct {
+  private name: string;
+  private image: Resource;
+  private type: string;
+  private preferentialList: Array<string>;
+  private price: number;
+  private originalPrice: number;
+  private present:string;
+  private service:string;
+
+  constructor(name: string, image: Resource, type: string, preferentialList: Array<string>, price: number,
+              originalPrice: number, present:string, service:string) {
+    this.name = name;
+    this.image = image;
+    this.type = type;
+    this.preferentialList = preferentialList;
+    this.price = price;
+    this.originalPrice = originalPrice;
+    this.present = present;
+    this.service = service;
+  }
+
+  getName():string{
+    return this.name;
+  }
+
+  getImage(): Resource{
+    return this.image;
+  }
+
+  getType():string{
+    return this.type;
+  }
+
+  getPreferentialList():Array<string>{
+    return this.preferentialList;
+  }
+
+  getPrice():number{
+    return this.price;
+  }
+
+  getOriginalPrice():number{
+    return this.originalPrice;
+  }
+
+  getPresent():string{
+    return this.present;
+  }
+
+  getService():string{
+    return this.service;
+  }
+}
+
+export class PreferenceDetailsList {
+  private preferenceDetailsList: PreferenceDetails[] = [];
+
+  constructor(context: Context) {
+    ShoppingBagConstants.PREFERENCE_DETAILS_TITLE(context).forEach((item, index) => {
+      this.preferenceDetailsList.push(new PreferenceDetails(item, ShoppingBagConstants.PREFERENCE_DETAILS_PRICE[index]));
+    })
+  }
+
+  getPreferenceDetailsList():PreferenceDetails[]{
+    return this.preferenceDetailsList;
+  }
+}
+
+export class PreferenceDetails {
+  private title: string;
+  private price:string;
+
+  constructor(title:string, price:string) {
+    this.title = title;
+    this.price = price;
+  }
+
+  getTitle():string{
+    return this.title;
+  }
+
+  getPrice():string{
+    return this.price;
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/module.json5 b/MultiShoppingPriceComparison/features/home/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..a911a60e0b36d765f8ba54364fc1d7df4089603b
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/module.json5
@@ -0,0 +1,12 @@
+{
+  "module": {
+    "name": "home",
+    "type": "har",
+    "description": "$string:shared_desc",
+    "deviceTypes": [
+      "phone",
+      "2in1",
+      "tablet"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/element/color.json b/MultiShoppingPriceComparison/features/home/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..c164767567460f5680b3670c02586b43727f5fcf
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/element/color.json
@@ -0,0 +1,116 @@
+{
+  "color": [
+    {
+      "name": "tab_sel_color",
+      "value": "#D0092D"
+    },
+    {
+      "name": "tab_background_color",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "normal_font_color",
+      "value": "#182431"
+    },
+    {
+      "name": "welfare_tip_background",
+      "value": "#0D000000"
+    },
+    {
+      "name": "button_color",
+      "value": "#E64566"
+    },
+    {
+      "name": "home_background",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "section_feature_border_color",
+      "value": "#66D0092D"
+    },
+    {
+      "name": "section_text",
+      "value": "#D0092D"
+    },
+    {
+      "name": "section_tip_background",
+      "value": "#EA1559"
+    },
+    {
+      "name": "original_price_color",
+      "value": "#66000000"
+    },
+    {
+      "name": "home_header_text_color",
+      "value": "#99000000"
+    },
+    {
+      "name": "classify_indicator_color",
+      "value": "#1A000000"
+    },
+    {
+      "name": "classify_indicator_selected_color",
+      "value": "#CF0A2C"
+    },
+    {
+      "name": "classify_navigation_font_color",
+      "value": "#99000000"
+    },
+    {
+      "name": "classify_navigation_selected_font_color",
+      "value": "#CF0A2C"
+    },
+    {
+      "name": "classify_navigation_divider_color",
+      "value": "#CF0A2C"
+    },
+    {
+      "name": "classify_navigation_content_color_sm",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "classify_navigation_content_color",
+      "value": "#F7F7F7"
+    },
+    {
+      "name": "classify_header_input_placeholder",
+      "value": "#000000"
+    },
+    {
+      "name": "classify_header_input_background",
+      "value": "#0D000000"
+    },
+    {
+      "name": "categories_divider_color_selected",
+      "value": "#1A000000"
+    },
+    {
+      "name": "categories_divider_color",
+      "value": "#D0092D"
+    },
+    {
+      "name": "bag_discount_background",
+      "value": "#F2FAFAFA"
+    },
+    {
+      "name": "shop_card_foot_button",
+      "value": "#CF0A2C"
+    },
+    {
+      "name": "shop_card_font_color",
+      "value": "#CF0A2C"
+    },
+    {
+      "name": "shop_card_type_font",
+      "value": "#99000000"
+    },
+    {
+      "name": "add_button_border",
+      "value": "#333333"
+    },
+    {
+      "name": "card_gift_font",
+      "value": "#E6000000"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/element/float.json b/MultiShoppingPriceComparison/features/home/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..186c2ba6b6a25d6e17d314a0e9d09e3ecc9baf89
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/element/float.json
@@ -0,0 +1,928 @@
+{
+  "float": [
+    {
+      "name": "bottom_tab_bar_width_lg",
+      "value": "96vp"
+    },
+    {
+      "name": "side_tab_bar_height",
+      "value": "80vp"
+    },
+    {
+      "name": "tab_font_size",
+      "value": "10fp"
+    },
+    {
+      "name": "tab_top_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "top_bar_text_selected_font",
+      "value": "24fp"
+    },
+    {
+      "name": "top_bar_text_font",
+      "value": "18fp"
+    },
+    {
+      "name": "top_bar_text_selected_line",
+      "value": "32vp"
+    },
+    {
+      "name": "top_bar_text_line",
+      "value": "24vp"
+    },
+    {
+      "name": "top_bar_text_font_sel",
+      "value": "24fp"
+    },
+    {
+      "name": "top_bar_text_line_sel",
+      "value": "33vp"
+    },
+    {
+      "name": "top_text_padding_left_sm",
+      "value": "8vp"
+    },
+    {
+      "name": "top_text_padding_right_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "top_text_padding_right_md",
+      "value": "24vp"
+    },
+    {
+      "name": "top_text_padding_right_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "search_input_font",
+      "value": "16fp"
+    },
+    {
+      "name": "search_input_height",
+      "value": "40vp"
+    },
+    {
+      "name": "search_input_left",
+      "value": "36vp"
+    },
+    {
+      "name": "search_input_right",
+      "value": "12vp"
+    },
+    {
+      "name": "search_img_size",
+      "value": "16vp"
+    },
+    {
+      "name": "search_img_left",
+      "value": "12vp"
+    },
+    {
+      "name": "search_img_margin_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "search_img_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "category_img_size_sm",
+      "value": "40vp"
+    },
+    {
+      "name": "category_img_size_md",
+      "value": "64vp"
+    },
+    {
+      "name": "category_img_size_lg",
+      "value": "68vp"
+    },
+    {
+      "name": "category_text_font",
+      "value": "12fp"
+    },
+    {
+      "name": "category_text_line",
+      "value": "17vp"
+    },
+    {
+      "name": "category_item_height_sm",
+      "value": "57vp"
+    },
+    {
+      "name": "category_item_height_md",
+      "value": "81vp"
+    },
+    {
+      "name": "category_item_height_lg",
+      "value": "85vp"
+    },
+    {
+      "name": "category_lanes_gutter",
+      "value": "12vp"
+    },
+    {
+      "name": "category_list_height_sm",
+      "value": "126vp"
+    },
+    {
+      "name": "category_list_height_md",
+      "value": "81vp"
+    },
+    {
+      "name": "category_list_height_lg",
+      "value": "85vp"
+    },
+    {
+      "name": "category_divider_width",
+      "value": "24vp"
+    },
+    {
+      "name": "category_divider_row_height",
+      "value": "32vp"
+    },
+    {
+      "name": "category_col_height_sm",
+      "value": "126vp"
+    },
+    {
+      "name": "category_col_height_md",
+      "value": "113vp"
+    },
+    {
+      "name": "category_col_height_lg",
+      "value": "117vp"
+    },
+    {
+      "name": "category_col_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "category_col_margin_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "welfare_image_size_sm",
+      "value": "60vp"
+    },
+    {
+      "name": "welfare_image_size",
+      "value": "72vp"
+    },
+    {
+      "name": "title_font",
+      "value": "16fp"
+    },
+    {
+      "name": "title_line",
+      "value": "22vp"
+    },
+    {
+      "name": "button_height",
+      "value": "28vp"
+    },
+    {
+      "name": "button_width",
+      "value": "80vp"
+    },
+    {
+      "name": "button_font",
+      "value": "12fp"
+    },
+    {
+      "name": "title_height",
+      "value": "48vp"
+    },
+    {
+      "name": "welfare_tip_font",
+      "value": "10fp"
+    },
+    {
+      "name": "welfare_tip_line",
+      "value": "16vp"
+    },
+    {
+      "name": "welfare_tip_width",
+      "value": "40vp"
+    },
+    {
+      "name": "welfare_info_font",
+      "value": "12fp"
+    },
+    {
+      "name": "welfare_info_line",
+      "value": "16vp"
+    },
+    {
+      "name": "welfare_info_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "welfare_row_height_sm",
+      "value": "102vp"
+    },
+    {
+      "name": "welfare_row_height_md",
+      "value": "114vp"
+    },
+    {
+      "name": "welfare_row_height_lg",
+      "value": "118vp"
+    },
+    {
+      "name": "welfare_row_padding_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "welfare_row_padding_md",
+      "value": "12vp"
+    },
+    {
+      "name": "welfare_row_padding_lg",
+      "value": "20vp"
+    },
+    {
+      "name": "welfare_col_height_sm",
+      "value": "162vp"
+    },
+    {
+      "name": "welfare_col_height_md",
+      "value": "174vp"
+    },
+    {
+      "name": "welfare_col_height_lg",
+      "value": "178vp"
+    },
+    {
+      "name": "welfare_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "title_tip_font",
+      "value": "14fp"
+    },
+    {
+      "name": "title_tip_line",
+      "value": "19vp"
+    },
+    {
+      "name": "recommend_swiper_top_sm",
+      "value": "24vp"
+    },
+    {
+      "name": "recommend_swiper_bottom_md",
+      "value": "12vp"
+    },
+    {
+      "name": "recommend_swiper_bottom",
+      "value": "16vp"
+    },
+    {
+      "name": "title_view_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "section_gutter_sm",
+      "value": "10vp"
+    },
+    {
+      "name": "section_gutter_md",
+      "value": "12vp"
+    },
+    {
+      "name": "section_gutter_lg",
+      "value": "8vp"
+    },
+    {
+      "name": "section_live_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "section_image_margin_sm",
+      "value": "12vp"
+    },
+    {
+      "name": "section_image_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "section_tip_text_line",
+      "value": "12vp"
+    },
+    {
+      "name": "section_tip_text_size",
+      "value": "8fp"
+    },
+    {
+      "name": "section_tip_text_margin",
+      "value": "2vp"
+    },
+    {
+      "name": "section_tip_text_padding",
+      "value": "4vp"
+    },
+    {
+      "name": "section_title_text_size",
+      "value": "14fp"
+    },
+    {
+      "name": "section_title_text_line",
+      "value": "19vp"
+    },
+    {
+      "name": "section_info_text_size",
+      "value": "12fp"
+    },
+    {
+      "name": "section_info_text_line",
+      "value": "16vp"
+    },
+    {
+      "name": "section_info_text_margin",
+      "value": "2vp"
+    },
+    {
+      "name": "section_price_text_size",
+      "value": "14fp"
+    },
+    {
+      "name": "section_price_text_line",
+      "value": "19vp"
+    },
+    {
+      "name": "section_price_text_margin",
+      "value": "10vp"
+    },
+    {
+      "name": "original_price_text_size",
+      "value": "8fp"
+    },
+    {
+      "name": "original_price_text_line",
+      "value": "10vp"
+    },
+    {
+      "name": "original_price_text_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "section_feature_text_size",
+      "value": "9fp"
+    },
+    {
+      "name": "section_feature_text_line",
+      "value": "12vp"
+    },
+    {
+      "name": "section_feature_padding",
+      "value": "4vp"
+    },
+    {
+      "name": "section_feature_margin_top",
+      "value": "6vp"
+    },
+    {
+      "name": "section_feature_margin_left",
+      "value": "4vp"
+    },
+    {
+      "name": "section_comments_text_size",
+      "value": "10fp"
+    },
+    {
+      "name": "section_comments_text_line",
+      "value": "14vp"
+    },
+    {
+      "name": "section_comments_text_top",
+      "value": "6vp"
+    },
+    {
+      "name": "section_comments_text_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "section_margin_md",
+      "value": "12vp"
+    },
+    {
+      "name": "section_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "section_feature_border_width",
+      "value": "1vp"
+    },
+    {
+      "name": "section_feature_border_radius",
+      "value": "4vp"
+    },
+    {
+      "name": "flash_sale_margin_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "flash_sale_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "flash_grid_gutter_x_sm",
+      "value": "0"
+    },
+    {
+      "name": "flash_grid_gutter_x_md",
+      "value": "12vp"
+    },
+    {
+      "name": "flash_grid_gutter_x_lg",
+      "value": "4vp"
+    },
+    {
+      "name": "flash_grid_gutter_y",
+      "value": "12vp"
+    },
+    {
+      "name": "flash_button_top",
+      "value": "8vp"
+    },
+    {
+      "name": "flash_button_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "flash_button_right",
+      "value": "8vp"
+    },
+    {
+      "name": "flash_button_right_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "flash_row_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "classify_banner_height",
+      "value": "107vp"
+    },
+    {
+      "name": "classify_swiper_indicator_width",
+      "value": "6vp"
+    },
+    {
+      "name": "classify_swiper_indicator_height",
+      "value": "6vp"
+    },
+    {
+      "name": "classify_swiper_indicator_selected_width",
+      "value": "12vp"
+    },
+    {
+      "name": "classify_swiper_indicator_selected_height",
+      "value": "6vp"
+    },
+    {
+      "name": "classify_swiper_next_margin_md",
+      "value": "13vp"
+    },
+    {
+      "name": "classify_navigation_font_size",
+      "value": "14fp"
+    },
+    {
+      "name": "classify_navigation_line_height",
+      "value": "19vp"
+    },
+    {
+      "name": "classify_navigation_divider_height",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_navigation_bar_width_sm",
+      "value": "96vp"
+    },
+    {
+      "name": "classify_navigation_bar_width_md",
+      "value": "144vp"
+    },
+    {
+      "name": "classify_navigation_bar_width_lg",
+      "value": "200vp"
+    },
+    {
+      "name": "classify_navigation_bar_height",
+      "value": "48vp"
+    },
+    {
+      "name": "classify_header_input_font_size",
+      "value": "16fp"
+    },
+    {
+      "name": "classify_header_input_height",
+      "value": "40vp"
+    },
+    {
+      "name": "classify_header_input_padding_left",
+      "value": "36vp"
+    },
+    {
+      "name": "classify_header_input_padding_right",
+      "value": "12vp"
+    },
+    {
+      "name": "classify_header_input_search_size",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_input_search_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_row_width",
+      "value": "328vp"
+    },
+    {
+      "name": "classify_header_padding_left_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_padding_right_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_padding",
+      "value": "24vp"
+    },
+    {
+      "name": "classify_header_image_margin_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_image_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "classify_banner_padding_right_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_banner_padding_right_md",
+      "value": "0vp"
+    },
+    {
+      "name": "classify_banner_padding_right_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "classify_destination_padding_top",
+      "value": "8vp"
+    },
+    {
+      "name": "classify_destination_padding_left_sm",
+      "value": "4vp"
+    },
+    {
+      "name": "classify_destination_padding_left",
+      "value": "0vp"
+    },
+    {
+      "name": "classify_header_input_width",
+      "value": "232vp"
+    },
+    {
+      "name": "shop_list_font",
+      "value": "16fp"
+    },
+    {
+      "name": "shop_list_row_height",
+      "value": "48vp"
+    },
+    {
+      "name": "list_name_font",
+      "value": "12fp"
+    },
+    {
+      "name": "shop_grid_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "shop_col_padding_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "shop_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "shop_col_margin_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "shop_col_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "shop_list_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_back_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "bag_title_font",
+      "value": "24fp"
+    },
+    {
+      "name": "bag_name_font",
+      "value": "14fp"
+    },
+    {
+      "name": "bag_close_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "bag_title_row_height",
+      "value": "56vp"
+    },
+    {
+      "name": "bag_col_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "check_box_size",
+      "value": "18vp"
+    },
+    {
+      "name": "check_box_group_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_seller_logo_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "bag_seller_logo_border_width",
+      "value": "0.5vp"
+    },
+    {
+      "name": "bag_card_title_row_height",
+      "value": "42vp"
+    },
+    {
+      "name": "bag_card_check_box_margin",
+      "value": "14vp"
+    },
+    {
+      "name": "bag_card_check_col_width",
+      "value": "32vp"
+    },
+    {
+      "name": "bag_card_check_col_padding",
+      "value": "40vp"
+    },
+    {
+      "name": "bag_card_row_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_card_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_discount_font_1",
+      "value": "20fp"
+    },
+    {
+      "name": "bag_discount_font_2",
+      "value": "14fp"
+    },
+    {
+      "name": "bag_discount_font_3",
+      "value": "16fp"
+    },
+    {
+      "name": "bag_discount_line_1",
+      "value": "28vp"
+    },
+    {
+      "name": "bag_discount_line_2",
+      "value": "19vp"
+    },
+    {
+      "name": "bag_discount_line_3",
+      "value": "22vp"
+    },
+    {
+      "name": "bag_discount_title_padding_top",
+      "value": "2vp"
+    },
+    {
+      "name": "bag_discount_title_padding_bottom",
+      "value": "4vp"
+    },
+    {
+      "name": "bag_discount_row_height",
+      "value": "48vp"
+    },
+    {
+      "name": "bag_discount_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_discount_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "bag_discount_col_padding_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "shop_card_check_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "shop_card_font_1",
+      "value": "12fp"
+    },
+    {
+      "name": "shop_card_font_2",
+      "value": "16fp"
+    },
+    {
+      "name": "shop_card_font_3",
+      "value": "10fp"
+    },
+    {
+      "name": "shop_card_line_1",
+      "value": "19vp"
+    },
+    {
+      "name": "shop_card_line_2",
+      "value": "17vp"
+    },
+    {
+      "name": "shop_card_line_3",
+      "value": "22vp"
+    },
+    {
+      "name": "shop_card_line_4",
+      "value": "14vp"
+    },
+    {
+      "name": "arrow_up_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "arrow_up_width",
+      "value": "8vp"
+    },
+    {
+      "name": "arrow_up_height",
+      "value": "16vp"
+    },
+    {
+      "name": "foot_button_height",
+      "value": "40vp"
+    },
+    {
+      "name": "foot_button_width",
+      "value": "120vp"
+    },
+    {
+      "name": "foot_button_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "foot_height",
+      "value": "56vp"
+    },
+    {
+      "name": "foot_padding_more",
+      "value": "32vp"
+    },
+    {
+      "name": "card_item_font_1",
+      "value": "13fp"
+    },
+    {
+      "name": "card_item_font_2",
+      "value": "9fp"
+    },
+    {
+      "name": "card_item_font_3",
+      "value": "12fp"
+    },
+    {
+      "name": "card_item_font_4",
+      "value": "16fp"
+    },
+    {
+      "name": "card_item_font_5",
+      "value": "10fp"
+    },
+    {
+      "name": "card_item_font_6",
+      "value": "11fp"
+    },
+    {
+      "name": "card_item_name_margin",
+      "value": "3vp"
+    },
+    {
+      "name": "card_item_type_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "card_type_padding_row_top",
+      "value": "1vp"
+    },
+    {
+      "name": "card_type_padding_row_left",
+      "value": "6vp"
+    },
+    {
+      "name": "card_type_padding_row_right",
+      "value": "10vp"
+    },
+    {
+      "name": "card_type_margin_row_bottom",
+      "value": "10vp"
+    },
+    {
+      "name": "card_preferential_padding_top",
+      "value": "2vp"
+    },
+    {
+      "name": "card_preferential_padding_left",
+      "value": "5vp"
+    },
+    {
+      "name": "card_preferential_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "card_preferential_row_margin",
+      "value": "11vp"
+    },
+    {
+      "name": "card_price_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "card_price_more_margin",
+      "value": "10vp"
+    },
+    {
+      "name": "add_button_size",
+      "value": "24vp"
+    },
+    {
+      "name": "add_button_border_width",
+      "value": "0.5vp"
+    },
+    {
+      "name": "card_number_font",
+      "value": "13fp"
+    },
+    {
+      "name": "card_number_width",
+      "value": "24vp"
+    },
+    {
+      "name": "card_number_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "card_item_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "card_gift_width",
+      "value": "48vp"
+    },
+    {
+      "name": "card_gift_row_margin_top",
+      "value": "4vp"
+    },
+    {
+      "name": "card_gift_row_margin_bottom",
+      "value": "5vp"
+    },
+    {
+      "name": "card_service_padding_left",
+      "value": "4vp"
+    },
+    {
+      "name": "card_service_padding_top",
+      "value": "2vp"
+    },
+    {
+      "name": "card_gift_row_padding",
+      "value": "42vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/element/string.json b/MultiShoppingPriceComparison/features/home/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..6bf49b76d4232f216e6abe29a9519ca2473ca88d
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/element/string.json
@@ -0,0 +1,416 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "NAV_ROUTER_LIST1",
+      "value": "Phone"
+    },
+    {
+      "name": "NAV_ROUTER_LIST2",
+      "value": "Wearable"
+    },
+    {
+      "name": "NAV_ROUTER_LIST3",
+      "value": "Tablet"
+    },
+    {
+      "name": "NAV_ROUTER_LIST4",
+      "value": "PC"
+    },
+    {
+      "name": "NAV_ROUTER_LIST5",
+      "value": "Display&Print"
+    },
+    {
+      "name": "NAV_ROUTER_LIST6",
+      "value": "Headphone"
+    },
+    {
+      "name": "NAV_ROUTER_LIST7",
+      "value": "Vision"
+    },
+    {
+      "name": "NAV_ROUTER_LIST8",
+      "value": "Lock&Router"
+    },
+    {
+      "name": "NAV_ROUTER_LIST9",
+      "value": "Travel vehicle products"
+    },
+    {
+      "name": "NAV_ROUTER_LIST10",
+      "value": "Digital accessories"
+    },
+    {
+      "name": "NAV_ROUTER_LIST11",
+      "value": "Huawei Services"
+    },
+    {
+      "name": "NAV_ROUTER_LIST12",
+      "value": "Digital content"
+    },
+    {
+      "name": "NAV_ROUTER_LIST13",
+      "value": "Commercial terminal"
+    },
+    {
+      "name": "NAV_ROUTER_LIST14",
+      "value": "Huawei Premium"
+    },
+    {
+      "name": "NAV_ROUTER_LIST15",
+      "value": "Household Appliances"
+    },
+    {
+      "name": "SHOP_TITLE_LIST1",
+      "value": "New products"
+    },
+    {
+      "name": "SHOP_TITLE_LIST2",
+      "value": "2"
+    },
+    {
+      "name": "SHOP_TITLE_LIST3",
+      "value": "HUAWEI P Series"
+    },
+    {
+      "name": "search",
+      "value": "Search"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST1",
+      "value": "Home"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST2",
+      "value": "Categories"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST3",
+      "value": "Discover"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST4",
+      "value": "Cart"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST5",
+      "value": "Personal"
+    },
+    {
+      "name": "TOP_BAR_TEXTS1",
+      "value": "Huawei"
+    },
+    {
+      "name": "TOP_BAR_TEXTS2",
+      "value": "AITO Car"
+    },
+    {
+      "name": "TOP_BAR_TEXTS3",
+      "value": "Huawei Premium"
+    },
+    {
+      "name": "TOP_BAR_TEXTS4",
+      "value": "Ecological Surroundings"
+    },
+    {
+      "name": "searching",
+      "value": "Search..."
+    },
+    {
+      "name": "GOOD_CATEGORIES1",
+      "value": "智慧办公"
+    },
+    {
+      "name": "GOOD_CATEGORIES2",
+      "value": "智慧家居"
+    },
+    {
+      "name": "GOOD_CATEGORIES3",
+      "value": "华为手机"
+    },
+    {
+      "name": "GOOD_CATEGORIES4",
+      "value": "影音娱乐"
+    },
+    {
+      "name": "GOOD_CATEGORIES5",
+      "value": "运动健康"
+    },
+    {
+      "name": "GOOD_CATEGORIES6",
+      "value": "AITO汽车"
+    },
+    {
+      "name": "GOOD_CATEGORIES7",
+      "value": "华为智选"
+    },
+    {
+      "name": "GOOD_CATEGORIES8",
+      "value": "鸿蒙智联"
+    },
+    {
+      "name": "GOOD_CATEGORIES9",
+      "value": "企业商用"
+    },
+    {
+      "name": "GOOD_CATEGORIES10",
+      "value": "全屋智能"
+    },
+    {
+      "name": "PRICE_UNIT",
+      "value": "起"
+    },
+    {
+      "name": "HOME_TITLES1",
+      "value": "Welfare Zone"
+    },
+    {
+      "name": "HOME_TITLES2",
+      "value": "Recommendation"
+    },
+    {
+      "name": "HOME_TITLES3",
+      "value": "Time-Limited Discounts"
+    },
+    {
+      "name": "BUTTON_TEXTS1",
+      "value": "Coupon"
+    },
+    {
+      "name": "BUTTON_TEXTS2",
+      "value": "Buy"
+    },
+    {
+      "name": "TIP_TEXTS1",
+      "value": "用券价"
+    },
+    {
+      "name": "TIP_TEXTS2",
+      "value": "More"
+    },
+    {
+      "name": "TIP_TEXTS3",
+      "value": "新品"
+    },
+    {
+      "name": "SECTION_PRODUCTS_TITLES1",
+      "value": "MateBook X Pro 12代"
+    },
+    {
+      "name": "SECTION_PRODUCTS_TITLES2",
+      "value": "新品"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO1",
+      "value": "北斗卫星消息 | 低电量应急模式"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO2",
+      "value": "144Hz高割全面屏"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO3",
+      "value": "32GB大内存 | 13代酷睿处理器 | 超级终端"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES1",
+      "value": "V1-V5优惠400元/12期免息"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES2",
+      "value": "新一代直屏旗舰机"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES3",
+      "value": "最高省100"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES4",
+      "value": "限时直降300"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES5",
+      "value": "最高省300"
+    },
+    {
+      "name": "SHOPPING_BAG_TITLES1",
+      "value": "Cart"
+    },
+    {
+      "name": "SHOPPING_BAG_TITLES2",
+      "value": "Manage"
+    },
+    {
+      "name": "SHOPPING_BAG_TITLES3",
+      "value": "Huawei official flagship store"
+    },
+    {
+      "name": "SHOPPING_CARD_FOOT_TITLES1",
+      "value": "Select All"
+    },
+    {
+      "name": "SHOPPING_CARD_FOOT_TITLES2",
+      "value": "Total:"
+    },
+    {
+      "name": "SHOPPING_CARD_FOOT_TITLES3",
+      "value": "Discounted ￥1000"
+    },
+    {
+      "name": "SHOPPING_CARD_FOOT_TITLES4",
+      "value": "Check out(1)"
+    },
+    {
+      "name": "HOME_REVIEW",
+      "value": "2.57K Reviews, 95% Positive"
+    },
+    {
+      "name": "Hot_Seller",
+      "value": "Hot Seller"
+    },
+    {
+      "name": "New_Launch",
+      "value": "New Launch"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO4",
+      "value": "New Front 60MP Ultra-Wide Lens"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO5",
+      "value": "2.5K HR Screen | Lt, Thin, Long Batt Life"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO6",
+      "value": "Thin, Flat, Reliable"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES1",
+      "value": "Next-Gen Straight Flagship"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES2",
+      "value": "Award Points"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES3",
+      "value": "Ltd Time: 6M Int-Free"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES4",
+      "value": "V1-V5: ¥100 Off | Free Classic Headphones"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES5",
+      "value": "Pre-order Perf. Ed., Save ¥200"
+    },
+    {
+      "name": "PRODUCT_NAME_LIST1",
+      "value": "HuaWei Mate 50 Pro 256GB Frosty Silver (Kunlun Glass)"
+    },
+    {
+      "name": "PRODUCT_NAME_LIST2",
+      "value": "HuaWei Mate 60 12+1TB Yadan Black (Std Config)"
+    },
+    {
+      "name": "PRODUCT_NAME_LIST3",
+      "value": "【In Stock】HUAWEI Mate X5 12+512GB Phantom Purple"
+    },
+    {
+      "name": "PRODUCT_TYPE_LIST1",
+      "value": "Frosty Silver 256GB (Kunlun Glass), Std Config, Fast Shipping"
+    },
+    {
+      "name": "PRODUCT_TYPE_LIS2",
+      "value": "Yadan Black 12+1TB, Std Config, Pre-order OK"
+    },
+    {
+      "name": "PRODUCT_TYPE_LIST3",
+      "value": "Phantom Purple 512+12GB, Std Config, Fast Shipping"
+    },
+    {
+      "name": "PRODUCT_PREFERENTIALList_LIST_MESSAGE1",
+      "value": "0% Interest"
+    },
+    {
+      "name": "PRODUCT_PREFERENTIALList_LIST_MESSAGE2",
+      "value": "Ltd Time Offer"
+    },
+    {
+      "name": "PRODUCT_PREFERENTIALList_LIST_MESSAGE3",
+      "value": "Next-Gen Straight Flagship"
+    },
+    {
+      "name": "PRODUCT_PREFERENTIALList_LIST_MESSAGE4",
+      "value": "Points"
+    },
+    {
+      "name": "PRODUCT_PRESENT_LIST_MESSAGE1",
+      "value": "HUAWEI FreeLace Headphones …"
+    },
+    {
+      "name": "PRODUCT_PRESENT_LIST_MESSAGE2",
+      "value": "Mate 60 Ring Flash Case (Blk)"
+    },
+    {
+      "name": "PRODUCT_PRESENT_LIST_MESSAGE3",
+      "value": "Mate 50 Ring Flash Case (Silver)"
+    },
+    {
+      "name": "PRODUCT_SERVICE_LIST_message",
+      "value": "Worry-Free Service"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE1",
+      "value": "total price"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE2",
+      "value": "coupon"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE3",
+      "value": "discount"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE4",
+      "value": "sum"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE5",
+      "value": "offer breakdown"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE6",
+      "value": "Actual discount shown at checkout."
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE7",
+      "value": "delivery"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE8",
+      "value": "indicate delivery"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE9",
+      "value": "E-Invoice for Individuals"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE10",
+      "value": "【gift】"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE11",
+      "value": "【Service】"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE12",
+      "value": "event offer"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_1.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..6cfc761a556105237b59ef03a3066351dffa712e
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_1.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_10.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_10.png
new file mode 100644
index 0000000000000000000000000000000000000000..0066a5fe9d112e4887abc82792db0af744a8a5d3
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_10.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_2.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee52a99bcb3fe606f8cebece363b6a79985fc277
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_2.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_3.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..c159bae6faa5ade358597527b853646a703441f3
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_3.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_4.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa1285d517c3adcc2dc483789ed6e841e4c713e9
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_4.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_5.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..4ae1606c81963905bedcaa07ea654c210f45e1a4
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_5.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_6.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe91e1421c874bf9192a82c3d496149fdb218bea
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_6.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_7.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_7.png
new file mode 100644
index 0000000000000000000000000000000000000000..60637700c20352473cd69163b6011aec9e5b12c0
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_7.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_8.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_8.png
new file mode 100644
index 0000000000000000000000000000000000000000..590359291d5757415ef1de3fd5fdf23e49ad4e17
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_8.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_9.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_9.png
new file mode 100644
index 0000000000000000000000000000000000000000..93da6c549f2bacb352104ecc10bfc697be5b9841
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/categories_9.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_banner1.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_banner1.png
new file mode 100644
index 0000000000000000000000000000000000000000..9236adc5eb9afaa7f9e9629efc9ae8de5e7ee9c0
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_banner1.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_banner2.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_banner2.png
new file mode 100644
index 0000000000000000000000000000000000000000..4995e520d35f9fa08fbe74a00625eed209cf7c37
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_banner2.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_banner3.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_banner3.png
new file mode 100644
index 0000000000000000000000000000000000000000..d20821d37c786a8123e81070dce72776edff9398
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_banner3.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_1.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6e9c9fa24cb3fddd2cce49e398f661582da927c
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_1.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_10.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_10.png
new file mode 100644
index 0000000000000000000000000000000000000000..33410003b897f5f1bbe1ade0eb5bf6b16d221883
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_10.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_11.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_11.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f3a94a81d406cd7b6e1c582ec51ac0d3f20082b
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_11.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_12.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_12.png
new file mode 100644
index 0000000000000000000000000000000000000000..d13d60f2af8c8d73b1019c3a6a0acf166e5395da
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_12.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_13.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_13.png
new file mode 100644
index 0000000000000000000000000000000000000000..2550b1f5e65910f731a72a7ff98ba351fb119545
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_13.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_14.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_14.png
new file mode 100644
index 0000000000000000000000000000000000000000..2062cb0a1bbbe69126ac1851052064aa2fa3bd3a
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_14.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_15.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_15.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1852a4d2101956d2b8969b026ab62aedff32b80
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_15.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_16.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_16.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1143646120a8a61e1b331ce54b142770176b8a4
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_16.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_2.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..e21569dc30d8a3c6dcacfabc205485b4066e3fa9
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_2.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_3.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d8359d4106a05e8e62f13a930d854565a84aa07
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_3.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_4.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..ccf33c2416789c75b6f4b2ca043dc31d01ecd545
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_4.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_5.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..7c993a12dff3bafdedac31d5545ddec03c932a41
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_5.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_6.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..d54f13c6185100d470a4b8345c759ba0eb24389c
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_6.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_7.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_7.png
new file mode 100644
index 0000000000000000000000000000000000000000..451fe509517312a070cbfba043da95d6d6bef113
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_7.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_8.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_8.png
new file mode 100644
index 0000000000000000000000000000000000000000..db04f3ad9fc1a63d5ce47ba87777930a5743df0d
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_8.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_9.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_9.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a530109f99bbd4cdda45b936c63b5baaddbf4e1
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/classify_product_9.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/flash_sale_product_1.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/flash_sale_product_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..5edf68332180fa8b8b7592877cbfe9d16ad1515f
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/flash_sale_product_1.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/flash_sale_product_2.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/flash_sale_product_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff6c061e300075f074426836a9955cd7926597a1
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/flash_sale_product_2.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/flash_sale_product_3.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/flash_sale_product_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c8a06488fb4eb73d3397ddc5436ea9e052c63b5
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/flash_sale_product_3.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/flash_sale_product_4.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/flash_sale_product_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..03ee3e91f3333561ac57e8bc5440f509a519f826
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/flash_sale_product_4.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_arrow_down.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_arrow_down.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f4c8cd335da5e7f0e8e9ee6d2a8f6e081b7149f1
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_arrow_down.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 12" version="1.1">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>画板</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M18.6239478,4.2482689 L13.6439396,9.23007755 C12.97476,9.8992572 11.8984674,9.91319844 11.2123247,9.27190128 L6.21931844,4.28033009 C6.09044543,4.15145707 6.01827654,3.98735263 6.00281177,3.81902041 L6,3.7269699 C6.00562355,3.54277571 6.0787297,3.36025866 6.21931844,3.21966991 C6.50175119,2.93723717 6.95339796,2.92715028 7.24791742,3.18940926 L11.8761727,7.81586399 C12.1586054,8.09829674 12.6102522,8.10838362 12.9047717,7.84612464 L17.5330269,3.21966991 C17.8259202,2.9267767 18.3007939,2.9267767 18.5936871,3.21966991 C18.7349035,3.36088629 18.8080334,3.54440617 18.8130768,3.72943689 L18.8129192,3.77570243 C18.8071403,3.94528507 18.7441498,4.11328081 18.6239478,4.2482689 Z" id="_path-1"/>
+    </defs>
+    <g id="_画板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_路径" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_arrow_up.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_arrow_up.svg
new file mode 100644
index 0000000000000000000000000000000000000000..49479cfd03ead96668b93a3e1e3dcfefd3fca09f
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_arrow_up.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 12" version="1.1">
+    <title>Public/ic_public_arrow_up_0</title>
+    <defs>
+        <path d="M9.75191291,-0.58872969 L9.7839741,-0.558469039 L14.7337216,4.39127843 C15.4029012,5.06045808 15.4168425,6.13675067 14.7755453,6.82289336 L14.7337216,6.86615216 L9.7839741,11.8158996 C9.65510109,11.9447726 9.49099664,12.0169415 9.32266443,12.0324063 L9.27667411,12.0352181 L9.23061392,12.0352181 C9.04641973,12.0295945 8.86390268,11.9564884 8.72331393,11.8158996 C8.44088118,11.5334669 8.4307943,11.0818201 8.69305328,10.7873007 L8.72331393,10.7552395 L13.319508,6.15904538 C13.6019408,5.87661264 13.6120276,5.42496586 13.3497687,5.1304464 L13.319508,5.09838521 L8.72331393,0.502191133 C8.43042071,0.209297914 8.43042071,-0.26557582 8.72331393,-0.558469039 C8.8645303,-0.699685412 9.04805018,-0.77281532 9.2330809,-0.777858762 L9.27934645,-0.777701154 C9.44892909,-0.77192221 9.61692482,-0.708931722 9.75191291,-0.58872969 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_arrow_up_0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_路径" fill="#000000" fill-rule="nonzero" transform="translate(11.874964, 5.628680) rotate(-90.000000) translate(-11.874964, -5.628680) " xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_back.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_back.svg
new file mode 100644
index 0000000000000000000000000000000000000000..454d0aa4b65c47c8281eb78cbc6b9e4b3c9ee454
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_back.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_back</title>
+    <defs>
+        <path d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_back" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_comments.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_comments.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0211e560e1825ca9b607e21470d5ca8e309acd0e
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_comments.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_comments</title>
+    <defs>
+        <path d="M15.5,3 C19.6421356,3 23,6.35786438 23,10.5 C23,14.6007143 19.7089571,17.9327643 15.6240262,17.9989952 L15.5,18 L13.8105,18 L10.0303301,21.7803301 C9.7491526,22.0615076 9.30026186,22.0727547 9.00566731,21.8140714 L8.96966991,21.7803301 C8.68849242,21.4991526 8.67724532,21.0502619 8.93592862,20.7556673 L8.96966991,20.7196699 L12.9696699,16.7196699 C13.0986012,16.5907387 13.2696414,16.5135976 13.4504659,16.5016361 L13.5,16.5 L15.5,16.5 C18.8137085,16.5 21.5,13.8137085 21.5,10.5 C21.5,7.21942859 18.8671657,4.55378857 15.599221,4.50080383 L8.5,4.5 C5.1862915,4.5 2.5,7.1862915 2.5,10.5 C2.5,13.7805714 5.1328343,16.4462114 8.40077903,16.4991962 L8.5,16.5 L9.25,16.5 C9.66421356,16.5 10,16.8357864 10,17.25 C10,17.6494202 9.68777001,17.9759152 9.2940682,17.9987268 L9.25,18 L8.5,18 C4.35786438,18 1,14.6421356 1,10.5 C1,6.39928573 4.29104288,3.06723571 8.37597379,3.00100479 L8.5,3 L15.5,3 Z M7,9.25 C7.69035594,9.25 8.25,9.80964406 8.25,10.5 C8.25,11.1903559 7.69035594,11.75 7,11.75 C6.30964406,11.75 5.75,11.1903559 5.75,10.5 C5.75,9.80964406 6.30964406,9.25 7,9.25 Z M12,9.25 C12.6903559,9.25 13.25,9.80964406 13.25,10.5 C13.25,11.1903559 12.6903559,11.75 12,11.75 C11.3096441,11.75 10.75,11.1903559 10.75,10.5 C10.75,9.80964406 11.3096441,9.25 12,9.25 Z M17,9.25 C17.6903559,9.25 18.25,9.80964406 18.25,10.5 C18.25,11.1903559 17.6903559,11.75 17,11.75 C16.3096441,11.75 15.75,11.1903559 15.75,10.5 C15.75,9.80964406 16.3096441,9.25 17,9.25 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_comments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_more_list.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_more_list.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0a26842c9e251d43ca0e404c240f612b5268f799
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_more_list.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_more_list</title>
+    <defs>
+        <path d="M6.5,10.25 C7.46649831,10.25 8.25,11.0335017 8.25,12 C8.25,12.9664983 7.46649831,13.75 6.5,13.75 C5.53350169,13.75 4.75,12.9664983 4.75,12 C4.75,11.0335017 5.53350169,10.25 6.5,10.25 Z M17.5,10.25 C18.4664983,10.25 19.25,11.0335017 19.25,12 C19.25,12.9664983 18.4664983,13.75 17.5,13.75 C16.5335017,13.75 15.75,12.9664983 15.75,12 C15.75,11.0335017 16.5335017,10.25 17.5,10.25 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_more_list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#000000" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_scan.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_scan.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2fcee34964f6c70c95fdff0e67d8359cbcd8b8e0
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_scan.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_scan</title>
+    <defs>
+        <path d="M21.25,14 C21.6296958,14 21.943491,14.2821539 21.9931534,14.6482294 L22,14.75 L22,18 C22,20.1421954 20.3160315,21.8910789 18.1996403,21.9951047 L18,22 L14.75,22 C14.3357864,22 14,21.6642136 14,21.25 C14,20.8703042 14.2821539,20.556509 14.6482294,20.5068466 L14.75,20.5 L18,20.5 C19.3254834,20.5 20.4100387,19.4684641 20.4946823,18.1643757 L20.5,18 L20.5,14.75 C20.5,14.3357864 20.8357864,14 21.25,14 Z M2.75,14 C3.12969577,14 3.44349096,14.2821539 3.49315338,14.6482294 L3.5,14.75 L3.5,18 C3.5,19.3254834 4.53153594,20.4100387 5.83562431,20.4946823 L6,20.5 L9.25,20.5 C9.66421356,20.5 10,20.8357864 10,21.25 C10,21.6296958 9.71784612,21.943491 9.35177056,21.9931534 L9.25,22 L6,22 C3.85780461,22 2.10892112,20.3160315 2.00489531,18.1996403 L2,18 L2,14.75 C2,14.3357864 2.33578644,14 2.75,14 Z M18.25,11.25 C18.6642136,11.25 19,11.5857864 19,12 C19,12.4142136 18.6642136,12.75 18.25,12.75 L5.75,12.75 C5.33578644,12.75 5,12.4142136 5,12 C5,11.5857864 5.33578644,11.25 5.75,11.25 L18.25,11.25 Z M18,2 C20.1421954,2 21.8910789,3.68396847 21.9951047,5.80035966 L22,6 L22,9.25 C22,9.66421356 21.6642136,10 21.25,10 C20.8703042,10 20.556509,9.71784612 20.5068466,9.35177056 L20.5,9.25 L20.5,6 C20.5,4.6745166 19.4684641,3.58996133 18.1643757,3.50531768 L18,3.5 L14.75,3.5 C14.3357864,3.5 14,3.16421356 14,2.75 C14,2.37030423 14.2821539,2.05650904 14.6482294,2.00684662 L14.75,2 L18,2 Z M9.25,2 C9.66421356,2 10,2.33578644 10,2.75 C10,3.12969577 9.71784612,3.44349096 9.35177056,3.49315338 L9.25,3.5 L6,3.5 C4.6745166,3.5 3.58996133,4.53153594 3.50531768,5.83562431 L3.5,6 L3.5,9.25 C3.5,9.66421356 3.16421356,10 2.75,10 C2.37030423,10 2.05650904,9.71784612 2.00684662,9.35177056 L2,9.25 L2,6 C2,3.85780461 3.68396847,2.10892112 5.80035966,2.00489531 L6,2 L9.25,2 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_scan" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_search.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..423182ce01e353a362155bdb443b9686672631d9
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/ic_public_search.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_search</title>
+    <defs>
+        <path d="M17.4552585,16.5201811 L20.8132621,19.8776019 C21.1061553,20.1704951 21.1061553,20.6453689 20.8132621,20.9382621 C20.5203689,21.2311553 20.0454951,21.2311553 19.7526019,20.9382621 L16.3849514,17.5705115 C16.7690371,17.2493647 17.1270214,16.8980393 17.4552585,16.5201811 Z M10.375,2 C15.0003848,2 18.75,5.74961522 18.75,10.375 C18.75,12.4492584 17.9959213,14.3473923 16.746948,15.8102175 L16.746948,15.8102175 L16.7248309,15.8360159 C16.6580095,15.9136422 16.5897889,15.9900296 16.5202083,16.0651391 L16.746948,15.8102175 C16.6540763,15.9189909 16.5584681,16.0253575 16.4602302,16.1292106 C16.4016383,16.1911476 16.342303,16.2519995 16.2820606,16.3119405 C16.2610861,16.3328082 16.240292,16.3532825 16.2193918,16.3736485 C16.1491692,16.4420866 16.0772901,16.5097189 16.0042335,16.576078 C15.9759275,16.6017907 15.9472456,16.6274881 15.9183866,16.6529896 C15.8514229,16.712158 15.7837649,16.7700565 15.7151861,16.8268826 C15.7013815,16.8383205 15.6877981,16.8495035 15.674179,16.8606444 C14.2305262,18.0415704 12.3854944,18.75 10.375,18.75 C5.74961522,18.75 2,15.0003848 2,10.375 C2,5.74961522 5.74961522,2 10.375,2 Z M10.375,3.5 C6.57804235,3.5 3.5,6.57804235 3.5,10.375 C3.5,14.1719577 6.57804235,17.25 10.375,17.25 C14.1719577,17.25 17.25,14.1719577 17.25,10.375 C17.25,6.57804235 14.1719577,3.5 10.375,3.5 Z" id="__path-1"/>
+    </defs>
+    <g id="__Public/ic_public_search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="__mask-2" fill="white">
+            <use xlink:href="#__path-1"/>
+        </mask>
+        <use id="__形状结合" fill="#000000" fill-rule="nonzero" xlink:href="#__path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/icon_close.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/icon_close.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ac485ef36a8d7376bc340c6450a80400cf7d3ab3
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/icon_close.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <path d="M19.7781746,4.22182541 C20.0710678,4.51471863 20.0710678,4.98959236 19.7781746,5.28248558 L5.28248558,19.7781746 C4.98959236,20.0710678 4.51471863,20.0710678 4.22182541,19.7781746 C3.92893219,19.4852814 3.92893219,19.0104076 4.22182541,18.7175144 L10.9395166,11.9994697 L4.22182541,5.28248558 C3.92893219,4.98959236 3.92893219,4.51471863 4.22182541,4.22182541 C4.51471863,3.92893219 4.98959236,3.92893219 5.28248558,4.22182541 L12,10.9389863 L18.7175144,4.22182541 C19.0104076,3.92893219 19.4852814,3.92893219 19.7781746,4.22182541 Z M19.7781746,18.7175144 C20.0710678,19.0104076 20.0710678,19.4852814 19.7781746,19.7781746 C19.4852814,20.0710678 19.0104076,20.0710678 18.7175144,19.7781746 L12.7072836,13.7675902 L13.767767,12.7071068 L19.7781746,18.7175144 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="形状"></g>
+            <g mask="url(#mask-2)" fill="#000000" fill-opacity="0.9" id="color/#000000">
+                <g>
+                    <rect x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/icon_is_living.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/icon_is_living.svg
new file mode 100644
index 0000000000000000000000000000000000000000..726db83d386b182104584ea6be76dd27f12f883c
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/icon_is_living.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_video</title>
+    <defs>
+        <linearGradient x1="100%" y1="114.16801%" x2="13.0299969%" y2="-17.3725667%" id="linearGradient-1">
+            <stop stop-color="#FF6354" offset="0%"></stop>
+            <stop stop-color="#EA1559" offset="100%"></stop>
+        </linearGradient>
+        <path d="M11.03012,11.9117647 C11.468699,11.9117647 11.8242376,12.2673033 11.8242376,12.7058824 C11.8242376,13.1444614 11.468699,13.5 11.03012,13.5 L4.39411765,13.5 C3.95553858,13.5 3.6,13.1444614 3.6,12.7058824 C3.6,12.2673033 3.95553858,11.9117647 4.39411765,11.9117647 L11.03012,11.9117647 Z M8.97731092,8.20588235 C9.41588999,8.20588235 9.77142857,8.56142093 9.77142857,9 C9.77142857,9.43857907 9.41588999,9.79411765 8.97731092,9.79411765 L4.39411765,9.79411765 C3.95553858,9.79411765 3.6,9.43857907 3.6,9 C3.6,8.56142093 3.95553858,8.20588235 4.39411765,8.20588235 L8.97731092,8.20588235 Z M13.6058824,4.5 C14.0444614,4.5 14.4,4.85553858 14.4,5.29411765 C14.4,5.73269671 14.0444614,6.08823529 13.6058824,6.08823529 L4.39411765,6.08823529 C3.95553858,6.08823529 3.6,5.73269671 3.6,5.29411765 C3.6,4.85553858 3.95553858,4.5 4.39411765,4.5 L13.6058824,4.5 Z" id="path-2"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="典型页面1：购物首页（手机）" transform="translate(-140.000000, -310.000000)">
+            <g id="编组-9" transform="translate(16.000000, 156.000000)">
+                <g id="icon_video" transform="translate(124.000000, 154.000000)">
+                    <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+                    <g id="Public/ic_public_notes" transform="translate(12.000000, 12.000000) scale(-1, 1) rotate(-90.000000) translate(-12.000000, -12.000000) translate(3.000000, 3.000000)">
+                        <path d="M5.1277704,0 L12.8722296,0 C14.6173301,0 15.2738114,0.145501538 15.91208,0.419101342 L15.9536914,0.437126243 C16.5745027,0.70877366 17.0680807,1.10135834 17.4148264,1.59884476 L17.4657346,1.67425249 C17.8143488,2.20758582 18,2.73659966 18,4.19544851 L18,13.8045515 L17.9989932,13.9858083 C17.9842401,15.279039 17.8076257,15.7921872 17.487765,16.2917018 L17.4657346,16.3257475 C17.1337211,16.833684 16.6538954,17.2375206 16.0458564,17.5212216 L15.9536914,17.5628738 C15.3018396,17.8481035 14.6552671,18 12.8722296,18 L5.1277704,18 L4.90623426,17.9991763 C3.32561899,17.9871055 2.69843783,17.8426028 2.08791999,17.5808987 L2.04630859,17.5628738 C1.42549731,17.2912263 0.931919309,16.8986417 0.585173576,16.4011552 L0.534265408,16.3257475 C0.185651222,15.7924142 0,15.2634003 0,13.8045515 L0,4.19544851 C0,2.767639 0.177835213,2.23051798 0.512234974,1.70829817 L0.534265408,1.67425249 C0.866278917,1.16631598 1.34610464,0.762479435 1.9541436,0.47877838 L2.04630859,0.437126243 C2.69816044,0.151896455 3.34473292,0 5.1277704,0 Z" id="路径" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+                        <mask id="mask-3" fill="white">
+                            <use xlink:href="#path-2"></use>
+                        </mask>
+                        <use id="形状结合" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-2"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/recommended_product_1.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/recommended_product_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e32e722c59345dfa1c2f3bb8d241200fabf8e21
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/recommended_product_1.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/recommended_product_2.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/recommended_product_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..93561198f1c5c82728b143147ae64e6ab77e68c0
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/recommended_product_2.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/recommended_product_3.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/recommended_product_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..deeecb47f47d83e08b3fe7fe3b1f4e3c13216634
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/recommended_product_3.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/recommended_product_4.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/recommended_product_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..a808afb23e001f793561167f88f34a76e47e908e
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/recommended_product_4.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_1.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed9c39e53c9c69cd0bd8629bca202ef55e16529f
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_1.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_2.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4018f03d76333f331d5be3d71916b13afd5f91b
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_2.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_3.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..35a7d962b333b1aee8f6ea9395578e42ad236c04
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_3.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_4.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..11ee216a64b0acdc0523e35b9e2be17add16657e
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_4.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_5.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..10ee08cbe07f41ed5a2b75f43cfa016705da3d8b
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/section_product_5.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/shopping_card_1.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/shopping_card_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..042d89d5af60b6375b32499ddb2a88479173d59e
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/shopping_card_1.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/shopping_card_2.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/shopping_card_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c5d9e25aad390869a8cef6f0b14710173982b8a
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/shopping_card_2.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/shopping_card_3.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/shopping_card_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb870636013c3b271d891daa66bcd1c5489a1547
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/shopping_card_3.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/shopping_card_logo.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/shopping_card_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..50d38e46af32dae2e8825ffbcbc3e737bd3df158
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/shopping_card_logo.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_classification.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_classification.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9f55f817678348f533d7002ba94019d7563b9a80
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_classification.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>BottomNavigationBar/item/icon_actived分类-2</title>
+    <defs>
+        <path d="M6.01980637,12.7504596 L7.36710401,12.75 C8.55605717,12.75 9.10734318,12.8974289 9.62499024,13.1742696 C10.1426373,13.4511103 10.5488897,13.8573627 10.8257304,14.3750098 L10.8776917,14.4757818 C11.1209805,14.9664447 11.25,15.5206495 11.25,16.632896 L11.25,17.867104 C11.25,19.0560572 11.1025711,19.6073432 10.8257304,20.1249902 C10.5488897,20.6426373 10.1426373,21.0488897 9.62499024,21.3257304 L9.52421823,21.3776917 C9.03355532,21.6209805 8.47935051,21.75 7.36710401,21.75 L6.13289599,21.75 C4.94394283,21.75 4.39265682,21.6025711 3.87500976,21.3257304 C3.35736271,21.0488897 2.95111026,20.6426373 2.67426959,20.1249902 L2.62230832,20.0242182 C2.38740875,19.5504747 2.25903377,19.017496 2.25045963,17.9801936 L2.25,16.632896 C2.25,15.4439428 2.39742891,14.8926568 2.67426959,14.3750098 C2.95111026,13.8573627 3.35736271,13.4511103 3.87500976,13.1742696 L3.97578177,13.1223083 C4.44952527,12.8874087 4.98250402,12.7590338 6.01980637,12.7504596 Z M16.5198064,12.7504596 L17.867104,12.75 C19.0560572,12.75 19.6073432,12.8974289 20.1249902,13.1742696 C20.6426373,13.4511103 21.0488897,13.8573627 21.3257304,14.3750098 L21.3776917,14.4757818 C21.6209805,14.9664447 21.75,15.5206495 21.75,16.632896 L21.75,17.867104 C21.75,19.0560572 21.6025711,19.6073432 21.3257304,20.1249902 C21.0488897,20.6426373 20.6426373,21.0488897 20.1249902,21.3257304 L20.0242182,21.3776917 C19.5335553,21.6209805 18.9793505,21.75 17.867104,21.75 L16.632896,21.75 C15.4439428,21.75 14.8926568,21.6025711 14.3750098,21.3257304 C13.8573627,21.0488897 13.4511103,20.6426373 13.1742696,20.1249902 L13.1223083,20.0242182 C12.8874087,19.5504747 12.7590338,19.017496 12.7504596,17.9801936 L12.75,16.632896 C12.75,15.4439428 12.8974289,14.8926568 13.1742696,14.3750098 C13.4511103,13.8573627 13.8573627,13.4511103 14.3750098,13.1742696 L14.4757818,13.1223083 C14.9495253,12.8874087 15.482504,12.7590338 16.5198064,12.7504596 Z M7.36761573,14.2499999 L6.03220465,14.2504084 L5.86406875,14.2529244 C5.24687011,14.2666673 4.93692836,14.3276696 4.69448301,14.4404982 L4.66322277,14.4555093 L4.58240805,14.4969894 C4.3261637,14.6340304 4.13403036,14.8261637 3.99698939,15.0824081 C3.83932927,15.3772068 3.76616296,15.6858557 3.75242281,16.3718463 L3.74999991,16.6323843 L3.75040839,17.9677953 L3.75292443,18.1359312 C3.76666726,18.7531299 3.82766959,19.0630716 3.94049824,19.305517 L3.95550931,19.3367772 L3.99698939,19.4175919 C4.13403036,19.6738363 4.3261637,19.8659696 4.58240805,20.0030106 C4.87720684,20.1606707 5.1858557,20.233837 5.87221194,20.2475771 L6.13289599,20.2499999 L7.36710401,20.2499999 L7.53743597,20.2489724 C8.21866339,20.2404021 8.55102876,20.1781418 8.80647543,20.0590542 L8.83677723,20.0444907 L8.91759195,20.0030106 C9.1738363,19.8659696 9.36596964,19.6738363 9.50301061,19.4175919 C9.66067073,19.1227932 9.73383704,18.8141443 9.74757712,18.1277881 L9.74999991,17.867104 L9.74999991,16.632896 L9.74897237,16.462564 C9.74040205,15.7813366 9.67814179,15.4489712 9.55905417,15.1935246 L9.54449069,15.1632228 L9.50301061,15.0824081 C9.36596964,14.8261637 9.1738363,14.6340304 8.91759195,14.4969894 C8.62279316,14.3393293 8.3141443,14.266163 7.62778806,14.2524229 L7.36761573,14.2499999 Z M17.8676157,14.2499999 L16.5322047,14.2504084 L16.3640688,14.2529244 C15.7468701,14.2666673 15.4369284,14.3276696 15.194483,14.4404982 L15.1632228,14.4555093 L15.0824081,14.4969894 C14.8261637,14.6340304 14.6340304,14.8261637 14.4969894,15.0824081 C14.3393293,15.3772068 14.266163,15.6858557 14.2524228,16.3718463 L14.2499999,16.6323843 L14.2504084,17.9677953 L14.2529244,18.1359312 C14.2666673,18.7531299 14.3276696,19.0630716 14.4404982,19.305517 L14.4555093,19.3367772 L14.4969894,19.4175919 C14.6340304,19.6738363 14.8261637,19.8659696 15.0824081,20.0030106 C15.3772068,20.1606707 15.6858557,20.233837 16.3722119,20.2475771 L16.632896,20.2499999 L17.867104,20.2499999 L18.037436,20.2489724 C18.7186634,20.2404021 19.0510288,20.1781418 19.3064754,20.0590542 L19.3367772,20.0444907 L19.4175919,20.0030106 C19.6738363,19.8659696 19.8659696,19.6738363 20.0030106,19.4175919 C20.1606707,19.1227932 20.233837,18.8141443 20.2475771,18.1277881 L20.2499999,17.867104 L20.2499999,16.632896 L20.2489724,16.462564 C20.2404021,15.7813366 20.1781418,15.4489712 20.0590542,15.1935246 L20.0444907,15.1632228 L20.0030106,15.0824081 C19.8659696,14.8261637 19.6738363,14.6340304 19.4175919,14.4969894 C19.1227932,14.3393293 18.8141443,14.266163 18.1277881,14.2524229 L17.8676157,14.2499999 Z M6.01980637,2.25045963 L7.36710401,2.25 C8.55605717,2.25 9.10734318,2.39742891 9.62499024,2.67426959 C10.1426373,2.95111026 10.5488897,3.35736271 10.8257304,3.87500976 L10.8776917,3.97578177 C11.1209805,4.46644468 11.25,5.02064949 11.25,6.13289599 L11.25,7.36710401 C11.25,8.55605717 11.1025711,9.10734318 10.8257304,9.62499024 C10.5488897,10.1426373 10.1426373,10.5488897 9.62499024,10.8257304 L9.52421823,10.8776917 C9.03355532,11.1209805 8.47935051,11.25 7.36710401,11.25 L6.13289599,11.25 C4.94394283,11.25 4.39265682,11.1025711 3.87500976,10.8257304 C3.35736271,10.5488897 2.95111026,10.1426373 2.67426959,9.62499024 L2.62230832,9.52421823 C2.38740875,9.05047473 2.25903377,8.51749598 2.25045963,7.48019363 L2.25,6.13289599 C2.25,4.94394283 2.39742891,4.39265682 2.67426959,3.87500976 C2.95111026,3.35736271 3.35736271,2.95111026 3.87500976,2.67426959 L3.97578177,2.62230832 C4.44952527,2.38740875 4.98250402,2.25903377 6.01980637,2.25045963 Z M16.5198064,2.25045963 L17.867104,2.25 C19.0560572,2.25 19.6073432,2.39742891 20.1249902,2.67426959 C20.6426373,2.95111026 21.0488897,3.35736271 21.3257304,3.87500976 L21.3776917,3.97578177 C21.6209805,4.46644468 21.75,5.02064949 21.75,6.13289599 L21.75,7.36710401 C21.75,8.55605717 21.6025711,9.10734318 21.3257304,9.62499024 C21.0488897,10.1426373 20.6426373,10.5488897 20.1249902,10.8257304 L20.0242182,10.8776917 C19.5335553,11.1209805 18.9793505,11.25 17.867104,11.25 L16.632896,11.25 C15.4439428,11.25 14.8926568,11.1025711 14.3750098,10.8257304 C13.8573627,10.5488897 13.4511103,10.1426373 13.1742696,9.62499024 L13.1223083,9.52421823 C12.8874087,9.05047473 12.7590338,8.51749598 12.7504596,7.48019363 L12.75,6.13289599 C12.75,4.94394283 12.8974289,4.39265682 13.1742696,3.87500976 C13.4511103,3.35736271 13.8573627,2.95111026 14.3750098,2.67426959 L14.4757818,2.62230832 C14.9495253,2.38740875 15.482504,2.25903377 16.5198064,2.25045963 Z M7.36761573,3.74999991 L6.03220465,3.75040839 L5.86406875,3.75292443 C5.24687011,3.76666726 4.93692836,3.82766959 4.69448301,3.94049824 L4.66322277,3.95550931 L4.58240805,3.99698939 C4.3261637,4.13403036 4.13403036,4.3261637 3.99698939,4.58240805 C3.83932927,4.87720684 3.76616296,5.1858557 3.75242281,5.87184631 L3.74999991,6.13238427 L3.75040839,7.46779535 L3.75292443,7.63593125 C3.76666726,8.25312989 3.82766959,8.56307164 3.94049824,8.80551699 L3.95550931,8.83677723 L3.99698939,8.91759195 C4.13403036,9.1738363 4.3261637,9.36596964 4.58240805,9.50301061 C4.87720684,9.66067073 5.1858557,9.73383704 5.87221194,9.74757712 L6.13289599,9.74999991 L7.36710401,9.74999991 L7.53743597,9.74897237 C8.21866339,9.74040205 8.55102876,9.67814179 8.80647543,9.55905417 L8.83677723,9.54449069 L8.91759195,9.50301061 C9.1738363,9.36596964 9.36596964,9.1738363 9.50301061,8.91759195 C9.66067073,8.62279316 9.73383704,8.3141443 9.74757712,7.62778806 L9.74999991,7.36710401 L9.74999991,6.13289599 L9.74897237,5.96256403 C9.74040205,5.28133661 9.67814179,4.94897124 9.55905417,4.69352457 L9.54449069,4.66322277 L9.50301061,4.58240805 C9.36596964,4.3261637 9.1738363,4.13403036 8.91759195,3.99698939 C8.62279316,3.83932927 8.3141443,3.76616296 7.62778806,3.75242288 L7.36761573,3.74999991 Z M17.8676157,3.74999991 L16.5322047,3.75040839 L16.3640688,3.75292443 C15.7468701,3.76666726 15.4369284,3.82766959 15.194483,3.94049824 L15.1632228,3.95550931 L15.0824081,3.99698939 C14.8261637,4.13403036 14.6340304,4.3261637 14.4969894,4.58240805 C14.3393293,4.87720684 14.266163,5.1858557 14.2524228,5.87184631 L14.2499999,6.13238427 L14.2504084,7.46779535 L14.2529244,7.63593125 C14.2666673,8.25312989 14.3276696,8.56307164 14.4404982,8.80551699 L14.4555093,8.83677723 L14.4969894,8.91759195 C14.6340304,9.1738363 14.8261637,9.36596964 15.0824081,9.50301061 C15.3772068,9.66067073 15.6858557,9.73383704 16.3722119,9.74757712 L16.632896,9.74999991 L17.867104,9.74999991 L18.037436,9.74897237 C18.7186634,9.74040205 19.0510288,9.67814179 19.3064754,9.55905417 L19.3367772,9.54449069 L19.4175919,9.50301061 C19.6738363,9.36596964 19.8659696,9.1738363 20.0030106,8.91759195 C20.1606707,8.62279316 20.233837,8.3141443 20.2475771,7.62778806 L20.2499999,7.36710401 L20.2499999,6.13289599 L20.2489724,5.96256403 C20.2404021,5.28133661 20.1781418,4.94897124 20.0590542,4.69352457 L20.0444907,4.66322277 L20.0030106,4.58240805 C19.8659696,4.3261637 19.6738363,4.13403036 19.4175919,3.99698939 C19.1227932,3.83932927 18.8141443,3.76616296 18.1277881,3.75242288 L17.8676157,3.74999991 Z" id="path-1"></path>
+    </defs>
+    <g id="BottomNavigationBar/item/icon_actived分类-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="形状结合" fill-opacity="0.6" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_classification_selected.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_classification_selected.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3ca24b33dad63ae555f9ad7e9c4a05f0c4167565
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_classification_selected.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="24px" viewBox="0 0 25 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 5</title>
+    <defs>
+        <path d="M5.11710401,10.5 C6.30605717,10.5 6.85734318,10.6474289 7.37499024,10.9242696 C7.89263729,11.2011103 8.29888974,11.6073627 8.57573041,12.1250098 L8.62769168,12.2257818 C8.87098053,12.7164447 9,13.2706495 9,14.382896 L9,15.617104 C9,16.8060572 8.85257109,17.3573432 8.57573041,17.8749902 C8.29888974,18.3926373 7.89263729,18.7988897 7.37499024,19.0757304 L7.27421823,19.1276917 C6.78355532,19.3709805 6.22935051,19.5 5.11710401,19.5 L3.88289599,19.5 C2.69394283,19.5 2.14265682,19.3525711 1.62500976,19.0757304 C1.10736271,18.7988897 0.701110265,18.3926373 0.424269588,17.8749902 L0.372308324,17.7742182 C0.137408745,17.3004747 0.009033768,16.767496 0.000459631152,15.7301936 L0,14.382896 C0,13.1939428 0.147428912,12.6426568 0.424269588,12.1250098 C0.701110265,11.6073627 1.10736271,11.2011103 1.62500976,10.9242696 L1.72578177,10.8723083 C2.19952527,10.6374087 2.73250402,10.5090338 3.76980637,10.5004596 L5.11710401,10.5 Z M15.617104,10.5 C16.8060572,10.5 17.3573432,10.6474289 17.8749902,10.9242696 C18.3926373,11.2011103 18.7988897,11.6073627 19.0757304,12.1250098 L19.1276917,12.2257818 C19.3709805,12.7164447 19.5,13.2706495 19.5,14.382896 L19.5,15.617104 C19.5,16.8060572 19.3525711,17.3573432 19.0757304,17.8749902 C18.7988897,18.3926373 18.3926373,18.7988897 17.8749902,19.0757304 L17.7742182,19.1276917 C17.2835553,19.3709805 16.7293505,19.5 15.617104,19.5 L14.382896,19.5 C13.1939428,19.5 12.6426568,19.3525711 12.1250098,19.0757304 C11.6073627,18.7988897 11.2011103,18.3926373 10.9242696,17.8749902 L10.8723083,17.7742182 C10.6374087,17.3004747 10.5090338,16.767496 10.5004596,15.7301936 L10.5,14.382896 C10.5,13.1939428 10.6474289,12.6426568 10.9242696,12.1250098 C11.2011103,11.6073627 11.6073627,11.2011103 12.1250098,10.9242696 L12.2257818,10.8723083 C12.6995253,10.6374087 13.232504,10.5090338 14.2698064,10.5004596 L15.617104,10.5 Z M5.11710401,0 C6.30605717,0 6.85734318,0.147428912 7.37499024,0.424269588 C7.89263729,0.701110265 8.29888974,1.10736271 8.57573041,1.62500976 L8.62769168,1.72578177 C8.87098053,2.21644468 9,2.77064949 9,3.88289599 L9,5.11710401 C9,6.30605717 8.85257109,6.85734318 8.57573041,7.37499024 C8.29888974,7.89263729 7.89263729,8.29888974 7.37499024,8.57573041 L7.27421823,8.62769168 C6.78355532,8.87098053 6.22935051,9 5.11710401,9 L3.88289599,9 C2.69394283,9 2.14265682,8.85257109 1.62500976,8.57573041 C1.10736271,8.29888974 0.701110265,7.89263729 0.424269588,7.37499024 L0.372308324,7.27421823 C0.137408745,6.80047473 0.009033768,6.26749598 0.000459631152,5.23019363 L0,3.88289599 C0,2.69394283 0.147428912,2.14265682 0.424269588,1.62500976 C0.701110265,1.10736271 1.10736271,0.701110265 1.62500976,0.424269588 L1.72578177,0.372308324 C2.19952527,0.137408745 2.73250402,0.009033768 3.76980637,0.000459631152 L5.11710401,0 Z M15.617104,0 C16.8060572,0 17.3573432,0.147428912 17.8749902,0.424269588 C18.3926373,0.701110265 18.7988897,1.10736271 19.0757304,1.62500976 L19.1276917,1.72578177 C19.3709805,2.21644468 19.5,2.77064949 19.5,3.88289599 L19.5,5.11710401 C19.5,6.30605717 19.3525711,6.85734318 19.0757304,7.37499024 C18.7988897,7.89263729 18.3926373,8.29888974 17.8749902,8.57573041 L17.7742182,8.62769168 C17.2835553,8.87098053 16.7293505,9 15.617104,9 L14.382896,9 C13.1939428,9 12.6426568,8.85257109 12.1250098,8.57573041 C11.6073627,8.29888974 11.2011103,7.89263729 10.9242696,7.37499024 L10.8723083,7.27421823 C10.6374087,6.80047473 10.5090338,6.26749598 10.5004596,5.23019363 L10.5,3.88289599 C10.5,2.69394283 10.6474289,2.14265682 10.9242696,1.62500976 C11.2011103,1.10736271 11.6073627,0.701110265 12.1250098,0.424269588 L12.2257818,0.372308324 C12.6995253,0.137408745 13.232504,0.009033768 14.2698064,0.000459631152 L15.617104,0 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="典型页面2：商品分类（手机）" transform="translate(-96.000000, -699.000000)">
+            <g id="BottomNavigationBar/Port/Item_5备份-3" transform="translate(0.000000, 692.000000)">
+                <g id="Bottomtab/item/normal" transform="translate(75.272727, 7.000000)">
+                    <g id="编组-5" transform="translate(21.000000, 0.000000)">
+                        <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+                        <g id="tab/ic_备份-68" transform="translate(1.977273, 2.250000)">
+                            <mask id="mask-2" fill="white">
+                                <use xlink:href="#path-1"></use>
+                            </mask>
+                            <use id="形状结合" fill="#D20A2C" xlink:href="#path-1"></use>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_discovery.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_discovery.svg
new file mode 100644
index 0000000000000000000000000000000000000000..15ce5e9164a463af2d45364386475dd5ecc5ee8a
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_discovery.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>tab/ic_备份 68</title>
+    <defs>
+        <path d="M13.8356096,10.1642929 C13.0547968,9.38334999 13.0547968,8.11698318 13.8356096,7.33570715 C14.6167555,6.55476428 15.8832445,6.55476428 16.6643904,7.33570715 C17.4452032,8.11698318 17.4452032,9.38334999 16.6643904,10.1642929 C15.8832445,10.9452357 14.6167555,10.9452357 13.8356096,10.1642929 L13.8356096,10.1642929 Z M21.6038043,4.22109828 C21.6157462,4.34633914 21.6158443,4.47242741 21.6040974,4.59768671 C21.3433096,7.37850721 20.993476,9.3579685 20.5545965,10.5360706 C19.7224703,12.7697809 17.4904671,15.0144135 13.8370821,17.9606918 L13.8370821,18.4767732 C13.8370821,19.0480488 13.5927865,19.592057 13.1658098,19.9715918 L11.3598376,21.5769004 C10.9641021,21.9286653 10.3627633,21.9109942 9.98836698,21.5365979 L2.48300137,14.0312323 C2.1215153,13.6697462 2.09257679,13.096699 2.40762668,12.7014155 L2.44269883,12.6597617 L4.04800741,10.8537895 C4.41104076,10.445377 4.92455628,10.2041056 5.46847775,10.1838975 L6.05890748,10.1825172 L6.31764984,9.86382979 C9.15035875,6.39863955 11.2371889,4.28449949 13.4835287,3.46500276 C14.6055161,3.05568579 16.441465,2.72150222 18.9913754,2.46245206 L19.4229692,2.41995126 C20.5225632,2.31510329 21.4989563,3.12150428 21.6038043,4.22109828 Z M4.445225,17.32875 L6.921975,19.805 C7.019475,19.9025 7.022725,20.058 6.928725,20.15175 L6.172475,20.90825 C5.679975,21.4005 4.989975,21.647 4.280725,21.584 L3.011225,21.47125 C2.888975,21.46025 2.789725,21.361 2.778975,21.239 L2.666225,19.96975 C2.603225,19.2605 2.849725,18.5705 3.341975,18.07825 L4.098475,17.322 C4.192475,17.228 4.347725,17.23125 4.445225,17.32875 Z M19.6588328,3.9123523 L19.5699693,3.91273087 L19.1429828,3.95477078 L18.3571776,4.03973178 C16.3316055,4.27279363 14.8667582,4.55708106 13.997609,4.87415906 C12.3146295,5.48813392 10.5794046,7.05542826 7.75857026,10.4727809 L6.77319573,11.6825172 L5.52416816,11.6828634 C5.41530027,11.6869081 5.31139028,11.7264142 5.22778163,11.7942541 L5.16912139,11.8503353 L3.876,13.303 L10.716,20.142 L12.169264,18.8504779 C12.2546593,18.7745709 12.3108257,18.6723482 12.3298764,18.5613721 L12.3370821,18.4767732 L12.3370821,17.2433717 L12.8954534,16.7930722 C16.6532377,13.762601 18.4919907,11.7759721 19.148965,10.0124293 C19.5305961,8.98800139 19.8612419,7.11711055 20.1106504,4.45762993 C20.1135872,4.4263141 20.1135627,4.39479101 20.1105771,4.36347978 C20.0872768,4.11911766 19.8918138,3.93267208 19.6588328,3.9123523 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Bottom-tab/item/normal备份" transform="translate(-22.727273, -2.000000)">
+            <g id="tab/ic_备份-68" transform="translate(20.727273, 0.000000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="Fill-1"></g>
+                <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.6">
+                    <g id="Symbol/color-light/colorPrimary">
+                        <rect id="color/#000000" x="0" y="0" width="24" height="24"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_discovery_selected.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_discovery_selected.png
new file mode 100644
index 0000000000000000000000000000000000000000..86966ac46d940c2b0f25e905c8f1aac5aa617e33
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_discovery_selected.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_home.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_home.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ff026a99092323be572eb3f9e08aade115048a00
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_home.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>BottomNavigationBar/item/icon_actived首页-2</title>
+    <defs>
+        <path d="M5.75,22 C4.25532461,22 3.03915871,20.8075591 3.00092685,19.3221019 L3.00096837,12.1952851 C3.0082636,12.1900706 3.01545239,12.1846355 3.0225257,12.1789796 L3.05506762,12.1505962 L4.49994625,10.778 L4.5,19.25 C4.5,19.9221887 5.03057668,20.4704545 5.69577759,20.4988451 L5.75,20.5 L8.24996165,20.4998454 L8.25,16.25 C8.25,14.2457408 9.82236105,12.6087263 11.8008414,12.505198 L12,12.5 C14.0710678,12.5 15.75,14.1789322 15.75,16.25 L15.75,16.25 L15.7499616,20.4998454 L18.25,20.5 C18.9221887,20.5 19.4704545,19.9694233 19.4988451,19.3042224 L19.5,19.25 L19.4999462,10.778 L20.9056253,12.1124997 L20.9381672,12.1408831 C20.9578487,12.1566208 20.9784244,12.1706485 20.9996993,12.1829711 L21,19.25 C21,20.7446754 19.8075591,21.9608413 18.3221019,21.9990731 L18.25,22 L5.75,22 Z M12,14 C10.7573593,14 9.75,15.0073593 9.75,16.25 L9.75,16.25 L9.75,20.5 L14.25,20.5 L14.25,16.25 C14.25,15.059136 13.3248384,14.0843551 12.1540488,14.0051908 L12.1540488,14.0051908 Z M9.56457387,2.53618058 C11.015001,1.29562247 13.183648,1.33992812 14.5827737,2.66909752 L14.5827737,2.66909752 L22.5165253,10.2061616 L22.5855933,10.2812198 C22.8167929,10.5693593 22.805228,10.991194 22.5437128,11.2664732 C22.2584234,11.5667778 21.7837057,11.5789501 21.4834011,11.2936607 L21.4834011,11.2936607 L13.5496495,3.75659668 L13.4336561,3.65366641 C12.5636801,2.93315453 11.2809422,2.96746462 10.4502769,3.75659668 L10.4502769,3.75659668 L2.51652529,11.2936607 L2.43802609,11.3587913 C2.13841655,11.5749204 1.71772887,11.5417524 1.45621362,11.2664732 C1.17092425,10.9661686 1.1830965,10.4914509 1.48340109,10.2061616 L1.48340109,10.2061616 L9.41715271,2.66909752 Z" id="path-1"></path>
+    </defs>
+    <g id="BottomNavigationBar/item/icon_actived首页-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="形状结合" fill-opacity="0.6" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_home_selected.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_home_selected.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a14f5eeb73edceaaa586e00cc4c4615a4e041d92
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_home_selected.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="25px" viewBox="0 0 24 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 11</title>
+    <defs>
+        <path d="M11.3049515,3.1660135 L11.4029771,3.24242054 L11.4383705,3.27479678 L19.7500539,11.1988369 L19.7500539,17.8648386 C19.7500539,19.4625195 18.5011339,20.7684995 16.9263266,20.8597459 L16.7500539,20.8648386 L4.75005386,20.8648386 C3.15237298,20.8648386 1.84639298,19.6159187 1.75514656,18.0411114 L1.75005386,17.8648386 L1.75005386,11.1988369 L10.0618496,3.27479678 C10.4076544,2.94672556 10.9310356,2.91207618 11.3049515,3.1660135 Z M10.7500539,12.1148386 C9.15237298,12.1148386 7.84639298,13.3637586 7.75514656,14.9385658 L7.75005386,15.1148386 L7.75005386,18.8648386 L13.7500539,18.8648386 L13.7500539,15.1148386 C13.7500539,13.4579844 12.4069081,12.1148386 10.7500539,12.1148386 Z M8.14899189,0.961019894 C9.69547868,-0.364524787 12.0094898,-0.31881635 13.5030439,1.09814521 L13.5030439,1.09814521 L21.1882626,8.38925013 L21.2682366,8.47439656 C21.5892803,8.85860159 21.5784305,9.43093048 21.2254659,9.80297426 C20.8453501,10.2036368 20.2124043,10.2202933 19.8117417,9.84017753 L19.8117417,9.84017753 L12.126523,2.5490726 L12.0133993,2.4494676 C11.2406369,1.81863588 10.1084047,1.85183755 9.3734813,2.5490726 L9.3734813,2.5490726 L1.6882626,9.84017753 L1.59902778,9.91556251 C1.19846918,10.2159546 0.627503086,10.175018 0.27453847,9.80297426 C-0.10557727,9.40231172 -0.0889208004,8.76936587 0.311741737,8.38925013 L0.311741737,8.38925013 L7.99696044,1.09814521 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="典型页面1：购物首页（手机）" transform="translate(-24.000000, -698.000000)">
+            <g id="编组-3" transform="translate(0.000000, 692.000000)">
+                <g id="Bottom-tab/item/normal" transform="translate(0.000000, 6.385161)">
+                    <g id="编组-11" transform="translate(24.000000, 0.000000)">
+                        <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+                        <g id="tab/ic_备份-68" transform="translate(1.000000, 2.000000)">
+                            <mask id="mask-2" fill="white">
+                                <use xlink:href="#path-1"></use>
+                            </mask>
+                            <use id="形状结合" fill="#D20A2C" fill-rule="nonzero" xlink:href="#path-1"></use>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_mine.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_mine.svg
new file mode 100644
index 0000000000000000000000000000000000000000..497aa389aff3a80401c630a7197e1139a318e9fa
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_mine.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>@0.5xBottomNavigationBar/item/icon_actived-我的=2</title>
+    <defs>
+        <path d="M12,2.5 C14.8994949,2.5 17.25,4.85050506 17.25,7.75 C17.25,10.5770076 15.0155511,12.8821316 12.2164046,12.995621 L12,13 L12,13 C11.1663626,13 10.3625066,13.1275088 9.6068709,13.3640872 L9.38164526,13.4383144 C9.21949559,13.4944527 9.05971244,13.5556595 8.90248528,13.6217452 C8.86460349,13.63767 8.82725237,13.6537104 8.79004922,13.6700257 L8.90248528,13.6217452 C8.83766808,13.6489892 8.77328528,13.6770624 8.70935015,13.7059514 L8.79004922,13.6700257 C8.71658796,13.7022418 8.64370362,13.7355299 8.57141597,13.7698702 L8.70935015,13.7059514 C8.61973055,13.7464461 8.53099054,13.7885438 8.44316672,13.8322081 L8.57141597,13.7698702 C8.50322079,13.8022663 8.43555665,13.8355989 8.36844019,13.8698512 L8.44316672,13.8322081 C8.35529243,13.8758976 8.26833536,13.9211554 8.18233215,13.9679449 L8.36844019,13.8698512 C8.30344992,13.9030185 8.23897316,13.9370482 8.17502501,13.9719252 C8.04616188,14.0420275 7.91238282,14.1199501 7.78114037,14.2015672 C7.73111937,14.2326772 7.6817579,14.264134 7.63276851,14.2961132 C7.51804952,14.3709892 7.40496975,14.4490222 7.2940475,14.5298381 C7.26673453,14.5497339 7.23894083,14.5702559 7.21128552,14.5909527 L7.2940475,14.5298381 C7.22317628,14.5814737 7.15318581,14.6342453 7.08410288,14.6881263 L7.21128552,14.5909527 C7.14959293,14.6371225 7.08858907,14.6841623 7.02829213,14.7320537 L7.08410288,14.6881263 C7.02212225,14.7364678 6.96087214,14.7857023 6.90037189,14.8358105 L7.02829213,14.7320537 C6.95482068,14.7904091 6.88239881,14.850029 6.81105945,14.9108806 L6.90037189,14.8358105 C6.83668958,14.8885541 6.77383808,14.9422656 6.71183994,14.9969226 L6.81105945,14.9108806 C6.74918309,14.9636603 6.68812109,15.0173666 6.62789493,15.071978 L6.71183994,14.9969226 C6.64785034,15.0533352 6.58476982,15.1107549 6.52262314,15.1691569 L6.62789493,15.071978 C6.57565734,15.1193456 6.52404855,15.1673941 6.47308258,15.2161095 L6.52262314,15.1691569 C6.38762982,15.2960161 6.25704273,15.4275103 6.13111601,15.5633851 C6.03105568,15.6713349 5.93357387,15.7824881 5.83918557,15.8962995 C5.82097002,15.918261 5.80259484,15.9406601 5.78433938,15.9631603 L5.83918557,15.8962995 C5.79433965,15.9503738 5.75019207,16.005048 5.70675664,16.0603085 L5.78433938,15.9631603 C5.73916968,16.0188328 5.69473288,16.0751241 5.65104365,16.1320194 L5.70675664,16.0603085 C5.65523495,16.1258567 5.60471527,16.1922297 5.55522067,16.2594044 L5.65104365,16.1320194 C5.59201169,16.2088952 5.53434458,16.2868738 5.47807855,16.365919 L5.55522067,16.2594044 C5.50462342,16.3280756 5.45509743,16.3975846 5.40666737,16.4679069 L5.47807855,16.365919 C5.43261396,16.4297898 5.38806414,16.494357 5.34444822,16.5596015 L5.40666737,16.4679069 C5.3587313,16.5375118 5.31186891,16.6079134 5.2661041,16.6790877 L5.34444822,16.5596015 C5.29455522,16.6342358 5.24588426,16.7097563 5.19846396,16.7861345 L5.2661041,16.6790877 C5.22426915,16.7441503 5.18335137,16.8098586 5.14336904,16.8761945 L5.19846396,16.7861345 C5.047825,17.0287633 4.90980681,17.2800467 4.78532668,17.5390675 C4.76837244,17.5743533 4.75193349,17.6092119 4.73573998,17.6442073 L4.78532668,17.5390675 C4.74922387,17.6141909 4.71425983,17.6899652 4.68045695,17.766368 L4.73573998,17.6442073 C4.70484808,17.710967 4.6748494,17.7782246 4.64575926,17.8459646 L4.68045695,17.766368 C4.64247367,17.8522194 4.6059565,17.9388644 4.57093719,18.0262712 L4.64575926,17.8459646 C4.61266361,17.9230319 4.58074393,18.0007237 4.55002281,18.0790174 L4.57093719,18.0262712 C4.54234068,18.0976469 4.51474298,18.1695306 4.48816138,18.2419049 L4.55002281,18.0790174 C4.51431152,18.1700287 4.48021977,18.2618532 4.44778306,18.3544556 L4.48816138,18.2419049 C4.46998833,18.2913851 4.45229021,18.3410947 4.43507254,18.391028 L4.44778306,18.3544556 C4.3283501,18.6954204 4.23135483,19.0469304 4.15856787,19.4072151 C4.14762666,19.4613862 4.13730276,19.5153678 4.12752426,19.569539 L4.15856787,19.4072151 C4.14116807,19.4933415 4.12515167,19.5799694 4.11054284,19.6670745 L4.12752426,19.569539 C4.11191516,19.6560108 4.0976958,19.7429659 4.08489016,19.8303802 L4.11054284,19.6670745 C4.09454527,19.76246 4.08023562,19.8584178 4.06764565,19.9549161 L4.08489016,19.8303802 C4.07328426,19.9096048 4.06283957,19.9892066 4.05357395,20.0691678 L4.06764565,19.9549161 C4.0572943,20.034256 4.04810545,20.1139613 4.04009675,20.1940143 L4.05357395,20.0691678 C4.0419835,20.1691921 4.03223801,20.2697787 4.02437238,20.3708928 L4.04009675,20.1940143 C4.02239586,20.3709481 4.01046001,20.5495807 4.00447981,20.7297213 C4.00156148,20.8174828 4.00005629,20.9060552 4.00000155,20.9949669 L4.00447981,20.7297213 C4.00150112,20.8194479 4,20.9095487 4,21 C4,21.4142136 3.66421356,21.75 3.25,21.75 C2.83578644,21.75 2.5,21.4142136 2.5,21 C2.5,20.8017352 2.50607356,20.604889 2.51804478,20.4096372 C2.52118346,20.3585039 2.52467436,20.3081552 2.52855605,20.2579161 C2.53178145,20.2161521 2.53530682,20.1741335 2.53910476,20.1321936 C2.54330382,20.0858234 2.54783789,20.0395322 2.55270299,19.9933397 C2.5582937,19.9402537 2.56433112,19.8872204 2.57080335,19.8343214 C2.57522945,19.7981399 2.57988476,19.7618288 2.58474445,19.7255825 C2.62248988,19.4441375 2.67247922,19.1669444 2.73420205,18.8942028 L2.73986134,18.8693514 C2.76905594,18.741945 2.80081231,18.6155157 2.83507336,18.4901205 C2.85217045,18.427544 2.86990543,18.3651772 2.88825801,18.3030754 C2.8939179,18.2839215 2.89970667,18.264561 2.90555541,18.2452266 C2.92516226,18.1804172 2.94536937,18.1161259 2.96623752,18.0521332 C2.97851892,18.0144652 2.99118942,17.9764302 3.00409304,17.9385029 C3.01968619,17.8926692 3.03564408,17.8469249 3.05194039,17.8013416 C3.06645689,17.7607383 3.08119852,17.720379 3.09620501,17.6801488 C3.15856089,17.5129683 3.22558959,17.3477908 3.29705187,17.1850009 L3.30104812,17.1759105 C3.39334643,16.9662555 3.49300182,16.7605698 3.5996873,16.5591803 C3.62542103,16.5106015 3.65161487,16.4621803 3.67821472,16.4140147 C3.69237064,16.3883807 3.70672905,16.3626642 3.72120314,16.3370216 C3.7445197,16.2957145 3.76808538,16.2546868 3.79194704,16.2138532 C3.81803335,16.1692106 3.84457099,16.1246392 3.8714611,16.0803053 C3.88941242,16.0507094 3.90747215,16.0212978 3.92568697,15.9919926 C3.97263788,15.9164503 4.02076167,15.8414001 4.0699022,15.767081 C4.14677058,15.6508325 4.22600667,15.5365383 4.30764761,15.4241035 C4.32815439,15.3958621 4.3487845,15.3677763 4.36956474,15.3398086 C4.46075243,15.2170872 4.55468861,15.0968146 4.65140658,14.9789114 C4.67271322,14.9529364 4.6943064,14.9268956 4.7160354,14.9009726 C4.75430972,14.8553102 4.79303497,14.8099791 4.83217627,14.7650198 C4.85541135,14.738333 4.87856416,14.7120342 4.9018595,14.6858651 C4.95265611,14.6287987 5.00432824,14.5721372 5.05667053,14.5161098 C5.06272456,14.5096285 5.06927485,14.5026371 5.07583558,14.4956556 C5.26112772,14.2985021 5.45435526,14.1096143 5.65531798,13.9291697 C5.70423282,13.885246 5.75385685,13.8416064 5.80393565,13.7984802 C5.82257194,13.7824328 5.84093031,13.7667455 5.85934898,13.7511272 C5.90936731,13.7087125 5.95991526,13.6667373 6.01090142,13.6252802 C6.03652437,13.604447 6.06208408,13.5838832 6.08775197,13.5634494 C6.11476629,13.5419445 6.14176953,13.5206857 6.16889029,13.4995707 C6.22779387,13.4537087 6.28744558,13.4083817 6.34764346,13.3637496 C6.36259334,13.3526663 6.37727588,13.3418464 6.39199059,13.3310678 C6.44144225,13.2948426 6.49141105,13.2589762 6.54173894,13.2235859 C6.56804553,13.2050884 6.59421847,13.1868805 6.62048689,13.1688013 C6.6957753,13.1169795 6.77219612,13.0659903 6.84938676,13.01609 C6.88867366,12.990693 6.92812923,12.9655974 6.96778104,12.9407862 C7.00617864,12.9167609 7.04460062,12.8930991 7.08320254,12.8697045 C7.10413392,12.8570193 7.1250553,12.8444501 7.14602886,12.8319594 C7.20875689,12.7946003 7.27211687,12.7578501 7.33593515,12.7218165 C7.35022757,12.7137473 7.36419452,12.7059086 7.37818323,12.6981041 C7.44289146,12.662 7.50833071,12.6264905 7.57422811,12.5917331 C7.60196974,12.5771 7.62997821,12.5625046 7.65806809,12.5480452 C7.70399595,12.5244049 7.74994456,12.5012253 7.79610521,12.4784097 C7.82142247,12.4658969 7.84663843,12.4535733 7.87191674,12.4413584 C8.21328547,12.2764038 8.56602471,12.1312711 8.92864014,12.0074546 C7.60862078,11.0543327 6.75,9.50243717 6.75,7.75 C6.75,4.85050506 9.10050506,2.5 12,2.5 Z M16.1281996,12.4427018 C19.3070834,13.9775006 21.5,17.2326587 21.5,21 C21.5,21.4142136 21.1642136,21.75 20.75,21.75 C20.3357864,21.75 20,21.4142136 20,21 C20,17.493536 17.7440755,14.5139714 14.6044272,13.433507 C15.1612585,13.1775629 15.6739904,12.8425851 16.1281996,12.4427018 Z M12,4 C9.92893219,4 8.25,5.67893219 8.25,7.75 C8.25,9.82106781 9.92893219,11.5 12,11.5 C14.0710678,11.5 15.75,9.82106781 15.75,7.75 C15.75,5.67893219 14.0710678,4 12,4 Z" id="path-1"></path>
+    </defs>
+    <g id="BottomNavigationBar/item/icon_actived-我的=2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="形状结合" fill-opacity="0.6" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_mine_selected.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_mine_selected.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b68885d34202b0a15f9f74cd115a378577f81a86
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_mine_selected.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>mdpi/BottomNavigationBar/item/icon_actived-我的</title>
+    <defs>
+        <path d="M3.05718954,18.0277778 C3.70884479,16.7035785 5.40205649,12.75 12,12.75 C18.5979435,12.75 20.3199937,16.7035785 20.9428105,18.0277778 C21.1789117,18.5297635 21.3408126,19.2013755 21.4285132,20.0426138 C21.5430527,21.1412322 20.7452933,22.1246863 19.6466742,22.2392193 C19.5777807,22.2464016 19.5085606,22.25 19.4392938,22.25 L4.54657564,22.25 C3.4419985,22.2500138 2.54656181,21.3545771 2.54656181,20.25 C2.54656181,20.1821712 2.55001234,20.1143864 2.55690003,20.0469083 C2.64297264,19.2036609 2.80973581,18.5306174 3.05718954,18.0277778 Z M12,2.25 C9.37664744,2.25 7.25,4.37664744 7.25,7 C7.25,9.62335256 9.37664744,11.75 12,11.75 C14.6233526,11.75 16.75,9.62335256 16.75,7 C16.75,4.37664744 14.6233526,2.25 12,2.25 Z" id="path-1"></path>
+        <filter x="-18.5%" y="-12.5%" width="137.1%" height="135.0%" filterUnits="objectBoundingBox" id="filter-3">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.823529412   0 0 0 0 0.0392156863   0 0 0 0 0.17254902  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="BottomNavigationBar/item/icon_actived-我的" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="椭圆形">
+            <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
+            <use fill="#D20A2C" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_shopping_bag.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_shopping_bag.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3db480cb716220eca74972f4a009624fa54d4b0e
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_shopping_bag.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_appstore</title>
+    <defs>
+        <path d="M18,2 C20.209139,2 22,3.790861 22,6 L22,18 C22,20.209139 20.209139,22 18,22 L6,22 C3.790861,22 2,20.209139 2,18 L2,6 C2,3.790861 3.790861,2 6,2 L18,2 Z M18,3.5 L6,3.5 C4.6745166,3.5 3.58996133,4.53153594 3.50531768,5.83562431 L3.5,6 L3.5,18 C3.5,19.3254834 4.53153594,20.4100387 5.83562431,20.4946823 L6,20.5 L18,20.5 C19.3254834,20.5 20.4100387,19.4684641 20.4946823,18.1643757 L20.5,18 L20.5,6 C20.5,4.6745166 19.4684641,3.58996133 18.1643757,3.50531768 L18,3.5 Z M16.5,6 C16.9142136,6 17.25,6.33578644 17.25,6.75 C17.25,9.64949494 14.8994949,12 12,12 C9.10050506,12 6.75,9.64949494 6.75,6.75 C6.75,6.33578644 7.08578644,6 7.5,6 C7.91421356,6 8.25,6.33578644 8.25,6.75 C8.25,8.82106781 9.92893219,10.5 12,10.5 C14.0710678,10.5 15.75,8.82106781 15.75,6.75 C15.75,6.33578644 16.0857864,6 16.5,6 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_appstore" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="形状结合" fill-opacity="0.6" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_shopping_bag_selected.svg b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_shopping_bag_selected.svg
new file mode 100644
index 0000000000000000000000000000000000000000..009806198486821b074e5b6328f89dddd895fdd5
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/tab_shopping_bag_selected.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="24px" viewBox="0 0 25 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>tab/ic_备份 68</title>
+    <defs>
+        <path d="M18,2 C20.209139,2 22,3.790861 22,6 L22,18 C22,20.209139 20.209139,22 18,22 L6,22 C3.790861,22 2,20.209139 2,18 L2,6 C2,3.790861 3.790861,2 6,2 L18,2 Z M16.5,6 C16.0857864,6 15.75,6.33578644 15.75,6.75 C15.75,8.82106781 14.0710678,10.5 12,10.5 C9.92893219,10.5 8.25,8.82106781 8.25,6.75 C8.25,6.33578644 7.91421356,6 7.5,6 C7.08578644,6 6.75,6.33578644 6.75,6.75 C6.75,9.64949494 9.10050506,12 12,12 C14.8994949,12 17.25,9.64949494 17.25,6.75 C17.25,6.33578644 16.9142136,6 16.5,6 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="典型页面-7：购物袋（折叠屏）" transform="translate(-461.000000, -682.000000)">
+            <g id="编组-7" transform="translate(0.000000, 619.000000)">
+                <g id="BottomNavigationBar/Port/Item_5备份-3" transform="translate(0.000000, 56.000000)">
+                    <g id="Bottom-tab/item/normal" transform="translate(412.354545, 7.000000)">
+                        <g id="tab/ic_备份-68" transform="translate(49.545455, 0.000000)">
+                            <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+                            <mask id="mask-2" fill="white">
+                                <use xlink:href="#path-1"></use>
+                            </mask>
+                            <use id="形状结合" fill="#D20A2C" xlink:href="#path-1"></use>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_1.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..be1f3d1b50b92e8f41b69c4079466fc7f2c9a23e
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_1.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_2.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b2fd7dfb43a78628c99b0dfff3ebd4a6f579db1
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_2.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_3.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..25c8185235dfb33dbe88ec122863b780f77aadbc
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_3.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_4.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..76612e3a2b723a77c39ddaba082f1fef6036e524
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_4.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_5.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..88d946927f3ccd0e6be46617f4ed202d0e9cd9b5
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_5.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_6.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..b71ea0e327827de31e555a975003453e13fc2a13
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_6.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_7.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_7.png
new file mode 100644
index 0000000000000000000000000000000000000000..65cde10c7532947f015f541976d767542f8782b3
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_7.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_8.png b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_8.png
new file mode 100644
index 0000000000000000000000000000000000000000..a71df7b03a0e6fdc138d61f65a64564d817ffb6e
Binary files /dev/null and b/MultiShoppingPriceComparison/features/home/src/main/resources/base/media/welfare_product_8.png differ
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/en_US/element/float.json b/MultiShoppingPriceComparison/features/home/src/main/resources/en_US/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..9bd124239187a3c11bccc7bb0e51427e7bb26b6d
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/en_US/element/float.json
@@ -0,0 +1,928 @@
+{
+  "float": [
+    {
+      "name": "bottom_tab_bar_width_lg",
+      "value": "96vp"
+    },
+    {
+      "name": "side_tab_bar_height",
+      "value": "80vp"
+    },
+    {
+      "name": "tab_font_size",
+      "value": "10fp"
+    },
+    {
+      "name": "tab_top_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "top_bar_text_selected_font",
+      "value": "24fp"
+    },
+    {
+      "name": "top_bar_text_font",
+      "value": "18fp"
+    },
+    {
+      "name": "top_bar_text_selected_line",
+      "value": "32vp"
+    },
+    {
+      "name": "top_bar_text_line",
+      "value": "24vp"
+    },
+    {
+      "name": "top_bar_text_font_sel",
+      "value": "24fp"
+    },
+    {
+      "name": "top_bar_text_line_sel",
+      "value": "33vp"
+    },
+    {
+      "name": "top_text_padding_left_sm",
+      "value": "8vp"
+    },
+    {
+      "name": "top_text_padding_right_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "top_text_padding_right_md",
+      "value": "24vp"
+    },
+    {
+      "name": "top_text_padding_right_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "search_input_font",
+      "value": "16fp"
+    },
+    {
+      "name": "search_input_height",
+      "value": "40vp"
+    },
+    {
+      "name": "search_input_left",
+      "value": "36vp"
+    },
+    {
+      "name": "search_input_right",
+      "value": "12vp"
+    },
+    {
+      "name": "search_img_size",
+      "value": "16vp"
+    },
+    {
+      "name": "search_img_left",
+      "value": "12vp"
+    },
+    {
+      "name": "search_img_margin_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "search_img_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "category_img_size_sm",
+      "value": "40vp"
+    },
+    {
+      "name": "category_img_size_md",
+      "value": "64vp"
+    },
+    {
+      "name": "category_img_size_lg",
+      "value": "68vp"
+    },
+    {
+      "name": "category_text_font",
+      "value": "12fp"
+    },
+    {
+      "name": "category_text_line",
+      "value": "17vp"
+    },
+    {
+      "name": "category_item_height_sm",
+      "value": "57vp"
+    },
+    {
+      "name": "category_item_height_md",
+      "value": "81vp"
+    },
+    {
+      "name": "category_item_height_lg",
+      "value": "85vp"
+    },
+    {
+      "name": "category_lanes_gutter",
+      "value": "12vp"
+    },
+    {
+      "name": "category_list_height_sm",
+      "value": "126vp"
+    },
+    {
+      "name": "category_list_height_md",
+      "value": "81vp"
+    },
+    {
+      "name": "category_list_height_lg",
+      "value": "85vp"
+    },
+    {
+      "name": "category_divider_width",
+      "value": "24vp"
+    },
+    {
+      "name": "category_divider_row_height",
+      "value": "32vp"
+    },
+    {
+      "name": "category_col_height_sm",
+      "value": "126vp"
+    },
+    {
+      "name": "category_col_height_md",
+      "value": "113vp"
+    },
+    {
+      "name": "category_col_height_lg",
+      "value": "117vp"
+    },
+    {
+      "name": "category_col_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "category_col_margin_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "welfare_image_size_sm",
+      "value": "60vp"
+    },
+    {
+      "name": "welfare_image_size",
+      "value": "72vp"
+    },
+    {
+      "name": "title_font",
+      "value": "16fp"
+    },
+    {
+      "name": "title_line",
+      "value": "22vp"
+    },
+    {
+      "name": "button_height",
+      "value": "28vp"
+    },
+    {
+      "name": "button_width",
+      "value": "80vp"
+    },
+    {
+      "name": "button_font",
+      "value": "12fp"
+    },
+    {
+      "name": "title_height",
+      "value": "48vp"
+    },
+    {
+      "name": "welfare_tip_font",
+      "value": "10fp"
+    },
+    {
+      "name": "welfare_tip_line",
+      "value": "16vp"
+    },
+    {
+      "name": "welfare_tip_width",
+      "value": "40vp"
+    },
+    {
+      "name": "welfare_info_font",
+      "value": "12fp"
+    },
+    {
+      "name": "welfare_info_line",
+      "value": "16vp"
+    },
+    {
+      "name": "welfare_info_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "welfare_row_height_sm",
+      "value": "102vp"
+    },
+    {
+      "name": "welfare_row_height_md",
+      "value": "114vp"
+    },
+    {
+      "name": "welfare_row_height_lg",
+      "value": "118vp"
+    },
+    {
+      "name": "welfare_row_padding_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "welfare_row_padding_md",
+      "value": "12vp"
+    },
+    {
+      "name": "welfare_row_padding_lg",
+      "value": "20vp"
+    },
+    {
+      "name": "welfare_col_height_sm",
+      "value": "162vp"
+    },
+    {
+      "name": "welfare_col_height_md",
+      "value": "174vp"
+    },
+    {
+      "name": "welfare_col_height_lg",
+      "value": "178vp"
+    },
+    {
+      "name": "welfare_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "title_tip_font",
+      "value": "14fp"
+    },
+    {
+      "name": "title_tip_line",
+      "value": "19vp"
+    },
+    {
+      "name": "recommend_swiper_top_sm",
+      "value": "24vp"
+    },
+    {
+      "name": "recommend_swiper_bottom_md",
+      "value": "12vp"
+    },
+    {
+      "name": "recommend_swiper_bottom",
+      "value": "16vp"
+    },
+    {
+      "name": "title_view_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "section_gutter_sm",
+      "value": "10vp"
+    },
+    {
+      "name": "section_gutter_md",
+      "value": "12vp"
+    },
+    {
+      "name": "section_gutter_lg",
+      "value": "8vp"
+    },
+    {
+      "name": "section_live_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "section_image_margin_sm",
+      "value": "12vp"
+    },
+    {
+      "name": "section_image_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "section_tip_text_line",
+      "value": "12vp"
+    },
+    {
+      "name": "section_tip_text_size",
+      "value": "8fp"
+    },
+    {
+      "name": "section_tip_text_margin",
+      "value": "2vp"
+    },
+    {
+      "name": "section_tip_text_padding",
+      "value": "4vp"
+    },
+    {
+      "name": "section_title_text_size",
+      "value": "14fp"
+    },
+    {
+      "name": "section_title_text_line",
+      "value": "19vp"
+    },
+    {
+      "name": "section_info_text_size",
+      "value": "12fp"
+    },
+    {
+      "name": "section_info_text_line",
+      "value": "16vp"
+    },
+    {
+      "name": "section_info_text_margin",
+      "value": "2vp"
+    },
+    {
+      "name": "section_price_text_size",
+      "value": "14fp"
+    },
+    {
+      "name": "section_price_text_line",
+      "value": "19vp"
+    },
+    {
+      "name": "section_price_text_margin",
+      "value": "10vp"
+    },
+    {
+      "name": "original_price_text_size",
+      "value": "8fp"
+    },
+    {
+      "name": "original_price_text_line",
+      "value": "10vp"
+    },
+    {
+      "name": "original_price_text_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "section_feature_text_size",
+      "value": "9fp"
+    },
+    {
+      "name": "section_feature_text_line",
+      "value": "12vp"
+    },
+    {
+      "name": "section_feature_padding",
+      "value": "4vp"
+    },
+    {
+      "name": "section_feature_margin_top",
+      "value": "6vp"
+    },
+    {
+      "name": "section_feature_margin_left",
+      "value": "4vp"
+    },
+    {
+      "name": "section_comments_text_size",
+      "value": "10fp"
+    },
+    {
+      "name": "section_comments_text_line",
+      "value": "14vp"
+    },
+    {
+      "name": "section_comments_text_top",
+      "value": "6vp"
+    },
+    {
+      "name": "section_comments_text_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "section_margin_md",
+      "value": "12vp"
+    },
+    {
+      "name": "section_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "section_feature_border_width",
+      "value": "1vp"
+    },
+    {
+      "name": "section_feature_border_radius",
+      "value": "4vp"
+    },
+    {
+      "name": "flash_sale_margin_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "flash_sale_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "flash_grid_gutter_x_sm",
+      "value": "0"
+    },
+    {
+      "name": "flash_grid_gutter_x_md",
+      "value": "12vp"
+    },
+    {
+      "name": "flash_grid_gutter_x_lg",
+      "value": "4vp"
+    },
+    {
+      "name": "flash_grid_gutter_y",
+      "value": "12vp"
+    },
+    {
+      "name": "flash_button_top",
+      "value": "8vp"
+    },
+    {
+      "name": "flash_button_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "flash_button_right",
+      "value": "8vp"
+    },
+    {
+      "name": "flash_button_right_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "flash_row_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "classify_banner_height",
+      "value": "107vp"
+    },
+    {
+      "name": "classify_swiper_indicator_width",
+      "value": "6vp"
+    },
+    {
+      "name": "classify_swiper_indicator_height",
+      "value": "6vp"
+    },
+    {
+      "name": "classify_swiper_indicator_selected_width",
+      "value": "12vp"
+    },
+    {
+      "name": "classify_swiper_indicator_selected_height",
+      "value": "6vp"
+    },
+    {
+      "name": "classify_swiper_next_margin_md",
+      "value": "13vp"
+    },
+    {
+      "name": "classify_navigation_font_size",
+      "value": "14fp"
+    },
+    {
+      "name": "classify_navigation_line_height",
+      "value": "19vp"
+    },
+    {
+      "name": "classify_navigation_divider_height",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_navigation_bar_width_sm",
+      "value": "96vp"
+    },
+    {
+      "name": "classify_navigation_bar_width_md",
+      "value": "144vp"
+    },
+    {
+      "name": "classify_navigation_bar_width_lg",
+      "value": "200vp"
+    },
+    {
+      "name": "classify_navigation_bar_height",
+      "value": "48vp"
+    },
+    {
+      "name": "classify_header_input_font_size",
+      "value": "16fp"
+    },
+    {
+      "name": "classify_header_input_height",
+      "value": "40vp"
+    },
+    {
+      "name": "classify_header_input_padding_left",
+      "value": "36vp"
+    },
+    {
+      "name": "classify_header_input_padding_right",
+      "value": "12vp"
+    },
+    {
+      "name": "classify_header_input_search_size",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_input_search_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_row_width",
+      "value": "328vp"
+    },
+    {
+      "name": "classify_header_padding_left_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_padding_right_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_padding",
+      "value": "24vp"
+    },
+    {
+      "name": "classify_header_image_margin_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_image_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "classify_banner_padding_right_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_banner_padding_right_md",
+      "value": "0vp"
+    },
+    {
+      "name": "classify_banner_padding_right_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "classify_destination_padding_top",
+      "value": "8vp"
+    },
+    {
+      "name": "classify_destination_padding_left_sm",
+      "value": "4vp"
+    },
+    {
+      "name": "classify_destination_padding_left",
+      "value": "0vp"
+    },
+    {
+      "name": "classify_header_input_width",
+      "value": "232vp"
+    },
+    {
+      "name": "shop_list_font",
+      "value": "16fp"
+    },
+    {
+      "name": "shop_list_row_height",
+      "value": "48vp"
+    },
+    {
+      "name": "list_name_font",
+      "value": "12fp"
+    },
+    {
+      "name": "shop_grid_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "shop_col_padding_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "shop_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "shop_col_margin_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "shop_col_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "shop_list_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_back_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "bag_title_font",
+      "value": "24fp"
+    },
+    {
+      "name": "bag_name_font",
+      "value": "14fp"
+    },
+    {
+      "name": "bag_close_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "bag_title_row_height",
+      "value": "56vp"
+    },
+    {
+      "name": "bag_col_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "check_box_size",
+      "value": "18vp"
+    },
+    {
+      "name": "check_box_group_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_seller_logo_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "bag_seller_logo_border_width",
+      "value": "0.5vp"
+    },
+    {
+      "name": "bag_card_title_row_height",
+      "value": "42vp"
+    },
+    {
+      "name": "bag_card_check_box_margin",
+      "value": "14vp"
+    },
+    {
+      "name": "bag_card_check_col_width",
+      "value": "32vp"
+    },
+    {
+      "name": "bag_card_check_col_padding",
+      "value": "40vp"
+    },
+    {
+      "name": "bag_card_row_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_card_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_discount_font_1",
+      "value": "20fp"
+    },
+    {
+      "name": "bag_discount_font_2",
+      "value": "14fp"
+    },
+    {
+      "name": "bag_discount_font_3",
+      "value": "16fp"
+    },
+    {
+      "name": "bag_discount_line_1",
+      "value": "28vp"
+    },
+    {
+      "name": "bag_discount_line_2",
+      "value": "19vp"
+    },
+    {
+      "name": "bag_discount_line_3",
+      "value": "22vp"
+    },
+    {
+      "name": "bag_discount_title_padding_top",
+      "value": "2vp"
+    },
+    {
+      "name": "bag_discount_title_padding_bottom",
+      "value": "4vp"
+    },
+    {
+      "name": "bag_discount_row_height",
+      "value": "48vp"
+    },
+    {
+      "name": "bag_discount_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_discount_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "bag_discount_col_padding_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "shop_card_check_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "shop_card_font_1",
+      "value": "12fp"
+    },
+    {
+      "name": "shop_card_font_2",
+      "value": "14fp"
+    },
+    {
+      "name": "shop_card_font_3",
+      "value": "10fp"
+    },
+    {
+      "name": "shop_card_line_1",
+      "value": "19vp"
+    },
+    {
+      "name": "shop_card_line_2",
+      "value": "17vp"
+    },
+    {
+      "name": "shop_card_line_3",
+      "value": "22vp"
+    },
+    {
+      "name": "shop_card_line_4",
+      "value": "14vp"
+    },
+    {
+      "name": "arrow_up_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "arrow_up_width",
+      "value": "8vp"
+    },
+    {
+      "name": "arrow_up_height",
+      "value": "16vp"
+    },
+    {
+      "name": "foot_button_height",
+      "value": "40vp"
+    },
+    {
+      "name": "foot_button_width",
+      "value": "120vp"
+    },
+    {
+      "name": "foot_button_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "foot_height",
+      "value": "56vp"
+    },
+    {
+      "name": "foot_padding_more",
+      "value": "32vp"
+    },
+    {
+      "name": "card_item_font_1",
+      "value": "13fp"
+    },
+    {
+      "name": "card_item_font_2",
+      "value": "9fp"
+    },
+    {
+      "name": "card_item_font_3",
+      "value": "12fp"
+    },
+    {
+      "name": "card_item_font_4",
+      "value": "16fp"
+    },
+    {
+      "name": "card_item_font_5",
+      "value": "10fp"
+    },
+    {
+      "name": "card_item_font_6",
+      "value": "11fp"
+    },
+    {
+      "name": "card_item_name_margin",
+      "value": "3vp"
+    },
+    {
+      "name": "card_item_type_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "card_type_padding_row_top",
+      "value": "1vp"
+    },
+    {
+      "name": "card_type_padding_row_left",
+      "value": "6vp"
+    },
+    {
+      "name": "card_type_padding_row_right",
+      "value": "10vp"
+    },
+    {
+      "name": "card_type_margin_row_bottom",
+      "value": "10vp"
+    },
+    {
+      "name": "card_preferential_padding_top",
+      "value": "2vp"
+    },
+    {
+      "name": "card_preferential_padding_left",
+      "value": "5vp"
+    },
+    {
+      "name": "card_preferential_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "card_preferential_row_margin",
+      "value": "11vp"
+    },
+    {
+      "name": "card_price_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "card_price_more_margin",
+      "value": "10vp"
+    },
+    {
+      "name": "add_button_size",
+      "value": "24vp"
+    },
+    {
+      "name": "add_button_border_width",
+      "value": "0.5vp"
+    },
+    {
+      "name": "card_number_font",
+      "value": "13fp"
+    },
+    {
+      "name": "card_number_width",
+      "value": "24vp"
+    },
+    {
+      "name": "card_number_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "card_item_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "card_gift_width",
+      "value": "48vp"
+    },
+    {
+      "name": "card_gift_row_margin_top",
+      "value": "4vp"
+    },
+    {
+      "name": "card_gift_row_margin_bottom",
+      "value": "5vp"
+    },
+    {
+      "name": "card_service_padding_left",
+      "value": "4vp"
+    },
+    {
+      "name": "card_service_padding_top",
+      "value": "2vp"
+    },
+    {
+      "name": "card_gift_row_padding",
+      "value": "42vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/en_US/element/string.json b/MultiShoppingPriceComparison/features/home/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..8e0c5018a71a6195b55f2801921644c889a03056
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/en_US/element/string.json
@@ -0,0 +1,416 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "NAV_ROUTER_LIST1",
+      "value": "Phone"
+    },
+    {
+      "name": "NAV_ROUTER_LIST2",
+      "value": "Wearable"
+    },
+    {
+      "name": "NAV_ROUTER_LIST3",
+      "value": "Tablet"
+    },
+    {
+      "name": "NAV_ROUTER_LIST4",
+      "value": "PC"
+    },
+    {
+      "name": "NAV_ROUTER_LIST5",
+      "value": "Display & Print"
+    },
+    {
+      "name": "NAV_ROUTER_LIST6",
+      "value": "Headphone"
+    },
+    {
+      "name": "NAV_ROUTER_LIST7",
+      "value": "Vision"
+    },
+    {
+      "name": "NAV_ROUTER_LIST8",
+      "value": "Lock & Router"
+    },
+    {
+      "name": "NAV_ROUTER_LIST9",
+      "value": "Vehicle Product"
+    },
+    {
+      "name": "NAV_ROUTER_LIST10",
+      "value": "Digital Accessories"
+    },
+    {
+      "name": "NAV_ROUTER_LIST11",
+      "value": "Huawei Services"
+    },
+    {
+      "name": "NAV_ROUTER_LIST12",
+      "value": "Digital Content"
+    },
+    {
+      "name": "NAV_ROUTER_LIST13",
+      "value": "Commercial Terminal"
+    },
+    {
+      "name": "NAV_ROUTER_LIST14",
+      "value": "Huawei Premium"
+    },
+    {
+      "name": "NAV_ROUTER_LIST15",
+      "value": "Household Appliances"
+    },
+    {
+      "name": "SHOP_TITLE_LIST1",
+      "value": "New Products"
+    },
+    {
+      "name": "SHOP_TITLE_LIST2",
+      "value": "HUAWEI Mate Series"
+    },
+    {
+      "name": "SHOP_TITLE_LIST3",
+      "value": "HUAWEI P Series"
+    },
+    {
+      "name": "search",
+      "value": "Search"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST1",
+      "value": "Home"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST2",
+      "value": "Categories"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST3",
+      "value": "Discover"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST4",
+      "value": "Cart"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST5",
+      "value": "Personal"
+    },
+    {
+      "name": "TOP_BAR_TEXTS1",
+      "value": "Huawei"
+    },
+    {
+      "name": "TOP_BAR_TEXTS2",
+      "value": "AITO Car"
+    },
+    {
+      "name": "TOP_BAR_TEXTS3",
+      "value": "Huawei Premium"
+    },
+    {
+      "name": "TOP_BAR_TEXTS4",
+      "value": "Ecological Surroundings"
+    },
+    {
+      "name": "searching",
+      "value": "Search..."
+    },
+    {
+      "name": "GOOD_CATEGORIES1",
+      "value": "Office"
+    },
+    {
+      "name": "GOOD_CATEGORIES3",
+      "value": "Phone"
+    },
+    {
+      "name": "GOOD_CATEGORIES2",
+      "value": "Household"
+    },
+    {
+      "name": "GOOD_CATEGORIES4",
+      "value": "Audio"
+    },
+    {
+      "name": "GOOD_CATEGORIES5",
+      "value": "Sports"
+    },
+    {
+      "name": "GOOD_CATEGORIES6",
+      "value": "AITO Cars"
+    },
+    {
+      "name": "GOOD_CATEGORIES7",
+      "value": "Select"
+    },
+    {
+      "name": "GOOD_CATEGORIES8",
+      "value": "Connect"
+    },
+    {
+      "name": "GOOD_CATEGORIES9",
+      "value": "Business"
+    },
+    {
+      "name": "GOOD_CATEGORIES10",
+      "value": "Solutions"
+    },
+    {
+      "name": "PRICE_UNIT",
+      "value": ""
+    },
+    {
+      "name": "HOME_TITLES1",
+      "value": "Welfare Zone"
+    },
+    {
+      "name": "HOME_TITLES2",
+      "value": "Recommendation"
+    },
+    {
+      "name": "HOME_TITLES3",
+      "value": "Time-Limited Discounts"
+    },
+    {
+      "name": "BUTTON_TEXTS2",
+      "value": "Buy"
+    },
+    {
+      "name": "BUTTON_TEXTS1",
+      "value": "Coupon"
+    },
+    {
+      "name": "TIP_TEXTS1",
+      "value": "Disc."
+    },
+    {
+      "name": "TIP_TEXTS2",
+      "value": "More"
+    },
+    {
+      "name": "TIP_TEXTS3",
+      "value": "New"
+    },
+    {
+      "name": "SECTION_PRODUCTS_TITLES1",
+      "value": "MateBook X Pro 12"
+    },
+    {
+      "name": "SECTION_PRODUCTS_TITLES2",
+      "value": "New"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO1",
+      "value": "Beidou Msg | Low Batt Emergency"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO2",
+      "value": "144Hz Full-Screen Display"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO3",
+      "value": "32GB Mem | 13th Gen Core | Super Term"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES1",
+      "value": "V1-V5: ¥400 Off / 12M Int-Free"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES2",
+      "value": "Next-Gen Straight-Screen Flagship"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES3",
+      "value": "Up to ¥100 Off"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES4",
+      "value": "Ltd Time ¥300 Off"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES5",
+      "value": "Max ¥300 Off"
+    },
+    {
+      "name": "SHOPPING_BAG_TITLES1",
+      "value": "Cart"
+    },
+    {
+      "name": "SHOPPING_BAG_TITLES2",
+      "value": "Manage"
+    },
+    {
+      "name": "SHOPPING_BAG_TITLES3",
+      "value": "Huawei official flagship store"
+    },
+    {
+      "name": "SHOPPING_CARD_FOOT_TITLES1",
+      "value": "Select All"
+    },
+    {
+      "name": "SHOPPING_CARD_FOOT_TITLES2",
+      "value": "Total:"
+    },
+    {
+      "name": "SHOPPING_CARD_FOOT_TITLES3",
+      "value": "Discounted ￥1000"
+    },
+    {
+      "name": "SHOPPING_CARD_FOOT_TITLES4",
+      "value": "Check out(1)"
+    },
+    {
+      "name": "HOME_REVIEW",
+      "value": "2.57K Reviews, 95% Positive"
+    },
+    {
+      "name": "Hot_Seller",
+      "value": "Hot Seller"
+    },
+    {
+      "name": "New_Launch",
+      "value": "New Launch"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO4",
+      "value": "New Front 60MP Ultra-Wide Lens"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO5",
+      "value": "2.5K HR Screen | Lt, Thin, Long Batt Life"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO6",
+      "value": "Thin, Flat, Reliable"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES1",
+      "value": "Next-Gen Straight Flagship"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES2",
+      "value": "Points"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES3",
+      "value": "Ltd Time: 6M Int-Free"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES4",
+      "value": "V1-V5: ¥100 Off | Free Classic Headphones"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES5",
+      "value": "Pre-order Perf. Ed., Save ¥200"
+    },
+    {
+      "name": "PRODUCT_NAME_LIST1",
+      "value": "HuaWei Mate 50 Pro 256GB Frosty Silver (Kunlun Glass)"
+    },
+    {
+      "name": "PRODUCT_NAME_LIST2",
+      "value": "HuaWei Mate 60 12+1TB Yadan Black (Std Config)"
+    },
+    {
+      "name": "PRODUCT_NAME_LIST3",
+      "value": "【In Stock】HUAWEI Mate X5 12+512GB Phantom Purple"
+    },
+    {
+      "name": "PRODUCT_TYPE_LIST1",
+      "value": "Frosty Silver 256GB (Kunlun Glass), Std Config, Fast Shipping"
+    },
+    {
+      "name": "PRODUCT_TYPE_LIS2",
+      "value": "Yadan Black 12+1TB, Std Config, Pre-order OK"
+    },
+    {
+      "name": "PRODUCT_TYPE_LIST3",
+      "value": "Phantom Purple 512+12GB, Std Config, Fast Shipping"
+    },
+    {
+      "name": "PRODUCT_PREFERENTIALList_LIST_MESSAGE1",
+      "value": "0% Interest"
+    },
+    {
+      "name": "PRODUCT_PREFERENTIALList_LIST_MESSAGE2",
+      "value": "Ltd Time Offer"
+    },
+    {
+      "name": "PRODUCT_PREFERENTIALList_LIST_MESSAGE3",
+      "value": "Next-Gen Straight Flagship"
+    },
+    {
+      "name": "PRODUCT_PREFERENTIALList_LIST_MESSAGE4",
+      "value": "Points"
+    },
+    {
+      "name": "PRODUCT_PRESENT_LIST_MESSAGE1",
+      "value": "HUAWEI FreeLace Headphones …"
+    },
+    {
+      "name": "PRODUCT_PRESENT_LIST_MESSAGE2",
+      "value": "Mate 60 Ring Flash Case (Blk)"
+    },
+    {
+      "name": "PRODUCT_PRESENT_LIST_MESSAGE3",
+      "value": "Mate 50 Ring Flash Case (Silver)"
+    },
+    {
+      "name": "PRODUCT_SERVICE_LIST_message",
+      "value": "Worry-Free Service"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE1",
+      "value": "total price"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE2",
+      "value": "coupon"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE3",
+      "value": "discount"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE4",
+      "value": "sum"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE5",
+      "value": "offer breakdown"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE6",
+      "value": "Actual discount shown at checkout."
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE7",
+      "value": "delivery"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE8",
+      "value": "indicate delivery"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE9",
+      "value": "E-Invoice for Individuals"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE10",
+      "value": "【gift】"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE11",
+      "value": "【serv】"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE12",
+      "value": "event offer"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/zh_CN/element/float.json b/MultiShoppingPriceComparison/features/home/src/main/resources/zh_CN/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..4c8224722eea75f2643355d92d8a781b9ee809cb
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/zh_CN/element/float.json
@@ -0,0 +1,928 @@
+{
+  "float": [
+    {
+      "name": "bottom_tab_bar_width_lg",
+      "value": "96vp"
+    },
+    {
+      "name": "side_tab_bar_height",
+      "value": "80vp"
+    },
+    {
+      "name": "tab_font_size",
+      "value": "10fp"
+    },
+    {
+      "name": "tab_top_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "top_bar_text_selected_font",
+      "value": "24fp"
+    },
+    {
+      "name": "top_bar_text_font",
+      "value": "18fp"
+    },
+    {
+      "name": "top_bar_text_selected_line",
+      "value": "32vp"
+    },
+    {
+      "name": "top_bar_text_line",
+      "value": "24vp"
+    },
+    {
+      "name": "top_bar_text_font_sel",
+      "value": "24fp"
+    },
+    {
+      "name": "top_bar_text_line_sel",
+      "value": "33vp"
+    },
+    {
+      "name": "top_text_padding_left_sm",
+      "value": "8vp"
+    },
+    {
+      "name": "top_text_padding_right_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "top_text_padding_right_md",
+      "value": "24vp"
+    },
+    {
+      "name": "top_text_padding_right_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "search_input_font",
+      "value": "16fp"
+    },
+    {
+      "name": "search_input_height",
+      "value": "40vp"
+    },
+    {
+      "name": "search_input_left",
+      "value": "36vp"
+    },
+    {
+      "name": "search_input_right",
+      "value": "12vp"
+    },
+    {
+      "name": "search_img_size",
+      "value": "16vp"
+    },
+    {
+      "name": "search_img_left",
+      "value": "12vp"
+    },
+    {
+      "name": "search_img_margin_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "search_img_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "category_img_size_sm",
+      "value": "40vp"
+    },
+    {
+      "name": "category_img_size_md",
+      "value": "64vp"
+    },
+    {
+      "name": "category_img_size_lg",
+      "value": "68vp"
+    },
+    {
+      "name": "category_text_font",
+      "value": "12fp"
+    },
+    {
+      "name": "category_text_line",
+      "value": "17vp"
+    },
+    {
+      "name": "category_item_height_sm",
+      "value": "57vp"
+    },
+    {
+      "name": "category_item_height_md",
+      "value": "81vp"
+    },
+    {
+      "name": "category_item_height_lg",
+      "value": "85vp"
+    },
+    {
+      "name": "category_lanes_gutter",
+      "value": "12vp"
+    },
+    {
+      "name": "category_list_height_sm",
+      "value": "126vp"
+    },
+    {
+      "name": "category_list_height_md",
+      "value": "81vp"
+    },
+    {
+      "name": "category_list_height_lg",
+      "value": "85vp"
+    },
+    {
+      "name": "category_divider_width",
+      "value": "24vp"
+    },
+    {
+      "name": "category_divider_row_height",
+      "value": "32vp"
+    },
+    {
+      "name": "category_col_height_sm",
+      "value": "126vp"
+    },
+    {
+      "name": "category_col_height_md",
+      "value": "113vp"
+    },
+    {
+      "name": "category_col_height_lg",
+      "value": "117vp"
+    },
+    {
+      "name": "category_col_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "category_col_margin_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "welfare_image_size_sm",
+      "value": "60vp"
+    },
+    {
+      "name": "welfare_image_size",
+      "value": "72vp"
+    },
+    {
+      "name": "title_font",
+      "value": "16fp"
+    },
+    {
+      "name": "title_line",
+      "value": "22vp"
+    },
+    {
+      "name": "button_height",
+      "value": "28vp"
+    },
+    {
+      "name": "button_width",
+      "value": "80vp"
+    },
+    {
+      "name": "button_font",
+      "value": "12fp"
+    },
+    {
+      "name": "title_height",
+      "value": "48vp"
+    },
+    {
+      "name": "welfare_tip_font",
+      "value": "10fp"
+    },
+    {
+      "name": "welfare_tip_line",
+      "value": "16vp"
+    },
+    {
+      "name": "welfare_tip_width",
+      "value": "40vp"
+    },
+    {
+      "name": "welfare_info_font",
+      "value": "12fp"
+    },
+    {
+      "name": "welfare_info_line",
+      "value": "16vp"
+    },
+    {
+      "name": "welfare_info_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "welfare_row_height_sm",
+      "value": "102vp"
+    },
+    {
+      "name": "welfare_row_height_md",
+      "value": "114vp"
+    },
+    {
+      "name": "welfare_row_height_lg",
+      "value": "118vp"
+    },
+    {
+      "name": "welfare_row_padding_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "welfare_row_padding_md",
+      "value": "12vp"
+    },
+    {
+      "name": "welfare_row_padding_lg",
+      "value": "20vp"
+    },
+    {
+      "name": "welfare_col_height_sm",
+      "value": "162vp"
+    },
+    {
+      "name": "welfare_col_height_md",
+      "value": "174vp"
+    },
+    {
+      "name": "welfare_col_height_lg",
+      "value": "178vp"
+    },
+    {
+      "name": "welfare_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "title_tip_font",
+      "value": "14fp"
+    },
+    {
+      "name": "title_tip_line",
+      "value": "19vp"
+    },
+    {
+      "name": "recommend_swiper_top_sm",
+      "value": "24vp"
+    },
+    {
+      "name": "recommend_swiper_bottom_md",
+      "value": "12vp"
+    },
+    {
+      "name": "recommend_swiper_bottom",
+      "value": "16vp"
+    },
+    {
+      "name": "title_view_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "section_gutter_sm",
+      "value": "10vp"
+    },
+    {
+      "name": "section_gutter_md",
+      "value": "12vp"
+    },
+    {
+      "name": "section_gutter_lg",
+      "value": "8vp"
+    },
+    {
+      "name": "section_live_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "section_image_margin_sm",
+      "value": "12vp"
+    },
+    {
+      "name": "section_image_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "section_tip_text_line",
+      "value": "12vp"
+    },
+    {
+      "name": "section_tip_text_size",
+      "value": "8fp"
+    },
+    {
+      "name": "section_tip_text_margin",
+      "value": "2vp"
+    },
+    {
+      "name": "section_tip_text_padding",
+      "value": "4vp"
+    },
+    {
+      "name": "section_title_text_size",
+      "value": "14fp"
+    },
+    {
+      "name": "section_title_text_line",
+      "value": "19vp"
+    },
+    {
+      "name": "section_info_text_size",
+      "value": "12fp"
+    },
+    {
+      "name": "section_info_text_line",
+      "value": "16vp"
+    },
+    {
+      "name": "section_info_text_margin",
+      "value": "2vp"
+    },
+    {
+      "name": "section_price_text_size",
+      "value": "14fp"
+    },
+    {
+      "name": "section_price_text_line",
+      "value": "19vp"
+    },
+    {
+      "name": "section_price_text_margin",
+      "value": "10vp"
+    },
+    {
+      "name": "original_price_text_size",
+      "value": "8fp"
+    },
+    {
+      "name": "original_price_text_line",
+      "value": "10vp"
+    },
+    {
+      "name": "original_price_text_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "section_feature_text_size",
+      "value": "9fp"
+    },
+    {
+      "name": "section_feature_text_line",
+      "value": "12vp"
+    },
+    {
+      "name": "section_feature_padding",
+      "value": "4vp"
+    },
+    {
+      "name": "section_feature_margin_top",
+      "value": "6vp"
+    },
+    {
+      "name": "section_feature_margin_left",
+      "value": "4vp"
+    },
+    {
+      "name": "section_comments_text_size",
+      "value": "10fp"
+    },
+    {
+      "name": "section_comments_text_line",
+      "value": "14vp"
+    },
+    {
+      "name": "section_comments_text_top",
+      "value": "6vp"
+    },
+    {
+      "name": "section_comments_text_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "section_margin_md",
+      "value": "12vp"
+    },
+    {
+      "name": "section_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "section_feature_border_width",
+      "value": "1vp"
+    },
+    {
+      "name": "section_feature_border_radius",
+      "value": "4vp"
+    },
+    {
+      "name": "flash_sale_margin_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "flash_sale_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "flash_grid_gutter_x_sm",
+      "value": "0"
+    },
+    {
+      "name": "flash_grid_gutter_x_md",
+      "value": "12vp"
+    },
+    {
+      "name": "flash_grid_gutter_x_lg",
+      "value": "4vp"
+    },
+    {
+      "name": "flash_grid_gutter_y",
+      "value": "12vp"
+    },
+    {
+      "name": "flash_button_top",
+      "value": "8vp"
+    },
+    {
+      "name": "flash_button_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "flash_button_right",
+      "value": "8vp"
+    },
+    {
+      "name": "flash_button_right_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "flash_row_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "classify_banner_height",
+      "value": "107vp"
+    },
+    {
+      "name": "classify_swiper_indicator_width",
+      "value": "6vp"
+    },
+    {
+      "name": "classify_swiper_indicator_height",
+      "value": "6vp"
+    },
+    {
+      "name": "classify_swiper_indicator_selected_width",
+      "value": "12vp"
+    },
+    {
+      "name": "classify_swiper_indicator_selected_height",
+      "value": "6vp"
+    },
+    {
+      "name": "classify_swiper_next_margin_md",
+      "value": "13vp"
+    },
+    {
+      "name": "classify_navigation_font_size",
+      "value": "14fp"
+    },
+    {
+      "name": "classify_navigation_line_height",
+      "value": "19vp"
+    },
+    {
+      "name": "classify_navigation_divider_height",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_navigation_bar_width_sm",
+      "value": "96vp"
+    },
+    {
+      "name": "classify_navigation_bar_width_md",
+      "value": "144vp"
+    },
+    {
+      "name": "classify_navigation_bar_width_lg",
+      "value": "200vp"
+    },
+    {
+      "name": "classify_navigation_bar_height",
+      "value": "48vp"
+    },
+    {
+      "name": "classify_header_input_font_size",
+      "value": "16fp"
+    },
+    {
+      "name": "classify_header_input_height",
+      "value": "40vp"
+    },
+    {
+      "name": "classify_header_input_padding_left",
+      "value": "36vp"
+    },
+    {
+      "name": "classify_header_input_padding_right",
+      "value": "12vp"
+    },
+    {
+      "name": "classify_header_input_search_size",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_input_search_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_row_width",
+      "value": "328vp"
+    },
+    {
+      "name": "classify_header_padding_left_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_padding_right_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_padding",
+      "value": "24vp"
+    },
+    {
+      "name": "classify_header_image_margin_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_header_image_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "classify_banner_padding_right_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "classify_banner_padding_right_md",
+      "value": "0vp"
+    },
+    {
+      "name": "classify_banner_padding_right_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "classify_destination_padding_top",
+      "value": "8vp"
+    },
+    {
+      "name": "classify_destination_padding_left_sm",
+      "value": "4vp"
+    },
+    {
+      "name": "classify_destination_padding_left",
+      "value": "0vp"
+    },
+    {
+      "name": "classify_header_input_width",
+      "value": "232vp"
+    },
+    {
+      "name": "shop_list_font",
+      "value": "16fp"
+    },
+    {
+      "name": "shop_list_row_height",
+      "value": "48vp"
+    },
+    {
+      "name": "list_name_font",
+      "value": "12fp"
+    },
+    {
+      "name": "shop_grid_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "shop_col_padding_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "shop_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "shop_col_margin_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "shop_col_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "shop_list_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_back_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "bag_title_font",
+      "value": "24fp"
+    },
+    {
+      "name": "bag_name_font",
+      "value": "14fp"
+    },
+    {
+      "name": "bag_close_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "bag_title_row_height",
+      "value": "56vp"
+    },
+    {
+      "name": "bag_col_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "check_box_size",
+      "value": "18vp"
+    },
+    {
+      "name": "check_box_group_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_seller_logo_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "bag_seller_logo_border_width",
+      "value": "0.5vp"
+    },
+    {
+      "name": "bag_card_title_row_height",
+      "value": "42vp"
+    },
+    {
+      "name": "bag_card_check_box_margin",
+      "value": "14vp"
+    },
+    {
+      "name": "bag_card_check_col_width",
+      "value": "32vp"
+    },
+    {
+      "name": "bag_card_check_col_padding",
+      "value": "40vp"
+    },
+    {
+      "name": "bag_card_row_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_card_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_discount_font_1",
+      "value": "20fp"
+    },
+    {
+      "name": "bag_discount_font_2",
+      "value": "14fp"
+    },
+    {
+      "name": "bag_discount_font_3",
+      "value": "16fp"
+    },
+    {
+      "name": "bag_discount_line_1",
+      "value": "28vp"
+    },
+    {
+      "name": "bag_discount_line_2",
+      "value": "19vp"
+    },
+    {
+      "name": "bag_discount_line_3",
+      "value": "22vp"
+    },
+    {
+      "name": "bag_discount_title_padding_top",
+      "value": "2vp"
+    },
+    {
+      "name": "bag_discount_title_padding_bottom",
+      "value": "4vp"
+    },
+    {
+      "name": "bag_discount_row_height",
+      "value": "48vp"
+    },
+    {
+      "name": "bag_discount_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "bag_discount_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "bag_discount_col_padding_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "shop_card_check_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "shop_card_font_1",
+      "value": "12fp"
+    },
+    {
+      "name": "shop_card_font_2",
+      "value": "10vp"
+    },
+    {
+      "name": "shop_card_font_3",
+      "value": "16fp"
+    },
+    {
+      "name": "shop_card_line_1",
+      "value": "19vp"
+    },
+    {
+      "name": "shop_card_line_2",
+      "value": "17vp"
+    },
+    {
+      "name": "shop_card_line_3",
+      "value": "22vp"
+    },
+    {
+      "name": "shop_card_line_4",
+      "value": "14vp"
+    },
+    {
+      "name": "arrow_up_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "arrow_up_width",
+      "value": "8vp"
+    },
+    {
+      "name": "arrow_up_height",
+      "value": "16vp"
+    },
+    {
+      "name": "foot_button_height",
+      "value": "40vp"
+    },
+    {
+      "name": "foot_button_width",
+      "value": "120vp"
+    },
+    {
+      "name": "foot_button_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "foot_height",
+      "value": "56vp"
+    },
+    {
+      "name": "foot_padding_more",
+      "value": "32vp"
+    },
+    {
+      "name": "card_item_font_1",
+      "value": "13fp"
+    },
+    {
+      "name": "card_item_font_2",
+      "value": "9fp"
+    },
+    {
+      "name": "card_item_font_3",
+      "value": "12fp"
+    },
+    {
+      "name": "card_item_font_4",
+      "value": "16fp"
+    },
+    {
+      "name": "card_item_font_5",
+      "value": "10fp"
+    },
+    {
+      "name": "card_item_font_6",
+      "value": "11fp"
+    },
+    {
+      "name": "card_item_name_margin",
+      "value": "3vp"
+    },
+    {
+      "name": "card_item_type_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "card_type_padding_row_top",
+      "value": "1vp"
+    },
+    {
+      "name": "card_type_padding_row_left",
+      "value": "6vp"
+    },
+    {
+      "name": "card_type_padding_row_right",
+      "value": "10vp"
+    },
+    {
+      "name": "card_type_margin_row_bottom",
+      "value": "10vp"
+    },
+    {
+      "name": "card_preferential_padding_top",
+      "value": "2vp"
+    },
+    {
+      "name": "card_preferential_padding_left",
+      "value": "5vp"
+    },
+    {
+      "name": "card_preferential_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "card_preferential_row_margin",
+      "value": "11vp"
+    },
+    {
+      "name": "card_price_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "card_price_more_margin",
+      "value": "10vp"
+    },
+    {
+      "name": "add_button_size",
+      "value": "24vp"
+    },
+    {
+      "name": "add_button_border_width",
+      "value": "0.5vp"
+    },
+    {
+      "name": "card_number_font",
+      "value": "13fp"
+    },
+    {
+      "name": "card_number_width",
+      "value": "24vp"
+    },
+    {
+      "name": "card_number_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "card_item_col_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "card_gift_width",
+      "value": "48vp"
+    },
+    {
+      "name": "card_gift_row_margin_top",
+      "value": "4vp"
+    },
+    {
+      "name": "card_gift_row_margin_bottom",
+      "value": "5vp"
+    },
+    {
+      "name": "card_service_padding_left",
+      "value": "4vp"
+    },
+    {
+      "name": "card_service_padding_top",
+      "value": "2vp"
+    },
+    {
+      "name": "card_gift_row_padding",
+      "value": "42vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/features/home/src/main/resources/zh_CN/element/string.json b/MultiShoppingPriceComparison/features/home/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..be428e413f848afdbf338d66ca9aaa3b34c804c3
--- /dev/null
+++ b/MultiShoppingPriceComparison/features/home/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,416 @@
+{
+  "string": [
+    {
+      "name": "shared_desc",
+      "value": "description"
+    },
+    {
+      "name": "NAV_ROUTER_LIST1",
+      "value": "手机"
+    },
+    {
+      "name": "NAV_ROUTER_LIST2",
+      "value": "穿戴"
+    },
+    {
+      "name": "NAV_ROUTER_LIST3",
+      "value": "平板"
+    },
+    {
+      "name": "NAV_ROUTER_LIST4",
+      "value": "笔记本"
+    },
+    {
+      "name": "NAV_ROUTER_LIST5",
+      "value": "台显打印"
+    },
+    {
+      "name": "NAV_ROUTER_LIST6",
+      "value": "耳机音响"
+    },
+    {
+      "name": "NAV_ROUTER_LIST7",
+      "value": "智慧屏"
+    },
+    {
+      "name": "NAV_ROUTER_LIST8",
+      "value": "门锁路由"
+    },
+    {
+      "name": "NAV_ROUTER_LIST9",
+      "value": "出行车品"
+    },
+    {
+      "name": "NAV_ROUTER_LIST10",
+      "value": "数码配件"
+    },
+    {
+      "name": "NAV_ROUTER_LIST11",
+      "value": "华为服务"
+    },
+    {
+      "name": "NAV_ROUTER_LIST12",
+      "value": "数字内容"
+    },
+    {
+      "name": "NAV_ROUTER_LIST13",
+      "value": "商用终端"
+    },
+    {
+      "name": "NAV_ROUTER_LIST14",
+      "value": "华为智选"
+    },
+    {
+      "name": "NAV_ROUTER_LIST15",
+      "value": "家用电器"
+    },
+    {
+      "name": "SHOP_TITLE_LIST1",
+      "value": "新品上市"
+    },
+    {
+      "name": "SHOP_TITLE_LIST2",
+      "value": "HUAWEI Mate系列"
+    },
+    {
+      "name": "SHOP_TITLE_LIST3",
+      "value": "HUAWEI P系列"
+    },
+    {
+      "name": "search",
+      "value": "搜索"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST1",
+      "value": "首页"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST2",
+      "value": "分类"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST3",
+      "value": "发现"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST4",
+      "value": "购物袋"
+    },
+    {
+      "name": "FOOTER_TOPIC_LIST5",
+      "value": "我的"
+    },
+    {
+      "name": "TOP_BAR_TEXTS1",
+      "value": "华为"
+    },
+    {
+      "name": "TOP_BAR_TEXTS2",
+      "value": "AITO汽车"
+    },
+    {
+      "name": "TOP_BAR_TEXTS3",
+      "value": "华为智选"
+    },
+    {
+      "name": "TOP_BAR_TEXTS4",
+      "value": "生态周边"
+    },
+    {
+      "name": "searching",
+      "value": "搜索..."
+    },
+    {
+      "name": "GOOD_CATEGORIES1",
+      "value": "智慧办公"
+    },
+    {
+      "name": "GOOD_CATEGORIES3",
+      "value": "华为手机"
+    },
+    {
+      "name": "GOOD_CATEGORIES2",
+      "value": "智慧家居"
+    },
+    {
+      "name": "GOOD_CATEGORIES4",
+      "value": "影音娱乐"
+    },
+    {
+      "name": "GOOD_CATEGORIES5",
+      "value": "运动健康"
+    },
+    {
+      "name": "GOOD_CATEGORIES6",
+      "value": "AITO汽车"
+    },
+    {
+      "name": "GOOD_CATEGORIES7",
+      "value": "华为智选"
+    },
+    {
+      "name": "GOOD_CATEGORIES8",
+      "value": "鸿蒙智联"
+    },
+    {
+      "name": "GOOD_CATEGORIES9",
+      "value": "企业商用"
+    },
+    {
+      "name": "GOOD_CATEGORIES10",
+      "value": "全屋智能"
+    },
+    {
+      "name": "PRICE_UNIT",
+      "value": "起"
+    },
+    {
+      "name": "HOME_TITLES1",
+      "value": "福利专区"
+    },
+    {
+      "name": "HOME_TITLES2",
+      "value": "甄选推荐"
+    },
+    {
+      "name": "HOME_TITLES3",
+      "value": "限时秒杀"
+    },
+    {
+      "name": "BUTTON_TEXTS1",
+      "value": "立即领券"
+    },
+    {
+      "name": "BUTTON_TEXTS2",
+      "value": "立即购买"
+    },
+    {
+      "name": "TIP_TEXTS1",
+      "value": "用券价"
+    },
+    {
+      "name": "TIP_TEXTS2",
+      "value": "更多"
+    },
+    {
+      "name": "TIP_TEXTS3",
+      "value": "新品"
+    },
+    {
+      "name": "SECTION_PRODUCTS_TITLES1",
+      "value": "MateBook X Pro 12代"
+    },
+    {
+      "name": "SECTION_PRODUCTS_TITLES2",
+      "value": "新品"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO1",
+      "value": "北斗卫星消息 | 低电量应急模式"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO2",
+      "value": "144Hz高割全面屏"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO3",
+      "value": "32GB大内存 | 13代酷睿处理器 | 超级终端"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES1",
+      "value": "V1-V5优惠400元/12期免息"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES2",
+      "value": "新一代直屏旗舰机"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES3",
+      "value": "最高省100"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES4",
+      "value": "限时直降300"
+    },
+    {
+      "name": "SECTION_PRODUCTS_FEATURES5",
+      "value": "最高省300"
+    },
+    {
+      "name": "SHOPPING_BAG_TITLES1",
+      "value": "购物袋"
+    },
+    {
+      "name": "SHOPPING_BAG_TITLES2",
+      "value": "管理"
+    },
+    {
+      "name": "SHOPPING_BAG_TITLES3",
+      "value": "华为官方旗舰店"
+    },
+    {
+      "name": "SHOPPING_CARD_FOOT_TITLES1",
+      "value": "全选"
+    },
+    {
+      "name": "SHOPPING_CARD_FOOT_TITLES2",
+      "value": "总计："
+    },
+    {
+      "name": "SHOPPING_CARD_FOOT_TITLES3",
+      "value": "已优惠 ￥1000"
+    },
+    {
+      "name": "SHOPPING_CARD_FOOT_TITLES4",
+      "value": "领券结算(1)"
+    },
+    {
+      "name": "HOME_REVIEW",
+      "value": "2571人评论 95%好评"
+    },
+    {
+      "name": "Hot_Seller",
+      "value": "热品爆款"
+    },
+    {
+      "name": "New_Launch",
+      "value": "新品上市"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO4",
+      "value": "前置6000万超广角镜头"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO5",
+      "value": "2.5K高刷护眼屏 | 轻薄长续航"
+    },
+    {
+      "name": "SECTION_PRODUCTS_INFO6",
+      "value": "超轻薄｜超平整｜超可靠"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES1",
+      "value": "新一代直屏旗舰机"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES2",
+      "value": "赠积分"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES3",
+      "value": "限时享6期免息"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES4",
+      "value": "V1-V5优惠100 | 赠经典耳机"
+    },
+    {
+      "name": "FLASH_SALE_PRODUCT_FEATURES5",
+      "value": "性能版新品预定立省200"
+    },
+    {
+      "name": "PRODUCT_NAME_LIST1",
+      "value": "HUAWEI Mate 50 Pro 256GB 冰霜银（昆仑玻璃）"
+    },
+    {
+      "name": "PRODUCT_NAME_LIST2",
+      "value": "HUAWEI Mate 60 12GB+1TB 雅丹黑（官方标配）"
+    },
+    {
+      "name": "PRODUCT_NAME_LIST3",
+      "value": "【现货速发】HUAWEI Mate X5 12GB+512GB 幻影紫"
+    },
+    {
+      "name": "PRODUCT_TYPE_LIST1",
+      "value": "冰霜银（昆仑玻璃）256GB 官方标配（含充电套装），现货速发"
+    },
+    {
+      "name": "PRODUCT_TYPE_LIS2",
+      "value": "雅丹黑，12GB+1TB，官方标配（含充电套装），可提前预定"
+    },
+    {
+      "name": "PRODUCT_TYPE_LIST3",
+      "value": "幻影紫，512GB+12GB，官方标配（含充电套装），现货速发"
+    },
+    {
+      "name": "PRODUCT_PREFERENTIALList_LIST_MESSAGE1",
+      "value": "0分期利息"
+    },
+    {
+      "name": "PRODUCT_PREFERENTIALList_LIST_MESSAGE2",
+      "value": "限时特惠"
+    },
+    {
+      "name": "PRODUCT_PREFERENTIALList_LIST_MESSAGE3",
+      "value": "新一代直屏旗舰机"
+    },
+    {
+      "name": "PRODUCT_PREFERENTIALList_LIST_MESSAGE4",
+      "value": "赠积分"
+    },
+    {
+      "name": "PRODUCT_PRESENT_LIST_MESSAGE1",
+      "value": "HUAWEI FreeLace 无限耳机 …"
+    },
+    {
+      "name": "PRODUCT_PRESENT_LIST_MESSAGE2",
+      "value": "HUAWEI Mate 60 环闪保护壳（黑色）"
+    },
+    {
+      "name": "PRODUCT_PRESENT_LIST_MESSAGE3",
+      "value": "HUAWEI Mate 50 环闪保护壳（银色）"
+    },
+    {
+      "name": "PRODUCT_SERVICE_LIST_message",
+      "value": "无忧服务"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE1",
+      "value": "商品总价"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE12",
+      "value": "活动优惠"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE2",
+      "value": "优惠券"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE3",
+      "value": "共优惠"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE4",
+      "value": "合计"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE5",
+      "value": "优惠明细"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE6",
+      "value": "实际优惠金额请以下单页面为准"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE7",
+      "value": "配送"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE8",
+      "value": "标注配送"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE9",
+      "value": "电子普通发票-个人"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE10",
+      "value": "【赠品】"
+    },
+    {
+      "name": "PREFERENCE_DETAILS_TITLE_MESSAGE11",
+      "value": "【服务】"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/hvigor/hvigor-config.json5 b/MultiShoppingPriceComparison/hvigor/hvigor-config.json5
new file mode 100644
index 0000000000000000000000000000000000000000..f70ecd4112d94f9aa555adf898d53f18bf58f3e9
--- /dev/null
+++ b/MultiShoppingPriceComparison/hvigor/hvigor-config.json5
@@ -0,0 +1,5 @@
+{
+  "modelVersion": "5.0.0",
+  "dependencies": {
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/oh-package.json5 b/MultiShoppingPriceComparison/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..28d907b195f0457109ec1bc2aaa5bc9959260679
--- /dev/null
+++ b/MultiShoppingPriceComparison/oh-package.json5
@@ -0,0 +1,13 @@
+{
+  "modelVersion": "5.0.0",
+  "license": "",
+  "devDependencies": {
+  },
+  "author": "",
+  "name": "multishoppingpricecomparison",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {}
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/products/phone/build-profile.json5 b/MultiShoppingPriceComparison/products/phone/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..14d5b832c7c04a429ed7da4c443d19c2566a4f25
--- /dev/null
+++ b/MultiShoppingPriceComparison/products/phone/build-profile.json5
@@ -0,0 +1,8 @@
+{
+  "apiType": "stageMode",
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/products/phone/hvigorfile.ts b/MultiShoppingPriceComparison/products/phone/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6edcd90486dd5a853cf7d34c8647f08414ca7a3
--- /dev/null
+++ b/MultiShoppingPriceComparison/products/phone/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { hapTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiShoppingPriceComparison/products/phone/oh-package.json5 b/MultiShoppingPriceComparison/products/phone/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..741122e9fa48e20702dfb3c8cc77c32051885ce6
--- /dev/null
+++ b/MultiShoppingPriceComparison/products/phone/oh-package.json5
@@ -0,0 +1,15 @@
+{
+  "license": "",
+  "devDependencies": {},
+  "author": "",
+  "name": "phone",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/commons": "file:../../commons/base",
+    "@ohos/home": "file:../../features/home",
+    "@ohos/detail": "file:../../features/detail"
+  }
+}
diff --git a/MultiShoppingPriceComparison/products/phone/src/main/ets/entryability/EntryAbility.ets b/MultiShoppingPriceComparison/products/phone/src/main/ets/entryability/EntryAbility.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d0ff09dc03876f6bc104389ab476b07ed8ec2831
--- /dev/null
+++ b/MultiShoppingPriceComparison/products/phone/src/main/ets/entryability/EntryAbility.ets
@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
+import { window } from '@kit.ArkUI';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { CommonConstants, WindowUtil } from '@ohos/commons';
+
+export default class EntryAbility extends UIAbility {
+  private windowObj?: window.Window;
+  private windowUtil?: WindowUtil;
+  private onWindowSizeChange: (windowSize: window.Size) => void = (windowSize: window.Size) => {
+    this.windowUtil?.updateBreakpoint(windowSize.width);
+    AppStorage.setOrCreate('windowWidth', windowSize.width);
+  };
+  private onWindowStatusChange: (windowStatusType: window.WindowStatusType) => void =
+    (windowStatusType: window.WindowStatusType) => {
+      this.windowUtil?.updateWindowStatusType(windowStatusType);
+    };
+
+  onCreate(_want: Want, _launchParam: AbilityConstant.LaunchParam): void {
+    this.windowUtil = WindowUtil.getInstance();
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
+  }
+
+  onDestroy(): void {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
+  }
+
+  async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
+    // Main window is created, set main page for this ability
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+
+    windowStage.getMainWindow().then((data: window.Window) => {
+      this.windowObj = data;
+      this.windowUtil?.updateBreakpoint(this.windowObj.getWindowProperties().windowRect.width);
+      AppStorage.setOrCreate('windowWidth', this.windowObj.getWindowProperties().windowRect.width);
+      this.windowObj.on('windowSizeChange', this.onWindowSizeChange);
+      if (canIUse('SystemCapability.Window.SessionManager')) {
+        this.windowObj.on('windowStatusChange', this.onWindowStatusChange);
+      }
+    })
+    AppStorage.setOrCreate('uiContext', this.context);
+    console.log(JSON.stringify(this.context) + '555555555555')
+
+    if (this.windowUtil !== undefined) {
+      this.windowUtil.setWindowStage(windowStage);
+      await this.windowUtil.setMainWindow();
+      if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[0]) {
+        this.windowUtil.setFullScreen();
+      }
+      this.windowUtil.setAvoidRectHeight();
+    }
+    windowStage.loadContent('pages/Index', (err, data) => {
+      if (err.code) {
+        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+        return;
+      }
+      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
+    });
+  }
+
+  onWindowStageDestroy(): void {
+    // Main window is destroyed, release UI related resources
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+  }
+
+  onForeground(): void {
+    // Ability has brought to foreground
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
+  }
+
+  onBackground(): void {
+    // Ability has back to background
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/products/phone/src/main/ets/pages/Index.ets b/MultiShoppingPriceComparison/products/phone/src/main/ets/pages/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..eb322ec839e619885e7072435a7d1030d23b47ec
--- /dev/null
+++ b/MultiShoppingPriceComparison/products/phone/src/main/ets/pages/Index.ets
@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { window } from '@kit.ArkUI';
+import { CommonConstants, Logger, WindowUtil } from '@ohos/commons/Index';
+import { DetailConstants, ProductHome } from '@ohos/detail/Index';
+import { ProductMoreDetail } from '@ohos/detail/Index';
+import { LiveHome } from '@ohos/detail/Index';
+import { Home } from '@ohos/home/Index';
+import { ClassifyConstants } from '@ohos/home/Index';
+
+@Entry
+@Component
+struct Index {
+  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack();
+  @StorageLink('isSplitMode') isSplitMode: boolean = false;
+  private windowUtil?: WindowUtil;
+  private mainWindow?: window.Window;
+
+  aboutToAppear(): void {
+    if (this.isSplitMode) {
+      this.pageInfos.pushPath({ name: ClassifyConstants.PAGE_INFO_LIST[2] })
+    }
+  }
+
+  aboutToDisappear(): void {
+    if (this.windowUtil === undefined) {
+      return;
+    }
+    this.mainWindow = this.windowUtil.getMainWindow();
+    if (this.mainWindow === undefined) {
+      return;
+    }
+    try {
+      this.mainWindow.off('windowSizeChange');
+      if (canIUse('SystemCapability.Window.SessionManager')) {
+        this.mainWindow.off('windowStatusChange');
+      }
+    } catch (exception) {
+      Logger.error('Failed to unregister the window callback. Code: ' + JSON.stringify(exception));
+    }
+  }
+
+  @Builder
+  PageMap(name: string) {
+    if (name === ClassifyConstants.PAGE_INFO_LIST[0]) {
+      LiveHome()
+    } else if (name === ClassifyConstants.PAGE_INFO_LIST[1]) {
+      ProductMoreDetail()
+    } else {
+      ProductHome()
+    }
+  }
+
+  build() {
+    Navigation(this.pageInfos) {
+      Home()
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .height(CommonConstants.FULL_PERCENT)
+    .navDestination(this.PageMap)
+    .mode(NavigationMode.Stack)
+    .id(DetailConstants.NAVIGATION_ID)
+    .hideTitleBar(true)
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/products/phone/src/main/ets/secondability/SecondAbility.ets b/MultiShoppingPriceComparison/products/phone/src/main/ets/secondability/SecondAbility.ets
new file mode 100644
index 0000000000000000000000000000000000000000..fb4de71c22c5d3bcc7abb390c7b0841935076ec2
--- /dev/null
+++ b/MultiShoppingPriceComparison/products/phone/src/main/ets/secondability/SecondAbility.ets
@@ -0,0 +1,111 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { display, window } from '@kit.ArkUI';
+import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { CommonConstants, Logger, WindowUtil } from '@ohos/commons/Index';
+
+export default class SecondAbility extends UIAbility {
+  private windowObj?: window.Window;
+  private windowUtil?: WindowUtil;
+  private mainWindow?: window.Window;
+  private onWindowSizeChange: (windowSize: window.Size) => void = (windowSize: window.Size) => {
+    this.windowUtil?.updateBreakpoint(windowSize.width);
+    AppStorage.setOrCreate('windowWidth', windowSize.width);
+  };
+  private onFoldStatusChange: (foldStatus: display.FoldStatus) => void = (foldStatus: display.FoldStatus) => {
+    if (canIUse('SystemCapability.Window.SessionManager')) {
+      let isSplitMode: boolean | undefined = AppStorage.get('isSplitMode');
+      if (foldStatus === display.FoldStatus.FOLD_STATUS_FOLDED && isSplitMode) {
+        this.context.terminateSelf();
+      }
+    }
+  };
+
+  onCreate(_want: Want, _launchParam: AbilityConstant.LaunchParam): void {
+    this.windowUtil = WindowUtil.getSecondInstance();
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
+  }
+
+  onDestroy(): void {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
+    if (canIUse('SystemCapability.Window.SessionManager')) {
+      display.off('foldStatusChange');
+    }
+    if (this.windowUtil === undefined) {
+      return;
+    }
+    this.mainWindow = this.windowUtil.getMainWindow();
+    if (this.mainWindow === undefined) {
+      return;
+    }
+    try {
+      this.mainWindow.off('windowSizeChange');
+    } catch (exception) {
+      Logger.error('Failed to unregister the window callback. Code: ' + JSON.stringify(exception));
+    }
+  }
+
+  async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
+    // Main window is created, set main page for this ability
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+
+    windowStage.getMainWindow().then((data: window.Window) => {
+      this.windowObj = data;
+      this.windowUtil?.updateBreakpoint(this.windowObj.getWindowProperties().windowRect.width);
+      AppStorage.setOrCreate('windowWidth', this.windowObj.getWindowProperties().windowRect.width);
+      this.windowObj.on('windowSizeChange', this.onWindowSizeChange);
+    })
+    if (canIUse('SystemCapability.Window.SessionManager')) {
+      display.on(`foldStatusChange`, this.onFoldStatusChange);
+    }
+    AppStorage.setOrCreate('uiContext', this.context);
+    if (this.windowUtil !== undefined) {
+      this.windowUtil.setWindowStage(windowStage);
+      await this.windowUtil.setMainWindow();
+      if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[0]) {
+        this.windowUtil.setFullScreen();
+      }
+      if (!AppStorage.get('topRectHeight')) {
+        this.windowUtil.setAvoidRectHeight();
+      }
+    }
+
+    windowStage.loadContent('pages/Index', (err, data) => {
+      if (err.code) {
+        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+        return;
+      }
+      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
+    });
+  }
+
+  onWindowStageDestroy(): void {
+    // Main window is destroyed, release UI related resources
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+  }
+
+  onForeground(): void {
+    // Ability has brought to foreground
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
+  }
+
+  onBackground(): void {
+    // Ability has back to background
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/products/phone/src/main/module.json5 b/MultiShoppingPriceComparison/products/phone/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..4df7da0736ca40ba14338bbd5bb3237e34c03f8b
--- /dev/null
+++ b/MultiShoppingPriceComparison/products/phone/src/main/module.json5
@@ -0,0 +1,53 @@
+{
+  "module": {
+    "name": "phone",
+    "type": "entry",
+    "description": "$string:module_desc",
+    "mainElement": "EntryAbility",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ],
+    "deliveryWithInstall": true,
+    "installationFree": false,
+    "pages": "$profile:main_pages",
+    "abilities": [
+      {
+        "name": "EntryAbility",
+        "srcEntry": "./ets/entryability/EntryAbility.ets",
+        "description": "$string:EntryAbility_desc",
+        "icon": "$media:icon",
+        "label": "$string:EntryAbility_label",
+        "startWindowIcon": "$media:startIcon",
+        "startWindowBackground": "$color:start_window_background",
+        "exported": true,
+        "minWindowWidth": 360,
+        "minWindowHeight": 600,
+        "launchType": "singleton",
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ]
+      },
+      {
+        "name": "SecondAbility",
+        "srcEntry": "./ets/secondability/SecondAbility.ets",
+        "description": "$string:SecondAbility_desc",
+        "icon": "$media:icon",
+        "label": "$string:SecondAbility_label",
+        "startWindowIcon": "$media:startIcon",
+        "startWindowBackground": "$color:start_window_background",
+        "minWindowWidth": 360,
+        "minWindowHeight": 600,
+        "launchType": "singleton"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/products/phone/src/main/resources/base/element/color.json b/MultiShoppingPriceComparison/products/phone/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..3c712962da3c2751c2b9ddb53559afcbd2b54a02
--- /dev/null
+++ b/MultiShoppingPriceComparison/products/phone/src/main/resources/base/element/color.json
@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/products/phone/src/main/resources/base/element/string.json b/MultiShoppingPriceComparison/products/phone/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..0210e391afb6d49db9e8d320dfbdf3f56aec4de4
--- /dev/null
+++ b/MultiShoppingPriceComparison/products/phone/src/main/resources/base/element/string.json
@@ -0,0 +1,24 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "Multi Shopping Price Comparison"
+    },
+    {
+      "name": "SecondAbility_desc",
+      "value": "Split Screen - Offering Details"
+    },
+    {
+      "name": "SecondAbility_label",
+      "value": "Split Screen - Offering Details"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/products/phone/src/main/resources/base/media/icon.png b/MultiShoppingPriceComparison/products/phone/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd45accb1dfd2fd0da16c732c72faa6e46b26521
Binary files /dev/null and b/MultiShoppingPriceComparison/products/phone/src/main/resources/base/media/icon.png differ
diff --git a/MultiShoppingPriceComparison/products/phone/src/main/resources/base/media/startIcon.png b/MultiShoppingPriceComparison/products/phone/src/main/resources/base/media/startIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..366f76459ffd4494ec40d0ddd5c59385b9c5da11
Binary files /dev/null and b/MultiShoppingPriceComparison/products/phone/src/main/resources/base/media/startIcon.png differ
diff --git a/MultiShoppingPriceComparison/products/phone/src/main/resources/base/profile/main_pages.json b/MultiShoppingPriceComparison/products/phone/src/main/resources/base/profile/main_pages.json
new file mode 100644
index 0000000000000000000000000000000000000000..1898d94f58d6128ab712be2c68acc7c98e9ab9ce
--- /dev/null
+++ b/MultiShoppingPriceComparison/products/phone/src/main/resources/base/profile/main_pages.json
@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/Index"
+  ]
+}
diff --git a/MultiShoppingPriceComparison/products/phone/src/main/resources/en_US/element/string.json b/MultiShoppingPriceComparison/products/phone/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..0210e391afb6d49db9e8d320dfbdf3f56aec4de4
--- /dev/null
+++ b/MultiShoppingPriceComparison/products/phone/src/main/resources/en_US/element/string.json
@@ -0,0 +1,24 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "Multi Shopping Price Comparison"
+    },
+    {
+      "name": "SecondAbility_desc",
+      "value": "Split Screen - Offering Details"
+    },
+    {
+      "name": "SecondAbility_label",
+      "value": "Split Screen - Offering Details"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/products/phone/src/main/resources/zh_CN/element/string.json b/MultiShoppingPriceComparison/products/phone/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..b8c558049acf2794659bedca6e0f1bc74ffa3ca7
--- /dev/null
+++ b/MultiShoppingPriceComparison/products/phone/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,24 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "一多开发实例-购物比价"
+    },
+    {
+      "name": "SecondAbility_desc",
+      "value": "分屏-商品详情"
+    },
+    {
+      "name": "SecondAbility_label",
+      "value": "分屏-商品详情"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiShoppingPriceComparison/screenshots/device/foldable.en.png b/MultiShoppingPriceComparison/screenshots/device/foldable.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b94a3754ddd43e1d4bd2fc0a89ac643b68d426e
Binary files /dev/null and b/MultiShoppingPriceComparison/screenshots/device/foldable.en.png differ
diff --git a/MultiShoppingPriceComparison/screenshots/device/foldable.png b/MultiShoppingPriceComparison/screenshots/device/foldable.png
new file mode 100644
index 0000000000000000000000000000000000000000..115dff5dec6d064ebf5c484b652d68fb8b86a8ff
Binary files /dev/null and b/MultiShoppingPriceComparison/screenshots/device/foldable.png differ
diff --git a/MultiShoppingPriceComparison/screenshots/device/phone.en.png b/MultiShoppingPriceComparison/screenshots/device/phone.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..43788a0a78cb6a25aed837d039ec18a8d71277f6
Binary files /dev/null and b/MultiShoppingPriceComparison/screenshots/device/phone.en.png differ
diff --git a/MultiShoppingPriceComparison/screenshots/device/phone.png b/MultiShoppingPriceComparison/screenshots/device/phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5d1288e8853e7dd87e0f7023710c76315d18a63
Binary files /dev/null and b/MultiShoppingPriceComparison/screenshots/device/phone.png differ
diff --git a/MultiShoppingPriceComparison/screenshots/device/tablet.en.png b/MultiShoppingPriceComparison/screenshots/device/tablet.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b60026bd99b5050ea73233f30e81e4739f487c4
Binary files /dev/null and b/MultiShoppingPriceComparison/screenshots/device/tablet.en.png differ
diff --git a/MultiShoppingPriceComparison/screenshots/device/tablet.png b/MultiShoppingPriceComparison/screenshots/device/tablet.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd121b6beedfa608e0739bdb6b8349e5164883a3
Binary files /dev/null and b/MultiShoppingPriceComparison/screenshots/device/tablet.png differ
diff --git a/MultiVideoApplication/AppScope/app.json5 b/MultiVideoApplication/AppScope/app.json5
new file mode 100644
index 0000000000000000000000000000000000000000..d83b0ce7bce053e0f9e68362a113ef75c12f6a58
--- /dev/null
+++ b/MultiVideoApplication/AppScope/app.json5
@@ -0,0 +1,10 @@
+{
+  "app": {
+    "bundleName": "com.huawei.videoapplication",
+    "vendor": "example",
+    "versionCode": 1000000,
+    "versionName": "1.0.0",
+    "icon": "$media:layered_image",
+    "label": "$string:app_name"
+  }
+}
diff --git a/MultiVideoApplication/AppScope/resources/base/element/string.json b/MultiVideoApplication/AppScope/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..6cad906ce541f191caab019640a63c6229aba330
--- /dev/null
+++ b/MultiVideoApplication/AppScope/resources/base/element/string.json
@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "MultiVideoApplication"
+    }
+  ]
+}
diff --git a/MultiVideoApplication/AppScope/resources/base/media/app_icon.png b/MultiVideoApplication/AppScope/resources/base/media/app_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/MultiVideoApplication/AppScope/resources/base/media/app_icon.png differ
diff --git a/MultiVideoApplication/AppScope/resources/base/media/background.png b/MultiVideoApplication/AppScope/resources/base/media/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..923f2b3f27e915d6871871deea0420eb45ce102f
Binary files /dev/null and b/MultiVideoApplication/AppScope/resources/base/media/background.png differ
diff --git a/MultiVideoApplication/AppScope/resources/base/media/foreground.png b/MultiVideoApplication/AppScope/resources/base/media/foreground.png
new file mode 100644
index 0000000000000000000000000000000000000000..97014d3e10e5ff511409c378cd4255713aecd85f
Binary files /dev/null and b/MultiVideoApplication/AppScope/resources/base/media/foreground.png differ
diff --git a/MultiVideoApplication/AppScope/resources/base/media/layered_image.json b/MultiVideoApplication/AppScope/resources/base/media/layered_image.json
new file mode 100644
index 0000000000000000000000000000000000000000..fb49920440fb4d246c82f9ada275e26123a2136a
--- /dev/null
+++ b/MultiVideoApplication/AppScope/resources/base/media/layered_image.json
@@ -0,0 +1,7 @@
+{
+  "layered-image":
+  {
+    "background" : "$media:background",
+    "foreground" : "$media:foreground"
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/LICENSE b/MultiVideoApplication/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..0210352ae2ade0dd7b4c841cb6e8ba08b4780038
--- /dev/null
+++ b/MultiVideoApplication/LICENSE
@@ -0,0 +1,78 @@
+   Copyright (c) 2023 Huawei Device Co., Ltd. All rights reserved.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+Apache License, Version 2.0
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+
+"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License.
+
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License.
+
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution.
+
+You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+1.You must give any other recipients of the Work or Derivative Works a copy of this License; and
+2.You must cause any modified files to carry prominent notices stating that You changed the files; and
+3.You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
+4.If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions.
+
+Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+
+6. Trademarks.
+
+This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty.
+
+Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability.
+
+In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability.
+
+While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
\ No newline at end of file
diff --git a/MultiVideoApplication/README.en.md b/MultiVideoApplication/README.en.md
new file mode 100644
index 0000000000000000000000000000000000000000..6327e3fd8940d82b0af836cbef1b49422b776aac
--- /dev/null
+++ b/MultiVideoApplication/README.en.md
@@ -0,0 +1,48 @@
+# Long Video
+
+### Introduction
+
+This codelab implements a short video app based on the adaptive layout and responsive layout, achieving one-time development for multi-device deployment. It uses the three-layer project architecture for code reuse and tailors the pages to different device sizes such as mobile phones, foldable phones, tablets, and PC/2-in-1 devices.
+
+The figure shows the effect on the mobile phone:
+
+![](screenshots/device/phone_EN.png)
+
+The figure shows the effect on the foldable phone:
+
+![](screenshots/device/foldable_EN.jpg)
+
+The figure shows the effect on the tablet and PC/2-in-1 device:
+
+![](screenshots/device/tablet_EN.png)
+
+### Concepts
+
+- One-time development for multi-device deployment: You only need to develop and release one set of project code and then deploy it on multiple devices as demanded. This feature enables you to efficiently develop applications that are compatible with multiple devices while providing distributed user experiences for cross-device transferring, migration, and collaboration.
+- Adaptive layout: When the size of an external container changes, elements can automatically change based on the relative relationship to adapt to the external container. Relative relationships include the proportion, fixed aspect ratio, and display priority.
+- Responsive layout: When the size of an external container changes, elements can automatically change based on the breakpoints, grids, or specific features (such as the screen direction and window width and height) to adapt to the external container.
+- GridRow: A container that is used in a grid layout, together with its child component **GridCol**.
+- GridCol: A container that must be used as a child component of the **GridRow** container.
+- Using the AVPlayer for audio playback: The AVPlayer can be used to play raw media assets in an end-to-end manner.
+
+### Permissions
+
+N/A.
+
+### How to Use
+
+1. Install and open an app on a mobile phone, foldable phone, or tablet. The responsive layout and adaptive layout are used to display different effects on the app pages over different devices.
+2. Swipe up or down the home page content and swipe left or right banners and icon lists.
+3. Touch and hold the first image in the recommended video area to preview the video. Right-click the recommended video area and a menu is displayed. Hover the mouse pointer over the recommended video area to zoom in the image. Pinch two fingers to zoom in or out the video area on a PC/2-in-1 device or foldable phone.
+4. Switch to the community tab on the top to view the immersive design of the home page. Switch to the video tab on the top to view the innovative layout of the banner images on a PC/2-in-1 device.
+5. Click the search box on the top to display the search page. Enter "Hua" in the search box and the intelligent prompt page is displayed. Click "Huawei launch event" in the intelligent prompts. The search result page is displayed. Click the Play button in the search result. The video details page is displayed.
+6. By default, the video is played on the video details page. Click the video to play or pause it, and click or drag the progress bar to seek to the playback position.
+7. When you swipe up on a phone or foldable phone, the related list is hidden, the video is zoomed out proportionally, and the comment area is swiped. When you swipe up on a PC/2-in-1 device, the video is zoomed out proportionally and the introduction area is swiped. Click the full-screen button in the video area to access the full-screen playback page.
+8. Play a video in full-screen mode and click the Play/Pause button to play or pause the video. Click the episode selection button. The episode selection toolbar is displayed.
+
+### Constraints
+
+1. The sample app is supported only on Huawei phones running the standard system.
+2. HarmonyOS: HarmonyOS 5.0.0 Release or later
+3. DevEco Studio: DevEco Studio 5.0.0 Release or later
+4. HarmonyOS SDK: HarmonyOS 5.0.0 Release SDK or later
diff --git a/MultiVideoApplication/README.md b/MultiVideoApplication/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..609ab1ca2c8453039b2165eb5d5e060ae7c7ef6e
--- /dev/null
+++ b/MultiVideoApplication/README.md
@@ -0,0 +1,48 @@
+# 一多开发实例-长视频
+
+### 简介
+
+本篇Codelab基于自适应布局和响应式布局，实现一次开发，多端部署的长视频页面。通过“三层工程架构”实现代码复用，并根据手机、折叠屏、平板以及PC/2in1不同的设备尺寸实现对应页面。
+
+手机运行效果图如下：
+
+![](screenshots/device/phone.png)
+
+折叠屏运行效果图如下：
+
+![](screenshots/device/foldable.png)
+
+平板、PC/2in1运行效果图如下：
+
+![](screenshots/device/tablet.png)
+
+### 相关概念
+
+- 一次开发，多端部署：一套代码工程，一次开发上架，多端按需部署。支撑开发者高效的开发支持多种终端设备形态的应用，实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验。
+- 自适应布局：当外部容器大小发生变化时，元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。
+- 响应式布局：当外部容器大小发生变化时，元素可以根据断点、栅格或特定的特征（如屏幕方向、窗口宽高等）自动变化以适应外部容器变化的布局能力。
+- GridRow：栅格容器组件，仅可以和栅格子组件（GridCol）在栅格布局场景中使用。
+- GridCol：栅格子组件，必须作为栅格容器组件（GridRow）的子组件使用。
+- 使用AVPlayer开发音频播放：使用AVPlayer可以实现端到端播放原始媒体资源。
+
+### 相关权限
+
+不涉及。
+
+### 使用说明
+
+1. 分别在手机、折叠屏、平板安装并打开应用，不同设备的应用页面通过响应式布局和自适应布局呈现不同的效果。
+2. 首页内容，支持上下滑动，Banner左右滑动，图标列表左右滑动。
+3. 长按推荐视频区域的第一张图片，能够预览视频。鼠标右键点击推荐视频区域，弹出菜单。鼠标悬停在推荐视频区域，图片放大。PC/2in1和折叠屏设备，两指捏合推荐视频区能够缩放或放大。
+4. 切换顶部的社区tab，查看首页的沉浸式设计。PC/2in1设备，切换顶部的视频tab，查看Banner图的创新排版。
+5. 点击顶部的搜索框，展示搜索页内容。 搜索框输入“华”，出现智能提示页面。点击智能提示中的“华为发布会”，出现搜索结果页面。点击搜索结果中的播放按钮，进入视频详情页。
+6. 视频详情页默认播放视频，点击视频进行播放/暂停，点击/拖动进度条能够跳转播放。
+7. 手机/折叠屏上滑时，相关列表先隐藏，视频再等比缩小，然后滑动评论区；PC/2in1上滑时，视频等比缩小，然后滑动简介区。点击视频区域的全屏按钮，进入全屏播放页。
+8. 全屏播放视频，点击播放/暂停按钮，控制视频播放/暂停。点击选集按钮，显示选集工具栏。
+
+### 约束与限制
+
+1. 本示例仅支持标准系统上运行，支持设备：华为手机。
+2. HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。
+3. DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。
+4. HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。
diff --git a/MultiVideoApplication/build-profile.json5 b/MultiVideoApplication/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..822b9737ebba8cbb0917779d8aee251ef502aad9
--- /dev/null
+++ b/MultiVideoApplication/build-profile.json5
@@ -0,0 +1,83 @@
+{
+  "app": {
+    "signingConfigs": [],
+    "products": [
+      {
+        "name": "default",
+        "signingConfig": "default",
+        "compatibleSdkVersion": "5.0.0(12)",
+        "runtimeOS": "HarmonyOS"
+      }
+    ],
+    "buildModeSet": [
+      {
+        "name": "debug"
+      },
+      {
+        "name": "release"
+      }
+    ]
+  },
+  "modules": [
+    {
+      "name": "phone",
+      "srcPath": "./products/phone",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "home",
+      "srcPath": "./features/home",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "search",
+      "srcPath": "./features/search",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "videoDetail",
+      "srcPath": "./features/videoDetail",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "base",
+      "srcPath": "./commons/base",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/commons/base/Index.ets b/MultiVideoApplication/commons/base/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..07abac6905bccb771f74e699693e36c9969f09d7
--- /dev/null
+++ b/MultiVideoApplication/commons/base/Index.ets
@@ -0,0 +1,9 @@
+export { BreakpointConstants } from './src/main/ets/constants/BreakpointConstants';
+export { CommonConstants } from './src/main/ets/constants/CommonConstants';
+export { BreakpointType } from './src/main/ets/utils/BreakpointType';
+export { WindowUtil } from './src/main/ets/utils/WindowUtil';
+export { AvPlayerUtil } from './src/main/ets/utils/AvPlayerUtil';
+export { DisplayUtil } from './src/main/ets/utils/DisplayUtil';
+export { DeviceScreen } from './src/main/ets/utils/DeviceScreen';
+export { VideoNavPathStack } from './src/main/ets/utils/VideoNavPathStack';
+export { default as Logger } from './src//main/ets/utils/Logger';
\ No newline at end of file
diff --git a/MultiVideoApplication/commons/base/build-profile.json5 b/MultiVideoApplication/commons/base/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..3167e54d1ff3a0aaa0cdcf4319789de8e3f3c350
--- /dev/null
+++ b/MultiVideoApplication/commons/base/build-profile.json5
@@ -0,0 +1,10 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+  },
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/commons/base/hvigorfile.ts b/MultiVideoApplication/commons/base/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiVideoApplication/commons/base/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiVideoApplication/commons/base/oh-package.json5 b/MultiVideoApplication/commons/base/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..c764a93a96ab677a53c95087b3858bd0524e4e76
--- /dev/null
+++ b/MultiVideoApplication/commons/base/oh-package.json5
@@ -0,0 +1,11 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "base",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {}
+}
diff --git a/MultiVideoApplication/commons/base/src/main/ets/constants/BreakpointConstants.ets b/MultiVideoApplication/commons/base/src/main/ets/constants/BreakpointConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..8727d8f517dd24955fc96825c36d9f72bb3b8a4d
--- /dev/null
+++ b/MultiVideoApplication/commons/base/src/main/ets/constants/BreakpointConstants.ets
@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Constants for breakpoint.
+ */
+export class BreakpointConstants {
+  /**
+   * Breakpoints that represent small device types.
+   */
+  static readonly BREAKPOINT_SM: string = 'sm';
+
+  /**
+   * Breakpoints that represent middle device types.
+   */
+  static readonly BREAKPOINT_MD: string = 'md';
+
+  /**
+   * Breakpoints that represent large device types.
+   */
+  static readonly BREAKPOINT_LG: string = 'lg';
+
+  /**
+   * Grid row column list.
+   */
+  static readonly GRID_ROW_COLUMNS: number[] = [12, 15, 4];
+
+  /**
+   * Grid column span list.
+   */
+  static readonly GRID_COLUMN_SPANS: number[] = [12, 6, 7, 5, 3, 4, 2];
+
+  /**
+   * Breakpoint ranges.
+   */
+  static readonly BREAKPOINT_RANGES: number[] = [320, 600, 840];
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/commons/base/src/main/ets/constants/CommonConstants.ets b/MultiVideoApplication/commons/base/src/main/ets/constants/CommonConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..8e29116ccee0f65c4eb8688da37fb0c3b72b1dab
--- /dev/null
+++ b/MultiVideoApplication/commons/base/src/main/ets/constants/CommonConstants.ets
@@ -0,0 +1,240 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Common constants for all features.
+ */
+export class CommonConstants {
+  /**
+   * Idle state of avPlayer.
+   */
+  static readonly AV_PLAYER_IDLE_STATE: string = 'idle';
+
+  /**
+   * Initialized state of avPlayer.
+   */
+  static readonly AV_PLAYER_INITIALIZED_STATE: string = 'initialized';
+
+  /**
+   * Prepared state of avPlayer.
+   */
+  static readonly AV_PLAYER_PREPARED_STATE: string = 'prepared';
+
+  /**
+   * Playing state of avPlayer.
+   */
+  static readonly AV_PLAYER_PLAYING_STATE: string = 'playing';
+
+  /**
+   * Pause state of avPlayer.
+   */
+  static readonly AV_PLAYER_PAUSED_STATE: string = 'paused';
+
+  /**
+   * Completed state of avPlayer.
+   */
+  static readonly AV_PLAYER_COMPLETED_STATE: string = 'completed';
+
+  /**
+   * Stopped state of avPlayer.
+   */
+  static readonly AV_PLAYER_STOPPED_STATE: string = 'stopped';
+
+  /**
+   * Release state of avPlayer.
+   */
+  static readonly AV_PLAYER_RELEASE_STATE: string = 'released';
+
+  /**
+   * Error state of avPlayer.
+   */
+  static readonly AV_PLAYER_ERROR_STATE: string = 'error';
+
+  /**
+   * Product video name.
+   */
+  static readonly PRODUCT_VIDEO_NAME: string = 'product.mp4';
+
+  /**
+   * Update time of av player.
+   */
+  static readonly AV_PLAYER_UPDATE_TIME: string = 'updateTime';
+
+  /**
+   * Current time of av player.
+   */
+  static readonly AV_PLAYER_CURRENT_TIME: string = 'currentTime';
+
+  /**
+   * Total time of av player.
+   */
+  static readonly AV_PLAYER_TOTAL_TIME: string = 'totalTime';
+
+  /**
+   * Progress of av player.
+   */
+  static readonly AV_PLAYER_PROGRESS: string = 'progress';
+
+  /**
+   * Initial time.
+   */
+  static readonly INITIAL_TIME: string = '00:00:00';
+
+  /**
+   * List space.
+   */
+  static readonly LIST_SPACE: string = '12vp';
+
+  /**
+   * Video grid column list.
+   */
+  static readonly VIDEO_GRID_COLUMNS: string[] = ['1fr 1fr', '1fr 1fr 1fr', '1fr 1fr 1fr 1fr', '1fr 1fr 1fr 1fr 1fr',
+    '1fr 1fr 1fr 1fr 1fr 1fr 1fr'];
+
+  /**
+   * colon.
+   */
+  static readonly COLON: string = ':';
+
+  /**
+   * Time prefix.
+   */
+  static readonly TIME_PREFIX: string = '0';
+
+  /**
+   * Empty time.
+   */
+  static readonly EMPTY_TIME: string = '00';
+
+  /**
+   * Window util.
+   */
+  static readonly WINDOW_UTIL: string = 'windowUtil';
+
+  /**
+   * Full percent.
+   */
+  static readonly FULL_PERCENT: string = '100%';
+
+  /**
+   * One hundred for progress.
+   */
+  static readonly PROGRESS_HUNDRED: number = 100;
+
+  /**
+   * One thousand for progress.
+   */
+  static readonly PROGRESS_THOUSAND: number = 1000;
+
+  /**
+   * Second in hour.
+   */
+  static readonly SECOND_IN_HOUR: number = 3600;
+
+  /**
+   * Second in minute.
+   */
+  static readonly SECOND_IN_MINUTE: number = 60;
+
+  /**
+   * Zero.
+   */
+  static readonly ZERO: number = 0;
+
+  /**
+   * One.
+   */
+  static readonly ONE: number = 1;
+
+  /**
+   * Three.
+   */
+  static readonly THREE: number = 3;
+
+  /**
+   * FOUR.
+   */
+  static readonly FOUR: number = 4;
+
+  /**
+   * Ten.
+   */
+  static readonly TEN: number = 10;
+
+  /**
+   *  Constant for screen dpi.
+   */
+  static readonly SCREEN_DPI_CONSTANT: number = 160;
+
+  /**
+   * Font weight 500.
+   */
+  static readonly FONT_WEIGHT_500: number = 500;
+
+  /**
+   * Font weight 700.
+   */
+  static readonly FONT_WEIGHT_700: number = 700;
+
+  /**
+   * Text opacity.
+   */
+  static readonly TEXT_OPACITY: number[] = [0.4, 0.5, 0.6, 1, 0.8];
+
+  /**
+   * Divider opacity.
+   */
+  static readonly DIVIDER_OPACITY: number = 0.05;
+
+  /**
+   * X component surface width.
+   */
+  static readonly X_COMPONENT_SURFACE_WIDTH: number = 1920;
+
+  /**
+   * X component surface height.
+   */
+  static readonly X_COMPONENT_SURFACE_HEIGHT: number = 1080;
+
+  /**
+   * Video aspect ratio.
+   */
+  static readonly VIDEO_ASPECT_RATIO: number = 1.78;
+
+  /**
+   * Previous one row aspect ratio.
+   */
+  static readonly PREVIOUS_ONE_ROW_RATIO: number = 1.56;
+
+  /**
+   * Default window width.
+   */
+  static readonly DEFAULT_WINDOW_WIDTH: number = 320;
+
+  /**
+   * Device types.
+   */
+  static readonly DEVICE_TYPE: string = '2in1';
+
+  /**
+   * Margin of window floating.
+   */
+  static readonly WINDOW_FLOATING_MARGIN: number = 5.2;
+
+  /**
+   * Page names.
+   */
+  static readonly PAGE_NAMES: string[] = ['home', 'videoDetail'];
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/commons/base/src/main/ets/utils/AvPlayerUtil.ets b/MultiVideoApplication/commons/base/src/main/ets/utils/AvPlayerUtil.ets
new file mode 100644
index 0000000000000000000000000000000000000000..bbbe6f116d8cda1234cb4103aaa79979ab5ccc0c
--- /dev/null
+++ b/MultiVideoApplication/commons/base/src/main/ets/utils/AvPlayerUtil.ets
@@ -0,0 +1,226 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { media } from '@kit.MediaKit';
+import { common } from '@kit.AbilityKit';
+import { resourceManager } from '@kit.LocalizationKit';
+import { BusinessError } from '@kit.BasicServicesKit';
+import Logger from './Logger';
+import { CommonConstants } from '../constants/CommonConstants';
+
+export class AvPlayerUtil {
+  private avPlayer?: media.AVPlayer;
+  private context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
+  private url: resourceManager.RawFileDescriptor | null = null;
+  private surfaceId: string = '';
+  private sliderBegin: number = 0;
+  private isMoving: boolean = false;
+  private onError: (err: BusinessError) => void = (err: BusinessError) => {
+    Logger.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
+    this.avPlayer?.reset();
+  };
+  private onTimeUpdateFunction: (updateTime: number) => void = (updateTime: number) => {
+    AppStorage.setOrCreate<string>(CommonConstants.AV_PLAYER_CURRENT_TIME, this.formatTime(updateTime));
+    AppStorage.setOrCreate<number>(CommonConstants.AV_PLAYER_UPDATE_TIME, updateTime);
+    AppStorage.setOrCreate<number>(CommonConstants.AV_PLAYER_PROGRESS, updateTime / this.avPlayer!.duration *
+      CommonConstants.PROGRESS_HUNDRED);
+  };
+  private onStateChange: (state: media.AVPlayerState) => void = async (state: media.AVPlayerState) => {
+    if (this.avPlayer === undefined) {
+      Logger.error(`AvPlayer is undefined`);
+      return;
+    }
+    switch (state) {
+      case CommonConstants.AV_PLAYER_IDLE_STATE:
+        this.url = await this.context.resourceManager.getRawFd(CommonConstants.PRODUCT_VIDEO_NAME);
+        this.avPlayer.fdSrc = this.url;
+        Logger.info('AVPlayer state idle called.');
+        break;
+      case CommonConstants.AV_PLAYER_INITIALIZED_STATE:
+        Logger.info('AVPlayer initialized called.');
+        this.avPlayer.surfaceId = this.surfaceId;
+        this.avPlayer.prepare().then(() => {
+          Logger.info('AVPlayer prepare succeeded.');
+        }, (err: BusinessError) => {
+          Logger.error(`Invoke prepare failed, code is ${err.code}, message is ${err.message}`);
+          this.avPlayer!.reset();
+        });
+        break;
+      case CommonConstants.AV_PLAYER_PREPARED_STATE:
+        this.avPlayer.videoScaleType = media.VideoScaleType.VIDEO_SCALE_TYPE_FIT;
+        Logger.info('AVPlayer state prepared called.');
+        this.avPlayer.play();
+        AppStorage.setOrCreate<string>(CommonConstants.AV_PLAYER_TOTAL_TIME, this.formatTime(this.avPlayer.duration));
+        break;
+      case CommonConstants.AV_PLAYER_PLAYING_STATE:
+        Logger.info('AVPlayer state playing called.');
+        AppStorage.setOrCreate('avplayerState', this.avPlayer.state);
+        break;
+      case CommonConstants.AV_PLAYER_PAUSED_STATE:
+        Logger.info('AVPlayer state paused called.');
+        AppStorage.setOrCreate('avplayerState', this.avPlayer.state);
+        break;
+      case CommonConstants.AV_PLAYER_COMPLETED_STATE:
+        Logger.info('AVPlayer state completed called.');
+        AppStorage.setOrCreate('avplayerState', this.avPlayer.state);
+        this.avPlayer.stop();
+        break;
+      case CommonConstants.AV_PLAYER_STOPPED_STATE:
+        Logger.info('AVPlayer state stopped called.');
+        break;
+      case CommonConstants.AV_PLAYER_RELEASE_STATE:
+        Logger.info('AVPlayer state released called.');
+        break;
+      case CommonConstants.AV_PLAYER_ERROR_STATE:
+        Logger.error('AVPlayer state error called.');
+        break;
+      default:
+        Logger.info('AVPlayer state unknown called.');
+        break;
+    }
+  };
+
+  static getInstance(): AvPlayerUtil | undefined {
+    if (!AppStorage.get<AvPlayerUtil>('avPlayerUtil')) {
+      AppStorage.setOrCreate('avPlayerUtil', new AvPlayerUtil());
+    } else {
+      Logger.info(`AppStorage does not have avPlayerUtil`);
+    }
+    return AppStorage.get<AvPlayerUtil>('avPlayerUtil');
+  }
+
+  async createAvPlayer(surfaceId: string): Promise<void> {
+    if (!this.avPlayer || this.avPlayer.state === CommonConstants.AV_PLAYER_RELEASE_STATE) {
+      this.avPlayer = await media.createAVPlayer();
+      this.surfaceId = surfaceId;
+      Logger.info('Created AvPlayer successfully.');
+      // Entering idle state.
+      this.url = await this.context.resourceManager.getRawFd(CommonConstants.PRODUCT_VIDEO_NAME);
+      this.avPlayer.fdSrc = this.url;
+      this.setAVPlayerCallback();
+    } else {
+      Logger.info(`AvPlayer has been created`);
+    }
+  }
+
+  setAVPlayerCallback(): void {
+    this.avPlayer?.on('error', this.onError);
+    this.onTimeUpdate();
+    this.setStateChange();
+  }
+
+  onTimeUpdate(): void {
+    this.avPlayer?.on('timeUpdate', this.onTimeUpdateFunction);
+  }
+
+  offTimeUpdate(): void {
+    try {
+      this.avPlayer?.off('timeUpdate');
+    } catch (exception) {
+      Logger.error('Failed to unregister callback. Code: ' + JSON.stringify(exception));
+    }
+  }
+
+  setStateChange(): void {
+    this.avPlayer?.on('stateChange', this.onStateChange);
+  }
+
+  release(): void {
+    if (this.avPlayer && this.avPlayer.state !== CommonConstants.AV_PLAYER_RELEASE_STATE) {
+      try {
+        this.avPlayer.off('error');
+        this.avPlayer.off('stateChange');
+      } catch (exception) {
+        Logger.error('Failed to unregister callback. Code: ' + JSON.stringify(exception));
+      }
+      this.avPlayer.release();
+    } else {
+      Logger.info(`AvPlayer release failed`);
+    }
+  }
+
+  sliderChange(value: number, mode: SliderChangeMode): void {
+    let seekType: media.SeekMode = value > this.sliderBegin ? media.SeekMode.SEEK_PREV_SYNC :
+      media.SeekMode.SEEK_NEXT_SYNC;
+    switch (mode) {
+      case SliderChangeMode.Begin:
+        Logger.info(`AvPlayer SliderChangeMode Begin`);
+        this.sliderBegin = value;
+        this.avPlayer?.pause();
+        break;
+      case SliderChangeMode.Moving:
+        Logger.info(`AvPlayer SliderChangeMode Moving`);
+        this.isMoving = true;
+        break;
+      case SliderChangeMode.End:
+        Logger.info(`AvPlayer SliderChangeMode End`);
+        if (this.isMoving) {
+          this.avPlayer?.seek(value / CommonConstants.PROGRESS_HUNDRED * this.avPlayer.duration, seekType);
+          this.isMoving = false;
+        }
+        this.avPlayer?.play();
+        break;
+      case SliderChangeMode.Click:
+        Logger.info(`AvPlayer SliderChangeMode Click`);
+        this.avPlayer?.seek(this.sliderBegin / CommonConstants.PROGRESS_HUNDRED * this.avPlayer.duration, seekType);
+        break;
+      default:
+        break;
+    }
+  }
+
+  playerStateControl(): void {
+    if (this.avPlayer?.state === CommonConstants.AV_PLAYER_STOPPED_STATE) {
+      this.avPlayer.prepare();
+    } else if (this.avPlayer?.state === CommonConstants.AV_PLAYER_PAUSED_STATE) {
+      this.avPlayer.play();
+    } else if (this.avPlayer?.state === CommonConstants.AV_PLAYER_PLAYING_STATE) {
+      this.avPlayer.pause();
+    }
+  }
+
+  fastForward(): void {
+    if (this.avPlayer?.state === CommonConstants.AV_PLAYER_PLAYING_STATE || this.avPlayer?.state ===
+      CommonConstants.AV_PLAYER_PAUSED_STATE) {
+      this.avPlayer.seek(this.avPlayer.currentTime + 5000);
+    }
+  }
+
+  rewind(): void {
+    if (this.avPlayer?.state === CommonConstants.AV_PLAYER_PLAYING_STATE || this.avPlayer?.state ===
+      CommonConstants.AV_PLAYER_PAUSED_STATE) {
+      this.avPlayer.seek(this.avPlayer.currentTime - 5000);
+    }
+  }
+
+  formatTime(duration: number): string {
+    let totalSecond: number = Math.round(duration / CommonConstants.PROGRESS_THOUSAND);
+    let hourNum: number = Math.floor(totalSecond / CommonConstants.SECOND_IN_HOUR);
+    let minNum: number = Math.floor((totalSecond % CommonConstants.SECOND_IN_HOUR) / CommonConstants.SECOND_IN_MINUTE);
+    let secNum: number = (totalSecond % CommonConstants.SECOND_IN_HOUR) % CommonConstants.SECOND_IN_MINUTE;
+    return this.formatUnitTime(hourNum) + CommonConstants.COLON + this.formatUnitTime(minNum) + CommonConstants.COLON +
+      this.formatUnitTime(secNum);
+  }
+
+  formatUnitTime(time: number): string {
+    if (time >= CommonConstants.ONE && time < CommonConstants.TEN) {
+      let zero: string = CommonConstants.TIME_PREFIX;
+      return zero.concat(time.toString());
+    } else if (time >= CommonConstants.ZERO && time < CommonConstants.ONE) {
+      return CommonConstants.EMPTY_TIME;
+    }
+    return time.toString();
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/commons/base/src/main/ets/utils/BreakpointType.ets b/MultiVideoApplication/commons/base/src/main/ets/utils/BreakpointType.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ddaf75215a3602bba462784575b57871386d141b
--- /dev/null
+++ b/MultiVideoApplication/commons/base/src/main/ets/utils/BreakpointType.ets
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants } from '../constants/BreakpointConstants';
+// [Start breakpoint_type]
+export class BreakpointType<T> {
+  sm: T;
+  md: T;
+  lg: T;
+
+  constructor(sm: T, md: T, lg: T) {
+    this.sm = sm;
+    this.md = md;
+    this.lg = lg;
+  }
+
+  getValue(currentWidthBreakpoint: string): T {
+    if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      return this.md;
+    }
+    if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      return this.lg;
+    } else {
+      return this.sm;
+    }
+  }
+}
+// [End breakpoint_type]
\ No newline at end of file
diff --git a/MultiVideoApplication/commons/base/src/main/ets/utils/DeviceScreen.ets b/MultiVideoApplication/commons/base/src/main/ets/utils/DeviceScreen.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1b5a27b4757534febd89f5d09cc71703f31ee326
--- /dev/null
+++ b/MultiVideoApplication/commons/base/src/main/ets/utils/DeviceScreen.ets
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { display } from '@kit.ArkUI';
+import { CommonConstants } from '../constants/CommonConstants';
+
+export class DeviceScreen {
+  /**
+   * Get the screen height.
+   *
+   * @returns screen height.
+   */
+  public static getDeviceHeight(): number {
+    let displayObject = display.getDefaultDisplaySync();
+    let screenPixelHeight = displayObject.height;
+    let screenDensityDPI = displayObject.densityDPI;
+    return screenPixelHeight * (CommonConstants.SCREEN_DPI_CONSTANT / screenDensityDPI);
+  }
+
+  /**
+   * Get the screen width.
+   *
+   * @returns screen width.
+   */
+  public static getDeviceWidth(): number {
+    let displayObject = display.getDefaultDisplaySync();
+    let screenPixelWidth = displayObject.width;
+    let screenDensityDPI = displayObject.densityDPI;
+    return screenPixelWidth * (CommonConstants.SCREEN_DPI_CONSTANT / screenDensityDPI);
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/commons/base/src/main/ets/utils/DisplayUtil.ets b/MultiVideoApplication/commons/base/src/main/ets/utils/DisplayUtil.ets
new file mode 100644
index 0000000000000000000000000000000000000000..c9eaa7589eb1bdcf1a25e77b32f0575025fa93b0
--- /dev/null
+++ b/MultiVideoApplication/commons/base/src/main/ets/utils/DisplayUtil.ets
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { display } from '@kit.ArkUI';
+// [Start display_util]
+export class DisplayUtil {
+  static getFoldCreaseRegion(): void {
+    if(canIUse('SystemCapability.Window.SessionManager')) {
+      if (display.isFoldable()) {
+        let foldRegion: display.FoldCreaseRegion = display.getCurrentFoldCreaseRegion();
+        let rect: display.Rect = foldRegion.creaseRects[0];
+        // Height of the avoidance area in the upper half screen and height of the avoidance area.
+        let creaseRegion: number[] = [px2vp(rect.top), px2vp(rect.height)];
+        AppStorage.setOrCreate('creaseRegion', creaseRegion);
+      }
+    }
+  }
+}
+// [End display_util]
\ No newline at end of file
diff --git a/MultiVideoApplication/commons/base/src/main/ets/utils/Logger.ets b/MultiVideoApplication/commons/base/src/main/ets/utils/Logger.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4801a0b95063322e58bf6076f3fe5c7f30894f30
--- /dev/null
+++ b/MultiVideoApplication/commons/base/src/main/ets/utils/Logger.ets
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { hilog } from '@kit.PerformanceAnalysisKit';
+
+class Logger {
+  private domain: number;
+  private prefix: string;
+  private format: string = '%{public}s, %{public}s';
+
+  /**
+   * constructor.
+   *
+   * @param Prefix Identifies the log tag.
+   * @param domain Domain Indicates the service domain, which is a hexadecimal integer ranging from 0x0 to 0xFFFFF.
+   */
+  constructor(prefix: string) {
+    this.prefix = prefix;
+    this.domain = 0xFF00;
+  }
+
+  debug(...args: string[]): void {
+    hilog.debug(this.domain, this.prefix, this.format, args);
+  }
+
+  info(...args: string[]): void {
+    hilog.info(this.domain, this.prefix, this.format, args);
+  }
+
+  warn(...args: string[]): void {
+    hilog.warn(this.domain, this.prefix, this.format, args);
+  }
+
+  error(...args: string[]): void {
+    hilog.error(this.domain, this.prefix, this.format, args);
+  }
+}
+
+export default new Logger('VideoApplication');
\ No newline at end of file
diff --git a/MultiVideoApplication/commons/base/src/main/ets/utils/VideoNavPathStack.ets b/MultiVideoApplication/commons/base/src/main/ets/utils/VideoNavPathStack.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6ceb4d36cb3f8abc17bf981768a05a6192e241e8
--- /dev/null
+++ b/MultiVideoApplication/commons/base/src/main/ets/utils/VideoNavPathStack.ets
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { CommonConstants } from '../constants/CommonConstants';
+
+export class VideoNavPathStack extends NavPathStack {
+  private pageName: string = CommonConstants.PAGE_NAMES[0];
+
+  setPageName(name: string): void {
+    this.pageName = name;
+  }
+
+  getPageName(): string {
+    return this.pageName;
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/commons/base/src/main/ets/utils/WindowUtil.ets b/MultiVideoApplication/commons/base/src/main/ets/utils/WindowUtil.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3cc8b2dc65c9d1cf716a3868cab7260d61ea12b1
--- /dev/null
+++ b/MultiVideoApplication/commons/base/src/main/ets/utils/WindowUtil.ets
@@ -0,0 +1,182 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BusinessError, deviceInfo } from '@kit.BasicServicesKit';
+import { display, window } from '@kit.ArkUI';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { CommonConstants } from '../constants/CommonConstants';
+
+@Observed
+export class WindowUtil {
+  private windowStage?: window.WindowStage;
+  private mainWindowClass?: window.Window;
+
+  static getInstance(): WindowUtil | undefined {
+    if (!AppStorage.get<WindowUtil>(CommonConstants.WINDOW_UTIL)) {
+      AppStorage.setOrCreate(CommonConstants.WINDOW_UTIL, new WindowUtil());
+    } else {
+      hilog.info(0x0000, 'testTag', '%{public}s', `AppStorage does not have windowUtil.`);
+    }
+    return AppStorage.get<WindowUtil>(CommonConstants.WINDOW_UTIL);
+  }
+
+  setWindowStage(windowStage: window.WindowStage): void {
+    this.windowStage = windowStage;
+    this.windowStage.getMainWindow((err, windowClass: window.Window) => {
+      this.mainWindowClass = windowClass;
+      if (err.code) {
+        hilog.error(0x0000, 'testTag', `Failed to obtain the main window. Code:${err.code}, message:${err.message}`,
+          JSON.stringify(err) ?? '');
+        return;
+      }
+    });
+  }
+
+  setMainWindowOrientation(orientation: window.Orientation): void {
+    // Setting orientation.
+    this.mainWindowClass!.setPreferredOrientation(orientation)
+      .then(() => {
+        hilog.info(0x0000, 'testTag', '%{public}s', `Succeed in setting the orientation.`);
+      })
+      .catch((err: BusinessError) => {
+        hilog.error(0x0000, 'testTag', `Failed to set the orientation. Code: ${err.code}, message: ${err.message}`,
+          JSON.stringify(err) ?? '');
+      });
+  }
+
+  disableWindowSystemBar(): void {
+    // Set the status bar and navigation bar to be invisible in full-screen mode.
+    this.mainWindowClass!.setWindowSystemBarEnable([])
+      .then(() => {
+        hilog.info(0x0000, 'testTag', '%{public}s', `Succeed in setting the window system bar disable.`);
+      })
+      .catch((err: BusinessError) => {
+        hilog.error(0x0000, 'testTag',
+          `Failed to set the window system bar disable. Code: ${err.code}, message: ${err.message}`,
+          JSON.stringify(err) ?? '');
+      });
+  }
+
+  enableWindowSystemBar(): void {
+    this.mainWindowClass!.setWindowSystemBarEnable(['status', 'navigation'])
+      .then(() => {
+        hilog.info(0x0000, 'testTag', '%{public}s', `Succeed in setting the window system bar enable.`);
+      })
+      .catch((err: BusinessError) => {
+        hilog.error(0x0000, 'testTag', `Failed to set the orientation. Code: ${err.code}, message: ${err.message}`,
+          JSON.stringify(err) ?? '');
+      });
+  }
+
+  setFullScreen(): void {
+    // Set full-screen display.
+    this.mainWindowClass!.setWindowLayoutFullScreen(true)
+      .then(() => {
+        hilog.info(0x0000, 'testTag', '%{public}s', `Succeed in setting the window layout full screen.`);
+      })
+      .catch((err: BusinessError) => {
+        hilog.error(0x0000, 'testTag',
+          `Failed to set the window layout full screen. Code: ${err.code}, message: ${err.message}`,
+          JSON.stringify(err) ?? '');
+      });
+  }
+
+  maximize(): void {
+    if(canIUse('SystemCapability.Window.SessionManager')){
+      if (this.mainWindowClass!.getWindowStatus() === window.WindowStatusType.FLOATING) {
+        this.mainWindowClass!.maximize()
+          .then(() => {
+            hilog.info(0x0000, 'testTag', '%{public}s', `Succeed in maximizing the window.`);
+          })
+          .catch((err: BusinessError) => {
+            hilog.error(0x0000, 'testTag', `Failed to maximize the window. Code: ${err.code}, message: ${err.message}`,
+              JSON.stringify(err) ?? '');
+          });
+      }
+    }
+  }
+
+  recover(): void {
+    if(canIUse('SystemCapability.Window.SessionManager')){
+      if (this.mainWindowClass!.getWindowStatus() === window.WindowStatusType.FULL_SCREEN) {
+        this.mainWindowClass!.recover()
+          .then(() => {
+            hilog.info(0x0000, 'testTag', '%{public}s', `Succeed in rovering the window.`);
+          })
+          .catch((err: BusinessError) => {
+            hilog.error(0x0000, 'testTag', `Failed to rover the window. Code: ${err.code}, message: ${err.message}`,
+              JSON.stringify(err) ?? '');
+          });
+      }
+    }
+  }
+
+  getMainWindow(): window.Window | undefined {
+    return this.mainWindowClass;
+  }
+
+  offWindowSizeChange(): void {
+    try {
+      this.mainWindowClass!.off('windowSizeChange');
+    } catch (err) {
+      hilog.error(0x0000, 'testTag', `Failed to off window size change. Code: ${err.code}, message: ${err.message}`,
+        JSON.stringify(err) ?? '');
+    }
+  }
+  // [Start update_width_bp]
+  updateWidthBp(): void {
+    let mainWindow: window.WindowProperties = this.mainWindowClass!.getWindowProperties();
+    let windowWidth: number = mainWindow.windowRect.width;
+    let windowWidthVp = windowWidth / (display.getDefaultDisplaySync().densityDPI / 160);
+    if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPE) {
+      windowWidthVp -= 2 * CommonConstants.WINDOW_FLOATING_MARGIN;
+    }
+    let widthBp: string = '';
+    let videoGridColumn: string = CommonConstants.VIDEO_GRID_COLUMNS[0];
+    if (windowWidthVp < 320) {
+      widthBp = 'xs';
+      videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[0];
+    } else if (windowWidthVp >= 320 && windowWidthVp < 600) {
+      widthBp = 'sm';
+      videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[0];
+    } else if (windowWidthVp >= 600 && windowWidthVp < 840) {
+      widthBp = 'md';
+      videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[1];
+    } else {
+      widthBp = 'lg';
+      videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[2];
+    }
+    AppStorage.setOrCreate('currentWidthBreakpoint', widthBp);
+    AppStorage.setOrCreate('videoGridColumn', videoGridColumn);
+  }
+  // [End update_width_bp]
+  updateHeightBp(): void {
+    let mainWindow: window.WindowProperties = this.mainWindowClass!.getWindowProperties();
+    let windowHeight: number = mainWindow.windowRect.height;
+    let windowWidth: number = mainWindow.windowRect.width;
+    let windowWidthVp = windowWidth / (display.getDefaultDisplaySync().densityDPI / 160);
+    let windowHeightVp = windowHeight / (display.getDefaultDisplaySync().densityDPI / 160);
+    let heightBp: string = '';
+    let aspectRatio: number = windowHeightVp / windowWidthVp;
+    if (aspectRatio < 0.8) {
+      heightBp = 'sm';
+    } else if (aspectRatio >= 0.8 && aspectRatio < 1.2) {
+      heightBp = 'md';
+    } else {
+      heightBp = 'lg';
+    }
+    AppStorage.setOrCreate('currentHeightBreakpoint', heightBp);
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/commons/base/src/main/module.json5 b/MultiVideoApplication/commons/base/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..5b88767e30950571337935f398f2dcbf4d1b822d
--- /dev/null
+++ b/MultiVideoApplication/commons/base/src/main/module.json5
@@ -0,0 +1,11 @@
+{
+  "module": {
+    "name": "base",
+    "type": "har",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/Index.ets b/MultiVideoApplication/features/home/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..7434a219ce671f411211ca842ebc7d866addfe88
--- /dev/null
+++ b/MultiVideoApplication/features/home/Index.ets
@@ -0,0 +1 @@
+export { Home } from './src/main/ets/view/Home';
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/build-profile.json5 b/MultiVideoApplication/features/home/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..3167e54d1ff3a0aaa0cdcf4319789de8e3f3c350
--- /dev/null
+++ b/MultiVideoApplication/features/home/build-profile.json5
@@ -0,0 +1,10 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+  },
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/hvigorfile.ts b/MultiVideoApplication/features/home/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiVideoApplication/features/home/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiVideoApplication/features/home/oh-package.json5 b/MultiVideoApplication/features/home/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..d1e6d05327c28f34e9d1893bb722b83e88b20462
--- /dev/null
+++ b/MultiVideoApplication/features/home/oh-package.json5
@@ -0,0 +1,14 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "home",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/search": "file:../search",
+    "@ohos/commons": "file:../../commons/base"
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/constants/HomeConstants.ets b/MultiVideoApplication/features/home/src/main/ets/constants/HomeConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..44ae6863fff64eb8a2e8686362f51d177773aba4
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/constants/HomeConstants.ets
@@ -0,0 +1,338 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class HomeConstants {
+  /**
+   * Top tab topics.
+   */
+  static readonly TOP_TOPIC_LIST: ResourceStr[] =
+    [$r('app.string.sift'), $r('app.string.video'), $r('app.string.community'), $r('app.string.news'),
+      $r('app.string.shop'), $r('app.string.science'), $r('app.string.finance'), $r('app.string.history'),
+      $r('app.string.affairs')];
+  /**
+   * Icon list.
+   */
+  static readonly ICON_LIST: ResourceStr[] =
+    [$r('app.string.all'), $r('app.string.heat_list'), $r('app.string.free'), $r('app.string.sutra'),
+      $r('app.string.prefecture'), $r('app.string.kids_only'), $r('app.string.zone'), $r('app.string.Premium_products'),
+      $r('app.string.Fitness')];
+  /**
+   * Banner text 1.
+   */
+  static readonly BANNER_TEXT_1: ResourceStr[] = ['HUAWEI ', 'Mate Book ', $r('app.string.new')];
+  /**
+   * Banner text 2.
+   */
+  static readonly BANNER_TEXT_2: ResourceStr[] = ['HUAWEI ', '', $r('app.string.new')];
+  /**
+   * Banner text 3.
+   */
+  static readonly BANNER_TEXT_3: ResourceStr[] = ['HUAWEI P60 ', '', $r('app.string.new')];
+  /**
+   * Banner text 4.
+   */
+  static readonly BANNER_TEXT_4: ResourceStr[] = ['HUAWEI P50', '', $r('app.string.new')];
+  /**
+   * Video grid rate list.
+   */
+  static readonly VIDEO_GRID_RATES: string[] = ['7.8', '8.0', '7.9', '8.4', '7.8', '8.0', '7.9', '8.4', '7.6', '8.0'];
+  /**
+   * Video grid name list.
+   */
+  static readonly VIDEO_GRID_NAMES: ResourceStr[] =
+    [$r('app.string.cultural'), $r('app.string.cultural'), $r('app.string.cultural'), $r('app.string.cultural'),
+      $r('app.string.cultural'),
+      $r('app.string.cultural'), $r('app.string.cultural'), $r('app.string.cultural'), $r('app.string.cultural'),
+      $r('app.string.cultural')];
+  /**
+   * Video grid content list.
+   */
+  static readonly VIDEO_GRID_CONTENTS: ResourceStr[] = [$r('app.string.europe'),
+    $r('app.string.europe'), $r('app.string.europe'),
+    $r('app.string.europe'), $r('app.string.europe'),
+    $r('app.string.europe'), $r('app.string.europe'),
+    $r('app.string.europe'), $r('app.string.europe'), $r('app.string.europe')];
+  /**
+   * New video grid rate list.
+   */
+  static readonly NEW_VIDEO_RATES: string[] = ['', '', '7.9', '7.9', '7.9', '7.9', '7.9'];
+  /**
+   * New video name list.
+   */
+  static readonly NEW_VIDEO_NAMES: ResourceStr[] =
+    ['HUAWEI Mate30 ...', $r('app.string.life'), $r('app.string.life'), $r('app.string.life'),
+      $r('app.string.life'), $r('app.string.life'), $r('app.string.life')];
+  /**
+   * New video content list.
+   */
+  static readonly NEW_VIDEO_CONTENTS: ResourceStr[] =
+    [$r('app.string.landscape'), $r('app.string.landscape'), $r('app.string.landscape'),
+      $r('app.string.landscape'), $r('app.string.landscape'), $r('app.string.landscape'), $r('app.string.landscape')];
+  /**
+   * Main daily video rate.
+   */
+  static readonly MAIN_DAILY_VIDEO_RATE: string = '8.4';
+  /**
+   * Main daily video name.
+   */
+  static readonly MAIN_DAILY_VIDEO_NAME: ResourceStr = $r('app.string.explore');
+  /**
+   * Main daily video content.
+   */
+  static readonly MAIN_DAILY_VIDEO_CONTENT: ResourceStr = $r('app.string.source');
+  /**
+   * Main daily video more info.
+   */
+  static readonly MAIN_DAILY_VIDEO_MORE: ResourceStr = $r('app.string.source');
+  /**
+   * Daily video rate list.
+   */
+  static readonly DAILY_VIDEO_RATES: string[] = ['8.4', '8.4', '8.4', '8.4'];
+  /**
+   * Daily video name list.
+   */
+  static readonly DAILY_VIDEO_NAMES: ResourceStr[] =
+    [$r('app.string.lonely'), $r('app.string.lonely'), $r('app.string.lonely'), $r('app.string.lonely')];
+  /**
+   * Daily video name list.
+   */
+  static readonly DAILY_VIDEO_CONTENTS: ResourceStr[] = [$r('app.string.source'), $r('app.string.source'),
+    $r('app.string.source'), $r('app.string.source')];
+  /**
+   * Previous video name list one.
+   */
+  static readonly PREVIOUS_VIDEO_NAMES_ONE: ResourceStr[] = [$r('app.string.life'), $r('app.string.life'),
+    $r('app.string.life')];
+  /**
+   * Previous video content list one.
+   */
+  static readonly PREVIOUS_VIDEO_CONTENTS_ONE: ResourceStr[] = [$r('app.string.film'), $r('app.string.film'),
+    $r('app.string.film')];
+  /**
+   * Previous video more info list one.
+   */
+  static readonly PREVIOUS_VIDEO_MORE_ONE: ResourceStr[] =
+    [$r('app.string.plays'), $r('app.string.plays'), $r('app.string.plays')];
+  /**
+   * Previous video name list two.
+   */
+  static readonly PREVIOUS_VIDEO_NAMES_TWO: ResourceStr[] =
+    [$r('app.string.life'), $r('app.string.life'), $r('app.string.life'),
+      $r('app.string.life'), $r('app.string.life'), $r('app.string.life')];
+  /**
+   * Previous video content list two.
+   */
+  static readonly PREVIOUS_VIDEO_CONTENTS_TWO: ResourceStr[] = [$r('app.string.europe'), $r('app.string.europe'),
+    $r('app.string.europe'), $r('app.string.europe'), $r('app.string.europe'), $r('app.string.europe')];
+  /**
+   * Banner text letter space list.
+   */
+  static readonly BANNER_TEXT_LETTER_SPACES: string[] = ['2vp', '3vp', '1vp'];
+  /**
+   * Swiper item space.
+   */
+  static readonly SWIPER_ITEM_SPACE: string = '12vp';
+  /**
+   * Banner row space.
+   */
+  static readonly BANNER_ROW_SPACE: string = '12vp';
+  /**
+   * Home sub title list.
+   */
+  static readonly HOME_SUB_TITLES: ResourceStr[] =
+    [$r('app.string.release'), $r('app.string.tablet'), $r('app.string.back')];
+  /**
+   * New video rows template.
+   */
+  static readonly NEW_VIDEO_ROWS_TEMPLATE: string = '1fr';
+  /**
+   * Main daily video button text.
+   */
+  static readonly HOME_BUTTON_TEXT: ResourceStr[] =
+    [$r('app.string.follow'), $r('app.string.play_on'), $r('app.string.player'), $r('app.string.cache')];
+  /**
+   * Previous two list translate position.
+   */
+  static readonly PREVIOUS_TWO_TRANSLATE_MD: string = '-42vp';
+  /**
+   * Search placeholder.
+   */
+  static readonly SEARCH_PLACEHOLDER: ResourceStr = $r('app.string.search');
+  /**
+   * Video dialog option list.
+   */
+  static readonly VIDEO_DIALOG_OPTIONS: ResourceStr[] = [$r('app.string.binge_watch'), $r('app.string.Collect'), $r('app.string.like')];
+  /**
+   * Side bar icon list height.
+   */
+  static readonly SIDE_ICON_LIST_HEIGHT: string = '25%';
+  /**
+   * Square brackets.
+   */
+  static readonly SQUARE_BRACKETS: string[] = ['[', ']'];
+  /**
+   * Height unit.
+   */
+  static readonly HEIGHT_UNIT: string = 'vp';
+  /**
+   * Two.
+   */
+  static readonly TWO: number = 2;
+  /**
+   * Five.
+   */
+  static readonly FIVE: number = 5;
+  /**
+   * Six.
+   */
+  static readonly SIX: number = 6;
+  /**
+   * Seven.
+   */
+  static readonly SEVEN: number = 7;
+  /**
+   * Eight.
+   */
+  static readonly EIGHT: number = 8;
+  /**
+   * Video dialog height list.
+   */
+  static readonly VIDEO_DIALOG_HEIGHTS: number[] = [161, 268, 347];
+  /**
+   * Video dialog aspect ratio.
+   */
+  static readonly VIDEO_DIALOG_ASPECT_RATIO: number = 1.74;
+  /**
+   * New banner aspect ratio.
+   */
+  static readonly NEW_BANNER_ASPECT_RATIO: number = 1.5;
+  /**
+   * Home header background change height.
+   */
+  static readonly BACKGROUND_CHANGE_HEIGHT: number[] = [27, 34, 56];
+  /**
+   * Video grid item space.
+   */
+  static readonly VIDEO_GRID_ITEM_SPACE: number = 12;
+  /**
+   * Video grid margin.
+   */
+  static readonly VIDEO_GRID_MARGIN: number[] = [32, 48, 64];
+  /**
+   * Number of displayed icons.
+   */
+  static readonly DISPLAYED_ICON_NUMBER: number[] = [9, 13, 17];
+  /**
+   * Lg sidebar width.
+   */
+  static readonly LG_SIDEBAR_WIDTH: number = 96;
+  /**
+   * Video grid description height.
+   */
+  static readonly VIDEO_GRID_DESCRIPTION_HEIGHT: number = 120;
+  /**
+   * New video aspect ratio.
+   */
+  static readonly NEW_VIDEO_ASPECT_RATIO: number = 0.72;
+  /**
+   * New video description height.
+   */
+  static readonly NEW_VIDEO_DESCRIPTION_HEIGHT: number = 71;
+  /**
+   * Daily video description height.
+   */
+  static readonly DAILY_VIDEO_DESCRIPTION_HEIGHT: number[] = [103, 88, 115, 62];
+  /**
+   * Previous two ratio list.
+   */
+  static readonly PREVIOUS_TWO_RATIOS: number[] = [0.76, 0.89, 0.86, 0.74, 0.8, 0.9, 0.83];
+  /**
+   * Banner aspect ratio list.
+   */
+  static readonly BANNER_RATIOS: number[] = [1.49, 1.6, 2.1];
+  /**
+   * Home header height for sm.
+   */
+  static readonly HOME_HEADER_HEIGHT_SM: number = 112;
+  /**
+   * Window undefined top.
+   */
+  static readonly WINDOW_UNDEFINED_TOP: number = 39;
+  /**
+   * Window undefined left.
+   */
+  static readonly WINDOW_UNDEFINED_LEFT: number = 5;
+  /**
+   * Eleven.
+   */
+  static readonly ELEVEN: number = 11;
+  /**
+   * Banner text 1 left position for md.
+   */
+  static readonly BANNER_TEXT_1_LEFT_MD: string = '8%';
+  /**
+   * Banner text 2 left position for md.
+   */
+  static readonly BANNER_TEXT_2_LEFT_MD: string = '8%';
+  /**
+   * Banner text 2 left position for lg.
+   */
+  static readonly BANNER_TEXT_2_LEFT_LG: string = '5%';
+  /**
+   * Banner text 1 top position for sm.
+   */
+  static readonly BANNER_TEXT_1_TOP_SM: string[] = ['15%', '2vp'];
+  /**
+   * Banner text 1 top position for md.
+   */
+  static readonly BANNER_TEXT_1_TOP_MD: string[] = ['8%', '4vp'];
+  /**
+   * Banner text 1 top position for lg.
+   */
+  static readonly BANNER_TEXT_1_TOP_LG: string[] = ['5%', '2vp'];
+  /**
+   * Banner text 2 top position for sm.
+   */
+  static readonly BANNER_TEXT_2_TOP_SM: string[] = ['15%', '2vp'];
+  /**
+   * Banner text 2 top position for md.
+   */
+  static readonly BANNER_TEXT_2_TOP_MD: string[] = ['10%', '4vp'];
+  /**
+   * Banner text 2 top position for lg.
+   */
+  static readonly BANNER_TEXT_2_TOP_LG: string[] = ['10%', '8vp'];
+  /**
+   * Video detail url.
+   */
+  static readonly VIDEO_DETAIL_URL: string = '@bundle:com.huawei.videoapplication/videoDetail/ets/pages/Index';
+  /**
+   * Direction list.
+   */
+  static readonly DIRECTION_LIST: string[] = ['BottomTabs', 'TopTabs', 'Banner', 'IconList', 'RecommendedVideo',
+    'NewRelease', 'DailyVideoOne', 'DailyVideoTwo', 'PreviousVideo'];
+  /**
+   * Percent 105.
+   */
+  static readonly PERCENT_HUNDRED_AND_FIVE: string = '105%';
+  /**
+   * Animation duration.
+   */
+  static readonly ANIMATION_DURATION: number = 500;
+  /**
+   * Item width of IconView.
+   */
+  static readonly ICONVIEW_ITEM_WIDTH: number[] = [40, 43, 45];
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/utils/PreviousVideoUtil.ets b/MultiVideoApplication/features/home/src/main/ets/utils/PreviousVideoUtil.ets
new file mode 100644
index 0000000000000000000000000000000000000000..0c82b70e97134f1d64c13c838edb1b95537c62e6
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/utils/PreviousVideoUtil.ets
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+
+export class PreviousVideoUtil {
+  static getImgAspectRatio(currentWidthBreakpoint: string, index: number): number {
+    if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+      switch (index) {
+        case 2:
+          return HomeConstants.PREVIOUS_TWO_RATIOS[0];
+        case 3:
+          return HomeConstants.PREVIOUS_TWO_RATIOS[1];
+        default:
+          return HomeConstants.PREVIOUS_TWO_RATIOS[2];
+      }
+    } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      switch (index) {
+        case 2:
+          return HomeConstants.PREVIOUS_TWO_RATIOS[3];
+        case 3:
+          return HomeConstants.PREVIOUS_TWO_RATIOS[2];
+        case 4:
+          return HomeConstants.PREVIOUS_TWO_RATIOS[4];
+        case 5:
+          return HomeConstants.PREVIOUS_TWO_RATIOS[5];
+        default:
+          return HomeConstants.PREVIOUS_TWO_RATIOS[6];
+      }
+    } else {
+      switch (index) {
+        case 2:
+          return HomeConstants.PREVIOUS_TWO_RATIOS[3];
+        case 3:
+          return HomeConstants.PREVIOUS_TWO_RATIOS[2];
+        case 4:
+          return HomeConstants.PREVIOUS_TWO_RATIOS[4];
+        default:
+          return HomeConstants.PREVIOUS_TWO_RATIOS[6];
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/view/BannerView.ets b/MultiVideoApplication/features/home/src/main/ets/view/BannerView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..caa54e3f3b9befb1de13c6592d84c184338bd1bf
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/view/BannerView.ets
@@ -0,0 +1,363 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { BreakpointType } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { Banner, BannerViewModel } from '../viewmodel/BannerViewModel';
+import { getTabIndex } from './CommonView';
+
+class BannerDataSource implements IDataSource {
+  private bannerImgList: Banner[] = [];
+
+  constructor(bannerImgList: Banner[]) {
+    this.bannerImgList = bannerImgList;
+  }
+
+  totalCount(): number {
+    return this.bannerImgList.length;
+  }
+
+  getData(index: number): Banner {
+    return this.bannerImgList[index];
+  }
+
+  registerDataChangeListener(listener: DataChangeListener): void {
+  }
+
+  unregisterDataChangeListener() {
+  }
+}
+
+@Component
+export struct BannerView {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('windowWidth') windowWidth: number = 0;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  private bannerImgList: Banner[] = new BannerViewModel().getBannerList();
+  private bannerDataSource: BannerDataSource = new BannerDataSource([]);
+
+  aboutToAppear(): void {
+    this.bannerDataSource = new BannerDataSource(this.bannerImgList);
+  }
+
+  build() {
+    Column() {
+      // Banner layout.
+      Row() {
+        // [Start banner_iew]
+        Swiper() {
+          LazyForEach(this.bannerDataSource, (item: Banner, index: number) => {
+            // [StartExclude banner_view]
+            Stack() {
+              Image(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? item.getBannerImg().getImgSrcSm() :
+                item.getBannerImg().getImgSrc())
+                .objectFit(ImageFit.Fill)
+                .borderRadius($r('app.float.banner_img_border_radius'))
+                .height(CommonConstants.FULL_PERCENT)
+                .width(CommonConstants.FULL_PERCENT)
+                .focusable(true)
+                .zIndex(1)
+
+              Column() {
+                Text(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+                  `${item.getDescription().getDescription()[0]}${item.getDescription().getDescription()[1]}` :
+                  item.getDescription().getDescription()[0])
+                  .fontSize(item.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0])
+                  .fontWeight(item.getDescription().getFontWeight()[0])
+                  .lineHeight(item.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0])
+                  .fontColor(Color.White)
+                  .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2])
+                  .maxLines(1)
+
+                Text(item.getDescription().getDescription()[1])
+                  .fontSize(item.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0])
+                  .fontWeight(item.getDescription().getFontWeight()[0])
+                  .lineHeight(item.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0])
+                  .fontColor(Color.White)
+                  .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2])
+                  .maxLines(1)
+                  .visibility(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+                  Visibility.None : Visibility.Visible)
+
+                Text(item.getDescription().getDescription()[2])
+                  .fontSize(item.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[1])
+                  .fontWeight(item.getDescription().getFontWeight()[1])
+                  .lineHeight(item.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[1])
+                  .fontColor(Color.White)
+                  .margin({
+                    top: item.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[1]
+                  })
+                  .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[1])
+                  .maxLines(1)
+              }
+              .padding({
+                left: !item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+                  item.getDescription().getLeftPosition().getValue(this.currentWidthBreakpoint)[0] : '0',
+                top: !item.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ?
+                  item.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[0] : '0'
+              })
+              .alignItems(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+                HorizontalAlign.Center : HorizontalAlign.Start)
+              .justifyContent(!item.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ?
+                FlexAlign.Start : FlexAlign.Center)
+              .height(CommonConstants.FULL_PERCENT)
+              .width(CommonConstants.FULL_PERCENT)
+              .zIndex(2)
+            }
+            // [EndExclude banner_view]
+            .height(item.getBannerImg().getHeight().getValue(this.currentWidthBreakpoint))
+            .width(CommonConstants.FULL_PERCENT)
+            // The width and height vary with the container assembly and the aspect ratio remains unchanged.
+            .aspectRatio(new BreakpointType(HomeConstants.BANNER_RATIOS[0], HomeConstants.BANNER_RATIOS[1],
+              HomeConstants.BANNER_RATIOS[2]).getValue(this.currentWidthBreakpoint))
+            .groupDefaultFocus(index === 0 ? true : false)
+            .focusable(true)
+            .padding({
+              top: $r('app.float.banner_margin'),
+              bottom: $r('app.float.banner_margin'),
+              left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.banner_padding_sm') : 0,
+              right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.banner_padding_sm') : 0
+            })
+          }, (item: Banner, index: number) => index + JSON.stringify(item))
+        }
+        .displayCount(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? 1 : HomeConstants.TWO)
+        // Interval between banner images
+        .itemSpace(HomeConstants.SWIPER_ITEM_SPACE)
+        .prevMargin(new BreakpointType($r('app.float.swiper_prev_next_margin_sm'),
+          $r('app.float.swiper_prev_next_margin_md'), $r('app.float.swiper_prev_next_margin_lg'))
+          .getValue(this.currentWidthBreakpoint))
+        .nextMargin(new BreakpointType($r('app.float.swiper_prev_next_margin_sm'),
+          $r('app.float.swiper_prev_next_margin_md'), $r('app.float.swiper_prev_next_margin_lg'))
+          .getValue(this.currentWidthBreakpoint))
+        // [End banner_view]
+        // Setting the navigation point Style of the swiper.
+        .indicator(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Indicator.dot()
+          .itemWidth($r('app.float.swiper_item_size'))
+          .itemHeight($r('app.float.swiper_item_size'))
+          .selectedItemWidth($r('app.float.swiper_selected_item_width'))
+          .selectedItemHeight($r('app.float.swiper_item_size'))
+          .color($r('app.color.swiper_indicator'))
+          .bottom($r('app.float.indicator_bottom'))
+          .selectedColor(Color.White) : false
+        )
+        .loop(true)
+        .width(CommonConstants.FULL_PERCENT)
+        .visibility((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) &&
+          (this.currentTopIndex === 1) ? Visibility.None : Visibility.Visible)
+        .effectMode(EdgeEffect.None)
+        // The sizes of the front and rear banners on the MD and LG devices are different.
+        .index(2)
+        .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[2]))
+
+        // Switch the tab to switch the banner display effect.
+        // [Start banner_view_row]
+        Row({ space: HomeConstants.BANNER_ROW_SPACE }) {
+          BannerText({
+            banner: this.bannerImgList[2],
+            index: 0
+          })
+            .layoutWeight(CommonConstants.FOUR)
+            .height(CommonConstants.FULL_PERCENT)
+
+          BannerText({
+            banner: this.bannerImgList[1],
+            index: 1
+          })
+            .layoutWeight(CommonConstants.FOUR)
+            .height(CommonConstants.FULL_PERCENT)
+
+          Column() {
+            BannerText({
+              banner: this.bannerImgList[0],
+              index: 2
+            })
+              .margin({ bottom: $r('app.float.new_banner_3_margin') })
+              .layoutWeight(1)
+
+            BannerText({
+              banner: this.bannerImgList[4],
+              index: 3
+            })
+              .margin({ top: $r('app.float.new_banner_3_margin') })
+              .layoutWeight(1)
+          }
+          .layoutWeight(CommonConstants.THREE)
+        }
+        .height(this.getBannerNewHeight(this.windowWidth))
+        .width(CommonConstants.FULL_PERCENT)
+        .visibility((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) &&
+          (this.currentTopIndex === 1) ? Visibility.Visible : Visibility.None)
+        .padding({
+          left: $r('app.float.banner_padding_sm'),
+          right: $r('app.float.banner_padding_sm')
+        })
+        // [End banner_view_row]
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .visibility(this.currentTopIndex === 2 ? Visibility.None : Visibility.Visible)
+
+      Row() {
+        // Immersive layout.
+        Column() {
+          Text(this.bannerImgList[2].getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+            `${this.bannerImgList[2].getDescription().getDescription()[0]}${this.bannerImgList[2].getDescription()
+              .getDescription()[1]}` : this.bannerImgList[2].getDescription().getDescription()[0])
+            .fontSize(new BreakpointType($r('app.float.immersive_text_1_font_sm'),
+              $r('app.float.immersive_text_1_font_md'), $r('app.float.immersive_text_1_font_lg'))
+              .getValue(this.currentWidthBreakpoint))
+            .fontWeight(this.bannerImgList[2].getDescription().getFontWeight()[0])
+            .lineHeight(new BreakpointType($r('app.float.immersive_text_1_line_sm'),
+              $r('app.float.immersive_text_1_line_md'), $r('app.float.immersive_text_1_line_lg'))
+              .getValue(this.currentWidthBreakpoint))
+            .fontColor(Color.White)
+            .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2])
+            .maxLines(1)
+
+          Text(this.bannerImgList[2].getDescription().getDescription()[1])
+            .fontSize(new BreakpointType($r('app.float.immersive_text_1_font_sm'),
+              $r('app.float.immersive_text_1_font_md'), $r('app.float.immersive_text_1_font_lg'))
+              .getValue(this.currentWidthBreakpoint))
+            .fontWeight(this.bannerImgList[2].getDescription().getFontWeight()[0])
+            .lineHeight(new BreakpointType($r('app.float.immersive_text_1_line_sm'),
+              $r('app.float.immersive_text_1_line_md'), $r('app.float.immersive_text_1_line_lg'))
+              .getValue(this.currentWidthBreakpoint))
+            .fontColor(Color.White)
+            .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2])
+            .maxLines(1)
+            .visibility(this.bannerImgList[2].getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+            Visibility.None : Visibility.Visible)
+
+          Text(this.bannerImgList[2].getDescription().getDescription()[2])
+            .fontSize(new BreakpointType($r('app.float.immersive_text_2_font_sm'),
+              $r('app.float.immersive_text_2_font_md'), $r('app.float.immersive_text_2_font_lg'))
+              .getValue(this.currentWidthBreakpoint))
+            .fontWeight(this.bannerImgList[2].getDescription().getFontWeight()[1])
+            .lineHeight(new BreakpointType($r('app.float.immersive_text_2_line_sm'),
+              $r('app.float.immersive_text_2_line_md'), $r('app.float.immersive_text_2_line_lg'))
+              .getValue(this.currentWidthBreakpoint))
+            .fontColor(Color.White)
+            .margin({
+              top: this.bannerImgList[2].getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[1]
+            })
+            .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[1])
+            .maxLines(1)
+        }
+        .padding({
+          left: new BreakpointType($r('app.float.immersive_col_padding_left_sm'),
+            $r('app.float.immersive_col_padding_left_md'), $r('app.float.immersive_col_padding_left_lg'))
+            .getValue(this.currentWidthBreakpoint),
+          top: new BreakpointType($r('app.float.immersive_col_padding_top_sm'),
+            $r('app.float.immersive_col_padding_top_md'), $r('app.float.immersive_col_padding_top_lg'))
+            .getValue(this.currentWidthBreakpoint)
+        })
+        .height(CommonConstants.FULL_PERCENT)
+        .width(CommonConstants.FULL_PERCENT)
+        .alignItems(new BreakpointType(true, false, false).getValue(this.currentWidthBreakpoint) ?
+        HorizontalAlign.Center : HorizontalAlign.Start)
+        .justifyContent(!this.bannerImgList[2].getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ?
+        FlexAlign.Start : FlexAlign.Center)
+      }
+      .margin({
+        top: $r('app.float.immersive_col_margin')
+      })
+      .padding({
+        left: $r('app.float.home_content_padding'),
+        right: $r('app.float.home_content_padding')
+      })
+      .height(new BreakpointType($r('app.float.immersive_banner_height_sm'), $r('app.float.immersive_banner_height_md'),
+        $r('app.float.immersive_banner_height_lg')).getValue(this.currentWidthBreakpoint))
+      .width(CommonConstants.FULL_PERCENT)
+      .visibility(this.currentTopIndex === 2 ? Visibility.Visible : Visibility.None)
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .padding({
+      left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ?
+      $r('app.float.side_bar_width') : 0
+    })
+  }
+
+  getBannerNewHeight(windowWidth: number): string {
+    // Obtain the window width and subtract the blank parts on both sides.
+    let result: number = px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0],
+      HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint) -
+    HomeConstants.LG_SIDEBAR_WIDTH;
+    // Calculate the width of a single image based on the percent.
+    result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * HomeConstants.TWO) * CommonConstants.FOUR /
+    HomeConstants.ELEVEN;
+    // Calculate the total height of the grid layout.
+    return result / HomeConstants.NEW_BANNER_ASPECT_RATIO + HomeConstants.HEIGHT_UNIT;
+  }
+}
+
+@Component
+struct BannerText {
+  public banner: Banner = new BannerViewModel().getBannerList()[0];
+  public currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  public index: number = 0;
+
+  build() {
+    Stack() {
+      Image(((this.index === 0) || (this.index === 1)) ? this.banner.getBannerImg().getImgSrcSm() :
+        this.banner.getBannerImg().getImgSrc())
+        .width(CommonConstants.FULL_PERCENT)
+        .height(CommonConstants.FULL_PERCENT)
+        .objectFit(ImageFit.Fill)
+        .borderRadius($r('app.float.banner_img_border_radius'))
+
+      Column() {
+        Text(this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+          `${this.banner.getDescription().getDescription()[0]}${this.banner.getDescription().getDescription()[1]}` :
+          this.banner.getDescription().getDescription()[0])
+          .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0])
+          .fontWeight(this.banner.getDescription().getFontWeight()[0])
+          .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0])
+          .fontColor(Color.White)
+          .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2])
+          .maxLines(1)
+        Text(this.banner.getDescription().getDescription()[1])
+          .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0])
+          .fontWeight(this.banner.getDescription().getFontWeight()[0])
+          .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0])
+          .fontColor(Color.White)
+          .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2])
+          .maxLines(1)
+          .visibility(this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+            Visibility.None : Visibility.Visible)
+
+        Text(this.banner.getDescription().getDescription()[2])
+          .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[1])
+          .fontWeight(this.banner.getDescription().getFontWeight()[1])
+          .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[1])
+          .fontColor(Color.White)
+          .margin({ top: this.banner.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[1] })
+          .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[1])
+          .maxLines(1)
+      }
+      .padding({
+        left: !this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+          this.banner.getDescription().getLeftPosition().getValue(this.currentWidthBreakpoint)[0] : '0',
+        top: !this.banner.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ?
+          this.banner.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[0] : '0'
+      })
+      .alignItems(this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+        HorizontalAlign.Center : HorizontalAlign.Start)
+      .justifyContent(!this.banner.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ?
+        FlexAlign.Start : FlexAlign.Center)
+      .width(CommonConstants.FULL_PERCENT)
+      .height(CommonConstants.FULL_PERCENT)
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/view/CommonView.ets b/MultiVideoApplication/features/home/src/main/ets/view/CommonView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1e490b6a9addd04505b8a47aa48ce99c9d83e945
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/view/CommonView.ets
@@ -0,0 +1,172 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, BreakpointType, CommonConstants } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+
+@Component
+export struct VideoImgRating {
+  public rating: string = '';
+
+  build() {
+    Row() {
+      Text(this.rating)
+        .fontSize($r('app.float.video_img_rating_font'))
+        .fontWeight(FontWeight.Normal)
+        .fontColor(Color.White)
+        .height($r('app.float.video_img_rating_height'))
+        .width($r('app.float.video_img_rating_width'))
+        .margin({
+          right: $r('app.float.video_img_rating_margin'),
+          bottom: $r('app.float.video_img_rating_margin')
+        })
+        .backgroundColor($r('app.color.main_daily_rating_background'))
+        .borderRadius($r('app.float.video_img_rating_radius'))
+        .textAlign(TextAlign.Center)
+    }
+    .justifyContent(FlexAlign.End)
+    .width(CommonConstants.FULL_PERCENT)
+    .visibility(this.rating === '' ? Visibility.None : Visibility.Visible)
+  }
+}
+
+@Component
+export struct VideoTitle {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  public title: ResourceStr = '';
+
+  build() {
+    Text(this.title)
+      .fontWeight(FontWeight.Normal)
+      .fontSize($r('app.float.video_title_font'))
+      .lineHeight($r('app.float.video_title_line'))
+      .margin({ top: $r('app.float.video_title_margin') })
+      .fontColor(this.currentTopIndex === 2 ? Color.White : $r('app.color.normal_font_color'))
+      .textOverflow({ overflow: TextOverflow.Ellipsis })
+      .maxLines(1)
+  }
+}
+
+@Component
+export struct VideoContent {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  public content: ResourceStr = '';
+
+  build() {
+    Text(this.content)
+      .fontSize($r('app.float.video_content_font'))
+      .lineHeight($r('app.float.video_content_line'))
+      .opacity(CommonConstants.TEXT_OPACITY[0])
+      .fontWeight(FontWeight.Normal)
+      .maxLines(1)
+      .margin({ top: $r('app.float.video_content_margin') })
+      .fontColor(this.currentTopIndex === 2 ? Color.White : $r('app.color.normal_font_color'))
+      .textOverflow({ overflow: TextOverflow.Ellipsis })
+  }
+}
+
+@Component
+export struct SubtitleComponent {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  public title: ResourceStr = '';
+
+  build() {
+    Text(this.title)
+      .fontSize($r('app.float.sub_title_font'))
+      .fontWeight(CommonConstants.FONT_WEIGHT_500)
+      .fontColor(this.currentTopIndex === 2 ? Color.White : $r('app.color.normal_font_color'))
+      .lineHeight($r('app.float.sub_title_row_height'))
+      .width(CommonConstants.FULL_PERCENT)
+      .padding({
+        left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+          $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint),
+        right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+          $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint)})
+  }
+}
+
+@Component
+export struct VideoImgComponent {
+  public imgSrc?: Resource;
+  public index: number = 0;
+
+  build() {
+    Image(this.imgSrc ? this.imgSrc : '')
+      .focusable(true)
+      .groupDefaultFocus(this.index === 0 ? true : false)
+      .objectFit(ImageFit.Fill)
+      .width(CommonConstants.FULL_PERCENT)
+      .height(CommonConstants.FULL_PERCENT)
+      .draggable(false)
+      .borderRadius($r('app.float.banner_focus_radius'))
+  }
+}
+
+@Component
+export struct VideoImgPlay {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+
+  build() {
+    Column() {
+      Image($r('app.media.new_video_play'))
+        .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.video_img_size_lg') :
+          $r('app.float.video_img_size'))
+        .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.video_img_size_lg') :
+          $r('app.float.video_img_size'))
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .height(CommonConstants.FULL_PERCENT)
+    .justifyContent(FlexAlign.Center)
+  }
+}
+
+export function getTabIndex(direction: string): number {
+  let tabIndex: number = 0;
+  switch (direction) {
+    case HomeConstants.DIRECTION_LIST[0]:
+      tabIndex = 1;
+      break;
+    case HomeConstants.DIRECTION_LIST[1]:
+      tabIndex = 2;
+      break;
+    case HomeConstants.DIRECTION_LIST[2]:
+      tabIndex = 3;
+      break;
+    case HomeConstants.DIRECTION_LIST[3]:
+      tabIndex = 4;
+      break;
+    case HomeConstants.DIRECTION_LIST[4]:
+      tabIndex = 5;
+      break;
+    case HomeConstants.DIRECTION_LIST[5]:
+      tabIndex = 6;
+      break;
+    case HomeConstants.DIRECTION_LIST[6]:
+      tabIndex = 7;
+      break;
+    case HomeConstants.DIRECTION_LIST[7]:
+      tabIndex = 8;
+      break;
+    case HomeConstants.DIRECTION_LIST[8]:
+      tabIndex = 9;
+      break;
+    default:
+      break;
+  }
+  return tabIndex;
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/view/DailyVideo.ets b/MultiVideoApplication/features/home/src/main/ets/view/DailyVideo.ets
new file mode 100644
index 0000000000000000000000000000000000000000..89d5d2091d5f226e365e7c87233c4fc1ebacb1f0
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/view/DailyVideo.ets
@@ -0,0 +1,284 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { BreakpointType } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel';
+import { getTabIndex, SubtitleComponent, VideoImgComponent, VideoImgPlay, VideoImgRating } from './CommonView';
+
+@Component
+export struct DailyVideo {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('windowWidth') windowWidth: number = 0;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  @State isShowingMainBorder: boolean = false;
+  private dailyVideoImgList: VideoImage[] = new VideoImgViewModel().getDailyVideoImgList();
+  private mainDailyVideoImg: VideoImage = new VideoImgViewModel().getMainDailyVideoImg();
+
+  build() {
+    // [Start daily_video_column]
+    Column() {
+      SubtitleComponent({ title: HomeConstants.HOME_SUB_TITLES[1] })
+
+      GridRow({
+        columns: {
+          sm: BreakpointConstants.GRID_ROW_COLUMNS[2],
+          md: BreakpointConstants.GRID_ROW_COLUMNS[0],
+          lg: BreakpointConstants.GRID_ROW_COLUMNS[0]
+        },
+        gutter: $r('app.float.grid_row_gutter')
+      }) {
+        // Main video section.
+        GridCol({
+          span: {
+            sm: BreakpointConstants.GRID_COLUMN_SPANS[5],
+            md: BreakpointConstants.GRID_COLUMN_SPANS[1],
+            lg: BreakpointConstants.GRID_COLUMN_SPANS[1]
+          }
+        }) {
+          Column() {
+            // [StartExclude daily_video_column]
+            Stack({ alignContent: Alignment.Bottom }) {
+              Image(this.mainDailyVideoImg.getImgSrc() ? this.mainDailyVideoImg.getImgSrc() : '')
+                .focusable(true)
+                .objectFit(ImageFit.Fill)
+                .width(CommonConstants.FULL_PERCENT)
+                .height(CommonConstants.FULL_PERCENT)
+                .draggable(false)
+                .borderRadius({
+                  topLeft: $r('app.float.daily_main_focus_radius'),
+                  topRight: $r('app.float.daily_main_focus_radius')
+                })
+              VideoImgPlay()
+
+              Row() {
+                Text(this.mainDailyVideoImg.getTitle())
+                  .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.main_daily_title_font_lg') : $r('app.float.main_daily_title_font'))
+                  .fontColor(Color.White)
+                  .fontWeight(CommonConstants.FONT_WEIGHT_700)
+                  .margin({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.main_daily_margin_lg') : $r('app.float.main_daily_margin') })
+                  .layoutWeight(1)
+                  .maxLines(1)
+
+                Text(this.mainDailyVideoImg.getRating())
+                  .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.main_daily_rating_font_lg') : $r('app.float.main_daily_rating_font'))
+                  .fontWeight(FontWeight.Normal)
+                  .fontColor(Color.White)
+                  .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.main_daily_rating_height_lg') : $r('app.float.main_daily_rating_height'))
+                  .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.main_daily_rating_width_lg') : $r('app.float.main_daily_rating_width'))
+                  .margin({
+                    right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG?
+                      $r('app.float.main_daily_rating_right_lg') : $r('app.float.main_daily_rating_right'),
+                    top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                      $r('app.float.main_daily_rating_top_lg') : $r('app.float.main_daily_rating_top')
+                  })
+                  .backgroundColor($r('app.color.main_daily_rating_background'))
+                  .borderRadius(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.main_daily_rating_radius_lg') : $r('app.float.main_daily_rating_radius'))
+                  .textAlign(TextAlign.Center)
+              }
+              .alignItems(VerticalAlign.Top)
+              .justifyContent(FlexAlign.Start)
+              .width(CommonConstants.FULL_PERCENT)
+              .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.main_daily_row_height_lg') : $r('app.float.main_daily_row_height'))
+            }
+            .width(CommonConstants.FULL_PERCENT)
+            .layoutWeight(5)
+
+            Row() {
+              // [Start daily_video_row]
+              Image($r('app.media.daily_small_video'))
+                .height(new BreakpointType($r('app.float.small_daily_image_height_sm'),
+                  $r('app.float.small_daily_image_height_md'), $r('app.float.small_daily_image_height_lg'))
+                  .getValue(this.currentWidthBreakpoint))
+                .width(new BreakpointType($r('app.float.small_daily_image_width_sm'),
+                  $r('app.float.small_daily_image_width_md'), $r('app.float.small_daily_image_width_lg'))
+                  .getValue(this.currentWidthBreakpoint))
+                .borderRadius($r('app.float.daily_small_img_radius'))
+              // [End daily_video_row]
+              Column() {
+                Text(this.mainDailyVideoImg.getOtherInfo())
+                  .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.main_daily_other_font_lg') : $r('app.float.main_daily_other_font'))
+                  .fontWeight(FontWeight.Normal)
+                  .maxLines(1)
+                Text(this.mainDailyVideoImg.getContent())
+                  .opacity(CommonConstants.TEXT_OPACITY[0])
+                  .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.main_daily_content_font_lg') : $r('app.float.main_daily_content_font'))
+                  .fontWeight(FontWeight.Normal)
+                  .maxLines(1)
+              }
+              .margin({
+                left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  $r('app.float.small_daily_column_margin_lg'): $r('app.float.small_daily_column_margin'),
+                right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  $r('app.float.small_daily_column_margin_lg'): $r('app.float.small_daily_column_margin')
+              })
+              .alignItems(HorizontalAlign.Start)
+              .layoutWeight(1)
+
+              Button(HomeConstants.HOME_BUTTON_TEXT[0])
+                .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  $r('app.float.main_daily_button_font_lg'): $r('app.float.main_daily_button_font'))
+                .fontColor($r('app.color.tab_sel_color'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  $r('app.float.main_daily_button_height_lg') : $r('app.float.main_daily_button_height_lg'))
+                .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  $r('app.float.main_daily_button_width_lg') : $r('app.float.main_daily_button_width_lg'))
+                .borderRadius($r('app.float.main_daily_button_radius'))
+                .backgroundColor($r('app.color.button_background'))
+            }
+            .alignItems(VerticalAlign.Center)
+            .padding({
+              left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.small_daily_row_padding_lg') : $r('app.float.small_daily_row_padding'),
+              right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.small_daily_row_padding_lg') : $r('app.float.small_daily_row_padding')
+            })
+            .layoutWeight(2)
+            // [EndExclude daily_video_column]
+          }
+          .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[6]))
+          .width(CommonConstants.FULL_PERCENT)
+          // Dynamically setting the height at different breakpoints.
+          .height(this.getDailyVideoHeight(this.currentWidthBreakpoint, this.windowWidth, true))
+          .borderRadius($r('app.float.card_radius'))
+          .backgroundColor($r('app.color.home_component_background'))
+        }
+        // [StartExclude daily_video_column]
+        .padding({
+          top: $r('app.float.sub_title_row_margin'),
+          bottom: this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM ?
+            $r('app.float.sub_title_row_margin') : 0,
+          left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+            $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint),
+          right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+            $r('app.float.home_content_padding_sm') : 0
+        })
+        // [EndExclude daily_video_column]
+        // Sub video section.
+        GridCol({
+          span: {
+            sm: BreakpointConstants.GRID_COLUMN_SPANS[5],
+            md: BreakpointConstants.GRID_COLUMN_SPANS[1],
+            lg: BreakpointConstants.GRID_COLUMN_SPANS[1]
+          }
+        }) {
+          Grid() {
+            ForEach(this.dailyVideoImgList, (item: VideoImage) => {
+              GridItem() {
+                Column() {
+                  Stack({ alignContent: Alignment.Bottom }) {
+                    VideoImgComponent({ imgSrc: item.getImgSrc() })
+                    VideoImgPlay()
+                    VideoImgRating({ rating: item.getRating() })
+                  }
+                  .width(CommonConstants.FULL_PERCENT)
+                  // The width and height vary with the container assembly and the aspect ratio remains unchanged.
+                  .aspectRatio(HomeConstants.VIDEO_DIALOG_ASPECT_RATIO)
+                  // [StartExclude daily_video_column]
+                  Text(item.getTitle())
+                    .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                      $r('app.float.daily_title_font_lg') : $r('app.float.daily_title_font'))
+                    .fontWeight(FontWeight.Normal)
+                    .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                      $r('app.float.video_title_line_lg') : $r('app.float.video_title_line'))
+                    .margin({ top: $r('app.float.daily_title_margin') })
+                    .fontColor(this.currentTopIndex === 2 ? Color.White : $r('app.color.normal_font_color'))
+
+                  Text(item.getContent())
+                    .fontSize($r('app.float.daily_content_font'))
+                    .fontWeight(FontWeight.Normal)
+                    .lineHeight($r('app.float.video_content_line'))
+                    .margin({ top: $r('app.float.daily_content_margin') })
+                    .opacity(CommonConstants.TEXT_OPACITY[0])
+                    .fontColor(this.currentTopIndex === 2 ? Color.White : $r('app.color.normal_font_color'))
+                    .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.Visible :
+                      Visibility.None)
+                  // [EndExclude daily_video_column]
+                }
+                .alignItems(HorizontalAlign.Start)
+              }
+            }, (item: VideoImage, index: number) => index + JSON.stringify(item))
+          }
+          .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[7]))
+          // Dynamically setting the height at different breakpoints.
+          .height(this.getDailyVideoHeight(this.currentWidthBreakpoint, this.windowWidth, false))
+          .width(CommonConstants.FULL_PERCENT)
+          // Sets the number of grid layout columns and evenly divides the height.
+          .columnsTemplate(CommonConstants.VIDEO_GRID_COLUMNS[0])
+          .rowsTemplate(CommonConstants.VIDEO_GRID_COLUMNS[0])
+          .rowsGap($r('app.float.daily_grid_gap'))
+          .columnsGap($r('app.float.daily_grid_gap'))
+          // [StartExclude daily_video_column]
+          .padding({
+            top: this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM ?
+              $r('app.float.sub_title_row_margin') : $r('app.float.focus_more_size'),
+            bottom: this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM ?
+              $r('app.float.sub_title_row_margin') : $r('app.float.focus_more_size'),
+            left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              $r('app.float.home_content_padding_sm') : $r('app.float.focus_more_size'),
+            right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+              $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint)
+          })
+          // [EndExclude daily_video_column]
+        }
+      }
+    }
+    .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ?
+      $r('app.float.side_bar_width') : 0 })
+    .margin({ top: $r('app.float.main_daily_margin') })
+    // [End daily_video_column]
+  }
+
+  getDailyVideoHeight(currentWidthBreakpoint: string, windowWidth: number, isMain: boolean): string {
+    // Obtain the window width and subtract the blank parts on both sides.
+    let result: number = px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0],
+      HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint) -
+      HomeConstants.VIDEO_GRID_ITEM_SPACE;
+    // Calculate the width of a single image based on the number of grid columns.
+    if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      result = (result - HomeConstants.LG_SIDEBAR_WIDTH) / HomeConstants.TWO;
+    } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      result /= HomeConstants.TWO;
+    } else {
+      result /= 1;
+    }
+    // Calculate the height of a single image and title, and calculate the total height of the grid layout.
+    result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE) / HomeConstants.VIDEO_DIALOG_ASPECT_RATIO;
+    if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+      if (isMain) {
+        return (result + HomeConstants.DAILY_VIDEO_DESCRIPTION_HEIGHT[0] + HomeConstants.HEIGHT_UNIT);
+      } else {
+        return (result + HomeConstants.DAILY_VIDEO_DESCRIPTION_HEIGHT[2] + HomeConstants.HEIGHT_UNIT);
+      }
+    } else {
+      if (!isMain) {
+        return (result + HomeConstants.DAILY_VIDEO_DESCRIPTION_HEIGHT[1] + HomeConstants.HEIGHT_UNIT);
+      } else {
+        return (result + HomeConstants.DAILY_VIDEO_DESCRIPTION_HEIGHT[3] + HomeConstants.HEIGHT_UNIT);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/view/Home.ets b/MultiVideoApplication/features/home/src/main/ets/view/Home.ets
new file mode 100644
index 0000000000000000000000000000000000000000..06c94c6317c66b2492dd3847dc5b0c4e0817b2f5
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/view/Home.ets
@@ -0,0 +1,161 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { SearchView } from '@ohos/search';
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { FooterTab, FooterTabViewModel } from '../viewmodel/FooterTabViewModel';
+import { HomeHeader } from './HomeHeader';
+import { HomeContent } from './HomeContent';
+
+@Component
+export struct Home {
+  @State currentBottomIndex: number = 0;
+  @State isSearching: boolean = false;
+  @StorageLink('scrollHeight') scrollHeight: number = 0;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  // [Start Home]
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  // [StartExclude Home]
+  private tabList: FooterTab[] = new FooterTabViewModel().getTabList();
+  private scroller: Scroller = new Scroller();
+  private sideScroller: Scroller = new Scroller();
+
+  @Builder
+  BottomTabBuilder(item: FooterTab, index: number) {
+    Column() {
+      Image(index !== this.currentBottomIndex ? (this.currentTopIndex === 2 && this.currentBottomIndex === 0 &&
+        !this.isSearching ? item.getIconWhite() : item.getIcon()) : item.getIconSelected())
+        .width($r('app.float.icon_tab_width'))
+        .height($r('app.float.icon_tab_height'))
+      Text(item.getName())
+        .fontSize($r('app.float.tab_font_size'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+        .fontColor(index === this.currentBottomIndex ? $r('app.color.tab_sel_color') : (this.currentTopIndex === 2 &&
+          this.currentBottomIndex === 0 && !this.isSearching ? Color.White : Color.Black))
+        .margin({ top: $r('app.float.tab_top_margin') })
+        .opacity(index === this.currentBottomIndex ? CommonConstants.TEXT_OPACITY[3] : CommonConstants.TEXT_OPACITY[0])
+    }
+    .padding({ bottom: this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG && deviceInfo.deviceType !==
+      CommonConstants.DEVICE_TYPE ? $r('app.float.bottom_navigation') : 0 })
+    .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.tab_height_lg') :
+      CommonConstants.FULL_PERCENT)
+    .width(CommonConstants.FULL_PERCENT)
+    .justifyContent(FlexAlign.Center)
+  }
+  // [EndExclude Home]
+  build() {
+    // [Start home_tabs]
+    Tabs({
+      barPosition: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarPosition.Start : BarPosition.End
+    }) {
+      // [StartExclude home_tabs]
+      // [Start home_tab_content]
+      TabContent() {
+        if (this.currentTopIndex === 2) {
+          // The immersive design of the home page is displayed when the top tab is switched to 2.
+          Stack() {
+            Scroll(this.sideScroller) {
+              Column() {
+                HomeContent()
+                  .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
+
+                SearchView({ isSearching: $isSearching })
+                  .visibility(!this.isSearching ? Visibility.None : Visibility.Visible)
+              }
+              .width(CommonConstants.FULL_PERCENT)
+            }
+            .scrollBar(BarState.Off)
+            .height(CommonConstants.FULL_PERCENT)
+            // Obtains the sliding offset on the y axis during sliding.
+            .onScrollFrameBegin((offset: number) => {
+              this.scrollHeight = this.sideScroller.currentOffset().yOffset;
+              return { offsetRemain: offset }
+            })
+
+            HomeHeader({ isSearching: $isSearching })
+              .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
+              .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.side_bar_width') : 0 })
+          }
+          .height(CommonConstants.FULL_PERCENT)
+          .width(CommonConstants.FULL_PERCENT)
+          .alignContent(Alignment.Top)
+        } else {
+          // Non-immersive design for the home page.
+          Column() {
+            HomeHeader({ isSearching: $isSearching })
+              .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
+
+            Scroll(this.scroller) {
+              Column() {
+                HomeContent()
+                  .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
+
+                SearchView({ isSearching: $isSearching })
+                  .visibility(!this.isSearching ? Visibility.None : Visibility.Visible)
+              }
+              .width(CommonConstants.FULL_PERCENT)
+            }
+            .layoutWeight(1)
+            .scrollBar(BarState.Off)
+          }
+          .height(CommonConstants.FULL_PERCENT)
+          .width(CommonConstants.FULL_PERCENT)
+        }
+      }
+      .tabBar(this.BottomTabBuilder(this.tabList[0], 0))
+      // [End home_tab_content]
+      TabContent() {
+        Column()
+      }
+      .tabBar(this.BottomTabBuilder(this.tabList[1], 1))
+
+      TabContent() {
+        Column()
+      }
+      .tabBar(this.BottomTabBuilder(this.tabList[2], 2))
+
+      TabContent() {
+        Column()
+      }
+      .tabBar(this.BottomTabBuilder(this.tabList[3], 3))
+      // [EndExclude home_tabs]
+    }
+    // Change the position and size of the tab at the bottom.
+    .barWidth(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.bottom_tab_bar_width_lg') :
+      CommonConstants.FULL_PERCENT)
+    .barHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? CommonConstants.FULL_PERCENT :
+      (deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? $r('app.float.tab_size_lg') :
+      $r('app.float.tab_size')))
+    .barMode(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarMode.Scrollable : BarMode.Fixed,
+      { nonScrollableLayoutStyle: LayoutStyle.ALWAYS_CENTER })
+    .vertical(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG)
+    // [End home_tabs]
+    .barOverlap(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? true :
+      false)
+    .barBackgroundBlurStyle(BlurStyle.NONE)
+    .barBackgroundColor(this.currentTopIndex === 2 && this.currentBottomIndex === 0 ?
+      (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.color.side_bar_background') :
+      $r('app.color.home_content_background')) : $r('app.color.tab_background_color'))
+    .onChange((index: number) => {
+      this.currentBottomIndex = index;
+    })
+    .scrollable(false)
+    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
+    .height(CommonConstants.FULL_PERCENT)
+    .width(CommonConstants.FULL_PERCENT)
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/view/HomeContent.ets b/MultiVideoApplication/features/home/src/main/ets/view/HomeContent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..10dd055e0266ee727ab2902cb855552b18f18280
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/view/HomeContent.ets
@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, BreakpointType, CommonConstants } from '@ohos/commons';
+import { WindowUtil } from '@ohos/commons';
+import { BannerView } from './BannerView';
+import { IconView } from './IconView';
+import { RecommendedVideo} from './RecommendedVideo';
+import { NewVideoRelease } from './NewVideoRelease';
+import { DailyVideo } from './DailyVideo';
+import { PreviousVideo } from './PreviousVideo';
+
+@Component
+export struct HomeContent {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  @State gridStatus: number = 1;
+  private windowUtil?: WindowUtil;
+  private isSearching: boolean = false;
+
+  aboutToAppear(): void {
+    this.windowUtil = WindowUtil.getInstance();
+    if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPE) {
+      this.windowUtil!.setFullScreen();
+    }
+  }
+
+  build() {
+    // [Start home_content_build]
+    Column() {
+      // [StartExclude home_content_build]
+      BannerView()
+      IconView()
+      RecommendedVideo()
+      NewVideoRelease()
+      DailyVideo()
+      PreviousVideo()
+      // [EndExclude home_content_build]
+    }
+    // Set the background image to cover the side and top tabs.
+    .backgroundImage(this.currentTopIndex === 2 && !this.isSearching ? new BreakpointType(
+      $r('app.media.immersive_background_sm'), $r('app.media.immersive_background_md'),
+      $r('app.media.immersive_background_lg')).getValue(this.currentWidthBreakpoint) : $r('app.media.white_background'))
+    // Set the size of the background image.
+    .backgroundImageSize({ width: CommonConstants.FULL_PERCENT, height: new BreakpointType(
+      $r('app.float.immersive_background_height_sm'), $r('app.float.immersive_background_height_md'),
+      $r('app.float.immersive_background_height_lg')).getValue(this.currentWidthBreakpoint) })
+    // Set the uniform background color.
+    .backgroundColor(this.currentTopIndex === 2 && !this.isSearching ? (this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_MD ?
+      $r('app.color.home_content_background') : $r('app.color.home_content_background_md')) : Color.White)
+    .width(CommonConstants.FULL_PERCENT)
+    // [End home_content_build]
+    .padding({ bottom: deviceInfo.deviceType !== CommonConstants.DEVICE_TYPE && this.currentWidthBreakpoint ===
+      BreakpointConstants.BREAKPOINT_LG ? $r('app.float.bottom_navigation') : 0 })
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/view/HomeHeader.ets b/MultiVideoApplication/features/home/src/main/ets/view/HomeHeader.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6e9d393238b3be688eca47d10b497abd400f3f6b
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/view/HomeHeader.ets
@@ -0,0 +1,212 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { BreakpointType } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { getTabIndex } from './CommonView';
+
+@Component
+export struct HomeHeader {
+  @State isShowingBorder: boolean = false;
+  @Link isSearching: boolean;
+  @StorageLink('scrollHeight') scrollHeight: number = 0;
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string =  BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  // [Start home_header_build]
+  build() {
+    // [Start home_header]
+    Column() {
+      GridRow({
+        columns: {
+          sm: BreakpointConstants.GRID_ROW_COLUMNS[2],
+          md: BreakpointConstants.GRID_ROW_COLUMNS[0],
+          lg: BreakpointConstants.GRID_ROW_COLUMNS[0]
+        }
+      }) {
+        GridCol({
+          span: {
+            sm: BreakpointConstants.GRID_COLUMN_SPANS[5],
+            md: BreakpointConstants.GRID_COLUMN_SPANS[2],
+            lg: BreakpointConstants.GRID_COLUMN_SPANS[2]
+          }
+        }) {
+          this.TopTabBar()
+        }
+        .padding({
+          top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? 0 : $r('app.float.search_top_padding_top')
+        })
+        .height(deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? $r('app.float.search_top_height') :
+        $r('app.float.search_top_height_more'))
+
+        GridCol({
+          span: {
+            sm: BreakpointConstants.GRID_COLUMN_SPANS[5],
+            md: BreakpointConstants.GRID_COLUMN_SPANS[3],
+            lg: BreakpointConstants.GRID_COLUMN_SPANS[3]
+          }
+        }) {
+          this.searchBar()
+        }
+        .padding({ top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM || deviceInfo.deviceType ===
+          CommonConstants.DEVICE_TYPE ? 0 : $r('app.float.search_top_padding_top') })
+        .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM || deviceInfo.deviceType ===
+          CommonConstants.DEVICE_TYPE ? $r('app.float.search_top_height') : $r('app.float.search_top_height_more'))
+      }
+      // The background color of the top tab bar is changed during the slide-down process.
+      .backgroundColor(this.scrollHeight >= new BreakpointType(HomeConstants.BACKGROUND_CHANGE_HEIGHT[0],
+        HomeConstants.BACKGROUND_CHANGE_HEIGHT[1], HomeConstants.BACKGROUND_CHANGE_HEIGHT[2])
+        .getValue(this.currentWidthBreakpoint) && this.currentTopIndex === 2 ? $r('app.color.home_content_background') :
+        Color.Transparent)
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    // [End home_header]
+  }
+  // [End home_header_build]
+
+  @Builder
+  // [Start home_header_tap_bar]
+  TopTabBar() {
+    Row() {
+      Column() {
+        List() {
+          ForEach(HomeConstants.TOP_TOPIC_LIST, (item: string, index: number) => {
+            // [Start home_header_tap_bar]
+            ListItem() {
+              Text(item)
+                .fontSize(this.currentTopIndex === index ? $r('app.float.search_tab_font_selected') :
+                  $r('app.float.search_tab_font'))
+                .fontWeight(this.currentTopIndex === index ? CommonConstants.FONT_WEIGHT_700 :
+                  CommonConstants.FONT_WEIGHT_500)
+                .width(this.currentTopIndex === index ? $r('app.float.top_text_width_selected') :
+                  $r('app.float.top_text_width'))
+                .textAlign(TextAlign.Center)
+                .fontColor(this.currentTopIndex === 2 ? Color.White : $r('app.color.normal_font_color'))
+                .lineHeight(index === this.currentTopIndex ? $r('app.float.top_tab_list_height_selected') :
+                  $r('app.float.top_tab_list_height'))
+                .focusable(true)
+                .groupDefaultFocus(index === 0 ? true : false)
+                .borderRadius($r('app.float.text_focus_radius'))
+            }
+            .align(Alignment.Center)
+            .margin({
+              top: this.currentTopIndex === index ? $r('app.float.top_tab_list_top_selected') :
+                $r('app.float.top_tab_list_top'),
+              bottom: this.currentTopIndex === index ? $r('app.float.top_tab_list_bottom_selected') :
+                $r('app.float.top_tab_list_bottom')
+            })
+            .padding({
+              left: new BreakpointType(8, 12, 18).getValue(this.currentWidthBreakpoint),
+              right: new BreakpointType(8, 12, 18).getValue(this.currentWidthBreakpoint)
+            })
+            .onClick(() => {
+              this.currentTopIndex = index;
+              this.scrollHeight = 0;
+            })
+            // [End home_header_tap_bar]
+          }, (item: number, index: number) => index + JSON.stringify(item))
+        }
+        .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[1]))
+        .scrollBar(BarState.Off)
+        .listDirection(Axis.Horizontal)
+        .padding({ left: $r('app.float.search_top_padding') })
+      }
+      .alignItems(HorizontalAlign.Center)
+      .layoutWeight(1)
+      // [Start home_header_tap_bar]
+      Image($r('app.media.ic_public_more'))
+        .width($r('app.float.top_tab_img_size'))
+        .height($r('app.float.top_tab_img_size'))
+        .margin({
+          left: $r('app.float.top_tab_img_margin'),
+          right: $r('app.float.top_tab_img_margin')
+        })
+        .fillColor(this.currentTopIndex === 2 ? Color.White : Color.Black)
+        .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.Visible : Visibility.None)
+      // [Start home_header_tap_bar]
+    }
+    .height($r('app.float.top_bar_height'))
+    .width(CommonConstants.FULL_PERCENT)
+  }
+  // [End home_header_tap_bar]
+  // [Start home_header_search_bar]
+  @Builder
+  searchBar() {
+    Row() {
+      Stack({ alignContent: Alignment.Start }) {
+        // [[StartExclude home_header_search_bar]
+        TextInput({ placeholder: HomeConstants.SEARCH_PLACEHOLDER })
+          .placeholderFont({
+            size: $r('app.float.search_input_font'),
+            weight: FontWeight.Normal
+          })
+          .placeholderColor(this.currentTopIndex === 2 ? Color.White : $r('app.color.normal_font_color'))
+          .height($r('app.float.search_input_height'))
+          .fontSize($r('app.float.search_input_font'))
+          .padding({
+            left: $r('app.float.search_input_left'),
+            right: $r('app.float.search_input_right')
+          })
+          .width(CommonConstants.FULL_PERCENT)
+          .onClick(() => {
+            this.isSearching = true;
+          })
+          .onSubmit((enterKey: EnterKeyType) => {
+            if (enterKey === EnterKeyType.Go) {
+              this.isSearching = true;
+            }
+          })
+          .enterKeyType(EnterKeyType.Go)
+          .enableKeyboardOnFocus(false)
+          .backgroundColor(this.currentTopIndex === 2 ? $r('app.color.search_bar_background') : '')
+          .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[1]))
+
+        // Search image.
+        Image(this.currentTopIndex === 2 ? $r("app.media.ic_public_search_white") :
+          $r('app.media.ic_public_search'))
+          .width($r('app.float.search_img_size'))
+          .height($r('app.float.search_img_size'))
+          .margin({ left: $r('app.float.search_img_left') })
+        // [EndExclude home_header_search_bar]
+      }
+      // [StartExclude home_header_search_bar]
+      .alignSelf(ItemAlign.Center)
+      .layoutWeight(1)
+      // [EndExclude home_header_search_bar]
+      // [StartExclude home_header_search_bar]
+      // History image.
+      Image(this.currentTopIndex === 2 ? $r('app.media.ic_public_history_white') : $r('app.media.ic_public_history'))
+        .width($r('app.float.history_img_size'))
+        .height($r('app.float.history_img_size'))
+        .margin({ left: $r('app.float.history_img_left') })
+
+      Image(this.currentTopIndex === 2 ? $r('app.media.ic_public_more_white') : $r('app.media.ic_public_more'))
+        .width($r('app.float.history_img_size'))
+        .height($r('app.float.history_img_size'))
+        .margin({ left: $r('app.float.history_img_left') })
+        .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.None : Visibility.Visible)
+      // [EndExclude home_header_search_bar]
+    }
+    .padding({
+      left: $r('app.float.search_top_padding'),
+      right: $r('app.float.search_top_padding')
+    })
+    .justifyContent(FlexAlign.Center)
+    .width(CommonConstants.FULL_PERCENT)
+    .height(CommonConstants.FULL_PERCENT)
+  }
+  // [End home_header_search_bar]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/view/IconView.ets b/MultiVideoApplication/features/home/src/main/ets/view/IconView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..5a529e7aa2eefe3dc3baeb87a17cddaf6728cbd9
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/view/IconView.ets
@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { BreakpointType } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { IconViewModel, VideoIcon } from '../viewmodel/IconViewModel';
+import { getTabIndex } from './CommonView';
+
+@Component
+export struct IconView {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('windowWidth') windowWidth: number = 0;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  private iconList: VideoIcon[] = new IconViewModel().getIconList();
+
+  build() {
+    Column() {
+      List({ space: this.getSpace(this.windowWidth, this.currentWidthBreakpoint) }) {
+        ForEach(this.iconList, (item: VideoIcon, index: number) => {
+          ListItem() {
+            Column() {
+              Image(item.getImage())
+                .width($r('app.float.icon_img_size'))
+                .height($r('app.float.icon_img_size'))
+                .margin({ bottom: $r('app.float.icon_img_bottom_margin') })
+                .focusable(true)
+                .groupDefaultFocus(index === 0 ? true : false)
+                .borderRadius($r('app.float.icon_img_radius'))
+
+              Text(item.getName())
+                .fontSize($r('app.float.icon_list_font_size'))
+                .fontWeight(FontWeight.Normal)
+                .lineHeight($r('app.float.icon_list_font_height'))
+                .fontColor(this.currentTopIndex === 2 ? Color.White : Color.Black)
+            }
+            .alignItems(HorizontalAlign.Center)
+            .justifyContent(FlexAlign.Center)
+            .height($r('app.float.icon_list_height'))
+          }
+          .padding({
+            right: index === this.iconList.length - 1 ? this.getSpace(this.windowWidth, this.currentWidthBreakpoint) / 2 : 0
+          })
+        }, (item: VideoIcon) => JSON.stringify(item))
+      }
+      .clip(false)
+      .listDirection(Axis.Horizontal)
+      .scrollBar(BarState.Off)
+      .scrollSnapAlign(ScrollSnapAlign.START)
+      .edgeEffect(EdgeEffect.None)
+      .chainAnimation(true)
+      .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[3]))
+      .width(CommonConstants.FULL_PERCENT)
+    }
+    .padding({
+      left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+        $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint)
+    })
+    .margin({
+      top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+        $r('app.float.icon_list_column_margin_lg') : 0
+    })
+    .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ?
+      Visibility.None : Visibility.Visible)
+  }
+
+  getSpace(windowWidth: number, currentWidthBreakpoint: string): number {
+    // Obtain the window width and subtract the blank parts on both sides.
+    let result: number = px2vp(windowWidth) - (new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0],
+      HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint) /
+      HomeConstants.TWO) - getContext(this).resourceManager.getNumber($r('app.float.icon_img_size').id) / 2;
+    if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+      result = (result - HomeConstants.ICONVIEW_ITEM_WIDTH[0] * CommonConstants.FOUR) / CommonConstants.FOUR;
+    } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      result = (result - HomeConstants.ICONVIEW_ITEM_WIDTH[1] * HomeConstants.SIX) / HomeConstants.SIX;
+    } else {
+      result = (result - HomeConstants.LG_SIDEBAR_WIDTH - HomeConstants.ICONVIEW_ITEM_WIDTH[2] * HomeConstants.EIGHT) /
+        HomeConstants.EIGHT;
+    }
+    return result;
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/view/NewVideoRelease.ets b/MultiVideoApplication/features/home/src/main/ets/view/NewVideoRelease.ets
new file mode 100644
index 0000000000000000000000000000000000000000..031e2279a789e5bab2493ea9e2bcb8aa7ff8e20f
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/view/NewVideoRelease.ets
@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { BreakpointType } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel';
+import { getTabIndex,SubtitleComponent,VideoContent,VideoImgComponent, VideoImgPlay, VideoImgRating, VideoTitle } from
+  './CommonView';
+
+@Component
+export struct NewVideoRelease {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('windowWidth') windowWidth: number = 0;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  private newVideoImgList: VideoImage[] = new VideoImgViewModel().getNewVideoImgList();
+
+  build() {
+    Column() {
+      SubtitleComponent({ title: HomeConstants.HOME_SUB_TITLES[0] })
+        .margin({ top: $r('app.float.sub_title_row_margin') })
+
+      // Video grid.
+      Grid() {
+        ForEach(this.newVideoImgList, (item: VideoImage, index: number) => {
+          GridItem() {
+            Column() {
+              Stack({ alignContent: Alignment.Bottom }) {
+                VideoImgComponent({ imgSrc:item.getImgSrc(), index: index })
+                VideoImgPlay()
+                VideoImgRating({ rating: item.getRating() })
+              }
+              .height(new BreakpointType($r('app.float.new_video_height_sm'), $r('app.float.new_video_height_md'),
+                $r('app.float.new_video_height_lg')).getValue(this.currentWidthBreakpoint))
+              .width(CommonConstants.FULL_PERCENT)
+              .aspectRatio(HomeConstants.NEW_VIDEO_ASPECT_RATIO)
+
+              VideoTitle({ title: item.getTitle() })
+              VideoContent({ content: item.getContent() })
+            }
+            .alignItems(HorizontalAlign.Start)
+          }
+        }, (item: VideoImage, index: number) => index + JSON.stringify(item))
+      }
+      .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[5]))
+      .padding({
+        left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+          $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint),
+        right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+          $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint),
+        top: $r('app.float.sub_title_row_margin'),
+        bottom: $r('app.float.sub_title_row_margin')
+      })
+      .columnsTemplate(new BreakpointType(CommonConstants.VIDEO_GRID_COLUMNS[1], CommonConstants.VIDEO_GRID_COLUMNS[3],
+        CommonConstants.VIDEO_GRID_COLUMNS[4]).getValue(this.currentWidthBreakpoint))
+      .rowsTemplate(HomeConstants.NEW_VIDEO_ROWS_TEMPLATE)
+      .width(CommonConstants.FULL_PERCENT)
+      .columnsGap($r('app.float.new_video_columns_gap'))
+      .height(this.getNewVideoHeight(this.currentWidthBreakpoint, this.windowWidth))
+    }
+    .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ?
+      $r('app.float.side_bar_width') : 0 })
+  }
+
+  getNewVideoHeight(currentWidthBreakpoint: string, windowWidth: number): string {
+    let result: number = px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0],
+      HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint);
+    if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      result = result - HomeConstants.LG_SIDEBAR_WIDTH;
+      result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * HomeConstants.SIX) / HomeConstants.SEVEN;
+    } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * CommonConstants.FOUR) / HomeConstants.FIVE;
+    } else {
+      result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * HomeConstants.TWO) / CommonConstants.THREE;
+    }
+    return (result / HomeConstants.NEW_VIDEO_ASPECT_RATIO + HomeConstants.NEW_VIDEO_DESCRIPTION_HEIGHT +
+      HomeConstants.HEIGHT_UNIT);
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/view/PreviousVideo.ets b/MultiVideoApplication/features/home/src/main/ets/view/PreviousVideo.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b05b84f149ddceea15b2f69bea090949ffb2e098
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/view/PreviousVideo.ets
@@ -0,0 +1,216 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants, VideoNavPathStack } from '@ohos/commons';
+import { BreakpointType } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel';
+import { PreviousVideoUtil } from '../utils/PreviousVideoUtil';
+import { getTabIndex, SubtitleComponent } from './CommonView';
+
+@Component
+export struct PreviousVideo {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  @State previousVideoImgListTwo: VideoImage[] = new VideoImgViewModel().getPreviousVideoTwo(this.currentWidthBreakpoint);
+  @Consume('pageInfo') pageInfo: VideoNavPathStack;
+  private previousVideoImgListOne: VideoImage[] = new VideoImgViewModel().getPreviousVideoOne();
+
+  build() {
+    Column() {
+      SubtitleComponent({ title: HomeConstants.HOME_SUB_TITLES[2] })
+
+      GridRow({
+        columns: {
+          sm: BreakpointConstants.GRID_ROW_COLUMNS[2],
+          md: BreakpointConstants.GRID_ROW_COLUMNS[0],
+          lg: BreakpointConstants.GRID_ROW_COLUMNS[1]
+        },
+        gutter: $r('app.float.grid_row_gutter')
+      }) {
+        ForEach(this.previousVideoImgListOne, (item: VideoImage, index: number) => {
+          GridCol({
+            span: {
+              sm: BreakpointConstants.GRID_COLUMN_SPANS[5],
+              md: BreakpointConstants.GRID_COLUMN_SPANS[1],
+              lg: BreakpointConstants.GRID_COLUMN_SPANS[3]
+            }
+          }) {
+            Row() {
+              Image(item.getImgSrc())
+                .objectFit(ImageFit.Fill)
+                .margin({ right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+                $r('app.float.previous_one_image_margin_sm') : $r('app.float.previous_one_image_margin') })
+                .layoutWeight(CommonConstants.THREE)
+                .height(CommonConstants.FULL_PERCENT)
+                .borderRadius($r('app.float.banner_img_border_radius'))
+
+              Column() {
+                Text(item.getTitle())
+                  .fontSize(new BreakpointType($r('app.float.previous_one_title_font_sm'),
+                    $r('app.float.previous_one_title_font_md'), $r('app.float.previous_one_title_font_lg'))
+                    .getValue(this.currentWidthBreakpoint))
+                  .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                  .maxLines(2)
+                  .textOverflow({ overflow: TextOverflow.Ellipsis })
+                Text(item.getContent())
+                  .fontSize(new BreakpointType($r('app.float.previous_one_content_font_sm'),
+                    $r('app.float.previous_one_content_font_md'), $r('app.float.previous_one_content_font_lg'))
+                    .getValue(this.currentWidthBreakpoint))
+                  .opacity(CommonConstants.TEXT_OPACITY[1])
+                  .fontWeight(FontWeight.Normal)
+                  .margin({ top: $r('app.float.previous_one_content_margin') })
+                  .maxLines(1)
+                Text(item.getOtherInfo())
+                  .fontSize(new BreakpointType($r('app.float.previous_one_content_font_sm'),
+                    $r('app.float.previous_one_content_font_md'), $r('app.float.previous_one_content_font_lg'))
+                    .getValue(this.currentWidthBreakpoint))
+                  .opacity(CommonConstants.TEXT_OPACITY[1])
+                  .fontWeight(FontWeight.Normal)
+                  .margin({ top: $r('app.float.previous_one_content_margin') })
+                  .maxLines(1)
+
+                Row() {
+                  Button(index === 0 ? HomeConstants.HOME_BUTTON_TEXT[1] : HomeConstants.HOME_BUTTON_TEXT[2])
+                    .borderRadius($r('app.float.previous_one_button_radius'))
+                    .backgroundColor($r('app.color.previous_one_button_origin'))
+                    .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                    .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.previous_one_button_font_lg') : $r('app.float.previous_one_button_font'))
+                    .fontColor(Color.White)
+                    .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.previous_one_button_height_lg') : $r('app.float.previous_one_button_height'))
+                    .layoutWeight(1)
+                    .groupDefaultFocus(index === 0 ? true : false)
+                    .onClick(() => {
+                      this.pageInfo.setPageName(CommonConstants.PAGE_NAMES[1]);
+                      this.pageInfo.pushPath({ name: CommonConstants.PAGE_NAMES[1] });
+                    })
+
+                  Blank()
+                    .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD ?
+                    $r('app.float.previous_blank_width_md') : $r('app.float.previous_blank_width'))
+
+                  Button(HomeConstants.HOME_BUTTON_TEXT[3])
+                    .borderRadius($r('app.float.previous_one_button_radius'))
+                    .backgroundColor($r('app.color.button_background'))
+                    .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                    .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.previous_one_button_font_lg') : $r('app.float.previous_one_button_font'))
+                    .fontColor($r('app.color.previous_one_button_origin'))
+                    .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.previous_one_button_height_lg') : $r('app.float.previous_one_button_height'))
+                    .layoutWeight(1)
+                }
+                .width(CommonConstants.FULL_PERCENT)
+                .alignItems(VerticalAlign.Bottom)
+                .layoutWeight(1)
+              }
+              .alignItems(HorizontalAlign.Start)
+              .justifyContent(FlexAlign.Start)
+              .layoutWeight(CommonConstants.FOUR)
+            }
+            .aspectRatio(CommonConstants.PREVIOUS_ONE_ROW_RATIO)
+            .width(CommonConstants.FULL_PERCENT)
+            .padding({
+              top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'),
+              bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'),
+              left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'),
+              right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding')
+            })
+            .backgroundColor($r('app.color.home_component_background'))
+            .borderRadius($r('app.float.card_radius'))
+          }
+        }, (item: VideoImage, index: number) => index + JSON.stringify(item))
+
+        ForEach(this.previousVideoImgListTwo, (item: VideoImage, index: number) => {
+          GridCol({
+            span: {
+              sm: BreakpointConstants.GRID_COLUMN_SPANS[6],
+              md: BreakpointConstants.GRID_COLUMN_SPANS[4],
+              lg: BreakpointConstants.GRID_COLUMN_SPANS[4]
+            }
+          }) {
+            Column() {
+              Image(item.getImgSrc())
+                .width(CommonConstants.FULL_PERCENT)
+                .aspectRatio(PreviousVideoUtil.getImgAspectRatio(this.currentWidthBreakpoint, index))
+                .objectFit(ImageFit.Fill)
+                .focusable(true)
+                .borderRadius({
+                  topLeft: $r('app.float.previous_two_radius'),
+                  topRight: $r('app.float.previous_two_radius')
+                })
+
+              Column() {
+                Text(item.getTitle())
+                  .fontWeight(FontWeight.Normal)
+                  .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  $r('app.float.previous_two_title_font_lg') : $r('app.float.previous_two_title_font'))
+                  .maxLines(1)
+                  .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  $r('app.float.previous_two_title_line_lg') : $r('app.float.previous_two_title_line'))
+                Text(item.getContent())
+                  .fontWeight(FontWeight.Normal)
+                  .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  $r('app.float.previous_two_content_font_lg') : $r('app.float.previous_two_content_font'))
+                  .margin({ top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  $r('app.float.previous_two_content_margin_lg') : $r('app.float.previous_two_content_margin') })
+                  .opacity(CommonConstants.TEXT_OPACITY[0])
+                  .maxLines(1)
+                  .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  $r('app.float.previous_two_content_line_lg') : $r('app.float.previous_two_content_line'))
+              }
+              .alignItems(HorizontalAlign.Start)
+              .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+              $r('app.float.previous_two_column_height_lg') : $r('app.float.previous_two_column_height'))
+              .width(CommonConstants.FULL_PERCENT)
+              .padding({
+                top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding'),
+                bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.previous_two_column_bottom_lg') : $r('app.float.previous_two_column_bottom'),
+                left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding'),
+                right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding')
+              })
+            }
+            .translate({ y: (((index === 2) || (index === 3)) && (this.currentWidthBreakpoint ===
+            BreakpointConstants.BREAKPOINT_MD)) ? HomeConstants.PREVIOUS_TWO_TRANSLATE_MD : '0' })
+            .backgroundColor($r('app.color.home_component_background'))
+            .borderRadius($r('app.float.previous_two_radius'))
+          }
+        }, (item: VideoImage, index: number) => index + JSON.stringify(item))
+      }
+      .onBreakpointChange((breakPoints) => {
+        this.previousVideoImgListTwo = new VideoImgViewModel().getPreviousVideoTwo(breakPoints);
+      })
+      .padding({
+        left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+          $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint),
+        right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+          $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint)})
+      .margin({ top: $r('app.float.main_daily_margin') })
+    }
+    .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[8]))
+    .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ?
+      $r('app.float.side_bar_width') : 0 })
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/view/RecommendedVideo.ets b/MultiVideoApplication/features/home/src/main/ets/view/RecommendedVideo.ets
new file mode 100644
index 0000000000000000000000000000000000000000..8ec3aa93263f06740d2cca44cef23ea3509cba74
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/view/RecommendedVideo.ets
@@ -0,0 +1,221 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { componentUtils } from '@kit.ArkUI';
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { BreakpointType, Logger, WindowUtil } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel';
+import { getTabIndex, VideoContent, VideoImgRating, VideoTitle } from './CommonView';
+import { RightClickMenu, VideoDialog } from './VideoDialog';
+
+@Component
+export struct RecommendedVideo {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('videoGridColumn') videoGridColumn: string = CommonConstants.VIDEO_GRID_COLUMNS[0];
+  @StorageLink('windowWidth') windowWidth: number = 0;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  @State isShowingRecommendBorder: boolean = false;
+  @State currentRecommendFocusIndex: number = 0;
+  @State videoImgList: VideoImage[] = new VideoImgViewModel().getVideoImgList();
+  private videoDialogController?: CustomDialogController;
+  private windowUtil?: WindowUtil;
+  // [Start recommended_video]
+  build() {
+    // Video grid layout.
+    Grid() {
+      ForEach(this.videoImgList, (item: VideoImage, index: number) => {
+        GridItem() {
+          Column() {
+            // [Start recommended_video_stack]
+            Stack({ alignContent: Alignment.Center }) {
+              // [StartExclude recommended_video]
+              Image(item.getImgSrc())
+                .focusable(true)
+                .groupDefaultFocus(index === 0 ? true : false)
+                .objectFit(ImageFit.Fill)
+                .width(CommonConstants.FULL_PERCENT)
+                .height(CommonConstants.FULL_PERCENT)
+                .draggable(false)
+                .borderRadius($r('app.float.banner_focus_radius'))
+                .id(JSON.stringify(item))
+              Column() {
+                VideoImgRating({ rating: item.getRating() })
+              }
+              .width(CommonConstants.FULL_PERCENT)
+              .height(CommonConstants.FULL_PERCENT)
+              .alignItems(HorizontalAlign.End)
+              .justifyContent(FlexAlign.End)
+              // [EndExclude recommended_video]
+            }
+            // [StartExclude recommended_video_stack]
+            .width(CommonConstants.FULL_PERCENT)
+            .aspectRatio(HomeConstants.VIDEO_DIALOG_ASPECT_RATIO)
+            // [StartExclude recommended_video]
+            .focusable(true)
+            // The width and height vary with the container assembly and the aspect ratio remains unchanged.
+            .hoverEffect(HoverEffect.Scale)
+            // [EndExclude recommended_video]
+
+            .gesture(
+              LongPressGesture({ repeat: false })
+                .onAction(() => {
+                  if (index !== 0) {
+                    Logger.info(`Please long press the first image`);
+                    return;
+                  }
+                  // Obtains all attributes of a component.
+                  let modePosition: componentUtils.ComponentInfo =
+                    componentUtils.getRectangleById(JSON.stringify(item));
+                  let windowOffset = modePosition.windowOffset;
+                  let size = modePosition.size;
+                  // Obtains the height of the component from the top.
+                  let rectTop: number = px2vp(windowOffset.y);
+                  let rectTop2: number = px2vp(windowOffset.y + Math.floor(size.height));
+                  // Obtains the width of the component from the left.
+                  let rectLeft: number = px2vp(windowOffset.x);
+                  let topHeightNeeded: number = new BreakpointType(HomeConstants.VIDEO_DIALOG_HEIGHTS[0],
+                    HomeConstants.VIDEO_DIALOG_HEIGHTS[1], HomeConstants.VIDEO_DIALOG_HEIGHTS[2])
+                    .getValue(this.currentWidthBreakpoint) + rectTop - rectTop2;
+                  if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+                    topHeightNeeded += HomeConstants.HOME_HEADER_HEIGHT_SM;
+                  }
+                  let dialogYOffset: number;
+                  // Adaptive pop-up window expansion direction.
+                  if (topHeightNeeded < rectTop) {
+                    dialogYOffset = rectTop2 - new BreakpointType(HomeConstants.VIDEO_DIALOG_HEIGHTS[0],
+                      HomeConstants.VIDEO_DIALOG_HEIGHTS[1], HomeConstants.VIDEO_DIALOG_HEIGHTS[2])
+                      .getValue(this.currentWidthBreakpoint);
+                  } else {
+                    dialogYOffset = rectTop;
+                  }
+                  this.windowUtil = WindowUtil.getInstance();
+                  let isLayoutFullScreen: boolean = true;
+                  let mainWindow = this.windowUtil!.getMainWindow();
+                  isLayoutFullScreen = mainWindow!.getWindowProperties().isLayoutFullScreen;
+                  // Subtract the width and height of the window in the PC/2in1 device.
+                  if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPE && !isLayoutFullScreen) {
+                    dialogYOffset -= HomeConstants.WINDOW_UNDEFINED_TOP;
+                    rectLeft -= HomeConstants.WINDOW_UNDEFINED_LEFT;
+                  } else {
+                    Logger.info(`No need to subtract extra height`);
+                  }
+                  this.videoDialogController = new CustomDialogController({
+                    builder: VideoDialog(),
+                    autoCancel: true,
+                    customStyle: true,
+                    alignment: DialogAlignment.TopStart,
+                    offset: {
+                      dx: rectLeft,
+                      dy: dialogYOffset
+                    }
+                  });
+                  // Display the customized pop-up window to play the video.
+                  this.videoDialogController.open();
+                }))
+            // [EndExclude recommended_video_stack]
+            .bindContextMenu(RightClickMenu(this.currentWidthBreakpoint), ResponseType.RightClick)
+            // [End recommended_video_stack]
+
+            VideoTitle({ title: item.getTitle() })
+            VideoContent({ content: item.getContent() })
+          }
+          .alignItems(HorizontalAlign.Start)
+        }
+      }, (item: VideoImage, index: number) => index + JSON.stringify(item))
+    }
+    // [StartExclude recommended_video]
+    .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[4]))
+    .editMode(false)
+    // Sets the number of grid layout columns and evenly divides the width.
+    .columnsTemplate(this.videoGridColumn)
+    .rowsTemplate(CommonConstants.VIDEO_GRID_COLUMNS[0])
+    .width(CommonConstants.FULL_PERCENT)
+    .rowsGap($r('app.float.video_grid_gap'))
+    .columnsGap($r('app.float.video_grid_gap'))
+    // Dynamically calculates the total height based on the following numbers of breakpoints.
+    .height(this.getGridHeight(this.videoGridColumn, this.currentWidthBreakpoint, this.windowWidth))
+    .padding({
+      left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ?
+        new BreakpointType($r('app.float.home_recommended_padding_sm'), $r('app.float.home_recommended_padding_md'),
+        $r('app.float.home_recommended_padding_lg')).getValue(this.currentWidthBreakpoint) :
+        new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+        $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint),
+      right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+        $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint),
+      top: $r('app.float.recommended_video_padding_top'),
+      bottom: $r('app.float.recommended_video_padding_bottom')
+    })
+    // Zooming and pinching functions of the grid.
+    // [EndExclude recommended_video]
+    .gesture(PinchGesture({ fingers: 2 }).onActionUpdate((event: GestureEvent) => {
+      if (event.scale > 1 && this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM) {
+        if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+          animateTo({
+            duration: HomeConstants.ANIMATION_DURATION
+          }, () => {
+            this.videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[1];
+          })
+        } else {
+          animateTo({
+            duration: HomeConstants.ANIMATION_DURATION
+          }, () => {
+            this.videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[2];
+          })
+        }
+      } else if (event.scale < 1 && this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM) {
+        if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+          animateTo({
+            duration: HomeConstants.ANIMATION_DURATION
+          }, () => {
+            this.videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[2];
+          })
+        } else {
+          animateTo({
+            duration: HomeConstants.ANIMATION_DURATION
+          }, () => {
+            this.videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[3];
+          })
+        }
+      } else {
+        Logger.info(`Two-finger operation is not supported`);
+      }
+    }))
+  }
+
+  getGridHeight(videoGridColumn: string, currentWidthBreakpoint: string, windowWidth: number): string {
+    // Obtain the window width and subtract the blank parts on both sides.
+    let result: number = px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0],
+      HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint);
+    if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      result = result - HomeConstants.LG_SIDEBAR_WIDTH;
+    }
+    // Calculate the width of a single image based on the number of grid columns.
+    if (videoGridColumn === CommonConstants.VIDEO_GRID_COLUMNS[0]) {
+      result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 1) / HomeConstants.TWO;
+    } else if (videoGridColumn === CommonConstants.VIDEO_GRID_COLUMNS[1]) {
+      result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 2) / CommonConstants.THREE;
+    } else if (videoGridColumn === CommonConstants.VIDEO_GRID_COLUMNS[2]) {
+      result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 3) / CommonConstants.FOUR;
+    } else {
+      result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 4) / HomeConstants.FIVE;
+    }
+    // Calculate the height of a single image, title, and content, and calculate the total height of the grid layout.
+    return result / HomeConstants.VIDEO_DIALOG_ASPECT_RATIO * HomeConstants.TWO +
+      HomeConstants.VIDEO_GRID_DESCRIPTION_HEIGHT + HomeConstants.HEIGHT_UNIT;
+  }
+}
+// [End recommended_video]
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/view/VideoDialog.ets b/MultiVideoApplication/features/home/src/main/ets/view/VideoDialog.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1d5a19d5dad128c71feac118838403621b44771d
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/view/VideoDialog.ets
@@ -0,0 +1,194 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { resourceManager } from '@kit.LocalizationKit';
+import { common } from '@kit.AbilityKit';
+import { media } from '@kit.MediaKit';
+import { BusinessError } from '@kit.BasicServicesKit';
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { BreakpointType, Logger } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+
+@Builder function MenuItemFunction(img: Resource, text: ResourceStr) {
+  Row() {
+    Image(img)
+      .width($r('app.float.dialog_icon_size'))
+      .height($r('app.float.dialog_icon_size'))
+      .margin({ right: $r('app.float.dialog_icon_margin') })
+    Text(text)
+      .layoutWeight(1)
+      .fontSize($r('app.float.dialog_text_font'))
+      .fontWeight(FontWeight.Normal)
+  }
+  .height($r('app.float.dialog_menu_row_height'))
+}
+
+@Builder export function RightClickMenu(currentWidthBreakpoint: string) {
+  Column() {
+    MenuItemFunction($r('app.media.ic_public_view_list'), HomeConstants.VIDEO_DIALOG_OPTIONS[0])
+    MenuItemFunction($r('app.media.ic_public_highlights'), HomeConstants.VIDEO_DIALOG_OPTIONS[1])
+    MenuItemFunction($r('app.media.ic_public_favor'), HomeConstants.VIDEO_DIALOG_OPTIONS[2])
+  }
+  .borderRadius($r('app.float.dialog_text_radius'))
+  .backgroundColor(Color.White)
+  .width(currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.dialog_text_col_width_lg') :
+    $r('app.float.dialog_text_col_width'))
+  .padding({
+    left: $r('app.float.dialog_text_col_padding'),
+    right: $r('app.float.dialog_text_col_padding')
+  })
+}
+
+@CustomDialog
+export struct VideoDialog {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  private xComponentController: XComponentController = new XComponentController();
+  private surfaceId: string = '';
+  private avPlayer?: media.AVPlayer;
+  private context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
+  private url?: resourceManager.RawFileDescriptor;
+  private playState: boolean = true;
+  private controller?: CustomDialogController;
+  private onError: (err: BusinessError) => void = (err: BusinessError) => {
+    Logger.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
+    this.avPlayer!.reset();
+  }
+  private onStateChange: (state: media.AVPlayerState) => void = async (state: media.AVPlayerState) => {
+    if (this.avPlayer === undefined) {
+      Logger.error(`AvPlayer is undefined`);
+      return;
+    }
+    switch (state) {
+      case CommonConstants.AV_PLAYER_IDLE_STATE:
+        this.url = await this.context.resourceManager.getRawFd(CommonConstants.PRODUCT_VIDEO_NAME);
+        this.avPlayer.fdSrc = this.url;
+        Logger.info('AVPlayer state idle called.');
+        break;
+      case CommonConstants.AV_PLAYER_INITIALIZED_STATE:
+      // This status is reported after the AVPlayer sets the playback source.
+        Logger.info('AVPlayer initialized called.');
+        this.avPlayer.surfaceId = this.surfaceId;
+        this.avPlayer.prepare().then(() => {
+          Logger.info('AVPlayer prepare succeeded.');
+        }, (err: BusinessError) => {
+          Logger.error(`Invoke prepare failed, code is ${err.code}, message is ${err.message}`);
+          this.avPlayer!.reset();
+        });
+        break;
+      case CommonConstants.AV_PLAYER_PREPARED_STATE:
+      // Report the state machine after the prepare interface is successfully invoked.
+        this.avPlayer.videoScaleType = media.VideoScaleType.VIDEO_SCALE_TYPE_FIT;
+        Logger.info('AVPlayer state prepared called.');
+        this.avPlayer.play();
+        break;
+      case CommonConstants.AV_PLAYER_PLAYING_STATE:
+      // Trigger the state machine to report after the play interface is successfully invoked.
+        Logger.info('AVPlayer state playing called.');
+        this.playState = true;
+        break;
+      case CommonConstants.AV_PLAYER_PAUSED_STATE:
+      // Trigger the state machine to report after the pause function is successfully invoked.
+        Logger.info('AVPlayer state paused called.');
+        this.playState = false;
+        break;
+      case CommonConstants.AV_PLAYER_COMPLETED_STATE:
+      // Trigger the state machine to report after the playback ends.
+        Logger.info('AVPlayer state completed called.');
+        this.avPlayer.stop();
+        break;
+      case CommonConstants.AV_PLAYER_STOPPED_STATE:
+      // Trigger the state machine to report after the stop interface is successfully invoked.
+        Logger.info('AVPlayer state stopped called.');
+        break;
+      case CommonConstants.AV_PLAYER_RELEASE_STATE:
+        Logger.info('AVPlayer state released called.');
+        break;
+      case CommonConstants.AV_PLAYER_ERROR_STATE:
+        Logger.error('AVPlayer state error called.');
+        break;
+      default:
+        Logger.info('AVPlayer state unknown called.');
+        break;
+    }
+  }
+
+  aboutToAppear() {
+    this.createAvPlayer();
+  }
+
+  aboutToDisappear() {
+    try {
+      this.avPlayer!.off('error');
+      this.avPlayer!.off('stateChange');
+    } catch (exception) {
+      Logger.error('Failed to unregister callback. Code: ' + JSON.stringify(exception));
+    }
+    this.avPlayer!.release();
+  }
+
+  build() {
+    Column() {
+      Column() {
+        XComponent({
+          type: XComponentType.SURFACE,
+          controller: this.xComponentController
+        })
+          .borderRadius($r('app.float.x_component_radius'))
+          .onLoad(() => {
+            this.surfaceId = this.xComponentController.getXComponentSurfaceId();
+          })
+          .width(CommonConstants.FULL_PERCENT)
+          .height(CommonConstants.FULL_PERCENT)
+      }
+      .margin({ bottom: $r('app.float.dialog_col_margin') })
+      .height(new BreakpointType($r('app.float.dialog_col_height_sm'), $r('app.float.dialog_col_height_md'),
+        $r('app.float.dialog_col_height_lg')).getValue(this.currentWidthBreakpoint))
+      .width(new BreakpointType($r('app.float.dialog_col_width_sm'), $r('app.float.dialog_col_width_md'),
+        $r('app.float.dialog_col_width_lg')).getValue(this.currentWidthBreakpoint))
+      .aspectRatio(HomeConstants.VIDEO_DIALOG_ASPECT_RATIO)
+      .onClick(() => {
+        if (this.avPlayer!.state === CommonConstants.AV_PLAYER_STOPPED_STATE) {
+          this.avPlayer!.prepare();
+          return;
+        }
+        if (!this.playState) {
+          this.avPlayer!.play();
+        } else {
+          this.avPlayer!.pause();
+        }
+      })
+
+      RightClickMenu(this.currentWidthBreakpoint)
+    }
+    .alignItems(HorizontalAlign.Start)
+  }
+
+  async createAvPlayer(): Promise<void> {
+    this.avPlayer = await media.createAVPlayer();
+    // Entering the idle state.
+    this.url = await this.context.resourceManager.getRawFd(CommonConstants.PRODUCT_VIDEO_NAME);
+    this.avPlayer.fdSrc = this.url;
+    this.setAVPlayerCallback();
+    // Initialize the playback status.
+    this.playState = false;
+  }
+
+  // Registering the avplayer callback function.
+  setAVPlayerCallback(): void {
+    this.avPlayer!.on('error', this.onError);
+    // Callback function for state machine changes.
+    this.avPlayer!.on('stateChange', this.onStateChange);
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/viewmodel/BannerViewModel.ets b/MultiVideoApplication/features/home/src/main/ets/viewmodel/BannerViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..59cf99e5a7b54b960dfbe4ff92879b3ad08a5cab
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/viewmodel/BannerViewModel.ets
@@ -0,0 +1,261 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonConstants } from '@ohos/commons';
+import { BreakpointType } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+
+export class BannerViewModel {
+  private bannerList: Banner[] = [];
+  private bannerImgList: BannerImg[] = new BannerImgModel().getBannerImgList();
+  private bannerDescriptionList: BannerDescription[] = new BannerDescriptionModel().getBannerDescriptionList();
+
+  constructor() {
+    this.bannerList.push(new Banner(this.bannerImgList[0], this.bannerDescriptionList[3]));
+    this.bannerList.push(new Banner(this.bannerImgList[2], this.bannerDescriptionList[1]));
+    this.bannerList.push(new Banner(this.bannerImgList[1], this.bannerDescriptionList[0]));
+    this.bannerList.push(new Banner(this.bannerImgList[2], this.bannerDescriptionList[1]));
+    this.bannerList.push(new Banner(this.bannerImgList[3], this.bannerDescriptionList[2]));
+  }
+
+  getBannerList(): Banner[] {
+    return this.bannerList;
+  }
+}
+
+class BannerImgModel {
+  private BannerImgList: BannerImg[] = [];
+
+  constructor() {
+    this.BannerImgList.push(new BannerImg($r("app.media.ic_banner_1"), $r('app.media.ic_banner_1_sm'),
+      new BreakpointType($r('app.float.banner_height_sm'), $r('app.float.banner_height_md'),
+        $r('app.float.banner_height_lg'))));
+    this.BannerImgList.push(new BannerImg($r('app.media.ic_banner_2'), $r('app.media.ic_banner_2_sm'),
+      new BreakpointType($r('app.float.banner_height_sm'), $r('app.float.banner_height_md'),
+        $r('app.float.banner_height_lg'))));
+    this.BannerImgList.push(new BannerImg($r('app.media.ic_banner_3'), $r('app.media.ic_banner_3_sm'),
+      new BreakpointType($r('app.float.banner_height_sm'), $r('app.float.banner_height_md'),
+        $r('app.float.banner_height_lg'))));
+    this.BannerImgList.push(new BannerImg($r("app.media.ic_banner_4"), $r("app.media.ic_banner_4"),
+      new BreakpointType($r('app.float.banner_height_sm'), $r('app.float.banner_height_md'),
+        $r('app.float.banner_height_lg'))));
+  }
+
+  getBannerImgList(): BannerImg[] {
+    return this.BannerImgList;
+  }
+}
+
+class BannerDescriptionModel {
+  private bannerDescriptionList: BannerDescription[] = [];
+
+  constructor() {
+    this.bannerDescriptionList.push(new BannerDescription(HomeConstants.BANNER_TEXT_1,
+      new BreakpointType([$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],
+        [$r('app.float.banner_text_1_font_md'), $r('app.float.banner_text_2_font_md')],
+        [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')]),
+      [CommonConstants.FONT_WEIGHT_700, CommonConstants.FONT_WEIGHT_500],
+      new BreakpointType([$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],
+        [$r('app.float.banner_text_1_height_md'), $r('app.float.banner_text_2_height_md')],
+        [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')]),
+      new BreakpointType([], [HomeConstants.BANNER_TEXT_1_LEFT_MD], []), new BreakpointType(
+        HomeConstants.BANNER_TEXT_1_TOP_SM, HomeConstants.BANNER_TEXT_1_TOP_MD, HomeConstants.BANNER_TEXT_1_TOP_LG),
+      new BreakpointType(true, false, true), new BreakpointType(false, false, false)));
+    this.bannerDescriptionList.push(new BannerDescription(HomeConstants.BANNER_TEXT_2,
+      new BreakpointType([$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],
+        [$r('app.float.banner_text_1_font_md'), $r('app.float.banner_text_2_font_md')],
+        [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')]),
+      [CommonConstants.FONT_WEIGHT_700, CommonConstants.FONT_WEIGHT_500],
+      new BreakpointType([$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],
+        [$r('app.float.banner_text_1_height_md'), $r('app.float.banner_text_2_height_md')],
+        [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')]),
+      new BreakpointType([], [HomeConstants.BANNER_TEXT_2_LEFT_MD], [HomeConstants.BANNER_TEXT_2_LEFT_LG]),
+      new BreakpointType(HomeConstants.BANNER_TEXT_2_TOP_SM, HomeConstants.BANNER_TEXT_2_TOP_MD,
+        HomeConstants.BANNER_TEXT_2_TOP_LG), new BreakpointType(true, false, false),
+      new BreakpointType(false, false, false)));
+    this.bannerDescriptionList.push(new BannerDescription(HomeConstants.BANNER_TEXT_3,
+      new BreakpointType([$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],
+        [$r('app.float.banner_text_1_font_md'), $r('app.float.banner_text_2_font_md')],
+        [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')]),
+      [CommonConstants.FONT_WEIGHT_700, CommonConstants.FONT_WEIGHT_500],
+      new BreakpointType([$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],
+        [$r('app.float.banner_text_1_height_md'), $r('app.float.banner_text_2_height_md')],
+        [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')]),
+      new BreakpointType([], [''], []), new BreakpointType([''], [], []),
+      new BreakpointType(true, true, true), new BreakpointType(true, true, true)));
+    this.bannerDescriptionList.push(new BannerDescription(HomeConstants.BANNER_TEXT_4,
+      new BreakpointType([$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],
+        [$r('app.float.banner_text_1_font_md'), $r('app.float.banner_text_2_font_md')],
+        [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')]),
+      [CommonConstants.FONT_WEIGHT_700, CommonConstants.FONT_WEIGHT_500],
+      new BreakpointType([$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],
+        [$r('app.float.banner_text_1_height_md'), $r('app.float.banner_text_2_height_md')],
+        [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')]),
+      new BreakpointType([], [''], []), new BreakpointType([''], [], []),
+      new BreakpointType(true, true, true), new BreakpointType(true, true, true)));
+  }
+
+  getBannerDescriptionList(): BannerDescription[] {
+    return this.bannerDescriptionList;
+  }
+}
+
+export class Banner {
+  /**
+   * Img of the banner.
+   */
+  private bannerImg: BannerImg;
+
+  /**
+   * Description of the banner.
+   */
+  private description: BannerDescription;
+
+  constructor(bannerImg: BannerImg, description: BannerDescription) {
+    this.bannerImg = bannerImg;
+    this.description = description;
+  }
+
+  getBannerImg(): BannerImg {
+    return this.bannerImg;
+  }
+
+  getDescription(): BannerDescription {
+    return this.description;
+  }
+}
+
+class BannerDescription {
+  /**
+   * Text description.
+   */
+  private description: ResourceStr[];
+
+  /**
+   * Font size of text.
+   */
+  private fontSize: BreakpointType<Resource[]>;
+
+  /**
+   * Font weight of text.
+   */
+  private fontWeight: number[];
+
+  /**
+   * Line height of text.
+   */
+  private lineHeight: BreakpointType<Resource[]>;
+
+  /**
+   * Top position for text.
+   */
+  private topPosition: BreakpointType<string[]>;
+
+  /**
+   * Left position for text.
+   */
+  private leftPosition: BreakpointType<string[]>;
+
+  /**
+   * Whether text is horizontal center.
+   */
+  private isLeftCenter: BreakpointType<boolean>;
+
+  /**
+   * Whether text is vertical center.
+   */
+  private isTopCenter: BreakpointType<boolean>;
+
+  constructor(description: ResourceStr[], fontSize: BreakpointType<Resource[]>, fontWeight: number[],
+              lineHeight: BreakpointType<Resource[]>, leftPosition: BreakpointType<string[]>,
+              topPosition: BreakpointType<string[]>, isLeftCenter: BreakpointType<boolean>,
+              isTopCenter: BreakpointType<boolean>) {
+    this.description = description;
+    this.fontSize = fontSize;
+    this.fontWeight = fontWeight;
+    this.lineHeight = lineHeight;
+    this.leftPosition = leftPosition;
+    this.topPosition = topPosition;
+    this.isLeftCenter = isLeftCenter;
+    this.isTopCenter = isTopCenter;
+  }
+
+  getDescription(): ResourceStr[] {
+    return this.description;
+  }
+
+  getFontSize(): BreakpointType<Resource[]> {
+    return this.fontSize;
+  }
+
+  getFontWeight(): number[] {
+    return this.fontWeight;
+  }
+
+  getLineHeight(): BreakpointType<Resource[]> {
+    return this.lineHeight;
+  }
+
+  getLeftPosition(): BreakpointType<string[]> {
+    return this.leftPosition;
+  }
+
+  getTopPosition(): BreakpointType<string[]> {
+    return this.topPosition;
+  }
+
+  getIsLeftCenter(): BreakpointType<boolean> {
+    return this.isLeftCenter;
+  }
+
+  getIsTopCenter(): BreakpointType<boolean> {
+    return this.isTopCenter;
+  }
+}
+
+class BannerImg {
+  /**
+   * Image src of the banner.
+   */
+  private imgSrc: Resource;
+
+  /**
+   * Image src of the banner for sm.
+   */
+  private imgSrcSm: Resource;
+
+  /**
+   * Height of the banner.
+   */
+  private height: BreakpointType<Resource>;
+
+  constructor(imgSrc: Resource, imgSrcSm: Resource,height: BreakpointType<Resource>) {
+    this.imgSrc = imgSrc;
+    this.imgSrcSm = imgSrcSm;
+    this.height = height;
+  }
+
+  getImgSrc(): Resource {
+    return this.imgSrc;
+  }
+
+  getImgSrcSm(): Resource {
+    return this.imgSrcSm;
+  }
+
+  getHeight(): BreakpointType<Resource> {
+    return this.height;
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/viewmodel/FooterTabViewModel.ets b/MultiVideoApplication/features/home/src/main/ets/viewmodel/FooterTabViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..80aa9a46faa6515e367851987f94ee6a6770eba8
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/viewmodel/FooterTabViewModel.ets
@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class FooterTabViewModel {
+  private tabList: FooterTab[] = [];
+
+  constructor() {
+    this.tabList.push(new FooterTab($r('app.string.tab_home'), $r("app.media.ic_tabs_home_normal"),
+      $r('app.media.ic_tabs_home_selected'), $r('app.media.ic_tabs_home_white')));
+    this.tabList.push(new FooterTab($r('app.string.tab_development'), $r('app.media.ic_tabs_post_normal'),
+      $r('app.media.ic_tabs_post_selected'), $r('app.media.ic_tabs_post_white')));
+    this.tabList.push(new FooterTab($r('app.string.tab_member'), $r('app.media.ic_tabs_vip_normal'),
+      $r('app.media.ic_tabs_vip_selected'), $r('app.media.ic_tabs_vip_white')));
+    this.tabList.push(new FooterTab($r('app.string.tab_mine'), $r('app.media.ic_tabs_mine_normal'),
+      $r('app.media.ic_tabs_mine_selected'), $r('app.media.ic_tabs_mine_white')));
+  }
+
+  getTabList(): FooterTab[] {
+    return this.tabList;
+  }
+}
+
+export class FooterTab {
+  /**
+   * Name of the tab.
+   */
+  private name: Resource;
+
+  /**
+   * Icon of the tab.
+   */
+  private icon: Resource;
+
+  /**
+   * Icon selected.
+   */
+  private iconSelected: Resource;
+
+  /**
+   * White icon.
+   */
+  private iconWhite: Resource;
+
+  constructor(name: Resource, icon: Resource, iconSelected: Resource, iconWhite: Resource) {
+    this.name = name;
+    this.icon = icon;
+    this.iconSelected = iconSelected;
+    this.iconWhite = iconWhite;
+  }
+
+  getName(): Resource {
+    return this.name;
+  }
+
+  getIcon(): Resource {
+    return this.icon;
+  }
+
+  getIconSelected(): Resource {
+    return this.iconSelected;
+  }
+
+  getIconWhite(): Resource {
+    return this.iconWhite;
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/viewmodel/IconViewModel.ets b/MultiVideoApplication/features/home/src/main/ets/viewmodel/IconViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..c2b149a91b3764b423c8b3bc0170a61eb67fc42f
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/viewmodel/IconViewModel.ets
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HomeConstants } from '../constants/HomeConstants';
+
+export class IconViewModel {
+  private iconList: VideoIcon[] = [];
+
+  constructor() {
+    this.iconList.push(new VideoIcon(HomeConstants.ICON_LIST[0], $r('app.media.icon_all')));
+    this.iconList.push(new VideoIcon(HomeConstants.ICON_LIST[1], $r('app.media.icon_weekly_hot')));
+    this.iconList.push(new VideoIcon(HomeConstants.ICON_LIST[2], $r('app.media.icon_free')));
+    this.iconList.push(new VideoIcon(HomeConstants.ICON_LIST[3], $r('app.media.icon_classic')));
+    this.iconList.push(new VideoIcon(HomeConstants.ICON_LIST[4], $r('app.media.icon_vip')));
+    this.iconList.push(new VideoIcon(HomeConstants.ICON_LIST[5], $r('app.media.icon_kid')));
+    this.iconList.push(new VideoIcon(HomeConstants.ICON_LIST[6], $r('app.media.icon_live')));
+    this.iconList.push(new VideoIcon(HomeConstants.ICON_LIST[7], $r('app.media.icon_fitness')));
+    this.iconList.push(new VideoIcon(HomeConstants.ICON_LIST[8], $r('app.media.icon_classes')));
+  }
+
+  getIconList(): VideoIcon[] {
+    return this.iconList;
+  }
+}
+
+export class VideoIcon {
+  /**
+   * Name of the icon.
+   */
+  private name: ResourceStr;
+
+  /**
+   * Image of the icon.
+   */
+  private image: Resource;
+
+  constructor(name: ResourceStr, image: Resource) {
+    this.name = name;
+    this.image = image;
+  }
+
+  getName(): ResourceStr {
+    return this.name;
+  }
+
+  getImage(): Resource {
+    return this.image;
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/ets/viewmodel/VideoImgViewModel.ets b/MultiVideoApplication/features/home/src/main/ets/viewmodel/VideoImgViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3ad84f50a49e473eeca57ea9b6c3f5f8ff08c9dd
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/ets/viewmodel/VideoImgViewModel.ets
@@ -0,0 +1,184 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+
+export class VideoImgViewModel {
+  private videoImgList: VideoImage[] = [];
+  private newVideoImgList: VideoImage[] = [];
+  private dailyVideoImgList: VideoImage[] = [];
+  private mainDailyVideoImg: VideoImage;
+  private previousVideoImgListOne: VideoImage[] = [];
+  private previousVideoImgListTwo: VideoImage[] = [];
+
+  constructor() {
+    this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_1'), HomeConstants.VIDEO_GRID_RATES[0],
+      HomeConstants.VIDEO_GRID_NAMES[0], HomeConstants.VIDEO_GRID_CONTENTS[0], ''));
+    this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_2'), HomeConstants.VIDEO_GRID_RATES[1],
+      HomeConstants.VIDEO_GRID_NAMES[1], HomeConstants.VIDEO_GRID_CONTENTS[1], ''));
+    this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_3'), HomeConstants.VIDEO_GRID_RATES[2],
+      HomeConstants.VIDEO_GRID_NAMES[2], HomeConstants.VIDEO_GRID_CONTENTS[2], ''));
+    this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_4'), HomeConstants.VIDEO_GRID_RATES[3],
+      HomeConstants.VIDEO_GRID_NAMES[3], HomeConstants.VIDEO_GRID_CONTENTS[3], ''));
+    this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_5'), HomeConstants.VIDEO_GRID_RATES[4],
+      HomeConstants.VIDEO_GRID_NAMES[4], HomeConstants.VIDEO_GRID_CONTENTS[4], ''));
+    this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_6'), HomeConstants.VIDEO_GRID_RATES[5],
+      HomeConstants.VIDEO_GRID_NAMES[5], HomeConstants.VIDEO_GRID_CONTENTS[5], ''));
+    this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_7'), HomeConstants.VIDEO_GRID_RATES[6],
+      HomeConstants.VIDEO_GRID_NAMES[6], HomeConstants.VIDEO_GRID_CONTENTS[6], ''));
+    this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_8'), HomeConstants.VIDEO_GRID_RATES[7],
+      HomeConstants.VIDEO_GRID_NAMES[7], HomeConstants.VIDEO_GRID_CONTENTS[7], ''));
+    this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_9'), HomeConstants.VIDEO_GRID_RATES[8],
+      HomeConstants.VIDEO_GRID_NAMES[8], HomeConstants.VIDEO_GRID_CONTENTS[8], ''));
+    this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_10'), HomeConstants.VIDEO_GRID_RATES[9],
+      HomeConstants.VIDEO_GRID_NAMES[9], HomeConstants.VIDEO_GRID_CONTENTS[9], ''));
+
+    this.newVideoImgList.push(new VideoImage($r('app.media.new_video_1'), HomeConstants.NEW_VIDEO_RATES[0],
+      HomeConstants.NEW_VIDEO_NAMES[0], HomeConstants.NEW_VIDEO_CONTENTS[0], ''));
+    this.newVideoImgList.push(new VideoImage($r('app.media.new_video_2'), HomeConstants.NEW_VIDEO_RATES[1],
+      HomeConstants.NEW_VIDEO_NAMES[1], HomeConstants.NEW_VIDEO_CONTENTS[1], ''));
+    this.newVideoImgList.push(new VideoImage($r('app.media.new_video_3'), HomeConstants.NEW_VIDEO_RATES[2],
+      HomeConstants.NEW_VIDEO_NAMES[2], HomeConstants.NEW_VIDEO_CONTENTS[2], ''));
+    this.newVideoImgList.push(new VideoImage($r('app.media.new_video_4'), HomeConstants.NEW_VIDEO_RATES[3],
+      HomeConstants.NEW_VIDEO_NAMES[3], HomeConstants.NEW_VIDEO_CONTENTS[3], ''));
+    this.newVideoImgList.push(new VideoImage($r('app.media.new_video_5'), HomeConstants.NEW_VIDEO_RATES[4],
+      HomeConstants.NEW_VIDEO_NAMES[4], HomeConstants.NEW_VIDEO_CONTENTS[4], ''));
+    this.newVideoImgList.push(new VideoImage($r('app.media.new_video_6'), HomeConstants.NEW_VIDEO_RATES[5],
+      HomeConstants.NEW_VIDEO_NAMES[5], HomeConstants.NEW_VIDEO_CONTENTS[5], ''));
+    this.newVideoImgList.push(new VideoImage($r('app.media.new_video_7'), HomeConstants.NEW_VIDEO_RATES[6],
+      HomeConstants.NEW_VIDEO_NAMES[6], HomeConstants.NEW_VIDEO_CONTENTS[6], ''));
+
+    this.mainDailyVideoImg = new VideoImage($r('app.media.daily_video'), HomeConstants.MAIN_DAILY_VIDEO_RATE,
+      HomeConstants.MAIN_DAILY_VIDEO_NAME, HomeConstants.MAIN_DAILY_VIDEO_CONTENT, HomeConstants.MAIN_DAILY_VIDEO_MORE);
+
+    this.dailyVideoImgList.push(new VideoImage($r('app.media.daily_video_1'), HomeConstants.DAILY_VIDEO_RATES[0],
+      HomeConstants.DAILY_VIDEO_NAMES[0], HomeConstants.DAILY_VIDEO_CONTENTS[0], ''));
+    this.dailyVideoImgList.push(new VideoImage($r('app.media.daily_video_2'), HomeConstants.DAILY_VIDEO_RATES[1],
+      HomeConstants.DAILY_VIDEO_NAMES[1], HomeConstants.DAILY_VIDEO_CONTENTS[1], ''));
+    this.dailyVideoImgList.push(new VideoImage($r('app.media.daily_video_3'), HomeConstants.DAILY_VIDEO_RATES[2],
+      HomeConstants.DAILY_VIDEO_NAMES[2], HomeConstants.DAILY_VIDEO_CONTENTS[2], ''));
+    this.dailyVideoImgList.push(new VideoImage($r('app.media.daily_video_4'), HomeConstants.DAILY_VIDEO_RATES[3],
+      HomeConstants.DAILY_VIDEO_NAMES[3], HomeConstants.DAILY_VIDEO_CONTENTS[3], ''));
+
+    this.previousVideoImgListOne.push(new VideoImage($r('app.media.previous_video_1'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_ONE[0], HomeConstants.PREVIOUS_VIDEO_CONTENTS_ONE[0],
+      HomeConstants.PREVIOUS_VIDEO_MORE_ONE[0]));
+    this.previousVideoImgListOne.push(new VideoImage($r('app.media.previous_video_2'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_ONE[1], HomeConstants.PREVIOUS_VIDEO_CONTENTS_ONE[1],
+      HomeConstants.PREVIOUS_VIDEO_MORE_ONE[1]));
+    this.previousVideoImgListOne.push(new VideoImage($r('app.media.previous_video_3'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_ONE[2], HomeConstants.PREVIOUS_VIDEO_CONTENTS_ONE[2],
+      HomeConstants.PREVIOUS_VIDEO_MORE_ONE[2]));
+
+    this.previousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_4'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[0], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[0], ''));
+    this.previousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_5'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[1], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[1], ''));
+    this.previousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_6'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[2], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[2], ''));
+    this.previousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_7'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[3], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[3], ''));
+    this.previousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_8'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[4], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[4], ''));
+    this.previousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_9'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[5], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[5], ''));
+  }
+
+  getVideoImgList(): VideoImage[] {
+    return this.videoImgList;
+  }
+
+  getNewVideoImgList(): VideoImage[] {
+    return this.newVideoImgList;
+  }
+
+  getDailyVideoImgList(): VideoImage[] {
+    return this.dailyVideoImgList;
+  }
+
+  getMainDailyVideoImg(): VideoImage {
+    return this.mainDailyVideoImg;
+  }
+
+  getPreviousVideoOne(): VideoImage[] {
+    return this.previousVideoImgListOne;
+  }
+
+  getPreviousVideoTwo(currentWidthBreakpoint: string): VideoImage[] {
+    if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      return this.previousVideoImgListTwo;
+    } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      return this.previousVideoImgListTwo.slice(1, 6);
+    } else {
+      return this.previousVideoImgListTwo.slice(0, 4);
+    }
+  }
+}
+
+export class VideoImage {
+  /**
+   * Image src of the video.
+   */
+  private imgSrc: Resource;
+
+  /**
+   * Rating of the video.
+   */
+  private rating: string;
+
+  /**
+   * Title of the video.
+   */
+  private title: ResourceStr;
+
+  /**
+   * Content of the video.
+   */
+  private content: ResourceStr;
+
+  /**
+   * Other information of the video.
+   */
+  private otherInfo: ResourceStr;
+
+  constructor(imgSrc: Resource, rating: string, title: ResourceStr, content: ResourceStr, otherInfo: ResourceStr) {
+    this.imgSrc = imgSrc;
+    this.rating = rating;
+    this.title = title;
+    this.content = content;
+    this.otherInfo = otherInfo;
+  }
+
+  getImgSrc(): Resource {
+    return this.imgSrc;
+  }
+
+  getRating(): string {
+    return this.rating;
+  }
+
+  getTitle(): ResourceStr {
+    return this.title;
+  }
+
+  getContent(): ResourceStr {
+    return this.content;
+  }
+
+  getOtherInfo(): ResourceStr {
+    return this.otherInfo;
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/module.json5 b/MultiVideoApplication/features/home/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7a40a436c346c4b3523266ab801e76f4d38bcec0
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/module.json5
@@ -0,0 +1,11 @@
+{
+  "module": {
+    "name": "home",
+    "type": "har",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/element/color.json b/MultiVideoApplication/features/home/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..1eb948ae93981eca88ae45a2eea7f8e5f8a7d76d
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/element/color.json
@@ -0,0 +1,56 @@
+{
+  "color": [
+    {
+      "name": "tab_sel_color",
+      "value": "#ED6F21"
+    },
+    {
+      "name": "swiper_indicator",
+      "value": "#4DFFFFFF"
+    },
+    {
+      "name": "main_daily_rating_background",
+      "value": "#4D000000"
+    },
+    {
+      "name": "button_background",
+      "value": "#0D000000"
+    },
+    {
+      "name": "previous_one_button_origin",
+      "value": "#ED6F21"
+    },
+    {
+      "name": "home_component_background",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "side_bar_background",
+      "value": "#0DFFFFFF"
+    },
+    {
+      "name": "normal_font_color",
+      "value": "#182431"
+    },
+    {
+      "name": "home_content_background",
+      "value": "#222A3E"
+    },
+    {
+      "name": "home_content_background_md",
+      "value": "#273148"
+    },
+    {
+      "name": "search_bar_background",
+      "value": "#66FFFFFF"
+    },
+    {
+      "name": "search_bar_background_origin",
+      "value": "#030418"
+    },
+    {
+      "name": "tab_background_color",
+      "value": "#F1F3F5"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/element/float.json b/MultiVideoApplication/features/home/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..f7cfb5c8a0746960b629f48a92ac83e84e8558b8
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/element/float.json
@@ -0,0 +1,912 @@
+{
+  "float": [
+    {
+      "name": "icon_tab_width",
+      "value": "24vp"
+    },
+    {
+      "name": "icon_tab_height",
+      "value": "24vp"
+    },
+    {
+      "name": "tab_font_size",
+      "value": "10fp"
+    },
+    {
+      "name": "tab_top_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "tab_height_lg",
+      "value": "100vp"
+    },
+    {
+      "name": "banner_height_sm",
+      "value": "368vp"
+    },
+    {
+      "name": "banner_height_md",
+      "value": "194vp"
+    },
+    {
+      "name": "banner_height_lg",
+      "value": "242vp"
+    },
+    {
+      "name": "banner_text_1_font_sm",
+      "value": "18fp"
+    },
+    {
+      "name": "banner_text_1_font_md",
+      "value": "14fp"
+    },
+    {
+      "name": "banner_text_1_font_lg",
+      "value": "24fp"
+    },
+    {
+      "name": "banner_text_1_height_sm",
+      "value": "24vp"
+    },
+    {
+      "name": "banner_text_1_height_md",
+      "value": "19vp"
+    },
+    {
+      "name": "banner_text_1_height_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "banner_text_2_font_sm",
+      "value": "11fp"
+    },
+    {
+      "name": "banner_text_2_font_md",
+      "value": "11fp"
+    },
+    {
+      "name": "banner_text_2_font_lg",
+      "value": "17fp"
+    },
+    {
+      "name": "banner_text_2_height_sm",
+      "value": "15vp"
+    },
+    {
+      "name": "banner_text_2_height_md",
+      "value": "15vp"
+    },
+    {
+      "name": "banner_text_2_height_lg",
+      "value": "23vp"
+    },
+    {
+      "name": "home_content_padding_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "home_content_padding_md",
+      "value": "24vp"
+    },
+    {
+      "name": "home_content_padding_lg",
+      "value": "36vp"
+    },
+    {
+      "name": "home_recommended_padding_sm",
+      "value": "112vp"
+    },
+    {
+      "name": "home_recommended_padding_md",
+      "value": "120vp"
+    },
+    {
+      "name": "home_recommended_padding_lg",
+      "value": "132vp"
+    },
+    {
+      "name": "home_content_padding",
+      "value": "24vp"
+    },
+    {
+      "name": "banner_img_border_radius",
+      "value": "16vp"
+    },
+    {
+      "name": "swiper_item_size",
+      "value": "6vp"
+    },
+    {
+      "name": "swiper_prev_next_margin_lg",
+      "value": "64vp"
+    },
+    {
+      "name": "swiper_prev_next_margin_md",
+      "value": "12vp"
+    },
+    {
+      "name": "swiper_prev_next_margin_sm",
+      "value": "0vp"
+    },
+    {
+      "name": "swiper_selected_item_width",
+      "value": "12vp"
+    },
+    {
+      "name": "indicator_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "new_banner_3_margin",
+      "value": "6vp"
+    },
+    {
+      "name": "banner_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "banner_padding_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "icon_img_size",
+      "value": "40vp"
+    },
+    {
+      "name": "icon_img_radius",
+      "value": "20vp"
+    },
+    {
+      "name": "icon_img_bottom_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "icon_list_font_size",
+      "value": "12fp"
+    },
+    {
+      "name": "icon_list_font_height",
+      "value": "20vp"
+    },
+    {
+      "name": "icon_list_height",
+      "value": "76vp"
+    },
+    {
+      "name": "icon_list_column_padding_lg",
+      "value": "24vp"
+    },
+    {
+      "name": "icon_list_column_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "icon_list_column_margin_lg",
+      "value": "4vp"
+    },
+    {
+      "name": "video_grid_gap",
+      "value": "12vp"
+    },
+    {
+      "name": "new_video_height_sm",
+      "value": "120vp"
+    },
+    {
+      "name": "new_video_height_md",
+      "value": "161vp"
+    },
+    {
+      "name": "new_video_height_lg",
+      "value": "211vp"
+    },
+    {
+      "name": "new_video_columns_gap",
+      "value": "12vp"
+    },
+    {
+      "name": "grid_row_gutter",
+      "value": "12vp"
+    },
+    {
+      "name": "main_daily_title_font_lg",
+      "value": "20fp"
+    },
+    {
+      "name": "main_daily_title_font",
+      "value": "16fp"
+    },
+    {
+      "name": "main_daily_margin_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "main_daily_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "search_top_height",
+      "value": "56vp"
+    },
+    {
+      "name": "search_top_height_more",
+      "value": "92vp"
+    },
+    {
+      "name": "search_top_padding_top",
+      "value": "36vp"
+    },
+    {
+      "name": "search_top_padding",
+      "value": "24vp"
+    },
+    {
+      "name": "search_tab_font_selected",
+      "value": "24fp"
+    },
+    {
+      "name": "search_tab_font",
+      "value": "18fp"
+    },
+    {
+      "name": "main_daily_rating_font_lg",
+      "value": "12fp"
+    },
+    {
+      "name": "main_daily_rating_font",
+      "value": "8fp"
+    },
+    {
+      "name": "main_daily_rating_height_lg",
+      "value": "18vp"
+    },
+    {
+      "name": "main_daily_rating_height",
+      "value": "12vp"
+    },
+    {
+      "name": "main_daily_rating_width_lg",
+      "value": "30vp"
+    },
+    {
+      "name": "main_daily_rating_width",
+      "value": "20vp"
+    },
+    {
+      "name": "main_daily_rating_right_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "main_daily_rating_right",
+      "value": "12vp"
+    },
+    {
+      "name": "main_daily_rating_top_lg",
+      "value": "6vp"
+    },
+    {
+      "name": "main_daily_rating_top",
+      "value": "5vp"
+    },
+    {
+      "name": "main_daily_rating_radius_lg",
+      "value": "3vp"
+    },
+    {
+      "name": "main_daily_rating_radius",
+      "value": "2vp"
+    },
+    {
+      "name": "main_daily_row_height_lg",
+      "value": "46vp"
+    },
+    {
+      "name": "main_daily_row_height",
+      "value": "33vp"
+    },
+    {
+      "name": "small_daily_image_height_lg",
+      "value": "68vp"
+    },
+    {
+      "name": "small_daily_image_height_md",
+      "value": "44vp"
+    },
+    {
+      "name": "small_daily_image_height_sm",
+      "value": "40vp"
+    },
+    {
+      "name": "small_daily_image_width_lg",
+      "value": "129vp"
+    },
+    {
+      "name": "small_daily_image_width_md",
+      "value": "84vp"
+    },
+    {
+      "name": "small_daily_image_width_sm",
+      "value": "76vp"
+    },
+    {
+      "name": "main_daily_other_font_lg",
+      "value": "16fp"
+    },
+    {
+      "name": "main_daily_other_font",
+      "value": "14fp"
+    },
+    {
+      "name": "main_daily_content_font_lg",
+      "value": "14fp"
+    },
+    {
+      "name": "main_daily_content_font",
+      "value": "12fp"
+    },
+    {
+      "name": "small_daily_column_margin_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "small_daily_column_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "main_daily_button_font_lg",
+      "value": "14fp"
+    },
+    {
+      "name": "main_daily_button_font",
+      "value": "12fp"
+    },
+    {
+      "name": "main_daily_button_height_lg",
+      "value": "34vp"
+    },
+    {
+      "name": "main_daily_button_width_lg",
+      "value": "77vp"
+    },
+    {
+      "name": "main_daily_button_radius",
+      "value": "16vp"
+    },
+    {
+      "name": "small_daily_row_padding_lg",
+      "value": "16vp"
+    },
+    {
+      "name": "small_daily_row_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "card_radius",
+      "value": "36vp"
+    },
+    {
+      "name": "daily_title_font_lg",
+      "value": "16fp"
+    },
+    {
+      "name": "daily_title_font",
+      "value": "14fp"
+    },
+    {
+      "name": "daily_title_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "daily_content_font",
+      "value": "12fp"
+    },
+    {
+      "name": "daily_content_margin",
+      "value": "2vp"
+    },
+    {
+      "name": "daily_grid_gap",
+      "value": "12vp"
+    },
+    {
+      "name": "previous_one_image_margin_sm",
+      "value": "10vp"
+    },
+    {
+      "name": "previous_one_image_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "previous_one_title_font_sm",
+      "value": "14fp"
+    },
+    {
+      "name": "previous_one_title_font_md",
+      "value": "16fp"
+    },
+    {
+      "name": "previous_one_title_font_lg",
+      "value": "18fp"
+    },
+    {
+      "name": "previous_one_content_font_sm",
+      "value": "10fp"
+    },
+    {
+      "name": "previous_one_content_font_md",
+      "value": "12fp"
+    },
+    {
+      "name": "previous_one_content_font_lg",
+      "value": "14fp"
+    },
+    {
+      "name": "previous_one_content_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "previous_one_button_radius",
+      "value": "12.5vp"
+    },
+    {
+      "name": "previous_one_button_font_lg",
+      "value": "14fp"
+    },
+    {
+      "name": "previous_one_button_font",
+      "value": "12fp"
+    },
+    {
+      "name": "previous_one_button_height_lg",
+      "value": "34vp"
+    },
+    {
+      "name": "previous_one_button_height",
+      "value": "25vp"
+    },
+    {
+      "name": "previous_one_row_padding_sm",
+      "value": "10vp"
+    },
+    {
+      "name": "previous_one_row_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "previous_two_title_font_lg",
+      "value": "20fp"
+    },
+    {
+      "name": "previous_two_title_font",
+      "value": "14fp"
+    },
+    {
+      "name": "previous_two_title_line_lg",
+      "value": "28vp"
+    },
+    {
+      "name": "previous_two_title_line",
+      "value": "21vp"
+    },
+    {
+      "name": "previous_two_content_font_lg",
+      "value": "16fp"
+    },
+    {
+      "name": "previous_two_content_font",
+      "value": "12fp"
+    },
+    {
+      "name": "previous_two_content_margin_lg",
+      "value": "6vp"
+    },
+    {
+      "name": "previous_two_content_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "previous_two_content_line_lg",
+      "value": "20vp"
+    },
+    {
+      "name": "previous_two_content_line",
+      "value": "18vp"
+    },
+    {
+      "name": "previous_two_column_height_lg",
+      "value": "80vp"
+    },
+    {
+      "name": "previous_two_column_height",
+      "value": "61vp"
+    },
+    {
+      "name": "previous_two_column_padding_lg",
+      "value": "12vp"
+    },
+    {
+      "name": "previous_two_column_padding",
+      "value": "8vp"
+    },
+    {
+      "name": "previous_two_column_bottom_lg",
+      "value": "14vp"
+    },
+    {
+      "name": "previous_two_column_bottom",
+      "value": "10vp"
+    },
+    {
+      "name": "previous_two_radius",
+      "value": "18vp"
+    },
+    {
+      "name": "sub_title_font",
+      "value": "16fp"
+    },
+    {
+      "name": "sub_title_row_height",
+      "value": "22vp"
+    },
+    {
+      "name": "sub_title_row_margin",
+      "value": "13vp"
+    },
+    {
+      "name": "focus_more_size",
+      "value": "6vp"
+    },
+    {
+      "name": "video_img_size_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "video_img_size",
+      "value": "24vp"
+    },
+    {
+      "name": "video_img_rating_font",
+      "value": "7fp"
+    },
+    {
+      "name": "video_img_rating_height",
+      "value": "12vp"
+    },
+    {
+      "name": "video_img_rating_width",
+      "value": "20vp"
+    },
+    {
+      "name": "video_img_rating_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "video_img_rating_radius",
+      "value": "2vp"
+    },
+    {
+      "name": "video_content_font",
+      "value": "12fp"
+    },
+    {
+      "name": "video_content_line",
+      "value": "18vp"
+    },
+    {
+      "name": "video_content_margin",
+      "value": "2vp"
+    },
+    {
+      "name": "video_title_font",
+      "value": "14fp"
+    },
+    {
+      "name": "video_title_line",
+      "value": "21vp"
+    },
+    {
+      "name": "video_title_line_lg",
+      "value": "24vp"
+    },
+    {
+      "name": "video_title_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "top_tab_list_height_selected",
+      "value": "33vp"
+    },
+    {
+      "name": "top_tab_list_height",
+      "value": "25vp"
+    },
+    {
+      "name": "top_tab_list_top_selected",
+      "value": "12vp"
+    },
+    {
+      "name": "top_tab_list_top",
+      "value": "18vp"
+    },
+    {
+      "name": "top_tab_list_bottom_selected",
+      "value": "11vp"
+    },
+    {
+      "name": "top_tab_list_bottom",
+      "value": "13vp"
+    },
+    {
+      "name": "top_tab_img_size",
+      "value": "24vp"
+    },
+    {
+      "name": "top_tab_img_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "tab_size",
+      "value": "76vp"
+    },
+    {
+      "name": "top_bar_height",
+      "value": "56vp"
+    },
+    {
+      "name": "bottom_navigation",
+      "value": "24vp"
+    },
+    {
+      "name": "tab_size_lg",
+      "value": "56vp"
+    },
+    {
+      "name": "search_input_font",
+      "value": "16fp"
+    },
+    {
+      "name": "search_input_height",
+      "value": "40vp"
+    },
+    {
+      "name": "search_input_left",
+      "value": "36vp"
+    },
+    {
+      "name": "search_input_right",
+      "value": "12vp"
+    },
+    {
+      "name": "search_img_size",
+      "value": "16vp"
+    },
+    {
+      "name": "search_img_left",
+      "value": "12vp"
+    },
+    {
+      "name": "history_img_size",
+      "value": "24vp"
+    },
+    {
+      "name": "history_img_left",
+      "value": "24vp"
+    },
+    {
+      "name": "bottom_tab_bar_width_lg",
+      "value": "96vp"
+    },
+    {
+      "name": "x_component_radius",
+      "value": "24vp"
+    },
+    {
+      "name": "dialog_col_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "dialog_col_height_sm",
+      "value": "161vp"
+    },
+    {
+      "name": "dialog_col_height_md",
+      "value": "268vp"
+    },
+    {
+      "name": "dialog_col_height_lg",
+      "value": "347vp"
+    },
+    {
+      "name": "dialog_col_width_sm",
+      "value": "280vp"
+    },
+    {
+      "name": "dialog_col_width_md",
+      "value": "466vp"
+    },
+    {
+      "name": "dialog_col_width_lg",
+      "value": "604vp"
+    },
+    {
+      "name": "dialog_text_col_width_lg",
+      "value": "186vp"
+    },
+    {
+      "name": "dialog_text_col_width",
+      "value": "156vp"
+    },
+    {
+      "name": "dialog_text_col_padding",
+      "value": "16vp"
+    },
+    {
+      "name": "dialog_icon_size",
+      "value": "24vp"
+    },
+    {
+      "name": "dialog_icon_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "dialog_text_font",
+      "value": "16fp"
+    },
+    {
+      "name": "dialog_menu_row_height",
+      "value": "48vp"
+    },
+    {
+      "name": "dialog_text_radius",
+      "value": "16vp"
+    },
+    {
+      "name": "immersive_banner_height_sm",
+      "value": "334vp"
+    },
+    {
+      "name": "immersive_banner_height_md",
+      "value": "370vp"
+    },
+    {
+      "name": "immersive_banner_height_lg",
+      "value": "396vp"
+    },
+    {
+      "name": "immersive_background_height_sm",
+      "value": "384vp"
+    },
+    {
+      "name": "immersive_background_height_md",
+      "value": "420vp"
+    },
+    {
+      "name": "immersive_background_height_lg",
+      "value": "720vp"
+    },
+    {
+      "name": "side_bar_width",
+      "value": "96vp"
+    },
+    {
+      "name": "top_navigation_height",
+      "value": "36vp"
+    },
+    {
+      "name": "previous_blank_width_md",
+      "value": "20vp"
+    },
+    {
+      "name": "previous_blank_width",
+      "value": "6vp"
+    },
+    {
+      "name": "recommended_video_padding_top",
+      "value": "12vp"
+    },
+    {
+      "name": "recommended_video_padding_bottom",
+      "value": "6vp"
+    },
+    {
+      "name": "immersive_text_1_font_sm",
+      "value": "18fp"
+    },
+    {
+      "name": "immersive_text_1_font_md",
+      "value": "28fp"
+    },
+    {
+      "name": "immersive_text_1_font_lg",
+      "value": "40fp"
+    },
+    {
+      "name": "immersive_text_1_line_sm",
+      "value": "20vp"
+    },
+    {
+      "name": "immersive_text_1_line_md",
+      "value": "36vp"
+    },
+    {
+      "name": "immersive_text_1_line_lg",
+      "value": "54vp"
+    },
+    {
+      "name": "immersive_text_2_font_sm",
+      "value": "14fp"
+    },
+    {
+      "name": "immersive_text_2_font_md",
+      "value": "21fp"
+    },
+    {
+      "name": "immersive_text_2_font_lg",
+      "value": "28fp"
+    },
+    {
+      "name": "immersive_text_2_line_sm",
+      "value": "19vp"
+    },
+    {
+      "name": "immersive_text_2_line_md",
+      "value": "28vp"
+    },
+    {
+      "name": "immersive_text_2_line_lg",
+      "value": "48vp"
+    },
+    {
+      "name": "immersive_col_padding_left_sm",
+      "value": "0vp"
+    },
+    {
+      "name": "immersive_col_padding_left_md",
+      "value": "82vp"
+    },
+    {
+      "name": "immersive_col_padding_left_lg",
+      "value": "58vp"
+    },
+    {
+      "name": "immersive_col_padding_top_sm",
+      "value": "139vp"
+    },
+    {
+      "name": "immersive_col_padding_top_md",
+      "value": "90vp"
+    },
+    {
+      "name": "immersive_col_padding_top_lg",
+      "value": "106vp"
+    },
+    {
+      "name": "immersive_col_margin",
+      "value": "36vp"
+    },
+    {
+      "name": "daily_small_img_radius",
+      "value": "8vp"
+    },
+    {
+      "name": "text_focus_radius",
+      "value": "4vp"
+    },
+    {
+      "name": "top_text_width_selected",
+      "value": "48vp"
+    },
+    {
+      "name": "top_text_width",
+      "value": "36vp"
+    },
+    {
+      "name": "banner_focus_radius",
+      "value": "16vp"
+    },
+    {
+      "name": "daily_main_focus_radius",
+      "value": "18vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/element/string.json b/MultiVideoApplication/features/home/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..2f8ec58923ee80084ff9540cd56f612975f42ed5
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/element/string.json
@@ -0,0 +1,180 @@
+{
+  "string": [
+    {
+      "name": "tab_home",
+      "value": "首页"
+    },
+    {
+      "name": "tab_development",
+      "value": "动态"
+    },
+    {
+      "name": "tab_member",
+      "value": "会员购"
+    },
+    {
+      "name": "tab_mine",
+      "value": "我的"
+    },
+    {
+      "name": "sift",
+      "value": "精选"
+    },
+    {
+      "name": "video",
+      "value": "视频"
+    },
+    {
+      "name": "community",
+      "value": "社区"
+    },
+    {
+      "name": "news",
+      "value": "新闻"
+    },
+    {
+      "name": "shop",
+      "value": "购物"
+    },
+    {
+      "name": "science",
+      "value": "科技"
+    },
+    {
+      "name": "finance",
+      "value": "财经"
+    },
+    {
+      "name": "history",
+      "value": "历史"
+    },
+    {
+      "name": "affairs",
+      "value": "军事"
+    },
+    {
+      "name": "all",
+      "value": "全部"
+    },
+    {
+      "name": "heat_list",
+      "value": "周热榜"
+    },
+    {
+      "name": "free",
+      "value": "免费"
+    },
+    {
+      "name": "sutra",
+      "value": "经典"
+    },
+    {
+      "name": "prefecture",
+      "value": "专区"
+    },
+    {
+      "name": "kids_only",
+      "value": "儿童专区"
+    },
+    {
+      "name": "zone",
+      "value": "华为专区"
+    },
+    {
+      "name": "Premium_products",
+      "value": "付费精品"
+    },
+    {
+      "name": "Fitness",
+      "value": "健身专区"
+    },
+    {
+      "name": "new",
+      "value": "新  品  发  布  会"
+    },
+    {
+      "name": "folding",
+      "value": "折叠旗舰及全场景"
+    },
+    {
+      "name": "cultural",
+      "value": "建筑人文史迹"
+    },
+    {
+      "name": "europe",
+      "value": "欧洲建筑的历史责任在载对欧洲建筑风格的形成和"
+    },
+    {
+      "name": "life",
+      "value": "华为全场景智慧生活"
+    },
+    {
+    "name": "landscape",
+    "value": "数百万年前，地貌形成"
+    },
+    {
+      "name": "explore",
+      "value": "生命之源:探索生命之源"
+    },
+    {
+      "name": "source",
+      "value": "探索生命之源"
+    },
+    {
+      "name": "lonely",
+      "value": "孤独者"
+    },
+    {
+      "name": "film",
+      "value": "电影 · 剧情片 · 2008年上"
+    },
+    {
+      "name": "plays",
+      "value": "75.2万次播放"
+    },
+    {
+      "name": "release",
+      "value": "新片发布"
+    },
+    {
+      "name": "tablet",
+      "value": "每日佳片"
+    },
+    {
+      "name": "back",
+      "value": "往期回顾"
+    },
+    {
+      "name": "follow",
+      "value": "关注"
+    },
+    {
+      "name": "play_on",
+      "value": "继续播放"
+    },
+    {
+      "name": "player",
+      "value": "播放"
+    },
+    {
+      "name": "cache",
+      "value": "缓存"
+    },
+    {
+      "name": "search",
+      "value": "搜索..."
+    },
+    {
+      "name": "binge_watch",
+      "value": "追剧"
+    },
+    {
+      "name": "Collect",
+      "value": "Collect"
+    },
+    {
+      "name": "like",
+      "value": "点赞"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/daily_small_video.png b/MultiVideoApplication/features/home/src/main/resources/base/media/daily_small_video.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f43d3ccf7e831c2c215e751a15142653af2c45c
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/daily_small_video.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video.png b/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video.png
new file mode 100644
index 0000000000000000000000000000000000000000..50d1bc6164ec948f602520920684b00ea21e01c8
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video_1.png b/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..9761e16a96eaed9045b0efb9e724b8e9781c5b24
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video_1.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video_2.png b/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..826fae5320eb9c568a98a944132caa80cb029c48
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video_2.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video_3.png b/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..28df9e1c5a0f5e869d63937a9b13a64a5d1925d5
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video_3.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video_4.png b/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..31eddee895f4afecdd7706ed18a39b37de75f3f5
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/daily_video_4.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_1.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..d20e1160539be01de69117c20202705cad5a337c
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_1.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_1_sm.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_1_sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf5314b9a9de6a20f135d4387b0675986a04cf12
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_1_sm.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_2.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..70f05756cc7b65fedf9492bcf4c860dc8a5262b4
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_2.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_2_sm.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_2_sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ed7d3da497b89ab62edc96e36c911d8a084e73b
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_2_sm.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_3.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..4d25956554b51f097820a212bb2457b67ac2c99d
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_3.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_3_sm.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_3_sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ac535c88b8ffac76cdcb58da0a213e8d312bdb6
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_3_sm.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_4.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a54b3b93be48fff421a40f68275573bee910d9f
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_banner_4.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_arrow_left.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_arrow_left.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a8a9835a05b06db88c9b3efb0016e9da95dcd611
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_arrow_left.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 12 24" version="1.1">
+    <title>Public/ic_public_arrow_left_filled</title>
+    <defs>
+        <path d="M4.45710678,18.363961 C4.27486211,18.5462057 4.03977569,18.6434029 3.80116649,18.6555525 L3.75,18.6568542 C3.49407768,18.6568542 3.23815536,18.5592232 3.04289322,18.363961 C2.664203,17.9852708 2.65272754,17.3784226 3.00846683,16.9859046 L3.04289322,16.9497475 L7.4623106,12.5303301 C7.74474335,12.2478973 7.75483023,11.7962506 7.49257125,11.5017311 L7.4623106,11.4696699 L3.04289322,7.05025253 C2.65236893,6.65972824 2.65236893,6.02656326 3.04289322,5.63603897 C3.23876747,5.44016472 3.49568281,5.3425346 3.75240679,5.34314575 L3.80373089,5.34458136 C4.02596704,5.35646617 4.24499331,5.44214324 4.42094964,5.60161259 L4.45710678,5.63603897 L9.23007755,10.4090097 C10.0930665,11.2719987 10.108477,12.6616054 9.2763091,13.5434021 L9.23007755,13.5909903 L4.45710678,18.363961 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_arrow_left_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_路径" fill="#FFFFFF" fill-rule="nonzero" transform="translate(6.319544, 12.000000) scale(-1, 1) translate(-6.319544, -12.000000) " xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_arrow_right.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_arrow_right.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ee67988c6081fc307aff51d27919c677f76a1718
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_arrow_right.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 12 24" version="1.1">
+    <title>Public/ic_public_arrow_right_filled</title>
+    <defs>
+        <path d="M4.45710678,18.363961 C4.27486211,18.5462057 4.03977569,18.6434029 3.80116649,18.6555525 L3.75,18.6568542 C3.49407768,18.6568542 3.23815536,18.5592232 3.04289322,18.363961 C2.664203,17.9852708 2.65272754,17.3784226 3.00846683,16.9859046 L3.04289322,16.9497475 L7.4623106,12.5303301 C7.74474335,12.2478973 7.75483023,11.7962506 7.49257125,11.5017311 L7.4623106,11.4696699 L3.04289322,7.05025253 C2.65236893,6.65972824 2.65236893,6.02656326 3.04289322,5.63603897 C3.23876747,5.44016472 3.49568281,5.3425346 3.75240679,5.34314575 L3.80373089,5.34458136 C4.02596704,5.35646617 4.24499331,5.44214324 4.42094964,5.60161259 L4.45710678,5.63603897 L9.23007755,10.4090097 C10.0930665,11.2719987 10.108477,12.6616054 9.2763091,13.5434021 L9.23007755,13.5909903 L4.45710678,18.363961 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_arrow_right_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_路径" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_favor.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_favor.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6ed99945bb665979fb509f76d42aa8244eec279f
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_favor.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_favor</title>
+    <defs>
+        <path d="M2.79452153,4.7123106 C5.14551849,2.36131365 8.79928584,2.107094 11.432027,3.94965165 C11.7516058,4.17462816 12.0562133,4.42806087 12.3404631,4.7123106 L12.2043753,4.58084491 C12.2233722,4.59824909 12.242503,4.61626317 12.2617634,4.63489833 L12.3404631,4.7123106 C12.4463878,4.81823529 12.5489662,4.9211352 12.648204,5.02101694 C12.8006003,5.17431629 12.9510582,5.32642644 13.0993468,5.47711379 L13.2191159,5.60002561 C13.6770026,6.06850208 14.0393959,6.45079635 14.3071512,6.74792182 C14.5844414,7.05562795 14.5597843,7.52986111 14.2520782,7.80715123 C13.9443721,8.08444136 13.4701389,8.05978431 13.1928488,7.75207818 L13.0507824,7.59620087 C12.6483435,7.15907177 12.0572399,6.55040776 11.2798029,5.77297077 L11.1010067,5.60225587 C9.04064077,3.72439192 5.84685559,3.78129689 3.8551817,5.77297077 C1.92651003,7.70164245 2.0120054,10.7789756 3.90277368,13.3 C4.53008781,14.1364188 5.51152739,15.2077248 6.77873984,16.4381266 L6.77873984,16.4381266 L6.81870427,16.4767845 C7.40284236,17.0397797 8.47345885,17.9853684 10.0244732,19.3076065 L10.0244732,19.3076065 L11.0614453,20.1872947 C11.6195629,20.6586926 12.4361195,20.6594461 12.9949572,20.1892045 L12.9949572,20.1892045 L13.9427905,19.3880425 C15.4712291,18.089643 16.5394672,17.1471153 17.1420446,16.5658605 L17.1420446,16.5658605 L17.4041204,16.3113955 C18.6081005,15.1345125 19.5440439,14.1079415 20.15,13.3 C22.0407683,10.7789756 22.1262637,7.70164245 20.197592,5.77297077 C18.5002127,4.07559151 15.9297294,3.783452 13.9318066,4.89655225 C13.6450802,4.60532736 13.3503168,4.30795075 13.0475699,4.00520382 C12.9789659,3.93659986 12.9093438,3.8695609 12.8387502,3.80408714 C15.4505548,2.12241169 18.9709638,2.42502225 21.2582521,4.7123106 C23.7644258,7.21848428 23.6558802,11.1254931 21.35,14.2 L21.35,14.2 L21.2782836,14.2947342 C20.5730317,15.2179162 19.5206923,16.355509 18.1834318,17.6454496 L18.1834318,17.6454496 L18.1355571,17.6914643 C17.4696453,18.3292759 16.3271085,19.333852 14.702026,20.7110339 L14.702026,20.7110339 L13.960879,21.3368085 C12.8429053,22.2775429 11.2097915,22.2760359 10.0935559,21.3332398 C7.99068585,19.5571115 6.56921236,18.3148051 5.81899059,17.5964036 L5.81899059,17.5964036 L5.59843695,17.3824031 C4.34444158,16.1565572 3.3607736,15.0773332 2.70277368,14.2 C0.396893522,11.1254931 0.288347854,7.21848428 2.79452153,4.7123106 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_favor" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="蒙版" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_highlights.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_highlights.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7f0c77423290d138e1c06b9de163af52d0ba0195
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_highlights.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_collect</title>
+    <defs>
+        <path d="M13.1382247,1.63492692 C13.4833468,1.80525484 13.7626949,2.084603 13.9330228,2.42972506 L15.9516683,6.51994748 C16.0973303,6.81509095 16.3788959,7.01966033 16.704606,7.06698879 L21.2184345,7.72288645 C22.174888,7.86186728 22.8375805,8.74989227 22.6985997,9.70634578 C22.6432568,10.0872106 22.4639042,10.4392098 22.1883079,10.7078499 L18.9220709,13.891644 C18.6863849,14.1213812 18.5788364,14.4523814 18.6344743,14.7767754 L19.4055283,19.2723649 C19.56891,20.2249537 18.9291313,21.1296265 17.9765426,21.2930083 C17.5972167,21.3580678 17.2070226,21.2962671 16.8663667,21.1171737 L13.7741812,19.4922374 C14.2496954,19.1811107 14.7200919,18.8635936 15.1853663,18.5396878 L17.5643784,19.7894766 C17.6130435,19.8150614 17.6687856,19.82389 17.722975,19.8145958 C17.8493388,19.7929227 17.9371713,19.679939 17.9303866,19.5549525 L17.9271158,19.5259325 L17.1828081,15.1896117 C16.5943981,15.6534073 16.0121091,16.0961739 15.4359412,16.5179114 L14.5560371,17.1492968 L14.5560371,17.1492968 L13.6844132,17.7504514 C13.0804528,18.1588606 12.4677827,18.5564752 11.8464031,18.9432952 L10.9078016,19.5154293 L10.9078016,19.5154293 L7.8611027,21.1171737 C7.6359769,21.2355294 7.39681929,21.2999613 7.15840907,21.3150637 L7.01557087,21.3182423 C6.39801865,21.3066835 5.80550039,20.9678678 5.49777574,20.3825407 C5.31868237,20.0418849 5.25688169,19.6516907 5.32194116,19.2723649 L6.09299511,14.7767754 C6.14863305,14.4523814 6.04108456,14.1213812 5.80539848,13.891644 L2.53916154,10.7078499 C1.84706528,10.0332227 1.83290374,8.92527453 2.50753086,8.23317827 C2.77617092,7.95758191 3.12817014,7.77822934 3.50903494,7.72288645 L8.02286338,7.06698879 C8.34857354,7.01966033 8.63013912,6.81509095 8.77580114,6.51994748 L10.7944466,2.42972506 C11.2221856,1.56303116 12.2715308,1.20718791 13.1382247,1.63492692 Z M12.3198269,2.95808449 L12.2902119,2.96527007 C12.2793457,2.96861565 12.2687103,2.97269676 12.2583861,2.97748605 L12.2902119,2.96527007 C12.2714966,2.97103233 12.2534657,2.97897647 12.2365308,2.9889629 L12.2583861,2.97748605 C12.2413468,2.98539044 12.2251553,2.99522387 12.210174,3.00686353 L12.2365308,2.9889629 C12.2171613,3.00038505 12.1992255,3.01447891 12.1833396,3.03103562 L12.210174,3.00686353 C12.1956184,3.01817235 12.1822051,3.03118618 12.1702664,3.04579235 L12.1395507,3.09357363 L10.1209053,7.18379605 C10.0184557,7.39138155 9.8891144,7.58104483 9.73798951,7.74907464 C9.72757688,7.76065179 9.71707851,7.77210731 9.70647875,7.78345927 C9.68222387,7.8094362 9.65740841,7.83489994 9.63208072,7.8598056 C9.61286179,7.8787174 9.59272003,7.89788572 9.57227364,7.9167049 C9.55151545,7.93581237 9.5303783,7.9546158 9.50893536,7.97304979 C9.48390793,7.9945665 9.45840986,8.01562276 9.43250968,8.03616184 C9.41116892,8.05308223 9.38973108,8.06952117 9.36803353,8.08560821 C9.34138956,8.10536464 9.31425278,8.12465932 9.28673801,8.14340738 C9.26560288,8.15781133 9.24405019,8.17201666 9.2222781,8.18588799 C9.19145373,8.20552392 9.16032733,8.22441091 9.12878668,8.24261854 C9.10386369,8.25700696 9.07861557,8.27100654 9.05311817,8.28457189 C9.02759033,8.29815315 9.00183229,8.31128953 8.97583553,8.32398347 C8.94971953,8.33673475 8.9234259,8.34901131 8.89690336,8.36083563 C8.86403238,8.37549408 8.8305812,8.3895481 8.79679457,8.40288263 C8.77499612,8.41148634 8.7530082,8.41980861 8.73088571,8.4278259 C8.69848989,8.43956293 8.66602601,8.45057618 8.63329498,8.46093143 C8.60215544,8.47078718 8.57049234,8.48012444 8.53859854,8.48884419 C8.51232354,8.49602683 8.48597244,8.50277116 8.45947431,8.50909269 C8.44359003,8.51288347 8.42745894,8.51656457 8.41127563,8.52008864 L8.35135851,8.53237085 C8.33993308,8.53456774 8.32848318,8.53668672 8.31700947,8.5387273 L8.23856085,8.55139931 L3.72473242,9.20729697 C3.67032316,9.2152031 3.62003756,9.24082489 3.58166041,9.2801958 L3.53958116,9.33787805 C3.53650925,9.34368602 3.53368264,9.3495886 3.53110115,9.35557062 C3.52517733,9.36931413 3.5205711,9.3833711 3.51723738,9.39766093 L3.53110115,9.35557062 C3.52107995,9.37879248 3.51475247,9.40321145 3.51210738,9.42794046 L3.51723738,9.39766093 C3.51174014,9.42122457 3.50970299,9.44542138 3.51111562,9.46944495 L3.51210738,9.42794046 C3.50988906,9.44867962 3.51026074,9.46963685 3.51321572,9.4902889 L3.51111562,9.46944495 C3.51245982,9.49230479 3.51692769,9.51500776 3.52451033,9.53685903 L3.51321572,9.4902889 C3.5167719,9.51514267 3.52406949,9.53955445 3.53509683,9.56261222 L3.52451033,9.53685903 C3.53184297,9.55798986 3.54208839,9.57832422 3.55523855,9.59723378 L3.58617908,9.63372032 L6.85241601,12.8175145 C7.02932311,12.9899563 7.17735273,13.185219 7.29413335,13.3960039 C7.3060094,13.4174491 7.31734845,13.4386412 7.32837391,13.4599807 C7.34544959,13.4930124 7.36200114,13.5268904 7.37776993,13.5611038 C7.38700246,13.5811337 7.39599952,13.6013551 7.4047244,13.6216867 C7.42054882,13.6585657 7.43544807,13.6957275 7.44944464,13.7332162 C7.4561134,13.7510694 7.46270561,13.7693658 7.46908335,13.7877355 C7.48096949,13.8219746 7.49208817,13.8563938 7.50245682,13.8910418 C7.51355223,13.9281173 7.52379354,13.9654736 7.53316523,14.0030615 C7.53864691,14.0250458 7.54383993,14.0471494 7.54873239,14.0693263 C7.55544824,14.0997675 7.56160032,14.1303611 7.56718038,14.1610769 C7.57371686,14.1970365 7.57950398,14.2334175 7.58448758,14.2699424 C7.58575039,14.2791953 7.58697135,14.2885353 7.58813973,14.2978842 C7.59419108,14.3463257 7.59882194,14.3948735 7.60202936,14.4436002 C7.60300281,14.4583669 7.60385715,14.4733923 7.60457587,14.4884329 C7.60662339,14.5312853 7.60757009,14.5742497 7.60740331,14.617297 C7.60728116,14.6501739 7.60649237,14.6834943 7.60503234,14.7168455 C7.60370515,14.7470889 7.60184731,14.7770913 7.59944271,14.8071049 C7.59849238,14.8189758 7.59744233,14.8309985 7.59630429,14.8430222 L7.59184385,14.8861574 C7.58948636,14.9071733 7.58685906,14.9281889 7.58396044,14.9491994 L7.57140759,15.030343 L6.80035365,19.5259325 C6.79105944,19.5801219 6.7998881,19.6358639 6.82547287,19.684529 C6.84027761,19.7126893 6.85969665,19.7368556 6.88231261,19.7565872 C6.89134389,19.7644774 6.9010247,19.7717488 6.91113625,19.7782636 L6.88231261,19.7565872 C6.89781452,19.7701121 6.91481843,19.7815534 6.93286789,19.7907694 L6.91113625,19.7782636 C6.92778545,19.7889905 6.94560245,19.7976658 6.96416679,19.8041589 L6.93286789,19.7907694 C6.95404634,19.801583 6.97666428,19.8093327 6.99998434,19.8137894 L6.96416679,19.8041589 C7.00380331,19.8180221 7.04684661,19.8219373 7.0892042,19.8146321 L7.05703112,19.818041 C7.07727622,19.8172224 7.09760057,19.813924 7.11756002,19.8080077 L7.16309101,19.7894766 L7.4596811,19.6328248 L10.1656811,18.2098248 L11.0464698,17.6743663 C12.2478825,16.926714 13.4156912,16.1377745 14.5499693,15.3075173 C15.7678295,14.4160804 17.016095,13.426464 18.2550213,12.3749785 L18.8735221,11.844248 L21.1412903,9.63372032 C21.1806613,9.59534317 21.2062831,9.54505756 21.2141892,9.4906483 L21.2147165,9.42209317 C21.2136407,9.41387917 21.21216,9.40576962 21.2102925,9.39778877 C21.2074772,9.38572088 21.203717,9.37379532 21.1991141,9.36225854 L21.2102925,9.39778877 C21.2050044,9.3751889 21.1966149,9.35362108 21.1855352,9.33363618 L21.1991141,9.36225854 C21.1917276,9.34374458 21.1821711,9.3262318 21.1707134,9.31008052 L21.1855352,9.33363618 C21.1745736,9.31386434 21.1609789,9.29564184 21.145149,9.27950211 L21.1707134,9.31008052 C21.1593045,9.29399801 21.1460107,9.27926542 21.1310973,9.26623846 L21.145149,9.27950211 C21.1319531,9.26604789 21.117204,9.254041 21.1011323,9.24379044 L21.1310973,9.26623846 C21.1138534,9.25117575 21.0944442,9.23839341 21.0732802,9.22844136 L21.1011323,9.24379044 C21.0838438,9.23276376 21.0650248,9.22376945 21.0449624,9.21719216 L21.002737,9.20729697 L16.4889086,8.55139931 C16.3849258,8.53628973 16.2827428,8.51476975 16.1828371,8.48718644 C16.1648466,8.48221869 16.1470124,8.47707911 16.1292541,8.47174673 C16.1034603,8.46400398 16.077617,8.45578397 16.051945,8.44715676 C16.0158533,8.43502433 15.9803084,8.42216767 15.945122,8.4085327 C15.9251317,8.40078994 15.9048929,8.39264392 15.8847786,8.38424068 C15.8508902,8.37007802 15.8176345,8.35531648 15.7847478,8.33985247 C15.7539313,8.32536777 15.7230946,8.31008688 15.6926074,8.29418824 C15.6701902,8.28249662 15.6480666,8.27052969 15.6261373,8.25823707 C15.5948831,8.24071867 15.5639516,8.22249429 15.5334373,8.20362031 C15.5121765,8.19047184 15.4909805,8.17691705 15.4699969,8.16304793 C15.4418176,8.14441718 15.4143076,8.12542572 15.3871894,8.10589129 C15.3646617,8.08966876 15.3421084,8.07284299 15.3198428,8.05563969 C15.2983527,8.03903453 15.2771893,8.02212616 15.2563014,8.00487455 C15.226629,7.98036443 15.1976362,7.9552738 15.1692198,7.9295148 C15.1525488,7.9144102 15.1356414,7.89865958 15.1189486,7.88267054 C15.0932222,7.85802801 15.0680384,7.83285363 15.0433827,7.80712907 C15.0269869,7.79001878 15.0110039,7.77286306 14.9952551,7.75547361 C14.9686227,7.72606654 14.9426653,7.69599769 14.9174049,7.66528078 C14.905244,7.65049305 14.8932458,7.63555652 14.8814121,7.62047206 C14.8532632,7.58459162 14.8260221,7.54784068 14.7997554,7.51028147 C14.7912387,7.49809936 14.7830445,7.48615879 14.7749487,7.4741386 C14.7503184,7.43757254 14.7265407,7.40017205 14.7037161,7.36205794 C14.6989674,7.35412737 14.6943205,7.34626964 14.6897142,7.33838204 L14.6667157,7.29814983 C14.658628,7.28369237 14.6506748,7.26913839 14.6428579,7.25448926 L14.6065642,7.18379605 L12.5879187,3.09357363 C12.5635862,3.04427048 12.5236793,3.0043636 12.4743761,2.98003104 L12.4366811,2.96682475 L12.4144429,2.95934967 C12.403114,2.95699545 12.3917235,2.95545502 12.3803488,2.9547021 C12.3596873,2.95337037 12.3395126,2.95455654 12.3198269,2.95808449 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_collect" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_history.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_history.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2d83d68334c075451ab562ef5b3bba2b83fe5ed8
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_history.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_history</title>
+    <defs>
+        <path d="M1.6585231,15.7576235 C1.6585231,15.7576235 1.6585231,15.7576235 1.6585231,15.7576235 C1.2324059,14.58516 1,13.3197207 1,12 L3.85188895,12 C4.12803133,12 4.35188895,12.2238576 4.35188895,12.5 C4.35188895,12.5930667 4.32591424,12.6842863 4.27688806,12.7633928 L2.37525372,15.831787 C2.25875315,16.0197728 2.0119174,16.0777198 1.82393313,15.9612167 C1.74750189,15.9138485 1.68923756,15.8421345 1.6585231,15.7576235 Z M1.17630502,13.9714637 C1.05930655,13.3251822 1,12.6661847 1,12 C1,5.92486775 5.92486775,1 12,1 C12.7825368,1 13.55498,1.08183322 14.3082773,1.24274766 C19.3440943,2.31846601 23,6.78563595 23,12 C23,18.0751322 18.0751322,23 12,23 C10.9082565,23 9.83703238,22.8407032 8.81152695,22.530585 C7.29798993,22.0728837 5.90520565,21.2926603 4.72336629,20.2494437 C4.41282767,19.9753294 4.38329989,19.5013746 4.65741417,19.190836 C4.93152845,18.8802974 5.40548327,18.8507696 5.7160219,19.1248839 C6.73707421,20.0261728 7.93963138,20.6998329 9.24571587,21.0947995 C10.1308045,21.3624549 11.0557546,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,7.496884 18.3421377,3.63827588 13.9949266,2.70965302 C13.3444703,2.57070679 12.677052,2.5 12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,12.5764741 2.55125879,13.1460473 2.65231335,13.7042571 C2.72610043,14.1118455 2.45550096,14.5020775 2.04791251,14.5758645 C1.64032406,14.6496516 1.2500921,14.3790522 1.17630502,13.9714637 Z M12,5 C12.4142136,5 12.75,5.33578644 12.75,5.75 L12.75,12 C12.75,12.4142136 12.4142136,12.75 12,12.75 C11.5857864,12.75 11.25,12.4142136 11.25,12 L11.25,5.75 C11.25,5.33578644 11.5857864,5 12,5 Z M13.6355698,12.6237513 L17.6675144,16.6568542 C17.9604076,16.9497475 17.9604076,17.4246212 17.6675144,17.7175144 C17.3746212,18.0104076 16.8997475,18.0104076 16.6068542,17.7175144 L12.5511741,13.6614355 C13.0498871,13.4960746 13.4490911,13.1124411 13.6355698,12.6237513 Z M12.5409903,11.5303301 L12.7496841,11.7386602 L12.75,12 C12.75,12.4142136 12.4142136,12.75 12,12.75 C11.6348942,12.75 11.3307218,12.4891133 11.2637303,12.1435875 C11.2411709,11.9246857 11.3128894,11.6977708 11.4803301,11.5303301 C11.7732233,11.2374369 12.248097,11.2374369 12.5409903,11.5303301 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_history" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_history_white.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_history_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa5ab65d43f7c8fea35c5744895a78751b2238a7
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_history_white.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_more.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_more.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2f18da93f13e1826932c43bcd7af3a14ece59e74
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_more.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_more</title>
+    <defs>
+        <path d="M6.25,16 C7.21649831,16 8,16.7835017 8,17.75 C8,18.7164983 7.21649831,19.5 6.25,19.5 C5.28350169,19.5 4.5,18.7164983 4.5,17.75 C4.5,16.7835017 5.28350169,16 6.25,16 Z M17.75,16 C18.7164983,16 19.5,16.7835017 19.5,17.75 C19.5,18.7164983 18.7164983,19.5 17.75,19.5 C16.7835017,19.5 16,18.7164983 16,17.75 C16,16.7835017 16.7835017,16 17.75,16 Z M6.25,4.5 C7.21649831,4.5 8,5.28350169 8,6.25 C8,7.21649831 7.21649831,8 6.25,8 C5.28350169,8 4.5,7.21649831 4.5,6.25 C4.5,5.28350169 5.28350169,4.5 6.25,4.5 Z M17.75,4.5 C18.7164983,4.5 19.5,5.28350169 19.5,6.25 C19.5,7.21649831 18.7164983,8 17.75,8 C16.7835017,8 16,7.21649831 16,6.25 C16,5.28350169 16.7835017,4.5 17.75,4.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_more" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_more_white.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_more_white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..70703b404c71aea22b3989be7fd2ffc52da13519
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_more_white.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_more</title>
+    <defs>
+        <path d="M6.25,15.5 C7.21649831,15.5 8,16.2835017 8,17.25 C8,18.2164983 7.21649831,19 6.25,19 C5.28350169,19 4.5,18.2164983 4.5,17.25 C4.5,16.2835017 5.28350169,15.5 6.25,15.5 Z M17.75,15.5 C18.7164983,15.5 19.5,16.2835017 19.5,17.25 C19.5,18.2164983 18.7164983,19 17.75,19 C16.7835017,19 16,18.2164983 16,17.25 C16,16.2835017 16.7835017,15.5 17.75,15.5 Z M6.25,4.5 C7.21649831,4.5 8,5.28350169 8,6.25 C8,7.21649831 7.21649831,8 6.25,8 C5.28350169,8 4.5,7.21649831 4.5,6.25 C4.5,5.28350169 5.28350169,4.5 6.25,4.5 Z M17.75,4.5 C18.7164983,4.5 19.5,5.28350169 19.5,6.25 C19.5,7.21649831 18.7164983,8 17.75,8 C16.7835017,8 16,7.21649831 16,6.25 C16,5.28350169 16.7835017,4.5 17.75,4.5 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_more" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#FFFFFF" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_search.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..423182ce01e353a362155bdb443b9686672631d9
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_search.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_search</title>
+    <defs>
+        <path d="M17.4552585,16.5201811 L20.8132621,19.8776019 C21.1061553,20.1704951 21.1061553,20.6453689 20.8132621,20.9382621 C20.5203689,21.2311553 20.0454951,21.2311553 19.7526019,20.9382621 L16.3849514,17.5705115 C16.7690371,17.2493647 17.1270214,16.8980393 17.4552585,16.5201811 Z M10.375,2 C15.0003848,2 18.75,5.74961522 18.75,10.375 C18.75,12.4492584 17.9959213,14.3473923 16.746948,15.8102175 L16.746948,15.8102175 L16.7248309,15.8360159 C16.6580095,15.9136422 16.5897889,15.9900296 16.5202083,16.0651391 L16.746948,15.8102175 C16.6540763,15.9189909 16.5584681,16.0253575 16.4602302,16.1292106 C16.4016383,16.1911476 16.342303,16.2519995 16.2820606,16.3119405 C16.2610861,16.3328082 16.240292,16.3532825 16.2193918,16.3736485 C16.1491692,16.4420866 16.0772901,16.5097189 16.0042335,16.576078 C15.9759275,16.6017907 15.9472456,16.6274881 15.9183866,16.6529896 C15.8514229,16.712158 15.7837649,16.7700565 15.7151861,16.8268826 C15.7013815,16.8383205 15.6877981,16.8495035 15.674179,16.8606444 C14.2305262,18.0415704 12.3854944,18.75 10.375,18.75 C5.74961522,18.75 2,15.0003848 2,10.375 C2,5.74961522 5.74961522,2 10.375,2 Z M10.375,3.5 C6.57804235,3.5 3.5,6.57804235 3.5,10.375 C3.5,14.1719577 6.57804235,17.25 10.375,17.25 C14.1719577,17.25 17.25,14.1719577 17.25,10.375 C17.25,6.57804235 14.1719577,3.5 10.375,3.5 Z" id="__path-1"/>
+    </defs>
+    <g id="__Public/ic_public_search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="__mask-2" fill="white">
+            <use xlink:href="#__path-1"/>
+        </mask>
+        <use id="__形状结合" fill="#000000" fill-rule="nonzero" xlink:href="#__path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_search_white.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_search_white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f9e58050aeb1995c126bfb2ae3215de123c9b517
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_search_white.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_search</title>
+    <defs>
+        <path d="M17.4552585,16.5201811 L20.8132621,19.8776019 C21.1061553,20.1704951 21.1061553,20.6453689 20.8132621,20.9382621 C20.5203689,21.2311553 20.0454951,21.2311553 19.7526019,20.9382621 L16.3849514,17.5705115 C16.7690371,17.2493647 17.1270214,16.8980393 17.4552585,16.5201811 Z M10.375,2 C15.0003848,2 18.75,5.74961522 18.75,10.375 C18.75,12.4492584 17.9959213,14.3473923 16.746948,15.8102175 L16.746948,15.8102175 L16.7248309,15.8360159 C16.6580095,15.9136422 16.5897889,15.9900296 16.5202083,16.0651391 L16.746948,15.8102175 C16.6540763,15.9189909 16.5584681,16.0253575 16.4602302,16.1292106 C16.4016383,16.1911476 16.342303,16.2519995 16.2820606,16.3119405 C16.2610861,16.3328082 16.240292,16.3532825 16.2193918,16.3736485 C16.1491692,16.4420866 16.0772901,16.5097189 16.0042335,16.576078 C15.9759275,16.6017907 15.9472456,16.6274881 15.9183866,16.6529896 C15.8514229,16.712158 15.7837649,16.7700565 15.7151861,16.8268826 C15.7013815,16.8383205 15.6877981,16.8495035 15.674179,16.8606444 C14.2305262,18.0415704 12.3854944,18.75 10.375,18.75 C5.74961522,18.75 2,15.0003848 2,10.375 C2,5.74961522 5.74961522,2 10.375,2 Z M10.375,3.5 C6.57804235,3.5 3.5,6.57804235 3.5,10.375 C3.5,14.1719577 6.57804235,17.25 10.375,17.25 C14.1719577,17.25 17.25,14.1719577 17.25,10.375 C17.25,6.57804235 14.1719577,3.5 10.375,3.5 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_view_list.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_view_list.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b7958b5ed4ffae4828718857883cefec420b458d
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_public_view_list.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_view_list_filled</title>
+    <defs>
+        <path d="M3.75,17.25 C4.44035594,17.25 5,17.8096441 5,18.5 C5,19.1903559 4.44035594,19.75 3.75,19.75 C3.05964406,19.75 2.5,19.1903559 2.5,18.5 C2.5,17.8096441 3.05964406,17.25 3.75,17.25 Z M21,17.5 C21.5522847,17.5 22,17.9477153 22,18.5 C22,19.0522847 21.5522847,19.5 21,19.5 L8,19.5 C7.44771525,19.5 7,19.0522847 7,18.5 C7,17.9477153 7.44771525,17.5 8,17.5 L21,17.5 Z M3.75,10.75 C4.44035594,10.75 5,11.3096441 5,12 C5,12.6903559 4.44035594,13.25 3.75,13.25 C3.05964406,13.25 2.5,12.6903559 2.5,12 C2.5,11.3096441 3.05964406,10.75 3.75,10.75 Z M21,11 C21.5522847,11 22,11.4477153 22,12 C22,12.5522847 21.5522847,13 21,13 L8,13 C7.44771525,13 7,12.5522847 7,12 C7,11.4477153 7.44771525,11 8,11 L21,11 Z M3.75,4.25 C4.44035594,4.25 5,4.80964406 5,5.5 C5,6.19035594 4.44035594,6.75 3.75,6.75 C3.05964406,6.75 2.5,6.19035594 2.5,5.5 C2.5,4.80964406 3.05964406,4.25 3.75,4.25 Z M21,4.5 C21.5522847,4.5 22,4.94771525 22,5.5 C22,6.05228475 21.5522847,6.5 21,6.5 L8,6.5 C7.44771525,6.5 7,6.05228475 7,5.5 C7,4.94771525 7.44771525,4.5 8,4.5 L21,4.5 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_view_list_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_home_normal.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_home_normal.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d379c81ad929d6f0a75d350e30317a9dcc94abee
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_home_normal.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 21</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-21">
+            <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            <path d="M12.3049516,5.1660135 L12.4029772,5.24242055 L12.4383705,5.27479678 L20.7500539,13.1988369 L20.7500539,19.8648386 C20.7500539,21.4625195 19.5011339,22.7684995 17.9263267,22.8597459 L17.7500539,22.8648386 L5.75005386,22.8648386 C4.15237298,22.8648386 2.84639298,21.6159186 2.75514655,20.0411114 L2.75005386,19.8648386 L2.75005386,13.1988369 L11.0618497,5.27479678 C11.4076545,4.94672556 11.9310357,4.91207619 12.3049516,5.1660135 Z" id="path-1-path" fill-opacity="0.2" fill="#000000" fill-rule="nonzero"></path>
+            <path d="M11.7500539,14.1148386 C10.152373,14.1148386 8.84639298,15.3637586 8.75514655,16.9385658 L8.75005386,17.1148386 L8.75005386,20.8648386 L14.7500539,20.8648386 L14.7500539,17.1148386 C14.7500539,15.4579844 13.4069081,14.1148386 11.7500539,14.1148386 Z" id="path-1-path" fill-opacity="0.25" fill="#000000" fill-rule="nonzero"></path>
+            <path d="M9.14899189,2.9610199 C10.6954787,1.63547522 13.0094899,1.68118365 14.5030439,3.09814521 L14.5030439,3.09814521 L22.1882626,10.3892501 L22.2682366,10.4743966 C22.5892803,10.8586016 22.5784305,11.4309304 22.2254659,11.8029742 C21.8453502,12.2036368 21.2124043,12.2202932 20.8117418,11.8401775 L20.8117418,11.8401775 L13.1265231,4.54907261 L13.0133993,4.4494676 C12.240637,3.81863589 11.1084048,3.85183755 10.3734813,4.54907261 L10.3734813,4.54907261 L2.6882626,11.8401775 L2.59902777,11.9155625 C2.19846918,12.2159545 1.62750308,12.175018 1.27453847,11.8029742 C0.894422729,11.4023117 0.911079199,10.7693658 1.31174174,10.3892501 L1.31174174,10.3892501 L8.99696044,3.09814521 L9.14899189,2.9610199 Z" id="path-1-path" fill-opacity="0.2" fill="#000000" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_home_selected.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_home_selected.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d9895b7d534da8e5966c713b9f8f7bf4fc7803f8
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_home_selected.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 20</title>
+    <defs>
+        <path d="M11.3049515,3.1660135 L11.4029771,3.24242054 L11.4383705,3.27479678 L19.7500539,11.1988369 L19.7500539,17.8648386 C19.7500539,19.4625195 18.5011339,20.7684995 16.9263266,20.8597459 L16.7500539,20.8648386 L4.75005386,20.8648386 C3.15237298,20.8648386 1.84639298,19.6159187 1.75514656,18.0411114 L1.75005386,17.8648386 L1.75005386,11.1988369 L10.0618496,3.27479678 C10.4076544,2.94672556 10.9310356,2.91207618 11.3049515,3.1660135 Z M10.7500539,12.1148386 C9.15237298,12.1148386 7.84639298,13.3637586 7.75514656,14.9385658 L7.75005386,15.1148386 L7.75005386,18.8648386 L13.7500539,18.8648386 L13.7500539,15.1148386 C13.7500539,13.4579844 12.4069081,12.1148386 10.7500539,12.1148386 Z M8.14899189,0.961019894 C9.69547868,-0.364524787 12.0094898,-0.31881635 13.5030439,1.09814521 L13.5030439,1.09814521 L21.1882626,8.38925013 L21.2682366,8.47439656 C21.5892803,8.85860159 21.5784305,9.43093048 21.2254659,9.80297426 C20.8453501,10.2036368 20.2124043,10.2202933 19.8117417,9.84017753 L19.8117417,9.84017753 L12.126523,2.5490726 L12.0133993,2.4494676 C11.2406369,1.81863588 10.1084047,1.85183755 9.3734813,2.5490726 L9.3734813,2.5490726 L1.6882626,9.84017753 L1.59902778,9.91556251 C1.19846918,10.2159546 0.627503086,10.175018 0.27453847,9.80297426 C-0.10557727,9.40231172 -0.0889208004,8.76936587 0.311741737,8.38925013 L0.311741737,8.38925013 L7.99696044,1.09814521 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-20">
+            <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            <g id="tab/ic_备份-69" transform="translate(1.000000, 2.000000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="形状结合" fill-rule="nonzero"></g>
+                <g id="Symbol/color-light/colorPrimary" mask="url(#mask-2)" fill="#ED6F21">
+                    <g transform="translate(-1.249946, -1.385161)" id="color/#000000">
+                        <rect x="0" y="0" width="24" height="24"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_home_white.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_home_white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9c8f6e1bce0b61e9599b43ce0de8fb1efeca0c84
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_home_white.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_home_filled</title>
+    <defs>
+        <path d="M12.5548977,4.55117487 L12.6529233,4.62758192 L12.6883166,4.65995815 L21,12.5839983 L21,19.25 C21,20.8476809 19.75108,22.1536609 18.1762728,22.2449073 L18,22.25 L6,22.25 C4.40231912,22.25 3.09633912,21.00108 3.00509269,19.4262728 L3,19.25 L3,12.5839983 L11.3117958,4.65995815 C11.6576006,4.33188693 12.1809818,4.29723756 12.5548977,4.55117487 Z M12,13.5 C10.4023191,13.5 9.09633912,14.74892 9.00509269,16.3237272 L9,16.5 L9,20.25 L15,20.25 L15,16.5 C15,14.8431458 13.6568542,13.5 12,13.5 Z M9.39893803,2.34618127 C10.9454248,1.02063659 13.259436,1.06634502 14.75299,2.48330658 L14.75299,2.48330658 L22.4382087,9.7744115 L22.5181827,9.85955793 C22.8392264,10.243763 22.8283766,10.8160918 22.475412,11.1881356 C22.0952963,11.5887982 21.4623504,11.6054546 21.0616879,11.2253389 L21.0616879,11.2253389 L13.3764692,3.93423398 L13.2633454,3.83462897 C12.4905831,3.20379726 11.3583509,3.23699892 10.6234274,3.93423398 L10.6234274,3.93423398 L2.93820874,11.2253389 L2.84897391,11.3007239 C2.44841532,11.6011159 1.87744922,11.5601794 1.52448461,11.1881356 C1.14436887,10.7874731 1.16102534,10.1545272 1.56168788,9.7744115 L1.56168788,9.7744115 L9.24690658,2.48330658 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_home_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_mine_normal.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_mine_normal.svg
new file mode 100644
index 0000000000000000000000000000000000000000..265dc646e493636c0b439b976d86336020f9751b
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_mine_normal.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>tab/ic_备份 71</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" transform="translate(-1.000000, -1.000000)" fill="#000000">
+            <g id="形状结合" transform="translate(1.500033, 1.500000)">
+                <path d="M10.6732784,0.00140414107 L10.4999672,6.39488462e-14 C4.76563276,6.39488462e-14 0.0942098729,4.60067747 0.00137132636,10.3266888 L1.42108547e-14,10.4918989 C1.42108547e-14,16.2343344 4.60064466,20.9057573 10.326656,20.9985959 L10.4918661,20.9999672 C16.2343016,20.9999672 20.9057245,16.3993225 20.998563,10.6733112 L20.9999344,10.5081011 C20.9999344,4.76566558 16.3992897,0.0942426876 10.6732784,0.00140414107 Z" fill-opacity="0.2"></path>
+                <path d="M10.4999672,11.3900553 C13.5199031,11.3900553 16.0478545,13.4964918 16.6947103,16.3202539 C15.1438117,17.970056 12.942184,19 10.5,19 C8.05781599,19 5.8561883,17.970056 4.30578106,16.320832 C4.95207989,13.4964918 7.48003124,11.3900553 10.4999672,11.3900553 Z M10.4999672,4.80882353 C12.1568214,4.80882353 13.4999672,6.15196928 13.4999672,7.80882353 C13.4999672,9.46567778 12.1568214,10.8088235 10.4999672,10.8088235 C8.84311294,10.8088235 7.49996719,9.46567778 7.49996719,7.80882353 C7.49996719,6.15196928 8.84311294,4.80882353 10.4999672,4.80882353 Z" fill-opacity="0.250980392"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_mine_selected.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_mine_selected.svg
new file mode 100644
index 0000000000000000000000000000000000000000..46050054044d70c32a151f3072882eef690ed273
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_mine_selected.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 23</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-23">
+            <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            <g id="编组" transform="translate(2.000000, 2.000000)">
+                <path d="M10.6732784,0.00140414107 L10.4999672,0 C4.76563276,0 0.0942098729,4.60067747 0.00137132636,10.3266888 L0,10.4918989 C0,16.2343344 4.60064466,20.9057573 10.326656,20.9985959 L10.4918661,20.9999672 C16.2343016,20.9999672 20.9057245,16.3993225 20.998563,10.6733112 L20.9999344,10.5081011 C20.9999344,4.76566558 16.3992897,0.0942426876 10.6732784,0.00140414107 Z" id="路径" fill="#ED6F21"></path>
+                <path d="M10.4999672,11.3900553 C13.5199031,11.3900553 16.0478545,13.4964918 16.6947103,16.3202539 C15.1438117,17.970056 12.942184,19 10.5,19 C8.05781599,19 5.8561883,17.970056 4.30578106,16.320832 C4.95207989,13.4964918 7.48003124,11.3900553 10.4999672,11.3900553 Z M10.4999672,4.80882353 C12.1568214,4.80882353 13.4999672,6.15196928 13.4999672,7.80882353 C13.4999672,9.46567778 12.1568214,10.8088235 10.4999672,10.8088235 C8.84311294,10.8088235 7.49996719,9.46567778 7.49996719,7.80882353 C7.49996719,6.15196928 8.84311294,4.80882353 10.4999672,4.80882353 Z" id="形状结合" fill-opacity="0.8" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_mine_white.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_mine_white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ea562ca1f468505f31cbb07b941cda58ca9f13b1
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_mine_white.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" version="1.1" viewBox="0 0 56 56">
+  <defs>
+    <path id="_uxs-a" d="M27.9068765,36 C41.1027635,36 44.5468639,43.9071569 45.7924974,46.5555556 C45.8356093,46.6472176 45.8774841,46.7417076 45.918122,46.8390255 C41.2537662,51.2771097 34.9448657,54 28,54 C20.987908,54 14.624153,51.2241394 9.94766329,46.7113467 L10.0212556,46.5555556 L10.0212556,46.5555556 C11.3245661,43.9071569 14.7109895,36 27.9068765,36 Z M27.9068765,13 C33.1535816,13 37.4068765,17.2532949 37.4068765,22.5 C37.4068765,27.7467051 33.1535816,32 27.9068765,32 C22.6601714,32 18.4068765,27.7467051 18.4068765,22.5 C18.4068765,17.2532949 22.6601714,13 27.9068765,13 Z"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
+    <circle cx="28" cy="28" r="28" fill="#FFFFFF" opacity=".2"/>
+    <use fill="#FFF" fill-opacity=".9" xlink:href="#_uxs-a"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_post_normal.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_post_normal.svg
new file mode 100644
index 0000000000000000000000000000000000000000..55892be58a12d7ebcacf659b5f40e81a05648828
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_post_normal.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>图标</title>
+    <defs>
+        <path d="M11,0 C17.0751322,0 22,4.92486775 22,11 C22,17.0751322 17.0751322,22 11,22 C4.92486775,22 0,17.0751322 0,11 C0,4.92486775 4.92486775,0 11,0 Z M11.4425657,4.61281539 C10.9473121,4.36839309 10.3476862,4.57173209 10.1032639,5.06698575 L10.1032639,5.06698575 L8.76519427,7.778211 C8.69236327,7.92578273 8.55158047,8.02806742 8.38872539,8.05173165 L8.38872539,8.05173165 L5.39671069,8.48649683 C5.17907366,8.51812134 4.97793125,8.62060852 4.82442265,8.77809216 C4.43892144,9.17357573 4.44701374,9.806689 4.84249732,10.1921902 L4.84249732,10.1921902 L7.00753949,12.3025847 C7.12538254,12.4174533 7.17915678,12.5829534 7.15133781,12.7451505 L7.15133781,12.7451505 L6.64024068,15.7250754 C6.60306384,15.941833 6.63837852,16.1648011 6.74071759,16.3594615 C6.99771839,16.8483061 7.60234555,17.0362527 8.09119013,16.7792518 L8.09119013,16.7792518 L10.7673294,15.3723222 C10.9129914,15.2957431 11.0870086,15.2957431 11.2326706,15.3723222 L11.2326706,15.3723222 L13.9088099,16.7792518 C14.1034703,16.8815909 14.3264384,16.9169056 14.5431961,16.8797287 C15.0875325,16.7863677 15.4531203,16.2694118 15.3597593,15.7250754 L15.3597593,15.7250754 L14.8486622,12.7451505 C14.8208432,12.5829534 14.8746175,12.4174533 14.9924605,12.3025847 L14.9924605,12.3025847 L17.1575027,10.1921902 C17.3149863,10.0386816 17.4174735,9.83753919 17.449098,9.61990216 C17.5285156,9.0733573 17.1498342,8.56591445 16.6032893,8.48649683 L16.6032893,8.48649683 L13.6112746,8.05173165 C13.4484195,8.02806742 13.3076367,7.92578273 13.2348057,7.778211 L13.2348057,7.778211 L11.8967361,5.06698575 C11.7994058,4.86977315 11.6397783,4.71014562 11.4425657,4.61281539 Z" id="path-1"></path>
+        <path d="M10.4508324,3.69598626 C10.6643843,3.80145128 10.8372371,3.97442033 10.9426313,4.1881158 L12.1917126,6.72073279 C12.2818441,6.90348211 12.456069,7.03014903 12.6576094,7.05945424 L15.45064,7.46557826 C16.0424667,7.55163354 16.4525222,8.10148803 16.3665248,8.69371265 C16.3322802,8.9295396 16.2213018,9.14749332 16.0507705,9.31383204 L14.0297146,11.2851994 C13.8838786,11.4274499 13.8173306,11.6324013 13.8517578,11.8332623 L14.3288644,14.6168777 C14.4299605,15.2067093 14.0340833,15.766872 13.4446481,15.868036 C13.2099318,15.9083201 12.9684906,15.8700538 12.7577023,15.7591614 L10.2595398,14.4449164 C10.0792766,14.3500828 9.86392281,14.3500828 9.68365966,14.4449164 L7.1854971,15.7591614 C6.65615126,16.0376421 6.00143014,15.8339871 5.72313655,15.3042853 C5.61231859,15.0933553 5.57407806,14.8517518 5.61433504,14.6168777 L6.09144163,11.8332623 C6.12586883,11.6324013 6.05932084,11.4274499 5.91348489,11.2851994 L3.89242893,9.31383204 C3.46417914,8.89611097 3.45541638,8.21008263 3.87285675,7.78154488 C4.0390837,7.61089889 4.25689096,7.49984592 4.49255943,7.46557826 L7.28559008,7.05945424 C7.48713041,7.03014903 7.66135531,6.90348211 7.75148689,6.72073279 L9.00056816,4.1881158 C9.26524109,3.65146926 9.91454652,3.43113536 10.4508324,3.69598626 Z" id="path-3"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标">
+            <g id="tab/ic_备份-68" transform="translate(1.000000, 1.000000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="合并形状"></g>
+                <g id="编组" mask="url(#mask-2)" fill-opacity="0.2">
+                    <g transform="translate(-1.000000, -1.000000)" id="Symbol/color-light/colorPrimary">
+                        <rect id="color/#000000" fill="#000000" x="0" y="0" width="24" height="24"></rect>
+                    </g>
+                </g>
+            </g>
+            <g id="编组-5" transform="translate(2.000000, 2.000000)">
+                <mask id="mask-4" fill="white">
+                    <use xlink:href="#path-3"></use>
+                </mask>
+                <use id="形状结合" fill="#8F9192" fill-rule="nonzero" xlink:href="#path-3"></use>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_post_selected.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_post_selected.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bd3fe25c437feb0e0767259f8f5bc617101d3600
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_post_selected.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 22</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-22">
+            <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            <g id="tab/ic_备份-68" transform="translate(1.000000, 1.000000)">
+                <circle id="Combined-Shape" fill="#ED6F21" cx="11" cy="11" r="11"></circle>
+                <path d="M10.7673294,15.3723222 L8.09119013,16.7792518 C7.60234555,17.0362527 6.99771839,16.8483061 6.74071759,16.3594615 C6.63837852,16.1648011 6.60306384,15.941833 6.64024068,15.7250754 L7.15133781,12.7451505 C7.17915678,12.5829534 7.12538254,12.4174533 7.00753949,12.3025847 L4.84249732,10.1921902 C4.44701374,9.806689 4.43892144,9.17357573 4.82442265,8.77809216 C4.97793125,8.62060852 5.17907366,8.51812134 5.39671069,8.48649683 L8.38872539,8.05173165 C8.55158047,8.02806742 8.69236327,7.92578273 8.76519427,7.778211 L10.1032639,5.06698575 C10.3476862,4.57173209 10.9473121,4.36839309 11.4425657,4.61281539 C11.6397783,4.71014562 11.7994058,4.86977315 11.8967361,5.06698575 L13.2348057,7.778211 C13.3076367,7.92578273 13.4484195,8.02806742 13.6112746,8.05173165 L16.6032893,8.48649683 C17.1498342,8.56591445 17.5285156,9.0733573 17.449098,9.61990216 C17.4174735,9.83753919 17.3149863,10.0386816 17.1575027,10.1921902 L14.9924605,12.3025847 C14.8746175,12.4174533 14.8208432,12.5829534 14.8486622,12.7451505 L15.3597593,15.7250754 C15.4531203,16.2694118 15.0875325,16.7863677 14.5431961,16.8797287 C14.3264384,16.9169056 14.1034703,16.8815909 13.9088099,16.7792518 L11.2326706,15.3723222 C11.0870086,15.2957431 10.9129914,15.2957431 10.7673294,15.3723222 Z" id="星形" fill-opacity="0.8" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_post_white.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_post_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea7a12ab80c88496caef080ec3de08c152c027bc
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_post_white.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_vip_normal.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_vip_normal.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c8c9d45daa6983dc772219a7021bbe739048a6d4
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_vip_normal.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="24px" viewBox="0 0 25 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>图标备份 2</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标备份-2" transform="translate(0.363636, 0.000000)">
+            <rect id="矩形" fill="#F1F3F5" opacity="0" x="0" y="0" width="24" height="24"></rect>
+            <g id="编组-28" transform="translate(1.846914, 3.188167)">
+                <path d="M10.1428844,0 C11.1093827,0 11.8928844,0.783501688 11.8928844,1.75 C11.8928844,2.40094074 11.5374818,2.96887275 11.010135,3.27033757 L14.0818861,8.6530979 L16.9707364,6.29938805 C16.8651625,6.07415171 16.8061726,5.82273182 16.8061726,5.55753412 C16.8061726,4.5910358 17.5896743,3.80753412 18.5561726,3.80753412 C19.5226709,3.80753412 20.3061726,4.5910358 20.3061726,5.55753412 C20.3061726,6.52403243 19.5226709,7.30753412 18.5561726,7.30753412 L18.589,7.306 L18.5852615,7.3230127 L16.8492033,13.6797736 C16.6116606,14.5495614 15.8215019,15.1528619 14.9198604,15.1528619 L14.9198604,15.1528619 L5.52763162,15.1528619 C4.63336896,15.1528619 3.84778478,14.5592119 3.603622,13.698927 L3.603622,13.698927 L1.80177899,7.35029965 C1.79755583,7.33541971 1.79368884,7.32048372 1.79017594,7.30550335 L1.75,7.30753412 C0.783501688,7.30753412 0,6.52403243 0,5.55753412 C0,4.5910358 0.783501688,3.80753412 1.75,3.80753412 C2.71649831,3.80753412 3.5,4.5910358 3.5,5.55753412 C3.5,5.81055237 3.44630406,6.05102927 3.34968598,6.26819101 L3.35411159,6.27010353 L6.61241379,8.6530979 L9.34551941,3.3082052 C8.77992787,3.0181992 8.39288443,2.42929902 8.39288443,1.75 C8.39288443,0.783501688 9.17638612,0 10.1428844,0 Z" id="形状结合" fill="#C0C2C4"></path>
+                <circle id="椭圆形备份-5" fill-opacity="0.3" fill="#000000" cx="10.1428844" cy="10.1223265" r="1.75"></circle>
+                <path d="M15.6213165,16.1236667 C16.03553,16.1236667 16.3713165,16.4594531 16.3713165,16.8736667 C16.3713165,17.2533625 16.0891626,17.5671577 15.723087,17.6168201 L15.6213165,17.6236667 L4.6940059,17.6236667 C4.27979233,17.6236667 3.9440059,17.2878803 3.9440059,16.8736667 C3.9440059,16.4939709 4.22615978,16.1801758 4.59223534,16.1305133 L4.6940059,16.1236667 L15.6213165,16.1236667 Z" id="路径-3" fill="#C0C2C4" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_vip_selected.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_vip_selected.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6b7f2502a4791e98d8fe35fca3bcabb2889fd71a
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_vip_selected.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="24px" viewBox="0 0 25 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>图标备份</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标备份" transform="translate(0.363636, 0.000000)">
+            <rect id="矩形" fill="#F1F3F5" opacity="0" x="0" y="0" width="24" height="24"></rect>
+            <g id="编组-28" transform="translate(1.846914, 3.188167)">
+                <path d="M10.1428844,0 C11.1093827,0 11.8928844,0.783501688 11.8928844,1.75 C11.8928844,2.40094074 11.5374818,2.96887275 11.010135,3.27033757 L14.0818861,8.6530979 L16.9707364,6.29938805 C16.8651625,6.07415171 16.8061726,5.82273182 16.8061726,5.55753412 C16.8061726,4.5910358 17.5896743,3.80753412 18.5561726,3.80753412 C19.5226709,3.80753412 20.3061726,4.5910358 20.3061726,5.55753412 C20.3061726,6.52403243 19.5226709,7.30753412 18.5561726,7.30753412 L18.589,7.306 L18.5852615,7.3230127 L16.8492033,13.6797736 C16.6116606,14.5495614 15.8215019,15.1528619 14.9198604,15.1528619 L14.9198604,15.1528619 L5.52763162,15.1528619 C4.63336896,15.1528619 3.84778478,14.5592119 3.603622,13.698927 L3.603622,13.698927 L1.80177899,7.35029965 C1.79755583,7.33541971 1.79368884,7.32048372 1.79017594,7.30550335 L1.75,7.30753412 C0.783501688,7.30753412 0,6.52403243 0,5.55753412 C0,4.5910358 0.783501688,3.80753412 1.75,3.80753412 C2.71649831,3.80753412 3.5,4.5910358 3.5,5.55753412 C3.5,5.81055237 3.44630406,6.05102927 3.34968598,6.26819101 L3.35411159,6.27010353 L6.61241379,8.6530979 L9.34551941,3.3082052 C8.77992787,3.0181992 8.39288443,2.42929902 8.39288443,1.75 C8.39288443,0.783501688 9.17638612,0 10.1428844,0 Z" id="形状结合" fill="#ED6F21"></path>
+                <circle id="椭圆形备份-5" fill-opacity="0.8" fill="#FFFFFF" cx="10.1428844" cy="10.1223265" r="1.75"></circle>
+                <path d="M15.6213165,16.1236667 C16.03553,16.1236667 16.3713165,16.4594531 16.3713165,16.8736667 C16.3713165,17.2533625 16.0891626,17.5671577 15.723087,17.6168201 L15.6213165,17.6236667 L4.6940059,17.6236667 C4.27979233,17.6236667 3.9440059,17.2878803 3.9440059,16.8736667 C3.9440059,16.4939709 4.22615978,16.1801758 4.59223534,16.1305133 L4.6940059,16.1236667 L15.6213165,16.1236667 Z" id="路径-3" fill="#ED6F21" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_vip_white.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_vip_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e8e2340473a7bbafa27f8b96e259e0499ddc990
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_tabs_vip_white.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_1.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb1e30c7eb7cd2cd968c54d37d6bd502a9c35a20
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_1.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_10.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_10.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e323f8e74eded00e95c900b8d18cadf3b3990ef
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_10.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_2.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..d534c3f37fbfb306db5faf94c824e21f91f4aaf3
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_2.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_3.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6098c9879804b3999d7b364cf116b96c58d1ca5
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_3.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_4.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa1e01186135417d01c79da76590baf59fe8b795
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_4.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_5.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..613a6b9cefc65abdd13d1a9a85baa2d5ab43e639
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_5.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_6.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..e29590e5767ab2febf2323d87d66f7ebb51ed360
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_6.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_7.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_7.png
new file mode 100644
index 0000000000000000000000000000000000000000..71f7efc76f533d510bd5397ffc43aa67bf5da034
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_7.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_8.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_8.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9470c073cbe7f49ad07ea0dbd1ba1b3665cc605
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_8.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_9.png b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_9.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb2f458f8f4ec54469f32419d1ec89ac8fb1080e
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/ic_video_grid_9.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/icon_all.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_all.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c6ec5b7dc2745551c5d747a7226556b285e3cf1d
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_all.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>全部橙</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="#ED6F21">
+            <circle id="椭圆形" fill-opacity="0.2" cx="20" cy="20" r="20"></circle>
+            <g transform="translate(10.000000, 10.000000)" fill-rule="nonzero" id="path-1">
+                <path d="M5.11710401,10.5 C6.30605717,10.5 6.85734318,10.6474289 7.37499024,10.9242696 C7.8926373,11.2011103 8.2988897,11.6073627 8.5757304,12.1250098 L8.6276917,12.2257818 C8.8709805,12.7164447 9,13.2706495 9,14.382896 L9,15.617104 C9,16.8060572 8.8525711,17.3573432 8.5757304,17.8749902 C8.2988897,18.3926373 7.8926373,18.7988897 7.37499024,19.0757304 L7.27421823,19.1276917 C6.78355532,19.3709805 6.22935051,19.5 5.11710401,19.5 L3.88289599,19.5 C2.69394283,19.5 2.14265682,19.3525711 1.62500976,19.0757304 C1.10736271,18.7988897 0.70111026,18.3926373 0.42426959,17.8749902 L0.37230832,17.7742182 C0.13740875,17.3004747 0.00903377,16.767496 0.00045963,15.7301936 L0,14.382896 C0,13.1939428 0.14742891,12.6426568 0.42426959,12.1250098 C0.70111026,11.6073627 1.10736271,11.2011103 1.62500976,10.9242696 L1.72578177,10.8723083 C2.19952527,10.6374087 2.73250402,10.5090338 3.76980637,10.5004596 L5.11710401,10.5 Z M15.617104,10.5 C16.8060572,10.5 17.3573432,10.6474289 17.8749902,10.9242696 C18.3926373,11.2011103 18.7988897,11.6073627 19.0757304,12.1250098 L19.1276917,12.2257818 C19.3709805,12.7164447 19.5,13.2706495 19.5,14.382896 L19.5,15.617104 C19.5,16.8060572 19.3525711,17.3573432 19.0757304,17.8749902 C18.7988897,18.3926373 18.3926373,18.7988897 17.8749902,19.0757304 L17.7742182,19.1276917 C17.2835553,19.3709805 16.7293505,19.5 15.617104,19.5 L14.382896,19.5 C13.1939428,19.5 12.6426568,19.3525711 12.1250098,19.0757304 C11.6073627,18.7988897 11.2011103,18.3926373 10.9242696,17.8749902 L10.8723083,17.7742182 C10.6374087,17.3004747 10.5090338,16.767496 10.5004596,15.7301936 L10.5,14.382896 C10.5,13.1939428 10.6474289,12.6426568 10.9242696,12.1250098 C11.2011103,11.6073627 11.6073627,11.2011103 12.1250098,10.9242696 L12.2257818,10.8723083 C12.6995253,10.6374087 13.232504,10.5090338 14.2698064,10.5004596 L15.617104,10.5 Z M5.11710401,0 C6.30605717,0 6.85734318,0.14742891 7.37499024,0.42426959 C7.8926373,0.70111026 8.2988897,1.10736271 8.5757304,1.62500976 L8.6276917,1.72578177 C8.8709805,2.21644468 9,2.77064949 9,3.88289599 L9,5.11710401 C9,6.30605717 8.8525711,6.85734318 8.5757304,7.37499024 C8.2988897,7.8926373 7.8926373,8.2988897 7.37499024,8.5757304 L7.27421823,8.6276917 C6.78355532,8.8709805 6.22935051,9 5.11710401,9 L3.88289599,9 C2.69394283,9 2.14265682,8.8525711 1.62500976,8.5757304 C1.10736271,8.2988897 0.70111026,7.8926373 0.42426959,7.37499024 L0.37230832,7.27421823 C0.13740875,6.80047473 0.00903377,6.26749598 0.00045963,5.23019363 L0,3.88289599 C0,2.69394283 0.14742891,2.14265682 0.42426959,1.62500976 C0.70111026,1.10736271 1.10736271,0.70111026 1.62500976,0.42426959 L1.72578177,0.37230832 C2.19952527,0.13740875 2.73250402,0.00903377 3.76980637,0.00045963 L5.11710401,0 Z M15.617104,0 C16.8060572,0 17.3573432,0.14742891 17.8749902,0.42426959 C18.3926373,0.70111026 18.7988897,1.10736271 19.0757304,1.62500976 L19.1276917,1.72578177 C19.3709805,2.21644468 19.5,2.77064949 19.5,3.88289599 L19.5,5.11710401 C19.5,6.30605717 19.3525711,6.85734318 19.0757304,7.37499024 C18.7988897,7.8926373 18.3926373,8.2988897 17.8749902,8.5757304 L17.7742182,8.6276917 C17.2835553,8.8709805 16.7293505,9 15.617104,9 L14.382896,9 C13.1939428,9 12.6426568,8.8525711 12.1250098,8.5757304 C11.6073627,8.2988897 11.2011103,7.8926373 10.9242696,7.37499024 L10.8723083,7.27421823 C10.6374087,6.80047473 10.5090338,6.26749598 10.5004596,5.23019363 L10.5,3.88289599 C10.5,2.69394283 10.6474289,2.14265682 10.9242696,1.62500976 C11.2011103,1.10736271 11.6073627,0.70111026 12.1250098,0.42426959 L12.2257818,0.37230832 C12.6995253,0.13740875 13.232504,0.00903377 14.2698064,0.00045963 L15.617104,0 Z"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/icon_classes.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_classes.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cabf5055df57003a7ee2136730c9e341be29085d
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_classes.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>课程专区</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="#ED6F21" fill-rule="nonzero">
+            <g>
+                <circle id="椭圆形" fill-opacity="0.2" cx="20" cy="20" r="20"></circle>
+                <g transform="translate(10.000000, 10.439205)" id="路径">
+                    <path d="M17.8947368,1.29923393 C19.0068892,1.29923393 19.9176222,2.16161252 19.9947141,3.25414779 L20,3.40449709 L20,14.5155548 C20,16.0152465 18.94733,17.2985806 17.4964579,17.604976 L17.3130723,17.6381322 L10.9972484,18.5912081 C10.8564917,19.0068468 10.4631821,19.3060063 10,19.3060063 C9.53681795,19.3060063 9.14350835,19.0068468 9.00275155,18.5912081 L2.68692769,17.6381322 C1.14222005,17.4051495 0,16.0777336 0,14.5155548 L0,3.40449709 C0,2.24179235 0.942558421,1.29923393 2.10526316,1.29923393 C2.23237134,1.29923393 2.35921835,1.31074538 2.48424999,1.33362723 L7.41058551,2.23518862 C8.91047017,2.5096803 10,3.81669844 10,5.3414934 L10.0051863,5.15961548 C10.0842262,3.77665105 11.0590537,2.60479667 12.4037969,2.27489697 L12.5894145,2.23518862 L17.51575,1.33362723 C17.6407816,1.31074538 17.7676287,1.29923393 17.8947368,1.29923393 Z" fill-opacity="0.6"></path>
+                    <path d="M4.59114731,0.037235461 L8.27535784,0.739508153 C9.26817991,0.928756793 9.98642002,1.79683771 9.98642002,2.80753585 L9.98642002,15.5829053 C9.98642002,16.1642576 9.51514081,16.6355368 8.93378844,16.6355368 C8.86764928,16.6355368 8.80165732,16.6293034 8.73668796,16.6169191 L3.80274536,15.6764264 C2.80992329,15.4871778 2.09168318,14.6190968 2.09168318,13.6083987 L2.09168318,2.10526316 C2.09168318,0.942558423 3.0342416,0 4.19694634,0 C4.32922466,0 4.46120858,0.012466946 4.59114731,0.037235461 Z"></path>
+                    <path d="M12.4310744,0.037235461 L16.1152849,0.739508153 C17.108107,0.928756793 17.8263471,1.79683771 17.8263471,2.80753585 L17.8263471,15.5829053 C17.8263471,16.1642576 17.3550679,16.6355368 16.7737155,16.6355368 C16.7075763,16.6355368 16.6415844,16.6293034 16.576615,16.6169191 L11.6426724,15.6764264 C10.6498504,15.4871778 9.9316102,14.6190968 9.9316102,13.6083987 L9.9316102,2.10526316 C9.9316102,0.942558423 10.8741687,0 12.0368734,0 C12.1691517,0 12.3011356,0.012466946 12.4310744,0.037235461 Z" transform="translate(13.878979, 8.317768) scale(-1, 1) translate(-13.878979, -8.317768) "></path>
+                    <path d="M12.4310744,0.037235461 L16.1152849,0.739508153 C17.108107,0.928756793 17.8263471,1.79683771 17.8263471,2.80753585 L17.8263471,15.5829053 C17.8263471,16.1642576 17.3550679,16.6355368 16.7737155,16.6355368 C16.7075763,16.6355368 16.6415844,16.6293034 16.576615,16.6169191 L11.6426724,15.6764264 C10.6498504,15.4871778 9.9316102,14.6190968 9.9316102,13.6083987 L9.9316102,2.10526316 C9.9316102,0.942558423 10.8741687,0 12.0368734,0 C12.1691517,0 12.3011356,0.012466946 12.4310744,0.037235461 Z" opacity="0.393050421" style="mix-blend-mode: multiply;" transform="translate(13.878979, 8.317768) scale(-1, 1) translate(-13.878979, -8.317768) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/icon_classic.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_classic.svg
new file mode 100644
index 0000000000000000000000000000000000000000..51e3cdc07a7816e80c206d8117299c70f1a20e83
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_classic.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>经典橙</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="#ED6F21">
+            <circle id="椭圆形" fill-opacity="0.2" cx="20" cy="20" r="20"></circle>
+            <g transform="translate(10.000000, 10.000000)" fill-rule="nonzero" id="path-1">
+                <path d="M17.3175379,12.0415379 L16.9113898,12.4378192 C16.6757037,12.6675564 16.5681553,12.9985566 16.6237932,13.3229506 L17.3948472,17.8185401 C17.5582289,18.7711289 16.9184502,19.6758017 15.9658614,19.8391835 C15.5865356,19.904243 15.1963414,19.8424423 14.8556856,19.6633489 L11.7239706,18.0169113 C13.232983,16.7545437 14.6926773,15.0976316 16.1030536,13.0461752 C16.24769,12.9051895 16.7031328,12.547621 17.3175379,12.0415379 Z M11.1275436,0.181102169 C11.4726657,0.351430089 11.7520138,0.630778249 11.9223417,0.975900309 L13.9409872,5.06612273 C14.0866492,5.3612662 14.3682148,5.56583558 14.6939249,5.61316404 L19.2077534,6.2690617 C20.1642069,6.40804253 20.8268994,7.29606752 20.6879186,8.25252103 C20.6325757,8.63338585 20.4532231,8.98538505 20.1776268,9.25402515 L18.029065,11.3476094 L17.9098585,11.4645528 L17.2548466,12.0280887 C15.9496077,13.1387217 14.6730788,14.1507209 13.4252601,15.0640866 C11.9694715,16.1296798 10.4600916,17.1288524 8.89712051,18.0616045 L8.90100001,18.058 L5.8504216,19.6633489 C4.99494357,20.1131003 3.93684605,19.7841939 3.48709464,18.9287159 C3.30800126,18.5880601 3.24620058,18.1978659 3.31126006,17.8185401 L4.08231401,13.3229506 C4.13795194,12.9985566 4.03040346,12.6675564 3.79471737,12.4378192 L0.528480439,9.25402515 C-0.163615821,8.57939795 -0.177777361,7.47144978 0.496849759,6.77935352 C0.765489819,6.50375716 1.11748904,6.32440459 1.49835384,6.2690617 L6.01218227,5.61316404 C6.33789243,5.56583558 6.61945802,5.3612662 6.76512003,5.06612273 L8.78376551,0.975900309 C9.21150451,0.109206409 10.2608497,-0.246636841 11.1275436,0.181102169 Z"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/icon_fitness.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_fitness.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ff380c8056a72d4e4d3267a75f746034b95d18b5
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_fitness.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>健身</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="#ED6F21">
+            <circle id="椭圆形" fill-opacity="0.2" fill-rule="nonzero" cx="20" cy="20" r="20"></circle>
+            <g transform="translate(10.000000, 9.000000)" id="形状">
+                <path d="M6.72126582,12.3429695 L6.90380324,12.5809188 C7.1680918,12.9254359 7.46841428,13.2346279 7.80504984,13.5087764 C8.05965071,13.7161176 8.3156219,13.897112 8.5729342,14.0518704 L8.83069246,14.1978876 L9.18624134,14.386924 L5.70711399,16.9206625 C5.66045004,16.9590008 5.6126923,16.9938074 5.56384079,17.0250824 L5.54316385,17.037339 C5.08631735,17.3171092 4.54162019,17.2951749 3.90456565,16.9750302 L3.9768175,17.0096676 C3.96912373,17.007343 3.96159458,17.0049702 3.95422952,17.0025489 L0.488494536,15.6573681 C0.482867033,15.6550803 0.477272084,15.6527284 0.471710582,15.6503133 L0.462495529,15.6463499 C0.189903298,15.523596 0,15.2483998 0,14.9285714 C0,14.4946334 0.34958588,14.1428571 0.780821918,14.1428571 C0.843534348,14.1428571 0.90452001,14.1502966 0.962954866,14.1643464 L0.962495529,14.1648447 L4.39306707,14.9284198 L6.72126582,12.3429695 Z M14.8981786,6.92727191 C14.9138679,6.94622888 14.9266484,6.96586196 14.9399573,6.99019354 L14.9607464,7.03071758 L14.9909112,7.09554085 L15.026186,7.17699995 L15.0788458,7.30633902 L15.1415643,7.432957 L15.8311473,9.13663021 L18.3493151,9.16666667 C18.7086784,9.16666667 19,9.45981356 19,9.82142857 C19,10.1401643 18.7736704,10.4057068 18.4739095,10.4641997 L18.4742466,10.4683333 C16.2757991,10.7494444 15.0659815,10.8355277 14.8447939,10.7265831 C14.5596449,10.5861346 14.1393877,10.1928785 13.6739995,9.5827059 C13.5862542,9.47283576 13.4948497,9.34828787 13.3996905,9.20906536 C13.7714441,8.64815043 14.0535936,8.12993306 14.2461392,7.65441327 L14.2648289,7.60684954 C14.3011777,7.50798042 14.3352386,7.40991483 14.3670131,7.31265402 L14.455479,7.02328727 L14.4733837,6.97274162 C14.549712,6.81921192 14.7669026,6.76865431 14.8981786,6.92727191 Z" fill-opacity="0.6"></path>
+                <path d="M11.5787665,3.45963437 C11.9648984,3.46891658 12.3271094,3.5714224 12.5980677,3.73937227 L12.7084095,3.81527657 C14.14689,4.76996841 14.6057582,6.17533586 13.530002,7.98860274 L13.398499,8.2067454 C13.2754092,8.40829692 13.11918,8.65834031 12.9344656,8.94995274 L12.2728431,9.98392735 L11.4730075,11.2166142 C12.998246,12.7813437 13.8973312,13.7464763 14.1702631,14.1120119 C14.4642524,14.5057496 15.1941344,16.7945004 16.3599092,20.9782643 C16.3846585,21.0524703 16.3972603,21.1318971 16.3972603,21.2142857 C16.3972603,21.6482237 16.0476744,22 15.6164384,22 C15.3137745,22 15.0513313,21.8267164 14.9217418,21.5733629 L14.9215192,21.573102 L12.1457137,15.7409246 C12.1210331,15.6777211 11.690739,15.3698836 10.8363122,14.806714 L8.61851076,13.3585234 L8.47852919,13.2640057 C8.10233536,13.008203 7.89552652,12.8513809 7.75125211,12.7170675 C6.97454502,11.9940999 6.86898806,10.9238479 7.37048686,9.96301105 L7.84205479,9.00297619 L7.97898437,8.69169816 L8.0369686,8.56564982 L8.05392895,8.52972554 C8.11652267,8.39829317 8.17766345,8.27616476 8.23777878,8.16328346 L8.44382401,7.78875824 L8.50633982,7.66779936 L8.57001276,7.53939725 L8.6363437,7.40062746 L8.70683348,7.24856557 C8.73118998,7.19533797 8.75648977,7.13940763 8.78298298,7.08028711 L9.07117112,6.42854626 L7.01665255,6.90260352 L4.71650803,9.4603458 C4.57520706,9.60253212 4.38000158,9.69047619 4.16438356,9.69047619 C3.73314752,9.69047619 3.38356164,9.33869992 3.38356164,8.9047619 C3.38356164,8.73385576 3.43778843,8.57569432 3.52987305,8.44674908 L3.52943951,8.44635367 L5.18828949,5.8508933 C5.48273494,5.39306601 5.68945338,5.05924658 5.81969559,4.86098705 C5.94993779,4.66272751 6.26214865,4.55112671 7.44302173,4.29825539 L9.7863715,3.81370456 L10.1047065,3.74367503 L10.4508921,3.662847 C10.6293737,3.61966849 10.7880604,3.57843171 10.9309098,3.53784377 C11.0871294,3.49544714 11.2488179,3.46944123 11.4135452,3.46150115 L11.5787665,3.45963437 Z M14.2023872,0 C15.2607299,0 16.1193016,0.861742337 16.1193016,1.92514396 C16.1193016,2.98837817 15.2605841,3.85060146 14.2023872,3.85060146 C13.1428605,3.85060146 12.2835981,2.988612 12.2835981,1.92514396 C12.2835981,0.861508553 13.1427146,0 14.2023872,0 Z"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/icon_free.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_free.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cdda62c89fc8a834505c1cf1897b49ee9d7b949e
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_free.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>免费橙</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <circle id="椭圆形" fill-opacity="0.2" fill="#ED6F21" cx="20" cy="20" r="20"></circle>
+            <g id="uxs-a-link" transform="translate(10.000000, 10.706467)" fill="#FFFFFF" fill-opacity="0.6">
+                <path d="M3.99747672,0.0573816006 L9.27391456,1.34458815 C9.80441433,1.47400553 10.2589302,1.81470615 10.531959,2.28760589 L16.2720594,12.2297515 C16.8243442,13.1863368 16.4965939,14.4095176 15.5400086,14.9618023 L8.74010544,18.8877282 C7.78352019,19.440013 6.56033939,19.1122627 6.00805464,18.1556774 L0.2679542,8.21353181 C-0.00507459078,7.74063208 -0.0728720544,7.1766595 0.0802990933,6.6525245 L1.60376444,1.43939203 C1.9037782,0.412777623 2.95839569,-0.196106066 3.99747672,0.0573816006 Z M9.37799803,4.64397064 C9.28022472,4.37348347 8.98866258,4.22033417 8.70726039,4.29918895 C8.43112928,4.37656664 8.257343,4.64242678 8.288648,4.91999203 L8.288648,4.91999203 L8.30234783,4.99584903 L9.13547242,8.3338485 L5.73704533,7.5472612 L5.69082111,7.53849656 C5.42915936,7.49971636 5.17502231,7.64430625 5.07325411,7.88584995 L5.07325411,7.88584995 L5.04516133,7.96994178 L5.04235992,7.98173214 L5.03437656,8.02542231 C4.99970158,8.27259208 5.14286047,8.51005489 5.37448089,8.59636936 L5.37448089,8.59636936 L5.44374508,8.61696692 L8.90139447,9.39697297 L7.85350997,10.4448575 L7.82157614,10.4799786 C7.66190694,10.6733864 7.67255156,10.9601642 7.85350997,11.1411226 C8.02655144,11.3141641 8.29635569,11.3314683 8.48874975,11.1930351 L8.48874975,11.1930351 L8.54977511,11.1411226 L9.75728197,9.93361578 L10.7868707,10.9632045 L9.61839797,12.1316772 L9.58641286,12.1665045 C9.405164,12.3816282 9.41582569,12.7034384 9.61839797,12.9060106 C9.8127855,13.1003982 10.1169702,13.1180698 10.3313209,12.9590254 L10.3313209,12.9590254 L10.3927314,12.9060106 L11.5612041,11.7375379 L13.5738539,13.7501877 L13.6112682,13.7851628 C13.9049522,14.0416466 14.3513549,14.0299882 14.6311554,13.7501877 C14.9006622,13.4806808 14.9213935,13.0566047 14.6933493,12.7633179 L14.6933493,12.7633179 L14.6311554,12.6928862 L12.6185057,10.6802364 L13.8125117,9.48623036 L13.8444968,9.451403 C14.0257457,9.23627936 14.015084,8.91446914 13.8125117,8.71189686 C13.6181242,8.51750933 13.3139395,8.49983772 13.0995888,8.65888208 L13.0995888,8.65888208 L13.0381782,8.71189686 L11.8441722,9.90590295 L10.8145835,8.87631428 L12.0476237,7.64327403 L12.0795576,7.60815289 C12.2392268,7.41474511 12.2285822,7.12796728 12.0476237,6.94700886 C11.8745823,6.77396739 11.604778,6.75666322 11.412384,6.89509642 L11.412384,6.89509642 L11.3513586,6.94700886 L10.2779407,8.02042675 L9.39062533,4.6833975 L9.37799803,4.64397064 Z M5.63597903,2.72237936 C5.0574245,2.14382486 4.11940233,2.14382486 3.54084781,2.72237936 C2.96229331,3.30093386 2.96229331,4.23895606 3.54084781,4.81751056 C4.11940233,5.39606506 5.0574245,5.39606506 5.63597903,4.81751056 C6.21453353,4.23895606 6.21453353,3.30093386 5.63597903,2.72237936 Z" id="uxs-a"></path>
+            </g>
+            <g id="uxs-a-link" transform="translate(10.000000, 10.706467)" fill="#ED6F21" fill-opacity="0.6" fill-rule="nonzero">
+                <path d="M3.99747672,0.0573816006 L9.27391456,1.34458815 C9.80441433,1.47400553 10.2589302,1.81470615 10.531959,2.28760589 L16.2720594,12.2297515 C16.8243442,13.1863368 16.4965939,14.4095176 15.5400086,14.9618023 L8.74010544,18.8877282 C7.78352019,19.440013 6.56033939,19.1122627 6.00805464,18.1556774 L0.2679542,8.21353181 C-0.00507459078,7.74063208 -0.0728720544,7.1766595 0.0802990933,6.6525245 L1.60376444,1.43939203 C1.9037782,0.412777623 2.95839569,-0.196106066 3.99747672,0.0573816006 Z M9.37799803,4.64397064 C9.28022472,4.37348347 8.98866258,4.22033417 8.70726039,4.29918895 C8.43112928,4.37656664 8.257343,4.64242678 8.288648,4.91999203 L8.288648,4.91999203 L8.30234783,4.99584903 L9.13547242,8.3338485 L5.73704533,7.5472612 L5.69082111,7.53849656 C5.42915936,7.49971636 5.17502231,7.64430625 5.07325411,7.88584995 L5.07325411,7.88584995 L5.04516133,7.96994178 L5.04235992,7.98173214 L5.03437656,8.02542231 C4.99970158,8.27259208 5.14286047,8.51005489 5.37448089,8.59636936 L5.37448089,8.59636936 L5.44374508,8.61696692 L8.90139447,9.39697297 L7.85350997,10.4448575 L7.82157614,10.4799786 C7.66190694,10.6733864 7.67255156,10.9601642 7.85350997,11.1411226 C8.02655144,11.3141641 8.29635569,11.3314683 8.48874975,11.1930351 L8.48874975,11.1930351 L8.54977511,11.1411226 L9.75728197,9.93361578 L10.7868707,10.9632045 L9.61839797,12.1316772 L9.58641286,12.1665045 C9.405164,12.3816282 9.41582569,12.7034384 9.61839797,12.9060106 C9.8127855,13.1003982 10.1169702,13.1180698 10.3313209,12.9590254 L10.3313209,12.9590254 L10.3927314,12.9060106 L11.5612041,11.7375379 L13.5738539,13.7501877 L13.6112682,13.7851628 C13.9049522,14.0416466 14.3513549,14.0299882 14.6311554,13.7501877 C14.9006622,13.4806808 14.9213935,13.0566047 14.6933493,12.7633179 L14.6933493,12.7633179 L14.6311554,12.6928862 L12.6185057,10.6802364 L13.8125117,9.48623036 L13.8444968,9.451403 C14.0257457,9.23627936 14.015084,8.91446914 13.8125117,8.71189686 C13.6181242,8.51750933 13.3139395,8.49983772 13.0995888,8.65888208 L13.0995888,8.65888208 L13.0381782,8.71189686 L11.8441722,9.90590295 L10.8145835,8.87631428 L12.0476237,7.64327403 L12.0795576,7.60815289 C12.2392268,7.41474511 12.2285822,7.12796728 12.0476237,6.94700886 C11.8745823,6.77396739 11.604778,6.75666322 11.412384,6.89509642 L11.412384,6.89509642 L11.3513586,6.94700886 L10.2779407,8.02042675 L9.39062533,4.6833975 L9.37799803,4.64397064 Z M5.63597903,2.72237936 C5.0574245,2.14382486 4.11940233,2.14382486 3.54084781,2.72237936 C2.96229331,3.30093386 2.96229331,4.23895606 3.54084781,4.81751056 C4.11940233,5.39606506 5.0574245,5.39606506 5.63597903,4.81751056 C6.21453353,4.23895606 6.21453353,3.30093386 5.63597903,2.72237936 Z" id="uxs-a"></path>
+            </g>
+            <g id="uxs-c-link" transform="translate(10.048780, 10.000000)" fill="#FFFFFF">
+                <path d="M8.11346809,3.85796213e-07 C8.7032924,-0.000346916734 9.26905907,0.233805742 9.6861279,0.650874591 L18.881889,9.84663569 C19.7497208,10.7144675 19.7497208,12.1215007 18.881889,12.9893325 L12.9893325,18.881889 C12.1215008,19.7497208 10.7144675,19.7497208 9.84663571,18.881889 L0.650874591,9.68612791 C0.233805741,9.26905905 -0.000346916715,8.70329241 3.8579617e-07,8.11346808 L0.00347652023,2.22438694 C0.0042001894,0.998111864 0.998111864,0.00420018949 2.22438694,0.00347652013 L8.11346809,3.85796213e-07 Z M8.65848001,5.00565641 C8.3823489,5.08303411 8.20856262,5.34889425 8.23986762,5.6264595 L8.25356746,5.7023165 L9.08669204,9.04031597 L5.68826496,8.25372866 L5.64204073,8.24496402 C5.62664887,8.24268283 5.61128304,8.24103614 5.59597273,8.24000636 L5.55023782,8.23875016 C5.32269093,8.24154691 5.11426921,8.37919064 5.02447373,8.59231741 L4.99638096,8.67640925 L4.99357954,8.68819961 C4.93438507,8.95059975 5.08045537,9.21144502 5.32570051,9.30283683 L5.39496471,9.32343439 L8.85261409,10.1034404 L7.80472959,11.151325 C7.61246126,11.3435933 7.61246126,11.6553218 7.80472959,11.8475901 C7.90206543,11.9449259 8.03001759,11.9929855 8.15758707,11.9917688 L8.20005354,11.9895382 C8.28478801,11.9814269 8.36782159,11.951415 8.43996937,11.8995026 L8.43996937,11.8995026 L8.50099473,11.8475901 L9.70850159,10.6400832 L10.7380903,11.6696719 L9.56961759,12.8381446 C9.35579129,13.0519709 9.35579129,13.3986518 9.56961759,13.6124781 C9.67252862,13.7153892 9.80621329,13.7687708 9.9410499,13.7726231 L9.98599748,13.7720728 C10.0907851,13.7665084 10.1942785,13.7309817 10.2825405,13.6654929 L10.2825405,13.6654929 L10.3439511,13.6124781 L11.5124238,12.4440054 L13.5250735,14.4566552 C13.6710564,14.602638 13.8623903,14.6756295 14.0537243,14.6756295 L14.1015315,14.6741088 C14.2766323,14.6629573 14.4485574,14.5904728 14.582375,14.4566552 C14.8518819,14.1871483 14.8726131,13.7630721 14.6445689,13.4697854 L14.6445689,13.4697854 L14.582375,13.3993536 L12.5697253,11.3867039 L13.7637314,10.1926978 L13.7957165,10.1578705 C13.9769653,9.94274683 13.9663036,9.62093661 13.7637314,9.41836433 C13.6722549,9.32688783 13.5564635,9.27454569 13.4371613,9.26133786 L13.392299,9.25821933 C13.2724443,9.25479508 13.1516793,9.29050516 13.0508084,9.36534955 L12.9893979,9.41836433 L11.7953918,10.6123704 L10.7658031,9.58278175 L11.9988434,8.3497415 L12.0307772,8.31462036 C12.1904464,8.12121258 12.1798018,7.83443475 11.9988434,7.65347633 C11.9123226,7.56695558 11.8016112,7.51936919 11.6884807,7.51071711 L11.6459859,7.50929764 C11.5467652,7.51024394 11.447776,7.54099936 11.3636036,7.60156389 L11.3025782,7.65347633 L10.2291603,8.72689422 L9.34184496,5.38986497 L9.32921765,5.35043811 C9.25472371,5.14435266 9.06773554,5.00638169 8.85845668,4.98724036 L8.81897768,4.98505627 C8.76604946,4.98403389 8.71208043,4.99063644 8.65848001,5.00565641 Z M3.49206743,3.42884683 C2.91351293,4.00740133 2.91351293,4.94542352 3.49206743,5.52397802 C3.77307962,5.80499022 4.13889684,5.94951077 4.50713707,5.95753969 L4.57212901,5.95753969 L4.57212901,5.95753969 L4.63707065,5.95470594 C4.98311312,5.93203605 5.32271657,5.78846008 5.58719865,5.52397802 C6.16575315,4.94542352 6.16575315,4.00740133 5.58719865,3.42884683 C5.00864412,2.85029233 4.07062196,2.85029233 3.49206743,3.42884683 Z" id="uxs-c"></path>
+            </g>
+            <g id="uxs-c-link" transform="translate(10.048780, 10.000000)" fill="#ED6F21" fill-rule="nonzero">
+                <path d="M8.11346809,3.85796213e-07 C8.7032924,-0.000346916734 9.26905907,0.233805742 9.6861279,0.650874591 L18.881889,9.84663569 C19.7497208,10.7144675 19.7497208,12.1215007 18.881889,12.9893325 L12.9893325,18.881889 C12.1215008,19.7497208 10.7144675,19.7497208 9.84663571,18.881889 L0.650874591,9.68612791 C0.233805741,9.26905905 -0.000346916715,8.70329241 3.8579617e-07,8.11346808 L0.00347652023,2.22438694 C0.0042001894,0.998111864 0.998111864,0.00420018949 2.22438694,0.00347652013 L8.11346809,3.85796213e-07 Z M8.65848001,5.00565641 C8.3823489,5.08303411 8.20856262,5.34889425 8.23986762,5.6264595 L8.25356746,5.7023165 L9.08669204,9.04031597 L5.68826496,8.25372866 L5.64204073,8.24496402 C5.62664887,8.24268283 5.61128304,8.24103614 5.59597273,8.24000636 L5.55023782,8.23875016 C5.32269093,8.24154691 5.11426921,8.37919064 5.02447373,8.59231741 L4.99638096,8.67640925 L4.99357954,8.68819961 C4.93438507,8.95059975 5.08045537,9.21144502 5.32570051,9.30283683 L5.39496471,9.32343439 L8.85261409,10.1034404 L7.80472959,11.151325 C7.61246126,11.3435933 7.61246126,11.6553218 7.80472959,11.8475901 C7.90206543,11.9449259 8.03001759,11.9929855 8.15758707,11.9917688 L8.20005354,11.9895382 C8.28478801,11.9814269 8.36782159,11.951415 8.43996937,11.8995026 L8.43996937,11.8995026 L8.50099473,11.8475901 L9.70850159,10.6400832 L10.7380903,11.6696719 L9.56961759,12.8381446 C9.35579129,13.0519709 9.35579129,13.3986518 9.56961759,13.6124781 C9.67252862,13.7153892 9.80621329,13.7687708 9.9410499,13.7726231 L9.98599748,13.7720728 C10.0907851,13.7665084 10.1942785,13.7309817 10.2825405,13.6654929 L10.2825405,13.6654929 L10.3439511,13.6124781 L11.5124238,12.4440054 L13.5250735,14.4566552 C13.6710564,14.602638 13.8623903,14.6756295 14.0537243,14.6756295 L14.1015315,14.6741088 C14.2766323,14.6629573 14.4485574,14.5904728 14.582375,14.4566552 C14.8518819,14.1871483 14.8726131,13.7630721 14.6445689,13.4697854 L14.6445689,13.4697854 L14.582375,13.3993536 L12.5697253,11.3867039 L13.7637314,10.1926978 L13.7957165,10.1578705 C13.9769653,9.94274683 13.9663036,9.62093661 13.7637314,9.41836433 C13.6722549,9.32688783 13.5564635,9.27454569 13.4371613,9.26133786 L13.392299,9.25821933 C13.2724443,9.25479508 13.1516793,9.29050516 13.0508084,9.36534955 L12.9893979,9.41836433 L11.7953918,10.6123704 L10.7658031,9.58278175 L11.9988434,8.3497415 L12.0307772,8.31462036 C12.1904464,8.12121258 12.1798018,7.83443475 11.9988434,7.65347633 C11.9123226,7.56695558 11.8016112,7.51936919 11.6884807,7.51071711 L11.6459859,7.50929764 C11.5467652,7.51024394 11.447776,7.54099936 11.3636036,7.60156389 L11.3025782,7.65347633 L10.2291603,8.72689422 L9.34184496,5.38986497 L9.32921765,5.35043811 C9.25472371,5.14435266 9.06773554,5.00638169 8.85845668,4.98724036 L8.81897768,4.98505627 C8.76604946,4.98403389 8.71208043,4.99063644 8.65848001,5.00565641 Z M3.49206743,3.42884683 C2.91351293,4.00740133 2.91351293,4.94542352 3.49206743,5.52397802 C3.77307962,5.80499022 4.13889684,5.94951077 4.50713707,5.95753969 L4.57212901,5.95753969 L4.57212901,5.95753969 L4.63707065,5.95470594 C4.98311312,5.93203605 5.32271657,5.78846008 5.58719865,5.52397802 C6.16575315,4.94542352 6.16575315,4.00740133 5.58719865,3.42884683 C5.00864412,2.85029233 4.07062196,2.85029233 3.49206743,3.42884683 Z" id="uxs-c"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/icon_kid.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_kid.svg
new file mode 100644
index 0000000000000000000000000000000000000000..790a53146fe8569ba303d12fbcd258d022e0cbca
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_kid.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>儿童专区</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="#ED6F21" fill-rule="nonzero">
+            <g>
+                <circle id="椭圆形" fill-opacity="0.2" cx="20" cy="20" r="20"></circle>
+                <g transform="translate(9.500000, 12.514428)" id="形状">
+                    <path d="M3.9375,0 C6.1121212,0 7.875,1.7628788 7.875,3.9375 C7.875,6.1121212 6.1121212,7.875 3.9375,7.875 C1.7628788,7.875 0,6.1121212 0,3.9375 C0,1.7628788 1.7628788,0 3.9375,0 Z M17.0625,0 C19.2371212,0 21,1.7628788 21,3.9375 C21,6.1121212 19.2371212,7.875 17.0625,7.875 C14.8878788,7.875 13.125,6.1121212 13.125,3.9375 C13.125,1.7628788 14.8878788,0 17.0625,0 Z" fill-opacity="0.6"></path>
+                    <path d="M10.5,1.07555421 C15.1391919,1.07555421 18.9,4.83636231 18.9,9.47555425 C18.9,14.1147462 15.1391919,17.8755543 10.5,17.8755543 C5.8608081,17.8755543 2.1,14.1147462 2.1,9.47555425 C2.1,4.83636231 5.8608081,1.07555421 10.5,1.07555421 Z M6.89876746,11.4846059 C6.61700913,11.1532883 6.1200129,11.1131126 5.78869533,11.3948709 C5.45737775,11.6766292 5.41720204,12.1736255 5.69896038,12.504943 C6.88813091,13.90328 8.62805762,14.7255543 10.5,14.7255543 C12.3561806,14.7255543 14.082946,13.9171355 15.2718561,12.5390143 C15.5559553,12.2097017 15.5193026,11.7124333 15.18999,11.4283341 C14.8606774,11.144235 14.363409,11.1808877 14.0793098,11.5102003 C13.1865015,12.545096 11.8932555,13.1505543 10.5,13.1505543 C9.09493435,13.1505543 7.79178289,12.5346962 6.89876746,11.4846059 Z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/icon_live.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_live.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a8d8452d5bf8606bdab27b0b239c8e5ba9641b04
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_live.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>直播</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="#ED6F21" fill-rule="nonzero">
+            <g>
+                <circle id="椭圆形" fill-opacity="0.2" cx="20" cy="20" r="20"></circle>
+                <g transform="translate(10.000000, 12.500000)">
+                    <path d="M14.2310053,0 C15.8878595,0 17.2310053,1.34314575 17.2310053,3 L17.2310053,13.3573212 C17.2310053,15.0141754 15.8878595,16.3573212 14.2310053,16.3573212 L3,16.3573212 C1.34314575,16.3573212 0,15.0141754 0,13.3573212 L0,3 C0,1.34314575 1.34314575,0 3,0 L14.2310053,0 Z M5.17380713,2.50909091 L2.69405002,2.50909091 C2.36629399,2.50909091 2.10059524,2.77478966 2.10059524,3.10254569 C2.10059524,3.43030171 2.36629399,3.69600046 2.69405002,3.69600046 L2.69405002,3.69600046 L5.17380713,3.69600046 C5.50156315,3.69600046 5.7672619,3.43030171 5.7672619,3.10254569 C5.7672619,2.77478966 5.50156315,2.50909091 5.17380713,2.50909091 L5.17380713,2.50909091 Z" id="形状"></path>
+                    <path d="M14.6821632,4.6139033 L19.0367882,3.39866899 C20.1007061,3.10176408 21.2038709,3.72355095 21.5007758,4.78746883 C21.5496188,4.962491 21.5743821,5.14335307 21.5743821,5.32506272 L21.5743821,11.0322584 C21.5743821,12.1368279 20.6789516,13.0322584 19.5743821,13.0322584 C19.3926724,13.0322584 19.2118103,13.0074952 19.0367882,12.9586522 L14.6821632,11.7434179 C14.0193835,11.5584576 13.5609852,10.9546202 13.5609852,10.266516 L13.5609852,6.09080516 C13.5609852,5.402701 14.0193835,4.7988636 14.6821632,4.6139033 Z" id="路径" fill-opacity="0.6"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/icon_vip.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_vip.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2086f6e5642e219c7c004bf41b2a65c3f4c84b7c
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_vip.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>会员专区橙</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="#ED6F21">
+            <circle id="椭圆形" fill-opacity="0.2" cx="20" cy="20" r="20"></circle>
+            <g transform="translate(9.548793, 11.013569)" fill-rule="nonzero" id="形状">
+                <path d="M3.87579723,3.10695283 C4.20204336,3.10695283 4.51570904,3.23283299 4.75144399,3.45836696 L10.5380714,8.99458934 L16.3172301,3.46058395 C16.8224948,2.97675267 17.6243155,2.99412792 18.1081468,3.49939264 C18.3339205,3.73516798 18.4599508,4.0490056 18.4599508,4.37544667 L18.4599508,13.7271196 C18.4599508,14.6852136 17.6832621,15.4619023 16.7251681,15.4619023 L4.34391317,15.4619023 C3.38581919,15.4619023 2.60913056,14.6852136 2.60913056,13.7271196 L2.60913056,4.3736195 C2.60913056,3.67405881 3.17623655,3.10695283 3.87579723,3.10695283 Z M10.7006939,9.65227816 C10.3969373,9.65227816 10.1506939,9.89852156 10.1506939,10.2022782 L10.1506939,10.2022782 L10.1506939,14.8060199 L10.1578924,14.8952328 C10.2005177,15.1565628 10.4273129,15.3560199 10.7006939,15.3560199 C11.0044505,15.3560199 11.2506939,15.1097766 11.2506939,14.8060199 L11.2506939,14.8060199 L11.2506939,10.2022782 L11.2434953,10.1130654 C11.2008701,9.85173536 10.9740748,9.65227816 10.7006939,9.65227816 Z M14.310581,9.57053366 L12.9970123,9.57053366 C12.6932557,9.57053366 12.4470123,9.81677706 12.4470123,10.1205337 L12.4470123,10.1205337 L12.4470123,14.8060199 L12.4542109,14.8952328 C12.4968361,15.1565628 12.7236314,15.3560199 12.9970123,15.3560199 C13.3007689,15.3560199 13.5470123,15.1097766 13.5470123,14.8060199 L13.5470123,14.8060199 L13.5467695,13.2295337 L14.310581,13.2296965 L14.4606351,13.2236315 C15.4008962,13.1473051 16.1401624,12.3600425 16.1401624,11.4001151 C16.1401624,10.3896652 15.3210309,9.57053366 14.310581,9.57053366 L14.310581,9.57053366 Z M8.71120174,9.67983176 C8.42266253,9.58489386 8.11179292,9.74183876 8.01685504,10.030378 L8.01685504,10.030378 L7.01820735,13.0614311 L6.00031856,10.0272285 L5.96510034,9.94494586 C5.84151756,9.71077156 5.56303415,9.59386896 5.30386918,9.68087856 C5.01590811,9.77755586 4.86084197,10.0893669 4.95751926,10.3773279 L4.95751926,10.3773279 L6.50313546,14.9810697 L6.5437123,15.0746604 C6.76377465,15.4800866 7.3926565,15.4469514 7.54698156,14.9779202 L7.54698156,14.9779202 L9.06174796,10.3741785 L9.08279313,10.287185 C9.12398092,10.0256246 8.97088704,9.76527576 8.71120174,9.67983176 Z M14.310581,10.6705337 C14.7135177,10.6705337 15.0401624,10.9971785 15.0401624,11.4001151 C15.0401624,11.8030518 14.7135177,12.1296965 14.310581,12.1296965 L14.310581,12.1296965 L13.5482073,12.1294311 L13.5482073,10.6704311 L14.310581,10.6705337 Z" fill-opacity="0.6"></path>
+                <path d="M11.3343247,0.165027497 C11.794569,0.36540641 12.1614792,0.733182212 12.3607729,1.19389741 L15.3234745,8.04288974 L18.7614428,6.27459433 C19.5390631,5.87463067 20.4936836,6.18078187 20.8936472,6.95840219 C21.0729489,7.30700544 21.1165555,7.70972969 21.0160274,8.08863262 L18.8023238,16.4323608 C18.6005661,17.1928111 17.9123124,17.7222734 17.1255527,17.7222734 L3.94381227,17.7222734 C3.15705255,17.7222734 2.46879888,17.1928111 2.26704115,16.4323608 L0.0533374888,8.08863262 C-0.170907874,7.24342359 0.332482643,6.3764595 1.17769168,6.15221414 C1.55659461,6.05168608 1.95931886,6.09529265 2.30792211,6.27459433 L5.74589048,8.04288974 L8.72963407,1.18961901 C9.16596641,0.187420399 10.3321261,-0.271304845 11.3343247,0.165027497 Z M10.7006939,9.65227816 C10.3969373,9.65227816 10.1506939,9.89852156 10.1506939,10.2022782 L10.1506939,10.2022782 L10.1506939,14.8060199 L10.1578924,14.8952328 C10.2005177,15.1565628 10.4273129,15.3560199 10.7006939,15.3560199 C11.0044505,15.3560199 11.2506939,15.1097766 11.2506939,14.8060199 L11.2506939,14.8060199 L11.2506939,10.2022782 L11.2434953,10.1130654 C11.2008701,9.85173536 10.9740748,9.65227816 10.7006939,9.65227816 Z M14.310581,9.57053366 L12.9970123,9.57053366 C12.6932557,9.57053366 12.4470123,9.81677706 12.4470123,10.1205337 L12.4470123,10.1205337 L12.4470123,14.8060199 L12.4542109,14.8952328 C12.4968361,15.1565628 12.7236314,15.3560199 12.9970123,15.3560199 C13.3007689,15.3560199 13.5470123,15.1097766 13.5470123,14.8060199 L13.5470123,14.8060199 L13.5467695,13.2295337 L14.310581,13.2296965 L14.4606351,13.2236315 C15.4008962,13.1473051 16.1401624,12.3600425 16.1401624,11.4001151 C16.1401624,10.3896652 15.3210309,9.57053366 14.310581,9.57053366 L14.310581,9.57053366 Z M8.71120174,9.67983176 C8.42266253,9.58489386 8.11179292,9.74183876 8.01685504,10.030378 L8.01685504,10.030378 L7.01820735,13.0614311 L6.00031856,10.0272285 L5.96510034,9.94494586 C5.84151756,9.71077156 5.56303415,9.59386896 5.30386918,9.68087856 C5.01590811,9.77755586 4.86084197,10.0893669 4.95751926,10.3773279 L4.95751926,10.3773279 L6.50313546,14.9810697 L6.5437123,15.0746604 C6.76377465,15.4800866 7.3926565,15.4469514 7.54698156,14.9779202 L7.54698156,14.9779202 L9.06174796,10.3741785 L9.08279313,10.287185 C9.12398092,10.0256246 8.97088704,9.76527576 8.71120174,9.67983176 Z M14.310581,10.6705337 C14.7135177,10.6705337 15.0401624,10.9971785 15.0401624,11.4001151 C15.0401624,11.8030518 14.7135177,12.1296965 14.310581,12.1296965 L14.310581,12.1296965 L13.5482073,12.1294311 L13.5482073,10.6704311 L14.310581,10.6705337 Z"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/icon_weekly_hot.svg b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_weekly_hot.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7bcc290e310d0ec811cc71d7cb94bfedc3eeab4b
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/base/media/icon_weekly_hot.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>周热榜橙</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="#ED6F21">
+            <circle id="椭圆形" fill-opacity="0.2" cx="20" cy="20" r="20"></circle>
+            <g transform="translate(10.000000, 11.000000)" fill-rule="nonzero">
+                <g id="uxs-a-link" fill-opacity="0.6">
+                    <path d="M21,11.0368421 L21,16.4368421 C21,17.3001504 20.2948485,18 19.425,18 L16.8477272,18 C15.9778788,18 15.2727273,17.3001504 15.2727273,16.4368421 L15.2727273,11.0368421 C15.2727273,10.1735339 15.9778788,9.47368419 16.8477272,9.47368419 L19.425,9.47368419 C20.2948485,9.47368419 21,10.1735339 21,11.0368421 Z M13.3636364,1.5631579 L13.3636364,16.4368421 C13.3636364,17.3001504 12.6584849,18 11.7886364,18 L9.2113636,18 C8.34151513,18 7.63636363,17.3001504 7.63636363,16.4368421 L7.63636363,1.5631579 C7.63636363,0.69984963 8.34151513,0 9.2113636,0 L11.7886364,0 C12.6584849,0 13.3636364,0.69984963 13.3636364,1.5631579 Z M5.72727273,7.24736844 L5.72727273,16.4368421 C5.72727273,17.3001504 5.0221212,18 4.15227272,18 L1.575,18 C0.705151522,18 0,17.3001504 0,16.4368421 L0,7.24736844 C0,6.38406016 0.705151522,5.68421053 1.575,5.68421053 L4.15227272,5.68421053 C5.0221212,5.68421053 5.72727273,6.38406016 5.72727273,7.24736844 Z" id="uxs-a"></path>
+                </g>
+                <path d="M13.3636364,1.5631579 L13.3636364,16.4368421 C13.3636364,17.3001504 12.6584849,18 11.7886364,18 L9.2113636,18 C8.34151513,18 7.63636363,17.3001504 7.63636363,16.4368421 L7.63636363,1.5631579 C7.63636363,0.69984963 8.34151513,0 9.2113636,0 L11.7886364,0 C12.6584849,0 13.3636364,0.69984963 13.3636364,1.5631579 Z" id="路径"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/immersive_background_lg.png b/MultiVideoApplication/features/home/src/main/resources/base/media/immersive_background_lg.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2b5ef53b9afbe9be86c33427f9d8028a9ac9f15
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/immersive_background_lg.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/immersive_background_md.png b/MultiVideoApplication/features/home/src/main/resources/base/media/immersive_background_md.png
new file mode 100644
index 0000000000000000000000000000000000000000..e32bdd8b44cdbc8fb7738516d88c70b86d79669d
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/immersive_background_md.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/immersive_background_sm.png b/MultiVideoApplication/features/home/src/main/resources/base/media/immersive_background_sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..1673f55bcc69686bdf99af642d3f4fa3b693f2ff
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/immersive_background_sm.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_1.png b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..35d47d00d4b5b30d3686fef0f48493cdaa13fa03
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_1.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_2.png b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0323f4793ddf9e18ee1f0e7e8ea08545944050a
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_2.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_3.png b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..4180b2054911ec6e0bf98b7757ab6ae93693e522
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_3.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_4.png b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..2a484b6b412c947baa99c4f1adc9c4f7b6999c23
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_4.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_5.png b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..e5b18ddab1e2fa089400f0e6174a7a107601f731
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_5.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_6.png b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..f234ea2f4ff9cf22d6fb5e50fd3e4e958ea93f58
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_6.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_7.png b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_7.png
new file mode 100644
index 0000000000000000000000000000000000000000..d27057837163e75917e27d02cf2c0b8f82169d1b
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_7.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_play.png b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_play.png
new file mode 100644
index 0000000000000000000000000000000000000000..ecf58bb0989563dde1f95cc6e3c39eafee25b14d
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/new_video_play.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_1.png b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a4213f8e48ea159ea55569a5180faa9ee2dcd20
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_1.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_2.png b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..e758888ac09052eed6e214bab7e682323c4fd65b
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_2.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_3.png b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..91da2c136287d68f5c0d9171023c90ac6fffe5e9
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_3.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_4.png b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..51cbd35ce8668de05d9236b2a3dbde06fa6f6bc8
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_4.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_5.png b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf40722e4d020615db348d113b955928050c6dfb
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_5.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_6.png b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..f720ba4448b6b9f0993d4518cf295f089ce2cf59
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_6.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_7.png b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_7.png
new file mode 100644
index 0000000000000000000000000000000000000000..e9b92def1abb235e2a9ed4dd3123652db49d232e
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_7.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_8.png b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_8.png
new file mode 100644
index 0000000000000000000000000000000000000000..05d5ea74d4d91009ccea8b6e4ca7d776653e9585
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_8.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_9.png b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_9.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b2270ff4b7700d22cc21a36d3a29c5cf4a071e2
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/previous_video_9.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/base/media/white_background.png b/MultiVideoApplication/features/home/src/main/resources/base/media/white_background.png
new file mode 100644
index 0000000000000000000000000000000000000000..0425fe44248edc72dcdb5b18bb7528d5f86ddd56
Binary files /dev/null and b/MultiVideoApplication/features/home/src/main/resources/base/media/white_background.png differ
diff --git a/MultiVideoApplication/features/home/src/main/resources/en_US/element/string.json b/MultiVideoApplication/features/home/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..7b83743c4aa55169a262e045850cb0e0579a2ec9
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/en_US/element/string.json
@@ -0,0 +1,180 @@
+{
+  "string": [
+    {
+      "name": "tab_home",
+      "value": "home"
+    },
+    {
+      "name": "tab_development",
+      "value": "develop"
+    },
+    {
+      "name": "tab_member",
+      "value": "member"
+    },
+    {
+      "name": "tab_mine",
+      "value": "my"
+    },
+    {
+      "name": "sift",
+      "value": "Sift"
+    },
+    {
+      "name": "video",
+      "value": "Video"
+    },
+    {
+      "name": "community",
+      "value": "Area"
+    },
+    {
+      "name": "news",
+      "value": "News"
+    },
+    {
+      "name": "shop",
+      "value": "Shop"
+    },
+    {
+      "name": "science",
+      "value": "Science"
+    },
+    {
+      "name": "finance",
+      "value": "Finance"
+    },
+    {
+      "name": "history",
+      "value": "History"
+    },
+    {
+      "name": "affairs",
+      "value": "Affairs"
+    },
+    {
+      "name": "all",
+      "value": "all"
+    },
+    {
+      "name": "heat_list",
+      "value": "heat list"
+    },
+    {
+      "name": "free",
+      "value": "free"
+    },
+    {
+      "name": "sutra",
+      "value": "sutra"
+    },
+    {
+      "name": "prefecture",
+      "value": "prefecture"
+    },
+    {
+      "name": "kids_only",
+      "value": "kids only"
+    },
+    {
+      "name": "zone",
+      "value": "HUAWEI zone"
+    },
+    {
+      "name": "Premium_products",
+      "value": "pay products"
+    },
+    {
+      "name": "Fitness",
+      "value": "fitness area"
+    },
+    {
+      "name": "new",
+      "value": "New product distribution meeting"
+    },
+    {
+      "name": "folding",
+      "value": "Folding flagship and full scene"
+    },
+    {
+      "name": "cultural",
+      "value": "Architectural cultural and historical sites"
+    },
+    {
+      "name": "europe",
+      "value": "The historical responsibility of European architecture lies in the formation and development of European architectural styles"
+    },
+    {
+      "name": "life",
+      "value": "Huawei full scene smart life"
+    },
+    {
+      "name": "landscape",
+      "value": "Millions of years ago, the landscape was formed"
+    },
+    {
+      "name": "explore",
+      "value": "The source of life: to explore the source of life"
+    },
+    {
+      "name": "source",
+      "value": "To explore the source of life"
+    },
+    {
+      "name": "lonely",
+      "value": "lonely"
+    },
+    {
+      "name": "film",
+      "value": "Film · Feature Film · 2008"
+    },
+    {
+      "name": "plays",
+      "value": "752,000 plays"
+    },
+    {
+      "name": "release",
+      "value": "New film release"
+    },
+    {
+      "name": "tablet",
+      "value": "Daily best tablet"
+    },
+    {
+      "name": "back",
+      "value": "Look back"
+    },
+    {
+      "name": "follow",
+      "value": "follow"
+    },
+    {
+      "name": "play_on",
+      "value": "Play on"
+    },
+    {
+      "name": "player",
+      "value": "play"
+    },
+    {
+      "name": "cache",
+      "value": "cache"
+    },
+    {
+      "name": "search",
+      "value": "Search..."
+    },
+    {
+      "name": "binge_watch",
+      "value": "Watch"
+    },
+    {
+      "name": "Collect",
+      "value": "Collect"
+    },
+    {
+      "name": "like",
+      "value": "Like"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/home/src/main/resources/zh_CN/element/string.json b/MultiVideoApplication/features/home/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..331169b0e5528adbc0c9f26818fd61488dccd917
--- /dev/null
+++ b/MultiVideoApplication/features/home/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,179 @@
+{
+  "string": [
+    {
+      "name": "tab_home",
+      "value": "首页"
+    },
+    {
+      "name": "tab_development",
+      "value": "动态"
+    },
+    {
+      "name": "tab_member",
+      "value": "会员购"
+    },
+    {
+      "name": "tab_mine",
+      "value": "我的"
+    },
+    {
+      "name": "sift",
+      "value": "精选"
+    },
+    {
+      "name": "video",
+      "value": "视频"
+    },
+    {
+      "name": "community",
+      "value": "社区"
+    },
+    {
+      "name": "news",
+      "value": "新闻"
+    },
+    {
+      "name": "shop",
+      "value": "购物"
+    },
+    {
+      "name": "science",
+      "value": "科技"
+    },
+    {
+      "name": "finance",
+      "value": "财经"
+    },
+    {
+      "name": "history",
+      "value": "历史"
+    },
+    {
+      "name": "affairs",
+      "value": "军事"
+    },
+    {
+      "name": "all",
+      "value": "全部"
+    },
+    {
+      "name": "heat_list",
+      "value": "周热榜"
+    },
+    {
+      "name": "free",
+      "value": "免费"
+    },
+    {
+      "name": "sutra",
+      "value": "经典"
+    },
+    {
+      "name": "prefecture",
+      "value": "专区"
+    },
+    {
+      "name": "kids_only",
+      "value": "儿童专区"
+    },
+    {
+      "name": "zone",
+      "value": "华为专区"
+    },
+    {
+      "name": "Premium_products",
+      "value": "付费精品"
+    },
+    {
+      "name": "Fitness",
+      "value": "健身专区"
+    },
+    {
+      "name": "new",
+      "value": "新  品  发  布  会"
+    },
+    {
+      "name": "folding",
+      "value": "折叠旗舰及全场景"
+    },
+    {
+      "name": "cultural",
+      "value": "建筑人文史迹"
+    },
+    {
+      "name": "europe",
+      "value": "欧洲建筑的历史责任在载对欧洲建筑风格的形成和"
+    },
+    {
+      "name": "life",
+      "value": "华为全场景智慧生活"
+    },
+    {
+      "name": "landscape",
+      "value": "数百万年前，地貌形成"
+    },
+    {
+      "name": "explore",
+      "value": "生命之源:探索生命之源"
+    },
+    {
+      "name": "source",
+      "value": "探索生命之源"
+    },
+    {
+      "name": "lonely",
+      "value": "孤独者"
+    },
+    {
+      "name": "film",
+      "value": "电影 · 剧情片 · 2008年上"
+    },{
+      "name": "plays",
+      "value": "75.2万次播放"
+    },
+    {
+      "name": "release",
+      "value": "新片发布"
+    },
+    {
+      "name": "tablet",
+      "value": "每日佳片"
+    },
+    {
+      "name": "back",
+      "value": "往期回顾"
+    },
+    {
+      "name": "follow",
+      "value": "关注"
+    },
+    {
+      "name": "play_on",
+      "value": "继续播放"
+    },
+    {
+      "name": "player",
+      "value": "播放"
+    },
+    {
+      "name": "cache",
+      "value": "缓存"
+    },
+    {
+      "name": "search",
+      "value": "搜索..."
+    },
+    {
+      "name": "binge_watch",
+      "value": "追剧"
+    },
+    {
+      "name": "Collect",
+      "value": "收藏"
+    },
+    {
+      "name": "like",
+      "value": "点赞"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/Index.ets b/MultiVideoApplication/features/search/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1b7653c737b23055fc11ef760c80410c588fdaf8
--- /dev/null
+++ b/MultiVideoApplication/features/search/Index.ets
@@ -0,0 +1 @@
+export { SearchView } from './src/main/ets/view/SearchView';
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/build-profile.json5 b/MultiVideoApplication/features/search/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..3167e54d1ff3a0aaa0cdcf4319789de8e3f3c350
--- /dev/null
+++ b/MultiVideoApplication/features/search/build-profile.json5
@@ -0,0 +1,10 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+  },
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/hvigorfile.ts b/MultiVideoApplication/features/search/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiVideoApplication/features/search/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiVideoApplication/features/search/oh-package.json5 b/MultiVideoApplication/features/search/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..1e59e4e9d63e26e2df5d2d8fd50f876404b17200
--- /dev/null
+++ b/MultiVideoApplication/features/search/oh-package.json5
@@ -0,0 +1,13 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "search",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/commons": "file:../../commons/base"
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/ets/constants/SearchConstants.ets b/MultiVideoApplication/features/search/src/main/ets/constants/SearchConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..61f952e807c16eeebc85286d3cd55c711cbe810b
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/ets/constants/SearchConstants.ets
@@ -0,0 +1,119 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class SearchConstants {
+  /**
+   * Searching for a recommendation list in large devices.
+   */
+  static readonly SEARCH_DISCOVERY_LARGE: ResourceStr[] =
+    [$r('app.string.search'), $r('app.string.search'), $r('app.string.search'), $r('app.string.search'),
+      $r('app.string.search'),
+      $r('app.string.search'), $r('app.string.search'), $r('app.string.search'), $r('app.string.search')];
+  /**
+   * Tabs list.
+   */
+  static readonly SEARCH_TABS: ResourceStr[] =
+    [$r('app.string.top'), $r('app.string.theater'), $r('app.string.movie'), $r('app.string.variety'),
+      $r('app.string.anime'), $r('app.string.children'), $r('app.string.records')];
+  /**
+   * Search List for hua.
+   */
+  static readonly HUA_LIST: ResourceStr[] =
+    [ $r('app.string.tv'), $r('app.string.tv'),  $r('app.string.tv'), $r('app.string.conference'),
+      $r('app.string.tv'),  $r('app.string.tv')];
+  /**
+   * Search result tab List.
+   */
+  static readonly SEARCH_RESULT_TAB_LIST: ResourceStr[] = [$r('app.string.all'), $r('app.string.filmer'), $r('app.string.video'), $r('app.string.user')];
+  /**
+   * Search video img title list.
+   */
+  static readonly SEARCH_IMG_IMG_TITLES: ResourceStr[] =
+    [$r('app.string.cultural'), $r('app.string.cultural'), $r('app.string.cultural'), $r('app.string.cultural'),
+      $r('app.string.cultural'), $r('app.string.cultural'), $r('app.string.cultural'), $r('app.string.cultural'),
+      $r('app.string.cultural'), $r('app.string.cultural'), $r('app.string.cultural'), $r('app.string.cultural')];
+  /**
+   * Search video img content list.
+   */
+  static readonly SEARCH_IMG_IMG_CONTENTS: ResourceStr[] =
+    [$r('app.string.europe'), $r('app.string.europe'),
+      $r('app.string.europe'), $r('app.string.europe'), $r('app.string.europe'),
+      $r('app.string.europe'), $r('app.string.europe'),
+      $r('app.string.europe'),
+      $r('app.string.europe'), $r('app.string.europe'), $r('app.string.europe'),
+      $r('app.string.europe')];
+  /**
+   * Search result title list.
+   */
+  static readonly SEARCH_RESULT_TITLES: ResourceStr[] = [$r('app.string.flagship'), $r('app.string.flagship'),
+    $r('app.string.flagship')];
+  /**
+   * Search result content list.
+   */
+  static readonly SEARCH_RESULT_CONTENTS: ResourceStr[] = [$r('app.string.press'), $r('app.string.press'),
+    $r('app.string.press')];
+  /**
+   * Search result more info list.
+   */
+  static readonly SEARCH_RESULT_MORE: ResourceStr[] = [$r('app.string.plays'), $r('app.string.plays'), $r('app.string.plays')];
+  /**
+   * Search sub title list.
+   */
+  static readonly SEARCH_SUB_TITLES: ResourceStr[] = [$r('app.string.history_search'), $r('app.string.content'), $r('app.string.find')];
+  /**
+   * Search recommend list lanes.
+   */
+  static readonly SEARCH_LIST_LANES: number[] = [3, 2, 1];
+  /**
+   * Hot trending list spaces.
+   */
+  static readonly HOT_TRENDING_LIST_SPACES: string[] = ['16vp', '24vp', '36vp'];
+  /**
+   * Search recommend divider padding.
+   */
+  static readonly SEARCH_RECOMMEND_DIVIDER_PADDING: string = '16vp';
+  /**
+   * Search index.
+   */
+  static readonly SEARCH_INDEX: number[] = [2, 3];
+  /**
+   * Search placeholder.
+   */
+  static readonly SEARCH_PLACEHOLDER: ResourceStr = $r('app.string.search1');
+  /**
+   * Type tabs divider stroke width.
+   */
+  static readonly TYPE_TABS_DIVIDER_STROKE_WIDTH: string = '2vp';
+  /**
+   * Search result title.
+   */
+  static readonly SEARCH_RESULT_TITLE: ResourceStr = $r('app.string.conference');
+  /**
+   * Search result button text list.
+   */
+  static readonly SEARCH_RESULT_BUTTON_TEXTS: ResourceStr[] = [$r('app.string.player'), $r('app.string.cache')];
+  /**
+   * Video detail url.
+   */
+  static readonly VIDEO_DETAIL_URL: string = '@bundle:com.huawei.videoapplication/videoDetail/ets/pages/Index';
+  /**
+   * Search input list.
+   */
+  static readonly SEARCH_INPUT_LIST: ResourceStr[] = ['华', '华为发布会'];
+  /**
+   * Hot video divider stroke width.
+   */
+  static readonly DIVIDER_STROKE_WIDTH: string = '0.5vp';
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/ets/view/SearchContent.ets b/MultiVideoApplication/features/search/src/main/ets/view/SearchContent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6644d224d4390cbc3e08ecc427225e9824bb0418
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/ets/view/SearchContent.ets
@@ -0,0 +1,225 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { BreakpointType } from '@ohos/commons';
+import { SearchConstants } from '../constants/SearchConstants';
+import { SearchVideoImg } from '../viewmodel/SearchVideoImgViewModel';
+
+@Component
+export struct SearchContent {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @State currentIndex: number = 0;
+  @Link searchVideoList: SearchVideoImg[];
+
+  build() {
+    Scroll() {
+      Column() {
+        this.searchHistory()
+        this.searchDiscovery()
+        this.searchHotTrending()
+      }
+      .alignItems(HorizontalAlign.Start)
+      .width(CommonConstants.FULL_PERCENT)
+    }
+    .scrollable(ScrollDirection.Vertical)
+    .scrollBar(BarState.Off)
+  }
+
+  @Builder
+  searchHistory() {
+    Row() {
+      Text(SearchConstants.SEARCH_SUB_TITLES[0])
+        .fontSize($r('app.float.search_history_title_font'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+      Blank()
+      Image($r('app.media.ic_public_delete'))
+        .height($r('app.float.search_history_img_size'))
+        .width($r('app.float.search_history_img_size'))
+        .opacity(CommonConstants.TEXT_OPACITY[4])
+    }
+    .margin({ top: $r('app.float.search_history_title_margin') })
+    .width(CommonConstants.FULL_PERCENT)
+    .height($r('app.float.search_history_title_height'))
+
+    Row() {
+      this.searchContent()
+      this.searchContent()
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .height($r('app.float.search_history_content_height'))
+    .margin({ top: $r('app.float.search_history_content_margin') })
+  }
+
+  @Builder
+  searchContent() {
+    Row() {
+      Text(SearchConstants.SEARCH_SUB_TITLES[1])
+        .fontSize($r('app.float.search_history_content_font'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+    }
+    .justifyContent(FlexAlign.Center)
+    .width($r('app.float.search_history_content_row_width'))
+    .height($r('app.float.search_history_content_row_height'))
+    .borderRadius($r('app.float.search_history_content_row_radius'))
+    .backgroundColor($r('app.color.result_background'))
+    .margin({ right: new BreakpointType($r('app.float.search_content_margin_right_sm'),
+      $r('app.float.search_content_margin_right_md'), $r('app.float.search_content_margin_right_lg'))
+      .getValue(this.currentWidthBreakpoint) })
+  }
+  // [Start search_content_discovery]
+  @Builder
+  searchDiscovery() {
+    Row() {
+      Text(SearchConstants.SEARCH_SUB_TITLES[2])
+        .fontSize($r('app.float.search_history_title_font'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+      Blank()
+      Image($r('app.media.ic_public_rotate'))
+        .height($r('app.float.search_discovery_img_size'))
+        .width($r('app.float.search_discovery_img_size'))
+        .margin({ right: $r('app.float.search_discovery_img_margin') })
+        .fillColor($r('app.color.type_tabs_font_selected'))
+    }
+    .height($r('app.float.search_discovery_row_height'))
+    .width(CommonConstants.FULL_PERCENT)
+    .margin({ top: $r('app.float.search_discovery_img_margin') })
+
+    List() {
+      ForEach(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_DISCOVERY_LARGE :
+        SearchConstants.SEARCH_DISCOVERY_LARGE.slice(0, 6), (item: string, index: number) => {
+        ListItem() {
+          // [StartExclude search_content_discovery]
+          Column() {
+            Text(item)
+              .fontSize($r('app.float.search_discovery_list_font'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          }
+          .padding({ right: this.getDividerPadding(this.currentWidthBreakpoint, index) })
+          .height($r('app.float.search_discovery_list_column_height'))
+          .width(CommonConstants.FULL_PERCENT)
+          .margin({ top: $r('app.float.search_discovery_list_column_margin') })
+          .alignItems(HorizontalAlign.Start)
+          // [EndExclude search_content_discovery]
+        }
+      }, (item: string, index: number) => index + JSON.stringify(item))
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .lanes(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_LIST_LANES[0] :
+      SearchConstants.SEARCH_LIST_LANES[1])
+  }
+  // [End search_content_discovery]
+
+  @Builder
+  searchHotTrending() {
+    List({ space: new BreakpointType(SearchConstants.HOT_TRENDING_LIST_SPACES[0],
+      SearchConstants.HOT_TRENDING_LIST_SPACES[1], SearchConstants.HOT_TRENDING_LIST_SPACES[2])
+      .getValue(this.currentWidthBreakpoint) }) {
+      ForEach(SearchConstants.SEARCH_TABS, (item: string, index: number) => {
+        ListItem() {
+          Column() {
+            Text(item)
+              .fontSize($r('app.float.hot_trending_font'))
+              .lineHeight($r('app.float.hot_trending_line'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+              .fontColor(index === this.currentIndex ? $r('app.color.type_tabs_font_selected') : Color.Black)
+              .opacity(index !== this.currentIndex ? CommonConstants.TEXT_OPACITY[2] : CommonConstants.TEXT_OPACITY[3])
+              .margin({ top: $r('app.float.tabs_font_margin') })
+
+            Divider()
+              .strokeWidth(SearchConstants.TYPE_TABS_DIVIDER_STROKE_WIDTH)
+              .width($r('app.float.tab_divider_width'))
+              .color($r('app.color.type_tabs_font_selected'))
+              .visibility(index === this.currentIndex ? Visibility.Visible : Visibility.None)
+              .margin({ top: $r('app.float.tabs_divider_margin') })
+              .lineCap(LineCapStyle.Round)
+          }
+          .height($r('app.float.hot_trending_tab_height'))
+          .justifyContent(FlexAlign.Start)
+        }
+        .onClick(() => {
+          this.currentIndex = index;
+        })
+      })
+    }
+    .margin({ top: $r('app.float.tab_list_margin') })
+    .listDirection(Axis.Horizontal)
+    .scrollBar(BarState.Off)
+
+    List() {
+      ForEach(this.searchVideoList, (item: SearchVideoImg, index: number) => {
+        ListItem() {
+          Row() {
+            Image(item.getImgSrc())
+              .height($r('app.float.hot_video_img_size'))
+              .width($r('app.float.hot_video_img_size'))
+              .margin({ right: $r('app.float.hot_video_img_margin') })
+
+            Column() {
+              Text(item.getTitle())
+                .fontSize($r('app.float.hot_video_title_font'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                .lineHeight($r('app.float.hot_video_title_line'))
+                .maxLines(1)
+                .textOverflow({ overflow: TextOverflow.Ellipsis })
+                .margin({ top: $r('app.float.hot_video_title_margin') })
+              Text(item.getContent())
+                .fontSize($r('app.float.hot_video_content_font'))
+                .fontWeight(FontWeight.Normal)
+                .lineHeight($r('app.float.hot_video_content_line'))
+                .opacity(CommonConstants.TEXT_OPACITY[0])
+                .maxLines(1)
+                .textOverflow({ overflow: TextOverflow.Ellipsis })
+                .margin({ top: $r('app.float.hot_video_content_margin') })
+              Divider()
+                .strokeWidth(SearchConstants.DIVIDER_STROKE_WIDTH)
+                .width(CommonConstants.FULL_PERCENT)
+                .opacity(CommonConstants.DIVIDER_OPACITY)
+            }
+            .layoutWeight(1)
+            .alignItems(HorizontalAlign.Start)
+          }
+          .width(CommonConstants.FULL_PERCENT)
+          .height(CommonConstants.FULL_PERCENT)
+        }
+        .height($r('app.float.hot_video_row_height'))
+      }, (item: SearchVideoImg, index: number) => index + JSON.stringify(item))
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .height(this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? $r('app.float.hot_video_list_height_sm') :
+      $r('app.float.hot_video_list_height'))
+    .lanes(new BreakpointType(SearchConstants.SEARCH_LIST_LANES[2], SearchConstants.SEARCH_LIST_LANES[1],
+      SearchConstants.SEARCH_LIST_LANES[0]).getValue(this.currentWidthBreakpoint), $r('app.float.hot_video_list_lane_space'))
+    .padding({
+      top: $r('app.float.hot_video_list_padding'),
+      bottom: $r('app.float.hot_video_list_padding')
+    })
+    .scrollBar(BarState.Off)
+    .edgeEffect(EdgeEffect.None)
+  }
+
+  getDividerPadding(breakpoint: string, index: number): string {
+    if (breakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      if (index % SearchConstants.SEARCH_LIST_LANES[0] !== 2) {
+        return SearchConstants.SEARCH_RECOMMEND_DIVIDER_PADDING;
+      }
+    } else {
+      if (index % SearchConstants.SEARCH_LIST_LANES[1] === 0) {
+        return SearchConstants.SEARCH_RECOMMEND_DIVIDER_PADDING;
+      }
+    }
+    return '0';
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/ets/view/SearchForHua.ets b/MultiVideoApplication/features/search/src/main/ets/view/SearchForHua.ets
new file mode 100644
index 0000000000000000000000000000000000000000..42c20b9a230c29d09dda49f6f4b73d3578469d79
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/ets/view/SearchForHua.ets
@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { Logger } from '@ohos/commons';
+import { SearchConstants } from '../constants/SearchConstants';
+
+@Component
+export struct SearchForHua {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @Link searchInput: string;
+
+  build() {
+    Column() {
+      // [Start searchForHua]
+      List() {
+        // [StartExclude searchForHua]
+        ForEach(SearchConstants.HUA_LIST, (item: string, index: number) => {
+          ListItem() {
+            Column() {
+              Text(item)
+                .fontSize($r('app.float.search_hua_list_font'))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                .height($r('app.float.search_hua_list_text_height'))
+
+              Divider()
+                .color(Color.Black)
+                .height($r('app.float.search_hua_divider_height'))
+                .opacity(CommonConstants.DIVIDER_OPACITY)
+                .width(CommonConstants.FULL_PERCENT)
+            }
+            .alignItems(HorizontalAlign.Start)
+            .margin({ right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && index %
+              SearchConstants.SEARCH_INDEX[0] === 0 ? $r('app.float.search_hua_column_margin_lg') : 0 })
+            .height($r('app.float.search_hua_column_height'))
+            .onClick(() => {
+              if (index === SearchConstants.SEARCH_INDEX[1]) {
+                this.searchInput = item;
+              } else {
+                Logger.info(`Please click on the third list item`);
+              }
+            })
+          }
+        })
+        // [EndExclude searchForHua]
+      }
+      .lanes(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_LIST_LANES[1] :
+        SearchConstants.SEARCH_LIST_LANES[2])
+      // [End searchForHua]
+    }
+    .layoutWeight(1)
+    .padding({ top: $r('app.float.search_hua_list_padding') })
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/ets/view/SearchHeader.ets b/MultiVideoApplication/features/search/src/main/ets/view/SearchHeader.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2816c88d8885bfbc94cb1df183d71010ae8d76ec
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/ets/view/SearchHeader.ets
@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { CommonConstants } from '@ohos/commons';
+import { SearchConstants } from '../constants/SearchConstants';
+
+@Component
+export struct SearchHeader {
+  @Link isSearching: boolean;
+  @Link searchInput: string;
+  @Link currentTopIndex: number;
+
+  build() {
+    Row() {
+      Image($r('app.media.ic_public_back'))
+        .height($r('app.float.search_header_back_img_size'))
+        .width($r('app.float.search_header_back_img_size'))
+        .margin({ right: $r('app.float.search_header_back_img_margin') })
+        .onClick(() => {
+          this.isSearching = false;
+          this.searchInput = '';
+        })
+
+      Stack({ alignContent: Alignment.Start }) {
+        // Search box.
+        TextInput({ placeholder: SearchConstants.SEARCH_PLACEHOLDER, text: this.searchInput })
+          .placeholderFont({
+            size: $r('app.float.search_header_text_font'),
+            weight: FontWeight.Normal
+          })
+          .height($r('app.float.search_header_text_height'))
+          .fontSize($r('app.float.search_header_text_font'))
+          .padding({
+            left: $r('app.float.search_header_text_left'),
+            right: $r('app.float.search_header_text_right')
+          })
+          .width(CommonConstants.FULL_PERCENT)
+          .enableKeyboardOnFocus(false)
+          .onChange((value: string) => {
+            this.searchInput = value;
+          })
+
+        // Search image.
+        Image($r("app.media.ic_public_search"))
+          .width($r('app.float.search_header_search_img_size'))
+          .height($r('app.float.search_header_search_img_size'))
+          .margin({ left: $r('app.float.search_header_search_img_margin') })
+      }
+      .alignSelf(ItemAlign.Center)
+      .layoutWeight(1)
+    }
+    .padding({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? 0 :
+      $r('app.float.search_header_row_padding') })
+    .height(deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? $r('app.float.search_header_row_height') :
+      $r('app.float.search_header_row_height_more'))
+    .width(CommonConstants.FULL_PERCENT)
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/ets/view/SearchResult.ets b/MultiVideoApplication/features/search/src/main/ets/view/SearchResult.ets
new file mode 100644
index 0000000000000000000000000000000000000000..89dd5005d9cee2044fe63e19928ddfa2549eca17
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/ets/view/SearchResult.ets
@@ -0,0 +1,215 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants, VideoNavPathStack } from '@ohos/commons';
+import { BreakpointType } from '@ohos/commons';
+import { SearchConstants } from '../constants/SearchConstants';
+import { SearchVideoImg, SearchVideoImgModel } from '../viewmodel/SearchVideoImgViewModel';
+
+@Component
+export struct SearchResult {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @State resultTabIndex: number = 0;
+  @Consume('pageInfo') pageInfo: VideoNavPathStack;
+
+  build() {
+    Scroll() {
+      Column() {
+        this.typeTabs()
+        this.resultVideos()
+      }
+      .alignItems(HorizontalAlign.Start)
+    }
+    .scrollBar(BarState.Off)
+  }
+
+  @Builder
+  typeTabs() {
+    Row() {
+      List() {
+        ForEach(SearchConstants.SEARCH_RESULT_TAB_LIST, (item: string, index: number) => {
+          ListItem() {
+            Column() {
+              Text(item)
+                .fontSize($r('app.float.type_tabs_font'))
+                .fontWeight(index === this.resultTabIndex ? CommonConstants.FONT_WEIGHT_500 : FontWeight.Normal)
+                .fontColor(index === this.resultTabIndex ? $r('app.color.type_tabs_font_selected') :
+                  $r('app.color.type_tabs_font'))
+                .lineHeight($r('app.float.type_tabs_text_line'))
+                .margin({ top: $r('app.float.type_tabs_text_margin') })
+
+              Divider()
+                .strokeWidth(SearchConstants.TYPE_TABS_DIVIDER_STROKE_WIDTH)
+                .width(item.length === SearchConstants.SEARCH_INDEX[0] ? $r('app.float.type_tabs_divider_width_two') :
+                  $r('app.float.type_tabs_divider_width_three'))
+                .color($r('app.color.type_tabs_font_selected'))
+                .margin({ top: $r('app.float.type_tabs_divider_margin') })
+                .lineCap(LineCapStyle.Round)
+                .visibility(index === this.resultTabIndex ? Visibility.Visible : Visibility.None)
+            }
+            .width($r('app.float.type_tabs_col_width'))
+            .height(CommonConstants.FULL_PERCENT)
+            .margin({ right: index !== SearchConstants.SEARCH_RESULT_TAB_LIST.length - 1 ?
+              $r('app.float.type_tabs_col_margin'): 0 })
+            .onClick(() => {
+              this.resultTabIndex = index;
+            })
+          }
+        }, (item: string, index: number) => index + JSON.stringify(item))
+      }
+      .scrollBar(BarState.Off)
+      .listDirection(Axis.Horizontal)
+
+      Blank()
+
+      Image($r('app.media.ic_public_sift'))
+        .height($r('app.float.sift_img_size'))
+        .width($r('app.float.sift_img_size'))
+        .opacity(CommonConstants.TEXT_OPACITY[4])
+    }
+    .alignItems(VerticalAlign.Center)
+    .width(CommonConstants.FULL_PERCENT)
+    .height($r('app.float.type_tabs_row_height'))
+    .margin({ top: $r('app.float.type_tabs_row_margin') })
+  }
+
+  @Builder
+  resultVideos() {
+    Row() {
+      Text(SearchConstants.SEARCH_RESULT_TITLE)
+        .fontSize($r('app.float.search_result_font'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+    }
+    .height($r('app.float.search_result_row_height'))
+    .margin({
+      top: $r('app.float.search_result_row_margin'),
+      bottom: $r('app.float.search_result_row_margin')
+    })
+
+    GridRow({
+      columns: {
+        sm: BreakpointConstants.GRID_ROW_COLUMNS[2],
+        md: BreakpointConstants.GRID_ROW_COLUMNS[0],
+        lg: BreakpointConstants.GRID_ROW_COLUMNS[1]
+      },
+      gutter: $r('app.float.grid_row_gutter')
+    }){
+      ForEach(new SearchVideoImgModel().getSearchResultImgList(), (item: SearchVideoImg, index: number) => {
+        GridCol({
+          span: {
+            sm: BreakpointConstants.GRID_COLUMN_SPANS[5],
+            md: BreakpointConstants.GRID_COLUMN_SPANS[1],
+            lg: BreakpointConstants.GRID_COLUMN_SPANS[3]
+          }
+        }) {
+          Row() {
+            Image(item.getImgSrc())
+              .objectFit(ImageFit.Fill)
+              .margin({ right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+                $r('app.float.previous_one_image_margin_sm') : $r('app.float.previous_one_image_margin') })
+              .layoutWeight(CommonConstants.THREE)
+              .height(CommonConstants.FULL_PERCENT)
+
+            Column() {
+              Text(item.getTitle())
+                .fontSize(new BreakpointType($r('app.float.search_result_title_font_sm'),
+                  $r('app.float.search_result_title_font_md'), $r('app.float.search_result_title_font_lg'))
+                  .getValue(this.currentWidthBreakpoint))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                .maxLines(2)
+                .textOverflow({ overflow: TextOverflow.Ellipsis })
+              Text(item.getContent())
+                .fontSize(new BreakpointType($r('app.float.search_result_content_font_sm'),
+                  $r('app.float.search_result_content_font_md'), $r('app.float.search_result_content_font_lg'))
+                  .getValue(this.currentWidthBreakpoint))
+                .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  $r('app.float.result_card_content_line_lg') : $r('app.float.result_card_content_line'))
+                .opacity(CommonConstants.TEXT_OPACITY[1])
+                .fontWeight(FontWeight.Normal)
+                .margin({ top: $r('app.float.search_result_content_margin') })
+                .maxLines(1)
+              Text(item.getOtherInfo())
+                .fontSize(new BreakpointType($r('app.float.search_result_content_font_sm'),
+                  $r('app.float.search_result_content_font_md'), $r('app.float.search_result_content_font_lg'))
+                  .getValue(this.currentWidthBreakpoint))
+                .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                $r('app.float.result_card_content_line_lg') : $r('app.float.result_card_content_line'))
+                .opacity(CommonConstants.TEXT_OPACITY[1])
+                .fontWeight(FontWeight.Normal)
+                .margin({ top: $r('app.float.search_result_more_margin') })
+                .maxLines(1)
+
+              Row() {
+                Button(SearchConstants.SEARCH_RESULT_BUTTON_TEXTS[0])
+                  .backgroundColor($r('app.color.button_background_1'))
+                  .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                  .borderRadius($r('app.float.search_result_button_radius'))
+                  .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.search_result_button_font_lg') : $r('app.float.search_result_button_font'))
+                  .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.search_result_button_height_lg') : $r('app.float.search_result_button_height'))
+                  .fontColor(Color.White)
+                  .layoutWeight(1)
+                  .onClick(() => {
+                    this.pageInfo.setPageName(CommonConstants.PAGE_NAMES[1]);
+                    this.pageInfo.pushPath({ name: CommonConstants.PAGE_NAMES[1] });
+                  })
+
+                Blank()
+                  .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD ?
+                    $r('app.float.search_result_button_blank_md') : $r('app.float.search_result_button_blank'))
+
+                Button(SearchConstants.SEARCH_RESULT_BUTTON_TEXTS[1])
+                  .backgroundColor($r('app.color.button_background_2'))
+                  .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                  .borderRadius($r('app.float.search_result_button_radius'))
+                  .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.search_result_button_font_lg') : $r('app.float.search_result_button_font'))
+                  .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.search_result_button_height_lg') : $r('app.float.search_result_button_height'))
+                  .fontColor($r('app.color.button_background_1'))
+                  .layoutWeight(1)
+              }
+              .width(CommonConstants.FULL_PERCENT)
+              .alignItems(VerticalAlign.Bottom)
+              .layoutWeight(1)
+            }
+            .alignItems(HorizontalAlign.Start)
+            .justifyContent(FlexAlign.Start)
+            .layoutWeight(3)
+          }
+          .aspectRatio(CommonConstants.PREVIOUS_ONE_ROW_RATIO)
+          .height(new BreakpointType($r('app.float.result_list_row_height_sm'),
+            $r('app.float.result_list_row_height_md'), $r('app.float.result_list_row_height_lg'))
+            .getValue(this.currentWidthBreakpoint))
+          .width(CommonConstants.FULL_PERCENT)
+          .padding({
+            top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              $r('app.float.result_list_row_padding_sm') : $r('app.float.result_list_row_padding'),
+            bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              $r('app.float.result_list_row_padding_sm') : $r('app.float.result_list_row_padding'),
+            left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              $r('app.float.result_list_row_padding_sm') : $r('app.float.result_list_row_padding'),
+            right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              $r('app.float.result_list_row_padding_sm') : $r('app.float.result_list_row_padding')
+          })
+          .backgroundColor($r('app.color.result_background'))
+          .borderRadius($r('app.float.result_list_row_radius'))
+        }
+      }, (item: SearchVideoImg, index: number) => index + JSON.stringify(item))
+    }
+    .margin({ bottom: $r('app.float.result_grid_row_margin') })
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/ets/view/SearchView.ets b/MultiVideoApplication/features/search/src/main/ets/view/SearchView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2eb2de735f727cbfe4752eef127f00a80fea8c6b
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/ets/view/SearchView.ets
@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, BreakpointType, CommonConstants } from '@ohos/commons';
+import { SearchConstants } from '../constants/SearchConstants';
+import { SearchVideoImg, SearchVideoImgModel } from '../viewmodel/SearchVideoImgViewModel';
+import { SearchContent } from './SearchContent';
+import { SearchForHua } from './SearchForHua';
+import { SearchHeader } from './SearchHeader';
+import { SearchResult } from './SearchResult';
+
+@Component
+export struct SearchView {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  @State currentIndex: number = 0;
+  @State searchVideoList: SearchVideoImg[] = [];
+  @State searchInput: string = '';
+  @Link isSearching: boolean;
+
+  build() {
+    GridRow({
+      columns: {
+        sm: BreakpointConstants.GRID_ROW_COLUMNS[2],
+        md: BreakpointConstants.GRID_ROW_COLUMNS[0],
+        lg: BreakpointConstants.GRID_ROW_COLUMNS[0]
+      }
+    }) {
+      GridCol({
+        span: {
+          sm: BreakpointConstants.GRID_COLUMN_SPANS[5],
+          md: BreakpointConstants.GRID_COLUMN_SPANS[0],
+          lg: BreakpointConstants.GRID_COLUMN_SPANS[0]
+        }
+      }) {
+        Column() {
+          SearchHeader({ isSearching: $isSearching, searchInput: $searchInput, currentTopIndex: $currentTopIndex })
+          SearchContent({ searchVideoList: $searchVideoList })
+            .layoutWeight(1)
+            .visibility(this.searchInput === SearchConstants.SEARCH_INPUT_LIST[0] || this.searchInput ===
+              SearchConstants.SEARCH_INPUT_LIST[1] ? Visibility.None : Visibility.Visible)
+          SearchForHua({ searchInput: $searchInput })
+            .layoutWeight(1)
+            .visibility(this.searchInput === SearchConstants.SEARCH_INPUT_LIST[0] ? Visibility.Visible :
+              Visibility.None)
+          SearchResult()
+            .layoutWeight(1)
+            .visibility(this.searchInput === SearchConstants.SEARCH_INPUT_LIST[1] ? Visibility.Visible :
+              Visibility.None)
+        }
+        .height(CommonConstants.FULL_PERCENT)
+        .width(CommonConstants.FULL_PERCENT)
+        .padding({
+          left: new BreakpointType($r('app.float.view_grid_col_padding_sm'), $r('app.float.view_grid_col_padding_md'),
+            $r('app.float.view_grid_col_padding_lg')).getValue(this.currentWidthBreakpoint),
+          right: new BreakpointType($r('app.float.view_grid_col_padding_sm'), $r('app.float.view_grid_col_padding_md'),
+            $r('app.float.view_grid_col_padding_lg')).getValue(this.currentWidthBreakpoint)
+        })
+      }
+    }
+    .padding({ left: (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) && (this.currentTopIndex === 2) ?
+      $r('app.float.search_view_grid_row_padding') : 0 })
+    .onBreakpointChange((breakPoints) => {
+      this.searchVideoList = new SearchVideoImgModel().getTrendSearchList(breakPoints);
+    })
+  }
+}
diff --git a/MultiVideoApplication/features/search/src/main/ets/viewmodel/SearchVideoImgViewModel.ets b/MultiVideoApplication/features/search/src/main/ets/viewmodel/SearchVideoImgViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..7e268f5cd0a012b231b14f8a28a03c896e9cd02c
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/ets/viewmodel/SearchVideoImgViewModel.ets
@@ -0,0 +1,117 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants } from '@ohos/commons';
+import { SearchConstants } from '../constants/SearchConstants';
+
+export class SearchVideoImgModel {
+  private trendingSearchList: SearchVideoImg[] = [];
+  private searchResultImgList: SearchVideoImg[] = [];
+
+  constructor() {
+    this.trendingSearchList.push(new SearchVideoImg($r('app.media.search_video_1'),
+      SearchConstants.SEARCH_IMG_IMG_TITLES[0], SearchConstants.SEARCH_IMG_IMG_CONTENTS[0], ''));
+    this.trendingSearchList.push(new SearchVideoImg($r('app.media.search_video_2'),
+      SearchConstants.SEARCH_IMG_IMG_TITLES[1], SearchConstants.SEARCH_IMG_IMG_CONTENTS[1], ''));
+    this.trendingSearchList.push(new SearchVideoImg($r('app.media.search_video_3'),
+      SearchConstants.SEARCH_IMG_IMG_TITLES[2], SearchConstants.SEARCH_IMG_IMG_CONTENTS[2], ''));
+    this.trendingSearchList.push(new SearchVideoImg($r('app.media.search_video_4'),
+      SearchConstants.SEARCH_IMG_IMG_TITLES[3], SearchConstants.SEARCH_IMG_IMG_CONTENTS[3], ''));
+    this.trendingSearchList.push(new SearchVideoImg($r('app.media.search_video_5'),
+      SearchConstants.SEARCH_IMG_IMG_TITLES[4], SearchConstants.SEARCH_IMG_IMG_CONTENTS[4], ''));
+    this.trendingSearchList.push(new SearchVideoImg($r('app.media.search_video_6'),
+      SearchConstants.SEARCH_IMG_IMG_TITLES[5], SearchConstants.SEARCH_IMG_IMG_CONTENTS[5], ''));
+    this.trendingSearchList.push(new SearchVideoImg($r('app.media.search_video_7'),
+      SearchConstants.SEARCH_IMG_IMG_TITLES[6], SearchConstants.SEARCH_IMG_IMG_CONTENTS[6], ''));
+    this.trendingSearchList.push(new SearchVideoImg($r('app.media.search_video_8'),
+      SearchConstants.SEARCH_IMG_IMG_TITLES[7], SearchConstants.SEARCH_IMG_IMG_CONTENTS[7], ''));
+    this.trendingSearchList.push(new SearchVideoImg($r('app.media.search_video_9'),
+      SearchConstants.SEARCH_IMG_IMG_TITLES[8], SearchConstants.SEARCH_IMG_IMG_CONTENTS[8], ''));
+    this.trendingSearchList.push(new SearchVideoImg($r('app.media.search_video_10'),
+      SearchConstants.SEARCH_IMG_IMG_TITLES[9], SearchConstants.SEARCH_IMG_IMG_CONTENTS[9], ''));
+    this.trendingSearchList.push(new SearchVideoImg($r('app.media.search_video_11'),
+      SearchConstants.SEARCH_IMG_IMG_TITLES[10], SearchConstants.SEARCH_IMG_IMG_CONTENTS[10], ''));
+    this.trendingSearchList.push(new SearchVideoImg($r('app.media.search_video_12'),
+      SearchConstants.SEARCH_IMG_IMG_TITLES[11], SearchConstants.SEARCH_IMG_IMG_CONTENTS[11], ''));
+    this.searchResultImgList.push(new SearchVideoImg($r('app.media.search_result_1'),
+      SearchConstants.SEARCH_RESULT_TITLES[0], SearchConstants.SEARCH_RESULT_CONTENTS[0],
+      SearchConstants.SEARCH_RESULT_MORE[0]));
+    this.searchResultImgList.push(new SearchVideoImg($r('app.media.search_result_2'),
+      SearchConstants.SEARCH_RESULT_TITLES[1], SearchConstants.SEARCH_RESULT_CONTENTS[1],
+      SearchConstants.SEARCH_RESULT_MORE[1]));
+    this.searchResultImgList.push(new SearchVideoImg($r('app.media.search_result_3'),
+      SearchConstants.SEARCH_RESULT_TITLES[2], SearchConstants.SEARCH_RESULT_CONTENTS[2],
+      SearchConstants.SEARCH_RESULT_MORE[2]));
+  }
+
+  getTrendSearchList(currentWidthBreakpoint: string): SearchVideoImg[] {
+    if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+      return this.trendingSearchList.slice(0, 5);
+    } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      return this.trendingSearchList.slice(0, 10);
+    } else {
+      return this.trendingSearchList;
+    }
+  }
+
+  getSearchResultImgList(): SearchVideoImg[] {
+    return this.searchResultImgList;
+  }
+}
+
+export class SearchVideoImg {
+  /**
+   * Image src of the video.
+   */
+  private imgSrc: Resource;
+
+  /**
+   * Title of the video.
+   */
+  private title: ResourceStr;
+
+  /**
+   * Content of the video.
+   */
+  private content: ResourceStr;
+
+  /**
+   * Other information of the video.
+   */
+  private otherInfo: ResourceStr;
+
+  constructor(imgSrc: Resource, title: ResourceStr, content: ResourceStr, otherInfo: ResourceStr) {
+    this.imgSrc = imgSrc;
+    this.title = title;
+    this.content = content;
+    this.otherInfo = otherInfo;
+  }
+
+  getImgSrc(): Resource {
+    return this.imgSrc;
+  }
+
+  getTitle(): ResourceStr {
+    return this.title;
+  }
+
+  getContent(): ResourceStr {
+    return this.content;
+  }
+
+  getOtherInfo(): ResourceStr {
+    return this.otherInfo;
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/module.json5 b/MultiVideoApplication/features/search/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..c3b61dabec00f0bf80f00358e2f75580864a7bcd
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/module.json5
@@ -0,0 +1,11 @@
+{
+  "module": {
+    "name": "search",
+    "type": "har",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/element/color.json b/MultiVideoApplication/features/search/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..02a3a2ab8e2d2290a63353bae8a7f3f263f53f4e
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/resources/base/element/color.json
@@ -0,0 +1,24 @@
+{
+  "color": [
+    {
+      "name": "type_tabs_font_selected",
+      "value": "#ED6F21"
+    },
+    {
+      "name": "type_tabs_font",
+      "value": "#99000000"
+    },
+    {
+      "name": "button_background_1",
+      "value": "#ED6F21"
+    },
+    {
+      "name": "button_background_2",
+      "value": "#0D000000"
+    },
+    {
+      "name": "result_background",
+      "value": "#F1F3F5"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/element/float.json b/MultiVideoApplication/features/search/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..4e540261bc867bd420ac4825cdd7fccadb05143d
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/resources/base/element/float.json
@@ -0,0 +1,408 @@
+{
+  "float": [
+    {
+      "name": "search_history_title_font",
+      "value": "20fp"
+    },
+    {
+      "name": "search_history_img_size",
+      "value": "24vp"
+    },
+    {
+      "name": "search_history_title_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "search_history_title_height",
+      "value": "28vp"
+    },
+    {
+      "name": "search_history_content_font",
+      "value": "12fp"
+    },
+    {
+      "name": "search_history_content_height",
+      "value": "28vp"
+    },
+    {
+      "name": "search_history_content_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "search_history_content_row_width",
+      "value": "64vp"
+    },
+    {
+      "name": "search_history_content_row_height",
+      "value": "28vp"
+    },
+    {
+      "name": "search_history_content_row_radius",
+      "value": "14vp"
+    },
+    {
+      "name": "search_content_margin_right_sm",
+      "value": "8vp"
+    },
+    {
+      "name": "search_content_margin_right_md",
+      "value": "16vp"
+    },
+    {
+      "name": "search_content_margin_right_lg",
+      "value": "24vp"
+    },
+    {
+      "name": "search_discovery_img_size",
+      "value": "16vp"
+    },
+    {
+      "name": "search_discovery_img_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "search_discovery_row_height",
+      "value": "24vp"
+    },
+    {
+      "name": "search_discovery_list_font",
+      "value": "16fp"
+    },
+    {
+      "name": "search_discovery_list_column_height",
+      "value": "21vp"
+    },
+    {
+      "name": "search_discovery_list_column_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "hot_trending_font",
+      "value": "16fp"
+    },
+    {
+      "name": "hot_trending_line",
+      "value": "21vp"
+    },
+    {
+      "name": "tabs_font_margin",
+      "value": "17vp"
+    },
+    {
+      "name": "tabs_divider_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "tab_list_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "tab_divider_width",
+      "value": "32vp"
+    },
+    {
+      "name": "hot_trending_tab_height",
+      "value": "56vp"
+    },
+    {
+      "name": "hot_video_img_size",
+      "value": "48vp"
+    },
+    {
+      "name": "hot_video_img_margin",
+      "value": "15vp"
+    },
+    {
+      "name": "hot_video_title_font",
+      "value": "16fp"
+    },
+    {
+      "name": "hot_video_title_line",
+      "value": "22vp"
+    },
+    {
+      "name": "hot_video_title_margin",
+      "value": "15vp"
+    },
+    {
+      "name": "hot_video_content_font",
+      "value": "14fp"
+    },
+    {
+      "name": "hot_video_content_line",
+      "value": "19vp"
+    },
+    {
+      "name": "hot_video_content_margin",
+      "value": "2vp"
+    },
+    {
+      "name": "hot_video_row_height",
+      "value": "72vp"
+    },
+    {
+      "name": "hot_video_list_height_sm",
+      "value": "384vp"
+    },
+    {
+      "name": "hot_video_list_height",
+      "value": "312vp"
+    },
+    {
+      "name": "hot_video_list_lane_space",
+      "value": "12vp"
+    },
+    {
+      "name": "hot_video_list_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "search_hua_list_font",
+      "value": "16fp"
+    },
+    {
+      "name": "search_hua_list_text_height",
+      "value": "47.5vp"
+    },
+    {
+      "name": "search_hua_divider_height",
+      "value": "1vp"
+    },
+    {
+      "name": "search_hua_column_height",
+      "value": "48vp"
+    },
+    {
+      "name": "search_hua_column_margin_lg",
+      "value": "12vp"
+    },
+    {
+      "name": "search_hua_list_padding",
+      "value": "16vp"
+    },
+    {
+      "name": "search_header_back_img_size",
+      "value": "24vp"
+    },
+    {
+      "name": "search_header_back_img_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "search_header_text_font",
+      "value": "16fp"
+    },
+    {
+      "name": "search_header_text_height",
+      "value": "40vp"
+    },
+    {
+      "name": "search_header_text_left",
+      "value": "36vp"
+    },
+    {
+      "name": "search_header_text_right",
+      "value": "12vp"
+    },
+    {
+      "name": "search_header_search_img_size",
+      "value": "16vp"
+    },
+    {
+      "name": "search_header_search_img_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "search_header_row_height",
+      "value": "56vp"
+    },
+    {
+      "name": "search_header_row_height_more",
+      "value": "92vp"
+    },
+    {
+      "name": "search_header_row_padding",
+      "value": "36vp"
+    },
+    {
+      "name": "type_tabs_font",
+      "value": "16fp"
+    },
+    {
+      "name": "type_tabs_text_line",
+      "value": "22vp"
+    },
+    {
+      "name": "type_tabs_text_margin",
+      "value": "17vp"
+    },
+    {
+      "name": "type_tabs_divider_width_two",
+      "value": "32vp"
+    },
+    {
+      "name": "type_tabs_divider_width_three",
+      "value": "48vp"
+    },
+    {
+      "name": "type_tabs_divider_margin",
+      "value": "7vp"
+    },
+    {
+      "name": "type_tabs_col_width",
+      "value": "48vp"
+    },
+    {
+      "name": "type_tabs_col_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "sift_img_size",
+      "value": "16vp"
+    },
+    {
+      "name": "type_tabs_row_height",
+      "value": "56vp"
+    },
+    {
+      "name": "type_tabs_row_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "search_result_font",
+      "value": "16fp"
+    },
+    {
+      "name": "search_result_row_height",
+      "value": "48vp"
+    },
+    {
+      "name": "search_result_row_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "result_card_content_line_lg",
+      "value": "19vp"
+    },
+    {
+      "name": "result_card_content_line",
+      "value": "16vp"
+    },
+    {
+      "name": "grid_row_gutter",
+      "value": "12vp"
+    },
+    {
+      "name": "search_result_title_font_sm",
+      "value": "14fp"
+    },
+    {
+      "name": "search_result_title_font_md",
+      "value": "16fp"
+    },
+    {
+      "name": "search_result_title_font_lg",
+      "value": "18fp"
+    },
+    {
+      "name": "search_result_content_font_sm",
+      "value": "10fp"
+    },
+    {
+      "name": "search_result_content_font_md",
+      "value": "12fp"
+    },
+    {
+      "name": "search_result_content_font_lg",
+      "value": "14fp"
+    },
+    {
+      "name": "search_result_content_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "search_result_more_margin",
+      "value": "2vp"
+    },
+    {
+      "name": "search_result_button_radius",
+      "value": "12.5vp"
+    },
+    {
+      "name": "search_result_button_font_lg",
+      "value": "14fp"
+    },
+    {
+      "name": "search_result_button_font",
+      "value": "12fp"
+    },
+    {
+      "name": "search_result_button_height_lg",
+      "value": "34vp"
+    },
+    {
+      "name": "search_result_button_height",
+      "value": "25vp"
+    },
+    {
+      "name": "search_result_button_blank_md",
+      "value": "20vp"
+    },
+    {
+      "name": "search_result_button_blank",
+      "value": "6vp"
+    },
+    {
+      "name": "result_list_row_height_sm",
+      "value": "179vp"
+    },
+    {
+      "name": "result_list_row_height_md",
+      "value": "198vp"
+    },
+    {
+      "name": "result_list_row_height_lg",
+      "value": "238vp"
+    },
+    {
+      "name": "result_list_row_padding_sm",
+      "value": "10vp"
+    },
+    {
+      "name": "result_list_row_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "result_list_row_radius",
+      "value": "16vp"
+    },
+    {
+      "name": "result_grid_row_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "view_grid_col_padding_sm",
+      "value": "16vp"
+    },
+    {
+      "name": "view_grid_col_padding_md",
+      "value": "24vp"
+    },
+    {
+      "name": "view_grid_col_padding_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "previous_one_image_margin_sm",
+      "value": "10vp"
+    },
+    {
+      "name": "previous_one_image_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "search_view_grid_row_padding",
+      "value": "96vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/element/string.json b/MultiVideoApplication/features/search/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..5a8df8baffa27a35abfd5310dc11a0c3121ef4e4
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/resources/base/element/string.json
@@ -0,0 +1,104 @@
+{
+  "string": [
+    {
+      "name": "search",
+      "value": "搜索发现1"
+    },
+    {
+      "name": "top",
+      "value": "热搜"
+    },
+    {
+      "name": "theater",
+      "value": "剧场"
+    },
+    {
+      "name": "movie",
+      "value": "电影"
+    },
+    {
+      "name": "variety",
+      "value": "综艺"
+    },
+    {
+      "name": "anime",
+      "value": "动漫"
+    },
+    {
+      "name": "children",
+      "value": "儿童"
+    },
+    {
+      "name": "records",
+      "value": "记录"
+    },
+    {
+      "name": "tv",
+      "value": "华为会员电视剧场"
+    },
+    {
+      "name": "cultural",
+      "value": "建筑人文史迹"
+    },
+    {
+      "name": "europe",
+      "value": "欧洲建筑的历史责任在载对欧洲建筑风格的形成和"
+    },
+    {
+      "name": "history_search",
+      "value": "搜索历史"
+    },
+    {
+      "name": "content",
+      "value": "搜索内容"
+    },
+    {
+      "name": "find",
+      "value": "搜索发现"
+    },
+    {
+      "name": "search1",
+      "value": "搜索..."
+    },
+    {
+      "name": "conference",
+      "value": "华为发布会"
+    },
+    {
+      "name": "all",
+      "value": "All"
+    },
+    {
+      "name": "filmer",
+      "value": "影视"
+    },
+    {
+      "name": "video",
+      "value": "短视频"
+    },
+    {
+      "name": "user",
+      "value": "用户"
+    },
+    {
+      "name": "flagship",
+      "value": "华为旗舰新品发布会"
+    },
+    {
+      "name": "press",
+      "value": "发布会 · 华为终端 · 202..."
+    },
+    {
+      "name": "plays",
+      "value": "9.8万次播放"
+    },
+    {
+      "name": "player",
+      "value": "播放"
+    },
+    {
+      "name": "cache",
+      "value": "缓存"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_back.svg b/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_back.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5d8827cf7050dbb91a3f2fc6dae78538909975e8
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_back.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_back</title>
+    <defs>
+        <path d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_back" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_delete.svg b/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_delete.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0cf1fcee8aab4df5b3b8272f3ed894a8465cf287
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_delete.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_delete</title>
+    <defs>
+        <path d="M5.629,7.5 L6.72612901,18.4738834 C6.83893748,19.6019681 7.77211147,20.4662096 8.89848718,20.4990325 L8.96496269,20.5 L15.0342282,20.5 C16.1681898,20.5 17.1211231,19.6570911 17.2655686,18.5392856 L17.2731282,18.4732196 L18.1924161,9.2527383 L18.369,7.5 L19.877,7.5 L19.6849078,9.40262938 L18.7657282,18.6220326 C18.5772847,20.512127 17.0070268,21.9581787 15.1166184,21.9991088 L15.0342282,22 L8.96496269,22 C7.06591715,22 5.47142703,20.5815579 5.24265599,18.7050136 L5.23357322,18.6231389 L4.121,7.5 L5.629,7.5 Z M10.25,11.75 C10.6642136,11.75 11,12.0857864 11,12.5 L11,18.5 C11,18.9142136 10.6642136,19.25 10.25,19.25 C9.83578644,19.25 9.5,18.9142136 9.5,18.5 L9.5,12.5 C9.5,12.0857864 9.83578644,11.75 10.25,11.75 Z M13.75,11.75 C14.1642136,11.75 14.5,12.0857864 14.5,12.5 L14.5,18.5 C14.5,18.9142136 14.1642136,19.25 13.75,19.25 C13.3357864,19.25 13,18.9142136 13,18.5 L13,12.5 C13,12.0857864 13.3357864,11.75 13.75,11.75 Z M12,1.75 C13.7692836,1.75 15.2083571,3.16379796 15.2491124,4.92328595 L15.25,5 L21,5 C21.4142136,5 21.75,5.33578644 21.75,5.75 C21.75,6.14942022 21.43777,6.47591522 21.0440682,6.49872683 L21,6.5 L14.5,6.5 C14.1005798,6.5 13.7740848,6.18777001 13.7512732,5.7940682 L13.75,5.75 L13.75,5 C13.75,4.03350169 12.9664983,3.25 12,3.25 C11.0536371,3.25 10.2827253,4.00119585 10.2510148,4.93983756 L10.25,5 L10.25,5.75 C10.25,6.14942022 9.93777001,6.47591522 9.5440682,6.49872683 L9.5,6.5 L2.75,6.5 C2.33578644,6.5 2,6.16421356 2,5.75 C2,5.35057978 2.31222999,5.02408478 2.7059318,5.00127317 L2.75,5 L8.75,5 C8.75,3.20507456 10.2050746,1.75 12,1.75 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_delete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_rotate.svg b/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_rotate.svg
new file mode 100644
index 0000000000000000000000000000000000000000..28138305dbc03eca10e951aab12c2d2475e1a4e1
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_rotate.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_rotate</title>
+    <defs>
+        <path d="M2.39750685,6.63013031 L2.50192415,6.44781271 L2.50192415,6.44781271 L2.75879471,6.03099057 L2.75879471,6.03099057 L2.93582692,5.76598523 L2.93582692,5.76598523 L3.20161885,5.39677347 L3.20161885,5.39677347 L3.32729579,5.23279923 C3.56820965,4.92448685 3.82520554,4.6293504 4.09702191,4.34865144 L4.23449755,4.21246212 C4.28704102,4.16205416 4.34630275,4.10663467 4.41228273,4.04620367 C4.50448222,3.96175825 4.62497291,3.91491828 4.75,3.91491828 C4.99546627,3.91491828 5.19962006,4.09179804 5.24194799,4.32505331 L5.25,4.41493128 L5.25,8.25 C5.24977585,8.49537238 5.07299717,8.6994789 4.83984142,8.74208148 L4.75000006,8.7502521 L3.06976635,8.75098544 C2.69634318,9.7776504 2.5,10.873597 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C12.6894829,21.5 13.3689606,21.4266727 14.030681,21.2826369 C14.4354174,21.1945384 14.8349389,21.4512242 14.9230374,21.8559606 C15.0111358,22.260697 14.7544501,22.6602185 14.3497137,22.748317 C13.5833478,22.9151309 12.796919,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,10.8823315 1.16734646,9.78974217 1.48779359,8.7512185 C1.54897475,8.55245876 1.6160444,8.35544228 1.68845502,8.16102607 L1.76852684,7.95267927 L1.76852684,7.95267927 L1.86665996,7.71305503 L1.86665996,7.71305503 L2.00833447,7.39286049 L2.00833447,7.39286049 L2.20778051,6.98366251 L2.20778051,6.98366251 L2.39750685,6.63013031 L2.39750685,6.63013031 Z M12,1 C18.0751322,1 23,5.92486775 23,12 C23,13.1176685 22.8326535,14.2102578 22.5122064,15.2487815 C22.4697854,15.3867535 22.4243278,15.5242336 22.3762625,15.6604833 L22.2706279,15.9469375 L22.2706279,15.9469375 L22.1590479,16.2257326 L22.1590479,16.2257326 L22.016018,16.5540224 L22.016018,16.5540224 L21.8692412,16.8634509 L21.8692412,16.8634509 L21.6331374,17.3148349 L21.6331374,17.3148349 L21.4980759,17.5521873 L21.4980759,17.5521873 L21.2870619,17.8975954 L21.2870619,17.8975954 L21.0208478,18.2964497 L21.0208478,18.2964497 L20.7983811,18.6032265 L20.7983811,18.6032265 L20.6727042,18.7672008 C20.4317903,19.0755132 20.1747945,19.3706496 19.9029781,19.6513486 L19.7655024,19.7875379 C19.712959,19.8379458 19.6536973,19.8933653 19.5877173,19.9537963 C19.4955178,20.0382417 19.3750271,20.0850817 19.25,20.0850817 C19.0045337,20.0850817 18.8003799,19.908202 18.758052,19.6749467 L18.75,19.5850687 L18.75,15.75 C18.7502241,15.5046276 18.9270028,15.3005211 19.1601586,15.2579185 L19.2499999,15.2497479 L20.9302337,15.2490146 C21.3036568,14.2223496 21.5,13.126403 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 C11.3105171,2.5 10.6310394,2.57332727 9.96931902,2.7173631 C9.56458264,2.80546156 9.16506107,2.5487758 9.07696262,2.14403942 C8.98886417,1.73930304 9.24554992,1.33978147 9.65028631,1.25168301 C10.4166522,1.08486912 11.203081,1 12,1 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_rotate" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_search.svg b/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..423182ce01e353a362155bdb443b9686672631d9
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_search.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_search</title>
+    <defs>
+        <path d="M17.4552585,16.5201811 L20.8132621,19.8776019 C21.1061553,20.1704951 21.1061553,20.6453689 20.8132621,20.9382621 C20.5203689,21.2311553 20.0454951,21.2311553 19.7526019,20.9382621 L16.3849514,17.5705115 C16.7690371,17.2493647 17.1270214,16.8980393 17.4552585,16.5201811 Z M10.375,2 C15.0003848,2 18.75,5.74961522 18.75,10.375 C18.75,12.4492584 17.9959213,14.3473923 16.746948,15.8102175 L16.746948,15.8102175 L16.7248309,15.8360159 C16.6580095,15.9136422 16.5897889,15.9900296 16.5202083,16.0651391 L16.746948,15.8102175 C16.6540763,15.9189909 16.5584681,16.0253575 16.4602302,16.1292106 C16.4016383,16.1911476 16.342303,16.2519995 16.2820606,16.3119405 C16.2610861,16.3328082 16.240292,16.3532825 16.2193918,16.3736485 C16.1491692,16.4420866 16.0772901,16.5097189 16.0042335,16.576078 C15.9759275,16.6017907 15.9472456,16.6274881 15.9183866,16.6529896 C15.8514229,16.712158 15.7837649,16.7700565 15.7151861,16.8268826 C15.7013815,16.8383205 15.6877981,16.8495035 15.674179,16.8606444 C14.2305262,18.0415704 12.3854944,18.75 10.375,18.75 C5.74961522,18.75 2,15.0003848 2,10.375 C2,5.74961522 5.74961522,2 10.375,2 Z M10.375,3.5 C6.57804235,3.5 3.5,6.57804235 3.5,10.375 C3.5,14.1719577 6.57804235,17.25 10.375,17.25 C14.1719577,17.25 17.25,14.1719577 17.25,10.375 C17.25,6.57804235 14.1719577,3.5 10.375,3.5 Z" id="__path-1"/>
+    </defs>
+    <g id="__Public/ic_public_search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="__mask-2" fill="white">
+            <use xlink:href="#__path-1"/>
+        </mask>
+        <use id="__形状结合" fill="#000000" fill-rule="nonzero" xlink:href="#__path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_sift.svg b/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_sift.svg
new file mode 100644
index 0000000000000000000000000000000000000000..86b8beb0836f3352024fb6948658e198e5dfca17
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/resources/base/media/ic_public_sift.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_sift</title>
+    <defs>
+        <path d="M4.91676415,2.25 L4.75808035,2.25485026 C2.77345665,2.37699507 1.76507474,4.77836295 3.11720971,6.30280272 L9.451,13.448 L9.45165191,19.3317225 C9.45165191,19.5528715 9.5492531,19.7627476 9.71836704,19.9052517 L12.1359634,21.9424413 L12.2359982,22.0194003 C13.0842855,22.6123412 14.2786193,22.0055246 14.2786193,20.9382593 L14.278,13.729 L20.8805098,6.30549709 C22.2713775,4.74140593 21.1737033,2.25 19.0832687,2.25 L4.91676415,2.25 Z M4.91676415,3.75 L19.0832687,3.75 C19.87284,3.75 20.2945459,4.70715168 19.7596123,5.3087078 L12.9681784,12.9454877 L12.9015756,13.0324072 C12.8217893,13.1539895 12.7786193,13.2968945 12.7786193,13.4438912 L12.778,20.522 L10.951,18.983 L10.9516519,13.1635183 C10.9516519,12.9801751 10.8844936,12.8031824 10.7628688,12.6659887 L4.23951739,5.30760152 C3.70586995,4.70595046 4.1279648,3.75 4.91676415,3.75 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_sift" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="Stroke-1" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_result_1.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_result_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..c59cd47d89a9c75a5ccf2b1491333f2ce3269419
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_result_1.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_result_2.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_result_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c3297b0ba93f302411b06d698bb8c9cf07c4659
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_result_2.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_result_3.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_result_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..e38839c94baf4bc120ee9312c46684a8a5b61b1c
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_result_3.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_1.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..776e486a465ec2575db3447b07de146257f0c5af
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_1.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_10.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_10.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f5c304e54fc0d8674ca0afcb3cd0b747e6d405e
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_10.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_11.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_11.png
new file mode 100644
index 0000000000000000000000000000000000000000..2eda12fc49bd550bfc946fedc2ad496ee3f5bf67
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_11.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_12.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_12.png
new file mode 100644
index 0000000000000000000000000000000000000000..797026b44ef7563378232dbc077d752a76e31d8b
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_12.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_2.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..4455b03b5a116d32a7153ee70a0d5fc0c18dd504
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_2.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_3.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e5765655f7b6953185d10baf9ecb750aa867f90
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_3.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_4.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f02cd9850bb352da78d1199b75231408504e56e
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_4.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_5.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..38602deca002b8f412e7fadd7508f45024b4269f
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_5.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_6.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b3f69579f9386234dc906ed2c982fd21b414933
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_6.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_7.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_7.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc0eb12f1b00876e6ef73b09b589a70c6afb90fc
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_7.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_8.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_8.png
new file mode 100644
index 0000000000000000000000000000000000000000..bbf9008162cd051255c5dce69af477ccebb90886
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_8.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_9.png b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_9.png
new file mode 100644
index 0000000000000000000000000000000000000000..5bf0bc5f81279a3561e81519a4f47c1958ac473a
Binary files /dev/null and b/MultiVideoApplication/features/search/src/main/resources/base/media/search_video_9.png differ
diff --git a/MultiVideoApplication/features/search/src/main/resources/en_US/element/string.json b/MultiVideoApplication/features/search/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..557986b70b93b32e3443ea30df05b3dc79359dd3
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/resources/en_US/element/string.json
@@ -0,0 +1,104 @@
+{
+  "string": [
+    {
+      "name": "search",
+      "value": "Search 1"
+    },
+    {
+      "name": "top",
+      "value": "top"
+    },
+    {
+      "name": "theater",
+      "value": "theater"
+    },
+    {
+      "name": "movie",
+      "value": "movie"
+    },
+    {
+      "name": "variety",
+      "value": "variety"
+    },
+    {
+      "name": "anime",
+      "value": "anime"
+    },
+    {
+      "name": "children",
+      "value": "children"
+    },
+    {
+      "name": "records",
+      "value": "records"
+    },
+    {
+      "name": "tv",
+      "value": "Huawei member TV Theater"
+    },
+    {
+      "name": "cultural",
+      "value": "Architectural cultural and historical sites"
+    },
+    {
+      "name": "europe",
+      "value": "The historical responsibility of European architecture lies in the formation and development of European architectural styles"
+    },
+    {
+      "name": "history_search",
+      "value": "Search history"
+    },
+    {
+      "name": "content",
+      "value": "content"
+    },
+    {
+      "name": "find",
+      "value": "Search and find"
+    },
+    {
+      "name": "search1",
+      "value": "Search..."
+    },
+    {
+      "name": "conference",
+      "value": "Huawei Conference"
+    },
+    {
+      "name": "all",
+      "value": "all"
+    },
+    {
+      "name": "filmer",
+      "value": "film"
+    },
+    {
+      "name": "video",
+      "value": "video"
+    },
+    {
+      "name": "user",
+      "value": "user"
+    },
+    {
+      "name": "flagship",
+      "value": "Huawei's flagship product launch event"
+    },
+    {
+      "name": "press",
+      "value": "Conference · Huawei Terminal · 202..."
+    },
+    {
+      "name": "plays",
+      "value": "98,000 plays"
+    },
+    {
+      "name": "player",
+      "value": "play"
+    },
+    {
+      "name": "cache",
+      "value": "cache"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/search/src/main/resources/zh_CN/element/string.json b/MultiVideoApplication/features/search/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..5a8df8baffa27a35abfd5310dc11a0c3121ef4e4
--- /dev/null
+++ b/MultiVideoApplication/features/search/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,104 @@
+{
+  "string": [
+    {
+      "name": "search",
+      "value": "搜索发现1"
+    },
+    {
+      "name": "top",
+      "value": "热搜"
+    },
+    {
+      "name": "theater",
+      "value": "剧场"
+    },
+    {
+      "name": "movie",
+      "value": "电影"
+    },
+    {
+      "name": "variety",
+      "value": "综艺"
+    },
+    {
+      "name": "anime",
+      "value": "动漫"
+    },
+    {
+      "name": "children",
+      "value": "儿童"
+    },
+    {
+      "name": "records",
+      "value": "记录"
+    },
+    {
+      "name": "tv",
+      "value": "华为会员电视剧场"
+    },
+    {
+      "name": "cultural",
+      "value": "建筑人文史迹"
+    },
+    {
+      "name": "europe",
+      "value": "欧洲建筑的历史责任在载对欧洲建筑风格的形成和"
+    },
+    {
+      "name": "history_search",
+      "value": "搜索历史"
+    },
+    {
+      "name": "content",
+      "value": "搜索内容"
+    },
+    {
+      "name": "find",
+      "value": "搜索发现"
+    },
+    {
+      "name": "search1",
+      "value": "搜索..."
+    },
+    {
+      "name": "conference",
+      "value": "华为发布会"
+    },
+    {
+      "name": "all",
+      "value": "All"
+    },
+    {
+      "name": "filmer",
+      "value": "影视"
+    },
+    {
+      "name": "video",
+      "value": "短视频"
+    },
+    {
+      "name": "user",
+      "value": "用户"
+    },
+    {
+      "name": "flagship",
+      "value": "华为旗舰新品发布会"
+    },
+    {
+      "name": "press",
+      "value": "发布会 · 华为终端 · 202..."
+    },
+    {
+      "name": "plays",
+      "value": "9.8万次播放"
+    },
+    {
+      "name": "player",
+      "value": "播放"
+    },
+    {
+      "name": "cache",
+      "value": "缓存"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/Index.ets b/MultiVideoApplication/features/videoDetail/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/MultiVideoApplication/features/videoDetail/build-profile.json5 b/MultiVideoApplication/features/videoDetail/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..3167e54d1ff3a0aaa0cdcf4319789de8e3f3c350
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/build-profile.json5
@@ -0,0 +1,10 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+  },
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/hvigorfile.ts b/MultiVideoApplication/features/videoDetail/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiVideoApplication/features/videoDetail/oh-package.json5 b/MultiVideoApplication/features/videoDetail/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..79a3942bc872db5d1af2d2340775a4271aa5a74a
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/oh-package.json5
@@ -0,0 +1,13 @@
+{
+  "license": "Apache-2.0",
+  "devDependencies": {},
+  "author": "",
+  "name": "videodetail",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/commons": "file:../../commons/base"
+  }
+}
diff --git a/MultiVideoApplication/features/videoDetail/src/main/ets/constants/DetailConstants.ets b/MultiVideoApplication/features/videoDetail/src/main/ets/constants/DetailConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..531116d10911d096aac4664d967b879af33c166b
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/ets/constants/DetailConstants.ets
@@ -0,0 +1,174 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class DetailConstants {
+  /**
+   * Initial comment image height.
+   */
+  static readonly INITIAL_COMMENT_IMAGE_HEIGHT: string = '150vp';
+  /**
+   * Initial comment image width.
+   */
+  static readonly INITIAL_COMMENT_IMAGE_WIDTH: string = '219vp';
+  /**
+   * Initial related video height.
+   */
+  static readonly INITIAL_RELATED_VIDEO_HEIGHT: number = 169;
+  /**
+   * Initial related video height.
+   */
+  static readonly INITIAL_VIDEO_HEIGHT: number = 100;
+  /**
+   * Comment image min height number.
+   */
+  static readonly COMMENT_IMAGE_MIN_HEIGHT_NUMBER: number = 150;
+  /**
+   * Comment image min width number.
+   */
+  static readonly COMMENT_IMAGE_MIN_WIDTH_NUMBER: number = 219;
+  /**
+   * Comment image max height number.
+   */
+  static readonly COMMENT_IMAGE_MAX_HEIGHT_NUMBER: number = 182;
+  /**
+   * Comment image max width number.
+   */
+  static readonly COMMENT_IMAGE_MAX_WIDTH_NUMBER: number = 266;
+  /**
+   * Side bar min width number.
+   */
+  static readonly SIDE_BAR_MIN_WIDTH_NUMBER: number = 320;
+  /**
+   * Offset for scrolling to top.
+   */
+  static readonly SCROLL_TO_TOP: string = '{"xOffset":0,"yOffset":0}';
+  /**
+   * Sub title list.
+   */
+  static readonly SUB_TITLES: ResourceStr[] =
+    [$r('app.string.comments'), $r('app.string.related'), $r('app.string.more'), $r('app.string.introduction'),
+      $r('app.string.anthology'), $r('app.string.Peripheral')];
+  /**
+   * Comment image aspect ratio.
+   */
+  static readonly COMMENT_IMAGE_ASPECT_RATIO: number = 1.46;
+  /**
+   * Comment image width list.
+   */
+  static readonly COMMENT_IMAGE_WIDTH: string[] = ['227vp', '371vp'];
+  /**
+   * Comment image height list.
+   */
+  static readonly COMMENT_IMAGE_HEIGHT: string[] = ['155vp', '254vp'];
+  /**
+   * Episodes list.
+   */
+  static readonly EPISODES_LIST: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
+  /**
+   * Length unit.
+   */
+  static readonly LENGTH_UNIT: string = 'vp';
+  /**
+   * Introduction content.
+   */
+  static readonly INTRODUCTION_CONTENT: ResourceStr[] = [$r('app.string.product'),
+    $r('app.string.play')];
+  /**
+   * Icon list.
+   */
+  static readonly ICON_LIST: Resource[] = [$r('app.media.ic_public_favor'), $r('app.media.ic_public_comments'),
+    $r('app.media.ic_public_thumb_sup'), $r('app.media.ic_public_download'), $r('app.media.ic_public_share')];
+  /**
+   * Shadow radius.
+   */
+  static readonly SHADOW_RADIUS: number = 50;
+  /**
+   * Shadow offset y.
+   */
+  static readonly SHADOW_OFFSET_Y: number = 10;
+  /**
+   * Percent sign.
+   */
+  static readonly PERCENT_SIGN: string = '%';
+  /**
+   * Related video title list.
+   */
+  static readonly RELATED_VIDEO_TITLES: ResourceStr[] =
+    [$r('app.string.released'), $r('app.string.released'), $r('app.string.released'),
+      $r('app.string.released'), $r('app.string.released'), $r('app.string.released'), $r('app.string.released')];
+  /**
+   * Peripheral video title list.
+   */
+  static readonly PERIPHERAL_VIDEO_TITLE: ResourceStr[] = [$r('app.string.series'), $r('app.string.series'),
+    $r('app.string.series'), $r('app.string.series'), $r('app.string.series')];
+  /**
+   * User info name list.
+   */
+  static readonly USER_INFO_NAMES: string[] = ['m******', 'H******', 'BEI***'];
+  /**
+   * User info comment list.
+   */
+  static readonly USER_INFO_COMMENTS: ResourceStr[] = [
+    $r('app.string.feel'),
+    $r('app.string.love'),
+    $r('app.string.design')
+  ];
+  /**
+   * User info date.
+   */
+  static readonly USER_INFO_DATE: ResourceStr = $r('app.string.July');
+  /**
+   * Placeholder of comment text input.
+   */
+  static readonly COMMENT_PLACEHOLDER: ResourceStr = $r('app.string.comment');
+  /**
+   * Min video percent.
+   */
+  static readonly MIN_VIDEO_PERCENT: number = 53;
+  /**
+   * Max video percent.
+   */
+  static readonly MAX_VIDEO_PERCENT: number = 100;
+  /**
+   * Ten.
+   */
+  static readonly TEN: number = 10;
+  /**
+   * Related list height.
+   */
+  static readonly RELATED_LIST_HEIGHT: number = 169;
+  /**
+   * Full-screen page url.
+   */
+  static readonly FULL_SCREEN_URL: string = '@bundle:com.huawei.videoapplication/videoPlayer/ets/pages/Index';
+  /**
+   * Comments area percent.
+   */
+  static readonly COMMENTS_AREA_PERCENT: number = 0.4;
+  /**
+   * Player text list.
+   */
+  static readonly PLAYER_TEXT_LIST: ResourceStr[] = [$r('app.string.selections'), $r('app.string.just'),
+    $r('app.string.super'), $r('app.string.speed')];
+  /**
+   * Episode list lanes list.
+   */
+  static readonly EPISODE_LIST_LANES: number[] = [8, 4];
+  /**
+   * Episodes.
+   */
+  static readonly PLAYER_EPISODE: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14',
+    '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'];
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/ets/utils/CurrentOffsetUtil.ets b/MultiVideoApplication/features/videoDetail/src/main/ets/utils/CurrentOffsetUtil.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a6d788c8cb4f638f36d29e888ad4252f972cae08
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/ets/utils/CurrentOffsetUtil.ets
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DetailConstants } from '../constants/DetailConstants';
+
+export class CurrentOffsetUtil {
+  static scrollToTop(offset: string): boolean {
+    if (offset === DetailConstants.SCROLL_TO_TOP) {
+      return true;
+    }
+    return false;
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/ets/view/AllComments.ets b/MultiVideoApplication/features/videoDetail/src/main/ets/view/AllComments.ets
new file mode 100644
index 0000000000000000000000000000000000000000..dfb249792674c649ed3b6557215ee7e3458ff0f7
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/ets/view/AllComments.ets
@@ -0,0 +1,145 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { BreakpointType } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+import { UserInfo, UserViewModel } from '../viewmodel/UserViewModel';
+
+@Component
+export struct AllComments {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @Link commentImgHeight: string;
+  @Link commentImgWidth: string;
+  private commentsList: UserInfo[] = new UserViewModel().getRelatedVideoList();
+
+  build() {
+    Column() {
+      Row() {
+        this.TitleText(DetailConstants.SUB_TITLES[0])
+      }
+      .padding({
+        left: $r('app.float.all_comments_title_row_padding'),
+        right: $r('app.float.all_comments_title_row_padding')
+      })
+      .height($r('app.float.all_comments_title_row_height'))
+      .width(CommonConstants.FULL_PERCENT)
+
+      Column() {
+        ForEach(this.commentsList, (item: UserInfo, index: number) => {
+          Row() {
+            Image(item.getImageSrc())
+              .height($r('app.float.all_comments_profile_size'))
+              .width($r('app.float.all_comments_profile_size'))
+              .margin({ right: $r('app.float.all_comments_profile_margin') })
+
+            this.TitleText(item.getName())
+          }
+          .height($r('app.float.all_comments_title_row_height'))
+          .width(CommonConstants.FULL_PERCENT)
+          .margin({ top: $r('app.float.all_comments_title_margin') })
+          .alignItems(VerticalAlign.Center)
+
+          Row() {
+            Text(item.getComment())
+              .margin({ left: $r('app.float.all_comments_comment_left') })
+              .opacity(CommonConstants.TEXT_OPACITY[2])
+              .fontSize( $r('app.float.all_comments_comment_font'))
+              .lineHeight( $r('app.float.all_comments_comment_text_line'))
+              .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          }
+          .margin({ top:  $r('app.float.all_comments_comment_row_top') })
+          .width(CommonConstants.FULL_PERCENT)
+          .justifyContent(FlexAlign.Start)
+
+          Row() {
+            // [Start all_comments_image]
+            Image(item.getCommentImageSrc())
+              .width(new BreakpointType(DetailConstants.COMMENT_IMAGE_WIDTH[0], DetailConstants.COMMENT_IMAGE_WIDTH[1],
+                this.commentImgWidth).getValue(this.currentWidthBreakpoint))
+              .height(new BreakpointType(DetailConstants.COMMENT_IMAGE_HEIGHT[0],
+                DetailConstants.COMMENT_IMAGE_HEIGHT[1], this.commentImgHeight).getValue(this.currentWidthBreakpoint))
+              .borderRadius( $r('app.float.all_comments_img_radius'))
+              .aspectRatio(DetailConstants.COMMENT_IMAGE_ASPECT_RATIO)
+            // [End all_comments_image]
+          }
+          .padding({ left:  $r('app.float.all_comments_img_row_padding') })
+          .margin({ top:  $r('app.float.all_comments_img_row_margin') })
+          .width(CommonConstants.FULL_PERCENT)
+          .justifyContent(FlexAlign.Start)
+          .visibility(!item.getCommentImageSrc() ? Visibility.None : Visibility.Visible)
+
+          Row() {
+            Text(item.getTime())
+              .opacity(CommonConstants.TEXT_OPACITY[2])
+              .fontSize($r('app.float.all_comments_comment_time_font'))
+              .lineHeight($r('app.float.all_comments_comment_time_line'))
+              .fontWeight(FontWeight.Normal)
+              .margin({ left: $r('app.float.all_comments_comment_time_margin') })
+
+            Blank()
+
+            IconImage({ image: $r('app.media.ic_public_comments') })
+              .margin({ right: $r('app.float.all_comments_icon_margin') })
+            IconImage({ image: $r("app.media.ic_public_thumb_sup") })
+              .margin({ right: $r('app.float.all_comments_icon_margin') })
+            IconImage({ image: $r('app.media.ic_public_share') })
+          }
+          .margin({ top: $r('app.float.all_comments_icon_row_top') })
+          .width(CommonConstants.FULL_PERCENT)
+          .justifyContent(FlexAlign.Start)
+
+          Divider()
+            .color(Color.Black)
+            .opacity(CommonConstants.DIVIDER_OPACITY)
+            .margin({
+              top: $r('app.float.all_comments_divider_margin')
+            })
+            .height($r('app.float.all_comments_divider_height'))
+            .width(CommonConstants.FULL_PERCENT)
+            .visibility(index === this.commentsList.length - 1 ? Visibility.None : Visibility.Visible)
+        }, (item: UserInfo, index: number) => index + JSON.stringify(item))
+      }
+      .alignItems(HorizontalAlign.Start)
+      .padding({
+        left: $r('app.float.all_comments_comment_col_padding'),
+        right: $r('app.float.all_comments_comment_col_padding')
+      })
+      .width(CommonConstants.FULL_PERCENT)
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .backgroundColor(Color.White)
+    .justifyContent(FlexAlign.Start)
+  }
+
+  @Builder
+  TitleText(content: ResourceStr) {
+    Text(content)
+      .fontSize($r('app.float.all_comments_title_text_font'))
+      .lineHeight($r('app.float.all_comments_title_text_line'))
+      .fontWeight(CommonConstants.FONT_WEIGHT_500)
+  }
+}
+
+@Component
+struct IconImage {
+  public image: Resource | null = null;
+
+  build() {
+    Image(this.image)
+      .height($r('app.float.all_comments_icon_size'))
+      .width($r('app.float.all_comments_icon_size'))
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/ets/view/FooterEpisodes.ets b/MultiVideoApplication/features/videoDetail/src/main/ets/view/FooterEpisodes.ets
new file mode 100644
index 0000000000000000000000000000000000000000..c30be49d8eba1ff9309a4eb0f012c9a5b2ed51a7
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/ets/view/FooterEpisodes.ets
@@ -0,0 +1,112 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { display } from '@kit.ArkUI';
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+
+@Component
+export struct FooterEpisodes {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('isFullScreen') isFullScreen: boolean = false;
+  @Link isShowingSideBar: boolean;
+  @Link foldStatus: display.FoldStatus;
+
+  build() {
+    Column() {
+      // Selection bottom bar.
+      Row() {
+        Text(DetailConstants.PLAYER_TEXT_LIST[0])
+          .fontSize($r('app.float.title_selected_font'))
+          .fontColor(Color.White)
+          .fontWeight(CommonConstants.FONT_WEIGHT_500)
+          .lineHeight($r('app.float.title_selected_line'))
+          .width($r('app.float.title_selected_width'))
+          .margin({ right: $r('app.float.title_selected_margin') })
+        Text(DetailConstants.PLAYER_TEXT_LIST[1])
+          .fontSize($r('app.float.title_font'))
+          .fontColor(Color.White)
+          .fontWeight(FontWeight.Normal)
+          .lineHeight($r('app.float.title_line'))
+          .width($r('app.float.title_width'))
+          .opacity(CommonConstants.TEXT_OPACITY[2])
+      }
+      .margin({
+        top: $r('app.float.title_row_top'),
+        bottom: $r('app.float.title_row_bottom')
+      })
+      .width(CommonConstants.FULL_PERCENT)
+      .height($r('app.float.title_row_height'))
+
+      List({ space: CommonConstants.LIST_SPACE }) {
+        ForEach(DetailConstants.PLAYER_EPISODE, (item: string, index: number) => {
+          ListItem() {
+            Row() {
+              Text(item)
+                .fontSize($r('app.float.title_font'))
+                .fontColor(index === 1 ? $r('app.color.font_selected') : Color.White)
+                .fontWeight(FontWeight.Normal)
+
+              Image($r('app.media.video_playing'))
+                .height($r('app.float.playing_size'))
+                .width($r('app.float.playing_size'))
+                .position({
+                  x: $r('app.float.playing_position_x'),
+                  y: $r('app.float.playing_position_y')
+                })
+                .visibility(index === 1 ? Visibility.Visible : Visibility.None)
+            }
+            .justifyContent(FlexAlign.Center)
+            .borderRadius($r('app.float.episode_row_radius'))
+            .backgroundColor($r('app.color.episode_row_background'))
+            .width(CommonConstants.FULL_PERCENT)
+            .height($r('app.float.episode_row_height'))
+          }
+        }, (item: string, index: number) => index + JSON.stringify(item))
+      }
+      .edgeEffect(EdgeEffect.None)
+      .scrollBar(BarState.Off)
+      .width(CommonConstants.FULL_PERCENT)
+      .layoutWeight(1)
+      .padding({ bottom: $r('app.float.episode_list_bottom') })
+      .lanes(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD ? DetailConstants.EPISODE_LIST_LANES[0] :
+        DetailConstants.EPISODE_LIST_LANES[1], $r('app.float.episode_list_lanes_space'))
+    }
+    .layoutWeight(1)
+    .width(CommonConstants.FULL_PERCENT)
+    .visibility(this.isShowingFooter())
+    .backgroundColor(Color.Black)
+    .padding({
+      left: $r('app.float.episode_col_padding'),
+      right: $r('app.float.episode_col_padding')
+    })
+  }
+
+  isShowingFooter(): Visibility {
+    if (!this.isShowingSideBar || !this.isFullScreen) {
+      return Visibility.None;
+    }
+    if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPE) {
+      return this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None;
+    }
+    if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint !==
+      BreakpointConstants.BREAKPOINT_SM) {
+      return Visibility.Visible;
+    }
+    return Visibility.None;
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/ets/view/RelatedList.ets b/MultiVideoApplication/features/videoDetail/src/main/ets/view/RelatedList.ets
new file mode 100644
index 0000000000000000000000000000000000000000..816636e8be9a921b9aa3f98e1491729575d242ab
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/ets/view/RelatedList.ets
@@ -0,0 +1,336 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+import { CurrentOffsetUtil } from '../utils/CurrentOffsetUtil';
+import { RelatedVideo, RelatedVideoViewModel } from '../viewmodel/RelatedVideoViewModel';
+import { AllComments } from './AllComments';
+
+@Component
+export struct RelatedList {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('isFullScreen') isFullScreen: boolean = false;
+  @State commentImgHeight: string = DetailConstants.INITIAL_COMMENT_IMAGE_HEIGHT;
+  @State commentImgWidth: string = DetailConstants.INITIAL_COMMENT_IMAGE_WIDTH;
+  @Link relatedVideoHeight: number;
+  @Link videoHeight: number;
+  public screenHeight: number = 0;
+  private relatedVideoList: RelatedVideo[] = new RelatedVideoViewModel().getRelatedVideoList();
+  private peripheralVideoList: RelatedVideo[] = new RelatedVideoViewModel().getPeripheralVideoList();
+  private episodes: string[] = DetailConstants.EPISODES_LIST;
+  private currentIndex: number = 2;
+  private iconList: Resource[] = DetailConstants.ICON_LIST;
+  private scroller: Scroller = new Scroller();
+  // [Start related_list_build]
+  build() {
+    Scroll(this.scroller) {
+      Column() {
+        this.RelatedVideoComponent()
+        this.VideoIntroduction()
+        AllComments({commentImgHeight: this.commentImgHeight, commentImgWidth: this.commentImgWidth})
+          .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.None :
+            Visibility.Visible)
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .alignItems(HorizontalAlign.Start)
+      .padding({ bottom: $r('app.float.video_col_padding') })
+    }
+    .layoutWeight(1)
+    .scrollBar(BarState.Off)
+    .visibility(!this.isFullScreen ? Visibility.Visible : Visibility.None)
+    .onScrollFrameBegin((offset: number) => {
+      if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+        if ((offset > 0) && (this.videoHeight > DetailConstants.MIN_VIDEO_PERCENT)) {
+          // Video zoom-out logic.
+          // Percentage of screen height by sliding.
+          let offsetPercent = (Math.abs(offset) * DetailConstants.MAX_VIDEO_PERCENT) / this.screenHeight;
+          // Video shrinkage percentage.
+          let heightOffset = offsetPercent < this.videoHeight - DetailConstants.MIN_VIDEO_PERCENT ? offsetPercent :
+            this.videoHeight - DetailConstants.MIN_VIDEO_PERCENT;
+          this.videoHeight = this.videoHeight - heightOffset;
+          // Returns the actual offset 0.
+          return { offsetRemain: 0 };
+        } else if ((offset < 0) && (this.videoHeight < DetailConstants.MAX_VIDEO_PERCENT) &&
+          (CurrentOffsetUtil.scrollToTop(JSON.stringify(this.scroller.currentOffset())))) {
+          // Video magnification logic.
+          let offsetPercent = (Math.abs(offset) * DetailConstants.MAX_VIDEO_PERCENT) / this.screenHeight;
+          let heightOffset = offsetPercent < DetailConstants.MAX_VIDEO_PERCENT - this.videoHeight ? offsetPercent :
+            DetailConstants.MAX_VIDEO_PERCENT - this.videoHeight;
+          this.videoHeight = this.videoHeight + heightOffset;
+          // Returns the actual offset 0.
+          return { offsetRemain: 0 };
+        }
+        return { offsetRemain: offset };
+      } else {
+        if ((offset > 0) && (this.videoHeight === DetailConstants.MAX_VIDEO_PERCENT) && (this.relatedVideoHeight > 0)) {
+          // Related list shrinking logic.
+          // Percentage of screen height by sliding.
+          let offsetPercent = (Math.abs(offset) * DetailConstants.TEN) / this.screenHeight;
+          this.relatedVideoHeight = (this.relatedVideoHeight - offsetPercent * DetailConstants.RELATED_LIST_HEIGHT) <
+            0 ? 0 : (this.relatedVideoHeight - offsetPercent * DetailConstants.RELATED_LIST_HEIGHT);
+          // Returns the actual offset 0.
+          return { offsetRemain: 0 };
+        } else if ((offset > 0) && (this.videoHeight > DetailConstants.MIN_VIDEO_PERCENT) &&
+          (this.relatedVideoHeight === 0)) {
+          // Video zoom-out logic.
+          // Percentage of screen height by sliding.
+          let offsetPercent = (Math.abs(offset) * DetailConstants.MAX_VIDEO_PERCENT) / this.screenHeight;
+          // Video shrinkage percentage.
+          let heightOffset = offsetPercent < this.videoHeight - DetailConstants.MIN_VIDEO_PERCENT ? offsetPercent :
+            this.videoHeight - DetailConstants.MIN_VIDEO_PERCENT;
+          this.videoHeight = this.videoHeight - heightOffset;
+          // Returns the actual offset 0.
+          return { offsetRemain: 0 };
+        } else if ((offset > 0) && (this.videoHeight === DetailConstants.MIN_VIDEO_PERCENT) &&
+          (this.relatedVideoHeight === 0)) {
+          return { offsetRemain: offset };
+        } else if ((offset < 0) && (this.videoHeight < DetailConstants.MAX_VIDEO_PERCENT) &&
+          (this.relatedVideoHeight === 0)) {
+          if (CurrentOffsetUtil.scrollToTop(JSON.stringify(this.scroller.currentOffset()))) {
+            // Video magnification logic.
+            let offsetPercent = (Math.abs(offset) * DetailConstants.MAX_VIDEO_PERCENT) / this.screenHeight;
+            let heightOffset = offsetPercent < DetailConstants.MAX_VIDEO_PERCENT - this.videoHeight ? offsetPercent :
+              DetailConstants.MAX_VIDEO_PERCENT - this.videoHeight;
+            this.videoHeight = this.videoHeight + heightOffset;
+            // Returns the actual offset 0.
+            return { offsetRemain: 0 };
+          }
+          return { offsetRemain: offset };
+        } else if ((offset < 0) && (this.videoHeight === DetailConstants.MAX_VIDEO_PERCENT) &&
+          (this.relatedVideoHeight >= 0)) {
+          // Related list enlargement logic.
+          // Percentage of screen height by sliding.
+          let offsetPercent = (Math.abs(offset) * DetailConstants.TEN) / this.screenHeight;
+          this.relatedVideoHeight = (this.relatedVideoHeight + offsetPercent * DetailConstants.RELATED_LIST_HEIGHT) >
+            DetailConstants.RELATED_LIST_HEIGHT ? DetailConstants.RELATED_LIST_HEIGHT : (this.relatedVideoHeight +
+            offsetPercent * DetailConstants.RELATED_LIST_HEIGHT);
+          // Returns the actual offset 0.
+          return { offsetRemain: 0 };
+        }
+        return { offsetRemain: 0 };
+      }
+    })
+  }
+  // [End related_list_build]
+
+  @Builder
+  RelatedVideoComponent() {
+    Column() {
+      this.SubTitleAndMore(DetailConstants.SUB_TITLES[1])
+
+      Row() {
+        List({ space: CommonConstants.LIST_SPACE }) {
+          ForEach(this.relatedVideoList, (item: RelatedVideo, index: number) => {
+            ListItem() {
+              Column() {
+                Image(item.getImageSrc())
+                  .height($r('app.float.related_img_height'))
+                  .width($r('app.float.related_img_width'))
+                  .objectFit(ImageFit.Cover)
+                  .borderRadius($r('app.float.related_img_radius'))
+                  .margin({ bottom: $r('app.float.related_img_margin') })
+
+                Text(item.getName())
+                  .fontSize($r('app.float.related_name_font'))
+                  .lineHeight($r('app.float.related_name_line'))
+                  .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                  .opacity(CommonConstants.TEXT_OPACITY[2])
+                  .fontColor(index === 0 ? $r('app.color.episodes_font') : Color.Black)
+              }
+            }
+            .margin({
+              top: $r('app.float.related_list_top'),
+              bottom: $r('app.float.related_list_bottom')
+            })
+          }, (item: RelatedVideo, index: number) => index + JSON.stringify(item))
+        }
+        .listDirection(Axis.Horizontal)
+        .scrollBar(BarState.Off)
+      }
+      .padding({
+        left: $r('app.float.related_row_left'),
+        bottom: $r('app.float.related_row_bottom')
+      })
+      .height($r('app.float.related_row_height'))
+      .width(CommonConstants.FULL_PERCENT)
+    }
+    .height(this.relatedVideoHeight + DetailConstants.LENGTH_UNIT)
+  }
+
+  // [Start related_list]
+  @Builder
+  VideoIntroduction() {
+    Column() {
+      // [StartExclude related_list]
+      this.SubTitle(DetailConstants.SUB_TITLES[3])
+
+      Column() {
+        this.IntroductionContent(DetailConstants.INTRODUCTION_CONTENT[0])
+        this.IntroductionContent(DetailConstants.INTRODUCTION_CONTENT[1])
+      }
+      .padding({
+        left: $r('app.float.sub_title_row_padding'),
+        right: $r('app.float.sub_title_row_padding')
+      })
+      .width(CommonConstants.FULL_PERCENT)
+      .alignItems(HorizontalAlign.Start)
+      // [EndExclude related_list]
+      Row() {
+        ForEach(this.iconList, (item: Resource, index: number) => {
+          Image(item)
+            .height($r('app.float.introduction_icon_size'))
+            .width($r('app.float.introduction_icon_size'))
+        }, (item: Resource, index: number) => index + JSON.stringify(item))
+      }
+      .justifyContent(FlexAlign.SpaceBetween)
+      // [StartExclude related_list]
+      .padding({
+        top: $r('app.float.introduction_row_padding'),
+        bottom: $r('app.float.introduction_row_padding'),
+        left: $r('app.float.sub_title_row_padding'),
+        right: $r('app.float.sub_title_row_padding')
+      })
+      .height($r('app.float.sub_title_row_height_detail'))
+      .width(CommonConstants.FULL_PERCENT)
+
+      this.SubTitle(DetailConstants.SUB_TITLES[4])
+      // [EndExclude related_list]
+
+      List({ space: CommonConstants.LIST_SPACE }) {
+        ForEach(this.episodes, (item: string, index: number) => {
+          ListItem() {
+            // [StartExclude related_list]
+            Row() {
+              Image($r('app.media.video_playing'))
+                .height($r('app.float.is_playing_icon_size'))
+                .width($r('app.float.is_playing_icon_size'))
+                .position({ x: $r('app.float.is_playing_icon_x'), y: $r('app.float.is_playing_icon_y') })
+                .visibility((index + 1) === this.currentIndex ? Visibility.Visible : Visibility.None)
+
+              Text(item)
+                .fontSize($r('app.float.episodes_text_font'))
+                .fontWeight(FontWeight.Normal)
+                .height($r('app.float.episodes_text_height'))
+                .fontColor((index + 1) === this.currentIndex ? $r('app.color.episodes_font') : Color.Black)
+            }
+            .justifyContent(FlexAlign.Center)
+            .backgroundColor($r('app.color.episodes_background'))
+            .height($r('app.float.episodes_list_height'))
+            .width($r('app.float.episodes_list_width'))
+            .borderRadius($r('app.float.episodes_list_radius'))
+            // [EndExclude related_list]
+          }
+        }, (item: string, index: number) => index + JSON.stringify(item))
+      }
+      .scrollBar(BarState.Off)
+      .listDirection(Axis.Horizontal)
+      .padding({ left: $r('app.float.sub_title_row_padding') })
+      .margin({ bottom: $r('app.float.episodes_list_margin') })
+      .width(CommonConstants.FULL_PERCENT)
+
+      this.SubTitleAndMore(DetailConstants.SUB_TITLES[5])
+      // [StartExclude related_list]
+      List({ space: CommonConstants.LIST_SPACE }) {
+        ForEach(this.peripheralVideoList, (item: RelatedVideo, index: number) => {
+          ListItem() {
+            Column() {
+              Image(item.getImageSrc())
+                .height($r('app.float.peripheral_img_height'))
+                .width($r('app.float.peripheral_img_width'))
+                .margin({ bottom: $r('app.float.peripheral_img_margin') })
+                .borderRadius($r('app.float.peripheral_img_radius'))
+
+              Text(item.getName())
+                .lineHeight($r('app.float.peripheral_name_line'))
+                .fontSize($r('app.float.peripheral_name_font'))
+                .opacity(CommonConstants.TEXT_OPACITY[2])
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+            }
+          }
+        }, (item: RelatedVideo, index: number) => index + JSON.stringify(item))
+      }
+      .scrollBar(BarState.Off)
+      .listDirection(Axis.Horizontal)
+      .margin({ top: $r('app.float.peripheral_list_margin') })
+      .padding({
+        left: $r('app.float.sub_title_row_padding'),
+        right: $r('app.float.sub_title_row_padding')
+      })
+      .width(CommonConstants.FULL_PERCENT)
+      // [EndExclude related_list]
+    }
+    .width(CommonConstants.FULL_PERCENT)
+    .backgroundColor(Color.White)
+    .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None)
+  }
+  // [StartExclude related_list]
+  @Builder
+  SubTitle(subtitle: ResourceStr) {
+    Row() {
+      Text(subtitle)
+        .fontSize($r('app.float.sub_title_font'))
+        .lineHeight($r('app.float.sub_title_text_line'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+    }
+    .padding({
+      left: $r('app.float.sub_title_row_padding'),
+      right: $r('app.float.sub_title_row_padding')
+    })
+    .height($r('app.float.sub_title_row_height_detail'))
+    .width(CommonConstants.FULL_PERCENT)
+  }
+  // [EndExclude related_list]
+
+  @Builder
+  SubTitleAndMore(subtitle: ResourceStr) {
+    Row() {
+      // [StartExclude related_list]
+      Text(subtitle)
+        .fontSize($r('app.float.sub_title_font'))
+        .lineHeight($r('app.float.sub_title_text_line'))
+        .fontWeight(CommonConstants.FONT_WEIGHT_500)
+      // [EndExclude related_list]
+      Blank()
+      // [StartExclude related_list]
+      Text(DetailConstants.SUB_TITLES[2])
+        .fontSize($r('app.float.sub_title_font_more'))
+        .lineHeight($r('app.float.sub_title_text_line_more'))
+        .fontWeight(FontWeight.Normal)
+        .opacity(CommonConstants.TEXT_OPACITY[2])
+      Image($r('app.media.ic_public_arrow_right'))
+        .height($r('app.float.arrow_img_size'))
+        .width($r('app.float.arrow_img_size'))
+      // [EndExclude related_list]
+    }
+    .padding({
+      left: $r('app.float.sub_title_row_padding'),
+      right: $r('app.float.sub_title_row_padding')
+    })
+    .height($r('app.float.sub_title_row_height_detail'))
+    .width(CommonConstants.FULL_PERCENT)
+    .alignItems(VerticalAlign.Center)
+  }
+  // [End related_list]
+
+  @Builder
+  IntroductionContent(content: ResourceStr) {
+    Text(content)
+      .fontSize($r('app.float.introduction_content_font'))
+      .lineHeight($r('app.float.introduction_content_line'))
+      .fontWeight(CommonConstants.FONT_WEIGHT_500)
+      .opacity(CommonConstants.TEXT_OPACITY[2])
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/ets/view/SelfComment.ets b/MultiVideoApplication/features/videoDetail/src/main/ets/view/SelfComment.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e5486af0c627210099d01cea19835716d38fabb4
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/ets/view/SelfComment.ets
@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { CommonConstants } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+import { UserInfo, UserViewModel } from '../viewmodel/UserViewModel';
+
+@Component
+export struct SelfComment {
+  private selfInfo: UserInfo = new UserViewModel().getSelfInfo();
+
+  build() {
+    Row() {
+      Image(this.selfInfo.getImageSrc())
+        .height($r('app.float.self_comment_profile_size'))
+        .width($r('app.float.self_comment_profile_size'))
+        .borderRadius($r('app.float.self_comment_profile_radius'))
+        .margin({
+          left: $r('app.float.self_comment_profile_left'),
+          right: $r('app.float.self_comment_profile_right')
+        })
+
+      Stack({ alignContent: Alignment.Start }) {
+        Row() {
+          Image($r('app.media.ic_public_emoji'))
+            .height($r('app.float.self_comment_emoji_size'))
+            .width($r('app.float.self_comment_emoji_size'))
+            .margin({ right: $r('app.float.self_comment_emoji_margin') })
+        }
+        .width(CommonConstants.FULL_PERCENT)
+        .height(CommonConstants.FULL_PERCENT)
+        .justifyContent(FlexAlign.End)
+        .alignItems(VerticalAlign.Center)
+
+        Image($r('app.media.ic_public_comment'))
+          .height($r('app.float.self_comment_comment_size'))
+          .width($r('app.float.self_comment_comment_size'))
+          .margin({
+            top: $r('app.float.self_comment_comment_margin'),
+            bottom: $r('app.float.self_comment_comment_margin'),
+            left: $r('app.float.self_comment_comment_margin'),
+            right: $r('app.float.self_comment_comment_right')
+          })
+
+        TextInput({ placeholder: DetailConstants.COMMENT_PLACEHOLDER })
+          .placeholderFont({
+            size: $r('app.float.self_comment_input_font'),
+            weight: FontWeight.Normal
+          })
+          .height($r('app.float.self_comment_input_height'))
+          .fontSize($r('app.float.self_comment_input_font'))
+          .padding({
+            left: $r('app.float.self_comment_input_left'),
+            right: $r('app.float.self_comment_input_right')
+          })
+          .width(CommonConstants.FULL_PERCENT)
+          .focusable(false)
+      }
+      .alignSelf(ItemAlign.Center)
+      .layoutWeight(1)
+      .borderRadius($r('app.float.self_comment_stack_radius'))
+      .height($r('app.float.self_comment_stack_height'))
+    }
+    .shadow({
+      radius: DetailConstants.SHADOW_RADIUS,
+      color: $r('app.color.shadow_color'),
+      offsetY: DetailConstants.SHADOW_OFFSET_Y
+    })
+    .height(deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? $r('app.float.self_comment_row_height') :
+      $r('app.float.self_comment_row_height_more'))
+    .width(CommonConstants.FULL_PERCENT)
+    .alignItems(VerticalAlign.Center)
+    .backgroundColor(Color.White)
+    .padding({
+      right: $r('app.float.self_comment_row_padding_right'),
+      bottom: deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? 0 :
+        $r('app.float.self_comment_row_padding_bottom')
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/ets/view/SideEpisodes.ets b/MultiVideoApplication/features/videoDetail/src/main/ets/view/SideEpisodes.ets
new file mode 100644
index 0000000000000000000000000000000000000000..96ea6683185332ba29faa73201eacc9799528cd2
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/ets/view/SideEpisodes.ets
@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { display } from '@kit.ArkUI';
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+
+@Component
+export struct SideEpisodes {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('isFullScreen') isFullScreen: boolean = false;
+  @Link isShowingSideBar: boolean;
+  @Link foldStatus: display.FoldStatus;
+
+  build() {
+    Column() {
+      // Episodes sidebar.
+      Row() {
+        Blank()
+        SideTitleText({ content: DetailConstants.PLAYER_TEXT_LIST[0] })
+          .width($r('app.float.side_title_width_1'))
+          .margin({ right: $r('app.float.side_title_margin') })
+        SideTitleText({ content: DetailConstants.PLAYER_TEXT_LIST[1] })
+          .width($r('app.float.side_title_width_2'))
+          .opacity(CommonConstants.TEXT_OPACITY[2])
+        Blank()
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .margin({ bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+        $r('app.float.side_row_margin_sm') : $r('app.float.side_row_margin') })
+
+      List({ space: CommonConstants.LIST_SPACE }) {
+        ForEach(DetailConstants.PLAYER_EPISODE, (item: string, index: number) => {
+          ListItem() {
+            Row() {
+              Text(item)
+                .fontSize($r('app.float.title_font'))
+                .fontColor(index === 1 ? $r('app.color.font_selected') : Color.White)
+                .fontWeight(FontWeight.Normal)
+
+              Image($r('app.media.video_playing'))
+                .height($r('app.float.playing_size'))
+                .width($r('app.float.playing_size'))
+                .position({
+                  x: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.playing_position_x_side_lg') : $r('app.float.playing_position_x_side'),
+                  y: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    $r('app.float.playing_position_y_side_lg') : $r('app.float.playing_position_y_side')
+                })
+                .visibility(index === 1 ? Visibility.Visible : Visibility.None)
+            }
+            .justifyContent(FlexAlign.Center)
+            .borderRadius($r('app.float.episode_row_radius'))
+            .backgroundColor($r('app.color.episode_row_background'))
+            .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+              $r('app.float.episode_row_width_lg') : $r('app.float.episode_row_width_other'))
+            .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+              $r('app.float.episode_row_height_lg')  : $r('app.float.episode_row_height_other'))
+          }
+        }, (item: string, index: number) => index + JSON.stringify(item))
+      }
+      .layoutWeight(1)
+      .width(CommonConstants.FULL_PERCENT)
+      .edgeEffect(EdgeEffect.None)
+      .scrollBar(BarState.Off)
+      .lanes(DetailConstants.EPISODE_LIST_LANES[1], $r('app.float.lanes_item_space'))
+      .padding({
+        left: $r('app.float.episodes_sidebar_padding_left_right'),
+        right: $r('app.float.episodes_sidebar_padding_left_right'),
+        bottom: $r('app.float.episodes_sidebar_padding_bottom')
+      })
+    }
+    .justifyContent(FlexAlign.Start)
+    .backgroundColor(Color.Black)
+    .layoutWeight(this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? 2 : 0)
+    .height(CommonConstants.FULL_PERCENT)
+    .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.side_col_width') : 0)
+    .visibility((this.isShowingSideBar && this.isFullScreen && (this.currentWidthBreakpoint ===
+      BreakpointConstants.BREAKPOINT_LG || (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD &&
+      this.currentHeightBreakpoint === BreakpointConstants.BREAKPOINT_SM))) ? Visibility.Visible : Visibility.None)
+  }
+}
+
+@Component
+struct SideTitleText {
+  public content: ResourceStr = '';
+
+  build() {
+    Text(this.content)
+      .fontSize($r('app.float.side_text_font'))
+      .fontColor(Color.White)
+      .fontWeight(FontWeight.Normal)
+      .lineHeight($r('app.float.side_text_line'))
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/ets/view/VideoDetail.ets b/MultiVideoApplication/features/videoDetail/src/main/ets/view/VideoDetail.ets
new file mode 100644
index 0000000000000000000000000000000000000000..73e5dab4c5d95e1940bbee75081edeb87ef4e584
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/ets/view/VideoDetail.ets
@@ -0,0 +1,282 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { KeyCode } from '@kit.InputKit';
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { display, window } from '@kit.ArkUI';
+import {
+  AvPlayerUtil,
+  DeviceScreen,
+  Logger,
+  WindowUtil,
+  BreakpointConstants,
+  CommonConstants,
+  DisplayUtil,
+  VideoNavPathStack
+} from '@ohos/commons';
+import { SelfComment } from './SelfComment';
+import { AllComments } from './AllComments';
+import { VideoDetailView } from './VideoDetailView';
+import { DetailConstants } from '../constants/DetailConstants';
+
+@Component
+export struct VideoDetail {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('windowWidth') windowWidth: number = 0;
+  @StorageLink('isHalfFolded') @Watch('onHalfFoldedChange') isHalfFolded: boolean = false;
+  @StorageLink('avplayerState') avplayerState: string = '';
+  @StorageLink('isFullScreen') @Watch('onFullScreenChange') isFullScreen: boolean = false;
+  @Consume('pageInfo') pageInfo: VideoNavPathStack;
+  @State commentImgHeight: string = DetailConstants.INITIAL_COMMENT_IMAGE_HEIGHT;
+  @State commentImgWidth: string = DetailConstants.INITIAL_COMMENT_IMAGE_WIDTH;
+  @State relatedVideoHeight: number = DetailConstants.INITIAL_RELATED_VIDEO_HEIGHT;
+  @State videoHeight: number = DetailConstants.INITIAL_VIDEO_HEIGHT;
+  private avPlayerUtil?: AvPlayerUtil = AvPlayerUtil.getInstance();
+  public screenHeight: number = 0;
+  private windowUtil?: WindowUtil = WindowUtil.getInstance();
+  private mainWindow?: window.Window;
+  // [Start on_window_size_change]
+  private onWindowSizeChange: (windowSize: window.Size) => void = (windowSize: window.Size) => {
+    // [StartExclude on_window_size_change]
+    if (this.pageInfo.getPageName() !== CommonConstants.PAGE_NAMES[1]) {
+      return;
+    }
+    // [EndExclude on_window_size_change]
+    if (((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint !==
+    BreakpointConstants.BREAKPOINT_SM) || this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) &&
+      !this.isHalfFolded) {
+      this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);
+    }
+    // [StartExclude on_window_size_change]
+    else if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint ===
+    BreakpointConstants.BREAKPOINT_SM) {
+      if (this.isFullScreen) {
+        this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED);
+      } else {
+        this.windowUtil?.setMainWindowOrientation(window.Orientation.PORTRAIT);
+      }
+    } else if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM && this.currentHeightBreakpoint ===
+    BreakpointConstants.BREAKPOINT_LG) {
+      if (this.isFullScreen) {
+        this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED);
+      } else {
+        this.windowUtil?.setMainWindowOrientation(window.Orientation.PORTRAIT);
+      }
+    }
+    // [EndExclude on_window_size_change]
+  };
+  // [End on_window_size_change]
+  private onHalfFoldedChange(): void {
+    if (this.isHalfFolded) {
+      this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED);
+    } else {
+      if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint ===
+      BreakpointConstants.BREAKPOINT_MD) {
+        this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);
+      }
+    }
+  }
+  // [Start on_full_screen_change]
+  private onFullScreenChange(): void {
+    if (((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint !==
+    BreakpointConstants.BREAKPOINT_SM) || this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) &&
+      !this.isHalfFolded) {
+      this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);
+    } else if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM && this.currentHeightBreakpoint ===
+    BreakpointConstants.BREAKPOINT_LG) {
+      if (this.isFullScreen) {
+        this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED);
+      } else {
+        this.windowUtil?.setMainWindowOrientation(window.Orientation.PORTRAIT);
+      }
+    } else if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint ===
+    BreakpointConstants.BREAKPOINT_SM && !this.isFullScreen) {
+      this.windowUtil?.setMainWindowOrientation(window.Orientation.PORTRAIT);
+    }
+    if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPE) {
+      if (this.isFullScreen) {
+        this.windowUtil!.disableWindowSystemBar();
+      } else {
+        this.windowUtil!.enableWindowSystemBar();
+      }
+    }
+  }
+  // [End quick_start]
+  // [Start on_full_screen_change]
+  aboutToAppear() {
+    // [StartExclude about_to_appear]
+    DisplayUtil.getFoldCreaseRegion();
+    this.screenHeight = DeviceScreen.getDeviceHeight();
+    this.mainWindow = this.windowUtil!.getMainWindow();
+    // [EndExclude about_to_appear]
+    this.mainWindow?.on('windowSizeChange', this.onWindowSizeChange);
+    if (this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM) {
+      this.windowUtil!.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);
+    }
+  }
+  // [End about_to_appear]
+
+  async aboutToDisappear() {
+    this.isFullScreen = false;
+    this.avPlayerUtil?.offTimeUpdate();
+    await this.avPlayerUtil?.release();
+
+    if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+      this.windowUtil!.setMainWindowOrientation(window.Orientation.LANDSCAPE);
+    } else {
+      this.windowUtil!.setMainWindowOrientation(window.Orientation.PORTRAIT);
+    }
+  }
+
+  build() {
+    NavDestination() {
+      GridRow({
+        columns: {
+          sm: BreakpointConstants.GRID_ROW_COLUMNS[2],
+          md: BreakpointConstants.GRID_ROW_COLUMNS[0],
+          lg: BreakpointConstants.GRID_ROW_COLUMNS[0]
+        }
+      }) {
+        GridCol({
+          span: {
+            sm: BreakpointConstants.GRID_COLUMN_SPANS[5],
+            md: BreakpointConstants.GRID_COLUMN_SPANS[0],
+            lg: BreakpointConstants.GRID_COLUMN_SPANS[0]
+          }
+        }) {
+          // [Start video_detail]
+          SideBarContainer() {
+            Column() {
+              // Sidebar area.
+              // [StartExclude VideoDetail]
+              Scroll() {
+                AllComments({ commentImgHeight: $commentImgHeight, commentImgWidth: $commentImgWidth })
+                  .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible :
+                  Visibility.None)
+              }
+              .align(Alignment.Top)
+              .scrollBar(BarState.Off)
+              .layoutWeight(1)
+              .width(CommonConstants.FULL_PERCENT)
+              .padding({ bottom: $r('app.float.side_scroll_padding') })
+
+              SelfComment()
+                .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible :
+                Visibility.None)
+              // [EndExclude VideoDetail]
+            }
+            // [StartExclude VideoDetail]
+            .justifyContent(FlexAlign.Start)
+            .height(CommonConstants.FULL_PERCENT)
+            .width(CommonConstants.FULL_PERCENT)
+            .backgroundColor(Color.White)
+            // [EndExclude VideoDetail]
+            .onAreaChange((newValue: Area) => {
+              if (newValue.width !== 0) {
+                // Handling when the width of the sidebar changes.
+                // [StartExclude VideoDetail]
+                let height: number = DetailConstants.COMMENT_IMAGE_MIN_HEIGHT_NUMBER + (Number(newValue.width) -
+                DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) /
+                  (px2vp(this.windowWidth) * DetailConstants.COMMENTS_AREA_PERCENT -
+                  DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) * (DetailConstants.COMMENT_IMAGE_MAX_HEIGHT_NUMBER -
+                DetailConstants.COMMENT_IMAGE_MIN_HEIGHT_NUMBER);
+                let width: number = DetailConstants.COMMENT_IMAGE_MIN_WIDTH_NUMBER + (Number(newValue.width) -
+                DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) /
+                  (px2vp(this.windowWidth) * DetailConstants.COMMENTS_AREA_PERCENT -
+                  DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) * (DetailConstants.COMMENT_IMAGE_MAX_WIDTH_NUMBER -
+                DetailConstants.COMMENT_IMAGE_MIN_WIDTH_NUMBER);
+                this.commentImgHeight = JSON.stringify(height);
+                this.commentImgWidth = JSON.stringify(width);
+                // [EndExclude VideoDetail]
+              }
+            })
+
+            Column() {
+              // Content area.
+              // [StartExclude VideoDetail]
+              VideoDetailView({
+                screenHeight: this.screenHeight,
+                relatedVideoHeight: this.relatedVideoHeight,
+                videoHeight: this.videoHeight
+              })
+                .layoutWeight(1)
+              SelfComment()
+                .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG || this.isFullScreen ?
+                Visibility.None : Visibility.Visible)
+              // [EndExclude VideoDetail]
+            }
+            // [StartExclude VideoDetail]
+            .height(CommonConstants.FULL_PERCENT)
+            .width(CommonConstants.FULL_PERCENT)
+            // [EndExclude VideoDetail]
+          }
+          .showSideBar(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && !this.isFullScreen ? true :
+            false)
+          // [StartExclude VideoDetail]
+          .showControlButton(false)
+          .autoHide(false)
+          .sideBarPosition(SideBarPosition.End)
+          // [EndExclude VideoDetail]
+          .sideBarWidth($r('app.float.side_bar_min_width'))
+          .minSideBarWidth($r('app.float.side_bar_min_width'))
+          .maxSideBarWidth(px2vp(this.windowWidth * DetailConstants.COMMENTS_AREA_PERCENT))
+          // [End video_detail]
+        }
+        .height(CommonConstants.FULL_PERCENT)
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .height(CommonConstants.FULL_PERCENT)
+      .onBreakpointChange((breakPoints) => {
+        if (breakPoints !== BreakpointConstants.BREAKPOINT_LG &&
+          this.videoHeight < DetailConstants.INITIAL_VIDEO_HEIGHT) {
+          this.relatedVideoHeight = 0;
+        } else if (breakPoints === BreakpointConstants.BREAKPOINT_LG) {
+          this.relatedVideoHeight = DetailConstants.INITIAL_RELATED_VIDEO_HEIGHT;
+        } else {
+          Logger.info(`No specific function`);
+        }
+      })
+    }
+    .hideTitleBar(true)
+    .onShown(() => {
+      if (this.avplayerState !== CommonConstants.AV_PLAYER_PLAYING_STATE) {
+        this.avPlayerUtil!.playerStateControl();
+      }
+      if (canIUse('SystemCapability.Window.SessionManager')) {
+        if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && display.isFoldable()) {
+          this.isHalfFolded = false;
+        }
+      }
+    })
+    .onKeyEvent((event?: KeyEvent) => {
+      if (!event || event.type !== KeyType.Down) {
+        return;
+      }
+      if (event.keyCode === KeyCode.KEYCODE_SPACE) {
+        this.avPlayerUtil!.playerStateControl();
+      }
+      if (event.keyCode === KeyCode.KEYCODE_ESCAPE) {
+        this.windowUtil!.recover();
+      }
+      if (event.keyCode === KeyCode.KEYCODE_DPAD_RIGHT) {
+        this.avPlayerUtil!.fastForward();
+      }
+      if (event.keyCode === KeyCode.KEYCODE_DPAD_LEFT) {
+        this.avPlayerUtil!.rewind();
+      }
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/ets/view/VideoDetailView.ets b/MultiVideoApplication/features/videoDetail/src/main/ets/view/VideoDetailView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d71d4ad51f9824d3766faf5e16452102ad1e3245
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/ets/view/VideoDetailView.ets
@@ -0,0 +1,153 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { display } from '@kit.ArkUI';
+import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { Logger } from '@ohos/commons';
+import { RelatedList } from './RelatedList';
+import { CurrentOffsetUtil } from '../utils/CurrentOffsetUtil';
+import { DetailConstants } from '../constants/DetailConstants';
+import { VideoPlayer } from './VideoPlayer';
+import { FooterEpisodes } from './FooterEpisodes';
+import { SideEpisodes } from './SideEpisodes';
+
+@Component
+export struct VideoDetailView {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('creaseRegion') creaseRegion: number[] = [];
+  @StorageLink('isHalfFolded') isHalfFolded: boolean = false;
+  @StorageLink('isFullScreen') isFullScreen: boolean = false;
+  @Link relatedVideoHeight: number;
+  @Link videoHeight: number;
+  @State isShowingSideBar: boolean = false;
+  @State foldStatus: display.FoldStatus | undefined = undefined
+  public screenHeight: number = 0;
+  private scroller: Scroller = new Scroller();
+
+  aboutToAppear(): void {
+    if(canIUse('SystemCapability.Window.SessionManager')){
+      this.foldStatus = display.getFoldStatus();
+    }
+  }
+
+  build() {
+    Scroll(this.scroller) {
+      Column() {
+        Row() {
+          Column() {
+            VideoPlayer({
+              videoHeight: this.videoHeight,
+              isShowingSideBar: this.isShowingSideBar,
+              foldStatus: this.foldStatus
+            })
+
+            Blank()
+              .height(this.creaseRegion[1])
+              .width(CommonConstants.FULL_PERCENT)
+              .visibility(this.isHalfFolded && this.isShowingSideBar && this.isFullScreen ? Visibility.Visible :
+              Visibility.None)
+
+            FooterEpisodes({
+              isShowingSideBar: this.isShowingSideBar,
+              foldStatus: this.foldStatus
+            })
+          }
+          .layoutWeight(3)
+
+          SideEpisodes({
+            isShowingSideBar: this.isShowingSideBar,
+            foldStatus: this.foldStatus
+          })
+        }
+        .justifyContent(FlexAlign.Start)
+        .backgroundColor(Color.Black)
+        .height(this.isFullScreen ? CommonConstants.FULL_PERCENT : 'auto')
+        .width(CommonConstants.FULL_PERCENT)
+
+        RelatedList({
+          relatedVideoHeight: this.relatedVideoHeight,
+          videoHeight: this.videoHeight,
+          screenHeight: this.screenHeight
+        })
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .justifyContent(FlexAlign.Start)
+    }
+    .scrollable(ScrollDirection.Vertical)
+    .scrollBar(BarState.Off)
+    .height(CommonConstants.FULL_PERCENT)
+    .onScrollFrameBegin((offset: number) => {
+      if (this.isFullScreen) {
+        return { offsetRemain: offset };
+      }
+      if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+        if ((offset > 0) && (this.videoHeight > DetailConstants.MIN_VIDEO_PERCENT)) {
+          // Video zoom-out logic.
+          // Percentage of screen height by sliding.
+          let offsetPercent = (Math.abs(offset) * DetailConstants.MAX_VIDEO_PERCENT) / this.screenHeight;
+          // Video shrinkage percentage.
+          let heightOffset = offsetPercent < this.videoHeight - DetailConstants.MIN_VIDEO_PERCENT ? offsetPercent :
+            this.videoHeight - DetailConstants.MIN_VIDEO_PERCENT;
+          this.videoHeight = this.videoHeight - heightOffset;
+        } else if ((offset < 0) && (this.videoHeight < DetailConstants.MAX_VIDEO_PERCENT) &&
+          (CurrentOffsetUtil.scrollToTop(JSON.stringify(this.scroller.currentOffset())))) {
+          // Video magnification logic.
+          let offsetPercent = (Math.abs(offset) * DetailConstants.MAX_VIDEO_PERCENT) / this.screenHeight;
+          let heightOffset = offsetPercent < DetailConstants.MAX_VIDEO_PERCENT - this.videoHeight ? offsetPercent :
+            DetailConstants.MAX_VIDEO_PERCENT - this.videoHeight;
+          this.videoHeight = this.videoHeight + heightOffset;
+        } else {
+          Logger.info(`No specific function`);
+        }
+      } else {
+        if ((offset > 0) && (this.videoHeight === DetailConstants.MAX_VIDEO_PERCENT) && (this.relatedVideoHeight > 0)) {
+          // Related list shrinking logic.
+          // Percentage of screen height by sliding.
+          let offsetPercent = (Math.abs(offset) * DetailConstants.TEN) / this.screenHeight;
+          this.relatedVideoHeight = (this.relatedVideoHeight - offsetPercent * DetailConstants.RELATED_LIST_HEIGHT) <
+            0 ? 0 : (this.relatedVideoHeight - offsetPercent * DetailConstants.RELATED_LIST_HEIGHT);
+        } else if ((offset > 0) && (this.videoHeight > DetailConstants.MIN_VIDEO_PERCENT) &&
+          (this.relatedVideoHeight === 0)) {
+          // Video zoom-out logic.
+          // Percentage of screen height by sliding.
+          let offsetPercent = (Math.abs(offset) * DetailConstants.MAX_VIDEO_PERCENT) / this.screenHeight;
+          // Video shrinkage percentage.
+          let heightOffset = offsetPercent < this.videoHeight - DetailConstants.MIN_VIDEO_PERCENT ? offsetPercent :
+            this.videoHeight - DetailConstants.MIN_VIDEO_PERCENT;
+          this.videoHeight = this.videoHeight - heightOffset;
+        } else if ((this.videoHeight < DetailConstants.MAX_VIDEO_PERCENT) && (this.relatedVideoHeight === 0)
+          && (offset < 0) && (CurrentOffsetUtil.scrollToTop(JSON.stringify(this.scroller.currentOffset())))) {
+          // Video magnification logic.
+          let offsetPercent = (Math.abs(offset) * DetailConstants.MAX_VIDEO_PERCENT) / this.screenHeight;
+          let heightOffset = offsetPercent < DetailConstants.MAX_VIDEO_PERCENT - this.videoHeight ? offsetPercent :
+            DetailConstants.MAX_VIDEO_PERCENT - this.videoHeight;
+          this.videoHeight = this.videoHeight + heightOffset;
+        } else if ((offset < 0) && (this.videoHeight === DetailConstants.MAX_VIDEO_PERCENT) &&
+          (this.relatedVideoHeight >= 0)) {
+          // Related list enlargement logic.
+          // Percentage of screen height by sliding.
+          let offsetPercent = (Math.abs(offset) * DetailConstants.TEN) / this.screenHeight;
+          this.relatedVideoHeight = (this.relatedVideoHeight + offsetPercent * DetailConstants.RELATED_LIST_HEIGHT) >
+          DetailConstants.RELATED_LIST_HEIGHT ? DetailConstants.RELATED_LIST_HEIGHT : (this.relatedVideoHeight +
+            offsetPercent * DetailConstants.RELATED_LIST_HEIGHT);
+        } else {
+          Logger.info(`No specific function`);
+        }
+      }
+      // Returns the actual offset 0.
+      return { offsetRemain: 0 };
+    })
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/ets/view/VideoPlayer.ets b/MultiVideoApplication/features/videoDetail/src/main/ets/view/VideoPlayer.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9850df6c1f696bb83c81f15cc0b0b92f5d3689e7
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/ets/view/VideoPlayer.ets
@@ -0,0 +1,318 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { display } from '@kit.ArkUI';
+import { deviceInfo } from '@kit.BasicServicesKit';
+import { AvPlayerUtil, BreakpointConstants, CommonConstants, VideoNavPathStack, WindowUtil } from '@ohos/commons';
+import { DetailConstants } from '../constants/DetailConstants';
+
+@Component
+export struct VideoPlayer {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @StorageLink('currentTime') currentTime: string = CommonConstants.INITIAL_TIME;
+  @StorageLink('totalTime') totalTime: string = CommonConstants.INITIAL_TIME;
+  @StorageLink('isHalfFolded') isHalfFolded: boolean = false;
+  @StorageLink('creaseRegion') creaseRegion: number[] = [];
+  @StorageLink('progress') progress: number = 0;
+  @StorageLink('avplayerState') avplayerState: string = '';
+  @StorageLink('isFullScreen') isFullScreen: boolean = false;
+  @Link videoHeight: number;
+  @Link isShowingSideBar: boolean;
+  @Link foldStatus: display.FoldStatus;
+  @Consume('pageInfo') pageInfo: VideoNavPathStack;
+  private windowUtil?: WindowUtil = WindowUtil.getInstance();
+  private avPlayerUtil?: AvPlayerUtil;
+  private xComponentController: XComponentController = new XComponentController();
+  private onFoldStatusChange: Callback<display.FoldStatus> = (data: display.FoldStatus) => {
+    this.foldStatus = data;
+    if (canIUse('SystemCapability.Window.SessionManager')) {
+      if (data === display.FoldStatus.FOLD_STATUS_HALF_FOLDED) {
+        let orientation: display.Orientation = display.getDefaultDisplaySync().orientation;
+        if (orientation === display.Orientation.LANDSCAPE || orientation === display.Orientation.LANDSCAPE_INVERTED) {
+          this.isHalfFolded = true;
+          // Full-screen playback.
+          if (!this.isFullScreen) {
+            this.isFullScreen = true;
+          }
+        }
+      } else {
+        this.isHalfFolded = false;
+      }
+    }
+  };
+
+  aboutToAppear(): void {
+    this.avPlayerUtil = AvPlayerUtil.getInstance();
+    if (canIUse('SystemCapability.Window.SessionManager')) {
+      display.on('foldStatusChange', this.onFoldStatusChange);
+    }
+  }
+
+  aboutToDisappear(): void {
+    if (canIUse('SystemCapability.Window.SessionManager')) {
+      display.off('foldStatusChange');
+    }
+  }
+
+  build() {
+    // [Start video_player]
+    Stack({ alignContent: this.isFullScreen ? Alignment.Center : Alignment.Bottom }) {
+      Flex({
+        // [StartExclude video_player]
+        direction: FlexDirection.Column,
+        justifyContent: this.isHalfFolded ? FlexAlign.Start : FlexAlign.Center,
+        alignItems: ItemAlign.Start
+        // [EndExclude video_player]
+      }) {
+        Column() {
+          // [StartExclude video_player]
+          XComponent({
+            id: CommonConstants.PAGE_NAMES[1],
+            type: XComponentType.SURFACE,
+            controller: this.xComponentController
+          })
+            .onLoad(() => {
+              this.avPlayerUtil?.createAvPlayer(this.xComponentController.getXComponentSurfaceId());
+              AppStorage.setOrCreate('detailSurfaceId', this.xComponentController.getXComponentSurfaceId());
+            })
+            .width(this.isFullScreen ? -1 : this.videoHeight + DetailConstants.PERCENT_SIGN)
+            .aspectRatio(CommonConstants.VIDEO_ASPECT_RATIO)
+          // [EndExclude video_player]
+        }
+        .justifyContent(FlexAlign.Center)
+        .height(this.isHalfFolded ? this.creaseRegion[0] : (this.isFullScreen ? CommonConstants.FULL_PERCENT : 'auto'))
+        .width(CommonConstants.FULL_PERCENT)
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .onClick(() => {
+        if (this.isShowingSideBar) {
+          this.isShowingSideBar = false;
+        } else {
+          this.avPlayerUtil?.playerStateControl();
+        }
+      })
+      .priorityGesture(
+        TapGesture({ count: 2 })
+          .onAction((event: GestureEvent) => {
+            if (event && deviceInfo.deviceType === CommonConstants.DEVICE_TYPE) {
+              this.isFullScreen = true;
+              this.windowUtil!.maximize();
+            }
+          })
+      )
+      // [StartExclude video_player]
+      Column() {
+        Row() {
+          TimeText({ time: this.currentTime })
+            .margin({
+              left: $r('app.float.current_time_left'),
+              right: $r('app.float.current_time_right')
+            })
+
+          Slider({
+            min: 0,
+            max: CommonConstants.PROGRESS_HUNDRED,
+            step: 1,
+            value: this.progress
+          })
+            .onChange((value: number, mode: SliderChangeMode) => {
+              this.avPlayerUtil?.sliderChange(value, mode);
+            })
+            .layoutWeight(1)
+            .selectedColor($r('app.color.selected_color'))
+
+          TimeText({ time: this.totalTime })
+            .margin({
+              left: $r('app.float.total_time_left'),
+              right: $r('app.float.total_time_right')
+            })
+        }
+        .width(CommonConstants.FULL_PERCENT)
+        .height($r('app.float.time_row_height'))
+        .alignItems(VerticalAlign.Center)
+        .visibility(this.isFullScreen ? Visibility.Visible : Visibility.None)
+
+        Row() {
+          Row() {
+            Image(this.avplayerState === CommonConstants.AV_PLAYER_PLAYING_STATE ? $r('app.media.ic_public_pause')
+              : $r('app.media.ic_public_play'))
+              .height($r('app.float.icon_size'))
+              .width($r('app.float.icon_size'))
+              .margin({ left: $r('app.float.icon_margin') })
+              .onClick(() => {
+                this.avPlayerUtil?.playerStateControl();
+              })
+            ImgIcon({ img: $r('app.media.ic_public_play_next') })
+            ImgIcon({ img: $r('app.media.ic_public_view_list_white') })
+          }
+          .margin({
+            top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? '0' : $r('app.float.icon_row_top'),
+            bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+            $r('app.float.icon_row_bottom_sm') : $r('app.float.icon_row_bottom')
+          })
+
+          Blank()
+
+          Row() {
+            TextButton({ content: DetailConstants.PLAYER_TEXT_LIST[0] })
+              .onClick(() => {
+                this.isShowingSideBar = !this.isShowingSideBar;
+              })
+            TextButton({ content: DetailConstants.PLAYER_TEXT_LIST[2] })
+            TextButton({ content: DetailConstants.PLAYER_TEXT_LIST[3] })
+          }
+          .margin({
+            top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.button_row_top_sm') :
+            $r('app.float.button_row_top'),
+            bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+            $r('app.float.button_row_bottom_sm') : $r('app.float.button_row_bottom')
+          })
+        }
+        .height($r('app.float.icon_button_row_height'))
+        .width(CommonConstants.FULL_PERCENT)
+        .visibility(this.isFullScreen ? Visibility.Visible : Visibility.None)
+      }
+      .height(this.isFullScreen ? CommonConstants.FULL_PERCENT : 'auto')
+      .width(CommonConstants.FULL_PERCENT)
+      .justifyContent(FlexAlign.End)
+      .visibility(this.isFullScreen && !this.isShowingSideBar ? Visibility.Visible : Visibility.None)
+      .priorityGesture(
+        TapGesture({ count: 2 })
+          .onAction((event: GestureEvent) => {
+            if (event && deviceInfo.deviceType === CommonConstants.DEVICE_TYPE) {
+              this.windowUtil!.maximize();
+              this.windowUtil!.recover();
+            }
+          })
+      )
+
+      Row() {
+        TimeText({ time: this.currentTime })
+          .margin({
+            left: $r('app.float.current_time_text_left'),
+            right: $r('app.float.current_time_text_right')
+          })
+
+        Slider({
+          min: 0,
+          max: CommonConstants.PROGRESS_HUNDRED,
+          step: 1,
+          value: this.progress
+        })
+          .onChange((value: number, mode: SliderChangeMode) => {
+            this.avPlayerUtil?.sliderChange(value, mode);
+          })
+          .layoutWeight(1)
+          .selectedColor($r('app.color.episodes_font'))
+
+        TimeText({ time: this.totalTime })
+          .margin({
+            left: $r('app.float.total_time_text_left'),
+            right: $r('app.float.total_time_text_right')
+          })
+
+        Image($r('app.media.ic_public_enlarge'))
+          .height($r('app.float.enlarge_size'))
+          .width($r('app.float.enlarge_size'))
+          .margin({ right: $r('app.float.enlarge_margin') })
+          .fillColor(Color.White)
+          .onClick(() => {
+            this.isFullScreen = true;
+          })
+
+        Image($r('app.media.ic_public_fullscreen'))
+          .height($r('app.float.enlarge_size'))
+          .width($r('app.float.enlarge_size'))
+          .margin({ right: $r('app.float.enlarge_margin') })
+          .fillColor(Color.White)
+          .visibility(deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? Visibility.Visible : Visibility.None)
+          .onClick(() => {
+            this.isFullScreen = true;
+            this.windowUtil!.maximize();
+          })
+      }
+      .width(CommonConstants.FULL_PERCENT)
+      .height($r('app.float.time_row_height'))
+      .alignItems(VerticalAlign.Center)
+      .visibility(!this.isFullScreen ? Visibility.Visible : Visibility.None)
+      // [EndExclude video_player]
+      Image($r('app.media.ic_public_back'))
+        .height($r('app.float.back_size'))
+        .width($r('app.float.back_size'))
+        .position({
+          x: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.back_position_x') :
+          $r('app.float.back_position_x_lg'),
+          y: $r('app.float.back_position_y')
+        })
+        .fillColor(Color.White)
+        .onClick(() => {
+          if (this.isHalfFolded) {
+            this.isHalfFolded = false;
+          }
+          if (this.isFullScreen) {
+            this.isFullScreen = false;
+          } else {
+            this.pageInfo.setPageName('home');
+            this.pageInfo.pop();
+          }
+        })
+    }
+    // [End video_player]
+    .height('auto')
+    .layoutWeight(this.isFullScreen ? 1 : 0)
+    .width(CommonConstants.FULL_PERCENT)
+    .backgroundColor(Color.Black)
+    .focusable(false)
+  }
+}
+
+@Component
+struct ImgIcon {
+  public img?: Resource;
+
+  build() {
+    Image(this.img ? this.img : '')
+      .height($r('app.float.icon_size'))
+      .width($r('app.float.icon_size'))
+      .margin({ left: $r('app.float.icon_margin') })
+  }
+}
+
+@Component
+struct TextButton {
+  public content: ResourceStr = '';
+
+  build() {
+    Text(this.content)
+      .fontSize($r('app.float.button_text_font'))
+      .fontWeight(FontWeight.Normal)
+      .fontColor(Color.White)
+      .margin({ right: $r('app.float.button_text_margin') })
+  }
+}
+
+@Component
+struct TimeText {
+  @Link time: string;
+
+  build() {
+    Text(this.time)
+      .fontSize($r('app.float.time_font'))
+      .fontColor(Color.White)
+      .lineHeight($r('app.float.time_text_line'))
+      .width($r('app.float.time_text_width'))
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/ets/viewmodel/RelatedVideoViewModel.ets b/MultiVideoApplication/features/videoDetail/src/main/ets/viewmodel/RelatedVideoViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..7e24db27dbb17f3ea425892ec053d685a501fbed
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/ets/viewmodel/RelatedVideoViewModel.ets
@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DetailConstants } from '../constants/DetailConstants';
+
+export class RelatedVideoViewModel {
+  private relatedVideoList: RelatedVideo[] = [];
+  private peripheralVideoList: RelatedVideo[] = [];
+
+  constructor() {
+    this.relatedVideoList.push(new RelatedVideo(DetailConstants.RELATED_VIDEO_TITLES[0],
+      $r('app.media.related_video_1')));
+    this.relatedVideoList.push(new RelatedVideo(DetailConstants.RELATED_VIDEO_TITLES[1],
+      $r('app.media.related_video_2')));
+    this.relatedVideoList.push(new RelatedVideo(DetailConstants.RELATED_VIDEO_TITLES[2],
+      $r('app.media.related_video_3')));
+    this.relatedVideoList.push(new RelatedVideo(DetailConstants.RELATED_VIDEO_TITLES[3],
+      $r('app.media.related_video_4')));
+    this.relatedVideoList.push(new RelatedVideo(DetailConstants.RELATED_VIDEO_TITLES[4],
+      $r('app.media.related_video_5')));
+    this.relatedVideoList.push(new RelatedVideo(DetailConstants.RELATED_VIDEO_TITLES[5],
+      $r('app.media.related_video_6')));
+    this.relatedVideoList.push(new RelatedVideo(DetailConstants.RELATED_VIDEO_TITLES[6],
+      $r('app.media.related_video_7')));
+    this.peripheralVideoList.push(new RelatedVideo(DetailConstants.PERIPHERAL_VIDEO_TITLE[0],
+      $r('app.media.peripheral_video_1')));
+    this.peripheralVideoList.push(new RelatedVideo(DetailConstants.PERIPHERAL_VIDEO_TITLE[1],
+      $r('app.media.peripheral_video_2')));
+    this.peripheralVideoList.push(new RelatedVideo(DetailConstants.PERIPHERAL_VIDEO_TITLE[2],
+      $r('app.media.peripheral_video_3')));
+    this.peripheralVideoList.push(new RelatedVideo(DetailConstants.PERIPHERAL_VIDEO_TITLE[3],
+      $r('app.media.peripheral_video_4')));
+    this.peripheralVideoList.push(new RelatedVideo(DetailConstants.PERIPHERAL_VIDEO_TITLE[4],
+      $r('app.media.peripheral_video_5')));
+  }
+
+  getRelatedVideoList(): RelatedVideo[] {
+    return this.relatedVideoList;
+  }
+
+  getPeripheralVideoList(): RelatedVideo[] {
+    return this.peripheralVideoList;
+  }
+}
+
+export class RelatedVideo {
+  /**
+   * Name of the related video.
+   */
+  private name: ResourceStr;
+
+  /**
+   * Image src of related video.
+   */
+  private imageSrc: Resource;
+
+  constructor(name: ResourceStr, imageSrc: Resource) {
+    this.name = name;
+    this.imageSrc = imageSrc;
+  }
+
+  public getName(): ResourceStr {
+    return this.name;
+  }
+
+  public getImageSrc(): Resource {
+    return this.imageSrc;
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/ets/viewmodel/UserViewModel.ets b/MultiVideoApplication/features/videoDetail/src/main/ets/viewmodel/UserViewModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f75dceb09e11b5de6ae22a4a75b3ec1aaef9a0d0
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/ets/viewmodel/UserViewModel.ets
@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DetailConstants } from '../constants/DetailConstants';
+
+export class UserViewModel {
+  private userList: UserInfo[] = [];
+
+  constructor() {
+    this.userList.push(new UserInfo(DetailConstants.USER_INFO_NAMES[0], $r('app.media.user_profile_2'),
+      DetailConstants.USER_INFO_COMMENTS[0], undefined, DetailConstants.USER_INFO_DATE));
+    this.userList.push(new UserInfo(DetailConstants.USER_INFO_NAMES[1], $r('app.media.user_profile_3'),
+      DetailConstants.USER_INFO_COMMENTS[1], $r("app.media.comment_2"), DetailConstants.USER_INFO_DATE));
+    this.userList.push(new UserInfo(DetailConstants.USER_INFO_NAMES[2], $r('app.media.user_profile_4'),
+      DetailConstants.USER_INFO_COMMENTS[2], $r('app.media.comment_3'), DetailConstants.USER_INFO_DATE));
+  }
+
+  getRelatedVideoList(): UserInfo[] {
+    return this.userList;
+  }
+
+  getSelfInfo(): UserInfo {
+    return new UserInfo('', $r('app.media.user_profile_1'), '', undefined, '');
+  }
+}
+
+export class UserInfo {
+  /**
+   * Name of the user.
+   */
+  private name: string;
+
+  /**
+   * Image src of user.
+   */
+  private imageSrc: Resource;
+
+  /**
+   * Comment of user.
+   */
+  private comment: ResourceStr;
+
+  /**
+   * Image src of the comment.
+   */
+  private commentImageSrc: Resource | undefined;
+
+  /**
+   * Time of the comment.
+   */
+  private time: ResourceStr;
+
+  constructor(name: string, imageSrc: Resource, comment: ResourceStr, commentImageSrc: Resource | undefined, time: ResourceStr) {
+    this.name = name;
+    this.imageSrc = imageSrc;
+    this.comment = comment;
+    this.commentImageSrc = commentImageSrc;
+    this.time = time;
+  }
+
+  public getName(): string {
+    return this.name;
+  }
+
+  public getImageSrc(): Resource {
+    return this.imageSrc;
+  }
+
+  public getComment(): ResourceStr {
+    return this.comment;
+  }
+
+  public getCommentImageSrc(): Resource | undefined {
+    return this.commentImageSrc;
+  }
+
+  public getTime(): ResourceStr {
+    return this.time;
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/module.json5 b/MultiVideoApplication/features/videoDetail/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..77b02323e24845455f55f7d74f86aff6ac37e4ed
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/module.json5
@@ -0,0 +1,11 @@
+{
+  "module": {
+    "name": "videoDetail",
+    "type": "har",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/element/color.json b/MultiVideoApplication/features/videoDetail/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..ab978fc369b3773bbacdc41391fcaa76fadcdb01
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/element/color.json
@@ -0,0 +1,28 @@
+{
+  "color": [
+    {
+      "name": "episodes_font",
+      "value": "#ED6F21"
+    },
+    {
+      "name": "episodes_background",
+      "value": "#0D000000"
+    },
+    {
+      "name": "shadow_color",
+      "value": "#2600001E"
+    },
+    {
+      "name": "selected_color",
+      "value": "#ED6F21"
+    },
+    {
+      "name": "episode_row_background",
+      "value": "#33FFFFFF"
+    },
+    {
+      "name": "font_selected",
+      "value": "#ED6F21"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/element/float.json b/MultiVideoApplication/features/videoDetail/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..9f11426850dd10679c67b0f8767fdc929d30e625
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/element/float.json
@@ -0,0 +1,604 @@
+{
+  "float": [
+    {
+      "name": "side_scroll_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "side_bar_min_width",
+      "value": "320vp"
+    },
+    {
+      "name": "all_comments_title_text_font",
+      "value": "16fp"
+    },
+    {
+      "name": "all_comments_title_text_line",
+      "value": "22vp"
+    },
+    {
+      "name": "all_comments_title_row_padding",
+      "value": "24vp"
+    },
+    {
+      "name": "all_comments_title_row_height",
+      "value": "48vp"
+    },
+    {
+      "name": "all_comments_profile_size",
+      "value": "36vp"
+    },
+    {
+      "name": "all_comments_profile_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "all_comments_title_margin",
+      "value": "10vp"
+    },
+    {
+      "name": "all_comments_comment_left",
+      "value": "52vp"
+    },
+    {
+      "name": "all_comments_comment_font",
+      "value": "14fp"
+    },
+    {
+      "name": "all_comments_comment_text_line",
+      "value": "28vp"
+    },
+    {
+      "name": "all_comments_comment_row_top",
+      "value": "4vp"
+    },
+    {
+      "name": "all_comments_img_radius",
+      "value": "8vp"
+    },
+    {
+      "name": "all_comments_img_row_padding",
+      "value": "52vp"
+    },
+    {
+      "name": "all_comments_img_row_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "all_comments_comment_time_font",
+      "value": "12fp"
+    },
+    {
+      "name": "all_comments_comment_time_line",
+      "value": "18vp"
+    },
+    {
+      "name": "all_comments_comment_time_margin",
+      "value": "52vp"
+    },
+    {
+      "name": "all_comments_icon_size",
+      "value": "16vp"
+    },
+    {
+      "name": "all_comments_icon_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "all_comments_icon_row_top",
+      "value": "14vp"
+    },
+    {
+      "name": "all_comments_divider_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "all_comments_divider_height",
+      "value": "1vp"
+    },
+    {
+      "name": "all_comments_comment_col_padding",
+      "value": "24vp"
+    },
+    {
+      "name": "sub_title_font",
+      "value": "16fp"
+    },
+    {
+      "name": "sub_title_text_line",
+      "value": "22vp"
+    },
+    {
+      "name": "sub_title_font_more",
+      "value": "14fp"
+    },
+    {
+      "name": "sub_title_text_line_more",
+      "value": "19vp"
+    },
+    {
+      "name": "arrow_img_size",
+      "value": "24vp"
+    },
+    {
+      "name": "sub_title_row_padding",
+      "value": "24vp"
+    },
+    {
+      "name": "sub_title_row_height_detail",
+      "value": "48vp"
+    },
+    {
+      "name": "related_img_height",
+      "value": "76vp"
+    },
+    {
+      "name": "related_img_width",
+      "value": "135vp"
+    },
+    {
+      "name": "related_img_radius",
+      "value": "8vp"
+    },
+    {
+      "name": "related_img_margin",
+      "value": "8vp"
+    },
+    {
+      "name": "related_name_font",
+      "value": "14fp"
+    },
+    {
+      "name": "related_name_line",
+      "value": "19vp"
+    },
+    {
+      "name": "related_list_top",
+      "value": "8vp"
+    },
+    {
+      "name": "related_list_bottom",
+      "value": "10vp"
+    },
+    {
+      "name": "related_row_left",
+      "value": "24vp"
+    },
+    {
+      "name": "related_row_bottom",
+      "value": "10vp"
+    },
+    {
+      "name": "related_row_height",
+      "value": "121vp"
+    },
+    {
+      "name": "introduction_content_font",
+      "value": "14fp"
+    },
+    {
+      "name": "introduction_content_line",
+      "value": "28vp"
+    },
+    {
+      "name": "introduction_icon_size",
+      "value": "24vp"
+    },
+    {
+      "name": "introduction_row_padding",
+      "value": "12vp"
+    },
+    {
+      "name": "is_playing_icon_size",
+      "value": "10vp"
+    },
+    {
+      "name": "is_playing_icon_x",
+      "value": "8vp"
+    },
+    {
+      "name": "is_playing_icon_y",
+      "value": "36vp"
+    },
+    {
+      "name": "episodes_text_font",
+      "value": "18fp"
+    },
+    {
+      "name": "episodes_text_height",
+      "value": "24vp"
+    },
+    {
+      "name": "episodes_list_height",
+      "value": "54vp"
+    },
+    {
+      "name": "episodes_list_width",
+      "value": "68vp"
+    },
+    {
+      "name": "episodes_list_radius",
+      "value": "8vp"
+    },
+    {
+      "name": "episodes_list_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "peripheral_img_height",
+      "value": "230vp"
+    },
+    {
+      "name": "peripheral_img_width",
+      "value": "164vp"
+    },
+    {
+      "name": "peripheral_img_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "peripheral_img_radius",
+      "value": "16vp"
+    },
+    {
+      "name": "peripheral_name_font",
+      "value": "14fp"
+    },
+    {
+      "name": "peripheral_name_line",
+      "value": "19vp"
+    },
+    {
+      "name": "peripheral_list_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "self_comment_profile_size",
+      "value": "36vp"
+    },
+    {
+      "name": "self_comment_profile_radius",
+      "value": "18vp"
+    },
+    {
+      "name": "self_comment_profile_left",
+      "value": "24vp"
+    },
+    {
+      "name": "self_comment_profile_right",
+      "value": "12vp"
+    },
+    {
+      "name": "self_comment_input_font",
+      "value": "16fp"
+    },
+    {
+      "name": "self_comment_input_height",
+      "value": "40vp"
+    },
+    {
+      "name": "self_comment_input_left",
+      "value": "36vp"
+    },
+    {
+      "name": "self_comment_input_right",
+      "value": "48vp"
+    },
+    {
+      "name": "self_comment_comment_size",
+      "value": "16vp"
+    },
+    {
+      "name": "self_comment_comment_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "self_comment_comment_right",
+      "value": "8vp"
+    },
+    {
+      "name": "self_comment_emoji_size",
+      "value": "24vp"
+    },
+    {
+      "name": "self_comment_emoji_margin",
+      "value": "16vp"
+    },
+    {
+      "name": "self_comment_stack_radius",
+      "value": "20vp"
+    },
+    {
+      "name": "self_comment_stack_height",
+      "value": "40vp"
+    },
+    {
+      "name": "self_comment_row_height",
+      "value": "80vp"
+    },
+    {
+      "name": "self_comment_row_height_more",
+      "value": "100vp"
+    },
+    {
+      "name": "self_comment_row_padding_right",
+      "value": "24vp"
+    },
+    {
+      "name": "self_comment_row_padding_bottom",
+      "value": "20vp"
+    },
+    {
+      "name": "time_font",
+      "value": "9fp"
+    },
+    {
+      "name": "time_text_line",
+      "value": "12vp"
+    },
+    {
+      "name": "time_text_width",
+      "value": "38vp"
+    },
+    {
+      "name": "current_time_text_left",
+      "value": "24vp"
+    },
+    {
+      "name": "current_time_text_right",
+      "value": "2vp"
+    },
+    {
+      "name": "total_time_text_left",
+      "value": "2vp"
+    },
+    {
+      "name": "total_time_text_right",
+      "value": "8vp"
+    },
+    {
+      "name": "enlarge_size",
+      "value": "24vp"
+    },
+    {
+      "name": "enlarge_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "time_row_height",
+      "value": "40vp"
+    },
+    {
+      "name": "back_size",
+      "value": "24vp"
+    },
+    {
+      "name": "back_position_x",
+      "value": "24vp"
+    },
+    {
+      "name": "back_position_x_lg",
+      "value": "32vp"
+    },
+    {
+      "name": "back_position_y",
+      "value": "36vp"
+    },
+    {
+      "name": "video_col_padding",
+      "value": "10vp"
+    },
+    {
+      "name": "current_time_left",
+      "value": "36vp"
+    },
+    {
+      "name": "current_time_right",
+      "value": "2vp"
+    },
+    {
+      "name": "total_time_left",
+      "value": "2vp"
+    },
+    {
+      "name": "total_time_right",
+      "value": "36vp"
+    },
+    {
+      "name": "icon_size",
+      "value": "24vp"
+    },
+    {
+      "name": "icon_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "icon_row_top",
+      "value": "14vp"
+    },
+    {
+      "name": "icon_row_bottom_sm",
+      "value": "15vp"
+    },
+    {
+      "name": "icon_row_bottom",
+      "value": "24vp"
+    },
+    {
+      "name": "button_text_font",
+      "value": "12fp"
+    },
+    {
+      "name": "button_text_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "button_row_top_sm",
+      "value": "4vp"
+    },
+    {
+      "name": "button_row_top",
+      "value": "16vp"
+    },
+    {
+      "name": "button_row_bottom_sm",
+      "value": "19vp"
+    },
+    {
+      "name": "button_row_bottom",
+      "value": "28vp"
+    },
+    {
+      "name": "icon_button_row_height",
+      "value": "60vp"
+    },
+    {
+      "name": "title_selected_font",
+      "value": "24fp"
+    },
+    {
+      "name": "title_selected_line",
+      "value": "33vp"
+    },
+    {
+      "name": "title_selected_width",
+      "value": "48vp"
+    },
+    {
+      "name": "title_selected_margin",
+      "value": "24vp"
+    },
+    {
+      "name": "title_font",
+      "value": "18fp"
+    },
+    {
+      "name": "title_line",
+      "value": "25vp"
+    },
+    {
+      "name": "title_width",
+      "value": "58vp"
+    },
+    {
+      "name": "title_row_top",
+      "value": "25vp"
+    },
+    {
+      "name": "title_row_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "title_row_height",
+      "value": "56vp"
+    },
+    {
+      "name": "playing_size",
+      "value": "10vp"
+    },
+    {
+      "name": "playing_position_x",
+      "value": "8vp"
+    },
+    {
+      "name": "playing_position_y",
+      "value": "36vp"
+    },
+    {
+      "name": "episode_row_radius",
+      "value": "8vp"
+    },
+    {
+      "name": "episode_row_height",
+      "value": "54vp"
+    },
+    {
+      "name": "episode_list_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "episode_list_lanes_space",
+      "value": "12vp"
+    },
+    {
+      "name": "episode_col_padding",
+      "value": "24vp"
+    },
+    {
+      "name": "side_title_width_1",
+      "value": "65vp"
+    },
+    {
+      "name": "side_title_margin",
+      "value": "36vp"
+    },
+    {
+      "name": "side_title_width_2",
+      "value": "56vp"
+    },
+    {
+      "name": "side_row_margin_sm",
+      "value": "8vp"
+    },
+    {
+      "name": "side_row_margin",
+      "value": "12vp"
+    },
+    {
+      "name": "playing_position_x_side_lg",
+      "value": "8vp"
+    },
+    {
+      "name": "playing_position_x_side",
+      "value": "6vp"
+    },
+    {
+      "name": "playing_position_y_side_lg",
+      "value": "36vp"
+    },
+    {
+      "name": "playing_position_y_side",
+      "value": "28vp"
+    },
+    {
+      "name": "episode_row_width_lg",
+      "value": "69vp"
+    },
+    {
+      "name": "episode_row_width_other",
+      "value": "55vp"
+    },
+    {
+      "name": "episode_row_height_lg",
+      "value": "54vp"
+    },
+    {
+      "name": "episode_row_height_other",
+      "value": "44vp"
+    },
+    {
+      "name": "lanes_item_space",
+      "value": "12vp"
+    },
+    {
+      "name": "episodes_sidebar_padding_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "episodes_sidebar_padding_left_right",
+      "value": "24vp"
+    },
+    {
+      "name": "side_col_width",
+      "value": "360vp"
+    },
+    {
+      "name": "side_text_font",
+      "value": "16fp"
+    },
+    {
+      "name": "side_text_line",
+      "value": "32vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/element/string.json b/MultiVideoApplication/features/videoDetail/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..4c8992be261acaf1a4746a9af908ade8dee5ddee
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/element/string.json
@@ -0,0 +1,80 @@
+{
+  "string": [
+    {
+      "name": "comments",
+      "value": "全部评论"
+    },
+    {
+      "name": "related",
+      "value": "相关列表"
+    },
+    {
+      "name": "more",
+      "value": "更多"
+    },
+    {
+      "name": "introduction",
+      "value": "视频简介"
+    },
+    {
+      "name": "anthology",
+      "value": "选集"
+    },
+    {
+      "name": "Peripheral",
+      "value": "周边视频"
+    },
+    {
+      "name": "product",
+      "value": "北京时间3月23日，华为春季旗舰新品发布会，我们不见不散。"
+    },
+    {
+      "name": "play",
+      "value": "23.4万次播放··华为终端·华为资讯·2023·中国大陆"
+    },
+    {
+      "name": "released",
+      "value": "Matebook系列新"
+    },
+    {
+      "name": "series",
+      "value": "HUAWEI P60 系列发布"
+    },
+    {
+      "name": "feel",
+      "value": "感觉很不错啊，下一款准备入手Mate X3了，很喜欢折叠屏的分屏功能，终于可以一边聊天一边看短视频了！"
+    },
+    {
+      "name": "love",
+      "value": "好喜欢这张图，很惊艳！！！竟然是手机拍出来的，太给力了！"
+    },
+    {
+      "name": "design",
+      "value": "这个背面真的很有设计感，珠光贝母，种草了种草了"
+    },
+    {
+      "name": "July",
+      "value": "7月27日"
+    },
+    {
+      "name": "comment",
+      "value": "评论..."
+    },
+    {
+      "name": "selections",
+      "value": "选集"
+    },
+    {
+      "name": "just",
+      "value": "只看TA"
+    },
+    {
+      "name": "super",
+      "value": "超清"
+    },
+    {
+      "name": "speed",
+      "value": "超清"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/comment_2.jpg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/comment_2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..93b3910bd6a7a550236334c9b0070869fe9bc9d8
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/comment_2.jpg differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/comment_3.jpg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/comment_3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3fb7f979741586252fbe1a45e92a938ecc308b43
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/comment_3.jpg differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_arrow_right.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_arrow_right.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5283fd327effeee1bd23d4543e865a9cee4bfff6
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_arrow_right.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 12 24" version="1.1">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>Public/ic_public_arrow_right</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M4.2482689,5.78255501 L4.28033009,5.81281566 L9.23007755,10.7625631 C9.8992572,11.4317428 9.91319844,12.5080354 9.27190128,13.1941781 L9.23007755,13.2374369 L4.28033009,18.1871843 C4.15145707,18.3160574 3.98735263,18.3882262 3.81902041,18.403691 L3.7730301,18.4065028 L3.7269699,18.4065028 C3.54277571,18.4008792 3.36025866,18.3277731 3.21966991,18.1871843 C2.93723717,17.9047516 2.92715028,17.4531048 3.18940926,17.1585854 L3.21966991,17.1265242 L7.81586399,12.5303301 C8.09829674,12.2478973 8.10838362,11.7962506 7.84612464,11.5017311 L7.81586399,11.4696699 L3.21966991,6.87347584 C2.9267767,6.58058262 2.9267767,6.10570888 3.21966991,5.81281566 C3.36088629,5.67159929 3.54440617,5.59846938 3.72943689,5.59342594 L3.77570243,5.59358355 C3.94528507,5.59936249 4.11328081,5.66235298 4.2482689,5.78255501 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_arrow_right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_路径" fill="rgba(0,0,0,0.25)" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_back.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_back.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5d8827cf7050dbb91a3f2fc6dae78538909975e8
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_back.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_back</title>
+    <defs>
+        <path d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_back" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_comment.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_comment.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2baa12a12db794024a5f131244a816023fbbafb
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_comment.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_comments.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_comments.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0211e560e1825ca9b607e21470d5ca8e309acd0e
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_comments.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_comments</title>
+    <defs>
+        <path d="M15.5,3 C19.6421356,3 23,6.35786438 23,10.5 C23,14.6007143 19.7089571,17.9327643 15.6240262,17.9989952 L15.5,18 L13.8105,18 L10.0303301,21.7803301 C9.7491526,22.0615076 9.30026186,22.0727547 9.00566731,21.8140714 L8.96966991,21.7803301 C8.68849242,21.4991526 8.67724532,21.0502619 8.93592862,20.7556673 L8.96966991,20.7196699 L12.9696699,16.7196699 C13.0986012,16.5907387 13.2696414,16.5135976 13.4504659,16.5016361 L13.5,16.5 L15.5,16.5 C18.8137085,16.5 21.5,13.8137085 21.5,10.5 C21.5,7.21942859 18.8671657,4.55378857 15.599221,4.50080383 L8.5,4.5 C5.1862915,4.5 2.5,7.1862915 2.5,10.5 C2.5,13.7805714 5.1328343,16.4462114 8.40077903,16.4991962 L8.5,16.5 L9.25,16.5 C9.66421356,16.5 10,16.8357864 10,17.25 C10,17.6494202 9.68777001,17.9759152 9.2940682,17.9987268 L9.25,18 L8.5,18 C4.35786438,18 1,14.6421356 1,10.5 C1,6.39928573 4.29104288,3.06723571 8.37597379,3.00100479 L8.5,3 L15.5,3 Z M7,9.25 C7.69035594,9.25 8.25,9.80964406 8.25,10.5 C8.25,11.1903559 7.69035594,11.75 7,11.75 C6.30964406,11.75 5.75,11.1903559 5.75,10.5 C5.75,9.80964406 6.30964406,9.25 7,9.25 Z M12,9.25 C12.6903559,9.25 13.25,9.80964406 13.25,10.5 C13.25,11.1903559 12.6903559,11.75 12,11.75 C11.3096441,11.75 10.75,11.1903559 10.75,10.5 C10.75,9.80964406 11.3096441,9.25 12,9.25 Z M17,9.25 C17.6903559,9.25 18.25,9.80964406 18.25,10.5 C18.25,11.1903559 17.6903559,11.75 17,11.75 C16.3096441,11.75 15.75,11.1903559 15.75,10.5 C15.75,9.80964406 16.3096441,9.25 17,9.25 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_comments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_download.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_download.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7d6701dd5962955deffe7d68424fe31e9b09c5a5
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_download.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_download</title>
+    <defs>
+        <path d="M21.25,15.5 C21.6494202,15.5 21.9759152,15.81223 21.9987268,16.2059318 L22,16.25 L22,18 C22,20.1828397 20.2515247,21.9573012 18.0787177,21.9992409 L18,22 L6,22 C3.81716027,22 2.04269883,20.2515247 2.0007591,18.0787177 L2,16.25 C2,15.8357864 2.33578644,15.5 2.75,15.5 C3.14942022,15.5 3.47591522,15.81223 3.49872683,16.2059318 L3.5,16.25 L3.5,18 C3.5,19.35731 4.5816677,20.4619829 5.93002379,20.4990396 L6,20.5 L18,20.5 C19.35731,20.5 20.4619829,19.4183323 20.4990396,18.0699762 L20.5,18 L20.5,16.25 C20.5,15.8357864 20.8357864,15.5 21.25,15.5 Z M11.9984143,2 C12.4126279,2 12.7484143,2.33578644 12.7484143,2.75 L12.748,15.44 L16.7196699,11.4696699 C17.0125631,11.1767767 17.4874369,11.1767767 17.7803301,11.4696699 C18.0627628,11.7521027 18.0728497,12.2037494 17.8105907,12.4982689 L17.7803301,12.5303301 L13.2374369,17.0732233 C12.5682572,17.742403 11.4919646,17.7563442 10.8058219,17.115047 L10.7625631,17.0732233 L6.21966991,12.5303301 C5.9267767,12.2374369 5.9267767,11.7625631 6.21966991,11.4696699 C6.50210266,11.1872372 6.95374943,11.1771503 7.2482689,11.4394093 L7.28033009,11.4696699 L11.248,15.437 L11.2484143,2.75 C11.2484143,2.33578644 11.5842008,2 11.9984143,2 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_download" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="合并形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_emoji.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_emoji.svg
new file mode 100644
index 0000000000000000000000000000000000000000..427ec26a06f119832bcf3286893917cff86ce240
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_emoji.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_emoji</title>
+    <defs>
+        <path d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M17.375998,13.8508265 C17.7345266,14.0582636 17.8570105,14.5170694 17.6495735,14.875598 C16.491715,16.8768095 14.3553047,18.1360571 12.0002,18.1360571 C9.64518533,18.1360571 7.50876034,16.8768925 6.35085437,14.8759408 C6.14339079,14.5174275 6.26584073,14.0586127 6.62435396,13.8511491 C6.9828672,13.6436855 7.44168206,13.7661355 7.64914563,14.1246487 C8.54157382,15.6668342 10.1860548,16.6360571 12.0002,16.6360571 C13.8143986,16.6360571 15.4588331,15.6667909 16.3512265,14.124402 C16.5586636,13.7658734 17.0174694,13.6433895 17.375998,13.8508265 Z M7.25,8 C7.9403125,8 8.5,8.5596875 8.5,9.25 C8.5,9.9403125 7.9403125,10.5 7.25,10.5 C6.5596875,10.5 6,9.9403125 6,9.25 C6,8.5596875 6.5596875,8 7.25,8 Z M16.75,8 C17.4403125,8 18,8.5596875 18,9.25 C18,9.9403125 17.4403125,10.5 16.75,10.5 C16.0596875,10.5 15.5,9.9403125 15.5,9.25 C15.5,8.5596875 16.0596875,8 16.75,8 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_emoji" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="合并形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_enlarge.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_enlarge.svg
new file mode 100644
index 0000000000000000000000000000000000000000..252b8fe5c6424f8d5f2eefaee0f4e410e771235e
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_enlarge.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_enlarge</title>
+    <defs>
+        <path d="M3.28033009,3.28033009 C3.5732233,2.98743687 4.04809704,2.98743687 4.34099026,3.28033009 L10.3513979,9.29073773 C10.6442911,9.58363094 10.6442911,10.0585047 10.3513979,10.3513979 C10.0585047,10.6442911 9.58363094,10.6442911 9.29073773,10.3513979 L3.28033009,4.34099026 C2.98743687,4.04809704 2.98743687,3.5732233 3.28033009,3.28033009 Z M14.5983496,13.5376894 L20.25,19.189 L20.2512732,14.4559318 C20.2740848,14.06223 20.6005798,13.75 21,13.75 C21.159058,13.75 21.3065515,13.7995137 21.4279079,13.8839687 L21.5137968,13.9536337 L21.5463663,13.9862032 L21.5768981,14.0207115 C21.663373,14.1246827 21.7222733,14.2524021 21.7423744,14.392645 L21.75,14.5 L21.75,20 L21.7489852,20.0601624 C21.7189436,20.949402 21.0254639,21.6704075 20.1478855,21.7438396 L20,21.75 L14.5,21.75 L14.4559318,21.7487268 C14.3115745,21.7403626 14.1781706,21.6911698 14.0670956,21.6125239 L13.9881539,21.5481949 L13.9553277,21.5155916 C13.8280575,21.3811889 13.75,21.1997101 13.75,21 C13.75,20.6203042 14.0321539,20.306509 14.3982294,20.2568466 L14.5,20.25 L19.189,20.25 L13.5376894,14.5983496 C13.2447962,14.3054564 13.2447962,13.8305826 13.5376894,13.5376894 C13.8305826,13.2447962 14.3054564,13.2447962 14.5983496,13.5376894 Z M4.25,2.5 L9.7940682,2.50127317 C9.93842553,2.50963743 10.0718294,2.55883023 10.1829044,2.63747605 L10.2618461,2.70180512 L10.2946723,2.73440836 C10.4219425,2.86881108 10.5,3.05028989 10.5,3.25 C10.5,3.62969577 10.2178461,3.94349096 9.85177056,3.99315338 L9.75,4 L4.7059318,4.00127317 C4.34503848,4.02218381 4.05260411,4.29827286 4.00637125,4.65179776 L4,4.75 L4,9.75 L3.99872683,9.7940682 C3.97591522,10.18777 3.64942022,10.5 3.25,10.5 C3.09094199,10.5 2.94344853,10.4504863 2.82209211,10.3660313 L2.73620318,10.2963663 L2.7036337,10.2637968 L2.67310187,10.2292885 C2.58662698,10.1253173 2.52772672,9.9975979 2.50762561,9.85735498 L2.5,9.75 L2.50101475,4.18983756 C2.53105635,3.30059804 3.22453611,2.57959249 4.10211451,2.50616043 L4.25,2.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_enlarge" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_favor.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_favor.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6ed99945bb665979fb509f76d42aa8244eec279f
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_favor.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_favor</title>
+    <defs>
+        <path d="M2.79452153,4.7123106 C5.14551849,2.36131365 8.79928584,2.107094 11.432027,3.94965165 C11.7516058,4.17462816 12.0562133,4.42806087 12.3404631,4.7123106 L12.2043753,4.58084491 C12.2233722,4.59824909 12.242503,4.61626317 12.2617634,4.63489833 L12.3404631,4.7123106 C12.4463878,4.81823529 12.5489662,4.9211352 12.648204,5.02101694 C12.8006003,5.17431629 12.9510582,5.32642644 13.0993468,5.47711379 L13.2191159,5.60002561 C13.6770026,6.06850208 14.0393959,6.45079635 14.3071512,6.74792182 C14.5844414,7.05562795 14.5597843,7.52986111 14.2520782,7.80715123 C13.9443721,8.08444136 13.4701389,8.05978431 13.1928488,7.75207818 L13.0507824,7.59620087 C12.6483435,7.15907177 12.0572399,6.55040776 11.2798029,5.77297077 L11.1010067,5.60225587 C9.04064077,3.72439192 5.84685559,3.78129689 3.8551817,5.77297077 C1.92651003,7.70164245 2.0120054,10.7789756 3.90277368,13.3 C4.53008781,14.1364188 5.51152739,15.2077248 6.77873984,16.4381266 L6.77873984,16.4381266 L6.81870427,16.4767845 C7.40284236,17.0397797 8.47345885,17.9853684 10.0244732,19.3076065 L10.0244732,19.3076065 L11.0614453,20.1872947 C11.6195629,20.6586926 12.4361195,20.6594461 12.9949572,20.1892045 L12.9949572,20.1892045 L13.9427905,19.3880425 C15.4712291,18.089643 16.5394672,17.1471153 17.1420446,16.5658605 L17.1420446,16.5658605 L17.4041204,16.3113955 C18.6081005,15.1345125 19.5440439,14.1079415 20.15,13.3 C22.0407683,10.7789756 22.1262637,7.70164245 20.197592,5.77297077 C18.5002127,4.07559151 15.9297294,3.783452 13.9318066,4.89655225 C13.6450802,4.60532736 13.3503168,4.30795075 13.0475699,4.00520382 C12.9789659,3.93659986 12.9093438,3.8695609 12.8387502,3.80408714 C15.4505548,2.12241169 18.9709638,2.42502225 21.2582521,4.7123106 C23.7644258,7.21848428 23.6558802,11.1254931 21.35,14.2 L21.35,14.2 L21.2782836,14.2947342 C20.5730317,15.2179162 19.5206923,16.355509 18.1834318,17.6454496 L18.1834318,17.6454496 L18.1355571,17.6914643 C17.4696453,18.3292759 16.3271085,19.333852 14.702026,20.7110339 L14.702026,20.7110339 L13.960879,21.3368085 C12.8429053,22.2775429 11.2097915,22.2760359 10.0935559,21.3332398 C7.99068585,19.5571115 6.56921236,18.3148051 5.81899059,17.5964036 L5.81899059,17.5964036 L5.59843695,17.3824031 C4.34444158,16.1565572 3.3607736,15.0773332 2.70277368,14.2 C0.396893522,11.1254931 0.288347854,7.21848428 2.79452153,4.7123106 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_favor" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="蒙版" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_fullscreen.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_fullscreen.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f9af64b3ec38ffe6b11d9bc34be63f1abf448c79
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_fullscreen.svg
@@ -0,0 +1,16 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<clipPath id="clip269_14646">
+			<rect id="line_viewfinder" width="24.000000" height="24.000000" fill="white" fill-opacity="0"/>
+		</clipPath>
+	</defs>
+	<g clip-path="url(#clip269_14646)">
+		<g opacity="0.000000">
+			<rect id="rect" width="24.000000" height="24.000000" fill="#000000" fill-opacity="1.000000"/>
+		</g>
+		<path id="path" d="M4.61 9.53C4.76 9.53 4.9 9.45 5.03 9.31C5.14 9.17 5.2 8.99 5.2 8.78L5.2 5.76C5.2 5.14 5.38 4.6 5.73 4.16C6.08 3.72 6.51 3.5 7.01 3.5L9.37 3.5C9.53 3.5 9.67 3.43 9.8 3.29C9.92 3.15 9.98 2.97 9.98 2.76C9.98 2.54 9.92 2.35 9.81 2.21C9.69 2.07 9.55 2 9.37 2L7.01 2C6.47 2 5.97 2.16 5.51 2.5C5.04 2.84 4.67 3.29 4.4 3.86C4.13 4.44 4 5.08 4 5.76L4 8.78C4 8.99 4.06 9.17 4.18 9.31C4.3 9.45 4.45 9.53 4.61 9.53ZM9.35 22C9.51 22 9.66 21.92 9.78 21.77C9.9 21.61 9.96 21.43 9.96 21.23C9.96 21.02 9.9 20.84 9.78 20.7C9.66 20.56 9.51 20.49 9.35 20.49L7.01 20.49C6.51 20.49 6.08 20.27 5.73 19.83C5.38 19.39 5.2 18.85 5.2 18.23L5.2 15.21C5.2 15 5.14 14.82 5.03 14.68C4.9 14.54 4.76 14.46 4.61 14.46C4.45 14.46 4.3 14.54 4.18 14.68C4.06 14.82 4 15.01 4 15.23L4 18.23C4 18.9 4.13 19.52 4.41 20.1C4.68 20.68 5.05 21.14 5.51 21.48C5.97 21.82 6.47 22 7.01 22L9.35 22ZM16.98 22C17.52 22 18.02 21.82 18.48 21.48C18.94 21.14 19.31 20.68 19.58 20.1C19.86 19.52 20 18.9 20 18.23L20 15.23C20 15.03 19.93 14.85 19.81 14.69C19.69 14.54 19.54 14.46 19.38 14.46C19.21 14.46 19.07 14.54 18.96 14.69C18.84 14.85 18.79 15.03 18.79 15.23L18.79 18.23C18.79 18.85 18.61 19.39 18.26 19.83C17.91 20.27 17.48 20.49 16.98 20.49L14.58 20.49C14.42 20.49 14.28 20.56 14.15 20.7C14.03 20.84 13.97 21.02 13.97 21.23C13.97 21.43 14.03 21.61 14.15 21.77C14.28 21.92 14.42 22 14.58 22L16.98 22ZM19.38 9.53C19.54 9.53 19.69 9.45 19.81 9.31C19.93 9.17 20 8.99 20 8.78L20 5.76C20 5.08 19.86 4.44 19.59 3.86C19.32 3.29 18.95 2.84 18.48 2.5C18.02 2.16 17.52 2 16.98 2L14.64 2C14.48 2 14.33 2.07 14.21 2.21C14.09 2.35 14.03 2.54 14.03 2.76C14.03 2.97 14.09 3.15 14.21 3.29C14.33 3.43 14.48 3.5 14.64 3.5L16.98 3.5C17.48 3.5 17.91 3.72 18.26 4.16C18.61 4.6 18.79 5.14 18.79 5.76L18.79 8.78C18.79 8.99 18.84 9.17 18.96 9.31C19.07 9.45 19.21 9.53 19.38 9.53Z" fill="#FFFFFF" fill-opacity="0.901961" fill-rule="nonzero"/>
+	</g>
+</svg>
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_pause.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_pause.svg
new file mode 100644
index 0000000000000000000000000000000000000000..63acc5a5049016f750467432ba836fbfc4d49508
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_pause.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_pause</title>
+    <defs>
+        <path d="M7.5,3.5 C8.32842712,3.5 9,4.17157288 9,5 L9,19 C9,19.8284271 8.32842712,20.5 7.5,20.5 C6.67157288,20.5 6,19.8284271 6,19 L6,5 C6,4.17157288 6.67157288,3.5 7.5,3.5 Z M16.5,3.5 C17.3284271,3.5 18,4.17157288 18,5 L18,19 C18,19.8284271 17.3284271,20.5 16.5,20.5 C15.6715729,20.5 15,19.8284271 15,19 L15,5 C15,4.17157288 15.6715729,3.5 16.5,3.5 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_pause" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_Combined-Shape" fill="#FFFFFF" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_play.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_play.svg
new file mode 100644
index 0000000000000000000000000000000000000000..73dc17cf5f245175a9c857e97f163115116a84d5
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_play.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_play</title>
+    <defs>
+        <path d="M15.9178985,6.64969378 L22.2241113,17.6299232 C22.9117482,18.8272204 22.4985869,20.3552615 21.3012896,21.0428985 C20.9224145,21.2604957 20.4931281,21.375 20.0562128,21.375 L7.44378717,21.375 C6.06307529,21.375 4.94378717,20.2557119 4.94378717,18.875 C4.94378717,18.4380847 5.05829147,18.0087984 5.27588871,17.6299232 L11.5821015,6.64969378 C12.2697385,5.45239653 13.7977796,5.03923521 14.9950768,5.72687214 C15.3789642,5.94734799 15.6974226,6.26580643 15.9178985,6.64969378 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_play" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_多边形备份-5" fill="#FFFFFF" transform="translate(13.750000, 12.125000) rotate(-270.000000) translate(-13.750000, -12.125000) " xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_play_next.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_play_next.svg
new file mode 100644
index 0000000000000000000000000000000000000000..426048890677460f4c2b630429b25cc20d99827b
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_play_next.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_play_next</title>
+    <defs>
+        <path d="M4.73445554,6.65608891 C5.2177047,5.81907682 6.28798791,5.5322953 7.125,6.01554446 L7.125,6.01554446 L14.8653811,10.4844555 C15.1314147,10.6380501 15.3523309,10.8589664 15.5059255,11.125 C15.9891747,11.9620121 15.7023931,13.0322953 14.8653811,13.5155445 L14.8653811,13.5155445 L7.125,17.9844555 C6.85896638,18.1380501 6.55718916,18.2189111 6.25,18.2189111 C5.28350169,18.2189111 4.5,17.4354094 4.5,16.4689111 L4.5,16.4689111 L4.5,7.53108891 C4.5,7.22389975 4.58086096,6.92212253 4.73445554,6.65608891 Z M18.25,6.25 C18.8022847,6.25 19.25,6.69771525 19.25,7.25 L19.25,16.75 C19.25,17.3022847 18.8022847,17.75 18.25,17.75 C17.6977153,17.75 17.25,17.3022847 17.25,16.75 L17.25,7.25 C17.25,6.69771525 17.6977153,6.25 18.25,6.25 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_play_next" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#FFFFFF" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_share.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_share.svg
new file mode 100644
index 0000000000000000000000000000000000000000..516c03c260f5341c1a969a769e9b19648927cf6d
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_share.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_share</title>
+    <defs>
+        <path d="M12.25,2 C13.9068542,2 15.25,3.34314575 15.25,5 C15.25,6.65685425 13.9068542,8 12.25,8 C11.9804725,8 11.7192467,7.96445647 11.4707541,7.89780096 L5.93230241,16.2050908 C6.40150564,16.6005646 6.74773454,17.1373071 6.90542312,17.7497523 L17.0945769,17.7497523 C17.4276951,16.4559576 18.6022096,15.5 20,15.5 C21.6568542,15.5 23,16.8431458 23,18.5 C23,20.1568542 21.6568542,21.5 20,21.5 C18.6025704,21.5 17.4283015,20.5445359 17.094835,19.2512495 L6.90516499,19.2512495 C6.57169851,20.5445359 5.39742955,21.5 4,21.5 C2.34314575,21.5 1,20.1568542 1,18.5 C1,16.8431458 2.34314575,15.5 4,15.5 C4.19240202,15.5 4.38057369,15.5181123 4.56290296,15.5527249 L10.1618944,7.15402617 C9.59951533,6.60875215 9.25,5.84519291 9.25,5 C9.25,3.34314575 10.5931458,2 12.25,2 Z M4,17 C3.17157288,17 2.5,17.6715729 2.5,18.5 C2.5,19.3284271 3.17157288,20 4,20 C4.82842712,20 5.5,19.3284271 5.5,18.5 C5.5,17.6715729 4.82842712,17 4,17 Z M20,17 C19.1715729,17 18.5,17.6715729 18.5,18.5 C18.5,19.3284271 19.1715729,20 20,20 C20.8284271,20 21.5,19.3284271 21.5,18.5 C21.5,17.6715729 20.8284271,17 20,17 Z M12.25,3.5 C11.4215729,3.5 10.75,4.17157288 10.75,5 C10.75,5.82842712 11.4215729,6.5 12.25,6.5 C13.0784271,6.5 13.75,5.82842712 13.75,5 C13.75,4.17157288 13.0784271,3.5 12.25,3.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_share" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="合并形状" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_thumb_sup.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_thumb_sup.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b8238cc4486902c98eadd660f45a092e641865e7
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_thumb_sup.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_thumbsup</title>
+    <defs>
+        <path d="M15.9050936,2.45338801 C16.6447884,3.00255534 16.9749702,3.94717086 16.7384601,4.83756184 L15.5083454,9.46858193 C15.5048008,9.48192631 15.5127451,9.49561753 15.5260895,9.49916213 L15.5325076,9.5 L20.0446188,9.5 C21.7014731,9.5 23.0446188,10.8431458 23.0446188,12.5 C23.0446188,12.7734334 23.0072367,13.0455832 22.9335109,13.3088898 L21.3180145,19.0785197 C20.8343603,20.8058562 19.259929,22 17.4661584,22 L4,22 C2.34314575,22 1,20.6568542 1,19 L1,13 C1,11.3431458 2.34314575,10 4,10 L7.5,10 L12.7573206,2.91871096 C13.4980588,1.92098208 14.9073647,1.7126499 15.9050936,2.45338801 Z M6.75,11.499795 L4,11.5 C3.19040076,11.5 2.53060706,12.1413937 2.50103462,12.9437654 L2.5,13 L2.5,19 C2.5,19.8095992 3.14139372,20.4693929 3.94376543,20.4989654 L4,20.5 L6.75,20.499795 L6.75,11.499795 Z M13.9911444,3.77565755 L13.961686,3.81286096 L8.25456757,11.5 L8.25,11.499795 L8.25,20.499795 L17.4661584,20.5 C18.5634117,20.5 19.5293493,19.7850814 19.8533531,18.742528 L19.8735685,18.6740748 L21.4890648,12.9044449 C21.5259277,12.7727916 21.5446188,12.6367167 21.5446188,12.5 C21.5446188,11.6904008 20.9032251,11.0306071 20.1008534,11.0010346 L20.0446188,11 L15.5325076,11 L15.3972186,10.9932081 C15.35145,10.9899937 15.3185638,10.9857004 15.273504,10.9770573 L15.1410056,10.9488898 C14.3454989,10.7375833 13.8645946,9.9351472 14.044957,9.13902376 L14.0586177,9.08349802 L15.2887324,4.45247792 C15.3675691,4.15568093 15.2575085,3.84080909 15.0109436,3.65775331 C14.6911587,3.42033725 14.2445318,3.4754108 13.9911444,3.77565755 Z M4.75,16.5 C5.16421356,16.5 5.5,16.8357864 5.5,17.25 L5.5,18.75 C5.5,19.1642136 5.16421356,19.5 4.75,19.5 C4.33578644,19.5 4,19.1642136 4,18.75 L4,17.25 C4,16.8357864 4.33578644,16.5 4.75,16.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Public/ic_public_thumbsup" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="形状结合" fill-rule="nonzero"></g>
+        <g id="编组" mask="url(#mask-2)" fill="#000000" fill-opacity="0.9">
+            <g id="color/#000000">
+                <rect x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_view_list_white.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_view_list_white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..44cd4f803e3ae8bc598046e6d42a8db8fff39c5b
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/ic_public_view_list_white.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_view_list_filled</title>
+    <defs>
+        <path d="M3.75,17.25 C4.44035594,17.25 5,17.8096441 5,18.5 C5,19.1903559 4.44035594,19.75 3.75,19.75 C3.05964406,19.75 2.5,19.1903559 2.5,18.5 C2.5,17.8096441 3.05964406,17.25 3.75,17.25 Z M21,17.5 C21.5522847,17.5 22,17.9477153 22,18.5 C22,19.0522847 21.5522847,19.5 21,19.5 L8,19.5 C7.44771525,19.5 7,19.0522847 7,18.5 C7,17.9477153 7.44771525,17.5 8,17.5 L21,17.5 Z M3.75,10.75 C4.44035594,10.75 5,11.3096441 5,12 C5,12.6903559 4.44035594,13.25 3.75,13.25 C3.05964406,13.25 2.5,12.6903559 2.5,12 C2.5,11.3096441 3.05964406,10.75 3.75,10.75 Z M21,11 C21.5522847,11 22,11.4477153 22,12 C22,12.5522847 21.5522847,13 21,13 L8,13 C7.44771525,13 7,12.5522847 7,12 C7,11.4477153 7.44771525,11 8,11 L21,11 Z M3.75,4.25 C4.44035594,4.25 5,4.80964406 5,5.5 C5,6.19035594 4.44035594,6.75 3.75,6.75 C3.05964406,6.75 2.5,6.19035594 2.5,5.5 C2.5,4.80964406 3.05964406,4.25 3.75,4.25 Z M21,4.5 C21.5522847,4.5 22,4.94771525 22,5.5 C22,6.05228475 21.5522847,6.5 21,6.5 L8,6.5 C7.44771525,6.5 7,6.05228475 7,5.5 C7,4.94771525 7.44771525,4.5 8,4.5 L21,4.5 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_view_list_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#_path-1"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_1.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..28e7f5ee960817f36460e3eba6f9dc67c197f54b
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_1.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_2.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..a610c54fea006cac3603ae137a9030b5818c07ad
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_2.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_3.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3c32b0efd898aeef11e64ce290c22eb9f693cf7
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_3.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_4.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e259fe31e462502e229354a3b029e2d9d02d0a1
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_4.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_5.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..6868a2e576e1b56b719310e9c71ec902db78e10d
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/peripheral_video_5.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_1.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..dcd5a0d6ceaab20bdc056806aa0cc3727cac996a
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_1.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_10.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_10.png
new file mode 100644
index 0000000000000000000000000000000000000000..c46615e7928045b7a61754bb54efff697839c073
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_10.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_11.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_11.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ddef693e2d111a9c62fe9ad4bf954aef346bd42
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_11.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_12.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_12.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8e2da1fd295d0a00435ba694cf8499287c63f4d
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_12.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_2.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea8e528ddb038dfb1ca676d81303d237f91b10ea
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_2.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_3.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ebbd5702543bee18227a00a19fa4d919ccc19d8
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_3.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_4.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..4ed9964dcfa80b789bd6a08f00346238f6b172f0
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_4.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_5.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..109257fb85bf9eea325deb8c3781ea8ae07459a0
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_5.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_6.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..327723c32dfe2d674e8057c29d8dc98d21a27b80
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_6.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_7.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_7.png
new file mode 100644
index 0000000000000000000000000000000000000000..844a84610d789246fc2fc9f15e9a4e888ea115ba
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_7.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_8.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_8.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e2147c44685db28a0d975f78228c617543e224d
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_8.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_9.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_9.png
new file mode 100644
index 0000000000000000000000000000000000000000..5463a06aa8cf00e8eded9aa0012c4bfe10adf105
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/related_video_9.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/user_profile_1.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/user_profile_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ad5fc2f0e31a26edd83223ceefa83d7cabdaf96
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/user_profile_1.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/user_profile_2.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/user_profile_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad1cfe89abe7d00f3f27d29d12a53a2caba1c2ea
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/user_profile_2.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/user_profile_3.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/user_profile_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..021b62ba16e1a0b9ab729fe33cd6bad1de8c438f
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/user_profile_3.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/user_profile_4.png b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/user_profile_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4efeec7ddba67910883e49a950c1a846427beac
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/user_profile_4.png differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/video_playing.svg b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/video_playing.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0f00e3f55d20bf92ffb203ba13f29058e2d9396d
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/base/media/video_playing.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>形状结合</title>
+    <g id="页面-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="典型页结构4：全屏看视频-支架态-选集(折叠屏)" transform="translate(-112.000000, -476.000000)" fill="#ED6F21">
+            <g id="2" transform="translate(104.000000, 440.000000)">
+                <g id="播放提示" transform="translate(8.000000, 36.000000)">
+                    <path d="M5,0 C5.55228475,-1.01453063e-16 6,0.44771525 6,1 L6,9 C6,9.55228475 5.55228475,10 5,10 C4.44771525,10 4,9.55228475 4,9 L4,1 C4,0.44771525 4.44771525,1.01453063e-16 5,0 Z M9,6 C9.55228475,6 10,6.44771525 10,7 L10,9 C10,9.55228475 9.55228475,10 9,10 C8.44771525,10 8,9.55228475 8,9 L8,7 C8,6.44771525 8.44771525,6 9,6 Z M1,3 C1.55228475,3 2,3.44771525 2,4 L2,9 C2,9.55228475 1.55228475,10 1,10 C0.44771525,10 6.76353751e-17,9.55228475 0,9 L0,4 C-6.76353751e-17,3.44771525 0.44771525,3 1,3 Z" id="形状结合"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/en_US/element/string.json b/MultiVideoApplication/features/videoDetail/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..c4bfaab927bcd453df30cbef888726e5c697d97e
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/en_US/element/string.json
@@ -0,0 +1,80 @@
+{
+  "string": [
+    {
+      "name": "comments",
+      "value": "All comments"
+    },
+    {
+      "name": "related",
+      "value": "Related list"
+    },
+    {
+      "name": "more",
+      "value": "more"
+    },
+    {
+      "name": "introduction",
+      "value": "Video introduction"
+    },
+    {
+      "name": "anthology",
+      "value": "anthology"
+    },
+    {
+      "name": "Peripheral",
+      "value": "Peripheral video"
+    },
+    {
+      "name": "product",
+      "value": "On March 23, Beijing time, Huawei's spring flagship new product conference, we will see each other."
+    },
+    {
+      "name": "play",
+      "value": "234,000 plays··Huawei terminal·Huawei Information·2023·Chinese mainland"
+    },
+    {
+      "name": "released",
+      "value": "New to the Matebook series"
+    },
+    {
+      "name": "series",
+      "value": "HUAWEI P60 series released"
+    },
+    {
+      "name": "feel",
+      "value": "Feel very good ah, the next ready to start Mate X3, like the folding screen split screen function, finally can chat while watching short videos!"
+    },
+    {
+      "name": "love",
+      "value": "Love this picture, it's amazing!! It was taken by a mobile phone. Great!"
+    },
+    {
+      "name": "design",
+      "value": "This back is really designed, pearl fritillary, planted grass."
+    },
+    {
+      "name": "July",
+      "value": "The 27th of July"
+    },
+    {
+      "name": "comment",
+      "value": "comment..."
+    },
+    {
+      "name": "selections",
+      "value": "select"
+    },
+    {
+      "name": "just",
+      "value": "look it"
+    },
+    {
+      "name": "super",
+      "value": "super"
+    },
+    {
+      "name": "speed",
+      "value": "speed"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/rawfile/product.mp4 b/MultiVideoApplication/features/videoDetail/src/main/resources/rawfile/product.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..77a3449e18dfd4c0fe400e92721d79e09f2b34fc
Binary files /dev/null and b/MultiVideoApplication/features/videoDetail/src/main/resources/rawfile/product.mp4 differ
diff --git a/MultiVideoApplication/features/videoDetail/src/main/resources/zh_CN/element/string.json b/MultiVideoApplication/features/videoDetail/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..9ad5b2e94dfbecd69aaaacb3646341132b5db4e5
--- /dev/null
+++ b/MultiVideoApplication/features/videoDetail/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,80 @@
+{
+  "string": [
+    {
+      "name": "comments",
+      "value": "全部评论"
+    },
+    {
+      "name": "related",
+      "value": "相关列表"
+    },
+    {
+      "name": "more",
+      "value": "更多"
+    },
+    {
+      "name": "introduction",
+      "value": "视频简介"
+    },
+    {
+      "name": "anthology",
+      "value": "选集"
+    },
+    {
+      "name": "Peripheral",
+      "value": "周边视频"
+    },
+    {
+      "name": "product",
+      "value": "北京时间3月23日，华为春季旗舰新品发布会，我们不见不散。"
+    },
+    {
+      "name": "play",
+      "value": "23.4万次播放··华为终端·华为资讯·2023·中国大陆"
+    },
+    {
+      "name": "released",
+      "value": "Matebook系列新"
+    },
+    {
+      "name": "series",
+      "value": "HUAWEI P60 系列发布"
+    },
+    {
+      "name": "feel",
+      "value": "感觉很不错啊，下一款准备入手Mate X3了，很喜欢折叠屏的分屏功能，终于可以一边聊天一边看短视频了！"
+    },
+    {
+      "name": "love",
+      "value": "好喜欢这张图，很惊艳！！！竟然是手机拍出来的，太给力了！"
+    },
+    {
+      "name": "design",
+      "value": "这个背面真的很有设计感，珠光贝母，种草了种草了"
+    },
+    {
+      "name": "July",
+      "value": "7月27日"
+    },
+    {
+      "name": "comment",
+      "value": "评论..."
+    },
+    {
+      "name": "selections",
+      "value": "选集"
+    },
+    {
+      "name": "just",
+      "value": "只看TA"
+    },
+    {
+      "name": "super",
+      "value": "超清"
+    },
+    {
+      "name": "speed",
+      "value": "倍速"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/hvigor/hvigor-config.json5 b/MultiVideoApplication/hvigor/hvigor-config.json5
new file mode 100644
index 0000000000000000000000000000000000000000..eb31f8301a08fedbf8ca8dd0c17b84a8347d8220
--- /dev/null
+++ b/MultiVideoApplication/hvigor/hvigor-config.json5
@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+{
+  "modelVersion": "5.0.0",
+  "dependencies": {
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/oh-package.json5 b/MultiVideoApplication/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..1fdec2e1347c733c15032bfe9bbaa9156f2c03e3
--- /dev/null
+++ b/MultiVideoApplication/oh-package.json5
@@ -0,0 +1,13 @@
+{
+  "modelVersion": "5.0.0",
+  "license": "",
+  "devDependencies": {
+  },
+  "author": "",
+  "name": "multivideoapplication",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {}
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/products/phone/build-profile.json5 b/MultiVideoApplication/products/phone/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..3167e54d1ff3a0aaa0cdcf4319789de8e3f3c350
--- /dev/null
+++ b/MultiVideoApplication/products/phone/build-profile.json5
@@ -0,0 +1,10 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+  },
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/products/phone/hvigorfile.ts b/MultiVideoApplication/products/phone/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6edcd90486dd5a853cf7d34c8647f08414ca7a3
--- /dev/null
+++ b/MultiVideoApplication/products/phone/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { hapTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/MultiVideoApplication/products/phone/oh-package.json5 b/MultiVideoApplication/products/phone/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..9981d612d2a68c1f4edd3375ccbae53f71bd7421
--- /dev/null
+++ b/MultiVideoApplication/products/phone/oh-package.json5
@@ -0,0 +1,15 @@
+{
+  "license": "",
+  "devDependencies": {},
+  "author": "",
+  "name": "phone",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "version": "1.0.0",
+  "dynamicDependencies": {},
+  "dependencies": {
+    "@ohos/commons": "file:../../commons/base",
+    "@ohos/videoDetail": "file:../../features/videoDetail",
+    "@ohos/home": "file:../../features/home"
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/products/phone/src/main/ets/entryability/EntryAbility.ets b/MultiVideoApplication/products/phone/src/main/ets/entryability/EntryAbility.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3cfea5175347ddc0fc175a732025bad35d188e8c
--- /dev/null
+++ b/MultiVideoApplication/products/phone/src/main/ets/entryability/EntryAbility.ets
@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
+import { window } from '@kit.ArkUI';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { WindowUtil } from '@ohos/commons';
+
+export default class EntryAbility extends UIAbility {
+  // [Start EntryAbility]
+  private windowObj?: window.Window;
+  private windowUtil?: WindowUtil = WindowUtil.getInstance();
+  private onWindowSizeChange: (windowSize: window.Size) => void = (windowSize: window.Size) => {
+    this.windowUtil!.updateHeightBp();
+    this.windowUtil!.updateWidthBp();
+    AppStorage.setOrCreate('windowWidth', windowSize.width);
+  };
+  // [StartExclude EntryAbility]
+  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
+  }
+
+  onDestroy() {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
+  }
+  // [EndExclude EntryAbility]
+  onWindowStageCreate(windowStage: window.WindowStage) {
+    // [StartExclude EntryAbility]
+    // Main window is created, set main page for this ability
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+    // [EndExclude EntryAbility]
+    this.windowUtil!.setWindowStage(windowStage);
+    windowStage.getMainWindow().then((data: window.Window) => {
+      this.windowObj = data;
+      this.windowUtil!.updateWidthBp();
+      this.windowUtil!.updateHeightBp();
+      AppStorage.setOrCreate('windowWidth', data.getWindowProperties().windowRect.width);
+      this.windowObj.on('windowSizeChange', this.onWindowSizeChange);
+    });
+    // [StartExclude EntryAbility]
+    windowStage.loadContent('pages/Index', (err, data) => {
+      if (err.code) {
+        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+        return;
+      }
+      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
+    });
+    // [EndExclude EntryAbility]
+  }
+  // [End EntryAbility]
+
+  onWindowStageDestroy() {
+    // Main window is destroyed, release UI related resources
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+  }
+
+  onForeground() {
+    // Ability has brought to foreground
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
+  }
+
+  onBackground() {
+    // Ability has back to background
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/products/phone/src/main/ets/pages/Index.ets b/MultiVideoApplication/products/phone/src/main/ets/pages/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4bf30d5a59b940b86c71f9acda2c74ee1afb5909
--- /dev/null
+++ b/MultiVideoApplication/products/phone/src/main/ets/pages/Index.ets
@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Home } from '@ohos/home';
+import { CommonConstants, VideoNavPathStack, WindowUtil } from '@ohos/commons';
+import { VideoDetail } from '@ohos/videoDetail/src/main/ets/view/VideoDetail';
+
+@Entry
+@Component
+struct Index {
+  @Provide('pageInfo') pageInfo: VideoNavPathStack = new VideoNavPathStack();
+
+  aboutToDisappear(): void {
+    let windowUtil: WindowUtil | undefined = WindowUtil.getInstance();
+    windowUtil!.offWindowSizeChange();
+  }
+
+  @Builder
+  PageMap(name: string) {
+    if (name === CommonConstants.PAGE_NAMES[1]) {
+      VideoDetail()
+    }
+  }
+
+  build() {
+    Navigation(this.pageInfo) {
+      Home()
+    }
+    .mode(NavigationMode.Stack)
+    .navDestination(this.PageMap)
+    .hideToolBar(true)
+    .hideTitleBar(true)
+    .hideBackButton(true)
+    .width(CommonConstants.FULL_PERCENT)
+    .height(CommonConstants.FULL_PERCENT)
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/products/phone/src/main/module.json5 b/MultiVideoApplication/products/phone/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..761638d999d537f3bcf9267851cee8568ae86eab
--- /dev/null
+++ b/MultiVideoApplication/products/phone/src/main/module.json5
@@ -0,0 +1,41 @@
+{
+  "module": {
+    "name": "phone",
+    "type": "entry",
+    "description": "$string:module_desc",
+    "mainElement": "EntryAbility",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ],
+    "deliveryWithInstall": true,
+    "installationFree": false,
+    "pages": "$profile:main_pages",
+    "abilities": [
+      {
+        "name": "EntryAbility",
+        "srcEntry": "./ets/entryability/EntryAbility.ets",
+        "description": "$string:EntryAbility_desc",
+        "icon": "$media:layered_image",
+        "label": "$string:EntryAbility_label",
+        "startWindowIcon": "$media:startIcon",
+        "startWindowBackground": "$color:start_window_background",
+        "exported": true,
+        "minWindowWidth": 331,
+        "minWindowHeight": 600,
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "launchType": "singleton"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/products/phone/src/main/resources/base/element/color.json b/MultiVideoApplication/products/phone/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..3c712962da3c2751c2b9ddb53559afcbd2b54a02
--- /dev/null
+++ b/MultiVideoApplication/products/phone/src/main/resources/base/element/color.json
@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/products/phone/src/main/resources/base/element/string.json b/MultiVideoApplication/products/phone/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..552fb2598352eb6059c86e3409f15e786f551e6d
--- /dev/null
+++ b/MultiVideoApplication/products/phone/src/main/resources/base/element/string.json
@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "MultiVideoApplication"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/products/phone/src/main/resources/base/media/background.png b/MultiVideoApplication/products/phone/src/main/resources/base/media/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..923f2b3f27e915d6871871deea0420eb45ce102f
Binary files /dev/null and b/MultiVideoApplication/products/phone/src/main/resources/base/media/background.png differ
diff --git a/MultiVideoApplication/products/phone/src/main/resources/base/media/foreground.png b/MultiVideoApplication/products/phone/src/main/resources/base/media/foreground.png
new file mode 100644
index 0000000000000000000000000000000000000000..97014d3e10e5ff511409c378cd4255713aecd85f
Binary files /dev/null and b/MultiVideoApplication/products/phone/src/main/resources/base/media/foreground.png differ
diff --git a/MultiVideoApplication/products/phone/src/main/resources/base/media/layered_image.json b/MultiVideoApplication/products/phone/src/main/resources/base/media/layered_image.json
new file mode 100644
index 0000000000000000000000000000000000000000..fb49920440fb4d246c82f9ada275e26123a2136a
--- /dev/null
+++ b/MultiVideoApplication/products/phone/src/main/resources/base/media/layered_image.json
@@ -0,0 +1,7 @@
+{
+  "layered-image":
+  {
+    "background" : "$media:background",
+    "foreground" : "$media:foreground"
+  }
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/products/phone/src/main/resources/base/media/startIcon.png b/MultiVideoApplication/products/phone/src/main/resources/base/media/startIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b
Binary files /dev/null and b/MultiVideoApplication/products/phone/src/main/resources/base/media/startIcon.png differ
diff --git a/MultiVideoApplication/products/phone/src/main/resources/base/profile/main_pages.json b/MultiVideoApplication/products/phone/src/main/resources/base/profile/main_pages.json
new file mode 100644
index 0000000000000000000000000000000000000000..1898d94f58d6128ab712be2c68acc7c98e9ab9ce
--- /dev/null
+++ b/MultiVideoApplication/products/phone/src/main/resources/base/profile/main_pages.json
@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/Index"
+  ]
+}
diff --git a/MultiVideoApplication/products/phone/src/main/resources/en_US/element/string.json b/MultiVideoApplication/products/phone/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..552fb2598352eb6059c86e3409f15e786f551e6d
--- /dev/null
+++ b/MultiVideoApplication/products/phone/src/main/resources/en_US/element/string.json
@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "MultiVideoApplication"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/products/phone/src/main/resources/zh_CN/element/string.json b/MultiVideoApplication/products/phone/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..af223d6ceb4c14e29dbd4329738713f2011b2e37
--- /dev/null
+++ b/MultiVideoApplication/products/phone/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "模块描述"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "一多开发实例-视频"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/MultiVideoApplication/screenshots/device/foldable.png b/MultiVideoApplication/screenshots/device/foldable.png
new file mode 100644
index 0000000000000000000000000000000000000000..3771c893d5cfa6c4702978d1d78c737533f8700f
Binary files /dev/null and b/MultiVideoApplication/screenshots/device/foldable.png differ
diff --git a/MultiVideoApplication/screenshots/device/foldable_EN.jpg b/MultiVideoApplication/screenshots/device/foldable_EN.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..787eddd04ca34d6b345ac6b1de6a787e28c1e69e
Binary files /dev/null and b/MultiVideoApplication/screenshots/device/foldable_EN.jpg differ
diff --git a/MultiVideoApplication/screenshots/device/phone.png b/MultiVideoApplication/screenshots/device/phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7d3a11914adedd6f190f196211af9a6146d4c87
Binary files /dev/null and b/MultiVideoApplication/screenshots/device/phone.png differ
diff --git a/MultiVideoApplication/screenshots/device/phone_EN.png b/MultiVideoApplication/screenshots/device/phone_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..93323e368a7582e926b3e27027a952a67df65cf6
Binary files /dev/null and b/MultiVideoApplication/screenshots/device/phone_EN.png differ
diff --git a/MultiVideoApplication/screenshots/device/tablet.png b/MultiVideoApplication/screenshots/device/tablet.png
new file mode 100644
index 0000000000000000000000000000000000000000..d92bde600c8e7c74da301151a74b3021929bb1b6
Binary files /dev/null and b/MultiVideoApplication/screenshots/device/tablet.png differ
diff --git a/MultiVideoApplication/screenshots/device/tablet_EN.png b/MultiVideoApplication/screenshots/device/tablet_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f51cb80d4afcfc11c622552d128e7659dac87d8
Binary files /dev/null and b/MultiVideoApplication/screenshots/device/tablet_EN.png differ
diff --git a/ScreenFlickerSolution/entry/src/main/ets/pages/ClickError.ets b/ScreenFlickerSolution/entry/src/main/ets/pages/ClickError.ets
index 81eafdf54bffeb7ef684de47a306affaf4aaade1..27f0dc2d77eb3c360ade72398592395802f4df59 100644
--- a/ScreenFlickerSolution/entry/src/main/ets/pages/ClickError.ets
+++ b/ScreenFlickerSolution/entry/src/main/ets/pages/ClickError.ets
@@ -33,7 +33,7 @@ struct ClickError {
       .scale({ x: this.scaleValue, y: this.scaleValue })
       .onClick(() => {
         // When the animation is delivered, the count is increased by 1
-        animateTo({
+        this.getUIContext().animateTo({
           curve: Curve.EaseInOut,
           duration: 350,
           onFinish: () => {
diff --git a/ScreenFlickerSolution/entry/src/main/ets/pages/ClickRight.ets b/ScreenFlickerSolution/entry/src/main/ets/pages/ClickRight.ets
index c8272b765886b3f974f3135aac0b375d550aa6e3..9149739ed017f21c5356148d9094f0d902cf87b1 100644
--- a/ScreenFlickerSolution/entry/src/main/ets/pages/ClickRight.ets
+++ b/ScreenFlickerSolution/entry/src/main/ets/pages/ClickRight.ets
@@ -35,7 +35,7 @@ struct ClickRight {
       .onClick(() => {
         // When the animation is delivered, the count is increased by 1
         this.cnt = this.cnt + 1;
-        animateTo({
+        this.getUIContext().animateTo({
           curve: Curve.EaseInOut,
           duration: 350,
           onFinish: () => {
diff --git a/ScreenFlickerSolution/entry/src/main/ets/pages/TabsRight.ets b/ScreenFlickerSolution/entry/src/main/ets/pages/TabsRight.ets
index 7efdfbed45f10060dabc0f09497be18395be8c1d..bba6da70c34d3eb5784b5d97f00c9fc2473c5e2e 100644
--- a/ScreenFlickerSolution/entry/src/main/ets/pages/TabsRight.ets
+++ b/ScreenFlickerSolution/entry/src/main/ets/pages/TabsRight.ets
@@ -144,7 +144,7 @@ struct TabsRight {
 
   private startAnimateTo(duration: number, leftMargin: number, width: number) {
     this.isStartAnimateTo = true;
-    animateTo({
+    this.getUIContext().animateTo({
       duration: duration, // duration
       curve: Curve.Linear, // curve
       iterations: 1, // iterations