/* 商店 */
.shop-index-header{
  .top-header-bar{
    background: #2e3241;
    padding-top: .2rem;

    .web-logo{
      width: 2.8rem;
      height: .8rem;
      background: url(/static/images/logo-viwings-txt.png) no-repeat left center;
      background-size: contain;
    }

    .search-box{
      background: #FFF;
      border: 0.01rem solid #16c87e;
      border-radius: .34rem;
      overflow: hidden;
      padding: 0 .04rem 0 0;

      input{
        width: 100%;
        padding: .15rem .3rem;
        border: none;
        outline: none;
        box-sizing: border-box;
      }
    }
  }

  .sort-header-bar{
    .left-sort-title{
      width: 3.8rem;
      background: #16c87e;
      color: #FFF;
      line-height: .45rem;
      font-size: .18rem;
      text-align: center;
    }

    .menu-list{
      .menu-item{
        line-height: .45rem;
        color: #FFF;
        transition: all .3s;
        margin: 0 .1rem;
        padding: 0 .2rem;
        cursor: pointer;

        &:hover,
        &.active{
          color: #16c87e;
        }
      }
    }
  }

  .sort-list-c{
    background: #FFF;
    padding: .15rem;
    width: 3.8rem;
    height: 4.9rem;
    box-sizing: border-box;
    margin-right: .15rem;

    .group-item{
      border-bottom: .01rem solid #f5f5f5;
      margin-bottom: .15rem;
      padding-bottom: .15rem;

      &:last-child{
        border-bottom: none;
      }

      .group-title{
        font-size: .16rem;
        line-height: 1;
      }

      .group-icon{
        width: .25rem;
        margin-right: .05rem;
      }

      .sub-list{
        margin-left: .3rem;
        line-height: 1;
      }

      .sub-item{
        display: inline-block;
        margin-right: .1rem;
        transition: all .3s;
        cursor: pointer;

        &:hover{
          color: #16c87e;
        }
      }
    }
  }

  .banner-list{
    height: 4.9rem;
    box-sizing: border-box;
    background: #FFF;
    position: relative;

    .banner-item{
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      left: 0;
      right: 0;
      transition: all .3s;

      &.active{
        opacity: 1;
      }
    }
  }

  .right-content{
    width: 2.6rem;
    margin-left: .15rem;
    height: 4.9rem;
    box-sizing: border-box;

    .item-style{
      height: 100%;
      text-shadow: 0 0 .03rem rgba(0,0,0,.5);
    }

    .item-style-1{
      background: url(/static/images/shop/index/bg_a.png) no-repeat center;
      background-size: cover;
    }

    .item-style-2{
      background: url(/static/images/shop/index/bg_b.png) no-repeat center;
      background-size: cover;
    }

    .item-style-3{
      background: url(/static/images/shop/index/bg_c.png) no-repeat center;
      background-size: cover;
    }
  }

  .h5-qrcode{
    color: #FFF;
  }
}

/* 商店 用户操作列表 */
.shop-index-useractions{
  .action-item{
    height: 1.2rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: .2rem .15rem;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;

    &:hover{
      .item-title{
        color: #16c87e;
      }
    }

    .item-title{
      font-size: .17rem;
    }

    .item-content{
      color: #a1a1a1;
      font-size: .12rem;
      line-height: 1.8;
    }

    .item-icon{
      position: absolute;
      right: 0;
      top: .2rem;
      width: .9rem;
      height: .8rem;
    }
  }
}

/* 指数 */
.shop-index-zhishu{
  .content-box{
    background: #FFF;

    .content-title{
      padding: .15rem;
      position: relative;
      border-bottom: .01rem solid #ececec;

      &::before{
        content: '';
        display: block;
        position: absolute;
        width: .04rem;
        height: .2rem;
        background: #16c87e;
        left: 0;
        top: .18rem;
      }
    }

    .content{
      
    }
  }

  .data-item{
    padding: .2rem .15rem;
    border-right: .01rem solid #ececec;
    border-bottom: .01rem solid #ececec;
  }

  .chart-change-tab{
    position: absolute;
    text-align: right;
    right: .15rem;
    top: .15rem;
    z-index: 1;
  }
}

/* 搭线 */
.shop-index-daxian{
  .content-box{
    background: #FFF;

    .content-title{
      padding: .15rem;
      position: relative;

      &::before{
        content: '';
        display: block;
        position: absolute;
        width: .04rem;
        height: .2rem;
        background: #16c87e;
        left: 0;
        top: .17rem;
      }
    }
  }

  .left-content{
    border-right: .01rem solid #ececec;
  }

  .buy-need-list{
    padding: 0 .15rem .15rem .15rem;
  }

  .need-list-item{
    border: .01rem solid #ececec;
    padding: .15rem;
    margin: .05rem 0;
  }

  .rank-list{
    padding: .15rem;
  }

  .rank-item{
    padding: .12rem 0;
    text-align: center;

    .data-num{
      font-size: .16rem;
    }
  }

  .barnner-list{
    position: relative;

    .center-pic{
      position: absolute;
      left: 50%;
      top: .15rem;
      transform: translateX(-50%);
      width: .5rem;
      height: .5rem;
      background: url(/static/images/shop/index/tradeImg.png) no-repeat center;
      background-size: contain;
      z-index: 1;
    }

    .left-banner{
      height: .8rem;
      background: url(/static/images/shop/index/daxian-banner-1.png) no-repeat center;
      background-size: cover;
      text-align: center;
      color: #FFF;
      line-height: .8rem;
      font-size: .24rem;
    }

    .right-banner{
      background: url(/static/images/shop/index/daxian-banner-2.jpg) no-repeat center;
      background-size: cover;
    }
  }
}


/* 实力采购方 */
.shop-index-shilicaigougonghuo{
  .more-link{
    cursor: pointer;
    
    &:hover{
      color: #16c87e;
    }
  }

  .content-box{
    background: #FFF;

    .content-title{
      padding: .15rem;
      position: relative;

      &::before{
        content: '';
        display: block;
        position: absolute;
        width: .04rem;
        height: .2rem;
        background: #16c87e;
        left: 0;
        top: .17rem;
      }
    }
  }

  .list-content{
    padding: .15rem;
    min-height: 1.63rem;
  }

  .list-item{
    margin-bottom: 10px;
  }
}

/* 实时订单 */
.shop-index-orders{
  .content-box{
    background: #FFF;

    .content-title{
      padding: .15rem;
      position: relative;

      &::before{
        content: '';
        display: block;
        position: absolute;
        width: .04rem;
        height: .2rem;
        background: #16c87e;
        left: 0;
        top: .17rem;
      }
    }

    .content {
      padding: 0 .15rem .15rem;
    }
  }

  // 订单卡片列表
  .order-card-list {
    margin-bottom: .2rem;
  }

  // 订单卡片
  .order-card {
    background: #fff;
    border-radius: .08rem;
    overflow: hidden;
    box-shadow: 0 .02rem .08rem rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    margin-bottom: .2rem;

    &:hover {
      box-shadow: 0 .04rem .16rem rgba(0, 0, 0, 0.12);
      transform: translateY(-.04rem);
    }
  }

  // 卡片图片
  .card-image {
    width: 100%;
    height: 1.8rem;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  // 卡片内容
  .card-content {
    padding: .16rem;
  }

  // 卡片头部
  .card-header {
    margin-bottom: .12rem;
  }

  // 商品名称
  .goods-name {
    font-size: .16rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 .08rem 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  // 价格
  .price {
    font-size: .2rem;
    font-weight: bold;
    color: #00d4aa;
    margin: 0;
  }

  // 卡片主体
  .card-body {
    margin-bottom: .16rem;
  }

  // 信息项
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: .08rem;
    font-size: .13rem;
    color: #666;

    i {
      margin-right: .06rem;
      color: #999;
    }
  }

  // 卡片底部
  .card-footer {
    text-align: center;
  }

  // 查看按钮
  .view-btn {
    display: inline-block;
    width: 100%;
    height: .4rem;
    background: linear-gradient(to right, #00d4aa, #00e6b8);
    border: none;
    border-radius: .2rem;
    color: #fff;
    font-size: .15rem;
    font-weight: 500;
    padding: 0 .2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 .02rem .08rem rgba(0, 212, 170, 0.3);
    text-align: center;
    line-height: .4rem;
    text-decoration: none;
    box-sizing: border-box;

    &:hover {
      background: linear-gradient(to right, #00c49a, #00d6a8);
      box-shadow: 0 .03rem .12rem rgba(0, 212, 170, 0.4);
      transform: translateY(-.01rem);
      color: #fff;
    }

    &:active {
      transform: translateY(0);
    }
  }

  // 空状态
  .empty-state {
    text-align: center;
    padding: .6rem .2rem;
    color: #999;

    i {
      font-size: .64rem;
      margin-bottom: .16rem;
      display: block;
    }

    p {
      font-size: .14rem;
      margin: 0;
    }
  }

  // 分页容器
  .pagination-wrapper {
    text-align: center;
    padding: .2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  // Element Plus 分页组件样式重置
  .el-pagination {
    --el-pagination-bg-color: transparent;
    --el-pagination-text-color: #666;
    --el-pagination-button-width: .32rem;
    --el-pagination-button-height: .32rem;
    --el-pagination-font-size: .14rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    button,
    .el-pager li {
      min-width: .32rem;
      height: .32rem;
      line-height: .32rem;
      border-radius: .04rem;
      background: #fff;
      border: .01rem solid #dcdfe6;
      color: #666;
      margin: 0 .04rem;
      transition: all 0.3s;

      &:hover:not([disabled]) {
        color: #00d4aa;
        border-color: #00d4aa;
      }

      &.is-disabled {
        background: #f5f7fa;
        border-color: #e4e7ed;
        color: #c0c4cc;
        cursor: not-allowed;
      }
    }

    .el-pager li {
      &:hover:not(.active) {
        color: #00d4aa;
        border-color: #00d4aa;
      }

      &.active {
        background: linear-gradient(to right, #00d4aa, #00e6b8);
        border-color: #00d4aa;
        color: #fff;
        font-weight: 600;
      }
    }

    .el-pagination__jump {
      margin-left: .16rem;
      display: flex;
      align-items: center;

      // 移除外层容器的边框和阴影
      > * {
        border: none !important;
        box-shadow: none !important;
      }

      // 移除 Element Plus input wrapper 的默认阴影
      .el-input__wrapper {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
      }

      input {
        height: .32rem;
        width: .5rem;
        border-radius: .04rem;
        border: .01rem solid #dcdfe6 !important;
        outline: none;
        box-shadow: none;
        text-align: center;
        padding: 0;
        margin: 0 .08rem;

        &:focus {
          border-color: #00d4aa !important;
        }
      }
    }
  }
}