购物车圆数字图标

最新推荐文章于 2022-04-06 23:02:38 发布

原创最新推荐文章于 2022-04-06 23:02:38 发布 · 386 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

17 篇文章

订阅专栏

Angular

3 篇文章

订阅专栏

这篇博客展示了如何创建一个购物车圆数字图标，并详细介绍了实现动态更新购物车商品数量的效果。通过HTML结构和特定的样式设计，完成数字图标的展示。同时，文中提到了在页面中添加刷新按钮，并通过JavaScript事件监听来触发更新，确保图标能够实时反映出购物车的最新状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

告警功能

html

 <div style="width: 20px;height: 20px;margin-top: 15px;margin-right: 20px;float: left">
            <a style="cursor:pointer;text-decoration:none;"    onclick="goEventAlarm()" >
            <div *ngIf="eveneAlarmSize>0&&eveneAlarmSize<99" class="nav-counter nav-counter-blue" >{{eveneAlarmSize}}</div>
            <div *ngIf="eveneAlarmSize>99" class="nav-counter nav-counter-blue" >99+</div>
              <img src="assets/images/gaojing3.png" style="width: 100%;height: 100%;" >
            </a>
          </div>

数字图标样式

/*购物车角标数字*/
.nav-counter {
  position: relative;
  top: 11px;
  right: -8px;
  min-width: 8px;
  height: 15px;
  width: 15px;
  line-height: 15px;
  margin-top: -8px;
  font-weight: normal;
  color: white;
  text-align: center;
  text-shadow: 0 1px rgb(0 0 0 / 20%);
  background: #e23442;
  border: 1px solid #911f28;
  border-radius: 10px;
  background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
  background-image: -o-linear-gradient(top, #e8616c, #dd202f);
  background-image: linear-gradient(to bottom, #e8616c, #dd202f);
  -webkit-box-shadow: inset 0 0 1px 1px rgb(255 255 255 / 10%), 0 1px rgb(0 0 0 / 12%);
  box-shadow: inset 0 0 1px 1px rgb(255 255 255 / 10%), 0 1px rgb(0 0 0 / 12%);
}
.nav-counter-blue {
  background: #e8616c;
  border: 1px solid #dd202f;
  background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
  background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
  background-image: -o-linear-gradient(top, #e8616c, #dd202f);
  background-image: linear-gradient(to bottom, #e8616c, #dd202f);
}