no message

src/views/test/components/WeatherWatch.vue

@@ -1,8 +1,172 @@
+<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>
-</style>
+<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>

src/views/test/test.vue

@@ -1,4 +1,5 @@
 <script setup>
+	import WeatherWatch from './components/WeatherWatch.vue'
 </script>
 
 <template>
@@ -15,7 +16,7 @@
 	</jt-popup2>
 	
 	<jt-popup3  title="气象监测">
-		<weatherwatch></weatherwatch>
+		<WeatherWatch></WeatherWatch>
 	</jt-popup3>
 	
 	<jt-popup3  title="" top="calc(calc(100% - 115rem) / 3 + 90rem)">