@charset "utf-8";

/* CSS Document */



/* ========== 顶部分类标签栏 ========== */

.cate-nav {

  background-color: #f0f5f9;

  padding: 15px 20px;

  border-bottom: 1px solid #dee2e6;

}

.cate-wrap {

  max-width: 1700px;

  margin: 10px auto;

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}

/* 分类标签样式 */

.cate-item {

  padding: 6px 20px;

  border: 1px solid #1277cd;

  border-radius: 20px;

  color: #1277cd;

  text-decoration: none;

  font-size: 14px;

  transition: all 0.2s ease;

}

/* 选中标签样式 */

.cate-item.active {

  background-color: #1277cd;

  color: #ffffff;

}

/* 选中标签样式 */

.cate-item.active2 {

  background-color: #92e1eb;

 

}

/* hover效果 */

.cate-item:hover:not(.active) {

  background-color: #e8f4fc;

}



/* ========== 产品展示区域 ========== */

.product-container {

  max-width: 1700px;

  margin: 20px auto;

  padding: 0 20px;

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));

  gap: 20px;

}



/* 产品卡片 */

.product-card {

  border: 1px solid #eee;

  border-radius: 5px;

  overflow: hidden;

  transition: all 0.3s ease;

}

.product-card:hover {

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  transform: translateY(-2px);

}



/* 产品图片/参数表格区域 */

.product-img-box {

  width: 100%;

  background-color: #f9f9f9;

  padding: 10px;

}

.product-img-box img{width: 100%; height:100%}

/* 产品参数表格（模拟图片里的表格样式） */

.product-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 12px;

}

.product-table td {

  border: 1px solid #ccc;

  padding: 4px;

  vertical-align: middle;

}

/* 产品图片单元格 */

.product-img-cell {

  text-align: center;

  width: 45%;

}

.product-img-cell img {

  max-width: 100%;

  height: auto;

  max-height: 120px;

}

/* 参数文本单元格 */

.param-cell {

  font-family: Arial, sans-serif;

  line-height: 1.4;

}

/* 底部参数行 */

.bottom-param td {

  text-align: center;

  font-weight: 500;

}



/* 产品编号 */

.product-code {

  padding: 10px;

  text-align: center;

  background-color: #fff;

  border-top: 1px solid #eee;

  font-size: 14px;

  color: #333;

}



/* 响应式适配 */

@media (max-width: 768px) {

  .cate-wrap {

    justify-content: center;

  }

  .product-container {

    grid-template-columns: 1fr;

  }

}



/* ========== 顶部容器：搜索+面包屑 ========== */

.top-bar {

  max-width: 1700px;

  margin: 20px auto;

  padding: 0 0px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



/* ========== 左侧搜索区域 ========== */

.search-wrap {

  display: flex;

  align-items: center;

}



/* 产品标签 */

.product-tag {

  background-color: #f9b713; /* 图片里的黄色 */

  color: #fff;

  font-size: 14px;

  padding: 8px 25px;

  border-radius: 30px;

  margin-right: 5px;

  font-weight: 500;

}



/* 搜索输入框 */

.search-input {

  height: 36px;

  padding: 0 10px;

  border: 1px solid #ccc;

  border-right: none;

  font-size: 14px;

  width: 200px;

  outline: none;

  transition: border-color 0.2s;

}

.search-input:focus {

  border-color: #0078d7;

}

.search-input::placeholder {

  color: #999;

}



/* 搜索按钮 */

.search-btn {

  height: 36px;

  padding: 0 15px;

  background-color: #1277cd; /* 图片里的蓝色 */

  color: #fff;

  border: none;

  font-size: 14px;

  cursor: pointer;

  transition: background-color 0.2s;

}

.search-btn:hover {

  background-color: #0066b8;

}



/* ========== 右侧面包屑导航 ========== */

.breadcrumb {

  font-size: 14px;

  color: #666;

}

.breadcrumb a {

  color: #666;

  text-decoration: none;

  transition: color 0.2s;

}

.breadcrumb a:hover {

  color: #0078d7;

}

.breadcrumb span {

  margin: 0 5px;

  color: #999;

}



/* 手机端适配 */

@media (max-width: 768px) {

  .top-bar {

    flex-direction: column;

    gap: 15px;

    align-items: flex-start;

  }

  .search-input {

    width: 150px;

  }

}

/* 主容器：左右布局 */

.main-container {

  max-width: 1700px;

  margin: 20px auto;

  padding: 0 20px;

  display: flex;

  gap: 30px;

}



/* ========== 左侧产品图片/参数区 ========== */

.product-left {

  flex: 1;

  border: 1px solid #eee;

  padding: 15px;

}

.product-left img{ width:100%; height:100%}





/* 顶部编号栏 */

.product-code-bar {

  background-color: #d9e8f5;

  padding: 8px 10px;

  margin-bottom: 15px;

  display: flex;

  gap: 20px;

  font-size: 14px;

  color: #333;

}

.product-code-bar span {

  font-weight: 500;

}



/* 产品图片区 */

.product-img-box {

  text-align: center;

  margin-bottom: 15px;

}

.product-img-box img {

  max-width: 100%;

  height: auto;

  

}



/* 产品参数表格 */

.product-param-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 13px;

}

.product-param-table td {

  padding: 6px 8px;

  border: 1px solid #ccc;

  vertical-align: middle;

}

/* 浅蓝色背景单元格 */

.param-title {

  background-color: #d9e8f5;

  font-weight: 500;

}

/* 图纸单元格 */

.drawing-cell {

  text-align: center;

}

.drawing-cell img {

  max-width: 100%;

  height: auto;

  max-height: 120px;

}



/* ========== 右侧产品信息区 ========== */

.product-right {

  flex: 1;

  padding-top: 10px;

}



/* 产品标题 */

.product-title {

  font-size: 32px;

  color: #333;

  margin-bottom: 15px;

  padding-bottom: 10px;

  border-bottom: 1px solid #eee;

}



/* 产品分类 */

.product-cate {

  color: #999;

  margin-bottom: 30px;

  font-size: 14px;

}

.product-cate span {

  color: #666;

}



/* 功能按钮 */

.btn-group {

  display: flex;

  gap: 15px;

  margin-bottom: 40px;

}

.product-btn {

  padding: 10px 30px;

  background-color: #0078d7;

  color: #fff;

  border: none;

  font-size: 18px;

  cursor: pointer;

  transition: background-color 0.2s;

}

.product-btn:hover {

  background-color: #0066b8;

}



/* ========== 底部详情栏 + 分页 ========== */

/* 详情标题栏 */

.detail-bar {

  max-width: 1700px;

  margin: 20px auto;

  padding: 0 20px;

}
.cpxq{  max-width: 1700px;

  margin: 20px auto;

  padding: 0 20px;}
.detail-title {

  background-color: #0078d7;

  color: #fff;

  text-align: center;

  padding: 10px;

  font-size: 18px;

  font-weight: normal;

}



/* 分页导航 */

.pagination {

  max-width: 1700px;

  margin: 20px auto;

  padding: 0 20px;

  font-size: 14px;

  color: #666;

}

.pagination p {

  margin-bottom: 8px;

}

.pagination a {

  color: #0078d7;

  text-decoration: none;

}

.pagination a:hover {

  text-decoration: underline;

}



/* 响应式适配 */

@media (max-width: 768px) {

  .main-container {

    flex-direction: column;

  }

  .btn-group {

    flex-direction: column;

    gap: 10px;

  }

  .product-btn {

    width: 100%;

  }

}