diff --git a/public/assets/play.png b/public/assets/play.png
new file mode 100644
index 0000000..f50aa4f
Binary files /dev/null and b/public/assets/play.png differ
diff --git a/public/assets/svg/delete.svg b/public/assets/svg/delete.svg
new file mode 100644
index 0000000..76e69ec
--- /dev/null
+++ b/public/assets/svg/delete.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M10.0923 2.25614C10.3323 2.25614 10.5303 2.29614 10.6863 2.37614C10.8423 2.45614 10.9663 2.55614 11.0583 2.67614C11.1503 2.79614 11.2143 2.92614 11.2503 3.06614C11.2863 3.20614 11.3043 3.33614 11.3043 3.45614C11.3043 3.51214 11.3023 3.55614 11.2983 3.58814C11.2943 3.62014 11.2923 3.64814 11.2923 3.67214L11.2923 3.74414L10.5003 3.74414L10.5003 10.0441C10.5003 10.2041 10.4683 10.3581 10.4043 10.5061C10.3403 10.6541 10.2483 10.7841 10.1283 10.8961C10.0083 11.0081 9.86228 11.0981 9.69028 11.1661C9.51828 11.2341 9.32028 11.2681 9.09628 11.2681L3.74428 11.2681C3.53628 11.2681 3.34028 11.2361 3.15628 11.1721C2.97229 11.1081 2.81428 11.0181 2.68228 10.9021C2.55028 10.7861 2.44628 10.6461 2.37028 10.4821C2.29428 10.3181 2.25628 10.1321 2.25628 9.92414L2.25628 3.74414L1.51228 3.74414C1.50428 3.73614 1.50028 3.71614 1.50028 3.68414C1.49228 3.64414 1.48828 3.52014 1.48828 3.31214C1.48828 3.20814 1.51228 3.09214 1.56028 2.96414C1.60828 2.83614 1.68028 2.71814 1.77628 2.61014C1.87228 2.50214 1.99628 2.41214 2.14828 2.34014C2.30028 2.26814 2.48028 2.23214 2.68828 2.23214L3.75628 2.23214L3.75628 1.50014C3.75628 1.29214 3.82828 1.11414 3.97228 0.966141C4.11628 0.818141 4.29228 0.744141 4.50028 0.744141L8.25628 0.744141C8.53628 0.744141 8.73028 0.818141 8.83828 0.966141C8.94628 1.11414 9.00028 1.29214 9.00028 1.50014L9.00028 2.24414C9.16828 2.25214 9.34828 2.25614 9.54028 2.25614L10.0923 2.25614ZM4.50028 2.25614L8.25628 2.25614L8.25628 1.50014L4.50028 1.50014L4.50028 2.25614ZM4.12828 9.85214C4.38428 9.85214 4.51228 9.68814 4.51228 9.36014L4.51228 3.79214L3.76828 3.79214L3.76828 9.36014C3.76828 9.52814 3.79429 9.65214 3.84628 9.73214C3.89828 9.81214 3.99229 9.85214 4.12828 9.85214ZM6.39628 9.84014C6.53228 9.84014 6.62428 9.80214 6.67228 9.72614C6.72028 9.65014 6.74428 9.52814 6.74428 9.36014L6.74428 3.79214L6.00028 3.79214L6.00028 9.36014C6.00028 9.68014 6.13228 9.84014 6.39628 9.84014ZM8.65228 9.81614C8.79628 9.81614 8.89228 9.77814 8.94028 9.70214C8.98828 9.62614 9.01228 9.50414 9.01228 9.33614L9.01228 3.79214L8.25628 3.79214L8.25628 9.33614C8.25628 9.65614 8.38828 9.81614 8.65228 9.81614Z"   fill="#186DF5" ></path></svg>
\ No newline at end of file
diff --git a/public/assets/svg/download.svg b/public/assets/svg/download.svg
new file mode 100644
index 0000000..1a2c396
--- /dev/null
+++ b/public/assets/svg/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M9.71435 10.4777L2.22855 10.4777C1.40179 10.4777 0.731445 9.80755 0.731445 8.98058L0.731445 7.10912C0.731445 6.90247 0.899128 6.7349 1.10565 6.7349L1.85435 6.7349C2.06101 6.7349 2.22855 6.90247 2.22855 7.10912L2.22855 8.23203C2.22855 8.64549 2.56367 8.98059 2.97711 8.98059L8.96579 8.98059C9.37924 8.98059 9.71435 8.64549 9.71435 8.23203L9.71435 7.10912C9.71435 6.90247 9.8819 6.7349 10.0887 6.7349L10.8372 6.7349C11.0439 6.7349 11.2115 6.90247 11.2115 7.10912L11.2115 8.98059C11.2115 9.80755 10.5413 10.4777 9.71435 10.4777ZM2.92875 3.13454C3.08016 2.98313 3.32585 2.98313 3.47728 3.13454L5.22302 4.8803L5.22302 1.11169C5.22302 0.905035 5.39062 0.737305 5.59723 0.737305L6.34579 0.737305C6.55249 0.737305 6.72015 0.905035 6.72015 1.11169L6.72015 4.8803L8.4659 3.13454C8.61733 2.98313 8.86289 2.98313 9.01431 3.13454L9.56289 3.68319C9.71432 3.83462 9.71432 4.08015 9.56289 4.23171L6.47159 7.32305C6.45822 7.33639 6.21771 7.48341 5.9757 7.48352C5.73105 7.48364 5.48493 7.33654 5.47156 7.32305L2.38011 4.23171C2.22868 4.08014 2.22868 3.83462 2.38011 3.68319L2.92875 3.13454Z"   fill="#186DF5" ></path></svg>
\ No newline at end of file
diff --git a/public/assets/svg/huanyuan.svg b/public/assets/svg/huanyuan.svg
new file mode 100644
index 0000000..f12656a
--- /dev/null
+++ b/public/assets/svg/huanyuan.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M17.9776 16.1268L21.269 12.8125L21.269 13.6583C21.269 14.4614 21.9287 15.1097 22.7318 15.1097C23.535 15.1097 24.1833 14.4614 24.1833 13.6583L24.1833 9.26969C24.1833 8.46651 23.535 7.81826 22.7318 7.81826L18.3433 7.81826C17.5401 7.81826 16.8918 8.46651 16.8918 9.26969C16.8918 10.0728 17.5401 10.7325 18.3433 10.7325L19.189 10.7325L15.8747 14.024C15.8578 14.0412 15.845 14.0631 15.829 14.0811C15.8129 14.0991 15.7984 14.1195 15.7833 14.1383C15.7681 14.157 15.7518 14.1759 15.7376 14.1954C15.7233 14.2149 15.7165 14.2324 15.7033 14.2525C15.69 14.2727 15.6813 14.3003 15.669 14.3211C15.6567 14.3419 15.6233 14.3684 15.6233 14.3897C15.6233 14.411 15.6004 14.425 15.6004 14.4468C15.6004 14.4687 15.5661 14.4817 15.5661 14.504C15.5661 14.5263 15.5433 14.5612 15.5433 14.584C15.5433 14.6067 15.509 14.6295 15.509 14.6525C15.509 14.6756 15.4976 14.6863 15.4976 14.7097C15.4976 14.7331 15.4861 14.766 15.4861 14.7897C15.4861 14.8134 15.4633 14.8458 15.4633 14.8697C15.4633 14.8935 15.4518 14.9028 15.4518 14.9268C15.4518 14.9508 15.4518 14.9828 15.4518 15.0068C15.4518 15.0309 15.4518 15.0513 15.4518 15.0754C15.4518 15.0995 15.4518 15.1199 15.4518 15.144C15.4518 15.1681 15.4518 15.2 15.4518 15.224C15.4518 15.248 15.4633 15.2687 15.4633 15.2925C15.4633 15.3164 15.4861 15.3374 15.4861 15.3611C15.4861 15.3848 15.4976 15.4177 15.4976 15.4411C15.4976 15.4645 15.509 15.4752 15.509 15.4983C15.509 15.5214 15.5433 15.5441 15.5433 15.5668C15.5433 15.5895 15.5661 15.6245 15.5661 15.6468C15.5661 15.6691 15.6004 15.6821 15.6004 15.704C15.6004 15.7258 15.6233 15.7512 15.6233 15.7725C15.6233 15.7939 15.6567 15.8089 15.669 15.8297C15.6813 15.8505 15.69 15.8781 15.7033 15.8983C15.7165 15.9184 15.7233 15.9359 15.7376 15.9554C15.7518 15.9749 15.7681 15.9938 15.7833 16.0125C15.7984 16.0313 15.8129 16.0517 15.829 16.0697C15.845 16.0877 15.8578 16.1097 15.8747 16.1268C16.4588 16.6964 17.408 16.6964 17.9776 16.1268ZM8.12613 25.3268L12.5147 25.3268C13.3179 25.3268 13.9661 24.6786 13.9661 23.8754C13.9661 23.0722 13.3179 22.4125 12.5147 22.4125L11.669 22.4125L15.0176 19.0754C15.5871 18.5059 15.5871 17.5681 15.0176 16.984C15.0004 16.9671 14.9898 16.9429 14.9718 16.9268C14.9539 16.9108 14.9334 16.8963 14.9147 16.8811C14.8959 16.866 14.877 16.8611 14.8576 16.8468C14.8381 16.8326 14.8205 16.8144 14.8004 16.8011C14.7803 16.7878 14.7526 16.7677 14.7318 16.7554C14.7111 16.7431 14.6846 16.7211 14.6633 16.7211C14.6419 16.7211 14.628 16.6983 14.6061 16.6983C14.5843 16.6983 14.5599 16.664 14.5376 16.664C14.5153 16.664 14.4917 16.6411 14.469 16.6411C14.4463 16.6411 14.4235 16.6183 14.4004 16.6183C14.3773 16.6183 14.3553 16.5954 14.3318 16.5954C14.3085 16.5954 14.2869 16.584 14.2633 16.584C14.2396 16.584 14.2186 16.5725 14.1947 16.5725C14.1709 16.5725 14.1501 16.5611 14.1261 16.5611C14.1021 16.5611 14.0702 16.5497 14.0461 16.5497C14.022 16.5497 14.0017 16.5497 13.9776 16.5497C13.9535 16.5497 13.9331 16.5497 13.909 16.5497C13.8849 16.5497 13.853 16.5611 13.829 16.5611C13.805 16.5611 13.7843 16.5725 13.7604 16.5725C13.7366 16.5725 13.7155 16.584 13.6918 16.584C13.6682 16.584 13.6352 16.5954 13.6118 16.5954C13.5885 16.5954 13.5778 16.6183 13.5547 16.6183C13.5316 16.6183 13.4974 16.6411 13.4747 16.6411C13.452 16.6411 13.4284 16.664 13.4061 16.664C13.3838 16.664 13.3708 16.6983 13.349 16.6983C13.3271 16.6983 13.3018 16.7211 13.2804 16.7211C13.2591 16.7211 13.2326 16.7431 13.2118 16.7554C13.1911 16.7677 13.1749 16.7878 13.1547 16.8011C13.1346 16.8144 13.117 16.8326 13.0976 16.8468C13.0781 16.8611 13.0592 16.866 13.0404 16.8811C13.0217 16.8963 13.0013 16.9108 12.9833 16.9268C12.9653 16.9429 12.9548 16.9671 12.9376 16.984L9.58899 20.3325L9.58899 19.4868C9.58899 18.6837 8.92929 18.0354 8.12613 18.0354C7.32296 18.0354 6.6747 18.6837 6.6747 19.4868L6.6747 23.8754C6.6747 24.6786 7.32296 25.3268 8.12613 25.3268ZM25.6576 3.42969L5.20042 3.42969C3.59406 3.42969 2.28613 4.73762 2.28613 6.34397L2.28613 26.8011C2.28613 28.4075 3.59406 29.7154 5.20042 29.7154L25.6576 29.7154C27.2639 29.7154 28.5718 28.4075 28.5718 26.8011L28.5718 6.34397C28.5718 4.73762 27.2639 3.42969 25.6576 3.42969ZM25.6576 26.8011L5.20042 26.8011L5.20042 6.34397L25.6576 6.34397L25.6576 26.8011Z"   fill="#FFFFFF" ></path></svg>
\ No newline at end of file
diff --git a/public/assets/svg/jietu.svg b/public/assets/svg/jietu.svg
new file mode 100644
index 0000000..102f945
--- /dev/null
+++ b/public/assets/svg/jietu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M4 4L6.66666 4L6.66666 6.66666L4 6.66666L4 4ZM9.33334 4L12 4L12 6.66666L9.33334 6.66666L9.33334 4ZM14.6667 4L17.3333 4L17.3333 6.66666L14.6667 6.66666L14.6667 4ZM20 4L22.6667 4L22.6667 6.66666L20 6.66666L20 4ZM25.3333 4L28 4L28 6.66666L25.3333 6.66666L25.3333 4ZM25.3333 9.33334L28 9.33334L28 12L25.3333 12L25.3333 9.33334ZM4 25.3333L6.66666 25.3333L6.66666 28L4 28L4 25.3333ZM4 20L6.66666 20L6.66666 22.6667L4 22.6667L4 20ZM4 14.6667L6.66666 14.6667L6.66666 17.3333L4 17.3333L4 14.6667ZM4 9.33334L6.66666 9.33334L6.66666 12L4 12L4 9.33334ZM14.2227 14.6667L15.604 12.5933C15.6116 12.582 15.6193 12.5707 15.6272 12.5596C15.6352 12.5485 15.6432 12.5375 15.6515 12.5267C15.6598 12.5158 15.6682 12.505 15.6768 12.4944C15.6854 12.4838 15.6941 12.4734 15.703 12.463C15.7119 12.4527 15.721 12.4425 15.7302 12.4324C15.7394 12.4223 15.7488 12.4124 15.7583 12.4027C15.7679 12.3929 15.7775 12.3832 15.7873 12.3738C15.7972 12.3643 15.8072 12.355 15.8172 12.3458C15.8273 12.3367 15.8376 12.3276 15.848 12.3188C15.8584 12.3099 15.8689 12.3012 15.8795 12.2927C15.8902 12.2842 15.901 12.2758 15.9119 12.2676C15.9228 12.2594 15.9338 12.2514 15.945 12.2435C15.9561 12.2357 15.9674 12.228 15.9788 12.2204C15.9902 12.2129 16.0017 12.2056 16.0133 12.1984C16.0249 12.1912 16.0367 12.1842 16.0485 12.1775C16.0603 12.1707 16.0722 12.164 16.0843 12.1576C16.0963 12.1512 16.1085 12.1449 16.1207 12.1388C16.1329 12.1328 16.1452 12.1269 16.1576 12.1212C16.17 12.1155 16.1825 12.11 16.1951 12.1047C16.2077 12.0994 16.2203 12.0943 16.2331 12.0894C16.2458 12.0845 16.2586 12.0798 16.2715 12.0753C16.2844 12.0707 16.2973 12.0664 16.3103 12.0623C16.3233 12.0582 16.3364 12.0542 16.3495 12.0505C16.3627 12.0468 16.3758 12.0433 16.3891 12.04C16.4023 12.0367 16.4156 12.0335 16.4289 12.0306C16.4423 12.0277 16.4557 12.025 16.4691 12.0225C16.4825 12.02 16.4959 12.0177 16.5094 12.0157C16.5229 12.0136 16.5364 12.0117 16.55 12.01C16.5635 12.0083 16.5771 12.0069 16.5907 12.0056C16.6043 12.0044 16.6179 12.0033 16.6315 12.0025C16.6451 12.0017 16.6587 12.001 16.6724 12.0006C16.6861 12.0002 16.6997 12 16.7133 12L20.62 12C20.6337 12 20.6473 12.0002 20.6609 12.0006C20.6746 12.001 20.6882 12.0017 20.7018 12.0025C20.7154 12.0033 20.7291 12.0044 20.7427 12.0056C20.7562 12.0069 20.7698 12.0083 20.7833 12.01C20.7969 12.0117 20.8104 12.0136 20.8239 12.0157C20.8374 12.0177 20.8508 12.02 20.8642 12.0225C20.8777 12.025 20.891 12.0277 20.9044 12.0306C20.9177 12.0335 20.931 12.0367 20.9442 12.04C20.9575 12.0433 20.9707 12.0468 20.9838 12.0505C20.9969 12.0542 21.01 12.0582 21.023 12.0623C21.036 12.0664 21.049 12.0707 21.0618 12.0753C21.0747 12.0798 21.0875 12.0845 21.1002 12.0894C21.113 12.0943 21.1257 12.0994 21.1382 12.1047C21.1508 12.11 21.1633 12.1155 21.1757 12.1212C21.1881 12.1269 21.2004 12.1328 21.2127 12.1388C21.2249 12.1449 21.237 12.1512 21.249 12.1576C21.2611 12.164 21.273 12.1707 21.2848 12.1775C21.2967 12.1842 21.3084 12.1912 21.32 12.1984C21.3316 12.2056 21.3431 12.2129 21.3545 12.2204C21.3659 12.228 21.3772 12.2357 21.3883 12.2435C21.3995 12.2514 21.4105 12.2594 21.4214 12.2676C21.4323 12.2758 21.4431 12.2842 21.4538 12.2927C21.4644 12.3012 21.4749 12.3099 21.4853 12.3188C21.4957 12.3276 21.506 12.3367 21.5161 12.3458C21.5262 12.355 21.5362 12.3643 21.546 12.3738C21.5558 12.3832 21.5655 12.3929 21.575 12.4027C21.5845 12.4124 21.5939 12.4224 21.6031 12.4324C21.6123 12.4425 21.6214 12.4527 21.6303 12.463C21.6392 12.4734 21.648 12.4838 21.6566 12.4944C21.6652 12.505 21.6736 12.5158 21.6818 12.5267C21.6901 12.5375 21.6982 12.5485 21.7061 12.5596C21.714 12.5707 21.7217 12.582 21.7293 12.5933L23.1107 14.6667L26.6667 14.6667C26.6885 14.6667 26.7103 14.6672 26.7321 14.6683C26.7539 14.6693 26.7756 14.6709 26.7973 14.6731C26.8191 14.6752 26.8407 14.6779 26.8623 14.6811C26.8839 14.6843 26.9054 14.688 26.9268 14.6923C26.9482 14.6966 26.9695 14.7013 26.9906 14.7066C27.0118 14.7119 27.0328 14.7177 27.0537 14.7241C27.0746 14.7304 27.0953 14.7372 27.1158 14.7446C27.1364 14.7519 27.1567 14.7598 27.1769 14.7682C27.1971 14.7765 27.217 14.7853 27.2367 14.7947C27.2565 14.804 27.2759 14.8138 27.2952 14.8241C27.3144 14.8344 27.3334 14.8452 27.3521 14.8564C27.3708 14.8676 27.3893 14.8792 27.4074 14.8914C27.4256 14.9035 27.4434 14.9161 27.4609 14.9291C27.4785 14.9421 27.4957 14.9555 27.5125 14.9693C27.5294 14.9832 27.5459 14.9974 27.5621 15.0121C27.5782 15.0267 27.5941 15.0417 27.6095 15.0572C27.6249 15.0726 27.6399 15.0884 27.6546 15.1046C27.6692 15.1207 27.6835 15.1373 27.6973 15.1542C27.7112 15.171 27.7246 15.1882 27.7376 15.2057C27.7506 15.2232 27.7632 15.2411 27.7753 15.2592C27.7874 15.2774 27.7991 15.2958 27.8103 15.3145C27.8215 15.3332 27.8323 15.3522 27.8426 15.3715C27.8528 15.3907 27.8627 15.4102 27.872 15.4299C27.8813 15.4497 27.8902 15.4696 27.8985 15.4897C27.9068 15.5099 27.9147 15.5303 27.9221 15.5508C27.9294 15.5713 27.9362 15.5921 27.9426 15.613C27.9489 15.6338 27.9547 15.6549 27.96 15.676C27.9653 15.6972 27.9701 15.7185 27.9744 15.7399C27.9786 15.7613 27.9823 15.7827 27.9856 15.8043C27.9888 15.8259 27.9914 15.8476 27.9936 15.8693C27.9957 15.891 27.9973 15.9128 27.9984 15.9346C27.9995 15.9564 28 15.9782 28 16L28 26.6667C28 26.6885 27.9995 26.7103 27.9984 26.7321C27.9973 26.7539 27.9957 26.7756 27.9936 26.7973C27.9914 26.8191 27.9888 26.8407 27.9856 26.8623C27.9823 26.8839 27.9786 26.9054 27.9744 26.9268C27.9701 26.9482 27.9653 26.9695 27.96 26.9906C27.9547 27.0118 27.9489 27.0328 27.9426 27.0537C27.9362 27.0746 27.9294 27.0953 27.9221 27.1158C27.9147 27.1364 27.9068 27.1567 27.8985 27.1769C27.8902 27.1971 27.8813 27.217 27.872 27.2367C27.8627 27.2565 27.8528 27.2759 27.8426 27.2952C27.8323 27.3144 27.8215 27.3334 27.8103 27.3521C27.7991 27.3708 27.7874 27.3893 27.7753 27.4074C27.7632 27.4256 27.7506 27.4434 27.7376 27.4609C27.7246 27.4785 27.7112 27.4957 27.6973 27.5125C27.6835 27.5294 27.6692 27.5459 27.6546 27.5621C27.6399 27.5782 27.6249 27.5941 27.6095 27.6095C27.5941 27.6249 27.5782 27.6399 27.5621 27.6546C27.5459 27.6692 27.5294 27.6835 27.5125 27.6973C27.4957 27.7112 27.4785 27.7246 27.4609 27.7376C27.4434 27.7506 27.4256 27.7632 27.4074 27.7753C27.3893 27.7874 27.3708 27.7991 27.3521 27.8103C27.3334 27.8215 27.3144 27.8323 27.2952 27.8426C27.2759 27.8528 27.2565 27.8627 27.2367 27.872C27.217 27.8813 27.1971 27.8902 27.1769 27.8985C27.1567 27.9068 27.1364 27.9147 27.1158 27.9221C27.0953 27.9294 27.0746 27.9362 27.0537 27.9426C27.0328 27.9489 27.0118 27.9547 26.9906 27.96C26.9695 27.9653 26.9482 27.9701 26.9268 27.9744C26.9054 27.9787 26.8839 27.9824 26.8623 27.9856C26.8407 27.9888 26.8191 27.9914 26.7973 27.9936C26.7756 27.9957 26.7539 27.9973 26.7321 27.9984C26.7103 27.9995 26.6885 28 26.6667 28L10.6667 28C10.6448 28 10.623 27.9995 10.6012 27.9984C10.5795 27.9973 10.5577 27.9957 10.536 27.9936C10.5142 27.9914 10.4926 27.9888 10.471 27.9856C10.4494 27.9824 10.4279 27.9787 10.4065 27.9744C10.3851 27.9701 10.3638 27.9653 10.3427 27.96C10.3215 27.9547 10.3005 27.9489 10.2796 27.9426C10.2587 27.9362 10.238 27.9294 10.2175 27.9221C10.1969 27.9147 10.1766 27.9068 10.1564 27.8985C10.1362 27.8902 10.1163 27.8813 10.0966 27.872C10.0769 27.8627 10.0574 27.8528 10.0381 27.8426C10.0189 27.8323 9.9999 27.8215 9.98119 27.8103C9.96247 27.7991 9.94406 27.7874 9.92591 27.7753C9.90775 27.7632 9.88994 27.7506 9.87241 27.7376C9.85487 27.7246 9.83769 27.7112 9.82081 27.6973C9.80394 27.6835 9.78741 27.6692 9.77125 27.6546C9.75509 27.6399 9.73928 27.6249 9.72384 27.6095C9.70844 27.5941 9.69337 27.5782 9.67872 27.5621C9.66406 27.5459 9.64984 27.5294 9.636 27.5125C9.62216 27.4957 9.60872 27.4785 9.59572 27.4609C9.58272 27.4434 9.57016 27.4256 9.55803 27.4074C9.54591 27.3893 9.53425 27.3708 9.52303 27.3521C9.51181 27.3334 9.50106 27.3144 9.49078 27.2952C9.4805 27.2759 9.47069 27.2565 9.46134 27.2367C9.452 27.217 9.44316 27.1971 9.43481 27.1769C9.42647 27.1567 9.41862 27.1364 9.41128 27.1158C9.40394 27.0953 9.39709 27.0746 9.39075 27.0537C9.38441 27.0328 9.37859 27.0118 9.37328 26.9906C9.368 26.9695 9.36322 26.9482 9.35897 26.9268C9.35469 26.9054 9.35097 26.8839 9.34775 26.8623C9.34456 26.8407 9.34191 26.8191 9.33975 26.7973C9.33759 26.7756 9.336 26.7539 9.33494 26.7321C9.33387 26.7103 9.33334 26.6885 9.33334 26.6667L9.33334 16C9.33334 15.9782 9.33387 15.9564 9.33494 15.9346C9.336 15.9128 9.33759 15.891 9.33975 15.8693C9.34191 15.8476 9.34456 15.826 9.34778 15.8044C9.35097 15.7828 9.35469 15.7613 9.35897 15.7399C9.36322 15.7185 9.368 15.6972 9.37328 15.676C9.37859 15.6549 9.38441 15.6338 9.39075 15.613C9.39709 15.5921 9.40394 15.5713 9.41128 15.5508C9.41862 15.5303 9.42647 15.5099 9.43481 15.4897C9.44316 15.4696 9.452 15.4497 9.46134 15.4299C9.47069 15.4102 9.4805 15.3907 9.49078 15.3715C9.50106 15.3522 9.51181 15.3332 9.52303 15.3145C9.53425 15.2958 9.54591 15.2774 9.55803 15.2592C9.57016 15.2411 9.58272 15.2232 9.59572 15.2057C9.60872 15.1882 9.62216 15.171 9.636 15.1542C9.64984 15.1373 9.66406 15.1207 9.67872 15.1046C9.69337 15.0884 9.70844 15.0726 9.72384 15.0572C9.73928 15.0417 9.75509 15.0267 9.77125 15.0121C9.78741 14.9974 9.80394 14.9832 9.82081 14.9693C9.83769 14.9555 9.85487 14.9421 9.87241 14.9291C9.88994 14.9161 9.90775 14.9035 9.92591 14.8914C9.94406 14.8792 9.96247 14.8676 9.98119 14.8564C9.9999 14.8452 10.0189 14.8344 10.0381 14.8241C10.0574 14.8138 10.0769 14.804 10.0966 14.7947C10.1163 14.7853 10.1363 14.7765 10.1564 14.7682C10.1766 14.7598 10.1969 14.7519 10.2175 14.7446C10.238 14.7372 10.2587 14.7304 10.2796 14.7241C10.3005 14.7177 10.3215 14.7119 10.3427 14.7066C10.3638 14.7013 10.3851 14.6965 10.4065 14.6923C10.4279 14.688 10.4494 14.6843 10.471 14.6811C10.4926 14.6779 10.5142 14.6752 10.536 14.6731C10.5577 14.6709 10.5795 14.6693 10.6012 14.6683C10.623 14.6672 10.6448 14.6667 10.6667 14.6667L14.2227 14.6667ZM12 25.3333L25.3333 25.3333L25.3333 17.3333L21.684 17.3333L19.9067 14.6667L17.4267 14.6667L15.6493 17.3333L12 17.3333L12 25.3333ZM18.6667 24C18.623 24 18.5794 23.9989 18.5358 23.9968C18.4922 23.9946 18.4487 23.9914 18.4053 23.9872C18.3618 23.9829 18.3185 23.9775 18.2754 23.9711C18.2322 23.9647 18.1892 23.9573 18.1464 23.9487C18.1036 23.9402 18.0611 23.9307 18.0187 23.9201C17.9764 23.9095 17.9343 23.8978 17.8926 23.8852C17.8508 23.8725 17.8094 23.8588 17.7683 23.8441C17.7272 23.8294 17.6865 23.8137 17.6462 23.797C17.6058 23.7803 17.566 23.7626 17.5265 23.744C17.4871 23.7253 17.4481 23.7057 17.4096 23.6851C17.3711 23.6645 17.3332 23.643 17.2957 23.6206C17.2583 23.5982 17.2214 23.5748 17.1852 23.5506C17.1489 23.5263 17.1132 23.5012 17.0781 23.4752C17.0431 23.4492 17.0087 23.4224 16.9749 23.3947C16.9412 23.367 16.9082 23.3385 16.8758 23.3092C16.8435 23.2799 16.8119 23.2498 16.7811 23.2189C16.7502 23.1881 16.7201 23.1565 16.6908 23.1242C16.6615 23.0918 16.633 23.0588 16.6053 23.0251C16.5776 22.9913 16.5508 22.9569 16.5248 22.9219C16.4988 22.8868 16.4737 22.8511 16.4494 22.8148C16.4252 22.7786 16.4018 22.7417 16.3794 22.7043C16.3569 22.6668 16.3354 22.6289 16.3149 22.5904C16.2943 22.5519 16.2747 22.5129 16.256 22.4735C16.2374 22.434 16.2197 22.3942 16.203 22.3538C16.1863 22.3135 16.1706 22.2728 16.1559 22.2317C16.1412 22.1906 16.1275 22.1492 16.1148 22.1074C16.1022 22.0657 16.0905 22.0236 16.0799 21.9813C16.0693 21.9389 16.0597 21.8964 16.0512 21.8536C16.0427 21.8108 16.0353 21.7678 16.0289 21.7246C16.0225 21.6815 16.0171 21.6382 16.0128 21.5947C16.0086 21.5513 16.0054 21.5078 16.0032 21.4642C16.0011 21.4206 16 21.377 16 21.3333C16 21.2897 16.0011 21.2461 16.0032 21.2025C16.0054 21.1589 16.0086 21.1154 16.0128 21.072C16.0171 21.0285 16.0225 20.9852 16.0289 20.9421C16.0353 20.8989 16.0427 20.8559 16.0512 20.8131C16.0597 20.7703 16.0693 20.7277 16.0799 20.6854C16.0905 20.643 16.1022 20.601 16.1148 20.5592C16.1275 20.5175 16.1412 20.4761 16.1559 20.435C16.1706 20.3939 16.1863 20.3532 16.203 20.3128C16.2197 20.2725 16.2374 20.2327 16.256 20.1932C16.2747 20.1537 16.2943 20.1147 16.3149 20.0763C16.3354 20.0378 16.3569 19.9998 16.3794 19.9624C16.4018 19.925 16.4252 19.8881 16.4494 19.8518C16.4737 19.8155 16.4988 19.7798 16.5248 19.7448C16.5508 19.7097 16.5776 19.6753 16.6053 19.6416C16.633 19.6079 16.6615 19.5748 16.6908 19.5425C16.7201 19.5102 16.7502 19.4786 16.7811 19.4477C16.8119 19.4169 16.8435 19.3868 16.8758 19.3575C16.9082 19.3282 16.9412 19.2997 16.9749 19.272C17.0087 19.2443 17.0431 19.2174 17.0781 19.1914C17.1132 19.1654 17.1489 19.1403 17.1852 19.1161C17.2214 19.0918 17.2583 19.0685 17.2957 19.0461C17.3332 19.0236 17.3711 19.0021 17.4096 18.9815C17.4481 18.961 17.4871 18.9413 17.5265 18.9227C17.566 18.904 17.6058 18.8863 17.6462 18.8697C17.6865 18.8529 17.7272 18.8372 17.7683 18.8226C17.8094 18.8078 17.8508 18.7942 17.8926 18.7815C17.9343 18.7688 17.9764 18.7572 18.0187 18.7466C18.0611 18.736 18.1036 18.7264 18.1464 18.7179C18.1892 18.7094 18.2322 18.7019 18.2754 18.6955C18.3185 18.6891 18.3618 18.6838 18.4053 18.6795C18.4487 18.6752 18.4922 18.672 18.5358 18.6699C18.5794 18.6677 18.623 18.6667 18.6667 18.6667C18.7103 18.6667 18.7539 18.6677 18.7975 18.6699C18.8411 18.672 18.8846 18.6752 18.9281 18.6795C18.9715 18.6838 19.0148 18.6891 19.0579 18.6955C19.1011 18.7019 19.1441 18.7094 19.1869 18.7179C19.2297 18.7264 19.2723 18.736 19.3146 18.7466C19.357 18.7572 19.399 18.7688 19.4407 18.7815C19.4825 18.7942 19.5239 18.8078 19.565 18.8226C19.6061 18.8372 19.6468 18.8529 19.6872 18.8697C19.7275 18.8863 19.7673 18.904 19.8068 18.9227C19.8463 18.9413 19.8852 18.961 19.9237 18.9815C19.9622 19.0021 20.0002 19.0236 20.0376 19.0461C20.075 19.0685 20.1119 19.0918 20.1482 19.1161C20.1845 19.1403 20.2202 19.1654 20.2552 19.1914C20.2902 19.2174 20.3247 19.2443 20.3584 19.272C20.3921 19.2997 20.4252 19.3282 20.4575 19.3575C20.4898 19.3868 20.5214 19.4169 20.5523 19.4477C20.5831 19.4786 20.6132 19.5102 20.6425 19.5425C20.6718 19.5748 20.7003 19.6079 20.728 19.6416C20.7557 19.6753 20.7826 19.7097 20.8086 19.7448C20.8346 19.7798 20.8597 19.8155 20.8839 19.8518C20.9082 19.8881 20.9315 19.925 20.9539 19.9624C20.9764 19.9998 20.9979 20.0378 21.0185 20.0763C21.039 20.1147 21.0587 20.1537 21.0773 20.1932C21.096 20.2327 21.1136 20.2725 21.1303 20.3128C21.1471 20.3532 21.1627 20.3939 21.1774 20.435C21.1922 20.4761 21.2058 20.5175 21.2185 20.5592C21.2312 20.601 21.2428 20.643 21.2534 20.6854C21.264 20.7277 21.2736 20.7703 21.2821 20.8131C21.2906 20.8559 21.2981 20.8989 21.3045 20.9421C21.3109 20.9852 21.3162 21.0285 21.3205 21.072C21.3248 21.1154 21.328 21.1589 21.3301 21.2025C21.3323 21.2461 21.3333 21.2897 21.3333 21.3333C21.3333 21.377 21.3323 21.4206 21.3301 21.4642C21.328 21.5078 21.3248 21.5513 21.3205 21.5947C21.3162 21.6382 21.3109 21.6815 21.3045 21.7246C21.2981 21.7678 21.2906 21.8108 21.2821 21.8536C21.2736 21.8964 21.264 21.9389 21.2534 21.9813C21.2428 22.0236 21.2312 22.0657 21.2185 22.1074C21.2058 22.1492 21.1922 22.1906 21.1774 22.2317C21.1627 22.2728 21.1471 22.3135 21.1303 22.3538C21.1136 22.3942 21.096 22.434 21.0773 22.4735C21.0587 22.5129 21.039 22.5519 21.0185 22.5904C20.9979 22.6289 20.9764 22.6668 20.9539 22.7043C20.9315 22.7417 20.9082 22.7786 20.8839 22.8148C20.8597 22.8511 20.8346 22.8868 20.8086 22.9219C20.7826 22.9569 20.7557 22.9913 20.728 23.0251C20.7003 23.0588 20.6718 23.0918 20.6425 23.1242C20.6132 23.1565 20.5831 23.1881 20.5523 23.2189C20.5214 23.2498 20.4898 23.2799 20.4575 23.3092C20.4252 23.3385 20.3921 23.367 20.3584 23.3947C20.3247 23.4224 20.2902 23.4492 20.2552 23.4752C20.2202 23.5012 20.1845 23.5263 20.1482 23.5506C20.1119 23.5748 20.075 23.5982 20.0376 23.6206C20.0002 23.6431 19.9622 23.6646 19.9237 23.6851C19.8852 23.7057 19.8463 23.7253 19.8068 23.744C19.7673 23.7626 19.7275 23.7803 19.6872 23.797C19.6468 23.8137 19.6061 23.8294 19.565 23.8441C19.5239 23.8588 19.4825 23.8725 19.4407 23.8852C19.399 23.8978 19.357 23.9095 19.3146 23.9201C19.2723 23.9307 19.2297 23.9402 19.1869 23.9487C19.1441 23.9573 19.1011 23.9647 19.0579 23.9711C19.0148 23.9775 18.9715 23.9829 18.928 23.9872C18.8846 23.9914 18.8411 23.9946 18.7975 23.9968C18.7539 23.9989 18.7103 24 18.6667 24Z" stroke="rgba(255, 255, 255, 1)" stroke-width="1"      fill="#FFFFFF" ></path></svg>
\ No newline at end of file
diff --git a/public/assets/svg/play.svg b/public/assets/svg/play.svg
new file mode 100644
index 0000000..8711348
--- /dev/null
+++ b/public/assets/svg/play.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M9.1496 5.57504L3.34961 1.97504C3.0246 1.77505 2.59961 2.02504 2.59961 2.40004L2.59961 9.60005C2.59961 9.97505 3.0246 10.225 3.34961 10.0251L9.12461 6.42505C9.4746 6.25004 9.4746 5.75005 9.1496 5.57504Z"   fill="#186DF5" ></path></svg>
\ No newline at end of file
diff --git a/public/assets/svg/quanpin.svg b/public/assets/svg/quanpin.svg
new file mode 100644
index 0000000..3cd2e8f
--- /dev/null
+++ b/public/assets/svg/quanpin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M11.9501 11.3874L11.9501 8.01232C11.9501 7.4532 11.4799 7 10.9 7C10.3199 7 9.84997 7.4532 9.84997 8.01232L9.84997 10.7125L7.05011 10.7125C6.46998 10.7125 6 11.1657 6 11.7248C6 12.2842 6.46998 12.7373 7.05011 12.7373L10.5499 12.7373C11.3231 12.7373 11.9501 12.133 11.9501 11.3874ZM11.9501 21.5125L11.9501 24.8873C11.9501 25.4467 11.4799 25.8999 10.9 25.8999C10.3199 25.8999 9.84997 25.4467 9.84997 24.8873L9.84997 22.1874L7.05011 22.1874C6.46998 22.1874 6 21.7342 6 21.1748C6 20.6157 6.46998 20.1622 7.05011 20.1622L10.5499 20.1622C11.3231 20.1622 11.9501 20.7668 11.9501 21.5125ZM19.65 21.5125L19.65 24.8873C19.65 25.4467 20.12 25.8999 20.7001 25.8999C21.2799 25.8999 21.7499 25.4467 21.7499 24.8873L21.7499 22.1874L24.55 22.1874C25.1298 22.1874 25.6001 21.7342 25.6001 21.1748C25.6001 20.6157 25.1299 20.1622 24.55 20.1622L21.0499 20.1622C20.2767 20.1622 19.65 20.7668 19.65 21.5125ZM19.65 11.3874L19.65 8.01232C19.65 7.4532 20.12 7 20.7001 7C21.2799 7 21.7499 7.4532 21.7499 8.01232L21.7499 10.7125L24.55 10.7125C25.1298 10.7125 25.6001 11.1657 25.6001 11.7248C25.6001 12.2842 25.1299 12.7373 24.55 12.7373L21.0499 12.7373C20.2767 12.7373 19.65 12.133 19.65 11.3874Z" stroke="rgba(255, 255, 255, 1)" stroke-width="0.8"      fill="#FFFFFF" ></path><path d="M2 27.2998L2 5.69984C2 4.20862 3.25368 3 4.80014 3L27.2001 3C28.7465 3 30 4.20862 30 5.69984L30 27.2998C30 28.791 28.7465 30 27.2001 30L4.80014 30C3.25368 30 2 28.791 2 27.2998ZM27.2001 5.02491L4.80014 5.02491C4.30497 5.02491 4.10016 5.22265 4.10016 5.69984L4.10016 27.2998C4.10016 27.7773 4.30497 27.9751 4.80014 27.9751L27.9 27.9751L27.9 5.69984C27.9 5.22265 27.695 5.02491 27.2001 5.02491Z" stroke="rgba(255, 255, 255, 1)" stroke-width="0.8"      fill="#FFFFFF" ></path></svg>
\ No newline at end of file
diff --git a/src/assets/fonts/fonts.scss b/src/assets/fonts/fonts.scss
index 2e56167..6892aa1 100644
--- a/src/assets/fonts/fonts.scss
+++ b/src/assets/fonts/fonts.scss
@@ -11,6 +11,7 @@
     font-weight: normal;
     font-style: normal;
 }
+
 // 思源字体
 // @font-face {
 //     font-family: 'SourceHanSansCN-Bold';
@@ -56,6 +57,7 @@
     font-weight: normal;
     font-style: normal;
 }
+
 // @font-face {
 //     font-family: 'SourceHanSansCN-Bold';
 //     src: url('./ReflectTi/SourceHanSerifCN-Bold.otf');//暂时没用
@@ -110,6 +112,8 @@
     font-weight: normal;
     font-style: normal;
 }
+
+
 //阿里黑体
 @font-face {
     font-family: 'AlimamaShuHeiTi-Bold';
@@ -117,6 +121,7 @@
     font-weight: normal;
     font-style: normal;
 }
+
 // @font-face {
 //     font-family: 'Alibaba-PuHuiTi-Heavy';
 //     src: url('./Alibaba/Alibaba-PuHuiTi-Heavy.otf');//暂时没用
@@ -135,6 +140,7 @@
     font-weight: normal;
     font-style: normal;
 }
+
 // @font-face {
 //     font-family: 'Alibaba-PuHuiTi-Regular';
 //     src: url('./Alibaba/Alibaba-PuHuiTi-Regular.otf');//暂时没用
@@ -148,18 +154,19 @@
     font-weight: normal;
     font-style: normal;
 }
+
 @font-face {
-    font-family: 'D-Din'; 
+    font-family: 'D-Din';
     src: url('./D-Din//D-DIN.ttf');
     font-weight: normal;
     font-weight: normal;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'Roboto-Regular'; //Roboto
     src: url('./Roboto//Roboto-Regular.ttf');
     font-weight: normal;
     font-weight: normal;
     font-style: normal;
-}
-
+}
\ No newline at end of file
diff --git a/src/views/securitySurveillance/components/sbzt.vue b/src/views/securitySurveillance/components/sbzt.vue
new file mode 100644
index 0000000..8d5d4dd
--- /dev/null
+++ b/src/views/securitySurveillance/components/sbzt.vue
@@ -0,0 +1,149 @@
+<template>
+    <el-card style="border-radius: 15px;">
+        <el-row gutter="35">
+            <el-col :span="8" class="status-card">
+                <div class="title">设备状态</div>
+                <!-- gutter设置为20，创建左右间隙 -->
+                <el-row gutter="20" style="width: 100%;">
+                    <!-- 一行2个，每个占12格（24/2=12） -->
+                    <el-col :span="12">
+                        <div class="item">
+                            <div class="status">在线</div>
+                            <div class="count" style="color: rgba(0, 184, 122, 1);">56</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="12">
+                        <div class="item">
+                            <div class="status">离线</div>
+                            <div class="count" style="color: rgba(102, 102, 102, 1);">10</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="12">
+                        <div class="item">
+                            <div class="status">网络延迟</div>
+                            <div class="count" style="color: rgba(255, 208, 35, 1);">8</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="12">
+                        <div class="item">
+                            <div class="status">故障</div>
+                            <div class="count" style="color: rgba(227, 39, 39, 1);">1</div>
+                        </div>
+                    </el-col>
+                </el-row>
+            </el-col>
+            <el-col :span="16" class="alarm-card">
+                <div class="title">最近报警</div>
+                <el-row class="list">
+                    <el-col>
+                        <div class="item red">
+                            <div class="sub-title">
+                                异常移动检测
+                            </div>
+                            <div class="content">
+                                A区b栋102 | 今天08:23
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col>
+                        <div class="item yellow">
+                            <div class="sub-title">
+                                设备连接不稳定
+                            </div>
+                            <div class="content">
+                                A区b栋102 | 今天08:23
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col>
+                        <div class="item red">
+                            <div class="sub-title">
+                                异常移动检测
+                            </div>
+                            <div class="content">
+                                A区b栋102 | 今天08:23
+                            </div>
+                        </div>
+                    </el-col>
+                </el-row>
+            </el-col>
+        </el-row>
+    </el-card>
+</template>
+<style scoped>
+.title {
+    font-family: "Alibaba-PuHuiTi-Bold";
+    font-size: 20px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 24px;
+    color: rgb(0, 30, 59);
+    text-align: left;
+    vertical-align: top;
+    margin-bottom: 20px;
+}
+
+.status-card {
+
+    .item {
+        background: rgba(245, 245, 245, 0.2);
+        border: 1px solid rgba(230, 233, 238, 1);
+        margin-bottom: 20px;
+        border-radius: 15px;
+        padding: 15px 30px;
+        text-align: center;
+
+        .status {
+            color: rgba(175, 175, 175, 1);
+            font-size: 20px;
+            margin-bottom: 10px;
+            font-weight: 500;
+        }
+
+        .count {
+            font-size: 18px;
+            font-weight: bold;
+        }
+    }
+}
+
+.alarm-card {
+    .item {
+        border: 1px solid #E6E9EE;
+        border-radius: 10px;
+        padding: 10px;
+        margin-bottom: 10px;
+        position: relative;
+        padding-left: 20px;
+
+
+    }
+
+    .red {
+        ::v-deep::before {
+            position: absolute;
+            content: '';
+            background-color: rgba(227, 39, 39, 1);
+            height: 100%;
+            width: 7px;
+            border-radius: 7px 0px 0px 7px;
+            top: 0;
+            left: 1px;
+        }
+    }
+
+    .yellow {
+        ::v-deep::before {
+            position: absolute;
+            content: '';
+            background-color: rgba(255, 208, 35, 1);
+            height: 100%;
+            width: 7px;
+            border-radius: 7px 0px 0px 7px;
+            top: 0;
+            left: 1px;
+        }
+    }
+}
+</style>
+<script setup></script>
\ No newline at end of file
diff --git a/src/views/securitySurveillance/components/spgl.vue b/src/views/securitySurveillance/components/spgl.vue
new file mode 100644
index 0000000..a6bb236
--- /dev/null
+++ b/src/views/securitySurveillance/components/spgl.vue
@@ -0,0 +1,320 @@
+<template>
+    <el-card style="border-radius: 15px;">
+        <div class="title-box">
+            视频管理
+        </div>
+        <el-row class="cunchu">
+            <el-col>
+                <div class="subtitle">存储状态</div>
+            </el-col>
+            <el-col style="position: relative;">
+                <div ref="chartRef" style="height: 220px;width: 100%;"></div>
+                <div class="text">别担心，还有很多存储空间</div>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col class="lxcc">
+                <div class="top">
+                    <div class="subtitle">录像存储设置</div>
+                    <div class="edit">编辑</div>
+                </div>
+                <div class="content">
+                    <div class="item">
+                        <div class="title">
+                            存储模式
+                        </div>
+                        <div class="text">
+                            循环覆盖
+                        </div>
+                    </div>
+                    <div class="item">
+                        <div class="title">
+                            保留天数
+                        </div>
+                        <div class="text">
+                            30天
+                        </div>
+                    </div>
+                    <div class="item">
+                        <div class="title">
+                            录像质量
+                        </div>
+                        <div class="text">
+                            高清（1080P）
+                        </div>
+                    </div>
+                    <div class="item">
+                        <div class="title">
+                            备份记录
+                        </div>
+                        <div class="text">
+                            开启
+                        </div>
+                    </div>
+                    <div class="item">
+                        <div class="title">
+                            备份时间
+                        </div>
+                        <div class="text">
+                            每日02:00
+                        </div>
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col>
+                <el-row>
+                    <el-col>
+                        <div class="subtitle">历史视频查询</div>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="8">
+                        <el-select placeholder="全部摄像头">
+                        </el-select>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-date-picker v-model="value1" type="daterange" range-separator="至" style="width: 100%;"
+                            start-placeholder="开始" end-placeholder="结束" :size="size" />
+                    </el-col>
+                    <el-col :span="4">
+                        <el-button type="primary">搜索</el-button>
+                    </el-col>
+                </el-row>
+            </el-col>
+            <el-col>
+                <el-row>
+                    <el-table :data="data" height="200px" max-height="200px">
+                        <el-table-column label="摄像头" prop="name" width="100">
+                        </el-table-column>
+                        <el-table-column label="日期" prop="date" width="120">
+                        </el-table-column>
+                        <el-table-column label="时长" prop="duration">
+                        </el-table-column>
+                        <el-table-column label="大小" prop="size">
+                        </el-table-column>
+                        <el-table-column label="操作" fixed="right" width="100">
+                            <template #default="scope">
+                                <div class="svg-icon">
+                                    <img src="/assets/svg/play.svg" alt="">
+                                    <img src="/assets/svg/download.svg" alt="">
+                                    <img src="/assets/svg/delete.svg" alt=""></img>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <div class="pagination" v-if="activeTab !== 'record'">
+                        <el-pagination layout="prev, pager, next, jumper" :total="totalRecords"
+                            v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
+                            @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
+                    </div>
+                </el-row>
+            </el-col>
+        </el-row>
+    </el-card>
+</template>
+<style scoped lang="scss">
+.title-box {
+    font-family: "Alibaba-PuHuiTi-Bold";
+    font-size: 20px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 24px;
+    color: rgba(0, 30, 59, 1);
+    text-align: left;
+    vertical-align: top;
+}
+
+.subtitle {
+    font-size: 16px;
+    color: #001E3B;
+    position: relative;
+    margin: 10px 0;
+
+    ::v-deep::before {
+        position: absolute;
+        width: 5px;
+        height: 5px;
+        content: '';
+        border-radius: 50%;
+        background-color: rgba(24, 109, 245, 1);
+        top: 50%;
+        left: -8px;
+        transform: translateY(-50%);
+    }
+}
+
+.cunchu {
+    .text {
+        position: absolute;
+        bottom: 60px;
+        width: 100%;
+        color: rgba(113, 128, 150, 1);
+        font-size: 14px;
+        text-align: center;
+    }
+}
+
+.lxcc {
+    .top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .edit {
+            color: rgba(0, 30, 59, 1);
+            font-size: 14px;
+            cursor: pointer;
+        }
+    }
+
+    .content {
+        background-color: #F2F8FC;
+        border-radius: 10px;
+
+        .item {
+            display: flex;
+            border-bottom: 1px solid #E3EDFF;
+            padding: 10px 0;
+            text-align: center;
+        }
+
+        .title {
+            width: 50%;
+        }
+
+        .text {
+            width: 50%;
+        }
+    }
+}
+
+.svg-icon {
+    display: flex;
+    justify-content: space-around;
+
+    img {
+        width: 15px;
+        height: 15px;
+        display: block;
+        cursor: pointer;
+    }
+}
+</style>
+<script setup>
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+const chartRef = ref(null);
+let myChart = null;
+const pageSize = ref(20);
+const totalRecords = ref(100);
+const initChart = () => {
+    myChart = echarts.init(chartRef.value);
+    var option = {
+        // 调整图表整体位置，向上移动以减少底部空白
+        // 添加首尾单位标识
+        graphic: [
+            // 起始单位 (0TB)
+            {
+                type: 'text',
+                left: '24%',
+                top: '50%',  // 上移文本位置
+                style: {
+                    text: '0TB',
+                    fontSize: 14,
+                    color: '#666'
+                }
+            },
+            // 结束单位 (10TB)
+            {
+                type: 'text',
+                right: '24%',
+                top: '50%',  // 上移文本位置
+                style: {
+                    text: '10TB',
+                    fontSize: 14,
+                    color: '#666'
+                }
+            },
+            // 中间显示当前值和百分比（换行显示）
+            {
+                type: 'text',
+                left: 'center',
+                top: '40%',  // 调整到48%位置
+                style: {
+                    text: '6.68TB\n48%',
+                    fontSize: 18,
+                    fontWeight: 'bold',
+                    textAlign: 'center',
+                    lineHeight: 20  // 增加行高以确保换行效果
+                }
+            }
+        ],
+        series: [
+            {
+                type: 'gauge',
+                radius: '85%',  // 适当减小半径
+                center: ['50%', '50%'],  // 上移图表中心位置
+                startAngle: 170, // 开始角度（左侧）
+                endAngle: 10, // 结束角度（右侧）
+                max: 10, // 最大值设置为10TB
+                axisLine: {
+                    lineStyle: {
+                        width: 40, // 保持条的粗细
+                        color: [
+                            [0.67, '#4863FF'], // 当前值6.7TB对应67%
+                            [1, '#E5E7EB'] // 未用部分颜色
+                        ]
+                    }
+                },
+                // 隐藏所有刻度相关元素
+                axisTick: {
+                    show: false
+                },
+                splitLine: {
+                    show: false
+                },
+                axisLabel: {
+                    show: false
+                },
+                // 隐藏指针
+                pointer: {
+                    show: false
+                },
+                // 隐藏默认详情
+                detail: {
+                    show: false
+                },
+                // 当前值（6.7TB）
+                data: [{ value: 6.7 }]
+            }
+        ]
+    };
+    myChart.setOption(option);
+};
+
+// 监听窗口大小变化，重新绘制图表
+const handleResize = () => {
+    if (myChart) {
+        myChart.resize();
+    }
+};
+const data = computed(() => {
+    return Array.from({ length: 10 }, (_, i) => ({
+        name: `摄像头${i + 1}`,
+        date: '25.03.12-10:00',
+        duration: '4小时',
+        size: '2.4GB'
+    }));
+});
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+});
+
+// 组件卸载时移除事件监听
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+});
+</script>
diff --git a/src/views/securitySurveillance/components/spjk.vue b/src/views/securitySurveillance/components/spjk.vue
index 9757df5..12fa78d 100644
--- a/src/views/securitySurveillance/components/spjk.vue
+++ b/src/views/securitySurveillance/components/spjk.vue
@@ -1,19 +1,177 @@
 <template>
-    <el-row>
-        <el-card style="width: 100%;border-radius: 12px;">
+    <el-row style="height: 100%;">
+        <el-card style="width: 100%;border-radius: 12px;height: 100%;">
             <div style="display: flex;width: 100%;justify-content: space-between;align-items: center;">
-                <TitleComponent title="实时视频监控" subtitle="查看所有已完成的巡检记录，跟进巡检报告" fontLevel="2" />
+                <TitleComponent title="实时视频监控" subtitle="查看所有已完成的巡检记录，跟进巡检报告" />
                 <span style="color: rgba(24, 109, 245, 1);display: flex;align-items: center; cursor: pointer;">
                     <span>
                         2025/06/30 12:00
                         刷新数据
                     </span>
                     <el-icon>
-                        <refresh />
+                        <Refresh />
                     </el-icon>
                 </span>
             </div>
+            <div class="video-container">
+                <el-row gutter="20">
+                    <!-- 扩展布局：左侧大视频 + 右侧小视频列 -->
+                    <template v-if="isExpanded">
+                        <!-- 左侧大视频（占 16 列） -->
+                        <el-col :span="16">
+                            <div class="item large" @click="() => { isExpanded = false; }">
+                                <img :src="videoList[activeIndex].url" alt="">
+                                <div class="title" v-if="isExpanded"
+                                    style="display: flex;justify-content: space-between;">
+                                    <div class="text">
+                                        {{ videoList[activeIndex].name }}
+                                    </div>
+                                    <div class="tools">
+                                        <img src="/assets/svg/huanyuan.svg" alt=""></img>
+                                        <img src="/assets/svg/quanpin.svg" alt=""></img>
+                                        <img src="/assets/svg/jietu.svg" alt="">
+                                    </div>
+                                </div>
+                                <div class="title" v-else>{{ videoList[activeIndex].name }}</div>
+                            </div>
+                        </el-col>
+                        <!-- 右侧小视频列（占 8 列） -->
+                        <el-col :span="8">
+                            <el-row gutter="20">
+                                <el-col :span="24" v-for="i in 3" :key="i">
+                                    <div class="item small" @click="() => {
+                                        activeIndex = videoList.length - 3 + i - 1;
+                                    }">
+                                        <img :src="videoList[videoList.length - 3 + i - 1].url" alt="">
+                                        <div class="title">{{ videoList[videoList.length - 3 + i - 1].name }}</div>
+                                    </div>
+                                </el-col>
+                            </el-row>
+                        </el-col>
+                    </template>
+
+                    <!-- 普通布局：所有视频均匀排列 -->
+                    <template v-else>
+                        <el-col :span="8" v-for="(item, index) in videoList" :key="index">
+                            <div class="item" @click="() => {
+                                activeIndex = index;
+                                isExpanded = true;
+                            }">
+                                <img :src="item.url" alt="">
+                                <div class="title">{{ item.name }}</div>
+                            </div>
+                        </el-col>
+
+                    </template>
+                </el-row>
+                <el-row v-if="isExpanded">
+                    <div class="pagination" v-if="activeTab !== 'record'">
+                        <el-pagination layout="prev, pager, next, jumper, sizes" :total="totalRecords"
+                            v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
+                            @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
+                    </div>
+                </el-row>
+            </div>
         </el-card>
     </el-row>
 </template>
-<script setup></script>
\ No newline at end of file
+
+<script setup>
+import { ref } from 'vue';
+import { Refresh } from '@element-plus/icons-vue';
+import TitleComponent from '@/components/TitleComponent';
+const activeIndex = ref(-1); // 初始无选中，选中后为对应索引
+const isExpanded = ref(false); // 初始为普通布局
+const pageSize = ref(20);
+const totalRecords = ref(100);
+const videoList = ref([
+    {
+        name: 'A区d厂',
+        url: 'https://img.js.design/assets/img/68c144e8ba276a0e8a4a55c2.jpeg#bab7e2e06aae943525cacb13bd63e30d'
+    },
+    {
+        name: 'A区d厂',
+        url: 'https://img.js.design/assets/img/68c144efb5e8b987e5ca6462.jpeg#5523cf094b2f8c3a79ea4eb330c99a30'
+    },
+    {
+        name: 'A区d厂',
+        url: 'https://img.js.design/assets/img/68c144fbbad414f81995e90c.webp#230d8ca5ca39982518439db26e0ea899'
+    },
+    {
+        name: 'A区d厂',
+        url: 'https://img.js.design/assets/img/68c1450640d5d2a02e2540b2.webp#adad2379a0b04d6968364e4fb1133f77'
+    },
+    {
+        name: 'A区d厂',
+        url: 'https://img.js.design/assets/img/68c14543d56431f9d6f6808e.webp#16f0a0d8fab4f8ff3b39b04bfabac054'
+    },
+    {
+        name: 'A区d厂',
+        url: 'https://img.js.design/assets/img/68c14578d56431f9d6f68981.jpg#e77150417f28a971be4846eb0be90373'
+    },
+    {
+        name: 'A区d厂',
+        url: 'https://img.js.design/assets/img/68c145e03f22157da619a7ce.png#546ff44289a22bf175e1eca1f69cd8f9'
+    },
+    {
+        name: 'A区d厂',
+        url: 'https://img.js.design/assets/img/68c1461fb5e8b987e5caa293.jpeg#870e4d2b88b487ecb8f2f0b956c45c08'
+    },
+    {
+        name: 'A区d厂',
+        url: 'https://img.js.design/assets/img/68c1462dcbf9ed2271880b95.webp#ae7ae94ca84ce980e2d2281869335f06'
+    }
+]);
+</script>
+
+<style scoped lang="scss">
+.video-container {
+
+    .item {
+        height: 220px;
+        margin-bottom: 20px;
+        position: relative;
+        border: 2px solid rgba(45, 119, 249, 1);
+        cursor: pointer;
+
+        img {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+
+        .title {
+            position: absolute;
+            padding: 5px 0;
+            padding-left: 10px;
+            font-size: 14px;
+            border-radius: 8px 8px 0px 0px;
+            background: linear-gradient(180deg, rgba(0, 0, 0, 0.73) 0%, rgba(0, 0, 0, 0.33) 100%);
+            width: 100%;
+            bottom: 0;
+            color: #fff;
+        }
+    }
+
+    // 大视频样式（高度与右侧三个小视频总高度对齐，考虑间距）
+    .large {
+        height: calc(220px * 3 + 20px * 2); // 高度为3个小视频高度加上2个间距
+
+        .tools {
+            display: flex;
+
+            img {
+                width: 20px;
+                height: 20px;
+                display: block;
+                margin: 0 10px;
+            }
+        }
+    }
+
+    // 小视频样式（保持原高度，适配右侧单列）
+    .small {
+        height: 220px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/securitySurveillance/index.vue b/src/views/securitySurveillance/index.vue
index 54161c9..a0fccf8 100644
--- a/src/views/securitySurveillance/index.vue
+++ b/src/views/securitySurveillance/index.vue
@@ -27,11 +27,18 @@
         <el-row>
             <Top />
         </el-row>
-        <el-row>
-            <el-col :span="18" style="margin-top: 20px;">
+        <el-row style="margin-top: 20px;" :gutter="25">
+            <el-col :span="18">
                 <Spjk />
             </el-col>
-            <el-col :span="6">1</el-col>
+            <el-col :span="6">
+                <Spgl />
+            </el-col>
+        </el-row>
+        <el-row style="margin-top: 20px;">
+            <el-col>
+                <Sbzt />
+            </el-col>
         </el-row>
     </div>
 
@@ -46,4 +53,6 @@
 import TitleComponent from "@/components/TitleComponent";
 import Top from "./components/top"
 import Spjk from "./components/spjk"
+import Spgl from "./components/spgl";
+import Sbzt from "./components/sbzt";
 </script>
\ No newline at end of file