MoreStrive
91 lines
1.8 KiB
Vue
91 lines
1.8 KiB
Vue
<template>
|
|
<div class="comment">
|
|
<div class="input_comment width_common mb-2">
|
|
<div class="box-area-input width_common">
|
|
<textarea id="txtComment" class="block_input" placeholder="* Bình luận của bạn sẽ được biên tập trước khi đăng. Xin vui lòng gõ tiếng Việt có dấu"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<button type="button" class="send-comment">
|
|
Gửi bình luận
|
|
<Icon name="ri:send-plane-2-fill"></Icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.comment {
|
|
pointer-events: none;
|
|
}
|
|
.mb-2 {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.w-full {
|
|
width: 100%;
|
|
}
|
|
.send-comment {
|
|
padding: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
line-height: 1rem;
|
|
background-color: #409eff;
|
|
border: 1px solid;
|
|
color: #fff;
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
max-width: 80rem;
|
|
&.h3 {
|
|
font-size: 1.25rem;
|
|
line-height: 1.75rem;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
.input_comment {
|
|
padding: 0;
|
|
margin-top: 10px;
|
|
background: #fff;
|
|
position: relative;
|
|
width: 100%;
|
|
border-radius: 5px;
|
|
border-top: 1px solid #dedede;
|
|
border-right: 1px solid #dedede;
|
|
border-bottom: 1px solid #dedede;
|
|
}
|
|
|
|
.box-area-input {
|
|
/* background: #f3f6f9; */
|
|
border-radius: 4px;
|
|
position: relative;
|
|
padding: 5px 10px;
|
|
border-left: 2px solid rgba(59, 130, 246, 1);
|
|
}
|
|
|
|
.input_comment textarea.block_input {
|
|
height: 30px;
|
|
font-size: 14px;
|
|
}
|
|
textarea::placeholder {
|
|
color: #878a99;
|
|
}
|
|
.input_comment textarea.block_input {
|
|
height: 58px;
|
|
overflow: hidden;
|
|
resize: none;
|
|
}
|
|
|
|
/* .box-area-input .block_input {
|
|
background: #f7f7f7;
|
|
} */
|
|
|
|
.input_comment textarea {
|
|
background: #fff;
|
|
border: none;
|
|
width: 100%;
|
|
height: 58px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|