/* 自定义主题色和排版样式 */

/* 全局变量定义 - 主题色 */
:root {
  --primary-color: #409eff;      /* 主色调 - 蓝色 */
  --primary-dark: #337ecc;       /* 主色调深色 */
  --secondary-color: #67c23a;    /* 辅助色 - 绿色 */
  --accent-color: #f56c6c;       /* 强调色 - 红色 */
  --text-primary: #303133;       /* 主要文字颜色 */
  --text-regular: #606266;       /* 常规文字颜色 */
  --text-secondary: #909399;     /* 次要文字颜色 */
  --border-color: #dcdfe6;       /* 边框颜色 */
  --background-color: #f5f7fa;   /* 背景色 */
  --white: #ffffff;              /* 白色 */
}

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--background-color);
  background-image: none;
}

/* 主容器样式 */
#app {
  background-color: var(--background-color) !important;
}

/* 导航栏样式 */
.navbar .nav-wrap[data-v-21722e19] {
  background: linear-gradient(45deg, var(--primary-color), var(--primary-dark), transparent) !important;
  height: 70px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 侧边栏样式 */
#app .sidebar-container {
  background-color: var(--white) !important;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
}

#app .sidebar-container .el-menu {
  background-color: var(--white) !important;
}

#app .sidebar-container .el-submenu__title:hover,
#app .sidebar-container .submenu-title-noDropdown:hover {
  background-color: #f5f7fa !important;
}

#app .sidebar-container .is-active>.el-submenu__title {
  color: var(--primary-color) !important;
}

/* 主内容区域 */
.main-container {
  background-color: var(--background-color) !important;
  padding: 20px;
}

/* 按钮样式 */
.el-button {
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 4px;
}

.el-button--primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.el-button--primary:hover,
.el-button--primary:focus {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* 输入框样式 */
.el-input__inner {
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s;
}

.el-input__inner:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
}

/* 标题样式 */
.title .topic {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  display: block;
}

.newsfrm h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 15px 0;
  border-bottom: 2px solid var(--primary-color);
  margin-bottom: 20px;
}

/* 内容卡片样式 */
.ul2 {
  gap: 20px;
}

.ul2 div {
  width: calc(33.333% - 14px);
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.ul2 div:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

/* 底部样式 */
.Component.ifooter {
  background-color: var(--white) !important;
  box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.05);
}

.footer-wrap {
  background-color: var(--white) !important;
  color: var(--text-regular) !important;
}

.footer-wrap .info {
  color: var(--text-regular) !important;
  transition: color 0.3s;
}

.footer-wrap .info:hover {
  color: var(--primary-color) !important;
}

/* 返回顶部按钮 */
.Component.goup {
  background-color: var(--primary-color) !important;
  opacity: 0.8;
  transition: all 0.3s;
}

.Component.goup:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* 搜索按钮 */
.search-btn .el-button {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.search-btn .el-button:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* 响应式设计调整 */
@media screen and (max-width: 768px) {
  .ul2 div {
    width: 100%;
  }
  
  .navbar[data-v-21722e19] {
    padding: 0 10px !important;
  }
  
  .nav-wrap[data-v-21722e19] {
    padding: 0 10px !important;
  }
  
  .title .topic {
    font-size: 20px;
  }
}

@media screen and (max-width: 480px) {
  .main-container {
    padding: 10px;
  }
  
  .navbar .nav-wrap[data-v-21722e19] {
    height: 60px !important;
  }
  
  .title .topic {
    font-size: 18px;
  }
  
  .newsfrm h3 {
    font-size: 16px;
  }
}