hz/ylst-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(css): 优化公共样式和布局

Browse Source 
- 新增 .br12 类，用于设置 12 像素的圆角
- 调整 .container 样式，移除多余的注释
- 优化内容编辑区域的样式，使其更加美观
- 统一操作选项弹窗的样式和结构
- 调整矩阵问题和文本带图问题的样式
- 优化选择问题和可拖拽组件的样式- 更新设计页面和创建问卷页面的样式
- 移除未使用的 ElCol 和 ElRow 组件引用
- 新增 VanGrid 和 VanGridItem 组件引用
This commit is contained in:
陈昱达
2025-03-17 17:04:19 +08:00
parent b2844adca1
commit d9b7ac271f
13 changed files with 119 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components.d.ts vendored
View File

@@ -9,13 +9,11 @@ declare module 'vue' {
export interface GlobalComponents {
Contenteditable: typeof import('./src/components/contenteditable.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton']
ElCol: typeof import('element-plus/es')['ElCol']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption']
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSpace: typeof import('element-plus/es')['ElSpace']
ElText: typeof import('element-plus/es')['ElText']
@@ -31,6 +29,8 @@ declare module 'vue' {
VanCol: typeof import('vant/es')['Col']
VanDivider: typeof import('vant/es')['Divider']
VanField: typeof import('vant/es')['Field']
VanGrid: typeof import('vant/es')['Grid']
VanGridItem: typeof import('vant/es')['GridItem']
VanIcon: typeof import('vant/es')['Icon']
VanNavBar: typeof import('vant/es')['NavBar']
VanPicker: typeof import('vant/es')['Picker']
@@ -38,9 +38,12 @@ declare module 'vue' {
VanRadio: typeof import('vant/es')['Radio']
VanRadioGroup: typeof import('vant/es')['RadioGroup']
VanRow: typeof import('vant/es')['Row']
VanSearch: typeof import('vant/es')['Search']
VanStepper: typeof import('vant/es')['Stepper']
VanSwitch: typeof import('vant/es')['Switch']
VanTab: typeof import('vant/es')['Tab']
VanTabbar: typeof import('vant/es')['Tabbar']
VanTabbarItem: typeof import('vant/es')['TabbarItem']
VanTabs: typeof import('vant/es')['Tabs']
YLCascader: typeof import('./src/components/YLCascader.vue')['default']
YLInput: typeof import('./src/components/YLInput.vue')['default']

4
src/assets/css/main.scss
View File

@@ -24,6 +24,10 @@ a,
margin-left: 10px;
}
.br12 {
border-radius: 12px;
}
.container {
// 容器的高度 ， 减少底部之后的高度
//height: calc(100vh - 100px);

23
src/assets/css/public.scss
View File

@@ -79,7 +79,7 @@
}
.contenteditable-question-title {
& .van-cell__title {
& > .van-cell__title {
position: relative;
&::after {
@@ -104,3 +104,24 @@
}
}
}
.van-action-sheet-title {
padding: 18px 21px 6px;
font-weight: 600;
font-size: 19px;
}
.van-dialog__confirm {
color: $theme-color;
}
.round-group {
overflow: hidden;
margin: 13px 10px;
background-color: #fff;
}
.van-checkbox__icon--checked .van-icon {
border-color: $theme-color;
background-color: $theme-color;
}

2
src/utils/QuestionJsons/TextWithImages.js
View File

@@ -7,7 +7,7 @@ export default {
options: [],
last_option_index: 0,
config: {
is_required: 1,
is_required: 0,
quick_type: 0,
is_show: []
},

5
src/views/Design/Index.vue
View File

@@ -97,7 +97,7 @@
/>
<!--组件底部左侧操作-->
<template #action="{ element: el }">
<div class="flex slot-actions">
<div class="flex slot-actions" v-if="el.id === chooseQuestionId">
<template v-for="(item, optionIndex) in actionOptions">
<div
v-if="item.question_type.includes(el.question_type)"
@@ -120,9 +120,6 @@
</choose-question>
<!-- 增加控制按钮-->
<slot name="button" :item="element"></slot>
<!-- {{ element.question_type }}-->
<!-- {{questionInfo.survey.pages.length}}-->
<div v-if="!filterGap">
<paging
v-if="!element.question_type && questionInfo.survey.pages.length > 1"

11
src/views/Design/components/ActionCompoents/OptionAction.vue
View File

@@ -30,11 +30,10 @@
</div>
<!-- 操作项弹窗-->
<van-action-sheet v-model:show="show">
<template #description>
<div class="flex flex-start">操作选项</div>
</template>
<van-cell-group :border="false" class="ml10">
<van-cell title="固定置底" :border="false">
<div class="van-action-sheet-title">操作选项</div>
<van-cell-group :border="false" class="br12 round-group">
<van-cell title="固定置底">
<template #right-icon>
<van-switch
v-model="activeOption.is_fixed"
@@ -45,7 +44,7 @@
></van-switch>
</template>
</van-cell>
<van-cell title="设为其他项" :border="false">
<van-cell title="设为其他项">
<template #right-icon>
<van-switch
v-model="activeOption.is_other"

21
src/views/Design/components/ActionCompoents/QuestionAction.vue
View File

@@ -7,10 +7,12 @@
<!-- 操作项弹窗-->
<van-action-sheet v-model:show="show" title="">
<template #description>
<div class="flex flex-start">操作选项</div>
</template>
<van-cell-group :border="false" class="ml10">
<div class="van-action-sheet-title">操作选项</div>
<van-cell-group
v-if="![6].includes(activeQuestion.question_type)"
:border="false"
class="round-group br12"
>
<van-cell
v-if="![6].includes(activeQuestion.question_type)"
title="此题必答"
@@ -44,8 +46,8 @@
></van-switch>
</template>
</van-cell>
<van-divider></van-divider>
</van-cell-group>
<van-cell-group class="round-group br12">
<van-cell title="题前隐藏" :border="false" @click="questionSetting('before')">
<template #right-icon>
<span> {{ getSkipTypeText(1) }} <van-icon name="arrow"></van-icon></span>
@@ -56,7 +58,12 @@
<span> {{ getSkipTypeText(0) }} <van-icon name="arrow"></van-icon></span>
</template>
</van-cell>
<van-divider></van-divider>
</van-cell-group>
<!-- 设置css样式-->
<van-cell-group
v-if="[2, 5, 4, 8, 18, 9, 10].includes(activeQuestion.question_type)"
class="round-group br12"
>
<!-- 根据不同题型 展示不同的操作-->
<!-- 多选-->
<checkbox-question-action

5
src/views/Design/components/ChooseQuestion.vue
View File

@@ -12,6 +12,7 @@
</template>
<template #right-icon>
<question-action
v-if="chooseQuestionId === element.id"
v-model:data="element"
:questionsInfo="questionsInfo"
:questions="questions"
@@ -30,7 +31,6 @@
<template #icon>
<slot name="action" :element="element" :index="index"></slot>
</template>
<template #title>{{}}</template>
</van-cell>
</div>
<div v-else>
@@ -98,9 +98,8 @@ const chooseItem = () => {
</script>
<style scoped lang="scss">
@import '@/assets/css/theme';
.choose-question-container {
padding: 12px;
padding: 12px 12px 0 12px;
& .choose-question-context {
overflow: hidden;

2
src/views/Design/components/Draggable.vue
View File

@@ -1,5 +1,5 @@
<template>
<div ref="draggable">
<div ref="draggable" class="draggable">
<div
v-for="(element, index) in data"
:key="element.id || element.pageId"

2
src/views/Design/components/Questions/Completion.vue
View File

@@ -5,6 +5,7 @@
:label="element.stem"
:required="element.config.is_required === 1"
label-align="top"
class="contenteditable-question-title"
>
<template #left-icon>
{{ index + 1 }}
@@ -62,6 +63,7 @@ const emitValue = () => {
.other_input {
width: 100%;
min-height: 40px;
margin-top: 12px;
margin-bottom: 10px;
padding: 12px;
border: 1px solid #f4f4f4;

24
src/views/Design/components/Questions/MartrixQuestion.vue
View File

@@ -40,7 +40,9 @@ const emitValue = () => {
<template>
<van-field
v-model="element.stem" :label="element.stem" :required="element.config.is_required === 1"
v-model="element.stem"
:label="element.stem"
:required="element.config.is_required === 1"
label-align="top"
>
<template #left-icon>
@@ -60,7 +62,11 @@ const emitValue = () => {
<th></th>
<!-- 第二行内容开始填充 -->
<td v-for="col in element.options[1]" :key="col.option" ref="columnLabels">
<contenteditable v-model="col.option" :active="active" @blur="emitValue"></contenteditable>
<contenteditable
v-model="col.option"
:active="active"
@blur="emitValue"
></contenteditable>
</td>
<th></th>
@@ -70,7 +76,11 @@ const emitValue = () => {
<tr v-for="row in element.options[0]" :key="row.option">
<!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
<td>
<contenteditable v-model="row.option" :active="active" @blur="emitValue"></contenteditable>
<contenteditable
v-model="row.option"
:active="active"
@blur="emitValue"
></contenteditable>
</td>
<td v-for="col in element.options[1]" :key="col.option" class="td-input">
<!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
@@ -78,7 +88,11 @@ const emitValue = () => {
</td>
<td v-if="element.config.is_limit_right_content === 1">
<contenteditable v-model="row.option_config.limit_right_content" :active="active" @blur="emitValue">
<contenteditable
v-model="row.option_config.limit_right_content"
:active="active"
@blur="emitValue"
>
</contenteditable>
</td>
</tr>
@@ -137,7 +151,7 @@ input[type='radio'] {
display: flex;
justify-content: flex-end;
&>span {
& > span {
margin-right: 6px;
font-size: 16px;
}

2
src/views/Design/components/Questions/TextWithImages.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="container text-with-images-container">
<div class="text-with-images-container">
<van-field
readonly
:label="element.stem"

64
src/views/Survey/views/Create/Index.vue
View File

@@ -1,7 +1,12 @@
<template>
<div class="container">
<van-nav-bar
class="navbar-header" :title="surveyTitle" left-text="" left-arrow :border="false" @click-left="$router.go(-1)"
:border="false"
class="navbar-header"
:title="surveyTitle"
left-text=""
left-arrow
@click-left="$router.go(-1)"
>
<template #left>
<van-icon name="left-long" class-prefix="mobilefont" size="18" style="color: #fff" />
@@ -11,11 +16,17 @@
<div class="question-title flex space-between">
<div class="title-left">
<!--问卷标题-->
<contenteditable v-model="questionInfo.survey.title" className="content-title" :active="true" @blur="saveTitle">
</contenteditable>
<contenteditable
v-model="questionInfo.survey.title"
className="content-title"
:active="true"
@blur="saveTitle"
></contenteditable>
<!-- 问卷标注-->
<contenteditable
v-model="questionInfo.survey.introduction" className="introduction" :active="true"
v-model="questionInfo.survey.introduction"
className="introduction"
:active="true"
@blur="saveTitle"
></contenteditable>
</div>
@@ -37,24 +48,24 @@
<div class="ques">
<!-- 题目-->
<Design :activeId="activeId" class="design" @get-active-question="getActiveQuestion">
<Design
:activeId="activeId"
class="design"
@get-active-question="getActiveQuestion"
:filterGap="true"
>
<template #button="{ item }">
<div class="design-button">
<van-button v-if="activeId === item.id" size="small" @click="show = true">
+ 添加题目
</van-button>
<div v-if="activeId === item.id" class="design-button">
<van-button size="small" @click="show = true"> + 添加题目 </van-button>
</div>
</template>
<template #empty>
<div class="empty">
<div v-if="questionInfo.questions.length === 0" class="empty">
<div>
<img :src="emptyImage" alt="" class="empty-image" />
</div>
<van-button
v-if="questionInfo.questions.length === 0" class="theme-background" size="small"
@click="show = true"
>
<van-button class="theme-background" size="small" @click="show = true">
+ 添加题目
</van-button>
</div>
@@ -63,7 +74,11 @@
<!-- <van-button @click="show = true">添加题目</van-button>-->
<!-- 弹出的新增题目弹窗-->
<van-popup
v-model:show="show" round :closeable="true" position="bottom" :style="{ maxHeight: '50%' }"
v-model:show="show"
round
:closeable="true"
position="bottom"
:style="{ maxHeight: '50%' }"
title="添加题目"
>
<van-row class="ques_title">
@@ -72,8 +87,12 @@
<van-grid :gutter="10" class="ques_list">
<van-grid-item
v-for="item in quesList" :key="item.type" :icon="item.icon" icon-color="#70b936"
:text="item.name" @click="questionEvent(item)"
v-for="item in quesList"
:key="item.type"
:icon="item.icon"
icon-color="#70b936"
:text="item.name"
@click="questionEvent(item)"
>
<template #icon>
<span class="mobilefont grid-icon" v-html="item.icon"></span>
@@ -558,7 +577,7 @@ onMounted(async () => {
::v-deep .introduction {
overflow: auto;
width: 230px;
height: 50px;
height: 45px;
}
}
@@ -633,7 +652,7 @@ onMounted(async () => {
margin: 10px 5px;
padding: 5px;
&>div {
& > div {
display: flex;
flex-direction: column;
align-items: center;
@@ -659,8 +678,9 @@ onMounted(async () => {
.design-button {
text-align: center;
margin-top: 10px;
&>button {
& > button {
padding: 0.5rem;
border-radius: 8px;
background: rgba(240, 248, 235, 1);
@@ -683,7 +703,7 @@ onMounted(async () => {
margin-top: 40px;
}
&>button {
& > button {
margin-top: 40px;
padding: 0.5rem;
border-radius: 5px;
@@ -771,7 +791,7 @@ onMounted(async () => {
justify-content: space-between;
margin-left: 8px;
& .van-button+.van-button {
& .van-button + .van-button {
margin-left: 10px;
}
}