CameraMachine/frontend/src/styles/pub.scss

@use "./color.scss"  as *;

.flex { display: flex; display: -webkit-flex;  align-items: center; justify-content: center;}
.flex.left { justify-content: flex-start}
.flex.center { justify-content: center}
.flex.col { flex-direction: column;}
.flex.right { justify-content:flex-end}
.flex.around { justify-content: space-around }
.flex.between { justify-content: space-between }
.flex.wrap {     flex-wrap: wrap; }
.flex.top {align-items: flex-start}
.flex.bottom { align-items: flex-end}
.flex-item { flex: 1}
.flex-item.left { text-align: left}
.flex-item.right { text-align: right}

.f-left { float: left}
.f-right { float: right}

.clear, .clearfix:after {
  clear: both;
}
.clear, .clearfix:before, .clearfix:after {
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0; height: 0;
}
.clearfix:before, .clearfix:after {
  content: '';
}
.clearfix {
  *zoom: 1;
}
.te-l { text-align:left;}
.te-c { text-align:center;}
.te-r { text-align:right;}

.chaochu	{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chaochu_1	{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; word-break:break-all;}
.chaochu_2	{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; word-break:break-all;}
.chaochu_3	{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; word-break:break-all;}
.chaochu_4	{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical; word-break:break-all;}

.cu-p { cursor: pointer;}
.line-20 { line-height: 20px}
.line-30 { line-height: 30px}
.line-40 { line-height: 40px}
.line-50 { line-height: 50px}
.mar-top-5 { margin-top: 5px;}
.mar-top-10 { margin-top: 10px;}
.mar-top-15 { margin-top: 15px;}
.mar-top-20 { margin-top: 20px;}
.mar-top-30 { margin-top: 30px;}
.mar-top-40 { margin-top: 40px;}
.mar-top-50 { margin-top: 50px;}
.mar-left-10 { margin-left: 10px;}
.mar-left-20 { margin-left: 20px;}
.mar-left-30 { margin-left: 30px;}
.mar-left-40 { margin-left: 40px;}
.mar-left-50 { margin-left: 50px;}
.mar-right-5 { margin-right: 5px;}
.mar-right-10 { margin-right: 10px;}
.mar-right-20 { margin-right: 20px;}
.mar-right-30 { margin-right: 30px;}
.mar-right-40 { margin-right: 40px;}
.mar-right-50 { margin-right: 50px;}
.fs-11 { font-size: 11px}
.fs-12 { font-size: 12px}
.fs-14 { font-size: 14px}
.fs-15 { font-size: 15px}
.fs-16 { font-size: 16px}
.fs-17 { font-size: 17px}
.fs-18 { font-size: 18px}
.fs-19 { font-size: 19px}
.fs-20 { font-size: 20px}
.fs-30 { font-size: 30px}



.c-primary {color:$primary2 }
.c-blue {color: $blue1 }
.c-333 { color:#333; }
.c-666 { color:#666; }
.c-999 { color:#999; }
.c-fff { color:#fff; }
.c-eee { color:#eee; }
.c-b0 { color: #b0b0b0;;}
.bg-fff { background: #fff;}

.fw-b{
  font-weight: 500;
}
.fw-b6{
  font-weight: 600;
}
.pad-5 { padding: 5px;}
.pad-10 { padding: 10px;}
.pad-20 { padding: 20px;}
.pad-30 { padding: 30px;}
.pad-40 { padding: 40px;}
.pad-50 { padding: 50px;}
.w-full { width: 100%}
.h-full { height: 100% }



::-webkit-scrollbar {/*滚动条整体样式*/ width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/ height: 8px; background: #000;}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 10px;  background: #ddd;}
::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: none; border-radius: 10px; background: none;}


.tabs { display: flex; height: 50px; line-height: 50px; border-bottom: 2px solid #dfe4ed; margin-bottom: 15px;  justify-items: left;}
.tabs .tab { margin-right: 10px; padding: 0 10px; position: relative; cursor: pointer; height: 50px; line-height: 50px; }
.tabs .tab.active { color:$primary2}
.tabs .tab.active::after { content: ""; position: absolute; left: 0;  right: 0; bottom: -2px; height: 2px; background: $primary2;}

/*div page*/
.bg-efefef { background: #efefef;}
.anm { transition: 0.5s;  }

.page—wrap {
  width: 1200px;
  margin:  0 auto;
}

.el-button__primary {
  background: #2CFFFC;
  color: #000;
  &:hover,&.active {
    background: rgba(0, 244, 34, 1);
    color: #000;
  }
}

.relative{
  position: relative;
}
.middle{
  vertical-align: middle;
}
.bor-radius-10{
  border-radius: 10px;
  overflow: hidden;
}
.bor-radius-4{
  border-radius: 4px;
  overflow: hidden;
}

.miniappIcon{
  top:8px;
}
// 放大元素  鼠标移入
.zoom-ele{
  overflow: hidden;
  cursor: pointer;
  img{
    transition: transform 0.3s;
    display: block;
    &:hover{
      transform: scale(1.1);
    }
  }
}

// 放大元素  鼠标点击
.magnify-ele{
  transition: transform 0.4s;
  &:active{
    transform: scale(1.2);
  }
}

/*单行溢出隐藏*/
.overflow1{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*两行溢出隐藏*/
.overflow2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cur-p{
  cursor: pointer;
}
.disable-el{
  pointer-events: none;
}



.grayscale {
  >div {
    filter: grayscale(1);
  }
  ~div img {
    filter: grayscale(1);
  }
}


.button-black {
  background: $color-black !important;
  color: #fff !important;
  &:hover {
    background: $color-black-7 !important;
  }
  &.active {
    background: linear-gradient(135deg, #2FB0FF 0%, #B863FB 100%) !important;
  }
}

.nav-back {
  background: linear-gradient( 90deg, #6B6394 0%, #3A345A 100%);
  border-radius: 8px;
  padding: 0 15px;
  color: #fff;
  padding-left: 30px;
  position: relative;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  margin-right: 15px;
  &:before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-left:1px solid  #D8D8D8;
    border-bottom:1px solid  #D8D8D8;
    position: absolute;
    left:11px;
    top:50%;
    margin-top: -5px;
    transform:rotate(45deg);
  }
}