|
@@ -4,10 +4,11 @@
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-.works-page{
|
|
|
+.works-page {
|
|
|
width: 100%;
|
|
|
overflow-x: hidden;
|
|
|
}
|
|
|
+
|
|
|
.videoSection {
|
|
|
width: 750rpx;
|
|
|
height: 421.9rpx;
|
|
@@ -54,20 +55,19 @@
|
|
|
}
|
|
|
|
|
|
.readAuthorSection .profession {
|
|
|
- width: 68rpx;
|
|
|
- height: 24rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 30rpx;
|
|
|
background: rgba(97, 202, 84, 1);
|
|
|
- border-radius: 166rpx;
|
|
|
- border: 2rpx solid rgba(255, 255, 255, 1);
|
|
|
- font-size: 16rpx;
|
|
|
- /* font-family: PingFangSC-Medium; */
|
|
|
- /* font-weight: 500; */
|
|
|
+ border-radius: 15rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
- line-height: 24rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
text-align: center;
|
|
|
position: absolute;
|
|
|
bottom: 26rpx;
|
|
|
- left: 44rpx;
|
|
|
+ left: 51rpx;
|
|
|
+ font-weight: 800;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.readAuthorSection .nickName {
|
|
@@ -79,17 +79,29 @@
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
+ margin-top: -44rpx;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
-.readAuthorSection .like {
|
|
|
+.like {
|
|
|
+ display: inline-block;
|
|
|
margin-left: 20rpx;
|
|
|
- width: 62rpx;
|
|
|
- height: 62rpx;
|
|
|
+ width: 34rpx;
|
|
|
+ height: 39rpx;
|
|
|
font-size: 28rpx;
|
|
|
border-radius: 30rpx;
|
|
|
text-align: center;
|
|
|
color: #FF0000;
|
|
|
position: relative;
|
|
|
+ float: right;
|
|
|
+ margin-right: 51rpx;
|
|
|
+ margin-top: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.like image {
|
|
|
+ width: 34rpx;
|
|
|
+ height: 39rpx;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
@keyframes numberMove {
|
|
@@ -111,24 +123,18 @@
|
|
|
width: 23rpx;
|
|
|
height: 23rpx;
|
|
|
position: absolute;
|
|
|
- left: 13rpx;
|
|
|
- bottom: 28rpx;
|
|
|
+ left: 0;
|
|
|
+ bottom: 20rpx;
|
|
|
opacity: 1;
|
|
|
-
|
|
|
}
|
|
|
|
|
|
-.add-one-come-out{
|
|
|
+.add-one-come-out {
|
|
|
animation: numberMove 1.3s ease;
|
|
|
-webkit-animation: numberMove 1.3s ease;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
-.readAuthorSection .like image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
-}
|
|
|
|
|
|
|
|
|
|
|
@@ -137,33 +143,44 @@
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-left: 90rpx;
|
|
|
- width: 160rpx;
|
|
|
- height: 60rpx;
|
|
|
- border: 2rpx solid #ff0000;
|
|
|
- font-size: 28rpx;
|
|
|
+ width: 122rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ /* border: 3rpx solid #12c962; */
|
|
|
+ /* font-size: 30rpx; */
|
|
|
border-radius: 30rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 60rpx;
|
|
|
- color: #ff0000;
|
|
|
+ /* text-align: center; */
|
|
|
+ /* line-height: 56rpx; */
|
|
|
+ color: #12c962;
|
|
|
+ position: absolute;
|
|
|
+ left: 60rpx;
|
|
|
+ top: 91rpx;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.readAuthorSection .follow image {
|
|
|
- width: 36rpx;
|
|
|
- height: 32rpx;
|
|
|
- margin-right: 15rpx;
|
|
|
+ /* width: 36rpx; */
|
|
|
+ /* height: 32rpx; */
|
|
|
+ /* margin-right: 15rpx; */
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.userSection {
|
|
|
- width: 100%;
|
|
|
- height: 166rpx;
|
|
|
- border-bottom: solid 2rpx #f0f1f5;
|
|
|
+ width: 300rpx;
|
|
|
+ height: 158rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 453rpx;
|
|
|
+ right: 22rpx;
|
|
|
}
|
|
|
|
|
|
.userSection .peopleNum {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- margin: 10rpx 0 0 24rpx;
|
|
|
+ float: right;
|
|
|
+ margin-bottom: 13rpx;
|
|
|
+ margin-right: 12rpx;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.peopleNum .peoplesIcon {
|
|
@@ -174,14 +191,14 @@
|
|
|
|
|
|
.peopleNum .title {
|
|
|
font-size: 24rpx;
|
|
|
- color: #5d5d5d;
|
|
|
+ color: #282828;
|
|
|
height: 24rpx;
|
|
|
line-height: 24rpx;
|
|
|
}
|
|
|
|
|
|
.userSection .scrollWrapper {
|
|
|
display: flex;
|
|
|
- margin-top: 16rpx;
|
|
|
+ /* margin-top: 16rpx; */
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
@@ -196,17 +213,19 @@
|
|
|
}
|
|
|
|
|
|
.userSection .avatarRow .userItem {
|
|
|
- display: felx;
|
|
|
+ display: flex;
|
|
|
justify-items: center;
|
|
|
width: 100rpx;
|
|
|
height: 100rpx;
|
|
|
- margin-left: 24rpx;
|
|
|
+ margin-left: 12rpx;
|
|
|
}
|
|
|
|
|
|
.avatarRow .userItem image {
|
|
|
width: 86rpx;
|
|
|
height: 86rpx;
|
|
|
border-radius: 50%;
|
|
|
+ border: 3rpx solid #12c962;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.commentSection {
|
|
@@ -219,8 +238,11 @@
|
|
|
font-size: 32rpx;
|
|
|
line-height: 44rpx;
|
|
|
margin-left: 20rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ margin-bottom: 17rpx;
|
|
|
color: #444;
|
|
|
+ display: inline-block;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.commentSection .commentInput {
|
|
@@ -271,20 +293,19 @@
|
|
|
}
|
|
|
|
|
|
.avatar-wrapper .profession {
|
|
|
- width: 68rpx;
|
|
|
- height: 24rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 30rpx;
|
|
|
background: rgba(97, 202, 84, 1);
|
|
|
- border-radius: 166rpx;
|
|
|
- border: 2rpx solid rgba(255, 255, 255, 1);
|
|
|
- font-size: 16rpx;
|
|
|
- /* font-family: PingFangSC-Medium; */
|
|
|
- /* font-weight: 500; */
|
|
|
+ border-radius: 15rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
- line-height: 24rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
text-align: center;
|
|
|
position: absolute;
|
|
|
- bottom: -37rpx;
|
|
|
- left: 17rpx;
|
|
|
+ bottom: -29rpx;
|
|
|
+ left: 22rpx;
|
|
|
+ font-weight: 800;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.commentItem .nickName {
|