问答、场景页面

wujingjing

2024-08-01 1ee0bcc741206079b645c584c578ee543ff75c35

 miniprogram/assets/global.scss

@@ -12,9 +12,37 @@
  align-items: center;
}

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

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

/* 单行文本溢出显示省略号
--------------------------------------------------------- */
.over-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
/* 多行文本溢出显示省略号，需要指定行数
--------------------------------------------------------- */
.multi-over-ellisis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  // -webkit-line-clamp: 3;
}

/* 字体大小全局样式
------------------------------- */
@for $i from 10 through 32 {
@for $i from 10 through 60 {
  .font#{$i} {
    font-size: #{$i}rpx !important;
  }
@@ -23,54 +51,193 @@
/* 外边距、内边距全局样式
------------------------------- */
@for $i from 1 through 35 {
  .mt#{$i} {
    margin-top: #{$i}rpx !important;
  .m-#{$i} {
    margin: #{$i}rpx !important;
  }
  .mr#{$i} {

  .mx-#{$i} {
    margin-left: #{$i}rpx !important;
    margin-right: #{$i}rpx !important;
  }
  .mb#{$i} {

  .my-#{$i} {
    margin-top: #{$i}rpx !important;
    margin-bottom: #{$i}rpx !important;
  }
  .ml#{$i} {

  .mt-#{$i} {
    margin-top: #{$i}rpx !important;
  }

  .mr-#{$i} {
    margin-right: #{$i}rpx !important;
  }

  .mb-#{$i} {
    margin-bottom: #{$i}rpx !important;
  }

  .ml-#{$i} {
    margin-left: #{$i}rpx !important;
  }
  .pt#{$i} {
    padding-top: #{$i}rpx !important;

  .p-#{$i} {
    padding: #{$i}rpx !important;
  }
  .pr#{$i} {

  .px-#{$i} {
    padding-left: #{$i}rpx !important;
    padding-right: #{$i}rpx !important;
  }
  .pb#{$i} {

  .py-#{$i} {
    padding-top: #{$i}rpx !important;
    padding-bottom: #{$i}rpx !important;
  }
  .pl#{$i} {

  .pt-#{$i} {
    padding-top: #{$i}rpx !important;
  }

  .pr-#{$i} {
    padding-right: #{$i}rpx !important;
  }

  .pb-#{$i} {
    padding-bottom: #{$i}rpx !important;
  }

  .pl-#{$i} {
    padding-left: #{$i}rpx !important;
  }

  .space-x-#{$i} > * + * {
    margin-left: #{$i}rpx;
  // .space-x-#{$i} > * + * {
  //   margin-left: #{$i}rpx;
  // }

  // .space-y-#{$i} > * + * {
  //   margin-left: #{$i}rpx;
  // }
}

$percent-steps: (10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%);

@for $i from 1 through length($percent-steps) {
  $percent: nth($percent-steps, $i);

  .w-p-#{$i * 10} {
    width: $percent;
  }

  .space-y-#{$i} > * + * {
    margin-left: #{$i}rpx;
  .h-p-#{$i * 10} {
    height: $percent;
  }
}

@for $i from 1 through 140 {
@for $i from 0 through 140 {
  .w-#{$i * 5} {
    width: #{$i * 5}rpx;
  }
}
@for $i from 1 through 140 {

  .h-#{$i * 5} {
    height: #{$i * 5}rpx;
  }
}

@for $i from 1 through 140 {
  .size-#{$i * 5} {
    width: #{$i * 5}rpx;
    height: #{$i * 5}rpx;
  }
}

  .m-#{$i * 5} {
    margin: #{$i * 5}rpx !important;
  }

  .mx-#{$i * 5} {
    margin-left: #{$i * 5}rpx !important;
    margin-right: #{$i * 5}rpx !important;
  }

  .my-#{$i * 5} {
    margin-top: #{$i * 5}rpx !important;
    margin-bottom: #{$i * 5}rpx !important;
  }

  .mt-#{$i * 5} {
    margin-top: #{$i * 5}rpx !important;
  }

  .mr-#{$i * 5} {
    margin-right: #{$i * 5}rpx !important;
  }

  .mb-#{$i * 5} {
    margin-bottom: #{$i * 5}rpx !important;
  }

  .ml-#{$i * 5} {
    margin-left: #{$i * 5}rpx !important;
  }

  .p-#{$i * 5} {
    padding: #{$i * 5}rpx !important;
  }

  .px-#{$i * 5} {
    padding-left: #{$i * 5}rpx !important;
    padding-right: #{$i * 5}rpx !important;
  }

  .py-#{$i * 5} {
    padding-top: #{$i * 5}rpx !important;
    padding-bottom: #{$i * 5}rpx !important;
  }

  .pt-#{$i * 5} {
    padding-top: #{$i * 5}rpx !important;
  }

  .pr-#{$i * 5} {
    padding-right: #{$i * 5}rpx !important;
  }

  .pb-#{$i * 5} {
    padding-bottom: #{$i * 5}rpx !important;
  }

  .pl-#{$i * 5} {
    padding-left: #{$i * 5}rpx !important;
  }

  .top-#{$i * 5} {
    top: #{$i * 5}rpx !important;
  }

  .left-#{$i * 5} {
    left: #{$i * 5}rpx !important;
  }

  .right-#{$i * 5} {
    right: #{$i * 5}rpx !important;
  }

  .bottom-#{$i * 5} {
    bottom: #{$i * 5}rpx !important;
  }


  .-top-#{$i * 5} {
    top:- #{$i * 5}rpx !important;
  }

  .-left-#{$i * 5} {
    left: -#{$i * 5}rpx !important;
  }

  .-right-#{$i * 5} {
    right: -#{$i * 5}rpx !important;
  }

  .-bottom-#{$i * 5} {
    bottom: -#{$i * 5}rpx !important;
  }
}