feat: new layout

2024-06-28 15:39:26 +07:00
parent ab3419bd5f
commit ad962eda86
134 changed files with 4977 additions and 2985 deletions
@@ -0,0 +1,90 @@
+<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>