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;
    }
  }
}
相关推荐
只_只7 小时前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience7 小时前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹7 小时前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
JarvanMo7 小时前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse7 小时前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye7 小时前
前端架构师,是架构什么
前端·架构
全马必破三7 小时前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js
web安全工具库7 小时前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库
一枚前端小能手7 小时前
🔥 SSR服务端渲染实战技巧 - 从零到一构建高性能全栈应用
前端·javascript
Komorebi_99997 小时前
Vue3 provide/inject 详细组件关系说明
前端·javascript·vue.js