Browse Source

style(kwlPage): 调整注释和kwl输入框样式

1. 为KWL三列的注释补充回车添加项的事件说明
2. 移除输入框上的回车事件绑定,改为在注释中标注
3. 给kwlInput添加边框、圆角和内边距,优化视觉样式
lsc 7 hours ago
parent
commit
67c632667a
1 changed files with 12 additions and 8 deletions
  1. 12 8
      src/components/pages/workPage/components/kwlPage.vue

+ 12 - 8
src/components/pages/workPage/components/kwlPage.vue

@@ -63,7 +63,9 @@
       </div>
     </el-dialog>
 
-    <!-- KWL 三列 -->
+    <!-- KWL 三列 
+            @keyup.enter="addItem('know')"
+     -->
     <div class="kwlColumns">
       <!-- K - 已知 -->
       <div class="kwlColumn kwlColKnow">
@@ -82,13 +84,14 @@
             v-model="newKnow"
             class="kwlInput"
             :placeholder="work.kplaceholder ? work.kplaceholder : lang.ssKWLAddPlaceholder"
-            @keyup.enter="addItem('know')"
           />
           <button class="kwlAddBtn kwlAddBtnKnow" @click="addItem('know')">+</button>
         </div>
       </div>
 
-      <!-- W - 想知 -->
+      <!-- W - 想知
+        @keyup.enter="addItem('want')"
+      -->
       <div class="kwlColumn kwlColWant">
         <div class="kwlColTitle kwlColTitleWant">{{ lang.ssKWLColWant }}</div>
         <div class="kwlColBody">
@@ -105,13 +108,14 @@
             v-model="newWant"
             class="kwlInput"
             :placeholder="work.wplaceholder ? work.wplaceholder : lang.ssKWLAddPlaceholder"
-            @keyup.enter="addItem('want')"
           />
           <button class="kwlAddBtn kwlAddBtnWant" @click="addItem('want')">+</button>
         </div>
       </div>
 
-      <!-- L - 已学 -->
+      <!-- L - 已学
+        @keyup.enter="addItem('learned')"
+      -->
       <div class="kwlColumn kwlColLearn">
         <div class="kwlColTitle kwlColTitleLearn">{{ lang.ssKWLColLearn }}</div>
         <div class="kwlColBody">
@@ -128,7 +132,6 @@
             v-model="newLearned"
             class="kwlInput"
             :placeholder="work.lplaceholder ? work.lplaceholder : lang.ssKWLAddPlaceholder"
-            @keyup.enter="addItem('learned')"
           />
           <button class="kwlAddBtn kwlAddBtnLearn" @click="addItem('learned')">+</button>
         </div>
@@ -818,10 +821,11 @@ export default {
 
 .kwlInput {
   flex: 1;
-  border: none;
+  border: 1px solid #eee;
+  border-radius: 5px;
   outline: none;
   font-size: .8125rem;
-  padding: .375rem 0;
+  padding: .375rem;
   background: transparent;
   color: #333;
 }