* 头部背景
*/
.goods-top-bg {
height: calc(320rpx + var(--status-bar-height) + 5px);
height: 286rpx;
background-color: #f5f5f5;
}
.goods-top-search-bg {
background-color: #f5f5f5;
}
* 导航搜索、内容区域
*/
.nav-search {
padding-right: 250rpx;
padding-right: 255rpx;
padding-left: 80rpx;
padding-right: 20rpx;
padding-top: 20rpx !important;
padding-bottom: 20rpx;
height: 64rpx;
z-index: 5;
}
.nav-more-top {
top: 135rpx !important;
}
* 左侧导航
*/
.left-nav {
width: 200rpx;
background-color: #f5f5f5;
height: 100%;
}
.left-nav .item {
height: 80rpx;
line-height: 80rpx;
padding: 0 10rpx;
background: #f5f5f5;
}
.left-nav .nav-active {
background: #fff;
font-weight: 500;
}
* 右侧内容
*/
.right-container {
width: calc(100% - 200rpx);
height: 100%;
top: 0;
right: 0;
background: #f5f5f5;
}
.content-item {
width: calc(100% / 3);
}
.content-item .content {
padding: 28rpx;
}
.content-item .text {
font-weight: 600;
}
.content-item .icon {
width: 92rpx;
height: 92rpx;
}
.content-item.two-img .icon {
width: 104rpx;
height: 104rpx;
}
.content-item.two-img .content {
padding: 26rpx 0;
}
.model-one .content-item:nth-child(3n) {
border-right: 0;
}
.model-one .content .desc {
min-height: 52rpx;
line-height: 26rpx;
}
.model-one .content {
height: 240rpx;
}
.one-content image {
height: 120rpx;
}
.text-random-1,
.text-random-2,
.text-random-3,
.text-random-4,
.text-random-5,
.text-random-6,
.text-random-7,
.text-random-8,
.text-random-9 {
position: relative;
}
.text-random-1::before,
.text-random-2::before,
.text-random-3::before,
.text-random-4::before,
.text-random-5::before,
.text-random-6::before,
.text-random-7::before,
.text-random-8::before,
.text-random-9::before {
content: '';
width: 126rpx;
height: 12rpx;
border-radius: 6rpx;
position: absolute;
bottom: 0;
left: 0;
opacity: 0.6;
}
.text-random-1::before {
background: linear-gradient(90deg, #F2C3A5 0%, rgba(255, 255, 255, 0) 100%);
}
.text-random-2::before {
background: linear-gradient(90deg, #FF9BBB 0%, rgba(255, 255, 255, 0) 100%);
}
.text-random-3::before {
background: linear-gradient(90deg, #EAC5A9 0%, rgba(255, 255, 255, 0) 100%);
}
.text-random-4::before {
background: linear-gradient(90deg, #F7BEBE 0%, rgba(255, 255, 255, 0) 100%);
}
.text-random-5::before {
background: linear-gradient(90deg, #F2DC86 0%, rgba(255, 255, 255, 0) 100%);
}
.text-random-6::before {
background: linear-gradient(90deg, #98B7E8 0%, rgba(255, 255, 255, 0) 100%);
}
.text-random-7::before {
background: linear-gradient(90deg, #CD92F3 0%, rgba(255, 255, 255, 0) 100%);
}
.text-random-8::before {
background: linear-gradient(90deg, #5EEA7C 0%, rgba(255, 255, 255, 0) 100%);
}
.text-random-9::before {
background: linear-gradient(90deg, #E67A7A 0%, rgba(255, 255, 255, 0) 100%);
}
* 商品列表模式
*/
.category-content {
height: 100vh;
height: calc(100vh - 134rpx - var(--window-bottom));
height: calc(100vh - 104rpx - var(--window-bottom));
}
.category-content.goods-model {
padding-top: 182rpx;
}
.top-nav {
height: 182rpx;
top: 0;
left: 0;
z-index: 4;
}
.top-nav-scroll {
width: calc(100% - 70rpx);
}
.top-nav .icon-content {
width: 92rpx;
height: 92rpx;
padding: 1px;
}
.top-nav-scroll .item:first-of-type {
padding-left: 16rpx;
}
.top-nav .item {
padding: 20rpx 4rpx;
}
.nav-list-more {
width: 100%;
max-height: 550rpx;
}
.nav-list-more image {
width: 92rpx;
height: 92rpx;
border-radius: 50%;
margin-bottom: 10rpx;
}
.nav-list-more .item {
width: 20%;
padding: 20rpx 0;
}
.goods-right-content {
width: calc(100% - 200rpx);
height: calc(100% - 182rpx);
top: 182rpx;
right: 0;
}
.right-content-actual .item {
padding-bottom: 20rpx;
}
.right-content-actual .item:not(:last-of-type) {
border-bottom: 1px solid #eee;
}
.right-content-actual .item .plugins-label-img {
border-top-left-radius: 10rpx;
}
.goods-right-content.category-one-subset-content {
width: 100%;
}
.goods-list-top-nav {
position: sticky;
top: 0;
right: 0;
z-index: 3;
}
.nav-sort-content .sort-item {
height: 80rpx;
line-height: 80rpx;
width: 20%;
}
.nav-sort-content .sort-item .sort-icon {
width: 26rpx;
height: 26rpx !important;
}
.goods-list .goods-img {
width: 160rpx;
height: 160rpx !important;
}
.goods-list .goods-base {
width: calc(100% - 200rpx);
padding-right: 20rpx;
}
.goods-list .goods-base-content {
min-height: 100rpx;
}
.goods-list .goods-base .simple-desc {
line-height: 30rpx;
min-height: 30rpx;
max-height: 58rpx;
}
.goods-list .goods-base .sales-price {
width: calc(100% - 140rpx);
}
.goods-list .goods-base .buy-number {
min-width: 32rpx;
}
* 底部导航
*/
.botton-nav {
width: calc(100% - 60rpx);
left: auto;
bottom: 20rpx;
z-index: 2;
margin-left: 20rpx;
box-shadow: 0rpx 4rpx 8rpx 0px rgba(0, 0, 0, 0.16);
line-height: 84rpx;
height: 84rpx;
}
.botton-nav .btn {
height: 70rpx;
line-height: 70rpx;
}
.botton-nav .cart .badge-icon {
top: -20rpx;
right: -2rpx;
}
* 购物车
*/
.cart-mask {
left: 0;
top: 0;
background: rgb(0, 0, 0, 0.6);
z-index: 5;
}
.cart-content {
left: auto;
bottom: 150rpx;
width: calc(100% - 40rpx);
z-index: 6;
max-width: calc(800px - 40rpx);
margin-left: 20rpx;
}
.cart-content .cart-list {
max-height: 60vh;
}
.cart-content .cart-list .goods-img {
width: 132rpx;
height: 132rpx !important;
}
.cart-content .cart-list .goods-base {
padding-right: 0;
padding-left: 24rpx;
}
.cart-content .cart-list .goods-base-content {
min-height: 60rpx;
}
* 无数据
*/
.no-data {
z-index: 101;
}
* 隐藏滚动条
*/
scroll-view ::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}