/* 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: 20rpx;
}

.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;
  box-sizing: border-box;
}

.searchBox {
  /* width: 524rpx; */
  height: 72rpx;

}

/* 头部导航 */
/* pages/demo/demo.wxss */
.box {
  height: 80rpx;
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 80rpx;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 9;
}

.item {
  width: auto;
  padding: 10rpx;
  font-size: 26rpx;
  box-sizing: border-box;
  height: 60rpx;
  border: 1rpx solid #dadae6;
  display: inline-block;
  margin-left: 20rpx;
}

.scroll {
  white-space: nowrap;
}

.arrow {
  width: 80rpx;
  height: 86rpx;
  position: absolute;
  top: -2rpx;
  right: -2rpx;
  z-index: 99;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateZ(90deg);
  box-sizing: border-box;
}

.arrow image {
  width: 16rpx;
  height: 20rpx;
}

.pullDownBox {
  width: 100%;
  position: absolute;
  top: 80rpx;
  left: 0;
  height: auto;
  padding: 10rpx;
  padding-bottom: 0;
  background: #fff;
  z-index: 9;
}

.mainClassify {
  font-size: 24rpx;
  padding: 10rpx;
  padding-top: 0;
}

.downItem {
  width: auto;
  height: 40rpx;
  border-radius: 8rpx;
  border: 1rpx solid #dadae6;
  margin-right: 20rpx;
  display: inline-block;
  padding: 6rpx 20rpx;
  font-size: 24rpx;
  margin-bottom: 10rpx;
}

.mask {
  width: 100%;
  height: 100%;
  background-color: black;
  /* opacity: 0.5; */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
}

/* 侧边导航 */
.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;
  border-radius: 16rpx;
}

.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;
  letter-spacing: 1rpx;
  display: flex;
  align-items: center;
}

.priceIcon {
  font-size: 25rpx;
  margin-right: -6rpx;
  display: flex;
  padding-top: 4rpx;
}

.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: 72rpx;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2
}

.diceng {
  width: 100%;
  position: absolute;
  bottom: 40rpx;
  left: 0;
  border-radius: 10rpx 10rpx 0 0;
  background: #fff;
  padding: 56rpx 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-left: 36rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}
.info_name{
  margin-bottom: 48rpx;
  font-size: 30rpx;
  color: #323233;
}
.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;
}