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

style:优化代码格式和样式

Browse Source 
- 调整 van-icon 组件的闭合方式，提高代码可读性
- 修正 CSS 选择器的子元素选择符，统一代码风格
This commit is contained in:
陈昱达
2025-03-05 18:13:14 +08:00
parent 9f7b1ba949
commit a140eb3f0e
10 changed files with 182 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components.d.ts vendored
View File

@@ -15,11 +15,13 @@ declare module 'vue' {
VanCellGroup: typeof import('vant/es')['CellGroup']
VanCheckbox: typeof import('vant/es')['Checkbox']
VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
VanCol: typeof import('vant/es')['Col']
VanDialog: typeof import('vant/es')['Dialog']
VanDivider: typeof import('vant/es')['Divider']
VanField: typeof import('vant/es')['Field']
VanIcon: typeof import('vant/es')['Icon']
VanPopup: typeof import('vant/es')['Popup']
VanRow: typeof import('vant/es')['Row']
VanSearch: typeof import('vant/es')['Search']
VanSwitch: typeof import('vant/es')['Switch']
VanTabbar: typeof import('vant/es')['Tabbar']

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

@@ -1,6 +1,6 @@
@import 'base';
@import 'base.scss';
@import '../../fonts/iconfont.css';
@import 'vant';
@import 'vant.scss';
a,
.green {
@@ -39,3 +39,12 @@ a,
.space-between {
justify-content: space-between;
}
.text-center {
text-align: center;
}
//剔除移动端所有滚动条
*::-webkit-scrollbar {
display: none;
}

54
src/components/YLSelect.vue
View File

@@ -1,5 +1,10 @@
<template>
<el-select v-model="selectedValue" class="yl-select-wrapper" @change="handleChange">
<el-select
v-model="selectedValue"
class="yl-select-wrapper"
@change="handleChange"
popper-class="yl-select"
>
<el-option
v-for="item in options"
:key="item.value"
@@ -11,7 +16,7 @@
</el-option>
<template #label="{ label }">
<!-- {{ option }}-->
<div v-html="label"></div>
<div v-html="format(label)" class="yl-select-label"></div>
</template>
</el-select>
</template>
@@ -59,9 +64,15 @@ export default defineComponent({
emit('change', event);
};
const format = (html) => {
let div = document.createElement('div');
div.innerHTML = html;
return div.innerText;
};
return {
selectedValue,
handleChange
handleChange,
format
};
}
});
@@ -74,30 +85,17 @@ export default defineComponent({
font-size: 16px; /* 增加字体大小 */
line-height: 1.5; /* 增加行高 */
}
.yl-select {
height: 35px; /* 增加高度以适应触摸 */
padding: 10px; /* 增加内边距 */
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
outline: none;
cursor: pointer;
appearance: none;
&:disabled {
background-color: #f5f5f5;
cursor: not-allowed;
}
&::after {
content: '\25BC'; /* 添加下拉箭头 */
position: absolute;
top: 50%;
right: 10px;
color: #999;
pointer-events: none;
transform: translateY(-50%);
}
.yl-select-label {
//width: 80%;
//overflow: hidden;
//text-overflow: ellipsis;
//white-space: nowrap;
}
</style>
<style>
.yl-select {
max-width: 80%;
overflow: hidden;
}
</style>

4
src/stores/modules/common.ts
View File

@@ -5837,7 +5837,8 @@ export const useCommonStore = defineStore('common', {
is_repeat: 0,
allow_repeat_num: 2,
repeat_type: 0,
alert_text: '您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。'
alert_text:
'您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。'
},
tip: '',
question_code: '',
@@ -6102,7 +6103,6 @@ export const useCommonStore = defineStore('common', {
],
related: []
}
],
cycle_pages: null
}

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

@@ -5,7 +5,7 @@
</div>
<!-- 操作项弹窗-->
<van-action-sheet v-model:show="show">
<van-action-sheet v-model:show="show" title="">
<template #description>
<div class="flex flex-start">操作选项</div>
</template>
@@ -53,53 +53,28 @@
<van-popup
v-model:show="questionBeforeShow"
:close-on-click-overlay="false"
title="题前隐藏逻辑"
label="题前隐藏逻辑"
position="bottom"
:overlay="false"
closeable
close-icon="close"
round
:style="{ maxHeight: '75%' }"
:style="{ minHeight: '50%', maxHeight: '75%' }"
>
<div class="mv10">
<header><strong>题前隐藏逻辑</strong></header>
<question-before
v-model="questionsInfo.logics"
:skipType="skipType"
:activeQuestion="activeQuestion"
></question-before>
<van-button>添加逻辑</van-button>
<header>
<strong>{{ skipType === 0 ? '题后跳转逻辑' : '题前隐藏逻辑' }}</strong>
</header>
<!-- 题前 题后逻辑 本来打算拆成两个 但是 只有最后的处理不一样-->
<div class="before-or-after">
<question-before
v-model="questionsInfo.logics"
:skipType="skipType"
:activeQuestion="activeQuestion"
></question-before>
</div>
</div>
<!-- <template v-for="(item, index) in logics" :key="index" class="flex">-->
<!-- <div class="flex space-between mv10">-->
<!-- <div-->
<!-- v-if="-->
<!-- item.skip_type === skipType && item.question_index === activeQuestion.question_index-->
<!-- "-->
<!-- class="question-setting"-->
<!-- >-->
<!-- <template v-for="(log, logIndex) in item.logic" :key="logIndex">-->
<!-- <div>-->
<!-- <yl-select-->
<!-- v-model="log.logic"-->
<!-- :options="settingIfOption"-->
<!-- class="question-setting-if"-->
<!-- ></yl-select>-->
<!-- <yl-select v-model="log.logic" :options="settingIfOption"></yl-select>-->
<!-- </div>-->
<!-- </template>-->
<!-- </div>-->
<!-- <div-->
<!-- v-if="-->
<!-- item.skip_type === skipType && item.question_index === activeQuestion.question_index-->
<!-- "-->
<!-- >-->
<!-- del-->
<!-- </div>-->
<!-- </div>-->
<!-- </template>-->
</van-popup>
</template>
<script setup>
@@ -218,7 +193,10 @@ const questionSetting = (type) => {
.mv10 {
margin: 10px;
}
.before-or-after {
height: 500px;
overflow: auto;
}
.y-select {
min-width: 10vw;

98
src/views/Design/components/ActionCompoents/components/QuestionBefore.vue
View File

@@ -73,13 +73,22 @@
<van-icon
v-if="log.logic !== 'always'"
name="add"
@click="addLogic(logIndex, item.logic)"
@click="addLogicItem(logIndex, item.logic)"
></van-icon>
</div>
</div>
</template>
<!-- 如果是题前隐藏-->
<div v-if="skipType === 1">隐藏本题</div>
<!-- 如果是题后跳转-->
<div v-if="skipType === 0" class="flex align-center space-between">
<div class="jump-text mr10">跳转到</div>
<yl-select
class="skip-select"
v-model="item.skip_question_index"
:options="skipOption"
></yl-select>
</div>
</div>
<van-divider
@@ -88,7 +97,7 @@
content-position="right"
:style="{ borderColor: '#bfbfbf' }"
>
<van-icon name="delete">删除</van-icon>
<van-icon name="delete" @click="remoteLogic(index)">删除</van-icon>
</van-divider>
<!-- <div-->
<!-- v-if="item.skip_type === skipType && item.question_index === activeQuestion.question_index"-->
@@ -97,6 +106,9 @@
<!-- </div>-->
</div>
</template>
<div class="text-center">
<van-button size="small" @click="addLogic">添加逻辑</van-button>
</div>
</template>
<script setup>
import YlSelect from '@/components/YLSelect.vue';
@@ -136,6 +148,35 @@ if (questionIndex > 0) {
};
});
}
// 跳转题目
const skipOption = [
{
value: -1,
label: '正常完成'
},
{
value: -2,
label: '提前终止'
},
{
value: -3,
label: '配额超限'
}
];
// questions 排除当前题目的所有数据 并且 排除questions里面无question_type的数据
skipOption.push(
...questions
.filter((item) => {
return item.question_index !== props.activeQuestion.question_index && item.question_type;
})
.map((item) => {
return {
value: item.question_index,
label: item.stem
};
})
);
// 题目选项
let optionOptions = [];
@@ -177,8 +218,13 @@ const deleteLogic = (logIndex, item, index) => {
logics.value.splice(index, 1);
}
};
// 删除 一个 逻辑
const remoteLogic = (index) => {
logics.value.splice(index, 1);
};
// 添加题目
const addLogic = (logIndex, item) => {
const addLogicItem = (logIndex, item) => {
item.splice(logIndex + 1, 0, {
logic: 'and',
question_index: '',
@@ -192,6 +238,42 @@ const addLogic = (logIndex, item) => {
group_index: null
});
};
// 增加逻辑配置
const addLogic = () => {
logics.value.push({
logic: [
{
value: '',
location: 0,
date: '',
time: '',
type: 0,
row_type: 0,
cell_type: 0,
logic: 'if',
operator: '=',
is_answer: 1,
is_select: 0,
row_index: 0,
cell_index: 0,
question_type: '',
question_index: '',
relation_question_index: 0,
relation_question_row_index: 0,
relation_question_cell_index: 0,
is_option_group: '',
option_index: '',
skip_type: null,
question_id: null
}
],
skip_type: props.skipType,
id: props.activeQuestion.id,
question_index: props.activeQuestion.question_index,
question_id: props.activeQuestion.question_id
});
};
const groupOptions = [
{
label: '选项',
@@ -272,7 +354,9 @@ const logicIf = (value, index) => {
flex: none;
width: 40px;
}
.jump-text {
width: 50px;
}
.question-before {
& .if {
flex: none;
@@ -300,10 +384,10 @@ const logicIf = (value, index) => {
}
& .option {
//width: 120px;
width: 100%;
//flex: 1;
}
& .skip-select {
width: 200px;
}
}
</style>

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

@@ -30,20 +30,20 @@ const handleAdd = (addType: 'row' | 'col') => {
const handleMartrixAction = (action: 'delete' | 'setting' | 'more') => {
switch (action) {
// case 'delete':
// showConfirmDialog({
// title: '提示',
// message: '是否确认删除题目？'
// }).then(() => {
// element.list = [];
// });
// break;
// case 'setting':
// break;
// case 'more':
// break;
default:
break;
// case 'delete':
// showConfirmDialog({
// title: '提示',
// message: '是否确认删除题目？'
// }).then(() => {
// element.list = [];
// });
// break;
// case 'setting':
// break;
// case 'more':
// break;
default:
break;
}
};
</script>
@@ -79,17 +79,14 @@ const handleMartrixAction = (action: 'delete' | 'setting' | 'more') => {
<span @click="handleAdd('col')"> <van-icon name="add-o" />添加列标签</span>
</van-col>
<van-col :span="6" :offset="6" class="martrix-table-action-tool">
<span @click="handleMartrixAction('delete')"> <van-icon
name="delete"
style="color: red;"
<span @click="handleMartrixAction('delete')">
<van-icon name="delete" style="color: red"
/></span>
<span @click="handleMartrixAction('setting')"> <van-icon
name="setting"
style="color: lightgrey;"
<span @click="handleMartrixAction('setting')">
<van-icon name="setting" style="color: lightgrey"
/></span>
<span @click="handleMartrixAction('more')"> <van-icon
name="ellipsis"
style="color: lightgrey;"
<span @click="handleMartrixAction('more')">
<van-icon name="ellipsis" style="color: lightgrey"
/></span>
</van-col>
</van-row>
@@ -110,7 +107,6 @@ const handleMartrixAction = (action: 'delete' | 'setting' | 'more') => {
border-width: 0 0 1px;
text-align: left;
}
}
.martrix-table-action {
@@ -125,10 +121,10 @@ const handleMartrixAction = (action: 'delete' | 'setting' | 'more') => {
display: flex;
justify-content: flex-end;
&>span {
& > span {
margin-right: 6px;
font-size: 16px;
}
}
}
</style>
</style>

4
src/views/Market/Index.vue
View File

@@ -3,7 +3,9 @@
<div v-for="item in 10" :key="item" class="template">
<img src="https://picsum.photos/131/128" width="110" height="100" alt="" />
<span>报名/签到模板</span>
<span style="color: rgb(127, 127, 127)">报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span>
<span style="color: rgb(127, 127, 127)"
>报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span
>
</div>
</div>
</template>

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

@@ -19,7 +19,9 @@
<van-popup v-model:show="show" round position="bottom" :style="{ height: '50%' }">
<van-row class="ques_title">
<van-col :span="6">添加题目</van-col>
<van-col :span="6" :offset="12" @click="show = false"> <van-icon name="close" /></van-col>
<van-col :span="6" :offset="12" @click="show = false">
<van-icon name="close"
/></van-col>
</van-row>
<ul>
<li v-for="item in quesList" :key="item.type">
@@ -149,13 +151,13 @@ defineExpose({ init });
margin: 10px 5px;
padding: 5px;
&>div {
& > div {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
&>button {
& > button {
margin: 20px;
border-radius: 10px;
background-color: lightgreen;

4
src/views/Survey/views/Publish/Index.vue
View File

@@ -6,7 +6,7 @@
</template>
</van-nav-bar>
<van-cell-group inset style="margin-top: 20px;padding: 30px;">
<van-cell-group inset style="margin-top: 20px; padding: 30px">
<div>
<img
width="100%"
@@ -89,7 +89,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
margin: 10px
margin: 10px;
}
}
</style>