.head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; width: 100vw; height: 80rpx; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; box-sizing: border-box; font-size: 30rpx; font-weight: bold; padding: 0 30rpx; navigator { line-height: 80rpx; } .line-1 { max-width: 500rpx; } } .swiper-box { box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; background-color: #fff; height: 330rpx; swiper-item { position: relative; flex-direction: column; background-color: #E9F3FF; width: 100vw; height: 330rpx; overflow: hidden; .upper { position: absolute; left: 100rpx; top: 36rpx; z-index: 9; .price { font-size: 40rpx; font-weight: bold; color: #43568C; margin-top: 8rpx; } } .lower { display: flex; position: absolute; left: 110rpx; top: 190rpx; z-index: 9; .item { width: 280rpx; .price { font-size: 34rpx; font-weight: bold; color: #43568C; margin-top: 8rpx; } } } .name { color: #999; font-size: 28rpx; } .image { position: absolute; width: 150rpx; height: 110rpx; top: 30rpx; right: 100rpx; z-index: 10; border-radius: 16rpx; } .top { position: relative; width: 100vw; height: 50%; background-color: #E9F3FF; border-radius: 0 0 70rpx 0; z-index: 3; } .angle { position: absolute; right: 0; width: 100rpx; height: 100%; background-color: #fff; z-index: 1; } .bottom { width: 100vw; height: 50%; background-color: #fff; border-radius: 70rpx 0 0 0; z-index: 3; } } } .total { height: 60rpx; line-height: 60rpx; text-align: center; font-size: 28rpx; } .record { display: flex; align-items: center; width: 100vw; padding: 20rpx 30rpx; background-color: #fff; box-sizing: border-box; border-bottom: 1rpx solid #ddd; .content { flex: 1; .title { font-size: 26rpx; font-weight: bold; color: #444; } .exp { font-size: 24rpx; color: #666; margin-top: 8rpx; } } .price { font-weight: bold; color: #DB0D27; font-size: 32rpx; } }