503 lines
7.8 KiB
CSS
503 lines
7.8 KiB
CSS
/* 公共样式表 */
|
|
page {
|
|
min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
|
font-size: 28rpx;
|
|
background-color: #FFFFFF;
|
|
color: #333333;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 安全区域适配 - 通用解决方案 */
|
|
/* #ifdef MP-WEIXIN */
|
|
.safe-area-container {
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.safe-area-top {
|
|
padding-top: env(safe-area-inset-top);
|
|
}
|
|
|
|
.safe-area-left {
|
|
padding-left: env(safe-area-inset-left);
|
|
}
|
|
|
|
.safe-area-right {
|
|
padding-right: env(safe-area-inset-right);
|
|
}
|
|
|
|
.safe-area-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.safe-area-horizontal {
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
}
|
|
|
|
.safe-area-vertical {
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
/* #endif */
|
|
|
|
/* 禁止页面回弹 */
|
|
/* html,
|
|
body,
|
|
page {
|
|
overscroll-behavior: none;
|
|
overflow: hidden;
|
|
} */
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.page-body {
|
|
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
|
/* width: 100%; */
|
|
/* height: 100%; */
|
|
}
|
|
|
|
body,
|
|
html {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* 布局调整 */
|
|
|
|
/* 点击动效 */
|
|
/* 缩小 */
|
|
.button-click {
|
|
transition: transform 0.1s ease;
|
|
}
|
|
|
|
.button-click:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* 背景变色 */
|
|
.btn-light {
|
|
color: white;
|
|
border-radius: 16rpx;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.btn-light:active {
|
|
background-color: rgba(189, 197, 254, 0.15);
|
|
}
|
|
|
|
|
|
.btn-incline {
|
|
transition: transform 0.2s ease;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.btn-incline:active {
|
|
transform: perspective(600px) rotateY(6deg) rotateX(3deg);
|
|
}
|
|
|
|
.btn-feel {
|
|
transition: transform 0.2s ease;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.btn-feel:active {
|
|
transform: perspective(600px) rotateX(6deg) scale(0.98);
|
|
}
|
|
|
|
.press-button {
|
|
padding: 10px 20px;
|
|
background: #3A4750;
|
|
/* 深灰蓝 */
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
|
/* box-shadow: 0 4px 0 #2C3E50; */
|
|
}
|
|
|
|
.press-button:active {
|
|
transform: scale(0.95) translateY(2px);
|
|
/* box-shadow: 0 2px 0 #1C2833; */
|
|
}
|
|
|
|
/* 动画效果 */
|
|
.btn-shaky:active {
|
|
animation: shakeScale 0.6s;
|
|
}
|
|
|
|
@keyframes shakeScale {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
10% {
|
|
transform: scale(0.9) rotate(-3deg);
|
|
}
|
|
|
|
20% {
|
|
transform: scale(1.05) rotate(3deg);
|
|
}
|
|
|
|
30% {
|
|
transform: scale(0.95) rotate(-3deg);
|
|
}
|
|
|
|
40% {
|
|
transform: scale(1.02) rotate(3deg);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(0.98) rotate(-2deg);
|
|
}
|
|
|
|
60% {
|
|
transform: scale(1.01) rotate(2deg);
|
|
}
|
|
|
|
70% {
|
|
transform: scale(0.99) rotate(-1deg);
|
|
}
|
|
|
|
80% {
|
|
transform: scale(1.005) rotate(1deg);
|
|
}
|
|
|
|
90% {
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
/* 控制hover */
|
|
.opctiy_8 {
|
|
opacity: 0.8 !important;
|
|
}
|
|
|
|
.opctiy_7 {
|
|
opacity: 0.7 !important;
|
|
}
|
|
|
|
.opctiy_6 {
|
|
opacity: 0.6 !important;
|
|
}
|
|
|
|
.opctiy_5 {
|
|
opacity: 0.5 !important;
|
|
}
|
|
|
|
.opctiy_4 {
|
|
opacity: 0.4 !important;
|
|
}
|
|
|
|
.opctiy_3 {
|
|
opacity: 0.3 !important;
|
|
}
|
|
|
|
.opctiy_2 {
|
|
opacity: 0.2 !important;
|
|
}
|
|
|
|
.opctiy_1 {
|
|
opacity: 0.1 !important;
|
|
}
|
|
|
|
/* 控制文字大小 */
|
|
.fs_10 {
|
|
font-size: 20rpx !important;
|
|
}
|
|
|
|
.fs_12 {
|
|
font-size: 24rpx !important;
|
|
}
|
|
|
|
.fs_14 {
|
|
font-size: 28rpx !important;
|
|
}
|
|
|
|
.fs_16 {
|
|
font-size: 32rpx !important;
|
|
}
|
|
|
|
.fs_18 {
|
|
font-size: 36rpx !important;
|
|
}
|
|
|
|
.fs_20 {
|
|
font-size: 40rpx !important;
|
|
}
|
|
|
|
.fs_22 {
|
|
font-size: 44rpx !important;
|
|
}
|
|
|
|
.fs_24 {
|
|
font-size: 48rpx !important;
|
|
}
|
|
|
|
.fs_26 {
|
|
font-size: 52rpx !important;
|
|
}
|
|
|
|
.fs_28 {
|
|
font-size: 56rpx !important;
|
|
}
|
|
|
|
.fs_30 {
|
|
font-size: 60rpx !important;
|
|
}
|
|
|
|
.fs_32 {
|
|
font-size: 64rpx !important;
|
|
}
|
|
|
|
/* 控制字体粗细 */
|
|
.fw_blod {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 控制字体颜色 */
|
|
.color_D16B3F {
|
|
color: #D16B3F !important;
|
|
}
|
|
|
|
.color_C7331D {
|
|
color: #C7331D !important;
|
|
}
|
|
|
|
.color_666666 {
|
|
color: #666666 !important;
|
|
}
|
|
|
|
.color_F8A52F {
|
|
color: #F8A52F !important;
|
|
}
|
|
|
|
.color_999999 {
|
|
color: #999999 !important;
|
|
}
|
|
|
|
.color_C7331D {
|
|
color: #C7331D !important;
|
|
}
|
|
|
|
.color_333333 {
|
|
color: #333333 !important;
|
|
}
|
|
|
|
.color_FFFFFF {
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
.color_E7612E {
|
|
color: #E7612E !important;
|
|
}
|
|
|
|
.color_EF4B37 {
|
|
color: #EF4B37 !important;
|
|
}
|
|
|
|
.color_5F5F5F {
|
|
color: #5F5F5F !important;
|
|
}
|
|
|
|
.color_FB7307 {
|
|
color: #FB7307 !important;
|
|
}
|
|
|
|
.color_256BFA {
|
|
color: #256BFA !important;
|
|
}
|
|
|
|
.color_4E8ADE {
|
|
color: #4E8ADE !important;
|
|
}
|
|
|
|
.color_D9D9D9 {
|
|
color: #D9D9D9 !important;
|
|
}
|
|
|
|
/* 控制左右距离 */
|
|
.mar_le30 {
|
|
margin-left: 60rpx !important;
|
|
}
|
|
|
|
.mar_le25 {
|
|
margin-left: 50rpx !important;
|
|
}
|
|
|
|
.mar_le20 {
|
|
margin-left: 40rpx !important;
|
|
}
|
|
|
|
.mar_le15 {
|
|
margin-left: 30rpx !important;
|
|
}
|
|
|
|
.mar_le10 {
|
|
margin-left: 20rpx !important;
|
|
}
|
|
|
|
.mar_le5 {
|
|
margin-left: 10rpx !important;
|
|
}
|
|
|
|
.mar_ri5 {
|
|
margin-right: 10rpx !important;
|
|
}
|
|
|
|
.mar_ri10 {
|
|
margin-right: 20rpx !important;
|
|
}
|
|
|
|
.mar_ri15 {
|
|
margin-right: 30rpx !important;
|
|
}
|
|
|
|
.mar_ri20 {
|
|
margin-right: 40rpx !important;
|
|
}
|
|
|
|
.mar_ri25 {
|
|
margin-right: 50rpx !important;
|
|
}
|
|
|
|
.mar_top0 {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.mar_top5 {
|
|
margin-top: 10rpx !important;
|
|
}
|
|
|
|
.mar_top10 {
|
|
margin-top: 20rpx !important;
|
|
}
|
|
|
|
.mar_top15 {
|
|
margin-top: 30rpx !important;
|
|
}
|
|
|
|
.mar_top20 {
|
|
margin-top: 40rpx !important;
|
|
}
|
|
|
|
.mar_top25 {
|
|
margin-top: 50rpx !important;
|
|
}
|
|
|
|
/* 控制字体粗细 */
|
|
.fw_blod {
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
/* 控制背景色 */
|
|
.bg_e8 {
|
|
background-color: #e8e8e8 !important;
|
|
}
|
|
|
|
/* 控制背景色 */
|
|
.bg_cc {
|
|
background-color: #CCCCCC !important;
|
|
}
|
|
|
|
/* 控制背景色 */
|
|
.bg_ff {
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
|
|
|
|
/* 弹性布局 */
|
|
.fl_box {
|
|
display: flex;
|
|
}
|
|
|
|
.fl_deri {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.fl_row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.fl_justmiddle {
|
|
justify-content: center;
|
|
}
|
|
|
|
.fl_juststart {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.fl_justbet {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.fl_justround {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.fl_justend {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.fl_almiddle {
|
|
align-items: center;
|
|
}
|
|
|
|
.fl_alstart {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.fl_alend {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.fl_1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.fl_warp {
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.fl_nowarp {
|
|
flex-wrap: nowrap
|
|
}
|
|
|
|
.line_2 {
|
|
display: -webkit-box;
|
|
/* 让文本内容成为弹性盒 */
|
|
-webkit-box-orient: vertical;
|
|
/* 设置盒子的方向为垂直 */
|
|
-webkit-line-clamp: 2;
|
|
/* 限制最多显示两行 */
|
|
overflow: hidden;
|
|
/* 隐藏超出的文本 */
|
|
text-overflow: ellipsis;
|
|
/* 使用省略号 */
|
|
}
|
|
|
|
.line_1 {
|
|
display: -webkit-box;
|
|
/* 让文本内容成为弹性盒 */
|
|
-webkit-box-orient: vertical;
|
|
/* 设置盒子的方向为垂直 */
|
|
-webkit-line-clamp: 1;
|
|
/* 限制最多显示两行 */
|
|
overflow: hidden;
|
|
/* 隐藏超出的文本 */
|
|
text-overflow: ellipsis;
|
|
/* 使用省略号 */
|
|
} |