OpenDoorManageMini/pages/globalPages/components/equipment.vue

<template>
	<view class="container">
		质检出场
	</view>
</template>

<script setup>
	function onshow(){
		console.log('质检出场')
	}
</script>

<style lang="scss">
	.container {
		.nav-style {
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
		}

		.search {
			padding: 24rpx 24rpx;
			background-color: #fff;
		}

		.total {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			color: #fff;
			background-color: #2C6FF3;
			padding: 40rpx 24rpx ;

			.total-item {
				.num {
					font-weight: bold;
					font-size: 52rpx;
				}

				.name {
					font-size: 26rpx;
				}
			}
		}

		.content {
			padding: 24rpx;
			padding-bottom:calc(124rpx + env(safe-area-inset-bottom) / 2);

			.xy-card {
				margin-bottom: 24rpx;
			}

			.eq-line-title {
				font-size: 32rpx;
				padding-bottom: 24rpx;
				position: relative;

				.arrow-right {
					position: absolute;
					right: 0;
					top: 0;
				}
			}

			.eq-item {
				position: relative;

				&+.eq-item {
					padding-top: 12rpx;
				}

				.eq-content {

					.eq-wrap {
						border-radius: 8rpx;
						background-color: rgb(245, 248, 251);
						box-sizing: border-box;
						padding: 24rpx 12rpx;
						font-size: 26rpx;

						.eq-name {
							font-size: 32rpx;
							font-weight: bold;
							margin-bottom: 24rpx;
							position: relative;
							
							>.eq-title{
								width: 420rpx;
								>text{
									font-size: 30rpx;
									color: #666;
									font-weight: normal;
								}
							}
							
							.eq-status-box{
								float: right;
								position: absolute;
								right:0;
								top:0;
							}

							.eq-status {
								font-size: 28rpx;
								color: #666;
								font-weight: normal;
								margin-left: 12rpx;

								>text {
									display: inline-block;
									background-color: #666;
									width: 16rpx;
									height: 16rpx;
									border-radius: 16rpx;
									margin-right: 12rpx;

								}

								&.online {
									color: #f56c6c;

									>text {
										background-color: green;
									}
								}
							}
						}
					}

					.eqeq-type {
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 28rpx;

						>view:nth-child(1) {
							color: #000;
							width: 200rpx;
						}

						>view:nth-child(2) {
							color: #666;
							padding-left: 6rpx;
						}
					}
					
					.eqeq-type+.eqeq-type{
						margin-top: 16rpx;
					}

					.status {
						width: 130rpx;
						height: 120rpx;
						box-sizing: border-box;
						border-radius: 120rpx;
						// border: 6rpx solid #2C6FF3;
						text-align: center;
						display: flex;
						flex-flow: column;
						justify-content: space-around;
						align-items: center;
						position: absolute;
						right: 12rpx;
						bottom: 24rpx;

						.s-name {
							font-size: 28rpx;
							padding-top: 20rpx;
							font-weight: bold;
						}

						.s-num {
							font-size: 32rpx;
							padding-bottom: 20rpx;
						}
					}
				}
			}

			.more {
				text-align: center;
				font-size: 28rpx;
				color: #2C6FF3;
				line-height: 80rpx;
			}
		}

		.empty {
			margin: 40% auto 0;
		}
	}
</style>