.user { width: 750rpx; padding: 0 40rpx; height: 148rpx; background: #FFFFFF; border-radius: 8rpx; padding: 0 30rpx; display: flex; align-items: center; .content { flex: 1; .name { font-size: 30rpx; margin-bottom: 12rpx; } .desc { font-size: 24rpx; color: #999999; } } .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 24rpx; } .btn { width: 118rpx; height: 56rpx; line-height: 52rpx; text-align: center; background: var(--themeColor); border-radius: 8rpx; font-weight: 500; font-size: 26rpx; color: #fff; } } .container{ padding-bottom: 200rpx; } page { background-color: #f7f7f7; } .banner_swiper{ image{ width: 100%; } } .main_content { padding: 52rpx 40rpx 40rpx; border-radius: 16rpx 16rpx 0rpx 0rpx; background-color: #fff; margin-bottom: 20rpx; .title { font-weight: 500; font-size: 36rpx; margin-bottom: 16rpx; } .desc { font-size: 26rpx; color: #555555; margin-bottom: 26rpx; } .text { font-size: 26rpx; color: #555555; margin-bottom: 40rpx; } } .spaceList{ .item{ .name{ font-weight: 600; font-size: 36rpx; color: #111111; } .img{ width: 100%; } } } .counselor { width: 670rpx; padding: 0 0 0 30rpx; box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(176, 135, 113, 0.2); .content { .name { margin-bottom: 0; } .desc { margin: 0; } } .avatar_wrap { width: 80rpx; height: 80rpx; background: rgba(176, 135, 113, 0.14); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 24rpx; .avatar { width: 52rpx; margin: 0; } } .btn { width: 68rpx; height: 100%; font-size: 26rpx; color: #FFFFFF; font-weight: 400; padding: 20rpx; line-height: 34rpx; border-radius: 0rpx 8rpx 8rpx 0rpx; } } .video { padding: 52rpx 40rpx 40rpx; background-color: #fff; .title { font-weight: 600; font-size: 36rpx; margin-bottom: 32rpx; } .img_wrap{ width: 100%; border-radius: 8rpx; position: relative; .img{ width: 100%; } .play{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 136rpx; height: 58rpx; line-height: 56rpx; text-align: center; background: rgba(0,0,0,0.54); border-radius: 30rpx; font-size: 26rpx; color: rgba(255,255,255,0.8); } } } .detail { padding: 52rpx 40rpx 40rpx; background-color: #fff; .title { font-weight: 600; font-size: 36rpx; margin-bottom: 32rpx; } .line { display: flex; height: 32rpx; margin-bottom: 24rpx; .label { width: 120rpx; font-size: 24rpx; color: #666666; } .val { flex: 1; font-size: 24rpx; color: #333333; } } } .footer { position: fixed; box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE; bottom: 0; left: 0; width: 750rpx; padding: 0rpx 40rpx; background-color: #fff; .btns{ display: flex; align-items: center; height: 100rpx; .btn{ padding: 0; margin-top: 16rpx; } } .sub_btn { display: flex; justify-content: center; align-items: center; height: 72rpx; flex: 1; background-color: var(--themeColor); font-weight: 500; color: #FFFFFF; font-style: 28rpx; box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(176,135,113,0.3), inset 0rpx 2rpx 2rpx 0rpx rgba(255,255,255,0.33); border-radius: 8rpx; .sheji{ width: 28rpx; margin-right: 8rpx; } } .item { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 20rpx; color: #666666; margin-right: 48rpx; .icon { width: 44rpx; } } } .share_modal{ .btns{ display: flex; min-height: 320rpx; display: flex; align-items: center; .item{ display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1; font-size: 26rpx; background-color: #fff; image{ width: 80rpx; height: 80rpx; margin-bottom: 10rpx; } } } .cancel{ height: 80rpx; width: 100%; display: flex; justify-content: center; align-items: center; border: 1rpx solid #e5e5e5; } }