<template>
	<view class="top-bg-content" :style="{marginTop: marginContentTop + 'px'}">
		<view class="top-item1">
			<view class="top-item1-left">
				<image src="/static/hello_xiaomu_icon@2x.png"></image>
				<text>2025/02/10 多云 -3～6℃</text>						  
			</view>
			<view class="top-item1-right">
				<image src="/static/hello_logo_icon@2x.png" ></image>
			</view>			  			  
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	
	const statusBarHeight = ref(20);
	const marginContentTop = ref(44) 
	
	onLoad(() => {
	  uni.getSystemInfo({
	    success: (res) => {
	      statusBarHeight.value = res.statusBarHeight || 20;
		  marginContentTop.value += statusBarHeight.value;
	    }
	  });
	});
	
</script>

<style lang="scss" scoped>
	.top-bg-content {
		display: flex;
		justify-content: flex-end;
		align-items: stretch;
		flex-direction: column;
	}
	
	.top-item1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0 46px 0 32px;
		
		.top-item1-left {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			
			image {
				width: 118px;
				height: 52px;
			}
			text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 12px;
				color: #1E4C69;
				line-height: 24px;
				text-align: justify;
				font-style: normal;
				text-transform: none;
			}
		}
		
		.top-item1-right {
			image {
				width: 96px;
				height: 96px;
			}
		}
	}
</style>