baozhida-observation-system/unpackage/dist/dev/app-plus/pages/index/home.css

.notice-board[data-v-760d994e] {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #0d54ec;
		/* padding: 20rpx; */
		box-sizing: border-box;
}
.card_logo[data-v-760d994e] {
		position: absolute;
		left: 0.9375rem;
		top: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		cursor: pointer;
}
.card_logo[data-v-760d994e]:focus {
		border: none !important;
}
.board-header[data-v-760d994e] {
		/* padding-top: 10rpx; */
		text-align: center;
		/* margin-bottom: 30rpx; */
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 4.0625rem;
		flex-shrink: 0;
		background-color: #0d54ec;
		box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
}
.card_yellow[data-v-760d994e] {
		display: flex;
		align-items: center;
		justify-content: center;
		width: fit-content;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		padding: 0 1.25rem;
		height: 4.0625rem;
		background-color: #e5cb8d;
		border-bottom-right-radius: 9.375rem;
		border-top-left-radius: 9.375rem;
}
.card_board[data-v-760d994e] {
		display: flex;
		align-items: center;
		justify-content: center;
		width: fit-content;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		padding: 0 4.375rem;
		height: 4.0625rem;
		background-color: #d5f3ff;
		border-bottom-right-radius: 3.75rem;
		border-top-left-radius: 3.75rem;
}
.board-title[data-v-760d994e] {
		font-size: 1.875rem;
		font-weight: bold;
		color: #0e6699;
}
.card_time[data-v-760d994e] {
		position: absolute;
		right: 0.9375rem;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
}
.time_title[data-v-760d994e] {
		font-size: 1.875rem;
		color: #fff;
		font-weight: bold;
		line-height: 1.875rem;
}
.current-time[data-v-760d994e] {
		display: flex;
		align-items: center;
		display: flex;
		font-size: 1.25rem;
		color: #fff;
		font-weight: bold;
		line-height: 1.40625rem;
}
.table-container[data-v-760d994e] {
		flex: 1;
		margin: 0.625rem 0.625rem 0 0.625rem;
		border-radius: 0.75rem;
		overflow: hidden;
		box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
}
.table-header[data-v-760d994e] {
		background-color: #71a0ee;
		color: white;
		font-weight: bold;
}
.table-row[data-v-760d994e] {
		display: flex;
		border-bottom: 0.0625rem solid #dedede;
}
.header-row[data-v-760d994e] {
		/* background-color: #71a0ee; */
		color: white;
		font-weight: bold;
}
.table-cell[data-v-760d994e] {
		padding: 0.75rem 0.5rem;
		font-size: 1.5625rem;
		text-align: center;
		color: #333;
		display: flex;
		justify-content: center;
		align-items: center;
}
.cell[data-v-760d994e] {
		padding: 0.75rem 0.5rem;
		font-size: 1.5625rem;
		text-align: center;
		color: #333;
}
.name[data-v-760d994e] {
		width: 25%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
}
.time[data-v-760d994e] {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
}
.status[data-v-760d994e] {
		width: 25%;
}
.title_color[data-v-760d994e] {
		color: #fff;
}

	/* 特殊状态数据容器 */
.special-status-container[data-v-760d994e] {
		background-color: #fff8e6;
}
.special-row[data-v-760d994e] {
		background-color: #fff8e6 !important;
		min-height: 1.875rem;
		line-height: 1.875rem;
}

	/* 分隔线 */
.divider[data-v-760d994e] {
		height: 0.03125rem;
		background-color: #ddd;
}

	/* 普通数据内容区域 */
.table-body[data-v-760d994e] {
		flex: 1;
		overflow-y: auto;
		/* 添加触摸反馈 */
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
}
.title-observing[data-v-760d994e] {
		color: #007bff;
}
.title-completed[data-v-760d994e] {
		color: #28a745;
}
.title-warning[data-v-760d994e] {
		color: #ff0000;
}
.title-hasleft[data-v-760d994e] {
		color: #fa8c16;
}

	/* 状态行样式 */
.status-observing[data-v-760d994e] {
		background-color: #9dd6ff;
		color: #007bff;
		border: 0.0625rem solid #48a0ff;
}
.status-completed[data-v-760d994e] {
		background-color: #e8f5e8;
		color: #28a745;
		border: 0.0625rem solid #8bc34a;
}
.status-warning[data-v-760d994e] {
		background-color: #ffebee;
		color: #ff0000;
		border: 0.0625rem solid #ef9a9a;
}
.status-hasleft[data-v-760d994e] {
		background-color: #fff2e8;
		color: #fa8c16;
		border: 0.0625rem solid #ffbb96;
}
.item-observing[data-v-760d994e] {
		background-color: #9dd6ff;
}
.item-completed[data-v-760d994e] {
		background-color: #e8f5e8;
}
.item-warning[data-v-760d994e] {
		background-color: #ffebee;
}
.item-hasleft[data-v-760d994e] {
		background-color: #fff2e8;
}

	/* 状态标签样式 - 控制高度不超过40rpx */
.status-tag[data-v-760d994e] {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.25rem 0.625rem;
		border-radius: 1rem;
		font-size: 1.5rem;
		font-weight: 500;
		width: calc(100% - 0.625rem);
}
.empty-tip[data-v-760d994e] {
		text-align: center;
		padding: 2.5rem;
		color: #999;
		font-size: 1.875rem;
		font-style: italic;
}

	/* 底部 */
.card_foot[data-v-760d994e] {
		display: flex;
		align-items: center;
		height: 3.75rem;
		box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}
.card_tips_box[data-v-760d994e] {
		display: flex;
		align-items: center;
		padding-left: 0.46875rem;
}
.title_tips[data-v-760d994e] {
		color: #fff;
		font-size: 1.25rem;
}
.title_tips_foot[data-v-760d994e] {
		color: #fff;
		flex: 1;
		font-size: 1.25rem;
		border-radius: 0.625rem;
		margin-right: 0.625rem;
		background-color: #71a0ee;
		padding: 0.625rem;
}
.box_link_set[data-v-760d994e] {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
}
.box_popup[data-v-760d994e] {
		position: relative;
		background-color: #ffffff;
		border-radius: 0.25rem;
}
.head_popup_title[data-v-760d994e] {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
}
.title_head_popup[data-v-760d994e] {
		font-size: 1.25rem;
		font-weight: 500;
		padding: 0.9375rem 0.9375rem 0 0.9375rem;
}
.close_title[data-v-760d994e] {
		position: absolute;
		right: 0.9375rem;
		font-size: 1.25rem;
		cursor: pointer;
}

	/* // 连接状态栏 */
.status-bar-bottom[data-v-760d994e] {
		display: flex;
		flex-direction: column;
		margin: 0.9375rem;
		padding: 0.75rem 0.9375rem;
		background-color: #ffffff;
		box-shadow: 0 -0.125rem 0.625rem rgba(0, 0, 0, 0.05);
		border-radius: 0.75rem;
		display: flex;
		gap: 0.5rem;
}
.status-text-box[data-v-760d994e] {
		display: flex;
		align-items: center;
		font-size: 0.875rem;
}
.dot[data-v-760d994e] {
		color: #d32f2f;
		font-size: 0.75rem;
}
.dot-connecting[data-v-760d994e] {
		color: #f9ae3d;
}
.dot-connected[data-v-760d994e] {
		color: #28a745;
}
.dot-disconnected[data-v-760d994e] {
		color: #d32f2f;
}
.status-text[data-v-760d994e] {
		color: #555;
}
.status-text[data-v-760d994e] {
		margin-left: 0.5rem;
}
.title_color[data-v-760d994e] {
		color: #fff;
}

	/* // IP 输入区域 */
.ip-input-group[data-v-760d994e] {
		display: flex;
		align-items: center;
		margin-left: 0.5rem;
		flex-wrap: wrap;
		gap: 0.375rem;
}
.ip-label[data-v-760d994e] {
		font-size: 0.875rem;
		color: #555;
}
.ip-input[data-v-760d994e],
	.port-input[data-v-760d994e] {
		border: 0.0625rem solid #ddd;
		border-radius: 0.375rem;
		padding: 0.375rem 0.625rem;
		font-size: 0.875rem;
		width: 6.25rem;
}
.port-input[data-v-760d994e] {
		width: 5rem;
}
.colon[data-v-760d994e] {
		font-size: 1rem;
		color: #666;
		margin: 0 0.25rem;
}
.btn-reconnect[data-v-760d994e] {
		background-color: #007aff;
		color: white;
		font-size: 0.75rem;
		padding: 0 0.5rem;
		border-radius: 0.375rem;
}
.logo_image[data-v-760d994e] {
		width: 2.5rem;
		height: 2.5rem;
}
.logo_title[data-v-760d994e] {
		font-size: 1.5625rem;
		color: #fff;
		font-weight: bold;
		margin-left: 0.46875rem;
}
.tips_imageil[data-v-760d994e] {
		width: 2.1875rem;
		height: 2.1875rem;
}

	/* 响应式优化 */
@media screen and (max-height: 600px) {
.card_logo[data-v-760d994e] {
			left: 0.3125rem;
}
.logo_title[data-v-760d994e] {
			font-size: 0.5625rem;
			margin-left: 0.15625rem;
}
.logo_image[data-v-760d994e] {
			width: 1.09375rem;
			height: 1.09375rem;
}
.table-row[data-v-760d994e] {
			min-height: 1.09375rem;
			line-height: 1.09375rem;
			padding: 0.125rem 0;
}
.table-cell[data-v-760d994e] {
			font-size: 0.6875rem;
			padding: 0.9375rem 0.3125rem;
}
.status-tag[data-v-760d994e] {
			padding: 0.125rem 0.3125rem;
			font-size: 0.5625rem;
			height: 0.6875rem;
			min-width: 2.5rem;
}
.control-btn[data-v-760d994e] {
			height: 1.5625rem;
			line-height: 1.5625rem;
			font-size: 0.6875rem;
}
.board-header[data-v-760d994e] {
			height: 1.5625rem;
}
.card_yellow[data-v-760d994e] {
			height: 1.5625rem;
			padding: 0 0.625rem;
}
.card_board[data-v-760d994e] {
			height: 1.5625rem;
			padding: 0 0.9375rem;
}
.board-title[data-v-760d994e] {
			font-size: 0.625rem;
}
.card_time[data-v-760d994e] {
			right: 0.3125rem;
}
.time_title[data-v-760d994e] {
			font-size: 0.625rem;
			line-height: 0.625rem;
}
.current-time[data-v-760d994e] {
			font-size: 0.46875rem;
			line-height: 0.46875rem;
}
.table-container[data-v-760d994e] {
			margin: 0.3125rem 0.3125rem 0 0.3125rem;
			border-radius: 0.25rem;
}
.table-cell[data-v-760d994e] {
			padding: 0.0625rem 0.15625rem;
			font-size: 0.5625rem;
}
.cell[data-v-760d994e] {
			padding: 0.0625rem 0.15625rem;
			font-size: 0.5625rem;
}
.card_foot[data-v-760d994e] {
			height: 1.5625rem;
}
.title_tips[data-v-760d994e] {
			font-size: 0.46875rem;
}
.title_tips_foot[data-v-760d994e] {
			font-size: 0.46875rem;
			padding: 0.0625rem 0.0625rem 0.0625rem 0.15625rem;
			border-radius: 0.25rem;
			margin-right: 0.3125rem;
}
.tips_imageil[data-v-760d994e] {
			width: 0.9375rem;
			height: 0.9375rem;
}
.card_tips_box[data-v-760d994e] {
			padding-left: 0.3125rem;
}
.empty-tip[data-v-760d994e] {
			padding: 1.25rem;
			font-size: 0.625rem;
}
}


	/* 滚动条样式 */
.table-body[data-v-760d994e]::-webkit-scrollbar {
		width: 0.125rem;
}
.table-body[data-v-760d994e]::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 0.1875rem;
}
.table-body[data-v-760d994e]::-webkit-scrollbar-thumb {
		background: #c1c1c1;
		border-radius: 0.1875rem;
}
.table-body[data-v-760d994e]::-webkit-scrollbar-thumb:hover {
		background: #a8a8a8;
}