heketai-h5-en/assets/css/common.scss

*,
:before,
:after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}
* {
  -webkit-text-size-adjust: 100%; /* 禁止微信或浏览器改变字体大小 */
}
html {
  font-size: 0;
}
body {
  font-size: 14px;
  font-family: PoppinsRegular;
}
.p-header {
  font-size: 14px;
}
body,
html,
ul,
li {
  display: block;
  margin: 0;
  padding: 0;
}
ol,
ul,
menu,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
html,
body,
#__nuxt {
  width: 100%;
}
html,
body,
#__nuxt,
.main-body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.el-popup-parent--hidden {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
  padding: 0;
  margin: 0;
  height: auto;
}
a {
  color: inherit;
  text-decoration: inherit;
}

:root {
  --heading-color: #13172c;
  --section-color: #272f58;
  --button-color: #0067ed;
  --icon-color: #8291e3;
  --bg-color: #fff;
  --el-color-primary: #0067ed !important;
  --el-menu-active-color: #0067ed;
  --el-menu-hover-bg-color: #eff1fb;
  // --el-color-info: #fff !important;
  // --el-color-success:#fff !important;
  // --el-color-warning:#fff !important;
  // --el-color-error:#fff !important;
  --van-toast-background: rgba(0, 0, 0, 0.7) !important;
  --van-toast-text-color: #fff;
  --van-toast-z-index: 2020;
  --van-button-primary-background: #0067ed !important
;
}
.max-w1280 {
  max-width: 100%;
  margin: 0 auto;
}
.f-c-fs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.f-c-fe {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.el-message--error,
.el-message--info,
.el-message--warning,
.el-message--success {
  --el-message-text-color: #ffffff !important;
}

@font-face {
  font-family: PoppinsRegular;
  src: url("@/assets/fonts/Poppins-Regular.ttf");
}
.desc_title_poppins {
  color: #292929;
}

/** 消息样式 */
.el-message {
  border-radius: var(--el-border-radius-round);
}

.el-message__content {
  font-size: 14px !important;
}

.el-message--success {
  background-image: linear-gradient(195deg, #66bb6a, #43a047);
}

.el-message--error {
  background-image: linear-gradient(195deg, #ef5350, #e53935);
}

.el-message--info {
  background-image: linear-gradient(195deg, #49a3f1, #1a73e8);
}

.el-message--warning {
  background-image: linear-gradient(195deg, #ffa726, #fb8c00);
}

/** dialog */
.el-dialog {
  border-radius: var(--el-border-radius-round) !important;
  box-shadow: var(--el-box-shadow);
}

/** date picker */
.el-picker-panel {
  border-radius: var(--el-border-radius-round) !important;
  box-shadow: var(--el-box-shadow);
}

/** 按钮链接不显示下划线 */
.button-link.el-link.is-underline:hover:after {
  content: none;
}

/** 注册页/登陆页的顶部框框 */
.box-top-frame {
  width: 64px;
  height: 64px;
  background-color: rgb(76, 175, 80);
  position: absolute;
  margin-top: -18rem !important;
  margin-left: -25rem !important;
  border-radius: 20px;
  box-shadow: var(--el-box-shadow);
  background-image: linear-gradient(195deg, var(--el-color-primary-light-5), var(--el-color-primary));
}

.admin-top-info {
  padding: 20px 30px 20px 30px;
  flex: 1;
  width: 100%;
  margin: 0 auto;
  .admin-top-title {
    h1 {
      line-height: 42px;
      font-size: 30px;
      @extend .desc_inner;
    }
  }
  .admin-top-tabs {
    user-select: none;
    width: 100%;
    margin-top: 12px;
  }
}

.page_div {
  margin: 20px auto 0 auto;
  max-width: 1140px;
  padding: 0 20px;
  .back {
    height: 39px;
    font-size: 20px;
    font-weight: 400;
    color: #6376dc;
    line-height: 28px;
    margin-top: 60px;
    margin: 0 auto;
    text-align: left;
    margin-top: 60px;
  }
  .info_title {
    height: 39px;
    font-size: 28px;
    line-height: 42px;
    margin: 0 auto;
    text-align: left;
    margin-top: 53px;
    color: #272f58;
  }
  .info_inner {
    font-size: 18px;
    font-weight: 400;
    line-height: 29px;
    margin: 0 auto;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 108px;
    color: #292929;
  }
  .tit_cls {
    font-weight: 800;
    color: #525583;
    margin-top: 60px;
    margin-bottom: 30px;
  }
}

.blogs-detail {
  &.page_div {
    .info_title {
      display: flex;
    }
    .info_inner {
      font-size: 16px;
      color: #292929;
    }
  }
}

.page-text-bg {
  background: #fff;
  justify-content: center;
}
.page-text-box {
  padding: 20px;
  max-width: 1000px;
  position: relative;
  width: 100%;
}
.page-text-wrap {
  margin-top: 30px;
}

.mt20 {
  margin-top: 20px;
}
.mb20 {
  margin-bottom: 20px;
}
.mt40 {
  margin-top: 40px;
}
.mb40 {
  margin-bottom: 40px;
}
.mb8 {
  margin-bottom: 8px;
}
.ml20 {
  margin-left: 20px;
}
.ml40 {
  margin-left: 40px;
}
@for $i from 1 through 200 {
  .w#{$i} {
    width: 1px * $i !important;
  }
  .hd#{$i} {
    height: 1px * $i;
  }
}
@for $i from 1 through 100 {
  .ml#{$i} {
    margin-left: 1px * $i;
  }
  .mr#{$i} {
    margin-right: 1px * $i;
  }
  .mt#{$i} {
    margin-top: 1px * $i;
  }
  .mb#{$i} {
    margin-bottom: 1px * $i;
  }
  .mg#{$i} {
    margin: 1px * $i;
  }
  .pl#{$i} {
    padding-left: 1px * $i;
  }
  .pr#{$i} {
    padding-right: 1px * $i;
  }
  .pt#{$i} {
    padding-top: 1px * $i;
  }
  .pb#{$i} {
    padding-bottom: 1px * $i;
  }
  .pg#{$i} {
    padding: 1px * $i;
  }
}
@for $i from 1 through 100 {
  .ml#{$i}_i {
    margin-left: 1px * $i !important;
  }
  .mr#{$i}_i {
    margin-right: 1px * $i !important;
  }
  .mt#{$i}_i {
    margin-top: 1px * $i !important;
  }
  .mb#{$i}_i {
    margin-bottom: 1px * $i !important;
  }
  .mg#{$i}_i {
    margin: 1px * $i !important;
  }
  .pl#{$i}_i {
    padding-left: 1px * $i !important;
  }
  .pr#{$i}_i {
    padding-right: 1px * $i !important;
  }
  .pt#{$i}_i {
    padding-top: 1px * $i !important;
  }
  .pb#{$i}_i {
    padding: 1px * $i !important;
  }
  .wd#{$i}_i {
    width: 1px * $i !important;
  }
  .hd#{$i}_i {
    height: 1px * $i !important;
  }
}
.w100_ {
  width: 100%;
}
.d-flex {
  display: flex;
}
.f-s-a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.space-between {
  justify-content: space-between;
}
.flex-direction-column {
  flex-direction: column;
}
.justify-content-center {
  justify-content: center;
}
.flex-start {
  justify-content: flex-start;
}

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

.text-4xl {
  font-size: 36px;
  line-height: 40px;
}
.text-2xl {
  font-size: 24px;
  line-height: 32px;
}
.text-xl {
  font-size: 20px;
  line-height: 28px;
}
.justify-start {
  justify-content: flex-start;
}

.btn-bg-none {
  background: unset;
}
.el-dialog {
  .el-dialog__headerbtn .el-dialog__close {
    color: rgb(114, 118, 123);
  }
}
.w100 {
  width: 100%;
}
.w100px {
  width: 100px;
}

.mainColor {
  color: $mainColor;
}
.mainColor_i {
  color: $mainColor !important;
}
.fb {
  font-weight: bold;
}

.el-link:hover {
  color: $mainColor !important;
}
.c-green-900 {
  color: rgba(20, 83, 45, 1);
}

.nuxtLink:hover {
  color: $mainColor !important;
}
.el-message-box__btns .el-button {
  &:hover {
    border-color: #d6d6d6;
    background-color: #f2f3f5;
    color: #292929;
  }
  &.el-button--primary:hover {
    background-color: #d70848;
    border-color: #d70848;
    color: #fff;
  }
}

/** 取消按钮文字全大写 */
:deep(.el-button) {
  text-transform: none;
  font-weight: normal;
}
/** 禁用按钮的颜色变浅 */
:deep(.el-button.is-disabled) {
  opacity: 0.4;
}
.el-button:not(.el-picker-panel__link-btn) {
  @extend .btnDefault;
}
/** 主按钮样式 */
.btn_main:not(.is-disabled) {
  border: 1px solid #d6d6d6 !important;
  background-color: $mainColor !important;
  color: #fff !important;
  &:hover {
    background-color: $AuxColor !important;
  }
  &:active {
    background-color: $AuxColor !important;
    transition: background-color 0.3s ease !important;
  }
}
/** 次按钮样式 */
.btn_second:not(.is-disabled) {
  border: 1px solid #000 !important;
  background-color: #000 !important;
  color: #fff !important;
  &:hover {
    background-color: #434343 !important;
  }
  &:active {
    background-color: #434343 !important;
    transition: background-color 0.3s ease !important;
  }
}
/** 普通线性按钮样式 */
.btn_edge:not(.is-disabled) {
  border: 1px solid #d6d6d6 !important;
  background-color: #ffffff !important;
  color: #292929 !important;
  &:hover {
    background-color: #f2f3f5 !important;
  }
  &:active {
    background-color: #f2f3f5 !important;
    transition: background-color 0.3s ease !important;
  }
}

.btn_text {
  margin-left: 24px;
  display: flex;
  align-items: center;
  color: #666;
  position: relative;
  &::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background: #a0a0a0;
    left: 0;
    bottom: 10px;
  }
  &:hover {
    color: $mainColor;
    &::before {
      background: $mainColor;
    }
  }
}

.btn_text:hover {
  color: $mainColor;
}

.el-dialog {
  padding: 20px 30px !important;
  border-radius: 7px !important;
  .el-dialog__headerbtn {
    right: 10px;
    top: 10px;
  }
  .el-dialog__body {
    padding: 15px 0 10px;
  }
}
.SelectProduct {
  .el-dialog__body {
    padding: 15px 0 10px;
  }
}
.el-row .el-pagination {
  color: red;
  .el-select__wrapper,
  .el-input__wrapper {
    height: 42px;
  }

  &.is-background {
    .btn-prev {
      background: unset !important;
    }
    .btn-next {
      background: unset !important;
    }
    .el-pager li {
      margin: 0 4px;
      background-color: #fff;
      color: #606266;
      min-width: 32px;
      border-radius: 8px !important;
      border: 1px solid #dee2e6;
      width: 36px !important;
      height: 36px !important;
      &:not(.is-disabled).is-active {
        background-image: linear-gradient(to right, $mainColor, $mainColor);
        color: #fff;
        font-weight: 700;
      }
    }
  }
}

.el-input .el-input__wrapper {
  &.is-focus {
    box-shadow: 0 0 0 1px #c0c0c0 inset !important;
  }
}
.el-select {
  .el-select__wrapper {
    border-radius: 4px !important;
    &.is-focus,
    &.is-focused {
      box-shadow: 0 0 0 1px #000000 inset !important;
    }
  }
}
.el-textarea__inner {
  &:focus {
    box-shadow: 0 0 0 1px #000000 inset !important;
  }
}
.el-range-editor.is-active:hover,
.el-range-editor.is-active {
  box-shadow: 0 0 0 1px #000000 inset !important;
}

.nav-wrap {
  justify-content: space-between;
  align-items: center;
  margin: 0px 0 30px;
  width: 1280px;
  .result-wrap {
    font-size: 18px;
    span {
      &:nth-child(2) {
        font-weight: bold;
      }
      &:nth-child(3) {
        color: #999;
      }
    }
  }
  .pagination-wrap {
    .pagination-size,
    .pagination-sort {
      align-items: center;
      justify-content: flex-start;
      .el-select__wrapper {
        width: 70px;
      }
      span {
        min-width: 110px;
      }
    }
    .el-select__wrapper {
      height: 45px;
      border-radius: 25px !important;
      padding-left: 20px;
      cursor: pointer;
    }
    .pagination-sort {
      margin-left: 40px;
      .el-select__wrapper {
        width: 100px;
        padding-left: 30px;
      }
      span {
        min-width: 32px;
      }
    }
  }
}

// product
.product-ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0px 6px 10px;
  flex-direction: column;
  .product-li {
    width: 100%;
    padding: 0 6px;
    margin-bottom: 12px;
    position: relative;
    & > a {
      background: #fff;
      display: flex;
      border-radius: 8px;
      padding-left: 12px;
      position: relative;
      z-index: 1;
    }
    .addCart {
      position: absolute;
      right: 16px;
      bottom: 10px;
      z-index: 2;
    }
  }
  .product-img {
    overflow: hidden;
    min-width: 60px;
    width: 60px;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 4px 4px 0 0;
    flex-direction: column;
    justify-content: center;
    padding: 10px 0;
    p {
      font-size: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      a{
        margin: 0;
      }
    }
    & > img {
      min-width: 60px;
      width: 40px;
      height: 60px;
      transition: all 0.4s ease-out;
      border-radius: 4px 4px 0 0;
      width: 100%;
    }
    .img-tag {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0 8px;
      height: 20px;
      font-size: 12px;
      color: #fff;
      display: flex;
      align-items: center;
      background: $mainColor;
      border-bottom-right-radius: 8px;
    }
    .willSale-tag {
      background: #1f6ffc;
    }
    .presale-tag {
      background: rgb(10, 136, 1);
    }
    .out-stock,
    .totalIncoming-count {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        width: 96px;
        height: 96px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
      }
    }
    .totalIncoming-count {
      span {
        background: rgba(255, 0, 79, 0.5);
      }
    }
  }
  .product-info {
    padding: 10px;
    flex: 1;
    position: relative;
    .title {
      font-weight: bold;
      font-size: 14px;
      overflow: hidden;
      word-wrap: break-word;
      word-break: break-all;
      line-height: 24px;
    }
    p {
      font-size: 12px;
      line-height: 20px;
      a{
        color: $mainColor;
      }
      &.price {
        margin-top: 5px;
        span {
          font-size: 15px;
        }
      }
    }
  }
}
.pagination-btn {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  .btn_noLogin {
    width: 260px;
    border-radius: 50px !important;
  }
}

.admin-con {
  .el-select .el-select__wrapper {
    border-radius: 4px !important;
  }
  .el-range-editor.el-input__wrapper {
    border-radius: 4px !important;
    height: 42px;
    width: 225px;
  }
  .el-date-editor .el-range__close-icon--hidden {
    display: none;
  }
  .el-form-item__label {
    line-height: 42px;
    height: 42px;
  }
  .el-select {
    width: 200px;
  }
  .btn_main,
  .btn_edge {
    border-radius: 25px !important;
  }
}

.category-wrap {
  min-height: calc(100vh - 80px - 364px - 40px);
}

.p-header .custom-menu .el-menu-item {
  padding: 0 10px;
  margin-right: 25px;
  .is-active {
    color: $mainColor !important;
  }
}

// table 单元格多字段分行展示
.d-row {
  display: flex;
  &:first-child {
    margin-top: 10px;
  }
  &:last-child {
    margin-bottom: 10px;
  }
  span {
    &:first-child {
      text-align: left;
      color: #646562;
      font-size: small;
      width: 80px;
      min-width: 80px;
      margin-right: 5px;
    }
    &:last-child {
      word-break: break-all;
    }
  }
}

@for $i from 40 through 120 {
  .d-span-#{$i} {
    .d-row {
      span {
        &:first-child {
          width: 1px * $i;
          min-width: 1px * $i;
        }
      }
    }
  }
}

.login-from .el-form-item__error {
  padding-top: 5px;
}

.el-popover.el-popper.cs-wrap {
  min-width: 170px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.customer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 48px;
  bottom: 15%;
  width: 60px;
  height: 110px;
  background: #fff;
  border-radius: 48px;
  font-size: 12px;
  color: #151a23;
  line-height: 16px;
  z-index: 99;
  cursor: pointer;
  box-shadow: 0 3px 10px 0 rgba(19, 0, 72, 0.09);
  .customer-icon {
    width: 36px;
    height: 36px;
    background: url("~/assets/img/ico/customer.svg");
    background-size: 36px auto;
    margin-bottom: 10px;
  }
  &:hover {
    .customer-icon {
      background: url("~/assets/img/ico/customerHover.svg");
      background-size: 36px auto;
    }
    color: $mainColor;
  }

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

.primary_search_title {
  line-height: 50px;
  display: flex;
  margin: 10px 0;
  width: 100%;
  min-width: 1280px;
  span {
    color: #9fafbc;
    i {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-left: 13px;
      padding-right: 10px;
      max-width: 800px;
      font-style: unset;
    }
  }
  a {
    color: #9fafbc;
    margin: 0 13px;
  }
}

.el-overlay.is-message-box {
  z-index: 2222 !important;
}

.el-empty .el-empty__description {
  display: none;
}

.el-empty__bottom .noContent {
  font-size: 14px;
  color: #a0a0a0;
}

.swiper-pagination-bullet-active {
  background: $mainColor !important;
}

.pt-wrap {
  min-height: 100vh;
  padding: 30px 16px 20px;
  h3 {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
  }
  h4 {
    font-size: 14px;
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 10px;
  }
  p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 10px;
  }
}
.errorText {
  color: $mainColor;
}

.el-message-box__message p {
  word-wrap: break-word;
  display: block;
  word-break: break-all;
}
* {
  -webkit-tap-highlight-color: transparent;
}

.search-wrap .layer-content,
.admin-wrap {
  padding-bottom: 0px;
  .loading {
    margin: 0 auto 20px;
  }
  .loading-text {
    font-size: 12px;
    text-align: center;
    margin: 0 auto 20px;
    color: #999;
  }
}
.admin-wrap {
  .loading,
  .loading-text {
    margin: 20px auto 20px;
  }
}
.el-skeleton__item {
  background: #f0f2f5;
  border-radius: 4px;
  display: inline-block;
  height: 16px;
  width: 100%;
}
.el-skeleton__p {
  width: 100%;
}

.info-notify.el-button {
  padding: 0 10px;
  height: 22px !important;
  border-radius: 16px 16px 16px 16px !important;
  border: 1px solid #333333;
  font-size: 12px;
  color: #333333;
  font-weight: 400;
  line-height: 22px;
  &.isNotify {
    background: $mainColor !important;
    color: #ffffff;
    border-color: $mainColor !important;
    &:hover {
      background: $mainColor !important;
      color: #ffffff;
      border-color: $mainColor !important;
    }
  }
  &:hover {
    background-color: #ffffff !important;
    border-color: #333333 !important;
    color: #333333;
  }
}

.info-reserve.el-button {
  padding: 0 10px;
  height: 24px !important;
  border-radius: 16px 16px 16px 16px !important;
  border: 1px solid #333333;
  font-size: 12px;
  color: #333333;
  font-weight: 400;
  line-height: 24px;
  &.isReserve {
    background: $mainColor !important;
    color: #ffffff;
    border-color: $mainColor !important;
    &:hover {
      background: $mainColor !important;
      color: #ffffff;
      border-color: $mainColor !important;
    }
  }
  &:hover {
    background-color: #ffffff !important;
    border-color: #333333 !important;
    color: #333333;
  }
}

.category-boxs-bg {
  background-color: #fff;
  .category-boxs {
    background: linear-gradient(180deg, #fff, #fff0 2.666667rem) !important;
    margin: 0;
    min-height: calc(100vh - 304px);
  }
}

@for $i from 10 through 40 {
  .fs#{$i} {
    font-size: 1px * $i;
  }
  .fs#{$i}_i {
    font-size: 1px * $i !important;
  }
}
.admin-boxs-bg {
  background-color: #f7f7f7;
}
.admin-wrap {
  background: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0) 100px);
  min-height: calc(100vh - 44px);
}
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-message {
  max-width: 90% !important;
  width: max-content !important;
  min-width: 130px;
  .el-message__content {
    width: 100%;
    min-width: 62px;
  }
}
.c_0A8800_i {
  color: #0a8800 !important;
}
.c_0A8800 {
  color: #0a8800;
}
.c_e6a237 {
  color: #e6a237;
}

.tab {
  border: 1px solid #e8e8e8;
  .tr {
    display: flex;
    & + .tr {
      border-top: 1px solid #e8e8e8;
    }
  }
  .th {
    background: #f4f4f4;
  }
  .th,
  .td {
    width: 50%;
    height: 28px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #666;
    & + .th,
    & + .td {
      border-left: 1px solid #e8e8e8;
    }
  }
}
.detail-drawer {
  border-radius: 10px 10px 0 0;
  .el-input-number__increase:hover ~ .el-input:not(.is-disabled) .el-input__wrapper {
    box-shadow: 0 0 0 0.026667rem #e8e8e8 inset;
  }
  .title {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
  }
  p {
    color: #7a8599;
    line-height: 30px;
    span {
      color: #334463;
      margin-left: 10px;
    }
  }

  .footer-btn,
  .inp-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
  }
}

/* 重置 Toast 样式，确保不被 Popup 影响 */
.my-custom-toast.van-toast {
  z-index: 2020 !important;
  background: var(--van-toast-background);
  box-sizing: content-box;
  transition: all var(--van-duration-fast);
  width: var(--van-toast-default-width);
  max-width: var(--van-toast-max-width);
  /* 其他需要重置的样式 */
}

.van-dialog {
  top: 45% !important;
  width: var(--van-dialog-width) !important;
}

.news-nav-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  a {
    border: 1px solid #e8e8e8;
    color: #333;
    border-radius: 3px;
    padding: 0 10px;
    font-size: 14px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    & + a {
      margin-left: 12px;
    }
    &.current {
      background: $mainColor;
      border-color: $mainColor;
      color: #fff;
    }
  }
}