.section { display: flex; margin: 20rpx; box-sizing: border-box; flex-direction: column; } .newgroup { height: 200rpx; } .newgroup-bg { height: 200rpx; width: 710rpx; } .newgroup-con { height: 200rpx; width: 710rpx; position: absolute; display: flex; z-index: 2; } .newgroup-con-left { width: 520rpx; padding: 50rpx 0 0 40rpx; } .newgroup-con-left text { font-size: 28rpx; color: #fefefe; } .newgroup-con-right { flex: 1; min-width: 0; padding-top: 45rpx; } .newgroup-con-right .newgroup-btn { width: 110rpx; height: 110rpx; } .group-tabs { margin: 32rpx 0 32rpx 0; } .association .tab { width: 100%; height: 130rpx; margin: 20rpx 0 30rpx; } .tab .content { width: 100%; height: 100%; padding: 0 28rpx; box-sizing: border-box; display: flex; justify-content: space-between; } .tab .content .hover-view { background: #f7f7f7; } .tab .content > view { width: 48%; height: 130rpx; background: #ffffff; border-radius: 10rpx; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; } .tab .content > view image { width: 80rpx; height: 80rpx; margin: 0 16rpx 0 22rpx; } .tab .content > view view view { font-size: 34rpx; color: #333; line-height: 50rpx; height: 34rpx; font-weight: bolder; margin-bottom: 10rpx; } .tab .content > view view text { font-size: 26rpx; color: #999; } .tab .anination-tab { width: 100%; height: 6rpx; box-sizing: border-box; padding: 0 28rpx; position: relative; bottom: 6rpx; } .tab .anination-tab .content { position: relative; width: 85%; height: 8rpx; } .tab .anination-tab .content view { width: 46%; height: 100%; position: absolute; background: #fe3815; left: 5%; top: 0; transition: left 0.6s; } .tab .anination-tab view.right { left: 66%; transition: left 0.6s; background: #0062a8; } /*弹窗样式*/ .complete-info-dialog { width: 100%; height: 100vh; position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; } .complete-info-dialog .content { position: relative; box-sizing: border-box; padding: 80rpx 40rpx 10rpx; width: 530rpx; border-radius: 16rpx; background: #fff; } .complete-info-dialog .content .close-dialog { position: absolute; z-index: 1; top: 10rpx; right: 10rpx; width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; } .complete-info-dialog .content .close-dialog image { width: 24rpx; height: 24rpx; } .complete-info-dialog .content .title { font-size: 36rpx; color: #333; width: 100%; line-height: 60rpx; height: 60rpx; text-align: center; margin-bottom: 27rpx; } .complete-info-dialog .content .tip { font-size: 32rpx; color: #666; line-height: 50rpx; text-align: left; margin-bottom: 36rpx; } .btns { display: flex; width: 100%; padding: 0rpx 0 40rpx 0; justify-items: center; align-items: center; flex-direction: column; font-size: 32rpx; } button::after { border: none; display: none; } button:not([size="mini"]) { min-height: inherit !important; width: auto !important; font-weight: normal; } .btns .confirm { width: 390rpx !important; margin: 0 auto 30rpx auto; height: 80rpx; line-height: 80rpx; border-radius: 40rpx; padding: 0rpx !important; font-size: 32rpx; font-weight: normal; background: #e60000; color: #fff; text-align: center; } .group-top { width: 100%; height: 390rpx; box-sizing: border-box; margin-top: 12rpx; padding-top: 42rpx; background: #ffffff; .group-top-add, .group-tabs { display: flex; align-items: center; } .group-top-add { justify-content: space-between; width: 690rpx; height: 124rpx; box-sizing: border-box; margin: 0 auto; padding: 0 42rpx 0 48rpx; background: linear-gradient(90deg, #e60000 0%, #ff3b1d 100%); box-shadow: 0px 9rpx 29rpx 0rpx rgba(229, 29, 18, 0.38); border-radius: 20rpx; -webkit-border-radius: 20rpx; -moz-border-radius: 20rpx; -ms-border-radius: 20rpx; -o-border-radius: 20rpx; .gruop-top-text { font-size: 44rpx; font-family: PangMenZhengDao; font-weight: 400; font-style: italic; color: #ffffff; // text-shadow: 0px 3rpx 10rpx rgba(181, 29, 18, 0.81); background: linear-gradient(0deg, #fffff0 52.8564453125%, #ffdebb 82.373046875%, #ffbf7f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; image { display: block; width: 202rpx; height: 57rpx; } } .gruop-top-img { display: flex; align-items: center; justify-content: center; width: 80rpx; height: 56rpx; background: #ffffff; box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(181, 29, 18, 0.34); border-radius: 28rpx; image { width: 35rpx; height: 35rpx; } } } .group-tabs { width: 690rpx; box-sizing: border-box; margin: 24rpx auto 0; justify-content: space-around; .group-tabs-item { width: 180rpx; height: 180rpx; box-sizing: border-box; padding-top: 22rpx; font-size: 28rpx; font-family: Source Han Serif SC; font-weight: 500; color: #666; text-align: center; line-height: 1; image { width: 100rpx; height: 100rpx; } } .group-tabs-item-on { color: #333; background: #ffffff; box-shadow: 0rpx 5rpx 20rpx 0rpx #ccc; border-radius: 25rpx; -webkit-border-radius: 25rpx; -moz-border-radius: 25rpx; -ms-border-radius: 25rpx; -o-border-radius: 25rpx; transition: box-shadow 0.5s; -webkit-transition: box-shadow 0.5s; -moz-transition: box-shadow 0.5s; -ms-transition: box-shadow 0.5s; -o-transition: box-shadow 0.5s; } } } .group-swiper { width: 710rpx; height: 60rpx; margin: 20rpx auto 0; background: #ffffff; border-radius: 10rpx; -webkit-border-radius: 10rpx; -moz-border-radius: 10rpx; -ms-border-radius: 10rpx; -o-border-radius: 10rpx; .group-swiper-text { width: 100%; font-size: 28rpx; font-family: Source Han Serif SC; font-weight: 500; color: #e60000; text-align: center; line-height: 60rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } .nomore-tip { font-size: 24rpx; font-family: Source Han Serif SC; font-weight: 400; color: #aaaab2; text-align: center; }