refactor(css): 优化 CSS 文件引用和样式定义
- 移除 CSS 文件名中的 .scss后缀 - 调整 YLSelect 组件样式 - 优化 QuestionBefore 组件布局- 统一 ActionCompoents 样式 - 调整 Survey 创建页面样式 - 更新 components.d.ts 文件
This commit is contained in:
2
components.d.ts
vendored
2
components.d.ts
vendored
@@ -16,11 +16,11 @@ declare module 'vue' {
|
|||||||
VanCheckbox: typeof import('vant/es')['Checkbox']
|
VanCheckbox: typeof import('vant/es')['Checkbox']
|
||||||
VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
|
VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
|
||||||
VanCol: typeof import('vant/es')['Col']
|
VanCol: typeof import('vant/es')['Col']
|
||||||
|
VanDialog: typeof import('vant/es')['Dialog']
|
||||||
VanDivider: typeof import('vant/es')['Divider']
|
VanDivider: typeof import('vant/es')['Divider']
|
||||||
VanField: typeof import('vant/es')['Field']
|
VanField: typeof import('vant/es')['Field']
|
||||||
VanIcon: typeof import('vant/es')['Icon']
|
VanIcon: typeof import('vant/es')['Icon']
|
||||||
VanPopup: typeof import('vant/es')['Popup']
|
VanPopup: typeof import('vant/es')['Popup']
|
||||||
VanRate: typeof import('vant/es')['Rate']
|
|
||||||
VanRow: typeof import('vant/es')['Row']
|
VanRow: typeof import('vant/es')['Row']
|
||||||
VanSearch: typeof import('vant/es')['Search']
|
VanSearch: typeof import('vant/es')['Search']
|
||||||
VanSwitch: typeof import('vant/es')['Switch']
|
VanSwitch: typeof import('vant/es')['Switch']
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
@import 'base.scss';
|
@import 'base';
|
||||||
@import '../../fonts/iconfont.css';
|
@import '../../fonts/iconfont.css';
|
||||||
@import 'vant.scss';
|
@import 'vant';
|
||||||
|
|
||||||
a,
|
a,
|
||||||
.green {
|
.green {
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
<el-select
|
<el-select
|
||||||
v-model="selectedValue"
|
v-model="selectedValue"
|
||||||
class="yl-select-wrapper"
|
class="yl-select-wrapper"
|
||||||
@change="handleChange"
|
|
||||||
popper-class="yl-select"
|
popper-class="yl-select"
|
||||||
|
@change="handleChange"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
@@ -16,7 +16,7 @@
|
|||||||
</el-option>
|
</el-option>
|
||||||
<template #label="{ label }">
|
<template #label="{ label }">
|
||||||
<!-- {{ option }}-->
|
<!-- {{ option }}-->
|
||||||
<div v-html="format(label)" class="yl-select-label"></div>
|
<div class="yl-select-label" v-html="format(label)"></div>
|
||||||
</template>
|
</template>
|
||||||
</el-select>
|
</el-select>
|
||||||
</template>
|
</template>
|
||||||
@@ -65,7 +65,7 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const format = (html) => {
|
const format = (html) => {
|
||||||
let div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.innerHTML = html;
|
div.innerHTML = html;
|
||||||
return div.innerText;
|
return div.innerText;
|
||||||
};
|
};
|
||||||
@@ -85,6 +85,7 @@ export default defineComponent({
|
|||||||
font-size: 16px; /* 增加字体大小 */
|
font-size: 16px; /* 增加字体大小 */
|
||||||
line-height: 1.5; /* 增加行高 */
|
line-height: 1.5; /* 增加行高 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.yl-select-label {
|
.yl-select-label {
|
||||||
//width: 80%;
|
//width: 80%;
|
||||||
//overflow: hidden;
|
//overflow: hidden;
|
||||||
@@ -95,7 +96,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
.yl-select {
|
.yl-select {
|
||||||
max-width: 80%;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
max-width: 80%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -47,9 +47,9 @@
|
|||||||
<van-action-sheet
|
<van-action-sheet
|
||||||
v-model:show="moveShow"
|
v-model:show="moveShow"
|
||||||
cancel-text="取消"
|
cancel-text="取消"
|
||||||
|
:actions="actions"
|
||||||
@select="optionMove"
|
@select="optionMove"
|
||||||
@cancel="moveShow = false"
|
@cancel="moveShow = false"
|
||||||
:actions="actions"
|
|
||||||
>
|
>
|
||||||
<!-- <template #description>-->
|
<!-- <template #description>-->
|
||||||
<!-- <div class="flex flex-start">操作选项</div>-->
|
<!-- <div class="flex flex-start">操作选项</div>-->
|
||||||
|
|||||||
@@ -53,9 +53,9 @@
|
|||||||
<van-action-sheet
|
<van-action-sheet
|
||||||
v-model:show="questionShow"
|
v-model:show="questionShow"
|
||||||
title=""
|
title=""
|
||||||
@select="questionMove"
|
|
||||||
:actions="actions"
|
:actions="actions"
|
||||||
cancel-text="取消"
|
cancel-text="取消"
|
||||||
|
@select="questionMove"
|
||||||
>
|
>
|
||||||
<!-- <van-cell-group :border="false" class="ml10">-->
|
<!-- <van-cell-group :border="false" class="ml10">-->
|
||||||
<!-- <van-cell title="下移题目" :border="false" @click="questionMove('down')"></van-cell>-->
|
<!-- <van-cell title="下移题目" :border="false" @click="questionMove('down')"></van-cell>-->
|
||||||
@@ -81,11 +81,7 @@
|
|||||||
</header>
|
</header>
|
||||||
<!-- 题前 题后逻辑 本来打算拆成两个 但是 只有最后的处理不一样-->
|
<!-- 题前 题后逻辑 本来打算拆成两个 但是 只有最后的处理不一样-->
|
||||||
<div class="before-or-after">
|
<div class="before-or-after">
|
||||||
<question-before
|
<question-before :skipType="skipType" :activeQuestion="activeQuestion"></question-before>
|
||||||
v-model="questionsInfo.logics"
|
|
||||||
:skipType="skipType"
|
|
||||||
:activeQuestion="activeQuestion"
|
|
||||||
></question-before>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</van-popup>
|
</van-popup>
|
||||||
@@ -96,10 +92,10 @@ import { ref } from 'vue';
|
|||||||
import { useCounterStore } from '@/stores/counter';
|
import { useCounterStore } from '@/stores/counter';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import QuestionBefore from '@/views/Design/components/ActionCompoents/components/QuestionBefore.vue';
|
import QuestionBefore from '@/views/Design/components/ActionCompoents/components/QuestionBefore.vue';
|
||||||
|
import { v4 as uuidv4 } from 'uuid';
|
||||||
const store = useCounterStore();
|
const store = useCounterStore();
|
||||||
const { questionsInfo } = storeToRefs(store);
|
const { questionsInfo } = storeToRefs(store);
|
||||||
const logics = questionsInfo.value.logics;
|
const logics = questionsInfo.value.logics;
|
||||||
import { v4 as uuidv4 } from 'uuid';
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
index: {
|
index: {
|
||||||
|
|||||||
@@ -84,8 +84,8 @@
|
|||||||
<div v-if="skipType === 0" class="flex align-center space-between">
|
<div v-if="skipType === 0" class="flex align-center space-between">
|
||||||
<div class="jump-text mr10">跳转到</div>
|
<div class="jump-text mr10">跳转到</div>
|
||||||
<yl-select
|
<yl-select
|
||||||
class="skip-select"
|
|
||||||
v-model="item.skip_question_index"
|
v-model="item.skip_question_index"
|
||||||
|
class="skip-select"
|
||||||
:options="skipOption"
|
:options="skipOption"
|
||||||
></yl-select>
|
></yl-select>
|
||||||
</div>
|
</div>
|
||||||
@@ -354,9 +354,11 @@ const logicIf = (value, index) => {
|
|||||||
flex: none;
|
flex: none;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jump-text {
|
.jump-text {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.question-before {
|
.question-before {
|
||||||
& .if {
|
& .if {
|
||||||
flex: none;
|
flex: none;
|
||||||
@@ -386,6 +388,7 @@ const logicIf = (value, index) => {
|
|||||||
& .option {
|
& .option {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .skip-select {
|
& .skip-select {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -20,8 +20,8 @@
|
|||||||
<van-row class="ques_title">
|
<van-row class="ques_title">
|
||||||
<van-col :span="6">添加题目</van-col>
|
<van-col :span="6">添加题目</van-col>
|
||||||
<van-col :span="6" :offset="12" @click="show = false">
|
<van-col :span="6" :offset="12" @click="show = false">
|
||||||
<van-icon name="close"
|
<van-icon name="close" />
|
||||||
/></van-col>
|
</van-col>
|
||||||
</van-row>
|
</van-row>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="item in quesList" :key="item.type">
|
<li v-for="item in quesList" :key="item.type">
|
||||||
|
|||||||
Reference in New Issue
Block a user