nongxiaoyu/pages/device-list/detail-camera.vue

<template>
  <view class="container">
    <!-- 设备头部信息区域 -->
    <view class="device-header">
      <view class="device-info-row">
        <view class="device-name-container">
          <text class="device-name">{{ deviceInfo.name }}</text>
          <view 
            class="status-tag" 
            :class="deviceInfo.status === 'online' ? 'status-online' : 'status-offline'"
          >
            <view class="status-dot" :class="{'offline-dot': deviceInfo.status === 'offline'}"></view>
            {{ deviceInfo.status === 'online' ? '在线' : '离线' }}
          </view>
        </view>
      </view>
      
      <view class="device-meta-row">
        <view class="device-meta-item">
          <view class="meta-icon">
            <svg width="16" height="16" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M22,3H2C0.9,3,0,3.9,0,5v14c0,1.1,0.9,2,2,2h20c1.1,0,1.99-0.9,1.99-2L24,5C24,3.9,23.1,3,22,3z M9,17H6.5v-2.5h2.5V17z M9,13H6.5v-2.5h2.5V13z M9,9H6.5V6.5h2.5V9z M13.5,17H11v-2.5h2.5V17z M13.5,13H11v-2.5h2.5V13z M13.5,9H11V6.5h2.5V9z M18,17h-2.5v-2.5H18V17z M18,13h-2.5v-2.5H18V13z M18,9h-2.5V6.5H18V9z"/>
            </svg>
          </view>
          <text class="meta-label">设备编号：</text>
          <text class="meta-value">{{ deviceInfo.deviceId }}</text>
        </view>
        
        <view class="device-meta-item">
          <view class="meta-icon">
            <svg width="16" height="16" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M12,2C8.13,2,5,5.13,5,9c0,5.25,7,13,7,13s7-7.75,7-13C19,5.13,15.87,2,12,2z M12,11.5c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5s2.5,1.12,2.5,2.5S13.38,11.5,12,11.5z"/>
            </svg>
          </view>
          <text class="meta-label">安装位置：</text>
          <text class="meta-value">{{ deviceInfo.location }}</text>
        </view>
        
        <view class="device-meta-item">
          <view class="meta-icon">
            <svg width="16" height="16" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M12,20c-4.42,0-8-3.58-8-8s3.58-8,8-8s8,3.58,8,8S16.42,20,12,20z M12.5,7H11v6l5.25,3.15l0.75-1.23l-4.5-2.67V7z"/>
            </svg>
          </view>
          <text class="meta-label">最近更新：</text>
          <text class="meta-value">{{ deviceInfo.lastUpdate }}</text>
        </view>
      </view>
    </view>
    
    <!-- 视频预览区域 -->
    <view class="video-section">
      <view class="video-container">
        <image v-if="!isPlaying" src="/static/images/video-placeholder.jpg" mode="aspectFill" class="video-placeholder"></image>
        <video 
          v-else
          id="videoPlayer" 
          :src="deviceInfo.streamUrl"
          class="video-player"
          object-fit="cover"
          autoplay
          :controls="false"
          :show-center-play-btn="false"
          :show-fullscreen-btn="false"
          :show-play-btn="false"
          :enable-progress-gesture="false"
          @error="handleVideoError"
        ></video>
        
        <!-- 视频控制层 -->
        <view class="video-controls">
          <view class="control-row top-controls">
            <view class="signal-indicator">
              <svg width="16" height="16" viewBox="0 0 24 24">
                <path fill="#FFFFFF" d="M1,21h20V1L1,21z M21,21h2v-2h-2V21z M19,7v12h-2V9L5,21H3L21,3v4H19z" />
              </svg>
              <text class="signal-text">信号良好</text>
            </view>
            
            <view class="fullscreen-button" @click="toggleFullscreen">
              <svg width="20" height="20" viewBox="0 0 24 24">
                <path fill="#FFFFFF" d="M7,14H5v5h5v-2H7V14z M5,10h2V7h3V5H5V10z M17,17h-3v2h5v-5h-2V17z M14,5v2h3v3h2V5H14z" />
              </svg>
            </view>
          </view>
          
          <view class="control-row center-controls">
            <view v-if="!isPlaying" class="play-button" @click="togglePlayState">
              <svg width="32" height="32" viewBox="0 0 24 24">
                <path fill="#4CAF50" d="M8,5v14l11-7L8,5z" />
              </svg>
            </view>
            <view v-else class="center-button-container" @click="togglePlayState">
              <view class="pause-icon">
                <svg width="24" height="24" viewBox="0 0 24 24">
                  <path fill="#FFFFFF" d="M6,19h4V5H6V19z M14,5v14h4V5H14z" />
                </svg>
              </view>
            </view>
          </view>
          
          <view class="control-row bottom-controls">
            <view class="video-time">{{ currentTime }}</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 云台控制区域 -->
    <view class="ptz-section">
      <view class="section-title">云台控制</view>
      
      <view class="ptz-container">
        <!-- 圆形云台控制 -->
        <view class="ptz-circle-container">
          <!-- 上箭头 -->
          <view class="ptz-arrow ptz-up" @touchstart="controlPTZ('up', true)" @touchend="controlPTZ('up', false)">
            <svg width="24" height="24" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M7,14l5-5l5,5H7z" />
            </svg>
          </view>
          
          <!-- 左箭头 -->
          <view class="ptz-arrow ptz-left" @touchstart="controlPTZ('left', true)" @touchend="controlPTZ('left', false)">
            <svg width="24" height="24" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M14,7l-5,5l5,5V7z" />
            </svg>
          </view>
          
          <!-- 中心拍照按钮 -->
          <view class="ptz-center" @click="takeScreenshot">
            <svg width="24" height="24" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M9,3L7.17,5H4C2.9,5,2,5.9,2,7v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V7c0-1.1-0.9-2-2-2h-3.17L15,3H9z M12,18c-2.76,0-5-2.24-5-5s2.24-5,5-5s5,2.24,5,5S14.76,18,12,18z M12,10c-1.66,0-3,1.34-3,3s1.34,3,3,3s3-1.34,3-3S13.66,10,12,10z" />
            </svg>
          </view>
          
          <!-- 右箭头 -->
          <view class="ptz-arrow ptz-right" @touchstart="controlPTZ('right', true)" @touchend="controlPTZ('right', false)">
            <svg width="24" height="24" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M10,17l5-5l-5-5V17z" />
            </svg>
          </view>
          
          <!-- 下箭头 -->
          <view class="ptz-arrow ptz-down" @touchstart="controlPTZ('down', true)" @touchend="controlPTZ('down', false)">
            <svg width="24" height="24" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M7,10l5,5l5-5H7z" />
            </svg>
          </view>
        </view>
        
        <!-- 底部操作按钮 -->
        <view class="ptz-bottom-controls">
          <view class="ptz-bottom-button" @touchstart="controlZoom('out', true)" @touchend="controlZoom('out', false)">
            <svg width="24" height="24" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M19,13H5v-2h14V13z" />
            </svg>
          </view>
          
          <view class="ptz-bottom-button" @click="resetPTZ">
            <svg width="24" height="24" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M17.65,6.35C16.2,4.9,14.21,4,12,4c-4.42,0-7.99,3.58-7.99,8s3.57,8,7.99,8c3.73,0,6.84-2.55,7.73-6h-2.08 c-0.82,2.33-3.04,4-5.65,4c-3.31,0-6-2.69-6-6s2.69-6,6-6c1.66,0,3.14,0.69,4.22,1.78L13,12h7V5L17.65,6.35z" />
            </svg>
          </view>
          
          <view class="ptz-bottom-button" @touchstart="controlZoom('in', true)" @touchend="controlZoom('in', false)">
            <svg width="24" height="24" viewBox="0 0 24 24">
              <path fill="#3BB44A" d="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6V13z" />
            </svg>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 快捷功能按钮 -->
    <view class="quick-actions">
      <view class="action-button" @click="toggleVoiceIntercom">
        <view class="action-icon">
          <svg width="24" height="24" viewBox="0 0 24 24">
            <path fill="#3BB44A" d="M12,14c1.66,0,3-1.34,3-3V5c0-1.66-1.34-3-3-3S9,3.34,9,5v6C9,12.66,10.34,14,12,14z M11,5c0-0.55,0.45-1,1-1s1,0.45,1,1v6c0,0.55-0.45,1-1,1s-1-0.45-1-1V5z M17,11c0,2.76-2.24,5-5,5s-5-2.24-5-5H5c0,3.53,2.61,6.43,6,6.92V21h2v-3.08c3.39-0.49,6-3.39,6-6.92H17z" />
          </svg>
        </view>
        <text class="action-text">语音对讲</text>
      </view>
      
      <view class="action-button" @click="toggleMute">
        <view class="action-icon">
          <svg v-if="isMuted" width="24" height="24" viewBox="0 0 24 24">
            <path fill="#3BB44A" d="M16.5,12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45,2.45C16.46,12.43,16.5,12.22,16.5,12z M19,12c0,0.94-0.2,1.82-0.54,2.64l1.51,1.51C20.63,14.91,21,13.5,21,12c0-4.28-2.99-7.86-7-8.77v2.06c2.89,0.86,5,3.54,5,6.71z M4.27,3L3,4.27L7.73,9H3v6h4l5,5v-6.73l4.25,4.25c-0.67,0.52-1.42,0.93-2.25,1.18v2.06c1.38-0.31,2.63-0.95,3.69-1.81L19.73,21L21,19.73l-9-9L4.27,3z M12,4L9.91,6.09L12,8.18V4z" />
          </svg>
          <svg v-else width="24" height="24" viewBox="0 0 24 24">
            <path fill="#3BB44A" d="M3,9v6h4l5,5V4L7,9H3z M16.5,12c0-1.77-1.02-3.29-2.5-4.03v8.05C15.48,15.29,16.5,13.77,16.5,12z M14,3.23v2.06c2.89,0.86,5,3.54,5,6.71s-2.11,5.85-5,6.71v2.06c4.01-0.91,7-4.49,7-8.77S18.01,4.14,14,3.23z" />
          </svg>
        </view>
        <text class="action-text">{{ isMuted ? '取消静音' : '静音' }}</text>
      </view>
      
      <view class="action-button" @click="navigateToHistory">
        <view class="action-icon">
          <svg width="24" height="24" viewBox="0 0 24 24">
            <path fill="#3BB44A" d="M13,3c-4.97,0-9,4.03-9,9H1l3.89,3.89l0.07,0.14L9,12H6c0-3.87,3.13-7,7-7s7,3.13,7,7s-3.13,7-7,7c-1.93,0-3.68-0.79-4.94-2.06l-1.42,1.42C8.27,19.99,10.51,21,13,21c4.97,0,9-4.03,9-9S17.97,3,13,3z M12,8v5l4.28,2.54l0.72-1.21l-3.5-2.08V8H12z" />
          </svg>
        </view>
        <text class="action-text">视频回看</text>
      </view>
    </view>
    
    <!-- 告警信息列表 -->
    <view class="alerts-section">
      <view class="section-title">
        <text>告警信息</text>
        <view class="alert-badge" v-if="getUnhandledAlerts.length > 0">{{ getUnhandledAlerts.length }}</view>
      </view>
      
      <view class="alerts-list" v-if="getUnhandledAlerts.length > 0">
        <view 
          v-for="(item, index) in getUnhandledAlerts" 
          :key="index"
          class="alert-item"
          :class="{
            'alert-urgent': item.level === 'high', 
            'alert-warning': item.level === 'medium', 
            'alert-info': item.level === 'low'
          }"
        >
          <view class="alert-item-icon">
            <svg v-if="item.level === 'high'" width="24" height="24" viewBox="0 0 24 24">
              <path fill="#F56C6C" d="M12,2L1,21h22L12,2z M12,6l7.53,13H4.47L12,6z M11,10v4h2v-4H11z M11,16v2h2v-2H11z" />
            </svg>
            <svg v-else-if="item.level === 'medium'" width="24" height="24" viewBox="0 0 24 24">
              <path fill="#E6A23C" d="M11,15h2v2h-2V15z M11,7h2v6h-2V7z M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M12,20c-4.42,0-8-3.58-8-8s3.58-8,8-8s8,3.58,8,8S16.42,20,12,20z" />
            </svg>
            <svg v-else width="24" height="24" viewBox="0 0 24 24">
              <path fill="#67C23A" d="M11,7h2v2h-2V7z M11,11h2v6h-2V11z M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8S16.41,20,12,20z" />
            </svg>
          </view>
          
          <view class="alert-item-info">
            <text class="alert-item-type">{{ item.type }}</text>
            <text class="alert-item-level">
              {{ item.level === 'high' ? '紧急' : item.level === 'medium' ? '警告' : '提示' }}
            </text>
          </view>
          
          <view class="alert-item-time">{{ item.time }}</view>
        </view>
      </view>
      
      <view v-else class="empty-alert">
        <text class="empty-text">暂无告警信息</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceInfo: {
        deviceId: 'DEV1001',
        name: '监控设备-1',
        status: 'online',
        location: '西区B2地块',
        lastUpdate: '5分钟前',
        streamUrl: 'https://demo-rtsp-server-2h4n.onrender.com/stream.mp4',
        alertCount: 3
      },
      isPlaying: false,
      isMuted: false,
      isRecording: false,
      isFullscreen: false,
      isVoiceActive: false,
      isGridView: false,
      isZoomMode: false,
      currentTime: '14:30:25',
      // 模拟历史录像数据
      recordHistory: [
        { id: 1, startTime: '今天 12:30', duration: '00:15:30', url: '' },
        { id: 2, startTime: '今天 10:15', duration: '00:05:22', url: '' },
        { id: 3, startTime: '昨天 18:45', duration: '00:30:10', url: '' },
        { id: 4, startTime: '昨天 14:20', duration: '00:10:05', url: '' }
      ],
      // 模拟告警数据
      alertHistory: [
        { id: 1, time: '今天 13:05', type: '移动侦测', status: '未处理', level: 'high' },
        { id: 2, time: '今天 09:30', type: '信号异常', status: '未处理', level: 'medium' },
        { id: 3, time: '昨天 15:45', type: '设备状态', status: '已处理', level: 'low' },
        { id: 4, time: '昨天 10:20', type: '遮挡告警', status: '未处理', level: 'low' }
      ],
      videoContext: null
    }
  },
  
  computed: {
    // 获取所有未处理的告警
    getUnhandledAlerts() {
      return this.alertHistory.filter(alert => alert.status === '未处理');
    }
  },
  
  onReady() {
    // 获取视频实例
    this.videoContext = uni.createVideoContext('videoPlayer')
    
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: this.deviceInfo.name
    })
    
    // 模拟更新时间
    this.startTimeUpdate()
  },
  
  onLoad(options) {
    // 如果有传入设备ID，则获取设备信息
    if (options && options.id) {
      this.fetchDeviceInfo(options.id)
    }
  },
  
  methods: {
    // 获取设备信息
    fetchDeviceInfo(deviceId) {
      // 这里应该是API请求，暂时用模拟数据
      console.log('获取设备信息：', deviceId)
      // 模拟异步获取数据
      setTimeout(() => {
        // 实际应该是API请求结果
      }, 500)
    },
    
    // 播放/暂停切换
    togglePlayState() {
      if (!this.isPlaying) {
        // 从未播放状态切换到播放状态
        this.isPlaying = true;
        
        // 短暂延迟确保视频元素已加载
        setTimeout(() => {
          if (this.videoContext) {
            this.videoContext.play();
            // 振动反馈
            uni.vibrateShort();
          }
        }, 300);
      } else {
        // 从播放状态切换到暂停状态
        if (this.videoContext) {
          this.videoContext.pause();
          
          // 在页面上显示暂停状态
          uni.showToast({
            title: '视频已暂停',
            icon: 'none',
            duration: 1500
          });
        }
      }
    },
    
    // 静音切换
    toggleMute() {
      this.isMuted = !this.isMuted
      if (this.videoContext) {
        if (this.isMuted) {
          this.videoContext.mute()
        } else {
          this.videoContext.unmute()
        }
      }
    },
    
    // 全屏切换
    toggleFullscreen() {
      if (this.videoContext) {
        if (!this.isFullscreen) {
          this.videoContext.requestFullScreen()
        } else {
          this.videoContext.exitFullScreen()
        }
        this.isFullscreen = !this.isFullscreen
      }
    },
    
    // 切换九宫格视图
    toggleGridView() {
      this.isGridView = !this.isGridView
      uni.showToast({
        title: this.isGridView ? '切换到多画面模式' : '切换到单画面模式',
        icon: 'none'
      })
    },
    
    // 截图
    takeScreenshot() {
      // 模拟截图功能
      uni.showLoading({
        title: '截图中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '截图已保存',
          icon: 'success'
        })
      }, 1000)
    },
    
    // 语音对讲
    toggleVoiceIntercom() {
      this.isVoiceActive = !this.isVoiceActive
      
      if (this.isVoiceActive) {
        uni.showToast({
          title: '语音对讲已开启',
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '语音对讲已关闭',
          icon: 'none'
        })
      }
    },
    
    // 云台控制
    controlPTZ(direction, isStart) {
      // 模拟云台控制
      if (isStart) {
        console.log(`开始控制云台: ${direction}`)
        uni.vibrateShort() // 短震动反馈
      } else {
        console.log(`停止控制云台: ${direction}`)
      }
    },
    
    // 云台复位
    resetPTZ() {
      console.log('云台复位')
      uni.vibrateShort() // 短震动反馈
      uni.showToast({
        title: '云台已复位',
        icon: 'none'
      })
    },
    
    // 变焦控制
    controlZoom(type, isStart) {
      // 模拟变焦控制
      if (isStart) {
        console.log(`开始控制变焦: ${type}`)
        uni.vibrateShort() // 短震动反馈
      } else {
        console.log(`停止控制变焦: ${type}`)
      }
    },
    
    // 切换缩放模式
    toggleZoom() {
      this.isZoomMode = !this.isZoomMode
      uni.showToast({
        title: this.isZoomMode ? '进入缩放模式' : '退出缩放模式',
        icon: 'none'
      })
    },
    
    // 添加预设位
    addPreset() {
      uni.showModal({
        title: '添加预设位',
        content: '是否保存当前位置为预设位？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '预设位已保存',
              icon: 'success'
            })
          }
        }
      })
    },
    
    // 处理告警点击
    handleAlert(item) {
      uni.navigateTo({
        url: `/pages/alerts/alert-detail?alertId=${item.id}&deviceId=${this.deviceInfo.deviceId}`
      })
    },
    
    // 跳转到历史视频页面
    navigateToHistory() {
      uni.navigateTo({
        url: `/pages/video/history?deviceId=${this.deviceInfo.deviceId}`
      })
    },
    
    // 处理视频错误
    handleVideoError(e) {
      console.error('视频播放错误:', e)
      uni.showToast({
        title: '视频播放出错，请稍后再试',
        icon: 'none'
      })
    },
    
    // 更新时间
    startTimeUpdate() {
      // 模拟时间更新
      setInterval(() => {
        const now = new Date()
        const hours = String(now.getHours()).padStart(2, '0')
        const minutes = String(now.getMinutes()).padStart(2, '0')
        const seconds = String(now.getSeconds()).padStart(2, '0')
        this.currentTime = `${hours}:${minutes}:${seconds}`
      }, 1000)
    }
  }
}
</script>

<style>
/* 基础样式 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #F8FCF9;
  padding-bottom: 30rpx;
}

/* 设备头部样式 */
.device-header {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 26rpx 30rpx 30rpx;
  margin: 20rpx 30rpx 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.device-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
}

.device-name-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.device-name {
  font-size: 34rpx;
  color: #333333;
  font-weight: 600;
  margin-bottom: 10rpx;
}

.status-tag {
  padding: 4rpx 12rpx 4rpx 24rpx;
  border-radius: 30rpx;
  font-size: 22rpx;
  font-weight: 500;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.status-online {
  background-color: rgba(76, 175, 80, 0.1);
  color: #3BB44A;
}

.status-offline {
  background-color: rgba(245, 108, 108, 0.1);
  color: #F56C6C;
  padding-left: 24rpx;
}

.status-dot {
  position: absolute;
  width: 6rpx;
  height: 6rpx;
  background-color: #3BB44A;
  border-radius: 50%;
  top: 50%;
  left: 12rpx;
  transform: translateY(-50%);
  box-shadow: 0 0 4rpx rgba(76, 175, 80, 0.8);
  animation: blink 1.5s infinite;
  display: inline-block;
}

.status-dot.offline-dot {
  background-color: #F56C6C;
  box-shadow: 0 0 4rpx rgba(245, 108, 108, 0.8);
}

@keyframes blink {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}

.device-meta-row {
  display: flex;
  flex-direction: column;
}

.device-meta-item {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  margin-top: 18rpx;
}

.meta-icon {
  width: 36rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8rpx;
}

.meta-label {
  color: #999999;
  min-width: 140rpx;
  font-size: 26rpx;
}

.meta-value {
  color: #333333;
  flex: 1;
  font-size: 26rpx;
}

/* 视频预览区域 */
.video-section {
  margin: 0 30rpx 20rpx;
}

.video-container {
  position: relative;
  width: 100%;
  height: 420rpx; /* 16:9比例 */
  background-color: #000000;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
}

.video-player, .video-placeholder {
  width: 100%;
  height: 100%;
}

.video-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20rpx;
  box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.4) 100%);
}

.control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.top-controls {
  height: 80rpx;
}

.center-controls {
  height: 120rpx;
  justify-content: center;
  align-items: center;
}

.bottom-controls {
  height: 80rpx;
}

.signal-indicator {
  display: flex;
  align-items: center;
  color: #FFFFFF;
  font-size: 24rpx;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 8rpx 16rpx;
  border-radius: 30rpx;
}

.signal-indicator svg {
  margin-right: 8rpx;
}

.signal-text {
  font-weight: 500;
}

.fullscreen-button {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  transition: all 0.2s;
}

.fullscreen-button:active {
  background-color: rgba(76, 175, 80, 0.7);
  transform: scale(0.9);
}

.video-time {
  color: #FFFFFF;
  font-size: 26rpx;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  font-weight: 500;
}

.play-button {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.5);
  transition: all 0.2s;
  transform: scale(1);
}

.play-button:active {
  transform: scale(0.92);
  background-color: rgba(255, 255, 255, 1);
}

.center-button-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pause-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.center-button-container:active .pause-icon {
  opacity: 1;
  background-color: rgba(76, 175, 80, 0.7);
}

/* 云台控制区域 */
.ptz-section {
  margin: 0 30rpx 20rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 20rpx;
  padding: 0 10rpx;
  display: flex;
  align-items: center;
}

.alert-badge {
  background-color: #F56C6C;
  color: #FFFFFF;
  font-size: 22rpx;
  border-radius: 30rpx;
  padding: 2rpx 12rpx;
  margin-left: 12rpx;
  font-weight: normal;
  min-width: 32rpx;
  text-align: center;
}

.ptz-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.ptz-circle-container {
  position: relative;
  width: 300rpx;
  height: 300rpx;
  margin: 20rpx 0;
}

.ptz-arrow {
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F0F9F0;
  border-radius: 50%;
  color: #3BB44A;
  font-size: 36rpx;
  transition: all 0.2s;
  box-shadow: 0 2rpx 10rpx rgba(76, 175, 80, 0.15);
}

.ptz-up {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.ptz-down {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.ptz-left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.ptz-right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.ptz-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F0F9F0;
  border-radius: 50%;
  color: #3BB44A;
  font-size: 36rpx;
  transition: all 0.2s;
  box-shadow: 0 2rpx 10rpx rgba(76, 175, 80, 0.15);
}

.ptz-arrow:active, .ptz-center:active {
  background-color: #3BB44A;
  transform-origin: center;
}

.ptz-arrow:active svg path, .ptz-center:active svg path {
  fill: #FFFFFF;
}

.ptz-up:active {
  transform: scale(0.92) translateX(-50%);
}

.ptz-down:active {
  transform: scale(0.92) translateX(-50%);
}

.ptz-left:active {
  transform: scale(0.92) translateY(-50%);
}

.ptz-right:active {
  transform: scale(0.92) translateY(-50%);
}

.ptz-center:active {
  transform: translate(-50%, -50%) scale(0.92);
}

.ptz-bottom-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 300rpx;
  margin-top: 30rpx;
}

.ptz-bottom-button {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #F0F9F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3BB44A;
  font-size: 32rpx;
  font-weight: 500;
  transition: all 0.2s;
  box-shadow: 0 2rpx 10rpx rgba(76, 175, 80, 0.1);
}

.ptz-bottom-button:active {
  background-color: #3BB44A;
  color: #FFFFFF;
  transform: scale(0.92);
}

.ptz-bottom-button:active svg path {
  fill: #FFFFFF;
}

/* 快捷功能按钮 */
.quick-actions {
  display: flex;
  justify-content: space-evenly;
  margin: 0 30rpx 20rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.action-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160rpx;
}

.action-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #F0F9F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3BB44A;
  margin-bottom: 12rpx;
  transition: all 0.2s;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.1);
}

.action-icon:active {
  background-color: #3BB44A;
  transform: scale(0.92);
}

.action-icon:active svg path {
  fill: #FFFFFF;
}

.action-text {
  font-size: 24rpx;
  color: #666666;
  text-align: center;
}

/* 告警信息列表 */
.alerts-section {
  margin: 0 30rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.alerts-list {
  display: flex;
  flex-direction: column;
}

.alert-item {
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

.alert-urgent {
  background-color: #FEF3F3;
  border-left: 4rpx solid #F56C6C;
}

.alert-warning {
  background-color: #FFF8E6;
  border-left: 4rpx solid #E6A23C;
}

.alert-info {
  background-color: #F2FAF5;
  border-left: 4rpx solid #67C23A;
}

.alert-item-icon {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.alert-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.alert-item-type {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.alert-item-level {
  font-size: 24rpx;
  color: #999999;
}

.alert-item-time {
  font-size: 24rpx;
  color: #999999;
  margin-left: 16rpx;
  min-width: 100rpx;
  text-align: right;
}

.empty-alert {
  padding: 60rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}
</style>