Просмотр исходного кода

style(kwl-detail): 调整布局样式与输入框属性

1. 修正kwl-detail容器高度,减去顶部工具栏占位
2. 隐藏横向滚动条,避免内容溢出时出现水平滚动
3. 禁用文本框垂直拉伸,统一设置盒模型为border-box
lsc 4 дней назад
Родитель
Сommit
194f06d37b
1 измененных файлов с 5 добавлено и 2 удалено
  1. 5 2
      src/components/CollapsibleToolbar/cocolearnCom/KwlDetail.vue

+ 5 - 2
src/components/CollapsibleToolbar/cocolearnCom/KwlDetail.vue

@@ -332,8 +332,9 @@ const handleAddToSlide = () => {
 .kwl-detail {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: calc(100% - 75px);
   overflow-y: auto;
+  overflow-x: hidden;
   padding: 0 0 20px;
 }
 
@@ -556,10 +557,11 @@ const handleAddToSlide = () => {
       border-radius: 10px;
       font-size: 13px;
       color: #374151;
-      resize: vertical;
+      resize: none;
       background: #fff;
       outline: none;
       transition: border-color 0.2s ease;
+      box-sizing: border-box;
 
       &::placeholder {
         color: #9ca3af;
@@ -582,6 +584,7 @@ const handleAddToSlide = () => {
       background: #fff;
       outline: none;
       transition: border-color 0.2s ease;
+      box-sizing: border-box;
 
       &::placeholder {
         color: #9ca3af;