/* pages/stationMonitor/stationMonitor.wxss */
|
|
/* 重置页面默认样式 */
|
page {
|
margin: 0;
|
padding: 0;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.container {
|
padding: 0;
|
margin: 0;
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
/* 选项卡容器 */
|
.tab-container {
|
display: flex;
|
width: 100%;
|
background: white;
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
position: sticky;
|
top: 0;
|
z-index: 100;
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
}
|
|
/* 选项卡项 */
|
.tab-item {
|
flex: 1;
|
width: 25%; /* 明确设置每个选项卡占25%宽度 */
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 20rpx 5rpx;
|
position: relative;
|
transition: all 0.3s ease;
|
box-sizing: border-box;
|
}
|
|
.tab-item.active {
|
background-color: #f0f8ff;
|
}
|
|
.tab-item.active::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 60rpx;
|
height: 4rpx;
|
background-color: #1890FF;
|
border-radius: 2rpx;
|
}
|
|
/* 选项卡图标 */
|
.tab-icon {
|
width: 48rpx;
|
height: 48rpx;
|
margin-bottom: 8rpx;
|
transition: all 0.3s ease;
|
}
|
|
.tab-item.active .tab-icon {
|
transform: scale(1.1);
|
filter: brightness(0) saturate(100%) invert(41%) sepia(96%) saturate(1408%) hue-rotate(200deg) brightness(96%) contrast(103%);
|
}
|
|
.tab-item:not(.active) .tab-icon {
|
filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%);
|
}
|
|
/* 选项卡文字 */
|
.tab-name {
|
font-size: 22rpx;
|
color: #666;
|
text-align: center;
|
line-height: 1.2;
|
transition: color 0.3s ease;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
max-width: 100%;
|
}
|
|
.tab-item.active .tab-name {
|
color: #1890FF;
|
font-weight: 600;
|
}
|
|
/* 内容区域 */
|
.content-area {
|
padding: 0;
|
margin: 0;
|
width: 100%;
|
min-height: calc(100vh - 140rpx);
|
box-sizing: border-box;
|
}
|
|
/* 选项卡内容 */
|
.tab-content {
|
width: 100%;
|
background: white;
|
border-radius: 0;
|
padding: 20rpx 0;
|
box-shadow: none;
|
animation: fadeIn 0.3s ease-in-out;
|
box-sizing: border-box;
|
margin: 0;
|
display: block;
|
}
|
|
@keyframes fadeIn {
|
from {
|
opacity: 0;
|
transform: translateY(20rpx);
|
}
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
|
/* 内容标题 */
|
.content-title {
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #333;
|
margin: 0 20rpx 20rpx 20rpx;
|
display: block;
|
width: calc(100% - 40rpx);
|
box-sizing: border-box;
|
}
|
|
/* 响应式适配 */
|
@media (max-width: 400px) {
|
.tab-name {
|
font-size: 20rpx;
|
}
|
|
.tab-icon {
|
width: 40rpx;
|
height: 40rpx;
|
}
|
|
.tab-item {
|
padding: 16rpx 2rpx;
|
width: 25%; /* 确保小屏幕下也均分 */
|
}
|
}
|
|
/* 超小屏幕适配 */
|
@media (max-width: 320px) {
|
.tab-name {
|
font-size: 18rpx;
|
}
|
|
.tab-icon {
|
width: 36rpx;
|
height: 36rpx;
|
}
|
|
.tab-item {
|
padding: 12rpx 1rpx;
|
}
|
}
|
|
/* 摄像头列表样式 */
|
.camera-list {
|
display: flex;
|
flex-direction: column;
|
gap: 0;
|
margin: 0;
|
width: 100%;
|
}
|
|
.camera-item {
|
width: 100vw;
|
background: #f8f9fa;
|
border-radius: 0;
|
padding: 20rpx;
|
box-shadow: none;
|
box-sizing: border-box;
|
margin: 0 0 2rpx 0;
|
position: relative;
|
left: 0;
|
right: 0;
|
}
|
|
/* 摄像头头部 */
|
.camera-header {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 16rpx;
|
box-sizing: border-box;
|
}
|
|
.camera-name {
|
font-size: 28rpx;
|
font-weight: 600;
|
color: #333;
|
}
|
|
.camera-status {
|
padding: 8rpx 16rpx;
|
border-radius: 20rpx;
|
font-size: 22rpx;
|
}
|
|
.camera-status.online {
|
background-color: #f6ffed;
|
color: #52c41a;
|
border: 1rpx solid #b7eb8f;
|
}
|
|
.camera-status.offline {
|
background-color: #fff2f0;
|
color: #ff4d4f;
|
border: 1rpx solid #ffccc7;
|
}
|
|
/* 视频容器 */
|
.camera-video-container {
|
position: relative;
|
width: 100%;
|
height: 400rpx;
|
border-radius: 0;
|
overflow: hidden;
|
margin-bottom: 16rpx;
|
box-sizing: border-box;
|
}
|
|
.video-wrapper {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
|
.live-player {
|
width: 100%;
|
height: 100%;
|
background-color: #000;
|
border-radius: 0;
|
}
|
|
.video-overlay {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 0.3);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
z-index: 10;
|
}
|
|
.play-overlay {
|
width: 80rpx;
|
height: 80rpx;
|
background: rgba(0, 0, 0, 0.6);
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
transition: all 0.3s ease;
|
}
|
|
.play-overlay:active {
|
transform: scale(0.9);
|
}
|
|
.play-icon {
|
width: 40rpx;
|
height: 40rpx;
|
filter: brightness(0) invert(1);
|
}
|
|
.video-info {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
padding: 20rpx 16rpx 16rpx;
|
color: white;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.video-time {
|
font-size: 24rpx;
|
opacity: 0.9;
|
}
|
|
.video-status {
|
font-size: 22rpx;
|
opacity: 0.8;
|
color: #52c41a;
|
}
|
|
/* 播放控制按钮 */
|
.video-controls {
|
position: absolute;
|
top: 16rpx;
|
right: 16rpx;
|
display: flex;
|
gap: 12rpx;
|
z-index: 20;
|
}
|
|
.control-btn {
|
width: 60rpx;
|
height: 60rpx;
|
background: rgba(0, 0, 0, 0.6);
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
transition: all 0.3s ease;
|
}
|
|
.control-btn:active {
|
transform: scale(0.9);
|
background: rgba(0, 0, 0, 0.8);
|
}
|
|
.control-icon {
|
width: 32rpx;
|
height: 32rpx;
|
filter: brightness(0) invert(1);
|
}
|
|
/* 调试按钮 */
|
.debug-controls {
|
position: absolute;
|
bottom: 16rpx;
|
right: 16rpx;
|
z-index: 20;
|
}
|
|
.debug-btn {
|
padding: 8rpx 16rpx;
|
background: rgba(255, 0, 0, 0.7);
|
border-radius: 20rpx;
|
font-size: 20rpx;
|
color: white;
|
}
|
|
/* 离线状态 */
|
.video-offline {
|
width: 100%;
|
height: 100%;
|
background-color: #f5f5f5;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
border-radius: 12rpx;
|
}
|
|
.offline-icon {
|
width: 60rpx;
|
height: 60rpx;
|
opacity: 0.5;
|
margin-bottom: 16rpx;
|
}
|
|
.offline-text {
|
font-size: 24rpx;
|
color: #999;
|
}
|
|
/* 操作按钮 */
|
.camera-actions {
|
width: 100%;
|
display: flex;
|
gap: 16rpx;
|
box-sizing: border-box;
|
}
|
|
.action-btn {
|
flex: 1;
|
height: 64rpx;
|
border-radius: 32rpx;
|
font-size: 26rpx;
|
border: none;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
transition: all 0.3s ease;
|
}
|
|
.action-btn.primary {
|
background-color: #1890FF;
|
color: white;
|
}
|
|
.action-btn.primary:active {
|
background-color: #0050b3;
|
}
|
|
.action-btn.secondary {
|
background-color: white;
|
color: #1890FF;
|
border: 1rpx solid #1890FF;
|
}
|
|
.action-btn.secondary:active {
|
background-color: #f0f8ff;
|
}
|
|
.action-btn.disabled {
|
background-color: #f5f5f5;
|
color: #bfbfbf;
|
cursor: not-allowed;
|
}
|
