@charset "UTF-8"; /* 页面左右间距 */ /* 文字尺寸 */ /*文字颜色*/ /* 边框颜色 */ /*颜色*/ /* 图片加载中颜色 */ /* 行为相关颜色 */ /* 功能栏字体大小 */ /*功能栏左侧小图标*/ page, .content { background: #f8f8f8; height: 100%; } .swiper-box { height: calc(100% - 40px); } .list-scroll-content { height: 100%; } .navbar { display: -webkit-box; display: -webkit-flex; display: flex; height: 40px; padding: 0 5px; background: #fff; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06); position: relative; z-index: 10; } .navbar .nav-item { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; height: 100%; font-size: 15px; color: #303133; position: relative; } .navbar .nav-item.current { color: #5dbc7c; } .navbar .nav-item.current:after { content: ''; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 44px; height: 0; border-bottom: 2px solid #5dbc7c; } .uni-swiper-item { height: auto; } .order-item { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding-left: 30rpx; background: #fff; margin-top: 16rpx; /* 多条商品 */ /* 单条商品 */ } .order-item .i-top { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; height: 80rpx; padding-right: 30rpx; font-size: 28rpx; color: #303133; position: relative; } .order-item .i-top .time { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } .order-item .i-top .state { color: #5dbc7c; } .order-item .i-top .del-btn { padding: 10rpx 0 10rpx 36rpx; font-size: 32rpx; color: #909399; position: relative; } .order-item .i-top .del-btn:after { content: ''; width: 0; height: 30rpx; border-left: 1px solid #dcdfe6; position: absolute; left: 20rpx; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .order-item .goods-box { height: 160rpx; padding: 20rpx 0; white-space: nowrap; } .order-item .goods-box .goods-item { width: 120rpx; height: 120rpx; display: inline-block; margin-right: 24rpx; } .order-item .goods-box .goods-img { display: block; width: 100%; height: 100%; } .order-item .goods-box-single { display: -webkit-box; display: -webkit-flex; display: flex; padding: 20rpx 0; } .order-item .goods-box-single .goods-img { display: block; width: 120rpx; height: 120rpx; } .order-item .goods-box-single .right { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding: 0 30rpx 0 24rpx; overflow: hidden; } .order-item .goods-box-single .right .row { margin-top: 10rpx; } .order-item .goods-box-single .right .row_title { padding: 5rpx 10rpx; background-color: #dddddd; -webkit-border-radius: 10rpx; border-radius: 10rpx; font-size: 22rpx; color: #ffffff; } .order-item .goods-box-single .right .title { font-size: 30rpx; color: #303133; line-height: 1; width: 80%; } .order-item .goods-box-single .right .attr-box { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; font-size: 26rpx; color: #909399; } .order-item .goods-box-single .right .price { display: inline; font-size: 30rpx; color: #303133; } .order-item .goods-box-single .right .price:before { content: '¥'; font-size: 24rpx; } .order-item .price-box { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: baseline; -webkit-align-items: baseline; align-items: baseline; padding: 20rpx 30rpx; font-size: 26rpx; color: #909399; } .order-item .price-box .num { margin: 0 8rpx; color: #303133; } .order-item .price-box .price { font-size: 32rpx; color: #303133; } .order-item .price-box .price:before { content: '¥'; font-size: 24rpx; margin: 0 2rpx 0 8rpx; } .order-item .action-box { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; align-items: center; height: 100rpx; position: relative; padding-right: 30rpx; } .order-item .action-btn { width: 160rpx; height: 60rpx; margin: 0; margin-left: 24rpx; padding: 0; text-align: center; line-height: 60rpx; font-size: 26rpx; color: #303133; background: #fff; -webkit-border-radius: 100px; border-radius: 100px; } .order-item .action-btn:after { -webkit-border-radius: 100px; border-radius: 100px; } .order-item .action-btn.recom { color: #5dbc7c; } .order-item .action-btn.recom:after { border-color: #5dbc7c; } .order-item .action-btn.evaluate { color: #fd5b23; } .order-item .action-btn.evaluate:after { border-color: #fd5b23; } /* load-more */ .uni-load-more { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; height: 80rpx; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .uni-load-more__text { font-size: 28rpx; color: #999; } .uni-load-more__img { height: 24px; width: 24px; margin-right: 10px; } .uni-load-more__img > view { position: absolute; } .uni-load-more__img > view view { width: 6px; height: 2px; -webkit-border-top-left-radius: 1px; border-top-left-radius: 1px; -webkit-border-bottom-left-radius: 1px; border-bottom-left-radius: 1px; background: #999; position: absolute; opacity: 0.2; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: load 1.56s ease infinite; animation: load 1.56s ease infinite; } .uni-load-more__img > view view:nth-child(1) { -webkit-transform: rotate(90deg); transform: rotate(90deg); top: 2px; left: 9px; } .uni-load-more__img > view view:nth-child(2) { -webkit-transform: rotate(180deg); transform: rotate(180deg); top: 11px; right: 0; } .uni-load-more__img > view view:nth-child(3) { -webkit-transform: rotate(270deg); transform: rotate(270deg); bottom: 2px; left: 9px; } .uni-load-more__img > view view:nth-child(4) { top: 11px; left: 0; } .load1, .load2, .load3 { height: 24px; width: 24px; } .load2 { -webkit-transform: rotate(30deg); transform: rotate(30deg); } .load3 { -webkit-transform: rotate(60deg); transform: rotate(60deg); } .load1 view:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .load2 view:nth-child(1) { -webkit-animation-delay: 0.13s; animation-delay: 0.13s; } .load3 view:nth-child(1) { -webkit-animation-delay: 0.26s; animation-delay: 0.26s; } .load1 view:nth-child(2) { -webkit-animation-delay: 0.39s; animation-delay: 0.39s; } .load2 view:nth-child(2) { -webkit-animation-delay: 0.52s; animation-delay: 0.52s; } .load3 view:nth-child(2) { -webkit-animation-delay: 0.65s; animation-delay: 0.65s; } .load1 view:nth-child(3) { -webkit-animation-delay: 0.78s; animation-delay: 0.78s; } .load2 view:nth-child(3) { -webkit-animation-delay: 0.91s; animation-delay: 0.91s; } .load3 view:nth-child(3) { -webkit-animation-delay: 1.04s; animation-delay: 1.04s; } .load1 view:nth-child(4) { -webkit-animation-delay: 1.17s; animation-delay: 1.17s; } .load2 view:nth-child(4) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } .load3 view:nth-child(4) { -webkit-animation-delay: 1.43s; animation-delay: 1.43s; } @-webkit-keyframes load { 0% { opacity: 1; } 100% { opacity: 0.2; } }