refactor(Design): 优化问卷题目样式和布局

-调整了多个组件的左图标样式,统一为带编号的标题格式
- 优化了选择题和其他题型的样式,提高了可读性和美观度
-调整了部分颜色和间距,使整体风格更加协调
This commit is contained in:
陈昱达
2025-03-23 13:53:33 +08:00
parent f88e955c01
commit 32a87991e1
12 changed files with 65 additions and 46 deletions

View File

@@ -6,9 +6,7 @@
label-align="top"
class="contenteditable-question-title base-select"
>
<template #left-icon>
{{ isPreview ? element.title : index + 1 }}
</template>
<template #left-icon> {{ isPreview ? element.title : index + 1 }}. </template>
<template #label>
<contenteditable
v-model="element.stem"
@@ -77,19 +75,24 @@
>
<template #default>
<div class="flex align-center van-cell">
<contenteditable
v-model="it.option"
:className="active ? 'contenteditable-input' : ''"
:active="active"
>
<template #right-icon>
<div v-if="active" class="moverQues">
<van-icon class-prefix="mobilefont" name="option "></van-icon>
</div>
</template>
</contenteditable>
<div v-if="it.is_other">
<input class="other-input" type="text" />
<div class="flex" style="width: 100%; flex-wrap: wrap">
<contenteditable
v-model="it.option"
:className="active ? 'contenteditable-input' : ''"
:active="active"
>
<template #right-icon>
<div v-if="active" class="moverQues">
<van-icon class-prefix="mobilefont" name="option "></van-icon>
</div>
</template>
</contenteditable>
<input
class="other-input"
type="text"
v-if="it.is_other"
style="width: 100%"
/>
</div>
</div>
</template>
@@ -164,10 +167,10 @@ const emitValue = () => {
}
& .other-input {
width: 100px;
width: 100%;
height: 20px;
margin-left: 20px;
padding: 3px 5px;
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;