diff --git a/public/icons/uploadImg.png b/public/icons/uploadImg.png
new file mode 100644
index 0000000..1b309bd
Binary files /dev/null and b/public/icons/uploadImg.png differ
diff --git a/src/layout/background/BackgroundSwtich.tsx b/src/layout/background/BackgroundSwtich.tsx
index e947d8c..020039d 100644
--- a/src/layout/background/BackgroundSwtich.tsx
+++ b/src/layout/background/BackgroundSwtich.tsx
@@ -1,193 +1,235 @@
-import {
-    computed,
-    defineComponent,
-    onMounted,
-    ref,
-    watch,
-} from 'vue'
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'
 import useLayoutStore from '../useLayoutStore'
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
 import clsx from 'clsx'
-import { BiChevronLeft } from "oh-vue-icons/icons";
-import CategoryTab from '@/utils/CategoryTab';
-import { BiChevronDown } from "oh-vue-icons/icons";
-import request from '@/utils/request';
-import useUserStore from '@/user/useUserStore';
-import useRouterStore from '@/useRouterStore';
-import useBackgroundStore from './useBackgroundStore';
+import { BiChevronLeft } from 'oh-vue-icons/icons'
+import CategoryTab from '@/utils/CategoryTab'
+import { BiChevronDown } from 'oh-vue-icons/icons'
+import request from '@/utils/request'
+import useUserStore from '@/user/useUserStore'
+import useRouterStore from '@/useRouterStore'
+import useBackgroundStore from './useBackgroundStore'
+import { Button } from 'ant-design-vue'
+import CustomWallpaper from './CustomWallpaper'
+
 addIcons(BiChevronLeft, BiChevronDown)
 
-
 const typeList = [
-    '热门',
-    'COSPALY',
-    '二次元',
-    '风景',
-    '插画',
-    '热门',
-    'COSPALY',
-    '二次元',
-    '风景',
-    '插画',
-    '热门',
-    'COSPALY',
-    '二次元',
-    '风景',
-    '插画'
-]
-const wallpaperAttrList = [
-    '动态壁纸',
-    '静态壁纸',
-    '自定义壁纸'
+  '热门',
+  'COSPALY',
+  '二次元',
+  '风景',
+  '插画',
+  '热门',
+  'COSPALY',
+  '二次元',
+  '风景',
+  '插画',
+  '热门',
+  'COSPALY',
+  '二次元',
+  '风景',
+  '插画'
 ]
+const wallpaperAttrList = ['动态壁纸', '静态壁纸', '自定义壁纸']
 export type BackgroundType = {
-    id: string
-    oridinal: number
-    type: string
-    attr: number
+  id: string
+  oridinal: number
+  type: string
+  attr: number
 }
 export type WallpaperItem = {
-    id: string
-    hotNum: number
-    time: number
-    typeId: string
-    url: string
+  id: string
+  hotNum: number
+  time: number
+  typeId: string
+  url: string
 }
 export default defineComponent(() => {
-    const layout = useLayoutStore()
-    const router = useRouterStore()
-    const isGame = computed(() => layout.state.current === 0)
-    const selectType = ref('')
-    const addTo = ref(layout.state.currentPage)
-    const typeList = ref<BackgroundType[]>([])
-    const wallpaperList = ref<WallpaperItem[]>([])
-    const selectAttr = ref(0)
-    const userStore = useUserStore()
-    const backgroundStore = useBackgroundStore()
-    const sortBy = ref<'hotNum' | 'time'>('hotNum')
-    onMounted(() => {
-        request<BackgroundType[]>("GET", "/api/backgroundTypes").then(res => {
-            console.log(res);
-            typeList.value = res
-            selectType.value = res[0].id
-        })
-    })
-    watch(() => [selectType.value, sortBy.value], (e) => {
-        wallpaperList.value = []
-        request<WallpaperItem[]>("GET", `/api/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then(res => {
-            console.log(res);
-            wallpaperList.value = res
-        })
-    }, {
-        immediate: true
-    })
-    watch(selectAttr, (e) => {
+  const layout = useLayoutStore()
+  const router = useRouterStore()
+  const isGame = computed(() => layout.state.current === 0)
+  const selectType = ref('')
+  const typeList = ref<BackgroundType[]>([])
+  const wallpaperList = ref<WallpaperItem[]>([])
+  const selectAttr = ref(0)
+  const userStore = useUserStore()
 
-        selectType.value = typeList.value.filter(val => val.attr === e)[0].id || ''
+  const sortBy = ref<'hotNum' | 'time'>('hotNum')
+  onMounted(() => {
+    request<BackgroundType[]>('GET', '/api/backgroundTypes').then((res) => {
+      console.log(res)
+      typeList.value = res
+      selectType.value = res[0].id
     })
-    return () => (
-        <div class={clsx('w-full flex-col h-full relative flex px-7 py-7 text-[14px]', isGame.value ? 'bg-[#2c2e3e] text-white'
-            : 'text-[#333] bg-white'
+  })
+  watch(
+    () => [selectType.value, sortBy.value],
+    (e) => {
+      if (!e[0]) return
+      wallpaperList.value = []
+      request<WallpaperItem[]>('GET', `/api/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then(
+        (res) => {
+          console.log(res)
+          wallpaperList.value = res
+        }
+      )
+    },
+    {
+      immediate: true
+    }
+  )
+  watch(selectAttr, (e) => {
+    selectType.value = typeList.value.filter((val) => val.attr === e)[0]?.id || ''
+  })
+  return () => (
+    <div
+      class={clsx(
+        'w-full flex-col h-full relative flex px-7 py-7 text-[14px]',
+        isGame.value ? 'bg-[#2c2e3e] text-white' : 'text-[#333] bg-white'
+      )}
+      style={
+        isGame.value
+          ? {
+              backgroundImage: `url('/bg/gameModel.png')`,
+              backgroundSize: '100% 100%'
+            }
+          : null
+      }
+    >
+      <div
+        class={clsx(
+          'flex w-full justify-between items-center border-b-[1px] border-solid   pb-2',
+          isGame.value ? 'border-white/[.2]' : 'dark:border-black/[.2]'
         )}
-            style={isGame.value ? {
-                backgroundImage: `url('/bg/gameModel.png')`,
-                backgroundSize: '100% 100%',
-            } : null}>
-            <div class={clsx("flex w-full justify-between items-center border-b-[1px] border-solid   pb-2",
-                isGame.value ? "border-white/[.2]" : "dark:border-black/[.2]"
-            )}>
-                <OhVueIcon name={BiChevronLeft.name} scale={1.4} class="cursor-pointer"></OhVueIcon>
-                <span class="font-bold text-[14px]  ">壁纸库</span>
-                <button class="hover:bg-slate-50/60 px-3 py-2 rounded-xl text-white/[.9]">我的壁纸</button>
+      >
+        <OhVueIcon name={BiChevronLeft.name} scale={1.4} class="cursor-pointer"></OhVueIcon>
+        <span class="font-bold text-[14px]  ">壁纸库</span>
+        <button class="hover:bg-slate-50/60 px-3 py-2 rounded-xl text-white/[.9]">我的壁纸</button>
+      </div>
+      <div class="flex-1 h-0  relative">
+        {selectAttr.value !== 2 ? (
+          <div class="flex flex-col w-full h-full py-3 gap-y-3 relative">
+            <div class="flex justify-between items-center ">
+              <div class="flex-1 w-0">
+                <CategoryTab
+                  v-slots={{
+                    select: (text: string) => (
+                      <button
+                        class={clsx(
+                          'px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
+                          isGame.value ? 'bg-white/30 text-white' : 'text-[#000] bg-[#D6D6D6]'
+                        )}
+                      >
+                        {text}
+                      </button>
+                    ),
+                    unSelect: (text: string) => (
+                      <button
+                        class={clsx(
+                          'px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
+                          isGame.value ? 'bg-white/30 text-white' : 'text-[#000] hover:bg-[#f0ecec]'
+                        )}
+                      >
+                        {text}
+                      </button>
+                    )
+                  }}
+                  list={typeList.value.filter((val) => val.attr === selectAttr.value)}
+                  selectType={selectType.value}
+                  onUpdate:type={(e) => {
+                    selectType.value = e
+                  }}
+                ></CategoryTab>
+              </div>
+
+              <div class="relative w-[100px]">
+                <select
+                  onChange={(e: any) => {
+                    sortBy.value = e.target.value
+                  }}
+                  value={sortBy.value}
+                  class={clsx(
+                    ' block w-full appearance-none rounded-lg border-none  py-1.5 px-3 text-sm/6 ',
+                    'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
+                    // Make the text of each option black on Windows
+                    '*:text-black',
+                    isGame.value ? 'text-white bg-white/5' : 'text-[#333] bg-black/5'
+                  )}
+                >
+                  <option value="hotNum">按热度</option>
+                  <option value="time">按最新</option>
+                </select>
+                <OhVueIcon
+                  fill={isGame.value ? 'white' : 'black'}
+                  name={BiChevronDown.name}
+                  class="group pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 size-4 "
+                  aria-hidden="true"
+                />
+              </div>
             </div>
-            <div class="flex-1 h-0  relative">
-                <div class="flex flex-col w-full h-full py-3 gap-y-3 relative">
-                    <div class="flex justify-between items-center ">
-                        <div class="flex-1 w-0">
-                            <CategoryTab v-slots={{
-                                select: (text: string) => <button
-                                    class={clsx('px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
-                                        isGame.value ? 'bg-white/30 text-white' : 'text-[#000] bg-[#D6D6D6]')}>
-                                    {text}
-                                </button>,
-                                unSelect: (text: string) => <button
-                                    class={clsx('px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
-                                        isGame.value ? 'bg-white/30 text-white' : 'text-[#000] hover:bg-[#f0ecec]')}>
-                                    {text}
-                                </button>
-                            }} list={typeList.value.filter(val => val.attr === selectAttr.value)} selectType={selectType.value} onUpdate:type={(e) => {
-                                selectType.value = e
-                            }}></CategoryTab>
-
-                        </div>
-
-                        <div class="relative w-[100px]">
-                            <select
-                                onChange={(e: any) => {
-                                    sortBy.value = e.target.value
-                                }}
-                                value={sortBy.value}
-                                class={clsx(
-                                    ' block w-full appearance-none rounded-lg border-none  py-1.5 px-3 text-sm/6 ',
-                                    'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
-                                    // Make the text of each option black on Windows
-                                    '*:text-black',
-                                    isGame.value ? "text-white bg-white/5" : "text-[#333] bg-black/5"
-                                )}
-                            >
-                                <option value="hotNum">按热度</option>
-                                <option value="time">按最新</option>
-                            </select>
-                            <OhVueIcon
-                                fill={isGame.value ? 'white' : 'black'}
-                                name={BiChevronDown.name}
-                                class="group pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 size-4 "
-                                aria-hidden="true"
-                            />
-                        </div>
-                    </div>
-                    <div class="flex-1  w-full h-0 flex relative">
-                        <div class="w-full h-full  overflow-y-scroll">
-                            <div class="w-full  grid grid-cols-3 gap-4   ">
-                                {wallpaperList.value.map(item =>
-                                    <div
-                                        onClick={() => {
-                                        }}
-                                        class="h-[156px] relative cursor-pointer group w-full  flex-grow-0 rounded-xl overflow-hidden">
-                                        <img src={item.url + '?x-oss-process=image/resize,w_300'} class=" duration-150 absolute w-full h-full object-cover flex-grow-0  rounded-xl group-hover:scale-[1.2]" />
-                                        <div class="absolute top-0 left-0 right-0 bottom-0 " style={{
-                                            background: 'linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%)'
-                                        }} />
-                                    </div>)}
-
-                            </div>
-                        </div>
-
-                    </div>
-                    <div class="absolute bottom-0 left-1/2 -translate-x-1/2 flex text-[#666] z-10 bg-black/[.4] p-1 rounded-[12px] gap-x-1">
-                        {
-                            wallpaperAttrList.map((item, index) => (
-                                <div key={index}
-                                    onClick={() => {
-                                        if (index === 2) {
-
-                                            if (!userStore.isLogin) {
-                                                router.go('global-login')
-                                            }
-                                            return
-                                        }
-                                        selectAttr.value = index
-
-                                    }}
-                                    class={clsx("px-8 py-2 rounded-[8px]",
-                                        index === selectAttr.value ? "bg-white text-[#333]" : "cursor-pointer text-white hover:bg-white/[.4]")}>{item}</div>
-                            ))
-                        }
 
+            <div class="flex-1  w-full h-0 flex relative">
+              <div class="w-full h-full  overflow-y-scroll">
+                <div class="w-full  grid grid-cols-3 gap-4   ">
+                  {wallpaperList.value.map((item) => (
+                    <div
+                      onClick={() => {
+                        layout.changeBackground(item.url)
+                      }}
+                      class="h-[156px] relative cursor-pointer group w-full  flex-grow-0 rounded-xl overflow-hidden"
+                    >
+                      <img
+                        src={item.url + '?x-oss-process=image/resize,w_300'}
+                        class=" duration-150 absolute w-full h-full object-cover flex-grow-0  rounded-xl group-hover:scale-[1.2]"
+                      />
+                      <div
+                        class="absolute top-0 left-0 right-0 bottom-0 "
+                        style={{
+                          background:
+                            'linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%)'
+                        }}
+                      />
                     </div>
+                  ))}
                 </div>
-
+              </div>
             </div>
+
+            {/* 自定义 */}
+          </div>
+        ) : (
+          <CustomWallpaper></CustomWallpaper>
+        )}
+
+        <div class="absolute bottom-0 left-1/2 -translate-x-1/2 flex text-[#666] z-10 bg-black/[.4] p-1 rounded-[12px] gap-x-1">
+          {wallpaperAttrList.map((item, index) => (
+            <div
+              key={index}
+              onClick={() => {
+                console.log(index)
+
+                if (index === 2) {
+                  if (!userStore.isLogin) {
+                    router.go('global-login')
+                    return
+                  }
+                }
+
+                selectAttr.value = index
+              }}
+              class={clsx(
+                'px-8 py-2 rounded-[8px]',
+                index === selectAttr.value
+                  ? 'bg-white text-[#333]'
+                  : 'cursor-pointer text-white hover:bg-white/[.4]'
+              )}
+            >
+              {item}
+            </div>
+          ))}
         </div>
-    )
+      </div>
+    </div>
+  )
 })
diff --git a/src/layout/background/CustomWallpaper.tsx b/src/layout/background/CustomWallpaper.tsx
new file mode 100644
index 0000000..bac5140
--- /dev/null
+++ b/src/layout/background/CustomWallpaper.tsx
@@ -0,0 +1,112 @@
+import upload, { localPrefix, uploadLocal } from '@/utils/upload'
+import clsx from 'clsx'
+import { defineComponent, ref, toRef } from 'vue'
+import useBackgroundStore from './useBackgroundStore'
+import useResource from './useResource'
+import useLayoutStore from '../useLayoutStore'
+import { message } from 'ant-design-vue'
+
+export default defineComponent(() => {
+  const dragging = ref(false)
+  const fileInput = ref<HTMLInputElement | null>(null)
+  const backgroundStore = useBackgroundStore()
+  const tempFile = ref<File | null>(null)
+  const tempBackground = ref('')
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const file = e.dataTransfer?.files?.[0]
+    if (!file) return
+    tempBackground.value = URL.createObjectURL(file)
+    tempFile.value = file
+  }
+  return () => (
+    <div class={'w-full h-full flex flex-col items-center pt-5 pb-10 gap-y-4'}>
+      <div class="flex flex-col text-center gap-y-1">
+        <span class="text-[14px] text-[#333]">您可以使用图片或视频作为您的自定义壁纸</span>
+        <span class="text-[12px] text-[#666]">自定义壁纸不会同步到您的账号数据</span>
+      </div>
+      <div
+        onDragover={(e) => {
+          dragging.value = true
+          e.stopPropagation()
+          e.preventDefault()
+        }}
+        onDragleave={(e) => {
+          dragging.value = false
+          e.stopPropagation()
+          e.preventDefault()
+        }}
+        onDrop={handleDrop}
+        onClick={() => {
+          fileInput.value?.click()
+        }}
+        class={clsx(
+          'w-[440px] h-[250px] relative  items-center cursor-pointer justify-center  border-dashed border-[1px] hover:bg-[#6b9dff1a] hover:border-[#3f80ff]  rounded-lg',
+
+          dragging.value ? 'border-[#3f80ff] bg-[#6b9dff1a]' : 'border-transparent bg-[#ebebeb]'
+        )}
+        style={
+          tempBackground.value
+            ? {
+                backgroundImage: `url(${tempBackground.value})`,
+                backgroundSize: 'cover',
+                backgroundRepeat: 'no-repeat'
+              }
+            : {}
+        }
+      >
+        <div class={'w-full h-full absolute left-0 top-0 bottom-0 right-0 group'}>
+          <div
+            class={clsx(
+              'w-full h-[100%] justify-center items-center  flex flex-col gap-y-1',
+              tempBackground.value ? 'bg-black/50 hidden group-hover:flex' : 'flex'
+            )}
+          >
+            <img alt="123" src="/icons/uploadImg.png"></img>
+            <span
+              class={clsx('text-[15px]  ', tempBackground.value ? 'text-[#fff]' : 'text-[#333]')}
+            >
+              点击或拖拽文件到此区域进行上传
+            </span>
+            <span class={clsx('text-[12px]', tempBackground.value ? 'text-[#fff]' : 'text-[#888')}>
+              支持jpg/png/svg/gif/mp4等格式
+            </span>
+            <input
+              type="file"
+              ref={fileInput}
+              hidden
+              onChange={(e: any) => {
+                const file = e.target?.files?.[0]
+                if (!file) return
+                tempFile.value = file
+                tempBackground.value = URL.createObjectURL(file)
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <button
+        class={clsx(
+          ' px-6 py-2 rounded-lg text-white',
+          tempBackground.value ? 'bg-[#ffa93d]' : 'bg-[#000]/[.1]'
+        )}
+        onClick={() => {
+          if (tempFile.value) {
+            uploadLocal(tempFile.value).then((res) => {
+
+              useLayoutStore().changeBackground(res)
+
+              tempFile.value = null
+              tempBackground.value = ''
+              message.success('应用成功')
+            })
+          }
+        }}
+      >
+        确定
+      </button>
+    </div>
+  )
+})
diff --git a/src/layout/background/index.tsx b/src/layout/background/index.tsx
index d62478d..3afac16 100644
--- a/src/layout/background/index.tsx
+++ b/src/layout/background/index.tsx
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref, Transition, watch } from 'vue'
 import useLayoutStore from '../useLayoutStore'
 import useSettingsStore from '@/settings/useSettingsStore'
 
@@ -6,18 +6,35 @@ export default defineComponent({
   setup() {
     const layout = useLayoutStore()
     const settings = useSettingsStore()
+    const trriger = ref(true)
+    watch(layout.background, () => {
+      trriger.value = false
+      setTimeout(() => {
+        trriger.value = true
+      },0)
+    })
     return () => (
+
       <div class="absolute left-0 top-0 w-full h-screen z-0">
-        {layout.background.video ? (
-          <video src={layout.background.video} class="w-full h-full" />
-        ) : (
-          <div
-            class="w-full h-full bg-center bg-cover bg-no-repeat"
-            style={{
-              backgroundImage: `url('${layout.background.image}')`
-            }}
-          ></div>
-        )}
+        <Transition name="background">
+          {
+            trriger.value &&
+            <>
+              {layout.background.video ? (
+                <video src={layout.background.video} class="w-full h-full" />
+              ) : (
+                <div
+                  class="w-full h-full bg-center bg-cover bg-no-repeat"
+                  style={{
+                    backgroundImage: `url('${layout.background.image}')`
+                  }}
+                ></div>
+              )}
+            </>
+
+          }
+
+        </Transition>
         <div
           class="absolute left-0 top-0 w-full h-full bg-black"
           style={{
@@ -27,6 +44,9 @@ export default defineComponent({
           }}
         ></div>
       </div>
+
+
+
     )
   }
 })
diff --git a/src/layout/layout.types.ts b/src/layout/layout.types.ts
index 0d68d54..6fcfc08 100644
--- a/src/layout/layout.types.ts
+++ b/src/layout/layout.types.ts
@@ -30,9 +30,9 @@ export type LayoutPages = { list: Block[]; label: string; name: string }[]
 
 export interface Layout {
   content: [
-    { background: ''; pages: LayoutPages },
-    { background: ''; pages: LayoutPages },
-    { background: ''; pages: LayoutPages }
+    { background: string; pages: LayoutPages },
+    { background: string; pages: LayoutPages },
+    { background: string; pages: LayoutPages }
   ]
   current: 0 | 1 | 2 // 游戏，工作，轻娱
   currentPage: number
diff --git a/src/layout/useLayoutStore.ts b/src/layout/useLayoutStore.ts
index 2351fe1..2e3198e 100644
--- a/src/layout/useLayoutStore.ts
+++ b/src/layout/useLayoutStore.ts
@@ -98,7 +98,9 @@ export default defineStore('layout', () => {
     }
     return block.label || ''
   }
-
+  const changeBackground = (url: string) => {
+    state.content[state.current].background = url 
+  }
   return {
     state,
     ready,
@@ -109,6 +111,7 @@ export default defineStore('layout', () => {
     addBlock,
     openDir,
     checkDir,
-    getLabel
+    getLabel,
+    changeBackground
   }
 })
diff --git a/src/main.css b/src/main.css
index 869890c..3716c64 100644
--- a/src/main.css
+++ b/src/main.css
@@ -183,4 +183,22 @@ body {
     scrollbar-width: thin;
     scrollbar-color: transparent transparent;
   }
+}
+
+
+.background-enter-active {
+  animation: bounce-in .8s;
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+
+  }
 }
\ No newline at end of file
diff --git a/src/utils/upload.ts b/src/utils/upload.ts
index 8c7f7ae..f38446e 100644
--- a/src/utils/upload.ts
+++ b/src/utils/upload.ts
@@ -2,6 +2,9 @@ import { ossBase } from './../config'
 import OSS from 'ali-oss'
 import { v4 as uuid } from 'uuid'
 import request from './request'
+import db from '@/db'
+export const localPrefix = '__local_resource_'
+
 export default async function upload(file: File, root: string) {
   const token = localStorage.getItem('token')
   if (!token) {
@@ -32,3 +35,14 @@ export default async function upload(file: File, root: string) {
   })
   return ossBase + '/' + name
 }
+export async function uploadLocal(file: File) {
+  const id = uuid()
+  const list = await db.getItem<{ tag: string; file: Blob; type: 'image' | 'video' }[]>('localList') || []
+  list.push({
+    tag: id,
+    file: file,
+    type: 'image'
+  })
+  await db.setItem('localList', list)
+  return id
+}
\ No newline at end of file