diff --git a/AppScope/app.json5 b/AppScope/app.json5
index 8272f273572a94d26c303d6267f36f759ffb6e64..713962d85cdce5622bb1cf6b297413697ebc2c10 100644
--- a/AppScope/app.json5
+++ b/AppScope/app.json5
@@ -4,7 +4,7 @@
     "vendor": "example",
     "versionCode": 1000000,
     "versionName": "1.0.0",
-    "icon": "$media:app_icon",
+    "icon": "$media:layered_image",
     "label": "$string:app_name"
   }
 }
diff --git a/AppScope/resources/base/element/string.json b/AppScope/resources/base/element/string.json
index e5adf926884b2f20f1300c79edc417d9fe555f8a..832bfd1f29ae1536b91590475c9043d8f69474e5 100644
--- a/AppScope/resources/base/element/string.json
+++ b/AppScope/resources/base/element/string.json
@@ -2,7 +2,7 @@
   "string": [
     {
       "name": "app_name",
-      "value": "multiTicketClass"
+      "value": "MultiStockCategoryApplication"
     }
   ]
 }
diff --git a/AppScope/resources/base/media/app_icon.png b/AppScope/resources/base/media/app_icon.png
deleted file mode 100644
index cd45accb1dfd2fd0da16c732c72faa6e46b26521..0000000000000000000000000000000000000000
Binary files a/AppScope/resources/base/media/app_icon.png and /dev/null differ
diff --git a/AppScope/resources/base/media/background.png b/AppScope/resources/base/media/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..923f2b3f27e915d6871871deea0420eb45ce102f
Binary files /dev/null and b/AppScope/resources/base/media/background.png differ
diff --git a/AppScope/resources/base/media/foreground.png b/AppScope/resources/base/media/foreground.png
new file mode 100644
index 0000000000000000000000000000000000000000..97014d3e10e5ff511409c378cd4255713aecd85f
Binary files /dev/null and b/AppScope/resources/base/media/foreground.png differ
diff --git a/AppScope/resources/base/media/layered_image.json b/AppScope/resources/base/media/layered_image.json
new file mode 100644
index 0000000000000000000000000000000000000000..fb49920440fb4d246c82f9ada275e26123a2136a
--- /dev/null
+++ b/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/LICENSE b/LICENSE
index 338e5b0bc22082e0ffcc7121c2ed3897a3ddccb0..18795a48d6b12fcdc1aa7bac9a9cb99f83815267 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,4 +1,4 @@
-   Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved.
+   Copyright (c) 2025 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.
diff --git a/README.en.md b/README.en.md
deleted file mode 100644
index 79da9c002bc0c3178837067243aabc1d1db62740..0000000000000000000000000000000000000000
--- a/README.en.md
+++ /dev/null
@@ -1,75 +0,0 @@
-## Responsive Layouts for Stock Trading Apps Across Devices
-
-### Overview
-
-This sample shows how to use the grid layout and **List** component to create responsive content layouts for stock trading apps across devices, such as smartphones, foldable screens, and tablets.
-
-### Preview
-
-Below are the preview effects.
-
-**Tab adaptive centering**
-
-| Smartphone                             | Foldable Screen (Unfolded)             | Tablet、PC/2in1                            |
-|----------------------------------------|----------------------------------------|----------------------------------------|
-| ![](screenshots/Devices/image1.en.png) | ![](screenshots/Devices/image2.en.png) | ![](screenshots/Devices/image3.en.png) |
-
-**Adaptive table extension**
-
-| Smartphone                             | Foldable Screen (Unfolded)             | Tablet、PC/2in1                                 |
-|----------------------------------------|----------------------------------------|----------------------------------------|
-| ![](screenshots/Devices/image4.en.png) | ![](screenshots/Devices/image5.en.png) | ![](screenshots/Devices/image6.en.png) |
-
-**Adaptive centering of two tabs**
-
-| Smartphone                             | Foldable Screen (Unfolded)             | Tablet、PC/2in1                                 |
-|----------------------------------------|----------------------------------------|----------------------------------------|
-| ![](screenshots/Devices/image7.en.png) | ![](screenshots/Devices/image8.en.png) | ![](screenshots/Devices/image9.en.png) |
-
-### How to Use
-
-You can view the page effect in the Previewer of DevEco Studio or on the device.
-
-### Project Directory
-
-```
-├──entry/src/main/ets                             // Code
-│  ├──constants                                  
-│  │  ├──CommonConstants.ets                       // Common constants
-│  │  └──ListDataConstants.ets                     // List data constants
-│  ├──entryability  
-│  │  └──EntryAbility.ets 
-│  ├──pages  
-│  │  ├──AdaptiveTabCenteringIndex.ets             // Tab layout that adapts and centers itself based on the screen size.
-│  │  ├──DoubleTabAdaptiveCenteringIndex.ets       // Tab layout that allows two sets of tabs to be centered and adapt to different screen sizes
-│  │  ├──Index.ets                                 // Home page                                 
-│  │  └──TableAdaptiveExtensionIndex.ets           // Implementation of tables that extend and adapt based on the screen size.
-│  └──utils
-│     ├──BreakpointType.ets                        // Breakpoint types 
-│     └──Logger.ets                                // Logging utility        
-└──entry/src/main/resources                        // Resources of the app
-
-```
-
-### How to Implement
-
-* Use the grid layout to listen for breakpoint changes. Use different spacing between subcomponents of different breakpoint list components. Set **justifyContent** of the Flex layout to **FlexAlign.Center** to implement center alignment and adaptive stretching.
-* Use the **Blank** component to implement adaptive stretching of spaces in the middle.
-
-### Required Permissions
-
-N/A
-
-### Dependencies
-
-N/A
-
-### Constraints
-
-1. The sample app is supported on Huawei phones, tablets, and PC/2in1 running the standard system.
-
-2. The HarmonyOS version must be HarmonyOS 5.0.0 Release or later.
-
-3. The DevEco Studio version must be DevEco Studio 5.0.0 Release or later.
-
-4. The HarmonyOS SDK version must be HarmonyOS 5.0.0 Release SDK or later.
diff --git a/README.md b/README.md
index b273202386431bea541131256aeb028234c96910..3f354e4583507b1f5c5a40d7ba9b23a6f7e5ff10 100644
--- a/README.md
+++ b/README.md
@@ -1,60 +1,95 @@
-## 一次开发，多端部署-股票应用
+# 一次开发，多端部署-股票交易
 
 ### 介绍
 
-本示例主要使用栅格布局和List组件相结合的方式，实现了股票类差异化的多场景响应式变化效果。
+本篇Sample基于自适应布局和响应式布局，实现一次开发，多端部署的股票类应用。根据不同的设备尺寸（手机、折叠屏、平板），实现了相应的页面布局。该Sample支持在折叠屏、平板和2in1设备上分屏显示，便于股票对比。
 
 ### 效果预览
 
-本示例在预览器中的效果：
+本示例分为两个页面和两个弹框：
 
-**tab自适应居中**:
+**自选首页**:
 
-| 手机                                 | 折叠屏（展开态）                       | 平板、PC/2in1                             |
-|-------------------------------------|-------------------------------------|-------------------------------------|
-| ![](screenshots/Devices/image1.png) | ![](screenshots/Devices/image2.png) | ![](screenshots/Devices/image3.png) |
+| 手机                                 | 折叠屏（展开态）                           | 平板                        |
+|------------------------------------|------------------------------------|-----------------------------------|
+| ![](screenshots/devices/home-page-phone.png) | ![](screenshots/devices/home-page-foldablescre.png) | ![](screenshots/devices/home-page-tablet.png) |
 
-**表格自适应延伸**:
+**股票详情页**:
 
-| 手机                                 | 折叠屏（展开态）                       | 平板、PC/2in1                                |
-|-------------------------------------|-------------------------------------|-------------------------------------|
-| ![](screenshots/Devices/image4.png) | ![](screenshots/Devices/image5.png) | ![](screenshots/Devices/image6.png) |
+| 手机                                 | 折叠屏（展开态）                           | 平板（全屏）                             |
+|------------------------------------|------------------------------------|------------------------------------|
+| ![](screenshots/devices/detail-page-phone.png) | ![](screenshots/devices/detail-page-foldablescre.png) | ![](screenshots/devices/detail-page-tablet.png) |
 
-**双tab自适应居中**:
+**应用分屏**:
 
-| 手机                                 | 折叠屏（展开态）                       | 平板、PC/2in1                                 |
-|-------------------------------------|-------------------------------------|-------------------------------------|
-| ![](screenshots/Devices/image7.png) | ![](screenshots/Devices/image8.png) | ![](screenshots/Devices/image9.png) |
+| 手机  | 折叠屏（展开态）                           | 平板（全屏）                             |
+|-----|------------------------------------|------------------------------------|
+| 不涉及 | ![](screenshots/devices/split-screen-foldablescre.png) | ![](screenshots/devices/split-screen-tablet.png) |
+
+**买入股票弹窗**:
+
+| 手机                                 | 折叠屏（展开态）                           | 平板                                  |
+|------------------------------------|------------------------------------|-------------------------------------|
+| ![](screenshots/devices/stock-pop-phone.png) | ![](screenshots/devices/stock-pop-foldablescre.png) | ![](screenshots/devices/stock-pop-tablet.png) |
+
+**确认买入股票弹窗**:
+
+| 手机                                 | 折叠屏（展开态）                           | 平板                                  |
+|------------------------------------|------------------------------------|-------------------------------------|
+| ![](screenshots/devices/stock-affirm-pop-phone.png) | ![](screenshots/devices/stock-affirm-pop-foldablescre.png) | ![](screenshots/devices/stock-affirm-pop-tablet.png) |
 
 使用说明：
 
-1.可以在预览器中查看页面效果，也可在对应设备上查看页面效果。
+* 自选首页
+
+  1. 自选页面，点击任意股票，跳转到股票详情页。
+
+* 股票详情页
+
+  1. 折叠屏（展开态）或平板：点击页面右上角的“分屏”图标，应用进入分屏模式；
+  
+  2. 平板：右侧“内容区”页面，点击页面左上角的“放大”图标，应用进入全屏。全屏下，点击页面左上角的“返回”图标，应用退出全屏；
+  
+  3. 点击页面左上角的“去交易”按钮，页面弹出“买入股票弹窗”。当前弹框，点击“买入”按钮，弹出“确认买入股票弹窗”。
 
 ### 工程目录
 
 ```
 ├──entry/src/main/ets                              // 代码区
-│  ├──constants                                  
-│  │  ├──CommonConstants.ets                       // 常用常量
-│  │  └──ListDataConstants.ets                     // 列表数据常量
+│  ├──chartmodels
+│  │  ├──BarChartView.ets                          // 柱状图组件逻辑 
+│  │  ├──ChartAxisFormatter.ets                    // 折线图数据格式化 
+│  │  └──LineChartModel.ets                        // 折线图组件逻辑  
 │  ├──entryability  
-│  │  └──EntryAbility.ets 
+│  │  └──EntryAbility.ets                          // 程序入口
+│  ├──entrybackupability  
+│  │  └──EntryBackupAbility.ets                    // 数据备份恢复类
+│  ├──models 
+│  │  └──DataModel.ets                             // 股票类数据
 │  ├──pages  
-│  │  ├──AdaptiveTabCenteringIndex.ets             // tab自适应居中页
-│  │  ├──DoubleTabAdaptiveCenteringIndex.ets       // 双tab自适应居中页 
-│  │  ├──Index.ets                                 // 首页                                  
-│  │  └──TableAdaptiveExtensionIndex.ets           // 表格自适应延伸页
-│  └──utils
-│     ├──BreakpointType.ets                        // 断点类型 
-│     └──Logger.ets                                // 日志        
+│  │  ├──Index.ets                                 // 应用首页
+│  │  ├──OptionPage.ets                            // 自选页                               
+│  │  └──StockDetailsPage.ets                      // 股票详情页
+│  ├──utils                              
+│  │  ├──BreakpointType.ets                        // 断点类
+│  │  └──Logger.ets                                // 日志
+│  └──views
+│     ├──BuyPopUp.ets                              // 买入弹窗组件 
+│     ├──CommonView.ets                            // 公共组件 
+│     ├──RegularWayPopUp.ets                       // 普通交易弹窗组件 
+│     ├──StockDealDetails.ets                      // 股票详情组件 
+│     ├──StockDetailsInfo.ets                      // 股票详情信息组件 
+│     ├──StockDetailsView.ets                      // 股票详情页组件 
+│     ├──StockTable.ets                            // 股票表格列表组件 
+│     └──TopTitleBar.ets                           // 股票详情页顶部标题栏     
 └──entry/src/main/resources                        // 应用资源目录
 
 ```
 
 ### 具体实现
 
-* 使用栅格布局监听断点变化，不同断点List组件的子组件间隔不同，同时设置Flex布局的justifyContent属性为FlexAlign.Center，实现居中对齐自适应拉伸。
-* 使用Blank组件实现中间空格自适应拉伸。
+* 使用UIAbilityContext.startAbility()方法实现应用内分屏功能。
+* 根据不同断点或状态改变navigation的mode属性，实现单栏和三栏的切换效果。
 
 ### 相关权限
 
@@ -66,10 +101,10 @@
 
 ### 约束与限制
 
-1. 本示例仅支持标准系统上运行，支持设备：华为手机、平板、PC/2in1。
+1. 本示例仅支持标准系统上运行，支持设备：华为手机，折叠屏，平板。
 
-2. HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。
+2. HarmonyOS系统：HarmonyOS 5.0.5 Release及以上。
 
-3. DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。
+3. DevEco Studio版本：DevEco Studio 5.0.5 Release及以上。
 
-4. HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。
+4. HarmonyOS SDK版本：HarmonyOS 5.0.5 Release SDK及以上。
\ No newline at end of file
diff --git a/build-profile.json5 b/build-profile.json5
index c033ce4278fb0641d84107c3c134047ac487368e..9e87e7e6f19020fe21192844709f192cec80fd44 100644
--- a/build-profile.json5
+++ b/build-profile.json5
@@ -5,8 +5,15 @@
       {
         "name": "default",
         "signingConfig": "default",
-        "compatibleSdkVersion": "5.0.0(12)",
+        "targetSdkVersion": "5.0.5(17)",
+        "compatibleSdkVersion": "5.0.5(17)",
         "runtimeOS": "HarmonyOS",
+        "buildOption": {
+          "strictMode": {
+            "caseSensitiveCheck": true,
+            "useNormalizedOHMUrl": true
+          }
+        }
       }
     ],
     "buildModeSet": [
diff --git a/entry/build-profile.json5 b/entry/build-profile.json5
index 197e83c1b9504b12a3837e0189185479662cad4b..0311b505dbf43f0d22662c8d783c5f4464d15b15 100644
--- a/entry/build-profile.json5
+++ b/entry/build-profile.json5
@@ -1,9 +1,6 @@
 {
   "apiType": "stageMode",
   "buildOption": {
-    "arkOptions": {
-      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
-    }
   },
   "buildOptionSet": [
     {
@@ -11,7 +8,7 @@
       "arkOptions": {
         "obfuscation": {
           "ruleOptions": {
-            "enable": true,
+            "enable": false,
             "files": [
               "./obfuscation-rules.txt"
             ]
@@ -23,9 +20,6 @@
   "targets": [
     {
       "name": "default"
-    },
-    {
-      "name": "ohosTest",
     }
   ]
 }
\ No newline at end of file
diff --git a/entry/obfuscation-rules.txt b/entry/obfuscation-rules.txt
index a1dfa0bd175984dc49e641436aa67b1de1b8abeb..272efb6ca3f240859091bbbfc7c5802d52793b0b 100644
--- a/entry/obfuscation-rules.txt
+++ b/entry/obfuscation-rules.txt
@@ -2,7 +2,7 @@
 # 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
+#   https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/source-obfuscation-V5
 
 # Obfuscation options:
 # -disable-obfuscation: disable all obfuscations
@@ -16,6 +16,7 @@
 # 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
diff --git a/entry/src/main/ets/chartmodels/BarChartView.ets b/entry/src/main/ets/chartmodels/BarChartView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..29d0d005c6cf829c6b88363e1c6a8a10b2316da1
--- /dev/null
+++ b/entry/src/main/ets/chartmodels/BarChartView.ets
@@ -0,0 +1,158 @@
+/*
+ * Copyright (c) 2025 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 {
+  BarChart,
+  BarChartModel,
+  BarData,
+  BarDataSet,
+  BarEntry,
+  ChartColor,
+  ChartGesture,
+  ChartPixelMap,
+  Description,
+  EntryOhos,
+  Highlight,
+  IBarDataSet,
+  JArrayList,
+  Legend,
+  OnChartGestureListener,
+  OnChartValueSelectedListener,
+  XAxis,
+  YAxis
+} from '@ohos/mpchart';
+import Logger from '../utils/Logger';
+
+@Component
+export struct BarChartView {
+  private model: BarChartModel | undefined = undefined;
+  private leftAxis: YAxis | null = null;
+  private rightAxis: YAxis | null = null;
+  private xAxis: XAxis | null = null;
+  private data: BarData | null = null;
+  private pixelMap: ChartPixelMap = new ChartPixelMap();
+  private valueSelectedListener: OnChartValueSelectedListener = {
+    onValueSelected: (e: EntryOhos, h: Highlight) => {
+      Logger.info(`ValueSelectedListener onValueSelected EntryOhos:${e}, Highlight:${h}`);
+    },
+    onNothingSelected: () => {
+      Logger.info('ValueSelectedListener onNothingSelected');
+    }
+  }
+  private chartGestureListener: OnChartGestureListener = {
+    onChartGestureStart: (isTouchEvent: boolean, me: TouchEvent | GestureEvent,
+      lastPerformedGestureMode: ChartGesture) => {
+      Logger.info(`ChartGestureListener onChartGestureStart isTouchEvent:${isTouchEvent}, me:${me}, lastPerformedGestureMode:${lastPerformedGestureMode}`);
+    },
+    onChartGestureEnd: (isTouchEvent: boolean, me: TouchEvent | GestureEvent,
+      lastPerformedGestureMode: ChartGesture) => {
+      Logger.info(`ChartGestureListener onChartGestureEnd isTouchEvent:${isTouchEvent}, me:${me}, lastPerformedGestureMode:${lastPerformedGestureMode}`);
+    },
+    onChartLongPressed: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
+      Logger.info(`ChartGestureListener onChartLongPressed isTouchEvent:${isTouchEvent}, me:${me}`);
+    },
+    onChartDoubleTapped: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
+      Logger.info(`ChartGestureListener onChartDoubleTapped isTouchEvent:${isTouchEvent}, me:${me}`);
+    },
+    onChartSingleTapped: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
+      Logger.info(`ChartGestureListener onChartSingleTapped isTouchEvent:${isTouchEvent}, me:${me}`);
+    },
+    onChartFling: (isTouchEvent: boolean, me1: TouchEvent | GestureEvent, me2: TouchEvent, velocityX: number,
+      velocityY: number) => {
+      Logger.info(`ChartGestureListener onChartSingleTapped isTouchEvent:${isTouchEvent}, me1:${me1}, me2:${me2}, velocityX:${velocityX}, velocityY:${velocityY}`);
+    },
+    onChartScale: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, scaleX: number, scaleY: number) => {
+      Logger.info(`ChartGestureListener onChartSingleTapped isTouchEvent:${isTouchEvent}, me:${me}, scaleX:${scaleX}, scaleY:${scaleY}`);
+    },
+    onChartTranslate: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, dX: number, dY: number) => {
+      Logger.info(`ChartGestureListener onChartSingleTapped isTouchEvent:${isTouchEvent}, me:${me}, dX:${dX}, dY:${dY}`);
+    },
+    onChartMove: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
+      Logger.info(`ChartGestureListener onChartSingleTapped isTouchEvent:${isTouchEvent}, me:${me}`);
+    }
+  }
+
+  async aboutToAppear() {
+    this.model = new BarChartModel();
+    this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
+    this.model.setOnChartGestureListener(this.chartGestureListener);
+    this.model.setDragEnabled(true); // Disable sliding.
+    this.model.setScaleEnabled(false); // Disable zooming.
+    let description: Description | null = this.model.getDescription()
+    if (description) {
+      description.setEnabled(true);
+      description.setText('');
+    }
+    let legend: Legend | null = this.model.getLegend();
+    if (legend) {
+      legend.setEnabled(false);
+    }
+    // if more than 40 entries are displayed in the this.model, no values will be drawn
+    this.model.setMaxVisibleValueCount(110);
+    // scaling can now only be done on x- and y-axis separately
+    this.model.setPinchZoom(false);
+    this.model.setDrawGridBackground(false);
+    this.model.setGridBackgroundColor('#500000ff')
+    this.model.setDrawBarShadow(false);
+    this.model.setDrawValueAboveBar(false);
+    this.model.setHighlightFullBarEnabled(false);
+    // change the position of the y-labels
+    this.leftAxis = this.model.getAxisLeft();
+    if (this.leftAxis) {
+      this.leftAxis.setAxisMinimum(0);
+      this.leftAxis.setDrawLimitLinesBehindData(false);
+    }
+    this.rightAxis = this.model.getAxisRight();
+    if (this.rightAxis) {
+      this.rightAxis.setEnabled(false);
+      this.rightAxis.setAxisMinimum(0);
+    }
+    if (this.leftAxis) {
+      this.leftAxis.setEnabled(false);
+    }
+    this.xAxis = this.model.getXAxis();
+    if (this.xAxis) {
+      this.xAxis.setEnabled(false);
+    }
+
+    this.data = await this.getNormalData();
+    this.model.setData(this.data);
+    this.model.setVisibleXRangeMaximum(110);
+  }
+
+  private async getNormalData(): Promise<BarData> {
+    let values: JArrayList<BarEntry> = new JArrayList<BarEntry>();
+    for (let index = 0; index < 110; index++) {
+      values.add(new BarEntry(index, Math.floor(Math.random() * 100) + 1, this.pixelMap));
+    }
+    let dataSet: BarDataSet = new BarDataSet(values, '');
+    dataSet.setDrawIcons(false);
+    dataSet.setColorsByVariable([ChartColor.rgb(29, 183, 117), ChartColor.rgb(29, 183, 117),
+      ChartColor.rgb(250, 67, 55), ChartColor.rgb(250, 67, 55)]);
+    let dataSetList: JArrayList<IBarDataSet> = new JArrayList<IBarDataSet>();
+    dataSetList.add(dataSet);
+    let barData: BarData = new BarData(dataSetList);
+    barData.setBarWidth(0.85);
+    return barData;
+  }
+
+  build() {
+    Column() {
+      Column() {
+        BarChart({ model: this.model })
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/chartmodels/ChartAxisFormatter.ets b/entry/src/main/ets/chartmodels/ChartAxisFormatter.ets
new file mode 100644
index 0000000000000000000000000000000000000000..15485085d702e9eba9dcaceab9a80d14e0c2888a
--- /dev/null
+++ b/entry/src/main/ets/chartmodels/ChartAxisFormatter.ets
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2025 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 { 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): string {
+    let xAxis = this.xAxis.get(value);
+    if (xAxis) {
+      return xAxis;
+    }
+    return '';
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/chartmodels/LineChartModel.ets b/entry/src/main/ets/chartmodels/LineChartModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f6d3cc37713c3640cd9e442a6ee478abb49786ff
--- /dev/null
+++ b/entry/src/main/ets/chartmodels/LineChartModel.ets
@@ -0,0 +1,186 @@
+/*
+ * Copyright (c) 2025 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,
+  YAxisLabelPosition,
+  ChartColorStop,
+  Legend,
+  Description
+} from '@ohos/mpchart';
+import { ChartAxisFormatter } from './ChartAxisFormatter';
+
+class LinesChartModel {
+  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(['#ECEEFB', 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 other = this.initRandomValue(count);
+    let set2 = new LineDataSet(other, '');
+    set2.setDrawFilled(false);
+    set2.setDrawValues(false);
+    set2.setColorByColor(0xFE8F00);
+    set2.setLineWidth(1)
+    set2.setDrawCircles(false);
+    dataSet.add(set2);
+
+    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.
+   */
+  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, '09:30');
+      xMap.set(22, '11:30 / 13:00');
+      xMap.set(44, '15:00');
+      this.xAxis.setValueFormatter(new ChartAxisFormatter(xMap));
+      this.xAxis.setAxisLineColor(Color.White);
+    }
+
+    this.leftAxis = this.lineChartModel.getAxisLeft();
+    if (this.leftAxis) {
+      let maxy = Math.ceil(this.maxValue);
+      let miny = Math.floor(this.minValue)
+      this.leftAxis.setLabelCount(3, false);
+      this.leftAxis.setPosition(YAxisLabelPosition.INSIDE_CHART);
+      this.leftAxis.setSpaceTop(0);
+      this.leftAxis.setAxisMaximum(maxy + 0.1);
+      this.leftAxis.setAxisMinimum(miny - 0.1);
+      this.leftAxis.setDrawGridLines(false);
+      this.leftAxis.setDrawAxisLine(true);
+      let yMap: HashMap<number, string> = new HashMap();
+      yMap.set(miny, '18.01');
+      yMap.set(0, '20.01');
+      yMap.set(maxy, '22.01');
+      this.leftAxis.setValueFormatter(new ChartAxisFormatter(yMap));
+      this.leftAxis.setAxisLineColor(Color.White);
+    }
+
+    this.rightAxis = this.lineChartModel.getAxisRight();
+    if (this.rightAxis) {
+      let maxy = Math.ceil(this.maxValue);
+      let miny = Math.floor(this.minValue)
+      this.rightAxis.setPosition(YAxisLabelPosition.INSIDE_CHART);
+      this.rightAxis.setDrawGridLines(false);
+      this.rightAxis.setDrawAxisLine(false);
+      this.rightAxis.setDrawLabels(false);
+      this.rightAxis.setAxisMaximum(maxy + 0.1);
+      this.rightAxis.setAxisMinimum(miny - 0.1);
+      this.rightAxis.setAxisLineColor(Color.White);
+    }
+
+    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);
+    this.lineChartModel.setDragEnabled(true); // Disable sliding.
+    this.lineChartModel.setScaleEnabled(false); // Disable zooming.
+    return this.lineChartModel;
+  }
+}
+
+export default new LinesChartModel();
\ No newline at end of file
diff --git a/entry/src/main/ets/constants/CommonConstants.ets b/entry/src/main/ets/constants/CommonConstants.ets
deleted file mode 100644
index f554fcb02e3fd8c9c8c2dd5fb209d3c0f7131067..0000000000000000000000000000000000000000
--- a/entry/src/main/ets/constants/CommonConstants.ets
+++ /dev/null
@@ -1,144 +0,0 @@
-/*
- * 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.
- */
-
-/**
- * Common constants for all features.
- */
-export class CommonConstants {
-  /**
-   * 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> = ['300', '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;
-
-  /**
-   * Tab adaptive padding sm.
-   */
-  static readonly TAB_PADDING_SM: string = '18vp';
-
-  /**
-   * Tab adaptive padding md.
-   */
-  static readonly TAB_PADDING_MD: string = '33vp';
-
-  /**
-   * Tab adaptive padding lg.
-   */
-  static readonly TAB_PADDING_LG: string = '63vp';
-
-  /**
-   * Double tab adaptive padding sm.
-   */
-  static readonly DOUBLE_TAB_PADDING_SM: string = '16vp';
-
-  /**
-   * Double tab adaptive padding md.
-   */
-  static readonly DOUBLE_TAB_PADDING_MD1: string = '61vp';
-
-  /**
-   * Double tab adaptive padding lg.
-   */
-  static readonly DOUBLE_TAB_PADDING_LG1: string = '71vp';
-
-  /**
-   * Double tab adaptive padding md.
-   */
-  static readonly DOUBLE_TAB_PADDING_MD2: string = '70vp';
-
-  /**
-   * Double tab adaptive padding lg.
-   */
-  static readonly DOUBLE_TAB_PADDING_LG2: string = '67vp';
-
-  /**
-   * The full percentage of component.
-   */
-  static readonly FULL_WIDTH_PERCENT: string = '100%';
-
-  /**
-   * The ninety percent of the components.
-   */
-  static readonly NINETY_PERCENT: string = '90%';
-
-  /**
-   * The eighty percent.
-   */
-  static readonly EIGHTY_PERCENT: string = '80%';
-
-  /**
-   * The fifty percent.
-   */
-  static readonly FIFTY_PERCENT: string = '50%';
-
-  /**
-   * Common font weight.
-   */
-  static readonly FONT_WEIGHT_500: number = 500;
-
-  /**
-   * Border radius.
-   */
-  static readonly BORDER_RADIUS: number = 16;
-
-  /**
-   * Common flexShrink and layoutWeight.
-   */
-  static readonly COMMON_FAL_1: number = 1;
-
-  /**
-   * Text font size.
-   */
-  static readonly TEXT_FONT_SIZE: number = 10;
-
-  /**
-   * Gray font flag.
-   */
-  static readonly GRAY_FONT_FLAG: string = 'Gray';
-
-  /**
-   * Red font flag.
-   */
-  static readonly RED_FONT_FLAG: string = 'Red';
-}
\ No newline at end of file
diff --git a/entry/src/main/ets/constants/ListDataConstants.ets b/entry/src/main/ets/constants/ListDataConstants.ets
deleted file mode 100644
index a08b5f37d3fff01121d23e24161879280f3fde82..0000000000000000000000000000000000000000
--- a/entry/src/main/ets/constants/ListDataConstants.ets
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * 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.
- */
-
-/**
- * List data constants for all features.
- */
-
-const uiContext: UIContext | undefined = AppStorage.get('uiContext');
-let context = uiContext!.getHostContext()!;
-
-export class ListDataConstants {
-  /**
-   * Tab adaptive uri.
-   */
-  static readonly TAB_ADAPTIVE_URI: string = 'AdaptiveTabCenteringIndex';
-
-  /**
-   * Table adaptive uri.
-   */
-  static readonly TABLE_ADAPTIVE_URI: string = 'TableAdaptiveExtensionIndex';
-
-  /**
-   * Double tab adaptive uri.
-   */
-  static readonly DOUBLE_TAB_ADAPTIVE_URI: string = 'DoubleTabAdaptiveCenteringIndex';
-
-  /**
-   * Recommendation tab list.
-   */
-  static readonly RECOMMENDATION_TAB_LIST: string[] =
-    context.resourceManager.getStringArrayValueSync($r('app.strarray.recommendation_tab_list').id);
-
-  /**
-   * Stock options tab list 1.
-   */
-  static readonly STOCK_OPTIONS_LIST1: string[] =
-    getContext(this).resourceManager.getStringArrayValueSync($r('app.strarray.stock_options_list1').id);
-
-  /**
-   * Stock options tab list 2.
-   */
-  static readonly STOCK_OPTIONS_LIST2: string[] =
-    context.resourceManager.getStringArrayValueSync($r('app.strarray.stock_options_list2').id);
-
-  /**
-   * Indicator name list.
-   */
-  static readonly INDICATOR_NAME_LIST: string[] =
-    context.resourceManager.getStringArrayValueSync($r('app.strarray.indicator_name_list').id);
-
-  /**
-   * Indicator name column.
-   */
-  static readonly INDICATOR_NAME_COLUMN: string[] =
-    context.resourceManager.getStringArrayValueSync($r('app.strarray.indicator_name_column').id);
-
-  /**
-   * Stock index data 1.
-   */
-  static readonly STOCK_INDEX_DATA1: string[] = ['',
-    context.resourceManager.getStringSync($r('app.string.computer').id),
-    '19.86', '5.15%', '171.54'];
-
-  /**
-   * Stock index data 2.
-   */
-  static readonly STOCK_INDEX_DATA2: string[] = ['',
-    context.resourceManager.getStringSync($r('app.string.computer').id),
-    '19.86', '10.02%', '95.58'];
-
-  /**
-   * Stock index data 3.
-   */
-  static readonly STOCK_INDEX_DATA3: string[] = ['',
-    context.resourceManager.getStringSync($r('app.string.computer').id),
-    '19.86', '10.02%', '95.58'];
-}
\ No newline at end of file
diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets
index 329817e5835c51431932b2e94cd4f7c0f2001b6a..77c17fe3a7746bde7d825e9bb0ba49b332d8d4f4 100644
--- a/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/entry/src/main/ets/entryability/EntryAbility.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Copyright (c) 2025 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
@@ -13,71 +13,109 @@
  * limitations under the License.
  */
 
-import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
-import { hilog } from '@kit.PerformanceAnalysisKit';
-import { display, window } from '@kit.ArkUI';
-import { CommonConstants } from '../constants/CommonConstants';
+import { ConfigurationConstant, UIAbility } from '@kit.AbilityKit';
+import { resourceManager } from '@kit.LocalizationKit';
+import { BusinessError } from '@kit.BasicServicesKit';
+import { window } from '@kit.ArkUI';
+import Logger from '../utils/Logger';
 
 export default class EntryAbility extends UIAbility {
-  private windowObj?: window.Window;
+  private uiContext?: UIContext;
+  private onWindowSizeChange: (windowSize: window.Size) => void = () => {
+    let widthBp: WidthBreakpoint = this.uiContext!.getWindowWidthBreakpoint();
+    AppStorage.setOrCreate('currentWidthBreakpoint', widthBp);
+    let heightBp: HeightBreakpoint = this.uiContext!.getWindowHeightBreakpoint();
+    AppStorage.setOrCreate('currentHeightBreakpoint', heightBp);
+  };
+  private windowStatusChange: (WindowStatusType: window.WindowStatusType) => void =
+    (WindowStatusType: window.WindowStatusType) => {
+      if (WindowStatusType === 4 || WindowStatusType === 5) {
+        AppStorage.setOrCreate('isSplitScreen', true);
+      } else if (WindowStatusType === 1) {
+        AppStorage.setOrCreate('isSplitScreen', false);
+      } else {
+        Logger.info('Succeeded in enabling the listener for window status changes. Data: ' + WindowStatusType);
+      }
+    };
 
-  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
+  onCreate(): void {
+    Logger.info('EntryAbility', '%{public}s', 'Ability onCreate');
+    AppStorage.setOrCreate('systemColorMode', this.context.config.colorMode);
+    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
   }
 
   onDestroy(): void {
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
+    Logger.info('EntryAbility', '%{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);
-      });
-    })
-
+    Logger.info('EntryAbility', '%{public}s', 'Ability onWindowStageCreate');
+    let context = this.context;
+    let resourceManager: resourceManager.ResourceManager = context.resourceManager;
+    AppStorage.setOrCreate('resourceManager', resourceManager);
     windowStage.loadContent('pages/Index', (err, data) => {
       if (err.code) {
-        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+        Logger.error('EntryAbility', '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) ?? '');
+      Logger.info('EntryAbility', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
+      let windowClass: window.Window = windowStage.getMainWindowSync();
 
-      let uiContext:  UIContext | undefined = windowStage.getMainWindowSync().getUIContext()
-      AppStorage.setOrCreate('uiContext', uiContext);
-    });
-  }
+      // Immersive Adaptation
+      this.immersionFuc(windowStage);
 
-  private updateBreakpoint(windowWidth: number): void {
-    let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels;
-    let curBp: string = '';
-    if (windowWidthVp < Number(CommonConstants.BREAK_POINTS_VALUE[1])) {
-      curBp = CommonConstants.BREAK_POINT_SM;
-    } else if (windowWidthVp < Number(CommonConstants.BREAK_POINTS_VALUE[2])) {
-      curBp = CommonConstants.BREAK_POINT_MD;
-    } else {
-      curBp = CommonConstants.BREAK_POINT_LG;
-    }
-    AppStorage.setOrCreate('breakPoint', curBp);
+      const isWindowAvailable = canIUse('SystemCapability.Window.SessionManager');
+      if (isWindowAvailable) {
+        // Determine the current application window mode.
+        // 1: Full-screen split-screen mode, 5: Split-screen mode, 4: Panoramic multi-window mode
+        try {
+          windowClass.on('windowStatusChange', this.windowStatusChange);
+        } catch (exception) {
+          Logger.error(`Failed to unregister callback. Cause code: ${exception.code}, message: ${exception.message}`);
+        }
+      } else {
+        Logger.info('Window not by this device.');
+      }
+      windowStage.getMainWindow().then((data: window.Window) => {
+        this.uiContext = data.getUIContext();
+        let widthBp: WidthBreakpoint = this.uiContext.getWindowWidthBreakpoint();
+        let heightBp: HeightBreakpoint = this.uiContext.getWindowHeightBreakpoint();
+        AppStorage.setOrCreate('currentWidthBreakpoint', widthBp);
+        AppStorage.setOrCreate('currentHeightBreakpoint', heightBp);
+        data.on('windowSizeChange', this.onWindowSizeChange);
+      }).catch((err: BusinessError) => {
+        Logger.error(`Failed to obtain the main window. Cause code: ${err.code}, message: ${err.message}`);
+      });
+    });
   }
 
   onWindowStageDestroy(): void {
     // Main window is destroyed, release UI related resources
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+    Logger.info('EntryAbility', '%{public}s', 'Ability onWindowStageDestroy');
   }
 
   onForeground(): void {
     // Ability has brought to foreground
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
+    Logger.info('EntryAbility', '%{public}s', 'Ability onForeground');
   }
 
   onBackground(): void {
     // Ability has back to background
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
+    Logger.info('EntryAbility', '%{public}s', 'Ability onBackground');
+  }
+
+  /**
+   * Page immersion.
+   */
+  immersionFuc(windowStage: window.WindowStage): void {
+    let windowClass: window.Window = windowStage.getMainWindowSync();
+    windowClass.setWindowLayoutFullScreen(true);
+    let navigationBarArea: window.AvoidArea =
+      windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
+    let area: window.AvoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
+    AppStorage.setOrCreate<number>('naviIndicatorHeight', windowClass.getUIContext().px2vp(navigationBarArea.bottomRect.height));
+    AppStorage.setOrCreate<number>('statusBarHeight', windowClass.getUIContext().px2vp(area.topRect.height));
+    AppStorage.setOrCreate<window.Window>('windowClass', windowClass);
   }
-}
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/entrybackupability/EntryBackupAbility.ets b/entry/src/main/ets/entrybackupability/EntryBackupAbility.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e01665b06fa225db979c544b8caffb495d99a2eb
--- /dev/null
+++ b/entry/src/main/ets/entrybackupability/EntryBackupAbility.ets
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2025 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 { BackupExtensionAbility, BundleVersion } from '@kit.CoreFileKit';
+import Logger from '../utils/Logger';
+
+export default class EntryBackupAbility extends BackupExtensionAbility {
+  async onBackup() {
+    Logger.info('EntryBackupAbility', 'onBackup ok');
+    await Promise.resolve();
+  }
+
+  async onRestore(bundleVersion: BundleVersion) {
+    Logger.info('EntryBackupAbility', 'onRestore ok %{public}s', JSON.stringify(bundleVersion));
+    await Promise.resolve();
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/models/DataModel.ets b/entry/src/main/ets/models/DataModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ec259fd980adf23987d6a31356badce095d2e12f
--- /dev/null
+++ b/entry/src/main/ets/models/DataModel.ets
@@ -0,0 +1,192 @@
+/*
+ * Copyright (c) 2025 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 ShareIndex {
+  title: ResourceStr;
+  index: string;
+  priceLimit: string;
+
+  constructor(title: ResourceStr, index: string, priceLimit: string) {
+    this.title = title;
+    this.index = index;
+    this.priceLimit = priceLimit;
+  }
+}
+
+export class StockForm {
+  title: ResourceStr; // Stock Name
+  stockNumber: ResourceStr; // Stock Number
+  latestPrice: number; // Latest Price
+  highsAndLows: number; // HighLow
+  priceLimit: ResourceStr; // Price Limit
+  gross: ResourceStr; // Gross
+  impressions: ResourceStr; // Impressions
+  plate: ResourceStr // Stock sector
+  plateFontColor: ResourceColor; // Font color of the stock section
+  plateBackgroundColor: ResourceColor; // Background color of the stock section
+  volumeTransaction: ResourceStr; // volume of transaction
+  amplitude: ResourceStr; // Amplitude
+  changeHands: ResourceStr; // Change Hands
+  PEG: number; // P/E ratio (price-to-earnings ratio)
+  PB: number; // PB(price/book value ratio)
+
+  constructor(title: ResourceStr, stockNumber: ResourceStr, latestPrice: number, highsAndLows: number,
+    priceLimit: ResourceStr, gross: ResourceStr, impressions: ResourceStr, plate: ResourceStr,
+    plateFontColor: ResourceColor, plateBackgroundColor: ResourceColor, volumeTransaction: ResourceStr,
+    amplitude: ResourceStr, changeHands: ResourceStr, PEG: number, PB: number) {
+    this.title = title;
+    this.stockNumber = stockNumber;
+    this.latestPrice = latestPrice;
+    this.highsAndLows = highsAndLows;
+    this.priceLimit = priceLimit;
+    this.gross = gross;
+    this.impressions = impressions;
+    this.plate = plate;
+    this.plateFontColor = plateFontColor;
+    this.plateBackgroundColor = plateBackgroundColor;
+    this.volumeTransaction = volumeTransaction;
+    this.amplitude = amplitude;
+    this.changeHands = changeHands;
+    this.PEG = PEG;
+    this.PB = PB;
+  }
+}
+
+export class StockInForm {
+  title1: ResourceStr;
+  value1: ResourceStr;
+  color1: ResourceStr;
+  title2: ResourceStr;
+  value2: ResourceStr;
+  color2: ResourceStr;
+  title3: ResourceStr;
+  value3: ResourceStr;
+  color3: ResourceStr;
+
+  constructor(
+    title1: ResourceStr, value1: ResourceStr, color1: ResourceStr,
+    title2: ResourceStr, value2: ResourceStr, color2: ResourceStr,
+    title3: ResourceStr, value3: ResourceStr, color3: ResourceStr
+  ) {
+    this.title1 = title1;
+    this.value1 = value1;
+    this.color1 = color1;
+    this.title2 = title2;
+    this.value2 = value2;
+    this.color2 = color2;
+    this.title3 = title3;
+    this.value3 = value3;
+    this.color3 = color3;
+  }
+}
+
+export class transactionDetails {
+  title: ResourceStr;
+  price: string;
+  amount: number;
+
+  constructor(title: ResourceStr, price: string, amount: number) {
+    this.title = title;
+    this.price = price;
+    this.amount = amount;
+  }
+}
+
+export const SHARE_INDEX: ShareIndex[] = [
+  new ShareIndex($r('app.string.certain_index'), '3088.10', '+19.8 +0.64%'),
+  new ShareIndex($r('app.string.deep_number'), '3088.10', '+19.8 -0.64%'),
+  new ShareIndex($r('app.string.science_technology'), '3088.10', '+19.8 +0.64%'),
+  new ShareIndex($r('app.string.certain_index'), '3088.10', '+19.8 -0.64%'),
+  new ShareIndex($r('app.string.deep_number'), '3088.10', '+19.8 +0.64%')
+];
+
+export const STOCK_FORM: StockForm[] = [
+  new StockForm($r('app.string.somebody_technology'), '60**39', 904, +0.04, '+0.53%', '310511', '1232',
+    $r('app.string.securities_margin_trading'), '#9801FF', '#F4E3FD', '12.5', '8.88%', '18.81%', 123, 1.5),
+  new StockForm($r('app.string.certain_estate_company'), '60**19', 182104, +3.04, '+0.19%', '30176', '550',
+    $r('app.string.securities_margin_trading'), '#9801FF', '#F4E3FD', '15.5', '8.98%', '15.81%', 112, 1.1),
+  new StockForm($r('app.string.certain_pharmaceutical_company'), '30**89', 1520, -0.16, '-1.04%', '19593', '3461',
+    $r('app.string.growth_enterprise_market'), '#FF5501', '#FFEEE5', '13.5', '6.58%', '19.81%', 116, 1.9),
+  new StockForm($r('app.string.somebody_technology'), '60**99', 2001, +3.04, '+0.19%', '7071', '4890',
+    $r('app.string.securities_margin_trading'), '#9801FF', '#F4E3FD', '10.5', '8.86%', '13.81%', 105, 1.5),
+  new StockForm($r('app.string.certain_estate_company'), '30**59', 2432, -0.16, '-1.04%', '6953', '1321',
+    $r('app.string.growth_enterprise_market'), '#FF5501', '#FFEEE5', '19.9', '6.88%', '12.81%', 108, 1.2)
+];
+
+export const STOCK_INFORM_LIST: StockInForm[] = [
+  new StockInForm($r('app.string.now_begins'), '19.86', '#FA4337', $r('app.string.yesterday_close'), '19.84', '#000000',
+    $r('app.string.turnover_rate'), '0.39%', '#000000'),
+  new StockInForm($r('app.string.tallest'), '19.86', '#FA4337', $r('app.string.lowest'), '19.84', '#1DB775',
+    $r('app.string.PEG'), '95.32', '#000000'),
+  new StockInForm($r('app.string.turnover'), $r('app.string.text_hands'), '#000000',
+    $r('app.string.volume_transaction'), $r('app.string.turnover_value'), '#000000', $r('app.string.total_value'),
+    $r('app.string.text_billion'), '#000000'),
+  new StockInForm($r('app.string.now_begins'), '19.86', '#FA4337', $r('app.string.yesterday_close'), '19.84', '#000000',
+    $r('app.string.turnover_rate'), '0.39%', '#000000')
+];
+
+export const CYCLE_TITLE: ResourceStr[] = [
+  $r('app.string.time_share'), $r('app.string.five_days'), $r('app.string.daily_k'), $r('app.string.week_k'),
+  $r('app.string.month_k'), $r('app.string.season_k'), $r('app.string.half_year_k'), $r('app.string.year_k')
+];
+
+export const OTHER_TITLE: ResourceStr[] = [
+  $r('app.string.discussion'), $r('app.string.must_read'), $r('app.string.research_report'),
+  $r('app.string.capital'), $r('app.string.datum'), $r('app.string.announcements'),
+  $r('app.string.finance'), $r('app.string.information'), $r('app.string.related_fund')
+];
+
+export const SELL_SHARES: transactionDetails[] = [
+  new transactionDetails($r('app.string.sell'), '20.10', 69),
+  new transactionDetails($r('app.string.sell'), '20.09', 12),
+  new transactionDetails($r('app.string.sell'), '20.08', 66),
+  new transactionDetails($r('app.string.sell'), '20.07', 55),
+  new transactionDetails($r('app.string.sell'), '20.06', 33)
+];
+
+export const BUY_SELL_SHARES: transactionDetails[] = [
+  new transactionDetails($r('app.string.text_buy'), '20.05', 11),
+  new transactionDetails($r('app.string.text_buy'), '20.04', 22),
+  new transactionDetails($r('app.string.text_buy'), '20.03', 33),
+  new transactionDetails($r('app.string.text_buy'), '20.02', 55),
+  new transactionDetails($r('app.string.text_buy'), '20.01', 66)
+];
+
+export const SUBMISSION_TIME: transactionDetails[] = [
+  new transactionDetails('10:02', '20.07', 11),
+  new transactionDetails('10:02', '20.07', 22),
+  new transactionDetails('10:02', '20.07', 33),
+  new transactionDetails('10:02', '20.08', 55),
+  new transactionDetails('10:02', '20.08', 66),
+
+  new transactionDetails('10:01', '20.07', 33),
+  new transactionDetails('10:01', '20.07', 22),
+  new transactionDetails('10:01', '20.07', 66),
+  new transactionDetails('10:01', '20.07', 99),
+  new transactionDetails('10:01', '20.07', 77),
+
+  new transactionDetails('10:00', '20.06', 33),
+  new transactionDetails('10:00', '20.06', 22),
+  new transactionDetails('10:00', '20.06', 66),
+  new transactionDetails('10:00', '20.05', 99),
+  new transactionDetails('10:00', '20.05', 77)
+];
+
+export const STOCK_TITLE: Resource[] = [
+  $r('app.string.stock_name'), $r('app.string.latest_price'), $r('app.string.highs_and_lows'),
+  $r('app.string.price_limit'), $r('app.string.gross'), $r('app.string.impressions'),
+  $r('app.string.volume_transaction'), $r('app.string.amplitude'), $r('app.string.change_hands'),
+  $r('app.string.PEG'), $r('app.string.PB')
+];
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/AdaptiveTabCenteringIndex.ets b/entry/src/main/ets/pages/AdaptiveTabCenteringIndex.ets
deleted file mode 100644
index 2d5023d473e271133532b28729a924c367ce7a8a..0000000000000000000000000000000000000000
--- a/entry/src/main/ets/pages/AdaptiveTabCenteringIndex.ets
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * 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.
- */
-// [Start adaptive_tab_centering_index]
-import { ListDataConstants } from '../constants/ListDataConstants';
-import { CommonConstants } from '../constants/CommonConstants';
-import { BreakpointType } from '../utils/BreakpointType';
-
-@Component
-export struct AdaptiveTabCenteringIndex {
-  @StorageLink('breakPoint') breakPoint: string = CommonConstants.BREAK_POINT_SM;
-  @Consume('pageInfos') pageInfos: NavPathStack;
-  @State tabIndexSelected: number = 0;
-
-  build() {
-    NavDestination() {
-      Column() {
-        // [StartExclude adaptive_tab_centering_index]
-        Row() {
-          Image($r('app.media.icon_back'))
-            .width($r('app.float.image_width'))
-            .height($r('app.float.image_height'))
-            .onClick(() => {
-              this.pageInfos.pop();
-            })
-        }
-        .width(CommonConstants.FULL_WIDTH_PERCENT)
-        .margin({
-          left: $r('app.float.back_margin_left'),
-          top: $r('app.float.back_margin_top')
-        })
-        .justifyContent(FlexAlign.Start)
-        // [EndExclude adaptive_tab_centering_index]
-        Column() {
-          Row() {
-            Column() {
-              List({
-                space: new BreakpointType(CommonConstants.TAB_PADDING_SM, CommonConstants.TAB_PADDING_MD,
-                  CommonConstants.TAB_PADDING_LG).getValue(this.breakPoint)
-              }) {
-                ForEach(ListDataConstants.RECOMMENDATION_TAB_LIST, (item: string, index: number) => {
-                  ListItem() {
-                    Column() {
-                      Text(item)
-                        // [StartExclude adaptive_tab_centering_index]
-                        .fontSize($r('app.float.font_size_16'))
-                        .fontWeight(CommonConstants.FONT_WEIGHT_500)
-                        .fontColor(this.tabIndexSelected === index ? $r('app.color.red') : $r('app.color.black'))
-                        .height($r('app.float.text_height'))
-                        .focusable(true)
-                        .groupDefaultFocus(index === 0 ? true : false)
-                      // [EndExclude adaptive_tab_centering_index]
-                    }
-                  }
-                  // [StartExclude adaptive_tab_centering_index]
-                  .margin({
-                    top: $r('app.float.recommendation_margin_top'),
-                    bottom: $r('app.float.recommendation_margin_bottom')
-                  })
-                  .border({
-                    width: {
-                      bottom: this.tabIndexSelected === index ?
-                      $r('app.float.bottom_width_2') : $r('app.float.bottom_width_0')
-                    },
-                    color: {
-                      bottom: this.tabIndexSelected === index ? $r('app.color.red') : ''
-                    },
-                    style: {
-                      bottom: BorderStyle.Solid
-                    }
-                  })
-                  .onClick(() => {
-                    this.tabIndexSelected = index;
-                  })
-                  // [EndExclude adaptive_tab_centering_index]
-                }, (item: string, index: number) => index + JSON.stringify(item))
-              }
-              .scrollBar(BarState.Off)
-              .listDirection(Axis.Horizontal)
-            }
-            // [StartExclude adaptive_tab_centering_index]
-            .width($r('app.float.width_296'))
-            .height($r('app.float.height_56'))
-            .backgroundColor($r('app.color.adaptive_tab_background'))
-            .justifyContent(FlexAlign.Center)
-            .alignItems(HorizontalAlign.Center)
-            // [EndExclude adaptive_tab_centering_index]
-            .layoutWeight(CommonConstants.COMMON_FAL_1)
-          }
-          // [StartExclude adaptive_tab_centering_index]
-          .height($r('app.float.height_56'))
-          .width(CommonConstants.FULL_WIDTH_PERCENT)
-          // [EndExclude adaptive_tab_centering_index]
-        }
-        // [StartExclude adaptive_tab_centering_index]
-        .height(CommonConstants.NINETY_PERCENT)
-        .justifyContent(FlexAlign.Center)
-        // [EndExclude adaptive_tab_centering_index]
-      }
-    }
-    .hideTitleBar(true)
-  }
-}
-// [End adaptive_tab_centering_index]
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/DoubleTabAdaptiveCenteringIndex.ets b/entry/src/main/ets/pages/DoubleTabAdaptiveCenteringIndex.ets
deleted file mode 100644
index 26b3abe82965b258f2a41b12653f5dd5d054ff39..0000000000000000000000000000000000000000
--- a/entry/src/main/ets/pages/DoubleTabAdaptiveCenteringIndex.ets
+++ /dev/null
@@ -1,179 +0,0 @@
-/*
- * 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 { ListDataConstants } from '../constants/ListDataConstants';
-import { CommonConstants } from '../constants/CommonConstants';
-import { BreakpointType } from '../utils/BreakpointType';
-
-@Component
-export struct DoubleTabAdaptiveCenteringIndex {
-  @StorageLink('breakPoint') breakPoint: string = CommonConstants.BREAK_POINT_SM;
-  @Consume('pageInfos') pageInfos: NavPathStack;
-  @State tabIndexSelected: number = 0;
-  @State tabIndexSelected2: number = 0;
-
-  build() {
-    NavDestination() {
-      Column() {
-        Row() {
-          Image($r('app.media.icon_back'))
-            .width($r('app.float.image_width'))
-            .height($r('app.float.image_height'))
-            .onClick(() => {
-              this.pageInfos.pop();
-            })
-        }
-        .width(CommonConstants.FULL_WIDTH_PERCENT)
-        .margin({
-          left: $r('app.float.back_margin_left'),
-          top: $r('app.float.back_margin_top')
-        })
-        .justifyContent(FlexAlign.Start)
-
-        Column() {
-          // [Start double_tab_adaptive_centering_index]
-          Row() {
-            Column() {
-              List({
-                space: new BreakpointType(CommonConstants.DOUBLE_TAB_PADDING_SM, CommonConstants.DOUBLE_TAB_PADDING_MD1,
-                  CommonConstants.DOUBLE_TAB_PADDING_LG1).getValue(this.breakPoint)
-              }) {
-                ForEach(ListDataConstants.STOCK_OPTIONS_LIST1, (item: string, index: number) => {
-                  ListItem() {
-                    Column() {
-                      Text(item)
-                        // [StartExclude double_tab_adaptive_centering_index]
-                        .fontSize($r('app.float.font_size_16'))
-                        .fontWeight(CommonConstants.FONT_WEIGHT_500)
-                        .fontColor(this.tabIndexSelected === index ? $r('app.color.red') : $r('app.color.black'))
-                        .height($r('app.float.text_height'))
-                        .focusable(true)
-                        .groupDefaultFocus(index === 0 ? true : false)
-                      // [EndExclude double_tab_adaptive_centering_index]
-                    }
-                  }
-                  // [StartExclude double_tab_adaptive_centering_index]
-                  .margin({ top: $r('app.float.stock_options_margin') })
-                  .border({
-                    width: {
-                      bottom: this.tabIndexSelected === index ?
-                      $r('app.float.bottom_width_2') : $r('app.float.bottom_width_0')
-                    },
-                    color: {
-                      bottom: this.tabIndexSelected === index ? $r('app.color.red') : ''
-                    },
-                    style: {
-                      bottom: BorderStyle.Solid
-                    }
-                  })
-                  .onClick(() => {
-                    this.tabIndexSelected = index;
-                  })
-                  // [EndExclude double_tab_adaptive_centering_index]
-                }, (item: string, index: number) => index + JSON.stringify(item))
-
-                ListItem() {
-                  Image($r('app.media.ic_public_more'))
-                    // [StartExclude double_tab_adaptive_centering_index]
-                    .width($r('app.float.image_width'))
-                    .height($r('app.float.image_height'))
-                  // [EndExclude double_tab_adaptive_centering_index]
-                }
-                // [StartExclude double_tab_adaptive_centering_index]
-                .margin({ top: $r('app.float.more_margin_top') })
-                .visibility(this.breakPoint === CommonConstants.BREAK_POINT_LG ? Visibility.Visible : Visibility.Hidden)
-                // [EndExclude double_tab_adaptive_centering_index]
-              }
-              .scrollBar(BarState.Off)
-              .listDirection(Axis.Horizontal)
-            }
-            .width($r('app.float.width_296'))
-            // [StartExclude double_tab_adaptive_centering_index]
-            .height($r('app.float.height_56'))
-            .margin({ left: $r('app.float.stock_column_margin') })
-            .justifyContent(FlexAlign.Center)
-            .alignItems(HorizontalAlign.Center)
-            .layoutWeight(CommonConstants.COMMON_FAL_1)
-
-            Image($r('app.media.ic_public_more'))
-              .width($r('app.float.image_width'))
-              .height($r('app.float.image_height'))
-              .margin({
-                left: $r('app.float.more_margin_left'),
-                right: $r('app.float.more_margin_right')
-              })
-              .visibility(this.breakPoint === CommonConstants.BREAK_POINT_LG ? Visibility.Hidden : Visibility.Visible)
-            // [EndExclude double_tab_adaptive_centering_index]
-          }
-          // [StartExclude double_tab_adaptive_centering_index]
-          .width(CommonConstants.FULL_WIDTH_PERCENT)
-          .height($r('app.float.height_56'))
-          // [EndExclude double_tab_adaptive_centering_index]
-          // [End double_tab_adaptive_centering_index]
-          Row() {
-            Column() {
-              List({
-                space: new BreakpointType(CommonConstants.DOUBLE_TAB_PADDING_SM, CommonConstants.DOUBLE_TAB_PADDING_MD2,
-                  CommonConstants.DOUBLE_TAB_PADDING_LG2).getValue(this.breakPoint)
-              }) {
-                ForEach(ListDataConstants.STOCK_OPTIONS_LIST2, (item: string, index: number) => {
-                  ListItem() {
-                    Column() {
-                      Text(item)
-                        .fontSize($r('app.float.font_size_14'))
-                        .fontWeight(CommonConstants.FONT_WEIGHT_500)
-                        .fontColor(
-                          this.tabIndexSelected2 === index ? $r('app.color.selected_text_color') : $r('app.color.black')
-                        )
-                        .margin({
-                          top: $r('app.float.text_margin_top_and_bottom'),
-                          bottom: $r('app.float.text_margin_top_and_bottom'),
-                          left: $r('app.float.text_margin_left_and_right'),
-                          right: $r('app.float.text_margin_left_and_right')
-                        })
-                        .textAlign(TextAlign.Center)
-                        .focusable(true)
-                        .groupDefaultFocus(index === 0 ? true : false)
-                    }
-                  }
-                  .backgroundColor(
-                    this.tabIndexSelected2 === index ? $r('app.color.selected_text_background') :
-                    $r('app.color.text_background')
-                  )
-                  .border({ radius: CommonConstants.BORDER_RADIUS })
-                  .onClick(() => {
-                    this.tabIndexSelected2 = index;
-                  })
-                }, (item: string, index: number) => index + JSON.stringify(item))
-              }
-              .scrollBar(BarState.Off)
-              .listDirection(Axis.Horizontal)
-            }
-            .width($r('app.float.width_296'))
-            .height($r('app.float.height_56'))
-            .justifyContent(FlexAlign.Center)
-            .alignItems(HorizontalAlign.Center)
-            .layoutWeight(CommonConstants.COMMON_FAL_1)
-          }
-          .height($r('app.float.height_56'))
-          .width(CommonConstants.FULL_WIDTH_PERCENT)
-        }
-        .height(CommonConstants.NINETY_PERCENT)
-        .justifyContent(FlexAlign.Center)
-      }
-    }
-    .hideTitleBar(true)
-  }
-}
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets
index 75fb8f941c729216626f4d2ff2f9d15d86c5391b..4286613393eb0eac48b2262fbc55fececd1d1cd8 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Copyright (c) 2025 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
@@ -13,99 +13,155 @@
  * limitations under the License.
  */
 
-import { CommonConstants } from '../constants/CommonConstants';
-import { ListDataConstants } from '../constants/ListDataConstants';
-import { AdaptiveTabCenteringIndex } from './AdaptiveTabCenteringIndex';
-import { TableAdaptiveExtensionIndex } from './TableAdaptiveExtensionIndex';
-import { DoubleTabAdaptiveCenteringIndex } from './DoubleTabAdaptiveCenteringIndex';
-
-class DirectoryItem {
-  title: ResourceStr = '';
-  uri: string = '';
-  id: string = '';
-}
+import { BreakpointType } from '../utils/BreakpointType';
+import { StockDetailsPage } from './StockDetailsPage';
+import { OptionPage } from './OptionPage';
 
 @Entry
 @Component
 struct Index {
-  @StorageLink('breakPoint') breakPoint: string = CommonConstants.BREAK_POINT_SM;
-  @Provide('pageInfos') pageInfos : NavPathStack = new NavPathStack();
-  private title: string | Resource = $r('app.string.title');
-  private directory: DirectoryItem[] = [
-    {
-      title: $r('app.string.tab_adaptive'),
-      uri: ListDataConstants.TAB_ADAPTIVE_URI,
-      id: 'AdaptiveTabCenteringIndex'
-    },
-    {
-      title: $r('app.string.table_adaptive'),
-      uri: ListDataConstants.TABLE_ADAPTIVE_URI,
-      id: 'TableAdaptiveExtensionIndex'
-    },
-    {
-      title: $r('app.string.double_tab_adaptive'),
-      uri: ListDataConstants.DOUBLE_TAB_ADAPTIVE_URI,
-      id: 'DoubleTabAdaptiveCenteringIndex'
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: number = 1;
+  @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: number = 1;
+  @StorageLink('isSplitScreen') isSplitScreen: boolean = false;
+  @StorageLink('sharesHeldNumber') sharesHeldNumber: number = 0;
+  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack();
+  @Provide('tabletMode') tabletMode: NavigationMode = NavigationMode.Split;
+  @State currentTabIndex: number = 2;
+  @State backgroundImageY: number = 0;
+
+  @Builder
+  pageMap(pageName: string): void {
+    if (pageName === 'StockDetailsPage') {
+      StockDetailsPage();
+    }
+  }
+
+  getTabBarColor(index: number, currentTabIndex: number, breakPoint: number): ResourceColor {
+    if (this.backgroundImageY < -20 && this.currentTabIndex === 0 && index === 0) {
+      return '#E53137';
+    } else if (index === 0 && breakPoint === 3) {
+      return currentTabIndex === index ? Color.White : '#33000000';
+    }
+    return currentTabIndex === index ? '#E53137' : '#33000000';
+  }
+
+  @Builder
+  BuildTabs(icon: Resource, title: ResourceStr, index: number): void {
+    Column() {
+      Image(icon)
+        .width(24)
+        .height(24)
+        .fillColor(this.getTabBarColor(index, this.currentTabIndex, this.currentWidthBreakpoint))
+      Text(title)
+        .fontSize(10)
+        .lineHeight(14)
+        .fontWeight(FontWeight.Medium)
+        .fontColor(this.getTabBarColor(index, this.currentTabIndex, this.currentWidthBreakpoint))
     }
-  ];
+  }
 
-  @Builder PageMap(name : string){
-    if(name === ListDataConstants.TAB_ADAPTIVE_URI){
-      AdaptiveTabCenteringIndex()
-    }else if(name === ListDataConstants.TABLE_ADAPTIVE_URI){
-      TableAdaptiveExtensionIndex()
-    }else{
-      DoubleTabAdaptiveCenteringIndex()
+  @Builder
+  BuildTabsMine(icon: Resource, unIcon: Resource, title: ResourceStr, index: number): void {
+    Column() {
+      Image(this.currentTabIndex === index ? icon : unIcon)
+        .width(24)
+        .height(24)
+      Text(title)
+        .fontSize(10)
+        .lineHeight(14)
+        .fontColor(this.getTabBarColor(index, this.currentTabIndex, this.currentWidthBreakpoint))
     }
   }
 
+  aboutToAppear(): void {
+    setTimeout(() => {
+      if (this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG) {
+        this.pageInfos.replacePathByName('StockDetailsPage', null, true);
+      }
+    }, 100);
+  }
+
   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_LG
-        }
+    Navigation(this.pageInfos) {
+      GridRow({
+        columns: {
+          sm: 4,
+          md: 8,
+          lg: 12
+        },
+        direction: GridRowDirection.Row
       }) {
-        Column() {
-          Navigation(this.pageInfos) {
-            Column() {
-              Text(this.title)
+        GridCol({
+          span: {
+            sm: 4,
+            md: 8,
+            lg: 12
+          }
+        }) {
+          Column() {
+            Tabs({
+              barPosition: new BreakpointType(BarPosition.End, BarPosition.End, BarPosition.Start)
+                .getValue(this.currentWidthBreakpoint),
+              index: 2
+            }) {
+              TabContent() {
+              }
+              .tabBar(this.BuildTabs($r('app.media.house_fill'), $r('app.string.home_page'), 0))
+              .backgroundColor(Color.White)
+
+              TabContent() {
+              }
+              .tabBar(this.BuildTabs($r('app.media.doc_text_fill'), $r('app.string.information'), 1))
+              .backgroundColor(Color.White)
+
+              TabContent() {
+                OptionPage()
+              }
+              .tabBar(this.BuildTabs($r('app.media.square_and_pencil_fill'), $r('app.string.optional'), 2))
+              .backgroundColor(Color.White)
 
-              ForEach(this.directory, (item: DirectoryItem) => {
-                Button(item.title)
-                  .id(item.id)
-                  .fontSize($r('app.float.font_size'))
-                  .width(CommonConstants.NINETY_PERCENT)
-                  .height($r('app.float.button_height'))
-                  .margin($r('app.float.button_margin'))
-                  .backgroundColor($r('app.color.button_background'))
-                  .onClick(() => {
-                    this.pageInfos.pushPath(new NavPathInfo(item.uri,[]));
-                  })
-              }, (item: DirectoryItem) => JSON.stringify(item))
+              TabContent() {
+              }
+              .tabBar(this.BuildTabs($r('app.media.doc_plaintext_fill'), $r('app.string.market'), 3))
+              .backgroundColor(Color.White)
             }
-            .width(CommonConstants.FULL_WIDTH_PERCENT)
+            .vertical(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG)
+            .barWidth(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG ? 96 : '100%')
+            .barHeight(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG ? '50%' : 56)
+            .backgroundImageSize(ImageSize.Contain)
+            .backgroundColor('#F3F4F5')
+            .scrollable(false)
+            .backgroundImagePosition({
+              y: this.backgroundImageY
+            })
+            .onChange((index: number) => {
+              if (this.currentWidthBreakpoint !== 3) {
+                this.currentTabIndex = index;
+              }
+            })
+            .onContentWillChange(() => {
+              if (this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG) {
+                return false;
+              }
+              return true;
+            })
+            .padding({
+              bottom: this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG ? 0 :
+                AppStorage.get<number>('naviIndicatorHeight') as number - 10
+            })
           }
-          .navDestination(this.PageMap)
-          .mode(NavigationMode.Stack)
-          .hideBackButton(true)
-          .titleMode(NavigationTitleMode.Mini)
-          .title(this.title)
+          .width('100%')
+          .height('100%')
         }
       }
     }
+    .navDestination(this.pageMap)
+    .navBarWidthRange([474, 474])
+    .mode(new BreakpointType(NavigationMode.Stack, NavigationMode.Stack, this.tabletMode)
+      .getValue(this.currentWidthBreakpoint))
+    .hideTitleBar(true)
+    .hideToolBar(true)
+    .height('100%')
+    .backgroundColor($r('sys.color.gray_01'))
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/OptionPage.ets b/entry/src/main/ets/pages/OptionPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..502790756e0a9f8bd7e362200062466b62a59253
--- /dev/null
+++ b/entry/src/main/ets/pages/OptionPage.ets
@@ -0,0 +1,219 @@
+/*
+ * Copyright (c) 2025 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 { ShareIndex, SHARE_INDEX } from '../models/DataModel';
+import { BreakpointType } from '../utils/BreakpointType';
+import { StockTable } from '../views/StockTable';
+
+@Component
+export struct OptionPage {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: number = 1;
+  @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: number = 1;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+
+  @Builder
+  ShareIndexBuilder(info: ShareIndex, index: number) {
+    Column() {
+      Text(info.title)
+        .lineHeight(16)
+        .fontSize(12)
+        .fontWeight(FontWeight.Regular)
+      Column() {
+        Text(info.index)
+          .lineHeight(21)
+          .fontSize(16)
+          .fontColor(index % 2 === 0 ? '#FA4337' : '#1DB775')
+          .fontWeight(FontWeight.Bold)
+        Text(info.priceLimit)
+          .lineHeight(10)
+          .fontSize(10)
+          .fontColor(index % 2 === 0 ? '#FA4337' : '#1DB775')
+          .fontWeight(FontWeight.Medium)
+      }
+      .height(32)
+    }
+    .width(new BreakpointType(78, 101, 96).getValue(this.currentWidthBreakpoint))
+    .height(73)
+    .borderRadius(8)
+    .justifyContent(FlexAlign.SpaceBetween)
+    .padding({
+      top: 10,
+      bottom: 12
+    })
+  }
+
+  build() {
+    Column() {
+      // Self-Selected Stock Top Headline
+      Row() {
+        Text($r('app.string.self_select_stock'))
+          .fontSize(24)
+          .height(32)
+          .fontWeight(700)
+      }
+      .width('100%')
+      .height(56)
+      .padding({
+        right: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint),
+        left: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint)
+      })
+
+      // List of stock indices
+      Row() {
+        List({
+          space: new BreakpointType(13, 14, 16).getValue(this.currentWidthBreakpoint),
+          initialIndex: 0
+        }) {
+          ForEach(SHARE_INDEX, (item: ShareIndex, index: number) => {
+            ListItem() {
+              this.ShareIndexBuilder(item, index)
+            }
+            .margin({
+              left: index === 0 ? new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint) : 0
+            })
+          }, (item: ShareIndex, index: number) => (item.priceLimit + index).toString())
+        }
+        .height(73)
+        .scrollBar(BarState.Off)
+        .listDirection(Axis.Horizontal)
+        .layoutWeight(1)
+
+        Row() {
+          Column() {
+            Text($r('app.string.stock_company'))
+              .lineHeight(16)
+              .fontSize(12)
+              .fontColor('#FA4337')
+              .fontWeight(FontWeight.Medium)
+              .padding({
+                bottom: 8
+              })
+            Column() {
+              Text($r('app.string.stock_text_start'))
+                .maxLines(1)
+                .fontSize(10)
+                .fontColor('#FA4337')
+                .margin({
+                  bottom: 2
+                })
+              Text($r('app.string.stock_text_end'))
+                .fontSize(10)
+                .fontColor('#FA4337')
+                .maxLines(1)
+            }
+            .height(32)
+          }
+          .justifyContent(FlexAlign.SpaceBetween)
+
+          SymbolGlyph($r('sys.symbol.chevron_right'))
+            .fontColor(['#FA4337'])
+            .fontSize(20)
+            .margin({
+              bottom: 40,
+              left: new BreakpointType(4, 12, 18).getValue(this.currentWidthBreakpoint)
+            })
+        }
+        .width(new BreakpointType(78, 101, 96).getValue(this.currentWidthBreakpoint))
+        .height(73)
+        .justifyContent(FlexAlign.Center)
+        .borderRadius(8)
+        .linearGradient({
+          direction: GradientDirection.Bottom, // Gradient Direction
+          repeating: true, // Does the gradient color repeat
+          colors: [['#FFF9F9', 0], ['#FFFAFA', 0.5], ['#FFFEFE', 0.7], ['#FFFFFF', 1]]
+        })
+        .margin({
+          right: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint)
+        })
+      }
+      .width('100%')
+      .height(71)
+      .justifyContent(FlexAlign.Center)
+      .alignItems(VerticalAlign.Center)
+
+      Blank()
+        .width('100%')
+        .height(1)
+        .backgroundColor($r('sys.color.gray_01'))
+
+      Column() {
+        Row() {
+          Column() {
+            Text($r('app.string.all'))
+              .fontSize(16)
+              .fontWeight(700)
+              .fontColor('#FA4337')
+              .height(21)
+              .focusable(true)
+          }
+          .border({
+            width: { bottom: 2 },
+            color: { bottom: '#FA4337' },
+            style: { bottom: BorderStyle.Solid }
+          })
+
+          Blank()
+          Row() {
+            SymbolGlyph($r('sys.symbol.rectangle_on_rectangle'))
+              .fontColor([$r('sys.color.icon_primary')])
+              .fontSize(24)
+              .margin({
+                right: 24
+              })
+            SymbolGlyph($r('sys.symbol.line_3_horizontal'))
+              .fontColor([$r('sys.color.icon_primary')])
+              .fontSize(24)
+          }
+        }
+        .width('100%')
+        .height(48)
+        .alignItems(VerticalAlign.Center)
+        .padding({
+          right: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint),
+          left: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint)
+        })
+
+        // Stock table list
+        StockTable()
+      }
+
+      // Add custom buttons
+      Row() {
+        Row() {
+          Text($r('app.string.add_custom_options'))
+            .fontSize(16)
+            .fontColor('#999999')
+        }
+        .justifyContent(FlexAlign.Center)
+        .alignItems(VerticalAlign.Center)
+        .borderColor('#E5E5E5')
+        .borderWidth(1)
+        .borderRadius(20)
+        .width(240)
+        .height(40)
+      }
+      .width('100%')
+      .justifyContent(FlexAlign.Center)
+      .margin({
+        top: 24
+      })
+    }
+    .width('100%')
+    .height('100%')
+    .padding({
+      top: AppStorage.get<number>('statusBarHeight')
+    })
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/StockDetailsPage.ets b/entry/src/main/ets/pages/StockDetailsPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..eb5f52d628ccdbaed595793eda72856a924a375d
--- /dev/null
+++ b/entry/src/main/ets/pages/StockDetailsPage.ets
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2025 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 { StockDetailsView } from '../views/StockDetailsView';
+
+@Component
+export struct StockDetailsPage {
+  build() {
+    StockDetailsView()
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/TableAdaptiveExtensionIndex.ets b/entry/src/main/ets/pages/TableAdaptiveExtensionIndex.ets
deleted file mode 100644
index 80242e56c6f4e017be6d72a34d9e265eee516b9d..0000000000000000000000000000000000000000
--- a/entry/src/main/ets/pages/TableAdaptiveExtensionIndex.ets
+++ /dev/null
@@ -1,182 +0,0 @@
-/*
- * 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 { ListDataConstants } from '../constants/ListDataConstants';
-import { CommonConstants } from '../constants/CommonConstants';
-
-@Component
-export struct TableAdaptiveExtensionIndex {
-  @StorageLink('breakPoint') breakPoint: string = CommonConstants.BREAK_POINT_SM;
-  @Consume('pageInfos') pageInfos: NavPathStack;
-  @State tabIndexSelected: number = 0;
-
-  @Builder
-  Item(item: string, index: number, color: string) {
-    Row() {
-      Text(item)
-        .maxLines(1)
-        .textOverflow({ overflow: TextOverflow.Ellipsis})
-        .fontSize($r('app.float.font_size_14'))
-        .fontWeight(CommonConstants.FONT_WEIGHT_500)
-        .fontColor(color === CommonConstants.GRAY_FONT_FLAG ? (index > 0 ? Color.Gray : Color.Black) :
-          ((index === 2 || index === 3) ? Color.Red : Color.Black))
-        .height($r('app.float.text_height'))
-    }
-    .flexShrink(CommonConstants.COMMON_FAL_1)
-  }
-
-  build() {
-    NavDestination() {
-      Column() {
-        Row() {
-          Image($r('app.media.icon_back'))
-            .width($r('app.float.image_width'))
-            .height($r('app.float.image_height'))
-            .onClick(() => {
-              this.pageInfos.pop();
-            })
-        }
-        .width(CommonConstants.FULL_WIDTH_PERCENT)
-        .margin({
-          left: $r('app.float.back_margin_left'),
-          top: $r('app.float.back_margin_top')
-        })
-        .justifyContent(FlexAlign.Start)
-
-        Row() {
-          if (this.breakPoint === CommonConstants.BREAK_POINT_LG) {
-            Column() {
-              // Left Placeholder Area
-            }
-            .width(CommonConstants.FIFTY_PERCENT)
-            .height(CommonConstants.FULL_WIDTH_PERCENT)
-            .border({
-              width: { right: 1 },
-              color: { right: Color.Gray },
-              style: { right: BorderStyle.Solid }
-            })
-          }
-          Column() {
-            // [Start table_adaptive_extension_index]
-            Row() {
-              Column() {
-                Row() {
-                  ForEach(ListDataConstants.INDICATOR_NAME_LIST, (item: string, index: number) => {
-                    // [StartExclude table_adaptive_extension_index]
-                    Column() {
-                      Row() {
-                        Text(item)
-                          .fontSize($r('app.float.font_size_14'))
-                          .fontWeight(CommonConstants.FONT_WEIGHT_500)
-                          .fontColor(Color.Black)
-                          .height($r('app.float.text_height'))
-                        Image(index > 0 ? $r('app.media.ic_public_right') : $r('app.media.ic_public_info'))
-                          .width($r('app.float.icon_size'))
-                          .height($r('app.float.icon_size'))
-                      }
-
-                      if (index > 0) {
-                        Text('60**39')
-                          .fontSize(CommonConstants.TEXT_FONT_SIZE)
-                          .fontWeight(CommonConstants.FONT_WEIGHT_500)
-                          .fontColor($r('app.color.text_font_color'))
-                          .height($r('app.float.text_height'))
-                      }
-                    }
-                    .flexShrink(CommonConstants.COMMON_FAL_1)
-                    .width(index === 0 ? $r('app.float.indicator_name_width') : 'auto')
-                    .alignItems(HorizontalAlign.Start)
-
-                    if (index < 3) {
-                      Blank()
-                    }
-
-                  }, (item: string, index: number) => index + JSON.stringify(item))
-                }
-                .height($r('app.float.indicator_name_height'))
-                .width(CommonConstants.FULL_WIDTH_PERCENT)
-                .justifyContent(FlexAlign.SpaceBetween)
-
-                Divider()
-                  .color($r('app.color.text_font_color'))
-
-                Row() {
-                  Column() {
-                    ForEach(ListDataConstants.INDICATOR_NAME_COLUMN, (item: string, index: number) => {
-                      this.Item(item, index, CommonConstants.GRAY_FONT_FLAG)
-                      // [EndExclude table_adaptive_extension_index]
-                    }, (item: string, index: number) => index + JSON.stringify(item))
-                  }
-                  .alignItems(HorizontalAlign.Start)
-
-                  Blank()
-
-                  Column() {
-                    ForEach(ListDataConstants.STOCK_INDEX_DATA1, (item: string, index: number) => {
-                      // [StartExclude table_adaptive_extension_index]
-                      this.Item(item, index, CommonConstants.RED_FONT_FLAG)
-                      // [EndExclude table_adaptive_extension_index]
-                    }, (item: string, index: number) => index + JSON.stringify(item))
-                  }
-                  .width($r('app.float.stock_data_width'))
-                  .alignItems(HorizontalAlign.End)
-
-                  Blank()
-
-                  Column() {
-                    ForEach(ListDataConstants.STOCK_INDEX_DATA2, (item: string, index: number) => {
-                      // [StartExclude table_adaptive_extension_index]
-                      this.Item(item, index, CommonConstants.RED_FONT_FLAG)
-                      // [EndExclude table_adaptive_extension_index]
-                    }, (item: string, index: number) => index + JSON.stringify(item))
-                  }
-                  .width($r('app.float.stock_data_width'))
-                  .alignItems(HorizontalAlign.End)
-
-                  Blank()
-
-                  Column() {
-                    ForEach(ListDataConstants.STOCK_INDEX_DATA3, (item: string, index: number) => {
-                      // [StartExclude table_adaptive_extension_index]
-                      this.Item(item, index, CommonConstants.RED_FONT_FLAG)
-                      // [EndExclude table_adaptive_extension_index]
-                    }, (item: string, index: number) => index + JSON.stringify(item))
-                  }
-                  .width($r('app.float.stock_data_width'))
-                  .alignItems(HorizontalAlign.End)
-                }
-                .width(CommonConstants.FULL_WIDTH_PERCENT)
-                // [StartExclude table_adaptive_extension_index]
-                .margin({ top: $r('app.float.indicator_name_margin') })
-                // [EndExclude table_adaptive_extension_index]
-              }
-            }
-            // [End table_adaptive_extension_index]
-          }
-          .height(CommonConstants.EIGHTY_PERCENT)
-          .width(this.breakPoint === CommonConstants.BREAK_POINT_LG ?
-          CommonConstants.FIFTY_PERCENT : CommonConstants.FULL_WIDTH_PERCENT)
-          .justifyContent(this.breakPoint === CommonConstants.BREAK_POINT_LG ? FlexAlign.End : FlexAlign.Center)
-          .padding({
-            left: $r('app.float.stock_data_margin'),
-            right: $r('app.float.stock_data_margin')
-          })
-        }
-        .width(CommonConstants.FULL_WIDTH_PERCENT)
-      }
-    }
-    .hideTitleBar(true)
-  }
-}
\ No newline at end of file
diff --git a/entry/src/main/ets/utils/BreakpointType.ets b/entry/src/main/ets/utils/BreakpointType.ets
index df1647a0ba181cc12f7abfc42e0201a0827f8654..222bb67424cfb08e74cd56b57d259014dc4df992 100644
--- a/entry/src/main/ets/utils/BreakpointType.ets
+++ b/entry/src/main/ets/utils/BreakpointType.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Copyright (c) 2025 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
@@ -24,11 +24,11 @@ export class BreakpointType<T> {
     this.lg = lg;
   }
 
-  getValue(currentBreakpoint: string): T {
-    if (currentBreakpoint === 'md') {
+  getValue(currentWidthBreakpoint: number): T {
+    if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_MD) {
       return this.md;
     }
-    if (currentBreakpoint === 'lg') {
+    if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG) {
       return this.lg;
     } else {
       return this.sm;
diff --git a/entry/src/main/ets/utils/Logger.ets b/entry/src/main/ets/utils/Logger.ets
index dfe8fcc155419eb67f401ac8624b0517cf74ae7a..254a85a2fbadec24747bd1b8a15aaa13f186f3a0 100644
--- a/entry/src/main/ets/utils/Logger.ets
+++ b/entry/src/main/ets/utils/Logger.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Copyright (c) 2025 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
@@ -20,26 +20,32 @@ class Logger {
   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[]) {
+  debug(...args: string[]): void {
     hilog.debug(this.domain, this.prefix, this.format, args);
   }
 
-  info(...args: string[]) {
+  info(...args: string[]): void {
     hilog.info(this.domain, this.prefix, this.format, args);
   }
 
-  warn(...args: string[]) {
+  warn(...args: string[]): void {
     hilog.warn(this.domain, this.prefix, this.format, args);
   }
 
-  error(...args: string[]) {
+  error(...args: string[]): void {
     hilog.error(this.domain, this.prefix, this.format, args);
   }
 }
 
-export default new Logger('[MultiTicketClass]');
\ No newline at end of file
+export default new Logger('MultiStockCategoryApplication');
\ No newline at end of file
diff --git a/entry/src/main/ets/views/BuyPopUp.ets b/entry/src/main/ets/views/BuyPopUp.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b9c227438eb5b3259595e5b73274f87e4e692b80
--- /dev/null
+++ b/entry/src/main/ets/views/BuyPopUp.ets
@@ -0,0 +1,136 @@
+/*
+ * Copyright (c) 2025 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 { UniversalIcon } from './CommonView';
+
+@Component
+export struct BuyPopUp {
+  @StorageLink('sharesHeldNumber') sharesHeldNumber: number = 0;
+  @Consume('isFirstBulletBox') isFirstBulletBox: boolean;
+  @Consume('popUpBoxIsShow') popUpBoxIsShow: boolean;
+  @Consume('currentStockPrice') currentStockPrice: number;
+  @Consume('purchaseQuantity') purchaseQuantity: number;
+  @Consume('buyIsShow') buyIsShow: boolean;
+
+  build() {
+    Column() {
+      Column({ space: 16 }) {
+        Row() {
+          Row() {
+            UniversalIcon({
+              icon: $r('sys.symbol.chevron_left'),
+              iconBackgroundColor: $r('sys.color.comp_background_tertiary')
+            })
+              .onClick(() => {
+                this.isFirstBulletBox = true;
+              })
+            Column() {
+              Text($r('app.string.buy'))
+                .fontSize(20)
+                .fontColor($r('sys.color.font_primary'))
+                .fontWeight(FontWeight.Bold)
+              Text($r('app.string.Stock_name_code'))
+                .fontSize(14)
+                .fontColor($r('sys.color.font_secondary'))
+            }
+            .alignItems(HorizontalAlign.Start)
+            .margin({
+              left: 8
+            })
+          }
+
+          UniversalIcon({
+            icon: $r('sys.symbol.xmark'),
+            iconBackgroundColor: $r('sys.color.comp_background_tertiary'),
+            fontSize: $r('sys.float.Title_S')
+          })
+            .onClick(() => {
+              this.sharesHeldNumber += this.purchaseQuantity;
+              this.purchaseQuantity = 100;
+              this.buyIsShow = false;
+              this.popUpBoxIsShow = false;
+              this.isFirstBulletBox = true;
+            })
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .width('100%')
+        .height(60)
+
+        Row() {
+          Text($r('app.string.shareholder_account'))
+        }
+        .width('100%')
+        .justifyContent(FlexAlign.Start)
+
+        Row() {
+          Text($r('app.string.commissioned_price'))
+          Text(this.currentStockPrice.toString())
+            .fontColor('#FA4337')
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .width('100%')
+        .height(48)
+        .backgroundColor(Color.White)
+        .borderRadius(16)
+        .padding({
+          right: 12,
+          left: 12
+        })
+
+        Row() {
+          Text($r('app.string.order_quantity'))
+          Text(this.purchaseQuantity.toString())
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .width('100%')
+        .height(48)
+        .backgroundColor(Color.White)
+        .borderRadius(16)
+        .padding({
+          right: 12,
+          left: 12
+        })
+      }
+      .width('100%')
+
+      Row() {
+        Text($r('app.string.confirm_purchase'))
+          .fontSize(16)
+          .fontColor('#E53137')
+      }
+      .width('100%')
+      .height(40)
+      .borderRadius(20)
+      .backgroundColor($r('sys.color.comp_background_tertiary'))
+      .justifyContent(FlexAlign.Center)
+      .onClick(() => {
+        this.sharesHeldNumber += this.purchaseQuantity;
+        this.purchaseQuantity = 100;
+        this.buyIsShow = false;
+        this.popUpBoxIsShow = false;
+        this.isFirstBulletBox = true;
+      })
+    }
+    .justifyContent(FlexAlign.SpaceBetween)
+    .width('100%')
+    .height('100%')
+    .padding({
+      top: 12,
+      right: 16,
+      left: 16,
+      bottom: 32
+    })
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/views/CommonView.ets b/entry/src/main/ets/views/CommonView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..cf6d60c99ce53229ad29ecddde505e37fe0ef21e
--- /dev/null
+++ b/entry/src/main/ets/views/CommonView.ets
@@ -0,0 +1,288 @@
+/*
+ * Copyright (c) 2025 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 { OTHER_TITLE, StockInForm } from '../models/DataModel';
+import { BreakpointType } from '../utils/BreakpointType';
+
+@Component
+export struct WordBackgroundComm {
+  public text: ResourceStr = '';
+  public textFontColor: ResourceColor = '';
+  public textBackgroundColor: ResourceColor = '';
+
+  build() {
+    Row() {
+      Text(this.text)
+        .fontSize(10)
+        .fontColor(this.textFontColor)
+    }
+    .width(12)
+    .height(12)
+    .borderRadius(2)
+    .alignItems(VerticalAlign.Center)
+    .justifyContent(FlexAlign.Center)
+    .backgroundColor(this.textBackgroundColor)
+    .margin({
+      right: 4
+    })
+  }
+}
+
+@Component
+export struct UniversalIcon {
+  public icon?: Resource;
+  public iconBackgroundColor: ResourceColor = '';
+  public fontSize?: ResourceColor = $r('sys.float.Title_M');
+
+  build() {
+    Button({ type: ButtonType.Circle }) {
+      SymbolGlyph(this.icon)
+        .fontColor([$r('sys.color.icon_primary')])
+        .fontSize(this.fontSize)
+    }
+    .height(40)
+    .aspectRatio(1)
+    .backgroundColor(this.iconBackgroundColor)
+  }
+}
+
+@Component
+export struct UniversalImage {
+  public icon?: Resource;
+  public iconBackgroundColor: ResourceColor = '';
+
+  build() {
+    Button({ type: ButtonType.Circle }) {
+      Image(this.icon)
+        .width($r('sys.float.Title_M'))
+        .height($r('sys.float.Title_M'))
+    }
+    .height(40)
+    .aspectRatio(1)
+    .backgroundColor(this.iconBackgroundColor)
+  }
+}
+
+@Component
+export struct StockDetails {
+  public title: ResourceStr = '';
+  public price: string = '';
+  public amount: number = 0;
+  public index: number = 0;
+  public isShowNumber: boolean = true;
+
+  build() {
+    Row() {
+      Text(this.title) {
+        Span(this.title)
+        if (this.isShowNumber) {
+          Span(this.index.toString())
+        }
+      }
+      .textType()
+      .fontColor('#666666')
+
+      Text(this.price)
+        .textType()
+        .fontColor(this.index % 2 === 0 ? '#FA4337' : '#1DB775')
+      Text(this.amount.toString())
+        .textType()
+        .fontColor('#666666')
+        .alignSelf(ItemAlign.End)
+    }
+    .width('100%')
+    .justifyContent(FlexAlign.SpaceBetween)
+  }
+}
+
+@Component
+export struct TitleIcon {
+  public icon?: Resource;
+  public title?: Resource;
+
+  build() {
+    Column() {
+      SymbolGlyph(this.icon)
+        .fontColor([$r('sys.color.icon_primary')])
+        .fontSize(24)
+      Text(this.title)
+        .fontSize(10)
+        .lineHeight(13)
+        .fontColor('#999999')
+        .margin({
+          top: 4
+        })
+    }
+    .width(40)
+    .height(42)
+    .justifyContent(FlexAlign.Center)
+    .alignItems(HorizontalAlign.Center)
+  }
+}
+
+@Component
+export struct TitleImage {
+  public icon?: Resource;
+  public title?: Resource;
+
+  build() {
+    Column() {
+      Image(this.icon)
+        .width(24)
+        .height(24)
+      Text(this.title)
+        .fontSize(10)
+        .lineHeight(13)
+        .fontColor('#999999')
+        .margin({
+          top: 4
+        })
+    }
+    .width(40)
+    .height(42)
+    .justifyContent(FlexAlign.Center)
+    .alignItems(HorizontalAlign.Center)
+  }
+}
+
+@Component
+export struct StockInFormList {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: number = 1;
+  public item?: StockInForm;
+  public index: number = 0;
+  @Consume('isExpand') isExpand: boolean;
+
+  build() {
+    Row() {
+      Column({ space: 3 }) {
+        Row() {
+          Text(this.item?.title1).textStocksTitle()
+          Text(this.item?.value1).fontColor(this.item?.color1).textStocksValue()
+        }
+        .textStocksTitleValue()
+
+        Row() {
+          Text(this.item?.title2).textStocksTitle()
+          Text(this.item?.value2).fontColor(this.item?.color2).textStocksValue()
+        }
+        .textStocksTitleValue()
+
+        Row() {
+          Text(this.item?.title3).textStocksTitle()
+          Text(this.item?.value3).fontColor(this.item?.color3).textStocksValue()
+        }
+        .textStocksTitleValue()
+      }
+      .padding({
+        right: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint),
+        left: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint)
+      })
+
+      Divider()
+        .vertical(true)
+        .height('85%')
+        .color('#979797')
+        .visibility(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM ?
+          ((this.index + 1) % 2 === 0 ? Visibility.Hidden : Visibility.Visible) :
+          this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_MD ?
+            ((this.index + 1) % 3 === 0 || this.index === 3 ? Visibility.Hidden : Visibility.Visible) :
+            ((this.index + 1) % 4 === 0 ? Visibility.Hidden : Visibility.Visible))
+    }
+    .width('100%')
+    .height(51)
+    .margin({
+      bottom: 6
+    })
+    .visibility(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM ?
+      ((this.index + 1) > 2 ? (!this.isExpand ? Visibility.None : Visibility.Visible) : Visibility.Visible) :
+      this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_MD ?
+        ((this.index + 1) > 3 ? (!this.isExpand ? Visibility.None : Visibility.Visible) : Visibility.Visible) :
+        ((this.index + 1) > 4 ? (!this.isExpand ? Visibility.None : Visibility.Visible) : Visibility.Visible))
+  }
+}
+
+@Component
+export struct CommSlide {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: number = 1;
+  @Prop tabIndexSelected: number = 0;
+  public commSlideData: ResourceStr[] = OTHER_TITLE;
+
+  build() {
+    List({
+      space: new BreakpointType(46, 90, 150).getValue(this.currentWidthBreakpoint)
+    }) {
+      ForEach(this.commSlideData, (item: string, index: number) => {
+        ListItem() {
+          Column() {
+            Text(item)
+              .fontSize(16)
+              .fontWeight(this.tabIndexSelected === index ? 700 : 400)
+              .fontColor(this.tabIndexSelected === index ? '#000000' : '#999999')
+              .height(21)
+              .focusable(true)
+              .groupDefaultFocus(index === 0 ? true : false)
+          }
+        }
+        .margin({
+          top: 9,
+          right: this.commSlideData.length === index + 1 ?
+            new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint) : 0,
+          left: index === 0 ? new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint) : 0,
+        })
+        .border({
+          width: {
+            bottom: this.tabIndexSelected === index ? 2 : 0
+          },
+          color: {
+            bottom: this.tabIndexSelected === index ? '#FA4337' : ''
+          },
+          style: {
+            bottom: BorderStyle.Solid
+          }
+        })
+        .onClick(() => {
+          this.tabIndexSelected = index;
+        })
+      }, (item: string, index: number) => (index + item).toString())
+    }
+    .scrollBar(BarState.Off)
+    .listDirection(Axis.Horizontal)
+  }
+}
+
+@Extend(Text)
+function textType() {
+  .fontWeight(FontWeight.Regular)
+  .fontSize(10)
+  .lineHeight(14)
+}
+
+@Extend(Text)
+function textStocksTitle() {
+  .fontSize(11)
+  .fontColor('#999999')
+}
+
+@Extend(Text)
+function textStocksValue() {
+  .fontSize(11)
+  .fontWeight(FontWeight.Medium)
+}
+
+@Extend(Row)
+function textStocksTitleValue() {
+  .width('100%')
+  .justifyContent(FlexAlign.SpaceBetween)
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/views/RegularWayPopUp.ets b/entry/src/main/ets/views/RegularWayPopUp.ets
new file mode 100644
index 0000000000000000000000000000000000000000..98169a5d7c66ca0990e61acb258e8bad474adb69
--- /dev/null
+++ b/entry/src/main/ets/views/RegularWayPopUp.ets
@@ -0,0 +1,179 @@
+/*
+ * Copyright (c) 2025 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 { CounterComponent, CounterType } from '@kit.ArkUI';
+import { BreakpointType } from '../utils/BreakpointType';
+import { UniversalIcon } from './CommonView';
+
+@Component
+export struct RegularWayPopUp {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: number = 1;
+  @StorageLink('sharesHeldNumber') sharesHeldNumber: number = 0;
+  @Consume('isFirstBulletBox') isFirstBulletBox: boolean;
+  @Consume('popUpBoxIsShow') popUpBoxIsShow: boolean;
+  @Consume('currentStockPrice') currentStockPrice: number;
+  @Consume('purchaseQuantity') purchaseQuantity: number;
+  @Consume('buyIsShow') buyIsShow: boolean;
+
+  build() {
+    Column() {
+      Column({ space: 16 }) {
+        Row() {
+          Text($r('app.string.regular_way'))
+            .fontSize(20)
+            .fontColor($r('sys.color.font_primary'))
+            .fontWeight(FontWeight.Bold)
+          UniversalIcon({
+            icon: $r('sys.symbol.xmark'),
+            iconBackgroundColor: $r('sys.color.comp_background_tertiary'),
+            fontSize: $r('sys.float.Title_S')
+          })
+            .onClick(() => {
+              this.sharesHeldNumber += this.purchaseQuantity;
+              this.purchaseQuantity = 100;
+              this.buyIsShow = false;
+              this.popUpBoxIsShow = false;
+              this.isFirstBulletBox = true;
+            })
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .width('100%')
+        .height(60)
+
+        Row() {
+          Text($r('app.string.Stock_name_code'))
+          Text($r('app.string.shareholder_account'))
+        }
+        .width('100%')
+        .justifyContent(FlexAlign.SpaceBetween)
+
+        Row() {
+          CounterComponent({
+            options: {
+              type: CounterType.LIST,
+              numberOptions: {
+                label: $r('app.string.price'),
+                value: this.currentStockPrice,
+                step: 1,
+                onChange: (value: number) => {
+                  this.currentStockPrice = value;
+                }
+              }
+            }
+          })
+        }
+        .width('100%')
+        .height(48)
+        .backgroundColor(Color.White)
+        .borderRadius(16)
+
+        Row() {
+          Text() {
+            Span($r('app.string.limit_down'))
+              .fontColor('#707070')
+            Span(`${(this.currentStockPrice * (1 - 0.1)).toFixed(2)}`)
+              .fontColor('#1DB775')
+            Span($r('app.string.raising_limit'))
+              .fontColor('#707070')
+            Span(`${(this.currentStockPrice * (1 + 0.1)).toFixed(2)}`)
+              .fontColor('#FA4337')
+          }
+          .fontSize(11)
+        }
+        .width('100%')
+        .justifyContent(FlexAlign.Start)
+        .padding({
+          right: 8,
+          left: 8
+        })
+
+        Row() {
+          CounterComponent({
+            options: {
+              type: CounterType.LIST,
+              numberOptions: {
+                label: $r('app.string.quantity'),
+                min: 0,
+                value: 100,
+                max: 100 * 1000,
+                step: 100,
+                onChange: (value: number) => {
+                  this.purchaseQuantity = value;
+                }
+              }
+            }
+          })
+        }
+        .width('100%')
+        .height(48)
+        .backgroundColor(Color.White)
+        .borderRadius(16)
+
+        Row() {
+          Text() {
+            Span($r('app.string.already_held'))
+            Span(` ${this.sharesHeldNumber} `).fontColor($r('sys.color.alert'))
+            Span($r('app.string.stock'))
+          }
+          .fontSize(11)
+
+          Text() {
+            Span($r('app.string.buy_able'))
+            Span(' 0 ').fontColor($r('sys.color.alert'))
+            Span($r('app.string.stock'))
+          }
+          .fontSize(11)
+        }
+        .width('100%')
+        .justifyContent(FlexAlign.SpaceBetween)
+        .padding({
+          right: 8,
+          left: 8
+        })
+      }
+      .width('100%')
+
+      Row() {
+        Text($r('app.string.buy'))
+          .fontSize(16)
+          .fontColor($r('sys.color.font_on_primary'))
+      }
+      .width('100%')
+      .height(40)
+      .borderRadius(20)
+      .backgroundColor('#E53137')
+      .justifyContent(FlexAlign.Center)
+      .padding({
+        right: new BreakpointType(16, 0, 0).getValue(this.currentWidthBreakpoint),
+        left: new BreakpointType(16, 0, 0).getValue(this.currentWidthBreakpoint)
+      })
+      .onClick(() => {
+        if (this.purchaseQuantity > 0) {
+          this.buyIsShow = true;
+          this.isFirstBulletBox = false;
+        }
+      })
+    }
+    .justifyContent(FlexAlign.SpaceBetween)
+    .width('100%')
+    .height('100%')
+    .padding({
+      top: 12,
+      right: 16,
+      bottom: 32,
+      left: 16
+    })
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/views/StockDealDetails.ets b/entry/src/main/ets/views/StockDealDetails.ets
new file mode 100644
index 0000000000000000000000000000000000000000..5ce09ac1fc941b1eef9b0ef5d5886ce2a952259e
--- /dev/null
+++ b/entry/src/main/ets/views/StockDealDetails.ets
@@ -0,0 +1,116 @@
+/*
+ * Copyright (c) 2025 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 { BUY_SELL_SHARES, SELL_SHARES, SUBMISSION_TIME, transactionDetails } from '../models/DataModel';
+import { BreakpointType } from '../utils/BreakpointType';
+import { StockDetails } from './CommonView';
+
+@Component
+export struct StockDealDetails {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: number = 1;
+  private concludeDetailsScroller: Scroller = new Scroller();
+
+  build() {
+    Row() {
+      Column({ space: 2 }) {
+        Text($r('app.string.market_conditions'))
+          .width('100%')
+          .height(20)
+          .fontColor('#FA7137')
+          .backgroundColor('#FFEFEE')
+          .fontSize(10)
+          .textAlign(TextAlign.Center)
+        ForEach(SELL_SHARES, (item: transactionDetails, index: number) => {
+          StockDetails({
+            title: item.title,
+            price: item.price,
+            amount: item.amount,
+            index: index + 1
+          })
+            .padding({
+              right: new BreakpointType(8.25, 8.25, 9).getValue(this.currentWidthBreakpoint),
+              left: new BreakpointType(8.25, 8.25, 9).getValue(this.currentWidthBreakpoint)
+            })
+        }, (item: transactionDetails, index: number) => (item.price + index).toString())
+        Row() {
+          Slider({
+            value: 60,
+            min: 0,
+            max: 100,
+            style: SliderStyle.NONE
+          })
+            .trackColor('#1DB775')
+            .selectedColor('#FA4337')
+        }
+        .width('100%')
+        .height(10)
+
+        ForEach(BUY_SELL_SHARES, (item: transactionDetails, index: number) => {
+          StockDetails({
+            title: item.title,
+            price: item.price,
+            amount: item.amount,
+            index: index + 1
+          })
+            .padding({
+              right: new BreakpointType(8.25, 8.25, 9).getValue(this.currentWidthBreakpoint),
+              left: new BreakpointType(8.25, 8.25, 9).getValue(this.currentWidthBreakpoint)
+            })
+        }, (item: transactionDetails, index: number) => (item.price + index).toString())
+
+        Text($r('app.string.transaction_details'))
+          .width('100%')
+          .height(20)
+          .backgroundColor('#F4F3F8')
+          .fontSize(10)
+          .textAlign(TextAlign.Center)
+
+        Scroll(this.concludeDetailsScroller) {
+          Column() {
+            ForEach(SUBMISSION_TIME, (item: transactionDetails, index: number) => {
+              StockDetails({
+                title: item.title,
+                price: item.price,
+                amount: item.amount,
+                isShowNumber: false,
+                index: index + 1
+              })
+                .padding({
+                  top: 2,
+                  right: new BreakpointType(8.25, 8.25, 9).getValue(this.currentWidthBreakpoint),
+                  bottom: 2,
+                  left: new BreakpointType(8.25, 8.25, 9).getValue(this.currentWidthBreakpoint)
+                })
+            }, (item: transactionDetails, index: number) => (item.price + index).toString())
+          }
+        }
+        .height(new BreakpointType(70, 70, 102).getValue(this.currentWidthBreakpoint))
+        .scrollBar(BarState.Off)
+      }
+      .height('100%')
+      .width('100%')
+      .justifyContent(FlexAlign.SpaceBetween)
+      .padding({
+        top: 4,
+        bottom: 12
+      })
+    }
+    .width(new BreakpointType(103, 103, 192).getValue(this.currentWidthBreakpoint))
+    .height('100%')
+    .padding({
+      left: 4
+    })
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/views/StockDetailsInfo.ets b/entry/src/main/ets/views/StockDetailsInfo.ets
new file mode 100644
index 0000000000000000000000000000000000000000..8cf2e57eb8e7da90d7d3bdf7731d6de6177961a9
--- /dev/null
+++ b/entry/src/main/ets/views/StockDetailsInfo.ets
@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2025 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 { StockInForm, STOCK_INFORM_LIST } from '../models/DataModel';
+import { BreakpointType } from '../utils/BreakpointType';
+import { StockInFormList } from './CommonView';
+
+@Component
+export struct StockDetailsInfo {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: number = 1;
+  @Consume('isExpand') isExpand: boolean;
+
+  build() {
+    Column() {
+      Row() {
+        Text('20.01')
+          .fontSize(30)
+          .height(30)
+          .fontColor('#FA4337')
+          .fontWeight(FontWeight.Medium)
+          .margin({
+            right: 11.5
+          })
+        Text('+19.8 +0.64%')
+          .fontSize(14)
+          .height(19)
+          .fontColor('#FA4337')
+          .fontWeight(FontWeight.Medium)
+      }
+      .width('100%')
+      .height(48)
+      .justifyContent(FlexAlign.Start)
+      .alignItems(VerticalAlign.Bottom)
+      .backgroundColor(Color.White)
+      .padding({
+        top: 9,
+        right: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint),
+        bottom: 9,
+        left: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint)
+      })
+
+      Row() {
+        Column() {
+          GridRow({
+            columns: 12,
+            direction: GridRowDirection.Row
+          }) {
+            ForEach(STOCK_INFORM_LIST, (item: StockInForm, index: number) => {
+              GridCol({
+                span: {
+                  xs: 6,
+                  sm: 6,
+                  md: 4,
+                  lg: 3
+                }
+              }) {
+                StockInFormList({ item: item, index: index })
+              }
+            }, (item: StockInForm, index: number) => item.title1.toString() + index)
+          }
+          .width('100%')
+
+          SymbolGlyph(this.isExpand ? $r('sys.symbol.chevron_up') : $r('sys.symbol.chevron_down'))
+            .fontColor([$r('sys.color.icon_primary')])
+            .fontSize(16)
+            .onClick(() => {
+              this.isExpand = !this.isExpand;
+            })
+            .padding({
+              bottom: 4
+            })
+        }
+        .width('100%')
+        .backgroundColor(Color.White)
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/views/StockDetailsView.ets b/entry/src/main/ets/views/StockDetailsView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..12d51f4629dd0ba11c5644a31e182fa7d5808590
--- /dev/null
+++ b/entry/src/main/ets/views/StockDetailsView.ets
@@ -0,0 +1,297 @@
+/*
+ * Copyright (c) 2025 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 { LineChart, LineChartModel } from '@ohos/mpchart';
+import { CYCLE_TITLE, OTHER_TITLE } from '../models/DataModel';
+import { BarChartView } from '../chartmodels/BarChartView';
+import { BreakpointType } from '../utils/BreakpointType';
+import { StockDetailsInfo } from './StockDetailsInfo';
+import { StockDealDetails } from './StockDealDetails';
+import { CommSlide, TitleIcon } from './CommonView';
+import { RegularWayPopUp } from './RegularWayPopUp';
+import { TopTitleBar } from './TopTitleBar';
+import { BuyPopUp } from './BuyPopUp';
+import ChartViewModel from '../chartmodels/LineChartModel';
+
+@Component
+export struct StockDetailsView {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: number = 1;
+  @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: number = 1;
+  @StorageLink('lastWidthBreakpoint') lastWidthBreakpoint: number = 1;
+  @StorageLink('sharesHeldNumber') sharesHeldNumber: number = 0;
+  @StorageLink('isSplitScreen') isSplitScreen: boolean = false;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+  @Consume('tabletMode') tabletMode: NavigationMode;
+  @State lineChartModel: LineChartModel = ChartViewModel.getLineChartModel();
+  @State cycleTabIndexSelected: number = 0;
+  @State currentIndex: number = 0;
+  @State selectedIndex: number = 0;
+  private scroller: Scroller = new Scroller();
+  @State closeInfoCarousel: boolean = false;
+  private cardList: number[] = [1, 2];
+  private windowClass: window.Window = AppStorage.get<window.Window>('windowClass')!;
+  @Provide('isFirstBulletBox') isFirstBulletBox: boolean = true;
+  @Provide('popUpBoxIsShow') @Watch('bindSheetMonitor') popUpBoxIsShow: boolean = false;
+  @Provide('currentStockPrice') currentStockPrice: number = 20;
+  @Provide('purchaseQuantity') purchaseQuantity: number = 100;
+  @Provide('buyIsShow') buyIsShow: boolean = false;
+  @Provide('isExpand') isExpand: boolean = false;
+  @State firstTabIndexSelected: number = 0;
+  @State secondTabIndexSelected: number = 0;
+
+  bindSheetMonitor() {
+    if (!this.popUpBoxIsShow) {
+      this.isFirstBulletBox = true;
+    }
+  }
+
+  isOverlayMethod(statusBarColor: string): void {
+    let SystemBarProperties: window.SystemBarProperties;
+    SystemBarProperties = { statusBarColor: statusBarColor };
+    this.windowClass.setWindowSystemBarProperties(SystemBarProperties);
+  }
+
+  @Builder
+  myBuilder() {
+    if (this.isFirstBulletBox) {
+      RegularWayPopUp()
+    } else {
+      BuyPopUp()
+    }
+  }
+
+  build() {
+    NavDestination() {
+      // Top toolbar
+      TopTitleBar()
+        .bindSheet($$this.popUpBoxIsShow, this.myBuilder(), {
+          detents: [400],
+          backgroundColor: '#F9F9F9',
+          showClose: false,
+          maskColor: $r('sys.color.mask_fourth'),
+          preferType: SheetType.CENTER
+        })
+
+      // Content Area
+      Scroll(this.scroller) {
+        Column() {
+          // Stock details information
+          StockDetailsInfo()
+
+          // Stock Notification
+          Row() {
+            Row() {
+              Text($r('app.string.information'))
+                .fontSize(12)
+                .lineHeight(16)
+                .fontColor($r('sys.color.icon_primary'))
+                .fontWeight(FontWeight.Bold)
+                .margin({
+                  right: 16
+                })
+              Text($r('app.string.announcement'))
+                .fontSize(11)
+                .lineHeight(15)
+                .fontColor('#262626')
+            }
+
+            Blank()
+
+            SymbolGlyph($r('sys.symbol.xmark'))
+              .fontColor([$r('sys.color.icon_primary')])
+              .fontSize(12)
+              .onClick(() => {
+                this.closeInfoCarousel = true;
+              })
+          }
+          .width('100%')
+          .height(40)
+          .backgroundColor(Color.White)
+          .visibility(this.closeInfoCarousel ? Visibility.None : Visibility.Visible)
+          .padding({
+            right: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint),
+            left: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint)
+          })
+          .margin({
+            top: this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG ? 8 : 4
+          })
+
+          // Stock trading time period area
+          Row() {
+            Column() {
+              CommSlide({
+                commSlideData: CYCLE_TITLE,
+                tabIndexSelected: this.firstTabIndexSelected
+              })
+            }
+            .width('100%')
+            .height(40)
+            .justifyContent(FlexAlign.Center)
+            .alignItems(HorizontalAlign.Center)
+            .backgroundColor(Color.White)
+            .margin({
+              top: this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG ? 8 : 4,
+              bottom: this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM ? 4 : 1
+            })
+          }
+
+          Row() {
+            Row() {
+              // Stock chart area
+              Column() {
+                Row() {
+                  LineChart({ model: this.lineChartModel })
+                }
+                .height('80%')
+                .padding({
+                  top: 20
+                })
+
+                Row() {
+                  BarChartView()
+                }
+                .width('103%')
+                .height('20%')
+              }
+              .height('100%')
+            }
+            .layoutWeight(1)
+            .justifyContent(FlexAlign.SpaceBetween)
+
+            // Stock price details
+            StockDealDetails()
+          }
+          .width('100%')
+          .height(new BreakpointType(294, 286, 376).getValue(this.currentWidthBreakpoint))
+          .justifyContent(FlexAlign.SpaceBetween)
+          .backgroundColor(Color.White)
+          .padding({
+            right: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint),
+            left: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint)
+          })
+
+          // Stock Circle
+          Row() {
+            Column() {
+              CommSlide({
+                commSlideData: OTHER_TITLE,
+                tabIndexSelected: this.secondTabIndexSelected
+              })
+            }
+            .width('100%')
+            .height(40)
+            .justifyContent(FlexAlign.Center)
+            .alignItems(HorizontalAlign.Center)
+            .backgroundColor(Color.White)
+            .margin({
+              top: 4,
+              bottom: 8
+            })
+          }
+
+          // List of stock cards
+          Column({ space: 12 }) {
+            ForEach(this.cardList, (item: number) => {
+              Blank()
+                .id(item.toString())
+                .width('100%')
+                .borderRadius(12)
+                .backgroundColor($r('sys.color.comp_background_primary'))
+                .height(40 * item)
+            }, (item: number, index: number) => (index + item).toString())
+          }
+          .margin({
+            right: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint),
+            left: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint)
+          })
+        }
+      }
+      .backgroundColor($r('sys.color.comp_background_gray'))
+      .scrollBar(BarState.Off)
+      .layoutWeight(1)
+      .padding({
+        bottom: 8
+      })
+
+      // Bottom toolbar
+      Row() {
+        Row({ space: 24 }) {
+          TitleIcon({ icon: $r('sys.symbol.dot_grid_2x2'), title: $r('app.string.self_selected_settings') })
+          TitleIcon({ icon: $r('sys.symbol.Investment_stable_value_add'), title: $r('app.string.stock_pk') })
+          TitleIcon({ icon: $r('sys.symbol.more'), title: $r('app.string.more') })
+        }
+        .margin({
+          right: new BreakpointType(32, 101, 32).getValue(this.currentWidthBreakpoint)
+        })
+
+        Blank()
+          .visibility(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG &&
+            this.tabletMode === NavigationMode.Stack ? Visibility.None : Visibility.Visible)
+
+        Row() {
+          Text($r('app.string.go_trade'))
+            .fontSize(16)
+            .lineHeight(21)
+            .fontWeight(500)
+            .fontColor($r('sys.color.font_on_primary'))
+        }
+        .layoutWeight(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG ? 0 : 1)
+        .width(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG && this.tabletMode === NavigationMode.Stack ?
+          448 : 360)
+        .height(40)
+        .borderRadius(20)
+        .justifyContent(FlexAlign.Center)
+        .backgroundColor('#E53137')
+        .padding({
+          top:2
+        })
+        .onClick(() => {
+          this.buyIsShow = false;
+          this.popUpBoxIsShow = true;
+        })
+      }
+      .width('100%')
+      .height(78)
+      .backgroundColor($r('sys.color.font_on_primary'))
+      .alignItems(VerticalAlign.Top)
+      .justifyContent(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG ? FlexAlign.End : FlexAlign.Start)
+      .padding({
+        top: 6,
+        right: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint),
+        left: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint)
+      })
+      .border({
+        width: { top: 0.5 },
+        color: { top: '#33000000' },
+        style: { top: BorderStyle.Solid }
+      })
+    }
+    .title('StockDetailsPage')
+    .hideTitleBar(true)
+    .width('100%')
+    .backgroundColor(Color.White)
+    .padding({
+      top: AppStorage.get<number>('statusBarHeight')
+    })
+    .onBackPressed(() => {
+      if (this.tabletMode === NavigationMode.Stack) {
+        this.tabletMode = NavigationMode.Split;
+        return true;
+      }
+      return false;
+    })
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/views/StockTable.ets b/entry/src/main/ets/views/StockTable.ets
new file mode 100644
index 0000000000000000000000000000000000000000..176388c2e400c00fe7035bab8ea94f4ff91e3fd1
--- /dev/null
+++ b/entry/src/main/ets/views/StockTable.ets
@@ -0,0 +1,177 @@
+/*
+ * Copyright (c) 2025 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 { StockForm, STOCK_FORM, STOCK_TITLE } from '../models/DataModel';
+import { BreakpointType } from '../utils/BreakpointType';
+import { WordBackgroundComm } from './CommonView';
+
+@Component
+export struct StockTable {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: number = 1;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+  @Consume('tabletMode') tabletMode: NavigationMode;
+  private scroller: Scroller = new Scroller();
+
+  @Builder
+  StickyHeader(): void {
+    Row() {
+      ForEach(STOCK_TITLE, (item: Resource, index: number) => {
+        Row() {
+          Text(item)
+            .fontSize(12)
+        }
+        .justifyContent(index === 0 ? FlexAlign.Start : FlexAlign.End)
+        .width(index === 1 || index === 2 || index === 3 ? 90 : 100)
+        .padding({
+          right: index === STOCK_TITLE.length - 1 ?
+            (new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint)) : 0,
+          left: index === 0 ? (new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint)) : 0
+        })
+
+      }, (item: Resource, index: number) => item.toString() + index)
+    }
+    .height(36)
+    .backgroundColor(Color.White)
+  }
+
+  build() {
+    Scroll(this.scroller) {
+      List({ space: 20, initialIndex: 0 }) {
+        ListItemGroup({ header: this.StickyHeader() }) {
+          ListItem() {
+          }
+
+          ForEach(STOCK_FORM, (item: StockForm) => {
+            ListItem() {
+              Row() {
+                Column() {
+                  Text(item.title)
+                    .minFontSize(8)
+                    .maxFontSize(16)
+                    .height(21)
+                    .width(64)
+                    .maxLines(1)
+
+                  Row() {
+                    Text(item.stockNumber)
+                      .fontSize(12)
+                      .height(16)
+                      .fontColor($r('sys.color.font_tertiary'))
+                      .textAlign(TextAlign.Start)
+                    WordBackgroundComm({
+                      text: item.plate,
+                      textFontColor: item.plateFontColor,
+                      textBackgroundColor: item.plateBackgroundColor
+                    })
+                  }
+                  .width(64)
+                  .justifyContent(FlexAlign.SpaceBetween)
+                }
+                .width(100)
+                .alignItems(HorizontalAlign.Start)
+                .padding({
+                  left: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint)
+                })
+
+                Text((item.latestPrice / 100).toString())
+                  .fontSize(14)
+                  .height(19)
+                  .width(90)
+                  .textAlign(TextAlign.End)
+                  .fontWeight(FontWeight.Medium)
+                Text((item.highsAndLows > 0 ? '+' + item.highsAndLows : item.highsAndLows).toString())
+                  .fontSize(14)
+                  .height(19)
+                  .width(90)
+                  .fontColor(item.highsAndLows > 0 ? '#FA4337' : '#1DB775')
+                  .textAlign(TextAlign.End)
+                  .fontWeight(FontWeight.Medium)
+                Text(item.priceLimit)
+                  .fontSize(14)
+                  .height(19)
+                  .width(90)
+                  .fontColor(item.highsAndLows > 0 ? '#FA4337' : '#1DB775')
+                  .textAlign(TextAlign.End)
+                  .fontWeight(FontWeight.Medium)
+                Text(item.gross)
+                  .fontSize(14)
+                  .height(19)
+                  .width(100)
+                  .textAlign(TextAlign.End)
+                  .fontWeight(FontWeight.Medium)
+                Text(item.impressions)
+                  .fontSize(14)
+                  .height(19)
+                  .width(100)
+                  .fontColor(item.highsAndLows > 0 ? '#FA4337' : '#1DB775')
+                  .textAlign(TextAlign.End)
+                  .fontWeight(FontWeight.Medium)
+                Text() {
+                  Span(item.volumeTransaction)
+                  Span($r('app.string.billion'))
+                }
+                .fontSize(14)
+                .height(19)
+                .width(100)
+                .textAlign(TextAlign.End)
+                .fontWeight(FontWeight.Medium)
+
+                Text(item.amplitude)
+                  .fontSize(14)
+                  .height(19)
+                  .width(100)
+                  .textAlign(TextAlign.End)
+                  .fontWeight(FontWeight.Medium)
+                Text(item.changeHands)
+                  .fontSize(14)
+                  .height(19)
+                  .width(100)
+                  .textAlign(TextAlign.End)
+                  .fontWeight(FontWeight.Medium)
+                Text(item.PEG.toString())
+                  .fontSize(14)
+                  .height(19)
+                  .width(100)
+                  .textAlign(TextAlign.End)
+                  .fontWeight(FontWeight.Medium)
+                Text(item.PB.toString())
+                  .fontSize(14)
+                  .height(19)
+                  .width(100)
+                  .textAlign(TextAlign.End)
+                  .fontWeight(FontWeight.Medium)
+                  .padding({
+                    right: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint)
+                  })
+              }
+            }
+            .height(56)
+          }, (item: StockForm, index: number) => (item.latestPrice + index).toString())
+          ListItem() {
+          }
+        }
+        .backgroundColor(Color.White)
+        .divider({ strokeWidth: 1, color: '#F2RDED' }) // The dividing line between each row
+      }
+      .scrollBar(BarState.Off)
+      .sticky(StickyStyle.Header)
+      .onClick(() => {
+        this.pageInfos.replacePathByName('StockDetailsPage', null, true);
+      })
+    }
+    .scrollable(ScrollDirection.Horizontal) // Rolling direction: vertical
+    .scrollBar(BarState.Off) // Permanent display of the scroll bar
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/views/TopTitleBar.ets b/entry/src/main/ets/views/TopTitleBar.ets
new file mode 100644
index 0000000000000000000000000000000000000000..16a7c1383e01c274a6a20afdd50d6bcb057ce5ea
--- /dev/null
+++ b/entry/src/main/ets/views/TopTitleBar.ets
@@ -0,0 +1,119 @@
+/*
+ * Copyright (c) 2025 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, common, StartOptions, Want } from '@kit.AbilityKit';
+import { UniversalIcon, WordBackgroundComm } from './CommonView';
+import { BreakpointType } from '../utils/BreakpointType';
+import Logger from '../utils/Logger';
+
+@Component
+export struct TopTitleBar {
+  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: number = 1;
+  @StorageLink('lastWidthBreakpoint') lastWidthBreakpoint: number = 1;
+  @StorageLink('isSplitScreen') isSplitScreen: boolean = false;
+  @Consume('pageInfos') pageInfos: NavPathStack;
+  @Consume('tabletMode') tabletMode: NavigationMode;
+
+  build() {
+    Row() {
+      Row() {
+        if (this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG && this.tabletMode === NavigationMode.Split) {
+          UniversalIcon({
+            icon: $r('sys.symbol.arrow_up_left_and_arrow_down_right'),
+            iconBackgroundColor: $r('sys.color.comp_background_tertiary')
+          })
+            .onClick(() => {
+              this.tabletMode = NavigationMode.Stack;
+            })
+        } else {
+          UniversalIcon({
+            icon: $r('sys.symbol.chevron_left'),
+            iconBackgroundColor: $r('sys.color.comp_background_tertiary')
+          })
+            .onClick(() => {
+              if (this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG) {
+                this.tabletMode = NavigationMode.Split;
+              } else {
+                this.pageInfos.pop();
+              }
+            })
+        }
+      }
+
+      Blank()
+
+      Column() {
+        Text($r('app.string.some_company_technology'))
+          .fontSize(16)
+          .height(21)
+        Row() {
+          WordBackgroundComm({
+            text: $r('app.string.deep'),
+            textFontColor: '#1E6CF3',
+            textBackgroundColor: '#E8F0FE'
+          })
+          Text($r('app.string.closed_day'))
+            .fontSize(11)
+            .height(15)
+            .fontColor('#999999')
+        }
+      }
+      .height(40)
+
+      Blank()
+
+      Row({ space: 16 }) {
+        // split screen
+        Row() {
+          UniversalIcon({
+            icon: $r('sys.symbol.rectangle_split_2x1'),
+            iconBackgroundColor: $r('sys.color.comp_background_tertiary')
+          })
+        }
+        .visibility(this.isSplitScreen ? Visibility.Hidden : (new BreakpointType(Visibility.Hidden, Visibility.Visible,
+          Visibility.Visible).getValue(this.currentWidthBreakpoint)))
+        .onClick(() => {
+          AppStorage.setOrCreate('lastWidthBreakpoint', this.currentWidthBreakpoint);
+          let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
+          let want: Want = {
+            bundleName: 'com.example.multiticketclass',
+            abilityName: 'EntryAbility'
+          };
+          // The split-screen startup was successful. The StartOptions were created and the window mode was
+          // set to split-screen mode. The left side is the split-screen area.
+          let option: StartOptions = { windowMode: AbilityConstant.WindowMode.WINDOW_MODE_SPLIT_PRIMARY };
+          try {
+            context.startAbility(want, option, (error) => {
+              if (error.code) {
+                Logger.error('StockDetailsPage.ets', 'Failed to start split-screen mode');
+                return;
+              }
+              Logger.info('StockDetailsPage.ets', 'Screen splitting has been successfully activated.');
+            });
+          } catch (paramError) {
+            Logger.error('StockDetailsPage.ets', 'Failed to start split-screen mode');
+          }
+        })
+      }
+    }
+    .width('100%')
+    .height(new BreakpointType(56, 62, 62).getValue(this.currentWidthBreakpoint))
+    .backgroundColor(Color.White)
+    .padding({
+      right: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint),
+      left: new BreakpointType(16, 24, 32).getValue(this.currentWidthBreakpoint)
+    })
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/module.json5 b/entry/src/main/module.json5
index 6c07d9d8839ac9716809c6e06c21805d52c138fe..47c7ee8fcf72d98ab2cd2d126247cedf7a516be7 100644
--- a/entry/src/main/module.json5
+++ b/entry/src/main/module.json5
@@ -7,7 +7,6 @@
     "deviceTypes": [
       "phone",
       "tablet",
-      "2in1"
     ],
     "deliveryWithInstall": true,
     "installationFree": false,
@@ -17,11 +16,13 @@
         "name": "EntryAbility",
         "srcEntry": "./ets/entryability/EntryAbility.ets",
         "description": "$string:EntryAbility_desc",
-        "icon": "$media:icon",
+        "icon": "$media:layered_image",
         "label": "$string:EntryAbility_label",
         "startWindowIcon": "$media:startIcon",
         "startWindowBackground": "$color:start_window_background",
         "exported": true,
+        "supportWindowMode": ["fullscreen", "split", "floating"],
+        "launchType": "multiton",
         "skills": [
           {
             "entities": [
@@ -33,6 +34,20 @@
           }
         ]
       }
+    ],
+    "extensionAbilities": [
+      {
+        "name": "EntryBackupAbility",
+        "srcEntry": "./ets/entrybackupability/EntryBackupAbility.ets",
+        "type": "backup",
+        "exported": false,
+        "metadata": [
+          {
+            "name": "ohos.extension.backup",
+            "resource": "$profile:backup_config"
+          }
+        ],
+      }
     ]
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/resources/base/element/color.json b/entry/src/main/resources/base/element/color.json
index 2fce1f8218523b440aa7aa36fd5bae96191748f8..3c712962da3c2751c2b9ddb53559afcbd2b54a02 100644
--- a/entry/src/main/resources/base/element/color.json
+++ b/entry/src/main/resources/base/element/color.json
@@ -3,38 +3,6 @@
     {
       "name": "start_window_background",
       "value": "#FFFFFF"
-    },
-    {
-      "name": "adaptive_tab_background",
-      "value": "#1AFFFFFF"
-    },
-    {
-      "name": "text_font_color",
-      "value": "#66000000"
-    },
-    {
-      "name": "selected_text_background",
-      "value": "#0df12c33"
-    },
-    {
-      "name": "text_background",
-      "value": "#FFFFFF"
-    },
-    {
-      "name": "selected_text_color",
-      "value": "#F12C33"
-    },
-    {
-      "name": "button_background",
-      "value": "#007DFF"
-    },
-    {
-      "name": "red",
-      "value": "#E53137"
-    },
-    {
-      "name": "black",
-      "value": "#000000"
     }
   ]
 }
\ No newline at end of file
diff --git a/entry/src/main/resources/base/element/float.json b/entry/src/main/resources/base/element/float.json
index e61e17fc5d0f81c76baf789ab50208a07d3f6629..33ea22304f9b1485b5f22d811023701b5d4e35b6 100644
--- a/entry/src/main/resources/base/element/float.json
+++ b/entry/src/main/resources/base/element/float.json
@@ -1,124 +1,8 @@
 {
   "float": [
     {
-      "name": "font_size",
-      "value": "20fp"
-    },
-    {
-      "name": "button_height",
-      "value": "55vp"
-    },
-    {
-      "name": "button_margin",
-      "value": "12vp"
-    },
-    {
-      "name": "image_height",
-      "value": "24vp"
-    },
-    {
-      "name": "image_width",
-      "value": "24vp"
-    },
-    {
-      "name": "back_margin_left",
-      "value": "12vp"
-    },
-    {
-      "name": "back_margin_top",
-      "value": "24vp"
-    },
-    {
-      "name": "font_size_16",
-      "value": "16fp"
-    },
-    {
-      "name": "font_size_14",
-      "value": "14fp"
-    },
-    {
-      "name": "icon_size",
-      "value": "16vp"
-    },
-    {
-      "name": "stock_data_width",
-      "value": "60vp"
-    },
-    {
-      "name": "stock_data_margin",
-      "value": "10vp"
-    },
-    {
-      "name": "text_height",
-      "value": "21vp"
-    },
-    {
-      "name": "text_width",
-      "value": "32vp"
-    },
-    {
-      "name": "height_56",
-      "value": "56vp"
-    },
-    {
-      "name": "width_296",
-      "value": "296vp"
-    },
-    {
-      "name": "bottom_width_2",
-      "value": "2vp"
-    },
-    {
-      "name": "bottom_width_0",
-      "value": "0vp"
-    },
-    {
-      "name": "text_margin_left_and_right",
-      "value": "14vp"
-    },
-    {
-      "name": "text_margin_top_and_bottom",
-      "value": "5vp"
-    },
-    {
-      "name": "indicator_name_width",
-      "value": "99vp"
-    },
-    {
-      "name": "indicator_name_height",
-      "value": "48vp"
-    },
-    {
-      "name": "indicator_name_margin",
-      "value": "12vp"
-    },
-    {
-      "name": "stock_options_margin",
-      "value": "18vp"
-    },
-    {
-      "name": "more_margin_top",
-      "value": "15vp"
-    },
-    {
-      "name": "more_margin_left",
-      "value": "16vp"
-    },
-    {
-      "name": "more_margin_right",
-      "value": "24vp"
-    },
-    {
-      "name": "stock_column_margin",
-      "value": "16vp"
-    },
-    {
-      "name": "recommendation_margin_top",
-      "value": "18vp"
-    },
-    {
-      "name": "recommendation_margin_bottom",
-      "value": "13vp"
+      "name": "page_text_font_size",
+      "value": "50fp"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json
index 159a8eab21f299280c54bc60d95f8eebaf275a06..a0796e1d1845d31c02977a58de45cf31652fda05 100644
--- a/entry/src/main/resources/base/element/string.json
+++ b/entry/src/main/resources/base/element/string.json
@@ -10,27 +10,343 @@
     },
     {
       "name": "EntryAbility_label",
-      "value": "MultiTicketClass"
+      "value": "MultiStockCategoryApp"
     },
     {
-      "name": "title",
-      "value": "Key Scenario Implementation of a Multi-Stock Class"
+      "name": "regular_way",
+      "value": "Regular Way"
     },
     {
-      "name": "tab_adaptive",
-      "value": "Adaptive tab centering"
+      "name": "self_selected_settings",
+      "value": "Settings"
     },
     {
-      "name": "table_adaptive",
-      "value": "Table Adaptive Stretch"
+      "name": "stock_pk",
+      "value": "StockPK"
     },
     {
-      "name": "double_tab_adaptive",
-      "value": "Double tab adaptive centering"
+      "name": "more",
+      "value": "More"
     },
     {
-      "name": "computer",
-      "value": "Computer"
+      "name": "go_trade",
+      "value": "Go Trade"
+    },
+    {
+      "name": "transaction_details",
+      "value": "Transaction Details"
+    },
+    {
+      "name": "market_conditions",
+      "value": "Market Conditions"
+    },
+    {
+      "name": "information",
+      "value": "Information"
+    },
+    {
+      "name": "announcement",
+      "value": "XX Technology：Latest announcement."
+    },
+    {
+      "name": "closed_day",
+      "value": "Closed at 15:03:03 on October 19th"
+    },
+    {
+      "name": "some_company_technology",
+      "value": "Some Company Technology"
+    },
+    {
+      "name": "deep",
+      "value": "S"
+    },
+    {
+      "name": "confirm_purchase",
+      "value": "Confirm Purchase"
+    },
+    {
+      "name": "order_quantity",
+      "value": "Order quantity"
+    },
+    {
+      "name": "commissioned_price",
+      "value": "Commissioned Price"
+    },
+    {
+      "name": "shareholder_account",
+      "value": "Account: 500****5"
+    },
+    {
+      "name": "buy",
+      "value": "Buy"
+    },
+    {
+      "name": "Stock_name_code",
+      "value": "Company 3****3"
+    },
+    {
+      "name": "quantity",
+      "value": "Quantity"
+    },
+    {
+      "name": "price",
+      "value": "Price"
+    },
+    {
+      "name": "limit_down",
+      "value": "Limit Down  "
+    },
+    {
+      "name": "raising_limit",
+      "value": "  Raising Limit  "
+    },
+    {
+      "name": "already_held",
+      "value": "Already Held"
+    },
+    {
+      "name": "stock",
+      "value": "stock"
+    },
+    {
+      "name": "buy_able",
+      "value": "BuyAble"
+    },
+    {
+      "name": "stock_name",
+      "value": "Stock Name"
+    },
+    {
+      "name": "stock_number",
+      "value": "Stock Number"
+    },
+    {
+      "name": "latest_price",
+      "value": "Latest Price"
+    },
+    {
+      "name": "highs_and_lows",
+      "value": "High Low"
+    },
+    {
+      "name": "price_limit",
+      "value": "Price Limit"
+    },
+    {
+      "name": "gross",
+      "value": "Gross"
+    },
+    {
+      "name": "impressions",
+      "value": "Impressions"
+    },
+    {
+      "name": "volume_transaction",
+      "value": "Volume Business"
+    },
+    {
+      "name": "amplitude",
+      "value": "Amplitude"
+    },
+    {
+      "name": "change_hands",
+      "value": "Change Hands"
+    },
+    {
+      "name": "PEG",
+      "value": "PEG"
+    },
+    {
+      "name": "PB",
+      "value": "PB"
+    },
+    {
+      "name": "somebody_technology",
+      "value": "Technology"
+    },
+    {
+      "name": "certain_estate_company",
+      "value": "Real Estate"
+    },
+    {
+      "name": "certain_pharmaceutical_company",
+      "value": "Pharmacy"
+    },
+    {
+      "name": "billion",
+      "value": "B"
+    },
+    {
+      "name": "growth_enterprise_market",
+      "value": "G"
+    },
+    {
+      "name": "securities_margin_trading",
+      "value": "S"
+    },
+    {
+      "name": "certain_index",
+      "value": "Certain Index"
+    },
+    {
+      "name": "deep_number",
+      "value": "Deep Number"
+    },
+    {
+      "name": "science_technology",
+      "value": "Technology"
+    },
+    {
+      "name": "self_select_stock",
+      "value": "Self Select Stock"
+    },
+    {
+      "name": "all",
+      "value": "All"
+    },
+    {
+      "name": "add_custom_options",
+      "value": "Add custom options"
+    },
+    {
+      "name": "optional",
+      "value": "Optional"
+    },
+    {
+      "name": "market",
+      "value": "Market"
+    },
+    {
+      "name": "stock_company",
+      "value": "XX Stock"
+    },
+    {
+      "name": "stock_text_start",
+      "value": "xxxx xxxx"
+    },
+    {
+      "name": "stock_text_end",
+      "value": "xxxx xxxx"
+    },
+    {
+      "name": "stock_names",
+      "value": "Stock Name"
+    },
+    {
+      "name": "home_page",
+      "value": "Home Page"
+    },
+    {
+      "name": "time_share",
+      "value": "Time Share"
+    },
+    {
+      "name": "five_days",
+      "value": "Five Days"
+    },
+    {
+      "name": "daily_k",
+      "value": "Daily K"
+    },
+    {
+      "name": "week_k",
+      "value": "Week K"
+    },
+    {
+      "name": "month_k",
+      "value": "Month K"
+    },
+    {
+      "name": "season_k",
+      "value": "Season K"
+    },
+    {
+      "name": "half_year_k",
+      "value": "Half Year K"
+    },
+    {
+      "name": "year_k",
+      "value": "Year K"
+    },
+    {
+      "name": "discussion",
+      "value": "Discussion"
+    },
+    {
+      "name": "must_read",
+      "value": "Must Read"
+    },
+    {
+      "name": "capital",
+      "value": "Capital"
+    },
+    {
+      "name": "datum",
+      "value": "Datum"
+    },
+    {
+      "name": "announcements",
+      "value": "Announcement"
+    },
+    {
+      "name": "finance",
+      "value": "Finance"
+    },
+    {
+      "name": "research_report",
+      "value": "Research Report"
+    },
+    {
+      "name": "related_fund",
+      "value": "Related Fund"
+    },
+    {
+      "name": "now_begins",
+      "value": "Now Begins"
+    },
+    {
+      "name": "yesterday_close",
+      "value": "Yesterday Close"
+    },
+    {
+      "name": "turnover_rate",
+      "value": "Turnover Rate"
+    },
+    {
+      "name": "tallest",
+      "value": "tallest"
+    },
+    {
+      "name": "lowest",
+      "value": "lowest"
+    },
+    {
+      "name": "turnover",
+      "value": "turnover"
+    },
+    {
+      "name": "total_value",
+      "value": "Total Value"
+    },
+    {
+      "name": "text_hands",
+      "value": "4570H"
+    },
+    {
+      "name": "text_billion",
+      "value": "26.10Y"
+    },
+    {
+      "name": "turnover_value",
+      "value": "910.5W"
+    },
+    {
+      "name": "sell",
+      "value": "Sell"
+    },
+    {
+      "name": "text_buy",
+      "value": "Buy"
     }
   ]
 }
\ No newline at end of file
diff --git a/entry/src/main/resources/base/element/stringarray.json b/entry/src/main/resources/base/element/stringarray.json
deleted file mode 100644
index a7d2e0d7b65db815259ea3947be9e2e5554ff350..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/element/stringarray.json
+++ /dev/null
@@ -1,107 +0,0 @@
-{
-  "strarray": [
-    {
-      "name": "recommendation_tab_list",
-      "value": [
-        {
-          "value": "Recommendation"
-        },
-        {
-          "value": "7X24"
-        },
-        {
-          "value": "Focus News"
-        },
-        {
-          "value": "Calendar"
-        },
-        {
-          "value": "Follow"
-        },
-        {
-          "value": "A-shares"
-        }
-      ]
-    },
-    {
-      "name": "stock_options_list1",
-      "value": [
-        {
-          "value": "A-shares"
-        },
-        {
-          "value": "Global"
-        },
-        {
-          "value": "B-shares"
-        },
-        {
-          "value": "C-shares"
-        },
-        {
-          "value": "E*F"
-        },
-        {
-          "value": "Futures"
-        }
-      ]
-    },
-    {
-      "name": "stock_options_list2",
-      "value": [
-        {
-          "value": "Large market"
-        },
-        {
-          "value": "Plate"
-        },
-        {
-          "value": "ChiNext board"
-        },
-        {
-          "value": "Science and Technology Innovation Board"
-        },
-        {
-          "value": "Beijing Stock Exchange"
-        }
-      ]
-    },
-    {
-      "name": "indicator_name_list",
-      "value": [
-        {
-          "value": "Indicator Name"
-        },
-        {
-          "value": "XChanghong"
-        },
-        {
-          "value": "XTechnology"
-        },
-        {
-          "value": "XSatellite"
-        }
-      ]
-    },
-    {
-      "name": "indicator_name_column",
-      "value": [
-        {
-          "value": "Core indicators"
-        },
-        {
-          "value": "Industry affiliation"
-        },
-        {
-          "value": "Latest stock price"
-        },
-        {
-          "value": "Price fluctuation range"
-        },
-        {
-          "value": "Price to earnings ratio"
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/entry/src/main/resources/base/media/background.png b/entry/src/main/resources/base/media/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..923f2b3f27e915d6871871deea0420eb45ce102f
Binary files /dev/null and b/entry/src/main/resources/base/media/background.png differ
diff --git a/entry/src/main/resources/base/media/doc_plaintext_fill.svg b/entry/src/main/resources/base/media/doc_plaintext_fill.svg
new file mode 100644
index 0000000000000000000000000000000000000000..613f2b2d62b9b3ca11d616643dd41e2690fce0d0
--- /dev/null
+++ b/entry/src/main/resources/base/media/doc_plaintext_fill.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g><path d="M7.51 7.75Q7.2 7.75 6.98 7.54Q6.77 7.32 6.77 7.01Q6.77 6.7 6.98 6.48Q7.2 6.26 7.51 6.26L16.46 6.26Q16.78 6.26 16.99 6.48Q17.21 6.7 17.21 7.01Q17.21 7.32 16.99 7.54Q16.78 7.75 16.46 7.75L7.51 7.75ZM7.51 12.77Q7.2 12.77 6.98 12.55Q6.77 12.34 6.77 12.02Q6.77 11.71 6.98 11.5Q7.2 11.28 7.51 11.28L16.46 11.28Q16.78 11.28 16.99 11.5Q17.21 11.71 17.21 12.02Q17.21 12.34 16.99 12.55Q16.78 12.77 16.46 12.77L7.51 12.77ZM7.51 17.76Q7.2 17.76 6.98 17.54Q6.77 17.33 6.77 17.02Q6.77 16.7 6.98 16.48Q7.2 16.25 7.51 16.25L11.98 16.25Q12.29 16.25 12.5 16.48Q12.72 16.7 12.72 17.02Q12.72 17.33 12.52 17.54Q12.31 17.76 12 17.76L7.51 17.76ZM6 1.01Q5.18 1.01 4.5 1.4Q3.82 1.8 3.41 2.5Q3 3.19 3 4.01L3 19.99Q3 20.81 3.41 21.49Q3.82 22.18 4.5 22.58Q5.18 22.99 6 22.99L18 22.99Q18.82 22.99 19.5 22.58Q20.18 22.18 20.59 21.49Q21 20.81 21 19.99L21 4.01Q21 3.19 20.59 2.5Q20.18 1.8 19.5 1.4Q18.82 1.01 18 1.01L6 1.01Z" fill="rgba(0,0,0,0.9019607843137255)"></path></g></svg>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/media/doc_text_fill.svg b/entry/src/main/resources/base/media/doc_text_fill.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a27271d0d50f5da0501823799c0a934281f5db38
--- /dev/null
+++ b/entry/src/main/resources/base/media/doc_text_fill.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g><path d="M6.22 1.01Q5.35 1.01 4.61 1.45Q3.86 1.9 3.42 2.64Q2.98 3.38 2.98 4.25L2.98 19.75Q2.98 20.64 3.42 21.38Q3.86 22.13 4.61 22.56Q5.35 22.99 6.22 22.99L17.76 22.99Q18.65 22.99 19.39 22.56Q20.14 22.13 20.58 21.38Q21.02 20.64 21.02 19.75L21.02 7.25L14.76 1.01L6.22 1.01ZM7.51 12Q7.22 12 7 11.78Q6.77 11.57 6.77 11.26Q6.77 10.94 7 10.72Q7.22 10.49 7.51 10.49L11.52 10.49Q11.83 10.49 12.06 10.72Q12.29 10.94 12.29 11.26Q12.29 11.57 12.06 11.78Q11.83 12 11.52 12L7.51 12ZM7.51 16.25Q7.22 16.25 7 16.03Q6.77 15.82 6.77 15.5Q6.77 15.19 7 14.98Q7.22 14.76 7.51 14.76L16.49 14.76Q16.8 14.76 17.02 14.98Q17.23 15.19 17.23 15.5Q17.23 15.82 17.02 16.03Q16.8 16.25 16.49 16.25L7.51 16.25ZM15.48 7.25Q15.17 7.25 14.95 7.02Q14.74 6.79 14.74 6.48L14.74 3.1L18.89 7.25L15.48 7.25Z" fill="rgba(0,0,0,0.9019607843137255)"></path></g></svg>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/media/foreground.png b/entry/src/main/resources/base/media/foreground.png
new file mode 100644
index 0000000000000000000000000000000000000000..97014d3e10e5ff511409c378cd4255713aecd85f
Binary files /dev/null and b/entry/src/main/resources/base/media/foreground.png differ
diff --git a/entry/src/main/resources/base/media/house_fill.svg b/entry/src/main/resources/base/media/house_fill.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1d3f8d62884c7261b357c20b1752ba3343d215e8
--- /dev/null
+++ b/entry/src/main/resources/base/media/house_fill.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g mask="url(#hms_mask_0)"><path d="M20.38 12.07Q17.64 9.46 14.88 6.86L13.06 5.16Q12.6 4.73 11.99 4.73Q11.38 4.73 10.92 5.16L3.65 12.07Q3.46 12.26 3.36 12.5Q3.26 12.74 3.26 12.98L3.26 19.99Q3.26 20.62 3.56 21.13Q3.86 21.65 4.38 21.95Q4.9 22.25 5.52 22.25L18.5 22.25Q19.1 22.25 19.62 21.95Q20.14 21.65 20.44 21.13Q20.74 20.62 20.74 19.99L20.74 12.96Q20.74 12.7 20.64 12.47Q20.54 12.24 20.38 12.07Z" fill="rgba(0,0,0,0.9019607843137255)"></path><path d="M1.49 11.47Q1.68 11.66 2.02 11.68Q2.35 11.69 2.54 11.5L10.61 3.84Q11.21 3.26 12.01 3.26Q12.82 3.26 13.42 3.84L21.48 11.47Q21.7 11.69 22.01 11.69Q22.32 11.69 22.54 11.45Q22.73 11.23 22.73 10.92Q22.73 10.61 22.51 10.39L14.45 2.76Q13.78 2.11 12.89 1.88Q12 1.66 11.11 1.88Q10.22 2.11 9.55 2.76L1.51 10.39Q1.27 10.61 1.27 10.92Q1.27 11.23 1.49 11.47Z" fill="rgba(0,0,0,0.9019607843137255)"></path></g><defs><mask id="hms_mask_0"><rect width="24" height="24" fill="#ffffff"></rect><g><path d="M9.02 20.74L9.02 16.18Q9.02 15.05 9.89 14.26Q10.75 13.46 12 13.46Q13.25 13.46 14.11 14.26Q14.98 15.05 14.98 16.18L14.98 20.74Z" fill="#000000"></path></g></mask></defs></svg>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/media/ic_public_info.png b/entry/src/main/resources/base/media/ic_public_info.png
deleted file mode 100644
index 9d50cc007b1d1245e3e8af8abe86956213275623..0000000000000000000000000000000000000000
Binary files a/entry/src/main/resources/base/media/ic_public_info.png and /dev/null differ
diff --git a/entry/src/main/resources/base/media/ic_public_more.png b/entry/src/main/resources/base/media/ic_public_more.png
deleted file mode 100644
index e610aabe9b23249a2490622dd1b2804bb83ba328..0000000000000000000000000000000000000000
Binary files a/entry/src/main/resources/base/media/ic_public_more.png and /dev/null differ
diff --git a/entry/src/main/resources/base/media/ic_public_right.png b/entry/src/main/resources/base/media/ic_public_right.png
deleted file mode 100644
index 489e1109334751f60b66a036df613d2895dd5281..0000000000000000000000000000000000000000
Binary files a/entry/src/main/resources/base/media/ic_public_right.png and /dev/null differ
diff --git a/entry/src/main/resources/base/media/icon.png b/entry/src/main/resources/base/media/icon.png
deleted file mode 100644
index cd45accb1dfd2fd0da16c732c72faa6e46b26521..0000000000000000000000000000000000000000
Binary files a/entry/src/main/resources/base/media/icon.png and /dev/null differ
diff --git a/entry/src/main/resources/base/media/icon_back.png b/entry/src/main/resources/base/media/icon_back.png
deleted file mode 100644
index 744c4cfa740ab0d07130eda0b11629318b3b8e30..0000000000000000000000000000000000000000
Binary files a/entry/src/main/resources/base/media/icon_back.png and /dev/null differ
diff --git a/entry/src/main/resources/base/media/layered_image.json b/entry/src/main/resources/base/media/layered_image.json
new file mode 100644
index 0000000000000000000000000000000000000000..fb49920440fb4d246c82f9ada275e26123a2136a
--- /dev/null
+++ b/entry/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/entry/src/main/resources/base/media/rectangle_split_2x1.png b/entry/src/main/resources/base/media/rectangle_split_2x1.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f097498e5f160b9d9c652b630a08df57e72c7f8
Binary files /dev/null and b/entry/src/main/resources/base/media/rectangle_split_2x1.png differ
diff --git a/entry/src/main/resources/base/media/split_screen.png b/entry/src/main/resources/base/media/split_screen.png
new file mode 100644
index 0000000000000000000000000000000000000000..4438e1285ede8761849a81d20cba9973c8eff4f4
Binary files /dev/null and b/entry/src/main/resources/base/media/split_screen.png differ
diff --git a/entry/src/main/resources/base/media/square_and_pencil_fill.svg b/entry/src/main/resources/base/media/square_and_pencil_fill.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2e6d18e94b304d18f85413c265a2f1502a4e3a5a
--- /dev/null
+++ b/entry/src/main/resources/base/media/square_and_pencil_fill.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g mask="url(#hms_mask_0)"><path d="M6.17 2.59Q5.16 2.59 4.3 3.11Q3.43 3.62 2.93 4.49Q2.42 5.35 2.42 6.36L2.42 17.83Q2.42 18.86 2.93 19.73Q3.43 20.59 4.3 21.1Q5.16 21.6 6.17 21.6L17.66 21.6Q18.67 21.6 19.55 21.1Q20.42 20.59 20.93 19.73Q21.43 18.86 21.43 17.83L21.43 6.36Q21.43 5.33 20.93 4.46Q20.42 3.6 19.55 3.1Q18.67 2.59 17.66 2.59L6.17 2.59Z" fill="rgba(0,0,0,0.9019607843137255)"></path></g><defs><mask id="hms_mask_0"><rect width="24" height="24" fill="#ffffff"></rect><g><path d="M23.3 0.65Q22.99 0.34 22.58 0.17Q22.18 0 21.7 0Q21.24 0 20.83 0.17Q20.42 0.34 20.11 0.65L10.54 10.22Q10.32 10.44 10.2 10.66L8.83 13.08Q8.64 13.46 8.64 13.86Q8.64 14.26 8.86 14.57Q9.05 14.9 9.4 15.11Q9.74 15.31 10.13 15.31Q10.49 15.31 10.82 15.12L13.27 13.73Q13.49 13.63 13.73 13.39L23.3 3.84Q23.98 3.17 23.98 2.24Q23.98 1.32 23.3 0.65Z" fill="#000000"></path></g></mask></defs><g><path d="M9.86 13.68Q9.79 13.8 9.84 13.93Q9.89 14.06 10.02 14.11Q10.15 14.16 10.27 14.11L12.05 13.08Q12.24 12.96 12.41 12.86L12.58 12.74L11.23 11.38L11.06 11.59Q10.99 11.69 10.97 11.75Q10.94 11.81 10.87 11.9L9.86 13.68ZM22.49 1.49Q22.18 1.18 21.73 1.18Q21.29 1.18 20.95 1.49L11.95 10.49L11.86 10.58Q11.78 10.68 11.69 10.8L13.18 12.26L13.49 12L22.49 3Q22.8 2.69 22.8 2.24Q22.8 1.8 22.49 1.49Z" fill="rgba(0,0,0,0.9019607843137255)"></path></g></svg>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/media/startIcon.png b/entry/src/main/resources/base/media/startIcon.png
index 366f76459ffd4494ec40d0ddd5c59385b9c5da11..205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b 100644
Binary files a/entry/src/main/resources/base/media/startIcon.png and b/entry/src/main/resources/base/media/startIcon.png differ
diff --git a/entry/src/main/resources/base/media/stocks_pk.png b/entry/src/main/resources/base/media/stocks_pk.png
new file mode 100644
index 0000000000000000000000000000000000000000..57a1cc0a94a6698ee47c3e4658843aec1dc09b13
Binary files /dev/null and b/entry/src/main/resources/base/media/stocks_pk.png differ
diff --git a/entry/src/main/resources/base/profile/backup_config.json b/entry/src/main/resources/base/profile/backup_config.json
new file mode 100644
index 0000000000000000000000000000000000000000..78f40ae7c494d71e2482278f359ec790ca73471a
--- /dev/null
+++ b/entry/src/main/resources/base/profile/backup_config.json
@@ -0,0 +1,3 @@
+{
+  "allowToBackupRestore": true
+}
\ No newline at end of file
diff --git a/entry/src/main/resources/dark/element/color.json b/entry/src/main/resources/dark/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..79b11c2747aec33e710fd3a7b2b3c94dd9965499
--- /dev/null
+++ b/entry/src/main/resources/dark/element/color.json
@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#000000"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json
index 159a8eab21f299280c54bc60d95f8eebaf275a06..a0796e1d1845d31c02977a58de45cf31652fda05 100644
--- a/entry/src/main/resources/en_US/element/string.json
+++ b/entry/src/main/resources/en_US/element/string.json
@@ -10,27 +10,343 @@
     },
     {
       "name": "EntryAbility_label",
-      "value": "MultiTicketClass"
+      "value": "MultiStockCategoryApp"
     },
     {
-      "name": "title",
-      "value": "Key Scenario Implementation of a Multi-Stock Class"
+      "name": "regular_way",
+      "value": "Regular Way"
     },
     {
-      "name": "tab_adaptive",
-      "value": "Adaptive tab centering"
+      "name": "self_selected_settings",
+      "value": "Settings"
     },
     {
-      "name": "table_adaptive",
-      "value": "Table Adaptive Stretch"
+      "name": "stock_pk",
+      "value": "StockPK"
     },
     {
-      "name": "double_tab_adaptive",
-      "value": "Double tab adaptive centering"
+      "name": "more",
+      "value": "More"
     },
     {
-      "name": "computer",
-      "value": "Computer"
+      "name": "go_trade",
+      "value": "Go Trade"
+    },
+    {
+      "name": "transaction_details",
+      "value": "Transaction Details"
+    },
+    {
+      "name": "market_conditions",
+      "value": "Market Conditions"
+    },
+    {
+      "name": "information",
+      "value": "Information"
+    },
+    {
+      "name": "announcement",
+      "value": "XX Technology：Latest announcement."
+    },
+    {
+      "name": "closed_day",
+      "value": "Closed at 15:03:03 on October 19th"
+    },
+    {
+      "name": "some_company_technology",
+      "value": "Some Company Technology"
+    },
+    {
+      "name": "deep",
+      "value": "S"
+    },
+    {
+      "name": "confirm_purchase",
+      "value": "Confirm Purchase"
+    },
+    {
+      "name": "order_quantity",
+      "value": "Order quantity"
+    },
+    {
+      "name": "commissioned_price",
+      "value": "Commissioned Price"
+    },
+    {
+      "name": "shareholder_account",
+      "value": "Account: 500****5"
+    },
+    {
+      "name": "buy",
+      "value": "Buy"
+    },
+    {
+      "name": "Stock_name_code",
+      "value": "Company 3****3"
+    },
+    {
+      "name": "quantity",
+      "value": "Quantity"
+    },
+    {
+      "name": "price",
+      "value": "Price"
+    },
+    {
+      "name": "limit_down",
+      "value": "Limit Down  "
+    },
+    {
+      "name": "raising_limit",
+      "value": "  Raising Limit  "
+    },
+    {
+      "name": "already_held",
+      "value": "Already Held"
+    },
+    {
+      "name": "stock",
+      "value": "stock"
+    },
+    {
+      "name": "buy_able",
+      "value": "BuyAble"
+    },
+    {
+      "name": "stock_name",
+      "value": "Stock Name"
+    },
+    {
+      "name": "stock_number",
+      "value": "Stock Number"
+    },
+    {
+      "name": "latest_price",
+      "value": "Latest Price"
+    },
+    {
+      "name": "highs_and_lows",
+      "value": "High Low"
+    },
+    {
+      "name": "price_limit",
+      "value": "Price Limit"
+    },
+    {
+      "name": "gross",
+      "value": "Gross"
+    },
+    {
+      "name": "impressions",
+      "value": "Impressions"
+    },
+    {
+      "name": "volume_transaction",
+      "value": "Volume Business"
+    },
+    {
+      "name": "amplitude",
+      "value": "Amplitude"
+    },
+    {
+      "name": "change_hands",
+      "value": "Change Hands"
+    },
+    {
+      "name": "PEG",
+      "value": "PEG"
+    },
+    {
+      "name": "PB",
+      "value": "PB"
+    },
+    {
+      "name": "somebody_technology",
+      "value": "Technology"
+    },
+    {
+      "name": "certain_estate_company",
+      "value": "Real Estate"
+    },
+    {
+      "name": "certain_pharmaceutical_company",
+      "value": "Pharmacy"
+    },
+    {
+      "name": "billion",
+      "value": "B"
+    },
+    {
+      "name": "growth_enterprise_market",
+      "value": "G"
+    },
+    {
+      "name": "securities_margin_trading",
+      "value": "S"
+    },
+    {
+      "name": "certain_index",
+      "value": "Certain Index"
+    },
+    {
+      "name": "deep_number",
+      "value": "Deep Number"
+    },
+    {
+      "name": "science_technology",
+      "value": "Technology"
+    },
+    {
+      "name": "self_select_stock",
+      "value": "Self Select Stock"
+    },
+    {
+      "name": "all",
+      "value": "All"
+    },
+    {
+      "name": "add_custom_options",
+      "value": "Add custom options"
+    },
+    {
+      "name": "optional",
+      "value": "Optional"
+    },
+    {
+      "name": "market",
+      "value": "Market"
+    },
+    {
+      "name": "stock_company",
+      "value": "XX Stock"
+    },
+    {
+      "name": "stock_text_start",
+      "value": "xxxx xxxx"
+    },
+    {
+      "name": "stock_text_end",
+      "value": "xxxx xxxx"
+    },
+    {
+      "name": "stock_names",
+      "value": "Stock Name"
+    },
+    {
+      "name": "home_page",
+      "value": "Home Page"
+    },
+    {
+      "name": "time_share",
+      "value": "Time Share"
+    },
+    {
+      "name": "five_days",
+      "value": "Five Days"
+    },
+    {
+      "name": "daily_k",
+      "value": "Daily K"
+    },
+    {
+      "name": "week_k",
+      "value": "Week K"
+    },
+    {
+      "name": "month_k",
+      "value": "Month K"
+    },
+    {
+      "name": "season_k",
+      "value": "Season K"
+    },
+    {
+      "name": "half_year_k",
+      "value": "Half Year K"
+    },
+    {
+      "name": "year_k",
+      "value": "Year K"
+    },
+    {
+      "name": "discussion",
+      "value": "Discussion"
+    },
+    {
+      "name": "must_read",
+      "value": "Must Read"
+    },
+    {
+      "name": "capital",
+      "value": "Capital"
+    },
+    {
+      "name": "datum",
+      "value": "Datum"
+    },
+    {
+      "name": "announcements",
+      "value": "Announcement"
+    },
+    {
+      "name": "finance",
+      "value": "Finance"
+    },
+    {
+      "name": "research_report",
+      "value": "Research Report"
+    },
+    {
+      "name": "related_fund",
+      "value": "Related Fund"
+    },
+    {
+      "name": "now_begins",
+      "value": "Now Begins"
+    },
+    {
+      "name": "yesterday_close",
+      "value": "Yesterday Close"
+    },
+    {
+      "name": "turnover_rate",
+      "value": "Turnover Rate"
+    },
+    {
+      "name": "tallest",
+      "value": "tallest"
+    },
+    {
+      "name": "lowest",
+      "value": "lowest"
+    },
+    {
+      "name": "turnover",
+      "value": "turnover"
+    },
+    {
+      "name": "total_value",
+      "value": "Total Value"
+    },
+    {
+      "name": "text_hands",
+      "value": "4570H"
+    },
+    {
+      "name": "text_billion",
+      "value": "26.10Y"
+    },
+    {
+      "name": "turnover_value",
+      "value": "910.5W"
+    },
+    {
+      "name": "sell",
+      "value": "Sell"
+    },
+    {
+      "name": "text_buy",
+      "value": "Buy"
     }
   ]
 }
\ No newline at end of file
diff --git a/entry/src/main/resources/en_US/element/stringarray.json b/entry/src/main/resources/en_US/element/stringarray.json
deleted file mode 100644
index a7d2e0d7b65db815259ea3947be9e2e5554ff350..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/en_US/element/stringarray.json
+++ /dev/null
@@ -1,107 +0,0 @@
-{
-  "strarray": [
-    {
-      "name": "recommendation_tab_list",
-      "value": [
-        {
-          "value": "Recommendation"
-        },
-        {
-          "value": "7X24"
-        },
-        {
-          "value": "Focus News"
-        },
-        {
-          "value": "Calendar"
-        },
-        {
-          "value": "Follow"
-        },
-        {
-          "value": "A-shares"
-        }
-      ]
-    },
-    {
-      "name": "stock_options_list1",
-      "value": [
-        {
-          "value": "A-shares"
-        },
-        {
-          "value": "Global"
-        },
-        {
-          "value": "B-shares"
-        },
-        {
-          "value": "C-shares"
-        },
-        {
-          "value": "E*F"
-        },
-        {
-          "value": "Futures"
-        }
-      ]
-    },
-    {
-      "name": "stock_options_list2",
-      "value": [
-        {
-          "value": "Large market"
-        },
-        {
-          "value": "Plate"
-        },
-        {
-          "value": "ChiNext board"
-        },
-        {
-          "value": "Science and Technology Innovation Board"
-        },
-        {
-          "value": "Beijing Stock Exchange"
-        }
-      ]
-    },
-    {
-      "name": "indicator_name_list",
-      "value": [
-        {
-          "value": "Indicator Name"
-        },
-        {
-          "value": "XChanghong"
-        },
-        {
-          "value": "XTechnology"
-        },
-        {
-          "value": "XSatellite"
-        }
-      ]
-    },
-    {
-      "name": "indicator_name_column",
-      "value": [
-        {
-          "value": "Core indicators"
-        },
-        {
-          "value": "Industry affiliation"
-        },
-        {
-          "value": "Latest stock price"
-        },
-        {
-          "value": "Price fluctuation range"
-        },
-        {
-          "value": "Price to earnings ratio"
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json
index 78fd1d2d534bd6b239b9db5c574085459542daa6..2d2b65c6e54122201e199c8fa01f00ab69d7f887 100644
--- a/entry/src/main/resources/zh_CN/element/string.json
+++ b/entry/src/main/resources/zh_CN/element/string.json
@@ -2,7 +2,7 @@
   "string": [
     {
       "name": "module_desc",
-      "value": "模块描述"
+      "value": "module description"
     },
     {
       "name": "EntryAbility_desc",
@@ -10,27 +10,343 @@
     },
     {
       "name": "EntryAbility_label",
-      "value": "一多股票类"
+      "value": "一多股票类应用"
     },
     {
-      "name": "title",
-      "value": "一多股票类的关键场景实现"
+      "name": "regular_way",
+      "value": "普通交易"
     },
     {
-      "name": "tab_adaptive",
-      "value": "tab自适应居中"
+      "name": "self_selected_settings",
+      "value": "自选设置"
     },
     {
-      "name": "table_adaptive",
-      "value": "表格自适应延伸"
+      "name": "stock_pk",
+      "value": "股票PK"
     },
     {
-      "name": "double_tab_adaptive",
-      "value": "双tab自适应居中"
+      "name": "more",
+      "value": "更多"
     },
     {
-      "name": "computer",
-      "value": "计算机"
+      "name": "go_trade",
+      "value": "去交易"
+    },
+    {
+      "name": "transaction_details",
+      "value": "成交明细"
+    },
+    {
+      "name": "market_conditions",
+      "value": "千档行情"
+    },
+    {
+      "name": "information",
+      "value": "最新资讯"
+    },
+    {
+      "name": "announcement",
+      "value": "某某科技：xxxx公告"
+    },
+    {
+      "name": "closed_day",
+      "value": "已收盘 10-19 15:03:03"
+    },
+    {
+      "name": "some_company_technology",
+      "value": "某某科技(60**19)"
+    },
+    {
+      "name": "deep",
+      "value": "深"
+    },
+    {
+      "name": "confirm_purchase",
+      "value": "确认买入"
+    },
+    {
+      "name": "order_quantity",
+      "value": "委托数量"
+    },
+    {
+      "name": "commissioned_price",
+      "value": "委托价格"
+    },
+    {
+      "name": "shareholder_account",
+      "value": "股东账户：500****5"
+    },
+    {
+      "name": "buy",
+      "value": "买入"
+    },
+    {
+      "name": "Stock_name_code",
+      "value": "某某科技 3****3"
+    },
+    {
+      "name": "quantity",
+      "value": "数量"
+    },
+    {
+      "name": "price",
+      "value": "价格"
+    },
+    {
+      "name": "limit_down",
+      "value": "跌停  "
+    },
+    {
+      "name": "raising_limit",
+      "value": "  涨停  "
+    },
+    {
+      "name": "already_held",
+      "value": "已持有"
+    },
+    {
+      "name": "stock",
+      "value": "股"
+    },
+    {
+      "name": "buy_able",
+      "value": "可买"
+    },
+    {
+      "name": "stock_name",
+      "value": "股票名称"
+    },
+    {
+      "name": "stock_number",
+      "value": "股票编号"
+    },
+    {
+      "name": "latest_price",
+      "value": "最新价"
+    },
+    {
+      "name": "highs_and_lows",
+      "value": "涨跌"
+    },
+    {
+      "name": "price_limit",
+      "value": "涨跌幅"
+    },
+    {
+      "name": "gross",
+      "value": "总量"
+    },
+    {
+      "name": "impressions",
+      "value": "现量"
+    },
+    {
+      "name": "volume_transaction",
+      "value": "成交额"
+    },
+    {
+      "name": "amplitude",
+      "value": "振幅"
+    },
+    {
+      "name": "change_hands",
+      "value": "换手"
+    },
+    {
+      "name": "PEG",
+      "value": "市盈率"
+    },
+    {
+      "name": "PB",
+      "value": "市净率"
+    },
+    {
+      "name": "somebody_technology",
+      "value": "某某科技"
+    },
+    {
+      "name": "certain_estate_company",
+      "value": "某某地产"
+    },
+    {
+      "name": "certain_pharmaceutical_company",
+      "value": "某某药业"
+    },
+    {
+      "name": "billion",
+      "value": "亿"
+    },
+    {
+      "name": "growth_enterprise_market",
+      "value": "创"
+    },
+    {
+      "name": "securities_margin_trading",
+      "value": "融"
+    },
+    {
+      "name": "certain_index",
+      "value": "某某指数"
+    },
+    {
+      "name": "deep_number",
+      "value": "深某某数"
+    },
+    {
+      "name": "science_technology",
+      "value": "科创某某"
+    },
+    {
+      "name": "self_select_stock",
+      "value": "自选股"
+    },
+    {
+      "name": "all",
+      "value": "全部"
+    },
+    {
+      "name": "add_custom_options",
+      "value": "添加自选"
+    },
+    {
+      "name": "optional",
+      "value": "自选"
+    },
+    {
+      "name": "market",
+      "value": "行情"
+    },
+    {
+      "name": "stock_company",
+      "value": "券某某股"
+    },
+    {
+      "name": "stock_text_start",
+      "value": "本期这些股"
+    },
+    {
+      "name": "stock_text_end",
+      "value": "票最被看好"
+    },
+    {
+      "name": "stock_names",
+      "value": "股票名称"
+    },
+    {
+      "name": "home_page",
+      "value": "首页"
+    },
+    {
+      "name": "time_share",
+      "value": "分时"
+    },
+    {
+      "name": "five_days",
+      "value": "五日"
+    },
+    {
+      "name": "daily_k",
+      "value": "日K"
+    },
+    {
+      "name": "week_k",
+      "value": "周K"
+    },
+    {
+      "name": "month_k",
+      "value": "月K"
+    },
+    {
+      "name": "season_k",
+      "value": "季K"
+    },
+    {
+      "name": "half_year_k",
+      "value": "半年K"
+    },
+    {
+      "name": "year_k",
+      "value": "年K"
+    },
+    {
+      "name": "discussion",
+      "value": "讨论"
+    },
+    {
+      "name": "must_read",
+      "value": "必读"
+    },
+    {
+      "name": "capital",
+      "value": "资金"
+    },
+    {
+      "name": "datum",
+      "value": "资料"
+    },
+    {
+      "name": "announcements",
+      "value": "公告"
+    },
+    {
+      "name": "finance",
+      "value": "财务"
+    },
+    {
+      "name": "research_report",
+      "value": "研报"
+    },
+    {
+      "name": "related_fund",
+      "value": "关联基金"
+    },
+    {
+      "name": "now_begins",
+      "value": "今开"
+    },
+    {
+      "name": "yesterday_close",
+      "value": "昨收"
+    },
+    {
+      "name": "turnover_rate",
+      "value": "换手率"
+    },
+    {
+      "name": "tallest",
+      "value": "最高"
+    },
+    {
+      "name": "lowest",
+      "value": "最低"
+    },
+    {
+      "name": "turnover",
+      "value": "成交量"
+    },
+    {
+      "name": "total_value",
+      "value": "总市值"
+    },
+    {
+      "name": "text_hands",
+      "value": "4570手"
+    },
+    {
+      "name": "text_billion",
+      "value": "26.10亿"
+    },
+    {
+      "name": "turnover_value",
+      "value": "910.5万"
+    },
+    {
+      "name": "sell",
+      "value": "卖"
+    },
+    {
+      "name": "text_buy",
+      "value": "买"
     }
   ]
 }
\ No newline at end of file
diff --git a/entry/src/main/resources/zh_CN/element/stringarray.json b/entry/src/main/resources/zh_CN/element/stringarray.json
deleted file mode 100644
index f88e325c1898ddde42e1c8840c2d94db83eed6ee..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/zh_CN/element/stringarray.json
+++ /dev/null
@@ -1,107 +0,0 @@
-{
-  "strarray": [
-    {
-      "name": "recommendation_tab_list",
-      "value": [
-        {
-          "value": "推荐"
-        },
-        {
-          "value": "7X24"
-        },
-        {
-          "value": "要闻"
-        },
-        {
-          "value": "日历"
-        },
-        {
-          "value": "关注"
-        },
-        {
-          "value": "A股"
-        }
-      ]
-    },
-    {
-      "name": "stock_options_list1",
-      "value": [
-        {
-          "value": "A股"
-        },
-        {
-          "value": "全球"
-        },
-        {
-          "value": "B股"
-        },
-        {
-          "value": "C股"
-        },
-        {
-          "value": "E*F"
-        },
-        {
-          "value": "期货"
-        }
-      ]
-    },
-    {
-      "name": "stock_options_list2",
-      "value": [
-        {
-          "value": "大盘"
-        },
-        {
-          "value": "板块"
-        },
-        {
-          "value": "创业板"
-        },
-        {
-          "value": "科创板"
-        },
-        {
-          "value": "北交所"
-        }
-      ]
-    },
-    {
-      "name": "indicator_name_list",
-      "value": [
-        {
-          "value": "指标名称"
-        },
-        {
-          "value": "某某长虹"
-        },
-        {
-          "value": "某某科技"
-        },
-        {
-          "value": "某某卫星"
-        }
-      ]
-    },
-    {
-      "name": "indicator_name_column",
-      "value": [
-        {
-          "value": "核心指标"
-        },
-        {
-          "value": "所属行业"
-        },
-        {
-          "value": "最新股价（元）"
-        },
-        {
-          "value": "涨跌幅"
-        },
-        {
-          "value": "市盈率（TTM）"
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/hvigor/hvigor-config.json5 b/hvigor/hvigor-config.json5
index 73bfab4e997c8d4aea53b22fdd7f10112b30987f..5bebc9755447385d82ce4138f54d991b1f85f348 100644
--- a/hvigor/hvigor-config.json5
+++ b/hvigor/hvigor-config.json5
@@ -1,17 +1,22 @@
 {
-  "modelVersion": "5.0.0",
+  "modelVersion": "5.0.5",
   "dependencies": {
   },
   "execution": {
-    // "daemon": true,                          /* Enable daemon compilation. Default: true */
-    // "incremental": true,                     /* Enable incremental compilation. Default: true */
-    // "parallel": true,                        /* Enable parallel compilation. Default: true */
-    // "typeCheck": false,                      /* Enable typeCheck. Default: false */
+    // "analyze": "normal",                     /* Define the build analyze mode. Value: [ "normal" | "advanced" | false ]. Default: "normal" */
+    // "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. Default: false */
+    // "stacktrace": false                      /* Disable stacktrace compilation. Value: [ true | false ]. Default: false */
+  },
+  "nodeOptions": {
+    // "maxOldSpaceSize": 8192                  /* Enable nodeOptions maxOldSpaceSize compilation. Unit M. Used for the daemon process. Default: 8192*/
+    // "exposeGC": true                         /* Enable to trigger garbage collection explicitly. Default: true*/
   }
-}
\ No newline at end of file
+}
diff --git a/oh-package.json5 b/oh-package.json5
index 9927a322927f4632cc8b5c95825f1fc7cb032d8b..0b5f1525994c72e8baa523c874ff875041d082d5 100644
--- a/oh-package.json5
+++ b/oh-package.json5
@@ -1,14 +1,9 @@
 {
-  "modelVersion": "5.0.0",
-  "name": "myapplication",
-  "version": "1.0.0",
+  "modelVersion": "5.0.5",
   "description": "Please describe the basic information.",
-  "main": "",
-  "author": "",
-  "license": "",
   "dependencies": {
   },
   "devDependencies": {
-    "@ohos/hypium": "1.0.15"
+    "@ohos/mpchart": "^3.0.0-rc.1"
   }
-}
\ No newline at end of file
+}
diff --git a/screenshots/Devices/image1.en.png b/screenshots/Devices/image1.en.png
deleted file mode 100644
index 310c4dbe84a20646bcf278cf4f72f4ba7b93ec47..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image1.en.png and /dev/null differ
diff --git a/screenshots/Devices/image1.png b/screenshots/Devices/image1.png
deleted file mode 100644
index 09c07656846b069b232914d8b5c009ce18403e95..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image1.png and /dev/null differ
diff --git a/screenshots/Devices/image2.en.png b/screenshots/Devices/image2.en.png
deleted file mode 100644
index ea3af38cc049c3880a2c611d225b8c2f4d437fb7..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image2.en.png and /dev/null differ
diff --git a/screenshots/Devices/image2.png b/screenshots/Devices/image2.png
deleted file mode 100644
index ff981bee70b9d3c9ffaad2b730656896c02f510c..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image2.png and /dev/null differ
diff --git a/screenshots/Devices/image3.en.png b/screenshots/Devices/image3.en.png
deleted file mode 100644
index c3e280bd9e61f6471486694d293066d19a38349a..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image3.en.png and /dev/null differ
diff --git a/screenshots/Devices/image3.png b/screenshots/Devices/image3.png
deleted file mode 100644
index d303985b6ad5f06ad29c677f31681d588f0b59a8..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image3.png and /dev/null differ
diff --git a/screenshots/Devices/image4.en.png b/screenshots/Devices/image4.en.png
deleted file mode 100644
index 082c6581fee4d824901792b36cc12a70f2e479e4..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image4.en.png and /dev/null differ
diff --git a/screenshots/Devices/image4.png b/screenshots/Devices/image4.png
deleted file mode 100644
index 3ec55d418185b4d8ef3e53961abccd86c6bc5279..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image4.png and /dev/null differ
diff --git a/screenshots/Devices/image5.en.png b/screenshots/Devices/image5.en.png
deleted file mode 100644
index cf38f70971fdfcadb5c23554f210ed0279f5162c..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image5.en.png and /dev/null differ
diff --git a/screenshots/Devices/image5.png b/screenshots/Devices/image5.png
deleted file mode 100644
index a97cfaa9f5a9a61cd794e217f998e96c427cc90e..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image5.png and /dev/null differ
diff --git a/screenshots/Devices/image6.en.png b/screenshots/Devices/image6.en.png
deleted file mode 100644
index 73a25e9c162c39faec836d4237a00986056686f6..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image6.en.png and /dev/null differ
diff --git a/screenshots/Devices/image6.png b/screenshots/Devices/image6.png
deleted file mode 100644
index ab886c8df601caefdcf62457c808b4ca4425de04..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image6.png and /dev/null differ
diff --git a/screenshots/Devices/image7.en.png b/screenshots/Devices/image7.en.png
deleted file mode 100644
index aba6e500097aa32f975142a250c86572a4e003ce..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image7.en.png and /dev/null differ
diff --git a/screenshots/Devices/image7.png b/screenshots/Devices/image7.png
deleted file mode 100644
index fe7ca05e8b71d33e09cdd724835a5a19beb78ee0..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image7.png and /dev/null differ
diff --git a/screenshots/Devices/image8.en.png b/screenshots/Devices/image8.en.png
deleted file mode 100644
index 8f5d4b06d0fdf55815fb070e1317e9458ebe75ae..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image8.en.png and /dev/null differ
diff --git a/screenshots/Devices/image8.png b/screenshots/Devices/image8.png
deleted file mode 100644
index 740ce57c1315c22e47d40d4b8bb0e8cb697a5ed1..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image8.png and /dev/null differ
diff --git a/screenshots/Devices/image9.en.png b/screenshots/Devices/image9.en.png
deleted file mode 100644
index 07b0ae0ce3fe4262f6ba0c7c4b3a46a685933b2c..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image9.en.png and /dev/null differ
diff --git a/screenshots/Devices/image9.png b/screenshots/Devices/image9.png
deleted file mode 100644
index ec4ba1bf766d5d7129e2eff6ad98358c6b12af6b..0000000000000000000000000000000000000000
Binary files a/screenshots/Devices/image9.png and /dev/null differ
diff --git a/screenshots/devices/detail-page-foldablescre.png b/screenshots/devices/detail-page-foldablescre.png
new file mode 100644
index 0000000000000000000000000000000000000000..6fac5b98bee280eeed375060af268932b79a3e9f
Binary files /dev/null and b/screenshots/devices/detail-page-foldablescre.png differ
diff --git a/screenshots/devices/detail-page-phone.png b/screenshots/devices/detail-page-phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c47ea92dfe9bdd07f4bbc63009b3f7ff443532a
Binary files /dev/null and b/screenshots/devices/detail-page-phone.png differ
diff --git a/screenshots/devices/detail-page-tablet.png b/screenshots/devices/detail-page-tablet.png
new file mode 100644
index 0000000000000000000000000000000000000000..06b675c0cc6e0fec80ae8f598e3c0cb3cd88869f
Binary files /dev/null and b/screenshots/devices/detail-page-tablet.png differ
diff --git a/screenshots/devices/home-page-foldablescre.png b/screenshots/devices/home-page-foldablescre.png
new file mode 100644
index 0000000000000000000000000000000000000000..d13b112d231e8e2afdf5f4fc3826993983cfe1e5
Binary files /dev/null and b/screenshots/devices/home-page-foldablescre.png differ
diff --git a/screenshots/devices/home-page-phone.png b/screenshots/devices/home-page-phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..f79023ee445318aaedd0480139c90d87e2064727
Binary files /dev/null and b/screenshots/devices/home-page-phone.png differ
diff --git a/screenshots/devices/home-page-tablet.png b/screenshots/devices/home-page-tablet.png
new file mode 100644
index 0000000000000000000000000000000000000000..387387b34376afb3d4da34a2d52b5917be4cd986
Binary files /dev/null and b/screenshots/devices/home-page-tablet.png differ
diff --git a/screenshots/devices/split-screen-foldablescre.png b/screenshots/devices/split-screen-foldablescre.png
new file mode 100644
index 0000000000000000000000000000000000000000..db09497f46c0c50c0a6b0028be334e0b383bffb2
Binary files /dev/null and b/screenshots/devices/split-screen-foldablescre.png differ
diff --git a/screenshots/devices/split-screen-tablet.png b/screenshots/devices/split-screen-tablet.png
new file mode 100644
index 0000000000000000000000000000000000000000..23f3206c6b358d88a6f9a3855b298b3ab6995a0f
Binary files /dev/null and b/screenshots/devices/split-screen-tablet.png differ
diff --git a/screenshots/devices/stock-affirm-pop-foldablescre.png b/screenshots/devices/stock-affirm-pop-foldablescre.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0340032efa30efd4fab45d710aecc79f8e96fb7
Binary files /dev/null and b/screenshots/devices/stock-affirm-pop-foldablescre.png differ
diff --git a/screenshots/devices/stock-affirm-pop-phone.png b/screenshots/devices/stock-affirm-pop-phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..ab899bf0688d7f50663f8dcded0c170abe22f862
Binary files /dev/null and b/screenshots/devices/stock-affirm-pop-phone.png differ
diff --git a/screenshots/devices/stock-affirm-pop-tablet.png b/screenshots/devices/stock-affirm-pop-tablet.png
new file mode 100644
index 0000000000000000000000000000000000000000..364aabe0bbb2a395b6d773ea44b1d6ccf2037e23
Binary files /dev/null and b/screenshots/devices/stock-affirm-pop-tablet.png differ
diff --git a/screenshots/devices/stock-pop-foldablescre.png b/screenshots/devices/stock-pop-foldablescre.png
new file mode 100644
index 0000000000000000000000000000000000000000..39663f766002f979448f08d678681da4d8cec75c
Binary files /dev/null and b/screenshots/devices/stock-pop-foldablescre.png differ
diff --git a/screenshots/devices/stock-pop-phone.png b/screenshots/devices/stock-pop-phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6bc40707409411ab673f93b62eadf084e7eecd4
Binary files /dev/null and b/screenshots/devices/stock-pop-phone.png differ
diff --git a/screenshots/devices/stock-pop-tablet.png b/screenshots/devices/stock-pop-tablet.png
new file mode 100644
index 0000000000000000000000000000000000000000..d196c7831b6df03ffd2377c9c27dcb835a3affd4
Binary files /dev/null and b/screenshots/devices/stock-pop-tablet.png differ