/* * @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; }