ng-cw-v12
Version:
Angular UI Component Library
134 lines • 121 kB
JavaScript
import { __awaiter } from "tslib";
import { Component, Input } from '@angular/core';
import { trigger, style, animate, transition } from '@angular/animations';
import * as i0 from "@angular/core";
import * as i1 from "./local.service";
import * as i2 from "@angular/common";
import * as i3 from "./horizontal-scroll.directive";
const fadeInOut = trigger('fadeInOut', [
transition(':enter', [
style({ opacity: 0 }),
animate(400, style({ opacity: 1 }))
]),
transition(':leave', [
animate(400, style({ opacity: 0 }))
])
]);
const slideInOut = trigger('slideInOut', [
transition(':enter', [
style({ transform: 'translateY(-100%)' }),
animate(300, style({ transform: 'translateY(0)' }))
]),
transition(':leave', [
animate(300, style({ transform: 'translateY(-100%)' }))
])
]);
export class WeatherComponent {
constructor(ls) {
this.ls = ls;
/** token */
this.ncToken = '';
/** 经度 */
this.ncLng = '';
/** 纬度 */
this.ncLat = '';
/** 刷新频率：分钟 */
this.ncInterval = 30;
/** 详情面板相对于bar的位置 */
this.ncPosition = 'rightBottom';
/** 动画类型：fade：淡入淡出 slide：滑入滑出 default：无动画 */
this.ncAnimation = 'default';
/** 是否显示位置信息 */
this._showLocation = false;
/** 24小时预报 */
this._showHourly = false;
/** 5天预报 */
this._showDaily = false;
/** 生活指数 */
this._showLife = false;
this.detailShow = false;
this.weatherData = {};
this.initialized = false;
}
set ncShowLocation(value) {
this._showLocation = value !== null && value !== undefined && value !== false && value !== 'false';
}
get ncShowLocation() {
return this._showLocation;
}
set ncShowHourly(value) {
this._showHourly = value !== null && value !== undefined && value !== false && value !== 'false';
}
get ncShowHourly() {
return this._showHourly;
}
set ncShowDaily(value) {
this._showDaily = value !== null && value !== undefined && value !== false && value !== 'false';
}
get ncShowDaily() {
return this._showDaily;
}
set ncShowLife(value) {
this._showLife = value !== null && value !== undefined && value !== false && value !== 'false';
}
get ncShowLife() {
return this._showLife;
}
ngOnInit() {
return __awaiter(this, void 0, void 0, function* () {
if (this.ncToken == '') {
console.error('ncToken为空');
return;
}
yield this.getWeatherData();
this.initialized = true;
});
}
ngOnChanges(changes) {
// 组件初始化后且经纬度发生变化时重新获取数据
if (this.initialized && this.ncToken && (changes['ncLng'] || changes['ncLat'])) {
this.getWeatherData();
}
}
ngOnDestroy() {
clearInterval(this.reloadInterval);
}
getWeatherData() {
return __awaiter(this, void 0, void 0, function* () {
if (this.reloadInterval) {
clearInterval(this.reloadInterval);
this.reloadInterval = null;
}
yield this.updateWeatherData();
this.reloadInterval = setInterval(() => __awaiter(this, void 0, void 0, function* () {
yield this.updateWeatherData();
}), this.ncInterval * 60 * 1000);
});
}
updateWeatherData() {
return __awaiter(this, void 0, void 0, function* () {
const options = {
lng: this.ncLng,
lat: this.ncLat
};
let data = yield this.ls.getWeather(this.ncToken, options);
//对温度取整、时间处理
data.realtime.temperature.value = Math.round(data.realtime.temperature.value);
data.realtime.temperature.min = Math.round(data.realtime.temperature.min);
data.realtime.temperature.max = Math.round(data.realtime.temperature.max);
data.serverTime.value = this.ls.formatDate('HH:mm', data.serverTime.value);
for (let h of data.hourly.value) {
h.time = this.ls.formatDate('HH时', h.time);
h.temperature.value = Math.round(h.temperature.value);
}
for (let d of data.daily.value) {
d.date = this.ls.formatDate('MM-dd', d.date);
d.temperature.min = Math.round(d.temperature.min);
d.temperature.max = Math.round(d.temperature.max);
}
this.weatherData = data;
});
}
}
WeatherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: WeatherComponent, deps: [{ token: i1.LocalService }], target: i0.ɵɵFactoryTarget.Component });
WeatherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: WeatherComponent, selector: "nc-weather", inputs: { ncToken: "ncToken", ncLng: "ncLng", ncLat: "ncLat", ncInterval: "ncInterval", ncPosition: "ncPosition", ncAnimation: "ncAnimation", ncShowLocation: "ncShowLocation", ncShowHourly: "ncShowHourly", ncShowDaily: "ncShowDaily", ncShowLife: "ncShowLife" }, usesOnChanges: true, ngImport: i0, template: "<ng-template #detailsTemplate>\r\n <div class=\"nc-space\" *ngIf=\"ncPosition == 'rightBottom' || ncPosition == 'leftBottom'\"></div>\r\n <div class=\"nc-content\">\r\n <!--\u80CC\u666F\u56FE-->\r\n <div class=\"nc-weather-background\" [innerHTML]=\"weatherData.realtime.skycon.bg\"></div>\r\n <!--\u5B9E\u65F6-->\r\n <div class=\"nc-realtime\">\r\n <!--\u7A7A\u6C14\u8D28\u91CF-->\r\n <div class=\"nc-AQI\">\r\n <div class=\"nc-aqi-img\" [ngStyle]=\"{'background-color': weatherData.realtime.air_quality.aqi.color}\">\r\n <img [src]=\"weatherData.realtime.air_quality.aqi.icon\">\r\n </div>\r\n {{weatherData.realtime.air_quality.aqi.value}} {{weatherData.realtime.air_quality.aqi.desc}}\r\n <!--\u5237\u65B0-->\r\n <div class=\"nc-refresh\">\r\n <div>{{weatherData.serverTime.value}}</div>\r\n <svg (click)=\"getWeatherData()\" style=\"filter: url(#shadow);\" t=\"1732158960844\"\r\n class=\"icon nc-refresh-icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\" p-id=\"4261\" width=\"18\" height=\"18\">\r\n <defs>\r\n <filter id=\"shadow\">\r\n <feDropShadow dx=\"1\" dy=\"1\" stdDeviation=\"2\" flood-color=\"rgba(0,0,0,0.5)\" />\r\n </filter>\r\n </defs>\r\n <path\r\n d=\"M512 919.552c-224.768 0-407.552-182.784-407.552-407.552 0-8.704 0.512-17.408 1.024-26.112l71.68 4.608c-0.512 7.168-0.512 14.336-0.512 21.504 0 185.344 150.528 335.872 335.872 335.872 86.528 0 168.448-32.768 230.912-92.16l49.152 52.224c-76.288 72.192-175.616 111.616-280.576 111.616zM919.552 512h-71.68c0-11.776-0.512-23.552-2.048-35.328-17.92-171.52-161.28-300.544-334.336-300.544-67.584 0-132.096 19.968-187.904 57.344L284.16 174.08C351.232 128.512 430.08 104.448 512 104.448c209.408 0 384 156.672 405.504 365.056 1.536 13.824 2.048 28.16 2.048 42.496z\"\r\n p-id=\"4262\" fill=\"#ffffff\"></path>\r\n <path\r\n d=\"M140.288 290.816L28.16 491.52c-3.072 5.12 1.024 11.776 6.656 11.776h223.744c6.144 0 9.728-6.144 6.656-11.776L153.6 290.816c-3.072-5.632-10.752-5.632-13.312 0zM870.4 675.84l-112.128-200.704c-3.072-5.12 1.024-11.776 6.656-11.776h223.744c6.144 0 9.728 6.144 6.656 11.776L883.712 675.84c-2.56 5.12-10.24 5.12-13.312 0z\"\r\n p-id=\"4263\" fill=\"#ffffff\"></path>\r\n <path d=\"M270.336 202.24a35.84 35.84 0 1 0 71.68 0 35.84 35.84 0 1 0-71.68 0Z\" p-id=\"4264\"\r\n fill=\"#ffffff\"></path>\r\n <path d=\"M728.576 784.896a35.84 35.84 0 1 0 71.68 0 35.84 35.84 0 1 0-71.68 0Z\" p-id=\"4265\"\r\n fill=\"#ffffff\"></path>\r\n </svg>\r\n </div>\r\n </div>\r\n <!--\u6E29\u5EA6-->\r\n <div class=\"nc-temperature\">\r\n <div class=\"nc-num\">{{weatherData.realtime.temperature.value}}\u00B0</div>\r\n <div class=\"nc-icon\" [innerHTML]=\"weatherData.realtime.skycon.icon\"></div>\r\n <div class=\"nc-word\">{{weatherData.realtime.skycon.desc}}</div>\r\n </div>\r\n <!--\u5176\u4ED6-->\r\n <div class=\"nc-other\">\r\n <!--\u6E29\u5EA6-->\r\n <div class=\"nc-other-panel\" title=\"\u6E29\u5EA6\">\r\n <svg style=\"filter: url(#shadow);\" t=\"1715578989854\" class=\"icon nc-other-icon\"\r\n viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"5045\" width=\"20\"\r\n height=\"20\">\r\n <defs>\r\n <filter id=\"shadow\">\r\n <feDropShadow dx=\"1\" dy=\"1\" stdDeviation=\"2\" flood-color=\"rgba(0,0,0,0.5)\" />\r\n </filter>\r\n </defs>\r\n <path\r\n d=\"M402.285779 73.142857a110.257143 110.257143 0 0 1 109.714285 109.714286v355.3l27.385715 21.971428a219.414286 219.414286 0 1 1-274.2 0L292.571493 538.157143V182.857143a110.257143 110.257143 0 0 1 109.714286-109.714286m0-73.142857c-100.571429 0-182.857143 82.285714-182.857143 182.857143v320.2A291.971429 291.971429 0 0 0 109.71435 731.428571c0 161.585714 130.985714 292.571429 292.571429 292.571429S694.857207 893.014286 694.857207 731.428571a292.014286 292.014286 0 0 0-109.714286-228.371428V182.857143c0-100.571429-82.285714-182.857143-182.857142-182.857143z m0 0\"\r\n p-id=\"5046\" fill=\"#ffffff\"></path>\r\n <path\r\n d=\"M438.857207 589.757143v-297.142857a36.571429 36.571429 0 0 0-73.142857 0v297.142857a146.285714 146.285714 0 1 0 73.142857 0z m438.857143-480h-182.857143a36.571429 36.571429 0 1 1 0-73.142857h182.857143a36.571429 36.571429 0 1 1 0 73.142857z m0 182.857143h-182.857143a36.571429 36.571429 0 1 1 0-73.142857h182.857143a36.571429 36.571429 0 1 1 0 73.142857z m0 182.857143h-182.857143a36.571429 36.571429 0 1 1 0-73.142858h182.857143a36.571429 36.571429 0 1 1 0 73.142858z m0 0\"\r\n p-id=\"5047\" fill=\"#ffffff\"></path>\r\n </svg>\r\n {{weatherData.realtime.temperature.min}}\u00B0-{{weatherData.realtime.temperature.max}}\u00B0\r\n </div>\r\n <!--\u76F8\u5BF9\u6E7F\u5EA6-->\r\n <div class=\"nc-other-panel\" title=\"\u76F8\u5BF9\u6E7F\u5EA6\">\r\n <svg style=\"filter: url(#shadow);\" t=\"1715579692622\" class=\"icon nc-other-icon\"\r\n viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"7373\" width=\"20\"\r\n height=\"20\">\r\n <defs>\r\n <filter id=\"shadow\">\r\n <feDropShadow dx=\"1\" dy=\"1\" stdDeviation=\"2\" flood-color=\"rgba(0,0,0,0.5)\" />\r\n </filter>\r\n </defs>\r\n <path\r\n d=\"M512 17.066667C419.271111 17.066667 124.586667 369.777778 124.586667 609.848889c0 218.453333 174.08 397.084444 387.413333 397.084444 213.333333 0 387.413333-178.631111 387.413333-397.084444C899.413333 369.777778 604.728889 17.066667 512 17.066667z m313.457778 592.782222c0 177.493333-140.515556 321.991111-313.457778 321.991111s-313.457778-144.497778-313.457778-321.991111C198.542222 392.533333 459.093333 117.191111 512 93.297778c52.906667 23.893333 313.457778 299.235556 313.457778 516.551111z\"\r\n fill=\"#ffffff\" p-id=\"7374\"></path>\r\n <path\r\n d=\"M383.431111 621.226667c-5.12-13.653333-17.635556-23.893333-31.857778-26.168889s-29.582222 3.413333-38.684444 14.791111c-9.102222 11.377778-11.377778 27.306667-6.257778 40.96a327.111111 327.111111 0 0 0 192.284445 191.146667 41.415111 41.415111 0 0 0 54.613333-32.426667 40.96 40.96 0 0 0-26.737778-46.08c-65.991111-23.893333-117.76-76.231111-143.36-142.222222z\"\r\n fill=\"#ffffff\" p-id=\"7375\"></path>\r\n </svg>\r\n {{weatherData.realtime.humidity.value}}%\r\n </div>\r\n <!--\u98CE\u5411-->\r\n <div class=\"nc-other-panel\" [title]=\"weatherData.realtime.wind.directionDescChinese\">\r\n <svg style=\"filter: url(#shadow);\" t=\"1715579935623\" class=\"icon nc-other-icon\"\r\n viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"8661\" width=\"20\"\r\n height=\"20\">\r\n <defs>\r\n <filter id=\"shadow\">\r\n <feDropShadow dx=\"1\" dy=\"1\" stdDeviation=\"2\" flood-color=\"rgba(0,0,0,0.5)\" />\r\n </filter>\r\n </defs>\r\n <path\r\n d=\"M320 384a32 32 0 0 1 0-64h192a32 32 0 0 1 0 64h-192zM160 384a32 32 0 0 1 0-64h32a32 32 0 0 1 0 64H160zM160 512a32 32 0 0 1 0-64h576a32 32 0 0 1 0 64H160z\"\r\n fill=\"#ffffff\" p-id=\"8662\"></path>\r\n <path\r\n d=\"M736 512a32 32 0 0 1 0-64 64 64 0 1 0 0-128 32 32 0 0 1 0-64 128 128 0 1 1 0 256zM161.056 641.92a32 32 0 1 1-2.112-64c365.536-12 596.576 31.36 696.224 136a32 32 0 0 1-46.336 44.16c-82.752-86.912-299.712-127.616-647.776-116.16z\"\r\n fill=\"#ffffff\" p-id=\"8663\"></path>\r\n </svg>\r\n {{weatherData.realtime.wind.level}}\r\n </div>\r\n <!--\u80FD\u89C1\u5EA6-->\r\n <div class=\"nc-other-panel\" title=\"\u80FD\u89C1\u5EA6\">\r\n <svg style=\"filter: url(#shadow);\" t=\"1732169840319\" class=\"icon nc-other-icon\"\r\n viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"7709\" width=\"18\"\r\n height=\"18\">\r\n <defs>\r\n <filter id=\"shadow\">\r\n <feDropShadow dx=\"1\" dy=\"1\" stdDeviation=\"2\" flood-color=\"rgba(0,0,0,0.5)\" />\r\n </filter>\r\n </defs>\r\n <path\r\n d=\"M511.998465 879.616612c-270.745331 0-490.155483-275.592732-490.155483-367.616612 0-121.700783 219.410152-367.617635 490.155483-367.617635 270.748401 0 490.157529 274.755668 490.157529 367.617635C1002.155994 608.931656 782.746866 879.616612 511.998465 879.616612L511.998465 879.616612 511.998465 879.616612zM511.998465 205.6518c-236.880035 0-428.944376 204.989721-428.944376 306.3482 0 76.706009 192.06434 306.347177 428.944376 306.347177 236.881059 0 428.887071-233.470379 428.887071-306.347177C940.885536 437.208597 748.879524 205.6518 511.998465 205.6518L511.998465 205.6518 511.998465 205.6518zM511.998465 695.808306c-101.535511 0-183.866634-82.331123-183.866634-183.808306 0-101.478206 82.332147-183.808306 183.866634-183.808306 101.418854 0 183.809329 82.331123 183.809329 183.808306C695.807794 613.477182 613.417319 695.808306 511.998465 695.808306L511.998465 695.808306 511.998465 695.808306zM511.998465 389.461129c-67.729567 0-122.597199 54.80828-122.597199 122.538871 0 67.610864 54.868655 122.538871 122.597199 122.538871 67.672262 0 122.540917-54.928007 122.540917-122.538871C634.539382 444.269409 579.670727 389.461129 511.998465 389.461129L511.998465 389.461129 511.998465 389.461129z\"\r\n fill=\"#ffffff\" p-id=\"7710\"></path>\r\n </svg>\r\n {{weatherData.realtime.visibility.value}}km\r\n </div>\r\n <!--\u4E91\u91CF-->\r\n <div class=\"nc-other-panel\" title=\"\u4E91\u91CF\">\r\n <svg style=\"filter: url(#shadow);\" t=\"1732170664431\" class=\"icon nc-other-icon\"\r\n viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"8797\" width=\"18\"\r\n height=\"18\">\r\n <defs>\r\n <filter id=\"shadow\">\r\n <feDropShadow dx=\"1\" dy=\"1\" stdDeviation=\"2\" flood-color=\"rgba(0,0,0,0.5)\" />\r\n </filter>\r\n </defs>\r\n <path\r\n d=\"M769.8432 881.5616H242.688c-128.1024 5.632-236.6464-90.7776-242.432-215.4496C-5.632 541.44 93.5424 435.8144 221.6448 430.08 221.2864 278.6816 341.8624 152.9344 497.152 142.848c155.3408-10.0864 291.9936 98.9184 312.32 249.1392 130.9184 19.6096 224.1536 134.144 213.76 262.656-10.4448 128.512-120.9344 227.4816-253.3888 226.9184zM273.408 799.488h496.384a169.6256 169.6256 0 0 0 146.0736-82.0736 160.3584 160.3584 0 0 0 0-164.1472 169.472 169.472 0 0 0-146.0736-82.0736 42.7008 42.7008 0 0 1-29.8496-12.032 40.448 40.448 0 0 1-12.3392-29.0304c0-113.3056-94.4128-205.2096-210.8416-205.2096-116.48 0-210.8928 91.904-210.8928 205.2096v8.6528c99.7376 27.648 168.5504 116.224 168.704 217.088a40.8576 40.8576 0 0 1-21.0944 35.5328 43.1616 43.1616 0 0 1-42.1888 0 40.8576 40.8576 0 0 1-20.992-35.5328c0-79.2064-65.8944-143.4624-147.2512-143.6672-81.5104 0-147.6096 64.3072-147.6096 143.6672 0 79.3088 66.0992 143.616 147.6096 143.616h16.4352a42.496 42.496 0 0 1 13.9776 0H273.408z m0 0\"\r\n p-id=\"8798\" fill=\"#ffffff\"></path>\r\n </svg>\r\n {{weatherData.realtime.cloudrate.value}}%\r\n </div>\r\n <!--\u5B9E\u51B5\u964D\u6C34\u91CF-->\r\n <div class=\"nc-other-panel\" title=\"\u5B9E\u51B5\u964D\u6C34\u91CF\">\r\n <svg style=\"filter: url(#shadow);\" t=\"1732178187645\" class=\"icon nc-other-icon\"\r\n viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"15679\" width=\"18\"\r\n height=\"18\">\r\n <defs>\r\n <filter id=\"shadow\">\r\n <feDropShadow dx=\"1\" dy=\"1\" stdDeviation=\"2\" flood-color=\"rgba(0,0,0,0.5)\" />\r\n </filter>\r\n </defs>\r\n <path\r\n d=\"M895.7 345c-29.1-29.3-65.4-51-105.3-63.6-10-3.2-17.6-11.5-19.7-21.8-3.4-17.5-9-34.5-16.6-51-13.1-28.3-31.8-53.7-55.6-75.4-48-44-111.6-68.2-179-68.2-67.5 0-131.1 24.2-179.1 68.1-23.8 21.7-42.4 47.1-55.6 75.4-13.5 29.1-20.4 60-20.7 91.8-50.2 4.6-96.8 24.8-133.2 58-42.8 39.1-66.3 91.4-66.3 147.3C64.6 560 87 611.2 127.7 650c26.2 25 58.3 43.1 93.4 53.1 28 8 56.1-12.3 57.3-41.4 0.8-20.9-12.9-39.4-33-45.2-52.9-15.2-90.8-59.1-90.8-110.7 0-64.2 59-116.4 131.5-116.4h0.2c14.7 0 28.8-6.2 38.7-17.2l4.9-5.4c15.8-17.6 24.3-40.5 24.2-64.1v-0.3c0-81.2 74.2-147.3 165.4-147.3s165.4 66.1 165.4 147.3c0 2.9-0.1 6-0.3 9.3-1.7 24.4 16.4 45.7 40.8 48 84.5 7.7 148.3 70.7 148.3 146.5 0 65.1-48.7 121.6-116 140.6-20.6 5.8-34.2 25.3-32.7 46.6 2.1 28.3 29.5 47.7 56.8 40.1 42.6-11.9 81.3-34 112.3-64.5 44.8-44.2 69.5-102 69.5-162.8-0.1-60.1-24.2-117.3-67.9-161.2z\"\r\n p-id=\"15680\" fill=\"#ffffff\"></path>\r\n <path\r\n d=\"M621.2 656.7c-24.9 0-45 20.1-45 45V916c0 24.9 20.1 45 45 45s45-20.1 45-45V701.7c0-24.9-20.2-45-45-45zM444.6 651.3c-24.9 0-45 20.1-45 45v26.1c0 24.9 20.1 45 45 45s45-20.1 45-45v-26.1c0-24.8-20.1-45-45-45zM444.6 844.9c-24.9 0-45 20.1-45 45V916c0 24.9 20.1 45 45 45s45-20.1 45-45v-26.1c0-24.9-20.1-45-45-45zM426.3 577.2V506c0-42.2-24-48.5-38.3-48.5-11.1 0-19.9 3.8-26.7 8.3l0.7-7.4v-41.6h-43.5v160.3H362v-74.3c5-4.7 8.3-6.7 13.4-6.7 4 0 7.4 0 7.4 14v67.1h43.5zM493.7 457.5c-15.2 0-29.4 5.8-40 16.2-11.4 11.3-17.5 26.8-17.5 44.8 0 18.1 6 33.7 17.5 45 10.6 10.5 24.8 16.2 40 16.2 15.1 0 29.3-5.8 39.8-16.2 11.4-11.3 17.5-26.9 17.5-45 0-18-6-33.5-17.5-44.8-10.6-10.4-24.7-16.2-39.8-16.2z m0 85.2c-8.8 0-13.2-8.1-13.2-24.2 0-15.9 4.5-24 13.2-24 10.8 0 13.1 13 13.1 24-0.1 16.1-4.5 24.2-13.1 24.2zM624.6 533.7c-4.8 6.3-8.2 7.5-12.9 7.5-4 0-7.4 0-7.4-14v-67.1h-43.5v71.2c0 42.2 24.1 48.5 38.5 48.5 11.8 0 21.5-3.8 30.7-12.3l1.6 9.6h36.5v-117h-43.5v73.6zM728.5 512c3.9-9.5 10.6-15.1 17.9-15.1 4.2 0 6.9 0.7 10.7 1.6l5.1 1.2 7.2-37.8-3.7-1.6c-4.3-1.9-8.8-2.7-15-2.7-10.1 0-19.9 4.9-27.7 13.6l-1.4-11H685v117h43.5V512z\"\r\n p-id=\"15681\" fill=\"#ffffff\"></path>\r\n </svg>\r\n {{weatherData.realtime.precipitation.value}}mm/h\r\n </div>\r\n </div>\r\n <!--\u4F4D\u7F6E-->\r\n <div class=\"nc-location-info\" *ngIf=\"ncShowLocation\">\r\n <svg style=\"filter: url(#shadow);\" t=\"1727163669784\" class=\"icon nc-location-icon\"\r\n viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"6989\" width=\"18\"\r\n height=\"18\">\r\n <defs>\r\n <filter id=\"shadow\">\r\n <feDropShadow dx=\"1\" dy=\"1\" stdDeviation=\"2\" flood-color=\"rgba(0,0,0,0.5)\" />\r\n </filter>\r\n </defs>\r\n <path\r\n d=\"M511.990795 0.011251c-213.648058 0-387.460012 167.869473-387.460012 374.207563 0 68.630034 19.623485 136.065435 56.753254 195.029988l0.529812 0.838698 277.497514 388.957395 0.529812 0.692437c5.243907 6.444677 12.361589 15.659103 19.243002 24.571802 9.948798 12.882195 18.540337 24.007216 22.85554 28.670171l10.211658 11.031946 10.064375-11.165933c2.353468-2.610191 7.457252-9.147944 17.035795-21.448164 7.47873-9.609228 16.790323-21.566809 24.970695-31.736533l0.249564-0.310932 277.822766-389.496412 1.123037-1.67535c36.671554-58.335529 56.05468-125.395562 56.05468-193.939681C899.471263 167.888906 725.648058 0.011251 511.990795 0.011251zM511.990795 69.204849c175.504692 0 318.28687 136.836628 318.28687 305.033398 0 55.153591-15.528184 109.180054-44.909203 156.266804-95.59008 133.278299-234.860978 326.705556-273.375621 378.415372-38.45123-51.618786-177.344713-244.48657-272.690344-377.391546-29.820824-47.697362-45.578116-102.083852-45.578116-157.311085C193.723358 206.033295 336.496331 69.204849 511.990795 69.204849z\"\r\n p-id=\"6990\" fill=\"#ffffff\"></path>\r\n <path\r\n d=\"M511.990795 598.539814c116.371377 0 211.047072-94.675695 211.047072-211.05014 0-116.369332-94.674672-211.046049-211.047072-211.046049-116.360126 0-211.026616 94.675695-211.026616 211.046049C300.964179 503.864119 395.630668 598.539814 511.990795 598.539814zM511.990795 245.638246c78.218806 0 141.853474 63.634668 141.853474 141.851428 0 78.221874-63.635691 141.858588-141.853474 141.858588-78.208578 0-141.83404-63.637736-141.83404-141.858588C370.156754 309.272913 433.782217 245.638246 511.990795 245.638246z\"\r\n p-id=\"6991\" fill=\"#ffffff\"></path>\r\n </svg>\r\n <div class=\"nc-location\">{{weatherData.location.city + weatherData.location.country}}</div>\r\n </div>\r\n <!--\u65E5\u51FA\u65E5\u843D-->\r\n <div class=\"nc-sun\">\r\n <div class=\"nc-sunrise\">\r\n <svg t=\"1715671192899\" class=\"icon\" viewBox=\"0 0 1330 1024\" version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1431\" width=\"32\" height=\"32\">\r\n <path\r\n d=\"M248.598885 582.029238H82.917861a27.690853 27.690853 0 1 0 0 55.227008h165.681024a27.690853 27.690853 0 0 0 0-55.227008zM1242.839726 582.029238H1077.158702a27.690853 27.690853 0 1 0 0 55.227008h165.681024a27.690853 27.690853 0 1 0 0-55.227008z\"\r\n fill=\"#F6BB42\" p-id=\"1432\"></path>\r\n <path\r\n d=\"M1053.489985 179.970432l-117.260706 117.260706A27.536155 27.536155 0 0 0 974.594259 336.214909l117.879496-117.570101a27.690853 27.690853 0 0 0-38.98377-38.674376z\"\r\n fill=\"#FFCE54\" p-id=\"1433\"></path>\r\n <path\r\n d=\"M635.187941 29.759158V195.440182a27.690853 27.690853 0 0 0 55.227008 0V29.759158a27.690853 27.690853 0 1 0-55.227008 0z\"\r\n fill=\"#F6BB42\" p-id=\"1434\"></path>\r\n <path\r\n d=\"M233.283832 218.644808l117.106009 117.106008a27.536155 27.536155 0 0 0 38.98377-38.98377L272.267603 179.970432a27.690853 27.690853 0 0 0-38.983771 38.674376zM379.163576 720.174107a301.196035 301.196035 0 0 1-20.729465-110.454016 304.444683 304.444683 0 1 1 608.734668 0 301.041338 301.041338 0 0 1-20.574768 110.454016z\"\r\n fill=\"#FFCE54\" p-id=\"1435\"></path>\r\n <path\r\n d=\"M662.878794 277.739253A331.980838 331.980838 0 0 0 360.909271 747.710262h603.320255a331.980838 331.980838 0 0 0-301.350732-469.971009z m264.068635 414.744001H398.655461a276.75383 276.75383 0 1 1 541.441255-82.763163 270.56593 270.56593 0 0 1-13.149287 82.763163z\"\r\n fill=\"#F6BB42\" p-id=\"1436\"></path>\r\n <path\r\n d=\"M741.001032 869.611894l-58.630353-58.475656a27.072063 27.072063 0 0 0-19.491885-8.198968 27.536155 27.536155 0 0 0-19.491886 8.044271l-58.630353 58.630353a27.690853 27.690853 0 0 0 0 39.138467 27.690853 27.690853 0 0 0 38.983771 0l11.447615-11.447615v99.006401a27.690853 27.690853 0 0 0 27.690853 27.690853 27.690853 27.690853 0 0 0 27.536155-27.690853v-99.006401l11.447615 11.447615a27.84555 27.84555 0 0 0 39.138468 0 27.84555 27.84555 0 0 0 0-39.138467z\"\r\n fill=\"#ED5564\" p-id=\"1437\"></path>\r\n <path\r\n d=\"M1298.066734 692.483254H27.690853a27.690853 27.690853 0 1 0 0 55.227008h1270.375881a27.690853 27.690853 0 1 0 0-55.227008z\"\r\n fill=\"#656D78\" p-id=\"1438\"></path>\r\n </svg>\r\n {{weatherData.realtime.astro.sunrise}}\r\n </div>\r\n <div class=\"nc-sunset\">\r\n <svg t=\"1715671226332\" class=\"icon\" viewBox=\"0 0 1330 1024\" version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1599\" width=\"32\" height=\"32\">\r\n <path\r\n d=\"M248.598885 582.029238H82.917861a27.690853 27.690853 0 1 0 0 55.227008h165.681024a27.690853 27.690853 0 0 0 0-55.227008zM1242.839726 582.029238H1077.158702a27.690853 27.690853 0 1 0 0 55.227008h165.681024a27.690853 27.690853 0 0 0 0-55.227008z\"\r\n fill=\"#F6BB42\" p-id=\"1600\"></path>\r\n <path\r\n d=\"M1053.489985 179.970432l-117.260706 117.260706A27.536155 27.536155 0 0 0 974.594259 336.214909l117.879496-117.570101a27.690853 27.690853 0 0 0-38.98377-38.674376z\"\r\n fill=\"#FFCE54\" p-id=\"1601\"></path>\r\n <path\r\n d=\"M635.187941 29.759158V195.440182a27.690853 27.690853 0 0 0 55.227008 0V29.759158a27.690853 27.690853 0 1 0-55.227008 0z\"\r\n fill=\"#F6BB42\" p-id=\"1602\"></path>\r\n <path\r\n d=\"M233.283832 218.644808l117.106009 117.106008a27.536155 27.536155 0 0 0 38.98377-38.98377L272.267603 179.970432a27.690853 27.690853 0 0 0-38.983771 38.674376zM379.163576 720.174107a301.196035 301.196035 0 0 1-20.729465-110.454016 304.444683 304.444683 0 1 1 587.850505 110.454016z\"\r\n fill=\"#FFCE54\" p-id=\"1603\"></path>\r\n <path\r\n d=\"M662.878794 277.739253A331.980838 331.980838 0 0 0 360.909271 747.710262h603.320255a331.980838 331.980838 0 0 0-301.350732-469.971009z m264.068635 414.744001H398.655461a276.75383 276.75383 0 1 1 541.441255-82.763163 270.56593 270.56593 0 0 1-13.149287 82.763163z\"\r\n fill=\"#F6BB42\" p-id=\"1604\"></path>\r\n <path\r\n d=\"M584.756555 957.325377l58.475656 58.475655a27.536155 27.536155 0 0 0 19.491885 8.04427 27.536155 27.536155 0 0 0 19.491885-8.04427l58.630353-58.475655a27.84555 27.84555 0 0 0 0-39.138468 27.84555 27.84555 0 0 0-39.138468 0l-11.447615 11.447615v-99.006401a27.690853 27.690853 0 0 0-27.536155-27.690853 27.690853 27.690853 0 0 0-27.690853 27.690853V930.253314l-11.447615-11.447615a27.690853 27.690853 0 0 0-38.98377 0 27.690853 27.690853 0 0 0 0.154697 38.519678z\"\r\n fill=\"#ED5564\" p-id=\"1605\"></path>\r\n <path\r\n d=\"M1298.066734 692.483254H27.690853a27.690853 27.690853 0 1 0 0 55.227008h1270.375881a27.690853 27.690853 0 1 0 0-55.227008z\"\r\n fill=\"#656D78\" p-id=\"1606\"></path>\r\n </svg>\r\n {{weatherData.realtime.astro.sunset}}\r\n </div>\r\n </div>\r\n </div>\r\n <!--24\u5C0F\u65F6\u9884\u62A5-->\r\n <div class=\"nc-hourly\" *ngIf=\"ncShowHourly\"\r\n [ngStyle]=\"{'margin-bottom': ncShowDaily || ncShowLife ? '10px' : 0}\">\r\n <div class=\"nc-hourly-title\">\r\n <div>24\u5C0F\u65F6\u9884\u62A5</div>\r\n <div>{{weatherData.forecast_keypoint.value}}</div>\r\n </div>\r\n <div class=\"nc-hourly-content\" ncHorizontalScroll ncScrollBar=\"hide\">\r\n <div class=\"nc-hourly-panel\" *ngFor=\"let l of weatherData.hourly.value;\">\r\n <div class=\"nc-time\">{{l.time}}</div>\r\n <div class=\"nc-skyicon\">\r\n <div class=\"nc-skyicon-svg\" [innerHTML]=\"l.skycon.icon\"></div>\r\n <div class=\"nc-skyicon-percent\" *ngIf=\"l.precipitation.probability\">\r\n {{l.precipitation.probability}}%</div>\r\n </div>\r\n <div class=\"nc-temperature\">{{l.temperature.value}}\u00B0</div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--5\u5929\u9884\u62A5-->\r\n <div class=\"nc-daily\" *ngIf=\"ncShowDaily\" [ngStyle]=\"{'margin-bottom': ncShowLife ? '10px' : 0}\">\r\n <div class=\"nc-daily-title\">5\u65E5\u5929\u6C14\u9884\u62A5</div>\r\n <div class=\"nc-daily-content\">\r\n <ng-container *ngFor=\"let l of weatherData.daily.value;\">\r\n <div class=\"nc-daily-panel\">\r\n <div class=\"nc-date\">{{l.date}}</div>\r\n <div class=\"nc-skyicon\">\r\n <div class=\"nc-skyicon-svg\" [innerHTML]=\"l.skycon.icon\"></div>\r\n <div class=\"nc-skyicon-percent\" *ngIf=\"l.precipitation.probability\">\r\n {{l.precipitation.probability}}%</div>\r\n </div>\r\n <div class=\"nc-skyword\">{{l.skycon.desc}}</div>\r\n <div class=\"nc-temperature\">{{l.temperature.min}}\u00B0/{{l.temperature.max}}\u00B0</div>\r\n <div class=\"nc-direction\">{{l.wind.avg.directionDescChinese}}</div>\r\n <div class=\"nc-speed\">{{l.wind.avg.level}}</div>\r\n <div class=\"nc-description\">\r\n <div [ngStyle]=\"{'background-color': l.air_quality.aqi.avg.color}\">\r\n {{l.air_quality.aqi.avg.value}} {{l.air_quality.aqi.avg.desc}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!--\u751F\u6D3B\u6307\u6570-->\r\n <div class=\"nc-life\" *ngIf=\"ncShowLife\">\r\n <div class=\"nc-life-panel\">\r\n <div class=\"nc-icon\">\r\n <svg t=\"1715757285675\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1882\" width=\"32\" height=\"32\">\r\n <path\r\n d=\"M604.16 215.04c-10.24 10.24-10.24 25.6 0 35.84 10.24 10.24 25.6 10.24 35.84 0 35.84-35.84 97.28-35.84 133.12 0 5.12 5.12 12.8 7.68 17.92 7.68s12.8-2.56 17.92-7.68c10.24-10.24 10.24-25.6 0-35.84-56.32-56.32-148.48-56.32-204.8 0z\"\r\n p-id=\"1883\" fill=\"#ffffff\"></path>\r\n <path\r\n d=\"M875.52 148.48C829.44 102.4 765.44 76.8 704 76.8c-61.44 0-122.88 23.04-171.52 71.68L145.92 535.04c-94.72 94.72-94.72 248.32 0 340.48C192 921.6 256 947.2 317.44 947.2c61.44 0 122.88-23.04 171.52-71.68l386.56-386.56c94.72-94.72 94.72-248.32 0-340.48z m-422.4 691.2C417.28 875.52 368.64 896 317.44 896s-99.84-20.48-135.68-56.32c-74.24-74.24-74.24-194.56 0-268.8L358.4 394.24l240.64 240.64 28.16 28.16-174.08 176.64z m386.56-386.56L663.04 629.76l-25.6-25.6-5.12-5.12L391.68 358.4l176.64-176.64c35.84-35.84 84.48-56.32 135.68-56.32s99.84 20.48 135.68 56.32c74.24 76.8 74.24 197.12 0 271.36z\"\r\n p-id=\"1884\" fill=\"#ffffff\"></path>\r\n </svg>\r\n </div>\r\n <div class=\"nc-description\">{{weatherData.realtime.life_index.coldRisk}}</div>\r\n <div class=\"nc-title\">\u611F\u5192</div>\r\n </div>\r\n <div class=\"nc-life-panel\">\r\n <div class=\"nc-icon\">\r\n <svg t=\"1715757592791\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\" p-id=\"3064\" width=\"32\" height=\"32\">\r\n <path\r\n d=\"M939.99104 312.38656L774.7584 147.15904a59.45856 59.45856 0 0 0-46.78656-17.26976 57.3184 57.3184 0 0 0-4.80256-0.21504H635.136l-6.1696 3.43552c-32.60928 18.14016-74.22464 28.12928-117.1712 28.12928-42.94656 0-84.5568-9.98912-117.16608-28.12928l-6.17472-3.43552H300.42112a59.98592 59.98592 0 0 0-53.05344 31.68768l-163.32288 163.328C72.77056 335.96928 66.56 350.95552 66.56 366.8992s6.21056 30.93504 17.4848 42.20928l119.33184 119.33184a59.19232 59.19232 0 0 0 36.7872 17.21856v288.39936c0 33.2288 27.0336 60.26752 60.2624 60.26752h422.74304c33.2288 0 60.26752-27.03872 60.26752-60.26752V533.4016a59.20256 59.20256 0 0 0 37.21728-17.26976l119.3472-119.33184c23.25504-23.2704 23.25504-61.14304-0.01024-84.41344z m-38.52288 45.89568L782.1312 477.6192a5.05344 5.05344 0 0 1-3.65056 1.5104c-0.9472 0-2.34496-0.24576-3.59424-1.42336l-45.93664-43.36128v399.7184c0 3.2-2.59584 5.79072-5.79072 5.79072H300.42112a5.7856 5.7856 0 0 1-5.7856-5.79072V448.5632l-45.57824 41.50272c-1.23392 1.1264-2.60096 1.36192-3.52256 1.36192a5.06368 5.06368 0 0 1-3.64032-1.50528L122.56256 370.5856c-1.26464-1.25952-1.52576-2.69824-1.52576-3.6864s0.26624-2.42688 1.52576-3.69152L287.4368 198.33344l5.26848-4.72576 2.3552-5.83168a5.79584 5.79584 0 0 1 5.36576-3.63008h74.12224c39.86432 20.67456 87.1424 31.55968 137.24672 31.55968 50.10944 0 97.38752-10.88512 137.25696-31.55968h74.08128c0.29696 0.01024 0.5888 0.05632 0.8704 0.09728l3.89632 0.55808 3.88608-0.5632c1.23904-0.17408 2.88256-0.13824 4.4544 1.4336l165.23264 165.22752a5.2224 5.2224 0 0 1-0.00512 7.38304z\"\r\n fill=\"#ffffff\" p-id=\"3065\"></path>\r\n </svg>\r\n </div>\r\n <div class=\"nc-description\">{{weatherData.realtime.life_index.dressing}}</div>\r\n <div class=\"nc-title\">\u7A7F\u8863</div>\r\n </div>\r\n <div class=\"nc-life-panel\">\r\n <div class=\"nc-icon\">\r\n <svg t=\"1715757933342\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\" p-id=\"8282\" width=\"32\" height=\"32\">\r\n <path\r\n d=\"M996.4 159.9c-23.4-17.2-56.5-16.2-98.5 3.2-82.5 38-168.6 44.1-259.8 50.6-74.7 5.3-152 10.8-235.1 33.5-166.1 45.1-270.2 193.1-318 452.5C54.2 740 27 783.1 3.6 828.6c-5.2 10.2-4.8 22.2 1.2 32 6 9.9 16.5 15.7 28.1 15.7h20.4c11.4 0 21.8-5.7 27.9-15.4 93-148 206.2-144.8 337.3-141.2 83.9 2.3 170.6 4.7 260.4-30.4 102.6-40.1 184.8-103.4 244.6-188 27-38.3 49.3-81 66.2-126.9 15.9-43.1 27.1-89.2 33.5-137.2 0.8-5.4 6.1-53.1-26.8-77.3z m-25.5 70.4c-15 113.5-75.4 317.6-311.1 409.9-79.8 31.2-161.1 29-239.7 26.8-70.2-1.9-136.5-3.8-201.3 16.3-32.9 10.2-62.2 25.1-89.4 45.4 48.4-62.8 106.3-118.7 173-167.2 92.4-67 207.9-110.2 363.3-136.1 14.4-2.4 24.1-16 21.7-30.4-2.2-12.9-13.3-22.1-26-22.1-1.4 0-2.9 0.1-4.4 0.4-79.4 13.2-148.2 30.8-210.3 53.6-66.6 24.5-123.9 54.5-175.3 91.8-41 29.7-78.8 62.1-113.4 97C207.2 436.1 292.4 331.9 416.8 298c78.2-21.3 152.8-26.6 225-31.8C738 259.5 828.8 253 920 211c25.8-11.9 40.4-12.1 45-8.6 5.5 3.9 7.1 18.9 5.9 27.9z\"\r\n fill=\"#ffffff\" p-id=\"8283\"></path>\r\n </svg>\r\n </div>\r\n <div class=\"nc-description\">{{weatherData.realtime.life_index.comfort}}</div>\r\n <div class=\"nc-title\">\u8212\u9002\u5EA6</div>\r\n </div>\r\n <div class=\"nc-life-panel\">\r\n <div class=\"nc-icon\">\r\n <svg t=\"1715757624305\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\" p-id=\"4164\" width=\"32\" height=\"32\">\r\n <path\r\n d=\"M186.907091 793.533872l-42.663111 42.663112a30.16282 30.16282 0 0 0 42.663111 42.663111l42.663111-42.663111a30.16282 30.16282 0 0 0-42.663111-42.663112zM835.983668 229.527539l42.663111-42.663111a30.16282 30.16282 0 0 0-42.663111-42.663111l-42.663111 42.663111a30.16282 30.16282 0 0 0 42.663111 42.663111z m-733.805516 248.555287h-68.260978a33.87451 33.87451 0 1 0 0 67.749021h68.260978A33.831847 33.831847 0 0 0 136.052662 511.957337a33.191901 33.191901 0 0 0-33.87451-33.874511z m409.565869-341.304891a34.130489 34.130489 0 0 0 33.917174-34.386468V34.130489a34.130489 34.130489 0 0 0-68.260978 0v68.260978a34.770436 34.770436 0 0 0 34.599783 34.13049zM188.95492 229.527539a30.16282 30.16282 0 0 0 42.663112-42.663111l-42.663112-42.663111a30.16282 30.16282 0 0 0-42.663111 42.663111zM512 887.392717a34.130489 34.130489 0 0 0-33.87451 34.429131v68.260978a33.87451 33.87451 0 0 0 67.791684 0v-68.260978A34.130489 34.130489 0 0 0 512 887.392717z m477.826848-409.309891h-68.260978a33.87451 33.87451 0 1 0 0 67.749021h68.260978a33.87451 33.87451 0 1 0 0-67.749021z m-153.032581 314.256479a30.16282 30.16282 0 0 0-42.663111 42.663111l42.663111 42.663112a30.16282 30.16282 0 0 0 42.663112-42.663112zM512 204.782935a307.174402 307.174402 0 1 0 307.174402 307.174402A307.174402 307.174402 0 0 0 512 204.782935z m-15.401383 356.364969a76.025665 76.025665 0 1 1-152.008666 0v-146.334472a16.425298 16.425298 0 0 1 32.850596 0v146.334472a43.132406 43.132406 0 0 0 86.264811 0v-146.334472a16.425298 16.425298 0 0 1 32.850596 0v146.334472z m180.72094-146.846429l-62.629448 207.982668a16.04133 16.04133 0 0 1-31.314724-1.535872c-0.511957 0.511957-63.141405-206.446796-63.141404-206.446796a16.254645 16.254645 0 0 1 31.314723-8.532622l42.108491 136.521956a5.2049 5.2049 0 0 0 6.655446 3.583701 6.228814 6.228814 0 0 0 3.583701-3.583701l42.108491-136.521956a16.254645 16.254645 0 0 1 31.272061 8.617948z\"\r\n p-id=\"4165\" fill=\"#ffffff\"></path>\r\n </svg>\r\n </div>\r\n <div class=\"nc-description\">{{weatherData.realtime.life_index.ultraviolet}}</div>\r\n <div class=\"nc-title\">\u7D2B\u5916\u7EBF</div>\r\n </div>\r\n <div class=\"nc-life-panel\">\r\n <div class=\"nc-icon\">\r\n <svg t=\"1715757645311\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\" p-id=\"5367\" width=\"32\" height=\"32\">\r\n <path\r\n d=\"M668.053333 310.037333c41.706667 0 79.786667 23.637333 97.706667 60.842667l66.133333 137.408c5.717333 11.946667 16.746667 20.8 30.08 24.064l15.850667 3.861333c43.989333 10.752 75.072 49.664 75.072 94.506667v186.197333c0 31.274667-25.642667 56.32-56.896 56.32h-89.088c0.597333 2.752 0.917333 5.610667 0.917333 8.533334v11.392a39.829333 39.829333 0 0 1-79.658666 0v-11.392c0-2.922667 0.32-5.781333 0.917333-8.533334H294.912c0.597333 2.752 0.917333 5.610667 0.917333 8.533334v11.392a39.829333 39.829333 0 0 1-79.658666 0v-11.392c0-2.922667 0.32-5.781333 0.917333-8.533334H128.064c-31.232 0-56.832-25.045333-56.874667-56.32l-0.085333-198.677333c0-37.504 25.941333-70.016 62.656-78.997333l28.245333-6.890667a45.141333 45.141333 0 0 0 30.101334-24.064l66.133333-137.386667c17.92-37.226667 55.978667-60.864 97.706667-60.864z m0 62.592h-312.106666a45.653333 45.653333 0 0 0-41.322667 25.386667l-66.133333 137.408a107.733333 107.733333 0 0 1-71.616 57.706667l-28.266667 6.912c-8.896 2.176-14.933333 9.728-14.933333 18.176L133.76 810.666667h756.544v-179.925334c0-15.125333-10.197333-28.565333-25.258667-33.152l-2.069333-0.576-15.850667-3.882666a107.733333 107.733333 0 0 1-71.637333-57.706667l-66.133333-137.386667a45.653333 45.653333 0 0 0-41.301334-25.408zM307.2 637.162667a45.504 45.504 0 1 1 0 91.008 45.504 45.504 0 0 1 0-91.008z m409.6 0a45.504 45.504 0 1 1 0 91.008 45.504 45.504 0 0 1 0-91.008z m166.698667-360.128c11.776 11.754667 12.202667 30.570667 1.301333 42.858666l-1.28 1.386667-48.298667 48.277333a31.296 31.296 0 0 1-45.546666-42.88l1.301333-1.365333 48.277333-48.277333a31.296 31.296 0 0 1 44.245334 0zM586.410667 180.032c11.776 11.776 12.202667 30.570667 1.322666 42.88l-1.322666 1.365333-48.256 48.277334a31.296 31.296 0 0 1-45.568-42.88l1.301333-1.365334 48.277333-48.277333a31.296 31.296 0 0 1 44.245334 0z m220.906666-61.610667c11.754667 11.776 12.202667 30.592 1.28 42.88l-1.28 1.386667-80.469333 80.426667a31.296 31.296 0 0 1-45.546667-42.837334l1.301334-1.386666 80.448-80.469334a31.296 31.296 0 0 1 44.266666 0z\"\r\n fill=\"#ffffff\" p-id=\"5368\"></path>\r\n </svg>\r\n </div>\r\n <div class=\"nc-description\">{{weatherData.realtime.life_index.carWashing}}</div>\r\n <div class=\"nc-title\">\u6D17\u8F66</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"nc-space\" *ngIf=\"ncPosition == 'rightTop' || ncPosition == 'leftTop'\"></div>\r\n</ng-template>\r\n\r\n<div class=\"nc-weather\" *ngIf=\"weatherData.hasOwnProperty('realtime')\" (mouseenter)=\"detailShow = true\"\r\n (mouseleave)=\"detailShow = false\">\r\n <div class=\"nc-bar\">\r\n <div class=\"nc-temperature\">{{weatherData.realtime.temperature.value}}\u00B0</div>\r\n <div class=\"nc-icon\" [innerHTML]=\"weatherData.realtime.skycon.icon\"></div>\r\n </div>\r\n <!--\u6DE1\u5165\u6DE1\u51FA-->\r\n <ng-container *ngIf=\"ncAnimation == 'fade'\">\r\n <div class=\"nc-details\" *ngIf=\"detailShow\" [ngClass]=\"ncPosition\" [@fadeInOut]>\r\n <div [ngTemplateOutlet]=\"detailsTemplate\"></div>\r\n </div>\r\n </ng-container>\r\n <!--\u6ED1\u5165\u6ED1\u51FA-->\r\n <ng-container *ngIf=\"ncAnimation == 'slide'\">\r\n <div class=\"nc-details\" *ngIf=\"detailShow\" [ngClass]=\"ncPosition\" [@slideInOut]>\r\n <div [ngTemplateOutlet]=\"detailsTemplate\"></div>\r\n </div>\r\n </ng-container>\r\n <!--\u65E0\u52A8\u753B-->\r\n <ng-container *ngIf=\"ncAnimation == 'default'\">\r\n <div class=\"nc-details\" *ngIf=\"detailShow\" [ngClass]=\"ncPosition\">\r\n <div [ngTemplateOutlet]=\"detailsTemplate\"></div>\r\n </div>\r\n </ng-container>\r\n</div>", styles: [".nc-weather{position:relative;width:-moz-fit-content;width:fit-content}.nc-weather .nc-bar{display:flex;align-items:center;border-radius:18px;color:#fff;padding:3px 15px;background:rgba(0,0,0,.3);cursor:pointer}.nc-weather .nc-bar .nc-temperature{font-weight:bold;font-size:18px}.nc-weather .nc-bar .nc-icon{display:flex;align-items:center;width:28px;height:28px}.nc-weather .rightBottom{left:0;top:34px}.nc-weather .leftBottom{right:0;top:34px}.nc-weather .rightTop{left:0;bottom:34px}.nc-weather .leftTop{right:0;bottom:34px}.nc-weather .nc-details{position:absolute;width:620px;z-index:1001}.nc-weather .nc-details .nc-space{height:15px;background-color:#0000}.nc-weather .nc-details .nc-content{color:#fff;padding:10px;position:relative;border-radius:8px}.nc-weather .nc-details .nc-content .nc-weather-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;border-radius:8px}.nc-weather .nc-details .nc-content .nc-realtime{padding:10px 10px 20px}.nc-weather .nc-details .nc-content .nc-realtime .nc-AQI{width:-moz-fit-content;width:fit-content;font-size:16px;padding:5px 20px 5px 5px;border-radius:20px;background-color:#0000004d;display:flex;align-items:center;position:relative}.nc-weather .nc-details .nc-content .nc-realtime .nc-AQI .nc-aqi-img{padding:7px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:5px}.nc-weather .nc-details .nc-content .nc-realtime .nc-AQI .nc-aqi-img img{width:16px;height:16px}.nc-weather .nc-details .nc-content .nc-realtime .nc-AQI .nc-refresh{position:absolute;left:calc(100% + 10px);display:flex;align-items:center;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.nc-weather .nc-details .nc-content .nc-realtime .nc-AQI .nc-refresh .nc-refresh-icon{margin-left:5px;cursor:pointer}.nc-weather .nc-details .nc-content .nc-realtime .nc-temperature{display:flex;align-items:flex-end;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.nc-weather .nc-details .nc-content .nc-realtime .nc-temperature .nc-num{font-size:80px;line-height:1}.nc-weather .nc-details .nc-content .nc-realtime .nc-temperature .nc-icon{display:flex;align-items:center;width:45px;height:45px;position:relative;bottom:-5px}.nc-weather .nc-details .nc-content .nc-realtime .nc-temperature .nc-word{font-weight:bold;font-size:18px;margin-left:5px}.nc-weather .nc-details .nc-content .nc-realtime .nc-other{display:flex;align-items:center;margin-top:10px;font-size:16px;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.nc-weather .nc-details .nc-content .nc-realtime .nc-other .nc-other-panel{display:flex;align-items:center;margin-right:10px;cursor:help}.nc-weather .nc-details .nc-content .nc-realtime .nc-other .nc-other-panel .nc-other-icon{margin-right:5px}.nc-weather .nc-details .nc-content .nc-realtime .nc-location-info{position:absolute;right:10px;top:5px;display:flex;align-items:center;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.nc-weather .nc-details .nc-content .nc-realtime .nc-location-info .nc-location-icon{margin:0 3px 4px 0}.nc-weather .nc-details .nc-content .nc-realtime .nc-location-info .nc-location{font-size:15px}.nc-weather .nc-details .nc-content .nc-realtime .nc-sun{position:absolute;right:20px;top:115px;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.nc-weather .nc-details .nc-content .nc-realtime .nc-sun .nc-sunrise,.nc-weather .nc-details .nc-content .nc-realtime .nc-sun .nc-sunset{display:flex;align-items:center;font-weight:bold}.nc-weather .nc-details .nc-content .nc-realtime .nc-sun .nc-sunrise svg,.nc-weather .nc-details .nc-content .nc-realtime .nc-sun .nc-sunset svg{margin-right:10px}.nc-weather .nc-details .nc-content .nc-hourly{background-color:#6f8e9ee6;margin-bottom:10px;border-radius:15px}.nc-weather .nc-details .nc-content .nc-hourly .nc-hourly-title{padding:10px 15px;display:flex;align-items:center;justify-content:space-between}.nc-weather .nc-details .nc-content .nc-hourly .nc-hourly-content{display:flex;align-items:center;padding:0 5px 10px}.nc-weather .nc-details .nc-content .nc-hourly .nc-hourly-content .nc-hourly-panel{display:flex;flex-direction:column;align-items:center;width:150px;margin:0 10px}.nc-weather .nc-details .nc-content .nc-hourly .nc-hourly-content .nc-hourly-panel .nc-time{word-break:keep-all}.nc-weather .nc-details .nc-content .nc-hourly .nc-hourly-content .nc-hourly-panel .nc-skyicon{position:relative}.nc-weather .nc-de