page{ height: 100%; overflow: hidden; } .menu{ width: fit-content; border-radius: 10rpx; overflow: hidden; margin: 0 auto; text-align: center; } .backtop{ position: relative; margin-left: 30rpx; } .backtop::after{ position: absolute; right: 116rpx; top: 16rpx; border: 15rpx solid transparent; border-top: 20rpx solid #808080; content: ""; transform: rotate(180deg); } .active{ background-color: #169BD5; color:#fff!important } .menu view{ display: inline-block; width:120rpx; height: 80rpx; line-height: 80rpx; font-size: 25rpx; color: #8C8C8C; } .content:nth-of-type(1) .num{ background-color: #ca5639!important; } .content:nth-of-type(2) .num{ background-color: #f1c020!important; } .content:nth-of-type(3) .num{ background-color:#ceba04!important; } /* .content:nth-last-of-type(1){ margin-bottom: 500rpx!important; } */ .content{ padding: 10rpx 0; border-bottom: 1px solid #ddd; } .num{ width:fit-content; padding: 0 10rpx; height: 50rpx; line-height: 50rpx; border-radius: 10rpx; background-color: #ddd; text-align: center; font-size: 25rpx; font-weight: 700; } .content2{ width: 100%; max-width: 500rpx; height: 160rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 10rpx; display: inline-block; clear: both; } .title{ font-size: 30rpx; color: #169BD5; } .title_img{ width: 35rpx; height:35rpx; margin: 0 10rpx; } .message{ font-size: 25rpx; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .img{ width: 150rpx; height: 150rpx; float: right; margin-right: 20rpx; } .img image{ width: 100%; height: 100%; } .con-bottom{ display: flex; } .con-bottom>view{ display: inline-block; width: 33%; height: 50rpx; line-height: 50rpx; font-size: 25rpx; color: #8C8C8C; } .con-bottom image{ margin-right: 10rpx; width: 30%; height: 60%; } .good{ padding-right: 100rpx; text-align: left; } .comment{ padding: 0 50rpx; text-align: center; } .favor{ padding-left: 100rpx; text-align: right; } .good>text, .comment>text, .favor>text{ display: inline-block; width: 50rpx; text-align: center; } .publish{ padding: 0; position: absolute; display: inline-block; width: 100rpx!important; height: 100rpx!important; left: 0; right: 0; margin: auto; bottom: 30rpx; } .publish image{ width: 100%; height: 100%; } video{ margin: 20rpx 0; width: 100%; } .none{ bottom: -100%; } .show{ bottom: 0; } .container3{ width: 100%; height: 100%; position: absolute; background-color: transparent; transition: 0.5s; } .comment1{ border: 1px solid #ddd; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background-color: #fff; padding: 20rpx; overflow: scroll; } .h-cut{ width: 80rpx; height: 80rpx; overflow:hidden; border-radius: 50%; } .h-cut image{ width: 100%; height: 100%; } .c-title{ font-weight: 700; } .c-content{ margin-top: 20rpx; padding: 20rpx 0; width: 100%; border-bottom: 1px solid #ddd; background-color: rgb(255, 255, 255,0.5); } .c-content view{ display: inline-block; } .c-content1{ max-width: 120rpx; max-height: 160rpx; text-align: center; float: left; margin:5rpx 18rpx; } .c-content2{ max-width: 550rpx; } .c-name{ font-size: 25rpx; font-weight: 700; } .c-mess{ font-size: 25rpx; word-break: break-all; } .c-time{ font-size: 18rpx; color: #8c8c8c; } .input{ display: flex; justify-content: space-around; align-items: center; bottom: 0; position: absolute; height: 100rpx; width: 100%; background-color: #fff; } .input1{ width: 500rpx; height: 70rpx; line-height: 70rpx; border-radius: 20rpx; border: 1px solid #ddd; } .input2{ padding: 0; margin: 0!important; width: 130rpx!important; height: 70rpx!important; line-height: 70rpx; text-align: center; border-radius: 20rpx; color: #fff; background-color: #169BD5; } .v-num,.v-title{ display: inline-block; margin-right: 20rpx; }