@charset "UTF-8"; /* 页面左右间距 */ /* 文字尺寸 */ /*文字颜色*/ /* 边框颜色 */ /*颜色*/ /* 图片加载中颜色 */ /* 行为相关颜色 */ /* 功能栏字体大小 */ /*功能栏左侧小图标*/ page { background: #f8f8f8; padding-bottom: 100rpx; } .navbar { display: flex; height: 80rpx; padding: 0 5px; background: #fff; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06); position: relative; z-index: 10; } .navbar .nav-item { flex: 1; display: flex; justify-content: center; align-items: center; height: 100%; font-size: 36rpx; color: #303133; position: relative; } .navbar .nav-item.current { color: #ff4e4a; } .navbar .nav-item.current:after { content: ''; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 140rpx; height: 0; border-bottom: 2px solid #ff4e4a; } .address-section { padding: 30rpx 0; background: #fff; position: relative; border-top: 1px solid #ebeef5; } .address-section .order-content { min-height: 100rpx; display: flex; align-items: center; } .address-section .order-content .addAddress { text-align: center; width: 100%; display: flex; justify-content: center; align-items: center; } .address-section .order-content .addAddress .iconaddition { font-size: 55rpx; line-height: 1; border-radius: 100rpx; margin-right: 20rpx; } .address-section .iconlocation { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 90rpx; color: #888; font-size: 44rpx; } .address-section .cen { display: flex; flex-direction: column; flex: 1; font-size: 28rpx; color: #303133; } .address-section .name { font-size: 34rpx; margin-right: 24rpx; } .address-section .address { margin-top: 16rpx; margin-right: 20rpx; color: #909399; } .address-section .icon-you { font-size: 32rpx; color: #909399; margin-right: 30rpx; } .address-section .a-bg { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 5rpx; } .goods-section { margin-top: 16rpx; background: #fff; padding-bottom: 1px; } .goods-section .g-header { display: flex; align-items: center; height: 84rpx; padding: 0 30rpx; position: relative; } .goods-section .logo { display: block; width: 50rpx; height: 50rpx; border-radius: 100px; } .goods-section .name { font-size: 30rpx; color: #606266; margin-left: 24rpx; } .goods-section .g-item { display: flex; margin: 20rpx 30rpx; } .goods-section .g-item image { flex-shrink: 0; display: block; width: 140rpx; height: 140rpx; border-radius: 4rpx; } .goods-section .g-item .right { flex: 1; padding-left: 24rpx; overflow: hidden; } .goods-section .g-item .title { font-size: 30rpx; color: #303133; } .goods-section .g-item .spec { font-size: 26rpx; color: #909399; } .goods-section .g-item .price-box { display: flex; align-items: center; font-size: 32rpx; color: #303133; padding-top: 10rpx; } .goods-section .g-item .price-box .price { margin-bottom: 4rpx; color: #dd524d; } .goods-section .g-item .price-box .number { font-size: 26rpx; color: #606266; margin-left: 20rpx; } .goods-section .g-item .step-box { position: relative; } .yt-list { margin-top: 16rpx; background: #fff; } .yt-list-cell { display: flex; align-items: center; padding: 10rpx 30rpx 10rpx 40rpx; line-height: 70rpx; position: relative; } .yt-list-cell.cell-hover { background: #fafafa; } .yt-list-cell.b-b:after { left: 30rpx; } .yt-list-cell .cell-icon { height: 32rpx; width: 32rpx; font-size: 22rpx; color: #fff; text-align: center; line-height: 32rpx; background: #f85e52; border-radius: 4rpx; margin-right: 12rpx; } .yt-list-cell .cell-icon.hb { background: #ffaa0e; } .yt-list-cell .cell-icon.lpk { background: #3ab54a; } .yt-list-cell .cell-more { align-self: center; font-size: 24rpx; color: #909399; margin-left: 8rpx; margin-right: -10rpx; } .yt-list-cell .cell-tit { flex: 1; font-size: 26rpx; color: #909399; margin-right: 10rpx; } .yt-list-cell .cell-tip { font-size: 26rpx; color: #303133; } .yt-list-cell .cell-tip.disabled { color: #909399; } .yt-list-cell .cell-tip.active { color: #ff4e4a; } .yt-list-cell .cell-tip.red { color: #ff4e4a; } .yt-list-cell.desc-cell .cell-tit { max-width: 90rpx; } .yt-list-cell .desc { flex: 1; text-align: right; font-size: 28rpx; color: #303133; } /* 支付列表 */ .pay-list { padding-left: 40rpx; margin-top: 16rpx; background: #fff; } .pay-list .pay-item { display: flex; align-items: center; padding-right: 20rpx; line-height: 1; height: 110rpx; position: relative; } .pay-list .icon-weixinzhifu { width: 80rpx; font-size: 40rpx; color: #6bcc03; } .pay-list .icon-alipay { width: 80rpx; font-size: 40rpx; color: #06b4fd; } .pay-list .icon-xuanzhong2 { display: flex; align-items: center; justify-content: center; width: 60rpx; height: 60rpx; font-size: 40rpx; color: #ff4e4a; } .pay-list .tit { font-size: 32rpx; color: #303133; flex: 1; } .footer { position: fixed; left: 0; bottom: 0; z-index: 995; display: flex; align-items: center; width: 100%; height: 90rpx; justify-content: space-between; font-size: 30rpx; background-color: #fff; z-index: 998; color: #606266; box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1); } .footer .price-content { padding-left: 30rpx; } .footer .price-tip { color: #606266; margin-left: 8rpx; } .footer .price { font-size: 36rpx; color: #606266; } .footer .submit { display: flex; align-items: center; justify-content: center; width: 280rpx; height: 100%; color: #fff; font-size: 32rpx; background-color: #ff4e4a; } .footer .submit.submitNo { background-color: #c0c4cc; } /* 优惠券面板 */ .mask { display: flex; align-items: flex-end; position: fixed; left: 0; top: 0px; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0); z-index: 9995; transition: 0.3s; } .mask .mask-content { width: 100%; max-height: 70vh; background: #f3f3f3; -webkit-transform: translateY(100%); transform: translateY(100%); transition: 0.3s; overflow-y: scroll; } .mask.none { display: none; } .mask.show { background: rgba(0, 0, 0, 0.4); } .mask.show .mask-content { -webkit-transform: translateY(0); transform: translateY(0); } /* 优惠券列表 */ .coupon-item { display: flex; flex-direction: column; margin: 20rpx 24rpx; background: #fff; } .coupon-item .con { display: flex; align-items: center; position: relative; height: 120rpx; padding: 0 30rpx; } .coupon-item .con:after { position: absolute; left: 0; bottom: 0; content: ''; width: 100%; height: 0; border-bottom: 1px dashed #f3f3f3; -webkit-transform: scaleY(50%); transform: scaleY(50%); } .coupon-item .left { display: flex; flex-direction: column; justify-content: center; flex: 1; overflow: hidden; height: 100rpx; } .coupon-item .title { font-size: 32rpx; color: #303133; margin-bottom: 10rpx; } .coupon-item .time { font-size: 24rpx; color: #909399; } .coupon-item .right { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 26rpx; color: #606266; height: 100rpx; } .coupon-item .price { font-size: 44rpx; color: #ff4e4a; } .coupon-item .price:before { content: '¥'; font-size: 34rpx; } .coupon-item .tips { font-size: 24rpx; color: #909399; line-height: 60rpx; padding-left: 30rpx; } .coupon-item .circle { position: absolute; left: -6rpx; bottom: -10rpx; z-index: 10; width: 20rpx; height: 20rpx; background: #f3f3f3; border-radius: 100px; } .coupon-item .circle.r { left: auto; right: -6rpx; }