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

feat(icon): 新增下拉箭头图标并优化相关样式

Browse Source 
- 新增下拉箭头图标(xiala)
- 优化YLSelect组件样式
- 更新公共样式文件，增加图标相关样式
- 修改字体文件，添加新图标
This commit is contained in:
陈昱达
2025-03-17 20:35:27 +08:00
parent df8368612f
commit 0a7be4b14b
13 changed files with 179 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@@ -32,7 +32,6 @@ declare module 'vue' {
VanGrid: typeof import('vant/es')['Grid']
VanGridItem: typeof import('vant/es')['GridItem']
VanIcon: typeof import('vant/es')['Icon']
VanList: typeof import('vant/es')['List']
VanNavBar: typeof import('vant/es')['NavBar']
VanPicker: typeof import('vant/es')['Picker']
VanPopup: typeof import('vant/es')['Popup']

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

@@ -14,6 +14,7 @@
.van-popup--bottom.van-popup--round {
border-radius: 10px 10px 0 0 !important;
background: #f2f2f2;
}
.van-radio-group {
@@ -131,3 +132,95 @@
border-color: $theme-color;
background-color: $theme-color;
}
.van-grid-item__content {
padding: 8px 10px;
border-radius: 10px;
}
.yl-select {
position: relative;
overflow: hidden;
max-width: 95vw;
}
.el-select__wrapper::after {
content: '\e65b';
position: absolute;
top: 5px;
right: 10px;
font-size: 10px;
}
.el-select__suffix {
display: none;
}
// 自定义下拉箭头样式
.el-select__caret {
color: $theme-color; // 修改箭头颜色
font-size: 18px; // 修改箭头大小
transform: rotate(0deg); // 修改箭头旋转角度（默认是0度，展开时会旋转180度）
}
.el-cascader__tags .el-tag {
background: $theme-color;
color: #fff;
}
.el-tag .el-tag__close {
color: #fff;
}
.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path {
color: $theme-color;
}
.el-checkbox__inner:hover {
border-color: $theme-color;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
border-color: $theme-color;
background: $theme-color;
}
.el-input,
.el-input__wrapper {
background: #fafbfc;
}
.el-select__caret.is-reverse {
transform: rotate(180deg); // 展开时旋转180度
}
.el-select {
border: none;
}
.el-select__wrapper {
background: #fafbfc;
}
.el-select-dropdown__item.is-selected {
color: $theme-color;
}
.el-input__wrapper,
.el-select__wrapper {
box-shadow: none;
}
.el-cascader .el-input.is-focus .el-input__wrapper,
.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused,
.el-cascader:not(.is-disabled):hover .el-input__wrapper {
box-shadow: 0 0 0 0.0267rem $theme-color inset;
&::after {
color: $theme-color;
}
}

15
src/components/YLSelect.vue
View File

@@ -1,7 +1,7 @@
<template>
<el-select
v-model="selectedValue"
class="yl-select-wrapper"
class="yl-select-wrapper mobilefont"
popper-class="yl-select"
@change="handleChange"
>
@@ -84,9 +84,13 @@ export default defineComponent({
.yl-select-wrapper {
position: relative;
display: inline-block;
padding: 2px 0;
border-color: transparent;
border-radius: 12px;
background: #fafbfc;
outline-color: transparent;
font-size: 16px; /* 增加字体大小 */
line-height: 1.5; /* 增加行高 */
//margin-botton: 10px;
}
.yl-select-label {
@@ -97,9 +101,6 @@ export default defineComponent({
}
</style>
<style>
.yl-select {
overflow: hidden;
max-width: 95vw;
}
<style lang="scss">
@import '@/assets/css/theme';
</style>

10
src/fonts/moblie/iconfont.css
View File

@@ -1,9 +1,9 @@
@font-face {
font-family: mobilefont; /* Project id 4841764 */
src:
url('iconfont.woff2?t=1742209273577') format('woff2'),
url('iconfont.woff?t=1742209273577') format('woff'),
url('iconfont.ttf?t=1742209273577') format('truetype');
url('iconfont.woff2?t=1742213166999') format('woff2'),
url('iconfont.woff?t=1742213166999') format('woff'),
url('iconfont.ttf?t=1742213166999') format('truetype');
}
.mobilefont {
@@ -14,6 +14,10 @@
-moz-osx-font-smoothing: grayscale;
}
.mobilefont-xiala::before {
content: '\e65b';
}
.mobilefont-upload::before {
content: '\e682';
}

18
src/fonts/moblie/iconfont.js
View File

File diff suppressed because one or more lines are too long

7
src/fonts/moblie/iconfont.json
View File

@@ -5,6 +5,13 @@
"css_prefix_text": "mobilefont-",
"description": "",
"glyphs": [
{
"icon_id": "6548548",
"name": "下拉",
"font_class": "xiala",
"unicode": "e65b",
"unicode_decimal": 58971
},
{
"icon_id": "15838548",
"name": "upload",

BIN
src/fonts/moblie/iconfont.ttf
View File

Binary file not shown.

BIN
src/fonts/moblie/iconfont.woff
View File

Binary file not shown.

BIN
src/fonts/moblie/iconfont.woff2
View File

Binary file not shown.

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

@@ -121,6 +121,7 @@
position="bottom"
closeable
close-icon="close"
class="popup-bk"
round
:style="{ minHeight: '50%', maxHeight: '75%' }"
@close="saveLogics"
@@ -267,8 +268,8 @@ const getSkipTypeText = (skipType) => {
const ls = [];
logics.map((item) => {
if (
item.skip_type === skipType
&& item.question_index === activeQuestion.value.question_index
item.skip_type === skipType &&
item.question_index === activeQuestion.value.question_index
) {
ls.push(item);
}
@@ -284,13 +285,13 @@ const getSkipTypeText = (skipType) => {
const questionSetting = (type) => {
switch (type) {
case 'before':
questionBeforeShow.value = true;
case 'before':
questionBeforeShow.value = true;
break;
case 'after':
questionBeforeShow.value = true;
break;
break;
case 'after':
questionBeforeShow.value = true;
break;
}
skipType.value = type === 'before' ? 1 : 0;
};
@@ -320,6 +321,10 @@ const updateConfig = (value) => {
//max-width: 90vw;
}
.popup-bk {
background-color: #fff !important;
}
.question-action-container {
font-size: 20px;

69
src/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue
View File

@@ -5,9 +5,9 @@
>
<div class="mt10">
<template v-for="(log, logIndex) in item.logic" :key="logIndex">
<div class=" ">
<div>
<div class="question-before mb10">
<div>
<div class="logics-content">
<!-- 固定分组-->
<!-- if always-->
<yl-select
@@ -144,8 +144,8 @@
<BeforeRate
v-if="
log.logic !== 'always' &&
log.is_answer !== 0 &&
[5, 106].includes(log.question_type)
log.is_answer !== 0 &&
[5, 106].includes(log.question_type)
"
:activeQuestion="activeQuestion"
:logic="log"
@@ -282,52 +282,24 @@
</template>
</BeforeMartrixComplation>
</div>
<!-- <div class="action">-->
<!-- <van-icon-->
<!-- v-if="logIndex !== 0 || log.logic === 'always'"-->
<!-- name="clear"-->
<!-- class="mr10"-->
<!-- @click="deleteLogic(logIndex, item.logic, index)"-->
<!-- ></van-icon>-->
<!-- <van-icon-->
<!-- v-if="log.logic !== 'always'"-->
<!-- name="add"-->
<!-- @click="addLogicItem(logIndex, item.logic)"-->
<!-- ></van-icon>-->
<!-- </div>-->
</div>
</template>
<!-- 如果是题前隐藏-->
<div v-if="skipType === 1">隐藏本题</div>
<div v-if="skipType === 1" class="tip-text">隐藏本题</div>
<!-- 如果是题后跳转-->
<div v-if="skipType === 0" class="flex align-center space-between">
<div class="jump-text mr10">跳转到</div>
<div v-if="skipType === 0" class="">
<div class="jump-text mr10 tip-text">跳转到</div>
<yl-select
v-model="item.skip_question_index"
class="skip-select"
class="skip-select mt10"
:options="skipOption"
></yl-select>
</div>
</div>
<!-- <van-divider-->
<!-- :dashed="true"-->
<!-- :hairline="false"-->
<!-- content-position="right"-->
<!-- :style="{ borderColor: '#bfbfbf' }"-->
<!-- >-->
<!-- <van-icon name="delete" @click="remoteLogic(index)">删除</van-icon>-->
<!-- </van-divider>-->
<!-- <div-->
<!-- v-if="item.skip_type === skipType && item.question_index === activeQuestion.question_index"-->
<!-- >-->
<!-- del-->
<!-- </div>-->
</div>
</template>
<div class="text-center">
<van-button size="small" @click="addLogic">添加逻辑</van-button>
<div class="text-center mt10">
<van-button class="add-action-btn br12" size="small" @click="addLogic">添加逻辑</van-button>
</div>
</template>
<script setup>
@@ -497,6 +469,13 @@ const logicIf = (value, index) => {
</script>
<style scoped lang="scss">
@import '@/assets/css/theme';
.logics-content {
border-color: transparent;
outline-color: transparent;
}
.flex1 {
flex: 1;
}
@@ -526,6 +505,20 @@ const logicIf = (value, index) => {
width: 50px;
}
.tip-text {
color: #000;
font-weight: 500;
font-size: 14px;
}
.add-action-btn {
height: 35px;
padding: 12px 18px;
border: none;
background: rgba(240, 248, 235, 1);
color: $theme-color;
}
.question-before {
width: 100%;

1
src/views/Design/components/Questions/FileUpload.vue
View File

@@ -64,6 +64,7 @@ const emitValue = () => {
:label="element.stem"
:required="element.config.is_required === 1"
label-align="top"
input-align="center"
class="contenteditable-question-title"
>
<template #left-icon>

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

@@ -408,14 +408,14 @@ const questionEvent = (item) => {
options:
item.json.options.length > 0
? item.json.options.map((item) => {
return item.map((it) => {
return {
...it,
// 主键生成
id: uuidv4()
};
});
})
return item.map((it) => {
return {
...it,
// 主键生成
id: uuidv4()
};
});
})
: []
})
);
@@ -548,7 +548,7 @@ const previewQuestion = () => {
router.push({ name: 'preview', query: { ...route.query } });
};
onMounted(async() => {
onMounted(async () => {
await getQuestionDetail();
});
</script>
@@ -618,7 +618,7 @@ onMounted(async() => {
}
:deep(.van-popup--bottom.van-popup--round) {
background-color: #f2f2f2 !important;
background-color: #f2f2f2;
}
.setting_title {