phongdt:page video
This commit is contained in:
Duong Truong Phong
@@ -1,91 +1,101 @@
|
||||
<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 outline-0 outline-none outline-offset-0" 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 class="mt-4">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.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>
|
||||
|
||||
<div class="mb-2">
|
||||
<button type="button" class="mr-2 p-2 bg-blue-500 text-[#fff] rounded text-xs">
|
||||
Gửi bình luận
|
||||
<Icon name="ri:send-plane-2-fill"></Icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.input_comment {
|
||||
padding: 0;
|
||||
margin-top: 10px;
|
||||
background: #f5f5f5;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-top: 1px solid #dedede;
|
||||
border-right: 1px solid #dedede;
|
||||
border-bottom: 1px solid #dedede;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.box-area-input {
|
||||
background: #f7f7f7;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
padding: 10px 0 10px 0;
|
||||
border-left: 2px solid rgba(59, 130, 246, 1);
|
||||
}
|
||||
|
||||
|
||||
.input_comment textarea.block_input {
|
||||
height: 30px;
|
||||
-webkit-transition-duration: 200ms;
|
||||
transition-duration: 200ms;
|
||||
-webkit-transition-property: all;
|
||||
transition-property: all;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
|
||||
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
|
||||
}
|
||||
|
||||
.input_comment textarea.block_input {
|
||||
height: 76px;
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.box-area-input .block_input {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.input_comment textarea {
|
||||
font: 400 16px/150% arial;
|
||||
background: #fff;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 58px;
|
||||
color: #4f4f4f !important;
|
||||
overflow: hidden;
|
||||
padding: 5px 37px 0 15px;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
textarea,
|
||||
select {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 14px;
|
||||
margin: 3px 0;
|
||||
padding: 0 5px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
font-family: arial;
|
||||
font-size: 11px;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user