.comment-me-page { .btn { display: inline-block; margin: 0 7px 0 0; border: 1px solid #636363; font-size: 12px; line-height: 1.3; text-decoration: none; color: #141414; cursor: pointer; padding: 3px 10px 3px 7px; } .btn.active { background: #444; color: #fff; } .btn.disabled { border-color: #999; color: #999; } .btn.radius { border-radius: 3px; } .txt-center { text-align: center; } .color-warn { color: #da1511; } .color-gray { color: #999; } .fl-left { float: left; } .m-hide { display: none; } .comment .title { background-image: resolve("home/comment.png"); &.comment-order { background-image: resolve("home/comment-order.jpg"); } } .me-comment { padding: 10px; font-size: 12px; line-height: 18px; } .main-tip span { color: #e8044f; } .comment-table-header { padding: 0; margin-top: 10px; .info { width: 50%; } .time { width: 415px; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; } .type { width: 49%; } } .comment-table { width: 100%; margin-top: 10px; tr { border-bottom: 1px solid #e6e6e6; th { background: #efefef; padding: 5px; } td { color: #444; padding: 5px; text-align: left; &.center { text-align: center; } &.right { text-align: right; } &.vtop { vertical-align: top; } .goods-img { display: block; min-height: 100px; } .goods-img img { max-width: 100%; } } a { text-decoration: none; } .name { display: block; margin-bottom: 10px; } .remarked { color: #e8044f; } .remark-btn { width: 69px; height: 22px; line-height: 21px; border: 0; background: resolve("home/remark-btn.png") no-repeat; cursor: pointer; color: #fff; outline: none; } } .require-sign { float: left; margin-left: -10px; line-height: 1.8; } .remark-content { width: 405px; border: 1px solid #e6e6e6; word-break: break-all; } .img-preview { float: left; position: relative; width: 60px; height: 60px; border: 1px dashed #ccc; background: resolve("home/upload-icon.png") no-repeat center; margin-right: 10px; overflow: hidden; input[type="file"] { opacity: 0; width: 100%; height: 100%; cursor: pointer; position: absolute; left: 0; top: 0; } i { display: none; position: absolute; top: 0; width: 50%; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.5); cursor: pointer; &.view { left: 0; } &.view-only { width: 100%; } &.del { right: 0; } } img { width: 100%; min-height: 100%; display: none; } &.selected { background: none; border-color: #fff; &:hover i { display: block; } img { display: block; } } } .comment-add { padding: 20px 50px; position: relative; .arrow { position: absolute; width: 40px; height: 20px; left: 75%; margin-left: -20px; top: -20px; overflow: hidden; i, em { position: absolute; width: 0; height: 0; left: 0; top: -20px; border-color: transparent transparent #ccc; border-width: 20px; border-style: dashed dashed solid; } em { border-color: transparent transparent #fff; top: -19px; left: 0; } } .row { margin-bottom: 16px; .col { margin-right: 50px; } .col:last-child { margin-right: 0; } } .s-input { width: 25px; padding-left: 5px; padding-right: 5px; } .textarea { position: relative; > textarea { width: 100%; height: 80px; padding: 10px; border-color: #dfdfdf; resize: none; } .text-tip { position: absolute; display: none; top: 10px; left: 10px; color: #999; } .text-tip i { color: #000; } .text-tip-limit { position: absolute; top: auto; left: auto; right: 0; bottom: 10px; color: #999; } } } .commented-list { td { padding: 20px 5px; } .item { border-bottom: 1px solid #e6e6e6; padding-bottom: 15px; margin-bottom: 15px; &:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } p { margin: 8px 0; } } .comment-info { text-align: right; span { display: inline-block; margin-right: 50px; } } } .comment-star { position: relative; display: inline-block; height: 20px; width: 90px; cursor: pointer; background: resolve("home/star.png") 0 -20px repeat-x; .star-1, .star-2, .star-3, .star-4, .star-5 { position: absolute; left: 0; top: 0; display: inline-block; height: 20px; width: 18px; &.active { background: resolve("home/star.png") repeat-x; } } .star-2 { width: 36px; } .star-3 { width: 54px; } .star-4 { width: 72px; } .star-5 { width: 90px; } &.editable > span { &:hover { background: resolve("home/star.png") repeat-x; } } } } .comment-dialog-widget { position: absolute; padding: 5px; border: 1px solid #999; background: #fff; border-radius: 4px; z-index: 1050; .dialog-titlebar { height: 16px; cursor: move; .dialog-close-btn { float: right; width: 46px; height: 16px; background: resolve("home/openbox_close.png") no-repeat 0 0; cursor: pointer; &:hover { background-position: 0 -16px; } } } .dialog-content { padding: 3px 30px; dl { display: table-row; } dd { display: table-cell; vertical-align: top; font-size: 13px; line-height: 15px; } textarea { width: 390px; height: 80px; max-width: 390px; max-height: 240px; background: resolve("home/input-back.png") repeat-x; font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; } } .dialog-buttons { padding-right: 30px; button { color: #666; float: right; padding: 8px 15px; margin-left: 5px; border: 1px solid #aaa; border-radius: 3px; background-color: #f2f2f2; outline: none; } .dialog-save-btn { color: #fff; font-weight: bold; border-color: #b5023d; background-color: #da0249; } } } .foot-pager { padding-bottom: 0; } } @import "../common/img-preview";