/* 全局样式 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      line-height: 1.6;
	  text-decoration: none;
      color: #333;
      background-color: #f8f9fa;
    }
   a{text-decoration:none;color:#0D519C;}
 
    /* 头部样式 */
    header {
      background-color: #2c3e50;
      color: #fff;
      padding: 15px 0;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .header-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    
    .logo {
      font-size: 1.5rem;
      font-weight: bold;
    }
    
    /* 导航菜单 */
    .nav-toggle {
      display: none;
      background: none;
      border: none;
      color: #fff;
      font-size: 1.5rem;
      cursor: pointer;
    }
    
    .nav-menu {
      display: flex;
      list-style: none;
    }
    
    .nav-menu li {
      margin-left: 20px;
    }
    
    .nav-menu a {
      color: #ecf0f1;
      text-decoration: none;
      transition: color 0.3s;
    }
    
    .nav-menu a:hover {
      color: #e74c3c;
    }
    
    /* 搜索框 */
    .search-box {
      position: relative;
      margin-left: 20px;
    }
    
    .search-box input {
      padding: 5px 10px 5px 30px;
      border: none;
      border-radius: 4px;
      outline: none;
      font-size: 0.9rem;
    }
    
    .search-box i {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    /* 主内容区 */
    .main-container {
      max-width: 1200px;
      margin: 30px auto;
      padding: 0 20px;
    }
    
    /* 面包屑导航 */
    .breadcrumb {
      margin-bottom: 20px;
      color: #666;
      font-size: 0.9rem;
    }
    
    .breadcrumb a {
      color: #3498db;
      text-decoration: none;
    }
    
    .breadcrumb a:hover {
      text-decoration: underline;
    }
    
    /* 内容布局 */
    .content-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    
    .main-content {
      flex: 2;
      order: 0;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      padding: 20px;
    }
    
    .bd {
      flex: 1;
      order: 1;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      padding: 20px;
      border-left: 1px solid #eee;
    }
    
    /* 标题样式 */
    .page-title {
      color: #2c3e50;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: center;
    }
    
    /* 日期选择器 */
    .date-selector {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 20px;
    }
    
    .date-selector .form-group {
      flex: 1;
      min-width: 200px;
    }
    
    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: 500;
    }
    
    .form-control {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 1rem;
    }
    
    /* 数据统计 */
    .stats-card {
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: 6px;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }
    
    .stat-item {
      flex: 1;
      min-width: 150px;
      text-align: center;
    }
    
    .stat-label {
      display: block;
      color: #666;
      font-size: 0.9rem;
      margin-bottom: 5px;
    }
    
    .stat-value {
      font-size: 1.2rem;
      font-weight: 500;
    }
    
    .temp-high {
      color: #e74c3c;
    }
    
    .temp-low {
      color: #3498db;
    }
    
    /* 天气表格 */
    .weather-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }
    
    .weather-table th,
    .weather-table td {
      padding: 12px 15px;
      text-align: center;
      border-bottom: 1px solid #eee;
	  text-decoration: none;
    }
    
    .weather-table th {
      background-color: #f5f5f5;
      color: #2c3e50;
      font-weight: 600;
    }
    
    .weather-table tr:hover {
      background-color: #f9f9f9;
    }
    
    /* 天气图标 */
    .weather-icon {
      width: 40px;
      height: 40px;
      margin: 0 auto;
      display: block;
    }
    
    /* 空气质量标签 */
    .air-quality {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 0.8rem;
      font-weight: 500;
    }
    
    .air-quality优 {
      background-color: #28a745;
      color: white;
    }
    
    .air-quality轻度污染 {
      background-color: #ffc107;
      color: #856404;
    }
    
    .air-quality中度污染 {
      background-color: #ff7c34;
      color: white;
    }
    
    .air-quality重度污染 {
      background-color: #dc3545;
      color: white;
    }
    
    /* 分页控件 */
    .pagination {
      display: flex;
      justify-content: center;
      margin: 20px 0;
      list-style: none;
    }
    
    .pagination li {
      margin: 0 5px;
    }
    
    .pagination a {
      display: block;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      text-decoration: none;
      color: #333;
    }
    
    .pagination a:hover {
      background-color: #f5f5f5;
    }
    
    .pagination .active a {
      background-color: #2c3e50;
      color: white;
      border-color: #2c3e50;
    }
    
    .pagination .disabled a {
      color: #999;
      cursor: not-allowed;
      background-color: #f8f9fa;
    }
    
    /* 相关链接 */
    .related-links {
      margin-top: 30px;
    }
    
    .related-links h3 {
      color: #2c3e50;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    
    .related-links .link-list {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }
    
    .link-item {
      flex: 1;
      min-width: 200px;
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: 6px;
      text-decoration: none;
      color: #333;
      display: block;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .link-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .link-item i {
      margin-right: 10px;
      color: #3498db;
    }
    
    /* 侧边栏卡片 */
    .sidebar-card {
      margin-bottom: 20px;
    }
    
    .card-header {
      padding: 10px 15px;
      background-color: #2c3e50;
      color: white;
      border-radius: 6px 6px 0 0;
      font-weight: 500;
    }
    
    .card-body {
      padding: 15px;
      border: 1px solid #eee;
      border-top: none;
      border-radius: 0 0 6px 6px;
	  display: flex; 
     list-style: none; 
      flex-wrap: wrap; 
      justify-content: flex-start; 
      gap: 10px; 
    }
    
    .card-body ul {
      list-style: none;
	  display: flex; 
      flex-wrap: wrap; 
      justify-content: flex-start; 
      gap: 10px; 
    }

    
    .card-body li {
      padding: 3px 0;
      border-bottom: 1px solid #f5f5f5;

    }
    
    .card-body li:last-child {
      border-bottom: none;
    }
    
    .card-body a {
      color: #333;
      text-decoration: none;
	  color:#0D519C;

      transition: color 0.3s;
    }
    
    .card-body a:hover {
      color: #e74c3c;
      text-decoration: underline;
    }
    
    /* 页脚样式 */
    footer {
      background-color: #2c3e50;
      color: #ecf0f1;
      padding: 30px 0;
      margin-top: 50px;
    }
    
    .footer-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
    }
    
    .footer-col {
      flex: 1;
      min-width: 200px;
    }
    
    .footer-title {
      font-size: 1.2rem;
      font-weight: bold;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #34495e;
    }
    
    .footer-list {
      list-style: none;
      padding: 0;
    }
    
    .footer-list li {
      margin-bottom: 8px;
    }
    
    .footer-list a {
      color: #ecf0f1;
      text-decoration: none;
      transition: color 0.3s;
    }
    
    .footer-list a:hover {
      color: #e74c3c;
    }
    
    .social-icons {
      margin-top: 20px;
      display: flex;
      gap: 10px;
    }
    
    .social-icons a {
      display: inline-block;
      width: 35px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      border-radius: 50%;
      background-color: #34495e;
      color: white;
      transition: background-color 0.3s;
    }
    
    .social-icons a:hover {
      background-color: #e74c3c;
    }
    
    .footer-bottom {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid #34495e;
      text-align: center;
      font-size: 0.9rem;
    }
    
    /* 响应式布局 - 移动端优化 */
    @media (max-width: 768px) {
      /* 头部导航优化 */
      .header-container {
        flex-direction: column;
        align-items: flex-start;
      }
      
      .logo {
        margin-bottom: 15px;
      }
      
      .nav-toggle {
        display: block;
        margin-bottom: 15px;
      }
      
      .nav-menu {
        width: 100%;
        flex-direction: column;
        display: none;
      }
      
      .nav-menu.active {
        display: flex;
      }
      
      .nav-menu li {
        margin: 0;
        border-top: 1px solid #34495e;
      }
      
      .nav-menu li:first-child {
        border-top: none;
      }
      
      .nav-menu li a {
        display: block;
        padding: 10px 0;
      }
      
      .search-box {
        width: 100%;
        margin-left: 0;
        margin-top: 15px;
      }
      
      /* 内容布局调整 */
      .content-wrapper {
        flex-direction: column;
      }
      
      .main-content, .bd {
        flex: 1;
        order: 0;
        border-left: none;
        border-top: none;
      }
      
      .bd {
        order: 1;
        margin-top: 20px;
        border-top: 1px solid #eee;
        padding-top: 20px;
      }
      
      /* 日期选择器优化 */
      .date-selector {
        flex-direction: column;
      }
      
      .date-selector .form-group {
        min-width: 100%;
      }
      
      /* 数据统计优化 */
      .stats-card {
        flex-direction: column;
      }
      
      .stat-item {
        min-width: 100%;
        margin-bottom: 15px;
      }
      
      .stat-item:last-child {
        margin-bottom: 0;
      }
      
      /* 页脚优化 */
      .footer-container {
        flex-direction: column;
      }
      
      .footer-col {
        min-width: 100%;
        margin-bottom: 20px;
      }
      
      .footer-col:last-child {
        margin-bottom: 0;
      }
    }
    
    /* 超小屏幕优化 */
    @media (max-width: 480px) {
      .page-title {
        font-size: 1.5rem;
      }
      
      .weather-table th,
      .weather-table td {
        padding: 8px 10px;
        font-size: 0.9rem;
		text-decoration: none;
      }
      
      .weather-icon {
        width: 30px;
        height: 30px;
      }
    }

.city-list {
  display: flex; 
  flex-wrap: wrap; 
  justify-content: flex-start; 
  gap: 10px; 
}
/*气温等*/
.blue {color:#0D519C;}
.red {color: #cc3d3d;}
.green {color: #81ab41;}

 .fa-navicon:before,
 .fa-reorder:before,
 .fa-bars:before{content:"\f0c9"} 

.menu-icon {
   position: relative;
   width: 1.8rem;      /* 进一步增加宽度 */
   height: 1.2rem;     /* 进一步增加高度 */
   border-top: 0.2rem solid #ffffff;  /* 进一步增加边框粗细 */
   border-bottom: 0.2rem solid #ffffff; /* 进一步增加边框粗细 */
   background-color: transparent;
   padding: 0.2rem 0;  /* 进一步增加内边距 */
   margin-top: 0.9rem;
   margin-left: 0.5rem; /* 进一步增加左边距 */
}

.menu-icon::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   width: 100%;
   height: 0.2rem;    /* 进一步增加中间杠的粗细 */
   background-color: #ffffff;
}