.header-title {
  font-family: "FangSong", serif; /* 使用仿宋体 */
  font-weight: bold; /* 加粗 */
  text-align: center; /* 居中 */
}
.image-container {
position: relative;
width: 430px;
height: 430px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
overflow: hidden;
margin-top: 0px;
background: url('/assets/images/recognition-background1.png') no-repeat center/cover;
transition: all 0.5s ease-in-out; /* 添加过渡动画 */
}
.image-container.destroyed {
  position: relative;
  width: 430px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 0px;
  background: url('/assets/images/recognition-background2.png') no-repeat center/cover; /* 切换后的背景 */

}
.background-frame {
position: relative;
width: 87%; /* 内容框宽度 */
height: 93%; /* 内容框高度 */
background: rgb(196, 191, 191 ,0.8); /* 半透明灰色背景 */
border-radius: 10px; /* 圆角与外框一致 */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden; /* 确保内容不会溢出 */
}
.placeholder-text {
color: white;
font-size: 16px;
text-align: center;
}
.image {
width: 100%; /* 图片自适应内容框 */
height: 100%;
object-fit: cover; /* 确保图片完整覆盖框 */
border-radius: 10px; /* 圆角与框一致 */
}
video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.toggle-button {
position: absolute;
top: 20px;
right: 40px;
z-index: 10;
color: black;
}
.toggle-roll-button {
  --background: none;
  position: absolute; 
  bottom: -25px; 
  left: 50%; 
  transform: translateX(-50%); 
  z-index: 10; 
  background-color: rgba(255, 255, 255, 0.8);
  border-top-left-radius: 20px; 
  border-top-right-radius: 20px; 
  border-bottom-left-radius: 0px; 
  border-bottom-right-radius: 0px; 
  width: 200px; 
  height: 20px; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.1); 
}
.toggle-roll-button ion-icon {
  font-size: 20px; /* 设置图标大小 */
  color: gray;
  margin-bottom: 0px;
}
.button-group {
display: flex;
flex-direction: column; /* 垂直排列 */
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中 */
height: 100vh; /* 页面高度，按钮垂直居中 */
}
.upload-container {
display: flex;
justify-content: space-between; /* 按钮之间均匀分布 */
width: 100%; /* 按钮组整体宽度占页面100% */
margin-bottom: 10px; /* 按钮组之间的间距 */
margin-top: 10px;
margin-right: 10px;
}
.camera-container {
display: flex;
justify-content: space-between; /* 按钮之间均匀分布 */
width: 100%; /* 按钮组整体宽度占页面80% */
margin-bottom: 10px; /* 按钮组之间的间距 */
margin-top: 10px;
margin-right: 10px;
}
.primary-button {
--background: none;
flex: 0 0 42.5%;
height: 48px;
font-size: 16px;
font-family: "FangSong", serif; /* 使用仿宋体 */
font-weight: bold; /* 加粗 */
text-align: center;
border-radius: 10px;
color: black;
background: url('/assets/images/button-background1.png') no-repeat center/cover;
margin-left: 15px;
margin-right: 15px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px; /* 阴影效果 */
}
.secondary-button {
--background: none;
flex: 0 0 42.5%;;
height: 48px;
font-size: 16px;
font-family: "FangSong", serif; /* 使用仿宋体 */
font-weight: bold; /* 加粗 */
text-align: center;
border-radius: 10px;
color: black;
background: url('/assets/images/button-background1.png') no-repeat center/cover;
margin-left: 15px;
margin-right: 15px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px; /* 阴影效果 */
}
.divider {
border: none; /* 去掉默认边框 */
height: 40px; /* 分割线高度 */
width: calc 100%; /* 总宽度减去左右空出20px */
margin: 16px auto; /* 自动居中 */
background: url('/assets/images/divider.png') repeat-x center; /* 设置图片作为分割线 */
background-size: contain; /* 确保图片在水平方向完整显示 */
}
.table-container {
width: 90%;
margin: 16px auto;
max-height: 500px; /* 限制表格高度 */
overflow-y: auto; /* 添加垂直滚动条 */
border: 1px solid #ccc; /* 添加边框方便视觉分割 */
border-radius: 10px; /* 圆角 */
background: url('/assets/images/table-background.png') no-repeat center/cover;
}
table {
width: 100%;
border-collapse: collapse;
font-family: "FangSong", serif; /* 使用仿宋体 */
font-weight: bold; /* 加粗 */
text-align: center; /* 居中 */
}
thead {
position: sticky; /* 表头固定 */
top: 0;
background-color: #f4f4f4;
z-index: 1;
}
th,
td {
padding: 12px;
border: 1px solid #ccc;
}
th {
font-weight: bold;
}
tbody tr:hover {
background-color: #f9f9f9;
}