@hzy1123581324/z-view-ui/static/css/common/icon.css

z-view-ui是使用vue3开发的组件，开发中,有部分组件功能未实现,慎用

/*css3图标库 */

[class="z-icon"]{
  display:inline-block;
  /* font-size:3.73333vw; 默认28  */
  width:1em;
  height:1em;
  position: relative;
}
[class*=" z-icon"]::after,[class*=" z-icon"]::before,
[class^="z-icon"]::after,[class^="z-icon"]::before{
  content: '';
  box-sizing: border-box;

}
.z-icon-back::before{
  width:70%;
  height:70%;
  position: absolute;
  left:50%;
  top:50%;
  border-left: .065em solid ;
  border-bottom:.065em solid;
  -webkit-transform:translate(-50%,-50%) rotate(45deg);
  -moz-transform: translate(-50%,-50%) rotate(45deg);
  -ms-transform: translate(-50%,-50%) rotate(45deg);
  -o-transform: translate(-50%,-50%) rotate(45deg);
  transform: translate(-50%,-50%) rotate(45deg);
}
/*向右的箭头*/
.z-icon-next::before{
  width:70%;
  height:70%;
  position: absolute;
  left:50%;
  top:50%;
  border-left: .125em solid ;
  border-bottom:.125em solid;
  -webkit-transform:translate(-50%,-50%) rotate(225deg);
  -moz-transform: translate(-50%,-50%) rotate(225deg);
  -ms-transform: translate(-50%,-50%) rotate(225deg);
  -o-transform: translate(-50%,-50%) rotate(225deg);
  transform: translate(-50%,-50%) rotate(225deg);
}
/*向右的箭头*/
.z-icon-down::before{
  width:70%;
  height:70%;
  position: absolute;
  left:50%;
  top:50%;
  border-left: .125em solid;
  border-bottom:.125em solid;
  -webkit-transform:translate(-50%,-50%) rotate(-45deg);
  -moz-transform: translate(-50%,-50%) rotate(-45deg);
  -ms-transform: translate(-50%,-50%) rotate(-45deg);
  -o-transform: translate(-50%,-50%) rotate(-45deg);
  transform: translate(-50%,-50%) rotate(-45deg);
}
/*向下的三角形***带圆角***/
.z-icon-upward,.z-icon-adown{

}
/*向上的三角形**带圆角**/
.z-icon-upward,.z-icon-adown{

}

/* 叉 */
.z-icon-colse::after,.z-icon-colse::before{
  position: absolute;
  width: 70%;
  height:8%;
  border-radius: 0.04em;
  box-shadow: 0 0 0 .1em inset;
  color:#fff;
  left:50%;
  top:50%;
  -webkit-transform:translate(-50%,-50%) rotate(-45deg);
  -moz-transform: translate(-50%,-50%) rotate(-45deg);
  -ms-transform: translate(-50%,-50%) rotate(-45deg);
  -o-transform: translate(-50%,-50%) rotate(-45deg);
  transform: translate(-50%,-50%) rotate(-45deg);
}
.z-icon-colse::after{
  -webkit-transform:translate(-50%,-50%) rotate(45deg);
  -moz-transform: translate(-50%,-50%) rotate(45deg);
  -ms-transform: translate(-50%,-50%) rotate(45deg);
  -o-transform: translate(-50%,-50%) rotate(45deg);
  transform: translate(-50%,-50%) rotate(45deg);
}

/* 减号 */
.z-icon-sub,.z-icon-add{
  background-color: var(--icon-bg-color,transparent);
}
.z-icon-sub::before,.z-icon-add::before,.z-icon-add::after{
  position: absolute;
  width: 100%;
  height: var(--icon-thickness,4rpx);
  left: 0;
  top: 50%;
  background-color: currentColor;
}
/* 加号 */
.z-icon-add{
  -webkit-transform: translateY(-50%) rotate(90deg);
  -moz-transform: translateY(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) rotate(90deg);
  -o-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
}