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

style(css): 优化导航栏样式和内容编辑组件

Browse Source 
- 添加 sticky 导航栏样式，设置背景色和文字颜色
- 优化 contenteditable 组件样式，设置内容区域高度
- 更新字体图标样式，添加新图标
-调整列表样式，优化表格和代码高亮显示
This commit is contained in:
陈昱达
2025-03-17 15:13:17 +08:00
parent cb93501e49
commit 00a52ba8b4
17 changed files with 387 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,6 +32,22 @@ a,
background: linear-gradient(to bottom, $theme-color 200px, #f2f2f2 300px);
}
.navbar-header {
position: sticky;
top: 0;
width: 100%;
background-color: #70b937;
color: #fff;
& .van-nav-bar__content {
color: #fff;
& .van-nav-bar__title {
color: #fff;
}
}
}
@media (hover: hover) {
a:hover {
background-color: hsla(160deg, 100%, 37%, 0.2);

BIN
src/assets/img/create-right-back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

9
src/components/contenteditable.vue
View File

@@ -1,8 +1,12 @@
<template>
<div class="flex contenteditable align-center space-between" :class="className">
<p
:id="'editor' + id" ref="editor" :contenteditable="active" class="van-field contenteditable-content"
@focus="onFocus" v-html="modelValue"
:id="'editor' + id"
ref="editor"
:contenteditable="active"
class="van-field contenteditable-content"
@focus="onFocus"
v-html="modelValue"
></p>
<div class="right-icon ml10">
<slot name="right-icon"></slot>
@@ -218,6 +222,7 @@ const insertImageAtCaret = (html) => {
<style scoped lang="scss">
.contenteditable-content {
width: 100%;
height: 100%;
}
.right-icon {

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

@@ -1,9 +1,9 @@
@font-face {
font-family: mobilefont; /* Project id 4841764 */
src:
url('iconfont.woff2?t=1742025232194') format('woff2'),
url('iconfont.woff?t=1742025232194') format('woff'),
url('iconfont.ttf?t=1742025232194') format('truetype');
url('iconfont.woff2?t=1742191207096') format('woff2'),
url('iconfont.woff?t=1742191207096') format('woff'),
url('iconfont.ttf?t=1742191207096') format('truetype');
}
.mobilefont {
@@ -14,6 +14,30 @@
-moz-osx-font-smoothing: grayscale;
}
.mobilefont-left-long::before {
content: '\e601';
}
.mobilefont-rubber::before {
content: '\ea15';
}
.mobilefont-huabi::before {
content: '\e61f';
}
.mobilefont-chexiao::before {
content: '\e6e2';
}
.mobilefont-shangchuan::before {
content: '\e613';
}
.mobilefont-qingkong::before {
content: '\e6dc';
}
.mobilefont-jiacu::before {
content: '\e71d';
}

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

File diff suppressed because one or more lines are too long

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

@@ -5,6 +5,76 @@
"css_prefix_text": "mobilefont-",
"description": "",
"glyphs": [
{
"icon_id": "36915584",
"name": "left-long",
"font_class": "left-long",
"unicode": "e601",
"unicode_decimal": 58881
},
{
"icon_id": "18171135",
"name": "橡皮,擦除,橡皮擦",
"font_class": "rubber",
"unicode": "ea15",
"unicode_decimal": 59925
},
{
"icon_id": "10398166",
"name": "画笔",
"font_class": "huabi",
"unicode": "e61f",
"unicode_decimal": 58911
},
{
"icon_id": "4890374",
"name": "撤销",
"font_class": "chexiao",
"unicode": "e6e2",
"unicode_decimal": 59106
},
{
"icon_id": "10885297",
"name": "上传",
"font_class": "shangchuan",
"unicode": "e613",
"unicode_decimal": 58899
},
{
"icon_id": "9520037",
"name": "清空",
"font_class": "qingkong",
"unicode": "e6dc",
"unicode_decimal": 59100
},
{
"icon_id": "7192343",
"name": "blod",
"font_class": "jiacu",
"unicode": "e71d",
"unicode_decimal": 59165
},
{
"icon_id": "7192349",
"name": "qingxie",
"font_class": "qingxie",
"unicode": "e71e",
"unicode_decimal": 59166
},
{
"icon_id": "7192354",
"name": "undline",
"font_class": "xiahuaxian",
"unicode": "e720",
"unicode_decimal": 59168
},
{
"icon_id": "7193682",
"name": "image",
"font_class": "tupian",
"unicode": "e730",
"unicode_decimal": 59184
},
{
"icon_id": "6135228",
"name": "del",

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.

40
src/layouts/utils.js
View File

@@ -48,8 +48,8 @@ const canPlanetPublishPSM = function (data) {
let message = '';
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;
message = 'psm题目未完成设置，请设置价格区间后投放';
@@ -80,8 +80,8 @@ const canPlanetPublishMxdAndHotArea = function (data) {
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;
message = 'maxdiff题目未完成设置，请生成设计后投放';
@@ -126,8 +126,8 @@ const canPlanetPublish3D = function (data) {
let message = '';
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) {
@@ -157,15 +157,15 @@ const canPlanetPublish3D = function (data) {
let message = '';
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,8 +221,8 @@ const canPlanetPublishImage = function (data) {
let message = '';
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)) {
@@ -317,8 +317,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}"`
});
}
});
@@ -350,7 +350,7 @@ function combineQuesAndPage(quesList, pages, pagesStr) {
newPages.forEach((x, index) => {
if (x === 'empty') {
copyList.splice(index, 0, pagesStr[startIndex]);
startIndex++;
startIndex += 1;
}
});
return copyList;
@@ -397,11 +397,11 @@ function isLoopingLogicValid(data, publishType) {
if (
(data?.cycle_pages || []).every((i) => {
return (
i.question_index &&
i.relation_type !== undefined &&
i.relation_type !== null &&
i.first_page &&
i.last_page
i.question_index
&& i.relation_type !== undefined
&& i.relation_type !== null
&& i.first_page
&& i.last_page
);
})
) {

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

@@ -105,7 +105,7 @@ const chooseItem = () => {
& .choose-question-context {
overflow: hidden;
padding: 10px;
border-radius: 8px;
border-radius: 16px;
background: #fff;
& .title {

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

@@ -1,8 +1,14 @@
<template>
<div class="container">
<van-nav-bar :title="surveyTitle" left-text="" left-arrow @click-left="$router.go(-1)">
<van-nav-bar
class="navbar-header"
:title="surveyTitle"
left-text=""
left-arrow
@click-left="$router.go(-1)"
>
<template #left>
<van-icon name="arrow-left" size="18" style="color: #fff" />
<van-icon name="left-long" class-prefix="mobilefont" size="18" style="color: #fff" />
</template>
</van-nav-bar>
@@ -34,7 +40,9 @@
<!-- </div>-->
<!-- </van-cell-group>-->
<div class="title-right">图标</div>
<div class="title-right">
<div class="right-icon"></div>
</div>
</div>
<div class="ques">
@@ -549,37 +557,49 @@ onMounted(async() => {
<style scoped lang="scss">
@import '@/assets/css/theme';
::v-deep .van-nav-bar {
background-color: #70b937;
color: #fff;
& .van-nav-bar__content {
color: #fff;
& .van-nav-bar__title {
color: #fff;
}
}
}
.container {
& .question-title {
padding: 0 20px;
background-color: transparent !important;
& .title-left {
max-height: 200px;
color: #fff;
::v-deep .content-title {
overflow: auto;
width: 230px;
height: 30px;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}
::v-deep .introduction {
overflow: auto;
width: 230px;
height: 50px;
}
}
& .title-right {
margin-right: 50px;
margin-left: 20px;
position: relative;
flex: 1;
width: 65px; /* 根据实际图片大小调整 */
height: 50px;
margin-right: 40px;
margin-left: 30px;
padding-top: 30px;
& .right-icon {
position: absolute;
bottom: -70px;
left: -10px;
width: 65px; /* 根据实际图片大小调整 */
height: 140px; /* 根据实际图片大小调整 */
background: url('@/assets/img/create-right-back.png') no-repeat center center;
background-size: cover;
}
}
}
}
@@ -600,10 +620,6 @@ onMounted(async() => {
color: #fff;
font-weight: bold;
}
* {
//font-size: 12px;
}
}
::v-deep .van-popup--bottom.van-popup--round {
@@ -673,8 +689,6 @@ onMounted(async() => {
border-radius: 8px;
background: rgba(240, 248, 235, 1);
color: $theme-color;
//opacity: 0.1;
}
}
@@ -683,7 +697,7 @@ onMounted(async() => {
height: 250px;
margin: 10px;
padding: 10px;
border-radius: 8px;
border-radius: 16px;
background: #fff;
text-align: center;

179
src/views/Survey/views/Preview/Index.vue
View File

@@ -1,6 +1,10 @@
<template>
<div ref="scrollbar" class="container">
<van-nav-bar title="预览" left-arrow />
<van-nav-bar title="预览" left-arrow>
<template #left>
<van-icon name="left-long" class-prefix="mobilefont" size="18" style="color: #fff" />
</template>
</van-nav-bar>
<!-- <van-nav-bar :title="getDomString(questionsData?.survey?.title)" left-arrow />-->
<!-- 进度条 -->
@@ -20,7 +24,9 @@
</van-cell-group>
</van-cell-group>
<div
v-if="styleInfo.logo_status && styleInfo.logo_url" class="example-logo" :style="[
v-if="styleInfo.logo_status && styleInfo.logo_url"
class="example-logo"
:style="[
{
'justify-content':
styleInfo.logo_site === 1
@@ -41,29 +47,53 @@
</div>
<!-- 问题 -->
<!-- eslint-disable-next-line -->
<div class="questions" :style="`min-height: ${styleInfo.head_img_status ? 'calc(100% - 240px)' : '100%'};${styleInfo.background_status
<div
class="questions"
:style="`min-height: ${styleInfo.head_img_status ? 'calc(100% - 240px)' : '100%'};${
styleInfo.background_status
? `background-color: ${styleInfo.background_color};background-image: url(${styleInfo.background_url})`
: ''
}`"
>
<!-- 提前终止和正常完成 -->
<q-last
v-if="page === pages.length + 1" :code="questionsData.action?.code" :action="questionsData.action"
:survey="questionsData.survey" :isAnswer="isAnswer" :isTemplate="isTemplate"
v-if="page === pages.length + 1"
:code="questionsData.action?.code"
:action="questionsData.action"
:survey="questionsData.survey"
:isAnswer="isAnswer"
:isTemplate="isTemplate"
/>
<!-- 问卷名和描述 -->
<q-first
v-else-if="page === 0" isMobile :title="questionsData?.survey?.title"
:desc="questionsData?.survey?.introduction" :questions="questionsData?.questions" :isAnswer="isAnswer"
:showTitle="styleInfo.is_title" :showDesc="styleInfo.is_introduce" :label="questionsData?.survey?.title"
v-else-if="page === 0"
isMobile
:title="questionsData?.survey?.title"
:desc="questionsData?.survey?.introduction"
:questions="questionsData?.questions"
:isAnswer="isAnswer"
:showTitle="styleInfo.is_title"
:showDesc="styleInfo.is_introduce"
:label="questionsData?.survey?.title"
/>
<!-- 题-mobile -->
<question
v-for="question in questions" v-else :id="'questionIndex' + question.question_index"
:key="question.question_index" class="question" :tip="question.tip" :stem="question.stem"
:title="question.title" :error="question.error" :warning="question.warning" :questions="questionsData.questions"
:questionType="question.question_type" :questionIndex="question.question_index"
:showTitle="styleInfo.is_question_number && true" isMobile :isAnswer="isAnswer"
v-for="question in questions"
v-else
:id="'questionIndex' + question.question_index"
:key="question.question_index"
class="question"
:tip="question.tip"
:stem="question.stem"
:title="question.title"
:error="question.error"
:warning="question.warning"
:questions="questionsData.questions"
:questionType="question.question_type"
:questionIndex="question.question_index"
:showTitle="styleInfo.is_question_number && true"
isMobile
:isAnswer="isAnswer"
>
<!-- <q-radio-->
<!-- v-if="question.question_type === 1"-->
@@ -81,10 +111,18 @@
<!-- />-->
<!-- 单选题 -->
<preview-choice
v-if="question.question_type === 1" v-model:answer="question.answer"
v-model:answerIndex="question.answerIndex" :list="question.list" :config="question.config"
:hideOptions="question.hideOptions" :stem="question.stem" :answerSn="questionsData.answer.sn"
:answerSurveySn="questionsData.answer.survey_sn" :question="question" @previous="previous" @next="next"
v-if="question.question_type === 1"
v-model:answer="question.answer"
v-model:answerIndex="question.answerIndex"
:list="question.list"
:config="question.config"
:hideOptions="question.hideOptions"
:stem="question.stem"
:answerSn="questionsData.answer.sn"
:answerSurveySn="questionsData.answer.survey_sn"
:question="question"
@previous="previous"
@next="next"
@change-answer="onRelation($event, question)"
/>
<!-- &lt;!&ndash; 多选题 &ndash;&gt;-->
@@ -115,9 +153,16 @@
<!-- />-->
<!-- 填空题 -->
<preview-completion
v-else-if="question.question_type === 4" :config="question.config" :answer="question.answer"
:stem="question.stem" :answerSn="questionsData.answer.sn" :answerSurveySn="questionsData.answer.survey_sn"
:question="question" @previous="previous" @next="next" @change-answer="onRelation($event, question)"
v-else-if="question.question_type === 4"
:config="question.config"
:answer="question.answer"
:stem="question.stem"
:answerSn="questionsData.answer.sn"
:answerSurveySn="questionsData.answer.survey_sn"
:question="question"
@previous="previous"
@next="next"
@change-answer="onRelation($event, question)"
/>
<!-- &lt;!&ndash; 打分题 &ndash;&gt;-->
<!-- <q-rate-->
@@ -152,21 +197,38 @@
<!-- />-->
<!-- 矩阵填空题 -->
<preview-matrix-text
v-else-if="question.question_type === 8" v-model:answer="question.answer"
:list="question.list" :config="question.config" :stem="question.stem" :question="question"
@previous="previous" @next="next" @change-answer="onRelation($event, question)"
v-else-if="question.question_type === 8"
v-model:answer="question.answer"
:list="question.list"
:config="question.config"
:stem="question.stem"
:question="question"
@previous="previous"
@next="next"
@change-answer="onRelation($event, question)"
/>
<!-- 矩阵单选题 -->
<preview-matrix-radio
v-else-if="question.question_type === 9" v-model:answer="question.answer"
:list="question.list" :config="question.config" :stem="question.stem" :answerSn="questionsData.answer.sn"
:answerSurveySn="questionsData.answer.survey_sn" :question="question"
@change-answer="onRelation($event, question)" @previous="previous" @next="next"
v-else-if="question.question_type === 9"
v-model:answer="question.answer"
:list="question.list"
:config="question.config"
:stem="question.stem"
:answerSn="questionsData.answer.sn"
:answerSurveySn="questionsData.answer.survey_sn"
:question="question"
@change-answer="onRelation($event, question)"
@previous="previous"
@next="next"
/>
<!-- 矩阵多选题 -->
<preview-matrix-checkbox
v-else-if="question.question_type === 10" v-model:answer="question.answer"
:list="question.list" :config="question.config" :question="question" isMobile
v-else-if="question.question_type === 10"
v-model:answer="question.answer"
:list="question.list"
:config="question.config"
:question="question"
isMobile
@change-answer="onRelation($event, question)"
/>
<!-- &lt;!&ndash; 矩阵打分题 &ndash;&gt;-->
@@ -237,8 +299,12 @@
<!-- />-->
<!-- 文件上传题 -->
<preview-file-upload
v-else-if="question.question_type === 18" v-model:answer="question.answer"
:config="question.config" :question="question" isMobile :questionIndex="question.question_index"
v-else-if="question.question_type === 18"
v-model:answer="question.answer"
:config="question.config"
:question="question"
isMobile
:questionIndex="question.question_index"
@change-answer="onRelation($event, question)"
/>
<!-- &lt;!&ndash; 地理位置题 &ndash;&gt;-->
@@ -400,31 +466,60 @@
<!-- />-->
<!-- &lt;!&ndash; 高级题型-NPS &ndash;&gt;-->
<preview-n-p-s
v-else-if="question.question_type === 106" v-model:answer="question.answer" :isPreview="true"
:title="question.title" :stem="question.stem" :list="question.list" :config="question.config"
:isAnswer="isAnswer" :questionIndex="question.question_index" :label="question.title" :loading="loading"
:isTemplate="isTemplate" :showTitle="styleInfo.is_question_number" :question="question" @previous="previous"
@next="next" @change-answer="onRelation($event, question)"
v-else-if="question.question_type === 106"
v-model:answer="question.answer"
:isPreview="true"
:title="question.title"
:stem="question.stem"
:list="question.list"
:config="question.config"
:isAnswer="isAnswer"
:questionIndex="question.question_index"
:label="question.title"
:loading="loading"
:isTemplate="isTemplate"
:showTitle="styleInfo.is_question_number"
:question="question"
@previous="previous"
@next="next"
@change-answer="onRelation($event, question)"
/>
</question>
<!-- 分页 -->
<!-- eslint-disable max-len -->
<div v-show="showPage" class="footer-page">
<pfe-pagination
class="pagination" :page="page" :pages="pages.length + 1" :min="styleInfo.is_home ? 0 : 1"
:loading="loading" :showPrevious="styleInfo.is_up_button" :showStart="styleInfo.is_start_button"
:startText="styleInfo.start_button_text" :showSubmit="styleInfo.is_submit_button" :submitText="localPageTimer.is_show && localPageTimer.short_time
class="pagination"
:page="page"
:pages="pages.length + 1"
:min="styleInfo.is_home ? 0 : 1"
:loading="loading"
:showPrevious="styleInfo.is_up_button"
:showStart="styleInfo.is_start_button"
:startText="styleInfo.start_button_text"
:showSubmit="styleInfo.is_submit_button"
:submitText="
localPageTimer.is_show && localPageTimer.short_time
? `${localPageTimer.short_time}S`
: styleInfo.submit_button_text
" :buttonTextColor="styleInfo.button_text_color" :buttonColor="styleInfo.button_color" :nextText="localPageTimer.is_show && localPageTimer.short_time
"
:buttonTextColor="styleInfo.button_text_color"
:buttonColor="styleInfo.button_color"
:nextText="
localPageTimer.is_show && localPageTimer.short_time
? `${localPageTimer.short_time}S`
: ''
" :nextDisabled="localPageTimer.short_time" isMobile @previous="previous" @next="next"
"
:nextDisabled="localPageTimer.short_time"
isMobile
@previous="previous"
@next="next"
/>
</div>
<!-- eslint-enable max-len -->
<LangTranslate
v-if="isAnswer && styleInfo.is_yip" translate-key="PoweredByDigitalTechnologyCenterYIP"
v-if="isAnswer && styleInfo.is_yip"
translate-key="PoweredByDigitalTechnologyCenterYIP"
class="footer"
/>
</div>

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

@@ -24,8 +24,13 @@
<div v-if="status === 0 || status === 2" class="pulish-container">
<img class="not-publish-icon" src="@/assets/img/publish/not_pulish.png" alt="" />
<div class="text">点击"启用"按钮后，问卷才可以开始回收数据</div>
<van-button type="primary" style="margin-top: 20px" class="publish-btn" color="#70b936"
@click="openPublishModal">
<van-button
type="primary"
style="margin-top: 20px"
class="publish-btn"
color="#70b936"
@click="openPublishModal"
>
<template #icon>
<i class="mobilefont icon-fabu3" style="margin-right: 6px"></i>
</template>
@@ -123,8 +128,8 @@ function shareLink () {
scene: 0 // 朋友圈1 微信好友0
};
console.log('shareUrl', publishInfo.value.url);
appBridge.shareToWeChat(params, () => {
});
// eslint-disable-next-line
appBridge.shareToWeChat(params, () => {});
}
// 下载二维码
@@ -201,11 +206,12 @@ onMounted(async () => {
<style scoped lang="scss">
.container {
height: 100vh;
background: linear-gradient(to bottom, #70B937 5.33333rem, #F2F2F2 8rem);
background: linear-gradient(to bottom, #70b937 5.3rem, #f2f2f2 8rem);
button {
padding: 3px 20px;
border: none;
/* background-color: #f2f2f2; */
}
}
@@ -226,21 +232,19 @@ onMounted(async () => {
flex-direction: column;
justify-content: center;
margin: 0 10px;
line-height: 20px;
font-size: 14px;
font-weight: 600;
font-size: 14px;
line-height: 20px;
}
}
.tip {
margin: 18px 24px;
font-size: 12px;
color: #7f7f7f;
font-size: 12px;
}
}
.operation {
display: flex;
flex-direction: row;