css 변경

src/pages/app/priceUpdate.vue

@@ -248,7 +248,7 @@ function onInput(row, column){
                 </span>
             </td>
             <td>제목</td>
-            <td colspan="3">
+            <td colspan="6">
               <div class="column is-fullhd">
                 <VField class="pr-2">
                   <VControl>
@@ -264,13 +264,15 @@ function onInput(row, column){
           </tr>
           <tr>
             <td>내용</td>
-            <td colspan="6">
+            <td colspan="10">
               <div class="column is-fullhd">
                 <VField class="pr-2">
                   <VControl>
                       <textarea
                           v-model="generalParams.content"
                           class="input custom-text-filter"
+                          rows="2"
+                          style="height: 100px;"
                           placeholder="내용"
                       />
                   </VControl>
@@ -300,12 +302,12 @@ function onInput(row, column){
                     :clickable="true"
                 >
                   <template #body-cell="{ row, column, index, value }">
-                    <div>
+                    <div class="control" :class="column.key === 'actions' ? 'text-center' : ''">
                       <!-- 다른 editable 컬럼은 input -->
                       <input
                           v-if="column.editable"
                           v-model="row[column.key]"
-                          class="editable-input"
+                          class="input editable-input"
                           @blur="onInput(row, column)"
                       />
                       <span v-else-if="column.key=='num'">{{index + 1}}</span>
@@ -358,11 +360,11 @@ function onInput(row, column){
                   >
                     <template #body-cell="{ row, column, index, value }">
                       <!-- 예: 특정 컬럼이면 input, 아니면 그냥 값 출력 -->
-                      <div>
+                      <div class="control w-100" :class="column.key === 'delete'? 'text-center': ''">
                         <input
                             v-if="column.editable"
                             v-model="row[column.key]"
-                            class="editable-input"
+                            class="editable-input input"
                         />
                         <span v-else-if="column.key=='num'">{{index+1}}</span>
                         <span v-else-if="column.key=='delete'" class="lnil lnil-close"
@@ -388,9 +390,9 @@ function onInput(row, column){
               </VModal>
             </td>
             <td>등록기간</td>
-            <td colspan="5">
+            <td colspan="6">
               <div class="columns">
-                <div class="column is-5">
+                <div class="column is-4">
                   <VDatePicker
                       v-model="generalParams.regSdat"
                       color="green"
@@ -411,8 +413,10 @@ function onInput(row, column){
                     </template>
                   </VDatePicker>
                 </div>
-                <div style="transform: translateY(15px)">~</div>
+                <div class="column is-1" style="text-align:center; line-height:2rem">
-                <div class="column is-5">
+                  <span>~</span>
+                </div>
+                <div class="column is-4">
                   <VDatePicker
                       v-model="generalParams.regEdat"
                       color="green"
@@ -463,7 +467,7 @@ function onInput(row, column){
       </div>
       <div class="column is-12">
         <VField class="pr-2">
-          <VLabel class="has-fullwidth">
+          <VLabel class="has-fullwidth" style="font-size: 1.3em;">
             결재선
           </VLabel>
         </VField>
@@ -475,7 +479,7 @@ function onInput(row, column){
           :compact="true">
           <template #body-cell="{ row, column, index, value }">
             <!-- 예: 특정 컬럼이면 input, 아니면 그냥 값 출력 -->
-            <div>
+            <div class="w-100">
               <span v-if="column.key=='gubunCd'" class="column">
                 <VField class="pr-1">
                   <VCodeSelect
@@ -517,7 +521,58 @@ function onInput(row, column){
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
+/*css 추가 start*/
+.flex-table {
+  .flex-table-header {
+    padding: 0.1rem !important;
+    min-height: 40px;
+    border-top-left-radius: .75rem;
+    border-top-right-radius: .75rem;
+  }
+
+  .flex-table-cell {
+    .w-100 {
+      width: 100%;
+    }
+  }
+  .flex-table-item {
+    padding: 0.1rem !important;
+    min-height: 40px;
+
+    .column {
+      min-height: 40px;
+      padding: 0.1rem !important;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: .75rem;
+      border-bottom-right-radius: .75rem;
+    }
+  }
+}
+
+.table-container {
+  overflow:hidden;
+  .control {
+    width: 100%;
+  }
+  td {
+    padding: 10px 10px !important;
+    .columns {
+      margin-left: 10px !important;
+      padding-top: 10px;
+    }
+    .column {
+      padding: 0 !important;
+    }
+  }
+}
+
+.text-center {
+  text-align:center;
+}
+/*css 추가 end*/
 .table tbody td {
   color: var(--smoke-white);
 }