/* 商店 */
.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;
      }
    }
  }

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

  .table-header{
    background: #f2fffc;
    padding: .15rem 0;
    text-align: center;
  }

  .table-body{
    text-align: center;
    height: 3.9rem;
  }

  .swiper{
    height: 100%;
  }

  .slider-content{
    padding: .05rem 0;
    height: 100%;
    box-sizing: border-box;
    border-bottom: .01rem solid #ececec;

    .el-row{
      height: 100%;
    }
  }
}