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

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

/**********************盒模型**********************/

/************边框*********************/
.bor-none{
  border-width: 0 !important;
}
.bor-top-none{
  border-top-width: 0 !important;
}
.bor-btm-none{
  border-bottom-width: 0 !important;
}
.bor-lf-none{
  border-left-width: 0 !important;
}
.bor-rg-none{
  border-right-width: 0 !important;
}
.bor{
  border: 1rpx solid var(--bor-color,currentColor);
}
.bor-btm{
  border-bottom: 1rpx solid var(--bor-color,currentColor);
}
.bor-lf{
  border-left: 1rpx solid var(--bor-color,currentColor);
}
.bor-top{
  border-top: 1rpx solid var(--bor-color,currentColor);
}
.bor-rg{
  border-right: 1rpx solid var(--bor-color,currentColor);
}

.follow-bor-top+.follow-bor-top{
  border-top: 1rpx solid var(--bor-color,currentColor);
}
.follow-bor-btm+.follow-bor-btm{
  border-bottom: 1rpx solid var(--bor-color,currentColor);
}
.last-no-bor-top:last-child{
  border-top-width: 0;
}
.last-no-bor-btm:last-child{
  border-bottom-width: 0;
}
.follow-bor+.follow-bor .follow-bor-top{
  border-top: 1rpx solid var(--bor-color,currentColor);
}
.radius{border-radius: var(--radius);}
.radius-important{border-radius: var(--radius) !important;}
.radius-top{border-top-left-radius: var(--radius);border-top-right-radius: var(--radius);}
.radius-lf{border-top-left-radius: var(--radius);border-bottom-right-radius: var(--radius);}
.radius-rg{border-bottom-right-radius: var(--radius);border-top-right-radius: var(--radius);}
.radius-btm{border-bottom-right-radius: var(--radius);border-bottom-left-radius: var(--radius);}
.radius-6{border-radius:6rpx}
.radius-8{border-radius:8rpx}
.radius-10{border-radius:10rpx}
.radius-top-10{border-top-left-radius: 10rpx;border-top-right-radius: 10rpx;}
.radius-lf-10{border-top-left-radius: 10rpx;border-bottom-right-radius: 10rpx;}
.radius-rg-10{border-bottom-right-radius: 10rpx;border-top-right-radius: 10rpx;}
.radius-btm-10{border-bottom-right-radius: 10rpx;border-bottom-left-radius: 10rpx;}
.radius-12{border-radius:12rpx}
.radius-top-12{border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;}
.radius-lf-12{border-top-left-radius: 12rpx;border-bottom-right-radius: 12rpx;}
.radius-rg-12{border-bottom-right-radius: 12rpx;border-top-right-radius: 12rpx;}
.radius-btm-12{border-bottom-right-radius: 12rpx;border-bottom-left-radius: 12rpx;}
.radius-14{border-radius:14rpx}
.radius-top-14{border-top-left-radius: 14rpx;border-top-right-radius: 14rpx;}
.radius-lf-14{border-top-left-radius: 14rpx;border-bottom-right-radius: 14rpx;}
.radius-rg-14{border-bottom-right-radius: 14rpx;border-top-right-radius: 14rpx;}
.radius-btm-14{border-bottom-right-radius: 14rpx;border-bottom-left-radius: 14rpx;}
.radius-16{border-radius:16rpx;}
.radius-top-16{border-top-left-radius: 16rpx;border-top-right-radius: 16rpx;}
.radius-lf-16{border-top-left-radius: 16rpx;border-bottom-right-radius: 16rpx;}
.radius-rg-16{border-bottom-right-radius: 16rpx;border-top-right-radius: 16rpx;}
.radius-btm-16{border-bottom-right-radius: 16rpx;border-bottom-left-radius: 16rpx;}
.radius-18{border-radius:18rpx}
.radius-top-18{border-top-left-radius: 18rpx;border-top-right-radius: 18rpx;}
.radius-lf-18{border-top-left-radius: 18rpx;border-bottom-right-radius: 18rpx;}
.radius-rg-18{border-bottom-right-radius: 18rpx;border-top-right-radius: 18rpx;}
.radius-btm-18{border-bottom-right-radius: 18rpx;border-bottom-left-radius: 18rpx;}
.radius-20{border-radius:20rpx}
.radius-top-20{border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;}
.radius-lf-20{border-top-left-radius: 20rpx;border-bottom-right-radius: 20rpx;}
.radius-rg-20{border-bottom-right-radius: 20rpx;border-top-right-radius: 20rpx;}
.radius-btm-20{border-bottom-right-radius: 20rpx;border-bottom-left-radius: 20rpx;}
.radius-22{border-radius:22rpx}
.radius-top-22{border-top-left-radius: 22rpx;border-top-right-radius: 22rpx;}
.radius-lf-22{border-top-left-radius: 22rpx;border-bottom-right-radius: 22rpx;}
.radius-rg-22{border-bottom-right-radius: 22rpx;border-top-right-radius: 22rpx;}
.radius-btm-22{border-bottom-right-radius: 22rpx;border-bottom-left-radius: 22rpx;}
.radius-24{border-radius:24rpx}
.radius-top-24{border-top-left-radius: 24rpx;border-top-right-radius: 24rpx;}
.radius-lf-24{border-top-left-radius: 24rpx;border-bottom-right-radius: 24rpx;}
.radius-rg-24{border-bottom-right-radius: 24rpx;border-top-right-radius: 24rpx;}
.radius-btm-24{border-bottom-right-radius: 24rpx;border-bottom-left-radius: 24rpx;}
.radius-26{border-radius:26rpx}
.radius-top-26{border-top-left-radius: 26rpx;border-top-right-radius: 26rpx;}
.radius-lf-26{border-top-left-radius: 26rpx;border-bottom-right-radius: 26rpx;}
.radius-rg-26{border-bottom-right-radius: 26rpx;border-top-right-radius: 26rpx;}
.radius-btm-26{border-bottom-right-radius: 26rpx;border-bottom-left-radius: 26rpx;}
.radius-28{border-radius:28rpx}
.radius-top-28{border-top-left-radius: 28rpx;border-top-right-radius: 28rpx;}
.radius-lf-28{border-top-left-radius: 28rpx;border-bottom-right-radius: 28rpx;}
.radius-rg-28{border-bottom-right-radius: 28rpx;border-top-right-radius: 28rpx;}
.radius-btm-28{border-bottom-right-radius: 28rpx;border-bottom-left-radius: 28rpx;}
.radius-30{border-radius:30rpx}
.radius-top-30{border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;}
.radius-lf-30{border-top-left-radius: 30rpx;border-bottom-right-radius: 30rpx;}
.radius-rg-30{border-bottom-right-radius: 30rpx;border-top-right-radius: 30rpx;}
.radius-btm-30{border-bottom-right-radius: 30rpx;border-bottom-left-radius: 30rpx;}
.radius-32{border-radius:32rpx}
.radius-top-32{border-top-left-radius: 32rpx;border-top-right-radius: 32rpx;}
.radius-lf-32{border-top-left-radius: 32rpx;border-bottom-right-radius: 32rpx;}
.radius-rg-32{border-bottom-right-radius: 32rpx;border-top-right-radius: 32rpx;}
.radius-btm-32{border-bottom-right-radius: 32rpx;border-bottom-left-radius: 32rpx;}
.radius-34{border-radius:34rpx}
.radius-top-34{border-top-left-radius: 34rpx;border-top-right-radius: 34rpx;}
.radius-lf-34{border-top-left-radius: 34rpx;border-bottom-right-radius: 34rpx;}
.radius-rg-34{border-bottom-right-radius: 34rpx;border-top-right-radius: 34rpx;}
.radius-btm-34{border-bottom-right-radius: 34rpx;border-bottom-left-radius: 34rpx;}
.radius-36{border-radius:36rpx}
.radius-top-36{border-top-left-radius: 36rpx;border-top-right-radius: 36rpx;}
.radius-lf-36{border-top-left-radius: 36rpx;border-bottom-right-radius: 36rpx;}
.radius-rg-36{border-bottom-right-radius: 36rpx;border-top-right-radius: 36rpx;}
.radius-btm-36{border-bottom-right-radius: 36rpx;border-bottom-left-radius: 36rpx;}
.radius-38{border-radius:38rpx}
.radius-top-38{border-top-left-radius: 38rpx;border-top-right-radius: 38rpx;}
.radius-lf-38{border-top-left-radius: 38rpx;border-bottom-right-radius: 38rpx;}
.radius-rg-38{border-bottom-right-radius: 38rpx;border-top-right-radius: 38rpx;}
.radius-btm-38{border-bottom-right-radius: 38rpx;border-bottom-left-radius: 38rpx;}
.radius-40{border-radius:40rpx}
.radius-top-40{border-top-left-radius: 40rpx;border-top-right-radius: 40rpx;}
.radius-lf-40{border-top-left-radius: 40rpx;border-bottom-right-radius: 40rpx;}
.radius-rg-40{border-bottom-right-radius: 40rpx;border-top-right-radius: 40rpx;}
.radius-btm-40{border-bottom-right-radius: 40rpx;border-bottom-left-radius: 40rpx;}
.radius-42{border-radius:42rpx}
.radius-top-42{border-top-left-radius: 42rpx;border-top-right-radius: 42rpx;}
.radius-lf-42{border-top-left-radius: 42rpx;border-bottom-right-radius: 42rpx;}
.radius-rg-42{border-bottom-right-radius: 42rpx;border-top-right-radius: 42rpx;}
.radius-btm-42{border-bottom-right-radius: 42rpx;border-bottom-left-radius: 42rpx;}
.radius-44{border-radius:44rpx}
.radius-46{border-radius:46rpx}
.radius-48{border-radius:48rpx}
.radius-50{border-radius:50rpx}
.radius-52{border-radius:52rpx}
.radius-54{border-radius:54rpx}
.radius-56{border-radius:56rpx}
.radius-58{border-radius:58rpx}
.radius-60{border-radius:60rpx}
.radius-c{border-radius: 50%;}
/*******************************/
.block{
  display: block !important;
  width:100%;
}
.line-block{
  display: inline-block !important;
}
.line-flex{
  display: inline-flex !important;
}
/* 虚线边框 */
.dotted-line {
  width: 800px;
  /* #ifndef APP-NVUE */
  margin: auto;
  /* #endif */
  padding: 20px;
  border: 1px dashed transparent;
  background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em);
}