<template>
|
<div class="home-left-index">
|
<!--时间 天气-->
|
<div class="time-weather">
|
<div class="time">2025.03.04 15:30:00</div>
|
<div class="line"></div>
|
<div class="weather">
|
<img src="@/assets/images/tq.png" alt="">
|
<span class="tq">阴天</span>
|
<span class="qk">适合飞行</span>
|
</div>
|
</div>
|
<!--机巢概况-->
|
<div class="overview-nest">
|
<common-title></common-title>
|
<div class="overview-warp">
|
<div></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { hToV, wToR } from '@/utils/pxConver';
|
import CommonTitle from '@/components/CommonTitle.vue';
|
|
|
</script>
|
|
<style scoped lang="scss">
|
.home-left-index {
|
position: absolute;
|
|
top: 88px;
|
// left: 45px;
|
// width: 390px;
|
color: #E7F5FF;
|
|
.time-weather {
|
margin-left: 45px;
|
width: 260px;
|
font-size: 14px;
|
height: hToV(36);
|
line-height: hToV(36);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.line {
|
border: 1px solid #FFFFFF;
|
height: hToV(10);
|
opacity: 0.5;
|
}
|
.weather {
|
img {
|
width: 20px;
|
height: hToV(20);
|
}
|
.tq {
|
margin: 0 5px;
|
color: #E7F5FF;
|
}
|
.qk {
|
margin-left: 5px;
|
color: #04F043;
|
}
|
}
|
}
|
.overview-nest {
|
.overview-warp {
|
border: 1px solid #04F043;
|
margin-left: 29px;
|
padding: 16px;
|
width: 390px;
|
height: hToV(415);
|
background: linear-gradient( 90deg, rgba(31,62,122,0) 0%, rgba(31,62,122,0.35) 21%, #1F3E7A 100%);
|
border-radius: 0px 0px 0px 0px;
|
opacity: 0.85;
|
}
|
}
|
}
|
</style>
|
