唐润平：上线版,功能为待完善

src/components/content/tunnelScene/editEquComp/childComps/InputNum.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="input-num">
+    <p>{{ params.name }}</p>
+    <input
+      type="text"
+      :placeholder="params.placeholder"
+      @input="handleChange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, onUnmounted } from "vue";
+const params = defineProps({
+  name: String,
+  placeholder: String,
+});
+const emit = defineEmits(["inputValue"]);
+let timer = null;
+function handleChange(e) {
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => {
+    emit("inputValue", e.target.value);
+  }, 200);
+}
+onUnmounted(handleUnmounted);
+function handleUnmounted() {
+  clearInterval(timer);
+}
+</script>
+
+<style lang="scss" scoped>
+#input-num {
+  margin: 40px 30px 0px 30px;
+  P {
+    width: 130px;
+    height: 35px;
+    font-size: 26px;
+    font-family: MicrosoftYaHei;
+    color: #ffffff;
+    line-height: 35px;
+  }
+  input {
+    width: 284px;
+    height: 51px;
+    border: 1px solid #0f82af;
+    background: transparent;
+    margin-top: 20px;
+    font-size: 26px;
+    font-family: MicrosoftYaHei;
+    color: #ffffff;
+    line-height: 35px;
+    padding: 0px 10px;
+    overflow: hidden;
+  }
+  ::placeholder {
+    color: #0f82af;
+  }
+}
+</style>

src/components/content/tunnelScene/editEquComp/childComps/SelectInput.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="select-input">
+    <p>{{ params.name }}</p>
+    <div class="select">
+      <div class="value">
+        <span>{{ value }}</span>
+        <img
+          src="/images/htmlEditDialog/select-icon.png"
+          alt=""
+          @click="isShowList = !isShowList"
+        />
+      </div>
+      <ul v-show="isShowList">
+        <li
+          v-for="(item, index) of params.options"
+          :key="index"
+          @click="handleClickItem(index)"
+        >
+          {{ item.label }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, defineEmits, defineProps } from "vue";
+const params = defineProps({
+  name: String,
+  options: Array,
+  placeholder: String,
+});
+const emit = defineEmits(["selected"]);
+let isShowList = ref(false);
+const value = ref(params.placeholder);
+function handleClickItem(index) {
+  value.value = params.options[index].label;
+  isShowList.value = false;
+  emit("selected", params.options[index]);
+}
+</script>
+
+<style lang="scss" scoped>
+#select-input {
+  margin: 40px 30px 0px 30px;
+  P {
+    width: 130px;
+    height: 35px;
+    font-size: 26px;
+    font-family: MicrosoftYaHei;
+    color: #ffffff;
+    line-height: 35px;
+  }
+  .select {
+    position: relative;
+    .value {
+      width: 284px;
+      height: 51px;
+      border: 1px solid #0f82af;
+      font-size: 28px;
+      font-family: MicrosoftYaHei;
+      color: #08b7b8;
+      line-height: 51px;
+      margin-top: 20px;
+      padding: 0px 0px 0px 10px;
+      position: relative;
+      img {
+        position: absolute;
+        right: 20px;
+        bottom: 18px;
+        cursor: pointer;
+      }
+      img:active {
+        transform: scale(0.8);
+      }
+    }
+    ul {
+      position: absolute;
+      width: 284px;
+      background: #072247;
+      border-radius: 0px 0px 20px 20px;
+      border: 1px solid #0f82af;
+      z-index: 10000;
+      li {
+        height: 37px;
+        font-size: 28px;
+        font-family: MicrosoftYaHei;
+        color: #ffffff;
+        line-height: 37px;
+        margin: 20px 10px;
+        cursor: pointer;
+      }
+      li:hover {
+        color: #08b7b8;
+      }
+    }
+  }
+}
+</style>