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

news2024/11/24 14:01: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;
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1040827.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uni-app:实现元素中实现竖直居中

效果展示 前&#xff1a; 后&#xff1a; 未实现前代码 <template><view class"container"><view class"centered-element">我是要被居中的元素</view></view> </template><script>export default {data() {r…

算法与数据结构-堆

文章目录 什么是堆如何实现一个堆&#xff1f;如何基于堆实现排序&#xff1f;1. 建堆2. 排序 什么是堆 堆是一种特殊的树&#xff0c;特殊点有二&#xff0c;如下&#xff1a; 堆是一个完全二叉树&#xff1b;堆中每一个节点的值都必须大于等于&#xff08;或小于等于&#…

【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建

目录 一、Mock.js 1.1 mockjs介绍 1.2 mock.js安装与配置 1.2.1 安装mock.js 1.2.2 引入mock.js 1.3 mock.js的使用 1.3.1 准备模拟数据 1.3.2 定义拦截路由 1.3.3 测试 二、首页导航栏左侧菜单搭建 2.1 自定义界面组件 (完整代码) 2.2 配置路由 2.3 组件显示折叠和…

uniapp ui安装

安装 ui uni-app官网 (dcloud.net.cn) 安装 pages.js配置 使用 <template><view class"bg"><div class"title"><uni-data-selectv-model"value":localdata"range"change"change">asa</uni-da…

GiliSoft USB Lock v10.5.0 电脑USB设备管控软件

网盘下载 软件功能特性 禁止USB / SD驱动器 禁用从USB / SD磁盘读取&#xff0c;禁用写入USB / SD磁盘&#xff0c;阻止非系统分区。它不允许任何类型的USB / SD驱动器访问您的计算机&#xff0c;除非您授权它或它已在可信设备白名单。 CD锁&#xff0c;块媒体和蓝光光盘 禁用…

代码阅读分析神器-Scitools Understand

这里写目录标题 前言概要功能介绍1.代码统计2.图形化分析3.代码检查 使用方法下载及使用 前言 作为一名程序员&#xff0c;阅读代码是一个必须要拥有的能力&#xff0c;但无奈很多代码逻辑嵌套非常多&#xff0c;看起来非常吃力&#xff0c;看了那段逻辑就忘记了刚才的逻辑&am…

Spring实例化源码解析之ComponentScanAnnotationParser(四)

上一章我们分析了ConfigurationClassParser&#xff0c;配置类的解析源码分析。在ComponentScans和ComponentScan注解修饰的候选配置类的解析过程中&#xff0c;我们需要深入的了解一下ComponentScanAnnotationParser的parse执行流程&#xff0c;SpringBoot启动类为什么这么写&…

01 MIT线性代数-方程组的几何解释

一, 线性方程的几何图像 The geometry of linear equations 线性代数的基本问题就是解n元一次方程组 eg&#xff1a;二元一次方程组 矩阵形式: 系数矩阵(coefficient matrix): 未知数向量: 线性方程组简记为Axb 二, 行图像 Row Picture 行图像遵从解析几何的描述&#xff0…

李宏毅hw-10 ——adversarial attack

一、查漏补缺&#xff1a; 1.关于glob.glob的用法&#xff0c;返回一个文件路径的 列表&#xff1a; 当然&#xff0c;再套用1个sort&#xff0c;就是将所有的文件路径按照字母进行排序了 2.relpath relative_path返回相对于基准路径的相对路径的函数 二、代码剖析&#xff…

Pytorch之AlexNet花朵分类

&#x1f482; 个人主页:风间琉璃&#x1f91f; 版权: 本文由【风间琉璃】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 目录 一、AlexNet 1.卷积模块 2.全连接模块 3.AlexNet创新点 1.更深的神经…

深度学习技巧应用28-强化学习的原理介绍与运用技巧实践

大家好,我是微学AI,今天给大家介绍一下深度学习技巧应用28-强化学习的原理介绍与运用技巧实践, 强化学习是一种机器学习的子领域,它使得一个智能体在与环境的交互中学习如何行动以最大化某种数值奖励信号。强化学习模型的关键特性是它的试错搜索和延迟奖励。 一、强化学习…

React 全栈体系(十四)

第七章 redux 六、react-redux 7. 代码 - react-redux 数据共享版 7.1 效果 7.2 App /* src/App.jsx */ import React, { Component } from "react"; import Count from "./containers/Count"; import Person from "./containers/Person";ex…

opencv dnn模块 示例(17) 目标检测 object_detection 之 yolo v5

在前文【opencv dnn模块 示例(16) 目标检测 object_detection 之 yolov4】介绍的yolo v4后的2个月&#xff0c;Ultralytics发布了YOLOV5 的第一个正式版本&#xff0c;其性能与YOLO V4不相伯仲。 文章目录 1、Yolo v5 和 Yolo v4 的区别说明1.1、Data Augmentation - 数据增强1…

Shader中的渲染路径LightMode

文章目录 前言一、在Shader中如何区分不同的渲染路径1、Pass Tag2、LightMode的不同类型 二、在Frame Debug下查看渲染路径之间的区别1、在摄像机可以切换渲染路径2、前向渲染路径3、延迟渲染路径4、顶点照明渲染路径&#xff08;可以看出效果很差&#xff09; 前言 Shader中的…

网络竞品分析:用爬虫技术洞悉竞争对手

概述 网络竞品分析是指通过互联网收集、分析和比较竞争对手的信息&#xff0c;以了解他们的优势和劣势&#xff0c;找出自己的差距和机会&#xff0c;制定有效的竞争策略。网络竞品分析涉及的信息包括竞争对手的产品、价格、渠道、营销、用户反馈等方面。爬虫技术是一种自动化…

电子商务交易产品质量监测实施指南

声明 本文是学习GB-T 42893-2023 电子商务交易产品质量监测实施指南. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本文件提供了开展电子商务交易的有形产品质量监测的总则&#xff0c;监测准备、监测实施、监测效果评价 与反馈等过程指导…

git的ssh协议走代理拉取代码

1.首先要自己搭建一个代理 https://blog.csdn.net/Jessica_hhh/article/details/133276101https://blog.csdn.net/Jessica_hhh/article/details/133276101 2. 确认机器装过nc&#xff0c;若没有&#xff0c;用yum install -y nc安装 centos 6使用yum安装软件_duang_huang的博…

Machine Learning(study notes)

There is no studying without going crazy Studying alwats drives us crazy 文章目录 DefineMachine LearningSupervised Learning&#xff08;监督学习&#xff09;Regression problemClassidication Unspervised LearningClustering StudyModel representation&#xff08…

多层感知机——MLP

源代码在此处&#xff1a;https://github.com/wepe/MachineLearning/tree/master/DeepLearning Tutorials/mlp 一、多层感知机&#xff08;MLP&#xff09;原理简介 多层感知机&#xff08;MLP&#xff0c;Multilayer Perceptron&#xff09;也叫人工神经网络&#xff08;ANN&…

2023-9-25 JZ24 反转链表

题目链接&#xff1a;反转链表 import java.util.*;/** public class ListNode {* int val;* ListNode next null;* public ListNode(int val) {* this.val val;* }* }*/public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&…