<template>
  <view class="security-dashboard">
    <!-- 保安信息头部 -->
    <view class="security-header">
      <view class="guard-info">
        <image class="guard-avatar" :src="guardInfo.avatar || '/static/default-avatar.png'" />
        <view class="info">
          <text class="name">{{ guardInfo.name }}</text>
          <text class="position">{{ guardInfo.position }}</text>
          <text class="shift">{{ guardInfo.currentShift }}</text>
        </view>
      </view>
      <view class="status-indicator" :class="guardInfo.status">
        <text class="status-text">{{ getStatusText(guardInfo.status) }}</text>
      </view>
    </view>

    <!-- 实时监控面板 -->
    <view class="monitoring-panel">
      <view class="section-title">实时监控</view>
      <view class="monitoring-grid">
        <view class="monitor-card">
          <view class="card-header">
            <text class="card-title">门禁状态</text>
            <view class="status-dot active"></view>
          </view>
          <text class="card-value">{{ monitoringData.accessPoints.active }}/{{ monitoringData.accessPoints.total }}</text>
          <text class="card-label">在线门禁点</text>
        </view>
        
        <view class="monitor-card">
          <view class="card-header">
            <text class="card-title">今日通行</text>
            <view class="status-dot normal"></view>
          </view>
          <text class="card-value">{{ monitoringData.todayAccess }}</text>
          <text class="card-label">人次</text>
        </view>
        
        <view class="monitor-card">
          <view class="card-header">
            <text class="card-title">当前在校</text>
            <view class="status-dot normal"></view>
          </view>
          <text class="card-value">{{ monitoringData.currentInCampus }}</text>
          <text class="card-label">人员</text>
        </view>
        
        <view class="monitor-card alert" v-if="monitoringData.alerts > 0">
          <view class="card-header">
            <text class="card-title">异常警报</text>
            <view class="status-dot warning"></view>
          </view>
          <text class="card-value">{{ monitoringData.alerts }}</text>
          <text class="card-label">待处理</text>
        </view>
      </view>
    </view>

    <!-- 紧急功能区 -->
    <view class="emergency-functions">
      <view class="section-title">紧急功能</view>
      <view class="emergency-grid">
        <view class="emergency-btn emergency-lock" @click="handleEmergencyLock">
          <image class="emergency-icon" src="/static/icons/emergency-lock.png" />
          <text class="emergency-text">紧急封锁</text>
        </view>
        
        <view class="emergency-btn emergency-unlock" @click="handleEmergencyUnlock">
          <image class="emergency-icon" src="/static/icons/emergency-unlock.png" />
          <text class="emergency-text">紧急开启</text>
        </view>
        
        <view class="emergency-btn fire-alarm" @click="handleFireAlarm">
          <image class="emergency-icon" src="/static/icons/fire-alarm.png" />
          <text class="emergency-text">火警响应</text>
        </view>
        
        <view class="emergency-btn emergency-call" @click="handleEmergencyCall">
          <image class="emergency-icon" src="/static/icons/emergency-call.png" />
          <text class="emergency-text">紧急呼叫</text>
        </view>
      </view>
    </view>

    <!-- 访客管理 -->
    <view class="visitor-management">
      <view class="section-header">
        <text class="section-title">访客管理</text>
        <button class="add-visitor-btn" @click="addNewVisitor">
          + 登记访客
        </button>
      </view>
      
      <view class="visitor-stats">
        <view class="stat-item">
          <text class="stat-value">{{ visitorData.todayTotal }}</text>
          <text class="stat-label">今日访客</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ visitorData.currentInside }}</text>
          <text class="stat-label">在校访客</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ visitorData.pendingApproval }}</text>
          <text class="stat-label">待审批</text>
        </view>
      </view>
      
      <view class="visitor-list">
        <view class="visitor-item" v-for="visitor in recentVisitors" :key="visitor.id">
          <image class="visitor-photo" :src="visitor.photo || '/static/default-avatar.png'" />
          <view class="visitor-info">
            <text class="visitor-name">{{ visitor.name }}</text>
            <text class="visitor-purpose">{{ visitor.purpose }}</text>
            <text class="visitor-time">{{ formatTime(visitor.enterTime) }}</text>
          </view>
          <view class="visitor-status" :class="visitor.status">
            {{ getVisitorStatusText(visitor.status) }}
          </view>
          <view class="visitor-actions">
            <button class="action-btn checkout" 
                    v-if="visitor.status === 'inside'"
                    @click="checkoutVisitor(visitor)">
              离校
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 实时日志 -->
    <view class="activity-log">
      <view class="section-header">
        <text class="section-title">实时日志</text>
        <view class="log-filter">
          <text class="filter-item" 
                :class="{ active: logFilter === 'all' }"
                @click="setLogFilter('all')">全部</text>
          <text class="filter-item" 
                :class="{ active: logFilter === 'access' }"
                @click="setLogFilter('access')">门禁</text>
          <text class="filter-item" 
                :class="{ active: logFilter === 'alert' }"
                @click="setLogFilter('alert')">警报</text>
        </view>
      </view>
      
      <scroll-view class="log-scroll" scroll-y="true" :scroll-top="scrollTop">
        <view class="log-item" 
              v-for="log in filteredLogs" 
              :key="log.id"
              :class="log.type">
          <view class="log-time">{{ formatLogTime(log.time) }}</view>
          <view class="log-content">
            <view class="log-location">{{ log.location }}</view>
            <text class="log-description">{{ log.description }}</text>
            <view class="log-details" v-if="log.details">
              <text class="detail-text">{{ log.details }}</text>
            </view>
          </view>
          <view class="log-status" :class="log.status">
            <view class="status-indicator"></view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 快速功能菜单 -->
    <view class="quick-functions">
      <view class="function-row">
        <view class="function-item" @click="goToAccessControl">
          <image class="function-icon" src="/static/icons/access-control.png" />
          <text class="function-text">门禁控制</text>
        </view>
        
        <view class="function-item" @click="goToVideoMonitoring">
          <image class="function-icon" src="/static/icons/video.png" />
          <text class="function-text">视频监控</text>
        </view>
        
        <view class="function-item" @click="goToPatrolRoutes">
          <image class="function-icon" src="/static/icons/patrol.png" />
          <text class="function-text">巡逻路线</text>
        </view>
        
        <view class="function-item" @click="goToIncidentReport">
          <image class="function-icon" src="/static/icons/incident.png" />
          <text class="function-text">事件上报</text>
        </view>
      </view>
    </view>

    <!-- 班次信息 -->
    <view class="shift-info">
      <view class="section-title">班次信息</view>
      <view class="shift-details">
        <view class="shift-item">
          <text class="shift-label">当前班次</text>
          <text class="shift-value">{{ shiftInfo.current }}</text>
        </view>
        <view class="shift-item">
          <text class="shift-label">上班时间</text>
          <text class="shift-value">{{ shiftInfo.startTime }}</text>
        </view>
        <view class="shift-item">
          <text class="shift-label">下班时间</text>
          <text class="shift-value">{{ shiftInfo.endTime }}</text>
        </view>
        <view class="shift-item">
          <text class="shift-label">交班人员</text>
          <text class="shift-value">{{ shiftInfo.nextGuard }}</text>
        </view>
      </view>
      
      <button class="shift-handover-btn" @click="initiateShiftHandover">
        开始交班
      </button>
    </view>

    <!-- 紧急联系人 -->
    <view class="emergency-contacts">
      <view class="section-title">紧急联系</view>
      <view class="contact-list">
        <view class="contact-item" 
              v-for="contact in emergencyContacts" 
              :key="contact.id"
              @click="callContact(contact)">
          <view class="contact-icon" :class="contact.type">
            <image :src="getContactIcon(contact.type)" />
          </view>
          <view class="contact-info">
            <text class="contact-name">{{ contact.name }}</text>
            <text class="contact-number">{{ contact.number }}</text>
          </view>
          <view class="call-btn">
            <image src="/static/icons/phone.png" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      guardInfo: {
        name: '王保安',
        position: '校园安保',
        currentShift: '夜班 18:00-06:00',
        status: 'on-duty',
        avatar: ''
      },
      monitoringData: {
        accessPoints: {
          active: 28,
          total: 30
        },
        todayAccess: 1247,
        currentInCampus: 892,
        alerts: 2
      },
      visitorData: {
        todayTotal: 45,
        currentInside: 12,
        pendingApproval: 3
      },
      recentVisitors: [
        {
          id: 1,
          name: '张先生',
          purpose: '学术访问',
          enterTime: new Date(Date.now() - 7200000),
          status: 'inside',
          photo: ''
        },
        {
          id: 2,
          name: '李女士',
          purpose: '家长会',
          enterTime: new Date(Date.now() - 3600000),
          status: 'inside',
          photo: ''
        }
      ],
      activityLogs: [
        {
          id: 1,
          time: new Date(),
          location: '东门',
          description: '学生刷卡进入',
          details: '学号: 2021001, 姓名: 张小明',
          type: 'access',
          status: 'success'
        },
        {
          id: 2,
          time: new Date(Date.now() - 300000),
          location: '图书馆',
          description: '异常开门尝试',
          details: '无效卡片尝试开门',
          type: 'alert',
          status: 'warning'
        }
      ],
      logFilter: 'all',
      scrollTop: 0,
      shiftInfo: {
        current: '夜班',
        startTime: '18:00',
        endTime: '06:00',
        nextGuard: '李保安'
      },
      emergencyContacts: [
        {
          id: 1,
          name: '保卫处值班室',
          number: '110',
          type: 'security'
        },
        {
          id: 2,
          name: '校医院急诊',
          number: '120',
          type: 'medical'
        },
        {
          id: 3,
          name: '消防中心',
          number: '119',
          type: 'fire'
        }
      ]
    }
  },
  computed: {
    filteredLogs() {
      if (this.logFilter === 'all') {
        return this.activityLogs
      }
      return this.activityLogs.filter(log => log.type === this.logFilter)
    }
  },
  onLoad() {
    this.loadSecurityData()
    this.startRealTimeUpdates()
  },
  onUnload() {
    this.stopRealTimeUpdates()
  },
  methods: {
    loadSecurityData() {
      this.loadMonitoringData()
      this.loadVisitorData()
      this.loadActivityLogs()
    },
    loadMonitoringData() {
      uni.request({
        url: '/api/v1/security/monitoring',
        success: (res) => {
          this.monitoringData = res.data
        }
      })
    },
    loadVisitorData() {
      uni.request({
        url: '/api/v1/security/visitors',
        success: (res) => {
          this.visitorData = res.data.stats
          this.recentVisitors = res.data.recent
        }
      })
    },
    loadActivityLogs() {
      uni.request({
        url: '/api/v1/security/activity-logs',
        success: (res) => {
          this.activityLogs = res.data
        }
      })
    },
    startRealTimeUpdates() {
      this.updateInterval = setInterval(() => {
        this.loadMonitoringData()
        this.loadActivityLogs()
      }, 5000) // 每5秒更新一次
    },
    stopRealTimeUpdates() {
      if (this.updateInterval) {
        clearInterval(this.updateInterval)
      }
    },
    getStatusText(status) {
      const statusMap = {
        'on-duty': '值班中',
        'off-duty': '下班',
        'break': '休息中'
      }
      return statusMap[status] || '未知'
    },
    // 紧急功能处理
    handleEmergencyLock() {
      uni.showModal({
        title: '紧急封锁',
        content: '确认要进行全校紧急封锁吗？此操作将关闭所有门禁。',
        confirmText: '确认封锁',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            this.executeEmergencyLock()
          }
        }
      })
    },
    executeEmergencyLock() {
      uni.showLoading({ title: '执行紧急封锁...' })
      
      uni.request({
        url: '/api/v1/security/emergency-lock',
        method: 'POST',
        success: () => {
          uni.hideLoading()
          uni.showToast({
            title: '紧急封锁已激活',
            icon: 'success'
          })
          this.loadMonitoringData()
        },
        fail: () => {
          uni.hideLoading()
          uni.showToast({
            title: '操作失败',
            icon: 'none'
          })
        }
      })
    },
    handleEmergencyUnlock() {
      uni.showModal({
        title: '紧急开启',
        content: '确认要进行紧急开启所有门禁吗？',
        confirmText: '确认开启',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            this.executeEmergencyUnlock()
          }
        }
      })
    },
    executeEmergencyUnlock() {
      uni.showLoading({ title: '执行紧急开启...' })
      
      uni.request({
        url: '/api/v1/security/emergency-unlock',
        method: 'POST',
        success: () => {
          uni.hideLoading()
          uni.showToast({
            title: '紧急开启已激活',
            icon: 'success'
          })
          this.loadMonitoringData()
        }
      })
    },
    handleFireAlarm() {
      uni.navigateTo({
        url: '/pages/mall/nfc/security/fire-alarm'
      })
    },
    handleEmergencyCall() {
      uni.navigateTo({
        url: '/pages/mall/nfc/security/emergency-call'
      })
    },
    // 访客管理
    addNewVisitor() {
      uni.navigateTo({
        url: '/pages/mall/nfc/security/visitor-registration'
      })
    },
    checkoutVisitor(visitor) {
      uni.showModal({
        title: '访客离校',
        content: `确认${visitor.name}离校？`,
        success: (res) => {
          if (res.confirm) {
            uni.request({
              url: `/api/v1/security/visitors/${visitor.id}/checkout`,
              method: 'POST',
              success: () => {
                uni.showToast({
                  title: '离校登记成功',
                  icon: 'success'
                })
                this.loadVisitorData()
              }
            })
          }
        }
      })
    },
    getVisitorStatusText(status) {
      const statusMap = {
        'inside': '在校',
        'left': '已离校',
        'pending': '待审批'
      }
      return statusMap[status] || '未知'
    },
    // 日志过滤
    setLogFilter(filter) {
      this.logFilter = filter
    },
    // 快速功能导航
    goToAccessControl() {
      uni.navigateTo({ url: '/pages/mall/nfc/security/access-control' })
    },
    goToVideoMonitoring() {
      uni.navigateTo({ url: '/pages/mall/nfc/security/video-monitoring' })
    },
    goToPatrolRoutes() {
      uni.navigateTo({ url: '/pages/mall/nfc/security/patrol-routes' })
    },
    goToIncidentReport() {
      uni.navigateTo({ url: '/pages/mall/nfc/security/incident-report' })
    },
    // 班次管理
    initiateShiftHandover() {
      uni.navigateTo({
        url: '/pages/mall/nfc/security/shift-handover'
      })
    },
    // 紧急联系
    callContact(contact) {
      uni.makePhoneCall({
        phoneNumber: contact.number,
        success: () => {
          // 记录通话日志
          uni.request({
            url: '/api/v1/security/call-log',
            method: 'POST',
            data: {
              contactId: contact.id,
              time: new Date()
            }
          })
        }
      })
    },
    getContactIcon(type) {
      const icons = {
        security: '/static/icons/security-contact.png',
        medical: '/static/icons/medical-contact.png',
        fire: '/static/icons/fire-contact.png'
      }
      return icons[type] || icons.security
    },
    // 时间格式化
    formatTime(time) {
      return time.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit'
      })
    },
    formatLogTime(time) {
      return time.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    }
  }
}
</script>

<style>
.security-dashboard {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.security-header {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.guard-info {
  display: flex;
  align-items: center;
}

.guard-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.position, .shift {
  color: rgba(255, 255, 255, 0.8);
  font-size: 24rpx;
  margin-bottom: 4rpx;
}

.status-indicator {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12rpx;
  padding: 16rpx;
}

.status-indicator.on-duty {
  background: rgba(40, 167, 69, 0.2);
}

.status-text {
  color: white;
  font-size: 24rpx;
  font-weight: bold;
}

.monitoring-panel, .emergency-functions, .visitor-management,
.activity-log, .quick-functions, .shift-info, .emergency-contacts {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.monitoring-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.monitor-card {
  padding: 30rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  text-align: center;
}

.monitor-card.alert {
  border-color: #dc3545;
  background: #fff5f5;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.card-title {
  font-size: 24rpx;
  color: #666;
}

.status-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 8rpx;
}

.status-dot.active {
  background: #28a745;
}

.status-dot.normal {
  background: #17a2b8;
}

.status-dot.warning {
  background: #ffc107;
}

.card-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #dc3545;
  margin-bottom: 8rpx;
  display: block;
}

.card-label {
  font-size: 24rpx;
  color: #666;
}

.emergency-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.emergency-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 20rpx;
  border-radius: 12rpx;
  border: 2rpx solid;
  transition: all 0.3s ease;
}

.emergency-lock {
  border-color: #dc3545;
  background: #fff5f5;
}

.emergency-unlock {
  border-color: #28a745;
  background: #f8fff8;
}

.fire-alarm {
  border-color: #fd7e14;
  background: #fff8f0;
}

.emergency-call {
  border-color: #6f42c1;
  background: #f8f7ff;
}

.emergency-icon {
  width: 64rpx;
  height: 64rpx;
  margin-bottom: 16rpx;
}

.emergency-text {
  font-size: 28rpx;
  font-weight: bold;
  text-align: center;
}

.add-visitor-btn {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 12rpx 20rpx;
  font-size: 24rpx;
}

.visitor-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #dc3545;
  margin-bottom: 8rpx;
  display: block;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

.visitor-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.visitor-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
}

.visitor-photo {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  margin-right: 20rpx;
}

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

.visitor-name {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.visitor-purpose, .visitor-time {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 4rpx;
}

.visitor-status {
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  margin-right: 20rpx;
}

.visitor-status.inside {
  background: #d4edda;
  color: #155724;
}

.visitor-status.left {
  background: #d1ecf1;
  color: #0c5460;
}

.action-btn {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 12rpx;
  font-size: 20rpx;
}

.log-filter {
  display: flex;
  gap: 20rpx;
}

.filter-item {
  font-size: 24rpx;
  color: #666;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  cursor: pointer;
}

.filter-item.active {
  background: #dc3545;
  color: white;
}

.log-scroll {
  height: 600rpx;
}

.log-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx;
  margin-bottom: 16rpx;
  border-radius: 12rpx;
  border-left: 6rpx solid;
}

.log-item.access {
  border-left-color: #28a745;
  background: #f8fff8;
}

.log-item.alert {
  border-left-color: #dc3545;
  background: #fff5f5;
}

.log-time {
  font-size: 20rpx;
  color: #666;
  min-width: 120rpx;
  margin-right: 20rpx;
}

.log-content {
  flex: 1;
}

.log-location {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.log-description {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.log-details {
  font-size: 20rpx;
  color: #999;
}

.log-status {
  width: 20rpx;
  height: 20rpx;
  border-radius: 10rpx;
  margin-left: 20rpx;
}

.log-status.success .status-indicator {
  background: #28a745;
}

.log-status.warning .status-indicator {
  background: #ffc107;
}

.function-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
}

.function-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 16rpx;
}

.function-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

.shift-details {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.shift-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.shift-item:last-child {
  border-bottom: none;
}

.shift-label {
  font-size: 24rpx;
  color: #666;
}

.shift-value {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.shift-handover-btn {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  width: 100%;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
}

.contact-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-icon.security {
  background: #fff5f5;
}

.contact-icon.medical {
  background: #f0f8ff;
}

.contact-icon.fire {
  background: #fff8f0;
}

.contact-icon image {
  width: 24rpx;
  height: 24rpx;
}

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

.contact-name {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.contact-number {
  font-size: 24rpx;
  color: #666;
}

.call-btn {
  width: 48rpx;
  height: 48rpx;
  background: #dc3545;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.call-btn image {
  width: 24rpx;
  height: 24rpx;
}
</style>
