diff --git a/app/src/main/res/color/selector_default_text_color_black_enable_white.xml b/app/src/main/res/color/selector_default_text_color_black_enable_white.xml
new file mode 100644
index 00000000..9efaa342
--- /dev/null
+++ b/app/src/main/res/color/selector_default_text_color_black_enable_white.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_enabled="false"  android:color="@color/white" />
+    <item android:state_pressed="true"  android:color="@color/white" />
+    <item android:state_selected="true"  android:color="@color/white" />
+    <item android:state_checked="true"  android:color="@color/white" />
+    <item android:color="@color/black" />
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ripple_btn_checked.xml b/app/src/main/res/drawable/ripple_btn_checked.xml
new file mode 100644
index 00000000..3d9ab431
--- /dev/null
+++ b/app/src/main/res/drawable/ripple_btn_checked.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="@color/ripple_color">
+    <item android:drawable="@drawable/shape_btn_check"/>
+</ripple>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/selector_bg_gradient_checkbox.xml b/app/src/main/res/drawable/selector_bg_gradient_checkbox.xml
new file mode 100644
index 00000000..0025cfcd
--- /dev/null
+++ b/app/src/main/res/drawable/selector_bg_gradient_checkbox.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_enabled="false" android:drawable="@drawable/ripple_btn_normal"></item>
+    <item android:state_checked="true" android:drawable="@drawable/ripple_btn_normal"/>
+    <item android:state_pressed="true" android:drawable="@drawable/ripple_btn_normal"/>
+    <item android:state_selected="true" android:drawable="@drawable/ripple_btn_normal"></item>
+    <item android:drawable="@drawable/ripple_btn_checked"/>
+</selector>
diff --git a/app/src/main/res/drawable/shape_btn_check.xml b/app/src/main/res/drawable/shape_btn_check.xml
new file mode 100644
index 00000000..172be798
--- /dev/null
+++ b/app/src/main/res/drawable/shape_btn_check.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@color/colorSurface"></solid>
+    <stroke android:color="@color/gray_121" android:width="0.1dp"></stroke>
+    <corners android:radius="30dp" />
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_offline_map.xml b/app/src/main/res/layout/fragment_offline_map.xml
index 424a8307..3fa91d0a 100644
--- a/app/src/main/res/layout/fragment_offline_map.xml
+++ b/app/src/main/res/layout/fragment_offline_map.xml
@@ -4,46 +4,88 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/design_default_color_background"
+    android:background="@color/bg_left_pannel"
     tools:context=".ui.fragment.offlinemap.OfflineMapFragment">
 
-    <com.google.android.material.tabs.TabLayout
-        android:id="@+id/offline_map_tab_layout"
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/title_layout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/blue"
-        app:layout_constraintLeft_toLeftOf="parent"
-        app:layout_constraintTop_toTopOf="parent">
-
-        <com.google.android.material.tabs.TabItem
+        app:layout_constraintTop_toTopOf="parent"
+        style="@style/left_pannel_title_layout">
+        <androidx.appcompat.widget.AppCompatImageView
+            android:id="@+id/offline_map_back"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:text="下载管理" />
+            app:layout_constraintLeft_toLeftOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            android:layout_marginTop="5dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            android:background="@drawable/selector_bg_round_button"
+            android:foreground="@drawable/ripple_btn_press"
+            style="@style/btn_round"
+            android:src="@drawable/ic_baseline_keyboard_arrow_left_24"></androidx.appcompat.widget.AppCompatImageView>
 
-        <com.google.android.material.tabs.TabItem
+        <androidx.appcompat.widget.AppCompatTextView
+            android:id="@+id/tv_title"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:text="城市列表" />
-    </com.google.android.material.tabs.TabLayout>
+            android:textSize="@dimen/left_pannel_title_font"
+            android:textStyle="bold"
+            android:text="离线地图"
+            app:layout_constraintLeft_toLeftOf="parent"
+            app:layout_constraintRight_toRightOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintBottom_toBottomOf="parent"></androidx.appcompat.widget.AppCompatTextView>
 
-
-    <androidx.viewpager2.widget.ViewPager2
-        android:id="@+id/offline_map_viewpager"
+    </androidx.constraintlayout.widget.ConstraintLayout>
+    <androidx.cardview.widget.CardView
         android:layout_width="match_parent"
         android:layout_height="0dp"
+        app:layout_constraintTop_toBottomOf="@id/title_layout"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/offline_map_tab_layout" />
+        style="@style/default_card_view">
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:paddingVertical="@dimen/default_widget_padding"
+            android:orientation="vertical">
+            <com.google.android.material.tabs.TabLayout
+                android:id="@+id/offline_map_tab_layout"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:background="@color/transparent"
+                app:tabBackground="@drawable/selector_bg_gradient_checkbox"
+                app:tabTextColor="@color/black"
+                app:tabGravity="center"
+                app:tabPadding="0dp"
+                app:tabIndicator="@null"
+                app:tabMode="scrollable"
+                app:tabIndicatorHeight="0dp"
+                app:tabSelectedTextColor="@color/white"
+                app:layout_constraintLeft_toLeftOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/title_layout">
 
-    <ImageView
-        android:id="@+id/offline_map_back"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginLeft="10dp"
-        android:padding="10dp"
-        android:src="@mipmap/icon_back_n"
-        app:layout_constraintBottom_toBottomOf="@id/offline_map_tab_layout"
-        app:layout_constraintLeft_toLeftOf="parent"
-        app:layout_constraintTop_toTopOf="@id/offline_map_tab_layout" />
+                <com.google.android.material.tabs.TabItem
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginHorizontal="@dimen/default_widget_padding"
+                    android:text="下载管理" />
+
+                <com.google.android.material.tabs.TabItem
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginHorizontal="@dimen/default_widget_padding"
+                    android:text="城市列表" />
+            </com.google.android.material.tabs.TabLayout>
 
 
+            <androidx.viewpager2.widget.ViewPager2
+                android:id="@+id/offline_map_viewpager"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/offline_map_tab_layout" />
+        </LinearLayout>
+    </androidx.cardview.widget.CardView>
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index a3eca443..cfdcea11 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -115,6 +115,15 @@
         <item name="android:paddingBottom">1dp</item>
     </style>
 
+    <style name="checked_gradient_color" parent="TextAppearance.AppCompat.Button">
+        <item name="android:textColor">@color/selector_default_text_color_black_enable_white</item>
+        <item name="android:background">@drawable/selector_bg_gradient_checkbox</item>
+        <item name="android:clickable">true</item>
+        <item name="android:focusable">true</item>
+        <item name="android:gravity">center</item>
+        <item name="android:paddingBottom">1dp</item>
+    </style>
+
     <style name="fm_btn_default_blue_white" parent="@android:style/Widget.Button">
         <item name="android:background">@drawable/selector_bg_blue_gray_bg_4_radius</item>
         <item name="android:textColor">@color/selector_default_text_color_white_enable_gray</item>