food/src/styles/index.scss

@import "@/styles/theme.scss";
@import '@/styles/element-ui.scss';
@import '@/styles/transition.scss';

//通用
* {
  margin: 0px;
  padding: 0px;
}

html {
  height: 100%;
}

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  font-size: 14px;
  color: $maintext-color;
}


*,
*:before,
*:after {
  box-sizing: inherit;
}

.router-link-active {
  color: $maintext-color;
  text-decoration: none !important;
}

a {
  text-decoration: none !important;
}

a:focus,
a:active {
  outline: none !important;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

label {
  font-weight: 700;
}

.disno{
  display: none;
}
.z90{
  z-index: 90;
}

.animation {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

// main-container global css
.app-container {
  padding: 20px;
  background-color: #fefefe;
  height: 100%;
}

.el-button {
  font-size: 16px !important;
}

.el-drawer {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
/* 大于480px时的圆角样式 */
.el-drawer-large {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

/* 小于480px时的圆角样式 */
.el-drawer-small {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

//mapboxgl
.mapboxgl-ctrl-bottom-left a {
  display: none !important;
}

.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
  display: none !important;
}


//public
.borderLN {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.borderRN {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.l {
  float: left !important;
}

.r {
  float: right !important;
}

.clearB {
  clear: both !important;
}

.border {
  border: 1px solid #DCDFE6;
}

.mainFontColor {
  color: #303133 !important;
}

.normalFontColor {
  color: #606266 !important;
}

.secondaryFontColor {
  color: #909399 !important;
}

.seatFontColor {
  color: #C0C4CC !important;
}

.fc {
  text-align: center;
}

.fr {
  text-align: right;
}

.vm {
  vertical-align: middle;
}

.bg-b {
  background-color: $brand-color !important;
}

.bg-white {
  background-color: $white-color !important;
}

.bg-grey {
  background-color: $holdtext-color !important;
}

.fc-b {
  color: $brand-color !important;
}

.fc-s {
  color: $success-color !important;
}

.fc-w {
  color: $warning-color !important;
}

.fc-m {
  color: $maintext-color !important;
}

.fc-i {
  color: $holdtext-color !important;
}

.border-b-n {
  border-bottom: none !important;
}

.border-t-n {
  border-top: none !important;
}

.border-l-n {
  border-left: none !important;
}

.border-r-n {
  border-right: none !important;
}

.border-n {
  border: none !important;
}


.fb {
  font-weight: bold;
}

.el-row {
  margin-top: 10px;

  .el-header {
    color: $maintext-color;
    padding: 0px;
    background-color: $border4-color;
  }

  .el-main {
    padding: 0px;
  }
}

/* 当屏幕宽度小于等于420px时 */
@media (max-width: 420px) {
  .el-dialog {
    width: 90% !important; /* 根据需要调整宽度 */
    max-width: 360px !important; /* 根据需要设置最大宽度 */
  }
  
  .el-message-box {
    width: 90% !important; /* 调整宽度以适应小屏幕 */
    max-width: 360px !important; /* 根据需要设置最大宽度 */
  }
}
/*隐藏声音api 的弹出框*/
.rvNotification {
  display: none;
}

.flex {
  display: flex;
}

//垂直排列
.column {
  flex-direction: column;
}

//主轴左对齐
.ml {
  justify-content: flex-start;
}

//主轴右对齐
.mr {
  justify-content: flex-end;
}

//主轴两端对齐
.msb {
  justify-content: space-between;
}

//主轴 居中对齐
.mc {
  justify-content: center;
}

//主轴 等距
.mse {
  justify-content: space-evenly;
}

//主轴 元素两侧平分
.msa {
  justify-content: space-around;
}

//交叉轴 填满
.man {
  align-items: normal;
}

//交叉轴 上对齐
.mu {
  align-items: flex-start;
}

//交叉轴 下对齐
.md {
  align-items: flex-end;
}

//交叉轴 居中对齐
.mac {
  align-items: center;
}

//交叉轴 第一行最高的基线对齐
.mub {
  align-items: baseline;
}


.flex1 {
  flex: 1;
}

.flex2 {
  flex: 2;
}

.flex3 {
  flex: 3;
}

.flex4 {
  flex: 4;
}

.rad-c {
  border-radius: 50%;
}

.rad32 {
  border-radius: 32px;
}

.rad16 {
  border-radius: 16px;
}

.rad8 {
  border-radius: 8px;
}

.rad4 {
  border-radius: 4px;
}

.rad2 {
  border-radius: 2px;
}

.ofh {
  overflow: hidden;
}

.ofa {
  overflow: auto;
}

.no-select {
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Standard */
}

//m-l-0 p-l-0 马根 帕丁
$position: (
  "t":"top",
  "b":"bottom",
  "l":"left",
  "r":"right",
);
$type: (
  "p":"padding",
  "m":"margin"
);

@each $item in $type {
  @each $list in $position {
    @for $i from 0 through 20 {
      $val: $i * 1;

      .#{nth($item,1)}-#{nth($list,1)}-#{$val} {
        #{nth($item,2)}-#{nth($list,2)}: #{$val}px !important;
      }
    }

    @for $i from 4 through 20 {
      $val: $i * 5;

      .#{nth($item,1)}-#{nth($list,1)}-#{$val} {
        #{nth($item,2)}-#{nth($list,2)}: #{$val}px !important;
      }
    }
  }
}

//m-0 p-0 马根 帕丁
$type: (
  "p":"padding",
  "m":"margin"
);

@each $item in $type {
  @for $i from 0 through 100 {
    $val: $i * 1;

    .#{nth($item,1)}-#{$val} {
      #{nth($item,2)}: #{$val}px !important;
    }
  }
}

//w-10 h-10 宽度百分比 高度百分比
$type: (
  "w":"width",
  "h":"height"
);
$mark: (
  "%"
);

@each $item in $type {
  @for $i from 0 through 10 {
    $val: $i * 10;

    .#{nth($item,1)}-#{$val} {
      #{nth($item,2)}: #{$val}#{$mark} !important;
    }
  }
}

//w-10px h-10px 宽度px 高度px 参数10 20 30...
$type: (
  "w":"width",
  "h":"height"
);

@each $item in $type {
  @for $i from 1 through 80 {
    $val: $i*10;

    .#{nth($item,1)}-#{$val}px {
      #{nth($item,2)}: #{$val}px !important;
    }
  }
}

//f-s-12 设置字体大小  1-50  60-200   50之前1递增 60以后10递增
$type: (
  "f-s":"font-size",
);

@each $item in $type {
  @for $val from 1 through 50 {
    .#{nth($item,1)}-#{$val} {
      #{nth($item,2)}: #{$val}px !important;
    }
  }

  @for $i from 6 through 20 {
    $val: $i*10;

    .#{nth($item,1)}-#{$val} {
      #{nth($item,2)}: #{$val}px !important;
    }
  }
}

//l-h-50 字体行高 12-100 1递增
$type: (
  "l-h":"line-height",
);

@each $item in $type {
  @for $val from 12 through 100 {
    .#{nth($item,1)}-#{$val} {
      #{nth($item,2)}: #{$val}px !important;
    }
  }
}