gather/pages/category/category.wxss

/* pages/category/category.wxss */

page {
  height: 100%;
  background: #E5F1FF;
}
.my-tabbar .tabbar{
  box-shadow: none!important;
  border-radius: 0!important;
}

.container {
  /* display: flex; */
  flex-direction: row;
  height: 100%;
}

.main {
  /* position: fixed; */
  display: flex;
  overflow: hidden;
  /* margin-top: 78rpx; */
  height: calc(100% - 270rpx);
}

/* 搜索栏 */
.top-search-input {
  margin-left: 20rpx;
  display: flex;
  align-items: center;
  width: 500rpx;
  border: 2rpx solid #006CE8;
  border-radius: 40rpx;
  height: 60rpx;
  background: #fff;
  box-sizing: border-box;
}

.top-search-swiper {
  width: 440rpx;
  height: 60rpx;
  line-height: 60rpx;
  margin-top: 0;
  font-weight: normal;
  font-size: 24rpx;
  color: #AAAAAA;
  margin-left: 28rpx;
}

.top-search-line {
  color: #DEDEDE;
  margin-right: 16rpx;
}

.top-search-text {
  width: 100rpx;
  font-weight: bold;
  font-size: 28rpx;
  color: #006CE8;
}


/* 顶部分类 */

.top-content{
  position: relative;
}

.top-box{
  white-space: nowrap;
  align-items: center;
  margin-top: 100rpx;
  width: 100%;
  padding-left: 24rpx;
  box-sizing: border-box;
  background: #E5F1FF;
  padding-bottom: 18rpx;
}

.top-content .all{
position: absolute;
top: 0;
right: 0;
width: 64rpx;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 10rpx;
background: linear-gradient( 180deg, rgba(219,230,244,0) 0%, #DDE9F7 11%, #E5F1FF 100%);
box-shadow: -10rpx 0rpx 12rpx 2rpx rgba(0,0,0,0.07);
writing-mode: vertical-rl;
font-weight: bold;
font-size: 24rpx;
color: #222222;
}

.top-content .all .icon{
  width: 20rpx;
  height: 20rpx;
  margin-left: 2rpx;
}

.top-all-box {
  /* display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start; */
  display: grid;
  /* 列规则：5列等宽（1fr 代表"剩余空间等份分配"） */
  grid-template-columns: repeat(5, 1fr);
  /* 行列间距：10rpx（小程序常用 rpx 适配多端） */
  gap: 16rpx;
  padding: 0 32rpx 150rpx;
  box-sizing: border-box;
  max-height: 750rpx;
  overflow-y: auto;
  overflow-x: hidden;
}

.top-box.top-all-box .type-item{
  margin-bottom: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-box .type-item{
  display: inline-block;
  text-align: center;

}
.type-item .pic-box{
  position: relative;
  margin-left: 8rpx;
  width: 72rpx;
  height: 72rpx;
  border-radius: 16rpx;
}
.type-item .pic-box.active{
  width: 98rpx;
  height: 98rpx;
  border-radius: 32rpx;
}
.type-item .pic-box.active .sell-out-box{
  border-radius: 32rpx;
}
.sell-out-box{
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 16rpx;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sell-out-text{

  text-align: center;
  font-size: 16rpx;
  color: #FFFFFF;
}

.top-box .type-item .icon{
  width: 72rpx;
  height: 72rpx;
  background: #F6F6F6;
  border-radius: 16rpx;
}
.top-box .type-item .name{
  font-size: 22rpx;
  color: #222222;
  width: 116rpx;
  height: 36rpx;
  line-height: 36rpx;
  text-align: center;
  margin-top: 12rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.top-box .type-item .icon.active{
  width: 88rpx;
  height: 88rpx;
  border-radius: 32rpx;
  border: 5rpx solid #006CE8;
}

.top-box .type-item .name.active{
  font-size: 24rpx;
  background: #006CE8;
  border-radius: 18rpx 18rpx 18rpx 18rpx;
  color: #FFFFFF;
}


.popup-box{
  position: relative;
  background: #E5F1FF;
}
 .close-box{
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 999;
  font-size: 24rpx;
  color: #AAAAAA;
  width: 100%;
  text-align: center;
  line-height: 82rpx;
  border-top: 1rpx solid #F0F0F0;
  background: #E5F1FF;

}

 .close-box .icon{
  width: 20rpx;
  height: 20rpx;
  transform: rotateZ(180deg);
}


/* 左侧菜单栏 */

.leftmenu {
  width: 200rpx;
  height: 100%;
  box-sizing: border-box;
  background-color: #f5f6f7;
  overflow: scroll;
  z-index: 2;
  padding-bottom: 166rpx;

}
scroll-view ::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
.menu-item {
  line-height: 94rpx;
  height: 94rpx;
  text-align: center;
  border-bottom: 2rpx silid #e3e3e3;
  position: relative;
  color: #666;
  font-size: 24rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-item .icon{
  width: 30rpx;
  height: 30rpx;
  margin-right: 8rpx;
}

.menu-item.active {
  color: #333;
  font-size: 28rpx;
  font-weight: bold;
  position: relative;
  background: #fff;
}

.menu-item.active:before {
  position: absolute;
  left: 0;
  content: "";
  width: 8rpx;
  height: 60rpx;
  top: 20rpx;
  background: #006CE8;
}

.menu-item text.tips-num {
  position: absolute;
  top: 20rpx;
  right: 15rpx;
  border-radius: 15rpx;
  width: 30rpx;
  height: 30rpx;
  background: red;
  color: #fff;
  font-size: 25rpx;
  line-height: 30rpx;
}

/* 右侧商品栏 */
.loading{
  width: 550rpx;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: fixed;
  z-index: 99999;
  background: #fff;
}
@keyframes rotato{
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading .icon{
  animation:  rotato .5s linear infinite;
  width: 48rpx;
  height: 48rpx;
}

.rightcontent {
  width: 550rpx;
  height: 100%;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 1;
  position: relative;
}
.rightcontent  .banner{
  width: 506rpx;
  height: 144rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
  
}
.rightcontent .right-top-box{
  position: fixed;
  z-index: 9999;
  background-color: #fff;

}

.rightcontent .filter-box{
  display: flex;
  justify-content: flex-end;
  width: 510rpx;
  background: #F6F6F6;
  padding: 8rpx 20rpx;
  box-sizing: border-box;
  margin-left: 20rpx;
  margin-top: 10rpx;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.rightcontent .filter-box .filter-item{
  font-size: 24rpx;
  color: #222222;
  margin-left: 40rpx;
  display: flex;
  align-items: center;
}
.rightcontent .filter-box .filter-item.active{
  color: #006CE8;
}
.rightcontent .filter-box .filter-item .icon{
  width: 20rpx;
  height: 20rpx;
}
.rightcontent .filter-box .filter-item .icon-box{
  display: flex;
  flex-direction: column;
}
.rightcontent .filter-box .filter-item .icon-box .down{
  transform: rotateZ(270deg);
  margin-bottom: -6rpx;
}

.rightcontent .filter-box .filter-item .icon-box .up{
  transform: rotateZ(90deg);
  margin-left: -4rpx;
}

.rightcontent .thrid-type-box{
  display: flex;
  flex-wrap: nowrap;
  
  padding: 10rpx 20rpx 10rpx 0;
  width: 530rpx;
  overflow: auto;
  margin-left: 20rpx;
  background: #fff;
}
.rightcontent .thrid-type-box .thrid-type-item{
  height: 36rpx;
  line-height: 36rpx;
  background: #F0F0F0;
  padding: 2rpx 16rpx;
  border-radius: 22rpx;
  font-size: 24rpx;
  color: #222222;
  flex-shrink: 0;
  margin-right: 20rpx;
}

.rightcontent .thrid-type-box .thrid-type-item.active{
  background: #006CE8;
  color: #FFFFFF;
}

.rightcontent .right-box{
  /* padding-bottom: 300rpx; */
  /* padding-bottom: 500rpx; */
  padding-top: 98rpx;
  position: relative;
  height: 100%;
}

.rightcontent  .product-item{
  display: flex;
  padding: 0 20rpx;
}
.rightcontent  .product-item .pic-box{
  position: relative;
}
.rightcontent  .product-item .pic{
  width: 200rpx;
  height: 200rpx;
  background: #F6F6F6;
  border-radius: 16rpx;
  flex-shrink: 0;
  margin: 20rpx 0;
}

.rightcontent  .product-item .sell-out{
  position: absolute;
  top: 0;
  left: 0;
  width: 200rpx;
  height: 240rpx;
  background: rgba(255,255,255,0.6);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rightcontent  .product-item .sell-out-text{
  width: 112rpx;
  height: 36rpx;
  line-height: 36rpx;
  text-align: center;
  background: rgba(0,0,0,0.6);
  border-radius: 18rpx 18rpx 18rpx 18rpx;
  font-size: 24rpx;
  color: #FFFFFF
}
.rightcontent  .product-item .info{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1rpx solid #F0F0F0;
  padding: 20rpx 0 20rpx 20rpx;
}

.rightcontent  .product-item .info .title{
  font-weight: bold;
  font-size: 28rpx;
  color: #222222;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;  /* 限制显示的行数 */
  -webkit-box-orient: vertical;
}

.rightcontent  .product-item .info .price-box{
  display: flex;
justify-content: space-between;
align-items: center;
}
.rightcontent  .product-item .info .price{
  font-weight: 800;
  font-size: 36rpx;
  color: #FF4D3A;
}

.rightcontent  .product-item .info  .salesVolume{
  font-size: 22rpx;
  color: #AAAAAA;
}

.rightcontent .adver-map {
  width: auto;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  margin: 30rpx 20rpx 0;
}

.rightcontent .adver-map .item-a {
  display: block;
  font-size: 0;
  width: 100%;
  height: 160rpx;
}

.rightcontent .adver-map .item-a image {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
}

/* .rightcontent .sub-category {
  display: flex;
  flex-wrap: wrap;
} */

/* 二级分类 */
.sub-category-con {
  margin: 20rpx;
}

.sub-cate-title {
  display: flex;
  align-items: center;
  font-weight: 800;
}

.view-all {
  color: #999;
  font-weight: normal;
  font-size: 24rpx;
}

.sub-cate-text {
  flex: 1;
}

.th-cate-con {
  display: flex;
  flex-wrap: wrap;
}

.sub-category-item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  box-sizing: border-box;
  align-items: center;
}

.sub-category-item .sub-category-item-pic {
  width: 120rpx !important;
  height: 120rpx !important;
  border-radius: 16rpx;
}

.sub-category-item text {
  margin-top: 10rpx;
  font-size: 25rpx;
}
.not-category-data{
  padding: 20rpx;
}
.not-data-list{
  width: 100%;
}
.reset-localization{
  text-align: center;
  font-size: 26rpx;
  color: #AAAAAA;
}

/* 购物车 */

.car-box{
  /* padding: 28rpx 24rpx 123rpx; */
  padding: 28rpx 24rpx 269rpx;
  max-height: 700rpx;
  overflow: auto;
}

.car-box .item{
  display: flex;
  align-items: center;
  padding-bottom: 30rpx;
  /* border-bottom: 2rpx solid #F0F0F0; */
}

.car-box .item .img{
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  background: chartreuse;
}
.car-box .item .info{
  flex: 1;
  padding-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200rpx;
}
.car-box .item .info .title{
  font-weight: 800;
  font-size: 32rpx;
  color: #222222;
}
.car-box .item .info .desc{
  font-size: 24rpx;
  color: #AAAAAA;
}

.car-box .item .info .price-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.car-box .item .info .price-box .price{
  display: flex;
  align-items: flex-end;
  color: #FF4D3A;
}
.car-box .item .info .price-box .price .unit{
  font-size: 20rpx;
}

.car-box .item .info .price-box .price .num{
  font-size: 48rpx;
}

/* .car-box .item .info .price-box .num-box{ */
 .num-box{
  display: flex;
  align-items: center;
}

/* .car-box .item .info .price-box .num-box .btn{ */
 .num-box .btn{
  font-size: 20rpx;
  width: 44rpx;
  height: 44rpx;
  text-align: center;
}
/* .car-box .item .info .price-box .num-box .num{ */
 .num-box .num{
  width: 80rpx;
  height: 44rpx;
  background: #FFFFFF;
  text-align: center;
  line-height: 40rpx;
  font-size: 24rpx ;
  color: #222222;
  border-bottom: 2rpx solid #F0F0F0;
  border-top: 2rpx solid #F0F0F0;
  box-sizing: border-box;
}

.bottom-box{
  position: fixed;
  /* bottom: 0; */
  bottom: 166rpx;
  left: 0;
  z-index: 999999;
  box-sizing: border-box;
  width: 100%;
  height: 120rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0,0,0,0.05);
  border-radius: 32rpx 32rpx 0rpx 0rpx;
}
.bottom-box .num{
  position: absolute;
  top: 20rpx;
  left: 80rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #fff;
  background: #FF4D3A;
  padding: 2rpx 6rpx;
}
.bottom-box .left{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
.bottom-box .icon{
  width: 100rpx;
  height: 100rpx;
  margin-left: 20rpx;
}
.bottom-box .price-box{
  display: flex;
  align-items: center;
  margin-right: 40rpx;
}
.bottom-box .price-box .label{
  font-weight: bold;
    font-size: 22rpx;
    color: #222222;
}
.bottom-box .price-box .top{
  display: flex;
  align-items: center;
}

.bottom-box .price-box .top .price{
  font-size: 30rpx;
  color: #FF4D3A;
}

.bottom-box .price-box .top .reduce-price{
  font-size: 24rpx;
  color: #AAAAAA
}

.bottom-box .price-box .shipping-fee{
  font-size: 24rpx;
  color: #AAAAAA;
}
.bottom-box .btn{
  height: 80rpx;
  line-height: 80rpx;
  width: 160rpx;
  text-align: center;
  background: #006CE8;
  color: #fff;
  border-radius: 40rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
}
/* 购物车为空 */
.empty {
  margin-top: 100rpx;
  text-align: cneter;
}
.empty-icon {
  display: block;
  width: 110rpx;
  height: 110rpx;
  margin: 0 auto; 
  margin-bottom: 20rpx;
}
.empty-icon > image {
  width: 100%;
  height: 100%;
}
.empty-text {
  font-size: 24rpx;
  color: #222222;
  line-height: 2em;
  text-align: center;
}

/* 纵向滚动容器：隐藏垂直滚动条 */
.thrid-type-box::-webkit-scrollbar {
  width: 0; /* 滚动条宽度设为0（关键） */
  height: 0; /* 横向滚动时设置高度为0 */
  display: none; /* 直接隐藏 */
}

/* 可选：针对滚动轨道和滑块的进一步隐藏 */
.thrid-type-box::-webkit-scrollbar-track {
  display: none;
}
.thrid-type-box::-webkit-scrollbar-thumb {
  display: none;
}

.none .van-empty__description{
  margin-top: -30rpx;
}
/* 动画容器：全屏覆盖，不影响下层交互 */
.animation-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* 抛物线小图标样式 */
.move-x {
  animation: 
    moveX .5s linear forwards;  /* X轴匀速 */
   
}
.move-y{
  animation: moveY .5s cubic-bezier(0.5, -0.5, 1, 1)  forwards; 
}

/* 核心抛物线动画：贝塞尔曲线轨迹 */
@keyframes moveX  {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--endX));
  }
}

/* 核心抛物线动画：贝塞尔曲线轨迹 */
@keyframes moveY  {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--endY));
  }
}

/* 购物车缩放动画 */
.cart-pulse {
  animation: pulse 0.3s ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}