优化控制界面UI样式，增加外界手柄控制
This commit is contained in:
Cx330 committed
1 parent
7fbe4f59cd
commit
bd13a5aeb2
10 files changed
+779
-79
No files matched your search
+144
-47
@@ -6,14 +6,16 @@
|
||||
justify-content: center;
|
||||
min-height: 80vh;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 手柄风格布局 */
|
||||
@@ -23,46 +25,66 @@
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/* 移动控制按钮区域 */
|
||||
.movement-controls {
|
||||
/* 控制器布局 */
|
||||
.controller-layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
background: linear-gradient(145deg, #e6e6e6, #ffffff);
|
||||
border-radius: 20px;
|
||||
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* 方向键区域 */
|
||||
.dpad {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.movement-row {
|
||||
.dpad-row {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 录制回放按钮区域 */
|
||||
.record-controls {
|
||||
/* 中间录制回放控制 */
|
||||
.center-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 右侧旋转控制 */
|
||||
.rotate-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn {
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
border-radius: 15px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px rgba(255, 255, 255, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
@@ -81,93 +103,168 @@
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 方向按钮样式 */
|
||||
.btn-forward {
|
||||
background-color: #4CAF50;
|
||||
background: linear-gradient(145deg, #4CAF50, #45a049);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-backward {
|
||||
background-color: #f44336;
|
||||
background: linear-gradient(145deg, #f44336, #da190b);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-left {
|
||||
background-color: #2196F3;
|
||||
background: linear-gradient(145deg, #2196F3, #1976D2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-right {
|
||||
background-color: #FF9800;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-rotate-left {
|
||||
background-color: #9C27B0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-rotate-right {
|
||||
background-color: #607D8B;
|
||||
background: linear-gradient(145deg, #FF9800, #F57C00);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 斜向按钮样式 */
|
||||
.btn-forward-left {
|
||||
background-color: #4CAF50;
|
||||
background: linear-gradient(145deg, #4CAF50, #45a049);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-forward-right {
|
||||
background-color: #4CAF50;
|
||||
background: linear-gradient(145deg, #4CAF50, #45a049);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-backward-left {
|
||||
background-color: #f44336;
|
||||
background: linear-gradient(145deg, #f44336, #da190b);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-backward-right {
|
||||
background-color: #f44336;
|
||||
background: linear-gradient(145deg, #f44336, #da190b);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 旋转按钮样式 */
|
||||
.btn-rotate-left {
|
||||
background: linear-gradient(145deg, #9C27B0, #7B1FA2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-rotate-right {
|
||||
background: linear-gradient(145deg, #607D8B, #455A64);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 中心方块样式 */
|
||||
.btn-center {
|
||||
background: linear-gradient(145deg, #666666, #444444);
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px rgba(255, 255, 255, 0.7);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn-center:hover {
|
||||
transform: none;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.btn-center:active {
|
||||
transform: none;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* 录制回放按钮样式 */
|
||||
.btn-record {
|
||||
background: linear-gradient(145deg, #FF5722, #E64A19);
|
||||
color: white;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.btn-playback {
|
||||
background: linear-gradient(145deg, #00BCD4, #0097A7);
|
||||
color: white;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
/* 按钮动画效果 */
|
||||
.btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.15), -8px -8px 16px rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2), -3px -3px 6px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
/* 状态显示 */
|
||||
.status {
|
||||
margin-top: 30px;
|
||||
padding: 15px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 10px;
|
||||
min-height: 50px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(145deg, #f5f5f5, #e0e0e0);
|
||||
border-radius: 15px;
|
||||
min-height: 60px;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
max-width: 400px;
|
||||
text-align: center;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1), inset -5px -5px 10px rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.status p {
|
||||
color: #666;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 400px) {
|
||||
@media (max-width: 650px) {
|
||||
.controller-layout {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dpad-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn-record, .btn-playback {
|
||||
width: 100px;
|
||||
height: 45px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn-record, .btn-playback {
|
||||
width: 90px;
|
||||
height: 40px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@@ -56,6 +56,16 @@ h1 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-record {
|
||||
background-color: #ff9800;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-playback {
|
||||
background-color: #2196f3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
|
||||
Reference in new issue
Block a user