xiangan/static/style/common.scss

$bg: #F8F8F8;
$yellow: #e2d602;
$orange: #fd7600;
$orange-deep: #FF4B00;
$orange-light: #FFC5AD;
$green: #98C147;
$green-light: #a1ded0;
$blue: #2665c4;
$blue-light: #049DFF;
$blue-light-50: #ebf3f8;
$purple: #c770f6;
$purple-light: #E0AFFB;
$red: #FE6869;
$red-light: #F7B2B2;
$gray-weight: #666;
$gray: #bbb;
$gray-light: #F7F7F7;
$gold: #B68320;
$gold-light: #FFF0D3;
$fdca00: #FDCA00;
$u-primary: $green;

//p, span {
//    font-size: 30rpx;
//    margin: 0;
//}

h6 {
  font-weight: bolder !important;
  font-size: 20rpx;
}

.pos-r {
  position: relative;
}

.pos-a {
  position: absolute;
}

.bg {
  background-color: $bg;
}

.bg-gray-light {
  background-color: $gray-light;
}

.bg-white {
  background-color: white;
}

.bg-main {
  background-color: $u-primary;
}

.bg-linear {
  background : linear-gradient(90deg, #049DFF, #2665c4);
}

.bg-red {
  background-color: $red;
}

.bg-orange {
  background-color: $orange;
}

.bg-blue {
  background-color: $blue;
}

.bg-gold {
  background-color: $gold;
}

.bg-green {
  background-color: $green;
}

.bg-main-light {
  background-color: #E0F2FE;
}

.bg-fff0 {
  background-color: #F0F0F0FF;
}

.shadow {
  box-shadow: 0 2px 6px 0 rgba(191, 218, 251, 1);
}

.shadow-top {
  box-shadow: 0px -2px 13px rgba(191, 218, 251, 1);
}

.shadow-light {
  box-shadow: 0 4rpx 12rpx 0 rgba(206, 206, 206, 80);
}

.shadow-50 {
  box-shadow: -2rpx 4rpx 14rpx 4rpx rgba(206, 206, 206, 50);
}

.font-bold {
  font-weight: bold;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.tips {
  font-size: 20rpx;
  color: $gray;
}

.text-main {
  color: $u-primary;
}

.text-orange {
  color: #fd7600;
}

.text-blue {
  color: $blue;
}

.text-blue-light {
  color: $blue-light;
}

.text-green {
  color: $green;
}

.text-red {
  color: $red;
}

.text-gray {
  color: $gray;
}

.text-gray-weight {
  color: $gray-weight;
}

.text-black {
  color: #333;
}

.color-6C {
  color: #6C6C6C;
}

.text-white {
  color: white;
}

.text-line-through {
  text-decoration: line-through;
}

.color-9A {
  color: #9A9A9A;
}

.color-333 {
  color: #333333;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-center {
  justify-content: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.item-self {
  align-self: flex-end;
}

.flex-col {
  flex-direction: column;
}

.flex-rev {
  flex-direction: row-reverse;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-shrink {
  flex-shrink: 0;
}

.flex-none {
  flex: none;
}

.flex-grow {
  flex-grow: 1
}

.flex-grow-0 {
  flex-grow: 0
}

.h-100 {
  height: 100vh;
}

.h-100p {
  height: 100%;
}

.h-90p {
  height: 90%;
}

.h-50p {
  height: 50%;
}

.h-10p {
  height: 10%;
}

.w-100 {
  width: 100vw;
}

.w-100p {
  width: 100%;
}

.w-5p {
  width: 5%;
}

.w-10p {
  width: 10%;
}

.w-15p {
  width: 15%;
}

.w-20p {
  width: 20%;
}

.w-25p {
  width: 25%;
}

.w-30p {
  width: 30%;
}

.w-33p {
  width: 33%;
}

.w-40p {
  width: 40%;
}

.w-45p {
  width: 45%;
}

.w-50p {
  width: 50%;
}

.w-60p {
  width: 60%;
}

.w-67p {
  width: 67%;
}

.w-75p {
  width: 75%;
}

.w-80p {
  width: 80%;
}

.w-85p {
  width: 85%;
}

.w-90p {
  width: 90%;
}

.p-10 {
  padding: 10rpx;
}

.p-15 {
  padding: 15rpx;
}

.pb-15 {
  padding-bottom: 15rpx;
}

.pb-20 {
  padding-bottom: 20rpx;
}

.pb-30 {
  padding-bottom: 30rpx;
}

.p-20 {
  padding: 20rpx;
}

.p-25 {
  padding: 25rpx;
}

.p-30 {
  padding: 30rpx;
}

.px-20 {
  padding: 0 20rpx;
}

.px-40 {
  padding: 0 40rpx;
}

.p-50 {
  padding: 50rpx;
}

.py-10 {
  padding: 10rpx 0;
}

.py-15 {
  padding: 15rpx 0;
}

.py-20 {
  padding: 20rpx 0;
}

.py-25 {
  padding: 25rpx 0;
}

.py-30 {
  padding: 30rpx 0;
}

.px-15 {
  padding: 0 15rpx;
}

.px-20 {
  padding: 0 15rpx;
}

.px-30 {
  padding: 0 30rpx;
}

.pl-15 {
  padding-left: 15rpx;
}

.pl-20 {
  padding-left: 20rpx;
}

.pr-15 {
  padding-right: 15rpx;
}

.pr-20 {
  padding-right: 20rpx;
}

.pt-10 {
  padding-top: 10rpx;
}

.pt-20 {
  padding-top: 20rpx;
}

.pr-25 {
  padding-right: 25rpx;
}

.m-a {
  margin: auto;
}

.m-10 {
  margin: 10rpx;
}

.m-15 {
  margin: 15rpx;
}

.m-20 {
  margin: 20rpx;
}

.m-25 {
  margin: 25rpx;
}

.m-30 {
  margin: 30rpx;
}

.m-35 {
  margin: 35rpx;
}

.ml-10 {
  margin-left: 10rpx;
}

.ml-15 {
  margin-left: 15rpx;
}

.ml-25 {
  margin-left: 25rpx;
}

.ml-35 {
  margin-left: 35rpx;
}

.mt-10 {
  margin-top: 10rpx;
}

.mt-15 {
  margin-top: 15rpx;
}

.mt-20 {
  margin-top: 20rpx;
}

.mt-25 {
  margin-top: 25rpx;
}

.mt-30 {
  margin-top: 30rpx;
}

.mt-40 {
  margin-top: 40rpx;
}

.mt-50 {
  margin-top: 50rpx;
}

.mb-25 {
  margin-bottom: 25rpx;
}

.mb-40 {
  margin-bottom: 40rpx;
}

.my-10 {
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.my-15 {
  margin-top: 15rpx;
  margin-bottom: 15rpx;
}

.my-20 {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.my-25 {
  margin-top: 25rpx;
  margin-bottom: 25rpx;
}

.mx-15 {
  margin-left: 15rpx;
  margin-right: 15rpx;
}

.mx-20 {
  margin-left: 20rpx;
  margin-right: 20rpx;
}

.mx-25 {
  margin-left: 25rpx;
  margin-right: 25rpx;
}

.mb-10 {
  margin-bottom: 10rpx;
}

.mb-15 {
  margin-bottom: 15rpx;
}

.mb-20 {
  margin-bottom: 20rpx;
}

.mr-10 {
  margin-right: 10rpx;
}

.mr-15 {
  margin-right: 15rpx;
}

.ml-20 {
  margin-left: 20rpx;
}

.mr-25 {
  margin-right: 25rpx;
}

.mr-35 {
  margin-right: 35rpx;
}

.text-15 {
  font-size: 15rpx;
}

.text-20 {
  font-size: 20rpx;
  line-height: 20rpx;
}

.text-24 {
  font-size: 24rpx;
}

.text-25 {
  font-size: 25rpx;
  line-height: 35rpx;
}

.text-26 {
  font-size: 26rpx;
}

.text-28 {
  font-size: 28rpx;
  line-height: 28rpx;
}

.text-30 {
  font-size: 30rpx;
  line-height: 30rpx;
}

.text-35 {
  font-size: 35rpx;
  line-height: 35rpx;
}

.text-40 {
  font-size: 40rpx;
  line-height: 40rpx;
}

.rounded {
  border-radius: 40rpx;
}

.rounded-sm {
  border-radius: 20rpx;
}

.circle {
  border-radius: 999px;
}

.rounded-16 {
  border-radius: 16rpx;
}

.rounded-bottom {
  border-radius: 0 0 40rpx 40rpx;
}

.rounded-top {
  border-radius: 40rpx 40rpx 0 0;
}

.border-top {
  border-top: 1px solid $gray-light;
}

.border-bottom {
  border-bottom: 1px solid $gray-light;
}


.border-right {
  border-right: 1px solid $gray-light;
}

.border {
  border: 1px solid $gray;
}

.canvas-hide {
  //position: fixed;
  //right: 100vw;
  //bottom: 100vh;
  //z-index: -9999;
  //opacity: 0;
}

.card {
  @extend .rounded;
  @extend .bg-white;
  @extend .p-20;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  @extend .w-100p;
  z-index: 10;
}

.public-sub-btn {
  background: $fdca00;
  font-weight: bold;
  color: #000;
  border-radius: 50rpx;
  text-align: center;
  padding: 24rpx 0;
}

.b-20 {
  bottom: 20rpx;
}

.p-button {
  background: linear-gradient(#E5CB98, #FBEDBC);
  color: #B68320;
}

@font-face {
  font-family: "iconfont";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
}

.iconfont {
  flex: 1;
  text-align: center;
  font-family: "iconfont" !important;
  font-size: 22px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-undo:before {
  content: "\e607";
}

.icon-redo:before {
  content: "\e606";
}

.icon-img:before {
  content: "\e6e2";
}

.icon-video:before {
  content: "\e798";
}

.icon-link:before {
  content: "\e60d";
}

.icon-text:before {
  content: "\e6ce";
}

.icon-clear:before {
  content: "\e637";
}

.icon-save:before {
  content: "\e501";
}

.required {
  @extend .pos-a;
  left: -9px;
  color: #f56c6c;
  line-height: 20px;
  font-size: 20px;
  top: 15px;
}

.overflow-y {
  overflow-y: auto;
}

.overflow-x {
  overflow-x: auto;
}

.album-item {
  width: 190rpx;
  height: 190rpx;
  @extend .m-10;
  @extend .flex;
  @extend .justify-center;
  @extend .items-center;
}

.del-wrap {
  @extend .pos-a;
  right: 0;
  top: 0;
  border-radius: 0 0 0 5px;
  padding: 10rpx;
  background-color: $red;
  z-index: 1000;
}

.min-height {
  min-height: 100vh;
}

.share-btn {
  border: none;
  background: none;
  margin: 0;
  padding: 0;

  &::after {
    border: none;
  }
}

.border-main{
  border-color: $u-primary !important;
}

.popup-close {
  bottom: -80rpx;
  left: calc(50% - 20rpx);
}