yangg пре 2 месеци
родитељ
комит
07980c833c
1 измењених фајлова са 52 додато и 27 уклоњено
  1. 52 27
      src/views/JobApplication/report/index.vue

+ 52 - 27
src/views/JobApplication/report/index.vue

@@ -1226,19 +1226,65 @@ const handleVideoError = (event: Event) => {
 </template>
 
 <style scoped>
-/* 添加自定义背景渐变样式 */
+/* 修改背景渐变样式,使用蓝色小精灵的配色 */
 .bg-gradient-custom {
-  background: linear-gradient(180deg, #1d1e3a 0%, #2c2d4a 100%);
+  background: linear-gradient(180deg, #0066cc 0%, #3399ff 100%);
   min-height: 100vh;
   width: 100%;
   position: relative;
   overflow-y: auto;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+/* 修改星星背景效果,使其更符合蓝色主题 */
+.bg-gradient-custom::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: 
+    radial-gradient(2px 2px at 20px 30px, #ffffff30 50%, transparent 100%),
+    radial-gradient(2px 2px at 40px 70px, #ffffff30 50%, transparent 100%),
+    radial-gradient(2px 2px at 50px 160px, #ffffff30 50%, transparent 100%),
+    radial-gradient(2px 2px at 90px 40px, #ffffff30 50%, transparent 100%),
+    radial-gradient(2px 2px at 130px 80px, #ffffff30 50%, transparent 100%),
+    radial-gradient(2px 2px at 160px 120px, #ffffff30 50%, transparent 100%);
+  background-repeat: repeat;
+  background-size: 200px 200px;
+  opacity: 0.6;
+  z-index: 0;
+  animation: twinkle 4s infinite alternate;
+}
+
+/* 添加闪烁动画效果 */
+@keyframes twinkle {
+  0% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 0.7;
+  }
+}
+
+/* 修改页面标题区域样式 */
+.bg-[#1d1e3a] {
+  background-color: #004d99 !important; /* 深蓝色标题背景 */
+}
+
+/* 修改按钮悬浮效果 */
+.el-button--primary {
+  background-color: #0066cc !important;
+  border-color: #0066cc !important;
 }
 
-.bg-gradient-custom::-webkit-scrollbar {
-  display: none; /* Chrome, Safari and Opera */
+.el-button--primary:hover {
+  background-color: #3399ff !important;
+  border-color: #3399ff !important;
+  transform: scale(1.05);
+  transition: all 0.3s ease;
 }
 
 /* 修改内容区域的样式 */
@@ -1255,27 +1301,6 @@ const handleVideoError = (event: Event) => {
   display: none;
 }
 
-/* 添加星星背景效果 */
-.bg-gradient-custom::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: 
-    radial-gradient(2px 2px at 20px 30px, #ffffff15 50%, transparent 100%),
-    radial-gradient(2px 2px at 40px 70px, #ffffff15 50%, transparent 100%),
-    radial-gradient(2px 2px at 50px 160px, #ffffff15 50%, transparent 100%),
-    radial-gradient(2px 2px at 90px 40px, #ffffff15 50%, transparent 100%),
-    radial-gradient(2px 2px at 130px 80px, #ffffff15 50%, transparent 100%),
-    radial-gradient(2px 2px at 160px 120px, #ffffff15 50%, transparent 100%);
-  background-repeat: repeat;
-  background-size: 200px 200px;
-  opacity: 0.5;
-  z-index: 0;
-}
-
 .video-container {
   position: relative;
   width: 100%;