page { background: #E14135; } .top-menus { position: fixed; left: 0; right: 0; height: 80rpx; background: white; display: flex; justify-content: space-around; align-items: center; font-size: 30rpx; line-height: 80rpx; } .top-menu.active { color: #E14135; position: relative; font-weight: 500; } .top-menu.active::after { content: "1"; font-size: 0; width: 40rpx; height: 6rpx; background: linear-gradient(270deg, #E14135, #FF9124); display: block; border-radius: 3rpx; position: absolute; left: 50%; margin-left: -20rpx; bottom: 10rpx; } .title-header { background: #fff !important; } .item { margin: 20rpx 30rpx; background: white; border-radius: 20rpx; font-size: 26rpx; } .item-top { display: flex; padding: 30rpx; } .item-top image { width: 160rpx; height: 160rpx; display: block; flex-shrink: 0; } .item-info { margin-left: 30rpx; color: #333333; display: flex; flex-direction: column; justify-content: space-between; flex: 1; height: 160rpx; width: 440rpx; } .item-info-top { font-size: 30rpx; } .item-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6rpx; } .item-info-bottom { display: flex; justify-content: space-between; align-items: center; } .item-info-bottom text { color: #E14135; } .info-btn { width: 160rpx; text-align: center; line-height: 50rpx; height: 50rpx; background: linear-gradient(0deg, #E14135, #FF9124); border-radius: 25rpx; color: #fff; margin-left: 20rpx; } .info-btn.disable { background: #CCCCCC; color: #fff; } .list { padding-top: 0; padding-bottom: 20rpx; } .item-bottom { display: flex; padding: 20rpx 30rpx; border-top: 1rpx solid #d8d8d8; justify-content: flex-end; } .info-btn-new { background: #fff; border: 2rpx solid; color: #F34922; box-sizing: border-box; } .top-line-box { display: flex; color: #fff; font-size: 30rpx; justify-content: center; align-items: center; margin-top: 20rpx; } .top-line-box::before,.top-line-box::after { content: "1"; font-size: 0; display: block; width: 100rpx; height: 2rpx; background: #FFFFFF; margin: 0 20rpx; } .morebtn { width: 690rpx; line-height: 60rpx; background: #FFFFFF; border-radius: 20rpx; text-align: center; color: #333333; font-size: 26rpx; margin: 20rpx auto; } .menu-box { display: flex; margin: 30rpx; margin-bottom: 0; overflow-x: auto; } .menu-item { width: 228rpx; flex-shrink: 0; font-size: 26rpx; background: #FFDEBD; border-radius: 20rpx 20rpx 0px 0px; text-align: center; height: 80rpx; display: flex; align-items: center; justify-content: center; margin-right: 2rpx; } .menu-box .menu-item:last-child { margin-right: 0; } .menu-item.active { color: #E14135; background: white; } .list .item:last-child { border-radius: 0 0 20rpx 20rpx !important; border: none; } .mine-btn { width: 100rpx; height: 100rpx; background: #FF9124; box-shadow: 0px 0px 14rpx 0px rgba(60, 4, 0, 0.35); border-radius: 50%; position: fixed; right: 30rpx; bottom: 80rpx; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 30rpx; color: #fff; line-height: 34rpx; }