menduner-uniapp/static/style/index.scss

:root {
  --v-primary-base: #00B760;
  --v-error-base: #fe574a;
  --v-primary-lighten1: #26A69A;
  --v-primary-lighten2: #4DB6AC;
  --v-primary-lighten3: #80CBC4;
  --v-primary-lighten4: #B2DFDB;
  --color-222: #222;
  --color-333: #333;
  --color-666: #666;
  --color-777: #777;
  --color-999: #999;
  --color-ccc: #ccc;
  --color-f3: #f3f3f3;
  --color-f2f4f742: #f2f4f742;
  --color-f8: #f8f8f8;
  --color-f2f4f7: #f2f4f7;
  --color-d5e6e8: #d5e6e8;
  --zIndex-breadcrumbs: 999;
}

.mt-5 { margin-top: 30rpx; }
.mt-10 { margin-top: 60rpx; }

.cursor-pointer { cursor: pointer; }
.font-weight-bold { font-weight: bold; }
.text-center { text-align: center; }
.vertical80-center { text-align: center; line-height: 80vh; } // 左右居中，高度80居中
.vertical-center { text-align: center; line-height: 80vh; } // 左右居中，高度80居中
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-space-between { justify-content: space-between; }
.justify-space-around { justify-content: space-around; }
.justify-end { justify-content: flex-end; }

.color-222 { color: #222; }
.color-333 { color: #333; }
.color-666 { color: #666; }
.color-777 { color: #777; }
.color-999 { color: #999; }
.color-ccc { color: #ccc; }
.color-f3f3f3 { color: #f3f3f3; }
.color-f2f4f742 { color: #f2f4f742; }
.color-f8f8f8 { color: #f8f8f8; }
.color-f2f4f7 { color: #f2f4f7; }
.color-d5e6e8 { color: #d5e6e8; }
.color-error { color: #fe574a; }
.color-primary { color: #00B760; }
.color-warning { color: #fb8c00; }
.default-text-color { color: #0E100F; }

.font-size-12 { font-size: 24rpx; }
.font-size-13 { font-size: 26rpx; }
.font-size-14 { font-size: 28rpx; }
.font-size-15 { font-size: 30rpx; }
.font-size-16 { font-size: 32rpx; }
.font-size-17 { font-size: 34rpx; }
.font-size-18 { font-size: 36rpx; }
.font-size-19 { font-size: 38rpx; }
.font-size-20 { font-size: 40rpx; }

// .MiSans-Heavy {
// 	font-family: MiSans-Heavy;
// }
// .MiSans-ExtraLight {
// 	font-family: MiSans-ExtraLight;
// }
// .MiSans-Light {
// 	font-family: MiSans-Light;
// }
// .MiSans-Demibold {
// 	font-family: MiSans-Demibold;
// }
.MiSans-Semibold {
	font-family: MiSans-Semibold;
}
.MiSans-Normal {
	font-family: MiSans-Normal;
}
// .MiSans-Thin {
// 	font-family: MiSans-Thin;
// }
.MiSans-Bold {
	font-family: MiSans-Bold;
}
// .MiSans-Regular {
// 	font-family: MiSans-Regular;
// }
.MiSans-Medium {
	font-family: MiSans-Medium;
}

.navbarBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 9;
}

.defaultLink {
  color:#00B760;
  cursor:pointer;
}
.default-radius { border-radius: 10rpx; }
.list-item-bgc { background-color: #fbfbfb; }
.default-border { border: 1rpx solid #E1E4E9; }

.defaultBgc {
  background-color: #f7f8fa;
}
// 公共渐变样式
.commonBackground {
	position: relative;
  &::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 160px;
	  background: linear-gradient(180deg, #BCFEDE, #F7F8FA);
  }
}

.nodata-img-parent{
	height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

// 火苗
// 水平左右分
.f-horizon {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
}
// 水平居中
.f-horizon-center{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	margin: 5rpx;
}

.salary {
  color: var(--v-error-base);
  line-height: 41px;
  font-weight: 600;
  height: auto;
  display: inline-block;
  vertical-align: sub;
}
.bold {font-weight: bold;}
.w-600 {font-weight: 600;}

.horizontalDividingLine {
  height: 1px;
  color: #EDEDED;
  width: 100%;
}

// 高亮
.default-active {
  color: var(--v-primary-base) !important;
}

.border-bottom-dashed {
  border-bottom: 1px dashed var(--color-ccc);
}

.white-bgc {
  background-color: #fff;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.head-box {
  .head-title {
    min-width: 160rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    line-height: 36rpx;
  }
  .head-title-active {
    width: 160rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #999;
    line-height: 36rpx;
  }
  .head-title-animation {
    animation-name: title-animation;
    animation-duration: 0.1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
  }
  .head-title-line {
    position: relative;
    &::before {
      content: '';
      width: 1rpx;
      height: 34rpx;
      background-color: #e4e7ed;
      position: absolute;
      left: -30rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .head-subtitle {
    font-size: 26rpx;
    font-weight: 400;
    color: #afb6c0;
    text-align: left;
    display: flex;
  }
}

/* ==================

    margin padding: 内外边距
	
 ==================== */
 @for $i from 0 through 100 {
  // 只要双数和能被5除尽的数
  @if $i % 2==0 or $i % 5==0 {
    // 得出：u-margin-30或者u-m-30
    .ss-margin-#{$i},
    .ss-m-#{$i} {
      margin: $i + rpx;
    }
    .ss-m-x-#{$i} {
      margin-left: $i + rpx;
      margin-right: $i + rpx;
    }
    .ss-m-y-#{$i} {
      margin-top: $i + rpx;
      margin-bottom: $i + rpx;
    }

    // 得出：u-padding-30或者u-p-30
    .ss-padding-#{$i},
    .ss-p-#{$i} {
      padding: $i + rpx;
    }
    .ss-p-x-#{$i} {
      padding-left: $i + rpx;
      padding-right: $i + rpx;
    }
    .ss-p-y-#{$i} {
      padding-top: $i + rpx;
      padding-bottom: $i + rpx;
    }

    @each $short, $long in l left, t top, r right, b bottom {
      // 缩写版，结果如： u-m-l-30
      // 定义外边距
      .ss-m-#{$short}-#{$i} {
        margin-#{$long}: $i + rpx;
      }

      // 定义内边距
      .ss-p-#{$short}-#{$i} {
        padding-#{$long}: $i + rpx;
      }

      // 完整版，结果如：u-margin-left-30
      // 定义外边距
      .ss-margin-#{$long}-#{$i} {
        margin-#{$long}: $i + rpx;
      }

      // 定义内边距
      .ss-padding-#{$long}-#{$i} {
        padding-#{$long}: $i + rpx;
      }
    }
  }
}

/* ==================

    radius
	
 ==================== */
@for $i from 0 through 100 {
  // 只要双数和能被5除尽的数
  @if $i % 2==0 or $i % 5==0 {
    .ss-radius-#{$i},
    .ss-r-#{$i} {
      border-radius: $i + rpx;
    }

    .ss-r-t-#{$i} {
      border-top-left-radius: $i + rpx;
      border-top-right-radius: $i + rpx;
    }

    .ss-r-b-#{$i} {
      border-bottom-left-radius: $i + rpx;
      border-bottom-right-radius: $i + rpx;
    }

    @each $short, $long in tl 'top-left', tr 'top-right', bl 'bottom-right', br 'bottom-right' {
      // 定义外边距
      .ss-r-#{$short}-#{$i} {
        border-#{$long}-radius: $i + rpx;
      }

      // 定义内边距
      .ss-radius-#{$long}-#{$i} {
        border-#{$long}-radius: $i + rpx;
      }
    }
  }
}

/* ==================
          flex布局
 ==================== */

 .ss-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ss-flex-1 {
  flex: 1;
}

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

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

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

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

.ss-col-top {
  align-items: flex-start;
}

.ss-col-bottom {
  align-items: flex-end;
}

.ss-col-stretch {
  align-items: stretch;
}

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

.ss-row-left {
  justify-content: flex-start;
}

.ss-row-right {
  justify-content: flex-end;
}

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

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

.ss-self-start {
  align-self: flex-start;
}

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

.ss-self-center {
  align-self: center;
}
.ss-h-100 {
  height: 100%;
}
.ss-w-100 {
  width: 100%;
}

/* ==================
    按钮
 ==================== */
 .ss-reset-button {
  padding: 0;
  margin: 0;
  font-size: inherit;
  background-color: transparent;
  color: inherit;
  position: relative;
  border: 0rpx;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: baseline;
  transform: translate(0, 0);
}
.ss-reset-button.button-hover {
  transform: translate(1px, 1px);
  background: none;
}

.ss-reset-button::after {
  border: none;
}

.login-btn-start {
  width: 158rpx;
  height: 56rpx;
  line-height: normal;
  background: #00B760;
  border-radius: 28rpx;
  font-size: 26rpx;
  font-weight: 500;
  color: #fff;
}

//页面底部单个按钮
.recomm-button {
  color: #fff;
  width: 85%;
  height: 44px;
  line-height: 44px;
  margin: 20px auto;
  background-color: #00B760 !important;
  // border-radius: 25px;
}
//页面底部两个按钮
.second-button {
  width: 50vw;
  height: 44px;
  margin: 15px;
  background-color: #00B760 !important;
  // border-radius: 25px;
}
.second-button:first-child {
	margin: 15px 0 15px 15px;
}
//底部按钮公用定位
.bottom-sticky{
  display: flex;
  width:100vw;
  position: fixed;
  bottom:0;
  left: 0;
  background-image:linear-gradient(rgba(255,255,255,0.8),white);
}
// 主要页面大按钮用这个
.send-button {
	width: 90vw;
	height:44px;
	line-height: 44px;
	margin:20px auto;
	background-color: #00B760 !important;
	// border-radius: 25px;
	color: #fff;
}

.main-button-color {
	background-color: #00B760 !important;
	color: #fff;
}

.commonBtnStyle {
  width: 45vw;
  height: 44px;
  line-height: 44px;
  color: #fff;
}
.save-button {
  margin: 20px 0 20px 20px;
  background-color: #00B760 !important;
}
.delete-button {
  margin: 20px auto;
	color: #FE574A !important;
  background-color: #fff !important;
	border: 1px solid #FE574A;
}
//禁用按钮
.disabled-button {
	width: 85%;
  height: 44px;
  line-height: 44px;
  margin: 20px auto;
  background-color: grey !important;
  // border-radius: 25px;
}
.big-cancel-button {
  width: 90vw;
  height:44px;
  line-height: 44px;
  margin:20px auto;
  background-color: #fff !important;
  color: #b3aeae;
  font-size: 28rpx;
}

// 头像
.r-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	// margin: 25rpx;
}
.avatar{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	margin: auto;
}
.r-avatar-small {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	margin: 20rpx;
}

.title-des {
  color: #3f424f;
  font-size: 19px;
  margin: 10px 0;
}
.scrollBox{
  height: 100%;
}