movecheck/src/styles/common.scss

// 全局页面通用样式 - 后台管理系统风格
// 统一的页面容器样式
.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: #f5f6fa;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

// 统一的页面头部样式
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  margin: 0;
  min-height: 88rpx;
  height: 88rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #e8eaed;
  box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  width: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 45%;
}

.page-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.3rpx;
}

.header-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 50%;
  min-width: 0;
}

// 统一的系统标题样式
.system-title {
  display: flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
}

.system-title-icon {
  width: 28rpx;
  height: 28rpx;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
}

.system-title-icon .icon {
  font-size: 16rpx;
  color: #5f6368;
}

.system-title-text {
  font-size: 24rpx;
  font-weight: 500;
  color: #3c4043;
  letter-spacing: 0.3rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280rpx;
}

// 统一的页面内容区域样式
.page-content {
  flex: 1;
  padding: 24rpx 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

// 统一的卡片容器样式
.content-card {
  background-color: #ffffff;
  border-radius: 8rpx;
  box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid #e8eaed;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

// 统一的表格样式
.common-table {
  flex: 1;
  background-color: #ffffff;
  border-radius: 8rpx;
  box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid #e8eaed;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.table-header {
  display: flex;
  background: #f8f9fa;
  color: #3c4043;
  border-bottom: 1rpx solid #e8eaed;
}

.header-cell {
  font-weight: 500;
  font-size: 26rpx;
  padding: 20rpx 16rpx;
  text-align: center;
  letter-spacing: 0.2rpx;
}

.table-body {
  flex: 1;
  overflow-y: auto;
  /* 滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: #dadce0 #f1f3f4;
}

/* Webkit浏览器滚动条样式 */
.table-body::-webkit-scrollbar {
  width: 6rpx;
}

.table-body::-webkit-scrollbar-track {
  background: #f1f3f4;
  border-radius: 3rpx;
}

.table-body::-webkit-scrollbar-thumb {
  background: #dadce0;
  border-radius: 3rpx;
}

.table-body::-webkit-scrollbar-thumb:hover {
  background: #bdc1c6;
}

.table-row {
  display: flex;
  border-bottom: 1rpx solid #e8eaed;
  transition: background-color 0.2s ease;
}

.table-row.even-row {
  background-color: #f8f9fa;
}

.table-row:hover {
  background-color: #f1f3f4;
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  padding: 16rpx 16rpx;
  font-size: 24rpx;
  color: #3c4043;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80rpx;
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-all;
}

// 统一的加载状态样式
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx;
  gap: 20rpx;
}

.loading-spinner {
  width: 48rpx;
  height: 48rpx;
  border: 3rpx solid #e8eaed;
  border-top: 3rpx solid #5f6368;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 24rpx;
  color: #5f6368;
  font-weight: 400;
}

// 统一的空状态样式
.empty-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80rpx;
  gap: 16rpx;
}

.empty-text {
  font-size: 26rpx;
  color: #9aa0a6;
  font-weight: 400;
}

// 统一的按钮样式
.common-button {
  padding: 16rpx 32rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.primary-button {
  background: #1a73e8;
  color: #ffffff;
  border: 1rpx solid #1a73e8;
}

.primary-button:hover {
  background-color: #1557b0;
  border-color: #1557b0;
}

.secondary-button {
  background-color: #ffffff;
  color: #5f6368;
  border: 1rpx solid #dadce0;
}

.secondary-button:hover {
  background-color: #f8f9fa;
  border-color: #bdc1c6;
}

// 统一的输入框样式
.common-input {
  padding: 16rpx 20rpx;
  border: 1rpx solid #dadce0;
  border-radius: 6rpx;
  font-size: 24rpx;
  color: #3c4043;
  background-color: #fff;
  transition: border-color 0.2s ease;
}

.common-input:focus {
  border-color: #1a73e8;
  outline: none;
}

// 统一的模态框样式
.common-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8rpx;
  padding: 32rpx;
  margin: 32rpx;
  max-width: 600rpx;
  max-height: 80%;
  overflow-y: auto;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
}

// 响应式设计 - 平板设备适配
@media (min-width: 768px) and (max-width: 1024px) {
  .page-header {
    padding: 28rpx 32rpx;
    min-height: 100rpx;
    height: 100rpx;
  }
  
  .page-title {
    font-size: 30rpx;
  }
  
  .system-title-text {
    font-size: 26rpx;
  }
  
  .page-content {
    padding: 28rpx 0;
  }
  
  .header-cell {
    font-size: 28rpx;
    padding: 24rpx 20rpx;
  }
  
  .table-cell {
    font-size: 26rpx;
    padding: 20rpx 16rpx;
  }
}

// 响应式设计 - 手机设备适配
@media (max-width: 750rpx) {
  .page-header {
    padding: 20rpx 24rpx;
    min-height: 80rpx;
    height: 80rpx;
  }
  
  .page-title {
    font-size: 24rpx;
  }
  
  .system-title-text {
    font-size: 22rpx;
  }
  
  .page-content {
    padding: 20rpx 0;
  }
  
  .header-cell {
    font-size: 22rpx;
    padding: 16rpx 12rpx;
  }
  
  .table-cell {
    font-size: 20rpx;
    padding: 12rpx 8rpx;
  }
  
  // 环境参数页面响应式
  .content-wrapper {
    margin: 0 20rpx !important;
  }
  
  // 视觉监控页面响应式
  .camera-container {
    margin: 0 20rpx !important;
  }
}

// 响应式设计 - 大屏设备适配
@media (min-width: 1200px) {
  .page-header {
    padding: 32rpx 40rpx;
    min-height: 120rpx;
    height: 120rpx;
  }
  
  .page-title {
    font-size: 32rpx;
  }
  
  .system-title-text {
    font-size: 28rpx;
  }
  
  .page-content {
    padding: 32rpx 0;
  }
  
  .header-cell {
    font-size: 30rpx;
    padding: 28rpx 24rpx;
  }
  
  .table-cell {
    font-size: 28rpx;
    padding: 24rpx 20rpx;
  }
}