/* pages/list/mayday/index.wxss */ .btns { position: absolute; left: 41rpx; right: 41rpx; top: 683rpx; display: flex; flex-wrap: wrap; justify-content: space-between; z-index: 1; } .btn { height: 69rpx; margin-bottom: 15rpx; flex-shrink: 0; } page { background: #69bff2; width: 100%; overflow-x: hidden; font-family: "MicrosoftYaHei"; } .content { background: url(https://static.ticket.sz-trip.com/xcxImages/mayday/bg.png); background-size: 100%; background-repeat: repeat-y; padding-top: 72rpx; } .main-img { display: block; width: 100%; } .content .main-img { width: 377rpx; margin: 0 auto; margin-top: 50rpx; } .list { display: flex; justify-content: space-between; margin: 0 16rpx; flex-wrap: wrap; } .item { width: 336rpx; background-color: #fed78e; border-radius: 20rpx; padding: 7rpx; position: relative; margin-bottom: 20rpx; color: #4b4b4b; } .city-box { position: absolute; z-index: 1; left: 7rpx; top: 7rpx; line-height: 60rpx; border-radius: 20rpx 0 20rpx 0; background: #da902f; padding: 0 20rpx; font-size: 31rpx; } .headimg { width: 336rpx; height: 301rpx; border-radius: 20rpx; } .item .title { font-size: 31rpx; width: 316rpx; margin: 0 10rpx; } .tags { display: flex; font-size: 15rpx; color: #fff; margin: 0 10rpx; height: 23rpx; } .tag { background-color: #a1c443; border-radius: 7rpx; line-height: 23rpx; padding: 0 16rpx; margin-right: 10rpx; } .tags .tag:last-child { margin-right: 0; } .tags .tag:nth-child(2){ background: #da902f; } .item-bottom { display: flex; align-items: center; justify-content: space-between; margin: 0 10rpx; } .item-bottom .price { font-size: 43rpx; font-weight: bold; } .item-bottom .price::before { content: "¥"; font-size: 21rpx; font-weight: normal; } .item-bottom .price::after { content: "起"; font-size: 16rpx; font-weight: normal; } .item-btn { width: 121rpx; line-height: 37rpx; border-radius: 18rpx; background-color: #ffffff; box-shadow: 0rpx 3rpx 11rpx 0rpx rgba(2, 25, 62, 0.27); color: #66b578; font-size: 20rpx; text-align: center; } .new-item { position: relative; margin: 0 30rpx; margin-bottom: 70rpx; margin-top: 30rpx; margin-right: 36rpx; } .new-item .iconimg { transform: rotate(10deg); width: 46rpx; display: block; position: absolute; left: 80rpx; top: -40rpx; } .new-item .iconimg:nth-child(2){ right: 40rpx; left: auto; } .new-item .iconimg1 { width: 60rpx; display: block; position: absolute; left: 40rpx; top: -40rpx; z-index: 2; } .new-item .topbg { position: absolute; width: 172rpx; left: 50%; margin-left: -86rpx; top: -10rpx; } .new-item .topbg image { display: block; width: 172rpx; } .topbg-text { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: #ffe0ac; font-size: 29rpx; } .new-item-bg { width: 100%; height: 340rpx; padding: 7rpx; border-radius: 20rpx; background: white; transform: rotate(-2deg); position: relative; z-index: 1; } .new-headimg { display: block; width: 340rpx; height: 290rpx; margin-left: 20rpx; border-radius: 10rpx; } .new-item-bg-in { background: #4fb5f1; height: 100%; border-radius: 20rpx; } .new-item-bg1 { position: absolute; left: 0; right: 0; top: 0; z-index: 1; transform: rotate(2deg); } .new-item-info { background: #fdda97; height: calc(100% - 20rpx); padding-top: 20rpx; border-radius: 20rpx; display: flex; align-items: center; } .new-info { transform: rotate(-2deg); flex: 1; width: 200rpx; text-align: center; font-size: 17rpx; color: #282828; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-right: 10rpx; margin-left: 10rpx; } .new-info view { width: 100%; } .new-info-title { font-size: 36rpx; color: #e9472e; margin-bottom: 10rpx; font-weight: bold; } .new-item-btn { width: 232rpx !important; line-height: 60rpx; background-color: #ed5032; margin: 0 auto; color: #fff; border-radius: 30rpx; font-size: 36rpx; margin-top: 20rpx; } .bottom-btns { position: absolute; left: 22rpx; right: 22rpx; top: 0; bottom: 0; display: flex; justify-content: space-between; flex-wrap: wrap; } .bottom-btn { width: 165rpx; height: 183rpx; } .bottom-btns .bottom-btn:nth-child(-n+2){ width: 343rpx; height: 187rpx; } .totop-box { position: fixed; right: 30rpx; bottom: 30rpx; width: 100rpx; height: 100rpx; background: rgba(0, 0, 0, 0.5); z-index: 3; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30rpx; flex-direction: column; }