@charset "UTF-8"; /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 字体大小变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ .freight-template { width: 100%; height: auto; background: #FFFFFF; float: left; margin: 24rpx 0 34rpx 0; } .freight-template .invoice-freight { width: 702rpx; padding: 0 24rpx; height: 88rpx; line-height: 88rpx; font-size: 28rpx; color: #333333; background: #FFFFFF; float: left; font-weight: bold; } .freight-template .invoice-freight .freight-left { float: left; } .freight-template .invoice-freight .freight-left .icon-yunfeishuoming { height: 100%; padding: 15rpx; color: #FF457B; font-weight: normal; } .freight-template .invoice-freight .freight-right { float: right; color: #2A81FF; } .freight-template .invoice-freight .freight-right .text-l { margin-right: 20rpx; } .freight-template .invoice-freight .freight-right .text { line-height: 88rpx; color: #ff0000; margin: 0 20rpx; font-weight: normal; } .freight-template .invoice-freight .freight-right .icon-chakangengduo { line-height: 88rpx; color: #999999; font-weight: normal; } .freight-ltitle { width: 100%; line-height: 60rpx; height: 60rpx; font-size: 28rpx; color: #333333; } .freight-radio { width: 100%; height: 88rpx; line-height: 88rpx; display: flex; border-bottom: 1px solid #EBEBEB; } .freight-radio .row-group { flex: 1; display: flex; } .freight-radio .row-input { flex: 1; height: 88rpx; line-height: 88rpx; } .freight-radio .row-radio { float: left; -webkit-transform: scale(0.6); transform: scale(0.6); } .freight-radio .row-text { font-size: 24rpx; color: #333333; } .freight-group { width: 100%; height: 88rpx; display: flex; border-bottom: 1px solid #FFFFFF; flex-direction: row; } .freight-group .text { display: block; flex: 1; line-height: 88rpx; font-size: 24rpx; color: #999999; text-align: left; padding-left: 10rpx; } .freight-group .group-from { flex: 1; height: 40rpx; padding: 20rpx; line-height: 40rpx; align-items: flex-start; font-size: 24rpx; color: #333333; background: #F7F7F7; border-radius: 14rpx; margin-bottom: 20rpx; margin-top: 10rpx; } .freight-group .group-from .form-input { height: 40rpx; line-height: 40rpx; flex-grow: 1; } /* 加入购物模态层*/ @-webkit-keyframes showPopup { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes showPopup { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes hidePopup { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes hidePopup { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes showLayer { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes showLayer { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes hideLayer { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes hideLayer { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes showAmnation { 0% { top: -12rpx; opacity: 0; } 50% { top: -60rpx; opacity: 1; } 100% { top: -100rpx; opacity: 0; } } @keyframes showAmnation { 0% { top: -12rpx; opacity: 0; } 50% { top: -60rpx; opacity: 1; } 100% { top: -100rpx; opacity: 0; } } @-webkit-keyframes hideAmnation { 0% { top: -100rpx; opacity: 0; } 100% { top: -12rpx; opacity: 0; } } @keyframes hideAmnation { 0% { top: -100rpx; opacity: 0; } 100% { top: -12rpx; opacity: 0; } } .popup { position: fixed; top: 0; width: 100%; height: 100%; z-index: 999; display: none; } .popup .mask { position: fixed; top: 0; width: 100%; height: 100%; z-index: 21; background-color: rgba(0, 0, 0, 0.6); } .popup .layer { position: fixed; z-index: 22; bottom: -460rpx; width: 702rpx; padding: 24rpx 24rpx 36rpx 24rpx; height: 400rpx; border-radius: 20rpx 20rpx 0 0; background-color: #fff; display: flex; flex-wrap: wrap; align-content: space-between; } .popup .layer .content { width: 100%; } .popup .layer .btn { width: 100%; height: 88rpx; display: flex; } .popup .layer .btn .button { width: 702rpx; height: 88rpx; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28rpx; border-radius: 44rpx; background: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%); } .popup.show { display: block; } .popup.show .mask { -webkit-animation: showPopup 0.2s linear both; animation: showPopup 0.2s linear both; } .popup.show .layer { -webkit-animation: showLayer 0.2s linear both; animation: showLayer 0.2s linear both; } .popup.hide { display: block; } .popup.hide .mask { -webkit-animation: hidePopup 0.2s linear both; animation: hidePopup 0.2s linear both; } .popup.hide .layer { -webkit-animation: hideLayer 0.2s linear both; animation: hideLayer 0.2s linear both; } .popup.none { display: none; } .popup.service .row { margin: 30rpx 0; } .popup.service .row .title { font-size: 30rpx; margin: 10rpx 0; } .popup.service .row .description { font-size: 28rpx; color: #999; } .popup .layer-smimg { width: 114rpx; height: 114rpx; float: left; border-radius: 10rpx; margin-right: 24rpx; } .popup .layer-smimg image { width: 114rpx; height: 114rpx; border-radius: 10rpx; } .popup .layer-nunbox { justify-content: space-between; align-items: center; width: 536rpx; height: 88rpx; padding: 13rpx 0 0 0; float: left; } .popup .layer-nunbox .layer-nunbox-t { width: 100%; height: 44rpx; position: relative; display: flex; } .popup .layer-nunbox .layer-nunbox-t .layer-nunbox-text { line-height: 44rpx; font-size: 28rpx; } .popup .layer-nunbox .layer-nunbox-t .number-box { display: flex; justify-content: center; align-items: center; } .popup .layer-nunbox .layer-nunbox-t .number-box .iconfont { font-size: 32rpx; padding: 0 18rpx; font-size: #333333; } .popup .layer-nunbox .layer-nunbox-t .number-box .btn-input { width: 62rpx; height: 48rpx; line-height: 48rpx; background: #F8F8F8; border-radius: 4rpx; text-align: center; font-size: 28rpx; } .popup .layer-nunbox .layer-nunbox-t .product-step { position: absolute; left: 45rpx; bottom: 0; height: 44rpx; background: #FFFFFF; } .popup .layer-nunbox .layer-nunbox-b { width: 100%; height: 44rpx; margin-top: 13rpx; } .popup .layer-nunbox .text { line-height: 44rpx; font-size: 28rpx; } .popup .layer-nunbox .text .p { color: #FF2A2A; } .popup .layer-nunbox .text .p:first-child { margin-left: 30rpx; } .popup .layer-nunbox .text .p.sm { font-size: 24rpx; }