.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); }