diff --git a/entry/src/main/cpp/render/egl_core.cpp b/entry/src/main/cpp/render/egl_core.cpp
index 34226dd2fe8ddc6a2e7a3c67c8414e2a1c438d63..52e1280322ec55ac2c6a1fc4076469dfcdbeb20b 100644
--- a/entry/src/main/cpp/render/egl_core.cpp
+++ b/entry/src/main/cpp/render/egl_core.cpp
@@ -58,17 +58,17 @@ char shaderfs[] = "#version 300 es\n"
                   "precision mediump float;\n"
                   "out vec4 FragColor; \n"
                   "struct Material { \n"
-                  mpler2D diffuse; \n"
-                  mpler2D specular; \n"
-                  oat shininess; \n"
+                  "mpler2D diffuse; \n"
+                  "mpler2D specular; \n"
+                  "oat shininess; \n"
                   "}; \n"
                   "uniform Material material;\n"
 
                   "struct Light { \n"
-                  c3 position; \n"
-                  c3 ambient; \n"
-                  c3 diffuse; \n"
-                  c3 specular; \n"
+                  "c3 position; \n"
+                  "c3 ambient; \n"
+                  "c3 diffuse; \n"
+                  "c3 specular; \n"
                   "}; \n"
                   "uniform Light light; \n"
 
@@ -77,18 +77,18 @@ char shaderfs[] = "#version 300 es\n"
                   "in vec3 FragPos;\n"
                   "in vec2 TexCoords;\n"
                   "void main() { \n"
-                  c3 ambient = light.ambient * vec3(0.5f,1.0f,0.6f); \n"
-
-                  c3 norm = normalize(Normal); \n"
-                  c3 lightDir = normalize(light.position - FragPos); \n"
-                  oat diff = max(dot(norm, lightDir), 0.0); \n"
-                  c3 diffuse = light.diffuse * (diff * vec3(0.5f,1.0f,0.6f));\n"
-                  c3 viewDir = normalize(viewPos - FragPos); \n"
-                  c3 reflectDir = reflect(-lightDir, norm); \n"
-                  oat spec = pow(max(dot(viewDir, reflectDir), 0.0), material.shininess); \n"
-                  c3 specular = light.specular * (spec * vec3(0.5f,1.0f,0.6f)); \n"
-                  c3 result = ambient + diffuse + specular; \n"
-                  agColor = vec4(result, 1.0); \n"
+                  "c3 ambient = light.ambient * vec3(0.5f,1.0f,0.6f); \n"
+
+                  "c3 norm = normalize(Normal); \n"
+                  "c3 lightDir = normalize(light.position - FragPos); \n"
+                  "oat diff = max(dot(norm, lightDir), 0.0); \n"
+                  "c3 diffuse = light.diffuse * (diff * vec3(0.5f,1.0f,0.6f));\n"
+                  "c3 viewDir = normalize(viewPos - FragPos); \n"
+                  "c3 reflectDir = reflect(-lightDir, norm); \n"
+                  "oat spec = pow(max(dot(viewDir, reflectDir), 0.0), material.shininess); \n"
+                  "c3 specular = light.specular * (spec * vec3(0.5f,1.0f,0.6f)); \n"
+                  "c3 result = ambient + diffuse + specular; \n"
+                  "agColor = vec4(result, 1.0); \n"
                   "}";
 
 // 遮光板
diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets
index 4cb4144ec62dbede9acc6661f68e6d19399f2813..7f6b8bfd5eba32be013ea97fd614d4b4c38cda69 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -1,32 +1,33 @@
-
 @Entry
 @Component
 struct Index {
   private context = null;
   private context2 = null;
-  private resmgr = getContext().resourceManager;  // 获取js的资源对象
   private controller: TabsController = new TabsController()
   @State xcHeight: number = 500
   @State flag: boolean = false
   @State xcOpacity: number = 1
   @State xcRotate: number = 0
+  @State message: string = 'MyXcomponent'
+  @State currentIndex: number = 0
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Button('draw triangle')
-        .onClick(() => {
-          this.context2.setTexture(this.resmgr, "icon.png");
+      Row() {
+        Column() {
+          Text(this.message)
+            .fontSize(30)
+            .fontColor(0x182431)
+            .fontWeight('bold')
+            .textAlign(TextAlign.Start)
+        }
+        .margin({
+          left: '6.7%'
         })
-        .width(200)
-        .height(100)
+      }
+      .width('100%')
+      .height('7.2%')
 
-      Image($r("app.media.123"))
-        .width(100)
-        .height(100)
-        .border({ color: Color.Red, radius: 16, width: 2 })
-        .onClick(() => {
-          this.xcOpacity -= 0.1
-        })
       Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
         TabContent() {
           Stack() {
@@ -52,7 +53,7 @@ struct Index {
             .zIndex(12)
           }
         }
-        .tabBar('DrawTransform')
+        .tabBar(this.TabBuilder('DrawTransform', 0))
 
         TabContent() {
           Stack() {
@@ -73,15 +74,47 @@ struct Index {
               .zIndex(11)
           }
         }
-        .tabBar('DrawCube')
+        .tabBar(this.TabBuilder('DrawCube', 1))
       }
       .barWidth('100%') // 设置TabBar宽度
       .barHeight(60) // 设置TabBar高度
-      .width('100%') // 设置Tabs组件宽度
-      .height('100%') // 设置Tabs组件高度
+      .width('93.2%') // 设置Tabs组件宽度
+      .height('86.7%') // 设置Tabs组件高度
+      .align(Alignment.Center)
+      .onChange((index) => {
+        this.currentIndex = index
+      })
       .backgroundColor(0xF5F5F5) // 设置Tabs组件背景颜色
     }
     .width('100%')
     .height('100%')
   }
+
+  @Builder TabBuilder(title: string, targetIndex: number) {
+    Column() {
+      Text(title)
+        .fontWeight(this.currentIndex === targetIndex ? "bold" : "normal")
+        .fontSize(16)
+        .fontColor(this.currentIndex === targetIndex ? 0x007DFF : 0x182431)
+        .padding({
+          left: targetIndex === 0 ? "22.6%" : "2.2%",
+          right: targetIndex === 0 ? "2.2%" : "48.2%",
+        })
+        .opacity(this.currentIndex === targetIndex ? 1 : 0.6)
+      Divider()
+        .strokeWidth(2)
+        .color('#007DFF')
+        .opacity(this.currentIndex === targetIndex ? 1 : 0)
+        .padding({
+          left: targetIndex === 0 ? "28%" : "6%",
+          right: targetIndex === 0 ? "7%" : "51%",
+        })
+        .margin({
+          top: 8
+        })
+    }
+    .width('100%')
+    .height(50)
+    .justifyContent(FlexAlign.Center)
+  }
 }
\ No newline at end of file