YouTuan_wxapp/styles/main.less

// Less全局通用样式
@mainColor: #FF874E; //主题色
@bgcColor: #F7F7F7; //背景色
@whiteColor: #FFFFFF; //白色
@blackColor: #000000; //黑色
@darkFontColor: #464646; //深色文字
@lightFontColor: #656565; //浅色文字
@borderRadius: 20rpx; //盒子圆角

// 行样式
.row() {
  width: 100%;
  display: flex;
  align-items: center;

  .row-left {
    color: @darkFontColor;
    font-size: 32rpx;
    font-weight: 500;
  }

  .row-right {
    color: @lightFontColor;
    font-size: 32rpx;
    font-weight: 500;
  }
}

// 深底白字按钮
.dark-button(@radius: 37rpx; @width: 336rpx; @height: 74rpx; @font-size: 28rpx; ) {
  border-radius: @radius;
  border: 2rpx solid @mainColor;
  width: @width;
  height: @height;
  background-color: @mainColor;
  color: @whiteColor;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: @font-size;
}

// 白底深字按钮
.light-button(@radius: 37rpx; @width: 336rpx; @height: 74rpx; @font-size: 28rpx; ) {
  border-radius: @radius;
  border: 2rpx solid @mainColor;
  width: @width;
  height: @height;
  background-color: @whiteColor;
  color: @mainColor;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: @font-size;
}

// 弹出层-带确认取消按钮
.popup-have-button() {
  width: 710rpx;
  height: 430rpx;
  border-radius: 20rpx;
  position: relative;
  .tan-top {
    position: absolute;
    top: 36rpx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32rpx;
    color: @darkFontColor;
  }
  .tan-body {
    height: 75%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 42rpx;
    color: #656565;
    view {
      width: 84%;
      height: 106rpx;
      background-color: @bgcColor;
      margin-top: 60rpx;
      padding: 0 20rpx;
      border-radius: 12rpx;
      padding: 0 20rpx;
      input {
        height: 106rpx;
      }
    }
  }

  .tan-niu {
    width: 100%;
    height: 25%;
    display: flex;
  }

  .tan-qu {
    width: 50%;
    height: 100%;
    border-radius: 0rpx;
    background-color: #F2F2F2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #989898;
  }

  .tan-que {
    width: 50%;
    height: 100%;
    border-radius: 0rpx;
    background-color: #FF874E;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #FFFFFF;
  }
}