12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- .floatcontainer {
- position: relative;
- height: 750rpx;
- overflow: hidden;
- }
- .nitempic {
- float: left;
- border-radius: 12rpx !important;
- box-shadow: 0 0 22rpx -4rpx #0000004b;
- }
- .floatgroup {
- position: absolute;
- left: 0;
- top: 0;
- &.group0 {
- z-index: 10;
- display: flex;
- column-gap: 60px;
- padding: 0 100px;
- padding-top: 190px;
- .nitempic {
- width: 328rpx;
- }
- .nitempicwrap {
- &:nth-child(2n) {
- transform: translateY(-80px);
- }
- }
- }
- &.group1 {
- z-index: 9;
- display: flex;
- column-gap: 100px;
- padding: 0 16px;
- padding-top: 170px;
- .nitempic {
- width: 280rpx;
- }
- .nitempicwrap {
- &:nth-child(2n + 1) {
- transform: translateY(-80px);
- }
- }
- }
- &.group2 {
- z-index: 8;
- display: flex;
- column-gap: 120px;
- padding: 0 80px;
- .nitempic {
- width: 230rpx;
- }
- .nitempicwrap {
- &:nth-child(2n) {
- transform: translateY(30px);
- }
- }
- }
- }
|