.sort-active { border: 1px solid $light-color; color: $light-color; background: $price-light-color !important; } .oldKeyList { display: flex; flex-wrap: wrap; padding: 20rpx 3%; > .oldKeyItem { padding: 4rpx 24rpx; background: #f0f2f5; margin-right: 20rpx; max-width: 200rpx; border-radius: 100px; font-size: 24rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 20rpx; } } .promotion { margin-top: 4rpx; display: flex; div { span { font-size: 24rpx; color: $light-color; margin-right: 10rpx; padding: 0 4rpx; border-radius: 2rpx; } } } .status_bar { height: var(--status-bar-height); background: #fff !important; width: 100%; } page { background-color: #fff !important; } .sort-box { width: 100%; height: 100%; position: relative; background: #f7f7f7; .sort-list { margin: 20rpx 0; background: #fff; border-radius: 20rpx; padding: 30rpx; > .sort-item { > .sort-title { font-size: 26rpx; font-weight: bold; } } } } .null-view { height: 140rpx; } .sort-btn { display: flex; position: fixed; bottom: 0; border-top: 1px solid #f7f7f7; height: 100rpx; left: 0; width: 100%; background: #fff; align-items: center; > view { width: 50%; height: 80rpx; line-height: 80rpx; text-align: center; margin: 0 20rpx; border-radius: 1000px; } > .sort-btn-repick { border: 1px solid #ededed; } > .sort-btn-confim { color: #fff; background-image: linear-gradient(90deg, #ff6b35, #ff9f28, #ffcc03); } } .uinput { width: 50% !important; > .sort-radius { height: 70rpx; line-height: 70rpx; font-size: 24rpx; } /deep/ .uni-input-input { font-size: 24rpx; } } .sort-radius { margin: 0 12rpx; background: #f7f7f7; height: 65rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 1000px; font-size: 24rpx; } .flex { flex-wrap: wrap; align-items: center; > .sort-brand-item { width: 33%; text-align: center; margin-bottom: 20rpx; } } .scoll-page { overflow: auto; } .content { background-color: $bg-color; height: 100vh; overflow: hidden; } .index-nav-arrow:last-child { margin-top: -22rpx; } .line1-store-name{ font-size: 24rpx; color: #999; } .to-store{ font-size: 24rpx; color: #333; margin-left: 10rpx; } .img { width: 26rpx; height: 26rpx; } .goods-row { background: #fff; padding: 16rpx; >.goods-col{ display: flex; >.goods-img{ flex: 4; } >.goods-detail{ flex: 7; } } } .add1 { background: #fff; padding: 30rpx 0; } .oldKeyRow { background: #fff; padding: 34rpx 3%; border-bottom: 1px solid #eeeeee; } .clamp3 { margin-bottom: 10rpx; font-size: 28rpx; color: #333333; font-weight: 400; display: -webkit-box; height: 80rpx; -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important; overflow: hidden; > span { line-height: 1.5; } } view { display: block; } .store-seller-name { color: #666; overflow: hidden; > div { float: left; } > span { float: right; } } .count-config { padding: 10rpx 0; color: #666; display: flex; font-size: 24rpx; justify-content: space-between; } .search-box { z-index: 99; width: 100%; background: $light-color; padding: 20rpx 2.5%; display: flex; justify-content: space-between; position: sticky; top: 0; } .search-box .mSearch-input-box { width: 100%; } .search-box .input-box { width: 85%; flex-shrink: 1; display: flex; justify-content: center; align-items: center; } .search-box .search-btn { width: 15%; margin: 0 0 0 2%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; font-size: 28rpx; color: #fff; background: linear-gradient(to right, #ff9801, #ff570a); border-radius: 60rpx; } .search-box .input-box > input { width: 100%; height: 60rpx; font-size: 32rpx; border: 0; border-radius: 60rpx; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0 3%; margin: 0; background-color: #ffffff; } .uni-scroll-view-content { background: #ededed !important; } .placeholder-class { color: #9e9e9e; } .search-keyword { width: 100%; background-color: #ededed; } .keyword-list-box { height: calc(100vh - 110rpx); padding-top: 10rpx; border-radius: 20rpx 20rpx 0 0; background-color: #fff; } .keyword-entry-tap { background-color: #eee; } .keyword-entry { width: 94%; height: 80rpx; margin: 0 3%; font-size: 30rpx; color: #333; display: flex; justify-content: space-between; align-items: center; border-bottom: solid 1rpx #e7e7e7; } .keyword-entry image { width: 60rpx; height: 60rpx; } .keyword-entry .keyword-text, .keyword-entry .keyword-img { height: 80rpx; display: flex; align-items: center; } .keyword-entry .keyword-text { width: 90%; } .keyword-entry .keyword-img { width: 10%; justify-content: center; } .keyword-box { background-color: #fff; } .keyword-box .keyword-block { padding: 10rpx 0; } .keyword-box .keyword-block .keyword-list-header { width: 100%; padding: 20rpx 3%; font-size: 27rpx; color: #333; display: flex; justify-content: space-between; } .keyword-box .keyword-block .keyword-list-header image { width: 40rpx; height: 40rpx; } .keyword-box .keyword-block .keyword > view { width: 50%; line-height: 1.75; overflow: hidden; padding: 0 3% 0 3% !important; } .u-tips { font-size: 30rpx; font-weight: 700; color: #333; } .keyword { display: flex; flex-wrap: wrap; } .keyword-box { position: relative; } .clear { color: #666666; position: fixed; bottom: 0; width: 100%; text-align: center; height: 100rpx; line-height: 100rpx; font-size: 28rpx; background: #f7f7f7; } .keyword-box .keyword-block .hide-hot-tis { display: flex; justify-content: center; font-size: 28rpx; color: #6b6b6b; } .navbar { display: flex; width: 100%; height: 80rpx; background: #fff; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06); z-index: 10; // position: fixed; // left: 0; // top: var(--status-bar-height); .nav-item { flex: 1; display: flex; justify-content: center; align-items: center; height: 100%; font-size: 30rpx; color: $font-color-dark; position: relative; } .current { color: $light-color; position: relative; &:after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 40rpx; height: 0; border-bottom: 4rpx solid $light-color; } } .p-box { display: flex; flex-direction: column; .yticon { display: flex; align-items: center; justify-content: center; width: 30rpx; height: 14rpx; line-height: 1; margin-left: 4rpx; font-size: 26rpx; color: #888; } .xia { transform: scaleY(-1); } } .cate-item { display: flex; justify-content: center; align-items: center; height: 100%; width: 80rpx; position: relative; font-size: 44rpx; &:after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-left: 1px solid #ddd; width: 0; height: 36rpx; } } } /* 分类 */ .cate-mask { position: fixed; left: 0; top: var(--window-top); bottom: 0; width: 100%; background: rgba(0, 0, 0, 0); z-index: 95; transition: 0.3s; .cate-content { width: 630rpx; height: 100%; background: #fff; float: right; transform: translateX(100%); transition: 0.3s; } &.none { display: none; } &.show { background: rgba(0, 0, 0, 0.4); .cate-content { transform: translateX(0); } } } .cate-list { display: flex; flex-direction: column; height: 100%; .cate-item { display: flex; align-items: center; height: 90rpx; padding-left: 30rpx; font-size: 28rpx; color: #555; position: relative; } .two { height: 64rpx; color: #303133; font-size: 30rpx; background: #f8f8f8; } } .price-box { margin-top: 10rpx; display: flex; align-items: center; justify-content: space-between; padding-right: 10rpx; font-size: 24rpx; color: $font-color-light; } .price { font-size: 26rpx; line-height: 1; color: $main-color; font-weight: bold; /deep/ span:nth-of-type(1) { font-size: 38rpx; } } /* 商品列表 */ .goods-list { display: flex; flex-wrap: wrap; margin: 10rpx 20rpx 284rpx; // background: #fff; width: 100%; .goods-item { background-color: #ffffff; display: flex; border-radius: 16rpx; flex-direction: column; width: calc(50% - 30rpx); margin-bottom: 20rpx; padding-bottom: 20rpx; &:nth-child(2n + 1) { margin-right: 20rpx; } .goods-detail { margin: 0 20rpx; } } .image-wrapper { width: 100%; height: 330rpx; border-radius: 16rpx 16rpx 0 0; overflow: hidden; padding: 0; image { width: 100%; height: 100%; opacity: 1; border-radius: 16rpx 16rpx 0 0; } } .title { font-size: $font-base; color: $font-color-dark; line-height: 1.5; height: 84rpx; padding: 10rpx 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .count-config, .store-seller-name { font-size: $font-sm; } .text-hidden { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .status_bar { height: var(--status-bar-height); width: 100%; background: $light-color; } .empty { padding-top: 300rpx; color: #999999; text-align: center; /deep/ .u-image { width: 346rpx; height: 304rpx; } }