效果图
<view class="tag-box">
<view class="tag-tip">
<view>店家</view>
<view>推荐</view>
</view>
</view>
方法一
只需修改 $tagFontSize(字体大小) 即可
/* 推荐标签区域 */
.tag-box {
$tagFontSize: 26; // 字体大小(改变字体大小即可更改总体大小)
$differ: -3; // 差值与字体大小相关(20[0] 22[-4] 24[-4] 26[-3] 28[-3] 30[-3])
$tagFontColor: #fff; // 字体颜色
$tagBgColor: #de1737; // 总体背景
$tagPaddingUpAndDown: 10; // 上下内边距
$tagPaddingLeftAndRight: 15; // 左右内边距
$tagBorderRadius: 8rpx; // 圆角大小
$tagBeforeTop: floor($tagFontSize / 0.75) * 2 + $differ + $tagPaddingUpAndDown * 2 + rpx;
$tagBeforeBorderTop: $tagFontSize + rpx;
$tagBeforeBorderSide: $tagFontSize + $tagPaddingLeftAndRight + rpx;
.tag-tip {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: $tagFontColor;
font-size: $tagFontSize + rpx;
padding: $tagPaddingUpAndDown + rpx $tagPaddingLeftAndRight + rpx;
background: $tagBgColor;
border-radius: $tagBorderRadius;
font-weight: 700;
}
.tag-tip::before {
content: "";
position: absolute;
top: $tagBeforeTop;
left: 0;
width: 0;
height: 0;
border-top: solid $tagBeforeBorderTop $tagBgColor;
border-right: solid $tagBeforeBorderSide transparent;
border-left: solid $tagBeforeBorderSide transparent;
border-radius: $tagBorderRadius;
}
}
方法二
需要修改 $tagSize(总体大小) 与 $tagFontSize(字体大小) 的值
/* 推荐标签区域 */
.tag-box {
$tagSize: 90; // 总体大小(只调整大小只需改 $tagSize 和 $tagFontSize 即可)
$tagFontSize: 26rpx; // 字体大小(只调整大小只需改 $tagSize 和 $tagFontSize 即可)
$tagFontColor: #fff; // 字体颜色
$tagBgColor: #de1737; // 总体背景
$tagBorderRadius: 8rpx; // 圆角大小
$tagWidth: $tagSize - 5;
$tagHeight: $tagSize;
$tagPadding: $tagSize / 10 + rpx;
$tagBeforeTop: $tagSize - 4 + rpx;
$tagBeforeBorderTop: $tagSize / 4 + 5 + rpx;
$tagBeforeBorderSide: $tagWidth / 2 + rpx;
.tag-tip {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: $tagWidth + rpx;
height: $tagHeight + rpx;
color: $tagFontColor;
font-size: $tagFontSize;
padding: $tagPadding 0;
background: $tagBgColor;
border-radius: $tagBorderRadius;
font-weight: 700;
}
.tag-tip::before {
content: "";
position: absolute;
top: $tagBeforeTop;
left: 0;
width: 0;
height: 0;
border-top: solid $tagBeforeBorderTop $tagBgColor;
border-right: solid $tagBeforeBorderSide transparent;
border-left: solid $tagBeforeBorderSide transparent;
border-radius: $tagBorderRadius;
}
}