s202226701010/src/app/tab3/tab3.page.scss

.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-background.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;
}
.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;
}