@import 'var.scss';
@import 'common.scss';
@import 'animate.scss';
@function vw($px){ // $px转vw
    @return $px / 375 * 100vw;
}
@function vh($px){ // $px转vh
    @return $px / 667 * 100vh;
}

@mixin border-top {
  background-image:linear-gradient(180deg, $color-grey, $color-grey 50%, transparent 50%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top left;
}
@mixin border-bottom{
  background-image:linear-gradient(180deg, $color-grey, $color-grey 50%, transparent 50%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom left;
}
@mixin border-right{
  background-image:linear-gradient(270deg, $color-grey, $color-grey 50%, transparent 50%);
  background-size:1px 100% ;
  background-repeat: no-repeat;
  background-position: top right;
}
@mixin border-left{
  background-image:linear-gradient(270deg, $color-grey, $color-grey 50%, transparent 50%);
  background-size:1px 100% ;
  background-repeat: no-repeat;
  background-position: top left;
}

@mixin box-sizing {
  box-sizing: border-box;
}
/**
* 超出长度后隐藏文字
*/
.text-hidden {
  white-space:nowrap;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  overflow:hidden;
}
/**
* 元素出现的位置
*/
.is-placetop {
  top: 50px;
  left: 50%;
  transform: translate(-50%, 0);
}
.is-placemiddle {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.is-placebottom {
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, 0);
}

/**下拉动画*/
@keyframes slide-down{
    0%{transform: scale(1,0);}
    25%{transform: scale(1,1.2);}
    50%{transform: scale(1,0.85);}
    75%{transform: scale(1,1.05);}
    100%{transform: scale(1,1);}
}