/* pages/knowlage/index.wxss */
.grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-row-gap: 8px;
  grid-column-gap: 8px;
}

.price-tag-badge {
  /* 颜色与文本 */
  background-color: #C35D4B; /* 图片中的红色背景 */
  color: #FFFFFF;            /* 图片中的白色文本 */
  font-size: 12px;           /* 小字号 */
  font-weight: 500;

  /* 尺寸与间距 */
  /* 上右下左 padding。左侧给尖角留出更多空间视觉上更平衡 */
  padding: 4px 8px 4px 12px; 
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;

  /* --- 核心形状实现 --- */
  /* 使用 polygon 函数绘制五边形形状 */
  /* 坐标点顺序：左上(内缩) -> 右上 -> 右下 -> 左下(内缩) -> 最左尖点(垂直居中) */
  /* 10px 控制尖角的深度，可以根据需要调整这个数值 */
  clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%);
  
  /* 兼容性写法 (可选，针对旧版浏览器) */
  -webkit-clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%);
}

.price-tag-badge2 {
  /* 颜色与文本 */
  background-color: orange; /* 图片中的红色背景 */
  color: #FFFFFF;            /* 图片中的白色文本 */
  font-size: 12px;           /* 小字号 */
  font-weight: 500;

  /* 尺寸与间距 */
  /* 上右下左 padding。左侧给尖角留出更多空间视觉上更平衡 */
  padding: 4px 8px 4px 12px; 
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;

  /* --- 核心形状实现 --- */
  /* 使用 polygon 函数绘制五边形形状 */
  /* 坐标点顺序：左上(内缩) -> 右上 -> 右下 -> 左下(内缩) -> 最左尖点(垂直居中) */
  /* 10px 控制尖角的深度，可以根据需要调整这个数值 */
  clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%);
  
  /* 兼容性写法 (可选，针对旧版浏览器) */
  -webkit-clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%);
}