From 10981d439faf18d00b5f26e6c703dc1e66e0cd31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= Date: Fri, 14 Mar 2025 13:42:32 +0800 Subject: [PATCH] =?UTF-8?q?refactor(css):=20=E9=87=8D=E6=9E=84=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E6=96=87=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 theme.scss 文件，定义主题颜色- 新增 public.scss 文件，统一公共样式 - 修改 main.scss 文件，引入新的样式文件 -优化容器背景色渐变效果- 调整导航栏样式，增加面包屑导航 -统一问题类型样式，优化选择题样式 --- components.d.ts | 4 + src/assets/css/main.scss | 9 +- src/assets/css/public.scss | 33 ++ src/assets/css/theme.scss | 1 + src/assets/css/vant.scss | 11 - src/layouts/index.vue | 51 +-- src/layouts/utils.js | 40 +- src/main.ts | 3 +- src/utils/common.js | 370 +++--------------- src/views/Design/Index.vue | 2 +- .../ActionCompoents/QuestionAction.vue | 2 +- .../Design/components/ChooseQuestion.vue | 46 ++- .../Design/components/Questions/Choice.vue | 3 +- .../components/Questions/types/question.d.ts | 3 +- src/views/Survey/views/Create/Index.vue | 130 ++---- 15 files changed, 240 insertions(+), 468 deletions(-) create mode 100644 src/assets/css/public.scss create mode 100644 src/assets/css/theme.scss delete mode 100644 src/assets/css/vant.scss diff --git a/components.d.ts b/components.d.ts index 20a78a3..8048365 100644 --- a/components.d.ts +++ b/components.d.ts @@ -17,14 +17,18 @@ 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'] 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'] VanPopup: typeof import('vant/es')['Popup'] 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'] diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 5725a99..97365b9 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -1,7 +1,8 @@ +@import 'theme'; @import 'base'; @import '../../fonts/iconfont.css'; -@import 'vant'; @import '../../fonts/moblie/iconfont.css'; +@import 'public'; a, .green { @@ -15,6 +16,12 @@ a, margin-left: 10px; } +.container { + //width: 100%; + // 绿色 #70B937 白色过渡渐变 竖向 上一半部分 渐变到白色就可以 + background: linear-gradient(to bottom, $theme-color 200px, #f2f2f2 300px); +} + @media (hover: hover) { a:hover { background-color: hsla(160deg, 100%, 37%, 0.2); diff --git a/src/assets/css/public.scss b/src/assets/css/public.scss new file mode 100644 index 0000000..56b496d --- /dev/null +++ b/src/assets/css/public.scss @@ -0,0 +1,33 @@ +.van-cell { + padding: 8px !important; +} + +.van-divider { + margin: 5px 0 !important; +} + +.van-popup--bottom.van-popup--round { + border-radius: 10px 10px 0 0 !important; +} + +.van-radio-group { + & .van-radio { + .van-radio__icon--checked { + .van-icon { + border-color: $theme-color; + background-color: $theme-color; + } + } + } +} + +.van-checkbox-group { + & .van-checkbox { + .van-checkbox__icon--checked { + .van-icon { + border-color: $theme-color; + background-color: $theme-color; + } + } + } +} diff --git a/src/assets/css/theme.scss b/src/assets/css/theme.scss new file mode 100644 index 0000000..020d699 --- /dev/null +++ b/src/assets/css/theme.scss @@ -0,0 +1 @@ +$theme-color: #71b73c; diff --git a/src/assets/css/vant.scss b/src/assets/css/vant.scss deleted file mode 100644 index 75b5c47..0000000 --- a/src/assets/css/vant.scss +++ /dev/null @@ -1,11 +0,0 @@ -.van-cell { - padding: 8px !important; -} - -.van-divider { - margin: 5px 0 !important; -} - -.van-popup--bottom.van-popup--round { - border-radius: 10px 10px 0 0 !important; -} diff --git a/src/layouts/index.vue b/src/layouts/index.vue index c99bac8..0cc86eb 100644 --- a/src/layouts/index.vue +++ b/src/layouts/index.vue @@ -30,9 +30,9 @@ diff --git a/src/layouts/utils.js b/src/layouts/utils.js index df51d1f..f84cd22 100644 --- a/src/layouts/utils.js +++ b/src/layouts/utils.js @@ -46,13 +46,13 @@ function showModal(options) { * @param {*} data * @returns */ -const canPlanetPublishPSM = function(data) { +const canPlanetPublishPSM = function (data) { let isFb = true; let content = ''; let title = '题目设置未完成'; const incompleteQuestionList = []; - data.questions - && data.questions.forEach((s) => { + data.questions && + data.questions.forEach((s) => { if (s.question_type === 101 && s.config.price_gradient.length <= 0) { isFb = false; content = 'psm题目未完成设置，请设置价格区间后投放'; @@ -77,15 +77,15 @@ const canPlanetPublishPSM = function(data) { * @param {*} data * @returns */ -const canPlanetPublishMxdAndHotArea = function(data) { +const canPlanetPublishMxdAndHotArea = function (data) { let isFb = true; let content = ''; const qSteams = []; const incompleteQuestionList = []; let type = 0; let title = '题目设置未完成'; - data.questions - && data.questions.forEach((s) => { + data.questions && + data.questions.forEach((s) => { if (s.question_type === 105 && s.config.design_version <= 0) { isFb = false; content = 'maxdiff题目未完成设置，请生成设计后投放'; @@ -124,14 +124,14 @@ const canPlanetPublishMxdAndHotArea = function(data) { * @param {*} data * @returns */ -const canPlanetPublish3D = function(data) { +const canPlanetPublish3D = function (data) { { let canFB = true; let content = ''; const qSteams = []; let title = ''; - data.questions - && data.questions.forEach((s) => { + data.questions && + data.questions.forEach((s) => { if (QUESTION_TYPE.contains(s.question_type)) { try { if (s.config.is_three_dimensions && !s.config.scene) { @@ -161,15 +161,15 @@ const canPlanetPublish3D = function(data) { let content = ''; const qSteams = []; let title = ''; - data.questions - && data.questions.forEach((s) => { + data.questions && + data.questions.forEach((s) => { if (QUESTION_TYPE.contains(s.question_type)) { try { if (s.config.is_three_dimensions && s.config.is_binding_goods) { const wares = []; const _sceneInformation = s.config.scene_information; - const sceneInformation - = typeof _sceneInformation === 'string' + const sceneInformation = + typeof _sceneInformation === 'string' ? JSON.parse(_sceneInformation) : _sceneInformation; sceneInformation.shelves.forEach((shelf) => { @@ -221,14 +221,14 @@ const canPlanetPublish3D = function(data) { * @param {*} data * @returns */ -const canPlanetPublishImage = function(data) { +const canPlanetPublishImage = function (data) { { let canFB = true; let content = ''; const qSteams = []; let title = ''; - data.questions - && data.questions.forEach((s) => { + data.questions && + data.questions.forEach((s) => { if (s.question_type === 13) { try { if (s.options.length <= 0 || s.options.some((y) => y.length <= 0)) { @@ -236,7 +236,7 @@ const canPlanetPublishImage = function(data) { qSteams.push(`(${s.title})`); } } catch (error) { - console.warn(error); + // 错误返回 } } }); @@ -323,8 +323,8 @@ function canPublishRandom(data, publishType) { if (!isValidated) { errors.push({ message: - field.message - || `请填写“${random.title}”中第${index + 1}组“随机题组”的“${field.name}”` + field.message || + `请填写“${random.title}”中第${index + 1}组“随机题组”的“${field.name}”` }); } }); @@ -378,7 +378,7 @@ function canPublishRandom(data, publishType) { // return false; // } -export const canPlanetPublish = async function(sn, publishType) { +export const canPlanetPublish = async function (sn, publishType) { const parsedPublishType = !publishType ? 2 : publishType; const num = window.location.href.indexOf('code='); diff --git a/src/main.ts b/src/main.ts index d400568..f25e063 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,9 +3,10 @@ import 'amfe-flexible'; import { createApp } from 'vue'; import { createPinia } from 'pinia'; import App from './App.vue'; +import 'vant/lib/index.css'; + import router from './router'; // 2. 引入组件样式 -import 'vant/lib/index.css'; import appBridge from '@/assets/js/appBridge'; router.beforeEach((to, from, next) => { appBridge.setTitle(to.meta.title as string); diff --git a/src/utils/common.js b/src/utils/common.js index 071e970..842ac0b 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -1,331 +1,87 @@ +import { + radio, + checkbox, + completion, + rate, + martrixQuestion, + fileUpload, + textWithImages, + signQuestion, + nps +} from '@/utils/importJsons'; const basicQuesTypeList = [ { - name: '选择题', - icon: '', - check: false, - type: 1, - childTypes: [1, 2] + icon: '', + name: '单选题', + question_type: 1, + json: radio }, { - name: '级联题', - icon: '', - check: false, - type: 3, - childTypes: [3] + icon: '', + name: '多选题', + question_type: 2, + json: checkbox }, { - name: '填空题', - icon: '', - check: false, - type: 4, - childTypes: [4] - }, - { - name: '多项填空题', - icon: '', - check: false, - type: 27, - childTypes: [27] - }, - { - name: '打分题', - icon: '', - check: false, - type: 5, - childTypes: [5] - }, - { - name: '矩阵题', - icon: '', - check: false, - type: 9, - childTypes: [8, 9, 10, 11] - }, - { - name: '图片题', - icon: '', - check: false, - type: 13, - childTypes: [12, 13, 14] - }, - { - name: '分类题', - icon: '', - check: false, - type: 15, - childTypes: [15] - }, - { - name: '排序题', - icon: '', - check: false, - type: 16, - childTypes: [16] - }, - { - name: '图文说明题', - icon: '', - check: false, - type: 6, - childTypes: [6] - }, - { - name: '日期/时间', - icon: '', - check: false, - type: 7, - childTypes: [7] - }, - { - name: '恒定总和题', - icon: '', - check: false, - type: 17, - childTypes: [17] - }, - { - name: '文件上传题', - icon: '', - check: false, - type: 18, - childTypes: [18] - }, - { - name: '热区题', - icon: '', - check: false, - type: 25, - childTypes: [25, 56] - }, - { - name: 'NPS', - icon: '', - check: false, - type: 106, - childTypes: [106] - } -]; -const quickQuesTypeList = [ - { - name: '姓名', - icon: '', - check: false, - type: 4, - quickType: 6 - }, - { - name: '性别', - icon: '', - check: false, - type: 1, - quickType: 7 - }, - { - name: '手机号', - icon: '', - check: false, - type: 20 - }, - { - name: '身份证号', - icon: '', - check: false, - type: 4, - quickType: 2 - }, - { - name: '邮箱', - icon: '', - check: false, - type: 4, - quickType: 8 - }, - { - name: '年龄', - icon: '', - check: false, - type: 4, - quickType: 9 - }, - { - name: '年龄段', - icon: '', - check: false, - type: 1, - quickType: 10 - }, - { - name: '生日', - icon: '', - check: false, - type: 7, - quickType: 11 - }, - { - name: '学历', - icon: '', - check: false, - type: 1, - quickType: 12 - }, - { - name: '院校', - icon: '', - check: false, - type: 3, - quickType: 13 - }, - { - name: '专业', - icon: '', - check: false, - type: 3, - quickType: 14 - }, - { - name: '行业', - icon: '', - check: false, - type: 1, - quickType: 15 - }, - { - name: '地理位置', icon: '', - check: false, - type: 19, - quickType: 16 - }, - { - name: '省份', - icon: '', - check: false, - type: 3, - quickType: 3 - }, - { - name: '省市', - icon: '', - check: false, - type: 3, - quickType: 4 - }, - { - name: '省市区/县', - icon: '', - check: false, - type: 3, - quickType: 5 + name: '填空题', + question_type: 4, + json: completion }, // { - // type: 21, - // quickType: 21, - // name: "密码", - // icon: "", - // check: false, + // icon: 'phone-o', + // name: '图形打分', + // question_type: '4', + // json: rate // }, { - type: 22, - name: '签名题', - icon: '', - check: false + icon: '', + name: '数值打分', + question_type: 5, + json: rate }, { - type: 23, - name: '知情同意书', - icon: '', - check: false - } -]; -const advancedQuesTypeList = [ - { - name: 'Maxdiff', - icon: '', - check: false, - type: 105 - }, - // { - // name: "CBC", - // icon: "", - // check: false, - // type: 103, - // }, - // // { - // // name: "BPTO", - // // icon: "", - // // check: false, - // // type: 104, - // // }, - { - name: 'PSM', - icon: '', - check: false, - type: 101 + icon: '𓱿', + name: '矩阵单选', + question_type: 9, + json: martrixQuestion }, { - name: 'KANO', - icon: '', - check: false, - type: 102 - } -]; -const d3QuestypeList = [ - { - name: 'ID test', - icon: '', - check: false, - type: 200 + icon: '', + name: '矩阵多选', + question_type: 10, + json: martrixQuestion }, { - name: 'Experiment', - icon: '', - check: false, - type: 201 - } -]; -const uxSimuatorQuestypeList = [ - { - name: 'UI', - icon: '', - check: false, - type: 202 + icon: '', + name: '矩阵填空', + question_type: 8, + json: martrixQuestion }, { - name: 'Prototype', - icon: '', - check: false, - type: 203 + icon: '', + name: '文件上传', + question_type: 18, + json: fileUpload }, { - name: 'UE', - icon: '', - check: false, - type: 204 + icon: '', + name: '图文说明', + question_type: 6, + json: textWithImages + }, + { + icon: '', + name: '签名', + question_type: 22, + json: signQuestion + }, + { + icon: '', + name: 'NPS', + question_type: 106, + json: nps } ]; -function getIcon(item) { - let icon = ''; - - if (item.config.quick_type === 0) { - icon = basicQuesTypeList?.find((x) => x?.childTypes.includes(item?.question_type))?.icon || ''; - if (!icon) { - icon = quickQuesTypeList?.find((x) => x?.type === item?.question_type)?.icon || ''; - } - } else { - icon = quickQuesTypeList?.find((x) => x?.quickType === item?.config?.quick_type)?.icon || ''; - } - if (!icon) { - icon = advancedQuesTypeList?.find((x) => x?.type === item?.question_type)?.icon || ''; - } - return icon; -} - -module.exports = { - basicQuesTypeList, - quickQuesTypeList, - advancedQuesTypeList, - d3QuestypeList, - uxSimuatorQuestypeList, - getIcon -}; +export { basicQuesTypeList }; diff --git a/src/views/Design/Index.vue b/src/views/Design/Index.vue index da98914..05f73ed 100644 --- a/src/views/Design/Index.vue +++ b/src/views/Design/Index.vue @@ -439,7 +439,7 @@ onMounted(() => { .design-create { //min-height: calc(100vh); - background-color: #e9eef3; + //background-color: #e9eef3; color: #333; .slot-actions { diff --git a/src/views/Design/components/ActionCompoents/QuestionAction.vue b/src/views/Design/components/ActionCompoents/QuestionAction.vue index 682f3be..dc5bc16 100644 --- a/src/views/Design/components/ActionCompoents/QuestionAction.vue +++ b/src/views/Design/components/ActionCompoents/QuestionAction.vue @@ -1,5 +1,5 @@