/* 车载平板专用样式 */
|
|
/* H8-101车载平板专用适配 */
|
@media screen and (min-width: 1024px) and (max-width: 1366px) {
|
.container {
|
padding: 80rpx !important;
|
}
|
|
.canvas-container {
|
margin-bottom: 60rpx !important;
|
}
|
|
.section-title {
|
font-size: 48rpx !important;
|
font-weight: bold !important;
|
}
|
|
.sector-button {
|
min-width: 180rpx !important;
|
min-height: 120rpx !important;
|
font-size: 40rpx !important;
|
font-weight: bold !important;
|
border-radius: 15rpx !important;
|
}
|
|
.action-button {
|
min-width: 220rpx !important;
|
min-height: 130rpx !important;
|
font-size: 44rpx !important;
|
font-weight: bold !important;
|
border-radius: 15rpx !important;
|
}
|
|
.control-section {
|
padding: 40rpx !important;
|
margin-bottom: 30rpx !important;
|
border-radius: 20rpx !important;
|
}
|
|
.button-group {
|
gap: 20rpx !important;
|
}
|
|
.action-buttons {
|
gap: 30rpx !important;
|
margin-top: 40rpx !important;
|
}
|
}
|
|
/* H8-101横屏模式优化 */
|
@media screen and (orientation: landscape) and (min-width: 1024px) and (max-width: 1366px) {
|
.container {
|
flex-direction: row !important;
|
justify-content: space-between !important;
|
align-items: flex-start !important;
|
padding: 100rpx !important;
|
min-height: 100vh !important;
|
}
|
|
.canvas-container {
|
margin-bottom: 0 !important;
|
margin-right: 80rpx !important;
|
flex-shrink: 0 !important;
|
display: flex !important;
|
align-items: center !important;
|
justify-content: center !important;
|
}
|
|
.controls-container {
|
max-width: 750rpx !important;
|
flex-shrink: 0 !important;
|
display: flex !important;
|
flex-direction: column !important;
|
justify-content: space-between !important;
|
height: 100% !important;
|
}
|
|
.controls {
|
flex: 1 !important;
|
display: flex !important;
|
flex-direction: column !important;
|
justify-content: space-around !important;
|
gap: 25rpx !important;
|
}
|
|
.control-section {
|
margin-bottom: 25rpx !important;
|
padding: 45rpx !important;
|
border-radius: 25rpx !important;
|
}
|
|
.action-buttons {
|
margin-top: 30rpx !important;
|
justify-content: flex-start !important;
|
gap: 35rpx !important;
|
}
|
|
.sector-button {
|
min-width: 160rpx !important;
|
min-height: 110rpx !important;
|
font-size: 38rpx !important;
|
font-weight: bold !important;
|
}
|
|
.action-button {
|
min-width: 200rpx !important;
|
min-height: 120rpx !important;
|
font-size: 42rpx !important;
|
font-weight: bold !important;
|
}
|
|
.button-group {
|
gap: 25rpx !important;
|
justify-content: flex-start !important;
|
}
|
}
|
|
/* 超宽屏横屏模式优化 */
|
@media screen and (orientation: landscape) and (min-width: 1366px) {
|
.container {
|
padding: 120rpx !important;
|
}
|
|
.canvas-container {
|
margin-right: 100rpx !important;
|
}
|
|
.controls-container {
|
max-width: 850rpx !important;
|
}
|
|
.section-title {
|
font-size: 52rpx !important;
|
}
|
|
.sector-button {
|
min-width: 180rpx !important;
|
min-height: 120rpx !important;
|
font-size: 42rpx !important;
|
}
|
|
.action-button {
|
min-width: 240rpx !important;
|
min-height: 140rpx !important;
|
font-size: 46rpx !important;
|
}
|
}
|
|
/* 高对比度模式 */
|
@media (prefers-contrast: high) {
|
.container {
|
background-color: #000 !important;
|
}
|
|
.control-section {
|
background: #fff !important;
|
border: 4rpx solid #000 !important;
|
}
|
|
.section-title {
|
color: #000 !important;
|
}
|
|
.circle-canvas {
|
border: 6rpx solid #000 !important;
|
}
|
|
.sector-button,
|
.action-button {
|
border: 3rpx solid #000 !important;
|
}
|
}
|
|
/* 触摸优化 */
|
.sector-button,
|
.action-button,
|
.lang-button,
|
.setting-button {
|
touch-action: manipulation !important;
|
-webkit-tap-highlight-color: transparent !important;
|
transition: all 0.2s ease !important;
|
}
|
|
.sector-button:active,
|
.action-button:active,
|
.lang-button:active,
|
.setting-button:active {
|
transform: scale(0.95) !important;
|
}
|
|
/* 车载环境优化 */
|
@media screen and (min-width: 1200px) {
|
.container {
|
padding: 100rpx !important;
|
}
|
|
.section-title {
|
font-size: 48rpx !important;
|
}
|
|
.sector-button {
|
min-width: 180rpx !important;
|
min-height: 110rpx !important;
|
font-size: 40rpx !important;
|
}
|
|
.action-button {
|
min-width: 220rpx !important;
|
min-height: 120rpx !important;
|
font-size: 44rpx !important;
|
}
|
}
|
|
/* 横屏模式下的按钮组优化 */
|
@media screen and (orientation: landscape) {
|
.button-group {
|
gap: 20rpx !important;
|
justify-content: flex-start !important;
|
}
|
|
.action-buttons {
|
gap: 30rpx !important;
|
}
|
|
/* 横屏时控制区域垂直分布 */
|
.controls {
|
gap: 20rpx !important;
|
}
|
|
.control-section {
|
margin-bottom: 20rpx !important;
|
}
|
}
|
|
/* H8-101专用弹窗优化 */
|
@media screen and (orientation: landscape) {
|
.lang-popup,
|
.setting-popup {
|
min-width: 700rpx !important;
|
padding: 80rpx !important;
|
border-radius: 25rpx !important;
|
}
|
|
.lang-buttons {
|
gap: 30rpx !important;
|
}
|
|
.setting-buttons {
|
gap: 35rpx !important;
|
}
|
}
|
|
/* H8-101字体优化 */
|
@media screen and (min-width: 1024px) {
|
.section-title,
|
.popup-title {
|
font-size: 48rpx !important;
|
font-weight: bold !important;
|
line-height: 1.4 !important;
|
}
|
}
|
|
@media screen and (orientation: landscape) {
|
.section-title {
|
font-size: 44rpx !important;
|
margin-bottom: 30rpx !important;
|
}
|
|
.sector-button {
|
font-size: 36rpx !important;
|
}
|
|
.action-button {
|
font-size: 40rpx !important;
|
}
|
}
|
|
/* 车载平板专用阴影和边框 */
|
@media screen and (min-width: 1024px) {
|
.control-section {
|
box-shadow: 0 8rpx 25rpx rgba(0,0,0,0.15) !important;
|
border: 3rpx solid #e0e0e0 !important;
|
}
|
|
.circle-canvas {
|
box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.2) !important;
|
border: 5rpx solid #333 !important;
|
}
|
|
.sector-button,
|
.action-button {
|
box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.1) !important;
|
}
|
}
|
|
/* H8-101响应式间距优化 */
|
@media screen and (min-width: 1024px) and (max-width: 1366px) {
|
.container {
|
gap: 60rpx !important;
|
}
|
|
.controls-container {
|
gap: 40rpx !important;
|
}
|
|
.control-section {
|
gap: 25rpx !important;
|
}
|
}
|
|
/* 车载环境下的高对比度按钮 */
|
@media screen and (min-width: 1024px) {
|
.sector-button {
|
border: 2rpx solid #333 !important;
|
}
|
|
.action-button {
|
border: 3rpx solid #333 !important;
|
}
|
|
.sector-button:active,
|
.action-button:active {
|
background-color: #f0f0f0 !important;
|
transform: scale(0.98) !important;
|
}
|
}
|
|
/* H8-101横屏模式下的特殊优化 */
|
@media screen and (orientation: landscape) and (min-width: 1024px) and (max-width: 1366px) {
|
/* 确保画布在左侧，控制区域在右侧 */
|
.canvas-container {
|
order: 1 !important;
|
flex: 0 0 auto !important;
|
}
|
|
.controls-container {
|
order: 2 !important;
|
flex: 1 !important;
|
max-width: none !important;
|
}
|
|
/* 优化控制区域的垂直分布 */
|
.controls {
|
height: auto !important;
|
min-height: 600rpx !important;
|
}
|
|
/* 确保按钮组在横屏时合理分布 */
|
.button-group {
|
display: grid !important;
|
grid-template-columns: repeat(4, 1fr) !important;
|
gap: 20rpx !important;
|
}
|
|
/* 操作按钮在底部 */
|
.action-buttons {
|
margin-top: auto !important;
|
padding-top: 30rpx !important;
|
}
|
}
|
|
/* 车载平板专用动画效果 */
|
@media screen and (min-width: 1024px) {
|
.sector-button,
|
.action-button {
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
}
|
|
.sector-button:hover,
|
.action-button:hover {
|
transform: translateY(-2rpx) !important;
|
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.15) !important;
|
}
|
}
|
|
/* H8-101专用字体渲染优化 */
|
@media screen and (min-width: 1024px) {
|
.section-title,
|
.sector-button,
|
.action-button,
|
.popup-title {
|
-webkit-font-smoothing: antialiased !important;
|
-moz-osx-font-smoothing: grayscale !important;
|
text-rendering: optimizeLegibility !important;
|
}
|
}
|
