diff --git a/assets/css/DetailsComments.css b/assets/css/DetailsComments.css index 565671d..a41d58a 100644 --- a/assets/css/DetailsComments.css +++ b/assets/css/DetailsComments.css @@ -2,6 +2,54 @@ padding-top: 22px; padding-left: 42px; } +.comment-box .edit-comment { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + z-index: 12; +} +.comment-box .edit-comment .box { + width: 650px; + border-radius: 10px; + background: #fff; + padding: 20px 15px; +} +.comment-box .edit-comment .box .text { + font-size: 18px; + font-weight: 650; + margin-bottom: 15px; + color: #000; +} +.comment-box .edit-comment .box .input-box { + margin-right: 0; +} +.comment-box .edit-comment .box .input-box .bottom { + border-top: 1px solid #ebebeb; +} +.comment-box .edit-comment .box .btn-list { + padding: 15px 0; + justify-content: flex-end; +} +.comment-box .edit-comment .box .btn-list .btn { + font-size: 14px; + color: #333; + width: 80px; + height: 28px; + line-height: 28px; + text-align: center; + border-radius: 43px; + cursor: pointer; + background-color: #fff; + border: 1px solid #ebebeb; + margin-left: 20px; +} +.comment-box .edit-comment .box .btn-list .btn.send { + background-color: #fddf6d; + border: 1px solid #fddf6d; +} .comment-title { font-weight: 650; color: #000000; diff --git a/assets/css/DetailsComments.less b/assets/css/DetailsComments.less index b2903a7..41954e8 100644 --- a/assets/css/DetailsComments.less +++ b/assets/css/DetailsComments.less @@ -1,6 +1,60 @@ .comment-box { padding-top: 22px; padding-left: 42px; + .edit-comment { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + z-index: 12; + .box { + width: 650px; + // height: 500px; + border-radius: 10px; + background: #fff; + padding: 20px 15px; + + .text { + font-size: 18px; + font-weight: 650; + margin-bottom: 15px; + color: #000; + } + + .input-box { + margin-right: 0; + .bottom { + border-top: 1px solid #ebebeb; + } + } + + .btn-list { + padding: 15px 0; + justify-content: flex-end; + + .btn { + font-size: 14px; + color: #333; + width: 80px; + height: 28px; + line-height: 28px; + text-align: center; + border-radius: 43px; + cursor: pointer; + background-color: #fff; + border: 1px solid #ebebeb; + margin-left: 20px; + + &.send { + background-color: #fddf6d; + border: 1px solid #fddf6d; + } + } + } + } + } } .comment-title { font-weight: 650; diff --git a/components/DetailsComments.vue b/components/DetailsComments.vue index c449caf..b45e7fd 100644 --- a/components/DetailsComments.vue +++ b/components/DetailsComments.vue @@ -1,5 +1,43 @@