JT-CIM-ZHNY/src/views/test/components/WeatherWatch.vue

<script setup>
	
</script>

<template>
	<div class="main">
		<div class="wendu">
			<div class="number"> 20℃</div>
			<div class="title">空气温度</div>
		</div>
		<div class="shidu">
			<div class="number">10%RH</div>
			<div class="title">空气湿度</div>
		</div>
		<div class="fengli">
			<div class="number">2级</div>
			<div class="title">风力</div>
		</div>
		<div class="fengsu">
			<div class="number">3m/s</div>
			<div class="title">风速</div>
		</div>
		<div class="fengxiang">
			<div class="number">东北风</div>
			<div class="title">风向</div>
		</div>
		<div class="CO2">
			<div class="number">15ppm</div>
			<div class="title">二氧化碳</div>
		</div>
		<div class="daqiya">
			<div class="number">10Kpa</div>
			<div class="title">大气压</div>
		</div>
		<div class="guangzhao">
			<div class="number">400Lux</div>
			<div class="title">光照</div>
		</div>
		<div class="ziwaixian">
			<div class="number">3级</div>
			<div class="title">紫外线</div>
		</div>
		<div class="fushe">
			<div class="number">5W/㎡</div>
			<div class="title">太阳总辐射</div>
		</div>
	</div>
</template>

<script>
	let jt3d = undefined;
	export default {
		data() {
			return {
				// viewersName: '', //视角标签名称
				// ImgurlList: [], //截图地址列表
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	@charset "UTF-8";
	
	@font-face {
		font-family: "TTTGB-Medium";
		src: url("@/assets/fonts/fonts/TTTGB-Medium.ttf") format("truetype"),
			url("@/assets/fonts/fonts/TTTGB-Medium.eot") format("embedded-opentype"),
			url("@/assets/fonts/fonts/TTTGB-Medium.svg") format("svg");
		font-weight: normal;
		font-style: normal;
	}
	.number{
		color: rgba(29,191,205,1);
		font-weight: 600;
		margin-top: 5rem;
		width: 80rem;
		margin-left: 50rem;
		text-align: center;
		font-family: "TTTGB-Medium", sans-serif !important;
		font-size: 16rem;
	}
	.title{
		font-size: 13rem;
		text-shadow: 0 0 2rem 2rem rgba(29,191,205,0.8);
		margin-top: 3rem;
		color: rgba(245,245,245,1);
		margin-left: 38rem;
	}
	
	.main{
		width:100%;
		height:100%;
		display:flex;
		margin-top: 10rem;
		flex:2;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		.wendu{
			background:url('@/assets/images/qixiang/wendu.png') no-repeat;
			background-size:100% 100%;
			width: 140rem;
			height: 52rem;
		}
		.shidu{
			background:url('@/assets/images/qixiang/shidu.png') no-repeat;
			background-size:100% 100%;
			width: 140rem;
			margin-top: 5rem;
			height: 52rem;
		}
		.fengli{
			background:url('@/assets/images/qixiang/cloud.png') no-repeat;
			background-size:100% 100%;
			width: 140rem;
			margin-top: 5rem;
			height: 52rem;
		}
		.fengsu{
			background:url('@/assets/images/qixiang/cloundspeed.png') no-repeat;
			background-size:100% 100%;
			width: 140rem;
			height: 52rem;
		}
		.fengxiang{
			background:url('@/assets/images/qixiang/cloudstreet.png') no-repeat;
			background-size:100% 100%;
			width: 140rem;
			margin-top: 5rem;
			height: 52rem;
		}
		.CO2{
			background:url('@/assets/images/qixiang/co2.png') no-repeat;
			background-size:100% 100%;
			width: 140rem;
			margin-top: 5rem;
			height: 52rem;
		}
		.daqiya{
			background:url('@/assets/images/qixiang/kpa.png') no-repeat;
			background-size:100% 100%;
			width: 140rem;
			margin-top: 5rem;
			height: 52rem;
		}
		.guangzhao{
			background:url('@/assets/images/qixiang/run.png') no-repeat;
			background-size:100% 100%;
			width: 140rem;
			margin-top: 5rem;
			height: 52rem;
		}
		.ziwaixian{
			background:url('@/assets/images/qixiang/ziwaixian.png') no-repeat;
			background-size:100% 100%;
			width: 140rem;
			margin-top: 5rem;
			height: 52rem;
		}
		.fushe{
			background:url('@/assets/images/qixiang/fushe.png') no-repeat;
			background-size:100% 100%;
			width: 140rem;
			margin-top: 5rem;
			height: 52rem;
		}
	}
</style>