test/subPackages/goods/oneCardTour/info/index.wxss

/* pages/info/sceneProductInfo/index.wxss */
page {
    background: #f8f8f8;
  }
  
  .swiper {
    width: 100%;
    height: 400rpx;
  }
  
  .swiper image {
    height: 400rpx;
    display: block;
    width: 100%;
  }
  
  .top-info {
    border-radius: 20rpx 20rpx 0 0;
    background: white;
    position: relative;
    z-index: 1;
    margin-top: -20rpx;
    padding: 50rpx 40rpx;
  }
  
  .top-info .title {
    font-size: 33rpx;
    font-weight: bold;
    color: #000;
  }
  
  /* sku、产品区域 */
  .box {
    background: white;
    border-radius: 13rpx;
  }
    
  .sku-type-container{
    display: flex;
    margin-top: 21rpx;
    flex-direction: column;
    padding: 26rpx 26rpx 0;
    background: white;
}
  
  .product-item {
    padding: 26rpx 20rpx;
    background-color: rgba(11,137,142, .06);
    border-radius: 13rpx;
    margin-bottom: 26rpx;
  }

  .sku-title-container{
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  
  .skutitle {
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 31rpx;
    color: #000000;
    flex-shrink: 0;
    flex: 1;
    padding-right: 20rpx;
  }
  .sku-more-icon{
    width: 80rpx;
    font-weight: 500;
    font-size: 25rpx;
    color: #666666;
  }
  
  .product-box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 13rpx;
    /* margin-top: 20rpx; */
  }
  
  .product-left {
    flex: 1;
  }
  
  .product-tags {
    display: flex;
    flex-direction: column;
  }
  
  .product-tag {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #0B898E;
    margin-bottom: 13rpx;
    display: flex;
    align-items: center;
  }
  .product-tag::before {
    content: ' ';
    width: 11rpx;
    height: 11rpx;
    background: #0B898E;
    border-radius: 50%;
    display: inline-block;
    margin-right: 13rpx;
  }
  .order-tip-text {
    /* margin-top: 33rpx;
    font-size: 24rpx;
    color: #666; */
    margin-top: 18rpx;

    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #666666;
  }
  
  .product-right {
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  
  .product-right .price {
    font-weight: bold;
    color: #D62828;
    font-size: 24rpx;
    /* margin-bottom: 20rpx; */
    margin-right: 19rpx;
  }
  
  .product-right .price text:nth-child(2) {
    font-size: 36rpx;
  }
  
  .product-right .btn {
    width: 107rpx;
    height: 67rpx;
    background: #0B898E;
    border-radius: 13rpx;
    font-weight: bold;
    font-size: 31rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 67rpx;
  }
  
  .product-right .btn.disable {
    background: #ccc;
  }
  
  
/* 结束 */

  
  .mask-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
  }
  
  .mask-content .icon-close {
    position: absolute;
    right: 40rpx;
    top: 40rpx;
  }
  
  .share-img-box {
    /* width: 551rpx; */
    position: static;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .share-img {
    display: block;
    width: 551rpx;
  }
  
  .share-tips {
    width: 426rpx;
    height: 150rpx;
    background: #FFFFFF;
    border-radius: 25rpx;
    margin-top: 25rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 65rpx;
    color: #999;
    font-size: 24rpx;
    text-align: center;
    line-height: 40rpx;
  }
  
  .share-tips .img {
    display: block;
    width: 55rpx;
    margin: 0 auto;
    margin-bottom: 4rpx;
  }
  
  .tipimg {
    position: absolute;
    left: 50%;
    margin-left: 16rpx;
    width: 24rpx;
    height: 24rpx;
    background: #D62828;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 34rpx;
  }
  
  .tipimg image {
    width: 21rpx;
    display: block;
  
  }
  
  .save-btn {
    width: 403rpx;
    line-height: 77rpx;
    background: #D62828;
    border-radius: 39rpx;
    text-align: center;
    color: #fff;
    font-size: 31rpx;
    font-weight: 500;
    margin-top: 50rpx;
  }

  

  .mask-allowance .mask-content {
    margin: auto;
    width: auto;
    top: initial;
    bottom: initial;
    padding: 20rpx;
    width: 80%;
  }
  
  .mask-allowance .mask-content .rule-title {
    text-align: center;
    margin-bottom: 20rpx;
  }
  
  .fixed-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140rpx;
    background: white;
    display: flex;
    align-items: center;
    box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
    padding: 0 40rpx;
    color: #666666;
    font-size: 23rpx;
    justify-content: space-between;
    text-align: center;
  }
  
  .fixed-bottom .iconfont {
    font-size: 34rpx;
    line-height: 40rpx;
  }
  
  .btns {
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 39rpx;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .btns .btn {
    width: 216rpx;
    line-height: 78rpx;
    background: #D62828;
  }
  
  .btns .btn:nth-child(1) {
    margin-right: 3rpx;
    border-radius: 39rpx;
  }
  
  .btns .btn:nth-child(2) {
    border-radius: 0 39rpx 39rpx 0;
  }
  
  .btns .btn.disable {
    background: #ccc;
  }
  
  .mask-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
  }
  
  .mask-content .icon-close {
    position: absolute;
    right: 40rpx;
    top: 40rpx;
  }
  
  .sku-info-box {
    margin: 50rpx 40rpx;
    display: flex;
    justify-content: space-between;
  }
  
  .sku-info-box image {
    width: 218rpx;
    height: 180rpx;
    border-radius: 13rpx;
    display: block;
    margin-right: 40rpx;
    flex-shrink: 0;
  }
  
  .sku-info {
    flex: 1;
  }
  
  .sku-price {
    font-size: 40rpx;
    font-weight: 500;
    color: #D62828;
    margin: 20rpx 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  
  .sku-price::before {
    content: "￥";
    font-weight: 400;
    font-size: 27rpx;
    vertical-align: baseline;
  }
  
  .sku-price view {
    font-size: 24rpx;
    color: #FFFFFF;
    background-color: #D62828;
    border-radius: 22rpx;
    line-height: 44rpx;
    margin-left: 7rpx;
    padding: 0 20rpx;
  }
  
  .sku-name {
    font-size: 27rpx;
    color: #666666;
  }
  
  .sku-names {
    display: flex;
    font-size: 29rpx;
    color: #333;
    margin: 0 40rpx;
    text-align: center;
    flex-wrap: wrap;
    margin-bottom: 20rpx;
  }
  
  .sku-name-item {
    background: #EFEFEF;
    border: 1rpx solid #EFEFEF;
    width: 318rpx;
    line-height: 77rpx;
    border-radius: 14rpx;
    margin-bottom: 25rpx;
    margin-right: 10rpx;
  }
  
  .sku-name-item:nth-child(2n) {
    margin-right: 0;
  }
  
  .sku-name-item.active {
    color: #0B898E;
    border-color: #0B898E;
    background: rgba(11, 137, 142, 0.1);
  }
  
  .number-box {
    display: flex;
    align-items: center;
    border-top: 1rpx solid #ccc;
    justify-content: space-between;
    margin: 0 40rpx;
    padding: 40rpx 0;
  }
  
  .number-box text {
    flex: 1;
    font-size: 29rpx;
    color: #333;
  }
  
  .number-box view {
    border: 1rpx solid #666;
    border-radius: 7rpx;
    text-align: center;
    width: 67rpx;
    line-height: 67rpx;
    font-size: 33rpx;
    color: #000;
  }
  
  .number-box view.disable {
    border-color: #ccc;
    color: #999;
  }
  
  .sku-name-item.disable {
    border-color: transparent;
    color: #fff;
    background: #d7d7d7;
  }
  
  .number-box view.number {
    width: 94rpx;
    margin: 0 15rpx;
  }
  
  .btn-box {
    height: 138rpx;
    background: #FFFFFF;
    box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .mask-btn {
    width: 670rpx;
    line-height: 78rpx;
    background: #D62828;
    border-radius: 39rpx;
    color: #fff;
    text-align: center;
    font-size: 33rpx;
    font-weight: 500;
  }
  
  .mask-btn.disable {
    background: #ccc;
  }
  
  /* 购物车 */
  .cart-box {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 80rpx;
    background: #FFFFFF;
    box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    right: 20rpx;
    bottom: 166rpx;
  }
  
  .cart-box image {
    display: block;
    width: 49rpx;
  }
  
  .cart-num {
    width: 26rpx;
    border: 1rpx solid;
    border-radius: 50%;
    line-height: 26rpx;
    text-align: center;
    font-size: 23rpx;
    color: #D20000;
    position: absolute;
    right: -2rpx;
    top: -5rpx;
  }
  .headimg {
    position: fixed;
    z-index: 3;
    left: -218rpx;
    width: 218rpx;
    height: 180rpx;
    top: 0;
  }
  .headimg.active {
    transition: left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1), width .6s ease, height .6s ease;
    width: 80rpx;
    height: 80rpx;
    left: 650rpx;
    border-radius: 50%;
  }
  .imgs{
    width: 200rpx;
    height: 200rpx;
    margin: 10rpx;
    border-radius: 8rpx;
  }
  .img-box{
    display: inline-block;
    position: relative;
  }
  .all{
    color: #fff;
    position:absolute;
    bottom: 17rpx;
    right: 10rpx;
    width: 200rpx;
    height: 200rpx;
    border-radius: 8rpx;
    background-color: rgba(0, 0, 0, .5);
  }
  .all view{
    text-align: center;
  }
  .all view:first-child{
    font-size: 40rpx;
    margin-top: 40rpx;
  }
  .all view:last-child{
    margin-top: 10rpx;
    font-size: 30rpx;
  
  }
  .sku{
    margin-left: 10rpx;
    color: #666;
    font-size: 24rpx;
    margin-top: 8rpx;
  }
  .btn-r{
    border-radius: 39rpx !important;
  }
  .totalPrice {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 48rpx;
    color: #D62828;
  }
  .totalPrice::before {
    content: "￥";
    font-size: 24rpx;
  }
  .bottom-box {
    height: 133rpx;
    background: #FFFFFF;
    box-shadow: 0rpx -3rpx 8rpx 0rpx rgba(71,71,71,0.1);
    padding: 0 50rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
  }
  .next {
    width: 250rpx;
    height: 80rpx;
    background: #D62828;
    border-radius: 40rpx;
    font-family: PingFang;
    font-weight: bold;
    font-size: 32rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 80rpx;
  }
  .mask-content1 {
    position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      background: white;
      border-radius: 12rpx;
      overflow-y: auto;
      height: 1100rpx;
  }
  .icon-close {
    position: absolute;
    top: 30rpx;
    right: 30rpx;
  }
  

/* 产品sku对应锚点信息 */
  .scroll-all-box {
    margin: 20rpx 0;
    background: white;
  }
  
  .scroll-menus {
    display: flex;
    font-size: 29rpx;
    color: #333;
    height: 84rpx;
    border-bottom: 1px solid #CCC;
    overflow-x: auto;
    overflow-y: hidden;

  }
  .scroll-menu-item-container{
      display: flex;
      align-items: center;
      height: 100%;
      flex-shrink: 0;
  }
  
  .scroll-menu-item {
    line-height: 84rpx;
    position: relative;
    padding: 0 53rpx;
    flex-shrink: 0;
  }
  .scroll-menu-item.active{
    color: #0B898E;
  }
  
  .scroll-menu-item.active::after {
    content: "1";
    font-size: 0;
    display: block;
    position: absolute;
    width: 60rpx;
    height: 6rpx;
    border-radius: 3rpx;
    background: #0B898E;
    left: 50%;
    margin-left: -30rpx;
    bottom: 0rpx;
  }
  .sku-info-type-container{
      padding: 57rpx 30rpx;
      justify-content: space-between;
  }
  .sku-info-type{
    width: 200rpx;
    height: 53rpx;
    border-radius: 27rpx;
    border: 1px solid #999999;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #666666;
    line-height: 53rpx;
    text-align: center;
  }
  .sku-info-type.active{
    border: 1px solid #0B898E;
    color: #0B898E;
  }