1628 lines
26 KiB
CSS
1628 lines
26 KiB
CSS
/* #ifdef H5 */
|
||
body {
|
||
background: #333 !important;
|
||
}
|
||
|
||
page {
|
||
min-height: 100%;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
/**
|
||
* 页面宽度最大800px、并居中
|
||
*/
|
||
page,
|
||
iframe,
|
||
.uni-page-head,
|
||
.uni-tabbar,
|
||
.open-location,
|
||
.home-top-nav-content,
|
||
.search-content-fixed,
|
||
.trn-nav-top,
|
||
.goods-buy-nav,
|
||
.popup-bottom,
|
||
.popup-top,
|
||
.quick-movable-container,
|
||
.online-service-movable-container,
|
||
.bottom-fixed,
|
||
.buy-nav,
|
||
.plugins-popupscreen .content,
|
||
.cart-buy-nav,
|
||
.bg-img,
|
||
.pa-w {
|
||
max-width: 800px !important;
|
||
margin: 0 auto !important;
|
||
}
|
||
|
||
.trn-nav-top,
|
||
.goods-buy-nav,
|
||
.nav-more-view,
|
||
.quick-movable-container,
|
||
.online-service-movable-container,
|
||
.buy-nav,
|
||
.cart-buy-nav {
|
||
left: auto !important;
|
||
}
|
||
|
||
iframe,
|
||
.bottom-fixed {
|
||
right: 0 !important;
|
||
}
|
||
|
||
.web-html-content iframe {
|
||
width: 100% !important;
|
||
max-height: 500rpx !important;
|
||
}
|
||
|
||
/**
|
||
* 隐藏导航栏内容、仅展示返回按钮
|
||
*/
|
||
uni-page-head {
|
||
position: absolute;
|
||
margin-top: -999999px;
|
||
z-index: 99;
|
||
}
|
||
|
||
.uni-page-head-bd {
|
||
display: none !important;
|
||
}
|
||
|
||
.uni-page-head-btn {
|
||
position: fixed;
|
||
left: auto;
|
||
bottom: 70px;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
box-shadow: 0 0 10px rgb(0 0 0 / 30%);
|
||
margin: 0 0 0 10px;
|
||
border-radius: 50px;
|
||
width: 31px;
|
||
height: 31px;
|
||
text-align: center;
|
||
padding: 2px 3px 0 0;
|
||
}
|
||
|
||
.uni-page-head-btn .uni-btn-icon {
|
||
color: #fff !important;
|
||
}
|
||
|
||
.uni-app--showtabbar uni-page-wrapper,
|
||
uni-page-head[uni-page-head-type=default]~uni-page-wrapper {
|
||
height: calc(100% - var(--window-bottom)) !important;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
/**
|
||
* 公共样式、框架样式覆盖
|
||
*/
|
||
page {
|
||
background: #f5f5f5;
|
||
color: #4a4a4a;
|
||
}
|
||
|
||
input[type="text"],
|
||
input[type="number"],
|
||
input[type="idcard"],
|
||
input[type="digit"],
|
||
textarea {
|
||
-webkit-appearance: none;
|
||
border-radius: 5px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
page,
|
||
textarea,
|
||
.a-textarea-control textarea {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
button:after,
|
||
button:before {
|
||
border: 0;
|
||
border-radius: 0;
|
||
}
|
||
|
||
/**
|
||
* 模块分割间距
|
||
*/
|
||
.spacing {
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
.spacing-mt-10 {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.spacing-mb-10 {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.spacing-mb {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.spacing-mt {
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
/**
|
||
* 常用样式
|
||
*/
|
||
.max-w {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.max-h {
|
||
max-height: 100%;
|
||
}
|
||
|
||
.min-w {
|
||
min-width: 100%;
|
||
}
|
||
|
||
.min-h {
|
||
min-height: 100%;
|
||
}
|
||
|
||
.fl {
|
||
float: left;
|
||
}
|
||
|
||
.fr {
|
||
float: right;
|
||
}
|
||
|
||
.wh-auto {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.ht-auto {
|
||
height: 100% !important;
|
||
}
|
||
|
||
.tc {
|
||
text-align: center;
|
||
}
|
||
|
||
.tl {
|
||
text-align: left;
|
||
}
|
||
|
||
.tr {
|
||
text-align: right;
|
||
}
|
||
|
||
.oh {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.dis-none {
|
||
display: none !important;
|
||
}
|
||
|
||
.dis-block {
|
||
display: block !important;
|
||
}
|
||
|
||
.dis-inline {
|
||
display: inline !important;
|
||
}
|
||
|
||
.dis-inline-block {
|
||
display: inline-block !important;
|
||
}
|
||
|
||
.va-t {
|
||
vertical-align: top;
|
||
}
|
||
|
||
.va-m {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.va-b {
|
||
vertical-align: text-bottom;
|
||
}
|
||
|
||
.pf {
|
||
position: fixed;
|
||
}
|
||
|
||
.pa {
|
||
position: absolute;
|
||
}
|
||
|
||
.pr {
|
||
position: relative;
|
||
}
|
||
|
||
.z-i {
|
||
z-index: 1 !important;
|
||
}
|
||
|
||
.z-i-deep {
|
||
z-index: 2 !important;
|
||
}
|
||
|
||
.bs-bb {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.radius-0 {
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
.radius {
|
||
border-radius: 10rpx !important;
|
||
}
|
||
|
||
.round {
|
||
border-radius: 50rpx !important;
|
||
}
|
||
|
||
.circle {
|
||
border-radius: 50% !important;
|
||
}
|
||
|
||
.fw-b {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.auto {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.lh-0 {
|
||
line-height: 0 !important;
|
||
}
|
||
|
||
.cp {
|
||
/* #ifdef H5 */
|
||
cursor: pointer;
|
||
/* #endif */
|
||
}
|
||
|
||
/**
|
||
* 透明度
|
||
*/
|
||
.opacity-min {
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.opacity {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.opacity-max {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/**
|
||
* 底部浮动
|
||
*/
|
||
.bottom-fixed {
|
||
position: fixed;
|
||
left: 0;
|
||
border: none;
|
||
bottom: 0;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
z-index: 2;
|
||
padding: 40rpx 90rpx;
|
||
background-color: #fff;
|
||
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
/**
|
||
* 兼容底部横线底部内边距
|
||
*/
|
||
.bottom-line-exclude {
|
||
padding-bottom: calc(env(safe-area-inset-bottom) - 40rpx);
|
||
}
|
||
|
||
/**
|
||
* 页面底部浮动、增加底部边距
|
||
*/
|
||
.page-bottom-fixed {
|
||
padding-bottom: calc(172rpx + env(safe-area-inset-bottom) - 40rpx) !important;
|
||
/* #ifdef H5 */
|
||
padding-bottom: 172rpx !important;
|
||
/* #endif */
|
||
}
|
||
|
||
/**
|
||
* 主要类样式
|
||
*/
|
||
.margin-main {
|
||
margin: 24rpx;
|
||
}
|
||
|
||
.margin-top-main {
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.margin-right-main {
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.margin-bottom-main {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.margin-left-main {
|
||
margin-left: 24rpx;
|
||
}
|
||
|
||
.margin-horizontal-main {
|
||
margin-left: 24rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.margin-vertical-main {
|
||
margin-top: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.padding-main {
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.padding-top-main {
|
||
padding-top: 24rpx;
|
||
}
|
||
|
||
.padding-right-main {
|
||
padding-right: 24rpx;
|
||
}
|
||
|
||
.padding-bottom-main {
|
||
padding-bottom: 24rpx;
|
||
}
|
||
|
||
.padding-left-main {
|
||
padding-left: 24rpx;
|
||
}
|
||
|
||
.padding-horizontal-main {
|
||
padding-left: 24rpx;
|
||
padding-right: 24rpx;
|
||
}
|
||
|
||
.padding-vertical-main {
|
||
padding-top: 24rpx;
|
||
padding-bottom: 24rpx;
|
||
}
|
||
|
||
.border-radius-main {
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.border-radius-left-main {
|
||
border-top-left-radius: 16rpx;
|
||
border-bottom-left-radius: 16rpx;
|
||
}
|
||
|
||
.border-radius-right-main {
|
||
border-top-right-radius: 16rpx;
|
||
border-bottom-right-radius: 16rpx;
|
||
}
|
||
|
||
.border-radius-top-main {
|
||
border-top-left-radius: 16rpx;
|
||
border-top-right-radius: 16rpx;
|
||
}
|
||
|
||
.border-radius-bottom-main {
|
||
border-bottom-left-radius: 16rpx;
|
||
border-bottom-right-radius: 16rpx;
|
||
}
|
||
|
||
.border-radius-xs {
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.border-radius-left-xs {
|
||
border-top-left-radius: 4rpx;
|
||
border-bottom-left-radius: 4rpx;
|
||
}
|
||
|
||
.border-radius-right-xs {
|
||
border-top-right-radius: 4rpx;
|
||
border-bottom-right-radius: 4rpx;
|
||
}
|
||
|
||
.border-radius-top-xs {
|
||
border-top-left-radius: 4rpx;
|
||
border-top-right-radius: 4rpx;
|
||
}
|
||
|
||
.border-radius-bottom-xs {
|
||
border-bottom-left-radius: 4rpx;
|
||
border-bottom-right-radius: 4rpx;
|
||
}
|
||
|
||
.border-radius-sm {
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.border-radius-left-sm {
|
||
border-top-left-radius: 8rpx;
|
||
border-bottom-left-radius: 8rpx;
|
||
}
|
||
|
||
.border-radius-right-sm {
|
||
border-top-right-radius: 8rpx;
|
||
border-bottom-right-radius: 8rpx;
|
||
}
|
||
|
||
.border-radius-top-sm {
|
||
border-top-left-radius: 8rpx;
|
||
border-top-right-radius: 8rpx;
|
||
}
|
||
|
||
.border-radius-bottom-sm {
|
||
border-bottom-left-radius: 8rpx;
|
||
border-bottom-right-radius: 8rpx;
|
||
}
|
||
|
||
/**
|
||
* 价格
|
||
*/
|
||
.sales-price {
|
||
color: #E22C08;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.original-price {
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
/**
|
||
* 边框 灰色（四边）、红色、黄色、绿色、灰色、无边线
|
||
*/
|
||
.br {
|
||
border: 1px solid #EEEEEE !important;
|
||
}
|
||
|
||
.br-b {
|
||
border-bottom: 1px solid #EEEEEE !important;
|
||
}
|
||
|
||
.br-t {
|
||
border-top: 1px solid #EEEEEE !important;
|
||
}
|
||
|
||
.br-l {
|
||
border-left: 1px solid #EEEEEE !important;
|
||
}
|
||
|
||
.br-r {
|
||
border-right: 1px solid #EEEEEE !important;
|
||
}
|
||
|
||
.br-f5 {
|
||
border: 1px solid #f5f5f5 !important;
|
||
}
|
||
|
||
.br-b-f5 {
|
||
border-bottom: 1px solid #f5f5f5 !important;
|
||
}
|
||
|
||
.br-t-f5 {
|
||
border-top: 1px solid #f5f5f5 !important;
|
||
}
|
||
|
||
.br-l-f5 {
|
||
border-left: 1px solid #f5f5f5 !important;
|
||
}
|
||
|
||
.br-r-f5 {
|
||
border-right: 1px solid #f5f5f5 !important;
|
||
}
|
||
|
||
|
||
.br-f9 {
|
||
border: 1px solid #f9f9f9 !important;
|
||
}
|
||
|
||
.br-b-f9 {
|
||
border-bottom: 1px solid #f9f9f9 !important;
|
||
}
|
||
|
||
.br-t-f9 {
|
||
border-top: 1px solid #f9f9f9 !important;
|
||
}
|
||
|
||
.br-l-f9 {
|
||
border-left: 1px solid #f9f9f9 !important;
|
||
}
|
||
|
||
.br-r-f9 {
|
||
border-right: 1px solid #f9f9f9 !important;
|
||
}
|
||
|
||
.br-e {
|
||
border: 1px solid #eeeeee !important;
|
||
}
|
||
|
||
.br-b-e {
|
||
border-bottom: 1px solid #eeeeee !important;
|
||
}
|
||
|
||
.br-t-e {
|
||
border-top: 1px solid #eeeeee !important;
|
||
}
|
||
|
||
.br-l-e {
|
||
border-left: 1px solid #eeeeee !important;
|
||
}
|
||
|
||
.br-r-e {
|
||
border-right: 1px solid #eeeeee !important;
|
||
}
|
||
|
||
.br-red {
|
||
border: 1px solid #E22C08 !important;
|
||
}
|
||
|
||
.br-yellow {
|
||
border: 1px solid #f6c133 !important;
|
||
}
|
||
|
||
.br-green {
|
||
border: 1px solid #52C41A !important;
|
||
}
|
||
|
||
.br-grey {
|
||
border: solid 1px #dddddd !important;
|
||
}
|
||
|
||
.br-grey-d {
|
||
border: solid 1px #dddddd !important;
|
||
}
|
||
|
||
.br-grey-f5 {
|
||
border: solid 1px #f5f5f5 !important;
|
||
}
|
||
|
||
.br-grey-9 {
|
||
border: solid 1px #999999 !important;
|
||
}
|
||
.br-grey-c {
|
||
border: solid 1px #cccccc !important;
|
||
}
|
||
|
||
.br-blue {
|
||
border: solid 1px #2196F3 !important;
|
||
}
|
||
|
||
.br-black {
|
||
border: solid 1px #333333 !important;
|
||
}
|
||
|
||
.br-base {
|
||
border: solid 1px #666 !important;
|
||
}
|
||
|
||
.br-0 {
|
||
border: 0 !important;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/**
|
||
* 虚线边框、灰色（四边）、红色、黄色、绿色、灰色
|
||
*/
|
||
.br-dashed {
|
||
border: dashed 1px #EEEEEE !important;
|
||
}
|
||
|
||
.br-b-dashed {
|
||
border-bottom: dashed 1px #EEEEEE !important;
|
||
}
|
||
|
||
.br-t-dashed {
|
||
border-top: dashed 1px #EEEEEE !important;
|
||
}
|
||
|
||
.br-l-dashed {
|
||
border-left: dashed 1px #EEEEEE !important;
|
||
}
|
||
|
||
.br-r-dashed {
|
||
border-right: dashed 1px #EEEEEE !important;
|
||
}
|
||
|
||
.br-dashed-red {
|
||
border: dashed 1px #E22C08 !important;
|
||
}
|
||
|
||
.br-dashed-yellow {
|
||
border: dashed 1px #f6c133 !important;
|
||
}
|
||
|
||
.br-dashed-green {
|
||
border: dashed 1px #1AAD19 !important;
|
||
}
|
||
|
||
.br-dashed-grey {
|
||
border: dashed 1px #d6d6d6 !important;
|
||
}
|
||
|
||
/**
|
||
* 统一颜色
|
||
* 文本基础色、白色、黑色、灰色、浅灰色、红色、黄色、绿色、蓝色
|
||
*/
|
||
.cr-base {
|
||
color: #666 !important;
|
||
}
|
||
|
||
.cr-white {
|
||
color: #fff !important;
|
||
}
|
||
|
||
.cr-black {
|
||
color: #333 !important;
|
||
}
|
||
|
||
.cr-grey,
|
||
.cr-grey-9 {
|
||
color: #999 !important;
|
||
}
|
||
|
||
.cr-grey-c {
|
||
color: #ccc !important;
|
||
}
|
||
|
||
.cr-grey-d {
|
||
color: #ddd !important;
|
||
}
|
||
|
||
.cr-grey-white {
|
||
color: #e7e7e7 !important;
|
||
}
|
||
|
||
.cr-red {
|
||
color: #E22C08 !important;
|
||
}
|
||
|
||
.cr-yellow {
|
||
color: #f6c133 !important;
|
||
}
|
||
|
||
.cr-green {
|
||
color: #1AAD19 !important;
|
||
}
|
||
|
||
.cr-blue {
|
||
color: #2196F3 !important;
|
||
}
|
||
|
||
/**
|
||
* 统一背景色
|
||
* 白色、绿色、红色、黄色、灰色
|
||
*/
|
||
.bg-white {
|
||
background-color: #fff !important;
|
||
}
|
||
|
||
.bg-green {
|
||
background-color: #1AAD19 !important;
|
||
}
|
||
|
||
.bg-red {
|
||
background-color: #E64340 !important;
|
||
}
|
||
|
||
.bg-yellow {
|
||
background-color: #f6c133 !important;
|
||
}
|
||
|
||
.bg-grey {
|
||
background-color: #d6d6d6 !important;
|
||
}
|
||
|
||
.bg-grey-d {
|
||
background-color: #dddddd !important;
|
||
}
|
||
|
||
.bg-grey-e {
|
||
background-color: #eeeeee !important;
|
||
}
|
||
|
||
.bg-grey-f5 {
|
||
background-color: #f5f5f5 !important;
|
||
}
|
||
|
||
.bg-grey-f8 {
|
||
background-color: #f8f8f8 !important;
|
||
}
|
||
|
||
.bg-grey-f9 {
|
||
background-color: #f9f9f9 !important;
|
||
}
|
||
|
||
.bg-base {
|
||
background-color: #f5f5f5 !important;
|
||
}
|
||
|
||
.bg-blue {
|
||
background-color: #2196F3 !important;
|
||
}
|
||
|
||
.bg-black {
|
||
background-color: #333333 !important;
|
||
}
|
||
|
||
button[disabled].bg-white {
|
||
background-color: #fdfdfd !important;
|
||
color: #ccc !important;
|
||
}
|
||
|
||
button[disabled].bg-green {
|
||
background-color: #94de94 !important;
|
||
color: #d5f5d5 !important;
|
||
}
|
||
|
||
button[disabled].bg-red {
|
||
background-color: #ffbaba !important;
|
||
color: #ffdfdf !important;
|
||
}
|
||
|
||
button[disabled].bg-yellow {
|
||
background-color: #fff1cb !important;
|
||
color: #fbd777 !important;
|
||
}
|
||
|
||
button[disabled].bg-grey {
|
||
background-color: #ececec !important;
|
||
color: #ababab !important;
|
||
}
|
||
|
||
/**
|
||
* 表单
|
||
*/
|
||
.form-container .form-gorup {
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.form-container .form-gorup .form-gorup-item-left {
|
||
float: left;
|
||
padding-right: 20rpx;
|
||
}
|
||
|
||
.form-container .form-gorup .form-gorup-item-right {
|
||
float: right;
|
||
padding-left: 20rpx;
|
||
border-left: 1px solid #f7f7f7;
|
||
}
|
||
|
||
.form-container .form-gorup .form-gorup-item-left,
|
||
.form-container .form-gorup .form-gorup-item-right {
|
||
width: calc(50% - 20rpx - 1px);
|
||
}
|
||
|
||
.form-container .form-gorup-submit {
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.form-container .form-gorup:not(.form-gorup-submit) {
|
||
background: #fff;
|
||
}
|
||
|
||
.form-container .form-group-tips,
|
||
.form-container .form-group-tips-must {
|
||
margin-left: 6rpx;
|
||
font-size: 24rpx;
|
||
color: #ccc;
|
||
}
|
||
|
||
.form-container .form-group-tips-must {
|
||
color: #f00;
|
||
}
|
||
|
||
.form-container .form-gorup input,
|
||
.form-container .form-gorup textarea,
|
||
.form-container .form-gorup .picker {
|
||
border-radius: 0;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.form-container .form-gorup input,
|
||
.form-container .form-gorup .picker,
|
||
.form-container .form-gorup .radio-gorup {
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
}
|
||
|
||
.form-container .form-gorup textarea {
|
||
padding: 0;
|
||
height: 150rpx !important;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.form-container .form-gorup-text {
|
||
padding: 20rpx 10rpx;
|
||
}
|
||
|
||
.form-container .form-gorup .switch {
|
||
margin: 30rpx 0 20rpx 0;
|
||
}
|
||
|
||
.form-container .form-gorup .radio-gorup .radio radio {
|
||
transform: scale(0.7);
|
||
}
|
||
|
||
.form-container .form-gorup .radio-gorup .radio:not(:last-child) {
|
||
margin-right: 50rpx;
|
||
}
|
||
|
||
/**
|
||
* 表单图片上传
|
||