完善部分阴影系统；

把所有px单位转换为rem；

src/components/Header.vue

@@ -76,6 +76,14 @@ const props = defineProps({
     type: Function,
     default: null,
   },
+  background: {
+    type: String,
+    default: 'url(/assets/icons/drawable-xxhdpi/action_bar_default.png)',
+  },
+  color: {
+    type: String,
+    default: 'white',
+  },
 })
 
 const localFolderExpanded = ref(false)
@@ -92,7 +100,15 @@ const showFolderIcon = computed(() => {
 
 const leftIconSource = computed(() => {
   // 根据leftType属性返回对应的图标路径
-  return props.leftType === 'settings' ? '/assets/icons/drawable-xxhdpi/btn_settings.png' : '/assets/icons/drawable-xxhdpi/btn_back.png'
+  if (props.leftType === 'settings') {
+    return '/assets/icons/drawable-xxhdpi/btn_settings.png'
+  } else {
+    if (props.color !== 'white') {
+      return '/assets/icons/drawable-xxhdpi/btn_back_black.png'
+    } else {
+      return '/assets/icons/drawable-xxhdpi/btn_back.png'
+    }
+  }
 })
 
 const handleFolderToggle = () => {
@@ -135,19 +151,18 @@ const handleTitlePress = () => {
 
 <style scoped lang="less">
 .component {
-  padding: 4.5rem 0.72rem 0.5rem;
-  background-image: url(/assets/icons/drawable-xxhdpi/title_bar_background.png);
+  padding: 2.5rem 0.72rem 0.5rem;
+  background: v-bind(background);
   background-size: 100% 100%;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: -2.8rem;
+  flex-direction: column;
+  align-items: flex-end;
   position: relative;
+  box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.2);
   .inner {
     display: flex;
     justify-content: space-between;
     width: 100%;
-    transform: translateY(-3.2rem);
   }
   .left-icon,
   .image_4 {
@@ -179,7 +194,7 @@ const handleTitlePress = () => {
     }
 
     .text {
-      color: #e3dbd4;
+      color: v-bind(color);
       font-size: 1.01rem;
       line-height: 1.01rem;
     }