refactor(Design): 优化问卷题目样式和布局
-调整了多个组件的左图标样式,统一为带编号的标题格式 - 优化了选择题和其他题型的样式,提高了可读性和美观度 -调整了部分颜色和间距,使整体风格更加协调
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user