Merge branch 'master' of http://150.158.33.144:3000/lalalashen/MoeNovaClient

# Conflicts:
#	pages/my/my.vue

App.vue

@@ -113,14 +113,16 @@
 			uni.$on('check_login', function(callback) {
 				let skeyLogin = uni.getStorageSync("is_login");
 				console.log("skeylogin", skeyLogin);
-				if (skeyLogin == null || skeyLogin == undefined || skeyLogin == "") {
-					uni.removeStorageSync("wapptoken");
-					uni.redirectTo({
-						url: '/pages/login/login'
-					});
-				} else if (typeof callback === 'function') {
-					callback(); // 登录状态有效时执行回调
-				}
+				callback();
+				// 调试阶段不再拦截
+				// if (skeyLogin == null || skeyLogin == undefined || skeyLogin == "") {
+				// 	uni.removeStorageSync("wapptoken");
+				// 	uni.redirectTo({
+				// 		url: '/pages/login/login'
+				// 	});
+				// } else if (typeof callback === 'function') {
+				// 	callback(); // 登录状态有效时执行回调
+				// }
 			});
 
 		},
@@ -209,4 +211,5 @@
 	.cu-modal {
 		z-index: 997 !important;
 	}
+ 
 </style>

common/requestConfig.js

@@ -2,21 +2,21 @@ import request from "@/node_modules/zhouWei-request/js_sdk/request";
 import base from '@/common/baseUrl';
  
 let version_code = '';
-// #ifdef APP-PLUS
-import {
-	getCurrentNo
-} from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
-import {
-	isString
-} from "util";
-import { log } from "console";
-setTimeout(() => {
-	getCurrentNo(function(res) {
-		console.log("版本号", res);
-		version_code = res.versionCode;
-	});
-}, 200);
-// #endif
+// // #ifdef APP-PLUS
+// import {
+// 	getCurrentNo
+// } from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
+// import {
+// 	isString
+// } from "util";
+// import { log } from "console";
+// setTimeout(() => {
+// 	getCurrentNo(function(res) {
+// 		console.log("版本号", res);
+// 		version_code = res.versionCode;
+// 	});
+// }, 200);
+// // #endif
 
 //可以new多个request来支持多个域名请求
 let $http = new request({

components/CircleAvatar/CircleAvatar.vue

@@ -0,0 +1,30 @@
+<template>
+  <view class="circle-avatar">
+    <image :src="src" mode="aspectFill" class="avatar-image"></image>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    src: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.circle-avatar {
+  width: 100px; /* 你可以根据需要调整大小 */
+  height: 100px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.avatar-image {
+  width: 100%;
+  height: 100%;
+}
+</style>

components/custome-confirm/customeConfirm.scss

@@ -0,0 +1,245 @@
+.page-total{
+	position: absolute;
+	left: 0;
+	top: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0,0,0,0.3);
+	z-index: 99999;
+}
+
+.box{
+	display: flex;
+	justify-content: center;
+	width: 100%;
+}
+/* 文件重命名 */
+.dialog-box{
+	width: 80%;
+	height: 370rpx;
+	background-color: #fff;
+	border-radius: 24rpx;
+	overflow: hidden;
+	.title{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-family: 'PingFang SC-Bold'; 
+		width: 100%;
+		height: 130rpx;
+		font-size: 32rpx;
+		color: #1F1F1F; 
+	}
+	.content{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-family: 'PingFang SC-Medium';
+		width: 90%;
+		height: 100rpx;
+		margin: 0 auto;
+		font-weight: 400;
+		border-radius: 10rpx;
+		input{
+			width: 80%;
+			height: 100%;
+			font-size: 28rpx;
+			color: #1F1F1F;
+			padding: 0 4%;
+		}
+		text{
+			font-size: 34rpx;
+			color: #1F1F1F;
+			margin-right: 4%;
+		}
+	}
+	.inquiry{
+		padding: 0 100rpx;
+		height: 120rpx;
+		text-align: center;
+		text{
+			font-size: 28rpx;
+			color: #1F1F1F;
+			line-height: 40rpx;
+		}
+	}
+	.operation-btn{
+		display: flex;
+		align-items: center;
+		justify-content: space-evenly;
+		width: 100%;
+		height: 100rpx;
+		margin-top: 20rpx;
+		.btn{
+			position: relative;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 244rpx;
+			height: 72rpx;
+			border-radius: 12rpx;
+			border: solid 2rpx #1F1F1F;
+			font-family: 'PingFang SC-Bold'; 
+			// font-weight: 400;
+			&:last-child{
+				background-color: #1F1F1F;
+			}
+			text{
+				font-size: 32rpx;
+				color: #1F1F1F;
+			}
+			.tag{
+				position: absolute;
+				right: 0;
+				top: 30%;
+				width: 2rpx;
+				height: 40%;
+				background-color: #393939;
+				display: none;
+			}
+			.activity{
+				color: #fff;
+			}
+		}
+	}
+}
+
+
+.a-fadein,
+.a-fadeinT,
+.a-fadeinR,
+.a-fadeinB,
+.a-fadeinL,
+.a-bouncein,
+.a-bounceinT,
+.a-bounceinR,
+.a-bounceinB,
+.a-bounceinL,
+.a-rotatein,
+.a-rotateinLT,
+.a-rotateinLB,
+.a-rotateinRT,
+.a-rotateinRB,
+.a-flipin,
+.a-flipinX,
+.a-flipinY {
+	-webkit-animation: .3s ease-out backwards;
+	-moz-animation: .3s ease-out backwards;
+	-ms-animation: .3s ease-out backwards;
+	-moz-transform: translate3d(0,0,0);
+	-ms-transform: translate3d(0,0,0);
+	-o-transform: translate3d(0,0,0);
+	transform: translate3d(0,0,0);
+}
+
+.a-fadeout,
+.a-fadeoutT,
+.a-fadeoutR,
+.a-fadeoutB,
+.a-fadeoutL,
+.a-bounceout,
+.a-bounceoutT,
+.a-bounceoutR,
+.a-bounceoutB,
+.a-bounceoutL,
+.a-rotateout,
+.a-rotateoutLT,
+.a-rotateoutLB,
+.a-rotateoutRT,
+.a-rotateoutRB,
+.a-flipoutX,
+.a-flipoutY {
+	-webkit-animation: .3s ease-in forwards;
+	-moz-animation: .3s ease-in forwards;
+	-ms-animation: .3s ease-in forwards;
+	animation: .3s ease-in forwards;
+	-moz-transform: translate3d(0,0,0);
+	-ms-transform: translate3d(0,0,0);
+	-o-transform: translate3d(0,0,0);
+	transform: translate3d(0,0,0);
+}
+
+
+/* 淡入 */
+.a-fadein {
+	-webkit-animation-name: fadein;
+	-moz-animation-name: fadein;
+	-ms-animation-name: fadein;
+	animation-name: fadein;
+}
+
+/* 淡出 */
+.a-fadeout {
+	-webkit-animation-name: fadeout;
+	-moz-animation-name: fadeout;
+	-ms-animation-name: fadeout;
+	animation-name: fadeout;
+}
+
+/* 弹入 */
+.a-bouncein {
+	-webkit-animation-name: bouncein;
+	-moz-animation-name: bouncein;
+	-ms-animation-name: bouncein;
+	animation-name: bouncein;
+}
+
+/* 弹出 */
+.a-bounceout {
+	-webkit-animation-name: bounceout;
+	-moz-animation-name: bounceout;
+	-ms-animation-name: bounceout;
+	animation-name: bounceout;
+}
+
+
+/* 淡入 */
+@keyframes fadein {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+/* 淡出 */
+@keyframes fadeout {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+
+/* 弹入 */
+@keyframes bouncein {
+	0% {
+		opacity: 0;
+		transform: scale(0.3);
+	}
+
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+/* 弹出 */
+@keyframes bounceout {
+	0% {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	100% {
+		opacity: 0;
+		transform: scale(0.3);
+	}
+}

components/custome-confirm/customeConfirm.vue

@@ -0,0 +1,164 @@
+<template>
+	<view class="page-total" v-if="isShow">
+		<view class="box" :class="AClass[AnIndex][AnIdx]">
+			<view class="dialog-box">
+				<view class="title">{{options.title}}</view>
+				<view class="content" v-if="options.DialogType == 'input'">
+					<input type="text" v-model="options.value" :placeholder="options.placeholder">
+					<text class="iconfont icon-clear" @click.stop="onClear"></text>
+				</view>
+				<view class="inquiry" v-else-if="options.DialogType == 'inquiry'">
+					<text>{{options.content}}</text>
+				</view>
+				<view class="operation-btn">
+					<view class="btn" @click="onCancel">
+						<text>{{options.btn1}}</text>
+						<text class="tag"></text>
+					</view>
+					<view class="btn" @click="onConfirm">
+						<text class="activity">{{options.btn2}}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				AClass: [
+					['a-fadein', 'a-fadeout'],
+					['a-bouncein', 'a-bounceout'],
+				],
+				AnIndex: 0,
+				AnIdx: 0,
+				isShow: false,
+				SetTime: null,
+				value: '',
+				// parmoise
+				resolve: '',
+				reject: '',
+				promise: '',
+				// 配置
+				options: {
+					// 提示标题
+					title: '',
+					// 内容
+					content: '',
+					btn1: '',
+					btn2: '',
+					// 提示内容
+					placeholder: '请输入内容',
+					// 提示框类型
+					DialogType: 'input',
+					// 动画类型
+					animation: 0,
+				},
+			};
+		},
+		props: {
+			// 提示标题
+			title: {
+				type: String,
+				default: '提示',
+			},
+			// 内容
+			content: {
+				type: String,
+				default: '',
+			},
+			// 提示内容
+			placeholder: {
+				type: String,
+				default: '请输入内容',
+			},
+			// 提示框类型
+			DialogType: {
+				type: String,
+				default: 'input'
+			},
+			// 动画类型
+			animation: {
+				type: Number,
+				default: 0
+			}
+		},
+		methods: {
+			// 询问框
+			confirm(options) {
+				this.AnIndex = options.animation || 0;
+				this.AnIdx = options.animation || 0;
+				this.options = {
+					// 提示标题
+					title: options.title || '',
+					// 内容
+					content: options.content || '',
+					btn1: options.btn1 || '',
+					btn2: options.btn2 || '',
+					// 提示内容
+					placeholder: options.placeholder || '请输入内容',
+					// 提示框类型
+					DialogType: options.DialogType || 'input',
+					// 动画类型
+					animation: options.animation || 0,
+					// input输入的值
+					value: options.value || '',
+				};
+				this.show();
+				this.promise = new Promise((resolve, reject) => {
+					this.resolve = resolve;
+					this.reject = reject;
+				});
+				return this.promise; //返回promise对象,给父级组件调用
+			},
+			/**
+			 * 显示
+			 */
+			show(callback) {
+				this.isShow = true;
+			},
+			/**
+			 * 隐藏
+			 */
+			hide() {
+				this.AnIdx = 1;
+				this.SetTime = setTimeout(() => {
+					this.isShow = false;
+				}, 300);
+			},
+			/**
+			 * 清除输入值
+			 */
+			onClear() {
+				this.options.value = '';
+			},
+			/**
+			 * 取消点击
+			 */
+			onCancel() {
+				this.hide();
+				this.reject({
+					value: this.options.value,
+					isConfirm: true,
+				});
+			},
+			/**
+			 * 确定点击
+			 */
+			onConfirm() {
+				this.hide();
+				this.resolve({
+					value: this.options.value,
+					isConfirm: true,
+				});
+			},
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+	@import 'customeConfirm.scss'
+	
+</style>

components/meCard/meCard.vue

@@ -0,0 +1,220 @@
+<template>
+	<view class="waterfall-item" :style="{width,...customStyle}" @click="goWork(item)">
+		<view class="waterfall-item__image" :style="{width,backgroundColor:item.backgroundColor}">
+			<image :src="item.image" mode="widthFix" style="border-radius: 20rpx;"></image>
+		</view>
+		<view class="waterfall-item__ft">
+			<view class="waterfall-item__ft__title">
+				<text class="value" :style="{color:textColor}">{{item.title}}</text>
+			</view>
+			<view class="waterfall-item__ft__desc">
+				<view class="user">
+					<image :src="item.avator" mode="aspectFill" class="avater">
+					</image>
+					<text class="name" :style="{color:textColor}">{{item.nickname}}</text>
+				</view>
+				<view class="like" @click="changeLike">
+					<image class="like-icon" :src="isLike ?'/static/icon/icon-18.png':'/static/icon/icon-19.png'" mode="">
+					</image>
+					<text class="value" :style="{color:textColor}">{{item.num_like}}</text>
+				</view>
+			</view>
+			<view class="waterfall-item__ft__btn" v-if="false">
+				<image class="waterfall-item__ft__btn__icon" src="@/static/zhHans-text-icon/text-10.png" mode="">
+				</image>
+			</view>
+		</view>
+		<view class="waterfall-item__tips">
+			<view class="item">
+				<image class="look-icon" src="@/static/icon/icon-17.png" mode=""></image>
+				<text class="value" style="color: #fff;">{{item.num_view}}</text>
+			</view>
+			<view class="item" style="background-color: #1F1F1F;">
+				<text class="value" style="color: #ACF934;">精选</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "meCard",
+		props: {
+			width: {
+				type: String,
+				default: ''
+			},
+			item: {
+				type: Object,
+				default: () => ({})
+			},
+			textColor: {
+				type: String,
+				default: '#ff0000'
+			},
+			customStyle: {
+				type: Object,
+				default: () => ({
+					background: '#3F4141',
+				})
+			}
+		},
+		data() {
+			return {
+				isLike: false,
+			};
+		},
+		methods: {
+			changeLike() {
+				this.isLike = !this.isLike
+			},
+			goWork(item) {
+				uni.$emit('check_login', () => {
+					uni.navigateTo({
+						url: '/pages/index/workDetail?id=' + item.id
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.waterfall-item {
+		margin-bottom: 20rpx;
+		border-radius: 30rpx;
+		position: relative;
+
+		// #ifndef APP-NVUE
+		.waterfall-item__image {
+			width: 100%;
+			height: auto;
+			box-sizing: border-box;
+			padding: 28rpx 20rpx;
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		// #endif
+		.waterfall-item__tips {
+			position: absolute;
+			top: 10rpx;
+			padding: 0rpx 10rpx;
+			// #ifndef APP-NVUE
+			box-sizing: border-box;
+			// #endif
+			width: 100%;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+
+			.item {
+				// #ifndef APP-NVUE
+				// #endif
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				background: rgba(0, 0, 0, 0.2);
+				padding: 4rpx 14rpx;
+				border-radius: 12rpx;
+
+				.look-icon {
+					width: 26rpx;
+					height: 26rpx;
+					margin-right: 10rpx;
+				}
+
+				.value {
+					font-size: 20rpx;
+				}
+			}
+		}
+
+		.waterfall-item__ft {
+			padding: 10rpx 20rpx;
+
+			&__title {
+				line-height: 48rpx;
+				font-weight: 700;
+
+				.value {
+					font-size: 30rpx;
+				}
+			}
+
+			&__desc {
+				width: 100%;
+				// #ifndef APP-NVUE
+				display: flex;
+				// #endif
+				// #ifdef APP-NVUE
+				// #endif
+				flex-direction: row;
+				align-items: center;
+				justify-content: space-between;
+				margin: 20rpx 0;
+
+				.user {
+					// #ifndef APP-NVUE
+					display: flex;
+					// #endif
+					// #ifdef APP-NVUE
+					flex-direction: row;
+					// #endif
+					align-items: center;
+
+					.avater {
+						width: 36rpx;
+						height: 36rpx;
+						border-radius: 18rpx;
+						margin-right: 10rpx;
+					}
+
+					.name {
+						font-size: 24rpx;
+					}
+				}
+
+				.like {
+					// #ifndef APP-NVUE
+					display: flex;
+					// #endif
+					// #ifdef APP-NVUE
+					flex-direction: row;
+					// #endif
+					align-items: center;
+
+					.like-icon {
+						width: 30rpx;
+						height: 30rpx;
+						margin-right: 10rpx;
+					}
+
+					.value {
+						font-size: 24rpx;
+					}
+				}
+			}
+
+			&__btn {
+				height: 65rpx;
+				border-radius: 18px;
+				background-image: linear-gradient(to bottom, #BFFE9C, #AEE75D);
+				// #ifndef APP-NVUE
+				background: linear-gradient(180deg, #BFFE9C 0%, #AEE75D 62%, #AEE75D 100%);
+				display: flex;
+				// #endif
+				justify-content: center;
+				align-items: center;
+
+				&__icon {
+					width: 155rpx;
+					height: 32rpx;
+				}
+			}
+		}
+	}
+</style>

components/tabbar/tabbar.vue

@@ -40,7 +40,7 @@
 			},
 			textActiveColor: {
 				type: String,
-				default: '#1ABC9C'
+				default: '#000'
 			},
 			tabbarHeight: {
 				type: Number,
@@ -119,11 +119,13 @@
 		height: 145rpx;
 		background-color: transparent;
 		padding-top: 25rpx;
+		// padding-top: 48rpx;
 		// #ifndef APP-NVUE
 		box-sizing: border-box;
 		// #endif
 		display: flex;
 		flex-direction: column;
+		background: url("@/static/home/taber-bg.png") center top / 100% auto;
 	}
 
 	.tabbar-bottom {
@@ -141,12 +143,12 @@
 
 	.midButton {
 		position: absolute;
-		top: 0px;
-		left: 305rpx;
+		top: 10px;
+		left: 330rpx;
 
 		.image {
-			height: 145rpx;
-			width: 145rpx;
+			height: 96rpx;
+			width: 96rpx;
 		}
 	}
 

mixins/tabbar.js

@@ -2,13 +2,13 @@ export default {
 	data() {
 		return {
 			tabbars: [{
-					text: '',
+					text: '遇见',
 					pagePath: '/pages/index/index',
 					iconPath: '/static/tabbar-icon/index.png',
 					selectedIconPath: '/static/tabbar-icon/indexActive.png'
 				},
 				{
-					text: '',
+					text: '创作',
 					pagePath: '/pages/make/index',
 					iconPath: '/static/tabbar-icon/make.png',
 					selectedIconPath: '/static/tabbar-icon/makeActive.png'
@@ -18,14 +18,14 @@ export default {
 					iconPath: '/static/tabbar-icon/center.png',
 				},
 				{
-					text: '',
+					text: '消息',
 					count: 0,
 					pagePath: '/pages/message/mailMessage',
 					iconPath: '/static/tabbar-icon/message.png',
 					selectedIconPath: '/static/tabbar-icon/messageActive.png'
 				},
 				{
-					text: '',
+					text: '我的',
 					pagePath: '/pages/my/my',
 					iconPath: '/static/tabbar-icon/mine.png',
 					selectedIconPath: '/static/tabbar-icon/mineActive.png'

pages/index/index.scss

@@ -12,8 +12,7 @@
 		padding: 20rpx 20rpx;
 		box-sizing: border-box;
 		background: #ffffff;
-
-
+ 
 		.tab-item {
 			padding: 10rpx 38rpx;
 			color: #1F1F1F;

pages/index/index.vue

@@ -24,15 +24,16 @@
 									style="width: 36rpx; height: 36rpx;margin-left: 15rpx;margin-right: 30rpx;"></image>
 							</view>
 							<view class="weather">
-								<p>{{weather.weather}}🌤️{{weather.temp}}</p>
-								<p>星期五</p>
+								<p>{{weather.weather}}<i :class="'qi-'+ weather.icon"></i>️{{weather.temp}}</p>
+								<p>{{getDayOfWeek}}</p>
 							</view>
 						</view>
 						<view class="search">
-							<uv-input placeholder="“潮玩大作战” 派对季重磅开启!" border="none"
+							<uv-input placeholder="🔥“潮玩大作战” 派对季重磅开启!" border="none"
 								:custom-style="{ background: '#fff', paddingLeft: '25rpx' }" shape="circle">
 
-								<image src="@/static/icon/fiery.png" style="width: 22rpx; height: 30rpx"></image>
+								<image class="testImg" src="@/static/home/icon-hot.png"
+									style="width: 22rpx; height: 30rpx"></image>
 
 								<template #suffix>
 									<view class="input-box">
@@ -349,7 +350,7 @@
 				],
 				currentCity: '北京',
 				windowHeight: "",
-				weather:{
+				weather: {
 					city: "",
 					weather: "",
 					temp: '0℃',
@@ -357,7 +358,14 @@
 				}
 			};
 		},
+		
 		computed: {
+			getDayOfWeek() {
+				const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+				const today = new Date();
+				const dayOfWeek = days[today.getDay()];
+				return dayOfWeek;
+			},
 			currentList() {
 				switch (this.currentTab) {
 					case 0:
@@ -378,14 +386,14 @@
 				return pages;
 			},
 		},
-	 	onLoad() {
+		onLoad() {
 			let that = this;
 			// 计算出可用高度
 			this.windowHeight = uni.getSystemInfoSync().windowHeight + "px";
 			// 不在onLoad中直接加载数据，避免与z-paging组件重复请求
 			// 让z-paging组件通过queryList方法控制数据加载 
 			this.getWeather()
-		 
+
 		},
 		// 上拉加载更多
 		onReachBottom() {
@@ -393,26 +401,28 @@
 		},
 		// 下拉刷新数据
 		methods: {
-			getWeather(){
+			getWeather(city) {
 				uni.request({
 					url: this.$apiHost + '/Index/getAreaInfo',
 					data: {
 						uuid: getApp().globalData.uuid,
 						skey: getApp().globalData.skey,
+						city: city || (this.currentCity=="北京"?"":this.currentCity)
 					},
 					header: {
 						"content-type": "application/json",
 						'sign': getApp().globalData.headerSign
 					},
 					success: (res) => {
-						console.log(res);
-					 this.currentCity = res.data.city 
-						this.weather = res.data	
-							console.log(this.weather ,999,res.data	);
+						console.log(this.weather, "天气数据", res.data);
+						if (res.data.city) {
+							this.currentCity = res.data.city
+							this.weather = res.data
+						}
+
 					},
 					complete: () => {},
-					fail: (e) => {
-					}
+					fail: (e) => {}
 				});
 			},
 			lhSelectCityFun() {
@@ -714,7 +724,7 @@
 					},
 				});
 			},
-		 	loadNewsList() {
+			loadNewsList() {
 				if (this.isLoadingNews) return;
 				this.isLoadingNews = true;
 				// uni.request({
@@ -770,7 +780,7 @@
 					offset: this.newsOffset,
 				}).then(
 					async res => {
-						await res 
+						await res
 						console.log("新闻列表数据:", res);
 						if (
 							res.data.success == "yes" &&
@@ -779,14 +789,14 @@
 						) {
 							this.newsList = [...this.newsList, ...res.data.list];
 							this.newsOffset += res.data.list.length;
-						
+
 							if (res.data.list.length < 20) {
 								this.hasMoreNews = false;
 							}
 						} else {
 							this.hasMoreNews = false;
 						}
-						
+
 						// 无论是否有数据，都需要通知z-paging组件完成刷新
 						if (this.$refs.paging) {
 							this.$refs.paging.complete(this.newsList);
@@ -802,9 +812,9 @@
 						}
 					}).finally(
 					() => {
-						 this.isLoadingNews = false;
+						this.isLoadingNews = false;
 					})
-				 
+
 
 			},
 			loadMoreData() {
@@ -951,4 +961,7 @@
 
 <style lang="scss">
 	@import "index.scss";
+</style>
+<style>
+	@import "@/style/qweather-icons.css";
 </style>

pages/my/my.scss

@@ -1,400 +1,694 @@
 page {
-	background-color: #fff;
+  background-color: #fff;
+  padding-top: var(--status-bar-height);
 }
 .page {
-	background-color: #fff;
-	width: 100%;
-	height:100vh;
+  background-color: #fff;
+  width: 100%;
+  height: 100vh;
 }
 .topBody {
-	width:750rpx;
+  width: 750rpx;
 }
-.header {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	align-items: flex-start;
-	width:750rpx;
-	height:420rpx;
-	position: relative;
-	z-index: 10;
-	position: relative;
-	.topBg {
-		width:750rpx;
-		height:250rpx;
-		background: #90d369;
-		border-radius: 0 0 50% 50% / 0 0 20% 20%;
-		z-index: 0;
-		position: absolute;
-	}
-	/* 新增设置按钮 */
-	.settingBtn {
-		position: absolute;
-		top: 24rpx;
-		right: 30rpx;
-		z-index: 11;
-		width: 48rpx;
-		height: 48rpx;
-		/* 新增点击态 */
-		&:active {
-			opacity: 0.7;
-			transform: scale(0.95);
-		}
-		image {
-			width: 100%;
-			height: 100%;
-		}
-	}
-	.top_num {
-		position: absolute;
-		top: 24rpx;  // 垂直对齐设置按钮
-		right: 98rpx; // 30+48+20=98 预留按钮空间
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-end;
-		align-items: center;
-		z-index: 10;
-		.num_1, .num_2 {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			justify-content: center;
-			background: rgba(255, 255, 255, 0.8);
-			border-radius: 30rpx;
-			padding: 10rpx 20rpx;
-			margin-left: 20rpx;
-			.num_1, .num_2 {
-				margin-left: 10rpx;  // 缩小间距
-				padding: 8rpx 16rpx; // 调整内边距
-			}
-			text:first-child {
-				font-size: 24rpx;line-height: 32rpx;
-				color: #666;
-			}
-			text:last-child {
-				font-size: 32rpx;line-height: 32rpx;
-				font-weight: bold;
-				color: #333;
-			}
-		}
-	}
-	.infoBg {
-		display: flex;
-		flex-direction: column;
-		justify-content: flex-start;
-		align-items: stretch;
-		width: 690rpx;
-		height: 320rpx;
-		margin: 20rpx 30rpx;
-		margin-top: 90rpx;
-		background: rgba(255, 255, 255, 0.95);
-		backdrop-filter: blur(10px);
-		border-radius: 24rpx;
-		padding-top: calc(var(--status-bar-height) + 0rpx);
-		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
-		.top_row {
-			display: flex;
-			flex-direction: row;
-			justify-content: space-between;
-			align-items: flex-start;
-			padding: 20rpx 0;
-			.left {
-				padding-left: 30rpx;padding-right: 0rpx;
-				width:200rpx;
-				image {
-					width:136rpx;
-					height:136rpx;
-					border-radius: 100rpx;
-					border:solid 4rpx #fff;
-				}
-				.level {
-					display: flex;
-					flex-direction: row;
-					justify-content: center;
-					align-items: center;
-					height: 32rpx;
-					padding: 0 12rpx;
-					margin-left: 10rpx;
-					border-radius: 12rpx;
-					background: linear-gradient(90deg, #FF5869 0%, #F83881 100%);
-					font-size: 20rpx;
-					color: #fff;
-					font-weight: normal;
-				}
-			}
-			.right {
-				color:#333;
-				width:500rpx;
-				font-size: 40rpx;padding-top: 20rpx;
-				.nickname {
-					font-weight: bold;
-					margin-bottom: 0rpx;
-					display: flex;
-					flex-direction: row;
-					justify-content: flex-start;
-					align-items: center;
-					image {
-						width:36rpx;
-						margin-left: 8rpx;
-						margin-right: 10rpx;
-					}
-					.level {
-						font-weight: normal;font-size: 32rpx;
-					}
-				}
-				.tags_list {
-					.tag {
-						margin-right: 8rpx;
-					}
-				}
-				.join_date {
-					display: flex;
-					flex-direction: row;
-					justify-content: flex-start;
-					align-items: center;
-					font-size: 28rpx;
-					color:#333;
-					image {
-						width:36rpx;
-						margin-left: 6rpx;
-					}
-				}
-				.follow_info {
-					display: none;
-				}
-			}
-		}
-		.bottom_row {
-			padding: 20rpx 50rpx;
-			.intro_row {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-				margin-bottom: 20rpx;
-				.intro_text {
-					color: #999;
-					font-size: 28rpx;
-				}
-				.add_icon {
-					width: 28rpx;
-					margin-left: 10rpx;
-				}
-			}
-			.follow_info {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-				justify-content: flex-start;
-				.num {
-					font-size: 36rpx;
-					font-weight: bold;
-					color: #333;
-					margin-right: 8rpx;
-				}
-				.label {
-					font-size: 28rpx;
-					color: #999;
-				}
-				.separator {
-					width: 2rpx;
-					height: 24rpx;
-					background-color: #E5E5E5;
-					margin: 0 30rpx;
-				}
-			}
-		}
-	}
-	.title {
-		font-size: 34rpx;
-	}
+.header1 {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 750rpx;
+  height: 420rpx;
+  position: relative;
+  z-index: 10;
+  position: relative;
+  .topBg {
+    width: 750rpx;
+    height: 250rpx;
+    background: #90d369;
+    border-radius: 0 0 50% 50% / 0 0 20% 20%;
+    z-index: 0;
+    position: absolute;
+  }
+  /* 新增设置按钮 */
+  .settingBtn {
+    position: absolute;
+    top: 24rpx;
+    right: 30rpx;
+    z-index: 11;
+    width: 48rpx;
+    height: 48rpx;
+    /* 新增点击态 */
+    &:active {
+      opacity: 0.7;
+      transform: scale(0.95);
+    }
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .top_num {
+    position: absolute;
+    top: 24rpx; // 垂直对齐设置按钮
+    right: 98rpx; // 30+48+20=98 预留按钮空间
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    z-index: 10;
+    .num_1,
+    .num_2 {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 30rpx;
+      padding: 10rpx 20rpx;
+      margin-left: 20rpx;
+      .num_1,
+      .num_2 {
+        margin-left: 10rpx; // 缩小间距
+        padding: 8rpx 16rpx; // 调整内边距
+      }
+      text:first-child {
+        font-size: 24rpx;
+        line-height: 32rpx;
+        color: #666;
+      }
+      text:last-child {
+        font-size: 32rpx;
+        line-height: 32rpx;
+        font-weight: bold;
+        color: #333;
+      }
+    }
+  }
+  .infoBg {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    width: 690rpx;
+    height: 320rpx;
+    margin: 20rpx 30rpx;
+    margin-top: 90rpx;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 24rpx;
+    padding-top: calc(var(--status-bar-height) + 0rpx);
+    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
+    .top_row {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: 20rpx 0;
+      .left {
+        padding-left: 30rpx;
+        padding-right: 0rpx;
+        width: 200rpx;
+        image {
+          width: 136rpx;
+          height: 136rpx;
+          border-radius: 100rpx;
+          border: solid 4rpx #fff;
+        }
+        .level {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          height: 32rpx;
+          padding: 0 12rpx;
+          margin-left: 10rpx;
+          border-radius: 12rpx;
+          background: linear-gradient(90deg, #ff5869 0%, #f83881 100%);
+          font-size: 20rpx;
+          color: #fff;
+          font-weight: normal;
+        }
+      }
+      .right {
+        color: #333;
+        width: 500rpx;
+        font-size: 40rpx;
+        padding-top: 20rpx;
+        .nickname {
+          font-weight: bold;
+          margin-bottom: 0rpx;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          image {
+            width: 36rpx;
+            margin-left: 8rpx;
+            margin-right: 10rpx;
+          }
+          .level {
+            font-weight: normal;
+            font-size: 32rpx;
+          }
+        }
+        .tags_list {
+          .tag {
+            margin-right: 8rpx;
+          }
+        }
+        .join_date {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          font-size: 28rpx;
+          color: #333;
+          image {
+            width: 36rpx;
+            margin-left: 6rpx;
+          }
+        }
+        .follow_info {
+          display: none;
+        }
+      }
+    }
+    .bottom_row {
+      padding: 20rpx 50rpx;
+      .intro_row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 20rpx;
+        .intro_text {
+          color: #999;
+          font-size: 28rpx;
+        }
+        .add_icon {
+          width: 28rpx;
+          margin-left: 10rpx;
+        }
+      }
+      .follow_info {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        .num {
+          font-size: 36rpx;
+          font-weight: bold;
+          color: #333;
+          margin-right: 8rpx;
+        }
+        .label {
+          font-size: 28rpx;
+          color: #999;
+        }
+        .separator {
+          width: 2rpx;
+          height: 24rpx;
+          background-color: #e5e5e5;
+          margin: 0 30rpx;
+        }
+      }
+    }
+  }
+  .title {
+    font-size: 34rpx;
+  }
 }
-.whiteItem {
-	width:690rpx;margin:20rpx auto;
-	.btn {
-		width:100%;height:120rpx;
-		display: flex;flex-direction: row;justify-content: center;align-items: center;
-		background: #2B65D9;color:#fff;
-		border-radius: 120rpx;
-	}
+
+.header {
+  padding: 20rpx;
+  padding-top: 48rpx;
+  background: linear-gradient(225deg, #cdff9f 0%, #acff5f 30%, #d0ffa5 100%);
+  min-height: 720rpx;
+  margin-bottom: -135rpx;
+  .card-box {
+    width: 100%;
+    min-height: 515rpx;
+    position: relative;
+    left: 0;
+    top: 0%;
+    overflow: hidden;
+    .card-top {
+      height: 435rpx;
+      width: 100%;
+      background: url("../../static/me/my-card-bg.png") top center / 100% auto,
+        #fff;
+      position: absolute;
+      top: 0%;
+      left: 0;
+      z-index: 5;
+      padding: 24rpx;
+      padding-top: 16rpx;
+      box-sizing: border-box;
+      border-radius: 25rpx;
+      .top-box {
+        display: flex;
+        justify-content: space-between;
+        padding-top: 8rpx;
+        background: url("../../static/me/car-top-bg-center.png") top center/
+          146rpx 50rpx no-repeat;
+        .hello-box {
+          font-family: "CustomFont" !important;
+          font-size: 36rpx;
+          font-weight: 700;
+        }
+        .settingBtn-box {
+          width: 148rpx;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          image {
+            width: 64rpx;
+            height: 64rpx;
+          }
+        }
+      }
+      .userinfo-box {
+        min-height: 120rpx;
+        width: 100%;
+        display: flex;
+        .avator {
+          width: 120rpx;
+          height: 120rpx;
+          margin-right: 16rpx;
+        }
+        .userinfo-right {
+          .nickname {
+            font-weight: bold;
+            margin-bottom: 0rpx;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            display: flex;
+            > text {
+              max-width: 380rpx;
+              font-family: "PingFang SC-Bold";
+              font-weight: 400;
+              font-size: 36rpx;
+            }
+            image {
+              width: 36rpx;
+              margin-left: 8rpx;
+              margin-right: 10rpx;
+            }
+            .level {
+              font-weight: 400;
+              font-size: 20rpx;
+              font-family: "PingFang SC-Bold";
+              background: linear-gradient(360deg, #acf934 0%, #ffe439 100%);
+              border-radius: 8rpx;
+              padding: 2rpx 8rpx;
+            }
+          }
+          .label {
+            height: 55rpx;
+            height: 110rpx;
+            overflow: hidden;
+            > view {
+              color: #acf934;
+              font-family: "PingFang SC-Medium";
+              font-weight: 400;
+              font-size: 20rpx;
+              background: #1f1f1f;
+              border-radius: 6px 6px 6px 6px;
+              display: inline-block;
+              margin-left: 10rpx;
+              margin-bottom: 10rpx;
+              padding: 6rpx 16rpx;
+            }
+          }
+        }
+      }
+      .intro_row {
+        width: 100%;
+        margin-bottom: 20rpx;
+        display: flex;
+        align-items: center;
+        .intro_text {
+          color: #1f1f1f;
+          font-size: 28rpx;
+          font-family: "PingFang SC-Bold";
+          font-weight: 400;
+          padding-right: 0rpx;
+        }
+        .add_icon {
+          width: 28rpx;
+          margin-left: 10rpx;
+        }
+      }
+      .bom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .follow_info {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 340rpx;
+          .follow-box {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+          }
+          .num {
+            width: 100%;
+            font-size: 36rpx;
+            font-weight: bold;
+            color: #333;
+          }
+          .label {
+            width: 100%;
+            font-size: 28rpx;
+            color: #999;
+          }
+          .separator {
+            width: 2rpx;
+            height: 24rpx;
+            background-color: #e5e5e5;
+            margin: 0 30rpx;
+          }
+        }
+        .points-box {
+          display: flex;
+          justify-content: space-between;
+          .points {
+            display: flex;
+            align-items: center;
+            background: #f2f6f2;
+            border-radius: 238rpx;
+            padding: 6rpx 12rpx 6rpx 8rpx;
+            &:first-child {
+              margin-right: 18rpx;
+            }
+            image {
+              width: 40rpx;
+              height: 40rpx;
+            }
+          }
+        }
+      }
+
+      .follow_info {
+        // display: none;
+      }
+    }
+
+    .card-bom {
+      width: 100%;
+      height: 104rpx;
+      background: url("../../static/me/my-card-bom-bg.png") top center / 100%
+        auto;
+      position: absolute;
+      bottom: 0%;
+      left: 0;
+      padding: 0 28rpx;
+      padding-top: 20rpx;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      > image {
+        width: 34rpx;
+        height: 26rpx;
+      }
+      .content-box {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        color: #acf934;
+        > image {
+          width: 34rpx;
+          height: 34rpx;
+          margin-right: 8rpx;
+        }
+      }
+    }
+  }
 }
 .thread {
-	height:210rpx;
-	padding:50rpx;
-	font-size: 52rpx;
-	color:#6E6A6A;
-	padding-top: 80rpx;
+  height: 210rpx;
+  padding: 50rpx;
+  font-size: 52rpx;
+  color: #6e6a6a;
+  padding-top: 80rpx;
 }
 .myinfo {
-	width: 690rpx;
-	display:flex;
-	flex-direction: column;
-	margin:30rpx 30rpx 60rpx;
-	justify-content: flex-start;
-	
-	.line {
-		width: 100%;
-		height: 2rpx;
-		background: #f0f0f0;
-		margin-bottom: 20rpx;
-	}
-	
-	.tablist {
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-start;
-		align-items: center;
-		margin-bottom: 20rpx;
-		
-		.item {
-			position: relative;
-			margin-right: 60rpx;
-			padding-bottom: 16rpx;
-			
-			.name {
-				font-size: 32rpx;
-				color: #999;
-				font-weight: 500;
-			}
-			
-			&.active {
-				.name {
-					color: #333;
-					font-weight: 600;
-				}
-				
-				&:after {
-					content: '';
-					position: absolute;
-					bottom: 0;
-					left: 0;
-					width: 40rpx;
-					height: 6rpx;
-					background: #90d369;
-					border-radius: 3rpx;
-				}
-			}
-		}
-	}
-	
-	.numlist {
-		display: flex;
-		flex-direction: row;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 28rpx 28rpx 0 0;
+  padding: 24rpx 20rpx;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  background: #fff;
+  .line {
+    width: 100%;
+    height: 2rpx;
+    background: #f0f0f0;
+    margin-bottom: 20rpx;
+  }
+
+  .tablist {
+    display: flex;
+    justify-content: flex-start;
+    // padding: 20rpx 20rpx;
+    box-sizing: border-box;
+    background: #ffffff;
+    .item {
+      padding: 10rpx 38rpx;
+      color: #1f1f1f;
+      font-size: 28rpx;
+      background: #f2f6f2;
+      margin-right: 20rpx;
+      border-radius: 30rpx;
+      position: relative;
+      left: 0;
+      top: 0;
+      .indicator-triangle {
+        position: absolute;
+        bottom: -10rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 10rpx solid transparent;
+        border-right: 10rpx solid transparent;
+        border-top: 10rpx solid #acf934;
+        display: none;
+      }
+      &.active {
+        background: #acf934;
+        font-family: "CustomFont" !important;
+        .indicator-triangle {
+          display: block;
+        }
+      }
+      // &:after {
+      //   content: "";
+      //   position: absolute;
+      //   bottom: 0;
+      //   left: 0;
+      //   width: 40rpx;
+      //   height: 6rpx;
+      //   background: #90d369;
+      //   border-radius: 3rpx;
+      // }
+      //   }
+    }
+  }
+
+  .numlist {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    .item {
+      display: flex;
+      justify-content: center;
+      padding: 20rpx;
+      border-radius: 38rpx;
+      width: 316rpx;
+      height: 186rpx;
+      image {
+        width: 64rpx;
+      }
+      .num {
+        color: #fff;
+        font-size: 36rpx;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .name {
+          font-size: 28rpx;
+          color: #bababa;
+          margin-top: 12rpx;
+        }
+      }
+    }
+  }
+  .numlist1 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .item {
+      width: 346rpx;
+      height: 520rpx;
+      margin-bottom: 30rpx;
+      background: #fff;
+      overflow: hidden;
+      position: relative;
+      left: 0;
+      top: 0;
+      .secrecy {
+        position: absolute;
+        left: 14rpx;
+        top: 14rpx;
+        background: rgba(0, 0, 0, 0.3);
+        border-radius: 24rpx;
+        font-family: "PingFang SC-Medium";
+        font-size: 20rpx;
+        font-weight: 400;
+        color: #fff;
+        display: flex;
+        align-items: center;
 		justify-content: center;
-		align-items: center;
-		.item {
-			display: flex;
-			justify-content: center;
-			padding:20rpx;
-			border-radius: 38rpx;
-			width:316rpx;
-			height:186rpx;
-			image {
-				width:64rpx;
-			}
-			.num {
-				color:#fff;
-				font-size: 36rpx;
-				text-align: center;
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				align-items: center;
-				.name {
-					font-size: 28rpx;
-					color:#BABABA;
-					margin-top: 12rpx;
-				}
-			}
-		}
-	}
-	.numlist2 {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-		
-		.item {
-			width: 330rpx;
-			margin-bottom: 30rpx;
-			background: #fff;
-			border-radius: 16rpx;
-			box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
-			overflow: hidden;
-			
-			.num {
-				position: relative;
-				width: 100%;
-				height: 330rpx;
-				display: flex;
-				flex-direction: column;
-				
-				.icon {
-					width: 100%;
-					height: 260rpx;
-					object-fit: contain;
-					background-color: #f8f9fa;
-				}
-				
-				.queue-status {
-					width: 100%;
-					height: 260rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					background: #f8f9fa;
-					
-					.status-text {
-						font-size: 28rpx;
-						color: #666;
-						text-align: center;
-						padding: 10rpx 20rpx;
-						border-radius: 30rpx;
-						background: rgba(0,0,0,0.05);
-					}
-				}
-				
-				.name {
-					padding: 16rpx;
-					font-size: 28rpx;
-					color: #333;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-				}
-				
-				.task-type-tag {
-					position: absolute;
-					left: 16rpx;
-					bottom: 70rpx;
-					background: rgba(0,0,0,0.6);
-					color: #fff;
-					font-size: 24rpx;
-					padding: 6rpx 16rpx;
-					border-radius: 20rpx;
-				}
-			}
-		}
-	}
-	.loading-more, .no-more {
-		text-align: center;
-		padding: 20rpx 0;
-		color: #999;
-		font-size: 28rpx;
-	}
+		padding: 3rpx 12rpx;
+
+        image {
+          width: 24rpx;
+          height: 24rpx;
+        }
+      }
+      .icon-box {
+        width: 346rpx;
+        height: 468rpx;
+        padding: 28rpx 20rpx;
+        box-sizing: border-box;
+        background-color: #f8f9fa;
+        margin-bottom: 12rpx;
+        .icon {
+        }
+        &.icon-box2 {
+          > view {
+            width: 346rpx;
+            height: 346rpx;
+            overflow: hidden;
+          }
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          padding: 0;
+          justify-content: center;
+        }
+      }
+      .name {
+        font-size: 28rpx;
+        color: #1a4d2e;
+        font-family: "PingFang SC-Medium";
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+  .numlist2 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .item {
+      width: 330rpx;
+      margin-bottom: 30rpx;
+      background: #fff;
+      border-radius: 16rpx;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+      overflow: hidden;
+
+      .num {
+        position: relative;
+        width: 100%;
+        height: 330rpx;
+        display: flex;
+        flex-direction: column;
+
+        .icon {
+          width: 100%;
+          height: 260rpx;
+          object-fit: contain;
+          background-color: #f8f9fa;
+        }
+
+        .queue-status {
+          width: 100%;
+          height: 260rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: #f8f9fa;
+
+          .status-text {
+            font-size: 28rpx;
+            color: #666;
+            text-align: center;
+            padding: 10rpx 20rpx;
+            border-radius: 30rpx;
+            background: rgba(0, 0, 0, 0.05);
+          }
+        }
+
+        .name {
+          padding: 16rpx;
+          font-size: 28rpx;
+          color: #333;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .task-type-tag {
+          position: absolute;
+          left: 16rpx;
+          bottom: 70rpx;
+          background: rgba(0, 0, 0, 0.6);
+          color: #fff;
+          font-size: 24rpx;
+          padding: 6rpx 16rpx;
+          border-radius: 20rpx;
+        }
+      }
+    }
+  }
+  .loading-more,
+  .no-more {
+    text-align: center;
+    padding: 20rpx 0;
+    color: #999;
+    font-size: 28rpx;
+  }
 }
 .btn_submit {
-	width: 660rpx;
-	height: 96rpx;
-	margin:0 auto;
-	border: 2rpx solid #404040;
-	border-radius: 28rpx;
-	font-weight: bold;
-	font-size: 32rpx;
-	color: #FF2A95;
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
+  width: 660rpx;
+  height: 96rpx;
+  margin: 0 auto;
+  border: 2rpx solid #404040;
+  border-radius: 28rpx;
+  font-weight: bold;
+  font-size: 32rpx;
+  color: #ff2a95;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
 }
 .blankHeight {
-	height:100rpx;
-}
+  height: 100rpx;
+}

pages/my/my.vue

@@ -2,6 +2,84 @@
 	<view class="page">
 		<view class="topBody">
 			<view class="header">
+				<view class="card-box">
+					<view class="card-top">
+						<view class="top-box">
+							<view class="hello-box"> Hello! </view>
+							<view class="settingBtn-box">
+								<image src="@/static/me/wd_icon_fenxian.png" mode=""></image>
+								<image src="@/static/me/wd_icon_shezhi.png" mode="" @click="navigateToSettings"></image>
+							</view>
+						</view>
+						<view class="userinfo-box" @click="goPage('/pages/my/editInfo')">
+							<view class="userinfo-left">
+								<CircleAvatar class="avator" :src="myinfo.avator"></CircleAvatar>
+							</view>
+							<view class="userinfo-right">
+								<view class="nickname">
+									<text class="one-omit">{{ myinfo.nickname }}</text>
+									<image src="../../static/icon/wd_icon_nan.png" mode="widthFix"
+										v-if="myinfo.sex_id == 1" />
+									<image src="../../static/icon/wd_icon_nv.png" mode="widthFix"
+										v-else-if="myinfo.sex_id == 2" />
+									<view class="level">Lv{{ myinfo.my_level }}</view>
+								</view>
+								<view class="label">
+									<view v-for="(item, index) in aihao_tags" :key="index + item">
+										{{ item }}
+									</view>
+								</view>
+							</view>
+						</view>
+						<view class="intro_row">
+							<block v-if="myinfo.content == ''">
+								<text class="intro_text  two-omit">添加简介</text>
+								<image src="@/static/icon/wd_icon_edit.png" mode="widthFix" class="add_icon" />
+							</block>
+							<uv-text v-else class="intro_text two-omit"> {{ myinfo.content }} </uv-text>
+						</view>
+						<view class="bom">
+							<view class="follow_info">
+								<view class="follow-box">
+									<view class="num">{{ myinfo.num_attention }}</view>
+									<view class="label">关注</view>
+								</view>
+								<view class="separator"></view>
+								<view class="follow-box">
+									<view class="num">{{ myinfo.num_fans }}</view>
+									<view class="label">粉丝</view>
+								</view>
+								<view class="separator"></view>
+								<view class="follow-box">
+									<view class="num">{{ myinfo.num_like }}</view>
+									<view class="label">获赞</view>
+								</view>
+							</view>
+							<view class="points-box">
+								<view class="points ">
+									<image src="@/static/icon/wd_icon_coin.png" mode=""></image>
+									{{ myinfo.num_gmd }}
+								</view>
+								<view class="points ">
+									<image src="@/static/icon/wd_icon_xingyuan.png" mode=""></image>
+									{{ myinfo.num_gmd }}
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="card-bom" @click="goPage('/pages/vip/index')">
+						<view class="content-box">
+							<image v-if="false" src="@/static/me/icon-vip2.png" mode=""></image>
+							<image v-else-if="0" src="@/static/me/icon-vip1.png" mode=""></image>
+							<image v-else src="@/static/me/icon-vip0.png" mode=""></image>
+							<text v-if="true">开启专属会员权益</text>
+							<text v-else>会员权益生效中</text>
+						</view>
+						<image src="@/static/me/wd_icon_jiantou.png" mode=""></image>
+					</view>
+				</view>
+			</view>
+			<!-- <view class="header1">
 				<view class="topBg"></view>
 				<view class="settingBtn" @click="navigateToSettings">
 					<image src="/static/me/setting.png"></image>
@@ -9,11 +87,11 @@
 				<view class="top_num">
 					<view class="num_1">
 						<text>M币</text>
-						<text>{{myinfo.num_gmd}}</text>
+						<text>{{ myinfo.num_gmd }}</text>
 					</view>
 					<view class="num_2">
 						<text>彩豆</text>
-						<text>{{myinfo.num_gmd}}</text>
+						<text>{{ myinfo.num_gmd }}</text>
 					</view>
 				</view>
 				<view class="infoBg">
@@ -23,13 +101,13 @@
 						</view>
 						<view class="right" @click="goPage('/pages/my/editInfo')">
 							<view class="nickname">
-								<text>{{myinfo.nickname}}</text>
+								<text>{{ myinfo.nickname }}</text>
 								<image src="../../static/icon/man.png" mode="widthFix" v-if="myinfo.sex_id == 1" />
 								<image src="../../static/icon/man.png" mode="widthFix" v-else-if="myinfo.sex_id == 2" />
-								<view class="level">Lv{{myinfo.my_level}}</view>
+								<view class="level">Lv{{ myinfo.my_level }}</view>
 							</view>
 							<view class="tags_list">
-								<block v-for="(item,index) in aihao_tags">
+								<block v-for="(item, index) in aihao_tags">
 									<uni-tag class="tag" type="primary" :inverted="false" :text="item" size="mini" />
 								</block>
 							</view>
@@ -43,51 +121,78 @@
 								<image src="../../static/icon/add.png" mode="widthFix" class="add_icon" />
 							</block>
 							<block v-else>
-								<text class="intro_text">{{myinfo.content}}</text>
+								<text class="intro_text">{{ myinfo.content }}</text>
 							</block>
 						</view>
 						<view class="follow_info">
-							<text class="num">{{myinfo.num_attention}}</text>
+							<text class="num">{{ myinfo.num_attention }}</text>
 							<text class="label">关注</text>
 							<text class="separator"></text>
-							<text class="num">{{myinfo.num_fans}}</text>
+							<text class="num">{{ myinfo.num_fans }}</text>
 							<text class="label">粉丝</text>
 							<text class="separator"></text>
-							<text class="num">{{myinfo.num_like}}</text>
+							<text class="num">{{ myinfo.num_like }}</text>
 							<text class="label">获赞</text>
 						</view>
 					</view>
 				</view>
-
-			</view>
-			<view class="whiteItem">
+			</view> -->
+			<!-- <view class="whiteItem">
 				<view class="btn">开启专属会员权益</view>
-			</view>
+			</view> -->
 			<view class="myinfo">
-				<view class="line"></view>
+				<!-- <view class="line"></view> -->
 				<view class="tablist">
-					<view class="item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
-						<view class="name">我的作品</view>
+					<view class="item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">我的作品
+						<view class="indicator-triangle">
+						</view>
+					</view>
+					<view class="item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">生成中
+						<view class="indicator-triangle">
+						</view>
 					</view>
-					<view class="item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
-						<view class="name">生成中</view>
+				</view>
+				<view class="numlist1" v-if="activeTab === 0" style="margin-top: 60rpx">
+					<view class="item" v-for="(item, index) in worksList" :key="index" @click="goWork(item)">
+						<view v-if="item.task_type == 1" class="icon-box">
+							<image :class="'icon' + item.images" :src="item.images ||
+								item.img_url ||
+								item.url ||
+								'../../static/logo.png'
+								" mode="widthFix" />
+						</view>
+						<view v-if="item.task_type == 2" :class="'icon-box icon-box' + item.task_type">
+							<view>
+								<image :class="'icon' + item.images" :src="item.images ||
+									item.img_url ||
+									item.url ||
+									'../../static/logo.png'
+									" mode="widthFix" />
+							</view>
+						</view>
+						<view class="name one-omit">{{
+							item.title || item.description || "作品" + index
+						}}</view>
+						<view class="secrecy">
+							<image src="@/static/icon/wd_icon_suo.png"></image>
+							仅个人可见
+						</view>
 					</view>
 				</view>
-				<view class="numlist2" style="margin-top: 60rpx;">
-					<view class="item" v-for="(item,index) in worksList" :key="index" v-if="index < 2">
+				<view class="numlist2" v-if="activeTab === 1" style="margin-top: 60rpx">
+					<view class="item" v-for="(item, index) in worksList" :key="index">
 						<view class="num" @click="goWork(item)">
-							<!-- 当activeTab为0时显示图片 -->
-							<image v-if="activeTab === 0" class="icon"
-								:src="item.images || item.img_url || item.url || '../../static/logo.png'"
-								mode="aspectFit" />
-							<image v-if="activeTab === 1 && item.status == 9" class="icon"
+
+							<image v-if="item.status == 9" class="icon"
 								:src="item.result_images || '../../static/logo.png'" mode="aspectFit" />
 
 							<!-- 当activeTab为1时显示队列状态 -->
-							<view class="queue-status" v-if="activeTab === 1">
+							<view class="queue-status">
 								<!-- 排队中 -->
 								<view v-if="item.status === 1" class="status-text">
-									排队中({{item.queue_position}}/{{item.all_position}})</view>
+									排队中
+									({{ item.queue_position }}/{{ item.all_position }})
+								</view>
 								<!-- 排队中 -->
 								<view v-if="item.status === 3 || item.status === 4" class="status-text">
 									生成失败</view>
@@ -97,10 +202,12 @@
 								<view v-else-if="item.status === 9" class="status-text">创作完成</view>
 							</view>
 
-							<view class="name">{{item.title || item.description || '作品'+index}}</view>
+							<view class="name">{{
+								item.title || item.description || "作品" + index
+							}}</view>
 
 							<!-- 显示任务类型标签 -->
-							<view v-if="activeTab === 1" class="task-type-tag">
+							<view class="task-type-tag">
 								<text v-if="item.task_type === 1">灵感创作</text>
 								<text v-else-if="item.task_type === 2">音乐</text>
 							</view>
@@ -112,15 +219,15 @@
 				<!-- <view class="loading-more" v-if="isLoading">加载中...</view>
 				<view class="no-more" v-if="!hasMore && worksList.length > 0">没有更多作品了</view>
 				<view class="no-more" v-if="!hasMore && worksList.length === 0">暂无作品</view> -->
-
 			</view>
-			<view style="width:100%;text-align: center;">杭州智潮创意科技有限公司</view>
+			<view style="width: 100%; text-align: center">杭州智潮创意科技有限公司</view>
 
 			<view class="blankHeight"></view>
 			<view class="blankHeight"></view>
 		</view>
 
-
+		<!-- 确认框 -->
+		<CustomConfirm ref="customConfirm"></CustomConfirm>
 		<!-- 提示框 -->
 		<DialogBox ref="DialogBox"></DialogBox>
 		<tabbar-view :tabbars="tabbars" :currentIndex="4" ref="tabbar"></tabbar-view>
@@ -128,201 +235,224 @@
 </template>
 
 <script>
-	import tabbarView from "@/components/tabbar/tabbar.vue";
-	import tabbar from "@/mixins/tabbar";
-	export default {
-		components: {
-			tabbarView,
-		},
-		mixins: [tabbar],
-		data() {
-			return {
-				title: '',
-				sel: 1,
-				myinfo: {
-					avator: '../../static/logo.png',
-					nickname: '王思思',
-					join_name: '注册日期：2024年5月',
-					num_1: 0,
-					num_2: 0,
-					num_3: 0,
-					num_4: 0,
-					is_login: 'no',
-					num_history: 0,
-					num_collection: 0,
+import tabbarView from "@/components/tabbar/tabbar.vue";
+import tabbar from "@/mixins/tabbar";
+import CustomConfirm from "@/components/custome-confirm/customeConfirm.vue";
+import CircleAvatar from "@/components/CircleAvatar/CircleAvatar.vue";
+import meCard from "@/components/meCard/meCard.vue";
+export default {
+	components: {
+		tabbarView,
+		CustomConfirm,
+		CircleAvatar,
+		meCard
+	},
+	mixins: [tabbar],
+	data() {
+		return {
+			title: "",
+			sel: 1,
+			myinfo: {
+				avator: "../../static/logo.png",
+				nickname: "王思思",
+				join_name: "注册日期：2024年5月",
+				num_1: 0,
+				num_2: 0,
+				num_3: 0,
+				num_4: 0,
+				is_login: "no",
+				num_history: 0,
+				num_collection: 0,
+			},
+			aihao_tags: [],
+			menu_list: [],
+			data_list: [
+				{
+					url: "https://e.zhichao.art/AI_images/a_1112_10.png",
 				},
-				aihao_tags: [],
-				menu_list: [],
-				data_list: [{
-						url: 'https://e.zhichao.art/AI_images/a_1112_10.png',
-					},
-					{
-						url: 'https://e.zhichao.art/AI_images/a_1112_108.png',
-					},
-					{
-						url: 'https://e.zhichao.art/AI_images/a_1112_113.png',
-					},
-					{
-						url: 'https://e.zhichao.art/AI_images/a_1112_13.png',
-					},
-					{
-						url: 'https://e.zhichao.art/AI_images/a_1112_137.png',
-					},
-					{
-						url: 'https://e.zhichao.art/AI_images/a_1112_141.png',
-					},
-					{
-						url: 'https://e.zhichao.art/AI_images/a_1114__562.png',
-					},
-					{
-						url: 'https://e.zhichao.art/AI_images/a_1114__568.png',
-					},
-					{
-						url: 'https://e.zhichao.art/AI_images/a_1114__569.png',
-					},
-					{
-						url: 'https://e.zhichao.art/AI_images/a_1114__570.png',
-					},
-					{
-						url: 'https://e.zhichao.art/AI_images/a_1114__571.png',
-					},
-					{
-						url: 'https://e.zhichao.art/AI_images/a_1114__575.png',
-					},
-
-
-				],
-				activeTab: 0,
-				offset: 0,
-				hasMore: true,
-				isLoading: false,
-				worksList: []
-			}
-		},
-		onLoad() {
-			// setTimeout(function() {
-			// 	uni.setNavigationBarColor({
-			// 		frontColor: '#ffffff',
-			// 		backgroundColor: '#00000000',
-			// 		animation: {
-			// 			duration: 400,
-			// 			timingFunc: 'easeIn'
-			// 		}
-			// 	})
-			// }, 200);
-		},
-		onShow() {
-			uni.$emit('check_login', () => {})
-			// this.loadData();
-			this.offset = 0;
-			this.hasMore = true;
-			this.worksList = [];
-			this.loadInfo();
-			this.loadWorksList();
+				{
+					url: "https://e.zhichao.art/AI_images/a_1112_108.png",
+				},
+				{
+					url: "https://e.zhichao.art/AI_images/a_1112_113.png",
+				},
+				{
+					url: "https://e.zhichao.art/AI_images/a_1112_13.png",
+				},
+				{
+					url: "https://e.zhichao.art/AI_images/a_1112_137.png",
+				},
+				{
+					url: "https://e.zhichao.art/AI_images/a_1112_141.png",
+				},
+				{
+					url: "https://e.zhichao.art/AI_images/a_1114__562.png",
+				},
+				{
+					url: "https://e.zhichao.art/AI_images/a_1114__568.png",
+				},
+				{
+					url: "https://e.zhichao.art/AI_images/a_1114__569.png",
+				},
+				{
+					url: "https://e.zhichao.art/AI_images/a_1114__570.png",
+				},
+				{
+					url: "https://e.zhichao.art/AI_images/a_1114__571.png",
+				},
+				{
+					url: "https://e.zhichao.art/AI_images/a_1114__575.png",
+				},
+			],
+			activeTab: 0,
+			offset: 0,
+			hasMore: true,
+			isLoading: false,
+			worksList: [],
+		};
+	},
+	onLoad() {
+		// setTimeout(function() {
+		// 	uni.setNavigationBarColor({
+		// 		frontColor: '#ffffff',
+		// 		backgroundColor: '#00000000',
+		// 		animation: {
+		// 			duration: 400,
+		// 			timingFunc: 'easeIn'
+		// 		}
+		// 	})
+		// }, 200);
+	},
+	onShow() {
+		uni.$emit("check_login", () => { });
+		// this.loadData();
+		this.offset = 0;
+		this.hasMore = true;
+		this.worksList = [];
+		this.loadInfo();
+		this.loadWorksList();
+	},
+	onReachBottom() {
+		if (this.hasMore && !this.isLoading) {
+			this.loadMoreWorks();
+		}
+	},
+	methods: {
+		async showConfirm() {
+			let that = this;
+			this.$refs["customConfirm"]
+				.confirm({
+					title: "确认解绑",
+					content: "解绑微信账号后将无法继续使用它登录该App账号？",
+					DialogType: "inquiry",
+					btn1: "再考虑一下",
+					btn2: "确认解绑",
+					animation: 0,
+				})
+				.then((res) => { });
 		},
-		onReachBottom() {
-			if (this.hasMore && !this.isLoading) {
-				this.loadMoreWorks();
+		onBack() { },
+		chkSel() {
+			if (this.sel == 1) {
+				this.sel = 0;
+			} else {
+				this.sel = 1;
 			}
 		},
-		methods: {
-			onBack() {},
-			chkSel() {
-				if (this.sel == 1) {
-					this.sel = 0;
-				} else {
-					this.sel = 1;
-				}
-			},
-			goPage(page) {
-				if (page == 'kefu') {
-					let that = this;
-					// #ifdef APP-PLUS
-					plus.share.getServices(res => {
-						const wechat = res.find(i => i.id === 'weixin')
-						if (wechat) {
-							wechat.openCustomerServiceChat({
-								corpid: 'wwbc06aa8311b6ac08',
+		goPage(page) {
+			if (page == "kefu") {
+				let that = this;
+				// #ifdef APP-PLUS
+				plus.share.getServices((res) => {
+					const wechat = res.find((i) => i.id === "weixin");
+					if (wechat) {
+						wechat.openCustomerServiceChat(
+							{
+								corpid: "wwbc06aa8311b6ac08",
 								// url: 'https://work.weixin.qq.com/kfid/kfc4b0bcb4038d00a50'
-								url: that.myinfo.wxkf
-							}, src => {
-								console.log("success:")
-							}, err => {
-								console.log("error:")
-							})
-						} else {
-							uni.showToast({
-								title: '没有检测到微信，请先安装',
-								icon: "error"
-							});
-						}
-					});
-					// #endif
-
-				} else if (page != '') {
-					uni.navigateTo({
-						url: page,
-					})
-				}
-			},
-			loadInfo() {
-				console.log({
-					uuid: getApp().globalData.uuid,
-					skey: getApp().globalData.skey
-				});
-				uni.request({
-					url: this.$apiHost + '/User/getinfo',
-					data: {
-						uuid: getApp().globalData.uuid,
-						skey: getApp().globalData.skey
-					},
-					header: {
-						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
-					},
-					success: (res) => {
-						console.log("----:", res.data);
-						if (res.data.need_login == "yes") {
-							// getApp().globalData.skey = "";
-							// getApp().globalData.uuid = "";
-							uni.removeStorageSync("wapptoken");
-							uni.redirectTo({
-								url: '/pages/login/login'
-							});
-							return;
-						}
-						if (res.data.aihao) {
-							this.aihao_tags = res.data.aihao.split(",");
-						}
-						this.myinfo = res.data;
-					},
-					complete: (com) => {
-						// uni.hideLoading();
-					},
-					fail: (e) => {
-						console.log("----e:", e);
+								url: that.myinfo.wxkf,
+							},
+							(src) => {
+								console.log("success:");
+							},
+							(err) => {
+								console.log("error:");
+							}
+						);
+					} else {
+						uni.showToast({
+							title: "没有检测到微信，请先安装",
+							icon: "error",
+						});
 					}
 				});
-			},
-			onLogout() {
-				let that = this;
-				this.$refs['DialogBox'].confirm({
-					title: '提示',
-					content: '确定退出吗？',
-					DialogType: 'inquiry',
-					btn1: '取消',
-					btn2: '退出',
-					animation: 0
-				}).then((res) => {
+				// #endif
+			} else if (page != "") {
+				uni.navigateTo({
+					url: page,
+				});
+			}
+		},
+		loadInfo() {
+			console.log({
+				uuid: getApp().globalData.uuid,
+				skey: getApp().globalData.skey,
+			});
+			uni.request({
+				url: this.$apiHost + "/User/getinfo",
+				data: {
+					uuid: getApp().globalData.uuid,
+					skey: getApp().globalData.skey,
+				},
+				header: {
+					"content-type": "application/json",
+					sign: getApp().globalData.headerSign,
+				},
+				success: (res) => {
+					console.log("----:",JSON.parse(JSON.stringify( res.data)));
+					if (res.data.need_login == "yes") {
+						// getApp().globalData.skey = "";
+						// getApp().globalData.uuid = "";
+						uni.removeStorageSync("wapptoken");
+						uni.redirectTo({
+							url: "/pages/login/login",
+						});
+						return;
+					}
+					if (res.data.aihao) {
+						this.aihao_tags = res.data.aihao.split(",");
+					}
+					this.myinfo = res.data;
+				},
+				complete: (com) => {
+					// uni.hideLoading();
+				},
+				fail: (e) => {
+					console.log("----e:", e);
+				},
+			});
+		},
+		onLogout() {
+			let that = this;
+			this.$refs["DialogBox"]
+				.confirm({
+					title: "提示",
+					content: "确定退出吗？",
+					DialogType: "inquiry",
+					btn1: "取消",
+					btn2: "退出",
+					animation: 0,
+				})
+				.then((res) => {
 					uni.request({
-						url: that.$apiHost + '/My/logout',
+						url: that.$apiHost + "/My/logout",
 						data: {
 							uuid: getApp().globalData.uuid,
-							skey: getApp().globalData.skey
+							skey: getApp().globalData.skey,
 						},
 						header: {
 							"content-type": "application/json",
-							'sign': getApp().globalData.headerSign
+							sign: getApp().globalData.headerSign,
 						},
 						success: (res) => {
 							console.log("----:", res.data);
@@ -330,118 +460,119 @@
 							// getApp().globalData.uuid = "";
 							uni.removeStorageSync("wapptoken");
 							uni.redirectTo({
-								url: '/pages/login/login'
-							})
+								url: "/pages/login/login",
+							});
 						},
 						complete: (com) => {
 							// uni.hideLoading();
 						},
 						fail: (e) => {
 							console.log("----e:", e);
-						}
+						},
 					});
-				})
-			},
-			switchTab(index) {
-				this.activeTab = index;
-				this.offset = 0;
-				this.hasMore = true;
-				this.worksList = [];
-				this.loadWorksList();
-			},
-			loadWorksList() {
-				if (this.isLoading) return;
-				this.isLoading = true;
+				});
+		},
+		switchTab(index) {
+			this.activeTab = index;
+			this.offset = 0;
+			this.hasMore = true;
+			this.worksList = [];
+			this.loadWorksList();
+		},
+		loadWorksList() {
+			if (this.isLoading) return;
+			this.isLoading = true;
 
-				// 根据activeTab选择不同的API
-				let apiUrl = '';
-				if (this.activeTab === 0) {
-					apiUrl = '/Work/getlist';
-				} else {
-					apiUrl = '/WorkAI/getMyQueueList';
-				}
+			// 根据activeTab选择不同的API
+			let apiUrl = "";
+			if (this.activeTab === 0) {
+				apiUrl = "/Work/getlist";
+			} else {
+				apiUrl = "/WorkAI/getMyQueueList";
+			}
 
-				uni.request({
-					url: this.$apiHost + apiUrl,
-					data: {
-						uuid: getApp().globalData.uuid,
-						skey: getApp().globalData.skey,
-						type: 'my', // 固定为my，表示获取自己的作品
-						offset: this.offset,
-						status: this.activeTab === 0 ? 1 : undefined // 只有我的作品需要status参数
-					},
-					header: {
-						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
-					},
-					success: (res) => {
-						console.log("列表数据:", res.data);
-						if (res.data.success == 'yes' && res.data.list) {
-							if (res.data.list.length > 0) {
-								this.worksList = [...this.worksList, ...res.data.list];
-								this.offset += res.data.list.length;
-							}
+			uni.request({
+				url: this.$apiHost + apiUrl,
+				data: {
+					uuid: getApp().globalData.uuid,
+					skey: getApp().globalData.skey,
+					type: "my", // 固定为my，表示获取自己的作品
+					offset: this.offset,
+					status: this.activeTab === 0 ? 1 : undefined, // 只有我的作品需要status参数
+				},
+				header: {
+					"content-type": "application/json",
+					sign: getApp().globalData.headerSign,
+				},
+				success: (res) => {
+					console.log("列表数据:", JSON.parse(JSON.stringify(res.data)));
+					if (res.data.success == "yes" && res.data.list) {
+						if (res.data.list.length > 0) {
+							this.worksList = [...this.worksList, ...res.data.list];
+							this.offset += res.data.list.length;
+						}
 
-							if (res.data.list.length < 20) {
-								this.hasMore = false;
-							}
-						} else {
+						if (res.data.list.length < 20) {
 							this.hasMore = false;
 						}
+					} else {
+						this.hasMore = false;
+					}
 
-						// 只有在"我的作品"标签下才更新data_list
-						if (this.activeTab === 0) {
-							this.updateDataList();
-						}
-					},
-					complete: () => {
-						this.isLoading = false;
-					},
-					fail: (e) => {
-						console.log("请求列表失败:", e);
-						this.isLoading = false;
+					// 只有在"我的作品"标签下才更新data_list
+					if (this.activeTab === 0) {
+						this.updateDataList();
 					}
+				},
+				complete: () => {
+					this.isLoading = false;
+				},
+				fail: (e) => {
+					console.log("请求列表失败:", e);
+					this.isLoading = false;
+				},
+			});
+		},
+		loadMoreWorks() {
+			if (this.hasMore && !this.isLoading) {
+				this.loadWorksList();
+			}
+		},
+		updateDataList() {
+			this.data_list = this.worksList.map((item) => {
+				return {
+					url:
+						item.images || item.img_url || item.url || "../../static/logo.png",
+					title: item.title || item.description || "作品",
+					id: item.id,
+				};
+			});
+		},
+		goWork(item) {
+			uni.$emit("check_login", () => { });
+			if (this.activeTab == 0) {
+				uni.navigateTo({
+					url: "/pages/index/workDetail?id=" + item.id,
 				});
-			},
-			loadMoreWorks() {
-				if (this.hasMore && !this.isLoading) {
-					this.loadWorksList();
-				}
-			},
-			updateDataList() {
-				this.data_list = this.worksList.map(item => {
-					return {
-						url: item.images || item.img_url || item.url || '../../static/logo.png',
-						title: item.title || item.description || '作品',
-						id: item.id
-					};
-				});
-			},
-			goWork(item) {
-				uni.$emit('check_login', () => {})
-				if (this.activeTab == 0) {
-					uni.navigateTo({
-						url: '/pages/index/workDetail?id=' + item.id
-					})
-				} else {
-					if (item.status >= 9) {
-						uni.navigateTo({
-							url: '/pages/makedetail/makeDetail?id=' + item.id
-						})
-					}
-				}
-			},
-			navigateToSettings() {
-				uni.$emit('check_login', () => {
+			} else {
+				if (item.status >= 9) {
 					uni.navigateTo({
-						url: '/pages/my/setting'
+						url: "/pages/makedetail/makeDetail?id=" + item.id,
 					});
-				})
-			},
-		}
-	}
+				}
+			}
+		},
+		navigateToSettings() {
+			uni.$emit("check_login", () => {
+				uni.navigateTo({
+					url: "/pages/my/setting",
+				});
+			});
+		},
+	},
+};
 </script>
 
 <style scoped lang="scss">
-	@import 'my.scss';
+@import "my.scss";
 </style>

static/fonts/QWeather-Icons-1.6.0/README.md

@@ -0,0 +1,159 @@
+# 和风天气图标 QWeather Icons
+
+[English](#qweather-icons)
+
+和风天气图标是一个开源、漂亮的天气图标库，支持SVG和Web Font，兼容[和风天气API](https://dev.qweather.com)，适用于任何需要天气图标的项目。 
+
+## 下载和安装
+
+你可以通过多种方式下载和安装和风天气图标:
+
+**npm**
+
+```bash
+npm i qweather-icons
+```
+
+**CDN**
+
+```bash
+<link href="https://cdn.jsdelivr.net/npm/qweather-icons@1.3.2/font/qweather-icons.css" rel="stylesheet">
+```
+
+或[下载.zip](https://github.com/qwd/Icons/releases)
+
+## 如何使用
+
+- 在HTML中嵌入SVG
+- 在`img`中使用
+- 通过web font加载
+
+> 如果你是[和风天气开发者](https://dev.qweather.com/)，图标和字体的命名与`icon`字段是一致的，因此你可以直接通过`icon`字段找到你需要的图标和字体。
+
+具体使用方式请参考[使用文档](https://icons.qweather.com/usage/)。
+
+## 设计文件
+
+所有图标的设计资源可以[在Figma中查看](https://www.figma.com/community/file/1196353857920331062)。
+
+## 开发
+
+假设你已经拥有[Node.js](https://nodejs.org)环境。克隆本项目到本地，并安装依赖。
+
+```bash
+git clone https://github.com/qwd/Icons.git
+cd Icons
+npm install
+```
+
+### 运行文档
+
+```bash
+npm run docs
+```
+
+在浏览器打开`https://localhost:1313`即可。
+
+### 创建图标
+
+```bash
+npm run icons
+```
+
+### 其他scripts
+
+请查看`package.json`。
+
+## 自定义图标
+
+参考[自定义文档](https://icons.qweather.com/customize/)。
+
+## 灵感
+
+灵感来自[Boogstrap Icons](https://icons.getbootstrap.com/)
+
+## 许可
+
+版权所属 [QWeather](https://www.qweather.com/)
+
+代码 [MIT](https://github.com/qwd/Icons/blob/main/LICENSE)
+
+图标 [知识共享署名4.0](https://creativecommons.org/licenses/by/4.0/deed.zh)
+
+# QWeather Icons
+
+QWeather Icons is an open source, beautiful weather icon library that supports SVG and Web Font, compatible with [QWeather API](https://dev.qweather.com/en/), and also works in any project that needs weather icons. 
+
+## Install
+
+**npm**
+
+```bash
+npm i qweather-icons
+```
+
+**CDN**
+
+```bash
+<link href="https://cdn.jsdelivr.net/npm/qweather-icons@1.3.2/font/qweather-icons.css" rel="stylesheet">
+```
+
+Or [Download .zip](https://github.com/qwd/Icons/releases)
+
+## How to Use
+
+- Embedding SVG in HTML
+- Use `img` element
+- Loading via web font
+
+> For [QWeather developers](https://dev.qweather.com/en/), the icons and fonts are named the same as the `icon` field, so you can find the icons and fonts you need directly through the `icon` field.
+
+See [Usage](https://icons.qweather.com/en/usage/) for more.
+
+## Design resources
+
+All design resources for icons can be found in [Figma](https://www.figma.com/community/file/1196353857920331062).
+
+## Development
+
+Assume you already have a [Node.js](https://nodejs.org) environment. Clone this project locally and install the dependencies.
+
+```bash
+git clone https://github.com/qwd/Icons.git
+cd Icons
+npm install
+```
+
+### Run docs server
+
+```bash
+npm run docs
+```
+
+Open `https://localhost:1313` in your browser.
+
+### Build icons
+
+```bash
+npm run icons
+```
+
+### Other scripts
+
+See `package.json` for more.
+
+## Customize
+
+See [Customize](https://icons.qweather.com/customize/) for more.
+
+## Inspiration
+
+Inspired by [Boogstrap Icons](https://icons.getbootstrap.com/)
+
+## License
+
+Copyright [QWeather](https://www.qweather.com/en/)
+
+Code for [MIT](https://github.com/qwd/Icons/blob/main/LICENSE)
+
+Icon for [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)

static/fonts/QWeather-Icons-1.6.0/font/demo.html

@@ -0,0 +1,3878 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>qweather-icons</title>
+
+  <style>
+    .icons {
+      display: grid;
+      max-width: 100%;
+      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+      gap: 1.25rem;
+    }
+
+    .icon {
+      background-color: transparent;
+      border-radius: .25rem;
+      font-size: 1.5rem;
+      text-align: center;
+    }
+
+    .label {
+      font-family: qweather-icons;
+    }
+
+    .label {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+      font-size: .625rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  </style>
+
+  <link rel="stylesheet" href="qweather-icons.css">
+</head>
+<body class="text-center">
+
+<h1>qweather-icons</h1>
+
+<div class="icons">
+    <div class="icon">
+      <i class="qi-100"></i>
+    <div class="label">100</div>
+  </div>
+    <div class="icon">
+      <i class="qi-101"></i>
+    <div class="label">101</div>
+  </div>
+    <div class="icon">
+      <i class="qi-102"></i>
+    <div class="label">102</div>
+  </div>
+    <div class="icon">
+      <i class="qi-103"></i>
+    <div class="label">103</div>
+  </div>
+    <div class="icon">
+      <i class="qi-104"></i>
+    <div class="label">104</div>
+  </div>
+    <div class="icon">
+      <i class="qi-150"></i>
+    <div class="label">150</div>
+  </div>
+    <div class="icon">
+      <i class="qi-151"></i>
+    <div class="label">151</div>
+  </div>
+    <div class="icon">
+      <i class="qi-152"></i>
+    <div class="label">152</div>
+  </div>
+    <div class="icon">
+      <i class="qi-153"></i>
+    <div class="label">153</div>
+  </div>
+    <div class="icon">
+      <i class="qi-300"></i>
+    <div class="label">300</div>
+  </div>
+    <div class="icon">
+      <i class="qi-301"></i>
+    <div class="label">301</div>
+  </div>
+    <div class="icon">
+      <i class="qi-302"></i>
+    <div class="label">302</div>
+  </div>
+    <div class="icon">
+      <i class="qi-303"></i>
+    <div class="label">303</div>
+  </div>
+    <div class="icon">
+      <i class="qi-304"></i>
+    <div class="label">304</div>
+  </div>
+    <div class="icon">
+      <i class="qi-305"></i>
+    <div class="label">305</div>
+  </div>
+    <div class="icon">
+      <i class="qi-306"></i>
+    <div class="label">306</div>
+  </div>
+    <div class="icon">
+      <i class="qi-307"></i>
+    <div class="label">307</div>
+  </div>
+    <div class="icon">
+      <i class="qi-308"></i>
+    <div class="label">308</div>
+  </div>
+    <div class="icon">
+      <i class="qi-309"></i>
+    <div class="label">309</div>
+  </div>
+    <div class="icon">
+      <i class="qi-310"></i>
+    <div class="label">310</div>
+  </div>
+    <div class="icon">
+      <i class="qi-311"></i>
+    <div class="label">311</div>
+  </div>
+    <div class="icon">
+      <i class="qi-312"></i>
+    <div class="label">312</div>
+  </div>
+    <div class="icon">
+      <i class="qi-313"></i>
+    <div class="label">313</div>
+  </div>
+    <div class="icon">
+      <i class="qi-314"></i>
+    <div class="label">314</div>
+  </div>
+    <div class="icon">
+      <i class="qi-315"></i>
+    <div class="label">315</div>
+  </div>
+    <div class="icon">
+      <i class="qi-316"></i>
+    <div class="label">316</div>
+  </div>
+    <div class="icon">
+      <i class="qi-317"></i>
+    <div class="label">317</div>
+  </div>
+    <div class="icon">
+      <i class="qi-318"></i>
+    <div class="label">318</div>
+  </div>
+    <div class="icon">
+      <i class="qi-350"></i>
+    <div class="label">350</div>
+  </div>
+    <div class="icon">
+      <i class="qi-351"></i>
+    <div class="label">351</div>
+  </div>
+    <div class="icon">
+      <i class="qi-399"></i>
+    <div class="label">399</div>
+  </div>
+    <div class="icon">
+      <i class="qi-400"></i>
+    <div class="label">400</div>
+  </div>
+    <div class="icon">
+      <i class="qi-401"></i>
+    <div class="label">401</div>
+  </div>
+    <div class="icon">
+      <i class="qi-402"></i>
+    <div class="label">402</div>
+  </div>
+    <div class="icon">
+      <i class="qi-403"></i>
+    <div class="label">403</div>
+  </div>
+    <div class="icon">
+      <i class="qi-404"></i>
+    <div class="label">404</div>
+  </div>
+    <div class="icon">
+      <i class="qi-405"></i>
+    <div class="label">405</div>
+  </div>
+    <div class="icon">
+      <i class="qi-406"></i>
+    <div class="label">406</div>
+  </div>
+    <div class="icon">
+      <i class="qi-407"></i>
+    <div class="label">407</div>
+  </div>
+    <div class="icon">
+      <i class="qi-408"></i>
+    <div class="label">408</div>
+  </div>
+    <div class="icon">
+      <i class="qi-409"></i>
+    <div class="label">409</div>
+  </div>
+    <div class="icon">
+      <i class="qi-410"></i>
+    <div class="label">410</div>
+  </div>
+    <div class="icon">
+      <i class="qi-456"></i>
+    <div class="label">456</div>
+  </div>
+    <div class="icon">
+      <i class="qi-457"></i>
+    <div class="label">457</div>
+  </div>
+    <div class="icon">
+      <i class="qi-499"></i>
+    <div class="label">499</div>
+  </div>
+    <div class="icon">
+      <i class="qi-500"></i>
+    <div class="label">500</div>
+  </div>
+    <div class="icon">
+      <i class="qi-501"></i>
+    <div class="label">501</div>
+  </div>
+    <div class="icon">
+      <i class="qi-502"></i>
+    <div class="label">502</div>
+  </div>
+    <div class="icon">
+      <i class="qi-503"></i>
+    <div class="label">503</div>
+  </div>
+    <div class="icon">
+      <i class="qi-504"></i>
+    <div class="label">504</div>
+  </div>
+    <div class="icon">
+      <i class="qi-507"></i>
+    <div class="label">507</div>
+  </div>
+    <div class="icon">
+      <i class="qi-508"></i>
+    <div class="label">508</div>
+  </div>
+    <div class="icon">
+      <i class="qi-509"></i>
+    <div class="label">509</div>
+  </div>
+    <div class="icon">
+      <i class="qi-510"></i>
+    <div class="label">510</div>
+  </div>
+    <div class="icon">
+      <i class="qi-511"></i>
+    <div class="label">511</div>
+  </div>
+    <div class="icon">
+      <i class="qi-512"></i>
+    <div class="label">512</div>
+  </div>
+    <div class="icon">
+      <i class="qi-513"></i>
+    <div class="label">513</div>
+  </div>
+    <div class="icon">
+      <i class="qi-514"></i>
+    <div class="label">514</div>
+  </div>
+    <div class="icon">
+      <i class="qi-515"></i>
+    <div class="label">515</div>
+  </div>
+    <div class="icon">
+      <i class="qi-800"></i>
+    <div class="label">800</div>
+  </div>
+    <div class="icon">
+      <i class="qi-801"></i>
+    <div class="label">801</div>
+  </div>
+    <div class="icon">
+      <i class="qi-802"></i>
+    <div class="label">802</div>
+  </div>
+    <div class="icon">
+      <i class="qi-803"></i>
+    <div class="label">803</div>
+  </div>
+    <div class="icon">
+      <i class="qi-804"></i>
+    <div class="label">804</div>
+  </div>
+    <div class="icon">
+      <i class="qi-805"></i>
+    <div class="label">805</div>
+  </div>
+    <div class="icon">
+      <i class="qi-806"></i>
+    <div class="label">806</div>
+  </div>
+    <div class="icon">
+      <i class="qi-807"></i>
+    <div class="label">807</div>
+  </div>
+    <div class="icon">
+      <i class="qi-900"></i>
+    <div class="label">900</div>
+  </div>
+    <div class="icon">
+      <i class="qi-901"></i>
+    <div class="label">901</div>
+  </div>
+    <div class="icon">
+      <i class="qi-999"></i>
+    <div class="label">999</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1001"></i>
+    <div class="label">1001</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1002"></i>
+    <div class="label">1002</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1003"></i>
+    <div class="label">1003</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1004"></i>
+    <div class="label">1004</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1005"></i>
+    <div class="label">1005</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1006"></i>
+    <div class="label">1006</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1007"></i>
+    <div class="label">1007</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1008"></i>
+    <div class="label">1008</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1009"></i>
+    <div class="label">1009</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1010"></i>
+    <div class="label">1010</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1011"></i>
+    <div class="label">1011</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1012"></i>
+    <div class="label">1012</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1013"></i>
+    <div class="label">1013</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1014"></i>
+    <div class="label">1014</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1015"></i>
+    <div class="label">1015</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1016"></i>
+    <div class="label">1016</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1017"></i>
+    <div class="label">1017</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1018"></i>
+    <div class="label">1018</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1019"></i>
+    <div class="label">1019</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1020"></i>
+    <div class="label">1020</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1021"></i>
+    <div class="label">1021</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1022"></i>
+    <div class="label">1022</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1023"></i>
+    <div class="label">1023</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1024"></i>
+    <div class="label">1024</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1025"></i>
+    <div class="label">1025</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1026"></i>
+    <div class="label">1026</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1027"></i>
+    <div class="label">1027</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1028"></i>
+    <div class="label">1028</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1029"></i>
+    <div class="label">1029</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1030"></i>
+    <div class="label">1030</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1031"></i>
+    <div class="label">1031</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1032"></i>
+    <div class="label">1032</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1033"></i>
+    <div class="label">1033</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1034"></i>
+    <div class="label">1034</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1035"></i>
+    <div class="label">1035</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1036"></i>
+    <div class="label">1036</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1037"></i>
+    <div class="label">1037</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1038"></i>
+    <div class="label">1038</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1039"></i>
+    <div class="label">1039</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1040"></i>
+    <div class="label">1040</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1041"></i>
+    <div class="label">1041</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1042"></i>
+    <div class="label">1042</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1043"></i>
+    <div class="label">1043</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1044"></i>
+    <div class="label">1044</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1045"></i>
+    <div class="label">1045</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1046"></i>
+    <div class="label">1046</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1047"></i>
+    <div class="label">1047</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1048"></i>
+    <div class="label">1048</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1049"></i>
+    <div class="label">1049</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1050"></i>
+    <div class="label">1050</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1051"></i>
+    <div class="label">1051</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1052"></i>
+    <div class="label">1052</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1053"></i>
+    <div class="label">1053</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1054"></i>
+    <div class="label">1054</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1055"></i>
+    <div class="label">1055</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1056"></i>
+    <div class="label">1056</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1057"></i>
+    <div class="label">1057</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1058"></i>
+    <div class="label">1058</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1059"></i>
+    <div class="label">1059</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1060"></i>
+    <div class="label">1060</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1061"></i>
+    <div class="label">1061</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1062"></i>
+    <div class="label">1062</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1063"></i>
+    <div class="label">1063</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1064"></i>
+    <div class="label">1064</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1065"></i>
+    <div class="label">1065</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1066"></i>
+    <div class="label">1066</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1067"></i>
+    <div class="label">1067</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1068"></i>
+    <div class="label">1068</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1069"></i>
+    <div class="label">1069</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1071"></i>
+    <div class="label">1071</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1072"></i>
+    <div class="label">1072</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1073"></i>
+    <div class="label">1073</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1074"></i>
+    <div class="label">1074</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1075"></i>
+    <div class="label">1075</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1076"></i>
+    <div class="label">1076</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1077"></i>
+    <div class="label">1077</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1078"></i>
+    <div class="label">1078</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1079"></i>
+    <div class="label">1079</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1080"></i>
+    <div class="label">1080</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1081"></i>
+    <div class="label">1081</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1082"></i>
+    <div class="label">1082</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1084"></i>
+    <div class="label">1084</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1085"></i>
+    <div class="label">1085</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1086"></i>
+    <div class="label">1086</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1087"></i>
+    <div class="label">1087</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1088"></i>
+    <div class="label">1088</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1089"></i>
+    <div class="label">1089</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1201"></i>
+    <div class="label">1201</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1202"></i>
+    <div class="label">1202</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1203"></i>
+    <div class="label">1203</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1204"></i>
+    <div class="label">1204</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1205"></i>
+    <div class="label">1205</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1206"></i>
+    <div class="label">1206</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1207"></i>
+    <div class="label">1207</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1208"></i>
+    <div class="label">1208</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1209"></i>
+    <div class="label">1209</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1210"></i>
+    <div class="label">1210</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1211"></i>
+    <div class="label">1211</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1212"></i>
+    <div class="label">1212</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1213"></i>
+    <div class="label">1213</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1214"></i>
+    <div class="label">1214</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1215"></i>
+    <div class="label">1215</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1216"></i>
+    <div class="label">1216</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1217"></i>
+    <div class="label">1217</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1218"></i>
+    <div class="label">1218</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1219"></i>
+    <div class="label">1219</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1221"></i>
+    <div class="label">1221</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1241"></i>
+    <div class="label">1241</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1242"></i>
+    <div class="label">1242</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1243"></i>
+    <div class="label">1243</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1244"></i>
+    <div class="label">1244</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1245"></i>
+    <div class="label">1245</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1246"></i>
+    <div class="label">1246</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1247"></i>
+    <div class="label">1247</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1248"></i>
+    <div class="label">1248</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1249"></i>
+    <div class="label">1249</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1250"></i>
+    <div class="label">1250</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1251"></i>
+    <div class="label">1251</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1271"></i>
+    <div class="label">1271</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1272"></i>
+    <div class="label">1272</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1273"></i>
+    <div class="label">1273</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1274"></i>
+    <div class="label">1274</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1601"></i>
+    <div class="label">1601</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1602"></i>
+    <div class="label">1602</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1603"></i>
+    <div class="label">1603</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1604"></i>
+    <div class="label">1604</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1605"></i>
+    <div class="label">1605</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1606"></i>
+    <div class="label">1606</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1607"></i>
+    <div class="label">1607</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1608"></i>
+    <div class="label">1608</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1609"></i>
+    <div class="label">1609</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1610"></i>
+    <div class="label">1610</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1701"></i>
+    <div class="label">1701</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1702"></i>
+    <div class="label">1702</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1703"></i>
+    <div class="label">1703</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1801"></i>
+    <div class="label">1801</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1802"></i>
+    <div class="label">1802</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1803"></i>
+    <div class="label">1803</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1804"></i>
+    <div class="label">1804</div>
+  </div>
+    <div class="icon">
+      <i class="qi-1805"></i>
+    <div class="label">1805</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2001"></i>
+    <div class="label">2001</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2002"></i>
+    <div class="label">2002</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2003"></i>
+    <div class="label">2003</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2004"></i>
+    <div class="label">2004</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2005"></i>
+    <div class="label">2005</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2006"></i>
+    <div class="label">2006</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2007"></i>
+    <div class="label">2007</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2029"></i>
+    <div class="label">2029</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2030"></i>
+    <div class="label">2030</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2031"></i>
+    <div class="label">2031</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2032"></i>
+    <div class="label">2032</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2033"></i>
+    <div class="label">2033</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2050"></i>
+    <div class="label">2050</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2051"></i>
+    <div class="label">2051</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2052"></i>
+    <div class="label">2052</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2053"></i>
+    <div class="label">2053</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2054"></i>
+    <div class="label">2054</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2070"></i>
+    <div class="label">2070</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2071"></i>
+    <div class="label">2071</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2072"></i>
+    <div class="label">2072</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2073"></i>
+    <div class="label">2073</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2074"></i>
+    <div class="label">2074</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2075"></i>
+    <div class="label">2075</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2076"></i>
+    <div class="label">2076</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2077"></i>
+    <div class="label">2077</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2078"></i>
+    <div class="label">2078</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2079"></i>
+    <div class="label">2079</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2080"></i>
+    <div class="label">2080</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2081"></i>
+    <div class="label">2081</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2082"></i>
+    <div class="label">2082</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2083"></i>
+    <div class="label">2083</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2084"></i>
+    <div class="label">2084</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2085"></i>
+    <div class="label">2085</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2100"></i>
+    <div class="label">2100</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2101"></i>
+    <div class="label">2101</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2102"></i>
+    <div class="label">2102</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2103"></i>
+    <div class="label">2103</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2104"></i>
+    <div class="label">2104</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2105"></i>
+    <div class="label">2105</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2106"></i>
+    <div class="label">2106</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2107"></i>
+    <div class="label">2107</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2108"></i>
+    <div class="label">2108</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2109"></i>
+    <div class="label">2109</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2111"></i>
+    <div class="label">2111</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2120"></i>
+    <div class="label">2120</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2121"></i>
+    <div class="label">2121</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2122"></i>
+    <div class="label">2122</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2123"></i>
+    <div class="label">2123</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2124"></i>
+    <div class="label">2124</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2125"></i>
+    <div class="label">2125</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2126"></i>
+    <div class="label">2126</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2127"></i>
+    <div class="label">2127</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2128"></i>
+    <div class="label">2128</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2129"></i>
+    <div class="label">2129</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2130"></i>
+    <div class="label">2130</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2131"></i>
+    <div class="label">2131</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2132"></i>
+    <div class="label">2132</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2133"></i>
+    <div class="label">2133</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2134"></i>
+    <div class="label">2134</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2135"></i>
+    <div class="label">2135</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2150"></i>
+    <div class="label">2150</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2151"></i>
+    <div class="label">2151</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2152"></i>
+    <div class="label">2152</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2153"></i>
+    <div class="label">2153</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2154"></i>
+    <div class="label">2154</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2155"></i>
+    <div class="label">2155</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2156"></i>
+    <div class="label">2156</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2157"></i>
+    <div class="label">2157</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2158"></i>
+    <div class="label">2158</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2159"></i>
+    <div class="label">2159</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2160"></i>
+    <div class="label">2160</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2161"></i>
+    <div class="label">2161</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2162"></i>
+    <div class="label">2162</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2163"></i>
+    <div class="label">2163</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2164"></i>
+    <div class="label">2164</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2165"></i>
+    <div class="label">2165</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2166"></i>
+    <div class="label">2166</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2190"></i>
+    <div class="label">2190</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2191"></i>
+    <div class="label">2191</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2192"></i>
+    <div class="label">2192</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2193"></i>
+    <div class="label">2193</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2200"></i>
+    <div class="label">2200</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2201"></i>
+    <div class="label">2201</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2202"></i>
+    <div class="label">2202</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2203"></i>
+    <div class="label">2203</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2204"></i>
+    <div class="label">2204</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2205"></i>
+    <div class="label">2205</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2207"></i>
+    <div class="label">2207</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2208"></i>
+    <div class="label">2208</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2209"></i>
+    <div class="label">2209</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2210"></i>
+    <div class="label">2210</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2211"></i>
+    <div class="label">2211</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2212"></i>
+    <div class="label">2212</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2213"></i>
+    <div class="label">2213</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2214"></i>
+    <div class="label">2214</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2215"></i>
+    <div class="label">2215</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2216"></i>
+    <div class="label">2216</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2217"></i>
+    <div class="label">2217</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2218"></i>
+    <div class="label">2218</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2300"></i>
+    <div class="label">2300</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2301"></i>
+    <div class="label">2301</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2302"></i>
+    <div class="label">2302</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2303"></i>
+    <div class="label">2303</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2304"></i>
+    <div class="label">2304</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2305"></i>
+    <div class="label">2305</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2306"></i>
+    <div class="label">2306</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2307"></i>
+    <div class="label">2307</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2308"></i>
+    <div class="label">2308</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2309"></i>
+    <div class="label">2309</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2311"></i>
+    <div class="label">2311</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2312"></i>
+    <div class="label">2312</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2313"></i>
+    <div class="label">2313</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2314"></i>
+    <div class="label">2314</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2315"></i>
+    <div class="label">2315</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2316"></i>
+    <div class="label">2316</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2317"></i>
+    <div class="label">2317</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2318"></i>
+    <div class="label">2318</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2319"></i>
+    <div class="label">2319</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2320"></i>
+    <div class="label">2320</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2321"></i>
+    <div class="label">2321</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2322"></i>
+    <div class="label">2322</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2323"></i>
+    <div class="label">2323</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2324"></i>
+    <div class="label">2324</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2325"></i>
+    <div class="label">2325</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2326"></i>
+    <div class="label">2326</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2327"></i>
+    <div class="label">2327</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2328"></i>
+    <div class="label">2328</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2330"></i>
+    <div class="label">2330</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2331"></i>
+    <div class="label">2331</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2332"></i>
+    <div class="label">2332</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2333"></i>
+    <div class="label">2333</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2341"></i>
+    <div class="label">2341</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2343"></i>
+    <div class="label">2343</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2345"></i>
+    <div class="label">2345</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2346"></i>
+    <div class="label">2346</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2348"></i>
+    <div class="label">2348</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2349"></i>
+    <div class="label">2349</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2350"></i>
+    <div class="label">2350</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2351"></i>
+    <div class="label">2351</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2352"></i>
+    <div class="label">2352</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2353"></i>
+    <div class="label">2353</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2354"></i>
+    <div class="label">2354</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2355"></i>
+    <div class="label">2355</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2356"></i>
+    <div class="label">2356</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2357"></i>
+    <div class="label">2357</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2358"></i>
+    <div class="label">2358</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2359"></i>
+    <div class="label">2359</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2360"></i>
+    <div class="label">2360</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2361"></i>
+    <div class="label">2361</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2362"></i>
+    <div class="label">2362</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2363"></i>
+    <div class="label">2363</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2364"></i>
+    <div class="label">2364</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2365"></i>
+    <div class="label">2365</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2366"></i>
+    <div class="label">2366</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2367"></i>
+    <div class="label">2367</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2368"></i>
+    <div class="label">2368</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2369"></i>
+    <div class="label">2369</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2370"></i>
+    <div class="label">2370</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2371"></i>
+    <div class="label">2371</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2372"></i>
+    <div class="label">2372</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2373"></i>
+    <div class="label">2373</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2374"></i>
+    <div class="label">2374</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2375"></i>
+    <div class="label">2375</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2376"></i>
+    <div class="label">2376</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2377"></i>
+    <div class="label">2377</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2378"></i>
+    <div class="label">2378</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2379"></i>
+    <div class="label">2379</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2380"></i>
+    <div class="label">2380</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2381"></i>
+    <div class="label">2381</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2382"></i>
+    <div class="label">2382</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2383"></i>
+    <div class="label">2383</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2384"></i>
+    <div class="label">2384</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2385"></i>
+    <div class="label">2385</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2386"></i>
+    <div class="label">2386</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2387"></i>
+    <div class="label">2387</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2388"></i>
+    <div class="label">2388</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2389"></i>
+    <div class="label">2389</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2390"></i>
+    <div class="label">2390</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2391"></i>
+    <div class="label">2391</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2392"></i>
+    <div class="label">2392</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2393"></i>
+    <div class="label">2393</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2394"></i>
+    <div class="label">2394</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2395"></i>
+    <div class="label">2395</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2396"></i>
+    <div class="label">2396</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2397"></i>
+    <div class="label">2397</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2398"></i>
+    <div class="label">2398</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2399"></i>
+    <div class="label">2399</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2400"></i>
+    <div class="label">2400</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2409"></i>
+    <div class="label">2409</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2411"></i>
+    <div class="label">2411</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2412"></i>
+    <div class="label">2412</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2413"></i>
+    <div class="label">2413</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2414"></i>
+    <div class="label">2414</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2415"></i>
+    <div class="label">2415</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2416"></i>
+    <div class="label">2416</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2417"></i>
+    <div class="label">2417</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2418"></i>
+    <div class="label">2418</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2419"></i>
+    <div class="label">2419</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2420"></i>
+    <div class="label">2420</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2421"></i>
+    <div class="label">2421</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2422"></i>
+    <div class="label">2422</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2423"></i>
+    <div class="label">2423</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2424"></i>
+    <div class="label">2424</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2425"></i>
+    <div class="label">2425</div>
+  </div>
+    <div class="icon">
+      <i class="qi-2426"></i>
+    <div class="label">2426</div>
+  </div>
+    <div class="icon">
+      <i class="qi-9998"></i>
+    <div class="label">9998</div>
+  </div>
+    <div class="icon">
+      <i class="qi-9999"></i>
+    <div class="label">9999</div>
+  </div>
+    <div class="icon">
+      <i class="qi-100-fill"></i>
+    <div class="label">100-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-101-fill"></i>
+    <div class="label">101-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-102-fill"></i>
+    <div class="label">102-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-103-fill"></i>
+    <div class="label">103-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-104-fill"></i>
+    <div class="label">104-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-150-fill"></i>
+    <div class="label">150-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-151-fill"></i>
+    <div class="label">151-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-152-fill"></i>
+    <div class="label">152-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-153-fill"></i>
+    <div class="label">153-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-300-fill"></i>
+    <div class="label">300-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-301-fill"></i>
+    <div class="label">301-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-302-fill"></i>
+    <div class="label">302-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-303-fill"></i>
+    <div class="label">303-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-304-fill"></i>
+    <div class="label">304-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-305-fill"></i>
+    <div class="label">305-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-306-fill"></i>
+    <div class="label">306-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-307-fill"></i>
+    <div class="label">307-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-308-fill"></i>
+    <div class="label">308-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-309-fill"></i>
+    <div class="label">309-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-310-fill"></i>
+    <div class="label">310-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-311-fill"></i>
+    <div class="label">311-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-312-fill"></i>
+    <div class="label">312-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-313-fill"></i>
+    <div class="label">313-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-314-fill"></i>
+    <div class="label">314-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-315-fill"></i>
+    <div class="label">315-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-316-fill"></i>
+    <div class="label">316-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-317-fill"></i>
+    <div class="label">317-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-318-fill"></i>
+    <div class="label">318-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-350-fill"></i>
+    <div class="label">350-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-351-fill"></i>
+    <div class="label">351-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-399-fill"></i>
+    <div class="label">399-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-400-fill"></i>
+    <div class="label">400-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-401-fill"></i>
+    <div class="label">401-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-402-fill"></i>
+    <div class="label">402-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-403-fill"></i>
+    <div class="label">403-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-404-fill"></i>
+    <div class="label">404-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-405-fill"></i>
+    <div class="label">405-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-406-fill"></i>
+    <div class="label">406-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-407-fill"></i>
+    <div class="label">407-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-408-fill"></i>
+    <div class="label">408-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-409-fill"></i>
+    <div class="label">409-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-410-fill"></i>
+    <div class="label">410-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-456-fill"></i>
+    <div class="label">456-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-457-fill"></i>
+    <div class="label">457-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-499-fill"></i>
+    <div class="label">499-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-500-fill"></i>
+    <div class="label">500-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-501-fill"></i>
+    <div class="label">501-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-502-fill"></i>
+    <div class="label">502-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-503-fill"></i>
+    <div class="label">503-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-504-fill"></i>
+    <div class="label">504-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-507-fill"></i>
+    <div class="label">507-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-508-fill"></i>
+    <div class="label">508-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-509-fill"></i>
+    <div class="label">509-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-510-fill"></i>
+    <div class="label">510-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-511-fill"></i>
+    <div class="label">511-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-512-fill"></i>
+    <div class="label">512-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-513-fill"></i>
+    <div class="label">513-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-514-fill"></i>
+    <div class="label">514-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-515-fill"></i>
+    <div class="label">515-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-900-fill"></i>
+    <div class="label">900-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-901-fill"></i>
+    <div class="label">901-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-999-fill"></i>
+    <div class="label">999-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-qweather-fill"></i>
+    <div class="label">qweather-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-qweather"></i>
+    <div class="label">qweather</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sunny"></i>
+    <div class="label">sunny</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cloudy"></i>
+    <div class="label">cloudy</div>
+  </div>
+    <div class="icon">
+      <i class="qi-few-clouds"></i>
+    <div class="label">few-clouds</div>
+  </div>
+    <div class="icon">
+      <i class="qi-partly-cloudy"></i>
+    <div class="label">partly-cloudy</div>
+  </div>
+    <div class="icon">
+      <i class="qi-overcast"></i>
+    <div class="label">overcast</div>
+  </div>
+    <div class="icon">
+      <i class="qi-clear-night"></i>
+    <div class="label">clear-night</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cloudy-night"></i>
+    <div class="label">cloudy-night</div>
+  </div>
+    <div class="icon">
+      <i class="qi-few-clouds-night"></i>
+    <div class="label">few-clouds-night</div>
+  </div>
+    <div class="icon">
+      <i class="qi-partly-cloudy-night"></i>
+    <div class="label">partly-cloudy-night</div>
+  </div>
+    <div class="icon">
+      <i class="qi-shower-rain"></i>
+    <div class="label">shower-rain</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-shower-rain"></i>
+    <div class="label">heavy-shower-rain</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thundershower"></i>
+    <div class="label">thundershower</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-thunderstorm"></i>
+    <div class="label">heavy-thunderstorm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thundershower-with-hail"></i>
+    <div class="label">thundershower-with-hail</div>
+  </div>
+    <div class="icon">
+      <i class="qi-light-rain"></i>
+    <div class="label">light-rain</div>
+  </div>
+    <div class="icon">
+      <i class="qi-moderate-rain"></i>
+    <div class="label">moderate-rain</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-rain"></i>
+    <div class="label">heavy-rain</div>
+  </div>
+    <div class="icon">
+      <i class="qi-extreme-rain"></i>
+    <div class="label">extreme-rain</div>
+  </div>
+    <div class="icon">
+      <i class="qi-drizzle-rain"></i>
+    <div class="label">drizzle-rain</div>
+  </div>
+    <div class="icon">
+      <i class="qi-storm"></i>
+    <div class="label">storm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-storm"></i>
+    <div class="label">heavy-storm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-severe-storm"></i>
+    <div class="label">severe-storm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-freezing-rain"></i>
+    <div class="label">freezing-rain</div>
+  </div>
+    <div class="icon">
+      <i class="qi-light-to-moderate-rain"></i>
+    <div class="label">light-to-moderate-rain</div>
+  </div>
+    <div class="icon">
+      <i class="qi-moderate-to-heavy-rain"></i>
+    <div class="label">moderate-to-heavy-rain</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-rain-to-storm"></i>
+    <div class="label">heavy-rain-to-storm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-storm-to-heavy-storm"></i>
+    <div class="label">storm-to-heavy-storm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-to-severe-storm"></i>
+    <div class="label">heavy-to-severe-storm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-shower-rain-night"></i>
+    <div class="label">shower-rain-night</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-shower-rain-night"></i>
+    <div class="label">heavy-shower-rain-night</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rain"></i>
+    <div class="label">rain</div>
+  </div>
+    <div class="icon">
+      <i class="qi-light-snow"></i>
+    <div class="label">light-snow</div>
+  </div>
+    <div class="icon">
+      <i class="qi-moderate-snow"></i>
+    <div class="label">moderate-snow</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-snow"></i>
+    <div class="label">heavy-snow</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snowstorm"></i>
+    <div class="label">snowstorm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sleet"></i>
+    <div class="label">sleet</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rain-and-snow"></i>
+    <div class="label">rain-and-snow</div>
+  </div>
+    <div class="icon">
+      <i class="qi-shower-snow"></i>
+    <div class="label">shower-snow</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snow-flurry"></i>
+    <div class="label">snow-flurry</div>
+  </div>
+    <div class="icon">
+      <i class="qi-light-to-moderate-snow"></i>
+    <div class="label">light-to-moderate-snow</div>
+  </div>
+    <div class="icon">
+      <i class="qi-moderate-to-heavy-snow"></i>
+    <div class="label">moderate-to-heavy-snow</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-snow-to-snowstorm"></i>
+    <div class="label">heavy-snow-to-snowstorm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-shower-snow-night"></i>
+    <div class="label">shower-snow-night</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snow-flurry-night"></i>
+    <div class="label">snow-flurry-night</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snow"></i>
+    <div class="label">snow</div>
+  </div>
+    <div class="icon">
+      <i class="qi-mist"></i>
+    <div class="label">mist</div>
+  </div>
+    <div class="icon">
+      <i class="qi-foggy"></i>
+    <div class="label">foggy</div>
+  </div>
+    <div class="icon">
+      <i class="qi-haze"></i>
+    <div class="label">haze</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sand"></i>
+    <div class="label">sand</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dust"></i>
+    <div class="label">dust</div>
+  </div>
+    <div class="icon">
+      <i class="qi-duststorm"></i>
+    <div class="label">duststorm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sandstorm"></i>
+    <div class="label">sandstorm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dense-fog"></i>
+    <div class="label">dense-fog</div>
+  </div>
+    <div class="icon">
+      <i class="qi-strong-fog"></i>
+    <div class="label">strong-fog</div>
+  </div>
+    <div class="icon">
+      <i class="qi-moderate-haze"></i>
+    <div class="label">moderate-haze</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-haze"></i>
+    <div class="label">heavy-haze</div>
+  </div>
+    <div class="icon">
+      <i class="qi-severe-haze"></i>
+    <div class="label">severe-haze</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-fog"></i>
+    <div class="label">heavy-fog</div>
+  </div>
+    <div class="icon">
+      <i class="qi-extra-heavy-fog"></i>
+    <div class="label">extra-heavy-fog</div>
+  </div>
+    <div class="icon">
+      <i class="qi-new-moon"></i>
+    <div class="label">new-moon</div>
+  </div>
+    <div class="icon">
+      <i class="qi-waxing-crescent"></i>
+    <div class="label">waxing-crescent</div>
+  </div>
+    <div class="icon">
+      <i class="qi-first-quarter"></i>
+    <div class="label">first-quarter</div>
+  </div>
+    <div class="icon">
+      <i class="qi-waxing-gibbous"></i>
+    <div class="label">waxing-gibbous</div>
+  </div>
+    <div class="icon">
+      <i class="qi-full-moon"></i>
+    <div class="label">full-moon</div>
+  </div>
+    <div class="icon">
+      <i class="qi-waning-gibbous"></i>
+    <div class="label">waning-gibbous</div>
+  </div>
+    <div class="icon">
+      <i class="qi-last-quarter"></i>
+    <div class="label">last-quarter</div>
+  </div>
+    <div class="icon">
+      <i class="qi-waning-crescent"></i>
+    <div class="label">waning-crescent</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hot"></i>
+    <div class="label">hot</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cold"></i>
+    <div class="label">cold</div>
+  </div>
+    <div class="icon">
+      <i class="qi-unknown"></i>
+    <div class="label">unknown</div>
+  </div>
+    <div class="icon">
+      <i class="qi-typhoon"></i>
+    <div class="label">typhoon</div>
+  </div>
+    <div class="icon">
+      <i class="qi-tornado"></i>
+    <div class="label">tornado</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rainstorm"></i>
+    <div class="label">rainstorm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snow-storm"></i>
+    <div class="label">snow-storm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cold-wave"></i>
+    <div class="label">cold-wave</div>
+  </div>
+    <div class="icon">
+      <i class="qi-gale"></i>
+    <div class="label">gale</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sandstorm-warning"></i>
+    <div class="label">sandstorm-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-low-temperature-freeze"></i>
+    <div class="label">low-temperature-freeze</div>
+  </div>
+    <div class="icon">
+      <i class="qi-high-temperature"></i>
+    <div class="label">high-temperature</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heat-wave"></i>
+    <div class="label">heat-wave</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dry-hot-wind"></i>
+    <div class="label">dry-hot-wind</div>
+  </div>
+    <div class="icon">
+      <i class="qi-downburst"></i>
+    <div class="label">downburst</div>
+  </div>
+    <div class="icon">
+      <i class="qi-avalanche"></i>
+    <div class="label">avalanche</div>
+  </div>
+    <div class="icon">
+      <i class="qi-lightning"></i>
+    <div class="label">lightning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hail"></i>
+    <div class="label">hail</div>
+  </div>
+    <div class="icon">
+      <i class="qi-frost"></i>
+    <div class="label">frost</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-fog-warning"></i>
+    <div class="label">heavy-fog-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-low-level-wind-shearl"></i>
+    <div class="label">low-level-wind-shearl</div>
+  </div>
+    <div class="icon">
+      <i class="qi-haze-warning"></i>
+    <div class="label">haze-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thunder-gust"></i>
+    <div class="label">thunder-gust</div>
+  </div>
+    <div class="icon">
+      <i class="qi-road-icing"></i>
+    <div class="label">road-icing</div>
+  </div>
+    <div class="icon">
+      <i class="qi-drought"></i>
+    <div class="label">drought</div>
+  </div>
+    <div class="icon">
+      <i class="qi-gale-at-sea"></i>
+    <div class="label">gale-at-sea</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heat-stroke"></i>
+    <div class="label">heat-stroke</div>
+  </div>
+    <div class="icon">
+      <i class="qi-wildfire"></i>
+    <div class="label">wildfire</div>
+  </div>
+    <div class="icon">
+      <i class="qi-grassland-fire"></i>
+    <div class="label">grassland-fire</div>
+  </div>
+    <div class="icon">
+      <i class="qi-freeze"></i>
+    <div class="label">freeze</div>
+  </div>
+    <div class="icon">
+      <i class="qi-space-weather"></i>
+    <div class="label">space-weather</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-air-pollution"></i>
+    <div class="label">heavy-air-pollution</div>
+  </div>
+    <div class="icon">
+      <i class="qi-low-temperature-rain-and-snow"></i>
+    <div class="label">low-temperature-rain-and-snow</div>
+  </div>
+    <div class="icon">
+      <i class="qi-strong-convection"></i>
+    <div class="label">strong-convection</div>
+  </div>
+    <div class="icon">
+      <i class="qi-ozone"></i>
+    <div class="label">ozone</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-snow-warning"></i>
+    <div class="label">heavy-snow-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cold-warning"></i>
+    <div class="label">cold-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-continuous-rain"></i>
+    <div class="label">continuous-rain</div>
+  </div>
+    <div class="icon">
+      <i class="qi-waterlogging"></i>
+    <div class="label">waterlogging</div>
+  </div>
+    <div class="icon">
+      <i class="qi-geological-hazard"></i>
+    <div class="label">geological-hazard</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-rainfall"></i>
+    <div class="label">heavy-rainfall</div>
+  </div>
+    <div class="icon">
+      <i class="qi-severely-falling-temperature"></i>
+    <div class="label">severely-falling-temperature</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snow-disaster"></i>
+    <div class="label">snow-disaster</div>
+  </div>
+    <div class="icon">
+      <i class="qi-wildfire-grassland"></i>
+    <div class="label">wildfire-grassland</div>
+  </div>
+    <div class="icon">
+      <i class="qi-medical-meteorology"></i>
+    <div class="label">medical-meteorology</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thunderstorm"></i>
+    <div class="label">thunderstorm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-school-closure"></i>
+    <div class="label">school-closure</div>
+  </div>
+    <div class="icon">
+      <i class="qi-factory-closure"></i>
+    <div class="label">factory-closure</div>
+  </div>
+    <div class="icon">
+      <i class="qi-maritime-risk"></i>
+    <div class="label">maritime-risk</div>
+  </div>
+    <div class="icon">
+      <i class="qi-spring-dust"></i>
+    <div class="label">spring-dust</div>
+  </div>
+    <div class="icon">
+      <i class="qi-falling-temperature"></i>
+    <div class="label">falling-temperature</div>
+  </div>
+    <div class="icon">
+      <i class="qi-typhoon-and-rainstorm"></i>
+    <div class="label">typhoon-and-rainstorm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-severe-cold"></i>
+    <div class="label">severe-cold</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sand-dust"></i>
+    <div class="label">sand-dust</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sea-thunderstorms"></i>
+    <div class="label">sea-thunderstorms</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sea-fog"></i>
+    <div class="label">sea-fog</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sea-thunder"></i>
+    <div class="label">sea-thunder</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sea-typhoon"></i>
+    <div class="label">sea-typhoon</div>
+  </div>
+    <div class="icon">
+      <i class="qi-low-temperature"></i>
+    <div class="label">low-temperature</div>
+  </div>
+    <div class="icon">
+      <i class="qi-road-ice-and-snow"></i>
+    <div class="label">road-ice-and-snow</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thunderstorm-and-gale"></i>
+    <div class="label">thunderstorm-and-gale</div>
+  </div>
+    <div class="icon">
+      <i class="qi-continuous-low-temperature"></i>
+    <div class="label">continuous-low-temperature</div>
+  </div>
+    <div class="icon">
+      <i class="qi-low-visibility"></i>
+    <div class="label">low-visibility</div>
+  </div>
+    <div class="icon">
+      <i class="qi-strong-dust"></i>
+    <div class="label">strong-dust</div>
+  </div>
+    <div class="icon">
+      <i class="qi-gale-in-sea-area"></i>
+    <div class="label">gale-in-sea-area</div>
+  </div>
+    <div class="icon">
+      <i class="qi-short-duration-heavy-shower-rain"></i>
+    <div class="label">short-duration-heavy-shower-rain</div>
+  </div>
+    <div class="icon">
+      <i class="qi-short-lived-heavy-shower-rain"></i>
+    <div class="label">short-lived-heavy-shower-rain</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sea-area-fog"></i>
+    <div class="label">sea-area-fog</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heat-stroke-conditions"></i>
+    <div class="label">heat-stroke-conditions</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-pollution-weather"></i>
+    <div class="label">heavy-pollution-weather</div>
+  </div>
+    <div class="icon">
+      <i class="qi-co-poisoning-weather-conditions"></i>
+    <div class="label">co-poisoning-weather-conditions</div>
+  </div>
+    <div class="icon">
+      <i class="qi-respiratory-disease-weather-wonditions"></i>
+    <div class="label">respiratory-disease-weather-wonditions</div>
+  </div>
+    <div class="icon">
+      <i class="qi-intestinal-disease-weather-wonditions"></i>
+    <div class="label">intestinal-disease-weather-wonditions</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cardiovascular-disease-weather-wonditions"></i>
+    <div class="label">cardiovascular-disease-weather-wonditions</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flooding-weather-risk"></i>
+    <div class="label">flooding-weather-risk</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-pollution-weather-conditions"></i>
+    <div class="label">heavy-pollution-weather-conditions</div>
+  </div>
+    <div class="icon">
+      <i class="qi-urban-flooding-weather-risk"></i>
+    <div class="label">urban-flooding-weather-risk</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flooding-weather-risk-2"></i>
+    <div class="label">flooding-weather-risk-2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-wildfire-weather-risk"></i>
+    <div class="label">wildfire-weather-risk</div>
+  </div>
+    <div class="icon">
+      <i class="qi-meteorological-drought"></i>
+    <div class="label">meteorological-drought</div>
+  </div>
+    <div class="icon">
+      <i class="qi-agricultural-weather-risk"></i>
+    <div class="label">agricultural-weather-risk</div>
+  </div>
+    <div class="icon">
+      <i class="qi-strong-monsoon"></i>
+    <div class="label">strong-monsoon</div>
+  </div>
+    <div class="icon">
+      <i class="qi-ice-accretion-on-wire"></i>
+    <div class="label">ice-accretion-on-wire</div>
+  </div>
+    <div class="icon">
+      <i class="qi-stroke-weather-risk"></i>
+    <div class="label">stroke-weather-risk</div>
+  </div>
+    <div class="icon">
+      <i class="qi-wildfire-grassland-risk"></i>
+    <div class="label">wildfire-grassland-risk</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thunderstorm-and-strong-winds"></i>
+    <div class="label">thunderstorm-and-strong-winds</div>
+  </div>
+    <div class="icon">
+      <i class="qi-low-temperature-freeze2"></i>
+    <div class="label">low-temperature-freeze2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-low-temperature-damage"></i>
+    <div class="label">low-temperature-damage</div>
+  </div>
+    <div class="icon">
+      <i class="qi-national-agricultural-meteorological-risk"></i>
+    <div class="label">national-agricultural-meteorological-risk</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dry-hot-wind-risk-for-winter-wheat"></i>
+    <div class="label">dry-hot-wind-risk-for-winter-wheat</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flood"></i>
+    <div class="label">flood</div>
+  </div>
+    <div class="icon">
+      <i class="qi-urban-flooding"></i>
+    <div class="label">urban-flooding</div>
+  </div>
+    <div class="icon">
+      <i class="qi-reservoir-danger"></i>
+    <div class="label">reservoir-danger</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dike-danger"></i>
+    <div class="label">dike-danger</div>
+  </div>
+    <div class="icon">
+      <i class="qi-ice-flood"></i>
+    <div class="label">ice-flood</div>
+  </div>
+    <div class="icon">
+      <i class="qi-waterlogging2"></i>
+    <div class="label">waterlogging2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flood-and-waterlogging"></i>
+    <div class="label">flood-and-waterlogging</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dry-water"></i>
+    <div class="label">dry-water</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flood-and-flash-flood-in-small-and-medium-rivers"></i>
+    <div class="label">flood-and-flash-flood-in-small-and-medium-rivers</div>
+  </div>
+    <div class="icon">
+      <i class="qi-difficulty-drinking-water-for-rural-people-and-animals"></i>
+    <div class="label">difficulty-drinking-water-for-rural-people-and-animals</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flood-in-small-and-medium-rivers"></i>
+    <div class="label">flood-in-small-and-medium-rivers</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flood-and-drought-advisory"></i>
+    <div class="label">flood-and-drought-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-urban-flood-risk"></i>
+    <div class="label">urban-flood-risk</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flash-flood"></i>
+    <div class="label">flash-flood</div>
+  </div>
+    <div class="icon">
+      <i class="qi-agricultural-drought"></i>
+    <div class="label">agricultural-drought</div>
+  </div>
+    <div class="icon">
+      <i class="qi-urban-water-shortage"></i>
+    <div class="label">urban-water-shortage</div>
+  </div>
+    <div class="icon">
+      <i class="qi-ecological-drought"></i>
+    <div class="label">ecological-drought</div>
+  </div>
+    <div class="icon">
+      <i class="qi-disaster-risk-early-warning"></i>
+    <div class="label">disaster-risk-early-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flash-flood-weather-risk"></i>
+    <div class="label">flash-flood-weather-risk</div>
+  </div>
+    <div class="icon">
+      <i class="qi-water-conservancy-and-drought"></i>
+    <div class="label">water-conservancy-and-drought</div>
+  </div>
+    <div class="icon">
+      <i class="qi-landslide"></i>
+    <div class="label">landslide</div>
+  </div>
+    <div class="icon">
+      <i class="qi-debris-flows"></i>
+    <div class="label">debris-flows</div>
+  </div>
+    <div class="icon">
+      <i class="qi-landslide-event"></i>
+    <div class="label">landslide-event</div>
+  </div>
+    <div class="icon">
+      <i class="qi-ground-collapses"></i>
+    <div class="label">ground-collapses</div>
+  </div>
+    <div class="icon">
+      <i class="qi-ground-fissure"></i>
+    <div class="label">ground-fissure</div>
+  </div>
+    <div class="icon">
+      <i class="qi-land-subsidence"></i>
+    <div class="label">land-subsidence</div>
+  </div>
+    <div class="icon">
+      <i class="qi-volcanic-eruption"></i>
+    <div class="label">volcanic-eruption</div>
+  </div>
+    <div class="icon">
+      <i class="qi-geological-hazard-weather-risk"></i>
+    <div class="label">geological-hazard-weather-risk</div>
+  </div>
+    <div class="icon">
+      <i class="qi-geological-hazard-weather"></i>
+    <div class="label">geological-hazard-weather</div>
+  </div>
+    <div class="icon">
+      <i class="qi-geological-hazard2"></i>
+    <div class="label">geological-hazard2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-geological-hazard-risk"></i>
+    <div class="label">geological-hazard-risk</div>
+  </div>
+    <div class="icon">
+      <i class="qi-air-pollution-incident"></i>
+    <div class="label">air-pollution-incident</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-air-pollution-2"></i>
+    <div class="label">heavy-air-pollution-2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-air-pollution"></i>
+    <div class="label">air-pollution</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-pollution-weather-2"></i>
+    <div class="label">heavy-pollution-weather-2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-very-hot-weather"></i>
+    <div class="label">very-hot-weather</div>
+  </div>
+    <div class="icon">
+      <i class="qi-strong-monsoon-signal"></i>
+    <div class="label">strong-monsoon-signal</div>
+  </div>
+    <div class="icon">
+      <i class="qi-landslip"></i>
+    <div class="label">landslip</div>
+  </div>
+    <div class="icon">
+      <i class="qi-tropical-cyclone"></i>
+    <div class="label">tropical-cyclone</div>
+  </div>
+    <div class="icon">
+      <i class="qi-fire-danger"></i>
+    <div class="label">fire-danger</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flooding-in-the-northern-new-territories"></i>
+    <div class="label">flooding-in-the-northern-new-territories</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cold-weather"></i>
+    <div class="label">cold-weather</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thunderstorm2"></i>
+    <div class="label">thunderstorm2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rainstorm2"></i>
+    <div class="label">rainstorm2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-frost2"></i>
+    <div class="label">frost2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cold-surge-advisory"></i>
+    <div class="label">cold-surge-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-strong-wind-advisory"></i>
+    <div class="label">strong-wind-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rainfall-advisory"></i>
+    <div class="label">rainfall-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-strong-monsoon-signal2"></i>
+    <div class="label">strong-monsoon-signal2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-storm-surge2"></i>
+    <div class="label">storm-surge2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-tropical-cyclone2"></i>
+    <div class="label">tropical-cyclone2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rainstorm3"></i>
+    <div class="label">rainstorm3</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thunderstorm3"></i>
+    <div class="label">thunderstorm3</div>
+  </div>
+    <div class="icon">
+      <i class="qi-wind-warning"></i>
+    <div class="label">wind-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snow-ice"></i>
+    <div class="label">snow-ice</div>
+  </div>
+    <div class="icon">
+      <i class="qi-fog"></i>
+    <div class="label">fog</div>
+  </div>
+    <div class="icon">
+      <i class="qi-coastal-event"></i>
+    <div class="label">coastal-event</div>
+  </div>
+    <div class="icon">
+      <i class="qi-forest-fire"></i>
+    <div class="label">forest-fire</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rain-warning"></i>
+    <div class="label">rain-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rain-flood"></i>
+    <div class="label">rain-flood</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thunderstorm4"></i>
+    <div class="label">thunderstorm4</div>
+  </div>
+    <div class="icon">
+      <i class="qi-high-temperature2"></i>
+    <div class="label">high-temperature2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-low-temperature2"></i>
+    <div class="label">low-temperature2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-avalanches"></i>
+    <div class="label">avalanches</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flooding"></i>
+    <div class="label">flooding</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rain-warning2"></i>
+    <div class="label">rain-warning2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-wind"></i>
+    <div class="label">wind</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snow-warning"></i>
+    <div class="label">snow-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-zonda-wind"></i>
+    <div class="label">zonda-wind</div>
+  </div>
+    <div class="icon">
+      <i class="qi-storm-warning"></i>
+    <div class="label">storm-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dust-raising-winds2"></i>
+    <div class="label">dust-raising-winds2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-strong-surface-winds2"></i>
+    <div class="label">strong-surface-winds2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hot-day2"></i>
+    <div class="label">hot-day2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-warm-night2"></i>
+    <div class="label">warm-night2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cold-day2"></i>
+    <div class="label">cold-day2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thunderstorm-and-lightning2"></i>
+    <div class="label">thunderstorm-and-lightning2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hailstorm2"></i>
+    <div class="label">hailstorm2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sea-area-warning2"></i>
+    <div class="label">sea-area-warning2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-fishermen-warning2"></i>
+    <div class="label">fishermen-warning2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-snow-warning2"></i>
+    <div class="label">heavy-snow-warning2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dust-storm"></i>
+    <div class="label">dust-storm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heat-wave2"></i>
+    <div class="label">heat-wave2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cold-wave2"></i>
+    <div class="label">cold-wave2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-fog2"></i>
+    <div class="label">fog2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-rain-warning"></i>
+    <div class="label">heavy-rain-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-ground-frost2"></i>
+    <div class="label">ground-frost2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-fog3"></i>
+    <div class="label">fog3</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thunder-rain2"></i>
+    <div class="label">thunder-rain2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thunder-storm"></i>
+    <div class="label">thunder-storm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-light-rain-warning"></i>
+    <div class="label">light-rain-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-rain-warning2"></i>
+    <div class="label">heavy-rain-warning2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-fresh-wind"></i>
+    <div class="label">fresh-wind</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thunderstorm-and-dust"></i>
+    <div class="label">thunderstorm-and-dust</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dust-warning"></i>
+    <div class="label">dust-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-high-wave"></i>
+    <div class="label">high-wave</div>
+  </div>
+    <div class="icon">
+      <i class="qi-frost3"></i>
+    <div class="label">frost3</div>
+  </div>
+    <div class="icon">
+      <i class="qi-drop-in-visibility"></i>
+    <div class="label">drop-in-visibility</div>
+  </div>
+    <div class="icon">
+      <i class="qi-low-humidity2"></i>
+    <div class="label">low-humidity2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-accumulated-rain2"></i>
+    <div class="label">accumulated-rain2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cold-wave3"></i>
+    <div class="label">cold-wave3</div>
+  </div>
+    <div class="icon">
+      <i class="qi-tornado2"></i>
+    <div class="label">tornado2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thunderstorm5"></i>
+    <div class="label">thunderstorm5</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hail2"></i>
+    <div class="label">hail2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-rainfall2"></i>
+    <div class="label">heavy-rainfall2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-gale2"></i>
+    <div class="label">gale2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heat-wave3"></i>
+    <div class="label">heat-wave3</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cold-warning2"></i>
+    <div class="label">cold-warning2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-frost4"></i>
+    <div class="label">frost4</div>
+  </div>
+    <div class="icon">
+      <i class="qi-drought2"></i>
+    <div class="label">drought2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-forest-fire2"></i>
+    <div class="label">forest-fire2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-severely-falling-temperature2"></i>
+    <div class="label">severely-falling-temperature2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rainstorm4"></i>
+    <div class="label">rainstorm4</div>
+  </div>
+    <div class="icon">
+      <i class="qi-wind2"></i>
+    <div class="label">wind2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snow-ice2"></i>
+    <div class="label">snow-ice2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-freeze2"></i>
+    <div class="label">freeze2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thunderstorms"></i>
+    <div class="label">thunderstorms</div>
+  </div>
+    <div class="icon">
+      <i class="qi-fog4"></i>
+    <div class="label">fog4</div>
+  </div>
+    <div class="icon">
+      <i class="qi-high-temperature3"></i>
+    <div class="label">high-temperature3</div>
+  </div>
+    <div class="icon">
+      <i class="qi-low-temperature3"></i>
+    <div class="label">low-temperature3</div>
+  </div>
+    <div class="icon">
+      <i class="qi-coastal-event2"></i>
+    <div class="label">coastal-event2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-forest-fire3"></i>
+    <div class="label">forest-fire3</div>
+  </div>
+    <div class="icon">
+      <i class="qi-avalanches2"></i>
+    <div class="label">avalanches2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flood2"></i>
+    <div class="label">flood2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rain-flood2"></i>
+    <div class="label">rain-flood2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-mudflow2"></i>
+    <div class="label">mudflow2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-duststorm-warning"></i>
+    <div class="label">duststorm-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-freezing-rain-and-icing"></i>
+    <div class="label">freezing-rain-and-icing</div>
+  </div>
+    <div class="icon">
+      <i class="qi-other-dangers"></i>
+    <div class="label">other-dangers</div>
+  </div>
+    <div class="icon">
+      <i class="qi-severe-thunderstorms"></i>
+    <div class="label">severe-thunderstorms</div>
+  </div>
+    <div class="icon">
+      <i class="qi-damaging-winds2"></i>
+    <div class="label">damaging-winds2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-veld-fire-conditions2"></i>
+    <div class="label">veld-fire-conditions2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-weather-advisory2"></i>
+    <div class="label">weather-advisory2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thunderstorm6"></i>
+    <div class="label">thunderstorm6</div>
+  </div>
+    <div class="icon">
+      <i class="qi-squall"></i>
+    <div class="label">squall</div>
+  </div>
+    <div class="icon">
+      <i class="qi-air-quality"></i>
+    <div class="label">air-quality</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rainfall"></i>
+    <div class="label">rainfall</div>
+  </div>
+    <div class="icon">
+      <i class="qi-fog5"></i>
+    <div class="label">fog5</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heat"></i>
+    <div class="label">heat</div>
+  </div>
+    <div class="icon">
+      <i class="qi-wildfire2"></i>
+    <div class="label">wildfire2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-wind3"></i>
+    <div class="label">wind3</div>
+  </div>
+    <div class="icon">
+      <i class="qi-freezing-rain-warning"></i>
+    <div class="label">freezing-rain-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-tornado3"></i>
+    <div class="label">tornado3</div>
+  </div>
+    <div class="icon">
+      <i class="qi-blizzard"></i>
+    <div class="label">blizzard</div>
+  </div>
+    <div class="icon">
+      <i class="qi-weather-warning"></i>
+    <div class="label">weather-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-winter-storm"></i>
+    <div class="label">winter-storm</div>
+  </div>
+    <div class="icon">
+      <i class="qi-freezing-drizzle"></i>
+    <div class="label">freezing-drizzle</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snowfall"></i>
+    <div class="label">snowfall</div>
+  </div>
+    <div class="icon">
+      <i class="qi-blowing-snow"></i>
+    <div class="label">blowing-snow</div>
+  </div>
+    <div class="icon">
+      <i class="qi-extreme-cold"></i>
+    <div class="label">extreme-cold</div>
+  </div>
+    <div class="icon">
+      <i class="qi-frost5"></i>
+    <div class="label">frost5</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hazardous-seas-warning"></i>
+    <div class="label">hazardous-seas-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-freezing-spray-warning"></i>
+    <div class="label">heavy-freezing-spray-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-red-flag-warning"></i>
+    <div class="label">red-flag-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-freeze-warning"></i>
+    <div class="label">freeze-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hard-freeze-warning"></i>
+    <div class="label">hard-freeze-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-extreme-cold-warning"></i>
+    <div class="label">extreme-cold-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-wind-chill-warning"></i>
+    <div class="label">wind-chill-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-gale-warning"></i>
+    <div class="label">gale-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-excessive-heat-warning"></i>
+    <div class="label">excessive-heat-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-lake-effect-snow-warning"></i>
+    <div class="label">lake-effect-snow-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-blowing-dust-warning"></i>
+    <div class="label">blowing-dust-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dust-storm-warning"></i>
+    <div class="label">dust-storm-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-storm-warning2"></i>
+    <div class="label">storm-warning2</div>
+  </div>
+    <div class="icon">
+      <i class="qi-tropical-storm-warning"></i>
+    <div class="label">tropical-storm-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-high-wind-warning"></i>
+    <div class="label">high-wind-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-high-surf-warning"></i>
+    <div class="label">high-surf-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flood-warning"></i>
+    <div class="label">flood-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-lakeshore-flood-warning"></i>
+    <div class="label">lakeshore-flood-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-coastal-flood-warning"></i>
+    <div class="label">coastal-flood-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-ashfall-warning"></i>
+    <div class="label">ashfall-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-volcano-warning"></i>
+    <div class="label">volcano-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-earthquake-warning"></i>
+    <div class="label">earthquake-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-avalanche-warning"></i>
+    <div class="label">avalanche-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-winter-storm-warning"></i>
+    <div class="label">winter-storm-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-ice-storm-warning"></i>
+    <div class="label">ice-storm-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snow-squall-warning"></i>
+    <div class="label">snow-squall-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-blizzard-warning"></i>
+    <div class="label">blizzard-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-special-marine-warning"></i>
+    <div class="label">special-marine-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-typhoon-warning"></i>
+    <div class="label">typhoon-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hurricane-warning"></i>
+    <div class="label">hurricane-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hurricane-force-wind-warning"></i>
+    <div class="label">hurricane-force-wind-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-storm-surge-warning"></i>
+    <div class="label">storm-surge-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flash-flood-warning"></i>
+    <div class="label">flash-flood-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-severe-thunderstorm-warning"></i>
+    <div class="label">severe-thunderstorm-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-extreme-wind-warning"></i>
+    <div class="label">extreme-wind-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-tornado-warning"></i>
+    <div class="label">tornado-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-tsunami-warning"></i>
+    <div class="label">tsunami-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-fire-weather-watch"></i>
+    <div class="label">fire-weather-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-freeze-watch"></i>
+    <div class="label">freeze-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hard-freeze-watch"></i>
+    <div class="label">hard-freeze-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-wind-chill-watch"></i>
+    <div class="label">wind-chill-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-extreme-cold-watch"></i>
+    <div class="label">extreme-cold-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-excessive-heat-watch"></i>
+    <div class="label">excessive-heat-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-high-wind-watch"></i>
+    <div class="label">high-wind-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flood-watch"></i>
+    <div class="label">flood-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-lakeshore-flood-watch"></i>
+    <div class="label">lakeshore-flood-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-coastal-flood-watch"></i>
+    <div class="label">coastal-flood-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-freezing-spray-watch"></i>
+    <div class="label">heavy-freezing-spray-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hazardous-seas-watch"></i>
+    <div class="label">hazardous-seas-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-winter-storm-watch"></i>
+    <div class="label">winter-storm-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-gale-watch"></i>
+    <div class="label">gale-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-avalanche-watch"></i>
+    <div class="label">avalanche-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-storm-watch"></i>
+    <div class="label">storm-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-tropical-storm-watch"></i>
+    <div class="label">tropical-storm-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-typhoon-watch"></i>
+    <div class="label">typhoon-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hurricane-force-wind-watch"></i>
+    <div class="label">hurricane-force-wind-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hurricane-watch"></i>
+    <div class="label">hurricane-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-storm-surge-watch"></i>
+    <div class="label">storm-surge-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flash-flood-watch"></i>
+    <div class="label">flash-flood-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-severe-thunderstorm-watch"></i>
+    <div class="label">severe-thunderstorm-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-tornado-watch"></i>
+    <div class="label">tornado-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-tsunami-watch"></i>
+    <div class="label">tsunami-watch</div>
+  </div>
+    <div class="icon">
+      <i class="qi-air-stagnation-advisory"></i>
+    <div class="label">air-stagnation-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-low-water-advisory"></i>
+    <div class="label">low-water-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-freezing-spray-advisory"></i>
+    <div class="label">freezing-spray-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-freezing-fog-advisory"></i>
+    <div class="label">freezing-fog-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-ashfall-advisory"></i>
+    <div class="label">ashfall-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-frost-advisory"></i>
+    <div class="label">frost-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-wind-advisory"></i>
+    <div class="label">wind-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-lake-wind-advisory"></i>
+    <div class="label">lake-wind-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-blowing-dust-advisory"></i>
+    <div class="label">blowing-dust-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dust-advisory"></i>
+    <div class="label">dust-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-brisk-wind-advisory"></i>
+    <div class="label">brisk-wind-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-small-craft-advisory"></i>
+    <div class="label">small-craft-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-small-craft-advisory-for-winds"></i>
+    <div class="label">small-craft-advisory-for-winds</div>
+  </div>
+    <div class="icon">
+      <i class="qi-small-craft-advisory-for-rough-bar"></i>
+    <div class="label">small-craft-advisory-for-rough-bar</div>
+  </div>
+    <div class="icon">
+      <i class="qi-small-craft-advisory-for-hazardous-seas"></i>
+    <div class="label">small-craft-advisory-for-hazardous-seas</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dense-smoke-advisory"></i>
+    <div class="label">dense-smoke-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dense-fog-advisory"></i>
+    <div class="label">dense-fog-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-high-surf-advisory"></i>
+    <div class="label">high-surf-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-coastal-flood-advisory"></i>
+    <div class="label">coastal-flood-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-lakeshore-flood-advisory"></i>
+    <div class="label">lakeshore-flood-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hydrologic-advisory"></i>
+    <div class="label">hydrologic-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flood-advisory"></i>
+    <div class="label">flood-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heat-advisory"></i>
+    <div class="label">heat-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-wind-chill-advisory"></i>
+    <div class="label">wind-chill-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-winter-weather-advisory"></i>
+    <div class="label">winter-weather-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-avalanche-advisory"></i>
+    <div class="label">avalanche-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-tsunami-advisory"></i>
+    <div class="label">tsunami-advisory</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flood-statement"></i>
+    <div class="label">flood-statement</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hydrologic-outlook"></i>
+    <div class="label">hydrologic-outlook</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hazardous-weather-outlook"></i>
+    <div class="label">hazardous-weather-outlook</div>
+  </div>
+    <div class="icon">
+      <i class="qi-air-quality-alert"></i>
+    <div class="label">air-quality-alert</div>
+  </div>
+    <div class="icon">
+      <i class="qi-extreme-fire-danger"></i>
+    <div class="label">extreme-fire-danger</div>
+  </div>
+    <div class="icon">
+      <i class="qi-marine-weather-statement"></i>
+    <div class="label">marine-weather-statement</div>
+  </div>
+    <div class="icon">
+      <i class="qi-special-weather-statement"></i>
+    <div class="label">special-weather-statement</div>
+  </div>
+    <div class="icon">
+      <i class="qi-lakeshore-flood-statement"></i>
+    <div class="label">lakeshore-flood-statement</div>
+  </div>
+    <div class="icon">
+      <i class="qi-coastal-flood-statement"></i>
+    <div class="label">coastal-flood-statement</div>
+  </div>
+    <div class="icon">
+      <i class="qi-beach-hazards-statement"></i>
+    <div class="label">beach-hazards-statement</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rip-current-statement"></i>
+    <div class="label">rip-current-statement</div>
+  </div>
+    <div class="icon">
+      <i class="qi-tropical-depression-local-statement"></i>
+    <div class="label">tropical-depression-local-statement</div>
+  </div>
+    <div class="icon">
+      <i class="qi-tropical-storm-local-statement"></i>
+    <div class="label">tropical-storm-local-statement</div>
+  </div>
+    <div class="icon">
+      <i class="qi-typhoon-local-statement"></i>
+    <div class="label">typhoon-local-statement</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hurricane-local-statement"></i>
+    <div class="label">hurricane-local-statement</div>
+  </div>
+    <div class="icon">
+      <i class="qi-severe-weather-statement"></i>
+    <div class="label">severe-weather-statement</div>
+  </div>
+    <div class="icon">
+      <i class="qi-flash-flood-statement"></i>
+    <div class="label">flash-flood-statement</div>
+  </div>
+    <div class="icon">
+      <i class="qi-severe-weather-warning"></i>
+    <div class="label">severe-weather-warning</div>
+  </div>
+    <div class="icon">
+      <i class="qi-warning-default"></i>
+    <div class="label">warning-default</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sunny-fill"></i>
+    <div class="label">sunny-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cloudy-fill"></i>
+    <div class="label">cloudy-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-few-clouds-fill"></i>
+    <div class="label">few-clouds-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-partly-cloudy-fill"></i>
+    <div class="label">partly-cloudy-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-overcast-fill"></i>
+    <div class="label">overcast-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-clear-night-fill"></i>
+    <div class="label">clear-night-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cloudy-night-fill"></i>
+    <div class="label">cloudy-night-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-few-clouds-night-fill"></i>
+    <div class="label">few-clouds-night-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-partly-cloudy-night-fill"></i>
+    <div class="label">partly-cloudy-night-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-shower-rain-fill"></i>
+    <div class="label">shower-rain-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-shower-rain-fill"></i>
+    <div class="label">heavy-shower-rain-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thundershower-fill"></i>
+    <div class="label">thundershower-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-thunderstorm-fill"></i>
+    <div class="label">heavy-thunderstorm-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-thundershower-with-hail-fill"></i>
+    <div class="label">thundershower-with-hail-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-light-rain-fill"></i>
+    <div class="label">light-rain-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-moderate-rain-fill"></i>
+    <div class="label">moderate-rain-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-rain-fill"></i>
+    <div class="label">heavy-rain-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-extreme-rain-fill"></i>
+    <div class="label">extreme-rain-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-drizzle-rain-fill"></i>
+    <div class="label">drizzle-rain-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-storm-fill"></i>
+    <div class="label">storm-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-storm-fill"></i>
+    <div class="label">heavy-storm-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-severe-storm-fill"></i>
+    <div class="label">severe-storm-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-freezing-rain-fill"></i>
+    <div class="label">freezing-rain-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-light-to-moderate-rain-fill"></i>
+    <div class="label">light-to-moderate-rain-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-moderate-to-heavy-rain-fill"></i>
+    <div class="label">moderate-to-heavy-rain-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-rain-to-storm-fill"></i>
+    <div class="label">heavy-rain-to-storm-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-storm-to-heavy-storm-fill"></i>
+    <div class="label">storm-to-heavy-storm-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-to-severe-storm-fill"></i>
+    <div class="label">heavy-to-severe-storm-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-shower-rain-night-fill"></i>
+    <div class="label">shower-rain-night-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-shower-rain-night-fill"></i>
+    <div class="label">heavy-shower-rain-night-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rain-fill"></i>
+    <div class="label">rain-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-light-snow-fill"></i>
+    <div class="label">light-snow-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-moderate-snow-fill"></i>
+    <div class="label">moderate-snow-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-snow-fill"></i>
+    <div class="label">heavy-snow-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snowstorm-fill"></i>
+    <div class="label">snowstorm-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sleet-fill"></i>
+    <div class="label">sleet-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-rain-and-snow-fill"></i>
+    <div class="label">rain-and-snow-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-shower-snow-fill"></i>
+    <div class="label">shower-snow-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snow-flurry-fill"></i>
+    <div class="label">snow-flurry-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-light-to-moderate-snow-fill"></i>
+    <div class="label">light-to-moderate-snow-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-moderate-to-heavy-snow-fill"></i>
+    <div class="label">moderate-to-heavy-snow-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-snow-to-snowstorm-fill"></i>
+    <div class="label">heavy-snow-to-snowstorm-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-shower-snow-night-fill"></i>
+    <div class="label">shower-snow-night-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snow-flurry-night-fill"></i>
+    <div class="label">snow-flurry-night-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-snow-fill"></i>
+    <div class="label">snow-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-mist-fill"></i>
+    <div class="label">mist-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-foggy-fill"></i>
+    <div class="label">foggy-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-haze-fill"></i>
+    <div class="label">haze-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sand-fill"></i>
+    <div class="label">sand-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dust-fill"></i>
+    <div class="label">dust-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-duststorm-fill"></i>
+    <div class="label">duststorm-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-sandstorm-fill"></i>
+    <div class="label">sandstorm-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-dense-fog-fill"></i>
+    <div class="label">dense-fog-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-strong-fog-fill"></i>
+    <div class="label">strong-fog-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-moderate-haze-fill"></i>
+    <div class="label">moderate-haze-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-haze-fill"></i>
+    <div class="label">heavy-haze-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-severe-haze-fill"></i>
+    <div class="label">severe-haze-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-heavy-fog-fill"></i>
+    <div class="label">heavy-fog-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-extra-heavy-fog-fill"></i>
+    <div class="label">extra-heavy-fog-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-hot-fill"></i>
+    <div class="label">hot-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-cold-fill"></i>
+    <div class="label">cold-fill</div>
+  </div>
+    <div class="icon">
+      <i class="qi-unknown-fill"></i>
+    <div class="label">unknown-fill</div>
+  </div>
+</div>
+
+</body>
+</html>

static/fonts/QWeather-Icons-1.6.0/font/qweather-icons.json

@@ -0,0 +1,960 @@
+{
+  "100": 61697,
+  "101": 61698,
+  "102": 61699,
+  "103": 61700,
+  "104": 61701,
+  "150": 61702,
+  "151": 61703,
+  "152": 61704,
+  "153": 61705,
+  "300": 61706,
+  "301": 61707,
+  "302": 61708,
+  "303": 61709,
+  "304": 61710,
+  "305": 61711,
+  "306": 61712,
+  "307": 61713,
+  "308": 61714,
+  "309": 61715,
+  "310": 61716,
+  "311": 61717,
+  "312": 61718,
+  "313": 61719,
+  "314": 61720,
+  "315": 61721,
+  "316": 61722,
+  "317": 61723,
+  "318": 61724,
+  "350": 61725,
+  "351": 61726,
+  "399": 61727,
+  "400": 61728,
+  "401": 61729,
+  "402": 61730,
+  "403": 61731,
+  "404": 61732,
+  "405": 61733,
+  "406": 61734,
+  "407": 61735,
+  "408": 61736,
+  "409": 61737,
+  "410": 61738,
+  "456": 61739,
+  "457": 61740,
+  "499": 61741,
+  "500": 61742,
+  "501": 61743,
+  "502": 61744,
+  "503": 61745,
+  "504": 61746,
+  "507": 61747,
+  "508": 61748,
+  "509": 61749,
+  "510": 61750,
+  "511": 61751,
+  "512": 61752,
+  "513": 61753,
+  "514": 61754,
+  "515": 61755,
+  "800": 61756,
+  "801": 61757,
+  "802": 61758,
+  "803": 61759,
+  "804": 61760,
+  "805": 61761,
+  "806": 61762,
+  "807": 61763,
+  "900": 61764,
+  "901": 61765,
+  "999": 61766,
+  "1001": 61767,
+  "1002": 61768,
+  "1003": 61769,
+  "1004": 61770,
+  "1005": 61771,
+  "1006": 61772,
+  "1007": 61773,
+  "1008": 61774,
+  "1009": 61775,
+  "1010": 61776,
+  "1011": 61777,
+  "1012": 61778,
+  "1013": 61779,
+  "1014": 61780,
+  "1015": 61781,
+  "1016": 61782,
+  "1017": 61783,
+  "1018": 61784,
+  "1019": 61785,
+  "1020": 61786,
+  "1021": 61787,
+  "1022": 61788,
+  "1023": 61789,
+  "1024": 61790,
+  "1025": 61791,
+  "1026": 61792,
+  "1027": 61793,
+  "1028": 61794,
+  "1029": 61795,
+  "1030": 61796,
+  "1031": 61797,
+  "1032": 61798,
+  "1033": 61799,
+  "1034": 61800,
+  "1035": 61801,
+  "1036": 61802,
+  "1037": 61803,
+  "1038": 61804,
+  "1039": 61805,
+  "1040": 61806,
+  "1041": 61807,
+  "1042": 61808,
+  "1043": 61809,
+  "1044": 61810,
+  "1045": 61811,
+  "1046": 61812,
+  "1047": 61813,
+  "1048": 61814,
+  "1049": 61815,
+  "1050": 61816,
+  "1051": 61817,
+  "1052": 61818,
+  "1053": 61819,
+  "1054": 61820,
+  "1055": 61821,
+  "1056": 61822,
+  "1057": 61823,
+  "1058": 61824,
+  "1059": 61825,
+  "1060": 61826,
+  "1061": 61827,
+  "1062": 61828,
+  "1063": 61829,
+  "1064": 61830,
+  "1065": 61831,
+  "1066": 61832,
+  "1067": 61833,
+  "1068": 61834,
+  "1069": 61835,
+  "1071": 61836,
+  "1072": 61837,
+  "1073": 61838,
+  "1074": 61839,
+  "1075": 61840,
+  "1076": 61841,
+  "1077": 61842,
+  "1078": 61843,
+  "1079": 61844,
+  "1080": 61845,
+  "1081": 61846,
+  "1082": 61847,
+  "1084": 61848,
+  "1085": 61849,
+  "1086": 61850,
+  "1087": 61851,
+  "1088": 61852,
+  "1089": 61853,
+  "1201": 62149,
+  "1202": 62150,
+  "1203": 62151,
+  "1204": 62152,
+  "1205": 62153,
+  "1206": 62154,
+  "1207": 62155,
+  "1208": 62156,
+  "1209": 62157,
+  "1210": 62158,
+  "1211": 62159,
+  "1212": 62160,
+  "1213": 62161,
+  "1214": 62162,
+  "1215": 62163,
+  "1216": 62164,
+  "1217": 62165,
+  "1218": 62166,
+  "1219": 62167,
+  "1221": 62168,
+  "1241": 62169,
+  "1242": 62170,
+  "1243": 62171,
+  "1244": 62172,
+  "1245": 62173,
+  "1246": 62174,
+  "1247": 62175,
+  "1248": 62176,
+  "1249": 62177,
+  "1250": 62178,
+  "1251": 62179,
+  "1271": 62198,
+  "1272": 62199,
+  "1273": 62200,
+  "1274": 62201,
+  "1601": 61857,
+  "1602": 61858,
+  "1603": 61859,
+  "1604": 61860,
+  "1605": 61861,
+  "1606": 61862,
+  "1607": 61863,
+  "1608": 61964,
+  "1609": 61965,
+  "1610": 61966,
+  "1701": 61864,
+  "1702": 61865,
+  "1703": 61866,
+  "1801": 61967,
+  "1802": 61968,
+  "1803": 61969,
+  "1804": 61970,
+  "1805": 61971,
+  "2001": 61867,
+  "2002": 61868,
+  "2003": 61869,
+  "2004": 61870,
+  "2005": 61871,
+  "2006": 61872,
+  "2007": 61873,
+  "2029": 61972,
+  "2030": 61973,
+  "2031": 61974,
+  "2032": 61975,
+  "2033": 61976,
+  "2050": 61977,
+  "2051": 61978,
+  "2052": 61895,
+  "2053": 61896,
+  "2054": 61897,
+  "2070": 61979,
+  "2071": 61980,
+  "2072": 61981,
+  "2073": 61982,
+  "2074": 61983,
+  "2075": 61984,
+  "2076": 61985,
+  "2077": 61986,
+  "2078": 61987,
+  "2079": 61988,
+  "2080": 61989,
+  "2081": 61990,
+  "2082": 61991,
+  "2083": 61992,
+  "2084": 61993,
+  "2085": 61994,
+  "2100": 61995,
+  "2101": 61996,
+  "2102": 61997,
+  "2103": 61998,
+  "2104": 61999,
+  "2105": 62000,
+  "2106": 62001,
+  "2107": 62002,
+  "2108": 62003,
+  "2109": 62004,
+  "2111": 62005,
+  "2120": 62006,
+  "2121": 62007,
+  "2122": 62008,
+  "2123": 62009,
+  "2124": 62010,
+  "2125": 62011,
+  "2126": 62012,
+  "2127": 62013,
+  "2128": 62014,
+  "2129": 62015,
+  "2130": 62016,
+  "2131": 62017,
+  "2132": 62018,
+  "2133": 62019,
+  "2134": 62020,
+  "2135": 62021,
+  "2150": 62022,
+  "2151": 62023,
+  "2152": 62024,
+  "2153": 62025,
+  "2154": 62026,
+  "2155": 62027,
+  "2156": 62028,
+  "2157": 62029,
+  "2158": 62030,
+  "2159": 62031,
+  "2160": 62032,
+  "2161": 62033,
+  "2162": 62034,
+  "2163": 62035,
+  "2164": 62036,
+  "2165": 62037,
+  "2166": 62038,
+  "2190": 62039,
+  "2191": 62040,
+  "2192": 62041,
+  "2193": 62042,
+  "2200": 62180,
+  "2201": 62181,
+  "2202": 62182,
+  "2203": 62183,
+  "2204": 62184,
+  "2205": 62185,
+  "2207": 62186,
+  "2208": 62187,
+  "2209": 62188,
+  "2210": 62189,
+  "2211": 62190,
+  "2212": 62191,
+  "2213": 62192,
+  "2214": 62193,
+  "2215": 62194,
+  "2216": 62195,
+  "2217": 62196,
+  "2218": 62197,
+  "2300": 62043,
+  "2301": 62044,
+  "2302": 62045,
+  "2303": 62046,
+  "2304": 62047,
+  "2305": 62048,
+  "2306": 62049,
+  "2307": 62050,
+  "2308": 62051,
+  "2309": 62052,
+  "2311": 62053,
+  "2312": 62054,
+  "2313": 62055,
+  "2314": 62056,
+  "2315": 62057,
+  "2316": 62058,
+  "2317": 62059,
+  "2318": 62060,
+  "2319": 62061,
+  "2320": 62062,
+  "2321": 62063,
+  "2322": 62064,
+  "2323": 62065,
+  "2324": 62066,
+  "2325": 62067,
+  "2326": 62068,
+  "2327": 62069,
+  "2328": 62070,
+  "2330": 62071,
+  "2331": 62072,
+  "2332": 62073,
+  "2333": 62074,
+  "2341": 62075,
+  "2343": 62076,
+  "2345": 62077,
+  "2346": 62078,
+  "2348": 62079,
+  "2349": 62080,
+  "2350": 62081,
+  "2351": 62082,
+  "2352": 62083,
+  "2353": 62084,
+  "2354": 62085,
+  "2355": 62086,
+  "2356": 62087,
+  "2357": 62088,
+  "2358": 62089,
+  "2359": 62090,
+  "2360": 62091,
+  "2361": 62092,
+  "2362": 62093,
+  "2363": 62094,
+  "2364": 62095,
+  "2365": 62096,
+  "2366": 62097,
+  "2367": 62098,
+  "2368": 62099,
+  "2369": 62100,
+  "2370": 62101,
+  "2371": 62102,
+  "2372": 62103,
+  "2373": 62104,
+  "2374": 62105,
+  "2375": 62106,
+  "2376": 62107,
+  "2377": 62108,
+  "2378": 62109,
+  "2379": 62110,
+  "2380": 62111,
+  "2381": 62112,
+  "2382": 62113,
+  "2383": 62114,
+  "2384": 62115,
+  "2385": 62116,
+  "2386": 62117,
+  "2387": 62118,
+  "2388": 62119,
+  "2389": 62120,
+  "2390": 62121,
+  "2391": 62122,
+  "2392": 62123,
+  "2393": 62124,
+  "2394": 62125,
+  "2395": 62126,
+  "2396": 62127,
+  "2397": 62128,
+  "2398": 62129,
+  "2399": 62130,
+  "2400": 62131,
+  "2409": 62132,
+  "2411": 62133,
+  "2412": 62134,
+  "2413": 62135,
+  "2414": 62136,
+  "2415": 62137,
+  "2416": 62138,
+  "2417": 62139,
+  "2418": 62140,
+  "2419": 62141,
+  "2420": 62142,
+  "2421": 62143,
+  "2422": 62144,
+  "2423": 62145,
+  "2424": 62146,
+  "2425": 62147,
+  "2426": 62148,
+  "9998": 61898,
+  "9999": 61899,
+  "100-fill": 61900,
+  "101-fill": 61901,
+  "102-fill": 61902,
+  "103-fill": 61903,
+  "104-fill": 61904,
+  "150-fill": 61905,
+  "151-fill": 61906,
+  "152-fill": 61907,
+  "153-fill": 61908,
+  "300-fill": 61909,
+  "301-fill": 61910,
+  "302-fill": 61911,
+  "303-fill": 61912,
+  "304-fill": 61913,
+  "305-fill": 61914,
+  "306-fill": 61915,
+  "307-fill": 61916,
+  "308-fill": 61917,
+  "309-fill": 61918,
+  "310-fill": 61919,
+  "311-fill": 61920,
+  "312-fill": 61921,
+  "313-fill": 61922,
+  "314-fill": 61923,
+  "315-fill": 61924,
+  "316-fill": 61925,
+  "317-fill": 61926,
+  "318-fill": 61927,
+  "350-fill": 61928,
+  "351-fill": 61929,
+  "399-fill": 61930,
+  "400-fill": 61931,
+  "401-fill": 61932,
+  "402-fill": 61933,
+  "403-fill": 61934,
+  "404-fill": 61935,
+  "405-fill": 61936,
+  "406-fill": 61937,
+  "407-fill": 61938,
+  "408-fill": 61939,
+  "409-fill": 61940,
+  "410-fill": 61941,
+  "456-fill": 61942,
+  "457-fill": 61943,
+  "499-fill": 61944,
+  "500-fill": 61945,
+  "501-fill": 61946,
+  "502-fill": 61947,
+  "503-fill": 61948,
+  "504-fill": 61949,
+  "507-fill": 61950,
+  "508-fill": 61951,
+  "509-fill": 61952,
+  "510-fill": 61953,
+  "511-fill": 61954,
+  "512-fill": 61955,
+  "513-fill": 61956,
+  "514-fill": 61957,
+  "515-fill": 61958,
+  "900-fill": 61959,
+  "901-fill": 61960,
+  "999-fill": 61961,
+  "qweather-fill": 61962,
+  "qweather": 61963,
+  "sunny": 61697,
+  "cloudy": 61698,
+  "few-clouds": 61699,
+  "partly-cloudy": 61700,
+  "overcast": 61701,
+  "clear-night": 61702,
+  "cloudy-night": 61703,
+  "few-clouds-night": 61704,
+  "partly-cloudy-night": 61705,
+  "shower-rain": 61706,
+  "heavy-shower-rain": 61707,
+  "thundershower": 61708,
+  "heavy-thunderstorm": 61709,
+  "thundershower-with-hail": 61710,
+  "light-rain": 61711,
+  "moderate-rain": 61712,
+  "heavy-rain": 61713,
+  "extreme-rain": 61714,
+  "drizzle-rain": 61715,
+  "storm": 61716,
+  "heavy-storm": 61717,
+  "severe-storm": 61718,
+  "freezing-rain": 61719,
+  "light-to-moderate-rain": 61720,
+  "moderate-to-heavy-rain": 61721,
+  "heavy-rain-to-storm": 61722,
+  "storm-to-heavy-storm": 61723,
+  "heavy-to-severe-storm": 61724,
+  "shower-rain-night": 61725,
+  "heavy-shower-rain-night": 61726,
+  "rain": 61727,
+  "light-snow": 61728,
+  "moderate-snow": 61729,
+  "heavy-snow": 61730,
+  "snowstorm": 61731,
+  "sleet": 61732,
+  "rain-and-snow": 61733,
+  "shower-snow": 61734,
+  "snow-flurry": 61735,
+  "light-to-moderate-snow": 61736,
+  "moderate-to-heavy-snow": 61737,
+  "heavy-snow-to-snowstorm": 61738,
+  "shower-snow-night": 61739,
+  "snow-flurry-night": 61740,
+  "snow": 61741,
+  "mist": 61742,
+  "foggy": 61743,
+  "haze": 61744,
+  "sand": 61745,
+  "dust": 61746,
+  "duststorm": 61747,
+  "sandstorm": 61748,
+  "dense-fog": 61749,
+  "strong-fog": 61750,
+  "moderate-haze": 61751,
+  "heavy-haze": 61752,
+  "severe-haze": 61753,
+  "heavy-fog": 61754,
+  "extra-heavy-fog": 61755,
+  "new-moon": 61756,
+  "waxing-crescent": 61757,
+  "first-quarter": 61758,
+  "waxing-gibbous": 61759,
+  "full-moon": 61760,
+  "waning-gibbous": 61761,
+  "last-quarter": 61762,
+  "waning-crescent": 61763,
+  "hot": 61764,
+  "cold": 61765,
+  "unknown": 61766,
+  "typhoon": 61767,
+  "tornado": 61768,
+  "rainstorm": 61769,
+  "snow-storm": 61770,
+  "cold-wave": 61771,
+  "gale": 61772,
+  "sandstorm-warning": 61773,
+  "low-temperature-freeze": 61774,
+  "high-temperature": 61775,
+  "heat-wave": 61776,
+  "dry-hot-wind": 61777,
+  "downburst": 61778,
+  "avalanche": 61779,
+  "lightning": 61780,
+  "hail": 61781,
+  "frost": 61782,
+  "heavy-fog-warning": 61783,
+  "low-level-wind-shearl": 61784,
+  "haze-warning": 61785,
+  "thunder-gust": 61786,
+  "road-icing": 61787,
+  "drought": 61788,
+  "gale-at-sea": 61789,
+  "heat-stroke": 61790,
+  "wildfire": 61791,
+  "grassland-fire": 61792,
+  "freeze": 61793,
+  "space-weather": 61794,
+  "heavy-air-pollution": 61795,
+  "low-temperature-rain-and-snow": 61796,
+  "strong-convection": 61797,
+  "ozone": 61798,
+  "heavy-snow-warning": 61799,
+  "cold-warning": 61800,
+  "continuous-rain": 61801,
+  "waterlogging": 61802,
+  "geological-hazard": 61803,
+  "heavy-rainfall": 61804,
+  "severely-falling-temperature": 61805,
+  "snow-disaster": 61806,
+  "wildfire-grassland": 61807,
+  "medical-meteorology": 61808,
+  "thunderstorm": 61809,
+  "school-closure": 61810,
+  "factory-closure": 61811,
+  "maritime-risk": 61812,
+  "spring-dust": 61813,
+  "falling-temperature": 61814,
+  "typhoon-and-rainstorm": 61815,
+  "severe-cold": 61816,
+  "sand-dust": 61817,
+  "sea-thunderstorms": 61818,
+  "sea-fog": 61819,
+  "sea-thunder": 61820,
+  "sea-typhoon": 61821,
+  "low-temperature": 61822,
+  "road-ice-and-snow": 61823,
+  "thunderstorm-and-gale": 61824,
+  "continuous-low-temperature": 61825,
+  "low-visibility": 61826,
+  "strong-dust": 61827,
+  "gale-in-sea-area": 61828,
+  "short-duration-heavy-shower-rain": 61829,
+  "short-lived-heavy-shower-rain": 61830,
+  "sea-area-fog": 61831,
+  "heat-stroke-conditions": 61832,
+  "heavy-pollution-weather": 61833,
+  "co-poisoning-weather-conditions": 61834,
+  "respiratory-disease-weather-wonditions": 61835,
+  "intestinal-disease-weather-wonditions": 61836,
+  "cardiovascular-disease-weather-wonditions": 61837,
+  "flooding-weather-risk": 61838,
+  "heavy-pollution-weather-conditions": 61839,
+  "urban-flooding-weather-risk": 61840,
+  "flooding-weather-risk-2": 61841,
+  "wildfire-weather-risk": 61842,
+  "meteorological-drought": 61843,
+  "agricultural-weather-risk": 61844,
+  "strong-monsoon": 61845,
+  "ice-accretion-on-wire": 61846,
+  "stroke-weather-risk": 61847,
+  "wildfire-grassland-risk": 61848,
+  "thunderstorm-and-strong-winds": 61849,
+  "low-temperature-freeze2": 61850,
+  "low-temperature-damage": 61851,
+  "national-agricultural-meteorological-risk": 61852,
+  "dry-hot-wind-risk-for-winter-wheat": 61853,
+  "flood": 62149,
+  "urban-flooding": 62150,
+  "reservoir-danger": 62151,
+  "dike-danger": 62152,
+  "ice-flood": 62153,
+  "waterlogging2": 62154,
+  "flood-and-waterlogging": 62155,
+  "dry-water": 62156,
+  "flood-and-flash-flood-in-small-and-medium-rivers": 62157,
+  "difficulty-drinking-water-for-rural-people-and-animals": 62158,
+  "flood-in-small-and-medium-rivers": 62159,
+  "flood-and-drought-advisory": 62160,
+  "urban-flood-risk": 62161,
+  "flash-flood": 62162,
+  "agricultural-drought": 62163,
+  "urban-water-shortage": 62164,
+  "ecological-drought": 62165,
+  "disaster-risk-early-warning": 62166,
+  "flash-flood-weather-risk": 62167,
+  "water-conservancy-and-drought": 62168,
+  "landslide": 62169,
+  "debris-flows": 62170,
+  "landslide-event": 62171,
+  "ground-collapses": 62172,
+  "ground-fissure": 62173,
+  "land-subsidence": 62174,
+  "volcanic-eruption": 62175,
+  "geological-hazard-weather-risk": 62176,
+  "geological-hazard-weather": 62177,
+  "geological-hazard2": 62178,
+  "geological-hazard-risk": 62179,
+  "air-pollution-incident": 62198,
+  "heavy-air-pollution-2": 62199,
+  "air-pollution": 62200,
+  "heavy-pollution-weather-2": 62201,
+  "very-hot-weather": 61857,
+  "strong-monsoon-signal": 61858,
+  "landslip": 61859,
+  "tropical-cyclone": 61860,
+  "fire-danger": 61861,
+  "flooding-in-the-northern-new-territories": 61862,
+  "cold-weather": 61863,
+  "thunderstorm2": 61964,
+  "rainstorm2": 61965,
+  "frost2": 61966,
+  "cold-surge-advisory": 61864,
+  "strong-wind-advisory": 61865,
+  "rainfall-advisory": 61866,
+  "strong-monsoon-signal2": 61967,
+  "storm-surge2": 61968,
+  "tropical-cyclone2": 61969,
+  "rainstorm3": 61970,
+  "thunderstorm3": 61971,
+  "wind-warning": 61867,
+  "snow-ice": 61868,
+  "fog": 61869,
+  "coastal-event": 61870,
+  "forest-fire": 61871,
+  "rain-warning": 61872,
+  "rain-flood": 61873,
+  "thunderstorm4": 61972,
+  "high-temperature2": 61973,
+  "low-temperature2": 61974,
+  "avalanches": 61975,
+  "flooding": 61976,
+  "rain-warning2": 62032,
+  "wind": 61978,
+  "snow-warning": 61895,
+  "zonda-wind": 61896,
+  "storm-warning": 61897,
+  "dust-raising-winds2": 61979,
+  "strong-surface-winds2": 61980,
+  "hot-day2": 61981,
+  "warm-night2": 61982,
+  "cold-day2": 61983,
+  "thunderstorm-and-lightning2": 61984,
+  "hailstorm2": 61985,
+  "sea-area-warning2": 61986,
+  "fishermen-warning2": 61987,
+  "heavy-snow-warning2": 62019,
+  "dust-storm": 61989,
+  "heat-wave2": 61990,
+  "cold-wave2": 61991,
+  "fog2": 61992,
+  "heavy-rain-warning": 61993,
+  "ground-frost2": 61994,
+  "fog3": 61995,
+  "thunder-rain2": 61996,
+  "thunder-storm": 61997,
+  "light-rain-warning": 61998,
+  "heavy-rain-warning2": 61999,
+  "fresh-wind": 62000,
+  "thunderstorm-and-dust": 62001,
+  "dust-warning": 62002,
+  "high-wave": 62003,
+  "frost3": 62004,
+  "drop-in-visibility": 62005,
+  "low-humidity2": 62006,
+  "accumulated-rain2": 62007,
+  "cold-wave3": 62008,
+  "tornado2": 62009,
+  "thunderstorm5": 62010,
+  "hail2": 62011,
+  "heavy-rainfall2": 62012,
+  "gale2": 62013,
+  "heat-wave3": 62014,
+  "cold-warning2": 62015,
+  "frost4": 62016,
+  "drought2": 62017,
+  "forest-fire2": 62018,
+  "severely-falling-temperature2": 62020,
+  "rainstorm4": 62021,
+  "wind2": 62022,
+  "snow-ice2": 62023,
+  "freeze2": 62024,
+  "thunderstorms": 62025,
+  "fog4": 62026,
+  "high-temperature3": 62027,
+  "low-temperature3": 62028,
+  "coastal-event2": 62029,
+  "forest-fire3": 62030,
+  "avalanches2": 62031,
+  "flood2": 62033,
+  "rain-flood2": 62034,
+  "mudflow2": 62035,
+  "duststorm-warning": 62036,
+  "freezing-rain-and-icing": 62037,
+  "other-dangers": 62038,
+  "severe-thunderstorms": 62039,
+  "damaging-winds2": 62040,
+  "veld-fire-conditions2": 62041,
+  "weather-advisory2": 62042,
+  "thunderstorm6": 62180,
+  "squall": 62181,
+  "air-quality": 62182,
+  "rainfall": 62183,
+  "fog5": 62184,
+  "heat": 62185,
+  "wildfire2": 62186,
+  "wind3": 62187,
+  "freezing-rain-warning": 62188,
+  "tornado3": 62189,
+  "blizzard": 62190,
+  "weather-warning": 62191,
+  "winter-storm": 62192,
+  "freezing-drizzle": 62193,
+  "snowfall": 62194,
+  "blowing-snow": 62195,
+  "extreme-cold": 62196,
+  "frost5": 62197,
+  "hazardous-seas-warning": 62043,
+  "heavy-freezing-spray-warning": 62044,
+  "red-flag-warning": 62045,
+  "freeze-warning": 62046,
+  "hard-freeze-warning": 62047,
+  "extreme-cold-warning": 62048,
+  "wind-chill-warning": 62049,
+  "gale-warning": 62050,
+  "excessive-heat-warning": 62051,
+  "lake-effect-snow-warning": 62052,
+  "blowing-dust-warning": 62053,
+  "dust-storm-warning": 62054,
+  "storm-warning2": 62055,
+  "tropical-storm-warning": 62056,
+  "high-wind-warning": 62057,
+  "high-surf-warning": 62058,
+  "flood-warning": 62059,
+  "lakeshore-flood-warning": 62060,
+  "coastal-flood-warning": 62061,
+  "ashfall-warning": 62062,
+  "volcano-warning": 62063,
+  "earthquake-warning": 62064,
+  "avalanche-warning": 62065,
+  "winter-storm-warning": 62066,
+  "ice-storm-warning": 62067,
+  "snow-squall-warning": 62068,
+  "blizzard-warning": 62069,
+  "special-marine-warning": 62070,
+  "typhoon-warning": 62071,
+  "hurricane-warning": 62072,
+  "hurricane-force-wind-warning": 62073,
+  "storm-surge-warning": 62074,
+  "flash-flood-warning": 62075,
+  "severe-thunderstorm-warning": 62076,
+  "extreme-wind-warning": 62077,
+  "tornado-warning": 62078,
+  "tsunami-warning": 62079,
+  "fire-weather-watch": 62080,
+  "freeze-watch": 62081,
+  "hard-freeze-watch": 62082,
+  "wind-chill-watch": 62083,
+  "extreme-cold-watch": 62084,
+  "excessive-heat-watch": 62085,
+  "high-wind-watch": 62086,
+  "flood-watch": 62087,
+  "lakeshore-flood-watch": 62088,
+  "coastal-flood-watch": 62089,
+  "heavy-freezing-spray-watch": 62090,
+  "hazardous-seas-watch": 62091,
+  "winter-storm-watch": 62092,
+  "gale-watch": 62093,
+  "avalanche-watch": 62094,
+  "storm-watch": 62095,
+  "tropical-storm-watch": 62096,
+  "typhoon-watch": 62097,
+  "hurricane-force-wind-watch": 62098,
+  "hurricane-watch": 62099,
+  "storm-surge-watch": 62100,
+  "flash-flood-watch": 62101,
+  "severe-thunderstorm-watch": 62102,
+  "tornado-watch": 62103,
+  "tsunami-watch": 62104,
+  "air-stagnation-advisory": 62105,
+  "low-water-advisory": 62106,
+  "freezing-spray-advisory": 62107,
+  "freezing-fog-advisory": 62108,
+  "ashfall-advisory": 62109,
+  "frost-advisory": 62110,
+  "wind-advisory": 62111,
+  "lake-wind-advisory": 62112,
+  "blowing-dust-advisory": 62113,
+  "dust-advisory": 62114,
+  "brisk-wind-advisory": 62115,
+  "small-craft-advisory": 62116,
+  "small-craft-advisory-for-winds": 62117,
+  "small-craft-advisory-for-rough-bar": 62118,
+  "small-craft-advisory-for-hazardous-seas": 62119,
+  "dense-smoke-advisory": 62120,
+  "dense-fog-advisory": 62121,
+  "high-surf-advisory": 62122,
+  "coastal-flood-advisory": 62123,
+  "lakeshore-flood-advisory": 62124,
+  "hydrologic-advisory": 62125,
+  "flood-advisory": 62126,
+  "heat-advisory": 62127,
+  "wind-chill-advisory": 62128,
+  "winter-weather-advisory": 62129,
+  "avalanche-advisory": 62130,
+  "tsunami-advisory": 62131,
+  "flood-statement": 62132,
+  "hydrologic-outlook": 62133,
+  "hazardous-weather-outlook": 62134,
+  "air-quality-alert": 62135,
+  "extreme-fire-danger": 62136,
+  "marine-weather-statement": 62137,
+  "special-weather-statement": 62138,
+  "lakeshore-flood-statement": 62139,
+  "coastal-flood-statement": 62140,
+  "beach-hazards-statement": 62141,
+  "rip-current-statement": 62142,
+  "tropical-depression-local-statement": 62143,
+  "tropical-storm-local-statement": 62144,
+  "typhoon-local-statement": 62145,
+  "hurricane-local-statement": 62146,
+  "severe-weather-statement": 62147,
+  "flash-flood-statement": 62148,
+  "severe-weather-warning": 61898,
+  "warning-default": 61899,
+  "sunny-fill": 61900,
+  "cloudy-fill": 61901,
+  "few-clouds-fill": 61902,
+  "partly-cloudy-fill": 61903,
+  "overcast-fill": 61904,
+  "clear-night-fill": 61905,
+  "cloudy-night-fill": 61906,
+  "few-clouds-night-fill": 61907,
+  "partly-cloudy-night-fill": 61908,
+  "shower-rain-fill": 61909,
+  "heavy-shower-rain-fill": 61910,
+  "thundershower-fill": 61911,
+  "heavy-thunderstorm-fill": 61912,
+  "thundershower-with-hail-fill": 61913,
+  "light-rain-fill": 61914,
+  "moderate-rain-fill": 61915,
+  "heavy-rain-fill": 61916,
+  "extreme-rain-fill": 61917,
+  "drizzle-rain-fill": 61918,
+  "storm-fill": 61919,
+  "heavy-storm-fill": 61920,
+  "severe-storm-fill": 61921,
+  "freezing-rain-fill": 61922,
+  "light-to-moderate-rain-fill": 61923,
+  "moderate-to-heavy-rain-fill": 61924,
+  "heavy-rain-to-storm-fill": 61925,
+  "storm-to-heavy-storm-fill": 61926,
+  "heavy-to-severe-storm-fill": 61927,
+  "shower-rain-night-fill": 61928,
+  "heavy-shower-rain-night-fill": 61929,
+  "rain-fill": 61930,
+  "light-snow-fill": 61931,
+  "moderate-snow-fill": 61932,
+  "heavy-snow-fill": 61933,
+  "snowstorm-fill": 61934,
+  "sleet-fill": 61935,
+  "rain-and-snow-fill": 61936,
+  "shower-snow-fill": 61937,
+  "snow-flurry-fill": 61938,
+  "light-to-moderate-snow-fill": 61939,
+  "moderate-to-heavy-snow-fill": 61940,
+  "heavy-snow-to-snowstorm-fill": 61941,
+  "shower-snow-night-fill": 61942,
+  "snow-flurry-night-fill": 61943,
+  "snow-fill": 61944,
+  "mist-fill": 61945,
+  "foggy-fill": 61946,
+  "haze-fill": 61947,
+  "sand-fill": 61948,
+  "dust-fill": 61949,
+  "duststorm-fill": 61950,
+  "sandstorm-fill": 61951,
+  "dense-fog-fill": 61952,
+  "strong-fog-fill": 61953,
+  "moderate-haze-fill": 61954,
+  "heavy-haze-fill": 61955,
+  "severe-haze-fill": 61956,
+  "heavy-fog-fill": 61957,
+  "extra-heavy-fog-fill": 61958,
+  "hot-fill": 61959,
+  "cold-fill": 61960,
+  "unknown-fill": 61961
+}

style/FontStyle.css

@@ -8,7 +8,26 @@
 .CustomFont {
     font-family: 'CustomFont', sans-serif !important;
 }
+@font-face {
+    font-family: 'PingFang SC-Bold';
+    src: url('@/static/fonts/PingFang Bold.ttf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}
 
+.PingFangSC-Bold {
+    font-family: 'PingFang Bold', sans-serif !important;
+}
+@font-face {
+    font-family: 'PingFang SC-Medium';
+    src: url('@/static/fonts/PingFang Medium.ttf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.PingFang SC-Medium {
+    font-family: 'PingFang Medium', sans-serif !important;
+}
 @font-face {
   font-family: 'iconfont';  /* project id 1639347 */
   src: url('https://at.alicdn.com/t/font_1639347_9tnhp28j8vi.eot');

style/qweather-icons.css

@@ -0,0 +1,981 @@
+ 
+
+@font-face {
+  font-family: "qweather-icons";
+  src: url("@/static/fonts/QWeather-Icons-1.6.0/font/fonts/qweather-icons.woff2?c4a8eb216e1e59e6c4df464b9ee6f9be") format("woff2"),
+url("@/static/fonts/QWeather-Icons-1.6.0/font/fonts/qweather-icons.woff?c4a8eb216e1e59e6c4df464b9ee6f9be") format("woff"),
+url("@/static/fonts/QWeather-Icons-1.6.0/font/fonts/qweather-icons.ttf?c4a8eb216e1e59e6c4df464b9ee6f9be") format("truetype");
+}
+
+[class^="qi-"]::before,
+[class*=" qi-"]::before {
+  display: inline-block;
+  font-family: "qweather-icons" !important;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: -.125em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.qi-100::before { content: "\f101"; }
+.qi-101::before { content: "\f102"; }
+.qi-102::before { content: "\f103"; }
+.qi-103::before { content: "\f104"; }
+.qi-104::before { content: "\f105"; }
+.qi-150::before { content: "\f106"; }
+.qi-151::before { content: "\f107"; }
+.qi-152::before { content: "\f108"; }
+.qi-153::before { content: "\f109"; }
+.qi-300::before { content: "\f10a"; }
+.qi-301::before { content: "\f10b"; }
+.qi-302::before { content: "\f10c"; }
+.qi-303::before { content: "\f10d"; }
+.qi-304::before { content: "\f10e"; }
+.qi-305::before { content: "\f10f"; }
+.qi-306::before { content: "\f110"; }
+.qi-307::before { content: "\f111"; }
+.qi-308::before { content: "\f112"; }
+.qi-309::before { content: "\f113"; }
+.qi-310::before { content: "\f114"; }
+.qi-311::before { content: "\f115"; }
+.qi-312::before { content: "\f116"; }
+.qi-313::before { content: "\f117"; }
+.qi-314::before { content: "\f118"; }
+.qi-315::before { content: "\f119"; }
+.qi-316::before { content: "\f11a"; }
+.qi-317::before { content: "\f11b"; }
+.qi-318::before { content: "\f11c"; }
+.qi-350::before { content: "\f11d"; }
+.qi-351::before { content: "\f11e"; }
+.qi-399::before { content: "\f11f"; }
+.qi-400::before { content: "\f120"; }
+.qi-401::before { content: "\f121"; }
+.qi-402::before { content: "\f122"; }
+.qi-403::before { content: "\f123"; }
+.qi-404::before { content: "\f124"; }
+.qi-405::before { content: "\f125"; }
+.qi-406::before { content: "\f126"; }
+.qi-407::before { content: "\f127"; }
+.qi-408::before { content: "\f128"; }
+.qi-409::before { content: "\f129"; }
+.qi-410::before { content: "\f12a"; }
+.qi-456::before { content: "\f12b"; }
+.qi-457::before { content: "\f12c"; }
+.qi-499::before { content: "\f12d"; }
+.qi-500::before { content: "\f12e"; }
+.qi-501::before { content: "\f12f"; }
+.qi-502::before { content: "\f130"; }
+.qi-503::before { content: "\f131"; }
+.qi-504::before { content: "\f132"; }
+.qi-507::before { content: "\f133"; }
+.qi-508::before { content: "\f134"; }
+.qi-509::before { content: "\f135"; }
+.qi-510::before { content: "\f136"; }
+.qi-511::before { content: "\f137"; }
+.qi-512::before { content: "\f138"; }
+.qi-513::before { content: "\f139"; }
+.qi-514::before { content: "\f13a"; }
+.qi-515::before { content: "\f13b"; }
+.qi-800::before { content: "\f13c"; }
+.qi-801::before { content: "\f13d"; }
+.qi-802::before { content: "\f13e"; }
+.qi-803::before { content: "\f13f"; }
+.qi-804::before { content: "\f140"; }
+.qi-805::before { content: "\f141"; }
+.qi-806::before { content: "\f142"; }
+.qi-807::before { content: "\f143"; }
+.qi-900::before { content: "\f144"; }
+.qi-901::before { content: "\f145"; }
+.qi-999::before { content: "\f146"; }
+.qi-1001::before { content: "\f147"; }
+.qi-1002::before { content: "\f148"; }
+.qi-1003::before { content: "\f149"; }
+.qi-1004::before { content: "\f14a"; }
+.qi-1005::before { content: "\f14b"; }
+.qi-1006::before { content: "\f14c"; }
+.qi-1007::before { content: "\f14d"; }
+.qi-1008::before { content: "\f14e"; }
+.qi-1009::before { content: "\f14f"; }
+.qi-1010::before { content: "\f150"; }
+.qi-1011::before { content: "\f151"; }
+.qi-1012::before { content: "\f152"; }
+.qi-1013::before { content: "\f153"; }
+.qi-1014::before { content: "\f154"; }
+.qi-1015::before { content: "\f155"; }
+.qi-1016::before { content: "\f156"; }
+.qi-1017::before { content: "\f157"; }
+.qi-1018::before { content: "\f158"; }
+.qi-1019::before { content: "\f159"; }
+.qi-1020::before { content: "\f15a"; }
+.qi-1021::before { content: "\f15b"; }
+.qi-1022::before { content: "\f15c"; }
+.qi-1023::before { content: "\f15d"; }
+.qi-1024::before { content: "\f15e"; }
+.qi-1025::before { content: "\f15f"; }
+.qi-1026::before { content: "\f160"; }
+.qi-1027::before { content: "\f161"; }
+.qi-1028::before { content: "\f162"; }
+.qi-1029::before { content: "\f163"; }
+.qi-1030::before { content: "\f164"; }
+.qi-1031::before { content: "\f165"; }
+.qi-1032::before { content: "\f166"; }
+.qi-1033::before { content: "\f167"; }
+.qi-1034::before { content: "\f168"; }
+.qi-1035::before { content: "\f169"; }
+.qi-1036::before { content: "\f16a"; }
+.qi-1037::before { content: "\f16b"; }
+.qi-1038::before { content: "\f16c"; }
+.qi-1039::before { content: "\f16d"; }
+.qi-1040::before { content: "\f16e"; }
+.qi-1041::before { content: "\f16f"; }
+.qi-1042::before { content: "\f170"; }
+.qi-1043::before { content: "\f171"; }
+.qi-1044::before { content: "\f172"; }
+.qi-1045::before { content: "\f173"; }
+.qi-1046::before { content: "\f174"; }
+.qi-1047::before { content: "\f175"; }
+.qi-1048::before { content: "\f176"; }
+.qi-1049::before { content: "\f177"; }
+.qi-1050::before { content: "\f178"; }
+.qi-1051::before { content: "\f179"; }
+.qi-1052::before { content: "\f17a"; }
+.qi-1053::before { content: "\f17b"; }
+.qi-1054::before { content: "\f17c"; }
+.qi-1055::before { content: "\f17d"; }
+.qi-1056::before { content: "\f17e"; }
+.qi-1057::before { content: "\f17f"; }
+.qi-1058::before { content: "\f180"; }
+.qi-1059::before { content: "\f181"; }
+.qi-1060::before { content: "\f182"; }
+.qi-1061::before { content: "\f183"; }
+.qi-1062::before { content: "\f184"; }
+.qi-1063::before { content: "\f185"; }
+.qi-1064::before { content: "\f186"; }
+.qi-1065::before { content: "\f187"; }
+.qi-1066::before { content: "\f188"; }
+.qi-1067::before { content: "\f189"; }
+.qi-1068::before { content: "\f18a"; }
+.qi-1069::before { content: "\f18b"; }
+.qi-1071::before { content: "\f18c"; }
+.qi-1072::before { content: "\f18d"; }
+.qi-1073::before { content: "\f18e"; }
+.qi-1074::before { content: "\f18f"; }
+.qi-1075::before { content: "\f190"; }
+.qi-1076::before { content: "\f191"; }
+.qi-1077::before { content: "\f192"; }
+.qi-1078::before { content: "\f193"; }
+.qi-1079::before { content: "\f194"; }
+.qi-1080::before { content: "\f195"; }
+.qi-1081::before { content: "\f196"; }
+.qi-1082::before { content: "\f197"; }
+.qi-1084::before { content: "\f198"; }
+.qi-1085::before { content: "\f199"; }
+.qi-1086::before { content: "\f19a"; }
+.qi-1087::before { content: "\f19b"; }
+.qi-1088::before { content: "\f19c"; }
+.qi-1089::before { content: "\f19d"; }
+.qi-1201::before { content: "\f2c5"; }
+.qi-1202::before { content: "\f2c6"; }
+.qi-1203::before { content: "\f2c7"; }
+.qi-1204::before { content: "\f2c8"; }
+.qi-1205::before { content: "\f2c9"; }
+.qi-1206::before { content: "\f2ca"; }
+.qi-1207::before { content: "\f2cb"; }
+.qi-1208::before { content: "\f2cc"; }
+.qi-1209::before { content: "\f2cd"; }
+.qi-1210::before { content: "\f2ce"; }
+.qi-1211::before { content: "\f2cf"; }
+.qi-1212::before { content: "\f2d0"; }
+.qi-1213::before { content: "\f2d1"; }
+.qi-1214::before { content: "\f2d2"; }
+.qi-1215::before { content: "\f2d3"; }
+.qi-1216::before { content: "\f2d4"; }
+.qi-1217::before { content: "\f2d5"; }
+.qi-1218::before { content: "\f2d6"; }
+.qi-1219::before { content: "\f2d7"; }
+.qi-1221::before { content: "\f2d8"; }
+.qi-1241::before { content: "\f2d9"; }
+.qi-1242::before { content: "\f2da"; }
+.qi-1243::before { content: "\f2db"; }
+.qi-1244::before { content: "\f2dc"; }
+.qi-1245::before { content: "\f2dd"; }
+.qi-1246::before { content: "\f2de"; }
+.qi-1247::before { content: "\f2df"; }
+.qi-1248::before { content: "\f2e0"; }
+.qi-1249::before { content: "\f2e1"; }
+.qi-1250::before { content: "\f2e2"; }
+.qi-1251::before { content: "\f2e3"; }
+.qi-1271::before { content: "\f2f6"; }
+.qi-1272::before { content: "\f2f7"; }
+.qi-1273::before { content: "\f2f8"; }
+.qi-1274::before { content: "\f2f9"; }
+.qi-1601::before { content: "\f1a1"; }
+.qi-1602::before { content: "\f1a2"; }
+.qi-1603::before { content: "\f1a3"; }
+.qi-1604::before { content: "\f1a4"; }
+.qi-1605::before { content: "\f1a5"; }
+.qi-1606::before { content: "\f1a6"; }
+.qi-1607::before { content: "\f1a7"; }
+.qi-1608::before { content: "\f20c"; }
+.qi-1609::before { content: "\f20d"; }
+.qi-1610::before { content: "\f20e"; }
+.qi-1701::before { content: "\f1a8"; }
+.qi-1702::before { content: "\f1a9"; }
+.qi-1703::before { content: "\f1aa"; }
+.qi-1801::before { content: "\f20f"; }
+.qi-1802::before { content: "\f210"; }
+.qi-1803::before { content: "\f211"; }
+.qi-1804::before { content: "\f212"; }
+.qi-1805::before { content: "\f213"; }
+.qi-2001::before { content: "\f1ab"; }
+.qi-2002::before { content: "\f1ac"; }
+.qi-2003::before { content: "\f1ad"; }
+.qi-2004::before { content: "\f1ae"; }
+.qi-2005::before { content: "\f1af"; }
+.qi-2006::before { content: "\f1b0"; }
+.qi-2007::before { content: "\f1b1"; }
+.qi-2029::before { content: "\f214"; }
+.qi-2030::before { content: "\f215"; }
+.qi-2031::before { content: "\f216"; }
+.qi-2032::before { content: "\f217"; }
+.qi-2033::before { content: "\f218"; }
+.qi-2050::before { content: "\f219"; }
+.qi-2051::before { content: "\f21a"; }
+.qi-2052::before { content: "\f1c7"; }
+.qi-2053::before { content: "\f1c8"; }
+.qi-2054::before { content: "\f1c9"; }
+.qi-2070::before { content: "\f21b"; }
+.qi-2071::before { content: "\f21c"; }
+.qi-2072::before { content: "\f21d"; }
+.qi-2073::before { content: "\f21e"; }
+.qi-2074::before { content: "\f21f"; }
+.qi-2075::before { content: "\f220"; }
+.qi-2076::before { content: "\f221"; }
+.qi-2077::before { content: "\f222"; }
+.qi-2078::before { content: "\f223"; }
+.qi-2079::before { content: "\f224"; }
+.qi-2080::before { content: "\f225"; }
+.qi-2081::before { content: "\f226"; }
+.qi-2082::before { content: "\f227"; }
+.qi-2083::before { content: "\f228"; }
+.qi-2084::before { content: "\f229"; }
+.qi-2085::before { content: "\f22a"; }
+.qi-2100::before { content: "\f22b"; }
+.qi-2101::before { content: "\f22c"; }
+.qi-2102::before { content: "\f22d"; }
+.qi-2103::before { content: "\f22e"; }
+.qi-2104::before { content: "\f22f"; }
+.qi-2105::before { content: "\f230"; }
+.qi-2106::before { content: "\f231"; }
+.qi-2107::before { content: "\f232"; }
+.qi-2108::before { content: "\f233"; }
+.qi-2109::before { content: "\f234"; }
+.qi-2111::before { content: "\f235"; }
+.qi-2120::before { content: "\f236"; }
+.qi-2121::before { content: "\f237"; }
+.qi-2122::before { content: "\f238"; }
+.qi-2123::before { content: "\f239"; }
+.qi-2124::before { content: "\f23a"; }
+.qi-2125::before { content: "\f23b"; }
+.qi-2126::before { content: "\f23c"; }
+.qi-2127::before { content: "\f23d"; }
+.qi-2128::before { content: "\f23e"; }
+.qi-2129::before { content: "\f23f"; }
+.qi-2130::before { content: "\f240"; }
+.qi-2131::before { content: "\f241"; }
+.qi-2132::before { content: "\f242"; }
+.qi-2133::before { content: "\f243"; }
+.qi-2134::before { content: "\f244"; }
+.qi-2135::before { content: "\f245"; }
+.qi-2150::before { content: "\f246"; }
+.qi-2151::before { content: "\f247"; }
+.qi-2152::before { content: "\f248"; }
+.qi-2153::before { content: "\f249"; }
+.qi-2154::before { content: "\f24a"; }
+.qi-2155::before { content: "\f24b"; }
+.qi-2156::before { content: "\f24c"; }
+.qi-2157::before { content: "\f24d"; }
+.qi-2158::before { content: "\f24e"; }
+.qi-2159::before { content: "\f24f"; }
+.qi-2160::before { content: "\f250"; }
+.qi-2161::before { content: "\f251"; }
+.qi-2162::before { content: "\f252"; }
+.qi-2163::before { content: "\f253"; }
+.qi-2164::before { content: "\f254"; }
+.qi-2165::before { content: "\f255"; }
+.qi-2166::before { content: "\f256"; }
+.qi-2190::before { content: "\f257"; }
+.qi-2191::before { content: "\f258"; }
+.qi-2192::before { content: "\f259"; }
+.qi-2193::before { content: "\f25a"; }
+.qi-2200::before { content: "\f2e4"; }
+.qi-2201::before { content: "\f2e5"; }
+.qi-2202::before { content: "\f2e6"; }
+.qi-2203::before { content: "\f2e7"; }
+.qi-2204::before { content: "\f2e8"; }
+.qi-2205::before { content: "\f2e9"; }
+.qi-2207::before { content: "\f2ea"; }
+.qi-2208::before { content: "\f2eb"; }
+.qi-2209::before { content: "\f2ec"; }
+.qi-2210::before { content: "\f2ed"; }
+.qi-2211::before { content: "\f2ee"; }
+.qi-2212::before { content: "\f2ef"; }
+.qi-2213::before { content: "\f2f0"; }
+.qi-2214::before { content: "\f2f1"; }
+.qi-2215::before { content: "\f2f2"; }
+.qi-2216::before { content: "\f2f3"; }
+.qi-2217::before { content: "\f2f4"; }
+.qi-2218::before { content: "\f2f5"; }
+.qi-2300::before { content: "\f25b"; }
+.qi-2301::before { content: "\f25c"; }
+.qi-2302::before { content: "\f25d"; }
+.qi-2303::before { content: "\f25e"; }
+.qi-2304::before { content: "\f25f"; }
+.qi-2305::before { content: "\f260"; }
+.qi-2306::before { content: "\f261"; }
+.qi-2307::before { content: "\f262"; }
+.qi-2308::before { content: "\f263"; }
+.qi-2309::before { content: "\f264"; }
+.qi-2311::before { content: "\f265"; }
+.qi-2312::before { content: "\f266"; }
+.qi-2313::before { content: "\f267"; }
+.qi-2314::before { content: "\f268"; }
+.qi-2315::before { content: "\f269"; }
+.qi-2316::before { content: "\f26a"; }
+.qi-2317::before { content: "\f26b"; }
+.qi-2318::before { content: "\f26c"; }
+.qi-2319::before { content: "\f26d"; }
+.qi-2320::before { content: "\f26e"; }
+.qi-2321::before { content: "\f26f"; }
+.qi-2322::before { content: "\f270"; }
+.qi-2323::before { content: "\f271"; }
+.qi-2324::before { content: "\f272"; }
+.qi-2325::before { content: "\f273"; }
+.qi-2326::before { content: "\f274"; }
+.qi-2327::before { content: "\f275"; }
+.qi-2328::before { content: "\f276"; }
+.qi-2330::before { content: "\f277"; }
+.qi-2331::before { content: "\f278"; }
+.qi-2332::before { content: "\f279"; }
+.qi-2333::before { content: "\f27a"; }
+.qi-2341::before { content: "\f27b"; }
+.qi-2343::before { content: "\f27c"; }
+.qi-2345::before { content: "\f27d"; }
+.qi-2346::before { content: "\f27e"; }
+.qi-2348::before { content: "\f27f"; }
+.qi-2349::before { content: "\f280"; }
+.qi-2350::before { content: "\f281"; }
+.qi-2351::before { content: "\f282"; }
+.qi-2352::before { content: "\f283"; }
+.qi-2353::before { content: "\f284"; }
+.qi-2354::before { content: "\f285"; }
+.qi-2355::before { content: "\f286"; }
+.qi-2356::before { content: "\f287"; }
+.qi-2357::before { content: "\f288"; }
+.qi-2358::before { content: "\f289"; }
+.qi-2359::before { content: "\f28a"; }
+.qi-2360::before { content: "\f28b"; }
+.qi-2361::before { content: "\f28c"; }
+.qi-2362::before { content: "\f28d"; }
+.qi-2363::before { content: "\f28e"; }
+.qi-2364::before { content: "\f28f"; }
+.qi-2365::before { content: "\f290"; }
+.qi-2366::before { content: "\f291"; }
+.qi-2367::before { content: "\f292"; }
+.qi-2368::before { content: "\f293"; }
+.qi-2369::before { content: "\f294"; }
+.qi-2370::before { content: "\f295"; }
+.qi-2371::before { content: "\f296"; }
+.qi-2372::before { content: "\f297"; }
+.qi-2373::before { content: "\f298"; }
+.qi-2374::before { content: "\f299"; }
+.qi-2375::before { content: "\f29a"; }
+.qi-2376::before { content: "\f29b"; }
+.qi-2377::before { content: "\f29c"; }
+.qi-2378::before { content: "\f29d"; }
+.qi-2379::before { content: "\f29e"; }
+.qi-2380::before { content: "\f29f"; }
+.qi-2381::before { content: "\f2a0"; }
+.qi-2382::before { content: "\f2a1"; }
+.qi-2383::before { content: "\f2a2"; }
+.qi-2384::before { content: "\f2a3"; }
+.qi-2385::before { content: "\f2a4"; }
+.qi-2386::before { content: "\f2a5"; }
+.qi-2387::before { content: "\f2a6"; }
+.qi-2388::before { content: "\f2a7"; }
+.qi-2389::before { content: "\f2a8"; }
+.qi-2390::before { content: "\f2a9"; }
+.qi-2391::before { content: "\f2aa"; }
+.qi-2392::before { content: "\f2ab"; }
+.qi-2393::before { content: "\f2ac"; }
+.qi-2394::before { content: "\f2ad"; }
+.qi-2395::before { content: "\f2ae"; }
+.qi-2396::before { content: "\f2af"; }
+.qi-2397::before { content: "\f2b0"; }
+.qi-2398::before { content: "\f2b1"; }
+.qi-2399::before { content: "\f2b2"; }
+.qi-2400::before { content: "\f2b3"; }
+.qi-2409::before { content: "\f2b4"; }
+.qi-2411::before { content: "\f2b5"; }
+.qi-2412::before { content: "\f2b6"; }
+.qi-2413::before { content: "\f2b7"; }
+.qi-2414::before { content: "\f2b8"; }
+.qi-2415::before { content: "\f2b9"; }
+.qi-2416::before { content: "\f2ba"; }
+.qi-2417::before { content: "\f2bb"; }
+.qi-2418::before { content: "\f2bc"; }
+.qi-2419::before { content: "\f2bd"; }
+.qi-2420::before { content: "\f2be"; }
+.qi-2421::before { content: "\f2bf"; }
+.qi-2422::before { content: "\f2c0"; }
+.qi-2423::before { content: "\f2c1"; }
+.qi-2424::before { content: "\f2c2"; }
+.qi-2425::before { content: "\f2c3"; }
+.qi-2426::before { content: "\f2c4"; }
+.qi-9998::before { content: "\f1ca"; }
+.qi-9999::before { content: "\f1cb"; }
+.qi-100-fill::before { content: "\f1cc"; }
+.qi-101-fill::before { content: "\f1cd"; }
+.qi-102-fill::before { content: "\f1ce"; }
+.qi-103-fill::before { content: "\f1cf"; }
+.qi-104-fill::before { content: "\f1d0"; }
+.qi-150-fill::before { content: "\f1d1"; }
+.qi-151-fill::before { content: "\f1d2"; }
+.qi-152-fill::before { content: "\f1d3"; }
+.qi-153-fill::before { content: "\f1d4"; }
+.qi-300-fill::before { content: "\f1d5"; }
+.qi-301-fill::before { content: "\f1d6"; }
+.qi-302-fill::before { content: "\f1d7"; }
+.qi-303-fill::before { content: "\f1d8"; }
+.qi-304-fill::before { content: "\f1d9"; }
+.qi-305-fill::before { content: "\f1da"; }
+.qi-306-fill::before { content: "\f1db"; }
+.qi-307-fill::before { content: "\f1dc"; }
+.qi-308-fill::before { content: "\f1dd"; }
+.qi-309-fill::before { content: "\f1de"; }
+.qi-310-fill::before { content: "\f1df"; }
+.qi-311-fill::before { content: "\f1e0"; }
+.qi-312-fill::before { content: "\f1e1"; }
+.qi-313-fill::before { content: "\f1e2"; }
+.qi-314-fill::before { content: "\f1e3"; }
+.qi-315-fill::before { content: "\f1e4"; }
+.qi-316-fill::before { content: "\f1e5"; }
+.qi-317-fill::before { content: "\f1e6"; }
+.qi-318-fill::before { content: "\f1e7"; }
+.qi-350-fill::before { content: "\f1e8"; }
+.qi-351-fill::before { content: "\f1e9"; }
+.qi-399-fill::before { content: "\f1ea"; }
+.qi-400-fill::before { content: "\f1eb"; }
+.qi-401-fill::before { content: "\f1ec"; }
+.qi-402-fill::before { content: "\f1ed"; }
+.qi-403-fill::before { content: "\f1ee"; }
+.qi-404-fill::before { content: "\f1ef"; }
+.qi-405-fill::before { content: "\f1f0"; }
+.qi-406-fill::before { content: "\f1f1"; }
+.qi-407-fill::before { content: "\f1f2"; }
+.qi-408-fill::before { content: "\f1f3"; }
+.qi-409-fill::before { content: "\f1f4"; }
+.qi-410-fill::before { content: "\f1f5"; }
+.qi-456-fill::before { content: "\f1f6"; }
+.qi-457-fill::before { content: "\f1f7"; }
+.qi-499-fill::before { content: "\f1f8"; }
+.qi-500-fill::before { content: "\f1f9"; }
+.qi-501-fill::before { content: "\f1fa"; }
+.qi-502-fill::before { content: "\f1fb"; }
+.qi-503-fill::before { content: "\f1fc"; }
+.qi-504-fill::before { content: "\f1fd"; }
+.qi-507-fill::before { content: "\f1fe"; }
+.qi-508-fill::before { content: "\f1ff"; }
+.qi-509-fill::before { content: "\f200"; }
+.qi-510-fill::before { content: "\f201"; }
+.qi-511-fill::before { content: "\f202"; }
+.qi-512-fill::before { content: "\f203"; }
+.qi-513-fill::before { content: "\f204"; }
+.qi-514-fill::before { content: "\f205"; }
+.qi-515-fill::before { content: "\f206"; }
+.qi-900-fill::before { content: "\f207"; }
+.qi-901-fill::before { content: "\f208"; }
+.qi-999-fill::before { content: "\f209"; }
+.qi-qweather-fill::before { content: "\f20a"; }
+.qi-qweather::before { content: "\f20b"; }
+.qi-sunny::before { content: "\f101"; }
+.qi-cloudy::before { content: "\f102"; }
+.qi-few-clouds::before { content: "\f103"; }
+.qi-partly-cloudy::before { content: "\f104"; }
+.qi-overcast::before { content: "\f105"; }
+.qi-clear-night::before { content: "\f106"; }
+.qi-cloudy-night::before { content: "\f107"; }
+.qi-few-clouds-night::before { content: "\f108"; }
+.qi-partly-cloudy-night::before { content: "\f109"; }
+.qi-shower-rain::before { content: "\f10a"; }
+.qi-heavy-shower-rain::before { content: "\f10b"; }
+.qi-thundershower::before { content: "\f10c"; }
+.qi-heavy-thunderstorm::before { content: "\f10d"; }
+.qi-thundershower-with-hail::before { content: "\f10e"; }
+.qi-light-rain::before { content: "\f10f"; }
+.qi-moderate-rain::before { content: "\f110"; }
+.qi-heavy-rain::before { content: "\f111"; }
+.qi-extreme-rain::before { content: "\f112"; }
+.qi-drizzle-rain::before { content: "\f113"; }
+.qi-storm::before { content: "\f114"; }
+.qi-heavy-storm::before { content: "\f115"; }
+.qi-severe-storm::before { content: "\f116"; }
+.qi-freezing-rain::before { content: "\f117"; }
+.qi-light-to-moderate-rain::before { content: "\f118"; }
+.qi-moderate-to-heavy-rain::before { content: "\f119"; }
+.qi-heavy-rain-to-storm::before { content: "\f11a"; }
+.qi-storm-to-heavy-storm::before { content: "\f11b"; }
+.qi-heavy-to-severe-storm::before { content: "\f11c"; }
+.qi-shower-rain-night::before { content: "\f11d"; }
+.qi-heavy-shower-rain-night::before { content: "\f11e"; }
+.qi-rain::before { content: "\f11f"; }
+.qi-light-snow::before { content: "\f120"; }
+.qi-moderate-snow::before { content: "\f121"; }
+.qi-heavy-snow::before { content: "\f122"; }
+.qi-snowstorm::before { content: "\f123"; }
+.qi-sleet::before { content: "\f124"; }
+.qi-rain-and-snow::before { content: "\f125"; }
+.qi-shower-snow::before { content: "\f126"; }
+.qi-snow-flurry::before { content: "\f127"; }
+.qi-light-to-moderate-snow::before { content: "\f128"; }
+.qi-moderate-to-heavy-snow::before { content: "\f129"; }
+.qi-heavy-snow-to-snowstorm::before { content: "\f12a"; }
+.qi-shower-snow-night::before { content: "\f12b"; }
+.qi-snow-flurry-night::before { content: "\f12c"; }
+.qi-snow::before { content: "\f12d"; }
+.qi-mist::before { content: "\f12e"; }
+.qi-foggy::before { content: "\f12f"; }
+.qi-haze::before { content: "\f130"; }
+.qi-sand::before { content: "\f131"; }
+.qi-dust::before { content: "\f132"; }
+.qi-duststorm::before { content: "\f133"; }
+.qi-sandstorm::before { content: "\f134"; }
+.qi-dense-fog::before { content: "\f135"; }
+.qi-strong-fog::before { content: "\f136"; }
+.qi-moderate-haze::before { content: "\f137"; }
+.qi-heavy-haze::before { content: "\f138"; }
+.qi-severe-haze::before { content: "\f139"; }
+.qi-heavy-fog::before { content: "\f13a"; }
+.qi-extra-heavy-fog::before { content: "\f13b"; }
+.qi-new-moon::before { content: "\f13c"; }
+.qi-waxing-crescent::before { content: "\f13d"; }
+.qi-first-quarter::before { content: "\f13e"; }
+.qi-waxing-gibbous::before { content: "\f13f"; }
+.qi-full-moon::before { content: "\f140"; }
+.qi-waning-gibbous::before { content: "\f141"; }
+.qi-last-quarter::before { content: "\f142"; }
+.qi-waning-crescent::before { content: "\f143"; }
+.qi-hot::before { content: "\f144"; }
+.qi-cold::before { content: "\f145"; }
+.qi-unknown::before { content: "\f146"; }
+.qi-typhoon::before { content: "\f147"; }
+.qi-tornado::before { content: "\f148"; }
+.qi-rainstorm::before { content: "\f149"; }
+.qi-snow-storm::before { content: "\f14a"; }
+.qi-cold-wave::before { content: "\f14b"; }
+.qi-gale::before { content: "\f14c"; }
+.qi-sandstorm-warning::before { content: "\f14d"; }
+.qi-low-temperature-freeze::before { content: "\f14e"; }
+.qi-high-temperature::before { content: "\f14f"; }
+.qi-heat-wave::before { content: "\f150"; }
+.qi-dry-hot-wind::before { content: "\f151"; }
+.qi-downburst::before { content: "\f152"; }
+.qi-avalanche::before { content: "\f153"; }
+.qi-lightning::before { content: "\f154"; }
+.qi-hail::before { content: "\f155"; }
+.qi-frost::before { content: "\f156"; }
+.qi-heavy-fog-warning::before { content: "\f157"; }
+.qi-low-level-wind-shearl::before { content: "\f158"; }
+.qi-haze-warning::before { content: "\f159"; }
+.qi-thunder-gust::before { content: "\f15a"; }
+.qi-road-icing::before { content: "\f15b"; }
+.qi-drought::before { content: "\f15c"; }
+.qi-gale-at-sea::before { content: "\f15d"; }
+.qi-heat-stroke::before { content: "\f15e"; }
+.qi-wildfire::before { content: "\f15f"; }
+.qi-grassland-fire::before { content: "\f160"; }
+.qi-freeze::before { content: "\f161"; }
+.qi-space-weather::before { content: "\f162"; }
+.qi-heavy-air-pollution::before { content: "\f163"; }
+.qi-low-temperature-rain-and-snow::before { content: "\f164"; }
+.qi-strong-convection::before { content: "\f165"; }
+.qi-ozone::before { content: "\f166"; }
+.qi-heavy-snow-warning::before { content: "\f167"; }
+.qi-cold-warning::before { content: "\f168"; }
+.qi-continuous-rain::before { content: "\f169"; }
+.qi-waterlogging::before { content: "\f16a"; }
+.qi-geological-hazard::before { content: "\f16b"; }
+.qi-heavy-rainfall::before { content: "\f16c"; }
+.qi-severely-falling-temperature::before { content: "\f16d"; }
+.qi-snow-disaster::before { content: "\f16e"; }
+.qi-wildfire-grassland::before { content: "\f16f"; }
+.qi-medical-meteorology::before { content: "\f170"; }
+.qi-thunderstorm::before { content: "\f171"; }
+.qi-school-closure::before { content: "\f172"; }
+.qi-factory-closure::before { content: "\f173"; }
+.qi-maritime-risk::before { content: "\f174"; }
+.qi-spring-dust::before { content: "\f175"; }
+.qi-falling-temperature::before { content: "\f176"; }
+.qi-typhoon-and-rainstorm::before { content: "\f177"; }
+.qi-severe-cold::before { content: "\f178"; }
+.qi-sand-dust::before { content: "\f179"; }
+.qi-sea-thunderstorms::before { content: "\f17a"; }
+.qi-sea-fog::before { content: "\f17b"; }
+.qi-sea-thunder::before { content: "\f17c"; }
+.qi-sea-typhoon::before { content: "\f17d"; }
+.qi-low-temperature::before { content: "\f17e"; }
+.qi-road-ice-and-snow::before { content: "\f17f"; }
+.qi-thunderstorm-and-gale::before { content: "\f180"; }
+.qi-continuous-low-temperature::before { content: "\f181"; }
+.qi-low-visibility::before { content: "\f182"; }
+.qi-strong-dust::before { content: "\f183"; }
+.qi-gale-in-sea-area::before { content: "\f184"; }
+.qi-short-duration-heavy-shower-rain::before { content: "\f185"; }
+.qi-short-lived-heavy-shower-rain::before { content: "\f186"; }
+.qi-sea-area-fog::before { content: "\f187"; }
+.qi-heat-stroke-conditions::before { content: "\f188"; }
+.qi-heavy-pollution-weather::before { content: "\f189"; }
+.qi-co-poisoning-weather-conditions::before { content: "\f18a"; }
+.qi-respiratory-disease-weather-wonditions::before { content: "\f18b"; }
+.qi-intestinal-disease-weather-wonditions::before { content: "\f18c"; }
+.qi-cardiovascular-disease-weather-wonditions::before { content: "\f18d"; }
+.qi-flooding-weather-risk::before { content: "\f18e"; }
+.qi-heavy-pollution-weather-conditions::before { content: "\f18f"; }
+.qi-urban-flooding-weather-risk::before { content: "\f190"; }
+.qi-flooding-weather-risk-2::before { content: "\f191"; }
+.qi-wildfire-weather-risk::before { content: "\f192"; }
+.qi-meteorological-drought::before { content: "\f193"; }
+.qi-agricultural-weather-risk::before { content: "\f194"; }
+.qi-strong-monsoon::before { content: "\f195"; }
+.qi-ice-accretion-on-wire::before { content: "\f196"; }
+.qi-stroke-weather-risk::before { content: "\f197"; }
+.qi-wildfire-grassland-risk::before { content: "\f198"; }
+.qi-thunderstorm-and-strong-winds::before { content: "\f199"; }
+.qi-low-temperature-freeze2::before { content: "\f19a"; }
+.qi-low-temperature-damage::before { content: "\f19b"; }
+.qi-national-agricultural-meteorological-risk::before { content: "\f19c"; }
+.qi-dry-hot-wind-risk-for-winter-wheat::before { content: "\f19d"; }
+.qi-flood::before { content: "\f2c5"; }
+.qi-urban-flooding::before { content: "\f2c6"; }
+.qi-reservoir-danger::before { content: "\f2c7"; }
+.qi-dike-danger::before { content: "\f2c8"; }
+.qi-ice-flood::before { content: "\f2c9"; }
+.qi-waterlogging2::before { content: "\f2ca"; }
+.qi-flood-and-waterlogging::before { content: "\f2cb"; }
+.qi-dry-water::before { content: "\f2cc"; }
+.qi-flood-and-flash-flood-in-small-and-medium-rivers::before { content: "\f2cd"; }
+.qi-difficulty-drinking-water-for-rural-people-and-animals::before { content: "\f2ce"; }
+.qi-flood-in-small-and-medium-rivers::before { content: "\f2cf"; }
+.qi-flood-and-drought-advisory::before { content: "\f2d0"; }
+.qi-urban-flood-risk::before { content: "\f2d1"; }
+.qi-flash-flood::before { content: "\f2d2"; }
+.qi-agricultural-drought::before { content: "\f2d3"; }
+.qi-urban-water-shortage::before { content: "\f2d4"; }
+.qi-ecological-drought::before { content: "\f2d5"; }
+.qi-disaster-risk-early-warning::before { content: "\f2d6"; }
+.qi-flash-flood-weather-risk::before { content: "\f2d7"; }
+.qi-water-conservancy-and-drought::before { content: "\f2d8"; }
+.qi-landslide::before { content: "\f2d9"; }
+.qi-debris-flows::before { content: "\f2da"; }
+.qi-landslide-event::before { content: "\f2db"; }
+.qi-ground-collapses::before { content: "\f2dc"; }
+.qi-ground-fissure::before { content: "\f2dd"; }
+.qi-land-subsidence::before { content: "\f2de"; }
+.qi-volcanic-eruption::before { content: "\f2df"; }
+.qi-geological-hazard-weather-risk::before { content: "\f2e0"; }
+.qi-geological-hazard-weather::before { content: "\f2e1"; }
+.qi-geological-hazard2::before { content: "\f2e2"; }
+.qi-geological-hazard-risk::before { content: "\f2e3"; }
+.qi-air-pollution-incident::before { content: "\f2f6"; }
+.qi-heavy-air-pollution-2::before { content: "\f2f7"; }
+.qi-air-pollution::before { content: "\f2f8"; }
+.qi-heavy-pollution-weather-2::before { content: "\f2f9"; }
+.qi-very-hot-weather::before { content: "\f1a1"; }
+.qi-strong-monsoon-signal::before { content: "\f1a2"; }
+.qi-landslip::before { content: "\f1a3"; }
+.qi-tropical-cyclone::before { content: "\f1a4"; }
+.qi-fire-danger::before { content: "\f1a5"; }
+.qi-flooding-in-the-northern-new-territories::before { content: "\f1a6"; }
+.qi-cold-weather::before { content: "\f1a7"; }
+.qi-thunderstorm2::before { content: "\f20c"; }
+.qi-rainstorm2::before { content: "\f20d"; }
+.qi-frost2::before { content: "\f20e"; }
+.qi-cold-surge-advisory::before { content: "\f1a8"; }
+.qi-strong-wind-advisory::before { content: "\f1a9"; }
+.qi-rainfall-advisory::before { content: "\f1aa"; }
+.qi-strong-monsoon-signal2::before { content: "\f20f"; }
+.qi-storm-surge2::before { content: "\f210"; }
+.qi-tropical-cyclone2::before { content: "\f211"; }
+.qi-rainstorm3::before { content: "\f212"; }
+.qi-thunderstorm3::before { content: "\f213"; }
+.qi-wind-warning::before { content: "\f1ab"; }
+.qi-snow-ice::before { content: "\f1ac"; }
+.qi-fog::before { content: "\f1ad"; }
+.qi-coastal-event::before { content: "\f1ae"; }
+.qi-forest-fire::before { content: "\f1af"; }
+.qi-rain-warning::before { content: "\f1b0"; }
+.qi-rain-flood::before { content: "\f1b1"; }
+.qi-thunderstorm4::before { content: "\f214"; }
+.qi-high-temperature2::before { content: "\f215"; }
+.qi-low-temperature2::before { content: "\f216"; }
+.qi-avalanches::before { content: "\f217"; }
+.qi-flooding::before { content: "\f218"; }
+.qi-rain-warning2::before { content: "\f250"; }
+.qi-wind::before { content: "\f21a"; }
+.qi-snow-warning::before { content: "\f1c7"; }
+.qi-zonda-wind::before { content: "\f1c8"; }
+.qi-storm-warning::before { content: "\f1c9"; }
+.qi-dust-raising-winds2::before { content: "\f21b"; }
+.qi-strong-surface-winds2::before { content: "\f21c"; }
+.qi-hot-day2::before { content: "\f21d"; }
+.qi-warm-night2::before { content: "\f21e"; }
+.qi-cold-day2::before { content: "\f21f"; }
+.qi-thunderstorm-and-lightning2::before { content: "\f220"; }
+.qi-hailstorm2::before { content: "\f221"; }
+.qi-sea-area-warning2::before { content: "\f222"; }
+.qi-fishermen-warning2::before { content: "\f223"; }
+.qi-heavy-snow-warning2::before { content: "\f243"; }
+.qi-dust-storm::before { content: "\f225"; }
+.qi-heat-wave2::before { content: "\f226"; }
+.qi-cold-wave2::before { content: "\f227"; }
+.qi-fog2::before { content: "\f228"; }
+.qi-heavy-rain-warning::before { content: "\f229"; }
+.qi-ground-frost2::before { content: "\f22a"; }
+.qi-fog3::before { content: "\f22b"; }
+.qi-thunder-rain2::before { content: "\f22c"; }
+.qi-thunder-storm::before { content: "\f22d"; }
+.qi-light-rain-warning::before { content: "\f22e"; }
+.qi-heavy-rain-warning2::before { content: "\f22f"; }
+.qi-fresh-wind::before { content: "\f230"; }
+.qi-thunderstorm-and-dust::before { content: "\f231"; }
+.qi-dust-warning::before { content: "\f232"; }
+.qi-high-wave::before { content: "\f233"; }
+.qi-frost3::before { content: "\f234"; }
+.qi-drop-in-visibility::before { content: "\f235"; }
+.qi-low-humidity2::before { content: "\f236"; }
+.qi-accumulated-rain2::before { content: "\f237"; }
+.qi-cold-wave3::before { content: "\f238"; }
+.qi-tornado2::before { content: "\f239"; }
+.qi-thunderstorm5::before { content: "\f23a"; }
+.qi-hail2::before { content: "\f23b"; }
+.qi-heavy-rainfall2::before { content: "\f23c"; }
+.qi-gale2::before { content: "\f23d"; }
+.qi-heat-wave3::before { content: "\f23e"; }
+.qi-cold-warning2::before { content: "\f23f"; }
+.qi-frost4::before { content: "\f240"; }
+.qi-drought2::before { content: "\f241"; }
+.qi-forest-fire2::before { content: "\f242"; }
+.qi-severely-falling-temperature2::before { content: "\f244"; }
+.qi-rainstorm4::before { content: "\f245"; }
+.qi-wind2::before { content: "\f246"; }
+.qi-snow-ice2::before { content: "\f247"; }
+.qi-freeze2::before { content: "\f248"; }
+.qi-thunderstorms::before { content: "\f249"; }
+.qi-fog4::before { content: "\f24a"; }
+.qi-high-temperature3::before { content: "\f24b"; }
+.qi-low-temperature3::before { content: "\f24c"; }
+.qi-coastal-event2::before { content: "\f24d"; }
+.qi-forest-fire3::before { content: "\f24e"; }
+.qi-avalanches2::before { content: "\f24f"; }
+.qi-flood2::before { content: "\f251"; }
+.qi-rain-flood2::before { content: "\f252"; }
+.qi-mudflow2::before { content: "\f253"; }
+.qi-duststorm-warning::before { content: "\f254"; }
+.qi-freezing-rain-and-icing::before { content: "\f255"; }
+.qi-other-dangers::before { content: "\f256"; }
+.qi-severe-thunderstorms::before { content: "\f257"; }
+.qi-damaging-winds2::before { content: "\f258"; }
+.qi-veld-fire-conditions2::before { content: "\f259"; }
+.qi-weather-advisory2::before { content: "\f25a"; }
+.qi-thunderstorm6::before { content: "\f2e4"; }
+.qi-squall::before { content: "\f2e5"; }
+.qi-air-quality::before { content: "\f2e6"; }
+.qi-rainfall::before { content: "\f2e7"; }
+.qi-fog5::before { content: "\f2e8"; }
+.qi-heat::before { content: "\f2e9"; }
+.qi-wildfire2::before { content: "\f2ea"; }
+.qi-wind3::before { content: "\f2eb"; }
+.qi-freezing-rain-warning::before { content: "\f2ec"; }
+.qi-tornado3::before { content: "\f2ed"; }
+.qi-blizzard::before { content: "\f2ee"; }
+.qi-weather-warning::before { content: "\f2ef"; }
+.qi-winter-storm::before { content: "\f2f0"; }
+.qi-freezing-drizzle::before { content: "\f2f1"; }
+.qi-snowfall::before { content: "\f2f2"; }
+.qi-blowing-snow::before { content: "\f2f3"; }
+.qi-extreme-cold::before { content: "\f2f4"; }
+.qi-frost5::before { content: "\f2f5"; }
+.qi-hazardous-seas-warning::before { content: "\f25b"; }
+.qi-heavy-freezing-spray-warning::before { content: "\f25c"; }
+.qi-red-flag-warning::before { content: "\f25d"; }
+.qi-freeze-warning::before { content: "\f25e"; }
+.qi-hard-freeze-warning::before { content: "\f25f"; }
+.qi-extreme-cold-warning::before { content: "\f260"; }
+.qi-wind-chill-warning::before { content: "\f261"; }
+.qi-gale-warning::before { content: "\f262"; }
+.qi-excessive-heat-warning::before { content: "\f263"; }
+.qi-lake-effect-snow-warning::before { content: "\f264"; }
+.qi-blowing-dust-warning::before { content: "\f265"; }
+.qi-dust-storm-warning::before { content: "\f266"; }
+.qi-storm-warning2::before { content: "\f267"; }
+.qi-tropical-storm-warning::before { content: "\f268"; }
+.qi-high-wind-warning::before { content: "\f269"; }
+.qi-high-surf-warning::before { content: "\f26a"; }
+.qi-flood-warning::before { content: "\f26b"; }
+.qi-lakeshore-flood-warning::before { content: "\f26c"; }
+.qi-coastal-flood-warning::before { content: "\f26d"; }
+.qi-ashfall-warning::before { content: "\f26e"; }
+.qi-volcano-warning::before { content: "\f26f"; }
+.qi-earthquake-warning::before { content: "\f270"; }
+.qi-avalanche-warning::before { content: "\f271"; }
+.qi-winter-storm-warning::before { content: "\f272"; }
+.qi-ice-storm-warning::before { content: "\f273"; }
+.qi-snow-squall-warning::before { content: "\f274"; }
+.qi-blizzard-warning::before { content: "\f275"; }
+.qi-special-marine-warning::before { content: "\f276"; }
+.qi-typhoon-warning::before { content: "\f277"; }
+.qi-hurricane-warning::before { content: "\f278"; }
+.qi-hurricane-force-wind-warning::before { content: "\f279"; }
+.qi-storm-surge-warning::before { content: "\f27a"; }
+.qi-flash-flood-warning::before { content: "\f27b"; }
+.qi-severe-thunderstorm-warning::before { content: "\f27c"; }
+.qi-extreme-wind-warning::before { content: "\f27d"; }
+.qi-tornado-warning::before { content: "\f27e"; }
+.qi-tsunami-warning::before { content: "\f27f"; }
+.qi-fire-weather-watch::before { content: "\f280"; }
+.qi-freeze-watch::before { content: "\f281"; }
+.qi-hard-freeze-watch::before { content: "\f282"; }
+.qi-wind-chill-watch::before { content: "\f283"; }
+.qi-extreme-cold-watch::before { content: "\f284"; }
+.qi-excessive-heat-watch::before { content: "\f285"; }
+.qi-high-wind-watch::before { content: "\f286"; }
+.qi-flood-watch::before { content: "\f287"; }
+.qi-lakeshore-flood-watch::before { content: "\f288"; }
+.qi-coastal-flood-watch::before { content: "\f289"; }
+.qi-heavy-freezing-spray-watch::before { content: "\f28a"; }
+.qi-hazardous-seas-watch::before { content: "\f28b"; }
+.qi-winter-storm-watch::before { content: "\f28c"; }
+.qi-gale-watch::before { content: "\f28d"; }
+.qi-avalanche-watch::before { content: "\f28e"; }
+.qi-storm-watch::before { content: "\f28f"; }
+.qi-tropical-storm-watch::before { content: "\f290"; }
+.qi-typhoon-watch::before { content: "\f291"; }
+.qi-hurricane-force-wind-watch::before { content: "\f292"; }
+.qi-hurricane-watch::before { content: "\f293"; }
+.qi-storm-surge-watch::before { content: "\f294"; }
+.qi-flash-flood-watch::before { content: "\f295"; }
+.qi-severe-thunderstorm-watch::before { content: "\f296"; }
+.qi-tornado-watch::before { content: "\f297"; }
+.qi-tsunami-watch::before { content: "\f298"; }
+.qi-air-stagnation-advisory::before { content: "\f299"; }
+.qi-low-water-advisory::before { content: "\f29a"; }
+.qi-freezing-spray-advisory::before { content: "\f29b"; }
+.qi-freezing-fog-advisory::before { content: "\f29c"; }
+.qi-ashfall-advisory::before { content: "\f29d"; }
+.qi-frost-advisory::before { content: "\f29e"; }
+.qi-wind-advisory::before { content: "\f29f"; }
+.qi-lake-wind-advisory::before { content: "\f2a0"; }
+.qi-blowing-dust-advisory::before { content: "\f2a1"; }
+.qi-dust-advisory::before { content: "\f2a2"; }
+.qi-brisk-wind-advisory::before { content: "\f2a3"; }
+.qi-small-craft-advisory::before { content: "\f2a4"; }
+.qi-small-craft-advisory-for-winds::before { content: "\f2a5"; }
+.qi-small-craft-advisory-for-rough-bar::before { content: "\f2a6"; }
+.qi-small-craft-advisory-for-hazardous-seas::before { content: "\f2a7"; }
+.qi-dense-smoke-advisory::before { content: "\f2a8"; }
+.qi-dense-fog-advisory::before { content: "\f2a9"; }
+.qi-high-surf-advisory::before { content: "\f2aa"; }
+.qi-coastal-flood-advisory::before { content: "\f2ab"; }
+.qi-lakeshore-flood-advisory::before { content: "\f2ac"; }
+.qi-hydrologic-advisory::before { content: "\f2ad"; }
+.qi-flood-advisory::before { content: "\f2ae"; }
+.qi-heat-advisory::before { content: "\f2af"; }
+.qi-wind-chill-advisory::before { content: "\f2b0"; }
+.qi-winter-weather-advisory::before { content: "\f2b1"; }
+.qi-avalanche-advisory::before { content: "\f2b2"; }
+.qi-tsunami-advisory::before { content: "\f2b3"; }
+.qi-flood-statement::before { content: "\f2b4"; }
+.qi-hydrologic-outlook::before { content: "\f2b5"; }
+.qi-hazardous-weather-outlook::before { content: "\f2b6"; }
+.qi-air-quality-alert::before { content: "\f2b7"; }
+.qi-extreme-fire-danger::before { content: "\f2b8"; }
+.qi-marine-weather-statement::before { content: "\f2b9"; }
+.qi-special-weather-statement::before { content: "\f2ba"; }
+.qi-lakeshore-flood-statement::before { content: "\f2bb"; }
+.qi-coastal-flood-statement::before { content: "\f2bc"; }
+.qi-beach-hazards-statement::before { content: "\f2bd"; }
+.qi-rip-current-statement::before { content: "\f2be"; }
+.qi-tropical-depression-local-statement::before { content: "\f2bf"; }
+.qi-tropical-storm-local-statement::before { content: "\f2c0"; }
+.qi-typhoon-local-statement::before { content: "\f2c1"; }
+.qi-hurricane-local-statement::before { content: "\f2c2"; }
+.qi-severe-weather-statement::before { content: "\f2c3"; }
+.qi-flash-flood-statement::before { content: "\f2c4"; }
+.qi-severe-weather-warning::before { content: "\f1ca"; }
+.qi-warning-default::before { content: "\f1cb"; }
+.qi-sunny-fill::before { content: "\f1cc"; }
+.qi-cloudy-fill::before { content: "\f1cd"; }
+.qi-few-clouds-fill::before { content: "\f1ce"; }
+.qi-partly-cloudy-fill::before { content: "\f1cf"; }
+.qi-overcast-fill::before { content: "\f1d0"; }
+.qi-clear-night-fill::before { content: "\f1d1"; }
+.qi-cloudy-night-fill::before { content: "\f1d2"; }
+.qi-few-clouds-night-fill::before { content: "\f1d3"; }
+.qi-partly-cloudy-night-fill::before { content: "\f1d4"; }
+.qi-shower-rain-fill::before { content: "\f1d5"; }
+.qi-heavy-shower-rain-fill::before { content: "\f1d6"; }
+.qi-thundershower-fill::before { content: "\f1d7"; }
+.qi-heavy-thunderstorm-fill::before { content: "\f1d8"; }
+.qi-thundershower-with-hail-fill::before { content: "\f1d9"; }
+.qi-light-rain-fill::before { content: "\f1da"; }
+.qi-moderate-rain-fill::before { content: "\f1db"; }
+.qi-heavy-rain-fill::before { content: "\f1dc"; }
+.qi-extreme-rain-fill::before { content: "\f1dd"; }
+.qi-drizzle-rain-fill::before { content: "\f1de"; }
+.qi-storm-fill::before { content: "\f1df"; }
+.qi-heavy-storm-fill::before { content: "\f1e0"; }
+.qi-severe-storm-fill::before { content: "\f1e1"; }
+.qi-freezing-rain-fill::before { content: "\f1e2"; }
+.qi-light-to-moderate-rain-fill::before { content: "\f1e3"; }
+.qi-moderate-to-heavy-rain-fill::before { content: "\f1e4"; }
+.qi-heavy-rain-to-storm-fill::before { content: "\f1e5"; }
+.qi-storm-to-heavy-storm-fill::before { content: "\f1e6"; }
+.qi-heavy-to-severe-storm-fill::before { content: "\f1e7"; }
+.qi-shower-rain-night-fill::before { content: "\f1e8"; }
+.qi-heavy-shower-rain-night-fill::before { content: "\f1e9"; }
+.qi-rain-fill::before { content: "\f1ea"; }
+.qi-light-snow-fill::before { content: "\f1eb"; }
+.qi-moderate-snow-fill::before { content: "\f1ec"; }
+.qi-heavy-snow-fill::before { content: "\f1ed"; }
+.qi-snowstorm-fill::before { content: "\f1ee"; }
+.qi-sleet-fill::before { content: "\f1ef"; }
+.qi-rain-and-snow-fill::before { content: "\f1f0"; }
+.qi-shower-snow-fill::before { content: "\f1f1"; }
+.qi-snow-flurry-fill::before { content: "\f1f2"; }
+.qi-light-to-moderate-snow-fill::before { content: "\f1f3"; }
+.qi-moderate-to-heavy-snow-fill::before { content: "\f1f4"; }
+.qi-heavy-snow-to-snowstorm-fill::before { content: "\f1f5"; }
+.qi-shower-snow-night-fill::before { content: "\f1f6"; }
+.qi-snow-flurry-night-fill::before { content: "\f1f7"; }
+.qi-snow-fill::before { content: "\f1f8"; }
+.qi-mist-fill::before { content: "\f1f9"; }
+.qi-foggy-fill::before { content: "\f1fa"; }
+.qi-haze-fill::before { content: "\f1fb"; }
+.qi-sand-fill::before { content: "\f1fc"; }
+.qi-dust-fill::before { content: "\f1fd"; }
+.qi-duststorm-fill::before { content: "\f1fe"; }
+.qi-sandstorm-fill::before { content: "\f1ff"; }
+.qi-dense-fog-fill::before { content: "\f200"; }
+.qi-strong-fog-fill::before { content: "\f201"; }
+.qi-moderate-haze-fill::before { content: "\f202"; }
+.qi-heavy-haze-fill::before { content: "\f203"; }
+.qi-severe-haze-fill::before { content: "\f204"; }
+.qi-heavy-fog-fill::before { content: "\f205"; }
+.qi-extra-heavy-fog-fill::before { content: "\f206"; }
+.qi-hot-fill::before { content: "\f207"; }
+.qi-cold-fill::before { content: "\f208"; }
+.qi-unknown-fill::before { content: "\f209"; }