page{ } html{ font-size: 32rpx; } html,body{ margin: 0; padding: 0; background-color: #efeff4; } body{ font-size: 1rem; } p,ol,ul,li{ margin: 0; padding: 0; } a{ text-decoration: none; color: #323232; } [gourl]{ cursor: pointer; } .iconfont:before{ line-height: 1.5; } view,div{ display: flex; flex-direction: column; color: #323232; box-sizing: border-box; flex-shrink:0; font-size: 28rpx; } text{ display: inline-block; line-height: 1.5; } navigator{ display: flex; color: #323232; text-decoration: none; flex-direction: column; box-sizing: border-box; } /*****详情******/ .d-userbox{ display: flex; flex-direction: row; margin-bottom: 10rpx; padding-bottom: 10rpx; border-bottom: 1px solid #eee; align-items: center; } .d-userbox-head{ width: 120rpx; height: 120rpx; margin-right: 20rpx; border-radius: 50%; } .d-userbox-nick{ font-size: 32rpx; color: #323232; margin-bottom: 10rpx; } .d-userbox-follows{ display: flex; flex-direction: row; color: #646464; } .d-img{ width: 100%; height: auto; } .d-title{ font-size: 32rpx; margin-bottom: 16rpx; color: #323232; } .d-tools{ display: flex; flex-direction: row; margin-bottom: 20rpx; color: #555; font-size: 28rpx; } .d-img{ width: 100%; } .d-content{ font-size: 28rpx; color: #646464; line-height: 1.5; margin-bottom: 20rpx; align-items: baseline; } .d-content img{ max-width: 100% !important; } .market-price{ color: #929292; text-decoration: line-through; font-style: italic; font-size: 28rpx; } /***row-box***/ .row-box{ display: flex; flex-direction: column; background-color: #fff; padding: 20rpx; } .row-box-hd{ display: flex; flex-direction: row; border-bottom: 1px solid #eee; padding-top: 16rpx; padding-bottom: 16rpx; font-size: 32rpx; } .row-box-more{ display: flex; flex-direction: row; align-items: center; font-size: 28rpx; margin-right: 10rpx; color: #646464; } .row-box-more:after{ display: inline-flex; font-family: iconfont; content: "\e6a3"; color: #999; font-size: 32rpx; } /***支付方式****/ .paylist{ display: flex; flex-direction: row; flex-wrap: wrap; } .paylist-item{ border: 1px solid #eee; border-radius: 40rpx; margin-bottom: 20rpx; text-align: center; padding: 20rpx; color: #646464; cursor: pointer; width: 31%; margin-right: 2%; } .paylist-item-active{ color: #f60; border: 1px solid #f60; } .emptyData{ padding: 40rpx; font-size: 40rpx; text-align: center; color: #646464; } /**kslist**/ .kslist{ display: flex; flex-direction: row; align-items: center; padding-left: 20rpx; } .kslist-label{ margin-right: 12rpx; color: #646464; } .kslist-item{ border: 1px solid #eee; padding: 8rpx 16rpx; margin-right: 20rpx; } .kslist-active{ color: #007AFF; } /***fixAdd***/ .fixedAdd { position: fixed; bottom: 200rpx; right: 6rpx; width: 90rpx; height: 90rpx; text-align: center; box-sizing: border-box; background-color: rgba(240,85,75,.82); color: #fff; font-family: iconfont; font-size: 28rpx; padding-top: 10rpx; border-radius: 20rpx; } .fixedAdd:before{ content: "\e7e8"; display: block; font-size: 32rpx; } @keyframes toggle{ from{ opacity: 0; } 30%, 50%, 80%{ opacity: 1; } 90%{ opacity: 0.6; } 100%{ opacity: 0; } } .animated-toggle{ animation-name: toggle; animation-duration: 2s; } @keyframes hide{ from{ opacity: 1; } 30%{ opacity: 0.6; } 60%{ opacity: 0.3; } 70%{ opacity: 0; } 100%{ opacity: 0; } } .animated-hide{ animation-name:hide; } @keyframes show{ from{ opacity: 0; } 10%{ opacity: 0.3; } 60%{ opacity: 0.6; } 80%{ opacity: 1; } 100%{ opacity: 1; } } .animated-show{ animation-name:show; } @keyframes slideInLeft{ from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } .animated-slideInLeft{ animation-name: slideInLeft ; } @keyframes slideOutLeft{ from { transform: translate3d(0, 0, 0); visibility: visible; } to { transform: translate3d(-100%, 0, 0); } } .animated-slideOutLeft{ animation-name: slideOutLeft ; } @keyframes slideInRight{ from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } .animated-slideInRight{ animation-name: slideInRight ; } @keyframes slideOutRight{ from { transform: translate3d(0, 0, 0); visibility: visible; } to { transform: translate3d(100%, 0, 0); } } .animated-slideOutRight{ animation-name: slideOutRight ; } /****动画*****/ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; } .animated.delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s; } .animated.delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s; } .animated.delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s; } .animated.delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s; } .animated.fast { -webkit-animation-duration: 800ms; animation-duration: 800ms; } .animated.faster { -webkit-animation-duration: 500ms; animation-duration: 500ms; } .animated.slow { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.slower { -webkit-animation-duration: 3s; animation-duration: 3s; } @media (prefers-reduced-motion) { .animated { -webkit-animation: unset !important; animation: unset !important; -webkit-transition: none !important; transition: none !important; } }.comment-hd { display: block; padding: 16rpx 0rpx; background-color: #F20C00; color: #fff; width: 180rpx; font-size: 28rpx; text-align: center; } /*****comment-list****/ .comment-list{ } .comment-item { display: flex; flex-direction: row; border-bottom: 1px solid #ddd; margin-bottom: 10rpx; padding: 20rpx; background-color: #fff; } .comment-item-head { margin-right: 10rpx; width: 60rpx; height: 60rpx; } .comment-item-nick { font-size: 32rpx; color: #007AFF; line-height: 1; margin-bottom: 12rpx; } .comment-item-tools { display: flex; flex-direction: row; margin-bottom: 10rpx; line-height: 1; } .comment-item-addr { margin-right: 10rpx; color: #969696; font-size: 24rpx; } .comment-item-time{ color: #969696; font-size: 24rpx; } .comment-item-content { color: #646464; font-size: 28rpx; line-height: 1.5; cursor: pointer; padding: 0; } /*****comment-form*****/ .comment-formbox{ position: fixed; left:0; right: 0; bottom: 0; background-color: #eee; padding: 10rpx 0rpx; } .comment-input-btn{ display: flex; flex-direction: row; position: relative; height: 80rpx; line-height: 80rpx; margin-top: 10rpx; margin-left: 20rpx; margin-right: 20rpx; border-radius: 60rpx; padding-left: 60rpx; background-color: #fff; border: 1px solid #ccc; cursor: pointer; color: #444; } .comment-formbox-form{ display: none; } .comment-formbox-textarea{ height: 160rpx; display: flex; position: relative; padding: 10rpx; width: 90%; margin: 0 auto; border: 1px solid #ddd; border-radius: 10rpx; color: #323232; background-color:#fff; } .comment-input-btn:before{ font-family: iconfont; content: "\e761"; display: inline-flex; font-size: 32rpx; position: relative; left: -40rpx; } .comment-formbox-btns{ text-align: center; padding-top: 20rpx; display: flex; flex-direction: row; justify-content: center; } .comment-formbox-bt{ width: 160rpx; line-height: 72rpx; text-align: center; margin-right: 40rpx; display: inline-block; background-color: #555; color: #fff; border-radius: 20rpx; cursor: pointer; }.input-flex { display: flex; flex-direction: row; margin-bottom: 1px; padding: 20rpx; background-color: #fff; } .input-flex-label { width: 160rpx; line-height: 72rpx; font-size: 32rpx; color: #333; display: block; } .input-flex-require { display: flex; flex-direction: row; position: relative; align-items: center; font-family: iconfont; } .input-flex-require:after{ content:"\e60d"; color:red; position: absolute; left: -20rpx; font-size:24rpx; transform: scale(0.5); } .input-flex-txt { flex: 1; line-height: 72rpx; color: #646464; } .input-flex-text, .input-flex-select { flex: 1; height: 72rpx; box-sizing: border-box; display: block; border: 1px solid #eee !important; padding: 0 10rpx; font-size: 28rpx; margin: 0; width: 200rpx; } .input-flex-select { -webkit-appearance: menulist-button; background-color: #fff; color: #323232; } .input-flex-note { margin-left: 6rpx; color: #666; justify-content: center; } .input-flex-btn { width: 200rpx; height: 72rpx; line-height: 72rpx; background-color: #007bff; box-sizing: border-box; border-top-right-radius: 20rpx; border-bottom-right-radius: 20rpx; margin-left: -10rpx; color: #fff; font-size: 28rpx; text-align: center; cursor: pointer; } /**textarea**/ .textarea-flex { padding: 20rpx; display: flex; flex-direction: column; background-color: #fff; margin-bottom: 10rpx; } .textarea-flex-label { margin-bottom: 20rpx; color: #323232; } .textarea-flex-text { height: 400rpx; border: 1px solid #eee; border-radius: 10rpx; padding: 10rpx; box-sizing: border-box; width:100%; } /****radio****/ .radio-flex { display: flex; flex-direction: row; align-items: center; } .radio { width: 40rpx; height: 40rpx; display: inline-flex; position: relative; } .radioList-item{ border-bottom: 1px solid #eee; padding: 20rpx 20rpx; cursor: pointer; align-items: center; display: flex; flex-direction: row; color: #646464; } .radioList-item:before,.radioList-item-active:before{ font-family: iconfont; font-size: 36rpx; margin-right: 6rpx; } .radioList-item:before{ content: "\e763"; color: #aaa; } .radioList-item-active:before{ content: "\e75b"; color: #0034FF; } /***checkbox****/ .checkbox-flex { display: flex; flex-direction: row; align-items: center; } .checkbox { width: 40rpx; height: 40rpx; display: inline-flex; position: relative; } /**numbot**/ .numbox { display: flex; flex-direction: row; box-sizing: border-box; width: 200rpx; } .numbox-minus, .numbox-plus, .numbox-num { height: 60rpx; line-height: 60rpx; border: 1px solid #eee; box-sizing: border-box; } .numbox-minus, .numbox-plus { display: block; width: 60rpx; font-size: 36rpx; cursor: pointer; text-align: center; } .numbox-num { width: 100%; flex: 1; padding: 0; margin: 0rpx; text-align: center; border: 1px solid #eee; padding-top: 1px; border-radius: 0; border-left: 0rpx; border-right: 0rpx; box-shadow: none; color: #666; } .numbox-minus-small, .numbox-plus-small, .numbox-num-small { height: 60rpx; line-height: 60rpx; border: 1px solid #eee; box-sizing: border-box; } /**End numbot**/ /****switch****/ .switch-group { display: inline-flex; flex-direction: row; width: 128rpx; height: 60rpx; transition-property: background-color, border; border: 4rpx solid #ddd; border-radius: 40rpx; background-color: #fff; box-sizing: border-box; position: relative; } .switch-left, .switch-right { width: 100%; visibility: hidden; line-height: 60rpx; color: #646464; } .switch-left { position: absolute; right: 0rpx; text-align: left; top: -4rpx; left: -4rpx; bottom: 0rpx; padding-left: 20rpx; } .switch-right { position: absolute; right: 0rpx; text-align: right; top: -4rpx; left: -4rpx; bottom: 0rpx; padding-right: 20rpx; padding-left: 60rpx; } .switch-left:after, .switch-right:before { content: "."; width: 60rpx; height: 60rpx; background-color: #007BFF; border-radius: 40rpx; color: #007BFF; position: absolute; top: 0rpx; } .switch-left:after { right: -4rpx; } .switch-right:before { left: -4rpx; } .switch-active { visibility: visible; } /****图片上传****/ .upimg-box { display: flex; flex-direction: row; padding: 20rpx; flex-wrap: wrap; } .upimg-btn { width: 120rpx; height: 120rpx; line-height: 120rpx; font-size: 64rpx; text-align: center; border: 1px solid #eee; margin-right: 20rpx; color: #646464; align-items: center; justify-content: center; cursor: pointer; } .upimg-btn-icon { font-style: normal; } .upimg-btn-icon:before { font-family: iconfont; color: #969696; font-size: 48rpx; font-weight: 100; content: "\e6da"; } .upimg-list { flex: 1; display: flex; flex-direction: row; flex-wrap: wrap; } .upimg-item { position: relative; width: 120rpx; height: 120rpx; margin-right: 20rpx; margin-bottom: 20rpx; } .upimg-del { position: absolute; top: 1px; right: 1px; justify-content: center; align-items: center; } .upimg-del:after { display: flex; font-family: iconfont; flex-direction: column; content: "\e646"; width: 40rpx; height: 40rpx; line-height: 40rpx; text-align: center; cursor: pointer; font-size: 24rpx; color: red; background-color: #e0e0e0; opacity: .6; } .upimg-img { width: 120rpx; height: 120rpx; } .g-hd-1{ font-weight: bold; font-size: 32rpx; color: #323232; border-bottom: 1px solid #eee; padding-bottom: 20rpx; margin-bottom: 20rpx; } .g-hd-2{ font-weight: bold; font-size: 28rpx; color: #323232; border-bottom: 1px solid #eee; padding-bottom: 12rpx; margin-bottom: 12rpx; } .g-hd-3{ font-size: 28rpx; color: #323232; border-bottom: 1px solid #eee; padding-bottom: 10rpx; margin-bottom: 10rpx; } /**g-search-box***/ .g-search-box{ display: flex; flex-direction: row; margin-top: 10rpx; height: 72rpx; border-bottom: 1px solid #ddd; background-color: #fff; } .g-search-input{ flex: 1; border: 0; padding-left: 10rpx; padding-right: 10rpx; } .g-search-btn{ width: 80rpx; justify-content: center; align-items: center; } .g-search-btn:before{ font-family: iconfont; color: #646464; font-size: 36rpx; } /**g-order***/ .g-order{ margin: 0 10rpx; } .g-order:before{ font-family: iconfont; content: "\e79c"; line-height: 1; color: #ddd; } .g-order:after{ font-family: iconfont; content: "\e79b"; line-height: 1; margin-top: -14rpx; color: #ddd; } .g-order-up:before,.g-order-down:after,.g-order-active{ color: #f60; }/***单行列表***/ .row-item,.row-item-text{ display: flex; flex-direction: row; padding-top: 20rpx; padding-bottom: 20rpx; border-bottom: 1px solid #eee; padding-left: 10rpx; padding-right: 10rpx; position: relative; align-items: center; color: #646464; cursor: pointer; font-size: 28rpx; } .row-item-icon{ margin-right: 6rpx; font-family: iconfont; font-style: normal; color: #646464; font-size: 36rpx; } .row-item:after{ display: inline-flex; font-family: iconfont; content: "\e6a3"; color: #999; } .row-item-title{ flex: 1; font-size: 28rpx; } .row-item-text{ cursor:initial; } .row-item-active{ font-weight: bolder; } /**flexlist 单列列表**/ .flexlist{ } .flexlist-item{ display: flex; flex-direction: row; margin-bottom: 10rpx; padding-bottom: 10rpx; border-bottom: 1px solid #eee; padding-left: 10rpx; padding-right: 10rpx; padding-top: 10rpx; background-color: #fff; } .flexlist-img{ width: 120rpx; height: 120rpx; margin-right: 20rpx; } .flexlist-title{ font-size: 32rpx; color: #323232; margin-bottom: 10rpx; } .flexlist-ks{ margin-top: -6rpx; color: #f60; font-size: 24rpx; margin-bottom: 6rpx; } .flexlist-desc{ font-size: 24rpx; color: #969696; margin-bottom: 10rpx; } .flexlist-row{ display: flex; flex-direction: row; align-items: center; color: #646464; font-size: 28rpx; margin-bottom: 10rpx; } /***mtlist 多列 布局****/ .mtlist { display: flex; flex-direction: row; flex-wrap: wrap; padding: 0rpx 0rpx 10rpx 10rpx; } .mtlist-item { width: 50%; padding-right: 10rpx; margin-bottom: 20rpx; box-sizing: border-box; } .mtlist-item-bd { background-color: #fff; padding-bottom: 10rpx; box-sizing: border-box; } .mtlist-item-pd { padding: 0rpx 10rpx; box-sizing: border-box; overflow: hidden; } .mtlist-bgimg-box{ position: relative; height: 0; padding-bottom: 100%; overflow: hidden; display: flex; flex-direction: row; } .mtlist-bgimg{ position: absolute; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; } .mtlist-img { max-width: 100%; height: auto; } .mtlist-item-money { display: flex; flex-direction: row; align-items: flex-end; margin-bottom: 10rpx; padding-top: 10rpx; } .mtlist-item-money-flex { flex: 1; display: flex; flex-direction: row; font-size: 28rpx; color: #ed6d53; align-items: flex-end; } .mtlist-item-money_money { font-size: 32rpx; line-height: 1; } .mtlist-item-money_num { color: #646464; font-size: 28rpx; } .mtlist-title { font-size: 28rpx; color: #323232; margin-bottom: 10rpx; height: 48rpx; line-height: 48rpx; overflow: hidden; text-align: center; } .mtlist-desc { color: #646464; } /***sglist****/ .sglist{} .sglist-item{ padding: 20rpx; background-color: #fff; margin-bottom: 10rpx; display: flex; flex-direction: column; } .sglist-imgbox{ } .sglist-img{ width: 100%; border-radius: 20rpx; margin-bottom: 10rpx; } .sglist-title{ color: #323232; margin-bottom: 10rpx; font-size: 32rpx; } .sglist-imglist{ display: flex; flex-direction: row; flex-wrap: wrap; } .sglist-imglist-img{ width: 120rpx; height: 120rpx; margin-bottom: 20rpx; margin-right: 20rpx; } .sglist-desc{ color: #646464; font-size: 28rpx; margin-bottom: 10rpx; } .sglist-user{ flex:1; display: flex; flex-direction: row; align-items: center; color: #646464; } .sglist-nick{ color: #323232; font-size: 32rpx; } .sglist-uhead{ border-radius: 50%; height: 80rpx; width: 80rpx; margin-right: 10rpx; } .sglist-ft { text-align: center; display: flex; flex-direction: row; padding: 12rpx 12rpx; font-size: 28rpx; } .sglist-ft-love, .sglist-ft-cm, .sglist-ft-view{ display: flex; flex-direction: row; justify-content: center; align-items: center; } .sglist-ft-love:before, .sglist-ft-cm:before, .sglist-ft-view:before { font-family: "iconfont" !important; display: inline-block; margin-right: 8rpx; font-size: 28rpx; } .sglist-ft-love:before { content: "\e669"; } .sglist-ft-cm:before { content: "\e667"; } .sglist-ft-view:before { content: "\e819"; } .sglist-ft-love, .sglist-ft-cm { flex: 1; border-right: 1px solid #eee; } /**flex-table**/ .flex-table{ display: flex; flex-direction: row; border-bottom: 1px solid #eee; padding-top: 16rpx; padding-bottom: 16rpx; } .flex-table-label { margin-right: 20rpx; color: #323232; font-size: 32rpx; font-weight: 500; min-width: 160rpx; text-align: right; } .flex-table-box { flex: 1; padding-top: 4rpx; font-size: 28rpx; color: #646464; } .loadMore{ cursor: pointer; text-align: center; line-height: 72rpx; color: #646464; } .m-navPic{ display: flex; flex-direction: row; background-color: #fff; padding: 20rpx 0rpx 0rpx 0rpx; flex-wrap: wrap; justify-content: center; } .m-navPic-item{ width: 20%; padding: 0rpx 0rpx; text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 30rpx; box-sizing: border-box; } .m-navPic-img{ width: 60rpx; height: auto; margin-bottom: 10rpx; line-height: 1; } .m-navPic-icon{ font-family: iconfont; margin-bottom: 10rpx; } .m-navPic-icon:before{ font-size: 60rpx; color: #ed6d53; } .m-navPic-title{ font-size: 24rpx; color: #323232; }.alert-mask{ background-color: #333; opacity: 0.2; position: fixed; left: 0; right: 0; top:0; bottom: 0; z-index: 98; } .confirm-group,.alert-group{ display: none; z-index: 999; } .alert { position: fixed; top: 50%; width: 520rpx; left: 50%; margin-left: -260rpx; margin-top: -200rpx; z-index: 999; padding: 0rpx; font-size: 28rpx; border-radius: 40rpx; } .alert-bd{ background-color: #fff; } .alert-active{ display: flex; } .alert-header { font-size: 32rpx; width: 100%; text-align: center; height: 72rpx; line-height: 72rpx; background-color: #fafafa; border-top-left-radius: 10rpx; border-top-right-radius: 10rpx; } .alert-msg{ background-color: #fff; padding: 40rpx; text-align: center; font-size: 32rpx; } .alert-close { position: absolute; right: 10rpx; top: 10rpx; } .alert-ft { width: 100%; display: flex; flex-direction: row; justify-content: center; height: 80rpx; text-align: center; background-color: #fafafa; border-bottom-left-radius: 10rpx; border-bottom-right-radius: 10rpx; } .alert-ft-btn { display: inline-flex; flex: 1; margin: 10rpx 0rpx 0rpx 0rpx; font-size: 32rpx; height: 60rpx; line-height: 60rpx; border: 0rpx; padding: 0rpx 20rpx; color: #007aff; font-weight: 600; cursor: pointer; text-align: center; } .alert-ft-success { color: #007aff; } .alert-ft-fail { color: #007aff; } /***toast***/ .toast { position: fixed; bottom: 200rpx; left: 0rpx; right: 0rpx; z-index: 9999; padding:16rpx; font-size: 28rpx; line-height: 1.5; width: 400rpx; text-align: center; color: #fff; background-color: #1E1E1E; margin: 0 auto; } .toast-active { display: flex; } .toast-success { background-color: #27AE60 !important; } .toast-error { background-color: #C0392B !important; } .toast-info { background-color: #F1C40F !important; } /**modal****/ .modal-group{ display: none; } .modal-mask{ background-color: #333; opacity: 0.2; position: fixed; left: 0; right: 0; top:0; bottom: 0; z-index: 98; } .modal{ position: fixed; left:10rpx; right: 10rpx; top: 50%; margin-top: -380rpx; background-color: #fff; border: 1px solid #ddd; border-radius: 40rpx; z-index: 999; } .modal-header{ border-bottom: 1px solid #eee; padding: 0rpx 0rpx 0rpx 30rpx; margin-bottom: 20rpx; font-weight: bold; display: flex; flex-direction: row; line-height: 100rpx; } .modal-title{ flex: 1; font-size: 32rpx; } .modal-close{ font-family: iconfont; width: 100rpx; height:100rpx; line-height: 100rpx; color: #646464; text-align: center; cursor: pointer; } .modal-body{ padding: 0rpx 30rpx 40rpx 30rpx; max-height: 640rpx; overflow-y: auto; } /****header****/ .header-row,.header-row-show{ height: 88rpx; clear: both; } .header,.header-show{ position: fixed; top:0; left:0; right: 0; display: flex; flex-direction: row; background-color: #f7f7f7; padding-top: 14rpx; padding-bottom: 14rpx; align-items: center; z-index: 998; box-shadow: 0 1px 12rpx #ccc; height: 88rpx; box-sizing: border-box; } .header-logo{ width:60rpx; height: 60rpx; margin-right: 10rpx; margin-left: 10rpx; } .header-search-box{ display: flex; flex-direction: row; position: relative; flex: 1; } .header-search-icon{ display: flex; flex-direction: row; align-items: center; font-family: iconfont; position: absolute; left:10rpx; top: 0rpx; bottom: 0; width: 40rpx; color: #646464; font-size: 28rpx; } .header-search{ box-sizing: border-box; flex: 1; height: 68rpx; line-height: 68rpx; border: 1px solid #ddd !important; border-bottom-left-radius: 10rpx; border-top-left-radius: 10rpx; border-bottom-right-radius: 0; border-top-right-radius: 0; padding-left: 52rpx; font-size: 28rpx; color: #646464; background-color: #fafafa; } .header-search-btn{ height: 68rpx; line-height: 68rpx; margin-right: 4rpx; border:0; border-radius: 0; border-bottom-right-radius: 10rpx; border-top-right-radius: 10rpx; padding: 0rpx 24rpx; background-color: #e0e0e0; color: #666; font-size: 28rpx; display: flex; flex-direction:row; align-items:center; cursor: pointer; } .header-back{ margin-right: 10rpx; cursor: pointer; position: absolute; } .header-back:after{ font-family: "iconfont" !important; content: "\e679"; width: 60rpx; height: 60rpx; line-height: 60rpx; justify-content: center; color: #646464; display: inline-flex; font-size: 40rpx; } .header-back-fixed{ position: fixed; left: 0rpx; top: 10rpx; width: 80rpx; height: 80rpx; border-radius: 50%; line-height: 80rpx; color: #646464; font-size: 40rpx; text-align: center; cursor: pointer; } .header-back-fixed:after{ font-family: "iconfont" !important; content: "\e679"; } .header-title{ color: #333; font-size: 32rpx; text-align: center; flex: 1; line-height: 60rpx; height: 60rpx; overflow: hidden; padding:0rpx 60rpx; } .header-right{ margin-right: 10rpx; color: #646464; line-height: 60rpx; } .header-right-btn{ margin-right: 10rpx; color: #969696; line-height: 52rpx; padding: 0rpx 20rpx; border:1px solid #969696; border-radius: 10rpx; cursor: pointer; position: absolute; right: 10rpx; } .header-fixtop{ position: fixed; top:0rpx; left:0rpx; right: 0; display: flex; flex-direction: row; z-index: 9990; } .header-fixtop-right{ position: fixed; top:0rpx; right: 0; display: flex; flex-direction: row; z-index: 9990; } .header-fixtop-icon:before{ font-family: iconfont; color: #fff; font-size: 36rpx; margin-right: 20rpx; height: 88rpx; line-height: 88rpx; } /****main-body*****/ .main-body{ } /******footer*******/ .footer-row{ height: 100rpx; } .footer{ position: fixed; bottom: 0rpx; left: 0rpx; right: 0rpx; z-index: 100; background-color: #fafafa; border-top: 1px solid #eee; font-size: 28rpx; display: flex; flex-direction: row; align-items: center; } .footer-item { display: flex; flex-direction: column; position: relative; text-align: center; flex: 1; text-decoration: none; color: #929292; padding: 14rpx 0rpx; line-height: 1.4; height: 100rpx; box-sizing: border-box; } .footer-item:before{ font-family:"iconfont" !important; font-size:32rpx; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #929292; line-height: 1; margin-bottom: 1px; } .footer-item-num { color: #929292; position: absolute; right: 6rpx; top: 8rpx; border-radius: 50%; border: 1px solid #eee; width: 32rpx; height: 32rpx; font-size: 24rpx; line-height: 32rpx; } .footer-add:after { font-family: iconfont; content: "\e6da"; font-size: 36rpx; position: absolute; width: 72rpx; height: 72rpx; line-height: 72rpx; top: -32rpx; left: 50%; margin-left: -36rpx; z-index: 99; background-color: #d3d3d3; color: #666; border-radius: 50%; } .footer-add:before{ content: "a"; visibility: hidden; } .footer-active,.footer-active:before{ color: #007bff; } .footerBox{ position: fixed; bottom: 0rpx; left: 0rpx; right: 0rpx; z-index: 100; background-color: #fafafa; border-top: 1px solid #eee; font-size: 28rpx; display: flex; flex-direction: row; align-items: center; } .footerFix{ position: fixed; bottom: 0rpx; left: 0rpx; right: 0rpx; z-index: 100; } .back-top{ position: fixed; right: 20rpx; bottom:200rpx; background-color: #009688; width: 80rpx; height: 80rpx; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; } .back-top-icon{ font-family: iconfont; line-height: 1; } .back-top-icon:after{ content:"\e603"; font-size: 24rpx; color: #fff; } .back-top-text{ font-size: 24rpx; line-height: 1; font-weight: 300; color: #fff; } /****tabs-border***/ .tabs-border{ display: flex; flex-direction: row; border-bottom: 1px solid #eee; line-height: 72rpx; padding: 0rpx 10rpx; background-color: #fff; } .tabs-border-item{ flex: 1; text-align: center; cursor: pointer; } .tabs-border-item-inner{ padding: 0rpx 40rpx; } .tabs-border-active{ border-bottom: 1px solid #f60; } .tabs-border-box{ display: none; flex-direction: column; } .tabs-border-box-active{ display: flex; } /*****竖排 tabs-toggle******/ .tabs-toggle{ background-color: #fff; padding:0rpx 10rpx; } .tabs-toggle-hd{ line-height: 72rpx; flex: 1; display: flex; flex-direction: row; position: relative; border-bottom: 1px solid #f0f0f0; } .tabs-toggle-hd:after{ font-family: iconfont; content: "\e661"; color: #646464; font-size: 28rpx; position: absolute; right: 1px; } .tabs-toggle-hd-active{ margin-bottom: 10rpx; border-bottom: 1px solid #fafafa; } .tabs-toggle-hd-active:after{ content: "\e6de"; } .tabs-toggle-box{ display: none; padding-bottom: 20rpx; } .tabs-toggle-active{ display: block; border-bottom: 1px solid #eee; } /****tab-select*****/ .tab-select-section { display: block; position: relative; } .tab-select { border-bottom: 1px solid #ccc; background-color: #fff; color: #0088CC; display: flex; flex-direction: row; } .tab-select-item { display: flex; flex-direction: row; flex: 1; align-items: center; justify-content: center; position: relative; padding: 30rpx 0rpx; font-size: 28rpx; cursor: pointer; } .tab-select-label { display: flex; flex-direction: row; position: relative; margin-right: 6rpx; justify-content: center; align-items: center; font-size: 28rpx; color: #646464; } .tab-select-t3up { display: inline-block; width: 0; height: 0; border-left: 8rpx solid transparent; border-right: 8rpx solid transparent; border-bottom: 12rpx solid #323232; margin-left: 10rpx; margin-top: 6rpx; } .tab-select-t3down { width: 0; height: 0; display: inline-block; border-left: 8rpx solid transparent; border-right: 8rpx solid transparent; border-top: 12rpx solid #323232; margin-left: 10rpx; margin-top: 6rpx; } .tab-select-b { width: 1px; height: 32rpx; background: #ccc; margin-right: 10rpx; margin-left: 10rpx; } /***.tab-select-box**/ .tab-select-box { display: none; border: 1px solid #ccc; border-left: 0rpx; border-right: 0rpx; position: absolute; top: 100rpx; left: 0rpx; right: 0rpx; padding: 10rpx; background-color: #fff; z-index: 999; } .tab-select-catbox{ display: flex; flex-direction: row; } .tab-select-box-item { height: 80rpx; line-height: 80rpx; display: block; text-decoration: none; color: #999; font-size: 0.9em; padding-left: 6rpx; cursor: pointer; border-bottom: 1px solid #ccc; } .tab-select-box1 { width: 200rpx; background-color: #f9f9f9; float: left; } .tab-select-box2 { flex: 1; padding: 0rpx 20rpx; background-color: #fff; float: left; } .tab-select-box-pd { padding: 0rpx 20rpx; } .tab-select-box1item { height: 80rpx; line-height: 80rpx; display: block; text-decoration: none; color: #999; font-size: 28rpx; padding-left: 6rpx; cursor: pointer; } .tab-select-box1item-active { color: #1AB9AC; } .tab-select-box2item { height: 80rpx; display: none; line-height: 80rpx; text-decoration: none; color: #999; font-size: 28rpx; border-bottom: 1px solid #ccc; cursor: pointer; } .tab-select-box2item-active { color: #239EF7; } .tab-select-show { display: block; }/****raty评价组件***/ .raty-group{ display: flex; flex-direction: row; } .raty-label{ margin-right: 20rpx; } .raty-row{ position: relative; height: 34rpx; } .raty-item{ position: absolute; left: 0; top: 0; display: flex; flex-direction: row; } .raty-no,.raty-yes,.raty-yes-half:before{ background-size: 100%; width: 34rpx; height: 34rpx; background-repeat: no-repeat; cursor: pointer; } .raty-yes-half{ width: 16rpx; height: 34rpx; overflow: hidden; } .raty-no{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAbCAYAAABvCO8sAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+nhxg7wAAAdBJREFUSIm91rtrFFEUwOFvk1VJ8EWK/AGCQQUfGBUCivhEN66pfKGNVSxEbNPY2FhY2miVRhttLCxMobAgaCFYpFAsRAu1sfCBD8RHcWdxMszM7tx1c5qZc8498+OeOefcW2u1WiLkMB7gR9XAgRgazuBQTGA9ImYwgdVwt2pwzA53YgRNDC8GsJk8l6OxGMDJ1PvJfgPXYl1Kb2BFP4FHM/qQfynuC3Ayx1YprVWAq4QKzcpBrO72I3VMYSJlG8TKHH0US3K+sQxP8Dl5H87EtWUppuuYwz6cF5o5RsY6+J/jGOYH8A0XhOnxLhJYJjexHfMs/Idz2Ig7/wn0HdPC3P3SNmaL5oOw9bP41APspVAXN7KOoiqdxRY8ioDdxjY8y3OWtcUr7MbVCrBZHFeSnU59+EtIc7eyvtOCbhr/SAXgDqzpBThq4VDoJDUhpdHARsGat7hfEHOqF+BUju0hxoWL1Dl8zfg3YUMMcAj7U/ofXMYBvE/069iKp5nYEzHAvcI1glCpTVwSKjctL4T/fAW/E1vhkVUGbB+2j4Vd3CtZ+xMz2IPXwjAfrwKsCe1wTWj+NyWwtLSwGbcUpLXoXjqGi8KYqiofcRq156rpx/AS4ERUV8O+XDAAAAAElFTkSuQmCC); } .raty-yes,.raty-yes-half:before{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAbCAYAAABvCO8sAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+nhxg7wAAAx1JREFUSIm1lU9IFFEcx39vZvbtzOyYrq2sorsiIZFQUiFamVlUlBVkRJmpoKcudYgOWQQF0alLXboEC1qElxKC8FSiUVEQIf3DEnN3dVtd3dJt3J15816HsNx11J2N/Z3mfX+/7+/zHvP+IPYQLEdIbLyic3m3vKpv1qpXsI4DkIyxDgAmAcAlq17OqsEvt2OFfCmVDH+zVW9GQIHNnhHYHMohH71+ud2VdaDdCLcCAPAsjjCdvph1oMMY3bTwLRn+pqwCg1LzPtEYxwvjHPKpOCC3FmUNiOnk2SQzS4CNRi9nDSgbgdql2tjxrAADcpvHQUacqbpCPrsDcltpun3QxJOjNzCd2f1PYjwHupI0ZprMs1+KQobzzJrE+SKNgkgQ6BzHdB4AAAFFHJvn/4KAoCn73juCzjlv2ulkQ772shKApTvRpBCNEAYAvFw+zhdrEVx7smS+pxct3KUTYmOnS+u/jmnU8lFZKX7Ytn6bs1XUeNTuMAAAWnx5++W28lx96Gmu/q7kf0EUYZjCe+65E32ti3Vk9lqExUN3XYlnHTxTUSawOF+kT+O61uL5np7UnCkQACAona5z6q8fO8iXNVZgP22bg7O2jTUetWvcLL8sEODPy+AgX5+v1Qar0oFFbVVfnfqb8pVqVtwgXtWnUWSfSQcGAIDZdOFqNavuSNkY25Yu0EFGlaB0alfGwIDUUuEgIxb+IQM7nerMGIhZ9DwAXaJrnNOYEyoiZh6FDGe+QtEINKRqMWF9NCwe3hLF1e6w/cB9isSkvGT4xaDUdMQy0C+35ytkeNEmQBCx1w/O4O2FHrV7yKv6qDvR1zIhNh5U+TI1aaI0fMEy0EZ/nONZHAEAELSGhcSj11yJ/jqv6tMW15XMP+iL2OsLIrju1UI7hXyusQwUaegEAMAvYV3su3h4e1H80dXlar2qT3VpA9smpGPnNK6AiEYIj0snW8xqTQ++X27nCuO9WkzY8CEmrN/hVX2x5WCpEZDbPDn6+wEDOSbXaoPVqXnTFXIsvn8G77ydr72otAIDAPCoXYE8/W1Zgnd3meV/Ax9BMLJHjs9pAAAAAElFTkSuQmCC); } .raty-yes-half:before{ content: "."; color: #fff; display: block; } /*****button*******/ button{ border: 0; } .btn { padding: 16rpx 40rpx; background-color: #007AFF; color: #fff; font-size: 28rpx; display: inline-flex; cursor: pointer; border-radius: 20rpx; text-align: center; line-height: 1; } .btn-small { padding: 12rpx 20rpx; font-size: 28rpx; background-color: #007AFF; color: #fff; display: inline-flex; cursor: pointer; line-height: 1; border-radius: 10rpx; text-align: center; } .btn-mini { padding: 8rpx 8rpx; font-size: 24rpx; background-color: #007AFF; color: #fff; display: inline-flex; cursor: pointer; line-height: 1; text-align: center; border-radius: 10rpx; } .btn-icon{ display: flex; flex-direction: row; } .btn-icon:before{ font-family: iconfont; display: inline-flex; font-size: 28rpx; margin-right: 10rpx; } .btn-row-submit { margin: 40rpx auto; background-color: #007bff; text-align: center; padding: 24rpx 0rpx; line-height: 1; color: #fff !important; font-size: 32rpx; border-radius: 12rpx; cursor: pointer; display: block; box-sizing: border-box; width: 96%; } .btn-group{ display: flex; flex-direction: row; justify-content: center; } .btn-primary { color: #fff; background-color: #007bff; border-color: #007bff; } .btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; } .btn-success { color: #fff; background-color: #28a745; border-color: #28a745; } .btn-info { color: #fff; background-color: #17a2b8; border-color: #17a2b8; } .btn-warning { color: #fff; background-color: #ffc107; border-color: #ffc107; } .btn-danger { color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-light { color: #999; background-color: #f8f9fa; border-color: #f8f9fa; } .btn-dark { color: #fff; background-color: #343a40; border-color: #343a40; } .btn-disable{ background-color: #eee; color: #999; } .btn-outline-primary { color: #007bff; background-color: transparent !important; background-image: none; border: 1px solid #007bff; } .btn-outline-secondary { color: #6c757d; background-color: transparent !important; background-image: none; border: 1px solid #6c757d; } .btn-outline-success { color: #28a745; background-color: transparent !important; background-image: none; border: 1px solid #28a745; } .btn-outline-info { color: #17a2b8; background-color: transparent !important; background-image: none; border: 1px solid #17a2b8; } .btn-outline-warning { color: #ffc107; background-color: transparent !important; background-image: none; border: 1px solid #ffc107; } .btn-outline-danger { color: #dc3545; background-color: transparent !important; background-image: none; border: 1px solid #dc3545; } .btn-outline-light { color: #f8f9fa; background-color: transparent !important; background-image: none; border: 1px solid #f8f9fa; } .btn-outline-dark { color: #343a40; background-color: transparent !important; background-image: none; border: 1px solid #343a40; } .btn-link { font-weight: 400; color: #007bff; background-color: transparent !important; border: 0; } .btn-round { width: 120rpx; height: 120rpx; background-color: #f60; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-family: iconfont; } .btn-round:before { font-size: 48rpx; } /****点赞 喜欢按钮****/ .btn-love { cursor: pointer; display: flex; flex-direction: row; align-items: center; padding: 0 20rpx; height: 72rpx; border: 1px solid #aaa; color: #333; border-radius: 20rpx; font-size: 28rpx; } .btn-love:before { font-family: iconfont; content: "\e669"; font-size: 28rpx; margin-right: 6rpx; } .btn-love-active { color: #f30; } .btn-love-active:before { color: #f30; } .btn-fav { cursor: pointer; display: flex; flex-direction: row; align-items: center; font-size: 28rpx; padding: 0 20rpx; height: 72rpx; border: 1px solid #aaa; color: #333; border-radius: 20rpx; } .btn-fav:before { font-family: iconfont; content: "\e64c"; font-size: 28rpx; margin-right: 6rpx; } .btn-fav-active { color: #f30; } .btn-fav-active:before { color: #f30; } .btn-fav-small,.btn-love-small{ height: 52rpx; } .btn-share { cursor: pointer; display: flex; flex-direction: row; align-items: center; padding: 0 20rpx; height: 72rpx; background-color: transparent; border: 1px solid #00BCD4; color: #00BCD4; border-radius: 20rpx; font-size: 28rpx; } .btn-share:before { font-family: iconfont; content: "\e7ed"; font-size: 28rpx; margin-right: 6rpx; } .btn-comment { display: flex; flex-direction: row; align-items: center; font-size: 28rpx; padding: 0 20rpx; height: 72rpx; border: 1px solid #aaa; color: #333; border-radius: 20rpx; } .btn-comment:before { font-family: iconfont; content: "\e7ee"; font-size: 28rpx; margin-right: 6rpx; } .btn-comment-active { color: #f30; } .btn-comment-active:before { color: #f30; } .btn-fav,.btn-love,.btn-comment{ cursor: pointer; } .btn-fav-small,.btn-love-small,.btn-comment-small{ height: 52rpx; } /**购买按钮****/ .btn-buy{ width: 72rpx; height: 72rpx; line-height: 72rpx; color: #fff; text-align: center; border-radius: 50%; background-color: #007bff; cursor: pointer; align-items: center; justify-content: center; } .btn-buy-small{ width: 50rpx; height: 50rpx; line-height: 50rpx; background-color:transparent; border:1px solid #007bff; } .btn-buy-small:before{ font-size: 28rpx; } /******end btn******/ /** * @author 老雷 362606856@qq.com */ /*****定义flex*****/ .pointer{ cursor: pointer; } .none{display: none !important;} .yes,.no{ cursor: pointer; } .yes:after,.no:after{ display: inline-block; font-family: iconfont; font-size: 32rpx; color: #15aba5; } .yes:after{ content: "\e645"; } .no:after{ content: "\e646"; color: #ccc; } .block{ display: block; } .inlineblock{ display: inline-block; } .flex{ display: flex!important; flex-direction: row!important; } .flex-col{ display: flex!important; flex-direction: column!important; } .flex-1{ flex: 1; } .flex-wrap{ flex-wrap: wrap; } /***定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分***/ .flex-ai-stretch{ align-items: stretch;} .flex-ai-start{ align-items: flex-start;} .flex-ai-end{ align-items: flex-end;} .flex-ai-center{ align-items: center;} /***定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分***/ .flex-jc-start{justify-content: flex-start;} .flex-jc-end{justify-content: flex-end;} .flex-jc-center{justify-content: center;} .flex-jc-bettwen{justify-content: space-between;} .flex-center{text-align: center;justify-content:center;align-items: center;} /****浮动****/ .fr{ float: right;} .fl{float: left;} .clearfix{clear: both; display: flex; width: 100%;} .text-right{ text-align: right !important; } .text-center{ text-align: center !important; } .text-left{ text-align: left !important; } /****定位*****/ .pos-fixed{position: fixed !important;} .pos-abs{position: absolute !important;} .pos-relative{position: relative !important;} /**高度宽度**/ .wh-30{ width: 60rpx; height: 60rpx;} .wh-40{width: 80rpx; height: 80rpx;} .wh-60{ width: 120rpx !important; height: 120rpx !important;} .wh-100{width:200rpx; height: 200rpx;} .wh-150{width: 300rpx; height: 300rpx;} .wh-200{width: 400rpx; height: 400rpx;} .wmax{ max-width: 100%; height:auto;} .w50{width: 100rpx !important;flex: none;} .w60{width: 120rpx !important;flex: none;} .w100{width: 200rpx !important;flex: none;} .w150{width: 300rpx !important;flex: none;} .w200{width: 400rpx !important;flex: none;} .w300{width: 600rpx !important;flex: none;} .h30{ height: 60rpx !important;} .h60{height:120rpx !important;} .h100{ height: 200rpx !important;} .h160{height: 320rpx !important;} .h200{height: 400rpx !important;} /***fontsize**/ .f36{ font-size: 72rpx !important;} .f28{ font-size: 56rpx !important;} .f22{font-size: 44rpx!important;} .f20{font-size: 40rpx!important;} .f18{font-size: 36rpx!important;} .f16{font-size: 32rpx!important;} .f14{font-size:28rpx!important;} .f12{font-size: 24rpx!important;} .fw-600{font-weight:600;} /***col1 2 3 内容字体差异 主标题 副标题 描述****/ .cl1{color: #323232!important;} .cl2{color: #646464!important;} .cl3{color: #969696!important;} .cl-f30{color: #f30 !important;} .cl-red{color: #c12725 !important;} .cl-primary { color: #007bff!important;} .cl-secondary {color: #6c757d!important;} .cl-success{color: #28a745!important;} .cl-danger{color: #dc3545!important} .cl-warning{color: #ffc107!important} .cl-info { color: #17a2b8!important;} .cl-light { color: #f8f9fa!important;} .cl-dark{color:#343a40!important;} .cl-muted {color: #6c757d!important;} .cl-white{color: #fff !important;} .cl-money{color: #FF6600!important;} .cl-num{color: #f70!important;} .cl-status{color: #f70!important;} /***background-color***/ .bg-ef{ background-color: #efefef !important;} .bg-fff{background-color: #fff!important;} .bg-f30{ background-color: #f30 !important; } .bg-primary { background-color: #007bff!important;} .bg-secondary { background-color: #6c757d!important; } .bg-success { background-color: #28a745!important; } .bg-danger { background-color: #dc3545!important; } .bg-warning { background-color: #ffc107!important; } .bg-info { background-color: #17a2b8!important; } .bg-light { background-color: #f8f9fa!important; } .bg-dark { background-color: #343a40!important; } .bg-white { background-color: #fff!important; } .bg-transparent {background-color: transparent !important;} .bg-royal{background-color:#8a6de9 !important;} .bg-disabled{background-color:#FBFBFB !important;} /****固定颜色****/ /***padding****/ .pd-5{padding: 10rpx !important;} .pdl-5{padding-left: 10rpx !important;} .pdr-5{padding-right: 10rpx !important;} .pdt-5{padding-top: 10rpx !important;} .pdb-5{padding-bottom: 10rpx !important;} .pd-10{padding: 20rpx !important;} .pdl-10{padding-left: 20rpx !important;} .pdr-10{padding-right: 20rpx !important;} .pdt-10{padding-top: 20rpx !important;} .pdb-10{padding-bottom: 20rpx !important;} .pdb-30{padding-bottom: 60rpx !important;} .pdt-0{ padding-top: 0rpx !important;} /***margin****/ .mg-5{margin: 10rpx!important;} .mgb-5{margin-bottom: 10rpx!important;} .mgt-5{margin-top: 10rpx!important;} .mgl-5{margin-left: 10rpx!important;} .mgr-5{margin-right: 10rpx!important;} .mg-10{margin: 20rpx!important;} .mgb-10{margin-bottom: 20rpx!important;} .mgt-10{margin-top: 20rpx!important;} .mgl-10{margin-left: 20rpx!important;} .mgr-10{margin-right: 20rpx!important;} .mgr-20{ margin-right: 40rpx !important;} .mgb-20{margin-bottom: 40rpx!important;} .mgl-20{margin-left: 40rpx !important;} .mgt-20{margin-top: 40rpx !important;} .mgb-0{margin-bottom: 0rpx !important;} /***border***/ .bd-mp-5{ border-bottom: 1px solid #eee !important; padding-bottom: 10rpx !important; margin-bottom: 10rpx !important; } .bd-mp-10{ border-bottom: 1px solid #eee !important; padding-bottom: 20rpx !important; margin-bottom: 20rpx !important; } .bd-mp-0{ border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } .bd { border: 1px solid #dee2e6 !important; } .bdt { border-top: 1px solid #dee2e6 !important;} .bdr {border-right: 1px solid #dee2e6 !important; } .bdb { border-bottom: 1px solid #dee2e6 !important;} .bdl { border-left: 1px solid #dee2e6 !important;} .bd-0 { border: 0 !important; } .bdt-0 { border-top: 0 !important; } .bdr-0 { border-right: 0 !important; } .bdb-0 { border-bottom: 0 !important; } .bdl-0 { border-left: 0 !important; } /***border-color**/ .bd-primary { border-color: #007bff !important;} .bd-secondary { border-color: #6c757d !important; } .bd-success {border-color: #28a745 !important;} .bd-info { border-color: #17a2b8 !important; } .bd-warning { border-color: #ffc107 !important; } .bd-danger { border-color: #dc3545 !important; } .bd-light { border-color: #f8f9fa !important; } .bd-dark { border-color: #343a40 !important; } .bd-white { border-color: #fff !important; } /****border-radius***/ .bd-radius-5{border-radius: 10rpx;} .bd-radius-10{ border-radius: 20rpx; } .bd-radius-20{ border-radius: 40rpx; } .bd-radius-50{ border-radius: 50%; } .bc-recommend, .bc-red{ border: 1px solid #007AFF; line-height: 1; padding: 4rpx; border-radius: 50%; font-size: 24rpx; color: #007AFF; align-self: center; } .bc-red { border: 1px solid #f00; color: #f00; }