@font-face { font-family: 'uicon-iconfont'; src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype'); } html { width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } page { outline: 0; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-box-sizing: border-box; box-sizing: border-box; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; } page, view, text, navigator, button, image { box-sizing: border-box; } body { font-size: 28upx; background: #F6F6F6; color: #000000; overflow-x: hidden; } input, select, textarea { font-size: 100%; -webkit-appearance: none; background: transparent; } textarea { border: none; outline: none; } button { border: 0; } table { border-collapse: collapse; border-spacing: 0; } input { border: 0; outline: 0; /* color: #000000; */ } text { font-size: 24rpx; } uni-view { box-sizing: border-box; font-size: 24rpx; /* line-height: 1.2; */ } .dark { min-height: 100vh; background: #102222 !important; color: #FFFFFF; /* overflow-x: hidden; */ /* color字体颜色 */ /* 背景色 */ /* 边框颜色 */ /* margin外边距 */ /* padding内边距 */ /* 宽度百分比 */ /* 宽度upx */ /* 高度 */ /* 行高 */ /* 边框圆角 */ /* 透明度 */ /* 三角形 */ /* 字体渐变 */ /* 去除chrome input默认背景 */ /*清除ie的默认选择框样式清除,隐藏下拉箭头*/ /* 不换行超出隐藏 */ /* 其它 */ /* 下划线 */ } /* window浏览器顶级容器固定宽度375px */ .container-win { width: 375px; margin: 0 auto; background: #F7F7F7; } .container { width: 750rpx; background: #F7F7F7; /* height: 100vh; max-height: 100vh; */ } .flex-center { display: flex; flex-direction: row; align-items: center; justify-content: center; } .flex-col-center { display: flex; flex-direction: column; align-items: center; justify-content: center; } .shadow { box-shadow: 0px 2rpx 28rpx 2rpx rgba(0, 0, 0, 0.08); } .width100 { width: 100%; } .width50 { width: 50%; } .width40 { width: 40%; } .width60 { width: 60%; } .width70 { width: 70%; } .width30 { width: 30%; } .width80 { width: 80%; } .width700 { width: 700rpx; } .width20 { width: 20%; } .height0 { height: 0; } .height-vh { min-height: 100vh; } .height100 { height: 100%; } .height70 { height: 70%; } .height64 { height: 64rpx; } .height72 { height: 72rpx; } .height96 { height: 96rpx; } .height104 { height: 104rpx; } .fixed { position: fixed; } .top-0 { top: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .right-0 { right: 0; } .width-auto { width: auto; } .height-auto { height: auto; } .line-through { text-decoration: line-through; } .radius-8 { border-radius: 8rpx; } .radius-16 { border-radius: 16rpx; } .radius-24 { border-radius: 24rpx; } .radius-b-16 { border-radius: 0 0 16rpx 16rpx; } /* ios设置安全距离高度,非iOS默认为0 */ .safearea { padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box !important; } .bg-999 { background: #999999; } .bg-zero { background: #cecece; opacity: 0.8; border: #585858 1rpx solid; color: #3e3e3e; } .bg-black { background: #292C35; } .bg-F7F7F7 { background: #F7F7F7; } .bg-white { background: white; } .bg-F9 { background: #F9F9F9; } .bg-000 { background: #000; } .bg-red { background: #FD5D5F; } .bg-red-sign { background: #FD5D5F; } .bg-CCC-sign { background: #CCCCCC; } .bg-CCC { background: #CCCCCC; } .bg-orangered { background: orangered; } .bg-blue { background: #4894FF; } .bg-main { background: #ffffff; min-height: 100vh; } .bg-main2 { background: #FFFFFF; } .bg-EEE { background: #eeeeee; } .bg-transparent { background: transparent; } .dark .bg-main { background: #102030; } .dark .bg-main2 { background: #102030; } .dark.bg-main { background: #102030; } .dark.bg-main-select { background: #c5f516; } .bg-mediumpurple { background: #ddd9ff; } .productImg { border-radius: 20rpx; width: 220rpx; height: 220rpx; } .radius20 { border-radius: 20rpx; } .region { /* 阴影效果 */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 20rpx; width: 730rpx; height: auto; padding-bottom: 30rpx; padding-top: 30rpx; background-color: white; margin-bottom: 10rpx; margin-left: 10rpx; } .region2 { /* 阴影效果 */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 20rpx; width: 730rpx; height: auto; padding-bottom: 10rpx; padding-top: 10rpx; background-color: white; margin-bottom: 10rpx; margin-left: 10rpx; } .region1 { /* 阴影效果 */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 20rpx; width: 730rpx; height: auto; padding-top: 30rpx; background-color: white; margin-bottom: 10rpx; margin-left: 10rpx; } .bg-orchid { background: #9968c3; } .bg-darkblue { background: #3F3BAF; } .bg-green { background: #53D084; } .headerbg { background: linear-gradient(315deg, #53509F 0%, #3A386F 51%, #3B3971 100%); } .btn-bg { background: #939393; } .icon-img { width: 88rpx; height: 88rpx; } .img-188 { width: 188rpx; height: 188rpx; border-radius: 16rpx; } .img-208 { width: 208rpx; height: 208rpx; border-radius: 16rpx; } .footer-empty { width: 100%; height: 34rpx; } .width-686 { width: 686rpx; margin: 0 32rpx; } .width-616 { width: 616rpx; } .width-355 { width: 355rpx; } .text-align-left { text-align: left; } .text-align-right { text-align: right; } .font4 { font-size: 4rpx; } .font18 { font-size: 18rpx; } .font20 { font-size: 20rpx; } .font22 { font-size: 22rpx; } .font24 { font-size: 24rpx; } .font26 { font-size: 26rpx; } .font28 { font-size: 28rpx; } .font30 { font-size: 30rpx; } .font32 { font-size: 32rpx; } .font34 { font-size: 34rpx; } .font36 { font-size: 36rpx; } .font38 { font-size: 38rpx; } .font40 { font-size: 40rpx; } .font42 { font-size: 42rpx; } .font44 { font-size: 44rpx; } .font46 { font-size: 46rpx; } .font48 { font-size: 48rpx; } .font52 { font-size: 52rpx; } .font60 { font-size: 60rpx; } .lineH-36 { line-height: 36rpx; } .font-main { color: #000000; } .dark .font-main { color: #FFFFFF; } .font-white { color: #FFFFFF; } .font-gray { color: #a8a8a8; } .font-c5c { color: #c5c5c5; } .font-darkblue { color: #070032; } .font-blue { color: #0068f0; } .font-red { color: #FF4748; } .font-orchid { color: #9968c3; } .font-green { color: #53D084; } .font-333 { color: #333333; } .font-707 { color: #707070; } .font-24a { color: #24afff; } .font-d0d { color: #d0d7df; } .font-def { color: #464646; } .font-8c9 { color: #8c95a6; } .font-666 { color: #666666; } .font-999 { color: #999999; } .font-darkgreen { color: #001C19; } .font-bold { font-weight: bold; } .blue { color: #9FBEDC; } .blue2 { color: #1881d2; } .blue3 { color: #4A5A7A; } .blue4 { color: #8897AD; } .blue5 { color: #013e7f; } .mar-32 { margin: 32rpx; } .mar-t-5 { margin-top: 5rpx; } .mar-t-8 { margin-top: 8rpx; } .mar-t-10 { margin-top: 10rpx; } .mar-t-14 { margin-top: 14rpx; } .mar-t-16 { margin-top: 16rpx; } .mar-t-20 { margin-top: 20rpx; } .mar-t-24 { margin-top: 24rpx; } .mar-t-30 { margin-top: 30rpx; } .mar-t-32 { margin-top: 32rpx; } .mar-t-34 { margin-top: 34rpx; } .single-line-text { text-align: center; /* 强制文本在一行内显示 */ white-space: nowrap; /* 隐藏超出容器的内容 */ overflow: hidden; /* 超出部分显示省略号 */ text-overflow: ellipsis; /* 设置容器宽度 */ width: 100rpx; } .omit-text { white-space: nowrap; /* 隐藏超出容器的内容 */ overflow: hidden; /* 超出部分显示省略号 */ text-overflow: ellipsis; width: 350rpx; } .mar-t-36 { margin-top: 36rpx; } .mar-t-40 { margin-top: 40rpx; } .mar-t-48 { margin-top: 48rpx; } .mar-t-50 { margin-top: 50rpx; } .mar-t-54 { margin-top: 54rpx; } .mar-t-56 { margin-top: 56rpx; } .mar-t-60 { margin-top: 60rpx; } .mar-t-64 { margin-top: 64rpx; } .mar-t-70 { margin-top: 70rpx; } .mar-t-80 { margin-top: 80rpx; } .mar-t-96 { margin-top: 96rpx; } .mar-t-100 { margin-top: 100rpx; } .mar-t-144 { margin-top: 144rpx; } .mar-t-percent40 { margin-top: 40%; } .mar-t-half { margin-top: 50%; } .mar-l-2 { margin-left: 2rpx; } .mar-l-4 { margin-left: 4rpx; } .mar-l-6 { margin-left: 6rpx; } .mar-l-5 { margin-left: 5rpx; } .mar-l-8 { margin-left: 8rpx; } .mar-l-10 { margin-left: 10rpx; } .mar-l-auto { margin-left: auto; } .mar-r-auto { margin-right: auto; } .mar-l-14 { margin-left: 14rpx; } .mar-l-16 { margin-left: 16rpx; } .mar-l-20 { margin-left: 20rpx; } .mar-l-24 { margin-left: 24rpx; } .mar-l-25 { margin-left: 25rpx; } .mar-l-30 { margin-left: 30rpx; } .mar-l-32 { margin-left: 32rpx; } .mar-l-40 { margin-left: 40rpx; } .mar-l-50 { margin-left: 50rpx; } .mar-l-52 { margin-left: 52rpx; } .mar-l-60 { margin-left: 60rpx; } .mar-l-70 { margin-left: 70rpx; } .mar-l-80 { margin-left: 80rpx; } .mar-r-8 { margin-right: 8rpx; } .mar-r-10 { margin-right: 10rpx; } .mar-r-14 { margin-right: 14rpx; } .mar-r-18 { margin-right: 18rpx; } .mar-r-20 { margin-right: 20rpx; } .mar-r-24 { margin-right: 24rpx; } .mar-r-30 { margin-right: 30rpx; } .mar-r-32 { margin-right: 32rpx; } .mar-r-40 { margin-right: 40rpx; } .mar-r-60 { margin-right: 60rpx; } .mar-r-250 { margin-right: 250rpx; } .mar-r-44 { margin-right: 44rpx; } .mar-b-16 { margin-bottom: 16rpx; } .mar-b-3 { margin-bottom: 3rpx; } .mar-b-20 { margin-bottom: 20rpx; } .mar-b-24 { margin-bottom: 24rpx; } .mar-b-30 { margin-bottom: 30rpx; } .mar-b-50 { margin-bottom: 50rpx; } .mar-b-60 { margin-bottom: 60rpx; } .pad-b-100 { padding-bottom: 130rpx; } .mar-b-32 { margin-bottom: 32rpx; } .mar-lr-8 { margin-left: 8rpx; margin-right: 8rpx; } .mar-lr-4 { margin-left: 4rpx; margin-right: 4rpx; } .empty { height: 300rpx; width: 300rpx; } .mar-lr-12 { margin-left: 12rpx; margin-right: 12rpx; } .mar-lr-16 { margin-left: 16rpx; margin-right: 16rpx; } .shrink-0 { flex-shrink: 0; } .mar-lr-20 { margin-left: 20rpx; margin-right: 20rpx; } .mar-lr-22 { margin-left: 22rpx; margin-right: 22rpx; } .mar-lr-24 { margin-left: 24rpx; margin-right: 24rpx; } .mar-lr-32 { margin-left: 32rpx; margin-right: 32rpx; } .mar-lr-42 { margin-left: 42rpx; margin-right: 42rpx; } .mar-lr-52 { margin-left: 52rpx; margin-right: 52rpx; } .mar-lr-64 { margin-left: 64rpx; margin-right: 64rpx; } .mar-lr-64 { margin-left: 84rpx; margin-right: 84rpx; } .mar-lr-104 { margin-left: 104rpx; margin-right: 104rpx; } .mar-tb-8 { margin-top: 8rpx; margin-bottom: 8rpx; } .mar-tb-12 { margin-top: 12rpx; margin-bottom: 12rpx; } .mar-tb-14 { margin-top: 14rpx; margin-bottom: 14rpx; } .mar-tb-16 { margin-top: 16rpx; margin-bottom: 16rpx; } .mar-tb-20 { margin-top: 20rpx; margin-bottom: 20rpx; } .mar-tb-24 { margin-top: 24rpx; margin-bottom: 24rpx; } .mar-tb-40 { margin-top: 40rpx; margin-bottom: 40rpx; } .mar-tb-32 { margin-top: 32rpx; margin-bottom: 32rpx; } .pad-l-10 { padding-left: 10rpx; } .pad-l-20 { padding-left: 20rpx; } .pad-l-32 { padding-left: 32rpx; } .pad-l-40 { padding-left: 40rpx; } .pad-l-50 { padding-left: 40rpx; } .pad-r-4 { padding-right: 4rpx; } .pad-r-8 { padding-right: 8rpx; } .pad-r-10 { padding-right: 10rpx; } .pad-r-20 { padding-right: 20rpx; } .pad-r-32 { padding-right: 32rpx; } .pad-r-40 { padding-right: 40rpx; } .pad-t-20 { padding-top: 20rpx; } .pad-t-16 { padding-top: 16rpx; } .pad-t-26 { padding-top: 26rpx; } .pad-t-28 { padding-top: 28rpx; } .pad-t-32 { padding-top: 32rpx; } .pad-t-40 { padding-top: 40rpx; } .pad-b-16 { padding-bottom: 16rpx; } .pad-b-20 { padding-bottom: 20rpx; } .pad-b-24 { padding-bottom: 24rpx; } .pad-tb-4 { padding-top: 4rpx; padding-bottom: 4rpx; } .pad-tb-6 { padding-top: 6rpx; padding-bottom: 6rpx; } .pad-tb-8 { padding-top: 8rpx; padding-bottom: 8rpx; } .pad-tb-16 { padding-top: 16rpx; padding-bottom: 16rpx; } .gray-line { height: 1px; /* 线条高度 */ background-color: #f9f9f9; /* 浅灰色,可根据需要调整颜色值 */ width: 100%; /* 线条宽度,这里设置为占满父容器 */ margin-top: 8rpx; margin-bottom: 8rpx; } .pad-tb-20 { padding-top: 20rpx; padding-bottom: 20rpx; } .pad-tb-22 { padding-top: 22rpx; padding-bottom: 22rpx; } .pad-tb-24 { padding-top: 24rpx; padding-bottom: 24rpx; } .pad-tb-30 { padding-top: 30rpx; padding-bottom: 30rpx; } .pad-tb-32 { padding-top: 32rpx; padding-bottom: 32rpx; } .pad-tb-40 { padding-top: 40rpx; padding-bottom: 40rpx; } .pad-tb-50 { padding: 50rpx 0rpx; } .pad-lr-5 { padding: 0rpx 5rpx; } .pad-lr-10 { padding-left: 10rpx; padding-right: 10rpx; } .pad-lr-12 { padding-left: 12rpx; padding-right: 12rpx; } .pad-lr-14 { padding-left: 14rpx; padding-right: 14rpx; } .pad-lr-16 { padding-left: 16rpx; padding-right: 16rpx; } .pad-lr-18 { padding-left: 18rpx; padding-right: 18rpx; } .pad-lr-20 { padding-left: 20rpx; padding-right: 20rpx; } .pad-lr-24 { padding-left: 24rpx; padding-right: 24rpx; } .pad-lr-32 { padding-left: 32rpx; padding-right: 32rpx; } .pad-lr-48 { padding-left: 48rpx; padding-right: 48rpx; } .pad-b-8 { padding-bottom: 8rpx; } .pad-b-30 { padding-bottom: 30rpx; } .pad-b-32 { padding-bottom: 32rpx; } .pad-b-40 { padding-bottom: 40rpx; } .pad-b-130 { padding-bottom: 130rpx; } .pad-b-140 { padding-bottom: 140rpx; } .pad-16 { padding: 16rpx; } .pad-24 { padding: 24rpx; } .pad-32 { padding: 32rpx; } .pos-r { position: relative; } .pos-abs { position: absolute; } .pos-fixed { position: fixed; } .flex { display: flex; } .flex-1 { flex: 1; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-4 { flex: 4; } .flex-items { display: flex; align-items: center; } .nowrap { white-space: nowrap } .flex-items-between { display: flex; align-items: center; justify-content: space-between; } .flex-items-plus { display: flex; justify-content: center; align-items: center; } .flex-items-start { display: flex; justify-content: start; align-items: center; } .flex-start { display: flex; justify-content: flex-start; } .flex-end { display: flex; justify-content: flex-end; } .flex-end-plus { display: flex; justify-content: flex-end; align-items: center; } .flex-column { flex-direction: column } .flex-column-plus { display: flex; flex-direction: column; } .self-baseline { align-self: baseline; } .flex-row { flex-direction: row } .flex-row-plus { display: flex; flex-direction: row } .flex-sp-around { justify-content: space-around; } .flex-sp-between { justify-content: space-between; } .flex-align-beteen { align-content: space-between; } .text-align { text-align: center; } .flex-wrap-1 { display: flex; flex-wrap: wrap } .flex-nowrap-1 { display: flex; flex-wrap: nowrap } .align-end { display: flex; align-items: flex-end; } .align-start { display: flex; align-items: flex-start; } .line-w { width: 750rpx; height: 4rpx; background-color: #EEEEEE } .line-h-48 { width: 4rpx; height: 48rpx; background-color: #EEEEEE } .overflow { overflow: hidden; } .chao1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chao2 { text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-align: center; -webkit-line-clamp: 2; overflow: hidden; } .chao3 { text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-align: center; -webkit-line-clamp: 3; overflow: hidden; } .border { border: #EEEEEE solid 1px; } .border-l-dashed { border-left: #EEEEEE dashed 1px; } .border-t-dashed { border-top: #EEEEEE dashed 1px; } .border-r-dashed { border-right: #EEEEEE dashed 1px; } .border-b-dashed { border-bottom: #EEEEEE dashed 1px; } .border-l { border-left: #EEEEEE solid 1px; } .border-t { border-top: #EEEEEE solid 1px; } .border-r { border-right: #EEEEEE solid 1px; } .border-b { border-bottom: #EEEEEE solid 1px; } /** * 公共搜索模块样式 */ .global-search { display: flex; flex-direction: row; align-items: center; padding: 32rpx; position: relative; z-index: 99; background: #F7F7F7; } .global-search .u-input { background: #ffffff; box-shadow: 0px 2px 28px 2px rgba(0, 0, 0, 0.1); } .global-search .search-right { width: 40rpx; height: 40rpx; margin-left: 24rpx; background: #3f3baf; color: #ffffff; font-weight: 500; border-radius: 20rpx; font-size: 52rpx; line-height: 33rpx; text-align: center; } .global-tag { padding: 0 20rpx; margin-left: 24rpx; border-radius: 8rpx; height: 40rpx; line-height: 40rpx; } .tag-box { width: 112rpx; height: 40rpx; margin-left: 14rpx; } .tag-box-auto { padding: 0 20rpx; height: 40rpx; margin-left: 14rpx; } /* 选框尺寸公共样式 */ .filter-selete-box-xs { width: 112rpx; height: 40rpx; overflow: hidden; background: #F2F1FF; border: 2rpx solid #3F3BAF; } .filter-selete-box-xs.active { background: #3F3BAF; } .filter-selete-box-xs.active text { color: #FFFFFF; } /* .filter-selete-box-small{ width: 168rpx; height: 44rpx; overflow: hidden; background: #F2F1FF; border: 2rpx solid #3F3BAF; } .filter-selete-box-small.active{ background: #3F3BAF; } .filter-selete-box-small.active text{ color: #FFFFFF; } */ /* .filter-selete-box-normal{ width: 172rpx; height: 96rpx; overflow: hidden; background: #F2F1FF; border: 2rpx solid #3F3BAF; } .filter-selete-box-normal.active{ background: linear-gradient(314deg, #4E4BBB 0%, #B9B7FF 100%); border: none; } .filter-selete-box-normal.active text{ color: #FFFFFF; } .filter-selete-box-large{ width: 272rpx; height: 96rpx; overflow: hidden; background: #F2F1FF; border: 2rpx solid #3F3BAF; } .filter-selete-box-large.active{ background: linear-gradient(314deg, #4E4BBB 0%, #B9B7FF 100%); border: none; } .filter-selete-box-large.active text{ color: #FFFFFF; } */ .selected, .not-selected { width: 44rpx; height: 44rpx; margin-right: 16rpx; } .not-selected { border: 2rpx solid #D6D6D6; border-radius: 50%; } .wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 999; } /* start--iPhoneX底部安全区定义--start */ .safe-area-inset-bottom { padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } /* end-iPhoneX底部安全区定义--end */ /* start--去除button的所有默认样式--start */ .u-reset-button { padding: 0; margin: 0; font-size: inherit; line-height: inherit; background-color: transparent; color: inherit; transform: translate(0rpx, 0rpx); } .u-reset-button.button-hover { transform: translate(1upx, 1upx); } .u-reset-button::after { border: none; } /* end--去除button的所有默认样式--end */