57 lines
2.0 KiB
Plaintext
57 lines
2.0 KiB
Plaintext
/* 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%);
|
|
} |