diff --git a/fzjgact/huodong/__pycache__/models.cpython-311.pyc b/fzjgact/huodong/__pycache__/models.cpython-311.pyc
index 83e022f..a949681 100644
Binary files a/fzjgact/huodong/__pycache__/models.cpython-311.pyc and b/fzjgact/huodong/__pycache__/models.cpython-311.pyc differ
diff --git a/fzjgact/huodong/static/huodong/input.css b/fzjgact/huodong/static/huodong/input.css
index bd6213e..23d4f37 100644
--- a/fzjgact/huodong/static/huodong/input.css
+++ b/fzjgact/huodong/static/huodong/input.css
@@ -1,3 +1,37 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .card-gradient {
+    @apply bg-gradient-to-br from-white via-blue-50/30 to-blue-100/50;
+  }
+  
+  .card-gradient-early {
+    @apply bg-gradient-to-br from-emerald-50 via-white to-teal-100/50;
+  }
+  
+  .card-gradient-latest {
+    @apply bg-gradient-to-br from-amber-50 via-white to-orange-100/50;
+  }
+  
+  .table-header-gradient {
+    @apply bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-700;
+  }
+  
+  .hover-lift {
+    @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-xl;
+  }
+  
+  .timeline-dot {
+    @apply absolute top-1/2 w-5 h-5 rounded-full transform -translate-y-1/2 border-4 border-white shadow-lg;
+  }
+  
+  .glass-effect {
+    @apply backdrop-blur-sm bg-white/80;
+  }
+  
+  .section-divider {
+    @apply h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-blue-400 to-transparent;
+  }
+}
\ No newline at end of file
diff --git a/fzjgact/huodong/static/huodong/output.css b/fzjgact/huodong/static/huodong/output.css
index 7fe32b9..ca607a7 100644
--- a/fzjgact/huodong/static/huodong/output.css
+++ b/fzjgact/huodong/static/huodong/output.css
@@ -612,6 +612,97 @@ video {
   }
 }
 
+.card-gradient {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+  --tw-gradient-from: #fff var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+  --tw-gradient-to: rgb(239 246 255 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), rgb(239 246 255 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
+  --tw-gradient-to: rgb(219 234 254 / 0.5) var(--tw-gradient-to-position);
+}
+
+.card-gradient-early {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+  --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
+  --tw-gradient-to: rgb(204 251 241 / 0.5) var(--tw-gradient-to-position);
+}
+
+.card-gradient-latest {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+  --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
+  --tw-gradient-to: rgb(255 237 213 / 0.5) var(--tw-gradient-to-position);
+}
+
+.table-header-gradient {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+  --tw-gradient-to: rgb(29 78 216 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #1d4ed8 var(--tw-gradient-via-position), var(--tw-gradient-to);
+  --tw-gradient-to: #4338ca var(--tw-gradient-to-position);
+}
+
+.hover-lift {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.hover-lift:hover {
+  --tw-translate-y: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.timeline-dot {
+  position: absolute;
+  top: 50%;
+  height: 1.25rem;
+  width: 1.25rem;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-radius: 9999px;
+  border-width: 4px;
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.glass-effect {
+  background-color: rgb(255 255 255 / 0.8);
+  --tw-backdrop-blur: blur(4px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.section-divider {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  height: 0.25rem;
+  border-radius: 9999px;
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+  --tw-gradient-from: transparent var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+  --tw-gradient-to: rgb(96 165 250 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #60a5fa var(--tw-gradient-via-position), var(--tw-gradient-to);
+  --tw-gradient-to: transparent var(--tw-gradient-to-position);
+}
+
 .visible {
   visibility: visible;
 }
@@ -688,6 +779,14 @@ video {
   top: 1rem;
 }
 
+.top-3 {
+  top: 0.75rem;
+}
+
+.left-4 {
+  left: 1rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -709,6 +808,11 @@ video {
   margin-right: 0.25rem;
 }
 
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -724,11 +828,6 @@ video {
   margin-bottom: 2rem;
 }
 
-.mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -753,10 +852,18 @@ video {
   margin-bottom: 2rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -765,6 +872,14 @@ video {
   margin-right: 0.375rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -781,6 +896,32 @@ video {
   margin-top: 1rem;
 }
 
+.mt-auto {
+  margin-top: auto;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
 .block {
   display: block;
 }
@@ -813,8 +954,20 @@ video {
   height: 0px;
 }
 
-.h-0\.5 {
-  height: 0.125rem;
+.h-1 {
+  height: 0.25rem;
+}
+
+.h-1\.5 {
+  height: 0.375rem;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-12 {
+  height: 3rem;
 }
 
 .h-2 {
@@ -829,6 +982,10 @@ video {
   height: 0.75rem;
 }
 
+.h-3\.5 {
+  height: 0.875rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -837,10 +994,18 @@ video {
   height: 12rem;
 }
 
+.h-5 {
+  height: 1.25rem;
+}
+
 .h-6 {
   height: 1.5rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
 .h-\[100px\] {
   height: 100px;
 }
@@ -857,6 +1022,26 @@ video {
   height: 1px;
 }
 
+.h-16 {
+  height: 4rem;
+}
+
+.h-\[180px\] {
+  height: 180px;
+}
+
+.h-24 {
+  height: 6rem;
+}
+
+.h-\[80px\] {
+  height: 80px;
+}
+
+.max-h-32 {
+  max-height: 8rem;
+}
+
 .max-h-60 {
   max-height: 15rem;
 }
@@ -877,6 +1062,14 @@ video {
   width: 33.333333%;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-12 {
+  width: 3rem;
+}
+
 .w-2 {
   width: 0.5rem;
 }
@@ -889,6 +1082,10 @@ video {
   width: 0.75rem;
 }
 
+.w-3\.5 {
+  width: 0.875rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -897,12 +1094,20 @@ video {
   width: 12rem;
 }
 
+.w-5 {
+  width: 1.25rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }
 
-.w-\[calc\(50\%-2rem\)\] {
-  width: calc(50% - 2rem);
+.w-8 {
+  width: 2rem;
+}
+
+.w-\[calc\(50\%-2\.5rem\)\] {
+  width: calc(50% - 2.5rem);
 }
 
 .w-auto {
@@ -913,6 +1118,22 @@ video {
   width: 100%;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
+.min-w-0 {
+  min-width: 0px;
+}
+
+.min-w-\[2\.5rem\] {
+  min-width: 2.5rem;
+}
+
+.min-w-\[2rem\] {
+  min-width: 2rem;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -925,6 +1146,10 @@ video {
   max-width: 56rem;
 }
 
+.max-w-5xl {
+  max-width: 64rem;
+}
+
 .max-w-\[90\%\] {
   max-width: 90%;
 }
@@ -937,6 +1162,14 @@ video {
   max-width: 28rem;
 }
 
+.max-w-6xl {
+  max-width: 72rem;
+}
+
+.max-w-7xl {
+  max-width: 80rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -945,6 +1178,14 @@ video {
   flex: none;
 }
 
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.flex-shrink {
+  flex-shrink: 1;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -953,6 +1194,11 @@ video {
   border-collapse: collapse;
 }
 
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-translate-y-1 {
   --tw-translate-y: -0.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -963,11 +1209,32 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-x-1\/2 {
+  --tw-translate-x: 50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-x-1 {
+  --tw-translate-x: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-1 {
+  --tw-translate-x: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1012,6 +1279,10 @@ video {
   flex-wrap: nowrap;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-end {
   align-items: flex-end;
 }
@@ -1032,10 +1303,18 @@ video {
   justify-content: space-between;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
 
+.gap-3 {
+  gap: 0.75rem;
+}
+
 .gap-4 {
   gap: 1rem;
 }
@@ -1044,16 +1323,10 @@ video {
   gap: 1.5rem;
 }
 
-.space-y-3 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
-}
-
-.space-y-8 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
@@ -1062,12 +1335,41 @@ video {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
+.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
+}
+
 .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-divide-opacity));
@@ -1102,6 +1404,10 @@ video {
   border-radius: 0.25rem;
 }
 
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1136,6 +1442,10 @@ video {
   border-width: 0px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-4 {
   border-width: 4px;
 }
@@ -1144,6 +1454,10 @@ video {
   border-bottom-width: 1px;
 }
 
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-l-0 {
   border-left-width: 0px;
 }
@@ -1160,20 +1474,57 @@ video {
   border-top-width: 1px;
 }
 
+.border-t-2 {
+  border-top-width: 2px;
+}
+
+.border-l {
+  border-left-width: 1px;
+}
+
+.border-r {
+  border-right-width: 1px;
+}
+
 .border-solid {
   border-style: solid;
 }
 
+.border-amber-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 243 199 / var(--tw-border-opacity));
+}
+
+.border-amber-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(245 158 11 / var(--tw-border-opacity));
+}
+
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
+.border-blue-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(219 234 254 / var(--tw-border-opacity));
+}
+
+.border-blue-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(191 219 254 / var(--tw-border-opacity));
+}
+
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
+.border-emerald-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 250 229 / var(--tw-border-opacity));
+}
+
 .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
@@ -1194,14 +1545,84 @@ video {
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
 
+.border-gray-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(31 41 55 / var(--tw-border-opacity));
+}
+
+.border-indigo-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(224 231 255 / var(--tw-border-opacity));
+}
+
+.border-orange-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 237 213 / var(--tw-border-opacity));
+}
+
+.border-purple-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 232 255 / var(--tw-border-opacity));
+}
+
+.border-teal-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(204 251 241 / var(--tw-border-opacity));
+}
+
+.border-teal-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(153 246 228 / var(--tw-border-opacity));
+}
+
 .border-white {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.border-gray-800 {
+.border-cyan-100 {
   --tw-border-opacity: 1;
-  border-color: rgb(31 41 55 / var(--tw-border-opacity));
+  border-color: rgb(207 250 254 / var(--tw-border-opacity));
+}
+
+.border-purple-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(168 85 247 / var(--tw-border-opacity));
+}
+
+.border-indigo-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(199 210 254 / var(--tw-border-opacity));
+}
+
+.border-rose-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 228 230 / var(--tw-border-opacity));
+}
+
+.border-rose-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 205 211 / var(--tw-border-opacity));
+}
+
+.border-violet-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(237 233 254 / var(--tw-border-opacity));
+}
+
+.border-violet-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(221 214 254 / var(--tw-border-opacity));
+}
+
+.bg-amber-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
+}
+
+.bg-amber-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
 }
 
 .bg-black {
@@ -1229,6 +1650,26 @@ video {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.bg-blue-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
+}
+
+.bg-emerald-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 250 229 / var(--tw-bg-opacity));
+}
+
+.bg-emerald-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 253 245 / var(--tw-bg-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1244,6 +1685,11 @@ video {
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1259,6 +1705,61 @@ video {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+
+.bg-green-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
+}
+
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
+
+.bg-orange-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
+}
+
+.bg-orange-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
+}
+
+.bg-purple-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 245 255 / var(--tw-bg-opacity));
+}
+
+.bg-purple-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
+}
+
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
 .bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -1269,6 +1770,20 @@ video {
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
 }
 
+.bg-slate-50\/50 {
+  background-color: rgb(248 250 252 / 0.5);
+}
+
+.bg-teal-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 251 241 / var(--tw-bg-opacity));
+}
+
+.bg-teal-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
+}
+
 .bg-transparent {
   background-color: transparent;
 }
@@ -1278,14 +1793,71 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-blue-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
+.bg-white\/20 {
+  background-color: rgb(255 255 255 / 0.2);
 }
 
-.bg-gray-900 {
+.bg-orange-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
+}
+
+.bg-slate-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+}
+
+.bg-teal-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 250 / var(--tw-bg-opacity));
+}
+
+.bg-pink-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
+}
+
+.bg-purple-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
+}
+
+.bg-rose-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 228 230 / var(--tw-bg-opacity));
+}
+
+.bg-rose-50\/30 {
+  background-color: rgb(255 241 242 / 0.3);
+}
+
+.bg-rose-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 241 242 / var(--tw-bg-opacity));
+}
+
+.bg-violet-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 233 254 / var(--tw-bg-opacity));
+}
+
+.bg-violet-50\/30 {
+  background-color: rgb(245 243 255 / 0.3);
+}
+
+.bg-violet-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 243 255 / var(--tw-bg-opacity));
 }
 
 .bg-opacity-50 {
@@ -1300,30 +1872,499 @@ video {
   --tw-bg-opacity: 0.8;
 }
 
+.bg-gradient-to-br {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
+.from-amber-400 {
+  --tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-amber-50 {
+  --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .from-blue-50 {
   --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-blue-600 {
+  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-emerald-400 {
+  --tw-gradient-from: #34d399 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-emerald-50 {
+  --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-gray-700 {
+  --tw-gradient-from: #374151 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-indigo-50 {
+  --tw-gradient-from: #eef2ff var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-indigo-500 {
+  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-orange-500 {
+  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-purple-400 {
+  --tw-gradient-from: #c084fc var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .from-purple-50 {
   --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-purple-600 {
+  --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-red-400 {
+  --tw-gradient-from: #f87171 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-slate-50 {
+  --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-teal-400 {
+  --tw-gradient-from: #2dd4bf var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(45 212 191 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-teal-50 {
+  --tw-gradient-from: #f0fdfa var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(240 253 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-teal-500 {
+  --tw-gradient-from: #14b8a6 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(20 184 166 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-transparent {
+  --tw-gradient-from: transparent var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-white {
+  --tw-gradient-from: #fff var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-cyan-500 {
+  --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-emerald-500 {
+  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-amber-500 {
+  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-indigo-600 {
+  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-red-500 {
+  --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-teal-600 {
+  --tw-gradient-from: #0d9488 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(13 148 136 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-rose-50 {
+  --tw-gradient-from: #fff1f2 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 241 242 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-rose-600 {
+  --tw-gradient-from: #e11d48 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(225 29 72 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-cyan-600 {
+  --tw-gradient-from: #0891b2 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(8 145 178 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-gray-100 {
+  --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-violet-50 {
+  --tw-gradient-from: #f5f3ff var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(245 243 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-violet-600 {
+  --tw-gradient-from: #7c3aed var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(124 58 237 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-emerald-600 {
+  --tw-gradient-from: #059669 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.via-blue-400 {
+  --tw-gradient-to: rgb(96 165 250 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #60a5fa var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-blue-50\/30 {
+  --tw-gradient-to: rgb(239 246 255 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), rgb(239 246 255 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-blue-500 {
+  --tw-gradient-to: rgb(59 130 246 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #3b82f6 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-blue-700 {
+  --tw-gradient-to: rgb(29 78 216 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #1d4ed8 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-gray-300 {
+  --tw-gradient-to: rgb(209 213 219 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #d1d5db var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-indigo-400 {
+  --tw-gradient-to: rgb(129 140 248 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #818cf8 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-indigo-600 {
+  --tw-gradient-to: rgb(79 70 229 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #4f46e5 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-orange-400 {
+  --tw-gradient-to: rgb(251 146 60 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #fb923c var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-orange-600 {
+  --tw-gradient-to: rgb(234 88 12 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #ea580c var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-purple-400 {
+  --tw-gradient-to: rgb(192 132 252 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #c084fc var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-purple-700 {
+  --tw-gradient-to: rgb(126 34 206 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #7e22ce var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-teal-400 {
+  --tw-gradient-to: rgb(45 212 191 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #2dd4bf var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-teal-600 {
+  --tw-gradient-to: rgb(13 148 136 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #0d9488 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-white {
+  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-blue-50 {
+  --tw-gradient-to: rgb(239 246 255 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #eff6ff var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-cyan-400 {
+  --tw-gradient-to: rgb(34 211 238 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #22d3ee var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-cyan-600 {
+  --tw-gradient-to: rgb(8 145 178 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #0891b2 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-emerald-400 {
+  --tw-gradient-to: rgb(52 211 153 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #34d399 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-emerald-600 {
+  --tw-gradient-to: rgb(5 150 105 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #059669 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-amber-400 {
+  --tw-gradient-to: rgb(251 191 36 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #fbbf24 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-amber-600 {
+  --tw-gradient-to: rgb(217 119 6 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #d97706 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-indigo-500 {
+  --tw-gradient-to: rgb(99 102 241 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #6366f1 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-indigo-700 {
+  --tw-gradient-to: rgb(67 56 202 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #4338ca var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-teal-500 {
+  --tw-gradient-to: rgb(20 184 166 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #14b8a6 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-teal-700 {
+  --tw-gradient-to: rgb(15 118 110 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #0f766e var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-rose-400 {
+  --tw-gradient-to: rgb(251 113 133 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #fb7185 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-rose-500 {
+  --tw-gradient-to: rgb(244 63 94 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #f43f5e var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-rose-700 {
+  --tw-gradient-to: rgb(190 18 60 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #be123c var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-cyan-500 {
+  --tw-gradient-to: rgb(6 182 212 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #06b6d4 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-cyan-700 {
+  --tw-gradient-to: rgb(14 116 144 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #0e7490 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-violet-400 {
+  --tw-gradient-to: rgb(167 139 250 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #a78bfa var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-violet-500 {
+  --tw-gradient-to: rgb(139 92 246 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #8b5cf6 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-violet-700 {
+  --tw-gradient-to: rgb(109 40 217 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #6d28d9 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-emerald-500 {
+  --tw-gradient-to: rgb(16 185 129 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #10b981 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-emerald-700 {
+  --tw-gradient-to: rgb(4 120 87 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #047857 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.to-amber-400 {
+  --tw-gradient-to: #fbbf24 var(--tw-gradient-to-position);
+}
+
+.to-cyan-50 {
+  --tw-gradient-to: #ecfeff var(--tw-gradient-to-position);
+}
+
+.to-cyan-600 {
+  --tw-gradient-to: #0891b2 var(--tw-gradient-to-position);
+}
+
+.to-emerald-600 {
+  --tw-gradient-to: #059669 var(--tw-gradient-to-position);
+}
+
+.to-gray-100 {
+  --tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position);
+}
+
+.to-gray-900 {
+  --tw-gradient-to: #111827 var(--tw-gradient-to-position);
+}
+
 .to-indigo-50 {
   --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
 }
 
+.to-indigo-700 {
+  --tw-gradient-to: #4338ca var(--tw-gradient-to-position);
+}
+
+.to-orange-500 {
+  --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
+}
+
 .to-pink-50 {
   --tw-gradient-to: #fdf2f8 var(--tw-gradient-to-position);
 }
 
+.to-purple-50 {
+  --tw-gradient-to: #faf5ff var(--tw-gradient-to-position);
+}
+
+.to-purple-600 {
+  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
+}
+
+.to-red-600 {
+  --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
+}
+
+.to-teal-500 {
+  --tw-gradient-to: #14b8a6 var(--tw-gradient-to-position);
+}
+
+.to-teal-600 {
+  --tw-gradient-to: #0d9488 var(--tw-gradient-to-position);
+}
+
+.to-transparent {
+  --tw-gradient-to: transparent var(--tw-gradient-to-position);
+}
+
+.to-blue-700 {
+  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
+}
+
+.to-orange-600 {
+  --tw-gradient-to: #ea580c var(--tw-gradient-to-position);
+}
+
+.to-purple-700 {
+  --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
+}
+
+.to-cyan-700 {
+  --tw-gradient-to: #0e7490 var(--tw-gradient-to-position);
+}
+
+.to-teal-700 {
+  --tw-gradient-to: #0f766e var(--tw-gradient-to-position);
+}
+
+.to-pink-700 {
+  --tw-gradient-to: #be185d var(--tw-gradient-to-position);
+}
+
+.to-rose-700 {
+  --tw-gradient-to: #be123c var(--tw-gradient-to-position);
+}
+
+.to-blue-600 {
+  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
+}
+
+.to-gray-200 {
+  --tw-gradient-to: #e5e7eb var(--tw-gradient-to-position);
+}
+
+.to-violet-700 {
+  --tw-gradient-to: #6d28d9 var(--tw-gradient-to-position);
+}
+
+.to-emerald-700 {
+  --tw-gradient-to: #047857 var(--tw-gradient-to-position);
+}
+
+.to-teal-50 {
+  --tw-gradient-to: #f0fdfa var(--tw-gradient-to-position);
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1353,11 +2394,20 @@ video {
   padding: 2rem;
 }
 
+.p-2\.5 {
+  padding: 0.625rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
 
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1373,11 +2423,26 @@ video {
   padding-right: 1.5rem;
 }
 
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
 
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
 .py-10 {
   padding-top: 2.5rem;
   padding-bottom: 2.5rem;
@@ -1418,6 +2483,16 @@ video {
   padding-bottom: 2rem;
 }
 
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .pl-4 {
   padding-left: 1rem;
 }
@@ -1426,6 +2501,14 @@ video {
   padding-right: 2.5rem;
 }
 
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
+.pl-12 {
+  padding-left: 3rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1510,6 +2593,10 @@ video {
   text-transform: uppercase;
 }
 
+.normal-case {
+  text-transform: none;
+}
+
 .italic {
   font-style: italic;
 }
@@ -1535,11 +2622,41 @@ video {
   letter-spacing: 0.05em;
 }
 
+.text-amber-400 {
+  --tw-text-opacity: 1;
+  color: rgb(251 191 36 / var(--tw-text-opacity));
+}
+
+.text-amber-600 {
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity));
+}
+
+.text-amber-700 {
+  --tw-text-opacity: 1;
+  color: rgb(180 83 9 / var(--tw-text-opacity));
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-blue-200 {
+  --tw-text-opacity: 1;
+  color: rgb(191 219 254 / var(--tw-text-opacity));
+}
+
 .text-blue-300 {
   --tw-text-opacity: 1;
   color: rgb(147 197 253 / var(--tw-text-opacity));
 }
 
+.text-blue-400 {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
@@ -1565,6 +2682,26 @@ video {
   color: rgb(30 58 138 / var(--tw-text-opacity));
 }
 
+.text-emerald-600 {
+  --tw-text-opacity: 1;
+  color: rgb(5 150 105 / var(--tw-text-opacity));
+}
+
+.text-emerald-700 {
+  --tw-text-opacity: 1;
+  color: rgb(4 120 87 / var(--tw-text-opacity));
+}
+
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1595,6 +2732,21 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
+
+.text-green-700 {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
+.text-indigo-400 {
+  --tw-text-opacity: 1;
+  color: rgb(129 140 248 / var(--tw-text-opacity));
+}
+
 .text-indigo-600 {
   --tw-text-opacity: 1;
   color: rgb(79 70 229 / var(--tw-text-opacity));
@@ -1605,6 +2757,16 @@ video {
   color: rgb(67 56 202 / var(--tw-text-opacity));
 }
 
+.text-indigo-800 {
+  --tw-text-opacity: 1;
+  color: rgb(55 48 163 / var(--tw-text-opacity));
+}
+
+.text-orange-700 {
+  --tw-text-opacity: 1;
+  color: rgb(194 65 12 / var(--tw-text-opacity));
+}
+
 .text-purple-600 {
   --tw-text-opacity: 1;
   color: rgb(147 51 234 / var(--tw-text-opacity));
@@ -1615,11 +2777,36 @@ video {
   color: rgb(126 34 206 / var(--tw-text-opacity));
 }
 
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
+
 .text-red-900 {
   --tw-text-opacity: 1;
   color: rgb(127 29 29 / var(--tw-text-opacity));
 }
 
+.text-teal-600 {
+  --tw-text-opacity: 1;
+  color: rgb(13 148 136 / var(--tw-text-opacity));
+}
+
+.text-teal-700 {
+  --tw-text-opacity: 1;
+  color: rgb(15 118 110 / var(--tw-text-opacity));
+}
+
+.text-teal-800 {
+  --tw-text-opacity: 1;
+  color: rgb(17 94 89 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1630,29 +2817,74 @@ video {
   color: rgb(234 179 8 / var(--tw-text-opacity));
 }
 
-.text-gray-300 {
+.text-red-800 {
   --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
+  color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
-.text-blue-200 {
+.text-green-600 {
   --tw-text-opacity: 1;
-  color: rgb(191 219 254 / var(--tw-text-opacity));
+  color: rgb(22 163 74 / var(--tw-text-opacity));
 }
 
-.text-blue-400 {
+.text-teal-500 {
   --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
+  color: rgb(20 184 166 / var(--tw-text-opacity));
 }
 
-.text-gray-200 {
+.text-orange-600 {
   --tw-text-opacity: 1;
-  color: rgb(229 231 235 / var(--tw-text-opacity));
+  color: rgb(234 88 12 / var(--tw-text-opacity));
 }
 
-.text-indigo-400 {
+.text-pink-600 {
   --tw-text-opacity: 1;
-  color: rgb(129 140 248 / var(--tw-text-opacity));
+  color: rgb(219 39 119 / var(--tw-text-opacity));
+}
+
+.text-purple-800 {
+  --tw-text-opacity: 1;
+  color: rgb(107 33 168 / var(--tw-text-opacity));
+}
+
+.text-amber-800 {
+  --tw-text-opacity: 1;
+  color: rgb(146 64 14 / var(--tw-text-opacity));
+}
+
+.text-indigo-500 {
+  --tw-text-opacity: 1;
+  color: rgb(99 102 241 / var(--tw-text-opacity));
+}
+
+.text-rose-500 {
+  --tw-text-opacity: 1;
+  color: rgb(244 63 94 / var(--tw-text-opacity));
+}
+
+.text-rose-600 {
+  --tw-text-opacity: 1;
+  color: rgb(225 29 72 / var(--tw-text-opacity));
+}
+
+.text-rose-700 {
+  --tw-text-opacity: 1;
+  color: rgb(190 18 60 / var(--tw-text-opacity));
+}
+
+.text-cyan-500 {
+  --tw-text-opacity: 1;
+  color: rgb(6 182 212 / var(--tw-text-opacity));
+}
+
+.text-violet-500 {
+  --tw-text-opacity: 1;
+  color: rgb(139 92 246 / var(--tw-text-opacity));
+}
+
+.text-violet-700 {
+  --tw-text-opacity: 1;
+  color: rgb(109 40 217 / var(--tw-text-opacity));
 }
 
 .underline {
@@ -1692,10 +2924,26 @@ video {
   outline-style: solid;
 }
 
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.backdrop-filter {
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1728,6 +2976,10 @@ video {
   transition-duration: 150ms;
 }
 
+.duration-150 {
+  transition-duration: 150ms;
+}
+
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -1736,6 +2988,41 @@ video {
   transition-duration: 300ms;
 }
 
+.duration-500 {
+  transition-duration: 500ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.hover\:-translate-y-1:hover {
+  --tw-translate-y: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:-translate-y-2:hover {
+  --tw-translate-y: -0.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:scale-105:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:scale-110:hover {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:bg-blue-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-blue-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -1761,6 +3048,178 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-orange-50\/50:hover {
+  background-color: rgb(255 247 237 / 0.5);
+}
+
+.hover\:bg-orange-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 88 12 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-purple-50\/50:hover {
+  background-color: rgb(250 245 255 / 0.5);
+}
+
+.hover\:bg-purple-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-red-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-teal-50\/50:hover {
+  background-color: rgb(240 253 250 / 0.5);
+}
+
+.hover\:bg-teal-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(13 148 136 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-blue-50\/50:hover {
+  background-color: rgb(239 246 255 / 0.5);
+}
+
+.hover\:bg-amber-50\/50:hover {
+  background-color: rgb(255 251 235 / 0.5);
+}
+
+.hover\:bg-indigo-50\/50:hover {
+  background-color: rgb(238 242 255 / 0.5);
+}
+
+.hover\:bg-indigo-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-teal-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 250 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-white:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-rose-50\/50:hover {
+  background-color: rgb(255 241 242 / 0.5);
+}
+
+.hover\:bg-cyan-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 254 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-violet-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 243 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-violet-50\/50:hover {
+  background-color: rgb(245 243 255 / 0.5);
+}
+
+.hover\:bg-emerald-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 253 245 / var(--tw-bg-opacity));
+}
+
+.hover\:from-gray-800:hover {
+  --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.hover\:from-blue-700:hover {
+  --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.hover\:from-purple-700:hover {
+  --tw-gradient-from: #7e22ce var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(126 34 206 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.hover\:from-red-600:hover {
+  --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.hover\:from-teal-700:hover {
+  --tw-gradient-from: #0f766e var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(15 118 110 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.hover\:from-rose-700:hover {
+  --tw-gradient-from: #be123c var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(190 18 60 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.hover\:from-cyan-700:hover {
+  --tw-gradient-from: #0e7490 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(14 116 144 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.hover\:from-violet-700:hover {
+  --tw-gradient-from: #6d28d9 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(109 40 217 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.hover\:from-emerald-700:hover {
+  --tw-gradient-from: #047857 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(4 120 87 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.hover\:to-black:hover {
+  --tw-gradient-to: #000 var(--tw-gradient-to-position);
+}
+
+.hover\:to-blue-800:hover {
+  --tw-gradient-to: #1e40af var(--tw-gradient-to-position);
+}
+
+.hover\:to-purple-800:hover {
+  --tw-gradient-to: #6b21a8 var(--tw-gradient-to-position);
+}
+
+.hover\:to-red-700:hover {
+  --tw-gradient-to: #b91c1c var(--tw-gradient-to-position);
+}
+
+.hover\:to-teal-800:hover {
+  --tw-gradient-to: #115e59 var(--tw-gradient-to-position);
+}
+
+.hover\:to-rose-800:hover {
+  --tw-gradient-to: #9f1239 var(--tw-gradient-to-position);
+}
+
+.hover\:to-cyan-800:hover {
+  --tw-gradient-to: #155e75 var(--tw-gradient-to-position);
+}
+
+.hover\:to-violet-800:hover {
+  --tw-gradient-to: #5b21b6 var(--tw-gradient-to-position);
+}
+
+.hover\:to-emerald-800:hover {
+  --tw-gradient-to: #065f46 var(--tw-gradient-to-position);
+}
+
 .hover\:text-blue-800:hover {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
@@ -1776,12 +3235,34 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:text-cyan-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(8 145 178 / var(--tw-text-opacity));
+}
+
+.hover\:text-emerald-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(6 95 70 / var(--tw-text-opacity));
+}
+
+.hover\:shadow-2xl:hover {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .hover\:shadow-lg:hover {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:shadow-md:hover {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .hover\:shadow-xl:hover {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -1793,6 +3274,31 @@ video {
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
+.focus\:border-teal-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(20 184 166 / var(--tw-border-opacity));
+}
+
+.focus\:border-rose-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(244 63 94 / var(--tw-border-opacity));
+}
+
+.focus\:border-cyan-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(6 182 212 / var(--tw-border-opacity));
+}
+
+.focus\:border-violet-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(139 92 246 / var(--tw-border-opacity));
+}
+
+.focus\:border-emerald-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(16 185 129 / var(--tw-border-opacity));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1820,6 +3326,78 @@ video {
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-teal-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(94 234 212 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-teal-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(20 184 166 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-rose-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(253 164 175 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-cyan-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-violet-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(196 181 253 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-emerald-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity));
+}
+
+.group:hover .group-hover\:translate-x-1 {
+  --tw-translate-x: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:text-amber-700 {
+  --tw-text-opacity: 1;
+  color: rgb(180 83 9 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:text-emerald-700 {
+  --tw-text-opacity: 1;
+  color: rgb(4 120 87 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:text-purple-700 {
+  --tw-text-opacity: 1;
+  color: rgb(126 34 206 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:text-red-800 {
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:text-teal-700 {
+  --tw-text-opacity: 1;
+  color: rgb(15 118 110 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 @media (min-width: 640px) {
   .sm\:flex {
     display: flex;
@@ -1832,6 +3410,14 @@ video {
   .sm\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
+  .sm\:items-start {
+    align-items: flex-start;
+  }
 }
 
 @media (min-width: 768px) {
@@ -1839,6 +3425,10 @@ video {
     height: 150px;
   }
 
+  .md\:w-1\/2 {
+    width: 50%;
+  }
+
   .md\:w-1\/3 {
     width: 33.333333%;
   }
@@ -1878,6 +3468,12 @@ video {
   }
 }
 
+@media (min-width: 1280px) {
+  .xl\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 1;
@@ -1889,11 +3485,6 @@ video {
     border-color: rgb(55 65 81 / var(--tw-border-opacity));
   }
 
-  .dark\:border-gray-800 {
-    --tw-border-opacity: 1;
-    border-color: rgb(31 41 55 / var(--tw-border-opacity));
-  }
-
   .dark\:bg-gray-700 {
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -1909,16 +3500,6 @@ video {
     background-color: rgb(185 28 28 / var(--tw-bg-opacity));
   }
 
-  .dark\:bg-blue-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 58 138 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-gray-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-  }
-
   .dark\:text-blue-300 {
     --tw-text-opacity: 1;
     color: rgb(147 197 253 / var(--tw-text-opacity));
@@ -1934,41 +3515,6 @@ video {
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 
-  .dark\:text-blue-200 {
-    --tw-text-opacity: 1;
-    color: rgb(191 219 254 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-blue-400 {
-    --tw-text-opacity: 1;
-    color: rgb(96 165 250 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-200 {
-    --tw-text-opacity: 1;
-    color: rgb(229 231 235 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-300 {
-    --tw-text-opacity: 1;
-    color: rgb(209 213 219 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-500 {
-    --tw-text-opacity: 1;
-    color: rgb(107 114 128 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-600 {
-    --tw-text-opacity: 1;
-    color: rgb(75 85 99 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-indigo-400 {
-    --tw-text-opacity: 1;
-    color: rgb(129 140 248 / var(--tw-text-opacity));
-  }
-
   .dark\:hover\:bg-gray-700:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity));
diff --git a/fzjgact/huodong/templates/branch_all.html b/fzjgact/huodong/templates/branch_all.html
index 63de525..1973787 100644
--- a/fzjgact/huodong/templates/branch_all.html
+++ b/fzjgact/huodong/templates/branch_all.html
@@ -2,304 +2,479 @@
 {% load custom_filters %}
 
 {% block content %}
-<div class="w-full max-w-4xl mx-auto p-6">
-        <div class="relative">
-            <!-- 时间线 -->
-            <div class="absolute top-1/2 left-0 right-0 h-0.5 bg-blue-500 transform -translate-y-1/2"></div>
+<!-- 时间线区域 -->
+<div class="w-full max-w-5xl mx-auto p-6">
+    <div class="relative py-8">
+        <!-- 时间线背景 -->
+        <div class="absolute top-1/2 left-0 right-0 h-1 bg-gradient-to-r from-emerald-400 via-blue-500 to-amber-400 rounded-full transform -translate-y-1/2 shadow-sm"></div>
 
-            <div class="relative z-10 flex justify-between items-center">
-                <!-- 第一个卡片 -->
-                <div class="w-[calc(50%-2rem)] bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
+        <div class="relative z-10 flex justify-between items-center gap-6">
+            <!-- 第一个卡片 - 最初活动 -->
+            <div class="w-[calc(50%-2.5rem)] group">
+                <div class="bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 border border-emerald-100">
+                    <div class="h-1.5 bg-gradient-to-r from-emerald-400 to-teal-500"></div>
                     <div class="p-6 flex flex-col h-full">
-                        <div class="flex-grow">
-                            <div class="text-xs font-semibold text-blue-600 mb-2">最初活动</div>
-                            <h3 class="text-xl font-bold mb-3 text-gray-800">{{ earliest_act.branch }}{{ earliest_act.name }}</h3>
-                            <p class="text-sm text-gray-600 mb-4">
-                                {{ earliest_act.description }}
-                            </p>
-                        </div>
-                        <div class="flex justify-end">
-                            <span class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800 whitespace-nowrap">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <div class="flex items-center gap-2 mb-3">
+                            <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-emerald-100 text-emerald-600">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                 </svg>
-                                    {{ earliest_act.start_time|format_chinese_full_date }}
                             </span>
+                            <span class="text-xs font-bold text-emerald-600 uppercase tracking-wider">最初活动</span>
                         </div>
-                    </div>
-                </div>
-
-                <!-- 中间的箭头 -->
-                <div class="bg-white rounded-full p-3 shadow-md z-20">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
-                    </svg>
-                </div>
-
-                <!-- 第二个卡片 -->
-                <div class="w-[calc(50%-2rem)] bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
-                    <div class="p-6 flex flex-col h-full">
-                        <div class="flex-grow">
-                            <div class="text-xs font-semibold text-blue-600 mb-2">最后活动</div>
-                            <h3 class="text-xl font-bold mb-3 text-gray-800">{{ latest_act.branch }}{{ latest_act.name }}</h3>
-                            <p class="text-sm text-gray-600 mb-4">
-                        {{ latest_act.description }}
-                            </p>
-                        </div>
-                        <div class="flex justify-end">
-                            <span class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800 whitespace-nowrap">
+                        <h3 class="text-lg font-bold mb-2 text-gray-800 group-hover:text-emerald-700 transition-colors">{{ earliest_act.branch }}{{ earliest_act.name }}</h3>
+                        <p class="text-sm text-gray-600 mb-4 line-clamp-3">
+                            {{ earliest_act.description }}
+                        </p>
+                        <div class="mt-auto pt-3 border-t border-emerald-100">
+                            <span class="inline-flex items-center text-xs font-medium text-emerald-700 bg-emerald-50 px-3 py-1.5 rounded-full">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                 </svg>
-                            {{ latest_act.start_time|format_chinese_full_date }}                            </span>
+                                {{ earliest_act.start_time|format_chinese_full_date }}
+                            </span>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <!-- 装饰元素 -->
-            <div class="absolute top-1/2 left-0 w-4 h-4 bg-blue-500 rounded-full transform -translate-y-1/2 border-4 border-white"></div>
-            <div class="absolute top-1/2 right-0 w-4 h-4 bg-blue-500 rounded-full transform -translate-y-1/2 border-4 border-white"></div>
+            <!-- 中间的箭头 -->
+            <div class="flex-shrink-0 bg-white rounded-full p-4 shadow-lg z-20 border-2 border-blue-100 hover:scale-110 transition-transform duration-300">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                </svg>
+            </div>
+
+            <!-- 第二个卡片 - 最后活动 -->
+            <div class="w-[calc(50%-2.5rem)] group">
+                <div class="bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 border border-amber-100">
+                    <div class="h-1.5 bg-gradient-to-r from-amber-400 to-orange-500"></div>
+                    <div class="p-6 flex flex-col h-full">
+                        <div class="flex items-center gap-2 mb-3">
+                            <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-100 text-amber-600">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                            </span>
+                            <span class="text-xs font-bold text-amber-600 uppercase tracking-wider">最后活动</span>
+                        </div>
+                        <h3 class="text-lg font-bold mb-2 text-gray-800 group-hover:text-amber-700 transition-colors">{{ latest_act.branch }}{{ latest_act.name }}</h3>
+                        <p class="text-sm text-gray-600 mb-4 line-clamp-3">
+                            {{ latest_act.description }}
+                        </p>
+                        <div class="mt-auto pt-3 border-t border-amber-100">
+                            <span class="inline-flex items-center text-xs font-medium text-amber-700 bg-amber-50 px-3 py-1.5 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                </svg>
+                                {{ latest_act.start_time|format_chinese_full_date }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
+
+        <!-- 装饰元素 -->
+        <div class="absolute top-1/2 left-0 w-6 h-6 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-full transform -translate-y-1/2 -translate-x-1/2 border-4 border-white shadow-lg"></div>
+        <div class="absolute top-1/2 right-0 w-6 h-6 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full transform -translate-y-1/2 translate-x-1/2 border-4 border-white shadow-lg"></div>
+    </div>
 </div>
 
 
-<table class="items-center bg-transparent w-full border-collapse ">
-    <thead>
-    <tr class="bg-gray-100">
-        <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
-            分支机构名称
-            <br>
-            新建-搬迁-装修
-        </th>
-        <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-right">
-            活动的总数量
-        </th>
-        <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-right">
-            活动进行中的数量
-        </th>
-    </tr>
-    </thead>
-    <tbody>
-    {% for item in branches %}
-    <!-- 这里是其他行的处理逻辑 -->
-    <tr class="{% if forloop.counter|divisibleby:2 %}bg-gray-100{% else %}bg-white{% endif %}">
-        <td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200">
-            <a href="{% url 'branch-detail'  item.branch.pk %}"
-               class="bg-transparent hover:bg-blue-900  hover:text-white p-2 rounded-md">
-                {{ item.branch.name }}
-            </a>
-        </td>
-        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
-            {{ item.total_count }}
-        </td>
-        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
-            {{ item.onging_count }}
-        </td>
-
-    </tr>
-    {% endfor %}
-    <!-- 这里是最后一行的处理逻辑 -->
-    <tr>
-        <td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200 font-bold text-center">
-            总计： {{ total_branch_count }}
-        </td>
-        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
-            {{ total_activities }}
-        </td>
-        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
-            {{ ongoing_activities_count }}
-        </td>
-    </tr>
-    </tbody>
-</table>
-
-<hr class="h-px my-8 bg-red-500 border-1 dark:bg-red-700">
-
-
-<!--插入事件-->
-<div class="p-5 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
-    <time class="text-lg font-semibold text-gray-900 dark:text-white">事件</time>
-    <ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
-        {% for event in ongoing_events %}
-        <li>
-            <div href="#" class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
-                <div class="text-gray-600 dark:text-gray-400">
-                    <span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-     class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
-  <path stroke-linecap="round" stroke-linejoin="round"
-        d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/>
-</svg>
- 开始时间 {{ event.start_time| date:"Y年m月d日" }}
-                    </span>
-                    <div class="text-base font-normal">
-                        <span class="font-medium text-gray-900 dark:text-white">
-                            {% if not event.end_time %}
-                            <span class="text-lg font-semibold text-red-900 dark:text-white">
-                                {{ event.name }}-未完成
+<!-- 统计表格 -->
+<div class="w-full max-w-5xl mx-auto p-6">
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100">
+        <div class="px-6 py-4 bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-700">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                </svg>
+                分支机构活动统计
+            </h2>
+        </div>
+        <div class="overflow-x-auto">
+            <table class="w-full border-collapse">
+                <thead>
+                    <tr class="bg-gradient-to-r from-slate-50 to-gray-100 border-b-2 border-blue-200">
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                                </svg>
+                                分支机构名称
+                                <span class="text-xs font-normal text-gray-500 normal-case">(新建-搬迁-装修)</span>
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-right text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center justify-end gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                                </svg>
+                                活动总数
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-right text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center justify-end gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                进行中
+                            </div>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-100">
+                    {% for item in branches %}
+                    <tr class="{% if forloop.counter|divisibleby:2 %}bg-slate-50/50{% else %}bg-white{% endif %} hover:bg-blue-50 transition-colors duration-200 group">
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <a href="{% url 'branch-detail' item.branch.pk %}" 
+                               class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium text-gray-700 bg-gray-100 hover:bg-blue-600 hover:text-white transition-all duration-200 group-hover:shadow-md">
+                                {{ item.branch.name }}
+                            </a>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-right">
+                            <span class="inline-flex items-center justify-center min-w-[2rem] px-2.5 py-1 rounded-full text-sm font-semibold {% if item.total_count > 0 %}bg-blue-100 text-blue-700{% else %}bg-gray-100 text-gray-500{% endif %}">
+                                {{ item.total_count }}
                             </span>
-                            {% else %}
-                            <span class="text-lg font-semibold text-blue-900 dark:text-white">
-                                {{ event.name }}
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-right">
+                            <span class="inline-flex items-center justify-center min-w-[2rem] px-2.5 py-1 rounded-full text-sm font-semibold {% if item.onging_count > 0 %}bg-green-100 text-green-700{% else %}bg-gray-100 text-gray-500{% endif %}">
+                                {{ item.onging_count }}
                             </span>
-                            {% endif %}
-                        </span>
-                    </div>
-                    <div class="text-sm font-normal">
-                        {{ event.description }}
-                    </div>
-                    <div class="text-sm font-normal">
-                        {% with branch_count=event.branches.count %}
-                            {% if branch_count == all_branch_count %}
-                                涉及分支机构：全辖分支机构
-                            {% elif branch_count == 1 %}
-                                涉及分支机构：{{ event.branches.first.name }}
-                            {% elif branch_count > 1 %}
-                                涉及分支机构：{{ event.branches.all.0.name }}、{{ event.branches.all.1.name }}等{{ branch_count }}个营业部
-                            {% else %}
-                                涉及分支机构：暂无
-                            {% endif %}
-                        {% endwith %}
-                    </div>
-                    <span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-     class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
-  <path stroke-linecap="round" stroke-linejoin="round"
-        d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/>
-</svg>
- 结束时间 {{ event.end_time| date:"Y年m月d日" }}
-                    </span>
-                </div>
-            </div>
-
-        </li>
-        {% endfor %}
-    </ol>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                    <!-- 总计行 -->
+                    <tr class="bg-gradient-to-r from-blue-50 to-indigo-50 border-t-2 border-blue-200">
+                        <td class="px-6 py-4 whitespace-nowrap font-bold text-gray-800">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                                </svg>
+                                总计 ({{ total_branch_count }} 个分支机构)
+                            </div>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-right">
+                            <span class="inline-flex items-center justify-center min-w-[2.5rem] px-3 py-1.5 rounded-full text-base font-bold bg-blue-600 text-white shadow-md">
+                                {{ total_activities }}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-right">
+                            <span class="inline-flex items-center justify-center min-w-[2.5rem] px-3 py-1.5 rounded-full text-base font-bold {% if ongoing_activities_count > 0 %}bg-green-500 text-white{% else %}bg-gray-400 text-white{% endif %} shadow-md">
+                                {{ ongoing_activities_count }}
+                            </span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
 </div>
 
-<hr class="h-px my-8 bg-red-500 border-1 dark:bg-red-700">
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-purple-400 to-transparent"></div>
 
-
-<div class="p-5 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
-    <time class="text-lg font-semibold text-gray-900 dark:text-white">活动中的</time>
-    <ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
-        {% for huodong in ongoing_activities %}
-        <li>
-            <div href="#" class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
-                <div class="text-gray-600 dark:text-gray-400">
-                    <span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-                           class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
-                          <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/>
-                      </svg>
-                      开始时间 {{ huodong.start_time| date:"Y年m月d日" }}
-                    </span>
-                    <div class="text-base font-normal">
-                        <span class="font-medium text-gray-900 dark:text-white">
-                            {% if not huodong.end_time %}
-                            <span class="text-lg font-semibold text-red-900 dark:text-white">
-                                <a href="{% url 'branch-detail'  huodong.branch.pk %}"
-                                   class="bg-transparent hover:bg-blue-900  hover:text-white p-2 rounded-md">
-                                    {{ huodong.branch }}
-                                </a>
-                                {{ huodong.name }}-未完成
+<!-- 事件列表 -->
+<div class="w-full max-w-5xl mx-auto p-6">
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-purple-100">
+        <div class="px-6 py-4 bg-gradient-to-r from-purple-600 via-purple-700 to-indigo-700">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+                事件列表
+                <span class="ml-auto text-sm font-normal bg-white/20 px-3 py-1 rounded-full">{{ ongoing_events|length }} 个事件</span>
+            </h2>
+        </div>
+        <div class="divide-y divide-gray-100">
+            {% for event in ongoing_events %}
+            <div class="p-5 hover:bg-purple-50/50 transition-colors duration-200 group">
+                <div class="flex flex-col sm:flex-row sm:items-start gap-4">
+                    <!-- 时间轴标记 -->
+                    <div class="flex-shrink-0 flex flex-col items-center">
+                        <div class="w-10 h-10 rounded-full {% if not event.end_time %}bg-gradient-to-br from-red-400 to-red-600{% else %}bg-gradient-to-br from-purple-400 to-purple-600{% endif %} flex items-center justify-center text-white shadow-md">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                            </svg>
+                        </div>
+                    </div>
+                    <!-- 内容 -->
+                    <div class="flex-grow min-w-0">
+                        <div class="flex flex-wrap items-center gap-2 mb-2">
+                            <h3 class="text-lg font-bold {% if not event.end_time %}text-red-700{% else %}text-gray-800{% endif %} group-hover:text-purple-700 transition-colors">
+                                {{ event.name }}{% if not event.end_time %}<span class="ml-2 text-sm font-medium text-red-500 bg-red-100 px-2 py-0.5 rounded-full">进行中</span>{% endif %}
+                            </h3>
+                        </div>
+                        <p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ event.description }}</p>
+                        <div class="flex flex-wrap items-center gap-4 text-xs text-gray-500">
+                            <span class="inline-flex items-center gap-1 bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                </svg>
+                                {{ event.start_time|date:"Y年m月d日" }}
+                            </span>
+                            {% if event.end_time %}
+                            <span class="inline-flex items-center gap-1 bg-green-50 text-green-700 px-2.5 py-1 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                {{ event.end_time|date:"Y年m月d日" }}
                             </span>
                             {% endif %}
-                        </span>
-                    </div>
-                    <div class="text-sm font-normal">
-                        {{ huodong.description }}
+                        </div>
+                        <div class="mt-3 text-sm text-gray-600">
+                            {% with branch_count=event.branches.count %}
+                                {% if branch_count == all_branch_count %}
+                                    <span class="inline-flex items-center gap-1 text-purple-700 bg-purple-50 px-2.5 py-1 rounded-full">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                                        </svg>
+                                        涉及：全辖分支机构
+                                    </span>
+                                {% elif branch_count == 1 %}
+                                    <span class="inline-flex items-center gap-1 text-blue-700 bg-blue-50 px-2.5 py-1 rounded-full">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                                        </svg>
+                                        涉及：{{ event.branches.first.name }}
+                                    </span>
+                                {% elif branch_count > 1 %}
+                                    <span class="inline-flex items-center gap-1 text-blue-700 bg-blue-50 px-2.5 py-1 rounded-full">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                                        </svg>
+                                        涉及：{{ event.branches.all.0.name }}、{{ event.branches.all.1.name }}等{{ branch_count }}个营业部
+                                    </span>
+                                {% else %}
+                                    <span class="inline-flex items-center gap-1 text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full">
+                                        涉及：暂无
+                                    </span>
+                                {% endif %}
+                            {% endwith %}
+                        </div>
                     </div>
                 </div>
             </div>
-        </li>
-        {% endfor %}
-    </ol>
+            {% empty %}
+            <div class="p-8 text-center text-gray-500">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+                暂无事件
+            </div>
+            {% endfor %}
+        </div>
+    </div>
 </div>
 
-<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-orange-400 to-transparent"></div>
 
+<!-- 活动中的列表 -->
+<div class="w-full max-w-5xl mx-auto p-6">
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-orange-100">
+        <div class="px-6 py-4 bg-gradient-to-r from-orange-500 via-orange-600 to-red-600">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+                进行中的活动
+                <span class="ml-auto text-sm font-normal bg-white/20 px-3 py-1 rounded-full">{{ ongoing_activities|length }} 个活动</span>
+            </h2>
+        </div>
+        <div class="divide-y divide-gray-100">
+            {% for huodong in ongoing_activities %}
+            <div class="p-5 hover:bg-orange-50/50 transition-colors duration-200 group">
+                <div class="flex flex-col sm:flex-row sm:items-start gap-4">
+                    <!-- 状态标记 -->
+                    <div class="flex-shrink-0">
+                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center text-white shadow-md">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                        </div>
+                    </div>
+                    <!-- 内容 -->
+                    <div class="flex-grow min-w-0">
+                        <div class="flex flex-wrap items-center gap-2 mb-2">
+                            <a href="{% url 'branch-detail' huodong.branch.pk %}" 
+                               class="inline-flex items-center px-2.5 py-1 rounded-lg text-sm font-medium bg-orange-100 text-orange-700 hover:bg-orange-600 hover:text-white transition-colors">
+                                {{ huodong.branch }}
+                            </a>
+                            <h3 class="text-lg font-bold text-red-700 group-hover:text-red-800 transition-colors">
+                                {{ huodong.name }}
+                            </h3>
+                            <span class="text-xs font-medium text-white bg-red-500 px-2 py-0.5 rounded-full">未完成</span>
+                        </div>
+                        <p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ huodong.description }}</p>
+                        <div class="flex flex-wrap items-center gap-4 text-xs text-gray-500">
+                            <span class="inline-flex items-center gap-1 bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                </svg>
+                                开始时间：{{ huodong.start_time|date:"Y年m月d日" }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {% empty %}
+            <div class="p-8 text-center text-gray-500">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                暂无进行中的活动
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-teal-400 to-transparent"></div>
+
+<!-- 今年活动分类展示 -->
 {% for scope, scope_data in grouped_activities.items %}
-<div class="p-5 border border-gray-100 rounded-lg dark:bg-gray-800 dark:border-gray-700">
-    <time class="text-lg font-semibold text-gray-900 dark:text-white">今年的{{ scope }}（共{{ scope_data.branch_count }}个分支机构）</time>
-    <ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
-        {% for activity in scope_data.activities %}
-        <li style= "background-color: {{ activity.branch.background_color }};" >
-            <div class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
-                <div class="text-gray-600 dark:text-gray-400">
-                    <span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                             stroke="currentColor"
-                             class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                  d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/>
-                        </svg>
-                        开始时间 {{ activity.start_time| date:"Y年m月d日" }}
-                    </span>
-                    <div class="text-base font-normal">
-                        <span class="font-medium text-gray-900 dark:text-white">
+<div class="w-full max-w-5xl mx-auto p-6">
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-teal-100">
+        <div class="px-6 py-4 bg-gradient-to-r from-teal-500 via-teal-600 to-cyan-600">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                </svg>
+                今年的{{ scope }}
+                <span class="ml-auto text-sm font-normal bg-white/20 px-3 py-1 rounded-full">{{ scope_data.branch_count }} 个分支机构</span>
+            </h2>
+        </div>
+        <div class="divide-y divide-gray-100">
+            {% for activity in scope_data.activities %}
+            <div class="p-5 hover:bg-teal-50/50 transition-colors duration-200 group" style="background-color: {{ activity.branch.background_color }};">
+                <div class="flex flex-col sm:flex-row sm:items-start gap-4">
+                    <!-- 状态标记 -->
+                    <div class="flex-shrink-0">
+                        <div class="w-10 h-10 rounded-full {% if not activity.end_time %}bg-gradient-to-br from-red-400 to-red-600{% else %}bg-gradient-to-br from-teal-400 to-teal-600{% endif %} flex items-center justify-center text-white shadow-md">
                             {% if not activity.end_time %}
-                            <span class="text-lg font-semibold text-red-900 dark:text-white">
-                                <a href="{% url 'branch-detail'  activity.branch.pk %}"
-                                   class="bg-transparent hover:bg-blue-900  hover:text-white p-2 rounded-md">
-                                    {{ activity.branch }}
-                                </a>
-                                    {{ activity.name }}-未完成
-                            </span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
                             {% else %}
-                            <span class="text-lg font-semibold text-gray-900 dark:text-white">
-                                <a href="{% url 'branch-detail'  activity.branch.pk %}"
-                                   class="bg-transparent hover:bg-blue-900  hover:text-white p-2 rounded-md">
-                                    {{ activity.branch }}
-                                </a>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                            {% endif %}
+                        </div>
+                    </div>
+                    <!-- 内容 -->
+                    <div class="flex-grow min-w-0">
+                        <div class="flex flex-wrap items-center gap-2 mb-2">
+                            <a href="{% url 'branch-detail' activity.branch.pk %}" 
+                               class="inline-flex items-center px-2.5 py-1 rounded-lg text-sm font-medium bg-teal-100 text-teal-700 hover:bg-teal-600 hover:text-white transition-colors">
+                                {{ activity.branch }}
+                            </a>
+                            <h3 class="text-lg font-bold {% if not activity.end_time %}text-red-700{% else %}text-gray-800{% endif %} group-hover:text-teal-700 transition-colors">
                                 {{ activity.name }}
+                            </h3>
+                            {% if not activity.end_time %}
+                            <span class="text-xs font-medium text-white bg-red-500 px-2 py-0.5 rounded-full">未完成</span>
+                            {% endif %}
+                        </div>
+                        <p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ activity.description }}</p>
+                        <div class="flex flex-wrap items-center gap-4 text-xs text-gray-500">
+                            <span class="inline-flex items-center gap-1 bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                </svg>
+                                {{ activity.start_time|date:"Y年m月d日" }}
+                            </span>
+                            {% if activity.end_time %}
+                            <span class="inline-flex items-center gap-1 bg-green-50 text-green-700 px-2.5 py-1 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                {{ activity.end_time|date:"Y年m月d日" }}
                             </span>
                             {% endif %}
-                        </span>
+                        </div>
                     </div>
-                    <div class="text-sm font-normal">
-                        {{ activity.description }}
-                    </div>
-                    <span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
-                        <svg class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-                            fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
-                        </svg>
-                        结束时间 {{ activity.end_time| date:"Y年m月d日" }}
-                    </span>
                 </div>
             </div>
-        </li>
-        {% endfor %}
-    </ol>
+            {% empty %}
+            <div class="p-8 text-center text-gray-500">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                </svg>
+                暂无活动
+            </div>
+            {% endfor %}
+        </div>
+    </div>
 </div>
-<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
+
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
 {% endfor %}
 
-<time class="text-lg font-semibold text-gray-900 dark:text-white">
-    今年的
-{% for scope, scope_data in grouped_activities.items %}
-    {{ scope }}{{ scope_data.branch_count }}个{% if forloop.last %}。{% else %}，{% endif %}
-{% endfor %}
-</time>
-<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
+<!-- 今年统计汇总 -->
+<div class="w-full max-w-5xl mx-auto p-6">
+    <div class="bg-gradient-to-r from-teal-50 to-cyan-50 rounded-xl p-6 border border-teal-200">
+        <h3 class="text-lg font-bold text-teal-800 mb-3 flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+            </svg>
+            今年统计
+        </h3>
+        <div class="flex flex-wrap gap-3">
+            {% for scope, scope_data in grouped_activities.items %}
+            <span class="inline-flex items-center px-4 py-2 rounded-full bg-white shadow-sm border border-teal-100">
+                <span class="w-2 h-2 rounded-full bg-teal-500 mr-2"></span>
+                <span class="font-medium text-gray-700">{{ scope }}</span>
+                <span class="ml-2 text-teal-600 font-bold">{{ scope_data.branch_count }}个</span>
+            </span>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-indigo-400 to-transparent"></div>
 
 <!-- 历年活动统计 -->
-{% for year in historical_years %}
-{% with year_data=historical_grouped_activities|get_item:year %}
-{% if year_data %}
-<time class="text-lg font-semibold text-gray-900 dark:text-white">
-    {{ year }}年的
-{% for scope, scope_data in year_data.items %}
-    {{ scope }}{{ scope_data.branch_count }}个{% if forloop.last %}。{% else %}，{% endif %}
-{% endfor %}
-</time>
-<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
-{% endif %}
-{% endwith %}
-{% endfor %}
+<div class="w-full max-w-5xl mx-auto p-6">
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-indigo-100">
+        <div class="px-6 py-4 bg-gradient-to-r from-indigo-500 via-indigo-600 to-purple-600">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                历年活动统计
+            </h2>
+        </div>
+        <div class="p-6 space-y-4">
+            {% for year in historical_years %}
+            {% with year_data=historical_grouped_activities|get_item:year %}
+            {% if year_data %}
+            <div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl p-5 border border-indigo-100">
+                <h3 class="text-lg font-bold text-indigo-800 mb-3 flex items-center gap-2">
+                    <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-indigo-600 text-white text-sm font-bold">{{ year }}</span>
+                    <span>年统计</span>
+                </h3>
+                <div class="flex flex-wrap gap-3">
+                    {% for scope, scope_data in year_data.items %}
+                    <span class="inline-flex items-center px-4 py-2 rounded-full bg-white shadow-sm border border-indigo-100">
+                        <span class="w-2 h-2 rounded-full bg-indigo-500 mr-2"></span>
+                        <span class="font-medium text-gray-700">{{ scope }}</span>
+                        <span class="ml-2 text-indigo-600 font-bold">{{ scope_data.branch_count }}个</span>
+                    </span>
+                    {% endfor %}
+                </div>
+            </div>
+            {% endif %}
+            {% endwith %}
+            {% endfor %}
+        </div>
+    </div>
+</div>
 
 
 {% endblock %}
diff --git a/fzjgact/huodong/templates/branch_detail.html b/fzjgact/huodong/templates/branch_detail.html
index 392e738..61a18b5 100644
--- a/fzjgact/huodong/templates/branch_detail.html
+++ b/fzjgact/huodong/templates/branch_detail.html
@@ -2,51 +2,73 @@
 
 {% block content %}
 
-<!-- Component starts here -->
-<h2 class="flex flex-row flex-nowrap items-center my-8">
-    <span class="flex-grow block border-t border-black" aria-hidden="true" role="presentation"></span>
-    <span class="flex-none block mx-4   px-4 py-2.5 text-base leading-none font-medium uppercase bg-black text-white">
-                    {{ branch.name }}
-                </span>
-    <span class="flex-grow block border-t border-black" aria-hidden="true" role="presentation"></span>
-</h2>
-<!-- Component ends here -->
+<!-- 页面标题 -->
+<div class="w-full max-w-6xl mx-auto p-6">
+    <div class="relative flex items-center justify-center py-8">
+        <div class="absolute left-0 right-0 h-1 bg-gradient-to-r from-transparent via-blue-500 to-transparent"></div>
+        <div class="relative z-10 bg-gradient-to-r from-blue-600 to-indigo-700 text-white px-8 py-3 rounded-full shadow-lg">
+            <h1 class="text-xl font-bold flex items-center gap-3">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                </svg>
+                {{ branch.name }}
+            </h1>
+        </div>
+    </div>
+</div>
 
 <!-- 投入预算表 -->
-<div class="bg-white rounded-lg shadow-md p-4 mb-6">
-    <h2 class="text-2xl font-bold mb-4">投入预算表</h2>
-    <p class="text-gray-700 mb-4">分支机构项目的预算表，包括设备和基础设施明细</p>
+<div class="w-full max-w-6xl mx-auto p-6">
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-blue-100">
+        <div class="px-6 py-4 bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-700">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                </svg>
+                投入预算表
+            </h2>
+        </div>
+        <div class="p-6">
+            <p class="text-gray-600 mb-6">分支机构项目的预算表，包括设备和基础设施明细</p>
     
-    <!-- 预算模板导入功能 -->
-    {% if budget_templates %}  <!-- 只有当有模板时才显示导入功能 -->
-    <div class="mb-6 p-4 bg-blue-50 rounded-lg">
-        <h3 class="text-lg font-semibold mb-2">预算模板导入</h3>
-        <p class="text-sm text-gray-600 mb-3">从模板一键导入预算，快速生成预算表</p>
-        
-        <form method="POST" action="{% url 'import-budget-template' branch.id %}">
-            {% csrf_token %}
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div>
-                    <label for="template" class="block text-sm font-medium text-gray-700 mb-1">选择模板</label>
-                    <select id="template" name="template" class="w-full p-2 border border-gray-300 rounded-md">
-                        {% for template in budget_templates %}
-                            <option value="{{ template.id }}">{{ template.name }}{% if template.is_default %} (默认){% endif %}</option>
-                        {% endfor %}
-                    </select>
-                </div>
-                <div>
-                    <label for="budget_name" class="block text-sm font-medium text-gray-700 mb-1">预算名称</label>
-                    <input type="text" id="budget_name" name="budget_name" placeholder="请输入预算名称" class="w-full p-2 border border-gray-300 rounded-md">
-                </div>
-                <div class="flex items-end">
-                    <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
-                        一键导入
-                    </button>
-                </div>
+            <!-- 预算模板导入功能 -->
+            {% if budget_templates %}
+            <div class="mb-6 p-5 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200">
+                <h3 class="text-lg font-semibold mb-2 text-blue-800 flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                    </svg>
+                    预算模板导入
+                </h3>
+                <p class="text-sm text-gray-600 mb-4">从模板一键导入预算，快速生成预算表</p>
+                
+                <form method="POST" action="{% url 'import-budget-template' branch.id %}">
+                    {% csrf_token %}
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <div>
+                            <label for="template" class="block text-sm font-medium text-gray-700 mb-1">选择模板</label>
+                            <select id="template" name="template" class="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
+                                {% for template in budget_templates %}
+                                    <option value="{{ template.id }}">{{ template.name }}{% if template.is_default %} (默认){% endif %}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                        <div>
+                            <label for="budget_name" class="block text-sm font-medium text-gray-700 mb-1">预算名称</label>
+                            <input type="text" id="budget_name" name="budget_name" placeholder="请输入预算名称" class="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
+                        </div>
+                        <div class="flex items-end">
+                            <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-6 py-2.5 rounded-lg font-medium shadow-md hover:shadow-lg transition-all duration-200 flex items-center justify-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                                </svg>
+                                一键导入
+                            </button>
+                        </div>
+                    </div>
+                </form>
             </div>
-        </form>
-    </div>
-    {% endif %}
+            {% endif %}
     
     {% if budgets %}
         {% for budget in budgets %}
@@ -54,215 +76,438 @@
             <h3 class="text-lg font-semibold mb-3">{{ budget.name }} - 总预算: ￥{{ budget.total_budget }}</h3>
             
             <!-- 设备预算部分 -->
-            <div class="mb-4">
-                <h4 class="text-md font-semibold mb-2">设备预算明细</h4>
+            <div class="mb-6">
+                <h4 class="text-md font-bold mb-3 text-gray-800 flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+                    </svg>
+                    设备预算明细
+                </h4>
                 {% if budget.equipment_budgets.all %}
-                <div class="overflow-x-auto">
+                <div class="overflow-x-auto rounded-xl border border-gray-200">
                     <table class="min-w-full divide-y divide-gray-200">
-                        <thead class="bg-gray-50">
+                        <thead class="bg-gradient-to-r from-slate-50 to-gray-100">
                             <tr>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">型号</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单价</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">采购方式</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">小计</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">项目</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">型号</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">单价</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">采购方式</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">数量</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">小计</th>
                             </tr>
                         </thead>
-                        <tbody class="bg-white divide-y divide-gray-200">
+                        <tbody class="bg-white divide-y divide-gray-100">
                             {% for equipment in budget.equipment_budgets.all %}
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap">{{ equipment.project }}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">{{ equipment.model }}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">￥{{ equipment.unit_price }}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">{{ equipment.get_procurement_method_display }}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">{{ equipment.quantity }}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">￥{{ equipment.subtotal }}</td>
+                                <tr class="hover:bg-blue-50/50 transition-colors">
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ equipment.project }}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ equipment.model }}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">￥{{ equipment.unit_price }}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ equipment.get_procurement_method_display }}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ equipment.quantity }}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">￥{{ equipment.subtotal }}</td>
                                 </tr>
                             {% endfor %}
                         </tbody>
                     </table>
                 </div>
                 {% else %}
-                <p class="text-gray-500 italic">暂无设备预算明细</p>
+                <div class="p-6 text-center bg-gray-50 rounded-xl border border-gray-200">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+                    </svg>
+                    <p class="text-gray-500">暂无设备预算明细</p>
+                </div>
                 {% endif %}
             </div>
             
             <!-- 基础设施预算部分 -->
             <div>
-                <h4 class="text-md font-semibold mb-2">基础设施预算明细</h4>
+                <h4 class="text-md font-bold mb-3 text-gray-800 flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                    </svg>
+                    基础设施预算明细
+                </h4>
                 {% if budget.infrastructure_budgets.all %}
-                <div class="overflow-x-auto">
+                <div class="overflow-x-auto rounded-xl border border-gray-200">
                     <table class="min-w-full divide-y divide-gray-200">
-                        <thead class="bg-gray-50">
+                        <thead class="bg-gradient-to-r from-slate-50 to-gray-100">
                             <tr>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单价</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单位</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">小计</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">说明</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">名称</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">备注</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">单价</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">单位</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">数量</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">小计</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">说明</th>
                             </tr>
                         </thead>
-                        <tbody class="bg-white divide-y divide-gray-200">
+                        <tbody class="bg-white divide-y divide-gray-100">
                             {% for infrastructure in budget.infrastructure_budgets.all %}
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.name }}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.remarks }}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">￥{{ infrastructure.unit_price }}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.unit }}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.quantity }}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">￥{{ infrastructure.subtotal }}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.description }}</td>
+                                <tr class="hover:bg-teal-50/50 transition-colors">
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ infrastructure.name }}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ infrastructure.remarks }}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">￥{{ infrastructure.unit_price }}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ infrastructure.unit }}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ infrastructure.quantity }}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">￥{{ infrastructure.subtotal }}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ infrastructure.description }}</td>
                                 </tr>
                             {% endfor %}
                         </tbody>
                     </table>
                 </div>
                 {% else %}
-                <p class="text-gray-500 italic">暂无基础设施预算明细</p>
+                <div class="p-6 text-center bg-gray-50 rounded-xl border border-gray-200">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                    </svg>
+                    <p class="text-gray-500">暂无基础设施预算明细</p>
+                </div>
                 {% endif %}
             </div>
         </div>
         {% endfor %}
     {% else %}
-    <p class="text-gray-500 italic">暂无预算信息</p>
+    <div class="p-8 text-center bg-gray-50 rounded-xl border border-gray-200">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+        </svg>
+        <p class="text-gray-500 text-lg">暂无预算信息</p>
+    </div>
     {% endif %}
-</div>
-<div class="bg-white rounded-lg shadow-md p-4 mb-6">
-    <h2 class="text-2xl font-bold mb-4">基本信息</h2>
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div>
-            <p class="text-gray-700"><strong>信息系统分类:</strong> {{ branch.category|default:"暂无" }}</p>
-            <p class="text-gray-700"><strong>联系人:</strong> {{ branch.contact_person|default:"暂无" }}</p>
-            <p class="text-gray-700"><strong>联系电话:</strong> {{ branch.contact_phone|default:"暂无" }}</p>
-        </div>
-        <div>
-            <p class="text-gray-700"><strong>地址:</strong> {{ branch.address|default:"暂无" }}</p>
-            <p class="text-gray-700"><strong>成立时间:</strong> {{ branch.established_date|date:"Y-m-d"|default:"暂无" }}</p>
         </div>
     </div>
 </div>
 
-<!-- 事件信息 -->
-<div class="bg-white rounded-lg shadow-md p-4 mb-6">
-    <h2 class="text-2xl font-bold mb-4">关联事件</h2>
-    {% if events %}
-    <div class="space-y-3">
-        {% for event in events %}
-        <div class="border-l-4 border-blue-500 pl-4 py-2 bg-blue-50 rounded">
-            <h3 class="font-semibold text-lg">{{ event.name }}</h3>
-            <p class="text-sm text-gray-600">
-                {% if event.end_time %}
-                开始日期{{ event.start_time|date:"Y年m月d日" }} 结束日期{{ event.end_time|date:"Y年m月d日" }}
-                {% else %}
-                开始日期{{ event.start_time|date:"Y年m月d日" }}，现在进行中
-                {% endif %}
-            </p>
-            <p class="mt-1 text-gray-700">{{ event.description|truncatechars:100 }}</p>
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-cyan-400 to-transparent"></div>
+
+<!-- 基本信息 -->
+<div class="w-full max-w-6xl mx-auto p-6">
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-cyan-100">
+        <div class="px-6 py-4 bg-gradient-to-r from-cyan-500 via-cyan-600 to-teal-600">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                基本信息
+            </h2>
         </div>
-        {% endfor %}
-    </div>
-    {% else %}
-    <p class="text-gray-500 italic">暂无事件记录</p>
-    {% endif %}
-</div>
-
-<!-- 设备间图片 -->
-<div class="bg-white rounded-lg shadow-md p-4 mb-6">
-    <h2 class="text-2xl font-bold mb-4">设备间图片</h2>
-    {% if equipment_images %}
-    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-        {% for image in equipment_images %}
-        <div class="overflow-hidden rounded-lg shadow">
-            <img src="{{ image.image.url }}" alt="设备间图片" class="w-full h-48 object-cover">
-            <div class="p-2 bg-gray-50">
-                <p class="text-sm text-gray-700">{{ image.description|default:"无描述" }}</p>
-                <p class="text-xs text-gray-500 mt-1">{{ image.upload_date|date:"Y-m-d" }}</p>
-            </div>
-        </div>
-        {% endfor %}
-    </div>
-    {% else %}
-    <p class="text-gray-500 italic">暂无设备间图片</p>
-    {% endif %}
-</div>
-
-<!-- 公共电子屏 -->
-<div class="bg-white rounded-lg shadow-md p-4 mb-6">
-    <h2 class="text-2xl font-bold mb-4">公共电子屏</h2>
-    {% if public_screens %}
-    <div class="overflow-x-auto">
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
-                <tr>
-                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
-                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
-                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最后演练</th>
-                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">更新时间</th>
-                </tr>
-            </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
-                {% for screen in public_screens %}
-                <tr>
-                    <td class="px-6 py-4 whitespace-nowrap">{{ screen.get_screen_type_display }}</td>
-                    <td class="px-6 py-4">{{ screen.description|default:"无" }}</td>
-                    <td class="px-6 py-4 whitespace-nowrap">{{ screen.last_drill.date|date:"Y-m-d"|default:"未演练" }}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ screen.updated_at|date:"Y-m-d H:i" }}</td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-    </div>
-    {% else %}
-    <p class="text-gray-500 italic">暂无公共电子屏信息</p>
-    {% endif %}
-</div>
-{% for scope, activities in grouped_activities.items %}
-
-<div class="p-5 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
-    <time class="text-lg font-semibold text-gray-900 dark:text-white">{{ scope }}</time>
-    <ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
-        {% for huodong in activities %}
-        <li style="background-color: {{ huodong.branch.background_color }};">
-            <div class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
-                <div class="text-gray-600 dark:text-gray-400">
-                    <span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
-                      </svg>
-                        开始时间 {{ huodong.start_time| date:"Y年m月d日" }}
-                    </span>
-                    <div class="text-base font-normal">
-                        <span class="font-medium text-gray-900 dark:text-white">
-                            {% if not huodong.end_time %}
-                            <span class="text-lg font-semibold text-red-900 dark:text-white">
-                                {{ huodong.name }}-未完成
-                            </span>
-                            {% else %}
-                            <span class="text-lg font-semibold text-gray-900 dark:text-white">
-                                {{ huodong.name }}
-                            </span>
-                            {% endif %}
-                        </span>
+        <div class="p-6">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div class="space-y-4">
+                    <div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
+                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                            </svg>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500 mb-1">信息系统分类</p>
+                            <p class="text-base font-medium text-gray-800">{{ branch.category|default:"暂无" }}</p>
+                        </div>
                     </div>
-                    <div class="text-sm font-normal">
-                        {{ huodong.description }}
+                    <div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
+                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                            </svg>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500 mb-1">联系人</p>
+                            <p class="text-base font-medium text-gray-800">{{ branch.contact_person|default:"暂无" }}</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
+                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                            </svg>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500 mb-1">联系电话</p>
+                            <p class="text-base font-medium text-gray-800">{{ branch.contact_phone|default:"暂无" }}</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="space-y-4">
+                    <div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
+                        <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center flex-shrink-0">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                            </svg>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500 mb-1">地址</p>
+                            <p class="text-base font-medium text-gray-800">{{ branch.address|default:"暂无" }}</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
+                        <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                            </svg>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500 mb-1">成立时间</p>
+                            <p class="text-base font-medium text-gray-800">{{ branch.established_date|date:"Y年m月d日"|default:"暂无" }}</p>
+                        </div>
                     </div>
-                    <span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
-                      <svg class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
-                      </svg>
-                      结束时间 {{ huodong.end_time| date:"Y年m月d日" }}
-                    </span>
                 </div>
             </div>
-        </li>
-        {% endfor %}
-    </ol>
+        </div>
+    </div>
 </div>
-<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
+
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-purple-400 to-transparent"></div>
+
+<!-- 事件信息 -->
+<div class="w-full max-w-6xl mx-auto p-6">
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-purple-100">
+        <div class="px-6 py-4 bg-gradient-to-r from-purple-600 via-purple-700 to-indigo-700">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+                关联事件
+            </h2>
+        </div>
+        <div class="p-6">
+            {% if events %}
+            <div class="space-y-4">
+                {% for event in events %}
+                <div class="p-5 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl border-l-4 border-purple-500 hover:shadow-md transition-shadow">
+                    <h3 class="font-bold text-lg text-purple-800 mb-2">{{ event.name }}</h3>
+                    <div class="flex flex-wrap items-center gap-3 mb-3">
+                        <span class="inline-flex items-center gap-1 text-xs bg-white px-2.5 py-1 rounded-full text-purple-700 shadow-sm">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                            </svg>
+                            {{ event.start_time|date:"Y年m月d日" }}
+                        </span>
+                        {% if event.end_time %}
+                        <span class="inline-flex items-center gap-1 text-xs bg-green-100 px-2.5 py-1 rounded-full text-green-700">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                            {{ event.end_time|date:"Y年m月d日" }}
+                        </span>
+                        {% else %}
+                        <span class="inline-flex items-center gap-1 text-xs bg-red-100 px-2.5 py-1 rounded-full text-red-700">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                            进行中
+                        </span>
+                        {% endif %}
+                    </div>
+                    <p class="text-gray-700">{{ event.description|truncatechars:100 }}</p>
+                </div>
+                {% endfor %}
+            </div>
+            {% else %}
+            <div class="p-8 text-center bg-gray-50 rounded-xl">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+                <p class="text-gray-500 text-lg">暂无事件记录</p>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-emerald-400 to-transparent"></div>
+
+<!-- 设备间图片 -->
+<div class="w-full max-w-6xl mx-auto p-6">
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-emerald-100">
+        <div class="px-6 py-4 bg-gradient-to-r from-emerald-500 via-emerald-600 to-teal-600">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+                设备间图片
+            </h2>
+        </div>
+        <div class="p-6">
+            {% if equipment_images %}
+            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+                {% for image in equipment_images %}
+                <div class="overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition-shadow group">
+                    <div class="relative overflow-hidden">
+                        <img src="{{ image.image.url }}" alt="设备间图片" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
+                    </div>
+                    <div class="p-4 bg-gray-50">
+                        <p class="text-sm font-medium text-gray-800">{{ image.description|default:"无描述" }}</p>
+                        <p class="text-xs text-gray-500 mt-2 flex items-center gap-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                            </svg>
+                            {{ image.upload_date|date:"Y年m月d日" }}
+                        </p>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            {% else %}
+            <div class="p-8 text-center bg-gray-50 rounded-xl">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+                <p class="text-gray-500 text-lg">暂无设备间图片</p>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-amber-400 to-transparent"></div>
+
+<!-- 公共电子屏 -->
+<div class="w-full max-w-6xl mx-auto p-6">
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-amber-100">
+        <div class="px-6 py-4 bg-gradient-to-r from-amber-500 via-amber-600 to-orange-600">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
+                公共电子屏
+            </h2>
+        </div>
+        <div class="p-6">
+            {% if public_screens %}
+            <div class="overflow-x-auto rounded-xl border border-gray-200">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gradient-to-r from-slate-50 to-gray-100">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">类型</th>
+                            <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">描述</th>
+                            <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">最后演练</th>
+                            <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">更新时间</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-100">
+                        {% for screen in public_screens %}
+                        <tr class="hover:bg-amber-50/50 transition-colors">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
+                                    {{ screen.get_screen_type_display }}
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 text-sm text-gray-700">{{ screen.description|default:"无" }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm">
+                                {% if screen.last_drill %}
+                                <span class="inline-flex items-center gap-1 text-green-700">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                    </svg>
+                                    {{ screen.last_drill.date|date:"Y-m-d" }}
+                                </span>
+                                {% else %}
+                                <span class="text-gray-400">未演练</span>
+                                {% endif %}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ screen.updated_at|date:"Y-m-d H:i" }}</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+            {% else %}
+            <div class="p-8 text-center bg-gray-50 rounded-xl">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
+                <p class="text-gray-500 text-lg">暂无公共电子屏信息</p>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-teal-400 to-transparent"></div>
+
+<!-- 活动列表 -->
+{% for scope, activities in grouped_activities.items %}
+<div class="w-full max-w-6xl mx-auto p-6">
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-teal-100">
+        <div class="px-6 py-4 bg-gradient-to-r from-teal-500 via-teal-600 to-cyan-600">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                </svg>
+                {{ scope }}
+            </h2>
+        </div>
+        <div class="divide-y divide-gray-100">
+            {% for huodong in activities %}
+            <div class="p-5 hover:bg-teal-50/50 transition-colors duration-200" style="background-color: {{ huodong.branch.background_color }};">
+                <div class="flex flex-col sm:flex-row sm:items-start gap-4">
+                    <!-- 状态标记 -->
+                    <div class="flex-shrink-0">
+                        <div class="w-10 h-10 rounded-full {% if not huodong.end_time %}bg-gradient-to-br from-red-400 to-red-600{% else %}bg-gradient-to-br from-teal-400 to-teal-600{% endif %} flex items-center justify-center text-white shadow-md">
+                            {% if not huodong.end_time %}
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                            {% else %}
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                            {% endif %}
+                        </div>
+                    </div>
+                    <!-- 内容 -->
+                    <div class="flex-grow min-w-0">
+                        <div class="flex flex-wrap items-center gap-2 mb-2">
+                            <h3 class="text-lg font-bold {% if not huodong.end_time %}text-red-700{% else %}text-gray-800{% endif %}">
+                                {{ huodong.name }}
+                            </h3>
+                            {% if not huodong.end_time %}
+                            <span class="text-xs font-medium text-white bg-red-500 px-2 py-0.5 rounded-full">未完成</span>
+                            {% endif %}
+                        </div>
+                        <p class="text-sm text-gray-600 mb-3">{{ huodong.description }}</p>
+                        <div class="flex flex-wrap items-center gap-4 text-xs text-gray-500">
+                            <span class="inline-flex items-center gap-1 bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                </svg>
+                                {{ huodong.start_time|date:"Y年m月d日" }}
+                            </span>
+                            {% if huodong.end_time %}
+                            <span class="inline-flex items-center gap-1 bg-green-50 text-green-700 px-2.5 py-1 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                {{ huodong.end_time|date:"Y年m月d日" }}
+                            </span>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {% empty %}
+            <div class="p-8 text-center text-gray-500">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                </svg>
+                暂无活动
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
 {% endfor %}
 
 {% endblock %}
diff --git a/fzjgact/huodong/templates/branch_info.html b/fzjgact/huodong/templates/branch_info.html
index cee8103..a1b770f 100644
--- a/fzjgact/huodong/templates/branch_info.html
+++ b/fzjgact/huodong/templates/branch_info.html
@@ -1,76 +1,140 @@
 {% extends 'base.html' %}
 
-
 {% block content %}
 
-<table class="items-center bg-transparent w-full border-collapse ">
-    <thead>
-    <tr class="bg-gray-100">
-        <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
-            所在省份
-        </th>
-        <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
-            分支机构名称
-            <br>
-            基础信息
-        </th>
-        <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
-            信息系统类别
-        </th>
-    </tr>
-    </thead>
-    <tbody>
-    {% for province, branches in branches_by_province.items %}
-        {% for item in branches %}
-        <tr class="{% if forloop.parentloop.counter|divisibleby:2 %}bg-gray-100{% else %}bg-white{% endif %}">
-            {% if forloop.first %}
-            <td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200" rowspan="{{ branches|length }}">
-                {{ province }}
-            </td>
-            {% endif %}
-            <td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200">
-                <a href="{% url 'branch-detail'  item.pk %}"
-                   class="bg-transparent hover:bg-blue-900  hover:text-white p-2 rounded-md">
-                    {{ item.name }}
-                </a>
-            </td>
-            <td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200">
-                    {{ item.category }}
-            </td>
+<!-- 页面标题 -->
+<div class="w-full max-w-6xl mx-auto p-6">
+    <div class="relative flex items-center justify-center py-8">
+        <div class="absolute left-0 right-0 h-1 bg-gradient-to-r from-transparent via-indigo-500 to-transparent"></div>
+        <div class="relative z-10 bg-gradient-to-r from-indigo-600 to-purple-700 text-white px-8 py-3 rounded-full shadow-lg">
+            <h1 class="text-xl font-bold flex items-center gap-3">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                </svg>
+                分支机构信息
+            </h1>
+        </div>
+    </div>
+</div>
 
-        </tr>
-        {% endfor %}
-    {% endfor %}
-    </tbody>
-    <tr class="bg-gray-200 font-bold">
-        <td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200">
-            分支机构类别统计
-        </td>
-        <td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200" colspan="2">
-            A型: {{ type_a_count }}家 | B型: {{ type_b_count }}家 | C型: {{ type_c_count }}家
-        </td>
-    </tr>
-    <tfoot>
-    <tr class="bg-gray-50">
-        <td colspan="3" class="px-6 py-4 text-right border-b border-gray-200">
-            <div class="flex justify-end space-x-3">
-                <a href="{% url 'export-branches-xls' %}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-black font-medium rounded-lg shadow-md transition duration-150 ease-in-out transform hover:scale-105">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
-                        <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+<!-- 分支机构列表 -->
+<div class="w-full max-w-6xl mx-auto p-6">
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-indigo-100">
+        <div class="px-6 py-4 bg-gradient-to-r from-indigo-600 via-indigo-700 to-purple-700">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0121 18.382V7.618a1 1 0 01-.553-.894L15 7m0 13V7" />
+                </svg>
+                分支机构列表
+            </h2>
+        </div>
+        <div class="overflow-x-auto">
+            <table class="w-full border-collapse">
+                <thead>
+                    <tr class="bg-gradient-to-r from-slate-50 to-gray-100 border-b-2 border-indigo-200">
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                                </svg>
+                                所在省份
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                                </svg>
+                                分支机构名称
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                                </svg>
+                                信息系统类别
+                            </div>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-100">
+                {% for province, branches in branches_by_province.items %}
+                    {% for item in branches %}
+                    <tr class="{% if forloop.parentloop.counter|divisibleby:2 %}bg-slate-50/50{% else %}bg-white{% endif %} hover:bg-indigo-50/50 transition-colors duration-200">
+                        {% if forloop.first %}
+                        <td class="px-6 py-4 whitespace-nowrap text-left font-medium text-gray-800" rowspan="{{ branches|length }}">
+                            <span class="inline-flex items-center px-3 py-1 rounded-full bg-indigo-100 text-indigo-700 text-sm">
+                                {{ province }}
+                            </span>
+                        </td>
+                        {% endif %}
+                        <td class="px-6 py-4 whitespace-nowrap text-left">
+                            <a href="{% url 'branch-detail' item.pk %}"
+                               class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium text-gray-700 bg-gray-100 hover:bg-indigo-600 hover:text-white transition-all duration-200">
+                                {{ item.name }}
+                            </a>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-left">
+                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium {% if item.category == 'A型' %}bg-blue-100 text-blue-700{% elif item.category == 'B型' %}bg-green-100 text-green-700{% elif item.category == 'C型' %}bg-orange-100 text-orange-700{% else %}bg-gray-100 text-gray-700{% endif %}">
+                                {{ item.category }}
+                            </span>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                {% endfor %}
+                </tbody>
+                <!-- 统计行 -->
+                <tr class="bg-gradient-to-r from-indigo-50 to-purple-50 border-t-2 border-indigo-200">
+                    <td class="px-6 py-4 whitespace-nowrap font-bold text-gray-800">
+                        <div class="flex items-center gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                            </svg>
+                            分支机构类别统计
+                        </div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap" colspan="2">
+                        <div class="flex flex-wrap gap-3">
+                            <span class="inline-flex items-center px-3 py-1.5 rounded-full bg-blue-100 text-blue-700 text-sm font-medium">
+                                <span class="w-2 h-2 rounded-full bg-blue-500 mr-2"></span>
+                                A型: {{ type_a_count }}家
+                            </span>
+                            <span class="inline-flex items-center px-3 py-1.5 rounded-full bg-green-100 text-green-700 text-sm font-medium">
+                                <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
+                                B型: {{ type_b_count }}家
+                            </span>
+                            <span class="inline-flex items-center px-3 py-1.5 rounded-full bg-orange-100 text-orange-700 text-sm font-medium">
+                                <span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
+                                C型: {{ type_c_count }}家
+                            </span>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <!-- 导出按钮 -->
+        <div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
+            <div class="flex justify-end gap-3">
+                <a href="{% url 'export-branches-xls' %}" class="inline-flex items-center px-5 py-2.5 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
                     导出为XLS
                 </a>
-                <a href="{% url 'export-branches-pdf' %}" class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-800 text-black font-medium rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
-                        <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+                <a href="{% url 'export-branches-pdf' %}" class="inline-flex items-center px-5 py-2.5 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
                     导出为PDF
                 </a>
             </div>
-        </td>
-    </tr>
-    </tfoot>
-</table>
+        </div>
+    </div>
+</div>
+
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-purple-400 to-transparent"></div>
 
-<hr class="h-px my-8 bg-red-500 border-1 dark:bg-red-700">
 {% endblock %}
\ No newline at end of file
diff --git a/fzjgact/huodong/templates/contact_list.html b/fzjgact/huodong/templates/contact_list.html
index 0faa093..df84b17 100644
--- a/fzjgact/huodong/templates/contact_list.html
+++ b/fzjgact/huodong/templates/contact_list.html
@@ -1,147 +1,240 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="container mx-auto p-4">
-    <h2 class="text-xl font-bold mb-4">联系人信息</h2>
-    
-    <!-- 新增筛选表单 -->
-    <form method="GET" class="mb-4 p-4 bg-gray-100 rounded-lg" id="filterForm">
-        <div class="flex flex-wrap gap-4">
-            <!-- 分支机构筛选（带搜索的多选下拉框） -->
-            <div class="flex flex-col w-full md:w-1/2">
-                <label class="text-sm font-medium">分支机构（可多选）</label>
-                <div class="relative" id="branchSelectContainer">
-                    <!-- 选择框主体 -->
-                    <div class="relative">
-                        <input 
-                            type="text" 
-                            id="branchSearchInput" 
-                            class="w-full pl-4 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-500 outline-none text-sm"
-                            placeholder="点击选择分支机构（可多选）..."
-                            readonly
-                            onclick="toggleBranchDropdown()"
-                        >
-                        <span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 transition-transform duration-200" id="branchArrowIcon">
-                            <i class="fa fa-chevron-down"></i>
-                        </span>
-                        <!-- 选中的机构显示 -->
-                        <div id="selectedBranches" class="absolute z-5 mt-1 w-full bg-white rounded-lg shadow-md hidden max-h-32 overflow-y-auto">
-                            <div class="p-2">
-                                <div class="flex flex-wrap gap-1" id="branchTags"></div>
+<!-- 页面标题 -->
+<div class="w-full max-w-6xl mx-auto p-6">
+    <div class="relative flex items-center justify-center py-8">
+        <div class="absolute left-0 right-0 h-1 bg-gradient-to-r from-transparent via-teal-500 to-transparent"></div>
+        <div class="relative z-10 bg-gradient-to-r from-teal-600 to-cyan-700 text-white px-8 py-3 rounded-full shadow-lg">
+            <h1 class="text-xl font-bold flex items-center gap-3">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+                </svg>
+                联系人信息
+            </h1>
+        </div>
+    </div>
+</div>
+
+<div class="w-full max-w-6xl mx-auto p-6">
+    <!-- 筛选表单 -->
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-teal-100 mb-6">
+        <div class="px-6 py-4 bg-gradient-to-r from-teal-600 via-teal-700 to-cyan-700">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+                </svg>
+                筛选条件
+            </h2>
+        </div>
+        <div class="p-6">
+            <form method="GET" id="filterForm">
+                <div class="flex flex-wrap gap-4">
+                    <!-- 分支机构筛选（带搜索的多选下拉框） -->
+                    <div class="flex flex-col w-full md:w-1/2">
+                        <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                            </svg>
+                            分支机构（可多选）
+                        </label>
+                        <div class="relative" id="branchSelectContainer">
+                            <!-- 选择框主体 -->
+                            <div class="relative">
+                                <input 
+                                    type="text" 
+                                    id="branchSearchInput" 
+                                    class="w-full pl-4 pr-10 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-300 focus:border-teal-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors"
+                                    placeholder="点击选择分支机构（可多选）..."
+                                    readonly
+                                    onclick="toggleBranchDropdown()"
+                                >
+                                <span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 transition-transform duration-200" id="branchArrowIcon">
+                                    <i class="fa fa-chevron-down"></i>
+                                </span>
+                                <!-- 选中的机构显示 -->
+                                <div id="selectedBranches" class="absolute z-5 mt-1 w-full bg-white rounded-lg shadow-md hidden max-h-32 overflow-y-auto">
+                                    <div class="p-2">
+                                        <div class="flex flex-wrap gap-1" id="branchTags"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- 下拉内容 -->
+                            <div id="branchDropdownContent" class="absolute z-10 mt-1 w-full bg-white rounded-lg shadow-lg overflow-hidden hidden border border-gray-100">
+                                <!-- 搜索输入框 -->
+                                <div class="p-2 border-b border-gray-100">
+                                    <input 
+                                        type="text" 
+                                        id="branchFilterInput" 
+                                        class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-1 focus:ring-teal-300 focus:border-teal-500 outline-none text-sm"
+                                        placeholder="搜索分支机构..."
+                                        oninput="filterBranchOptions()"
+                                        autofocus
+                                    >
+                                </div>
+                                
+                                <!-- 选项列表 -->
+                                <div id="branchOptionsList" class="max-h-60 overflow-y-auto">
+                                    <ul>
+                                        {% for branch in branches %}
+                                        <li class="branch-option px-4 py-2.5 hover:bg-teal-50 cursor-pointer text-sm transition-colors flex items-center" 
+                                            data-id="{{ branch.id }}" 
+                                            data-name="{{ branch.name }}">
+                                            <input type="checkbox" class="mr-2 branch-checkbox rounded text-teal-600 focus:ring-teal-500" value="{{ branch.id }}">
+                                            {{ branch.name }}
+                                        </li>
+                                        {% endfor %}
+                                    </ul>
+                                </div>
+                                
+                                <!-- 操作按钮 -->
+                                <div class="p-2 border-t border-gray-100 flex gap-2">
+                                    <button type="button" class="flex-1 px-3 py-1 text-xs bg-teal-500 text-white rounded hover:bg-teal-600 transition-colors" onclick="selectAllBranches()">全选</button>
+                                    <button type="button" class="flex-1 px-3 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600 transition-colors" onclick="clearAllBranches()">清空</button>
+                                </div>
+                                
+                                <!-- 独立的清空全部选择按钮 -->
+                                <div class="p-2 border-t border-gray-100">
+                                    <button type="button" class="w-full px-3 py-2 text-sm bg-orange-500 text-white rounded-lg hover:bg-orange-600 font-medium transition-colors" onclick="clearAllBranches()" title="清空所有机构选择">
+                                        <i class="fa fa-refresh mr-1"></i>清空全部选择
+                                    </button>
+                                </div>
+                                
+                                <!-- 无结果提示 -->
+                                <div id="branchNoResult" class="px-4 py-4 text-center text-gray-500 text-sm hidden">
+                                    没有找到匹配的分支机构
+                                </div>
                             </div>
                         </div>
                     </div>
+
+                    <!-- 联系人类别筛选 -->
+                    <div class="flex flex-col w-full md:w-1/3">
+                        <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                            </svg>
+                            联系人类别
+                        </label>
+                        <input type="text" name="category" class="mt-1 p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-300 focus:border-teal-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors" placeholder="输入类别名称筛选" value="{{ selected_category|default:'' }}">
+                    </div>
+
+                    <!-- 联系人姓名筛选 -->
+                    <div class="flex flex-col w-full md:w-1/3">
+                        <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                            </svg>
+                            联系人姓名
+                        </label>
+                        <input type="text" name="contact_name" class="mt-1 p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-300 focus:border-teal-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors" placeholder="输入联系人姓名筛选" value="{{ selected_contact_name|default:'' }}">
+                    </div>
                     
-                    <!-- 下拉内容 -->
-                    <div id="branchDropdownContent" class="absolute z-10 mt-1 w-full bg-white rounded-lg shadow-md overflow-hidden hidden">
-                        <!-- 搜索输入框 -->
-                        <div class="p-2 border-b border-gray-100">
-                            <input 
-                                type="text" 
-                                id="branchFilterInput" 
-                                class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-1 focus:ring-blue-300 focus:border-blue-500 outline-none text-sm"
-                                placeholder="搜索分支机构..."
-                                oninput="filterBranchOptions()"
-                                autofocus
-                            >
-                        </div>
-                        
-                        <!-- 选项列表 -->
-                        <div id="branchOptionsList" class="max-h-60 overflow-y-auto">
-                            <ul>
-                                {% for branch in branches %}
-                                <li class="branch-option px-4 py-2.5 hover:bg-gray-100 cursor-pointer text-sm transition-colors flex items-center" 
-                                    data-id="{{ branch.id }}" 
-                                    data-name="{{ branch.name }}">
-                                    <input type="checkbox" class="mr-2 branch-checkbox" value="{{ branch.id }}">
-                                    {{ branch.name }}
-                                </li>
-                                {% endfor %}
-                            </ul>
-                        </div>
-                        
-                        <!-- 操作按钮 -->
-                        <div class="p-2 border-t border-gray-100 flex gap-2">
-                            <button type="button" class="flex-1 px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600" onclick="selectAllBranches()">全选</button>
-                            <button type="button" class="flex-1 px-3 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600" onclick="clearAllBranches()">清空</button>
-                        </div>
-                        
-                        <!-- 独立的清空全部选择按钮 -->
-                        <div class="p-2 border-t border-gray-100">
-                            <button type="button" class="w-full px-3 py-2 text-sm bg-orange-500 text-white rounded-lg hover:bg-orange-600 font-medium" onclick="clearAllBranches()" title="清空所有机构选择">
-                                <i class="fa fa-refresh mr-1"></i>清空全部选择
-                            </button>
-                        </div>
-                        
-                        <!-- 无结果提示 -->
-                        <div id="branchNoResult" class="px-4 py-4 text-center text-gray-500 text-sm hidden">
-                            没有找到匹配的分支机构
-                        </div>
+                    <div class="flex items-end gap-2">
+                        <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-teal-600 to-teal-700 hover:from-teal-700 hover:to-teal-800 text-white rounded-lg shadow-md hover:shadow-lg transition-all duration-200 font-medium">
+                            <i class="fa fa-search mr-1"></i>筛选
+                        </button>
+                        <button type="button" class="px-5 py-2.5 bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white rounded-lg shadow-md hover:shadow-lg transition-all duration-200 font-medium" onclick="clearFilters()">
+                            <i class="fa fa-times mr-1"></i>清空筛选
+                        </button>
                     </div>
                 </div>
-            </div>
-
-            <!-- 联系人类别筛选（保持原结构） -->
-            <div class="flex flex-col w-full md:w-1/3">
-                <label class="text-sm font-medium">联系人类别</label>
-                <input type="text" name="category" class="mt-1 p-2 border rounded" placeholder="输入类别名称筛选" value="{{ selected_category|default:'' }}">
-            </div>
-
-            <!-- 联系人姓名筛选（保持原结构） -->
-            <div class="flex flex-col w-full md:w-1/3">
-                <label class="text-sm font-medium">联系人姓名</label>
-                <input type="text" name="contact_name" class="mt-1 p-2 border rounded" placeholder="输入联系人姓名筛选" value="{{ selected_contact_name|default:'' }}">
-            </div>
-            
-            <div class="flex items-end gap-2">
-                <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">筛选</button>
-                <button type="button" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors duration-200 font-medium" onclick="clearFilters()">
-                    <i class="fa fa-times mr-1"></i>清空筛选
-                </button>
-            </div>
+                
+                <!-- 隐藏的分支机构ID输入框（用于表单提交） -->
+                <input type="hidden" name="branches" id="selectedBranchesInput">
+            </form>
         </div>
-        
-        <!-- 隐藏的分支机构ID输入框（用于表单提交） -->
-        <input type="hidden" name="branches" id="selectedBranchesInput">
-    </form>
+    </div>
 
-    <table class="min-w-full border-collapse border border-gray-300">
-        <thead>
-            <tr>
-                <th class="p-2 border border-gray-300 bg-gray-100">分支机构</th>
-                <th class="p-2 border border-gray-300 bg-gray-100">分类</th>
-                <th class="p-2 border border-gray-300 bg-gray-100">姓名</th>
-                <th class="p-2 border border-gray-300 bg-gray-100">电话</th>
-                <th class="p-2 border border-gray-300 bg-gray-100">邮箱</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for contact in contacts %}
-            <tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
-                <td class="p-2 border border-gray-300">{{ contact.branch.name }}</td>
-                <td class="p-2 border border-gray-300">{{ contact.category|default:"" }}</td>
-                <td class="p-2 border border-gray-300">{{ contact.name|default:"" }}</td>
-                <td class="p-2 border border-gray-300">{{ contact.phone|default:"" }}</td>
-                <td class="p-2 border border-gray-300">{{ contact.email|default:"" }}</td>
-            </tr>
-            {% empty %}
-            <tr>
-                <td colspan="5" class="p-4 text-center text-gray-500">没有找到匹配的联系人</td>
-            </tr>
-            {% endfor %}
-        </tbody>
-    </table>
+    <!-- 联系人列表 -->
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-teal-100">
+        <div class="overflow-x-auto">
+            <table class="w-full border-collapse">
+                <thead>
+                    <tr class="bg-gradient-to-r from-teal-50 to-cyan-50 border-b-2 border-teal-200">
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                                </svg>
+                                分支机构
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                                </svg>
+                                分类
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                                </svg>
+                                姓名
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                                </svg>
+                                电话
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                                </svg>
+                                邮箱
+                            </div>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-100">
+                    {% for contact in contacts %}
+                    <tr class="{% cycle 'bg-white' 'bg-slate-50/50' %} hover:bg-teal-50/50 transition-colors duration-200">
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 font-medium">{{ contact.branch.name }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ contact.category|default:"-" }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ contact.name|default:"-" }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ contact.phone|default:"-" }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ contact.email|default:"-" }}</td>
+                    </tr>
+                    {% empty %}
+                    <tr>
+                        <td colspan="5" class="px-6 py-8 text-center text-gray-500">
+                            <div class="flex flex-col items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                <span>没有找到匹配的联系人</span>
+                            </div>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
 
-    <div class="mt-4 flex justify-end">
-        <a href="{% url 'export-contacts-pdf' %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}" class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-800 text-white font-medium rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+    <!-- 导出按钮 -->
+    <div class="mt-6 flex justify-end">
+        <a href="{% url 'export-contacts-pdf' %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}" class="inline-flex items-center px-5 py-2.5 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
             </svg>
             导出为PDF
         </a>
     </div>
 </div>
 
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-teal-400 to-transparent"></div>
+
 <script>
     // 选中的分支机构
     let selectedBranches = new Set();
diff --git a/fzjgact/huodong/templates/equipment_images.html b/fzjgact/huodong/templates/equipment_images.html
index 13dc392..3af1b64 100644
--- a/fzjgact/huodong/templates/equipment_images.html
+++ b/fzjgact/huodong/templates/equipment_images.html
@@ -1,66 +1,186 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<div class="container mx-auto px-4 py-8">
-    <h1 class="text-3xl font-bold mb-8 text-center">分支机构设备间图片列表</h1>
-    <div class="flex justify-center mb-6">
-        <form method="get" action="" class="w-full max-w-md">
-            <div class="flex">
-                <input type="text" name="search" placeholder="搜索分支机构名称..." value="{{ request.GET.search }}"
-                       class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
+<!-- 页面标题 -->
+<div class="w-full max-w-7xl mx-auto p-6">
+    <div class="relative flex items-center justify-center py-8">
+        <div class="absolute left-0 right-0 h-1 bg-gradient-to-r from-transparent via-emerald-500 to-transparent"></div>
+        <div class="relative z-10 bg-gradient-to-r from-emerald-600 to-teal-700 text-white px-8 py-3 rounded-full shadow-lg">
+            <h1 class="text-xl font-bold flex items-center gap-3">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+                分支机构设备间图片列表
+            </h1>
+        </div>
+    </div>
+</div>
+
+<div class="w-full max-w-7xl mx-auto p-6">
+    <!-- 搜索区域 -->
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-emerald-100 mb-6">
+        <div class="px-6 py-4 bg-gradient-to-r from-emerald-600 via-emerald-700 to-teal-700">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                搜索分支机构
+            </h2>
+        </div>
+        <div class="p-6">
+            <form method="get" action="" class="flex flex-col sm:flex-row gap-4 items-center justify-center">
+                <div class="relative flex-1 max-w-md w-full">
+                    <input type="text" name="search" placeholder="搜索分支机构名称..." value="{{ request.GET.search }}"
+                           class="w-full px-4 py-3 pl-12 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 bg-gray-50 hover:bg-white transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 absolute left-4 top-1/2 transform -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                </div>
+                <button type="submit" class="px-6 py-3 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white rounded-lg shadow-md hover:shadow-lg transition-all duration-200 font-medium flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
                     搜索
                 </button>
-            </div>
-        </form>
+            </form>
+        </div>
+    </div>
+
+    <!-- 统计信息 -->
+    <div class="mb-6 text-center">
+        <span class="inline-flex items-center px-4 py-2 rounded-full bg-emerald-100 text-emerald-700 text-sm font-medium">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+            </svg>
+            共 {{ total_count }} 个分支机构
+        </span>
     </div>
-    <p class="text-gray-600 mb-6 text-center">共 {{ total_count }} 个分支机构</p>
 
     {% if branches %}
-    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
         {% for branch in branches %}
-        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
-            <div class="p-4">
-                <h2 class="text-xl font-semibold text-gray-900 mb-1">{{ branch.name }}</h2>
-                <a href="{% url 'branch-detail' branch.id %}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
-                    查看分支机构详情 →
+        <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-emerald-100 hover:shadow-2xl transition-all duration-300 group">
+            <div class="p-5 bg-gradient-to-r from-emerald-50 to-teal-50 border-b border-emerald-100">
+                <h2 class="text-lg font-bold text-gray-900 mb-2">{{ branch.name }}</h2>
+                <a href="{% url 'branch-detail' branch.id %}" class="inline-flex items-center text-emerald-600 hover:text-emerald-800 text-sm font-medium transition-colors">
+                    查看分支机构详情
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
                 </a>
             </div>
-            <div class="bg-gray-100 p-2">
+
+            <!-- 设备间图片 -->
+            <div class="p-4 bg-gray-50">
+                <div class="flex items-center gap-2 mb-3">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    <span class="text-sm font-semibold text-gray-700">设备间图片</span>
+                </div>
                 {% if branch.equipment_images.exists %}
-                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
+                    <div class="grid grid-cols-2 gap-2">
                         {% for image in branch.equipment_images.all %}
                             <img src="{{ image.image.url }}" alt="{{ branch.name }}设备间图片"
-                                 class="h-[100px] md:h-[150px] lg:h-[200px] w-auto object-cover cursor-pointer"
+                                 class="h-[80px] w-full object-cover rounded-lg cursor-pointer hover:scale-105 transition-transform duration-300"
                                  data-branch-id="{{ branch.id }}" data-image-type="equipment" data-index="{{ forloop.counter0 }}"
                                  onclick="openImageModal(this)">
                         {% endfor %}
                     </div>
                 {% else %}
-                    <div class="flex items-center justify-center h-48 bg-gray-200">
-                        <span class="text-gray-400 text-sm">无图片</span>
+                    <div class="flex items-center justify-center h-24 bg-gray-100 rounded-lg">
+                        <div class="text-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-300 mx-auto mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                            </svg>
+                            <span class="text-gray-400 text-xs">无图片</span>
+                        </div>
                     </div>
                 {% endif %}
             </div>
 
             <!-- 图纸显示区域 -->
-            <div class="bg-gray-100 p-2 mt-4">
-                <h3 class="text-lg font-semibold mb-2">图纸</h3>
+            <div class="p-4 bg-gray-50 border-t border-gray-100">
+                <div class="flex items-center gap-2 mb-3">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0121 18.382V7.618a1 1 0 01-.553-.894L15 7m0 13V7" />
+                    </svg>
+                    <span class="text-sm font-semibold text-gray-700">图纸</span>
+                </div>
                 {% if branch.drawings.exists %}
-                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
+                    <div class="grid grid-cols-2 gap-2">
                         {% for drawing in branch.drawings.all %}
                             <img src="{{ drawing.image.url }}" alt="{{ branch.name }}图纸"
-                                 class="h-[100px] md:h-[150px] lg:h-[200px] w-auto object-cover cursor-pointer"
+                                 class="h-[80px] w-full object-cover rounded-lg cursor-pointer hover:scale-105 transition-transform duration-300"
                                  data-branch-id="{{ branch.id }}" data-image-type="drawings" data-index="{{ forloop.counter0 }}"
                                  onclick="openImageModal(this)">
                         {% endfor %}
                     </div>
                 {% else %}
-                    <div class="flex items-center justify-center h-48 bg-gray-200">
-                        <span class="text-gray-400 text-sm">无图纸</span>
+                    <div class="flex items-center justify-center h-24 bg-gray-100 rounded-lg">
+                        <div class="text-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-300 mx-auto mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0121 18.382V7.618a1 1 0 01-.553-.894L15 7m0 13V7" />
+                            </svg>
+                            <span class="text-gray-400 text-xs">无图纸</span>
+                        </div>
                     </div>
                 {% endif %}
             </div>
+        </div>
+        {% endfor %}
+    </div>
+
+    <!-- 分页控件 -->
+    <div class="mt-10 flex justify-center">
+        <nav class="inline-flex rounded-xl shadow-lg overflow-hidden border border-emerald-100">
+            {% if branches.has_previous %}
+            <a href="?page=1" class="relative inline-flex items-center px-4 py-3 bg-white text-sm font-medium text-gray-700 hover:bg-emerald-50 transition-colors border-r border-gray-100">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+                </svg>
+                首页
+            </a>
+            <a href="?page={{ branches.previous_page_number }}" class="relative inline-flex items-center px-4 py-3 bg-white text-sm font-medium text-gray-700 hover:bg-emerald-50 transition-colors border-r border-gray-100">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                </svg>
+                上一页
+            </a>
+            {% endif %}
+
+            <span class="relative inline-flex items-center px-6 py-3 bg-gradient-to-r from-emerald-50 to-teal-50 text-sm font-bold text-emerald-700">
+                第 {{ branches.number }} 页，共 {{ branches.paginator.num_pages }} 页
+            </span>
+
+            {% if branches.has_next %}
+            <a href="?page={{ branches.next_page_number }}" class="relative inline-flex items-center px-4 py-3 bg-white text-sm font-medium text-gray-700 hover:bg-emerald-50 transition-colors border-l border-gray-100">
+                下一页
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+            </a>
+            <a href="?page={{ branches.paginator.num_pages }}" class="relative inline-flex items-center px-4 py-3 bg-white text-sm font-medium text-gray-700 hover:bg-emerald-50 transition-colors border-l border-gray-100">
+                末页
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+                </svg>
+            </a>
+            {% endif %}
+        </nav>
+    </div>
+    {% else %}
+    <div class="text-center py-12 bg-white rounded-2xl shadow-lg border border-emerald-100">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-300 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+        <p class="text-gray-500 text-lg">暂无分支机构设备间图片数据</p>
+    </div>
+    {% endif %}
+</div>
+
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-emerald-400 to-transparent"></div>
 
 <!-- 图片查看模态框 -->
 <div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
@@ -135,9 +255,7 @@ document.getElementById('imageModal').addEventListener('click', function(e) {
 });
 </script>
             
-        </div>
-        {% endfor %}
-    </div>
+    
 
     <!-- 分页控件 -->
     <div class="mt-10 flex justify-center">
@@ -165,10 +283,6 @@ document.getElementById('imageModal').addEventListener('click', function(e) {
             {% endif %}
         </nav>
     </div>
-    {% else %}
-    <div class="text-center py-12 bg-gray-50 rounded-lg">
-        <p class="text-gray-500 text-lg">暂无分支机构设备间图片数据</p>
-    </div>
-    {% endif %}
+
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/fzjgact/huodong/templates/public_screens.html b/fzjgact/huodong/templates/public_screens.html
index 74248a2..25c5ae2 100644
--- a/fzjgact/huodong/templates/public_screens.html
+++ b/fzjgact/huodong/templates/public_screens.html
@@ -2,78 +2,146 @@
 {% load static %}
 
 {% block content %}
-<div class="container mx-auto p-4">
-    <h1 class="text-2xl font-bold mb-6">公共电子屏列表</h1>
+<!-- 页面标题 -->
+<div class="w-full max-w-6xl mx-auto p-6">
+    <div class="relative flex items-center justify-center py-8">
+        <div class="absolute left-0 right-0 h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent"></div>
+        <div class="relative z-10 bg-gradient-to-r from-cyan-600 to-blue-700 text-white px-8 py-3 rounded-full shadow-lg">
+            <h1 class="text-xl font-bold flex items-center gap-3">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
+                公共电子屏列表
+            </h1>
+        </div>
+    </div>
+</div>
 
+<div class="w-full max-w-6xl mx-auto p-6">
     <!-- 筛选区域 -->
-    <div class="bg-gray-100 p-4 rounded-lg mb-6">
-        <form method="get" class="flex flex-col md:flex-row gap-4">
-            <div>
-                <label class="block mb-2">分支机构</label>
-                <select name="branch" class="border rounded p-2 w-full md:w-48">
-                    <option value="">所有分支机构</option>
-                    {% for branch in branches %}
-                        <option value="{{ branch.id }}" {% if request.GET.branch == branch.id|stringformat:"i" %}selected{% endif %}>{{ branch.name }}</option>
-                    {% endfor %}
-                </select>
-            </div>
-            <div>
-                <label class="block mb-2">屏幕类型</label>
-                <select name="screen_type" class="border rounded p-2 w-full md:w-48">
-                    <option value="">所有类型</option>
-                    <option value="marquee" {% if request.GET.screen_type == 'marquee' %}selected{% endif %}>跑马灯</option>
-                    <option value="advertisement" {% if request.GET.screen_type == 'advertisement' %}selected{% endif %}>广告屏</option>
-                    <option value="information" {% if request.GET.screen_type == 'information' %}selected{% endif %}>信息发布屏</option>
-                </select>
-            </div>
-            <div class="self-end">
-                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">筛选</button>
-                {% if request.GET.branch or request.GET.screen_type %}
-                    <a href="{% url 'public-screens' %}" class="ml-2 text-gray-600">清除筛选</a>
-                {% endif %}
-            </div>
-        </form>
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-cyan-100 mb-6">
+        <div class="px-6 py-4 bg-gradient-to-r from-cyan-600 via-cyan-700 to-blue-700">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+                </svg>
+                筛选条件
+            </h2>
+        </div>
+        <div class="p-6">
+            <form method="get" class="flex flex-col md:flex-row gap-4 items-end">
+                <div class="flex flex-col w-full md:w-48">
+                    <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                        </svg>
+                        分支机构
+                    </label>
+                    <select name="branch" class="p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-cyan-300 focus:border-cyan-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors">
+                        <option value="">所有分支机构</option>
+                        {% for branch in branches %}
+                            <option value="{{ branch.id }}" {% if request.GET.branch == branch.id|stringformat:"i" %}selected{% endif %}>{{ branch.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="flex flex-col w-full md:w-48">
+                    <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                        </svg>
+                        屏幕类型
+                    </label>
+                    <select name="screen_type" class="p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-cyan-300 focus:border-cyan-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors">
+                        <option value="">所有类型</option>
+                        <option value="marquee" {% if request.GET.screen_type == 'marquee' %}selected{% endif %}>跑马灯</option>
+                        <option value="advertisement" {% if request.GET.screen_type == 'advertisement' %}selected{% endif %}>广告屏</option>
+                        <option value="information" {% if request.GET.screen_type == 'information' %}selected{% endif %}>信息发布屏</option>
+                    </select>
+                </div>
+                <div class="flex items-center gap-2">
+                    <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-cyan-600 to-cyan-700 hover:from-cyan-700 hover:to-cyan-800 text-white rounded-lg shadow-md hover:shadow-lg transition-all duration-200 font-medium flex items-center gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+                        </svg>
+                        筛选
+                    </button>
+                    {% if request.GET.branch or request.GET.screen_type %}
+                        <a href="{% url 'public-screens' %}" class="px-4 py-2.5 text-gray-600 hover:text-cyan-600 hover:bg-cyan-50 rounded-lg transition-colors font-medium">
+                            清除筛选
+                        </a>
+                    {% endif %}
+                </div>
+            </form>
+        </div>
     </div>
 
     <!-- 电子屏列表 -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {% for screen in public_screens %}
-            <div class="border rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
+            <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 border border-cyan-100 group">
                 <div class="relative">
                     {% if screen.image %}
-                        <img src="{{ screen.image.url }}" alt="{{ screen.get_screen_type_display }}" class="w-full h-[150px] object-cover cursor-pointer" onclick="openModal('{{ screen.image.url }}')">
+                        <img src="{{ screen.image.url }}" alt="{{ screen.get_screen_type_display }}" class="w-full h-[180px] object-cover cursor-pointer group-hover:scale-105 transition-transform duration-500" onclick="openModal('{{ screen.image.url }}')">
                     {% else %}
-                        <div class="w-full h-[150px] bg-gray-200 flex items-center justify-center">
-                            <span class="text-gray-500">暂无图片</span>
+                        <div class="w-full h-[180px] bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">
+                            <div class="text-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                </svg>
+                                <span class="text-gray-500 text-sm">暂无图片</span>
+                            </div>
                         </div>
                     {% endif %}
-                    <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-sm">
+                    <div class="absolute top-3 right-3 bg-gradient-to-r from-cyan-600 to-blue-600 text-white px-3 py-1 rounded-full text-xs font-medium shadow-md">
                         {{ screen.get_screen_type_display }}
                     </div>
                 </div>
-                <div class="p-4">
-                    <h3 class="font-semibold text-lg mb-2">{{ screen.branch.name }}</h3>
+                <div class="p-5">
+                    <h3 class="font-bold text-lg mb-2 text-gray-800">{{ screen.branch.name }}</h3>
                     {% if screen.description %}
-                        <p class="text-gray-700 mb-2">{{ screen.description|truncatechars:100 }}</p>
+                        <p class="text-gray-600 mb-3 text-sm leading-relaxed">{{ screen.description|truncatechars:100 }}</p>
                     {% endif %}
-                    <div class="text-sm text-gray-500">
+                    <div class="text-sm space-y-1">
                         {% if screen.last_drill %}
-                            <p>最后演练: {{ screen.last_drill.date|date:"Y-m-d H:i" }}</p>
+                            <p class="flex items-center gap-2 text-gray-600">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                最后演练: {{ screen.last_drill.date|date:"Y-m-d H:i" }}
+                            </p>
                         {% else %}
-                            <p class="text-yellow-500">暂无演练记录</p>
+                            <p class="flex items-center gap-2 text-amber-600">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                                </svg>
+                                暂无演练记录
+                            </p>
                         {% endif %}
-                        <p>更新时间: {{ screen.updated_at|date:"Y-m-d H:i" }}</p>
+                        <p class="flex items-center gap-2 text-gray-500">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                            更新时间: {{ screen.updated_at|date:"Y-m-d H:i" }}
+                        </p>
                     </div>
                 </div>
             </div>
         {% empty %}
-            <div class="col-span-full text-center py-10">
-                <p class="text-gray-500">暂无公共电子屏记录</p>
+            <div class="col-span-full text-center py-12">
+                <div class="bg-white rounded-2xl shadow-lg p-8 border border-cyan-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-300 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                    </svg>
+                    <p class="text-gray-500 text-lg">暂无公共电子屏记录</p>
+                </div>
             </div>
         {% endfor %}
     </div>
 </div>
 
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-cyan-400 to-transparent"></div>
+
 <!-- 图片预览模态框 -->
 <div id="imageModal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center hidden z-50">
     <button onclick="closeModal()" class="absolute top-4 right-4 text-white text-2xl">&times;</button>
diff --git a/fzjgact/huodong/templates/statistics.html b/fzjgact/huodong/templates/statistics.html
index 203b326..2fd962a 100644
--- a/fzjgact/huodong/templates/statistics.html
+++ b/fzjgact/huodong/templates/statistics.html
@@ -1,79 +1,189 @@
-{% extends "base.html" %}
-{% load custom_filters %}
-
-{% block content %}
-<div class="container mx-auto p-4">
-    <!-- 筛选表单 -->
-    <form method="GET" class="mb-8 p-4 bg-gray-100 rounded-lg">
-        <div class="flex flex-wrap gap-4">
-            <!-- 年份选择 -->
-            <div class="flex flex-col">
-                <label class="text-sm font-medium">选择年份</label>
-                <select name="year" class="mt-1 p-2 border rounded">
-                    <option value="all">全部年份</option>
-                    <option value="2023" {% if selected_year == '2023' %}selected{% endif %}>2023年</option>
-                    <option value="2024" {% if selected_year == '2024' %}selected{% endif %}>2024年</option>
-                    <option value="2025" {% if selected_year == '2025' %}selected{% endif %}>2025年</option>
-                </select>
-            </div>
-
-            <!-- 分支机构选择 -->
-            <div class="flex flex-col">
-                <label class="text-sm font-medium">分支机构</label>
-                <select name="branch" class="mt-1 p-2 border rounded">
-                    <option value="all" {% if selected_branch == 'all' %}selected{% endif %}>全部分支机构</option>
-                    {% for branch in branches %}
-                    <option value="{{ branch.id }}" {% if selected_branch == branch.id|stringformat:"s" %}selected{% endif %}>
-                        {{ branch.name }}
-                    </option>
-                    {% endfor %}
-                </select>
-            </div>
-
-            <!-- 状态选择 -->
-            <div class="flex flex-col">
-                <label class="text-sm font-medium">活动状态</label>
-                <select name="status" class="mt-1 p-2 border rounded">
-                    <option value="completed" {% if selected_status == 'completed' %}selected{% endif %}>已完成</option>
-                    <option value="ongoing" {% if selected_status == 'ongoing' %}selected{% endif %}>未完成</option>
-                </select>
-            </div>
-
-            <button type="submit" class="self-end px-4 py-2 bg-blue-200 text-white rounded hover:bg-blue-700">
-                筛选
-            </button>
-        </div>
-    </form>
-
-    <!-- 统计结果展示 -->
-    <div class="mt-4">
-        <h2 class="text-xl font-bold mb-4">活动统计结果（共{{ activities.count }}条）</h2>
-        <table class="min-w-full border-collapse border border-gray-300">
-            <thead>
-                <tr>
-                    <th class="p-2 border border-gray-300 bg-gray-100">活动名称</th>
-                    <th class="p-2 border border-gray-300 bg-gray-100">分支机构</th>
-                    <th class="p-2 border border-gray-300 bg-gray-100">活动分类</th>
-                    <th class="p-2 border border-gray-300 bg-gray-100">开始时间</th>
-                    <th class="p-2 border border-gray-300 bg-gray-100">结束时间</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for activity in activities %}
-                <tr>
-                    <td class="p-2 border border-gray-300">{{ activity.name }}</td>
-                    <td class="p-2 border border-gray-300">{{ activity.branch.name }}</td>
-                    <td class="p-2 border border-gray-300">{{ activity.scope }}</td>
-                    <td class="p-2 border border-gray-300">{{ activity.start_time|format_chinese_full_date }}</td>
-                    <td class="p-2 border border-gray-300">{{ activity.end_time|format_chinese_full_date|default:"未结束" }}</td>
-                </tr>
-                {% empty %}
-                <tr>
-                    <td class="p-2 border border-gray-300 text-center" colspan="4">无符合条件的活动记录</td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-    </div>
-</div>
+{% extends "base.html" %}
+{% load custom_filters %}
+
+{% block content %}
+<!-- 页面标题 -->
+<div class="w-full max-w-6xl mx-auto p-6">
+    <div class="relative flex items-center justify-center py-8">
+        <div class="absolute left-0 right-0 h-1 bg-gradient-to-r from-transparent via-rose-500 to-transparent"></div>
+        <div class="relative z-10 bg-gradient-to-r from-rose-600 to-pink-700 text-white px-8 py-3 rounded-full shadow-lg">
+            <h1 class="text-xl font-bold flex items-center gap-3">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                </svg>
+                活动统计
+            </h1>
+        </div>
+    </div>
+</div>
+
+<div class="w-full max-w-6xl mx-auto p-6">
+    <!-- 筛选表单 -->
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-rose-100 mb-6">
+        <div class="px-6 py-4 bg-gradient-to-r from-rose-600 via-rose-700 to-pink-700">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+                </svg>
+                筛选条件
+            </h2>
+        </div>
+        <div class="p-6">
+            <form method="GET" class="flex flex-wrap gap-4 items-end">
+                <!-- 年份选择 -->
+                <div class="flex flex-col">
+                    <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                        选择年份
+                    </label>
+                    <select name="year" class="mt-1 p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-rose-300 focus:border-rose-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors">
+                        <option value="all">全部年份</option>
+                        <option value="2023" {% if selected_year == '2023' %}selected{% endif %}>2023年</option>
+                        <option value="2024" {% if selected_year == '2024' %}selected{% endif %}>2024年</option>
+                        <option value="2025" {% if selected_year == '2025' %}selected{% endif %}>2025年</option>
+                    </select>
+                </div>
+
+                <!-- 分支机构选择 -->
+                <div class="flex flex-col">
+                    <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                        </svg>
+                        分支机构
+                    </label>
+                    <select name="branch" class="mt-1 p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-rose-300 focus:border-rose-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors">
+                        <option value="all" {% if selected_branch == 'all' %}selected{% endif %}>全部分支机构</option>
+                        {% for branch in branches %}
+                        <option value="{{ branch.id }}" {% if selected_branch == branch.id|stringformat:"s" %}selected{% endif %}>
+                            {{ branch.name }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+
+                <!-- 状态选择 -->
+                <div class="flex flex-col">
+                    <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        活动状态
+                    </label>
+                    <select name="status" class="mt-1 p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-rose-300 focus:border-rose-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors">
+                        <option value="completed" {% if selected_status == 'completed' %}selected{% endif %}>已完成</option>
+                        <option value="ongoing" {% if selected_status == 'ongoing' %}selected{% endif %}>未完成</option>
+                    </select>
+                </div>
+
+                <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-rose-600 to-rose-700 hover:from-rose-700 hover:to-rose-800 text-white rounded-lg shadow-md hover:shadow-lg transition-all duration-200 font-medium flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+                    </svg>
+                    筛选
+                </button>
+            </form>
+        </div>
+    </div>
+
+    <!-- 统计结果展示 -->
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-rose-100">
+        <div class="px-6 py-4 bg-gradient-to-r from-rose-50 to-pink-50 border-b-2 border-rose-200">
+            <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                </svg>
+                活动统计结果
+                <span class="ml-2 px-3 py-1 bg-rose-100 text-rose-700 rounded-full text-sm font-medium">共 {{ activities.count }} 条</span>
+            </h2>
+        </div>
+        <div class="overflow-x-auto">
+            <table class="w-full border-collapse">
+                <thead>
+                    <tr class="bg-gradient-to-r from-rose-50 to-pink-50 border-b-2 border-rose-200">
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                活动名称
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                                </svg>
+                                分支机构
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                                </svg>
+                                活动分类
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                </svg>
+                                开始时间
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                结束时间
+                            </div>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-100">
+                    {% for activity in activities %}
+                    <tr class="{% cycle 'bg-white' 'bg-rose-50/30' %} hover:bg-rose-50/50 transition-colors duration-200">
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 font-medium">{{ activity.name }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ activity.branch.name }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-rose-100 text-rose-700">
+                                {{ activity.scope }}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ activity.start_time|format_chinese_full_date }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                            {% if activity.end_time %}
+                                {{ activity.end_time|format_chinese_full_date }}
+                            {% else %}
+                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700">
+                                    未结束
+                                </span>
+                            {% endif %}
+                        </td>
+                    </tr>
+                    {% empty %}
+                    <tr>
+                        <td colspan="5" class="px-6 py-8 text-center text-gray-500">
+                            <div class="flex flex-col items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                <span>无符合条件的活动记录</span>
+                            </div>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-rose-400 to-transparent"></div>
 {% endblock %}
\ No newline at end of file
diff --git a/fzjgact/huodong/templates/video_terminals.html b/fzjgact/huodong/templates/video_terminals.html
index 2e44dcf..c9c5593 100644
--- a/fzjgact/huodong/templates/video_terminals.html
+++ b/fzjgact/huodong/templates/video_terminals.html
@@ -1,94 +1,178 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="container mx-auto p-4">
-    <h2 class="text-xl font-bold mb-4">视频设备终端列表</h2>
-
-    <!-- 筛选表单 -->
-    <form method="GET" class="mb-4 p-4 bg-gray-100 rounded-lg">
-        <div class="flex flex-wrap gap-4">
-            <!-- 分支机构筛选 -->
-            <div class="flex flex-col w-full md:w-1/3">
-                <label class="text-sm font-medium">分支机构</label>
-                <div x-data="{ open: false, search: '{{ selected_branch_name|default:'' }}', selectedId: '{{ selected_branch|default:'' }}', branches: [{% for branch in branches %}{id: {{ branch.id }}, name: '{{ branch.name }}'}{% if not forloop.last %},{% endif %}{% endfor %}] }" class="relative">
-                <input type="text" 
-                       x-model="search"
-                       @focus="open = true"
-                       @input.debounce.300ms="open = true"
-                       @click.away="open = false"
-                       placeholder="搜索分支机构..."
-                       class="mt-1 p-2 border rounded w-full"
-                       x-on:keydown.backspace="if (!search) selectedId = ''; search = ''"
-                >
-                <div x-show="open" class="absolute z-10 mt-1 w-full bg-white border rounded shadow-lg max-h-60 overflow-y-auto">
-                    <div @click="selectedId = ''; search = ''; open = false" class="p-2 hover:bg-gray-100 cursor-pointer">全部分支机构</div>
-                    <div x-for="branch in branches.filter(b => b.name.toLowerCase().includes(search.toLowerCase()))"
-                         :key="branch.id"
-                         @click="selectedId = branch.id; search = branch.name; open = false"
-                         class="p-2 hover:bg-gray-100 cursor-pointer"
-                         x-text="branch.name"
-                    ></div>
-                </div>
-                <input type="hidden" name="branch" x-model="selectedId">
-            </div>
-            </div>
-
-            <!-- 设备类型筛选 -->
-            <div class="flex flex-col w-full md:w-1/3">
-                <label class="text-sm font-medium">设备类型</label>
-                <div x-data="{ open: false, search: '{{ selected_type_name|default:'' }}', selectedCode: '{{ selected_type|default:'' }}', types: [{% for type_code, type_name in terminal_types %}{code: '{{ type_code }}', name: '{{ type_name }}'}{% if not forloop.last %},{% endif %}{% endfor %}] }" class="relative">
-                <input type="text" 
-                       x-model="search"
-                       @focus="open = true"
-                       @input.debounce.300ms="open = true"
-                       @click.away="open = false"
-                       placeholder="搜索设备类型..."
-                       class="mt-1 p-2 border rounded w-full"
-                       x-on:keydown.backspace="if (!search) selectedCode = ''; search = ''"
-                >
-                <div x-show="open" class="absolute z-10 mt-1 w-full bg-white border rounded shadow-lg max-h-60 overflow-y-auto">
-                    <div @click="selectedCode = ''; search = ''; open = false" class="p-2 hover:bg-gray-100 cursor-pointer">全部类型</div>
-                    <div x-for="type in types.filter(t => t.name.toLowerCase().includes(search.toLowerCase()))"
-                         :key="type.code"
-                         @click="selectedCode = type.code; search = type.name; open = false"
-                         class="p-2 hover:bg-gray-100 cursor-pointer"
-                         x-text="type.name"
-                    ></div>
-                </div>
-                <input type="hidden" name="type" x-model="selectedCode">
-            </div>
-            </div>
-
-            <div class="flex items-end">
-                <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">筛选</button>
-            </div>
+<!-- 页面标题 -->
+<div class="w-full max-w-6xl mx-auto p-6">
+    <div class="relative flex items-center justify-center py-8">
+        <div class="absolute left-0 right-0 h-1 bg-gradient-to-r from-transparent via-violet-500 to-transparent"></div>
+        <div class="relative z-10 bg-gradient-to-r from-violet-600 to-purple-700 text-white px-8 py-3 rounded-full shadow-lg">
+            <h1 class="text-xl font-bold flex items-center gap-3">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                视频设备终端列表
+            </h1>
         </div>
-    </form>
+    </div>
+</div>
+
+<div class="w-full max-w-6xl mx-auto p-6">
+    <!-- 筛选表单 -->
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-violet-100 mb-6">
+        <div class="px-6 py-4 bg-gradient-to-r from-violet-600 via-violet-700 to-purple-700">
+            <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+                </svg>
+                筛选条件
+            </h2>
+        </div>
+        <div class="p-6">
+            <form method="GET" class="flex flex-wrap gap-4 items-end">
+                <!-- 分支机构筛选 -->
+                <div class="flex flex-col w-full md:w-1/3">
+                    <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                        </svg>
+                        分支机构
+                    </label>
+                    <div x-data="{ open: false, search: '{{ selected_branch_name|default:'' }}', selectedId: '{{ selected_branch|default:'' }}', branches: [{% for branch in branches %}{id: {{ branch.id }}, name: '{{ branch.name }}'}{% if not forloop.last %},{% endif %}{% endfor %}] }" class="relative">
+                        <input type="text" 
+                               x-model="search"
+                               @focus="open = true"
+                               @input.debounce.300ms="open = true"
+                               @click.away="open = false"
+                               placeholder="搜索分支机构..."
+                               class="w-full p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-violet-300 focus:border-violet-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors"
+                               x-on:keydown.backspace="if (!search) selectedId = ''; search = ''"
+                        >
+                        <div x-show="open" class="absolute z-10 mt-1 w-full bg-white border border-gray-100 rounded-lg shadow-lg max-h-60 overflow-y-auto">
+                            <div @click="selectedId = ''; search = ''; open = false" class="p-2 hover:bg-violet-50 cursor-pointer">全部分支机构</div>
+                            <div x-for="branch in branches.filter(b => b.name.toLowerCase().includes(search.toLowerCase()))"
+                                 :key="branch.id"
+                                 @click="selectedId = branch.id; search = branch.name; open = false"
+                                 class="p-2 hover:bg-violet-50 cursor-pointer"
+                                 x-text="branch.name"
+                            ></div>
+                        </div>
+                        <input type="hidden" name="branch" x-model="selectedId">
+                    </div>
+                </div>
+
+                <!-- 设备类型筛选 -->
+                <div class="flex flex-col w-full md:w-1/3">
+                    <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                        </svg>
+                        设备类型
+                    </label>
+                    <div x-data="{ open: false, search: '{{ selected_type_name|default:'' }}', selectedCode: '{{ selected_type|default:'' }}', types: [{% for type_code, type_name in terminal_types %}{code: '{{ type_code }}', name: '{{ type_name }}'}{% if not forloop.last %},{% endif %}{% endfor %}] }" class="relative">
+                        <input type="text" 
+                               x-model="search"
+                               @focus="open = true"
+                               @input.debounce.300ms="open = true"
+                               @click.away="open = false"
+                               placeholder="搜索设备类型..."
+                               class="w-full p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-violet-300 focus:border-violet-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors"
+                               x-on:keydown.backspace="if (!search) selectedCode = ''; search = ''"
+                        >
+                        <div x-show="open" class="absolute z-10 mt-1 w-full bg-white border border-gray-100 rounded-lg shadow-lg max-h-60 overflow-y-auto">
+                            <div @click="selectedCode = ''; search = ''; open = false" class="p-2 hover:bg-violet-50 cursor-pointer">全部类型</div>
+                            <div x-for="type in types.filter(t => t.name.toLowerCase().includes(search.toLowerCase()))"
+                                 :key="type.code"
+                                 @click="selectedCode = type.code; search = type.name; open = false"
+                                 class="p-2 hover:bg-violet-50 cursor-pointer"
+                                 x-text="type.name"
+                            ></div>
+                        </div>
+                        <input type="hidden" name="type" x-model="selectedCode">
+                    </div>
+                </div>
+
+                <div class="flex items-end">
+                    <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-violet-600 to-violet-700 hover:from-violet-700 hover:to-violet-800 text-white rounded-lg shadow-md hover:shadow-lg transition-all duration-200 font-medium flex items-center gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+                        </svg>
+                        筛选
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
 
     <!-- 终端列表表格 -->
-    <table class="min-w-full border-collapse border border-gray-300">
-        <thead>
-            <tr>
-                <th class="p-2 border border-gray-300 bg-gray-100">分支机构</th>
-                <th class="p-2 border border-gray-300 bg-gray-100">设备类型</th>
-                <th class="p-2 border border-gray-300 bg-gray-100">设备描述</th>
-                <th class="p-2 border border-gray-300 bg-gray-100">创建时间</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for terminal in terminals %}
-            <tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
-                <td class="p-2 border border-gray-300">{{ terminal.branch.name }}</td>
-                <td class="p-2 border border-gray-300">{{ terminal.get_terminal_type_display }}</td>
-                <td class="p-2 border border-gray-300">{{ terminal.description|default:"" }}</td>
-                <td class="p-2 border border-gray-300">{{ terminal.created_at|date:"Y-m-d H:i" }}</td>
-            </tr>
-            {% empty %}
-            <tr>
-                <td colspan="4" class="p-4 text-center text-gray-500">没有找到匹配的视频设备终端</td>
-            </tr>
-            {% endfor %}
-        </tbody>
-    </table>
+    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-violet-100">
+        <div class="overflow-x-auto">
+            <table class="w-full border-collapse">
+                <thead>
+                    <tr class="bg-gradient-to-r from-violet-50 to-purple-50 border-b-2 border-violet-200">
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                                </svg>
+                                分支机构
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                                </svg>
+                                设备类型
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                设备描述
+                            </div>
+                        </th>
+                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
+                            <div class="flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                创建时间
+                            </div>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-100">
+                    {% for terminal in terminals %}
+                    <tr class="{% cycle 'bg-white' 'bg-violet-50/30' %} hover:bg-violet-50/50 transition-colors duration-200">
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 font-medium">{{ terminal.branch.name }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-violet-100 text-violet-700">
+                                {{ terminal.get_terminal_type_display }}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ terminal.description|default:"-" }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ terminal.created_at|date:"Y-m-d H:i" }}</td>
+                    </tr>
+                    {% empty %}
+                    <tr>
+                        <td colspan="4" class="px-6 py-8 text-center text-gray-500">
+                            <div class="flex flex-col items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                <span>没有找到匹配的视频设备终端</span>
+                            </div>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
 </div>
+
+<!-- 分隔线 -->
+<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-violet-400 to-transparent"></div>
 {% endblock %}
\ No newline at end of file