.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; 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; } } .main_app{ padding-bottom: 160rpx; } page { background-color: #f7f7f7; } .swiper_wrap{ position: relative; .indicator{ position: absolute; right: 40rpx; bottom: 40rpx; width: 80rpx; height: 40rpx; text-align: center; line-height: 40rpx; background: rgba(0,0,0,0.4); border-radius: 21rpx; color: #fff; font-size: 24rpx; z-index: 999; z-index: 99; } } .banner_swiper{ image{ width: 100%; } } .main_content { position: relative; bottom: 14rpx; 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; overflow: hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .desc { line-height: 40rpx; font-size: 26rpx; color: #555555; margin-bottom: 26rpx; } .text { line-height: 48rpx; 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%; height: 376rpx; } .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); display: flex; align-items: center; justify-content: center; .icon{ width: 14rpx; height: 16rpx; margin-left: 14rpx; } } } } .detail { padding: 52rpx 40rpx 40rpx; background-color: #fff; .fold{ display: flex; justify-content: center; align-items: center; height: 84rpx; margin-top: 20rpx; .icon{ margin-left: 12rpx; } } .title { font-weight: 600; font-size: 36rpx; margin-bottom: 32rpx; } .line { display: flex; padding: 24rpx 0 26rpx; border-bottom: 1rpx dashed #E5E5E5; .label { width: 120rpx; font-size: 24rpx; color: #666666; flex-shrink: 0; } .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; 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; height: 44rpx; } } }