.ShangPinXiangQing { width: calc(100% -32rpx); min-height: 100%; position: relative; overflow: hidden; background: #f8f8f8; padding: 0 16rpx; >.Info { position: relative; overflow: hidden; background: #fff; >.Img { width: 100%; // padding-bottom: 50%; // background: #ccc; // position: relative; // overflow: hidden; >image { width: 100%; } } >.Title { padding: 20px 30px; position: relative; overflow: hidden; >text { display: block; width: 100%; font-size: 32px; color: #333; font-weight: bold; line-height: 40px; } } >.flex-h { padding: 0 30px 20px; align-items: center; >text { font-size: 28px; color: #666; line-height: 40px; &:first-child { color: #F35844; } &.flex-item { color: #999; } &:last-child { color: #971C21; } } } } >.Detail { position: relative; overflow: hidden; background: #fff; margin-top: 20px; >.Title { position: relative; overflow: hidden; text-align: center; padding: 30px 0; >.Line { height: 2px; background: rgba(0, 0, 0, 0.08); z-index: 1; position: absolute; left: 30px; right: 30px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); } >text { display: inline-block; background: #fff; padding: 0 40px; line-height: 40px; z-index: 2; font-size: 28px; color: #666; position: relative; } } .Tips { font-size: 24px; color: #999; line-height: 36px; display: block; padding: 40px 0; } >.BottomBtn { padding: 30px; position: relative; overflow: hidden; >text { width: 100%; font-size: 34px; color: #fff; line-height: 98px; background: #ccc; border-radius: 98px; text-align: center; display: block; &.active { background: #F35844; } } } } }