page{ display: block; width: 100%; height: 100%; } .titbox{ padding: 32rpx 20rpx 16rpx; } .sharebox{ margin-left: 20rpx; } .sharebox image{ display: block; width: 24rpx; height: 20rpx; margin-right: 8rpx; position: relative; top:7rpx; } .textbox{ padding: 24rpx 20rpx; } .msgbox{ padding: 0 20rpx 140rpx; } .msgbox>view{ margin-bottom: 24rpx; } .iamgeBox image{ display: block; width: 100%; margin-bottom: 24rpx; } /* 图片展示 */ .iamgeBox image { /* float: left; width: 210rpx; height: 154rpx; margin-right: 4rpx; margin-bottom: 4rpx; */ /* max-height: 340rpx; */ } .iamgeBox image:nth-of-type(3n){ /* margin-right: 0; */ } /* 一张图片 */ view.oneImg image { display: block; width: 100%; max-height: max-content; } view.fourImg image:nth-of-type(2n){ margin-right: 50rpx; } .prebox{ position: fixed; top: 36%; left: 0; width: 68rpx; height: 104rpx; opacity: 0.9; background: #384855; border-radius: 0 52rpx 52rpx 0; } .prebox image{ display: block; position: absolute; width: 32rpx; height: 36rpx; top: 34rpx; left: 10rpx; z-index: 99; } .nextbox{ position: fixed; top: 36%; right: 0; width: 68rpx; height: 104rpx; opacity: 0.9; background: #384855; border-radius: 52rpx 0 0 52rpx; } .nextbox image{ display: block; position: absolute; width: 32rpx; height: 36rpx; top: 34rpx; right: 10rpx; z-index: 99; } /* 视频 */ .page { position: relative; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; background: #000; } .videoBox { display: block; width: 100%; height: 100%; } .videoBoxUp { display: block; width: 100%; height: 420rpx; margin-top: 360rpx; } .bgcolor { width: 100%; position: absolute; left: 0; height: 410rpx; bottom: 100rpx; pointer-events: none; z-index: 8; /* background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); */ } .bgcolorshow { bottom: 0; } .personBox { position: absolute; bottom: 360rpx; left: 40rpx; /* width: 380rpx; */ height: 48rpx; z-index: 8; background-color: rgba(0, 0, 0, 0.5); border-radius: 24rpx; padding: 0 16rpx; } .personBox .everyNumBox { float: left; /* width: 50%; */ } .personBox .everyNumBox image { width: 22rpx; height: 26rpx; float: left; margin-left: 12rpx; position: relative; top: 11rpx; } .personBox .everyNumBox view view { float: left; font-family: PingFang-SC-Medium, Source Han Sans CN Medium; font-size: 24rpx; color: #ffffff; margin-left: 10rpx; line-height: 48rpx; } .personMsgBox { position: absolute; bottom: 180rpx; left: 40rpx; z-index: 8; } .personMsgBox .headImg { width: 80rpx; height: 80rpx; border-radius: 40rpx; border: 2px solid #fff; background-color: #fff; overflow: hidden; } .personMsgBox .headImg image { display: block; width: 100%; height: 100%; } .personMsgBox .name { margin-left: 20rpx; font-family: PingFang-SC-Medium, Source Han Sans CN Medium; font-size: 32rpx; color: #ffffff; line-height: 80rpx; } .zanBox { position: absolute; right: 36rpx; bottom: 270rpx; text-align: center; z-index: 8; } #myVideo { display: block; width: 100%; height: 100%; } .videoTitle { font-family: PingFang-SC-Medium, Source Han Sans CN Medium; font-size: 28rpx; width: 480rpx; height: 40rpx; line-height: 40rpx; color: #ffffff; z-index: 8; } .videocontent { font-family: PingFang-SC-Medium, Source Han Sans CN Medium; font-size: 28rpx; width: 445rpx; max-height: 80rpx; line-height: 40rpx; color: #ffffff; white-space: pre-wrap; } .showAllContent { max-height: 400rpx; } .hideContent { display: inline; font-weight: 700; color: #fff; margin-left: 10rpx; font-size: 28rpx; } .showdscText { position: absolute; right: -12rpx; bottom: -2rpx; color: #fff; font-size: 28rpx; } .videotype { font-family: PingFang-SC-Medium, Source Han Sans CN Medium; font-size: 28rpx; width: 560rpx; height: 80rpx; line-height: 40rpx; color: #ffffff; } .videomsgbox{ position: absolute; bottom: 156rpx; left: 25rpx; z-index: 8; } .alertbox { position: fixed; display: block; padding: 20rpx 32rpx; top: 50%; left: 50%; z-index: 8; background: rgba(0, 0, 0, 0.8); color: #fff; max-width: 400rpx; transform: translateX(-50%) translateY(-50%); word-wrap: break-word; font-size: 24rpx; border-radius: 10rpx; } /* 右侧 */ .personamebox1{ width: 140rpx; } .sharenumBox { overflow: inherit; display: block; position: absolute; right: 0; bottom: 156rpx; z-index: 97; background-color: transparent; border: 0px solid transparent; } .sharenumBox button { display: block; background-color: transparent; border: 0px solid transparent; height: 100rpx; margin-bottom: 32rpx; } .sharenumBox button::after { border: 1px solid transparent; } .sharenumBox image { display: block; width: 46rpx; height: 42rpx; } .sharenumBox view { font-family: PingFang-SC-Medium, Source Han Sans CN Medium; font-size: 26rpx; color: #fff; margin-bottom: 16rpx; background-color: transparent; } .sharenumBoxshow view { color: #fff !important; } .box-center image { display: block; margin: 0 auto; } .avatarBox { width: 80rpx !important; height: 80rpx !important; border-radius: 50% !important; } .rightbtnbox{ display: block; position: fixed; right: 0rpx; bottom:200rpx; z-index: 9; } .pricebtnimg{ display: block; position: relative; right: 7rpx; width: 140rpx; height: 140rpx; z-index: 9; margin-bottom: 6rpx; } .tcollectbox{ display: block; width: 98rpx; height: 98rpx; background-color: #ffffff; box-shadow: 0 2rpx 8rpx 0 rgba(56,72,85,0.20); border: solid 1px #B6CADE; border-radius: 50%; position: relative; right: -20rpx; overflow: hidden; } .tcollectbox image{ display: block; width: 27rpx; height: 27rpx; margin: 18rpx auto 12rpx; } .tsharebox{ background-color: #259cfa; box-shadow: 0px 2rpx 15rpx 1px rgba(36, 157, 250, 0.48); border: solid 1px #249dfa; margin-bottom: 24rpx; } .sharenumBox .pricebtnimg{ position: relative; right: 4rpx; top: 0; width: 140rpx; height: 140rpx; margin-top: 24rpx; } .box-center image.bwicon{ width: 60rpx; height: 60rpx; } .box-center view.btext{ position: relative; top: -8px; }