VUE div的右上角的角标/标签

一、效果图

二、代码

javascript 复制代码
<div class="comp-overview">
  <div class="overview-item" v-for="(item,index) in overviewInfoList" :key="index">
    <div class="angle_mark">
      <span>{{item.label}}</span>
    </div>
    <div class="home-chart-title">
      <span>{{item.title}}</span>
    </div>
  </div>
</div>
css 复制代码
.overview-item {
  //父容器
  position: relative;

  display: inline-block;
  width: 32.6%;
  color: #7c979e;
  font-size: 16px;
  margin-right: 1%;
  margin-bottom: 18px;
  height: 206px;
  border-radius: 4px;
  background: #FFFFFF;
  border: 1px solid rgba(136, 136, 136, 0.1);
  padding: 20px 17px 0;

  // 角标
  .angle_mark {
    position: absolute;
    top: 0;
    right: 0;
    width: 58px;
    height: 25px;
    border-radius: 0 3px 0 4px;
    background: rgba(52, 117, 235, 0.1);

    // 角标文字
    span {
      position: absolute;
      display: inline-block;
      width: 100%;
      text-align: center;
      font-family: 思源黑体;
      font-size: 12px;
      font-weight: normal;
      line-height: 25px;
      color: #3475EB;
    }
  }
}
相关推荐
weixin-a153003083167 小时前
vue疑难解答
前端·javascript·vue.js
Bellafu66610 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird13 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者13 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强14 小时前
Chrome和IE获取本机ip地址
前端
天***889614 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*14 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v14 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls14 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友14 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全