feat(video): add video fit toggle button and update styling

- Add toggle button to switch between 'cover' and 'contain' video fit modes
- Update video background styling for simpler positioning
- Group upload and fit buttons in a flex container
This commit is contained in:
2025-07-16 14:21:15 +08:00
parent 6906829305
commit 27d9cea6d2
4 changed files with 30 additions and 10 deletions
+10 -8
View File
@@ -15,15 +15,12 @@ html, body {
/* --- 视频背景 --- */
#bg-video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* 将视频置于最底层 */
object-fit: cover; /* 关键:让视频填满整个屏幕而不变形 */
object-fit: cover; /* 默认填满整个屏幕(裁剪),JS会切换它 */
background-color: #1a1a1a; /* 视频加载前的背景色 */
}
@@ -77,6 +74,11 @@ html, body {
/* 这个区域是弹性填充的,所以不需要太多样式 */
}
.button-container {
display: flex;
gap: 10px; /* 按钮之间的间距 */
}
.upload-button {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.5);