/* pages/classify/classify.wxss */ .van-sidebar-item--selected { border-color: var(--sidebar-selected-border-color, #406BFF) !important; } page { background-color: #fff; } /* 搜索框 */ /* 搜索框 */ .serachMain { width: 500rpx; margin-left: 200rpx; position: relative; } /* .locationIcon { display: inline-block; position: absolute; left: 26rpx; top: -2rpx; } */ .location image { width: 16rpx; height: 26rpx; position: absolute; } .search_center { height: 68rpx; display: flex; margin-bottom: 24rpx; width: 576rpx; margin-left: -36rpx; } .real_search_center { margin: 0 auto; margin-bottom: 24rpx; width: 520rpx; height: 64rpx; background: #f7f8fa; border-radius: 186rpx; position: relative; display: flex; } .icon-sousuo { font-size: 32rpx; position: absolute; top: 50%; transform: translateY(-50%); left: 20rpx; } .real_search_center input { width: 454rpx; height: 100%; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; line-height: 64rpx; color: rgba(189, 196, 206, 1); padding: 0 60rpx; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .placeholder { font-size: 28rpx; font-family: PingFang SC; font-weight: 400; line-height: 64rpx; color: rgba(189, 196, 206, 1); } .search_right { width: 66rpx; height: 64rpx; border-radius: 20rpx; text-align: center; line-height: 64rpx; color: #fff; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; display: flex; align-items: center; } .search_right image { width: 36rpx; height: 36rpx; } .searchMain { box-sizing: border-box; background-color: #ffffff; display: flex; justify-content: space-between; align-items: center; width: 100%; } .location { width: 142rpx; height: 70rpx; font-size: 24rpx; color: #323232; text-indent: 1em; /* margin-left: 22rpx; */ display: flex; position: relative; /* flex-wrap: wrap; */ overflow: hidden; padding-left: 20rpx; box-sizing: border-box; } .searchBox { /* width: 524rpx; */ height: 72rpx; } /* 侧边导航 */ .navSide { display: flex; width: 100%; background-color: #ffffff; } .navContent { background-color: #fff; /* margin-bottom: 100rpx; */ } .scroll-view { height: calc(100vh - 100rpx); /* padding: 16rpx 32rpx 0 0rpx; */ padding-left: 32rpx; box-sizing: border-box; } .navItem { width: 100%; height: 234rpx; display: flex; padding: 24rpx 32rpx 26rpx 0; box-sizing: border-box; border-bottom: 2rpx solid #ebedf0; } .productLeft { width: 180rpx; height: 180rpx; display: inline-block; } .productLeft image { width: 180rpx; height: 180rpx; } .productRight { float: right; width: 320rpx; height: 180rpx; margin-left: 16rpx; } .productRight .name { height: 40rpx; margin-bottom: 10rpx; font-size: 28rpx; font-weight: 500; text-align: left; color: #333333; line-height: 40rpx; } .productRight .detail { height: 74rpx; margin-bottom: 20rpx; font-size: 24rpx; font-weight: 400; text-align: left; color: #999999; line-height: 36rpx; overflow: hidden; } .productRight .num { height: 48rpx; justify-content: space-between; align-items: center; display: flex; } .num .jNum { font-size: 28rpx; font-weight: 400; text-align: left; color: #ff4444; line-height: 48rpx; letter-spacing: 1rpx; display: flex; align-items: center; } .priceIcon { font-size: 25rpx; margin-right: -6rpx; display: flex; padding-top: 8rpx; } .num .addIcon { width: 39rpx; height: 39rpc; } .num .addIcon image { width: 39rpx; height: 39rpx; } .exchange { height: 38rpx; font-size: 24rpx; color: #ffffff; border-radius: 11rpx; display: flex; border-radius: 11rpx; justify-content: center; } .exchange image { width: 40rpx; height: 40rpx; } .bottomHint { font-size: 24rpx; color: gray; display: flex; justify-content: center; background-color: #f1f2f4; margin-bottom: 250rpx; } /* 购物车弹框 */ .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2 } .diceng { width: 100%; position: absolute; bottom: 0; left: 0; border-radius: 10rpx 10rpx 0 0; background: #fff; padding: 30rpx 32rpx; box-sizing: border-box; max-height: 94%; overflow-y: auto; } .info { display: flex; } .info image { width: 176rpx; height: 176rpx; display: block; border: 1rpx solid #ff6d00; border-radius: 8rpx; } .info_right { width: calc(100% - 212rpx); padding-top: 46rpx; padding-left: 36rpx; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end } .info_price { font-size: 28rpx; font-family: PingFang SC; font-weight: 400; line-height: 40rpx; color: rgba(255, 109, 0, 1); } .info_stock { margin-top: 6rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; line-height: 40rpx; color: rgba(140, 145, 152, 1); } .attr { margin-top: 46rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; line-height: 40rpx; color: rgba(6, 18, 30, 1); } .attr_main { margin-top: 10rpx; display: flex; flex-wrap: wrap; } .attr_item { padding: 0 50rpx; height: 60rpx; box-sizing: border-box; background: rgba(238, 238, 238, 1); border-radius: 30rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; line-height: 60rpx; color: rgba(6, 18, 30, 1); margin: 22rpx 22rpx 0 0; border: 2rpx solid transparent; } .attr_item.activity { background: rgba(253, 229, 211, 1); border: 2rpx solid rgba(246, 105, 0, 1); color: rgba(255, 109, 0, 1); } .spec { width: 100%; padding: 10rpx; display: flex; flex-wrap: wrap; margin-right: 20rpx; align-items: center; justify-content: space-around; border-top: 3rpx solid #f5f5f5; margin-top: 20rpx; } .specItem { font-size: 30rpx; color: #323233; height: 57rpx; width: auto; background-color: rgb(238, 239, 241); padding: 0 20rpx; border-radius: 16rpx; margin-bottom: 10rpx; display: flex; width: auto; align-items: center; } .specItem1 { font-size: 30rpx; color: #323233; height: 57rpx; width: auto; background-color: rgb(197, 198, 199); padding: 0 20rpx; border-radius: 16rpx; margin-bottom: 10rpx; display: flex; justify-content: center; align-items: center; width: auto; } .pay_count { padding: 24rpx 0; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; border-top: 1rpx solid #eee; border-bottom: 1rpx solid #eee; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: rgba(6, 18, 30, 1); } .count_box { display: flex; align-items: center; } .count_jian { width: 56rpx; height: 56rpx; background: rgba(238, 238, 238, 1); border-radius: 8rpx; text-align: center; line-height: 56rpx; font-size: 38rpx; font-family: PingFang SC; font-weight: 400; color: rgba(6, 18, 30, 1); display: flex; align-items: center; justify-content: center; } .real_count { padding: 0 20rpx; box-sizing: border-box; font-size: 32rpx; font-family: PingFang SC; font-weight: 500; line-height: 56rpx; color: rgba(61, 68, 77, 1); } .btn { height: 100rpx; text-align: center; line-height: 100rpx; width: 100vw; margin-left: -32rpx; background: rgba(255, 109, 0, 1); color: #fff; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; margin-top: 64rpx; } .confrimBtn { height: 78rpx; display: flex; background-color: #f16304; color: #ffffff; align-items: center; justify-content: center; margin-top: 20rpx; border-radius: 36rpx; } /* tabbar */ .tabbarBox { width: 100%; height: 98rpx; background-color: #fff; position: fixed; display: flex; bottom: 0; left: 0; padding-top: 12rpx; box-sizing: border-box; } .tabbarPic { display: flex; justify-content: center; } .tabbarBox ul { width: 100%; display: flex; } ul>li { width: 25%; } li text { display: block; display: flex; justify-content: center; font-size: 18rpx; font-weight: 400; color: #bdc4ce; } .check { color: #355DFF; } .tabbarPic image { width: 48rpx; height: 48rpx; }