diff --git a/package.json b/package.json
index f07d513..9243ed3 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "mockjs": "1.1.0",
     "pinyin": "2.11.1",
     "vconsole": "^3.15.0",
-    "vue": "3.2.31",
+    "vue": "3.2.45",
     "vue-router": "4.0.14",
     "vue-switches": "2.0.1",
     "vuex": "4.0.2"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 02d5c7a..24e9703 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,13 +16,13 @@ specifiers:
   pinyin: 2.11.1
   vconsole: ^3.15.0
   vite: 4.0.4
-  vue: 3.2.31
+  vue: ^3.2.45
   vue-router: 4.0.14
   vue-switches: 2.0.1
   vuex: 4.0.2
 
 dependencies:
-  '@jambonn/vue-lazyload': 1.0.9_vue@3.2.31
+  '@jambonn/vue-lazyload': 1.0.9_vue@3.2.45
   axios: 0.26.1
   core-js: 3.21.1
   dayjs: 1.11.0
@@ -32,14 +32,14 @@ dependencies:
   mockjs: 1.1.0
   pinyin: 2.11.1
   vconsole: 3.15.0
-  vue: 3.2.31
-  vue-router: 4.0.14_vue@3.2.31
+  vue: 3.2.45
+  vue-router: 4.0.14_vue@3.2.45
   vue-switches: 2.0.1
-  vuex: 4.0.2_vue@3.2.31
+  vuex: 4.0.2_vue@3.2.45
 
 devDependencies:
-  '@vitejs/plugin-vue': 4.0.0_vite@4.0.4+vue@3.2.31
-  '@vitejs/plugin-vue-jsx': 3.0.0_vite@4.0.4+vue@3.2.31
+  '@vitejs/plugin-vue': 4.0.0_vite@4.0.4+vue@3.2.45
+  '@vitejs/plugin-vue-jsx': 3.0.0_vite@4.0.4+vue@3.2.45
   less: 4.1.3
   mobile-select: 1.1.2
   vite: 4.0.4_less@4.1.3
@@ -75,10 +75,10 @@ packages:
       '@babel/generator': 7.20.7
       '@babel/helper-compilation-targets': 7.20.7_@babel+core@7.20.12
       '@babel/helper-module-transforms': 7.20.11
-      '@babel/helpers': 7.20.7
-      '@babel/parser': 7.20.7
+      '@babel/helpers': 7.20.13
+      '@babel/parser': 7.20.13
       '@babel/template': 7.20.7
-      '@babel/traverse': 7.20.12
+      '@babel/traverse': 7.20.13
       '@babel/types': 7.20.7
       convert-source-map: 1.9.0
       debug: 4.3.4
@@ -182,7 +182,7 @@ packages:
       '@babel/helper-split-export-declaration': 7.18.6
       '@babel/helper-validator-identifier': 7.19.1
       '@babel/template': 7.20.7
-      '@babel/traverse': 7.20.12
+      '@babel/traverse': 7.20.13
       '@babel/types': 7.20.7
     transitivePeerDependencies:
       - supports-color
@@ -208,7 +208,7 @@ packages:
       '@babel/helper-member-expression-to-functions': 7.20.7
       '@babel/helper-optimise-call-expression': 7.18.6
       '@babel/template': 7.20.7
-      '@babel/traverse': 7.20.12
+      '@babel/traverse': 7.20.13
       '@babel/types': 7.20.7
     transitivePeerDependencies:
       - supports-color
@@ -248,12 +248,12 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/helpers/7.20.7:
-    resolution: {integrity: sha512-PBPjs5BppzsGaxHQCDKnZ6Gd9s6xl8bBCluz3vEInLGRJmnZan4F6BYCeqtyXqkk4W5IlPmjK4JlOuZkpJ3xZA==}
+  /@babel/helpers/7.20.13:
+    resolution: {integrity: sha512-nzJ0DWCL3gB5RCXbUO3KIMMsBY2Eqbx8mBpKGE/02PgyRQFcPQLbkQ1vyy596mZLaP+dAfD+R4ckASzNVmW3jg==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.20.7
-      '@babel/traverse': 7.20.12
+      '@babel/traverse': 7.20.13
       '@babel/types': 7.20.7
     transitivePeerDependencies:
       - supports-color
@@ -268,8 +268,8 @@ packages:
       js-tokens: 4.0.0
     dev: true
 
-  /@babel/parser/7.20.7:
-    resolution: {integrity: sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==}
+  /@babel/parser/7.20.13:
+    resolution: {integrity: sha512-gFDLKMfpiXCsjt4za2JA9oTMn70CeseCehb11kRZgvd7+F67Hih3OHOK24cRrWECJ/ljfPGac6ygXAs/C8kIvw==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
@@ -295,8 +295,8 @@ packages:
       '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
-  /@babel/plugin-transform-typescript/7.20.7_@babel+core@7.20.12:
-    resolution: {integrity: sha512-m3wVKEvf6SoszD8pu4NZz3PvfKRCMgk6D6d0Qi9hNnlM5M6CFS92EgF4EiHVLKbU0r/r7ty1hg7NPZwE7WRbYw==}
+  /@babel/plugin-transform-typescript/7.20.13_@babel+core@7.20.12:
+    resolution: {integrity: sha512-O7I/THxarGcDZxkgWKMUrk7NK1/WbHAg3Xx86gqS6x9MTrNL6AwIluuZ96ms4xeDe6AVx6rjHbWHP7x26EPQBA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -309,8 +309,8 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/runtime/7.20.7:
-    resolution: {integrity: sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==}
+  /@babel/runtime/7.20.13:
+    resolution: {integrity: sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==}
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.13.11
@@ -321,12 +321,12 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/parser': 7.20.7
+      '@babel/parser': 7.20.13
       '@babel/types': 7.20.7
     dev: true
 
-  /@babel/traverse/7.20.12:
-    resolution: {integrity: sha512-MsIbFN0u+raeja38qboyF8TIT7K0BFzz/Yd/77ta4MsUsmP2RAnidIlwq7d5HFQrH/OZJecGV6B71C4zAgpoSQ==}
+  /@babel/traverse/7.20.13:
+    resolution: {integrity: sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
@@ -335,7 +335,7 @@ packages:
       '@babel/helper-function-name': 7.19.0
       '@babel/helper-hoist-variables': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.20.7
+      '@babel/parser': 7.20.13
       '@babel/types': 7.20.7
       debug: 4.3.4
       globals: 11.12.0
@@ -549,13 +549,13 @@ packages:
     dev: true
     optional: true
 
-  /@jambonn/vue-lazyload/1.0.9_vue@3.2.31:
+  /@jambonn/vue-lazyload/1.0.9_vue@3.2.45:
     resolution: {integrity: sha512-V9AnxDTAS1+q5LpTWtvyEN2bo1skvSzPRbFfP7Z1qhfEQRQouSwReEkbEb5B5M4MDEM1UIE0kxlsvOcCkon8DQ==}
     engines: {node: '>=12.x'}
     peerDependencies:
       vue: ^3.0.11
     dependencies:
-      vue: 3.2.31
+      vue: 3.2.45
     dev: false
 
   /@jridgewell/gen-mapping/0.1.1:
@@ -615,7 +615,7 @@ packages:
     dev: false
     optional: true
 
-  /@vitejs/plugin-vue-jsx/3.0.0_vite@4.0.4+vue@3.2.31:
+  /@vitejs/plugin-vue-jsx/3.0.0_vite@4.0.4+vue@3.2.45:
     resolution: {integrity: sha512-vurkuzgac5SYuxd2HUZqAFAWGTF10diKBwJNbCvnWijNZfXd+7jMtqjPFbGt7idOJUn584fP1Ar9j/GN2jQ3Ew==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -623,15 +623,15 @@ packages:
       vue: ^3.0.0
     dependencies:
       '@babel/core': 7.20.12
-      '@babel/plugin-transform-typescript': 7.20.7_@babel+core@7.20.12
+      '@babel/plugin-transform-typescript': 7.20.13_@babel+core@7.20.12
       '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.20.12
       vite: 4.0.4_less@4.1.3
-      vue: 3.2.31
+      vue: 3.2.45
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue/4.0.0_vite@4.0.4+vue@3.2.31:
+  /@vitejs/plugin-vue/4.0.0_vite@4.0.4+vue@3.2.45:
     resolution: {integrity: sha512-e0X4jErIxAB5oLtDqbHvHpJe/uWNkdpYV83AOG2xo2tEVSzCzewgJMtREZM30wXnM5ls90hxiOtAuVU6H5JgbA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -639,7 +639,7 @@ packages:
       vue: ^3.2.25
     dependencies:
       vite: 4.0.4_less@4.1.3
-      vue: 3.2.31
+      vue: 3.2.45
     dev: true
 
   /@vue/babel-helper-vue-transform-on/1.0.2:
@@ -652,7 +652,7 @@ packages:
       '@babel/helper-module-imports': 7.18.6
       '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.20.12
       '@babel/template': 7.20.7
-      '@babel/traverse': 7.20.12
+      '@babel/traverse': 7.20.13
       '@babel/types': 7.20.7
       '@vue/babel-helper-vue-transform-on': 1.0.2
       camelcase: 6.3.0
@@ -663,90 +663,90 @@ packages:
       - supports-color
     dev: true
 
-  /@vue/compiler-core/3.2.31:
-    resolution: {integrity: sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==}
+  /@vue/compiler-core/3.2.45:
+    resolution: {integrity: sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==}
     dependencies:
-      '@babel/parser': 7.20.7
-      '@vue/shared': 3.2.31
+      '@babel/parser': 7.20.13
+      '@vue/shared': 3.2.45
       estree-walker: 2.0.2
       source-map: 0.6.1
 
-  /@vue/compiler-dom/3.2.31:
-    resolution: {integrity: sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==}
+  /@vue/compiler-dom/3.2.45:
+    resolution: {integrity: sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==}
     dependencies:
-      '@vue/compiler-core': 3.2.31
-      '@vue/shared': 3.2.31
+      '@vue/compiler-core': 3.2.45
+      '@vue/shared': 3.2.45
 
   /@vue/compiler-sfc/2.7.14:
     resolution: {integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==}
     dependencies:
-      '@babel/parser': 7.20.7
+      '@babel/parser': 7.20.13
       postcss: 8.4.21
       source-map: 0.6.1
     dev: false
 
-  /@vue/compiler-sfc/3.2.31:
-    resolution: {integrity: sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ==}
+  /@vue/compiler-sfc/3.2.45:
+    resolution: {integrity: sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==}
     dependencies:
-      '@babel/parser': 7.20.7
-      '@vue/compiler-core': 3.2.31
-      '@vue/compiler-dom': 3.2.31
-      '@vue/compiler-ssr': 3.2.31
-      '@vue/reactivity-transform': 3.2.31
-      '@vue/shared': 3.2.31
+      '@babel/parser': 7.20.13
+      '@vue/compiler-core': 3.2.45
+      '@vue/compiler-dom': 3.2.45
+      '@vue/compiler-ssr': 3.2.45
+      '@vue/reactivity-transform': 3.2.45
+      '@vue/shared': 3.2.45
       estree-walker: 2.0.2
       magic-string: 0.25.9
       postcss: 8.4.21
       source-map: 0.6.1
 
-  /@vue/compiler-ssr/3.2.31:
-    resolution: {integrity: sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw==}
+  /@vue/compiler-ssr/3.2.45:
+    resolution: {integrity: sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==}
     dependencies:
-      '@vue/compiler-dom': 3.2.31
-      '@vue/shared': 3.2.31
+      '@vue/compiler-dom': 3.2.45
+      '@vue/shared': 3.2.45
 
-  /@vue/devtools-api/6.4.5:
-    resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==}
+  /@vue/devtools-api/6.5.0:
+    resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
     dev: false
 
-  /@vue/reactivity-transform/3.2.31:
-    resolution: {integrity: sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==}
+  /@vue/reactivity-transform/3.2.45:
+    resolution: {integrity: sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==}
     dependencies:
-      '@babel/parser': 7.20.7
-      '@vue/compiler-core': 3.2.31
-      '@vue/shared': 3.2.31
+      '@babel/parser': 7.20.13
+      '@vue/compiler-core': 3.2.45
+      '@vue/shared': 3.2.45
       estree-walker: 2.0.2
       magic-string: 0.25.9
 
-  /@vue/reactivity/3.2.31:
-    resolution: {integrity: sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==}
+  /@vue/reactivity/3.2.45:
+    resolution: {integrity: sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==}
     dependencies:
-      '@vue/shared': 3.2.31
+      '@vue/shared': 3.2.45
 
-  /@vue/runtime-core/3.2.31:
-    resolution: {integrity: sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA==}
+  /@vue/runtime-core/3.2.45:
+    resolution: {integrity: sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==}
     dependencies:
-      '@vue/reactivity': 3.2.31
-      '@vue/shared': 3.2.31
+      '@vue/reactivity': 3.2.45
+      '@vue/shared': 3.2.45
 
-  /@vue/runtime-dom/3.2.31:
-    resolution: {integrity: sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==}
+  /@vue/runtime-dom/3.2.45:
+    resolution: {integrity: sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==}
     dependencies:
-      '@vue/runtime-core': 3.2.31
-      '@vue/shared': 3.2.31
+      '@vue/runtime-core': 3.2.45
+      '@vue/shared': 3.2.45
       csstype: 2.6.21
 
-  /@vue/server-renderer/3.2.31_vue@3.2.31:
-    resolution: {integrity: sha512-8CN3Zj2HyR2LQQBHZ61HexF5NReqngLT3oahyiVRfSSvak+oAvVmu8iNLSu6XR77Ili2AOpnAt1y8ywjjqtmkg==}
+  /@vue/server-renderer/3.2.45_vue@3.2.45:
+    resolution: {integrity: sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==}
     peerDependencies:
-      vue: 3.2.31
+      vue: 3.2.45
     dependencies:
-      '@vue/compiler-ssr': 3.2.31
-      '@vue/shared': 3.2.31
-      vue: 3.2.31
+      '@vue/compiler-ssr': 3.2.45
+      '@vue/shared': 3.2.45
+      vue: 3.2.45
 
-  /@vue/shared/3.2.31:
-    resolution: {integrity: sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==}
+  /@vue/shared/3.2.45:
+    resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
 
   /abbrev/1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
@@ -1493,8 +1493,8 @@ packages:
     dev: false
     optional: true
 
-  /rollup/3.10.0:
-    resolution: {integrity: sha512-JmRYz44NjC1MjVF2VKxc0M1a97vn+cDxeqWmnwyAF4FvpjK8YFdHpaqvQB+3IxCvX05vJxKZkoMDU8TShhmJVA==}
+  /rollup/3.10.1:
+    resolution: {integrity: sha512-3Er+yel3bZbZX1g2kjVM+FW+RUWDxbG87fcqFM5/9HbPCTpbVp6JOLn7jlxnNlbu7s/N/uDA4EV/91E2gWnxzw==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
@@ -1643,7 +1643,7 @@ packages:
   /vconsole/3.15.0:
     resolution: {integrity: sha512-8hq7wabPcRucSWQyN7/1tthMawP9JPvM95zgtMHpPknMMMCKj+abpoK7P7oKK4B0qw58C24Mdvo9+raUdpHyVQ==}
     dependencies:
-      '@babel/runtime': 7.20.7
+      '@babel/runtime': 7.20.13
       copy-text-to-clipboard: 3.0.1
       core-js: 3.21.1
       mutation-observer: 1.0.3
@@ -1678,18 +1678,18 @@ packages:
       less: 4.1.3
       postcss: 8.4.21
       resolve: 1.22.1
-      rollup: 3.10.0
+      rollup: 3.10.1
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /vue-router/4.0.14_vue@3.2.31:
+  /vue-router/4.0.14_vue@3.2.45:
     resolution: {integrity: sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
-      '@vue/devtools-api': 6.4.5
-      vue: 3.2.31
+      '@vue/devtools-api': 6.5.0
+      vue: 3.2.45
     dev: false
 
   /vue-switches/2.0.1:
@@ -1705,22 +1705,22 @@ packages:
       csstype: 3.1.1
     dev: false
 
-  /vue/3.2.31:
-    resolution: {integrity: sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw==}
+  /vue/3.2.45:
+    resolution: {integrity: sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==}
     dependencies:
-      '@vue/compiler-dom': 3.2.31
-      '@vue/compiler-sfc': 3.2.31
-      '@vue/runtime-dom': 3.2.31
-      '@vue/server-renderer': 3.2.31_vue@3.2.31
-      '@vue/shared': 3.2.31
+      '@vue/compiler-dom': 3.2.45
+      '@vue/compiler-sfc': 3.2.45
+      '@vue/runtime-dom': 3.2.45
+      '@vue/server-renderer': 3.2.45_vue@3.2.45
+      '@vue/shared': 3.2.45
 
-  /vuex/4.0.2_vue@3.2.31:
+  /vuex/4.0.2_vue@3.2.45:
     resolution: {integrity: sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==}
     peerDependencies:
       vue: ^3.0.2
     dependencies:
-      '@vue/devtools-api': 6.4.5
-      vue: 3.2.31
+      '@vue/devtools-api': 6.5.0
+      vue: 3.2.45
     dev: false
 
   /webidl-conversions/3.0.1:
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 6b59ac1..7306df4 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -1,7 +1,8 @@
 <template>
   <from-bottom-dialog
       page-id="home-index"
-      v-model="modelValue"
+      :modelValue="modelValue"
+      @update:modelValue="e=>$emit('update:modelValue',e)"
       @cancel="cancel"
       :show-heng-gang="false"
       maskMode="light"
@@ -35,7 +36,7 @@
                 <img v-show="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
                      class="love-image">
                 <img  v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt="" class="love-image">
-                <span>{{ $likeNum(item.loveNum) }}</span>
+                <span>{{ formatNumber(item.loveNum) }}</span>
               </div>
             </div>
             <div class="replies">
@@ -60,7 +61,7 @@
                   <img v-if="child.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
                        class="love-image">
                   <img v-else src="../assets/img/icon/components/like-gray-small.png" alt="" class="love-image">
-                  <span>{{ $likeNum(child.loveNum) }}</span>
+                  <span>{{ formatNumber(child.loveNum) }}</span>
                 </div>
               </div>
               <div class="more">
diff --git a/src/components/Posters.vue b/src/components/Posters.vue
index ab00f8a..8879755 100644
--- a/src/components/Posters.vue
+++ b/src/components/Posters.vue
@@ -5,7 +5,7 @@
       <img class="poster" v-lazy="$imgPreview(i.cover)" alt="">
       <div class="num" v-if="mode === 'normal'">
         <img class="love" src="../assets/img/icon/love.svg" alt="">
-        <span>{{ $likeNum(i.digg_count) }}</span>
+        <span>{{ formatNumber(i.digg_count) }}</span>
       </div>
       <div class="date" v-if="mode === 'date'">
         <div class="day">{{ getDay(i.create_time) }}</div>
diff --git a/src/components/Share.vue b/src/components/Share.vue
index 9cbd692..a728dad 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -1,7 +1,8 @@
 <template>
   <from-bottom-dialog
       :page-id="pageId"
-      v-model="modelValue"
+      :modelValue="modelValue"
+      @update:modelValue="e=>$emit('update:modelValue',e)"
       @cancel="closeShare"
       :show-heng-gang="false"
       :touch-moved="false"
diff --git a/src/components/Video.vue b/src/components/Video.vue
index 04456c4..8278b47 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -31,16 +31,16 @@
               <img src="../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
               <img src="../assets/img/icon/loved.svg" class="love-image" v-if="lVideo.isLoved">
             </div>
-            <span>{{ $likeNum(lVideo.digg_count) }}</span>
+            <span>{{ formatNumber(lVideo.digg_count) }}</span>
           </div>
           <div class="message mb2r" @click.stop="$emit('showComments')">
             <!--            <div class="message mb15p" @click.stop="showComment">-->
             <img src="../assets/img/icon/message.svg" alt="" class="message-image">
-            <span>{{ $likeNum(lVideo.comment_count) }}</span>
+            <span>{{ formatNumber(lVideo.comment_count) }}</span>
           </div>
           <div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
             <img src="../assets/img/icon/share-white-full.png" alt="" class="share-image">
-            <span>{{ $likeNum(lVideo.share_count) }}</span>
+            <span>{{ formatNumber(lVideo.share_count) }}</span>
           </div>
           <div v-else class="share mb4r" @click.stop="$emit('showShare')">
             <img src="../assets/img/icon/share-white-full.png" alt="" class="share-image">
@@ -331,8 +331,8 @@ export default {
       this.$refs.video.pause()
       this.isPlaying = false
     },
-    $likeNum(v) {
-      return globalMethods.$likeNum(v)
+    formatNumber(v) {
+      return globalMethods.formatNumber(v)
     },
     $duration(v) {
       return globalMethods.$duration(v)
diff --git a/src/components/slide/BVideo.vue b/src/components/slide/BVideo.vue
index cd6e673..5e1f2df 100644
--- a/src/components/slide/BVideo.vue
+++ b/src/components/slide/BVideo.vue
@@ -30,16 +30,16 @@
               <img src="../../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
               <img src="../../assets/img/icon/loved.svg" class="love-image" v-if="lVideo.isLoved">
             </div>
-            <span>{{ $likeNum(lVideo.digg_count) }}</span>
+            <span>{{ formatNumber(lVideo.digg_count) }}</span>
           </div>
           <div class="message mb2r" @click.stop="$emit('showComments')">
             <!--            <div class="message mb15p" @click.stop="showComment">-->
             <img src="../../assets/img/icon/message.svg" alt="" class="message-image">
-            <span>{{ $likeNum(lVideo.comment_count) }}</span>
+            <span>{{ formatNumber(lVideo.comment_count) }}</span>
           </div>
           <div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
             <img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
-            <span>{{ $likeNum(lVideo.share_count) }}</span>
+            <span>{{ formatNumber(lVideo.share_count) }}</span>
           </div>
           <div v-else class="share mb4r" @click.stop="$emit('showShare')">
             <img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
@@ -310,8 +310,8 @@ export default {
       this.paused = true
       this.isPlaying = false
     },
-    $likeNum(v) {
-      return globalMethods.$likeNum(v)
+    formatNumber(v) {
+      return globalMethods.formatNumber(v)
     },
     $duration(v) {
       return globalMethods.$duration(v)
diff --git a/src/components/slide/ItemDesc.vue b/src/components/slide/ItemDesc.vue
index 8e02243..7b5d9f6 100644
--- a/src/components/slide/ItemDesc.vue
+++ b/src/components/slide/ItemDesc.vue
@@ -1,13 +1,235 @@
-<template>
+<script setup>
 
+import {reactive} from "vue";
+import BaseMarquee from "../BaseMarquee";
+
+const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
+  item: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  index: {
+    type: Number,
+    default: () => {
+      return -1
+    }
+  },
+  prefix: {
+    type: String,
+    default: () => {
+      return ''
+    }
+  },
+  isMy: {
+    type: Boolean,
+    default: () => {
+      return false
+    }
+  },
+  isUp: {
+    type: Boolean,
+    default: () => {
+      return false
+    }
+  },
+  //用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
+  isPlay: {
+    type: Boolean,
+    default: () => {
+      return true
+    }
+  },
+})
+
+const state = reactive({
+  isAttention: false,
+  name: `v-${prefix}-${index}-video`,
+  test: [1, 2],
+})
+
+</script>
+<template>
+  <div class="item-desc">
+    <div class="content ml1r mb2r" v-if="!isMy">
+      <div class="location-wrapper" v-if=" item.city || item.address">
+        <div class="location">
+          <img src="../../assets/img/icon/location.webp" alt="">
+          <span>{{ item.city }}</span>
+          <template v-if="item.address">
+            <div class="gang"></div>
+          </template>
+          <span>{{ item.address }}</span>
+        </div>
+      </div>
+      <div class="name mb1r fb" @click.stop="$emit('goUserInfo')">@{{ item.author.nickname }}</div>
+      <div class="description mb1r">
+        {{ item.desc }}
+      </div>
+      <div class="music" @click.stop="$nav('/music')">
+        <img src="../../assets/img/icon/music.svg" alt="" class="music-image">
+        <BaseMarquee :key="state.name"
+                     :name="state.name"
+                     :isPlay="isPlay"
+                     :text="item.music.title"
+                     @click.stop="$emit('goMusic')"/>
+      </div>
+    </div>
+    <div v-else class="comment-status">
+      <div class="comment">
+        <div class="type-comment">
+          <img src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
+          <div class="right">
+            <p>
+              <span class="name">zzzzz</span>
+              <span class="time">2020-01-20</span>
+            </p>
+            <p class="text">北京</p>
+          </div>
+        </div>
+        <transition-group name="comment-status" tag="div" class="loveds">
+          <div class="type-loved" :key="i" v-for="i in state.test">
+            <img src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
+            <img src="../../assets/img/icon/love.svg" alt="" class="loved">
+          </div>
+        </transition-group>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script>
-export default {
-  name: "ItemDesc"
+<style scoped lang="less">
+@import "../../assets/less/color";
+
+.item-desc {
+
+  .content {
+    color: #fff;
+    position: absolute;
+    bottom: 0;
+    width: 75%;
+    //display: flex;
+    //flex-direction: column;
+
+    .location-wrapper {
+      display: flex;
+
+      .location {
+        margin-bottom: 10rem;
+
+        display: flex;
+        align-items: center;
+        font-size: 12rem;
+        padding: 4rem;
+        border-radius: 3rem;
+        background: @second-btn-color-tran;
+
+        .gang {
+          height: 8rem;
+          width: 1.5px;
+          margin: 0 5rem;
+          background: gray;
+        }
+
+        img {
+          margin-right: 7rem;
+          width: 18rem;
+        }
+      }
+    }
+
+
+    .music {
+      position: relative;
+      width: 60%;
+      display: flex;
+      align-items: center;
+
+      .music-image {
+        width: 20px;
+        height: 20px;
+        margin-top: 3px;
+      }
+    }
+  }
+
+  .comment-status {
+    display: flex;
+    align-items: center;
+
+    .comment {
+
+      .type-comment {
+        display: flex;
+        background: rgb(130, 21, 44);
+        border-radius: 50px;
+        padding: 3px;
+        margin-bottom: 20px;
+
+        .avatar {
+          width: 36px;
+          height: 36px;
+          border-radius: 50%;
+        }
+
+        .right {
+          margin: 0 10px;
+          color: @second-text-color;
+
+          .name {
+            margin-right: 10px;
+          }
+
+          .text {
+            color: white;
+          }
+
+        }
+
+      }
+
+      .loveds {
+      }
+
+      .type-loved {
+        width: 40px;
+        height: 40px;
+        position: relative;
+        margin-bottom: 20px;
+        animation: test 1s;
+        animation-delay: .5s;
+
+        .avatar {
+          width: 36px;
+          height: 36px;
+          border-radius: 50%;
+        }
+
+        .loved {
+          position: absolute;
+          bottom: 0;
+          left: 20px;
+          width: 10px;
+          height: 10px;
+          background: red;
+          padding: 3px;
+          border-radius: 50%;
+          border: 2px solid white;
+        }
+      }
+
+      @keyframes test {
+        from {
+          display: block;
+          transform: translate3d(0, 0, 0);
+        }
+        to {
+          display: none;
+          transform: translate3d(0, -60px, 0);
+        }
+      }
+    }
+  }
 }
-</script>
-
-<style scoped>
-
 </style>
\ No newline at end of file
diff --git a/src/components/slide/ItemOptions.vue b/src/components/slide/ItemOptions.vue
deleted file mode 100644
index 72aabee..0000000
--- a/src/components/slide/ItemOptions.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-export default {
-  name: "ItemOptions"
-}
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/slide/ItemToolbar.vue b/src/components/slide/ItemToolbar.vue
new file mode 100644
index 0000000..60e7a75
--- /dev/null
+++ b/src/components/slide/ItemToolbar.vue
@@ -0,0 +1,193 @@
+<script setup>
+import BaseMusic from "../BaseMusic";
+import Utils from "../../utils";
+import {reactive} from "vue";
+
+const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
+  item: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  index: {
+    type: Number,
+    default: () => {
+      return -1
+    }
+  },
+  prefix: {
+    type: String,
+    default: () => {
+      return ''
+    }
+  },
+  isMy: {
+    type: Boolean,
+    default: () => {
+      return false
+    }
+  },
+  isUp: {
+    type: Boolean,
+    default: () => {
+      return false
+    }
+  },
+  //用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
+  isPlay: {
+    type: Boolean,
+    default: () => {
+      return true
+    }
+  },
+})
+
+const state = reactive({
+  isAttention: false,
+  name: `v-${prefix}-${index}-video`,
+})
+
+function loved(e, index) {
+  // this.lVideo.isLoved = !this.lVideo.isLoved
+  // this.$emit('update:video', this.lVideo)
+}
+
+function attention() {
+  // let option = this.$refs['attention-option']
+  // option.classList.add('attention')
+  // setTimeout(() => {
+  //   this.isAttention = true
+  // }, 1000)
+}
+
+</script>
+
+<template>
+  <div class="toolbar mb1r">
+    <div class="avatar-ctn mb4r">
+      <img class="avatar" :src="item.author.avatar" alt=""
+           @click.stop="$emit('goUserInfo')">
+      <transition name="fade">
+        <div v-if="!state.isAttention" @click.stop="attention" class="options" ref="attention-option">
+          <img class="no" src="../../assets/img/icon/add-light.png" alt="">
+          <img class="yes" src="../../assets/img/icon/ok-red.png" alt="">
+        </div>
+      </transition>
+
+    </div>
+    <div class="love mb2r" @click.stop="loved($event)">
+      <div>
+        <img src="../../assets/img/icon/love.svg" class="love-image" v-if="!item.isLoved">
+        <img src="../../assets/img/icon/loved.svg" class="love-image" v-if="item.isLoved">
+      </div>
+      <span>{{ Utils.formatNumber(item.digg_count) }}</span>
+    </div>
+    <div class="message mb2r" @click.stop="$emit('showComments')">
+      <!--            <div class="message mb15p" @click.stop="showComment">-->
+      <img src="../../assets/img/icon/message.svg" alt="" class="message-image">
+      <span>{{ Utils.formatNumber(item.comment_count) }}</span>
+    </div>
+    <div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
+      <img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
+      <span>{{ Utils.formatNumber(item.share_count) }}</span>
+    </div>
+    <div v-else class="share mb4r" @click.stop="$emit('showShare')">
+      <img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
+    </div>
+    <BaseMusic
+        :cover="item.music.cover"
+        :key="state.name"
+        :name="state.name"
+        :isPlay="state.isPlay"
+        @click.stop="$emit('goMusic')"
+    />
+  </div>
+
+</template>
+
+<style scoped lang="less">
+.toolbar {
+  //width: 40px;
+  position: absolute;
+  bottom: 0;
+  right: 5px;
+  color: #fff;
+
+  .avatar-ctn {
+    position: relative;
+
+    .avatar {
+      width: 55px;
+      height: 55px;
+      border-radius: 50%;
+    }
+
+    .options {
+      position: absolute;
+      border-radius: 50%;
+      margin: auto;
+      left: 0;
+      right: 0;
+      bottom: -5px;
+      background: red;
+      //background: black;
+      width: 18px;
+      height: 18px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: all 1s;
+
+      img {
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        transition: all 1s;
+      }
+
+      .yes {
+        opacity: 0;
+        transform: rotate(-180deg);
+      }
+
+      &.attention {
+        background: white;
+
+        .no {
+          opacity: 0;
+          transform: rotate(180deg);
+        }
+
+        .yes {
+          opacity: 1;
+          transform: rotate(0deg);
+        }
+      }
+    }
+  }
+
+  .love, .message, .share {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    @width: 35rem;
+
+    img {
+      width: @width;
+      height: @width;
+    }
+
+    span {
+      font-size: 12rem;
+    }
+  }
+
+  .loved {
+    background: red;
+  }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/components/slide/SlideImgs.vue b/src/components/slide/SlideImgs.vue
index 466b5a2..89586ab 100644
--- a/src/components/slide/SlideImgs.vue
+++ b/src/components/slide/SlideImgs.vue
@@ -1,20 +1,52 @@
 <template>
+  <!--不知为啥touch事件，在下部20px的空间内不触发，加上click事件不好了  -->
   <div id="SlideImgs">
     <div class="img-slide-wrapper">
       <div class="img-slide-list"
            ref="wrapperEl"
-           @touchstart="touchStart"
+           @touchstart.passive="touchStart"
            @touchmove="touchMove"
            @touchend="touchEnd">
         <div class="img-slide-item" v-for="img in props.modelValue.imgs">
-          <img :ref="setItemRef" :src="img">
+          <img :ref="e=>setItemRef(e,'itemRefs')"
+               :src="img">
         </div>
       </div>
     </div>
-    <div class="progress-bar" v-if="true">
-      <div class="bar" v-for="(img,index) in modelValue.imgs">
-        <div class="progress"
-             :style="getProgressWidth(index)"></div>
+    <template v-if="!state.isPreview">
+      <template v-if="false">
+        <ItemToolbar :item="props.modelValue"
+                     :index="0"
+                     prefix="sadfa"
+        />
+        <ItemDesc
+            :item="props.modelValue"
+            :index="0"
+            prefix="sadfa"
+        />
+      </template>
+      <div class="progress-bar"
+           @touchstart="progressBarTouchStart"
+           @touchmove="progressBarTouchMove"
+           @touchend="progressBarTouchMEnd"
+      >
+        <div class="bar" v-for="(img,index) in modelValue.imgs">
+          <div class="progress"
+               :style="getProgressWidth(index)"></div>
+        </div>
+      </div>
+
+    </template>
+    <div class="preview" v-if="state.isPreview">
+      <div class="preview-wrapper">
+        <img :src="img"
+             :class="{'preview-img':index === state.localIndex}"
+             v-for="(img,index) in props.modelValue.imgs"
+             :ref="e=>setItemRef(e,'previewImgs')"
+        >
+      </div>
+      <div class="indicator">
+        <span class="index">{{ state.localIndex + 1 }}</span>&nbsp;/&nbsp;{{ props.modelValue.imgs.length }}
       </div>
     </div>
   </div>
@@ -24,7 +56,7 @@
 import enums from "../../utils/enums";
 import Utils from '../../utils'
 import {mat4} from 'gl-matrix'
-import {onMounted, reactive, ref} from "vue";
+import {onMounted, onBeforeUpdate, reactive, ref, watch} from "vue";
 import {
   getSlideDistance,
   slideInit,
@@ -34,6 +66,14 @@ import {
   slideTouchStart
 } from "../../pages/slideHooks/common";
 import {SlideType} from "../../utils/const_var";
+import ItemToolbar from "./ItemToolbar";
+import ItemDesc from "./ItemDesc";
+import GM from "../../utils";
+import {cloneDeep} from "lodash";
+
+function c() {
+  console.log('console.log()')
+}
 
 let out = new Float32Array([
   0, 0, 0, 0,
@@ -47,6 +87,7 @@ let ov = new Float32Array([
   0, 0, 1, 0,
   0, 0, 0, 1,
 ]);
+let origin = cloneDeep(ov)
 const rectMap = new Map()
 const props = defineProps({
   modelValue: {
@@ -59,6 +100,9 @@ const props = defineProps({
           new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
           new URL('../../assets/img/poster/2.jpg', import.meta.url).href,
           new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
+          new URL('../../assets/img/poster/4.jpg', import.meta.url).href,
+          new URL('../../assets/img/poster/5.jpg', import.meta.url).href,
+          new URL('../../assets/img/poster/6.jpg', import.meta.url).href,
         ],
         "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
         video: 'http://douyin.ttentau.top/0.mp4',
@@ -154,6 +198,7 @@ const state = reactive({
   name: 'SlideHorizontal',
   localIndex: 0,
   needCheck: true,
+  isPreview: false,
   isTwo: true,
   next: false,
   wrapper: {width: 0, height: 0, childrenLength: 0},
@@ -170,14 +215,17 @@ const state = reactive({
   },
   move: {x: 0, y: 0},
   itemRefs: [],
+  previewImgs: [],
   status: 'play',//stop,custom
   progress: 0,
   cycleFn: null,
 })
+
 onMounted(() => {
   slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
 
   state.cycleFn = () => {
+    return
     if (state.status !== 'play') return cancelAnimationFrame(state.cycleFn)
     if (state.progress < props.modelValue.imgs.length * 100) {
       state.progress += .4
@@ -195,11 +243,67 @@ onMounted(() => {
   requestAnimationFrame(state.cycleFn)
 })
 
+// 确保在每次更新之前重置ref
+onBeforeUpdate(() => {
+  state.itemRefs = []
+  state.previewImgs = []
+})
+
+watch(
+    () => state.localIndex,
+    (newVal) => {
+      GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
+      GM.$setCss(wrapperEl.value, 'transform', `translate3d(${getSlideDistance(state, SlideType.HORIZONTAL)}px, 0, 0)`)
+      state.progress = (state.localIndex + 1) * 100
+    }
+)
+
+function calcCurrentIndex(e) {
+  state.isPreview = true
+  let x = e.touches[0].pageX
+
+  let current = -1
+  let length = state.previewImgs.length
+  for (let i = length - 1; i >= 0; i--) {
+    let rect = state.previewImgs[i].getBoundingClientRect()
+    if (rect.x < x) {
+      current = i
+      break
+    }
+  }
+  if (current > -1) {
+    state.localIndex = current
+  }
+}
+
+function progressBarTouchStart(e) {
+  console.log('progressBarTouchStart')
+  Utils.$stopPropagation(e)
+}
+
+function progressBarTouchMove(e) {
+  console.log('progressBarTouchMove')
+  let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
+  // let rect = wrapperEl.value.getBoundingClientRect()
+  // if (rect.height - 15 < current1.y && current1.y < rect.height) {
+  //   console.log('在')
+  //   state.isPreview = true
+  //   // Utils.$stopPropagation(e)
+  // }
+
+  // calcCurrentIndex(e)
+}
+
+function progressBarTouchMEnd(e) {
+  console.log('progressBarTouchEnd')
+  if (state.isPreview){
+    Utils.$stopPropagation(e)
+  }
+  state.isPreview = false
+}
+
 function touchStart(e) {
   console.log('start', e.touches.length)
-  // if (s.state !== 'custom') {
-  //   this.state = 'stop'
-  // }
   if (e.touches.length === 1) {
     state.isTwo = false
     slideTouchStart(e, wrapperEl.value, state)
@@ -214,26 +318,30 @@ function touchStart(e) {
 }
 
 function touchMove(e) {
-  // console.log('move', e.touches.length)
+  console.log('move', e.touches.length)
+  let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
   if (state.isTwo && e.touches.length === 1) {
     state.status = 'pause'
     Utils.$stopPropagation(e)
 
     // console.log('单手移动',)
-    let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
-    let movementX = current.x - state.last.point1.x
-    let movementY = current.y - state.last.point1.y
+    let movementX = current1.x - state.last.point1.x
+    let movementY = current1.y - state.last.point1.y
     // console.log(movementX, movementY)
     const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]);
     ov = mat4.multiply(out, t, ov);
     state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
-    state.last.point1 = current
+    state.last.point1 = current1
   } else {
     if (e.touches.length === 1) {
       state.isTwo = false
-      slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, () => {
-        state.status = 'pause'
-      }, SlideType.HORIZONTAL)
+      if (state.isPreview) {
+        // Utils.$stopPropagation(e)
+      }else {
+        slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, () => {
+          state.status = 'pause'
+        }, SlideType.HORIZONTAL)
+      }
     } else {
       state.isTwo = true
       Utils.$stopPropagation(e)
@@ -249,7 +357,6 @@ function touchMove(e) {
         rectMap.set(state.localIndex, rect)
       }
 
-      let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
       let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
 
       // 双指缩放比例，就是对应的放大倍数
@@ -290,17 +397,18 @@ function touchMove(e) {
 }
 
 function touchEnd(e) {
-  console.log('end', e.touches.length, state.isTwo)
+  state.isPreview = false
+  // console.log('end', e.touches.length, state.isTwo)
   //双指缩放，但只松开了一只手
   if (state.isTwo && e.touches.length === 1) {
     Utils.$stopPropagation(e)
     state.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
   } else {
     if (state.isTwo) {
+      ov = origin
       Utils.$stopPropagation(e)
       state.itemRefs[state.localIndex].style['transition-duration'] = '300ms';
-      state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
-
+      state.itemRefs[state.localIndex].style.transform = `matrix3d(${origin.toString()})`;
     } else {
       slideTouchEnd(e, state, canNext,
           () => {
@@ -324,8 +432,8 @@ function getProgressWidth(index) {
   return {width: `${state.progress - index * 100 < 0 ? 0 : state.progress - index * 100}%`}
 }
 
-function setItemRef(el) {
-  el && state.itemRefs.push(el)
+function setItemRef(el, key) {
+  el && state[key].push(el)
 }
 
 function canNext(isNext) {
@@ -335,13 +443,9 @@ function canNext(isNext) {
 </script>
 
 <style scoped lang="less">
-html {
-  touch-action: none;
-}
-
 #SlideImgs {
   position: relative;
-  background: black;
+  background: blue;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -349,6 +453,7 @@ html {
   font-size: 14rem;
 
   .img-slide-wrapper {
+    position: relative;
     height: 100%;
     width: 100%;
 
@@ -381,35 +486,66 @@ html {
     display: flex;
     box-sizing: border-box;
     padding: 0 5rem;
+    @h: 4rem;
+    //height: @h;
+    height: 30rem;
+    background-color: red;
+    align-items: flex-end;
     justify-content: space-between;
 
     .bar {
       border-radius: 10rem;
       flex: 1;
       margin: 0 2rem;
-      height: 2rem;
+      height: @h;
       background: gray;
       position: relative;
+      overflow: hidden;
 
       .progress {
         border-radius: 10rem;
         position: absolute;
         left: 0;
-        height: 2rem;
+        height: @h;
         background: white;
-        //width: 100%;
-        //animation: start 3s linear;
+      }
+    }
+  }
 
-        @keyframes start {
-          0% {
-            width: 0;
-          }
-          100% {
-            width: 100%;
-          }
+  .preview {
+    transition: opacity .3s;
+    position: fixed;
+    bottom: 20rem;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    .preview-wrapper {
+      img {
+        transition: width .3s;
+        margin: 0 5rem;
+        width: 30rem;
+        height: 50rem;
+        background-color: black;
+        object-fit: contain;
+        border-radius: 3rem;
+        overflow: hidden;
+
+        &.preview-img {
+          width: 40rem;
         }
       }
+    }
 
+    .indicator {
+      margin-top: 10rem;
+      color: gray;
+
+      .index {
+        color: white;
+      }
     }
   }
 }
diff --git a/src/components/slide/SlideImgs2.vue b/src/components/slide/SlideImgs2.vue
deleted file mode 100644
index c0bfe4f..0000000
--- a/src/components/slide/SlideImgs2.vue
+++ /dev/null
@@ -1,478 +0,0 @@
-<template>
-  <div id="SlideImgs">
-    <div class="img-slide-wrapper">
-      <div class="img-slide-list"
-           ref="list"
-           @touchstart="touchstart"
-           @touchmove="touchmove"
-           @touchend="touchend">
-        <div class="img-slide-item" v-for="img in modelValue.imgs">
-          <img :ref="setItemRef" :src="img">
-        </div>
-      </div>
-    </div>
-    <div class="progress-bar" v-if="true">
-      <div class="bar" v-for="(img,index) in modelValue.imgs">
-        <div class="progress"
-             :style="getProgressWidth(index)"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import enums from "../../utils/enums";
-import Utils from '../../utils'
-import GM from '../../utils'
-import {mat4} from 'gl-matrix'
-import {cloneDeep} from "lodash";
-
-let out = new Float32Array([
-  0, 0, 0, 0,
-  0, 0, 0, 0,
-  0, 0, 0, 0,
-  0, 0, 0, 0
-])
-let ov = new Float32Array([
-  1, 0, 0, 0,
-  0, 1, 0, 0,
-  0, 0, 1, 0,
-  0, 0, 0, 1,
-]);
-let original = cloneDeep(ov)
-const rectMap = new Map()
-export default {
-  name: "SlideImgs",
-  components: {},
-  props: {
-    modelValue: {
-      type: Object,
-      default() {
-        return {
-          type: 'imgs',
-          imgs: [
-            new URL('../../assets/img/poster/0.jpg', import.meta.url).href,
-            new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
-            new URL('../../assets/img/poster/2.jpg', import.meta.url).href,
-            new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
-          ],
-          "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
-          video: 'http://douyin.ttentau.top/0.mp4',
-          "video_data_size": 26829508,
-          "duration": 427780,
-          "desc": "我不管我们宿舍第一好看",
-          "allow_download": 0,
-          "allow_duet": 0,
-          "allow_react": 0,
-          "allow_music": 1,
-          "allow_douplus": 1,
-          "allow_share": 1,
-          "digg_count": 10480000,
-          "comment_count": 79000,
-          "download_count": 6,
-          "play_count": 0,
-          "share_count": 119000,
-          "forward_count": 0,
-          "collect_count": 3,
-          "sort": 195,
-          "is_top": 0,
-          "city": "北京",
-          address: '中央戏剧学院',
-          "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
-          "create_time": "1630423555",
-          "creator_id": "93864497380",
-          "status": 1,
-          "topics": [
-            {
-              "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-              "name": "敬礼变装",
-              "creator_id": "93864497380",
-              "create_time": "1630423555",
-              "status": 1
-            },
-            {
-              "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-              "name": "宿舍",
-              "creator_id": "93864497380",
-              "create_time": "1630423555",
-              "status": 1
-            }
-          ],
-          "music": {
-            "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
-            "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
-            "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
-            "title": "@穷电影创作的原声-小高快起来跳舞",
-            "creator_id": "93864497380",
-            "create_time": "1630423555",
-            "status": 1
-          },
-          "author": {
-            "id": "1",
-            "unique_id_modify_time": "1630393144",
-            "unique_id": "10040050",
-            "favoriting_count": 143,
-            "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
-            school: {
-              name: '中央戏剧学院',
-              department: null,
-              joinTime: null,
-              education: null,
-              displayType: enums.DISPLAY_TYPE.ALL,
-            },
-            "city": "",
-            "province": '北京',
-            "country": "",
-            "location": "",
-            "birthday": "2002-01-01",
-            "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
-            "following_count": 66,
-            "follower_count": 235000,
-            "aweme_count": 1796000,
-            "nickname": "我是小睿耶",
-            certification: '',
-            "phone": "",
-            "sex": "",
-            "last_login_time": "1630423555",
-            "create_time": "1630423555",
-            "status": 1,
-            "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
-            "is_private": 0
-          }
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      itemRefs: [],
-      baseActiveIndex: 0,
-      progress: 0,
-      cycleFn: null,
-      state: 'play',//stop,custom
-
-      index: 0,
-      isNext: false,
-      isTwo: false,
-      last: {
-        ratio: 1,
-        point1: {x: 0, y: 0},
-        point2: {x: 0, y: 0},
-      },
-      start: {
-        point1: {x: 0, y: 0},
-        point2: {x: 0, y: 0},
-        center: {x: 0, y: 0},
-        time: 0
-      },
-      move: {x: 0, y: 0},
-      wrapper: {
-        width: 0
-      }
-    }
-  },
-  created() {
-  },
-  watch: {
-    state(newVal, oldVal) {
-      return
-      console.log('newVal', newVal)
-      if (newVal === 'play') requestAnimationFrame(this.cycleFn)
-      if (newVal === 'stop') cancelAnimationFrame(this.cycleFn)
-      if (newVal === 'custom') cancelAnimationFrame(this.cycleFn)
-    }
-  },
-  mounted() {
-    this.cycleFn = () => {
-      if (this.state !== 'play') return cancelAnimationFrame(this.cycleFn)
-      if (this.progress < this.modelValue.imgs.length * 100) {
-        this.progress += .4
-        this.index = parseInt(this.progress / 100)
-        if (this.$refs.list) {
-          Utils.$setCss(this.$refs.list, 'transition-duration', `300ms`)
-          Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance()}px, 0px, 0px)`)
-        }
-      } else {
-        this.progress = 0
-        // cancelAnimationFrame(this.cycleFn)
-      }
-      requestAnimationFrame(this.cycleFn)
-    }
-    this.wrapper.width = GM.$getCss(this.$refs.list, 'width')
-    return
-    // requestAnimationFrame(this.cycleFn)
-  },
-  methods: {
-    getCenter(a, b) {
-      const x = (a.x + b.x) / 2;
-      const y = (a.y + b.y) / 2;
-      return {x, y}
-    },
-    // 获取坐标之间的举例
-    getDistance(start, stop) {
-      return Math.hypot(stop.x - start.x, stop.y - start.y);
-    },
-    touchstart(e) {
-      console.log('start', e.touches.length)
-      if (this.state !== 'custom') {
-        this.state = 'stop'
-      }
-      if (e.touches.length === 1) {
-        this.isTwo = false
-        Utils.$setCss(this.$refs.list, 'transition-duration', `0ms`)
-        this.start = {
-          point1: {
-            x: e.touches[0].pageX,
-            y: e.touches[0].pageY,
-          },
-          time: Date.now()
-        }
-      } else {
-        if (this.isTwo) return
-
-        this.isTwo = true
-        this.itemRefs[this.index].style['transition-duration'] = '0ms';
-
-        this.last.point1 = this.start.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY};
-        this.last.point2 = this.start.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
-        this.start.center = this.getCenter(this.start.point1, this.start.point2)
-      }
-    },
-    touchmove(e) {
-      console.log('move', e.touches.length)
-      if (this.isTwo && e.touches.length === 1) {
-        Utils.$stopPropagation(e)
-
-        // console.log('单手移动',)
-        let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
-        let movementX = current.x - this.last.point1.x
-        let movementY = current.y - this.last.point1.y
-        console.log(movementX, movementY)
-        const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]);
-        ov = mat4.multiply(out, t, ov);
-        this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
-        this.last.point1 = current
-      } else {
-        if (e.touches.length === 1) {
-          this.isTwo = false
-          this.move.x = e.touches[0].pageX - this.start.point1.x
-          this.move.y = e.touches[0].pageY - this.start.point1.y
-          this.isNext = this.move.x < 0
-          if (!this.canNext(this.isNext)) return
-          Utils.$stopPropagation(e)
-          Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance() + this.move.x}px, 0px, 0px)`)
-        } else {
-          Utils.$stopPropagation(e)
-          this.isTwo = true
-
-          let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
-          let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
-
-          // 双指缩放比例，就是对应的放大倍数
-          let ratio = this.getDistance(current1, current2) / this.getDistance(this.start.point1, this.start.point2);
-
-          let rect = {x: 0, y: 0}
-          if (rectMap.has(this.index)) {
-            rect = rectMap.get(this.index)
-          } else {
-            //getBoundingClientRect在手机上获取不到值
-            let offset = $(this.itemRefs[this.index]).offset()
-            rect.x = offset.left
-            rect.y = offset.top
-            rectMap.set(this.index, rect)
-          }
-
-          let center = this.getCenter(current1, current2)
-          center.x -= rect.x
-          center.y -= rect.y
-          //用最新的放大倍数ratio除以之前的放大ov[0]倍数，算出本次要累加放大的倍数
-          let zoom = ratio / ov[0]
-          const x = center.x * (1 - zoom);
-          const y = center.y * (1 - zoom);
-          const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1,]);
-          //如果zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵）
-          //如果zoom是累加放大（比如每次都是0.15），第三个参数用ov。这里还是采用累加计算
-          ov = mat4.multiply(out, t, ov);
-
-          let dRatio = this.last.ratio - ratio
-          //如果本次比例和上次的不超过0.02。那么判定为平移
-          if (Math.abs(dRatio) <= 0.02) {
-            let movementX = current1.x - this.last.point1.x
-            let movementY = current1.y - this.last.point1.y
-            let movement2X = current2.x - this.last.point2.x
-            let movement2Y = current2.y - this.last.point2.y
-
-            let minX = Math.min(movementX, movement2X)
-            let minY = Math.min(movementY, movement2Y)
-            const t1 = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, minX, minY, 0, 1,]);
-            ov = mat4.multiply(out, t1, ov);
-          }
-
-          this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
-          this.last.point1 = current1
-          this.last.point2 = current2
-          this.last.ratio = ratio
-        }
-      }
-    },
-    touchend(e) {
-      console.log('end', e.touches.length, this.isTwo)
-      if (this.isTwo && e.touches.length === 1) {
-        Utils.$stopPropagation(e)
-
-        //双指缩放，但只松开了一只手
-        this.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
-      } else {
-        if (this.isTwo) {
-          Utils.$stopPropagation(e)
-
-          ov = original
-          this.itemRefs[this.index].style['transition-duration'] = '300ms';
-          this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
-          // if (this.state !== 'custom') {
-          //   this.state = 'play'
-          // }
-          // if (e.touches.length) {
-          //   this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
-          // }
-
-        } else {
-          if (!this.canNext(this.isNext)) return
-          Utils.$stopPropagation(e)
-
-          let canSlide = this.wrapper.width / 5 < Math.abs(this.move.x);
-          if (Date.now() - this.start.time < 40) canSlide = false
-
-          if (canSlide) {
-            if (this.isNext) {
-              this.index += 1
-            } else {
-              this.index -= 1
-            }
-            this.state = 'custom'
-            this.progress = (this.index + 1) * 100
-          } else {
-            if (this.state !== 'custom') {
-              this.state = 'play'
-            }
-          }
-          Utils.$setCss(this.$refs.list, 'transition-duration', `300ms`)
-          Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance()}px, 0px, 0px)`)
-        }
-      }
-    },
-    canNext(isNext) {
-      return !((this.index === 0 && !isNext) || (this.index === this.modelValue.imgs.length - 1 && isNext));
-    },
-    getSlideDistance() {
-      return -this.index * this.wrapper.width
-    },
-    setItemRef(el) {
-      if (el) {
-        this.itemRefs.push(el)
-      }
-    },
-    beforeUpdate() {
-      this.itemRefs = []
-    },
-    updated() {
-      console.log(this.itemRefs)
-    },
-    toggle() {
-      return
-      if (this.state === 'stop') {
-        this.state = 'play'
-        requestAnimationFrame(this.cycleFn)
-      } else {
-        this.state = 'stop'
-      }
-    },
-    getProgressWidth(index) {
-      if (this.progress >= (index + 1) * 100) return {width: '100%'}
-      return {width: `${this.progress - index * 100 < 0 ? 0 : this.progress - index * 100}%`}
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-html {
-  touch-action: none;
-}
-
-#SlideImgs {
-  position: relative;
-  background: black;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  color: white;
-  font-size: 14rem;
-
-  .img-slide-wrapper {
-    height: 100%;
-    width: 100%;
-
-    .img-slide-list {
-      height: 100%;
-      width: 100%;
-      display: flex;
-      position: relative;
-
-      .img-slide-item {
-        height: 100%;
-        width: 100%;
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        img {
-          transform-origin: 0 0;
-          width: 100%;
-        }
-      }
-    }
-  }
-
-
-  .progress-bar {
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-    display: flex;
-    box-sizing: border-box;
-    padding: 0 5rem;
-    justify-content: space-between;
-
-    .bar {
-      border-radius: 10rem;
-      flex: 1;
-      margin: 0 2rem;
-      height: 2rem;
-      background: gray;
-      position: relative;
-
-      .progress {
-        border-radius: 10rem;
-        position: absolute;
-        left: 0;
-        height: 2rem;
-        background: white;
-        //width: 100%;
-        //animation: start 3s linear;
-
-        @keyframes start {
-          0% {
-            width: 0;
-          }
-          100% {
-            width: 100%;
-          }
-        }
-      }
-
-    }
-  }
-}
-</style>
diff --git a/src/components/slide/SlideUser.vue b/src/components/slide/SlideUser.vue
index 8d0ef60..9808de2 100644
--- a/src/components/slide/SlideUser.vue
+++ b/src/components/slide/SlideUser.vue
@@ -11,7 +11,7 @@
           <img class="poster" :src="globalMethods.$imgPreview(i.cover)"/>
           <div class="num">
             <img class="love" src="../../assets/img/icon/love.svg" alt="">
-            <span>{{ globalMethods.$likeNum(i.digg_count) }}</span>
+            <span>{{ globalMethods.formatNumber(i.digg_count) }}</span>
           </div>
         </div>
       </div>
diff --git a/src/components/slide/SlideVideo.vue b/src/components/slide/SlideVideo.vue
index 4c97551..608f1e5 100644
--- a/src/components/slide/SlideVideo.vue
+++ b/src/components/slide/SlideVideo.vue
@@ -30,16 +30,16 @@
               <img src="../../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
               <img src="../../assets/img/icon/loved.svg" class="love-image" v-if="lVideo.isLoved">
             </div>
-            <span>{{ $likeNum(lVideo.digg_count) }}</span>
+            <span>{{ formatNumber(lVideo.digg_count) }}</span>
           </div>
           <div class="message mb2r" @click.stop="$emit('showComments')">
             <!--            <div class="message mb15p" @click.stop="showComment">-->
             <img src="../../assets/img/icon/message.svg" alt="" class="message-image">
-            <span>{{ $likeNum(lVideo.comment_count) }}</span>
+            <span>{{ formatNumber(lVideo.comment_count) }}</span>
           </div>
           <div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
             <img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
-            <span>{{ $likeNum(lVideo.share_count) }}</span>
+            <span>{{ formatNumber(lVideo.share_count) }}</span>
           </div>
           <div v-else class="share mb4r" @click.stop="$emit('showShare')">
             <img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
@@ -292,8 +292,8 @@ export default {
       this.$refs.video.pause()
       this.isPlaying = false
     },
-    $likeNum(v) {
-      return globalMethods.$likeNum(v)
+    formatNumber(v) {
+      return globalMethods.formatNumber(v)
     },
     $duration(v) {
       return globalMethods.$duration(v)
diff --git a/src/pages/home/Music.vue b/src/pages/home/Music.vue
index fcafdfa..e63d40e 100644
--- a/src/pages/home/Music.vue
+++ b/src/pages/home/Music.vue
@@ -32,7 +32,7 @@
             <div class="name">{{ music.name }}</div>
             <div>
               <div class="user">{{ music.author }}</div>
-              <div class="peoples">>{{ $likeNum(music.use_count) }} 人使用</div>
+              <div class="peoples">>{{ formatNumber(music.use_count) }} 人使用</div>
             </div>
             <div class="collection" @click.stop="toggleCollect()">
               <img v-if="isCollect" src="../../assets/img/icon/star-yellow.png">
diff --git a/src/pages/home/MusicRankList.vue b/src/pages/home/MusicRankList.vue
index c779d1b..4224657 100644
--- a/src/pages/home/MusicRankList.vue
+++ b/src/pages/home/MusicRankList.vue
@@ -46,7 +46,7 @@
                       <div class="author">{{ item.author }}</div>
                       <div class="desc-bottom">
                         <div class="duration">{{ $duration(item.duration) }}</div>
-                        <div class="use_count">{{ $likeNum(item.use_count) }}人使用</div>
+                        <div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
                       </div>
                     </div>
                   </div>
@@ -94,7 +94,7 @@
                       <div class="author">{{ item.author }}</div>
                       <div class="desc-bottom">
                         <div class="duration">{{ $duration(item.duration) }}</div>
-                        <div class="use_count">{{ $likeNum(item.use_count) }}人使用</div>
+                        <div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
                       </div>
                     </div>
                   </div>
@@ -142,7 +142,7 @@
                       <div class="author">{{ item.author }}</div>
                       <div class="desc-bottom">
                         <div class="duration">{{ $duration(item.duration) }}</div>
-                        <div class="use_count">{{ $likeNum(item.use_count) }}人使用</div>
+                        <div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
                       </div>
                     </div>
                   </div>
diff --git a/src/pages/home/SearchPage.vue b/src/pages/home/SearchPage.vue
index 0101cf2..55e80c5 100644
--- a/src/pages/home/SearchPage.vue
+++ b/src/pages/home/SearchPage.vue
@@ -120,7 +120,7 @@
                   </div>
                   <div class="count">
                     <img src="../../assets/img/icon/home/hot-gray.png" alt="">
-                    <span>{{ $likeNum(item.use_count) }}</span>
+                    <span>{{ formatNumber(item.use_count) }}</span>
                   </div>
                 </div>
               </div>
@@ -153,7 +153,7 @@
                     </div>
                     <div class="count">
                       <img src="../../assets/img/icon/home/hot-gray.png" alt="">
-                      <span>{{ $likeNum(item.hot_count) }}</span>
+                      <span>{{ formatNumber(item.hot_count) }}</span>
                     </div>
                   </div>
                 </div>
diff --git a/src/pages/home/components/Duoshan.vue b/src/pages/home/components/Duoshan.vue
index 3e2eee2..cf5fbc0 100644
--- a/src/pages/home/components/Duoshan.vue
+++ b/src/pages/home/components/Duoshan.vue
@@ -1,7 +1,8 @@
 <template>
   <from-bottom-dialog
       page-id="home-index"
-      v-model="modelValue"
+      :modelValue="modelValue"
+      @update:modelValue="e=>$emit('update:modelValue',e)"
       @cancel="cancel"
       maskMode="light"
       mode="light">
diff --git a/src/pages/home/components/FollowSetting.vue b/src/pages/home/components/FollowSetting.vue
index cdbf174..bde973e 100644
--- a/src/pages/home/components/FollowSetting.vue
+++ b/src/pages/home/components/FollowSetting.vue
@@ -1,7 +1,8 @@
 <template>
   <from-bottom-dialog
       page-id="home-index"
-      v-model="modelValue"
+      :modelValue="modelValue"
+      @update:modelValue="e=>$emit('update:modelValue',e)"
       :show-heng-gang="false"
       maskMode="dark"
       @cancel="cancel()"
diff --git a/src/pages/home/components/FollowSetting2.vue b/src/pages/home/components/FollowSetting2.vue
index d13c351..9b7662c 100644
--- a/src/pages/home/components/FollowSetting2.vue
+++ b/src/pages/home/components/FollowSetting2.vue
@@ -1,7 +1,8 @@
 <template>
   <from-bottom-dialog
       page-id="home-index"
-      v-model="modelValue"
+      :modelValue="modelValue"
+      @update:modelValue="e=>$emit('update:modelValue',e)"
       :show-heng-gang="false"
       maskMode="dark"
       @cancel="cancel()"
diff --git a/src/pages/home/components/ShareToFriend.vue b/src/pages/home/components/ShareToFriend.vue
index 3b4e5c4..1a49812 100644
--- a/src/pages/home/components/ShareToFriend.vue
+++ b/src/pages/home/components/ShareToFriend.vue
@@ -1,7 +1,8 @@
 <template>
   <from-bottom-dialog
       :page-id="pageId"
-      v-model="modelValue"
+      :modelValue="modelValue"
+      @update:modelValue="e=>$emit('update:modelValue',e)"
       @cancel="cancel"
       maskMode="light"
       :height="height">
diff --git a/src/pages/home/components/VideoShare.vue b/src/pages/home/components/VideoShare.vue
index b2b1888..6af98b2 100644
--- a/src/pages/home/components/VideoShare.vue
+++ b/src/pages/home/components/VideoShare.vue
@@ -1,7 +1,8 @@
 <template>
   <from-bottom-dialog
       :page-id="pageId"
-      v-model="modelValue"
+      :modelValue="modelValue"
+      @update:modelValue="e=>$emit('update:modelValue',e)"
       @cancel="closeShare1"
       :touch-moved="false"
       maskMode="light"
diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
index 1a3a45d..bbb55fb 100644
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@@ -35,15 +35,15 @@
                 <div class="heat">
                   <div class="text" @click="isShowStarCount = true">
                     <span>获赞</span>
-                    <span class="num">{{ $likeNum(userinfo.aweme_count) }}</span>
+                    <span class="num">{{ formatNumber(userinfo.aweme_count) }}</span>
                   </div>
                   <div class="text" @click="$nav('/people/follow-and-fans',{type:0})">
                     <span>关注</span>
-                    <span class="num">{{ $likeNum(userinfo.following_count) }}</span>
+                    <span class="num">{{ formatNumber(userinfo.following_count) }}</span>
                   </div>
                   <div class="text" @click="$nav('/people/follow-and-fans',{type:1})">
                     <span>粉丝</span>
-                    <span class="num">{{ $likeNum(userinfo.follower_count) }}</span>
+                    <span class="num">{{ formatNumber(userinfo.follower_count) }}</span>
                   </div>
                 </div>
               </div>
@@ -172,7 +172,7 @@
                       <img class="poster" :src="$imgPreview(i.video+videoPoster)" alt="">
                       <div class="num">
                         <img class="love" src="../../assets/img/icon/love.svg" alt="">
-                        <span>{{ $likeNum(i.likeNum) }}</span>
+                        <span>{{ formatNumber(i.likeNum) }}</span>
                       </div>
                     </div>
                   </div>
@@ -323,7 +323,7 @@
 
     <ConfirmDialog
         v-model:visible="isShowStarCount"
-        :subtitle='`"${userinfo.nickname}"共获得${this.$likeNum(userinfo.aweme_count)}个赞`'
+        :subtitle='`"${userinfo.nickname}"共获得${this.formatNumber(userinfo.aweme_count)}个赞`'
         okText="确认"
         cancelText="取消"
         @ok="isShowStarCount = false"
diff --git a/src/pages/me/Uploader.vue b/src/pages/me/Uploader.vue
index e0a359f..4d53615 100644
--- a/src/pages/me/Uploader.vue
+++ b/src/pages/me/Uploader.vue
@@ -41,7 +41,7 @@
               <div class="heat">
                 <div class="text">
                   <span>获赞</span>
-                  <span class="num">{{ $likeNum(localAuthor.aweme_count) }}</span>
+                  <span class="num">{{ formatNumber(localAuthor.aweme_count) }}</span>
                 </div>
                 <div class="text">
                   <span>关注</span>
@@ -49,7 +49,7 @@
                 </div>
                 <div class="text">
                   <span>粉丝</span>
-                  <span class="num">{{ $likeNum(localAuthor.follower_count) }}</span>
+                  <span class="num">{{ formatNumber(localAuthor.follower_count) }}</span>
                 </div>
               </div>
             </div>
diff --git a/src/pages/message/components/BlockDialog.vue b/src/pages/message/components/BlockDialog.vue
index 3287ebc..6858bd7 100644
--- a/src/pages/message/components/BlockDialog.vue
+++ b/src/pages/message/components/BlockDialog.vue
@@ -1,7 +1,8 @@
 <template>
   <from-bottom-dialog
       page-id="ChatDetail"
-      v-model="modelValue"
+      :modelValue="modelValue"
+      @update:modelValue="e=>$emit('update:modelValue',e)"
       :show-heng-gang="false"
       height="20rem"
       @cancel='cancel'
diff --git a/src/pages/test/Test.vue b/src/pages/test/Test.vue
index 39e2d2a..fe64b81 100644
--- a/src/pages/test/Test.vue
+++ b/src/pages/test/Test.vue
@@ -2,7 +2,6 @@
   <!--  <TestSlide></TestSlide>-->
   <!--  <SlideUser></SlideUser>-->
 <!--  <SlideImgs></SlideImgs>-->
-<!--      <TestImg/>-->
     <slideHooks></slideHooks>
 
   <!--  <div class="body">-->
diff --git a/src/utils/index.jsx b/src/utils/index.jsx
index f38190d..d531547 100644
--- a/src/utils/index.jsx
+++ b/src/utils/index.jsx
@@ -265,7 +265,7 @@ export default {
     }
     return Config.filePreview + url
   },
-  $likeNum(num) {
+  formatNumber(num) {
     if (!num) return
     if (num < 10000) {
       return num