/* 自定义字体 */ @font-face { font-family: "shuHeiTi"; src: url("/static/Font/shuHeiTi.ttf") format("truetype"); font-display: swap; } /* 定义 DIN-Bold 字重 */ @font-face { font-family: "DINPro"; /* 自定义字体名称(后续引用时需一致) */ src: url("/static/Font/DIN-Bold.otf") format("opentype"); /* 字体文件路径(根据项目结构调整) */ font-weight: 700; /* 对应 Bold 字重(700 表示粗体) */ font-style: normal; } /* 定义 DIN-Regular 字重 */ @font-face { font-family: "DINPro"; /* 与上方字体名称一致,实现“同一字体族”的不同字重 */ src: url("/static/Font/DIN-Regular.otf") format("opentype"); font-weight: 400; /* 对应 Regular 字重(400 表示常规) */ font-style: normal; } /* 定义 DIN-Medium 字重(若有) */ @font-face { font-family: "DINPro"; src: url("/static/Font/DINPro-Medium.otf") format("opentype"); font-weight: 500; /* 对应 Medium 字重(500 表示中等粗体) */ font-style: normal; } /* 粗体文本(自动匹配 DIN-Bold) */ .num_bold_text { font-weight: 700; font-family: "DINPro"; } /* 常规文本(自动匹配 DIN-Regular) */ .num_regular_text { font-weight: 400; font-family: "DINPro"; } /* 中等粗体文本(自动匹配 DINPro-Medium) */ .num_medium_text { font-weight: 500; font-family: "DINPro"; } /* 重置样式 */ page { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif; font-size: 28rpx; line-height: 1.5; color: #333; background-color: #f5f5f5; } .picker-view { line-height: normal !important; } .picker-view-column { line-height: normal !important; } /* 通用布局 */ .flex { display: flex; } .flex-column { display: flex; flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } /* 对齐方式 */ .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .align-start { align-items: flex-start; } .align-end { align-items: flex-end; } .align-center { align-items: center; } .align-stretch { align-items: stretch; } /* 间距 */ .m-10 { margin: 10rpx; } .m-20 { margin: 20rpx; } .m-30 { margin: 30rpx; } .m-40 { margin: 40rpx; } .mt-10 { margin-top: 10rpx; } .mt-20 { margin-top: 20rpx; } .mt-30 { margin-top: 30rpx; } .mt-40 { margin-top: 40rpx; } .mb-10 { margin-bottom: 10rpx; } .mb-20 { margin-bottom: 20rpx; } .mb-30 { margin-bottom: 30rpx; } .mb-40 { margin-bottom: 40rpx; } .ml-10 { margin-left: 10rpx; } .ml-20 { margin-left: 20rpx; } .ml-30 { margin-left: 30rpx; } .ml-40 { margin-left: 40rpx; } .mr-10 { margin-right: 10rpx; } .mr-20 { margin-right: 20rpx; } .mr-30 { margin-right: 30rpx; } .mr-40 { margin-right: 40rpx; } .p-10 { padding: 10rpx; } .p-20 { padding: 20rpx; } .p-30 { padding: 30rpx; } .p-40 { padding: 40rpx; } .pt-10 { padding-top: 10rpx; } .pt-20 { padding-top: 20rpx; } .pt-30 { padding-top: 30rpx; } .pt-40 { padding-top: 40rpx; } .pb-10 { padding-bottom: 10rpx; } .pb-20 { padding-bottom: 20rpx; } .pb-30 { padding-bottom: 30rpx; } .pb-40 { padding-bottom: 40rpx; } .pl-10 { padding-left: 10rpx; } .pl-20 { padding-left: 20rpx; } .pl-30 { padding-left: 30rpx; } .pl-40 { padding-left: 40rpx; } .pr-10 { padding-right: 10rpx; } .pr-20 { padding-right: 20rpx; } .pr-30 { padding-right: 30rpx; } .pr-40 { padding-right: 40rpx; } .pr-240 { padding-right: 240rpx; } /* 文本样式 */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-primary { color: #007aff; } .text-success { color: #4cd964; } .text-warning { color: #f0ad4e; } .text-danger { color: #dd524d; } .text-info { color: #909399; } .text-sm { font-size: 24rpx; } .text-md { font-size: 28rpx; } .text-lg { font-size: 32rpx; } .text-xl { font-size: 36rpx; } .text-bold { font-weight: bold; } .text-normal { font-weight: normal; } /* 背景颜色 */ .bg-white { background-color: #ffffff; } .bg-primary { background-color: #007aff; } .bg-success { background-color: #4cd964; } .bg-warning { background-color: #f0ad4e; } .bg-danger { background-color: #dd524d; } .bg-info { background-color: #909399; } .bg-gray { background-color: #f5f5f5; } /* 边框 */ .border { border-width: 1rpx; border-style: solid; border-color: #e5e5e5; } .border-top { border-top-width: 1rpx; border-top-style: solid; border-top-color: #e5e5e5; } .border-bottom { border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #e5e5e5; } .border-left { border-left-width: 1rpx; border-left-style: solid; border-left-color: #e5e5e5; } .border-right { border-right-width: 1rpx; border-right-style: solid; border-right-color: #e5e5e5; } /* 圆角 */ .rounded { border-radius: 8rpx; } .rounded-lg { border-radius: 16rpx; } .rounded-xl { border-radius: 24rpx; } .rounded-circle { border-radius: 50%; } /* 阴影 */ .shadow { box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .shadow-lg { box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); } /* 定位 */ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } /* 平台特定样式 */ /* #ifdef H5 */ /* 适配H5端的安全区域 */ .safe-area-inset-bottom { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } /* #endif */ /* 常用组件样式 */ /* 按钮 */ .btn { display: flex; align-items: center; justify-content: center; padding: 20rpx 40rpx; border-radius: 8rpx; font-size: 28rpx; line-height: 1.5; text-align: center; } .btn-primary { background-color: #007aff; color: #ffffff; } .btn-success { background-color: #4cd964; color: #ffffff; } .btn-warning { background-color: #f0ad4e; color: #ffffff; } .btn-danger { background-color: #dd524d; color: #ffffff; } .btn-info { background-color: #909399; color: #ffffff; } /* 卡片 */ .card { background-color: #ffffff; border-radius: 8rpx; padding: 20rpx; margin: 20rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } /* 列表 */ .list-item { display: flex; align-items: center; padding: 20rpx; background-color: #ffffff; border-bottom: 1rpx solid #e5e5e5; } /* 加载状态 */ .loading { display: flex; align-items: center; justify-content: center; padding: 20rpx; } .loading-text { margin-left: 10rpx; color: #909399; font-size: 24rpx; } /* 空状态 */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40rpx; } .empty-image { width: 200rpx; height: 200rpx; margin-bottom: 20rpx; } .empty-text { color: #909399; font-size: 28rpx; } .text-overflow { /* #ifdef MP-WEIXIN || APP-PLUS */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; /* #endif */ /* #ifdef H5 */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; /* #endif */ } .text-overflow-nvue { /* #ifdef APP-PLUS */ lines: 2; text-overflow: ellipsis; /* #endif */ /* #ifdef MP-WEIXIN */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; /* #endif */ /* #ifdef H5 */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; /* #endif */ } .white-space-nowrap { width: 300rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-overflow-1 { /* #ifdef MP-WEIXIN || APP-PLUS */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; /* #endif */ /* #ifdef H5 */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; /* #endif */ } .text-overflow-nvue1 { /* height: 76rpx; */ /* #ifdef APP-PLUS */ lines: 1; text-overflow: ellipsis; /* #endif */ /* #ifdef MP-WEIXIN */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; /* #endif */ /* #ifdef H5 */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; /* #endif */ } .box-cont { background-color: #fff; margin: 24rpx; box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.05); } .btn-box { height: 64rpx; text-align: center; line-height: 64rpx; background-color: #FF4767; border-radius: 32rpx; position: fixed; left: 24rpx; bottom: 68rpx; right: 24rpx; z-index: 999; } .btn-text { font-size: 28rpx; font-weight: 500; color: #ffffff; } .agree-btn { width: 32rpx; height: 32rpx; } .fixed-box { padding: 32rpx 24rpx; background-color: #ffffff; position: absolute; left: 0; bottom: 0; right: 0; z-index: 9999; /* #ifdef APP-PLUS || MP-WEIXIN */ padding-bottom: calc(32rpx + constant(safe-area-inset-bottom)); padding-bottom: calc(32rpx + env(safe-area-inset-bottom)); /* #endif */ } .fixed-btn { height: 80rpx; background: #FF4767; border-radius: 40rpx; display: flex; align-items: center; justify-content: center; } .fixed-text { font-size: 28rpx; color: #ffffff; font-weight: 500; } .arrow-right { width: 32rpx; height: 32rpx; } .permission { position: fixed; top: 0; left: 24rpx; right: 24rpx; background-color: #fff; border-radius: 20rpx; padding: 24rpx; z-index: 9; box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.05); opacity: 0; transition: all 0.3s; visibility: hidden; } .per-tit { font-size: 32rpx; font-weight: 700; color: #007aff; } .per-cont { font-size: 28rpx; color: #333333; } ::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; color: transparent; } .flex-row-center-between{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .flex-row-start-between{ display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; } .flex-row-center-center{ display: flex; flex-direction: row; align-items: center; justify-content: center; } .flex-row-center{ display: flex; flex-direction: row; align-items: center; } .flex-row-start{ display: flex; flex-direction: row; align-items: flex-start; } .flex-row-end-between{ display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; }