fanghuayuexuan/assets/style/global.scss

/*
 * @Author: jmy
 * @Date: 2025-12-31 12:02:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-12-13 16:48:17
 * @Description: 
*/
/* 设置字体为苹方（PingFang SC），若系统无该字体则再次回退到 PingFang SC；强制正常字形；禁止文本大小写转换 */
view,
text {
  font-family: PingFang SC, PingFang SC;
  font-style: normal;
  text-transform: none;
}
view{
  box-sizing: border-box;
}

// 导航栏头部
.uni-navbar__header {
  display: flex;
  align-items: center;
  padding: 0 24rpx !important;
  box-sizing: border-box;
}

.uni-navbar__header-container {
  padding: 0 !important;
}
.scs-headr-default {
		width: 73%;
	}
/* #ifndef APP-NVUE */
/* Display */
.flex {
  display: flex;
  display: -webkit-flex;
}

/* Flex Direction */
/* 主轴方向：水平，起点在左侧 */
.flex-row {
  flex-direction: row;
  -webkit-flex-direction: row;
}

/* 主轴方向：水平，起点在右侧 */
.flex-row-reverse {
  flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
}

/* 主轴方向：垂直，起点在上方 */
.flex-column {
  flex-direction: column;
  -webkit-flex-direction: column;
}

/* 主轴方向：垂直，起点在下方 */
.flex-column-reverse {
  flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
}

/* Flex Wrap */
/* 主轴方向换行：空间不足时自动换行*/
.flex-wrap {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}

/*主轴方向不换行：所有子项强制单行/列*/
.flex-nowrap {
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
}

/*主轴方向反向换行：空间不足时自动换行，且行序反转*/
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
  -webkit-flex-wrap: wrap-reverse;
}

/* Justify Content */
/*主轴对齐：子项在主轴起点对齐*/
.justify-start {
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
}

/*主轴对齐：子项在主轴起点对齐*/
.justify-center {
  justify-content: center;
  -webkit-justify-content: center;
}

/* 主轴对齐：子项在主轴终点对齐 */
.justify-end {

  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}

/* 主轴对齐：首尾子项贴边，其余子项间距相等 */
.justify-between {

  justify-content: space-between;
  -webkit-justify-content: space-between;
}

/* 主轴对齐：每个子项两侧的间距相等，首尾子项与容器边缘间距为中间间距的一半 */
.justify-around {

  justify-content: space-around;
  -webkit-justify-content: space-around;
}


/* 主轴对齐：项目之间与两端间距完全相等 */
.justify-evenly {
  justify-content: space-evenly;
  -webkit-justify-content: space-evenly;
}

/* Align Items */
/* 交叉轴对齐：子项顶部对齐 */
.items-start {
  align-items: flex-start;
  -webkit-align-items: flex-start;
}

/* 交叉轴对齐：子项居中对齐 */
.items-center {
  align-items: center;
  -webkit-align-items: center;
}

/* 交叉轴对齐：子项底部对齐 */
.items-end {
  align-items: flex-end;
  -webkit-align-items: flex-end;
}

/* 交叉轴对齐：子项拉伸填满容器高度 */
.items-stretch {
  align-items: stretch;
  -webkit-align-items: stretch;
}

/* 交叉轴对齐：子项基线对齐 */
.items-baseline {
  align-items: baseline;
  -webkit-align-items: baseline;
}




/* 快捷 flex 值：占满剩余空间 */
.flex-1 {
  flex: 1;
  -webkit-flex: 1;
}

/* 自动伸缩：根据内容决定尺寸，可伸可缩 */
.flex-auto {
  flex: auto;
  -webkit-flex: auto;
}

/* 初始尺寸：使用 flex-basis 定义的初始大小，可伸可缩 */
.flex-initial {
  flex: initial;
  -webkit-flex: initial;
}

/* 不伸缩：固定尺寸，不参与分配剩余空间 */
.flex-none {
  flex: none;
  -webkit-flex: none;
}

/* 禁止放大 */
.flex-grow-0 {
  flex-grow: 0;
  -webkit-flex-grow: 0;
}

/* 允许放大并占满剩余空间 */
.flex-grow-1 {
  flex-grow: 1;
  -webkit-flex-grow: 1;
}

/* 禁止缩小 */
.flex-shrink-0 {
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}

/* 允许缩小 */
.flex-shrink-1 {
  flex-shrink: 1;
  -webkit-flex-shrink: 1;
}

/* #endif */


.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

/* 文本对齐方式 */
.text-left {
  text-align: left;
}

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

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.text-start {
  text-align: start;
}

.text-end {
  text-align: end;
}
.w-100vw {
  width: 100vw;
}
.h-100vh {
  height: 100vh;
}


.w-all {
  width: 100%;
}
.h-all {
  height: 100%;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
/* Overflow */
.overflow-visible {
  overflow: visible;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-auto {
  overflow: auto;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

.inline-block {
  display: inline-block;
}
.m-auto {
  margin:0 auto;
}


/*  (-500 to 1000px, all numbers, auto convert to rpx: px * 2 = rpx) */
@for $i from -500 through 1000 {
  $size: $i * 2rpx;

  /* top */
  .top-#{$i} {
    top: $size;
  }

  /* left */
  .left-#{$i} {
    left: $size;
  }

  /* right */
  .right-#{$i} {
    right: $size;
  }

  /* bottom */
  .bottom-#{$i} {
    bottom: $size;
  }
}

/* z-index (-100 to 10000 all numbers) */
@for $i from -100 through 10000 {
  .zi-#{$i} {
    z-index: $i;
  }
}

/* Font sizes (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
@for $i from 1 through 100 {
  $size: $i * 2rpx;

  .fs-#{$i} {
    font-size: $size;
  }
}
/* line height (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
@for $i from 1 through 100 {
  $size: $i * 2rpx;

  .lh-#{$i} {
    line-height: $size;
  }
}
/* Margins (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
@for $i from -500 through 500 {
  $size: $i * 2rpx;

  /* Margin */
  .m-#{$i} {
    margin: $size;
  }

  /* Margin top */
  .mt-#{$i} {
    margin-top: $size;
  }

  /* Margin right */
  .mr-#{$i} {
    margin-right: $size;
  }

  /* Margin bottom */
  .mb-#{$i} {
    margin-bottom: $size;
  }

  /* Margin left */
  .ml-#{$i} {
    margin-left: $size;
  }

  /* Margin horizontal */
  .mx-#{$i} {
    margin-left: $size;
    margin-right: $size;
  }

  /* Margin vertical */
  .my-#{$i} {
    margin-top: $size;
    margin-bottom: $size;
  }
}

/* Paddings (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
@for $i from 1 through 100 {
  $size: $i * 2rpx;

  /* Padding */
  .p-#{$i} {
    padding: $size;
  }

  /* Padding top */
  .pt-#{$i} {
    padding-top: $size;
  }

  /* Padding right */
  .pr-#{$i} {
    padding-right: $size;
  }

  /* Padding bottom */
  .pb-#{$i} {
    padding-bottom: $size;
  }

  /* Padding left */
  .pl-#{$i} {
    padding-left: $size;
  }

  /* Padding horizontal */
  .px-#{$i} {
    padding-left: $size;
    padding-right: $size;
  }

  /* Padding vertical */
  .py-#{$i} {
    padding-top: $size;
    padding-bottom: $size;
  }
}

/* Gaps (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
/* #ifndef APP-NVUE */
@for $i from 1 through 100 {
  $size: $i * 2rpx;

  .gap-#{$i} {
    gap: $size;
  }
}

/* #endif */

/* Widths (1px to 375px, all numbers, auto convert to rpx: px * 2 = rpx) */
@for $i from 1 through 1000 {
  $size: $i * 2rpx;

  .w-#{$i} {
    width: $size;
  }
}

/* Heights (1px to 375px, all numbers, auto convert to rpx: px * 2 = rpx) */
@for $i from 1 through 1000 {
  $size: $i * 2rpx;

  .h-#{$i} {
    height: $size;
  }
}

/* Border Radius (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
@for $i from 1 through 100 {
  $size: $i * 2rpx;

  .rounded-#{$i} {
    border-radius: $size;
  }
}
@for $i from 1 through 100 {
  $size: $i * 2rpx;

  .rounded-t-#{$i} {
    border-top-left-radius: $size;
    border-top-right-radius: $size;
  }
}
@for $i from 1 through 100 {
  $size: $i * 2rpx;

  .rounded-b-#{$i} {
    border-bottom-left-radius: $size;
    border-bottom-right-radius: $size;
  }
}

/* Line Height (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
@for $i from 1 through 100 {
  $size: $i * 2rpx;

  .lh-#{$i} {
    line-height: $size;
  }
}

/* Border Widths (0.5px to 20px, auto convert to rpx: px * 2 = rpx) */
// 0.5px border (1rpx)
.border-w-05 {
  border-width: 1rpx;
}
.border-t-w-05 {
  border-top-width: 1rpx;
}
.border-r-w-05 {
  border-right-width: 1rpx;
}
.border-b-w-05 {
  border-bottom-width: 1rpx;
}
.border-l-w-05 {
  border-left-width: 1rpx;
}

//borders 1px to 20px
@for $i from 1 through 20 {
  $size: $i * 2rpx;

  /* all borders */
  .border-w-#{$i} {
    border-width: $size;
  }

  /* border top */
  .border-t-w-#{$i} {
    border-top-width: $size;
  }

  /* border right */
  .border-r-w-#{$i} {
    border-right-width: $size;
  }

  /* border bottom */
  .border-b-w-#{$i} {
    border-bottom-width: $size;
  }

  /* border left */
  .border-l-w-#{$i} {
    border-left-width: $size;
  }
}

/* Border Styles */
.border-solid {
  border-style: solid;
}
.border-dashed {
  border-style: dashed;
}
.border-dotted {
  border-style: dotted;
}
.border-double {
  border-style: double;
}
.border-none {
  border-style: none;
}

/* Border Directions */
.border {
  border-style: solid;
  border-width: 1rpx;
}
.border-t {
  border-top-style: solid;
  border-top-width: 1rpx;
}
.border-r {
  border-right-style: solid;
  border-right-width: 1rpx;
}
.border-b {
  border-bottom-style: solid;
  border-bottom-width: 1rpx;
}
.border-l {
  border-left-style: solid;
  border-left-width: 1rpx;
}

/* Clear Border Directions */
.border-t-0 {
  border-top-width: 0;
}
.border-r-0 {
  border-right-width: 0;
}
.border-b-0 {
  border-bottom-width: 0;
}
.border-l-0 {
  border-left-width: 0;
}
.border-0 {
  border-width: 0;
}

// 定义颜色列表
$colors: (
  '000000', '333333', '666666', '999999', 'CCCCCC', 'FFFFFF',
  'FF0000', '00FF00', '0000FF', 'FFFF00', 'FF00FF', '00FFFF',
  'FFA500', '800080', 'FFC0CB', 'A52A2A', '808080', 'D3D3D3',
  'F5F5F5', 'FAFAFA', 'F8F9FA', 'E9ECEF', 'DEE2E6', 'CED4DA',
  'ADB5BD', '6C757D', '495057', '343A40', '212529', '007BFF',
  '0069D9', '0056B3', '004085', '002752', '28A745', '218838',
  '1E7E34', '155724', '0F3D1F', 'DC3545', 'C82333', 'BD2130',
  'A71E2A', '6E001D', 'FFC107', 'E0A800', 'D39E00', 'B8860B',
  '6C5600', '17A2B8', '138496', '117A8B', '0C5460', '062B36',
  'F5F7FA', 'EEEEEE', '02B176', 'FA341E', 'D46C0D', 'FFA599',
  'FF4B33', '38D97D', 'C39760', 'ED4B17', 'F9B71B', 'FFE600',
  'FFF4E8'
);

// 文字颜色类 - 标准化格式
@each $hex in $colors {
  .text-#{$hex} {
    color: unquote('#')#{$hex};
  }
}

// 背景颜色类
@each $hex in $colors {
  .bg-#{$hex} {
    background-color: unquote('#')#{$hex};
  }
}

// 边框颜色类
@each $hex in $colors {
  .border-#{$hex} {
    border-color: unquote('#')#{$hex};
  }
}

/* 主题色彩快捷类 */
.text-blue {
  color: #007bff;
}

.text-green {
  color: #28a745;
}

.text-red {
  color: #dc3545;
}

.text-yellow {
  color: #ffc107;
}

.text-cyan {
  color: #17a2b8;
}

.text-gray {
  color: #f8f9fa;
}

.text-black {
  color: #000000;
}

.text-white {
  color: #ffffff;
}

.bg-blue {
  background-color: #007bff;
}

.bg-green {
  background-color: #28a745;
}

.bg-red {
  background-color: #dc3545;
}

.bg-yellow {
  background-color: #ffc107;
}

.bg-cyan {
  background-color: #17a2b8;
}

.bg-gray {
  background-color: #f8f9fa;
}

.bg-black {
  background-color: #000000;
}

.bg-white {
  background-color: #ffffff;
}
.bg-img{
  background-color: rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease-in-out;// 图片加载过渡效果
}

/* 透明度类 */
@for $i from 1 through 9 {
  .opacity-#{$i} {
    opacity: $i * 0.1;
  }
}

.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 1;
}