444 lines
6.0 KiB
Plaintext
444 lines
6.0 KiB
Plaintext
.evaluation-detail.data-v-31f50e09 {
|
||
padding: 30rpx 20rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #fff;
|
||
border-bottom: 2rpx solid #FAFAFA;
|
||
flex: 1;
|
||
}
|
||
/* 用户信息区域 */
|
||
.user-section.data-v-31f50e09 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.user-section .user-info.data-v-31f50e09 {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.user-section .user-info .avatar.data-v-31f50e09 {
|
||
width: 62rpx;
|
||
height: 62rpx;
|
||
border-radius: 50%;
|
||
margin-right: 6rpx;
|
||
}
|
||
.user-section .user-info .username.data-v-31f50e09 {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.user-section .time.data-v-31f50e09 {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 4rpx;
|
||
}
|
||
.user-contant.data-v-31f50e09 {
|
||
padding-left: 70rpx;
|
||
/* 评分头部 */
|
||
/* 评论内容 */
|
||
/* 图片区域 */
|
||
}
|
||
.user-contant .rating-header.data-v-31f50e09 {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
}
|
||
.user-contant .rating-header .tag.data-v-31f50e09 {
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
.user-contant .rating-header .stars.data-v-31f50e09 {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 10rpx;
|
||
}
|
||
.user-contant .rating-header .stars .star-icon.data-v-31f50e09 {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 2rpx;
|
||
}
|
||
.user-contant .rating-header .score.data-v-31f50e09 {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #E8101E;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.user-contant .comment.data-v-31f50e09 {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
line-height: 46rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-top: 12rpx;
|
||
}
|
||
.user-contant .photos.data-v-31f50e09 {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
margin-top: 20rpx;
|
||
-webkit-column-gap: 1.1%;
|
||
column-gap: 1.1%;
|
||
row-gap: 6rpx;
|
||
position: relative;
|
||
}
|
||
.user-contant .photos .photo.data-v-31f50e09 {
|
||
width: 32.6%;
|
||
height: 194rpx;
|
||
border-radius: 6rpx;
|
||
object-fit: cover;
|
||
/* background-color: #f5f5f5; */
|
||
}
|
||
.user-contant .photos .more.data-v-31f50e09 {
|
||
width: 59rpx;
|
||
height: 28rpx;
|
||
background: rgba(51, 51, 51, 0.4);
|
||
border-radius: 14rpx;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #FFFFFF;
|
||
line-height: 30rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
bottom: 10rpx;
|
||
right: 10rpx;
|
||
}
|
||
.user-contant .photos .more .more-img.data-v-31f50e09 {
|
||
width: 23rpx;
|
||
height: 17rpx;
|
||
margin-right: 5rpx;
|
||
}
|
||
.comment-main-content .foot-btn.data-v-31f50e09 {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #0751ff;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.comment-main-content .foot-btn .foot-btn-img.data-v-31f50e09 {
|
||
width: 18rpx;
|
||
height: 18rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
.comment-main-content .foot-btn .btnImg2.data-v-31f50e09 {
|
||
-webkit-transform: rotate(180deg);
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* 基础容器：仅保留布局样式，字体样式全部下移到text */
|
||
.evaluation-detail {
|
||
padding: 30rpx 20rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #fff;
|
||
border-bottom: 2rpx solid #FAFAFA;
|
||
flex: 1;
|
||
}
|
||
/* 用户信息区域：显式水平排列（覆盖nvue默认column） */
|
||
.user-section {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.user-info {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
.avatar {
|
||
width: 62rpx;
|
||
height: 62rpx;
|
||
border-radius: 50%;
|
||
margin-right: 6rpx;
|
||
}
|
||
/* 文字样式：直接写在text的class上，不继承 */
|
||
.username {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 33rpx;
|
||
}
|
||
.time {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 4rpx;
|
||
}
|
||
/* 内容区域：左侧内边距保留 */
|
||
.user-contant {
|
||
padding-left: 70rpx;
|
||
}
|
||
/* 评分头部：显式水平排列 */
|
||
.rating-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
}
|
||
.tag {
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
.stars {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-right: 10rpx;
|
||
}
|
||
.star-icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 2rpx;
|
||
}
|
||
/* 评分文字：样式写在text上 */
|
||
.score {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #E8101E;
|
||
line-height: 37rpx;
|
||
}
|
||
/* 评论内容：容器仅控制间距，文字样式在text上 */
|
||
.comment {
|
||
margin-top: 12rpx;
|
||
}
|
||
.comment-text {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
line-height: 46rpx;
|
||
}
|
||
/* 图片区域：显式水平排列+兼容间距（nvue不支持column-gap/row-gap） */
|
||
.photos {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
margin-top: 20rpx;
|
||
position: relative;
|
||
}
|
||
.photo {
|
||
width: 194rpx;
|
||
height: 194rpx;
|
||
border-radius: 6rpx;
|
||
/* nvue不支持object-fit，靠mode="aspectFill"实现 */
|
||
margin-right: 1.1%;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
/* 清除第3个图片的右间距，模拟column-gap */
|
||
/* .photo:nth-child(3n) {
|
||
margin-right: 0;
|
||
} */
|
||
/* 第3n个元素的特殊样式，用动态类名实现 */
|
||
.photo-third {
|
||
margin-right: 0; /* 原本放在nth-child里的样式 */
|
||
/* 其他特殊样式... */
|
||
}
|
||
/* 更多图片提示：显式水平排列 */
|
||
.more {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 59rpx;
|
||
height: 28rpx;
|
||
background: rgba(51, 51, 51, 0.4);
|
||
border-radius: 14rpx;
|
||
position: absolute;
|
||
bottom: 10rpx;
|
||
right: 10rpx;
|
||
}
|
||
.more-img {
|
||
width: 23rpx;
|
||
height: 17rpx;
|
||
margin-right: 5rpx;
|
||
}
|
||
.more-text {
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #FFFFFF;
|
||
line-height: 30rpx;
|
||
}
|
||
/* 全文/收起按钮：文字样式写在text上 */
|
||
.foot-btn {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #0751ff;
|
||
line-height: 33rpx;
|
||
}
|
||
.foot-btn-img {
|
||
width: 18rpx;
|
||
height: 18rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
.btnImg2 {
|
||
-webkit-transform: rotate(180deg);
|
||
transform: rotate(180deg);
|
||
}
|
||
|