feat: css 处理 增加font 增加 选择题目

src/views/Design/components/ChooseQuestion.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="choose-question-container">
+    <div :class="chooseQuestionId===element.id ? 'choose-question-active':''" @click="chooseItem">
+      <slot></slot>
+      <!--      题目操作-->
+      <div v-if="chooseQuestionId===element.id" class="choose-question-active-container">
+        <div v-for="item in questionAction" :key="item.key" class="" :class="item.class?item.class:''" @click="itemAction(item)">
+          <i class="icon iconfont choose-question-active-container-icon" v-html="item.icon"></i>
+          <div class="choose-question-active-container-name">
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  element: {
+    type: Object,
+    default: () => {
+      // 此方法目前为空，未来可能扩展
+    }
+  },
+  index: {
+    type: Number,
+    default: 0
+  },
+  chooseQuestionId: {
+    type: String,
+    default: '0'
+  }
+});
+const element = ref(props.element);
+// emit 事件
+
+// 选中题目后出现的操作
+const questionAction = ref([
+  {
+    icon: '&#xe630;',
+    name: '编辑',
+    key: 'edit',
+    class: ''
+  },
+  {
+    icon: '&#xe632;',
+    name: '复制',
+    key: 'copy',
+    class: ''
+  },
+  {
+    icon: '&#xe6a0;',
+    name: '移动',
+    key: 'moveUp',
+    class: 'moverQues'
+  },
+  // {
+  //   icon:'',
+  //   name:'下移',
+  //   key:'moveDown',
+  // class:''
+  // },
+  {
+    icon: '&#xe63f;',
+    name: '删除',
+    key: 'delete',
+    class: ''
+  }
+]);
+const emit = defineEmits(['getChooseQuestionId']);
+
+// 选中题目
+const chooseItem = () => {
+  // 使用从 defineProps 接收的 element 对象
+  emit('getChooseQuestionId', props.element);
+};
+
+const itemAction = (item) => {
+  switch (item.key) {
+  case 'edit':
+    break;
+  case 'copy':
+    break;
+  case 'moveUp':
+    break;
+  case 'moveDown':
+    break;
+  case 'delete':
+    break;
+  }
+};
+
+</script>
+<style scoped lang="scss">
+.choose-question-container {
+  padding: 5px;
+
+  & .choose-question-active {
+    outline: 1px dashed #409eff;
+  }
+
+  & .choose-question-active-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 20px;
+    color: #666;
+    font-size: 12px;
+
+    & .choose-question-active-container-icon {
+      font-size: 14px;
+    }
+
+    & .choose-question-active-container-name {
+      font-size: 12px;
+    }
+  }
+}
+
+</style>