77 lines
2.2 KiB
Plaintext
77 lines
2.2 KiB
Plaintext
/* pages/store/info.wxss */
|
||
/* =========================================
|
||
父容器基准
|
||
========================================= */
|
||
.card-container {
|
||
position: relative; /* 关键：作为绝对定位子元素的基准点 */
|
||
|
||
/* 以下仅为演示容器样式，实际使用中请替换为您自己的容器样式 */
|
||
width: 300px;
|
||
height: 150px;
|
||
background-color: #f5f5f5;
|
||
border-radius: 12px;
|
||
overflow: hidden; /* 确保角标不会溢出圆角容器 */
|
||
margin: 20px;
|
||
}
|
||
|
||
/* =========================================
|
||
红色角标样式核心代码
|
||
========================================= */
|
||
.price-tag-badge {
|
||
|
||
width: 160rpx;
|
||
/* 颜色与文本 */
|
||
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%);
|
||
}
|
||
|
||
.content-text {
|
||
/* 关键属性：保留空白符和换行符，但是允许自动换行 */
|
||
white-space: pre-wrap;
|
||
text-align: left;
|
||
|
||
/* 可选：防止长单词（如长 URL）溢出容器 */
|
||
word-break: break-all;
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: 47% 47%;
|
||
grid-row-gap: 16px;
|
||
grid-column-gap: 16px;
|
||
}
|
||
|
||
.grid-3 {
|
||
display: grid;
|
||
grid-template-columns: 30% 30% 30%;
|
||
grid-row-gap: 16px;
|
||
grid-column-gap: 16px;
|
||
}
|
||
|
||
.bottom {
|
||
position: fixed;
|
||
bottom:0;
|
||
left:0;
|
||
right: 0;
|
||
padding: 32rpx;
|
||
background-color: white;
|
||
} |