|
@@ -1226,19 +1226,65 @@ const handleVideoError = (event: Event) => {
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
-/* 添加自定义背景渐变样式 */
|
|
|
|
|
|
+/* 修改背景渐变样式,使用蓝色小精灵的配色 */
|
|
.bg-gradient-custom {
|
|
.bg-gradient-custom {
|
|
- background: linear-gradient(180deg, #1d1e3a 0%, #2c2d4a 100%);
|
|
|
|
|
|
+ background: linear-gradient(180deg, #0066cc 0%, #3399ff 100%);
|
|
min-height: 100vh;
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
position: relative;
|
|
overflow-y: auto;
|
|
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;
|
|
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 {
|
|
.video-container {
|
|
position: relative;
|
|
position: relative;
|
|
width: 100%;
|
|
width: 100%;
|