693 lines
11 KiB
CSS
693 lines
11 KiB
CSS
/* 自定义字体 */
|
||
@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;
|
||
} |