vue: NPCControl

- 외향  모사(딱히 의미는 없으나..)
- 약간 반응형

hwe/ts/components/NumberInputWithInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="row form-group number-input-with-info">
-    <label class="col-sm-6 col-form-label">{{ title }}</label>
-    <div class="col-sm-6">
+    <label class="col-6 col-form-label">{{ title }}</label>
+    <div class="col-6">
       <input
         ref="input"
         type="number"

hwe/ts/components/TopBackBar.vue

@@ -1,15 +1,10 @@
 <template>
-  <table style="width: 1000px; margin: auto" class="tb_layout bg0">
-    <tr>
-      <td style="text-align: left">
-        {{title}}<br /><button
-          type="button"
-          class="btn btn-primary"
-          @click="back"
-        >돌아가기</button><br />
-      </td>
-    </tr>
-  </table>
+  <div class="tb_layout bg0 back_bar">
+    <button type="button" class="btn btn-primary back_btn" @click="back">
+      돌아가기
+    </button>
+    <h2 class="title">{{ title }}</h2>
+  </div>
 </template>
 
 <script lang="ts">
@@ -19,18 +14,16 @@ import "../../scss/game_bg.scss";
 export default defineComponent({
   name: "TopBackBar",
   methods: {
-    back(){
-      if(this.type === 'normal'){
-        location.href = './';
-      }
-      else if(this.type == 'chief'){
-        location.href = 'b_chiefcenter.php';
-      }
-      else{
+    back() {
+      if (this.type === "normal") {
+        location.href = "./";
+      } else if (this.type == "chief") {
+        location.href = "b_chiefcenter.php";
+      } else {
         //TODO: window.close하려면 부모창이 있어야함!
         window.close();
       }
-    }
+    },
   },
   props: {
     title: {
@@ -38,7 +31,7 @@ export default defineComponent({
       required: true,
     },
     type: {
-      type: String as PropType<"normal"|"chief"|"close">,
+      type: String as PropType<"normal" | "chief" | "close">,
       default: "normal",
       required: false,
     },
@@ -47,5 +40,27 @@ export default defineComponent({
 </script>
 
 
-<style>
+<style scoped>
+.back_bar {
+  max-width: 1000px;
+  width: 100%;
+  margin: auto;
+  position: relative;
+  border-left: 1px solid #888;
+  border-right: 1px solid #888;
+  height: 24pt;
+}
+
+.back_btn {
+  position: absolute;
+  left: 0;
+  height: 24pt;
+}
+
+.title {
+  text-align: center;
+  line-height: 24pt;
+  font-size: 18pt;
+  margin: 0;
+}
 </style>