diff --git a/lib/main.dart b/lib/main.dart
index 18b2f85..b4229ab 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:limiting_direction_csx/limiting_direction_csx.dart';
 import 'package:wow_english/app/app.dart';
+import 'package:flutter/services.dart';
 
 void main() async {
   ///设置设备默认方向
@@ -11,6 +12,13 @@ void main() async {
     await LimitingDirectionCsx.setScreenDirection(DeviceDirectionMask.Landscape);
   } else {
     await SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight]);
+    // SystemChrome.setEnabledSystemUIMode(
+    //   SystemUiMode.manual,
+    //   overlays: [SystemUiOverlay.top],
+    // );
+    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle( //设置状态栏透明
+      statusBarColor: Colors.transparent,
+    ));
   }
   runApp(const App());
 }
diff --git a/lib/pages/reading/bloc/reading_bloc.dart b/lib/pages/reading/bloc/reading_bloc.dart
new file mode 100644
index 0000000..245d8e3
--- /dev/null
+++ b/lib/pages/reading/bloc/reading_bloc.dart
@@ -0,0 +1,13 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+part 'reading_event.dart';
+part 'reading_state.dart';
+
+class ReadingPageBloc extends Bloc<ReadingPageEvent, ReadingPageState> {
+  ReadingPageBloc() : super(ReadingPageInitial()) {
+    on<ReadingPageEvent>((event, emit) {
+      // TODO: implement event handler
+    });
+  }
+}
diff --git a/lib/pages/reading/bloc/reading_event.dart b/lib/pages/reading/bloc/reading_event.dart
new file mode 100644
index 0000000..aac9518
--- /dev/null
+++ b/lib/pages/reading/bloc/reading_event.dart
@@ -0,0 +1,4 @@
+part of 'reading_bloc.dart';
+
+@immutable
+abstract class ReadingPageEvent {}
diff --git a/lib/pages/reading/bloc/reading_state.dart b/lib/pages/reading/bloc/reading_state.dart
new file mode 100644
index 0000000..0de574a
--- /dev/null
+++ b/lib/pages/reading/bloc/reading_state.dart
@@ -0,0 +1,6 @@
+part of 'reading_bloc.dart';
+
+@immutable
+abstract class ReadingPageState {}
+
+class ReadingPageInitial extends ReadingPageState {}
diff --git a/lib/pages/reading/reading_page.dart b/lib/pages/reading/reading_page.dart
new file mode 100644
index 0000000..ad68fb5
--- /dev/null
+++ b/lib/pages/reading/reading_page.dart
@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:wow_english/common/extension/string_extension.dart';
+import 'package:wow_english/pages/practice/widgets/practice_header_widget.dart';
+
+import 'bloc/reading_bloc.dart';
+
+class ReadingItemPage extends StatelessWidget {
+  const ReadingItemPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (_) => ReadingPageBloc(),
+      child: _ReadingPage(),
+    );
+  }
+}
+
+class _ReadingPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return BlocListener<ReadingPageBloc, ReadingPageState>(
+      listener: (context, state) {},
+      child: _voiceAnswerView(),
+    );
+  }
+
+  Widget _voiceAnswerView() =>
+      BlocBuilder<ReadingPageBloc, ReadingPageState>(builder: (context, state) {
+        final bloc = BlocProvider.of<ReadingPageBloc>(context);
+        return Container(
+          color: Colors.white,
+          child: Stack(
+            children: [
+              Positioned(
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  child: Image.asset(
+                    'bottom_grass'.assetPng,
+                    fit: BoxFit.fitWidth,
+                  )),
+              Column(
+                children: [
+                  PracticeHeaderWidget(
+                    title: '1/8',
+                    onTap: () {
+                      Navigator.pop(context);
+                    },
+                  ),
+                  Expanded(
+                      child: PageView.builder(
+                          itemCount: 10,
+                          itemBuilder: (context, int index) {
+                            return _voiceAnswerItem();
+                          }))
+                ],
+              )
+            ],
+          ),
+        );
+      });
+
+  Widget _voiceAnswerItem() =>
+      BlocBuilder<VoiceAnswerBloc, VoiceAnswerState>(builder: (context, state) {
+        return Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Image.network(
+              'https://img.liblibai.com/web/648331d5a2cb5.png?image_process=format,webp&x-oss-process=image/resize,w_2980,m_lfit/format,webp',
+              height: 186.h,
+              width: 186.w,
+            ),
+            160.horizontalSpace,
+            Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Image.asset(
+                  'voice'.assetPng,
+                  height: 52.h,
+                  width: 46.w,
+                ),
+                70.verticalSpace,
+                Image.asset(
+                  'micro_phone'.assetPng,
+                  height: 75.w,
+                  width: 75.w,
+                )
+              ],
+            )
+          ],
+        );
+      });
+}