nutui-taro-upgrade/dist/packages/comment/index.css

@nutui/nutui-taro 对京东风格组件库的taro4 版本支持

.nut-rate{display:inline-flex}.nut-rate-item{display:flex;flex-shrink:0;position:relative;margin-right:14px}.nut-rate-item:last-child{margin-right:0}.nut-rate-item__icon{color:var(--nut-rate-icon-color, var(--nut-primary-color, #fa2c19));flex-shrink:0;cursor:pointer}.nut-rate-item__icon--disabled{color:var(--nut-rate-icon-void-color, var(--nut-disable-color, #cccccc))}.nut-rate-item__icon--full{display:flex}.nut-rate-item__icon--half{display:flex;position:absolute;width:50%;left:0;top:0;overflow:hidden}.nut-theme-dark .nut-comment-header__user-name{color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-theme-dark .nut-comment-header__user-default-name{color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-theme-dark .nut-comment__follow-title{color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-theme-dark .nut-comment-bottom__cpx{color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-theme-dark .nut-comment-bottom__cpx-item span{color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-theme-dark .nut-comment .nut-comment-shop{border-top:1px solid var(--nut-dark-color, var(--nut-white, #fff))}.nut-comment{width:100%;font-size:12px}.nut-comment-header{margin-bottom:10px;display:flex;justify-content:space-between}.nut-comment-header__user{flex:1;display:flex;align-items:center}.nut-comment-header__user-avter{width:20px;height:20px;border-radius:50%;margin-right:10px;overflow:hidden}.nut-comment-header__user-avter img{width:20px;height:20px}.nut-comment-header__user-name{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:5px;font-size:12px;color:var(--nut-comment-header-user-name-color, rgb(51, 51, 51));width:auto;max-width:80px}.nut-comment-header__user-default{flex:1}.nut-comment-header__user-default-name{display:flex;align-items:center;margin-bottom:3px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--nut-comment-header-user-name-color, rgb(51, 51, 51))}.nut-comment-header__user-default-name>span{margin-right:8px}.nut-comment-header__user-complex{display:flex;align-items:center;color:var(--nut-comment-header-user-name-color, rgb(51, 51, 51))}.nut-comment-header__user-complex-name{margin-right:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}.nut-comment-header__user-complex image{max-width:50px;height:16px}.nut-comment-header__user-score .nut-rate-item{display:block !important;line-height:10px}.nut-comment-header__user-score .nut-rate-item .nut-icon{line-height:10px}.nut-comment-header__time{width:100px;text-align:right;font-size:12px;color:var(--nut-comment-header-time-color, rgb(153, 153, 153))}.nut-comment-header__complex-score{display:flex;align-items:center;margin-bottom:10px}.nut-comment-header__complex-score .nut-rate-item{display:block !important;line-height:12px}.nut-comment-header__complex-score .nut-rate-item .nut-icon{line-height:12px}.nut-comment-header__complex-score-i{margin:0 8px 0 6px;display:inline-block;width:1px;height:6px;background:var(--nut-text-color, #808080);opacity:.4;font-style:inherit}.nut-comment-header__complex-score-size{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nut-comment-header__labels--item{display:inline-block;height:16px;margin-right:4px}.nut-comment-header__labels--item:last-child{margin-right:0}.nut-comment__main{word-break:break-all;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all;white-space:pre-wrap}.nut-comment-images{display:flex;margin:10px 0 12px;overflow-x:auto;overflow-y:hidden}.nut-comment-images__item{position:relative;width:80px;height:80px;margin-right:5px;border-radius:6px;overflow:hidden;flex-shrink:0}.nut-comment-images__item img{width:80px;height:80px}.nut-comment-images__item--video img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.nut-comment-images__mask{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:90px;line-height:90px;background:rgba(0,0,0,.5);font-size:12px;color:#fff}.nut-comment-images--multi{flex-wrap:wrap;justify-content:space-between;overflow:hidden;width:100%;margin:10px auto 15px}.nut-comment-images--multi .nut-comment-images__item{margin:8px 8px 0 0;width:calc(34% - 8px);height:90px}.nut-comment-images--multi .nut-comment-images__item img{width:100%;height:100%}.nut-comment-images--multi .nut-comment-images__item .svg-demo{width:40px;height:40px}.nut-comment-images--multi .nut-comment-images__item:nth-child(3n){margin-right:0}.nut-comment-images--multi:after{content:"";display:block;width:105px}.nut-comment__follow-title{position:relative;font-size:14px;font-weight:bold;color:var(--nut-black, #000);padding-left:8px}.nut-comment__follow-title svg{position:absolute;left:0;top:13%;color:var(--nut-primary-color, #fa2c19);transform:rotate(90deg);opacity:.4}.nut-comment__follow-com{margin:8px 0px 8px 8px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;word-break:break-all}.nut-comment__follow-img{margin:0 0 8px 8px;display:flex;align-items:center}.nut-comment-bottom{display:flex;justify-content:space-between;color:var(--nut-comment-bottom-label-color, rgb(153, 153, 153));margin-right:5px}.nut-comment-bottom__lable{flex:1;margin-right:10px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nut-comment-bottom__cpx{display:flex;align-items:center;justify-content:flex-end;color:var(--nut-black, #000)}.nut-comment-bottom__cpx-item{position:relative;margin-right:18px;display:flex;align-items:center}.nut-comment-bottom__cpx-item span{color:var(--nut-black, #000);margin-right:5px}.nut-comment-bottom__cpx-item:last-child{margin-right:0}.nut-comment-bottom__cpx-item-popover{position:absolute;top:35px;right:18px;width:max-content;background:var(--nut-white, #fff);padding:10px;box-shadow:0 0 6px var(--nut-disable-color, #cccccc);border-radius:5px 0 5px 5px}.nut-comment-bottom__cpx-item-popover::after{content:"";position:absolute;top:-20px;right:0px;width:0;height:0;border-left:14px solid rgba(0,0,0,0);border-right:0px solid rgba(0,0,0,0);border-top:10px solid rgba(0,0,0,0);border-bottom:10px solid var(--nut-white, #fff)}.nut-comment-bottom__cpx-item-popover::before{content:"";position:absolute;top:-22px;right:-1px;width:0;height:0;border-left:14px solid rgba(0,0,0,0);border-right:0px solid rgba(0,0,0,0);border-top:10px solid rgba(0,0,0,0);border-bottom:10px solid rgba(114,113,113,.1)}.nut-comment-images__play{width:40px;height:40px;position:absolute;left:50%;top:50%;transform:translate(-50%);transform:translate(-50%, -50%);background:rgba(0,0,0,.5);border-radius:50%}.nut-comment-images__play::after{display:block;content:"";position:absolute;left:15px;top:11px;border-top:9px solid rgba(0,0,0,0);border-bottom:9px solid rgba(0,0,0,0);border-left:15px solid #fff}.nut-comment .nut-comment-shop{width:100%;margin-top:20px;padding-top:10px;border-top:1px solid rgba(0,0,0,.1);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;word-break:break-all}.nut-comment .nut-comment-shop span{color:var(--nut-comment-shop-color, var(--nut-primary-color, #fa2c19))}