uni-app 使用 scss 实现推荐标签区域显示效果

最新推荐文章于 2025-07-10 20:43:29 发布

原创最新推荐文章于 2025-07-10 20:43:29 发布 · 489 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

uni-app 专栏收录该内容

31 篇文章

订阅专栏

效果图

<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;
  }
}