MoreStrive
317 lines
8.9 KiB
Vue
317 lines
8.9 KiB
Vue
<script setup lang="ts">
|
|
// import axios from "axios";
|
|
// async function getAllWeatherCity() {
|
|
// try {
|
|
// const res = await axios.get();
|
|
// console.log('res',res)
|
|
// } catch (err) {
|
|
// }
|
|
// }
|
|
// onBeforeMount(async()=>{
|
|
// await getAllWeatherCity()
|
|
// })
|
|
</script>
|
|
<template>
|
|
<div class="box-info-weather flexbox" id="overview">
|
|
<div class="box-info-weather__left">
|
|
<span class="weather-day-current">Hiện tại</span>
|
|
|
|
<div class="weather-day">
|
|
<img data-v-b1c9218b="" src="https://cdn.weatherapi.com/weather/64x64/day/116.png" alt="Weather Icon">
|
|
<div class="big-temp">28°</div>
|
|
<div class="name">Mưa nhẹ</div>
|
|
</div>
|
|
<div class="color-gray-2">
|
|
<p>Cao: 28° Thấp: 24°</p>
|
|
<div>
|
|
<span>Không khí:</span>
|
|
<div class="weather-tooltip">
|
|
<span class="weather-tooltip-group">
|
|
<span class="quality-2">Trung bình</span>
|
|
<Icon class="ic ic-help" name="material-symbols:help-outline"></Icon>
|
|
</span>
|
|
<div class="box-info-hover" data-left="-71px">
|
|
<div class="title">
|
|
<span class="header_tooltip">
|
|
<Icon class="ic ic-help" name="material-symbols-light:airware"></Icon>
|
|
<span>Chất lượng không khí</span>
|
|
</span>
|
|
</div>
|
|
<div class="grid grid__2 chat-luong mb15">
|
|
<div class="quality-2">
|
|
<div class="lbl">Trung bình</div>
|
|
</div>
|
|
<div class="quality-2">
|
|
<p>
|
|
Nồng độ bụi mịn<br />
|
|
<span class="lbl">PM2.5: 30.42</span> <br />(μg/m3)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p>Chất lượng không khí có thể chấp nhận được, tuy nhiên một số người nhạy cảm vẫn nên lưu ý.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box-info-weather__right text-right color-gray-2">
|
|
<div class="weather-tooltip mb40">
|
|
<span class="weather-tooltip-group">
|
|
<span>Cảm giác như 33° </span>
|
|
<Icon class="ic ic-help" name="material-symbols:help-outline"></Icon>
|
|
</span>
|
|
<div class="box-info-hover">
|
|
<div class="title">
|
|
<span class="header_tooltip">
|
|
<Icon class="ic ic-help" name="fxemoji:thermometer"></Icon>
|
|
<span>Nhiệt độ cảm nhận</span>
|
|
</span>
|
|
</div>
|
|
<div class="scroll-height">
|
|
<p>Nhiệt độ cảm nhận (heat index) là nhiệt độ cơ thể con người cảm thấy trong thực tế, được tính dựa trên dữ liệu nhiệt độ kết hợp với độ ẩm.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p>Độ ẩm: 86%</p>
|
|
|
|
<div>
|
|
<span>UV: </span>
|
|
<div class="weather-tooltip">
|
|
<span class="weather-tooltip-group">
|
|
<span> 5 / 11 </span>
|
|
<Icon class="ic ic-help" name="material-symbols:help-outline"></Icon>
|
|
</span>
|
|
|
|
<div class="box-info-hover">
|
|
<div class="title">
|
|
<span class="header_tooltip">
|
|
<Icon name="material-symbols:sunny-outline"></Icon>
|
|
<span>Chỉ số UV</span>
|
|
</span>
|
|
</div>
|
|
<div class="scroll-height">
|
|
<ul class="chi-so">
|
|
<li class="item quality-1">
|
|
<div class="lbl d-flex justify-content-between">
|
|
<div>1 → 2</div>
|
|
<div>Thấp</div>
|
|
</div>
|
|
</li>
|
|
<li class="item quality-2">
|
|
<div class="lbl d-flex justify-content-between">
|
|
<div>3 → 5</div>
|
|
<div>Trung bình</div>
|
|
</div>
|
|
</li>
|
|
<li class="item quality-3">
|
|
<div class="lbl d-flex justify-content-between">
|
|
<div>6 → 7</div>
|
|
<div>Cao</div>
|
|
</div>
|
|
</li>
|
|
<li class="item quality-4">
|
|
<div class="lbl d-flex justify-content-between">
|
|
<div>8 → 10</div>
|
|
<div>Rất cao</div>
|
|
</div>
|
|
</li>
|
|
<li class="item quality-5">
|
|
<div class="lbl d-flex justify-content-between">
|
|
<div>11+</div>
|
|
<div>Cực điểm</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
Theo Cơ quan Bảo vệ Môi trường Mỹ (EPA), chỉ số UV dao động 0-2 được xem là thấp, chỉ số 8-10 có thời gian tiếp xúc gây bỏng là 25 phút. Chỉ số UV từ 11 trở lên được xem là cực kỳ cao, rất nguy hiểm, nguy cơ làm tổn thương
|
|
da, mắt bị bỏng nếu tiếp xúc ánh nắng mặt trời trong khoảng 15 phút mà không được bảo vệ.
|
|
</p>
|
|
<p>
|
|
Tiếp xúc quá mức với ánh sáng mặt trời trong thời gian ngắn sẽ gây bỏng nắng, tổn thương mắt như đục thủy tinh thể, da bị bỏng, khô, sạm, tạo nếp nhăn, lão hóa nhanh. Tiếp xúc tia UV lâu dài, tích lũy có thể gây ung thư da.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.box-info-weather {
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
margin-bottom: 24px;
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
min-height: 240px;
|
|
&.flexbox {
|
|
align-items: end;
|
|
display: flex;
|
|
}
|
|
&__left {
|
|
width: 50%;
|
|
.weather-day {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 19px;
|
|
.ic-weather {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
.big-temp {
|
|
font: 400 48px "Merriweather", serif;
|
|
font-feature-settings: "pnum" on, "lnum" on;
|
|
}
|
|
.name {
|
|
width: 100%;
|
|
font: 400 20px "Merriweather", serif;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
.color-gray-2 {
|
|
color: #757575;
|
|
}
|
|
span.weather-day-current {
|
|
color: #9f9f9f;
|
|
font-size: 16px;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 10px;
|
|
display: block;
|
|
}
|
|
}
|
|
&__right {
|
|
width: 50%;
|
|
}
|
|
}
|
|
.ic {
|
|
fill: #757575;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.ic-help {
|
|
vertical-align: text-bottom;
|
|
}
|
|
.mb40 {
|
|
margin-bottom: 15px;
|
|
}
|
|
.weather-tooltip {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
position: relative;
|
|
padding-bottom: 15px;
|
|
margin-bottom: -15px;
|
|
display: inline-block;
|
|
.quality-2 {
|
|
color: #c6990c;
|
|
}
|
|
&:hover .box-info-hover {
|
|
top: 30px;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
.box-info-hover {
|
|
font-family: Arial;
|
|
line-height: 1.5;
|
|
white-space: normal;
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 0;
|
|
z-index: 2;
|
|
padding: 16px;
|
|
background: #ffffff;
|
|
width: 300px;
|
|
text-align: left;
|
|
border-radius: 8px;
|
|
font-weight: 400;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition-duration: 300ms;
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
|
|
filter: drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.2));
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
margin-bottom: 18px;
|
|
color: #222;
|
|
.header_tooltip {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.lbl {
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
}
|
|
.scroll-height {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
scrollbar-color: #e5e5e5 #fff;
|
|
scrollbar-width: thin;
|
|
.item {
|
|
padding: 12px 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.quality-1 {
|
|
background: rgba(36, 161, 72, 0.1);
|
|
color: #24a148;
|
|
}
|
|
.quality-2 {
|
|
background: rgba(198, 153, 12, 0.1);
|
|
color: #c6990c;
|
|
}
|
|
.quality-3 {
|
|
background: rgba(224, 120, 47, 0.1);
|
|
color: #e0782f;
|
|
}
|
|
.quality-4 {
|
|
background: rgba(220, 78, 85, 0.1);
|
|
color: #dc4e55;
|
|
}
|
|
.quality-5 {
|
|
background: rgba(164, 78, 201, 0.1);
|
|
color: #a44ec9;
|
|
}
|
|
}
|
|
}
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
.mb15 {
|
|
margin-bottom: 15px;
|
|
}
|
|
.grid__2 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
column-gap: 8px;
|
|
row-gap: 8px;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
width: 100%;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
position: relative;
|
|
}
|
|
.chat-luong [class*='quality-'] {
|
|
text-align: center;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
font-size: 12px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 80px;
|
|
background: rgba(198, 153, 12, 0.1);
|
|
color: #C6990C;
|
|
}
|
|
</style>
|